/* ============ Lakeside Bohemeinn · hi-fi shell ============ */
:root{
  /* Brand tokens — from brandguidelines.md */
  --forest:#2F4A3A;        /* headlines, logo, grounding blocks */
  --terracotta:#B7553A;    /* primary CTAs, links, accents */
  --lake:#3B7A7B;          /* secondary buttons, icons, borders */
  --bark:#5A3E2B;          /* long-form body text option */
  --ochre:#C89B3C;         /* ratings, tags — keep under 10% */
  --sand:#F2E8D5;          /* section background */
  --paper:#FBF8F2;         /* page background */
  --ink:#1F1F1F;           /* body copy */
  --slate:#4A4A4A;         /* captions, form labels */

  /* Semantic UI tokens built from the brand palette */
  --bg-page:var(--paper);
  --bg-page-soft:var(--sand);
  --bg-page-strong:#E5D9BF;
  --bg-card:var(--paper);
  --bg-note:#F6EBCB;
  --bg-dark:var(--forest);
  --bg-dark-strong:#22362A;
  --bg-dark-soft:#314C3D;
  --text-primary:var(--ink);
  --text-muted:var(--slate);
  --text-soft:#6B665E;
  --text-on-dark:var(--paper);
  --text-on-dark-muted:rgba(251,248,242,.78);
  --text-on-dark-soft:rgba(251,248,242,.56);
  --border-subtle:rgba(31,31,31,.14);
  --border-strong:rgba(47,74,58,.28);
  --border-on-dark:rgba(251,248,242,.16);
  --accent-primary:var(--terracotta);
  --accent-primary-soft:#D4826B;
  --accent-secondary:var(--lake);
  --accent-highlight:var(--ochre);
  --accent-primary-ring:rgba(183,85,58,.18);
  --shadow-soft:rgba(31,31,31,.10);
  --shadow-strong:rgba(31,31,31,.18);
  --glass-nav:rgba(251,248,242,.92);
  --dark-panel:rgba(31,31,31,.46);
  --overlay-hero:rgba(31,31,31,.58);
  --overlay-hero-soft:rgba(31,31,31,.16);
  --overlay-hero-strong:rgba(31,31,31,.74);
  --grid-on-dark:rgba(255,255,255,.035);
  --tape-start:rgba(230,215,150,.55);
  --tape-end:rgba(230,215,150,.85);

  /* Legacy aliases so existing inline styles inherit the brand palette */
  --cream:var(--bg-card);
  --paper-2:var(--bg-page-soft);
  --paper-3:var(--bg-page-strong);
  --ink-soft:var(--text-muted);
  --ink-mute:var(--text-soft);
  --line:var(--border-subtle);
  --moss:var(--forest);
  --moss-soft:var(--accent-primary-soft);
  --moss-deep:var(--bg-dark-strong);
  --rust:var(--accent-primary);
  --rust-soft:var(--accent-primary-soft);
  --accent:var(--accent-primary);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-page);color:var(--text-primary);font-family:'Fraunces',Georgia,serif;-webkit-font-smoothing:antialiased}
