/* ==========================================================================
   Yeseul Namgung — portfolio
   Token names mirror the Figma variable code syntax 1:1 (var(--color-ink) etc.)
   so the design system and the site stay legible against each other.

   One deliberate difference: Figma stores spacing/type as the values resolved
   at 1440x1024, because it cannot express clamp(). Here the original fluid
   clamp() expressions are restored, so the site scales properly.
   ========================================================================== */

:root {
  /* colour ------------------------------------------------------------- */
  --color-bg:                #f8f8f6;
  --color-surface:           #ffffff;
  --color-ink:               #14140f;
  --color-body:              #45453e;
  --color-muted:             #5e5e54;
  --color-subtle:            #6c6c62;
  --color-border:            #e2e2dc;
  --color-border-strong:     #d9d9d1;
  --color-track:             #ecece4;
  --color-bar-baseline:      #c9c9c0;
  --color-hatch-a:           #e8e8e0;
  --color-hatch-b:           #f3f3ed;
  --color-surface-warm:      #efefe9;

  /* on dark surfaces */
  --color-dark-divider:      #2e2e28;
  --color-on-dark-muted:     #97978d;
  --color-on-dark-dim:       #7E7E78;
  --color-on-dark-body:      #b4b4aa;
  --color-on-dark-body-2:    #a3a399;

  /* per-project accents (oklch in source, resolved for older browsers) */
  --color-accent:            #7A4FB0;  /* Ritual Finder  */
  --color-accent-home:       #763EBD;  /* oklch(.5 .19 300)   */
  --color-accent-retheme:    #735FE9;  /* oklch(.58 .2 285)   */
  --color-accent-retheme-2:  #9087F6;  /* oklch(.68 .16 285)  */
  --color-accent-furcy:      #D92C11;
  --accent:                  var(--color-accent);

  /* spacing — fluid ---------------------------------------------------- */
  --space-gutter:            4vw;
  --space-section-y:         clamp(44px, 9vh, 108px);
  --space-col-gap:           clamp(32px, 5vw, 84px);
  --space-row-gap:           28px;
  --space-stat-gap:          36px;

  /* component-level geometry (fixed by design) */
  --space-btn-y:             18px;
  --space-btn-x:             28px;
  --space-btn-y-sm:          16px;
  --space-btn-x-sm:          26px;
  --space-pill-y:            9px;
  --space-pill-x:            16px;
  --space-icon-gap:          12px;
  --space-tag-y:             5px;
  --space-tag-x:             13px;
  --space-label-gap:         10px;
  --space-stat-inner-gap:    16px;
  --space-stat-gap-lg:       18px;
  --space-section-head-gap:  14px;
  --space-row-y:             15px;
  --space-def-row-gap:       6px;
  --space-num-col:           34px;
  --space-num-nudge:         4px;
  --space-step-gap:          16px;
  --space-note-pad:          clamp(14px, 1.6vw, 22px);
  --space-figure-gap:        10px;
  --space-card-top:          22px;
  --space-card-gap:          20px;
  --space-card-head-gap:     16px;
  --space-header-y:          16px;
  --space-nav-gap:           26px;
  --radius-pill:             999px;

  /* motion ------------------------------------------------------------- */
  --ease-out:                cubic-bezier(.22, .68, .16, 1);
  --dur-fast:                180ms;
  --dur-mid:                 420ms;
  --dur-slow:                680ms;
  --reveal-rise:             14px;
  --stagger:                 65ms;
}

/* per-page accent -------------------------------------------------------- */
.theme-home    { --accent: var(--color-accent-home); }
.theme-ritual  { --accent: var(--color-accent); }
.theme-retheme { --accent: var(--color-accent-retheme); }
.theme-furcy   { --accent: var(--color-accent-furcy); }

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent); }

img { display: block; max-width: 100%; height: auto; }
p  { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; background: var(--color-ink); color: var(--color-bg);
  padding: 12px 20px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--color-bg); }

/* ==========================================================================
   Typography scale — fluid, as authored in source
   ========================================================================== */

