/* Ananya Singh's site (a demo student developer). Direction B, "Patterned" (design-studio/studies/student-portfolio):
   a deep green ground carrying a block-print lattice of our own, mustard and rose on it, cream in between.
   Styles the markup of portfolio-base/site/render.mjs and nothing else.
   One system for every section: the 12-column grid, the same head (a mustard dash, a kicker, a big Bricolage title,
   one line under it), cards with an ink outline and a hard green shadow, and the green bands at the top and bottom
   (the hero and contact) joined to the cream by a wavy edge. */

:root {
  --green: #133a34;  --green-2: #1b4a42;  --green-3: #0f2e29;  --line-g: #215850;
  --cream: #f6eedd;  --paper: #fffaf0;    --ink: #18211f;      --ink-2: #39443f;  --muted: #56625e;
  --mustard: #e8b04b; --mustard-d: #b9852c; --mustard-50: #f7e3b6; --rose: #c4553a; --rose-l: #e0795c; --sage: #9cc3a6;
  --head: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --gap: 24px; --wrap: 1200px; --pad: clamp(20px, 4vw, 40px);
  --section: clamp(84px, 9vw, 128px);
  --r: 14px; --r-lg: 20px;
  --hard: 6px 6px 0 var(--green);
  /* the lattice: four petals in a diamond grid, tone on tone (a 72 px tile, the header's height, so they join) */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23215850' stroke-width='1.3'%3E%3Cpath d='M0 36 36 0 72 36 36 72Z'/%3E%3Cpath d='M36 18c6 6 6 12 0 18-6-6-6-12 0-18zM36 54c6-6 6-12 0-18-6 6-6 12 0 18zM18 36c6-6 12-6 18 0-6 6-12 6-18 0zM54 36c-6-6-12-6-18 0 6 6 12 6 18 0z'/%3E%3C/g%3E%3Cg fill='%23215850'%3E%3Ccircle cx='36' cy='36' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='72' cy='0' r='3'/%3E%3Ccircle cx='0' cy='72' r='3'/%3E%3Ccircle cx='72' cy='72' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --wave-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cpath d='M0 48V24c16 0 16-16 32-16s16 16 32 16 16-16 32-16v40z' fill='%23f6eedd'/%3E%3C/svg%3E");
  --wave-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cpath d='M0 0v24c16 0 16 16 32 16s16-16 32-16 16 16 32 16V0z' fill='%23f6eedd'/%3E%3C/svg%3E");
  --scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 448 448'%3E%3Cg fill='%23e8b04b'%3E%3Ccircle cx='200' cy='200' r='186'/%3E%3Ccircle cx='386.0' cy='200.0' r='30'/%3E%3Ccircle cx='374.8' cy='263.6' r='30'/%3E%3Ccircle cx='342.5' cy='319.6' r='30'/%3E%3Ccircle cx='293.0' cy='361.1' r='30'/%3E%3Ccircle cx='232.3' cy='383.2' r='30'/%3E%3Ccircle cx='167.7' cy='383.2' r='30'/%3E%3Ccircle cx='107.0' cy='361.1' r='30'/%3E%3Ccircle cx='57.5' cy='319.6' r='30'/%3E%3Ccircle cx='25.2' cy='263.6' r='30'/%3E%3Ccircle cx='14.0' cy='200.0' r='30'/%3E%3Ccircle cx='25.2' cy='136.4' r='30'/%3E%3Ccircle cx='57.5' cy='80.4' r='30'/%3E%3Ccircle cx='107.0' cy='38.9' r='30'/%3E%3Ccircle cx='167.7' cy='16.8' r='30'/%3E%3Ccircle cx='232.3' cy='16.8' r='30'/%3E%3Ccircle cx='293.0' cy='38.9' r='30'/%3E%3Ccircle cx='342.5' cy='80.4' r='30'/%3E%3Ccircle cx='374.8' cy='136.4' r='30'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--head); text-wrap: balance; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 12px; z-index: 30; padding: 8px 12px; background: var(--mustard); color: var(--green); }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.spine, .main { grid-column: 1 / -1; min-width: 0; }
.serif { font-size: 1.1875rem; line-height: 1.65; color: var(--ink-2); }
.u { font-weight: 600; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.u:hover { text-decoration-color: currentColor; }
.go { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; background: var(--mustard); color: var(--green); font-weight: 700; text-decoration: none; box-shadow: 0 5px 0 var(--mustard-d); white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.go:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--mustard-d); }
.draft { margin: 0; padding: 8px var(--pad); background: var(--rose); color: #fff; font-size: .875rem; text-align: center; }

/* ── the header: on the lattice, always ── */
.top { position: sticky; top: 0; z-index: 20; background: var(--green) var(--lattice) 0 0 / 72px 72px; color: var(--cream); }
.top .row { align-items: center; height: 72px; }
.who { grid-column: 1 / 6; display: flex; align-items: center; gap: .7rem; }
.who a { display: inline-flex; align-items: center; gap: 10px; font: 700 1.1875rem var(--head); text-decoration: none; }
.who a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 4px rgb(232 176 75 / .25); }
.who span { font-size: .9375rem; opacity: .7; }
.top nav { grid-column: 6 / 13; display: flex; justify-content: flex-end; align-items: center; gap: 28px; font-size: .9375rem; }
.top nav a:not(.go) { text-decoration: none; opacity: .85; } .top nav a:not(.go):hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--mustard); text-underline-offset: 6px; }
.top .go { padding: 9px 18px; border-radius: 999px; background: var(--cream); color: var(--green); box-shadow: none; }
.top .go:hover { background: var(--mustard); transform: none; box-shadow: none; }
.menu { display: none; }

