:root{
  --bg:#fff; 
  --ink:#1a1a1a; 
  --muted:#5a5a5a; 
  --line:#e8e8e8; 
  --accent:#0041a8;
  --card:#fafafa; 
  --radius:12px; 
  --max:1100px;
  --font-body: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans",Helvetica,Arial,sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --brand:#722F37; /* dark wine brand color */
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  color:var(--ink);background:var(--bg);
  font-family:var(--font-body);
  line-height:1.6;
  font-size:16px;
}

/* === Links: global brand color === */
a {
  color: var(--brand);
  text-decoration:none;
  transition:color .2s;
}
a:hover {
  color: var(--brand);
  text-decoration:underline;
}

/* Force brand color for important link types */
a[href^="mailto:"],
a[href^="https://wa.me"],
.footer a,
.contact a {
  color: var(--brand) !important;
  font-weight:600;
  text-decoration:none;
}
a[href^="mailto:"]:hover,
a[href^="https://wa.me"]:hover,
.footer a:hover,
.contact a:hover {
  color: var(--brand) !important;
  text-decoration:underline;
}

.container{max-width:var(--max);margin:auto;padding:24px}
.header{
  border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:0;z-index:1000;
}
.nav{
  display:flex;flex-wrap:wrap;
  gap:16px;align-items:center;justify-content:space-between;
  padding:12px 24px;
}
.brand a{
  font-weight:700;
  letter-spacing:.3px;
  font-size:1.2rem;
  color:var(--brand);
}
.menu{font-size:.95rem}

