/* Thīna · In Stride — css/sections/waitlist.css
   The waitlist (the form is a pocket) and the footer (the hem). Loaded after css/site.css; only its tokens are used.
   Desktop: one 480 px column on the page axis, the bookend of the hero: "The list." at the hero's display size (128 x u),
   the pressed seam with its label hanging in the left margin on the seam's line (Email), the row beneath (Size hanging left,
   three lids marked beneath, the pill at the right), the validation note hanging right of the seam. The section is the
   viewport less the hem, so the last view of the page is the form centred above the 64 px hem. Phone (html.m): one column
   inside the gutters, labels above their controls, the pill full width. The openings (the field's lens, the S/M/L lids, the
   pill's pressed edge, the hem) are drawn by the cloth engine; what is here is ink and objects laid on the cloth, plus the
   html.nogl shapes. */

/* ---------- the waitlist ---------- */
#waitlist{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);padding:112px 0 96px}
.wl{position:relative;width:480px;max-width:100%}
.wl-h{text-align:center;white-space:nowrap;margin:0;font-size:clamp(96px, calc(128 * var(--u)), 144px)}   /* .t-display, scaled as the hero's headline */
.wl-form{position:relative;margin:0}
.wl-label{display:block;margin:0;font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:.02em;line-height:1;color:var(--ink-70);
  white-space:nowrap;transition:color .2s ease,opacity .4s ease}

/* the email: an 80 px band whose centre line is the pressed seam; its label hangs in the left margin on that line */
.wl-email{position:relative;margin-top:34px}
.wl-email > .wl-label{position:absolute;right:calc(100% + 28px);top:50%;transform:translateY(-50%);margin-top:-1px}
.wl-label-e,html.cur body.sys .wl-label-e{cursor:text}                     /* the word Email is not a link: the field's own cursor */
.wl.is-focus .wl-label-e{color:var(--ink)}
.wl-field{position:relative;height:80px;cursor:text;-webkit-tap-highlight-color:transparent}

/* the pocket is clipped by the script to the lens the engine opens, so the card shows only where the lips have parted: it lies
   on the check, under the cloth. The card itself: cream, lit from the upper left, a hair of shadow where it rests on the check */
.wl-pocket{position:absolute;inset:0;clip-path:inset(50% 50%)}
.wl-card{position:absolute;left:50%;top:50%;width:296px;height:36px;margin:-18px 0 0 -148px;border-radius:1px;background:var(--cream);
  box-shadow:1px 1.5px 1.5px rgba(42,29,18,.32),4px 7px 14px -5px rgba(42,29,18,.5);opacity:0;transition:opacity .18s ease}
.wl.is-card .wl-card{opacity:1}
.wl-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(246,240,228,0) 45%,rgba(230,217,195,.42))}
.wl-card::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:rgba(59,42,28,.3);opacity:0;transition:opacity .2s ease}   /* the line you write on, clear of the descenders */
.wl.is-card .wl-card::after{opacity:.42}
.wl.is-focus .wl-card::after{opacity:1}
.wl-shade{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}   /* the lips' shadow on the card */
.wl-input{position:relative;display:block;width:100%;height:100%;margin:0;padding:1px 14px 0;border:0;border-radius:0;background:transparent;
  font-family:var(--sans);font-weight:400;font-size:17px;letter-spacing:.01em;color:var(--esp);caret-color:var(--esp);
  outline:none;user-select:text;-webkit-user-select:text;-webkit-appearance:none;appearance:none;cursor:text}
.wl-input::placeholder{color:transparent}
.wl-input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--cream) inset;-webkit-text-fill-color:var(--esp)}
.wl-input:focus-visible{outline:none}                                       /* the parting itself is the focus: the seam opens, the card and its line appear */
.wl-input[aria-invalid="true"]{color:var(--esp)}

/* the note hangs right of the seam, the label's mirror, so nothing moves under the engine's geometry */
.wl-msg{position:absolute;left:calc(100% + 28px);top:50%;transform:translateY(-50%);margin:-1px 0 0;white-space:nowrap;
  font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:.02em;line-height:1;color:var(--ink)}   /* always in the tree (a live region must exist before its text arrives); empty, it takes no room */

/* the row: Size and its three lids on the left, the pill on the right, on one centre line */
.wl-tail{position:relative;display:grid;margin-top:26px}
.wl-row,.wl-done{grid-area:1/1}
.wl-row{position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;transition:opacity .4s ease}
.wl-size{position:relative;display:flex;align-items:center;height:44px}
.wl-size > .wl-label{position:absolute;right:calc(100% + 28px);top:50%;transform:translateY(-50%);margin-top:-1px}

