/* ============================================================
   DekoVägi - Design System
   Earthy-editorial: warm paper, deep olive, clay accent
   ============================================================ */

:root{
  /* Palette - warm, soft, romantic */
  --paper:        #F7F2EA;   /* warm cream background */
  --paper-2:      #F1E8DB;   /* slightly deeper cream */
  --ink:          #2B2520;   /* warm near-black */
  --ink-soft:     #6A6055;   /* muted body text */
  --olive:        #444C3B;   /* deep forest/olive - PRIMARY */
  --olive-deep:   #333B2C;   /* pressed/hover olive */
  --olive-2:      #626B52;   /* lighter olive */
  --sage:         #A98A5E;   /* gold - tertiary accent (was muted sage) */
  --clay:         #5E1F28;   /* deep burgundy (legacy accents) */
  --wine:         #8E2B39;   /* brighter burgundy - SECONDARY accent (eyebrows, italics) */
  --clay-deep:    #4A1820;
  --blush:        #E4C3AE;   /* soft blush, romantic accent */
  --blush-bg:     #F3E5DA;   /* pale blush wash */
  --line:         #E2D8C8;   /* hairline on paper */
  --line-dark:    rgba(247,242,234,.20);

  /* Type */
  --display: "Cormorant Garamond", Georgia, serif;
  --sans:    "Hanken Grotesk", system-ui, sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 88px);
  --maxw: 1480px;
  --radius: 5px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.72; font-weight:400;
  overflow-x:clip; /* NOT hidden: overflow-x:hidden breaks position:sticky (hero curtain) */
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ margin:0; font-weight:400; font-family:var(--display); line-height:1.04; letter-spacing:-.005em; }
.display-xl{ font-size:clamp(3.2rem, 9.5vw, 9.5rem); font-weight:300; letter-spacing:-.015em; }
.display-l{ font-size:clamp(2.6rem, 6vw, 5.4rem); font-weight:300; }
.display-m{ font-size:clamp(2rem, 4vw, 3.4rem); font-weight:400; }
.serif-quote{ font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(1.6rem, 3.2vw, 3rem); line-height:1.28; letter-spacing:-.01em; }

.eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em;
  font-size:.72rem; font-weight:600; color:var(--wine);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow.on-dark{ color:var(--blush); }
.eyebrow.on-dark .idx{ color:rgba(244,239,230,.55); }
.eyebrow .idx{ color:var(--sage); font-weight:500; }

