/* =========================================================================
   WADDESDON, British Living , Marketing CSS
   Type system unificato:
   - Cormorant Garamond  → tutti gli heading + italic typographic flourishes
   - Lora                → testo del corpo (paragrafi)
   - Inter               → UI (bottoni, eyebrow, meta, badge)
   - IM Fell English     → ornamenti decorativi (italico spaziato)
   ========================================================================= */

:root{
  /* Palette */
  --green:    #0E4D34;
  --green-d:  #073B25;
  --salvia:   #94A06E;
  --colza:    #E5C035;
  --cream:    #F4EAD5;
  --paper:    #FBF7EE;
  --ink:      #1A1612;
  --ink-soft: #3a342c;
  --stone:    #BFA478;
  --mahogany: #6F2A1C;
  --rose:     #D08782;

  /* Patterns */
  --p-manor:  url('/branding/patterns/pattern-manor.svg');
  --p-spring: url('/branding/patterns/pattern-garden-spring.svg');
  --p-autumn: url('/branding/patterns/pattern-garden-autumn.svg');

  /* Layout */
  --max:      1240px;
  --gutter:   20px;

  /* === TYPE SCALE === */
  --t-display:  clamp(46px, 8vw, 84px);   /* solo hero */
  --t-h2:       clamp(30px, 4.5vw, 48px); /* tutti gli h2 di sezione */
  --t-h3:       clamp(22px, 2.5vw, 26px); /* card / tile heading */
  --t-lead:     clamp(18px, 2vw, 21px);   /* intro / sotto-titoli italici */
  --t-body:     17px;                      /* testo del corpo, no clamp */
  --t-small:    15px;                      /* card body, footer link */
  --t-meta:     12px;                      /* eyebrow, ornament, meta, badge */
  --t-tiny:     11px;                      /* legal, fine print */
  --t-button:   13px;                      /* tutti i bottoni */

  /* Letter spacing */
  --ls-display: .08em;
  --ls-heading: .02em;
  --ls-eyebrow: .20em;
  --ls-ornament:.18em;
  --ls-button:  .14em;

  /* Line height */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.75;
  --lh-lead:    1.5;
  --lh-meta:    1.4;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; width:100%; max-width:100%; overflow-x:clip; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Lora', Georgia, serif;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

/* =========================================================================
   TIPOGRAFIA, regole globali
   ========================================================================= */

h1,h2,h3,h4{
  font-family:'Cormorant Garamond', serif;
  margin:0;
  line-height:var(--lh-heading);
  color:var(--green);
}

.h-display{
  font-weight:300;
  font-size:var(--t-display);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  text-transform:uppercase;
}
.h-section{
  font-weight:500;
  font-size:var(--t-h2);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
}
.h-card{
  font-weight:500;
  font-size:var(--t-h3);
  line-height:1.2;
}

/*
  Eyebrow + Ornament. Alias dello stesso stile.
  Tre font in tutto il sito: Cormorant (heading), Lora (body), Inter (UI).
  IM Fell English è riservato SOLO alla tagline del logo, dove a 16px
  funziona. A misure piccole è illeggibile, non lo usiamo altrove.
*/
.eyebrow,
.ornament{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:600;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--mahogany);
  line-height:1;
}

/* Lead/intro paragraph (italico Cormorant). UNICA implementazione. */
.lead{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:var(--t-lead);
  line-height:var(--lh-lead);
  color:var(--mahogany);
  margin:0;
}

/* Frase italica Cormorant in linea col testo (es. "Waddesdon nasce da..."). */
.signature{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:calc(var(--t-body) + 4px);
  line-height:1.45;
  color:var(--green);
  margin:0;
}

/* Meta info (date, durata lettura, "quando esce"). UNICA implementazione. */
.meta-line{
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mahogany);
  line-height:var(--lh-meta);
}

/* =========================================================================
   BOTTONI, una sola scala
   ========================================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:var(--t-button);
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  padding:14px 26px;
  gap:10px;
  border:1.5px solid currentColor;
  border-radius:0;
  transition:all .2s ease;
  min-height:50px;
}
.btn.primary{ background:var(--green); color:var(--cream); border-color:var(--green); }
.btn.primary:hover{ background:var(--ink); border-color:var(--ink);}
.btn.ghost{ color:var(--green); }
.btn.ghost:hover{ background:var(--green); color:var(--cream); }
.btn.on-dark{ color:var(--cream); }
.btn.on-dark:hover{ background:var(--cream); color:var(--green); }
.btn.gold{ background:var(--colza); color:var(--green); border-color:var(--colza); }
.btn.gold:hover{ background:var(--green); color:var(--colza); border-color:var(--colza); }

/* =========================================================================
   TOP NAV
   ========================================================================= */

