/* Design tokens — from Figma "Portfolio Site" */
:root {
  --ink: #252e40;
  --accent: #4e74c0; /* outline strokes, labels, logo */
  --error: #c93b3b;  /* form errors (not in Figma yet) */
  --bg: #fcfcfc;

  --font-sans: "DM Sans", sans-serif;
  --font-mono: "DM Mono", monospace;

  --content-width: 1022px; /* 1440 frame − 209px margins */
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Things that start past the window edge (Luna's gradient bands, the footer car's flag on phones)
   are clipped there instead of causing sideways scrolling */
html, body { overflow-x: clip; }
/* In-page links (TAKE A LOOK → #work) glide instead of jumping */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
img, video { display: block; max-width: 100%; height: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.container {
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Header (Figma 165:1687) ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}
.site-header__left { display: flex; align-items: center; gap: 32px; }
.site-header__logo { flex: none; }
.site-header__logo img { width: 35px; height: 26.81px; } /* SM monogram (Figma 395:13564) */

.site-nav { display: flex; gap: 32px; }
.site-nav a {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.07px;
}

/* Text links bolden on hover (DM Mono is monospaced, so nothing shifts) */
.site-nav a:hover, .site-nav a:focus-visible,
.site-footer__nav a:hover, .site-footer__nav a:focus-visible,
.hero__cta:hover, .hero__cta:focus-visible,
.back-link:hover, .back-link:focus-visible { font-weight: 500; }
.site-nav a[aria-current="page"], .site-footer__nav a[aria-current="page"] { font-weight: 500; } /* the page you're on (About, Figma 631:8730) */

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 26px;
  border: 1.5px solid var(--accent);
  border-radius: 32px;
  color: var(--accent);
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pill-button:hover,
.pill-button:focus-visible {
  background: var(--accent);
  color: var(--bg);
}
/* SVG is 11.5×11.5 around a 10×10 layout box (Figma inset: -7.5%, 1.5px stroke) */
.pill-button__arrow {
  width: 11.5px;
  height: 11.5px;
  margin: -0.75px;
}

/* ---------- Hero (Figma 165:1686) ---------- */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 43px;     /* art group top 139 − header 96 */
  padding-bottom: 219px; /* art bottom 742 → work section top 961 */
}

.hero__text { padding-top: 200px; width: 501px; } /* heading top 339 − 139 */

.hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 72px;
  line-height: 40px;
  letter-spacing: -1.44px;
  font-variation-settings: "opsz" 14;
}

.hero__intro {
  width: 400px; /* Figma's text box */
  max-width: 100%;
  margin: 52px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;  /* fits the intro in 4 lines at 400px */
  line-height: 24px;
  letter-spacing: -0.28px;
  font-variation-settings: "opsz" 14;
}

.hero__cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  margin-top: 41px; /* CTA top 568 − paragraph end 527 */
  color: var(--accent);
  font-size: 18px;
  line-height: 29px;
}
.hero__cta-icon { flex: none; width: 36px; height: 36px; }
.hero__cta > * { opacity: var(--scroll-fade, 1); } /* set by js/main.js while scrolling */
/* Same fill hover as the Resume pill: circle fills, arrow turns white */
.hero__cta-icon rect { fill: transparent; transition: fill 0.2s ease; }
.hero__cta-icon path { transition: fill 0.2s ease; }
.hero__cta:hover .hero__cta-icon rect,
.hero__cta:focus-visible .hero__cta-icon rect { fill: var(--accent); }
.hero__cta:hover .hero__cta-icon path,
.hero__cta:focus-visible .hero__cta-icon path { fill: var(--bg); }
.k-64 { letter-spacing: 0.64px; }
.k-48 { letter-spacing: 0.48px; }

/* Illustration: all pieces share the original 531×643 group space (percentages), so the
   group can render at Figma's current 498px width without moving anything relative. */
.hero__art {
  --art-w: 531;
  --art-h: 642.91;
  position: relative;
  flex: none;
  width: 498px; /* Figma 200:1866: 733 → 1231, flush with the content edge */
  max-width: 100%;
  aspect-ratio: 531 / 642.91;
}
.hero__break { display: none; } /* phones only */
.hero__desk {
  position: absolute;
  left: 0;
  top: calc(153.63 / var(--art-h) * 100%);
  width: 100%;
}
/* Eyes-closed frame swaps in for the open-eyes frame while js/main.js blinks.
   Both PNGs are transparent, so the open one must hide or its eyes show through. */
.hero__desk--blink,
.hero__art.is-blinking .hero__desk:not(.hero__desk--blink) { visibility: hidden; }
.hero__art.is-blinking .hero__desk--blink { visibility: visible; }
.doodle {
  position: absolute;
  left: calc(var(--x) / var(--art-w) * 100%);
  top: calc(var(--y) / var(--art-h) * 100%);
  width: calc(var(--w) / var(--art-w) * 100%);
}
.doodle img { width: 100%; }
.doodle--stars-1 img { transform: rotate(-12deg); }
.doodle--stars-2 img { transform: rotate(12.45deg); }
.doodle--bubble-1 img { transform: rotate(12deg) scaleX(-1); } /* Figma flip, then rotate */

/* Bob — js/main.js adds .is-ambient (one bob, random doodle at a time) when idle and
   .is-bobbing (loops) on hover, removing it at the end of a cycle after the cursor leaves. */
.doodle.is-ambient { animation: bob 1.2s ease-in-out; }
.doodle.is-bobbing { animation: bob 1.2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .doodle.is-ambient, .doodle.is-bobbing { animation: none; }
}

/* ---------- Outline buttons (Resume, TAKE A LOOK, SEE MORE share one hover) ---------- */
.outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border: 1.5px solid var(--accent);
  border-radius: 32px;
  color: var(--accent);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.7px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.outline-button:hover,
.outline-button:focus-visible { background: var(--accent); color: var(--bg); }

/* ---------- Work cards (Figma 228:2360) ---------- */
.work {
  scroll-margin-top: 48px; /* breathing room above the first card when TAKE A LOOK lands */
  display: flex;
  flex-direction: column;
  gap: 87px;             /* card tops 532 apart, cards 445 tall */
  padding-bottom: 165px; /* last card bottom → "Let’s stay in touch!" (Figma 200:1841: 3734 → 3899) */
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 21px;
  container-type: inline-size;
  /* 1 Figma px inside the 1023-wide card, so the art scales with the column */
  --px: calc(100cqw / 1023);
}
.project-card__head {
  position: relative;
  max-width: 623px;
  padding-top: 16px; /* text 16px below the rule */
}
/* the rule stays 501px even where the text runs wider */
.project-card__head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(501px, 100%);
  height: 1.5px;
  border-radius: 1px;
  background: #d9d9d9;
}
.project-card__label {
  margin: 0;
  color: var(--accent);
  font-size: 13px;
  line-height: 40px;
  letter-spacing: 0.26px;
}
.project-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: -0.48px;
  font-variation-settings: "opsz" 14;
}
.project-card__desc {
  margin: 0;
  color: #72757a;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: -0.32px;
  font-variation-settings: "opsz" 14;
}
.project-card__media {
  position: relative;
  aspect-ratio: 1023 / 328;
  overflow: hidden;
  border-radius: 12px;
}
.project-card__media > * { position: absolute; }
.project-card__logo { height: auto; }

