/* ==========================================================================
   SIMPLE: the plain, content-first system (Nov 2026).
   Raleway for reading, Instrument Serif for headings and the hello.
   Palette "pencil": bone paper and graphite ink; links in slate blue, like a
   blue pencil (from the Bali dusk photo); a yellow highlighter marks hover and
   the current page. Light by default, follows the system.
   ========================================================================== */
:root{
  --bg:#EEEBE4; --text:#2A2A28; --text-2:#5E5A54; --text-3:#7F7A72;
  --link:#2F5C88; --rule:#D6D1C6; --wash:rgba(47,92,136,.06); --rim:transparent;
  --mark:#FFE45C; --btn:#2A2A28; --btn-fg:#EEEBE4; --btn-hover:#45433F;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Raleway",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#1C1B19; --text:#E6E1D6; --text-2:#ABA598; --text-3:#86806F; --link:#8DB6DC; --rule:#33312D; --wash:rgba(141,182,220,.07); --rim:rgba(230,225,214,.5); --mark:rgba(255,222,70,.32); --btn:#E6E1D6; --btn-fg:#1C1B19; --btn-hover:#FFFFFF; color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg:#1C1B19; --text:#E6E1D6; --text-2:#ABA598; --text-3:#86806F; --link:#8DB6DC; --rule:#33312D; --wash:rgba(141,182,220,.07); --rim:rgba(230,225,214,.5); --mark:rgba(255,222,70,.32); --btn:#E6E1D6; --btn-fg:#1C1B19; --btn-hover:#FFFFFF; color-scheme:dark; }

*{box-sizing:border-box}
html{font-variant-numeric:oldstyle-nums;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16.5px/1.65 var(--sans)}
a{color:var(--link);text-decoration:none}
/* links in running text are underlined (never colour alone); a highlighter on hover */
:is(p,li,.lead,.g-cap,.mailrow) a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--link) 40%,transparent)}
li a:not(.btn){text-decoration-color:color-mix(in srgb,var(--link) 22%,transparent)}
a:not(.btn):hover{background:linear-gradient(transparent 52%,var(--mark) 52%);text-decoration-color:transparent;color:var(--text)}
a:focus-visible,button:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:2px}
b,strong{font-weight:700}
/* action button: solid ink, one per page at most */
.btn{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--sans);letter-spacing:.01em;color:var(--btn-fg);background:var(--btn);border:0;border-radius:999px;padding:9px 16px;cursor:pointer;text-decoration:none;transition:background-color .15s}
.btn:hover{background:var(--btn-hover);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:999px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--bg);padding:4px 8px;z-index:10}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.wrap{max-width:820px;margin:0 auto;padding:52px 20px 64px}

/* top bar: name (except on home) + pages + theme */
.bar{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;font-size:15.5px;margin-bottom:56px}
.bar .nm{font:400 22px/1 var(--serif);color:var(--text);margin-right:auto}
.bar .nm:hover{text-decoration:none}
.nav{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:6px;min-width:0}
.nav .sep{margin:0 6px;color:var(--text-3)}
.nav a[aria-current="page"]{color:var(--text);font-weight:700;background:linear-gradient(transparent 52%,var(--mark) 52%)}
.theme{font:inherit;font-size:13px;color:var(--text-3);background:none;border:1px solid var(--rule);border-radius:999px;padding:2px 10px;cursor:pointer;white-space:nowrap}
.theme:hover{color:var(--text)}
.home .bar{justify-content:flex-end}

/* home hero: the hello and the one sentence */
.hero{display:flex;gap:6px;align-items:flex-start;margin:0 0 8px}
/* geometry below comes from src/assets/mascot/meta.json (viewBox 0 0 570 391, restBox, headX, ledgeY)
   the guide: the straw-hat mascot ({% guide %} in .eleventy.js, js/guide.js).
   His box is the rest pose's body (--w wide); every other pose overflows it.
   The box's bottom is the drawn ledge line, and the guide's own border is the
   page rule he sits on, so the drawing's ledge is never shown. Space for him is
   reserved; gestures reach only into empty margin, and the caption sits past
   the furthest reach of his right hand. No JS: he shows his standing pose. */
.guide{--ml:0px;position:relative;display:flex;align-items:flex-end;margin:22px 0 26px;padding-top:calc(var(--w) * .08);border-bottom:1px solid var(--rule)}
.g-fig{position:relative;flex:none;width:var(--w);aspect-ratio:256.5/357.6;margin:0 0 calc(var(--w) * -3 / 256.5) var(--ml);
  clip-path:inset(-30% -120% .84% -60%)}