nav.top{ position:sticky; top:0; z-index:50; background:var(--green); color:var(--cream); border-bottom:1px solid rgba(255,255,255,.08); }
nav.top .bar{ display:flex; align-items:center; padding:10px var(--gutter); gap:12px; max-width:var(--max); margin:0 auto; }
nav.top .menu-btn{ background:transparent; border:1px solid rgba(244,234,213,.35); color:var(--cream); padding:0; width:40px; height:40px; min-width:40px; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; order:3; margin-left:auto; }
nav.top .menu-btn:hover{ border-color:var(--colza); color:var(--colza); }
nav.top .menu-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
nav.top .logo{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; color:var(--cream); text-decoration:none; }
nav.top .logo-emblem{ width:38px; height:38px; flex-shrink:0; }
nav.top .logo-text{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; min-width:0; }
nav.top .logo .wm{ font-family:'Cormorant Garamond', serif; font-weight:300; font-size:20px; line-height:1; letter-spacing:.10em; text-transform:uppercase; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
nav.top .logo .tagline{ display:none; font-family:'IM Fell English', serif; font-style:italic; font-size:14px; line-height:1; letter-spacing:.06em; color:var(--colza); white-space:nowrap; }
nav.top .nav-cta{
  display:none;
  flex-shrink:0;
  margin-left:auto;
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:600;
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  color:var(--green);
  background:var(--colza);
  padding:10px 16px;
  min-height:42px;
  display:flex;
  align-items:center;
}
nav.top .menu{
  display:none;
  gap:32px;
  margin-left:auto;
  margin-right:24px;
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
nav.top .menu a{ opacity:.9; }
nav.top .menu a:hover{ opacity:1; color:var(--colza); }

/* =========================================================================
   HERO
   ========================================================================= */

section.hero{ position:relative; min-height: 78vh; max-height: 760px; color:var(--cream); display:flex; align-items:flex-end; overflow:hidden; }
section.hero .photo{ position:absolute; inset:0; z-index:1; background:#1a2820; }
section.hero .photo img{ width:100%; height:100%; object-fit:cover; object-position:center; }
section.hero .overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,.1) 100%); }
section.hero .content{ position:relative; z-index:3; width:100%; padding:30px var(--gutter) 44px; }
section.hero .content .wrap{ padding:0; }

section.hero .countdown-badge{
  display:inline-block;
  background:var(--colza);
  color:var(--green);
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:8px 14px;
  margin-bottom:24px;
}
section.hero h1{
  color:var(--cream);
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  font-size:var(--t-display);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  text-transform:uppercase;
  margin-bottom:18px;
}
section.hero .payoff{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:var(--t-lead);
  line-height:var(--lh-lead);
  color:var(--colza);
  margin:0 0 28px;
  max-width:600px;
}
section.hero .ctas{ display:flex; flex-direction:column; gap:10px; max-width:340px; }
section.hero .ctas .btn{ width:100%; }

.strip-divider{ height:50px; background-image: var(--p-manor); background-size: 200px 200px; background-repeat:repeat; background-color: var(--green); }

/* =========================================================================
   SEZIONI: stile base condiviso
   ========================================================================= */

section.about,
section.collezioni,
section.ritual,
section.blog-feed{ padding:64px 0; }

/* Le sezioni con .head centrato (collezioni, blog-feed, coming) */
section .head{
  text-align:center;
  max-width:680px;
  margin:0 auto 36px;
  padding:0 var(--gutter);
}
section .head .eyebrow,
section .head .ornament{ display:block; margin-bottom:14px; }
section .head h2{ margin-bottom:14px; }

/* Tutti i body p delle sezioni hanno lo stesso trattamento */
section.about p,
section.ritual p,
section.coming p:not(.lead){
  font-size:var(--t-body);
  line-height:var(--lh-body);
  margin:0 0 16px;
  color:var(--ink);
}
section.about p em,
section.ritual p em{
  color:var(--mahogany);
  font-style:italic;
}

/* =========================================================================
   ABOUT
   ========================================================================= */

section.about{ background:var(--paper); }
section.about .grid{ display:grid; grid-template-columns: 1fr; gap:30px; }
section.about .image-wrap{ aspect-ratio: 4 / 5; overflow:hidden; background:var(--cream); }
section.about .image-wrap img{ width:100%; height:100%; object-fit:cover; }
section.about .copy .eyebrow{ display:block; margin-bottom:16px; }
section.about h2{
  font-weight:500;
  font-size:var(--t-h2);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  margin:0 0 22px;
}
section.about .signature{ margin-top:8px; }
section.about .cta-wrap{ margin-top:28px; }

