/* ---------------------------------------------------------------
   Field notes, shared by every page: paper and ink, one accent used
   like rubrication, a gutter / reading column / margin grid, and a
   running head that stays at the top while the page scrolls.
   Page styles (home.css, tokens/tokens.css, notes.css) build on this.
   --------------------------------------------------------------- */
:root{
  color-scheme: light;
  --paper:#f4efe5; --paper-2:#ebe4d5;
  --ink:#1a1c21; --ink-2:#4a4741; --ink-3:#686359;
  --rule:#d9d0be; --rule-2:#bfb4a0;
  --accent:#ad3a1f; --wash:rgba(173,58,31,.08); --sel:rgba(173,58,31,.16);
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs:1.1875rem;
  --gw:8.25rem; --g1:2.25rem; --mw:40rem; --g2:3rem; --nw:15.5rem;
  --side:1.25rem;
  --h1:clamp(3rem,1.9rem + 3.6vw,5.25rem);
  --head:3.25rem; /* running head height, for anchor jumps */
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --paper:#111419; --paper-2:#181c23;
    --ink:#e9e3d6; --ink-2:#b4aea2; --ink-3:#948d80;
    --rule:#262b34; --rule-2:#3a414d;
    --accent:#ec8a63; --wash:rgba(236,138,99,.09); --sel:rgba(236,138,99,.26);
  }
  body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 1.25rem);background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:var(--fs);line-height:1.55;font-weight:400;
  font-optical-sizing:auto;font-kerning:normal;text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums proportional-nums;
  hanging-punctuation:first allow-end last;
}
::selection{background:var(--sel)}
img,svg{display:block;max-width:100%}
p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
cite,em{font-style:italic}
b,strong{font-weight:600}
code{font-family:var(--mono);font-size:.8em}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--rule-2);transition:color .15s ease,text-decoration-color .15s ease}
a:hover{color:var(--accent);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
.arr{font-family:var(--mono);font-size:.86em;display:inline-block;transition:transform .15s ease}
a:hover .arr{transform:translate(1px,-1px)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.prt,.print-only{display:none!important}
.nb{white-space:nowrap}
.skip{position:absolute;left:var(--side);top:-3rem;padding:.4rem .7rem;background:var(--ink);color:var(--paper);font:500 .8125rem/1 var(--mono);text-decoration:none;z-index:30}
.skip:focus{top:.75rem}

/* small mono labels, one system everywhere */
.label,.sec-no,.sec-note,.meta,.e-links,.stamp,figcaption,.yr,.refno,.venue,.rh,.keys,.found,.fine{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:400;
}
.label{font-size:.6875rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- grid ---------- */
.row{
  display:grid;
  grid-template-columns:var(--gw) var(--g1) minmax(0,var(--mw)) var(--g2) var(--nw);
  width:min(100% - 2*var(--side), calc(var(--gw) + var(--g1) + var(--mw) + var(--g2) + var(--nw)));
  margin-inline:auto;
}
.c-gutter{grid-column:1}
.c-main{grid-column:3}
.c-notes{grid-column:5}

/* ---------- running head: stays put while the page scrolls ---------- */
.masthead{position:sticky;top:0;z-index:20;background:var(--paper)}
.rh{
  align-items:baseline;padding:1.1rem 0 1rem;border-bottom:1px solid var(--rule);
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.rh a{text-decoration:none}
.rh-name{color:var(--ink)}
.rh nav{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem}
.rh nav [aria-current]{color:var(--ink)}
.rh-date{color:var(--ink-3)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(3rem,7.5vh,5rem);align-items:start}
/* the stamp's last line sits on the h1's baseline */
.stamp{display:flex;flex-direction:column;gap:.1rem;padding-top:max(0px, calc(var(--h1) * .7175 - var(--stamp-lift, 3.0125rem)));font-size:.6875rem;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.stamp.two{--stamp-lift:1.88125rem} /* each line fewer than three: 1.13125rem lower */
.stamp.one{--stamp-lift:.75rem}
h1{font-size:var(--h1);line-height:.98;letter-spacing:-.022em;font-weight:420;margin-left:-.04em}
.standfirst{margin-top:1.4rem;font-size:clamp(1.3rem,1.08rem + .75vw,1.6875rem);line-height:1.32;letter-spacing:-.003em;max-width:33em}
.facts{margin-top:1.9rem;border-top:1px solid var(--rule)}
.facts>div,.logrows>div{display:grid;grid-template-columns:6.25rem minmax(0,1fr);column-gap:1rem;align-items:baseline;padding:.5rem 0 .55rem;border-bottom:1px solid var(--rule)}
.facts dt,.logrows dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{font-size:1rem;line-height:1.5}

/* ---------- sections ---------- */
.section{margin-top:clamp(4.25rem,9vh,6.5rem)}
.sec-head{align-items:baseline;padding-top:1rem;border-top:1px solid var(--rule-2);margin-bottom:2.1rem}
.sec-no{font-size:.75rem;color:var(--accent)}
.sec-head h2{font-size:2.125rem;line-height:1.1;letter-spacing:-.014em}
.sec-note{font-size:.6875rem;line-height:1.55;color:var(--ink-3)}

/* ---------- colophon ---------- */
.colophon{margin-top:clamp(4.5rem,10vh,7rem);padding:1.1rem 0 3.5rem;border-top:1px solid var(--rule-2);align-items:baseline;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.colophon p+p{margin-top:.4rem}
.colophon .fine{margin-top:.9rem;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
.fine a{color:var(--ink-2)}

/* ---------- narrower: margin notes fold under the text ---------- */
@media (max-width: 1060px){
  .row{grid-template-columns:var(--gw) var(--g1) minmax(0,1fr);width:min(100% - 2*var(--side), calc(var(--gw) + var(--g1) + var(--mw)))}
  .c-notes{grid-column:3}
  .rh-date{display:none}
  .sec-note{margin-top:.5rem}
}
@media (max-width: 720px){
  :root{--fs:1.0625rem;--side:1.125rem;--head:2.75rem}
  .row{grid-template-columns:minmax(0,1fr)}
  .c-gutter,.c-main,.c-notes{grid-column:1}
  .rh{padding:.85rem 0 .8rem}
  .rh-name{display:none}
  .rh nav{gap:.3rem 1.15rem}
  .hero{padding-top:2.25rem}
  .stamp{flex-direction:row;flex-wrap:wrap;gap:0 .9rem;padding:0 0 .9rem}
  .standfirst{margin-top:1.1rem}
  .facts>div,.logrows>div{grid-template-columns:5.25rem minmax(0,1fr);column-gap:.75rem}
  .facts dd{font-size:.96875rem}
  .sec-head{margin-bottom:1.5rem}
  .sec-head h2{font-size:1.75rem;margin-top:.15rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .masthead{position:static}
}