/* ── the hero: the lattice continues from the header; a wavy cream edge at the bottom ── */
.intro--person { position: relative; isolation: isolate; color: var(--cream); padding: 56px 0 140px; }
.intro--person::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--wave-up) 0 100% / 96px 48px repeat-x, var(--green) var(--lattice) 0 0 / 72px 72px; }
.intro--person .row { align-items: center; }
.intro-text { grid-column: 1 / 8; }
.greeting { display: inline-flex; align-items: center; gap: 12px; color: var(--mustard); font-weight: 600; letter-spacing: .02em; }
.greeting::before { content: ""; width: 28px; height: 2px; background: var(--mustard); }
.intro--person h1 { margin-top: 18px; font-size: clamp(2.9rem, 6.2vw, 5.4rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; font-variation-settings: "opsz" 96; }
.intro--person h1 em { font-style: normal; color: var(--mustard); }
.lede { max-width: 35rem; margin-top: 26px; font-size: 1.1875rem; color: rgb(246 238 221 / .84); }
.lede b { color: var(--cream); font-weight: 600; }
.intro .links { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }
.intro .links .u { color: var(--cream); }
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 38px 0 0; padding: 0; list-style: none; }
.socials a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--green-2); border: 1px solid #2b6359; color: var(--cream); }
.socials a:hover { background: var(--cream); color: var(--green); }
.socials svg { width: 20px; height: 20px; }
.ic--fill { fill: currentColor; } .ic--stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.socials .handle { margin-left: 8px; font-size: .9375rem; opacity: .75; }
.portrait { grid-column: 8 / 13; position: relative; justify-self: center; width: min(100%, 430px); aspect-ratio: 1; }
.portrait::before { content: ""; position: absolute; inset: 0; background: var(--scallop) center / contain no-repeat; }
.portrait img { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; object-fit: cover; object-position: 49% 28%; border: 5px solid var(--green); }
.tag { position: absolute; padding: 8px 14px; border-radius: 999px; font: 600 .875rem var(--sans); box-shadow: 0 10px 20px -12px rgb(0 0 0 / .55); white-space: nowrap; }
.tag--status { left: -14px; top: 17%; background: var(--cream); color: var(--green); }
.tag--status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #2f9a5d; vertical-align: 1px; }
.tag--focus { right: -8px; bottom: 15%; background: var(--rose-l); color: #fff; }
.intro .status { display: none; }                          /* the plain intro's line: this design uses the personal one */

/* ── section heads: the same everywhere ── */
.sec { padding-top: var(--section); }
.head { margin-bottom: 40px; }
.head .label { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--green); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.head .label::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--mustard); }
.head h2 { max-width: 16em; font-size: clamp(2.2rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.head .main > p { max-width: 36rem; margin-top: 14px; color: var(--muted); font-size: 1.125rem; }

/* ── achievements: a band right under the hero ── */
#achievements { padding-top: 28px; }
#achievements .head { margin-bottom: 16px; }
#achievements .head .label { display: none; }
#achievements .head h2 { max-width: none; font: 700 .8125rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.achievements { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.achievement { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 22px 24px; }
.achievement + .achievement { border-left: 2px dotted rgb(24 33 31 / .35); }
.ach-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); }
.ach-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--mustard); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ach-icon .two { stroke: var(--sage); }
.ach-title { display: block; font: 700 1.5rem/1.1 var(--head); letter-spacing: -.02em; }
.ach-detail { display: block; margin-top: 2px; color: var(--muted); font-size: .9375rem; }
.ach-proof { display: inline-block; margin-top: 4px; color: var(--green); font-size: .875rem; font-weight: 600; text-decoration-color: var(--mustard); text-underline-offset: 4px; }

