/* Adina Cretu portfolio. Visual Direction approved October 2, 2026.
   Green cover, white pages (October 3): the top of each page and its closing area are ledger green,
   and everything you read sits on white. Ink text, one bordeaux accent, dark green for the corrected version.
   Details and captions are upright serif in sentence case. No italics for labels.
   Monospace is kept for real artifacts only. */
/* Fonts are served from this site (no requests to Google). Licenses: fonts/OFL-*.txt */
@font-face{font-family:'Source Serif 4';src:url('../fonts/source-serif-4.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/source-serif-4-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('../fonts/caveat.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
:root{
  --cover:#DCE5D5; --page:#FFFFFF; --paper:var(--cover); --ink:#1C1A17; --bx:#6E1E2D; --green:#2F4A3A; --line:rgba(28,26,23,.16); --tint:#E7CDD2; --marker:#E9C6CD; --muted:#5B554B;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --measure:41rem; --wide:62rem; --pad:clamp(20px,5vw,44px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}      /* an element marked hidden stays hidden, whatever its other styles say */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:clamp(1.0625rem,.98rem + .4vw,1.1875rem);line-height:1.6;font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--tint)}
a{color:inherit;text-decoration-color:var(--bx);text-decoration-thickness:1.5px;text-underline-offset:.2em}
a:hover{color:var(--bx)}
:focus-visible{outline:2px solid var(--bx);outline-offset:3px;border-radius:2px}
p{margin:0 0 1.1em}
h1,h2,h3{font-weight:600;line-height:1.2;margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--paper);padding:6px 10px;z-index:30}
.skip:focus{left:var(--pad)}
.wrap{max-width:calc(var(--wide) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.col{max-width:var(--measure)}

/* white pages between the green cover and the green closing area */
.pages{--paper:var(--page);background:var(--page)}
.pages > .wrap > .sec:first-child{border-top:0}

/* notes, bylines and captions */
.label,.fig figcaption,.edit figcaption,.tag,.back{font-family:var(--serif);font-style:normal;font-weight:400;font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.45}
.label{margin:0 0 .6rem}
.num,.wnum{font-family:var(--serif);font-weight:400;font-size:.95rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.lock{color:var(--bx)}
.hand{font-family:var(--hand);color:var(--bx);font-weight:600;line-height:1.1}

/* top bar: frosted glass. It stays in place, and the page blurs as it passes underneath.
   Glass is used in two places only: this bar and the loupe on story edits (decided October 3). */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.8);transition:box-shadow .25s ease}
.topbar.is-stuck{box-shadow:0 10px 24px -22px rgba(28,26,23,.75)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.topbar{background:#EEF2EA}}
@media (prefers-reduced-transparency:reduce){.topbar{background:#EEF2EA;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media print{.topbar{position:static}.loupe{display:none}}
.top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;padding:15px 0 13px}
.wm{font-size:1.32rem;text-decoration:none;letter-spacing:.01em}
.wm:hover{color:inherit}
.bar{display:inline-block;width:2px;height:1.05em;background:var(--bx);margin:0 3px;vertical-align:-.16em}
.motion .bar{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.top nav{display:flex;gap:clamp(14px,3vw,28px)}
.top nav a{text-decoration:none;font-size:1rem;padding:2px 0}
.top nav a:hover,.top nav a[aria-current]{text-decoration:underline}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,23vw,270px);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(44px,8vw,104px) 0 clamp(44px,7vw,92px)}
.hero-tag{display:inline-block;font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);margin:0 0 .7rem;transform:rotate(-2deg);transform-origin:left bottom}
.hero-h{font-size:clamp(2.05rem,1.15rem + 4vw,3.75rem);line-height:1.09;font-weight:500;letter-spacing:-.015em;max-width:19ch;margin:0 0 1.4rem}
.hw{font-family:var(--hand);color:var(--bx);font-weight:600;font-size:1.2em;letter-spacing:0;white-space:nowrap;position:relative;line-height:1}
.pen{position:absolute;left:0;bottom:-.14em;width:100%;height:.26em;overflow:visible}
.pen path{fill:none;stroke:var(--bx);stroke-width:2.2;stroke-linecap:round}
.lede{font-size:1.2em;line-height:1.5;max-width:33rem;margin:0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:2rem 0 0}
.btn{display:inline-block;padding:.58em 1.25em;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font-size:inherit;line-height:1.3}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn:hover{border-color:var(--bx);color:var(--bx)}
.btn.primary:hover{background:var(--bx);color:var(--paper)}
.doodle{display:block;width:100%;height:auto}
.dg{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}

/* sections. Type scale: case study titles lead; section headings sit below them. */
.sec{padding:clamp(40px,6.5vw,84px) 0;border-top:1px solid var(--line)}
.h-mid{font-size:clamp(1.25rem,1.1rem + .7vw,1.55rem);font-weight:600;letter-spacing:-.005em;margin:0 0 .5rem}
.more{font-size:1rem}
/* section symbol: a small doodle in front of a heading */
.sym .ico{width:1.9em;height:1.9em;vertical-align:-.58em;margin-right:.4em}

/* selected work: contents-page rows. Title and summary left, details right. */
.work{list-style:none;margin:.6rem 0 0;padding:0}
.work li{display:grid;grid-template-columns:2.8rem minmax(0,1fr) minmax(0,13rem);grid-template-areas:"n t m" ". s .";column-gap:clamp(16px,3vw,44px);align-items:baseline;padding:clamp(22px,3.4vw,36px) 0;border-top:1px solid var(--line)}
.work li:first-child{border-top:0}
.wnum{grid-area:n}
.wtitle{grid-area:t;font-size:clamp(1.5rem,1.1rem + 1.9vw,2.2rem);font-weight:500;line-height:1.14;letter-spacing:-.012em;max-width:23ch}
.wtitle a{text-decoration:none}
.wtitle a:hover{text-decoration:underline;text-decoration-color:var(--bx);color:inherit}
.wmeta{grid-area:m;margin:0;font-size:.95rem;line-height:1.5;color:var(--muted)}
.wmeta span{display:block}
.wmeta .who{color:var(--ink);font-weight:600}
.ico{display:inline-block;width:1.4em;height:1.4em;vertical-align:-.36em;margin-right:.22em}
.wsum{grid-area:s;align-self:start;margin:.8rem 0 0;max-width:var(--measure)}
/* rows without a number (About: teaching) */
.work.plain li{grid-template-columns:minmax(0,1fr) minmax(0,13rem);grid-template-areas:"t m" "s ."}
.work.plain .wtitle{font-size:clamp(1.35rem,1.1rem + 1.2vw,1.75rem)}
.work.plain .wsum p:last-child{margin-bottom:0}
.reviews{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:1.8rem}
.review{margin:0;border-left:2px solid var(--bx);padding:.1rem 0 .1rem 1.1rem}
.review blockquote{margin:0 0 .7rem;font-size:1.08em;line-height:1.5}
.review blockquote p{margin:0}
.review figcaption{font-size:.95rem;color:var(--muted);line-height:1.45}
.review .who{display:block;color:var(--ink);font-weight:600}

/* impact strip */
.sec.contact{border-top:0}
.impact,.contact{display:grid;grid-template-columns:minmax(0,1fr) clamp(130px,17vw,200px);gap:clamp(20px,4vw,56px);align-items:center}
.numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px;margin:1.8rem 0 1.1rem;max-width:var(--measure)}
.numbers div{border-top:1.5px solid var(--ink);padding-top:.5rem}
.numbers dt{font-size:clamp(2rem,1.3rem + 3vw,3.2rem);line-height:1;font-weight:500;letter-spacing:-.02em}
.numbers dd{margin:.4rem 0 0;font-size:.95rem;color:var(--muted);line-height:1.35}

/* bordeaux marker: a highlighter swipe behind one line that must be noticed */
.mark{background:linear-gradient(var(--marker),var(--marker)) no-repeat 0 62%/100% 82%;padding:.12em .4em;margin-left:-.4em;border-radius:.4em .16em .45em .2em;color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.impact-note{margin:1.5rem 0 0;font-size:1rem;line-height:1.5}

/* editor's markup */
/* the "before" text stays readable: ink black with a wavy bordeaux underline, like a proofreader's mark (October 3). No strike-through. */
del{text-decoration:underline wavy var(--bx);text-decoration-thickness:1.5px;text-underline-offset:.3em;text-decoration-skip-ink:none;color:var(--ink)}
ins{text-decoration:none;color:var(--green);font-weight:500}
.spec{font-family:var(--mono);font-size:.86rem;line-height:1.75;margin:0 0 .9rem}
.spec .tag{display:block;margin-bottom:.1rem}
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:start}
.edit{margin:0;border-left:2px solid var(--ink);padding:.2rem 0 .2rem 1.1rem}
.edit figcaption{margin-top:.4rem}
.edit .part + .part{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--line)}
.plabel{font-size:.9rem;font-weight:600;margin:0 0 .35rem;line-height:1.4}

/* loupe: a glass lens the reader can drag anywhere on the page. Over a story edit it magnifies the text. */
.dock-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:2.2rem}
.loupe-dock{flex:none;position:relative;width:132px;height:132px}
.dock-note{position:absolute;top:100%;right:4px;margin-top:.35rem;font-size:1.3rem;white-space:nowrap;transform:rotate(-3deg);transform-origin:right top}
.loupe{position:absolute;left:0;top:0;width:132px;height:132px;border-radius:50%;overflow:hidden;z-index:15;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:rgba(255,255,255,.06);border:1.5px solid rgba(28,26,23,.8);box-shadow:0 18px 30px -18px rgba(28,26,23,.65),0 2px 6px rgba(28,26,23,.12);opacity:0}
.loupe.on{opacity:1}
.loupe.full{background:var(--page)}
.loupe.drag{cursor:grabbing;box-shadow:0 26px 36px -18px rgba(28,26,23,.6),0 3px 8px rgba(28,26,23,.14)}
.loupe::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),inset 10px 12px 20px -12px rgba(255,255,255,.95),inset -12px -14px 24px -14px rgba(47,74,58,.4);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.55),rgba(255,255,255,0) 42%)}
.loupe:not(.full)::after{box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),inset 10px 12px 20px -14px rgba(255,255,255,.8),inset -12px -14px 24px -16px rgba(47,74,58,.3);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.4),rgba(255,255,255,0) 34%)}
.loupe-in{position:absolute;left:0;top:0;transform-origin:0 0;margin:0;padding:0;list-style:none;display:block;pointer-events:none}
@media (max-width:640px){.loupe,.loupe-dock{width:104px;height:104px}.dock-note{font-size:1.15rem}}
.clinks{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:1.25em;margin-top:1.2rem}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding:22px 0 40px;margin-top:clamp(16px,3vw,32px);font-size:.9rem;color:var(--muted)}

