/* La Meridiana — shared styles (extracted from approved design) */
/* ============ 1. BRAND TOKENS — SWAP HEXES HERE ============ */
:root{
  --green:      #16382B;   /* primary brand green (deep bottle) */
  --green-deep: #0F2A20;   /* darker room shade */
  --green-soft: #1E4636;   /* raised panels on green */
  --cream:      #F5EFE2;   /* menu-card stock */
  --cream-deep: #EBE1CC;   /* aged tint blocks */
  --brass:      #A98B4F;   /* brass rules & plaques */
  --brass-hi:   #C9A96A;   /* brass on dark */
  --tomato:     #BE3B26;   /* punctuation only — the sun-dot */
  --ink:        #201F19;   /* warm near-black text */
  --ink-soft:   #5C594D;   /* secondary text on cream */
  --paper-line: rgba(32,31,25,.16);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --hand:  "Italianno", "Snell Roundhand", cursive;

  --ease: cubic-bezier(.22,.61,.2,1);
  --wrap: 1180px;
}

/* ============ 2. BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
::selection{background:var(--brass);color:var(--cream)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 6vw}
@media(min-width:1300px){.wrap{padding:0 40px}}

/* faint paper grain on cream surfaces — material, not decoration */
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ============ 3. TYPE UTILITIES ============ */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--brass)}

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.01em;
}
.hand{font-family:var(--hand);font-weight:400;line-height:1}

/* ============ 4. BUTTON SYSTEM ============ */
/* Primary — solid, sweep fill on hover */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  padding:17px 34px;
  overflow:hidden;
  transition:color .45s var(--ease);
  isolation:isolate;
}
.btn .dot{width:5px;height:5px;border-radius:50%;background:currentColor;transition:transform .45s var(--ease)}
.btn:hover .dot{transform:scale(1.6)}
.btn::after{ /* sweep */
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.btn:hover::after{transform:scaleX(1)}
.btn:focus-visible{outline:2px solid var(--tomato);outline-offset:3px}

.btn--brass{background:var(--brass);color:var(--cream)}
.btn--brass::after{background:var(--tomato)}
.btn--outline-cream{border:1px solid rgba(245,239,226,.5);color:var(--cream)}
.btn--outline-cream::after{background:var(--cream)}
.btn--outline-cream:hover{color:var(--green)}
.btn--outline-ink{border:1px solid var(--ink);color:var(--ink)}
.btn--outline-ink::after{background:var(--ink)}
.btn--outline-ink:hover{color:var(--cream)}

/* Text link — underline draws, sun-dot slides in */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  padding-bottom:6px;color:inherit;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(.35);transform-origin:left;
  transition:transform .45s var(--ease);
}
.tlink:hover::after{transform:scaleX(1)}
.tlink .sun{width:6px;height:6px;border-radius:50%;background:var(--tomato);transition:transform .45s var(--ease)}
.tlink:hover .sun{transform:translateX(4px)}

/* ============ 5. MERIDIAN INSTRUMENT (signature) ============ */
/* Fixed brass rail on the left; the red sun travels with scroll,
   like the shadow line of a sundial crossing the day. */
.meridian{
  position:fixed;left:34px;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom, transparent 0, rgba(169,139,79,.55) 8%, rgba(169,139,79,.55) 92%, transparent 100%);
  z-index:60;pointer-events:none;
}
.meridian .tick{position:absolute;left:-4px;width:9px;height:1px;background:rgba(169,139,79,.55)}
.meridian .sun{
  position:absolute;left:50%;top:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--tomato);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(190,59,38,.14);
}
.meridian .label{
  position:absolute;left:14px;
  font-family:var(--sans);font-size:9px;font-weight:600;
  letter-spacing:.3em;color:var(--brass);
  transform-origin:left top;transform:rotate(90deg);
  white-space:nowrap;
}
@media(max-width:900px){.meridian{display:none}}

/* ============ 6. NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--green);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{background:rgba(245,239,226,.96);box-shadow:0 1px 0 var(--paper-line)}
.nav__in{
  max-width:var(--wrap);margin:0 auto;padding:0 6vw;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:84px;
  transition:height .4s var(--ease);
}
.nav.scrolled .nav__in{height:66px}
.nav__brand{display:flex;flex-direction:column;line-height:1;flex:none}
.nav__brand .word{
  font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream);white-space:nowrap;
  transition:color .4s var(--ease);
  position:relative;
}
.nav__brand .word i{font-style:normal;position:relative}
.nav__brand .word i::after{ /* the sun over the final A */
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--tomato);
}
.nav__brand .sub{
  font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass-hi);margin-top:6px;white-space:nowrap;
  transition:color .4s var(--ease);
}
.nav.scrolled .nav__brand .word{color:var(--ink)}
.nav.scrolled .nav__brand .sub{color:var(--brass)}
.nav__right{display:flex;align-items:center;gap:18px;flex:none}
@media(max-width:1280px){.nav__brand .sub{display:none}}
.nav__links{display:flex;gap:clamp(16px,2.4vw,36px);align-items:center;flex:none}
.nav__links a{
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  color:var(--cream);position:relative;padding:6px 0;
  transition:color .4s var(--ease);
}
.nav.scrolled .nav__links a{color:var(--ink)}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--tomato);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)}
.nav__book{
  display:inline-flex;align-items:center;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--brass-hi);color:var(--cream);
  padding:12px 22px;position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.nav__book::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav__book:hover::after{transform:scaleX(1)}
.nav__book:hover{color:var(--cream)}
.nav.scrolled .nav__book{border-color:var(--brass);color:var(--ink)}
.nav.scrolled .nav__book:hover{color:var(--cream)}
.nav__burger{display:none}