/* ── work: cards with an ink outline and a hard green shadow; the first one wide ── */
.index-row { display: none; }
.chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); }
.chapters .chapter { display: flex; flex-direction: column; padding: 12px 12px 26px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--hard); }
.chapter .spine, .chapter .main { display: contents; }
.chapter .spine > *, .chapter .main > :not(.lead) { margin-inline: 14px; }
.chapter .lead { order: 1; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r); border: 2px solid var(--ink); background: var(--cream); }
.chapter .lead img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.chapter .num { order: 2; align-self: flex-start; margin-top: 20px; padding: 2px 10px; border-radius: 999px; background: var(--green); color: var(--mustard); font-weight: 700; font-size: .8125rem; }
.chapter h3 { order: 3; margin-top: 10px; font-size: 1.875rem; font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.chapter .what { order: 4; margin-top: 2px; color: var(--muted); font-weight: 500; }
.chapter .story { order: 5; margin-top: 14px; }
.chapter .story .serif { font-size: 1.0625rem; }
.chapter .result { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--mustard-50); font-size: .9375rem; color: var(--ink-2); }
.chapter .result b { color: var(--ink); font-weight: 700; }
.chapter .facts { order: 6; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding: 0; list-style: none; font-size: .875rem; }
.chapter .facts li span:first-child { color: var(--muted); margin-right: 6px; }
.chapter .facts li span:last-child { font-weight: 600; }
.chapter .built-with { order: 7; margin-top: 16px; }
.chapter .outs, .chapter .spine > .go, .chapter .spine > .ask { order: 8; }
.chapter .outs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chapter .outs a { padding: 8px 14px; border: 2px solid var(--ink); border-radius: 10px; font-weight: 700; font-size: .875rem; text-decoration: none; }
.chapter .outs a:hover { background: var(--ink); color: var(--cream); }
.chapter .spine > .go { align-self: flex-start; margin-top: 14px; padding: 10px 16px; font-size: .9375rem; }
.chapter .spine > .ask { margin-top: 14px; color: var(--green); font-weight: 600; font-size: .9375rem; text-decoration-color: var(--mustard); text-underline-offset: 5px; }
.chapter .pair { display: none; }
.chapters .chapter:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-auto-rows: min-content; column-gap: 32px; padding: 12px 28px 12px 12px; }
.chapters .chapter:first-child > * > * { grid-column: 2; margin-inline: 0; }
.chapters .chapter:first-child .lead { grid-column: 1; grid-row: 1 / span 12; align-self: start; }
.chapters .chapter:first-child .num { justify-self: start; margin-top: 28px; }
.chapters .chapter:first-child h3 { font-size: 2.5rem; }
.chapters .chapter:first-child > .spine > .go, .chapters .chapter:first-child > .spine > .ask { justify-self: start; margin-bottom: 24px; }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.tags li { padding: 4px 10px; border-radius: 8px; background: var(--cream); border: 1px solid #e6d9bd; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }

/* ── stack: four cards ── */
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }
.group { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: var(--green) var(--lattice) 0 0 / 72px 72px; color: var(--cream); }
.group h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--mustard); }
.group .tags li { background: rgb(246 238 221 / .1); border-color: rgb(246 238 221 / .25); color: var(--cream); }
.group .note { margin-top: auto; font-size: .875rem; opacity: .7; }