.t-hero        { font-size: clamp(36px, 7.4vw, 120px); line-height: .94; font-weight: 600; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.t-hero-rf     { font-size: clamp(34px, 6.6vw, 108px); line-height: .94; font-weight: 600; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.t-hero-furcy  { font-size: clamp(36px, 7vw, 116px);   line-height: .94; font-weight: 600; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.t-home-h1     { font-size: clamp(26px, 3.9vw, 58px);  line-height: 1;   font-weight: 600; letter-spacing: -.03em;  text-transform: uppercase; }
.t-statement   { font-size: clamp(22px, 2.7vw, 42px);  line-height: 1.14; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
.t-project     { font-size: clamp(30px, 4.6vw, 68px);  line-height: 1.02; font-weight: 500; letter-spacing: -.03em; max-width: 24ch; text-wrap: balance; }
.t-section-h2  { font-size: clamp(24px, 3vw, 46px);    line-height: 1.08; font-weight: 500; letter-spacing: -.03em; max-width: 20ch; text-wrap: balance; }
.t-case-h2     { font-size: clamp(24px, 2.9vw, 44px);  line-height: 1.08; font-weight: 500; letter-spacing: -.03em; max-width: 14ch; text-wrap: balance; }
.t-stat        { font-size: clamp(34px, 4.4vw, 68px);  line-height: .98; font-weight: 600; letter-spacing: -.04em; }
.t-stat-lg     { font-size: clamp(38px, 5.4vw, 88px);  line-height: .94; font-weight: 600; letter-spacing: -.045em; }
.t-window-stat { font-size: clamp(40px, 4.6vw, 68px);  line-height: .95; font-weight: 600; letter-spacing: -.045em; }
.t-signal      { font-size: clamp(26px, 2.6vw, 38px);  line-height: 1;   font-weight: 600; letter-spacing: -.035em; }
.t-challenge   { font-size: clamp(28px, 4.4vw, 68px);  line-height: 1.04; font-weight: 500; letter-spacing: -.04em; max-width: 26ch; text-wrap: balance; }
.t-hmw         { font-size: clamp(26px, 4vw, 60px);    line-height: 1.08; font-weight: 500; letter-spacing: -.035em; max-width: 30ch; text-wrap: balance; }
.t-beyond-h2   { font-size: clamp(24px, 3.4vw, 52px);  line-height: 1.06; font-weight: 500; letter-spacing: -.032em; max-width: 24ch; text-wrap: balance; }
.t-insight-h3  { font-size: clamp(20px, 2.2vw, 32px);  line-height: 1.14; font-weight: 500; letter-spacing: -.025em; max-width: 22ch; text-wrap: balance; }
.t-quote       { font-size: clamp(18px, 2.2vw, 32px);  line-height: 1.28; font-weight: 500; letter-spacing: -.025em; max-width: 44ch; text-wrap: pretty; }
.t-results-h3  { font-size: clamp(20px, 2.1vw, 30px);  line-height: 1.14; font-weight: 600; letter-spacing: -.025em; max-width: 22ch; text-wrap: balance; }
.t-work-card   { font-size: clamp(22px, 2.6vw, 40px);  line-height: 1.02; font-weight: 600; letter-spacing: -.035em; text-transform: uppercase; }
.t-email       { font-size: clamp(22px, 5vw, 76px);    line-height: 1.05; font-weight: 500; letter-spacing: -.035em; overflow-wrap: anywhere; }
.t-question    { font-size: clamp(22px, 2.6vw, 38px);  line-height: 1.12; font-weight: 500; letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
.t-result-h3   { font-size: clamp(24px, 3.2vw, 44px);  line-height: 1.06; font-weight: 600; letter-spacing: -.035em; }

.t-lede        { font-size: clamp(17px, 1.9vw, 27px); line-height: 1.38; color: var(--color-body); text-wrap: pretty; }
.t-lede-sm     { font-size: clamp(17px, 1.8vw, 25px); line-height: 1.4;  color: var(--color-body); text-wrap: pretty; }
.t-body        { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.62; color: var(--color-body); max-width: 52ch; text-wrap: pretty; }
.t-body-wide   { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.64; color: var(--color-body); max-width: 68ch; text-wrap: pretty; }
.t-body-15     { font-size: 15px; line-height: 1.6;  color: var(--color-body); text-wrap: pretty; }
.t-body-16     { font-size: 16px; line-height: 1.6;  color: var(--color-body); text-wrap: pretty; }
.t-body-14     { font-size: 14px; line-height: 1.6;  color: var(--color-body); text-wrap: pretty; }

.t-eyebrow     { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.t-meta-label  { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-subtle); }
.t-meta-value  { font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.t-num         { font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--color-subtle); }
.t-num-strong  { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--color-subtle); }
.t-stat-cap    { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); line-height: 1.45; }
.t-caption     { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-subtle); line-height: 1.5; }
.t-row-title   { font-size: 14px; font-weight: 600; line-height: 1.4; }
.t-group-title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.t-note        { font-size: 13px; line-height: 1.6; color: var(--color-subtle); }
.t-methodology { font-size: 12px; line-height: 1.6; color: var(--color-subtle); max-width: 76ch; text-wrap: pretty; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.section {
  padding: var(--space-section-y) var(--space-gutter);
}
.section--tight   { padding-block: clamp(32px, 6vh, 64px); }
.section--loose   { padding-block: clamp(48px, 10vh, 120px); }
.section--stats   { padding-block: clamp(40px, 8vh, 96px); }
.section--closing { padding-block: clamp(56px, 12vh, 140px); }

.rule-top    { border-top: 1px solid var(--color-border); }
.rule-bottom { border-bottom: 1px solid var(--color-border); }
.rule-top-ink    { border-top: 1px solid var(--color-ink); }
.rule-bottom-ink { border-bottom: 1px solid var(--color-ink); }

.on-dark {
  background: var(--color-ink);
  color: var(--color-bg);
}
.on-dark .t-num-strong { color: var(--color-on-dark-dim); }
.on-dark .t-body-wide  { color: var(--color-on-dark-body); }
.on-dark .t-note       { color: var(--color-on-dark-muted); }
.on-dark .t-stat-cap   { color: var(--color-on-dark-muted); }
.on-dark .t-case-h2    { color: var(--color-bg); }

.on-warm { background: var(--color-surface-warm); }

/* two-track case-study grid: title column + content spanning two tracks */
.grid-case {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.grid-case > .span-2 { grid-column: span 2; min-width: 0; }

.grid-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-col-gap);
  align-items: start;
}
.grid-split > * { min-width: 0; }

.grid-auto      { display: grid; gap: var(--space-row-gap); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-auto--wide{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-stat-gap); }
.grid-auto--meta{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid-half      { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; flex-wrap: wrap; }
.between { justify-content: space-between; }
.baseline{ align-items: baseline; }
.end     { align-items: flex-end; }

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

/* header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px 20px;
  padding: var(--space-header-y) var(--space-gutter);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: rgba(248,248,246,.88); }
}
.site-header.is-scrolled { border-bottom-color: var(--color-border-strong); }

.site-logo {
  font-size: 19px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 14px var(--space-nav-gap); }
.nav-link {
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-muted);
  position: relative;
}
.nav-link:hover { color: var(--color-ink); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }

/* hero ------------------------------------------------------------------ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(56px, 13vh, 160px) var(--space-gutter) clamp(48px, 9vh, 96px);
}
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 32px;
  margin-top: clamp(32px, 5vh, 56px);
}
.hero__eyebrow { margin-bottom: clamp(32px, 6vh, 68px); }
.hero__copy { text-align: right; max-width: 40ch; }

/* buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-icon-gap);
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer;
  border: 0; background: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn--solid {
  background: var(--color-ink); color: var(--color-bg);
  padding: var(--space-btn-y) var(--space-btn-x);
}
.btn--solid:hover { background: var(--accent); color: var(--color-bg); }
.btn--solid:active { transform: translateY(1px); }

.btn--compact {
  background: var(--color-ink); color: var(--color-bg);
  padding: var(--space-btn-y-sm) var(--space-btn-x-sm);
  font-size: 12px;
}
.btn--compact:hover { background: var(--accent); }

.btn--outline {
  border: 1px solid var(--color-ink);
  padding: var(--space-btn-y-sm) var(--space-btn-x-sm);
  font-size: 12px;
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

.btn--pill {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-pill-y) var(--space-pill-x);
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  color: var(--color-body); background: transparent;
}
.btn--pill:hover { border-color: var(--color-ink); color: var(--color-ink); }

.btn--underline {
  font-size: 13px; font-weight: 500;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 4px;
}
.btn--underline:hover { border-color: var(--accent); color: var(--accent); }

.link-quiet {
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-strong); padding-bottom: 3px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link-quiet:hover { border-color: var(--accent); }

/* tags ------------------------------------------------------------------ */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-tag-y) var(--space-tag-x);
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tag--lg {
  font-size: 14px; line-height: 1.4; letter-spacing: 0;
  text-transform: none; color: var(--color-ink);
  padding: var(--space-pill-y) var(--space-pill-x);
}
.tag:hover { border-color: var(--color-ink); color: var(--color-ink); }

/* meta strip ------------------------------------------------------------ */
.meta-item { display: flex; flex-direction: column; gap: var(--space-label-gap); }

/* stat ------------------------------------------------------------------ */
.stat { display: flex; flex-direction: column; gap: var(--space-stat-inner-gap); }
.stat__value { color: var(--accent); }
.on-dark .stat { gap: var(--space-stat-gap-lg); }
.on-dark .stat__value { color: var(--color-bg); }

/* section header -------------------------------------------------------- */
.section-head { display: flex; flex-direction: column; gap: var(--space-section-head-gap); }

/* definition row -------------------------------------------------------- */
.def-row {
  display: flex; flex-direction: column; gap: var(--space-def-row-gap);
  padding-block: var(--space-row-y);
  border-bottom: 1px solid var(--color-border);
}
/* horizontal variant used by Retheme's solution bullets */
.def-row--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 28px;
  padding-block: 16px;
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
}
.def-row--split > .span-2 { grid-column: span 2; min-width: 0; }

/* single-text list row (Furcy) ------------------------------------------ */
.list-row {
  padding-block: 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 16px; line-height: 1.6; color: var(--color-body);
  max-width: 70ch; text-wrap: pretty;
}
.list-row--tight { padding-block: var(--space-row-y); font-size: 15px; line-height: 1.5; color: var(--color-ink); max-width: none; }

/* numbered step --------------------------------------------------------- */
.num-step {
  display: grid;
  grid-template-columns: var(--space-num-col) minmax(0, 1fr);
  gap: var(--space-step-gap);
  padding-block: var(--space-row-y);
  border-bottom: 1px solid var(--color-border);
}
.num-step__num { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--color-subtle); padding-top: var(--space-num-nudge); }

