/* NOS Watches v2 theme: the home page (front-page.php). Tokens from tokens.css, chrome from chrome.css.
   Ported from the approved prototype (v2/home.css): Hero 1 only (the drop is the hero), real data.
   Light and legible by default, vault bands only for the live drops and the engraved record.
   Upright type only, amber accents, never green UI, never em dashes.
   Hidden start states live only under html.intro / html.js classes set by script. */

main{display:block}
[hidden]{display:none!important}
img{max-width:100%}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--g)}
.sec{padding:clamp(88px,10vw,150px) 0}
.h2{margin:0;font:400 var(--fs-h2)/1.02 var(--f-display);letter-spacing:-.018em;text-wrap:balance}
.lede{margin:0;font-size:clamp(18px,1.25vw,20px);line-height:1.55;color:var(--ink-2);max-width:34em}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:6px}
.lnk:hover{text-decoration-color:var(--ink)}
.lnk-vault{color:var(--on-vault)}
.lnk-vault:hover{text-decoration-color:var(--on-vault)}
.vault{background:var(--vault);color:var(--on-vault)}
.vault :focus-visible{outline-color:var(--amber-hi)}
.btn:active{transform:translateY(1px)}

/* =====================================================================
   HEROES (variant switch: hero 1 by default; hero 2 with ?hero=2)
   ===================================================================== */