body{
  font-feature-settings:"ss01","ss02","kern";
  font-variant-ligatures:common-ligatures;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.hand{font-family:'Caveat',cursive}
.serif{font-family:'Fraunces',serif}
.italic{font-style:italic}

/* ---------------- nav (hidden → reveals on scroll up) ---------------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), background .3s, backdrop-filter .3s, border-color .3s;
  transform:translateY(-100%);
}
.site-nav.visible{transform:translateY(0);background:var(--glass-nav);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(43,42,36,.06)}
.site-nav.at-top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
.site-nav .brand{font-family:'Fraunces';font-weight:300;font-style:italic;font-size:20px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px}
.site-nav .brand b{font-weight:400;font-style:normal}
.site-nav .brand .leaf{width:18px;height:18px;color:var(--moss);flex:none}
.site-nav .brand-logo{height:56px;width:auto;display:block}
@media (max-width:640px){.site-nav .brand-logo{height:48px}}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.site-nav ul a{color:var(--text-primary);opacity:.78;transition:opacity .2s}
.site-nav ul a:hover,.site-nav ul a.active{opacity:1}
.site-nav .book{font-family:'JetBrains Mono';font-size:11px;text-transform:uppercase;letter-spacing:.14em;border:1px solid var(--forest);padding:8px 14px;border-radius:999px;background:transparent;transition:background .2s,color .2s,border-color .2s}
.site-nav .book:hover{background:var(--forest);border-color:var(--forest);color:var(--paper)}

/* nav hint pill at top-right before scroll */
.nav-hint{position:fixed;top:22px;right:32px;z-index:49;display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);opacity:1;transition:opacity .4s ease;pointer-events:none}
.nav-hint .dot{width:6px;height:6px;background:currentColor;border-radius:50%;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------------- placeholder imagery ---------------- */
.ph{
  position:relative;background:
    radial-gradient(circle at 30% 30%, rgba(31,31,31,.06), transparent 60%),
    linear-gradient(135deg, var(--paper-3), var(--paper-2));
  border:1px solid var(--line);
  overflow:hidden;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(31,31,31,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,31,31,.05) 1px, transparent 1px);
  background-size:40px 40px;pointer-events:none;
}
.ph::after{
  content:"";position:absolute;inset:10%;
  border:1px dashed rgba(31,31,31,.22);
}
.ph .ph-label{
  position:relative;z-index:1;
  font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
  background:var(--cream);
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  max-width:72%;
}
.ph.dark{background:linear-gradient(135deg,var(--bg-dark-strong),var(--bg-dark));color:var(--text-on-dark-muted)}
.ph.dark::before{background-image:
  linear-gradient(to right, var(--grid-on-dark) 1px, transparent 1px),
  linear-gradient(to bottom, var(--grid-on-dark) 1px, transparent 1px)}
.ph.dark::after{border-color:var(--border-on-dark)}
.ph.dark .ph-label{background:var(--dark-panel);color:var(--text-on-dark);border-color:rgba(255,255,255,.1)}

/* ---------------- footer (shared) ---------------- */
.site-foot{
  background:var(--bg-dark);color:var(--text-on-dark);
  padding:72px 32px 28px;margin-top:60px;
}
.site-foot .row{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-foot h1{font-family:'Fraunces';font-weight:300;font-size:clamp(44px,5vw,72px);line-height:.95;letter-spacing:-.02em;margin:0 0 20px;max-width:12ch}
.site-foot h1 em{color:var(--rust-soft)}
.site-foot p{font-family:'Fraunces';font-style:italic;font-size:15px;color:var(--text-on-dark-muted);margin:0 0 20px;max-width:42ch}
.site-foot h5{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-on-dark-soft);margin:0 0 14px}
.site-foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-family:'Fraunces';font-size:15px}
.site-foot ul a{opacity:.85;transition:opacity .2s}
.site-foot ul a:hover{opacity:1;color:var(--rust-soft)}
.site-foot .mark{max-width:1280px;margin:56px auto 0;padding-top:20px;border-top:1px solid var(--border-on-dark);display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-soft)}
.site-foot .btn{border-color:var(--text-on-dark);color:var(--text-on-dark)}
.site-foot .btn:hover{background:var(--text-on-dark);color:var(--bg-dark)}
.site-foot .btn.fill{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--text-on-dark)}
.site-foot .btn.fill:hover{background:var(--accent-primary-soft);border-color:var(--accent-primary-soft);color:var(--text-on-dark)}