/* case study */
.case-head{display:grid;grid-template-columns:minmax(0,1fr) clamp(140px,19vw,220px);gap:clamp(20px,4vw,56px);align-items:end;padding:clamp(32px,6vw,72px) 0 clamp(24px,4vw,40px)}
.back{margin:0 0 1.6rem}
.back a{text-decoration:none}
.back a:hover{text-decoration:underline}
.back a::before{content:"\2190\00a0"}
.case-h{font-size:clamp(2rem,1.2rem + 3.4vw,3.3rem);line-height:1.1;font-weight:500;letter-spacing:-.015em;max-width:20ch;margin:0 0 1.3rem}
.meta{margin:0;padding-bottom:clamp(28px,5vw,52px);max-width:var(--wide)}
.meta div:last-child{border-bottom:1px solid var(--line)}
.meta div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:2px 16px;border-top:1px solid var(--line);padding:.7rem 0}
.meta dt{color:var(--muted)}
.meta dd{margin:0;max-width:var(--measure)}
.prose{padding:clamp(8px,2vw,24px) 0 clamp(3rem,7vw,5rem)}
.prose > :first-child{margin-top:clamp(2rem,5vw,3.2rem)}
.prose > *{max-width:var(--measure)}
.prose > .wide{max-width:var(--wide)}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,1.95rem);font-weight:600;letter-spacing:-.01em;margin:clamp(2.6rem,6vw,4rem) 0 1rem}
.prose h2 .num{display:block;width:max-content;position:relative;margin:0 0 .7rem}
.pen.tick{left:0;bottom:-6px;width:2.1rem;height:7px}
.prose h3{font-size:1.22rem;margin:2.2rem 0 .7rem}
.prose ul{padding-left:1.15em;margin:0 0 1.2em}
.prose li{margin:.45em 0;padding-left:.2em}
.prose li::marker{color:var(--bx)}
.prose strong{font-weight:600}

