/* ============================================================
   Case page — Figma "Portfolio" › Case — Bondata · kit (429:21011)

   Loaded after css/style.css, which owns the fluid units (--u,
   --lu), the type and space scales, the colours, the work rows and
   the footer. Nothing here redefines any of that.

   Full screen: the case carries no bar. The only chrome is the
   contents rail in the left column, sticky from the top of the
   case to the end of its results.

   Measured off the file, 1440 canvas, 40 margins:

     aside 346 · text column 680 · image column 1014
     Overview   pad 40/40, head 640 wide, a rule, then the meta
     Cover      1440 × 674, edge to edge
     Bands      pad 80/80; Problem and Design on #FFFEFC
     Decisions  pad 40/40 each, 40 from the text to the shot
     Works      as on the home page, footer straight after

   Type and vertical rhythm are in --u like the rest of the site;
   the aside and the image column are in --lu, the unit of the
   file's 1360 column. Text measures are in --u so the lines break
   where the file breaks them.
   ============================================================ */

:root{
  --case-aside: calc(346 * var(--lu));
  --case-wide:  calc(1014 * var(--lu));     /* images, the overview meta */
  --case-text:  calc(680 * var(--u));       /* every text column         */

  --fs-big:  max(16px, calc(18 * var(--u)));   /* Body/Big                 */
  --fs-h3:   max(22px, calc(30 * var(--u)));   /* Heading/Case study H2    */

  /* Media sit on the page's centre, not the text column's. They
     stay clear of the contents rail: never wider than the window
     minus, on each side, the gutter, the rail and 40 of air. */
  --rail-w:      calc(90 * var(--u));
  --media-clear: calc(var(--gutter) + var(--rail-w) + var(--sp-40));

  --tile-line: #E5DFD5;                      /* stat tile outline (sand)  */
  --trend-bg:  rgba(129, 218, 46, .3);       /* an improvement, up or down */
}

.page-case{
  --section-bg: var(--paper);
  --section-fg: var(--accent);
}

/* The rail is placed against this box: it runs from the overview to
   the end of the closing results, and no further. */
.case{ position:relative }

/* ── Contents ──────────────────────────────────────────────────
   Figma › Contents · sticky (429:21074): 40 from the top and the
   left of the page, held there while the case scrolls. It fades out
   while the cover passes behind it (js/case.js). */
.case__rail{
  position:absolute; z-index:20;
  top:0; bottom:0; left:var(--gutter);
  width:var(--case-aside);
  padding-top:var(--sp-40);
  pointer-events:none;
}
.contents{
  position:sticky; top:var(--sp-40);
  display:inline-flex; flex-direction:column; align-items:stretch;
  pointer-events:auto;
  transition:opacity .3s ease, visibility .3s;
}
.contents.is-hidden{ opacity:0; visibility:hidden }

.contents__home{
  display:flex; align-items:center; gap:calc(8 * var(--u));
  padding-bottom:calc(8 * var(--u));
  border-bottom:1px solid var(--rule);
  font-size:var(--fs-meta); line-height:normal;
  color:var(--ink-soft);
}
.contents__home span{ opacity:.7; transition:opacity .25s ease }
.contents__home svg{ width:calc(12 * var(--u)); height:auto; flex:none; opacity:.7 }
.contents__home:hover span, .contents__home:hover svg{ opacity:1 }

.contents__list{ margin-top:calc(24 * var(--u)); display:flex; flex-direction:column }
.contents__list a{
  padding:calc(8 * var(--u)) 0;
  font-size:var(--fs-meta); line-height:normal;
  color:var(--ink-soft); opacity:.7;
  transition:color .25s ease, opacity .25s ease;
}
.contents__list a:hover{ opacity:1 }
.contents__list a.is-current{ color:var(--accent); opacity:1 }

/* ── Bands ────────────────────────────────────────────────────
   Every band runs edge to edge; its copy starts after the aside. */
