/* United Luxury.

   Two ideas carry the whole house.

   The first is the dissolve. Every photograph the shop owns was taken on a white
   sweep, so the page is built on warm paper and each picture is multiplied into
   it: the sweep vanishes, the watch steps forward, and the light placed behind
   it comes through the crystal. Nothing is retouched to achieve that.

   The second is that the light is not fixed. The visitor's pointer carries the
   lamp; the glow follows the hand and the contact shadow leans away from it. A
   photograph on a white sweep is the only kind of picture where that can be
   done honestly in a browser, which is exactly why it is worth doing here.

   Shop surface: bright platinum boutique — cool white paper so the watches
   read as jewellery under daylight, not a nightclub. Brass for money;
   charcoal only in the night chapter and footer. Manrope for UI; display
   for the brand mark. */

:root{
  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Daylight boutique — cool platinum, not cream, not charcoal. */
  --paper:#f5f6f8;
  --paper2:#ffffff;
  --paper3:#e6e8ed;
  --stage:#ffffff;
  --stage2:#fafbfc;
  --ink:#12141a;
  --ink2:#5c6370;
  --ink3:#8b929e;
  --line:rgba(18,20,26,.14);
  --line2:rgba(18,20,26,.07);
  /* Quiet metal — readable money, not gradient jewellery effects. */
  --brass:#8a6a2f;
  --brass2:#a8843d;
  --tungsten:#c4a574;
  --money:#8a6a2f;
  --sale:#b42318;
  --steel:#5a6574;

  --accent:#3a4553;
  --accent2:#5a6b7d;
  --tint:rgba(58,69,83,.04);
  --tint2:rgba(58,69,83,.09);

  --night:#0b0b0c;
  --deep:#14171c;
  --nightink:#eef0f3;
  --nightink2:#9aa1ad;
  --nightline:rgba(238,240,243,.12);

  /* where the lamp is standing, in percentages of the stage it lights */
  --lx:50%;
  --ly:41%;

  --pad:clamp(20px,4.4vw,72px);
  --wide:1400px;
  --ease:cubic-bezier(.22,.61,.21,1);
  --slow:cubic-bezier(.16,1,.3,1);
}

/* One line per house. `data-house` is set on the root element from the brand the
   page is about, so a Rolex product page, the Rolex shelf and a Rolex piece inside
   a mixed grid all reach for the same green without a single inline style. */
[data-house=rolex]{--accent:#1d5138;--accent2:#3f9068;--deep:#0d2519;
  --tint:rgba(29,81,56,.05);--tint2:rgba(29,81,56,.12)}
[data-house=patek-philippe]{--accent:#1b3a5c;--accent2:#4a82bd;--deep:#0d1f33;
  --tint:rgba(27,58,92,.05);--tint2:rgba(27,58,92,.12)}
[data-house=audemars-piguet]{--accent:#2f3a44;--accent2:#6b7f92;--deep:#171d23;
  --tint:rgba(47,58,68,.05);--tint2:rgba(47,58,68,.12)}
[data-house=patek]{--accent:#1b3a5c;--accent2:#4a82bd;--deep:#0d1f33}
[data-house=omega]{--accent:#6d1f2c;--accent2:#c1596b;--deep:#320f16;
  --tint:rgba(109,31,44,.05);--tint2:rgba(109,31,44,.12)}
[data-house=hublot]{--accent:#5c221f;--accent2:#b55a50;--deep:#2b1211;
  --tint:rgba(92,34,31,.05);--tint2:rgba(92,34,31,.12)}
[data-house=richard-mille]{--accent:#4a4030;--accent2:#9c8a68;--deep:#231f18;
  --tint:rgba(74,64,48,.05);--tint2:rgba(74,64,48,.12)}
[data-house=breitling]{--accent:#173350;--accent2:#4680b8;--deep:#0b1a29;
  --tint:rgba(23,51,80,.05);--tint2:rgba(23,51,80,.12)}
[data-house=tag-heuer]{--accent:#7a2621;--accent2:#c4635a;--deep:#3a1210;
  --tint:rgba(122,38,33,.05);--tint2:rgba(122,38,33,.12)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:400 16px/1.7 var(--sans);
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  background-image:
    radial-gradient(100% 60% at 50% -10%,#fff,transparent 55%),
    linear-gradient(180deg,#fafbfc 0%,var(--paper) 45%,#f0f1f4 100%);
}
/* Soft daylight grain — barely there, never a dark veil. */
body::before{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .56  0 0 0 0 .58  0 0 0 .4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body::after{display:none}
html.no-motion body::before{display:none}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brass);color:var(--paper2)}
:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--paper3)}
::-webkit-scrollbar-thumb{background:var(--ink3);border:3px solid var(--paper3)}
::-webkit-scrollbar-thumb:hover{background:var(--brass)}

/* ---------------------------------------------------------------- the room
   One navigation between two of the shop's 1,335 pages is a real page load, and
   it still animates: the browser holds the masthead still and morphs the watch
   from its card into its own page. Any engine that does not know the at-rule
   drops it and navigates instantly, so this costs nothing to those it misses. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-group(*){animation-duration:.62s;
  animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.42s;mix-blend-mode:normal}
::view-transition-group(masthead),::view-transition-group(ribbon){
  animation-duration:0s}      /* the header does not travel; it stays */
::view-transition-group(piece){animation-duration:.78s}
::view-transition-old(piece),::view-transition-new(piece){
  /* the watch is one object seen twice, so neither copy should fade */
  animation:none;mix-blend-mode:normal;height:100%;object-fit:contain}
.ribbon{view-transition-name:ribbon}
header.site{view-transition-name:masthead}

/* ------- the dissolve ------- */
.piece{mix-blend-mode:multiply}
@supports not (mix-blend-mode:multiply){.piece{mix-blend-mode:normal}}

/* Every frame that holds a blended photograph carries the paper colour itself.
   A blended element only sees its own stacking context, and a transform is
   enough to make one -- pinning, a parallax tween, a promoted layer. Painting
   the paper locally means the dissolve cannot be broken by what wraps it. */
.hero .stage>a,.card,.plate-stage,.act .stagepin,
.gallery .strip,.maisons a,.hit,.dock,.nextprev{background:var(--paper2)}
.card .ph,.gallery .main,.gallery .strip button,.hero .stage,.hero .stage>a,
.scene .shot,.spread .plate-stage,.act .stagepin,.easel .plate-stage,
.maisons a{background:var(--stage)}
/* The plinth is the one of these that moves. It is raised on load and drifts as
   the page scrolls, and either of those -- an opacity below one, a transform --
   closes the blend inside it, where paper painted on the parent cannot reach. So
   the plinth carries its own paper and its own lamp: the piece then dissolves
   against them wherever the tween has put it, instead of standing on a white card
   for the first second and a half and again on every scroll. */

/* the lamp, standing wherever the hand left it */
.lit{position:relative}
.lit>.lamp{
  position:absolute;left:var(--lx);top:var(--ly);translate:-50% -50%;
  width:112%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,
    rgba(255,253,246,1),rgba(250,245,234,.62) 46%,
    rgba(243,236,222,.28) 66%,transparent 80%);
  transition:opacity .5s var(--ease);
}
.lit>.shade{                       /* the piece stands on something */
  position:absolute;left:50%;bottom:9%;
  translate:calc(-50% + var(--sx,0px)) 0;
  width:52%;height:15px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(20,18,14,.2),transparent 74%);
  filter:blur(7px);
}
/* Positioned, so the piece paints over the lamp -- but with no z-index of its
   own. A z-index here would make this element a stacking context, the blended
   photograph inside it would have nothing but transparency to multiply with,
   and the white sweep would come back as a white box. */
.lit>img,.lit>a{position:relative}

/* ------- type ------- */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;
  letter-spacing:-.015em}
.script{font-family:var(--serif);font-style:italic;font-weight:400}
/* Figures line up in columns, the way they do in a printed catalogue. */
.price,.specs td,.ledger,.tally .k,.no,.folio,.crumbs,.refline,.ref{
  font-variant-numeric:tabular-nums}
.eyebrow{font:600 10.5px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;
  color:var(--accent)}
/* A chapter mark reads as a heading, so it is given the house colour and a rule
   that carries it -- the printed catalogue's device for "a new section starts
   here", and the thing this page was missing entirely. */
.chapter{font:600 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:14px}
.chapter::after{content:"";flex:1;height:1px;background:var(--tint2);
  min-width:24px}
.muted{color:var(--ink2)}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(60px,9vw,140px) 0}
.brass-rule{height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.45}

/* A fascicle head, not a section header. The numeral sits in the margin, the
   running head above the title, and a hairline carries across the page. */
.fascicle{
  display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:clamp(18px,3vw,44px);padding-bottom:18px;
  border-bottom:1px solid var(--line2);margin-bottom:clamp(24px,3.5vw,44px);
}
.fascicle .num{display:none}
.fascicle .said{grid-column:1}
.fascicle .running{
  font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}
.fascicle h2{font-family:var(--sans);font-weight:600;
  font-size:clamp(22px,2.8vw,32px);letter-spacing:-.02em;line-height:1.15}
.fascicle .aside{
  text-align:right;font:500 12.5px/1.6 var(--sans);color:var(--ink2);
  max-width:26ch;padding-bottom:6px;
}
.fascicle .aside a{color:var(--brass);white-space:nowrap}
.fascicle .aside a+a{display:block;margin-top:12px}

.paperlines{display:none!important}
main{position:relative;z-index:1;background:var(--paper)}
header.site,footer.site,.ribbon{position:relative;z-index:1}

/* ------- the curtain ------- */
.curtain{position:fixed;inset:0;z-index:300;background:var(--paper);
  display:grid;place-items:center}
.curtain .mark{text-align:center;position:relative;z-index:2;
  display:grid;justify-items:center}
/* The stone is the whole of the opening frame, at the size of a held object
   rather than of an icon: it is the one moment on the site where the mark is the
   only thing on screen and it should be worth the second it is given. */
.curtain .stone{width:clamp(148px,22vw,250px);opacity:0}
.curtain .word{margin-top:18px;font:600 9.5px/1 var(--sans);letter-spacing:.7em;
  text-transform:uppercase;color:var(--ink3);opacity:0;padding-left:.7em}
.curtain .bar{width:min(220px,50vw);height:1px;background:var(--line);
  margin:34px auto 0;position:relative;overflow:hidden}
.curtain .bar i{position:absolute;inset:0;background:var(--brass);
  transform:scaleX(0);transform-origin:left}
.curtain .sheets{position:absolute;inset:0;display:flex}
.curtain .sheets i{flex:1;background:var(--paper)}
html.lit-page .curtain{display:none}

/* ------- masthead ------- */
.ribbon{font:600 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink2);padding:10px var(--pad);border-bottom:1px solid var(--line2);
  display:flex;justify-content:center;align-items:center;gap:18px;
  white-space:nowrap;overflow:hidden;background:var(--paper2)}
.ribbon b{color:var(--brass)}
.trustbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
  padding:10px var(--pad);border-bottom:1px solid var(--line2);
  font:600 10px/1.45 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);background:linear-gradient(180deg,var(--paper2),var(--paper))}
.trustbar em{font-style:normal;color:var(--ink);letter-spacing:.06em}
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid var(--line2);
  transition:background .55s var(--ease),border-color .55s var(--ease)}

/* Crossing into a dark chapter, the masthead changes with the room rather than
   floating over it as a pale bar. Set from whichever section is passing under
   the header, so the two never disagree by a frame. */
html.on-night header.site{background:rgba(11,11,12,.72);
  border-bottom-color:var(--nightline)}
html.on-night .brandmark{color:var(--nightink)}
html.on-night .brandmark .sep{background:var(--nightline)}
html.on-night .brandmark .word small{color:var(--nightink2)}
html.on-night nav.main a{color:var(--nightink2)}
html.on-night nav.main a:hover,html.on-night nav.main a[aria-current]{
  color:var(--nightink)}
html.on-night .tool{color:var(--nightink2);border-color:var(--nightline)}
html.on-night .tool:hover{color:var(--brass2);border-color:var(--brass2)}
.masthead{display:flex;align-items:center;gap:32px;max-width:var(--wide);
  margin:0 auto;padding:16px var(--pad)}
.brandmark{display:flex;align-items:center;gap:14px;white-space:nowrap}

/* ------- the house mark -------
   A square box for the stone, sized in the type's own terms so it sits on the
   wordmark's shoulders rather than beside it at some unrelated size. The flat cut
   is inside from the first byte; the canvas is laid in on top of it and the flat
   one steps aside, so there is never a gap where the mark should be. */
.stone{display:block;width:40px;aspect-ratio:100/64;position:relative;
  flex:0 0 auto;color:var(--ink)}
