/* ===========================================================================
   elfayad.me shared components, built on tokens.css. tools/check_tokens.py
   fails on any literal colour, type size, spacing, line-height or
   letter-spacing, an off-ladder breakpoint, or tracked caps.

   The system. Every page opens on a deep cover and closes on a deep footer:
   two covers around white paper. The deep ground also carries the evidence,
   the disclosure record and every real screenshot. Titles are set in ink,
   teal is for what you can act on and small accents. Hairlines only where
   the content is a list, a table or a set of facts.

   Page-specific sheets: plate.css (the flame plate, the record, the homepage
   sections) and article.css (long-form reading). This file is what every
   page needs.
   =========================================================================== */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* the page sits on the deep ground, so pulling past either end on a phone shows
   the cover colour rather than a white strip */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--anchor);background:var(--deep);
  -webkit-tap-highlight-color:var(--tap)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-200);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);color:var(--ink);
  font-weight:700;letter-spacing:var(--ls-snug);line-height:var(--lh-snug);text-wrap:balance}
p,ul,ol,dl,dd,figure,table{margin:0}
::selection{background:var(--bright-2);color:var(--deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-1)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--on-navy);
  padding:var(--s-3) var(--s-5);z-index:200;font-weight:600}
.skip:focus{left:var(--s-2);top:var(--s-2);border-radius:var(--r-1)}
.shell,.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
/* one rhythm: every section takes its space at the top, the page closes once */
main>section{padding-block-start:var(--band)}
main{padding-block-end:var(--band)}
main.main-flush{padding-block-end:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* phones: a jump down the page sends the bar away (site.js), so the heading needs only a little air */
@media(max-width:900px){html{scroll-padding-top:var(--s-6)}}

/* ---------- shared type ---------- */
.h2{font-size:var(--t-600);line-height:var(--lh-head);max-width:16em}
.sec{margin-bottom:var(--s-7)}
.sec-sub,.lede{color:var(--sub);max-width:60ch;line-height:var(--lh-prose)}
.sec-sub{margin-top:var(--s-3)}
.lede{font-size:var(--t-300);margin-top:var(--s-5)}
.dim{color:var(--muted)}
/* text for screen readers and search only */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a status or a topic on the deep ground: a small pill rather than another line of text */
.pill{display:inline-block;font-size:var(--t-100);line-height:var(--lh-normal);color:var(--on-navy-2);white-space:nowrap;
  padding:var(--s-1) var(--s-3);border:1px solid var(--deep-line-2);border-radius:var(--r-pill)}
.cover a.pill{text-decoration:none}
.cover a.pill:hover{border-color:var(--bright-2);color:var(--on-navy)}
.u-accent{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.u-accent:hover{text-decoration-thickness:2px}
.more-link{display:inline-flex;margin-top:var(--s-5);color:var(--accent);font-weight:600}
.more-link:hover{text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){.sec-sub,.part-d,.work-feature p,.case p,.feature-essay p{font-size:var(--t-250)}}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:50;background:var(--deep);container:bar / inline-size;transition:transform var(--dur-2) var(--ease);view-transition-name:masthead}
/* once the page has moved, a hairline keeps the bar apart from a dark cover under it */
html.scrolled .masthead{box-shadow:0 1px 0 var(--deep-line)}
/* phones: the bar steps away while reading down (site.js) and returns on the way
   back up, or as soon as anything in it has focus */
@media(max-width:900px){html.bar-away .masthead:not(:focus-within){transform:translateY(-100%)}}
/* moving between pages cross-fades instead of cutting, where the browser supports it */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
@media(prefers-reduced-motion:reduce){.masthead{transition:none}}
.masthead :focus-visible{outline-color:var(--bright-2)}
.masthead-in{display:flex;align-items:center;gap:var(--s-5);min-height:var(--s-8)}
.wordmark{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--display);font-weight:700;
  font-size:var(--t-300);color:var(--on-navy);letter-spacing:var(--ls-snug);white-space:nowrap}
