:root{
      --ink:#F4EBDC; --ink-2:#FFF8EE; --ink-3:#EFE4D2;
      --hair:rgba(44,36,24,.14);
      --text:#2C2418; --dim:#6B6154;
      --copper:#E8893A; --copper-deep:#8A4E12;
      --indigo:#4F6FE8; --madder:#D63D5C; --chartreuse:#C8E05C;
      --teal:#1A9A8E; --violet:#7A5AE0; --gold:#C9A227; --linen:#FFF8EE;
      --display:"Big Shoulders Display",Impact,sans-serif;
      --body:"Literata",Georgia,serif;
      --mono:"Azeret Mono",ui-monospace,Menlo,monospace;
      --brass:#C47A2C;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
    body{
      margin:0; background:var(--ink); color:var(--text);
      font-family:var(--body); font-size:1.0625rem; line-height:1.7;
      overflow-x:hidden;
    }
    .skip{
      position:absolute; left:-999px; top:0; background:var(--copper); color:#2C2418;
      padding:.6rem 1rem; font-family:var(--mono); z-index:20;
    }
    .skip:focus{left:1rem; top:1rem}
    .wrap{position:relative; z-index:1; max-width:68rem; margin:0 auto; padding:0 1.5rem 4.5rem}

    nav{
      position:sticky; top:0; z-index:8;
      background:rgba(244,235,220,.92); backdrop-filter:blur(12px);
      border-bottom:1px solid var(--hair);
    }
    .nav-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem;
      max-width:68rem; margin:0 auto; padding:1rem 1.5rem}
    .brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text)}
    .brand img{width:2.1rem; height:2.1rem; border-radius:.4rem; object-fit:cover; border:1px solid var(--hair);
      box-shadow:0 4px 10px rgba(44,36,24,.12)}
    .brand span{font-family:var(--display); font-size:1.15rem; letter-spacing:.04em; text-transform:uppercase; font-weight:800}
    .nav-links{display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap}
    .nav-links a:not(.btn), .nav-links .share{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
      color:var(--dim); text-decoration:none}
    .nav-links a:not(.btn):hover,.nav-links a:not(.btn):focus-visible,.nav-links .share:hover,.nav-links .share:focus-visible{color:var(--copper-deep)}
    .nav-links a:focus-visible,.nav-links .share:focus-visible{outline:2px solid var(--indigo); outline-offset:4px}
    .nav-links .share{background:none; border:0; padding:0; cursor:pointer}
    .nav-links .btn{padding:.7rem 1.1rem; font-size:.72rem}

    h1{font-family:var(--display); font-weight:800; font-size:clamp(3.2rem,10vw,7rem); line-height:.82;
      letter-spacing:-.03em; margin:0 0 1.1rem; text-transform:uppercase}
    h1 .two{color:var(--indigo)}
    .lede{font-size:clamp(1.12rem,2.4vw,1.4rem); line-height:1.55; color:var(--dim);
      max-width:38ch; margin:0 0 1.8rem}
    .lede em{font-style:italic; color:var(--text)}

    .invention{position:relative; z-index:1; margin:0 0 2.4rem}
    .invention-shot{display:block; width:100%; height:auto; aspect-ratio:16/9; max-height:60vh; object-fit:cover;
      object-position:center 42%; background:#F7F1E4}
    .plaque{
      position:relative; z-index:2; margin:-5.5rem auto 0; max-width:68rem; padding:0 1.5rem;
    }
    .plaque-card{
      background:var(--ink-2); border:1px solid var(--hair); padding:1.6rem 1.8rem 1.5rem;
      box-shadow:0 18px 40px rgba(44,36,24,.12);
    }
    .stamps{display:flex; flex-wrap:wrap; gap:.55rem; margin:1.2rem 0 0; padding:0; list-style:none}
    .stamps li{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
      border:1px solid var(--hair); padding:.45rem .7rem; background:var(--ink); color:var(--dim)}
    .stamps b{color:var(--text); font-weight:600}

    .hero-frame{position:relative; border:1px solid var(--hair); background:var(--ink-2); min-width:0;
      box-shadow:0 14px 32px rgba(44,36,24,.1)}
    .hero-frame img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover}
    .hero-caption{position:absolute; left:0; right:0; bottom:0; padding:.7rem 1rem;
      font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
      color:var(--text); background:linear-gradient(transparent, rgba(244,235,220,.94))}

    .actions{display:flex; flex-wrap:wrap; gap:1rem}
    .btn{font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
      text-decoration:none; padding:1rem 1.7rem; display:inline-block; border:0; cursor:pointer;
      transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s}
    .btn-solid{background:var(--copper); color:#2C2418; box-shadow:0 8px 18px rgba(138,78,18,.28)}
    .btn-solid:hover,.btn-solid:focus-visible{transform:translateY(-2px); box-shadow:0 12px 24px rgba(138,78,18,.34)}
    .btn-ghost{color:var(--text); background:var(--ink-2); border:1px solid var(--hair);
      box-shadow:0 6px 14px rgba(44,36,24,.08)}
    .btn-ghost:hover,.btn-ghost:focus-visible{transform:translateY(-2px); border-color:var(--indigo)}
    .btn:focus-visible{outline:2px solid var(--indigo); outline-offset:4px}

    .lanes{
      display:flex; gap:.55rem; align-items:stretch; margin:1.35rem 0 1.5rem
    }
    .lanes.story{
      position:sticky; top:3.55rem; z-index:7;
      background:rgba(244,235,220,.94); backdrop-filter:blur(12px);
      margin:0 -1.5rem 1.5rem; padding:.7rem 1.5rem .8rem;
      border-bottom:1px solid var(--hair)
    }
    .lanes.story:has(.lane:nth-child(1):is(:hover,:focus-visible,[aria-current="true"])) ~ .chapters .chapter:nth-child(1) figure,
    .lanes.story:has(.lane:nth-child(2):is(:hover,:focus-visible,[aria-current="true"])) ~ .chapters .chapter:nth-child(2) figure,
    .lanes.story:has(.lane:nth-child(3):is(:hover,:focus-visible,[aria-current="true"])) ~ .chapters .chapter:nth-child(3) figure,
    .lanes.story:has(.lane:nth-child(4):is(:hover,:focus-visible,[aria-current="true"])) ~ .chapters .chapter:nth-child(4) figure{
      border-color:color-mix(in srgb, var(--c) 50%, var(--hair));
      box-shadow:0 18px 36px color-mix(in srgb, var(--c) 22%, rgba(44,36,24,.08))
    }
    .lanes .lane{
      flex:1; border:0; padding:0; cursor:pointer; appearance:none; min-height:1.5rem;
      background:transparent; display:flex; flex-direction:column; gap:.4rem; justify-content:center;
      text-decoration:none; color:var(--dim); text-align:center;
      font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500
    }
    .lanes .lane[aria-current="true"]{color:var(--text)}
    .lanes .lane > span{
      display:block; height:.7rem; width:100%; border-radius:99px; background:var(--c);
      position:relative; overflow:hidden;
      transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1)
    }
    .lanes .lane > span::after{
      content:""; position:absolute; inset:0 auto 0 -50%; width:46%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
      animation:flow-x 1.8s cubic-bezier(.16,1,.3,1) 2 both
    }
    .laws .no::after{
      content:""; position:absolute; inset:-45% 0 auto; height:42%; width:100%;
      background:linear-gradient(180deg, transparent, rgba(255,255,255,.82), transparent);
      animation:flow-y 2.2s cubic-bezier(.16,1,.3,1) 2 both
    }
    .lanes .lane:nth-child(2) > span::after, .laws li:nth-child(2) .no::after{animation-delay:-.55s}
    .lanes .lane:nth-child(3) > span::after, .laws li:nth-child(3) .no::after{animation-delay:-1.1s}
    .lanes .lane:nth-child(4) > span::after, .laws li:nth-child(4) .no::after{animation-delay:-1.65s}
    .lanes .lane:hover > span, .lanes .lane:focus-visible > span, .lanes .lane[aria-pressed="true"] > span,
    .lanes .lane[aria-current="true"] > span,
    .wrap:has(.laws li:nth-child(1) .law:is(:hover,:focus-visible,[aria-pressed="true"])) .lanes .lane:nth-child(1) > span,
    .wrap:has(.laws li:nth-child(2) .law:is(:hover,:focus-visible,[aria-pressed="true"])) .lanes .lane:nth-child(2) > span,
    .wrap:has(.laws li:nth-child(3) .law:is(:hover,:focus-visible,[aria-pressed="true"])) .lanes .lane:nth-child(3) > span,
    .wrap:has(.laws li:nth-child(4) .law:is(:hover,:focus-visible,[aria-pressed="true"])) .lanes .lane:nth-child(4) > span,
    .wrap:has(.chapters .chapter:nth-child(1):is(:hover,.on)) .lanes .lane:nth-child(1) > span,
    .wrap:has(.chapters .chapter:nth-child(2):is(:hover,.on)) .lanes .lane:nth-child(2) > span,
    .wrap:has(.chapters .chapter:nth-child(3):is(:hover,.on)) .lanes .lane:nth-child(3) > span,
    .wrap:has(.chapters .chapter:nth-child(4):is(:hover,.on)) .lanes .lane:nth-child(4) > span{
      transform:scaleY(1.55); box-shadow:0 6px 16px color-mix(in srgb, var(--c) 45%, transparent)
    }
    .lanes .lane:focus-visible{outline:2px solid var(--indigo); outline-offset:3px}
    .lanes.off-stage .lane > span::after, .laws.off-stage .no::after,
    .road.off-stage .dot::after{animation-play-state:paused}
    @keyframes flow-x{to{transform:translateX(220px)}}
    @keyframes flow-y{to{transform:translateY(90px)}}

    h2.sec{font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
      color:var(--dim); margin:2.6rem 0 1.1rem; font-weight:500}
    h2.sec[id], .invention[id]{scroll-margin-top:5.5rem}
    h3{font-family:var(--display); font-weight:800; letter-spacing:-.02em; text-transform:uppercase; margin:0 0 .4rem}

    .laws{display:grid; gap:1rem; margin:0 0 clamp(3.2rem,8vw,5.5rem); padding:0; list-style:none}
    .laws li{margin:0}
    .laws li:nth-child(even){margin-left:clamp(0rem,4vw,3rem)}
    .law{
      width:100%; display:grid; grid-template-columns:auto 1fr; gap:1.1rem; text-align:left;
      background:var(--ink-2); border:1px solid var(--hair); padding:1.35rem 1.5rem 1.35rem 1.2rem;
      box-shadow:0 10px 24px rgba(44,36,24,.06); cursor:pointer; color:inherit; font:inherit;
      appearance:none; border-radius:0;
      transition:translate .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1),
        border-color .28s cubic-bezier(.16,1,.3,1), opacity .28s cubic-bezier(.16,1,.3,1);
      animation:law-in .7s cubic-bezier(.16,1,.3,1) backwards
    }
    .laws li:nth-child(2) .law{animation-delay:.08s}
    .laws li:nth-child(3) .law{animation-delay:.16s}
    .laws li:nth-child(4) .law{animation-delay:.24s}
    .law:hover, .law:focus-visible, .law[aria-pressed="true"],
    .lanes:has(.lane:nth-child(1):is(:hover,:focus-visible,[aria-pressed="true"])) ~ .laws li:nth-child(1) .law,
    .lanes:has(.lane:nth-child(2):is(:hover,:focus-visible,[aria-pressed="true"])) ~ .laws li:nth-child(2) .law,
    .lanes:has(.lane:nth-child(3):is(:hover,:focus-visible,[aria-pressed="true"])) ~ .laws li:nth-child(3) .law,
    .lanes:has(.lane:nth-child(4):is(:hover,:focus-visible,[aria-pressed="true"])) ~ .laws li:nth-child(4) .law{
      translate:0 -4px;
      border-color:color-mix(in srgb, var(--c) 50%, var(--hair));
      box-shadow:0 18px 36px color-mix(in srgb, var(--c) 22%, rgba(44,36,24,.08))
    }
    .law:focus-visible{outline:2px solid var(--indigo); outline-offset:3px}
    .laws:has(.law[aria-pressed="true"]) .law:not([aria-pressed="true"]){opacity:.62}
    .laws .no{width:1.15rem; height:4.2rem; border-radius:99px; background:var(--c);
      position:relative; overflow:hidden; display:block}
    .lanes .lane:hover > span::after, .lanes .lane:focus-visible > span::after,
    .lanes .lane[aria-pressed="true"] > span::after, .lanes .lane[aria-current="true"] > span::after{animation:flow-x 1.6s cubic-bezier(.16,1,.3,1) infinite}
    .law:hover .no::after, .law:focus-visible .no::after, .law[aria-pressed="true"] .no::after{
      animation:flow-y 1.4s cubic-bezier(.16,1,.3,1) infinite
    }
    .law-title{display:block; font-family:var(--display); font-weight:800; letter-spacing:-.02em;
      text-transform:uppercase; margin:0 0 .4rem}
    .law-copy{margin:0; color:var(--dim); display:block}
    @keyframes law-in{
      from{opacity:0; filter:blur(5px); translate:0 14px}
      to{opacity:1; filter:none; translate:0 0}
    }

    .guide{display:grid; gap:0; margin:0 0 clamp(3.2rem,8vw,5.5rem)}
    .step{display:grid; grid-template-columns:4.2rem 1fr; gap:1.2rem; padding:1.5rem 0;
      border-top:1px solid var(--hair)}
    .step:last-child{border-bottom:1px solid var(--hair)}
    .step > div{min-width:0}
    .step .n{font-family:var(--mono); color:var(--c, var(--copper)); font-size:.8rem; letter-spacing:.12em; padding-top:.35rem}
    .step p{margin:.25rem 0 0; color:var(--dim); max-width:62ch}
    .cmd{
      font-family:var(--mono); font-size:.82rem; background:var(--ink-3); color:var(--text);
      border:1px solid var(--hair); padding:.7rem 1rem; margin:.9rem 0 0; overflow-x:auto;
      white-space:pre; line-height:1.55;
    }
    .cmd .c{color:var(--copper-deep)}
    .cmd .g{color:var(--teal)}
    .cmd .d{color:var(--dim)}

    .picks{display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 1.2rem}
    .picks button{
      font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
      background:var(--ink-2); color:var(--text); border:1px solid var(--hair); padding:.65rem .9rem; cursor:pointer;
    }
    .picks button[aria-pressed="true"], .picks button:hover, .picks button:focus-visible{
      border-color:var(--copper); color:var(--copper-deep); background:#FFF3E4
    }
    .picks button:focus-visible{outline:2px solid var(--indigo); outline-offset:3px}
    .play-card,.install-card{background:var(--ink-2); border:1px solid var(--hair);
      border-top:3px solid var(--copper); padding:1.4rem 1.5rem; min-height:9.5rem}
    .play-card{margin:0 0 clamp(3.2rem,8vw,5.5rem)}
    .play-card .tag,.install-card .tag{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-deep); margin:0 0 .5rem}
    .play-card p,.install-card p{margin:.35rem 0 0; color:var(--dim)}
    .install-card h3{margin:.1rem 0 0}

    .plays{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:0 0 clamp(3.2rem,8vw,5.5rem)}
    .plays article{background:var(--ink-2); border:1px solid var(--hair); padding:1.35rem 1.4rem;
      border-top:3px solid var(--c); box-shadow:0 8px 20px rgba(44,36,24,.05)}
    .plays .why{font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
      margin:0 0 .55rem}
    .plays .why, .mile .st{color:color-mix(in srgb, var(--c) 62%, #2C2418)}
    .plays p{margin:.3rem 0 0; color:var(--dim); font-size:.98rem}

    .road{display:grid; gap:0; margin:0 0 1.2rem}
    .mile{display:grid; grid-template-columns:7.5rem 1.1rem 1fr; gap:1.1rem; align-items:start}
    .mile .when{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
      color:var(--dim); padding-top:.35rem}
    .rail{position:relative; min-height:100%}
    .rail::before{content:""; position:absolute; left:50%; top:.55rem; bottom:-.2rem; width:2px;
      background:var(--hair); transform:translateX(-50%)}
    .mile:last-child .rail::before{bottom:auto; height:0}
    .dot{display:block; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--c); position:relative; z-index:1;
      box-shadow:0 0 0 4px var(--ink);
      transition:scale .28s cubic-bezier(.16,1,.3,1)}
    .mile:hover .dot, .mile:focus-within .dot{scale:1.18}
    .dot::after{
      content:""; position:absolute; inset:-5px; border-radius:50%;
      border:1.5px solid var(--c); opacity:0; animation:ripple 1.8s cubic-bezier(.16,1,.3,1) 3 both
    }
    .mile:hover .dot::after, .mile:focus-within .dot::after{
      animation:ripple 1.6s cubic-bezier(.16,1,.3,1) infinite
    }
    .mile:nth-child(2) .dot::after{animation-delay:.4s}
    .mile:nth-child(3) .dot::after{animation-delay:.8s}
    .mile:nth-child(4) .dot::after{animation-delay:1.2s}
    .mile:nth-child(5) .dot::after{animation-delay:1.6s}
    @keyframes ripple{
      0%{transform:scale(.7); opacity:.55}
      100%{transform:scale(1.55); opacity:0}
    }
    .mile .body{background:var(--ink-2); border:1px solid var(--hair); padding:1.2rem 1.35rem; margin-bottom:1rem}
    .mile .st{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c); margin:0 0 .35rem}
    .mile p{margin:.25rem 0 0; color:var(--dim)}

    .install-box{background:var(--ink-2); border:1px solid var(--hair); padding:1.6rem 1.7rem;
      display:grid; gap:1rem; margin:0 0 2.4rem}
    .copy-row{display:flex; flex-wrap:wrap; gap:.7rem; align-items:stretch}
    .copy-row pre{flex:1; font-family:var(--mono); font-size:.88rem; background:var(--ink-3);
      padding:.9rem 1rem; border:1px solid var(--hair); min-width:12rem; margin:0; white-space:pre-wrap; line-height:1.7; color:var(--text)}
    .note{color:var(--dim); margin:0; font-size:.98rem}
    .note a,.step a,.install-card a{
      color:var(--copper-deep); text-decoration:none; border-bottom:1px solid rgba(196,122,44,.45)
    }
    .note a:hover,.note a:focus-visible,.step a:hover,.step a:focus-visible,
    .install-card a:hover,.install-card a:focus-visible{border-color:var(--copper-deep)}
    .copy-row .btn{align-self:stretch}
    .apps{display:flex; flex-wrap:wrap; gap:.55rem; margin:0}
    .how{margin:.85rem 0 0; padding:0; list-style:none; counter-reset:how}
    .how li{counter-increment:how; position:relative; padding-left:2.4rem; margin:0 0 .7rem}
    .how li:last-child{margin-bottom:0}
    .how li::before{content:counter(how, decimal-leading-zero); font-family:var(--mono);
      font-size:.72rem; letter-spacing:.08em; color:var(--copper-deep);
      position:absolute; left:0; top:.28rem}
    .warn{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--copper-deep);
      border:1px solid rgba(196,122,44,.4); background:#FFF3E4; padding:.7rem .9rem; margin:0}

    .band{margin:0 0 clamp(2rem,5vw,2.8rem)}
    .band img{aspect-ratio:4/1}
    .mile .shot{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
      margin:1.15rem 0 0; border:1px solid var(--hair)}

    .fig{margin:0 0 clamp(2.4rem,6vw,3.6rem); border:1px solid var(--hair); background:var(--ink-2)}
    .fig img{display:block; width:100%; height:auto}
    .fig figcaption{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
      color:var(--dim); padding:.85rem 1rem; border-top:1px solid var(--hair); line-height:1.8;
      background:var(--ink)}
    .fig figcaption b{color:var(--text); font-weight:600}

    .pipe-art{position:relative; background:#F7F1E4}
    .pipe-art img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center 38%}
    .pipe-labels{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
    .pipe-legend{display:none; margin:0; padding:.9rem 1rem 1.05rem; list-style:none; gap:.7rem;
      border-top:1px solid var(--hair); background:var(--ink)}
    .pipe-legend li{display:grid; grid-template-columns:2.1rem 1fr; gap:.55rem; color:var(--dim); font-size:.92rem}
    .pipe-legend b{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--copper-deep); padding-top:.28rem}
    .pipe-legend strong{display:block; font-family:var(--display); font-size:.92rem; letter-spacing:-.02em;
      text-transform:uppercase; color:var(--text); font-weight:800}
    .pipe-legend span{display:block; font-size:.88rem; color:var(--dim)}
    .pipe-legend .g{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
      color:var(--gold)}

    .blk{margin:0 0 clamp(2.4rem,6vw,3.6rem)}
    .blk > p.note{margin:.45rem 0 1.2rem; max-width:68ch}

    .policy{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:1rem; align-items:start}
    .policy > *{min-width:0}
    .knobs{display:grid; gap:.5rem}
    .knob{display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left;
      background:var(--ink-2); border:1px solid var(--hair);
      padding:.75rem .9rem; cursor:pointer; color:var(--text); font:inherit;
      box-shadow:inset 0 2px 0 transparent; transition:box-shadow .16s ease, border-color .16s}
    .knob:hover{border-color:var(--copper)}
    .knob:focus-visible{outline:2px solid var(--indigo); outline-offset:3px}
    .knob b{display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:.03em; color:var(--text)}
    .knob em{display:block; font-style:normal; font-size:.88rem; line-height:1.45; color:var(--dim); margin-top:.22rem}
    .knob i{font-family:var(--mono); font-style:normal; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--dim); border:1px solid var(--hair); padding:.35rem .6rem; white-space:nowrap}
    .knob[data-active="true"]{box-shadow:inset 0 3px 0 var(--teal)}
    .knob[data-active="true"] i{color:var(--teal); border-color:rgba(26,154,142,.4)}
    .policy-out{background:var(--ink-2); border:1px solid var(--hair); padding:1.25rem 1.35rem;
      display:grid; gap:.35rem; position:sticky; top:5.2rem}
    .policy-out .tag{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
      color:var(--copper-deep); margin:.4rem 0 0}
    .policy-out pre{font-family:var(--mono); font-size:.79rem; background:var(--ink-3); color:var(--text);
      border:1px solid var(--hair); padding:.85rem 1rem; margin:.15rem 0 0; overflow-x:auto;
      white-space:pre; line-height:1.65}
    .policy-out .btn{justify-self:start; margin-top:.9rem}

    footer{border-top:1px solid var(--hair); padding-top:2rem; font-family:var(--mono);
      font-size:.76rem; line-height:2; color:var(--dim); letter-spacing:.02em}
    footer a{color:var(--text); text-decoration:none; border-bottom:1px solid rgba(44,36,24,.2)}
    footer a:hover,footer a:focus-visible{color:var(--copper-deep); border-color:var(--copper-deep)}
    .fine{display:block; margin-top:1rem; color:#8A7F70; letter-spacing:0; font-size:.72rem; line-height:1.6}

    @media (max-width:860px){
      .plays,.stamps{grid-template-columns:1fr}
      .pipe-labels{display:none}
      .pipe-legend{display:grid}
      .band img{aspect-ratio:2/1; object-position:center}
      .policy{grid-template-columns:1fr}
      .policy-out{position:static}
      .laws li:nth-child(even){margin-left:0}
      .plaque{margin-top:-2.4rem}
      .mile{grid-template-columns:1.1rem 1fr; gap:.9rem}
      .mile .when{grid-column:2; padding-top:0}
      .rail{grid-row:span 2}
      .chapter:nth-child(even){margin-left:0}
    }

    /* Touch comfort: nav links render ~20px tall, well under the 44px minimum. */
    @media (max-width:860px){
      .nav-links a, .nav-links .share{min-height:44px; min-width:44px; padding-inline:.3rem;
        display:inline-flex; align-items:center; justify-content:center}
    }
    /* The single row needs ~744px of the 768px tablet width, so anything narrower wrapped
       the Install button onto its own line: 141px at 640px, 155px at 375px, and sticky, so it
       ate that on every scroll. Below the tablet breakpoint use two deliberate rows and let
       the bar scroll away. Measured, not guessed - 620px was too low and still wrapped at 640. */
    @media (max-width:767px){
      nav{position:static}
      .nav-inner{flex-wrap:wrap; row-gap:.2rem; column-gap:.8rem; padding:.7rem 1.1rem}
      .brand{flex:1 1 100%}
      .nav-links{width:100%; justify-content:space-between; flex-wrap:nowrap; gap:.3rem}
      .nav-links a:not(.btn), .nav-links .share{font-size:.64rem; letter-spacing:.05em}
      .nav-links .btn{padding:.5rem .75rem; font-size:.64rem}
    }
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *{animation:none!important; transition:none!important}
      .laws:has(.law[aria-pressed="true"]) .law:not([aria-pressed="true"]){opacity:1}
    }
  

    .nav-links a:not(.btn)[aria-current="page"]{color:var(--copper-deep)}
    .page-lede{font-size:clamp(1.2rem,2.6vw,1.55rem); max-width:42ch; margin:2.2rem 0 1.6rem; color:var(--text)}
    .chapters{margin:0 0 clamp(2.4rem,7vw,4.5rem)}
    .chapter{margin:0 0 clamp(2.2rem,6vw,3.6rem); --c:var(--copper); scroll-margin-top:5.6rem}
    .chapter.on figure{
      border-color:color-mix(in srgb, var(--c) 50%, var(--hair));
      box-shadow:0 18px 36px color-mix(in srgb, var(--c) 22%, rgba(44,36,24,.08))
    }
    .chapter:nth-child(even){margin-left:clamp(0rem,5vw,3.2rem)}
    .chapter figure{
      margin:0; border:1px solid var(--hair); background:var(--ink-2); overflow:hidden;
      position:relative; box-shadow:0 14px 32px rgba(44,36,24,.1)
    }
    .chapter img{
      display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
      scale:1.06; filter:saturate(.9);
      transition:scale 1.15s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1)
    }
    .chapter.in img{scale:1; filter:saturate(1)}
    .chapter .gleam{
      position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(105deg, transparent 36%, color-mix(in srgb, var(--c) 28%, #fff) 50%, transparent 64%);
      translate:-120% 0; mix-blend-mode:screen; opacity:.55
    }
    .chapter.in .gleam, .chapter.flash .gleam{animation:gleam 1.35s cubic-bezier(.16,1,.3,1) 1 both}
    @keyframes gleam{to{translate:120% 0}}
    .chapter .copy{
      background:var(--ink-2); border:1px solid var(--hair); border-top:0;
      padding:1.45rem 1.55rem 1.55rem; box-shadow:0 10px 24px rgba(44,36,24,.06)
    }
    .chapter h2{
      font-family:var(--display); font-weight:800; letter-spacing:-.03em; text-transform:uppercase;
      font-size:clamp(1.7rem,4.2vw,2.55rem); line-height:1.05; margin:0 0 .55rem
    }
    .chapter p{margin:0; color:var(--dim); max-width:58ch}
    .chapter .cmd{margin-top:.9rem}
    .closer{
      background:var(--ink-2); border:1px solid var(--hair); padding:1.7rem 1.8rem;
      margin:0 0 2.4rem; box-shadow:0 12px 28px rgba(44,36,24,.08)
    }
    .closer p{margin:0 0 1.2rem; max-width:46ch; font-size:1.15rem}

    .laws.visual{gap:1.4rem}
    .laws.visual li{
      margin-left:0;
      display:grid;
      background:var(--ink-2);
      border:1px solid var(--hair);
      box-shadow:0 12px 28px rgba(44,36,24,.08)
    }
    .laws.visual li figure{
      margin:0; position:relative; overflow:hidden; border-bottom:1px solid var(--hair)
    }
    .laws.visual li img{
      display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover
    }
    .laws.visual .law{box-shadow:none; border:0; animation:none; height:auto}
    .laws.visual .gleam{
      position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(105deg, transparent 36%, color-mix(in srgb, var(--c) 28%, #fff) 50%, transparent 64%);
      translate:-120% 0; mix-blend-mode:screen; opacity:.55
    }
    .laws.visual li:hover .gleam, .laws.visual li:focus-within .gleam,
    .laws.visual li:has(.law[aria-pressed="true"]) .gleam{animation:gleam 1.35s cubic-bezier(.16,1,.3,1) 1 both}

    @media (min-width:960px){
      .laws.visual li{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:stretch}
      .laws.visual li:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
      .laws.visual li:nth-child(even) figure{order:2}
      .laws.visual li figure{border-bottom:0; border-right:1px solid var(--hair)}
      .laws.visual li:nth-child(even) figure{border-right:0; border-left:1px solid var(--hair)}
    }