/* =========================================================================
   COMING SOON
   ========================================================================= */

section.coming{
  background:var(--cream);
  padding:80px 0;
  text-align:center;
  border-top:1px solid var(--stone);
  border-bottom:1px solid var(--stone);
}
section.coming .month-mark{
  display:block;
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:600;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--mahogany);
  margin-bottom:18px;
}
section.coming h2{
  font-weight:400;
  font-size:var(--t-display);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 20px;
}
section.coming .lead{
  max-width:640px;
  margin:0 auto 28px;
}
section.coming p:not(.lead){
  max-width:580px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:32px;
}

/* =========================================================================
   COLLEZIONI
   ========================================================================= */

section.collezioni{ background:var(--paper); }

.coll-grid{ display:grid; grid-template-columns:1fr; gap:14px; padding:0 var(--gutter); }
.coll-card{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; display:block; background:var(--green); }
.coll-card .pat{ position:absolute; inset:0; z-index:1; background-repeat:repeat; background-size:240px 240px; }
.coll-card.spring .pat{ background-image: var(--p-spring); }
.coll-card.manor .pat{  background-image: var(--p-autumn); }
.coll-card.house .pat{  background-image: var(--p-manor); }
.coll-card .veil{ position:absolute; inset:0; z-index:2; background:linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%); }
.coll-card .body{
  position:absolute;
  left:18px; right:18px; bottom:18px;
  z-index:3;
  background:var(--cream);
  padding:20px 22px;
  border-top:3px solid var(--colza);
}
.coll-card .body h3{
  color:var(--green);
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:var(--t-h3);
  line-height:1.15;
  letter-spacing:.005em;
  margin:0 0 10px;
}
.coll-card .body p{
  font-family:'Lora', serif;
  font-style:italic;
  font-size:var(--t-small);
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 12px;
}
.coll-card .body .when{
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:600;
  letter-spacing:var(--ls-ornament);
  text-transform:uppercase;
  color:var(--mahogany);
}

/* =========================================================================
   RITUAL
   ========================================================================= */

section.ritual{ background:var(--paper); }
section.ritual .grid{ display:grid; grid-template-columns:1fr; gap:30px; padding:0 var(--gutter); }
section.ritual .image-wrap{ aspect-ratio: 5 / 4; overflow:hidden; background:var(--cream); }
section.ritual .image-wrap img{ width:100%; height:100%; object-fit:cover; }
section.ritual .copy .eyebrow{ display:block; margin-bottom:16px; }
section.ritual h2{
  font-weight:500;
  font-size:var(--t-h2);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  margin:0 0 22px;
}
section.ritual .cta-wrap{ margin-top:24px; }

/* =========================================================================
   BLOG FEED
   ========================================================================= */

section.blog-feed{ background:var(--cream); }

.blog-grid{ display:grid; grid-template-columns:1fr; gap:18px; padding:0 var(--gutter); }
.post{
  background:var(--paper);
  border:1px solid var(--stone);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.post:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(14,77,52,.10); }