@media(max-width:1200px){
  .nav__links{display:none}
  .nav__burger{
    display:flex;flex-direction:column;gap:5px;padding:8px;
  }
  .nav__burger span{width:24px;height:1.5px;background:var(--cream);transition:.35s var(--ease)}
  .nav.scrolled .nav__burger span{background:var(--ink)}
  .nav.open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav.open .nav__burger span:nth-child(2){opacity:0}
  .nav.open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav.open .nav__burger span{background:var(--cream)}
}
.mobilemenu{
  position:fixed;inset:0;z-index:90;background:var(--green-deep);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.nav.open ~ .mobilemenu{opacity:1;pointer-events:auto}
.mobilemenu a{
  font-family:var(--serif);font-size:34px;font-weight:500;color:var(--cream);
  padding:10px;transform:translateY(14px);opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.nav.open ~ .mobilemenu a{transform:none;opacity:1}
.nav.open ~ .mobilemenu a:nth-child(2){transition-delay:.05s}
.nav.open ~ .mobilemenu a:nth-child(3){transition-delay:.1s}
.nav.open ~ .mobilemenu a:nth-child(4){transition-delay:.15s}
.nav.open ~ .mobilemenu a:nth-child(5){transition-delay:.2s}
.mobilemenu .hand{color:var(--brass-hi);font-size:44px;margin-bottom:10px}
.nav.open .nav__brand .word{color:var(--cream)}
.nav.open .nav__brand .sub{color:var(--brass-hi)}
.nav.open .nav__book{border-color:var(--brass-hi);color:var(--cream)}

/* ============ 7. HERO ============ */
.hero{
  position:relative;min-height:100vh;
  background:var(--green);color:var(--cream);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  overflow:hidden;
}
.hero__text{
  display:flex;flex-direction:column;justify-content:center;
  padding:140px 5vw 90px 9vw;
  position:relative;z-index:2;
}
.hero__eyebrow{color:var(--brass-hi);margin-bottom:34px}
.hero__eyebrow::before{background:var(--brass-hi)}
.hero h1{
  font-size:clamp(52px, 6.4vw, 104px);
  font-weight:500;line-height:.98;letter-spacing:-.015em;
}
/* the mask window extends below the baseline so descenders (y, g, comma) are
   never clipped; the negative margin cancels it so the tight line spacing is
   unchanged. reveal starts a touch lower so nothing peeks past the taller mask */
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero h1 .line > span{display:inline-block;transform:translateY(130%);animation:rise 1s var(--ease) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s}
.hero h1 .line:nth-child(3) > span{animation-delay:.24s}
.hero h1 em{font-style:italic;font-weight:500;color:var(--brass-hi)}
@keyframes rise{to{transform:none}}

.hero__rule{ /* the meridian draws itself under the headline */
  width:0;height:1px;background:var(--brass-hi);
  margin:40px 0 30px;position:relative;
  animation:draw 1.1s var(--ease) .55s forwards;
}
.hero__rule::after{
  content:"";position:absolute;right:-4px;top:50%;transform:translate(0,-50%);
  width:8px;height:8px;border-radius:50%;background:var(--tomato);
  opacity:0;animation:appear .4s var(--ease) 1.5s forwards;
}
@keyframes draw{to{width:min(340px,60%)}}
@keyframes appear{to{opacity:1}}

.hero__sub{
  max-width:46ch;font-size:19px;line-height:1.65;color:rgba(245,239,226,.82);
  opacity:0;transform:translateY(14px);
  animation:fadeup .8s var(--ease) .8s forwards;
}
@keyframes fadeup{to{opacity:1;transform:none}}
.hero__cta{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:44px;
  opacity:0;transform:translateY(14px);
  animation:fadeup .8s var(--ease) 1s forwards;
}
.hero__foot{
  position:absolute;bottom:34px;left:9vw;right:5vw;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(245,239,226,.55);
  opacity:0;animation:fadeup .8s var(--ease) 1.3s forwards;
}
.hero__foot .scrollcue{display:flex;align-items:center;gap:10px}
.hero__foot .scrollcue::after{
  content:"";width:1px;height:34px;background:var(--brass-hi);
  animation:cue 1.8s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.hero__media{display:flex;align-items:stretch;padding:118px 5vw 88px 0}
.hero__media-in{
  position:relative;overflow:hidden;flex:1;min-height:460px;
  border:1px solid rgba(201,169,106,.35);
}
.hero__media .veil{ /* green veil wipes away to reveal the photo */
  position:absolute;inset:0;background:var(--green);z-index:3;
  transform-origin:top;animation:unveil 1.2s var(--ease) .35s forwards;
}
@keyframes unveil{to{transform:scaleY(0)}}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);
  animation:settle 2.4s var(--ease) .35s forwards;
  will-change:transform;
}
@keyframes settle{to{transform:scale(1.02)}}
.hero__media .plate{ /* caption plate, like a brass name plate */
  position:absolute;left:0;bottom:44px;z-index:4;
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  padding:13px 22px;
  border-left:3px solid var(--tomato);
  opacity:0;transform:translateX(-16px);
  animation:fadeleft .7s var(--ease) 1.5s forwards;
}
@keyframes fadeleft{to{opacity:1;transform:none}}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero__text{padding:150px 8vw 70px}
  .hero__media{padding:0 8vw 70px}
  .hero__media-in{min-height:48vh}
  .hero__foot{position:static;margin-top:60px;padding:0}
}

/* ============ 8. MARQUEE ============ */
.marquee{
  background:var(--cream);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  overflow:hidden;padding:20px 0;
}
.marquee__track{display:flex;width:max-content;animation:slide 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:20px;letter-spacing:.06em;color:var(--ink);
  padding:0 26px;display:flex;align-items:center;gap:52px;white-space:nowrap;
}
.marquee__track span::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--tomato);flex:none;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ 9. SECTIONS SHARED ============ */
.section{padding:clamp(62px,11vw,130px) 0}   /* fluid vertical rhythm: shrinks with the viewport */
.section--green{background:var(--green);color:var(--cream)}
.section--deep{background:var(--green-deep);color:var(--cream)}
.section--tint{background:var(--cream-deep)}
@media(max-width:900px){.section{padding:90px 0}}

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

/* sundial tick divider */
.ticks{display:flex;align-items:center;justify-content:center;gap:9px;margin:26px 0}
.ticks i{display:block;width:1px;height:10px;background:var(--brass)}
.ticks i:nth-child(3){height:16px}
.ticks i:nth-child(3)::after{content:""}
.ticks .sun{width:6px;height:6px;border-radius:50%;background:var(--tomato)}

