/* =====================================================================
   Tanisa Imoto — Personal site
   Restrained contemporary + layered material.
   All text/bg pairings verified for WCAG 2.2 AAA (>=7:1 body / >=4.5:1 large).
   ===================================================================== */

:root {
  /* ---- Color: bridged to design tokens (src/styles/tokens.css) ----
     styles.css keeps its own variable names so every component rule and
     inline style below is untouched; only the DEFINITIONS point at the
     token palette. The ~7 shades tokens.css does not define are derived
     via color-mix toward --color-text, which darkens in light mode and
     lightens in dark mode — so they stay theme-correct with one line.
     Dark mode follows automatically (tokens.css redefines --color-*). */
  --bg:           var(--color-bg);
  --bg-deep:      color-mix(in oklab, var(--color-bg) 88%, var(--color-text));
  --surface:      var(--color-surface);
  --ink:          var(--color-text);
  --ink-soft:     color-mix(in oklab, var(--color-text) 82%, var(--color-text-muted));
  --muted:        var(--color-text-muted);
  --muted-strong: color-mix(in oklab, var(--color-text-muted) 62%, var(--color-text));
  --accent:       var(--color-accent);
  --accent-hover: color-mix(in oklab, var(--color-accent) 82%, var(--color-text));
  --rule:         var(--color-border);
  --rule-strong:  color-mix(in oklab, var(--color-border) 55%, var(--color-text));
  --stripe:       color-mix(in oklab, var(--color-bg) 80%, var(--color-text));
  --focus:        var(--color-focus);
  --selection:    color-mix(in oklab, var(--color-accent) 26%, var(--color-bg));
  --grain-opacity: 0.06;
  --wash-opacity:  0.07;
  --shadow-1: 0 1px 2px rgba(26,31,40,.04), 0 0 0 1px rgba(26,31,40,.04);
  --shadow-2: 0 6px 22px rgba(26,31,40,.07), 0 0 0 1px rgba(26,31,40,.05);

  /* ---- Type ---- */
  /* Font families now come from tokens.css (--font-display/body/mono);
     names match, so usages below resolve unchanged. */

  /* Modular scale (comfortable density) */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);    /* 12.5 - 13.5 */
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.125rem);  /* 16 - 18 */
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw,  1.34rem);   /* 19 - 21 */
  --step-2:  clamp(1.55rem, 1.30rem + 1.2vw,  1.95rem);   /* 25 - 31 */
  --step-3:  clamp(2.10rem, 1.70rem + 2vw,    2.85rem);   /* 34 - 46 */
  --step-4:  clamp(2.80rem, 2.10rem + 3.4vw,  4.10rem);   /* 45 - 66 */
  --step-5:  clamp(3.60rem, 2.40rem + 5.6vw,  6.20rem);   /* 58 - 99 */

  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.25rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;
  --space-7: 5rem;
  --space-8: 7rem;

  --measure: 62ch;
  --container: 1180px;
  --container-narrow: 760px;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;

  --t-quick: 180ms cubic-bezier(.2,.6,.2,1);
  --t-soft:  380ms cubic-bezier(.2,.6,.2,1);
}

/* ---- Compact density ---- */
[data-density="compact"] {
  --step-0:  clamp(0.93rem, 0.90rem + 0.18vw, 1.02rem);
  --step-1:  clamp(1.08rem, 1.02rem + 0.32vw, 1.22rem);
  --step-2:  clamp(1.38rem, 1.20rem + 0.9vw,  1.72rem);
  --step-3:  clamp(1.80rem, 1.50rem + 1.6vw,  2.40rem);
  --step-4:  clamp(2.30rem, 1.80rem + 2.4vw,  3.30rem);
  --step-5:  clamp(2.90rem, 2.10rem + 4vw,    4.80rem);
  --space-3: 1rem;
  --space-4: 1.4rem;
  --space-5: 2rem;
  --space-6: 2.8rem;
  --space-7: 4rem;
  --space-8: 5.5rem;
}

/* ---- Dark theme ----
   Colors are inherited from tokens.css's dark --color-* (via [data-theme="dark"]
   and its prefers-color-scheme fallback); the color-mix shades above flip
   automatically. Only the non-color material overrides live here. */
[data-theme="dark"] {
  --grain-opacity: 0.10;
  --wash-opacity:  0.10;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-2: 0 6px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-soft), color var(--t-soft);
  position: relative;
  overflow-x: hidden;
}

