@font-face{font-family:"Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/plex-mono-500.woff2) format("woff2")}

:root{
  --ink:#14213d;
  --ink-soft:#3b4663;
  --paper:#f3ecd9;
  --paper-2:#faf6ea;
  --olive:#6b7a2f;
  --olive-deep:#4d5a1f;
  --line:rgba(20,33,61,.14);
  --sans:"Plex Sans",system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
.sheet{
  margin:0;min-height:100vh;color:var(--ink);font-family:var(--sans);line-height:1.7;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:32px 32px;
  display:grid;grid-template-columns:15.5rem minmax(0,1fr);
}
.sheet__skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem}
.sheet__skip:focus{left:0;z-index:10}
.sheet__body{padding:2.2rem 2rem 2rem;min-width:0}

.rail{position:sticky;top:0;align-self:start;height:100vh;padding:1.6rem 1.2rem;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;gap:1rem}
.rail__brand{display:flex;align-items:center;gap:.7rem;color:var(--paper);text-decoration:none;font-weight:600;font-size:1.15rem}
.rail__mark{width:1.6rem;height:1.6rem;border:2px solid var(--paper);position:relative;flex:none}
.rail__mark::after{content:"";position:absolute;inset:.35rem;background:var(--olive)}
.rail__label{margin:1.2rem 0 0;font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.rail__note{margin:auto 0 0;font:400 .8rem var(--mono)}
.rail__note a{color:#d3e08a}

.nav{display:flex;flex-direction:column}
.nav__link{display:flex;gap:.8rem;align-items:baseline;padding:.45rem 0;color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(243,236,217,.18);font-size:.95rem}
.nav__link:hover{color:#d3e08a}
.nav__link--here{color:#d3e08a;font-weight:600}
.nav__ref{font:400 .75rem var(--mono);opacity:.7}

.plate{max-width:50rem;background:var(--paper-2);border:2px solid var(--ink);padding:2rem 2.2rem 2.4rem;box-shadow:8px 8px 0 var(--ink)}
.plate__tag{margin:0 0 1.2rem;font:500 .75rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--olive-deep)}
.plate h1{margin:0 0 .8rem;font-size:2.2rem;line-height:1.15;font-weight:600}
.plate h2{margin:2.2rem 0 .5rem;padding-top:.8rem;border-top:1px solid var(--ink);font:500 .95rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--olive-deep)}
.plate h3{margin:1.4rem 0 .2rem;font-size:1.05rem}
.plate p{margin:.6rem 0}
.plate a{color:var(--olive-deep);text-underline-offset:3px}
.plate a:hover{color:var(--ink)}
.plate ul,.plate ol{padding-left:1.3rem}
.plate li{margin:.3rem 0}
.plate code{font:400 .88em var(--mono);background:rgba(20,33,61,.08);padding:.05em .3em}
.plate__meta{font:400 .82rem var(--mono);color:var(--ink-soft)}

.lede{font-size:1.2rem;color:var(--ink-soft)}
.btn{display:inline-block;background:var(--ink);color:var(--paper-2)!important;padding:.65rem 1.3rem;border:2px solid var(--ink);text-decoration:none;font:500 .9rem var(--mono);letter-spacing:.04em;cursor:pointer}
.btn:hover{background:var(--olive-deep);border-color:var(--olive-deep)}
.btn--ghost{background:transparent;color:var(--ink)!important}

.coords{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0;margin:1rem 0;border:1px solid var(--ink)}
.coords__cell{padding:.8rem 1rem;border:1px solid var(--ink);margin:-1px 0 0 -1px;background:var(--paper)}
.coords__ref{display:block;font:500 .72rem var(--mono);color:var(--olive-deep);letter-spacing:.1em}
.coords__name{display:block;font-weight:600}
.coords__desc{display:block;font-size:.9rem;color:var(--ink-soft)}

.tbl{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.95rem}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:.55rem .7rem;border:1px solid var(--ink)}
.tbl th{background:var(--ink);color:var(--paper);font:500 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tbl__scope{font:500 .88rem var(--mono);white-space:nowrap}

.stamp{margin:1.2rem 0;padding:.9rem 1.1rem;border:2px solid var(--olive-deep);background:#eef0da;font-size:.92rem}
.stamp p{margin:.3rem 0}

.form{margin:1.2rem 0}
.form__row{display:block;margin:.9rem 0}
.form__label{display:block;font:500 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
.form__input{width:100%;max-width:22rem;padding:.55rem .7rem;border:2px solid var(--ink);background:#fff;font:inherit}
.form__check{display:flex;gap:.7rem;align-items:flex-start}
.form__check input{width:1.2rem;height:1.2rem;margin-top:.3rem;accent-color:var(--olive-deep)}
.form__error{color:#9c2b1a;font-weight:600}
.state{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.2rem;margin:1rem 0;font:400 .9rem var(--mono)}
.state dt{color:var(--olive-deep)}
.state dd{margin:0;word-break:break-all}

.foot{max-width:50rem;margin-top:1.6rem;font-size:.85rem;color:var(--ink-soft)}
.foot p{margin:.4rem 0}
.foot__legal{padding:.6rem .9rem;border:1px solid var(--ink);background:var(--paper-2)}
.foot a{color:var(--olive-deep)}

:focus-visible{outline:3px solid var(--olive);outline-offset:2px}

@media (max-width:52rem){
  .sheet{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.9rem 1rem;gap:.6rem 1.2rem}
  .rail__label,.rail__note{display:none}
  .nav{flex-direction:row;flex-wrap:wrap;gap:0 1rem}
  .nav__link{border:0;padding:.2rem 0}
  .nav__ref{display:none}
  .sheet__body{padding:1rem}
  .plate{padding:1.3rem 1.2rem 1.6rem;box-shadow:5px 5px 0 var(--ink)}
  .plate h1{font-size:1.8rem}
}