.hero{
  padding:64px 24px 48px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(#fff,#fafafa);
  text-align:center;
}
.hero h1{
  font-family:var(--font-serif);
  font-size:clamp(28px,4vw,46px);
  margin:0 0 12px;
}
.hero p{color:var(--muted);max-width:720px;margin:auto}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;margin:32px 0;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.card h3{margin:0 0 10px;font-size:1.2rem}

.footer{
  border-top:1px solid var(--line);
  padding:24px;
  color:var(--brand);
  text-align:center;
  font-size:.9rem;
}

.btn{
  display:inline-block;margin-top:6px;
  border:1px solid var(--brand);
  padding:10px 16px;border-radius:10px;
  font-weight:600;font-size:.95rem;
  transition:background .2s,color .2s;
}
.btn.fill{background:var(--brand);color:#fff}
.btn:hover{background:#5c2129;color:#fff;border-color:#5c2129}

.input,textarea,select{
  width:100%;padding:12px;
  border:1px solid var(--line);border-radius:10px;
  font-size:1rem;
}
label{display:block;margin:12px 0 6px;color:#333;font-weight:500}
.form{max-width:680px;margin:24px auto}

.kicker{letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--muted);margin-bottom:8px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.notice{background:#f6f9ff;border:1px solid #dfe9ff;border-radius:10px;padding:12px}
img{max-width:100%;height:auto;border-radius:var(--radius)}

/* Responsive tweaks */
@media (max-width:768px){
  .nav{flex-direction:column;align-items:flex-start}
  .hero{text-align:left;padding:48px 18px}
  .hero h1{font-size:2rem}
  .container{padding:18px}
}

/* === Unified Hamburger Icon === */
.hamburger {
  display:none; /* hidden on desktop */
  flex-direction:column;
  justify-content:center;
  gap:5px;               /* consistent spacing */
  cursor:pointer;
  padding:4px;
  border:0;
  background:transparent;
}
.hamburger span {
  display:block;
  width:26px;            /* consistent length */
  height:3px;            /* consistent thickness */
  background:var(--brand); /* brand color */
  border-radius:2px;
  transition:background 0.3s ease;
}

/* Mobile menu toggle */
@media (max-width:600px){
  .hamburger{display:flex}
  .menu{display:none;width:100%;margin-top:8px}
  .menu.open{display:block}
  .menu ul{flex-direction:column;gap:0}
}
@media (min-width:601px){
  .menu{display:block}
}

/* Dropdown menu */
.menu ul{
  display:flex;gap:14px;margin:0;padding:0;
  list-style:none;flex-wrap:wrap;
}
.menu li{position:relative;list-style:none}
.menu ul ul{
  display:none;
  position:absolute;
  top:100%;left:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  min-width:220px;
  padding:6px 0;
  z-index:1000;
}
.menu li:hover > ul{display:block}
.menu ul ul li a{
  display:block;padding:8px 14px;
  color:var(--brand);
  white-space:nowrap;
}
.menu ul ul li a:hover{background:var(--card)}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c0f;--ink:#e9e9ef;--muted:#b4b7bf;
    --line:#1e2130;--card:#11131a;--accent:#6da3ff;
  }
  .header,.hero{background:linear-gradient(#0b0c0f,#0b0c0f)}
  .menu ul ul{background:#11131a;border:1px solid #1e2130}
  .menu ul ul li a{color:var(--brand)}
  .menu ul ul li a:hover{background:#1e2130}
}

/* === Force nav links brand color === */
.menu a,
.menu.open a {
  color: var(--brand) !important;
  font-weight:600;
  text-decoration:none;
}
.menu a:hover,
.menu.open a:hover {
  color: var(--brand) !important;
  text-decoration:underline;
}
/* ============ Global “rich page” styles ============ */

/* 1) Theme vars (tweak to taste) */
:root{
  --panel-warm: rgba(255, 245, 200, .78);  /* light yellow */
  --panel-cool: rgba(240, 242, 245, .78);  /* light grey */
  --panel-ink:  var(--ink, #1a1a1a);
  --panel-line: var(--line, #e8e8e8);
  --panel-radius: var(--radius, 12px);
  --panel-shadow: 0 10px 25px rgba(0,0,0,.12);
  --backdrop-blur: 6px;
}

/* 2) Optional site-wide background (subtle gradient) */
html,body{
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(0,0,0,.04), transparent 60%),
    radial-gradient(1200px 800px at 110% 10%, rgba(0,0,0,.04), transparent 60%),
    linear-gradient(180deg, #fff, #fafafa 30%, #f7f7f7 100%);
}

/* 3) Parallax sections (drop on any section/hero) */
.parallax-bg{
  position: relative;
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* the parallax bit */
  isolation: isolate;             /* for overlays */
}
.parallax-bg::before{             /* soft darkening for text legibility */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.30));
  z-index:0;
}
.parallax-inner{
  position: relative; z-index:1;
  display:grid; place-items:center;
  min-height:inherit;
  padding: clamp(16px, 4vw, 48px);
}

/* 4) Translucent “panel” cards you can reuse everywhere */
.panel{
  background: var(--panel-cool);
  color: var(--panel-ink);
  backdrop-filter: saturate(115%) blur(var(--backdrop-blur));
  -webkit-backdrop-filter: saturate(115%) blur(var(--backdrop-blur));
  border: 1px solid var(--panel-line);
  box-shadow: var(--panel-shadow);
  border-radius: var(--panel-radius);
  padding: clamp(16px, 3.5vw, 28px);
}
.panel--warm{ background: var(--panel-warm); }
.panel--cool{ background: var(--panel-cool); }

/* Optional: a tidy max-width container for long reads */
.panel.prose{
  max-width: 820px;
  margin: 24px auto;
  line-height: 1.75;
}

/* 5) Make fixed-attachment behave on small/mobile (iOS) */
@media (max-width: 820px){
  .parallax-bg{ background-attachment: scroll; } /* graceful fallback */
}

/* 6) Nice subtle border for images placed on panels */
.panel img{
  display:block; max-width:100%; height:auto;
  border-radius: calc(var(--panel-radius) - 4px);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
/* --- HOTFIX: force light tokens even in dark mode --- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#fff;
    --ink:#1a1a1a;
    --muted:#5a5a5a;
    --line:#e8e8e8;
    --card:#fafafa;
  }
  /* if you darkened these earlier, neutralize them */
  .header, .hero { background: #fff; }
}

/* ensure page text uses the ink color */
body { background: var(--bg); color: var(--ink); }
p, li, h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* safety: remove any accidental dimming */
main, .container, .essay, .reading { opacity: 1 !important; filter: none !important; }