.hero{position:relative;background:var(--paper);overflow:hidden;isolation:isolate}
.hero-title{margin:0;font:400 min(4.95vw,8.8vh,82px)/.98 var(--f-display);letter-spacing:-.024em;color:var(--ink)}
.hero-title .ln{display:block}
.hero-sub{margin:0;font-size:clamp(18px,1.32vw,20px);line-height:1.55;color:var(--ink-2);max-width:31em}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px}
.hero-proof{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.hero-proof .pf-n{font:500 30px/1 var(--f-display);color:var(--ink);letter-spacing:-.01em}

/* ---------- HERO 1: the drop is the hero ---------- */
.hero-1{padding-top:var(--nos-hdr)}
.h1-grid{position:relative;max-width:1640px;margin:0 auto;padding:0 var(--g);min-height:calc(min(100svh,1080px) - var(--nos-hdr));display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center}
.h1-copy{position:relative;z-index:3;padding:clamp(24px,5vh,64px) 0 clamp(48px,8vh,96px);display:grid;gap:clamp(22px,3.2vh,32px);justify-items:start}
.h1-copy .hero-acts{margin-top:4px}
.h1-stage{position:relative;align-self:stretch;min-height:560px;z-index:1;container-type:inline-size}
.h1-obj{--H:min(84vh,880px,148cqw);--sx:20%;position:absolute;left:calc(var(--sx) - var(--hx,.5) * var(--H) * var(--ar,.71));top:50%;height:var(--H);aspect-ratio:var(--ar,.71);transform:translateY(-51%)}
/* a front shot on its bracelet: larger, so the case is as big as an angle shot's; the fades crop the bracelet */
.h1-obj[data-shape="tall"]{--H:min(104vh,1090px,176cqw);--sx:36%}
.h1-glow{position:absolute;left:40%;top:44%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--card) 0%,color-mix(in srgb,var(--card) 60%,transparent) 45%,transparent 100%);pointer-events:none}
.h1-pool{position:absolute;left:40%;top:44%;width:112%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--vault) 0%,var(--vault) 46%,color-mix(in srgb,var(--vault) 55%,transparent) 70%,color-mix(in srgb,var(--vault) 12%,transparent) 88%,transparent 100%);opacity:0;pointer-events:none}
.h1-watch{position:absolute;inset:0;margin:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 82%,transparent 99%);mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 82%,transparent 99%)}
.hw-day{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:40% 44%}
.h1-watch.g-white .hw-day{mix-blend-mode:multiply}
.h1-watch.g-black,.h1-watch.g-photo{inset:12% 6%;border-radius:28px;overflow:hidden;background:#000;-webkit-mask-image:none;mask-image:none;box-shadow:0 40px 70px -40px rgba(22,20,15,.6)}
.h1-watch.g-black .hw-day,.h1-watch.g-photo .hw-day{object-fit:cover}
.hw-night{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.h1-pin{position:absolute;left:81%;top:6px;width:0;height:0;z-index:4}
.h1-pin .nos-tagrig{font-size:clamp(13px,.98vw,16px);--len:clamp(70px,10vh,130px)}
.h1-switch{position:absolute;left:4%;bottom:clamp(18px,4.5vh,44px);z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.h1-switch .sw-k{display:inline-flex;align-items:center;gap:8px;font:500 15px/1.2 var(--f-ui);color:var(--ink-2);margin-right:4px}
.sw-t{position:relative;width:60px;height:60px;padding:0;border-radius:16px;border:1.5px solid var(--line);background:var(--card);display:grid;place-items:center;overflow:hidden;cursor:pointer;box-shadow:0 8px 18px -12px rgba(22,20,15,.5);transition:border-color .2s,transform .3s var(--ease)}
.sw-t img{height:54px;width:auto;display:block}
.sw-t.is-black{background:#000}
.sw-t.is-black img{height:100%;width:100%;object-fit:cover;transform:scale(1.3)}
.sw-t[aria-pressed="true"]{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber),0 8px 18px -12px rgba(22,20,15,.5)}
.sw-t:hover{transform:translateY(-2px)}
.tag-static{position:absolute;right:0;top:10%;z-index:4;width:250px;display:grid;gap:6px;padding:22px;background:var(--card);border-radius:6px;box-shadow:0 18px 40px -20px rgba(22,20,15,.45);color:var(--ink);text-decoration:none}
.tag-static .ts-k{font:500 15px/1 var(--f-ui);color:var(--ink-2)}
.tag-static .ts-n{font:400 24px/1.1 var(--f-display)}
.tag-static .ts-r{font:500 13px/1.3 var(--f-mono);color:var(--ink-2)}
.tag-static .ts-p{font-size:15px;line-height:1.45}
.tag-static .btn{margin-top:6px}
.js .tag-static{display:none}

/* intro: the lume flourish (start states exist only under html.intro, set by script) */
html.intro .hero-1 .h1-pool{opacity:1}
html.intro .hero-1 .hw-night{opacity:.9;filter:brightness(.82)}
html.intro .hero-1 .hw-day{opacity:0;filter:brightness(.3) saturate(.6)}
html.intro .hero-1 .h1-switch{opacity:0;transform:translateY(8px)}

/* =====================================================================
   GLASS LOUPE (How we check)
   ===================================================================== */
.loupe-zoom{position:absolute;inset:0;border-radius:50%;background-repeat:no-repeat;background-color:var(--paper)}
/* knurled steel barrel around the lens */
.loupe::before{content:"";position:absolute;inset:-9%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--steel-3) 0 2deg,var(--steel-1) 2deg 4deg);
  -webkit-mask:radial-gradient(closest-side,transparent 89%,#000 90%,#000 99%,transparent 100%);mask:radial-gradient(closest-side,transparent 89%,#000 90%,#000 99%,transparent 100%);
  filter:drop-shadow(0 16px 18px rgba(22,20,15,.45))}
/* polished bevel between barrel and glass */
.loupe-glass{content:"";position:absolute;inset:-9%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 200deg,var(--steel-1),var(--steel-3) 25%,var(--card) 45%,var(--steel-3) 60%,var(--steel-2) 80%,var(--steel-1));
  -webkit-mask:radial-gradient(closest-side,transparent 84%,#000 85%,#000 90%,transparent 91%);mask:radial-gradient(closest-side,transparent 84%,#000 85%,#000 90%,transparent 91%)}
.loupe-zoom::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(58% 40% at 30% 22%,color-mix(in srgb,var(--card) 42%,transparent),transparent 70%),radial-gradient(circle,transparent 62%,rgba(22,20,15,.38) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--card) 50%,transparent)}

/* =====================================================================
   LIVE DROPS (vault)
   ===================================================================== */
.drops{padding:clamp(84px,9vw,136px) 0 clamp(72px,8vw,120px)}
.drops-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(30px,3.6vw,52px)}
.drops .h2{max-width:13em}
.drops-count{margin:0;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid var(--vault-line);font:500 16px/1 var(--f-ui);color:var(--on-vault)}
.drop-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.dcard{position:relative;display:flex;flex-direction:column;background:var(--vault-2);border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--vault-line)}
.dcard-img{position:relative;display:block;height:clamp(250px,21vw,320px);margin:8px 8px 0;border-radius:16px;overflow:hidden;background:radial-gradient(70% 62% at 50% 40%,var(--card) 0%,var(--paper) 55%,var(--paper-2) 100%)}
.dcard-img img{position:absolute;left:50%;top:50%;height:112%;width:auto;max-width:none;transform:translate(-50%,-50%);-webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 16%,#000 84%,transparent 98%);mask-image:linear-gradient(180deg,transparent 2%,#000 16%,#000 84%,transparent 98%);transition:transform .8s var(--ease)}
.dcard:hover .dcard-img img{transform:translate(-50%,-51.5%)}
.dcard-img.g-white img{mix-blend-mode:multiply}
.dcard-img.g-black,.dcard-img.g-photo{background:#000}
.dcard-img.g-black img,.dcard-img.g-photo img{height:100%;width:100%;object-fit:cover;-webkit-mask-image:none;mask-image:none}
.dcard-img.g-black img,.dcard-img.g-photo img,.dcard:hover .dcard-img.g-black img,.dcard:hover .dcard-img.g-photo img{transform:translate(-50%,-50%) scale(1.04)}
.dcard.is-upcoming .dcard-price{color:var(--on-vault)}
.dcard-price [data-drop-odo]{display:inline-block;min-width:var(--w,9ch)}
.dcard-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.dcard-stock{margin:0;font:500 13px/1.2 var(--f-mono);letter-spacing:.06em;color:var(--on-vault-2)}
.dcard-name{margin:8px 0 0;font:400 clamp(21px,1.6vw,25px)/1.12 var(--f-display);letter-spacing:-.005em;color:var(--on-vault)}
.dcard-name a{color:inherit;text-decoration:none}
.dcard-name a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:5px}
.dcard-ref{margin:6px 0 0;font:500 14px/1.3 var(--f-mono);letter-spacing:.02em;color:var(--on-vault-2)}
.dcard-price{margin:18px 0 0;font:600 clamp(28px,2.25vw,34px)/1.15 var(--f-ui);color:var(--amber-hi);letter-spacing:.005em}
.dcard-rate{margin:4px 0 0;font-size:15px;color:var(--on-vault-2)}
.dcard .btn{margin-top:auto;width:100%}
.dcard-body .dcard-rate+.btn{margin-top:18px}
.dcard.is-ended .dcard-img{background:radial-gradient(70% 62% at 50% 40%,var(--paper-2) 0%,color-mix(in srgb,var(--paper-2) 70%,var(--vault-2)) 100%)}
.dcard.is-ended .dcard-img img{opacity:.55;filter:grayscale(.65)}
.dcard.is-ended .dcard-name{color:var(--on-vault-2)}
.dcard-ended{margin:18px 0 0;align-self:flex-start;padding:10px 14px 8px;border:2px solid var(--on-vault-2);border-radius:4px;font:600 28px/1 var(--f-ui);letter-spacing:.18em;color:var(--on-vault);transform:rotate(-1.5deg)}
.drops-empty{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 32px;padding:clamp(26px,3vw,40px);border-radius:22px;background:var(--vault-2);box-shadow:inset 0 0 0 1px var(--vault-line)}
.drops-empty p{margin:0;max-width:40em;font-size:18px;line-height:1.55;color:var(--on-vault)}
.drops-how{margin:clamp(28px,3vw,44px) 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:18px;line-height:1.5;color:var(--on-vault)}
.hw-step{display:inline-flex;align-items:baseline;gap:10px}
.hw-step b{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--amber);color:var(--ink);font:600 15px/1 var(--f-ui);transform:translateY(-1px)}

