/* THE WOODVALE ROOM — shared styles. Tokens match the Menu and Private Events pages. */
:root{
  --bg:#090807;--ink:#efe4d2;--paper:#eadfcd;--gold:#c09a63;--muted:#c9b89b;--soft:#8f7d64;
  --line:rgba(192,154,99,.30);--line-soft:rgba(192,154,99,.16);
  --gold-deep:#b88f57;--gold-lift:#c69c63;--gold-light:#d9b77f;--gold-pale:#f0d5ad;--lead:#c6a16b;--text-2:#bfae92;--text-3:#8e7e66;
  --green:#1d2a20;--green-deep:#131c15;--kraft:#e8dcc4;--kraft-ink:#2a2118;
  --display:'Bodoni Moda','Didot','Bodoni 72','Times New Roman',serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',Arial,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:1px solid var(--gold-light);outline-offset:4px}
::selection{background:rgba(192,154,99,.35)}
.page{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:860px}
.eyebrow{font:500 10px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}

/* Announcement */
.announce{position:relative;z-index:30;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 44px;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.ann-links{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,30px)}
.ann-links a{position:relative;padding:11px 0;font:italic 400 clamp(15px,1.5vw,17px)/1 var(--serif);letter-spacing:.01em;color:var(--gold-light);white-space:nowrap;transition:color .25s}
.ann-links a::after{content:'';position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}
.ann-links a:hover{color:var(--gold-pale)}
.ann-links a:hover::after{transform:scaleX(1)}
.ann-links i{width:4px;height:4px;transform:rotate(45deg);background:var(--gold);opacity:.6;flex:0 0 auto}
.announce>button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:none;border:0;font:300 16px/1 var(--sans);color:var(--soft)}
.announce>button:hover{color:var(--gold-light)}
.announce.gone{display:none}