.fig{margin:clamp(2rem,5vw,3.2rem) 0}
/* captions carry no rule of their own: most figures already end with a line or a box edge */
.fig figcaption{margin-top:1.1rem}

/* figure 1: flow */
.flow ol{list-style:none;margin:0;padding:0}
.flow li{position:relative;display:grid;grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);gap:2px 20px;padding:0 0 1.25rem 2.1rem;margin:0}
.flow li::before{content:"";position:absolute;left:.3rem;top:.42rem;width:.72rem;height:.72rem;border:1.6px solid var(--ink);border-radius:50%;background:var(--paper);z-index:1}
.flow li::after{content:"";position:absolute;left:calc(.3rem + .36rem - .8px);top:.42rem;bottom:-.42rem;width:1.6px;background:var(--ink)}
.flow li:last-child{padding-bottom:0}
.flow li:last-child::after{display:none}
.flow .k{font-weight:600}
.flow .gate::before{border-color:var(--bx);background:var(--bx);border-radius:1px;transform:rotate(45deg)}
.flow .gate .k{color:var(--bx)}
.flow .note{position:absolute;left:calc(100% + 3.2rem);top:1.1rem;font-size:1.7rem;transform:rotate(-5deg);white-space:nowrap}
.flow .note::before{content:"";position:absolute;left:-2.6rem;top:.1rem;width:1.6rem;height:3.4rem;border:1.6px solid var(--bx);border-left:0;border-radius:0 .7rem .7rem 0}