.stone svg,.stone canvas{position:absolute;inset:0;width:100%;height:100%}
.stone.cut svg{display:none}
.brandmark:hover .stone{transform:scale(1.04)}
.stone{transition:transform .5s var(--slow)}
html.on-night .stone{color:var(--nightink)}
.brandmark .sep{width:1px;height:24px;background:var(--line)}
.brandmark .word{font:600 10.5px/1.3 var(--sans);letter-spacing:.3em;
  text-transform:uppercase}
.brandmark .word small{display:block;font-size:7.5px;letter-spacing:.42em;
  color:var(--ink3);font-weight:500;margin-top:4px}
nav.main{display:flex;gap:30px;margin-left:auto}
nav.main a{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink2);padding:12px 2px;position:relative;transition:color .3s}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;
  height:1px;background:var(--brass);transition:right .45s var(--slow)}
nav.main a:hover::after,nav.main a[aria-current]::after{right:0}
/* ------- our own clock, in the corner of the masthead -------
   A house that shows the time it is standing in, and whether anybody is
   standing there, has answered the first question a stranger has. The seconds
   run, so the page is visibly alive before anything is scrolled. */
.headtime{display:flex;align-items:center;gap:9px;padding-right:14px;
  margin-right:4px;border-right:1px solid var(--line2)}
.headtime .dot{width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--ink3);transition:background .6s var(--ease)}
html.bench-open .headtime .dot{background:var(--brass);
  box-shadow:0 0 0 0 rgba(160,124,58,.5);animation:pulse 3.4s var(--ease) infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(160,124,58,.45)}
  70%{box-shadow:0 0 0 7px rgba(160,124,58,0)}
  100%{box-shadow:0 0 0 0 rgba(160,124,58,0)}}
.headtime .col{display:flex;flex-direction:column;gap:4px}
.headtime .hh{font:500 12px/1 var(--sans);letter-spacing:.08em;
  font-variant-numeric:tabular-nums}
.headtime .st{font:600 7.5px/1 var(--sans);letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink3)}
html.on-night .headtime{border-right-color:var(--nightline)}
html.on-night .headtime .hh{color:var(--nightink)}
html.on-night .headtime .st{color:var(--nightink2)}
@media (max-width:1240px){.headtime{display:none}}

.head-tools{display:flex;align-items:center;gap:8px}
.tool{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;
  border:1px solid var(--line2);color:var(--ink2);transition:.3s var(--ease)}
.tool:hover{color:var(--brass);border-color:var(--brass);translate:0 -1px}
.burger{display:none}

/* The hairline under the masthead is a seconds hand: it crosses the page once
   a minute, in step with the clock on the wall, and it is set on load from the
   real time rather than from the moment the script happened to run. */
.sweep{position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--brass));
  transform-origin:left;transform:scaleX(0);z-index:2}
html.ticking .sweep{animation:sweep 60s linear infinite}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.no-motion .sweep{display:none}

/* ------- keys ------- */
/* A hairline frame with brass corner ticks that reach out on approach, and a
   label that steps up to its double. The structure is built by script from a
   plain <span>, so the markup stays a button with a word in it. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:12px;font:600 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  padding:19px 36px;color:var(--ink);border:1px solid var(--line);
  background:transparent;cursor:pointer;
  transition:color .45s var(--ease),border-color .45s var(--ease)}
.btn[disabled]{opacity:.55;cursor:wait}
.btn>.wash{position:absolute;inset:0;background:var(--ink);z-index:0;
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--slow)}
.btn:hover>.wash{transform:none}
.btn:hover{color:var(--paper2);border-color:var(--ink)}
.btn .lbl{position:relative;z-index:1;display:block;overflow:hidden}
/* The label takes the button's colour, never the page's. Bold text inside prose
   is set in full ink, and a button dropped into a prose column used to inherit
   that -- which painted a dark label onto the dark wash of a solid button and
   left it, on several pages, an unreadable black slab. */
.btn .lbl b{display:block;font-weight:600;color:inherit;
  transition:transform .55s var(--slow)}
.btn .lbl b+b{position:absolute;left:0;top:100%;width:100%}
.btn:hover .lbl b{transform:translateY(-100%)}
.btn .tick{position:absolute;width:9px;height:9px;border:1px solid var(--brass);
  opacity:0;z-index:1;transition:.45s var(--ease)}
.btn .tick.a{top:-1px;left:-1px;border-right:0;border-bottom:0}
.btn .tick.b{bottom:-1px;right:-1px;border-left:0;border-top:0}
.btn:hover .tick{opacity:1;width:15px;height:15px}
.btn.solid{border-color:var(--ink);color:var(--paper2)}
.btn.solid>.wash{background:var(--ink);transform:none}
.btn.solid:hover>.wash{background:var(--brass)}
.btn.brass{border-color:var(--brass);color:var(--brass)}
.btn.brass>.wash{background:var(--brass)}
.btn.brass:hover{color:var(--paper2);border-color:var(--brass)}
/* The third option on a page that already has two. It is meant to be taken by
   somebody who wants it, not offered as loudly as the first two: a hairline and a
   quieter label until it is pointed at. */
.btn.ghost{border-color:var(--line2);color:var(--ink3)}
.btn.ghost:hover{color:var(--paper2);border-color:var(--ink)}

.link{font:600 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);position:relative;padding-bottom:7px;white-space:nowrap}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform-origin:left;transition:transform .45s var(--slow)}
.link:hover::after{transform:scaleX(.35)}
/* Standing on its own the mark refuses to break, so its rule stays one piece. Set
   into running text it must break like the words around it: at 10px with a quarter
   em of tracking, "The two movements, explained" is 321px of unbreakable line, and
   at the end of a paragraph on a phone that pushed every product page 141px off
   the side of the screen. */
p .link{white-space:normal}

/* ------- plates (what a grid used to be) ------- */
/* Three or four to a row, not five. A narrower column fits more references on
   the screen at once and shows none of them properly; the shelf is not an index,
   and a visitor scrolling it is deciding with their eyes. */
