/* Stirling Club concept, pass 2 (2026-10-06). Idiom extracted from Amrit Palace (Awwwards SOTD, 15 Nov 2025); our own code. */
@font-face{font-family:"Playfair Display";src:url(assets/fonts/PlayfairDisplay.ttf) format("truetype");font-weight:400 900;font-style:normal;font-display:block}
@font-face{font-family:"Playfair Display";src:url(assets/fonts/PlayfairDisplay-Italic.ttf) format("truetype");font-weight:400 900;font-style:italic;font-display:block}
@font-face{font-family:"Andalucia";src:url(assets/fonts/Andalucia.ttf) format("truetype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Newsreader";src:url(assets/fonts/Newsreader.ttf) format("truetype");font-weight:200 800;font-style:normal;font-display:block}
@font-face{font-family:"Newsreader";src:url(assets/fonts/Newsreader-Italic.ttf) format("truetype");font-weight:200 800;font-style:italic;font-display:block}
:root{
  --ink:#1c1a17;--ink-2:#2a2723;--cream:#e9e0d1;--paper:#f3eee3;--gold:#c8a24c;--gold-type:#ebcc91;--bronze:#6e521f;--mute:#6f675c;
  --serif:"Playfair Display",Georgia,serif;--serif-2:"Newsreader",Georgia,serif;--sans:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
  --e-quart:cubic-bezier(.165,.84,.44,1);--edge:clamp(18px,1.6vw,28px);
}
*{box-sizing:border-box}
html{background:#000;color:var(--paper)}
html.lenis,html.lenis body{height:auto}
body{margin:0;font-family:var(--sans);font-size:clamp(15px,1.05vw,18px);line-height:1.55;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:3px}
.skip{position:fixed;z-index:100;left:var(--edge);top:-90px;background:var(--paper);color:var(--ink);padding:14px 18px;border-radius:999px}
.skip:focus{top:var(--edge)}
.disp{margin:0;font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:-.03em;line-height:.94;font-size:clamp(48px,7.4vw,124px)}
.disp em{font-style:italic;text-transform:none;letter-spacing:-.02em;color:var(--gold-type);font-weight:400}
.disp em .caps{text-transform:uppercase}
.hero-card .disp .ln .caps.gold{text-transform:uppercase;font-style:normal;color:var(--gold-type);letter-spacing:-.02em;white-space:nowrap}
.ln{display:block;overflow:hidden;padding:0 .1em;margin:-.08em 0}
.ln>*{display:block;padding:.16em 0 .3em;will-change:transform}

/* mast: small solid pills, never a gradient over the film */
.mast{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--edge)*.72) var(--edge);pointer-events:none}
.mast>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;min-height:48px;background:var(--ink);padding:6px 16px;border-radius:999px}
.brand img{width:118px;height:auto}
.mast nav{display:flex;gap:6px}
.mast nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);text-decoration:none;font-size:14px;letter-spacing:.02em;transition:background .35s var(--e-quart),color .35s var(--e-quart)}
.mast nav a.act{background:var(--gold);color:var(--ink)}
.mast nav a:hover{background:var(--paper);color:var(--ink)}
.motion{position:fixed;z-index:60;right:var(--edge);bottom:var(--edge);min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--gold);background:var(--ink);color:var(--paper);font:500 13px/1 var(--sans);letter-spacing:.03em;cursor:pointer;transition:opacity .35s var(--e-quart),transform .35s var(--e-quart),visibility .35s}
.motion:hover{background:var(--gold);color:var(--ink)}

