/* EventMate case study (DevToDollars). Editorial anchor, 2026-10-11 redesign.
   Neutral grey page, near-black ink, one accent (DevToDollars gold), dark product
   hero and CTA shells. Type: Schibsted Grotesk for every word, Archivo (wide cut,
   six capitals) for the EVENTMATE wordmark only. Tokens are the only values used. */

/* ----------------------------------------------------------------- fonts */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face { /* metrics-matched fallback, measured against Arial: no layout jump on swap */
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial");
  size-adjust: 105.6%; ascent-override: 92.5%; descent-override: 24.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Wordmark";
  src: url("../fonts/archivo-wordmark.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* colour */
  --bg: #F2F2F0;
  --card: #FFFFFF;
  --card-2: #E9E9E6;
  --ink: #0E0E0E;
  --ink-2: #4F4F4B;        /* body text, 7.3:1 on --bg */
  --ink-3: #85857F;        /* second tone of large statements only, 3.3:1 */
  --line: #D9D9D4;
  --dark: #0E0E10;
  --dark-2: #1B1B1E;
  --on-dark: #F2F2F0;      /* 17:1 on --dark */
  --on-dark-2: #A3A39E;    /* 7.6:1 */
  --on-dark-3: #6E6E6A;    /* second tone of large type on dark, 3.8:1 */
  --line-dark: rgba(242, 242, 240, .14);
  --accent: #E0B81F;       /* DevToDollars gold: CTA pill, GitHub star, focus on dark. Never text on light. */

  /* type */
  --font: "Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, sans-serif;
  --font-word: "Archivo Wordmark", "Schibsted Grotesk", "Schibsted Grotesk Fallback", sans-serif;
  --t-mini: .8125rem;                                   /* 13 */
  --t-small: .9375rem;                                  /* 15 */
  --t-body: clamp(1rem, .96rem + .2vw, 1.0625rem);      /* 16 to 17 */
  --t-lead: clamp(1.1875rem, 1.06rem + .55vw, 1.375rem);/* 19 to 22 */
  --t-h4: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);    /* 19 to 22 */
  --t-h3: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);    /* 26 to 36 */
  --t-statement: clamp(1.75rem, 1.02rem + 2.7vw, 3.25rem); /* 28 to 52 */
  --t-num: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);        /* 44 to 80 */

  /* space: 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4vw, 40px);
  --inset: clamp(8px, 1vw, 16px);   /* how far the dark shells sit from the viewport edge */
  /* the host site's sticky navbar: Docusaurus sets --ifm-navbar-height (3.75rem on devtodollars.com);
     on its own the page has no header, so sticky parts sit at the very top */
  --sticky-top: var(--ifm-navbar-height, 0px);
  --max: 1320px;

  /* radius */
  --r-1: 12px; --r-2: 20px; --r-3: 32px; --r-pill: 999px;

  /* motion */
  --d-micro: 120ms; --d-small: 200ms; --d-scene: 480ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--sticky-top) + 72px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.6;
  font-feature-settings: "ss01" 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .cta :focus-visible { outline-color: var(--accent); }

/* links in running text */
.sec a:not(.pill), .cta__aside a, .spec a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--d-micro) var(--ease-out);
}
.sec a:not(.pill):hover, .cta__aside a:hover, .spec a:hover { text-decoration-color: currentColor; }