.grid{display:grid;gap:clamp(34px,4vw,58px) clamp(16px,2.2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* Collection tiles carry a name and a count rather than a watch, so they read at
   a slightly narrower column than a product card. In a class, not in a style
   attribute on the homepage: an inline grid cannot be answered by a media query,
   and a 270px floor on a 350px phone column gave one enormous tile per row. */
.grid.roomy{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
@media (max-width:900px){
  .grid.roomy{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:30px 14px}
}
.card{display:block;position:relative}
/* No frame, no tint, no corner darkening. A card that paints a square behind
   its watch has re-drawn the white box the whole page exists to get rid of;
   what separates one piece from the next is the space around it. */
/* Three to four, because that is the shape the photographs are. They were shot
   upright on a phone at the bench, and a square card printed them small between
   two bars of empty paper -- the watch, the only thing on the card worth
   looking at, ended up occupying half of it. Matching the card to the frame is
   what lets the piece fill the space without a pixel of it being cut away. */
.card .ph{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  background:var(--stage);border:1px solid var(--line2);
  box-shadow:0 12px 32px rgba(18,20,26,.06)}
.card .ph::before{content:"";position:absolute;left:50%;top:42%;
  translate:-50% -50%;width:92%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,1),
    rgba(232,234,238,.45) 58%,transparent 78%);
  opacity:0;transition:opacity .6s var(--ease);z-index:0}
.card:hover .ph::before{opacity:1}
.card .ph img{position:relative;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .7s var(--slow);z-index:1}
.card:hover .ph img{transform:scale(1.04)}
/* A cover that carries its own background is printed square inside a hairline
   rather than multiplied into the page, where it would read as a grey stain. */
.card.mounted .ph img{mix-blend-mode:normal;object-fit:contain;
  border:1px solid rgba(12,13,16,.1);background:var(--stage)}
.card.mounted .ph::before{display:none}
.nextprev img.mounted,.dock img.mounted{mix-blend-mode:normal;object-fit:cover;
  border:1px solid var(--line)}
.card .folio{font:600 9px/1 var(--sans);letter-spacing:.2em;color:var(--accent);
  margin-right:9px}
.card .folio::after{content:"\00b7";margin-left:9px;color:var(--ink3)}
.card .tag{position:absolute;top:2px;right:2px;font:600 8.5px/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
/* Spec line where a price would sit: smaller, quieter, not a figure. */
.card .price .now.spec{font:500 12px/1.35 var(--sans);letter-spacing:.04em;
  color:var(--ink2);font-variant-numeric:normal;
  background:none;-webkit-text-fill-color:var(--ink2)}
.dock .p{font-variant-numeric:tabular-nums}
.dock .p .now,.dock .price .now{color:var(--money);-webkit-text-fill-color:var(--money)}
/* The rule over a card's text is the house's colour, and it is the one line of it
   that is the full width of the card. In a grid of twelve pieces from five maisons
   that is enough for the eye to group them before a single name is read. */
.card .meta{display:block;padding-top:14px;border-top:1px solid var(--line2);
  position:relative}
.card .meta::before{content:"";position:absolute;left:0;top:-1px;width:38px;
  height:1px;background:var(--accent);transition:width .5s var(--ease)}
.card:hover .meta::before{width:100%}
.card .b{font:600 9px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink2)}
.card h3{font-family:var(--sans);font-weight:600;font-size:15.5px;margin:9px 0 5px;
  line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.card .ref{font:500 10px/1 var(--sans);letter-spacing:.16em;color:var(--ink3)}
.price{display:flex;align-items:baseline;gap:9px;margin-top:11px;flex-wrap:wrap}
.price .now{font:700 15px/1 var(--sans);letter-spacing:.02em;color:var(--money);
  -webkit-text-fill-color:var(--money)}
.price .was{font:500 11.5px/1 var(--sans);color:var(--sale);
  text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:var(--sale);opacity:.9}
.price .off{font:700 9px/1 var(--sans);letter-spacing:.1em;color:var(--sale);
  padding:3px 6px;background:transparent;border:1px solid rgba(180,35,24,.4)}

/* ------- the hero ------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;
  overflow:clip;padding:clamp(20px,4vw,40px) 0 90px}
.hero .word-back{position:absolute;left:50%;bottom:-4.4vw;translate:-50% 0;
  font-family:var(--display);font-weight:400;font-size:min(19vw,250px);
  line-height:.78;letter-spacing:.02em;white-space:nowrap;pointer-events:none;
  color:transparent;-webkit-text-stroke:1px rgba(12,13,16,.06);opacity:.7}
/* The window takes the larger half. A headline at a hundred and sixteen pixels
   beside a five-hundred-pixel watch is a page about a shop; the watch has to be
   the biggest thing on the screen, and the words have to be worth reading rather
   than worth measuring. */
.hero .inner{position:relative;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;gap:clamp(20px,3.4vw,48px);
  max-width:var(--wide);margin:0 auto;padding:0 var(--pad);width:100%}
.hero .brand-signal{font-family:var(--display);font-weight:400;
  font-size:clamp(34px,4.2vw,56px);line-height:1;letter-spacing:-.02em;
  margin:10px 0 18px;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.hero h1{font-family:var(--sans);font-weight:600;font-size:clamp(26px,3.2vw,40px);
  line-height:1.12;letter-spacing:-.025em;color:var(--ink)}
.hero h1 .script{display:block;font-family:var(--sans);font-weight:500;
  font-size:.72em;color:var(--brass);letter-spacing:.02em;
  margin-left:0;line-height:1.25;margin-top:.28em}
.hero .lede{margin:22px 0 32px;max-width:36ch;color:var(--ink2);font-size:15.5px;
  line-height:1.65}
.hero .cta{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.hero .stage{position:relative;display:grid;place-items:center;min-height:74vh;
  padding-bottom:74px}
.hero .stage>a{position:relative;display:grid;place-items:center;
  width:100%;height:100%}
.hero .stage img{grid-area:1/1;width:min(47vw,700px);max-height:74vh;
  object-fit:contain;mix-blend-mode:multiply;opacity:0;
  transition:opacity 1.2s var(--ease)}
.hero .stage img.on{opacity:1}
.hero .caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;
  align-items:flex-end;justify-content:space-between;gap:24px;padding-top:16px}
.hero .plate{text-align:right;max-width:64%;
  transition:opacity .34s var(--ease)}
.hero .plate.handing{opacity:0}   /* the name is handed over mid-crossfade */
.hero .plate .n{font-family:var(--serif);font-size:17px;line-height:1.3}
.hero .plate .r{font:600 9px/1 var(--sans);letter-spacing:.24em;color:var(--ink3);
  text-transform:uppercase;margin-top:9px;font-variant-numeric:tabular-nums}
.hero .plate .p{font:700 14px/1 var(--sans);color:var(--money);margin-top:10px;
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:8px}
.hero .plate .p .now{color:var(--money);-webkit-text-fill-color:var(--money)}
.hero .plate .p .was{font:500 11px/1 var(--sans);color:var(--sale);
  text-decoration:line-through;text-decoration-thickness:1.5px;
  -webkit-text-fill-color:var(--sale)}
.hero .plate .p .off{font:700 9px/1 var(--sans);letter-spacing:.1em;color:var(--sale);
  background:transparent;padding:2px 5px;border:1px solid rgba(180,35,24,.4);
  font-variant-numeric:tabular-nums;-webkit-text-fill-color:var(--sale)}
.hero .dots{display:flex;gap:9px;padding-bottom:6px}
.hero .dots button{width:30px;height:1px;background:var(--line);
  transition:.45s var(--ease)}
.hero .dots button[aria-pressed="true"]{background:var(--accent);width:46px}
/* ------- the bench, in the corner of the entrance -------
   A working dial on our own time, whether anybody is standing at it, and a
   reserve that empties towards the hour the courier calls. Every figure is
   worked out from the visitor's own clock against our posted hours, so it can
   never be stale -- which is the only reason to put a clock on a shop at all. */
.bench{display:flex;align-items:center;gap:18px;margin-top:clamp(38px,5vw,64px);
  padding-top:22px;border-top:1px solid var(--line2);max-width:44ch}
.bench .dial{width:62px;height:62px;flex:none}
.bench svg{width:100%;height:100%;display:block;overflow:visible}
.bench .ring{fill:none;stroke:var(--line2);stroke-width:1}
.bench .track{fill:none;stroke:var(--line2);stroke-width:1.6;opacity:.5}
.bench .reserve{fill:none;stroke:var(--brass);stroke-width:1.6;
  stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.bench .pip{stroke:var(--ink3);stroke-width:1.2;opacity:.55}
.bench .hh,.bench .mm{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.bench .ss{stroke:var(--brass);stroke-width:.9;stroke-linecap:round}
.bench .cap{fill:var(--ink)}
.bench .says{min-width:0}
.bench .where{font:600 8.5px/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink3)}
.bench .state{font:600 11px/1.4 var(--sans);letter-spacing:.05em;margin-top:9px}
.bench .next{font:400 11.5px/1.55 var(--sans);color:var(--ink2);margin-top:5px;
  font-variant-numeric:tabular-nums}

/* ------- the rate, in the corner of the dark chapter ------- */
.balance{display:flex;align-items:flex-start;gap:18px;
  margin-top:clamp(46px,6vw,80px);padding-top:24px;
  border-top:1px solid var(--nightline);max-width:52ch;margin-left:auto}
.balance .wheel{width:54px;height:54px;color:var(--brass2)}
.balance .k{font-family:var(--display);font-size:23px;color:var(--nightink);
  font-variant-numeric:tabular-nums;line-height:1}
.balance div p+p{margin-top:10px;font:400 12.5px/1.7 var(--sans);
  color:var(--nightink2)}

.hero .vert{position:absolute;left:calc(var(--pad) * -.55);top:50%;rotate:-90deg;
  transform-origin:center;font:600 9px/1 var(--sans);letter-spacing:.44em;
  text-transform:uppercase;color:var(--ink3)}
.hero .hint{position:absolute;left:50%;bottom:26px;translate:-50% 0;
  font:600 9px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;
  color:var(--ink3);display:flex;flex-direction:column;align-items:center;gap:12px}
.hint .rope{width:1px;height:46px;background:var(--line);overflow:hidden;
  position:relative}
.hint .rope::after{content:"";position:absolute;top:-40%;left:0;width:100%;
  height:40%;background:var(--brass);animation:drop 2.6s var(--ease) infinite}
@keyframes drop{to{top:110%}}

.band{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  overflow:hidden;padding:22px 0}
.band .run{display:flex;gap:60px;width:max-content;animation:slide 44s linear infinite}
html.no-motion .band .run{animation:none}
.band span{font-family:var(--display);font-size:clamp(18px,2.2vw,28px);
  color:var(--ink3);letter-spacing:.04em;white-space:nowrap}
.band span::after{content:"\2014";margin-left:60px;color:var(--brass);opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}

/* ------- the plate: one piece, given the room ------- */
.spread{display:grid;grid-template-columns:1.3fr 1fr;
  gap:clamp(20px,3.4vw,64px);align-items:center}
.plate-stage{position:relative;display:grid;place-items:center;aspect-ratio:1/.94}
.plate-stage img{position:relative;z-index:1;width:88%;object-fit:contain;
  mix-blend-mode:multiply}
.spread .said .rule{width:44px;height:1px;background:var(--accent);margin-bottom:20px}
.spread .said .t{font-family:var(--display);font-size:clamp(26px,3.4vw,48px);
  margin:0 0 16px;line-height:1.04}
.spread .said p{color:var(--ink2);max-width:38ch}
.spread .said .price{margin:24px 0 30px}
.spread .said .price .now{font-size:19px}
/* A journal note on the home page: longer lines, no price, a quiet link out. */
.spread.essay .said p{font-family:var(--serif);font-size:16.5px;line-height:1.7;
  max-width:42ch;margin:0 0 1.1em}
.spread.essay .said .t{margin-bottom:22px}
.spread.essay .said .link{margin-top:8px;display:inline-block}
.trio{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,30px);margin-top:clamp(34px,5vw,68px)}

/* ------- the pinned act ------- */
/* Light rooms hold objects, dark rooms hold only words: a photograph shot on a
   white sweep cannot be dissolved into a black page by any blend mode. */
.act{position:relative;background:var(--paper)}
.act .stagepin{position:relative;min-height:100svh;display:grid;place-items:center;
  overflow:clip}
.act .glow{position:absolute;width:78vmin;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,253,246,1),
    rgba(249,242,226,.62) 52%,rgba(240,231,212,.28) 70%,transparent 80%)}
.act img.big{position:relative;width:min(58vh,86vw);object-fit:contain;
  mix-blend-mode:multiply;will-change:transform}
.act .cap{position:absolute;max-width:290px;color:var(--ink2)}
.act .cap .t{font-family:var(--display);font-size:28px;margin:16px 0 12px;
  color:var(--ink)}
.act .cap p{font-size:13.5px}
.act .cap.a{left:max(6vw,calc(50vw - 660px));top:19%}
.act .cap.b{right:max(6vw,calc(50vw - 660px));bottom:17%;text-align:right}

/* ------- the dark chapters ------- */
.night{background:var(--deep);color:var(--nightink);position:relative;overflow:clip}
.night .eyebrow{color:var(--accent2)}
.night .chapter,.night .muted,.night p{color:var(--nightink2)}
.night h2,.night h3,.night .k{color:var(--nightink)}
.night .fascicle{border-bottom-color:var(--nightline)}
.night .fascicle .num{color:var(--nightink2)}
.night .btn{border-color:var(--nightink);color:var(--nightink)}
.night .btn>.wash{background:var(--nightink)}
.night .btn:hover{color:var(--night)}
.manifesto{text-align:center;max-width:1000px;margin:0 auto}
.manifesto .say{font-family:var(--display);font-weight:400;
  font-size:clamp(28px,4.4vw,60px);line-height:1.14;letter-spacing:-.02em}
.manifesto .say em{font-family:var(--serif);font-style:italic;color:var(--brass2)}
.manifesto .who{margin-top:34px;font:600 9.5px/1 var(--sans);letter-spacing:.4em;
  text-transform:uppercase;color:var(--nightink2)}
.tally{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--nightline)}
.tally div{padding:clamp(28px,3.2vw,48px) 22px;text-align:center;
  border-right:1px solid var(--nightline)}
.tally div:last-child{border-right:0}
.tally .k{font-family:var(--display);font-size:clamp(36px,5vw,66px);
  color:var(--brass2);line-height:1}
.tally .v{font:600 9px/1.6 var(--sans);letter-spacing:.28em;text-transform:uppercase;
  color:var(--nightink2);margin-top:16px}

/* A band of colour behind a whole section, to give the page a horizontal rhythm.
   The paper was one flat tone from the masthead to the foot, so nothing marked
   where one subject ended and the next began. Photographs are unaffected: every
   frame that blends into the paper already paints its own, so the tint runs behind
   them rather than through them. */
.section.tinted{background:var(--tint);
  border-top:1px solid var(--tint2);border-bottom:1px solid var(--tint2)}

/* ------- maison plates ------- */
.maisons{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line2);border-left:1px solid var(--line2)}
.maisons a{position:relative;padding:clamp(24px,2.6vw,38px) 18px 26px;
  text-align:center;border-right:1px solid var(--line2);
  border-bottom:1px solid var(--line2);overflow:hidden}
.maisons a::before{content:"";position:absolute;left:50%;top:34%;
  translate:-50% -50%;width:76%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,253,247,1),
    rgba(248,245,237,.5) 58%,transparent 76%);opacity:0;transition:opacity .6s}
.maisons a:hover::before{opacity:1}
.maisons img{position:relative;height:118px;margin:0 auto 20px;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .9s var(--slow)}
.maisons a:hover img{transform:translateY(-6px) scale(1.07)}
.maisons .n{position:relative;font-family:var(--display);
  font-size:clamp(17px,2vw,24px);display:block}
.maisons .c{position:relative;font:600 9px/1 var(--sans);letter-spacing:.26em;
  color:var(--accent);text-transform:uppercase;margin-top:10px;display:block}
/* Each plate wears its own house. The tile fills with the maison's tint on the way
   in and draws its colour along the foot, so the grid of eight reads as eight
   houses rather than eight identical white squares with different words in them. */
.maisons a{transition:background .5s var(--ease)}
.maisons a:hover{background:var(--tint)}
.maisons a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
.maisons a:hover::after{transform:scaleX(1)}

.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,72vw);
  gap:clamp(16px,2.2vw,30px);overflow-x:auto;padding:2px 2px 22px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--brass) var(--paper3)}
.shelf>*{scroll-snap-align:start}
/* A shelf is read sideways, so it keeps a rule to show how far along you are --
   but a hairline, not the page's own nine-pixel bar. */
.shelf::-webkit-scrollbar{height:2px}
.shelf::-webkit-scrollbar-track{background:var(--line2)}
.shelf::-webkit-scrollbar-thumb{background:var(--brass);border:0}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,44px)}
.step{position:relative;padding-top:28px;border-top:1px solid var(--line2)}
.step::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:1px;
  background:var(--brass)}
.step .no{font-family:var(--display);font-size:16px;color:var(--brass);
  letter-spacing:.12em}
.step .t{font-family:var(--serif);font-weight:500;font-size:23px;margin:14px 0 11px}
.step p{font-size:13.5px;color:var(--ink2)}

.steps4{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px)}
.steps4 li{padding-top:22px;border-top:1px solid var(--line2);
  display:flex;flex-direction:column;gap:10px}
.steps4 b{font-family:var(--serif);font-weight:500;font-size:18px;color:var(--ink)}
.steps4 span{font-size:13px;color:var(--ink2);line-height:1.55}
.steps4 em{font-style:normal;color:var(--ink)}
.path .disclaimer{margin-top:28px;font-size:12px;color:var(--ink3);max-width:52ch}
.chips.start{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 36px}
.chips.start a{font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink2);padding:11px 14px;border:1px solid var(--line2);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.chips.start a:hover{color:var(--brass);border-color:var(--brass)}

.oaths{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line2);border-left:1px solid var(--line2)}
.oath{padding:clamp(26px,3vw,42px);border-right:1px solid var(--line2);
  border-bottom:1px solid var(--line2)}
.oath .k{font-family:var(--serif);font-weight:500;font-size:20px;margin:16px 0 9px}
.oath p{font-size:13px;color:var(--ink2)}
.oath svg{color:var(--brass)}

/* The three ways to reach the house. This lives in a class rather than in a style
   attribute on the page, which is how it used to be written: an inline grid of
   three columns cannot be overridden by a media query, so a phone was handed three
   190px cards on a 390px screen and every contact page slid sideways. */
