:root{
  --humus:#3a2b22;--loam:#6e4f37;--clay:#9c5b3b;--sand:#cfa962;--gravel:#8c8679;--char:#1f1b18;
  --peb-l:#b9ab97;--peb-d:#5d544b;--rod:#d0312d;--rodw:#f4f2ee;--felt:#151413;--letter:#f1efe9;--alu:#c9cdd1;
  --safe:#a6d13c;--review:#f07a1a;--keep:#2f6db5;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;--serif:'Spectral',Georgia,serif;--mono:'Inconsolata',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--char);-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.125rem/1.6 var(--serif);color:var(--letter);background:var(--char)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--safe);outline-offset:3px}
code{font-family:var(--mono);font-size:.92em}
.skip{position:absolute;left:-999px;top:0;background:var(--letter);color:var(--felt);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem;top:1rem}

/* ---- header ---- */
.top{position:absolute;inset:0 0 auto 0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,40px);z-index:6;font-family:var(--cond);letter-spacing:.06em;text-transform:uppercase}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.25rem}
.top nav{display:flex;gap:clamp(14px,2.4vw,32px);font-weight:500;font-size:1rem}
.top nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--sand)}

/* ---- the trench ---- */
.dig{position:relative;min-height:max(100svh,760px);overflow:hidden;background:var(--char)}
#wall{position:absolute;inset:0;width:100%;height:100%;display:block}
.gauge{position:absolute;z-index:3;left:62px;top:76px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:.5rem;max-width:min(560px,56vw)}
.g-k{grid-column:1/-1;font-weight:500;font-size:.85rem;color:var(--alu)}
#free{font-weight:700;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--letter);min-width:5.4ch}
.g-of{font-weight:500;font-size:1.05rem;color:var(--alu)}
.datum{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;margin-top:.35rem;font-weight:500;font-size:.92rem;color:var(--review);text-transform:none;letter-spacing:.02em}
.datum i{display:block;width:44px;height:0;border-top:2px dashed currentColor}
.dig.ok .datum{color:var(--safe)}

