/* ══════════════════════════════════════════════════════════════════
   THE OWNERS' ROOMS: /track, /claim, /owners, /registry.

   The same house as the rest of the site: its near-black, its bone and
   gold, Instrument Serif for the voice and Inter for the words, with
   tabular figures for every number. Quiet and exact. The accent is for
   the one thing on a screen that matters. Nothing here moves unless a
   state changed, and nothing moves for anyone who asked for less.
   ══════════════════════════════════════════════════════════════════ */
@font-face{font-family:Instrument;src:url(fonts/InstrumentSerif-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Instrument;src:url(fonts/InstrumentSerif-italic-latin.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:InterV;src:url(fonts/Inter-wght.woff2) format('woff2-variations'),url(fonts/Inter-wght.woff2) format('woff2');font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:InterV;src:url(fonts/Inter-rupee.woff2) format('woff2');font-weight:300 600;font-style:normal;font-display:swap;unicode-range:U+20B9}

:root{
  --void:#080908; --void-2:#0E0F0D; --raise:#12130F; --bone:#EDE8DF; --mute:#B3AC9F; --faint:#9D968A; --ghost:#4A463F;
  --line:#221F1C; --line-2:#2E2A25; --gold:#C6A15B; --gold-lit:#E0BE7C; --bad:#E08A70; --ok:#8DB59B;
  --display:Instrument,'Times New Roman',serif;
  --body:InterV,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(1.25rem,5vw,4.5rem);
  --hold:min(40rem,100% - var(--gut) * 2);
  --hold-wide:min(64rem,100% - var(--gut) * 2);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--void);color:var(--bone);font-family:var(--body);font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.65;min-height:100svh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums;
  background:radial-gradient(120% 70% at 50% 0%,#14110c 0%,var(--void) 60%) fixed,var(--void)}
a{color:inherit}
::selection{background:var(--gold);color:var(--void)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
[hidden]{display:none !important}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--void);padding:.7rem 1rem;z-index:10}
.skip:focus{left:0}
main{padding:clamp(2.5rem,8vh,5rem) var(--gut) calc(4rem + env(safe-area-inset-bottom));display:grid;justify-items:center}
.wrap{width:var(--hold);margin-inline:auto} .wide{width:var(--hold-wide)}
.mark{font-size:.6875rem;letter-spacing:.42em;text-transform:uppercase;color:var(--faint);margin:0 0 2.2rem;text-align:center}
.mark a{text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2rem,1.5rem + 2.2vw,3rem)} h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)}
p{margin:0 0 1rem} .muted{color:var(--mute)} .faint{color:var(--faint)} .center{text-align:center}
.eyebrow{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin:0 0 .6rem}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--display)} .em{font-family:var(--display);font-style:italic;color:var(--gold-lit)}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

/* Forms: labelled, at least 44px to tap, errors in plain words. */
label{display:block;font-size:.8125rem;letter-spacing:.06em;color:var(--mute);margin:1.1rem 0 .4rem}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=number],textarea,select{
  width:100%;min-height:2.9rem;background:var(--void-2);color:var(--bone);border:1px solid var(--line-2);border-radius:3px;
  padding:.7rem .85rem;font:inherit;font-size:1rem;transition:border-color .3s var(--ease-soft)}
textarea{min-height:7rem;resize:vertical}
input:hover,textarea:hover,select:hover{border-color:var(--ghost)}
input:focus,textarea:focus,select:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(198,161,91,.18)}
input[readonly],input:disabled{color:var(--faint);background:transparent;border-style:dashed}
.hint{font-size:.8125rem;color:var(--faint);margin:.4rem 0 0}
.short{max-width:9rem}
.err{color:var(--bad);font-size:.9rem;min-height:1.4em;margin:.8rem 0 0}
.okmsg{color:var(--ok);font-size:.95rem;margin:.8rem 0 0}
.check{display:flex;gap:.85rem;align-items:flex-start;margin:1.1rem 0;padding:.9rem 1rem;border:1px solid var(--line);border-radius:3px;background:var(--void-2);cursor:pointer}
.check input{flex:none;width:1.4rem;height:1.4rem;margin:.15rem 0 0;accent-color:var(--gold)}
.check span{font-size:.95rem;line-height:1.5;color:var(--bone)}
.check small{display:block;color:var(--faint);font-size:.8125rem;margin-top:.25rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.9rem;padding:.7rem 1.5rem;border-radius:3px;
  background:var(--gold);color:var(--void);border:1px solid var(--gold);font:inherit;font-size:.9375rem;font-weight:500;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;transition:background .35s var(--ease-soft),border-color .35s var(--ease-soft),transform .35s var(--ease)}