/* ============ 10. LA STORIA ============ */
.storia{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:center}
/* single-column story (no media) — used while the staff photo is out */
.storia--solo{grid-template-columns:1fr;max-width:760px}
.storia__text h2{font-size:clamp(38px,4vw,58px);font-weight:500;line-height:1.06;margin:26px 0 30px}
.storia__text h2 em{font-style:italic;color:var(--brass)}
.storia__text p{font-size:19px;line-height:1.72;color:var(--ink-soft);max-width:54ch;margin-bottom:20px}
.storia__text p:first-of-type::first-letter{
  font-size:64px;font-weight:600;float:left;
  line-height:.8;padding:8px 12px 0 0;color:var(--green);
}
.storia__sign{margin-top:36px;display:flex;align-items:baseline;gap:16px}
.storia__sign .hand{font-size:46px;color:var(--green)}
.storia__sign .who{
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);
}
.storia__media{position:relative}
.storia__media .frame{
  position:relative;z-index:2;
  border:1px solid var(--brass);
  padding:14px;background:var(--cream);
  transform:rotate(.6deg);
  transition:transform .6s var(--ease);
}
.storia__media .frame:hover{transform:rotate(0deg)}
.storia__media .frame img{width:100%;height:520px;object-fit:cover}
.storia__media::after{ /* offset brass shadow-frame */
  content:"";position:absolute;inset:26px -26px -26px 26px;
  border:1px solid var(--brass);z-index:1;
}
.storia__media .tape{
  position:absolute;z-index:3;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);
  background:var(--cream-deep);border:1px solid var(--paper-line);
  font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
  padding:8px 18px;
}
@media(max-width:900px){
  .storia{grid-template-columns:1fr;gap:70px}
  .storia__media .frame img{height:380px}
  .storia__media::after{inset:18px -14px -14px 18px}
}

/* awards plaques */
.plaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:110px}
.plaque{
  border:1px solid var(--brass);
  padding:34px 36px;position:relative;background:var(--cream);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.plaque:hover{transform:translateY(-5px);box-shadow:0 18px 40px -22px rgba(32,31,25,.35)}
.plaque::before{
  content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;
  border:1px solid rgba(169,139,79,.4);pointer-events:none;
}
.plaque .yr{
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.3em;color:var(--tomato);
}
.plaque h3{font-size:26px;font-weight:600;line-height:1.2}
.plaque p{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink-soft)}
@media(max-width:960px){.plaques{grid-template-columns:1fr}}

/* ============ 11. IL MENU — THE CARD ============ */
.menuhead{text-align:center;max-width:640px;margin:0 auto 70px}
.menuhead h2{font-size:clamp(40px,4.6vw,64px);font-weight:500;margin-top:24px}
.menuhead h2 em{font-style:italic;color:var(--brass-hi)}
.menuhead p{color:rgba(245,239,226,.72);font-size:18px;margin-top:18px}

.tabs{display:flex;justify-content:center;gap:0;margin-bottom:60px;position:relative;flex-wrap:wrap}
.tab{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  color:rgba(245,239,226,.6);
  padding:15px 34px;position:relative;
  transition:color .4s var(--ease);
}
.tab:hover{color:var(--cream)}
.tab.active{color:var(--brass-hi)}
.tab::after{
  content:"";position:absolute;left:34px;right:34px;bottom:6px;height:1px;
  background:var(--brass-hi);transform:scaleX(0);transition:transform .45s var(--ease);
}
.tab.active::after{transform:scaleX(1)}
.tab .sun{
  position:absolute;top:6px;left:50%;transform:translateX(-50%) scale(0);
  width:5px;height:5px;border-radius:50%;background:var(--tomato);
  transition:transform .45s var(--ease);
}
.tab.active .sun{transform:translateX(-50%) scale(1)}

.card{
  background:var(--cream);color:var(--ink);
  max-width:880px;margin:0 auto;
  padding:clamp(44px,6vw,84px) clamp(26px,6vw,90px);
  position:relative;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.5);
}
.card::before{ /* inner keyline like printed card stock */
  content:"";position:absolute;inset:14px;border:1px solid rgba(169,139,79,.45);pointer-events:none;
}
.card__brand{text-align:center;margin-bottom:14px}
.card__brand .word{
  font-family:var(--serif);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;font-size:15px;
}
.card__brand .sub{
  font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.44em;text-transform:uppercase;color:var(--brass);margin-top:6px;
}

.pane{display:none}
.pane.active{display:block;animation:paneIn .6s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.course{margin-top:52px}
.course:first-of-type{margin-top:36px}
.course__title{
  text-align:center;font-size:30px;font-weight:600;letter-spacing:.02em;
}
.course__note{
  text-align:center;font-style:italic;font-size:15px;color:var(--ink-soft);margin-top:4px;
}
.dish{
  display:flex;align-items:baseline;gap:14px;
  padding:17px 0;
}
.dish + .dish{border-top:1px dashed rgba(32,31,25,.12)}
.dish__name{font-size:21px;font-weight:600;white-space:nowrap}
.dish__name .v{ /* vegetarian mark */
  font-family:var(--sans);font-size:9px;font-weight:600;color:var(--brass);
  vertical-align:super;letter-spacing:.1em;margin-left:4px;
}
.dish__lead{flex:1;border-bottom:1px dotted rgba(32,31,25,.4);transform:translateY(-5px);transition:border-color .35s var(--ease)}
.dish:hover .dish__lead{border-color:var(--tomato)}
.dish__price{
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.04em;
  transition:transform .35s var(--ease);
}
.dish:hover .dish__price{transform:translateX(-3px);color:var(--tomato)}
.dish__wrapline{width:100%}
.dish__desc{
  font-style:italic;font-size:15.5px;color:var(--ink-soft);
  margin-top:5px;max-width:56ch;
}
/* featured sharing offers — lifted onto a brass-tinted card with an "Offerta" tag */
.dish--offer{
  background:rgba(169,139,79,.10);
  border:1px solid rgba(169,139,79,.42);
  border-radius:14px;
  padding:16px 22px;
  margin:6px 0;
}
.dish--offer + .dish{border-top:none}
.dish__tag{
  align-self:center;white-space:nowrap;
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);background:var(--brass);
  padding:4px 10px;border-radius:999px;
}
@media(max-width:640px){
  .dish{flex-wrap:wrap;gap:8px}
  .dish__name{white-space:normal;font-size:19px}
}

/* wine rows — two price columns */
.winehead{
  display:grid;grid-template-columns:1fr auto auto;gap:0 34px;
  font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);
  padding:10px 0 2px;
}
.winehead span{min-width:46px;text-align:right}
.winehead span:first-child{grid-column:2}
.wine{
  display:grid;grid-template-columns:1fr auto auto;gap:10px 34px;align-items:baseline;
  padding:15px 0;
}
.wine + .wine{border-top:1px dashed rgba(32,31,25,.12)}
.wine__name{font-size:20px;font-weight:600}
.wine__from{font-style:italic;font-size:14.5px;color:var(--ink-soft);grid-column:1;margin-top:2px}
.wine__p{
  font-family:var(--sans);font-size:14px;font-weight:600;min-width:46px;text-align:right;
}
.wine:hover .wine__p{color:var(--tomato)}
@media(max-width:640px){
  .winehead{gap:0 22px}
  .wine{grid-template-columns:1fr auto auto;gap:6px 22px}
}

