/* Unaged Luxury, unagedluxury.com (2026-10-22, the jeweler's lamp pass). The plan and its reasons: site/DESIGN.md.
   One ground: ink. Every watch is a cutout floating in it, lit by a lamp (a warm pool behind, a specular streak across).
   No boxes: space, hairlines and type carry the hierarchy. Type: Montserrat (display, nav, buttons) + Inter (text, tabular numbers). */
@font-face{font-family:Montserrat;font-style:normal;font-weight:300 800;font-display:swap;src:url(/s/montserrat-latin.6438d7b8ea.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:300 700;font-display:swap;src:url(/s/inter-latin.c940764593.woff2) format("woff2")}
/* The fallbacks wear the web fonts' metrics (Arial sized and lined to Montserrat 600 and Inter 400, measured from the font files with
   letter-frequency weighting), so the swap when the woff2 arrives moves nothing: on a 4G phone the fonts land after the first paint, and
   this is what made the shop shift (CLS 0.26) and the value page shift (0.05). Android has no Arial and simply gets its sans-serif. */
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica Neue'),local('Helvetica');size-adjust:118.27%;ascent-override:81.85%;descent-override:21.22%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica Neue'),local('Helvetica');size-adjust:107.48%;ascent-override:90.14%;descent-override:22.44%;line-gap-override:0%}
:root{
  --ink:#0a0a0a;--black:#000;--carbon:#161616;--hair:rgba(255,255,255,.14);--hair-2:rgba(255,255,255,.08);
  --white:#fff;--silver:#cfcfcf;--ash:#8c8c8c;--studio-a:#ececec;--studio-b:#cdcdcd;--studio-ink:#555;
  --lamp:255,244,226;
  --display:'Montserrat','Montserrat Fallback','Helvetica Neue',Arial,sans-serif;--text:'Inter','Inter Fallback','Helvetica Neue',Arial,sans-serif;
  --t-2:.72rem;--t-1:.84rem;--t0:1rem;--t1:1.22rem;--t2:1.5rem;--t3:1.9rem;--t4:2.4rem;--t5:3rem;--t6:3.8rem;
  --gut:clamp(20px,5vw,96px);--max:1360px;--ease:cubic-bezier(.2,.7,.1,1);--hd:76px;--sec:clamp(88px,11vw,168px);
  --d-touch:.3s;--d-move:.6s;--d-settle:.8s;--d-inst:1.3s;--d-draw:1.8s;--d-pass:2.8s;   /* the motion tokens: a touch, a move, a settle, an instrument, a line drawing, the lamp pass */
  --sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px);   /* the phone's home indicator and notch (viewport-fit=cover) */
}
@view-transition{navigation:auto}
/* tile to piece: the named pairs (the lamp figure p-<slug>, so pool, cutout and streak fly together; the price pr-<slug>) move .62s on
   the house ease and cross-fade .3s without an isolating group; the root cross-fades .36s (its rule is more specific and comes last) */
::view-transition-group(*){animation-duration:.62s;animation-timing-function:var(--ease)}
::view-transition-image-pair(*){isolation:auto}
::view-transition-old(*),::view-transition-new(*){animation-duration:.3s;animation-timing-function:var(--ease)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.36s;animation-timing-function:var(--ease)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink);scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--ink);color:var(--silver);font:400 18px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
main{overflow-x:clip}   /* the lamp pools glow past the tiles; clip (not hidden) keeps sticky and keeps the page its own width */
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin:0;color:var(--white)}
p{margin:0 0 1em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:10px;z-index:99;background:var(--white);color:var(--ink);padding:10px 16px;font:500 var(--t-1)/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--white);outline-offset:4px}
.num,.tile-price,.piece-price,.lg-val,.lg-rank,.idx-big-n,.val-big,.vault-big,.tbl td,.hours td,.ch-y,.ch-v,.odo{font-variant-numeric:tabular-nums}
.fine{font-size:var(--t-1);color:var(--ash);margin:12px 0 0;max-width:66ch;line-height:1.6}
.fine a{color:var(--silver)}
.lede{font-weight:300;font-size:clamp(var(--t1),1.6vw,1.35rem);line-height:1.5;max-width:56ch;color:var(--silver)}
.empty{font-weight:300;font-size:var(--t1);max-width:40ch}

/* ---------- buttons: outlined, square, tracked (the one place type is tracked besides the nav) ----------
   The hover language: a filled button's white rises from its baseline (::before on a transform) and the type turns to ink a beat
   later; an outlined one brightens its hairline. Nothing moves under the cursor: the magnetic buttons are retired. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;border:1px solid var(--white);background:transparent;color:var(--white);
  font:500 var(--t-1)/1 var(--display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:color var(--d-move) var(--ease) .12s,border-color var(--d-touch) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--white);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{color:var(--ink)}
.btn-line{border-color:var(--hair);color:var(--silver)}.btn-line::before{display:none}.btn-line:hover{border-color:var(--white);color:var(--white)}
.btn-s{min-height:44px;padding:0 20px;font-size:var(--t-2)}
.btn-danger:hover{background:var(--carbon);color:var(--white);border-color:var(--white)}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
/* a 44 px hit box around the 13 px line without moving the layout (the negative margin gives the padding back) */
.more{display:inline-block;font:500 var(--t-2)/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--silver);text-decoration:none;padding:16px 0;margin:-8px 0;border-bottom:1px solid transparent;transition:border-color .3s,color .3s;white-space:nowrap}
.more:hover{color:var(--white);border-bottom-color:var(--white)}

/* ---------- header: the mark, the wordmark, four words, the vault, the menu ----------
   One face for the name (T4): the wordmark is a static raster of the sign's two words (site/_src/wordmark-white.png, set from the
   sign at build time). The Typodermic desktop EULA permits images of set text and forbids shipping the font or a per-glyph atlas,
   so nothing of the font reaches the browser. The monogram stays as the mark, the favicon and the touch icon. */
.hd{position:fixed;inset:0 0 auto 0;z-index:30;height:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut);color:var(--white);
  background:linear-gradient(rgba(10,10,10,.7),rgba(10,10,10,0));transition:background .5s var(--ease)}
.hd.scrolled,body.menu-open .hd{background:rgba(10,10,10,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hd-mark{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--white)}
.hd-mark>img:first-child{width:26px;height:30px;object-fit:contain}
.hd-wm{height:11px;width:auto;display:block}
.hd-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);font:500 var(--t-2)/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.hd-nav a{text-decoration:none;padding:12px 0;position:relative;color:var(--silver);transition:color .3s}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.hd-nav a:hover,.hd-nav a[aria-current]{color:var(--white)}
.hd-nav a:hover::after,.hd-nav a[aria-current]::after{transform:scaleX(1)}
.hd-r{display:flex;align-items:center;gap:14px}
.hd-vault{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:1px solid var(--hair);font:500 var(--t-2)/1 var(--display);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:border-color .3s}
.hd-vault:hover{border-color:var(--white)}
.hd-shop{display:none}   /* the phone's Shop link beside the burger (T9); site.js reads Collection once signed in */
.hd-menu{width:44px;height:44px;border:0;background:none;padding:0;position:relative;cursor:pointer}
.hd-menu i{position:absolute;left:11px;right:11px;height:1px;background:var(--white);transition:transform .4s var(--ease),top .4s var(--ease)}
.hd-menu i:first-of-type{top:18px}.hd-menu i:last-of-type{top:26px}
body.menu-open .hd-menu i:first-of-type{top:22px;transform:rotate(45deg)}body.menu-open .hd-menu i:last-of-type{top:22px;transform:rotate(-45deg)}
/* the menu overlay (T9): opaque ink and always in the DOM. Closed it is clipped to nothing under the header, invisible and inert;
   open (.is-open, set by site.js) it unclips downward like the drawer, a hairline draws under the header and the links settle in,
   40 ms apart. Closing takes .4 s with no stagger. */
.menu{position:fixed;inset:0;z-index:25;background:var(--ink);overflow:auto;padding:calc(var(--hd) + 28px) var(--gut) calc(60px + var(--sab));
  clip-path:inset(var(--hd) 0 100% 0);visibility:hidden;transition:clip-path .4s var(--ease),visibility 0s linear .4s}