.btn:hover{background:var(--gold-lit);border-color:var(--gold-lit)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-lit)}
.btn.block{display:flex;width:100%}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:2.75rem}
.linkbtn:hover{color:var(--gold-lit)}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* Cards and the piece */
.card{border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,var(--raise),var(--void-2));padding:1.4rem 1.4rem 1.2rem;margin:0 0 1rem}
.card h3{font-size:1.15rem;margin:0 0 .5rem}
.piece{display:grid;justify-items:center;text-align:center;margin:0 0 2rem}
.plate{width:min(11rem,52vw);aspect-ratio:1;margin:0 auto 1.4rem;border-radius:50%;display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 58%,rgba(0,0,0,.28) 59%,rgba(255,255,255,.18) 60.5%,rgba(0,0,0,0) 62%),
    repeating-radial-gradient(circle at 50% 50%,#a7a9ab 0 .6px,#c3c5c7 .9px 1.4px,#9fa1a3 1.7px 2.2px),
    conic-gradient(from 210deg,#8f9294,#d6d8da 18%,#9a9c9e 34%,#cfd1d3 52%,#8c8e90 70%,#c9cbcd 86%,#8f9294);
  background-blend-mode:normal,overlay,normal;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -6px 14px rgba(0,0,0,.35),0 30px 60px -24px rgba(0,0,0,.95),0 0 0 1px rgba(198,161,91,.25)}
.plate span{max-width:62%;text-align:center;font-family:var(--display);font-size:clamp(.9rem,.8rem + .6vw,1.1rem);line-height:1.15;letter-spacing:.14em;color:#3f4143;
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.35);white-space:pre-line}
.photo{width:min(22rem,100%);aspect-ratio:1;object-fit:cover;border-radius:4px;margin:0 auto 1.4rem;display:block;background:var(--void-2);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.95),0 0 0 1px var(--line)}
.no{font-family:var(--display);font-size:clamp(1.9rem,1.4rem + 2vw,2.6rem);line-height:1;margin:0}
.no small{font-size:.5em;color:var(--faint);letter-spacing:.08em}
.sub{font-size:.8125rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin:.7rem 0 0}

/* The journey: a vertical timeline. Done is solid, now gently pulses, later is quiet. */
.tl{list-style:none;margin:0 0 2rem;padding:0;position:relative}
.tl li{position:relative;padding:0 0 1.7rem 2.2rem;min-height:3rem}
.tl li::before{content:"";position:absolute;left:.47rem;top:1.15rem;bottom:-.15rem;width:1px;background:var(--line-2)}
.tl li:last-child::before{display:none}
.tl li.done::before{background:var(--gold)}
.tl .dot{position:absolute;left:0;top:.3rem;width:1rem;height:1rem;border-radius:50%;border:1px solid var(--ghost);background:var(--void)}
.tl li.done .dot{background:var(--gold);border-color:var(--gold)}
.tl li.current .dot{background:var(--gold-lit);border-color:var(--gold-lit);animation:pulse 2.6s var(--ease-soft) infinite}
.tl .what{font-family:var(--display);font-size:1.3rem;line-height:1.2;margin:0}
.tl li.todo .what{color:var(--ghost)}
.tl .when{font-size:.875rem;color:var(--mute);margin:.2rem 0 0}
.tl .more{font-size:.9rem;color:var(--mute);margin:.5rem 0 0}
.tl .more a{color:var(--gold-lit)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,190,124,.5)}70%{box-shadow:0 0 0 .7rem rgba(224,190,124,0)}100%{box-shadow:0 0 0 0 rgba(224,190,124,0)}}