.channels{max-width:960px;margin:48px auto 0;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.channels .oath{text-align:center;padding:38px 26px}
.channels .oath .k{margin-top:0}
.channels .oath .btn{margin-top:20px}
@media (max-width:700px){.channels{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- the ledger
   A thousand watches are not a wall of tiles; they are an index. The rows are
   set like an auction catalogue and only the row under the hand is shown as a
   photograph, in the plate held at the left. One picture in flight instead of
   forty-eight, which is why the ledger is the faster of the two views. */
.views{display:flex;gap:2px;margin-left:auto;align-items:center}
.views button{font:600 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink3);padding:11px 15px;border:1px solid transparent;transition:.3s}
.views button[aria-pressed="true"]{color:var(--ink);border-color:var(--line2)}
.views button:hover{color:var(--brass)}

.book{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:start}
.easel{position:sticky;top:118px}
.easel .plate-stage{aspect-ratio:1;background:var(--stage)}
.easel .plate-stage img{width:84%;transition:opacity .28s var(--ease)}
.easel .plate-stage img.mounted,.hit img.mounted{mix-blend-mode:normal;
  object-fit:cover;border:1px solid var(--line)}
.easel .plate-stage img.mounted{width:78%;aspect-ratio:1}
.easel .said{margin-top:20px;border-top:1px solid var(--line2);padding-top:18px;
  min-height:112px}
.easel .said .b{font:600 9px/1 var(--sans);letter-spacing:.32em;color:var(--ink3);
  text-transform:uppercase}
.easel .said .n{font-family:var(--display);font-size:clamp(19px,2vw,26px);
  margin:12px 0 10px;line-height:1.1}
.easel .said .r{font:600 9.5px/1 var(--sans);letter-spacing:.2em;color:var(--ink3);
  text-transform:uppercase;font-variant-numeric:tabular-nums}
.easel .said .p{font:600 15px/1 var(--sans);margin-top:14px;
  font-variant-numeric:tabular-nums}
.easel .idle{color:var(--ink3);font-size:13px;line-height:1.7}

.ledger{border-top:1px solid var(--line)}
.ledger a{
  display:grid;grid-template-columns:52px 1fr 118px 92px;align-items:baseline;
  gap:16px;padding:15px 4px;border-bottom:1px solid var(--line2);
  position:relative;transition:padding-left .4s var(--slow),color .3s;
}
.ledger a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--paper2);z-index:-1;transition:width .45s var(--slow)}
.ledger a:hover::before,.ledger a[data-live]::before{width:100%}
.ledger a:hover,.ledger a[data-live]{padding-left:14px}
.ledger .no{font:600 10px/1.5 var(--sans);letter-spacing:.14em;color:var(--ink3)}
.ledger .n{font-family:var(--serif);font-size:17.5px;line-height:1.35}
.ledger .n small{display:block;font:600 8.5px/1 var(--sans);letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink3);margin-top:7px}
.ledger .r{font:600 10px/1.5 var(--sans);letter-spacing:.14em;color:var(--ink2);
  text-transform:uppercase}
.ledger .p{text-align:right;font:600 13.5px/1.4 var(--sans);
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--money)}
.ledger .p .now{font:700 13.5px/1 var(--sans);color:var(--money);
  -webkit-text-fill-color:var(--money)}
.ledger .p .was{font:500 10.5px/1 var(--sans);color:var(--sale);
  text-decoration:line-through;text-decoration-thickness:1.5px;
  -webkit-text-fill-color:var(--sale)}
.ledger .p .off{font:700 8.5px/1 var(--sans);letter-spacing:.1em;color:var(--sale);
  background:transparent;padding:2px 5px;border:1px solid rgba(180,35,24,.4);
  -webkit-text-fill-color:var(--sale)}
.ledger a[data-live] .n{color:var(--ink)}
.ledger a[data-live] .no{color:var(--brass)}

/* ------- search ------- */
.veil{position:fixed;inset:0;z-index:90;background:var(--paper);display:none;
  overflow:auto}
.veil.open{display:block}
.veil .inner{max-width:880px;margin:0 auto;padding:13vh var(--pad) 60px}
.veil input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  font:400 clamp(26px,4.6vw,46px)/1.3 var(--display);color:var(--ink);
  padding:12px 2px;outline:none}
.veil input::placeholder{color:var(--ink3)}
.hits{margin-top:24px}
.hit{display:flex;align-items:center;gap:20px;padding:12px 6px;
  border-bottom:1px solid var(--line2);transition:padding-left .3s}
.hit:hover{padding-left:14px}
.hit img{width:60px;height:60px;object-fit:contain;mix-blend-mode:multiply}
.hit .n{font-family:var(--serif);font-size:18px}
.hit .r{font:600 9.5px/1 var(--sans);letter-spacing:.2em;color:var(--ink3);
  text-transform:uppercase}
.hit .p{margin-left:auto;font:600 13.5px/1 var(--sans);
  display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.hit .p .was{font:500 11px/1 var(--sans);color:#a33a32;
  text-decoration:line-through;text-decoration-thickness:1.5px}
.hit .p .off{font:600 8.5px/1 var(--sans);letter-spacing:.12em;color:#a33a32}
.veil .close{position:absolute;top:26px;right:26px}

/* ------- one watch ------- */
/* The photograph gets the larger half and the words the smaller one. That is the
   whole difference between a page that sells a watch and a page about a watch:
   the visitor came to see the piece, and every millimetre given to the picture is
   taken from something they did not come for. */
.pdp{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(0,.94fr);
  gap:clamp(28px,4.2vw,84px);align-items:start;padding-top:clamp(24px,3vw,50px)}
.gallery{position:sticky;top:104px}
/* Three to four, matching the photographs. A square stage left them floating
   in empty paper; matching the stage to the frame lets the watch fill it. */
.gallery .main{position:relative;aspect-ratio:3/4;display:grid;place-items:center;
  overflow:hidden;cursor:grab;touch-action:pan-y}
.gallery .main.turning{cursor:grabbing}
/* Printed to the edges of its plate. The empty paper was already cut out of the
   file, so the inset that used to stand in for a margin now only makes the watch
   smaller for no reason. */
.gallery .main img{position:relative;z-index:1;width:100%;height:100%;
  object-fit:contain;mix-blend-mode:multiply}
/* Not every photograph was taken on a white sweep. A frame shot on a hand, a
   bench or a packed box has a background of its own, and multiplying it into
   the paper turns it into a grey smear -- which is exactly what looked broken.
   Those are mounted instead: printed square inside a hairline, the way a
   photograph is tipped into a catalogue page. */
.gallery .main.mounted img{mix-blend-mode:normal;width:88%;height:88%;
  object-fit:cover;border:1px solid var(--line2);background:var(--stage);
  box-shadow:0 16px 36px rgba(18,20,26,.1)}
.gallery .main.mounted>.lamp,.gallery .main.mounted>.shade{opacity:0}
.gallery .strip button img.mounted{mix-blend-mode:normal;object-fit:cover;
  border:1px solid var(--line)}
.gallery .zoomtip{position:absolute;bottom:10px;right:6px;z-index:3;
  font:600 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink3);display:flex;align-items:center;gap:8px}
.zoomtip .touch{display:none}
@media (hover:none),(max-width:960px){
  .zoomtip .mouse{display:none}
  .zoomtip .touch{display:inline}
}
/* the angles, marked out like the notches on a bezel */
.turns{position:absolute;left:6px;bottom:10px;z-index:3;
  display:flex;gap:6px;align-items:center}
.turns i{width:16px;height:1px;background:var(--line);transition:.4s var(--ease)}
.turns i.on{background:var(--brass);width:26px}
@media (hover:none){.turns{display:none}}

/* The other angles, kept in a row under the plate. Dimmed until chosen so the
   piece on the plate is never competing with five thumbnails of itself. */
/* Thumbnails are a fixed size and scroll if there are many. Sizing them as
   equal fractions of the row was wrong: a piece photographed once got a single
   thumbnail as large as the plate above it -- the same watch printed twice, which
   read as a fault rather than a gallery. */
.gallery .strip{display:flex;gap:9px;margin-top:14px;overflow-x:auto;
  padding-bottom:3px;scrollbar-width:none}
.gallery .strip::-webkit-scrollbar{display:none}
.gallery .strip button{flex:0 0 72px;width:72px;aspect-ratio:3/4;padding:0;
  opacity:.72;position:relative;transition:opacity .35s var(--ease)}
.gallery .strip button img{width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply}
.gallery .strip button:hover{opacity:.92}
.gallery .strip button[aria-current]{opacity:1}
/* The angle you are on is marked underneath, the way a page is marked -- not
   boxed in, which would put a frame around one watch and not the others. */
.gallery .strip button::after{content:"";position:absolute;left:50%;right:50%;
  bottom:0;height:1px;background:var(--brass);transition:.45s var(--ease)}
.gallery .strip button[aria-current]::after{left:22%;right:22%}

/* The loupe a dealer hands across the counter. It is the whole of the close
   inspection on this page -- nothing opens over the site and nothing has to be
   closed again. A mouse carries it; a held finger picks it up. */
.glass{position:absolute;z-index:2;width:210px;height:210px;border-radius:50%;
  pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  background-repeat:no-repeat;background-color:var(--paper2);
  box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(20,18,14,.18),
    inset 0 0 26px rgba(20,18,14,.06)}
.gallery .main.turning .glass{opacity:0!important}
/* A finger inspecting must not also be scrolling the page. */
.gallery .main.holding{touch-action:none}
.gallery .main.holding .glass{box-shadow:0 0 0 1px var(--brass),
  0 18px 40px rgba(20,18,14,.22),inset 0 0 26px rgba(20,18,14,.06)}

/* A few seconds of the piece turning, filed under the photographs rather than
   billed as a separate feature. The poster is the first frame of the film, so
   the page has a picture before anyone presses play. */
.gallery .reel{margin-top:18px;position:relative;aspect-ratio:3/4;
  background:var(--paper2);overflow:hidden}
.gallery .reel video{width:100%;height:100%;object-fit:contain;display:block;
  background:#0e0d0b}
.gallery .reel .cap{position:absolute;left:12px;bottom:10px;z-index:1;
  font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,252,245,.78);pointer-events:none}

.sheet .crumbs{font:600 9.5px/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink3);display:flex;gap:10px;flex-wrap:wrap}
.sheet .crumbs a:hover{color:var(--brass)}
/* Set to be read, not to compete. At fifty-two pixels the reference name was the
   largest thing on the page and the watch the second -- which is a poster for the
   words. The name only has to be legible; the photograph does the selling. */
.sheet h1{font-size:clamp(25px,2.3vw,35px);margin:16px 0 10px;
  letter-spacing:.004em}
.sheet .refline{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  font:600 9.5px/1 var(--sans);letter-spacing:.2em;color:var(--ink2);
  text-transform:uppercase}
.sheet .grade{color:var(--accent)}
.sheet .stock{display:flex;align-items:center;gap:8px}
.sheet .stock::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent)}
.sheet .price{margin:26px 0 4px}
.sheet .price .now{font-family:var(--sans);font-size:32px;font-weight:700;
  letter-spacing:-.02em;color:var(--money);-webkit-text-fill-color:var(--money)}
.sheet .price .was{font-size:16px;color:var(--sale)}
.sheet .price .off{font-size:10px;letter-spacing:.12em;padding:4px 7px;
  color:var(--sale);background:transparent;border:1px solid rgba(180,35,24,.4)}
.sheet .deal{font:500 12.5px/1.55 var(--sans);color:var(--ink);margin:10px 0 0;
  max-width:42ch}
.sheet .vat{font-size:12px;color:var(--ink3);margin-top:6px}
.sheet .readmore{font:500 12.5px/1.55 var(--sans);color:var(--ink2);margin:14px 0 0;
  max-width:48ch}
.sheet .readmore a{color:var(--brass);text-decoration:underline;
  text-underline-offset:3px}
.compare thead .opt .pr{display:flex;flex-direction:column;align-items:center;
  gap:6px}
.compare thead .opt .pr .now{font-family:var(--display);font-size:22px;line-height:1}
.compare thead .opt .pr .was{font:500 12px/1 var(--sans);color:#a33a32;
  text-decoration:line-through;text-decoration-thickness:1.5px}
.compare thead .opt .pr .off{font:600 9px/1 var(--sans);letter-spacing:.12em;
  color:#a33a32}

/* ------- the movement: a comparison, not two buttons -------
   Two calibres in one case is the only real decision on this page, and it
   cannot be taken from a name and a price. The two are set against each other
   row by row, the way a dealer would write it on a card, and each column beats
   at its own rate at the top so the one specification nobody pictures -- six
   beats a second against eight -- explains itself. */
.calibres,.lonecal,.choices{margin:30px 0 8px}
/* Scoped on purpose. A bare `.lbl` here also caught the label span every button
   on the site is dressed with, and painted every one of them the grey of a
   caption -- which turned "Order via WhatsApp" into illegible type on black and
   was the sort of fault that makes a careful page look careless. */
/* These small caps are the page's skeleton -- they are what tells a reader that a
   new subject has started. They were set at 9.5px in the palest grey the site
   owns, which measures 2.5:1 against the paper: under half the contrast a line of
   text needs to be legible at all, and at that size effectively invisible. The
   result was a page whose every division had been drawn and then rubbed out, so
   the only block that read as structured was the one with a border around it.
   Nothing was missing from the design; it simply could not be seen. */
.calibres>.lbl,.lonecal>.lbl,.choices>.lbl{font:600 11px/1 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink2);
  margin-bottom:18px}
