/* ==========================================================================
   Tokens — mirrored from the Figma "Portfolio" file variables
   ========================================================================== */
:root {
  /* Color */
  --text-default: #111111;
  --text-subtle: #555555;
  --text-white: #ffffff;
  --bg-primary: #222222;
  --bg-white: #ffffff;
  --glass-fill: rgba(255, 255, 255, 0.1);
  --accent-blue: #18a8f5; /* Figma color/accent/blue */
  --accent-pink: #fe6784; /* Figma color/accent/pink */

  /* Blur (Figma Background/Glass = 120 radius → 60px CSS). Home/page values blur the background media. */
  --blur-appbar: 8px;
  --blur-home: 60px;
  --blur-page: 40px;

  /* Type — Major Third scale, Inter */
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --display-1: 58px;  --display-1-lh: 72px;
  --display-2: 48px;  --display-2-lh: 60px;
  --h1: 40px;         --h1-lh: 48px;
  --h2: 32px;         --h2-lh: 40px;
  --h3: 24px;         --h3-lh: 32px;
  --h4: 20px;         --h4-lh: 28px;
  --small: 16px;      --small-lh: 24px;
  --tiny: 14px;       --tiny-lh: 20px;

  /* Layout */
  --appbar-h: 64px; /* updated at runtime from the real appbar height; matches it to avoid a jump on load */
  --pad-x: 80px;
  --content-max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Page transition. The background video plays for --page-video from the click,
     independent of the fades (it can pause before the new page has fully faded in). */
  --page-out: 150ms;
  --page-in: 1900ms;
  --page-video: 1000ms;
  --video-settle: 500ms; /* last part of --page-video, where the video eases to a stop */
  --still-fade: 400ms; /* cross-fade between the paused video and its still frame */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--text-default);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--bg-primary); outline-offset: 3px; }

/* ==========================================================================
   Background loop + glass
   ========================================================================== */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-white); }

/* The video (and the still frame shown while it's paused) is blurred directly with `filter`.
   There is deliberately no backdrop-filter over the video: Chrome glitches when a large
   backdrop blur sits over a <video>. The media layer bleeds past the viewport so the blur's
   soft edges stay off-screen. Blur: none during the intro, 60px on Home, 40px elsewhere. */
:root { --bg-blur: var(--blur-page); --bg-bleed: 120px; }
:root[data-route="home"] { --bg-blur: var(--blur-home); }
:root[data-intro] { --bg-blur: 0px; }
.bg__media {
  position: absolute; inset: calc(-1 * var(--bg-bleed));
  filter: blur(var(--bg-blur));
  transition: filter var(--page-in) var(--ease);
}
.bg__video,
.bg__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Still frame shown while the video is paused (see video.js) */
.bg__still { opacity: 0; transition: opacity var(--still-fade) ease; }
.bg__media.is-still .bg__still { opacity: 1; }
.bg__media.is-video-hidden .bg__video { visibility: hidden; }

/* Glass tint over the blurred media (no backdrop-filter; see above) */
/* Glass tint over the blurred media (no backdrop-filter; see above) */
.bg__glass {
  position: absolute;
  inset: var(--appbar-h) 0 0 0;
  background: var(--glass-fill);
}
:root[data-intro] .bg__glass { opacity: 0; }

/* ==========================================================================
   Appbar + Tab
   ========================================================================== */
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 24px var(--pad-x) 8px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-appbar));
  backdrop-filter: blur(var(--blur-appbar));
  transition: opacity 0.9s var(--ease);
}
.appbar__logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: var(--h4); line-height: var(--h4-lh); /* Major Third/H4 */
  color: var(--text-default); white-space: nowrap;
}
/* Logo mark: 32×32 frame with the 20×20 "LT" graphic centred (Figma: Logo) */
.appbar__mark { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; }
.appbar__mark img { width: 20px; height: 20px; display: block; }
/* The name (not the icon) sets the logo's baseline, so the appbar's baseline alignment
   lines the tab labels up with "LINH TRAN". The 2px margin centres the 28px line on the 32px mark. */
.appbar__name { align-self: baseline; margin-top: 2px; }