/* Paper-grain layer: fixed, low opacity, decorative — drawn over bg, below
   content. SVG turbulence is rasterized once per repaint, cheap. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  mix-blend-mode: multiply;
}
[data-theme="dark"] body::before { mix-blend-mode: screen; }

main, header, footer { position: relative; z-index: 1; }

::selection { background: var(--selection); color: var(--ink); }
img, svg, video { max-width: 100%; display: block; }

/* =====================================================================
   Typography
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-5); letter-spacing: -0.024em; line-height: 1.02; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.18; }
h4 { font-size: var(--step-1); line-height: 1.3; font-weight: 500; }

/* Display italics are pleasing in Instrument Serif — surface them */
.serif-italic { font-style: italic; }

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 1em; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--accent) 38%, transparent);
  transition: color var(--t-quick), text-decoration-color var(--t-quick);
}
a:hover { text-decoration-color: var(--accent); }

:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--ink);
  color: var(--bg);
  padding: .75rem 1rem;
  border-radius: var(--radius-s);
  font-weight: 500;
  z-index: 100;
  transition: top var(--t-quick);
}
.skip-link:focus { top: 1rem; }

/* =====================================================================
   Signature mark — recurring fingerprint
   A small filled tilted square + satellite dot. Asymmetric on purpose.
   Used: beside the wordmark, as kicker punctuation, in section breaks,
   as kicker glyph on essay cards.
   ===================================================================== */
.mark {
  --mark-size: 14px;
  --mark-color: var(--accent);
  display: inline-block;
  width: var(--mark-size);
  height: var(--mark-size);
  line-height: 0;
  color: var(--mark-color);
  flex: 0 0 auto;
  vertical-align: -0.18em;
}
.mark svg { width: 100%; height: 100%; }
.mark--lg { --mark-size: 22px; }
.mark--xl { --mark-size: 32px; }
.mark--ink { --mark-color: var(--ink); }
.mark--muted { --mark-color: var(--muted-strong); }

/* =====================================================================
   Hand-drawn rule — irregular SVG path, not a CSS border
   ===================================================================== */
.hand-rule {
  display: block;
  width: 100%;
  height: 8px;
  color: var(--rule-strong);
  pointer-events: none;
}
.hand-rule svg { width: 100%; height: 100%; }

.section-break {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--space-5) 0;
}
.section-break .hand-rule:first-child { flex: 1 1 30%; }
.section-break .hand-rule:last-child  { flex: 1 1 70%; }

/* =====================================================================
   Layout
   ===================================================================== */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.narrow    { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }

/* =====================================================================
   Site header / nav
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-soft), background var(--t-soft);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--rule); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
  line-height: 1;
}
.brand:hover { text-decoration: none; }
.brand__initials {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: .12rem;
}
.brand .mark { --mark-size: 12px; margin: 0 .05rem; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: -.005em;
  color: var(--ink);
}

.primary-nav { display: flex; align-items: center; gap: clamp(.6rem, 2.4vw, 1.8rem); }
.primary-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .96rem;
  padding: .4rem .15rem;
  border-bottom: 1px solid transparent;
  transition: color var(--t-quick), border-color var(--t-quick);
}
.primary-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.primary-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.nav-tools { display: inline-flex; align-items: center; gap: .5rem; }
.icon-btn {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick);
}
.icon-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.icon-btn svg { width: 18px; height: 18px; }

.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav-toggle { display: inline-grid; }
  .brand__initials { display: none; } /* keep mark + name on mobile */
  .primary-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3) 1.25rem var(--space-4);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-quick), transform var(--t-quick);
  }
  .primary-nav.is-open {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .primary-nav a { font-size: 1.15rem; padding: .55rem 0; }
}

/* =====================================================================
   Kicker / meta utility
   ===================================================================== */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-bottom: var(--space-3);
}
.kicker .mark { --mark-size: 10px; }
.kicker__sep {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--rule-strong);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  font-weight: 400;
  text-wrap: pretty;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--muted-strong);
  text-transform: uppercase;
}

/* =====================================================================
   Hero — type-led, asymmetric, with single atmospheric image slot
   ===================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--space-6), 9vw, var(--space-8));
}

/* Asymmetric ink-wash: large blurred shape, off-axis, accent-colored.
   The wash is the single textural "moment" of the hero; the rest of the
   page is restrained. */
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -180px;
  width: 720px;
  height: 720px;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  background: radial-gradient(closest-side, var(--accent), transparent 70%);
  opacity: var(--wash-opacity);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