.mark{width:var(--mark);height:var(--mark);flex:none}
.nav{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
.nav a{font-size:var(--t-200);color:var(--on-navy-3);font-weight:500;
  padding-block:var(--s-1);border-bottom:2px solid transparent}
.nav a:hover{color:var(--on-navy);border-bottom-color:var(--navy-line-2)}
.nav a[aria-current=page]{color:var(--on-navy);border-bottom-color:var(--bright-2)}
.nav a:active{color:var(--bright-2)}
.nav .nav-contact{display:none}
/* a bar under 360px wide (a 320px phone, or a page zoomed to 400%) cannot hold the name, the
   Contact pill and the menu button on one row: the pill steps into the menu */
@container bar (max-width:359px){
  .masthead .nav-action{display:none}
  .nav .nav-contact{display:block}   /* with script it shows inside the menu; without, in the row of links below the bar */
}
.nav-action{font-size:var(--t-200);font-weight:700;color:var(--navy-d);
  background:var(--bright-1);border:1px solid var(--bright-1);
  padding:var(--s-2) var(--s-5);border-radius:var(--r-1);white-space:nowrap;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.nav-action:hover{background:var(--bright-2);border-color:var(--bright-2)}
.nav-toggle{display:none;color:var(--on-navy);background:none;border:0;padding:0;cursor:pointer;line-height:0;
  min-width:var(--tap-min);min-height:var(--tap-min);align-items:center;justify-content:center;margin-right:calc(var(--s-3) * -1)}
/* the icon says what a tap will do: three lines to open, a cross to close */
.nav-toggle .i-close,.nav-toggle[aria-expanded=true] .i-open{display:none}
.nav-toggle[aria-expanded=true] .i-close{display:block}
@media(max-width:640px){
  .masthead-in{flex-wrap:wrap;min-height:0;padding-block:var(--s-3);gap:var(--gap-bar-m)}
  .wordmark{flex:1 1 auto;font-size:var(--t-wordmark-m);min-height:var(--tap-min)}
  .mark{width:var(--mark-s);height:var(--mark-s)}
  .nav-action{order:2;padding:var(--s-2) var(--pad-pill-m);background:transparent;color:var(--on-navy);border-color:var(--bright-1);
    min-height:var(--tap-min);display:inline-flex;align-items:center}
  .nav-action:hover{background:var(--bright-1);color:var(--navy-d)}
  /* without JS the links wrap onto a row below the bar; with JS they fold
     behind the toggle into a full-width sheet, so navigation never needs script */
  .nav{order:4;flex-basis:100%;margin-left:0;flex-wrap:wrap;gap:var(--s-2) var(--s-5);padding-top:var(--s-2)}
  html.js .nav-toggle{display:inline-flex;order:3}
  html.js .nav{display:none;flex-direction:column;align-items:stretch;gap:0;padding-block:var(--s-2) var(--s-4)}
  html.js .nav.open{display:flex;padding-bottom:var(--s-6);border-bottom:1px solid var(--deep-line-2)}
  html.js .masthead:has(.nav.open){background:var(--deep-2);box-shadow:var(--menu-shadow)}
  html.js .nav a{font-family:var(--display);font-weight:700;font-size:var(--t-500);color:var(--on-navy);
    padding-block:var(--s-3);border-bottom:1px solid var(--navy-line)}
  html.js .nav a[aria-current=page]{color:var(--bright-2);border-bottom-color:var(--navy-line)}
  html.js .nav a:last-child{border-bottom:0}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;font-weight:600;font-size:var(--t-200);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-1);border:1px solid var(--navy);
  background:var(--navy);color:var(--on-navy);cursor:pointer;font-family:inherit;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn:hover{background:var(--navy-d);border-color:var(--navy-d)}
.btn:active,.nav-action:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--navy)}
.btn-ghost:hover{background:var(--accent-soft)}
.btn-bright{background:var(--bright-1);border-color:var(--bright-1);color:var(--navy-d);font-weight:700}
.btn-bright:hover{background:var(--bright-2);border-color:var(--bright-2)}
.btn-row{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}

