/* manorlordsguide.com — "The Illuminated Scroll"
   A parchment scroll inside a carved wooden frame — the game's own UI as a website.
   Reference: /ultimate design/ mockups. Everything is a decorated plate; no plain text on wood. */

:root{
  --wood:#241709; --wood-2:#33220F; --wood-3:#1A1006;
  --wood-edge:#0E0803;
  --gold:#C9A25B; --gold-bright:#E6C687;
  --hairline:rgba(201,162,91,.3); --hairline-strong:rgba(201,162,91,.55);
  --parchment:#EDE3C8; --parchment-2:#E4D8B8; --parchment-3:#F4EDD9;
  --ink:#2B2214; --ink-2:#5E5238; --ink-3:#8a6d2f;
  --line:rgba(43,34,20,.35); --line-soft:rgba(43,34,20,.18);
  --red:#B0402F; --moss:#4C7A2E;
  --dark-ink:#E8DFC8; --dark-dim:#A89A7E;
  --font-display:"Cormorant SC",serif;
  --font-body:"Alegreya",georgia,serif;
  --font-mono:"IBM Plex Mono",monospace;
  --w:1200px;
}

*{box-sizing:border-box}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
html{scroll-behavior:smooth; scroll-padding-top:110px}
body{margin:0; color:var(--ink); font:400 18.5px/1.62 var(--font-body);
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(201,162,91,.07), transparent 60%),
    repeating-linear-gradient(93deg, rgba(0,0,0,.22) 0 3px, transparent 3px 9px, rgba(255,220,160,.025) 9px 11px, transparent 11px 26px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, var(--wood-2), var(--wood) 30%, var(--wood-3))}
img{max-width:100%; height:auto}
a{color:#7A4A1E; text-decoration:none}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
::selection{background:var(--gold); color:var(--wood)}
h1,h2{text-wrap:balance}

.eyebrow{font-family:var(--font-mono); font-size:0.83rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); display:block}

