/* Alpha Demo Restaurant — "Quiet Luxury" design system
   Ivory + champagne, editorial serif, generous whitespace, hairline framing. */

@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/libre-caslon-400.woff2') format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/libre-caslon-700.woff2') format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/libre-caslon-italic-400.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/jakarta.woff2') format('woff2')}

:root{
  --surface:#faf7f1;
  --surface-bright:#fffdf8;
  --surface-dim:#f0eade;
  --surface-deep:#e7dfd0;
  --on-surface:#26211a;
  --on-surface-variant:#6d6352;
  --on-surface-soft:#9b917d;
  --inverse-surface:#211c15;
  --inverse-on-surface:#f6f1e7;
  --line:rgba(38,33,26,.14);
  --line-strong:rgba(38,33,26,.32);
  --primary:#26211a;
  --on-primary:#f6f1e7;
  --accent:#b3925a;
  --accent-deep:#8e6f3e;
  --accent-soft:#dcc9a0;
  --accent-ghost:#f3ecd9;
  --radius-sm:2px;
  --shadow-soft:0 12px 34px -24px rgba(38,33,26,.3);
  --shadow-ambient:0 34px 70px -36px rgba(38,33,26,.36);
  --container:1180px;
  --margin-mobile:22px;
  --margin-desktop:72px;
  --section-gap:clamp(6.5rem,11vw,10.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--surface)}
body{margin:0;color:var(--on-surface);background:var(--surface);font-family:'Libre Caslon Text',Georgia,serif;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip-link{position:fixed;top:-3rem;left:1rem;z-index:100;background:var(--inverse-surface);color:var(--inverse-on-surface);padding:.6rem 1.1rem;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:var(--radius-sm);transition:top .25s ease}
.skip-link:focus{top:1rem}
img{display:block;max-width:100%}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(var(--margin-mobile),5vw,var(--margin-desktop))}

/* small-caps labels */
.eyebrow,.marker,.label,.note,.course-top,.sec-head span,footer span,.service{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.05rem clamp(1.4rem,5vw,var(--margin-desktop));background:color-mix(in srgb,var(--inverse-surface) 78%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid rgba(246,241,231,.1)}
header .brand{grid-column:2;justify-self:center;font-family:'Libre Caslon Text',serif;font-size:1.3rem;font-weight:700;letter-spacing:.36em;margin-right:-.36em;color:#f6f1e7}
header .marker{grid-column:1;justify-self:start;color:rgba(246,241,231,.62)}
header a.lang{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-soft);border-bottom:1px solid var(--accent-soft);padding:.55rem .4rem .3rem;margin:-.55rem -.4rem -.3rem}
header .end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:1.1rem}
header .tagline{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-soft);opacity:0;white-space:nowrap}
header a.lang:hover{color:var(--accent);border-color:var(--accent)}

/* footer */
footer{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:2.4rem clamp(1.4rem,5vw,var(--margin-desktop));border-top:1px solid var(--line);color:var(--on-surface-soft);font-size:.66rem}
footer span:last-child{max-width:40rem;text-align:right;font-family:'Libre Caslon Text',serif;font-size:.82rem;line-height:1.8;letter-spacing:.02em;text-transform:none;color:var(--on-surface-variant)}