.menu.is-open{clip-path:inset(var(--hd) 0 0 0);visibility:visible;transition:clip-path .55s var(--ease),visibility 0s}
.menu::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:var(--hd);height:1px;background:var(--hair);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu.is-open::before{transform:scaleX(1);transition:transform .7s var(--ease) .08s}
body.menu-open{overflow:hidden}
.menu-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px clamp(32px,6vw,120px);align-items:end;min-height:calc(100vh - var(--hd) - 88px - var(--sab))}
.menu-main,.menu-sec{list-style:none;margin:0;padding:0}
.menu-main a{display:block;text-decoration:none;color:var(--silver);padding:10px 0;transition:color .3s}
.menu-t{display:block;font:300 clamp(1.9rem,4.2vw,3.4rem)/1.1 var(--display);letter-spacing:-.025em;transition:color .3s}
.menu-d{display:block;margin-top:4px;font-size:var(--t-1);color:var(--ash);line-height:1.5}
.menu-main a:hover .menu-t,.menu-main a[aria-current] .menu-t{color:var(--white)}
.menu-sec{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:28px;padding-top:12px;border-top:1px solid var(--hair-2)}
.menu-sec a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--silver);font-size:var(--t0);transition:color .3s}
.menu-sec a:hover,.menu-sec a[aria-current]{color:var(--white)}
.menu-side{display:flex;flex-direction:column;font-size:var(--t-1);color:var(--ash);line-height:1.7}
.menu-wm{align-self:flex-start;height:12px;width:auto;margin-bottom:28px;opacity:.92}   /* flex-start: a stretched flex item would take the column's width */
.menu-acts{display:none}
.menu-k{margin:0 0 4px;font:500 var(--t-1)/1.4 var(--text);color:var(--ash)}
.menu-p{margin:0 0 18px;color:var(--silver)}
.menu-rows a{display:block;padding:10px 0;color:var(--silver);text-decoration:none}   /* each contact line is its own 44 px target */
.menu-rows a:hover{color:var(--white);text-decoration:underline}
.menu-main li,.menu-sec li,.menu-side>*{opacity:0;transform:translateY(14px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.menu.is-open .menu-main li,.menu.is-open .menu-sec li,.menu.is-open .menu-side>*{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.12s + var(--i,9) * 40ms)}
.menu-main li:nth-child(1){--i:1}.menu-main li:nth-child(2){--i:2}.menu-main li:nth-child(3){--i:3}.menu-main li:nth-child(4){--i:4}
.menu-sec li:nth-child(1){--i:5}.menu-sec li:nth-child(2){--i:6}.menu-sec li:nth-child(3){--i:7}.menu-sec li:nth-child(4){--i:8}.menu-sec li:nth-child(5){--i:9}
.menu-side>*{--i:6}
body.menu-open .cookie{display:none}   /* the notice (z 40) sat on the open menu's contact links (z 25) on a phone */
@media (max-width:900px){.hd-nav{display:none}.menu-in{grid-template-columns:minmax(0,1fr);align-items:start;gap:24px;min-height:0}
  /* the side column leads on a phone: WhatsApp and Call as 50 px outlined buttons, then the address and hours, then the email row */
  .menu-side{order:-1}.menu-side>*{--i:0}.menu-wm,.menu-k{display:none}
  .menu-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
  .menu-act{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 14px;border:1px solid var(--white);color:var(--white);text-decoration:none;font:500 var(--t-1)/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
  .menu-p{margin-bottom:12px}
  .menu-rows a[href^="https://wa.me"],.menu-rows a[href^="tel:"]{display:none}
  .menu-rows a{display:flex;align-items:center;min-height:40px;padding:0}
  .menu-t{font-size:clamp(1.6rem,7vw,2.2rem)}.menu-main a{padding:7px 0}.menu-sec{margin-top:20px}}
@media (max-width:480px){.hd-vault{display:none}.hd-mark>img:first-child{width:30px;height:34px}.hd-wm{height:9px}
  .hd-shop{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font:500 var(--t-2)/1 var(--display);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--silver);transition:color .3s}
  .hd-shop:hover,.hd-shop[aria-current]{color:var(--white)}}
@media (max-width:359px){.hd-shop{display:none}}

/* ---------- hero: the wall. The showroom's sign on black board-formed concrete, under one lamp (pass 3) ----------
   The still (site/_src/wall.py) is a 16:9 frame for aspect >= 1 and a 9:16 frame below, shown object-fit: cover from a
   box exactly one viewport tall, so the sign is centred on every screen. The copy sits under the sign: the sign's bottom
   edge is at .500 of the landscape frame and .407 of the portrait one, and under cover the frame on screen is
   max(100svh, width / aspect) tall and centred. wall.js lights the same frame live on the canvas above the still. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:var(--black);color:var(--white);text-align:center}
.hero-pic{position:absolute;top:0;left:0;width:100%;height:100svh}
.hero-pic picture,.hero-img,.wall{position:absolute;inset:0;width:100%;height:100%}
.hero-img{object-fit:cover;object-position:50% 50%}
.wall{opacity:0;transition:opacity 1.1s var(--ease)}
.wall.on{opacity:1}
.hero-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 36%)}
.hero-copy{--ref-h:max(100svh,56.25vw);--sign-b:.500;position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:calc(50svh + (var(--sign-b) - .5) * var(--ref-h) + clamp(30px,4.6vh,54px)) var(--gut) clamp(40px,7vh,88px)}
@media (max-aspect-ratio:1/1){.hero-copy{--ref-h:max(100svh,177.78vw);--sign-b:.407}}
/* 2026-11-03: narrower than 9:20 (a 320 x 800 phone) a full-height cover crops the 9:16 frame past the sign's own edges (the frame on
   screen is only .711 of its width; the sign is .72). There the wall box is 9:20 tall instead (222.22vw), so the whole sign shows with
   room each side; the hero below it is the same black, and the copy is placed from the same box. */
@media (max-aspect-ratio:9/20){.hero-pic{height:222.22vw}.hero-copy{--ref-h:222.22vw;padding-top:calc(111.11vw + (var(--sign-b) - .5) * var(--ref-h) + clamp(30px,4.6vh,54px))}
  .hero-pic::after{background:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 16%,rgba(0,0,0,0) 42%)}}
/* his line, in the light register (Montserrat 300, Daniel 10/22), then one button and one text link: the sign carries the weight */
.hero-h{font-weight:300;font-size:clamp(1.6rem,3.5vw,3.2rem);line-height:1.1;letter-spacing:-.02em;max-width:26ch;margin:0 auto 28px}
.hero-h .ln{display:block}
.hero-b{display:flex;flex-wrap:wrap;gap:16px 36px;justify-content:center;align-items:center}
.hero-l{position:relative;display:inline-block;font:400 var(--t-1)/1.3 var(--text);color:var(--silver);text-decoration:none;padding:12px 0;transition:color .3s}   /* a 44 px target; the hairline sits under the words */
.hero-l::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--hair);transition:background .3s}
.hero-l:hover{color:var(--white)}.hero-l:hover::after{background:var(--white)}
@media (max-width:640px){.hero-copy{padding-bottom:44px}.hero-b{flex-direction:column;gap:10px}.hero-b .btn{width:100%}}

/* ---------- sections: space and a hairline, never a box ---------- */
.feat,.jr-strip,.idx,.shop,.piece,.val,.market,.indexpg,.svc,.journal,.post,.edu,.guide,.contact,.legal,.vault,.vault-in,.missing,.also,.val-pulse,.ph{max-width:var(--max);margin:0 auto;padding:var(--sec) var(--gut)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2,.val-head h1{font-size:clamp(var(--t3),3.4vw,var(--t5));max-width:22ch}
.sec-head .fine{margin:0}
.val-head{margin-bottom:clamp(40px,6vw,80px)}
.val-head h1{font-size:clamp(var(--t4),4.8vw,var(--t6));letter-spacing:-.035em;margin-bottom:18px}
.val-head p{font-weight:300;font-size:clamp(var(--t1),1.6vw,1.35rem);max-width:54ch;color:var(--silver);margin:0}
/* the vault drawer: a section announces itself once when it comes into view: its hairline draws (.9s) and its head rises 12px into
   place (.8s, a tenth after). Whatever is on the first screen is simply there (site.js adds .in and .done at once; .done ends the
   transitions, so nothing animates at 0ms on /market or /value). No clip: a section never shows a cut edge. */
.js .reveal{position:relative}
.js .reveal::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--hair);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.js .reveal.in::before{transform:scaleX(1)}
.js .reveal .sec-head,.js .reveal .idx-head,.js .reveal>h2,.js .reveal .val-tease-in>h2,.js .reveal .val-tease-in>p{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}
.js .reveal.in .sec-head,.js .reveal.in .idx-head,.js .reveal.in>h2,.js .reveal.in .val-tease-in>h2,.js .reveal.in .val-tease-in>p{opacity:1;transform:none}
.js .reveal.done::before,.js .reveal.done .sec-head,.js .reveal.done .idx-head,.js .reveal.done>h2,.js .reveal.done .val-tease-in>h2,.js .reveal.done .val-tease-in>p{transition:none}
.js .idx.reveal::before,.js .feat.reveal::before{left:var(--gut);right:var(--gut)}
.js .ph.reveal::before,.js .also.reveal::before,.js .val-pulse.reveal::before,.js .vault-sec.reveal::before,.js .cta-band.reveal::before,.js div.reveal::before,.js ol.reveal::before,.js .faq.reveal::before,.js .idx-table.reveal::before,.js .idx-how.reveal::before{left:0;right:0}

/* ---------- the lamp: a cutout floating in the dark ----------
   THE MOTION SYSTEM, one law: one lamp. The light on the wall sign is the light on every watch: a pool behind it, a streak across it,
   a lean toward the light; steered by the pointer on desktop and by one fixed point on the screen on a phone (site.js). --lx/--ly
   (0 to 100: where the light sits on the figure), --sx (0 to 1: where the streak is) and --tx/--ty (the tilt's slower copy of
   --lx/--ly) are UNITLESS numbers, and everything they drive is a transform: the pool slides (translate), the band slides under the
   watch's own alpha (translate), the watch leans (rotate about the hands pivot, 50% 42%, never the figure's centre, clamped to 4 and
   3 degrees). A moving lamp never repaints a gradient. Nothing bounces, nothing snaps, no spring under a cursor: one ease (--ease; power2.out
   in GSAP) and the durations in :root (--d-touch .3, --d-move .6, --d-settle .8, --d-inst 1.3, --d-draw 1.8, --d-pass 2.8). Things
   that scroll into view (the reveals, the charts, the counters) fire once. The only ambient motion is the lamp (and the marquee until
   it retires). The counter is reserved for the instruments. */
