/*
  CASE STUDY TEMPLATE - every case study page uses this file; only the words and images change.
  Built from the Figma frame "Version 33" (file "Design complete", node 453:143826, 1728px wide).

  TYPE (all Inter, colour #3b3a38; the left column, labels and tracker are Hanken Grotesk)
    .title    page title        Medium  30px  line-height 140%   letter-spacing -6%   opacity .9
    .heading  section heading   Medium  30px  line-height 53px   letter-spacing -6%   opacity .9
    .sub      subheading        Medium  20px  line-height 170%   letter-spacing -6%
    .body     body copy         Regular 14px  line-height 170%   letter-spacing -4%
    <strong>  bold inside copy  SemiBold 600
    .pointer  one point         title (.pointer__title: Medium 20px, 170%, -6%, same as .sub) over a
                                short description (.pointer__text: body copy), 12px apart, no dot, no colon

  SPACING (px, ink to ink: text boxes are trimmed to cap height / baseline, as in Figma)
    heading above              60        .heading + .sub / .body  40
    sub above                  40        .heading + .pointers 40
    figure above               60        .sub + .body        20
    .sub + .body / .pointers   20        .body + .body       20
    pointer title -> text      12        .fig + .sub         60
    pointer -> pointer         24 (assumed: the Figma example shows a single pointer)
  Where the Figma frame deviates from these (title -> hero 61, Q&A -> figure 38.58, figure -> figure
  37.06, figure -> subheading 27.63 / 57.63, paragraph -> figure 109) the page repeats the Figma value
  with style="--gap: Npx" on that block. Delete the style attribute to snap it back to the rhythm.

  Widths: body text 740.84px (+4 for Chrome), headings 779.45px, figures 977px (radius 10px). Text column starts at
  41.667% + 1px of the window (721px at 1728).
*/

:root {
  /* light (the design) */
  --bg: #fff;
  --ink: #000;
  --body: #303030;
  --text: #3b3a38;
  --muted: #a1a1a1;
  --rule: rgba(163, 163, 163, 0.25);
  --trk: rgba(0, 0, 0, 0.12);
  --trk-fill: #000;
  --pill-bg: rgba(0, 0, 0, 0.05);
  --pill-fg: rgba(0, 0, 0, 0.6);

  --text-font: Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"] {
  --bg: #121212;
  --ink: #fff;
  --body: #cfcfcf;
  --text: #e4e3e0;
  --muted: #8a8a8a;
  --rule: rgba(255, 255, 255, 0.13);
  --trk: rgba(255, 255, 255, 0.16);
  --trk-fill: #fff;
  --pill-bg: rgba(255, 255, 255, 0.08);
  --pill-fg: rgba(255, 255, 255, 0.7);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { background: var(--bg); color-scheme: light; scroll-behavior: smooth; }
html[data-theme="dark"] { color-scheme: dark; }

::selection { background: var(--ink); color: var(--bg); }

body {
  font-family: var(--ui);
  font-size: 14px;
  line-height: 20px;
  font-weight: 460;
  letter-spacing: -0.006em;           /* -0.084px */
  color: var(--body);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }

/* Text boxes are trimmed to cap height / baseline, as in the design, so every gap is ink to ink */
@supports (text-box: trim-both cap alphabetic) {
  .home, .side__title, .side__summary, .meta dt, .meta dd,
  .title, .heading, .sub, .body, .pointer__title, .pointer__text {
    text-box: trim-both cap alphabetic;
  }
}

/* ---------- Page grid: left 41.667% + 1px (721px at 1728), content fills the rest ---------- */

.page { display: grid; grid-template-columns: calc(41.667% + 1px) minmax(0, 1fr); }

/* ---------- Left column (pinned top-left) ---------- */

.left { position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: start; }

.home { position: absolute; left: 12px; top: 35.61px; color: var(--muted); transition: color .15s ease; }
.home:hover { color: var(--ink); }

.side { position: absolute; left: 136px; top: 35.61px; width: calc(100% - 196px); max-width: 421.5px; }

.side__title { font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }   /* -0.4px */
.side__summary { max-width: 399.04px; margin-top: 25.18px; color: var(--body); }

/* My Role / Company / Team / File: a rule between rows only; a row grows with its text (Role is two lines) */
.meta { margin-top: 36px; }
.meta > div { display: grid; grid-template-columns: 96px 1fr; align-items: start; padding: 15px 0; }
.meta > div:not(:last-child) { border-bottom: 1px solid var(--rule); }
.meta > div:first-child { padding-block: 14.85px; }    /* the rows are hand-placed in Figma: 60.69 / 41 / 41 / 40.28 apart */
.meta > div:nth-child(3) { padding-block: 15.6px 14.4px; }   /* sits the Team text on the same pixel row as Figma */
.meta > div:last-child { padding: 14.27px 0 0; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; color: var(--body); }

.meta__link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--text-font); letter-spacing: -0.04em; transition: color .15s ease; }
.meta__link:hover { color: var(--ink); }
.meta__link svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Right column ---------- */

