/* Shared chrome: design tokens, base reset, header/nav, footer, and the
   mobile dropdown menu. Page-specific CSS stays inline in each page's <style>,
   which loads after this file so a page can override any value below. */

:root{
  --ivory:#f5eedf; --parchment:#e8dcc0; --linen:#ece1c7;
  --clay:#b84a2c; --clay-dark:#8e2f1c; --wine:#5b1a1f;
  --ochre:#c9892f; --ochre-dark:#9a6418;
  --forest:#2b4432; --forest-dark:#1a2c1f;
  --bark:#3a2a1d; --ink:#1f1b16; --stone:#8a7f6b;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Cardo",Georgia,serif; color:var(--bark);
  background:var(--parchment);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg stroke='%233a2a1d' stroke-width='1' opacity='0.05'%3E%3Cline x1='4' y1='4' x2='22' y2='22'/%3E%3Cline x1='22' y1='4' x2='4' y2='22'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

.altita{height:24px; width:100%; display:block;}

/* nav (shared header) */
header.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 7vw; border-bottom:1px solid rgba(58,42,29,.18);
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--parchment) 92%, transparent);
  backdrop-filter:saturate(1.1) blur(6px);
}
.brand{line-height:1; flex-shrink:0;}
.brand b{font-size:21px; font-weight:700; letter-spacing:.01em; display:block; white-space:nowrap;}
.brand span{font-family:"Inter",sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); white-space:nowrap;}
.nav nav{display:flex; gap:26px;}
.nav nav a{font-family:"Inter",sans-serif; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--bark); opacity:.8;}
.nav nav a.active{color:var(--clay-dark); opacity:1; border-bottom:2px solid var(--clay-dark); padding-bottom:3px;}
.nav nav a:hover{opacity:1;}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; margin:-8px; color:var(--bark);}
.nav-toggle svg{width:28px; height:28px; display:block;}
.nav-right{display:flex; align-items:center; gap:22px;}
.theme-toggle{background:none; border:0; cursor:pointer; padding:8px; margin:-8px; color:var(--bark); display:inline-flex; align-items:center;}
.theme-toggle svg{width:16px; height:16px; display:block; transform:translateY(-2px);}

/* footer */
footer.visit{margin-top:84px; background:var(--bark); color:var(--ivory);}
footer .vwrap{max-width:1180px; margin:0 auto; padding:64px 7vw; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px;}
footer h3{font-size:30px; font-weight:700; margin-bottom:6px;}
footer .tag{font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ochre);}
footer .lab{font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ochre); margin-bottom:12px;}
footer .row{font-family:"Inter",sans-serif; font-size:14.5px; color:var(--parchment); margin-bottom:6px; line-height:1.55;}
footer .credit{border-top:1px solid rgba(245,238,223,.15); padding:22px 7vw; font-family:"Inter",sans-serif; font-size:12.5px; color:var(--stone); text-align:center; letter-spacing:.04em;}

/* mobile chrome: header collapses to a dropdown menu that slides down */
@media (max-width:820px){
  footer .vwrap{grid-template-columns:1fr; gap:28px;}
  .nav-toggle{display:block;}
  .nav nav{position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; gap:0; padding:6px 7vw 14px; background:color-mix(in srgb, var(--parchment) 97%, transparent); backdrop-filter:saturate(1.1) blur(6px); -webkit-backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid rgba(58,42,29,.18); box-shadow:0 16px 32px rgba(0,0,0,.16); z-index:60; opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility .2s;}
  .nav nav.open{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
  .nav nav a{font-size:15px; letter-spacing:.08em; padding:14px 2px; opacity:1; border-bottom:1px solid rgba(58,42,29,.1);}
  .nav nav a:last-child{border-bottom:none;}
  .nav nav a.active{color:var(--clay-dark); border-bottom:1px solid rgba(58,42,29,.1); padding-bottom:14px;}
}

/* ============================================================
   Dark theme. JS always sets data-theme on <html> (from
   localStorage or the OS prefers-color-scheme), so only the
   [data-theme="dark"] overrides are needed here.

   The palette tokens are named by colour, not by role, and a
   few (--bark, --parchment) double as both text and surface.
   So we flip the tokens to their dark-mode values, then add a
   handful of overrides where a flipped token was being used as
   a background on the already-dark sections (footer, CTAs).
   ============================================================ */
[data-theme="dark"]{
  --parchment:#1a1510;   /* page background — matched to the Vercel dark base */
  --linen:#241b11;       /* minor surfaces (altița rect, media tiles) */
  --ivory:#ece1d0;       /* light foreground — kept light */
  --bark:#e8ddd0;        /* body text — flipped to light, brightened to match Vercel */
  --ink:#f4ece0;         /* headings */
  --stone:#9b8c78;       /* muted text */
  --clay:#d4694a;        /* accent (buttons) — brightened for dark */
  --clay-dark:#e27d57;   /* active link / accent text */
  --wine:#df9077;        /* emphasis text */
  --ochre:#d6a253;       /* labels / eyebrows */
  --ochre-dark:#bd8a3e;
  --forest:#83b276;      /* link text — brightened */
  --forest-dark:#15281c; /* dark CTA background — stays dark */
}
/* Layered dark surfaces (mirrors the Vercel depth scale):
   footer/CTA = sunken (darkest anchor); collrow grid = raised (lighter). */
[data-theme="dark"] footer.visit{background:#120f0a;}
[data-theme="dark"] .collrow,
[data-theme="dark"] .collrow .cell{background:#211a12;}
/* light text on those sections that referenced --parchment (now dark) */
[data-theme="dark"] footer .row,
[data-theme="dark"] .collrow .cell p,
[data-theme="dark"] .cta-text p,
[data-theme="dark"] .poem p,
[data-theme="dark"] .hero .sub{color:#cfc2ad;}
/* dark mode: replace the woven texture with the Vercel-style hero wash —
   two soft radial glows (warm clay centre-left + green top-right) plus a
   faint diagonal hairline pattern, anchored to the top band of the page. */
[data-theme="dark"] body{
  background-image:
    radial-gradient(closest-side, color-mix(in srgb, var(--clay) 22%, transparent), transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--forest) 16%, transparent), transparent),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg stroke='%23e8ddd0' stroke-width='1' opacity='0.04'%3E%3Cline x1='4' y1='4' x2='22' y2='22'/%3E%3Cline x1='22' y1='4' x2='4' y2='22'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat, repeat;
  background-size:1200px 820px, 950px 680px, 26px 26px;
  background-position:6% 1080px, 94% 820px, 0 0;
}
/* lighten hairline borders so they read on dark surfaces */
[data-theme="dark"] header.nav,
[data-theme="dark"] .nav nav{border-bottom-color:rgba(245,238,223,.14);}

/* Lightbox: click any photo to view it full-frame at full resolution.
   Markup is injected by the shared script in footer.html. */
img.zoomable{cursor:zoom-in;}
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(15,12,9,.92);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox img{
  max-width:min(1400px, 95vw); max-height:92vh;
  object-fit:contain; border-radius:2px; cursor:zoom-out;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lb-close{
  position:absolute; top:18px; right:22px; width:44px; height:44px;
  border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.lb-close:hover{background:rgba(255,255,255,.24);}
@media (max-width:640px){ .lb-close{top:10px; right:12px;} }