/* =====================================================================
   TURN THE RING
   ===================================================================== */
.ring-sec{padding-bottom:clamp(64px,8vw,120px);overflow:hidden}
.ring-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px var(--g);align-items:end}
.ring-head .lede{justify-self:end}
.ring{position:relative;margin-top:clamp(20px,3vw,40px);outline:none}
.ring-list{list-style:none;margin:0;padding:0 var(--g) 10px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory}
.ring-list li{flex:0 0 min(64vw,260px);scroll-snap-align:center}
.w{display:block;color:var(--ink);text-decoration:none}
.w-img{display:block;width:100%;height:auto;aspect-ratio:auto}
.w.g-white .w-img{mix-blend-mode:multiply}
.w-n{display:block;margin-top:12px;font:400 19px/1.25 var(--f-display)}
.w-s{display:block;margin-top:4px;font:500 13px/1.2 var(--f-mono);color:var(--ink-2)}
.w-p{display:inline-block;margin-top:4px;font:500 18px/1.2 var(--f-ui)}
.w .w-r{margin:8px 0 0 10px;vertical-align:2px}
.w-was{margin-left:8px;font:400 15px/1.2 var(--f-ui);color:var(--ink-2);text-decoration-thickness:1.5px}
.ring.is-ring{height:clamp(460px,57vh,660px);overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.ring.is-ring.drag{cursor:grabbing}
.ring.is-ring:focus-visible{outline:3px solid var(--amber);outline-offset:-6px}
.is-ring .ring-list{display:block;overflow:visible;padding:0;position:absolute;inset:0}
.is-ring .ring-list li{position:absolute;left:0;top:0;width:0;height:0}
.is-ring .w{position:absolute;left:0;top:0;transform-origin:50% 50%}
.is-ring .w-n,.is-ring .w-s,.is-ring .w-p,.is-ring .w-r,.is-ring .w-was{display:none}
.is-ring .w-img{position:absolute;left:0;top:0;max-width:none;pointer-events:none;-webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.is-ring .w::after{content:"";position:absolute;left:var(--shx,0);top:var(--shy,0);width:var(--shw,100px);height:calc(var(--shw,100px) * .22);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(22,20,15,.22),transparent);z-index:-1}
.ring-svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;max-width:none}
.ring-pip{position:absolute;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:16px solid var(--amber);transform:translate(-50%,0);transition:transform .08s}
.ring-pip.tk{transform:translate(-50%,3px)}
.ring-ui{display:none}
.is-ring~.wrap .ring-ui{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:end;margin-top:-28px;position:relative;z-index:3}
.ring-read{min-height:130px}
.rr-s{margin:0;font:500 13px/1.2 var(--f-mono);letter-spacing:.06em;color:var(--ink-2)}
.rr-n{margin:8px 0 0;font:400 clamp(24px,2.1vw,32px)/1.15 var(--f-display);max-width:24em;text-wrap:balance}
.rr-p{margin:10px 0 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rr-p span{font:500 22px/1 var(--f-ui)}
.rr-p .nos-rrp-badge{font:500 13px/1 var(--f-ui)}
.rr-p .nos-sale-badge{font:600 13px/1 var(--f-ui)}
.rr-p .rr-was{font:400 17px/1 var(--f-ui);color:var(--ink-2);text-decoration-thickness:1.5px;margin-left:-8px}
.ring-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ring-btn{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer;transition:background-color .2s}
.ring-btn:hover{background:var(--amber)}
.ring-btn svg{width:20px;height:20px}

/* =====================================================================
   HOW WE CHECK (light; a glass loupe over the macro dial)
   ===================================================================== */
.check{background:var(--paper-2)}
.check-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:start}
.check-media{order:0;align-self:stretch}
.check-sticky{position:sticky;top:calc(var(--nos-hdr) + 5vh)}
.macro{position:relative;width:100%;aspect-ratio:1600/1188}
.macro-img{position:absolute;inset:0;border-radius:20px;background:var(--vault) var(--macro) center/cover no-repeat;box-shadow:0 0 0 6px var(--card),0 0 0 7px var(--line),0 40px 70px -36px rgba(22,20,15,.6)}
.macro-pins .pin{position:absolute;left:var(--px);top:var(--py);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--ink);font:600 15px/1 var(--f-ui);box-shadow:0 0 0 3px var(--card),0 6px 12px -4px rgba(22,20,15,.6);transition:opacity .4s,transform .5s var(--ease)}
.loupe{position:absolute;left:0;top:0;width:28%;aspect-ratio:1;display:none;will-change:transform}
.loupe .loupe-glass{inset:-9%}
.loupe-tag{position:absolute;left:100%;top:72%;display:flex;align-items:center;gap:10px;margin-left:6%;padding:9px 14px 9px 9px;background:var(--card);border-radius:999px;box-shadow:0 10px 24px -12px rgba(22,20,15,.55);white-space:nowrap;font:500 16px/1.1 var(--f-ui);color:var(--ink);transition:opacity .3s}
.loupe-tag b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--amber);font:600 15px/1 var(--f-ui)}
.loupe.flip .loupe-tag{left:auto;right:100%;margin:0 6% 0 0}
.check-copy .lede{margin-top:18px}
.steps{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;gap:0}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--line);transition:opacity .4s}
.step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--amber-ink);color:var(--amber-ink);font:600 17px/1 var(--f-ui);transition:background-color .3s,color .3s,border-color .3s}
.step h3{margin:4px 0 0;font:400 clamp(24px,2vw,30px)/1.1 var(--f-display)}
.step p{margin:8px 0 0;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:30em}
.step.on .step-n{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.check-more{margin:18px 0 0}
/* live layout (set by script): the steps become scroll stations for the loupe */
.check.live .loupe{display:block}
.check.live .pin{opacity:0;transform:scale(.4)}
.check.live .pin.seen{opacity:1;transform:none}
.check.live .step{min-height:min(40vh,380px);align-content:start}
.check.live .step:last-child{min-height:auto}
.check.live .step:not(.on){opacity:.85}

/* =====================================================================
   THE RECORD, ENGRAVED (vault + brushed steel)
   ===================================================================== */
.record{padding:clamp(84px,9vw,140px) 0}
.rec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px var(--g);align-items:end;margin-bottom:clamp(28px,3.6vw,48px)}
.rec-src{margin:0;font-size:16px;line-height:1.55;color:var(--on-vault-2);max-width:32em}
.steel{position:relative;color:var(--steel-ink);
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--card) 48%,transparent) 46%,transparent 60%) var(--sx,130%) 0/260% 100% no-repeat,
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--card) 7%,transparent) 0 1px,rgba(22,20,15,.045) 1px 2px),
    linear-gradient(180deg,var(--steel-1),var(--steel-3) 68%,var(--steel-2));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--card) 75%,transparent),inset 0 -2px 0 rgba(22,20,15,.25),0 0 0 1px rgba(0,0,0,.6),0 26px 50px -28px rgba(0,0,0,.9)}