/* ══ THE SCROLL — parchment inside the carved frame ══════ */
.scroll{max-width:1280px; margin:0 auto; position:relative;
  background:
    radial-gradient(ellipse 140% 30% at 50% 0%, rgba(120,90,40,.14), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(140,120,80,.05) 54px 55px),
    linear-gradient(180deg, var(--parchment-3), var(--parchment) 8%, var(--parchment) 92%, #E0D4B0);
  border-left:16px solid transparent; border-right:16px solid transparent;
  border-image:linear-gradient(180deg,#4A3418,#241709 30%,#3A2A12 70%,#1A1006) 1;
  box-shadow:
    inset 0 0 0 2px var(--wood-edge), inset 0 0 0 4px var(--hairline-strong),
    inset 0 0 60px rgba(120,90,40,.18),
    0 0 80px rgba(0,0,0,.8)}
.roll{height:26px; margin:0; border:0;
  background:linear-gradient(180deg, rgba(43,34,20,0), rgba(43,34,20,.22) 45%, rgba(43,34,20,.4) 50%, rgba(43,34,20,.22) 55%, rgba(43,34,20,0)),
             linear-gradient(180deg, #D8CBA6, #C9BA92 50%, #D8CBA6)}

/* ══ Header: carved wood bar + shield brand ══════════════ */
.site-head{position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg,#3A2A12,#241709 80%,#1A1006);
  border-bottom:3px solid var(--wood-edge); box-shadow:0 0 0 1px var(--hairline), 0 6px 20px rgba(0,0,0,.6)}
.site-head .row{max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:1.4rem; padding:.55rem 1.5rem}
.brand{display:flex; align-items:center; gap:.7rem; color:var(--gold-bright); white-space:nowrap}
.brand svg{width:46px; height:68px; flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.brand .bt{font:700 1.05rem/1 var(--font-display); letter-spacing:.06em}
.brand small{display:block; font:500 0.6rem var(--font-mono); letter-spacing:.28em; color:var(--dark-dim); margin-top:.2rem}
.brand:hover{color:var(--gold-bright)}
.site-nav{display:flex; gap:.2rem; margin-left:auto; flex-wrap:wrap}
.site-nav a{position:relative; display:flex; align-items:center; gap:.4rem;
  font:600 .9rem var(--font-mono); letter-spacing:.04em;
  color:var(--dark-dim); padding:.5rem .65rem}
.site-nav a img{width:20px; height:20px}
.site-nav a:hover{color:var(--gold-bright)}
.site-nav a[aria-current]{color:var(--gold-bright)}
.site-nav a[aria-current]::after{content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:20px; height:16px; background:var(--gold);
  clip-path:polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)}

/* Donate CTA — sealed gold plaque at the right end of the nav */
.site-nav a.nav-donate{margin-left:.7rem; padding:.42rem .95rem; gap:.45rem;
  color:var(--wood); background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border:1px solid #F0DCA8; border-radius:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45);
  text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.site-nav a.nav-donate:hover{color:var(--wood); filter:brightness(1.08);
  transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55)}
.site-nav a.nav-donate::after{display:none}
.nav-donate .nd-heart{color:var(--red); font-size:1.05em; line-height:1}

/* ══ Hero — framed cinematic band at scroll top ══════════ */
.hero{position:relative; background-size:cover; background-position:center 25%;
  border-bottom:4px solid var(--wood-edge); box-shadow:inset 0 0 0 2px var(--hairline)}
.hero::before{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,13,5,.93) 25%, rgba(20,13,5,.5) 60%, rgba(20,13,5,.3)),
             linear-gradient(rgba(20,13,5,.15), rgba(20,13,5,.85) 96%)}
.hero-grid{position:relative; max-width:var(--w); margin:0 auto; padding:4.2rem 2rem 3.2rem;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:3rem; align-items:end}
.hero .eyebrow{color:var(--gold)}
.hero h1{font:600 clamp(2.4rem,5.5vw,4rem)/1.03 var(--font-display); color:#F2E8D2; margin:.8rem 0 1rem; text-shadow:0 3px 16px rgba(0,0,0,.7)}
.hero .lede{font-size:1.15rem; font-style:italic; color:var(--dark-ink); max-width:34em; margin:0}
.hero .lede b{color:var(--gold-bright); font-style:normal}

/* council panel (dark plate, used in heroes) */
.panel{background:linear-gradient(165deg,#2E2010,#1C1207);
  border:2px solid var(--wood-edge); outline:1px solid var(--hairline-strong);
  padding:1.2rem 1.4rem; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.5)}
.panel::before{content:""; position:absolute; inset:5px; border:1px solid var(--hairline); pointer-events:none}
.panel h2{font:600 1.09rem var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 .8rem; text-align:center}
.stat-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.45rem 0; border-bottom:1px dashed var(--hairline); font-size:1.03rem; color:var(--dark-ink)}
.stat-row:last-child{border-bottom:0}
.stat-row b{font:600 1.1rem var(--font-mono); color:var(--gold-bright); font-variant-numeric:tabular-nums}
.stat-row span{color:var(--dark-dim)}
.stat-row a{color:var(--gold-bright)}

/* ══ Content sections on parchment ═══════════════════════ */
.wrap{max-width:var(--w); margin:0 auto; padding:0 2rem}
.section{padding:3.4rem 0 3rem; position:relative}
.section + .section::before{content:""; position:absolute; top:0; left:15%; right:15%; height:2px;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent)}
.section h2{font:600 clamp(1.7rem,3.4vw,2.4rem)/1.15 var(--font-display); color:var(--ink); margin:.5rem 0 1rem}
.section p{color:var(--ink-2); max-width:38em}
.split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2.6rem; align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

/* banner title — the Settlement Planner plate, universal */
.banner-title{display:inline-block; background:linear-gradient(#2E2010,#180F06);
  color:var(--gold-bright); border:2px solid var(--gold);
  padding:.6rem 2.2rem; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.45)}
.banner-title b{font:700 clamp(1.05rem,2.4vw,1.5rem)/1.1 var(--font-display); letter-spacing:.08em; display:block}
.banner-title span{font:600 0.82rem var(--font-mono); letter-spacing:.28em; color:var(--dark-dim)}

/* ══ Framed images — metal-cornered figures ══════════════ */
.figure{position:relative; border:7px solid #3A2A12; outline:2px solid var(--wood-edge);
  box-shadow:inset 0 0 0 1px var(--hairline-strong), 0 10px 26px rgba(43,34,20,.4); background:#000}
.figure img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
.figure i.c{position:absolute; width:12px; height:12px; background:var(--gold); z-index:2}
.figure i.c1{top:-9px; left:-9px}
.figure i.c2{top:-9px; right:-9px}
.figure i.c3{bottom:-9px; left:-9px}
.figure i.c4{bottom:-9px; right:-9px}
.figure figcaption{position:absolute; left:0; right:0; bottom:0; z-index:1;
  background:linear-gradient(transparent, rgba(14,8,3,.92) 45%);
  color:var(--dark-ink); font:italic 400 1.03rem var(--font-body); padding:1.6rem 1rem .6rem}
.figure figcaption b{color:var(--gold-bright); font-style:normal}

/* ══ Plates — the universal decorated element ════════════ */
.pbox,.plate{border:2px solid var(--line); outline:1px solid rgba(201,162,91,.4); outline-offset:-5px;
  background:linear-gradient(178deg, var(--parchment-3), var(--parchment-2));
  padding:1rem 1.1rem; box-shadow:0 3px 10px rgba(43,34,20,.14); margin-bottom:1rem}
.pbox h4,.plate h4{font:600 0.82rem var(--font-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); margin:0 0 .6rem; text-align:center}

/* card grid → plates */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.1rem; margin:1.8rem 0}
.card{display:block; color:var(--ink); border:2px solid var(--line); outline:1px solid rgba(201,162,91,.4); outline-offset:-5px;
  background:linear-gradient(178deg, var(--parchment-3), var(--parchment-2));
  padding:1.15rem 1.2rem; box-shadow:0 3px 10px rgba(43,34,20,.14); transition:transform .16s, box-shadow .16s}
a.card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(43,34,20,.28); color:var(--ink)}
.card img{width:46px; height:46px; margin-bottom:.5rem; filter:drop-shadow(0 2px 3px rgba(43,34,20,.3))}
.card h3{font:700 1.12rem var(--font-display); letter-spacing:.04em; color:var(--ink); margin:0 0 .3rem}
.card p{margin:0; font-size:1.01rem; color:var(--ink-2); line-height:1.5}
.card .meta{font:600 0.82rem var(--font-mono); letter-spacing:.1em; margin-top:.7rem; display:flex; gap:.4rem; flex-wrap:wrap}
.card .meta span{border:1px solid var(--line); background:rgba(43,34,20,.06); padding:.15rem .55rem; color:var(--ink-3)}
.card .meta b{color:var(--red)}