/* the pair of actions on a deep ground: one bright button, one quiet link */
.plate-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);margin-top:var(--s-7)}
.plate-link{font-weight:600;color:var(--on-navy);padding-block:var(--s-1);border-bottom:1px solid var(--navy-line-2)}
.plate-link:hover{border-bottom-color:var(--bright-2)}
@media(max-width:640px){
  .plate-link,.more-link{display:inline-flex;align-items:center;min-height:var(--tap-min)}
  /* a link inside a line of text keeps its line; only its hit area grows */
  .legend-note a,.iv-src a,.back-mail a,.cover .lede a,.article-meta a,.u-accent{position:relative}
  .legend-note a::after,.iv-src a::after,.back-mail a::after,.cover .lede a::after,.article-meta a::after,.u-accent::after{
    content:"";position:absolute;inset:calc(var(--s-3) * -1) calc(var(--s-1) * -1)}
}

/* ---------- the cover: every inner page opens on the deep ground ---------- */
.cover{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:var(--on-navy-3)}
/* the same drawing that opens the homepage, faded in from the left behind the
   right side of every inner cover, so each page opens on the same artwork */
.cover-art{position:absolute;top:0;bottom:0;right:0;z-index:-1;opacity:var(--cover-art-o);pointer-events:none;
  left:calc(max(0px, (100vw - var(--shell)) / 2) + var(--gutter) + var(--cover-text));
  -webkit-mask-image:var(--mask-fade);mask-image:var(--mask-fade)}
.article-essay .cover{--cover-text:var(--cover-text-read)}
.article-project .cover{--cover-text:var(--measure-head)}
.article-project .cover .facts{max-width:var(--measure-head)}
.cover:has(.about-cover-in){--cover-text:var(--cover-text-about)}
.cover:has(.contact-cover-in){--cover-text:var(--cover-text-contact)}
.cover-art img{width:100%;height:100%;object-fit:cover;object-position:0% 50%;animation:develop var(--develop) var(--ease) both}
@keyframes develop{from{opacity:.35;filter:brightness(.6)}to{opacity:1;filter:none}}
@media(prefers-reduced-motion:reduce){.cover-art img{animation:none}}
@media(max-width:900px){
  .cover-art{left:0;opacity:var(--cover-art-o-m);-webkit-mask-image:var(--mask-fade-m);mask-image:var(--mask-fade-m)}
  .cover-art img{object-position:30% 40%}
}
main>section.cover{padding-block:var(--s-8) var(--s-8)}
.cover :focus-visible{outline-color:var(--bright-2)}
.cover h1{font-size:var(--t-700);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--on-navy);max-width:12em}
.cover .lede{color:var(--on-navy-3);max-width:var(--measure-lede)}
.cover a:not(.btn){color:var(--on-navy);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--navy-line-2)}
.cover a:not(.btn):hover{text-decoration-color:var(--bright-2)}
.cover .facts{border-color:var(--deep-line)}
.cover .facts dt{color:var(--on-navy-3)}
.cover .facts dd{color:var(--on-navy)}
.cover .facts dd a{color:var(--on-navy)}
/* an image can sit across the cover's lower edge, half on the deep ground and
   half on paper: the cover grows by the overlap and the image pulls up into it */
main>section.cover.has-bridge{padding-block-end:calc(var(--s-8) + var(--bridge))}
.bridge{position:relative;margin-top:calc(var(--bridge) * -1)}
main>section.after-bridge{padding-block-start:0}
.bridge{margin-bottom:var(--s-7)}

/* ---------- facts: a set of key and value pairs, ruled ---------- */
.facts{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);padding-block:var(--s-5);
  border-block:1px solid var(--line);margin-top:var(--s-6)}
.facts>div{flex:1 1 var(--fact-w);min-width:0}
.facts>div:has(dd a){flex:1 0 auto}   /* a link keeps its natural width, never breaks mid-word */
.facts dt{font-size:var(--t-100);color:var(--muted)}
.facts dd{font-weight:600;color:var(--ink);margin-top:var(--s-1);overflow-wrap:break-word}
.facts dd a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.facts dd a:hover{color:var(--accent)}
/* stacked form, for a side column */
.facts-v{display:block;border-bottom:0;padding-block:0;margin-top:0}
.facts-v>div{padding-block:var(--s-4);border-bottom:1px solid var(--line)}
.facts-v .more-link{margin-top:var(--s-5)}