.lamp{position:relative;margin:0;aspect-ratio:1;overflow:visible;perspective:1400px;--lx:50;--ly:42;--sx:.1;--tx:50;--ty:42}
.lamp-pool{position:absolute;left:-20%;top:-20%;width:140%;height:140%;pointer-events:none;opacity:.8;transition:opacity .7s var(--ease);
  background:radial-gradient(circle at 50% 50%,rgba(var(--lamp),.18) 0,rgba(var(--lamp),.07) 24%,rgba(var(--lamp),0) 52%);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);mask-image:radial-gradient(circle,#000 30%,transparent 68%);   /* the vignette keeps the pool's box edge invisible wherever the lamp moves */
  transform:translate3d(calc((var(--lx) - 50) / 1.4 * 1%),calc((var(--ly) - 50) / 1.4 * 1%),0)}   /* 1.4: the pool is 140% of the figure, and translate is a share of the pool's own box */
.lamp.lit .lamp-pool{will-change:transform}
.lamp-obj{position:absolute;inset:0;transform-origin:50% 42%;transform:rotateY(clamp(-4deg,calc((var(--tx) - 50) / 50 * 4deg),4deg)) rotateX(clamp(-3deg,calc((var(--ty) - 50) / 50 * -3deg),3deg));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 86%,transparent 100%)}
  /* stops 8/86 (was 7/93): at true scale with the pivot at 42% (site/truescale.py) the AP and Patek bracelets end at 86-91% of the box and the Rolex
     41 mm bracelets run past it; the deepest case bottom is at 68%, so the fade never touches a case and every end inside the box dissolves */
.cut{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease)}
.lamp-streak{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);mix-blend-mode:screen;
  -webkit-mask:var(--cut) center/contain no-repeat;mask:var(--cut) center/contain no-repeat}
.lamp-band{position:absolute;top:0;bottom:0;left:-80%;width:260%;
  background:linear-gradient(112deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.1) 55%,rgba(255,255,255,0) 62%);
  transform:translate3d(calc((var(--sx) - .5) * -61.5%),0,0)}   /* the same travel as background-position 0 to 100% on a 260% band: 160% of the figure over the band's 260% */
.lamp.lit .lamp-streak{opacity:1}
.lamp.lit .lamp-band{will-change:transform}
.lamp-flat .lamp-obj{-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 42%,transparent 78%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 42%,transparent 78%)}
.lamp-flat img{width:100%;height:100%;object-fit:cover}
.tile-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.tile-empty span{font:500 var(--t-1)/1 var(--display);letter-spacing:.2em;color:var(--ash)}
@media (pointer:fine){.tile-a:hover .lamp-pool{opacity:1}.tile-a:hover .cut{transform:scale(1.03)}}

/* ---------- the collection: three objects to a row, one to a phone ---------- */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(44px,5vw,72px) clamp(24px,3.4vw,56px)}
.tile-a{display:block;text-decoration:none;color:inherit}
/* the caption: brand, then model and reference, then the dial line, with the price in a light weight on the right across those three
   rows; a status line sits under the dial line only when it is news (in stock). The title's hover is a hairline drawn from the left. */
.tile-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;margin-top:22px;align-items:start}
.tile-brand{grid-column:1;margin:0;font-size:var(--t-1);color:var(--ash)}
.tile-cap h2,.tile-cap h3{font:500 var(--t0)/1.3 var(--display);letter-spacing:-.01em;grid-column:1;justify-self:start;position:relative}
.tile-cap h2::after,.tile-cap h3::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tile-sub{grid-column:1;margin:0;font-size:var(--t-1);color:var(--ash);line-height:1.5}
.tile-price{grid-column:2;grid-row:1/span 3;margin:0;color:var(--white);font:300 1.3rem/1 var(--text);letter-spacing:-.02em;padding-top:2px;text-align:right;white-space:nowrap}
.tile-st{grid-column:1;grid-row:4;margin:0;font-size:var(--t-1);color:var(--silver);white-space:nowrap}
@media (pointer:fine){.tile-a:hover h2::after,.tile-a:hover h3::after{transform:scaleX(1)}}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a phone: two to a row by default (Daniel, 10/22: the shop was 55 screens tall one-up), the caption stacked under the watch; the one-watch
   lamp view is the shop's lens-1, one tap away and remembered (site.js) */
@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 14px}
  .tile{max-width:none;margin:0;width:auto}
  .tile-cap{grid-template-columns:minmax(0,1fr);gap:2px 0;margin-top:14px}
  .tile-price,.tile-st{grid-column:1;grid-row:auto;text-align:left}
  .tile-price{margin-top:6px;font-size:1.12rem}
  .shop.lens-1 .grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .shop.lens-1 .tile{max-width:440px;margin:0 auto;width:100%}
}

/* ---------- the odometer: digits roll in once ---------- */
.odo{display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap}
.odo-c,.odo-d{display:inline-block;line-height:1}
.odo-d{height:1em;overflow:hidden;vertical-align:baseline}
.odo-s{display:block;transition:transform var(--d-inst) cubic-bezier(.2,.7,.1,1)}
.odo-s.settle{transition:transform .5s cubic-bezier(.3,1.4,.4,1)}   /* the instrument's one beat: after the roll, the leftmost digit clicks a tenth of a step past the figure and springs back (data-settle: the Index number and the estimate only) */
.odo-s span{display:block;height:1em;line-height:1}

/* ---------- the index: one number, one line ---------- */
.idx-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;margin-bottom:clamp(28px,4vw,48px)}
.idx-head h2{font-size:clamp(var(--t3),3.4vw,var(--t5));max-width:none}
.idx-base{margin:0;font-size:var(--t-1);color:var(--ash)}
.idx-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(28px,5vw,96px);align-items:end}
.idx-n{display:flex;flex-direction:column;gap:8px}
.idx-big-n{font:300 clamp(5rem,11vw,9.5rem)/1 var(--text);letter-spacing:-.05em;color:var(--white)}
.idx-when{font-size:var(--t0);color:var(--silver)}
.idx-delta{font-size:var(--t-1);color:var(--ash);font-variant-numeric:tabular-nums}
.idx-method{margin:28px 0 0;max-width:70ch;font-size:var(--t-1);color:var(--ash);line-height:1.65}
.idx-links{display:flex;flex-wrap:wrap;gap:8px 32px;margin:22px 0 0}
.idx-big .idx-panel{grid-template-columns:minmax(0,1fr);align-items:start}
.idx-big .idx-n{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.idx-cad{font-size:var(--t-1);color:var(--ash)}
/* the chart's box is 720x300 (720x340 on /index) and the CSS aspect matches the viewBox exactly: the SVG is drawn with
   preserveAspectRatio="none", so any other aspect would stretch the type. Every label sits inside the plot (render.js chart()). */
.chart{width:100%;height:auto;aspect-ratio:720/300;overflow:visible;font-family:var(--text)}
.idx-big .chart{aspect-ratio:720/340}
.ch-line{fill:none;stroke:var(--white);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.js .ch-line{stroke-dasharray:1;stroke-dashoffset:1}
.js .chart.drawn .ch-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease)}
.ch-base{stroke:var(--hair);stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.ch-dot{fill:var(--ink);stroke:var(--white);stroke-width:1.4;vector-effect:non-scaling-stroke}
.ch-last,.ch-pick{fill:var(--white)}
.ch-thin{stroke-dasharray:2 2.5}   /* a year with limited data: hollow and dashed, never interpolated */
/* after a lookup (tools.js adds .step) the dots step in behind the drawing line, .22s apart */
.js .chart.step .ch-dot{opacity:0;transition:opacity .3s var(--ease)}
.js .chart.step.drawn .ch-dot{opacity:1;transition-delay:calc(.4s + var(--i,0) * .22s)}
.ch-x,.ch-y,.ch-v{fill:var(--ash);font-size:11px;letter-spacing:.04em}
.ch-now{fill:var(--white)}
.ch-mark line{stroke:var(--silver);stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.ch-mark circle{fill:var(--ink);stroke:var(--white);stroke-width:1.6;vector-effect:non-scaling-stroke}
.ch-mark text{fill:var(--white);font-size:11px;letter-spacing:.04em}
/* readable on a phone: the type is set in viewBox units, so 11 rendered at 6px on a 350px chart; 14 units under 900px and 22 under
   600px keep it between 10.5 and 13px wherever the chart is narrower than its box */
@media (max-width:900px){.ch-x,.ch-y,.ch-v,.ch-mark text{font-size:14px}}
@media (max-width:600px){.ch-x,.ch-y,.ch-v,.ch-mark text{font-size:24px}.ch-dot{stroke-width:2.2}.ch-mark circle{stroke-width:2.4}.ch-line{stroke-width:1.8}}
.indexpg .idx,.market .idx{padding-left:0;padding-right:0}   /* nested in a padded main: one gutter, not two (the chart was 310px wide on a 390 phone) */
.idx-table table,.tbl{width:100%;border-collapse:collapse;font-size:var(--t-1)}
.idx-table th,.idx-table td,.tbl th,.tbl td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--hair-2);vertical-align:top}
.idx-table thead th,.tbl thead th{font-weight:400;color:var(--ash)}
.idx-table tbody th,.tbl tbody th{font-weight:500;color:var(--white);font-variant-numeric:tabular-nums}
.idx-table,.idx-how{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(48px,6vw,88px)}
.idx-table h2,.idx-how h2{font-size:var(--t2);margin-bottom:18px}
.idx-table{max-width:720px}
.idx-how p{max-width:66ch}
.cite{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--hair-2);font-size:var(--t-1)}
.cite-l{color:var(--ash)}
.cite-t{color:var(--silver);flex:1 1 300px;min-width:0;overflow-wrap:anywhere}
.cite-b{background:none;border:0;padding:10px 0;min-height:44px;cursor:pointer;color:var(--white);text-decoration:underline;text-underline-offset:.2em;font-size:var(--t-1)}
.cite-b.did{color:var(--silver)}
/* the citation block: three formats as tabs (styled like .more, no boxes), one Copy and one Share per format, the methodology link */
.cite2{margin:26px 0 0;padding:14px 0 0;border-top:1px solid var(--hair-2);font-size:var(--t-1)}
.cite2-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px}
.cite2-l{margin:0;color:var(--ash)}
.cite2-tabs{display:flex;flex-wrap:wrap;gap:0 22px}
.cite2-tab{background:none;border:0;border-bottom:1px solid transparent;padding:12px 0;min-height:44px;cursor:pointer;color:var(--ash);font:500 var(--t-2)/1 var(--display);letter-spacing:.16em;text-transform:uppercase;transition:color .3s,border-color .3s}
.cite2-tab:hover{color:var(--white)}
.cite2-tab[aria-selected=true]{color:var(--white);border-bottom-color:var(--white)}
.cite2-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:4px}
.cite2-p[hidden]{display:none}
.no-js .cite2-p[hidden]{display:flex}   /* without JS every format shows */
.cite2-b{display:flex;gap:0 18px;white-space:nowrap}
.cite2-m{margin:6px 0 0}
.cite2-m a{color:var(--silver)}
.no-share [data-share]{display:none}   /* neither navigator.share nor the clipboard: the button has nothing to do */
/* the badge and its embed snippet, wrapped in a link to the page it quotes */
.badge-embed{margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--hair-2)}
.badge-embed>a{display:inline-block}
.badge-embed img{width:360px;max-width:100%;height:auto}
.badge-embed figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:8px;font-size:var(--t-1)}
.badge-embed .cite-t{font-size:var(--t-2);color:var(--ash)}
@media (max-width:860px){.idx-panel{grid-template-columns:minmax(0,1fr)}}