.card__foot{
  margin-top:60px;text-align:center;
  font-style:italic;font-size:15px;color:var(--ink-soft);
}
.card__foot .hand{font-size:40px;color:var(--green);display:block;margin-bottom:6px}

.menu__cta{text-align:center;margin-top:64px}

/* ============ 12. GALLERY — DALLA CUCINA ============ */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:70px}
.gal__item{position:relative;overflow:hidden;background:var(--cream-deep)}
.gal__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.gal__item:hover img{transform:scale(1.05)}
.gal__item .cap{
  position:absolute;left:0;bottom:0;
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  padding:11px 18px;border-left:3px solid var(--tomato);
  transform:translateY(100%);transition:transform .5s var(--ease);
}
.gal__item:hover .cap{transform:none}
.gal__item.a{grid-column:span 5;height:420px}
.gal__item.b{grid-column:span 4;height:420px}
.gal__item.c{grid-column:span 3;height:420px}
.gal__item.d{grid-column:span 3;height:340px}
.gal__item.e{grid-column:span 5;height:340px}
.gal__item.f{grid-column:span 4;height:340px}
@media(max-width:900px){
  .gal{grid-template-columns:1fr 1fr;gap:14px}
  .gal__item{grid-column:span 1 !important;height:240px !important}
  .gal__item .cap{transform:none}
}

/* ============ 13. VISIT / HOURS ============ */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.visit h2{font-size:clamp(38px,4vw,58px);font-weight:500;margin:26px 0 20px}
.visit h2 em{font-style:italic;color:var(--brass)}
.visit__addr{font-size:19px;line-height:1.7;color:var(--ink-soft);max-width:40ch}
.visit__contacts{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.visit__contacts a{
  font-family:var(--sans);font-size:14px;letter-spacing:.06em;color:var(--ink);
  display:flex;align-items:center;gap:12px;width:max-content;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.visit__contacts a:hover{border-color:var(--tomato)}
.visit__contacts .k{
  font-size:9.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);
  min-width:74px;
}
.visit__map{margin-top:40px}

.hours{
  border:1px solid var(--brass);background:var(--cream);
  padding:46px 48px;position:relative;
}
.hours::before{content:"";position:absolute;inset:9px;border:1px solid rgba(169,139,79,.4);pointer-events:none}
.hours h3{
  text-align:center;font-size:24px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.hours .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;
}
.hours .row + .row{border-top:1px dashed rgba(32,31,25,.14)}
.hours .day{font-size:19px;font-weight:600}
.hours .time{
  font-family:var(--sans);font-size:13px;letter-spacing:.05em;color:var(--ink-soft);text-align:right;
}
.hours .note{
  margin-top:26px;text-align:center;font-style:italic;font-size:14.5px;color:var(--ink-soft);
}
@media(max-width:900px){
  .visit{grid-template-columns:1fr;gap:60px}
  .hours{padding:36px 26px}
}

/* ============ 14. RESERVATION CTA ============ */
.cta{text-align:center;position:relative;overflow:hidden}
.cta .hand{font-size:clamp(54px,7vw,92px);color:var(--brass-hi)}
.cta h2{
  font-size:clamp(42px,5.6vw,80px);font-weight:500;line-height:1.02;
  margin:6px 0 26px;color:var(--cream);
}
.cta p{color:rgba(245,239,226,.72);font-size:18px;max-width:52ch;margin:0 auto 44px}
.cta__btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.cta__meridian{ /* horizontal meridian with travelling suns */
  margin:80px auto 0;max-width:520px;height:1px;background:rgba(169,139,79,.5);
  position:relative;
}
.cta__meridian i{position:absolute;top:-5px;width:1px;height:11px;background:rgba(169,139,79,.5)}
.cta__meridian .sun{
  position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--tomato);
  animation:travel 7s var(--ease) infinite;
}
@keyframes travel{
  0%{left:0}48%{left:calc(100% - 9px)}52%{left:calc(100% - 9px)}100%{left:0}
}
/* book / order — two columns near the top of the home page (cream band) */
.booknow{padding:clamp(48px,6vw,84px) 0}
.booknow__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.booknow__col .eyebrow{color:var(--brass)}
.booknow__col h2{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);font-weight:600;line-height:1.05;color:var(--ink);margin:10px 0 12px}
.booknow__col > p{color:var(--ink-soft);font-size:16px;line-height:1.55;max-width:38ch;margin-bottom:24px}
.booknow__btns{display:flex;flex-direction:column;gap:15px;align-items:flex-start}
.booknow__col + .booknow__col{padding-left:clamp(30px,5vw,72px);border-left:1px solid var(--paper-line)}
@media(max-width:760px){
  .booknow__grid{grid-template-columns:1fr;gap:34px}
  .booknow__col + .booknow__col{padding-left:0;border-left:none;padding-top:34px;border-top:1px solid var(--paper-line)}
}