/* figure 2: catches (rows, no cards) */
.catches ol{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.catches li{display:grid;grid-template-columns:10.5rem minmax(0,1fr) minmax(0,1.15fr);gap:8px 28px;padding:1.2rem 0;border-bottom:1px solid var(--line);margin:0}
.catches .label{margin:0;color:var(--ink);font-style:normal;font-weight:600;font-size:1rem}
.catches .why p{font-size:.92em;line-height:1.5;margin:0 0 .5em}
.catches .why b{font-weight:600}
.catches .spec:last-child{margin-bottom:0}

/* Skouta: source severity scales next to Skouta's three levels */
.sev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 4rem minmax(0,1.05fr);gap:clamp(12px,2.2vw,26px);align-items:start}
.prose .stack{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:6px}
.prose .stack li{border:1.5px solid var(--ink);border-radius:6px;padding:.42rem .7rem;margin:0;font-family:var(--mono);font-size:.84rem;line-height:1.4;min-height:2.15rem}
.prose .stack li.blank{border:1.5px dashed var(--muted)}
.prose .stack li.cut{border:1.5px dashed var(--bx);color:var(--bx)}
.prose .stack.out li{font-family:var(--serif);font-size:1rem;font-weight:600;border-width:2px}
.sev .label{margin:0;white-space:nowrap}
.sev-title{margin:0;font-size:1rem;font-weight:600;line-height:1.35;padding-bottom:.45rem;border-bottom:1.5px solid var(--ink);align-self:end}
.sev-title-src{grid-column:1 / 5;grid-row:1}
.sev-title-out{grid-column:6;grid-row:1}
.sev-src,.sev-out,.sev-arrow{grid-row:2}
.sev-note{margin:.6rem 0 0;font-size:.9rem;line-height:1.35;color:var(--muted)}
.sev-note.hand{font-size:1.3rem;line-height:1.1;color:var(--bx);transform:rotate(-2deg);transform-origin:left top}
.sev-arrow{align-self:start;padding-top:3.5rem}
.sev-arrow svg{display:block;width:100%;height:auto;overflow:visible}
.sev-arrow path{fill:none;stroke:var(--bx);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Skouta: one real alert, with the strings named next to it */
.shot-grid{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.shot img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line)}
.callouts{margin:0}
.callouts div{padding:.75rem 0;border-top:1px solid var(--line)}
.callouts div:first-child{border-top:1.5px solid var(--ink)}
.callouts div:last-child{border-bottom:1px solid var(--line)}
.callouts dt{font-family:var(--mono);font-size:.9rem;font-weight:500}
.callouts dd{margin:.15rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.45}

