/* ============================================================
   CASE STUDY — a long read on the paper canvas.
   Rides on style.css tokens and borrows the secondary page
   header and footer from demo.css's language, but stands on
   its own so a case study never depends on the form styles.
   ============================================================ */
.cs{ background:var(--bg); }
.cs [hidden]{ display:none !important; }

/* ---------- header ---------- */
/* Clear over the photograph, glass once the paper is under it. Both states
   are declared here rather than only on the scrolled class, so the header is
   correct on the very first frame. */
.dh{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease),
    backdrop-filter .5s var(--ease);
}
.dh.is-solid{
  padding:10px var(--pad);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.dh__brand{ position:relative; display:block; height:28px; }
.dh__mark{ height:28px; width:auto; transition:opacity .4s var(--ease); }
.dh__mark--ink{ position:absolute; inset:0; opacity:0; }
.dh.is-solid .dh__mark--light{ opacity:0; }
.dh.is-solid .dh__mark--ink{ opacity:1; }

.dh__nav{ display:flex; align-items:center; gap:clamp(14px, 2.4vw, 28px); }
.dh__back{
  color:rgba(255,255,255,.78); font-size:14.5px; white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.dh.is-solid .dh__back{ color:var(--grey-2); }
@media (hover:hover){
  .dh__back:hover{ color:#fff; }
  .dh.is-solid .dh__back:hover{ color:var(--ink); }
}
/* the button inverts with the bar: paper on the photo, ink on the paper */
.dh__cta{ background:#fff; color:var(--ink); padding:6px 6px 6px 18px; font-size:14px; }
.dh__cta .pill__ic{ width:30px; height:30px; background:var(--ink); color:var(--lime); }
.dh.is-solid .dh__cta{ background:var(--ink); color:#fff; }
.dh.is-solid .dh__cta .pill__ic{ background:var(--lime); color:var(--lime-ink); }
@media (max-width:560px){ .dh__back{ display:none; } }

/* ---------- the photographic hero ---------- */
.csh{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(430px, 70vh, 640px);
  display:flex; align-items:flex-end;
  /* The bottom padding is the fade: the words end, the photograph dissolves,
     the page begins. Anchoring to the bottom rather than the centre makes that
     distance exactly the padding, instead of whatever centring left over. */
  padding:clamp(92px, 13vh, 140px) var(--pad) clamp(104px, 16vh, 168px);
  background:#0A0A0A;
}
.csh__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.csh__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:saturate(1.06) contrast(1.04);
  /* settles out of a slow push-in as the page loads, then drifts on scroll */
  animation:csh-in 1.8s var(--ease) both;
}
@keyframes csh-in{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
@supports (animation-timeline: view()){
  .csh__bg img{
    animation:csh-in 1.8s var(--ease) both, csh-drift linear both;
    animation-timeline:auto, view();
    animation-range:normal, contain 0% exit 100%;
  }
  @keyframes csh-drift{ to{ transform:translateY(9%) scale(1.06); } }
}
/* the photograph darkens toward the text and dissolves into the page below */
.csh::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    /* last: the page itself rising through the bottom of the photograph */
    linear-gradient(180deg, transparent 68%, color-mix(in srgb, var(--bg) 56%, transparent) 86%, var(--bg) 100%),
    /* then: a little shade under the header, so the bar reads on any frame */
    linear-gradient(180deg, rgba(8,8,8,.46) 0%, rgba(8,8,8,.2) 36%, transparent 66%),
    /* then: a soft ramp off the left edge, for the picture's sake */
    linear-gradient(96deg, rgba(8,8,8,.5) 0%, rgba(8,8,8,.32) 28%, rgba(8,8,8,.12) 50%, transparent 70%),
    /* first: the pool the words sit in. It lives on the hero, not on the text
       box: clipped to the text box the gradient was still four fifths opaque
       where the box ended, which drew a hard line across the photograph. */
    radial-gradient(80% 82% at 17% 50%,
      rgba(4,4,4,.94) 0%, rgba(4,4,4,.9) 40%, rgba(4,4,4,.7) 62%, rgba(4,4,4,.3) 79%, transparent 92%);
}
/* the words share the left edge of the column below, not the padding's edge */
.csh__inner{ position:relative; max-width:1080px; width:100%; margin-inline:auto; }
.csh__k{
  font-size:var(--label); font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lime); display:inline-flex; align-items:center; gap:10px;
}
.csh__h{
  margin-top:16px; color:#fff;
  font-size:clamp(32px, 4.6vw + 10px, 68px); font-weight:600;
  letter-spacing:-.032em; line-height:1.02; max-width:17ch; text-wrap:balance;
}
.csh__h span{ color:rgba(255,255,255,.74); }
.csh__d{ margin-top:18px; color:rgba(255,255,255,.92); max-width:46ch; font-size:clamp(15.5px, 1.1vw, 17.5px); }
/* the project in three lines: how long it took, what it is worth, how long it has run.
   Each item carries its own hairline so the row reads as a spec, not a table. */
.csh__spec{
  display:grid; grid-template-columns:repeat(3, auto); justify-content:start;
  column-gap:clamp(28px, 3.6vw, 52px);
  margin:clamp(24px, 3.4vh, 34px) 0 0; padding:0;
}
.csh__spec > div{ position:relative; padding-top:14px; }
/* a border rather than a fill, so forced colours still draw the line */
.csh__spec > div::before{
  content:""; position:absolute; top:0; left:0; right:0;
  border-top:1px solid rgba(255,255,255,.24); transform-origin:left center;
}
/* .78, not .7: on a 360px phone the last label sits where the paper starts to rise */
.csh__spec dt{ color:rgba(255,255,255,.78); font-size:13px; }
.csh__spec dd{
  margin:3px 0 0; color:#fff; font-weight:500; letter-spacing:-.012em;
  font-size:clamp(15.5px, 1.05vw, 17px); font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (max-width:560px){
  /* on a phone the three become rows: label left, value right */
  .csh__spec{ grid-template-columns:1fr; }
  .csh__spec > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; }
  .csh__spec dd{ margin:0; text-align:right; }
}
/* the load cascade */
.js .csh__inner > *{ animation:csh-rise .9s var(--ease) both; animation-delay:calc(var(--i, 0) * 130ms + 250ms); }
@keyframes csh-rise{ from{ opacity:0; transform:translateY(26px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
/* the spec row arrives last: each hairline draws across, then its words rise */
.js .csh__inner > .csh__spec{ animation:none; }
.js .csh__spec > div{ animation:csh-rise .8s var(--ease) both; animation-delay:calc(var(--j, 0) * 120ms + 720ms); }
.js .csh__spec > div::before{ animation:csh-line 1s var(--ease) both; animation-delay:calc(var(--j, 0) * 120ms + 660ms); }
@keyframes csh-line{ from{ transform:scaleX(0); } to{ transform:none; } }

/* the paper page starts straight under the photograph */
.cs__intro{ padding-block:clamp(10px, 1.6vh, 22px) clamp(24px, 3.4vh, 38px); }

/* ---------- the page column ---------- */
.cs main{ display:block; }
.cs__intro, .cs__sec, .cs__cta, .cs__hero{
  max-width:calc(1080px + 2 * var(--pad));
  margin-inline:auto; padding-inline:var(--pad);
}
.cs__lede{ color:var(--grey-2); max-width:62ch; margin-top:20px; font-size:clamp(16.5px, 1.2vw, 18.5px); text-wrap:pretty; }

/* the four numbers, as a row of facts rather than four big tiles */
.cs__facts{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; margin:clamp(26px, 4vh, 40px) 0 0; padding:0;
  background:var(--line); border-radius:var(--r); overflow:hidden;
}
.cs__facts > div{ background:var(--card); padding:20px 22px 22px; }
.cs__facts dt{ color:var(--grey-aa); font-size:13px; }
.cs__facts dd{
  margin:6px 0 0; font-size:clamp(28px, 2.6vw, 40px); font-weight:600;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.cs__since{ margin-top:12px; color:var(--grey-aa); font-size:13px; }

/* ---------- the hero shot ---------- */
.cs__hero{ margin:clamp(28px, 4.5vh, 50px) auto 0; }
.cs__hero img{
  width:100%; height:auto; border-radius:var(--r); box-shadow:var(--sh);
  background:#fff;
}
figure{ margin:0; }
figcaption{ margin-top:12px; color:var(--grey-aa); font-size:13.5px; max-width:70ch; text-wrap:pretty; }

/* ---------- sections ---------- */
.cs__sec{ padding-block:clamp(38px, 6vh, 76px); }
.cs__sec--band{
  max-width:none; padding-inline:0; margin-block:clamp(20px, 3vh, 34px);
  background:var(--card); border-block:1px solid var(--line);
}
.cs__sec--band > *{
  max-width:calc(1080px + 2 * var(--pad)); margin-inline:auto; padding-inline:var(--pad);
}
.cs__head{ display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:clamp(14px, 3vw, 48px); align-items:start; }
.cs__k{
  font-size:var(--label); font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grey-aa); padding-top:5px;
}
.cs__body{ max-width:64ch; }
.cs__body p{ text-wrap:pretty; }
.cs__body p + p{ margin-top:1em; }
.cs__body em{ font-style:italic; color:var(--ink); }
/* the note sits on the opposite surface to the section it is in, so it reads
   as a box on both the paper sections and the white bands */
.cs__note{ margin-top:20px !important; padding:18px 20px; background:var(--card); border-radius:var(--r-sm); color:var(--grey-2); font-size:15px; }
.cs__sec--band .cs__note{ background:var(--bg); }

/* ---------- the build, step by step ---------- */
.cs__steps{
  display:flex; flex-direction:column; gap:clamp(38px, 6vh, 72px);
  margin-top:clamp(30px, 5vh, 56px);
}
.cs__step h2{
  font-size:clamp(20px, 1.5vw + 10px, 28px); font-weight:600;
  letter-spacing:-.022em; line-height:1.16; max-width:24ch; text-wrap:balance;
}
.cs__step p{ color:var(--grey-2); max-width:64ch; margin-top:14px; text-wrap:pretty; }
.cs__shot{ margin-top:clamp(20px, 3vh, 30px); }
.cs__shot img{ width:100%; height:auto; border-radius:var(--r); box-shadow:var(--sh); background:#fff; }

.cs__pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px, 2vw, 22px); margin-top:clamp(20px, 3vh, 30px); }
.cs__pair img{ width:100%; height:auto; border-radius:var(--r); box-shadow:var(--sh); background:#fff; }

/* the phones sit on the paper at their own size, not stretched */
.cs__phones{ display:flex; flex-wrap:wrap; gap:clamp(16px, 3vw, 40px); margin-top:clamp(20px, 3vh, 30px); }
.cs__phones figure{ flex:0 1 300px; }
.cs__phones img{
  width:100%; height:auto; border-radius:22px; box-shadow:var(--sh); background:#fff;
}

/* ---------- results ---------- */
/* block-axis only: the inline padding and centring come from .cs__sec--band > *,
   and a `margin`/`padding` shorthand here would win on order and cancel them */
.cs__results{
  list-style:none; margin-block:clamp(26px, 4vh, 40px) 0; padding-block:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:clamp(16px, 2.4vw, 28px);
}
.cs__results li{ display:flex; flex-direction:column; gap:8px; }
.cs__results b{
  font-size:clamp(34px, 3.4vw, 48px); font-weight:600; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.cs__results li:first-child b{ color:var(--lime-deep); }
.cs__results span{ color:var(--grey-2); font-size:14.5px; text-wrap:pretty; }

/* ---------- closing ---------- */
.cs__cta{ padding-block:clamp(30px, 5vh, 60px) clamp(50px, 8vh, 96px); }
.cs__cta-card{
  background:var(--ink); color:#fff; border-radius:var(--r-lg);
  padding:clamp(28px, 4vw, 56px); box-shadow:var(--sh-lg);
}
.cs__cta-card .cs__k{ color:rgba(255,255,255,.6); padding-top:0; }
.cs__cta-card h2{
  margin-top:14px; font-size:clamp(24px, 2.4vw + 8px, 40px); font-weight:600;
  letter-spacing:-.026em; line-height:1.1; max-width:22ch; text-wrap:balance;
}
.cs__cta-card p{ margin-top:16px; color:rgba(255,255,255,.74); max-width:56ch; text-wrap:pretty; }
.cs__go{ margin-top:clamp(24px, 3.6vh, 34px); width:auto; }

/* ---------- footer ---------- */
.dfoot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px;
  max-width:calc(1080px + 2 * var(--pad)); margin-inline:auto;
  padding:22px var(--pad) 34px; color:var(--grey-aa);
  border-top:1px solid var(--line);
}

/* On a narrow screen the lede wraps to more lines and reaches further into
   the bright console, and WebKit wraps it later than Chromium does, so the
   pool widens and drops to cover the whole block. */
@media (max-width:680px){
  .csh::before{
    background:
      linear-gradient(180deg, transparent 68%, color-mix(in srgb, var(--bg) 56%, transparent) 86%, var(--bg) 100%),
      linear-gradient(180deg, rgba(8,8,8,.46) 0%, rgba(8,8,8,.2) 36%, transparent 66%),
      radial-gradient(128% 84% at 44% 50%,
        rgba(4,4,4,.95) 0%, rgba(4,4,4,.92) 44%, rgba(4,4,4,.74) 66%, rgba(4,4,4,.32) 82%, transparent 94%);
  }
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .cs__head{ grid-template-columns:1fr; gap:10px; }
  .cs__k{ padding-top:0; }
  .cs__facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cs__pair{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .cs__facts{ grid-template-columns:1fr; }
  .cs__phones figure{ flex:1 1 100%; }
}

/* ============================================================
   MOTION — one reveal for every block, and the counters
   ============================================================ */
.js [data-rise]{ opacity:0; transform:translateY(24px); }
.js [data-rise].in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
/* children of a revealed group come in one after the other */
.js .cs__facts[data-rise] > div, .js .cs__results[data-rise] > li{ opacity:0; transform:translateY(14px); }
.js .cs__facts[data-rise].in > div, .js .cs__results[data-rise].in > li{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms + 120ms);
}
/* a screenshot wipes up rather than simply appearing */
.js .cs__hero[data-rise] img, .js .cs__shot[data-rise] img,
.js .cs__pair[data-rise] img, .js .cs__phones[data-rise] img{
  clip-path:inset(14% 0 0 0); transform:scale(1.05);
}
.js .cs__hero[data-rise].in img, .js .cs__shot[data-rise].in img,
.js .cs__pair[data-rise].in img, .js .cs__phones[data-rise].in img{
  clip-path:inset(0 0 0 0); transform:none;
  transition:clip-path 1.1s var(--ease), transform 1.1s var(--ease);
}
[data-count]{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .csh__bg img{ animation:none; }
  .js .csh__inner > *{ animation:none; }
  .js .csh__spec > div, .js .csh__spec > div::before{ animation:none; }
  .js [data-rise], .js [data-rise].in,
  .js .cs__facts[data-rise] > div, .js .cs__results[data-rise] > li{
    opacity:1; transform:none; transition:none;
  }
  .js .cs__hero[data-rise] img, .js .cs__shot[data-rise] img,
  .js .cs__pair[data-rise] img, .js .cs__phones[data-rise] img,
  .js .cs__hero[data-rise].in img, .js .cs__shot[data-rise].in img,
  .js .cs__pair[data-rise].in img, .js .cs__phones[data-rise].in img{
    clip-path:none; transform:none; transition:none;
  }
  .dh, .dh__mark, .dh__back{ transition:none; }
}