/* Hover pulse: the screens grow a little and hold while the card is hovered */
.project-card__screen {
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.project-card:hover .project-card__screen,
.project-card:focus-visible .project-card__screen { transform: scale(1.04); }

/* Positions are Figma px within each 1023×328 card. Screen PNGs are cropped at the
   card's bottom edge, so their rounded corners + shadows are added here. */
.project-card--workshop .project-card__media { background: linear-gradient(#f7f8ff, #f6ebff); }
.project-card--workshop .project-card__logo {
  left: calc(105.5 * var(--px)); top: calc(95 * var(--px)); width: calc(160 * var(--px));
}
.project-card--workshop .project-card__screen {
  left: calc(388.5 * var(--px)); top: calc(47 * var(--px)); width: calc(569.25 * var(--px));
  border-radius: calc(8 * var(--px)) calc(8 * var(--px)) 0 0;
  overflow: hidden;
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.25);
}
.project-card--workshop .project-card__screen img { width: 100%; }

/* Social Block (Figma 595:22182): the drawer runs off the bottom; the W with the Social block button on it */
.project-card--social .project-card__media { background: linear-gradient(#f7fcff, #caddff); }
.project-card--social .project-card__head { max-width: 680px; } /* one line, as in Figma (DM Sans sets a little wider) */
.project-card--social .project-card__screen {
  left: calc(144.5 * var(--px)); top: calc(35 * var(--px)); width: calc(291.5 * var(--px));
  border-radius: calc(8 * var(--px)) calc(8 * var(--px)) 0 0; overflow: hidden;
  box-shadow: 0 3px 18px rgba(37, 46, 64, 0.18);
}
.project-card--social .project-card__screen img { width: 100%; }
.project-card--social .project-card__logo { left: calc(648 * var(--px)); top: calc(106 * var(--px)); width: calc(160 * var(--px)); }
.project-card--social .project-card__chip {
  left: calc(767 * var(--px)); top: calc(174 * var(--px)); width: calc(86 * var(--px)); height: auto;
  border-radius: calc(4 * var(--px)); box-shadow: 0 2px 8px rgba(37, 46, 64, 0.15);
}

.project-card--luna .project-card__media { background: linear-gradient(#17294a 14.423%, #111); }
.project-card--luna .project-card__screen {
  left: calc(76.5 * var(--px)); top: calc(48 * var(--px)); width: calc(514.87 * var(--px));
  height: calc(280 * var(--px));
}
.project-card--luna .project-card__screen img {
  position: absolute;
  top: 0;
  border-radius: calc(14.1 * var(--px)) calc(14.1 * var(--px)) 0 0;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.25);
}
.project-card--luna .project-card__screen img:nth-child(1) { left: 0; width: calc(151.34 * var(--px)); }
.project-card--luna .project-card__screen img:nth-child(2) { left: calc(181.36 * var(--px)); width: calc(151.94 * var(--px)); }
.project-card--luna .project-card__screen img:nth-child(3) { left: calc(363.32 * var(--px)); width: calc(151.55 * var(--px)); }
.project-card--luna .project-card__logo {
  left: calc(715.5 * var(--px)); top: calc(119 * var(--px)); width: calc(198 * var(--px));
}

.project-card--drop .project-card__media { background: linear-gradient(#686868, #000); }
.project-card--drop .project-card__screen {
  left: calc(388.5 * var(--px)); top: calc(49 * var(--px)); width: calc(588.36 * var(--px));
  border-radius: calc(12.37 * var(--px)) calc(12.37 * var(--px)) 0 0;
  overflow: hidden;
  box-shadow: 0 -6px 17.5px rgba(0, 0, 0, 0.25);
}
.project-card--drop .project-card__screen img { width: 100%; }
.project-card--drop .project-card__logo {
  left: calc(69.59 * var(--px)); top: calc(111 * var(--px)); width: calc(233 * var(--px));
}

.project-card--bonedry .project-card__media { background: linear-gradient(#302f56, #040318); } /* sampled from Figma 483:7499 */
.project-card--bonedry .project-card__screen { overflow: hidden; }
.project-card--bonedry .project-card__screen img { width: 100%; }
.project-card--bonedry .project-card__screen:nth-child(1) {
  left: calc(38.5 * var(--px)); top: calc(48 * var(--px)); width: calc(393.285 * var(--px));
  border-radius: calc(10.83 * var(--px));
  box-shadow: 0 4.46px 4.46px rgba(0, 0, 0, 0.25);
}
.project-card--bonedry .project-card__screen:nth-child(2) {
  left: calc(147.76 * var(--px)); top: calc(140.54 * var(--px)); width: calc(422.238 * var(--px));
  border-radius: calc(12.73 * var(--px)) calc(12.73 * var(--px)) 0 0;
  box-shadow: 0 4.24px 2.12px rgba(0, 0, 0, 0.25);
}
.project-card--bonedry .project-card__logo {
  left: calc(674.5 * var(--px)); top: calc(83 * var(--px)); width: calc(256 * var(--px));
}


@media (prefers-reduced-motion: reduce) {
  .project-card__screen { transition: none; }
}

/* ---------- Page-load entrance ---------- */
/* Title letters are split into .char spans by js/main.js; hide the title until then
   so the unsplit text never flashes. */
.js .hero__title:not(.is-split) { visibility: hidden; }
.hero__title .word { display: inline-block; white-space: nowrap; }
.hero__title .char { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .site-header,
  .hero__intro,
  .hero__cta,
  .hero__desk {
    animation: fade-up 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  /* --enter-offset holds the entrance while a dark → light background fade plays */
  .site-header { animation-delay: var(--enter-offset, 0ms); }
  .hero__desk  { animation-delay: calc(var(--enter-offset, 0ms) + 350ms); }
  .hero__intro { animation-delay: calc(var(--enter-offset, 0ms) + 650ms); }
  .hero__cta   { animation-delay: calc(var(--enter-offset, 0ms) + 850ms); }

  /* Doodles fade in one by one after the desk (--i set per doodle in js/main.js).
     Animating the img keeps the wrapper free for the hover bob. */
  .doodle img {
    animation: fade-in 500ms ease-out both;
    animation-delay: calc(var(--enter-offset, 0ms) + 800ms + var(--i, 0) * 70ms);
  }

  /* Letter wave: rise from below, overshoot slightly, settle (--ci = letter index) */
  .hero__title .char {
    animation: letter-wave 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-delay: calc(var(--enter-offset, 0ms) + 150ms + var(--ci) * 45ms);
  }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes letter-wave {
  0%   { opacity: 0; transform: translateY(0.35em); }
  55%  { opacity: 1; transform: translateY(-0.12em); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Narrow screens (no Figma frame yet — stacked layout) ---------- */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 96px;
  }
  .hero__text { padding-top: 0; width: auto; }
  .work { gap: 64px; padding-bottom: 120px; }
  .hero__cta { margin-top: 48px; }
  .hero__art { align-self: center; }
}
@media (max-width: 560px) {
  .site-header { gap: 12px; }
  .site-header__left, .site-nav { gap: 14px; }
  .site-header__logo img { width: 30px; height: auto; }
  .site-nav a { font-size: 13px; }
  .pill-button { gap: 8px; padding: 5px 12px; }
  .hero__title { font-size: 52px; line-height: 1; }
  .hero__intro { margin-top: 32px; }
  .hero__cta { margin-top: 40px; }
}
/* Phones (layout from Figma 300:8611, 390 wide): wide side margins, the drawing small and
   left-aligned above the intro, and tall card images with the logo on top and the screen below */
@media (max-width: 767px) {
  .m-ok main.container, .m-ok main .container, .m-ok .more.container {
    width: auto;
    margin-inline: 0;
    padding-inline: max(20px, 13.141vw); /* Figma 300:8611 grid: 8 columns, 20 gutter, no margin → content runs from column 2 to column 7 (51.25 each side at 390) */
  }
  /* Hero (Figma 300:8611): drawing, title, intro and TAKE A LOOK all start 51 from the left */
  .hero { align-items: flex-start; gap: 43px; padding-top: 110px; padding-bottom: 89px; } /* drawing top 169, title 496; card 892 */
  .hero__art { order: -1; align-self: flex-start; width: 234px; }
  .hero__text { align-self: stretch; width: auto; }
  .hero__title { font-size: 42px; line-height: 40px; }
  .hero__intro { margin-top: 26px; font-size: 16px; line-height: 24px; } /* 574 (the title box runs 12px taller than its 40px line) */
  .hero__break { display: block; height: 24px; } /* the frame's blank line before "Recently designing…" */
  .hero__cta { margin-top: 38px; } /* 780 */
  .work { gap: 64px; padding-bottom: 96px; }
  .project-card__title { line-height: 32px; }
  .project-card__desc { margin-top: 6px; font-size: 15px; line-height: 23px; }

  /* Card images: 287 wide (Figma 300:8611), shortened to 360 tall so they don't fill the screen;
     1 --px = 1px of that 287-wide frame */
  .project-card { --px: calc(100cqw / 287); }
  .project-card__media { aspect-ratio: 287 / 360; }
  .m-ok .project-card .project-card__logo { left: 50%; translate: -50% 0; }
  .m-ok .project-card--workshop .project-card__logo { top: calc(40 * var(--px)); width: calc(100 * var(--px)); }
  .m-ok .project-card--workshop .project-card__screen { left: calc(36 * var(--px)); top: calc(153 * var(--px)); width: calc(420 * var(--px)); border-radius: calc(6 * var(--px)) calc(6 * var(--px)) 0 0; }
  .m-ok .project-card--luna .project-card__logo { top: calc(48 * var(--px)); width: calc(120 * var(--px)); }
  .m-ok .project-card--luna .project-card__screen { left: calc(36 * var(--px)); top: calc(140 * var(--px)); width: calc(405 * var(--px)); height: calc(220 * var(--px)); }
  .m-ok .project-card--luna .project-card__screen img { border-radius: calc(11 * var(--px)) calc(11 * var(--px)) 0 0; }
  .m-ok .project-card--luna .project-card__screen img:nth-child(1) { left: 0; width: calc(119 * var(--px)); }
  .m-ok .project-card--luna .project-card__screen img:nth-child(2) { left: calc(142.6 * var(--px)); width: calc(119.4 * var(--px)); }
  .m-ok .project-card--luna .project-card__screen img:nth-child(3) { left: calc(285.6 * var(--px)); width: calc(119.1 * var(--px)); }
  .m-ok .project-card--bonedry .project-card__logo { top: calc(30 * var(--px)); width: calc(120 * var(--px)); }
  .m-ok .project-card--bonedry .project-card__screen:nth-child(1) { left: calc(36 * var(--px)); top: calc(135 * var(--px)); width: calc(270 * var(--px)); border-radius: calc(8 * var(--px)); }
  .m-ok .project-card--bonedry .project-card__screen:nth-child(2) { left: calc(70 * var(--px)); top: calc(227 * var(--px)); width: calc(300 * var(--px)); border-radius: calc(9 * var(--px)) calc(9 * var(--px)) 0 0; }
  .m-ok .project-card--social .project-card__logo { top: calc(40 * var(--px)); width: calc(100 * var(--px)); translate: -60% 0; }
  .m-ok .project-card--social .project-card__chip { left: calc(158 * var(--px)); top: calc(83 * var(--px)); width: calc(54 * var(--px)); }
  .m-ok .project-card--social .project-card__screen { left: calc(18.5 * var(--px)); top: calc(160 * var(--px)); width: calc(250 * var(--px)); } /* centered in the 287-wide card */
  .m-ok .project-card--drop .project-card__logo { top: calc(50 * var(--px)); width: calc(130 * var(--px)); }
  .m-ok .project-card--drop .project-card__screen { left: calc(36 * var(--px)); top: calc(161 * var(--px)); width: calc(420 * var(--px)); border-radius: calc(9 * var(--px)) calc(9 * var(--px)) 0 0; }

  /* Footer lines up with the content margins */
  .m-ok .site-footer { width: auto; margin-inline: max(20px, 13.141vw); }
  .m-ok .site-footer__contact { margin-inline: 0; padding-inline: 0; width: auto; }
  .m-ok .site-footer__left { flex: 1; } /* home keeps LinkedIn inside this row: push it to the far right */
  .m-ok .site-footer__left .site-footer__social { margin-left: auto; }
  /* Header bar: logo 20 from the left, a thinner menu icon */
  .m-ok .mgate__bar { padding: 15px 20px 0; }
  .m-ok .mgate__toggle { margin: 0 -11px 0 0; color: var(--ink); }
  .m-ok .mgate__icon { width: 22px; height: auto; }
}

/* ---------- Fade-in for every page ([data-reveal], driven by js/main.js) ----------
   Blocks already on screen fade up in sequence on load; the rest fade up as they
   scroll into view. Same motion as the home page entrance. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-revealed) { opacity: 0; }
  .js [data-reveal].is-revealed {
    animation: fade-up 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
  /* Blocks revealed by scrolling: a clear rise, still quick so nobody waits on them */
  .js [data-reveal].is-revealed.is-scroll-revealed {
    animation: fade-up-scroll 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
}
@keyframes fade-up-scroll {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Case study pages (Figma 283:6042 — Luna) ---------- */
.page-dark { --bg: #111; background: var(--bg); }
/* Arriving from the light pages: start on the home background and fade to dark before
   the content fades in (js/main.js holds the first reveal until this finishes) */
@media (prefers-reduced-motion: no-preference) {
  .page-dark { animation: bg-to-dark 700ms ease-in-out both; }
}
/* Arriving on a light page from a dark one: the reverse fade, then the entrance runs */
@media (prefers-reduced-motion: no-preference) {
  html.from-dark { --enter-offset: 700ms; }
  html.from-dark body { animation: bg-to-light 700ms ease-in-out both; }
}
@keyframes bg-to-light {
  from { background-color: #111; }
  to   { background-color: #fcfcfc; }
}
@keyframes bg-to-dark {
  from { background-color: #fcfcfc; }
  to   { background-color: var(--bg); } /* each dark page's own background */
}


.case { padding: 98px 0 349.5px; } /* back link top 98; content end 6784.5 → footer divider 7134 */

.back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 17px;
  color: var(--accent);
  font-size: 14px;
  line-height: 29px;
}
.page-dark .back-link { color: #94a9d3; }
.back-link__icon { flex: none; width: 36px; height: 36px; transform: rotate(90deg); }
/* Same fill hover as the other outline buttons */
.back-link__icon rect { fill: transparent; transition: fill 0.2s ease; }
.back-link__icon path { transition: fill 0.2s ease; }
.back-link:hover .back-link__icon rect,
.back-link:focus-visible .back-link__icon rect { fill: currentColor; }
.back-link:hover .back-link__icon path,
.back-link:focus-visible .back-link__icon path { fill: var(--bg); }

.case__intro { width: 469px; max-width: 100%; margin-top: 91px; } /* title top 225 */
.case__title {
  margin: 0;
  color: #dee3ef;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 40px;
  letter-spacing: -0.56px;
  font-variation-settings: "opsz" 14;
}
.case__summary { margin: 35px 0 0; color: #bbc0cc; font-size: 13px; line-height: 25px; }
.case__summary--sans { font-family: var(--font-sans); font-variation-settings: "opsz" 14; font-size: 14px; } /* Luna + Drop: DM Sans 14/25 */
.case__meta { margin: 18px 0 0; color: #94a9d3; font-family: var(--font-sans); font-variation-settings: "opsz" 14; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 0.08em; white-space: pre; } /* role · length · context */

/* Content column: 1 Figma px = --px, so compositions scale with the column */
.case__body {
  margin-top: 95px; /* Frame 636 top 470 − intro end 375 */
  container-type: inline-size;
  overflow: clip; /* Figma "clip content": bands and the hero stop at the column edges */
  font-family: "Montserrat", sans-serif;
  color: #fff;
}
.case__body > * { --px: calc(100cqw / 1022); }
.case__media { display: block; width: 100%; height: auto; }
/* Hero sits 23px above Frame 636, so its top 23px is clipped */
.case__hero { aspect-ratio: 1022 / 605.86; object-fit: cover; object-position: center bottom; }
.case__collage {
  width: calc(955.24 * var(--px));
  aspect-ratio: 955.24 / 419.6;
  object-fit: cover; /* the video carries extra dark margin above/below the collage */
  margin: calc(35.47 * var(--px)) 0 0 calc(33.38 * var(--px));
}

/* Frame 629 — gradient band runs 143px past the column on both sides */
.luna-problem {
  position: relative;
  margin-top: calc(48.49 * var(--px));
  padding: calc(66.76 * var(--px)) calc(74.7 * var(--px)) 0 calc(97.75 * var(--px));
  height: calc(271.79 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(66.76 * var(--px));
}
.luna-problem::before {
  content: "";
  position: absolute;
  inset: 0 calc(-143.05 * var(--px));
  z-index: -1;
  background: linear-gradient(#172846, #111);
}
.luna-problem__row { display: flex; align-items: flex-start; gap: calc(23.84 * var(--px)); }
.luna-problem__row h2 { flex: none; width: calc(226.5 * var(--px)); margin: 0; }
.luna-problem__row h2 img { width: auto; height: calc(32.315 * var(--px)); }
.luna-problem__row + .luna-problem__row h2 img { height: calc(27.882 * var(--px)); }
.luna-problem__row p {
  width: calc(596.03 * var(--px));
  margin: 0;
  font-size: calc(12.715 * var(--px));
  line-height: calc(19.073 * var(--px));
}
.luna-problem__row p.luna-problem__solution { width: calc(526.1 * var(--px)); }

/* Figma 607:22537 below Frame 633 (app, walk-through, launch site, brand, earbuds, award).
   luna.html places every element at its Figma x/y inside the 1022 column, in --px, so it scales as one piece. */
.lv { position: relative; height: calc(var(--h) * var(--px)); font-family: var(--font-sans); font-variation-settings: "opsz" 14; }
.lv > *, .lv__group > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(var(--w) * var(--px));
  max-width: none;
}
.lv__band, .lv__rule, .lv__img, .lv__video, .lv__clip { height: calc(var(--h) * var(--px)); }
.lv__band { opacity: 0.3; } /* Figma fill opacity 30% */
.lv__rule { background: #000; } /* dividers between the app sections */
.lv__arrow { height: auto; }
.lv__img { object-fit: cover; border-radius: calc(var(--r, 0) * var(--px)); }
/* Floating product renders: their export carries the page's #111, which "lighten" drops over the navy band */
.lv__img--float { object-fit: contain; mix-blend-mode: lighten; }
.lv__video { object-fit: cover; }
.lv__clip { overflow: hidden; }
.lv__vid {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
  max-width: none;
  object-fit: cover;
}
.lv__t { margin: 0; font-size: calc(var(--fs) * var(--px)); line-height: calc(var(--lh) * var(--px)); }
/* The browser sets DM Sans ~1–2% wider than Figma: a little slack keeps Figma's line breaks */
.lv > .lv__t { width: calc(var(--w) * var(--px) * 1.03); }
.lv h2.lv__t, .lv h3.lv__t { white-space: nowrap; }
.lv__t--center { text-align: center; }
.m-col { display: none; } /* Luna's phone-only collage tiles */
.lv > .m-wt { display: none; } /* Luna's phone-only walk-through clips */
.lv > .lv__group { display: contents; } /* wraps the laptop + phone recordings for phones only */

@media (max-width: 900px) {
  .case { padding-top: 48px; padding-bottom: 96px; }
  .case__intro { margin-top: 48px; }
  .case__body { margin-top: 48px; }
}
/* Phones: the scaled compositions stay, but text sections stack at readable sizes
   (no mobile Figma frame yet) */
@media (max-width: 700px) {
  .luna-problem { height: auto; padding: 40px 0; gap: 32px; }
  .luna-problem__row { flex-direction: column; gap: 12px; }
  .luna-problem__row h2 { width: auto; }
  .luna-problem__row h2 img { height: 26px; }
  .luna-problem__row + .luna-problem__row h2 img { height: 22.43px; } /* same ratio as desktop (32.315 : 27.882): "problem" has a descender, so equal box heights made "solution" look bigger */
  .luna-problem__row p,
  .luna-problem__row p.luna-problem__solution { width: auto; font-size: 14px; line-height: 22px; }
}

/* Phones (m-ok): the .lv composition stops being one scaled piece and becomes a stack in a 6-column
   grid. Text is real size, each section reads heading → text → sketch → screen, and small sets pair up:
   charts 2 × 2, sketch + AI render side by side over the final render, the three site stages and the
   three loose buds in a row. Bands, connector arrows and the two long site strips drop out. The
   walk-through videos start at the left margin and run off the right edge. "dense" lets each site
   stage's label and image share a column (labels row, images row under it). */
@media (max-width: 767px) {
  .m-ok main.case { overflow-x: clip; }
  /* header collage: its tiles restacked (big pieces full width, the two small cards side by side) */
  .m-ok .case__collage { display: none; }
  .m-ok .m-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
  .m-ok .m-col > video { display: block; width: 100%; height: auto; }
  .m-ok .m-col__wide { grid-column: 1 / -1; }
  .m-ok .m-col__half { align-self: center; }
  .m-ok .case__body { overflow: visible; }
  .m-ok .lv { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: row dense; column-gap: 12px; height: auto; }
  .m-ok .lv > * { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 100%; margin-top: 24px; }
  .m-ok .lv > .lv__band, .m-ok .lv > .lv__arrow, .m-ok .lv > [src*="-strip"] { display: none; }

  .m-ok .lv > .lv__t { width: auto; font-size: calc(var(--fs) * 1px); line-height: calc(var(--lh) * 1px); white-space: normal; }
  .m-ok .lv > h2.lv__t { margin-top: 96px; }
  .m-ok .lv > h3.lv__t { margin-top: 64px; }
  .m-ok .lv > .lv__rule + h3.lv__t, .m-ok .lv > h2 + h3.lv__t { margin-top: 0; } /* the divider's own margin, or straight under a heading */
  .m-ok .lv > h2 + h3.lv__t { margin-top: 24px; }
  .m-ok .lv > h2 + .lv__t, .m-ok .lv > h3 + .lv__t { margin-top: 8px; }
  .m-ok .lv > .lv__rule { height: 2px; margin: 64px 0; }

  .m-ok .lv > .lv__img { height: auto; aspect-ratio: var(--w) / var(--h); border-radius: calc(var(--r, 0) * 0.7px); }
  .m-ok .lv > .lv__img:first-of-type { margin-top: 0; } /* the floating app screens open the block */
  .m-ok .lv > .lv__img + .lv__img, .m-ok .lv > .lv__clip + .lv__clip { margin-top: 16px; }

  /* app sections: every sketch is the same height and every screen the same width, small enough that a
     sketch and its screen (almost) fit on one phone screen together */
  .m-ok .lv > :is([src*="sketch-plan"], [src*="sketch-stats"], [src*="sketch-buds"], [src*="sketch-library"]) { width: auto; max-width: 100%; height: 180px; justify-self: center; }
  .m-ok .lv > :is([src*="tonights-plan"], [src*="sleep-stats"], [src*="bud-control"], [src*="/library"]) { width: 170px; justify-self: center; }
  /* Desktop and mobile: the two site shots side by side, scaled down */
  .m-ok .lv > [src*="goal-desktop"] { grid-column: span 4; align-self: center; }
  .m-ok .lv > [src*="goal-mobile"] { grid-column: span 2; align-self: center; }
  /* Tonight's plan: its sketch is tall and narrow, so sketch and screen sit side by side, half each */
  .m-ok .lv > [src*="sketch-plan"], .m-ok .lv > [src*="tonights-plan"] { grid-column: span 3; width: 100%; height: auto; margin-top: 24px; align-self: center; }
  .m-ok .lv > [src*="sketch-plan"] { width: 80%; justify-self: center; }
  /* sleep mode and good morning side by side */
  .m-ok .lv > :is([src*="sleep-mode"], [src*="good-morning"]) { grid-column: span 3; margin-top: 24px; }
  /* sleep-stage charts, 2 × 2 under their caption */
  .m-ok .lv > [src*="/chart-"] { grid-column: span 3; margin-top: 12px; }
  /* loose buds in a row under the open case */
  .m-ok .lv > [src*="bud-side"], .m-ok .lv > [src*="bud-front"], .m-ok .lv > [src*="bud-back"] { grid-column: span 2; align-self: center; }
  /* launch site process: Sketch / Figma make / Final, each label over its image */
  .m-ok .lv > p:has(+ [src*="site-sketch"]), .m-ok .lv > [src*="site-sketch"] { grid-column: 1 / 3; }
  .m-ok .lv > p:has(+ [src*="site-figma-make"]), .m-ok .lv > [src*="site-figma-make"] { grid-column: 3 / 5; }
  .m-ok .lv > p:has(+ [src*="site-final"]), .m-ok .lv > [src*="site-final"] { grid-column: 5 / 7; }
  .m-ok .lv > p:has(+ [src*="site-"]) { margin-top: 24px; text-align: center; font-size: 13px; line-height: 20px; }
  .m-ok .lv > [src*="site-"] { margin-top: 8px; align-self: start; }

  /* walk-through: the two wide videos give way to their five phone screens, two per row, each with
     its label (from the video) as real text above it; the last one centered */
  .m-ok .lv > .lv__video { display: none; }
  .m-ok .lv > .m-wt { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 12px; margin: 24px 0 0; }
  .m-ok .m-wt figure { margin: 0; }
  .m-ok .m-wt figure:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .m-ok .m-wt figcaption { min-height: 40px; margin-bottom: 8px; color: #dee3ef; font-size: 13px; line-height: 20px; text-align: center; }
  .m-ok .m-wt video { display: block; width: 100%; height: auto; }

  /* .lv__group (website recordings + strips; the earbud rendering rows): the desktop arrangement, scaled
     as one piece to the column. Each group carries its Figma bounds (--gx/--gy/--gw/--gh) */
  .m-ok .lv > .lv__group { display: block; position: relative; --px: calc(100cqw / var(--gw)); height: calc(var(--gh) * var(--px)); margin-top: 32px; }
  .m-ok .lv__group > * { left: calc((var(--x) - var(--gx)) * var(--px)); top: calc((var(--y) - var(--gy)) * var(--px)); }
}

/* ---------- Footer (Figma 283:6531) ---------- */
.site-footer {
  position: relative;
  /* divider spans the content column (x 209 → 1231), so both sides line up with the page */
  width: min(var(--content-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
  border-top: 1.5px solid #d9d9d9;
}
.site-footer__inner {
  width: 100%; /* the footer is already column-width; don't inset again */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 94.5px; /* 96 incl. the rule */
}
.site-footer__left { display: flex; align-items: center; gap: 32px; }
.site-footer__logo { flex: none; }
.site-footer__logo img { width: 35px; height: 26.81px; }
.site-footer__nav { display: flex; gap: 32px; }
.site-footer__nav a { color: var(--ink); font-size: 14px; line-height: 1.45; letter-spacing: -0.07px; }
.site-footer__social img { width: 24px; height: 24px; }
.site-footer__social svg { display: block; width: 24px; height: 24px; }
/* Inline icon on every page: its square turns accent blue on hover (--li-mark is the "in" colour) */
.site-footer__social { color: var(--ink); transition: color 0.2s ease; }
.site-footer__social:hover,
.site-footer__social:focus-visible { color: var(--accent); }
/* Dark pages (Figma 283:8564): softer 1px divider, light nav */
.page-dark .site-footer { border-top: 1px solid #3f4147; }
.page-dark .site-footer__inner { height: 95px; }
.page-dark .site-footer__nav a { color: #bbc0cc; }
.page-dark .site-footer__social { color: #bbc0cc; --li-mark: var(--bg); } /* as assets/images/linkedin-on-dark.svg */
.page-dark .site-footer__social:hover,
.page-dark .site-footer__social:focus-visible { color: var(--accent); }

@media (max-width: 560px) {
  .site-footer__left, .site-footer__nav { gap: 16px; }
  .site-footer__logo img { width: 30px; height: auto; }
  .site-footer__nav a { font-size: 13px; }
}

/* ---------- 404 (Figma 205:2229) ---------- */
/* Art box matches the drawing as Figma's frame renders it: ink 515→964 × 150→594, plus 12px padding */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 42px 0 237px; /* art top 138 − header 96; button bottom 787 → frame bottom 1024 */
  text-align: center;
}
.not-found__art {
  width: 473px;
  max-width: 100%;
  margin-left: 39px; /* drawing centre sits 19.5px right of the page centre */
  /* cut from Figma's 2x frame render (its 85% opacity is baked in), background made transparent */
}
.not-found__title {
  margin: 68px 0 0; /* title top 674 − art bottom 606 */
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 26px;
  line-height: 40px;
  letter-spacing: -0.52px;
  font-variation-settings: "opsz" 14;
}
.not-found__home { width: 166px; margin-top: 36px; }

@media (max-width: 560px) {
  .not-found { padding: 32px 0 96px; }
  .not-found__art { margin-left: 0; }
  .not-found__title { margin-top: 0; font-size: 22px; line-height: 32px; }
}

/* ---------- Password gate (Figma 300:8893) ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lock-page { padding: 98px 0 376px; } /* back link top 98; form bottom 648 → frame bottom 1024 */
.lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* art box = the padlock as Figma renders it (ink 653→787 × 226→423) plus 8px padding */
.lock__art { width: 150px; margin-top: 84px; } /* art top 218 − back link bottom 134 */
.lock__title {
  margin: 31px 0 0; /* title top 462 − art bottom 431 */
  height: 49px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.72px;
  font-variation-settings: "opsz" 14;
}
.lock__form {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 606px;
  max-width: 100%;
  margin-top: 87px; /* row top 598 − title box end 511 */
  text-align: left;
}
.lock__field { position: relative; flex: 1 1 397px; min-width: 0; }
.lock__input {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 24px 0 31px;
  border: 1.5px solid #cdcdcd;
  border-radius: 42px;
  background: transparent;
  color: var(--ink);
  font: 18px/22px var(--font-mono);
  letter-spacing: -0.36px;
  outline: none;
  transition: border-color 0.2s ease;
}
.lock__input::placeholder { color: #cdcdcd; opacity: 1; }
.lock__input:focus { border-color: var(--accent); }
.lock__submit {
  flex: none;
  width: 189px;
  height: 50px;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.9px;
  background: transparent;
  cursor: pointer;
}
/* ENTER stays an outline while the field is empty, and takes the filled hover look once typed in */
.lock__form:has(.lock__input:not(:placeholder-shown)) .lock__submit {
  background: var(--accent);
  color: var(--bg);
}
.lock__error {
  position: absolute;
  left: 0;
  top: 60px; /* right where the hint sits (under the 50px pill), which hides while this shows */
  margin: 0;
  color: var(--error);
  font-size: 13px;
  line-height: 18px;
}
.lock__hint { margin: 10px 0 0; color: #72757a; font-family: var(--font-mono); font-size: 13px; line-height: 18px; } /* under the field, lined up with its left edge */
.lock__field:has(.lock__error:not(:empty)) .lock__hint { visibility: hidden; } /* a wrong password's message takes its place */
.lock__field.is-wrong { animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .lock__field.is-wrong { animation: none; }
}
@media (max-width: 560px) {
  .lock-page { padding: 48px 0 120px; }
  .lock__art { margin-top: 48px; }
  .lock__title { height: auto; font-size: 26px; line-height: 34px; }
  .lock__form { flex-direction: column; align-items: stretch; margin-top: 48px; gap: 40px; }
  .lock__field { flex: none; } /* the 397px basis would otherwise become a height when stacked */
  .lock__submit { width: 100%; }
}

/* ---------- Drop case study (Figma 651:8736, "drop — draft") ---------- */
/* Same format as Bone Dry and Workshop, in Drop's dark palette with its lime accent. Comments give the
   Figma y of each piece (frame 1440 wide, content column 209–1231). Visuals are 2x exports. */
.page-drop { --bg: #1c1c1c; }
.dp { padding-top: 98px; color: #bbc0cc; font-family: var(--font-sans); font-variation-settings: "opsz" 14; }
.dp :where(h1, h2, h3, p, ul, figure) { margin: 0; } /* spacing below is set per element */
.dp img { display: block; max-width: 100%; height: auto; }
.dp-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-top: 91px; } /* title 225 */
.dp-intro__text { width: 462px; max-width: 100%; }
.dp-title { color: #dee3ef; font-size: 28px; font-weight: 500; line-height: 40px; letter-spacing: -0.56px; }
.dp-summary { margin-top: 35px !important; color: #dee3ef; font-size: 14px; line-height: 25px; } /* 300 */
.dp-meta { margin-top: 15px !important; color: #94a9d3; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 0.08em; white-space: pre; } /* 390 */
.dp .dp-intro__logo { flex: none; width: 340px; margin-top: -20px; } /* 205, right edge on the column */
/* Hero: two screens overlapping (home behind at 209,780; drone in front at 531,675), 1019 × 539 */
.dp-hero { position: relative; aspect-ratio: 1019 / 539; margin-top: 267px; } /* 675 */
.dp .dp-hero img { position: absolute; width: 68.4%; }
.dp .dp-hero__home { left: 0; top: 19.48%; }
.dp .dp-hero__drone { right: 0; top: 0; }
.dp-rule { margin: 120px 0 0; border: 0; border-top: 1px solid #333; }
.dp-hero + .dp-rule { margin-top: 136px; } /* 1350 */
.dp-h2 { color: #ebebeb; font-size: 42px; font-weight: 600; line-height: 40px; letter-spacing: -0.84px; }
.dp-h3 { margin-top: 100px; color: #dee3ef; font-size: 28px; font-weight: 500; line-height: 37px; letter-spacing: -0.56px; }
.dp-h3--first { margin-top: 60px; }
.dp-h4 { margin-top: 56px; color: #dee3ef; font-size: 22px; font-weight: 500; line-height: 30px; }
.dp-h4--first { margin-top: 60px; }
.dp-body { font-size: 15px; line-height: 24px; }
.dp-body p + p { margin-top: 24px; }
.dp-h2 + .dp-body, .dp-h2 + p { margin-top: 32px; }
.dp-label { color: #ebffae; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 0.08em; }
.dp-sec { margin-top: 120px; }
.dp figcaption { margin-top: 16px; font-size: 14px; line-height: 22px; }

/* Concept (h2 1471): text left, drone right */
.dp-concept { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 120px; }
.dp-concept__text { width: 460px; max-width: 100%; }
.dp .dp-concept__drone { flex: none; width: 439px; }
/* Project goal band (1967–2425), full width */
.dp-band { margin-top: 160px; padding: 104px 0; background: #141414; }
.dp-big { max-width: 700px; margin-top: 16px !important; color: #ebebeb; font-size: 32px; font-weight: 600; line-height: 44px; } /* 2105 */
.dp .dp-band__icons { width: 538px; margin-top: 48px; } /* 2285 */
/* The User (2585): text left, persona card right */
.dp-user { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 160px; }
.dp-user__text { width: 460px; max-width: 100%; }
.dp-user__label { margin-top: 32px !important; }
.dp-persona { margin-top: 8px !important; color: #dee3ef; font-size: 22px; font-weight: 500; line-height: 30px; }
.dp-qlabel { margin-top: 24px; color: #dee3ef; font-size: 15px; font-weight: 600; line-height: 24px; }
.dp-questions { margin-top: 8px; padding: 0; list-style: none; font-size: 15px; line-height: 30px; }
.dp .dp-user__card { flex: none; width: 309px; }
.dp-user + .dp-rule { margin-top: 80px; } /* 3266 */
/* Process: the annotated boards start a little above their headings, as in Figma */
.dp .dp-board { width: 100%; }
.dp-lowfi-m { display: none; } /* phone-only split of the low-fi board */
.dp .dp-board--lowfi { margin-top: -41px; } /* 3483, heading 3487 */
.dp .dp-board--wf { margin-top: -81px; } /* 4970, heading 5014 */
.dp-notes__label { margin-top: 20px !important; } /* 4214 */
.dp-notes { margin-top: 12px; padding: 0; list-style: none; max-width: 700px; font-size: 15px; line-height: 26px; } /* 4244; regular text (Figma has them in mono) */
.dp-notes li + li { margin-top: 14px; }
.dp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 40px; } /* 4388 */
.dp-pair img { border-radius: 8px; }
/* Final screens */
.dp-screen__text { max-width: 605px; margin-top: 15px !important; }
.dp .dp-screen { width: 100%; margin-top: 40px; border-radius: 12px; }
.dp-screen + .dp-h3 { margin-top: 120px; } /* 6721, 7555 */
/* Design decisions */
.dp-decision { max-width: 700px; margin-top: 10px !important; }
/* Interactions (9396): two hover states side by side, then the See Details overlay */
.dp-hovers { display: flex; align-items: flex-start; gap: 40px; margin-top: 60px; }
.dp-hovers figure { margin: 0; }
.dp-hovers__marker { width: 200px; }
.dp-hovers__kpi { width: 420px; }
.dp-hovers img, .dp-details img { border-radius: 8px; }
.dp-details { max-width: none; margin: 78px 0 0; } /* 9994 */
.dp-details figcaption { max-width: 723px; }
/* Try it out (10929): the live Figma prototype */
.dp-try__text { margin-top: 32px !important; }
.dp-try__embed { aspect-ratio: 1022 / 607; margin-top: 32px; overflow: hidden; border-radius: 12px; background: #383838; }
.dp-try__embed iframe { display: block; width: 100%; height: 100%; border: 0; }
/* What I would change (11905) */
.dp-reflect { max-width: 700px; margin-top: 32px !important; }
.dp-reflect__list { max-width: 700px; margin-top: 24px; padding-left: 20px; line-height: 30px; }
.dp .more { padding-top: 160px; }

/* Phones */
@media (max-width: 767px) {
  .m-ok main.dp { overflow-x: clip; }
  /* hero: just the drone screen, enlarged like Workshop's, its right edge on the right margin and the
     rest (including the black nav bar, the left 7.6% of the export) running off the left */
  .m-ok .dp-hero { width: 160%; margin: 48px 0 0 -60%; aspect-ratio: auto; }
  .m-ok .dp .dp-hero__home { display: none; }
  .m-ok .dp .dp-hero__drone { position: static; width: 100%; }
  .m-ok .dp .dp-intro__logo { display: none; } /* phones go straight from the intro to the hero screen */
  .m-ok .dp-concept { gap: 72px; }
  .m-ok .dp .dp-board--lowfi, .m-ok .dp .dp-board--wf { display: none; }
  .m-ok .dp-lowfi-m { display: grid; gap: 32px; margin-top: 24px; } /* the two low-fi wireframes stacked, each full width */
  .m-ok .dp-lowfi-m img { width: 100%; }
  .m-ok .dp-pair { grid-template-columns: 1fr; gap: 32px; }
  /* captions sit above their images on phones */
  .m-ok .dp figure { display: flex; flex-direction: column; }
  .m-ok .dp figcaption { order: -1; margin: 0 0 10px; }
  /* Interactions: the two hover states stacked, each caption full width above its image */
  .m-ok .dp-hovers { flex-direction: column; flex-wrap: nowrap; gap: 40px; margin-top: 32px; }
  .m-ok .dp-hovers figure { width: 100%; }
  .m-ok .dp-details { margin-top: 40px; } /* same gap as between the two hover states */
  .m-ok .dp .dp-user__card { width: 240px; } /* persona card a little smaller than the column */
  .m-ok .dp-hovers__marker img { width: 47.6%; aspect-ratio: 272 / 315; object-fit: cover; object-position: center bottom; } /* same scale as the KPI image (200 : 420, as on desktop); the empty top of the export is cropped off */
  .m-ok .dp-hero + .dp-rule { margin-top: 64px; }
}

@media (max-width: 900px) {
  .dp-intro, .dp-concept, .dp-user { flex-direction: column; }
  .dp .dp-intro__logo { width: min(280px, 70%); margin-top: 0; }
  .dp .dp-concept__drone, .dp .dp-user__card { width: min(400px, 100%); }
  .dp-hovers { flex-wrap: wrap; }
}

/* ---------- Home footer with the road (Figma 395:13582, 395:13608/13610, 395:13615) ---------- */
/* Contact lines at y 3019, the nav row at 3213, the page ending at 3303. The road is drawn across
   the whole window (Figma's frame width) and passes between them; the car rides on it. */
.site-footer--road { border-top: 0; padding-bottom: 63.19px; }
.site-footer--road .site-footer__inner { height: auto; margin-top: 125px; } /* email bottom 3088 → row 3213 */
.site-footer__contact,
.site-footer--road .site-footer__inner { position: relative; z-index: 1; }
.site-footer__contact { display: flex; flex-direction: column; gap: 3px; color: var(--ink); font-family: var(--font-sans); }
.site-footer__contact--spacer { visibility: hidden; margin-top: -40px; } /* About: same footer shape, no repeated email; tucked up under the Resume button */
.site-footer__contact p { margin: 0; font-variation-settings: "opsz" 14; font-size: 16px; line-height: 26px; letter-spacing: -0.32px; }
.site-footer__email {
  align-self: flex-start;
  color: var(--ink);
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.56px;
  font-variation-settings: "opsz" 14; /* Figma's optical size; the auto size at 28px sets it wider */
}
.footer-road {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(50% - 50vw); /* flush with the window's right edge */
  width: max(100vw, 600px); /* narrower windows see the valley end of the road instead of a squashed hill */
  pointer-events: none;
}
/* 284px tall = the footer's height in Figma (3019 → 3303); stretched sideways to the window */
.footer-road__line { position: absolute; top: 0; left: 0; width: 100%; height: 284px; overflow: hidden; }

/* 334.4px box holds Figma's 323px car (the PNGs have ~18/512 empty on the right); scales with the
   window like the road. js/main.js places it on the road (wheels on the line, tilted to the slope);
   without JS it sits where Figma has it. */
.footer-car {
  position: absolute;
  left: calc(815 / 1440 * 100%);
  top: 96.79px;
  width: clamp(160px, 334.4 / 1440 * 100vw, 334.4px);
  aspect-ratio: 512 / 228;
  transform-origin: 0 0;
}
.js .footer-car { left: 0; top: 0; }
@media (max-width: 760px) {
  .site-footer__email { font-size: 22px; line-height: 32px; letter-spacing: -0.44px; }
  /* no room for the nav row inside the valley: it moves under the road */
  .site-footer--road { padding-bottom: 24px; }
  .site-footer--road .site-footer__inner { margin-top: 221px; }
}
.footer-car__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* flag: Figma's 99×50 at +219, −35 from the car's 256×114 box, plus ~2.5px margin so the
   waving edge isn't clipped. In % so it scales with the car. */
.footer-car__flag {
  position: absolute;
  left: calc(216.55 / 256 * 100%);
  top: calc(-37.45 / 114 * 100%);
  width: calc(103.92 / 256 * 100%);
  height: auto;
}
.footer-car__frame--2,
.footer-car.show-frame-2 .footer-car__frame:not(.footer-car__frame--2),
.footer-car.show-frame-2 .footer-car__flag:not(.footer-car__frame--2) { visibility: hidden; }
.footer-car.show-frame-2 .footer-car__frame--2 { visibility: visible; }

/* ---------- Bone Dry case study (Figma 340:2951) ---------- */
/* A light page on Figma's pure white, with full-width dark and gray bands. Comments give the Figma
   y positions the spacing comes from. Column is the usual 1022 (x 209 → 1231). */
.page-bonedry { --bg: #fff; background: var(--bg); }
.bd { padding-top: 98px; font-family: var(--font-sans); font-variation-settings: "opsz" 14; color: #000; }
.bd .back-link { color: #94a9d3; font-family: var(--font-mono); font-variation-settings: normal; } /* Figma's lighter blue */
.bd img { width: 100%; }
.bd p, .bd h1, .bd h2, .bd h3, .bd figure, .bd ol { margin: 0; }

.bd-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-top: 91px; } /* 225 */
.bd-intro__text { width: 462px; max-width: 100%; color: var(--ink); }
.bd-title { font-size: 28px; font-weight: 500; line-height: 40px; letter-spacing: -0.56px; }
.bd-title span { display: block; color: #777f90; }
.bd-summary { margin-top: 35px !important; font-size: 14px; line-height: 25px; }
.bd .bd-intro__logo { flex: none; width: 341px; }
.bd-rule { margin: 119px 0 0; border: 0; border-top: 1px solid #d9d9d9; } /* 584 */

.bd-play { margin-top: 108px; } /* label 693 */
.bd-play__label {
  display: flex; align-items: flex-start; gap: 11px; height: 40px;
  font-family: var(--font-mono); font-variation-settings: normal; font-size: 18px; line-height: 40px;
}
.bd .bd-play__label img { width: 56px; margin-top: 19px; }
.bd-play__frame {
  position: relative;
  margin-top: 27px; /* 760 */
  aspect-ratio: 844 / 390; /* the game's own canvas, so it fills the frame edge to edge (Figma's box is 1022×451) */
  border-radius: 8px;
  overflow: hidden;
  background: #040318;
}
.bd-play__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Open-in-new-tab sits above the frame's top-right corner (Figma 483:6950: 32px box at x 1199, y 713) */
.bd-play__head { position: relative; }
.bd-play__open { position: absolute; top: 20px; right: 0; width: 32px; transition: opacity 0.2s ease; }
.bd-play__open:hover, .bd-play__open:focus-visible { opacity: 0.55; }

.bd-band--dark { background: #040318; color: #ebebeb; }
.bd-band--gray { background: #f5f5f5; }
.bd-big { font-size: 32px; font-weight: 600; line-height: 44px; }
.bd-big p + p { margin-top: 44px; }
.bd-h2 { color: #040318; font-size: 42px; font-weight: 600; line-height: 40px; letter-spacing: -0.84px; }
.bd-h3 { font-size: 28px; font-weight: 500; line-height: 37px; letter-spacing: -0.56px; }
.bd-sub { color: #777f90; font-size: 28px; font-weight: 500; line-height: 40px; letter-spacing: -0.56px; }
.bd-body { font-size: 14px; line-height: 20px; letter-spacing: -0.28px; }
.bd-body p + p, .bd-body p + ol, .bd-body li + li { margin-top: 20px; }
.bd-body ol { padding-left: 21px; }
.bd-body strong { font-weight: 600; }
.bd-inset { padding-left: 15px; } /* Figma x 224 */

.bd-question { margin-top: 164px; padding: 87px 0 43px; } /* band 1375 → 1870 */
.bd-question .bd-big { max-width: 596px; }
.bd .bd-question__bottles { width: 100.3%; max-width: none; margin-top: 90px; } /* 1684 */

.bd-learning { padding: 104px 0 205px; } /* band 1870 → 3178 */
.bd-learning__inner { position: relative; padding-left: 15px; }
.bd-learning__rule { width: 501px; max-width: 100%; margin: 28px 0 0; border: 0; border-top: 1px solid #5f5e7b; } /* 2042 */
.bd-learning__lead { max-width: 501px; margin-top: 36px !important; } /* 2078 */
.bd-learning__text { display: grid; gap: 69px; max-width: 606px; margin-top: 75px; } /* 2193 */
.bd-learning__text .bd-h3 + .bd-body { margin-top: 30px; }
.bd-learning__text > div:nth-child(2) { padding-bottom: 14px; } /* Figma's text box ends on a blank line */
.bd-learning__text > div + div .bd-h3 { line-height: 20px; } /* Figma sets the 2nd and 3rd headings on 20px leading */
.bd .bd-learning__cards { position: absolute; left: 65.46%; top: 64px; width: 36.2%; }  /* 878, 2038 */
.bd .bd-learning__peek { position: absolute; left: 71.62%; top: 835px; width: 30.04%; }  /* 941, 2809 */

.bd-logic { padding: 102px 0 127px; } /* 3284 … 3878, next band 4005 */
.bd .bd-logic__chart { width: 110.76%; max-width: none; margin: 57px 0 0 -4.89%; --lens-bg: #fff; } /* x 159 → 1291; hover magnifier like Workshop's flow */
.bd .bd-logic__chart > img { display: block; width: 100%; height: auto; }
.bd-swipe { display: none; }

.bd-process { min-height: 566px; } /* band 4005 → 4571 */
.bd-process__inner { position: relative; min-height: 566px; padding: 96px 0 96px 14px; }
.bd-process__text { max-width: 596px; }
.bd .bd-process__skeletons { position: absolute; left: 68.69%; bottom: 0; width: 43.44%; max-width: none; } /* 911 → 1355 */

.bd-round { padding-top: 198px; } /* h2 4773 */
.bd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bd-fig figcaption { color: var(--ink); font-size: 14px; line-height: 25px; }
.bd-fig img { margin-top: 24px; }
.bd-fig--below img { margin-top: 0; }
.bd-fig--below figcaption { max-width: 395px; margin-top: 18px; color: #000; line-height: 20px; letter-spacing: -0.28px; }
.bd-fig--below.bd-fig--wide figcaption { max-width: 422px; }

/* Round 1: 488-wide screens at x 209 / 741 */
.bd-round1__grid { column-gap: 4.3%; row-gap: 56px; margin-top: 94px; align-items: end; } /* captions 4904 */
.bd-round1__grid .bd-fig { width: 100%; }
.bd-round1__grid .bd-fig:nth-child(-n+2) img { margin-top: 32px; } /* 4961 */
.bd-round1__grid .bd-fig:nth-child(n+3) img { margin-top: 15px; }  /* 5283 */
.bd-round1__grid .bd-fig--center { grid-column: 1 / -1; width: 47.85%; margin: 12px auto 0; } /* 475, 5592 */
.bd-round1__grid .bd-fig--center img { margin-top: 0; }

.bd-decisions { margin-top: 190px; padding: 73px 0 91px; } /* band 6009 → 6744 */
.bd-decisions__grid { grid-template-columns: 47.75% 47.75%; column-gap: 3.23%; margin-top: 96px; } /* 488-wide at 209 / 730 */ /* subheads 6219 */
.bd-decisions__grid img { margin-top: 47px; }
.bd-decisions__grid .bd-body { max-width: 397px; margin-top: 41px; }

.bd-round2 { padding-top: 152px; } /* h2 6900 */
.bd-round2__concept { display: grid; grid-template-columns: 49.02% 46.87%; column-gap: 0.39%; align-items: start; margin-top: 50px; } /* 6986 */
.bd-round2__concept img { margin-top: -31px; } /* 6955 */
/* 486-wide at 209 / 796: as in Figma, the right column runs 51px past the page column */
.bd-round2__grid { grid-template-columns: 47.55% 47.55%; column-gap: 9.88%; row-gap: 31px; margin-top: 110px; align-items: end; }
.bd-round2__grid .bd-fig:nth-child(-n+2) img, .bd-round2__grid .bd-fig--center img { margin-top: 21px; } /* 7242, 8192 */
.bd-round2__grid .bd-fig:nth-child(5), .bd-round2__grid .bd-fig:nth-child(6) { margin-top: 6px; } /* 7809 */
.bd-round2__grid .bd-fig:nth-child(5) img, .bd-round2__grid .bd-fig:nth-child(6) img { margin-top: 26px; }
.bd-round2__grid .bd-fig--center { grid-column: 1 / -1; width: 45.29%; margin: 30px 0 0 26.56%; } /* 494, 8146 */
.bd-round2__fonts-note { max-width: 501px; margin-top: 175px !important; } /* 8592 */
.bd .bd-round2__fonts { width: 612px; margin-top: 68px; } /* 8700 */

.bd-changed { margin-top: 183px; padding: 217px 0 93px; } /* band 9139 → 9874 */
.bd-changed__inner { position: relative; }
.bd-changed__shelves { display: flex; gap: 17px; margin-top: 70px; } /* 9466 */
.bd-changed__shelves img { min-width: 0; flex: 0 1 auto; }
.bd .bd-changed__shelves img:first-child { width: 247px; }
.bd .bd-changed__shelves img:last-child { width: 190px; }
.bd .bd-changed__buttons { position: absolute; left: 50.68%; top: 16px; width: 49.9%; } /* 727, 9372 */
.bd-changed__note { max-width: 395px; margin-top: 51px !important; } /* 9681 */
.bd-changed__note--buttons { position: absolute; left: 51.08%; top: 274px; } /* x 731, level with the left note */

.bd-round3 { padding-top: 75px; } /* h2 9953 */
.bd-round3__grid { grid-template-columns: 49.22% 49.22%; column-gap: 3.42%; row-gap: 49px; margin-top: 152px; } /* 503-wide at 209 / 747 */
.bd-round3__col { display: grid; justify-items: center; gap: 22px; align-content: start; }
.bd .bd-round3__art { width: auto; height: 355px; }
.bd-round3__grid > .bd-fig:nth-child(5), .bd-round3__grid > .bd-fig:nth-child(6) { margin-top: 21px; } /* 11278 */
.bd-round3__grid > .bd-fig:nth-child(7) { margin-top: 24px; } /* 11682 */
.bd-start { padding: 172px 0 136px; } /* h2 12173; next band 12710 */
.bd-system { padding: 92px 0 100px; background: #12111d; } /* band 12710 → 13599 */
.bd-system .bd-h2 { color: #ebebeb; }
.bd .bd-system__board { width: 100%; margin-top: 115px; } /* full column at 12957 */
.bd-start__grid { margin-top: 52px; }

/* Footer sits on the design system band's fill, with the dark pages' footer colours */
.bd-footer-band { background: #12111d; }
.page-bonedry .site-footer { border-top: 1px solid #3f4147; }
.page-bonedry .site-footer__inner { height: 95px; }
.page-bonedry .site-footer__nav a { color: #bbc0cc; }
.page-bonedry .site-footer__social { color: #bbc0cc; --li-mark: #12111d; }
@media (max-width: 767px) {
  .m-ok .bd .bd-learning__cards { display: none; } /* phones: the recipe cards drop out, the peek pop-up stays */
  /* game logic: like Workshop's user flow, a sideways scroller from the left margin to the screen edge */
  .m-ok .bd .bd-logic__chart {
    width: calc(100% + max(20px, 13.141vw)) !important; margin-left: 0 !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .m-ok .bd .bd-logic__chart > img { width: 1400px; max-width: none; }
  /* Round 2 mood board: the export's arrow (left 164px of 958) pointed at the images beside the text;
     stacked under it, the arrow is cropped off and the images start at the margin */
  .m-ok .bd-round2__concept img { width: 100%; max-width: 100%; aspect-ratio: 794 / 266; object-fit: cover; object-position: right center; }
  .m-ok .bd-process__text p + p { font-weight: 400; } /* the Claude Code line in regular, not bold */
  /* PLAY THE GAME row, scaled down for phones */
  .m-ok .bd-play__label { gap: 8px; height: 28px; font-size: 14px; line-height: 28px; }
  .m-ok .bd .bd-play__label img { width: 40px; margin-top: 13px; }
  .m-ok .bd-play__open { top: 3px; width: 22px; }
  .m-ok .bd-swipe { display: block; margin: 12px 0 0; color: var(--accent); font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; }
}
.page-bonedry .site-footer__social:hover,
.page-bonedry .site-footer__social:focus-visible { color: var(--accent); }

@media (max-width: 900px) {
  .bd-big { font-size: 26px; line-height: 36px; }
  .bd-h2 { font-size: 34px; }
  .bd .bd-learning__cards, .bd .bd-learning__peek { position: static; width: min(360px, 100%); margin-top: 48px; }
  .bd .bd-learning__peek { width: min(300px, 100%); }
  .bd-learning__text > div + div .bd-h3 { line-height: 1.25; } /* Figma's 20px leading only works on one line; these wrap here */
  .bd .bd-process__skeletons { position: static; display: block; width: min(444px, 100%); margin: 48px 0 0 auto; }
  .bd-process, .bd-process__inner { min-height: 0; }
  .bd-process__inner { padding-bottom: 0; }
  .bd-round2__concept { grid-template-columns: 1fr; row-gap: 32px; }
  .bd-round2__concept img { margin-top: 0; max-width: 479px; }
  .bd .bd-changed__buttons { position: static; width: min(510px, 100%); margin-top: 48px; }
  .bd-changed__note--buttons { position: static; margin-top: 32px !important; }
  .bd-changed { padding: 96px 0; }
  .bd .bd-round3__art { height: auto; max-height: 300px; width: auto; max-width: 100%; }
}
@media (max-width: 700px) {
  .bd-intro { flex-direction: column-reverse; margin-top: 48px; }
  .bd .bd-intro__logo { width: min(260px, 70%); }
  .bd-rule { margin-top: 56px; }
  .bd-play { margin-top: 56px; }
  .bd-question { margin-top: 80px; padding: 56px 0 32px; }
  .bd .bd-question__bottles { margin-top: 48px; }
  .bd-learning { padding: 64px 0 80px; }
  .bd-learning__inner, .bd-inset { padding-left: 0; }
  .bd-logic { padding: 64px 0; }
  .bd .bd-logic__chart { width: 100%; margin-left: 0; }
  .bd-process__inner { padding: 56px 0 0; }
  .bd-round, .bd-round2 { padding-top: 88px; }
  .bd-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .bd-round1__grid, .bd-round2__grid, .bd-round3__grid, .bd-decisions__grid { margin-top: 48px; }
  .bd-round1__grid .bd-fig--center, .bd-round2__grid .bd-fig--center { width: 100%; margin: 0; }
  .bd-round2__grid .bd-fig, .bd-round3__grid > .bd-fig { margin-top: 0 !important; }
  .bd-decisions { margin-top: 88px; padding: 56px 0; }
  .bd-round2__fonts-note { margin-top: 72px !important; }
  .bd .bd-round2__fonts { width: 100%; margin-top: 40px; }
  .bd-changed { margin-top: 88px; padding: 56px 0; }
  .bd-round3 { padding-top: 64px; }
  .bd-start { padding: 88px 0 96px; }
  .bd-system { padding: 64px 0; }
  .bd .bd-system__board { width: 100%; margin-top: 48px; }
}

/* ---------- Work page (Figma 200:1898) ---------- */
/* Title at y 228, rule at 288, a two-column grid of 501×276 tiles from 462, 360px under the last row. */
.work-page { padding: 132px 0 360px; }
.work-page__title { margin: 0; font-family: var(--font-sans); font-size: 36px; font-weight: 600; line-height: 40px; letter-spacing: -0.72px; font-variation-settings: "opsz" 14; }
.work-page__rule { margin: 20px 0 0; border: 0; border-top: 1px solid #d9d9d9; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 20px; margin-top: 173px; }
.work-tile { display: block; aspect-ratio: 501 / 276; border-radius: 2.6% / 4.75%; overflow: hidden; } /* the exports have 12px corners (at 501 wide) baked in on white: scale the rounding with the tile so no white shows when tiles grow */
.work-tile { position: relative; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; }
/* Hover (Figma 503:5783/5784): an 85% wash with the project title centered. Each tile sets its own
   color with --tint (r, g, b) in work.html; the accent blue is the fallback. */
.work-tile::after { content: ""; position: absolute; inset: 0; background: rgba(var(--tint, 78, 116, 192), 0.85); opacity: 0; transition: opacity 0.2s ease; }
.work-tile__title {
  position: absolute; z-index: 1; top: 50%; left: 50%; width: min(354px, 86%); transform: translate(-50%, -50%);
  color: #fbfbfb; font-family: var(--font-mono); font-size: 19px; font-weight: 500; line-height: 1.3; text-align: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.work-tile:hover::after, .work-tile:focus-visible::after,
.work-tile:hover .work-tile__title, .work-tile:focus-visible .work-tile__title { opacity: 1; }
@media (max-width: 700px) {
  .work-page { padding: 56px 0 120px; }
  .work-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; }
}

/* ---------- Bull Stock case study ---------- */
/* No Figma frame: the layout was approved from a mockup. Builds on the Bone Dry (.bd-*) styles. */


.page-bull { --pink: #fd5cc5; --pink-soft: #fe9adb; --blue: #5c87fd; --night: #171717; }
.bs .back-link { color: #94a9d3; }
.bs img { width: 100%; }
.bs .bs-logo { flex: none; width: 214px; margin-top: 8px; }
.bs-meta { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin: 72px 0 0; padding-top: 28px; border-top: 1px solid #d9d9d9; }
.bs-meta dt { font-family: var(--font-mono); font-variation-settings: normal; font-size: 12px; letter-spacing: 0.6px; color: #777f90; }
.bs-meta dd { margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--ink); }
.bs .bs-hero { margin-top: 72px; border-radius: 12px; aspect-ratio: 1022 / 520; object-fit: cover; object-position: 50% 42%; }

.bs-dark { background: var(--night); color: #ebebeb; }
.bs-dark .bd-h2, .bs-dark .bd-h3 { color: #fff; }
.bs-pink { background: var(--pink); color: #171717; }
.bs-section { padding: 150px 0; }
.bs-lead { max-width: 560px; margin-top: 36px !important; text-wrap: balance; }
.bs .bd-body, .bs .bd-summary, .bs-screen figcaption { text-wrap: pretty; }
.bs .bs-persona { margin-top: 64px; }
.bs-h4 { font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.4px; }
.bs-kicker { font-family: var(--font-mono); font-variation-settings: normal; font-size: 12px; letter-spacing: 0.6px; }
.bs-round { border-radius: 16px; }

.bs-problem { margin-top: 150px; padding: 110px 0; }
.bs-problem .bd-big { max-width: 700px; }

.bs-research { padding: 110px 0 120px; }
.bs .bs-goals { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 72px 0 0; padding: 0; }
.bs-goals li { min-height: 210px; padding: 22px 20px 24px; border-radius: 12px; background: var(--pink); color: #171717; font-size: 16px; line-height: 23px; letter-spacing: -0.2px; }
.bs-goals span { display: block; margin-bottom: 18px; font-size: 44px; font-weight: 600; line-height: 44px; letter-spacing: -1px; }
.bs-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 80px; }
.bs-methods .bd-body { margin-top: 12px !important; }

.bs-heard { padding: 110px 0 120px; }
.bs-heard__top { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: end; }
.bs-display { margin: 0; font-size: 56px; font-weight: 600; line-height: 60px; letter-spacing: -1.4px; }
.bs-heard__lead { font-size: 16px; line-height: 24px; letter-spacing: -0.2px; }
.bs-quotes { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 72px 0 0; padding: 0; }
.bs-quotes li { grid-column: span 2; padding: 26px 24px; border: 1px solid rgba(23, 23, 23, 0.55); border-radius: 12px; background: var(--pink-soft); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.4px; }
.bs-quotes li:nth-child(n+4) { grid-column: span 3; }

.bs-section .bs-round { margin-top: 64px; }
.bs-journey { padding: 110px 0 120px; }
.bs-journey img { margin-top: 56px; }

.bs-hmw { padding: 100px 0 90px; text-align: center; }
.bs-hmw .bd-big { max-width: 760px; margin: 20px auto 0 !important; }
.bs .bs-hmw img { width: 374px; margin: 56px auto 0; }

.bs-pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 72px; }
.bs-pairs .bs-screen { margin-bottom: 32px !important; }
.bs-pairs .bs-finding { margin-top: 8px !important; font-size: 16px; line-height: 24px; color: #777f90; font-style: italic; }
.bs-pairs .bs-h4 { margin-top: 20px !important; }
.bs-pairs .bd-body { margin-top: 10px !important; }
.bs-screen img { border-radius: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); }
.bs-screen figcaption { margin-top: 16px; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: var(--ink); }
.bs-pairs .bs-screen { width: 78%; }

.bs-wires { padding: 110px 0 120px; }
.bs-wires img { margin-top: 56px; }
.bs-sub { margin-top: 96px !important; }

.bs-changes { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 44px; margin-top: 72px; }
.bs-change__fig { display: grid; place-items: center; height: 190px; padding: 24px; border-radius: 12px; background: var(--night); }
.bs .bs-change__fig img { width: auto; max-width: 100%; max-height: 100%; }
.bs-change .bs-h4 { margin-top: 24px !important; }
.bs-change .bd-body { margin-top: 10px !important; max-width: 440px; text-wrap: balance; }

.bs-final { padding: 110px 0 130px; }
.bs-final .bd-sub { margin-top: 80px !important; }
.bs-screens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 32px; }

.bs-try { padding: 130px 0; }
.bs-proto { position: relative; margin-top: 27px; height: 760px; border-radius: 12px; overflow: hidden; background: var(--night); }
.bs-proto iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bs-system { padding: 100px 0 110px; }
.bs-sys { display: grid; grid-template-columns: repeat(12, 1fr); gap: 80px 40px; margin-top: 90px; align-items: start; }
.bs-sys__group { grid-column: span var(--span, 4); min-width: 0; }
/* every component is shown at the same scale (60% of its size in the app) */
.bs .bs-sys img[style] { width: calc(var(--w) * 0.6); max-width: 100%; height: auto; }
.bs-sys__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; margin-left: -6px; }
.bs-sys__stack { display: grid; justify-items: start; gap: 4px; margin-top: 16px; margin-left: -6px; }
.bs-sys__stack img[src*="ui-nav"] { margin: 6px 0 6px 6px; border-radius: 10px; }
.bs-label { font-size: 14px; line-height: 20px; color: #ebebeb; }
.bs .bs-system__logo { width: 170px; margin-top: 28px; }
.bs-swatches { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0 0; padding: 0; font-size: 12px; line-height: 18px; color: #bbc0cc; }
.bs-swatches span { display: block; aspect-ratio: 1; margin-bottom: 12px; border-radius: 12px; background: var(--c); border: 1px solid rgba(255, 255, 255, 0.18); }
.bs-type-xl { margin-top: 24px !important; font-size: 48px; font-weight: 600; line-height: 52px; letter-spacing: -1px; color: #fff; }
.bs-type-m { margin-top: 16px !important; font-size: 18px; font-weight: 600; line-height: 26px; }
.bs-type-s { margin-top: 6px !important; font-size: 14px; line-height: 22px; color: #bbc0cc; }

.bs-reflect { padding: 150px 0 170px; }
.bs-reflect__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 72px; }
.bs-reflect .bd-body { margin-top: 20px !important; max-width: 440px; font-size: 16px; line-height: 26px; }
.bs-footer-band { background: #fff; }
.page-bull .site-footer { border-top: 1.5px solid #d9d9d9; }
.page-bull .site-footer__nav a { color: var(--ink); }
.page-bull .site-footer__social { color: var(--ink); --li-mark: #fff; }

@media (max-width: 900px) {
  .bs-display { font-size: 40px; line-height: 44px; }
  .bs-goals { grid-template-columns: repeat(2, 1fr) !important; }
  .bs-heard__top, .bs-reflect__grid, .bs-changes { grid-template-columns: 1fr; }
  .bs-quotes li, .bs-quotes li:nth-child(n+4) { grid-column: span 6; }
  .bs-sys__group { grid-column: span 6; }
  .bs-screens { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .bs .bs-logo { width: 120px; }
  .bs-meta, .bs-methods, .bs-pairs { grid-template-columns: 1fr; gap: 28px; }
  .bs-section, .bs-reflect, .bs-try { padding: 80px 0; }
  .bs-problem { margin-top: 80px; padding: 64px 0; }
  .bs-research, .bs-heard, .bs-journey, .bs-wires, .bs-final, .bs-system { padding: 64px 0 72px; }
  .bs-pairs .bs-screen { width: 60%; }
  .bs-sys { grid-template-columns: 1fr; gap: 56px; }
  .bs-sys__group { grid-column: auto; }
  .bs-proto { height: 620px; }
}

/* ---------- In-progress page (Figma 483:7596) ---------- */
/* Back link at y 98, doodles 329 → 415, title at 500, subtext at 574, frame ends at 1024. */
.wip { display: flex; flex-direction: column; align-items: center; padding: 98px 0 426px; text-align: center; }
.wip .back-link { align-self: flex-start; }
.wip__art {
  --art-w: 213.7; --art-h: 86;
  position: relative;
  width: 213.7px; height: 86px;
  margin-top: 194px;
  transform: translateX(-8.25px); /* the cluster sits a little left of the page center in Figma */
}
.doodle--stars-6-tilt img { transform: rotate(-76deg); }
.wip__title {
  margin: 85px 0 0;
  height: 49px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 36px; font-weight: 600; line-height: 40px; letter-spacing: -0.72px;
  font-variation-settings: "opsz" 14;
}
.wip__text {
  width: 397px; max-width: 100%;
  margin: 25px 0 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px; line-height: 24px; letter-spacing: -0.28px;
  font-variation-settings: "opsz" 14;
}
/* The dots keep their space, so the title never shifts; each one switches on in turn, then all reset. */
.wip__dots span { animation: wip-dot 2s steps(1, end) infinite; }
.wip__dots span:nth-child(2) { animation-name: wip-dot-2; }
.wip__dots span:nth-child(3) { animation-name: wip-dot-3; }
@keyframes wip-dot   { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; } }
@keyframes wip-dot-2 { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 1; } }
@keyframes wip-dot-3 { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wip__dots span { animation: none; } }
@media (max-width: 700px) {
  .wip { padding: 48px 0 160px; }
  .wip__art { margin-top: 96px; }
  .wip__title { height: auto; margin-top: 48px; font-size: 26px; line-height: 32px; }
}

/* ---------- Workshop case study (Figma 537:5547, "workshop — expanded draft") ---------- */
/* Light page on Figma's #faf8f7 (the exported screens have that colour baked in around their shadows).
   Text is real; screens are 2x exports in assets/images/workshop/. Comments give Figma y positions. */
.page-workshop { --bg: #faf8f7; background: var(--bg); }
.ws { padding: 98px 0 0; font-family: var(--font-sans); font-variation-settings: "opsz" 14; color: var(--ink); }
.ws .back-link { color: #5b78b2; font-family: var(--font-mono); font-variation-settings: normal; }
.ws img { width: 100%; }
:where(.ws) :where(p, h1, h2, h3, figure, ol, dl, dd) { margin: 0; } /* zero-specificity reset so the .ws-* margins below apply */

.ws-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-top: 91px; } /* 225 */
.ws-intro__text { width: 462px; max-width: 100%; }
.ws-meta { flex: none; width: 293px; margin-top: 11px; } /* x 938, y 236 */
.ws-meta div + div { margin-top: 12px; }
.ws-meta dt { color: #777f90; font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: 0.07em; }
.ws-meta dd { margin-top: 2px; font-size: 16px; line-height: 26px; }
/* Hero 1024×520 at y 599; the export carries its drop shadow (~35px a side) */
.ws .ws-hero { width: 107.1%; max-width: none; margin: 149px 0 0 -3.45%; }

.ws-h2 { font-size: 36px; font-weight: 600; line-height: 40px; }
.ws-h3 { font-size: 22px; font-weight: 600; line-height: 36px; }
.ws-sub { margin-top: 160px; font-size: 18px; font-weight: 600; line-height: 28px; }
.ws-h2 + .ws-body, .ws-h2 + .ws-callout { margin-top: 33px; }
.ws-h3 + .ws-body { margin-top: 24px; }
.ws-sub + .ws-body { margin-top: 14px; }
.ws-body { max-width: 605px; font-size: 16px; line-height: 26px; }
.ws-body--wide { max-width: 625px; }
.ws-body p + p { margin-top: 26px; }
.ws-callout { max-width: 605px; margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 26px; }
.ws-callout--wide { max-width: 814px; }
.ws-callout + .ws-body { margin-top: 16px; }
.ws-caption, .ws-fig figcaption { color: #777f90; font-size: 14px; line-height: 22px; }
.ws-fig { margin-top: 56px !important; }
.ws-fig figcaption { margin-top: 15px; }
.ws .ws-prompts-img { width: 1001px; max-width: 100%; } /* Figma 587:20092, 1001 wide */
.ws-caption { margin-top: 16px; }
.ws-rule { margin: 120px 0; border: 0; border-top: 1px solid #d9d9d9; }

.ws-sec--first { padding-top: 119px; } /* Problem 1273 */
.ws .ws-problem-img { width: 96.8%; margin: 57px 0 0 1.66%; } /* x 226, y 1609 */

/* Solution: the calendar screen bleeds off the right edge of the window (Figma x 834 → frame edge) */
.ws-solution { position: relative; padding-top: 120px; } /* padding, not the rule's margin, so the space stays inside the section */
.ws-solution .ws-rule { margin: 0; } /* 2158 */
.ws-solution__inner { position: relative; z-index: 2; min-height: 668px; padding-top: 243px; } /* screen 120 below the rule and 120 above the next one; heading beside it; above the screen so the arrow can cross it */
.ws-solution__text, .ws-solution__result { position: relative; z-index: 1; max-width: 501px; }
.ws .ws-solution__text { margin-top: 48px; } /* first line 2460, 302 below the rule */
.ws .ws-solution__result { max-width: 550px; margin-top: 36px; } /* two lines, as in Figma (DM Sans runs wider than Figma's Proxima Nova) */
.ws-solution__text .ws-lead { position: relative; display: inline-block; font-size: 18px; font-weight: 700; } /* shrink-wraps the sentence so the arrow can start at its end */
.ws .ws-solution__arrow { position: absolute; left: calc(100% + 9px); top: calc(50% - 1px); width: calc(911px - 100%); height: 194px; max-width: none; } /* starts just after "content!" at mid-line and always ends at Figma's tip (x 1129 = 920px into the column), on the planned email; the SVG stretches to fit */
.ws .ws-solution__img { position: absolute; z-index: 1; left: calc(50% + 71px); top: calc(120px + 84px); width: 650px; max-width: none; } /* screen 2248, 90 below the rule (export adds ~36px of shadow) */

.ws-findings { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 80px; margin-top: 56px; }
.ws-findings h3 { font-size: 18px; font-weight: 600; line-height: 28px; }
.ws-findings p { margin-top: 10px; font-size: 16px; line-height: 26px; }
.ws-after-findings { margin-top: 56px; }

.ws-phases__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.ws-kicker { color: #777f90; font-size: 16px; font-weight: 500; line-height: 40px; letter-spacing: 0.07em; }
.ws-phases__list { margin-top: 29px !important; padding: 0; list-style: none; font-size: 22px; font-weight: 600; line-height: 36px; }
.ws-phases__list li { display: flex; }
.ws-phases__list li + li { margin-top: 32px; }
.ws-phases__list span { flex: none; width: 61px; }
.ws .ws-phases__cici { flex: none; width: 210px; margin: -24px 0; } /* the export has ~23px of glow around the drawing */

/* Screens placed at their Figma positions inside the 1022px column (percentages written by the build) */
.ws-comp { position: relative; container-type: inline-size; margin-top: 56px; }
.ws-comp > img { position: absolute; height: auto; }
.ws-comp__arrow { position: absolute; color: #777f90; font-size: calc(22 / 1022 * 100cqw); line-height: 1.27; }
.ws-steps + .ws-comp { margin-top: 64px; }
.ws-before-after + .ws-comp { margin-top: 64px; }
/* Step rows sit in .ws-flow wrappers (so phones can interleave screens and labels); keep the desktop gaps */
.ws-flow + .ws-flow > .ws-comp, .ws-before-after + .ws-flow > .ws-comp { margin-top: 64px; }

.ws-steps { display: grid; margin-top: 18px !important; padding: 0; list-style: none; }
.ws-steps li { display: flex; align-items: flex-start; gap: 12px; padding-right: 40px; font-size: 16px; font-weight: 500; line-height: 24px; }
.ws-steps__n { display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; line-height: 18px; }

.ws-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
.ws-before-after figcaption { margin-top: 22px; font-size: 15px; font-weight: 500; line-height: 22px; }

.ws-landed { margin-top: 56px; }
.ws-callout--end { margin-top: 56px; }

.ws-cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 56px; margin-top: 56px; }
.ws-cards img { aspect-ratio: 491 / 290; object-fit: cover; border-radius: 12px; }
.ws-cards h3 { margin-top: 20px; font-size: 18px; font-weight: 600; line-height: 28px; }
.ws-cards p { margin-top: 6px; font-size: 16px; line-height: 26px; }


@media (max-width: 900px) {
  .ws-intro { flex-direction: column; }
  .ws-meta { margin-top: 0; }
  .ws-solution__inner { min-height: 0; padding-top: 110px; }
  .ws .ws-solution__arrow { display: none; }
  .ws .ws-solution__img { position: static; width: 100%; max-width: 650px; margin: 32px 0 0 auto; }
}
@media (max-width: 700px) {
  .ws-h2 { font-size: 28px; line-height: 34px; }
  .ws-rule { margin: 72px 0; }
  .ws-findings, .ws-before-after, .ws-cards { grid-template-columns: 1fr; }
  .ws-phases__inner { flex-direction: column; align-items: flex-start; }
  .ws-phases__list { font-size: 18px; line-height: 28px; }
  .ws-phases__list span { width: 40px; }
  .ws .ws-phases__cici { width: 120px; }
  .ws-steps li { gap: 6px; padding-right: 10px; font-size: 12px; line-height: 16px; }
  .ws-steps__n { width: 20px; height: 20px; margin-top: 0; font-size: 11px; }
}
.ws-swipe { display: none; } /* phones only */
/* Phones: every image fills the text column (margins stay put); each step row becomes a vertical
   sequence with its numbered label above its screen (--o: 2·step+1 for labels, 2·step for screens,
   shifted so the label leads); the user flow scrolls sideways at a readable size */
@media (max-width: 767px) {
  .m-ok .ws { padding-top: 40px; }
  .m-ok .ws-rule { margin: 64px 0; }
  .m-ok .ws-sub { margin-top: 88px; }
  .m-ok .ws-solution { padding-top: 64px; }
  .m-ok .ws-solution__inner { padding-top: 64px; }

  .m-ok .ws .ws-problem-img,
  .m-ok .ws .ws-fig > img,
  .m-ok .ws .ws-cards img,
  .m-ok .ws > .container > .ws-comp,
  .m-ok .ws .ws-sec > .ws-comp {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  /* the hero is cut off like the solution screen: big enough to read, starting at the left margin
     (minus its baked-in shadow, ~4% of the export) and running off the right edge */
  .m-ok .ws { overflow-x: clip; }
  .m-ok .ws .ws-hero {
    --w: calc(2 * (100vw - max(20px, 13.141vw)));
    width: var(--w); max-width: none; margin: 48px 0 0 calc(-0.04 * var(--w)); /* close under the meta so it peeks in on the first screen */
  }

  /* the solution screen is meant to be cut off (as on desktop): it starts at the left margin and runs
     off the right edge of the screen */
  .m-ok .ws-solution { overflow-x: clip; }
  .m-ok .ws .ws-solution__img { width: calc(1.35 * (100% - max(20px, 13.141vw))); max-width: none; margin: 32px 0 0 calc(max(20px, 13.141vw) - 0.092 * (100% - max(20px, 13.141vw))); } /* pulled left by the export's baked-in shadow so the screen edge meets the margin */

  .m-ok .ws-flow { display: flex; flex-direction: column; margin-top: 32px; }
  .m-ok .ws-flow > .ws-comp, .m-ok .ws-flow > .ws-steps { display: contents; }
  .m-ok .ws-flow .ws-comp > img {
    position: static; order: calc(var(--o) + 1); height: auto; margin-top: 12px;
    width: 100% !important; max-width: 100%; margin-left: 0;
  }
  .m-ok .ws .ws-phases__cici { order: -1; margin: -13px 0 -13px -13px; } /* Cici above the phases; offsets cancel the export's glow */
  /* explorations: no overlapping collage on phones. The four single screens sit two per row; each
     two- or three-screen export gets its own full-width row; the connector lines drop out */
  .m-ok .ws .ws-comp--ex { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; aspect-ratio: auto !important; }
  .m-ok .ws-comp--ex > img { position: static; width: 100% !important; }
  .m-ok .ws-comp--ex > img:nth-child(n+5) { grid-column: 1 / -1; }
  .m-ok .ws-comp--ex > .ws-comp__line { display: none; }

  .m-ok .ws-flow + .ws-flow, .m-ok .ws-before-after + .ws-flow { margin-top: 80px; } /* a new flow (back to step 1) gets clear space from the last one */
  .m-ok .ws-flow .ws-comp__arrow { display: none; }
  .m-ok .ws-before-after figure { display: flex; flex-direction: column; }
  .m-ok .ws-before-after figcaption { order: -1; margin: 0 0 12px; } /* label above its image, like the steps */
  .m-ok .ws-flow .ws-steps li { order: calc(var(--o) - 1); gap: 10px; margin-top: 36px; padding-right: 0; font-size: 15px; line-height: 22px; }
  .m-ok .ws-flow .ws-steps li:first-child { margin-top: 0; }
  .m-ok .ws-flow .ws-steps__n { width: 24px; height: 24px; margin-top: -1px; font-size: 13px; }

  /* the flow starts at the left margin and runs to the right edge of the screen */
  .m-ok .ws-fig .magnify { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; width: calc(100% + max(20px, 13.141vw)); }
  .m-ok .ws-fig .magnify img { width: 1000px; max-width: none; }
  .m-ok .ws-swipe { display: block; margin: 12px 0 0; color: var(--accent); font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; }
  .m-ok .ws-swipe + figcaption { margin-top: 6px; }
}

/* ---------- Home: header that comes back on scroll up (js/main.js) ---------- */
/* Sticky, so it never changes the layout: scrolling down tucks it above the window, scrolling up slides
   it back. Once the page has moved it gets the page background across the full window width. */
.page-home .site-header, .page-home.m-ok .mgate { position: sticky; top: 0; z-index: 50; transition: translate 0.3s ease; }
.page-home .site-header.is-stuck::before, .page-home.m-ok .mgate.is-stuck::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--bg);
  box-shadow: 0 1px 0 rgba(37, 46, 64, 0.06);
}
.page-home .site-header.is-tucked, .page-home.m-ok .mgate.is-tucked { translate: 0 -100%; }
@media (prefers-reduced-motion: reduce) { .page-home .site-header, .page-home.m-ok .mgate { transition: none; } }

/* ---------- Social Block case study (Figma 556:6053, "social block — draft") ---------- */
/* Built on the Workshop styles (.ws, .ws-intro, .ws-meta, .ws-body, .ws-callout, .ws-sub, .ws-rule,
   .ws-steps__n). Comments give the Figma y (frame 1440 wide, column 209–1231). */
.sb :where(h2, h3, h4, p, figure) { margin: 0; }
.sb img { display: block; height: auto; }
.sb .sb-hero { width: calc(100% + 25.5px); max-width: none; margin: 123px 0 0 -12.75px; } /* 540; the export carries 12.75px of shadow */
.sb-h2 { color: var(--ink); font-size: 36px; font-weight: 600; line-height: 26px; }
.sb-split { position: relative; }
.sb-split__text { max-width: 700px; }
.sb-problem { margin-top: 191px; } /* 1234 */
.sb .sb-problem__body { max-width: 546px; margin-top: 56px; } /* 1316 */
.sb .sb-problem__callout { max-width: 700px; margin-top: 24px; } /* 1392 */
.sb .sb-rule { margin: 120px 0; }
.sb .sb-solution__body { max-width: 501px; margin-top: 56px; } /* 1740 */
.sb .sb-solution__img { position: absolute; right: -14.75px; top: -72.75px; width: 240.5px; max-width: none; } /* drawer x 1018, y 1594; the export carries 12.75px of drop shadow */
/* Wireframes (2032) */
.sb-wf { position: relative; margin-top: 125px; padding-top: 39px; } /* labels 2183, image 2222 */
.sb-wf__label { position: absolute; top: 0; left: 0; font-size: 16px; font-weight: 500; line-height: 24px; }
.sb-wf__label--drawer { left: 730px; top: -4px; } /* x 939, y 2183 */
.sb .sb-wf img { width: 100%; }
.sb .sb-sub { margin-top: 72px; } /* Initial flow 2727 */
.sb-sub--evolved, .sb-sub--drag { margin-top: 107px !important; } /* 4246, 5445 */
.sb-sub--first { margin-top: 56px !important; } /* 6935 */
.sb-sub--row { margin-top: 70px !important; } /* 7827, 8395, 8987 */
.sb-sub + .ws-body { margin-top: 14px; }
/* Initial flow (2779–3896): six screens in two columns, labels under each row, arrows tracing the
   drag across them. Every piece sits at its Figma x/y in the 1022 column (container units) */
.sb-flow { position: relative; container-type: inline-size; aspect-ratio: 1022 / 1117; margin-top: 24px; }
.sb-flow > * { position: absolute; left: calc(var(--x) / 1022 * 100cqw); top: calc(var(--y) / 1022 * 100cqw); }
.sb .sb-flow > img { width: calc(var(--w) / 1022 * 100cqw); }
.sb-flow__step { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 500; line-height: 24px; white-space: nowrap; }
.sb .sb-flow__arrow { pointer-events: none; }
/* Side note (3947) */
.sb-note { display: flex; align-items: flex-start; gap: 24px; margin-top: 51px; }
.sb .sb-note img { width: 314px; }
.sb-note p { max-width: 267px; margin-top: 70px; color: #777f90; font-size: 14px; line-height: 22px; } /* x 547, y 4017 */
/* How the design evolved (4372): 2 × 2, each screen with its notes beside it */
.sb-vers { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 40px; margin-top: 32px; }
/* screenshots exported with their drop shadow: the box is the screen, the image spills 12.75px around it */
.sb-shot { display: flow-root; flex: none; } /* flow-root keeps the image's negative margins inside the box */
.sb .sb-shot img { width: calc(100% + 25.5px) !important; max-width: none; margin: -8.75px -12.75px -16.75px; }
.sb-ver { display: flex; align-items: flex-start; gap: 34px; }
.sb-ver__text { max-width: 277px; padding-top: 8px; }
.sb-ver__title { font-size: 22px; font-weight: 600; line-height: 28px; }
.sb-ver__sub { margin-top: 40px !important; font-size: 15px; font-weight: 500; line-height: 22px; }
.sb-ver__label { margin-top: 20px !important; color: #777f90; font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: 0.07em; }
.sb-ver__label + .sb-ver__body { margin-top: 4px !important; }
.sb-ver__body { max-width: 235px; font-size: 14px; line-height: 21px; }
/* Drag handle versions (5597) */
.sb-handles { display: grid; grid-template-columns: repeat(3, 314px); justify-content: space-between; margin-top: 58px; }
.sb .sb-handles img { width: 100%; }
.sb-handles figcaption { margin-top: 25px; font-size: 14px; line-height: 21px; } /* 6026 */
.sb-handles strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; line-height: 22px; white-space: pre; }
.sb .sb-handles__after { max-width: 639px; margin-top: 123px; } /* 6196 */
.sb-states { display: grid; grid-template-columns: 305px 305px; justify-content: start; gap: 34px 205px; margin-top: 51px; padding: 34px 103px 30px; border-radius: 12px; background: #fff; } /* panel 6285, 1022 × 290 */
.sb-states figcaption { margin-bottom: 18px; font-size: 16px; font-weight: 500; line-height: 24px; }
.sb .sb-states img { width: 305px; }
.sb .sb-states__caption { margin: 16px 0 -40px; } /* the divider is 80 below (6733) */
/* Final design rows: screens with → between and a label under each */
.sb-row { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 24px; }
.sb-row + .sb-row { margin-top: 38px; }
.sb-row figure { flex: none; }
.sb-row figcaption { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 16px; font-weight: 500; line-height: 24px; }
.sb-row--e { margin-top: 37px; } /* 7000 */
.sb-row--e + .sb-row--e { margin-top: 51px; } /* 7404 */
.sb-row--e figure { width: 491px; }
/* each editing step: the drawer and the email snippet at their Figma offsets in a 491 × 307 box */
.sb-estep__art { position: relative; container-type: inline-size; aspect-ratio: 491 / 307; }
.sb-estep__art > * { position: absolute; left: calc(var(--x) / 491 * 100cqw); top: calc(var(--y) / 491 * 100cqw); }
.sb .sb-estep__art > .sb-shot { width: calc(116 / 491 * 100cqw) !important; }
.sb .sb-estep__art > .sb-estep__email { width: calc(211 / 491 * 100cqw); }
.sb-row--a { margin-top: 36px; } /* 7891 */
.sb-row--a figure { width: 235px; }
.sb-row--a .sb-shot { width: 155px !important; }
.sb-row--a figcaption { margin-top: 33px !important; } /* 8299 */
.sb-row--a .sb-row__arrow { translate: -40px 0; }
/* Reordering (8493): five screens 181 wide, 22 apart, an arrow centered in each gap */
.sb-sub--reorder { margin-top: 101px !important; } /* 8424 */
.sb-row--r { justify-content: space-between; margin-top: 41px; padding-bottom: 24px; } /* screens spread across the column so the arrows get room; labels 8843, next heading 96 below them */
.sb-row--r figure { width: 170px; } /* a touch smaller than Figma (181) so each arrow has room on both sides */
.sb-row--r .sb-shot { width: 170px !important; }
.sb-row--r figcaption { margin-top: 41px !important; white-space: nowrap; }
.sb-row--r .sb-row__arrow { flex: none; align-self: flex-start; margin-top: 131px; } /* same arrow as the other rows, level with the middle of the screens */ /* between the screens, as in Figma (x 409, 672, 934) */
.sb-row--q figure { width: 235px; }
.sb-row--z { margin-top: 40px; } /* 9055 */
.sb-row--z figure { width: 285px; }
.sb .sb-row--z .sb-z__icons { margin-top: 40px; } /* 9175 */
.sb-row--z figcaption { margin-top: 40px !important; } /* 9258 */
.sb-row--z .sb-row__arrow { align-self: flex-start; margin-top: 26px; } /* level with the dropdowns */
.sb-row--z { padding-bottom: 61px; } /* the divider sits 181 below the labels (9463); padding, so it adds to the rule's margin */
.sb-row--q figcaption { margin-top: 20px; }
.sb .sb-row img { width: 100%; }
.sb-row__arrow { align-self: center; margin-top: -20px; color: #777f90; font-size: 22px; line-height: 28px; }
.sb-row--e .sb-row__arrow { margin-top: -62px; } /* centered on the screens, not the labels */
/* What's next (9583) */
.sb .sb-next__body { margin-top: 56px; }
.sb-next { display: flex; justify-content: space-between; margin-top: 28px; }
.sb-next figure { width: 491px; }
.sb .sb-next img { width: 100%; }
.sb-next figcaption { margin-top: 16px; color: #777f90; font-size: 14px; line-height: 22px; }
.sb .sb-outcome { max-width: 700px; margin-top: 56px; } /* 10399 */
.sb .more { padding-top: 160px; }

/* Social Block on phones: everything stacks in reading order, labels above their screens */
@media (max-width: 767px) {
  /* hero like Workshop's: enlarged, its left edge on the margin (minus the export's shadow, 1.2%), running off the right */
  .m-ok .sb .sb-hero { --w: calc(2 * (100vw - max(20px, 13.141vw))); width: var(--w); max-width: none; margin: 48px 0 0 calc(-0.012 * var(--w)); }
  .m-ok .sb-h2 { font-size: 30px; line-height: 34px; }
  .m-ok .sb-problem { margin-top: 64px; }
  .m-ok .sb .sb-rule { margin: 64px 0; }
  .m-ok .sb .sb-problem__body, .m-ok .sb .sb-solution__body { margin-top: 24px; }
  .m-ok .sb .sb-solution__img { position: static; width: 225px; margin: 24px 0 0 -12.75px; }
  .m-ok .sb-wf { margin-top: 32px; padding-top: 0; }
  .m-ok .sb-wf__label { display: none; }
  .m-ok .sb .sb-sub, .m-ok .sb-sub--evolved, .m-ok .sb-sub--drag, .m-ok .sb-sub--row { margin-top: 64px !important; }
  .m-ok .sb-sub--first { margin-top: 32px !important; }
  /* initial flow: label, then its screen, one after another; the drag arrows drop out */
  .m-ok .sb-flow { display: flex; flex-direction: column; gap: 12px; aspect-ratio: auto; }
  .m-ok .sb-flow > * { position: static; order: var(--o); }
  .m-ok .sb .sb-flow > img { width: 100%; margin-bottom: 24px; }
  .m-ok .sb .sb-flow > .sb-flow__arrow { display: none; }
  .m-ok .sb-flow__step { white-space: normal; font-size: 15px; line-height: 22px; }
  .m-ok .sb-note { flex-direction: column; margin-top: 32px; }
  .m-ok .sb .sb-note img { width: 100%; }
  .m-ok .sb-note p { max-width: none; margin-top: 0; }
  .m-ok .sb-vers { grid-template-columns: 1fr; gap: 48px; }
  .m-ok .sb-ver__sub { margin-top: 8px !important; }
  .m-ok .sb-handles { grid-template-columns: 1fr; gap: 40px; }
  .m-ok .sb-handles figure { display: flex; flex-direction: column; }
  .m-ok .sb-handles figcaption { order: -1; margin: 0 0 12px; }
  .m-ok .sb .sb-handles img { width: 75%; }
  .m-ok .sb .sb-handles__after { margin-top: 40px; }
  .m-ok .sb-states { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .m-ok .sb .sb-states img { width: 100%; }
  .m-ok .sb-states figcaption { margin-bottom: 10px; font-size: 15px; }
  /* final design rows: arrows drop out, each label sits above its screen */
  .m-ok .sb-row { display: grid; grid-template-columns: 1fr; gap: 32px; }
  .m-ok .sb-row--q, .m-ok .sb-row--a, .m-ok .sb-row--r { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .m-ok .sb-row--a { margin-top: 24px; }
  .m-ok .sb-row--a figure, .m-ok .sb-row--r figure { align-items: center; }
  .m-ok .sb-row--r { margin-top: 24px; padding-bottom: 0; }
  .m-ok .sb-row--r .sb-shot { width: 80% !important; }
  .m-ok .sb-row--r figcaption { align-self: stretch; margin: 0 0 14px !important; white-space: normal; min-height: 44px; align-items: flex-end; }
  .m-ok .sb-row--r figcaption br { display: none; }
  .m-ok .sb-row--a figcaption { align-self: stretch; margin: 0 0 14px !important; }
  .m-ok .sb-row--a .sb-shot { width: 80% !important; }
  .m-ok .sb-row--z figcaption { margin: 0 0 10px !important; }
  .m-ok .sb-row--e + .sb-row--e { margin-top: 32px; }
  .m-ok .sb .sb-ver .sb-shot { width: 120px !important; }
  .m-ok .sb-row__arrow { display: none; }
  .m-ok .sb-row figure { display: flex; flex-direction: column; width: auto; }
  .m-ok .sb-row figcaption { order: -1; margin: 0 0 10px; font-size: 15px; line-height: 22px; }
  .m-ok .sb-row--q figcaption, .m-ok .sb-row--a figcaption { min-height: 44px; align-items: flex-end; }
  .m-ok .sb-next { flex-direction: column; gap: 32px; }
  .m-ok .sb-next figure { display: flex; flex-direction: column; width: auto; }
  .m-ok .sb-next figcaption { order: -1; margin: 0 0 10px; }
  .m-ok .sb .sb-outcome { margin-top: 24px; }
  .m-ok .sb .more { padding-top: 96px; }
}

/* ---------- Phone screen (Figma 579:20032, menu 579:20053) ---------- */
/* Below 768px, pages without body.m-ok show only this screen. Pages with a phone layout (body.m-ok)
   show normally, with the gate's bar as their header and its menu as a full-screen overlay.
   Positions are Figma px in the 390-wide frame. */
.mgate { display: none; }
@media (max-width: 767px) {
  html:has(> body:not(.m-ok)), body:not(.m-ok) { background: #fff !important; }
  body:not(.m-ok) > :not(.mgate) { display: none !important; }
  .mgate { display: block; min-height: 100vh; min-height: 100svh; background: #fff; color: var(--ink); }
  .mgate__bar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 40px 47px 0; } /* logo 47, 40 */
  .mgate__logo img { width: 35px; }
  .mgate__toggle { display: grid; place-items: center; width: 44px; height: 44px; margin: -9px -8px 0 0; padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; }
  /* Menu icon: the top and bottom lines swing into the X while the middle one shrinks away */
  .mgate__line { transform-box: fill-box; transform-origin: center; transition: transform 350ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 200ms ease; }
  .mgate.is-open .mgate__line--top { transform: translateY(6px) rotate(46.3deg) scaleX(1.1); }
  .mgate.is-open .mgate__line--mid { opacity: 0; transform: scaleX(0); }
  .mgate.is-open .mgate__line--bot { transform: translateY(-6px) rotate(-46.3deg) scaleX(1.1); }

  .mgate__body { display: flex; flex-direction: column; align-items: center; padding: 141px 24px 64px; text-align: center; } /* art top 216 */
  .mgate .mgate__art { width: 250px; max-width: 100%; margin-top: -6px; } /* the home drawing at 250px; its top doodle sits ~6px above the box */
  .mgate__title { margin: 71px 0 0; color: #000; font-family: var(--font-sans); font-variation-settings: "opsz" 14; font-size: 28px; font-weight: 600; line-height: 30px; letter-spacing: -0.02em; } /* 584 */
  .mgate__text { max-width: 300px; margin: 21px 0 0; font-family: var(--font-sans); font-variation-settings: "opsz" 14; font-size: 16px; line-height: 21px; letter-spacing: -0.02em; } /* 635 */

  /* Opening: the drawing fades out, then the links fade up one by one (js/main.js runs the steps);
     closing plays it backwards */
  .mgate__body { transition: opacity 250ms ease; }
  .mgate__body.is-faded { opacity: 0; }
  /* Kept rendered (not display:none) while the menu is open, so the doodles don't replay their entrance */
  .mgate__body.is-away { position: absolute; left: 0; right: 0; visibility: hidden; pointer-events: none; }
  .mgate__menu.is-in a { animation: fade-up 500ms cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(var(--n) * 80ms); }
  .mgate__menu.is-out a { animation: mgate-link-out 220ms ease both; animation-delay: calc((2 - var(--n)) * 50ms); }
  .mgate__menu a:nth-child(1) { --n: 0; }
  .mgate__menu a:nth-child(2) { --n: 1; }
  .mgate__menu a:nth-child(3) { --n: 2; }
  .mgate__menu { display: flex; flex-direction: column; align-items: center; gap: 55px; padding-top: 160px; font-family: var(--font-mono); font-size: 27.5px; line-height: 1.45; letter-spacing: -0.005em; } /* first link 235 */
  .mgate__menu[hidden] { display: none; }
  .mgate__menu a { color: var(--ink); }
}
/* Phone-ready pages (body.m-ok) */
@media (max-width: 767px) {
  :root { --gutter: 24px; }
  .m-ok .site-header { display: none; }
  .m-ok .mgate { min-height: 0; background: var(--bg); }
  .m-ok .mgate__body { display: none; }
  .m-ok .mgate.is-open { position: fixed; inset: 0; z-index: 50; overflow-y: auto; }
  html.mgate-open { overflow: hidden; }
}
@keyframes mgate-link-out {
  to { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .mgate__line, .mgate__body { transition: none; }
  .mgate__menu.is-in a, .mgate__menu.is-out a { animation: none; }
}

/* ---------- See more projects (Figma 552:13726, on every project page) ---------- */
/* Two Work-page tiles at a time in a 925px window; the arrows (the back-link circle, turned
   sideways) slide the row one tile and loop at the ends (js/main.js). */
.more { padding: 160px 0 137px; font-family: var(--font-sans); font-variation-settings: "opsz" 14; }
.more__title { margin: 0; color: var(--ink); font-size: 28px; font-weight: 500; line-height: 40px; letter-spacing: -0.02em; }
.more__carousel { position: relative; margin: 45px 0 0; } /* Figma 552:13726: tiles span the column; the arrows sit just outside it */
@media (max-width: 1140px) { .more__carousel { margin-inline: 48px; } }
@media (max-width: 767px) { /* phones: one tile at a time across the content column, arrows just outside it */
  .m-ok .more { padding: 96px 0 96px; }
  .m-ok .more__title { font-size: 24px; line-height: 32px; }
  .m-ok .more__carousel { margin: 28px 0 0; }
  .m-ok .more__track .work-tile { flex-basis: 100%; }
  .m-ok .more__arrow--prev { left: -46px; }
  .m-ok .more__arrow--next { right: -46px; }
  .m-ok .more__back { margin-top: 32px; }
} /* narrow windows: no room outside the column, so inset the tiles to keep the arrows on screen */
.more__viewport { overflow: hidden; touch-action: pan-y; } /* sideways swipes go to the carousel (js/main.js), not the page */
.more__track { display: flex; gap: 20px; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.more__track .work-tile { flex: 0 0 calc((100% - 20px) / 2); }
.more__arrow { position: absolute; top: 50%; display: grid; transition: opacity 0.25s ease, visibility 0.25s; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: none; color: #5b78b2; cursor: pointer; }
.more__arrow--prev { left: -48px; }
.more__arrow--next { right: -48px; }
.more__arrow--prev svg { transform: rotate(90deg); }
.more__arrow--next svg { transform: rotate(-90deg); }
.more__arrow svg rect, .more__arrow svg path { transition: fill 0.2s ease; }
.more__arrow:hover svg rect, .more__arrow:focus-visible svg rect { fill: currentColor; }
.more__arrow:hover svg path, .more__arrow:focus-visible svg path { fill: var(--bg); }
.more__arrow.is-hidden { opacity: 0; visibility: hidden; } /* nothing more on that side */
.more__back { display: flex; justify-content: center; margin-top: 41px; } /* BACK TO WORK under the tiles */
.more--dark .back-link, .bs .more .back-link { color: #94a9d3; }
@media (prefers-reduced-motion: reduce) { .more__track, .more__arrow { transition: none; } }
/* Dark pages (Luna, Drop) and Bone Dry's dark footer band */
.page-dark .more__title, .more--dark .more__title { color: #ebebeb; }
.page-dark .more__arrow, .more--dark .more__arrow { color: #94a9d3; }
.more--dark .more__arrow:hover svg path, .more--dark .more__arrow:focus-visible svg path { fill: #12111d; }
/* Pages whose main ends with the carousel keep a normal gap to the footer */
.case:has(> .more) { padding-bottom: 0; } /* the carousel's own bottom padding takes over */

/* ---------- Magnifier (Workshop user flow, Bone Dry game logic) ---------- */
/* On hover a 320px lens follows the cursor showing that spot at 3x from a 4x export, so the
   small text in the flow is readable. Mouse/trackpad only; js/main.js moves the lens. */
.magnify { position: relative; }
.magnify__lens { display: none; }
@media (hover: hover) and (pointer: fine) {
  .magnify { cursor: none; }
  .magnify__lens {
    position: absolute; top: 0; left: 0; z-index: 2; display: block;
    width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%;
    background-color: var(--lens-bg, #faf8f7); background-repeat: no-repeat;
    box-shadow: 0 10px 40px rgba(37, 46, 64, 0.18), 0 0 0 1px rgba(37, 46, 64, 0.06);
    opacity: 0; transform: scale(0.9); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .magnify.is-zooming .magnify__lens { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .magnify__lens { transition: none; } }


/* ---------- About (Figma 631:8730). Comments give the Figma y. ---------- */
.about { padding: 149px 0 0; font-family: var(--font-sans); font-variation-settings: "opsz" 14; } /* portrait top 245; button end 1310 → frame end 1453 */
.about__intro { display: flex; align-items: flex-start; gap: 72px; }
.about__portrait {
  flex: none;
  width: 356px;
  margin-left: 4px; /* x 213 */
  overflow: hidden;
  border: 1px solid #202e44;
  border-radius: 19px;
}
.about__portrait img { width: 100%; }
.about__text { flex: 1; min-width: 0; }
.about__label { margin: 0; color: var(--accent); font-family: var(--font-mono); font-size: 13px; line-height: 40px; letter-spacing: 0.02em; } /* 245 */
.about__title { margin: 0; font-size: 56px; font-weight: 600; line-height: 64px; } /* 285 */
.about__bio { max-width: 560px; margin: 18px 0 0; font-size: 16px; line-height: 26px; letter-spacing: -0.01em; }
.about__title + .about__bio { margin-top: 56px; } /* 405 */
.about__bio--wide { max-width: 587px; }
.about__rule { margin: 97px 0 0 8px; border: 0; border-top: 1px solid var(--accent); } /* 876, x 217 */
.about__cta { position: relative; z-index: 1; margin-top: 107px; } /* label 984; above the road footer, whose box reaches up over the Resume button */
.about__cta-title { max-width: 760px; margin: 4px 0 0; font-size: 40px; font-weight: 600; line-height: 48px; } /* 1028; Figma 700 wide, the browser sets DM Sans a bit wider */
.about__email { display: block; width: fit-content; margin-top: 32px; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.02em; } /* 1210 */
.about__email:hover, .about__email:focus-visible { color: var(--accent); }
.about__resume { margin-top: 32px; } /* 1274 */
@media (max-width: 767px) {
  .about { padding: 40px 0 0; }
  .about__intro { flex-direction: column; gap: 40px; }
  .about__portrait { width: min(206px, 72%); margin: 0; } /* left-aligned, like the home drawing */
  .about__title { font-size: 40px; line-height: 46px; }
  .about__title + .about__bio { margin-top: 24px; }
  .about__rule { margin: 64px 0 0; }
  .about__cta { margin-top: 64px; }
  .about__cta-title { font-size: 28px; line-height: 34px; }
  .about__email { margin-top: 28px; font-size: 20px; line-height: 28px; }
  .about__resume { margin-top: 24px; }
}