.lead{ font-size:clamp(1.05rem,1.5vw,1.32rem); line-height:1.6; color:var(--ink-soft); }
.muted{ color:var(--ink-soft); }
em.it{ font-family:var(--display); font-style:italic; font-weight:400; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,11vh,160px); }
.section--tight{ padding-block:clamp(48px,7vh,96px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.bg-olive{ background:var(--olive); color:var(--paper); }
.bg-olive .muted{ color:rgba(244,239,230,.7); }
.bg-olive .rule{ background:var(--line-dark); }
.bg-paper2{ background:var(--paper-2); }
.bg-blush{ background:var(--blush-bg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.16em;
  padding:1.05em 1.8em; border-radius:var(--radius);
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--clay{ background:var(--olive); border-color:var(--olive); color:#fff; }
.btn--clay:hover{ background:var(--olive-deep); border-color:var(--olive-deep); color:#fff; }
.btn--on-dark{ background:var(--paper); border-color:var(--paper); color:var(--ink); }
.btn--on-dark:hover{ background:transparent; color:var(--paper); }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.link-underline{
  display:inline-flex; align-items:center; gap:.6em; position:relative;
  font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.16em;
  padding-bottom:.35em;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(1); transform-origin:left; transition:transform .45s var(--ease);
}
.link-underline:hover::after{ transform:scaleX(0); transform-origin:right; }
.link-underline .arr{ transition:transform .4s var(--ease); }
.link-underline:hover .arr{ transform:translateX(5px); }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--gutter); gap:2rem;
  transition:background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header.scrolled{
  background:rgba(244,239,230,.86); backdrop-filter:saturate(1.2) blur(14px);
  padding-block:.95rem; box-shadow:0 1px 0 var(--line);
}
.brand{ display:flex; align-items:center; line-height:1; }
.brand-logo{ display:block; height:28px; width:auto; }
.brand-logo--light{ display:none; }
.brand b{ font-weight:500; }
.brand .dot{ width:6px; height:6px; border-radius:50%; background:var(--olive); display:inline-block; transform:translateY(-2px); }
.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{ font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; font-weight:600;
  position:relative; padding:.3em 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--olive); transition:width .4s var(--ease); }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.header-right{ display:flex; align-items:center; gap:1.4rem; }
.lang-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; }
.lang-toggle button{ border:0; background:transparent; padding:.45em .85em; font-size:.72rem;
  font-weight:700; letter-spacing:.1em; color:var(--ink-soft); transition:.3s var(--ease); }
.lang-toggle button.active{ background:var(--ink); color:var(--paper); }

/* header over a dark hero - the cream logo/nav get their OWN soft scrim so they
   stay legible over ANY hero image, not just where the page gradient is dark */
.site-header.on-hero:not(.scrolled){ color:var(--paper); }
.site-header.on-hero:not(.scrolled)::before{
  content:""; position:absolute; left:0; right:0; top:0; height:calc(100% + 56px);
  z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,18,14,.55) 0%, rgba(20,18,14,.32) 45%, rgba(20,18,14,0) 100%);
}
.site-header.on-hero:not(.scrolled) .brand-logo--dark{ display:none; }
.site-header.on-hero:not(.scrolled) .brand-logo--light{ display:block;
  filter:drop-shadow(0 1px 10px rgba(20,18,14,.45)); }
.site-header.on-hero:not(.scrolled) .nav a{ text-shadow:0 1px 14px rgba(20,18,14,.5); }
.site-header.on-hero:not(.scrolled) .menu-btn{ filter:drop-shadow(0 1px 6px rgba(20,18,14,.45)); }
.site-header.on-hero:not(.scrolled) .brand .dot{ background:var(--blush); }
.site-header.on-hero:not(.scrolled) .lang-toggle{ border-color:rgba(247,242,234,.5); }
.site-header.on-hero:not(.scrolled) .lang-toggle button{ color:rgba(244,239,230,.85); }
.site-header.on-hero:not(.scrolled) .lang-toggle button.active{ background:var(--paper); color:var(--ink); }

/* Home has a SPLIT hero (cream left column, full-bleed photo right column / on
   top on mobile). A single text colour can't sit legibly on both, so the home
   header keeps a frosted cream bar from the very top - the dark logo + nav stay
   readable across the whole width, including over the photo. It quietly
   deepens into the scrolled state as you scroll. */
[data-page="home"] .site-header:not(.scrolled){
  background:rgba(247,242,234,.82); backdrop-filter:saturate(1.2) blur(12px);
}

/* mobile nav */
.menu-btn{ display:none; border:0; background:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; }
.menu-btn span{ width:24px; height:1.5px; background:currentColor; transition:.35s var(--ease); }
.mobile-nav{ position:fixed; inset:0; z-index:115; background:var(--olive); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; padding:var(--gutter);
  transform:translateY(-100%); transition:transform .6s var(--ease); }
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav a{ font-family:var(--display); font-size:clamp(2.2rem,9vw,4rem); font-weight:300;
  padding:.18em 0; border-bottom:1px solid var(--line-dark); }
.mobile-nav a .num{ font-family:var(--sans); font-size:.8rem; letter-spacing:.2em; color:var(--blush);
  vertical-align:super; margin-right:.6em; }

/* ============================================================
   Cart / inquiry indicator
   ============================================================ */
.cart-btn{ position:relative; display:inline-flex; align-items:center; gap:.5em;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600;
  border:1px solid var(--ink); border-radius:100px; padding:.6em 1.05em; background:transparent;
  transition:.35s var(--ease); }
.cart-btn:hover{ background:var(--ink); color:var(--paper); }
.cart-btn .count{ background:var(--olive); color:#fff; border-radius:100px; min-width:1.5em; height:1.5em;
  display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; padding:0 .3em; }
.on-hero:not(.scrolled) .cart-btn{ border-color:rgba(247,242,234,.55); color:var(--paper); }
.on-hero:not(.scrolled) .cart-btn:hover{ background:var(--paper); color:var(--ink); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ position:relative; z-index:2; background:var(--olive); color:var(--paper); padding-top:clamp(64px,9vh,120px); }
.site-footer a:hover{ color:var(--blush); }
.site-footer .muted{ color:rgba(244,239,230,.66); }
.site-footer .brand .dot{ background:var(--blush); }

/* pre-footer CTA section (injected by chrome.js on every page except contact) */
.page-cta{ position:relative; z-index:2; background:var(--paper); text-align:center;
  padding-block:clamp(90px,14vh,170px); }
.page-cta h2{ font-family:var(--display); font-size:clamp(2.8rem,7vw,6.2rem); font-weight:300;
  line-height:1.08; letter-spacing:-.01em; max-width:16ch; margin:1.4rem auto 2.6rem; }
.page-cta h2 em{ font-style:italic; color:var(--wine); font-weight:400; }
.page-cta .sub{ margin-top:2rem; font-size:.95rem; color:var(--ink-soft); }
.page-cta .sub a{ border-bottom:1px solid var(--line); transition:color .3s var(--ease), border-color .3s var(--ease); }
.page-cta .sub a:hover{ color:var(--olive); border-color:var(--olive); }

.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; align-items:start; }
.footer-grid h4{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em;
  font-size:.72rem; font-weight:700; color:rgba(244,239,230,.55); margin-bottom:1.3em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7em; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-block:2rem 2.4rem; font-size:.8rem; color:rgba(244,239,230,.6); }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

