/* Andrum · styles for dev.cgennari.com
   Day = overcast north light through a window. Evening = a reading lamp. */

/* ---------- Type: Literata, self-hosted with small caps and old-style figures ---------- */
@font-face{font-family:Literata;src:url(/assets/fonts/literata-roman.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:Literata;src:url(/assets/fonts/literata-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
/* Georgia, Noto Serif or DejaVu Serif, resized to Literata's proportions, so the text does not jump when the web font arrives */
@font-face{font-family:"Literata Fallback";src:local("Georgia");size-adjust:106.84%;ascent-override:110.17%;descent-override:28.83%;line-gap-override:0%}
@font-face{font-family:"Literata Fallback Noto";src:local("Noto Serif"),local("NotoSerif-Regular");size-adjust:98.45%;ascent-override:119.56%;descent-override:31.29%;line-gap-override:0%}
@font-face{font-family:"Literata Fallback DejaVu";src:local("DejaVu Serif"),local("DejaVuSerif");size-adjust:90.93%;ascent-override:129.44%;descent-override:33.87%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{color-scheme:light;
 --bg:#eef0ec;--mat:#e2e6df;--ink:#2b302d;--soft:#4b534e;--faint:#5f6762;--link:#3b6656;--rule:#d3d8d0;
 --grain:.42;--blend:soft-light;
 --shadow:0 1px 2px rgba(30,40,35,.06),0 8px 30px -12px rgba(30,40,35,.18);
 --col:35rem;--label:7.5rem;--label-gap:1.3rem;--gutter:24px;--note:13.5rem;--note-gap:2rem;
 --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-theme=dark]{color-scheme:dark;
 --bg:#1d1b18;--mat:#25221e;--ink:#e7e0d3;--soft:#b3aa99;--faint:#968e7f;--link:#d4b27c;--rule:#34302a;
 --grain:.09;--blend:screen;
 --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 34px -14px rgba(0,0,0,.6)}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:Literata,"Literata Fallback","Literata Fallback Noto","Literata Fallback DejaVu",serif;font-optical-sizing:auto;
 font-size:19px;line-height:1.72;font-variant-numeric:oldstyle-nums proportional-nums;hanging-punctuation:first;
 -webkit-font-smoothing:antialiased;scroll-behavior:smooth;interpolate-size:allow-keywords;scrollbar-gutter:stable;
 scrollbar-color:var(--rule) transparent}
::view-transition-group(root){animation-duration:.9s}
html:has(dialog:modal){overflow:hidden}
body *{transition:border-color .9s ease,background-color .9s ease}
::selection{background:color-mix(in srgb,var(--link) 24%,transparent)}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:2px}
a{color:var(--link);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--link)}
/* links that leave the site: a drawn arrow (Literata has no ↗); the "new tab" note is added as hidden text by andrum.js */
a.ext:after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.22em;vertical-align:.14em;background:currentColor;opacity:.65;
 -webkit-mask:var(--arrow-ne) center/contain no-repeat;mask:var(--arrow-ne) center/contain no-repeat}
abbr{font-variant-caps:all-small-caps;letter-spacing:.02em;text-decoration:none;font-variant-numeric:lining-nums}
abbr[title]{cursor:help;border-bottom:1px dotted var(--faint)}
h1,h2,h3,summary{text-wrap:balance}
p,dd,li{text-wrap:pretty}
.nw{white-space:nowrap}
.lnum{font-variant-numeric:lining-nums}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---------- Light under the page, grain above it; neither takes clicks ---------- */
@property --win{syntax:'<color>';inherits:false;initial-value:transparent}
@property --lamp{syntax:'<color>';inherits:false;initial-value:transparent}
body:before,body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50}
/* the window light dims while the lamp comes up, a little slower than the colours */
body:before{z-index:-1;--win:rgba(255,255,255,.55);--lamp:rgba(255,196,120,0);
 background:radial-gradient(120% 70% at 0% 0%,var(--win),transparent 60%),radial-gradient(90% 60% at 100% 0%,var(--lamp),transparent 65%);
 transition:--win 1.4s ease,--lamp 1.4s ease}
