:root{--black:#050505;--ink:#0b0b0b;--panel:#11100e;--gold:#c6a15b;--gold-bright:#dfbf7a;--gold-dark:#776039;--ivory:#f0e7d8;--muted:#a99f91;--line:#c6a15b55;--serif:"Bodoni 72","Bodoni MT",Didot,Georgia,serif;--sans:"Segoe UI",Arial,sans-serif;--pad:clamp(24px,5vw,80px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--ivory);font:16px/1.65 var(--sans)}a,button{color:inherit}button,input,textarea{font:inherit}:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}.skip{position:fixed;top:-80px;left:16px;z-index:50;background:var(--ivory);color:var(--black);padding:10px 16px}.skip:focus{top:16px}header{position:absolute;z-index:20;inset:0 0 auto;height:102px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff2}.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1}.brand-name{font:24px var(--serif);letter-spacing:.04em}.brand-role{margin-top:8px;color:var(--gold);font-size:8px;text-transform:uppercase;letter-spacing:.32em}header nav{display:flex;gap:34px;align-items:center}header nav a{color:#d1c7b8;text-decoration:none;font-size:9px;text-transform:uppercase;letter-spacing:.2em}header nav a:last-child{padding:11px 15px;border:1px solid var(--line)}.menu-button{display:none;border:0;background:0;font-size:9px;text-transform:uppercase;letter-spacing:.2em}
.hero{height:100svh;min-height:730px;position:relative;overflow:hidden;background:var(--black)}.hero-image{position:absolute;inset:0;background:image-set(url("../img/hero-black-gold.webp") type("image/webp"), url("../img/hero-black-gold.jpg") type("image/jpeg")) center/cover no-repeat}.hero-image:after{content:"";position:absolute;inset:0;background:#0003}.hero-frame{position:absolute;z-index:1;inset:145px 9vw 74px;border:1px solid var(--line);border-top:0}.hero-frame:before,.hero-frame:after{content:"";position:absolute;top:0;width:30%;height:1px;background:var(--gold)}.hero-frame:before{left:0}.hero-frame:after{right:0}.hero-title{position:absolute;z-index:2;left:0;right:0;top:42%;transform:translateY(-50%);text-align:center;pointer-events:none}.hero-title>p{margin:0 0 24px;color:var(--gold-bright);font-size:10px;text-transform:uppercase;letter-spacing:.55em}.hero h1{margin:0;display:flex;justify-content:space-between;padding:0 5.5vw;font:400 clamp(100px,14.5vw,240px)/.72 var(--serif);letter-spacing:-.07em}.hero h1 span:last-child{font-style:italic}.hero-intro{position:absolute;z-index:2;left:var(--pad);bottom:100px;width:330px;margin:0;font:20px/1.45 var(--serif);color:#ddd1c1}.hero-actions{position:absolute;z-index:2;right:var(--pad);bottom:100px;display:flex;align-items:center;gap:24px}.gold-button,.ivory-button{min-height:52px;border:1px solid var(--gold);border-radius:0;padding:13px 23px;background:var(--gold);color:var(--black);font-size:9px;text-transform:uppercase;letter-spacing:.18em;cursor:pointer}.gold-button:hover{background:var(--gold-bright)}.hero-actions a{font-size:9px;text-transform:uppercase;letter-spacing:.18em;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:5px}.hero-number{position:absolute;right:2vw;top:50%;writing-mode:vertical-rl;color:var(--gold);font:italic 13px var(--serif);letter-spacing:.18em}
.section-index{display:block;color:var(--gold);font-size:8px;text-transform:uppercase;letter-spacing:.3em;margin-bottom:28px}.statement{padding:clamp(120px,14vw,220px) var(--pad);display:grid;grid-template-columns:55px 1.25fr .75fr;gap:6vw;background:var(--ivory);color:var(--black)}.vertical-label{margin:0;writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.3em;font-size:8px;color:var(--gold-dark)}h2{margin:0;font:400 clamp(60px,7.2vw,112px)/.9 var(--serif);letter-spacing:-.05em}.statement h2 em{font-weight:400;color:var(--gold-dark)}.statement-copy{padding-top:5vw;max-width:490px}.statement-copy .lead{font:28px/1.4 var(--serif);margin-top:0}.statement-copy>p:not(.lead){color:#575046}.gold-link{margin-top:30px;padding:0 0 6px;border:0;border-bottom:1px solid var(--gold-dark);background:0;text-transform:uppercase;letter-spacing:.18em;font-size:9px;cursor:pointer}.gold-link span{margin-left:18px}
.private-world{position:relative;padding:clamp(110px,13vw,200px) var(--pad);overflow:hidden;background:var(--ink)}.private-head{max-width:810px;margin-left:13vw}.private-head h2{font-size:clamp(75px,10vw,160px)}.private-head h2 i{font-weight:400;color:transparent;-webkit-text-stroke:1px var(--gold)}.private-head>p{max-width:460px;color:var(--muted);margin:35px 0 0}.collection{position:relative;z-index:2;margin-top:110px;border-top:1px solid var(--line)}.collection article{display:grid;grid-template-columns:80px 1fr auto;gap:30px;align-items:center;padding:35px 0;border-bottom:1px solid var(--line)}.collection article>span{font:italic 17px var(--serif);color:var(--gold)}.collection h3{font:400 35px var(--serif);margin:0}.collection p{color:var(--muted);margin:5px 0}.collection b{font-size:8px;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-weight:400}.monogram{position:absolute;right:-70px;top:90px;width:340px;height:340px;border:1px solid #c6a15b33;border-radius:50%;display:grid;place-items:center;color:#c6a15b22}.monogram span{font:220px/.8 var(--serif)}.monogram small{position:absolute;bottom:45px;text-transform:uppercase;letter-spacing:.25em;font-size:7px}
.access{padding:clamp(110px,13vw,200px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:10vw;background:var(--gold);color:var(--black)}.access .section-index{color:#4b3a20}.access-title>p{max-width:470px;margin:35px 0}.access ol{margin:0;padding:0;list-style:none}.access li{display:grid;grid-template-columns:55px 1fr;gap:25px;padding:28px 0;border-top:1px solid #0005}.access li:last-child{border-bottom:1px solid #0005}.access li>span{font:italic 17px var(--serif)}.access h3{font:400 28px var(--serif);margin:0}.access li p{margin:5px 0;color:#493e30}.ivory-button{grid-column:2;margin-top:-45px;width:max-content;background:var(--black);border-color:var(--black);color:var(--ivory)}
.members{position:relative;padding:clamp(110px,12vw,190px) max(var(--pad),10vw);display:grid;grid-template-columns:1fr .75fr;gap:12vw;align-items:center;background:var(--black)}.members h2 em{color:var(--gold);font-weight:400}.members-copy>p{font:21px var(--serif);color:var(--muted)}.login-form,.application-form{display:grid;gap:25px}.login-form label,.application-form label{display:grid;gap:8px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.18em}input,textarea{width:100%;border:0;border-bottom:1px solid #fff5;background:transparent;border-radius:0;color:var(--ivory);padding:12px 0;outline:0}input:focus,textarea:focus{border-color:var(--gold)}textarea{resize:vertical}.form-row{display:flex;align-items:center;justify-content:space-between}.form-row a{color:var(--muted);font-size:10px}.check{display:flex!important;grid-template-columns:auto 1fr!important;gap:9px!important;align-items:start;text-transform:none!important;letter-spacing:0!important;font-size:11px!important}.check input{width:auto;margin-top:4px;accent-color:var(--gold)}.form-status{min-height:1.3em;color:var(--gold);font-size:12px}
footer{padding:60px var(--pad) 35px;border-top:1px solid #fff2;display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:start}footer>p{margin:0;color:var(--muted);font:italic 20px var(--serif)}footer>small{color:#70685f;font-size:9px}
.application-dialog{width:min(1080px,calc(100% - 28px));max-height:calc(100svh - 28px);padding:0;border:1px solid var(--line);background:var(--ink);color:var(--ivory)}.application-dialog::backdrop{background:#000e}.application-dialog[open]{display:grid;grid-template-columns:.7fr 1.3fr}.dialog-close{position:absolute;right:20px;top:14px;z-index:5;border:0;background:0;color:var(--ivory);font-size:34px;cursor:pointer}.dialog-mark{position:relative;overflow:hidden;padding:55px 40px;background:var(--gold);color:var(--black);display:flex;flex-direction:column;justify-content:space-between}.dialog-mark>span{font:150px var(--serif)}.dialog-mark>small{text-transform:uppercase;letter-spacing:.3em;font-size:8px}.application-form{padding:65px}.application-form h2{font-size:72px}.application-form>p{color:var(--muted);margin-top:-5px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.inner-header{position:relative;background:var(--black)}.inner-main{padding-top:102px}.page-hero{min-height:58svh;padding:120px var(--pad) 90px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line);background:var(--panel)}.page-hero .wrap{width:100%;display:grid;grid-template-columns:1fr .7fr;gap:10vw;align-items:end}.page-hero h1{margin:0;font:400 clamp(72px,11vw,170px)/.8 var(--serif);letter-spacing:-.06em}.page-hero h1 em{font-weight:400;color:var(--gold)}.page-hero p{color:var(--muted);font:23px/1.45 var(--serif);max-width:500px}.content-section{padding:100px var(--pad)}.editorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.editorial-grid h2{font-size:70px}.editorial-grid p{color:var(--muted)}.media-panel{min-height:650px;background:image-set(url("../img/hero-black-gold.webp") type("image/webp"), url("../img/hero-black-gold.jpg") type("image/jpeg")) center/cover no-repeat;border:1px solid var(--line)}.gallery-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.gallery-grid figure{margin:0;min-height:520px;background:center/cover no-repeat;border:1px solid var(--line)}.gallery-grid figure:first-child{background-image:image-set(url("../img/hero-black-gold.webp") type("image/webp"), url("../img/hero-black-gold.jpg") type("image/jpeg"))}.gallery-grid figure:nth-child(2){background-image:image-set(url("../img/hero-salon-v2.webp") type("image/webp"), url("../img/hero-salon-v2.jpg") type("image/jpeg"))}.gallery-grid figure:nth-child(3){background-image:image-set(url("../img/hero-background.webp") type("image/webp"), url("../img/hero-background.jpg") type("image/jpeg"));grid-column:1/-1;min-height:620px}.gallery-grid figcaption{background:var(--black);padding:12px;color:var(--gold);font-size:8px;text-transform:uppercase;letter-spacing:.2em}.account-shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100svh - 102px)}.account-nav{padding:55px 28px;border-right:1px solid var(--line)}.account-nav a{display:block;padding:15px 0;color:var(--muted);text-decoration:none;border-bottom:1px solid #fff1}.account-nav a:first-of-type{color:var(--gold)}.account-content{padding:65px var(--pad)}.account-content h1{font:70px var(--serif);margin:0 0 45px}.private-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.private-cards article{min-height:380px;border:1px solid var(--line);padding:25px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--panel)}.private-cards h3{font:30px var(--serif);margin:0}.private-cards p{color:var(--muted)}
@media(max-width:800px){header{height:82px;padding:0 20px}.brand-name{font-size:20px}.menu-button{display:block}header nav{display:none;position:fixed;inset:0;background:var(--black);padding:120px 28px;flex-direction:column;align-items:flex-start}header nav.is-open{display:flex}header nav a{font:32px var(--serif);text-transform:none;letter-spacing:0}.hero{height:auto;min-height:100svh;padding-top:62svh}.hero-image{height:62svh;background-position:center}.hero-frame{inset:105px 20px auto;height:calc(62svh - 135px)}.hero-title{top:32svh}.hero-title>p{letter-spacing:.35em}.hero h1{font-size:21vw;padding:0 15px}.hero-intro,.hero-actions{position:relative;left:auto;right:auto;bottom:auto}.hero-intro{width:auto;padding:45px 24px 20px}.hero-actions{padding:0 24px 70px;align-items:flex-start;flex-direction:column}.hero-number{display:none}.statement{grid-template-columns:1fr;padding:95px 24px;gap:45px}.vertical-label{display:none}h2{font-size:15vw}.statement-copy{padding:0}.statement-copy .lead{font-size:25px}.private-world{padding:95px 24px}.private-head{margin:0}.private-head h2{font-size:19vw}.collection{margin-top:70px}.collection article{grid-template-columns:45px 1fr}.collection article>b{grid-column:2}.collection h3{font-size:28px}.monogram{right:-170px;top:160px}.access{grid-template-columns:1fr;padding:95px 24px;gap:60px}.ivory-button{grid-column:1;margin:0}.members{grid-template-columns:1fr;padding:95px 24px;gap:60px}footer{grid-template-columns:1fr;padding:50px 24px 30px}.application-dialog[open]{display:block}.dialog-mark{padding:35px 24px}.dialog-mark>span{font-size:70px}.application-form{padding:40px 24px}.application-form h2{font-size:50px}.pair{grid-template-columns:1fr}.inner-main{padding-top:82px}.page-hero{min-height:55svh;padding:90px 24px 65px}.page-hero .wrap,.editorial-grid{grid-template-columns:1fr}.page-hero h1{font-size:20vw}.content-section{padding:75px 24px}.media-panel{min-height:480px}.gallery-grid{grid-template-columns:1fr}.gallery-grid figure,.gallery-grid figure:nth-child(3){grid-column:auto;min-height:500px}.account-shell{grid-template-columns:1fr}.account-nav{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow:auto;gap:24px}.account-nav a{white-space:nowrap}.account-content{padding:55px 24px}.private-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Refined editorial type scale: one hero statement, restrained headings elsewhere */
.brand-role{font-size:11px;letter-spacing:.24em}.hero-title>p{font-size:12px;letter-spacing:.38em}.hero h1{font-size:clamp(68px,8.4vw,132px);line-height:.82;letter-spacing:-.045em;padding:0 11vw}.hero-intro{font-size:19px}.hero-number{font-size:13px}.section-index{font-size:12px;letter-spacing:.2em}h2{font-size:clamp(46px,5vw,78px);line-height:1}.statement-copy .lead{font-size:24px}.private-head h2{font-size:clamp(56px,6.4vw,98px)}.collection h3{font-size:30px}.access h3{font-size:25px}.members h2{font-size:clamp(52px,6vw,90px)}.page-hero h1{font-size:clamp(58px,7.2vw,104px);line-height:.9}.page-hero p{font-size:20px}.editorial-grid h2{font-size:clamp(44px,5vw,72px)}.account-content h1{font-size:clamp(42px,5vw,66px)}.application-form h2{font-size:clamp(46px,5vw,68px)}header nav a,.gold-button,.ivory-button,.gold-link{font-size:12px}
@media(max-width:800px){.hero-title{top:34svh}.hero h1{font-size:clamp(56px,16vw,72px);padding:0 22px}.hero-title>p{font-size:11px}.statement h2,.access h2,.members h2{font-size:clamp(44px,12vw,58px)}.private-head h2{font-size:clamp(50px,13vw,64px)}.page-hero h1{font-size:clamp(52px,14vw,68px)}.application-form h2{font-size:46px}.collection h3{font-size:26px}.account-content h1{font-size:42px;line-height:1.05}}

/* Continuous black design and fuller content */
body,.statement,.private-world,.access,.members,.page-hero,.content-section,.account-nav,.account-content,.application-dialog,.dialog-mark{background:#000;color:var(--ivory)}
.statement-copy>p:not(.lead),.access-title>p,.access li p,.editorial-grid p{color:var(--muted)}.statement,.access,.principles,.encounter,.before-access{border-bottom:1px solid var(--line)}.access .section-index{color:var(--gold)}.access li{border-color:var(--line)}.access li:last-child{border-color:var(--line)}.ivory-button{background:var(--gold);border-color:var(--gold);color:#000;text-decoration:none;display:inline-flex;align-items:center}.dialog-mark{border-right:1px solid var(--line);color:var(--gold)}.page-hero{border-bottom-color:var(--line)}
.hero{min-height:850px}.hero-title{top:32%}.hero-image:after{background:#0005}.hero-intro{left:var(--pad);bottom:58px;width:min(460px,34vw);padding:24px;border-left:1px solid var(--gold);background:#000d;font:16px/1.65 var(--sans)}.hero-intro p{margin:12px 0}.hero-intro .intro-secondary{color:var(--muted)}.intro-label{display:block;color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.2em}.intro-label b{margin-right:8px}.intro-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;color:#d7cbbb;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.intro-facts i{color:var(--gold);font-style:normal;font-size:8px;margin-right:4px}.hero-actions{bottom:72px}.hero-actions .gold-button{text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:13px}.gold-button span,.ivory-button span{margin-left:10px}
.principles{padding:clamp(90px,10vw,150px) var(--pad);display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;background:#000}.principles-head{max-width:520px}.principles-head>p{color:var(--muted);max-width:430px}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.principle-grid article{padding:32px 25px;border-right:1px solid var(--line)}.principle-grid article:last-child{border:0}.principle-grid .symbol{color:var(--gold);font-size:24px}.principle-grid h3{margin:48px 0 12px;font:400 27px var(--serif)}.principle-grid p{margin:0;color:var(--muted)}
.encounter{position:relative;padding:clamp(90px,10vw,150px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:10vw;background:#000;overflow:hidden}.encounter-number{position:absolute;right:3vw;top:-.25em;color:#c6a15b14;font:240px var(--serif)}.encounter-copy{position:relative;z-index:1;padding-top:35px}.encounter-copy .lead{margin-top:0;font:25px/1.4 var(--serif)}.encounter-copy>p:not(.lead){color:var(--muted)}.experience-notes{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}.experience-notes span{padding:9px 13px;border:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.experience-notes b{color:var(--gold);margin-right:6px}.encounter .gold-link{color:var(--ivory);border-color:var(--gold)}
.before-access{padding:clamp(90px,10vw,150px) var(--pad);display:grid;grid-template-columns:.7fr 1.3fr;gap:10vw;background:#000}.info-list{border-top:1px solid var(--line)}.info-list details{border-bottom:1px solid var(--line);padding:24px 0}.info-list summary{cursor:pointer;list-style:none;font:23px var(--serif)}.info-list summary::-webkit-details-marker{display:none}.info-list summary span{display:inline-block;width:52px;color:var(--gold);font:italic 14px var(--serif)}.info-list details p{margin:15px 0 0 52px;color:var(--muted);max-width:600px}.collection article>span{color:var(--gold);font-size:22px}.collection article>b{font-size:12px}.monogram{color:#c6a15b1f}.gallery-grid figcaption{font-size:12px}.account-nav a{font-size:14px}.private-cards article{background:#000}
@media(max-width:1000px) and (min-width:801px){.principles{grid-template-columns:1fr}.hero-intro{width:390px}.hero-actions{right:35px}}
@media(max-width:800px){.hero{min-height:auto}.hero-title{top:31svh}.hero-intro{width:auto;padding:32px 24px 16px;border-left:0;border-top:1px solid var(--line);background:#000}.intro-facts{gap:8px 12px}.principles,.encounter,.before-access{grid-template-columns:1fr;padding:80px 24px;gap:50px}.principle-grid{grid-template-columns:1fr}.principle-grid article{border-right:0;border-bottom:1px solid var(--line);padding:28px 5px}.principle-grid article:last-child{border-bottom:0}.principle-grid h3{margin:20px 0 8px}.encounter-number{font-size:150px}.before-access h2{font-size:clamp(44px,12vw,58px)}.info-list summary{font-size:20px}.info-list details p{margin-left:0}.dialog-mark{border-right:0;border-bottom:1px solid var(--line)}}

/* Compact spacing pass */
.principles,.statement,.encounter,.private-world,.access,.before-access,.members{padding-top:clamp(58px,5vw,80px);padding-bottom:clamp(58px,5vw,80px)}
.principles{gap:6vw;align-items:start}.principles-head h2{margin-bottom:22px}.principles-head>p{margin-bottom:0}.principle-grid article{padding-top:26px;padding-bottom:28px}.principle-grid h3{margin-top:28px}
.statement{gap:4vw}.statement-copy{padding-top:28px}.statement-copy p{margin-top:0;margin-bottom:18px}.gold-link{margin-top:12px}
.encounter{gap:6vw}.encounter-copy{padding-top:18px}.experience-notes{margin:22px 0}
.private-head{margin-left:8vw}.private-head>p{margin-top:24px}.collection{margin-top:58px}.collection article{padding:26px 0}.collection h3{margin-bottom:2px}
.access{gap:6vw}.access-title>p{margin-top:24px;margin-bottom:0}.access li{padding:22px 0}.ivory-button{margin-top:-24px}
.before-access{gap:6vw}.info-list details{padding:19px 0}.members{gap:7vw}.members-copy>p{margin-bottom:0}
.page-hero{min-height:420px;padding-top:78px;padding-bottom:68px}.content-section{padding-top:72px;padding-bottom:72px}.editorial-grid{gap:5vw}.media-panel{min-height:520px}.gallery-grid figure{min-height:440px}.gallery-grid figure:nth-child(3){min-height:520px}.account-content{padding-top:48px;padding-bottom:48px}.account-content h1{margin-bottom:30px}.private-cards article{min-height:320px}footer{padding-top:42px;padding-bottom:28px}
@media(max-width:800px){.principles,.statement,.encounter,.private-world,.access,.before-access,.members{padding-top:56px;padding-bottom:56px}.principles,.encounter,.before-access{gap:34px}.statement{gap:28px}.statement-copy{padding-top:0}.principle-grid article{padding:24px 4px}.private-head{margin-left:0}.collection{margin-top:42px}.collection article{padding:22px 0}.access{gap:34px}.ivory-button{margin-top:0}.page-hero{min-height:360px;padding-top:62px;padding-bottom:52px}.content-section{padding-top:52px;padding-bottom:52px}.media-panel{min-height:400px}.gallery-grid figure,.gallery-grid figure:nth-child(3){min-height:420px}.members{gap:38px}footer{padding-top:38px}}

/* Unified spacing scale */
:root{--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:48px;--space-6:72px}
.section-index{margin-bottom:var(--space-3)}
.principles,.statement,.encounter,.private-world,.access,.before-access,.members{padding-top:var(--space-6);padding-bottom:var(--space-6)}
.principles,.encounter,.before-access{gap:var(--space-6)}
.principles-head h2,.private-head h2,.access-title h2,.members-copy h2{margin-bottom:var(--space-3)}
.principles-head>p,.private-head>p,.access-title>p,.members-copy>p{margin-top:0}
.statement{gap:var(--space-5)}.statement-copy{padding-top:var(--space-3)}
.statement-copy .lead,.encounter-copy .lead{margin-bottom:var(--space-3)}
.encounter-copy{padding-top:var(--space-3)}
.private-head{margin-left:6vw}.collection{margin-top:var(--space-5)}
.access{gap:var(--space-6)}.access ol{align-self:start}.ivory-button{margin-top:0}
.before-access{gap:var(--space-6)}.members{gap:var(--space-6)}
.hero-intro{padding:var(--space-3)}.intro-facts{margin-top:var(--space-3)}
.hero-actions{bottom:58px}.hero-actions .gold-button{display:inline-flex;align-items:center}
.page-hero{padding-top:var(--space-6);padding-bottom:var(--space-6)}.content-section{padding-top:var(--space-6);padding-bottom:var(--space-6)}
@media(max-width:800px){:root{--space-5:40px;--space-6:48px}.hero{padding-top:58svh}.hero-image{height:58svh}.hero-frame{height:calc(58svh - 135px)}.hero-title{top:29svh}.hero-intro{padding:var(--space-4) var(--space-3) 0}.intro-facts{margin-top:var(--space-3);margin-bottom:0}.hero-actions{padding:var(--space-3) var(--space-3) 36px;gap:var(--space-3)}.principles,.statement,.encounter,.private-world,.access,.before-access,.members{padding-top:var(--space-6);padding-bottom:var(--space-6)}.principles,.encounter,.before-access,.access,.members{gap:var(--space-4)}.statement{gap:var(--space-4)}.statement-copy,.encounter-copy{padding-top:0}.private-head{margin-left:0}.collection{margin-top:var(--space-4)}.page-hero,.content-section{padding-top:var(--space-6);padding-bottom:var(--space-6)}}

/* Homepage gallery */
#main{display:flex;flex-direction:column}.hero{order:1}.principles{order:2}.statement{order:3}.encounter{order:4}.home-gallery{order:5}.private-world{order:6}.access{order:7}.before-access{order:8}.members{order:9}
.home-gallery{position:relative;padding:var(--space-6) var(--pad);background:#000;border-top:1px solid var(--line);overflow:hidden}.home-gallery-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-5)}.home-gallery-head h2{font-size:clamp(46px,5vw,78px)}.home-gallery-head p{max-width:620px;margin:var(--space-3) 0 0;color:var(--muted)}.gallery-number{margin-top:-35px;color:#c6a15b18;font:180px/.8 var(--serif)}.moment-grid{display:grid;grid-template-columns:1.1fr .72fr .72fr;grid-template-rows:260px 260px;gap:18px}.moment{position:relative;overflow:hidden;border:1px solid var(--line);background-color:#0a0a0a;background-repeat:no-repeat;background-size:cover;text-decoration:none}.moment:after{content:"";position:absolute;inset:0;background:#0002}.moment span{position:absolute;z-index:1;left:18px;bottom:14px;color:var(--ivory);font-size:12px;text-transform:uppercase;letter-spacing:.16em}.moment-one{grid-row:1/3;background-image:image-set(url("../img/hero-background.webp") type("image/webp"), url("../img/hero-background.jpg") type("image/jpeg"));background-position:70% center}.moment-two{grid-column:2/4;background-image:image-set(url("../img/hero-salon-v2.webp") type("image/webp"), url("../img/hero-salon-v2.jpg") type("image/jpeg"));background-position:38% 34%}.moment-three{background-image:image-set(url("../img/hero-black-gold.webp") type("image/webp"), url("../img/hero-black-gold.jpg") type("image/jpeg"));background-position:43% center}.moment-four{background-image:image-set(url("../img/hero-background.webp") type("image/webp"), url("../img/hero-background.jpg") type("image/jpeg"));background-position:78% center}.gallery-link{display:inline-block;margin-top:var(--space-4);color:var(--ivory);border-color:var(--gold)}
@media(max-width:800px){.home-gallery{padding:var(--space-6) var(--space-3)}.home-gallery-head{margin-bottom:var(--space-4)}.gallery-number{font-size:96px;margin-top:0}.moment-grid{grid-template-columns:1fr 1fr;grid-template-rows:440px 210px 210px;gap:12px}.moment-one{grid-column:1/3;grid-row:1}.moment-two{grid-column:1/3;grid-row:2}.moment-three,.moment-four{grid-row:3}.home-gallery-head p{margin-top:var(--space-2)}}

/* Structured black footer */
.footer-rich{display:block;padding:64px var(--pad) 28px;background:#000;border-top:1px solid var(--line)}
.footer-rich__links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,6vw,96px);padding-bottom:56px}
.footer-rich__links section{min-width:0}
.footer-rich__links h2{margin:0 0 22px;color:var(--gold);font:600 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.16em}
.footer-rich__links a,.footer-rich__links span{display:block;width:max-content;max-width:100%;margin:0 0 12px;color:#d8d0c4;font:14px/1.5 var(--sans);text-decoration:none}
.footer-rich__links a{transition:color .18s ease}
.footer-rich__links a:hover{color:var(--gold-bright)}
.footer-rich__bottom{padding-top:24px;border-top:1px solid var(--line)}
.footer-rich__bottom p{max-width:980px;margin:0;color:#81786d;font:12px/1.65 var(--sans)}
.application-form .optional{color:#756d63;font-size:11px;letter-spacing:.1em}
.application-form .field-help{color:#756d63;font-size:12px;letter-spacing:0;text-transform:none}
@media(max-width:900px){.footer-rich__links{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:42px}}
@media(max-width:560px){.footer-rich{padding:48px 24px 24px}.footer-rich__links{grid-template-columns:1fr;gap:34px;padding-bottom:42px}.footer-rich__links h2{margin-bottom:16px}.footer-rich__bottom{padding-top:20px}.footer-rich__bottom p{font-size:12px}}

/* Combined member login and access request */
#main.access-portal{min-height:calc(100svh - 102px);display:grid;grid-template-columns:1fr 1fr;background:#000}
.access-tabs{display:none}
.access-half{display:flex;align-items:flex-start;min-width:0;padding:clamp(64px,6vw,96px) clamp(32px,5vw,78px)}
.access-login{border-right:1px solid var(--line);background:linear-gradient(135deg,#0b0b0b 0%,#000 70%)}
.access-request{background:#000}
.access-half__inner{width:100%;max-width:620px;margin:0 auto}
.access-half h1,.access-half h2{margin:0;font:400 clamp(50px,5vw,76px)/.92 var(--serif);letter-spacing:-.045em}
.access-half h1 em,.access-half h2 em{color:var(--gold);font-weight:400}
.access-intro{max-width:480px;margin:24px 0 38px;color:var(--muted);font:19px/1.5 var(--serif)}
.access-half .login-form,.access-half .application-form{padding:0}
.access-half .gold-button{width:max-content;margin-top:2px}
.portal-application textarea{min-height:82px}
.nav-access{padding:11px 15px;border:1px solid var(--line)}
@media(max-width:1000px){.access-half{padding-left:32px;padding-right:32px}.access-half .pair{grid-template-columns:1fr}}
@media(max-width:800px){
  #main.access-portal{display:block;min-height:calc(100svh - 82px)}
  .access-tabs{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr 1fr;background:#050505;border-bottom:1px solid var(--line)}
  .access-tabs button{min-height:58px;padding:12px 8px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
  .access-tabs button[aria-selected="true"]{border-bottom-color:var(--gold);color:var(--gold-bright)}
  .access-half{display:none;padding:48px 24px 56px}
  .access-half.is-active{display:flex}
  .access-login{border-right:0;background:linear-gradient(160deg,#0b0b0b 0%,#000 72%)}
  .access-half h1,.access-half h2{font-size:clamp(46px,13vw,60px)}
  .access-intro{margin:18px 0 30px}
  .access-half .pair{grid-template-columns:1fr}
  .access-half .gold-button{width:100%}
}

/* ===========================================================================
   Accessibility corrections
   ---------------------------------------------------------------------------
   These fix measured failures against the build prompt's own requirements
   ("minimum 16px body text and 44px touch targets"). They add tap area and
   prevent an iOS zoom; they do not change the visual identity.
   =========================================================================== */

/* Form controls below 16px make iOS Safari zoom the whole page on focus,
   which then leaves the layout scrolled sideways. 16px is the threshold. */
input,
textarea,
select { font-size: 16px }

/* The mobile menu trigger measured 17px tall - the primary navigation control
   on small screens was a third of the minimum target size. */
.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
}

/* Standalone links - "Member login", the gold links, footer links - render at
   their line box, around 17-27px. Scoped to coarse pointers so the rule
   applies where it matters (touch) without loosening desktop spacing. */
@media (pointer: coarse) {
  .hero-actions a,
  .gold-link,
  .footer-rich__links a,
  .account-nav a,
  .form-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The FAQ disclosure triggers measured 22px. <summary> is the control, so
     it carries the target, not the <details> around it. */
  .info-list summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Two-line brand lockup measured 41px. */
  .brand { min-height: 44px; justify-content: center; }
}

/* ===========================================================================
   Membership and authentication
   Added with the auth phase. Uses the existing palette only - no new colours.
   =========================================================================== */

.form-status {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left-width: 2px;
  background: rgba(255, 255, 255, .02);
  color: var(--ivory);
  font-size: 14px;
  line-height: 1.55;
}
.form-status:empty { display: none }

/* Colour is a reinforcement, never the only signal: the wording always says
   what happened, and errors additionally carry role="alert". */
.form-status--success { border-left-color: var(--gold) }
.form-status--error   { border-left-color: #b4544d; color: #f0d4d0 }
.form-status--notice  { border-left-color: var(--stone, #8e8377) }

.form-status__list { margin: 10px 0 0; padding-left: 18px }
.form-status__list li { margin-top: 4px }

/* A field the server rejected. Paired with the message list above, so this is
   not the only indication either. */
[aria-invalid="true"] { border-color: #b4544d !important }

.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Sign out is a POST, so it is a button styled to sit in the nav list rather
   than a link that could be triggered by a crafted request. */
.account-logout { margin-top: 18px }
.account-logout button {
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--gold-dark);
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.account-logout button:hover { color: var(--ivory); border-bottom-color: var(--gold) }

.mt-note { margin-top: 26px }

@media (pointer: coarse) {
  .account-logout button { min-height: 44px }
}

/* ===========================================================================
   The private member area
   Added with phase 6. Same palette, same spacing scale, no new colours - the
   member area should feel like the rest of the site with the doors unlocked,
   not like an app bolted on the back.
   =========================================================================== */

/* Screen-reader-only text. Kept 1px rather than display:none so it is still
   announced, and clip-path rather than clip which is deprecated. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Navigation ----------------------------------------------------------- */

.member-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--pad);
  border-bottom: 1px solid var(--line);
  background: #000;
}
.member-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.member-nav a:hover { color: var(--ivory) }
/* aria-current is the source of truth, so the styling cannot drift from what
   assistive technology is told. */
.member-nav a[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* --- Grids and tiles ------------------------------------------------------ */

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.member-tile { margin: 0; position: relative }
.member-tile a { display: block; line-height: 0 }
.member-tile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #0a0a0a;
}
.member-tile__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.collection-card { border: 1px solid var(--line); padding: 0 0 var(--space-3) }
.collection-card a { display: block; text-decoration: none }
.collection-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #0a0a0a;
}
.collection-card h2 {
  font-size: 30px;
  margin: var(--space-3) var(--space-3) 0;
}
.collection-card p { margin: var(--space-2) var(--space-3) 0; color: var(--muted) }
.collection-card__count {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- Films ---------------------------------------------------------------- */

.film-card { border: 1px solid var(--line); padding: 0 0 var(--space-3) }
.film-card h2 { font-size: 30px; margin: var(--space-3) var(--space-3) 0 }
.film-card p { margin: var(--space-2) var(--space-3) 0; color: var(--muted) }
.film-card .fav-form { margin: var(--space-3) var(--space-3) 0 }

.film-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}

/* A film whose file has not been produced yet still shows its poster, so the
   library reads as complete rather than broken. */
.film-poster { position: relative; line-height: 0 }
.film-poster img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  filter: brightness(.55);
}
.film-pending {
  position: absolute;
  inset: auto 0 0;
  margin: 0 !important;
  padding: 12px;
  text-align: center;
  color: var(--gold) !important;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.4;
}
.film-meta { color: var(--gold) !important; font-size: 12px; letter-spacing: .14em }

/* --- The favourite toggle ------------------------------------------------- */

.fav-form { display: inline-flex; margin: 0 }
.fav-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: #000;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.fav-button:hover { color: var(--gold); border-color: var(--gold) }
.fav-button.is-on { color: var(--gold); border-color: var(--gold) }

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  width: min(1500px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  background: #000;
  color: var(--ivory);
}
.lightbox::backdrop { background: #000e }
.lightbox__close {
  position: absolute;
  right: 8px; top: 4px;
  z-index: 2;
  min-width: 44px; min-height: 44px;
  border: 0;
  background: none;
  color: var(--ivory);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__figure { margin: 0 }
.lightbox__figure img {
  display: block;
  width: 100%;
  max-height: calc(100svh - 96px);
  object-fit: contain;
  background: #000;
}
.lightbox__figure figcaption {
  padding: 12px 16px;
  color: var(--muted);
  font-size: 13px;
}
.lightbox__figure figcaption:empty { display: none }

/* --- Account -------------------------------------------------------------- */

.account-details {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  max-width: 720px;
}
.account-details dt,
.account-details dd {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.account-details dt {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.account-note { color: var(--muted); margin-top: var(--space-3) }

.member-main .login-form { max-width: 480px }

.session-list { list-style: none; margin: 0; padding: 0; max-width: 720px }
.session-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.session-list form { margin: 0 }
.session-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px }
.session-revoke {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--gold-dark);
  background: none;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.session-revoke:hover { color: var(--ivory); border-color: var(--gold) }

@media (max-width: 800px) {
  .member-nav { gap: var(--space-3); padding: var(--space-3) var(--space-3) }
  .member-grid { grid-template-columns: 1fr }
  .account-details { grid-template-columns: 1fr }
  .account-details dt { border-bottom: 0; padding-bottom: 0 }
}

/* Sign out sits at the end of the member navigation. It is a POST, so it is a
   button; it is styled to read as the last item in the list. */
.member-signout { margin: 0 0 0 auto }
.member-signout button {
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--gold-dark);
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.member-signout button:hover { color: var(--ivory); border-bottom-color: var(--gold) }

@media (pointer: coarse) {
  .member-signout button { min-height: 44px }
}

/* The member pages are visited repeatedly, not read once, so their heading
   block is smaller than the public pages' - a 420px title before the first
   photograph is dead space when you came here to look at photographs. */
.member-main .page-hero {
  min-height: 0;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.member-main .page-hero h1 { font-size: clamp(42px, 5.2vw, 74px) }
.member-main .page-hero p  { font-size: 18px }
.member-main .content-section { padding-top: var(--space-5) }
.member-main .content-section + .content-section { padding-top: 0 }

/* ===========================================================================
   Phase 14 - responsive and accessibility
   =========================================================================== */

/* Three section titles on the account page, and two on favourites, were styled
   <span>s. They read as headings, so they are headings now - which means this
   class has to state its own type rather than inherit whatever h2 happens to
   be, or a 12px eyebrow becomes a 15vw slab on a telephone. */
.section-index {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.4;
  margin-top: 0;
}

/* The favourite control used to live in the <figcaption>, which made the
   caption of every photograph read "Add to favourites". The caption is the
   caption again; the control sits beside it. */
.member-tile__actions { margin: 0 }
.member-tile figcaption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* The rest of the site gives a finger 44px. The private navigation was giving
   it 25, which is the row people use most. */
@media (pointer: coarse) {
  .member-nav a { min-height: 44px; display: flex; align-items: center }
}

/* --- Without JavaScript ----------------------------------------------------
   Below 800px the navigation is hidden and revealed by a button that needs
   script to work, so a browser with JavaScript off had a menu button that did
   nothing and no way to reach any other page. Everything else on this site
   degrades; this did not.

   .no-js is on <html> from the server and removed by the first inline script
   in the document, so these rules apply only when that script never ran. The
   header stops floating over the hero and lays its links out in flow, which is
   plainer than the design intends and entirely usable. */
@media (max-width: 800px) {
  .no-js header {
    position: static;
    height: auto;
    flex-wrap: wrap;
    padding: 14px 20px 4px;
  }
  .no-js header nav {
    display: flex;
    position: static;
    inset: auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    background: none;
    padding: 14px 0 10px;
  }
  .no-js header nav a {
    font: 9px var(--sans);
    text-transform: uppercase;
    letter-spacing: .2em;
  }
  .no-js header nav a:last-child { padding: 9px 13px }
  .no-js .menu-button { display: none }

  /* The inner pages reserve room for a header that is no longer floating. */
  .no-js .inner-main { padding-top: 0 }
  .no-js .hero { padding-top: 0 }
  .no-js .hero-image,
  .no-js .hero-frame,
  .no-js .hero-title { position: static }
  .no-js .hero-image { height: 62svh }
  .no-js .hero-title { transform: none; padding: 28px 0 0 }
}

/* A field's own error, sitting under the box it belongs to. Red is not the
   only signal - the message is words, and the field carries aria-invalid - so
   this still works for anyone who cannot separate red from gold. */
.field-error {
  display: block;
  margin-top: 6px;
  color: #f2b8b0;
  font-size: 13px;
  line-height: 1.4;
}
input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-bottom-color: #f2b8b0 }