/* ── services (freelance): three cards with a mustard top ── */
.list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
.list .item { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 2px solid var(--ink); border-top-width: 8px; border-top-color: var(--mustard); border-radius: var(--r-lg); background: var(--paper); }
.list h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.list .item > p:not(.end) { color: var(--ink-2); }
.list .end { margin-top: auto; padding-top: 12px; border-top: 1px dashed #d8c9a6; color: var(--muted); font-size: .9375rem; }
.list .end small { display: block; color: var(--green); font: 800 1.25rem var(--head); letter-spacing: -.01em; }
.free { color: var(--rose); }
.spots { display: flex; gap: 5px; margin-top: 8px; } .spots i { width: 12px; height: 12px; border: 2px solid var(--rose); border-radius: 50%; } .spots i.taken { background: var(--rose); }

/* ── about: the story, then a timeline of work and education ── */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
.about .serif p + p { margin-top: 16px; }
.tools { margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: var(--mustard-50); color: var(--ink-2); font-size: .9375rem; }
.cv { position: relative; margin: 0 0 28px; padding: 0 0 0 24px; list-style: none; border-left: 2px solid var(--green); }
.cv::before { display: block; margin: 0 0 12px -24px; padding-left: 24px; color: var(--rose); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.cv:not(.cv--edu)::before { content: "Experience"; }
.cv--edu::before { content: "Education"; }
.cv li { position: relative; padding: 0 0 18px; color: var(--ink-2); font-size: .9375rem; }
.cv li::before { content: ""; position: absolute; left: -32px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--mustard); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--green); }
.cv li > span { display: block; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.cv b { font: 700 1.0625rem var(--head); color: var(--ink); }
.cv-note { margin-top: 2px; color: var(--muted); }
.cv-file { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: var(--green); color: var(--cream); font-weight: 700; text-decoration: none; }
.cv-file::after { content: "↓"; }
.cv-file:hover { background: var(--green-2); }
.said { position: relative; margin-top: 28px; padding: 26px 24px 22px; border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--hard); }
.said::before { content: "“"; position: absolute; top: -26px; left: 18px; font: 800 4.5rem/1 var(--head); color: var(--mustard); }
.said blockquote { font: 600 1.1875rem/1.45 var(--head); letter-spacing: -.01em; }
.said figcaption { margin-top: 10px; color: var(--muted); font-size: .875rem; }

