/* =========================================================
   Restaurant LUMEN. — dark cinematic fine-dining
   Design tokens reverse-engineered from restaurantgem.com
   ========================================================= */

:root{
  /* ---- colour ---- */
  --bg:            #151515;
  --text:          #ffffff;
  --primary:       #b58c67;   /* bronze — 6.0:1 on --bg, passes AA */
  --primary-hover: #a67b5c;
  --border:        #2e2e2e;
  --muted:         rgba(255,255,255,.62);

  /* ---- type ---- */
  --font-body:    "DM Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Gilda Display", "Times New Roman", Georgia, serif;

  /* ---- rhythm (spacious: dial 3/10) ---- */
  --space-section: 5rem;      /* re-declared per breakpoint below */
  --container:     100%;
  --gutter:        20px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.77,0,.175,1);
  --dur:  .5s;

  /* ---- layers ---- */
  --z-header: 30;
  --z-overlay: 100;
}

@media (min-width: 768px){
  :root{ --space-section:10rem; --container:1440px; --gutter:30px; }
}
@media (min-width: 1400px){
  :root{ --space-section:15rem; --container:1700px; --gutter:40px; }
}

/* ---------------- reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  font-size:1rem;
  line-height:1.6;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; margin:0; line-height:1.12; }
a{ color:var(--text); text-decoration:none; }
p{ margin:0 0 1.2em; }
address{ font-style:normal; }
button{ font:inherit; color:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.spacing{ margin-top:var(--space-section); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--primary); color:#151515; padding:12px 20px;
}
.skip-link:focus{ left:0; }

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
}

/* ---------------- signature: outline type ---------------- */
.outline-title{
  color:transparent;
  -webkit-text-stroke:.5px var(--primary);
  text-stroke:.5px var(--primary);
}

.eyebrow{
  display:block;
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:1.5rem;
}

.section-title{
  font-size:clamp(1.9rem, 4vw, 3.4rem);
  max-width:18ch;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;
  background:transparent;
  border:1px solid var(--primary);
  border-radius:0;
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  letter-spacing:.02em;
  padding:12px 24px;
  text-transform:uppercase;
  cursor:pointer;
  transition:color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}
.btn:hover,
.btn:focus-visible{
  color:var(--primary-hover);
  border-color:var(--primary-hover);
  background:rgba(181,140,103,.08);
}

/* ---------------- reveal primitive ---------------- */
.g-fadein{
  opacity:0;
  transform:translateY(100px);
  transition:opacity 1s ease, transform 1s ease;
  backface-visibility:hidden;
}
.g-fadein.visible{ opacity:1; transform:none; }
.dt-100{ transition-delay:.1s } .dt-200{ transition-delay:.2s }
.dt-300{ transition-delay:.3s } .dt-400{ transition-delay:.4s }
.dt-500{ transition-delay:.5s } .dt-600{ transition-delay:.6s }

/* ---------------- header ---------------- */
.site-header{
  position:absolute; inset:0 0 auto 0;
  z-index:var(--z-header);
  padding-top:1.5rem;
}
.nav-bar{ display:flex; align-items:center; justify-content:space-between; }

.brand{
  display:inline-flex; align-items:center;
  min-height:44px;                 /* touch target */
  padding-block:4px;
}
/* Gold wordmark. Kept at auto height so the 3.2:1 artwork never distorts. */
.brand-logo{
  width:150px; height:auto;
  transition:opacity var(--dur) var(--ease);
}
.brand:hover .brand-logo{ opacity:.82; }
.brand-logo-lg{ width:210px; margin-bottom:2rem; }
.brand-logo-footer{ width:170px; }

@media (min-width:768px){
  .brand-logo{ width:170px; }
  .brand-logo-lg{ width:240px; }
}

/* Text fallback kept for anywhere the wordmark is set in type */
.brand-mark{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:.04em;
}

.menu-toggle{
  display:flex; align-items:center; gap:20px;
  background:none; border:0; cursor:pointer;
  padding:12px 4px;                /* keeps the 44px touch target */
}
.menu-toggle-label{
  color:var(--primary);
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.hamburger{ position:relative; display:block; width:30px; height:20px; }
.hamburger .line{
  position:absolute; left:0;
  display:block; height:1px; width:100%;
  background:var(--primary);
  transition:transform .5s var(--ease), width .4s var(--ease),
             opacity .3s var(--ease), top .4s var(--ease);
}
.line-1{ top:0 }
.line-2{ top:9px; left:auto; right:0; width:75% }
.line-3{ top:18px }

.menu-open .line-1{ top:9px; transform:rotate(45deg) }
.menu-open .line-2{ opacity:0; width:0 }
.menu-open .line-3{ top:9px; transform:rotate(-45deg) }

/* ---------------- nav overlay ---------------- */
.nav-overlay{
  position:fixed; inset:0;
  z-index:var(--z-overlay);
  display:grid;
  grid-template-columns:1fr;
  background:linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.62)),
             url("../img/menu-overlay.jpg") center/cover no-repeat;
  opacity:0;
  pointer-events:none;                        /* not 'visibility': a visibility
                                                 transition leaves links
                                                 unfocusable mid-animation */
  transition:opacity .5s var(--ease);
  overflow-y:auto;
}
.nav-overlay[hidden]{ display:grid; }         /* animate instead of snap */
.nav-overlay.open{ opacity:1; pointer-events:auto; }

