/* wescaldwell.com: the monograph. An art book printed on black, gathered in signatures (sections) that alternate
   true black and a warm raised black, with one bone leaf tipped in for the epigraphs.
   Bodoni Moda (display, optical sizes, small caps) and Newsreader (text). Gold is for the proof dagger,
   the footnote rule, the colophon mark, the dial's live signal and seconds hand, and the focus ring. Nothing else. */
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/BodoniModa-roman.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/BodoniModa-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/Newsreader-roman.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}

:root{
  --ink:#000;        /* the page: true black */
  --bone:#ECE5D6;    /* type, 16.9:1 */
  --ash:#A39D90;     /* secondary type, 7.8:1 */
  --smoke:#5E5A52;   /* leaders and ornaments only, never text (3.1:1) */
  --rule:#24211D;    /* hairlines */
  --gilt:#C9AE7C;    /* champagne gold, 9.8:1: used almost nowhere */
  --raised:#15130F;  /* the warm raised black of alternate sections: bone 14.8:1, ash 6.9:1, gold 8.7:1 */
  --rule-hi:#4A443A; /* the full-bleed hairline that opens each section */
  --leaf:#ECE5D6;    /* the tipped-in bone leaf: black type 16.8:1 */
  --leaf-ash:#5A5347;/* secondary type on the leaf, 6.1:1 */
  --leaf-rule:#B9B09D;
  --bronze:#6B5428;  /* the focus ring on the leaf, 5.7:1 (gold on bone would be 1.8:1) */
  --band:clamp(40px,5.2vh,48px);
  --display:"Bodoni Moda","Didot","Bodoni 72",serif;
  --text:"Newsreader","Iowan Old Style",Georgia,serif;
  --margin:clamp(20px,6.7vw,96px);
  --gap:clamp(16px,2.2vw,32px);
  --pad:max(var(--margin),calc((100% - 1248px) / 2));
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark;-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--text);font-size:18px;line-height:1.6;
  font-optical-sizing:auto;font-kerning:normal;font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gilt);outline-offset:4px}
::selection{background:var(--bone);color:var(--ink)}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0}
.sc{font-family:var(--display);font-style:normal;font-variant-caps:all-small-caps;letter-spacing:.09em;font-feature-settings:"kern","c2sc","smcp","onum"}
.it{font-family:var(--display);font-style:italic}
.u{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .5s ease,color .3s}
.u:hover{background-size:0 1px;background-position:100% 100%}
.skip{position:absolute;left:12px;top:-60px;z-index:9;background:var(--bone);color:var(--ink);padding:8px 14px;font-size:15px}
.skip:focus{top:12px}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad)}
.h{font-family:var(--display);font-style:italic;font-size:clamp(38px,3.6vw,52px);line-height:1;letter-spacing:-.02em}
.dek{margin:10px 0 0;color:var(--ash);font-size:16px}
.dek .sc{font-size:17px}
.spread{padding-top:clamp(20px,2.8vh,26px)}
.sheet .spread{padding-top:clamp(18px,2.6vh,24px)}