.hero__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 880px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
}
.hero__text { position: relative; }
.hero h1 { max-width: 14ch; }
.hero .lede { margin-top: var(--space-4); }

/* The atmospheric image sits asymmetrically — pushed down on desktop so
   it converses with the headline's baseline rather than centering on it. */
.hero__photo {
  align-self: end;
  margin-top: var(--space-5);
  transform: translateY(0);
}
@media (min-width: 880px) {
  .hero__photo {
    margin-top: 0;
    transform: translateY(2.5rem);
  }
}

.hero__actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* =====================================================================
   Section header (asymmetric — title left, meta right, hand-rule under)
   ===================================================================== */
.section { padding-block: var(--space-7); position: relative; }
.section--top { padding-top: var(--space-7); padding-bottom: var(--space-6); }
.section--lg { padding-block: var(--space-8); }

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.section-title h2 { font-size: var(--step-2); line-height: 1.18; }
.section-title .meta { white-space: nowrap; }
.section-title__rule { margin-bottom: var(--space-5); color: var(--rule-strong); }

/* Currently panel — bracketed by hand-drawn rules above and below */
.currently {
  position: relative;
  padding-block: var(--space-5);
}
.currently__rule-top, .currently__rule-bot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--rule-strong);
}
.currently__rule-top .mark, .currently__rule-bot .mark { --mark-size: 12px; }
.currently__inner {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
}
@media (min-width: 760px) {
  .currently__inner {
    grid-template-columns: 12ch 1fr auto;
    gap: var(--space-5);
  }
}
.currently__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-strong);
  padding-top: .55rem;
}
.currently__body p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.55; max-width: 58ch; }
.currently__year {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted-strong);
  letter-spacing: .08em;
  padding-top: .55rem;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  --pad-y: .85rem;
  --pad-x: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  min-width: 44px;
  padding: var(--pad-y) var(--pad-x);
  font: inherit;
  font-weight: 500;
  font-size: .98rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick), transform var(--t-quick);
}
.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover { background: var(--accent); color: var(--color-accent-contrast); }
[data-theme="dark"] .btn--primary:hover { color: var(--bg); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
.btn .arrow { transition: transform var(--t-quick); }
.btn:hover .arrow { transform: translateX(3px); }

/* =====================================================================
   Work cards — type-led placeholders, not circles/rectangles
   ===================================================================== */
.work-grid { display: grid; gap: var(--space-4); }
@media (min-width: 780px) { .work-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.work-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-soft), border-color var(--t-quick), box-shadow var(--t-soft);
}
.work-card:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-2);
}

/* Type-led media — a tightly-cropped editorial composition, not iconography.
   Each project's media uses display-serif typography on textured paper. */
.work-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-m);
  background: var(--bg-deep);
  margin-bottom: var(--space-4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
}
.work-card__media::before {
  /* paper grain local to the card media */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: .07;
  mix-blend-mode: multiply;
  z-index: 0;
}
[data-theme="dark"] .work-card__media::before { mix-blend-mode: screen; opacity: .12; }
.work-card__media::after {
  /* asymmetric soft accent wash */
  content: "";
  position: absolute;
  right: -30%;
  bottom: -40%;
  width: 80%;
  height: 120%;
  background: radial-gradient(closest-side, var(--accent), transparent 70%);
  opacity: .10;
  filter: blur(28px);
  z-index: 0;
}

.work-card__plate {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 1.25rem;
}
.work-card__monogram {
  align-self: center;
  justify-self: start;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .9;
  color: var(--accent);
  letter-spacing: -.02em;
  font-style: italic;
  text-wrap: balance;
  max-width: 90%;
}
.work-card__monogram--no-italic { font-style: normal; }
.work-card__monogram em {
  color: var(--ink);
  font-style: italic;
}
.work-card__plate-meta {
  justify-self: start;
  align-self: end;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-strong);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.work-card__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-strong);
  display: flex;
  gap: 1.1rem;
  margin-bottom: .55rem;
  flex-wrap: wrap;
}
.work-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.12;
  margin: 0 0 .55rem;
}
.work-card__summary { color: var(--ink-soft); }
.work-card__cta {
  margin-top: auto;
  padding-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .94rem;
  color: var(--accent);
}
.work-card__cta::after { content: "→"; transition: transform var(--t-quick); }
.work-card:hover .work-card__cta::after { transform: translateX(3px); }