/* ============================================================
   Utility / shared bits
   ============================================================ */
.media{ position:relative; overflow:hidden; background:var(--paper-2); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.media.hoverable:hover img{ transform:scale(1.05); }
.tag{ display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.16em;
  font-weight:600; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:.4em .9em; }
.kicker-num{ font-family:var(--display); font-size:.95rem; color:var(--olive); font-style:italic; }

/* ============================================================
   v3 polish layer - sitewide refinements
   ============================================================ */
::selection{ background:var(--olive); color:#fff; }
.bg-olive ::selection, .site-footer ::selection{ background:var(--blush); color:var(--ink); }
:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; border-radius:2px; }
.btn{ border-radius:100px; white-space:nowrap; }
.nav a{ white-space:nowrap; }

/* motion vocabulary - shared with subpages, driven by assets/motion.js
   (the homepage drives the same classes from home-v3.js) */
.media-reveal img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease), transform 1.1s var(--ease); }
.media-reveal.in img{ clip-path:inset(0 0 0% 0); }
.title-reveal .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em; }
.title-reveal .wi{ display:inline-block; transform:translateY(118%); transition:transform 1.1s var(--ease); }
.title-reveal.go .wi{ transform:none; }
.peek-pill{
  position:fixed; left:0; top:0; z-index:95; pointer-events:none;
  background:var(--olive); color:#fff; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; padding:.85em 1.5em; border-radius:100px;
  opacity:0; transform:translate(-50%,-50%) scale(.7); transition:opacity .3s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.peek-pill.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* paper grain - quiet craft texture over everything */
body::after{
  content:""; position:fixed; inset:-50%; z-index:300; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:multiply;
}
@media print{ body::after{ display:none; } }

@media (max-width:900px){
  .nav, .header-right .cart-label{ display:none; }
  .menu-btn{ display:flex; }
  /* roomier language toggle on touch (matches the 44px menu button) */
  .lang-toggle button{ min-height:44px; display:inline-flex; align-items:center; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .footer-grid{ grid-template-columns:1fr; }
}