/* ----------------------------------------------------------------- pill buttons */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-4); min-height: 52px;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-5); border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-dark); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out);
}
.pill__dot {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--on-dark); color: var(--ink);
  transition: transform var(--d-small) var(--ease-out);
}
.pill__dot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill:hover { background: #2A2A2A; }
.pill:hover .pill__dot { transform: rotate(45deg); }
.pill--sm { min-height: 44px; gap: var(--s-3); padding-left: var(--s-4); font-size: var(--t-small); }
.pill--sm .pill__dot { width: 36px; height: 36px; }
.pill--gold { background: var(--accent); color: var(--ink); }
.pill--gold .pill__dot { background: var(--ink); color: var(--accent); }
.pill--gold:hover { background: #EBC93A; }

/* ----------------------------------------------------------------- devices (real captures in crafted frames) */
.device { position: relative; filter: drop-shadow(0 24px 32px rgba(14, 14, 14, .16)) drop-shadow(0 6px 10px rgba(14, 14, 14, .10)); }
.device__screen { position: absolute; display: block; object-fit: cover; object-position: top center; background: var(--card); }
.device__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.device--phone { aspect-ratio: 432 / 861; }
.device--phone .device__screen { left: 6.9444%; top: 3.2520%; width: 86.1111%; height: 93.4959%; border-radius: 12.3656% / 5.7143%; }
.device--tablet { aspect-ratio: 790 / 570; }
.device--tablet .device__screen { left: 4.4304%; top: 6.1404%; width: 91.1392%; height: 87.7193%; border-radius: 2.2222% / 3.2000%; }
.device--laptop { aspect-ratio: 928 / 590; }
.device--laptop .device__screen { left: 6.8966%; top: 4.4068%; width: 86.2069%; height: 84.7458%; border-radius: 0.5000% / 0.8000%; }
.device--display { aspect-ratio: 912 / 596; }
.device--display .device__screen { left: 1.7544%; top: 2.6846%; width: 96.4912%; height: 83.0537%; border-radius: 0.3409% / 0.6061%; }
:where(a.device) { display: block; width: 100%; color: inherit; text-decoration: none; cursor: zoom-in; }
a.device:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: var(--r-1); }
.hero a.device:focus-visible { outline-color: var(--accent); }

/* ----------------------------------------------------------------- 1. hero */
.hero { padding: var(--inset) var(--inset) 0; }
.hero__shell {
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  background: var(--dark); color: var(--on-dark); border-radius: var(--r-3);
  padding: clamp(18px, 2.2vw, 32px) clamp(18px, 3.2vw, 48px) clamp(20px, 3vw, 44px);
  --word: calc(100cqi / 7.45);   /* EVENTMATE is 7.37em wide at this tracking: the word fills the shell */
}
.hero__shell::after { /* one soft key light behind the devices, like a product photo */
  content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -24%; height: 76%;
  background: radial-gradient(closest-side, rgba(242, 242, 240, .075), transparent);
  pointer-events: none;
}
.hero__logo {
  position: absolute; top: clamp(18px, 2.2vw, 32px); right: clamp(18px, 3.2vw, 48px);
  width: auto; height: 18px; filter: brightness(0) invert(1); opacity: .92;
}
/* the H1 reads "EventMate case study: a custom event planning web app"; the kicker shows above the word */
.hero__title { display: flex; flex-direction: column-reverse; gap: clamp(14px, 2.4cqi, 36px); }
.hero__kicker {
  max-width: calc(100% - 8.5em); font-size: var(--t-mini); font-weight: 500; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2);
}
@media (max-width: 400px) { .hero__kicker { max-width: calc(100% - 7.5em); } .hero__logo { height: 15px; } }
.hero__word {
  display: block; font-family: var(--font-word); font-weight: 600; font-size: var(--word);
  line-height: .8; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: var(--on-dark);
}
.hero__stage {
  position: relative; width: min(100%, 1160px); margin: calc(var(--word) * -.24) auto 0;
  padding-bottom: 1%;
}
.hero__laptop { width: 80%; margin-left: 3%; }
.hero__phone { position: absolute; right: 1.5%; bottom: 0; width: 19.5%; }
.hero__foot { display: grid; gap: var(--s-5); margin-top: clamp(20px, 3cqi, 40px); align-items: end; }
.hero__claim {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem); font-weight: 500; line-height: 1.18; letter-spacing: -.015em;
  max-width: 22em; color: var(--on-dark); text-wrap: balance;
}
.hero__claim span { display: block; color: var(--on-dark-2); }
.hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.hero__stats li { background: var(--dark-2); border-radius: var(--r-2); padding: var(--s-4) var(--s-5) var(--s-5); }
.hero__num { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.hero__stats p + p { margin-top: var(--s-2); font-size: var(--t-mini); line-height: 1.4; color: var(--on-dark-2); }
.hero__note { grid-column: 1 / -1; font-size: var(--t-mini); line-height: 1.4; color: var(--on-dark-2); }
@media (min-width: 900px) and (max-width: 1099.98px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--s-7); }
}
@media (min-width: 1100px) {
  .hero__body { display: grid; grid-template-columns: minmax(250px, 3fr) minmax(0, 8.4fr); column-gap: clamp(24px, 3cqi, 56px); align-items: end; }
  .hero__stage { grid-column: 2; grid-row: 1; width: 100%; }
  .hero__laptop { width: 81%; margin-left: 0; }
  .hero__foot { grid-column: 1; grid-row: 1; margin: 0 0 clamp(4px, 1.4cqi, 20px); gap: var(--s-6); }
  .hero__claim { font-size: clamp(1.25rem, .9rem + .75vw, 1.625rem); }
  .hero__stats { grid-template-columns: 1fr; gap: var(--s-2); }
  .hero__stats li { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); align-items: center; column-gap: var(--s-4); padding: var(--s-4) var(--s-5); }
  .hero__stats .hero__num { font-size: 1.875rem; }
  .hero__stats p + p { margin-top: 0; }
}
@media (max-width: 560px) {
  .hero__laptop { width: 92%; margin-left: 0; }
  .hero__phone { width: 27%; right: 0; }
}