/* buildings — atlas rows */
.atlas{display:grid; gap:.8rem; margin:1.6rem 0}
.bcard{display:grid; grid-template-columns:150px 1fr; gap:0; padding:0; overflow:hidden}
.bcard .photo{position:relative; min-height:112px}
.bcard .photo img:not(.bicon){position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bcard .photo .bicon{position:absolute; top:auto; right:auto; left:.45rem; bottom:.45rem; width:46px; height:46px; z-index:3;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.7))}
.bcard .photo::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px rgba(43,34,20,.5)}
.bcard .body{padding:.8rem 1.1rem}
.bcard h3{font:700 1.25rem var(--font-display); letter-spacing:.04em; color:var(--ink); margin:0 .8rem .35rem 0; display:inline-block}
.bcard .meta{display:inline-flex; vertical-align:middle; margin:0 0 .35rem}
.b-rows{display:flex; flex-wrap:wrap; gap:.3rem 1.6rem}
.b-row{display:flex; gap:.5rem; align-items:baseline; font-size:1.03rem}
.b-row dt{font:600 0.82rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.b-row dd{margin:0; color:var(--ink); font-weight:500}
.b-row dd .cost-item{display:inline-flex; align-items:center; gap:.25rem; margin-right:.7rem}
.b-row dd .cicon{width:18px; height:18px; flex:none; filter:drop-shadow(0 1px 2px rgba(43,34,20,.3))}

/* ══ Tips — plates in a grid, chapter banner rows ════════ */
.ledger{max-width:var(--w); margin:0 auto; padding:1.4rem 2rem 3rem}
.sec-h{display:flex; align-items:center; gap:.9rem; margin:2.6rem 0 0;
  background:linear-gradient(#33220F,#1C1207); border:2px solid var(--wood-edge); outline:1px solid var(--hairline-strong); outline-offset:-4px;
  color:var(--gold-bright); padding:.75rem 1.2rem; box-shadow:0 5px 16px rgba(43,34,20,.3)}
.sec-h img{width:42px; height:42px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.sec-h h2{font:600 1.45rem var(--font-display); letter-spacing:.05em; color:#F2E8D2; margin:0}
.sec-h .range{font:600 0.9rem var(--font-mono); color:var(--gold); margin-left:auto; font-variant-numeric:tabular-nums}
.tip-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1rem; margin:1.1rem 0 0}
.tip{display:flex; flex-direction:column; gap:.45rem; padding:.95rem 1.05rem;
  border:2px solid var(--line); outline:1px solid rgba(201,162,91,.35); outline-offset:-5px;
  background:linear-gradient(178deg, var(--parchment-3), var(--parchment-2));
  border-bottom-width:4px; box-shadow:0 3px 8px rgba(43,34,20,.12)}
.tip.key{border-bottom-color:var(--moss)}
.tip.warn{border-bottom-color:var(--red)}
.tip .head{display:flex; align-items:center; gap:.6rem; width:100%}
.tip .n{font:700 1.09rem var(--font-mono); color:var(--ink-3); font-variant-numeric:tabular-nums}
.tip .icon{width:40px; height:40px; margin-left:auto; filter:drop-shadow(0 2px 3px rgba(43,34,20,.3))}
.tip .lead{font-weight:700; font-size:1.1rem; line-height:1.35; color:var(--ink); display:block}
.tip p{margin:0; font-size:1.12rem; line-height:1.55; color:var(--ink-2)}
.tip .hl{font-family:var(--font-mono); font-size:.86em; color:#7A2A1C; background:rgba(176,64,47,.12); padding:0 .3em}
.tip.key .lead::after{content:" ◆"; color:var(--moss)}
.tip.warn .lead::after{content:" ◆"; color:var(--red)}
.tip.hide{display:none}

/* key numbers — icon plates */
.kn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin:1rem 0 0}
.kn{text-align:center; padding:1.2rem .9rem; min-height:9.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:2px solid var(--line); outline:1px solid rgba(201,162,91,.35); outline-offset:-5px;
  background:linear-gradient(178deg, var(--parchment-3), var(--parchment-2)); box-shadow:0 3px 8px rgba(43,34,20,.12)}
.kn img{width:38px; height:38px; margin-bottom:.4rem; filter:drop-shadow(0 2px 3px rgba(43,34,20,.3))}
.kn b{display:block; font:700 1.15rem var(--font-mono); color:#7A2A1C; font-variant-numeric:tabular-nums}
.kn span{font-size:0.99rem; color:var(--ink-2); line-height:1.45; display:block; margin-top:.35rem}

/* legend cards (how to read) */
.legend{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.5rem}
.legend .lg{flex:1 1 120px; text-align:center; padding:.65rem .5rem; border:1px solid var(--hairline);
  background:rgba(14,8,3,.4); color:var(--dark-ink); font-size:0.92rem}
.legend .lg img{width:30px; height:30px; display:block; margin:0 auto .25rem}
.legend .lg b{display:block; font:700 1.1rem var(--font-mono)}
.legend .lg.k b{color:#B9D08A}.legend .lg.w b{color:#E09A8C}

/* process maps as plates */
.diagram{border:2px solid var(--line); outline:1px solid rgba(201,162,91,.4); outline-offset:-5px;
  background:linear-gradient(178deg,var(--parchment-3),var(--parchment-2));
  padding:1.1rem 1.3rem; margin:1.2rem 0 0; box-shadow:0 3px 10px rgba(43,34,20,.14)}
.diagram h3{display:flex; align-items:center; gap:.6rem; font:600 0.83rem var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 .8rem}
.diagram h3 img{width:30px; height:30px}
.diagram svg{width:100%; height:auto; display:block}

/* ══ Toolbars (frozen chrome — carved wood strips) ═══════ */
.toolbar,.subbar{position:sticky; top:89px; z-index:50;
  background:linear-gradient(180deg,#2E2010,#1C1207); border-bottom:2px solid var(--wood-edge);
  box-shadow:0 0 0 1px var(--hairline), 0 5px 14px rgba(0,0,0,.45); padding:.6rem 1.5rem .45rem}
.toolbar-inner,.subbar-inner{max-width:var(--w); margin:0 auto}
.subbar{padding:.5rem 1.5rem}
.subbar-inner{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}
.searchwrap{display:flex; align-items:center; gap:.9rem}
.searchwrap input{flex:1; font:italic 400 16px var(--font-body); padding:.6rem 1rem; color:var(--dark-ink);
  background:rgba(14,8,3,.65); border:1px solid var(--hairline-strong); border-radius:0}
.searchwrap input::placeholder{color:var(--dark-dim)}
#count{font:600 0.9rem var(--font-mono); color:var(--dark-dim); white-space:nowrap; font-variant-numeric:tabular-nums}
.chips{display:flex; gap:.35rem; overflow-x:auto; padding:.55rem 0 .25rem; scrollbar-width:thin}
.chip{cursor:pointer; user-select:none; white-space:nowrap; font:600 0.85rem var(--font-mono); letter-spacing:.04em;
  color:var(--dark-dim); border:1px solid var(--hairline); background:rgba(14,8,3,.4); padding:.4rem .75rem; transition:all .15s}
.chip:hover{color:var(--gold-bright); border-color:var(--hairline-strong)}
.chip.active{background:var(--gold); color:var(--wood); border-color:var(--gold-bright)}
.toggles{display:inline-flex; gap:.35rem; margin-left:auto}
.toggle{cursor:pointer; font:600 0.83rem var(--font-mono); letter-spacing:.06em; padding:.4rem .7rem;
  border:1px solid var(--hairline); color:var(--dark-dim); background:rgba(14,8,3,.4)}
.toggle.on-key{color:#B9D08A; border-color:#66783F}
.toggle.on-warn{color:#E09A8C; border-color:#8A3D2F}
#noresult{display:none; font:italic 1rem var(--font-body); color:var(--red); padding:1.5rem 0}
#noresult.show{display:block}

/* ══ Settlement Planner ══════════════════════════════════ */
.planner-stage{position:relative; padding:3rem 1rem 2.5rem}
.planner{position:relative; max-width:1240px; margin:0 auto; background:var(--parchment);
  border:10px solid #3A2A12; outline:2px solid var(--wood-edge);
  box-shadow:inset 0 0 0 2px var(--wood-edge), inset 0 0 0 4px rgba(201,162,91,.55), 0 22px 70px rgba(43,34,20,.5);
  padding:4.4rem clamp(1rem,2.5vw,2.2rem) 2rem}
.planner-title{position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  background:linear-gradient(#2E2010,#180F06); color:var(--gold-bright); border:2px solid var(--gold);
  padding:.65rem 2.4rem; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.5); white-space:nowrap}
.planner-title b{font:700 clamp(1.1rem,2.6vw,1.65rem)/1.1 var(--font-display); letter-spacing:.08em; display:block}
.planner-title span{font:600 0.82rem var(--font-mono); letter-spacing:.28em; color:var(--dark-dim)}
.planner-title .ver{display:inline-block; font:600 0.82rem var(--font-mono); letter-spacing:.15em;
  color:var(--wood); background:var(--gold); padding:.1rem .5rem; margin-top:.25rem}
.planner-cols{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr) minmax(0,1fr); gap:1.5rem; margin-top:.8rem}
.planner-cols.cols-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.pcol>h3{font:700 1rem var(--font-display); letter-spacing:.12em; text-transform:uppercase; text-align:center; color:var(--ink); margin:0 0 .8rem}
.prow{display:flex; align-items:center; gap:.55rem; padding:.26rem 0; font-size:1.09rem; font-weight:500}
.prow img{width:30px; height:30px; flex:none; filter:drop-shadow(0 1px 2px rgba(43,34,20,.3))}
.prow label{flex:1; line-height:1.25}
.prow input{font:600 16px var(--font-mono); width:4.6rem; text-align:center; color:var(--ink);
  background:var(--parchment-3); border:1px solid var(--line); padding:.26rem .3rem}
.prow select{font:600 15px var(--font-mono); color:var(--ink); background:var(--parchment-3);
  border:1px solid var(--line); padding:.3rem 1.8rem .3rem .5rem; width:auto; max-width:100%;
  appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0L5 6L10 0Z' fill='%235E5238'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:10px 6px}
.prow select:focus{outline:2px solid var(--gold); outline-offset:1px}
.ptiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:.7rem}
.ptile{text-align:center; padding:.55rem .4rem; border:1px solid var(--line); background:var(--parchment-3)}
.ptile img{width:42px; height:42px; filter:drop-shadow(0 2px 3px rgba(43,34,20,.3))}
.ptile .plabel{font:600 0.82rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); display:block; margin:.3rem 0}
.ptile .pval{font:600 1rem var(--font-mono); background:#241709; color:var(--gold-bright); padding:.15rem .4rem; display:inline-block; min-width:3.2em; font-variant-numeric:tabular-nums}
.ptile .pflag{display:block; font:600 0.82rem var(--font-mono); margin-top:.3rem}
.ptile .pflag.up{color:var(--moss)}.ptile .pflag.down{color:var(--red)}
.psummary .prow{justify-content:space-between; border-bottom:1px dashed var(--line-soft); font-size:1.09rem}
.psummary .prow b{font:600 1.05rem var(--font-mono); font-variant-numeric:tabular-nums}
.psummary .good{color:var(--moss)}.psummary .bad{color:var(--red)}
.pnote{font:italic 400 0.98rem var(--font-body); color:var(--ink-2); text-align:center; margin:1.3rem 0 0}

/* quick tools = planner-styled plates */
.calc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1.3rem; margin:2rem 0}
.calc{border:2px solid var(--line); outline:1px solid rgba(201,162,91,.4); outline-offset:-5px;
  background:linear-gradient(178deg,var(--parchment-3),var(--parchment-2));
  padding:1.2rem 1.3rem; box-shadow:0 4px 12px rgba(43,34,20,.16)}
.calc h3{display:flex; align-items:center; gap:.6rem; margin:0 0 .9rem;
  font:700 1.15rem var(--font-display); letter-spacing:.06em; color:var(--ink);
  border-bottom:2px solid var(--line-soft); padding-bottom:.5rem}
.calc h3 img{width:30px; height:30px; filter:drop-shadow(0 2px 3px rgba(43,34,20,.3))}
.calc .prow{margin:.6rem 0; gap:.8rem}
.calc .prow label{flex:1; font:500 1.09rem var(--font-body); color:var(--ink-2)}
.calc input[type=number],.calc select{font:600 16px var(--font-mono); color:var(--ink);
  background:var(--parchment-3); border:1px solid var(--line); padding:.35rem .55rem; width:7.5rem; max-width:100%}
.calc .prow input[type=number],.calc .prow select{width:auto; flex:none}
.calc select{width:auto}
.calc .row{display:flex; gap:1.1rem; flex-wrap:wrap}
.calc-result{display:block; background:linear-gradient(#2E2010,#1C1207); border:1px solid var(--line);
  padding:.7rem .9rem; margin-top:.9rem}
.calc-result .r{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.32rem 0; border-bottom:1px solid rgba(230,198,135,.14); font:500 1.01rem var(--font-body)}
.calc-result .r:last-of-type{border-bottom:0}
.calc-result .r span{color:#D8C9A8; opacity:.85; flex:0 0 auto; white-space:nowrap}
.calc-result .r b{font:600 1.09rem var(--font-mono); color:var(--gold-bright); font-variant-numeric:tabular-nums;
  flex:1 1 auto; text-align:right}
.calc-result .note{font:italic 400 0.94rem/1.4 var(--font-body); color:#D8C9A8; opacity:.85; margin-top:.5rem}
.calc details{margin-top:.7rem; font-size:0.98rem; color:var(--ink-2)}
.calc details summary{cursor:pointer; font:600 0.82rem var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--red)}
.calc details p{margin:.5rem 0 0; font:400 1.09rem/1.55 var(--font-body); color:var(--wood);
  background:var(--gold); padding:.15rem .4rem; display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.calc details p b{font:600 1.09rem var(--font-mono); color:#5A1512; font-variant-numeric:tabular-nums}

/* ══ Bands / media ═══════════════════════════════════════ */
.band{position:relative; background-size:cover; background-position:center; padding:4.2rem 2rem;
  border-top:4px solid var(--wood-edge); border-bottom:4px solid var(--wood-edge); box-shadow:inset 0 0 0 2px var(--hairline)}
.band::before{content:""; position:absolute; inset:0; background:linear-gradient(rgba(14,8,3,.78),rgba(14,8,3,.86))}
.band>*{position:relative}
.band-inner{max-width:var(--w); margin:0 auto}
.band .eyebrow{color:var(--gold)}
.band h2{font:600 clamp(1.5rem,3vw,2.2rem) var(--font-display); color:#F2E8D2; margin:.6rem 0 .8rem; max-width:22em}
.band p{max-width:40em; font-style:italic; color:var(--dark-ink)}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .band.parallax,.hero.parallax{background-attachment:fixed}
}
.chapter-media{position:relative; margin:2.6rem 0 0; height:230px; background-size:cover; background-position:center;
  border:6px solid #3A2A12; outline:2px solid var(--wood-edge); box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.chapter-media::before{content:""; position:absolute; inset:0; background:linear-gradient(rgba(14,8,3,.25), rgba(14,8,3,.55))}
.chapter-media span{position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  font:600 0.83rem var(--font-mono); letter-spacing:.25em; text-transform:uppercase; color:#F2E8D2; text-shadow:0 2px 8px #000}

/* flow charts */
.flow-wrap{overflow:auto; border:7px solid #3A2A12; outline:2px solid var(--wood-edge);
  box-shadow:inset 0 0 0 1px var(--hairline-strong); background:#0E0C07; max-height:76vh; cursor:grab}
.flow-wrap.dragging{cursor:grabbing; user-select:none}
.flow-wrap img{display:block; min-width:900px; width:100%; height:auto}
.flow-wrap.zoomed{max-height:none}
.flow-wrap.zoomed img{width:auto; max-width:none}
.chain-strip{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.7rem 1rem; margin:.5rem 0;
  border:2px solid var(--line); outline:1px solid rgba(201,162,91,.35); outline-offset:-4px;
  background:linear-gradient(178deg,var(--parchment-3),var(--parchment-2))}
.chain-strip img{width:34px; height:34px}
.chain-strip .arrow{color:var(--red); font-family:var(--font-mono); font-weight:600}
.chain-strip b{font:700 1.05rem var(--font-display); color:var(--ink); margin-right:.3rem}
.chain-strip span{color:var(--ink-2); font-size:1.03rem}
.chain-strip .recipe-line{flex-basis:100%; display:flex; align-items:center; gap:.35rem;
  font:600 0.94rem var(--font-mono); color:var(--ink-3); margin-top:.4rem; padding-top:.4rem;
  border-top:1px dashed var(--line-soft)}
.chain-strip .recipe-line img{width:20px; height:20px}
.chain-strip.hide,.card.hide{display:none}

/* ══ Buttons, forms, misc ════════════════════════════════ */
.btn{display:inline-block; cursor:pointer; font:700 0.92rem var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-bright); background:linear-gradient(#3A2A12,#1C1207); border:2px solid var(--gold);
  padding:.75rem 1.5rem; box-shadow:0 4px 12px rgba(0,0,0,.35); transition:all .15s}
.btn:hover{color:var(--wood); background:var(--gold)}
.btn.ghost{border-color:var(--line); color:var(--ink); background:transparent; box-shadow:none}
.btn.ghost:hover{border-color:var(--gold); background:transparent; color:var(--red)}
.hero .btn.ghost,.band .btn.ghost{color:var(--dark-ink); border-color:var(--hairline-strong)}
.qa-form{display:flex; gap:.5rem; margin-top:1.5rem; max-width:460px}
.qa-form input{flex:1; font:italic 400 16px var(--font-body); padding:.65rem 1rem; color:var(--dark-ink);
  background:rgba(14,8,3,.65); border:1px solid var(--hairline-strong)}
.prose{max-width:68ch; margin:0 auto}
.prose h3{font:700 1.25rem var(--font-body); color:var(--ink); margin:2rem 0 .6rem}
.prose ul{padding-left:1.2rem}
.prose li{margin:.35rem 0; color:var(--ink-2)}
.prose a{text-decoration:underline}
.kbd{font:600 .82em var(--font-mono); background:rgba(43,34,20,.1); border:1px solid var(--line); padding:.05em .4em}
.seal{width:54px; height:54px; border-radius:50%; margin:2.2rem auto 0; position:relative;
  background:radial-gradient(circle at 35% 30%, #C45A46, #8A2E1E 60%, #6E2416);
  box-shadow:inset 0 3px 8px rgba(255,200,160,.35), inset 0 -4px 8px rgba(0,0,0,.4), 0 4px 10px rgba(43,34,20,.4)}
.seal::after{content:"§"; position:absolute; inset:0; display:grid; place-items:center;
  font:700 1.4rem var(--font-display); color:rgba(255,220,190,.75)}
.tbl-wrap{overflow-x:auto; border:2px solid var(--line); margin:1.6rem 0}
.tbl{width:100%; border-collapse:collapse; font-size:1.06rem}
.tbl th{font:600 0.82rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  text-align:left; background:#2E2010; padding:.65rem .9rem}
.tbl td{border-top:1px solid var(--line-soft); padding:.55rem .9rem; font-variant-numeric:tabular-nums}
#progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:80; background:var(--gold); box-shadow:0 0 8px rgba(201,162,91,.6)}

/* ══ Footer — carved base of the frame ═══════════════════ */
.site-foot{background:linear-gradient(180deg,#241709,#140C04); border-top:3px solid var(--wood-edge);
  box-shadow:0 -1px 0 var(--hairline); padding:3rem 2rem 2.2rem; font-size:0.98rem; color:var(--dark-dim)}
.site-foot .cols{max-width:var(--w); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.2rem}
.site-foot h4{font:600 0.82rem var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 .8rem}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.site-foot a{color:var(--dark-dim)}
.site-foot a:hover{color:var(--gold-bright)}
.foot-legal{display:flex!important; flex-direction:row; gap:1rem; margin-top:.8rem; font-size:0.94rem}
.foot-support{margin:1.1rem 0 0; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem}
.foot-support .btn.ghost{border-color:var(--hairline-strong); color:var(--gold-bright); background:transparent}
.foot-support .btn.ghost:hover{border-color:var(--gold); color:var(--wood); background:var(--gold)}
.foot-support span{font-size:0.9rem; color:var(--dark-dim); font-style:italic}
.disclaimer{max-width:44em; line-height:1.6; font-style:italic}
.foot-rule{max-width:var(--w); margin:2.2rem auto 0; padding-top:1.1rem; border-top:1px solid var(--hairline);
  font:600 0.82rem var(--font-mono); color:var(--dark-dim); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
#backtop{position:fixed; right:1.2rem; bottom:1.2rem; z-index:50; display:none; font:700 0.92rem var(--font-mono);
  background:linear-gradient(#3A2A12,#1C1207); color:var(--gold); border:2px solid var(--gold); padding:.55rem .75rem; cursor:pointer}
#backtop.show{display:block}

/* ══ Reveal / appbar / responsive ════════════════════════ */
html.js .rv{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease}
html.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ html.js .rv{opacity:1; transform:none; transition:none} }
.appbar{display:none}
@media (max-width:860px){
  .appbar{position:fixed; bottom:0; left:0; right:0; z-index:70; display:flex;
    background:linear-gradient(180deg,#2E2010,#140C04); border-top:2px solid var(--gold);
    padding:.35rem 0 calc(.35rem + env(safe-area-inset-bottom))}
  .appbar a{flex:1; text-align:center; font:600 .7rem var(--font-mono); letter-spacing:.05em;
    text-transform:uppercase; color:var(--dark-dim); padding:.25rem 0}
  .appbar a img{display:block; width:28px; height:28px; margin:0 auto .2rem; filter:grayscale(.4) opacity(.75)}
  .appbar a[aria-current], .appbar a:hover{color:var(--gold-bright)}
  .appbar a[aria-current] img{filter:none}
  body{padding-bottom:64px}
  .toolbar,.subbar{top:0}
  .site-head{position:static}
  #backtop{bottom:76px}
  .scroll{border-left-width:6px; border-right-width:6px}
  .hero-grid{grid-template-columns:1fr; padding:3rem 1.2rem 2.4rem}
  .split,.split.rev{grid-template-columns:1fr; gap:1.6rem}
  .site-foot .cols{grid-template-columns:1fr; gap:1.8rem}
  .site-head .row{gap:.8rem; flex-wrap:wrap; padding:.5rem 1rem}
  .site-nav{margin-left:0}
  /* the enlarged header can't fit at phone widths — scale it back so it stays
     bigger than the original but never forces horizontal scroll */
  .brand{white-space:normal}
  .brand svg{width:48px; height:70px}
  .brand .bt{font-size:1.15rem}
  .brand small{font-size:.62rem; letter-spacing:.18em}
  .site-nav a{font-size:.88rem; padding:.45rem .55rem; gap:.4rem}
  .site-nav a img{width:20px; height:20px}
  .appbar a{font-size:.72rem}
  .appbar a img{width:32px; height:32px}
  .wrap,.ledger{padding-left:1.2rem; padding-right:1.2rem}
  .planner-cols,.planner-cols.cols-1-2{grid-template-columns:1fr}
  .planner{padding-top:3.4rem}
  .planner-title{white-space:normal; width:88%}
  .bcard{grid-template-columns:1fr}
  .bcard .photo{min-height:150px}
  .tip-grid{grid-template-columns:1fr}
  .section{padding:2.6rem 0 2.4rem}
}
@media print{
  .site-head,.site-foot,.band,#backtop,.toolbar,.subbar,.hero,.appbar{display:none!important}
  body,.scroll{background:#fff; border:0; box-shadow:none}
}

/* ── The crest ─────────────────────────────────────────── */
.brand svg{width:46px; height:68px}
/* quick-answers band (dark wood, decorated plates) */
.answers{padding:2.6rem 1.5rem 3rem; border-bottom:4px solid var(--wood-edge);
  background:radial-gradient(ellipse 70% 80% at 50% 40%, rgba(201,162,91,.1), transparent 70%)}
.answers-inner{max-width:var(--w); margin:0 auto; text-align:center}
.ornament{width:136px; margin:0 auto .7rem; opacity:.95; filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.ornament svg{display:block; width:100%; height:auto}
.answers .eyebrow{color:var(--gold)}
.answers h2{font:600 clamp(1.5rem,3vw,2.1rem) var(--font-display); color:#F2E8D2; margin:.4rem 0 1.6rem}
.qgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1rem; text-align:left}
.qcard{display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; gap:.15rem .8rem;
  padding:1rem 1.15rem; color:var(--dark-ink);
  background:linear-gradient(165deg,#2E2010,#1C1207); border:2px solid var(--wood-edge);
  outline:1px solid var(--hairline); outline-offset:-5px; box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .16s, outline-color .16s}
.qcard:hover{transform:translateY(-3px); outline-color:var(--gold); color:var(--dark-ink)}
.qcard img{grid-row:span 2; align-self:center; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.qcard b{font:700 1.02rem/1.3 var(--font-display); letter-spacing:.03em; color:var(--gold-bright)}
.qcard span{font-size:1.01rem; line-height:1.5; color:var(--dark-dim)}

/* ── UI components (see .claude/skills/ui-components) ──── */
.tabs{display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 1.2rem}
.tab{font:600 0.9rem var(--font-mono); background:rgba(43,34,20,.08); color:var(--ink-2);
  border:1px solid var(--line); padding:.5rem .95rem; cursor:pointer}
.tab:hover{color:var(--red); border-color:var(--gold)}
.tab.active{background:linear-gradient(#2E2010,#1C1207); color:var(--gold-bright); border-color:var(--wood-edge)}
[data-tabs] > [data-tab][hidden]{display:none}

.lb-open{display:inline-block; margin:.7rem 0 0; cursor:pointer;
  font:700 0.83rem var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-bright); background:linear-gradient(#3A2A12,#1C1207);
  border:2px solid var(--gold); padding:.5rem 1rem}
.lb-open:hover{background:var(--gold); color:var(--wood)}
dialog.lightbox{width:96vw; max-width:96vw; height:94vh; max-height:94vh; padding:0; border:0; background:transparent}
dialog.lightbox::backdrop{background:rgba(14,8,3,.93)}
dialog.lightbox figure{margin:0; height:100%; overflow:auto; background:#0E0C07;
  border:8px solid #3A2A12; outline:2px solid var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.7)}
dialog.lightbox img{display:block; max-width:none; width:auto; min-width:100%; height:auto}
dialog.lightbox figcaption{position:fixed; left:50%; bottom:2.2rem; transform:translateX(-50%);
  font:600 0.92rem var(--font-mono); color:var(--dark-ink); background:rgba(14,8,3,.85);
  border:1px solid var(--hairline); padding:.4rem .9rem; max-width:80vw}
.lb-close{position:fixed; top:1.2rem; right:1.4rem; cursor:pointer; font:700 1rem var(--font-mono);
  color:var(--gold-bright); background:linear-gradient(#3A2A12,#1C1207); border:2px solid var(--gold);
  width:44px; height:44px; line-height:1}
.lb-close:hover{background:var(--gold); color:var(--wood)}
.lb-hint{position:fixed; top:1.5rem; left:1.5rem; margin:0; font:600 0.82rem var(--font-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--dark-dim)}
.chips a.chip[aria-current]{background:var(--gold); color:var(--wood); border-color:var(--gold-bright)}
@media (max-width:600px){ .lb-hint{display:none} }

/* nav icons */
.site-nav a{display:inline-flex; align-items:center; gap:.4rem}
.site-nav a img{width:20px; height:20px; filter:grayscale(.55) opacity(.7); transition:filter .15s}
.site-nav a:hover img,.site-nav a[aria-current] img{filter:none}
@media (max-width:1180px) and (min-width:861px){ .site-nav a{padding:.45rem .5rem; font-size:.86rem} .site-nav a img{width:18px;height:18px} }

/* ── Tip boxes v2: text left, illustration right (ref: /ultimate design/tip boxes.jpeg) ── */
.tip{display:grid; grid-template-columns:1fr 136px; gap:.9rem; align-items:stretch; padding:.9rem .3rem .9rem 1.05rem; overflow:hidden}
.tip .txt{min-width:0; display:flex; flex-direction:column; gap:.3rem; padding:.1rem 0}
.tip .n{font:700 1.09rem var(--font-mono); color:var(--ink-3); font-variant-numeric:tabular-nums}
.tip .art{position:relative; align-self:stretch; display:grid; place-items:center;
  margin:-.9rem -.3rem -.9rem 0; background:radial-gradient(ellipse at 60% 50%, rgba(201,162,91,.16), transparent 70%)}
.tip .art img{max-width:108px; max-height:108px; width:auto; height:auto;
  filter:drop-shadow(0 3px 6px rgba(43,34,20,.45))}
.tip .art.photo{background:none}
.tip .art.photo img{max-width:none; width:100%; height:auto; max-height:100%; object-fit:contain;
  border:1px solid rgba(43,34,20,.32); outline:1px solid rgba(201,162,91,.4); outline-offset:-3px;
  box-shadow:0 2px 6px rgba(43,34,20,.28)}
@media (max-width:520px){ .tip{grid-template-columns:1fr 96px} .tip .art img{max-width:66px;max-height:66px} }

/* ── Process flow v2 (ref: /ultimate design/example process flow.jpeg) ── */
.flow{margin:1.3rem 0 .4rem; padding:1rem 1.1rem 1.2rem;
  border:2px solid var(--line); outline:1px solid rgba(201,162,91,.4); outline-offset:-5px;
  background:linear-gradient(178deg,var(--parchment-3),var(--parchment-2)); box-shadow:0 3px 10px rgba(43,34,20,.14)}
.flow figcaption{display:flex; align-items:center; gap:.55rem; margin-bottom:.9rem;
  font:600 0.85rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--red)}
.fsteps{list-style:none; margin:0; padding:0 0 .3rem; display:flex; align-items:flex-start;
  gap:.2rem; overflow-x:auto; scrollbar-width:thin}
.fstep{flex:0 0 auto; width:104px; text-align:center; position:relative; padding-top:.2rem}
.fstep + .fstep::before{content:""; position:absolute; left:-14px; top:52px; width:26px; height:12px;
  background:var(--gold);
  clip-path:polygon(0 35%, 62% 35%, 62% 0, 100% 50%, 62% 100%, 62% 65%, 0 65%)}
.fnum{display:block; font:700 0.82rem var(--font-mono); letter-spacing:.1em; color:var(--ink-3)}
.fstep img{width:64px; height:64px; object-fit:contain; margin:.25rem auto;
  filter:drop-shadow(0 3px 6px rgba(43,34,20,.4))}
.flabel{display:block; font:700 0.9rem/1.25 var(--font-display); letter-spacing:.03em; color:var(--ink)}

/* ── Collapsible chapters ── */
.chapter{margin:0}
.chapter > summary.sec-h{cursor:pointer; list-style:none; user-select:none}
.chapter > summary.sec-h::-webkit-details-marker{display:none}
.chapter > summary.sec-h::after{content:"\2212"; font:700 1.1rem var(--font-mono); color:var(--gold); margin-left:.7rem}
.chapter:not([open]) > summary.sec-h::after{content:"\002B"}
.chapter > summary.sec-h:hover{outline-color:var(--gold)}
.kn-block > summary.sec-h{margin-top:.2rem}
.kn-note{font:italic 400 1.01rem var(--font-body); color:var(--ink-2); margin:.9rem 0 0}
.tip .art.faint img{opacity:.42; filter:grayscale(.25) drop-shadow(0 2px 4px rgba(43,34,20,.3))}

/* ── Tips index rail ───────────────────────────────────── */
.tips-layout{display:grid; grid-template-columns:262px minmax(0,1fr); gap:0; max-width:var(--w); margin:0 auto}
.tips-layout > .ledger{max-width:none; margin:0; padding-left:1.6rem}
.rail{border-right:2px solid var(--line); padding:1.4rem 0 2rem}
.rail-inner{position:sticky; top:132px; padding-right:1.2rem}
.rail-h{font:600 1rem var(--font-display); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .8rem; padding-bottom:.5rem; border-bottom:2px solid var(--line)}
.rail-list{list-style:none; margin:0; padding:0; display:grid; gap:1px}
.rail-link{display:flex; align-items:center; gap:.55rem; padding:.42rem .55rem; cursor:pointer;
  color:var(--ink); border:1px solid transparent; font-size:1.06rem; line-height:1.25}
.rail-link:hover{background:rgba(43,34,20,.07); border-color:var(--line); color:var(--ink)}
.rail-link img{width:26px; height:26px; flex:none; filter:drop-shadow(0 1px 2px rgba(43,34,20,.3))}
.rl-name{flex:1; min-width:0}
.rl-count{font:600 0.9rem var(--font-mono); color:var(--ink-3); font-variant-numeric:tabular-nums;
  background:rgba(43,34,20,.08); border:1px solid var(--line); padding:.05rem .4rem}
.rail-link.active{background:linear-gradient(#33220F,#1C1207); border-color:var(--wood-edge); color:var(--gold-bright)}
.rail-link.active .rl-count{color:var(--gold-bright); background:rgba(201,162,91,.18); border-color:var(--hairline-strong)}
.rail-link.empty{opacity:.38}
.rail-all{font-weight:700; margin-bottom:.5rem; border-color:var(--line)}
.rail-note{font:italic 400 0.92rem/1.5 var(--font-body); color:var(--ink-2); margin:1rem 0 0}
@media (max-width:1000px){
  .tips-layout{grid-template-columns:1fr}
  .rail{display:none}
  .tips-layout > .ledger{padding-left:2rem}
}
@media (min-width:1001px){ .toolbar .chips{display:none} }