/* group (Retheme approach) ---------------------------------------------- */
.group { padding-block: 22px; border-top: 1px solid var(--color-border); }
.group__title { margin-bottom: var(--space-section-head-gap); }
.group p + p { margin-top: 12px; }

/* accent note ----------------------------------------------------------- */
.accent-note {
  padding-left: var(--space-note-pad);
  border-left: 2px solid var(--accent);
  font-size: 16px; line-height: 1.62;
  color: var(--color-body); max-width: 66ch; text-wrap: pretty;
}
.accent-note strong { font-weight: 600; color: var(--color-ink); }
.accent-note--quote {
  font-size: clamp(18px, 2.2vw, 32px); line-height: 1.28;
  font-weight: 500; letter-spacing: -.025em;
  color: var(--color-ink); max-width: 44ch;
  padding-left: clamp(16px, 2vw, 28px);
}
.on-dark .accent-note { color: var(--color-bg); border-left-color: var(--color-accent-retheme-2); }

/* figure ---------------------------------------------------------------- */
.figure { display: flex; flex-direction: column; gap: var(--space-figure-gap); margin: 0; }
.figure__frame {
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
}
.figure__frame--plain { border: 0; }
.figure__frame--dark  { background: var(--color-ink); }
.figure img { width: 100%; }

