/* fiducial markers · the shared look, one source for every page:
   B612 and B612 Mono (faces made for reading instruments, SIL Open Font License), served from this domain;
   the collection's Cyanotype palette; the header, the footer, and the controls */
@font-face{font-family:"B612";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/b612-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"B612";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/b612-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"B612 Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/b612-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --ground:#1f4a73;   /* the cyanotype field */
  --deep:#1d3a5c;
  --night:#14263d;
  --foot:#0f1f33;
  --disc:#2b5178;
  --line:#f0f2ec;     /* the white of the print: text and drawn line */
  --soft:#dfe4e0;
  --muted:#b3c4cc;
  --ink:#0c1a2b;      /* text on a light fill */
  --brass:#c8a464;    /* the fixed reading line, and nothing else that matters */
  --edge:rgba(240,242,236,.32);
  --edge-soft:rgba(240,242,236,.16);
  --maxw:1360px;
  --pad:clamp(18px,3.5vw,48px);
  --sans:"B612",Verdana,"Segoe UI",sans-serif;
  --mono:"B612 Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html{background:var(--ground)}
/* a faint paper grain under the cyanotype ground, drawn as one small tile */
body{
  background-color:var(--ground);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--line);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  /* a short page still keeps its footer at the foot of the window */
  min-height:100vh;display:flex;flex-direction:column;
}
body > main{flex:1 0 auto;width:100%}
body > .site-head,body > .site-foot{flex:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* ---------- the header ---------- */
.site-head{position:relative;z-index:40}
.site-head .bar{max-width:var(--maxw);margin:0 auto;padding:24px var(--pad);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.site-head .mark{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--sans);font-weight:700;font-size:18px;color:var(--line)}
.site-head .mark svg{display:block;flex:none}
.site-head nav{display:flex;flex-wrap:wrap;gap:28px;font-family:var(--sans);font-size:15px}
.site-head nav a{color:var(--line);text-decoration:none}
.site-head nav a:hover{text-decoration:underline}
.site-head nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
@media (max-width:560px){.site-head nav{gap:20px}}

/* ---------- the footer ---------- */
/* the footer tucks one pixel under the band above it, so no hairline of ground shows at the seam */
.site-foot{position:relative;margin-top:-1px;background:var(--foot);color:var(--line)}
.site-foot .foot{max-width:var(--maxw);margin:0 auto;padding:34px var(--pad) 44px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;font-family:var(--sans);font-size:15px}
.site-foot .sig{font-weight:700;font-size:20px}
.site-foot .links{display:flex;flex-wrap:wrap;gap:24px}
.site-foot .right{font-size:14px;color:var(--muted)}

/* ---------- the controls, the same on every page ---------- */
.btn{
  appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:15px;font-weight:400;line-height:1.3;letter-spacing:0;text-transform:none;text-decoration:none;
  padding:12px 18px;border:1px solid var(--edge);border-radius:0;background:transparent;color:var(--line);
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn:hover{border-color:var(--line);background:rgba(240,242,236,.08);color:var(--line)}
.btn.primary{background:var(--line);border-color:var(--line);color:var(--ink);font-weight:700}
.btn.primary:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn[disabled],.btn:disabled{opacity:.45;cursor:default}
.btn .meta{color:var(--muted);font-size:13px}
.btn.primary .meta{color:#3d5266}
select,input[type="text"],input[type="number"],input[type="search"]{
  font-family:var(--sans);font-size:15px;line-height:1.3;color:var(--line);
  padding:11px 14px;border:1px solid var(--edge);border-radius:0;background-color:var(--deep);
}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--line) 50%),linear-gradient(135deg,var(--line) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%;background-size:5px 5px;background-repeat:no-repeat;
}
select option{background:var(--deep);color:var(--line)}
select:hover,input:hover{border-color:var(--line)}
input::placeholder{color:var(--muted);opacity:1}
input[type="number"]{appearance:textfield;-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}