.nav-overlay-menu{
  display:flex; align-items:center; justify-content:center;
  padding:6rem var(--gutter) 2rem;
}
.overlay-list{ list-style:none; margin:0; padding:0; text-align:center; }
.overlay-list li{ overflow:hidden; }
.overlay-list a{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem, 7vw, 3.5rem);
  padding:.15em 0;
  transition:color var(--dur) var(--ease);
}
.overlay-list a:hover{ color:var(--primary); }

.nav-overlay-info{
  padding:0 var(--gutter) 4rem;
  text-align:center;
  color:var(--muted);
  font-size:15px;
}
.nav-overlay-info a{ color:var(--muted); }
.nav-overlay-info a:hover{ color:var(--primary); }
.overlay-contact,.overlay-hours{ margin-top:1.25rem; }

.nav-overlay-close{
  position:absolute; top:1rem; right:var(--gutter);
  width:48px; height:48px;
  background:none; border:0; cursor:pointer;
  color:var(--primary); font-size:2rem; line-height:1;
}

@media (min-width:900px){
  .nav-overlay{ grid-template-columns:1fr 30vw; }
  .nav-overlay-menu{ justify-content:flex-start; padding-left:8vw; }
  .overlay-list{ text-align:left; }
  .nav-overlay-info{
    display:flex; flex-direction:column; justify-content:center;
    text-align:left; padding:0 var(--gutter);
    border-left:1px solid var(--border);
    background:rgba(0,0,0,.35);
  }
}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
             url("../img/hero.jpg") center/cover no-repeat;
}
.hero-content{ position:relative; padding-top:6rem; padding-bottom:4rem; }
.hero h1{ margin:0; }
.hero-line{
  display:block;
  font-size:clamp(2.75rem, 15vw, 6.5rem);
}
.hero-intro{
  max-width:46ch;
  margin-top:1.5rem;
  font-size:clamp(1rem, 1.1vw, 1.125rem);
  color:rgba(255,255,255,.86);
}
.michelin{ display:flex; gap:20px; margin-top:1.5rem; }
.star{ width:34px; height:34px; color:var(--primary); }

@media (min-width:768px){
  .hero-media{ width:60vw; right:auto; }
  .hero-content{ padding-left:calc(var(--gutter) + 100px); }
  .hero-line{ font-size:clamp(3rem, 8vw, 6.5rem); }
}

/* ---------------- marquee ---------------- */
.marquee{ overflow:hidden; }
.marquee-row{
  display:flex;
  width:max-content;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:clamp(2rem, 8vw, 6.5rem);
  line-height:1.25;
  will-change:transform;
}