/* scroll window (Retheme before/after) ---------------------------------- */
.scroll-window {
  height: clamp(380px, 56vh, 560px);
  overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  scrollbar-width: thin;
}
.scroll-window--after { border-color: var(--color-ink); }
.scroll-window img { width: 100%; }
.scroll-window--offset img { margin-top: -5.208%; }

.compare-label {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-subtle);
  margin-bottom: var(--space-section-head-gap);
  padding-bottom: 12px; border-bottom: 1px solid var(--color-border);
}
.compare-label--after { color: var(--color-ink); border-bottom-color: var(--color-ink); }

/* work card ------------------------------------------------------------- */
.work-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 64px);
}
.work-card {
  display: flex; flex-direction: column; gap: var(--space-card-gap);
  padding-top: var(--space-card-top);
  border-top: 1px solid var(--color-ink);
  transition: border-color var(--dur-mid) var(--ease-out);
}
.work-card__head { display: flex; flex-direction: column; gap: var(--space-card-head-gap); }
.work-card__meta { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-subtle); }
.work-card__cta  { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.work-card:hover { border-top-color: var(--accent); color: var(--accent); }
.work-card:hover .work-card__meta { color: var(--accent); }
.work-card__cta::after {
  content: " →"; display: inline-block;
  transition: transform var(--dur-mid) var(--ease-out);
}
.work-card:hover .work-card__cta::after { transform: translateX(5px); }

/* home project article --------------------------------------------------- */
.project {
  padding: clamp(36px, 6vh, 80px) 0 clamp(48px, 8vh, 110px);
  border-top: 1px solid var(--color-ink);
}
.project__year { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.project__title { margin-top: 20px; }
.project__tags  { margin-top: 22px; }
.project__shot  {
  display: block; margin-top: 40px; overflow: hidden;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  transition: border-color var(--dur-mid) var(--ease-out);
}
.project__shot img { transition: transform var(--dur-slow) var(--ease-out); }
.project__shot:hover { border-color: var(--color-ink); }
.project__shot:hover img { transform: scale(1.012); }
.project__desc { margin-top: 48px; max-width: 50ch; }
.project__cta  { display: inline-block; margin-top: 44px; }

/* placeholder (source has no asset for these) --------------------------- */
.placeholder {
  background-image: repeating-linear-gradient(135deg,
    var(--color-hatch-a) 0 10px, var(--color-hatch-b) 10px 20px);
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: flex-end; padding: 16px;
}

/* tie-rate table (Ritual Finder) ---------------------------------------- */
.tie-head, .tie-row__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(58px, .7fr) minmax(58px, .7fr);
  gap: 12px 16px;
}
.tie-head {
  padding-bottom: 12px; border-bottom: 1px solid var(--color-ink);
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-subtle);
}
.tie-head span:nth-child(2), .tie-head span:nth-child(3) { text-align: right; }
.tie-head span:nth-child(3) { color: var(--accent); }

