/* Galley of Elise - Chef Elise Carvel
   Theme: vintage - mermaid - sapphic - floral
   Deep sea teal + seafoam + dusty blush + antique gold on warm cream paper.
   Display: Cormorant Garamond. Body: EB Garamond. Wordmark: Pinyon Script. */

:root{
  --cream:#F6EEDF; --cream-2:#FBF6EC; --paper:#F1E7D3;
  --teal:#1B4A54; --teal-2:#143A42; --teal-3:#2E6774; --teal-ink:#0E2A30;
  --sea:#6E9B8B; --seafoam:#CBDFD5;
  --blush:#C68A82; --blush-soft:#E7C7C1;
  --gold:#BE9B4E; --gold-2:#A6843A; --gold-soft:#E4CF9C;
  --lav:#9A8BB0;
  --ink:#2C2B27; --ink-soft:#5C584F; --muted:#817B6E;
  --line:#E3D7BF; --line-teal:rgba(228,207,156,.26);

  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"EB Garamond", Georgia, serif;
  --script:"Pinyon Script", "Snell Roundhand", cursive;

  --wrap:1200px; --narrow:760px;
  --r:4px; --r-lg:10px;
  --shadow:0 18px 50px -24px rgba(20,58,66,.45);
  --shadow-soft:0 10px 30px -18px rgba(20,58,66,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:19px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* faint paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative; z-index:1}

img{max-width:100%; display:block; height:auto}
a{color:var(--teal-3); text-decoration:none; transition:color .2s}
a:hover{color:var(--gold-2)}
::selection{background:var(--blush-soft); color:var(--teal-2)}
.wrap{width:92%; max-width:var(--wrap); margin-inline:auto}
.narrow{max-width:var(--narrow)}
.center{text-align:center}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:1000; background:var(--gold); color:var(--teal-2); padding:10px 16px; border-radius:var(--r)}

h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.08; color:var(--teal-2); margin:0 0 .4em; letter-spacing:.005em}
h1{font-size:clamp(2.7rem,7vw,5.4rem); font-weight:500}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-size:1.5rem}
p{margin:0 0 1.1em}
.eyebrow{font-family:var(--body); font-size:.82rem; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-2); margin:0 0 .9em}
.eyebrow.light{color:var(--gold-soft)}
.lead-line{font-style:italic; font-weight:400; color:var(--teal); font-size:clamp(1.7rem,3.3vw,2.6rem)}
.accent{color:var(--blush); font-style:italic}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-family:var(--body); font-size:.82rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  padding:.92em 1.7em; border-radius:var(--r); border:1px solid transparent; transition:all .25s ease;
}
.btn .arw{width:19px; height:15px; transition:transform .25s}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--teal); color:var(--cream-2); border-color:var(--teal)}
.btn-primary:hover{background:var(--gold); color:var(--teal-2); border-color:var(--gold)}
.btn-outline{background:transparent; color:var(--teal); border-color:var(--teal)}
.btn-outline:hover{background:var(--teal); color:var(--cream-2)}
.btn-ghost{background:transparent; color:var(--teal); border-color:rgba(27,74,84,.35)}
.btn-ghost:hover{background:var(--teal); color:var(--cream-2); border-color:var(--teal)}
.btn-ghost.light{color:var(--cream-2); border-color:rgba(246,238,223,.5)}
.btn-ghost.light:hover{background:var(--cream-2); color:var(--teal-2); border-color:var(--cream-2)}

