/* =============================================================================
   Case studies — light, clinical.
   Loaded AFTER site.css. site.css is almost entirely token-driven, so most of
   this is a palette swap; the rest patches the handful of rules that hard-code
   a dark value. Doing it this way keeps the peel animation's tuned geometry
   (clip-path percentages, transforms) untouched — none of it is colour.
   ========================================================================== */

:root{
  /* Grounds and surfaces */
  --paper:#FBFBFD;
  --paper-2:#F5F5F7;
  --card:#FFFFFF;

  /* Ink */
  --ink:#1D1D1F;
  --muted:#6E6E73;        /* 4.9:1 on paper — the lighter #86868B fails */

  /* Accent. Graphite: no hue, so hierarchy comes from weight and rule. */
  --navy:#1D1D1F;
  --on-accent:#FFFFFF;
  --navy-soft:#F5F5F7;

  /* The feature band stays dark on the light page — an Apple move, and the
     one place a dark surface still earns its keep. */
  --navy-deep:#1D1D1F;
  --plate-ink:#FFFFFF;
  --plate-muted:rgba(255,255,255,.72);
  --plate-acc:#FFFFFF;

  --line:#E8E8ED;
  --line-int:#86868B;

  /* Depth on white comes from a soft drop, never an inset highlight. */
  --lift-edge:none;
  --shadow-1:0 1px 2px rgba(0,0,0,.05);
  --shadow-2:0 1px 2px rgba(0,0,0,.05),0 20px 44px -24px rgba(0,0,0,.22);

  /* Match the homepage: SF Pro where it exists, the old face behind it. */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         "Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  color-scheme:light;
}

body{background:var(--paper);color:var(--ink)}
::selection{background:var(--navy);color:#fff}

/* --- The bar ---------------------------------------------------------------
   Same 48px translucent rule as the homepage, so moving between them does not
   feel like moving between two sites. */
:root{ --topbar-h:48px; }
.topbar{
  background:rgba(251,251,253,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
}
.topbar[data-stuck="true"]{
  background:rgba(251,251,253,.82);
  border-bottom-color:var(--line);
}
.ident{padding-block:0;height:var(--topbar-h);align-items:center}
.ident__back,.ident__name{font-size:.8125rem;font-weight:500}
.ident__back svg{color:var(--ink)}
.ident__logo svg{height:17px}
.ident__logo:hover{color:var(--ink);transform:none}

/* --- Surfaces that hard-coded a dark value -------------------------------- */

/* The lockup is dark artwork; on a dark ground it was inverted. It is not now. */
.case-lockup img{filter:none}

/* The bone scrim over each tile only reads on a dark ground. On white the
   tile is defined by its hairline and a soft drop instead. */
.bento{
  background-image:none;
  background-color:var(--card);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.bento--feature{
  background-color:var(--paper-2);
  border-color:var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.bento--feature .bento__k{color:var(--muted)}

/* The peel stack sat on near-black so the phone screens floated. The screens
   are white artwork, so on a light page the well has to be a shade darker
   than the page, not lighter. */
.peel{background:var(--paper-2);border-color:var(--line)}

/* Cards and plates */
.win{background:var(--paper-2);border-top-color:var(--ink)}
.callout{background:var(--paper-2)}
.chip{background:var(--card)}
.next-case{border-top-color:var(--line)}
.site-foot{border-top-color:var(--line)}

/* Figures read as objects on white, so they need an edge rather than a lift. */
figure img,.ba__item > img,.ref img{
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px -28px rgba(0,0,0,.25);
  background:var(--card);
}

/* The dimension arrows are the accent, so they follow it to graphite. */
.dim-stem{stroke:var(--ink);opacity:.85}
.dim-head{fill:var(--ink);opacity:.85}

/* Reading nav */
.case-toc a{color:var(--muted)}
.case-toc a:hover,.case-toc a[aria-current="true"]{color:var(--ink)}

/* Links in prose: with no hue, the rule under the text is the affordance. */
.prose a{
  box-shadow:none;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.28em;text-decoration-color:rgba(29,29,31,.3);
}
.prose a:hover{color:var(--ink);text-decoration-color:currentColor}

/* The step counter hard-codes its text to near-black, which was right on a
   champagne disc and invisible on a graphite one. */
.changes li::before{ color:var(--on-accent); }

/* A device-framed PNG carries its own edge and sits on transparency, so the
   card border draws a rectangle around empty space. drop-shadow follows the
   alpha channel, so the shadow hugs the device instead. */
figure img.cutout,
.pair__fig img.cutout,
.ref img.cutout{
  border:0; box-shadow:none; background:none;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.18));
}