/* ============================================================
   Urbs Vetus — Atelier
   Offline static demo. Vanilla JS, no dependencies, no network.
   ============================================================ */

/* ---- Fonts -------------------------------------------------
   Drop matching .woff2 files into assets/fonts/ to get the exact
   intended typography. If they are absent these @font-face rules
   simply fail and the stacks below fall through to system faces
   (Didot / Bodoni MT for display, Optima / Trajan for the caps).
   Either way: zero network requests. See README.md.
------------------------------------------------------------- */
@font-face{ font-family:'Bodoni Moda'; src:local('Bodoni Moda'), url('../fonts/BodoniModa-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bodoni Moda'; src:local('Bodoni Moda Italic'), url('../fonts/BodoniModa-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Cinzel'; src:local('Cinzel'), url('../fonts/cinzel-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Cinzel'; src:local('Cinzel SemiBold'), url('../fonts/cinzel-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Jost'; src:local('Jost'), url('../fonts/Jost-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Jost'; src:local('Jost'), url('../fonts/Jost-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Jost'; src:local('Jost Medium'), url('../fonts/Jost-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Noto Sans Old Italic'; src:local('Noto Sans Old Italic'), url('../fonts/noto-sans-old-italic-400.woff2') format('woff2'); font-weight:400; font-display:swap; }

/* Fallback chains — resolved by the browser, offline-safe */
:root{
  --uv-display:'Bodoni Moda','Didot','Bodoni MT','Big Caslon','Times New Roman',serif;
  --uv-caps:'Cinzel','Optima','Trajan Pro','Palatino Linotype','Times New Roman',serif;
  --uv-body:'Jost','Futura','Century Gothic','Avenir Next',-apple-system,'Segoe UI',sans-serif;
  --uv-etruscan:'Noto Sans Old Italic','Segoe UI Historic',serif;
  --uv-accent:#C9A24A;
}

*{ box-sizing:border-box; }
html{ background:#0E0D0B; scroll-behavior:smooth; }
body{ margin:0; background:#0E0D0B; }
::selection{ background:var(--uv-accent); color:#0E0D0B; }
a{ color:var(--uv-accent); }
a:hover{ color:#EDE7DC; }
button{ font-family:inherit; }
:focus-visible{ outline:1px solid var(--uv-accent); outline-offset:3px; }
section[id]{ scroll-margin-top:90px; }

/* Family remaps so the inline styles in the markup resolve to the
   fallback chains above rather than a single missing family. */
[style*="Bodoni Moda"]{ font-family:var(--uv-display) !important; }
[style*="Cinzel"]{ font-family:var(--uv-caps) !important; }
[style*="Jost"]{ font-family:var(--uv-body) !important; }
[style*="Noto Sans Old Italic"]{ font-family:var(--uv-etruscan) !important; }

/* Hero art direction — keeps the wine glasses in frame as it narrows */
[data-hero-bg]{ background-position:64% center; }
/* Eased left (was 80%/90%) for the current hero photograph, whose glasses are
   large and reach the right edge — pushing further right buried the headline
   inside the white bowl. Re-check if the photograph is replaced. */
@media (max-width:1000px){ [data-hero-bg]{ background-position:60% center; } }
@media (max-width:640px){ [data-hero-bg]{ background-position:58% center; } }

@keyframes uv-marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes uv-rise{ from{ opacity:0; transform:translate3d(0,26px,0); } to{ opacity:1; transform:none; } }

/* Mobile: sticky maker column must not stick, nav links compress */
@media (max-width:860px){
  [data-maker-sticky]{ position:static !important; }
  [data-nav] nav{ gap:18px !important; }
  [data-nav] > div{ padding:18px 22px !important; }
}
@media (max-width:620px){
  [data-nav] nav a{ display:none; }
  [data-nav] nav span{ display:inline-flex !important; }
  [data-cursor]{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

@media print{
  [data-curtain],[data-cursor],[data-progress],[data-lightbox-overlay]{ display:none !important; }
}

/* Demo chrome: the fixed Versions chip sits bottom-right, so the footer's last
   row needs clearance. Overrides the inline padding shorthand on the footer. */
footer { padding-bottom: 84px !important; }

/* Enoteca al Duomo mark — the logo as a mask, so it takes any colour via `color`.
   Proper placements: curtain, nav, footer. Hints: section watermarks, list glyphs. */
.uv-mark{
  display:inline-block; aspect-ratio:2250/2920; background:currentColor;
  -webkit-mask:url('../enoteca-logo.svg') center/contain no-repeat;
          mask:url('../enoteca-logo.svg') center/contain no-repeat;
}
footer .uv-mark{ display:block; margin-left:auto; margin-right:auto; }
.uv-watermark{ position:absolute; display:block; aspect-ratio:auto; pointer-events:none; }
@media (max-width:620px){
  [data-nav-brand]{ gap:10px !important; }
  [data-nav-brand] .uv-mark{ height:26px !important; }
  [data-nav-word]{ font-size:12px !important; letter-spacing:0.2em !important; padding-left:0.2em !important; }
  [data-carta-photo]{ aspect-ratio:4/3 !important; }
  #enoteca .uv-watermark{ width:90% !important; right:-30% !important; }
}

/* Mobile and tablet menu (Galaxy Fold inner screen included): burger below 1000px */
.uv-burger{ display:none; position:relative; width:40px; height:40px; flex:none; background:none; border:0; padding:0; margin:-8px; cursor:pointer; }
.uv-burger span{ position:absolute; left:8px; top:50%; width:24px; height:1px; margin-top:-0.5px; background:#EDE7DC; transition:transform 320ms ease; }
.uv-burger span:first-child{ transform:translateY(-4.5px); }
.uv-burger span:last-child{ transform:translateY(4.5px); }
.uv-burger[aria-expanded="true"] span:first-child{ transform:rotate(45deg); }
.uv-burger[aria-expanded="true"] span:last-child{ transform:rotate(-45deg); }
[data-menu]{ position:fixed; inset:0; z-index:110; background:rgba(14,13,11,0.97); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; opacity:0; visibility:hidden; transition:opacity 380ms ease, visibility 380ms ease; }
[data-menu].is-open{ opacity:1; visibility:visible; }
[data-menu] a:hover{ color:var(--uv-accent) !important; }
@media (max-width:1000px){
  .uv-burger{ display:block; }
  [data-nav] nav a{ display:none; }
  [data-nav] > div{ padding:18px 22px !important; gap:12px !important; }
}

/* Wine-list cards: 3 across, then 2 with the third full width, then stacked */
@media (max-width:900px){
  [data-carta-cards]{ grid-template-columns:1fr 1fr !important; }
  [data-carta-cards] > div:last-child{ grid-column:1 / -1; }
}
@media (max-width:560px){
  [data-carta-cards], [data-enoteca-feats]{ grid-template-columns:1fr !important; }
}