/* Case study page ---------------------------------------------------------
   One white page, no sheet: a thin rail of sections on the left, one narrow
   reading column, hairlines instead of containers, and image slots that
   break out wider than the text. The nav is the home page's component, so
   its styles come from styles.css, as do the palette and the type scale. */

.case-page {
  --rail: 208px;
  --col: 660px;
  --line: #e9e7e2;
  background: #fff;
}

.case-page .page {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  max-width: 1240px;
  margin: 0 auto;
  padding: 148px 48px 0;
  gap: 64px;
  align-items: start;
}

/* Rail: where you are, and the way back */
.rail {
  position: sticky;
  top: 132px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: var(--text-xs);
}

.rail__back {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.rail__back:hover {
  color: var(--ink);
}

.rail__cap {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rail__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.rail__links a {
  position: relative;
  color: var(--muted);
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease;
}

.rail__links a::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: -16px;
  width: 7px;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease, width 0.2s ease;
}

.rail__links a:hover {
  color: var(--ink);
}

.rail__links a.is-here {
  color: var(--ink);
  font-weight: 500;
}

.rail__links a.is-here::before {
  width: 10px;
  opacity: 1;
}

/* The reading column, left of centre with the page's air on its right */
.doc {
  min-width: 0;
  max-width: var(--col);
  padding-bottom: 160px;
}

.doc > * + * {
  margin-top: 26px;
}

.doc > .eyebrow {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.doc h1 {
  margin: 14px 0 0;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.doc > .lede {
  max-width: 54ch;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Emphasis in the lede is a shift in weight and shade, not a second face */
.doc > .lede em {
  color: var(--ink);
  font-weight: 500;
  font-style: normal;
}

/* Numbered section rules, in place of cards */
.doc {
  counter-reset: sec;
}

.doc h2 {
  margin: 96px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: clamp(26px, 2.6vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.doc h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
}

.doc h3 {
  margin: 56px 0 0;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.doc p,
.doc li {
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1.7;
  text-wrap: pretty;
}

.doc b {
  color: var(--ink);
}

/* Lists sit flush with the body text; the marker hangs in the margin, so a
   list never reads as an accidental indent */
.doc ul,
.doc ol {
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}

.doc li {
  position: relative;
}

.doc ul > li::before {
  content: "";
  position: absolute;
  top: 0.78em;
  left: -22px;
  width: 9px;
  height: 1.5px;
  background: color-mix(in srgb, var(--muted) 70%, #fff);
}

.doc ol {
  counter-reset: step;
}

.doc ol > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0.32em;
  left: -34px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.doc hr {
  display: none;
}

/* Facts: one per line, label and value on the same row */
.facts {
  display: grid;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.facts > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 14px 0;
}

.facts > div + div {
  border-top: 1px solid var(--line);
}

.facts dt {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Images break out past the text column, the way the reference does */
figure {
  margin: 44px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(calc(100vw - 2 * var(--rail)), 880px);
}

.slot {
  display: flex;
  min-height: 300px;
  align-items: flex-end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--placeholder);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.slot--hero {
  min-height: 420px;
}

/* A shipped screenshot sits where a slot would have; same box, same corners */
figure > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

figcaption {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  max-width: var(--col);
}

/* A fork: the decision blocks, set as a labelled list, not a panel */
.fork {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
}

.fork p {
  font-size: var(--text-md);
  line-height: 1.6;
}

table {
  width: 100%;
  margin-top: 32px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

code {
  padding: 2px 6px;
  border-radius: 4px;
  background: #f4f2ee;
  font-family: var(--font-mono), monospace;
  font-size: 0.9em;
}

/* End of the page: back, and the next case study */
.doc__end {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 96px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.doc__end a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.doc__end a:hover {
  color: var(--pill);
}


/* The placeholder's own label */
.slot {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
}

.slot__file {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 12px;
  opacity: 0.7;
}

/* One of seven */
.decision {
  margin-top: 64px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.decision + h3 {
  margin-top: 10px;
}

/* The outcome figures */
.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px 32px;
  margin-top: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.numbers dt {
  margin-bottom: 6px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.numbers dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* Wide tables scroll rather than squeezing the column */
.table-wrap {
  width: min(calc(100vw - 2 * var(--rail)), 880px);
  max-width: 100%;
  margin-top: 32px;
  overflow-x: auto;
}

.table-wrap table {
  min-width: 520px;
  margin-top: 0;
}

blockquote {
  margin: 32px 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.45;
}

@media (max-width: 899px) {
  .table-wrap {
    width: 100%;
  }
}

/* Read full case study -----------------------------------------------------
   The page is long; everything from Context down folds behind one control so
   a skim-reader gets surface, outcome and the before/after without scrolling
   past it. <details> carries the semantics, so it works without JS. */

.more {
  margin-top: 8px;
}

.more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid rgba(34, 34, 34, 0.16);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Safari draws its own triangle unless both of these are off */
.more > summary::-webkit-details-marker { display: none; }
.more > summary::marker { content: ""; }

.more > summary:hover {
  border-color: rgba(34, 34, 34, 0.42);
}

.more > summary:focus-visible {
  outline: 2px solid var(--cursor);
  outline-offset: 3px;
}

/* A one-way door: once the case study is open the control has done its job */
.more[open] > summary {
  display: none;
}

/* Film -------------------------------------------------------------------
   The narrated case-study video; same width and radius as the compare stage.
   The video is white, so a hairline keeps its edge on the page. */

.film {
  width: min(calc(100vw - 2 * var(--rail)), 880px);
}

.film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 899px) {
  .film {
    width: 100%;
  }
}

/* Before / after --------------------------------------------------------
   Two screens stacked on one backdrop; --pos (0–100) is where the cut sits.
   The range input is the control — invisible, but it carries the pointer,
   the keyboard and the accessible name. */

.compare {
  width: min(calc(100vw - 2 * var(--rail)), 880px);
  margin: 44px 0 0;
}

.compare__stage {
  --pos: 50;
  --cut: calc(var(--pos) * 1%);
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: #cfd3d6;
  isolation: isolate;
  touch-action: pan-y;
}

.compare__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Each screen gets a full-stage layer, so the cut is measured against the
   stage rather than the screen inside it */
.compare__screen {
  position: absolute;
  inset: 0;
}

.compare__screen img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;      /* where Figma places the screen inside the frame */
  height: auto;
  translate: -50% -50%;
  border-radius: 6px;
  box-shadow: 0 18px 40px -24px rgba(12, 16, 24, 0.55);
}

/* Left of the cut is the legacy screen, right of it the redesign — so the
   labels in the corners hold true */
.compare__screen--before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--cut)) 0 0);
}

/* Only the return to centre is animated; scrubbing tracks the pointer */
.compare__stage.is-resting .compare__screen--before {
  transition: clip-path 0.45s var(--ease-out);
}

.compare__stage.is-resting .compare__divider {
  transition: left 0.45s var(--ease-out);
}

.compare__label {
  position: absolute;
  top: 14px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(16, 20, 26, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.compare__label--before {
  left: 14px;
}

.compare__label--after {
  right: 14px;
}

/* The cut itself */
.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cut);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(16, 20, 26, 0.12);
  pointer-events: none;
}

.compare__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px -4px rgba(12, 16, 24, 0.45);
  color: var(--ink);
}

.compare__grip svg {
  width: 18px;
  height: 18px;
}

/* The control: invisible, on top of everything, and still focusable */
.compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.compare__range::-webkit-slider-thumb {
  width: 44px;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.compare__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
}

.compare__range:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (max-width: 899px) {
  .compare {
    width: 100%;
  }

  .compare__grip {
    width: 38px;
    height: 38px;
  }
}

/* Findings ---------------------------------------------------------------
   A line of the audit beside the screen it is about. Where a finding showed
   up on more than one channel, the screens play through like stories. */

.findings {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 28px;
}

.finding {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.finding__text {
  max-width: 62ch;
}

.finding__text b {
  color: var(--ink);
}

.story {
  position: relative;
  width: min(calc(100vw - 2 * var(--rail)), 880px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: #d8e0e5; /* the frame's own backdrop */
}

.story__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.story__shot.is-on {
  opacity: 1;
}

.story__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* framed art: never crop */
}

/* Story markers, filling as each screen plays */
.story__dots {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.story__dot {
  position: relative;
  flex: 1;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 20, 26, 0.18);
  cursor: pointer;
  overflow: hidden;
}

.story__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
  scale: 0 1;
}

.story__dot.is-done::after {
  scale: 1 1;
}

.story__dot.is-live::after {
  animation: story-fill var(--story-hold, 5s) linear forwards;
}

@keyframes story-fill {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  .story__dot.is-live::after {
    animation: none;
    scale: 1 1;
  }

  .story__shot {
    transition: none;
  }
}

@media (max-width: 899px) {
  .story {
    width: 100%;
  }
}

/* Filmstrip -------------------------------------------------------------
   Screens keep one height and their own width, and the row runs from the
   text column to the edge of the screen. */

.strip {
  --page-side: max(0px, (100vw - 1240px) / 2);
  --doc-left: calc(var(--page-side) + 48px + var(--rail) + 64px);
  display: flex;
  gap: 16px;
  width: calc(100vw - var(--doc-left));
  margin: 44px 0 0;
  padding-bottom: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
}

.strip > figure {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: max-content;
  max-width: 88vw;
  margin: 0;
  scroll-snap-align: start;
}

.strip img {
  display: block;
  width: auto;
  max-width: none;
  height: 376.88px;
  border-radius: 20px;
}

.strip figcaption {
  max-width: 46ch;
}

/* The last item needs room to clear the fade */
.strip::after {
  content: "";
  flex: 0 0 48px;
}

@media (max-width: 1023px) {
  .strip {
    --doc-left: calc(var(--page-side) + 24px);
  }
}

@media (max-width: 719px) {
  .strip img {
    height: 300px;
  }
}

/* Explore --------------------------------------------------------------
   A sheet larger than the column: the reader drags it around inside its
   frame rather than squinting at a shrunken copy. */

.explore {
  width: min(calc(100vw - 2 * var(--rail)), 880px);
  margin: 44px 0 0;
}

.explore__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: auto;
  border-radius: 20px;
  background: #eef0f2;
  cursor: grab;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.explore__frame.is-held {
  cursor: grabbing;
}

.explore__frame img {
  display: block;
  width: auto;
  max-width: none;
  height: 150%;     /* larger than the frame, so there is something to explore */
}

/* A tall screen instead: full width, and it scrolls down */
.explore--tall .explore__frame img {
  width: 100%;
  height: auto;
}

.explore__hint {
  position: sticky;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  margin: -44px 0 12px 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 20, 26, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.explore__frame.is-touched .explore__hint {
  opacity: 0;
}

@media (max-width: 899px) {
  .explore {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  .case-page .page {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 116px 24px 0;
  }

  .rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .rail__cap,
  .rail__links {
    display: none;
  }

  figure {
    width: 100%;
  }

  /* The rail is gone at this width, but the measure still has to hold */
  .doc {
    max-width: 68ch;
    padding-bottom: 96px;
  }
}

/* Phone -------------------------------------------------------------------
   The page gutter is only 24px, so the hanging markers come in, and the
   facts stack their label above the value. */

@media (max-width: 719px) {
  .doc ul > li::before {
    left: -15px;
    width: 7px;
  }

  .doc ol > li::before {
    left: -22px;
    font-size: 11px;
  }

  .facts > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}