/* Skouta: glossary terms */
.gloss table{border-collapse:collapse;width:100%;border-top:1.5px solid var(--ink)}
.gloss th{text-align:left;font-weight:600;font-size:.95rem;padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--line);width:50%}
.gloss td{font-family:var(--mono);font-size:.88rem;line-height:1.5;padding:.55rem 1rem .55rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.gloss td:last-child{color:var(--green);font-weight:500}

/* design system: the global file and a component file */
.filepair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,9.5rem) minmax(0,1fr);gap:clamp(14px,2.6vw,32px);align-items:center}
.file{align-self:stretch;border:1.5px solid var(--ink);border-radius:8px;padding:1.1rem 1.2rem 1.2rem}
.fname{font-family:var(--mono);font-weight:600;font-size:.95rem;margin:0 0 .3rem}
.file .label{margin:0}
.prose .file ul{list-style:none;padding:0;margin:.9rem 0 0;font-family:var(--mono);font-size:.84rem;line-height:1.5}
.prose .file li{padding:.4rem 0;margin:0;border-top:1px solid var(--line)}
.wins{font-size:1.55rem;text-align:center;margin:0;transform:rotate(-3deg)}

/* design system: one prompt at three stages */
.stages .spec{margin-bottom:.6rem}
.stages .spec.btns{color:var(--muted)}

/* figure 3: retry states */
.dialogs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,36px)}
.dialog{border:1.5px solid var(--ink);border-radius:8px;padding:1.2rem 1.25rem 1.3rem;font-family:var(--mono);height:calc(100% - 2rem);display:flex;flex-direction:column;align-items:flex-start}
.dialog .dt{font-weight:600;font-size:.98rem;margin:0 0 .5rem}
.dialog .db{font-size:.86rem;line-height:1.55;margin:0 0 1.2rem;flex:1}
.dbtn{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:.35em 1em;font-size:.82rem}
.retry .note{font-size:1.6rem;margin:1.3rem 0 .2rem;transform:rotate(-2deg);transform-origin:left}
.fnotes{font-family:var(--mono);font-size:.78rem;line-height:1.6;white-space:pre-wrap;margin:1rem 0 0;border-left:2px solid var(--ink);padding:.1rem 0 .1rem 1rem;color:var(--ink)}

.planned{border:1.5px dashed var(--muted);border-radius:6px;padding:1rem 1.2rem}
.planned p{margin:0}
.planned .label{margin-bottom:.3rem}