/* ---------- two columns: reading column and a side column ---------- */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s-7) var(--s-9);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- base prose (about chapters, security, projects) ---------- */
.prose{font-size:var(--t-300);line-height:var(--lh-prose);color:var(--ink);max-width:var(--measure);text-wrap:pretty}
.prose>*+*{margin-top:var(--s-5)}
.prose>:first-child{margin-top:0}
.prose>*{margin-bottom:0}   /* a pre or blockquote would otherwise keep the browser's own bottom margin */
.prose h2{font-size:var(--t-500);margin-top:var(--s-8)}
.prose h3{font-size:var(--t-400);margin-top:var(--s-7)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--accent);text-underline-offset:3px}
.prose a:hover{color:var(--accent);text-decoration-thickness:2px}
.prose ul,.prose ol{padding-left:var(--s-6)}
.prose li+li{margin-top:var(--s-2)}
.prose img{border-radius:var(--r-1);border:1px solid var(--line)}

/* ---------- mats: a real screenshot is mounted on the deep ground ---------- */
.mat{display:block;background:var(--deep);padding:var(--mat);border-radius:var(--r-2)}
.mat img{border:0;border-radius:var(--r-1)}

/* ---------- lists: work index rows and writing entries ---------- */
.work-index{list-style:none;padding:0;margin-top:var(--s-8);border-top:1px solid var(--line)}
.idx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-2) var(--s-6);align-items:baseline;padding-block:var(--s-5);border-bottom:1px solid var(--line)}
.wr-title{font-family:var(--display);font-weight:600;font-size:var(--t-400);line-height:var(--lh-snug);
  letter-spacing:var(--ls-snug);color:var(--ink);text-wrap:balance}
.wr-cat{font-size:var(--t-100);font-weight:600;color:var(--accent);text-align:right}
.idx-row:hover .wr-title,.entry:hover h2,.entry:hover h3{color:var(--accent)}
/* an essay already read reads a shade quieter in the lists */
.entry:visited h2,.entry:visited h3{color:var(--sub)}
/* a large block link keeps its focus ring clear of its first letter */
.part:focus-visible,.rail-item:focus-visible,.entry:focus-visible,.case:focus-visible,.feature-essay:focus-visible,.work-feature:focus-visible{outline-offset:var(--ring-off)}
.entry{display:grid;grid-template-columns:minmax(0,10ch) minmax(0,1fr) minmax(0,12ch);
  gap:var(--s-2) var(--s-6);padding-block:var(--s-5);border-top:1px solid var(--line);align-items:baseline}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry-d{font-size:var(--t-100);color:var(--muted);font-variant-numeric:tabular-nums}
.entry h2,.entry h3{font-size:var(--t-400);font-weight:600;color:var(--ink)}
.entry p{color:var(--muted);margin-top:var(--s-2);max-width:64ch;line-height:var(--lh-prose)}
/* an essay with a picture shows it small beside its entry */
.entry-main{display:flex;gap:var(--s-5);align-items:flex-start;min-width:0}
.entry-main>span{flex:1;min-width:0}
.entry-thumb{flex:none;width:var(--thumb-w-s);aspect-ratio:40/21;object-fit:cover;border-radius:var(--r-1);background:var(--deep);margin-top:var(--s-1)}
.home .entry-thumb{width:var(--thumb-w)}
@media(max-width:640px){.home .entry-thumb{width:var(--thumb-w-s)}}
.entry-t{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);font-size:var(--t-100);color:var(--muted);font-variant-numeric:tabular-nums}
.entry-t b{font-weight:600;color:var(--accent)}
/* a thin bright edge draws down the left of a row under the pointer or focus */
.idx-row,.entry{position:relative}
.idx-row::before,.entry::before{content:"";position:absolute;left:calc(var(--s-3) * -1);top:var(--s-4);bottom:var(--s-4);
  width:2px;background:var(--bright-1);transform:scaleY(0);transform-origin:top;transition:transform var(--dur-2) var(--ease)}