/* ── writing (if a site switches it on) ── */
.pieces { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.piece a { display: grid; grid-template-columns: 9rem 1fr auto; gap: 4px var(--gap); padding: 18px 0; border-bottom: 1px solid #ddcfae; text-decoration: none; }
.piece-kind { color: var(--rose); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; }
.piece-title { font: 700 1.25rem var(--head); } .piece-where { color: var(--muted); font-size: .875rem; } .piece-note { grid-column: 2; color: var(--muted); }

/* ── contact: the green band again, a wavy edge on top ── */
#contact { position: relative; isolation: isolate; margin-top: var(--section); padding: calc(var(--section) - 8px) 0 64px; color: var(--cream); }
#contact::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw) -1px; z-index: -1; background: var(--wave-down) 0 0 / 96px 48px repeat-x, var(--green) var(--lattice) 0 0 / 72px 72px; }
#contact .head .label { color: var(--mustard); }
#contact .head h2 { color: var(--cream); }
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
.contact .serif { color: rgb(246 238 221 / .84); }
.contact .serif p + p { margin-top: 14px; }
.mail { display: inline-block; margin-top: 28px; color: var(--mustard); font: 800 clamp(1.75rem, 3.6vw, 2.75rem) var(--head); letter-spacing: -.03em; text-decoration: none; border-bottom: 3px solid rgb(232 176 75 / .45); }
.mail:hover { border-bottom-color: var(--mustard); }
.contact .then { margin-top: 16px; color: rgb(246 238 221 / .75); } .contact .then .u { color: var(--cream); }
.elsewhere { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.elsewhere li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; background: var(--green-2); border: 1px solid #2b6359; }
.elsewhere a { font-weight: 700; text-decoration: none; } .elsewhere a:hover { color: var(--mustard); }
.elsewhere span { font-size: .875rem; opacity: .7; }
.clock { margin-top: 18px; font-size: .875rem; opacity: .7; }
#contact :focus-visible { outline-color: var(--cream); }

/* ── footer: on the green, under contact ── */
.foot { position: relative; isolation: isolate; padding: 22px 0 32px; color: rgb(246 238 221 / .7); font-size: .875rem; }
.foot::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--green-3); }
.foot .row > .spine { grid-column: 1 / 7; } .foot .row > .main { grid-column: 7 / 13; display: flex; justify-content: flex-end; gap: 24px; }
.foot a { color: inherit; }

/* ── a case study (/work/<slug>) ── */
.cs { padding-top: clamp(48px, 6vw, 80px); }
.cs-head .label { display: flex; gap: 16px; align-items: baseline; margin-bottom: 16px; font-size: .9375rem; }
.cs-head .back { color: var(--green); font-weight: 700; text-decoration-color: var(--mustard); text-underline-offset: 5px; }
.cs-head .num { color: var(--muted); }
.cs-head h1 { max-width: 18em; font-size: clamp(2.5rem, 5.4vw, 4.4rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.cs-head .serif { max-width: 40rem; margin-top: 20px; }
.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 36px 0 28px; }
.cs-facts div { padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 2px solid var(--ink); }
.cs-facts dt { color: var(--rose); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.cs-facts dd { margin-top: 2px; font-weight: 600; }
.cs .lead { overflow: hidden; border-radius: var(--r-lg); border: 2px solid var(--ink); box-shadow: var(--hard); }
.cs .lead img { width: 100%; height: auto; }
.cs-body { margin-top: 72px; }
.cs-body .toc { grid-column: 1 / 4; position: sticky; top: 100px; align-self: start; }
.cs-body .toc + .content { grid-column: 4 / 13; }
.toc .label { color: var(--rose); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.toc ol { margin: 10px 0 0; padding: 0 0 0 16px; list-style: none; border-left: 2px solid #ddcfae; }
.toc a { display: block; padding: 6px 0; color: var(--muted); font-size: .9375rem; text-decoration: none; }
.toc a:hover, .toc a[aria-current] { color: var(--green); font-weight: 700; }
.toc li { position: relative; } .toc a[aria-current]::before { content: ""; position: absolute; left: -23px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--mustard); }
.content > * + * { margin-top: 22px; }
.content > :is(p, ul, ol, h3, blockquote) { max-width: 42rem; }
.content p, .content li { font-size: 1.125rem; line-height: 1.7; color: var(--ink-2); }
.content li p { margin: 0; }
.content strong, .content b { color: var(--ink); }
.content a { color: var(--green); font-weight: 600; text-decoration-color: var(--mustard); text-underline-offset: 4px; }
.content h2 { margin-top: 64px; font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; scroll-margin-top: 96px; }
.content h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--mustard); }
.content > h2:first-child { margin-top: 0; }
.content h3 { margin-top: 40px; font-size: 1.375rem; font-weight: 800; }
.content ul, .content ol { padding-left: 0; list-style: none; }
.content li { position: relative; padding: 0 0 12px 30px; }
.content ul > li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 12px; height: 12px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 3px var(--mustard-50); }
.content ol { counter-reset: n; } .content ol > li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: var(--mustard); display: grid; place-items: center; font: 700 .75rem var(--sans); }
.content > blockquote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--mustard); }
.content img { width: 100%; height: auto; border-radius: var(--r); }
.content > [data-dg-widget], .content > img { margin-top: 40px; }
.content > [data-dg-widget] + :not(h2) { margin-top: 40px; }
.content > [data-align="center"] { display: block; clear: both; margin-inline: auto; }
.content > [data-align="left"] { float: left; margin: .25em 1.25em .75em 0; }
.content > [data-align="right"] { float: right; margin: .25em 0 .75em 1.25em; }
.content > :is([data-align="left"], [data-align="right"]):not([style*="width"]) { width: 50%; }
.content::after { content: ""; display: table; clear: both; }
.w-words { margin: 0; padding: 28px 28px 24px; border-radius: var(--r-lg); background: var(--green) var(--lattice) 0 0 / 72px 72px; color: var(--cream); max-width: 46rem; }
.w-words blockquote { font: 700 clamp(1.3rem, 2.4vw, 1.75rem)/1.35 var(--head); letter-spacing: -.02em; }
.w-words figcaption { margin-top: 14px; color: var(--mustard); font-weight: 600; font-size: .9375rem; }
.w-numbers h3 { margin: 0 0 12px; color: var(--rose); font: 700 .8125rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.w-numbers__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.w-numbers__row > div { display: grid; align-content: start; padding: 22px; border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--hard); }
.w-numbers strong { font: 800 clamp(2.25rem, 4vw, 3rem)/1 var(--head); letter-spacing: -.04em; color: var(--green); }
.w-numbers span { margin-top: 8px; font-weight: 700; }
.w-numbers small { margin-top: 2px; color: var(--muted); font-size: .875rem; }
.w-photos { display: grid; gap: var(--gap); }
.w-photos[data-n="2"] { grid-template-columns: 1fr 1fr; }
.w-photos figure { margin: 0; }
.w-photos img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 2px solid var(--ink); }
.w-photos[data-n="2"] img { aspect-ratio: 4 / 3; object-fit: cover; }
.w-photos figcaption, .content figcaption { margin-top: 10px; color: var(--muted); font-size: .9375rem; }
.cs-end { margin-top: 56px; }
.cs-end .main { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 20px; border-top: 2px solid var(--ink); }
.cs-next { padding-bottom: var(--section); }
.cs-next .head { margin-bottom: 0; }
.cs-next a { display: block; padding: 28px; border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--hard); text-decoration: none; }
.cs-next h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; }
.cs-next a:hover h2 { color: var(--green); }
.cs-next p { margin-top: 6px; color: var(--muted); }
.page-case .foot, .page-door .foot { margin-top: 0; }

