/* =============================================================
   Chhaya Digital — brand landing page
   Design notes (per impeccable slop rules):
   - No gradient text, no radial glows, no glassmorphism
   - Flat surfaces + one deep green accent + one burnt orange
   - Source Serif 4 (display serif) + Schibsted Grotesk (body)
   - Cards use a defined border, not hairline + wide shadow
   - No eyebrow labels above headings; plain editorial rules
   ============================================================= */

:root {
  --paper: #f7f7f4;
  --surface: #fdfdfb;
  --ink: #121714;
  --ink-2: #38423b;
  --muted: #5e685f;
  --line: #dfe3dc;
  --line-strong: #c6cdc4;
  --accent: #1d603d;
  --accent-dark: #15482d;
  --accent-soft: #e6f0e9;
  --orange: #b3511c;
  --orange-soft: #f6e9df;

  /* theme-independent solids (stay dark in both themes) */
  --ink-solid: #171a1c;
  --ink-solid-2: #101214;

  /* semantic button tokens */
  --btn-solid-bg: #1e5f3c;
  --btn-solid-hover: #17482d;
  --btn-dark-bg: #171a1c;
  --btn-dark-fg: #ffffff;
  --btn-dark-hover: #000000;
  --cta-bg: #1e5f3c;

  /* tag tokens */
  --tag-license-bg: #e9f1ec;
  --tag-license-fg: #17482d;

  --radius-sm: 5px;
  --maxw: 1180px;
  --font-body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-display: "Source Serif 4", "Georgia", serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  color-scheme: light;
}

/* ---------- Dark theme ----------
   Same flat editorial world at night: deep green-ink paper, lifted lines,
   the accent brightened to the green the footer already uses. The CTA band
   and footer keep their own surfaces in both themes. */
[data-theme="dark"] {
  --paper: #141816;
  --surface: #1b201c;
  --ink: #e9ebe5;
  --ink-2: #b9c1b4;
  --muted: #8f9790;
  --line: #2b322c;
  --line-strong: #3d453e;
  --accent: #6fb68c;
  --accent-dark: #8fc7a4;
  --accent-soft: #1e2c23;
  --orange: #d07a45;
  --orange-soft: #2e2019;

  --btn-solid-bg: #2e7a4d;
  --btn-solid-hover: #3a8f5c;
  --btn-dark-bg: #e9ebe5;
  --btn-dark-fg: #171a1c;
  --btn-dark-hover: #ffffff;

  --tag-license-bg: #223528;
  --tag-license-fg: #8fc7a4;

  color-scheme: dark;
}