.calibres>.lbl small,.lonecal>.lbl small{display:block;margin-top:9px;
  font:400 12.5px/1.6 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--ink2);max-width:46ch}

.compare{width:100%;border-collapse:collapse;table-layout:fixed}
.compare td,.compare th{vertical-align:top}
.compare thead td{width:22%}
.compare tbody th{text-align:left;font:600 9px/1.5 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);
  padding:13px 12px 13px 0;font-weight:600;white-space:nowrap}
.compare tbody td{font:400 12.5px/1.55 var(--sans);color:var(--ink2);
  padding:13px 14px;border-top:1px solid var(--line2);transition:.4s var(--ease)}
.compare tbody tr:last-child td{border-bottom:1px solid var(--line2)}
/* The column not taken is not hidden -- it is simply not the one in the light. */
.calibres[data-pick="0"] tbody td:nth-child(3),
.calibres[data-pick="1"] tbody td:nth-child(2){opacity:.42}
.calibres[data-pick="0"] tbody td:nth-child(2),
.calibres[data-pick="1"] tbody td:nth-child(3){color:var(--ink);
  background:linear-gradient(var(--paper2),var(--paper2))}

.compare thead .opt{display:flex;flex-direction:column;align-items:center;
  gap:9px;width:100%;padding:16px 10px 14px;border:1px solid var(--line2);
  border-bottom:0;transition:.4s var(--ease);position:relative}
.compare thead .opt:hover{border-color:var(--line)}
.compare thead .opt .nm{font:600 10px/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase}
.compare thead .opt .pr{font-family:var(--display);font-size:22px;line-height:1}
/* "On request" is a phrase, not a figure — set it smaller so the two columns
   still read as a choice of calibre rather than a price list with blank cells. */
.compare thead .opt .pr.ask{font:600 12px/1.2 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink2)}
  font-variant-numeric:tabular-nums}
/* Where the export disagreed with itself about a price, the lower one is shown
   and said to be a starting figure rather than presented as the whole truth. */
.compare thead .opt .pr i{font:600 8px/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink3);vertical-align:.35em}
.compare thead .opt .take{font:600 8px/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);opacity:0;transition:.4s var(--ease)}
.compare thead .opt[aria-pressed="true"]{border-color:var(--accent);
  background:var(--paper2)}
.compare thead .opt[aria-pressed="true"] .take{opacity:1}
.compare thead .opt[aria-pressed="false"] .wheel{opacity:.4}

.delta{margin-top:18px;font:400 13px/1.65 var(--sans);color:var(--ink2)}
.delta b{color:var(--ink);font-variant-numeric:tabular-nums}
.verdict{margin-top:14px;padding:16px 18px;background:var(--paper2);
  border-left:2px solid var(--brass);font:400 13px/1.7 var(--sans);
  color:var(--ink2)}
.verdict b{font:600 9.5px/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);display:block;margin-bottom:8px}
.calibres .foot{margin-top:12px;font-size:11.5px;color:var(--ink3)}

/* One movement only: then it is a fact about the watch, not a question. */
.lonecal .fact{display:flex;gap:16px;align-items:center;padding:16px 18px;
  border:1px solid var(--line2);background:var(--paper2)}
.lonecal .k{font:600 11px/1.4 var(--sans);letter-spacing:.1em}
.lonecal .fact p+p{margin-top:6px;font-size:12.5px;color:var(--ink2);
  line-height:1.6}

/* Bracelets and strap colours: a row of chips, priced. */
.choices .chips{display:flex;flex-wrap:wrap;gap:9px}
.choices .opt{display:flex;align-items:baseline;gap:11px;padding:13px 17px;
  border:1px solid var(--line2);transition:.3s var(--ease)}
.choices .opt:hover{border-color:var(--line)}
.choices .opt[aria-pressed="true"]{border-color:var(--accent);
  background:var(--paper2)}
.choices .opt b{font:600 10px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase}
.choices .opt span{font:500 12.5px/1 var(--sans);color:var(--ink2);
  font-variant-numeric:tabular-nums}

/* ------- the balance wheel -------
   Its half-period is set from the beat rate in the markup, so a wheel labelled
   28,800 A/h swings eight times a second because that is what the number says,
   not because a designer liked the speed. */
.wheel{display:block;width:34px;height:34px;flex:none}
.wheel svg{width:100%;height:100%;display:block;overflow:visible}
.wheel .rim{fill:none;stroke:currentColor;stroke-width:3.4}
.wheel .arm{stroke:currentColor;stroke-width:2;opacity:.7}
.wheel .hub{fill:none;stroke:currentColor;stroke-width:2;opacity:.85}
.wheel .screw{fill:none;stroke:currentColor;stroke-width:1.8}
.wheel.beating svg{animation:oscillate var(--half,.125s) linear infinite alternate}
@keyframes oscillate{from{rotate:-27deg}to{rotate:27deg}}
html.no-motion .wheel svg{animation:none}
.compare .wheel{color:var(--accent);width:38px;height:38px}

.order{display:grid;gap:11px;margin:26px 0 14px}
.order .btn{width:100%;padding:20px}
.whisper{font-size:12px;color:var(--ink3);text-align:center}
.whisper.pay-err{color:#a33a32;font-weight:500}

.acc{border-top:1px solid var(--line2);margin-top:32px}
.acc details{border-bottom:1px solid var(--line2)}
.acc summary{list-style:none;display:flex;justify-content:space-between;
  align-items:center;padding:20px 2px;cursor:pointer;font:600 10px/1 var(--sans);
  letter-spacing:.26em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font:400 19px/1 var(--display);color:var(--accent)}
.acc summary:hover{color:var(--accent)}
/* Open sections get a tinted spine, so a reader can see at a glance which of the
   four they have opened rather than having to re-read the headings. */
.acc details[open]{background:var(--tint);
  box-shadow:inset 2px 0 0 var(--accent);padding-left:14px;margin-left:-14px}
.acc details[open] summary::after{content:"\2212"}
.acc .body{padding:0 2px 26px;color:var(--ink2);font-size:15px;line-height:1.75}
.acc .body p{margin-bottom:14px}
/* The old shop's descriptions arrive as markup of their own, with headings and
   the odd specification list inside. They are given the page's manners rather
   than left to render as browser defaults. */
.acc .body h2,.acc .body h3,.acc .body h4{font-family:var(--serif);
  font-weight:500;font-size:16px;color:var(--ink);margin:20px 0 8px;
  letter-spacing:0}
.acc .body ul,.acc .body ol{margin:0 0 14px 18px}
.acc .body li{margin-bottom:6px}
.acc .body strong,.acc .body b{color:var(--ink)}
.acc .body table{width:100%;border-collapse:collapse;font-size:13px}
.acc .body td,.acc .body th{padding:9px 2px;text-align:left;
  border-bottom:1px solid var(--line2);font-weight:400}
.specs{width:100%;border-collapse:collapse;font-size:13.5px}
.specs td{padding:11px 2px;border-bottom:1px solid var(--line2)}
.specs td:first-child{color:var(--ink2);width:44%;font:600 10.5px/1.5 var(--sans);
  letter-spacing:.19em;text-transform:uppercase}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;
  align-items:center;gap:18px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line2);transform:translateY(115%);
  transition:transform .55s var(--slow)}
.dock.up{transform:none}
.dock img{width:44px;height:44px;object-fit:contain;mix-blend-mode:multiply}
.dock .n{font-family:var(--serif);font-size:16px;line-height:1.2}
.dock .p{font:700 14px/1 var(--sans);margin-top:5px;
  font-variant-numeric:tabular-nums;color:var(--money)}
.dock .btn{padding:15px 22px}
.dock [data-order]{margin-left:auto}
.dock [data-pay]{margin-left:0}

.scenes{margin-top:clamp(58px,8vw,128px)}
.scene{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(20px,4vw,72px);padding:clamp(28px,4vw,64px) 0}
.scene:nth-child(even) .shot{order:2}
.scene .shot{position:relative;display:grid;place-items:center;overflow:clip}
.scene .shot img{position:relative;z-index:1;width:88%;aspect-ratio:1;
  object-fit:contain;mix-blend-mode:multiply;will-change:transform}
/* A frame with a real background of its own is tipped in as a print and left
   alone -- no blending, and no slow crop that would eat its edges. */
.scene .shot.mounted img{mix-blend-mode:normal;object-fit:cover;
  border:1px solid var(--line);background:var(--paper2);
  box-shadow:0 22px 54px rgba(20,18,14,.14);will-change:auto}
/* A chapter mark inside a scene is still a chapter mark. `.scene .said p` carries
   two classes and an element and so quietly outranked `.chapter`, which is why
   these read as body grey however the chapter rule was written. */
.scene .said .chapter,.spread .said .chapter{color:var(--accent)}
.scene .said .rule{width:38px;height:1px;background:var(--accent);margin-bottom:18px}
.scene .said .t{font-family:var(--display);font-size:clamp(24px,3vw,38px);
  margin:0 0 14px;line-height:1.06}
.scene .said p{color:var(--ink2);max-width:38ch}

/* ------- the dossier: a page with almost no photographs -------
   Over half the catalogue arrived with too few frames to fill the scenes above, so
   these pages are carried by type instead. The figures are set at display size on
   purpose: a page with one photograph has nothing else heavy enough to stop the
   eye, and a row of small grey labels would leave it looking as thin as before. */
.dossier .figures{border-top:1px solid var(--line);padding-top:clamp(22px,3vw,34px)}
.dossier .row{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3vw,42px);margin:clamp(22px,3vw,36px) 0}
.dossier .fig{border-left:1px solid var(--tint2);padding-left:18px}
.dossier .fig .k{font:600 10px/1 var(--sans);letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink2);margin:0 0 12px}
.dossier .fig .v{font-family:var(--display);
  font-size:clamp(21px,2.4vw,31px);line-height:1.1;margin:0;
  font-variant-numeric:tabular-nums}
.dossier .aside{color:var(--ink2);font-size:13.5px;max-width:56ch;margin:0}
/* The description, brought out from behind its toggle and set to be read: the
   reading face, a measure that does not run past the eye, and room around it. */
.dossier .reading{margin-top:clamp(44px,6vw,86px);
  border-top:1px solid var(--line);padding-top:clamp(22px,3vw,34px)}
.dossier .reading .body{margin-top:clamp(18px,2.4vw,30px);max-width:64ch}
.dossier .reading .body p{font-family:var(--serif);font-size:17px;
  line-height:1.75;color:var(--ink);margin:0 0 1.1em}
.dossier .reading .body h2,.dossier .reading .body h3,
.dossier .reading .body h4{font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2vw,25px);line-height:1.15;margin:1.6em 0 .5em}
.dossier .reading .body table{width:100%;border-collapse:collapse;margin:1.4em 0}
.dossier .reading .body td,.dossier .reading .body th{text-align:left;
  padding:11px 14px 11px 0;border-bottom:1px solid var(--line2);
  font:500 14px/1.6 var(--sans);vertical-align:top}
.dossier .reading .body ul,.dossier .reading .body ol{margin:0 0 1.1em 1.1em;
  color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.75}
@media (max-width:640px){
  .dossier .fig{border-left:0;border-top:1px solid var(--tint2);
    padding:14px 0 0}
}

/* ------- in their words -------
   Client accounts are set as notes in a catalogue, not as cards in a widget: a
   rule above, the rating marked off on it like a scale, the words in the reading
   face, and the buyer's own photograph tipped in beside them. A rating is five
   marks on a rule rather than five stars, because everything else on this page
   is measured that way too -- and because a screen reader is told the figure. */
/* The spread of the ratings, stated before any of the words. A ledger that is
   all fives is the shape of a fabricated one, so the shape is shown first. */
.spread{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(26px,3.4vw,44px) 0;margin:clamp(30px,4vw,56px) 0}
.spread .mean .fig{font-family:var(--display);font-size:clamp(48px,7vw,86px);
  line-height:.9;display:block;margin-bottom:14px}
.spread .mean p{font:500 11px/1.8 var(--sans);letter-spacing:.06em;
  color:var(--ink3);margin-top:14px;max-width:34ch}
.spread .bars{display:grid;gap:9px}
.spread .bar{display:flex;align-items:center;gap:14px;
  font:600 10px/1 var(--sans);color:var(--ink3)}
.spread .bar .run{flex:1;height:1px;background:var(--line);position:relative}
.spread .bar .run i{position:absolute;left:0;top:0;height:1px;
  background:var(--brass)}
.spread .bar .c{width:3ch;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:760px){.spread{grid-template-columns:1fr}}