.cut{color:var(--steel-ink);text-shadow:0 1px 0 color-mix(in srgb,var(--card) 60%,transparent),0 -1px 0 rgba(22,20,15,.22)}
.cert{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(20px,3vw,48px);align-items:end;padding:clamp(28px,3.4vw,52px) clamp(26px,4vw,64px);border-radius:10px;margin-bottom:clamp(14px,1.6vw,24px)}
.cert b{display:block;font:500 clamp(40px,4.2vw,64px)/.95 var(--f-ui);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cert .cert-main{grid-column:1/-1;display:flex;align-items:baseline;gap:12px 28px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid rgba(22,20,15,.2);box-shadow:0 1px 0 color-mix(in srgb,var(--card) 45%,transparent)}
.cert .cert-main b{font-size:clamp(68px,9.6vw,150px)}
.cert .cert-main span{font-size:clamp(19px,1.7vw,26px);margin:0}
.cert span{display:block;font:500 16px/1.4 var(--f-ui);color:var(--steel-ink);margin-top:10px}
.cert .star{display:inline;font-size:.6em;vertical-align:.2em;margin:0}
.screws .scr::before,.screws .scr::after,.screws::before,.screws::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--steel-1),var(--steel-3) 60%,var(--steel-ink));box-shadow:inset 0 0 0 1px rgba(22,20,15,.4)}
.screws::before{left:11px;top:11px}.screws::after{right:11px;top:11px}.screws .scr::before{left:11px;bottom:11px}.screws .scr::after{right:11px;bottom:11px}
.plates{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.pl{margin:0;padding:clamp(30px,2.8vw,42px) clamp(26px,2.6vw,40px) clamp(24px,2.2vw,32px);border-radius:8px}
.pl blockquote{margin:0;font:400 clamp(19px,1.45vw,22px)/1.45 var(--f-display)}
.pl figcaption{font:500 15px/1.3 var(--f-ui);color:var(--steel-ink);margin-top:16px;letter-spacing:.01em}
.pl:nth-child(1){grid-column:1/span 5}.pl:nth-child(2){grid-column:6/span 7}.pl:nth-child(3){grid-column:1/span 7}.pl:nth-child(4){grid-column:8/span 5}.pl:nth-child(5){grid-column:1/span 6}.pl:nth-child(6){grid-column:7/span 6}
.rec-more{margin:clamp(22px,2.4vw,32px) 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rec-swipe{display:none;font-size:15px;color:var(--on-vault-2)}
.rec-links{display:flex;flex-wrap:wrap;gap:4px 28px}
.cert[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cert[data-n="1"]{grid-template-columns:minmax(0,1fr)}

/* =====================================================================
   BEFORE AND AFTER YOU BUY
   ===================================================================== */
.buy-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px var(--g);align-items:end}
.buy-head .lede{justify-self:end}
.prom-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,48px);margin-top:clamp(44px,6vw,80px)}
.prom{border-top:1.5px solid var(--ink);padding-top:26px}
.prom svg{width:84px;height:84px;overflow:visible}
.prom svg .d{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.prom svg .g{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prom svg text{font:600 15px var(--f-ui);fill:var(--ink)}
.prom h3{margin:20px 0 0;font:400 clamp(25px,2.1vw,33px)/1.1 var(--f-display);text-wrap:balance}
.prom p{margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--ink-2)}
.pre-draw .prom .d,.pre-draw .prom .g{stroke-dasharray:1;stroke-dashoffset:1}
.pre-draw .prom.drawn .d,.pre-draw .prom.drawn .g{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.215,.61,.355,1) calc(var(--k,0) * 140ms)}
.pre-draw .prom svg text{opacity:0;transition:opacity .6s .9s}
.pre-draw .prom.drawn svg text{opacity:1}