.g-stage{position:absolute;left:-45.965%;top:-8.026%;width:222.222%;height:109.340%}
.g-layer,.g-pool{position:absolute;inset:0}
.g-layer{transform-origin:43.158% 98.031%;will-change:opacity,transform}
.g-pool > .g-layer{visibility:hidden}
.g-pool > .g-layer.on{visibility:visible}
.g-fig svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:43.158% 98.031%;filter:drop-shadow(0 0 .8px var(--rim))}
.g-fig #ledge{display:none}
.g-fig.idle .body{transform-box:view-box;transform-origin:246.0px 383.3px;animation:g-breathe 4.2s ease-in-out infinite}
@keyframes g-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.004,1.012)}}
.g-fig .eye{transform-box:fill-box;transform-origin:center;transition:transform 70ms ease-in}
.g-fig.blink .eye{transform:scaleY(.08)}
.g-fig .pupil{transition:transform 260ms ease-out}
/* the caption: right beside him, level with his head (clear of any gesture's hand) */
.g-cap{position:absolute;left:calc(var(--ml) + var(--w) + 6px);bottom:calc(var(--w) * .82);right:0;max-width:30em;margin:0;
  font:italic 400 20px/1.2 var(--serif);color:var(--text-2);opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s;pointer-events:none}
.g-cap.in{opacity:1;transform:none;pointer-events:auto}
.g-cap a{color:var(--link)}
.g-sub{display:block;margin-top:3px;font:400 14px/1.4 var(--sans);color:var(--text-3)}
a.g-sub{color:var(--link)}
/* beside the page's h1: he leans on the line the heading sits on (flex
   baseline = the bottom of his box = his ledge). He is part of the text column
   at every width: his box starts on the column's left edge, the heading follows */
.g-head{display:flex;align-items:baseline}
.g-head > h1{flex:1 1 auto;min-width:0;position:relative;z-index:1}
.g-head > .guide{flex:none;margin:0 calc(var(--reach) * var(--w) + 8px) 0 0;padding-top:0}
.g-h1 .g-cap{right:auto;white-space:nowrap;font-size:18px}
.g-hello .g-cap{font:italic 400 27px/1 var(--serif);color:var(--text)}
@media (max-width:560px){ .g-hello .g-cap{font-size:20px} }
.js .guide[data-appear] .g-fig{opacity:0;transform:translateY(6px);transition:opacity .22s ease-out,transform .22s ease-out}
.js .guide[data-appear].g-on .g-fig{opacity:1;transform:none}
/* keep his widest reach (the wave hand) inside the column too */
.guide{--ml:calc(var(--ovl) * var(--w))}
@media (max-width:560px){ .guide{--w:var(--wp)!important} .g-cap{font-size:19px} }
/* end of a post: the rule above the endnote is his */
.g-post{margin:44px 0 0}
.g-post + .endnote{margin-top:0;border-top:0}
/* about: a thumbs-up beside the copy button, on its own short rule */
.mailrow{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 4px;margin:0 0 14px}
.mailrow .btn{margin:0 0 2px 10px}
.mailrow .guide{margin:0 0 0 10px;padding-top:0;border:0;flex:1 1 200px;min-width:200px}
.mailrow .guide::after{content:"";position:absolute;left:-6px;bottom:0;width:calc(var(--w) + 12px);border-bottom:1px solid var(--rule)}
.mailrow .g-cap{bottom:calc(var(--w) * .35)}
/* the 404: same unit as the home hero */
.lost .lead a{color:var(--link)}

.hello{font:400 60px/1.05 var(--serif);letter-spacing:-.01em;margin:0}
.lead{font:400 27px/1.35 var(--serif);color:var(--text-2);margin:12px 0 0;max-width:620px}
.hero > div:last-child{padding-top:6px}

/* sections */
h2{font:400 24px/1.2 var(--serif);margin:36px 0 10px}
h3{font:700 16.5px/1.4 var(--sans);margin:22px 0 8px}
p{margin:0 0 14px}
.muted{color:var(--text-2)}
.small{font-size:14px}
.w{border-bottom:1px dotted var(--text-3)}

/* plain lists */
.list{list-style:none;margin:0;padding:0}
.list li{margin:0 0 10px;padding-left:14px;position:relative}
.list li::before{content:"*";position:absolute;left:0;color:var(--text-3)}
.venue,.d{color:var(--text-2)}
.year{font:400 21px/1 var(--serif);color:var(--text-2);margin:28px 0 12px}
.tag{font-size:12.5px;color:var(--text-2);border:1px solid var(--rule);border-radius:999px;padding:1px 8px;margin-left:4px;white-space:nowrap}
.more{display:inline-block;margin-top:4px}

