/* ==========================================================================
   Shared site-wide styles: design tokens, reset, header/nav, mobile menu,
   footer. Page-specific styles (heroes, galleries, forms, etc.) stay in
   each page's own <style> block.
   ========================================================================== */

:root{
  --ink:#15130f;
  --ink-2:#1c1912;
  --bone:#f3efe6;
  --bone-dim:rgba(243,239,230,0.62);
  --amber:#6C93B8;
  --ember:#8c3b2e;
  --line:rgba(243,239,230,0.16);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* grain texture — used on pages that include <div class="grain"> */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- header / nav (default: sticky interior-page style) ---- */
header{
  position:sticky; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 5vw;
  background:rgba(21,19,15,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-family:'Fraunces',serif; font-weight:500; font-size:15px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--bone);
  text-decoration:none;
}
ul.links{display:flex; gap:34px; list-style:none;}
ul.links a{
  color:var(--bone); text-decoration:none; font-size:11.5px;
  letter-spacing:0.14em; text-transform:uppercase; font-weight:500;
  position:relative; padding-bottom:4px;
}
ul.links a.active{color:var(--amber);}
ul.links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--bone); transition:width 0.35s ease;
}
ul.links a:hover::after{width:100%;}

/* ---- mobile hamburger / close-X / full-screen nav ---- */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px; z-index:70;
  mix-blend-mode:normal; isolation:isolate;
}
.menu-toggle .bar{width:22px; height:1.5px; background:var(--bone); transition:all 0.25s ease; display:block;}
.menu-toggle .close-x{
  display:none; font-size:32px; line-height:1; color:var(--bone);
  font-family:'Inter',sans-serif; font-weight:300;
}
.menu-toggle.open .bar{display:none;}
.menu-toggle.open .close-x{display:block;}

.mobile-nav{
  position:fixed; inset:0; z-index:65; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; pointer-events:none; transition:opacity 0.35s ease;
}
.mobile-nav.open{opacity:1; pointer-events:auto;}
.mobile-nav a{
  font-family:'Fraunces',serif; font-size:30px; font-weight:400;
  color:var(--bone); text-decoration:none; letter-spacing:0.01em;
}
.mobile-nav a.active{color:var(--amber); font-style:italic;}

/* ---- footer ---- */
footer{
  padding:70px 6vw 50px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.footer-name{font-family:'Fraunces',serif; font-size:18px;}
.socials{display:flex; gap:22px;}
.socials a{color:var(--bone-dim); text-decoration:none; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; transition:color 0.3s;}
.socials a:hover{color:var(--amber);}
.footer-note{color:var(--bone-dim); font-size:11px; letter-spacing:0.06em;}

/* ---- shared mobile breakpoint rules ---- */
@media (max-width:820px){
  ul.links{display:none;}
  .menu-toggle{display:flex;}
  footer{flex-direction:column; align-items:flex-start;}
}