.notice{border:1px solid var(--line-2);border-left:2px solid var(--gold);padding:.9rem 1.1rem;margin:1.2rem 0;color:var(--mute);font-size:.95rem;background:var(--void-2)}
.notice b{color:var(--bone);font-weight:400}
footer.fine{margin-top:3rem;text-align:center;font-size:.8125rem;color:var(--faint)}
footer.fine a{color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media (max-width:420px){ .card{padding:1.1rem 1rem 1rem} .btn{width:100%} .row .btn{flex:1 1 100%} }

/* ── Facts laid out as rows ── */
.kv{margin:0 0 1rem;padding:0}
.kv div{display:flex;justify-content:space-between;gap:1.2rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.kv div:last-child{border-bottom:0}
.kv dt{color:var(--faint);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;padding-top:.15rem}
.kv dd{margin:0;text-align:right;color:var(--bone)}
.kv .locked::after{content:"from your order";display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost);margin-top:.15rem}

/* ── The twenty, as a strip: the one that is yours settles into place ── */
.strip{display:grid;grid-template-columns:repeat(10,1fr);gap:.4rem;margin:1.6rem auto;max-width:26rem}
.strip i{display:block;aspect-ratio:1;border:1px solid var(--line-2);border-radius:2px;position:relative;font-style:normal;font-size:.625rem;color:var(--ghost);display:grid;place-items:center;letter-spacing:.04em}
.strip i.sold{background:var(--line);color:var(--faint)}
.strip i.mine{border-color:var(--gold);color:var(--void);background:var(--gold);transform:scale(1);animation:settle 1.6s var(--ease) both}
@keyframes settle{0%{transform:translateY(-1.6rem) scale(1.5);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}

/* ── Banners: what is open on a piece ── */
.banner{border:1px solid var(--line-2);border-radius:4px;padding:.9rem 1.1rem;margin:0 0 1rem;background:var(--void-2);color:var(--mute);font-size:.95rem}
.banner b{color:var(--bone);font-weight:400}
.banner.warn{border-color:var(--gold);color:var(--bone)}
.banner.bad{border-color:var(--bad)}

/* ── The warranty, counted down in the server's time ──
   The seconds step once a second like a quartz hand; nothing sweeps. */
.dial{position:relative;width:min(21rem,100%);aspect-ratio:1;margin:0 auto 1.4rem;display:grid;place-items:center}
.dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dial .track{fill:none;stroke:var(--line-2);stroke-width:1.5}
.dial .used{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:butt}
.dial .tick{stroke:var(--ghost);stroke-width:1}
.dial .tick.hour{stroke:var(--faint);stroke-width:1.5}
.dial .face{position:relative;text-align:center;padding:0 1rem}
.dial .cap{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 .3rem}
.dial .days{font-family:var(--display);font-size:clamp(3.4rem,2.4rem + 5vw,5rem);line-height:1;margin:0;font-variant-numeric:tabular-nums}
.dial .days small{display:block;font-family:var(--body);font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-top:.35rem}
.dial .hms{display:flex;justify-content:center;gap:.35rem;margin:.9rem 0 0;font-variant-numeric:tabular-nums;font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);letter-spacing:.04em}
.dial .hms span{min-width:2ch;text-align:center}
.dial .hms .sep{min-width:0;color:var(--ghost)}
.dial .lab{display:flex;justify-content:center;gap:.35rem;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:.15rem}
.dial .lab span{min-width:2ch;text-align:center}
.dial .lab .sep{min-width:0;visibility:hidden}
.concluded{text-align:center;padding:1.6rem 0}
.concluded p{font-family:var(--display);font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);margin:0 0 1rem}

/* ── The chain ── */
.chain{list-style:none;margin:0;padding:0}
.chain li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line)}
.chain li:last-child{border-bottom:0}
.chain .who{font-family:var(--display);font-size:1.25rem}
.chain .yr{color:var(--mute);font-size:.9rem}
.chain li.mine .who{color:var(--gold-lit)}
.chain .you{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-left:.6rem}

