/* ═══ /brass/ · the door's text, standing on its own page. The five lines, the test, the two meanings,
   the fork, and the lever. Page-scoped; uses lifted tokens only. ═══ */
:root{--line2:#3E2A6B;--mute:#9C8CB4}

@keyframes sf{from{background-position:0% 0}to{background-position:200% 0}}
.foil{background-image:var(--foil-loop);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sf 6.5s linear infinite}
@media(prefers-reduced-motion:reduce){.foil{animation:none!important}}

/* ── the door ── */
.door{position:fixed;inset:0;z-index:95;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background:rgba(16,8,32,.80);backdrop-filter:blur(9px) saturate(.85);-webkit-backdrop-filter:blur(9px) saturate(.85);
  padding:calc(64px + env(safe-area-inset-top,0px)) 20px calc(56px + env(safe-area-inset-bottom,0px));animation:dfade 520ms ease-out both}
@keyframes dfade{from{opacity:0}to{opacity:1}}
.door.gone{opacity:0;pointer-events:none;transition:opacity 620ms cubic-bezier(.4,0,.2,1)}
.g-brass{max-width:680px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;animation:din 700ms 90ms ease-out both}
.in>*{max-width:100%}
@keyframes din{from{opacity:0}to{opacity:1}}
.stage{overflow:hidden}
.rule{display:flex;align-items:center;gap:14px;width:100%}
.rule i{flex:1;height:1px;background:var(--line)}
.rule.top i{flex:0 0 42px}
.g-brass-sub{font-family:var(--f-m);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--dusk);margin-top:12px}
.lede{font-family:var(--f-d);font-size:clamp(1.45rem,3.4vw,1.95rem);line-height:1.2;letter-spacing:-.012em;margin:40px 0 0;text-wrap:balance}
.lede b{font-weight:400;color:var(--brass-l)}
.lede2{font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.45;margin:14px 0 0;color:var(--dusk)}
.lede2 b{font-weight:400;color:var(--bone)}
.sec{margin-top:44px;width:100%}
.note{font-size:17px;line-height:1.5;color:var(--dusk);margin:14px 0 0}
.note b{font-weight:400;color:var(--bone)}
.note.hot b{color:var(--magenta-t)}
p.left{text-align:left}