/* ============ 15. FOOTER ============ */
.footer{background:var(--cream);border-top:1px solid var(--paper-line);padding:clamp(60px,8vw,84px) 0 40px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(30px,4vw,56px);align-items:start}
.footer__logo{display:block;width:206px;max-width:76%;height:auto;margin-bottom:14px}
.footer__tag{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:16px;line-height:1.55;max-width:26ch}
/* a small meridian tick-motif accent + a directions link lift the brand column */
.footer__brand .ticks{justify-content:flex-start;margin:20px 0 15px}
.footer__dir{color:var(--brass);font-size:11px}
.footer h4{
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:18px;
}
.footer ul{display:flex;flex-direction:column;gap:12px}
/* links draw a fine brass underline on hover — quieter, more premium than a colour flip */
.footer ul a{
  font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink-soft);width:fit-content;
  padding-bottom:2px;background:linear-gradient(var(--brass),var(--brass)) left bottom / 0 1px no-repeat;
  transition:background-size .35s var(--ease), color .3s var(--ease);
}
.footer ul a:hover{color:var(--ink);background-size:100% 1px}
.footer__base{
  margin-top:clamp(48px,6vw,64px);padding-top:24px;border-top:1px solid var(--paper-line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
/* Agency credit: the FunnelMcQueen bolt as a currentColor mask, so it inherits the
   base-bar text colour exactly and follows every solar-phase shift (incl. phase-night).
   Kept no louder than the © line — no brand red, no fill of its own. */
.fmq-credit{display:inline-flex;align-items:center;gap:.55em;color:inherit}
.fmq-credit::before{
  content:"";flex:0 0 auto;height:1.15em;width:.6em;
  background-color:currentColor;
  -webkit-mask:url(../assets/img/fmq-mark.svg) center/contain no-repeat;
          mask:url(../assets/img/fmq-mark.svg) center/contain no-repeat;
}
/* desktop hover: mark + text warm to the golden accent together (phase-aware via --brass) */
@media(hover:hover){
  .fmq-credit{transition:color .3s var(--ease)}
  .fmq-credit:hover{color:var(--brass)}
}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){
  .footer__grid{grid-template-columns:1fr;gap:30px}
  .footer__base{flex-direction:column;gap:8px}
}

/* ============ 17. PRELOADER CURTAIN ============ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--green-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transition:transform .7s var(--ease) .1s, visibility 0s .9s;
}
.loader .word{
  font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,30px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--cream);
  opacity:0;animation:fadeup .6s var(--ease) .1s forwards;
}
.loader .sub{
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.44em;
  text-transform:uppercase;color:var(--brass-hi);
  opacity:0;animation:fadeup .6s var(--ease) .3s forwards;
}
.loader .rule{
  width:0;height:1px;background:var(--brass-hi);position:relative;
  animation:loaddraw .8s var(--ease) .25s forwards;
}
.loader .rule::after{
  content:"";position:absolute;right:-4px;top:50%;transform:translate(0,-50%);
  width:7px;height:7px;border-radius:50%;background:var(--tomato);
}
@keyframes loaddraw{to{width:180px}}
body.loaded .loader{transform:translateY(-100%);visibility:hidden}

/* ============ 18. ATMOSPHERE BAND ============ */
.band{position:relative;height:68vh;min-height:420px;overflow:hidden;background:var(--green-deep)}
.band img{
  position:absolute;left:0;top:-15%;width:100%;height:130%;
  object-fit:cover;will-change:transform;
}
.band .shade{position:absolute;inset:0;background:
  radial-gradient(72% 66% at 50% 52%,
    rgba(11,28,21,.82) 0%, rgba(11,28,21,.62) 55%, rgba(11,28,21,.5) 100%);}
.band__quote{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--cream);padding:0 8vw;gap:10px;
}
.band__quote .hand{
  font-size:clamp(42px,5vw,66px);color:var(--brass-hi);
  text-shadow:0 2px 16px rgba(8,20,15,.6);
}
.band__quote p{
  font-size:clamp(30px,4.2vw,54px);font-weight:500;font-style:italic;
  line-height:1.12;max-width:22ch;
  text-shadow:0 2px 22px rgba(8,20,15,.7),0 1px 4px rgba(8,20,15,.5);
}

/* ============ 19. LA STAGIONE ============ */
.stag{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:70px}
.stagcard{
  background:var(--cream);border:1px solid var(--paper-line);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.stagcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px rgba(32,31,25,.4)}
.stagcard__media{height:230px;overflow:hidden;position:relative}
.stagcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.stagcard:hover .stagcard__media img{transform:scale(1.06)}
.stagcard__when{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:9px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  padding:9px 14px;border-left:3px solid var(--tomato);
}
.stagcard__body{padding:30px 28px 34px;display:flex;flex-direction:column;gap:12px;flex:1}
.stagcard__body h3{font-size:27px;font-weight:600;line-height:1.1}
.stagcard__body p{font-size:15.5px;font-style:italic;color:var(--ink-soft);line-height:1.6;flex:1}
.stagcard__body .tlink{color:var(--ink);width:max-content}
@media(max-width:900px){.stag{grid-template-columns:1fr}}

/* ============ 20. LIGHTBOX ============ */
.lb{
  position:fixed;inset:0;z-index:300;background:rgba(15,42,32,.95);
  display:flex;align-items:center;justify-content:center;padding:5vw;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:min(1000px,90vw);max-height:78vh;object-fit:contain;border:1px solid var(--brass)}
.lb .cap{
  position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--cream);white-space:nowrap;
}
.lb .x{
  position:absolute;top:26px;right:30px;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--cream);padding:10px;
}
.gal__item{cursor:pointer}
.nav.open ~ .mobilemenu a:nth-child(6){transition-delay:.25s}

/* image fallback if CDN blocked in preview */
.imgph{
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-deep);color:var(--ink-soft);
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;text-align:center;padding:20px;
  width:100%;height:100%;
}

/* keyboard focus, everywhere */
a:focus-visible,button:focus-visible{outline:2px solid var(--tomato);outline-offset:3px}

/* ============ 16. MOTION SAFETY ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .hero h1 .line > span{transform:none}
  .hero__rule{width:min(340px,60%)}
  .hero__rule::after,.hero__sub,.hero__cta,.hero__foot,.hero__media .plate{opacity:1;transform:none}
  .hero__media .veil{display:none}
  .hero__media img{transform:scale(1.02)}
  .loader{display:none}
  .band img{top:0;height:100%;transform:none !important}
  /* no full-screen intro under reduced-motion */
  .sunintro{display:none !important}
  body.has-intro .nav{opacity:1;transform:none}
  body.has-intro .hero h1 .line > span,
  body.has-intro .hero__rule,
  body.has-intro .hero__sub,
  body.has-intro .hero__cta,
  body.has-intro .hero__foot{animation-play-state:running}
  /* hero sundial: show the completed composition, sun placed by js */
  .herodial{opacity:1}
  .herodial .hd-arc{stroke-dashoffset:0}
  .herodial .hd-noon{transform:none}
  .herodial .sun{transform:translate(110px,-110px)}
}

/* ============================================================
   PAGE-SPECIFIC STYLES (inner pages)
   Reuses the existing tokens + meridian motif — no new systems.
   ============================================================ */

/* Inner-page header band — the hero look without the media panel */
.pagehero{background:var(--green);color:var(--cream);padding:clamp(118px,16vw,160px) 0 clamp(56px,9vw,90px)}
.pagehero .eyebrow{color:var(--brass-hi)}
.pagehero .eyebrow::before{background:var(--brass-hi)}
.pagehero h1{
  font-size:clamp(44px,6vw,88px);font-weight:500;line-height:1.0;
  letter-spacing:-.015em;margin-top:22px;
}
.pagehero h1 em{font-style:italic;color:var(--brass-hi)}
.pagehero .rule{
  width:min(340px,60%);height:1px;background:var(--brass-hi);
  margin:34px 0 26px;position:relative;
}
.pagehero .rule::after{
  content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--tomato);
}
.pagehero p{max-width:56ch;font-size:19px;line-height:1.6;color:rgba(245,239,226,.82)}
@media(max-width:900px){.pagehero{padding:130px 0 70px}}