[data-theme=dark] body:before{--win:rgba(255,255,255,0);--lamp:rgba(255,196,120,.075)}
body:after{opacity:var(--grain);mix-blend-mode:var(--blend);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Day: paper. A fine, still fibre texture and a soft mottle, blended so it neither darkens nor greys the page.
   Evening: film grain under the lamp, which moves. */
/* Day: the paper is part of the page itself, so it scrolls with the text and sits under images. */
html[data-theme=light]{--paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='cd' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .22  0 0 0 0 .2  0.060 0 0 0 -0.030'/%3E%3C/filter%3E%3Cfilter id='cl' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -0.060 0 0 0 0.030'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cd)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23cl)'/%3E%3Cfilter id='fd' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .22  0 0 0 0 .2  0.300 0 0 0 -0.150'/%3E%3C/filter%3E%3Cfilter id='fl' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -0.300 0 0 0 0.150'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fd)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23fl)'/%3E%3C/svg%3E");background-image:var(--paper)}
[data-theme=light] .mat,[data-theme=light] .cert{background-image:var(--paper)}
[data-theme=light] body:after{display:none}
@media (prefers-reduced-motion:no-preference){
 /* film-like grain at about 8 frames a second, and a light that drifts like a passing cloud */
 [data-theme=dark] body:after{inset:-96px;animation:grain 1.2s steps(1) infinite;will-change:transform}
 body:before{inset:-8%;animation:drift 48s ease-in-out infinite alternate}
}
@keyframes grain{
 0%{transform:translate(0,0)}10%{transform:translate(-37px,21px)}20%{transform:translate(53px,-48px)}30%{transform:translate(-71px,64px)}
 40%{transform:translate(18px,-89px)}50%{transform:translate(-26px,42px)}60%{transform:translate(94px,7px)}70%{transform:translate(-55px,-31px)}
 80%{transform:translate(62px,77px)}90%{transform:translate(-9px,-66px)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,2%) scale(1.04)}100%{transform:translate(-2%,4%) scale(1.02)}}

/* ---------- Layout ---------- */
.col{max-width:var(--col);margin:0 auto;padding:0 var(--gutter);position:relative}
.wide{max-width:60rem;margin:0 auto;padding:0 var(--gutter)}
.wide.mid{max-width:48rem}
section{padding-top:8.5rem}
section[id],article[id]{scroll-margin-top:2rem}
h2{font-size:1.5rem;font-weight:400;letter-spacing:-.006em;margin-bottom:1.4rem}
h2:before{content:"";display:block;width:2.2rem;height:1px;background:var(--link);margin-bottom:1.3rem;opacity:.7}
h3{font-size:1.25rem;font-weight:500;margin-bottom:.15rem}
p+p{margin-top:1rem}
.soft{color:var(--soft)}

/* ---------- Header ---------- */
header.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:1.5rem;row-gap:.3rem;
 max-width:60rem;margin:0 auto;padding:28px var(--gutter);font-size:16px;color:var(--soft);position:relative;z-index:2}
.wordmark{color:var(--ink);text-decoration:none;font-weight:450;letter-spacing:.005em;white-space:nowrap}
header.top .tools{display:flex;align-items:baseline;gap:18px;white-space:nowrap;margin-left:auto}
.lang{color:var(--soft);text-decoration-color:var(--rule);text-underline-offset:.3em}
.lang:hover{text-decoration-color:var(--soft)}
/* theme switch: both words, the current one in ink */
.tswitch{font-size:16px;color:var(--faint);display:inline-flex;gap:.4em;align-items:baseline}
.tswitch span{transition:text-decoration-color .9s ease;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:1px}
.tswitch .sep{text-decoration:none}
[data-theme=light] .tswitch [data-t=light],[data-theme=dark] .tswitch [data-t=dark]{color:var(--ink);text-decoration-color:var(--link)}
.tswitch:hover span:not(.sep){color:var(--soft)}
[data-theme=light] .tswitch:hover [data-t=light],[data-theme=dark] .tswitch:hover [data-t=dark]{color:var(--ink)}
/* larger hit areas for small text controls, without moving anything */
header.top a,.tswitch,.copy,.more,summary{position:relative}
header.top a:before,.tswitch:before,.copy:before,.more:before{content:"";position:absolute;inset:-10px -6px}
summary:before{content:"";position:absolute;inset:-.8rem 0}