.idx-row:focus-visible::before,.entry:focus-visible::before{transform:scaleY(1)}
@media(hover:hover){.idx-row:hover::before,.entry:hover::before{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.idx-row::before,.entry::before{transition:none}}
/* phones: one meta line (date, topic, length), then the title and two lines */
@media(max-width:640px){
  .entry{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"d t" "m m";gap:var(--s-2) var(--s-4)}
  .entry-d{grid-area:d}
  .entry-t{grid-area:t;flex-direction:row;justify-content:flex-end;gap:var(--s-3)}
  .entry>span:nth-child(2){grid-area:m}
}

/* ---------- writing archive: the year holds its place while its essays scroll ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-6)}
.cover .filters a{position:relative;color:var(--on-navy-3);font-weight:600;padding-block:var(--s-1);border-bottom:2px solid transparent;text-decoration:none}
.cover .filters a::after{content:"";position:absolute;inset:calc(var(--s-3) * -1) calc(var(--s-2) * -1)}
.cover .filters a:hover{color:var(--on-navy);border-bottom-color:var(--navy-line-2)}
.cover .filters a[aria-current=true]{color:var(--on-navy);border-bottom-color:var(--bright-2)}
.filters .n{font-weight:400;font-variant-numeric:tabular-nums}
.year-group{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:var(--s-2) var(--s-6);padding-top:var(--s-8)}
.year-group:first-child{padding-top:0}
.year-head{font-family:var(--display);font-weight:700;font-size:var(--t-600);line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);color:var(--accent);position:sticky;top:var(--s-9);align-self:start;
  padding-top:var(--s-4);font-variant-numeric:tabular-nums}
.year-group .entry{grid-template-columns:minmax(0,8ch) minmax(0,1fr) minmax(0,10ch)}
@media(max-width:900px){
  .year-group{grid-template-columns:1fr;padding-top:var(--s-7)}
  .year-head{position:static;padding-top:0;font-size:var(--t-500)}
}
@media(max-width:640px){.year-group .entry{grid-template-columns:auto minmax(0,1fr)}}

/* ---------- writing: one essay featured with its illustration ---------- */
.feature-essay{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6) var(--s-8);align-items:center}
.fe-mat{padding:var(--mat-s);transition:transform var(--dur-3) var(--ease)}
.fe-mat img{width:100%;aspect-ratio:40/21;object-fit:cover}
@media(hover:hover){.feature-essay:hover .fe-mat{transform:translateY(calc(var(--s-1) * -1))}}
.feature-essay .kind .dim{font-weight:400}
.feature-essay h2{font-size:var(--t-feature);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.feature-essay:hover h2{color:var(--accent)}
.feature-essay p{color:var(--sub);line-height:var(--lh-prose);margin-top:var(--s-4);max-width:52ch}
.feature-essay .more-link{margin-top:var(--s-4)}
@media(max-width:900px){.feature-essay{grid-template-columns:1fr;gap:var(--s-5)}}
@media(prefers-reduced-motion:reduce){.fe-mat{transition:none}}

/* ---------- work: each project its own band, the picture and the story alternating ---------- */
main>section.case-band{padding-block:var(--band);position:relative}
.case::after{content:"";position:absolute;inset:0}
main>section.case-band+section.case-band{padding-block-start:var(--band)}
.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6) var(--s-8);align-items:center}
.case.flip .case-mat{order:2}
.case-shot{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center}
.case-mat{transition:transform var(--dur-3) var(--ease)}
@media(hover:hover){.case:hover .case-mat{transform:translateY(calc(var(--s-1) * -1))}}
.case h2{font-size:var(--t-500)}
@media(min-width:900px){.case h2,.chapter h2{line-height:var(--lh-head)}}
.case:hover h2{color:var(--accent)}
.case p{color:var(--sub);line-height:var(--lh-prose);margin-top:var(--s-3);max-width:52ch}
.case-line{display:block;margin-top:var(--s-4);font-size:var(--t-100);font-weight:600;color:var(--ink)}
.case-line .dim{font-weight:400}
/* what a project is built with, as small pills */
.techs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.tech{font-size:var(--t-100);line-height:var(--lh-normal);color:var(--sub);background:var(--paper);
  padding:var(--s-1) var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill)}
.case .more-link{margin-top:var(--s-4)}
@media(hover:hover){.case:hover .more-link{text-decoration:underline;text-underline-offset:3px}}
/* a project without a screenshot: the tile states the facts on the deep ground */
.case-facts{display:flex;flex-direction:column;aspect-ratio:16/9;padding:var(--s-6)}
.case-mat.case-facts img.mark{width:var(--mark);height:var(--mark);border-radius:0}
.case-status{margin-top:auto;font-family:var(--display);font-weight:700;font-size:var(--t-500);line-height:var(--lh-snug);
  letter-spacing:var(--ls-snug);color:var(--on-navy)}