/* ---------- forms: a line under the words, never a box ---------- */
input,select,textarea{display:block;width:100%;min-height:52px;padding:12px 0;background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0;color:var(--white);font-size:var(--t1);-webkit-appearance:none;appearance:none;transition:border-color .3s}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
input::placeholder,textarea::placeholder{color:#5e5e5e}
textarea{min-height:120px;resize:vertical;line-height:1.5}
select{background-image:linear-gradient(45deg,transparent 50%,var(--silver) 50%),linear-gradient(135deg,var(--silver) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 6px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:28px}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--white);box-shadow:0 1px 0 var(--white)}
label{display:block;font-size:var(--t-1);color:var(--ash);position:relative;line-height:1.5}
label>input,label>select,label>textarea{margin-top:2px}
label>small{display:block;margin-top:8px;font-size:var(--t-1);line-height:1.5;color:var(--ash)}
input[type=radio],input[type=checkbox]{width:auto;min-height:0;display:inline-block;margin:0 10px 0 0;-webkit-appearance:auto;appearance:auto;accent-color:#fff}
.val-tease{border-top:1px solid var(--hair-2)}
.val-tease-in{max-width:var(--max);margin:0 auto;padding:var(--sec) var(--gut)}
.val-tease h2{font-size:clamp(var(--t4),4.4vw,var(--t6));letter-spacing:-.035em;margin-bottom:16px}
.val-tease p{max-width:52ch;font-weight:300;font-size:clamp(var(--t1),1.6vw,1.35rem);margin-bottom:34px}
.val-f{display:flex;gap:18px;max-width:680px;flex-wrap:wrap;align-items:flex-end}
.val-f input{flex:1 1 280px;min-width:0;font-size:var(--t2)}
.val-form,.tool{max-width:880px;padding:0;background:none;border:0}
.val-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,.8fr);gap:28px;margin-bottom:26px}
.tool-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:end}
.val-set{border:0;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:10px 32px}
.val-set legend{font-size:var(--t-1);color:var(--ash);padding:0;margin-bottom:10px}
.val-set label{display:inline-flex;align-items:center;font-size:var(--t0);color:var(--silver);min-height:32px;cursor:pointer}
.val-go{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.val-err{margin:0;font-size:var(--t-1);color:var(--white)}
.val-err:empty{display:none}
.sug{position:absolute;left:0;right:0;top:100%;z-index:10;margin:0;padding:6px 0;list-style:none;background:var(--carbon);border:1px solid var(--hair);max-height:300px;overflow:auto;font-size:var(--t0);line-height:1.3;color:var(--silver)}
.sug li{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.sug li span{color:var(--ash);font-size:var(--t-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sug li[aria-selected=true],.sug li:hover{background:var(--ink);color:var(--white)}
@media (max-width:600px){.sug li{flex-wrap:wrap;gap:2px 12px}.sug li span{white-space:normal;flex:1 1 100%}}
/* the value page answers first: the reference as the h1, the configuration line, the figure, its basis and the law; then the actions,
   the year curve, the history, the citation; the form follows under "Refine". After a lookup the result settles like an instrument
   (tools.js adds .settle: the hairline draws, the digits roll, the rest arrives in order). */
.val .crumbs{margin-bottom:18px}
.val-head-r{margin-bottom:0}
.val-head-r h1{margin-bottom:0}
.val-r{position:relative;max-width:880px;border-top:1px solid var(--hair);padding-top:clamp(22px,3vw,36px);margin-top:clamp(22px,3vw,36px)}
.val-form+.val-r{margin-top:clamp(40px,6vw,80px)}
.js .val-r::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--white);transform:scaleX(0);transform-origin:left}
.js .val-r.settle::before{transform:scaleX(1);transition:transform .9s var(--ease)}
.val-r-head{margin-bottom:12px}
.val-ref{margin:0 0 6px;font:600 clamp(var(--t1),2.4vw,var(--t2))/1.2 var(--display);letter-spacing:-.02em;color:var(--white)}
.val-sub,.val-cfg{margin:0;color:var(--ash);font-size:var(--t-1)}
.val-chg{display:inline-block;margin-left:14px;padding:10px 0;color:var(--silver);text-decoration:underline;text-underline-offset:.2em}
.val-chg:hover{color:var(--white)}
.val-n{display:flex;flex-direction:column;gap:8px;margin:14px 0 30px}
.val-big{font:300 clamp(3.4rem,8.5vw,6.6rem)/1 var(--text);letter-spacing:-.05em;color:var(--white)}
/* the wait state: a hairline that draws and redraws under where the number will land, never grey text */
.val-wait{display:block;position:relative;height:1px;width:min(100%,280px);margin:.42em 0;background:var(--hair);overflow:hidden}
.val-wait::after{content:"";position:absolute;inset:0;background:var(--white);transform:scaleX(0);transform-origin:left;animation:valwait 1.2s var(--ease) infinite}
@keyframes valwait{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.01%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.val-basis{color:var(--silver);font-size:var(--t-1)}
.val-law{font-size:var(--t-1);color:var(--ash)}
.val-ch{padding:0 0 8px;margin-bottom:26px;border-top:1px solid var(--hair-2);padding-top:22px}
.val-ch:empty{display:none}
.val-ch-h{font-size:var(--t-1)!important;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ash);margin:0 0 16px;font-family:var(--text)}
/* the actions: "Own one?" and "Want one?" side by side, each under its small label */
.val-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(24px,4vw,56px);margin:0 0 30px;padding-top:24px;border-top:1px solid var(--hair-2)}
.val-act{min-width:0}
.val-act-l{margin:0 0 12px;font-size:var(--t-1);color:var(--ash)}
.val-act .btn{width:100%;max-width:360px}
.val-alt{display:inline-block;margin:10px 0 0;padding:4px 0;font-size:var(--t-1);color:var(--silver)}
.val-watch{display:block;background:none;border:0;padding:10px 0;min-height:44px;margin-top:6px;cursor:pointer;color:var(--ash);text-decoration:underline;text-underline-offset:.2em;font-size:var(--t-1)}
.val-watch:hover{color:var(--white)}.val-watch[disabled]{cursor:default;text-decoration:none}
/* "In the collection now": the piece under "Want one?", a thumb, the title, the ask, and the way in */
.incol-h{margin:0 0 4px;font-size:var(--t0);font-weight:500;color:var(--white)}
.incol{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair-2);text-decoration:none;color:inherit}
.incol img,.incol-ph{width:84px;height:84px;object-fit:contain;display:block}
.incol-n{display:block;color:var(--white);font-weight:500;line-height:1.3}
.incol-s{display:block;color:var(--ash);font-size:var(--t-1)}
.incol-p{text-align:right;color:var(--white);white-space:nowrap}
.incol-v{display:block;font-size:var(--t-2);color:var(--ash);text-decoration:underline;text-underline-offset:.2em;margin-top:2px}
.incol:hover .incol-n{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.perma{font-size:var(--t-1);color:var(--ash);margin:14px 0 0;overflow-wrap:anywhere}
.perma a{color:var(--silver)}
.val-read{font-size:var(--t-1);color:var(--ash);margin:18px 0 0;max-width:66ch}
.val-read a{color:var(--silver)}
/* Refine: the form under a summary, closed on a permalink, open when the query carries dial, year or set; plain on /value */
.refine{max-width:880px;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair-2)}
.refine summary{padding:20px 36px 20px 0}
.refine .val-form{padding:10px 0 30px}
.val .hub-l>li>a,.post .ref-ledger .ledger>li>a{grid-template-columns:minmax(0,1fr) auto}   /* two columns, no rank: outranks the base .ledger rule that follows */
.ref-ledger{max-width:740px;margin:clamp(48px,7vw,88px) auto 0}
.ref-ledger .sec-head{margin-bottom:18px}
.ref-ledger .sec-head h2{font-size:var(--t2);letter-spacing:-.015em}
.prose a.ref{text-decoration-style:dotted;text-decoration-color:var(--ash)}
.press-s,.mth-s{margin-top:clamp(36px,5vw,56px)}
.press-s h2,.mth-s h2{font-size:var(--t2);margin:0 0 12px}
.press ul{padding-left:1.2em}
.legal .val-head{margin-bottom:clamp(28px,4vw,48px)}
.val-pulse{padding-top:clamp(40px,6vw,80px)}
@media (max-width:760px){.val-row,.tool-row{grid-template-columns:minmax(0,1fr);gap:22px}.val-acts{grid-template-columns:minmax(0,1fr)}.val-act .btn{max-width:none}}
@media (max-width:480px){.incol{grid-template-columns:64px minmax(0,1fr) auto;gap:8px 12px}.incol img,.incol-ph{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){.val-wait::after{animation:none;transform:scaleX(1)}.js .val-r::before,.js .val-r.settle::before{transform:scaleX(1);transition:none}.js .chart.step .ch-dot{opacity:1;transition:none}}

/* ---------- the ledger (pulse, vault) ---------- */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ledger>li{border-bottom:1px solid var(--hair-2)}
.ledger>li>a,.lg-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:20px 0;text-decoration:none;color:inherit}
.pulse-l>li>a{grid-template-columns:44px 88px minmax(0,1fr) auto}
.lg-thumb{width:88px;height:88px;display:block}
.lg-thumb img{width:100%;height:100%;object-fit:contain;transition:transform .9s var(--ease)}
.pulse-l>li>a:hover .lg-thumb img{transform:scale(1.08)}
.lg-rank{font:300 var(--t2)/1 var(--text);letter-spacing:-.02em;color:var(--ash)}
.lg-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-name{color:var(--white);font-weight:500;position:relative;align-self:flex-start}
.lg-name::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}   /* the same hairline as a tile title */
.pulse-l>li>a:hover .lg-name::after{transform:scaleX(1)}
.lg-sub{color:var(--ash);font-size:var(--t-1)}
.lg-val{color:var(--white);text-align:right;white-space:nowrap}
.vault-items .lg-row,.vault-w .lg-row{grid-template-columns:44px minmax(0,1.3fr) minmax(0,1fr)}
.vault-items .lg-val,.vault-w .lg-val{white-space:normal}
.lg-d{display:block;font-size:var(--t-2);color:var(--ash);margin-top:2px}
.lg-acts{grid-column:1/-1;display:flex;gap:8px 18px;flex-wrap:wrap;padding-left:64px}
.lg-acts button{background:none;border:0;padding:10px 0;min-height:44px;cursor:pointer;color:var(--ash);text-decoration:underline;text-underline-offset:.2em;font-size:var(--t-1)}
.lg-acts button:hover{color:var(--white)}
@media (max-width:600px){.ledger>li>a,.lg-row{grid-template-columns:34px minmax(0,1fr) auto}.pulse-l>li>a{grid-template-columns:34px 64px minmax(0,1fr) auto;gap:8px 12px}.lg-thumb{width:64px;height:64px}.vault-items .lg-row,.vault-w .lg-row{grid-template-columns:34px minmax(0,1.2fr) minmax(0,1fr)}.lg-acts{padding-left:52px}}

