/* 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%}
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 */
.frame{position:fixed;inset:calc(var(--margin) * .45);border:1px solid var(--rule);pointer-events:none;z-index:30}
@media (max-width:899px){.frame{inset:8px}}

/* ---- 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}}
/* 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)}

/* ---- the title strip: every page is a sheet ---- */
.strip{position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--strip);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)}
.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:calc(var(--margin) + 6px)}
.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%)}
@media (max-width:899px){
  .strip{grid-template-columns:minmax(0,1fr) auto 48px;height:42px}
  .strip .hide-sm{display:none}
}
body{padding-bottom:var(--strip)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--paper-ease),transform 1.1s var(--paper-ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}