.tie-row { padding-block: 16px; border-bottom: 1px solid var(--color-border); }
.tie-row__grid { gap: 8px 16px; align-items: baseline; }
.tie-row__step     { font-size: 15px; font-weight: 500; min-width: 0; }
.tie-row__baseline { font-size: 14px; text-align: right; color: var(--color-subtle); text-decoration: line-through; }
.tie-row__final    { font-size: 17px; font-weight: 600; text-align: right; letter-spacing: -.01em; color: var(--accent); }

.tie-track { position: relative; height: 10px; margin-top: 12px; background: var(--color-track); overflow: hidden; }
.tie-bar { position: absolute; inset: 0 auto 0 0; width: var(--w, 0); }
.tie-bar--baseline { background: var(--color-bar-baseline); }
.tie-bar--final    { background: var(--accent); }

.tie-foot {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 7px;
  font-size: 11px; letter-spacing: .04em; color: var(--color-subtle);
}
.tie-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-subtle); }
.tie-legend span { display: flex; align-items: center; gap: 7px; }
.swatch { width: 18px; height: 8px; display: inline-block; }
.swatch--final { background: var(--accent); }
.swatch--baseline { background: var(--color-bar-baseline); }

/* challenge grid (Retheme) ---------------------------------------------- */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--color-dark-divider);
  margin-top: clamp(40px, 7vh, 84px);
}
.challenge-cell { background: var(--color-ink); padding: clamp(24px, 2.6vw, 38px); }
.challenge-cell__num { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--color-accent-retheme-2); margin-bottom: 18px; }
.challenge-cell__label { font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; margin-bottom: var(--space-section-head-gap); }
.challenge-cell__text { font-size: 14px; line-height: 1.65; color: var(--color-on-dark-body-2); text-wrap: pretty; }