/* ---------- signatures: every section after the title page ---------- */
.sig{background:var(--surf,var(--ink));border-top:1px solid var(--rule-hi);padding-bottom:var(--band)}
.sig.raised{--surf:var(--raised)}
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:11px var(--pad) 0;color:var(--ash);line-height:1.2}
.rh .sc{font-size:15px;letter-spacing:.16em}
.rh .fo{letter-spacing:.06em}
/* The leaf: one bone page tipped in among the black ones. Black type, bronze focus ring. */
.leaf{grid-column:1 / -1;background:var(--leaf);color:#000;padding:clamp(26px,3.6vh,36px) clamp(22px,4.2vw,60px) clamp(28px,4vh,40px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:calc(var(--gap) * 2);align-items:baseline;
  box-shadow:inset 0 3px 0 #DCD3C0}
.leaf ::selection{background:#000;color:var(--leaf)}
.leaf :focus-visible{outline-color:var(--bronze)}
.leaf .h{grid-column:1;grid-row:1}
.leaf .more{grid-column:2;grid-row:1;margin:0}
.leaf .epigraphs{grid-column:1 / -1;grid-row:2;margin-top:clamp(16px,2.4vh,22px);grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(var(--gap) * 1.5)}
.leaf.all .epigraphs{row-gap:34px}
.leaf .epigraphs blockquote{border-top:1px solid var(--leaf-rule);padding-top:14px}
.leaf .epigraphs footer{color:var(--leaf-ash)}

/* ---------- running head ---------- */
.head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:28px var(--pad) 0}
.brand{font-size:17px;color:var(--bone)}
.head nav{display:flex;gap:clamp(18px,2.6vw,40px)}
.head nav a{font-family:var(--display);font-style:italic;font-size:17px;color:var(--ash);transition:color .3s}
.head nav a:hover,.head nav a[aria-current]{color:var(--bone)}

/* ---------- title page ---------- */
.title{align-content:center;padding-block:clamp(32px,4.4vh,48px) var(--band)}
.title-text{grid-column:1 / span 7;align-self:end}
.name{font-family:var(--display);font-size:clamp(76px,12.4vw,180px);line-height:.8;letter-spacing:-.035em;margin:0 0 0 -.04em;font-feature-settings:"kern","liga","dlig"}
.name span{display:block}
.name span+span{padding-left:.62em}
.claim{text-wrap:balance;font-family:var(--display);font-style:italic;font-size:clamp(28px,2.9vw,42px);line-height:1.12;letter-spacing:-.012em;margin:clamp(26px,4vh,40px) 0 0;max-width:16em}
.dag{font-style:normal;color:var(--gilt);font-size:.55em;vertical-align:.75em;line-height:0;margin-left:.08em;padding:0 .1em}
.sub{text-wrap:pretty;max-width:32em;margin-top:18px;color:var(--ash);font-size:clamp(16px,1.25vw,18px)}
.volume{margin-top:14px;max-width:36em;font-size:clamp(16px,1.25vw,18px)}
.volume a{white-space:nowrap}
.foot{position:relative;margin-top:clamp(26px,4vh,44px);padding-top:14px;max-width:36em;font-size:14.5px;line-height:1.55;color:var(--ash)}
.foot::before{content:"";position:absolute;top:0;left:0;width:72px;height:1px;background:var(--gilt)}
.foot .dg{color:var(--gilt);font-family:var(--display);margin-right:.35em}
.foot a{color:var(--bone)}

.frontis{grid-column:9 / span 4;align-self:center;margin:0}
.plate-wrap{position:relative;perspective:1600px}
.frontis img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.tissue{position:absolute;inset:-1px;transform-origin:50% 0;pointer-events:none;
  background:linear-gradient(170deg,rgba(242,237,226,.58),rgba(236,229,214,.44) 60%,rgba(242,237,226,.54));
  -webkit-backdrop-filter:blur(5px) saturate(.4);backdrop-filter:blur(5px) saturate(.4);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:9%;
  animation:lift 2.8s cubic-bezier(.65,0,.25,1) 1.1s forwards}
.tissue span{font-family:var(--display);font-style:italic;font-size:clamp(15px,1.3vw,19px);color:rgba(0,0,0,.62)}
@keyframes lift{0%{transform:rotateX(0) translateY(0);opacity:1}55%{opacity:.9}100%{transform:rotateX(-78deg) translateY(-14%);opacity:0;visibility:hidden}}
figcaption{font-size:14.5px;line-height:1.45;color:var(--ash);margin-top:12px;text-wrap:pretty}
figcaption .sc{color:var(--bone);font-size:15px;margin-right:.6em}
figcaption .it{color:var(--bone)}

/* ---------- contents and plates ---------- */
.toc{grid-column:8 / span 5;grid-row:1}
.toc ol{list-style:none;margin:20px 0 0;padding:0}
.toc li a{display:flex;align-items:baseline;gap:10px;padding:3px 0;font-family:var(--display);font-size:20px;line-height:1.3;transition:color .3s}
.toc li a:has(.r)::after{content:"";order:2;flex:1;border-bottom:1px dotted var(--smoke);transform:translateY(-4px);min-width:24px}
.toc .r{order:3;font-size:15.5px;color:var(--ash);white-space:nowrap}
.toc .r.sc{font-size:16px;color:var(--bone)}
.toc li a:hover{color:var(--ash)}
.toc li.gap{margin-top:14px}
.toc li.all{display:none}

.plate{margin:0}
.plate a{display:block}
.plate img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#0a0908;filter:brightness(.9) saturate(.88);transition:filter .5s}
.plate a:hover img{filter:none}
.plate-dial{grid-column:1 / span 6;grid-row:1}
.platemark{display:block}
.dial.platemark{border:1px solid var(--rule);padding:clamp(14px,3.2%,32px);background:var(--ink)}
.plate-dial .dial{max-width:430px}
.plates{grid-column:1 / -1;grid-row:2;margin-top:clamp(32px,4vh,44px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:40px}
.plates.n1{grid-template-columns:minmax(0,1fr)}
.plates.n2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- the dial (inline SVG; dial.js moves it) ---------- */
.dial-svg{display:block;width:100%;height:auto;overflow:visible}
.dial-svg line,.dial-svg path,.dial-svg circle{vector-effect:non-scaling-stroke}
.dial-svg .bezel line{stroke:var(--bone);stroke-width:.7;stroke-opacity:.22}
.dial-svg .bezel .md{stroke-opacity:.45}
.dial-svg .bezel .mj{stroke-opacity:.8;stroke-width:1.3}
.dial-svg .sweep{fill:none;stroke:#fff;stroke-width:44;stroke-dasharray:1 1;stroke-dashoffset:0;vector-effect:none}
.dial-svg .ring{fill:none;stroke:var(--bone);stroke-opacity:.2;stroke-width:.8}
.dial-svg .tracks circle{fill:none;stroke:var(--bone);stroke-opacity:.12;stroke-width:.8}
.dial-svg .tracks circle:nth-child(2){stroke-opacity:.16}
.dial-svg .tracks .dash{stroke-dasharray:2 5}
.dial-svg .sub line{stroke:var(--bone);stroke-opacity:.22;stroke-width:.7}
.dial-svg .sub .mj{stroke-opacity:.5}
.dial-svg .eng{fill:var(--ash);font-family:var(--display);font-size:26px;letter-spacing:.26em;font-variant-caps:all-small-caps;font-feature-settings:"c2sc","smcp"}
.dial-svg .eng.top{font-variant-caps:normal;letter-spacing:.12em;font-size:24px}
.dial-svg .links path{fill:none;stroke:var(--bone);stroke-opacity:.12;stroke-width:.8}
.dial-svg .links .hl{stroke-opacity:.22}
.dial-svg .halo{fill:none;stroke:var(--bone);stroke-opacity:.2;stroke-width:.8}
.dial-svg .jewel{fill:var(--ink);stroke:var(--bone);stroke-opacity:.6;stroke-width:1}
.dial-svg .core{fill:var(--bone);fill-opacity:.55}
.dial-svg .hub .core{fill-opacity:.95}
.dial-svg .hub .jewel{stroke-opacity:.85}
.dial-svg .sigs circle{fill:var(--gilt);stroke:none}
.dial-svg .hand .stem{fill:none;stroke:var(--bone);stroke-opacity:.55;stroke-width:.8}
.dial-svg .hand .tip{stroke:var(--gilt);stroke-width:2.6;stroke-linecap:butt}
.dial:not(a) .dial-svg{cursor:crosshair}
/* Power-on, once, when the dial first scrolls into view. Without JS or with reduced motion: the finished frame. */
@media (prefers-reduced-motion:no-preference){
  .js .dial:not(.lit) .pw{opacity:0;animation:dial-safe 0s 4s forwards}
  .js .dial:not(.lit) .sweep{stroke-dashoffset:1;animation:dial-safe-sweep 0s 4s forwards}
  .dial.lit .sweep{animation:dial-sweep 1.3s cubic-bezier(.3,.6,.2,1) both}
  .dial.lit .ring,.dial.lit .tracks,.dial.lit .sub,.dial.lit .eng{animation:dial-fade 1s ease .35s both}
  .dial.lit .links{animation:dial-fade .8s ease 1.2s both}
  .dial.lit .node{animation:dial-fade .4s ease-out calc(.95s + var(--i) * .14s) both}
  .dial.lit .hand{animation:dial-fade .6s ease 2s both}
}
@keyframes dial-sweep{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dial-fade{from{opacity:0}to{opacity:1}}
@keyframes dial-safe{to{opacity:1}}
@keyframes dial-safe-sweep{to{stroke-dashoffset:0}}

/* ---------- now, field notes, how I think ---------- */
.later{align-items:start}
.now{grid-column:1 / span 7}
.note{grid-column:9 / span 4}
.now ul{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
.now li{padding:0 0 12px}
.now li b{display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:21px;line-height:1.25}
.now li b a:hover{color:var(--ash)}
.now li span{display:block;color:var(--ash);font-size:15px;line-height:1.5;margin-top:2px;max-width:30em}
.note .h a{transition:color .3s}
.note .h a:hover{color:var(--ash)}
.note h3{text-wrap:balance;font-family:var(--display);font-size:clamp(30px,2.6vw,40px);line-height:1.04;letter-spacing:-.022em;margin-top:22px}
.note h3 a{transition:color .3s}
.note h3 a:hover{color:var(--ash)}
.note .lede{text-wrap:pretty;font-family:var(--display);font-style:italic;font-size:20px;line-height:1.35;margin-top:16px;max-width:30em}
p.more{margin-top:18px;font-family:var(--display);font-style:italic;font-size:18px;display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline}
.more .feed{font-size:16px;color:var(--ash);transition:color .3s}
.more .feed:hover{color:var(--bone)}
.epigraphs{margin-top:28px;display:grid;row-gap:24px}
.epigraphs blockquote{margin:0}
.epigraphs p{text-wrap:balance;font-family:var(--display);font-style:italic;font-size:clamp(22px,1.9vw,27px);line-height:1.18;letter-spacing:-.01em}
.epigraphs footer{text-wrap:pretty;margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--ash);max-width:30em}

/* ---------- correspondence and colophon (every page) ---------- */
.close{padding-top:clamp(20px,2.8vh,26px);align-items:start}
.close-h{grid-column:1 / span 6;font-family:var(--display);font-style:italic;font-size:clamp(50px,6vw,88px);line-height:.94;letter-spacing:-.035em;margin-left:-.03em;text-wrap:balance}
.write{grid-column:8 / span 5;padding-top:10px}
.write>p:first-child{color:var(--ash);max-width:30em}
.mail{display:inline-block;margin-top:20px;font-family:var(--display);font-size:clamp(24px,2.2vw,31px);letter-spacing:-.01em}
.sin{margin-top:12px;font-size:15px;color:var(--ash)}
.sin a{color:var(--bone)}
.elsewhere{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;color:var(--ash)}
.elsewhere a:hover{color:var(--bone)}
main+.colophon{margin-top:clamp(56px,7vh,80px)}
.colophon{padding-block:22px 30px;border-top:1px solid var(--rule-hi);align-items:center;row-gap:10px;font-size:14px;color:var(--ash)}
.colophon .mark{grid-column:1 / span 4;display:flex;align-items:center;gap:12px}
.colophon .mark svg{flex:none;color:var(--gilt)}
.colophon nav{grid-column:5 / span 3;display:flex;gap:20px;white-space:nowrap}
.colophon nav a:hover{color:var(--bone)}
.colophon .set{grid-column:8 / span 5;text-align:right;text-wrap:balance}

/* ---------- project pages: one plate ---------- */
.plate-page{padding-top:clamp(40px,7vh,72px);padding-bottom:var(--band);align-items:start}
.crumbs{display:flex;gap:16px;align-items:baseline;font-family:var(--display);font-style:italic;font-size:17px;color:var(--ash)}
.crumbs .sc{font-style:normal;color:var(--bone);font-size:16px}
.pp-head{grid-column:1 / span 5;grid-row:1}
.pp-head .kick{margin-top:clamp(28px,5vh,52px);color:var(--ash);font-size:17px}
.pp-head h1{font-family:var(--display);font-size:clamp(52px,6.2vw,92px);line-height:.92;letter-spacing:-.03em;margin:12px 0 0 -.03em;text-wrap:balance}
.pp-head .lede{margin-top:24px;font-family:var(--display);font-style:italic;font-size:clamp(21px,1.7vw,25px);line-height:1.3;text-wrap:pretty;max-width:22em}
.facts{margin:30px 0 0;display:grid;grid-template-columns:auto 1fr;column-gap:24px;font-size:15.5px}
.facts div{display:contents}
.facts dt,.facts dd{padding:9px 0;border-top:1px solid var(--rule)}
.facts dt{font-family:var(--display);font-variant-caps:all-small-caps;letter-spacing:.09em;font-feature-settings:"c2sc","smcp";color:var(--ash);font-size:16px}
.facts dd{margin:0}
.facts div:last-child dt,.facts div:last-child dd{border-bottom:1px solid var(--rule)}
.pp-head .note{margin-top:12px;font-size:14.5px;color:var(--ash);max-width:30em}
.pp-plate{grid-column:7 / span 6;grid-row:1;margin:0;align-self:start;padding-top:clamp(8px,4vh,40px)}
.pp-plate img,.pp-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#0a0908}
.pp-plate.book img{object-position:50% 30%}
.has-dial .pp-plate{padding-top:0}
.svg-fig,.illus{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.pp-figs,.pp-text{padding-top:clamp(28px,4vh,44px);align-items:start}
.metrics{grid-column:1 / -1;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.metrics div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding-top:20px}
.metrics dd{margin:0;font-family:var(--display);font-size:clamp(44px,4.6vw,68px);line-height:1;letter-spacing:-.02em;font-feature-settings:"lnum","pnum"}
.metrics dt{margin-top:10px;color:var(--ash);font-size:15.5px;line-height:1.45;max-width:18em}
.pp-shot{grid-column:1 / -1;margin:0;display:grid;grid-template-columns:subgrid;align-items:end}
.pp-shot .platemark{grid-column:1 / span 8}
.pp-shot figcaption{grid-column:9 / span 3;margin:0;padding-bottom:2px}
.metrics+.pp-shot{margin-top:clamp(48px,7vh,72px)}
.pp-body{grid-column:1 / -1;margin-top:0;display:grid;grid-template-columns:subgrid;row-gap:clamp(36px,5vh,52px)}
.sec{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}
.sec h2{grid-column:1 / span 4;font-family:var(--display);font-style:italic;font-size:clamp(28px,2.5vw,36px);line-height:1.1;letter-spacing:-.015em}
.sec .txt{grid-column:5 / span 7;max-width:36em}
.sec .txt p+p,.sec .txt ul{margin-top:1em}
.sec .txt ul{padding-left:1.1em}
.sec .txt li::marker{color:var(--smoke)}
.sec .go{margin-top:1.1em;font-family:var(--display);font-style:italic;font-size:19px}
.stack h2{font-size:clamp(22px,1.9vw,26px);padding-top:4px}
.stack .txt{color:var(--ash)}
.pager{grid-column:1 / -1;margin-top:clamp(56px,8vh,80px);display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);padding-top:22px}
.pager a{display:flex;flex-direction:column;gap:4px;max-width:48%}
.pager a+a{text-align:right;align-items:flex-end}
.pager .sc{font-size:15px;color:var(--ash)}
.pager b{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.15;transition:color .3s}
.pager a:hover b{color:var(--ash)}
.no-fig .pp-head{grid-column:1 / span 8}

/* ---------- field notes and privacy: a chapter ---------- */
.chapter{max-width:calc(36em + 2 * var(--margin));margin:0 auto;padding:clamp(48px,9vh,96px) var(--margin) var(--band)}
.ch-kick a.sc{color:var(--ash);font-size:17px;transition:color .3s}
.ch-kick a.sc:hover{color:var(--bone)}
.ch-head{text-align:center;padding-bottom:clamp(32px,5vh,48px);border-bottom:1px solid var(--rule)}
.ch-kick .sc,.lost .ch-kick .sc{color:var(--ash);font-size:17px}
.ch-head h1{font-family:var(--display);font-size:clamp(44px,5.4vw,76px);line-height:.98;letter-spacing:-.028em;margin-top:18px;text-wrap:balance}
.ch-head .lede{margin:22px auto 0;font-family:var(--display);font-style:italic;font-size:clamp(20px,1.8vw,24px);line-height:1.35;max-width:26em;text-wrap:balance}
.byline{margin-top:20px;font-size:15px;color:var(--ash)}
.byline a{color:var(--bone)}
.ch-body{padding-top:clamp(32px,5vh,48px);font-size:19.5px;line-height:1.65;hyphens:auto;-webkit-hyphens:auto}
.ch-body p{margin:0}
.ch-body p+p{text-indent:1.5em}
.ch-body>p:first-child::first-letter{font-family:var(--display);float:left;font-size:4.1em;line-height:.8;padding:.08em .08em 0 0}
.ch-body h2{margin:1.9em 0 .55em;font-family:var(--display);font-style:italic;font-size:clamp(26px,2.2vw,31px);line-height:1.15;letter-spacing:-.012em;text-wrap:balance;hyphens:manual}
.ch-body ul{margin:.9em 0;padding-left:1.2em}
.ch-body li{margin:.25em 0}
.ch-body li::marker{color:var(--ash)}
.ch-body ul+p{text-indent:0}
.ch-body a{color:var(--bone)}
.ch-end{margin-top:clamp(40px,6vh,64px)}
.fin{display:block;width:48px;height:1px;background:var(--smoke);margin:0 auto}
.ch-end .pager{margin-top:clamp(40px,6vh,64px)}

/* ---------- about the author ---------- */
.about{padding-top:clamp(40px,7vh,72px);padding-bottom:var(--band);align-items:start}
.ab-head{grid-column:1 / span 7;grid-row:1}
.ab-head h1{font-family:var(--display);font-size:clamp(60px,8vw,124px);line-height:.88;letter-spacing:-.035em;margin:clamp(24px,4vh,44px) 0 0 -.04em}
.ab-head .lede{margin-top:28px;font-family:var(--display);font-style:italic;font-size:clamp(23px,2.1vw,30px);line-height:1.25;max-width:21em;text-wrap:pretty}
.ab-portrait{grid-column:9 / span 4;grid-row:1 / span 2}
.ab-body{grid-column:2 / span 6;grid-row:2;margin-top:clamp(36px,5vh,52px);font-size:19px;line-height:1.65;max-width:36em}
.ab-body p+p{text-indent:1.5em}
.ab-body p:first-child::first-letter{font-family:var(--display);float:left;font-size:4em;line-height:.8;padding:.08em .08em 0 0}
.eras{grid-column:1 / -1;list-style:none;margin:0;padding:clamp(28px,4vh,44px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.eras li{padding-top:0}
.eras h2{font-size:18px;color:var(--ash)}
.eras p{margin-top:8px;font-family:var(--display);font-style:italic;font-size:clamp(20px,1.7vw,23px);line-height:1.3;text-wrap:pretty}
.lab{grid-column:1 / span 7}
.lab dl{margin:24px 0 0}
.lab div{display:grid;grid-template-columns:1fr auto;column-gap:16px;padding:14px 0;border-top:1px solid var(--rule)}
.lab div:last-child{border-bottom:1px solid var(--rule)}
.lab dt{font-family:var(--display);font-size:20px;line-height:1.3}
.lab dd{margin:0}
.lab .st{grid-column:2;grid-row:1;color:var(--ash);font-size:16px}
.lab .nt{grid-column:1 / -1;color:var(--ash);font-size:15px;line-height:1.5;margin-top:2px}
.ab-body a,.eras a{color:var(--bone)}

/* ---------- work with me (2026-11-01): the teaser on home, the offer page's contents and the audit on the leaf ---------- */
.hire{align-items:start}
.hire-text{grid-column:1 / span 6}
.hire-text .h a{transition:color .3s}
.hire-text .h a:hover{color:var(--ash)}
.hire-text .lede{margin-top:18px;font-family:var(--display);font-style:italic;font-size:clamp(20px,1.7vw,24px);line-height:1.32;max-width:24em;text-wrap:pretty}
.hire-list,.of-toc{list-style:none;margin:0;padding:0}
.hire-list{grid-column:8 / span 5;padding-top:6px}
.hire-list a,.of-toc a{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-top:1px solid var(--rule)}
.hire-list li:last-child a,.of-toc li:last-child a{border-bottom:1px solid var(--rule)}
.hire-list .r,.of-toc .r{flex:none;min-width:2.4em;color:var(--ash);font-size:16px}
.hire-list .t,.of-toc .t{font-family:var(--display);font-size:21px;line-height:1.25;transition:color .3s}
.hire-list a:hover .t,.of-toc a:hover .t{color:var(--ash)}
.of-toc{margin-top:clamp(28px,4vh,40px);max-width:30em}
.of .sec .txt ul{margin-top:1.1em}
.of .sec .txt li+li{margin-top:.35em}
.start-leaf .start-p{grid-column:1 / -1;margin-top:16px;max-width:40em}
.start-leaf .start-p p+p{margin-top:.8em}
.start-leaf .steps{grid-column:1 / -1;list-style:none;margin:clamp(20px,2.8vh,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(var(--gap) * 1.5)}
.steps li{border-top:1px solid var(--leaf-rule);padding-top:14px}
.steps .sc{color:var(--leaf-ash);font-size:17px}
.steps p{margin-top:6px;font-family:var(--display);font-style:italic;font-size:clamp(20px,1.7vw,23px);line-height:1.25;text-wrap:pretty}
@media (max-width:760px){
  .hire-text,.hire-list{grid-column:1 / -1}
  .hire-list{margin-top:22px;padding-top:0}
  .hire-list .t,.of-toc .t{font-size:19px}
  .start-leaf .steps{grid-template-columns:1fr;row-gap:14px}
  .steps p{font-size:20px}
}

/* ---------- the field notes index: a list of chapters ---------- */
.notes-index{max-width:calc(44em + 2 * var(--margin))}
.chapters{list-style:none;margin:0;padding:0}
.chapters li{display:grid;grid-template-columns:4.2em minmax(0,1fr);column-gap:var(--gap);padding:clamp(28px,4vh,40px) 0;border-bottom:1px solid var(--rule)}
.ch-no{font-size:22px;color:var(--ash);padding-top:.35em;font-variant-numeric:oldstyle-nums}
.ch-entry h2{font-family:var(--display);font-size:clamp(32px,3.4vw,46px);line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
.ch-entry h2 a{transition:color .3s}
.ch-entry h2 a:hover{color:var(--ash)}
.ch-entry .sub{margin-top:14px;font-family:var(--display);font-style:italic;font-size:clamp(19px,1.6vw,22px);line-height:1.35;max-width:30em;text-wrap:pretty}
.ch-entry .meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline;font-size:15px;color:var(--ash)}
.ch-entry .meta .sc{font-size:16px}
.ch-entry .meta a{color:var(--bone)}
.notes-index .ch-end .more{justify-content:center;margin-top:28px}

/* ---------- 404 ---------- */
.lost{min-height:58vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:64px var(--margin) 0}
.lost h1{font-family:var(--display);font-style:italic;font-size:clamp(56px,8vw,112px);line-height:.95;letter-spacing:-.03em;margin-top:16px}
.lost .lede{margin-top:20px;color:var(--ash);font-size:19px}
.lost .more{justify-content:center}

@media (prefers-reduced-motion:reduce){.tissue{display:none}.u,.plate img{transition:none}}

/* ---------- 1100 and narrower ---------- */
@media (max-width:1100px){
  .title-text{grid-column:1 / span 7}
  .frontis{grid-column:8 / span 5}
  .plate-dial{grid-column:1 / span 7}
  .toc{grid-column:8 / span 5}
  .toc li a{font-size:18px}
  .now{grid-column:1 / span 7}
  .note{grid-column:8 / span 5}
  .now ul{grid-template-columns:1fr}
  .close-h{grid-column:1 / span 7}
  .write{grid-column:8 / span 5}
  .colophon .mark{grid-column:1 / span 6}
  .colophon nav{grid-column:7 / span 6;justify-content:flex-end}
  .colophon .set{grid-column:1 / -1;text-align:left}
  .pp-head{grid-column:1 / span 6}
  .pp-plate{grid-column:7 / span 6}
  .pp-shot .platemark{grid-column:1 / span 9}
  .pp-shot figcaption{grid-column:10 / span 3}
  .sec h2{grid-column:1 / span 3}
  .sec .txt{grid-column:4 / span 9}
  .leaf.all .epigraphs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- phones: the same book, set tighter. Everything stays in the HTML; some of it is only hidden here. ---------- */
@media (max-width:760px){
  :root{--band:40px}
  body{font-size:17px}
  .head{padding-top:18px}
  .head .brand{display:none}
  .head nav{gap:18px;width:100%;justify-content:space-between}
  .head nav a{font-size:16px;white-space:nowrap}
  .head nav:has(a:nth-child(4)){gap:10px}
  .head nav:has(a:nth-child(4)) a{font-size:15px}
  .spread{padding-top:26px}
  .rh{padding-top:10px}
  /* Now and Field notes: the heading and its date share a line */
  .later .h{display:inline-block;margin-right:14px}
  .later .dek{display:inline-block;margin:0}
  .rh .sc{font-size:13.5px}
  .title-text,.frontis,.now,.note,.close-h,.write,.pp-head,.pp-plate,.ab-head,.ab-body,.ab-portrait,.lab,.toc,.plate-dial{grid-column:1 / -1}
  /* .no-fig .pp-head (span 8) outranks the line above; on a phone the header takes the full width too */
  .no-fig .pp-head{grid-column:1 / -1}
  .pp-head h1{overflow-wrap:break-word}
  /* title page: a smaller frontispiece; "In this volume" repeats the contents just below, so it rests here */
  .title{min-height:0;position:relative;padding-top:20px}
  .title .frontis{position:absolute;top:20px;right:var(--margin);width:36%}
  .title .frontis figcaption{display:none}
  .title-text{padding-top:calc(36vw - 34px)}
  .name{font-size:clamp(70px,20.5vw,96px)}
  .name span+span{padding-left:.5em}
  .claim{font-size:26px;margin-top:18px}
  .sub{font-size:16px;margin-top:14px}
  .volume{display:none}
  .foot{font-size:13.5px;margin-top:22px}
  /* contents: the four plates, then "And seven more", which opens the full list in place (no JS: :target) */
  .toc{grid-row:1}
  .toc ol{margin-top:16px}
  .toc li a{font-size:18px;padding:5px 0}
  .toc li.x,.toc li.about-li{display:none}
  .toc li.all{display:block;margin-top:10px}
  .toc li.all a{display:inline;padding:0 0 2px;font-style:italic;font-size:17px}
  #all-work:target li.x,#all-work:target li.about-li{display:block}
  #all-work:target li.all{display:none}
  /* Plate I: the dial at two-thirds width, its caption set beside it at the foot, as in a book */
  .plate-dial{grid-row:2;margin-top:24px;display:grid;grid-template-columns:68% 1fr;column-gap:14px;align-items:end}
  .plate-dial .dial{max-width:none;padding:10px}
  .plate-dial figcaption{margin:0}
  .plate-dial figcaption .sc{display:block;margin:0 0 2px}
  figcaption .cap{display:none}
  .plate figcaption{margin-top:9px}
  /* plates II-IV: a strip that scrolls sideways, edge to edge, one and a bit in view */
  .plates{grid-row:3;margin:22px calc(-1 * var(--pad)) 0;padding:0 var(--pad) 4px;display:flex;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .plates::-webkit-scrollbar{display:none}
  .plates .plate{flex:0 0 68%;scroll-snap-align:start}
  .plates.n1 .plate{flex-basis:100%}
  .plates figcaption{font-size:13.5px}
  /* lately: three Now items, then the latest note */
  .now ul{grid-template-columns:1fr;margin-top:16px}
  .now li:nth-child(n+4),.now li span{display:none}
  .now li{padding-bottom:6px}
  .now li b{font-size:21px}
  .note{margin-top:30px}
  .note .feed{display:none}
  .note h3{margin-top:14px;font-size:29px}
  .note .lede{font-size:18px;margin-top:10px}
  p.more{margin-top:14px;font-size:17px;gap:4px 20px}
  .h{font-size:36px}
  .dek{margin-top:6px}
  /* the leaf: lines only; the notes under each epigraph rest on phones */
  .leaf{padding:22px 20px 20px;margin-inline:calc(var(--gap) * -.25);grid-template-columns:1fr}
  .leaf .h,.leaf .more,.leaf .epigraphs{grid-column:1;grid-row:auto}
  .leaf .epigraphs{grid-template-columns:1fr;row-gap:14px;margin-top:18px}
  .leaf .epigraphs blockquote{padding-top:12px}
  .leaf .epigraphs p{font-size:21.5px}
  .leaf .epigraphs footer{display:none}
  .leaf .more{margin-top:18px}
  .leaf.all .epigraphs{grid-template-columns:1fr;row-gap:14px}
  .leaf.all .epigraphs footer{display:block;font-size:14px}
  .close-h{font-size:clamp(44px,12.4vw,58px)}
  .write{margin-top:18px;padding-top:0}
  .mail{margin-top:14px}
  .elsewhere{margin-top:14px}
  .colophon{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding-block:16px 22px;font-size:13.5px}
  .colophon .mark{flex:1 0 100%}
  .colophon nav{gap:16px}
  .colophon .set{flex:1 0 100%;text-align:left}
  .pp-head,.pp-plate{grid-row:auto}
  .pp-plate{margin-top:32px;padding-top:0}
  .metrics{grid-template-columns:1fr}
  .metrics div{padding:14px 0;border-bottom:1px solid var(--rule)}
  .metrics div:first-child{padding-top:0}
  .metrics dd{font-size:44px}
  .sec h2,.sec .txt,.pp-shot .platemark,.pp-shot figcaption{grid-column:1 / -1}
  .pp-shot figcaption{margin-top:12px}
  .sec .txt{margin-top:10px}
  .pager b{font-size:20px}
  .ch-body{font-size:18px}
  .ab-head{grid-row:1}
  .ab-portrait{grid-row:2;margin-top:28px;width:56%}
  .ab-body{grid-row:3;margin-top:28px}
  .eras{grid-template-columns:1fr;padding-top:20px}
  .eras li{padding:12px 0;border-bottom:1px solid var(--rule)}
  .eras li:first-child{padding-top:0}
  .eras li:last-child{border-bottom:0}
  .chapters li{grid-template-columns:2.4em minmax(0,1fr);column-gap:12px}
  .ch-no{font-size:19px;padding-top:.3em}
}