/* ============================================================
   CYNTHIA — Shared Styles  ·  "Daylight" light + photo-rich system
   Display face: Canela (Commercial Type).
   ============================================================ */

/*  CANELA — licensed from Commercial Type (commercialtype.com) or Adobe Fonts.
    Drop the licensed files into /fonts/ and they load automatically.
    Until Canela's licensed files are added, headings use a neutral system serif. */
@font-face{font-family:'Canela'; src:url('fonts/Canela-Thin.woff2') format('woff2'); font-weight:1 250; font-style:normal; font-display:swap;}
@font-face{font-family:'Canela'; src:url('fonts/Canela-ThinItalic.woff2') format('woff2'); font-weight:1 550; font-style:italic; font-display:swap;}
@font-face{font-family:'Canela'; src:url('fonts/Canela-Regular.woff2') format('woff2'); font-weight:251 550; font-style:normal; font-display:swap;}
@font-face{font-family:'Canela'; src:url('fonts/Canela-Black.woff2') format('woff2'); font-weight:551 1000; font-style:normal; font-display:swap;}
@font-face{font-family:'Canela'; src:url('fonts/Canela-BlackItalic.woff2') format('woff2'); font-weight:551 1000; font-style:italic; font-display:swap;}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Brand palette — exactly three colors, no invented tones.
     background #4D2712 · text #FFFBF2 · accent #DFC3AE
     One background everywhere. Sections and cards are separated by
     hairline rules drawn in the accent, not by extra shades of brown. */
  --paper:#4D2712; --paper-2:#4D2712; --paper-deep:#4D2712; --card:#4D2712;
  --ink:#FFFBF2; --ink-soft:rgba(255,251,242,0.72); --ink-faint:rgba(255,251,242,0.50);
  --ember:#DFC3AE; --ember-deep:#CBB09C; --ember-lite:#EFDDCE;
  --on-accent:#4D2712; --on-accent-soft:rgba(77,39,18,0.70); --on-accent-line:rgba(77,39,18,0.28);
  --line:rgba(223,195,174,0.22); --line-strong:rgba(223,195,174,0.45);
  --serif:'Canela',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --nav-h:80px;
}

/* ---------- reset / safety (no-clip foundations) ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; width:100%;
}
img,svg,video{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; letter-spacing:-0.015em; overflow-wrap:break-word;}
p{overflow-wrap:break-word;}
:focus-visible{outline:1.5px solid var(--ember); outline-offset:3px;}
::selection{background:var(--ember); color:var(--on-accent);}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:1200px; margin:0 auto; padding-left:clamp(28px,5vw,44px); padding-right:clamp(28px,5vw,44px);}
.eyebrow{font-family:var(--mono); font-size:clamp(10px,1.1vw,11px); letter-spacing:0.24em; text-transform:uppercase; color:var(--ember); display:block; line-height:1.4;}
.serif{font-family:var(--serif);}
.italic{font-style:italic;}

/* ---------- nav ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:60; background:var(--ember); color:var(--on-accent); transition:box-shadow .3s ease;}
header.solid{box-shadow:0 2px 14px rgba(20,8,2,0.20);}
.nav-inner{width:100%; max-width:1200px; margin:0 auto; padding:15px clamp(28px,5vw,44px); display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--nav-h);}
.logo{font-family:var(--serif); font-size:clamp(21px,2.4vw,25px); letter-spacing:0.01em; color:var(--on-accent); font-weight:500; white-space:nowrap;}
.logo em, .logo span{font-style:italic; font-weight:400;}
.logo img{display:block; height:clamp(38px,4.8vw,48px); width:auto;}
nav ul{display:flex; gap:clamp(20px,2.6vw,36px); list-style:none; align-items:center;}
nav a{font-size:13px; letter-spacing:0.03em; color:var(--on-accent-soft); transition:color .2s; white-space:nowrap;}
nav a:hover, nav a.active{color:var(--on-accent);}
.nav-cta{font-family:var(--mono); font-size:11px; letter-spacing:0.13em; text-transform:uppercase; border:1px solid var(--on-accent-line); padding:10px 17px; color:var(--on-accent); transition:background .2s, color .2s, border-color .2s;}
.nav-cta:hover{background:var(--on-accent); border-color:var(--on-accent); color:var(--ember);}
.nav-toggle{display:none; font-family:var(--mono); font-size:12px; letter-spacing:0.1em; background:none; border:none; color:var(--on-accent); cursor:pointer; padding:6px 2px;}

/* ---------- photo / frame ---------- */
.frame{position:relative;}
.frame::before{content:''; position:absolute; top:-8px; left:-8px; width:17px; height:17px; border-top:1.5px solid var(--ember); border-left:1.5px solid var(--ember); pointer-events:none;}
.frame::after{content:''; position:absolute; bottom:-8px; right:-8px; width:17px; height:17px; border-bottom:1.5px solid var(--ember); border-right:1.5px solid var(--ember); pointer-events:none;}
.photo{position:relative; overflow:hidden; background:var(--paper-2); width:100%;}
.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.02); transition:transform 1.4s cubic-bezier(.2,.7,.2,1);}
.photo.hoverable:hover img{transform:scale(1.045);}
.photo .shade{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(28,23,16,0) 45%, rgba(28,23,16,0.45) 100%);}
.photo .shade-strong{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(20,16,10,0.15) 0%, rgba(20,16,10,0.15) 45%, rgba(20,16,10,0.72) 100%);}