.case-meta{margin-top:var(--s-2);font-size:var(--t-200);color:var(--on-navy-3)}
@media(max-width:900px){
  .case{grid-template-columns:1fr;gap:var(--s-5)}
  .case.flip .case-mat{order:0}
  .case-facts{padding:var(--s-5)}
  .case-status{font-size:var(--t-400)}
}
@media(prefers-reduced-motion:reduce){.case-mat{transition:none}}

/* ---------- experience ---------- */
.roles{list-style:none;padding:0;border-top:1px solid var(--line)}
.roles li{display:grid;grid-template-columns:minmax(0,12ch) minmax(0,1fr);gap:var(--s-1) var(--s-5);
  padding-block:var(--s-4);border-bottom:1px solid var(--line);align-items:baseline}
.date{font-size:var(--t-100);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.r-title{font-family:var(--display);font-weight:600;font-size:var(--t-300);line-height:var(--lh-snug);
  letter-spacing:var(--ls-snug);color:var(--ink)}
.r-org{display:block;font-size:var(--t-200);font-weight:600;color:var(--accent);margin-top:var(--s-1)}
.r-body{color:var(--muted);line-height:var(--lh-prose);margin-top:var(--s-3);max-width:64ch}
@media(max-width:640px){.roles li{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-4)}.roles .date{order:2;text-align:right}}

/* ---------- about ----------
   The cover carries the statement and the portrait. On paper: an at-a-glance
   strip a reader takes in without reading, four titled chapters, and the
   career as a timeline led by its start years (a real sequence). */
.about-cover-in{display:grid;grid-template-columns:minmax(0,1fr) var(--avatar);gap:var(--s-8);align-items:end}
.portrait{width:100%;max-width:var(--avatar);aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-2)}
.glance{margin-top:0;border-top:0}
.glance dd{font-family:var(--display);font-weight:600;font-size:var(--t-400);line-height:var(--lh-snug);
  letter-spacing:var(--ls-snug);color:var(--ink);margin-top:var(--s-2)}
/* a line in his own words, set in the reading serif on the tint: the page's breath */
main>section.pull-sec{padding-block:var(--s-9)}
.pull{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s-5);align-items:start}
.pull::before{content:"\201C";font-family:var(--display);font-weight:700;font-size:var(--t-quote);
  line-height:var(--lh-display);color:var(--navy);height:var(--s-9)}
.pull p{font-family:var(--serif);font-style:italic;font-size:var(--t-600);line-height:var(--lh-snug);color:var(--ink);text-wrap:balance;max-width:28ch}
main>section.glance-sec{padding-block-start:var(--s-7)}
main>section.glance-sec+section{padding-block-start:var(--s-7)}
.chapter{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-3) var(--s-8);
  padding-block:var(--s-7);border-bottom:1px solid var(--line)}
.chapter:first-child{padding-top:0}
.chapter h2{font-size:var(--t-500)}
.timeline{list-style:none;padding:0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s-2) var(--s-8);
  padding-block:var(--s-6);border-bottom:1px solid var(--line);align-items:baseline}
.t-year{display:block;font-family:var(--display);font-weight:700;font-size:var(--t-600);
  line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--accent);font-variant-numeric:tabular-nums}
.t-span{display:block;font-size:var(--t-100);color:var(--muted);margin-top:var(--s-1)}
.timeline .r-title{font-size:var(--t-400)}
@media(max-width:900px){
  .about-cover-in{grid-template-columns:1fr;gap:var(--s-6)}
  .about-cover-in .portrait{order:-1;max-width:var(--portrait-m)}
  .chapter{grid-template-columns:1fr}
}
@media(min-width:640px) and (max-width:900px){.glance>div{flex:1 1 calc(50% - var(--s-6))}}
@media(max-width:640px){
  .timeline li{grid-template-columns:1fr;padding-block:var(--s-5)}
  .t-year{font-size:var(--t-500)}
  /* the facts read as rows on a phone: the label on the left, the answer beside it */
  .glance{display:block;padding-block:0;border-top:1px solid var(--line)}
  .glance>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:var(--s-4);align-items:baseline;
    padding-block:var(--s-4);border-bottom:1px solid var(--line)}
  .glance dd{margin-top:0;font-size:var(--t-300)}
  main>section.pull-sec{padding-block:var(--s-8)}
  .pull{display:block}
  .pull::before{display:block;font-size:var(--t-800);height:var(--s-7)}
  .pull p{font-size:var(--t-500)}
}