.case__band{
  padding:var(--sp-80) var(--gutter) var(--sp-80) calc(var(--gutter) + var(--case-aside));
  /* the band is the box media are centred in; 100cqw is its content
     box, so the page is that plus the padding on both sides */
  container-type:inline-size;
}
.case__band--bright{ background:var(--paper-bright) }
.case__col{
  width:var(--case-text); max-width:100%;
  display:flex; flex-direction:column; gap:var(--sp-40);
}

/* ── Overview ─────────────────────────────────────────────────── */
.case__overview{ padding-top:var(--sp-40); padding-bottom:var(--sp-40) }
.case__overview .case__col{ width:var(--case-wide); gap:var(--sp-24) }

.case__head{ width:calc(640 * var(--u)); max-width:100%; display:flex; flex-direction:column; gap:var(--sp-16) }
.case__title{
  font-size:var(--fs-lead); font-weight:600;
  line-height:1.1; letter-spacing:-.04em;
  color:var(--ink);
}
.case__lede{
  font-size:var(--fs-big); line-height:1.5; letter-spacing:-.04em;
  color:var(--ink-soft);
}

/* The divider: 0.5 in the rule grey. */
.rule{ height:0; margin:0; border:0; border-top:.5px solid var(--rule) }

/* Two halves: what I did on the left, four facts in a 2 × 2 on the
   right — 180 wide, pushed to the ends of their half, 53 apart. */
.case__meta{ display:flex; align-items:flex-start }
.case__meta > *{ flex:1 1 0; min-width:0 }
.case__facts{
  display:grid; grid-template-columns:repeat(2, calc(180 * var(--u)));
  justify-content:space-between;
  row-gap:calc(53 * var(--u));
}

.meta{ display:flex; flex-direction:column; gap:var(--sp-16) }
.meta__label{
  font-size:var(--fs-meta); line-height:normal;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
.meta__value{
  font-size:var(--fs-big); line-height:1.5; letter-spacing:-.04em;
  color:var(--ink);
}

/* ── Cover ────────────────────────────────────────────────────
   1440 × 674 in the file, edge to edge. */
.case__cover{ border:.5px solid var(--rule) }
.case__cover .case__video{ height:auto; aspect-ratio:1440 / 674 }

/* ── Headings and copy ────────────────────────────────────────── */
.text-row{ display:flex; flex-direction:column; gap:var(--sp-16) }

.case__h2{
  font-size:var(--fs-lead); font-weight:600;
  line-height:1.1; letter-spacing:-.04em;
  color:var(--ink);
}
.case__h3{
  font-size:var(--fs-h3); font-weight:600;
  line-height:1.1; letter-spacing:-.04em;
  color:var(--ink);
}
.case__h3--medium{ font-weight:500 }

.case__big{ font-size:var(--fs-big); line-height:1.5; letter-spacing:-.04em; color:var(--ink) }
.case__big + .case__big{ margin-top:var(--sp-16) }
.case__big strong, .decision__text strong{ font-weight:600 }

/* The file's bullet: a 4 px square turned 45°, coral at 80%, centred
   on the first line. */
.bullets{ display:flex; flex-direction:column; gap:var(--sp-8) }
.bullets li{
  display:flex; align-items:flex-start; gap:var(--sp-8);
  font-size:var(--fs-big); line-height:1.5; letter-spacing:-.04em;
  color:var(--ink);
}
.bullets li::before{
  content:""; flex:none;
  width:4px; height:4px; border-radius:1px;
  margin:calc(.75em - 2px) 1px 0;
  background:var(--coral); opacity:.8;
  transform:rotate(45deg);
}

/* ── Results ──────────────────────────────────────────────────
   Figma › Stat tile (536:103): the value, an optional baseline, the
   label, and at the foot a green chip with the relative change. */
.results{ display:flex; flex-direction:column; gap:var(--sp-24) }
.stats{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:calc(12 * var(--u));
}
.stat{
  min-height:calc(228 * var(--u));
  padding:calc(20 * var(--u));
  display:flex; flex-direction:column; gap:calc(12 * var(--u));
  background:var(--paper-bright);
  border:1px solid var(--tile-line); border-radius:2px;
}
.stat__figure{ display:flex; align-items:baseline; gap:var(--sp-8); white-space:nowrap }
.stat__figure b{
  font-size:var(--fs-lead); font-weight:600;
  line-height:1.1; letter-spacing:-.04em;
}
.stat__figure span, .stat__trend > span:last-child{
  font-size:var(--fs-small); line-height:1.5; letter-spacing:-.02em;
  color:var(--ink-soft);
}
.stat__label{ font-size:var(--fs-small); line-height:1.5; letter-spacing:-.02em }
.stat__trend{ margin-top:auto; display:flex; align-items:center; gap:var(--sp-8); white-space:nowrap }
.stat__chip{
  display:inline-flex; align-items:center; gap:calc(4 * var(--u));
  padding:calc(3 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)) calc(8 * var(--u));
  border-radius:2px; background:var(--trend-bg);
  font-size:var(--fs-body); font-weight:600; line-height:1.5; letter-spacing:-.02em;
}
.stat__chip svg{ width:calc(16 * var(--u)); height:calc(16 * var(--u)); flex:none }