/* ---------- journal ---------- */
.jr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,5vw,64px) clamp(24px,3.4vw,56px)}
.jr-card a{display:block;text-decoration:none;color:inherit}
.jr-card img{aspect-ratio:3/2;width:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);margin-bottom:20px;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
/* a post without a featured image: the mark under the lamp, in the same 3:2 box, so the grid keeps one rhythm */
.jr-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;width:100%;margin-bottom:20px;background:radial-gradient(ellipse 60% 70% at 50% 46%,rgba(var(--lamp),.07),transparent) var(--carbon)}
.jr-card .jr-ph img{width:34px;height:40px;aspect-ratio:auto;object-fit:contain;filter:none;margin:0;opacity:.7;-webkit-mask-image:none;mask-image:none}
.jr-meta{margin:0 0 10px;font-size:var(--t-1);color:var(--ash)}
.jr-card h2,.jr-card h3{font-size:var(--t1);font-weight:500;line-height:1.28;margin-bottom:10px;letter-spacing:-.015em}
.jr-x{margin:0;color:var(--ash);font-size:var(--t-1)}
.jr-card a:hover h2,.jr-card a:hover h3{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.jr-all{grid-template-columns:repeat(3,minmax(0,1fr))}
.post article{max-width:740px;margin:0 auto}
.post-head{margin-bottom:32px}
.post-head h1{font-size:clamp(var(--t3),3.8vw,var(--t5));letter-spacing:-.03em;margin-bottom:16px}
.post-meta{font-size:var(--t-1);color:var(--ash);margin:0 0 18px}
.post-lede{font-weight:300;font-size:var(--t1);line-height:1.5;color:var(--silver);margin:0}
.post-fig{margin:0 0 36px}
.post-fig img{aspect-ratio:3/2;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.05);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.prose{max-width:68ch;font-size:1.08rem;line-height:1.75}
.prose h2{font-size:var(--t2);margin:2em 0 .6em}
.prose h3{font-size:var(--t1);font-weight:500;margin:1.6em 0 .5em}
.prose h4{font-size:var(--t0);font-weight:500;margin:1.4em 0 .4em}
.prose p,.prose li{color:var(--silver)}
.prose strong{color:var(--white);font-weight:500}
.prose a{color:var(--white)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.4em 0}
.prose blockquote{margin:1.6em 0;padding-left:1.2em;border-left:1px solid var(--hair);font-weight:300;font-size:var(--t1)}
.prose code{font-family:var(--text);background:var(--carbon);padding:0 .3em}
.prose pre{overflow:auto;background:var(--carbon);padding:16px;font-size:var(--t-1)}
/* the comparison table in three posts: the winner's cell in white; on a phone each criterion stacks, the watch named over its value */
.prose .cmp{margin:0 0 1.4em}
.prose .cmp th,.prose .cmp td{padding:12px 14px 12px 0;vertical-align:top}
.prose .cmp thead th{color:var(--white);font-weight:500}
.prose .cmp tbody th{color:var(--ash);font-weight:400;width:28%}
.prose .cmp td{color:var(--silver)}
.prose .cmp td.cmp-w{color:var(--white)}
.prose .cmp-v{color:var(--silver)}.prose .cmp-v strong{color:var(--white)}
@media (max-width:640px){.prose .cmp thead{display:none}.prose .cmp tr,.prose .cmp th,.prose .cmp td{display:block;width:auto}.prose .cmp tbody th{width:auto;padding:16px 0 6px;border-bottom:0;color:var(--white);font-weight:500}.prose .cmp td{padding:4px 0 8px;border-bottom:0}.prose .cmp td::before{content:attr(data-w);display:block;color:var(--ash);font-size:var(--t-2)}.prose .cmp tr{border-bottom:1px solid var(--hair-2)}}
.post-next{max-width:740px;margin:clamp(48px,7vw,88px) auto 0;padding-top:28px;border-top:1px solid var(--hair)}
.post-next p{margin:0 0 6px;font-size:var(--t-1);color:var(--ash)}
.post-next a{font:600 var(--t1)/1.3 var(--display);letter-spacing:-.015em;color:var(--white);text-decoration:none}
.post-next a:hover{text-decoration:underline}
.legal article{max-width:740px;margin:0 auto}
.legal h1{font-size:clamp(var(--t3),3.8vw,var(--t5));margin-bottom:28px}
@media (max-width:900px){.jr-list,.jr-all{grid-template-columns:minmax(0,1fr)}}

/* ---------- footer ---------- */
.ft{background:var(--black);color:var(--silver);border-top:1px solid var(--hair-2)}
.ft-in{max-width:var(--max);margin:0 auto;padding:clamp(64px,8vw,112px) var(--gut) 48px;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px clamp(24px,4vw,64px)}
.ft-brand>img:first-child{width:36px;height:42px;object-fit:contain;margin-bottom:16px}
.ft-wm{height:12px;width:auto;display:block;margin:0 0 16px}   /* the same raster as the header: one face for the name */
.ft-line{max-width:32ch;font-size:var(--t-1);color:var(--ash);margin:0}
.ft-col h2{font:500 var(--t-1)/1.4 var(--text);letter-spacing:0;color:var(--ash);margin-bottom:14px}
.ft-col p{margin:0 0 14px;font-size:var(--t-1)}
/* 44 px targets on a 21 px line: the link box grows into the 14 px gaps, never over the neighbouring line's text */
.ft-col a{display:inline-block;padding:11px 0;margin:-11px 0;text-decoration:none;color:var(--silver)}.ft-col a:hover{color:var(--white);text-decoration:underline}
.ft-legal{max-width:var(--max);margin:0 auto;padding:0 var(--gut) calc(44px + var(--sab));font-size:var(--t-2);color:var(--ash);line-height:1.6}
.ft-legal p{max-width:96ch;margin:0 0 8px}
@media (max-width:900px){.ft-in{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-brand{grid-column:1/-1}}
@media (max-width:480px){.ft-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- cookie notice ---------- */
.cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + var(--sab));z-index:40;max-width:560px;background:var(--carbon);border:1px solid var(--hair);padding:18px 20px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cookie p{margin:0;font-size:var(--t-1);flex:1 1 260px;color:var(--silver)}
.cookie-b{display:flex;gap:8px;flex-wrap:wrap}
.cookie[hidden]{display:none}

/* ---------- shop ---------- */
.shop-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;margin-bottom:22px}
.shop-head h1{font-size:clamp(var(--t4),4.8vw,var(--t6));letter-spacing:-.035em}
.shop-n{margin:0;color:var(--ash)}
/* the reference search: a line under the words above the bar (not inside it, so the phone's sticky strip stays short); a GET to /shop?q=
   without JS, filtered in place with it, and the sourcing line when nothing matches */
.shop-find{max-width:440px;margin:0 0 18px}
.shop-find input{font-size:var(--t0);min-height:48px}
.shop-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;margin-bottom:clamp(40px,6vw,72px);padding:8px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair-2)}
.kinds{display:flex;flex-wrap:wrap;gap:4px 28px}
.kinds a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;padding:4px 0;color:var(--ash);border-bottom:1px solid transparent;transition:color .3s,border-color .3s;font-weight:500}
.kinds a sup{font-size:var(--t-2);margin-left:4px;color:var(--ash)}
.kinds a[aria-pressed=true]{color:var(--white);border-bottom-color:var(--white)}
.kinds a:hover{color:var(--white)}
/* collection chips (Datejust 13, Royal Oak 14): a second, quieter strip that appears once a brand is pressed */
.chips{order:3;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:2px 22px;margin:0;padding:0;font-size:var(--t-1)}
.chips[hidden]{display:none}
.chips a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;padding:2px 0;color:var(--ash);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.chips a[hidden]{display:none}
.chips a sup{font-size:var(--t-2);margin-left:4px}
.chips a[aria-pressed=true]{color:var(--white);border-bottom-color:var(--white)}
.chips a:hover{color:var(--white)}
.sort{display:flex;align-items:center;gap:12px;margin:0}
.sort label{margin:0}
.sort select{min-height:44px;width:auto;margin:0;padding:6px 28px 6px 0;font-size:16px}   /* 16px: anything smaller zooms iOS on focus */
/* the lens (phones only): two to a row, or one watch under the lamp */
.lens{display:none;gap:2px;margin:0}
.lens button{width:44px;height:40px;border:1px solid var(--hair);background:none;padding:0;cursor:pointer;color:var(--ash);display:inline-flex;align-items:center;justify-content:center;transition:color .3s,border-color .3s}
.lens button[aria-pressed=true]{color:var(--white);border-color:var(--white)}
.lens svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}
.shop-foot{margin-top:clamp(48px,6vw,80px);color:var(--ash)}
.shop-foot a{color:var(--silver)}
.shop-foot-alt{font-size:var(--t-1);margin-left:10px;color:var(--ash)}
.empty[hidden]{display:none}
.tile.is-hidden{display:none}
/* the two-beat filter (site.js, no Flip): the grid dims and drops 6px, re-sorts while nothing shows, then settles back with a short stagger on the first six */
.grid.down .tile{opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.grid.up .tile{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 50ms)}
@media (max-width:600px){
  /* the bar rides under the header: the brand strip scrolls sideways under a fade, the sort and the lens share the row below */
  .shop-bar{position:sticky;top:var(--hd);z-index:5;background:rgba(10,10,10,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:4px 0 6px;margin-bottom:clamp(32px,8vw,48px)}
  .kinds,.chips{grid-column:1/-1;order:0;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);padding-right:40px;scrollbar-width:none}
  .kinds::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
  .kinds a,.chips a{scroll-snap-align:start;white-space:nowrap}
  .lens{display:flex;justify-self:end}
}

