/* Garden Bar Guide — "the local at the end of the garden".
   Pub green, brass, cream paper and a chalkboard accent. System fonts only. */
:root {
  --green: #123d32; --green-deep: #0b2923; --green-mid: #1b4a3b; --green-soft: #dce8df;
  --cream: #f4ebdd; --paper: #fffaf0; --brass: #c9973b; --brass-light: #e3bd6b; --brass-dark: #8a6524;
  --terracotta: #a8492d; --chalk: #ecebe2; --board: #1f2b27;
  --ink: #1f2925; --muted: #55605b; --line: #ddd1bd;
  --shadow: 0 18px 50px rgba(11,41,35,.14); --shadow-sm: 0 6px 18px rgba(11,41,35,.08);
  --display: 'Palatino Linotype', Palatino, 'Book Antiqua', 'Iowan Old Style', Georgia, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 18px/1.65 var(--sans); }
a { color: var(--green); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 3px; }
img, svg { max-width: 100%; height: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 60; padding: .7rem 1rem; background: var(--paper); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.wrap { width: min(1200px, calc(100% - 2.5rem)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 2.5rem)); margin-inline: auto; }

/* Type */
h1, h2, h3 { font-family: var(--display); line-height: 1.08; color: var(--green-deep); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); letter-spacing: -.025em; margin: .1em 0 .3em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -.015em; margin: 1.6em 0 .45em; }
h3 { font-size: 1.35rem; margin: 1.4em 0 .35em; }
p { text-wrap: pretty; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: var(--brass-dark); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 800; }
.eyebrow::before { content: ''; width: 1.6rem; height: 2px; background: currentColor; }
.dark .eyebrow, .hero .eyebrow, .article-hero .eyebrow, .tool-shell .eyebrow, .chalkboard .eyebrow { color: var(--brass-light); }
.mini-label { font-size: .7rem; color: var(--terracotta); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }

/* Header: a pub fascia */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--green-deep); color: var(--paper); border-bottom: 4px double var(--brass); }
.masthead { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; gap: .7rem; align-items: center; color: var(--paper); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }
.brand small { display: block; font: 600 .62rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-light); margin-top: .25rem; }
.brand-sign { width: 46px; height: 40px; overflow: visible; }
.brand-bracket, .brand-chain { fill: none; stroke: var(--brass); stroke-width: 2.5; stroke-linecap: round; }
.brand-board { transform-origin: 27px 4px; transform-box: view-box; }
.brand-plate { fill: var(--green); stroke: var(--brass); stroke-width: 2.5; }
.brand-inner { fill: none; stroke: var(--brass); stroke-width: 1; opacity: .6; }
.brand-house { fill: var(--brass); }
.brand-door { fill: var(--green-deep); }
.site-footer .brand-plate { fill: var(--green-deep); }
.nav { display: flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 650; }
.nav a { color: var(--paper); text-decoration: none; padding: .5rem .7rem; border-radius: 999px; }
.nav a:hover, .nav a[aria-current] { background: rgba(227,189,107,.14); color: var(--brass-light); }
.nav .nav-tool { margin-left: .5rem; background: var(--brass); color: var(--green-deep); padding-inline: 1rem; }
.nav .nav-tool:hover { background: var(--brass-light); color: var(--green-deep); }
.nav-toggle { display: none; color: var(--paper); background: transparent; border: 1px solid var(--brass); border-radius: 999px; padding: .5rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--brass-light); transform-origin: 0 50%; transform: scaleX(0); z-index: 50; animation: read linear both; animation-timeline: scroll(root); }
@keyframes read { to { transform: scaleX(1); } }
@supports not (animation-timeline: scroll()) { .read-progress { display: none; } }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border: 2px solid var(--brass); border-radius: 999px; padding: .6rem 1.35rem; background: var(--brass); color: var(--green-deep); text-decoration: none; font: 800 .95rem/1.1 var(--sans); cursor: pointer; transition: background .15s, transform .15s; }
.button:hover { background: var(--brass-light); transform: translateY(-1px); }
.button.secondary { background: transparent; color: var(--paper); }
.button.secondary:hover { background: rgba(255,255,255,.08); }
.button.ink { background: var(--green); border-color: var(--green); color: var(--paper); }
.text-button { min-height: 44px; background: transparent; border: 0; color: inherit; text-decoration: underline; text-underline-offset: .2em; font: inherit; font-size: .9rem; cursor: pointer; padding: 0 .3rem; }

