/* The Belgrave Club, Stage 1 site. Colours and type from the v2.2 guide plus the Cormorant Garamond / Montserrat update. */
:root{
  --night:#0E1822; --chalk:#EBE8E1; --court:#1F3F66; --ball:#CFD26A;
  --slate:#93A0AC; --ink:#4F5B66; --ink-deep:#2B3742; --field:#F6F4EF;
  --line-dark:rgba(235,232,225,.2);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', Arial, sans-serif;
  --gutter:clamp(20px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--chalk);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ball);outline-offset:3px}
.chalk :focus-visible{outline-color:var(--court)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Small serif links along the top and bottom of every page */
.quiet{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-family:var(--serif);font-weight:500;font-size:clamp(14px,1.1vw,16px);letter-spacing:.06em}
.quiet:hover{text-decoration:underline;text-underline-offset:4px}
.dots{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 6px;text-decoration:none;font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1;letter-spacing:.12em}

.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 var(--gutter)}
.rule{display:flex;align-items:center;padding:4px var(--gutter) clamp(16px,2.4vw,32px)}
.rule span:first-child{display:block;width:40px;height:2px;background:var(--ball)}
.rule span:last-child{display:block;flex:1 1 auto;height:1px;background:var(--line-dark)}

/* Home (tease) */
.tease{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.tease-top{display:flex;justify-content:flex-end;padding:clamp(12px,2.4vw,32px) var(--gutter) 0}
.tease-main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(32px,6vw,96px) var(--gutter);text-align:center}
.tease-main h1{margin:0}
.tease-main h1 img{width:clamp(190px,21vw,300px)}
.tagline{margin:clamp(32px,4vw,52px) 0 0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,2.1vw,30px);line-height:1.35;color:var(--slate);text-wrap:balance}

/* Headings in spaced capitals */
.caps{margin:0;font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.08em;line-height:1.02}
.caps-xl{font-size:clamp(30px,5vw,76px)}
.caps-l{font-size:clamp(32px,4vw,60px);letter-spacing:.07em;line-height:1.06}
.label{margin:0 0 24px;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* More (inspiration) */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(12px,2.4vw,32px) var(--gutter) 0}
.top .mark{width:clamp(34px,3vw,40px)}
.wrap{max-width:1392px;margin:0 auto;padding-left:clamp(20px,6vw,96px);padding-right:clamp(20px,6vw,96px)}
.row{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px)}
.row-reverse{flex-wrap:wrap-reverse;align-items:flex-start}
.c3{flex:3 1 340px;min-width:0}
.c2{flex:2 1 260px;min-width:0}
.c2-low{padding-top:clamp(0px,calc(16vw - 60px),140px)}
.photo{width:100%;object-fit:cover}
.ar-43{aspect-ratio:4/3}.ar-45{aspect-ratio:4/5}.ar-34{aspect-ratio:3/4}
.s1{padding-top:clamp(56px,8vw,128px);padding-bottom:clamp(72px,9vw,140px)}
.s2{padding-bottom:clamp(72px,9vw,140px)}
.s2 h2{margin-bottom:clamp(20px,4vw,56px)}
.narrow{max-width:420px}

/* Waitlist */
.chalk{background:var(--chalk);color:var(--night)}
.chalk .label{color:var(--ink)}
.waitlist{display:flex;flex-wrap:wrap;gap:44px clamp(40px,7vw,120px);align-items:flex-start;padding-top:clamp(64px,8vw,128px);padding-bottom:clamp(64px,8vw,128px)}
.waitlist-intro{flex:1 1 280px;min-width:0}
.waitlist-intro h1{max-width:12ch}
.lede{margin:22px 0 0;max-width:32ch;font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.6vw,23px);line-height:1.45;color:var(--ink-deep)}
.waitlist-intro img{max-width:360px;margin-top:clamp(32px,4vw,56px)}
.waitlist-form{flex:1.3 1 380px;max-width:560px;min-width:0}
form{display:flex;flex-direction:column;gap:26px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:600;font-size:13px;letter-spacing:.04em}
.field input{width:100%;height:50px;padding:0 14px;border:1px solid var(--ink);border-radius:0;background:var(--field);color:var(--night);font-family:inherit;font-size:16px}
.field input[aria-invalid="true"]{border:2px solid var(--night)}
.err{margin:0;font-size:14px;font-weight:600}
.consent{display:flex;align-items:flex-start;gap:12px;min-height:44px;font-size:14px;line-height:1.55;cursor:pointer}
.consent input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--court)}
.small{margin:0;font-size:13px;line-height:1.55;color:var(--ink)}
.small a{color:var(--night)}
.notice{margin:0;padding:16px 18px;border:2px solid var(--night);font-size:15px;line-height:1.5}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:0;background:var(--night);color:var(--chalk);font-family:inherit;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn[disabled]{opacity:.7;cursor:progress}
.btn-line{background:transparent;border:1px solid rgba(235,232,225,.55);color:var(--chalk);min-height:48px;padding:0 22px;font-weight:500}
.sent{padding:clamp(28px,4vw,48px);background:var(--night);color:var(--chalk)}
.sent p{margin:18px 0 0;font-size:15px;line-height:1.7;color:var(--slate);overflow-wrap:anywhere}
.sent .btn-line{margin-top:28px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* Plain text pages (privacy, 404) */
.prose{max-width:680px;padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.prose p,.prose li{font-size:15px;line-height:1.75;color:var(--slate)}
.prose h2{margin:40px 0 8px;font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.04em}
.prose a{color:var(--chalk)}

/* On phones the form comes straight after the intro; the photo is for larger screens. */
@media (max-width: 700px){ .waitlist-intro img{display:none} }