.says-lede{max-width:56ch;color:var(--ink2);margin:0 0 clamp(26px,3.4vw,44px)}
.says-lede a{color:var(--brass);border-bottom:1px solid var(--line)}
.notes{display:grid;gap:clamp(26px,3vw,46px)}
.said-note{border-top:1px solid var(--line);padding-top:22px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.said-note header{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 22px}
.scored{display:inline-flex;gap:5px;align-items:center}
.scored i{width:13px;height:2px;background:var(--line);display:block}
.scored i.on{background:var(--brass)}
.said-note .who{font:600 10px/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase}
.said-note .who span{color:var(--ink3);margin-left:12px;letter-spacing:.16em}
.said-note .when{margin-left:auto;font:500 10.5px/1.5 var(--sans);
  color:var(--ink3);display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.said-note .when .checked{color:var(--brass)}
.said-note .when .unchecked{color:var(--ink3);font-style:italic}
.said-note h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:0}
/* Somebody's own words are set in the reading face, like a letter tipped into
   the page, not in the interface face the price tags use. */
.said-note .body p{max-width:58ch;color:var(--ink);font-family:var(--serif);
  font-size:17px;line-height:1.72}
.said-note .theirs{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
/* A photograph taken at home is tipped in as a print -- never blended into the
   paper, which is a treatment reserved for our own sweep. */
.said-note .theirs img{width:170px;height:170px;object-fit:cover;
  border:1px solid var(--line);background:var(--paper2);
  transition:transform .5s var(--ease)}
.said-note .theirs a:hover img{transform:translateY(-3px)}
.said-note .theirs .whose{flex:1 1 200px;min-width:180px;font:500 10.5px/1.7
  var(--sans);color:var(--ink3);align-self:flex-end;max-width:34ch}
.said-note .reply{border-left:1px solid var(--brass);padding:2px 0 2px 18px;
  margin-left:2px}
.said-note .reply .k{font:600 9px/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:var(--brass);margin:0 0 8px}
.said-note .reply p{color:var(--ink2);max-width:58ch;margin:0}
/* Nothing to show is said out loud, and the invitation stands in its place. */
.says .none{border-top:1px solid var(--line);padding-top:24px;max-width:62ch}
.says .none .lede{font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);
  line-height:1.4;margin:0 0 16px}
.says .none p{color:var(--ink2)}
.says .none .row{display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  margin-top:26px}
@media (max-width:700px){
  .said-note .when{margin-left:0;width:100%}
  .said-note .theirs img{width:calc(50% - 7px);height:auto;aspect-ratio:1}
}

/* The wall of client photographs. Columns rather than a grid, so that a portrait
   wrist shot and a landscape shot of a watch on a desk each keep their own shape
   -- a wall where every frame has been cropped to the same square reads as stock,
   which is the one thing these pictures exist to disprove. */
.wall{columns:4 250px;column-gap:clamp(14px,1.6vw,24px)}
.pinned{break-inside:avoid;margin:0 0 clamp(14px,1.6vw,24px);
  border:1px solid var(--line);background:var(--paper);padding:9px 9px 15px}
.pinned img{width:100%;height:auto;display:block;background:var(--paper2);
  transition:transform .6s var(--ease),filter .6s var(--ease)}
.pinned a:hover img{transform:scale(1.02)}
.pinned figcaption{padding:14px 5px 0}
.pinned .who{font:600 9.5px/1.4 var(--sans);letter-spacing:.2em;
  text-transform:uppercase}
.pinned .who span{display:block;color:var(--ink3);letter-spacing:.14em;
  margin-top:5px;font-weight:500}
/* Their sentence is set in the reading face for the same reason a review is:
   it is a person talking, not a caption we wrote. */
.pinned .said{font-family:var(--serif);font-size:14px;line-height:1.66;
  color:var(--ink2);margin:11px 0 0}
.pinned .piece{display:inline-block;margin-top:11px;font:600 9px/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--line)}
.pinned .piece:hover{border-bottom-color:var(--accent)}
/* No column override on a phone: the 250px floor above already drops the wall to
   a single column on a narrow screen, which is the right answer here. Two columns
   fit, but at 90px a wrist shot stops being evidence and the sentence under it
   stops being readable -- and this page is nothing but those two things. */
@media (max-width:700px){.pinned{padding:7px 7px 13px}}

.nextprev{display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid var(--line2);padding:28px 0 0;margin-top:24px}
.nextprev a{display:flex;align-items:center;gap:16px;max-width:46%}
.nextprev img{width:58px;height:58px;object-fit:contain;mix-blend-mode:multiply}
.nextprev .l{font:600 9px/1 var(--sans);letter-spacing:.26em;color:var(--ink3);
  text-transform:uppercase}
.nextprev .n{font-family:var(--serif);font-size:16px;margin-top:8px;line-height:1.26}
.nextprev a:last-child{text-align:right;flex-direction:row-reverse}


/* ------- listings ------- */
.plp-head{padding:clamp(48px,7vw,104px) 0 clamp(22px,3vw,40px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);
  align-items:start}
/* The count hangs in the margin at the same optical height as the title, which
   sits one running head below the top of its column. */
.plp-head .num{font-family:var(--display);font-size:clamp(38px,5.4vw,74px);
  line-height:.78;color:var(--ink3);margin-top:26px}
.plp-head h1{font-size:clamp(38px,6vw,82px)}
.plp-head .running{font:600 9.5px/1 var(--sans);letter-spacing:.4em;
  text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.plp-head p{max-width:52ch;color:var(--ink2);margin-top:18px}
.tools-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:14px 0;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  margin-bottom:clamp(30px,4vw,50px)}
.tools-row select{background:none;color:var(--ink);border:1px solid var(--line2);
  font:600 11px/1 var(--sans);letter-spacing:.12em;padding:12px 14px}
.tools-row .count{font:600 9.5px/1 var(--sans);letter-spacing:.24em;
  color:var(--ink3);text-transform:uppercase;font-variant-numeric:tabular-nums}

/* ------- prose ------- */
.prose{max-width:720px;margin:0 auto}
.prose h1{font-size:clamp(38px,5.4vw,68px);margin:20px 0 14px}
.prose h2{font-family:var(--serif);font-weight:500;font-size:27px;margin:46px 0 14px}
.prose p,.prose li{color:var(--ink2);font-size:15.5px;margin-bottom:14px}
.prose ul{padding-left:20px}
.prose .lead{font-family:var(--display);font-size:clamp(19px,2.2vw,26px);
  line-height:1.36;color:var(--ink)}
.prose b{color:var(--ink)}

/* ------- the journal -------
   Set as a printed note rather than a blog post: one narrow measure of type, the
   contents out in the margin where a book puts them, and section heads that read
   as chapter heads. Nothing here is centred and nothing is boxed -- the two habits
   that make an article look automatically generated. */
.essay>header{padding-bottom:0}
.essay .eyebrow a{color:var(--brass);border-bottom:1px solid transparent}
.essay .eyebrow a:hover{border-bottom-color:var(--brass)}
.essay h1{font-size:clamp(36px,5.6vw,74px);max-width:22ch;margin:16px 0 0}
.essay .deck{font-family:var(--display);font-size:clamp(19px,2.3vw,27px);
  line-height:1.34;color:var(--ink2);max-width:38ch;margin-top:20px}
.essay .dateline{font:600 9.5px/1.7 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink3);margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line2);max-width:38ch}
.essay .column{display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start;
  padding:clamp(34px,5vw,64px) var(--pad) clamp(56px,8vw,110px)}

/* The contents sit still while the reading moves past them, which is what a
   ribbon in a book does. */
.bearings{position:sticky;top:110px}
.bearings .k{font:600 9px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink3);padding-bottom:14px;border-bottom:1px solid var(--line2)}
.bearings ol{list-style:none;counter-reset:b;margin-top:14px}
.bearings li{counter-increment:b;display:flex;gap:10px;padding:7px 0}
.bearings li::before{content:counter(b,decimal-leading-zero);
  font:600 9px/1.9 var(--sans);letter-spacing:.1em;color:var(--brass);
  font-variant-numeric:tabular-nums}
.bearings a{font-size:13px;line-height:1.5;color:var(--ink2)}
.bearings a:hover{color:var(--ink)}

.essay .running{max-width:66ch}
.essay .running>section+section{margin-top:clamp(38px,4.6vw,62px)}
.essay .running h2{font-family:var(--serif);font-weight:500;
  font-size:clamp(23px,2.6vw,30px);line-height:1.25;margin-bottom:18px;
  max-width:30ch;scroll-margin-top:120px}
.essay .running p,.essay .running li{font-family:var(--serif);font-size:16.5px;
  line-height:1.78;color:var(--ink2);margin-bottom:16px}
/* Reference numbers are the one kind of number on this site that must be read a
   digit at a time, so wherever one is set in bold it stands on a single baseline
   instead of in the text figures this face prefers for running prose. */
.essay .running b,.essay .deck,.terms dt{font-variant-numeric:lining-nums tabular-nums}
.essay .running b{color:var(--ink);font-weight:600}
.essay .running i{font-style:italic}
.essay .running ol,.essay .running ul{padding-left:22px;margin-bottom:16px}
.essay .running li{padding-left:4px}
/* The first line of the piece is set larger, as an opening line is in print. */
.essay .running>section:first-child>p:first-of-type{font-size:18px;
  line-height:1.7;color:var(--ink)}
/* A sentence lifted out of the running text, hung in the margin the way a
   printed note carries one. */
.essay .running .pull{font-family:var(--display);font-size:clamp(21px,2.4vw,28px);
  line-height:1.32;color:var(--ink);margin:34px 0;padding-left:24px;
  border-left:2px solid var(--brass);max-width:34ch}
.essay .signed{font:600 9.5px/1 var(--sans)!important;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink3);margin-top:clamp(40px,5vw,66px);
  padding-top:24px;border-top:1px solid var(--line2)}

/* Definitions, set as a glossary is set: term at the margin, meaning indented. */
.terms{margin-bottom:8px}
.terms dt{font:600 12px/1.6 var(--sans);letter-spacing:.06em;color:var(--ink);
  padding-top:18px;margin-top:18px;border-top:1px solid var(--line2);
  scroll-margin-top:120px}
.terms dd{font-family:var(--serif);font-size:15.5px;line-height:1.74;
  color:var(--ink2);margin:7px 0 0;max-width:60ch}
.essay .running .terms+*{margin-top:26px}

.mentions .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.onwards .pair{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,30px)}
.onward{border-top:1px solid var(--ink);padding-top:20px;display:block;
  transition:border-color .3s}
.onward:hover{border-top-color:var(--brass)}
.onward .b{display:block;font:600 9px/1 var(--sans);letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass)}
.onward .t{display:block;font-family:var(--display);font-size:clamp(20px,2.3vw,27px);
  line-height:1.22;color:var(--ink);margin:12px 0 8px}
.onward .d{display:block;font-family:var(--serif);font-size:14px;line-height:1.66;
  color:var(--ink3);max-width:40ch}

/* ------- the journal's own front page -------
   A contents page: one lead note given the room a lead article gets, then the
   shelf listed as lines rather than as a wall of identical rectangles. */
/* The listings' own head hangs a count in the margin and would squeeze a title
   that has no count to hang; the shelf sets its title against the note that
   explains it instead. */
/* The section already opens with its own air; the head does not need to add a
   second empty screen above the title. */
.journal-front{padding-top:0}
.front-head{padding:clamp(40px,6vw,92px) 0 clamp(24px,3.4vw,44px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end}
.front-head h1{font-size:clamp(38px,5.8vw,80px);margin-top:16px}
.front-head>p{font-family:var(--serif);font-size:15.5px;line-height:1.74;
  color:var(--ink2);max-width:48ch;padding-bottom:8px}
@media (max-width:860px){
  .front-head{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
}

.lead-note{display:grid;gap:12px;padding:clamp(28px,4vw,48px) 0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line2);
  margin-bottom:clamp(10px,1.6vw,20px)}
.lead-note .r{font:600 9px/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass)}
.lead-note .h{font-family:var(--display);font-size:clamp(30px,4.6vw,58px);
  line-height:1.06;color:var(--ink);max-width:26ch;
  transition:color .3s}
.lead-note:hover .h{color:var(--brass)}
.lead-note .d{font-family:var(--serif);font-size:16px;line-height:1.7;
  color:var(--ink2);max-width:52ch}
.lead-note .m{font:600 9px/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink3)}

.entries{border-bottom:1px solid var(--line2)}
.entry{display:grid;grid-template-columns:160px minmax(0,1fr) 70px;
  gap:clamp(14px,2.4vw,32px);align-items:baseline;padding:26px 0;
  border-top:1px solid var(--line2);transition:padding-left .35s}
