/* openpasture. One canvas, two typefaces, eight colors, one hover tint. */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-latin-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-latin-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2')}

:root{
  --bg:#0E0D0B;--soot:#15130F;--fg:#F0EBE0;--fg2:#B5AD9F;--line:#2A2620;
  --blaze:#FF6A2B;--blaze2:#FF7F4D;--live:#8FD14F;--red:#E5484D;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:1200px;--gx:clamp(1.25rem,4vw,4rem);--gap:clamp(2rem,5vw,5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{font-family:var(--sans);font-size:18px;line-height:1.5;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;min-height:100vh}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,ul{margin:0}
h1,h2{margin:0;font-weight:500;letter-spacing:-.01em}
b{font-weight:500}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--blaze);color:var(--bg)}
:focus-visible{outline:2px solid var(--blaze);outline-offset:3px}
main:focus{outline:none}

.skip{position:absolute;left:-9999px;top:1rem;background:var(--blaze);color:var(--bg);padding:.5rem .75rem}
.skip:focus{left:1rem;z-index:10}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gx)}
section{position:relative;padding:clamp(4rem,9vw,8rem) 0;border-top:1px solid var(--line)}
section::before{content:"";position:absolute;left:0;top:-1px;width:4px;height:4px;background:var(--fg2);box-shadow:8px 0 0 var(--blaze)}
main>section:first-child{border-top:0}
main>section:first-child::before{display:none}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--fg2)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.u{border-bottom:1px solid var(--fg2)}
.u:hover{border-color:var(--fg)}
.btn{display:inline-block;background:var(--blaze);color:var(--bg);font-weight:500;padding:.7rem 1.1rem;border:0;cursor:pointer}
.btn:hover{background:var(--blaze2)}

.cols{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);align-items:start}
.cols>*{min-width:0}
.prose{max-width:62ch;min-width:0}
.prose>*+*{margin-top:1.25rem}
.prose ul{padding-left:1.1rem}
.prose li+li{margin-top:.5rem}
.prose a{border-bottom:1px solid var(--fg2);overflow-wrap:anywhere}
.prose a:hover{border-color:var(--fg)}

h1{font-size:clamp(3rem,8vw,7rem);line-height:.95;letter-spacing:-.03em}
h1.title{font-size:clamp(2.5rem,5.5vw,4.5rem);line-height:1;letter-spacing:-.025em;max-width:18ch}
.hero h1{max-width:12ch}
h2{font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.1;letter-spacing:-.02em;max-width:24ch}
h2.entry{font-size:1.25rem;line-height:1.5;letter-spacing:0;max-width:56ch}
.dateline{font-size:1rem;letter-spacing:0}
.lead{font-size:1.25rem;max-width:56ch}

header.top{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.25rem 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:500}
.mark{width:22px;height:22px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px}
.mark i{background:var(--fg);display:block}.mark i.o{background:transparent}.mark i.b{background:var(--blaze)}
.mark--lg{width:40px;height:40px;gap:2px}
header.top nav{display:flex;gap:2rem;color:var(--fg2)}
header.top nav a:hover,header.top nav a[aria-current]{color:var(--fg)}

.hero{position:relative;overflow:hidden;padding-top:clamp(3rem,7vw,6rem)}
/* %232A2620 below is --line; a data: URI cannot read var(), so change both together. */
.hero .px{position:absolute;right:calc(-1 * var(--gx));top:0;width:50%;height:100%;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect x='0' y='0' width='3' height='3' fill='%232A2620'/%3E%3C/svg%3E");
  background-size:28px 28px;opacity:.9}