/* ── Centred media ────────────────────────────────────────────
   Every shot, video and the matrix: 1014 of the 1360 column wide
   at most, centred on the band — the band spans the page — by
   pulling it back past the band's left padding. */
.case__media{
  --page-w:  calc(100cqw + 2 * var(--gutter) + var(--case-aside));
  --media-w: min(var(--case-wide), calc(var(--page-w) - 2 * var(--media-clear)));
  width:var(--media-w); max-width:none;
  margin-left:calc((var(--page-w) - var(--media-w)) / 2 - var(--gutter) - var(--case-aside));
}

/* ── Images ───────────────────────────────────────────────────
   A shot is the fill of a fixed box in the file, scaled to cover it:
   the box carries the file's own ratio (--ar) and the image covers. */
.case__figure img, .shot__frame img,
.case__video{ width:100%; height:100%; display:block; object-fit:cover }
.case__video{ background:var(--media) }
.case__figure img{ aspect-ratio:var(--ar) }
.shot__frame{
  border:.5px solid var(--rule);
  aspect-ratio:var(--ar);
  overflow:hidden;
}

/* ── Video bar ────────────────────────────────────────────────
   Built by js/case.js: play/pause, a scrub line, the time. It sits
   inside the bottom edge of the frame and shows while the pointer is
   over it, playing or paused, or while it has keyboard focus. On a
   touch screen a tap shows it and it goes again after a few seconds
   (.is-shown, set by the script). Hidden, it lets taps through to
   the video. */
.has-vctl{ position:relative }
.has-vctl .case__video{ cursor:pointer }
.vctl{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; gap:12px;
  height:36px; padding:0 14px 0 4px;
  background:rgba(18,18,18,.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:2px;
  color:var(--paper-bright);
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.vctl:has(:focus-visible), .vctl.is-shown{ opacity:1; transform:none; pointer-events:auto }
/* touch browsers keep :hover after a tap, so hover is for mice only */
@media (hover:hover){ .has-vctl:hover .vctl{ opacity:1; transform:none; pointer-events:auto } }

.vctl__play{
  flex:none; width:28px; height:28px;
  display:grid; place-items:center;
  border:0; padding:0; background:none; color:inherit; cursor:pointer;
  border-radius:2px;
}
.vctl__play svg{ width:12px; height:12px }
.vctl__play:hover{ background:rgba(255,255,255,.12) }

.vctl__seek{
  --p:0%;
  flex:1; min-width:0; height:20px; margin:0;
  -webkit-appearance:none; appearance:none;
  background:none; cursor:pointer;
  touch-action:pan-y;   /* a sideways drag scrubs, it is not a page pan */
}
.vctl__seek::-webkit-slider-runnable-track{
  height:2px; border-radius:1px;
  background:linear-gradient(to right, var(--paper-bright) var(--p), rgba(255,255,255,.3) var(--p));
}
.vctl__seek::-moz-range-track{ height:2px; border-radius:1px; background:rgba(255,255,255,.3) }
.vctl__seek::-moz-range-progress{ height:2px; border-radius:1px; background:var(--paper-bright) }
.vctl__seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; margin-top:-4px; border:0; border-radius:50%;
  background:var(--paper-bright);
  transition:transform .15s ease;
}
.vctl__seek::-moz-range-thumb{ width:10px; height:10px; border:0; border-radius:50%; background:var(--paper-bright) }
.vctl__seek:hover::-webkit-slider-thumb, .vctl__seek:active::-webkit-slider-thumb{ transform:scale(1.3) }
.vctl__seek:focus-visible{ outline:none }
.vctl__seek:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--accent) }
.vctl__seek:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 3px var(--accent) }