.entry:hover{padding-left:10px}
.entry .r{font:600 9px/1.6 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink3)}
.entry:hover .r{color:var(--brass)}
.entry .t b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.2vw,26px);line-height:1.18;color:var(--ink)}
.entry .t i{display:block;font-family:var(--serif);font-style:normal;
  font-size:14px;line-height:1.66;color:var(--ink3);margin-top:8px;max-width:56ch;
  /* Reference numbers are read digit by digit, so they are set on one baseline
     rather than in the text figures this face uses by default. */
  font-variant-numeric:lining-nums tabular-nums}
.entry .m{font:600 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums}
.journal-front .whisper{margin-top:clamp(30px,4vw,52px)}
.journal-front .whisper a{color:var(--brass)}

@media (max-width:900px){
  .essay .column{grid-template-columns:minmax(0,1fr);
    padding-top:clamp(26px,4vw,40px)}
  /* On a phone the contents become a short list at the top, not a sticky rail
     eating a third of the screen. */
  .bearings{position:static;padding-bottom:26px;border-bottom:1px solid var(--line2)}
  .essay .running{max-width:none}
  .onwards .pair{grid-template-columns:minmax(0,1fr)}
  .entry{grid-template-columns:minmax(0,1fr) 60px;gap:12px}
  .entry .r{grid-column:1/-1;margin-bottom:-14px}
}

/* ------- the foot, with the time in four cities ------- */
footer.site{background:var(--deep);color:var(--nightink2);
  border-top:1px solid var(--line2)}
/* Every rule below is scoped to the footer element, because "foot" is also what
   the small print under the movement table is called. Unscoped, that paragraph
   was being handed the whole footer: laid out as a four-column grid with 52px of
   padding above it, and its one link painted in the pale ink meant for a dark
   footer and forced onto its own line. On 1,260 product pages. */
footer.site .foot{display:grid;gap:40px;
  grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  max-width:var(--wide);margin:0 auto;padding:clamp(52px,7vw,96px) var(--pad) 38px}
footer.site .foot h4{font:600 9.5px/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent2);margin-bottom:22px}
footer.site .foot a{display:block;padding:6px 0;color:var(--nightink2);
  font-size:13.5px;transition:color .25s,transform .25s}
footer.site .foot a:hover{color:var(--nightink);transform:translateX(3px)}
/* The foot styles its links as stacked rows, which would flatten the mark into
   two words with nothing between them. It keeps its own arrangement. */
footer.site .foot .brandmark{display:flex;align-items:center;gap:14px;padding:0;
  color:var(--nightink)}
footer.site .foot .brandmark:hover{transform:none}
footer.site .foot .brandmark .sep{background:var(--nightline)}
footer.site .foot .brandmark .word small{color:var(--nightink2)}
footer.site .foot .blurb{font-size:13.5px;max-width:34ch;margin-top:20px}

.clocks{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,64px);
  max-width:var(--wide);margin:0 auto;padding:26px var(--pad) 30px;
  border-top:1px solid var(--nightline)}
.clocks .face{display:flex;align-items:center;gap:13px}
.clocks svg{width:38px;height:38px;flex:none;overflow:visible}
.clocks .ring{fill:none;stroke:var(--nightline);stroke-width:1}
.clocks .pip{stroke:var(--nightink2);stroke-width:1;opacity:.5}
.clocks .hh,.clocks .mm{stroke:var(--nightink);stroke-width:1.4;
  stroke-linecap:round;transform-origin:50% 50%}
.clocks .ss{stroke:var(--brass2);stroke-width:.7;stroke-linecap:round;
  transform-origin:50% 50%}
.clocks .where{font:600 9px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;
  color:var(--nightink2)}
.clocks .when{font:500 12.5px/1 var(--sans);color:var(--nightink);margin-top:7px;
  font-variant-numeric:tabular-nums;letter-spacing:.06em}
.legal{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  max-width:var(--wide);margin:0 auto;padding:20px var(--pad) 32px;font-size:11.5px;
  color:var(--nightink2);opacity:.75;border-top:1px solid var(--nightline)}

.rise{opacity:0}
html.no-motion .rise{opacity:1}

/* ------- the first paint -------
   Everything the reveals are going to bring in is kept out of the opening frame,
   so a visitor never sees the page finished, snatched back and played again. The
   mark is lifted as soon as the reveals are wired, and by a timer if the scripts
   never come. Type is held too: splitting a headline before its own face has
   arrived cuts the lines in the wrong places. */
html.settling [data-split],html.settling .rise,html.settling .stagger>*{opacity:0}
/* The entrance is choreographed by its own script and so keeps its own mark,
   lifted by that script and not a moment earlier. */
html.settling-hero .hero h1,html.settling-hero .hero .stage>a,
html.settling-hero .hero .lede,html.settling-hero .hero .cta,
html.settling-hero .hero .eyebrow,html.settling-hero .hero .caption,
html.settling-hero .hero .hint,html.settling-hero .hero .vert,
html.settling-hero .hero .word-back{opacity:0}

@media (max-width:1180px){
  .maisons,.tally,.oaths{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr;gap:30px}
  .spread{grid-template-columns:1fr}
  .paperlines{display:none}
  .book{grid-template-columns:1fr}
  .easel{position:static;display:none}
}
@media (max-width:960px){
  .hero{min-height:auto;padding-bottom:70px}
  .hero .inner{grid-template-columns:1fr;padding-top:5vh;text-align:center}
  .hero .lede{margin-inline:auto}
  .hero .cta{justify-content:center}
  .hero .stage{min-height:auto;order:-1;margin-bottom:26px;padding-bottom:0}
  .hero .stage img{width:min(72vw,400px);max-height:46vh}
  .hero .caption{position:static;flex-direction:column;align-items:center;
    margin-top:18px}
  .hero .plate{text-align:center;max-width:none}
  .hero .vert,.hero .hint{display:none}
  .hero .word-back{font-size:30vw;bottom:-6vw}
  nav.main{display:none;position:fixed;inset:0;z-index:70;flex-direction:column;
    justify-content:center;align-items:center;gap:4px;background:var(--paper)}
  nav.main.open{display:flex}
  nav.main a{font-size:15px;letter-spacing:.3em;padding:16px}
  .burger{display:grid}
  .fascicle{grid-template-columns:auto 1fr;gap:16px}
  .fascicle .aside{display:none}
  .act .cap{position:static;max-width:none;text-align:left!important;
    padding:0 var(--pad)}
  .act .stagepin{min-height:auto;padding:48px 0;gap:30px}
  /* minmax(0,...) rather than 1fr, and a floor on the gallery itself: the
     thumbnail strip is a flex row of 88px buttons, so a piece photographed seven
     times reported a minimum width of 670px and dragged the whole product page
     that far past the screen. The strip is meant to scroll sideways inside the
     column, which it cannot do while it is setting the column's width. */
  .pdp{grid-template-columns:minmax(0,1fr)}
  .gallery,.sheet{min-width:0}
  .gallery{position:static}
  .scene{grid-template-columns:1fr}
  .scene:nth-child(even) .shot{order:0}
  /* A plain 1fr floors at the content's minimum width, and the brand paragraph's
     minimum is wider than half a phone -- so the link columns were squeezed to
     118px and pushed 32px past the screen edge, which set every page on the site
     sliding sideways under the thumb. The mark takes the full row; the three link
     lists share what is left, in columns that are allowed to shrink. */
  footer.site .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  footer.site .foot>div:first-child{grid-column:1/-1}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:30px 14px}
  .card h3{font-size:15.5px}
  .plp-head{grid-template-columns:1fr}
  .plp-head .num{display:none}
  .views{display:none}      /* the ledger wants a wide table; phones get plates */
  .turns{display:none}      /* the thumbnail row already says which angle it is */
  /* The comparison keeps all three columns on a phone -- cutting one out would
     take away the only thing it is for -- but tightens to make room. */
  .compare thead td{width:58px}
  .compare tbody th{font-size:8px;letter-spacing:.12em;padding:11px 8px 11px 0}
  .compare tbody td{font-size:11.5px;padding:11px 9px;line-height:1.5}
  .compare thead .opt{padding:12px 6px 11px;gap:7px}
  .compare thead .opt .pr{font-size:18px}
  .compare .wheel{width:30px;height:30px}
  .balance{margin-left:0}
  .ribbon{letter-spacing:.16em;gap:10px;font-size:8.5px;flex-wrap:wrap;
    row-gap:5px;white-space:normal;line-height:1.5;text-align:center}
  .brandmark .word small{display:none}
}
@media (max-width:560px){
  .maisons,.tally,.oaths{grid-template-columns:1fr}
  .steps,.steps4{grid-template-columns:1fr}
  .trustbar{gap:6px 14px;font-size:9px;letter-spacing:.1em;justify-content:flex-start}
  .dock [data-order]{margin-left:auto;padding:12px 14px}
  .dock [data-pay]{padding:12px 16px}
  .spread .trio{grid-template-columns:1fr 1fr}
  .clocks{gap:20px 26px}
  .dock .n{font-size:14px}
  .dock .btn{padding:14px 18px;font-size:9.5px}
}

/* ============================================================ shop / mobile
   Professional e-commerce layer on top of the house stylesheet. */
.shop-hero{min-height:100svh;padding:clamp(12px,2vh,28px) 0 clamp(48px,7vh,88px);
  display:grid;align-items:stretch}
.shop-hero .inner{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  align-items:center;gap:clamp(28px,4vw,64px);
  min-height:calc(100svh - 140px);padding-top:clamp(12px,3vh,36px)}
.shop-hero .hero-copy{position:relative;z-index:2;max-width:34rem}
.shop-hero .hero-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px}
.shop-hero .hero-links .link{font:600 11px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2)}
.shop-hero .hero-links .link:hover{color:var(--brass)}
.shop-hero .hint{bottom:18px}
.maison-band{border-color:var(--line2);background:var(--paper2)}
.maison-band .run{animation-duration:56s}
.cta.tight{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:22px}
.concierge-copy{text-align:center;max-width:640px;margin:0 auto}
.concierge-copy h2{font-family:var(--sans);font-weight:600;
  font-size:clamp(26px,3.6vw,40px);margin:16px 0 16px;letter-spacing:-.02em}
.concierge-copy .cta{justify-content:center;margin-top:28px}
.pdp-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 18px;
  margin:4px 0 18px;padding:0;font:600 10px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3)}