/* results windows (Retheme) --------------------------------------------- */
.windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: clamp(36px, 6vh, 72px); }
.window {
  border: 1px solid var(--color-ink);
  padding: clamp(22px, 2.4vw, 34px);
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.window:hover { border-color: var(--color-accent-retheme); transform: translateY(-2px); }
.window__label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-body); }
.window__period { font-size: 12px; color: var(--color-subtle); margin-top: 8px; line-height: 1.45; }
.window__sales { margin-top: 26px; color: var(--color-accent-retheme); }
.window__foot { display: flex; gap: 32px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.window__mini { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.window__mini-label { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--color-subtle); margin-top: 8px; }

.signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: clamp(36px, 6vh, 72px); padding-top: 28px; border-top: 1px solid var(--color-border); }
.signal { display: flex; gap: 20px; align-items: baseline; }
.signal__label { flex: none; }

/* before/after stat pair (Furcy) ---------------------------------------- */
.ba { padding-top: 22px; border-top: 1px solid var(--color-dark-divider); }
.ba__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-on-dark-muted); margin-bottom: 26px; }
.ba__row { display: flex; align-items: baseline; gap: clamp(16px, 2vw, 32px); }
.ba__before { font-size: clamp(28px, 3.2vw, 48px); font-weight: 500; letter-spacing: -.035em; line-height: 1; color: var(--color-on-dark-dim); text-decoration: line-through; }
.ba__after  { font-size: clamp(40px, 5vw, 80px); font-weight: 600; letter-spacing: -.045em; line-height: .94; color: var(--color-accent-furcy); }
.ba__cap    { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-top: 12px; }
.ba__cap--dim { color: var(--color-on-dark-dim); }
.ba__cap--lit { color: var(--color-on-dark-muted); }
.ba__arrow { font-size: clamp(20px, 2vw, 30px); color: var(--color-on-dark-dim); line-height: 1; }

/* beyond-the-website device grid (Furcy) -------------------------------- */
.beyond-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: clamp(20px, 4vw, 72px); margin-top: clamp(48px, 9vh, 110px); align-items: start; }
.device-fig { display: flex; flex-direction: column; align-items: center; gap: 28px; margin: 0; }
.device-pair { display: flex; gap: clamp(8px, 1.4vw, 20px); width: 100%; justify-content: center; }
.device-fig img { height: clamp(300px, 38vw, 620px); width: auto; max-width: 100%; }
.device-cap { max-width: 34ch; text-align: left; }
.device-cap__head { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-label-gap); text-align: center; }
.device-cap__text { display: block; font-size: 14px; line-height: 1.6; color: var(--color-body); text-wrap: pretty; }

/* quiz demo (Ritual Finder) --------------------------------------------- */
.quiz {
  margin-top: clamp(32px, 5vh, 56px);
  border: 1px solid var(--color-ink);
  background: var(--color-surface);
  padding: clamp(24px, 4vw, 56px);
  min-height: 440px;
  display: flex; flex-direction: column;
}
.quiz__progress { display: flex; align-items: center; gap: 16px; }
.quiz__track { flex: 1; height: 2px; background: var(--color-track); position: relative; }
.quiz__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.quiz__step-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-subtle); white-space: nowrap; }