.tabs { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* Default: Major Third/Small/Medium. Active: Major Third/Small/Bold (5% tracking). */
.tab {
  display: block; padding: 0 8px;
  background: var(--bg-white); color: var(--text-subtle);
  font-weight: 500; font-size: var(--small); line-height: var(--small-lh);
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.tab:hover { color: var(--text-default); }
.tab[aria-current="page"] {
  background: var(--bg-primary); color: var(--text-white);
  font-weight: 700; letter-spacing: 0.05em;
}

/* Appbar tabs: the dark active background is one sliding element (.tabs__indicator, added
   by main.js). Layering inside the nav: white tab fills (z -1) → indicator → tab labels. */
.appbar nav { position: relative; isolation: isolate; }
.tabs__indicator {
  position: absolute; top: 0; left: 0;
  background: var(--bg-primary);
  pointer-events: none;
  transition: transform 0.5s var(--ease), width 0.5s var(--ease), opacity 0.3s;
}
.tabs__indicator.is-instant { transition: none; }
.tabs .tab { position: relative; transition: color 0.4s var(--ease); }
.tabs .tab,
.tabs .tab[aria-current="page"] { background: transparent; }
.tabs .tab::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-white);
}

/* ==========================================================================
   Page outlet
   ========================================================================== */
.page {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px var(--pad-x);
  outline: none;
  animation: page-in var(--page-in) var(--ease);
}
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
.page.is-leaving {
  opacity: 0; transform: translateY(-12px);
  transition: opacity var(--page-out) ease-in, transform var(--page-out) ease-in;
}

.stack {
  width: 100%; max-width: var(--content-max);
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  text-align: center;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Subtitle — Major Third/H3 Loose (Medium 24/32, 100% tracking) */
.subtitle {
  margin: 0; padding: 0 8px;
  font-weight: 500; font-size: var(--h3); line-height: var(--h3-lh);
  letter-spacing: 1em; margin-right: -1em; /* balance trailing tracking */
  text-transform: uppercase; color: var(--text-subtle);
}

/* Statement — large light copy with bold emphasis */
.statement {
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px, 3.36vw, var(--display-1));
  line-height: 1.24;
  max-width: 18em;
  color: var(--text-default);
}
.statement strong { font-weight: 700; }

/* Bio — Display 2 light with oversized numerals */
.bio {
  margin: 0;
  font-weight: 300;
  font-size: clamp(24px, 2.78vw, var(--display-2));
  line-height: 1.25;
  max-width: 22em;
  color: var(--text-default);
}
.bio span { display: block; }
.bio strong { font-weight: 600; }

/* Highlights — Major Third/H3 links separated by bullets */
.highlights {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  list-style: none; margin: 0; padding: 24px;
}
.highlights li { display: flex; align-items: center; }
.highlights li + li::before {
  content: "•"; padding: 0 26px;
  font-weight: 600; font-size: var(--h3); color: #000;
}
.highlight {
  font-weight: 700; font-size: var(--h3); line-height: var(--h3-lh);
  text-transform: uppercase; color: var(--text-default); white-space: nowrap;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.18em; text-decoration-skip-ink: none;
  transition: text-decoration-color 0.2s;
}
.highlight:hover { text-decoration-color: currentColor; }

.lede {
  margin: 0; font-size: var(--h4); line-height: var(--h4-lh); color: var(--text-subtle);
}

/* ==========================================================================
   Case study
   ========================================================================== */
.case {
  width: 100%; max-width: var(--content-max);
  display: flex; flex-direction: column; gap: 120px;
}
/* Coming soon (Figma: My Work - Screen 3): title + note right under the Top Nav */
.case.case--soon { gap: 0; } /* beats the phone-size .case gap */
.page:has(> .case--soon) { justify-content: flex-start; }
.case--soon .pager--top { margin-bottom: 0 !important; }
.soon {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  padding: 80px 0; text-align: center;
}
.soon__text {
  margin: 0; font-weight: 300; color: var(--text-default);
  font-size: clamp(32px, 2.78vw, var(--display-2)); line-height: 1.25; /* Display 2: 48 / 60 */
}
@media (max-width: 600px) { .soon { gap: 40px; padding: 48px 0; } }

.case__hero {
  min-height: calc(100vh - var(--appbar-h) - 160px);
  min-height: calc(100dvh - var(--appbar-h) - 160px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px;
  text-align: center;
}

.meta {
  width: 100%; max-width: 960px; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px;
  padding-top: 32px; border-top: 1px solid rgba(17, 17, 17, 0.12);
  text-align: left;
}
.meta dt {
  font-size: var(--tiny); line-height: var(--tiny-lh); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-subtle);
}
.meta dd { margin: 4px 0 0; font-size: var(--small); line-height: var(--small-lh); font-weight: 700; }