.post .img-wrap{ aspect-ratio: 16/10; overflow:hidden; background:var(--salvia); }
.post .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.post .body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.post .topic{
  display:block;
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--mahogany);
  margin:0 0 12px;
}
.post h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:var(--t-h3);
  line-height:1.2;
  margin:0 0 12px;
  color:var(--green);
}
.post .excerpt{
  font-family:'Lora', serif;
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 16px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.post .meta{
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--mahogany);
  padding-top:12px;
  border-top:1px solid var(--stone);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.blog-cta{ text-align:center; margin-top:36px; }

/* =========================================================================
   NEWSLETTER
   ========================================================================= */

section.newsletter{ position:relative; color:var(--cream); padding:80px var(--gutter); overflow:hidden; }
section.newsletter::before{ content:''; position:absolute; inset:0; z-index:1; background-image: var(--p-spring); background-size: 320px 320px; background-repeat:repeat; background-color: var(--cream); }
section.newsletter::after{ content:''; position:absolute; inset:0; z-index:2; background:rgba(0,0,0,.20); }
section.newsletter .content{
  position:relative;
  z-index:3;
  max-width:580px;
  margin:0 auto;
  text-align:center;
  background:rgba(14,77,52,.92);
  border:1px solid var(--colza);
  padding:44px 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
section.newsletter .ornament{
  display:block;
  margin-bottom:18px;
  color:var(--colza);
  font-size:13px;
  letter-spacing:.22em;
}
section.newsletter h2{
  color:var(--cream);
  font-weight:500;
  font-size:var(--t-h2);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  margin:0 0 16px;
}
section.newsletter p{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:var(--t-lead);
  line-height:var(--lh-lead);
  color:var(--cream);
  opacity:.95;
  margin:0 0 32px;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
section.newsletter form{ display:flex; flex-direction:column; gap:10px; }
section.newsletter input[type=email]{
  width:100%;
  padding:16px 18px;
  background:var(--cream);
  color:var(--ink);
  border:1.5px solid var(--colza);
  font-family:'Lora', serif;
  font-size:var(--t-body);
  outline:none;
  min-height:54px;
}
section.newsletter input[type=email]::placeholder{ color:var(--mahogany); opacity:.7; }
section.newsletter button{
  padding:16px 28px;
  background:var(--colza);
  color:var(--green);
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:var(--t-button);
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  border:1.5px solid var(--colza);
  min-height:54px;
}
section.newsletter button:hover{ background:var(--cream); border-color:var(--cream); }
section.newsletter .privacy{
  font-family:'Inter', sans-serif;
  font-size:var(--t-tiny);
  font-weight:500;
  letter-spacing:.08em;
  color:var(--colza);
  opacity:.85;
  margin-top:18px;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

footer.site{ background:var(--ink); color:var(--cream); padding:54px 0 24px; border-top:4px solid var(--colza); }
footer.site .grid{ display:grid; grid-template-columns:1fr; gap:34px; padding:0 var(--gutter); margin:0 auto 40px; max-width:var(--max); width:100%; }
footer.site .brand .logo{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
footer.site .brand .logo-emblem{ width:54px; height:54px; }
footer.site .brand .logo-text{ display:flex; flex-direction:column; align-items:center; gap:6px; }
footer.site .brand .wm{ font-family:'Cormorant Garamond', serif; font-weight:300; font-size:28px; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); }
footer.site .brand .tagline{ font-family:'IM Fell English', serif; font-style:italic; font-size:17px; line-height:1; letter-spacing:.06em; color:var(--colza); }
footer.site .brand p{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:calc(var(--t-body) - 1px);
  line-height:1.55;
  color:var(--colza);
  max-width:300px;
  margin:0;
}
footer.site .col h4{
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:600;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--colza);
  margin:0 0 16px;
}
footer.site .col ul{ margin:0; padding:0; list-style:none; }
footer.site .col ul li{ margin-bottom:10px; }
footer.site .col ul li a{
  font-family:'Lora', serif;
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--cream);
  opacity:.85;
}
footer.site .col ul li a:hover{ color:var(--colza); opacity:1; }
footer.site .bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px var(--gutter) 0;
  max-width:var(--max);
  margin:0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  font-family:'Inter', sans-serif;
  font-size:var(--t-tiny);
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.6;
}

/* =========================================================================
   DRAWER (mobile menu)
   ========================================================================= */

.drawer{ position:fixed; top:0; left:0; bottom:0; width:84vw; max-width:340px; background:var(--green); color:var(--cream); padding:24px 20px 30px; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); z-index:100; overflow-y:auto; border-right:3px solid var(--colza); }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,.12); }
.drawer-head .wm{
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  font-size:20px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream);
}
.drawer-close{ background:transparent; border:none; color:var(--cream); width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; padding:0; cursor:pointer; }
.drawer nav{ display:flex; flex-direction:column; gap:0; }
.drawer nav a{
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  font-size:24px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cream);
}
.drawer nav a:hover{ color:var(--colza); }
.drawer nav .sub{
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.drawer nav .sub a{
  padding:6px 0;
  border:none;
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:.10em;
  color:var(--colza);
  opacity:.9;
  text-transform:uppercase;
}
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:90; }
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }
body.locked{ overflow:hidden; }

/* =========================================================================
   POPUP NEWSLETTER
   ========================================================================= */

