/* Sprucestead atlas — shared styles for the landing page and parcel land files.
   One committed visual world: a spruce-dark vitrine that holds the 3D models, and
   survey-paper plates for reading. Colours are taken from the 1949 NTS sheet and
   from Dominion Land Survey plans (red parcel line, sepia contours, water blue). */

@font-face{font-family:'IM Fell English';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IMFellEnglish-400.woff2) format('woff2')}
@font-face{font-family:'IM Fell English';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/IMFellEnglish-400i.woff2) format('woff2')}
@font-face{font-family:'IM Fell English SC';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IMFellEnglishSC-400.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/Spectral-300.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/Spectral-300i.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Spectral-400.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Spectral-400i.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Spectral-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexMono-500.woff2) format('woff2')}

:root{
  color-scheme: dark;
  --vitrine:#0E1914; --vitrine-2:#15231D; --vitrine-3:#1D2F27; --vitrine-line:#2C4338;
  --paper:#E9E1CB; --paper-2:#DED4B8; --paper-edge:#C6B994;
  --ink:#2A2118; --ink-soft:#54483A; --ink-faint:#766A58;
  --on-dark:#E6EBE2; --on-dark-soft:#A7B5AB; --on-dark-faint:#7D8E84;
  --gold:#D4A24C; --gold-hi:#E8C57F; --gold-deep:#8C6524;
  --survey:#B0321F; --survey-hi:#E0664E;
  --water:#3E8DB6; --contour:#9A6238; --woodland:#CFE0C4;
  --ok:#7DB48A; --warn:#D9A441; --bad:#DE6A4F; --info:#7FA9C4;
  --display:"IM Fell English", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sc:"IM Fell English SC", "IM Fell English", Georgia, serif;
  --body:"Spectral", "Iowan Old Style", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter:clamp(16px, 4vw, 56px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--vitrine);color:var(--on-dark);font-family:var(--body);font-weight:300;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-hi);text-underline-offset:3px}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.08}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;line-height:1.55}
.sc{font-family:var(--sc);letter-spacing:.06em}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.plate-no{font-family:var(--sc);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi)}
.lede{font-size:clamp(19px,1.9vw,22px);line-height:1.6;max-width:62ch}
.cite{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;line-height:1.55;color:var(--on-dark-soft)}
.pad{padding-block:clamp(64px,9vw,128px)}
.stack{display:flex;flex-direction:column;gap:18px}
.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,var(--gold),transparent)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* paper plates */
.paper{background:var(--paper);color:var(--ink);
  background-image:radial-gradient(rgba(120,95,55,.07) 1px,transparent 1.4px),radial-gradient(rgba(120,95,55,.05) 1px,transparent 1.2px);
  background-size:23px 23px,37px 37px;background-position:0 0,11px 17px}