/* Eventi — full-width feature rows (expanded from the stagione cards) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:80px}
.feature:first-of-type{margin-top:0}
.feature:nth-child(even) .feature__media{order:2}
.feature__media{position:relative;overflow:hidden;border:1px solid var(--brass);min-height:360px;background:var(--green-soft)}
.feature__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feature__when{
  position:absolute;top:16px;left:16px;z-index:2;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  padding:9px 14px;border-left:3px solid var(--tomato);
}
.feature__body h2{font-size:clamp(30px,3.4vw,46px);font-weight:500;line-height:1.08}
.feature__body h2 em{font-style:italic;color:var(--brass)}
.feature__body p{font-size:18px;line-height:1.7;color:var(--ink-soft);margin-top:18px;max-width:52ch}
@media(max-width:900px){
  .feature{grid-template-columns:1fr;gap:34px;margin-top:64px}
  .feature__media{min-height:260px}
  .feature:nth-child(even) .feature__media{order:0}
}

/* Sample-content notice banner (menu page, until real files are transcribed) */
.notice{
  max-width:880px;margin:0 auto 40px;text-align:center;
  border:1px solid var(--brass);background:var(--cream);
  font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--ink-soft);
  padding:14px 20px;
}
.notice strong{color:var(--ink)}

/* 3-column wine rows (175ml / 250ml / bottle) — menu page La Cantina */
.winehead.w3, .wine.w3{grid-template-columns:1fr auto auto auto;gap:8px 20px}
.winehead.w3 span{min-width:52px;text-align:right}
.winehead.w3 span:first-child{grid-column:2}
.wine.w3 .wine__from{grid-column:1}
@media(max-width:640px){ .winehead.w3, .wine.w3{gap:6px 12px} .winehead.w3 span,.wine.w3 .wine__p{min-width:38px} }

/* Gallery third row (expanded to 9 tiles) */
.gal__item.g{grid-column:span 4;height:380px}
.gal__item.h{grid-column:span 4;height:380px}
.gal__item.i{grid-column:span 4;height:380px}

/* Award-win photo (la-storia) — framed portrait beneath the plaques */
.award-photo{margin:64px auto 0;max-width:340px;text-align:center}
.award-photo img{width:100%;height:auto;border:1px solid var(--brass);padding:12px;background:var(--cream)}
.award-photo figcaption{
  margin-top:16px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}

/* Contact "find us" photo, under the directions link */
.visit__photo{margin-top:28px}
.visit__photo img{width:100%;height:auto;border:1px solid var(--brass);padding:10px;background:var(--cream)}

/* ============================================================
   IL NOME — the "La Meridiana" name story + animated sundial.
   Reuses the meridian motif (brass arc/ticks, red sun-dot); no new system.
   ============================================================ */
.namestory{background:var(--green-deep);color:var(--cream);text-align:center}
.namestory .eyebrow{color:var(--brass-hi);justify-content:center}
.namestory .eyebrow::before,.namestory .eyebrow::after{background:var(--brass-hi)}
.namestory h2{
  font-size:clamp(34px,4.6vw,60px);font-weight:500;line-height:1.04;margin-top:22px;
}
.namestory h2 em{font-style:italic;color:var(--brass-hi)}
/* Il Nome keeps a slim static meridian accent (the .ticks motif); the live
   animated sundial now lives in the hero, above the headline. */
.namestory .ticks{margin:28px auto 30px}

.namestory__lead{
  font-size:clamp(20px,2.3vw,27px);line-height:1.35;max-width:30ch;margin:0 auto;
}
.namestory__lead em{font-style:italic;color:var(--brass-hi)}
.namestory__sub{
  margin:22px auto 0;max-width:48ch;font-size:17px;color:rgba(245,239,226,.72);
}

/* ============================================================
   HERO SUNDIAL — a compact live meridian just above the headline.
   The sun sweeps to noon on load, then rests where the sun actually is
   over East Horsley (js-driven, computed on the arc every frame).
   ============================================================ */
.herodial{
  width:clamp(230px,27vw,360px);margin:0 0 30px;line-height:0;opacity:1;
}
.herodial svg{width:100%;height:auto;overflow:visible;display:block}
.herodial .hd-horizon{stroke:rgba(201,169,106,.32);stroke-width:1}
.herodial .hd-arc{
  fill:none;stroke:var(--brass-hi);stroke-width:1.5;
  stroke-dasharray:346;stroke-dashoffset:346;
  animation:hdDraw 1.2s var(--ease) .3s forwards;
}
.herodial .hd-ticks line{stroke:rgba(201,169,106,.5);stroke-width:1}
.herodial .hd-noon{
  stroke:var(--brass-hi);stroke-width:1;stroke-dasharray:2 4;
  transform:scaleY(0);transform-box:fill-box;transform-origin:top;
  animation:hdNoon .7s var(--ease) 1.1s forwards;
}
@keyframes hdDraw{to{stroke-dashoffset:0}}
@keyframes hdNoon{to{transform:scaleY(1)}}
/* the sun — a full, solid disc with a warm glow (no transparency) */
.herodial .sun{
  transform:translate(0,0);
  filter:drop-shadow(0 0 6px rgba(190,59,38,1)) drop-shadow(0 0 16px rgba(190,59,38,.7));
}
.herodial .sun circle{fill:var(--tomato)}
/* once the intro has settled, freeze the draw-ins so nothing replays (no flicker) */
.herodial.settled,.herodial.settled .hd-arc,.herodial.settled .hd-noon{animation:none}
.herodial.settled .hd-arc{stroke-dashoffset:0}
.herodial.settled .hd-noon{transform:none}

/* ============================================================
   INTRO — the sundial fills the screen on load, the sun rides to the
   current time, then the dial shrinks (FLIP) into the hero. The green
   backdrop covers the page until then; hidden for reduced-motion.
   ============================================================ */
