/* Shared design system: variables, typography, buttons, site chrome
   (header/nav/footer). Loaded on every page. Catalog-specific styles live in
   catalog.css, loaded only on the /catalog page. */

:root{
  --ink:#2B2420;
  --paper:#F4EFE6;
  --paper-light:#FBF7EF;
  --paper-deep:#EAE0CB;
  --card:#FFFFFF;
  --wine:#6E1F2E;
  --wine-dark:#4A141F;
  --gold:#A9824B;
  --forest:#3E4F33;
  --forest-dark:#2A3624;
  --slate:#6B6055;
  --line:#DDD3C4;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;
}

button, .btn{
  font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  padding:10px 18px;border-radius:2px;cursor:pointer;transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  display:inline-block;text-decoration:none;
}
button:hover, .btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px);}
button.primary, .btn.primary{background:var(--wine);border-color:var(--wine);color:#fff;}
button.primary:hover, .btn.primary:hover{background:var(--wine-dark);border-color:var(--wine-dark);}
button.forest, .btn.forest{background:var(--forest);border-color:var(--forest);color:#fff;}
button.forest:hover, .btn.forest:hover{background:var(--forest-dark);border-color:var(--forest-dark);}
button.ghost, .btn.ghost{border-color:var(--line);color:var(--slate);}
button.ghost:hover, .btn.ghost:hover{background:var(--slate);border-color:var(--slate);color:#fff;}
button.small{padding:5px 10px;font-size:11px;}
button:disabled{opacity:.5;cursor:not-allowed;}
button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--wine);outline-offset:2px;
}

/* Site header / nav */
.site-header{
  border-bottom:2px solid var(--ink);background:var(--paper-light);
  position:sticky;top:0;z-index:40;
  transition:box-shadow .2s ease;
}
.site-header-inner{
  max-width:1180px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:padding .2s ease;
}
.site-logo{display:flex;align-items:center;}
.site-logo img{height:46px;width:auto;display:block;transition:height .2s ease;}

/* Collapses slightly once the page is scrolled (toggled by public/js/site.js) */
.site-header.scrolled{box-shadow:0 4px 12px rgba(43,36,32,.1);}
.site-header.scrolled .site-header-inner{padding:9px 24px;}
.site-header.scrolled .site-logo img{height:30px;}
.site-nav{display:flex;align-items:center;gap:6px;}
.site-nav a{
  position:relative;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);text-decoration:none;padding:8px 12px;border-radius:20px;transition:.15s;
}
.site-nav a:hover{color:var(--ink);background:#fff;}
.site-nav a.active{color:var(--paper);background:var(--ink);}
.site-nav a::after{
  content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--wine);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.site-nav a:hover::after{transform:scaleX(1);}
.site-nav a.active::after{display:none;}
.nav-toggle{
  display:none;background:transparent;border:1.5px solid var(--ink);border-radius:2px;
  padding:7px 10px;font-size:16px;line-height:1;cursor:pointer;
}

@media (max-width:720px){
  .nav-toggle{display:block;}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:0 8px 16px rgba(43,36,32,.08);
  }
  .site-nav.open{display:flex;}
  .site-nav a{border-radius:0;padding:14px 24px;border-bottom:1px solid var(--line);}
  .site-nav a.active{background:var(--ink);}
}

/* Main content area + generic page patterns */
.site-main{flex:1;}
.container{max-width:1180px;margin:0 auto;padding:48px 24px 88px;}
.container.narrow{max-width:840px;}

/* Split hero: copy on one side, a visual (photo or gradient placeholder) on
   the other. Used on Home/About. Add .page-hero--plain for simple pages
   (Catalog/Privacy) that just want a heading, no visual column. */
.page-hero{padding:8px 0 44px;margin-bottom:44px;border-bottom:1px solid var(--line);}
.page-hero.page-hero--plain{padding:0 0 18px;margin-bottom:20px;}
.page-hero .hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}
.page-hero--plain .hero-grid{display:block;}
.page-hero .eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--wine);margin:0 0 10px;
}
.page-hero h1{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(32px, 5vw, 52px);margin:0 0 16px;line-height:1.05;letter-spacing:-.01em;
}
.page-hero--plain h1{font-size:clamp(28px, 4vw, 38px);}
.page-hero p{font-size:16.5px;color:var(--slate);max-width:560px;margin:0;line-height:1.65;}
.page-hero .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}