.quiz__panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: center;
  flex: 1; padding-top: clamp(28px, 4vh, 48px);
}
.quiz__story { font-size: 15px; line-height: 1.6; color: var(--color-body); margin-top: 20px; max-width: 42ch; text-wrap: pretty; }
.quiz__why-btn { margin-top: 22px; }
.quiz__why {
  font-size: 14px; line-height: 1.6; color: var(--color-body);
  margin-top: 18px; padding: 16px;
  background: var(--color-bg);
  border-left: 2px solid var(--accent);
  max-width: 44ch; text-wrap: pretty;
}
.quiz__options { display: flex; flex-direction: column; gap: 10px; }
.quiz__option {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--color-bg); border: 1px solid var(--color-border);
  padding: 16px 18px; font-size: 16px; color: var(--color-ink);
  cursor: pointer; min-height: 56px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.quiz__option:hover { border-color: var(--color-ink); background: var(--color-surface); }
.quiz__option:active { transform: translateY(1px); }
.quiz__swatch {
  width: 40px; height: 40px; flex: none;
  background-image: repeating-linear-gradient(135deg,
    var(--color-hatch-a) 0 5px, var(--color-hatch-b) 5px 10px);
  border: 1px solid var(--color-border-strong);
}
.quiz__result { flex: 1; padding-top: clamp(28px, 4vh, 48px); }
.quiz__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 32px; }
.quiz__step-card { border: 1px solid var(--color-border); padding: 18px; background: var(--color-bg); }
.quiz__slot { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-subtle); margin-bottom: var(--space-label-gap); }
.quiz__product { font-size: 16px; font-weight: 500; line-height: 1.35; }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* timelines (Ritual Finder) --------------------------------------------- */
.timelines { display: flex; flex-direction: column; gap: clamp(32px, 5vh, 56px); margin-top: clamp(32px, 5vh, 56px); max-width: 680px; }
.timeline__label {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-subtle);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

/* full-bleed image band ------------------------------------------------- */
.band {
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  overflow: hidden;
}
.band--dark { background: var(--color-ink); }

/* ==========================================================================
   Motion — IntersectionObserver adds .is-in

   Every rule here is scoped to `.js-reveal` on <html>, which a small inline
   script in <head> adds and motion.js confirms. Without that class nothing is
   hidden, so the page is fully readable when JavaScript is off, blocked, or
   fails to load — the animation is an enhancement, never a precondition for
   seeing the content. The inline script also carries a watchdog that drops the
   class if motion.js never reports in.
   ========================================================================== */

/* base reveal: fade + rise */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-rise), 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js-reveal [data-reveal].is-in { will-change: auto; }

/* hairline rules draw in from the left */
.js-reveal [data-reveal-rule] {
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js-reveal [data-reveal-rule].is-in { transform: scaleX(1); }

/* images: settle in from a slight scale-up */
[data-reveal-img] { overflow: hidden; }
.js-reveal [data-reveal-img] img {
  opacity: 0; transform: scale(1.035);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform 900ms var(--ease-out);
}
.js-reveal [data-reveal-img].is-in img { opacity: 1; transform: scale(1); }

/* tie-rate bars grow to their measured width. --w is set inline in the HTML,
   so without JS the bar simply renders at full width instead of collapsed. */
.js-reveal [data-bar] { width: 0; }
.js-reveal [data-bar].is-in { width: var(--w); transition: width 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }

/* hero entrance on load */
.js-reveal .hero__eyebrow,
.js-reveal .hero h1,
.js-reveal .hero__foot { animation: rise-in var(--dur-slow) var(--ease-out) both; }
.js-reveal .hero__eyebrow { animation-delay: 60ms; }
.js-reveal .hero h1       { animation-delay: 140ms; }
.js-reveal .hero__foot    { animation-delay: 260ms; }
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* respect the user's motion preference ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-rule],
  .js-reveal [data-reveal-img] img {
    opacity: 1 !important; transform: none !important;
  }
  .js-reveal [data-bar] { width: var(--w) !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .grid-case > .span-2,
  .def-row--split > .span-2 { grid-column: auto; }
  .grid-half { grid-template-columns: minmax(0, 1fr); }
  .beyond-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: clamp(40px, 9vw, 72px); }
}