.sunintro{
  position:fixed;inset:0;z-index:9990;background:var(--green);
  opacity:1;pointer-events:none;
}
.sunintro.lift{opacity:0;transition:opacity 1s var(--ease)}
/* the brand emblem, sitting above the curve during the intro (js positions it) */
.sunintro__logo{
  position:absolute;left:0;right:0;margin:0 auto;top:20%;
  /* shrink proportionally on phones so the emblem stays in scale with the
     smaller dial and never crowds the arc (JS positions the vertical gap) */
  width:clamp(130px,40vw,300px);height:auto;
  opacity:0;
}
.sunintro.show-logo .sunintro__logo{opacity:1;transition:opacity .8s var(--ease)}
.sunintro.lift .sunintro__logo{transform:translateY(-34px) scale(.94);transition:transform 1s var(--ease)}
.sunintro__time{
  position:absolute;top:63%;left:0;right:0;text-align:center;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--brass-hi);
  opacity:0;transform:translateY(8px);
}
.sunintro__time.show{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* the hero dial while it is playing the full-screen intro */
.herodial.is-intro{opacity:1 !important;animation:none;margin:0;will-change:transform}

/* Choreographed reveal (home only): the nav/logo and hero content are held
   until the intro finishes, then they animate into place. JS adds `.lit`. */
body.has-intro .nav{opacity:0;transform:translateY(-16px)}
body.has-intro .hero h1 .line > span,
body.has-intro .hero__rule,
body.has-intro .hero__rule::after,
body.has-intro .hero__sub,
body.has-intro .hero__cta,
body.has-intro .hero__foot{animation-play-state:paused}
body.has-intro.lit .nav{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
body.has-intro.lit .hero h1 .line > span,
body.has-intro.lit .hero__rule,
body.has-intro.lit .hero__rule::after,
body.has-intro.lit .hero__sub,
body.has-intro.lit .hero__cta,
body.has-intro.lit .hero__foot{animation-play-state:running}

/* ============================================================
   FOOD HYGIENE RATING — polished, on-brand card + row.
   Real FSA rating (5, Very Good); links to the official source.
   ============================================================ */
.hygiene{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.hygiene__body h2{font-size:clamp(30px,3.7vw,52px);font-weight:500;line-height:1.04}
.hygiene__body h2 em{font-style:italic;color:var(--brass)}
.hygiene__body > p{margin-top:22px;font-size:18px;line-height:1.65;color:var(--ink-soft);max-width:48ch}
.hygiene__body strong{color:var(--ink);font-weight:600}
.hygiene__cta{margin-top:32px}

.fhrs{
  border:1px solid var(--brass);background:var(--green);color:var(--cream);
  padding:48px 40px;text-align:center;position:relative;
}
.fhrs::before{ /* a thin brass inner frame, echoing the plaques */
  content:"";position:absolute;inset:9px;border:1px solid rgba(201,169,106,.28);pointer-events:none;
}
.fhrs__kicker{
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--brass-hi);
}
.fhrs__num{font-family:var(--serif);font-weight:600;font-size:clamp(84px,10vw,122px);line-height:1;margin:14px 0 2px}
.fhrs__num span{color:var(--brass-hi);font-size:.4em;vertical-align:super;letter-spacing:.02em}
.fhrs__verdict{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,34px);color:var(--brass-hi)}
.fhrs__scale{display:flex;justify-content:center;gap:14px;margin:28px 0 20px}
.fhrs__scale i{font-family:var(--sans);font-size:13px;font-weight:600;font-style:normal;color:rgba(245,239,226,.36)}
.fhrs__scale .on{position:relative;color:var(--cream)}
.fhrs__scale .on::after{ /* the meridian sun-dot marks the top score */
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--tomato);
}
.fhrs__src{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,239,226,.55)}
@media(max-width:900px){.hygiene{grid-template-columns:1fr;gap:40px}}

/* Home menu section — link to the Set Lunch & Takeaway tabs on the full menu */
.menu__more{
  text-align:center;margin-top:22px;
  font-family:var(--serif);font-size:18px;color:rgba(245,239,226,.8);
}
.menu__more a{
  color:var(--brass-hi);border-bottom:1px solid rgba(201,169,106,.45);
  transition:border-color .3s var(--ease);
}
.menu__more a:hover{border-color:var(--brass-hi)}

/* Short desktop/laptop viewports: keep the enlarged hero dial from crowding the
   headline (hero is 100vh + vertically centred). Only affects wide + short screens. */
@media (min-width:901px) and (max-height:820px){
  .hero__text{padding-top:112px;padding-bottom:70px}
  .herodial{width:clamp(180px,19vw,250px);margin-bottom:18px}
  .hero h1{font-size:clamp(46px,5vw,74px)}
}

/* ============================================================
   IL SOLE — light system.  Colours flow from these variables; the phase
   classes (set by assets/js/sole.js) grade the brand palette by time of day.
   NOON IS THE BASELINE — with white wash + no phase class the site is
   pixel-identical to before.  All phase colours live here (no component
   hardcodes a phase colour).
   ============================================================ */
:root{
  --sun-altitude:45;
  --sun-warmth:1;
  --shadow-length:5px;
  --shadow-angle:90deg;
  --wash:#ffffff;                 /* global multiply tint — white = no change */
  --sky-color:var(--green);
  --light-color:#fff6e6;          /* warm daylight (disc / cursor glow) */
  --sun-glow:var(--tomato);       /* the travelling sun-disc colour */
}