.content { padding: 35.61px 30px 120px 0; }
.content > * { max-width: 977px; }

/* flow-root keeps each block's top gap inside its own section, so the tracker measures it with the section */
.content > section { display: flow-root; }

.title,
.heading,
.sub,
.body,
.pointer__title,
.pointer__text { font-family: var(--text-font); color: var(--text); }

.title,
.heading {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.06em;
  opacity: .9;
  max-width: 779.45px;
}
.title { line-height: 1.4; }
.heading { line-height: 53px; }

.sub,
.pointer__title {
  font-size: 20px;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: -0.06em;
  max-width: 779.45px;
}

.body,
.pointer__text {
  font-size: 14px;
  line-height: 24px;                        /* 170% of 14 = 23.8; Figma rounds it to 24, so lines sit 24px apart */
  font-weight: 400;
  letter-spacing: -0.04em;
  max-width: 744.84px;                      /* Figma's 740.84 + 4: Chrome sets Inter a hair wider than Figma, so a line would wrap one word early */
}
.body strong,
.pointer__text strong { font-weight: 600; }

/* Pointers: a title over a short description, no bullet dot, no colon (Figma node 462:173653) */
.pointers { list-style: none; padding: 0; max-width: 744.84px; }
.pointer__text { margin-top: 12px; }
.pointer + .pointer { margin-top: 24px; }

/* ---------- Spacing ---------- */

.title { margin-top: 0; }
.heading { margin-top: var(--gap, 60px); }
.sub { margin-top: var(--gap, 40px); }
.fig { margin-top: var(--gap, 60px); }
.body,
.pointers { margin-top: var(--gap, 20px); }
.body + .sub,
.pointers + .sub { margin-top: var(--gap, 40px); }
.heading + .sub,
.heading + .body,
.heading + .pointers { margin-top: var(--gap, 40px); }
.fig + .sub { margin-top: var(--gap, 60px); }

/* Figma sizes each text box to a whole number (heading 22, subheading 15, title 64, a line of body 10);
   the trimmed browser boxes are a hair different, so this puts every block at the Figma y position. */
.title, .heading { padding-bottom: .17px; }
.sub, .pointer__title { padding-bottom: .45px; }
.body, .pointer__text { margin-bottom: -.19px; }

/* ---------- Figures ---------- */

.fig { width: 100%; }
.fig img { width: 100%; height: auto; border-radius: 10px; }

/* ---------- Scroll tracker: 100 x 290 box, 12px from the left, centred vertically ---------- */

.tracker { position: fixed; left: 12px; top: 50%; z-index: 40; width: 100px; height: 290px; transform: translateY(-50%); display: none; }
@media (min-width: 1024px) { .tracker:not([hidden]) { display: block; } }

.tracker__track { position: absolute; left: 7px; top: 10px; width: 16px; height: 280px; display: flex; flex-direction: column; gap: 6px; }

.tracker__seg { position: relative; display: block; width: 16px; flex: 1 1 0; min-height: 12px; }
.tracker__seg::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; right: -60px; }   /* wider hit area */

.tracker__bar { position: absolute; left: 0; top: 0; width: 2px; height: 100%; overflow: hidden; border-radius: 1px; background: var(--trk); transition: background-color .5s ease-in-out; }
.tracker__seg:hover .tracker__bar { background: var(--muted); }
.tracker__fill { position: absolute; inset: 0; background: var(--trk-fill); transform-origin: top; transform: scaleY(0); }

.tracker__pill {
  position: absolute;
  left: 16px;
  top: 0;
  height: 20px;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.006em;                  /* -0.072px */
  white-space: nowrap;
  pointer-events: none;
  color: var(--pill-fg);
  background: var(--pill-bg);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: top .15s ease-out;
}

/* ---------- Narrower than the design ---------- */

@media (max-width: 1279.98px) {
  .side { left: 56px; width: calc(100% - 100px); }
}

@media (max-width: 1023.98px) {
  .page { display: block; }
  .left { position: static; height: auto; padding: 20px 20px 0; }
  .home, .side { position: static; }
  .home { display: block; }
  .side { margin-top: 28px; max-width: none; width: auto; }
  .content { padding: 48px 20px 80px; }
  .title, .heading { line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tracker__pill, .tracker__bar, .home { transition: none; }
}