/* ---------------- marquee strip ---------------- */
.strip{display:flex;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;gap:48px;font-family:'Fraunces';font-style:italic;font-size:26px;font-weight:300;white-space:nowrap;-webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)}
.strip .lane{display:inline-flex;gap:48px;align-items:center;animation:slide 50s linear infinite;padding-right:48px}
.strip .lane b{width:6px;height:6px;background:var(--rust);border-radius:50%;display:inline-block;flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- page container ---------------- */
.container{max-width:1280px;margin:0 auto;padding:0 32px}
.section{padding:100px 32px}
.section-kicker{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px}

/* ---------------- buttons ---------------- */
/* pill shape kept from site design; brand colors from guidelines: terracotta primary, forest secondary border */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;min-height:44px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--forest);border-radius:999px;background:transparent;color:var(--forest);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--forest);color:var(--paper)}
.btn.fill{background:var(--terracotta);border-color:var(--terracotta);color:var(--paper)}
.btn.fill:hover{background:var(--accent-primary-soft);border-color:var(--accent-primary-soft);color:var(--paper)}
.btn .arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------------- tweaks panel (reuse) ---------------- */
#tweaks{position:fixed;right:20px;bottom:20px;width:300px;background:var(--cream);border:1px solid var(--ink);border-radius:14px;padding:16px 18px;z-index:80;display:none !important;box-shadow:0 14px 40px var(--shadow-strong);font-family:'Fraunces'}
#tweaks.open{display:block}
#tweaks h4{margin:0 0 10px;font-family:'Fraunces';font-style:italic;font-weight:300;font-size:26px;line-height:1}
#tweaks .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px dashed var(--line)}
#tweaks .row:first-of-type{border-top:none}
#tweaks label{font-family:'JetBrains Mono';font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
#tweaks .segs{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
#tweaks .seg{font-family:'JetBrains Mono';font-size:10px;border:1px solid var(--ink);background:transparent;padding:5px 9px;border-radius:999px;cursor:pointer;color:var(--ink)}
#tweaks .seg.active{background:var(--ink);color:var(--paper)}
#tweaks .close{position:absolute;top:8px;right:10px;border:none;background:transparent;font-family:'Caveat';font-size:24px;cursor:pointer;color:var(--ink)}
#tweakFab{position:fixed;right:20px;bottom:20px;z-index:79;background:var(--ink);color:var(--paper);border:none;border-radius:999px;padding:11px 18px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px var(--shadow-strong);display:none !important}
body.tweaks-on #tweakFab{display:none}

/* Legacy tone hooks are kept as no-op aliases so old markup cannot drift off-brand. */
body.tone-earthy,
body.tone-cool,
body.tone-mono,
body.tone-warm{
  --paper:#FBF8F2;
  --paper-2:#F2E8D5;
  --paper-3:#E5D9BF;
  --rust:#B7553A;
  --rust-soft:#D4826B;
  --ink:#1F1F1F;
}

/* accent-pill */
.pill{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--ink-soft)}
.pill b{width:5px;height:5px;background:var(--rust);border-radius:50%;display:inline-block}

/* ============ RESPONSIVE FOUNDATION ============ */

/* hamburger toggle — only visible on small screens */
.site-nav .nav-toggle{
  display:none;background:transparent;border:0;cursor:pointer;padding:8px;
  width:44px;height:44px;align-items:center;justify-content:center;
  color:var(--text-primary);position:relative;z-index:51;
  transition:color .25s;
}
.site-nav .nav-toggle .bars{position:relative;width:22px;height:14px;display:block}
.site-nav .nav-toggle .bars::before,
.site-nav .nav-toggle .bars::after,
.site-nav .nav-toggle .bars > span{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .3s, opacity .2s, top .3s, bottom .3s;
}
.site-nav .nav-toggle .bars::before{top:0}
.site-nav .nav-toggle .bars > span{top:50%;transform:translateY(-50%);display:block}
.site-nav .nav-toggle .bars::after{bottom:0}