.board{position:absolute;z-index:4;background:var(--felt);color:var(--letter);padding:22px 28px 24px;width:min(590px,calc(100% - 32px));
  background-image:repeating-linear-gradient(90deg,rgba(241,239,233,.035) 0 1px,transparent 1px 5px);
  transform:rotate(-1.4deg);transform-origin:0 100%;border:3px solid #0d0c0b}
.b-site{display:flex;justify-content:space-between;margin:0 0 6px;font:500 .95rem/1 var(--cond);letter-spacing:.22em;color:var(--alu)}
.board h1{margin:0;font-family:var(--cond);font-weight:700;line-height:.9}
.b-word{display:block;font-size:clamp(3.2rem,7.2vw,5.6rem);letter-spacing:.08em;margin-left:-.03em}
.b-sub{display:block;margin-top:8px;font-size:clamp(1.05rem,1.9vw,1.4rem);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.b-pitch{margin:14px 0 18px;font-style:italic;font-size:1.08rem;line-height:1.5}
.v{font-style:normal;font-family:var(--cond);font-weight:700;letter-spacing:.06em;padding:0 .35em;border-radius:2px;font-size:.92em}
.v-safe{background:var(--safe);color:var(--felt)}.v-review{background:var(--review);color:var(--felt)}.v-keep{background:var(--keep);color:var(--rodw)}
.v-run{background:var(--rod);color:var(--rodw)}
.b-act{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.shovel{font:700 1.15rem/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--felt);background:var(--safe);border:0;padding:13px 18px 12px;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 72%,94% 100%,0 100%)}
.shovel:hover{background:#b9e055}
.shovel:active{transform:translateY(1px)}
.shovel[disabled]{cursor:progress;opacity:.75}
.b-docs{font:500 1.05rem var(--cond);letter-spacing:.1em;text-transform:uppercase}
.b-install{display:flex;align-items:stretch;margin-top:18px;border:1px solid rgba(201,205,209,.35)}
.b-install code{flex:1;min-width:0;padding:9px 12px;font-size:.88rem;line-height:1.45;white-space:normal;overflow-wrap:anywhere;color:var(--alu)}
.copy{font:600 .85rem var(--cond);letter-spacing:.12em;text-transform:uppercase;background:var(--alu);color:var(--felt);border:0;padding:0 14px;cursor:pointer}
.copy.done{background:var(--safe)}

.tags{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:3;pointer-events:none}
.tag{position:absolute;right:clamp(10px,2vw,32px);pointer-events:auto;transition:opacity .4s}
.tag button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;height:26px;padding:0 10px 0 0;background:var(--alu);color:var(--felt);font:500 .95rem/1 var(--cond);letter-spacing:.03em;white-space:nowrap;
  box-shadow:inset 0 -2px 0 rgba(21,20,19,.18)}
.tag button:focus-visible{outline:3px solid var(--letter);outline-offset:2px}
.tag .no{background:var(--felt);color:var(--letter);height:100%;display:flex;align-items:center;padding:0 7px;font-weight:700;letter-spacing:.06em}
.tag .fl{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:13px solid var(--c);transform-origin:0 50%}
.tag .vb{font-weight:700;letter-spacing:.08em}
.tag .gb{font-weight:700;font-variant-numeric:tabular-nums}
.tag.gone{opacity:0;pointer-events:none}
.tag.wiggle .fl{animation:wig .5s 2 ease-in-out}
@keyframes wig{0%,100%{transform:rotate(0)}30%{transform:rotate(-16deg)}70%{transform:rotate(12deg)}}
.tag.in .fl{animation:plant .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes plant{from{transform:translateY(-10px) scaleX(.3);opacity:0}to{transform:none;opacity:1}}

.sheet{position:absolute;z-index:7;width:min(460px,calc(100% - 24px));background:var(--alu);color:var(--felt);padding:16px 18px 14px;border-top:6px solid var(--c,var(--felt))}
.sheet h2{margin:0 26px 8px 0;font:700 1.25rem/1.15 var(--cond);letter-spacing:.04em;text-transform:uppercase}
.sheet ul{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
.sheet li{padding:9px 0;border-top:1px solid rgba(21,20,19,.2);font-size:.95rem;line-height:1.4}
.sheet li b{font-family:var(--cond);letter-spacing:.04em}
.sheet li code{display:block;font-size:.82rem;word-break:break-all;margin:2px 0;color:#3a2b22}
.sheet li .cmd{background:var(--felt);color:var(--letter);padding:4px 7px;margin-top:5px}
.sheet-x{position:absolute;right:8px;top:6px;background:none;border:0;font:700 1.6rem/1 var(--cond);cursor:pointer;color:var(--felt);padding:4px 8px}
.caption{position:absolute;z-index:3;left:max(400px,31vw);top:84px;margin:0;width:min(400px,27vw);font-size:.8rem;line-height:1.45;font-style:italic;color:var(--alu)}
.caption code{font-size:.92em}

/* ---- deeper layers ---- */
main{position:relative}
main::before{content:"";position:absolute;z-index:2;left:26px;top:0;bottom:0;width:14px;border:2px solid var(--felt);border-top:0;
  background:repeating-linear-gradient(180deg,var(--rod) 0 54px,var(--rodw) 54px 108px)}
.layer{position:relative;padding:clamp(64px,9vw,120px) clamp(16px,4vw,56px) clamp(56px,7vw,96px);background-color:var(--bg);color:var(--fg);background-size:360px 360px}
.layer .edge{position:absolute;left:0;top:-17px;width:100%;height:18px;display:block;pointer-events:none}
.s-humus{--bg:var(--humus);--fg:var(--letter);--ln:var(--sand)}
.s-loam{--bg:var(--loam);--fg:var(--letter);--ln:var(--sand)}
.s-clay{--bg:var(--clay);--fg:var(--letter);--ln:var(--letter)}
.s-sand{--bg:var(--sand);--fg:var(--felt);--ln:var(--felt)}
.s-gravel{--bg:var(--gravel);--fg:var(--felt);--ln:var(--felt)}
.layer a{color:var(--ln)}
.in{max-width:760px;margin-left:clamp(0px,14vw,240px)}
.ctx{display:inline-flex;align-items:stretch;margin:0 0 14px;font:600 .82rem/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;background:var(--alu);color:var(--felt)}
.ctx span{background:var(--felt);color:var(--letter);padding:6px 8px;font-size:1rem;letter-spacing:.08em}
.ctx{padding-right:10px;gap:10px;align-items:center}
.layer h2{margin:0 0 18px;font:700 clamp(2.1rem,4.6vw,3.6rem)/1 var(--cond);letter-spacing:.02em;text-transform:uppercase}
.layer h3{margin:0;font:700 1.5rem/1 var(--cond);letter-spacing:.1em}
.lead{font-size:1.25rem;line-height:1.5}
.small{font-size:.92rem;font-style:italic}
.finds{margin:26px 0}
.finds div{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:14px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--fg) 22%,transparent)}
.finds dt{font:700 1.2rem/1.3 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--sand)}
.finds dd{margin:0}
.finds code{white-space:nowrap}
.flags{list-style:none;padding:0;margin:28px 0}
.flags li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:14px 0;border-top:1px solid rgba(21,20,19,.25)}
.flags p{margin:6px 0 0}
.pin{display:block;position:relative;width:44px;height:56px}
.pin::before{content:"";position:absolute;left:6px;top:4px;width:3px;height:52px;background:var(--felt)}
.pin::after{content:"";position:absolute;left:9px;top:4px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:30px solid var(--c)}
.pin-safe{--c:var(--safe)}.pin-review{--c:var(--review)}.pin-keep{--c:var(--keep)}
.term{margin:22px 0;background:var(--felt);color:var(--letter);padding:16px 18px;font:400 .86rem/1.55 var(--mono);overflow-x:auto;white-space:pre;max-width:min(1100px,calc(100vw - 32px));width:max-content;min-width:100%}
.term b{color:var(--sand);font-weight:600}
.term .dim{color:#9a948a}
.term .v{font-family:var(--mono);font-weight:600;letter-spacing:0;padding:0 .2em}
.rules{padding-left:1.1em}
.rules li{margin:.45em 0}
.datumfig{position:relative;height:34px;margin:18px 0 6px}
.df-line{position:absolute;left:0;right:0;top:16px;border-top:2px dashed var(--rodw)}
.df-label{position:absolute;right:0;top:-2px;font:600 .9rem var(--cond);letter-spacing:.14em;text-transform:uppercase;background:var(--rodw);color:var(--felt);padding:2px 8px}
.foot{background:var(--char);padding:40px clamp(16px,4vw,56px);font-size:.92rem;color:var(--alu)}
.foot p{max-width:760px;margin:0 0 0 clamp(0px,14vw,240px)}

/* ---- narrow: board above ground, tags stay on the wall ---- */
@media (max-width:899px){
  .board{transform:rotate(-1deg)}
  .caption{left:24px;right:12px;top:auto;bottom:12px;width:auto;background:rgba(21,20,19,.88);padding:8px 10px;color:var(--letter)}
  .board{padding:16px 18px 18px}
  .b-pitch{font-size:1rem;margin:10px 0 14px}
  main::before{left:8px;width:10px}
  .layer{padding-left:36px}
  .gauge{left:30px}
  .gauge{max-width:56vw}
  .in{margin-left:0}
  .foot p{margin-left:0}
  .tag button{font-size:.86rem;height:24px;gap:6px}
  .tag .lbl{max-width:38vw;overflow:hidden;text-overflow:ellipsis}
  .finds div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:520px){
  .top nav a[href="#install"]{display:none}
  .b-site span:nth-child(2){display:none}
  .tag .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* self-critique pass 2026-10-19 */
.layer code,.rules code,.lead code{white-space:nowrap}
.layer code[data-long],.layer .small code{white-space:normal;overflow-wrap:anywhere}
.f-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em}
.f-links img{margin-right:4px}
.copy.done{background:var(--safe);color:var(--felt)}
@media (max-width:899px){.term{width:auto;min-width:0;max-width:100%}}
/* pebbles and stipple sit behind the text column, never inside a word */
.layer .in > p,.layer .in li,.layer .in dd,.layer .in dt,.layer .in h2{text-shadow:0 0 2px var(--bg),0 0 5px var(--bg),0 0 9px var(--bg)}
.nw{white-space:nowrap}