/* the lids: small sand squares with a stitched hairline, as the First Run's; the size marked beneath (the small caps of the nav),
   espresso 70 % (a label you choose by, so it keeps AA contrast) lifting to full as its lid opens. The stitches ride the two flaps as the lid parts from its centre */
.wl-lids{display:flex;gap:20px}
.wl-lid{position:relative;display:block;width:36px;height:36px;margin:0;--o:0;-webkit-tap-highlight-color:transparent}
.wl-radio{position:absolute;left:-7px;top:-4px;z-index:1;width:50px;height:68px;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.wl-face{position:absolute;inset:0;border-radius:2px;pointer-events:none;background:linear-gradient(rgba(59,42,28,.024),rgba(59,42,28,.024))}   /* the lid's breath of shade */
.wl-face::before{content:"";position:absolute;inset:4px;pointer-events:none;--st:rgba(156,119,64,.55);   /* brass thread, the First Run's lids */
  background:
    repeating-linear-gradient(90deg,var(--st) 0 4px,transparent 4px 6px) 0 0/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--st) 0 4px,transparent 4px 6px) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(180deg,var(--st) 0 4px,transparent 4px 6px) 0 0/1px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--st) 0 4px,transparent 4px 6px) 100% 0/1px 100% no-repeat;
  --fl:calc((1 - var(--o)) * 18px - 4px - min(var(--o) * 60px, 3px));
  -webkit-mask-image:linear-gradient(#000 var(--fl),transparent var(--fl),transparent calc(100% - var(--fl)),#000 calc(100% - var(--fl)));
          mask-image:linear-gradient(#000 var(--fl),transparent var(--fl),transparent calc(100% - var(--fl)),#000 calc(100% - var(--fl)))}
.wl-mark{position:absolute;left:50%;top:calc(100% + 11px);transform:translateX(-50%);padding-left:.18em;pointer-events:none;
  font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap;
  color:rgba(59,42,28,calc(.7 + .3 * min(1, var(--o) * 2.5)))}
.wl-lid:hover .wl-mark{color:rgba(59,42,28,.86)}
.wl-radio:checked ~ .wl-mark{color:var(--esp)}
.wl-radio:focus-visible + .wl-face{outline:1.5px solid var(--esp);outline-offset:4px}
.wl-radio:disabled{pointer-events:none}

/* the pill: a tab of sand laid on the cloth, lit from above, its edge folded under and pressed; the engine draws the pressed
   seam it sits in */
.wl-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:44px;margin:0;padding:0 34px;border:0;border-radius:22px;
  background-color:var(--sand);
  background-image:linear-gradient(180deg,rgba(246,240,228,.72) 0%,rgba(246,240,228,.18) 52%,rgba(230,217,195,.5) 100%);
  box-shadow:inset 0 1px 0 rgba(246,240,228,.95),inset 0 -1px 0 rgba(201,183,153,.7),0 0 0 .5px rgba(90,67,48,.16),
    0 1px 1px rgba(42,29,18,.08),0 5px 12px -7px rgba(42,29,18,.36);
  font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap;
  color:var(--ink-70);transition:color .2s ease,box-shadow .2s ease,transform .2s ease;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wl-btn::before{content:"";position:absolute;inset:3px;border-radius:19px;pointer-events:none;   /* the pressed fold, 3 px in from the edge */
  box-shadow:inset 0 0 0 .5px rgba(90,67,48,.13),0 .5px 0 rgba(246,240,228,.75)}
.wl-btn span{display:block;margin-right:-.18em;padding-top:1px}
.wl-btn:hover{color:var(--esp)}
.wl-btn:active{transform:translateY(.5px);box-shadow:inset 0 1px 0 rgba(246,240,228,.8),inset 0 -1px 0 rgba(201,183,153,.6),0 0 0 .5px rgba(90,67,48,.26),
  0 .5px 1px rgba(42,29,18,.14),0 2px 6px -5px rgba(42,29,18,.4)}
.wl-btn:focus-visible{outline:1.5px solid var(--esp);outline-offset:5px}
.wl-btn:disabled{pointer-events:none}

/* after submit: the controls fade from the cloth and one line appears in their place */
.wl-done{align-self:center;justify-self:center;margin:0;white-space:nowrap;text-align:center;
  font-family:var(--sans);font-weight:300;font-size:17px;letter-spacing:.01em;line-height:1.5;color:var(--ink);
  opacity:0;transition:opacity .6s ease;outline:none}
.wl-done.is-in{opacity:1}
.wl-done:focus-visible{outline:none}
.wl.is-done .wl-row,.wl.is-done .wl-email > .wl-label{opacity:0;pointer-events:none}
.wl.is-gone .wl-email > .wl-label{visibility:hidden}
.wl.is-gone .wl-row{display:none}                                           /* the script eases the tail's height to the line's */
.wl [hidden]{display:none !important}

/* ---------- the cursor with the custom dot (html.cur, site.js): the dot until the pointer is over the field or a control ---------- */
html.cur .wl-field,html.cur .wl-input,html.cur .wl-radio,html.cur .wl-btn,html.cur .ft-link{cursor:none}
html.cur body.sys .wl-field,html.cur body.sys .wl-input{cursor:text}
html.cur body.sys .wl-radio,html.cur body.sys .wl-btn,html.cur body.sys .ft-link{cursor:pointer}

/* ---------- the footer: the hem (the engine holds a 64 px band of check open at the page end; the home indicator's room below it) ---------- */
#footer{position:relative;height:64px;height:calc(64px + env(safe-area-inset-bottom));min-height:0;overflow:hidden;color:var(--sand)}
.ft-hem{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;align-content:center;height:100%;margin:0;
  padding:1px max(calc(48 * var(--u)), calc(env(safe-area-inset-right) + 12px)) env(safe-area-inset-bottom) max(calc(48 * var(--u)), calc(env(safe-area-inset-left) + 12px))}   /* the three centred in the band */
.ft-link{position:relative;display:block;margin:-12px -10px;padding:12px 10px;font-family:var(--sans);font-weight:400;font-size:max(11px, calc(12 * var(--u)));
  letter-spacing:.18em;text-transform:uppercase;line-height:1;color:var(--sand);white-space:nowrap;cursor:pointer;transition:color .2s ease;
  text-shadow:0 0 1px rgba(42,29,18,.9),0 0 3px rgba(42,29,18,.85),0 0 8px rgba(42,29,18,.6)}   /* sand on the check: the ground breathes behind the letters */
.ft-l{justify-self:start}
.ft-r{justify-self:end;margin-right:calc(-10px - .18em)}
.ft-link span{pointer-events:none}
.ft-link:hover{color:var(--cream)}
.ft-link:focus-visible{outline:1.5px solid var(--sand);outline-offset:-5px}
.ft-mark{position:relative;z-index:0;justify-self:center;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.ft-mark::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:96px;height:64px;margin:-32px 0 0 -48px;pointer-events:none;   /* a soft espresso bed: the hairlines of the lockup read on the brass and sand lines */
  background:radial-gradient(closest-side,rgba(42,29,18,.62),rgba(42,29,18,.38) 55%,rgba(42,29,18,0))}
.ft-mark svg{display:block;width:28px;height:14.7px;overflow:visible;filter:drop-shadow(0 0 1px rgba(42,29,18,.9)) drop-shadow(0 0 2.5px rgba(42,29,18,.75))}
.ft-mark path{fill:none;stroke:var(--sand);stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* the wordmark: THĪNA in Bodoni Moda 400 with wide tracking, the brief's rule when the vector wordmark is not used (at this size
   its hairlines would vanish); optical sizing follows the 13 px */
.ft-word{display:block;margin:6px 0 0 .24em;font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:.24em;line-height:1;
  font-variation-settings:'opsz' 14;color:var(--sand);text-shadow:0 0 1px rgba(42,29,18,.95),0 0 3px rgba(42,29,18,.9),0 0 8px rgba(42,29,18,.7)}   /* 14 px at its optical size: the hairlines reach a pixel */

/* ---------- windows too narrow for the hanging note (below 960 px): the note beneath the seam ---------- */
@media (max-width:959px){
  .wl-msg{left:0;top:calc(100% + 4px);transform:none;margin:0}
}
/* ---------- narrow windows (below 768 px) and the phone: one column, labels above their controls ---------- */
@media (max-width:767px){
  #waitlist{padding:96px 44px 80px}   /* 8 px more than the phone's gutter: the field's tips and the labels clear the edge seams' lips when they stand open */
  .wl{width:100%;max-width:480px}
  /* the label sits over the seam's left tip, its baseline 20 px above the seam: the open lens is only ~10 px tall there */
  .wl-email > .wl-label{position:relative;z-index:1;right:auto;top:auto;transform:none;margin:0 0 -18px;width:max-content}
  .wl-msg{font-size:14px}
  .wl-tail{margin-top:42px}
  .wl-row{display:block;height:auto}
  .wl-size{display:block;height:auto}
  .wl-size > .wl-label{position:relative;right:auto;top:auto;transform:none;margin:0 0 14px}
  .wl-btn{display:flex;width:100%;height:48px;margin-top:54px;border-radius:24px}
  .wl-btn::before{border-radius:21px}
  .wl-done{white-space:normal;max-width:302px;font-size:16px}
  .wl-done span{display:block}                                              /* one sentence to a line */
}
/* ---------- the phone's welt pocket (waitlist.js): straight lips with rounded ends; the card nearly the field's length. The
   label sits above the band (the welt opens to its full height at both ends, so nothing may hang over them) ---------- */
html.m .wl.is-welt .wl-card{border-radius:2px}
html.m .wl.is-welt .wl-field{height:64px}
html.m .wl.is-welt .wl-email > .wl-label{margin:0 0 6px}
/* ---------- the phone (html.m): the phone's sizes ---------- */
html.m .wl-h{font-size:68px;line-height:1.1}
html.m .wl-field{height:76px}
html.m .wl-input{font-size:16px;padding:1px 12px 0}
html.m .wl-card::after{left:12px;right:12px;bottom:3px}
html.m .wl-lids{gap:24px}
html.m .wl-lid{width:40px;height:40px}
html.m .wl-face::before{inset:3px;--fl:calc((1 - var(--o)) * 20px - 3px - min(var(--o) * 60px, 3px))}
html.m .wl-radio{left:-6px;top:-4px;width:52px;height:72px}
/* the phone's hem: 96 px, stacked — the mark and THĪNA centred, then the two links (wearthina.com left, Instagram above the
   handle right), each link a 44 px target */
html.m #footer{height:96px;height:calc(96px + env(safe-area-inset-bottom))}
html.m #waitlist{min-height:calc(100vh - 96px);min-height:calc(100svh - 96px)}
html.m .ft-hem{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-items:end;align-content:center;row-gap:13px;
  padding:2px max(var(--gutter), calc(env(safe-area-inset-right) + 12px)) env(safe-area-inset-bottom) max(var(--gutter), calc(env(safe-area-inset-left) + 12px))}
html.m .ft-mark{grid-column:1 / -1;grid-row:1}
html.m .ft-l{grid-column:1;grid-row:2}
html.m .ft-r{grid-column:2;grid-row:2}
html.m .ft-link{font-size:11px;letter-spacing:.16em;margin:-17px -10px;padding:17px 10px}
html.m .ft-r{margin-right:calc(-10px - .16em);text-align:right}
html.m .ft-r .ft-ig{display:block;margin-bottom:6px}                     /* Instagram above the handle */
html.m .ft-mark svg{width:24px;height:12.6px}
html.m .ft-mark::before{width:84px;height:52px;margin:-26px 0 0 -42px}
html.m .ft-word{font-size:13px;letter-spacing:.24em;margin:5px 0 0 .24em;font-variation-settings:'opsz' 13}

/* ---------- reduced motion: the field rests open with its card (the script); nothing travels ---------- */
html.reduced .wl-row,html.reduced .wl-card,html.reduced .wl-card::after,html.reduced .wl-label,html.reduced .wl-btn,html.reduced .ft-link{transition:none}
html.reduced .wl-done{transition:opacity .2s linear}

/* ---------- no WebGL: the openings as static check-filled shapes (the field open with its card, as under reduced motion) ---------- */
.wl-fb{position:absolute;inset:0}
html.nogl .wl-pocket{clip-path:none !important}
html.nogl .wl-card{opacity:1}
html.nogl .wl-card::after{opacity:.42}
html.nogl .wl.is-focus .wl-card::after{opacity:1}
/* the focus without the parting (reduced motion, no WebGL): the card takes a hairline of espresso and its line goes full ink */
html.reduced .wl.is-focus .wl-card,html.nogl .wl.is-focus .wl-card{box-shadow:1px 1.5px 1.5px rgba(42,29,18,.32),4px 7px 14px -5px rgba(42,29,18,.5),0 0 0 1.5px var(--esp)}
html.reduced .wl.is-focus .wl-card::after,html.nogl .wl.is-focus .wl-card::after{background:var(--esp)}
html.nogl .wl.is-gone .wl-fb,html.nogl .wl.is-gone .wl-pocket{display:none}
html.nogl .wl.is-gone .wl-field::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;margin-top:-.5px;background:rgba(59,42,28,.32)}   /* the closed seam */
html.nogl .wl-face{box-shadow:inset 0 0 0 1px rgba(59,42,28,.12)}
html.nogl .wl-radio:checked + .wl-face{background-color:var(--chk-ground);background-image:url("../../assets/check/Thina-check-repeat-10mm.svg");background-size:var(--tile) var(--tile);
  box-shadow:inset 0 1px 0 var(--cream),inset 0 -1.5px 0 var(--band),inset 0 8px 10px -6px rgba(59,42,28,.35)}
html.nogl .ft-hem{background-color:var(--chk-ground);background-image:url("../../assets/check/Thina-check-repeat-10mm.svg");background-size:var(--tile) var(--tile);
  box-shadow:inset 0 1px 0 var(--cream),inset 0 8px 10px -6px rgba(42,29,18,.45)}