/* Whitehall Country Club — the design system. ONE system, TWO themes (data-theme on ). */ /* ───────────────────────── tokens: ONE system, TWO themes ───────────────────────── */ :root{ --bg:#f4efe4; --bg-2:#ebe5d5; --ink:#1b241e; --ink-2:#4a5a50; --line:rgba(27,36,30,.14); --green:#0f3d28; --green-2:#17553a; --gold:#b8922f; --gold-text:#7a5f16; --gold-soft:rgba(184,146,47,.16); --on-photo:#fff; --on-photo-2:rgba(255,255,255,.84); --ov-a:rgba(8,28,18,.22); --ov-b:rgba(8,28,18,.82); --img:saturate(.9) contrast(1.03); --panel:rgba(250,247,240,.9); --panel-line:rgba(27,36,30,.1); --header-bg:rgba(244,239,228,.88); --shadow:0 40px 80px -30px rgba(15,40,28,.45); --knob:#f4efe4; --track:#1b241e; } [data-theme="dark"]{ --bg:#0a1912; --bg-2:#0e2219; --ink:#e7ede8; --ink-2:#a9bbaf; --line:rgba(231,237,232,.14); --green:#123f2b; --green-2:#1a5a3c; --gold:#cfa93a; --gold-text:#e0c67c; --gold-soft:rgba(207,169,58,.14); --on-photo:#fff; --on-photo-2:rgba(255,255,255,.8); --ov-a:rgba(5,16,11,.4); --ov-b:rgba(5,16,11,.9); --img:saturate(.82) contrast(1.06) brightness(.9); --panel:rgba(12,30,22,.82); --panel-line:rgba(231,237,232,.1); --header-bg:rgba(10,25,18,.82); --shadow:0 40px 80px -30px rgba(0,0,0,.7); --knob:#0a1912; --track:#e0c67c; } html.theming, html.theming *, html.theming *::before, html.theming *::after{ transition:background-color 1s ease, color 1s ease, border-color 1s ease; } /* ───────────────────────── base ───────────────────────── */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; font-weight:400;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto;display:block} h1,h2,h3,.serif{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:.005em;margin:0} h1{font-size:clamp(2.9rem,7.2vw,6.4rem);line-height:.98} h2{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.04} h3{font-size:1.5rem;line-height:1.2} p{margin:0 0 1.1em} a{color:inherit} a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px} .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(22px,5vw,72px)} .lbl{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--gold-text);margin:0 0 22px} .on .lbl{color:#e6d3a3} .lead{font-size:1.08rem;color:var(--ink-2);max-width:34rem} .on .lead{color:var(--on-photo-2)} .todo{color:#f5c542;background:rgba(0,0,0,.35);padding:0 5px;border-radius:3px;font-size:.85em} /* buttons */ .pill{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;font-size:.72rem;letter-spacing:.2em; text-transform:uppercase;font-weight:600;text-decoration:none;border:1px solid transparent;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s,color .4s,border-color .4s;white-space:nowrap} .pill.gold{background:var(--gold);color:#1b241e;border-color:var(--gold)} .pill.gold:hover{transform:translateY(-2px);background:#d6ad3e;border-color:#d6ad3e} .pill.ghost{color:var(--ink);border-color:var(--line)} .on .pill.ghost{color:#fff;border-color:rgba(255,255,255,.45)} .pill.ghost:hover{border-color:var(--gold);color:var(--gold-text);transform:translateY(-2px)} .on .pill.ghost:hover{color:#fff;border-color:#fff} .textlink{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--gold-text); display:inline-flex;align-items:center;gap:12px} .textlink::after{content:"";width:34px;height:1px;background:currentColor;transition:width .5s cubic-bezier(.2,.7,.2,1)} .textlink:hover::after{width:56px} .on .textlink{color:#fff} /* ───────────────────────── header ───────────────────────── */ header{position:fixed;top:0;left:0;right:0;z-index:80;color:#fff;transition:background .5s,color .5s,box-shadow .5s,backdrop-filter .5s} header .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:92px;transition:height .5s cubic-bezier(.2,.7,.2,1)} header.scrolled{background:var(--header-bg);color:var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)} header.scrolled .row{height:72px} .burger{display:inline-flex;align-items:center;gap:14px;background:none;border:0;color:inherit;cursor:pointer;padding:10px 0;font:inherit; font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;justify-self:start} .burger i{display:block;width:26px;height:10px;position:relative} .burger i::before,.burger i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s cubic-bezier(.2,.7,.2,1),width .5s} .burger i::before{top:0}.burger i::after{bottom:0;width:18px} .burger:hover i::after{width:26px} .brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;gap:4px;justify-self:center} .brand .w{display:flex;flex-direction:column;align-items:center;gap:4px} .brand svg{width:40px;height:40px;transition:width .5s,height .5s} header.scrolled .brand svg{width:32px;height:32px} .brand .n{font-family:"Cormorant Garamond",serif;font-size:1.05rem;letter-spacing:.3em;text-transform:uppercase;line-height:1;font-weight:600} .brand .s{font-size:.5rem;letter-spacing:.46em;text-transform:uppercase;font-weight:600;opacity:.85} .hright{display:flex;align-items:center;gap:18px;justify-self:end} header .pill{padding:12px 22px;font-size:.66rem} header .pill .short{display:none} /* theme toggle */ .tt{position:relative;width:60px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12); cursor:pointer;padding:0;transition:background .5s,border-color .5s} header.scrolled .tt{border-color:var(--line);background:var(--gold-soft)} .tt .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--gold); transition:transform .55s cubic-bezier(.35,1.4,.4,1),background .5s;display:grid;place-items:center} [data-theme="dark"] .tt .knob{transform:translateX(28px);background:#e0c67c} .tt svg{position:absolute;width:14px;height:14px;transition:opacity .4s,transform .55s cubic-bezier(.2,.7,.2,1)} .tt .sun{opacity:1;transform:rotate(0)} .tt .moon{opacity:0;transform:rotate(-90deg)} [data-theme="dark"] .tt .sun{opacity:0;transform:rotate(90deg)} [data-theme="dark"] .tt .moon{opacity:1;transform:rotate(0)} .tt .sun{fill:none;stroke:#1b241e;stroke-width:1.8;stroke-linecap:round} .tt .moon{fill:#0a1912} /* menu overlay */ .menu{position:fixed;inset:0;z-index:90;background:var(--bg);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s; display:grid;grid-template-rows:auto 1fr auto;overflow:auto} .menu.open{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s} .menu > .wrap{width:100%} .menu .top{display:flex;justify-content:space-between;align-items:center;height:92px;gap:20px} .menu .close{background:none;border:0;color:inherit;cursor:pointer;font:inherit;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;display:inline-flex;gap:14px;align-items:center;padding:10px 0} .menu .close b{width:22px;height:22px;position:relative;display:block} .menu .close b::before,.menu .close b::after{content:"";position:absolute;left:0;top:10px;width:22px;height:1.5px;background:currentColor;transform:rotate(45deg)} .menu .close b::after{transform:rotate(-45deg)} .menu ol{list-style:none;margin:0;padding:20px 0;display:grid;gap:4px;align-content:center} .menu li a{font-family:"Cormorant Garamond",serif;font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1.1;text-decoration:none;display:inline-flex;align-items:baseline;gap:22px; opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),color .3s} .menu.open li a{opacity:1;transform:none} .menu li:nth-child(1) a{transition-delay:.15s}.menu li:nth-child(2) a{transition-delay:.21s}.menu li:nth-child(3) a{transition-delay:.27s} .menu li:nth-child(4) a{transition-delay:.33s}.menu li:nth-child(5) a{transition-delay:.39s}.menu li:nth-child(6) a{transition-delay:.45s} .menu li:nth-child(7) a{transition-delay:.51s}.menu li:nth-child(8) a{transition-delay:.57s} .menu li a small{font-family:Manrope,sans-serif;font-size:.62rem;letter-spacing:.3em;color:var(--gold-text);font-weight:600} .menu li a:hover{color:var(--gold-text)} .menu .bottom{padding-top:28px;padding-bottom:36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:.9rem;color:var(--ink-2)} .menu .bottom a{text-decoration:none} /* ───────────────────────── photo sections ───────────────────────── */ .photo{position:relative;overflow:hidden;color:var(--on-photo);isolation:isolate} .photo .bgimg{position:absolute;inset:-12% 0;z-index:-2;width:100%;height:124%;object-fit:cover;filter:saturate(.9) contrast(1.03);will-change:transform} .post img,.strip img{transition:filter 1s ease} .photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ov-b) 0%,var(--ov-b) 28%,var(--ov-a) 68%,var(--ov-a) 100%)} .photo.right::after{background:linear-gradient(270deg,var(--ov-b) 0%,var(--ov-b) 28%,var(--ov-a) 68%,var(--ov-a) 100%)} .photo.dissolve{margin-top:-120px;-webkit-mask-image:linear-gradient(to bottom,transparent 50px,#000 220px);mask-image:linear-gradient(to bottom,transparent 50px,#000 220px)} .photo .in{position:relative;z-index:1;padding:200px 0 180px} .vr{display:grid;grid-template-columns:1px 1fr;gap:clamp(22px,3vw,44px);max-width:640px} .vr::before{content:"";background:linear-gradient(180deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);opacity:.9} .photo.right .vr{margin-left:auto} .photo h2{margin-bottom:22px} /* hero */ .hero{min-height:min(100svh,920px);display:flex;align-items:flex-end} .hero.phero{min-height:min(64svh,640px)} .hero.phero .in{padding:170px 0 clamp(56px,9vh,90px)} .phero h1{font-size:clamp(2.6rem,5.6vw,4.8rem)} .hero .bgimg{animation:kb 9s cubic-bezier(.2,.5,.3,1) both} @keyframes kb{from{transform:scale(1.1) translateY(-1%)}to{transform:scale(1) translateY(0)}} .hero::after{background:linear-gradient(180deg,rgba(8,28,18,.35) 0%,rgba(8,28,18,0) 30%,rgba(8,28,18,0) 45%,var(--ov-b) 100%), linear-gradient(90deg,var(--ov-a),transparent 60%)} .hero .in{padding:200px 0 clamp(72px,12vh,120px);width:100%} .hero .vr{max-width:760px} .hero h1{margin:0 0 26px} .hero h1 em{font-style:italic;font-weight:400;color:#e6d3a3} .hero .lead{font-size:clamp(1rem,1.3vw,1.18rem);max-width:30rem;margin-bottom:38px} .hero .btns{display:flex;gap:14px;flex-wrap:wrap} .hero .lbl,.hero h1,.hero .lead,.hero .btns{opacity:0;transform:translateY(22px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards} .hero h1{animation-delay:.15s}.hero .lead{animation-delay:.3s}.hero .btns{animation-delay:.45s} @keyframes rise{to{opacity:1;transform:none}} .scrollcue{position:absolute;right:clamp(22px,5vw,72px);bottom:40px;z-index:2;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.7); writing-mode:vertical-rl;display:flex;align-items:center;gap:12px} .scrollcue i{display:block;width:1px;height:56px;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.4s ease-in-out infinite} @keyframes cue{0%,100%{transform:scaleY(1);transform-origin:top}50%{transform:scaleY(.4)}} /* ───────────────────────── NIGHT MODE for photos (dark theme only) ───────────────────────── Same photos. In dark: cooler + darker grade, a navy "day-for-night" tint, a glowing moon and faint stars in the sky. Everything cross-fades with the theme toggle. */ [data-theme="dark"]{ --img:brightness(.7) contrast(1.08) saturate(.7); } .photo .night{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s ease;will-change:opacity} [data-theme="dark"] .photo .night{opacity:1;transition:opacity 1.4s ease} .night .tint{position:absolute;inset:0;mix-blend-mode:multiply; background:linear-gradient(180deg,#0b1a3d 0%,#10244a 40%,#0e2a3a 100%);opacity:.72} .night .dim{position:absolute;inset:0;background:rgba(4,10,24,.34)} .night .sky{position:absolute;inset:0} .night .glow{opacity:0;transition:opacity .6s ease} [data-theme="dark"] .night .glow{opacity:1;transition:opacity 1.6s ease .5s} .night .glow{position:absolute;inset:0;mix-blend-mode:screen; background:radial-gradient(circle at var(--mx,82%) var(--my,140px),rgba(190,208,255,.42) 0,rgba(150,175,240,.16) 14%,transparent 42%)} .night .starfield{position:absolute;inset:0;opacity:0;transition:opacity .6s ease} [data-theme="dark"] .night .starfield{opacity:1;transition:opacity 1.8s ease .7s} .night .stars,.night .stars2{position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:transparent; box-shadow:32.7vw 107px 0 1px rgba(255,255,255,0.74),8.1vw 304px 0 0px rgba(255,255,255,0.57),6.7vw 289px 0 0px rgba(255,255,255,0.37),43.5vw 65px 0 0px rgba(255,255,255,0.4),42.6vw 453px 0 0px rgba(255,255,255,0.92),62.8vw 328px 0 0px rgba(255,255,255,0.7),39.9vw 143px 0 0px rgba(255,255,255,0.68),14.1vw 244px 0 0px rgba(255,255,255,0.67),56.9vw 316px 0 0px rgba(255,255,255,0.41),57.0vw 126px 0 0px rgba(255,255,255,0.41),70.8vw 318px 0 0px rgba(255,255,255,0.72),49.6vw 302px 0 1px rgba(255,255,255,0.82),46.6vw 502px 0 1px rgba(255,255,255,0.57),25.3vw 122px 0 0px rgba(255,255,255,0.4),30.4vw 283px 0 0px rgba(255,255,255,0.79),29.2vw 67px 0 0px rgba(255,255,255,0.66),17.2vw 205px 0 0px rgba(255,255,255,0.91),42.3vw 372px 0 0px rgba(255,255,255,0.81),57.2vw 478px 0 0px rgba(255,255,255,0.55),35.3vw 284px 0 1px rgba(255,255,255,0.39),10.2vw 168px 0 1px rgba(255,255,255,0.77),7.4vw 404px 0 0px rgba(255,255,255,0.74),98.3vw 450px 0 1px rgba(255,255,255,0.52),38.8vw 372px 0 0px rgba(255,255,255,0.36),46.2vw 116px 0 0px rgba(255,255,255,0.65),22.4vw 177px 0 0px rgba(255,255,255,0.79),40.0vw 499px 0 1px rgba(255,255,255,0.4),45.0vw 311px 0 0px rgba(255,255,255,0.88),81.3vw 472px 0 0px rgba(255,255,255,0.77),97.7vw 379px 0 1px rgba(255,255,255,0.92),15.8vw 120px 0 0px rgba(255,255,255,0.49),23.9vw 278px 0 0px rgba(255,255,255,0.51),1.4vw 244px 0 0px rgba(255,255,255,0.72),32.2vw 94px 0 0px rgba(255,255,255,0.62),86.4vw 517px 0 1px rgba(255,255,255,0.59),39.6vw 276px 0 1px rgba(255,255,255,0.39),7.6vw 136px 0 1px rgba(255,255,255,0.45),34.3vw 56px 0 0px rgba(255,255,255,0.35)} .night .stars2{box-shadow:15.8vw 81px 0 0px rgba(255,255,255,0.72),7.9vw 136px 0 1px rgba(255,255,255,0.44),25.7vw 207px 0 0px rgba(255,255,255,0.63),12.3vw 279px 0 1px rgba(255,255,255,0.64),31.6vw 103px 0 0px rgba(255,255,255,0.8),73.6vw 275px 0 0px rgba(255,255,255,0.66),21.1vw 517px 0 0px rgba(255,255,255,0.44),54.2vw 43px 0 0px rgba(255,255,255,0.94),85.6vw 386px 0 0px rgba(255,255,255,0.66),90.0vw 212px 0 0px rgba(255,255,255,0.67),77.3vw 198px 0 0px rgba(255,255,255,0.72),78.3vw 418px 0 0px rgba(255,255,255,0.83),81.2vw 408px 0 0px rgba(255,255,255,0.47),49.3vw 404px 0 0px rgba(255,255,255,0.94),78.4vw 271px 0 0px rgba(255,255,255,0.47),60.3vw 206px 0 1px rgba(255,255,255,0.84),71.9vw 208px 0 0px rgba(255,255,255,0.4),11.0vw 270px 0 0px rgba(255,255,255,0.55),48.3vw 490px 0 0px rgba(255,255,255,0.64),65.0vw 439px 0 0px rgba(255,255,255,0.85),12.8vw 228px 0 0px rgba(255,255,255,0.64),18.5vw 434px 0 0px rgba(255,255,255,0.4),93.7vw 399px 0 1px rgba(255,255,255,0.63),73.8vw 73px 0 0px rgba(255,255,255,0.45),13.4vw 107px 0 1px rgba(255,255,255,0.83),15.3vw 453px 0 1px rgba(255,255,255,0.74);animation-delay:-2s} .night .stars{animation:twinkle 5s ease-in-out infinite} .night .stars2{animation:twinkle 7s ease-in-out infinite} @keyframes twinkle{0%,100%{opacity:.55}50%{opacity:1}} /* the moon SETS quickly (day) and RISES slowly (night) */ .night .moon{opacity:0;transform:translate(-50%,-50%) translateY(90px) scale(.92);transition:transform 1.1s cubic-bezier(.5,0,.8,.5),opacity .8s ease} [data-theme="dark"] .night .moon{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1);transition:transform 2.2s cubic-bezier(.16,.8,.22,1) .3s,opacity 1.3s ease .3s} .night .moon{position:absolute;left:var(--mx,82%);top:var(--my,140px);width:var(--ms,110px);height:var(--ms,110px);border-radius:50%;will-change:transform,opacity; background:radial-gradient(circle at 38% 34%,#fffdf2 0,#f6f0d9 40%,#e2dcc2 78%,#cfc8ad 100%); box-shadow:0 0 26px 6px rgba(255,248,222,.45),0 0 70px 22px rgba(205,218,255,.22),0 0 160px 70px rgba(140,165,255,.12)} .night .moon::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.5; background:radial-gradient(circle at 63% 57%,rgba(150,140,110,.28) 0,rgba(150,140,110,.12) 7%,transparent 12%), radial-gradient(circle at 31% 62%,rgba(150,140,110,.22) 0,rgba(150,140,110,.1) 5%,transparent 9%), radial-gradient(circle at 55% 27%,rgba(150,140,110,.18) 0,transparent 6%), radial-gradient(circle at 40% 42%,rgba(150,140,110,.14) 0,transparent 5%), radial-gradient(circle at 74% 36%,rgba(150,140,110,.16) 0,transparent 4%), radial-gradient(ellipse at 48% 70%,rgba(150,140,110,.12) 0,transparent 18%)} .night .moon::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:inset -14px -10px 26px rgba(80,75,60,.22)} .photo.right .night{--mx:16%} .hero .night{--mx:80%;--my:150px;--ms:118px} #course .night{--ms:74px;--my:120px} #events .night{--ms:66px;--my:120px;--mx:14%} .night.indoor .sky{display:none} .night.indoor .tint{opacity:.5} @media(max-width:720px){ .hero .night{--mx:76%;--my:120px;--ms:80px} #course .night,#events .night{--ms:52px;--my:100px} } @media(prefers-reduced-motion:reduce){ .night .stars,.night .stars2{animation:none} } html.still .night .stars,html.still .night .stars2{animation:none;opacity:.85} /* the veil: a soft wave that passes over the page when the theme changes */ .veil{position:fixed;left:0;right:0;top:-25%;height:150%;z-index:200;pointer-events:none;opacity:0;will-change:transform,opacity; background:linear-gradient(180deg,transparent 0%,rgba(10,24,58,.5) 32%,rgba(14,32,70,.55) 50%,rgba(10,24,58,.5) 68%,transparent 100%)} .veil.dusk{animation:sweepDown 1.7s cubic-bezier(.45,0,.2,1) both} .veil.dawn{background:linear-gradient(180deg,transparent 0%,rgba(255,206,120,.42) 32%,rgba(255,226,170,.5) 50%,rgba(255,206,120,.42) 68%,transparent 100%); animation:sweepUp 1.7s cubic-bezier(.45,0,.2,1) both} @keyframes sweepDown{0%{transform:translateY(-100%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(100%);opacity:0}} @keyframes sweepUp{0%{transform:translateY(100%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(-100%);opacity:0}} @media(prefers-reduced-motion:reduce){ .veil{display:none} .night .moon,[data-theme="dark"] .night .moon{transition:opacity .6s ease;transform:translate(-50%,-50%)} } /* ───────────────────────── plain sections ───────────────────────── */ section.plain{padding:clamp(96px,14vh,160px) 0;position:relative} .head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:56px} .head p{margin:0} /* membership: panel overlapping the course photo */ #membership{padding-top:0;margin-top:-140px;z-index:2} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--panel-line);box-shadow:var(--shadow)} .tier{padding:52px 40px 48px;border-right:1px solid var(--panel-line);display:flex;flex-direction:column} .tier:last-child{border-right:0} .tier .k{font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--gold-text)} .tier h3{font-size:2rem;margin:10px 0 18px} .tier .price{font-family:"Cormorant Garamond",serif;font-size:3rem;line-height:1;font-weight:500} .tier .price small{font-family:Manrope,sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-left:6px} .tier .yr{font-size:.86rem;color:var(--ink-2);margin:8px 0 26px} .tier ul{list-style:none;padding:0;margin:0 0 34px;font-size:.93rem;color:var(--ink-2);flex:1} .tier li{padding:9px 0;border-bottom:1px solid var(--panel-line);display:flex;gap:12px;align-items:baseline} .tier li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;transform:translateY(-3px)} .tier.feature{background:var(--gold-soft);position:relative} .tier.feature::before{content:"Most chosen";position:absolute;top:0;right:0;background:var(--gold);color:#1b241e;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;padding:8px 14px} .member-note{margin-top:26px;font-size:.86rem;color:var(--ink-2);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} /* news */ .news{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .post{text-decoration:none;color:inherit;display:block} .post .ph{overflow:hidden;aspect-ratio:4/3;margin-bottom:22px} .post img{width:100%;height:100%;object-fit:cover;filter:var(--img);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .post:hover img{transform:scale(1.05)} .post time{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--gold-text)} .post h3{margin:10px 0 8px;font-size:1.65rem} .post p{font-size:.94rem;color:var(--ink-2);margin:0} /* gallery strip */ #gallery{padding-bottom:0} .strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(22px,5vw,72px) 8px;scrollbar-width:none;-ms-overflow-style:none} .strip::-webkit-scrollbar{display:none} .strip figure{margin:0;flex:0 0 auto;width:clamp(240px,26vw,420px);aspect-ratio:4/5;overflow:hidden;scroll-snap-align:start} .strip figure:nth-child(even){aspect-ratio:4/3;align-self:flex-end} .strip img{width:100%;height:100%;object-fit:cover;filter:var(--img);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)} .strip figure:hover img{transform:scale(1.04)} /* contact */ #contact{background:var(--bg-2)} .contact{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start} .facts{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)} .facts li{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:.98rem} .facts .k{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--gold-text);padding-top:6px} .facts a{text-decoration:none} .facts a:hover{color:var(--gold-text)} .maplink{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:.9rem;text-decoration:none;font-weight:500} .maplink svg{width:18px;height:24px} .contact .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} /* footer */ footer{padding:80px 0 34px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-2)} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} footer h4{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--ink);margin:0 0 16px} footer ul{list-style:none;padding:0;margin:0} footer li{padding:5px 0} footer a{text-decoration:none} footer a:hover{color:var(--gold-text)} .fbrand{display:flex;gap:16px;align-items:center;margin-bottom:18px;color:var(--ink)} .fbrand svg{width:44px;height:44px} .fbrand .n{font-family:"Cormorant Garamond",serif;font-size:1.15rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;line-height:1} .fbrand .s{font-size:.52rem;letter-spacing:.44em;text-transform:uppercase;font-weight:600;color:var(--gold-text)} .social{display:flex;gap:12px;margin-top:20px} .social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:border-color .4s,transform .4s} .social a:hover{border-color:var(--gold);transform:translateY(-2px)} .social svg{width:16px;height:16px} .fbot{border-top:1px solid var(--line);margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem} .fbot a{text-decoration:none;margin-left:18px} /* section rail (laptop only) */ .rail{position:fixed;right:clamp(18px,2.4vw,36px);top:50%;transform:translateY(-50%);z-index:70;display:none;flex-direction:column;gap:14px;align-items:flex-end} .rail a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink-2);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600; opacity:.55;transition:opacity .4s,color .4s} .rail a span{opacity:0;transform:translateX(8px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)} .rail a i{display:block;width:18px;height:1px;background:currentColor;transition:width .5s cubic-bezier(.2,.7,.2,1)} .rail a:hover span,.rail a.on span{opacity:1;transform:none} .rail a.on{opacity:1;color:var(--gold-text)} .rail a.on i{width:34px} .rail.light a{color:#fff} .rail.light a.on{color:#e6d3a3} /* reveal on scroll */ .rv{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s} html.still .rv{opacity:1;transform:none;transition:none} html.still .hero .lbl,html.still .hero h1,html.still .hero .lead,html.still .hero .btns{animation:none;opacity:1;transform:none} html.still .hero .bgimg{animation:none} @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .hero .lbl,.hero h1,.hero .lead,.hero .btns{animation:none;opacity:1;transform:none} .hero .bgimg{animation:none} .scrollcue i{animation:none} html{scroll-behavior:auto} } @media(min-width:1100px){ .rail{display:flex} } @media(max-width:1000px){ .tiers{grid-template-columns:1fr} .tier{border-right:0;border-bottom:1px solid var(--panel-line)} .tier:last-child{border-bottom:0} .news{grid-template-columns:1fr} .contact{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr} #membership{margin-top:-90px} } @media(max-width:720px){ header .row{height:66px} header.scrolled .row{height:58px} .burger span{display:none} header .pill.gold{display:none} .brand{flex-direction:row;gap:10px} .brand .w{align-items:flex-start;gap:3px} .brand svg{width:30px;height:30px} header.scrolled .brand svg{width:28px;height:28px} .brand .n{font-size:.78rem;letter-spacing:.18em} .brand .s{font-size:.42rem;letter-spacing:.3em} header .row{grid-template-columns:1fr auto 1fr;min-width:0} .hright{gap:8px} .tt{width:50px;height:28px} .tt .knob{width:22px;height:22px;top:2px;left:2px} [data-theme="dark"] .tt .knob{transform:translateX(22px)} .tt svg{width:12px;height:12px} header .pill.login{width:34px;height:34px} .photo::after,.photo.right::after{background:linear-gradient(180deg,rgba(8,28,18,.35) 0%,rgba(8,28,18,.74) 28%,rgba(8,28,18,.82) 100%)} .hero::after{background:linear-gradient(180deg,rgba(8,28,18,.5) 0%,rgba(8,28,18,.25) 28%,rgba(8,28,18,.85) 72%,rgba(8,28,18,.9) 100%)} .on h1,.on h2,.on .lead,.on .lbl,.on .textlink{text-shadow:0 1px 3px rgba(0,0,0,.5)} .hero .in{padding:140px 0 70px} .hero .lead{font-size:1rem} .photo .in{padding:130px 0 110px} .photo.dissolve{margin-top:-70px;-webkit-mask-image:linear-gradient(to bottom,transparent 30px,#000 240px);mask-image:linear-gradient(to bottom,transparent 30px,#000 240px)} .vr{gap:18px} section.plain{padding:84px 0} .head{grid-template-columns:1fr;gap:18px;margin-bottom:36px} .tier{padding:38px 26px 36px} .facts li{grid-template-columns:1fr;gap:4px} .fgrid{grid-template-columns:1fr;gap:28px} .fbot{flex-direction:column;align-items:flex-start} .fbot a{margin:0 18px 0 0} .scrollcue{display:none} .strip figure{width:72vw} } /* ───────────────────────── inner pages ───────────────────────── */ /* Member Login: an outlined pill beside the gold one on laptops; a person icon on phones; first in the menu */ .pill .ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} header .pill.login{color:#fff;border-color:rgba(255,255,255,.55)} header.scrolled .pill.login{color:var(--ink);border-color:var(--ink)} header .pill.login:hover{border-color:var(--gold);color:var(--gold-text);transform:translateY(-2px)} header:not(.scrolled) .pill.login:hover{color:#fff;border-color:#fff} .menu-actions{display:flex;gap:12px;flex-wrap:wrap;padding:8px 0 26px;border-bottom:1px solid var(--line)} .menu ol{padding-top:26px} @media(max-width:1000px){ header .pill.gold{display:none} header .pill.login{padding:0;width:38px;height:38px;justify-content:center;border-radius:50%} header .pill.login span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} header .pill.login .ico{width:18px;height:18px} } .prose{max-width:66ch;font-size:1.05rem;color:var(--ink-2)} .prose h2,.prose h3{color:var(--ink);margin:0 0 20px} .prose h3{font-size:1.8rem} .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} .two .ph{aspect-ratio:4/5;overflow:hidden} .two .ph.wide{aspect-ratio:4/3} .two img{width:100%;height:100%;object-fit:cover;filter:var(--img);transition:filter 1s ease} .two.rev .txt{order:2} .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:34px} .val .num{font-family:"Cormorant Garamond",serif;font-size:2.4rem;color:var(--gold-text);line-height:1;margin-bottom:14px} .val h3{font-size:1.6rem;margin:0 0 8px} .val p{color:var(--ink-2);font-size:.95rem;margin:0} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .step{border-top:1px solid var(--gold);padding-top:22px} .step .num{font-family:"Cormorant Garamond",serif;font-size:2.2rem;color:var(--gold-text);line-height:1;margin-bottom:12px} .step h3{font-size:1.5rem;margin:0 0 8px} .step p{color:var(--ink-2);font-size:.95rem;margin:0} .faq{border-top:1px solid var(--line);max-width:760px} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;padding:22px 0;font-family:"Cormorant Garamond",serif;font-size:1.45rem;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:Manrope,sans-serif;font-size:1.2rem;color:var(--gold-text);flex:none} .faq details[open] summary::after{content:"–"} .faq p{color:var(--ink-2);padding:0 0 22px;margin:0;max-width:62ch} .person{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;border:1px solid var(--line);padding:28px 30px;max-width:620px} .person .mono{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);font-family:"Cormorant Garamond",serif;font-size:1.6rem;color:var(--gold-text)} .person h3{font-size:1.5rem;margin:0 0 4px} .person p{margin:0;color:var(--ink-2);font-size:.95rem} .person a{text-decoration:none} .form{background:var(--panel);border:1px solid var(--panel-line);padding:clamp(28px,4vw,56px);box-shadow:var(--shadow);position:relative} .fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px} .field{display:flex;flex-direction:column;gap:8px} .field.full{grid-column:1/-1} .field label{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--gold-text)} .field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 0;border-radius:0;width:100%;transition:border-color .3s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)} .field textarea{min-height:120px;resize:vertical} .field select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8922f' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:12px} .field select option{color:#1b241e;background:#fff} .field .hint{font-size:.8rem;color:var(--ink-2)} .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0} .form .btns{margin-top:30px;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .form .small{font-size:.8rem;color:var(--ink-2)} .notice{padding:18px 22px;border:1px solid var(--gold);background:var(--gold-soft);margin-bottom:28px;font-size:.96rem} .notice.err{border-color:#b3412f;background:rgba(179,65,47,.1)} .masonry{columns:3;column-gap:16px} .masonry figure{margin:0 0 16px;break-inside:avoid;overflow:hidden;cursor:zoom-in;position:relative} .masonry img{width:100%;height:auto;filter:var(--img);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1s ease} .masonry figure:hover img{transform:scale(1.04)} .masonry figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,transparent,rgba(5,15,10,.7));opacity:0;transition:opacity .5s} .masonry figure:hover figcaption{opacity:1} .lightbox{position:fixed;inset:0;z-index:300;background:rgba(5,12,10,.95);display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:20px} .lightbox.open{display:flex} .lightbox img{max-width:92vw;max-height:80vh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)} .lightbox .cap{color:#c9d3cb;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase} .lightbox button{position:absolute;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:grid;place-items:center} .lightbox button:hover{border-color:#e0c67c;color:#e0c67c} .lightbox .x{top:22px;right:22px} .lightbox .prev{left:18px;top:50%;transform:translateY(-50%)} .lightbox .next{right:18px;top:50%;transform:translateY(-50%)} .cta{padding:clamp(80px,12vh,140px) 0;text-align:center} .cta h2{margin-bottom:26px} .cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px} .legal{max-width:72ch;color:var(--ink-2)} .legal h2{font-size:1.9rem;color:var(--ink);margin:46px 0 12px} .legal p,.legal li{font-size:1rem} .legal ul{padding-left:22px} .empty{border:1px dashed var(--line);padding:40px;text-align:center;color:var(--ink-2);max-width:640px;margin:0 auto} .crumb{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--gold-text)} .hero.errpage{min-height:100svh;align-items:center;text-align:center} .hero.errpage .in{max-width:640px;margin:0 auto;padding:160px 22px 90px} @media(max-width:1000px){ .vals{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr} .two{grid-template-columns:1fr} .two.rev .txt{order:0} .masonry{columns:2} } @media(max-width:720px){ .vals{grid-template-columns:1fr} .fgrid2{grid-template-columns:1fr} .masonry{columns:1} .person{grid-template-columns:1fr} .hright{gap:10px} }