/* one orchestrated entrance; transform only, so the LCP image is painted at once */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__word { animation: rise 640ms var(--ease-out) both; }
  .js .hero__laptop { animation: rise 640ms 80ms var(--ease-out) both; }
  .js .hero__phone { animation: rise-phone 640ms 160ms var(--ease-out) both; }
  @keyframes rise { from { transform: translateY(28px); } }
  @keyframes rise-phone { from { transform: translateY(44px); } }
}

/* ----------------------------------------------------------------- article grid + contents */
.article { position: relative; }
.article__body { min-width: 0; }
.rail { display: none; }
.rail__time { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-mini); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rail__bar { height: 2px; margin: var(--s-3) 0 var(--s-5); background: var(--line); border-radius: 2px; overflow: hidden; }
.rail__bar span, .toc-mobile__bar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
.toc ol ol { margin: var(--s-1) 0 var(--s-2) var(--s-4); }
.toc a {
  display: block; padding: 6px 0 6px var(--s-3); border-left: 2px solid var(--line);
  color: var(--ink-2); font-size: var(--t-small); line-height: 1.35; text-decoration: none;
  transition: color var(--d-micro) var(--ease-out), border-color var(--d-small) var(--ease-out);
}
.toc ol ol a { font-size: var(--t-mini); padding-block: 4px; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--ink); }
.share { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.share a, .share button {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  transition: background var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
}
.share a:hover, .share button:hover { background: var(--card); border-color: var(--ink-3); }
.share svg { width: 16px; height: 16px; fill: currentColor; }
.share .icon { fill: none; }

@media (min-width: 1100px) {
  .article { display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: clamp(48px, 5vw, 88px); }
  .rail { display: block; }
  .rail__inner { position: sticky; top: calc(var(--sticky-top) + var(--s-6)); padding-top: clamp(56px, 6vw, 96px); }
  .toc-mobile { display: none; }
}

/* mobile and tablet: one compact bar, sticky inside the article, so it never covers the hero */
.toc-mobile {
  position: sticky; top: var(--sticky-top); z-index: 30; margin: var(--s-4) calc(-1 * var(--gutter)) 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.toc-mobile summary {
  display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--gutter);
  font-size: var(--t-small); font-weight: 600; cursor: pointer; list-style: none;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile__time { margin-left: auto; font-weight: 400; color: var(--ink-2); font-size: var(--t-mini); }
.toc-mobile summary .icon { transition: transform var(--d-small) var(--ease-out); }
.toc-mobile[open] summary .icon { transform: rotate(180deg); }
.toc-mobile nav { padding: 0 var(--gutter) var(--s-4); }
.toc-mobile nav a { display: block; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; font-size: var(--t-small); }
.toc-mobile__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }

/* ----------------------------------------------------------------- sections */
.sec { padding-top: clamp(80px, 9vw, 140px); }
.sec:first-of-type { padding-top: clamp(48px, 6vw, 96px); }
.sec__head { margin: 0; font: inherit; }
.sec__head .sec__label, .sec__head .statement { display: block; }
.sec__label {
  padding-top: var(--s-4); border-top: 1px solid var(--ink); margin-bottom: var(--s-6);
  font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}
.statement {
  max-width: 19em; font-size: var(--t-statement); font-weight: 500; line-height: 1.08; letter-spacing: -.028em;
  text-wrap: balance; color: var(--ink);
}
.statement span { color: var(--ink-3); }
.lede { max-width: 34em; margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); }
.mini { font-size: var(--t-mini); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.cap { margin-top: var(--s-3); font-size: var(--t-mini); color: var(--ink-2); line-height: 1.45; }

/* at a glance */
.spec { /* hairlines between rows at any column count: every cell draws its top rule, the first row's is clipped */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  overflow: hidden; padding: 0 var(--s-5) var(--s-1); background: var(--card); border-radius: var(--r-2);
}
.spec > div { margin-top: -1px; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-top: 1px solid var(--line); }
.spec dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: var(--s-1); }
.spec dd { font-size: var(--t-small); line-height: 1.45; }
@media (min-width: 900px) { .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec--row { margin-top: var(--s-6); }

/* quotes */
.quote { margin-top: var(--s-8); max-width: 50em; }
.quote blockquote p {
  font-size: clamp(1.375rem, 1.05rem + 1.2vw, 2.125rem); font-weight: 500; line-height: 1.22; letter-spacing: -.018em;
  text-wrap: pretty;
}
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after { content: "\201D"; }
@media (min-width: 720px) { .quote blockquote p { text-indent: -.42em; } }
.quote--full blockquote p { font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.28; }
.quote figcaption { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); font-size: var(--t-small); color: var(--ink-2); line-height: 1.35; }
.quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }

/* who EventMate serves */
.serves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-5) var(--s-6); margin-top: var(--s-7); }
.serves li { padding-top: var(--s-3); border-top: 2px solid var(--ink); }
.serves__who { font-size: var(--t-h4); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.serves li p + p { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* before / after */
.ba { display: grid; gap: var(--s-3); margin-top: var(--s-7); }
.ba__side { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-2); }
.ba__side--before { background: var(--card-2); }
.ba__side--after { background: var(--card); }
.ba__tag { font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ba__side--before .ba__tag { color: var(--ink-2); }
.ba__art { display: grid; place-items: center; min-height: 300px; }
.paper-stack { width: min(100%, 360px); height: auto; }
.ba__phone { width: min(44%, 200px); }
.ba__list li { padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: var(--t-small); line-height: 1.45; }
.ba__side--before .ba__list li { color: var(--ink-2); border-top-color: #D1D1CC; }
.ba__list strong { font-weight: 600; color: var(--ink); }
@media (min-width: 820px) { .ba { grid-template-columns: 1fr 1fr; } .ba__side { padding: var(--s-6); } }

/* sub-sections of the solution */
.sub { padding-top: clamp(72px, 8vw, 120px); }
.h3 { max-width: 20em; font-size: var(--t-h3); font-weight: 600; line-height: 1.12; letter-spacing: -.024em; text-wrap: balance; }
.sub__lead, .sub__text p, .sub__close { max-width: 36em; margin-top: var(--s-4); color: var(--ink-2); }
.sub__lead { font-size: var(--t-lead); line-height: 1.45; }
.sub__close { margin-top: var(--s-6); }
.sub__split { display: grid; gap: var(--s-7); align-items: center; }
.sub__media .device { width: 100%; }
@media (min-width: 960px) { .sub__split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.grew { margin-top: var(--s-7); padding: var(--s-5); background: var(--card); border-radius: var(--r-2); }
.grew__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr)); column-gap: var(--s-3); margin-top: var(--s-4); }
.grew__list li { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-3) 0 var(--s-2); border-top: 2px solid var(--line); }
.grew__list li.is-first { border-top-color: var(--ink); }
.grew__when { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.grew__what { font-size: var(--t-small); font-weight: 500; line-height: 1.35; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.steps li { display: grid; align-content: start; min-height: 220px; padding: var(--s-5); background: var(--card); border-radius: var(--r-2); }
.steps__n { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.steps h4 { margin-top: var(--s-6); font-size: var(--t-h4); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.steps p { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* the night, in order: sticky device that swaps real screens (desktop), plain stack otherwise */
.tour { margin-top: var(--s-7); }
.tour__steps { display: grid; gap: var(--s-8); }
.tour__when { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tour__step h4 { margin-top: var(--s-2); font-size: var(--t-h3); font-weight: 600; line-height: 1.12; letter-spacing: -.024em; }
.tour__step > p:not(.tour__when) { max-width: 30em; margin-top: var(--s-3); color: var(--ink-2); }
.tour__inline { margin-top: var(--s-5); }
.tour__stage { display: none; }

.night {
  display: grid; align-content: space-between; gap: var(--s-6); min-height: 340px;
  padding: var(--s-6); border-radius: var(--r-2); background: var(--dark); color: var(--on-dark);
}
.night__big { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); font-weight: 600; line-height: .94; letter-spacing: -.045em; }
.night__list li { padding: var(--s-3) 0; border-top: 1px solid var(--line-dark); font-size: var(--t-small); color: var(--on-dark-2); }

@media (min-width: 1100px) {
  .js .tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-7); align-items: start; }
  .js .tour__steps { gap: 0; }
  .js .tour__step {
    min-height: 74vh; display: flex; flex-direction: column; justify-content: center;
    padding-left: var(--s-5); border-left: 2px solid var(--line);
    transition: border-color var(--d-small) var(--ease-out);
  }
  .js .tour__step.is-active { border-left-color: var(--ink); }
  .js .tour__inline { display: none; }
  .js .tour__stage {
    display: block; position: sticky; top: max(calc(var(--sticky-top) + var(--s-6)), calc(50vh + var(--sticky-top) / 2 - 220px)); height: 440px;
  }
  .tour__fig { /* only the active screen is visible, focusable and announced */
    position: absolute; inset: 0; display: grid; place-items: start center;
    opacity: 0; visibility: hidden;
    transition: opacity var(--d-scene) var(--ease-out), visibility 0s linear var(--d-scene);
  }
  .tour__fig.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
  .tour__fig .device--laptop { width: 100%; }
  .tour__fig .night { width: 100%; min-height: 420px; }
}

/* the spread: the rest of the captured screens, set like a magazine page */
.spread {
  display: grid; gap: var(--s-6) var(--s-5); margin-top: var(--s-9); padding: clamp(20px, 3vw, 40px);
  background: var(--card-2); border-radius: var(--r-3);
}
.spread__item p { margin-top: var(--s-3); font-size: var(--t-mini); color: var(--ink-2); }
.spread__item--phone .device { width: min(60%, 190px); margin-inline: auto; }
.spread__item--phone p { text-align: center; }
.spread__item--tablet .device { width: min(86%, 520px); margin-inline: auto; }
.spread__item--tablet p { text-align: center; }
.spread__note { grid-column: 1 / -1; font-weight: 500; text-transform: none; letter-spacing: 0; }
@media (min-width: 900px) {
  .spread { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2.4fr); align-items: end; }
  .spread__item--phone .device { width: 100%; }
}

/* the MVP Boilerplate card */
.repo {
  display: grid; gap: var(--s-6); margin-top: var(--s-6); padding: var(--s-5);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2);
}
.repo__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-lead); line-height: 1.3; }
.repo__name img { width: 28px; height: 28px; }
.sec .repo__name a { color: var(--ink); text-decoration: none; }
.sec .repo__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.repo__name strong { font-weight: 700; }
.repo__badge { padding: 1px var(--s-2); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.repo__desc { max-width: 40em; margin-top: var(--s-3); color: var(--ink-2); }
.repo__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-size: var(--t-mini); color: var(--ink-2); }
.repo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.sec a.repo__more { font-size: var(--t-small); font-weight: 600; }
.repo__num { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-num); font-weight: 600; line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.repo__star { width: .62em; height: .62em; flex: none; color: var(--accent); fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.repo__stars p + p { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-2); }
@media (min-width: 760px) {
  .repo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--s-6); }
  .repo__stars { padding-left: var(--s-7); border-left: 1px solid var(--line); }
}