/* ---------- header ---------- */
.site-header{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .3s, box-shadow .3s, padding .3s; padding:.4rem 0}
.site-header .bar{display:flex; align-items:center; gap:1.5rem; min-height:76px}
.site-header.scrolled{background:var(--teal); box-shadow:0 10px 30px -18px rgba(14,42,48,.8)}
.wordmark{font-family:var(--script); color:var(--cream-2); font-size:2.3rem; line-height:1; margin-right:auto; text-shadow:0 1px 10px rgba(14,42,48,.4)}
.wordmark:hover{color:var(--gold-soft)}
.primary-nav ul{display:flex; gap:1.9rem; list-style:none; margin:0; padding:0}
.primary-nav a{font-family:var(--body); font-size:.8rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-2); padding:.4em 0; position:relative; opacity:.92}
.primary-nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--gold-soft); transition:right .28s}
.primary-nav a:hover,.primary-nav a.is-active{color:#fff; opacity:1}
.primary-nav a:hover::after,.primary-nav a.is-active::after{right:0}
.nav-cta{padding:.7em 1.3em}
.nav-toggle{display:none; flex-direction:column; gap:5px; width:44px; height:40px; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{height:2px; background:var(--cream-2); border-radius:2px; transition:.3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; color:var(--cream-2)}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.hero-scrim{position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 30%, rgba(14,42,48,.5) 100%),
    linear-gradient(180deg, rgba(14,42,48,.55) 0%, rgba(14,42,48,.2) 38%, rgba(14,42,48,.45) 72%, rgba(27,74,84,.8) 100%);
}
.hero-inner{position:relative; text-align:center; padding:9rem 0 7rem; max-width:860px}
.hero-script{font-family:var(--script); font-size:clamp(3rem,9vw,5.6rem); line-height:1; margin:0 0 .1em; color:var(--cream-2); text-shadow:0 2px 20px rgba(14,42,48,.5)}
.hero h1{color:#fff; font-weight:500; font-size:clamp(2rem,5vw,3.4rem); letter-spacing:.14em; text-transform:uppercase; margin:.2em 0 .3em}
.hero-sub{font-style:italic; font-size:clamp(1.1rem,2.3vw,1.5rem); color:var(--seafoam); margin:0 0 .5em; letter-spacing:.02em}
.hero-lead{max-width:560px; margin:0 auto 2rem; color:rgba(246,238,223,.92)}
.hero-cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
.hero-wave{position:absolute; left:0; right:0; bottom:-1px; line-height:0}
.wave{width:100%; height:62px; display:block; fill:var(--cream)}

/* page hero (About / Contact / 404) */
.page-hero{position:relative; min-height:62vh; display:flex; align-items:center; text-align:center; color:var(--cream-2); overflow:hidden}
.page-hero.slim{min-height:46vh}
.page-hero-media{position:absolute; inset:0}
.page-hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.page-hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,42,48,.5), rgba(27,74,84,.82))}
.page-hero-scrim.solid{background:
  radial-gradient(90% 120% at 50% 0, var(--teal-3), var(--teal) 55%, var(--teal-2) 100%)}
.page-hero .wrap{position:relative; padding:8rem 0 5rem}
.page-hero h1{color:#fff; font-size:clamp(2.6rem,6vw,4.6rem)}
.page-hero .hero-sub{color:var(--seafoam)}
.page-hero .hero-script{font-size:clamp(2.4rem,6vw,3.6rem)}

/* ---------- sections ---------- */
.section{padding:clamp(4rem,9vw,7.5rem) 0; position:relative}
.section.alt{background:var(--paper)}
.sec-head{max-width:640px; margin:0 0 3rem}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-sub{color:var(--ink-soft); font-size:1.12rem; font-style:italic; margin:.4em 0 0}

/* botanical sprig */
.sprig{width:70px; height:70px; color:var(--sea); margin:0 auto .4rem; opacity:.9}
.sprig.mini{width:54px; height:54px; color:var(--gold); opacity:.85}
.scallop{width:58px; height:52px; color:var(--gold); margin-bottom:1rem}

/* pearls divider */
.pearls{display:flex; gap:12px; justify-content:center; align-items:center; margin:1.4rem auto}
.pearls span{width:7px; height:7px; border-radius:50%; background:var(--gold)}
.pearls span:nth-child(2){width:9px; height:9px; background:var(--blush); box-shadow:0 0 0 3px rgba(198,138,130,.18)}

/* ---------- about teaser ---------- */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:center}
.portrait{position:relative; margin:0}
.portrait .frame{position:relative; border-radius:220px 220px 10px 10px; overflow:hidden; box-shadow:var(--shadow)}
.portrait .frame::after{content:""; position:absolute; inset:0; border:1px solid var(--gold-soft); border-radius:inherit; margin:10px; pointer-events:none; mix-blend-mode:overlay}
.portrait img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%}
.portrait .sprig{position:absolute; width:90px; height:90px; color:var(--sea); opacity:.8; margin:0}
.portrait .sprig.tl{top:-26px; left:-26px; transform:rotate(-30deg)}
.portrait .sprig.br{bottom:-26px; right:-26px; transform:rotate(150deg)}
.about-copy .lead-line{margin:.1em 0 .6em}
.about-places{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:1.4rem 0 1.8rem; font-family:var(--body)}
.about-places span{font-style:italic; color:var(--muted); font-size:1rem; display:inline-flex; align-items:center}
.about-places span+span::before{content:"\2766"; color:var(--gold); margin-right:1.4rem; margin-left:-.8rem; font-style:normal}