/* ---------- Opening ---------- */
.lead{padding-top:15vh;padding-bottom:8vh}
.who{display:flex;align-items:center;gap:.9rem;font-size:16px;color:var(--soft);margin-bottom:1.8rem}
.who img{width:52px;height:52px;object-fit:cover;object-position:50% 30%;border-radius:50%;filter:saturate(.75);box-shadow:var(--shadow);flex:none}
.who .clock{display:block;color:var(--faint);font-size:15px;font-variant-numeric:lining-nums tabular-nums}
.lead h1{font-size:2.2rem;line-height:1.22;font-weight:330;letter-spacing:-.014em}
.lead p{margin-top:1.4rem;color:var(--soft)}
.lead p.now{font-size:17px}
.toc{margin-top:2.6rem;font-size:16px;color:var(--faint)}
.toc a{margin-right:1.1rem;display:inline-block;white-space:nowrap}
.toc .rt{display:block;margin-top:.5rem;font-size:14.5px;font-style:italic}

/* ---------- Sidenotes: in the right margin on wide screens, under their line on narrow ones ---------- */
.sn{display:block;font-size:14.5px;line-height:1.55;color:var(--faint);font-style:italic;margin:.6rem 0 0}
.sn b{font-style:normal;font-weight:500;color:var(--soft)}
@media (min-width:1320px){
 .has-note{position:relative}
 .sn{position:absolute;top:.4rem;right:calc(-1 * (var(--note) + var(--note-gap)));width:var(--note);margin:0}
}

/* ---------- Image frames ---------- */
.mat{background:var(--mat);padding:clamp(14px,3vw,38px);border-radius:3px;margin-bottom:2.2rem;position:relative}
.shot{display:block;position:relative;width:100%;border-radius:3px;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in}
.shot img{display:block;width:100%;height:auto;transition:opacity .9s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.shot img.dk{position:absolute;inset:0;height:100%;object-fit:cover;opacity:0}
/* the dark image fades in only once it has loaded, so a frame is never empty */
[data-theme=dark] .shot img.dk.on{opacity:1}
[data-theme=dark] .shot:has(img.dk.on) img.lt.has-dk{opacity:0}
.shot:hover img{transform:scale(1.012)}
.shot .hint{position:absolute;right:10px;bottom:10px;font-size:13px;font-style:italic;color:#fff;background:rgba(20,20,18,.68);padding:2px 9px;border-radius:20px;opacity:0;transition:opacity .4s}
.shot:hover .hint,.shot:focus-visible .hint{opacity:1}
.gal{display:grid;grid-template-columns:1fr 17%;gap:clamp(10px,1.6vw,20px);align-items:end}
.gal .phone{border-radius:14px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,20px);margin-top:clamp(10px,1.6vw,20px)}

/* ---------- Projects ---------- */
.intro+.work{margin-top:2.6rem}
.work{margin-top:5rem}
.tagline{font-style:italic;color:var(--soft);margin-bottom:1.6rem}
dl.story{display:grid;grid-template-columns:var(--label) 1fr;gap:.95rem var(--label-gap);align-items:baseline}
dl.story dt{color:var(--faint);font-size:16px;white-space:nowrap}
.meta{margin-top:1.5rem;font-size:15.5px;color:var(--faint)}
.meta .links{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .75rem}
.aside{margin-top:1.4rem;font-size:16.5px;color:var(--soft);border-top:1px solid var(--rule);padding-top:1rem}
.more{font-size:15.5px;color:var(--link);text-align:left;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);text-underline-offset:.22em}
.more:hover{text-decoration-color:var(--link)}
.smaller{margin-top:5rem}
.smaller h3{margin-bottom:.8rem}
.things{list-style:none}
.things li{display:grid;grid-template-columns:var(--label) 1fr;gap:var(--label-gap);align-items:start;padding:1rem 0;border-top:1px solid var(--rule)}
.things .shot{border-radius:2px;box-shadow:0 0 0 1px var(--rule),var(--shadow)}
.things .shot img{aspect-ratio:16/10;object-fit:cover;object-position:0 0}
.things .more,.plain .more{display:block;font-size:inherit;font-weight:500;color:var(--ink);text-decoration-color:var(--rule)}
.things .more{margin-bottom:.1rem}
.plain .more{display:inline}
.things .more:hover,.plain .more:hover{text-decoration-color:var(--ink)}
.things li>div>span{display:block;color:var(--soft);font-size:17px;line-height:1.6}
.things small{display:block;color:var(--faint);font-size:14.5px;margin-top:.2rem}