/* hero: one viewport - film fills leftover above type; all type on first load */
.hero{position:relative;height:100vh;height:100svh;max-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#000}
.hero-film{position:relative;flex:1 1 auto;min-height:0;height:auto;overflow:hidden;z-index:0;background:#000;display:flex;align-items:center;justify-content:center}
.hero-film video{width:var(--hero-fit-w,auto);height:var(--hero-fit-h,auto);max-width:min(100%,var(--hero-max-w,1920px));max-height:min(100%,var(--hero-max-h,1080px));object-fit:contain;object-position:center center;flex:0 0 auto}
.hero-card{position:relative;z-index:2;flex:0 0 auto;margin-top:0;min-height:0;background:var(--ink);padding:clamp(18px,2.2vw,36px) max(var(--edge),160px) clamp(22px,2.8vw,44px) var(--edge);border-top:1px solid rgba(200,162,76,.5)}
.hero-card .disp{font-size:clamp(40px,6.4vw,110px);line-height:.96;max-width:100%}
.hero-card .disp .ln .title,.hero-card .disp .ln em.title{font-family:var(--serif);text-transform:none;font-style:italic;font-weight:400;color:var(--paper);letter-spacing:-.03em;font-optical-sizing:auto;white-space:nowrap}
.hero-card .disp .ln:first-child em,.hero-card .disp .ln:first-child .title,.hero-card .disp .ln:first-child em.title{color:var(--paper);text-transform:none;letter-spacing:-.03em}
.hero-card .disp .ln:last-child > span{color:var(--gold-type);font-style:normal;letter-spacing:-.02em}

/* split scroll: copy sticky on a solid side, media column scrolls */
.split{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--paper);color:var(--ink);border-top:1px solid rgba(28,26,23,.14)}
.split[data-side="right"]{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split[data-side="right"] .split-copy{order:2}
.split:nth-of-type(odd){background:var(--cream)}
.split-copy{position:relative}
.split-in{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2vw,30px);padding:clamp(76px,5.8vw,108px) clamp(24px,4vw,72px) clamp(40px,5vw,80px)}
.split .disp{font-size:clamp(40px,4.9vw,86px);color:var(--ink)}
.split .disp em{color:var(--bronze)}
.split-in>p{margin:0;max-width:30ch;font-size:clamp(17px,1.3vw,21px);color:#3b352e}
.split-in .n{font-family:var(--serif-2);font-size:15px;letter-spacing:.3em;color:var(--bronze)}
.split-media{display:flex;flex-direction:column;gap:var(--edge);padding:var(--edge)}
.m{margin:0;overflow:hidden;height:calc(100vh - 2*var(--edge));height:calc(100svh - 2*var(--edge));border-radius:2px;background:#0e0d0b}
.m img,.m video{width:100%;height:110%;object-fit:cover;transform:translateY(var(--py,-9%)) scale(var(--ms,1))}
.m-film video{object-position:50% 45%}

/* visit */
.visit .split-in{gap:22px}
.visit .disp{font-size:clamp(44px,5.4vw,96px)}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;text-decoration:none;font-size:15px;letter-spacing:.02em;transition:background .35s var(--e-quart),color .35s var(--e-quart)}
.btn-gold{background:var(--ink);color:var(--gold-type)}
.btn-gold:hover{background:var(--gold);color:var(--ink)}
.btn-line{border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.contact{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px!important;color:var(--mute)!important}

/* club */
.club{position:relative;z-index:3;background:var(--ink);padding:clamp(90px,10vw,170px) var(--edge) clamp(60px,7vw,120px)}
.club-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--edge) 6vw;align-items:end}
.club-head p{margin:0;max-width:36ch;color:var(--cream)}
.strip{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--edge);margin-top:clamp(50px,6vw,100px)}
.strip figure{margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:2px}
.strip figure:first-child{aspect-ratio:auto}
.strip img{width:100%;height:100%;object-fit:cover;transform:scale(var(--ms,1.12))}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--edge);margin-top:clamp(40px,4vw,64px);border-top:1px solid rgba(200,162,76,.45);padding-top:24px}
.rooms p{margin:0;color:var(--cream);max-width:32ch}
.rooms strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.3vw,38px);color:var(--gold-type);margin-bottom:8px;letter-spacing:-.01em}

/* footer: giant wordmark */
.foot{position:relative;z-index:3;background:var(--ink);padding:40px var(--edge) 10px;border-top:1px solid rgba(200,162,76,.3)}
.foot p{margin:0;color:var(--cream)}
.credit{margin-top:14px!important;max-width:62ch;font-size:12px!important;line-height:1.45;color:rgba(233,224,209,.72)!important;letter-spacing:.01em}
.credit strong{color:var(--gold-type);font-weight:600}
.foot{overflow:hidden}
.word{display:inline-block;font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:-.04em;line-height:.8;white-space:nowrap;color:var(--gold);font-size:var(--wfs,9.6vw);margin-top:40px!important;padding-bottom:.06em}

html.is-paused .loop{}
@media (max-width:820px){
  .disp{font-size:clamp(40px,12vw,66px)}
  .brand img{width:96px}
  .mast{padding:max(12px,env(safe-area-inset-top)) var(--edge) 12px}
  .mast nav a:not(.act){display:none}
  .mast nav a.act{min-height:44px;min-width:44px;padding:0 16px}
  .hero-card{margin-top:0;min-height:0;padding:16px var(--edge) max(56px,calc(env(safe-area-inset-bottom) + 48px)) var(--edge)}
  .hero-card .disp{font-size:clamp(34px,9.6vw,52px);line-height:.92;max-width:100%}
  .hero-card .disp .ln{padding:0 .06em;margin:-.06em 0}
  .hero-card .disp .ln>*{padding:.12em 0 .24em}
  .split,.split[data-side="right"]{grid-template-columns:1fr}
  .split[data-side="right"] .split-copy{order:0}
  .split-in{position:relative;height:auto;padding:56px var(--edge) 24px;gap:16px}
  .split .disp{font-size:clamp(36px,10.5vw,54px)}
  .split-in>p{font-size:16px;max-width:36ch}
  .split-media{padding:0 var(--edge) var(--edge);gap:14px}
  .m{height:62svh;border-radius:3px}
  .m-film{height:58svh}
  .visit .split-media{order:-1}
  .club{padding:72px var(--edge) 56px}
  .club-head{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr;gap:12px}
  .strip figure:first-child{grid-column:1/-1;aspect-ratio:3/2}
  .rooms{grid-template-columns:1fr;gap:18px}
  .acts{gap:10px}
  .btn{min-height:48px;width:100%;justify-content:center}
  .motion{left:var(--edge);right:auto;bottom:max(14px,env(safe-area-inset-bottom));min-width:44px;z-index:60}
  .credit{font-size:11px!important;max-width:100%}
  .word{margin-top:28px!important}
  .hero-film{min-height:42svh}
}
.foot{padding-bottom:max(110px,calc(env(safe-area-inset-bottom) + 88px))}
html.is-over-foot .motion{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}

/* pass7: pure black letterbox outside hero film */
.hero,.hero-film{background:#000}
/* Forever title must not clip under Pause on phone */
@media (max-width:820px){
  .hero-card .disp .ln .title,.hero-card .disp .ln em.title{max-width:100%}
  .hero-film{min-height:38svh}
  .hero-card{padding-bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px))}
}