.paper .plate-no{color:#8A5A22}
.paper .cite{color:var(--ink-faint)}
.paper a{color:#7A4E1C}
.paper .kicker{color:var(--ink-faint)}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(14,25,20,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--vitrine-line)}
.bar .in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gutter);max-width:1400px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-dark);text-decoration:none;font-family:var(--sc);font-size:19px;letter-spacing:.08em}
.brand svg{flex:none}
.bar nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.bar nav a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-soft);text-decoration:none;padding:8px 10px;border-radius:2px}
.bar nav a:hover{color:var(--on-dark);background:var(--vitrine-2)}
.bar nav a.cta{color:#1A1407;background:var(--gold);}
.bar nav a.cta:hover{background:var(--gold-hi);color:#1A1407}
@media (max-width:720px){.bar nav a:not(.cta):not(.keep){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:rgba(16,28,22,.8);color:var(--on-dark);border:1px solid rgba(212,162,76,.55);padding:10px 14px;border-radius:2px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;min-height:44px;text-decoration:none}
.btn:hover{border-color:var(--gold-hi);color:#fff}
.btn[aria-pressed="true"]{background:var(--gold);color:#16120A;border-color:var(--gold)}
.btn.solid{background:var(--gold);color:#16120A;border-color:var(--gold)}
.btn.solid:hover{background:var(--gold-hi)}
.paper .btn{background:transparent;color:var(--ink);border-color:var(--ink)}
.paper .btn:hover{background:var(--ink);color:var(--paper)}
.paper .btn.solid{background:var(--ink);color:var(--paper)}

/* accession card and mount */
.card{background:#E7DEC6;color:var(--ink);padding:18px 20px 16px;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.35),0 18px 40px -20px rgba(0,0,0,.8);position:relative}
.card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(90,70,40,.28);pointer-events:none}
.card .accn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#8A5A22;margin-bottom:10px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0}
.card dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#8A5A22;text-transform:uppercase;padding-top:3px}
.card dd{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.5;font-variant-numeric:tabular-nums}
.mount{background:#E4DBC3;padding:clamp(12px,2vw,24px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.4);position:relative}
.mount .face{position:relative;border:1px solid #1a1a1a;overflow:hidden}
.mount .face img{width:100%}
.mount figcaption{font-family:var(--mono);font-size:11px;line-height:1.5;color:#54483A;margin-top:10px}
.pin-box{position:absolute;border:2px solid var(--survey);box-shadow:0 0 0 1px rgba(255,240,220,.6)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.chip.ok{color:var(--ok)} .chip.warn{color:var(--warn)} .chip.bad{color:var(--bad)} .chip.info{color:var(--info)}
.paper .chip.ok{color:#2F6B3D} .paper .chip.warn{color:#8A5A12} .paper .chip.bad{color:#A0301B} .paper .chip.info{color:#2C5F80}

/* scrolly stage */
.scrolly{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#1c2b24 0%,#101a15 60%,#0b120e 100%)}
.stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.stage .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:40px}
.stage .fallback img{max-height:80%;width:auto;box-shadow:0 30px 60px -30px #000}
.stage .loading{position:absolute;left:var(--gutter);top:84px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft)}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;transform:translate(-50%,-100%);font-family:var(--sc);font-size:14px;letter-spacing:.08em;color:#F3EFE2;white-space:nowrap;padding:3px 9px 15px;background:linear-gradient(rgba(12,20,16,.84),rgba(12,20,16,.84)) top/100% calc(100% - 12px) no-repeat;opacity:0;transition:opacity .5s;pointer-events:none}
.lbl::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:10px;background:rgba(243,239,226,.8)}
.lbl.on{opacity:1}
.lbl.gold{color:var(--gold-hi)}
.lbl.red{color:#F2B3A6}
.lbl small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--on-dark-soft);text-transform:none}
.steps{position:relative;margin-top:-100vh;margin-top:-100svh;z-index:2;pointer-events:none}
.step{min-height:92vh;display:flex;align-items:center;padding-inline:var(--gutter)}
.step:first-child{min-height:100vh}
.step:last-child{min-height:110vh}
.panel{pointer-events:auto;max-width:410px;background:rgba(14,24,19,.88);border:1px solid rgba(212,162,76,.32);padding:22px 24px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.panel h3{font-size:28px;margin:6px 0 10px}
.panel p{font-size:17px;line-height:1.55}
.panel p+p{margin-top:10px}
.panel .cite{margin-top:12px}
.stage-ui{position:absolute;right:var(--gutter);bottom:20px;display:flex;gap:8px;z-index:3;flex-wrap:wrap;justify-content:flex-end}
.legend{position:absolute;left:var(--gutter);bottom:20px;z-index:3;font-family:var(--mono);font-size:11px;color:var(--on-dark-soft);display:flex;align-items:center;gap:10px;background:rgba(12,20,16,.8);padding:8px 10px;border:1px solid var(--vitrine-line)}
.legend .ramp{width:140px;height:10px;border:1px solid rgba(255,255,255,.2)}
@media (max-width:720px){
  .step{align-items:flex-end;padding-bottom:5vh}
  .panel{max-width:none;padding:14px 16px}
  .panel h3{font-size:22px;margin:4px 0 6px}
  .panel p{font-size:15px;line-height:1.5}
  .panel .cite{font-size:10.5px}
  .legend{bottom:auto;top:70px}
  .stage-ui{bottom:auto;top:66px;right:12px}
  .stage-ui .btn{min-height:34px;padding:6px 9px;font-size:10.5px}
  .toolbar{flex-direction:row;left:8px;right:8px;top:8px;max-height:none;overflow-x:auto;overflow-y:hidden;padding-right:0}
  .toolbar .grp{flex-direction:row;align-items:center;flex:none}
  .toolbar .grp-t{display:none}
  .tool{white-space:nowrap}
  .view-ui{top:auto;bottom:56px;right:8px;max-width:calc(100% - 16px)}
  .hintbar{font-size:10.5px;bottom:8px}
}

/* reading grid on paper */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(24px,4vw,56px);align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:22px}
.specimen{background:#fff;padding:8px;border:1px solid var(--paper-edge);box-shadow:0 20px 40px -26px rgba(40,30,10,.6)}
.specimen canvas{width:100%;height:auto;display:block;image-rendering:auto}
.specimen figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:8px 2px 2px;line-height:1.5}
.bignum{font-family:var(--display);font-size:clamp(44px,5.6vw,80px);line-height:.95;font-variant-numeric:lining-nums}
.bignum small{display:block;font-family:var(--sc);font-size:15px;letter-spacing:.14em;color:#8A5A22;margin-top:8px}
.bars{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.bars .row{display:grid;grid-template-columns:92px 1fr 52px;gap:10px;align-items:center;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.bars .track{height:12px;background:rgba(42,33,24,.08);border:1px solid rgba(42,33,24,.18)}
.bars .fill{height:100%;background:var(--contour)}

/* timeline */
.timeline{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:22px;padding:18px 0;border-top:1px solid rgba(42,33,24,.18)}
.timeline .yr{font-family:var(--display);font-size:34px;line-height:1;color:#7A4E1C;font-variant-numeric:lining-nums}
.timeline h4{font-size:22px;margin-bottom:4px}
.timeline p{font-size:17px;max-width:64ch}
@media (max-width:560px){.timeline li{grid-template-columns:1fr;gap:6px}}

/* studio */
.studio{background:var(--vitrine);border-top:1px solid var(--vitrine-line)}
.studio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-block:48px 20px}
.studio-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0;border-top:1px solid var(--vitrine-line);border-bottom:1px solid var(--vitrine-line)}
@media (max-width:1000px){.studio-body{grid-template-columns:1fr}}
.studio-view{position:relative;height:min(78vh,820px);min-height:460px;background:radial-gradient(120% 90% at 50% 40%,#1c2b24 0%,#101a15 60%,#0b120e 100%)}
.studio-view canvas{display:block;width:100%;height:100%;touch-action:none}
.toolbar{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:3;max-height:calc(100% - 24px);overflow:auto;padding-right:4px}
.toolbar .grp{display:flex;flex-direction:column;gap:4px;background:rgba(12,20,16,.86);border:1px solid var(--vitrine-line);padding:6px}
.toolbar .grp-t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);padding:2px 4px}
.tool{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;color:var(--on-dark);padding:6px 8px;cursor:pointer;font-family:var(--mono);font-size:11.5px;text-align:left;min-height:36px;border-radius:2px}
.tool:hover{border-color:var(--vitrine-line);background:var(--vitrine-2)}
.tool[aria-pressed="true"]{border-color:var(--gold);background:rgba(212,162,76,.14);color:var(--gold-hi)}
.tool i{width:14px;height:14px;flex:none;border:1px solid rgba(255,255,255,.35)}
.view-ui{position:absolute;right:12px;top:12px;display:flex;gap:6px;z-index:3;flex-wrap:wrap;justify-content:flex-end;max-width:60%}
.view-ui .btn{min-height:36px;padding:6px 10px;font-size:11px}
.hintbar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;font-family:var(--mono);font-size:11.5px;color:var(--on-dark);background:rgba(12,20,16,.9);border:1px solid var(--vitrine-line);padding:8px 12px;max-width:calc(100% - 24px);text-align:center}
.ledger{background:var(--vitrine-2);border-left:1px solid var(--vitrine-line);display:flex;flex-direction:column;max-height:min(78vh,820px);min-height:460px}
@media (max-width:1000px){.ledger{border-left:0;border-top:1px solid var(--vitrine-line);max-height:none}}
.ledger .sec{padding:16px 18px;border-bottom:1px solid var(--vitrine-line)}
.ledger .scroll{overflow:auto;flex:1}
.ledger h4{font-family:var(--sc);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:10px}
.meter{height:14px;background:var(--vitrine-3);border:1px solid var(--vitrine-line);position:relative;margin:8px 0 6px}
.meter .fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#6E9F63,#9CC47E)}
.meter .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--gold-hi)}
.kv{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.kv span:nth-child(even){text-align:right;color:var(--on-dark)}
.kv span:nth-child(odd){color:var(--on-dark-soft)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:14px;line-height:1.4;padding:8px 0;border-bottom:1px dashed var(--vitrine-line)}
.checks li .why{grid-column:2;font-family:var(--mono);font-size:10.5px;color:var(--on-dark-faint);line-height:1.5}
.checks li .why a{color:var(--on-dark-soft)}
.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.items li{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:12px;padding:6px 8px;border:1px solid transparent;cursor:pointer}
.items li:hover,.items li.sel{border-color:var(--vitrine-line);background:var(--vitrine-3)}
.items li .sw{width:10px;height:10px;display:inline-block;margin-right:8px;border:1px solid rgba(255,255,255,.3);vertical-align:-1px}
.inspector{display:flex;flex-direction:column;gap:10px}
.inspector label{display:grid;grid-template-columns:110px 1fr 48px;gap:8px;align-items:center;font-family:var(--mono);font-size:11.5px;color:var(--on-dark-soft)}
.inspector input[type=range]{width:100%;accent-color:var(--gold)}
.inspector output{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--on-dark)}
.row-btns{display:flex;gap:6px;flex-wrap:wrap}
.row-btns .btn{min-height:36px;padding:6px 10px;font-size:11px}

/* site plan sheet */
.sheet{background:#F2ECDC;border:1px solid var(--paper-edge);box-shadow:0 34px 70px -34px rgba(40,30,10,.6);overflow:auto}
.sheet svg{display:block;width:100%;height:auto;min-width:720px}

/* packet */
.packet{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;margin-top:30px}
.leaf{background:#F3EDDD;border:1px solid var(--paper-edge);padding:18px 18px 16px;position:relative;box-shadow:0 14px 30px -22px rgba(40,30,10,.6)}
.leaf .no{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#8A5A22}
.leaf h4{font-size:22px;margin:6px 0 6px}
.leaf p{font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.process{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:0;border-top:2px solid var(--ink)}
.process li{padding:14px 14px 16px 0;border-right:1px solid rgba(42,33,24,.18)}
.process li:last-child{border-right:0}
.process .t{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#8A5A22;text-transform:uppercase}
.process h4{font-size:19px;margin:6px 0 4px}
.process p{font-size:14.5px;line-height:1.45;color:var(--ink-soft)}

footer.site{padding-block:48px;border-top:1px solid var(--vitrine-line);color:var(--on-dark-soft);font-size:15px}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px}

@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}