/* stack */
.stack { width: 100%; margin-top: var(--s-6); border-collapse: collapse; font-size: var(--t-small); }
.stack th, .stack td { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.45; }
.stack tr:last-child th, .stack tr:last-child td { border-bottom: 1px solid var(--line); }
.stack thead th { padding-top: 0; border-top: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.stack tbody th { width: 24%; font-weight: 600; }
.stack td { color: var(--ink-2); }
.stack td.stack__tools { width: 26%; color: var(--ink); font-weight: 500; white-space: nowrap; }
.stack__logos { display: inline-flex; gap: 6px; margin-right: var(--s-3); vertical-align: -4px; }
.stack__logos img { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .stack thead { display: none; }
  .stack th, .stack td { display: block; width: auto !important; padding-right: 0; }
  .stack td { border-top: 0; padding-top: 0; }
  .stack td.stack__tools { padding-bottom: var(--s-1); }
  .stack tr:last-child th, .stack tr:last-child td.stack__tools { border-bottom: 0; }
  .stack th { white-space: normal; }
}

/* impact */
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); margin-top: var(--s-7); }
.results li {
  display: grid; align-content: space-between; gap: var(--s-6); min-height: 200px;
  padding: var(--s-5) var(--s-5) var(--s-6); background: var(--card); border-radius: var(--r-2);
}
.results li:first-child { background: var(--dark); color: var(--on-dark); }
.results__num { font-size: var(--t-num); font-weight: 600; line-height: .9; letter-spacing: -.05em; }
@media (min-width: 720px) {
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results li:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 18em); align-items: end; align-content: end; min-height: 260px; }
  .results li:first-child .results__num { font-size: clamp(5rem, 2rem + 9vw, 10rem); }
  .results li:first-child p + p { font-size: var(--t-lead); }
}
.results li p + p { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 719.98px) { .results li { min-height: 0; gap: var(--s-4); } }
.results li:first-child p + p { color: var(--on-dark-2); }

