/* KOLLAZ phase 1 shared stylesheet. One file, template driven: every design
   change the Council directs lands here or in the builder template, once.
   System: 8pt spacing grid, dark emerald + gold frame, light reading sheet,
   gold is the single accent (primary action, selection, key labels). */
:root{
  --bg:#08120e; --bg2:#0c1a14; --surface:#10221a; --surface2:#152b20;
  --ink:#f2e9d5; --ink-dim:#c9bfa5; --muted:#9db3a5;
  --gold:#d9a92f; --gold-bright:#f0c75e; --gold-ink:#1a1405;
  --paper:#fffdf8; --paper2:#f7f2e7; --body:#1d2420; --body-dim:#45514a;
  --line:rgba(217,169,47,.28); --line-soft:rgba(242,233,213,.14);
  --radius:16px;
  --label:#856210;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--body);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.65;background:#e9e2cf}
.wrap{max-width:1120px;margin:0 auto;padding-left:16px;padding-right:16px}
img{max-width:100%;height:auto;display:block}
a{color:#0e6b4a}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* header: sticky, compact, never traps content; full-bleed emerald gradient
   continues behind the wordmark (no flat band, standing law) */
.site-header{position:sticky;top:0;z-index:50;
  background:radial-gradient(420px 160px at 18% 0%,rgba(240,199,94,.20),transparent 65%),
             linear-gradient(120deg,#08120e,#0e3d2c 70%,#08120e);
  border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;min-height:48px}
/* Beige glow behind the wordmark removed by owner order 2026-10-28: the
   reversed wordmark stands alone on the header gradient. Wrapper and
   padding stay, so header layout and heights are unchanged. */
.brand-glow{display:inline-block;padding:8px 28px}
.brand-glow img{width:148px}
.main-nav{display:flex;gap:8px;flex-wrap:wrap}
.main-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:0.9375rem;
  padding:12px 16px;min-height:48px;display:inline-flex;align-items:center;border-radius:999px}
.main-nav a:hover{background:var(--surface2);color:var(--gold-bright)}
.main-nav{margin-left:auto}

/* burger menu: zero-JS details/summary inside the sticky header, so it is
   reachable at any scroll position on every page. The panel is an overlay:
   it never pushes content or changes the header height. Identical component
   ships in the calculator stylesheet. Panel contrast, measured 2026-10-28:
   links --ink on the panel gradient stops: 10.10:1 (#0e3d2c) to 15.77:1
   (#08120e); group heading --gold: 5.61:1 worst stop; foot links --ink-dim:
   6.66:1 worst stop. Shop link --gold-bright (commercial intent, second in
   the panel by owner directive 2026-10-28): 7.57:1 (#0e3d2c) to 11.82:1
   (#08120e). All pass the 4.5:1 floor. */
.menu{position:relative;flex:none}
.menu-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:999px;line-height:1.2;
  color:var(--ink);font-weight:700;font-size:0.9375rem;background:rgba(8,18,14,.35)}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn:hover{color:var(--gold-bright);border-color:var(--gold)}
.menu[open ] .menu-btn{background:var(--surface2);color:var(--gold-bright)}
.menu-bars{display:inline-flex;flex-direction:column;gap:4px}
.menu-bars span{display:block;width:20px;height:2px;border-radius:2px;background:var(--gold)}
.menu[open ] .menu-bars span{background:var(--gold-bright)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 96px);overflow-y:auto;
  background:linear-gradient(160deg,#0e3d2c,#08120e);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 24px 48px -16px rgba(0,0,0,.6);padding:8px}
.menu-panel a{display:flex;align-items:center;min-height:48px;padding:10px 16px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-weight:600}
.menu-panel a:hover{background:var(--surface2);color:var(--gold-bright)}
.menu-panel a.menu-shop{color:var(--gold-bright)}
.menu-panel a.menu-sub{padding-left:32px;font-weight:500;font-size:0.9375rem;min-height:44px}
.menu-group{margin:12px 16px 4px;font-size:0.8125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.menu-foot{border-top:1px solid var(--line-soft);margin-top:8px;padding-top:8px}
.menu-foot a{min-height:40px;font-size:0.875rem;font-weight:500;color:var(--ink-dim)}
.menu-foot a:hover{color:var(--gold-bright)}
@media (max-width:560px){.menu-btn{padding:12px 14px}}
/* At phone widths the inline links yield to the menu: brand, four links and
   the menu button cannot share a 390px row without crushing the wordmark
   (found in render inspection 2026-10-28). The menu carries every one of
   those destinations, so nothing is lost; inline links return at 641px. */
@media (max-width:640px){.main-nav{display:none}}
@media (max-width:560px){
  .header-in{min-height:56px;gap:8px;padding-left:12px;padding-right:12px}
  .brand-glow{padding:4px 12px}
  .brand-glow img{width:80px}
  .main-nav{gap:0;flex-wrap:nowrap}
  .main-nav a{padding:12px 6px;font-size:0.8125rem}
}

/* reading sheet */
.sheet{background:var(--paper);border-radius:var(--radius);margin-top:24px;margin-bottom:32px;
  padding:32px 40px 40px;box-shadow:0 24px 48px -24px rgba(0,0,0,.45)}
article.sheet{max-width:800px}
@media (max-width:560px){.sheet{padding:24px 16px 32px;border-radius:12px}}
h1{font-size:clamp(1.875rem,5.2vw,2.75rem);line-height:1.12;letter-spacing:-.01em;margin:8px 0 8px;color:var(--body)}
h2{font-size:clamp(1.4375rem,3.6vw,1.8125rem);line-height:1.2;margin:32px 0 8px}
h3{font-size:1.25rem;line-height:1.3;margin:24px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:24px}
li{margin-bottom:8px}
table{border-collapse:collapse;width:100%;margin:16px 0;font-size:0.9375rem;display:block;overflow-x:auto}
th,td{border:1px solid #ddd3ba;padding:8px;text-align:left}
th{background:var(--paper2)}
blockquote{border-left:4px solid var(--gold);margin:16px 0;padding:8px 16px;background:var(--paper2)}
hr{border:none;border-top:1px solid #ddd3ba;margin:24px 0}
.kicker{margin:0;font-size:0.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.kicker a{color:var(--label);text-decoration:none}
.byline{color:var(--body-dim);font-size:0.875rem;margin-bottom:16px}
.hero{margin:0 0 24px}
.hero img{border-radius:12px;width:100%}
.answer-box,.toc{background:var(--paper2);border:1px solid #e3d9bd;border-radius:12px;padding:16px 24px;margin:0 0 24px}
.answer-box{border-left:6px solid var(--gold)}
.box-label{font-size:0.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin:0 0 8px}
.toc ol{margin:0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* bands and next card: one filled primary per band, targets >=48px */
.tool-band,.cta-band{border-radius:12px;padding:24px;margin:32px 0;color:var(--ink)}
.tool-band{background:linear-gradient(130deg,#0e3d2c,#10221a)}
.cta-band{background:linear-gradient(130deg,#152b20,#0e3d2c);border:1px solid var(--line)}
.tool-band h2,.cta-band h2{color:var(--gold-bright);margin-top:0}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;border-radius:999px;
  font-weight:700;font-size:1rem;text-decoration:none;border:1px solid transparent}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{background:var(--gold-bright)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.next-card{display:block;text-decoration:none;background:var(--paper2);border:2px solid var(--gold);
  border-radius:12px;padding:24px;margin:32px 0 8px;color:var(--body)}
.next-card:hover{background:#f1e8d2}
.next-label{display:block;font-size:0.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.next-title{display:block;font-size:1.5rem;font-weight:700;line-height:1.25;margin:8px 0}
.next-desc{display:block;color:var(--body-dim)}

/* homepage */
.home-hero{color:var(--ink);padding:48px 0 48px;text-align:center;
  background:radial-gradient(700px 320px at 50% -60px,rgba(240,199,94,.22),transparent 65%),
             linear-gradient(160deg,#0e3d2c,#08120e 75%)}
.entity{color:var(--gold-bright);font-weight:600;letter-spacing:.04em;margin-top:16px}
.home-h1{color:var(--ink);font-size:clamp(2.125rem,6vw,3.5rem);max-width:16em;margin-left:auto;margin-right:auto}
.lede{font-size:1.1875rem;max-width:38em}
.lede.light{color:var(--ink-dim);margin-left:auto;margin-right:auto}
.front-paths{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.section{padding:8px 16px 32px}
.section>h2{color:var(--body)}
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:640px){.doors{grid-template-columns:1fr}}
.door{display:block;background:var(--paper);border-radius:12px;padding:24px;text-decoration:none;color:var(--body);
  border-top:6px solid var(--gold);box-shadow:0 16px 32px -18px rgba(0,0,0,.4)}
.door-title{display:block;font-size:1.375rem;font-weight:700}
.door-desc{display:block;color:var(--body-dim);margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
/* featured row: exactly three across on desktop, stacked on phone */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.cards-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards-3{grid-template-columns:1fr}}
/* slim all-guides band that replaced the homepage Top 10 grid */
.guides-band{background:var(--paper);border-top:6px solid var(--gold);border-radius:12px;
  padding:24px 32px;display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap;
  box-shadow:0 16px 32px -18px rgba(0,0,0,.4)}
.guides-band p{margin:0;flex:1 1 320px;font-size:1.125rem}
/* all-guides page: room jump list wraps vertically, never scrolls sideways */
.room-jump{list-style:none;display:flex;flex-wrap:wrap;gap:0 32px;margin:0 0 8px;padding:0}
.room-jump li{margin:0}
.room-jump a{display:inline-flex;align-items:center;min-height:48px;font-weight:600}
.room-group{margin-top:40px}
.room-group>h2{margin-top:0}
.card{background:var(--paper);border-radius:12px;overflow:hidden;box-shadow:0 16px 32px -18px rgba(0,0,0,.35)}
.card a{text-decoration:none;color:var(--body);display:block}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-body{display:block;padding:16px 24px 24px}
.card-cat{display:block;font-size:0.78125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.card-title{display:block;font-size:1.25rem;font-weight:700;line-height:1.3;margin:8px 0}
.card-desc{display:block;color:var(--body-dim);font-size:0.96875rem}
.etsy-band{background:linear-gradient(130deg,#0e3d2c,#08120e);color:var(--ink);border-radius:12px;padding:32px}
.etsy-band h2{color:var(--gold-bright);margin-top:0}

/* footer: full-bleed emerald gradient to the edge, legal links always present */
.site-footer{margin-top:16px;color:var(--ink-dim);
  background:radial-gradient(500px 200px at 80% 0%,rgba(240,199,94,.14),transparent 60%),
             linear-gradient(140deg,#0e3d2c,#08120e 65%)}
.foot-in{padding-top:32px;padding-bottom:40px}
.foot-brand{color:var(--ink);font-weight:600}
.site-footer nav{display:flex;gap:8px 24px;flex-wrap:wrap;margin:16px 0}
.site-footer nav a{color:var(--gold-bright);text-decoration:none;min-height:48px;display:inline-flex;align-items:center}
.foot-note{font-size:0.84375rem;color:var(--muted)}

/* consent banner (go-live analytics, 2026-10-28): first-party, fixed at the
   bottom so it never covers the top of an article (answer box and CTA band
   sit high; the page gains matching bottom padding from the banner script
   while it is visible). Full-width sheet on phone, bottom-left card on
   desktop. Fixed position: zero layout shift. Targets stay >=48px. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px}
.consent[hidden]{display:none}
.consent-card{background:linear-gradient(150deg,#0e3d2c,#08120e);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:20px 24px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.65)}
.consent-card h2{color:var(--gold-bright);font-size:1.1875rem;margin:0 0 8px;line-height:1.25}
.consent-card p{margin:0 0 8px;font-size:0.96875rem;color:var(--ink)}
.consent-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
/* the Decline control is a real <button>, so the UA buttonface background
   must be reset explicitly or it renders as a cream pill with washed-out
   text on the emerald card (caught in go-live screenshot inspection) */
.consent-card .btn-ghost{background:transparent}
.consent-link{background:none;border:none;cursor:pointer;color:var(--gold-bright);
  font-weight:600;font-size:0.9375rem;text-decoration:underline;min-height:48px;padding:12px 8px}
.consent-settings{border-top:1px solid var(--line-soft);margin-top:16px;padding-top:8px}
.consent-settings[hidden]{display:none}
.consent-toggle{display:flex;gap:12px;align-items:center;min-height:48px;font-weight:600;cursor:pointer}
.consent-toggle input{width:24px;height:24px;flex:none;accent-color:var(--gold)}
.consent-note{font-size:0.875rem;color:var(--ink-dim)}
@media (min-width:641px){
  .consent{right:auto;width:400px;padding:16px}
}
/* Phone density (measured in the go-live verification): the full sheet
   stood 324px tall at 390px wide and covered the lower half of an
   article's answer box at first paint. On phones the banner therefore
   opens as a compact bar (heading, both choices, settings link) and the
   body copy joins the settings view when the reader expands it via
   Cookie settings. Desktop keeps the full sheet as designed. Every word
   of the copy ships; only its phone presentation is staged. */
@media (max-width:640px){
  .consent{padding:8px}
  .consent-card{padding:12px 16px}
  .consent-card h2{font-size:1.0625rem;margin-bottom:8px}
  .consent-body{display:none}
  .consent.expanded .consent-body{display:block}
  .consent-btns{margin-top:0;gap:8px}
  .consent-btns .btn{flex:1 1 0;justify-content:center;padding-left:12px;padding-right:12px}
}
.cookies-btn{position:fixed;left:16px;bottom:16px;z-index:79;cursor:pointer;
  min-height:48px;padding:12px 20px;border-radius:999px;border:1px solid var(--gold);
  background:rgba(8,18,14,.92);color:var(--gold-bright);font-weight:700;font-size:0.9375rem}
.cookies-btn[hidden]{display:none}
.cookies-btn:hover{background:var(--surface2)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}