/* About: the story, one edit per row. Specimen left, what changed right. */
.page-head{align-items:center;padding-bottom:clamp(36px,6vw,64px)}
.page-head .lede{max-width:36rem}
.edits{list-style:none;margin:1.4rem 0 0;padding:0}
.edits li{display:grid;grid-template-columns:2.8rem minmax(0,1fr) minmax(0,1fr);grid-template-areas:"n h h" ". e e" ". t t";column-gap:clamp(16px,3vw,44px);row-gap:.7rem;align-items:start;padding:clamp(22px,3.4vw,36px) 0;border-top:1px solid var(--line)}
.edits li.todo{grid-template-areas:"n h h" ". p p"}
.edits .wnum{grid-area:n}
.ewhere{grid-area:h;font-size:1.15rem;font-weight:400;color:var(--muted);line-height:1.4}
.ewhere .who{color:var(--ink);font-weight:600}
.edits .edit{grid-area:e}
.edits .spec{font-size:.95rem}
.enote{grid-area:t;margin:.2rem 0 0;max-width:var(--measure)}
/* one row of "before" texts and one row of "after" texts per entry. A column per part, when there are several. */
.cmp-grid{display:grid;grid-template-columns:fit-content(8.5rem) var(--cols);column-gap:clamp(14px,2.4vw,32px);row-gap:.55rem;align-items:start}
.cmp-grid .spec{margin:0}
.cmp-grid .tag.cmp-row{margin:0;padding-top:.12rem;font-family:var(--serif)}
.cmp-grid .cmp-head{margin:0;font-size:.9rem}
.cmp-grid .cmp-m{display:none}
.cmp-grid .cmp-added{display:inline;font-family:var(--serif)}
.cmp-grid .cmp-none{margin:0;font-family:var(--serif);font-size:.9rem;line-height:1.45;color:var(--muted);padding-top:.12rem}
.edit.cmp figcaption{margin-top:.7rem}
.edits .planned{grid-area:p;max-width:var(--measure)}
.edits li.todo:not(:has(.ewhere)) .planned{grid-row:1;grid-column:2 / -1}
.facts{padding-bottom:0;margin-top:1.2rem}
.facts div:first-child{border-top:1.5px solid var(--ink)}

/* a download button inside a "Where I work" row */
.row-btn{display:table;margin:.8rem 0 .3rem;padding:.5em 1.15em .5em .9em}
.row-btn .ico{width:1.5em;height:1.5em;vertical-align:-.4em;margin-right:.35em}

/* Notes: article pages */
.note-date{margin:1.2rem 0 0}
.article h2{margin-top:clamp(2.2rem,5vw,3.2rem)}
.prose blockquote{margin:1.8rem 0;padding:.1rem 0 .1rem 1.2rem;border-left:2px solid var(--bx);font-size:1.12em;line-height:1.5}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
.prose code{font-family:var(--mono);font-size:.88em}
.prose pre code{font-size:1em}
.prose pre{font-family:var(--mono);font-size:.86rem;line-height:1.6;white-space:pre-wrap;border-left:2px solid var(--ink);padding:.2rem 0 .2rem 1.1rem;margin:1.6rem 0}
.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose .edit{margin:1.8rem 0}
.note-end{padding:clamp(2rem,5vw,3.2rem) 0 clamp(1rem,3vw,2rem)}
.note-end .clinks{margin-top:0}

/* Notes */
.empty{margin:0;color:var(--muted);font-size:1.15rem}
.notes-end{padding-top:clamp(28px,5vw,56px);display:block}
.notes-end .clinks{margin-top:0}

.locked-note{padding-top:clamp(1.5rem,4vw,2.5rem)}
.locked-note p:first-child{font-size:1.15em}
.unlock{max-width:22rem;margin:1.4rem 0 0}
.unlock .field{margin-bottom:1.1rem}

/* next case study, with its doodle */
.next{display:grid;grid-template-columns:minmax(0,1fr) clamp(110px,15vw,170px);gap:clamp(16px,4vw,48px);align-items:center;padding:clamp(2rem,5vw,3.2rem) 0 clamp(1rem,3vw,2rem)}
.next-t{font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);line-height:1.2;font-weight:500;max-width:24ch;margin:0 0 1rem}
.next-t a{text-decoration:none}
.next-t a:hover{text-decoration:underline;text-decoration-color:var(--bx);color:inherit}
.next p:last-child{margin-bottom:0}

/* ink line that follows the reader's scroll, at every width */
.inkline{display:none}
.motion .inkline{display:block;position:fixed;top:0;bottom:0;left:max(6px,calc((100vw - var(--wide))/2 - var(--pad) - 10px));width:3px;pointer-events:none;z-index:5}
.inkline span{display:block;height:100%;background:var(--bx);border-radius:0 0 3px 3px;transform-origin:top;transform:scaleY(.03)}