/* Hero */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, #1d5241 0%, var(--green) 45%, var(--green-deep) 100%); color: var(--paper); padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { color: var(--paper); }
.hero h1 em { font-style: italic; color: var(--brass-light); }
.hero-copy { max-width: 36rem; font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: #dfe9e3; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: #c3d6cd; }
.hero-proof li::before { content: '✓'; color: var(--brass-light); margin-right: .45rem; font-weight: 800; }
.hero-scene { display: block; width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.hero-scene .stars circle { fill: #f5ecd2; }
.hero-scene .bulb line { stroke: #0a1a16; stroke-width: 1.5; }
.hero-scene .bulb-glass { fill: #ffe3a1; }
.hero-scene .bulb-glow { fill: #ffcf73; opacity: .32; }
.hero-scene.is-dark .bulb-glow { opacity: 0; }
.hero-scene .pub-sign-board { transform-origin: 508px 238px; transform-box: view-box; }

/* Sections */
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section.paper { background: var(--paper); }
.section.dark { background: var(--green-deep); color: var(--cream); }
.section.dark h2, .section.dark h3 { color: var(--paper); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.4rem; }
.section-head h2 { margin: .3rem 0 0; max-width: 46rem; }
.section-head p { max-width: 26rem; margin: 0; color: var(--muted); }
.section.dark .section-head p { color: #bfd1c8; }
.rule { display: flex; align-items: center; gap: 1rem; color: var(--brass); margin: 0 auto; max-width: 260px; }
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: currentColor; }

/* Beer-mat routes */
.mats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.mat { --tilt: -3deg; position: relative; display: grid; place-content: center; text-align: center; aspect-ratio: 1; border-radius: 50%; padding: 14%; background: var(--paper); color: var(--ink); text-decoration: none; border: 2px solid var(--green); box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 9px var(--brass), var(--shadow-sm); transform: rotate(var(--tilt)); transition: transform .25s ease, box-shadow .25s ease; }
.mat:nth-child(2) { --tilt: 2.5deg; background: var(--green); color: var(--paper); box-shadow: inset 0 0 0 7px var(--green), inset 0 0 0 9px var(--brass), var(--shadow-sm); }
.mat:nth-child(3) { --tilt: -1.5deg; background: #f6e3c8; }
.mat:nth-child(4) { --tilt: 3.5deg; background: var(--terracotta); color: var(--paper); border-color: var(--terracotta); box-shadow: inset 0 0 0 7px var(--terracotta), inset 0 0 0 9px var(--brass-light), var(--shadow-sm); }
.mat:hover, .mat:focus-visible { transform: rotate(0) translateY(-6px) scale(1.03); box-shadow: inset 0 0 0 7px currentColor, inset 0 0 0 9px var(--brass), var(--shadow); }
.mat:nth-child(1):hover, .mat:nth-child(3):hover { box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 9px var(--brass), var(--shadow); }
.mat h3 { margin: .3rem 0; font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: inherit; }
.mat p { margin: 0; font-size: .85rem; line-height: 1.45; opacity: .85; }
.mat .mini-label { color: inherit; opacity: .8; }
.mat:nth-child(2) .mini-label, .mat:nth-child(4) .mini-label { color: var(--brass-light); opacity: 1; }
.mat .arrow { margin-top: .6rem; font-weight: 800; font-size: .85rem; }

/* Chalkboard menu of tools */
.chalkboard { position: relative; color: var(--chalk); background: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.06), transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(255,255,255,.04), transparent 50%), var(--board); border: 14px solid #5a3d26; border-radius: 4px; box-shadow: inset 0 0 0 2px #3d2918, inset 0 0 60px rgba(0,0,0,.45), var(--shadow); padding: clamp(1.5rem, 4vw, 3.2rem); }
.chalkboard h2, .chalkboard h3 { color: var(--chalk); }
.chalkboard h2 { margin-top: .4rem; font-style: italic; font-weight: 600; }
.chalkboard-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; border-bottom: 1px dashed rgba(236,235,226,.35); padding-bottom: 1.2rem; margin-bottom: 1rem; }
.chalkboard-head p { max-width: 24rem; margin: 0; color: #c9cec6; }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.menu-list a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .7rem; padding: 1rem 0; color: var(--chalk); text-decoration: none; border-bottom: 1px dashed rgba(236,235,226,.18); }
.menu-list a:hover strong { color: var(--brass-light); }
.menu-list strong { font: italic 600 1.3rem var(--display); }
.menu-list .dots { border-bottom: 2px dotted rgba(236,235,226,.4); transform: translateY(-.35rem); }
.menu-list .menu-tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-light); font-weight: 800; }
.menu-list small { grid-column: 1 / -1; color: #b9c0b8; font-size: .88rem; margin-top: -.2rem; }

/* Receipt teaser */
.tool-teaser { display: grid; grid-template-columns: 1fr 1fr; background: var(--green); color: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tool-teaser-copy { padding: clamp(2rem, 5vw, 4rem); }
.tool-teaser h2 { color: var(--paper); margin-top: .4rem; }
.tool-teaser p { color: #d5e2db; }
.receipt { position: relative; background: var(--paper); color: var(--ink); margin: 2rem 2rem 0; padding: 2rem 2rem 3rem; transform: rotate(1.2deg); box-shadow: 8px 10px 0 rgba(0,0,0,.18); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .9rem; align-self: end; }
.receipt::after, .receipt-paper::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(-45deg, transparent 8px, var(--paper) 0) 0 0 / 16px 12px, linear-gradient(45deg, transparent 8px, var(--paper) 0) 0 0 / 16px 12px; }
.receipt h3 { font-family: var(--display); border-bottom: 2px dashed var(--line); padding-bottom: 1rem; margin: .3rem 0 .4rem; }
.receipt-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dotted var(--line); }

/* Answers */
.answer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.answer { background: var(--cream); padding: 1.6rem; border-radius: var(--radius); border-top: 4px solid var(--brass); }
.answer h3 { margin-top: 0; }
.answer p { font-size: .95rem; color: var(--muted); }

/* Cards */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.guide-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; overflow: hidden; }
.guide-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--green); }
.guide-card[data-pillar="Rules"]::before { background: var(--terracotta); }
.guide-card[data-pillar="Fit out"]::before, .guide-card[data-pillar="Compare"]::before { background: var(--brass); }
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brass); }
.guide-card h3 { margin: .5rem 0 .4rem; font-size: 1.25rem; }
.guide-card p { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; }
.guide-card .card-top { display: flex; align-items: center; justify-content: space-between; }
.guide-card .pillar-icon { width: 30px; height: 30px; }
.guide-card .arrow { margin-top: auto; font-weight: 800; color: var(--green); font-size: .88rem; }
.guide-card.is-tool { background: var(--green); color: var(--paper); border-color: var(--green); }
.guide-card.is-tool h3, .guide-card.is-tool .arrow { color: var(--paper); }
.guide-card.is-tool p { color: #cfdcd5; }
.guide-card.is-tool .mini-label { color: var(--brass-light); }
.guide-card.is-tool .pillar-icon { stroke: var(--brass-light); }
.guide-meta { display: flex; gap: .8rem; color: var(--muted); font-size: .75rem; margin-bottom: .8rem; }
.pillar-icon { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Library */
.library-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.6rem; }
.search-box { position: relative; flex: 1 1 320px; }
.search-box input { width: 100%; min-height: 54px; padding: .8rem 1rem .8rem 3rem; border-radius: 999px; border: 2px solid rgba(227,189,107,.5); background: rgba(255,255,255,.06); color: var(--paper); font: inherit; }
.search-box input::placeholder { color: #a8bdb3; }
.search-box svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 20px; stroke: var(--brass-light); fill: none; stroke-width: 2.5; }
.shelf-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.shelf-chips button { min-height: 40px; border: 1px solid rgba(227,189,107,.45); background: transparent; color: var(--cream); border-radius: 999px; padding: .3rem .9rem; font: 600 .82rem var(--sans); cursor: pointer; }
.shelf-chips button[aria-pressed="true"] { background: var(--brass); color: var(--green-deep); border-color: var(--brass); }
.library-count { font-size: .8rem; color: #a8bdb3; margin-left: auto; }
.knowledge-list { columns: 3 260px; column-gap: 3rem; list-style: none; padding: 0; margin: 0; }
.knowledge-list li { break-inside: avoid; border-bottom: 1px solid rgba(255,255,255,.1); }
.knowledge-list a { display: flex; gap: .7rem; align-items: baseline; padding: .6rem 0; color: var(--cream); text-decoration: none; font-size: .95rem; }
.knowledge-list a:hover { color: var(--brass-light); }
.knowledge-list .shelf { flex: none; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-light); width: 4.6rem; font-weight: 800; }

/* Footer */
.site-footer { background: var(--green-deep); color: #d2ded8; padding: 4rem 0 2rem; border-top: 4px double var(--brass); }
.site-footer a { color: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.footer-grid strong { color: var(--brass-light); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-grid ul { list-style: none; padding: 0; margin: .8rem 0 0; font-size: .92rem; }
.footer-grid li { margin: .45rem 0; }
.footer-bottom { border-top: 1px solid #2c5248; margin-top: 2.5rem; padding-top: 1.4rem; font-size: .78rem; }

/* Hubs and article heroes */
.article-hero { position: relative; background: var(--green); color: var(--paper); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow: hidden; }
.article-hero h1 { color: var(--paper); font-size: clamp(2.3rem, 5vw, 4.2rem); max-width: 22ch; }
.article-hero .hero-grid { grid-template-columns: 1.3fr .7fr; }
.article-hero.has-art .hero-grid { grid-template-columns: 1.1fr .9fr; }
.article-deck { max-width: 44rem; font-size: 1.15rem; color: #dbe7e1; }
.byline { font-size: .82rem; color: #bcd0c6; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.byline span + span::before { content: '·'; margin-right: 1rem; color: var(--brass-light); }
.breadcrumbs { font-size: .78rem; margin-bottom: 1.2rem; color: #bcd0c6; }
.breadcrumbs a { color: var(--cream); }
.hero-art { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,.3); border: 3px solid var(--brass); aspect-ratio: 3 / 2; background: var(--green-mid); }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-emblem { justify-self: end; width: clamp(120px, 16vw, 190px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--brass); box-shadow: inset 0 0 0 8px var(--green), inset 0 0 0 10px rgba(227,189,107,.5); }
.hero-emblem .pillar-icon { width: 46%; stroke: var(--brass-light); stroke-width: 1.8; }
.hub-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: start; margin-bottom: 3rem; }
.hub-intro p { font-size: 1.1rem; }
.start-here { background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--brass); padding: 1.4rem; border-radius: var(--radius); }
.start-here ol { margin: .6rem 0 0; padding-left: 1.2rem; }
.start-here li { margin: .45rem 0; }

/* Articles */
.article-layout { display: grid; grid-template-columns: minmax(0, 740px) 270px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding: clamp(2.5rem, 5vw, 4rem) 0 6rem; }
.prose { min-width: 0; }
.prose p, .prose li { max-width: 70ch; }
.prose > p:first-of-type { font-size: 1.22rem; color: var(--green-deep); }
.prose h2 { padding-top: .8rem; border-top: 1px solid var(--line); }
.prose h2:first-child { border-top: 0; }
.prose li { margin: .35rem 0; }
.prose li::marker { color: var(--brass-dark); }
.prose blockquote { margin: 2rem 0; padding: 1.3rem 1.6rem; border-left: 5px solid var(--brass); background: var(--paper); font: italic 1.2rem/1.5 var(--display); color: var(--green-deep); border-radius: 0 var(--radius) var(--radius) 0; }
.prose blockquote p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.5rem 0; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; border-bottom: 1px solid var(--line); padding: .75rem .9rem; vertical-align: top; }
.prose thead th { background: var(--green); color: var(--paper); font-weight: 700; }
.prose tbody tr:nth-child(even) { background: #fbf4e7; }
.toc { position: sticky; top: 96px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; font-size: .85rem; box-shadow: var(--shadow-sm); }
.toc strong { display: block; margin-bottom: .6rem; font-family: var(--display); font-size: 1.05rem; color: var(--green-deep); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin: .45rem 0; }
.toc li::marker { color: var(--brass-dark); font-weight: 700; }
.toc a { text-decoration: none; color: var(--ink); }
.toc a:hover { color: var(--green); text-decoration: underline; }
.toc-tool { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.toc-tool a { display: block; padding: .7rem .8rem; background: var(--green); color: var(--paper); border-radius: var(--radius); text-decoration: none; font-weight: 700; font-size: .85rem; }
.toc-tool a:hover { background: var(--green-mid); color: var(--paper); text-decoration: none; }
.toc-tool span { display: block; font-weight: 400; font-size: .75rem; color: #c5d6ce; }
.callout { border: 1px solid #d8bd7a; background: #fff6dc; padding: 1rem 1.25rem; margin: 2rem 0; border-radius: var(--radius); }
.notice { background: var(--green-soft); padding: 1rem 1.2rem; border-left: 4px solid var(--green); font-size: .95rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0; }
.verdict { margin: 2.2rem 0; padding: 1.6rem; background: var(--green-deep); color: var(--cream); border-radius: var(--radius); border: 2px solid var(--brass); }
.verdict strong { display: block; color: var(--brass-light); font-family: var(--display); font-size: 1.2rem; margin-top: .6rem; }
.verdict strong:first-child { margin-top: 0; }
.verdict a { color: var(--paper); }
.source-box { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--green); font-size: .86rem; }
.source-box h2 { font-size: 1.6rem; border: 0; }
.source-box li { margin: .5rem 0; overflow-wrap: anywhere; }
.faq-box details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin: .6rem 0; }
.faq-box summary { cursor: pointer; padding: 1rem 1.2rem; font: 700 1.05rem/1.35 var(--display); color: var(--green-deep); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-box summary::-webkit-details-marker { display: none; }
.faq-box summary::after { content: '+'; color: var(--brass-dark); font: 400 1.5rem/1 var(--sans); }
.faq-box details[open] summary::after { content: '−'; }
.faq-box details > div { padding: 0 1.2rem 1rem; font-size: .95rem; }
.related-box .guide-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related-box .guide-card { padding: 1.1rem; }
.related-box .guide-card h3 { font-size: 1.05rem; }
.related-box .guide-card p { display: none; }
.last-orders { margin-top: 3rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; background: var(--paper); border: 1px dashed var(--brass); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.last-orders .pillar-icon { width: 40px; }
.last-orders p { margin: 0; font-size: .95rem; }
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; counter-reset: stage; margin: 2.5rem 0; }
.journey div { counter-increment: stage; border-top: 4px solid var(--brass); padding: 1rem; background: var(--paper); font-size: .82rem; }
.journey div::before { content: counter(stage); display: grid; place-items: center; width: 28px; height: 28px; background: var(--green); color: white; border-radius: 50%; font-weight: 800; margin-bottom: .5rem; }
.infographic { margin: 2.5rem 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-sm); }
.infographic svg { display: block; width: 100%; font-family: var(--sans); }
.infographic figcaption { font-size: .82rem; color: var(--muted); padding: .6rem .4rem 0; }

/* ---------- Tools ---------- */
.tool-shell { position: relative; margin: 2.5rem 0 3rem; background: var(--green-deep); color: var(--paper); border-radius: 10px; padding: clamp(1.2rem, 3vw, 2.2rem); box-shadow: var(--shadow); border: 1px solid #285446; }
.tool-shell h2 { color: var(--paper); margin: .4rem 0 .5rem; border: 0; padding: 0; }
.tool-intro { max-width: 40rem; margin-bottom: 1.5rem; }
.tool-intro p { color: #cfdcd5; font-size: 1rem; margin: 0; }
.tool-note { font-size: .8rem; color: #a9beb4; margin: 1rem 0 0; }
.tool-shell fieldset { border: 0; padding: 0; margin: 0 0 1.3rem; min-width: 0; }
.tool-shell legend { font-weight: 750; font-size: .92rem; margin-bottom: .6rem; padding: 0; }
.tool-shell legend small, .q-hint { font-weight: 400; color: #a9beb4; font-size: .78rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-choice { position: relative; display: inline-flex; cursor: pointer; }
.chip-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-choice > span { display: flex; flex-direction: column; min-height: 42px; justify-content: center; padding: .45rem .95rem; border: 1.5px solid rgba(227,189,107,.45); border-radius: 999px; font-size: .88rem; transition: background .15s, border-color .15s; }
.chip-choice small { font-size: .72rem; color: #a9beb4; font-weight: 400; }
.chip-choice input:checked + span { background: var(--brass); border-color: var(--brass); color: var(--green-deep); }
.chip-choice input:checked + span small { color: #3d3418; }
.chip-choice input:focus-visible + span { outline: 3px solid var(--brass-light); outline-offset: 2px; }
.chip-choice:hover > span { border-color: var(--brass-light); }
.route-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.route-picker legend { grid-column: 1 / -1; }
.route-picker .chip-choice > span { border-radius: 10px; padding: 1rem 1.1rem; width: 100%; min-height: 84px; align-items: flex-start; }
.route-picker .chip-choice > span strong { font: 700 1.15rem var(--display); }
.route-picker.small .chip-choice > span { min-height: 64px; padding: .8rem 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .82rem; font-weight: 700; }
.field small { color: #a9beb4; font-size: .74rem; }
.field input, .field select { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 2px solid transparent; border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; }
.field input:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px rgba(201,151,59,.35); }
.unit-input { display: flex; align-items: stretch; background: var(--paper); border-radius: 6px; overflow: hidden; }
.unit-input input { border-radius: 0; flex: 1; min-width: 0; }
.unit-input > span { display: grid; place-items: center; padding: 0 .8rem; background: #efe4cf; color: var(--muted); font-size: .85rem; font-weight: 700; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
.tool-actions { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-top: 1rem; }

/* Budget: tab lines and receipt */
.tab-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.6rem; align-items: start; }
.tab-line { display: grid; grid-template-columns: 1fr 9.5rem auto; gap: .4rem 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.tab-line-label label { display: block; font-weight: 700; font-size: .95rem; }
.tab-line-label small { color: #a9beb4; font-size: .76rem; }
.money { display: flex; align-items: center; background: var(--paper); border-radius: 6px; padding-left: .7rem; color: var(--muted); font-weight: 700; }
.money input { width: 100%; min-height: 44px; border: 0; background: transparent; font: inherit; color: var(--ink); padding: .4rem .5rem; }
.money:focus-within { box-shadow: 0 0 0 3px var(--brass); }
.skip { display: inline-flex; gap: .4rem; align-items: center; font-size: .78rem; color: #c5d6ce; cursor: pointer; white-space: nowrap; }
.skip input { width: 18px; height: 18px; accent-color: var(--brass); }
.tab-line.is-skipped .money { opacity: .35; }
.tab-line.is-skipped label:first-child { text-decoration: line-through; text-decoration-color: var(--brass); }
.buffer-picker { margin-top: 1.4rem !important; }
.receipt-paper { position: sticky; top: 96px; background: var(--paper); color: var(--ink); padding: 1.5rem 1.4rem 2rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .86rem; box-shadow: 6px 8px 0 rgba(0,0,0,.25); margin-bottom: 14px; }
.receipt-head { text-align: center; border-bottom: 2px dashed var(--line); padding-bottom: .9rem; margin-bottom: .6rem; }
.receipt-head strong { display: block; font: 700 1.35rem var(--display); color: var(--green-deep); margin: .2rem 0; }
.receipt-date { font-size: .72rem; color: var(--muted); }
.breakdown { list-style: none; padding: 0; margin: 0 0 .6rem; }
.breakdown li { display: flex; align-items: baseline; gap: .4rem; padding: .32rem 0; }
.breakdown li i { flex: 1; border-bottom: 1px dotted #b8ab93; transform: translateY(-.25rem); }
.breakdown li.is-skip { color: var(--muted); }
.breakdown li.is-skip strong { font-weight: 400; font-style: italic; }
.breakdown li.is-empty { color: var(--muted); font-style: italic; }
.receipt-sub { display: flex; justify-content: space-between; padding: .3rem 0; border-top: 1px dashed var(--line); }
.receipt-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 3px double var(--ink); margin-top: .4rem; padding-top: .6rem; font-weight: 800; }
.big-total { font: 700 clamp(2rem, 4vw, 2.8rem)/1 var(--display); color: var(--green); }
.tally { margin-top: 1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--terracotta); font-weight: 800; }
.tally-bar { height: 6px; background: #eadfca; border-radius: 3px; margin: .4rem 0 .8rem; overflow: hidden; }
.tally-bar span { display: block; height: 100%; width: 0; background: var(--green); transition: width .4s ease; }
.receipt-paper p { font-family: var(--sans); font-size: .88rem; }
.next-step { padding: .8rem; background: var(--green-soft); border-left: 4px solid var(--brass); font-weight: 700; }
.route-compare h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.route-compare table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.route-compare th, .route-compare td { text-align: left; padding: .35rem .3rem; border-bottom: 1px dotted var(--line); }
.route-compare tr.is-current th { color: var(--green); }

/* Layout planner */
.plan-grid, .base-grid, .festoon-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.8rem; align-items: start; }
.slider-field { margin-bottom: 1.2rem; }
.slider-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .3rem; }
.slider-head label { font-weight: 700; font-size: .92rem; }
.slider-value { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--brass-light); }
.slider-value input { width: 5rem; min-height: 40px; text-align: right; border-radius: 6px; border: 0; padding: .3rem .5rem; font: inherit; color: var(--ink); background: var(--paper); }
.slider-value abbr { text-decoration: none; font-size: .85rem; }
.slider-field small { display: block; color: #a9beb4; font-size: .76rem; margin-top: .2rem; }
input[type=range] { width: 100%; accent-color: var(--brass); height: 28px; cursor: pointer; }
.plan-output, .base-output, .festoon-output, .pd-output { background: var(--paper); color: var(--ink); border-radius: 8px; padding: 1.2rem; min-height: 260px; }
.plan-svg, .festoon-svg { display: block; width: 100%; font-family: var(--sans); }
.plan-floor { fill: #f4ead7; }
.plan-counter { fill: var(--green); }
.plan-end { fill: #0b2923; opacity: .7; }
.plan-label { fill: var(--paper); font: 700 15px var(--sans); }
.plan-dim path { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.seat { transform-box: fill-box; transform-origin: center; }
.seat-zone { fill: rgba(18,61,50,.07); stroke: rgba(18,61,50,.25); stroke-dasharray: 3 3; }
.seat circle { fill: var(--brass); stroke: var(--green-deep); stroke-width: 2.5; }
.seat text { fill: var(--green-deep); font: 800 13px var(--sans); }
.seat.is-extra circle { fill: #efe4cf; stroke: #b8ab93; }
.seat.is-extra text { fill: #8b7f69; }
.seat.is-over .seat-zone { fill: rgba(168,73,45,.12); stroke: var(--terracotta); }
.seat.is-over circle { fill: #f4d9cf; stroke: var(--terracotta); }
.seat.is-over text { fill: var(--terracotta); }
.plan-key { fill: var(--muted); font-size: 11px; }
.verdict-strip { margin: 1rem 0; padding: .9rem 1rem; border-radius: 6px; border-left: 5px solid; font-size: .95rem; }
.verdict-strip.is-good { border-color: #3c846b; background: #e4f3ec; }
.verdict-strip.is-tight { border-color: var(--terracotta); background: #fbeae4; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .6rem; margin: 0; }
.stat-row div { background: var(--cream); border-radius: 6px; padding: .7rem .8rem; }
.stat-row dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.stat-row dd { margin: .1rem 0 0; font: 700 1.6rem/1.1 var(--display); color: var(--green-deep); }

/* Planning walk-through */
.pd-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.8rem; align-items: start; }
.pd-output { position: sticky; top: 96px; }
.q { padding: 1rem 0 1.1rem !important; margin: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; transition: opacity .2s; }
.q.is-muted { opacity: .35; pointer-events: none; }
.q-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brass); color: var(--green-deep); font-size: .8rem; font-weight: 800; margin-right: .4rem; }
.q .field { max-width: 14rem; }
.pd-drawing svg { display: block; width: 100%; font-family: var(--sans); margin-bottom: .6rem; }
.pd-gridline { stroke: #ece2cf; }
.pd-scale { font-size: 10px; fill: var(--muted); }
.pd-ground { stroke: var(--green); stroke-width: 3; }
.pd-limit { stroke: var(--terracotta); stroke-width: 2; stroke-dasharray: 6 4; }
.pd-limit-text { font-size: 11px; font-weight: 700; fill: var(--terracotta); }
.pd-eaves-limit { stroke: var(--brass-dark); stroke-width: 1; stroke-dasharray: 2 3; }
.pd-building { fill: var(--green-soft); stroke: var(--green); stroke-width: 2.5; transition: fill .2s; }
.pd-building.is-over { fill: #f4d9cf; stroke: var(--terracotta); }
.pd-boundary { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 2 5; }
.pd-gap { stroke: var(--terracotta); stroke-width: 1.5; }
.pd-verdict { padding: 1rem 1.1rem; border-radius: 8px; border-left: 6px solid; margin-bottom: .8rem; }
.pd-verdict h3 { margin: .2rem 0 .3rem; font-size: 1.3rem; }
.pd-verdict p { margin: 0; font-size: .92rem; }
.pd-verdict.is-yes { background: #e4f3ec; border-color: #3c846b; }
.pd-verdict.is-ask { background: #fff6dc; border-color: var(--brass); }
.pd-verdict.is-no { background: #fbeae4; border-color: var(--terracotta); }
.pd-checks { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.pd-checks li { display: grid; grid-template-columns: 24px 1fr; gap: .5rem; padding: .45rem 0; border-bottom: 1px dotted var(--line); }
.pd-checks li > span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-size: .75rem; color: white; }
.pd-checks .is-yes > span:first-child { background: #3c846b; }
.pd-checks .is-no > span:first-child { background: var(--terracotta); }
.pd-checks .is-ask > span:first-child { background: var(--brass-dark); }
.pd-regs { font-size: .86rem; background: var(--cream); padding: .8rem; border-radius: 6px; }
.pd-output .tool-note { color: var(--muted); }

/* Base and festoon */
.base-fields > .field, .festoon-fields > .field { margin-bottom: 1rem; }
.span-list { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.base-empty { display: grid; place-items: center; min-height: 220px; text-align: center; color: var(--muted); padding: 1rem; }
.base-drawings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.base-plan, .base-section { display: block; width: 100%; font: 12px var(--sans); }
.base-plan text { fill: var(--muted); font-weight: 700; }
.base-ground { fill: #e6efe3; }
.base-rect { fill: #cfc8bb; stroke: #8b8273; stroke-width: 2; }
.base-rect.paving { fill: #ddd3c2; }
.base-grid path { stroke: #9f9585; stroke-width: 1; }
.base-wall { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 5 4; }
.base-section text { fill: var(--ink); font-size: 12px; }
.is-concrete { fill: #bdb7ad; } .is-sub { fill: #a08f74; } .is-paving { fill: #d7cdbb; }
.base-soil { fill: #6e5a42; }
.base-results { margin: 0; display: grid; gap: 0; }
.base-results div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted var(--line); }
.base-results dt { color: var(--muted); font-size: .9rem; }
.base-results dd { margin: 0; font-weight: 800; color: var(--green-deep); text-align: right; }
.festoon-sky { fill: #12322a; }
.fpost { stroke: #6b4a2e; stroke-width: 5; stroke-linecap: round; }
.fwire { fill: none; stroke: #050f0c; stroke-width: 1.8; }
.fbulb circle:last-child { fill: #ffe3a1; }
.fbulb-glow { fill: #ffcf73; opacity: .3; }
.festoon-output .tool-note { color: var(--muted); }

/* Responsive */
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: var(--green-deep); padding: 1rem 1.25rem 1.4rem; flex-direction: column; align-items: stretch; border-bottom: 4px double var(--brass); }
  .nav.is-open { display: flex; }
  .nav a { padding: .8rem 1rem; }
  .nav .nav-tool { margin: .5rem 0 0; text-align: center; }
  .hero-grid, .article-hero .hero-grid, .article-hero.has-art .hero-grid, .tool-teaser, .article-layout, .tab-grid, .plan-grid, .pd-grid, .base-grid, .festoon-grid, .hub-intro { grid-template-columns: 1fr; }
  .hero-scene { max-width: 560px; margin-inline: auto; }
  .hero-emblem { display: none; }
  .mats { grid-template-columns: 1fr 1fr; }
  .guide-grid, .answer-grid { grid-template-columns: 1fr 1fr; }
  .toc { position: static; order: -1; }
  .article-layout { gap: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .receipt-paper, .pd-output { position: static; }
  .menu-list { grid-template-columns: 1fr; }
  .related-box .guide-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap, .narrow { width: calc(100% - 1.5rem); }
  .masthead { min-height: 64px; }
  .brand small { display: none; }
  .mats { grid-template-columns: 1fr; gap: 1rem; }
  .mat { aspect-ratio: auto; border-radius: 18px; padding: 1.4rem 1.6rem; text-align: left; place-content: start; transform: none; }
  .guide-grid, .answer-grid, .footer-grid, .related-box .guide-grid, .route-picker, .span-list, .base-drawings { grid-template-columns: 1fr; }
  .section-head, .chalkboard-head { display: block; }
  .section-head p, .chalkboard-head p { margin-top: 1rem; }
  .chalkboard { border-width: 9px; }
  .knowledge-list { columns: 1; }
  .journey { grid-template-columns: 1fr; }
  .journey div { border-top: 0; border-left: 4px solid var(--brass); }
  .receipt { margin: 1rem; padding: 1.4rem; }
  .tab-line { grid-template-columns: 1fr auto; }
  .tab-line-label { grid-column: 1 / -1; }
  .pair { grid-template-columns: 1fr; }
  .last-orders { grid-template-columns: 1fr; }
  .tool-shell { margin-inline: -.75rem; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .mat { transform: none; }
}
@media print {
  .site-header, .site-footer, .toc, .tool-intro, .tab-lines, .route-picker, .read-progress, .source-box, .faq-box, .related-box, .article-hero, .last-orders { display: none !important; }
  body.has-budget .prose > :not(.tool-tab) { display: none !important; }
  .tool-shell { background: none; box-shadow: none; border: 0; padding: 0; }
  .tab-grid { display: block; }
  .receipt-paper { box-shadow: none; border: 1px solid #999; max-width: 420px; margin: 0 auto; }
}
.reveal-ready > * { opacity: 0; translate: 0 26px; transition: opacity .6s ease, translate .6s ease, transform .25s ease, box-shadow .25s ease; transition-delay: calc(var(--n, 0) * 80ms), calc(var(--n, 0) * 80ms), 0s, 0s; }
.reveal-ready.is-in > * { opacity: 1; translate: 0 0; }
[hidden] { display: none !important; }
.tool-stage { padding: clamp(2rem, 4vw, 3rem) 0 0; }
.tool-stage .tool-shell { margin: 1.5rem 0 0; }
.tool-lede { max-width: 50rem; }
.tool-lede p { font-size: 1.2rem; color: var(--green-deep); margin: 0; }
.receipt-total { gap: 1rem; }
.prose.has-stage > p:first-of-type { font-size: inherit; color: inherit; }