.vctl__time{
  flex:none;
  font-size:12px; line-height:1; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* ── Design process ───────────────────────────────────────────── */
.case__design-head{ gap:var(--sp-24) }
.decisions{ width:var(--case-wide) }
.decision{
  padding:var(--sp-40) 0;
  display:flex; flex-direction:column; gap:var(--sp-40);
}
.decision__body{ width:var(--case-text); max-width:100%; display:flex; flex-direction:column; gap:var(--sp-24) }
.decision__head{ display:flex; align-items:flex-start; gap:var(--sp-8) }
.decision__num{
  flex:none;
  font-size:var(--fs-body); line-height:normal;
  color:var(--ink-soft);
}
.decision__title{
  font-size:var(--fs-h3); font-weight:600;
  line-height:1.1; letter-spacing:-.04em;
}
.decision__text{ font-size:var(--fs-body); line-height:1.5; letter-spacing:-.02em }
.decision__text--big{ font-size:var(--fs-big); letter-spacing:-.04em }
/* the file leaves 24 under these two shots */
.decision__shot--padded{ margin-bottom:var(--sp-24) }

.shot-pair{
  display:grid; grid-template-columns:1fr 1fr; align-items:start;
  column-gap:calc(32 * var(--lu));
}
.shot{ display:flex; flex-direction:column; gap:calc(12 * var(--u)) }
.shot__label{
  font-size:var(--fs-body); font-weight:600; line-height:1.5; letter-spacing:-.02em;
  color:var(--ink-soft);
}

/* ── Works and footer ─────────────────────────────────────────
   The works band is the home page's; the footer follows it with no
   gap, and with no bar above it the mark starts at the top. */
.page-case .section--works{ margin-top:0 }
.page-case .site-footer{ margin-top:0; padding-top:2px }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  /* The rail becomes a strip stuck to the top of the window. */
  .case__rail{
    position:sticky; top:0; left:auto; bottom:auto;
    width:auto; padding:10px var(--gutter);
    background:var(--paper); border-bottom:1px solid var(--rule);
    pointer-events:auto;
  }
  .contents{ position:static; flex-direction:row; align-items:center; gap:16px; overflow-x:auto }
  .contents__home{ border:0; padding:0; flex:none }
  .contents__list{ margin:0; flex-direction:row; gap:16px }
  .contents__list a{ padding:0; white-space:nowrap }

  .case__band{ padding:56px var(--gutter) }
  .case__media{ width:100%; margin-left:0 }
  .case__overview{ padding-top:32px; padding-bottom:32px }
  .case__col, .case__overview .case__col, .case__head,
  .decisions, .decision__body{ width:100% }

  .case__meta{ flex-direction:column; gap:32px }
  .case__facts{ grid-template-columns:1fr 1fr; justify-content:stretch; column-gap:24px; row-gap:24px }

  .stats{ grid-template-columns:1fr 1fr }
  .stat{ min-height:200px }
  .shot-pair{ grid-template-columns:1fr; row-gap:24px }
  .decision{ padding:32px 0; gap:24px }
}

@media (max-width:560px){
  .stats{ grid-template-columns:1fr }
  .stat{ min-height:0 }
  .stat__trend{ margin-top:12px }
}