/* =====================================================================
   Atmospheric image placeholder (hero + writing featured)
   Restrained — paper grain + soft accent wash + small mono caption.
   Not a circle/rectangle. Reads as "an image will live here."
   ===================================================================== */
.ph {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: end start;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 280px 280px;
  opacity: .10;
  mix-blend-mode: multiply;
  z-index: 0;
}
[data-theme="dark"] .ph::before { mix-blend-mode: screen; opacity: .14; }
.ph::after {
  /* off-axis ink-wash to give the surface depth and asymmetry */
  content: "";
  position: absolute;
  right: -35%;
  top: -35%;
  width: 110%;
  height: 110%;
  background: radial-gradient(closest-side, var(--accent), transparent 70%);
  opacity: .12;
  filter: blur(36px);
  z-index: 0;
}
.ph__label {
  position: relative;
  z-index: 1;
  margin: 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-strong);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  padding: .35rem .55rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  backdrop-filter: blur(4px);
}
.ph__label .mark { --mark-size: 9px; }
.ph--portrait { aspect-ratio: 4/5; }
.ph--wide     { aspect-ratio: 16/9; }
.ph--square   { aspect-ratio: 1/1; }
.ph--hero     { aspect-ratio: 4/5; }

/* =====================================================================
   Case study layout (prose pages)
   ===================================================================== */
.cs-header {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-6);
}
.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-strong);
}
.cs-meta dt { display: block; margin-bottom: .25rem; }
.cs-meta dd {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: .98rem;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: var(--step-3); margin-top: 2.2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8em; font-weight: 500; font-family: var(--font-body); letter-spacing: -.003em; }
.prose blockquote {
  border-left: 2px solid var(--rule-strong);
  padding: .25rem 0 .25rem 1.4rem;
  margin: 1.6em 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 50ch;
}
.prose ul, .prose ol { padding-left: 1.4rem; max-width: var(--measure); }
.prose li + li { margin-top: .4em; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }

.placeholder-note {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted-strong);
  background: var(--surface);
  padding: .15rem .55rem;
  border: 1px dashed var(--rule-strong);
  border-radius: 3px;
  letter-spacing: .04em;
}

/* =====================================================================
   Outcomes (stats strip on case studies)
   ===================================================================== */
.outcomes {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  margin: var(--space-4) 0;
}
@media (min-width: 640px) {
  .outcomes { grid-template-columns: repeat(4, 1fr); }
}
.outcome dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-bottom: .3rem;
}
.outcome dd {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0;
  color: var(--ink);
}

/* =====================================================================
   About
   ===================================================================== */
.about-hero {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 880px) {
  .about-hero { grid-template-columns: 5fr 4fr; gap: var(--space-6); }
}

.values {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 780px) { .values { grid-template-columns: 1fr 1fr 1fr; } }
.value {
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.value .mark {
  --mark-size: 13px;
  position: absolute;
  top: -7px;
  left: 0;
  background: var(--bg);
  padding-right: .5rem;
}
.value h3 {
  font-size: var(--step-1);
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
}
.value p { color: var(--ink-soft); }

/* =====================================================================
   Colophon (about page footer block)
   ===================================================================== */
.colophon {
  margin-top: var(--space-7);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--space-4);
  font-size: .92rem;
  color: var(--ink-soft);
}
@media (min-width: 760px) {
  .colophon { grid-template-columns: 14ch 1fr; gap: var(--space-5); align-items: start; }
}
.colophon__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-strong);
  padding-top: .25rem;
}
.colophon__body { max-width: 60ch; }
.colophon__body p + p { margin-top: .9em; }
.colophon dl {
  display: grid;
  gap: .8rem .5rem;
  grid-template-columns: 14ch 1fr;
  margin: 0 0 1.2em;
  font-size: .92rem;
}
.colophon dl dt {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-strong);
  padding-top: .15rem;
}
.colophon dl dd { margin: 0; color: var(--ink); }
.colophon dl dd em { font-family: var(--font-display); font-style: italic; }

/* =====================================================================
   Writing — journal entries + featured project
   ===================================================================== */
.journal { display: grid; gap: var(--space-2); }
.journal-entry {
  display: grid;
  grid-template-columns: 14ch 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
}
.journal-entry:first-child { border-top: 1px solid var(--rule); }
.journal-entry__date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-strong);
  padding-top: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.journal-entry__date .mark { --mark-size: 10px; }