/* ---------- dishes gallery ---------- */
.dishes .dish-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem}
.dish{margin:0}
.dish .frame{position:relative; overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--shadow-soft); background:var(--teal-2)}
.dish .frame::after{content:""; position:absolute; inset:8px; border:1px solid rgba(246,238,223,.5); border-radius:4px; pointer-events:none; z-index:2; transition:inset .3s, border-color .3s}
.dish img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s ease}
.dish:hover img{transform:scale(1.06)}
.dish:hover .frame::after{inset:12px; border-color:var(--gold-soft)}
.dish figcaption{display:flex; flex-direction:column; text-align:center; padding:.9rem .4rem 0}
.dish-name{font-family:var(--display); font-size:1.28rem; color:var(--teal-2); line-height:1.15}
.dish-note{font-style:italic; color:var(--muted); font-size:.92rem; margin-top:.15rem}

/* ---------- services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.svc{background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:2.2rem 1.6rem; text-align:center; transition:transform .3s, box-shadow .3s, border-color .3s}
.svc:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--gold-soft)}
.svc-ic-wrap{display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; background:var(--seafoam); color:var(--teal); margin-bottom:1.1rem; box-shadow:inset 0 0 0 1px rgba(27,74,84,.12)}
.svc-ic{width:30px; height:30px}
.svc h3{color:var(--teal-2); margin-bottom:.4em}
.svc p{color:var(--ink-soft); font-size:1rem; margin:0}

/* ---------- recognition ---------- */
.recognition{background:var(--teal); color:var(--cream-2); overflow:hidden}
.recognition h2{color:#fff}
.recognition .recog-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; position:relative}
.recog-copy p{color:rgba(246,238,223,.9); font-size:1.12rem}
.menu-card .frame.gold{border:1px solid var(--gold); padding:10px; border-radius:var(--r); background:var(--teal-2); box-shadow:var(--shadow)}
.menu-card img{border-radius:2px}
.recog-solo{max-width:720px}
.recog-solo .scallop{color:var(--gold-soft)}