.hero .cols{position:relative;grid-template-columns:6fr 6fr;align-items:end}
.hero .links{display:flex;gap:2rem;margin-top:2.5rem;font-size:1.1rem;flex-wrap:wrap}
.page{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.page .lead{margin-top:1.5rem}

.status{font-family:var(--mono);font-size:.85rem;max-width:520px}
.hero .status{margin-top:3.5rem}
.status .h{margin-bottom:.75rem}
.status dl{margin:0}
.status .r{display:flex;align-items:baseline;gap:.75rem;padding:.3rem 0}
.status .r dt{display:flex;flex:1;gap:.75rem;align-items:baseline}
.status .r dt::after{content:"";flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:40px}
.status .r dd{margin:0;color:var(--fg2);text-align:right}
.status .r dd.live{color:var(--live)}

.fig,.map{width:100%;height:auto}
.cap{color:var(--fg2);font-size:.95rem;margin-top:1rem;max-width:56ch}

/* figure paints: the drawings are fill="none" SVG with no hex literals; each
   class binds one paint to a token. The bare name is the token's usual role
   in the drawings, the suffix its other one. */
svg .k-line{stroke:var(--line)}
svg .k-fg{fill:var(--fg)}
svg .k-fg-stroke{stroke:var(--fg)}
svg .k-fg2{fill:var(--fg2)}
svg .k-fg2-stroke{stroke:var(--fg2)}
svg .k-blaze{stroke:var(--blaze)}
svg .k-blaze-fill{fill:var(--blaze)}
svg .k-live{fill:var(--live)}
svg .k-live-stroke{stroke:var(--live)}
svg .k-bg{fill:var(--bg)}

.frame{border:1px solid var(--line);background:var(--soot);padding:1.5rem;max-width:420px;font-size:1rem}
.frame .big{font-family:var(--mono);font-size:2.6rem;letter-spacing:-.02em;line-height:1;margin:.25rem 0 .5rem}
.frame .row{display:flex;gap:.5rem;margin:1rem 0 1.5rem;flex-wrap:wrap}
.frame .row span{border:1px solid var(--line);padding:.45rem .75rem;font-size:.9rem}
.frame .row span:first-child{border-color:var(--red);color:var(--red)}
.frame hr{border:0;border-top:1px solid var(--line);margin:1.25rem 0}
.frame svg{width:100%;height:auto;margin:1rem 0}

.rows{list-style:none;padding:0}
.cap+.rows{margin-top:2rem}
.rows li{padding:1rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:140px 1fr auto;gap:2rem;align-items:baseline}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows .d{font-family:var(--mono);font-size:.85rem;color:var(--fg2)}
.rows .s{color:var(--fg2);font-size:.95rem}
.rows a:hover{border-bottom:1px solid var(--fg)}

form.ask{max-width:520px;display:grid;gap:.75rem;margin-top:1.5rem}
form.ask input,form.ask textarea{background:transparent;border:1px solid var(--line);padding:.7rem .9rem;color:var(--fg);width:100%}
form.ask textarea{min-height:7rem;resize:vertical}
form.ask input::placeholder,form.ask textarea::placeholder{color:var(--fg2)}
form.ask input:focus-visible,form.ask textarea:focus-visible{border-color:var(--fg2)}
form.ask .btn{justify-self:start}
form.ask output{font-family:var(--mono);font-size:.85rem;color:var(--fg2);min-height:1.3em}
form.ask output[data-state=err]{color:var(--red)}
form.ask output[data-state=ok]{color:var(--live)}
.sent,.failed{font-family:var(--mono);font-size:.85rem}
.sent{color:var(--live)}
.failed{color:var(--red)}
#sent:target,#failed:target{display:block}

footer.bottom{padding:2.5rem 0 3rem;border-top:1px solid var(--line);color:var(--fg2);font-size:.95rem}
footer.bottom .mark--lg{margin-bottom:1.25rem}
footer.bottom div{display:flex;gap:1.5rem;flex-wrap:wrap}
footer.bottom .row{display:flex;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap}
footer.bottom a:hover{color:var(--fg)}

/* Wide drawings scroll sideways on narrow screens instead of shrinking their
   labels below reading size. The wrapper is in each fig- partial. */
.scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
header.top nav a,footer.bottom a{padding:.4rem 0;display:inline-block}
@media (max-width:900px){
  .cols,.hero .cols{grid-template-columns:1fr}
  header.top nav{width:100%;order:3;gap:1.5rem}
  .rows li{grid-template-columns:1fr}
  .status .r{flex-wrap:wrap}
  .status .r dt{white-space:nowrap}
}
@media (max-width:600px){
  .scroll .fig{min-width:640px}
  svg.map text{font-size:24px}
}

/* motion: quiet, once, off when asked */
@media (prefers-reduced-motion:no-preference){
  .btn,.u,header.top nav a{transition:color .15s,border-color .15s,background .15s}
  .mark i{animation:px-in .5s both}
  .mark i:nth-child(n+6){animation-delay:.08s}.mark i:nth-child(n+11){animation-delay:.16s}.mark i:nth-child(n+16){animation-delay:.24s}.mark i:nth-child(n+21){animation-delay:.32s}
  .hero h1,.hero .links,.hero .status,.hero .map{animation:rise .6s both}
  .hero .links{animation-delay:.12s}.hero .status{animation-delay:.2s}.hero .map{animation-delay:.28s}
  .status .r{animation:rise .5s both}.status .r:nth-child(2){animation-delay:.05s}.status .r:nth-child(3){animation-delay:.1s}.status .r:nth-child(4){animation-delay:.15s}
  .proposed{animation:march 8s linear infinite}
  .blink{animation:blink 4s ease-in-out infinite}
  .blink:nth-of-type(2){animation-delay:1.3s}.blink:nth-of-type(3){animation-delay:2.1s}.blink:nth-of-type(4){animation-delay:.6s}.blink:nth-of-type(5){animation-delay:3s}
  .paused *{animation-play-state:paused}
  .reveal{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
  .reveal.in{opacity:1;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes px-in{from{opacity:0}to{opacity:1}}
@keyframes march{to{stroke-dashoffset:-56}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}