.hero-visual{
  position:relative;border-radius:6px;overflow:hidden;min-height:320px;
  box-shadow:0 18px 40px -16px rgba(43,36,32,.35);
}
.hero-visual img{width:100%;height:100%;min-height:320px;object-fit:cover;display:block;}
.hero-visual .caption{
  position:absolute;left:16px;bottom:14px;color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.5);opacity:.85;
}
/* Placeholder treatment for hero slots that don't have a real photo yet */
.hero-visual.placeholder{
  background:linear-gradient(155deg, var(--wine-dark) 0%, var(--wine) 55%, var(--gold) 130%);
  background-size:220% 220%;
  animation:heroPan 14s ease-in-out infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='white' fill-opacity='0.12'%3E%3Ccircle cx='20' cy='18' r='4'/%3E%3Ccircle cx='30' cy='25' r='4'/%3E%3Ccircle cx='40' cy='18' r='4'/%3E%3Ccircle cx='25' cy='34' r='4'/%3E%3Ccircle cx='35' cy='34' r='4'/%3E%3Ccircle cx='30' cy='44' r='4'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--wine-dark) 0%, var(--wine) 55%, var(--gold) 130%);
}
@keyframes heroPan{
  0%,100%{background-position:0% 0%, 0 0;}
  50%{background-position:100% 100%, 0 0;}
}

@media (max-width:900px){
  .page-hero .hero-grid{grid-template-columns:1fr;}
  .hero-visual, .hero-visual img{min-height:220px;}
}

/* Full-bleed video hero — autoplaying background video with the logo
   overlaid. Used at the top of Home. */
.video-hero{
  position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  height:58vh;min-height:340px;max-height:560px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:48px;background:var(--ink);
}
.video-hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.video-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(43,36,32,.4),rgba(43,36,32,.55));
}
.video-hero-logo{
  position:relative;z-index:1;width:min(560px, 72%);
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.45));
}

@media (max-width:640px){
  .video-hero{height:42vh;min-height:260px;margin-bottom:36px;}
  .video-hero-logo{width:min(320px, 78%);}
}

/* Full-bleed color/photo bands for visual rhythm between sections */
.band{
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  padding:64px 24px;
}
.band-inner{max-width:840px;margin:0 auto;text-align:center;}
.band-dark{background:var(--ink);color:var(--paper);}
.band-dark .eyebrow{color:var(--gold);}
.band-dark h2{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:clamp(24px, 3.4vw, 34px);line-height:1.3;margin:0;color:#fff;
}
.band-image{
  background-size:cover;background-position:center;color:#fff;
}
.band-image .band-inner{position:relative;z-index:1;}
.band-image h2{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:clamp(24px, 3.4vw, 36px);line-height:1.3;margin:0 0 8px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.band-image p{color:#EFE7D8;font-size:15px;margin:0;}

@media (max-width:640px){
  .band{padding:44px 20px;}
}

.prose{max-width:720px;font-size:15px;line-height:1.7;}
.prose h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:26px;margin:40px 0 14px;color:var(--ink);
}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 16px;}
.prose ul{margin:0 0 16px;padding-left:22px;}
.prose li{margin-bottom:6px;}
.prose a{color:var(--wine);}
.prose .note{
  font-size:13px;color:var(--slate);background:var(--card);border:1px solid var(--line);
  border-radius:4px;padding:12px 16px;margin-bottom:24px;
}

@media (max-width:640px){
  .container{padding:32px 16px 64px;}
}

/* Scroll-reveal utility (see public/js/site.js) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-visual.placeholder{animation:none;}
}

/* Site footer */
.site-footer{
  border-top:1px solid var(--line);margin-top:auto;padding:24px;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--slate);
}
.site-footer p{margin:4px 0;}
.site-footer a{color:var(--slate);text-decoration:underline;}
.site-footer a:hover{color:var(--ink);}