/* the smaller numbers under the result cards */
.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-4) var(--s-6); margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.tally dt { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.tally dd { margin: var(--s-2) 0 0; font-size: var(--t-small); color: var(--ink-2); line-height: 1.45; }

/* two short stories from the build, side by side */
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.story { padding: var(--s-5); background: var(--card); border-radius: var(--r-2); }
.story__k { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.story p + p { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }

/* ----------------------------------------------------------------- 8. call to action */
.cta { padding: clamp(96px, 10vw, 160px) var(--inset) var(--inset); }
.cta__shell {
  position: relative; display: grid; gap: var(--s-6); overflow: hidden;
  grid-template-areas: "title" "lede" "actions" "aside" "related";
  padding: clamp(40px, 6vw, 96px) clamp(22px, 5vw, 80px) clamp(32px, 4vw, 64px);
  background: var(--dark); color: var(--on-dark); border-radius: var(--r-3);
}
.cta__title { grid-area: title; max-width: 13em; font-size: clamp(2.5rem, 1.2rem + 5vw, 5.5rem); font-weight: 600; line-height: .96; letter-spacing: -.045em; text-wrap: balance; }
.cta__title span { color: var(--on-dark-3); }
.cta__lede { grid-area: lede; max-width: 30em; font-size: var(--t-lead); line-height: 1.45; color: var(--on-dark-2); }
.cta__actions { grid-area: actions; position: relative; display: flex; align-items: center; gap: var(--s-5); }
@media (min-width: 960px) {
  .cta__shell { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "lede actions" "aside aside" "related related"; align-items: end; column-gap: var(--s-8); }
  .cta__actions { justify-self: end; }
}
.cta__aside { grid-area: aside; max-width: 36em; font-size: var(--t-small); color: var(--on-dark-2); }
.cta__aside a { color: var(--on-dark); }
.cta__related { grid-area: related; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-6); margin-top: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); font-size: var(--t-small); }
.cta__related p { color: var(--on-dark-2); }
.cta__related ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.cta__related a { display: inline-block; padding-block: 4px; color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242, 242, 240, .35); }
.cta__related a:hover { text-decoration-color: var(--on-dark); }