.case__section {
  display: grid; grid-template-columns: 280px 1fr; gap: 48px;
  text-align: left;
}
.case__label {
  margin: 0; padding-top: 6px;
  font-size: var(--small); line-height: var(--small-lh); font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-subtle);
}
.case__body { max-width: 760px; }
.case__heading {
  margin: 0 0 24px;
  font-size: var(--h2); line-height: var(--h2-lh); font-weight: 600; color: var(--text-default);
}
.case__body p {
  margin: 0 0 16px;
  font-size: var(--h4); line-height: 32px; font-weight: 300; color: var(--text-default);
}

.figure { margin: 0; }
.figure img,
.figure__placeholder {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
}
.figure__placeholder {
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.35);
  border: 1px dashed rgba(17, 17, 17, 0.25);
  font-size: var(--small); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-subtle);
}
.figure figcaption {
  margin-top: 12px; font-size: var(--tiny); line-height: var(--tiny-lh); color: var(--text-subtle);
}

.outcomes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px;
  padding: 48px 0; border-top: 1px solid rgba(17, 17, 17, 0.12); border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  text-align: center;
}
.outcomes p { margin: 0; }
.outcomes__value {
  font-size: clamp(36px, 3.6vw, var(--display-1)); line-height: 1.24; font-weight: 300; letter-spacing: -0.02em;
}
.outcomes__label { margin-top: 8px !important; font-size: var(--small); line-height: var(--small-lh); color: var(--text-subtle); }

/* ---------- Story blocks (projects with a `story`) ---------- */
:root {
  --line: rgba(17, 17, 17, 0.12);
  --status-moving: #3f8f6b;
  --status-learning: #c98a2b;
  --status-blocked: #c4534a;
}
.case__block { display: flex; flex-direction: column; gap: 48px; }
.case__block .case__body p:last-child { margin-bottom: 0; }
.case__source,
.case__note {
  margin: -24px 0 0; font-size: var(--tiny); line-height: var(--tiny-lh); color: var(--text-subtle);
}
.case__note { margin-top: -16px; font-size: var(--small); line-height: var(--small-lh); }
.case__note strong { color: var(--text-default); }

.case__list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.case__list li {
  padding: 20px 0; border-bottom: 1px solid var(--line);
  font-size: var(--h4); line-height: 32px; font-weight: 300;
}
.case__list strong { font-weight: 600; }

.case__statement {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  text-align: center; padding: 40px 0;
}
.case__statement .lede { max-width: 40em; }

/* From → To */
.shifts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.shifts li { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--line); }
.shifts li:nth-child(even) { padding: 32px 0 32px 32px; border-left: 1px solid var(--line); }
.shifts p { margin: 0; }
.shifts__pair {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  font-size: var(--h3); line-height: var(--h3-lh); text-transform: uppercase;
}
.shifts__from { font-weight: 500; color: var(--text-subtle); text-decoration: line-through; text-decoration-thickness: 1px; }
.shifts__arrow { color: var(--text-subtle); }
.shifts__to { font-weight: 700; color: var(--text-default); }
.shifts__detail { margin-top: 12px !important; font-size: var(--small); line-height: 26px; font-weight: 300; }

/* Loop of capabilities */
.loop {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  counter-reset: loop;
}
.loop li {
  position: relative; padding: 24px 16px;
  background: rgba(255, 255, 255, 0.45); border: 1px solid var(--line);
}
.loop li:not(:last-child)::after { /* arrow to the next stage */
  content: "→"; position: absolute; right: -14px; top: 22px; z-index: 1;
  font-size: var(--small); color: var(--text-subtle);
}
.loop p, .loop h4 { margin: 0; }
.loop__stage {
  font-size: var(--tiny); line-height: var(--tiny-lh); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-subtle);
}
.loop__name { margin-top: 8px !important; font-size: var(--small); line-height: var(--small-lh); font-weight: 700; text-transform: uppercase; }
.loop__body { margin-top: 12px !important; font-size: var(--tiny); line-height: 22px; font-weight: 400; }