/* the test */
.plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px;width:100%}
.plate{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:16px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.plate.pass{border-color:var(--mint)}
.plate.warn{border-color:var(--brass-d)}
.plate .n{font-family:var(--f-m);font-size:9px;letter-spacing:.24em;color:var(--mute)}
.plate .t{font-family:var(--f-d);font-size:clamp(1.05rem,2.2vw,1.4rem);letter-spacing:-.01em;color:var(--brass-l);text-wrap:balance}
.plate .s{font-family:var(--f-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.plate.warn .s{color:var(--lo)}
.plate.now{border-color:var(--magenta);background:rgba(255,61,154,.14);box-shadow:0 0 22px rgba(255,61,154,.3)}
.plate.now .n,.plate.now .s{color:var(--magenta-t)}.plate.now .t{color:var(--bone)}
@media(max-width:560px){.plates{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* two meanings */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;width:100%}
.card{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:22px;text-align:left;display:flex;flex-direction:column;gap:8px}
.card .k2{font-family:var(--f-m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.card .big{font-family:var(--f-d);font-size:clamp(1.6rem,3.2vw,2.1rem);letter-spacing:-.02em;color:var(--mute);line-height:1.1}
.card .big.struck{text-decoration:line-through;text-decoration-color:var(--magenta);text-decoration-thickness:3px}
.card .d{font-size:15px;line-height:1.5;color:var(--dusk)}
.card.foilbox{border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--foil) border-box;box-shadow:0 0 34px rgba(255,61,154,.18)}
.card.foilbox .k2{color:var(--brass)}.card.foilbox .big{color:var(--brass-l)}.card.foilbox .d{color:var(--bone)}
.card .row{display:flex;align-items:center;gap:12px}
@media(max-width:560px){.pair{grid-template-columns:1fr}}

/* the plate of rules */
.brass{position:relative;width:100%;margin-top:40px;text-align:left;border:1px solid var(--line2);border-radius:14px;padding:30px 34px 24px;
  background:linear-gradient(168deg,rgba(41,26,78,.86),rgba(29,17,56,.86) 55%,rgba(36,23,72,.86));box-shadow:0 0 0 1px rgba(255,201,77,.09),0 34px 80px rgba(0,0,0,.5)}
.riv{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--brass-l),var(--brass-d) 70%,#6B4A0E)}
.riv.tl{left:13px;top:13px}.riv.tr{right:13px;top:13px}.riv.bl{left:13px;bottom:13px}.riv.br{right:13px;bottom:13px}
.lbl{position:absolute;top:-9px;left:30px;background:#1D1138;padding:0 11px;font-family:var(--f-m);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.brass ol{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.brass li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line2);align-items:start}
.brass li:last-child{border-bottom:0}
.brass .num{font-family:var(--f-d);font-size:30px;line-height:1;color:var(--brass)}
.brass p{margin:0;font-size:17px;line-height:1.5;color:var(--dusk)}
.brass p b{display:block;font-weight:600;color:var(--brass-l);font-size:18px}
@media(max-width:560px){.brass{padding:26px 20px 20px}.brass li{grid-template-columns:34px minmax(0,1fr);gap:12px}.brass .num{font-size:26px}}

/* the fork */
.q{font-family:var(--f-d);font-size:clamp(1.6rem,3.6vw,2.15rem);line-height:1.1;letter-spacing:-.015em;margin:18px 0 0;color:var(--brass-l);text-wrap:balance}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px;width:100%}
.dr{position:relative;border:1px solid var(--line);border-radius:10px 10px 4px 4px;background:var(--panel);padding:20px;text-align:left;display:flex;flex-direction:column;gap:8px}
.dr::before{content:"";position:absolute;top:-14px;left:50%;width:1px;height:14px;background:var(--line)}
.dr .k2{font-family:var(--f-m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.dr .h{font-family:var(--f-d);font-size:clamp(1.2rem,2.4vw,1.5rem);letter-spacing:-.01em;color:var(--dusk);line-height:1.15}
.dr .d{font-size:14.5px;line-height:1.5;color:var(--mute)}
/* Door two wears the foil: on this page the foil means the other world, the
   animal that doesn't exist. Brass is everywhere here; the foil is rare. */
.dr.lit{border-color:transparent;background:linear-gradient(rgba(28,16,52,.96),rgba(28,16,52,.96)) padding-box,var(--foil) border-box;box-shadow:0 0 34px rgba(255,61,154,.16),0 0 60px rgba(53,228,244,.08)}
.dr.lit::before{background:var(--foil)}
.dr.lit .k2{color:var(--brass)}.dr.lit .h{color:var(--brass-l)}.dr.lit .d{color:var(--bone)}
@media(max-width:560px){.doors{grid-template-columns:1fr}}

/* go / stay — two cards; what stays wears the foil */
.rule.mid{margin-top:40px}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;width:100%}
.split>div{padding:18px 22px;text-align:left;border:1px solid var(--line);border-radius:8px}
.split .go{background:rgba(255,123,138,.06)}
.split .stay{border-color:transparent;background:linear-gradient(rgba(20,26,34,.97),rgba(20,26,34,.97)) padding-box,var(--foil) border-box;box-shadow:0 0 26px rgba(82,183,136,.12),0 0 40px rgba(53,228,244,.06)}
.split .k2{display:block;font-family:var(--f-m);font-size:9px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px}
.split .go .k2{color:var(--lo)}.split .stay .k2{color:var(--mint)}
.split .t{font-size:16px;line-height:1.5;color:var(--bone)}
@media(max-width:560px){.split{grid-template-columns:1fr}}

.walk{display:inline-block;margin-top:14px;font-family:var(--f-m);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);text-decoration:none;padding:13px 10px;border-bottom:1px solid var(--line)}
.walk:hover{color:var(--brass-l);border-bottom-color:var(--brass)}
.walk:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
/* the lever */
.foilrule{width:100%;height:1px;margin-top:44px;background:var(--foil);opacity:.8}
.carry{font-family:var(--f-d);font-size:clamp(1.4rem,3vw,1.75rem);line-height:1.25;margin:34px 0 0}
.lever{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-family:var(--f-m);font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#160516;border:0;border-radius:5px;padding:18px 40px;cursor:pointer;
  background:linear-gradient(180deg,#FF5CA5,#FF3D9A 52%,#D91E70);box-shadow:0 5px 0 0 #8E1249,0 12px 26px rgba(255,61,154,.3);transition:transform 90ms,box-shadow 90ms}
.lever:hover{transform:translateY(2px);box-shadow:0 3px 0 0 #8E1249,0 8px 18px rgba(255,61,154,.3)}
.lever:active{transform:translateY(5px);box-shadow:0 0 0 0 #8E1249}
.lever:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.band{font-family:var(--f-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.quiet{margin-top:8px;background:none;border:0;color:var(--mute);font-family:var(--f-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:9px 14px;border-radius:6px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#5B4880}
.quiet:hover{color:var(--bone);text-decoration-color:var(--brass)}
.quiet.gate{margin-top:26px;font-size:10px;letter-spacing:.18em;color:#7E6BA3;text-decoration-color:#3E2A6B}
.quiet:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.fine{font-family:var(--f-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:20px;line-height:2}
@media(max-width:560px){.lever{width:100%;justify-content:center}}


/* inline styles replaced by classes (the CSP allows none) */
.g-brass{margin-top:44px}
.rule.top .kick{letter-spacing:.34em}
.note.bone{color:var(--bone)}
.note.lg{color:var(--bone);font-size:18px}
.note.md{font-size:15.5px}

/* the walk link stays on the property: a plain arrow, not the outbound one */
.walk .ar{color:var(--brass-d);margin-left:.3em}

/* THE FRONT GATE. The door to the rest of the site, and for a while the
   hardest door on the page to find. Now it is the biggest thing at the foot:
   headline type in foil, ringed in foil, on night. Not a lever — a door. */
.gatewrap{display:flex;flex-direction:column;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);width:100%}
.gatewrap .band{margin-top:0;margin-bottom:12px}
.gatebtn{display:inline-flex;align-items:center;font-family:var(--f-d);font-weight:400;font-size:26px;letter-spacing:-.01em;line-height:1;
  padding:14px 38px;border-radius:999px;cursor:pointer;text-decoration:none;color:transparent;
  background:linear-gradient(#150B2A,#150B2A) padding-box,var(--foil) border-box;border:1.5px solid transparent;
  box-shadow:0 0 34px rgba(255,61,154,.16),0 0 60px rgba(53,228,244,.10);transition:transform 120ms,box-shadow 120ms}
.gatebtn span{background-image:var(--foil-loop);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sf 6.5s linear infinite;padding-bottom:.08em}
@media(prefers-reduced-motion:reduce){.gatebtn span{animation:none!important}}
.gatebtn:hover{transform:translateY(1px);box-shadow:0 0 44px rgba(255,61,154,.24),0 0 70px rgba(53,228,244,.14)}
.gatebtn:active{transform:translateY(2px)}
.gatebtn:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
@media(max-width:560px){.gatebtn{font-size:22px;padding:12px 28px}}
main.wrap.g-brass-main{padding-bottom:24px}