/* Old Boyz Club, one screen. A members' card: black, fine grain, bone type, a hairline frame. */
:root{
  --ink:#090909;--ink2:#111110;--bone:#ece6da;--sand:214,190,152;
  --t1:rgba(236,230,218,.92);--t2:rgba(236,230,218,.6);--t3:rgba(236,230,218,.38);--t4:rgba(236,230,218,.24);
  --hair:rgba(236,230,218,.16);--hair2:rgba(236,230,218,.3);
  --bad:#dca196;
  --sans:"Jost","Futura","Futura PT",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --inset:max(12px,env(safe-area-inset-left));
  --ease:cubic-bezier(.22,.7,.12,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--bone);font:300 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;overscroll-behavior:none;font-kerning:normal;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,p,ol{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:.5px solid var(--bone);outline-offset:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dim{color:var(--t2)}
/* tracked caps: the trailing letter-space is given back on the left so caps sit optically centred */
.eyebrow,.tag,.nos,.foot,.corner,.btn,.field>span,.photo-act,.dl-menu a{text-transform:uppercase;font-family:var(--sans)}

/* ---------- texture & light ---------- */
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none;opacity:.045;mix-blend-mode:screen}
.light{position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(46% 26% at 50% 43%,rgba(var(--sand),.075) 0,rgba(var(--sand),0) 100%),
  radial-gradient(90% 55% at 50% 40%,rgba(236,230,218,.035) 0,rgba(236,230,218,0) 70%),
  radial-gradient(130% 95% at 50% 46%,rgba(0,0,0,0) 52%,rgba(0,0,0,.7) 100%)}

/* ---------- the card frame ---------- */
.frame{position:fixed;z-index:2;pointer-events:none;
  inset:calc(env(safe-area-inset-top) + var(--inset)) var(--inset) calc(env(safe-area-inset-bottom) + var(--inset));
  border:.5px solid var(--hair);opacity:0;animation:fade 1.2s ease .1s forwards}
.corner{position:absolute;top:-6px;padding:0 9px;background:var(--ink);font-weight:400;font-size:9px;line-height:12px;letter-spacing:.38em;color:var(--t3)}
.corner.tl{left:18px;letter-spacing:.2em}
.corner.tr{right:18px;padding-right:calc(9px - .38em)}

/* ---------- the one screen ---------- */
.stage{position:relative;z-index:3;height:100vh;height:100svh;height:100dvh;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(env(safe-area-inset-top) + var(--inset) + 28px) calc(var(--inset) + 22px) calc(env(safe-area-inset-bottom) + var(--inset) + 16px)}
/* wordmark block + buttons: one group, centred in the space above the footer, with a calm gap that follows the visible height */
.group{margin:auto 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(44px,7.5dvh,64px);padding-top:2dvh}
.center{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
/* embossed crest: the shape a hair lighter than the black, lit from above, shadowed below */
.crest{position:absolute;left:50%;top:50%;width:min(56vw,250px);aspect-ratio:409/463;translate:-50% -56%;pointer-events:none;
  -webkit-mask:url(img/crest.png) center/contain no-repeat;mask:url(img/crest.png) center/contain no-repeat;
  background:linear-gradient(170deg,#1a1917 0%,#121211 55%,#0d0d0c 100%);
  filter:drop-shadow(0 -.5px 0 rgba(236,230,218,.07)) drop-shadow(0 1px 1px rgba(0,0,0,.9))}
.mark{position:relative;width:min(70vw,300px);font-size:0}
.wm{position:relative;display:block}
.wm img{width:100%;height:auto}
.sheen{position:absolute;inset:0;-webkit-mask:url(img/wordmark.png) center/100% 100% no-repeat;mask:url(img/wordmark.png) center/100% 100% no-repeat;
  background:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,246,228,.75) 50%,rgba(255,255,255,0) 58%) no-repeat;background-size:280% 100%;background-position:135% 0;
  animation:sheen 8s cubic-bezier(.45,0,.25,1) 2.2s infinite}
@keyframes sheen{0%{background-position:135% 0}28%,100%{background-position:-35% 0}}
.line{margin-top:30px;font:italic 300 26px/1.2 var(--serif);letter-spacing:.005em;color:var(--t1)}
.tag{margin-top:14px;display:flex;align-items:center;font-weight:400;font-size:8.5px;line-height:1;letter-spacing:.46em;color:var(--t3);padding-left:.46em}
.tag i,.nos i{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;margin:0 1.1em 0 .64em}

.actions{width:100%;max-width:318px;display:flex;flex-direction:column;gap:12px}
.btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 28px 0 calc(28px + .4em);border:0;border-radius:0;cursor:pointer;
  font-weight:400;font-size:10.5px;line-height:1;letter-spacing:.4em;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--ease),box-shadow .5s var(--ease),background-color .35s ease,color .35s ease}