.popup-bd{ position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.popup-bd.open{ opacity:1; pointer-events:auto; }
.popup{ position:relative; width:100%; max-width:460px; background:var(--cream); border:1px solid var(--stone); box-shadow: 0 30px 60px rgba(0,0,0,.45); transform:translateY(20px) scale(.98); transition:transform .3s ease; overflow:hidden; }
.popup-bd.open .popup{ transform:translateY(0) scale(1); }
.popup .top-strip{ height:6px; background-image: var(--p-spring); background-size: 180px 180px; }
.popup .close{ position:absolute; top:8px; right:8px; background:transparent; border:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; color:var(--ink); cursor:pointer; padding:0; z-index:2; }
.popup .body{ padding:36px 28px 28px; text-align:center; }
.popup .badge{
  display:inline-block;
  background:var(--colza);
  color:var(--green);
  font-family:'Inter', sans-serif;
  font-size:var(--t-meta);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  padding:7px 14px;
  margin-bottom:20px;
}
.popup h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:32px;
  line-height:1.1;
  color:var(--green);
  margin:0 0 14px;
}
.popup .lead{
  color:var(--mahogany);
  margin:0 0 24px;
}
.popup form{ display:flex; flex-direction:column; gap:10px; }
.popup input[type=email]{
  width:100%;
  padding:14px 16px;
  background:var(--paper);
  color:var(--ink);
  border:1.5px solid var(--stone);
  font-family:'Lora', serif;
  font-size:16px;
  outline:none;
  min-height:50px;
}
.popup input[type=email]:focus{ border-color:var(--green); }
.popup button[type=submit]{
  padding:14px 18px;
  background:var(--green);
  color:var(--cream);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:var(--t-button);
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  border:1.5px solid var(--green);
  min-height:50px;
}
.popup .consent{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:14px;
  text-align:left;
  font-family:'Inter', sans-serif;
  font-size:var(--t-tiny);
  line-height:1.55;
  color:var(--ink-soft);
}
.popup .consent input[type=checkbox]{ margin-top:3px; flex-shrink:0; }
.popup .consent a{ color:var(--green); text-decoration:underline; }
.popup .footer-note{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--stone);
  font-family:'Inter', sans-serif;
  font-size:var(--t-tiny);
  color:var(--mahogany);
  letter-spacing:.06em;
}
.popup .success{ display:none; text-align:center; }
.popup.is-success .form-state{ display:none; }
.popup.is-success .success{ display:block; }
.popup .success h3{ color:var(--green); margin-bottom:12px; }
.popup .success .code-box{
  margin:20px auto;
  padding:14px 20px;
  background:var(--green);
  color:var(--colza);
  font-family:'Inter', monospace;
  font-size:18px;
  font-weight:700;
  letter-spacing:.18em;
  border:1px solid var(--colza);
  display:inline-block;
}
.popup .success p{ font-family:'Lora', serif; font-size:var(--t-small); color:var(--ink-soft); margin:0; }

/* =========================================================================
   BREAKPOINT, tablet
   ========================================================================= */

@media (min-width: 700px){
  :root{ --gutter: 32px; }
  section.hero .ctas{ flex-direction:row; gap:14px; max-width:none; }
  section.hero .ctas .btn{ width:auto; }
  section.about, section.collezioni, section.ritual, section.blog-feed, section.coming{ padding:88px 0; }
  section.about .grid, section.ritual .grid{ grid-template-columns: 1fr 1fr; gap:50px; align-items:center; }
  .coll-grid{ grid-template-columns: repeat(3, 1fr); gap:18px; }
  .coll-card{ aspect-ratio: 3/4; }
  .blog-grid{ grid-template-columns: repeat(3, 1fr); gap:20px; }
  section.newsletter{ padding:96px 0; }
  section.newsletter form{ flex-direction:row; gap:0; }
  section.newsletter input[type=email]{ border-right:none; }
  section.newsletter button{ padding:0 28px; flex-shrink:0; }
  footer.site .grid{ grid-template-columns: 2fr 1fr 1fr 1fr; gap:30px; }
  footer.site .brand .logo{ justify-content:flex-start; }
  footer.site .brand .logo-text{ align-items:flex-start; }
  footer.site .bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
  .popup .body{ padding:42px 36px 32px; }
}

/* =========================================================================
   BREAKPOINT, desktop
   ========================================================================= */

@media (min-width: 1100px){
  :root{ --gutter: 40px; }
  nav.top .menu-btn{ display:none; }
  nav.top .menu-btn{ display:none; }
  nav.top .menu{ display:flex; }
  nav.top .logo{ flex:initial; gap:14px; }
  nav.top .logo-emblem{ width:50px; height:50px; }
  nav.top .logo .wm{ font-size:26px; letter-spacing:.12em; }
  nav.top .logo .tagline{ display:block; font-size:16px; }
  nav.top .logo-text{ align-items:center; gap:5px; }
  nav.top .nav-cta{ display:inline-block; margin-left:0; }
  section.about, section.collezioni, section.ritual, section.blog-feed{ padding:112px 0; }
  section.coming{ padding:120px 0; }
  section.about .grid{ gap:80px; }
  section.hero{ min-height:88vh; }
  section.newsletter{ padding:120px 0; }
  .drawer, .drawer-backdrop{ display:none; }
}