/* the light itself: one multiply layer graded by --wash. Sits above content
   but below the intro overlay; pointer-events off. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9985;
  background:var(--wash);mix-blend-mode:multiply;
  transition:background 1.2s var(--ease);
}
/* dinner-mode star field over the header area (night only) */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:62vh;pointer-events:none;z-index:9986;
  opacity:0;transition:opacity 1.6s var(--ease);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff 40%, transparent 60%),
    radial-gradient(1.2px 1.2px at 26% 42%, #ffe9c7 40%, transparent 60%),
    radial-gradient(1px 1px at 38% 14%, #fff 40%, transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 30%, #fff 40%, transparent 60%),
    radial-gradient(1px 1px at 63% 12%, #ffe9c7 40%, transparent 60%),
    radial-gradient(1.3px 1.3px at 71% 38%, #fff 40%, transparent 60%),
    radial-gradient(1px 1px at 82% 20%, #fff 40%, transparent 60%),
    radial-gradient(1.4px 1.4px at 90% 46%, #ffe9c7 40%, transparent 60%),
    radial-gradient(1px 1px at 46% 52%, #fff 40%, transparent 60%),
    radial-gradient(1.2px 1.2px at 18% 56%, #fff 40%, transparent 60%);
}
body.phase-night::before{opacity:.55}

/* ---- the six phases (grade the brand palette) ---- */
body.phase-dawn{
  --wash:#d8e0f3; --sky-color:#243350; --light-color:#e7ddff; --sun-glow:#e9d7ff;
}
body.phase-morning{
  --wash:#eef2ee; --sky-color:#1d4636; --light-color:#fff8ec; --sun-glow:var(--tomato);
}
body.phase-noon{
  --wash:#ffffff; --sky-color:var(--green); --light-color:#fff6e6; --sun-glow:var(--tomato);
}
body.phase-golden{
  --wash:#ffd6a0; --sky-color:#3a2712; --light-color:#ffdca0; --sun-glow:#eaa24a;
}
body.phase-dusk{
  --wash:#ccb4d2; --sky-color:#271933; --light-color:#e9c6d6; --sun-glow:#e6a6c8;
}
body.phase-night{
  --wash:#e2cfa6;                 /* warm candlelight — kept light so text stays AA */
  --green:#0c1424; --green-deep:#070c18; --green-soft:#17233c;
  --brass:#c69c54; --brass-hi:#e6c079; --tomato:#d84c30;
  --sky-color:#060a16; --light-color:#ffcf87; --sun-glow:#cfd6e6;   /* moon-silver disc */
}

/* ============================================================
   LA LINEA — the brass meridian line as the homepage scroll spine.
   A 2px brass line down the left margin; a glowing sun-disc rides it with
   scroll; section markers flare as the disc passes.  Disc glow = --sun-glow
   (phase-aware).  Homepage only.
   ============================================================ */
.home .meridian{display:none}          /* La Linea replaces the plain rail on home */

.linea{
  position:fixed;top:0;bottom:0;z-index:9987;width:3px;pointer-events:none;   /* above the phase-wash: always full brass */
  left:clamp(16px, calc(50vw - 590px - 22px), 220px);
  background:linear-gradient(to bottom,
    transparent 0, var(--brass) 4%, var(--brass) 96%, transparent 100%);
  box-shadow:0 0 7px rgba(201,169,106,.55), 0 0 1px rgba(20,15,5,.4);
}
.linea__disc{
  position:absolute;left:50%;top:0;width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--sun-glow);
  box-shadow:0 0 4px 1px var(--sun-glow), 0 0 16px 5px var(--sun-glow);
  transition:background .8s var(--ease), box-shadow .8s var(--ease);
}
.linea__mark{ position:absolute;left:50%;transform:translate(-50%,-50%); }  /* centred on the line */
.linea__mark i{                          /* the dot — sits on the middle of the line */
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 0 2px var(--brass), 0 0 7px 2px rgba(201,169,106,.6);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.linea__mark span{                       /* the plaque label, in the gutter to the left */
  position:absolute;right:16px;top:0;transform:translateY(-50%);
  white-space:nowrap;text-align:right;
  font-family:var(--serif);font-style:italic;font-variant:small-caps;font-weight:600;
  font-size:14px;letter-spacing:.11em;color:var(--brass-hi);opacity:1;
  /* dark halo so the brass reads on both the cream and green sections */
  text-shadow:0 0 2px rgba(18,12,3,.9), 0 1px 2px rgba(18,12,3,.7), -.5px -.5px 0 rgba(18,12,3,.35);
  transition:color .45s var(--ease);
}
.linea__mark.flare span{color:#f4d99a}
.linea__mark.flare i{background:var(--sun-glow);transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 0 2px var(--sun-glow), 0 0 12px 4px var(--sun-glow)}

@media(max-width:1499px){ .linea__mark span{display:none} }   /* only wide desktops show plaques; else dots */
@media(max-width:760px){ .linea{left:0} }                     /* hairline at the very edge */
@media(prefers-reduced-motion:reduce){
  .linea__disc{display:none}                                   /* no travelling disc */
}

/* ============================================================
   IL CURSORE — the cursor is the sun (desktop, fine pointer only).
   A soft warm glow follows the pointer; .sun-lit elements cast a shadow
   that leans AWAY from it. Values are driven per-element by js; softness
   inherits --shadow-length from Il Sole. Touch + reduced-motion: nothing.
   ============================================================ */
.sun-cursor{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:9970;opacity:.18;mix-blend-mode:soft-light;
  background:radial-gradient(circle, var(--light-color) 0%, transparent 62%);
  will-change:transform;
}
.sun-lit{
  box-shadow: var(--sl-x,0px) var(--sl-y,0px) calc(15px + var(--shadow-length,6px)) 0
              rgba(26,19,9, var(--sl-op,0));
}
@media (hover:none),(pointer:coarse){ .sun-cursor{display:none} }
@media (prefers-reduced-motion:reduce){ .sun-cursor{display:none} }

/* ============================================================
   IL VERO MEZZOGIORNO — for the minute of true solar noon, La Linea flares
   brighter and a note appears by the disc. Toggled by body.true-noon (sole.js).
   ============================================================ */
body.true-noon .linea{
  background:linear-gradient(to bottom,
    transparent 0, rgba(201,169,106,.75) 5%, rgba(201,169,106,.75) 95%, transparent 100%);
}
body.true-noon .linea__disc{
  width:16px;height:16px;
  box-shadow:0 0 6px 2px var(--sun-glow), 0 0 26px 9px var(--sun-glow);
}
.linea__noon{
  position:absolute;left:24px;top:50%;transform:translateY(-50%) translateX(-6px);
  white-space:nowrap;pointer-events:none;
  font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:.02em;
  color:var(--brass-hi);background:rgba(12,18,20,.72);padding:6px 14px;border:1px solid var(--brass);
  opacity:0;transition:opacity .6s var(--ease), transform .6s var(--ease);
}
body.true-noon .linea__noon{opacity:1;transform:translateY(-50%) translateX(0)}
@media(prefers-reduced-motion:reduce){ .linea__noon{transition:none} }

/* ============================================================
   LOGO LOCKUP — the recoloured emblem in the nav & footer.
   Nav carries a dark-bg (cream+brass) and a light-bg (brass+green) copy and
   cross-fades them when the header turns cream on scroll.
   ============================================================ */
.nav__brand{position:relative;display:flex;align-items:center}
.nav__logo{display:block;height:52px;width:auto;transition:height .4s var(--ease), opacity .35s var(--ease)}
.nav.scrolled .nav__logo{height:42px}
.nav__logo--light{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.nav.scrolled .nav__logo--dark{opacity:0}
.nav.scrolled .nav__logo--light{opacity:1}
@media(max-width:600px){ .nav__logo{height:44px} .nav.scrolled .nav__logo{height:38px} }