/* Header — always the burger, like Mimi */
.topbar{position:sticky;top:0;z-index:40;background:rgba(9,8,7,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .page{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:42px;height:42px;display:block;object-fit:contain}
.wordmark{font:500 14px/1.08 var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--paper)}
.top-right{display:flex;align-items:center;gap:18px}
.top-res{font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--paper);padding:12px 16px;border:1px solid var(--line);transition:border-color .3s,color .3s}
.top-res:hover{border-color:var(--gold);color:var(--gold-pale)}
.burger{background:none;border:0;padding:12px 2px;width:50px}
.burger span{display:block;height:1px;background:var(--paper);margin:8px 0;transition:transform .35s var(--ease)}
.open .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}
.open .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* Overlay menu */
.overlay{position:fixed;inset:0;z-index:35;background:var(--bg);overflow:auto;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.open .overlay{opacity:1;pointer-events:auto}
.overlay .page{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:110px;padding-bottom:40px;max-width:900px}
.overlay nav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft);font:400 clamp(34px,7vw,64px)/1 var(--display);letter-spacing:-.03em;color:var(--paper);transition:color .25s,padding-left .35s var(--ease)}
.overlay nav a:hover,.overlay nav a[aria-current]{color:var(--gold-pale);padding-left:8px}
.overlay nav a span{font:italic 500 15px/1 var(--serif);color:var(--soft);letter-spacing:0}
.overlay nav a small{margin-left:auto;font:500 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.ov-meta{margin-top:30px;font:italic 400 17px/1.6 var(--serif);color:var(--text-2)}
.ov-meta a{border-bottom:1px solid var(--line)}

/* Buttons */
.btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:230px;padding:17px 30px 19px;border:1px solid var(--gold);background:transparent;font:500 23px/1 var(--serif);letter-spacing:.01em;color:var(--paper);transition:background-color .3s var(--ease),color .3s,border-color .3s}
.btn:hover{background:rgba(192,154,99,.1);color:var(--gold-pale)}
.btn.solid{background:var(--gold-deep);border-color:var(--gold-deep);color:#120f0b}
.btn.solid:hover{background:var(--gold-lift);border-color:var(--gold-lift)}
.btn .arrow{font:400 17px/1 var(--sans);transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.tlink{display:inline-block;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);border-bottom:1px solid var(--line);padding-bottom:6px;transition:color .25s}
.tlink:hover{color:var(--gold-pale)}

/* Photo frame */
.photo{position:relative;margin:0;overflow:hidden;background:#15120e}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.photo::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 40%,rgba(8,8,7,0) 45%,rgba(8,8,7,.5) 100%)}
.photo::after{content:'';position:absolute;inset:12px;z-index:2;border:1px solid rgba(234,223,205,.16);pointer-events:none}
.photo:hover img{transform:scale(1.03)}

/* Page title (inner pages) */
.ptitle{text-align:center;padding:clamp(44px,6vw,84px) 0 0}
.ptitle h1{margin-top:18px;font:400 clamp(56px,11vw,150px)/.86 var(--display);letter-spacing:-.05em;color:var(--paper)}
.ptitle h1 i{color:var(--gold)}
.ptitle .intro{max-width:34ch;margin:24px auto 0;font:400 clamp(19px,2vw,23px)/1.45 var(--serif);color:var(--text-2)}

/* HOME */
.hero{padding-top:clamp(18px,3vw,32px)}
.hero .photo{aspect-ratio:16 / 7}
.hero .photo img{object-position:50% 45%}
.statement{text-align:center;padding:clamp(40px,6vw,80px) 0 0}
.statement h1{margin-top:22px;font:400 clamp(58px,13vw,188px)/.86 var(--display);letter-spacing:-.05em;text-transform:uppercase;color:var(--paper)}
.statement h1 i{font-style:italic;text-transform:none;color:var(--gold);letter-spacing:-.04em}
.who{max-width:36ch;margin:clamp(24px,3vw,34px) auto 0;font:400 clamp(19px,2vw,23px)/1.45 var(--serif);color:var(--text-2)}
.hours-line{margin-top:clamp(26px,3vw,40px);display:grid;gap:10px;font:400 clamp(17px,2vw,22px)/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hours-line b{font-weight:400;color:var(--paper)}
.statement .btns{margin-top:clamp(32px,4vw,48px)}
.quote{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:clamp(64px,8vw,110px) 0 0}
.quote img{width:58px;opacity:.9}
.quote p{max-width:26ch;font:italic 500 clamp(26px,3.4vw,42px)/1.18 var(--serif);color:var(--lead)}
.quote small{font:500 9.5px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--soft)}

/* Section rows */
.rows{margin-top:clamp(44px,5vw,64px);border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:clamp(14px,3vw,40px);align-items:center;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.row .idx{font:400 clamp(28px,3vw,40px)/1 var(--display);color:#3a3125}
.row h3{font:400 clamp(28px,3.2vw,44px)/1 var(--display);letter-spacing:-.02em;color:var(--paper)}
.row .meta{margin-top:10px;font:500 9.5px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light)}
.row p{margin-top:10px;font:400 17.5px/1.45 var(--serif);color:var(--text-2);max-width:52ch}

/* Footer */
.footer{position:relative;z-index:1;margin-top:clamp(72px,9vw,120px);background:#120e0a;border-top:1px solid var(--line)}
.footer .page{padding-top:clamp(52px,6vw,80px);padding-bottom:36px}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px}
.fcol h4{margin:0 0 14px;font:400 22px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.fcol p,.fcol a{display:block;font:400 17px/1.6 var(--serif);color:var(--text-2)}
.fcol a{width:max-content;max-width:100%;border-bottom:1px solid rgba(192,154,99,.35);margin-bottom:4px;transition:color .25s}
.fcol a:hover{color:var(--gold-pale)}
.family-line{margin-top:clamp(44px,5vw,64px);padding:22px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;font:italic 400 18px/1.45 var(--serif);color:var(--text-2)}
.family-line b{font-style:normal;font-weight:500;color:var(--paper)}
.bigmark{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,40px);margin-top:clamp(48px,6vw,80px)}
.bigmark img{width:clamp(80px,13vw,160px)}
.bigmark span{font:400 clamp(34px,7vw,96px)/.9 var(--display);letter-spacing:-.04em;text-transform:uppercase;color:var(--paper)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:44px;font:400 11px/1.5 var(--sans);letter-spacing:.04em;color:var(--text-3)}
.legal nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.legal nav a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}


/* Reel — a slow, endless strip of photos and muted video */
.reel{position:relative;z-index:1;overflow:hidden;padding:18px 0}
.reel::before,.reel::after{content:'';position:absolute;top:0;bottom:0;width:clamp(24px,6vw,90px);z-index:2;pointer-events:none}
.reel::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.reel::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.reel-track{display:flex;width:max-content;animation:reel 70s linear infinite}
.reel:hover .reel-track,.reel.hold .reel-track{animation-play-state:paused}
.reel-dup{display:flex}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tile{position:relative;flex:0 0 auto;height:var(--reel-h,clamp(300px,52vh,560px));aspect-ratio:3 / 4;margin:0 6px;overflow:hidden;background:#15120e}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.tile:hover img,.tile:hover video{transform:scale(1.04)}
.tile::after{content:'';position:absolute;inset:8px;border:1px solid rgba(234,223,205,.14);pointer-events:none}
.tile figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;font:italic 400 18px/1.2 var(--serif);color:var(--gold-pale);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.tile figcaption::before{content:'';display:block;width:22px;height:1px;margin-bottom:8px;background:var(--gold)}
.hero-reel{padding-top:clamp(16px,2.4vw,28px);animation:fadeIn 1.4s var(--ease) both}
.ev-reel{--reel-h:clamp(260px,40vw,440px)}

/* Opening animation */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes softIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.statement h1 .w{display:inline-block;animation:riseIn 1.1s var(--ease) both;animation-delay:var(--d,0s)}
.intro-in{animation:softIn 1s var(--ease) both;animation-delay:var(--d,0s)}
.rule-draw{display:block;width:64px;height:1px;margin:clamp(22px,3vw,32px) auto 0;background:var(--gold);transform-origin:center;animation:draw 1.2s var(--ease) .7s both}

/* Back to home (inner pages) */
.backbar{padding-top:16px}
.backbar a{display:inline-flex;align-items:center;gap:10px;padding:8px 0;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);transition:color .25s,gap .35s var(--ease)}
.backbar a span{font:400 16px/1 var(--sans);letter-spacing:0}
.backbar a:hover{color:var(--gold-pale);gap:14px}

/* Reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .announce{padding:0 36px 0 12px}
  .wordmark{font-size:13px;letter-spacing:.11em}
  .logo{width:38px;height:38px}
  .top-res{padding:11px 12px;letter-spacing:.18em}
  .hero .photo{aspect-ratio:4 / 5}
  .photo::after{inset:8px}
  .statement h1{font-size:clamp(50px,16.5vw,92px)}
  .tile{margin:0 4px}
  .hero-reel{--reel-h:clamp(280px,46vh,440px)}
  .tile figcaption{font-size:16px;left:12px;bottom:12px}
  .reel-track{animation-duration:55s}
  .btns{flex-direction:column;align-items:stretch}
  .btn{width:100%;min-width:0}
  .row{grid-template-columns:1fr;gap:12px}
  .row .idx{font-size:24px}
  .fcols{grid-template-columns:1fr 1fr;gap:32px 18px}
  .fcol h4{font-size:19px}
  .fcol p,.fcol a{font-size:16px}
  .bigmark{flex-direction:column;gap:16px;text-align:center}
}
@media (max-width:360px){.top-res{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}.reel{overflow-x:auto}.reel-dup{display:none}}

/* Back bar — top and bottom of every inner page */
.backbar{display:flex;justify-content:space-between;gap:16px}
.backbar.bottom{padding-top:clamp(32px,4vw,48px)}

/* Homepage — full-bleed owl under the statement */
.owl-hero{position:relative;z-index:1;overflow:hidden;min-height:calc(100svh - 70px);display:flex;align-items:flex-end;padding-bottom:clamp(48px,7vw,96px)}
.owl-media{position:absolute;inset:0;z-index:0;animation:fadeIn 1.6s var(--ease) both}
.owl-media img,.owl-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.owl-still{transform-origin:55% 30%;animation:owlDrift 26s ease-in-out infinite alternate}
@keyframes owlDrift{0%{transform:scale(1.04) rotate(-.6deg) translate3d(0,0,0)}50%{transform:scale(1.1) rotate(.4deg) translate3d(-1%,-1%,0)}100%{transform:scale(1.07) rotate(-.2deg) translate3d(1%,-.5%,0)}}
.owl-media::after{content:'';position:absolute;inset:0;background:
  radial-gradient(90% 60% at 50% 62%,rgba(9,8,7,.55),transparent 75%),
  linear-gradient(180deg,rgba(9,8,7,.35) 0%,rgba(9,8,7,0) 18%,rgba(9,8,7,.15) 45%,rgba(9,8,7,.7) 80%,var(--bg) 100%)}
.owl-hero .statement{position:relative;z-index:1;width:100%;padding-left:var(--gutter);padding-right:var(--gutter);padding-top:clamp(260px,46vh,520px)}
.owl-hero .statement h1{text-shadow:0 2px 40px rgba(0,0,0,.6)}
.owl-hero .who,.owl-hero .hours-line{text-shadow:0 1px 18px rgba(0,0,0,.8)}
.owl-hero .who{color:var(--ink)}
@media (max-width:640px){.owl-hero .statement{padding-top:clamp(240px,40vh,380px)}.owl-media img,.owl-media video{object-position:52% 18%}}
@media (prefers-reduced-motion:reduce){.owl-still{animation:none}}