/* full-screen menu overlay — render but hide until opened */
.nav-overlay{
  position:fixed;inset:0;z-index:48;
  background:var(--bg-dark);color:var(--text-on-dark);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
  padding:90px 24px 60px;
}
.nav-overlay ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:24px;text-align:center;
  font-family:'Fraunces';font-weight:300;font-size:clamp(34px,9vw,46px);
  line-height:1.1;letter-spacing:-.02em;
}
.nav-overlay ul a{color:var(--text-on-dark);opacity:.92;transition:opacity .2s,color .2s}
.nav-overlay ul a:hover{opacity:1}
.nav-overlay ul a.active{color:var(--rust-soft);font-style:italic;opacity:1}
.nav-overlay .book{
  margin-top:40px;
  border-color:var(--rust-soft);color:var(--rust-soft);
  background:transparent;
}
.nav-overlay .book:hover{background:var(--rust-soft);color:var(--bg-dark);border-color:var(--rust-soft)}
.nav-overlay .meta{
  margin-top:auto;font-family:'JetBrains Mono';font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-on-dark-soft);text-align:center;
}

body.nav-open{overflow:hidden}
body.nav-open .nav-overlay{opacity:1;visibility:visible}
body.nav-open .site-nav{transform:translateY(0) !important;background:transparent;box-shadow:none;border-bottom-color:transparent}
body.nav-open .site-nav .nav-toggle{color:var(--text-on-dark)}
body.nav-open .site-nav .nav-toggle .bars::before{top:50%;transform:translateY(-50%) rotate(45deg)}
body.nav-open .site-nav .nav-toggle .bars::after{bottom:50%;transform:translateY(50%) rotate(-45deg)}
body.nav-open .site-nav .nav-toggle .bars > span{opacity:0}

/* ---------- 1100: hide chapter rail on stories ---------- */
/* (already handled in about.html @ 1100) */

/* ---------- 900: tablet portrait ---------- */
@media (max-width:900px){
  .site-foot{padding:60px 24px 24px}
  .site-foot .row{grid-template-columns:1fr 1fr;gap:36px}
  .site-foot h1{font-size:clamp(34px,6vw,52px);max-width:none}
  .site-foot .mark{flex-direction:column;gap:8px;text-align:left;align-items:flex-start;margin-top:40px}
  .site-foot .mark span:nth-child(2){opacity:.7}
  .strip{font-size:20px;padding:14px 0;gap:32px}
  .strip .lane{gap:32px;padding-right:32px}
}

/* ---------- 720: nav switches to hamburger ---------- */
@media (max-width:720px){
  .site-nav{padding:14px 20px}
  .site-nav > ul,
  .site-nav > .book{display:none}
  .site-nav .nav-toggle{display:inline-flex}
  .nav-hint{display:none}

  /* squish horizontal page padding on body-level sections */
  body > section,
  body > header,
  body > .board,
  body > .stickyBook{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .container{padding-left:20px;padding-right:20px}
  .section{padding:80px 20px}

  .site-foot{padding:56px 20px 22px}
  .site-foot h1{font-size:32px;margin-bottom:16px}
  .site-foot p{font-size:14px}
}

/* ---------- 420: small phone (iPhone SE class) ---------- */
@media (max-width:420px){
  .site-nav{padding:12px 16px}
  .site-nav .brand-logo{height:42px}
  body > section,
  body > header,
  body > .board{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .container{padding-left:16px;padding-right:16px}
  .section{padding:60px 16px}
  .site-foot{padding:44px 16px 18px}
  .site-foot .row{grid-template-columns:1fr;gap:28px}
  .site-foot h1{font-size:30px}
  .strip{font-size:17px;gap:24px}
  .strip .lane{gap:24px;padding-right:24px}
  .btn{padding:11px 18px;font-size:10px}
}

/* a .ph slot that has its photograph: same geometry, the image itself.
   ::before/::after don't render on replaced elements, so the grid + dashed
   frame disappear automatically. */
img.ph{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:0}