/* ---------- one piece ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:0 10px;font-size:var(--t-1);color:var(--ash);margin-bottom:26px}
.crumbs a{text-decoration:none;color:var(--silver)}.crumbs a:hover{color:var(--white)}
.crumbs span::before{content:"/";margin-right:10px;color:var(--ash)}
.piece{padding-top:calc(var(--hd) + 28px);padding-bottom:0}
.piece-g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 clamp(32px,6vw,110px);align-items:center;min-height:calc(100svh - var(--hd) - 80px)}
.piece-fig{margin:0;padding:4% 6%}
.piece-fig .lamp{--ly:46;--ty:46}
.piece-fig .lamp-pool{opacity:1;background:radial-gradient(circle at 50% 50%,rgba(var(--lamp),.2) 0,rgba(var(--lamp),.08) 24%,rgba(var(--lamp),0) 52%)}   /* the same transform as every pool, a little brighter */
.piece-sticky{position:sticky;top:calc(var(--hd) + 24px);padding:24px 0}
.piece-brand{margin:0 0 10px;font:500 var(--t-2)/1.4 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.piece-r h1{font-size:clamp(var(--t3),3.4vw,var(--t4));letter-spacing:-.03em;margin-bottom:22px}
.piece-price{margin:0;font:300 clamp(var(--t4),3.8vw,var(--t5))/1 var(--text);letter-spacing:-.04em;color:var(--white)}
.piece-st{margin:10px 0 26px;font-size:var(--t-1);color:var(--silver)}
.specs{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 26px;padding:0;border-top:1px solid var(--hair)}
.specs>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--hair-2)}
.specs dt{font-size:var(--t-1);color:var(--ash);line-height:1.6}
.specs dd{margin:0;color:var(--white)}
.piece-desc{max-width:52ch;white-space:pre-line}
.piece-r .btn{width:100%;margin-bottom:10px}
.piece-share{margin:-14px 0 22px}
.piece-share .cite-b{padding:8px 0;font-size:var(--t-1);color:var(--ash)}
.piece-share .cite-b:hover{color:var(--white)}
.piece-more{display:flex;flex-wrap:wrap;gap:8px 28px;margin:10px 0 0}
/* the transaction: the showroom and its hours, how a piece is verified, Daniel's payment and shipping sentences once written (never a placeholder) */
.piece-tx{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair-2);font-size:var(--t-1);color:var(--ash);max-width:48ch;line-height:1.6}
.piece-tx-h{color:var(--silver);margin:0 0 8px}
.piece-tx p{margin:0 0 8px}
.piece .ph,.piece .also,.val .val-pulse{padding-left:0;padding-right:0}   /* nested in a padded main: one gutter, not two */
.ph{max-width:960px;padding-bottom:0}
.ph .sec-head{margin-bottom:22px}
.ph .sec-head h2{font-size:var(--t2);letter-spacing:-.015em}
.also{padding-bottom:var(--sec)}
@media (max-width:900px){.piece-g{grid-template-columns:minmax(0,1fr);min-height:0}.piece-fig{padding:0 4%}.piece-sticky{position:static;padding:28px 0 0}}

/* ---------- the buy bar (T10): on a phone the price, the status and one WhatsApp button ride the bottom edge while the in-flow
   button is off screen (site.js); never on desktop, never over the open menu; shown plainly without JS ---------- */
.buybar{display:none}
@media (max-width:900px){
  .buybar{position:fixed;left:0;right:0;bottom:0;z-index:28;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gut) calc(12px + var(--sab,0px));background:rgba(10,10,10,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--hair)}
  .buybar[hidden]{display:none}
  .no-js .buybar{display:flex}
  .buybar-p{margin:0;min-width:0;font:300 1.22rem/1.1 var(--text);letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums}
  .buybar-st{display:block;margin-top:2px;font:400 13px/1.4 var(--text);letter-spacing:0;color:var(--ash)}
  .buybar .btn{min-height:48px;padding:0 24px;flex:0 0 auto}
  body.has-buybar .ft{padding-bottom:calc(84px + var(--sab,0px))}
}
@media (min-width:901px){.buybar{display:none!important}}

/* ---------- services, faq, cta band ---------- */
.svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px)}
.svc-list li{padding:32px 0;border-top:1px solid var(--hair-2)}
.svc-list h2{font-size:var(--t2);margin-bottom:12px;letter-spacing:-.02em}
.svc-list p{max-width:50ch}
.svc-d{color:var(--ash);font-size:var(--t-1);margin:0}
.faq{margin-top:clamp(56px,8vw,112px);max-width:820px}
.faq h2{font-size:clamp(var(--t2),3vw,var(--t3));margin-bottom:18px}
details{border-top:1px solid var(--hair-2)}
details:last-of-type{border-bottom:1px solid var(--hair-2)}
summary{cursor:pointer;padding:20px 36px 20px 0;list-style:none;font-weight:500;color:var(--white);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-weight:300;font-size:var(--t2);color:var(--ash);transition:transform .35s var(--ease)}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 0 22px;max-width:62ch;margin:0}
.cta-band{margin-top:clamp(56px,8vw,112px);padding:clamp(36px,5vw,64px) 0 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:center}
.cta-band h2{font-size:clamp(var(--t2),3vw,var(--t3));grid-column:1}
.cta-band p{grid-column:1;max-width:50ch;margin:0}
.cta-b{grid-column:2;grid-row:1/span 2;align-self:center;display:flex;flex-direction:column;gap:10px}
@media (max-width:760px){.svc-list{grid-template-columns:minmax(0,1fr)}.cta-band{grid-template-columns:minmax(0,1fr)}.cta-b{grid-column:1;grid-row:auto;align-items:flex-start}}