/* Numbered steps (experiment ladder) */
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.steps li {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 24px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.steps__num { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 300; color: var(--text-subtle); }
.steps__text h4 { margin: 0; font-size: var(--small); line-height: var(--small-lh); font-weight: 700; text-transform: uppercase; }
.steps__text p { margin: 6px 0 0; font-size: var(--small); line-height: 26px; font-weight: 300; }
.steps__meta {
  font-size: var(--tiny); line-height: var(--tiny-lh); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-subtle); white-space: nowrap;
}

/* Outcome Canvas schematic */
.ocanvas {
  margin: 0; padding: 48px 40px 32px;
  background: rgba(255, 255, 255, 0.35); border: 1px solid var(--line);
  --gap: 24px; --drop: 28px;
}
.onode {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 14px; text-align: center;
  background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line);
  font-size: var(--tiny); line-height: var(--tiny-lh); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.onode small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-subtle); }
.onode--outcome { background: var(--bg-primary); color: var(--text-white); border-color: var(--bg-primary); font-size: var(--small); }
.onode--outcome small { color: rgba(255, 255, 255, 0.7); }
.onode--bet { border-left-width: 4px; }
.onode--bet.is-moving { border-left-color: var(--status-moving); }
.onode--bet.is-learning { border-left-color: var(--status-learning); }
.onode--bet.is-blocked { border-left-color: var(--status-blocked); }
.onode--work { border-style: dashed; font-weight: 500; background: transparent; }

.ocanvas__outcome { display: flex; justify-content: center; position: relative; padding-bottom: var(--drop); }
.ocanvas__outcome::after { /* stem down to the branch line */
  content: ""; position: absolute; left: 50%; bottom: 0; height: var(--drop); border-left: 1px solid rgba(17, 17, 17, 0.3);
}
.ocanvas__row {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  padding-top: var(--drop);
}
.ocanvas__row::before { /* horizontal branch line between the outer column centres */
  content: ""; position: absolute; top: 0;
  left: calc((100% - 2 * var(--gap)) / 6); right: calc((100% - 2 * var(--gap)) / 6);
  border-top: 1px solid rgba(17, 17, 17, 0.3);
}
.ocanvas__col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ocanvas__col::before { /* drop from the branch line into each opportunity */
  content: ""; position: absolute; left: 50%; top: calc(-1 * var(--drop)); height: var(--drop); border-left: 1px solid rgba(17, 17, 17, 0.3);
}
.ocanvas__col .onode { width: min(100%, 200px); }

.ocanvas__loose {
  margin-top: 40px; padding: 20px; border: 1px dashed rgba(17, 17, 17, 0.35);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.ocanvas__loose p { margin: 0; font-size: var(--tiny); line-height: var(--tiny-lh); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-subtle); }
.ocanvas__loose div { display: flex; flex-wrap: wrap; gap: 8px; }
.ocanvas__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 24px;
  font-size: var(--tiny); line-height: var(--tiny-lh); color: var(--text-subtle);
}
.ocanvas__legend span::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px;
}
.ocanvas__legend .is-moving::before { background: var(--status-moving); }
.ocanvas__legend .is-learning::before { background: var(--status-learning); }
.ocanvas__legend .is-blocked::before { background: var(--status-blocked); }

@media (max-width: 900px) {
  .loop { grid-template-columns: repeat(2, 1fr); }
  .loop li:last-child { grid-column: 1 / -1; }
  .loop li:not(:last-child)::after { display: none; }
  .shifts { grid-template-columns: 1fr; }
  .shifts li, .shifts li:nth-child(even) { padding: 24px 0; border-left: 0; }
  .shifts__pair { font-size: var(--h4); line-height: var(--h4-lh); }
  .case__list li { font-size: var(--small); line-height: 28px; }
  .steps li { grid-template-columns: 48px 1fr; }
  .steps__meta { grid-column: 2; }
  .ocanvas { padding: 32px 16px 24px; }
}
@media (max-width: 600px) {
  .loop { grid-template-columns: 1fr; }
  .ocanvas__row { grid-template-columns: 1fr; gap: 24px; }
  .ocanvas__row::before, .ocanvas__col::before { display: none; }
  .ocanvas__row { padding-top: 0; }
  .ocanvas__outcome::after { display: none; }
  .ocanvas__outcome { padding-bottom: 24px; }
}

/* ==========================================================================
   Split case study (Figma: My Work - Image Gen - Screen 8)
   ========================================================================== */