/* detail pages */
.back{font-size:14px;margin:0 0 18px;display:inline-block}
.title{font:400 40px/1.1 var(--serif);letter-spacing:-.005em;margin:6px 0 16px}
.meta{color:var(--text-2);margin-bottom:6px}
.links{margin:14px 0 6px}
.links a{margin-right:16px}
.abstract{margin-top:8px}
pre.bib{font:13px/1.55 ui-monospace,"SF Mono",Menlo,monospace;background:var(--wash);border:1px solid var(--rule);border-radius:6px;padding:14px 16px;overflow-x:auto;color:var(--text-2);white-space:pre}

/* footer */
.foot{margin-top:44px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;color:var(--text-3)}
.foot a{color:var(--text-2);font-weight:500}
.foot .sep{margin:0 9px}

@media (max-width:560px){
  .wrap{padding:32px 16px 48px}
  .hello{font-size:44px}
  .lead{font-size:23px}
  .title{font-size:31px}
  .bar{margin-bottom:36px;gap:10px}
  .nav .sep{margin:0 4px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ===== shared extras for the converted pages ===== */
/* page heads */
.phead{display:flex;justify-content:space-between;gap:28px;align-items:flex-start}
.dek{font:400 23px/1.35 var(--serif);color:var(--text-2);margin:-6px 0 18px;max-width:640px}
.portrait{flex:none;width:150px;margin:6px 0 0;padding:6px;background:color-mix(in srgb,var(--text) 9%,var(--bg));transform:rotate(1.4deg);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.portrait .ph{position:relative;overflow:hidden}
.portrait img{display:block;width:100%;height:auto}
.portrait figcaption{font-size:12.5px;color:var(--text-3);margin-top:6px}
/* margin notes from markdown footnotes, read inline here */
button.m{font:700 11px/1 var(--sans);color:var(--link);background:none;border:0;padding:0 1px;vertical-align:super;cursor:default}
aside.note{margin:-6px 0 16px;padding:2px 0 2px 14px;border-left:1px solid var(--rule);font-size:14px;color:var(--text-2)}
aside.note .n{font-weight:700;color:var(--link);margin-right:6px}
aside.note .lab{color:var(--text-3);margin-right:6px}
aside.note .lab::after{content:":"}
.venue-i{color:var(--text-3)}
/* role, place and project pages */
.facts{color:var(--text-2);margin:-4px 0 18px}
.facts span+span::before{content:"·";margin:0 8px;color:var(--text-3)}
.photos{display:grid;gap:14px;margin:8px 0 22px}
.photos figure{margin:0}
.photos img{display:block;width:auto;max-width:100%;max-height:78vh;height:auto;border-radius:3px}
.photos figcaption{font-size:13px;color:var(--text-3);margin-top:6px}
.credit{font-size:12.5px;color:var(--text-3)}
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;list-style:none;padding:0;margin:8px 0 0}
.places a{display:block;color:var(--text)}
.places a,.places a:hover{text-decoration:none;background:none}
.places a:hover .pn{color:var(--link)}
.places .th{aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:color-mix(in srgb,var(--text) 8%,var(--bg))}
.places .th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.places a:hover .th img{transform:scale(1.03)}
.places .pn{font:400 20px/1.2 var(--serif);margin-top:6px;display:block}
.places .pl{font-size:13px;color:var(--text-3)}
.blank-th{display:flex;align-items:center;justify-content:center;font:italic 400 22px var(--serif);color:var(--text-3)}
.ul{margin:0 0 14px;padding-left:20px}
.ul li{margin:0 0 6px}
/* post rows */
.posts .d{display:inline-block;min-width:92px}
/* the ε instrument (built by js/eps.js; same as the old site, in these colours) */
.particulars{font-size:14.5px;color:var(--text-2)}
.f{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:color-mix(in srgb,var(--link) 40%,transparent);transition:color .3s}
.f.noised{color:var(--link)}
.f.settle{animation:eps-settle .5s both}
@keyframes eps-settle{from{opacity:.15;filter:blur(3px)}to{opacity:1;filter:none}}
.eps-box{max-width:360px;margin:6px 0 18px;padding:12px 14px;border:1px solid var(--rule);border-radius:6px}
.eps-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .35s;pointer-events:none}
[data-eps-live] .eps-canvas{opacity:1}
.eps{font-size:14px;line-height:1.45;color:var(--text-2);font-variant-numeric:lining-nums}
.eps__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.eps__head .lab{color:var(--link);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.eps__val{font:400 21px/1 var(--serif);color:var(--text);display:inline-flex;align-items:baseline;gap:.28em}
.eps__val i{font-style:italic;color:var(--link)}
.eps__val .eq{color:var(--text-3);font-size:.8em}
.eps__val output{min-width:4ch;display:inline-block}
.eps__rule{position:relative;height:32px;margin:8px 0 2px;cursor:ew-resize;touch-action:none;outline:none}
.eps__rule svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eps__rule .tk{stroke:var(--text-3);stroke-width:1;vector-effect:non-scaling-stroke}
.eps__rule .tk.minor{stroke:var(--rule)}
.eps__rule text{font-size:9.5px;fill:var(--text-3)}
.eps__rule text.inf{font-family:var(--serif);font-size:13px}
.eps__needle{position:absolute;top:0;width:13px;margin-left:-6.5px;height:19px;pointer-events:none;transition:left .12s linear}
.eps__needle::before{content:"";position:absolute;left:6px;top:0;width:1.25px;height:19px;background:var(--link)}
.eps__needle::after{content:"";position:absolute;left:2.5px;top:-5px;border:4px solid transparent;border-top:5px solid var(--link)}
.eps__rule:focus-visible{outline:1.5px solid var(--link);outline-offset:4px}
.eps__read{font:11px ui-monospace,Menlo,monospace;color:var(--text-3);display:flex;justify-content:space-between;gap:8px}
.eps__hint{font-size:13px;color:var(--text-3);margin:8px 0 0}
.eps__reset{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--text-3);cursor:pointer;text-decoration:underline}
.eps__reset[hidden]{display:none}
.eps__toggle{display:none}
@media (max-width:560px){.phead{flex-direction:column-reverse}.portrait{width:120px}.dek{font-size:20px}}

/* ===== long-form: blog posts and proposals ===== */
/* old design tokens, mapped onto this palette, so the banners (src/_includes/banners)
   and proposal.css restyle themselves without edits */
:root{
  --ink:var(--link); --ink-2:color-mix(in srgb,var(--link) 72%,transparent); --ink-wash:var(--wash);
  --paper:var(--bg); --paper-2:color-mix(in srgb,var(--text) 5%,var(--bg)); --rule-2:color-mix(in srgb,var(--text) 22%,var(--bg));
  --sc:var(--sans); --mono:ui-monospace,"SF Mono",Menlo,monospace; --fs-label:12.5px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:44px; --s8:60px;
}
.prose{font-size:17px;line-height:1.75}
.prose h2{font:400 28px/1.2 var(--serif);margin:44px 0 12px}
.prose h3{font:400 22px/1.25 var(--serif);margin:32px 0 10px}
.prose h4{font:700 16.5px/1.4 var(--sans);margin:26px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:0 0 6px}
.prose img,.prose video{max-width:100%;height:auto;border-radius:3px}
.prose figure{margin:24px 0}
.prose figcaption{font-size:13.5px;color:var(--text-3);margin-top:8px}
.prose blockquote{margin:20px 0;padding:2px 0 2px 18px;border-left:2px solid var(--link);color:var(--text-2);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--rule);margin:36px 0}
.prose :not(pre)>code{font:.88em var(--mono);background:var(--wash);padding:1px 5px;border-radius:4px}
.prose pre{font:13.5px/1.6 var(--mono);border-radius:6px;padding:14px 16px;overflow-x:auto;margin:0 0 18px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0 20px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:7px 12px 7px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-weight:700;border-bottom-color:var(--rule-2)}
.prose mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden}
.prose a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);text-underline-offset:3px}
/* post head and furniture */
.post-meta{color:var(--text-2);font-size:15px;margin:-4px 0 26px}
.post-meta span+span::before{content:"·";margin:0 8px;color:var(--text-3)}
.bn{margin:0 0 30px;padding:20px 0 14px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bn__plate{position:relative}
.bn__plate svg{display:block;width:100%;height:auto}
.bn figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--text-2)}
.bn figcaption .pl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--link);margin-right:8px}
.series{margin:30px 0 0;padding:14px 16px;border:1px solid var(--rule);border-radius:6px;font-size:15px}
.series ol{margin:6px 0 0;padding-left:22px}
.series li[aria-current]{font-weight:700}
.pn-nav{display:flex;justify-content:space-between;gap:18px;margin-top:36px;font-size:15px}
.endnote{margin-top:36px;padding-top:14px;border-top:1px solid var(--rule);color:var(--text-2);font-size:15px}
/* proposals reuse proposal.css; its selectors expect .post-text .body */
.proposal-page .phase-grid,.proposal-page .post-text .body table{width:auto}