/* ---------- education and the guides ---------- */
.edu-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px)}
.edu-list li{border-top:1px solid var(--hair-2)}
.edu-list a{display:block;padding:32px 0;text-decoration:none;color:inherit}
.edu-k{margin:0 0 10px;font-size:var(--t-1);color:var(--ash)}
.edu-list h2{font-size:var(--t2);margin-bottom:10px;letter-spacing:-.02em}
.edu-list a:hover h2{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.edu-list p:last-child{margin:0;color:var(--silver);font-size:var(--t-1);max-width:48ch}
.guide-head{margin-bottom:clamp(36px,5vw,64px)}
.guide-head h1{font-size:clamp(var(--t3),4.2vw,var(--t5));letter-spacing:-.035em;margin-bottom:16px}
.guide h2{font-size:clamp(var(--t2),2.8vw,var(--t3));margin:clamp(44px,6vw,80px) 0 20px;letter-spacing:-.02em}
.guide h3{font-size:var(--t1);font-weight:500;margin:26px 0 12px}
.guide .tool{margin:0 0 28px;padding-top:4px}
.guide .tool label{margin-bottom:22px}
.guide .tool .btn{margin-top:6px}
.seg{display:flex;flex-wrap:wrap;gap:0;margin:0 0 26px;border:1px solid var(--hair);width:max-content;max-width:100%}
.seg button{background:none;border:0;border-right:1px solid var(--hair);padding:0 18px;min-height:44px;cursor:pointer;color:var(--ash);font:500 var(--t-2)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true],.seg button[aria-selected=true]{background:var(--white);color:var(--ink)}
.seg button:hover{color:var(--white)}.seg button[aria-pressed=true]:hover,.seg button[aria-selected=true]:hover{color:var(--ink)}
.seg-s{margin:0 0 16px}
.tool-row .seg-s{margin-bottom:0;align-self:end}
.tool-out{margin-top:26px}
.tool-out:empty{display:none}
.out{border-top:1px solid var(--hair);padding:22px 0 4px}
.out-k{margin:0 0 8px;font-size:var(--t-1);color:var(--ash)}
.out-n{margin:0 0 8px;font:300 clamp(var(--t3),3.6vw,var(--t5))/1.05 var(--text);letter-spacing:-.035em;color:var(--white)}
.out-t{margin:0;color:var(--silver)}
.out dl{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px 16px;margin:16px 0 0}
.out dt{font-size:var(--t-1);color:var(--ash);line-height:1.6}
.out dd{margin:0;color:var(--white)}
.tbl{margin:0 0 24px}
.sn-pane>p:first-of-type,.mv-pane .lede{max-width:66ch}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.codes dl{margin:0 0 20px}
.codes dl>div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--hair-2)}
.codes dt{color:var(--white);font-weight:500}
.codes dd{margin:0;color:var(--silver);font-size:var(--t-1)}
.chk{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.chk>div{padding:18px 0;border-top:1px solid var(--hair-2)}
.chk dt{font:500 var(--t0)/1.4 var(--display);color:var(--white);margin-bottom:6px;letter-spacing:-.01em}
.chk dd{margin:0;color:var(--silver);font-size:var(--t-1);max-width:50ch}
.grades{list-style:none;margin:0;padding:0}
.grades>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px clamp(24px,4vw,64px);padding:30px 0;border-top:1px solid var(--hair-2)}
.gr-head{display:flex;align-items:baseline;gap:14px}
.gr-k{font:300 var(--t4)/1 var(--text);letter-spacing:-.03em;color:var(--white)}
.grades h3{margin:0;font-size:var(--t1)}
.gr-t{grid-column:1;margin:0;font-size:var(--t-1);color:var(--ash);max-width:34ch}
.grades>li>p:not(.gr-t){grid-column:2;grid-row:1;margin:0}
.grades ul{grid-column:2;margin:0;padding-left:1.1em;color:var(--silver);font-size:var(--t-1)}
.grades li li{margin-bottom:4px}
.spectrum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:32px 0 0}
.spectrum span{padding:12px 4px 0;border-top:6px solid var(--white);font-size:var(--t-2);color:var(--ash);text-align:center}
.spectrum span:nth-child(2){border-top-color:#cfcfcf}.spectrum span:nth-child(3){border-top-color:#8c8c8c}.spectrum span:nth-child(4){border-top-color:#4a4a4a}.spectrum span:nth-child(5){border-top-color:#262626}
.gens{list-style:none;margin:0;padding:0}
.gens>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px clamp(24px,4vw,64px);padding:30px 0;border-top:1px solid var(--hair-2)}
.gen-head{display:flex;flex-direction:column;gap:4px}
.gen-cal{font:300 var(--t4)/1 var(--text);letter-spacing:-.03em;color:var(--white)}
.gen-y{font-size:var(--t-1);color:var(--ash)}
.gen-w{grid-column:1;margin:0;font-size:var(--t-1);color:var(--silver)}
.gens h3{grid-column:2;grid-row:1;margin:0 0 6px;font-size:var(--t-1);font-weight:400;color:var(--ash);font-family:var(--text)}
.gens ul{grid-column:2;margin:0 0 12px;padding-left:1.1em;color:var(--silver);font-size:var(--t-1)}
.gen-dl{grid-column:2;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.gen-dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}
.gen-dl dt{font-size:var(--t-1);color:var(--ash);line-height:1.6}
.gen-dl dd{margin:0;font-size:var(--t-1);color:var(--silver)}
.tips{margin-top:clamp(32px,5vw,56px)}
.prose-s{max-width:66ch}
@media (max-width:760px){.edu-list,.codes,.chk{grid-template-columns:minmax(0,1fr)}.grades>li,.gens>li{grid-template-columns:minmax(0,1fr)}.grades>li>p:not(.gr-t),.grades ul,.gens h3,.gens ul,.gen-dl,.gen-w{grid-column:1;grid-row:auto}.seg{width:100%}.seg button{flex:1 1 auto;padding:0 10px}}

/* ---------- contact ---------- */
/* one button first, then the showroom (the point of the page: Daniel's photograph as a wide crop beside the address), then the channels and the form */
.ct-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:0 0 clamp(40px,6vw,72px)}
.ct-wa-n{margin:0;color:var(--ash);font-size:var(--t-1);max-width:40ch}
.ct-wa-n b{display:block;font-weight:400;font-size:var(--t0);color:var(--silver);font-variant-numeric:tabular-nums}
.ct-show{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;margin:0 0 clamp(56px,8vw,112px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--hair)}
.ct-pic{margin:0}
.ct-pic img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:62% 42%;filter:grayscale(1) contrast(1.04);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.ct-k{margin:0 0 10px;font:500 var(--t-2)/1.4 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.ct-a{margin:0 0 18px;font-size:var(--t1);line-height:1.45;color:var(--white)}
.ct-addr .hours{margin:0 0 18px}
.ct-dir{margin:0}
.ct-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,6vw,110px);align-items:start}
.ct-dl{margin:0;border-top:1px solid var(--hair)}
.ct-dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--hair-2)}
.ct-dl dt{font-size:var(--t-1);color:var(--ash);line-height:1.8}
.ct-dl dd{margin:0;color:var(--white)}
.ct-dl dd a{color:var(--white)}
.ct-dl small{display:block;font-size:var(--t-1);color:var(--ash);margin-top:4px}
.hours{border-collapse:collapse;font-size:var(--t-1)}
.hours th{text-align:left;font-weight:400;color:var(--silver);padding:2px 16px 2px 0}
.hours td{color:var(--ash);padding:2px 0}
.enq{padding:0}
.enq h2{font-size:var(--t2);margin-bottom:8px;letter-spacing:-.02em}
.enq>p{color:var(--ash);margin-bottom:28px}
.enq label{margin-bottom:22px}
.enq .fine{margin-top:14px}
/* the error line stays in the flow and fades into place; after a send the fields fold away (tools.js) and "Sent" arrives under a drawn hairline */
.enq .val-err{display:block;min-height:1.6em;opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.enq .val-err:not(:empty){opacity:1;transform:none}
.enq-sent{position:relative;padding-top:24px}
.enq-sent::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);transform-origin:left}
.enq-sent h2{margin-bottom:10px}
.enq-sent p{color:var(--silver);margin-bottom:22px}
.enq-sent.anim::before{transform:scaleX(0);transition:transform .9s var(--ease)}
.enq-sent.anim h2,.enq-sent.anim p,.enq-sent.anim .btn{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.enq-sent.anim h2{transition-delay:.2s}.enq-sent.anim p{transition-delay:.5s}.enq-sent.anim .btn{transition-delay:.7s}
.enq-sent.anim.in::before{transform:scaleX(1)}
.enq-sent.anim.in h2,.enq-sent.anim.in p,.enq-sent.anim.in .btn{opacity:1;transform:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:860px){.ct-g{grid-template-columns:minmax(0,1fr)}.ct-show{grid-template-columns:minmax(0,1fr);gap:24px}.ct-pic img{aspect-ratio:3/2;object-position:62% 45%}}
@media (prefers-reduced-motion:reduce){.enq .val-err,.enq-sent.anim::before,.enq-sent.anim h2,.enq-sent.anim p,.enq-sent.anim .btn,.grid.down .tile,.grid.up .tile{transition:none}}

/* ---------- the vault ---------- */
.vault-in{min-height:80vh;display:flex;align-items:center}
.vault-box{width:min(520px,100%);margin:0 auto}
.vault-box h1{font-size:clamp(var(--t4),4.8vw,var(--t6));letter-spacing:-.035em;margin-bottom:14px}
.vault-box .lede{margin-bottom:32px}
.acf{padding:8px 0 0}
.acf label{margin-bottom:22px}
.acf .btn{width:100%;margin-top:8px}
.acf .val-err{margin-bottom:12px}
.vault-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-bottom:clamp(36px,5vw,64px);padding-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--hair)}
.vault-head h1{font-size:clamp(var(--t3),4.4vw,var(--t5));letter-spacing:-.035em;margin-bottom:6px}
.vault-who{margin:0;color:var(--ash)}
.vault-tot{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px}
.vault-l{font-size:var(--t-1);color:var(--ash)}
.vault-big{font:300 clamp(2.8rem,6.5vw,5rem)/1 var(--text);letter-spacing:-.045em;color:var(--white);min-height:1em}
.vault-d{font-size:var(--t-1);color:var(--silver);min-height:1.4em}
.vault-sec{margin-bottom:clamp(48px,7vw,88px);padding-top:8px}
.vault-sec>h2,.vault-sec .sec-head h2{font-size:var(--t2);letter-spacing:-.02em}
.vault-sec>h2{margin-bottom:22px}
.vault-sec .sec-head{margin-bottom:22px}
.vault-add,.vault-watch{max-width:880px}
.vault-watch{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;margin-top:24px}
.vault-watch label{flex:1 1 260px;margin:0}
.vault-acts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.vault-acct p{color:var(--silver)}
.dlg{background:var(--ink);color:var(--silver);border:1px solid var(--hair);padding:clamp(20px,3vw,32px);width:min(520px,92vw)}
.dlg::backdrop{background:rgba(0,0,0,.72)}
.dlg h2{font-size:var(--t2);margin-bottom:8px}
.dlg label{margin:14px 0 22px}
.dlg-b{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.lg-row{padding:20px 0}
.lg-row .lg-rank{font-size:var(--t0);color:var(--ash)}
@media (max-width:700px){.vault-head{grid-template-columns:minmax(0,1fr)}.vault-tot{align-items:flex-start;text-align:left}}

/* ---------- not found: the wall still, dimmed, under the one centred page (B10) ---------- */
.missing{position:relative;max-width:none;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;overflow:hidden;background:var(--black);padding:calc(var(--hd) + 40px) var(--gut) clamp(48px,9vh,110px)}
.missing-pic{position:absolute;inset:0;z-index:0}
.missing-pic picture,.missing-pic img{position:absolute;inset:0;width:100%;height:100%}
.missing-pic img{object-fit:cover;object-position:50% 50%;filter:brightness(.32)}
.missing-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.28) 48%,rgba(0,0,0,.36) 100%)}
.missing-in{position:relative;z-index:1;width:100%;max-width:640px}
.missing h1{margin-bottom:12px}
.missing p{max-width:44ch;margin:0 auto 28px;color:var(--silver)}
.missing-f{max-width:560px;margin:0 auto 30px;text-align:left}
.missing-f label{margin-bottom:2px}
.missing-f .val-f{max-width:none}
.missing-b{margin:0 0 28px}
.missing-l{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px;margin:0}