/* ── The owner's own page ── */
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 0 2rem}
.bar .mark{margin:0;text-align:left}
.tabs{display:flex;gap:.5rem;margin:0 0 1.6rem;flex-wrap:wrap}
.tabs button{background:none;border:1px solid var(--line-2);color:var(--mute);border-radius:3px;padding:.5rem .9rem;min-height:2.75rem;font:inherit;cursor:pointer}
.tabs button[aria-pressed=true]{border-color:var(--gold);color:var(--gold-lit)}
.actions{display:grid;grid-template-columns:1fr;gap:.6rem}
@media (min-width:560px){.actions{grid-template-columns:1fr 1fr}}
.actions .btn{justify-content:flex-start;text-align:left}
dialog.sheet{background:var(--void-2);color:var(--bone);border:1px solid var(--line-2);border-radius:6px;padding:1.6rem 1.5rem;width:min(30rem,calc(100% - 2rem));max-height:90svh;overflow:auto}
dialog.sheet::backdrop{background:rgba(8,9,8,.78)}
dialog.sheet h2{margin-top:0}

/* ── The certificate and the receipt, as paper ── */
.paper{background:#F4F1EA;color:#1D1B18;padding:2.4rem 2rem;border:1px solid #D9D2C3;text-align:center;font-family:var(--display)}
.paper h1{font-size:clamp(1.8rem,1.4rem + 2vw,2.6rem);margin:.4rem 0 1rem}
.paper .small{font-family:var(--body);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:#6c665b}
.paper .big{font-size:clamp(2.4rem,2rem + 3vw,3.6rem);line-height:1;margin:1.2rem 0}
.paper p{font-family:var(--body);font-weight:300;color:#3a362f}
.paper table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-family:var(--body);font-size:.95rem;text-align:left}
.paper td{padding:.5rem 0;border-bottom:1px solid #D9D2C3;color:#1D1B18}
.paper td:last-child{text-align:right}
@media print{
  html,body{background:#fff !important}
  .noprint{display:none !important}
  main{padding:0}
  .paper{border:0;padding:0}
}

/* ── The registry's twenty ── */
.reg-grid{list-style:none;margin:0 auto 1.4rem;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;max-width:44rem}
@media (min-width:640px){.reg-grid{grid-template-columns:repeat(10,minmax(0,1fr))}}
.reg-grid button{width:100%;aspect-ratio:1;min-height:3.4rem;display:grid;place-items:center;align-content:center;gap:.15rem;border:1px solid var(--line-2);border-radius:3px;background:transparent;color:var(--bone);
  font:inherit;cursor:pointer;padding:.2rem;transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.reg-grid button b{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1}
.reg-grid button small{font-size:.5rem;letter-spacing:.1em;max-width:100%;overflow-wrap:anywhere;text-transform:uppercase;color:var(--faint);line-height:1.15;text-align:center}
.reg-grid button:hover{border-color:var(--gold)}
.reg-grid button[aria-pressed=true]{border-color:var(--gold);background:rgba(198,161,91,.09)}
.reg-grid .sold{background:linear-gradient(165deg,rgba(237,232,223,.04),transparent 72%);color:var(--mute);border-color:var(--line)}
.reg-grid .held small{color:var(--gold)}
.reg-grid .stolen{border-color:var(--bad)} .reg-grid .stolen small{color:var(--bad)}
.reg-grid .unavailable,.reg-grid .retired{color:var(--ghost);border-style:dashed}
.legend{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;font-size:.8125rem;color:var(--faint)}
.legend i{display:inline-block;width:.7rem;height:.7rem;border:1px solid var(--line-2);border-radius:2px;margin-right:.45rem;vertical-align:-.05em}
.legend .s i{background:var(--line)} .legend .h i{border-color:var(--gold)} .legend .x i{border-color:var(--bad)}

.big-code{font-size:clamp(1.8rem,1.4rem + 2vw,2.4rem);letter-spacing:.12em;margin:1rem 0;padding:1rem;border:1px solid var(--gold);border-radius:4px;text-align:center;user-select:all}

/* ══════════════════════════════════════════════════════════════════
   THE ATELIER (Oct 2026). One room, one signature, one accent.

   The signature is the ring: time drawn as a hairline, around the piece
   on its own page and around the warranty that keeps it. The room is one
   fixed layer: a warm light from above, a little grain, dust drifting in
   it (atelier.js). Every part of a page arrives once, rising into place,
   and its heading's gold rule draws itself after it. Gold is kept for
   what matters on a screen: the arc of cover used, the owner's place in
   the line, the one button that acts. Nothing loops but the ring, which
   turns once every four minutes, the way a seconds hand would if it were
   patient.
   ══════════════════════════════════════════════════════════════════ */
body{background:radial-gradient(90% 55% at 50% -8%,rgba(198,161,91,.09) 0%,rgba(198,161,91,0) 60%) fixed,radial-gradient(120% 70% at 50% 0%,#14110c 0%,var(--void) 62%) fixed,var(--void)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dust{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0}
main{position:relative;z-index:1}

/* Arrivals */
.js .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1s var(--ease) var(--d,0ms),transform 1.2s var(--ease) var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.card h2{position:relative;padding-bottom:.7rem;margin-bottom:1rem}
.card h2::after{content:"";position:absolute;left:0;bottom:0;width:2.6rem;height:1px;background:linear-gradient(90deg,var(--gold),rgba(198,161,91,.2));transform-origin:0 50%;
  transition:transform 1.3s var(--ease) calc(var(--d,0ms) + 260ms)}
.js .card.rv:not(.in) h2::after{transform:scaleX(0)}
.card{position:relative;padding:1.6rem 1.5rem 1.4rem;margin:0 0 1.1rem;border-color:#1f1c18;
  background:linear-gradient(180deg,rgba(20,19,15,.92),rgba(13,14,12,.92));
  box-shadow:0 1px 0 rgba(237,232,223,.03) inset,0 24px 60px -40px rgba(0,0,0,.9)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(198,161,91,.22),rgba(198,161,91,0) 32%,rgba(198,161,91,0) 70%,rgba(198,161,91,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}

/* The hero: the piece in its ring */
.hero{padding-top:.4rem}
.hero .eyebrow{text-align:center;margin-bottom:1.6rem}
.halo{position:relative;width:min(20rem,74vw);aspect-ratio:1;margin:0 auto 1.8rem;display:grid;place-items:center}
.halo .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:turn 240s linear infinite}
.halo .ring circle{fill:none;stroke:rgba(198,161,91,.38);stroke-width:.5;stroke-dasharray:610;stroke-dashoffset:610;animation:draw 2.6s var(--ease) .15s forwards}
.halo .ring line{stroke:var(--ghost);stroke-width:.7;opacity:0;animation:mark .6s var(--ease-soft) forwards;animation-delay:calc(.6s + var(--i) * 18ms)}
.halo .ring line.five{stroke:var(--gold);stroke-width:1.1}
.halo .plate,.halo .photo{width:74%;margin:0;border-radius:50%;position:relative;z-index:1}
.halo .photo{aspect-ratio:1;object-fit:cover}
.halo::after{content:"";position:absolute;inset:13%;border-radius:50%;box-shadow:0 0 80px 10px rgba(198,161,91,.07);pointer-events:none}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes mark{to{opacity:1}}
.hero .no{font-size:clamp(3rem,2.2rem + 4vw,4.6rem);letter-spacing:-.01em}
.hero .sub{letter-spacing:.34em;margin:.9rem 0 0}
.held{margin:1.3rem 0 0;font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.held span{color:var(--gold-lit);font-family:var(--display);font-size:1.15rem;letter-spacing:.08em;text-transform:none;font-style:italic;margin-right:.15rem}
.oneof{font-family:var(--display);font-style:italic;color:var(--faint);font-size:1.05rem;margin:.6rem 0 0}

/* The warranty, live */
.warranty .dial{width:min(22rem,100%)}
.dial .used{transition:stroke-dasharray 2.4s var(--ease)}
.dial .track{stroke:#2a2621}
.dial .days{text-shadow:0 0 40px rgba(198,161,91,.18)}
.life{margin:.4rem 0 .2rem}
.life .track{position:relative;height:2px;background:var(--line-2);border-radius:2px;margin:1.6rem .4rem .8rem}
.life .fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,rgba(198,161,91,.35),var(--gold));transform:scaleX(0);transform-origin:0 50%;transition:transform 2.2s var(--ease) .3s;border-radius:2px}
.life .now{position:absolute;top:50%;left:0;width:.8rem;height:.8rem;margin:-.4rem 0 0 -.4rem;border-radius:50%;background:var(--gold-lit);box-shadow:0 0 0 4px rgba(224,190,124,.14),0 0 18px rgba(224,190,124,.55);transition:left 2.2s var(--ease) .3s}
.life .marks{display:flex;justify-content:space-between;gap:1rem}
.life .marks span{display:grid;gap:.1rem}
.life .marks .r{text-align:right}
.life .marks b{font-weight:400;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.life .marks small{font-family:var(--display);font-size:1.05rem;color:var(--bone)}
.small{font-size:.875rem}

/* How you appear on the shop: the same card a visitor sees */
.oc-preview{position:relative;max-width:19.5rem;margin:1.2rem auto 1.4rem;padding:1.2rem 1.3rem 1.05rem;border:1px solid rgba(198,161,91,.32);border-radius:4px;
  background:linear-gradient(180deg,#14130f,#0d0e0c);box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.oc-preview .e{font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin:0 0 .7rem}
.oc-preview .h{font-family:var(--display);font-size:1.6rem;line-height:1.05;margin:0}
.oc-preview .h em{color:var(--gold-lit)}
.oc-preview .who{font-family:var(--display);font-size:1.15rem;letter-spacing:.08em;margin:.5rem 0 0}
.oc-preview .who.priv{font-style:italic;letter-spacing:0;color:var(--mute)}
.oc-preview .m{font-size:.8125rem;color:var(--mute);margin:.35rem 0 .9rem}
.oc-preview .f{font-size:.75rem;color:var(--faint);margin:0;padding-top:.75rem;border-top:1px solid;border-image:linear-gradient(90deg,var(--gold),rgba(198,161,91,0)) 1}
.switch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;padding:.95rem 0;border-top:1px solid var(--line);cursor:pointer;letter-spacing:0;color:var(--bone)}
.switch .t{display:grid;gap:.15rem}.switch .t b{font-weight:400;font-size:.98rem}.switch .t small{color:var(--faint);font-size:.8125rem}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .knob{flex:none;position:relative;width:2.9rem;height:1.6rem;border-radius:99px;border:1px solid var(--line-2);background:var(--void);transition:background .35s var(--ease-soft),border-color .35s var(--ease-soft)}
.switch .knob::after{content:"";position:absolute;top:.18rem;left:.2rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--faint);transition:transform .45s var(--ease),background .35s var(--ease-soft)}
.switch input:checked ~ .knob{background:rgba(198,161,91,.18);border-color:var(--gold)}
.switch input:checked ~ .knob::after{transform:translateX(1.25rem);background:var(--gold-lit)}
.switch input:focus-visible ~ .knob{outline:2px solid var(--gold);outline-offset:3px}
.switch input:disabled ~ .knob{opacity:.4}

/* Signing in: the sigil, and the six digits */
.sigil{width:5.4rem;height:5.4rem;margin:0 auto 1.4rem}
.sigil svg{width:100%;height:100%;overflow:visible}
.sigil circle,.sigil path{fill:none;stroke-linecap:butt}
.sigil .r1{stroke:rgba(198,161,91,.5);stroke-width:.8;stroke-dasharray:352;stroke-dashoffset:352;animation:draw 2.4s var(--ease) .1s forwards}
.sigil .r2{stroke:var(--line-2);stroke-width:.8;stroke-dasharray:277;stroke-dashoffset:277;animation:draw 2.4s var(--ease) .35s forwards}
.sigil .v{stroke:var(--bone);stroke-width:3;stroke-dasharray:90;stroke-dashoffset:90;animation:draw 1.6s var(--ease) .9s forwards}
#gate h1{margin-top:.2rem}
.otp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.75rem !important;letter-spacing:.85em;text-indent:.85em;text-align:center;min-height:3.8rem !important;
  background:linear-gradient(180deg,var(--void-2),#0b0c0a) !important;border-color:var(--line-2)}
.otp::placeholder{color:var(--ghost);letter-spacing:.85em}

/* Registering: three steps, two already done by the link */
.steps{list-style:none;display:flex;justify-content:center;gap:0;margin:0 auto 1.4rem;padding:0;counter-reset:s;max-width:24rem}
.steps li{flex:1;position:relative;text-align:center;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ghost);padding-top:1.4rem;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;top:0;left:50%;transform:translateX(-50%);width:1rem;height:1rem;border-radius:50%;border:1px solid var(--ghost);font-size:.5625rem;line-height:.95rem;letter-spacing:0;color:var(--ghost);background:var(--void)}
.steps li::after{content:"";position:absolute;top:.5rem;left:calc(50% + .7rem);right:calc(-50% + .7rem);height:1px;background:var(--line-2)}
.steps li:last-child::after{display:none}
.steps li.on{color:var(--mute)}.steps li.on::before{border-color:var(--gold);color:var(--void);background:var(--gold)}
.steps li.on::after{background:var(--gold)}

@media (max-width:420px){ .halo{width:min(17rem,78vw)} .hero .no{font-size:clamp(2.6rem,12vw,3.4rem)} }
@media (prefers-reduced-motion:reduce){
  .halo .ring,.halo .ring circle,.halo .ring line,.sigil *{animation:none !important;stroke-dashoffset:0 !important;opacity:1 !important}
  .js .rv{opacity:1;transform:none}
}
@media print{ .dust,body::after{display:none !important} .js .rv{opacity:1 !important;transform:none !important} }
.row.pair{justify-content:center;gap:1.4rem}
@media (max-width:480px){ .warranty .dial .face{padding:0 2.6rem} .warranty .dial .cap{font-size:.5625rem;letter-spacing:.16em} .warranty .dial .days{font-size:clamp(3rem,15vw,4rem)} }
@media (max-width:480px){ .warranty .dial .face{padding:0 2.6rem} .warranty .dial .cap{font-size:.5625rem;letter-spacing:.16em} .warranty .dial .days{font-size:clamp(3rem,15vw,4rem)} }

/* /claim: what registering opens, the details as they will be written, and the name arriving in ink. */
.opens{list-style:none;margin:1.3rem auto 1.7rem;padding:0;max-width:27rem;display:grid;gap:.5rem}
.opens li{position:relative;padding-left:1.15rem;font-size:.95rem;line-height:1.45;color:var(--mute)}
.opens li::before{content:"";position:absolute;left:0;top:.62em;width:.32rem;height:.32rem;border-radius:50%;background:var(--gold)}
.fs-h{font-family:var(--body);font-size:.75rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin:2.1rem 0 .3rem;line-height:1.4}
.fs-h .opt{letter-spacing:.14em;color:var(--ghost);margin-left:.4rem}
.me-card{border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:3px;background:var(--void-2);padding:1rem 1.1rem .4rem;margin:.8rem 0 0}
.me-card .me-n{font-family:var(--display);font-size:1.6rem;line-height:1.15;margin:0;color:var(--bone);overflow-wrap:anywhere}
.me-card .me-m{font-size:.875rem;color:var(--mute);margin:.35rem 0 0;overflow-wrap:anywhere}
.me-card .linkbtn{font-size:.875rem}
.inkname{font-family:var(--display);font-style:italic;font-size:clamp(1.9rem,7vw,2.7rem);line-height:1.2;color:var(--gold-lit);margin:.1rem 0 .5rem;overflow-wrap:anywhere}
.js .inkname{clip-path:inset(0 100% 0 0);animation:ink 1.9s var(--ease) .45s forwards}
@keyframes ink{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.js .inkname{clip-path:none;animation:none}}