/* Decadent Teas Italia — foundations */

:root{
  --ground:#F3EEE3;
  --card:#FBF8F1;
  --dark:#0F0D0A;
  --ink:#171410;
  --ink-soft:#4A4438;
  --muted:#746B5D;
  --line:#DCD3C2;
  --line-dark:#2A251D;
  --gold:#96793E;
  /* The brand gold clears 3:1 but not 4.5:1 on the ivory ground, so the
     letterspaced labels take a darker cut of the same hue. --gold stays
     exactly as the brand sheet has it wherever it is a colour, not text. */
  --gold-text:#826936;
  --gold-soft:#C4A566;

  /* Cormorant Garamond Bold carries the headings, Jost everything else.
     Vonca, the brand's other face, is present as traced outlines in the logo
     artwork, so no licensed webfont is needed for the page to render as drawn. */
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-display-weight:700;
  --font-sans:'Jost',system-ui,sans-serif;

  --gutter:7vw;
  --ease:cubic-bezier(.22,.61,.36,1);
  --head-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-sans);font-weight:300;
  font-size:16px;line-height:1.7;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{margin:0;font-weight:400;line-height:1.14;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Off screen until tabbed to, then it lands over the announcement bar. */
.skip-link{
  position:fixed;top:-60px;left:50%;transform:translateX(-50%);z-index:100;
  background:var(--dark);color:var(--card);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:12px 22px;transition:top .25s var(--ease);
}
.skip-link:focus{top:0}

/* ---------- type ---------- */
.display{font-family:var(--font-display);font-weight:var(--font-display-weight);letter-spacing:.004em}
.display em{font-style:italic;color:var(--gold)}

.eyebrow{
  font-size:10.5px;font-weight:400;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);
}
.eyebrow.gold{color:var(--gold-text)}

.lede{font-size:17px;line-height:1.75;color:var(--ink-soft);max-width:54ch}

.rule-dot{display:flex;align-items:center;gap:14px}
.rule-dot::before,.rule-dot::after{content:"";height:1px;width:46px;background:var(--gold-soft);opacity:.75}
.rule-dot i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold);font-style:normal}

.cta-line{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  display:inline-flex;flex-direction:column;gap:7px;width:max-content;
}
.cta-line::after{content:"";height:1px;background:currentColor;width:100%;transform-origin:left;transition:transform .5s var(--ease)}
.cta-line:hover::after{transform:scaleX(.55)}

/* ---------- monogram ---------- */
.mono-badge{
  display:block;width:64px;height:64px;background:var(--gold-soft);
  -webkit-mask:url("../img/monogram-seal.svg") no-repeat center/contain;
          mask:url("../img/monogram-seal.svg") no-repeat center/contain;
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:90;background:var(--dark);color:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .8s var(--ease),visibility .8s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.pre-mono{
  display:block;width:88px;height:88px;background:var(--gold-soft);
  -webkit-mask:url("../img/monogram.svg") no-repeat center/contain;
          mask:url("../img/monogram.svg") no-repeat center/contain;
}
.pre-word{
  display:block;width:min(250px,54vw);aspect-ratio:402/38;
  background:var(--gold-soft);
  -webkit-mask:url("../img/wordmark-line.svg") no-repeat center/contain;
          mask:url("../img/wordmark-line.svg") no-repeat center/contain;
}

/* ---------- header ---------- */
.topbar{
  background:var(--dark);color:var(--gold-soft);text-align:center;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  padding:11px var(--gutter);
}
.site-head{
  position:sticky;top:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px var(--gutter);min-height:var(--head-h);
  background:var(--ground);transition:box-shadow .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-solid{
  background:rgba(243,238,227,.95);backdrop-filter:blur(9px);
  border-bottom-color:var(--line);
}

.brand{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink)}
.brand-mark{
  display:block;width:112px;aspect-ratio:262/92;
  background:currentColor;
  -webkit-mask:url("../img/wordmark-stacked.svg") no-repeat center/contain;
          mask:url("../img/wordmark-stacked.svg") no-repeat center/contain;
}
.brand-sub{font-size:8px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);padding-left:.42em}