.btn.primary{background:var(--bone);color:#0b0b0a;font-weight:500;box-shadow:0 0 0 .5px rgba(236,230,218,.9),0 0 0 rgba(var(--sand),0)}
.btn.primary:hover{background:#f3eee4;box-shadow:0 0 0 .5px #f3eee4,0 0 34px rgba(var(--sand),.16)}
.btn.secondary{background:rgba(9,9,9,.35);color:var(--t1);box-shadow:inset 0 0 0 .5px var(--hair2)}
.btn.secondary:hover{box-shadow:inset 0 0 0 .5px rgba(236,230,218,.7)}
.btn:active{transform:scale(.98)}
.btn.primary:active{box-shadow:0 0 0 .5px var(--bone),0 0 40px rgba(var(--sand),.28)}
.btn.secondary:active{box-shadow:inset 0 0 0 .5px var(--bone),0 0 28px rgba(var(--sand),.12)}
.btn[disabled]{cursor:default;transform:none}
.btn.done{background:transparent;color:var(--t3);box-shadow:inset 0 0 0 .5px var(--hair)}
.dl-wrap{position:relative}
.dl-menu{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}
.dl-menu[hidden]{display:none}
.dl-menu a{display:inline-flex;align-items:center;min-height:34px;text-decoration:none;font-size:9.5px;letter-spacing:.32em;color:var(--t2);padding-left:.32em}
.dl-menu a:hover{color:var(--bone)}
.dl-menu span{width:.5px;height:11px;background:var(--hair2)}
.nos{margin-top:10px;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:9px;line-height:1;letter-spacing:.32em;color:var(--t3);padding-left:.34em}

.foot{flex:none;margin-top:18px;display:flex;gap:16px;align-items:center;font-weight:400;font-size:8.5px;line-height:1;letter-spacing:.3em;color:rgba(236,230,218,.44)}
.foot a{text-decoration:none;display:inline-flex;align-items:center;min-height:30px;transition:color .3s ease}
.foot a:hover{color:var(--bone)}
.foot a.ig{gap:6px;text-transform:none;letter-spacing:.12em;font-size:9.5px;color:rgba(236,230,218,.66)}
.foot a.ig svg{flex:none;width:11px;height:11px;margin-top:-1px}

/* ---------- entrance: crest, wordmark, line, buttons (about 1.2 s) ---------- */
.st{opacity:0;animation:st .9s var(--ease) var(--d,0s) forwards}
.crest.st{animation-name:stCrest;animation-duration:1.2s}
.mark.st{animation-name:stMark;animation-duration:1.05s}
@keyframes st{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes stCrest{from{opacity:0;scale:1.03}to{opacity:1;scale:1}}
@keyframes stMark{from{opacity:0;filter:blur(5px);transform:translateY(4px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media (min-width:410px){.mark{width:min(70vw,316px)}.line{font-size:27px}}
@media (max-height:720px){.line{margin-top:22px;font-size:24px}.tag{margin-top:11px}.btn{min-height:50px}.actions{gap:10px}}
@media (max-height:620px){.group{gap:36px;padding-top:0}.line{margin-top:18px}.foot{margin-top:12px}}
@media (max-height:520px){.crest,.tag,.nos,.corner{display:none}}
@media (min-width:900px){
  .mark{width:380px}.line{margin-top:34px;font-size:31px}.tag{margin-top:16px;font-size:9px}
  .actions{max-width:340px}.crest{width:290px}
  .corner{font-size:9.5px}.corner.tl{left:28px}.corner.tr{right:28px}
  :root{--inset:20px}
}

/* ---------- request an invitation: a full-screen flow, one step per screen, inside the same card frame ---------- */
html.flowing .stage{visibility:hidden}
html.flowing .corner{opacity:.6}
.flow{position:fixed;z-index:5;left:0;right:0;top:var(--vvt,0px);height:100vh;height:100dvh;height:var(--vvh,100dvh);
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + var(--inset) + 10px) calc(var(--inset) + 22px) calc(env(safe-area-inset-bottom) + var(--inset) + 18px);
  animation:fade .45s ease}
.flow[hidden]{display:none}
.flow-top{flex:none;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin:0 -12px}
.icon{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--t2);cursor:pointer;border-radius:50%;transition:color .3s ease,opacity .3s ease;-webkit-tap-highlight-color:transparent}
.icon:hover{color:var(--bone)}
.icon[hidden]{display:grid;visibility:hidden}
.steps{list-style:none;padding:0;margin:0;display:flex;justify-content:center;gap:8px}
.steps li{width:20px;height:1px;background:var(--hair2);transition:background-color .5s ease,width .5s var(--ease)}
.steps li.on{background:var(--bone);width:30px}
.steps li.at{background:rgba(236,230,218,.7)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

#invite-form,.thanks{flex:1;min-height:0;display:flex;flex-direction:column}
#invite-form[hidden],.thanks[hidden]{display:none}
.pane{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;scrollbar-width:none}
.pane::-webkit-scrollbar{display:none}
.pane[hidden]{display:none}
.pane.in{animation:paneIn .55s var(--ease)}
.pane.in.rev{animation-name:paneInRev}
@keyframes paneIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes paneInRev{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.pane-body{margin:auto 0;width:100%;max-width:400px;align-self:center;padding:8px 0 12px;text-align:center}
.eyebrow{display:flex;align-items:baseline;justify-content:center;gap:10px;font-weight:400;font-size:9px;line-height:1;letter-spacing:.42em;color:var(--t3);padding-left:.42em}
.eyebrow .num{font:italic 400 14px/1 var(--serif);letter-spacing:.04em;color:var(--t2)}
.serif-title{margin-top:14px;font:italic 300 32px/1.1 var(--serif);color:var(--bone);letter-spacing:.005em;outline:none}

.photo-field{display:flex;flex-direction:column;align-items:center;margin-top:clamp(26px,5dvh,44px)}
.photo-pick{position:relative;width:clamp(132px,22dvh,176px);height:clamp(132px,22dvh,176px);border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 50% 30%,rgba(236,230,218,.07),rgba(236,230,218,.01) 70%);
  box-shadow:inset 0 0 0 .5px var(--hair2);transition:transform .35s var(--ease);display:grid;place-items:center}
.photo-pick::after{content:"";position:absolute;inset:-8px;border-radius:50%;box-shadow:inset 0 0 0 .5px var(--hair);pointer-events:none;transition:box-shadow .4s ease}
.photo-pick:hover::after{box-shadow:inset 0 0 0 .5px rgba(236,230,218,.5)}
.photo-pick:active{transform:scale(.97)}
.photo-pick img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;animation:fade .6s ease}
.photo-field.has .photo-pick::after{box-shadow:inset 0 0 0 .5px rgba(var(--sand),.75)}
.photo-empty{color:var(--t2)}
.photo-hint{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.photo-act{font-weight:500;font-size:9px;line-height:1;letter-spacing:.36em;padding-left:.36em;cursor:pointer}
.photo-hint .dim{font:italic 300 17px/1.2 var(--serif)}
.photo-field.bad .photo-pick::after{box-shadow:inset 0 0 0 .5px var(--bad)}
.photo-field.bad .photo-hint .dim{color:var(--bad)}

.fields{margin-top:clamp(18px,3.5dvh,32px);text-align:left}
.field{display:block;margin-top:clamp(14px,2.6dvh,22px);position:relative;min-width:0;scroll-margin:90px 0 120px}
.field:first-child{margin-top:0}
.field>span{display:block;font-weight:400;font-size:8.5px;line-height:1;letter-spacing:.32em;color:var(--t3);transition:color .3s ease;white-space:nowrap}
.field em{font-style:normal;color:var(--t4);margin-left:.4em}
.field:focus-within>span{color:var(--t1)}
.field input{display:block;width:100%;margin-top:2px;padding:8px 0 8px;border:0;border-radius:0;background:transparent;color:var(--bone);
  font:300 17px/1.3 var(--sans);letter-spacing:.01em;outline:none;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(var(--hair2),var(--hair2)),linear-gradient(var(--bone),var(--bone));
  background-size:100% 1px,0 1px;background-position:0 100%,50% 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease)}
.field input:focus{background-size:100% 1px,100% 1px}
.field input::placeholder{color:rgba(236,230,218,.2)}
.field input[aria-invalid=true]{background-image:linear-gradient(var(--bad),var(--bad)),linear-gradient(var(--bad),var(--bad))}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--bone);-webkit-box-shadow:0 0 0 40px var(--ink) inset;caret-color:var(--bone)}

.flow-foot{flex:none;width:100%;max-width:400px;align-self:center;padding-top:10px}
.error{margin:0 0 12px;font-size:13.5px;line-height:1.4;color:var(--bad);text-align:center}
.submit[aria-busy=true]{opacity:.75}
.submit[aria-busy=true] .submit-label{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}
.fine{margin:12px auto 0;max-width:30em;font-size:10.5px;line-height:1.5;color:var(--t3);text-align:center}
.fine[hidden]{display:none}
.fine a{color:var(--t2)}

/* download panel: the crest draws in, the line, then the two store buttons */
.get-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:none}
.get .eyebrow{align-items:center}
.get .eyebrow i{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;margin:0 .8em 0 .4em}
.get .serif-title{max-width:12em;margin-left:auto;margin-right:auto;opacity:0;animation:st .9s var(--ease) .5s forwards}
.get-lede{margin:16px auto 0;max-width:22em;font-size:14.5px;line-height:1.5;opacity:0;animation:st .9s var(--ease) .7s forwards}
.get .eyebrow{opacity:0;animation:st .9s var(--ease) .35s forwards}
.get-stores{display:flex;flex-direction:column;gap:12px;opacity:0;animation:st .9s var(--ease) .85s forwards}
.get .fine{opacity:0;animation:st .9s var(--ease) 1s forwards}
.get .thanks-crest{margin-bottom:24px}

/* confirmation: the crest draws itself in, bottom to top */
.thanks{outline:none}
.thanks-crest{display:block;width:60px;aspect-ratio:409/463;margin:0 auto 28px;
  -webkit-mask:url(img/crest.png) center/contain no-repeat;mask:url(img/crest.png) center/contain no-repeat;
  background:linear-gradient(170deg,var(--bone),rgba(var(--sand),.9));
  clip-path:inset(100% 0 0 0);animation:draw 1.4s cubic-bezier(.6,0,.2,1) .15s forwards}
@keyframes draw{0%{clip-path:inset(100% 0 0 0);filter:blur(3px);opacity:.3}70%{filter:blur(0)}100%{clip-path:inset(0 0 0 0);opacity:1}}
.thanks .serif-title{font-size:36px;opacity:0;animation:st .9s var(--ease) .9s forwards}
.thanks p{margin-top:14px;font-size:14.5px;opacity:0;animation:st .9s var(--ease) 1.1s forwards}
.thanks .flow-foot .btn{opacity:0;animation:st .9s var(--ease) 1.3s forwards}

@media (max-height:700px){.serif-title{font-size:29px;margin-top:12px}.flow-top{margin-bottom:0}.btn{min-height:52px}}
@media (min-width:900px){.flow{padding-top:calc(var(--inset) + 18px);padding-bottom:calc(var(--inset) + 36px)}.serif-title{font-size:38px}.flow-foot,.pane-body{max-width:380px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .st,.frame,.thanks .serif-title,.thanks p,.thanks .btn{opacity:1;transform:none;filter:none}
  .thanks .flow-foot .btn{opacity:1}
  .get .serif-title,.get-lede,.get .eyebrow,.get-stores,.get .fine{opacity:1;transform:none}
  .thanks-crest{clip-path:none}
  .sheen{display:none}
}

/* (2026-11-07, Nick) the brand speaks for itself: wordmark + tagline only, no line between them */
.mark + .tag{margin-top:30px;color:var(--t2)}
@media (min-width:900px){.mark + .tag{margin-top:36px}}
@media (max-height:720px){.mark + .tag{margin-top:24px}}