/* ── the door (/studio/door) ── */
.page-door .door { min-height: calc(100svh - 72px); display: grid; align-content: center; padding: 48px 0 10vh; }
.door .row { justify-items: start; }
.door .label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--green); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.door .label::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--mustard); }
.door .main { width: min(100%, 36rem); padding: 32px; border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--hard); }
.door h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.door .serif { margin-top: 12px; font-size: 1.0625rem; }
.door form { margin-top: 24px; display: grid; gap: 8px; }
.door label { font-weight: 600; font-size: .9375rem; }
.door .field { display: flex; gap: 10px; }
.door input { flex: 1; min-width: 0; padding: 13px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 400 1.0625rem var(--sans); }
.door input:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.door button { padding: 0 20px; border: 0; border-radius: 12px; background: var(--mustard); color: var(--green); font: 700 1rem var(--sans); cursor: pointer; box-shadow: 0 5px 0 var(--mustard-d); white-space: nowrap; }
.door button:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--mustard-d); }
.door .note { min-height: 1.5em; margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.door .note[data-tone="bad"] { color: var(--rose); font-weight: 600; }
.door .note[data-tone="good"] { color: var(--green); font-weight: 600; }
.door .forgot { margin-top: 20px; color: var(--muted); font-size: .9375rem; }

@media (max-width: 960px) {
  .who { grid-column: 1 / 9; }
  .top nav { display: none; }
  .page-door .top nav { display: flex; grid-column: 9 / 13; }
  .menu { display: block; grid-column: 9 / 13; justify-self: end; position: relative; }
  .menu summary { list-style: none; cursor: pointer; padding: 8px 16px; border-radius: 999px; background: var(--cream); color: var(--green); font-weight: 700; font-size: .9375rem; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu ul { position: absolute; right: 0; top: 50px; min-width: 230px; margin: 0; padding: 10px; list-style: none; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--hard); }
  .menu a { display: block; padding: 10px 12px; text-decoration: none; font-weight: 600; } .menu a.go { justify-content: center; margin-top: 6px; box-shadow: none; }
  .intro--person { padding: 28px 0 110px; }
  .intro--person .row { row-gap: 32px; }
  .intro-text { grid-column: 1 / -1; }
  .portrait { grid-column: 1 / -1; grid-row: 1; justify-self: start; width: min(64%, 260px); }
  .tag--status { left: auto; right: -64%; top: 34%; } .tag--focus { display: none; }
  .achievement + .achievement { border-left: 0; border-top: 2px dotted rgb(24 33 31 / .35); }
  .chapters { grid-template-columns: minmax(0, 1fr); }
  .chapters .chapter:first-child { display: flex; padding: 12px 12px 26px; }
  .chapters .chapter:first-child > * > * { margin-inline: 14px; }
  .chapters .chapter:first-child .lead { margin-inline: 0; }
  .chapters .chapter:first-child h3 { font-size: 1.875rem; }
  .chapters .chapter:first-child .num { margin-top: 20px; }
  .about, .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cs-body .toc { display: none; } .cs-body .toc + .content { grid-column: 1 / -1; }
  .foot .row > .spine, .foot .row > .main { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .who span { display: none; }
  .socials .handle { flex-basis: 100%; margin: 4px 0 0; }
  .piece a { grid-template-columns: 1fr; } .piece-note { grid-column: 1; }
  .w-photos[data-n="2"] { grid-template-columns: 1fr; }
  .content > [data-align] { float: none; width: auto !important; margin-inline: 0; }
  .door .field { flex-direction: column; } .door button { padding: 13px 20px; }
  .door .main { padding: 24px 20px; }
}