/* hero — full-bleed, gently lit */
.hero{position:relative;min-height:100vh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero .photo{position:absolute;inset:0;z-index:-2}
.hero .photo img{width:100%;height:100%;object-fit:cover}
.hero::after{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(33,28,21,.5) 0%,rgba(33,28,21,.14) 14%,rgba(33,28,21,0) 32%,rgba(33,28,21,.64) 100%);content:''}
.hero .hero-copy{max-width:var(--container);margin-inline:auto;width:100%;padding:clamp(1.4rem,5vw,var(--margin-desktop)) 0 4.5rem;color:#f6f1e7}
.hero .eyebrow{position:relative;color:var(--accent-soft);padding-top:1.5rem}
.hero .eyebrow::before{position:absolute;top:0;left:0;width:2.5rem;height:1px;background:var(--accent);content:''}
.hero h1{max-width:15ch;margin:1.4rem 0 1.6rem;font-family:'Libre Caslon Text',serif;font-weight:400;font-size:clamp(2.8rem,7vw,5rem);line-height:1.04;letter-spacing:-.015em}
.hero .intro{max-width:33rem;font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.75;color:rgba(246,241,231,.9)}
.hero .service{display:flex;flex-wrap:wrap;gap:1.25rem 2.75rem;margin-top:2.6rem;color:rgba(246,241,231,.78)}
.hero .service span{position:relative;padding-top:.8rem}
.hero .service span::before{position:absolute;top:0;left:0;width:1.5rem;height:1px;background:rgba(246,241,231,.4);content:''}

/* manifest — centered statement */
.manifest{padding:var(--section-gap) 0}
.manifest .wrap{text-align:center;max-width:56rem}
.manifest .stamp{display:inline-block;font-family:'Libre Caslon Text',serif;font-size:.78rem;font-weight:700;letter-spacing:.42em;color:var(--accent);margin-bottom:2.4rem;padding:0 1.2em}
.manifest .stamp::before,.manifest .stamp::after{content:'';display:inline-block;width:2rem;height:1px;background:var(--accent-soft);vertical-align:middle;margin:0 .9rem}
.manifest p{max-width:22ch;margin:0 auto;font-family:'Libre Caslon Text',serif;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.18;letter-spacing:-.01em;color:var(--primary)}
.manifest .note{display:block;margin-top:2.2rem;color:var(--on-surface-soft)}

/* menu — hairline-framed course cards */
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.5rem,4vw,4rem);max-width:var(--container);margin:var(--section-gap) auto 0;padding-inline:clamp(var(--margin-mobile),5vw,var(--margin-desktop))}
.menu .sec-head{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--line);padding-bottom:1.4rem}
.menu .sec-head h2{font-family:'Libre Caslon Text',serif;font-weight:400;font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.01em;color:var(--primary);margin:0}
.menu .sec-head span{color:var(--accent-deep)}
.menu article{display:flex;flex-direction:column}
.menu article .photo{overflow:hidden;margin:0 0 1.5rem;padding:.5rem;border:1px solid var(--line);background:var(--surface-bright)}
.menu article .photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.84) contrast(1.02);transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .7s ease}
.menu article:hover .photo img{filter:saturate(1.12) contrast(1.03)}
.menu article .body{display:flex;flex-direction:column;gap:.7rem;padding:0 .25rem}
.menu .course-top{color:var(--accent-deep)}
.menu .course-top span:last-child{color:var(--on-surface-soft)}
.menu h3{font-family:'Libre Caslon Text',serif;font-weight:400;font-size:1.55rem;letter-spacing:-.01em;color:var(--primary);margin:0}
.menu article p{margin:0;font-size:.95rem;line-height:1.7;color:var(--on-surface-variant)}
.menu article .dish-name{margin-top:.6rem;font-family:'Libre Caslon Text',serif;font-style:italic;font-size:.92rem;color:var(--on-surface);transition:letter-spacing .5s cubic-bezier(.22,.61,.36,1),color .5s ease}
.menu article:hover .dish-name{letter-spacing:.14em;color:var(--accent-deep)}

/* gallery — lookbook, hairline frames */
.gallery{max-width:var(--container);margin:var(--section-gap) auto 0;padding-inline:clamp(var(--margin-mobile),5vw,var(--margin-desktop))}
.gallery .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--line);padding-bottom:1.4rem}
.gallery .sec-head h2{font-family:'Libre Caslon Text',serif;font-weight:400;font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.01em;color:var(--primary);margin:0}
.gallery .sec-head span{color:var(--accent-deep)}
.gallery .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.gallery figure{margin:0;padding:.4rem;border:1px solid var(--line);background:var(--surface-bright);overflow:hidden}
.gallery figure img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(.84) contrast(1.02);transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .7s ease}
.gallery figure:hover img{filter:saturate(1.12) contrast(1.03)}
.gallery figcaption{padding:1rem .5rem .35rem;font-family:'Libre Caslon Text',serif;font-style:italic;font-size:.85rem;color:var(--on-surface-variant)}