/* ---------- Quiet disclosure, with a smooth open ---------- */
details{margin-top:1.6rem;border-top:1px solid var(--rule);padding:.8rem 0}
details+details,.things+details{margin-top:0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;color:var(--soft);font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
/* plus that folds into a minus: two drawn lines, centred, so nothing wobbles */
.pm{position:relative;flex:none;width:11px;height:11px;color:var(--faint)}
.pm:before,.pm:after{content:"";position:absolute;background:currentColor;border-radius:1px}
.pm:before{left:0;right:0;top:5px;height:1px}
.pm:after{top:0;bottom:0;left:5px;width:1px;transition:transform .35s ease}
details[open] .pm:after{transform:scaleY(0)}
details::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.3,.7,.2,1),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
/* the space under the summary lives inside the sliding part, so the open is one smooth movement */
details>summary+*{padding-top:.6rem}
.plain{list-style:none}
.plain li{padding:.55rem 0;display:grid;grid-template-columns:12rem 1fr;gap:1.2rem;font-size:17px}
.plain li b{font-weight:500}
.plain li>span{color:var(--soft)}
.smaller details:first-of-type .plain li{grid-template-columns:var(--label) 1fr;gap:var(--label-gap)}

/* ---------- How I work: three short paragraphs with run-in heads ---------- */
.how{margin-top:1.6rem}
.how p+p{margin-top:1.2rem}
.runin{font-style:italic;color:var(--ink)}
.tools-p{margin-top:1.6rem}

/* ---------- The quote ---------- */
.epigraph{margin:8.5rem auto 0;max-width:var(--col);padding:0 var(--gutter)}
.epigraph+section{padding-top:4.5rem}
.epigraph blockquote{margin:0;font-size:1.42rem;line-height:1.42;font-weight:330;font-style:italic;text-indent:-.42em;text-wrap:balance}
@supports (hanging-punctuation:first){.epigraph blockquote{text-indent:0}}
.epigraph cite{display:block;margin-top:1rem;font-size:15px;font-style:normal;color:var(--faint)}
.epigraph cite i{font-style:italic}

/* ---------- Reading: text keeps the column; the portrait floats beside it, then hangs in the margin ---------- */
.reading>.shot{float:right;width:10.5rem;margin:.3rem 0 1rem 1.8rem}
.reading>.shot img{filter:saturate(.82)}
.reading:after{content:"";display:block;clear:both}
.hike{margin-top:2.6rem}
.hike .shot img{filter:saturate(.85)}
[data-theme=dark] .hike .shot img{filter:saturate(.8) brightness(.9)}
.hike figcaption{margin-top:.7rem;font-size:15px;font-style:italic;color:var(--faint)}
@media (min-width:1320px){
 .reading>.shot{float:none;position:absolute;top:0;right:calc(100% - var(--gutter) + 2.4rem);width:13rem;margin:0}
}