.journal-entry__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0 0 .6rem;
  line-height: 1.15;
}
.journal-entry__body { color: var(--ink-soft); }

@media (max-width: 640px) {
  .journal-entry { grid-template-columns: 1fr; gap: var(--space-2); }
}

.feature-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-quick), box-shadow var(--t-soft), transform var(--t-soft);
}
.feature-card:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
@media (min-width: 880px) {
  .feature-card { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
}
.feature-card__photo { aspect-ratio: 4/3; }
.feature-card__body { padding: var(--space-2) 0; }
.feature-card__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-strong);
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.08;
  margin: 0 0 .8rem;
}
.feature-card__summary { color: var(--ink-soft); max-width: 50ch; }
.feature-card__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--space-3);
  font-size: .94rem;
  color: var(--accent);
}
.feature-card__cta::after { content: "→"; transition: transform var(--t-quick); }
.feature-card:hover .feature-card__cta::after { transform: translateX(3px); }

/* Phase / stage block (process journal) */
.phases {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
@media (min-width: 760px) { .phases { grid-template-columns: repeat(4, 1fr); } }
.phase {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  padding: var(--space-3);
}
.phase__no {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted-strong);
  letter-spacing: .08em;
}
.phase__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin: .3rem 0 .5rem;
  line-height: 1.18;
}
.phase__status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-top: .6rem;
}
.phase__status::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule-strong);
}
.phase--active .phase__status::before { background: var(--accent); }
.phase--done .phase__status::before { background: var(--ink-soft); }

/* =====================================================================
   Contact form
   ===================================================================== */
.contact-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 880px) { .contact-grid { grid-template-columns: 5fr 6fr; } }

.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: .4rem; }
.field label {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
}
.field .hint { font-size: .85rem; color: var(--muted-strong); }
.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: 1rem;
  padding: .85rem 1rem;
  min-height: 48px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
  width: 100%;
  transition: border-color var(--t-quick), background var(--t-quick);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-soft); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--focus);
}
.field [aria-invalid="true"] {
  border-color: #B33636;
}
[data-theme="dark"] .field [aria-invalid="true"] { border-color: #E48989; }

.field-error {
  font-size: .85rem;
  color: #B33636;
  min-height: 1.1em;
}
[data-theme="dark"] .field-error { color: #E48989; }

.form-status {
  padding: .85rem 1rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: .95rem;
}
.form-status[data-state="success"] {
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
}

.contact-aside {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
}
.contact-aside dl { display: grid; gap: var(--space-3); margin: 0; }
.contact-aside dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.contact-aside dd { margin: .25rem 0 0; }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-5);
  border-top: 1px solid var(--rule);
  font-size: .93rem;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}
.site-footer__inner {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}
@media (min-width: 760px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-5);
  }
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.footer-nav a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-nav a:hover { border-bottom-color: var(--ink-soft); }
.footer-nav .mark { --mark-size: 10px; }
.site-footer .copy {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted-strong);
}

/* =====================================================================
   Tweaks panel
   ===================================================================== */
/* The trigger now lives in the header as an .icon-btn (see .nav-tools);
   no floating-button styles needed. The panel anchors under it, top-right. */
.tweaks-panel {
  position: fixed;
  top: 4.75rem;
  right: max(1.25rem, calc((100vw - var(--container)) / 2));
  z-index: 60;
  width: min(320px, calc(100vw - 2.5rem));
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  padding: var(--space-3);
  display: none;
}
.tweaks-panel.is-open { display: block; }
.tweaks-panel h2 {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 .9rem;
}
.tweak-row { display: grid; gap: .5rem; margin-bottom: 1rem; }
.tweak-row:last-child { margin-bottom: 0; }
.tweak-row__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.seg {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  width: 100%;
}
.seg button {
  flex: 1;
  font: inherit;
  font-size: .85rem;
  padding: .5rem .6rem;
  min-height: 36px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* =====================================================================
   Scroll-fade utility (respects reduced motion)
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms cubic-bezier(.2,.6,.2,1), transform 600ms cubic-bezier(.2,.6,.2,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   Print
   ===================================================================== */
@media print {
  .site-header, .site-footer, .tweaks-toggle, .tweaks-panel { display: none; }
  body::before { display: none; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}