/* The student design (sites with site.json "design": "student"). Direction B, "Patterned"
   (design-studio/studies/student-portfolio): a coloured ground carrying a pattern of our own, an accent and a "pop"
   colour on it, cream in between. Each site picks its palette, pattern and photo frame in the Studio (html[data-…]);
   without a choice it is forest green, the block-print lattice and the scalloped frame.
   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 {
  /* the palette (forest by default; html[data-palette] picks another): the ground of the bands, a line on it for the
     pattern, the accent for actions, a second "pop" colour for small labels, the cream between the bands */
  --ground: #133a34;  --ground-2: #1b4a42;  --ground-3: #0f2e29;  --ground-line: #215850;  --ground-edge: #2b6359;
  --cream: #f6eedd;  --paper: #fffaf0;    --ink: #18211f;      --ink-2: #39443f;  --muted: #56625e;
  --accent: #e8b04b; --accent-d: #b9852c; --accent-50: #f7e3b6; --pop: #c4553a; --pop-l: #e0795c; --soft: #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(--ground);
  /* the pattern on the bands (html[data-pattern]) and the shape behind the photo (html[data-frame]): drawn once as
     masks, coloured by the palette */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M0 36 36 0 72 36 36 72Z' fill='none' stroke='%23000' stroke-width='1.3'/%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' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cg fill='%23000'%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"); --pattern-size: 72px 72px;
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='448' height='448' viewBox='-24 -24 448 448'%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/svg%3E");
  --wave-bottom: 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 0H96V8C80 8 80 24 64 24C48 24 48 8 32 8C16 8 16 24 0 24Z'/%3E%3C/svg%3E");
  --wave-top: 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='M96 48H0V24C16 24 16 40 32 40C48 40 48 24 64 24C80 24 80 40 96 40Z'/%3E%3C/svg%3E");
}
[data-palette="ocean"] { --ground: #10303d; --ground-2: #184252; --ground-3: #0b2430; --ground-line: #1f4b5c; --ground-edge: #2a5d70;
  --cream: #f3f0e8; --paper: #fffdf8; --ink: #14212a; --ink-2: #344550; --muted: #52626c;
  --accent: #f2a65a; --accent-d: #c47a33; --accent-50: #fbe3cb; --pop: #c8434f; --pop-l: #ec6f78; --soft: #8fc7d8; }
[data-palette="terracotta"] { --ground: #4a1f17; --ground-2: #5e2b20; --ground-3: #3a1811; --ground-line: #6b3326; --ground-edge: #7c3f30;
  --cream: #f8efe4; --paper: #fffaf3; --ink: #24150f; --ink-2: #4a3328; --muted: #6e584c;
  --accent: #f4c95d; --accent-d: #c49a2f; --accent-50: #fbecc0; --pop: #1f7f73; --pop-l: #3aa99b; --soft: #9fd3c7; }
[data-palette="charcoal"] { --ground: #1f2124; --ground-2: #2a2d31; --ground-3: #17191b; --ground-line: #33373c; --ground-edge: #41464c;
  --cream: #f2f1ed; --paper: #fffffb; --ink: #17191b; --ink-2: #3b3f44; --muted: #5d6268;
  --accent: #d4f05a; --accent-d: #a3bd2c; --accent-50: #eef8c6; --pop: #d9502f; --pop-l: #ff7a59; --soft: #a9b4bf; }
[data-palette="wine"] { --ground: #4a1525; --ground-2: #5c1d30; --ground-3: #380f1b; --ground-line: #6b2639; --ground-edge: #7d3347;
  --cream: #f7efe6; --paper: #fffaf3; --ink: #22121a; --ink-2: #47303a; --muted: #6b5560;
  --accent: #f0b44c; --accent-d: #c0852a; --accent-50: #fae6c3; --pop: #1f8a76; --pop-l: #3fb39c; --soft: #f2b5b5; }
[data-pattern="dots"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.1' fill='%23000'/%3E%3C/svg%3E"); --pattern-size: 24px 24px; }
[data-pattern="flow"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48' viewBox='0 0 120 48'%3E%3Cpath d='M0 12C15 0 45 0 60 12C75 24 105 24 120 12M0 36C15 24 45 24 60 36C75 48 105 48 120 36' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); --pattern-size: 120px 48px; }
[data-pattern="grid"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M36 0V36H0' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M18 0V36M0 18H36' fill='none' stroke='%23000' stroke-width='0.5'/%3E%3C/svg%3E"); --pattern-size: 36px 36px; }
[data-pattern="chevron"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 18 12 6 24 18 36 6 48 18' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); --pattern-size: 48px 24px; }
[data-pattern="plain"] { --pattern: none; }
[data-frame="blob"] { --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='-20 -20 440 440'%3E%3Cpath d='M327 58c58 42 84 121 70 196s-62 136-138 152-163-14-205-78S8 186 46 120 133 26 205 18s64 0 122 40z'/%3E%3C/svg%3E"); }
[data-frame="hexagon"] { --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='-20 -20 440 440'%3E%3Cpath d='M200 6 370 104V300L200 398 30 300V104Z'/%3E%3C/svg%3E"); }
[data-frame="arch"] { --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='-20 -20 440 440'%3E%3Cpath d='M48 410V196a152 152 0 0 1 304 0v214Z'/%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(--accent); 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(--accent); color: var(--ground); }
.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(--accent); 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(--accent); color: var(--ground); font-weight: 700; text-decoration: none; box-shadow: 0 5px 0 var(--accent-d); white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.go:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--accent-d); }
.draft { margin: 0; padding: 8px var(--pad); background: var(--pop); color: #fff; font-size: .875rem; text-align: center; }

/* ── the header: on the lattice, always ── */
.top { position: sticky; top: 0; z-index: 20; isolation: isolate; background: var(--ground); color: var(--cream); }
/* the pattern on every ground (the header, a stack card, a quote): one overlay in the palette's line colour */
:is(.top, .group, .w-words)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--ground-line); -webkit-mask: var(--pattern) 0 0 / var(--pattern-size) repeat; mask: var(--pattern) 0 0 / var(--pattern-size) repeat; }
.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(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.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(--accent); text-underline-offset: 6px; }
.top .go { padding: 9px 18px; border-radius: 999px; background: var(--cream); color: var(--ground); box-shadow: none; }
.top .go:hover { background: var(--accent); 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: -2; background: var(--ground);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 47px) no-repeat, var(--wave-bottom) 0 100% / 96px 48px repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 47px) no-repeat, var(--wave-bottom) 0 100% / 96px 48px repeat-x; }
/* no pattern: no overlays (a mask of none would show the overlay whole) */
[data-pattern="plain"] :is(.top, .group, .w-words)::before, [data-pattern="plain"] :is(.intro--person, #contact)::after { display: none; }
/* the pattern continues from the header: shifted by the header's 72 px so the tiles join */
.intro--person::after { content: ""; position: absolute; inset: 0 calc(50% - 50vw) 48px; z-index: -1; pointer-events: none; background: var(--ground-line);
  -webkit-mask: var(--pattern) 0 -72px / var(--pattern-size) repeat; mask: var(--pattern) 0 -72px / var(--pattern-size) repeat; }
.intro--person .row { align-items: center; }
.intro-text { grid-column: 1 / 8; }
.greeting { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-weight: 600; letter-spacing: .02em; }
.greeting::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.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(--accent); }
.lede { max-width: 35rem; margin-top: 26px; font-size: 1.1875rem; color: color-mix(in srgb, var(--cream) 84%, transparent); }
.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(--ground-2); border: 1px solid var(--ground-edge); color: var(--cream); }
.socials a:hover { background: var(--cream); color: var(--ground); }
.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(--accent); -webkit-mask: var(--frame) center / contain no-repeat; mask: var(--frame) center / contain no-repeat; }
/* the frames other than the scallop (html[data-frame]) */
[data-frame="blob"] .portrait::before { transform: rotate(-12deg) translate(5%, -2%); }
[data-frame="blob"] .portrait img { inset: 15% 18% 13% 12%; width: 70%; height: 70%; }
[data-frame="blob"] .portrait::after { content: ""; position: absolute; right: 12%; top: 1%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: var(--pop-l); }
[data-frame="hexagon"] .portrait::before { transform: rotate(8deg); }
[data-frame="hexagon"] .portrait img { inset: 12%; width: 76%; height: 76%; border: 0; border-radius: 0; clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
[data-frame="arch"] .portrait::before { transform: translate(5%, 4%); }
[data-frame="arch"] .portrait img { inset: 4% 16% 4% 8%; width: 76%; height: 92%; border-radius: 999px 999px 18px 18px; }
[data-frame="ring"] .portrait::before { -webkit-mask: none; mask: none; background: none; inset: 2%; border: 4px dashed var(--accent); border-radius: 50%; }
[data-frame="ring"] .portrait::after { content: ""; position: absolute; left: 6%; bottom: 10%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
[data-frame="plain"] .portrait::before { display: none; }
[data-frame="plain"] .portrait img { inset: 4%; width: 92%; height: 92%; }
.portrait img { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; object-fit: cover; object-position: 49% 28%; border: 5px solid var(--ground); }
.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(--ground); }
.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(--pop-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(--ground); 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(--accent); }
.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(--pop); }
.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(--ground); }
.ach-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ach-icon .two { stroke: var(--soft); }
.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(--ground); font-size: .875rem; font-weight: 600; text-decoration-color: var(--accent); 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(--ground); color: var(--accent); 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(--accent-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(--ground); font-weight: 600; font-size: .9375rem; text-decoration-color: var(--accent); 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 { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: var(--ground); color: var(--cream); }
.group h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
.group .tags li { background: color-mix(in srgb, var(--cream) 10%, transparent); border-color: color-mix(in srgb, var(--cream) 25%, transparent); 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(--accent); 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(--ground); font: 800 1.25rem var(--head); letter-spacing: -.01em; }
.free { color: var(--pop); }
.spots { display: flex; gap: 5px; margin-top: 8px; } .spots i { width: 12px; height: 12px; border: 2px solid var(--pop); border-radius: 50%; } .spots i.taken { background: var(--pop); }

/* ── 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(--accent-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(--ground); }
.cv::before { display: block; margin: 0 0 12px -24px; padding-left: 24px; color: var(--pop); 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(--accent); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--ground); }
.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(--ground); color: var(--cream); font-weight: 700; text-decoration: none; }
.cv-file::after { content: "↓"; }
.cv-file:hover { background: var(--ground-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(--accent); }
.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(--pop); 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: -2; background: var(--ground);
  -webkit-mask: var(--wave-top) 0 0 / 96px 48px repeat-x, linear-gradient(#000 0 0) 0 47px / 100% calc(100% - 47px) no-repeat;
  mask: var(--wave-top) 0 0 / 96px 48px repeat-x, linear-gradient(#000 0 0) 0 47px / 100% calc(100% - 47px) no-repeat; }
#contact::after { content: ""; position: absolute; inset: 48px calc(50% - 50vw) -1px; z-index: -1; pointer-events: none; background: var(--ground-line);
  -webkit-mask: var(--pattern) 0 0 / var(--pattern-size) repeat; mask: var(--pattern) 0 0 / var(--pattern-size) repeat; }
#contact .head .label { color: var(--accent); }
#contact .head h2 { color: var(--cream); }
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
.contact .serif { color: color-mix(in srgb, var(--cream) 84%, transparent); }
.contact .serif p + p { margin-top: 14px; }
.mail { display: inline-block; margin-top: 28px; color: var(--accent); font: 800 clamp(1.75rem, 3.6vw, 2.75rem) var(--head); letter-spacing: -.03em; text-decoration: none; border-bottom: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.mail:hover { border-bottom-color: var(--accent); }
.contact .then { margin-top: 16px; color: color-mix(in srgb, var(--cream) 75%, transparent); } .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(--ground-2); border: 1px solid var(--ground-edge); }
.elsewhere a { font-weight: 700; text-decoration: none; } .elsewhere a:hover { color: var(--accent); }
.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: color-mix(in srgb, var(--cream) 70%, transparent); font-size: .875rem; }
.foot::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--ground-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(--ground); font-weight: 700; text-decoration-color: var(--accent); 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(--pop); 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(--pop); 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(--ground); 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(--accent); }
.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(--ground); font-weight: 600; text-decoration-color: var(--accent); 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(--accent); }
.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(--accent); box-shadow: 0 0 0 3px var(--accent-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(--ground); color: var(--accent); 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(--accent); }
.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 { position: relative; isolation: isolate; margin: 0; padding: 28px 28px 24px; border-radius: var(--r-lg); background: var(--ground); 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(--accent); font-weight: 600; font-size: .9375rem; }
.w-numbers h3 { margin: 0 0 12px; color: var(--pop); 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(--ground); }
.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(--ground); }
.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(--ground); 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(--accent); }
.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(--accent); outline-offset: 2px; }
.door button { padding: 0 20px; border: 0; border-radius: 12px; background: var(--accent); color: var(--ground); font: 700 1rem var(--sans); cursor: pointer; box-shadow: 0 5px 0 var(--accent-d); white-space: nowrap; }
.door button:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--accent-d); }
.door .note { min-height: 1.5em; margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.door .note[data-tone="bad"] { color: var(--pop); font-weight: 600; }
.door .note[data-tone="good"] { color: var(--ground); 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(--ground); 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; }
}

/* ── features/blog/site/style.css ── */
/* The blog (features/blog), after the design's own CSS. An article's page is the case study's markup, so the design
   styles it; this adds what articles have and case studies don't: code, code blocks and dividers. Built from the
   design's variables (--ground, --ink, --accent…) so it takes any palette; the values after the commas are for
   designs that don't define them. A design can restyle these in its own site.css. */
.content :not(pre) > code { padding: .1em .35em; border-radius: 6px; background: color-mix(in srgb, var(--ink, #1c1c1a) 8%, transparent); color: var(--ink, #1c1c1a); font: .92em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.content > pre { max-width: 46rem; margin-inline: 0; padding: 18px 20px; overflow-x: auto; border-radius: var(--r, 12px); background: var(--ground, #1c1c1a); color: var(--cream, #f4f3ee); font: .9375rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; tab-size: 2; }
.content > pre code { font: inherit; color: inherit; background: none; padding: 0; }
.content > hr { max-width: 42rem; height: 0; margin-block: 48px; border: 0; border-top: 2px dashed color-mix(in srgb, var(--ink, #1c1c1a) 25%, transparent); }
.content s { color: var(--muted, #666); }

/* ── features/contact-form/site/style.css ── */
/* The contact form (features/contact-form), after the design's own CSS: a paper card with an ink edge on the
   Contact band, built from the design's variables (--paper, --ink, --ground…) so it takes any palette; the values
   after the commas are for designs that don't define them. A design can restyle .cf in its own site.css. */
.cf { display: grid; gap: 14px; margin-top: 32px; padding: 24px; border-radius: var(--r-lg, 16px); background: var(--paper, #fff); color: var(--ink, #1c1c1a); border: 2px solid var(--ink, #1c1c1a); box-shadow: 6px 6px 0 var(--ground-3, #000); }
.cf-field { display: grid; gap: 6px; }
.cf-field label { font-weight: 600; font-size: .9375rem; }
.cf-field small { color: var(--muted, #666); font-size: .8125rem; }
.cf input, .cf textarea { width: 100%; padding: 12px 14px; border: 2px solid color-mix(in srgb, var(--ink, #1c1c1a) 22%, transparent); border-radius: 10px; background: #fff; color: var(--ink, #1c1c1a); font: inherit; }
.cf textarea { resize: vertical; min-height: 7.5rem; }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--ground, #1c1c1a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e8b04b) 45%, transparent); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cf .go { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.cf .go:disabled { opacity: .6; cursor: progress; }
.cf-note { color: var(--ink-2, #444); font-size: .9375rem; }
.cf[data-done] .cf-note { color: var(--ground, #1c1c1a); font-weight: 600; }
.cf-sent { display: none; padding: 12px 14px; border-radius: 10px; background: var(--accent-50, #f6e2b5); font-weight: 600; }
.cf-sent:target { display: block; }
#contact .cf :focus-visible { outline-color: var(--ground, #1c1c1a); }