/* ---------- broadcast (about) ---------- */
.iv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-6)}
.iv-poster{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-1);background:var(--plate)}
.iv-poster img{width:100%;height:100%;object-fit:cover}
/* the play button sits in the empty left of the frame, never over a face */
.iv-play{position:absolute;left:var(--s-5);top:0;bottom:0;margin-block:auto;width:var(--s-8);height:var(--s-8);display:grid;place-items:center;
  border-radius:50%;background:var(--navy);color:var(--on-navy);transition:background var(--dur-1) var(--ease)}
.iv-play svg{margin-left:2px}
.iv-poster:hover .iv-play{background:var(--accent)}
.iv-poster:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.iv-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-4);font-size:var(--t-100);color:var(--muted)}
.iv-meta b{color:var(--accent);font-weight:600}
.iv h3{font-size:var(--t-400);font-weight:600;margin-top:var(--s-2)}
.iv p{color:var(--muted);line-height:var(--lh-prose);margin-top:var(--s-2)}
.iv .more-link{margin-top:var(--s-3)}
.iv-src{margin-top:var(--s-2);font-size:var(--t-100)}
.iv-src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.iv-grid{grid-template-columns:1fr}}

/* ---------- contact ----------
   The cover puts a face to the address; the form gets its own room; the other
   ways to reach him are rows on the tint. */
.contact-cover-in{display:grid;grid-template-columns:var(--face) minmax(0,1fr);gap:var(--s-7);align-items:end}
.contact-face{width:var(--face);aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-2)}
.contact-form{max-width:var(--measure)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-5)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.form-note{font-size:var(--t-100);color:var(--sub);max-width:36ch}
.reach dd{font-family:var(--sans);font-weight:600;font-size:var(--t-300);letter-spacing:var(--ls-none)}
.reach dd a{position:relative;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.reach dd a:hover{text-decoration-thickness:2px}
.reach dd a::after{content:"";position:absolute;inset:calc(var(--s-3) * -1) calc(var(--s-1) * -1)}
.contact-side h2{font-size:var(--t-400);font-weight:600}
.contact-side p{color:var(--sub);line-height:var(--lh-prose);margin-top:var(--s-2)}
.contact-side div+div{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)}
@media(max-width:640px){
  /* the photo sits beside the heading only; the invitation runs full width below */
  .contact-cover-in{grid-template-columns:var(--face-m) minmax(0,1fr);gap:0 var(--s-4);align-items:end}
  .contact-cover-in>div{display:contents}
  .contact-cover-in .lede{grid-column:1 / -1}
  .contact-face{width:var(--face-m)}
  .field-row{grid-template-columns:1fr}
}

/* ---------- contact form fields ---------- */
.field{display:grid;gap:var(--s-2);margin-bottom:var(--s-5)}
.field label{font-weight:600;color:var(--ink)}
.field input,.field textarea{font:inherit;font-size:var(--t-300);color:var(--ink);
  background:var(--paper);border:1px solid var(--line-3);border-radius:var(--r-1);padding:var(--s-3) var(--s-4);width:100%}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:0}