.page:has(> .split) { padding: 0; align-items: stretch; justify-content: flex-start; }
.split { flex: 1; display: flex; flex-direction: column; width: 100%; }
.split .pager { max-width: none; padding: 24px var(--pad-x); margin: 0; } /* full-width Top Nav */
.split__panel {
  flex: 1; display: flex; align-items: stretch; min-height: 560px;
  background: var(--glass-fill);
}
.split__text {
  flex: 0 0 min(760px, 46%);
  display: flex; flex-direction: column; gap: 32px;
  padding: 64px var(--pad-x);
}
.split__intro { display: flex; flex-direction: column; gap: 48px; }
.split__intro .subtitle { align-self: flex-start; white-space: nowrap; margin-right: 0; }
@media (min-width: 901px) {
  /* Keep the widely tracked heading on one line in the narrower column: 24px / 100% tracking
     at the 1728px design width, tightening as the window narrows. */
  .split__intro .subtitle {
    font-size: clamp(16px, 1.39vw, var(--h3));
    letter-spacing: clamp(4px, calc(2.2vw - 14px), 24px);
  }
}
.split__statement {
  max-width: none; text-align: left;
  /* Major Third/Display 2 at full size: 48/60. 2.78vw = 48px at the 1728px design width. */
  font-size: clamp(28px, 2.78vw, var(--display-2)); line-height: 1.25;
}

/* "Try it yourself" prompt */
.tryit { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tryit__label {
  margin-bottom: 8px; /* 24px to the input with the 16px gap */
  font-weight: 700; font-size: var(--small); line-height: var(--small-lh); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-default);
}
.tryit__input {
  width: 100%; height: 120px; resize: none;
  padding: 8px 16px; border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
  font: 400 var(--small) / var(--small-lh) var(--font); color: var(--text-default);
}
.tryit__input:focus-visible { outline: 2px solid var(--bg-primary); outline-offset: 2px; }
.tryit__note { margin: 0; font-size: var(--tiny); line-height: var(--tiny-lh); color: var(--text-subtle); }

/* Use curated prompts (Figma: Screen 9) */
.tryit__curated { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; /* 24px to the input */ }
.tryit__sublabel {
  margin: 0; font-weight: 500; font-size: var(--tiny); line-height: var(--tiny-lh); /* Major Third/Tiny, Medium */
  color: var(--text-default);
}
.tryit__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.tryit__thumb {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 2px; overflow: hidden; cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color 0.2s, transform 0.2s var(--ease), opacity 0.2s;
}
.tryit__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tryit__thumb:hover { transform: translateY(-2px); }
.tryit__thumb[aria-pressed="true"] { outline-color: var(--bg-primary); }
.tryit__thumb:focus-visible { outline-color: var(--bg-primary); }
.tryit__note.is-error { color: #b42318; }
.tryit__note a { color: var(--text-default); text-decoration: underline; text-underline-offset: 0.2em; }
.tryit__note.is-complete { display: inline-flex; align-items: center; gap: 4px; }
.tryit__note.is-complete[hidden] { display: none; }
.tryit__note.is-complete img { display: block; width: 16px; height: 16px; }
.tryit__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tryit__actions [hidden] { display: none; }
.tryit__check:empty { display: none; } /* the Turnstile check only takes space if it needs a click */
.button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Loading: spinner + "Creating" label */
.button.is-loading { gap: 8px; opacity: 1; cursor: progress; }
.button.is-loading::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: var(--text-white);
  animation: button-spin 0.8s linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .button.is-loading::before { animation-duration: 2.4s !important; } /* slow spin, still shows progress */
}
.tryit__thumb:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }

/* Limit card (Figma: Modal) — replaces the form once today's images are used */
.limit-card {
  position: relative; max-width: 424px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding: 64px; border-radius: 32px;
  background: #343a3d; color: var(--text-white);
  box-shadow: 0 4px 4px -1px rgba(12, 12, 13, 0.1), 0 4px 4px -1px rgba(12, 12, 13, 0.05);
  animation: limit-in 0.5s var(--ease);
}
.limit-card[hidden],
.tryit[hidden] { display: none; } /* their display: flex would otherwise override [hidden] */
@keyframes limit-in { from { opacity: 0; transform: translateY(8px); } }
.limit-card__title {
  margin: 0; outline: none;
  font-weight: 700; font-size: var(--h3); line-height: var(--h3-lh); /* Major Third/H3 */
}
.limit-card .button { padding: 8px 24px; }
.limit-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.limit-card__link {
  color: var(--text-white); font: 500 var(--small) / var(--small-lh) var(--font);
  text-decoration: underline; text-underline-offset: 0.2em; opacity: 0.85;
}
.limit-card__link:hover { opacity: 1; }
.limit-card__close {
  position: absolute; top: 32px; right: 32px;
  width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0.85; transition: opacity 0.2s;
}
.limit-card__close:hover { opacity: 1; }
.limit-card__close img { display: block; width: 24px; height: 24px; }
.limit-card__close:focus-visible, .limit-card .button:focus-visible { outline-color: var(--text-white); }
/* Four-leaf mark: 16px leaves; corner radii as in the Figma Illustration (one square corner each) */
.limit-card__mark { position: relative; display: block; width: 32px; height: 32px; }
.limit-card__mark i { position: absolute; width: 16px; height: 16px; }
.limit-card__mark i:nth-child(1) { left: 0; top: 0; background: #a3cade; border-radius: 0 50px 50px 50px; }
.limit-card__mark i:nth-child(2) { left: 16px; top: 0; background: var(--accent-pink); border-radius: 50px 50px 50px 0; }
.limit-card__mark i:nth-child(3) { left: 0; top: 16px; background: #ed9ebd; border-radius: 50px 0 50px 50px; }
.limit-card__mark i:nth-child(4) { left: 16px; top: 16px; background: var(--accent-blue); border-radius: 50px 50px 0 50px; }

/* Button (Figma: Button) */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 24px; border: 0; border-radius: 2px; cursor: pointer; /* Figma Button: 8 × 24 */
  background: var(--bg-primary); color: var(--text-white);
  font: 500 var(--small) / var(--small-lh) var(--font);
  transition: background-color 0.2s;
}
.button:hover { background: #000; }
/* Secondary button: same size as .button, outlined */
.button--secondary {
  background: transparent; color: var(--text-default);
  box-shadow: inset 0 0 0 1px var(--bg-primary);
}
.button--secondary:hover { background: rgba(255, 255, 255, 0.5); }

/* Gallery: images stack in one fixed frame and rotate (project.js). The active image fades
   in while settling from a slight zoom; the outgoing one fades out. */
.split__media { flex: 1; min-width: 0; margin: 0; position: relative; overflow: hidden; }
.split__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.06);
  transition: opacity var(--gallery-fade) ease, transform var(--gallery-zoom) cubic-bezier(0.2, 0.6, 0.2, 1);
}
.split__media img.is-active { opacity: 1; transform: scale(1); }
:root { --gallery-fade: 1.4s; --gallery-zoom: 6s; }

@media (max-width: 900px) {
  .limit-card { padding: 48px 32px 40px; border-radius: 24px; }
  .limit-card__close { top: 20px; right: 20px; }
  .split__panel { flex-direction: column; min-height: 0; }
  .split__text { flex: none; padding: 40px var(--pad-x); }
  .split__intro { gap: 32px; }
  .split__media { aspect-ratio: 1 / 1; }
  .split .pager { padding: 16px var(--pad-x); }
}

/* Project pager — previous / next (Figma: Top Nav, 1040 wide, 24px padding) */
.pager {
  width: 100%; max-width: 1040px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px;
}
.pager--top { margin-bottom: -80px; } /* sit closer to the hero than the regular section gap */
.pager--bottom { margin-bottom: 40px; }
/* Story case studies: same full-width Top Nav as the split layout — edge to edge, links on the
   page gutter, top bar right under the appbar (pulled up over the page's top padding). The
   margins add back that padding so the hero stays where it was. */
.case .pager {
  width: 100vw; max-width: none; margin-inline: calc(50% - 50vw);
  padding: 24px var(--pad-x);
}
.case .pager--top { margin-top: -80px; margin-bottom: 0; }
.pager__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 400; font-size: var(--small); line-height: var(--small-lh); /* Major Third/Small/Regular */
  text-transform: uppercase; color: var(--text-default);
}
.pager__link--next { margin-left: auto; } /* stays right-aligned on the first project */
.pager__arrow { width: 24px; height: 24px; flex-shrink: 0; display: block; transition: transform 0.25s var(--ease); }
.pager__name {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.2em; text-decoration-skip-ink: none;
  transition: text-decoration-color 0.2s;
}
.pager__link:hover .pager__name { text-decoration-color: currentColor; }
.pager__link--prev:hover .pager__arrow { transform: translateX(-3px); }
.pager__link--next:hover .pager__arrow { transform: translateX(3px); }