/* =====================================================================
   THE TERMINAL AND THE SUNDAY STEAL
   ===================================================================== */
.formats{background:var(--paper-2)}
.fmt-h{max-width:14em}
.fmt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(32px,4vw,56px)}
.fcard{display:flex;flex-direction:column;background:var(--card);border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line),0 30px 50px -40px rgba(22,20,15,.55)}
.fc-vis{position:relative;height:clamp(240px,24vw,320px);display:grid;place-items:center;overflow:hidden}
.fc-txt{padding:clamp(22px,2.4vw,34px)}
.fc-txt h3{margin:0;font:400 clamp(30px,2.6vw,40px)/1.05 var(--f-display);letter-spacing:-.01em}
.fc-when{margin:8px 0 0;font:500 16px/1.3 var(--f-ui);color:var(--amber-ink)}
.fc-txt p:last-child{margin:14px 0 0;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:32em}
.term-vis{background:radial-gradient(90% 80% at 50% 30%,var(--paper) 0%,var(--paper-2) 100%)}
.term-screen{width:min(84%,420px);padding:18px 18px 16px;border-radius:16px;background:var(--vault);color:var(--on-vault);box-shadow:0 26px 40px -24px rgba(22,20,15,.7),inset 0 0 0 1px var(--vault-line);font-family:var(--f-mono)}
.term-top{display:flex;justify-content:space-between;font:500 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--on-vault-2)}
.term-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.slot{position:relative;display:grid;place-items:center;aspect-ratio:3/4;border-radius:10px;background:var(--vault-2);box-shadow:inset 0 0 0 1px var(--vault-line);overflow:hidden}
.slot b{font:500 clamp(30px,3vw,44px)/1 var(--f-display);color:var(--amber-hi)}
.slot .sl{position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(180deg,color-mix(in srgb,var(--on-vault) 10%,transparent),transparent)}
.term-clock{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font:500 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--on-vault-2)}
.term-clock b{font:500 30px/1 var(--f-mono);letter-spacing:.02em;color:var(--on-vault)}
.steal-vis{background:radial-gradient(70% 70% at 40% 45%,var(--card) 0%,var(--paper) 60%,var(--paper-2) 100%)}
/* the Steal's watch is secret until it opens: a sealed NOS box under the hidden price */
.steal-box{position:absolute;left:28%;top:54%;width:min(46%,250px);aspect-ratio:1.45;transform:translate(-50%,-50%) rotate(-5deg);filter:drop-shadow(0 26px 22px rgba(22,20,15,.35))}
.steal-lid{position:absolute;left:-3%;right:-3%;top:0;height:34%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#3a3027,#2a221b);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.35);display:grid;place-items:center}
.steal-foil{font:500 clamp(10px,1vw,13px)/1 var(--f-mono);letter-spacing:.32em;color:var(--amber-hi);padding:5px 9px;border:1px solid color-mix(in srgb,var(--amber-hi) 70%,transparent);border-radius:2px}
.steal-base{position:absolute;left:0;right:0;top:30%;bottom:0;border-radius:3px 3px 10px 10px;background:linear-gradient(180deg,#2c241d,#1f1914 80%);box-shadow:inset 0 2px 0 rgba(0,0,0,.4)}
.steal-label{position:absolute;right:9%;bottom:18%;padding:6px 9px;background:var(--card);border-radius:2px;font:500 clamp(9px,.85vw,11px)/1.25 var(--f-mono);letter-spacing:.06em;color:var(--ink);transform:rotate(1deg)}
.steal-price{position:absolute;right:clamp(16px,6%,44px);top:50%;transform:translateY(-50%) rotate(2deg);display:grid;gap:6px;padding:18px 22px;background:var(--card);border-radius:6px;box-shadow:0 18px 30px -18px rgba(22,20,15,.55);text-align:left}
.sp-k{font:500 15px/1 var(--f-ui);color:var(--ink-2)}
.steal-price b{font:600 clamp(34px,3.2vw,46px)/1 var(--f-ui);letter-spacing:.06em;color:var(--ink)}
.sp-s{font:500 14px/1.2 var(--f-ui);color:var(--ink-2)}
/* 1.1.3: the plain form (no JavaScript) comes back to #signup; it lands below the fixed header */
#signup{scroll-margin-top:calc(var(--nos-hdr,72px) + 16px)}
.signup{margin-top:clamp(14px,1.8vw,26px);background:var(--vault);color:var(--on-vault);border-radius:24px;padding:clamp(26px,3.4vw,52px)}
.signup-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px clamp(24px,4vw,64px);align-items:start}
.su-copy h3,.su-done h3{margin:0;font:400 clamp(30px,2.8vw,44px)/1.05 var(--f-display);letter-spacing:-.01em}
.su-copy p,.su-done p{margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--on-vault-2);max-width:32em}
.su-row{display:flex;gap:10px;flex-wrap:wrap}
.su-in{flex:1 1 240px;min-width:0;min-height:56px;padding:0 22px;border-radius:999px;border:1.5px solid var(--vault-line);background:var(--vault-2);color:var(--on-vault);font:400 18px/1 var(--f-ui)}
.su-in::placeholder{color:var(--on-vault-2);opacity:1}
.su-in:focus-visible{outline:3px solid var(--amber-hi);outline-offset:2px}
.su-in[aria-invalid="true"]{border-color:var(--amber-hi)}
.su-btn{min-height:56px}
.su-fields{display:grid;gap:12px}
.su-msg{margin:0;min-height:1.5em;font-size:16px;color:var(--amber-hi)}
.su-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.su-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:4px 0;font-size:16px;line-height:1.45;color:var(--on-vault);cursor:pointer}
.su-check input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
.su-box{flex:none;width:24px;height:24px;margin-top:1px;border-radius:6px;border:1.5px solid var(--on-vault-2);background:var(--vault-2);display:grid;place-items:center}
.su-check input:checked+.su-box{background:var(--amber);border-color:var(--amber)}
.su-check input:checked+.su-box::after{content:"";width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-2px) rotate(-45deg)}
.su-check input:focus-visible+.su-box{outline:3px solid var(--amber-hi);outline-offset:2px}
.su-check input[aria-invalid="true"]+.su-box{border-color:var(--amber-hi)}
.su-privacy{margin:0;font-size:15px;line-height:1.5;color:var(--on-vault-2)}
/* 1.1.3: no box; the email field, the plugin's NOS Drops line under it, then the button */
.su-nobox .su-in{width:100%;flex:none}
.su-terms{margin:0;font-size:15px;line-height:1.5;color:var(--on-vault-2);max-width:36em}
.su-terms a{color:var(--on-vault);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:4px}
.su-terms a:hover{text-decoration-color:var(--on-vault)}
.su-nobox .su-btn{justify-self:start}
.su-privacy a{color:var(--on-vault);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:4px}
.su-done{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(24px,3vw,48px);align-items:center}
.su-done[hidden]{display:none}
.su-done:focus{outline:none}
.su-ticket{display:flex;align-items:stretch;width:250px;height:110px;border-radius:12px;background:var(--amber);color:var(--ink);overflow:hidden;transform:rotate(-3deg);box-shadow:0 20px 34px -18px rgba(0,0,0,.8);-webkit-mask:radial-gradient(circle at 74px 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat,radial-gradient(circle at 74px 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat;mask:radial-gradient(circle at 74px 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat,radial-gradient(circle at 74px 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat}
.su-ticket .tk-a{width:74px;display:grid;place-items:center;font:500 22px/1 var(--f-display);border-right:2px dashed rgba(22,20,15,.4)}
.su-ticket .tk-b{flex:1;display:grid;align-content:center;gap:8px;padding:0 18px;font:500 13px/1.2 var(--f-mono);letter-spacing:.06em}
.su-ticket .tk-b b{font:500 22px/1 var(--f-mono);letter-spacing:.08em}
.su-done.in .su-ticket{animation:ticketIn .9s var(--ease) both}
@keyframes ticketIn{from{transform:translateY(24px) rotate(-12deg);opacity:0}to{transform:rotate(-3deg);opacity:1}}
.su-addr{color:var(--on-vault)}

/* =====================================================================
   QUIZ AND SOURCING
   ===================================================================== */
.more{padding-top:clamp(64px,7vw,110px)}
.more-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(14px,1.8vw,26px)}
.more-card{display:flex;flex-direction:column;gap:12px;padding:clamp(26px,3vw,44px);border-radius:24px;background:var(--card);color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line)}
.more-card.quiz{flex-direction:row;align-items:center;gap:clamp(20px,3vw,44px);transition:box-shadow .3s}
.more-card.quiz:hover{box-shadow:inset 0 0 0 1.5px var(--amber)}
.mc-txt{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.mc-h{font:400 clamp(28px,2.5vw,38px)/1.08 var(--f-display);letter-spacing:-.01em}
.mc-p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:32em}
.mc-dial{position:relative;flex:none;width:clamp(110px,11vw,150px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--paper) 0 54%,var(--paper-2) 55% 100%);box-shadow:inset 0 0 0 1.5px var(--line)}
.mc-dial span{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--ink-2);transform:rotate(calc(var(--n) * 51.43deg)) translateY(-300%)}
.mc-dial span:nth-child(1){--n:0;background:var(--amber)}.mc-dial span:nth-child(2){--n:1}.mc-dial span:nth-child(3){--n:2}.mc-dial span:nth-child(4){--n:3}.mc-dial span:nth-child(5){--n:4}.mc-dial span:nth-child(6){--n:5}.mc-dial span:nth-child(7){--n:6}
.more-card.source{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  .drop-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .h1-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .prom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:901px) and (max-width:1199px){.h1-obj{--H:min(76vh,760px,130cqw);--sx:40%}.h1-obj[data-shape="tall"]{--H:min(104vh,1040px,176cqw);--sx:42%}.h1-pin{left:76%}.h1-pin .nos-tagrig{font-size:12.5px}.h1-copy .hero-sub{max-width:25em}.h1-copy{padding-right:12px}}
/* hero 1 on phones and portrait tablets: headline, the drop, then the words and actions */
@media (max-width:900px){
  .hero-1 .hero-title{font-size:clamp(36px,7.2vw,60px);line-height:1}
  .h1-grid{grid-template-columns:1fr;min-height:0;padding-top:14px;padding-bottom:36px}
  .h1-copy{display:contents}
  .h1-copy .hero-title{order:1}
  .h1-stage{order:2;min-height:0;height:clamp(290px,37vh,340px);margin:8px calc(-1 * var(--g)) 0;overflow:hidden}
  .h1-copy .hero-sub{order:3;margin-top:14px}
  .h1-copy .hero-acts{order:4;margin-top:16px}
  .h1-copy .hero-proof{order:5;margin-top:18px}
  .hero-acts .btn{flex:1 1 auto;padding:0 20px}
  .h1-obj{--H:calc(1.16 * clamp(290px,37vh,340px));--sx:24%;top:49%}
  .h1-obj[data-shape="tall"]{--H:calc(1.62 * clamp(290px,37vh,340px));--sx:32%}
  .h1-pin{left:76%;top:0}
  .h1-pin .nos-tagrig{font-size:10.4px;--len:8px}
  .h1-pin .nos-tag__brand,.h1-pin .nos-tag__ref,.h1-pin .nos-tag__k{display:none}
  .h1-pin .nos-tag__top{font-size:1.3em}
  .h1-pin .nos-tag__name{margin-top:.6em}
  .h1-pin .nos-tag__perf{margin:.9em -1.5em .7em}
  .h1-pin .nos-tag__rate{font-size:1.36em}
  .h1-pin .nos-tag__rate span{display:none}
  .h1-pin .nos-tag .btn{font-size:1.4em;padding:0 .9em}
  .h1-stage{container-type:normal}
}
@media (min-width:701px) and (max-width:900px){
  .h1-stage{height:clamp(380px,44vh,520px)}
  .h1-obj{--H:calc(1.16 * clamp(380px,44vh,520px));--sx:22%}
  .h1-obj[data-shape="tall"]{--H:calc(1.6 * clamp(380px,44vh,520px));--sx:30%}
  .h1-pin{left:72%}
  .h1-pin .nos-tagrig{font-size:13px;--len:30px}
  .hero-acts .btn{flex:0 0 auto}
}
@media (max-width:860px){
  .check-grid{grid-template-columns:1fr}
  .rec-head,.ring-head,.buy-head{grid-template-columns:1fr}
  .ring-head .lede,.buy-head .lede{justify-self:start}
  .cert{grid-template-columns:1fr}
  .plates{grid-template-columns:1fr}
  .pl:nth-child(n){grid-column:auto}
  .fmt-grid{grid-template-columns:1fr}
  .signup-form{grid-template-columns:1fr}
  .su-msg{grid-column:1}
  .su-nobox .su-btn{justify-self:stretch}
  .more-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  :root{--fs-h2:clamp(32px,8.6vw,42px)}
  .hero-title,.hero-1 .hero-title{font-size:clamp(36px,10.4vw,44px);line-height:1}
  .hero-sub{font-size:17px}
  .hero-proof .pf-n{font-size:26px}
  .h1-switch{left:var(--g);bottom:10px;gap:8px}
  .h1-switch .sw-k{display:none}
  .sw-t{width:48px;height:48px;border-radius:13px}
  .sw-t img{height:43px}
  .tag-static{width:190px;padding:16px;top:4%;right:var(--g)}
  .tag-static .ts-n{font-size:19px}
  /* sections */
  .drop-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--g));padding:0 var(--g) 6px;scrollbar-width:none}
  .drop-cards::-webkit-scrollbar{display:none}
  .dcard{flex:0 0 80%;scroll-snap-align:center}
  .drops-how{display:grid;gap:10px;font-size:17px}
  .is-ring~.wrap .ring-ui{grid-template-columns:1fr;margin-top:-12px}
  .ring-read{min-height:0}
  .check-copy{display:contents}
  .check-copy .h2{order:0}
  .check-copy .lede{order:1;margin-top:0}
  .check-media{order:2;position:sticky;top:0;z-index:2;margin:0 calc(-1 * var(--g));padding:12px var(--g) 14px;background:var(--paper-2)}
  .check-sticky{position:static}
  .steps{order:3;margin-top:0}
  .check-more{order:4}
  .check-grid{gap:18px}
  .loupe-tag{display:none}
  .check.live .step{min-height:30vh}
  .prom-grid{grid-template-columns:1fr;gap:26px}
  .prom{display:grid;grid-template-columns:60px minmax(0,1fr);gap:4px 18px;padding-top:20px}
  .prom svg{grid-row:span 2;width:60px;height:60px}
  .prom h3{margin:0;font-size:25px}
  .prom p{margin:6px 0 0;font-size:16px}
  .plates{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--g));padding:4px var(--g) 8px;scrollbar-width:none}
  .plates::-webkit-scrollbar{display:none}
  .pl{flex:0 0 84%;scroll-snap-align:center;padding:26px 22px 22px}
  .pl blockquote{font-size:18px}
  .rec-swipe{display:block}
  .cert{gap:14px}
  .cert .cert-main{padding-bottom:14px}
  .steal-price{right:14px;padding:14px 16px;gap:5px}
  .steal-price b{font-size:30px}
  .sp-k{font-size:14px}
  .sp-s{font-size:13px}
  .steal-box{left:31%;width:54%}
  .steal-label{right:auto;left:9%;bottom:16%}
  .more-card.quiz{flex-direction:column;align-items:flex-start}
  .su-ticket{width:220px}
  .su-done{grid-template-columns:1fr}
}
@media (max-width:380px){
  .hero-title,.hero-1 .hero-title{font-size:clamp(34px,10vw,40px)}
  .sw-t{width:44px;height:44px}
  .steal-foil{letter-spacing:.16em;padding:4px 6px}
  .steal-price{padding:12px 14px}
  .steal-price b{font-size:27px}
}

/* reduced motion: still and complete */
html.rm .hw-day{transition:none!important;animation:none!important}