/* ---------- about long (about page) ---------- */
.about-long .prose p{font-size:1.12rem; color:var(--ink)}
.about-long .prose p:first-child::first-letter{font-family:var(--display); font-size:3.4em; line-height:.8; float:left; color:var(--blush); padding:.05em .1em 0 0; font-weight:500}
.philosophy{list-style:none; padding:0; margin:2.4rem 0 0; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}
.philosophy li{font-style:italic; color:var(--teal); border:1px solid var(--gold-soft); background:var(--cream-2); border-radius:40px; padding:.5em 1.3em; font-size:1rem}
.svc-long{list-style:none; padding:0; margin:0; display:grid; gap:1.1rem}
.svc-long li{padding-left:1.6rem; position:relative; color:var(--ink-soft); font-size:1.1rem}
.svc-long li::before{content:"\2766"; position:absolute; left:0; color:var(--gold); top:.1em}
.svc-long strong{color:var(--teal-2); font-weight:600}
.cta-line{font-style:italic; color:var(--teal); max-width:620px; margin:0 auto 1.6rem}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,6vw,4.5rem); align-items:start}
.contact-copy h2{margin-top:.1em}
.contact-note{font-style:italic; color:var(--muted)}
.contact-ig{margin-top:1.4rem}
.contact-ig a{letter-spacing:.04em; border-bottom:1px solid var(--gold-soft); padding-bottom:2px}
.contact-formwrap{background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.6rem,4vw,2.6rem); box-shadow:var(--shadow-soft)}
.inquiry .row.two{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.inquiry label{display:block; margin-bottom:1.1rem; font-family:var(--body); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:500}
.inquiry .opt{text-transform:none; letter-spacing:0; font-size:.8rem; font-style:italic; color:var(--muted)}
.inquiry input,.inquiry select,.inquiry textarea{
  width:100%; margin-top:.4rem; font-family:var(--body); font-size:1.05rem; color:var(--ink);
  background:var(--cream); border:0; border-bottom:1.5px solid var(--line); border-radius:0;
  padding:.55rem .2rem; transition:border-color .2s; text-transform:none; letter-spacing:normal;
}
.inquiry textarea{border:1.5px solid var(--line); border-radius:var(--r); padding:.7rem; resize:vertical}
.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{outline:none; border-color:var(--gold-2)}
.inquiry .hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0}
.form-foot{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.4rem}
.form-status{margin:0; font-style:italic; font-size:.98rem}
.form-status.ok{color:var(--sea)}
.form-status.err{color:#b4524a}
.inquiry.sent{opacity:.6; pointer-events:none}

/* ---------- footer ---------- */
.site-footer{position:relative; background:var(--teal-2); color:var(--seafoam); padding:4rem 0 2rem; overflow:hidden}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; position:relative; z-index:1; padding-bottom:2.5rem; border-bottom:1px solid var(--line-teal)}
.foot-brand .wordmark{font-size:2.6rem; margin:0; display:inline-block}
.foot-tag{font-style:italic; color:var(--seafoam); margin:.2em 0 1rem}
.foot-brand .scallop{color:var(--gold); margin:0}
.foot-nav ul,.foot-social{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem}
.foot-nav a,.foot-social a{color:var(--seafoam); font-size:.95rem; letter-spacing:.04em}
.foot-nav a:hover,.foot-social a:hover{color:var(--gold-soft)}
.foot-social{gap:.9rem}
.foot-base{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.6rem; position:relative; z-index:1; flex-wrap:wrap}
.foot-base p{margin:0; font-size:.85rem; color:rgba(203,223,213,.65); letter-spacing:.04em}
.foot-base .pearls{margin:0}

/* ---------- mermaid scales texture ---------- */
.scales{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  --sc:rgba(228,207,156,.16);
  background-image:
    radial-gradient(circle at 15px 0, transparent 13.5px, var(--sc) 14.5px, transparent 15.5px),
    radial-gradient(circle at 0 15px, transparent 13.5px, var(--sc) 14.5px, transparent 15.5px),
    radial-gradient(circle at 30px 15px, transparent 13.5px, var(--sc) 14.5px, transparent 15.5px);
  background-size:30px 30px;
}
.scales.soft{opacity:.4}
.site-footer .scales{opacity:.35}

/* ---------- reveal on scroll (only active when JS is present) ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .dishes .dish-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  body{font-size:18px}
  .nav-cta{display:none}
  .nav-toggle{display:flex}
  .primary-nav{position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:var(--teal); box-shadow:-20px 0 60px -30px #000;
    transform:translateX(100%); transition:transform .35s ease; padding:6rem 2rem 2rem; z-index:90}
  .site-header.nav-open{background:var(--teal)}
  .primary-nav.open{transform:none}
  .primary-nav ul{flex-direction:column; gap:1.4rem}
  .primary-nav a{font-size:1rem}
  .nav-backdrop{position:fixed; inset:0; background:rgba(14,42,48,.5); opacity:0; visibility:hidden; transition:.3s; z-index:80}
  .nav-backdrop.show{opacity:1; visibility:visible}
  .about-grid,.recognition .recog-grid,.contact-grid{grid-template-columns:1fr; gap:2.4rem}
  .portrait{max-width:420px; margin:0 auto}
  .portrait .frame{border-radius:200px 200px 10px 10px}
  .recognition .recog-grid{text-align:center}
  .foot-grid{grid-template-columns:1fr; gap:2rem; text-align:center}
  .foot-nav ul,.foot-social{align-items:center}
}
@media (max-width:520px){
  .dishes .dish-grid{grid-template-columns:1fr 1fr; gap:1rem}
  .svc-grid{grid-template-columns:1fr}
  .inquiry .row.two{grid-template-columns:1fr}
  .hero-inner{padding:7rem 0 5rem}
  .dish-name{font-size:1.08rem}
}