/* Footer */
.footer {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
  padding: 16px 32px;
  font-size: var(--tiny); line-height: var(--tiny-lh); color: var(--text-subtle);
  transition: opacity 0.9s var(--ease);
}
.footer__item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.footer__item img { width: 16px; height: 16px; display: block; }
.footer__social { display: inline-flex; gap: 12px; }
.footer__social:empty { display: none; }
.footer__link {
  color: var(--text-subtle); text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.2em; transition: color 0.2s, text-decoration-color 0.2s;
}
.footer__link:hover { color: var(--text-default); text-decoration-color: currentColor; }

/* ==========================================================================
   Home intro — Screen 1 (wide name) → Screen 2 (tight name) → Screen 3 (mission)
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
:root[data-intro] .intro { opacity: 1; visibility: visible; }
.intro__skip {
  position: fixed; right: var(--pad-x); bottom: 32px;
  border: 0; cursor: pointer; pointer-events: auto;
  font-family: inherit;
}
:root[data-intro="out"] .intro__skip { pointer-events: none; }
/* Tracking is interpolated from Screen 1 (150%) to Screen 2 (25%) as --intro-p goes 0 → 1;
   home.js drives --intro-p from the video's playback position. */
.intro__name {
  --track-wide: 1.5em;
  --track-tight: 0.25em;
  --track: calc(var(--track-wide) + (var(--track-tight) - var(--track-wide)) * var(--intro-p, 0));
  margin: 0;
  /* Figma Home Screens 1–2: Inter Bold 48/64, Text/Default. 2.78vw = 48px on the 1728px frame. */
  font-weight: 700; font-size: clamp(18px, 2.78vw, var(--display-2)); line-height: 1.333;
  color: var(--text-default); white-space: nowrap;
  letter-spacing: var(--track); padding-left: var(--track); /* padding balances trailing tracking */
}
.intro__name span { display: inline-block; opacity: 0; animation: letter-in 1.2s var(--ease) forwards; }
@keyframes letter-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

:root[data-intro] .footer,
:root[data-intro] .page .stack { opacity: 0; pointer-events: none; }
:root[data-intro] .page { animation: none; } /* a transform here would trap the fixed intro */

/* Intro → Home handoff, timed like any page change: the name fades out over --page-out
   (data-intro="out"), then Home fades in over --page-in as the video reverses. */
.intro { transition: opacity var(--page-out) ease-in, visibility var(--page-out); }
:root[data-intro="out"] .intro { opacity: 0; }
.bg__glass,
.appbar,
.footer,
.page .stack { transition: opacity var(--page-in) var(--ease); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  :root { --pad-x: 32px; }
  .stack { gap: 48px; }
  .subtitle { font-size: var(--small); letter-spacing: 0.8em; margin-right: -0.8em; }
  .highlight { font-size: var(--h4); }
  .highlights li + li::before { padding: 0 16px; font-size: var(--h4); }
  .case { gap: 80px; }
  .case__section { grid-template-columns: 1fr; gap: 16px; }
  .case__heading { font-size: var(--h3); line-height: var(--h3-lh); }
  .case__body p { font-size: var(--small); line-height: 28px; }
  .pager { padding: 16px 0; gap: 16px; }
  .pager--top { margin-bottom: -40px; }
  .case .pager { padding: 16px var(--pad-x); }
  .case .pager--top { margin-bottom: 40px; }
}

@media (max-width: 600px) {
  :root { --pad-x: 16px; }
  /* Keep the design's appbar type sizes; wrap the tabs under the name instead of shrinking */
  .appbar { padding: 16px var(--pad-x) 8px; flex-wrap: wrap; row-gap: 8px; }
  .page { padding: 48px var(--pad-x); }
  .case .pager--top { margin-top: -48px; margin-bottom: 8px; }
  .stack { gap: 40px; }
  .highlights { flex-direction: column; gap: 16px; padding: 0; }
  .highlights li + li::before { display: none; }
  .footer { justify-content: center; padding: 16px; }
  .intro__name { --track-wide: 0.8em; }
}

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