/* ----------------------------------------------------------------- reveals: visuals settle once, text is never hidden */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--d-scene) var(--ease-out), transform var(--d-scene) var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- hover preview (mouse only) */
.peek { display: none; }
@media (hover: hover) and (pointer: fine) {
  .peek {
    display: block; position: fixed; z-index: 70; left: 50%; top: 50%;
    padding: var(--s-2); border-radius: var(--r-2); background: var(--card);
    box-shadow: 0 32px 80px rgba(14, 14, 14, .30), 0 8px 24px rgba(14, 14, 14, .14);
    transform: translate(-50%, -50%) scale(.97); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--d-small) var(--ease-out), transform var(--d-small) var(--ease-out), visibility 0s linear var(--d-small);
  }
  .peek.is-on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 0s; }
}
.peek { width: max-content; }
.peek img { display: block; width: var(--pw, 800px); height: var(--ph, 500px); max-width: none; border-radius: var(--r-1); object-fit: contain; background: var(--card); }
.peek__hint {
  position: absolute; left: 50%; top: calc(100% + var(--s-3)); transform: translateX(-50%);
  padding: 6px var(--s-3); border-radius: var(--r-pill); background: rgba(14, 14, 14, .86); color: var(--on-dark);
  font-size: var(--t-mini); font-weight: 600; white-space: nowrap;
}

/* ----------------------------------------------------------------- screenshot viewer */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--on-dark); overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: rgba(10, 10, 12, .97); }
.lightbox :focus-visible { outline-color: var(--accent); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--gutter); }
.lightbox__count { font-size: var(--t-small); color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.lightbox__actions { display: flex; gap: var(--s-2); }
.lb-btn {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--line-dark); border-radius: var(--r-pill); background: rgba(242, 242, 240, .06);
  color: var(--on-dark); font-size: var(--t-small); font-weight: 600; cursor: pointer;
  transition: background var(--d-micro) var(--ease-out);
}
.lb-btn:hover { background: rgba(242, 242, 240, .16); }
.lb-btn--icon { width: 44px; padding: 0; }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__stage { position: relative; min-height: 0; overflow: hidden; }
.lightbox__stage img {
  position: absolute; inset: 0; margin: auto; width: auto; height: auto;
  max-width: calc(100% - 2 * var(--gutter)); max-height: calc(100% - var(--s-4)); border-radius: var(--r-1);
  background: var(--card); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); cursor: zoom-in;
}
.lightbox__stage.is-zoomed { overflow: auto; padding: 0 var(--gutter) var(--s-4); }
.lightbox__stage.is-zoomed img { position: static; display: block; max-width: none; max-height: none; margin: 0 auto; cursor: zoom-out; }
.lightbox__cap { max-width: 64em; margin: 0 auto; padding: var(--s-3) var(--gutter) var(--s-5); font-size: var(--t-small); line-height: 1.5; color: var(--on-dark-2); text-align: center; }
.lb-open { overflow: hidden; }
@media (max-width: 560px) { .lightbox__count { display: none; } .lightbox__bar { justify-content: flex-end; } }

/* ----------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: var(--s-6); z-index: 90; transform: translate(-50%, 16px);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); background: var(--ink); color: var(--on-dark);
  font-size: var(--t-small); font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity var(--d-small) var(--ease-out), transform var(--d-small) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}