/* after / CTA — espresso band, champagne accent */
.after{background:var(--inverse-surface);color:var(--inverse-on-surface);padding:var(--section-gap) 0;margin-top:var(--section-gap)}
.after .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,.5fr);gap:3rem;align-items:end}
.after .label{color:var(--accent-soft)}
.after p{max-width:18ch;margin:1.4rem 0 0;font-family:'Libre Caslon Text',serif;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.16;letter-spacing:-.01em}
.after a.btn{display:inline-block;margin-top:2.8rem;padding:.9rem 2rem;border:1px solid var(--accent);color:var(--accent-soft);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s,color .3s}
.after a.btn:hover{background:var(--accent);color:var(--inverse-surface)}
.after .ribbon{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.after .ribbon span{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,241,231,.6);border:1px solid rgba(246,241,231,.2);padding:.5rem .95rem;border-radius:var(--radius-sm)}

@media(max-width:900px){
  .menu,.gallery .grid{grid-template-columns:1fr 1fr}
  .after .wrap{grid-template-columns:1fr}
  .after .ribbon{justify-content:flex-start}
}
@media(max-width:640px){
  .menu,.gallery .grid{grid-template-columns:1fr}
  header .marker{display:none}
  .hero{display:block;min-height:0}
  .hero .photo{position:static;inset:auto;z-index:0;aspect-ratio:4/3;overflow:hidden}
  .hero .photo img{width:100%;height:100%;object-fit:cover}
  .hero::after{display:none}
  .hero .hero-copy{max-width:var(--container);margin-inline:auto;width:100%;padding:2.4rem clamp(var(--margin-mobile),5vw,var(--margin-desktop)) 3.2rem;color:var(--on-surface)}
  .hero .eyebrow{color:var(--accent-deep)}
  .hero h1{color:var(--primary)}
  .hero .intro{color:var(--on-surface-variant)}
  .hero .service{flex-direction:column;gap:.9rem;color:var(--on-surface-variant)}
  .hero .service span{white-space:nowrap}
  .hero .service span::before{background:var(--line-strong)}
  footer{flex-direction:column;align-items:flex-start;gap:.7rem}
  footer span:last-child{text-align:left}
}

/* ===== Motion — premium, CSS-only (no JS; respects reduced motion) ===== */
.hero .photo img{will-change:transform,filter;animation:hero-develop 3s cubic-bezier(.22,.61,.36,1) both}
@keyframes hero-develop{from{transform:scale(1.08);filter:brightness(.85) saturate(.88)}to{transform:scale(1);filter:brightness(1) saturate(1)}}

.hero .eyebrow,.hero h1,.hero .intro,.hero .service{animation:rise .9s cubic-bezier(.22,.61,.36,1) both}
.hero h1{animation-delay:.12s}
.hero .intro{animation-delay:.26s}
.hero .service{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* scroll reveal — class added by JS, animated with CSS transitions */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* micro-interactions */
.after a.btn b{display:inline-block;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.after a.btn:hover b{transform:translate(3px,-3px)}

/* header condense — .is-scrolled class toggled by JS, animated with CSS transitions */
header .marker,header .lang{transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1),visibility .45s}
header.is-scrolled .marker,header.is-scrolled .lang{opacity:0;transform:translateY(-16px);visibility:hidden}
header .brand{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
header.is-scrolled .brand{transform:translateX(calc(50% - 50vw + clamp(1.4rem,5vw,var(--margin-desktop))))}
header .tagline{opacity:0;transform:translateY(6px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
header.is-scrolled .tagline{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* mobile: keep logo centered (no slide), hide the tagline to avoid crowding */
@media(max-width:640px){
  header.is-scrolled .brand{transform:none}
  header .tagline{display:none}
}