/* ---------------- about ---------------- */
.about-head{ display:grid; gap:2rem; }
.about-copy{ max-width:60ch; color:rgba(255,255,255,.8); }
@media (min-width:900px){
  .about-head{ grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
}

.about-gallery{
  display:grid; gap:20px;
  grid-template-columns:1fr;
  margin-top:4rem;
}
.about-figure{ margin:0; overflow:hidden; }
.about-figure img{
  width:100%; aspect-ratio:2/3; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.about-figure:hover img{ transform:scale(1.04); }
@media (min-width:768px){
  .about-gallery{ grid-template-columns:repeat(3,1fr); gap:30px; }
  .about-figure:nth-child(2){ margin-top:4rem; }
}

/* ---------------- featured menu ---------------- */
.featured{ display:grid; gap:3rem; }
@media (min-width:1000px){
  .featured{ grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
}

.featured-list{ display:flex; flex-direction:column; }
.dish{
  display:block;
  padding:1.6rem 0;
  border-bottom:1px solid var(--border);
  transition:padding-left var(--dur) var(--ease);
}
.dish:first-of-type{ border-top:1px solid var(--border); }
.dish:hover,.dish:focus-visible{ padding-left:14px; }
.dish-pre{
  display:block;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.4rem;
}
.dish-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-size:clamp(1.35rem, 2.6vw, 2rem);
  text-transform:uppercase;
  transition:color var(--dur) var(--ease);
}
.dish:hover .dish-title{ color:var(--primary); }
.dish-price{
  font-size:.6em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.featured-visual{ position:relative; overflow:hidden; }
.featured-visual img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.featured-hover{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.featured-hover.active{ opacity:1; }

/* ---------------- parallax band ---------------- */
.parallax{
  position:relative;
  padding:clamp(5rem,14vw,11rem) 0;
  overflow:hidden;
}
.parallax-media{
  position:absolute; inset:-15% 0;
  background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
             url("../img/interior-parallax.jpg") center/cover no-repeat;
  will-change:transform;
}
.parallax-content{ position:relative; text-align:center; }
.parallax-content .section-title{ margin-inline:auto; }
.parallax-content p{
  max-width:56ch; margin:1.5rem auto 2rem;
  color:rgba(255,255,255,.84);
}

/* ---------------- stay ---------------- */
.stay-title{ max-width:24ch; }
.stay-grid{
  display:grid; gap:2.5rem;
  grid-template-columns:1fr;
  margin-top:3.5rem;
}
@media (min-width:800px){ .stay-grid{ grid-template-columns:1fr 1fr; gap:30px; } }

.suite-media{ overflow:hidden; }
.suite-media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.suite:hover .suite-media img{ transform:scale(1.05); }
.suite-name{
  font-size:clamp(1.25rem,2vw,1.75rem);
  margin-top:1.25rem;
  transition:color var(--dur) var(--ease);
}
.suite:hover .suite-name{ color:var(--primary); }
.suite-meta{ display:block; color:var(--muted); font-size:14px; margin-top:.35rem; }

/* ---------------- castle band ---------------- */
.castle-band{
  position:relative;
  min-height:70svh;
  display:flex; align-items:flex-end;
  padding:clamp(3rem,8vw,6rem) 0;
  overflow:hidden;
}
.castle-media{
  position:absolute; inset:0;
  background:linear-gradient(rgba(21,21,21,.35), rgba(21,21,21,.9)),
             url("../img/castle.jpg") center/cover no-repeat;
}
.castle-content{ position:relative; }
.castle-content .section-title{ margin-bottom:2rem; }

/* ---------------- footer ---------------- */
.site-footer{
  margin-top:var(--space-section);
  padding-bottom:3rem;
  border-top:1px solid var(--border);
  padding-top:4rem;
}
.ig-title{ text-align:center; }
.ig-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .ig-grid{ grid-template-columns:repeat(6,1fr); } }
.ig-tile{ overflow:hidden; }
.ig-tile img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(.25);
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
.ig-tile:hover img{ transform:scale(1.06); filter:none; }

.footer-grid{
  display:grid; gap:3rem;
  grid-template-columns:1fr;
  margin-top:5rem;
  padding-top:3rem;
  border-top:1px solid var(--border);
}
@media (min-width:900px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr; gap:4rem; } }

.footer-heading{
  font-size:1.35rem;
  margin-bottom:1.25rem;
}
.footer-col{ color:var(--muted); font-size:15px; }
.footer-col a{ color:var(--muted); }
.footer-col a:hover{ color:var(--primary); }

.news-form label{
  display:block;
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--primary);
  margin-bottom:.6rem;
}
.news-row{ display:flex; flex-wrap:wrap; gap:12px; }
.news-form input{
  flex:1 1 220px;
  min-height:48px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:0;
  color:var(--text);
  padding:12px 16px;
  font-family:var(--font-body);
  font-size:16px;                     /* prevents iOS zoom-on-focus */
  transition:border-color var(--dur) var(--ease);
}
.news-form input::placeholder{ color:rgba(255,255,255,.35); }
.news-form input:focus{ border-color:var(--primary); outline:none; }
.news-form input[aria-invalid="true"]{ border-color:#e0794f; }
.news-help{ font-size:13px; margin:.9rem 0 0; color:rgba(255,255,255,.45); }
.news-status{ font-size:14px; margin:.6rem 0 0; min-height:1.4em; }
.news-status[data-state="error"]{ color:#e0794f; }
.news-status[data-state="ok"]{ color:var(--primary); }

.hours{ margin:0; }
.hours > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.35rem 0;
  border-bottom:1px solid var(--border);
}
.hours dt{ color:rgba(255,255,255,.75); }
.hours dd{ margin:0; font-variant-numeric:tabular-nums; }

.footer-base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem;
  margin-top:3.5rem; padding-top:2rem;
  border-top:1px solid var(--border);
}
.colophon{ margin:0; font-size:13px; color:rgba(255,255,255,.4); }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .g-fadein{ opacity:1; transform:none; }
  .marquee-row{ transform:none !important; }
  .parallax-media{ transform:none !important; inset:0; }
  .about-figure:hover img,
  .suite:hover .suite-media img,
  .ig-tile:hover img{ transform:none; }
}