/* ==========================================================================
   Sommeliaide — homepage styles
   Desktop first; tablet overrides at 850px, phone overrides at 620px.
   ========================================================================== */

/* Fonts ------------------------------------------------------------------- */
@font-face{font-family:'DM Sans';src:url('assets/dm-sans.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('assets/bodoni-moda.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('assets/playfair-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('assets/bricolage-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#0d2922;
  --ink:#fbdbc5;
  --muted:#bcc7b9;
  --line:#fbdbc52e;
  --display:'Bodoni Moda',Didot,Georgia,serif;
  --serif:'Playfair Display',Georgia,serif;
  --action:'Bricolage Grotesque',Arial,sans-serif;
}

/* Base -------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
h1,h2,p{margin:0}
h1,h2{font-family:var(--display);font-weight:500;font-optical-sizing:auto;letter-spacing:-.045em;line-height:1.12;text-wrap:balance}
[hidden]{display:none!important}
.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--muted)}
.plain{background:none;border:0;padding:0;font-size:inherit}
.skip{position:absolute;top:-100px;left:10px;z-index:10;background:var(--ink);color:var(--paper);padding:10px}
.skip:focus{top:10px}

/* Drawn arrows: render identically everywhere, never as emoji. */
.arrow{display:inline-flex;align-items:center;line-height:1}
.arrow svg{display:block}

/* Header bar ---------------------------------------------------------------- */
.site-header{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 5% 15px;background:#071914;box-shadow:0 6px 24px -10px #020a0899}
.wordmark{font-family:var(--display);font-weight:500;font-optical-sizing:auto;text-transform:uppercase;font-size:21px;letter-spacing:.055em;line-height:1.15;padding:0 1px}
.brand-tagline{margin-top:1px;font-size:9px;line-height:1.3;letter-spacing:.025em;color:#c2cbbd}

/* Wordmark foil: solid peach at rest; a reflected highlight crosses it on hover/focus. */
.foil{position:relative;display:inline-block;color:#fbdbc5}
.foil-label{display:block}
.foil-shine{display:none;pointer-events:none;position:absolute;inset:0;padding:inherit;white-space:nowrap}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .foil-shine{display:block;opacity:0;color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(110deg,transparent 35%,#dbaa8266 42%,#fff4dd 48%,#ffffff 50%,#ffe3c5 53%,transparent 61%);background-size:300% 100%;background-position:100% 50%;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text}
  .foil:hover .foil-shine,.foil:focus-visible .foil-shine{animation:foil-sweep 1.4s cubic-bezier(.2,.5,.4,1) both}
}
@keyframes foil-sweep{0%{opacity:0;background-position:100% 50%}12%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:0% 50%}}

/* Hero: near-black forest tone at the top, fading into the still-life scene. */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;height:calc(94svh - 64px);min-height:660px;max-height:1050px;padding:90px 5% 170px;text-align:center;background:linear-gradient(180deg,#051310 0%,#081d18 32%,#0b241e 58%,#0d2922 82%)}
.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#051310cc 0%,#0513105c 24%,#0d292214 50%,#0d292200 100%)}
.hero-scene{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-content{width:100%;max-width:950px}
.hero .eyebrow{font-size:8px;letter-spacing:2px;color:#f6dfcb}
.hero h1{margin:22px auto 24px;font-family:var(--serif);font-weight:700;font-size:clamp(44px,5.2vw,78px);letter-spacing:-.04em;line-height:1.12;text-shadow:0 2px 24px #061a1466}
.shopping-invitation{max-width:580px;margin:28px auto 0}
.shopping-invitation>p{font-size:12px;line-height:1.8;color:#e3e6db}
.hero-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;margin-top:18px}
.hero-link{display:inline-flex;align-items:center;gap:20px;min-height:58px;padding:17px 26px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:3px;box-shadow:0 6px 22px #031b1826;font-family:var(--action);font-weight:700;font-size:15px;letter-spacing:-.015em;transition:background .2s,box-shadow .2s,transform .2s}
.hero-link:hover{background:#ffe8d8;box-shadow:0 9px 28px #031b1845;transform:translateY(-2px)}
.hero-link:active{transform:translateY(0);box-shadow:0 2px 8px #031b1826}
.hero-link .arrow{font-family:Arial,sans-serif;font-weight:400;font-size:21px;transition:transform .2s}
.hero-link:hover .arrow{transform:translate(3px,-3px)}
.learn-more{padding:10px 0;border-bottom:1px solid #fbdbc566;font-size:12px;white-space:nowrap}
.learn-more .arrow{margin-left:12px;vertical-align:-2px;font-size:14px}
.scene-caption{position:absolute;bottom:27px;left:5%;right:5%;font-size:7px;letter-spacing:2px;color:#f1dfcf}

/* Personal shopping: a wrapped-gift section with a bow and trailing ribbon. */
.shopping-details{--ink:#0d2922;--muted:#56675c;--line:#0d292230;position:relative;isolation:isolate;overflow:hidden;padding:100px max(7%,calc((100% - 1120px)/2));background:radial-gradient(ellipse at 100% 0%,#f3dac5 0%,transparent 45%),linear-gradient(115deg,#f8f0e3,#f6eddf 55%,#f3e5d4);color:#0d2922}
.shopping-details:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/paper-grain.svg') repeat;opacity:.3;mix-blend-mode:multiply;pointer-events:none}
.shopping-details:after{content:'';position:absolute;top:-25px;right:-65px;z-index:-1;width:330px;height:390px;background:url('assets/wrapping-ribbon.svg') center/contain no-repeat;opacity:.7;pointer-events:none}
.ribbon-trail{position:absolute;z-index:-1;top:96px;right:0;bottom:0;width:90px;height:auto;overflow:visible;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,#0000 96%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,#0000 96%)}
.ribbon-trail path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ribbon-trail .trail-band{stroke:url(#trail-silk);stroke-width:13px;opacity:.62}
.ribbon-trail .trail-sheen{stroke:#fff6ec;stroke-width:2.5px;opacity:.5}
.ribbon-trail .trail-narrow{display:none}
.shopping-heading{max-width:600px;margin:0 auto 65px;text-align:center}
.shopping-heading h2{margin:20px 0 25px;font-family:var(--serif);font-weight:700;font-size:clamp(34px,4vw,54px);line-height:1.15;letter-spacing:-.035em}
.shopping-heading>p:last-child{max-width:470px;margin:auto;font-size:14px;line-height:1.9;color:#465b50}
.shopping-benefits{display:grid;grid-template-columns:1fr 1fr;gap:46px 70px}
.shopping-benefits article{padding-top:21px;border-top:1px solid var(--line)}
.benefit-number{font-size:10px;letter-spacing:2px;color:#69796b}
.shopping-benefits h3{margin:13px 0;font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.3;letter-spacing:-.025em}
.shopping-benefits p{max-width:460px;font-size:13px;line-height:1.9;color:#465b50}
.shopping-benefits .occasion-note{margin-top:16px}
.occasion-note strong{display:block;margin-bottom:3px;font-weight:700;color:#0d2922}
.shopping-close{margin-top:70px;padding-top:38px;border-top:1px solid var(--line);text-align:center}
.shopping-close>p:first-child{font-size:20px;line-height:1.6}
.shopping-close strong{font-weight:400}
.shopping-close .shopping-scope{margin-top:17px;font-size:11px;line-height:1.9;color:var(--muted)}
.details-cta{display:inline-flex;align-items:center;gap:25px;margin-top:25px;padding-bottom:6px;border-bottom:1px solid #0d292280;font-family:var(--action);font-weight:700}
.details-cta .arrow{font-size:18px}

/* Footer ------------------------------------------------------------------ */
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 6%;padding:31px 0;font-size:9px;color:var(--muted)}
footer p{font-family:var(--display);font-size:16px;letter-spacing:-.4px;color:var(--ink)}
footer>div{display:flex;align-items:center;gap:22px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:#fbdbc5;transition:opacity .2s,transform .2s}
.social-icon:hover{opacity:.75;transform:translateY(-1px)}

/* Privacy dialog ------------------------------------------------------------ */
dialog{width:calc(100% - 32px);max-width:490px;padding:45px 32px;background:var(--paper);color:var(--ink);border:1px solid var(--line)}
dialog::backdrop{background:#051a16d9;backdrop-filter:blur(6px)}
dialog h2{margin:22px 0;font-size:35px}
dialog p{font-size:13px;color:var(--muted)}
dialog p+p{margin-top:20px}
.close{position:absolute;top:9px;right:15px;background:none;border:0;font-size:28px}

/* Wide screens ---------------------------------------------------------------- */
@media(min-width:1500px){
  footer{max-width:1350px;margin:auto}
}

/* Tablet ------------------------------------------------------------------ */
@media(max-width:850px){
  .hero{height:720px;min-height:660px;max-height:none;padding-top:80px;padding-bottom:190px}
  .hero-scene{object-position:center bottom}
  .hero h1{font-size:50px}
}

/* Phone ------------------------------------------------------------------- */
@media(max-width:620px){
  .eyebrow{font-size:8px;letter-spacing:1.6px}
  .site-header{padding:14px 6% 13px}
  .wordmark{font-size:19px}
  .brand-tagline{font-size:8px}

  /* The hero fills the screen below the header bar, with its copy at the true center. */
  .hero{height:auto;min-height:max(560px,calc(100svh - 60px));padding:56px 6%}
  .hero:after{background:linear-gradient(180deg,#051310 0%,#051310b3 22%,#081d1866 50%,#0d292200 75%)}
  .hero-scene{inset:auto 0 0;height:50%;min-height:340px;object-position:18% bottom;-webkit-mask-image:linear-gradient(180deg,#0000 0%,#0006 25%,#000 55%);mask-image:linear-gradient(180deg,#0000 0%,#0006 25%,#000 55%)}
  .hero .eyebrow{font-size:7px;letter-spacing:1.5px}
  .hero h1{max-width:490px;margin:20px auto;font-size:clamp(34px,9vw,46px);letter-spacing:-.055em}
  .hero h1 span{display:block;max-width:370px;margin:auto}
  .shopping-invitation{max-width:350px;margin-top:25px}
  /* Keep the invitation on one line: scale it to the screen width. */
  .shopping-invitation>p{width:100vw;margin-inline:calc(50% - 50vw);white-space:nowrap;font-size:min(11px,calc((100vw - 28px) / 33.4))}
  .hero-link{justify-content:center;width:100%;max-width:320px;min-height:54px;padding:16px 22px;font-size:14px}
  .learn-more{font-size:11px}
  .scene-caption{bottom:19px;font-size:6px}

  /* A tidy gift-corner bow at the top right, with a slimmer ribbon. */
  .shopping-details{padding:112px 7% 58px}
  .shopping-details:after{top:8px;right:8px;width:96px;height:112px;opacity:.85}
  .ribbon-trail{top:43px;width:60px}
  .ribbon-trail .trail-wide{display:none}
  .ribbon-trail .trail-narrow{display:inline}
  .ribbon-trail .trail-band{stroke-width:7px;opacity:.5}
  .ribbon-trail .trail-sheen{stroke-width:1.5px;opacity:.45}
  .shopping-heading{margin-bottom:36px}
  .shopping-heading>p:last-child{font-size:13px}
  .shopping-benefits{grid-template-columns:1fr;gap:28px}
  .shopping-benefits h3{font-size:22px}
  .shopping-close{margin-top:40px;padding-top:30px}

  footer{flex-wrap:wrap;gap:18px;margin:0 7%}
  footer p{order:-1;flex-basis:100%;font-size:17px}
  footer>div{flex-wrap:wrap;gap:20px}
}
/* Very narrow phones: let the invitation wrap rather than shrink further. */
@media(max-width:329px){
  .shopping-invitation>p{width:auto;margin-inline:0;white-space:normal;text-wrap:balance}
}

/* Accessibility preferences ------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .foil-shine{display:none}
  .hero-link:hover,.hero-link:hover .arrow{transform:none}
}
@media(forced-colors:active){
  .foil,.social-icon{color:LinkText}
  .foil-shine,.ribbon-trail{display:none}
}