/* Sego Works: "Record" system + growing stem + SGW numbering.
   Ported from docs/design/hybrid-responsive.html (approved 2026-10-27). Mobile-first.
   Fonts are self-hosted; scripts/assets.js fills the two @font-face src URLs below with the hashed files. */
@font-face{font-family:"Geist";src:url(/assets/fonts/geist.19f9c92546.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono.684ad5b531.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Metric-matched fallbacks (capsize metrics: Geist vs Arial, Geist Mono vs Courier New) so the swap causes no layout shift. */
@font-face{font-family:"Geist Fallback";src:local("Arial");size-adjust:104.76%;ascent-override:95.94%;descent-override:28.16%;line-gap-override:0%}
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New");size-adjust:99.98%;ascent-override:100.52%;descent-override:29.50%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  /* Locked palette */
  --night:#0e1210; --sage:#abc7a5; --ivory:#f1ebdd; --field:#49694d;
  /* Derived on the comparison sheet (direction B) */
  --grid:#161c18;   /* survey grid lines, decorative   */
  --card:#171d19;   /* record cards                     */
  --bar:#1e241f;    /* record header bars               */
  --rule:#313a31;   /* hairlines, cell borders          */
  --lichen:#849a80; /* small mono labels  6.21:1 night  */
  --stone:#b1aea4;  /* secondary text     8.50:1 night  */
  --redline:#e8846b;/* the break in the chain only 7.14:1 */
  /* Roles */
  --bg:var(--night); --ink:var(--ivory); --muted:var(--stone); --label:var(--lichen);
  --line:var(--field); --red:var(--redline);
  --sans:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Layout */
  --g:clamp(1rem, .25rem + 3.75vw, 3rem);
  --gl:max(var(--g), env(safe-area-inset-left));
  --gr:max(var(--g), env(safe-area-inset-right));
  --max:72rem;
  --rail:1.5rem;     /* stem rail beside the records */
  --sh:1;            /* scale of the shoots at the end of the stem */
  --logo-h:1.5rem;   /* leaf = full lockup height */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0}
address{font-style:normal}
a{color:inherit}
:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
main:focus{outline:none}
::selection{background:var(--sage);color:var(--bg)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mono{font:500 .75rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.muted{color:var(--muted)}
.wrap{width:100%;max-width:calc(var(--max) + var(--gl) + var(--gr));margin-inline:auto;padding-inline:var(--gl) var(--gr)}
section[id]{scroll-margin-top:.75rem}
sup{font:500 .6875rem/0 var(--mono);color:var(--sage);vertical-align:super}
@media (min-width:22.5em){.nw{white-space:nowrap}}

/* ---------- Skip link ---------- */
.skip{position:absolute;z-index:20;top:calc(.5rem + env(safe-area-inset-top));left:var(--gl);display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1rem;background:var(--sage);color:var(--bg);font-weight:600;text-decoration:none;border-radius:2px;transform:translateY(-300%)}
.skip:focus{transform:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:3rem;padding:.75rem 1.25rem;border:1px solid var(--sage);border-radius:2px;font:600 1rem/1.25 var(--sans);letter-spacing:-.005em;text-align:center;text-decoration:none}
.btn.p{background:var(--sage);color:var(--bg)}
.btn.p:hover{background:var(--ink);border-color:var(--ink)}
.btn.s{color:var(--ink)}
.btn.s:hover{background:var(--bar)}
.btn .ar{font-family:var(--mono);font-weight:500}
.cta{display:flex;flex-direction:column;gap:.75rem;margin-top:1.75rem}
@media (min-width:30em){.cta{flex-direction:row;flex-wrap:wrap}}

/* ---------- Header ---------- */
.hd{border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top)}
.hd-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
/* clear space = 52% of leaf height on every side, built into the link box */
.brand{display:inline-flex;padding:calc(var(--logo-h) * .52);margin-left:calc(var(--logo-h) * -.52);border-radius:2px}
.logo{display:block;flex:none;height:var(--logo-h);width:calc(var(--logo-h) * 5.16);max-width:none}
.coords{display:none}
.nav{flex:1 0 100%;margin-inline:calc(var(--gl) * -1) calc(var(--gr) * -1);border-top:1px solid var(--rule)}
.nav ul{list-style:none;display:grid;grid-template-columns:repeat(3,auto);padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
.nav li+li{border-left:1px solid var(--rule)}
.nav a{display:flex;align-items:center;justify-content:center;gap:.4375rem;min-height:3rem;padding:0 .5rem;font-size:1rem;font-weight:500;text-decoration:none;white-space:nowrap}
.nav a:hover{text-decoration:underline 1px var(--sage);text-underline-offset:6px}
.nav a:focus-visible{outline-offset:-3px}
.nav .n{display:none;font:500 .6875rem/1 var(--mono);color:var(--label)}
@media (min-width:22.5em){.nav .n{display:inline}}

/* ---------- Hero ---------- */
.hero{border-bottom:1px solid var(--rule);padding-block:2.5rem 2.75rem;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px;background-position:-1px -1px}
.meta{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-bottom:1.25rem}
.meta span+span::before{content:"/";content:"/" / "";margin-right:.75rem;color:var(--line)}
.h1{font-size:clamp(2.5rem, 1.75rem + 3.9vw, 5.25rem);line-height:1;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.h1 .l2{display:block;color:var(--sage)}
.hero-row{display:grid;gap:1.75rem;margin-top:1.5rem}
.lede{max-width:31em;font-size:clamp(1.0625rem, .95rem + .6vw, 1.3125rem);line-height:1.5;color:var(--muted);text-wrap:pretty}
.index{border:1px solid var(--rule);background:var(--bg)}
.index>.mono{display:block;padding:.6875rem .875rem;border-bottom:1px solid var(--rule)}
.index ol{list-style:none}
.index li+li{border-top:1px solid var(--rule)}
.index a{display:grid;grid-template-columns:4.25rem minmax(0,1fr) auto;column-gap:.625rem;align-items:baseline;min-height:2.75rem;padding:.75rem .875rem;font-size:1rem;line-height:1.35;text-decoration:none}
.index a:hover .t{text-decoration:underline 1px var(--sage);text-underline-offset:4px}
.index a:focus-visible{outline-offset:-3px}
.index .r{font:500 .75rem/1 var(--mono);color:var(--label)}
.index .s{font:500 .6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sage);white-space:nowrap}
.index .d{color:var(--muted)}

/* ---------- Section heads, headings ---------- */
.sechd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.375rem 1rem;margin-bottom:1.125rem}
.h2{font-size:clamp(1.75rem, 1.25rem + 2.4vw, 2.875rem);line-height:1.04;font-weight:600;letter-spacing:-.04em;text-wrap:balance}
.h2s{font-size:clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem);line-height:1.1;font-weight:600;letter-spacing:-.035em}
.h3{margin-bottom:1rem;font-size:1.3125rem;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.lead{font-size:clamp(1.125rem, 1.05rem + .4vw, 1.25rem);line-height:1.5;text-wrap:pretty}

/* ---------- Records + the stem (from A) ---------- */
.records{padding-block:3rem 3.5rem}
.records>section{position:relative;padding-left:var(--rail)}
.stem{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);transform-origin:50% 0}
.tick{position:absolute;left:0;top:.5rem;width:calc(var(--rail) - .375rem);height:1px;background:var(--line);transform-origin:0 50%}
.feat{padding-bottom:3.25rem}

/* Record card (B) */
.rec{position:relative;background:var(--card);border:1px solid var(--rule);container:rec / inline-size}
.cm{position:absolute;width:14px;height:14px;border:0 solid var(--sage)}
.cm.tl{top:-9px;left:-9px;border-top-width:1px;border-left-width:1px}
.cm.tr{top:-9px;right:-9px;border-top-width:1px;border-right-width:1px}
.cm.bl{bottom:-9px;left:-9px;border-bottom-width:1px;border-left-width:1px}
.cm.br{bottom:-9px;right:-9px;border-bottom-width:1px;border-right-width:1px}
.bar{display:flex;background:var(--bar);border-bottom:1px solid var(--rule);font:500 .75rem/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.bar>span{padding:.8125rem .875rem;border-right:1px solid var(--rule);white-space:nowrap}
.bar>.sp{flex:1 1 0;padding:0;border-right:0}
.bar>.sp+.o2{border-left:1px solid var(--rule)}
.bar>span:last-child{border-right:0}
.bar b{font-weight:500;color:var(--ink)}
.bar .o1,.bar .o2{display:none}
.rec-status::before{content:"";display:inline-block;width:7px;height:7px;background:var(--sage);margin:0 7px 0 2px;vertical-align:1px}
.rec-body{display:grid;gap:1.75rem;padding:1.375rem 1.125rem 1.5rem}
.rec .h2{max-width:9em;margin-bottom:1rem}
.rec .lead{margin-bottom:.875rem}
.dl{border-top:1px solid var(--rule)}
.dl>div{display:grid;gap:.125rem;padding:.75rem 0;border-bottom:1px solid var(--rule)}
.dl dt{font:500 .71875rem/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.dl dd{font-size:1rem;line-height:1.5}
@media (min-width:22.5em){.dl>div{grid-template-columns:6.25rem minmax(0,1fr);gap:.875rem}}
@container rec (min-width:34rem){.bar .o1{display:block}}
@container rec (min-width:52rem){.bar .o2{display:block}}
@container rec (min-width:50rem){
  .rec-body{grid-template-columns:minmax(0,1.35fr) minmax(16rem,1fr);gap:3.5rem;padding:2.5rem 2.5rem 2.625rem}
}

/* More in the works: the stem ends in shoots */
.more{padding-top:1.125rem}
.shoots{position:absolute;top:0;left:calc(-16px * var(--sh) + .5px);width:calc(40px * var(--sh));height:calc(64px * var(--sh));overflow:visible}
.shoots path{fill:none;stroke:var(--label);stroke-width:1.25;stroke-dasharray:3 4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.shoots .s0{stroke:var(--line);stroke-width:1;stroke-dasharray:none;stroke-linecap:butt}
.draft{display:grid;gap:1rem;border:1px dashed var(--line);padding:1.125rem 1.125rem 1.25rem}
.draft dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.375rem 1rem}
.draft dt{font:500 .71875rem/1.8 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.draft dd{font:500 .8125rem/1.65 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.draft p{color:var(--muted);text-wrap:pretty}

/* ---------- Water rights (condensed /water-rights) ---------- */
.wr{border-top:1px solid var(--rule);padding-block:3rem 3.5rem}
.wr>.wrap>.sechd{padding-bottom:.75rem;border-bottom:1px solid var(--rule);margin-bottom:2rem}
.wr-intro{display:grid;gap:2rem}
.wr-intro .h2{max-width:13em;margin-bottom:1.25rem}
.wr-intro p+p{margin-top:1rem}
.stat{display:grid;gap:.5rem;padding:1.125rem 0;border-block:1px solid var(--rule)}
.stat .big{font-size:clamp(2.25rem, 1.9rem + 1.6vw, 2.875rem);line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--sage)}
.stat .txt{line-height:1.5;color:var(--muted);text-wrap:pretty}
.fn{margin-top:.875rem;font:500 .75rem/1.55 var(--mono);color:var(--label)}

/* Chain-of-title sheet (B's redline diagram). Vertical by default; horizontal from 56rem of sheet width. */
.sheet{margin-top:2.75rem;border:1px solid var(--rule);container:sheet / inline-size;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px;background-position:-1px -1px}
.sheet-hd{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.375rem 1rem;padding:.75rem .875rem;border-bottom:1px solid var(--rule);background:var(--bg)}
.sheet-hd h3{font:inherit;letter-spacing:inherit;color:inherit}
.sheet-bd{padding:1.25rem .875rem 1.375rem}
.chain{list-style:none;display:grid;row-gap:3.25rem}
.node{position:relative;background:var(--card);border:1px solid var(--rule)}
.node.flag{border-color:var(--red)}
.node-hd{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem .75rem;padding:.625rem .75rem;background:var(--bar);border-bottom:1px solid var(--rule);font:500 .6875rem/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.node-bd{padding:.875rem .75rem 1rem}
.name{font-size:1.1875rem;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.sub{margin-top:.3125rem;font-size:1rem;line-height:1.45;color:var(--muted)}
.wavy{text-decoration:underline wavy 1px var(--red);text-underline-offset:5px;text-decoration-skip-ink:none}
/* connectors: decorative, aria-hidden */
.conn{--d:0vh;position:absolute;left:1.5rem;top:100%;width:9px;height:3.25rem;margin-left:-4px}
.conn::before{content:"";position:absolute;left:4px;top:5px;bottom:9px;width:1px;background:var(--sage);transform-origin:50% 0}
.conn::after{content:"";position:absolute;left:0;bottom:3px;border-top:7px solid var(--sage);border-left:4.5px solid transparent;border-right:4.5px solid transparent}
.conn.brk::before{background:linear-gradient(180deg,var(--red) 0 30%,transparent 30% 70%,var(--red) 70%)}
.conn.brk::after{border-top-color:var(--red)}
.x{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 .9375rem/1 var(--mono);color:var(--red)}
.xl{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);font:600 .6875rem/1 var(--mono);letter-spacing:.1em;color:var(--red);white-space:nowrap}
.note{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.75rem}
.redtag{font:600 .6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:.4375rem .5625rem .375rem;white-space:nowrap;background:var(--bg)}
.note-t{flex:1 1 15rem;font-size:1.125rem;line-height:1.45;font-weight:500;letter-spacing:-.01em}
.note .mono{white-space:nowrap}

@container sheet (min-width:36rem){
  .sheet-hd{padding:.75rem 1.25rem}
  .sheet-bd{padding:1.75rem 1.5rem 1.75rem}
  .node{display:grid;grid-template-columns:12.5rem minmax(0,1fr)}
  .node-hd{flex-direction:column;justify-content:center;gap:.375rem;border-bottom:0;border-right:1px solid var(--rule);padding:.75rem .875rem}
  .node-bd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
  .sub{margin-top:0}
}
@container sheet (min-width:56rem){
  .sheet-hd{padding:.875rem 2rem}
  .sheet-bd{padding:2.25rem 2rem 2.25rem}
  .chain{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:3.5rem;row-gap:0}
  .node{display:block;min-height:8rem}
  .node-hd{flex-direction:row;justify-content:space-between;gap:.25rem .75rem;border-right:0;border-bottom:1px solid var(--rule);padding:.625rem .75rem}
  .node-bd{display:block}
  .sub{margin-top:.3125rem;font-size:.9375rem}
  .conn{left:100%;top:50%;width:3.5rem;height:9px;margin:-4.5px 0 0}
  .conn::before{left:6px;right:8px;top:4px;bottom:auto;width:auto;height:1px;transform-origin:0 50%}
  .conn::after{left:auto;right:4px;top:0;bottom:auto;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-left:7px solid var(--sage);border-right:0}
  .conn.brk::before{background:linear-gradient(90deg,var(--red) 0 30%,transparent 30% 70%,var(--red) 70%)}
  .conn.brk::after{border-left-color:var(--red);border-top-color:transparent}
  .x{top:-5px;transform:translateX(-50%)}
  .xl{left:-12px;right:-12px;top:21px;transform:none;text-align:center}
  .c2{--d:5vh}.c3{--d:10vh}
  .note{margin-top:2rem}
  .note-t{flex:0 1 auto;font-size:1.1875rem}
  .note .mono{margin-left:auto}
}
@container sheet (min-width:66rem){
  .chain{column-gap:4.75rem}
  .conn{width:4.75rem}
}

.wr-cols{display:grid;gap:2.75rem;margin-top:3rem}
.ledger,.steps{list-style:none;border-top:1px solid var(--rule)}
.ledger li{display:grid;grid-template-columns:5.75rem minmax(0,1fr);gap:.875rem;padding:.875rem 0;border-bottom:1px solid var(--rule);line-height:1.5}
.ledger .k{font:500 .71875rem/2.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.steps{counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.875rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(step,decimal-leading-zero);content:counter(step,decimal-leading-zero) / "";font:500 .8125rem/2 var(--mono);color:var(--sage)}
.steps b{display:block;font-weight:600}
.steps p{margin-top:.25rem;color:var(--muted);text-wrap:pretty}
.scope{display:grid;gap:.5rem;margin-top:2.75rem;padding:1rem 1.125rem 1.125rem;border:1px solid var(--rule);background:var(--card)}
.scope p{color:var(--muted);line-height:1.55;text-wrap:pretty}
.scope p strong{color:var(--ink);font-weight:600}
.wr-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:2.25rem}
.wr-cta p{font-size:1.125rem;font-weight:500}
.wr-cta .btn{flex:1 1 100%}
@media (min-width:30em){.wr-cta .btn{flex:0 0 auto}}

/* ---------- Contact ---------- */
.contact{border-top:1px solid var(--rule);padding-block:3rem 3.5rem}
.contact-bd{display:grid;gap:1.25rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.email{font-size:clamp(1.5rem, 1.1rem + 2vw, 2.625rem);line-height:1.15;font-weight:600;letter-spacing:-.03em;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.contact-bd .cta{margin-top:.25rem}

/* ---------- Footer: title block (B) ---------- */
.ft{border-top:1px solid var(--rule);padding-block:1.75rem calc(2rem + env(safe-area-inset-bottom))}
.tb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tb>div{min-width:0;background:var(--bg);padding:.75rem .875rem .875rem;font-size:1rem;line-height:1.45}
.tb .w2{grid-column:span 2}
.tb .k{display:block;margin-bottom:.4375rem;font:500 .6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.tb a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:underline 1px var(--sage);text-underline-offset:4px;overflow-wrap:anywhere}
.tb a:hover{color:var(--sage)}

/* =====================================================================
   Breakpoints
   ===================================================================== */
@media (min-width:40em){
  .tb{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tb .w2{grid-column:auto}
}
@media (min-width:48em){
  :root{--logo-h:1.75rem;--rail:2.5rem;--sh:1.4}
  .hd-in{flex-wrap:nowrap;min-height:4.5rem}
  .nav{flex:none;margin:0;border:0}
  .nav ul{display:flex;gap:.25rem;padding:0;margin-right:-.75rem}
  .nav li+li{border:0}
  .nav a{min-height:2.75rem;padding:0 .75rem;font-size:.9375rem}
  .nav a:focus-visible{outline-offset:0}
  .hero{padding-block:3.75rem 3.75rem;background-size:48px 48px}
  .records{padding-block:4rem 4rem}
  .feat{padding-bottom:3.75rem}
  .more{padding-top:1.75rem}
  .draft{grid-template-columns:19rem minmax(0,1fr);gap:2.5rem;align-items:center;padding:1.375rem 1.5rem}
  .wr,.contact{padding-block:4rem 4.5rem}
  .scope{grid-template-columns:6rem minmax(0,1fr);gap:1.5rem;align-items:baseline;padding:1.125rem 1.5rem}
  .contact-bd{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:3rem}
  .contact-bd .lead{grid-column:1}
  .contact-bd .cta{grid-column:2;grid-row:1 / span 2;margin:0}
}
@media (min-width:64em){
  :root{--rail:3rem;--sh:1.75}
  .hero{padding-block:4.75rem 4.5rem}
  .hero-row{grid-template-columns:minmax(0,1fr) 23.75rem;gap:4.5rem;align-items:end;margin-top:2.25rem}
  .records{padding-block:4.5rem 4.5rem}
  .more{padding-top:2.375rem}
  .wr-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4.5rem;align-items:end}
  .wr-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:4.5rem}
}
@media (min-width:75em){
  :root{--logo-h:1.875rem}
  .hd-in{display:grid;grid-template-columns:1fr auto 1fr}
  .coords{display:block}
  .nav{justify-self:end}
}
@media (min-width:80em){
  .tb{grid-template-columns:auto auto auto auto minmax(10rem,1fr) auto}
  .tb>div{font-size:.9375rem}
}

/* =====================================================================
   Motion. Default (no support / reduced motion) = static, complete state.
   The stem and the chain draw-in are scroll-driven only. No JS.
   ===================================================================== */
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes draw-v{from{scale:1 0}to{scale:1 1}}
@keyframes draw-h{from{scale:0 1}to{scale:1 1}}
@keyframes show{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @supports (animation-timeline:scroll()){
    /* A's stem: the tip tracks a line 65% down the viewport, then forks into shoots */
    .feat{view-timeline:--feat block}
    .stem{animation:grow-y auto linear both;animation-timeline:--feat;animation-range:cover 35vh cover calc(100% - 65vh)}
    .tick{animation:grow-x auto linear both;animation-timeline:--feat;animation-range:cover calc(35vh + .5rem) cover calc(35vh + 2.5rem)}
    .shoots{view-timeline:--shoots block;animation:reveal auto linear both;animation-timeline:--shoots;animation-range:cover 35vh cover calc(35vh + 64px * var(--sh))}
    /* B's chain: links draw in order, the broken one gets its redline */
    .conn{view-timeline:--conn block}
    .conn::before{animation:draw-v auto linear both;animation-timeline:--conn;animation-range:cover calc(25vh + var(--d)) cover calc(40vh + var(--d))}
    .conn::after{animation:show auto linear both;animation-timeline:--conn;animation-range:cover calc(37vh + var(--d)) cover calc(40vh + var(--d))}
    .conn .x,.conn .xl{animation:show auto linear both;animation-timeline:--conn;animation-range:cover calc(40vh + var(--d)) cover calc(46vh + var(--d))}
    .note{animation:rise auto linear both;animation-timeline:view();animation-range:cover 12vh cover 24vh}
    @container sheet (min-width:56rem){
      .conn::before{animation-name:draw-h}
    }
  }
}

/* ---------- Nav: current page ---------- */
.nav a[aria-current="page"]{text-decoration:underline 1px var(--sage);text-underline-offset:6px}

/* ---------- Sub-pages (water rights, about, privacy, 404) ---------- */
.page{padding-block:3rem 3.5rem}
.prose{display:grid;gap:1rem;max-width:40rem;font-size:1.0625rem;line-height:1.65;color:var(--muted)}
.prose .h2s{margin-top:1.25rem;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline 1px var(--sage);text-underline-offset:4px}
.prose a:hover{color:var(--sage)}
.src{font:500 .75rem/1.55 var(--mono);color:var(--label)}
.src a{color:inherit}
.later{margin-top:2rem;color:var(--muted);text-wrap:pretty}
@media (min-width:48em){.page{padding-block:4rem 4.5rem}}

/* ---------- Print (title people print /water-rights) ---------- */
@media print{
  :root{--bg:#fff;--ink:#000;--muted:#333;--label:#444;--line:#777;--rule:#999;--card:#fff;--bar:#f2f2f2;--grid:transparent;--red:#b3261e;--sage:#2f4f33}
  body{font-size:11pt}
  .skip,.nav,.coords,.stem,.tick,.shoots,.cm,.cta,.wr-cta .btn{display:none!important}
  .hero,.sheet{background-image:none}
  /* Paper has no scroll: drop every animation so scroll-driven pieces (chain connectors, BREAK, note) print in their final state */
  *,*::before,*::after{animation:none!important}
  /* Brand colour lockup on light backgrounds (brand/brand.md); the inline SVG paths carry these fill attributes */
  .logo [fill="#ABC7A5"]{fill:#49694D}
  .logo [fill="#F1EBDD"]{fill:#243D32}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  .node,.rec,.scope,.ledger li,.steps li{break-inside:avoid}
}