/* ---------- display register and phone shell (T4, T9) ----------
   One register for every title: Montserrat 300, tight, no closing period (the house band's heading is a statement and keeps its
   three). Weights 500 and 600 stay only under 1.5rem; the hero's line is the wall lane's. Under 480 px the wordmark stays at 9 px,
   a Shop link joins the burger, and every fixed bar clears the phone's home indicator through --sab. */
.shop-head h1,.val-head h1,.vault-box h1,.guide-head h1,.post-head h1,.missing h1{font-weight:300;font-size:clamp(2.6rem,5.2vw,4.6rem);letter-spacing:-.025em;line-height:1.04}
.sec-head h2,.idx-head h2,.val-tease h2{font-weight:300;font-size:clamp(2rem,3.8vw,3.4rem)}
.legal h1,.vault-head h1,.piece-r h1,.svc-list h2,.edu-list h2,.faq h2,.cta-band h2,.guide h2,.enq h2,.idx-table h2,.idx-how h2,.vault-sec h2,.dlg h2,.prose h2,.ph .sec-head h2{font-weight:300}
.more{font:400 .9rem/1 var(--text);letter-spacing:0;text-transform:none;border-bottom-color:var(--hair)}   /* the section labels read as sentences under a hairline */
.more:hover{border-bottom-color:var(--white)}
.feat{padding-top:clamp(40px,6vw,88px)}   /* the wall hands straight to the collection (the marquee is retired) */
input::placeholder,textarea::placeholder{color:#7a7a7a}   /* 4.6:1 on ink */
@media (max-width:600px){:root{--t-1:.9rem;--t-2:.78rem}.ft-legal{font-size:var(--t-1)}.dlg{margin-bottom:calc(8px + var(--sab))}}
@media (prefers-reduced-motion:reduce){.menu,.menu::before,.menu-main li,.menu-sec li,.menu-side>*,.hd-menu i{transition:none!important}}   /* the menu and the burger: visibility only */

/* ---------- the house: who, where, how the watches are checked (T6) ----------
   The interior photograph lit like a watch: grayscale, a warm pool at rest upper left (the same corner the first row's lamp rests
   in), the bottom dissolving into the ink. Facts from settings and the services copy only. */
.house{max-width:var(--max);margin:0 auto;padding:var(--sec) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center}
.house-fig{position:relative;margin:0;aspect-ratio:4/3}
.house-pool{position:absolute;inset:-18%;pointer-events:none;background:radial-gradient(circle at 40% 30%,rgba(var(--lamp),.16) 0,rgba(var(--lamp),.06) 26%,rgba(var(--lamp),0) 54%);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);mask-image:radial-gradient(circle,#000 30%,transparent 68%)}
.house-fig img{position:relative;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.house h2{font-weight:300;font-size:clamp(2rem,3.8vw,3.4rem);letter-spacing:-.025em;line-height:1.04;margin-bottom:28px}
.house-t p{max-width:46ch;margin:0 0 14px;font-weight:300;font-size:clamp(var(--t0),1.3vw,var(--t1));line-height:1.55;color:var(--silver)}
.house-l{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:26px}
@media (max-width:900px){.house{grid-template-columns:minmax(0,1fr);gap:36px}.house-fig{max-width:560px}}

/* ---------- reduced motion: everything still, nothing lost ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .marq-t{animation:none}
  .cut,.btn,.btn::before,.hd,.hd-nav a::after,.wall,.kinds a,.lamp-pool,.lamp-streak,.lamp-band,.lg-thumb img,.odo-s,.tile-cap h2::after,.tile-cap h3::after,.lg-name::after{transition:none!important}
  /* the lamp sits still at the house point, the watch stays flat (no tilt), the streak rests halfway across; no hover motion */
  .lamp{--lx:50!important;--ly:42!important;--sx:.5!important;--tx:50!important;--ty:42!important}
  .lamp-obj{transform:none}
  .lamp.lit .lamp-pool,.lamp.lit .lamp-band{will-change:auto}
  .tile-a:hover .cut,.pulse-l>li>a:hover .lg-thumb img{transform:none}
  .js .ch-line{stroke-dashoffset:0}
  .js .chart.drawn .ch-line{transition:none}
  .js .reveal::before{transform:scaleX(1);transition:none}
  .js .reveal .sec-head,.js .reveal .idx-head,.js .reveal>h2,.js .reveal .val-tease-in>h2,.js .reveal .val-tease-in>p{opacity:1;transform:none;transition:none}
}

/* the value page's extras (2026-10-24): every dial priced, the maker's facts, the brand hubs, "did you mean" */
.val-more{max-width:880px;margin-top:clamp(28px,4vw,48px)}
.val-dials .ledger>li.on{background:var(--hair-2)}
.val-dials .ledger>li.on .lg-name::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--white);margin:0 10px 2px 0}
.specs .dd-n{display:block;color:var(--ash);font-size:var(--t-1);margin-top:4px;line-height:1.5}
.val-maker .specs>div{grid-template-columns:minmax(110px,180px) minmax(0,1fr)}
.val-cat{margin:6px 0 0;font-size:var(--t-1);color:var(--ash)}
.val-cat summary{cursor:pointer;color:var(--silver);padding:8px 0}
.val-cat ul{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--hair-2)}
.val-cat li{padding:10px 0;border-bottom:1px solid var(--hair-2);color:var(--silver)}
.val-cat li .dd-n{display:block;color:var(--ash);margin-top:2px}
.hub-toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 clamp(28px,4vw,44px)}
.hub-toc a{border:1px solid var(--hair);padding:7px 12px;font-size:var(--t-1);color:var(--silver);text-decoration:none;white-space:nowrap}
.hub-toc a span{color:var(--ash);margin-left:4px}
.hub-g{margin:0 0 clamp(34px,5vw,56px)}
.hub-g h2{font-size:var(--t2);letter-spacing:-.015em;margin:0 0 14px}
.val-brands{margin-top:clamp(48px,7vw,96px)}
.val-brands h2{font-size:var(--t2);letter-spacing:-.015em;margin:0 0 18px}
.brand-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));border-top:1px solid var(--hair)}
.brand-grid a{display:flex;justify-content:space-between;gap:12px;padding:16px 4px;border-bottom:1px solid var(--hair-2);text-decoration:none;color:inherit}
.brand-grid .bg-n{color:var(--ash);font-size:var(--t-1)}
.missing-near{margin:22px auto 0;max-width:560px;text-align:left}
/* a brand's shop page (2026-10-24) */
.shop-intro{max-width:760px;margin:-8px 0 clamp(22px,3vw,34px);color:var(--silver)}
.shop-intro p{margin:0 0 10px;line-height:1.6}
.shop-links{display:flex;flex-wrap:wrap;gap:6px 22px}