.field textarea{min-height:var(--field-h);resize:vertical;line-height:var(--lh-prose)}
.contact-form .btn{min-height:var(--btn-h)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{padding:var(--s-4) var(--s-5);border-left:2px solid var(--muted);background:var(--soft);margin-bottom:var(--s-5)}
.note-ok{border-left-color:var(--accent)}

/* ---------- rooms: sections alternate paper and a soft tint ---------- */
main>section.tint{background:var(--paper-2);padding-block-end:var(--band)}
main>section.tint+section:not(.back){padding-block-start:var(--band)}
main>section.room{padding-block-end:var(--band)}
.kind{display:block;font-size:var(--t-100);font-weight:600;color:var(--accent);margin-bottom:var(--s-2)}

/* ---------- the back cover: the page closes as it opened, on the deep ground ---------- */
.back{background:var(--deep-2);color:var(--on-navy-3)}
main>section.back{padding-block:var(--s-9) var(--s-8)}
.back :focus-visible{outline-color:var(--bright-2)}
.back-head{display:grid;grid-template-columns:var(--face) minmax(0,1fr);gap:var(--s-6);align-items:end}
.back-head.no-face{grid-template-columns:1fr}
.back-face{width:var(--face);aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-2)}
.back-h{font-size:var(--t-700);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--on-navy);max-width:12em}
.back-p{margin-top:var(--s-6);max-width:52ch;font-size:var(--t-300);line-height:var(--lh-prose)}
.back .plate-cta{margin-top:var(--s-6)}
.back-mail{margin-top:var(--s-6);font-size:var(--t-200)}
.back-mail a{color:var(--on-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--navy-line-2)}
.back-mail a:hover{text-decoration-color:var(--bright-2)}
/* a case study closes on a shorter back cover: one question, one way to answer */
main>section.back.back-compact{padding-block:var(--s-8) var(--s-7)}
.back-compact .back-h{font-size:var(--t-500);line-height:var(--lh-snug);letter-spacing:var(--ls-snug);max-width:16em}
/* the footer continues the back cover: one deep block, a hairline between */
.has-back .footer{padding-block-start:0}
.has-back .footer-in{border-top:1px solid var(--deep-line);padding-top:var(--s-7)}
@media(max-width:640px){
  main>section.back{padding-block:var(--s-8) var(--s-7)}
  .back-head{grid-template-columns:var(--face-m) minmax(0,1fr);gap:var(--s-4)}
  .back-face{width:var(--face-m)}
  .back-h{font-size:var(--t-600)}
}

/* ---------- footer: the deep ground closes every page, as the cover opens it ---------- */
.footer{background:var(--deep);color:var(--on-navy-3);padding-block:var(--s-8) var(--s-6)}
.footer :focus-visible{outline-color:var(--bright-2)}
.footer-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:var(--s-6) var(--s-7);align-items:start}
.footer-line{margin-top:var(--s-3);max-width:34ch;line-height:var(--lh-prose)}
.footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.footer-nav a{color:var(--on-navy);border-bottom:1px solid transparent}
.footer-nav a:hover{border-bottom-color:var(--bright-2)}
.footer-fine{grid-column:1 / -1;font-size:var(--t-100);padding-top:var(--s-4);border-top:1px solid var(--deep-line)}
@media(max-width:640px){
  .footer-in{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}
  /* every footer link a full thumb high, touching, rather than 24px lines 8px apart */
  .footer-nav{gap:0}
  .footer-nav a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
}

/* ---------- not found inside an article route ---------- */
.lost{padding-block:var(--s-10)}
.lost .code{font-family:var(--display);font-weight:700;font-size:var(--t-800);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);color:var(--accent)}
.lost h1{font-size:var(--t-600);margin-top:var(--s-4);max-width:13.3em}
.lost p{color:var(--muted);margin-top:var(--s-4);max-width:48ch;line-height:var(--lh-prose)}

/* ---------- print: an essay or the About page on paper, without the chrome ---------- */
@media print{
  html,body{background:none;color:var(--print-ink)}
  .masthead,.footer,.nav-toggle,.btn-row,.plate-cta,.filters,.adjacent,.toc,.toc-rail,.skip,.plate-art,.cover-art,.plate::before,.back{display:none}
  .cover,.plate,.ledger,.mat{background:none;color:var(--print-ink)}
  .cover h1,.plate h1,.ledger .h2,.cover .lede,.plate-lede,.cover .facts dd,.cover .facts dt,.record-table th,.record-table td{color:var(--print-ink)}
  main>section,main>section.cover,main>section.plate{padding-block:var(--s-5) 0}
  .plate{min-height:0}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--t-100)}
  .article-essay .prose{max-width:none}
  img,figure{break-inside:avoid}
  .mat,.article-figure,.prose figure>:first-child{background:none;padding:0}
  .article-figure img,.prose figure img{max-height:9cm;width:auto;object-fit:contain}
  h2,h3{break-after:avoid}
}