.main-nav{grid-column:1;grid-row:1;display:flex;gap:26px;align-items:center}
.main-nav a,.head-contact{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .35s,color .35s;
}
.main-nav a:hover,.head-contact:hover{color:var(--ink);border-bottom-color:var(--gold)}
.head-contact{grid-column:3;justify-self:end}

.menu-toggle{grid-column:1;grid-row:1;display:none;width:26px;height:14px;position:relative}
.menu-toggle span{position:absolute;left:0;width:100%;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.menu-toggle span:first-child{top:2px}
.menu-toggle span:last-child{bottom:2px}

/* ---------- overlay menu ---------- */
.overlay-menu{
  position:fixed;inset:0;z-index:60;background:var(--dark);color:var(--card);
  display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:0 var(--gutter);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.overlay-menu.is-open{opacity:1;visibility:visible}
.overlay-close{position:absolute;top:22px;right:var(--gutter);font-size:30px;line-height:1;color:var(--card)}
.overlay-nav{display:flex;flex-direction:column;gap:20px}
.overlay-nav a{
  font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:.04em;
  color:var(--card);transition:color .35s;
}
.overlay-nav a:hover{color:var(--gold-soft)}
.overlay-foot{
  display:flex;align-items:center;gap:18px;
  border-top:1px solid var(--line-dark);padding-top:24px;
}
.overlay-foot p{font-size:12.5px;line-height:1.6;color:#B7AD97;max-width:34ch}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0)*55ms)}
.reveal.is-in{opacity:1;transform:none}
.reveal-line{opacity:0;animation:fadeUp 1s .7s var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
/* Three zones rather than two: with the newsletter and product directories
   gone, the mockup's two-column footer left most of the width empty. */
.site-foot{
  background:var(--dark);color:#B7AD97;
  padding:72px var(--gutter) 40px;
  display:grid;gap:48px 56px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.9fr);
  align-items:start;
}
.foot-brand{display:flex;flex-direction:column;gap:20px}
.foot-brand p{font-size:13px;line-height:1.8}

.foot-nav{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);
  gap:13px 44px;justify-content:start;align-content:start;
}
.foot-nav a{
  font-size:13px;color:#B7AD97;width:max-content;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .35s,border-color .35s;
}
.foot-nav a:hover{color:var(--card);border-bottom-color:var(--gold-soft)}

.foot-reach{display:flex;flex-direction:column;gap:12px}
.foot-reach p{font-size:13px;line-height:1.8}
.foot-mail{
  font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--gold-soft);
  width:max-content;padding-bottom:3px;border-bottom:1px solid #3A3327;
  transition:border-color .35s;
}
.foot-mail:hover{border-bottom-color:var(--gold-soft)}
.foot-place{color:#837964}

.foot-legal{
  grid-column:1/-1;border-top:1px solid var(--line-dark);padding-top:24px;margin-top:8px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#837964;
}

/* The letterspaced micro-labels are an editorial device that reads well at
   desktop size and stops being legible on a phone. Everything under 11px gets
   lifted, and the announcement bar loses enough tracking to hold one line. */
@media (max-width:700px){
  .topbar{font-size:9px;letter-spacing:.16em;padding:10px 16px}
  .eyebrow{font-size:11.5px;letter-spacing:.22em}
  .brand-sub{font-size:9.5px;letter-spacing:.34em;padding-left:.34em}
  .cta-line{font-size:11.5px;letter-spacing:.2em}
  .foot-legal{font-size:11px;letter-spacing:.16em}
  .main-nav a,.head-contact{font-size:11.5px}
}

@media (max-width:900px){
  :root{--gutter:22px}
  .main-nav,.head-contact{display:none}
  .menu-toggle{display:block}
  .site-head{grid-template-columns:1fr auto 1fr}
  .site-foot{grid-template-columns:1fr;gap:38px;padding:56px var(--gutter) 34px}
  .foot-nav{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(2,1fr);gap:13px 20px;justify-content:stretch}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .reveal-line{opacity:1;animation:none}
  .hero-video{display:none}
}