/* Redesign study, in OmniWebs colours.

   It shares the redesign's structural language, a light ground with one dark
   band and one accent spent only on actions and figures, because the study has
   to look like the work it is arguing for. It does not share the redesign's
   palette or typefaces. Those belong to the client. This page is ours, so it
   carries OmniWebs' amber on OmniWebs' warm near black, set in Bricolage
   Grotesque and Hanken Grotesk, exactly as omniwebs.net does.

   Two pages in the same red orange and the same grotesk would read as one
   template used twice, which is the opposite of what a portfolio piece wants. */

@font-face { font-family: 'Bricolage'; src: url('assets/fonts/head.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('assets/fonts/body.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --paper: #FBFAF8;     /* warmed off white, so the light half belongs to the same family as the dark */
  --card: #F3F1EC;
  --near: #0D0C0B;      /* omniwebs.net background */
  --near-2: #161412;    /* omniwebs.net card */
  --ink: #17150F;
  --soft: #56513F;      /* 8.0:1 on the paper */
  --on-dark: #F2EEE7;   /* omniwebs.net ink */
  --on-dark-2: #A39C8F; /* omniwebs.net muted, 7.3:1 on the near black */
  --accent: #F59E0B;    /* OmniWebs amber. 9.1:1 against the near black, so it is
                           safe as text there. On the paper it is 2.1:1, so on the
                           light half it is a fill only, never type. */
  --bad: #8A5A00;       /* the amber pushed dark enough to set as text on paper, 5.9:1 */
  --line: #E4E0D6;
  --line-d: #34302A;
  --pad: clamp(1.15rem, 4.5vw, 4.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Hanken', ui-sans-serif, system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: 'Bricolage', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.022em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--near); color: var(--on-dark); padding: 0.75rem 1.25rem; text-decoration: none; }
.skip:focus { left: 0; }
.fine { margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; max-width: 50ch; font-size: 0.8125rem; line-height: 1.6; color: var(--soft); }
.lede { margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); max-width: 50ch; color: var(--soft); }

/* ---- Buttons ------------------------------------------------------------- */
.btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding: 0.65rem 1.25rem; border-radius: 6px; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.btn--fill { background: var(--accent); color: var(--near); }
.btn--fill:hover { background: #D98908; }
.btn--text { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; padding-left: 0.35rem; padding-right: 0.35rem; }
.btn--text:hover { color: var(--soft); }
.acts { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ---- Header -------------------------------------------------------------- */
.util__now { margin: 0; display: flex; align-items: center; gap: 0.5rem; background: var(--near); color: var(--on-dark); font-size: 0.8125rem; padding: 0.5rem var(--pad); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.util__bar { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 0.85rem var(--pad); border-bottom: 1px solid var(--line); }
.util__mark { margin: 0; font-family: 'Bricolage', ui-sans-serif, sans-serif; font-weight: 700; font-size: 1.1875rem; }
.util__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.util__nav a { text-decoration: none; font-size: 0.875rem; color: var(--soft); transition: color 180ms ease; }
.util__nav a:hover { color: var(--ink); }
.util__bar .btn { margin-left: auto; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { display: grid; gap: clamp(2rem, 5vw, 3.5rem); padding: clamp(2.5rem, 6vw, 4rem) var(--pad) clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 1021px) { .hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.hero h1 { margin: 0 0 0.9rem; font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12; max-width: 18ch; }
.hero__sub { margin: 0 0 clamp(1.5rem, 3.5vw, 2rem); max-width: 44ch; color: var(--soft); font-size: 1rem; }

/* ---- The frame and the slider -------------------------------------------- */
.frame { position: relative; padding: clamp(0.75rem, 1.8vw, 1.25rem); }
.frame::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: var(--near); }
.cmp { position: relative; z-index: 1; border-radius: 10px; overflow: hidden; background: var(--near-2); box-shadow: 0 10px 24px rgb(0 0 0 / 0.35); line-height: 0; }
.cmp::after { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.75), rgb(255 255 255 / 0)); }
.cmp__img { width: 100%; height: auto; display: block; }
.cmp__clip { position: absolute; inset: 0; width: 50%; overflow: hidden; }
/* the inner image must stay at the full frame width or it squashes as the clip
   narrows, which is exactly what happens if max-width is left at 100% */
.cmp__clip .cmp__img { width: var(--cmpw, 200%); max-width: none; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent); z-index: 3; pointer-events: none; }
.cmp__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--near);
}
.cmp__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp__range:focus-visible + .cmp__tag { outline: 3px solid var(--accent); }
/* Above the transparent range input rather than under it. Deliberately left
   hit-testable: with pointer-events none the topmost element at these two
   corners is the invisible input, which is genuine occlusion whatever the
   paint order says. The cost is that a drag begun exactly on a corner tag does
   not move the slider, which is a fair trade for two small labels. */
.cmp__tag {
  position: absolute; bottom: 0.75rem; z-index: 6; line-height: 1.4;
  background: rgb(10 9 8 / 0.82); color: var(--on-dark);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: 4px;
}
.cmp__tag--l { left: 0.75rem; }
.cmp__tag--r { right: 0.75rem; }

/* ---- The dark band ------------------------------------------------------- */
.deep { position: relative; background: var(--near); color: var(--on-dark); padding: clamp(3rem, 8vw, 6rem) var(--pad); overflow: hidden; }
.beam {
  position: absolute; top: -30%; right: -10%; width: 70%; height: 130%; pointer-events: none;
  background: linear-gradient(202deg, rgb(245 158 11 / 0.30) 0%, rgb(245 158 11 / 0.09) 34%, rgb(245 158 11 / 0) 62%);
  filter: blur(28px);
}
.deep h2, .deep__sub, .deep__fine, .bells { position: relative; z-index: 1; }
.deep h2 { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; max-width: 22ch; }
.deep__sub { margin: 0 0 clamp(2.25rem, 5vw, 3.5rem); max-width: 50ch; color: var(--on-dark-2); font-size: 0.9375rem; }
.deep__fine { margin: clamp(2rem, 4vw, 2.75rem) 0 0; max-width: 50ch; font-size: 0.8125rem; color: var(--on-dark-2); }

/* ---- Dumbbell plot ------------------------------------------------------- */
/* One row per rule. Zero is pinned at the left as a hollow ring, the original
   count sits at the right end of a solid bar, and the bar length is the whole
   argument. Both figures are printed and never move, so the chart reads at rest
   and the motion is only emphasis. */
.bells { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.bell { display: grid; gap: 0.35rem 1.25rem; align-items: center; padding: 0.55rem 0; }
@media (min-width: 861px) { .bell { grid-template-columns: minmax(0, 20rem) minmax(8rem, 1fr) 8.5rem; gap: 1.5rem; } }
.bell__l { font-size: 0.9375rem; font-weight: 500; }
.bell__track { position: relative; height: 14px; }
/* the baseline the bar is measured against, so an empty row still has an axis */
.bell__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-d); }
/* the target endpoint, above the bar so it still reads while the bar covers it */
.bell__zero {
  position: absolute; z-index: 2; left: 0; top: 50%; transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--on-dark-2); background: var(--near);
}
.bell__bar {
  position: absolute; z-index: 1; left: 0; top: 50%; transform: translateY(-50%);
  height: 5px; border-radius: 3px; background: var(--accent);
  width: calc(var(--p) * 1%);
  transition: width 720ms var(--ease);
}
.bell__dot {
  position: absolute; right: 0; top: 50%; transform: translate(50%, -50%);
  width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
}
/* the row that has been cut: the bar retracts into the zero ring */
.bell.is-cut .bell__bar { width: 0; }
.bell__n { font-size: 0.9375rem; color: var(--on-dark-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bell__n b { color: var(--accent); font-weight: 700; }
.bell__n i { color: var(--on-dark); font-style: normal; font-weight: 700; }
.bell--sum { border-top: 1px solid var(--line-d); margin-top: 0.5rem; padding-top: 1.1rem; }
.bell--sum .bell__l { font-family: 'Bricolage', ui-sans-serif, sans-serif; font-weight: 700; font-size: 1.0625rem; }
.bell--sum .bell__bar { height: 8px; }
.bell--sum .bell__n { font-size: 1.0625rem; }

/* ---- What changed -------------------------------------------------------- */
.instead { padding: clamp(3rem, 8vw, 6rem) var(--pad); }
.instead h2, .evidence h2, .ends h2 { margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; max-width: 22ch; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.cards article { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.cards h3 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 700; }
.cards p { margin: 0; max-width: 38ch; color: var(--soft); font-size: 0.9375rem; }

/* ---- Evidence ------------------------------------------------------------ */
.evidence { padding: clamp(3rem, 8vw, 6rem) var(--pad); border-top: 1px solid var(--line); }
.ev { width: 100%; max-width: 46rem; border-collapse: collapse; text-align: left; }
.ev th, .ev td { padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.ev thead th { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); border-bottom: 2px solid var(--ink); }
.ev tbody th { font-weight: 400; max-width: 34ch; }
.ev td { width: 6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev .bad { color: var(--bad); }
.ev .ok { color: var(--ink); }
.ev__sum th, .ev__sum td { border-bottom: 2px solid var(--ink); font-weight: 700; }
@media (max-width: 620px) {
  .ev td { width: 4.5rem; }
  .ev th, .ev td { padding-right: 0.5rem; font-size: 0.9375rem; }
}

/* ---- Close --------------------------------------------------------------- */
.ends { padding: clamp(3rem, 8vw, 6rem) var(--pad); border-top: 1px solid var(--line); }
.ends__p { margin: 0 0 clamp(1.5rem, 3.5vw, 2rem); max-width: 46ch; color: var(--soft); }

.foot { background: var(--near); color: var(--on-dark); padding: clamp(2.5rem, 6vw, 4rem) var(--pad) clamp(3rem, 7vw, 4.5rem); }
.foot__cols { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: clamp(2rem, 4vw, 3rem); }
.foot__cols > div { display: grid; gap: 0.4rem; align-content: start; }
.foot__cols h2 { margin: 0 0 0.2rem; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-2); font-weight: 600; }
.foot__cols a { text-decoration: none; font-size: 0.9375rem; color: var(--on-dark); transition: color 180ms ease; }
.foot__cols a:hover { color: var(--accent); }
.foot__mark { margin: 0; font-family: 'Bricolage', ui-sans-serif, sans-serif; font-weight: 700; font-size: 1.25rem; }
.foot .fine { color: var(--on-dark-2); }
.foot .fine strong { color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  /* the bars stay at full length: they are the data, not decoration */
  .bell.is-cut .bell__bar { width: calc(var(--p) * 1%); }
}