/* ---------- Path and certificate ---------- */
.cert{display:grid;grid-template-columns:9rem 1fr;gap:1.4rem;align-items:center;margin:0 0 2.4rem;padding:1.2rem;background:var(--mat);border-radius:3px}
.cert .shot{border-radius:2px}
.cert b{font-weight:500;display:block;font-variant-numeric:lining-nums}
.cert span{display:block;color:var(--soft);font-size:16px}
.cert .links{margin-top:.5rem;font-size:15.5px;display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.path li{grid-template-columns:var(--label) 1fr;gap:var(--label-gap);align-items:baseline}
.path li>span{font-variant-numeric:lining-nums tabular-nums;font-size:16px;color:var(--faint)}
.path li b{display:block}
.path li em{display:block;font-style:normal;color:var(--soft)}
.path li p{font-size:16px;color:var(--soft);margin-top:.3rem}

/* ---------- Contact and footer ---------- */
.end{padding-bottom:5rem}
.end p.big{font-size:1.5rem;font-weight:350;line-height:1.38;max-width:24ch;text-wrap:balance}
.mailrow{display:flex;align-items:baseline;gap:1.1rem;margin-top:1.6rem;flex-wrap:wrap}
.mailrow a{font-size:1.25rem}
.copy{font-size:15px;color:var(--faint);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.22em}
.end .also{margin-top:1rem;font-size:16px;color:var(--faint);display:flex;flex-wrap:wrap;gap:.2rem 1rem}
footer.col{font-size:14.5px;color:var(--faint);line-height:1.6;padding-top:1.4rem;padding-bottom:max(7rem,env(safe-area-inset-bottom))}

/* ---------- Lightbox ---------- */
dialog.lb{margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;border:0;background:color-mix(in srgb,var(--bg) 94%,transparent);color:var(--ink);
 display:grid;grid-template-rows:1fr auto;place-items:center;padding:60px 4vw 3vh;opacity:0;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;
 transition:opacity .35s ease,overlay .35s allow-discrete,display .35s allow-discrete}
dialog.lb:not([open]){display:none}
dialog.lb[open]{opacity:1}
@starting-style{dialog.lb[open]{opacity:0}}
dialog.lb::backdrop{background:transparent;backdrop-filter:blur(6px)}
dialog.lb img{max-width:100%;max-height:calc(100dvh - 150px);border-radius:4px;box-shadow:var(--shadow);transition:transform .45s cubic-bezier(.2,.7,.2,1);transform:scale(.985);user-select:none;-webkit-user-drag:none}
dialog.lb[open] img{transform:none}
dialog.lb .bar{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;width:min(60rem,100%);gap:1rem;align-items:center;font-size:15.5px;color:var(--soft);margin-top:1rem;font-style:italic;text-align:center}
dialog.lb .bar .n{font-style:normal;color:var(--faint);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
dialog.lb button{color:var(--soft);font-size:15px;min-width:44px;min-height:44px;display:inline-grid;place-items:center;border-radius:3px}
dialog.lb button:hover{color:var(--ink)}
dialog.lb button svg{display:block}
dialog.lb .x{position:fixed;top:max(8px,env(safe-area-inset-top));right:14px;padding:0 .6rem}

/* ---------- Project details dialog ---------- */
dialog.pd{overflow:hidden;margin:auto;width:min(46rem,calc(100vw - 32px));max-height:calc(100dvh - 48px);border:0;border-radius:4px;background:var(--bg);color:var(--ink);
 box-shadow:var(--shadow),0 30px 80px -20px rgba(0,0,0,.35);padding:0;opacity:0;transform:translateY(8px);overscroll-behavior:contain;
 transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),overlay .35s allow-discrete,display .35s allow-discrete}
dialog.pd[open]{opacity:1;transform:none}
@starting-style{dialog.pd[open]{opacity:0;transform:translateY(8px)}}
dialog.pd::backdrop{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(5px)}
.pd .inner{position:relative;padding:3.8rem 2.2rem 2.2rem;overflow:auto;max-height:calc(100dvh - 48px);overscroll-behavior:contain}
.pd .inner>:not(.pimg){max-width:31rem}
.pd .inner:focus{outline:none}
/* scrolled text fades out under Close instead of running into it */
.pd .inner{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 52px,#000 66px);mask-image:linear-gradient(to bottom,transparent 0,transparent 52px,#000 66px)}
.pd .pimg{display:block;width:100%;height:auto;border-radius:3px;margin-bottom:1.6rem;box-shadow:var(--shadow);background:var(--mat)}
.pd h3{font-size:1.5rem;font-weight:450;line-height:1.22}
.pd .tagline{margin-bottom:1.2rem}
.pd h4{font-size:15px;font-weight:500;color:var(--faint);margin:1.4rem 0 .3rem}
.pd p{font-size:17.5px}
.pd .stack{font-size:15.5px;color:var(--soft)}
.pd .links{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:16px}
.pd .x{position:absolute;top:6px;right:10px;z-index:1;font-size:15px;color:var(--soft);background:none;border-radius:3px;min-height:44px;padding:0 .7rem;
 text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.22em}

/* ---------- Narrow screens ---------- */
@media (max-width:720px){
 html{font-size:18px}
 .lead{padding-top:7vh;padding-bottom:4vh}.lead h1{font-size:1.75rem}
 dl.story,.plain li,.path li{grid-template-columns:1fr;gap:.2rem}
 dl.story dd{margin-bottom:.8rem}
 .gal{grid-template-columns:1fr 24%}
 .things li{grid-template-columns:5.5rem 1fr}
 .cert{grid-template-columns:6rem 1fr}
 .epigraph blockquote{font-size:1.25rem}
 .pd .inner{padding:3.8rem 1.2rem 1.6rem}
 dialog.lb{padding:60px 10px max(14px,env(safe-area-inset-bottom))}
 dialog.lb img{max-height:calc(100dvh - 200px)}
 dialog.lb .bar{display:grid;grid-template-columns:44px 1fr 44px;gap:.2rem .4rem;font-size:14.5px;width:100%}
 dialog.lb #lbp{grid-column:1;grid-row:1}dialog.lb #lbc{grid-column:2;grid-row:1}
 dialog.lb .bar .n{grid-column:2;grid-row:2}dialog.lb #lbx{grid-column:3;grid-row:1}
}
@media (max-width:600px){.reading>.shot{float:none;width:100%;max-width:15rem;margin:0 0 1.4rem}}
@media (max-width:480px){.cert{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1rem}.cert .shot{max-width:13rem}.cert .links a{white-space:nowrap}footer .sep{display:none}footer .sep+.nw{display:block}}
@media (max-width:420px){:root{--gutter:20px}header.top{padding:22px var(--gutter);font-size:15px;column-gap:10px}header.top .tools{gap:10px}.tswitch{font-size:15px}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 html,body *,body:before,.shot img,dialog.lb,dialog.lb img,dialog.pd,details::details-content,.pm:after{transition:none!important}
 ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- Print: a plain, text-first version ---------- */
@media print{
 :root,[data-theme=dark]{color-scheme:light;--bg:#fff;--ink:#000;--soft:#333;--faint:#555;--link:#000;--rule:#bbb}
 @page{margin:14mm 16mm}
 html{font-size:10.5pt;line-height:1.5}
 .col,.wide,.wide.mid,header.top{max-width:none}
 body:before,body:after,.tools,.toc,.clock,.mat,.reading>.shot,.hike,.copy,.hint,dialog,.aside,.things .shot,.cert .shot,.epigraph{display:none!important}
 section{padding-top:1.4rem}
 .epigraph+section{padding-top:1.4rem} /* the epigraph is hidden but still matches +; beat the screen value */
 .lead{padding-top:0;padding-bottom:0}.end{padding:1.4rem 0}
 footer.col{padding-bottom:0}
 .work,.smaller{margin-top:2.4rem}.intro+.work{margin-top:1.4rem}
 h2,h3,summary{break-after:avoid}
 .how p,.path li,.plain li,.things li,.cert,dl.story>dd{break-inside:avoid}
 .things li{grid-template-columns:1fr}
 .things .more,.plain .more{color:#000;text-decoration:none;cursor:auto}
 .cert{grid-template-columns:1fr;background:none;padding:0}
 details::details-content{block-size:auto!important;content-visibility:visible!important}.pm{display:none}
 .sn{position:static;width:auto} /* scaled print can be wider than 1320px */
 a.ext:after{content:" (" attr(href) ")";font-size:.8em;display:inline;width:auto;height:auto;margin:0;vertical-align:baseline;opacity:1;background:none;-webkit-mask:none;mask:none}
 .plain a.ext:after,.cert a.ext:after{content:none}
}