/* Base: reset, type roles, the sheet frame and the title strip. */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* whatever the keyboard brings into view stops above the title strip, not under it */
html{scroll-padding-bottom:calc(var(--strip) + env(safe-area-inset-bottom) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.56 var(--serif);
  font-variant-numeric:oldstyle-nums proportional-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-synthesis:none;transition:background-color .6s var(--paper-ease),color .6s var(--paper-ease)}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;z-index:100}
.skip:focus{left:calc(var(--margin) + 8px);top:12px;background:var(--paper);padding:8px 12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- type roles ---- */
.hero{font:300 var(--t-hero)/.92 var(--serif);letter-spacing:-.03em}
.display{font:300 var(--t-display)/.95 var(--serif);letter-spacing:-.025em}
.h2{font:300 var(--t-h2)/1 var(--serif);letter-spacing:-.022em;text-wrap:balance}
.h3{font:400 var(--t-h3)/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.lead{font:300 var(--t-lead)/1.36 var(--serif);text-wrap:pretty}
.body{max-width:34em;color:var(--ink);text-wrap:pretty}
.note{font-size:var(--t-small);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.label,.mono{font:500 var(--t-label)/1.35 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:lining-nums tabular-nums}
.mono{text-transform:none;letter-spacing:.02em}
em{font-style:italic}
.hero em,.display em,.h2 em{font-style:italic;font-weight:300}

/* ---- layout ---- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:calc(var(--margin) + 6px)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
@media (max-width:899px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:599px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* the drawing frame: a hairline border inset by the margin, like a sheet border. Outside it the margin
   stays paper, so the sheet scrolls under its own edge and nothing runs past the line. */
:root{--frame-in:calc(var(--margin) * .45)}
@media (max-width:899px){:root{--frame-in:8px}}
.frame{position:fixed;inset:var(--frame-in);border:1px solid var(--rule);box-shadow:0 0 0 80px var(--paper);pointer-events:none;z-index:30}

/* ---- drawings on paper ---- */
.drawing{position:relative}
.drawing img{width:100%;mix-blend-mode:var(--draw-blend)}
:root[data-theme="blueprint"] .drawing,:root:not([data-theme="day"]) .drawing.card-on-night{}
.drawing.sheet{background:var(--card-bg);box-shadow:var(--card-shadow);padding:var(--card-pad,0)}
:root[data-theme="blueprint"] .drawing.sheet{--card-pad:clamp(10px,2vw,28px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .drawing.sheet{--card-pad:clamp(10px,2vw,28px)}}
/* working drawings become true blueprints at night */
:root[data-theme="blueprint"] .drawing.blueprint img{filter:invert(1) hue-rotate(180deg) saturate(.7);mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .drawing.blueprint img{filter:invert(1) hue-rotate(180deg) saturate(.7);mix-blend-mode:screen}}
/* A reveal (opacity, transform) isolates its element, so a blend set on the img inside meets only
   transparency and flashes white until the reveal ends. Blend the revealed element itself. */
.drawing.rv{mix-blend-mode:var(--draw-blend)}
:root[data-theme="blueprint"] .drawing.blueprint.rv{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .drawing.blueprint.rv{mix-blend-mode:screen}}
/* her lettering keeps its colour by day and turns to chalk at night */
.lettering img{width:auto;max-width:100%}
:root[data-theme="blueprint"] .lettering img{filter:brightness(0) invert(.93)}
:root[data-theme="blueprint"] .card .lettering img{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .lettering img{filter:brightness(0) invert(.93)}:root:not([data-theme="day"]) .card .lettering img{filter:none}}

/* ---- footnotes (asides) ---- */
.fn,.fnm{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .2em;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font:600 .58em/1 var(--mono);font-stretch:87.5%;letter-spacing:0;font-style:normal}
.fn{vertical-align:.6em;margin-left:.12em}
.fnm{min-width:22px;height:22px;font-size:10px;margin-top:3px}
.aside{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:var(--t-small);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.aside em{color:var(--ink)}

/* read aloud, never shown */
.nw{white-space:nowrap}   /* a name or a measure that should not break across lines */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- the title strip: every page is a sheet ---- */
.strip{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,2fr) minmax(0,2fr) 56px;
  border-top:1px solid var(--rule-2);background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  height:calc(var(--strip) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) 0}
.strip>*{display:flex;align-items:center;gap:10px;padding-inline:14px;border-left:1px solid var(--rule);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip>:first-child{border-left:0;padding-left:max(calc(var(--margin) + 6px),env(safe-area-inset-left))}
.strip .label{color:var(--ink)}
.strip .k{color:var(--ink-2);margin-right:2px}
.strip a{text-decoration:none}
.scalebar{position:relative;flex:1;height:8px;min-width:60px;border:1px solid var(--ink);
  background:repeating-linear-gradient(90deg,var(--ink) 0 10%,transparent 10% 20%);background-size:100% 100%;opacity:.9}
.scalebar i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--accent);mix-blend-mode:normal;opacity:.85}
.north{justify-content:center}
.north svg{width:22px;height:22px;transition:transform .8s var(--paper-ease)}
.theme-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;cursor:pointer;font:500 var(--t-label)/1 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.theme-btn i{width:12px;height:12px;border:1px solid var(--ink);background:linear-gradient(90deg,var(--paper) 50%,#0F2747 50%);transition:transform .9s var(--settle)}
.theme-btn[aria-pressed="true"] i{transform:rotate(180deg)}
@media (max-width:899px){
  .strip{grid-template-columns:minmax(0,1fr) auto 48px;height:calc(42px + env(safe-area-inset-bottom))}
  .strip .hide-sm{display:none}
}
/* phones keep the sheet's number and its whole name; "Sheet" and "/ 10" are still read out, just not shown */
@media (max-width:599px){.strip .sheet-btn .k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strip .sheet-btn .st{margin-left:.7em}
  .strip .sheet-btn .caret{margin-left:6px}}
/* the narrowest phones: the theme switch keeps only its swatch */
@media (max-width:359px){.strip .theme-btn span{display:none}}
body{padding-bottom:calc(var(--strip) + env(safe-area-inset-bottom))}

/* ---- entries: each section arrives as one gesture ----
   Gated on html.js (set in the head), so without the script nothing is ever hidden. --rv-b is
   the element's place in the cascade: site.js sets it for things that arrive together, in
   reading order. Blocks rise; headings come up word by word out of a soft blur; lists deal in
   line by line; drawings come last and slowest, settling from a touch smaller, like a sheet
   laid down; numerals set like a stamp; section rules are drawn across. Once per element. */
.js .rv{--rv-t:calc(var(--rv-b,0s) + var(--rv-dd,0s));opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--paper-ease) var(--rv-t),transform 1.3s var(--paper-ease) var(--rv-t)}
.js .rv.in{opacity:1;transform:none}
.js .rv.split,.js .rv.deal{opacity:1;transform:none}
.js .rv.split .w{display:inline-block;opacity:0;transform:translateY(.42em) rotate(2deg);transform-origin:0 100%;filter:blur(8px);
  transition:opacity .9s var(--paper-ease),transform 1.2s var(--paper-ease),filter 1s var(--paper-ease);transition-delay:calc(var(--rv-t) + var(--wi,0) * 60ms)}
.js .rv.split.in .w{opacity:1;transform:none;filter:blur(0)}
.js .rv.deal>*{opacity:0;transform:translateY(20px);transition:opacity .8s var(--paper-ease),transform 1.05s var(--paper-ease);transition-delay:calc(var(--rv-t) + var(--ci,0) * 60ms)}
.js .rv.deal.in>*{opacity:1;transform:none}
.js .rv.pic{transform:translateY(60px) scale(.96);
  transition:opacity 1.2s var(--paper-ease) calc(var(--rv-t) + .14s),transform 1.7s var(--paper-ease) calc(var(--rv-t) + .14s)}
.js .rv.pic.in{transform:none}
.js .rv :is(.dn>.mono,.p-kicker>b,.stamp){display:inline-block;opacity:0;transform:scale(1.3);transform-origin:0 75%;filter:blur(4px);
  transition:opacity .7s var(--paper-ease) calc(var(--rv-t) + .35s),transform .9s var(--settle) calc(var(--rv-t) + .35s),filter .7s var(--paper-ease) calc(var(--rv-t) + .35s)}
.js .rv.pic :is(.dn>.mono){transition-delay:calc(var(--rv-t) + .8s)}
.js .rv.in :is(.dn>.mono,.p-kicker>b,.stamp){opacity:1;transform:none;filter:blur(0)}
.js .rule-in::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--paper-ease)}
.js .rule-in.seen::before{transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.deal>*,.js .rv.split .w,.js .rv :is(.dn>.mono,.p-kicker>b,.stamp){opacity:1;transform:none;filter:none;transition:none}
  .js .rule-in::before{transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ---- moving between sheets: the sheet you leave steps back a scale, the next comes up to its own ----
   The title strip and the sheet's border hold still across the change. */
@view-transition{navigation:auto}
.strip{view-transition-name:strip}
.frame{view-transition-name:frame}
html:not(.theme-turning)::view-transition-old(root){animation:sheet-out .42s cubic-bezier(.55,0,.8,.25) both}
html:not(.theme-turning)::view-transition-new(root){animation:sheet-in 1s var(--paper-ease) .08s both}
html:not(.theme-turning)::view-transition-group(strip),html:not(.theme-turning)::view-transition-group(frame){animation-duration:.45s}
@keyframes sheet-out{to{opacity:0;transform:scale(.972);filter:blur(3px)}}
@keyframes sheet-in{from{opacity:0;transform:scale(1.022)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---- day sheet and blueprint: the new sheet spreads from the switch over the old one ---- */
.theme-turning::view-transition-old(root),.theme-turning::view-transition-new(root){animation:none;mix-blend-mode:normal}
.theme-turning::view-transition-new(root){z-index:2}
.theme-turning .strip,.theme-turning .frame{view-transition-name:none}
.theme-turning *:not(.theme-btn i),.theme-turning *::before,.theme-turning *::after{transition:none!important}

/* arriving from the plan chest: the drawing you picked is marked for a moment */
img[id^="d-"]{scroll-margin-block:calc(16 * var(--svh))}
img[id^="d-"]:target{animation:picked 2.8s var(--paper-ease) .5s both}
@keyframes picked{0%,100%{outline:1.5px solid transparent;outline-offset:16px}25%,70%{outline:1.5px solid var(--accent);outline-offset:8px}}
@media (prefers-reduced-motion:reduce){img[id^="d-"]:target{animation:none;outline:1.5px solid var(--accent);outline-offset:8px}}

/* ---- the opening: the first sheet of a visit is ruled, titled and scaled, then lifts (opening.js) ----
   Only under html.opening, which the head script sets once per visit and takes off again by itself. */
.op{display:none}
.opening .op{--op-i:calc(var(--margin) * .45);--pencil:cubic-bezier(.45,0,.25,1);
  display:block;position:fixed;inset:0;z-index:90;background:var(--paper);color:var(--ink);cursor:default}
@media (max-width:899px){.opening .op{--op-i:8px}}
.op.lift{opacity:0;pointer-events:none;transition:opacity .46s var(--paper-ease)}
.op.lift .op-block{transform:translateY(10px);transition:transform .46s var(--paper-ease)}
/* the border, ruled once round the sheet: across the top, down, back along the foot, up */
.op-e{position:absolute;background:currentColor;opacity:.55}
.op-e.t,.op-e.b{left:var(--op-i);right:var(--op-i);height:1px}
.op-e.r,.op-e.l{top:var(--op-i);bottom:var(--op-i);width:1px}
.op-e.t{top:var(--op-i);transform-origin:0 0;animation:op-x .24s .04s var(--pencil) both}
.op-e.r{right:var(--op-i);transform-origin:0 0;animation:op-y .18s .27s var(--pencil) both}
.op-e.b{bottom:var(--op-i);transform-origin:100% 0;animation:op-x .24s .44s var(--pencil) both}
.op-e.l{left:var(--op-i);transform-origin:0 100%;animation:op-y .18s .67s var(--pencil) both}
@keyframes op-x{from{transform:scaleX(0)}}
@keyframes op-y{from{transform:scaleY(0)}}
/* the title block, in the corner the pencil reaches first */
.op-block{position:absolute;right:var(--op-i);bottom:var(--op-i);width:min(420px,calc(100% - 2 * var(--op-i)))}
.op-block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:currentColor;opacity:.55;transform-origin:0 100%;animation:op-y .2s .45s var(--pencil) both}
.op-row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 16px 11px 18px}
.op-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.55;transform-origin:100% 0;animation:op-x .24s var(--pencil) both}
.op-row.r1::before{animation-delay:.43s}
.op-row.r2::before{animation-delay:.5s;opacity:.3}
.op-row.r3::before{animation-delay:.56s;opacity:.3}
.op-row.r2::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:currentColor;opacity:.3;transform-origin:0 0;animation:op-y .16s .64s var(--pencil) both}
.op-row.r2>span{flex:1}
.op-row.r2>span+span{padding-left:16px}
.op-row>*{animation:op-in .38s var(--paper-ease) both}
.op-row.r1>*{animation-delay:.52s}
.op-row.r2>*{animation-delay:.6s}
.op-row.r3>*{animation-delay:.68s}
@keyframes op-in{from{opacity:0;transform:translateY(5px)}}
.op-name{font:400 clamp(1.25rem,1.05rem + .75vw,1.75rem)/1 var(--serif);letter-spacing:-.01em}
.op .label b{color:var(--ink);font-weight:600}
.op-n{width:16px;height:16px;align-self:center;animation:op-north .9s .52s var(--settle) both}
@keyframes op-north{from{opacity:0;transform:rotate(-160deg)}}
.op-t{color:var(--ink)}
/* the scale bar fills as the sheet's drawings arrive */
.op-bar{position:relative;flex:none;align-self:center;width:96px;height:7px}
.op-bar::before{content:"";position:absolute;inset:0;border:1px solid currentColor;opacity:.3}
.op-bar i{position:absolute;inset:0;border:1px solid currentColor;background:repeating-linear-gradient(90deg,currentColor 0 20%,transparent 20% 40%);clip-path:inset(0 100% 0 0)}
@media (prefers-reduced-motion:reduce){.op *,.op *::before,.op *::after{animation:none!important}.op.lift .op-block{transform:none}}
@media print{.op{display:none!important}.frame{box-shadow:none}}