/* ---------- buttons ---------- */
.btn-primary{display:inline-block; background:var(--ember); color:var(--on-accent); font-family:var(--mono); font-size:12px; letter-spacing:0.11em; text-transform:uppercase; padding:15px 28px; transition:background .2s; white-space:nowrap;}
.btn-primary:hover{background:var(--ember-deep);}
.btn-ghost{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line-strong); padding-bottom:4px; transition:color .2s, border-color .2s; white-space:nowrap;}
.btn-ghost:hover{color:var(--ink); border-color:var(--ember);}
.btn-light{display:inline-block; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:12px; letter-spacing:0.11em; text-transform:uppercase; padding:15px 28px; transition:background .2s; white-space:nowrap;}
.btn-light:hover{background:#fff;}

/* ---------- generic section headers ---------- */
.page-header{padding:calc(var(--nav-h) + clamp(60px,10vw,96px)) 0 clamp(48px,7vw,72px);}
.page-header .eyebrow{margin-bottom:18px;}
.page-header h1{font-size:clamp(30px,4.2vw,48px); line-height:1.08; font-weight:400; max-width:18ch;}
.page-header .lede{margin-top:26px; max-width:52ch; color:var(--ink-soft); font-size:clamp(15px,1.6vw,17px); line-height:1.75;}

/* ---------- reserve band ---------- */
.reserve-band{background:var(--paper); color:var(--ink); padding:clamp(80px,12vw,120px) 0; text-align:center; border-top:1px solid var(--line);}
.reserve-band .eyebrow{color:var(--ember); margin-bottom:22px;}
.reserve-band h2{font-size:clamp(26px,3.2vw,38px); font-weight:400; max-width:20ch; margin:0 auto 18px; line-height:1.18; color:var(--ink);}
.reserve-band p{color:var(--ink-soft); max-width:46ch; margin:0 auto 38px; font-size:15.5px;}
.reserve-band p a{color:var(--ember); border-bottom:1px solid var(--line-strong); padding-bottom:1px;}
.reserve-band p a:hover{border-color:var(--ember);}

/* ---------- Resy widget ---------- */
/* The anchor is a real link to Resy, so it works even if the script fails.
   Resy replaces it with its own button; these rules coerce that button on-brand. */
.resy-widget{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; max-width:100%;}
.resy-widget.left{justify-content:flex-start;}
.resy-widget > *{max-width:100%;}
.resy-widget a, .resy-widget button, .resy-widget input[type="button"], .resy-widget input[type="submit"]{
  display:inline-block; font-family:var(--mono)!important; font-size:12px!important; letter-spacing:0.11em!important;
  text-transform:uppercase!important; background:var(--ink)!important; color:var(--paper)!important;
  border:none!important; border-radius:0!important; box-shadow:none!important; padding:15px 28px!important;
  line-height:1.2!important; cursor:pointer; white-space:normal!important; overflow-wrap:break-word;
}
.resy-widget a:hover, .resy-widget button:hover{background:#fff!important;}

/* ---------- footer ---------- */
footer{background:var(--ember); color:var(--on-accent); padding:clamp(44px,6vw,56px) 0 clamp(48px,7vw,64px);}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:clamp(24px,4vw,48px); align-items:flex-start;}
.footer-brand{font-family:var(--serif); font-size:21px; color:var(--on-accent); margin-bottom:12px; display:inline-block; font-weight:500;}
.footer-brand img{display:block; height:30px; width:auto;}
.footer-brand em{font-style:italic; font-weight:400;}
.footer-col p, .footer-col a{font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--on-accent-soft); line-height:1.95; display:block;}
.footer-col a:hover{color:var(--on-accent);}
.footer-nav{display:flex; gap:20px; flex-wrap:wrap;}
.footer-nav a{font-size:11px; letter-spacing:0.1em; text-transform:uppercase;}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
  .photo img{transition:none;}
  .hero-media img{animation:none !important;}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--nav-h:68px;}
  nav ul{display:none;}
  nav ul.open{display:flex; flex-direction:column; align-items:flex-start; position:fixed; top:var(--nav-h); right:clamp(28px,5vw,44px); left:auto; min-width:200px; background:var(--ember); border:1px solid var(--on-accent-line); padding:22px 24px; gap:18px; z-index:100; box-shadow:0 20px 50px rgba(20,8,2,0.35);}
  nav ul.open .nav-cta{width:100%; text-align:center;}
  .nav-toggle{display:block;}
}
@media (max-width:520px){
  body{font-size:15.5px;}
}
@media (max-width:400px){
  .btn-primary,.btn-light,.btn-ghost{letter-spacing:0.05em; padding-left:20px; padding-right:20px;}
  .reserve-band .btn-light{white-space:normal; word-break:break-word; line-height:1.5; max-width:100%;}
}