@media (max-width: 760px) {
  .hero__copy { text-align: left; }
  .t-home-h1, .home-hero__kicker { text-align: left !important; }
  .device-fig img { height: min(74vw, 520px); }
  .device-pair img { height: min(52vw, 380px); }
  .window__foot { gap: 24px; }
  .signal { flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   Page: Home
   ========================================================================== */

.home-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(32px, 4vw, 72px);
  align-items: stretch;
  padding: clamp(48px, 8vh, 120px) var(--space-gutter) clamp(64px, 10vh, 140px);
}
.home-hero__col--name { text-align: right; }
.home-hero__kicker { margin-top: 24px; }
.home-hero__portrait { min-height: clamp(360px, 58vh, 640px); }
.home-hero__col--statement { display: flex; flex-direction: column; justify-content: flex-end; }

.work { padding: 4vh var(--space-gutter) 0; }

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 56px; align-items: start;
  padding-block: 10vh;
}
.about__portrait {
  max-width: 340px; aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }

.t-about-lede {
  font-size: clamp(18px, 1.7vw, 26px); line-height: 1.45;
  letter-spacing: -.01em; max-width: 42ch; text-wrap: pretty;
}

.contact { padding: 10vh var(--space-gutter) 12vh; }
.contact__email {
  display: inline-block; max-width: 100%;
  border-bottom: 2px solid var(--color-ink); padding-bottom: 8px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact__email:hover { border-color: var(--accent); }
.contact__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 8vh; }

/* figure frame aspect variants ------------------------------------------- */
.figure__frame--43 { aspect-ratio: 4 / 3; }
.figure__frame--43 img { width: 100%; height: 100%; object-fit: cover; }
.figure__frame--contain { display: grid; place-items: center; }
.figure__frame--contain img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   Page: case-study composites
   ========================================================================== */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 3vw, 48px);
}

.insight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(36px, 6vh, 76px);
  padding-top: clamp(28px, 4vh, 48px);
}

.v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; margin-top: 20px;
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(36px, 6vh, 76px);
}

.figure__frame--45 { aspect-ratio: 4 / 5; }
.figure__frame--45 img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.figure--center { align-items: center; }

/* The source grid is auto-fit minmax(280px,1fr), which lands on 4 columns at
   desktop and leaves 2 empty cells — the container's divider colour then shows
   through as a grey block. Explicit column counts let the 6 cells fill exactly. */
@media (min-width: 1000px) { .challenge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 999px) { .challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .challenge-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Third-party overrides
   ========================================================================== */

/* Netlify's HUD script injects a floating badge. The badge button itself lives
   inside a cross-origin iframe, so page CSS cannot reach it — hide the iframe
   containers instead. The durable fix is disabling the HUD in Netlify's site
   settings; this is the belt-and-braces version. */
#nl-badge-frame,
#nl-hud-frame {
  display: none !important;
}

/* ==========================================================================
   Art-directed images (<picture>)
   Ritual Finder ships separate mobile crops — different compositions, not just
   smaller — so they're switched with <source media>, not srcset.
   ========================================================================== */

/* <picture> is inline by default, which leaves a descender gap under the image
   and gives a height:100% child nothing to resolve against. */
picture { display: block; }
.figure__frame picture,
.band picture { display: block; width: 100%; height: 100%; }

/* The flow diagram sits in a 4:3 contain box on desktop. The mobile crop is a
   different shape, so let it size naturally rather than letterboxing inside it. */
@media (max-width: 760px) {
  .figure__frame--contain {
    aspect-ratio: auto;
    display: block;
  }
  .figure__frame--contain picture,
  .figure__frame--contain img {
    height: auto;
    object-fit: contain;
  }
}