.pdp-trust li{padding:8px 0;border-bottom:1px solid var(--line2)}
.shop-grid{margin-top:8px}
.shop-rail .chips.start{margin-top:0}
body:has(.dock){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.dock{background:rgba(255,255,255,.94);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 -8px 28px rgba(18,20,26,.08);border-top:1px solid var(--line2)}
.dock img{background:var(--stage);border-radius:2px}

@media (max-width:960px){
  :root{--pad:clamp(16px,4vw,28px)}
  .ribbon{display:none}
  .trustbar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:10px;
    padding:10px var(--pad);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .trustbar::-webkit-scrollbar{display:none}
  .trustbar span{flex:0 0 auto;padding:7px 11px;border:1px solid var(--line2);
    background:var(--paper2);border-radius:2px;font-size:9px;letter-spacing:.08em}
  .masthead{padding:12px var(--pad);gap:12px}
  .brandmark .word{font-size:11px;letter-spacing:.18em}
  .tool{width:42px;height:42px}
  nav.main{background:rgba(255,255,255,.98);padding:88px var(--pad) 40px;
    justify-content:flex-start;align-items:stretch;gap:0}
  nav.main a{font:600 15px/1.2 var(--sans);letter-spacing:.08em;text-transform:none;
    padding:18px 4px;border-bottom:1px solid var(--line2);width:100%;text-align:left}
  nav.main a:hover,nav.main a[aria-current]{color:var(--brass)}
  .shop-hero{min-height:auto;padding:8px 0 28px}
  .shop-hero .inner{grid-template-columns:1fr;gap:14px;padding-top:4px;text-align:left;
    min-height:0}
  .shop-hero .stage{order:0;min-height:auto;margin:0;padding-bottom:8px}
  .shop-hero .stage img{width:min(88vw,420px);max-height:40vh}
  .shop-hero .caption{position:static;margin-top:10px;flex-direction:row;
    justify-content:space-between;align-items:flex-end;gap:12px}
  .shop-hero .plate{text-align:left;max-width:70%}
  .shop-hero .hero-copy{order:1;text-align:left;max-width:none}
  .shop-hero .brand-signal{font-size:clamp(30px,9vw,42px);margin:6px 0 10px}
  .shop-hero h1{font-size:clamp(24px,6.5vw,34px);margin-top:4px}
  .shop-hero .lede{margin:12px 0 18px;font-size:14.5px;max-width:36ch}
  .shop-hero .cta{flex-direction:column;align-items:stretch;gap:10px}
  .shop-hero .cta .btn{width:100%;justify-content:center;padding:17px 18px}
  .shop-hero .hero-links{justify-content:flex-start;margin-top:14px;gap:16px}
  .shop-hero .word-back,.shop-hero .vert,.shop-hero .hint{display:none}
  .maison-band{display:none}
  .band:not(.maison-band){display:none}
  .order .btn.brass{display:none}
  .dock [data-pay]{order:1}
  .dock [data-order]{order:2}
  .section{padding:clamp(36px,8vw,72px) 0}
  .fascicle{margin-bottom:20px;padding-bottom:14px}
  .fascicle h2{font-size:clamp(20px,5.5vw,28px)}
  .chips.start{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    margin:0 0 22px;padding-bottom:4px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .chips.start::-webkit-scrollbar{display:none}
  .chips.start a{flex:0 0 auto;padding:12px 14px;font-size:10px}
  .grid,.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .card .ph{aspect-ratio:1/1.15}
  .card h3{font-size:13.5px;margin:8px 0 4px}
  .card .b{font-size:8px;letter-spacing:.16em}
  .card .ref{display:none}
  .price{margin-top:8px}
  .price .now{font-size:13.5px}
  .price .was{font-size:11px}
  .steps4{gap:0;margin-top:18px}
  .steps4 li{padding:16px 0;border-top:1px solid var(--line2);gap:6px}
  .steps4 li:first-child{border-top:0;padding-top:0}
  .steps4 b{font-size:16px}
  .spread.essay{gap:22px}
  .shop-proof .plate-stage{max-width:280px;margin:0 auto}
  .shop-proof .t{font-size:clamp(22px,6vw,30px)}
  .act,.section.night{display:none}
  .shelf{gap:12px;padding-bottom:8px}
  .shelf .card{flex:0 0 min(46vw,200px)}
  .pdp{gap:22px;padding-top:12px}
  .gallery .main{aspect-ratio:1;border:1px solid var(--line2);background:var(--stage)}
  .gallery .strip{gap:8px;margin-top:10px}
  .gallery .strip button{flex:0 0 64px;width:64px}
  .sheet h1{font-size:clamp(22px,6vw,30px);margin:12px 0 8px}
  .sheet .price{margin:18px 0 2px}
  .sheet .price .now{font-family:var(--sans);font-weight:700;font-size:28px}
  .order{gap:10px;margin:20px 0 12px;display:flex;flex-direction:column}
  .order .btn{padding:16px;font-size:11px}
  .order [data-order="telegram"]{order:3}
  .pdp-trust{gap:8px 14px;font-size:9.5px}
  .whisper{text-align:left;font-size:11.5px;line-height:1.5}
  .dock{gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .dock img{width:40px;height:40px}
  .dock .n{font-family:var(--sans);font-weight:600;font-size:13px;
    max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dock .p{font-size:12px;margin-top:3px}
  .dock [data-order],.dock [data-pay]{flex:1;margin-left:0;text-align:center;
    padding:13px 10px;min-width:0}
  footer.site .foot{gap:22px;padding-top:36px}
  footer.site .clocks{display:none}
  .headtime{display:none}
}

@media (max-width:380px){
  .grid,.shop-grid{gap:14px 8px}
  .card h3{font-size:12.5px}
  .shop-hero h1{font-size:26px}
}

/* ---- desk commerce (tray / saved / compare / fit) ---- */
.head-tools .tool{position:relative}
.head-tools .tool i{position:absolute;top:4px;right:2px;min-width:14px;height:14px;
  padding:0 3px;border-radius:7px;background:var(--brass);color:#fff;
  font:700 9px/14px var(--sans);text-align:center}
.desk-bar{display:flex;flex-wrap:wrap;gap:14px 18px;margin:14px 0 8px}
.ghost-link{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);border-bottom:1px solid transparent;padding:0;background:none}
.ghost-link:hover,.ghost-link[aria-pressed=true]{color:var(--brass);
  border-color:var(--brass)}
.desk-list{display:flex;flex-direction:column;gap:16px}
.desk-row{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;
  padding-bottom:16px;border-bottom:1px solid var(--line2)}
.desk-row .ph{background:var(--stage);aspect-ratio:3/4;overflow:hidden}
.desk-row img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.desk-row .meta{display:flex;flex-direction:column;gap:4px}
.desk-actions{display:flex;gap:12px;margin-top:8px}
.desk-actions button{font:600 10px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3)}
.desk-total{display:flex;justify-content:space-between;align-items:baseline;
  margin:18px 0;font:600 14px/1 var(--sans)}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:22px}
.cmp-col img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--stage);
  mix-blend-mode:multiply}
.cmp-col ul{list-style:none;margin:12px 0 18px;font-size:13px;color:var(--ink2)}
.cmp-col li{padding:6px 0;border-top:1px solid var(--line2)}
.fit-form{display:grid;gap:16px;max-width:420px}
.fit-form label{display:grid;gap:6px;font:600 11px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.fit-form input,.fit-form select{font:500 15px/1.4 var(--sans);color:var(--ink);
  background:var(--paper2);border:1px solid var(--line);padding:12px 14px}
.proof-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin-top:8px}
.proof-strip blockquote{margin:0;padding:22px 0 0;border-top:1px solid var(--line);
  font:400 15px/1.55 var(--serif);color:var(--ink2)}
.proof-strip cite{display:block;margin-top:14px;font:600 10px/1.4 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--ink3)}
.timeline li.on b{color:var(--brass)}
/* ---- PLP shop (paginated catalogue — no 5k-node freeze) ---- */
.plp-shop{padding-bottom:48px}
.plp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding:14px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  position:sticky;top:64px;z-index:40;background:rgba(245,246,248,.94);
  backdrop-filter:blur(14px) saturate(140%)}
.plp-filter-btn{display:inline-flex;align-items:center;gap:10px;
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line);padding:12px 16px;background:var(--paper2)}
.plp-filter-btn i{min-width:18px;height:18px;border-radius:9px;background:var(--brass);
  color:#fff;font:700 10px/18px var(--sans);text-align:center}
.plp-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 4px}
.plp-chips button{font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);border:1px solid var(--line);padding:8px 12px;background:var(--paper2)}
.plp-more{display:flex;justify-content:center;padding:28px 0 8px}
.plp-empty{padding:48px 8px;text-align:center;display:grid;gap:16px;justify-items:center}
.plp-layout{display:block}
.plp-main{min-width:0}
.plp-sheet-mask{display:none}
.plp-rail.plp-sheet{margin:14px 0 8px;padding:4px 0 8px}
.plp-sheet-head{display:none}
.plp-sheet-foot{display:none}
.plp-sheet .tools-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  padding:0;border:0}
.plp-sheet .tools-row label{display:grid;gap:6px;font:600 9px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);flex:1 1 140px}
.plp-sheet .tools-row select,.tools-row select{
  font:500 13px/1.2 var(--sans);color:var(--ink);background:var(--paper2);
  border:1px solid var(--line);padding:11px 12px;width:100%;max-width:100%}
.plp-bar .count{margin-left:auto;font:600 9.5px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3)}
.plp-bar .views{display:flex;gap:0;border:1px solid var(--line)}
.plp-bar .views button{padding:10px 14px;font:600 9px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3)}
.plp-bar .views button[aria-pressed=true]{color:var(--ink);background:var(--paper2)}
.shop-grid .card .ph{aspect-ratio:3/4;background:var(--stage)}
@media (min-width:961px){
  .plp-filter-btn{display:none}
  .plp-layout{display:grid;grid-template-columns:220px minmax(0,1fr);
    gap:clamp(28px,3.5vw,48px);align-items:start;margin-top:8px}
  .plp-rail.plp-sheet{position:sticky;top:96px;margin:0;padding:0 0 24px;
    border:0;align-self:start;max-height:calc(100svh - 120px);overflow:auto}
  .plp-rail .plp-sheet-body.tools-row{display:grid;gap:14px;grid-template-columns:1fr}
  .plp-rail .plp-sheet-body label{flex:none}
  .plp-rail .plp-sheet-head,.plp-rail .plp-sheet-foot{display:none}
  .plp-rail[aria-hidden="true"]{visibility:visible;pointer-events:auto}
}
@media (max-width:960px){
  .proof-strip{grid-template-columns:1fr}
  .plp-filter-btn{display:inline-flex}
  .plp-bar{top:56px;gap:10px}
  .plp-bar .views{display:none}
  .plp-layout{display:block}
  .plp-rail.plp-sheet{position:fixed;left:0;right:0;bottom:0;z-index:120;margin:0;
    max-height:min(86vh,640px);overflow:auto;padding:0 0 env(safe-area-inset-bottom);
    background:var(--paper2);border-radius:16px 16px 0 0;
    box-shadow:0 -20px 60px rgba(0,0,0,.45);transform:translateY(110%);
    transition:transform .35s var(--ease);pointer-events:none;visibility:hidden}
  .plp-rail.plp-sheet.open{transform:translateY(0);pointer-events:auto;visibility:visible}
  .plp-sheet-mask{display:block;position:fixed;inset:0;z-index:110;
    background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}
  .plp-sheet-mask.open{opacity:1;pointer-events:auto}
  .plp-sheet-mask[hidden]{display:none!important}
  .plp-sheet-head{display:flex;justify-content:space-between;align-items:center;
    padding:18px var(--pad);border-bottom:1px solid var(--line2);
    position:sticky;top:0;background:var(--paper2);z-index:1}
  .plp-sheet-head strong{font:600 12px/1 var(--sans);letter-spacing:.18em;
    text-transform:uppercase}
  .plp-sheet-head button{font:600 11px/1 var(--sans);letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink3)}
  .plp-sheet-body{padding:16px var(--pad) 8px;display:grid;gap:14px}
  .plp-sheet-body label{flex:none}
  .plp-sheet-foot{display:flex;gap:10px;padding:12px var(--pad) 18px;
    position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--paper2) 28%);
    border-top:1px solid var(--line2)}
  .plp-sheet-foot .btn{flex:1;justify-content:center}
  html.plp-sheet-open,html.plp-sheet-open body{overflow:hidden}
}
@media (max-width:960px){
  .head-tools .tool[href*="saved"],.head-tools .tool[href*="cart"]{display:grid}
}

/* ============================================================ steel atmosphere
   Lookbook / QC film (Swiper) + homepage WebGL host + PhotoSwipe affordance. */
.shop-hero{position:relative;isolation:isolate}
/* No WebGL atmosphere — product photos carry the page. */
.shop-hero .gl-host{display:none!important}
.shop-hero .inner{position:relative;z-index:1}
.shop-hero .word-back{display:none}
.shop-hero .stage{box-shadow:none;border-radius:0;background:transparent}
.shop-look .swiper-button-prev,.shop-look .swiper-button-next{
  border-radius:0;box-shadow:none}

.shop-look{margin-top:10px;padding:4px 0 28px;overflow:visible}
.shop-look .swiper-slide{width:min(260px,72vw);height:auto}
.shop-look .swiper-slide .card{height:100%}
.shop-look .swiper-button-prev,.shop-look .swiper-button-next{
  color:var(--ink);width:42px;height:42px;margin-top:0;top:38%;
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:50%;backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(18,20,26,.08)}
.shop-look .swiper-button-prev:after,.shop-look .swiper-button-next:after{
  font-size:14px;font-weight:700}
.shop-look .swiper-pagination-bullet{background:var(--ink3);opacity:.45}
.shop-look .swiper-pagination-bullet-active{background:var(--brass);opacity:1}
@media (max-width:960px){
  .shop-look .swiper-button-prev,.shop-look .swiper-button-next{display:none}
}

.qc-film{padding-top:0}
.qc-film .film-head{margin-bottom:18px}
.qc-strip{overflow:hidden;padding:8px 0 20px}
.qc-strip .swiper-slide{width:min(200px,58vw);aspect-ratio:3/4;
  background:var(--stage);border:1px solid var(--line2);
  box-shadow:0 12px 28px rgba(18,20,26,.07);overflow:hidden}
.qc-strip .swiper-slide img{width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply}
.qc-strip .swiper-slide.mounted img{mix-blend-mode:normal;object-fit:cover}
.qc-strip .cap{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  font:600 9px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(12,13,16,.55)}
.qc-strip .swiper-slide{position:relative}

.gallery .main{cursor:zoom-in}
.gallery .main.turning{cursor:grabbing}
.gallery .zoomtip{color:var(--ink2);background:rgba(255,255,255,.88);
  padding:8px 10px;border:1px solid var(--line2);backdrop-filter:blur(6px)}
.pswp{--pswp-bg:rgba(245,246,248,.96)}

.lamp-tungsten .lit>.lamp,.shop-hero .lit>.lamp{
  background:radial-gradient(closest-side,
    rgba(255,244,220,1),rgba(201,166,107,.55) 48%,
    rgba(138,149,165,.18) 68%,transparent 82%)}