/* Bitterplace multi-page */
:root{
  --bg:#f6f6f4; --ink:#161617; --muted:#5a5a5a; --card:#ffffff;
  --accent:#2ecc71; --ring: rgba(0,0,0,.08);
}
:root.dark{ --bg:#0d0f10; --ink:#e9ecef; --muted:#9aa4ad; --card:#121417; --accent:#7ef29a; --ring: rgba(255,255,255,.08); }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font:16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background:var(--bg);
  background-image: radial-gradient(var(--ring) 1px, transparent 1px); background-size: 12px 12px; letter-spacing:.2px; }
h1,h2,h3,h4{line-height:1.2; margin:0 0 .4rem}
h1{font-size:clamp(2.2rem,3vw,3rem)} h2{font-size:clamp(1.6rem,2.4vw,2.2rem)} h3{font-size:clamp(1.2rem,1.6vw,1.4rem); text-transform:uppercase; letter-spacing:.12em} h4{font-size:1.05rem}
p{margin:.4rem 0 1rem; color:var(--muted)}

.site-header{ position:sticky; top:0; z-index:10; display:grid; gap:1rem; grid-template-columns: 1fr; padding:.8rem clamp(.8rem, 2vw, 2rem); backdrop-filter:saturate(150%) blur(6px);
  background:linear-gradient(to bottom, rgba(255,255,255,.75), transparent); }
:root.dark .site-header{ background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent); }
.mark{ display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; color:inherit }
.mark img{ width:58px; height:58px; object-fit:contain; filter: drop-shadow(0 6px 10px var(--ring)); }
.subtitle{ margin:0; font-size:.95rem; color:var(--muted) }
.title h1{ margin:0; }

.theme-toggle{ position:absolute; right:.8rem; top:.8rem; border:1px solid var(--ring); background:var(--card); color:var(--ink); padding:.45rem .6rem; border-radius:.6rem; cursor:pointer; box-shadow: 0 6px 20px var(--ring); }
.site-nav{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem }
.site-nav a{ text-decoration:none; color:var(--ink); padding:.35rem .6rem; border-radius:.6rem; border:1px solid var(--ring); background:var(--card); }
.site-nav a:hover{ box-shadow:0 6px 18px var(--ring)}

.hero{ display:grid; place-items:center; padding:4rem 1rem 2rem; background: radial-gradient(1200px 600px at 20% -20%, var(--accent) 0%, transparent 50%), var(--bg); }
.hero.slim{ padding:3.2rem 1rem 1.6rem }
.hero-inner{ max-width:920px; text-align:center }
.cta-row{ margin-top:1rem }
.btn{ display:inline-block; border:1px solid var(--ring); background:var(--card); padding:.5rem .9rem; border-radius:.6rem; text-decoration:none; color:var(--ink) }
.btn-ghost{ background:transparent }

.panel{ padding:2.2rem 1rem }
.panel-head{ max-width:920px; margin:0 auto 1.2rem }
.grid-3{ display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr)); max-width:1100px; margin:0 auto }
@media (max-width: 920px){ .grid-3{ grid-template-columns: 1fr } }
.card, .entry{ background:var(--card); border:1px solid var(--ring); border-radius:1rem; padding:1rem; box-shadow: 0 20px 50px var(--ring); }
.tracks .card ul{ margin:.4rem 0 0 1rem; color:var(--muted) }
.notebook .entry time{ display:block; color:var(--muted); font-size:.85rem }
.notebook .entry .more{ display:inline-block; margin-top:.6rem; text-decoration:none; border:1px dashed var(--ring); padding:.3rem .5rem; border-radius:.5rem; color:var(--ink) }
.notebook .entry .more[aria-disabled="true"]{ opacity:.6; pointer-events:none }
.equip{ max-width:920px; margin:0 auto; padding:0; list-style:none; display:grid; gap:.6rem }
.equip li{ background:var(--card); border:1px solid var(--ring); border-radius:.8rem; padding:.6rem .8rem }
.ethics article{ background:var(--card); border:1px solid var(--ring); border-radius:1rem; padding:1rem; }
details{ max-width:920px; margin:.6rem auto; background:var(--card); border:1px solid var(--ring); border-radius:.8rem; padding:.6rem .8rem }
summary{ cursor:pointer; font-weight:600 }
.site-footer{ padding:2rem 1rem; text-align:center; color:var(--muted) }