/* contact form */
.contact-page{display:grid;grid-template-columns:minmax(0,34rem) clamp(140px,19vw,220px);justify-content:space-between;gap:clamp(20px,4vw,56px);align-items:start;padding:clamp(32px,6vw,72px) 0 clamp(24px,4vw,40px)}
.contact-page .lede{margin-bottom:2rem}
.field{margin:0 0 1.4rem}
.field label{display:block;font-weight:600;margin:0 0 .35rem}
.field .hint{display:block;font-size:.9rem;color:var(--muted);margin:0 0 .4rem}
.field input,.field textarea{display:block;width:100%;font:inherit;color:var(--ink);background:#FFFFFF;border:1.5px solid var(--ink);border-radius:4px;padding:.6rem .75rem;line-height:1.45}
.field textarea{min-height:10rem;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--bx);outline-offset:2px}
.field [aria-invalid="true"]{border-color:var(--bx);border-width:2px}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .35rem}
.label-row label{margin:0}
.field .count{font-size:.9rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.field .count.over{color:var(--bx);font-weight:600}
.field .err{display:block;color:var(--bx);font-weight:600;font-size:.95rem;margin:.4rem 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.btn{font-family:inherit;font-size:1em;cursor:pointer;background:none;color:var(--ink)}
button.btn.primary{background:var(--ink);color:var(--paper)}
button.btn[disabled]{opacity:.6;cursor:default}
.form-status{margin:1.2rem 0 0;padding:.1rem 0 .1rem .9rem;border-left:3px solid var(--ink);font-weight:600}
.form-status.ok{border-color:var(--green);color:var(--green)}
.form-status.bad{border-color:var(--bx);color:var(--bx)}
.form-req{font-size:.95rem;color:var(--muted);margin:0 0 1.2rem}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.form-privacy{font-size:.9rem;color:var(--muted);margin:0 0 .7rem;max-width:30rem}
.field.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .65rem;align-items:start;margin-bottom:1.6rem}
.field.check input{width:1.2rem;height:1.2rem;margin:.28rem 0 0;padding:0;accent-color:var(--bx)}
.field.check label{font-weight:400;margin:0}
.field.check .err{grid-column:2;margin-top:.1rem}
.form-debug{margin:.8rem 0 0;font-family:var(--mono);font-size:.78rem;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.form-alt{margin:2rem 0 0;color:var(--muted)}

/* stub pages */
.stub{padding:clamp(40px,8vw,96px) 0;max-width:var(--measure)}
.stub-doodle{width:clamp(150px,22vw,220px);margin-bottom:1.6rem}
.stub .lede{margin-bottom:1.4rem}

/* motion: pen marks and doodles draw once, then rest */
.motion [data-draw].doodle:not(.is-drawn) .dg,
.motion .pen[data-draw]:not(.is-drawn) path{stroke-dasharray:1 2;stroke-dashoffset:1.05}
.motion .doodle.is-drawn .dg{stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset .42s ease-out;transition-delay:calc(var(--i) * .1s)}
.motion .pen.is-drawn path{stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset .6s ease-out .25s}
.motion .hero-doodle .doodle.is-drawn{animation:wobble 1.1s ease-in-out 1.5s 1;transform-origin:50% 60%}
@keyframes wobble{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}65%{transform:rotate(2.2deg)}}

/* in the story, each edit appears as it scrolls into view: the underline appears, then the new text arrives */
.motion .mark[data-draw]:not(.is-drawn){background-size:0 82%}
.motion .mark.is-drawn{transition:background-size .6s ease-out .2s}
.motion .edit[data-draw] del{text-decoration-color:transparent}
.motion .edit[data-draw].is-drawn del{text-decoration-color:var(--bx);transition:text-decoration-color .5s ease-out .15s}
.motion .edit[data-draw] ins{opacity:0}
.motion .edit[data-draw].is-drawn ins{opacity:1;transition:opacity .45s ease-out .6s}

/* tablet and mobile */
@media (max-width:1240px){
  .flow .note{position:static;display:block;grid-column:1 / -1;transform:rotate(-2deg);transform-origin:left;margin-top:.35rem;font-size:1.5rem}
  .flow .note::before{display:none}
}
@media (max-width:820px){
  .catches li{grid-template-columns:1fr;gap:6px}
  .sev-grid{grid-template-columns:repeat(4,minmax(0,1fr)) 2.6rem minmax(0,1.05fr);gap:10px}
  .filepair{grid-template-columns:1fr}
  .wins{transform:rotate(-2deg);text-align:left}
  .catches .label{margin-bottom:.3rem}
  .story{grid-template-columns:1fr}
  /* work rows fold into a byline under the title */
  .work li{grid-template-columns:2.3rem minmax(0,1fr);grid-template-areas:"n t" ". m" ". s"}
  .wmeta{margin-top:.45rem}
  .wmeta .who,.wmeta .yr{display:inline}
  .wmeta .yr::before{content:", "}
  .wsum{margin-top:.6rem}
  .work.plain li{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "m" "s"}
  .reviews{grid-template-columns:1fr}
  .edits li,.edits li.todo{grid-template-columns:2.3rem minmax(0,1fr);grid-template-areas:"n h" ". e" ". t"}
  /* narrow screens: the "before" texts as one group, then the "after" texts */
  .cmp-grid{grid-template-columns:minmax(0,1fr);row-gap:.35rem}
  .cmp-grid .cmp-head,.cmp-grid .cmp-corner{display:none}
  .cmp-grid .cmp-m{display:block;font-family:var(--serif);font-size:.85rem;font-weight:600;margin:.3rem 0 0}
  .cmp-grid .tag.cmp-row{font-weight:600;color:var(--ink)}
  .cmp-grid .tag.cmp-after{margin-top:.5rem;padding-top:.6rem;border-top:1px dashed var(--line)}
  .edits li.todo{grid-template-areas:"n h" ". p"}
  .edits li.todo:not(:has(.ewhere)) .planned{grid-column:2}
}
@media (max-width:640px){
  .hero{grid-template-columns:1fr}
  .hero-doodle{width:150px;justify-self:end;margin-top:-8px}
  .case-head{grid-template-columns:1fr;align-items:start}
  .case-doodle{width:130px;order:-1}
  .impact,.contact,.contact-page{grid-template-columns:1fr}
  .contact-page .case-doodle{order:-1}
  .field-row{grid-template-columns:1fr}
  .side-doodle{width:130px;justify-self:end}
  .meta div{grid-template-columns:1fr}
  .flow li{grid-template-columns:1fr}
  .shot-grid{grid-template-columns:1fr}
  .callouts div:first-child{border-top:0}
  .shot img{max-width:17rem}
  .sev-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.2rem}
  .sev-title-src,.sev-title-out,.sev-out{grid-column:1 / -1;grid-row:auto}
  .sev-src{grid-row:auto}
  .sev-arrow{grid-column:1 / -1;grid-row:auto;justify-self:center;width:3.2rem;padding:0;transform:rotate(90deg);margin:.4rem 0}
  .prose .stack li{padding:.35rem .45rem;font-size:.78rem}
  .dialogs{grid-template-columns:1fr}
  .dialog{height:auto}
  .numbers{gap:10px 14px}
  .next{grid-template-columns:minmax(0,1fr) 96px}
}

/* Analytics note: shown only when Google Analytics is switched on, until the visitor chooses. It sits at the bottom right,
   like a card left on the desk: cookie doodle, the site's serif, pill buttons. Both buttons weigh the same. */
.cookie-note{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:60;width:min(23rem,calc(100vw - 32px));display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;row-gap:.85rem;align-items:start;background:var(--page);border:1.5px solid var(--ink);border-radius:12px;padding:1rem 1.1rem 1.1rem;box-shadow:0 2px 0 var(--ink),0 14px 34px rgba(28,26,23,.16);font-size:.95rem;line-height:1.5}
.cookie-note .ico{width:2.9rem;height:2.9rem;margin:-.1rem 0 0 -.15rem;transform:rotate(-8deg)}
.cookie-note p{margin:0}
.cookie-note p a{white-space:nowrap}
.cookie-btns{grid-column:1 / -1;display:flex;gap:.6rem}
.cookie-btns .btn{flex:1 1 0;text-align:center;padding:.5em 1em}
.motion .cookie-note:not([hidden]){animation:note-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes note-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.linklike{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.18em}
.linklike:hover{color:var(--bx)}