[data-theme="dark"] ::selection { background: var(--accent); color: #101512; }
[data-theme="dark"] .brand-mark .cres { fill: none; stroke: #e9ebe5; }
[data-theme="dark"] .brand-mark .dot { fill: #cf702e; }
[data-theme="dark"] .sheet-stack::before { border-color: #2c3a30; }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus { box-shadow: 0 0 0 3px rgba(111, 182, 140, 0.16); }
[data-theme="dark"] .form-msg.error { color: #f2b28c; }
[data-theme="dark"] .signature a { text-decoration-color: #4a5a50; }
/* Dark-on-dark surfaces need their edges drawn, not their fill changed. */
[data-theme="dark"] .manifesto-dark { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-theme="dark"] .studio-note { border-color: var(--line-strong); }
/* The footer keeps its usual ink surface in dark mode — its colors were
   tuned for that ink. A drawn hairline separates it from the page. */
[data-theme="dark"] .site-footer { background: var(--ink-solid); border-top: 1px solid var(--line); }
[data-theme="dark"] .skip-link { background: #e9ebe5; color: #171a1c; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; text-underline-offset: 0.18em; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 { font-size: clamp(2.4rem, 2.4vw + 1.15rem, 3.4rem); }
h2 { font-size: clamp(1.85rem, 1.4vw + 1.1rem, 2.45rem); }
h3 { font-size: 1.15rem; font-weight: 550; }

p { color: var(--ink-2); text-wrap: pretty; }

.prose { max-width: 66ch; }
.prose p + p { margin-top: 1em; }
/* Editorial links carry a quiet rule at rest that firms up on hover —
   the underline does the talking before the colour does. */
.prose a, .legal a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(29, 96, 61, 0.32);
  transition: color .18s ease-out, text-decoration-color .18s ease-out;
}
.prose a:hover, .legal a:hover { color: var(--accent-dark); text-decoration-color: var(--accent-dark); }
.mt-16 { margin-top: 16px; }

.mono { font-family: var(--font-mono); }
.container { width: min(100% - 64px, var(--maxw)); margin: 0 auto; }
.center { text-align: center; }

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--paper); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 0.95rem/1 var(--font-body);
  min-height: 50px; padding: 15px 24px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s ease-out, border-color .18s ease-out, color .18s ease-out, transform .18s ease-out;
}
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--btn-solid-bg); color: #fff; }
.btn-solid:hover { background: var(--btn-solid-hover); }
.btn-dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); }
.btn-dark:hover { background: var(--btn-dark-hover); color: var(--btn-dark-fg); }
.btn-line { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-line:hover { background: var(--surface); border-color: var(--ink); }
.btn-sm { min-height: 42px; padding: 10px 18px; font-size: 0.88rem; }
.btn:disabled { cursor: not-allowed; opacity: 0.62; transform: none; }
@media (hover: hover) {
  .btn-solid:hover, .btn-dark:hover, .btn-line:hover { transform: translateY(-1px); }
  .btn-solid:active, .btn-dark:active, .btn-line:active { transform: translateY(1px); }
}

/* ---------- Keyboard focus ---------- */
a:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-solid:focus-visible { outline-color: var(--accent-dark); }
.btn-dark:focus-visible { outline-color: #ffffff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: border-color .28s ease-out;
}
.site-header.is-scrolled { border-bottom-color: var(--line-strong); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-mark .cres { fill: none; stroke: var(--ink-solid); stroke-width: 3.25; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .dot {
  fill: #cf702e;
  transform-box: fill-box; transform-origin: center;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-name { font-weight: 650; font-size: 1rem; letter-spacing: -0.015em; line-height: 1.1; }
.brand-name small { display: block; margin-top: 3px; font-family: var(--font-body); font-size: 0.69rem; font-weight: 500; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  position: relative;
  color: var(--ink-2); font-weight: 500; font-size: 0.94rem;
  padding: 10px 14px;
  transition: color .15s ease-out;
}
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px;
  height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease-out;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: inline-flex; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  width: 44px; height: 44px; cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
  transition: background .18s ease-out, border-color .18s ease-out;
}
.theme-toggle:hover { background: var(--surface); border-color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
  transform-box: fill-box; transform-origin: center;
  transition: opacity .2s ease-out, transform .32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Both glyphs share the same 24×24 canvas; one fades and turns out as the
   other arrives. */
.theme-toggle .icon-sun { opacity: 0; transform: rotate(50deg) scale(0.55); }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-50deg) scale(0.55); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  width: 44px; height: 44px; cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
  transition: background .18s ease-out, border-color .18s ease-out;
}
.nav-toggle:hover { background: var(--surface); border-color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle line {
  transform-box: fill-box; transform-origin: center;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), opacity .14s ease-out;
}
.nav-toggle[aria-expanded="true"] line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] line:nth-child(2) { opacity: 0; transform: scaleX(0.35); }
.nav-toggle[aria-expanded="true"] line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (hover: hover) {
  .brand:hover .brand-mark .dot,
  .brand:focus-visible .brand-mark .dot { transform: scale(1.12); }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 12px 32px 22px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .22s ease-out, opacity .22s ease-out;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .nav-cta .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero { min-height: 720px; padding: 116px 0 108px; position: relative; display: grid; align-items: center; border-bottom: 1px solid var(--line); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr); gap: clamp(72px, 9vw, 120px); align-items: center; }

.hero h1 {
  font-size: clamp(3.2rem, 5vw + 1rem, 6rem);
  max-width: 10.5ch; margin: 0 0 28px; line-height: 0.98; text-wrap: balance;
}
.hero h1 .accent { color: var(--accent); font-style: italic; letter-spacing: -0.03em; }
.page-head h1 .accent { color: var(--accent); font-style: normal; }
.hero .sub { font-size: 1.16rem; line-height: 1.68; color: var(--ink-2); max-width: 56ch; }
.hero-name { margin-top: 16px; font-size: 0.98rem; color: var(--muted); max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-foot { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-top: 46px; font-size: 0.72rem; letter-spacing: 0.055em; text-transform: uppercase; color: var(--muted); }
.hero-foot li { display: inline-flex; align-items: center; gap: 9px; }
.hero-foot li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: 0 0 auto; }

/* Hero visual: editorial product dossier */
.hero-visual { position: relative; }
.sheet-stack { position: relative; padding: 28px 26px 24px 0; }
.sheet-stack::before {
  content: ""; position: absolute; right: 0; top: 0; width: 72%; height: 100%;
  background: var(--accent-soft); border: 1px solid #d5e3d9; z-index: 0;
  /* Hero scroll drift moves the ground slower than the sheet above it. */
  transform: translateY(var(--ground-y, 0px));
}
.sheet {
  position: relative; z-index: 2;
  background: var(--surface);
  padding: 36px 38px 32px; border: 1px solid var(--line-strong);
  overflow: hidden;
}
.sheet-back {
  position: absolute; z-index: 1;
  inset: 44px 10px 8px 16px;
  background: var(--paper); border: 1px solid var(--line-strong);
}
.sheet::before {
  content: ""; position: absolute; top: 0; left: 0; width: 72px; height: 3px; background: var(--accent);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sheet-title { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.02em; }
.sheet-tag {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.sheet-tag.license { background: var(--tag-license-bg); color: var(--tag-license-fg); }
.sheet-desc { font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 42ch; }
.sheet-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 24px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.sheet-flow .chip { padding: 3px 7px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.sheet-flow .chip-out { background: var(--tag-license-bg); border-color: var(--tag-license-bg); color: var(--tag-license-fg); }
.sheet-flow .flow-arrow { color: var(--orange); flex: 0 0 auto; margin: 0 2px; }
.sheet-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 28px; padding-top: 17px; border-top: 1px solid var(--line); font: 400 0.72rem/1.5 var(--font-mono); letter-spacing: 0.02em; color: var(--muted); }
.sheet-meta a { color: var(--accent); }
.sheet-meta a:hover { color: var(--accent-dark); }

@media (max-width: 920px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero { min-height: 0; padding: 72px 0 80px; }
  .hero-visual { max-width: 560px; }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tight { padding: 64px 0; }

.sec-rule { width: 48px; height: 2px; background: var(--accent); margin-bottom: 28px; }
.sec-head { max-width: 760px; margin-bottom: 64px; }
.sec-head h2, .principles h2, .contact-grid h2, .cta-band h2 {
  font-size: clamp(2.15rem, 1.9vw + 1.15rem, 3.05rem);
  letter-spacing: -0.026em;
}
.sec-head h2 { margin-bottom: 18px; }
.sec-head p { font-size: 1.06rem; color: var(--ink-2); max-width: 60ch; }
.sec-head p a { color: var(--accent); font-weight: 600; }
.sec-head p a:hover { color: var(--accent-dark); }

/* ---------- Manifesto ---------- */
.manifesto { padding: 132px 0; }
.manifesto .lead {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2.2rem);
  font-weight: 400; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink); max-width: 28em;
}
.manifesto .lead em { font-style: italic; color: var(--accent); }
.manifesto .meta { max-width: 58ch; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.76rem; line-height: 1.7; color: var(--muted); }

/* The dark manifesto is the page's peak: one ink surface, one big line,
   words surfacing as you scroll. */
.manifesto-dark { background: var(--ink-solid); padding: 148px 0; }
.manifesto-dark .lead {
  font-size: clamp(2.1rem, 2.6vw + 1.2rem, 3.6rem);
  line-height: 1.22; letter-spacing: -0.018em;
  color: #f4f5f1; max-width: 21em;
}
.manifesto-dark .lead em { color: #6fb68c; }
.manifesto-dark .lead .w { display: inline-block; }
.manifesto-dark .meta { border-top-color: rgba(255, 255, 255, 0.14); color: #8f9790; letter-spacing: 0.04em; }
@media (max-width: 640px) {
  .manifesto-dark { padding: 96px 0; }
  .manifesto-dark .lead { font-size: clamp(1.8rem, 7.4vw, 2.4rem); }
}

/* ---------- Focus lanes ---------- */
.lane { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-strong); }
.lane-cell { padding: 56px 48px; }
.lane + .lane .lane-cell { padding-top: 40px; }
.lane-cell + .lane-cell { border-left: 1px solid var(--line); }
.lane h3 { font-size: 1.65rem; margin-bottom: 14px; }
.lane p { color: var(--ink-2); max-width: 44ch; }

@media (max-width: 820px) {
  .lane { grid-template-columns: 1fr; }
  .lane-cell { padding: 36px 8px; }
  .lane-cell + .lane-cell { border-left: none; border-top: 1px solid var(--line); }
}

/* ---------- Work list ---------- */
.work-list { border-top: 1px solid var(--line-strong); }
.work-row {
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 1.4fr;
  gap: 24px; align-items: baseline;
  padding: 34px 8px 34px 20px; border-bottom: 1px solid var(--line);
  transition: background .18s ease-out;
}
/* The row answers a hover with a drawn accent tick, not a wash of colour. */
.work-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top center;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-row:hover { background: var(--paper); }
.work-row:hover::before { transform: scaleY(1); }
.work-row:hover .work-name { color: var(--accent-dark); }
.work-list .work-name {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 600;
  letter-spacing: -0.02em;
  transition: color .18s ease-out, transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Linked rows earn a drawn arrow that arrives with the hover. */
.work-name a::after {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em;
  margin-left: 0.3em; vertical-align: baseline;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity .18s ease-out, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .work-row:hover .work-name { transform: translateX(5px); }
  .work-row:hover .work-name a::after { opacity: 1; transform: translate(0, 0); }
}
.work-tag {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; justify-self: start; white-space: nowrap;
}
.work-tag.t-license { background: var(--tag-license-bg); color: var(--tag-license-fg); }
.work-tag.t-open { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.work-name a { color: inherit; }
.work-name a:hover { color: var(--accent-dark); }
.work-ver { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.work-desc { color: var(--ink-2); font-size: 0.98rem; }
.work-desc a { color: var(--accent); font-weight: 600; }
.work-desc a:hover { color: var(--accent-dark); }
.work-note {
  max-width: 60ch; margin-top: 36px;
  color: var(--ink-2); font-size: 0.98rem;
}
.work-note a { color: var(--accent); font-weight: 600; }
.work-note a:hover { color: var(--accent-dark); }

/* Four columns strain before the grids around them do — collapse early,
   covering the 821–860px band where descriptions wrapped to seven lines. */
@media (max-width: 900px) {
  .work-row { grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 28px 4px 28px 16px; }
  .work-desc { grid-column: 1 / -1; }
}

/* ---------- Principles ---------- */
.principles { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(64px, 9vw, 128px); }
.principles .pr-head { position: sticky; top: 120px; align-self: start; }
.principles h2 { margin-bottom: 16px; }
.principles .pr-head p { color: var(--ink-2); max-width: 44ch; }
.principle { padding: 34px 0; border-top: 1px solid var(--line-strong); }
.principle:last-child { border-bottom: 1px solid var(--line-strong); }
.principle h3 { font-size: 1.25rem; margin-bottom: 8px; }
.principle p { color: var(--ink-2); max-width: 52ch; font-size: 0.98rem; }
@media (max-width: 820px) {
  .principles { grid-template-columns: 1fr; gap: 12px; }
  .principles .pr-head { position: static; }
}

/* ---------- Studio / name ---------- */
.studio-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(64px, 8vw, 112px); align-items: center; }
.cuedora-split { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(56px, 8vw, 112px); align-items: center; }
@media (max-width: 820px) {
  .studio-grid,
  .cuedora-split { grid-template-columns: 1fr; gap: 36px; }
}
.studio-note {
  --note-bar: 1;
  position: relative; background: var(--ink-solid); color: #e8eae6;
  padding: 48px 44px; margin-left: 10px; margin-top: 10px;
  border: 1px solid var(--ink-solid-2);
}
.studio-note::before {
  content: ""; position: absolute; left: -10px; bottom: -10px;
  width: 64%; height: 3px; background: var(--orange); z-index: -1;
  transform: scaleX(var(--note-bar)); transform-origin: left center;
}
.studio-note .note-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a9b0a6; }
.studio-note p { color: #d8dcd4; margin-top: 18px; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.45; }
.studio-note p em { color: var(--orange-soft); font-style: italic; }

/* ---------- FAQ ----------
   Rows span the section like the work list does, so the toggle column sits at
   the content's right edge instead of floating mid-band. */
.faq-item { padding: 0 0 24px; border-top: 1px solid var(--line-strong); }
.faq-item:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  cursor: pointer; list-style: none; padding: 26px 0 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.25rem; margin: 0; transition: color .15s ease-out; }
.faq-item summary:hover h3 { color: var(--accent-dark); }
.faq-item summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 1.15rem; line-height: 1;
  color: var(--accent); transition: transform .2s ease-out;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--ink-2); max-width: 60ch; font-size: 0.98rem; padding-top: 10px; }
.faq-item[open] p { animation: faq-answer-in .24s cubic-bezier(0.16, 1, 0.3, 1) both; }
.faq-item p a { color: var(--accent); font-weight: 600; }
.faq-item p a:hover { color: var(--accent-dark); }

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(64px, 9vw, 128px); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-grid form { background: var(--surface); border: 1px solid var(--line-strong); padding: 42px; }

.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--ink); }
.field-optional { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%; font: 400 0.97rem/1.5 var(--font-body); color: var(--ink); caret-color: var(--accent);
  min-height: 52px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
/* The UA placeholder grey only reaches 4.3:1 on this paper. */
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 96, 61, 0.12); }
.form-msg { display: none; padding: 13px 15px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 20px; }
.form-msg.show { display: block; animation: form-msg-in .32s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes form-msg-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.form-msg.info { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); }
.form-msg.success { background: var(--accent-soft); color: var(--accent-dark); }
.form-msg.error { background: var(--orange-soft); color: #753411; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--orange); }
.contact-grid form .btn.is-complete { background: var(--accent-dark); color: #fff; }
.contact-meta { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.contact-meta a { font-weight: 600; color: var(--accent); }
.contact-meta a:hover { color: var(--accent-dark); }
.contact-meta li { padding: 7px 0; font-size: 0.94rem; color: var(--ink-2); }

/* On desktop the rail stretches to the form's height and the meta list anchors
   the section's bottom edge, instead of the column dying mid-band. */
@media (min-width: 821px) {
  .contact-grid > div:first-child { align-self: stretch; display: flex; flex-direction: column; }
  .contact-grid .contact-meta { margin-top: auto; }
}

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--cta-bg); color: #fff; padding: 104px 0; }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 52ch; }
.cta-band .hero-actions { margin-top: 34px; }
.cta-band .btn-solid { background: #fff; color: var(--cta-bg); }
.cta-band .btn-solid:hover { background: var(--accent-soft); }
.cta-band .btn-line { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.cta-band .btn-line:hover { border-color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-solid); color: #9aa19b; padding: 84px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 0.7fr 0.7fr; gap: 56px; padding-bottom: 60px; }
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* Stacked footer links are thumb targets, not a desktop list: give each row
     real height instead of a 18px line with dead space between. */
  .footer-col li { margin-bottom: 0; }
  .footer-col a { display: block; padding: 12px 0; }
}
.site-footer .brand { color: #fff; }
.site-footer .brand-mark .cres { fill: none; stroke: #f4f5f1; }
.site-footer .brand-mark .dot { fill: #cf702e; }
.site-footer .brand-name small { color: #8f9790; }
.footer-brand p { color: #a8b0a8; margin-top: 24px; font-size: 0.92rem; max-width: 38ch; }
.footer-brand p a { color: #a8b0a8; font-weight: 500; }
.footer-brand p a:hover { color: #fff; }
/* Body face, not the display serif: a serif at this size dissolves into the
   dark footer (Site / Legal were failing contrast on licensing and every
   other page). Colour is pinned on .site-footer so later `h2` rules cannot
   paint ink on ink. */
.site-footer .footer-col h2,
.site-footer .footer-col h3 {
  color: #f4f5f1;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 16px;
}
.footer-col a { color: #a8b0a8; font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-col li { margin-bottom: 10px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 26px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.84rem; }
.footer-bottom .llc { color: #7d857e; }
.footer-bottom .mono { color: #7d857e; }

/* ---------- Footer wordmark ----------
   The studio name set once, huge, in the display serif — a sign-off, not a heading.
   Kept a whisper above the footer ink so it reads as pressed into the page;
   the green dot is the brand mark's own. Decorative: aria-hidden in markup. */
.footer-word {
  padding: 8px 0 44px;
  overflow: hidden;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.6rem, 11vw, 9.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #272e28;
  white-space: nowrap;
  user-select: none;
}
.footer-word-inner { display: block; }
.footer-word .footer-dot { color: #6fb68c; font-style: normal; }
@media (max-width: 640px) {
  .footer-word { padding-bottom: 34px; }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-solid); color: #fff; padding: 12px 18px;
  font-weight: 600; font-size: 0.9rem; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Sub-page head ---------- */
.page-head { padding: 96px 0 80px; border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 0 0 22px; line-height: 1.04; text-wrap: balance; font-size: clamp(2.6rem, 3vw + 1.2rem, 4.35rem); letter-spacing: -0.028em; }
.page-head h1::before,
.page-404 h1::before {
  content: ""; display: block; width: 48px; height: 2px;
  background: var(--accent); margin-bottom: 28px;
}
.page-head .sub { font-size: 1.12rem; color: var(--ink-2); max-width: 56ch; }
.page-head .crumbs { font-size: 0.8rem; color: var(--muted); }
.page-body { padding: 0 0 96px; }

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-grid.four { grid-template-columns: 1fr 1fr; }
.feature { border-top: 1px solid var(--line-strong); background: transparent; padding: 32px 8px 12px; }
.feature h2, .feature h3 { font-size: 1.2rem; margin-bottom: 10px; }
.feature p { color: var(--ink-2); font-size: 0.97rem; }
.feature .mono { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-grid, .feature-grid.four { grid-template-columns: 1fr; } }

/* ---------- Legal / prose ----------
   Prose pages keep one narrow reading column: page head and body both carry
   container-prose, so title and text share a left edge. As a max-width cap on
   .container it inherits the standard gutters at every width. */
.container-prose { max-width: 860px; }
.legal { max-width: 36em; font-size: 1.02rem; }
.legal .updated { font-size: 0.8rem; color: var(--muted); margin-bottom: 28px; }
.legal h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.legal p { color: var(--ink-2); margin-bottom: 1em; }
.legal ul { list-style: none; margin: 0 0 1.2em; }
.legal li { position: relative; padding-left: 22px; color: var(--ink-2); margin-bottom: 8px; }
.legal li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 6px; height: 6px; background: var(--accent); }
.legal h3 { margin: 26px 0 8px; }
.legal ol { list-style: none; counter-reset: step; margin: 0 0 1.2em; }
.legal ol li { counter-increment: step; }
.legal ol li::before {
  content: counter(step) "."; background: none;
  width: auto; height: auto; left: 0; top: 0;
  font: 500 0.86rem/1.75 var(--font-mono); color: var(--accent);
}
.legal .faq-item { margin-bottom: 0; }
.legal .faq-item p { max-width: none; }

/* ---------- Changelog ---------- */
.changelog { max-width: 760px; }
.cl-entry { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line-strong); }
.cl-entry:last-child { border-bottom: 1px solid var(--line-strong); }
.cl-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.cl-meta .ver { display: block; font-weight: 500; color: var(--ink); }
.cl-meta .tag { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--tag-license-bg); color: var(--tag-license-fg); }
.cl-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.cl-body ul { list-style: none; }
.cl-body li { position: relative; padding-left: 22px; color: var(--ink-2); margin-bottom: 8px; }
.cl-body li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 6px; height: 6px; background: var(--accent); }
@media (max-width: 640px) { .cl-entry { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Signature ---------- */
.signature { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink); }
/* The signature is a signed line, not body copy. A name linked here takes a fine
   rule of its own instead of the accent-green body-link treatment, which reads as
   shouting inside an italic display face; the accent arrives on hover instead. */
.signature a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #98b6a6;
  transition: color .18s ease-out, text-decoration-color .18s ease-out;
}
.signature a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- 404 ----------
   The only page shorter than a tall viewport, so it carries its own sticky
   footer rather than the whole site paying for one. */
.shell-fill { min-height: 100vh; display: flex; flex-direction: column; }
.shell-fill main { flex: 1 0 auto; display: grid; align-items: center; }
.page-404 { padding: 96px 0 140px; }
.page-404 .container { max-width: 640px; }
.page-404 h1 { margin: 0 0 14px; }
.page-404 p { color: var(--ink-2); max-width: 52ch; }

/* ---------- Auden product page ----------
   The app's screens are near-black with a violet accent, so they cannot sit
   loose on paper. The showcase band borrows the ink surface the studio note
   and footer already use: the plates get a ground, and the page stays inside
   this world instead of inventing a second one. Device frames are drawn in
   CSS rather than baked into the images, so one screenshot serves both themes
   and every width. */

.auden-stage {
  background: var(--ink-solid);
  color: #e8eae6;
  padding: 104px 0 92px;
  border-top: 1px solid var(--line);
}
.auden-stage h2 { color: #f4f5f1; }
.auden-stage .sec-rule { background: #6fb68c; }
.auden-stage .stage-lead { color: #b6bdb4; max-width: 54ch; font-size: 1.06rem; }
/* These sections set their own headings rather than borrowing .sec-head, so
   they have to pay for the space under them too. */
.auden-stage h2, .auden-split h2, .auden-buy h2 { margin-bottom: 16px; }

.device-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3.2vw, 46px);
  margin: 72px 0 0;
  align-items: start;
}
/* The centre plate is lifted so the row reads as a composed group rather than
   three items queued on a shelf. */
.device-fig:nth-child(2) { transform: translateY(-42px); }

.device {
  position: relative; display: block;
  padding: 1.7%;
  background: #0f1211;
  border-radius: 13.8% / 6.46%;
  box-shadow: 0 22px 44px rgba(6, 8, 7, 0.5), 0 3px 8px rgba(6, 8, 7, 0.4);
}
/* The rail, not a glow: one inset hairline is what separates a black device
   from a black ground. */
.device::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}
.device img {
  width: 100%; height: auto; aspect-ratio: 1320 / 2868;
  border-radius: 12.5% / 5.75%;
  background: #000;
}
.device-cap {
  margin-top: 20px; text-align: center;
  font: 400 0.72rem/1.5 var(--font-mono);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #9aa29b;
}

.stage-foot {
  display: flex; align-items: center; gap: 16px;
  margin: 78px 0 0;
  padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.stage-foot img { width: 52px; height: 52px; border-radius: 12px; flex: 0 0 auto; }
.stage-foot .app-name { display: block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; color: #f4f5f1; }
.stage-foot .app-meta { display: block; margin-top: 3px; font: 400 0.76rem/1.5 var(--font-mono); letter-spacing: 0.04em; color: #9aa29b; }

/* Devices on paper need the opposite treatment: a lighter rail so a black
   slab does not merge with a dark-theme page. */
[data-theme="dark"] .auden-split .device { background: #262c27; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4); }

/* ---------- Auden split rows ---------- */
.auden-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(44px, 7vw, 96px); align-items: center; }
.auden-split > :not(.auden-split-media) { grid-column: 1; grid-row: 1; }
.auden-split .auden-split-media { grid-column: 2; grid-row: 1; width: 100%; max-width: 320px; }
.auden-split.is-flipped { grid-template-columns: 340px minmax(0, 1fr); }
.auden-split.is-flipped > :not(.auden-split-media) { grid-column: 2; grid-row: 1; }
.auden-split.is-flipped .auden-split-media { grid-column: 1; grid-row: 1; }

/* ---------- Auden spec list ---------- */
.spec-list { max-width: 780px; border-top: 1px solid var(--line-strong); }
.spec-row { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 6px 28px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.spec-row dt { font: 400 0.74rem/1.6 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.spec-row dd { color: var(--ink-2); font-size: 0.98rem; }
.spec-row dd code { font-family: var(--font-mono); font-size: 0.92em; }
.spec-row dd a { color: var(--accent); font-weight: 600; }
.spec-row dd a:hover { color: var(--accent-dark); }
.auden-note { max-width: 64ch; margin-top: 30px; font-size: 0.88rem; color: var(--muted); }

@media (max-width: 900px) {
  .auden-split, .auden-split.is-flipped { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .auden-split > :not(.auden-split-media),
  .auden-split.is-flipped > :not(.auden-split-media) { grid-column: 1; grid-row: 1; }
  .auden-split .auden-split-media,
  .auden-split.is-flipped .auden-split-media { grid-column: 1; grid-row: 2; max-width: 264px; }
}

@media (max-width: 640px) {
  .auden-stage { padding: 76px 0 68px; }
  /* Three plates at phone width would be 100px wide each and unreadable.
     A snapped rail keeps them at a size where the UI is still legible, and
     the clipped third plate is its own scroll affordance. */
  .device-row {
    display: flex; gap: 16px; margin-top: 48px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px; scrollbar-width: none;
  }
  .device-row::-webkit-scrollbar { display: none; }
  .device-fig { flex: 0 0 64%; scroll-snap-align: center; }
  .device-fig:nth-child(2) { transform: none; }
  .device-cap { margin-top: 14px; }
  .stage-foot { margin-top: 48px; }
  .spec-row { grid-template-columns: 1fr; gap: 3px; padding: 16px 0; }
}

/* ---------- Responsive finishing ---------- */
@media (max-width: 640px) {
  .container { width: min(100% - 40px, var(--maxw)); }
  .nav { height: 72px; }
  .brand { gap: 11px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 0.95rem; }
  .brand-name small { font-size: 0.62rem; letter-spacing: 0.07em; }
  .nav-links { top: 72px; padding-inline: 20px; }

  h1 { font-size: clamp(2.15rem, 10vw, 2.75rem); }
  main h2, .cta-band h2 { font-size: 2rem; }
  .hero { padding: 64px 0 72px; }
  .hero h1 { font-size: clamp(2.85rem, 13.5vw, 3.55rem); max-width: 9.5ch; margin-bottom: 24px; }
  .hero .sub { font-size: 1.04rem; line-height: 1.65; }
  .hero-actions { margin-top: 30px; }
  .hero-actions .btn { flex: 1 1 150px; }
  .hero-foot { margin-top: 34px; gap: 8px 18px; }
  .sheet-stack { padding: 18px 14px 14px 0; }
  .sheet-stack::before { width: 80%; }
  .sheet-back { inset: 30px 2px 2px 12px; }
  .sheet { padding: 28px 24px 24px; }
  .sheet-title { font-size: 1.45rem; }
  .sheet-meta { justify-content: flex-start; }

  .section { padding: 72px 0; }
  .section-tight { padding: 56px 0; }
  .manifesto { padding: 90px 0; }
  .manifesto .lead { font-size: 1.65rem; line-height: 1.38; }
  .sec-head { margin-bottom: 44px; }
  .lane-cell { padding: 34px 0; }
  .work-row { grid-template-columns: 1fr; gap: 8px; }
  .work-tag { margin-top: 6px; }
  .work-desc { grid-column: auto; margin-top: 8px; }
  .studio-note { padding: 38px 30px; margin-left: 6px; margin-top: 6px; }
  .studio-note::before { left: -6px; bottom: -6px; }
  .faq-item summary { align-items: center; }
  .faq-item summary h3 { font-size: 1.15rem; line-height: 1.25; }
  .cta-band { padding: 72px 0; }
  .footer-grid { gap: 40px; }
  .contact-grid form { padding: 28px 22px; }

  .page-head { padding: 64px 0 52px; }
  .page-head h1 { margin: 0 0 18px; font-size: clamp(2.3rem, 9vw, 2.9rem); }
  .page-body { padding-bottom: 72px; }
}

/* ---------- Motion ----------
   Content stays visible without JS; native Web Animations only enhance.
   Cross-page continuity uses the View Transition API; reduced-motion turns it off. */
[data-mask] { overflow: hidden; display: block; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: chhaya-vt-out .22s ease-out both; }
::view-transition-new(root) { animation: chhaya-vt-in .4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes chhaya-vt-out { to { opacity: 0; } }
@keyframes chhaya-vt-in { from { opacity: 0; } }

/* ---------- Reduced motion (interaction states) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .brand-mark .dot,
  .nav-toggle line,
  .theme-toggle .icon-moon,
  .theme-toggle .icon-sun,
  .faq-item summary::after,
  .work-list .work-name,
  .work-row::before,
  .work-name a::after,
  .btn { transition: none; }
  .brand:hover .brand-mark .dot,
  .brand:focus-visible .brand-mark .dot,
  .work-row:hover .work-name,
  .work-row:hover .work-name a::after,
  .btn-solid:hover, .btn-dark:hover, .btn-line:hover { transform: none; }
  .work-row:hover::before { transform: scaleY(1); }
  .work-row:hover .work-name a::after { opacity: 1; }
  .faq-item[open] p,
  .form-msg.show { animation: none; }
}

/* ---------- Architectural studio system ----------
   Broad, calm typography; sculptural material; green fields and open paper.
   Real product imagery remains separate from the decorative brand artwork. */
:root { --maxw: 1408px; --radius-sm: 3px; --forest: #142c22; --forest-ink: #0c261e; }
h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 500; letter-spacing: -.035em; }
.container { width: min(100% - 96px, var(--maxw)); }
.nav { height: 88px; gap: 24px; }
.brand { gap: 12px; }
.brand-name { font-size: 1.35rem; font-weight: 500; letter-spacing: -.04em; }
.brand-mark { width: 37px; height: 37px; }
.nav-links { gap: 14px; }
.nav-links a { font-size: .9rem; }
.theme-toggle { border-radius: 50%; border-color: transparent; }
.nav-cta { gap: 20px; }
.btn { min-height: 54px; padding: 17px 25px; font-weight: 500; gap: 22px; }
.btn-sm { min-height: 44px; padding: 12px 20px; font-size: .875rem; gap: 24px; }
.arrow-icon { width: 22px; height: 22px; display: inline-block; flex: 0 0 auto; vertical-align: middle; transition: transform .25s ease-out; }
a:hover > .arrow-icon { transform: translateX(4px); }
.text-link { display: inline-flex; align-items: center; gap: 24px; padding-block: 10px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: .95rem; font-weight: 500; }
.text-link:hover { color: var(--accent); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.btn-dark:focus-visible { outline-color: var(--orange); }

/* The opening retains its green art direction in either reading theme. */
.studio-home .site-header { background: var(--forest); border-color: #365246; color: #f7f7f4; }
.studio-home .site-header .brand, .studio-home .site-header .nav-links a,
.studio-home .site-header .theme-toggle, .studio-home .site-header .nav-toggle { color: #f7f7f4; }
.studio-home .site-header .brand-mark .cres { fill: none; stroke: #f7f7f4; }
.studio-home .site-header .brand-mark .dot { fill: #cf702e; }
.studio-home .site-header .nav-links a::after { background: #f7f7f4; }
.studio-home .site-header .btn-dark, .btn-orange { background: #b3511c; color: #fff; }
.studio-home .site-header .btn-dark:hover, .btn-orange:hover { background: #954116; color: #fff; }
.studio-home .site-header .theme-toggle:hover, .studio-home .site-header .nav-toggle:hover { background: #24483a; }
.hero.hero-studio { display: block; min-height: 650px; height: min(700px, calc(100svh - 88px)); padding: 0; background: var(--forest); border: 0; overflow: hidden; }
.hero-art { position: absolute; inset: 0 0 72px; overflow: hidden; pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
.hero-content { position: relative; display: flex; flex-direction: column; height: 100%; justify-content: center; }
.hero-copy { padding: 58px 0 92px; position: relative; max-width: 68%; }
.hero.hero-studio h1 { font-size: clamp(3.5rem, 5.45vw, 5.7rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 400; color: #f7f7f4; max-width: none; margin: 0 0 32px; text-wrap: initial; }
.hero-studio h1 span, .hero-studio h1 em { display: block; }
.hero-studio h1 span:first-child { white-space: nowrap; }
.hero-studio h1 em { font-family: var(--font-display); font-weight: 400; font-style: italic; }
.hero-description { max-width: 440px; font-size: 1.075rem; line-height: 1.7; color: #d5dfd6; }
.hero-studio .hero-actions { margin-top: 30px; gap: 30px; align-items: center; }
.hero-story { display: inline-flex; align-items: center; gap: 18px; min-height: 48px; color: #f7f7f4; font-size: .95rem; }
.hero-story:hover { text-decoration: underline; }
.hero-baseline { width: 100%; flex: none; position: absolute; inset: auto 0 0; background: #1b352a; border-top: 1px solid #577565; color: #dfe8df; font: 400 .7rem/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-baseline-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding-block: 20px; }
.hero-baseline a { display: flex; align-items: center; gap: 16px; letter-spacing: .015em; text-transform: none; font-family: var(--font-body); font-size: .86rem; color: #f7f7f4; }
.hero-baseline a:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-baseline .arrow-icon { width: 18px; height: 18px; color: #e29358; }

/* Portfolio: the product is the proof. */
.portfolio-section { padding: 112px 0 104px; }
.portfolio-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; align-items: end; margin-bottom: 58px; }
.portfolio-head h2 { font-size: clamp(2.4rem, 4.1vw, 4rem); line-height: 1.06; }
.portfolio-head p { max-width: 39ch; font-size: 1.075rem; }
.portfolio-head .text-link { margin-top: 18px; }
.featured-product { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; align-items: center; }
.product-media { position: relative; isolation: isolate; background: var(--accent-soft); display: flex; justify-content: center; align-items: flex-end; gap: 28px; padding: 20px 36px 64px; height: 580px; overflow: hidden; border-radius: 0; }
.product-stage-name { position: absolute; z-index: -1; top: 10px; left: 24px; font: italic 400 clamp(5rem, 10vw, 9rem)/1 var(--font-display); color: var(--accent); opacity: .14; letter-spacing: -.04em; }
.product-phone { width: min(43%, 205px); padding: 5px; background: #141715; border-radius: 30px; outline: 1px solid #687a6c55; box-shadow: 0 18px 36px #06140e24; flex: 0 0 auto; transition: transform .5s ease-out; }
.product-phone img { width: 100%; height: auto; border-radius: 25px; }
.phone-library { transform: translateY(18px) rotate(-5deg); }
.phone-playing { transform: translateY(-12px) rotate(5deg); }
.product-media:hover .phone-library { transform: translateY(6px) rotate(-3deg); }
.product-media:hover .phone-playing { transform: translateY(-18px) rotate(3deg); }
.product-title { font: 400 2.5rem/1.1 var(--font-display); letter-spacing: -.03em; margin-bottom: 22px; }
.product-copy .product-headline { font: 500 clamp(2.2rem, 3.2vw, 3.2rem)/1.07 var(--font-body); color: var(--ink); letter-spacing: -.035em; margin-bottom: 24px; }
.product-copy > p:not(.product-headline) { max-width: 40ch; font-size: 1rem; }
.product-facts { margin-top: 27px; color: var(--muted); font-size: .8rem; }
.product-facts li { display: flex; align-items: center; gap: 9px; padding-block: 4px; }
.status-dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; }
.product-copy .text-link { margin-top: 20px; }
.project-index { margin-top: 44px; border-top: 1px solid var(--line-strong); }
.project-entry { display: grid; grid-template-columns: 1fr 1.8fr 1fr 24px; gap: 32px; align-items: center; padding: 32px 4px; border-bottom: 1px solid var(--line-strong); }
.project-name { font-size: 1.65rem; font-weight: 500; letter-spacing: -.035em; }
.project-name { display: flex; align-items: center; gap: 16px; }
.project-symbol { display: inline-flex; flex: 0 0 40px; color: var(--accent); }
.project-symbol svg { width: 40px; height: 40px; }
.project-summary { font-size: 1.03rem; }
.project-summary small { display: block; font-size: .8rem; color: var(--muted); margin-top: 6px; max-width: 49ch; }
.project-status { justify-self: end; font: 400 .69rem/1.5 var(--font-mono); color: var(--muted); }
.project-status.open-source { color: var(--accent); }
.project-entry:hover .project-name { color: var(--accent); }
[data-theme="dark"] .product-phone { outline-color: #536358; box-shadow: 0 18px 36px #00000060; }

/* Philosophy is a distinct, expansive pause in the portfolio. */
.studio-philosophy { background: var(--forest); color: #f7f7f4; padding: 112px 0; border-block: 1px solid #365246; }
.philosophy-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: 90px; align-items: center; }
.philosophy-mark { max-width: 350px; }
.philosophy-mark svg { display: block; width: 100%; stroke: #a2b7a7; stroke-width: 1; }
.philosophy-mark .philosophy-dot { fill: #cf702e; stroke: none; }
.studio-philosophy h2 { color: #f7f7f4; font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 400; line-height: 1.1; }
.philosophy-display { font: italic 400 clamp(2.2rem, 3.7vw, 3.7rem)/1.15 var(--font-display); color: #d2ddc9; letter-spacing: -.03em; margin-top: 10px; }
.philosophy-body { color: #c9d6c9; max-width: 50ch; font-size: 1.075rem; margin-top: 28px; }
.studio-philosophy .text-link { color: #f7f7f4; margin-top: 28px; }
.studio-values { padding: 54px 0; border-bottom: 1px solid var(--line-strong); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.values-grid > div { padding: 8px 44px; border-left: 1px solid var(--line-strong); }
.values-grid > div:first-child { border: 0; padding-left: 0; }
.values-grid > div:last-child { padding-right: 0; }
.values-grid h3 { font-size: 1.35rem; margin-bottom: 12px; }
.values-grid p { font-size: .95rem; max-width: 36ch; }
.values-grid a { text-decoration: underline; }

/* Answers, then a direct conversation. Native controls, open composition. */
.home-faq { padding: 64px 0; }
.home-faq .faq-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.home-faq .sec-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; max-width: none; }
.home-faq .faq-grid .sec-head { margin: 0; }
.home-faq .sec-head h2 { font-size: clamp(2rem, 2.8vw, 2.65rem); line-height: 1.09; margin: 0; }
.home-faq .sec-head p { margin: 0; max-width: 28ch; font-size: .96rem; }
.home-faq .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.home-faq .faq-category { margin: 0 0 12px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.home-faq .faq-item { padding: 0; }
.home-faq .faq-item summary h3 { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.home-faq .faq-item summary { padding: 16px 0; min-height: 56px; align-items: center; }
.home-faq .faq-item p { font-size: .96rem; padding: 0 0 18px; }
.home-contact { padding: 104px 0 112px; border-top: 1px solid var(--line-strong); background: var(--surface); }
.contact-grid { gap: 100px; grid-template-columns: 1fr 1fr; }
.contact-grid h2 { font-size: clamp(2.6rem, 3.8vw, 3.7rem); line-height: 1.1; margin-bottom: 25px; }
.contact-grid > div > p { max-width: 40ch; font-size: 1.05rem; }
.contact-grid form { padding: 0; border: 0; background: transparent; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-grid .contact-meta { margin-top: 32px; border: 0; padding: 0; }
.contact-meta .mono { font-family: var(--font-body); font-size: .875rem; }
.contact-meta li:first-child { font-size: clamp(1.15rem, 1.8vw, 1.6rem); letter-spacing: -.03em; overflow-wrap: anywhere; }
.contact-meta a { color: var(--orange); font-weight: 400; }
.field input, .field textarea { border-color: var(--line-strong); background: transparent; border-radius: 3px; }
.contact-grid form .btn { width: 100%; justify-content: space-between; }
.form-privacy { font-size: .76rem; margin-top: 16px; }
.form-privacy a { text-decoration: underline; }

/* Secondary pages share the same confident scale, with quiet reading columns. */
.page-head { padding: 100px 0 80px; background: var(--forest); border: 0; }
.page-head h1 { color: #f7f7f4; font-weight: 400; font-size: clamp(3rem, 5.6vw, 5.8rem); max-width: 17ch; line-height: 1.03; }
.page-head h1::before { display: none; }
.page-head .sub { color: #d3ddd1; max-width: 58ch; font-size: 1.075rem; }
.page-head .crumbs, .page-head .accent { color: #a8c5ae; }
.page-head .btn-line { color: #f7f7f4; border-color: #688073; }
.page-head .btn-line:hover { background: #214e3b; }
.page-head .btn-solid { background: #b3511c; }
.page-head .mono { color: #c9d6c9; }
.sec-head h2 { font-weight: 500; }
.work-row { grid-template-columns: 1.1fr .85fr .65fr 1.8fr; padding-block: 42px; }
.work-list .work-name { font: 500 2rem/1.1 var(--font-body); }
.work-desc { line-height: 1.75; }
.legal { max-width: 66ch; }
.legal h2 { font-size: 1.4rem; letter-spacing: -.025em; }
.container-prose { max-width: 960px; }
.studio-note { background: var(--forest); }
.studio-note::before { display: none; }
.studio-note p { color: #f7f7f4; }
.studio-note p em { color: #eaa275; }
.cta-band { background: var(--forest); }
.cta-band .btn-line:hover { background: #214e3b; }

.site-footer { background: var(--forest-ink); padding-top: 68px; }
[data-theme="dark"] .site-footer { background: var(--forest-ink); }
.footer-grid { grid-template-columns: 1.7fr .6fr .6fr; padding-bottom: 42px; }
.site-footer .footer-col h2 { text-transform: none; letter-spacing: 0; font-size: .875rem; }
.site-footer .brand-name { font-size: 1.65rem; }
.footer-col a { min-height: 32px; display: inline-flex; align-items: center; }
.footer-col li { margin: 0; }
.footer-word { font: 500 clamp(3rem, 10.25vw, 9.9rem)/1.12 var(--font-body); letter-spacing: -.04em; color: #e4e9db; padding: 20px 0 36px; }
.footer-word .footer-dot { color: #cf702e; }
.footer-bottom { display: block; padding: 24px 0 28px; }
.footer-bottom p { color: #a8b9ac !important; font-size: .75rem; }
.footer-bottom .mono { margin-top: 5px; font-family: var(--font-body); }

@media (max-width: 1100px) {
 .container { width: min(100% - 64px, var(--maxw)); }
 .portfolio-head, .featured-product, .faq-grid, .contact-grid { gap: 52px; }
 .product-media { padding: 16px 24px 56px; height: 530px; gap: 20px; }
 .philosophy-grid { gap: 50px; }
 .hero.hero-studio { height: 690px; }
 .hero.hero-studio h1 { font-size: 5.45vw; }
 .hero-description { max-width: 370px; font-size: 1rem; }
 .project-entry { grid-template-columns: 1fr 1.5fr .85fr 22px; gap: 18px; }
 .nav-links { gap: 0; }
}
@media (max-width: 860px) {
 .nav { height: 76px; }
 .nav-links { top: 76px; }
 .studio-home .site-header .nav-links { background: var(--forest); border-color: #365246; }
 .nav-links { opacity: 1; transform: none; pointer-events: auto; position: static; border: 0; padding: 0; }
 .site-header:not(.nav-ready) .nav { height: auto; min-height: 76px; flex-wrap: wrap; padding-block: 16px; }
 .site-header:not(.nav-ready) .nav-links { width: 100%; order: 3; display: flex; flex-direction: row; justify-content: space-between; }
 .site-header:not(.nav-ready) .nav-toggle { display: none; }
 .nav-ready .nav-links { position: absolute; top: 76px; left: 0; right: 0; padding: 12px 32px 22px; border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; }
 .nav-ready .nav-links.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
 .nav-ready .nav-links a { border-color: var(--line); }
 .hero.hero-studio { min-height: 600px; height: clamp(600px, 78vw, 670px); }
 .hero-copy { max-width: 68%; padding: 44px 0 108px; }
 .hero-description { max-width: 30ch; }
 .hero-art img { object-position: right center; }
 .hero-studio .hero-actions { gap: 12px 22px; }
 .hero-studio .btn { padding-inline: 18px; }
 .hero-story { font-size: .85rem; }
 .hero-baseline a { display: none; }
 .portfolio-head { gap: 36px; }
 .featured-product { gap: 34px; }
 .product-media { height: 470px; gap: 15px; padding: 16px 16px 52px; }
 .product-title { font-size: 2rem; }
 .product-copy .product-headline { font-size: 2.2rem; }
 .project-entry { grid-template-columns: 1fr 1.6fr 22px; }
 .project-status { grid-column: 2; grid-row: auto; justify-self: start; margin-top: -12px; }
 .project-entry > .arrow-icon { grid-column: 3; grid-row: 1; }
 .philosophy-grid { grid-template-columns: .45fr 1fr; gap: 32px; }
 .values-grid > div { padding-inline: 24px; }
 .values-grid h3 { font-size: 1.18rem; }
 .faq-grid { grid-template-columns: 1fr; gap: 16px; }
 .faq-grid .sec-head { margin-bottom: 25px; }
 .contact-grid { grid-template-columns: 1fr; }
 .footer-grid { grid-template-columns: 1.4fr .6fr .6fr; gap: 34px; }
 .work-row { grid-template-columns: 1.2fr 1fr 1fr; }
 .work-desc { grid-column: 1 / -1; max-width: 65ch; }
}
@media (max-width: 600px) {
 .container { width: calc(100% - 40px); }
 .nav { height: 72px; gap: 12px; }
 .brand-mark { width: 30px; height: 30px; }
 .brand-name { font-size: 1.08rem; }
 .brand { gap: 8px; }
 .nav-cta { gap: 4px; }
 .nav-ready .nav-links { top: 72px; padding-inline: 20px; }
 .hero-copy { max-width: 100%; }
 .hero.hero-studio h1 { font-size: clamp(1.8rem, 9.35vw, 3.4rem); line-height: 1.04; margin-bottom: 22px; letter-spacing: -.04em; }
 .hero-description { max-width: 34ch; font-size: .96rem; line-height: 1.65; }
 .hero-art img { opacity: 1; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
 .hero-studio .hero-actions { gap: 22px; margin-top: 23px; }
 .hero-actions .btn { flex: 0 1 auto; }
 .hero-studio .btn { padding: 15px 18px; min-height: 50px; font-size: .85rem; gap: 14px; }
 .hero-story { font-size: .8rem; gap: 8px; }
 .hero-baseline { font-size: .56rem; letter-spacing: .05em; }
 .hero-baseline-inner { min-height: 60px; padding-block: 17px; gap: 8px; }
 .portfolio-section, .home-faq, .home-contact { padding: 68px 0; }
 .portfolio-head, .featured-product { grid-template-columns: 1fr; gap: 26px; }
 .portfolio-head { margin-bottom: 35px; }
 .portfolio-head h2 { font-size: 2.5rem; }
 .portfolio-head p { font-size: 1rem; }
 .portfolio-head .text-link { margin-top: 12px; }
 .product-media { height: 450px; gap: 18px; padding: 16px 16px 48px; }
 .product-phone { width: min(43%, 166px); border-radius: 24px; padding: 4px; }
 .product-phone img { border-radius: 20px; }
 .product-copy { padding: 9px 0 15px; }
 .product-title { font-size: 2.1rem; margin-bottom: 18px; }
 .product-copy .product-headline { font-size: 2.5rem; }
 .product-copy > p:not(.product-headline) { max-width: 37ch; }
 .project-index { margin-top: 27px; }
 .project-entry { grid-template-columns: 1fr 24px; gap: 12px; padding: 25px 0; }
 .project-name { font-size: 1.5rem; }
 .project-summary { grid-row: 2; grid-column: 1; font-size: .98rem; }
 .project-summary small { font-size: .8rem; }
 .project-status { grid-column: 1; grid-row: 3; margin: 0; }
 .project-entry > .arrow-icon { grid-column: 2; grid-row: 1; }
 .studio-philosophy { padding: 62px 0 68px; }
 .philosophy-grid { grid-template-columns: 1fr; gap: 36px; }
 .philosophy-mark { width: 140px; }
 .studio-philosophy h2 { font-size: 2.4rem; }
 .philosophy-display { font-size: 2.35rem; }
 .philosophy-body { font-size: 1rem; margin-top: 22px; }
 .studio-values { padding: 18px 0; }
 .values-grid { grid-template-columns: 1fr; }
 .values-grid > div, .values-grid > div:first-child, .values-grid > div:last-child { padding: 27px 0; border: 0; }
 .values-grid > div + div { border-top: 1px solid var(--line-strong); }
 .values-grid h3 { font-size: 1.3rem; }
 .home-faq { padding: 44px 0; }
 .home-faq .faq-grid { gap: 24px; }
 .home-faq .sec-head { display: block; }
 .home-faq .sec-head h2 { font-size: 2rem; }
 .home-faq .sec-head p { margin-top: 14px; }
 .home-faq .faq-list { grid-template-columns: 1fr; gap: 24px; }
 .home-faq .sec-head p { max-width: none; }
 .contact-grid { gap: 36px; }
 .contact-grid h2 { font-size: 2.5rem; }
 .contact-grid form { padding: 0; }
 .field-row { grid-template-columns: 1fr; gap: 0; }
 .page-head { padding: 68px 0 62px; }
 .page-head h1 { font-size: clamp(2.6rem, 10vw, 3.6rem); }
 .page-head .sub { font-size: 1rem; }
 .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 22px; padding-bottom: 18px; }
 .footer-brand { grid-column: 1 / -1; }
 .footer-col a { padding: 8px 0; min-height: 40px; }
 .footer-word { font-size: 10.2vw; padding: 27px 0; }
 .site-footer { padding-top: 48px; }
 .work-row { grid-template-columns: 1fr; }
 .work-desc { grid-column: auto; }
}
@media (max-width: 480px) {
 .product-media { height: 390px; }
}
@media (max-width: 360px) {
 .product-media { height: 350px; }
}
@media (prefers-reduced-motion: reduce) {
 .arrow-icon, .product-phone { transition: none; }
 .product-media:hover .phone-library { transform: translateY(18px) rotate(-5deg); }
 .product-media:hover .phone-playing { transform: translateY(-12px) rotate(5deg); }
 a:hover > .arrow-icon { transform: none; }
}

/* Quiet camera movement; the copy and baseline never move. */
.hero-motion-toggle { position: absolute; z-index: 2; right: max(24px, calc((100% - 1408px) / 2)); bottom: 88px; min-height: 44px; padding: 10px 14px; border: 1px solid #819487; border-radius: 3px; background: #142c21; color: #e6ece4; font: 400 .7rem/1.4 var(--font-mono); cursor: pointer; }
.hero-motion-toggle[hidden] { display: none; }
.hero-motion-toggle:hover { background: #244535; }
@media (min-width: 1500px) { .hero.hero-studio { height: min(900px, calc(100svh - 88px)); } }
@media (max-width: 860px) { .hero-motion-toggle { bottom: 88px; right: 20px; } }
@media (max-width: 600px) { .hero-motion-toggle { bottom: 76px; } }

/* Only phone widths need a stacked composition; tablet windows retain the artwork beside the copy. */
@media (max-width: 600px) {
 .hero.hero-studio { display: flex; flex-direction: column; height: auto; min-height: 0; }
 .hero-content { order: 0; height: auto; min-height: 0; }
 .hero-copy { padding: 42px 0 30px; }
 .hero-art { position: relative; inset: auto; order: 1; width: 100%; height: clamp(340px, 100vw, 440px); flex: none; }
 .hero-baseline { position: relative; inset: auto; order: 2; }
 .hero-studio .hero-actions { gap: 16px 24px; }
}

@media (min-width: 601px) and (max-width: 700px) { .hero-studio .hero-actions { flex-direction: column; align-items: flex-start; } .hero-studio .hero-actions .btn { flex: none; } }

/* ---------- Motion system ----------
   One authored moment (the hero), one piece of living geometry (the crescent),
   and lists that arrive as lists. Everything else is feedback. Content is
   visible at rest: these CSS entrances end at the resting style and need no
   script, and the scroll reveals in js/main.js only ever hold an element that
   is still below the fold when the page is ready. */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes rise-in { from { transform: translateY(112%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The shadow arrives: the sculpture surfaces out of the forest field while the
   three headline lines rise through ruled masks, the italic last. The masks
   carry a little padding (paid back with a negative margin) so descenders
   are not clipped by the line box. */
.hero-art img { animation: fade-in 1.6s ease-out both; }
/* Flex column so the negative margins do not collapse between lines and the
   line rhythm stays exactly what it was. */
.hero.hero-studio h1 { display: flex; flex-direction: column; align-items: stretch; }
.hero-studio h1 > span, .hero-studio h1 > em { overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.hero-studio h1 .hl { display: block; animation: rise-in 1.15s var(--ease-out) both; }
.hero-studio h1 > :nth-child(1) .hl { animation-delay: .1s; }
.hero-studio h1 > :nth-child(2) .hl { animation-delay: .22s; }
.hero-studio h1 > :nth-child(3) .hl { animation-delay: .34s; }
.hero-description { animation: fade-up 1s var(--ease-out) .58s both; }
.hero-studio .hero-actions { animation: fade-up 1s var(--ease-out) .72s both; }
.hero-baseline-inner { animation: fade-in .9s ease-out .95s both; }
.hero-motion-toggle { animation: fade-in .6s ease-out 1.4s both; }

/* Leaving the hero, the sculpture recedes behind the stationary copy. A
   scroll-driven animation runs entirely on the compositor and simply does not
   exist where the browser lacks it. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 601px) {
    .hero-art { animation: hero-art-recede linear both; animation-timeline: scroll(root); animation-range: 0 720px; }
  }
}
@keyframes hero-art-recede { to { transform: translateY(12%); opacity: .45; } }

/* Inner pages open with the same cadence at a smaller scale. */
.page-head h1 { animation: fade-up .9s var(--ease-out) .05s both; }
.page-head .sub, .page-head .crumbs { animation: fade-up .9s var(--ease-out) .18s both; }
.page-head .hero-actions { animation: fade-up .9s var(--ease-out) .3s both; }

/* The crescent: js/main.js draws the ring and the arc in when they come into
   view, lands the dot, then lets the arc turn slowly, like the hanging piece
   in the hero. The arc lives in its own layer so the turn composites. */
.philosophy-mark { position: relative; }
.philosophy-mark .philosophy-crescent { position: absolute; inset: 0; height: 100%; transform-origin: 50% 50%; }
.philosophy-mark .philosophy-ring { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
.philosophy-mark .philosophy-dot { transform-box: fill-box; transform-origin: center; }
.philosophy-mark.is-alive .philosophy-crescent { animation: crescent-turn 11s ease-in-out infinite alternate; }
.philosophy-mark.is-offscreen .philosophy-crescent { animation-play-state: paused; }
@keyframes crescent-turn { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* Section rules draw from the left; the footer sign-off rises through its rule. */
.sec-rule { transform-origin: left center; }
.footer-word .footer-dot { display: inline-block; transform-origin: center; }

/* Feedback: a project row answers a hover by drawing its own rule in accent
   and letting the name lead the arrow. */
.project-entry { position: relative; }
.project-entry::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.project-entry:hover::after, .project-entry:focus-visible::after { transform: scaleX(1); }
.project-name { transition: transform .4s var(--ease-out), color .18s ease-out; }
.project-entry:hover .project-name { transform: translateX(6px); }
.btn:hover > .arrow-icon { transform: translateX(4px); }
.hero-baseline a:hover > .arrow-icon { transform: translateY(3px); }

/* Switching theme cross-fades every surface for one beat instead of snapping.
   The toggle itself is excluded so its own sun/moon turn keeps its timing. */
.theme-switching :not(.theme-toggle, .theme-toggle *) {
  transition: background-color .4s ease-out, color .4s ease-out, border-color .4s ease-out, fill .4s ease-out, stroke .4s ease-out, box-shadow .4s ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-art img, .hero-studio h1 .hl, .hero-description, .hero-studio .hero-actions,
  .hero-baseline-inner, .hero-motion-toggle,
  .page-head h1, .page-head .sub, .page-head .crumbs, .page-head .hero-actions,
  .philosophy-mark.is-alive .philosophy-crescent { animation: none; }
  .project-entry::after, .project-name { transition: none; }
  .project-entry:hover .project-name { transform: none; }
  .hero-baseline a:hover > .arrow-icon { transform: none; }
  .theme-switching :not(.theme-toggle, .theme-toggle *) { transition: none !important; }
}

/* Work is a visual catalogue, with real imagery where a public capture exists. */
.work-jump { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px; }
.work-jump a { display: inline-flex; min-height: 44px; align-items: center; color: #f7f7f4; border-bottom: 1px solid #688073; font-size: .9rem; }
.work-jump a:hover { border-color: #f7f7f4; }
.work-page .work-row { grid-template-columns: 180px minmax(180px, .85fr) minmax(0, 1.4fr); grid-template-rows: auto auto 1fr; gap: 12px 40px; padding: 40px 0; align-items: start; }
.work-page .work-row::before { display: none; }
.work-page .work-row > * { min-width: 0; }
.work-page .work-name { grid-column: 2; grid-row: 1; padding-top: 14px; }
.work-page .work-tag { grid-column: 2; grid-row: 2; justify-self: start; white-space: normal; line-height: 1.35; max-width: 100%; }
.work-page .work-ver { grid-column: 2; grid-row: 3; }
.work-page .work-desc { grid-column: 3; grid-row: 1 / 4; padding-top: 12px; max-width: 58ch; }
.work-visual { grid-column: 1; grid-row: 1 / 4; width: 180px; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--accent-soft); color: var(--accent); }
.work-visual svg { width: 88px; height: 88px; }
.work-visual-auden { align-items: flex-start; padding: 24px 28px 0; }
.work-visual-auden img { width: 112px; height: auto; border-radius: 16px; border: 4px solid #171a1c; transform: rotate(-6deg); }
.work-visual-cuedora { background: var(--orange-soft); color: var(--orange); }
.work-visual-ai-video-gen { background: var(--forest); color: #c8dacc; }
[data-theme="dark"] .work-visual { border: 1px solid var(--line-strong); }
@media (max-width: 1000px) {
 .work-page .work-row { grid-template-columns: 150px minmax(0, 1fr); gap: 10px 28px; }
 .work-visual { width: 150px; height: 174px; }
 .work-page .work-desc { grid-column: 2; grid-row: 4; padding: 8px 0 0; }
 .work-page .work-name { padding-top: 0; }
 .work-visual-auden { padding-inline: 16px; }
}
@media (max-width: 600px) {
 .work-page .work-row { grid-template-columns: 92px minmax(0, 1fr); gap: 10px 20px; padding-block: 30px; }
 .work-visual { width: 92px; height: 116px; }
 .work-visual svg { width: 60px; height: 60px; }
 .work-visual-auden { padding: 14px 12px 0; }
 .work-visual-auden img { width: 66px; border-width: 2px; border-radius: 10px; }
 .work-page .work-desc { grid-column: 1 / -1; padding-top: 10px; }
 .work-page .work-name { font-size: 1.45rem; }
 .work-page .work-tag { font-size: .68rem; letter-spacing: .04em; }
 .project-symbol { flex-basis: 32px; }
 .project-symbol svg { width: 32px; height: 32px; }
 .project-name { min-width: 0; }
}