/*
  ============================================================
  Lam Timepieces - styles.css
  ------------------------------------------------------------
  The whole design system, in one file, in this order:

    1. :root tokens   - colours, fonts, easing. Dark mode
                        overrides these under
                        html[data-theme="dark"], so most
                        components never mention a colour
                        directly; they use var(--ink) etc.
    2. Base + type    - fluid sizes via clamp(), so text
                        scales with the window instead of
                        jumping at breakpoints.
    3. Chrome         - nav, footer, loader, page transition.
    4. Components     - cards, grids, galleries, marquees,
                        pull quotes, forms.
    5. Page-specific  - blocks prefixed per page (ct- contact,
                        sk- schematics, ta- the-art teaser,
                        pq- pull quotes, e404- error page).
    6. Motion         - every animation ends with a
                        prefers-reduced-motion block that
                        switches it off.

  CONVENTIONS
    - Class prefixes are page- or component-scoped so styles
      cannot leak between pages.
    - Anything animated continuously carries will-change and
      a layer promotion, otherwise it repaints on the main
      thread and drops frames.
    - Tap highlights are cleared globally; without that,
      phones paint a light blue box over tapped controls.

  Author   : Peerapat Lam
  Created  : 07/26/2026
  Modified : 08/16/2026
  ============================================================
*/
:root{
  --bg:#FFFFFF;
  --bg-alt:#F6F5F3;
  --ink:#131315;
  --ink-dim:#5B5B60;
  --charcoal:#1E1E21;
  --silver:#C9CCCF;
  --line:rgba(19,19,21,0.12);
  --line-soft:rgba(19,19,21,0.07);
  --navy:#283A63;
  --card-bg:#FFFFFF;
  --card-shadow:0 14px 40px rgba(19,19,21,0.08);
  --card-shadow-hover:0 22px 55px rgba(19,19,21,0.14);
  --radius:16px;
  --ease:cubic-bezier(.65,0,.35,1);
  --t-slow:.9s;
  --t-med:.5s;
  --t-fast:.28s;
}
[data-theme="dark"]{
  --bg:#111113;
  --bg-alt:#18181B;
  --ink:#F3F2EF;
  --ink-dim:#A6A6AC;
  --charcoal:#EDEDEA;
  --silver:#48484D;
  --line:rgba(255,255,255,0.13);
  --line-soft:rgba(255,255,255,0.07);
  --navy:#8CA1D6;
  --card-bg:#1A1A1D;
  --card-shadow:0 14px 40px rgba(0,0,0,0.45);
  --card-shadow-hover:0 22px 55px rgba(0,0,0,0.55);
}
@media (prefers-reduced-motion: reduce){ :root{ --t-slow:.01s; --t-med:.01s; --t-fast:.01s; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); font-size:clamp(14px, 0.42vw + 9.5px, 23px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Manrope',sans-serif; font-size:1rem; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
h1,h2,h3,h4{ font-family:'Playfair Display',serif; font-weight:600; margin:0; letter-spacing:-0.01em; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img,svg{ max-width:100%; display:block; }
::selection{ background:var(--ink); color:var(--bg); }

.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); display:inline-flex; align-items:center; gap:.6em; }
.eyebrow::before{ content:''; width:16px; height:1px; background:var(--navy); display:inline-block; }
.meta{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:2px; }

/* ---------- loader ---------- */
#loader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; transition:transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease); }
#loader.hide{ transform:translateY(-100%); opacity:.4; pointer-events:none; }
.loader-mark{ font-family:'Playfair Display',serif; font-size:1.3rem; letter-spacing:.02em; color:var(--ink); }
.loader-line{ width:200px; height:1px; background:var(--line-soft); position:relative; }
.loader-line-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--navy); }
.loader-percent{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--ink-dim); }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:clamp(16px, 2.2vw, 44px); padding:22px 5vw; transition:background .45s var(--ease), padding .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease); border-bottom:1px solid transparent; backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); background:rgba(255,255,255,.36); }
.nav.scrolled{ background:rgba(255,255,255,.80); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%); padding:14px 5vw; border-color:var(--line-soft); }
[data-theme="dark"] .nav.scrolled{ background:rgba(17,17,19,.80); }
.nav-mark{ font-family:'Playfair Display',serif; font-size:1.15rem; letter-spacing:.01em; white-space:nowrap; display:flex; align-items:center; gap:10px; }
.brand-mark{ width:26px; height:26px; color:var(--ink); flex-shrink:0; transition:transform .45s var(--ease); }
.nav-mark:hover .brand-mark{ transform:rotate(20deg); }
.footer-mark{ display:flex; align-items:center; gap:10px; }
.footer-mark .brand-mark{ color:#EDEDEA; }
[data-theme="dark"] .footer-mark .brand-mark{ color:#111113; }
.loader-brand-mark{ width:50px; height:50px; color:var(--ink); }
.loader-hand-h{ transform-origin:22px 22px; animation:loader-hand-spin 2.6s linear infinite; }
.loader-hand-m{ transform-origin:22px 22px; animation:loader-hand-spin 1.7s linear infinite reverse; opacity:.55; }
@keyframes loader-hand-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .loader-hand-h, .loader-hand-m{ animation:none; } .nav-mark:hover .brand-mark{ transform:none; } }
.nav-tabs{ display:flex; gap:clamp(2px, 0.5vw, 8px); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; min-width:0; position:relative; }
.nav-tabs::-webkit-scrollbar{ display:none; }
.nav-tab{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; padding:9px 15px; border-radius:100px; position:relative; z-index:1; transition:color var(--t-fast) var(--ease); }
.nav-tab:hover{ color:var(--ink); }
.nav-tab.active{ color:var(--ink); }
.nav-pill{ position:absolute; top:0; bottom:0; left:0; width:0; background:var(--bg-alt); border:1px solid var(--line-soft); border-radius:100px; z-index:0; opacity:0; transition:left .38s var(--ease), width .38s var(--ease), opacity .25s ease; box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){ .nav-pill{ transition:opacity .25s ease; } }
.nav-right{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.theme-toggle{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:border-color .2s ease, transform .2s var(--ease); }
.theme-toggle:active{ transform:scale(.9); }
.theme-toggle.spinning{ animation:toggle-spin .5s var(--ease); }
@keyframes toggle-spin{ 0%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(180deg) scale(.82); } 100%{ transform:rotate(360deg) scale(1); } }
.theme-toggle:hover{ border-color:var(--navy); }
.btn{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:transparent; border:1px solid var(--ink); padding:11px 20px; display:inline-block; position:relative; overflow:hidden; z-index:0; transition:color var(--t-fast) var(--ease), transform .16s var(--ease); }
.btn::after{ content:''; position:absolute; inset:-1px; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .34s var(--ease); z-index:-1; }
.btn:hover{ color:var(--bg); }
.btn:hover::after{ transform:scaleX(1); }
.btn:active{ transform:scale(.965); }
.btn-solid{ background:var(--ink); color:var(--bg); }
.btn-solid::after{ background:var(--navy); }
.btn-solid:hover{ color:#fff; }

/* ---------- layout ---------- */
.wrap{ max-width:77.5rem; margin:0 auto; padding:0 clamp(20px, 5vw, 44px); }
.section{ padding:110px 0; }
.section.tight{ padding:70px 0; }
.section.alt{ background:var(--bg-alt); }
.section-head{ max-width:40rem; margin-bottom:56px; display:flex; flex-direction:column; gap:16px; }
.headline{ font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.08; }
.hero-headline{ font-size:clamp(2.6rem, 6.4vw, 5.2rem); line-height:1.02; }
.body-text{ font-size:1.02rem; color:var(--ink-dim); line-height:1.75; max-width:56ch; }
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal[data-reveal="scale"]{ transform:translateY(22px) scale(.95); }
.reveal[data-reveal="scale"].in{ transform:translateY(0) scale(1); }
.reveal[data-reveal="left"]{ transform:translateX(-42px); }
.reveal[data-reveal="left"].in{ transform:translateX(0); }
.reveal[data-reveal="right"]{ transform:translateX(42px); }
.reveal[data-reveal="right"].in{ transform:translateX(0); }
.reveal[data-reveal="clip"]{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease); }
.reveal[data-reveal="clip"].in{ clip-path:inset(0 0 0% 0); }
@media (prefers-reduced-motion: reduce){ .reveal{ transition:opacity .01s linear; transform:none !important; clip-path:none !important; } }

/* ---------- hero ---------- */
.hero{ min-height:96vh; display:flex; align-items:center; padding:120px 0 110px; position:relative; overflow:hidden; }
.hero-media{ position:absolute; top:50%; right:3vw; width:min(38vw, 40rem); aspect-ratio:1/1; height:auto; margin-top:max(-19vw, -20rem); z-index:0; }
.hero-media svg{ width:100%; height:100%; }
.hero-dial{ color:var(--ink); opacity:.88; }
.hero-seconds{ transform-origin:320px 320px; animation:dial-run 60s linear infinite; }
.hero-minute-hand{ transform-origin:320px 320px; animation:dial-run 3600s linear infinite; }
@keyframes dial-run{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hero-seconds, .hero-minute-hand{ animation:none; } }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(100deg, var(--bg) 12%, rgba(255,255,255,.55) 48%, transparent 66%), linear-gradient(180deg, transparent 60%, var(--bg) 96%); }
[data-theme="dark"] .hero-scrim{ background:linear-gradient(100deg, var(--bg) 12%, rgba(17,17,19,.55) 48%, transparent 66%), linear-gradient(180deg, transparent 60%, var(--bg) 96%); }
@media (min-width:821px) and (max-width:1220px){ .hero-media{ width:46vw; right:-9vw; } .hero-dial{ opacity:.4; } .hero-content{ max-width:min(45rem, 62vw); } }
@media (max-width:820px){ .hero-media{ width:92vw; right:-28vw; margin-top:max(-46vw, -300px); } .hero-dial{ opacity:.16; } .hero-content{ max-width:100%; } }
.hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; gap:22px; max-width:min(45rem, 52vw); margin:0; margin-left:calc((100% - min(77.5rem, 100%)) / 2); }
.scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%) translateY(16px) scale(0.92); display:flex; flex-direction:column; align-items:center; gap:11px; opacity:0; transition:opacity .8s var(--ease) 1.1s, transform .8s var(--ease) 1.1s; background:none; border:none; cursor:pointer; z-index:1; padding:8px 12px; }
@media (max-height:760px){ .scroll-cue{ display:none; } }
body.loaded .scroll-cue{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.scroll-cue-label{ font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); transition:color .25s ease; }
.scroll-cue:hover .scroll-cue-label{ color:var(--ink); }
.scroll-track{ width:1px; height:46px; background:var(--line); position:relative; transition:background .25s ease; }
.scroll-cue:hover .scroll-track{ background:var(--ink-dim); }
.scroll-cue-dot{ position:absolute; top:0; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--navy); animation:cue-sweep 2s var(--ease) infinite; }
@keyframes cue-sweep{ 0%{ top:-2px; opacity:0; } 18%{ opacity:1; } 72%{ opacity:1; } 100%{ top:calc(100% - 3px); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue-dot{ animation:none; top:50%; } }

/* ---------- cards ---------- */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{ background:var(--card-bg); border-radius:var(--radius); overflow:hidden; box-shadow:var(--card-shadow); transition:transform .35s var(--ease), box-shadow .35s var(--ease); display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-7px); box-shadow:var(--card-shadow-hover); }
.card:active{ transform:translateY(-3px) scale(.99); }
.card-media{ aspect-ratio:4/3; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-media svg{ transition:transform .55s var(--ease); }
.card:hover .card-media svg{ transform:scale(1.06) rotate(-1deg); }
.card-media svg{ width:72%; height:72%; }
.card-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; }
.card-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.card-title{ font-family:'Playfair Display',serif; font-size:1.3rem; }
.card-sub{ font-size:.86rem; color:var(--ink-dim); line-height:1.6; }
.card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:14px; }
.rating{ font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--navy); }

.masonry{ column-count:3; column-gap:28px; }
.masonry .card{ break-inside:avoid; margin-bottom:28px; }
@media (max-width:900px){ .masonry{ column-count:2; } }
@media (max-width:640px){ .masonry{ column-count:1; } }

/* ---------- article typography ---------- */
.article-body{ display:flex; flex-direction:column; gap:22px; max-width:68ch; }
.article-body p{ font-size:1.08rem; line-height:1.85; color:var(--ink); }
.article-body h3{ font-size:1.5rem; margin-top:14px; }
.pull-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-pill{ font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); border-radius:100px; padding:6px 14px; background:transparent; transition:color .22s ease, border-color .22s ease, background .22s ease, transform .18s var(--ease); }
.tag-pill:hover{ color:var(--ink); border-color:var(--navy); transform:translateY(-1px); }
.tag-pill:active{ transform:translateY(0) scale(.95); }
.tag-pill.active{ color:var(--ink); border-color:var(--navy); }

/* ---------- watch detail ---------- */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid var(--line-soft); }
.spec-table tr:last-child{ border-bottom:none; }
.spec-table th,.spec-table td{ text-align:left; padding:14px 0; font-weight:400; }
.spec-table th{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); width:45%; }
.spec-table td{ color:var(--ink); }
.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:640px){ .pros-cons{ grid-template-columns:1fr; } }
.pros-cons ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.pros-cons li{ font-size:.94rem; color:var(--ink-dim); line-height:1.6; padding-left:20px; position:relative; }
.pros-cons li::before{ content:'—'; position:absolute; left:0; color:var(--navy); }
.score-badge{ display:flex; align-items:center; gap:14px; }
.score-number{ font-family:'Playfair Display',serif; font-size:3.2rem; color:var(--ink); }
.score-label{ font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
.gallery-strip{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
@media (max-width:700px){ .gallery-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.gallery-strip .card-media{ aspect-ratio:1/1; border-radius:12px; }

/* ---------- forms ---------- */
.form-grid{ display:flex; flex-direction:column; gap:16px; max-width:480px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.form-field input, .form-field textarea, .form-field select{ background:var(--bg-alt); border:1px solid var(--line); padding:12px 14px; color:var(--ink); font-family:'Manrope',sans-serif; font-size:.94rem; outline:none; border-radius:8px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus{ border-color:var(--navy); }
.confirm-note{ font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--navy); margin-top:4px; }
.confirm-note[hidden]{ display:none; }

/* ---------- back to top ---------- */
.back-to-top{ position:fixed; bottom:26px; right:26px; width:54px; height:54px; border-radius:50%; background:var(--bg); color:var(--ink); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; z-index:90; transition:opacity .3s ease, transform .35s var(--ease), border-color .25s ease, color .25s ease, box-shadow .3s ease; box-shadow:0 10px 26px rgba(19,19,21,.14); }
.back-to-top.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ border-color:var(--navy); color:var(--navy); transform:translateY(-3px); box-shadow:0 14px 30px rgba(40,58,99,.22); }
.back-to-top:active{ transform:translateY(-1px) scale(.94); }
.btt-knurl{ transform-origin:24px 24px; transition:transform .55s var(--ease); }
.back-to-top:hover .btt-knurl{ transform:rotate(22deg); }
.back-to-top:active .btt-knurl{ transform:rotate(48deg); transition-duration:.25s; }
@media (prefers-reduced-motion: reduce){ .btt-knurl{ transition:none; } }

/* ---------- footer ---------- */
footer{ background:var(--charcoal); color:#EDEDEA; padding:64px 5vw 36px; display:flex; flex-direction:column; gap:36px; }
[data-theme="dark"] footer{ color:#111113; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center; }
.footer-mark{ font-family:'Playfair Display',serif; font-size:1.2rem; }
.footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.footer-links a:hover{ opacity:1; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:'JetBrains Mono',monospace; font-size:.66rem; opacity:.6; letter-spacing:.04em; }

@media (max-width:700px){
  .section{ padding:80px 0; }
  .hero{ padding:150px 0 70px; }
}

/* ---------- logo ---------- */
.logo-mark{ display:block; }
.nav-brand{ display:flex; align-items:center; gap:11px; }
.nav-brand .logo-mark{ width:27px; height:27px; color:var(--ink); transition:transform .45s var(--ease); }
.nav-brand:hover .logo-mark{ transform:rotate(25deg); }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand .logo-mark{ width:22px; height:22px; }

/* ---------- loader with animated logo ---------- */
.loader-logo{ width:60px; height:60px; color:var(--ink); }
.loader-logo .logo-minute{ transform-origin:24px 24px; animation:logo-sweep 1.5s var(--ease) infinite; }
.loader-logo .logo-hour{ transform-origin:24px 24px; animation:logo-sweep 5.4s linear infinite; }
@keyframes logo-sweep{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .loader-logo .logo-minute, .loader-logo .logo-hour{ animation:none; } }

/* ---------- page transitions ---------- */
/* Between-page transition: a fast, minimal fade with a slim progress
   sweep along the top edge and a small running logo mark. Deliberately
   much lighter than the full first-visit loader above. */
#pageTransition{ position:fixed; inset:0; z-index:300; background:var(--bg); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; will-change:opacity; transform:translateZ(0); backface-visibility:hidden; transition:opacity .22s cubic-bezier(.4,0,.2,1); }
.pt-bar{ position:absolute; top:0; left:0; right:0; height:2px; overflow:hidden; }
.pt-bar::after{ content:''; position:absolute; top:0; left:-45%; width:45%; height:100%; background:var(--navy); animation:pt-sweep .85s var(--ease) infinite; }
@keyframes pt-sweep{ to{ left:100%; } }
.pt-mini{ position:relative; width:46px; height:46px; color:var(--ink); opacity:0;
  transform:scale(.9); transition:opacity .2s var(--ease), transform .32s var(--ease); }
.pt-mini::before{ content:""; position:absolute; inset:-11px; border-radius:50%;
  border:1px solid currentColor; opacity:.16; }
.pt-mini::after{ content:""; position:absolute; inset:-11px; border-radius:50%;
  border:1px solid transparent; border-top-color:var(--navy); opacity:.85;
  animation:pt-orbit 1.15s linear infinite; }
@keyframes pt-orbit{ to{ transform:rotate(360deg); } }
.pt-mini .logo-mark{ width:100%; height:100%; }
.pt-mini .logo-minute{ transform-origin:24px 24px; animation:logo-sweep 1.2s var(--ease) infinite; }
.pt-mini .logo-hour{ transform-origin:24px 24px; animation:logo-sweep 4.5s linear infinite; }
#pageTransition.cover{ opacity:1; pointer-events:auto; }
#pageTransition.cover .pt-mini{ opacity:1; transform:scale(1); }
#pageTransition.uncover{ opacity:1; animation:pt-fade-out .3s cubic-bezier(.4,0,.2,1) forwards; }
#pageTransition.uncover .pt-mini{ opacity:1; transform:scale(1); }
@keyframes pt-fade-out{ to{ opacity:0; } }
html.nav-return #pageTransition{ opacity:1; pointer-events:auto; }
html.nav-return #loader{ display:none; }
@media (prefers-reduced-motion: reduce){
  #pageTransition.cover{ transition:none; }
  #pageTransition.uncover{ animation:none; transform:translateY(102%); }
}

/* ---------- content entrance + parallax ---------- */
main{ opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease) .05s, transform .6s var(--ease) .05s; }
body.loaded main{ opacity:1; transform:none; }
[data-parallax]{ will-change:transform; }
@media (prefers-reduced-motion: reduce){ main{ transition:none; opacity:1; transform:none; } }

/* ---------- reveal polish: soft blur + card scale ---------- */
.reveal{ filter:blur(6px); }
.reveal.in{ filter:blur(0); }
.reveal{ transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.card.reveal{ transform:translateY(24px) scale(.96); filter:none; }
.card.reveal.in{ transform:translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce){ .reveal{ filter:none !important; } }

/* ---------- form focus micro-interactions ---------- */
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(40,58,99,.14); }
[data-theme="dark"] .form-field input:focus, [data-theme="dark"] .form-field textarea:focus, [data-theme="dark"] .form-field select:focus{ box-shadow:0 0 0 3px rgba(140,161,214,.18); }
.form-field input, .form-field textarea, .form-field select{ transition:border-color .22s ease, box-shadow .22s ease; }

/* ---------- brand marquee ---------- */
.brand-marquee{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:20px 0; overflow:hidden; background:var(--bg); }
.marquee-track{ display:flex; width:max-content; will-change:transform; transform:translateZ(0); animation:marquee 34s linear infinite; }
.brand-marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; padding-right:70px; display:inline-flex; align-items:center; gap:70px; }
.marquee-item::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--navy); opacity:.5; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ---------- stats strip ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:28px; }
@media (max-width:760px){ .stats-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.stat{ display:flex; flex-direction:column; gap:6px; border-left:1px solid var(--line); padding-left:20px; }
.stat-num{ font-family:'Playfair Display',serif; font-size:clamp(2.2rem, 4vw, 3.2rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-label{ font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- real photography ---------- */
.card-media img{ display:none; width:100%; height:100%; object-fit:cover; }
.card-media.has-photo img{ display:block; }
.card-media.has-photo > svg, .card-media.has-photo > .watch-icon-slot{ display:none; }
.card-media img{ transition:transform .55s var(--ease); }
.card:hover .card-media img{ transform:scale(1.05); }
.watch-gallery{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:12px; }
.watch-gallery button{ border:none; padding:0; background:none; cursor:pointer; border-radius:10px; overflow:hidden; aspect-ratio:1/1; opacity:.75; transition:opacity .25s ease, transform .25s var(--ease); }
.watch-gallery button:hover{ opacity:1; transform:translateY(-2px); }
.watch-gallery button.active{ opacity:1; outline:2px solid var(--navy); outline-offset:2px; }
.watch-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-cover{ border-radius:var(--radius); overflow:hidden; margin:42px 0 10px; aspect-ratio:16/9; background:var(--bg-alt); box-shadow:var(--card-shadow); }
.article-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-cover[hidden]{ display:none; }
.photo-note{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); opacity:.7; margin-top:10px; }


/* ---------- theme switch ---------- */
.theme-switch{ position:relative; width:54px; height:27px; border-radius:100px; border:1px solid var(--line); background:var(--bg-alt); display:flex; align-items:center; justify-content:space-between; padding:0 7px; cursor:pointer; transition:border-color .25s ease, background .25s ease; flex-shrink:0; }
.theme-switch:hover{ border-color:var(--navy); }
.ts-icon{ font-size:.6rem; color:var(--ink-dim); line-height:1; pointer-events:none; }
.ts-knob{ position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:var(--ink); transition:transform .32s var(--ease), background .25s ease; box-shadow:0 2px 6px rgba(0,0,0,.18); }
[data-theme="dark"] .ts-knob{ transform:translateX(27px); background:var(--navy); }
.theme-switch:active .ts-knob{ width:24px; }


/* ---------- article extras ---------- */
.article-body p:first-of-type::first-letter{ font-family:'Playfair Display',serif; font-size:3.3em; float:left; line-height:.82; padding:.04em .12em 0 0; color:var(--ink); }
.read-progress{ position:fixed; top:0; left:0; width:100%; height:3px; background:var(--navy); transform:scaleX(0); transform-origin:left; z-index:150; }

/* ---------- home: spotlight, photo band, follow CTA ---------- */
.spotlight-media{ aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; box-shadow:var(--card-shadow); }
.spotlight-media img{ width:100%; height:100%; object-fit:cover; display:none; }
.spotlight-media.has-photo img{ display:block; }
.spotlight-media.has-photo svg{ display:none; }
.photo-band{ position:relative; height:64vh; min-height:24rem; overflow:hidden; display:none; background:var(--charcoal); }
.photo-band.has-photo{ display:block; }
.band-bg{ position:absolute; top:-40px; left:-40px; width:calc(100% + 80px); height:calc(100% + 80px); object-fit:cover; filter:blur(32px) brightness(.55) saturate(1.05); transform:scale(1.12); transition:opacity .9s var(--ease); }
.band-slide{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; padding:2.4rem clamp(1rem, 4vw, 3rem); box-sizing:border-box; opacity:0; transform:translateX(9%); transition:opacity .75s var(--ease), transform .75s var(--ease); pointer-events:none; }
.band-slide.active{ opacity:1; transform:translateX(0); }
.band-slide.exit{ opacity:0; transform:translateX(-9%); }
.band-fg{ display:block; height:100%; width:auto; max-width:min(88%, 60rem); object-fit:contain; border-radius:18px; filter:drop-shadow(0 24px 50px rgba(0,0,0,.5)); }
.band-dots{ position:absolute; z-index:2; right:5vw; bottom:26px; display:flex; gap:10px; }
.band-dots button{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.35); cursor:pointer; padding:0; transition:background .25s ease, transform .25s var(--ease); }
.band-dots button:hover{ transform:scale(1.3); }
.band-dots button.active{ background:#fff; }
@media (prefers-reduced-motion: reduce){ .band-slide{ transition:none; } .band-bg{ transition:none; } }
.photo-band-caption{ position:absolute; z-index:2; left:5vw; bottom:26px; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.6); transition:opacity .3s ease; }
#follow .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }

/* ---------- navigation UX: crumbs, pager, footer grid ---------- */
.crumb{ display:table; font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:20px; transition:color .22s ease, transform .22s var(--ease); }
.crumb:hover{ color:var(--ink); transform:translateX(-3px); }
.pager{ display:flex; justify-content:space-between; align-items:center; gap:24px; }
.pager-link{ display:flex; flex-direction:column; gap:7px; max-width:19rem; }
.pager-next{ text-align:right; align-items:flex-end; }
.pager-name{ font-family:'Playfair Display',serif; font-size:1.08rem; color:var(--ink); transition:color .22s ease; }
.pager-link:hover .pager-name{ color:var(--navy); }
@media (max-width:700px){ .pager{ flex-direction:column; align-items:stretch; text-align:center; } .pager-next{ text-align:center; align-items:center; } .pager-link{ max-width:100%; align-items:center; } }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.footer-col{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.footer-head{ font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; opacity:.5; margin-bottom:10px; }
.footer-col a{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.72; padding:4px 0; transition:opacity .2s ease, transform .2s var(--ease); }
.footer-col a:hover{ opacity:1; transform:translateX(3px); }
.footer-tagline{ font-size:.88rem; line-height:1.7; opacity:.65; max-width:30ch; margin-top:12px; }

/* ---------- gallery rotation on cards ---------- */
.card-media{ position:relative; }
.card-media.has-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .55s var(--ease), transform .55s var(--ease); }

/* ---------- contact ---------- */
.contact-direct{ border:1px solid var(--line-soft); background:var(--bg-alt); border-radius:var(--radius); padding:24px 26px; display:flex; flex-direction:column; gap:8px; }
.contact-email{ font-family:'Playfair Display',serif; font-size:1.35rem; color:var(--ink); transition:color .22s ease; word-break:break-all; }
.contact-email:hover{ color:var(--navy); }
.form-card{ background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--card-shadow); padding:32px 34px 28px; display:flex; flex-direction:column; gap:16px; }
.form-field.error input, .form-field.error textarea{ border-color:#B4453A; box-shadow:0 0 0 3px rgba(180,69,58,.12); }

/* ---------- watch gallery: arrows, counter, zoom ---------- */
#wHero.has-photo{ cursor:zoom-in; }
#wHero.zoomed{ cursor:zoom-out; }
#wHero img#wPhoto{ transition:opacity .55s var(--ease), transform .28s ease-out; }
#wHero.zoomed img#wPhoto{ transform:scale(2.4); }
.gal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.6); backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%); color:#131315; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .25s ease, background .2s ease, transform .2s var(--ease); }
.gal-prev{ left:14px; }
.gal-next{ right:14px; }
#wHero:hover .gal-nav, #wHero:focus-within .gal-nav{ opacity:1; }
.gal-nav:hover{ background:rgba(255,255,255,.92); }
.gal-nav:active{ transform:translateY(-50%) scale(.9); }
.gal-zoom{ position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.6); backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%); color:#131315; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .25s ease, background .2s ease, transform .2s var(--ease); }
#wHero:hover .gal-zoom, #wHero:focus-within .gal-zoom, #wHero.zoomed .gal-zoom{ opacity:1; }
.gal-zoom:hover{ background:rgba(255,255,255,.92); }
.gal-zoom:active{ transform:scale(.9); }
#wHero.zoomed .gal-zoom .zplus{ display:none; }
.gal-count{ position:absolute; z-index:3; right:14px; bottom:14px; background:rgba(0,0,0,.5); color:#fff; padding:5px 12px; border-radius:100px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:.64rem; letter-spacing:.1em; }
#wHero.zoomed .gal-nav, #wHero.zoomed .gal-count{ opacity:0; pointer-events:none; }
@media (hover:none){ .gal-nav, .gal-zoom{ opacity:1; } }

/* ---------- band slider: modern upgrades ---------- */
.band-slide.active .band-fg{ animation:kenburns 5s var(--ease) forwards; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.045); } }
@media (prefers-reduced-motion: reduce){ .band-slide.active .band-fg{ animation:none; } }
.photo-band::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:34%; background:linear-gradient(180deg, transparent, rgba(0,0,0,.45)); z-index:1; pointer-events:none; }
.band-dots button{ width:9px; transition:width .35s var(--ease), background .25s ease, transform .25s var(--ease); }
.band-dots button.active{ width:30px; border-radius:100px; background:#fff; }
.band-dots button.active:hover{ transform:none; }
.band-nav{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35); color:#fff; opacity:0; }
.photo-band:hover .band-nav{ opacity:1; }
.band-nav:hover{ background:rgba(255,255,255,.34); }
@media (hover:none){ .band-nav{ opacity:1; } }
.photo-band-caption{ transition:opacity .3s ease, transform .3s ease; }

/* ---------- interactive hero dial ---------- */
.hero-media{ perspective:1100px; }
.hero-dial{ transition:transform .3s ease-out; transform-style:preserve-3d; }

/* ---------- moonphase twinkle ---------- */
.hero-dial .mp-star{ animation:mp-twinkle 3.4s ease-in-out infinite; }
@keyframes mp-twinkle{ 0%, 100%{ opacity:.3; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero-dial .mp-star{ animation:none; } }

/* ---------- photo gallery masonry + lightbox ---------- */
.masonry{ columns:4 15rem; column-gap:16px; }
.m-item{ break-inside:avoid; margin:0 0 16px; position:relative; border-radius:12px; overflow:hidden; cursor:zoom-in; background:var(--bg-alt); }
.m-item:not(.has-photo){ display:none; }
.m-item img{ width:100%; display:block; transition:transform .5s var(--ease); }
.m-item:hover img{ transform:scale(1.045); }
.m-cap{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:30px 14px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.6)); color:#fff; font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; opacity:0; transition:opacity .3s ease; pointer-events:none; }
.m-item:hover .m-cap{ opacity:1; }
.lightbox{ position:fixed; inset:0; z-index:250; background:rgba(10,10,13,.93); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox .gal-nav{ opacity:1; position:absolute; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); color:#fff; }
.lightbox .gal-nav:hover{ background:rgba(255,255,255,.3); }
.lb-prev{ left:26px; top:50%; transform:translateY(-50%); }
.lb-next{ right:26px; top:50%; transform:translateY(-50%); }
.lb-close{ top:24px; right:26px; transform:none; }
.lb-close:active{ transform:scale(.9); }
.lb-meta{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; color:#fff; font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; text-align:center; }
@media (max-width:700px){ .lb-prev{ left:10px; } .lb-next{ right:10px; } }

/* ---------- sort/filter pill bar ---------- */
.sort-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:-18px 0 38px; }
.sort-label{ margin-right:6px; opacity:.55; }
.sort-btn{ font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); background:transparent; border:1px solid var(--line); border-radius:100px; padding:8px 15px; cursor:pointer; transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--ease); }
.sort-btn:hover{ color:var(--ink); border-color:var(--navy); transform:translateY(-1px); }
.sort-btn.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.grid.sorting, .masonry.sorting{ opacity:.25; transition:opacity .18s ease; }
.grid, .masonry{ transition:opacity .25s ease; }
.m-item.filtered-out{ display:none; }

/* ---------- brand wordmark: per-letter roll on hover ---------- */
/* Each letter holds two stacked copies inside a 1-line-tall clip window.
   On hover the stack slides up one line with a per-letter stagger, so a
   wave rolls through the name revealing a navy italic copy underneath. */
.brand-word{ display:inline-flex; align-items:baseline; }
.bl{ display:inline-block; height:1.28em; overflow:hidden; }
.bl-sp{ display:inline-block; width:.28em; }
.bl-in{ display:flex; flex-direction:column; transition:transform .42s var(--ease); transition-delay:calc(var(--i) * 26ms); }
.bl-in span{ display:block; height:1.28em; line-height:1.28em; }
.bl-in span:last-child{ color:var(--navy); font-style:italic; }
.nav-brand:hover .bl-in{ transform:translateY(-1.28em); }
@media (prefers-reduced-motion: reduce){
  .bl-in{ transition:none; }
  .nav-brand:hover .bl-in{ transform:none; }
  .nav-brand:hover .bl-in span:first-child{ color:var(--navy); }
}

/* ---------- gallery discovery cues (Wrist Check page) ---------- */
.gallery-jump .jump-chev{ display:inline-block; margin-left:9px; animation:jump-bounce 1.6s var(--ease) infinite; }
@keyframes jump-bounce{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@media (prefers-reduced-motion: reduce){ .gallery-jump .jump-chev{ animation:none; } }
.scroll-cue-inline{ position:static; opacity:1; transform:none; transition:opacity .3s ease; }
body.loaded .scroll-cue-inline{ transform:none; }
@media (max-height:760px){ .scroll-cue-inline{ display:flex; } }

/* ---------- movement diagram (Automatic vs Quartz article) ---------- */
.mv-diagram{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:36px 0; }
@media (max-width:700px){ .mv-diagram{ grid-template-columns:1fr; } }
.mv-panel{ background:var(--bg-alt); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px 18px 14px; margin:0; }
.mv-panel svg{ width:100%; height:auto; color:var(--ink); display:block; }
.mv-panel figcaption{ font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); text-align:center; margin-top:12px; }
.mv-gear, .mv-gear-rev, .mv-balance, .mv-step{ transform-box:fill-box; transform-origin:center; }
.mv-gear{ animation:mv-spin 9s linear infinite; }
.mv-gear-rev{ animation:mv-spin 6s linear infinite reverse; }
@keyframes mv-spin{ to{ transform:rotate(360deg); } }
.mv-balance{ animation:mv-osc .55s ease-in-out infinite alternate; }
@keyframes mv-osc{ from{ transform:rotate(-40deg); } to{ transform:rotate(40deg); } }
.mv-crystal{ animation:mv-vibe .09s linear infinite alternate; }
@keyframes mv-vibe{ from{ transform:translateY(0); } to{ transform:translateY(-1.1px); } }
.mv-step{ animation:mv-tick 60s steps(60, end) infinite; }
.mv-step-hand{ transform-box:fill-box; transform-origin:bottom center; animation:mv-tick 60s steps(60, end) infinite; }
@keyframes mv-tick{ to{ transform:rotate(360deg); } }
.mv-pulse{ animation:mv-flow 1s linear infinite; }
@keyframes mv-flow{ 0%{ transform:translateX(0); opacity:1; } 45%{ opacity:1; } 55%{ opacity:0; } 60%{ transform:translateX(93px); opacity:0; } 70%{ transform:translateX(0); opacity:0; } 100%{ transform:translateX(0); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .mv-gear, .mv-gear-rev, .mv-balance, .mv-crystal, .mv-step, .mv-step-hand, .mv-pulse{ animation:none; }
}

/* ---------- hero watch-name rotator ---------- */
.hero-rotator{ height:1.7em; overflow:hidden; font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(1.15rem, 1.9vw, 1.7rem); color:var(--navy); margin-top:-6px; }
.rot-track{ display:flex; flex-direction:column; }
.rot-name{ display:block; height:1.7em; line-height:1.7em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rot-track.rot-go{ transform:translateY(-1.7em); transition:transform .5s var(--ease); }

/* ---------- collection rail (homepage auto-slider) ---------- */
.rail-wrap{ position:relative; }
.rail-wrap::before, .rail-wrap::after{ content:''; position:absolute; top:0; bottom:20px; width:6vw; z-index:2; pointer-events:none; }
.rail-wrap::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.rail-wrap::after{ right:0; background:linear-gradient(-90deg, var(--bg), transparent); }
.watch-rail{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; padding:4px 5vw 18px; }
.watch-rail::-webkit-scrollbar{ display:none; }
.watch-rail .card{ flex:0 0 clamp(250px, 24vw, 340px); scroll-snap-align:start; }
.rail-nav{ opacity:0; position:absolute; top:38%; z-index:3; }
.rail-prev{ left:18px; }
.rail-next{ right:18px; }
.rail-wrap:hover .rail-nav{ opacity:1; }
@media (hover:none){ .rail-nav{ opacity:1; } }

/* ---------- article diagram extras ---------- */
.mv-solo{ grid-template-columns:minmax(0, 460px); justify-content:center; }
.mnt-drop{ animation:mnt-drip 2.4s ease-in infinite; }
@keyframes mnt-drip{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 55%{ transform:translateY(46px); opacity:1; } 62%{ transform:translateY(50px); opacity:0; } 100%{ transform:translateY(0); opacity:0; } }
.mnt-crown{ transform-box:fill-box; transform-origin:center; animation:mv-spin 7s linear infinite; }
.inh-flow{ animation:inh-flow 1.8s linear infinite; }
@keyframes inh-flow{ 0%{ transform:translate(0,0); opacity:0; } 12%{ opacity:1; } 78%{ opacity:1; } 92%{ transform:translate(58px, var(--ty, 0px)); opacity:0; } 100%{ transform:translate(0,0); opacity:0; } }
.bgd-float{ animation:bgd-float 3.4s ease-in-out infinite alternate; }
.bgd-b{ animation-delay:.4s; } .bgd-c{ animation-delay:.8s; } .bgd-d{ animation-delay:1.2s; }
@keyframes bgd-float{ from{ transform:translateY(-2.5px); } to{ transform:translateY(2.5px); } }
.art-stroke{ stroke-dasharray:190; animation:art-draw 4s ease-in-out infinite; }
@keyframes art-draw{ 0%{ stroke-dashoffset:190; } 55%{ stroke-dashoffset:0; } 80%{ stroke-dashoffset:0; opacity:1; } 95%{ opacity:0; } 100%{ stroke-dashoffset:190; opacity:0; } }

/* ---------- watch profile section icons ---------- */
.sec-ico{ width:42px; height:42px; display:block; margin-bottom:10px; color:var(--ink); }
.ico-sweep{ transform-box:view-box; transform-origin:center; animation:mv-spin 8s linear infinite; }
.ico-wobble{ transform-box:fill-box; transform-origin:center; animation:ico-wobble 2.4s ease-in-out infinite; }
@keyframes ico-wobble{ 0%, 100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
.ico-pend{ transform-box:fill-box; transform-origin:bottom center; animation:ico-pend 1.15s ease-in-out infinite alternate; }
@keyframes ico-pend{ from{ transform:rotate(-24deg); } to{ transform:rotate(24deg); } }
.ico-slide{ animation:ico-slide 3s ease-in-out infinite alternate; }
@keyframes ico-slide{ from{ transform:translateX(-2.5px); } to{ transform:translateX(2.5px); } }
.ico-cuff{ animation:ico-cuff 3.6s ease-in-out infinite; }
@keyframes ico-cuff{ 0%, 20%{ transform:translateX(0); } 45%, 70%{ transform:translateX(-7px); } 95%, 100%{ transform:translateX(0); } }
.ico-ring{ transform-box:fill-box; transform-origin:center; animation:ico-ring 2.6s ease-out infinite; }
.ico-ring2{ animation-delay:1.3s; }
@keyframes ico-ring{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.1); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .mnt-drop, .mnt-crown, .inh-flow, .bgd-float, .art-stroke,
  .ico-sweep, .ico-wobble, .ico-pend, .ico-slide, .ico-cuff, .ico-ring{ animation:none; }
}

/* ---------- "Things I love" heading icon ---------- */
.love-head{ display:flex; align-items:center; gap:14px; }
.sec-ico-inline{ margin-bottom:0; flex:0 0 auto; }
.ico-heart{ transform-box:fill-box; transform-origin:center; animation:heartbeat 1.7s ease-in-out infinite; }
@keyframes heartbeat{ 0%, 100%{ transform:scale(1); } 12%{ transform:scale(1.18); } 24%{ transform:scale(1); } 36%{ transform:scale(1.1); } 50%{ transform:scale(1); } }
.ico-heart-fly{ animation:heart-fly 2.8s ease-in-out infinite; }
@keyframes heart-fly{ 0%, 55%{ transform:translateY(0); opacity:0; } 62%{ opacity:.85; } 92%{ transform:translateY(-9px); opacity:0; } 100%{ transform:translateY(0); opacity:0; } }

/* ---------- rail progress: railway minute track + winding crown ---------- */
.rail-foot{ display:flex; align-items:center; gap:18px; margin:14px 5vw 0; }
.rail-progress{ position:relative; height:24px; background:none; border-radius:0; overflow:visible; flex:1; }
.rail-date{ font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.1em; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:5px 10px; background:var(--bg-alt); white-space:nowrap; }
.rail-progress .rail-track{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); }
.rail-progress .rail-track::before{ content:''; position:absolute; left:0; right:0; top:-3px; height:7px; background:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 9px); opacity:.7; }
.rail-progress .rail-track::after{ content:''; position:absolute; left:0; right:0; top:-5px; height:11px; background:repeating-linear-gradient(90deg, var(--ink-dim) 0 1px, transparent 1px 45px); opacity:.55; }
.rail-progress .rail-fill{ position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px; background:var(--navy); transform:scaleX(0); transform-origin:left; }
.rail-progress .rail-thumb{ position:absolute; left:0; top:0; width:26px; height:26px; color:var(--ink); background:var(--bg); border-radius:50%; box-shadow:0 0 0 1px var(--line); will-change:transform; }
.rail-progress .rail-thumb .logo-mark{ width:100%; height:100%; display:block; }
.rail-progress .rail-thumb svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 2px 5px rgba(19,19,21,.18)); }
@media (prefers-reduced-motion: reduce){ .ico-heart, .ico-heart-fly{ animation:none; } }

/* ---------- rail thumb clockwork: hands wind as the collection slides ---------- */
.rail-thumb .logo-minute, .rail-thumb .logo-hour{ transform-box:view-box; transform-origin:center; }

/* ---------- card money strip: paid vs market with flipping coin ---------- */
.card-money{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.05em; color:var(--ink-dim); }
.money-coin{ width:15px; height:15px; flex:0 0 15px; color:var(--navy); animation:coin-flip 3.2s ease-in-out infinite; }
@keyframes coin-flip{ 0%, 100%{ transform:scaleX(1); } 50%{ transform:scaleX(0.12); } }
.money-sep{ opacity:.55; }
.money-mkt.up{ color:#3E7C58; }
.money-mkt.down{ color:#9C4A42; }
[data-theme="dark"] .money-mkt.up{ color:#6FBF8F; }
[data-theme="dark"] .money-mkt.down{ color:#D08B84; }
@media (prefers-reduced-motion: reduce){ .money-coin{ animation:none; } }

/* ---------- how-to-wear diagram ---------- */
.wd-loose{ animation:wd-wander 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes wd-wander{ 0%, 100%{ transform:translateX(-9px) rotate(-4deg); } 50%{ transform:translateX(9px) rotate(4deg); } }
.wd-pulse{ transform-box:fill-box; transform-origin:center; animation:wd-pulse 2.6s ease-out infinite; }
.wd-pulse2{ animation-delay:1.3s; }
@keyframes wd-pulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.7); opacity:0; } }
.wd-finger{ animation:wd-bob 1.9s ease-in-out infinite alternate; }
@keyframes wd-bob{ from{ transform:translateY(0); } to{ transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce){ .wd-loose, .wd-pulse, .wd-finger{ animation:none; } }

/* ---------- journal card hover diagrams ---------- */
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.card-top .card-eyebrow{ flex:1; min-width:0; }
.art-ico{ flex:0 0 38px; width:38px; height:38px; margin:-4px -4px 0 0; color:var(--ink-dim); opacity:.35; transition:opacity .3s ease, color .3s ease, transform .35s var(--ease); pointer-events:none; }
.art-ico svg{ width:100%; height:100%; display:block; }
.art-ico *{ animation-play-state:paused !important; }
.card:hover .art-ico{ opacity:1; color:var(--ink); transform:scale(1.1) rotate(-2deg); }
.card:hover .art-ico *{ animation-play-state:running !important; }
.coin-flip-g{ transform-box:fill-box; transform-origin:center; animation:coin-flip 2.6s ease-in-out infinite; }
.ji-drop{ animation:ji-drop 2s ease-in infinite; }
@keyframes ji-drop{ 0%{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } 60%{ transform:translateY(11px); opacity:1; } 70%{ transform:translateY(13px); opacity:0; } 100%{ transform:translateY(0); opacity:0; } }
.ji-swap{ animation:ji-swap 2.4s ease-in-out infinite alternate; }
.ji-swap-rev{ animation-direction:alternate-reverse; }
@keyframes ji-swap{ from{ transform:translateX(-2.5px); } to{ transform:translateX(2.5px); } }
@media (prefers-reduced-motion: reduce){ .art-ico *{ animation:none !important; } }

/* ---------- IN FOCUS: exploded mechanical watch ---------- */
.s3d-scene{ position:relative; min-height:520px; display:flex; align-items:center; justify-content:center; }
.s3d-stack{ position:relative; width:min(400px, 78%); aspect-ratio:1; }
.s3d-layer{ position:absolute; inset:0; will-change:transform; color:var(--ink); }
.s3d-layer svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 4px 14px rgba(19,19,21,.10)); }
.s3d-hint{ position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:.6rem; letter-spacing:.14em; opacity:.55; white-space:nowrap; }
.s3d-spin-slow{ transform-box:fill-box; transform-origin:center; animation:s3d-rot 26s linear infinite; }
.s3d-spin-mid{ transform-box:fill-box; transform-origin:center; animation:s3d-rot 12s linear infinite; }
.s3d-spin-fast{ transform-box:fill-box; transform-origin:center; animation:s3d-rot 5s linear infinite; }
.s3d-rev{ animation-direction:reverse; }
@keyframes s3d-rot{ to{ transform:rotate(360deg); } }
.s3d-osc{ transform-box:fill-box; transform-origin:center; animation:s3d-osc 0.9s ease-in-out infinite alternate; }
@keyframes s3d-osc{ from{ transform:rotate(-24deg); } to{ transform:rotate(24deg); } }
.s3d-hour{ transform-box:view-box; transform-origin:center; animation:s3d-rot 90s linear infinite; }
.s3d-minute{ transform-box:view-box; transform-origin:center; animation:s3d-rot 30s linear infinite; }
.s3d-second{ transform-box:view-box; transform-origin:center; animation:s3d-rot 8s linear infinite; }
@media (prefers-reduced-motion: reduce){ .s3d-spin-slow,.s3d-spin-mid,.s3d-spin-fast,.s3d-osc,.s3d-hour,.s3d-minute,.s3d-second{ animation:none; } }

/* ---------- per-article icon animations (wrist check + reviews) ---------- */
.ji-ecg{ stroke-dasharray:30; stroke-dashoffset:30; animation:ji-ecg 1.6s linear infinite; }
@keyframes ji-ecg{ to{ stroke-dashoffset:-30; } }
.ji-blink{ animation:ji-blink 1s steps(1) infinite; }
@keyframes ji-blink{ 50%{ opacity:0; } }
.ji-turn{ transform-box:fill-box; transform-origin:center; animation:ji-turn 3.4s ease-in-out infinite alternate; }
@keyframes ji-turn{ from{ transform:rotate(-8deg); } to{ transform:rotate(8deg); } }
.ji-wave{ animation:ji-wave 1.4s linear infinite; }
@keyframes ji-wave{ to{ stroke-dashoffset:-14; } }
.ji-rise{ animation:ji-rise 2.6s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center; }
@keyframes ji-rise{ from{ transform:translateY(2.5px); } to{ transform:translateY(-4px); } }
.ji-pencil{ animation:ji-pencil 2.2s ease-in-out infinite alternate; }
@keyframes ji-pencil{ from{ transform:translate(0,0) rotate(0deg); } to{ transform:translate(-7px,7px) rotate(-10deg); } }
@media (prefers-reduced-motion: reduce){ .ji-ecg,.ji-blink,.ji-turn,.ji-wave,.ji-rise,.ji-pencil{ animation:none; } }

/* ---------- exploded movement extras ---------- */
.s3d-layer{ filter:drop-shadow(0 3px 6px rgba(19,19,21,.08)); }
.s3d-layer svg{ filter:none; }
.s3d-breathe{ transform-box:fill-box; transform-origin:center; animation:s3d-breathe 0.9s ease-in-out infinite alternate; }
@keyframes s3d-breathe{ from{ transform:scale(0.96); } to{ transform:scale(1.05); } }
.s3d-fork{ transform-box:fill-box; transform-origin:center; animation:s3d-fork 0.45s steps(2) infinite; }
@keyframes s3d-fork{ 50%{ transform:rotate(7deg); } }
.s3d-crown{ transform-box:fill-box; transform-origin:center; animation:s3d-crownspin 4s ease-in-out infinite; }
@keyframes s3d-crownspin{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@media (prefers-reduced-motion: reduce){ .s3d-breathe,.s3d-fork,.s3d-crown{ animation:none; } }

/* ---------- glitch-proof icon hands + moon drift ---------- */
.ji-hand{ transform-box:view-box; transform-origin:center; animation:s3d-rot 6s linear infinite; }
.ji-moondrift{ animation:ji-moondrift 4.5s ease-in-out infinite alternate; }
@keyframes ji-moondrift{ from{ transform:translateX(0); } to{ transform:translateX(6px); } }
/* ---------- buy / wear / sell diagram ---------- */
.bw-up{ animation:bw-up 2s ease-in-out infinite; }
@keyframes bw-up{ 0%{ transform:translateY(4px); opacity:0; } 25%{ opacity:1; } 75%{ transform:translateY(-5px); opacity:1; } 100%{ transform:translateY(-9px); opacity:0; } }
.bw-arrow{ stroke-dasharray:5 4; animation:bw-arrow 1.3s linear infinite; }
@keyframes bw-arrow{ to{ stroke-dashoffset:-18; } }
@media (prefers-reduced-motion: reduce){ .ji-hand,.ji-moondrift,.bw-up,.bw-arrow{ animation:none; } }

/* ---------- diagram + genta icon motion ---------- */
.bw-coin{ transform-box:fill-box; transform-origin:center; animation:bw-coin 3s ease-in-out infinite; }
@keyframes bw-coin{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(0.55); } }
.ji-draw{ stroke-dasharray:100; animation:ji-draw 3.2s ease-in-out infinite; }
@keyframes ji-draw{ 0%{ stroke-dashoffset:100; } 55%, 78%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-100; } }
@media (prefers-reduced-motion: reduce){ .bw-coin,.ji-draw{ animation:none; } }

/* ---------- s3d complications ---------- */
.s3d-moon{ animation:s3d-moondrift 9s ease-in-out infinite alternate; }
@keyframes s3d-moondrift{ from{ transform:translateX(-6px); } to{ transform:translateX(12px); } }
.s3d-pr{ transform-box:fill-box; transform-origin:16% 88%; animation:s3d-pr 7s ease-in-out infinite alternate; }
@keyframes s3d-pr{ from{ transform:rotate(-6deg); } to{ transform:rotate(30deg); } }
@media (prefers-reduced-motion: reduce){ .s3d-moon,.s3d-pr{ animation:none; } }

/* ---------- latest-journal marquee ---------- */
.jmarquee{ overflow:hidden; position:relative; margin:0 -5vw; padding:6px 0 14px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.jm-track{ display:flex; gap:24px; width:max-content; padding:0 5vw; will-change:transform; }
.jm-track .card{ flex:0 0 340px; }
@media (max-width:760px){ .jm-track .card{ flex-basis:280px; } }

/* ---------- enjoy-panel sparkles ---------- */
.ji-spark{ transform-box:fill-box; transform-origin:center; animation:ji-spark 2.2s ease-in-out infinite; }
.ji-spark2{ animation-delay:0.7s; }
.ji-spark3{ animation-delay:1.4s; }
@keyframes ji-spark{ 0%, 100%{ transform:scale(0.4); opacity:0; } 50%{ transform:scale(1.15); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .ji-spark{ animation:none; opacity:.7; } }

/* ---------- gallery loading: shimmer -> fade-in ---------- */
.masonry .m-item{ background:linear-gradient(100deg, rgba(127,127,127,0.08) 30%, rgba(127,127,127,0.16) 50%, rgba(127,127,127,0.08) 70%); background-size:200% 100%; animation:ph-shimmer 1.5s ease-in-out infinite; }
.masonry .m-item.ph-done{ animation:none; background:none; }

.masonry .m-item img{ opacity:0; transform:scale(1.02); transition:opacity .55s ease, transform .8s cubic-bezier(.2,.6,.2,1); }
.masonry .m-item.ph-done img{ opacity:1; transform:none; }
@keyframes ph-shimmer{ 0%{ background-position:120% 0; } 100%{ background-position:-80% 0; } }
@media (prefers-reduced-motion: reduce){ .masonry .m-item{ animation:none; } .masonry .m-item img{ transition:none; opacity:1; transform:none; } }

/* ---------- gallery scroll-in ---------- */
.masonry .m-item{ opacity:0; transform:translateY(28px); }
.masonry .m-item.m-in{ opacity:1; transform:translateY(0); transition:opacity .7s var(--ease), transform .95s var(--ease); }
@media (prefers-reduced-motion: reduce){ .masonry .m-item{ opacity:1; transform:none; } }

/* ---------- contact page: live watch + modern form ---------- */
.ct-watchblock{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:8px; }
.ct-watch{ width:min(300px, 72%); height:auto; filter:drop-shadow(0 18px 34px rgba(19,19,21,0.12)); }
.ct-caption{ letter-spacing:3px; opacity:.55; }
.ct-honeypot{ position:absolute; left:-9999px; opacity:0; }
.ct-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ct-privacy{ margin-top:14px; opacity:.5; letter-spacing:1px; font-size:10.5px; line-height:1.6; }
.form-card input:focus, .form-card textarea:focus{ border-color:var(--navy); outline:none; }
.ct-sent{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:28px 8px; }
.ct-sent-h{ font-family:'Playfair Display', Lora, serif; font-size:1.6rem; }
.ct-check{ stroke-dasharray:100; stroke-dashoffset:100; animation:ct-check .7s ease-out .2s forwards; }
@keyframes ct-check{ to{ stroke-dashoffset:0; } }

/* ---------- about journey timeline ---------- */
.tl-wrap{ position:relative; margin-top:44px; padding-left:44px; }
.tl-line{ position:absolute; left:14px; top:6px; bottom:6px; width:2px; background:color-mix(in srgb, currentColor 16%, transparent); border-radius:2px; }
.tl-progress{ position:absolute; left:0; top:0; width:100%; height:0%; background:var(--navy); border-radius:2px; }
.tl-node{ position:relative; padding:0 0 40px 0; }
.tl-node:last-child{ padding-bottom:6px; }
.tl-dot{ position:absolute; left:-37px; top:8px; width:14px; height:14px; border-radius:50%;
  border:2.5px solid var(--muted); background:var(--bg); transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease); }
.tl-node.tl-passed .tl-dot{ border-color:var(--navy); background:var(--navy); transform:scale(1.12);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--navy) 16%, transparent); }
.tl-year{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:3px; color:var(--navy); }
.tl-title{ font-family:'Playfair Display', Lora, serif; font-size:1.35rem; margin:6px 0 8px; }
.tl-text{ max-width:620px; }
.tl-node .tl-card{ transition:opacity .6s var(--ease), transform .6s var(--ease); }
@media (min-width:900px){ .tl-wrap{ padding-left:64px; } .tl-line{ left:20px; } .tl-dot{ left:-51px; } }

/* ---------- about timeline: assembling watch ---------- */
.tl-grid{ display:grid; grid-template-columns:1fr; gap:36px; margin-top:44px; }
.tl-grid .tl-wrap{ margin-top:0; }
.tl-sticky{ text-align:center; }
.tl-sticky svg{ width:min(300px, 78%); height:auto; }
.tl-watch-cap{ letter-spacing:3px; opacity:.55; margin-top:10px; }
#tlwYear{ color:var(--navy); font-weight:600; }
.tlw-s{ opacity:0; transform:scale(0.86); transform-origin:center; transform-box:fill-box;
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.tlw-s.tlw-on{ opacity:1; transform:scale(1); }
.tlw-sweep{ transform-box:view-box; transform-origin:center; animation:tlwSweep 10s linear infinite; }
@keyframes tlwSweep{ to{ transform:rotate(360deg); } }
.tlw-cage{ transform-box:fill-box; transform-origin:center; animation:tlwCage 8s linear infinite; }
@keyframes tlwCage{ to{ transform:rotate(360deg); } }
.tlw-osc{ transform-box:fill-box; transform-origin:center; animation:tlwOsc 1.6s ease-in-out infinite alternate; }
@keyframes tlwOsc{ from{ transform:rotate(-24deg); } to{ transform:rotate(24deg); } }
@media (min-width:960px){
  .tl-grid{ grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:start; }
  .tl-sticky{ order:2; position:sticky; top:110px; }
}
@media (prefers-reduced-motion: reduce){
  .tlw-s{ opacity:1; transform:none; transition:none; }
  .tlw-sweep,.tlw-cage,.tlw-osc{ animation:none; }
}

.aa-wrap{ display:flex; justify-content:center; margin:34px 0; }
.aa-wrap svg{ width:min(460px, 100%); height:auto; color:var(--ink); }
.aa-shake{ transform-box:fill-box; transform-origin:center; animation:aa-shake 1.6s ease-in-out infinite; }
@keyframes aa-shake{ 0%,100%{ transform:rotate(0deg) translateY(0); } 25%{ transform:rotate(1.6deg) translateY(-2px); } 75%{ transform:rotate(-1.2deg) translateY(1px); } }
.aa-spark{ animation:aa-spark 1.6s ease-in-out infinite; opacity:0; transform-box:fill-box; transform-origin:center; }
.aa-spark2{ animation-delay:0.35s; }
@keyframes aa-spark{ 0%,100%{ opacity:0; transform:scale(0.7); } 40%{ opacity:1; transform:scale(1); } 70%{ opacity:0; transform:scale(1.15); } }
.aa-breathe{ transform-box:fill-box; transform-origin:center bottom; animation:aa-breathe 6s ease-in-out infinite; }
@keyframes aa-breathe{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.012); } }
.aa-hr{ transform-box:view-box; transform-origin:230px 140px; animation:aa-spin 90s linear infinite; }
.aa-min{ transform-box:view-box; transform-origin:230px 140px; animation:aa-spin 12s linear infinite; }
@keyframes aa-spin{ to{ transform:rotate(360deg); } }
.aa-parent{ transform-box:fill-box; transform-origin:center bottom; animation:aa-lean 7s ease-in-out infinite; }
.aa-parent2{ animation-delay:3.5s; }
@keyframes aa-lean{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(1.4deg); } }
.aa-heart{ transform-box:fill-box; transform-origin:center; animation:aa-heart 2.4s ease-in-out infinite; }
@keyframes aa-heart{ 0%,100%{ transform:scale(1); opacity:0.85; } 30%{ transform:scale(1.12); opacity:1; } }
.aa-gensweep{ transform-box:view-box; transform-origin:120px 104px; animation:aa-spin 8s linear infinite; }
.aa-glow{ animation:aa-glow 3s ease-in-out infinite; }
@keyframes aa-glow{ 0%,100%{ opacity:0.12; } 50%{ opacity:0.5; } }
.aa-repstut{ transform-box:view-box; transform-origin:340px 104px; animation:aa-stut 8s steps(7) infinite; }
@keyframes aa-stut{ to{ transform:rotate(360deg); } }
.aa-repglitch{ animation:aa-glitch 5s ease-in-out infinite; }
@keyframes aa-glitch{ 0%,88%,100%{ transform:translate(0,0); opacity:1; } 90%{ transform:translate(2px,-1px); opacity:0.7; } 93%{ transform:translate(-2px,1px); opacity:1; } 96%{ transform:translate(1px,0); opacity:0.8; } }
.tl-layout{ display:flex; gap:44px; align-items:flex-start; }
.tl-layout .tl-wrap{ flex:1; }
.tl-dialbox{ display:none; }
@media (min-width:960px){
  .tl-dialbox{ display:block; width:220px; flex:0 0 220px; position:sticky; top:26vh; order:2; }
  .tl-dialbox svg{ width:100%; height:auto; color:var(--ink); filter:drop-shadow(0 14px 26px rgba(19,19,21,0.10)); }
}
.tl-sub{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:2px; color:var(--muted); margin:2px 0 8px; }
.tl-ytick{ transition:stroke .5s var(--ease); }
.tl-ytick-on{ stroke:var(--navy); }
#tlHand line{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .aa-shake,.aa-spark,.aa-breathe,.aa-hr,.aa-min,.aa-parent,.aa-heart,.aa-gensweep,.aa-glow,.aa-repstut,.aa-repglitch{ animation:none; }
  .aa-spark{ opacity:0.8; }
}

.tl-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 10px; }
.tl-chip{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted); text-decoration:none; border:1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius:999px; padding:4px 11px; transition:all .3s var(--ease); }
.tl-chip:hover{ color:var(--navy); border-color:var(--navy); transform:translateY(-1px); }
.tl-node.tl-passed .tl-chip{ border-color:color-mix(in srgb, var(--navy) 45%, transparent); color:var(--ink); }
.tl-ydot{ transition:stroke .45s var(--ease), fill .45s var(--ease), r .45s var(--ease); }
.tl-ydot-on{ stroke:var(--navy); fill:var(--navy); }
#tlArc{ transition:none; }
#tlDialYear{ transition:opacity .3s var(--ease); }

.ct2-float{ position:relative; }
.ct2-float label{ position:absolute; left:15px; top:19px; pointer-events:none; color:var(--muted);
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  transition:all .28s var(--ease); }
.ct2-float input, .ct2-float textarea{ padding-top:26px; padding-bottom:10px; }
.ct2-float input:focus + label, .ct2-float input:not(:placeholder-shown) + label,
.ct2-float textarea:focus + label, .ct2-float textarea:not(:placeholder-shown) + label{
  top:7px; font-size:9px; color:var(--navy); }
.ct2-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.ct2-chip{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  background:none; border:1px solid color-mix(in srgb, currentColor 26%, transparent); color:var(--muted);
  border-radius:999px; padding:7px 14px; cursor:pointer; transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.ct2-chip:hover{ color:var(--navy); border-color:var(--navy); transform:translateY(-1px); }
.ct2-chip-on{ background:var(--navy); border-color:var(--navy); color:var(--bg); }
.ct2-count{ position:absolute; right:0; bottom:-16px; font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:1px; color:var(--muted); opacity:.6; }
.ct2-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:22px; margin-top:70px; }
.ct2-tile{ border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column; gap:9px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.ct2-tile:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(19,19,21,0.08); }
.ct2-tile svg{ width:40px; height:40px; color:var(--ink); }
.ct2-tile-h{ font-family:'Playfair Display', Lora, serif; font-size:1.05rem; }
.ct2-hg{ transform-box:fill-box; transform-origin:center; animation:ct2-flip 5s ease-in-out infinite; }
@keyframes ct2-flip{ 0%,42%,100%{ transform:rotate(0deg); } 50%,92%{ transform:rotate(180deg); } }
.ct2-shieldcheck{ stroke-dasharray:100; stroke-dashoffset:100; animation:ct2-draw 3.6s ease-in-out infinite; }
@keyframes ct2-draw{ 0%{ stroke-dashoffset:100; } 30%,80%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:100; } }
.ct2-flap{ transform-box:fill-box; transform-origin:center top; animation:ct2-flap 4.2s ease-in-out infinite; }
@keyframes ct2-flap{ 0%,55%,100%{ transform:scaleY(1); } 65%,90%{ transform:scaleY(-0.55); } }
.ct-watch{ will-change:transform; }
@media (prefers-reduced-motion: reduce){ .ct2-hg,.ct2-shieldcheck,.ct2-flap{ animation:none; } .ct2-shieldcheck{ stroke-dashoffset:0; } }


.jsort-row{ display:flex; align-items:center; gap:10px; margin:-6px 0 26px; }
.jsort-label{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.jsort-select{ background:var(--bg-alt); border:1px solid var(--line); color:var(--ink); font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:1px; padding:8px 12px; border-radius:8px; outline:none; cursor:pointer; transition:border-color .3s var(--ease); }
.jsort-select:hover, .jsort-select:focus{ border-color:var(--navy); }
.watch-rail .card{ contain:layout paint; }
.watch-rail{ transform:translateZ(0); }
.ji-strapa{ animation:ji-strapswap 4.6s ease-in-out infinite; }
.ji-strapb{ animation:ji-strapswap 4.6s ease-in-out infinite reverse; }
@keyframes ji-strapswap{ 0%,42%{ opacity:1; } 50%,92%{ opacity:0; } 100%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .ji-strapa,.ji-strapb{ animation:none; } .ji-strapb{ opacity:0; } }

.aa-flow{ animation:aa-flow 10.4s linear infinite; }
@keyframes aa-flow{ 0%{ transform:translateX(30px); opacity:0; } 8%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateX(430px); opacity:0; } }
.aa-drop{ animation:aa-drop 10.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes aa-drop{ 0%,46%{ transform:translateY(0); opacity:0; } 50%{ opacity:1; transform:translateY(0); } 62%,100%{ transform:translateY(86px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .aa-flow,.aa-drop{ animation:none; } .aa-drop{ transform:translateY(86px); } }

#tlArc{ filter:drop-shadow(0 0 7px rgba(31,58,95,0.32)); }
.tl-ydot-cur{ r:6.2; stroke:var(--navy); fill:var(--navy); }
#tlDial{ transition:transform .4s var(--ease); }
.tl-dial-pulse{ animation:tl-pulse .55s var(--ease); }
@keyframes tl-pulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.035); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .tl-dial-pulse{ animation:none; } }

#starCanvas{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; }
html:not([data-theme="dark"]) #starCanvas{ display:block;
  background:linear-gradient(180deg,
    rgba(163,190,216,0.30) 0%,
    rgba(214,220,224,0.14) 42%,
    rgba(240,232,219,0.20) 78%,
    rgba(243,229,208,0.26) 100%); }
html[data-theme="dark"] #starCanvas{ background:none; }

html[data-theme="dark"] body{ background:transparent; }
html[data-theme="dark"] .brand-marquee{ background:transparent; }
html[data-theme="dark"] #starCanvas{ z-index:-1; }

html[data-theme="dark"] .section.alt{ background:rgba(255,255,255,0.035); }

.qz-step{ transform-box:view-box; transform-origin:112px 104px; animation:aa-spin 8s steps(8) infinite; }
.qz-pulse{ animation:qz-pulse 1s ease-in-out infinite; }
@keyframes qz-pulse{ 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }
.mc-sweep{ transform-box:view-box; transform-origin:348px 104px; animation:aa-spin 8s linear infinite; }
.mc-gear{ transform-box:view-box; transform-origin:326px 122px; animation:aa-spin 11s linear infinite; }
.mc-gear2{ transform-box:view-box; transform-origin:368px 88px; animation:aa-spin 7s linear infinite reverse; }
.mc-osc{ transform-box:view-box; transform-origin:348px 104px; animation:mc-osc 1.6s ease-in-out infinite; }
@keyframes mc-osc{ 0%,100%{ transform:rotate(-26deg); } 50%{ transform:rotate(26deg); } }
.sw-strap{ opacity:0; animation:sw-cycle 14s ease-in-out infinite; }
.sw-s1{ animation-delay:0s; }
.sw-s2{ animation-delay:3.5s; }
.sw-s3{ animation-delay:7s; }
.sw-s4{ animation-delay:10.5s; }
@keyframes sw-cycle{ 0%{ opacity:0; transform:translateY(6px); } 3%,22%{ opacity:1; transform:translateY(0); } 25%,100%{ opacity:0; transform:translateY(-6px); } }
.sw-head{ animation:sw-lift 3.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes sw-lift{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2px) scale(1.012); } }
.sw-hand{ transform-box:view-box; transform-origin:230px 130px; animation:aa-spin 9s linear infinite; }
.ji-gear{ transform-box:view-box; transform-origin:30px 22px; animation:aa-spin 9s linear infinite; }
@media (prefers-reduced-motion: reduce){
  .qz-step,.qz-pulse,.mc-sweep,.mc-gear,.mc-gear2,.mc-osc,.sw-head,.sw-hand,.ji-gear{ animation:none; }
  .sw-strap{ animation:none; opacity:0; }
  .sw-s2{ opacity:1; }
}

.tl-node{ padding-bottom:56px; }
.tl-dot{ position:absolute; left:-36px; top:3px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid color-mix(in srgb, currentColor 24%, transparent); z-index:2;
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.tl-node.tl-passed .tl-dot{ border-color:var(--navy); background:var(--navy);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--navy) 13%, transparent); transform:scale(1.08); }
.tl-card{ opacity:.38; transform:translateY(8px); }
.tl-node.tl-passed .tl-card{ opacity:1; transform:none; }
.tl-title{ font-size:1.5rem; letter-spacing:-0.01em; }
.tl-chips{ gap:8px; margin:11px 0 13px; }
.tl-chip{ display:inline-flex; align-items:center; padding:6px 13px; font-size:9.5px; letter-spacing:1.7px;
  opacity:0; transform:translateY(7px); background:color-mix(in srgb, currentColor 3%, transparent);
  transition:opacity .55s var(--ease), transform .55s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.tl-chip::before{ content:''; width:5px; height:5px; border-radius:50%; margin-right:7px;
  border:1px solid currentColor; opacity:.5; transition:all .3s var(--ease); }
.tl-node.tl-passed .tl-chip{ opacity:1; transform:none; }
.tl-node.tl-passed .tl-chip::before{ border-color:var(--navy); background:var(--navy); opacity:.85; }
.tl-node.tl-passed .tl-chip:nth-child(1){ transition-delay:.06s; }
.tl-node.tl-passed .tl-chip:nth-child(2){ transition-delay:.13s; }
.tl-node.tl-passed .tl-chip:nth-child(3){ transition-delay:.20s; }
.tl-node.tl-passed .tl-chip:nth-child(4){ transition-delay:.27s; }
.tl-node.tl-passed .tl-chip:nth-child(5){ transition-delay:.34s; }
.tl-node.tl-passed .tl-chip:nth-child(6){ transition-delay:.41s; }
.tl-chip:hover{ background:color-mix(in srgb, var(--navy) 8%, transparent); }
@media (min-width:960px){ .tl-dot{ left:-51px; } }
@media (prefers-reduced-motion: reduce){
  .tl-card{ opacity:1; transform:none; }
  .tl-chip{ opacity:1; transform:none; transition:none; }
  .tl-dot{ transition:none; }
}

.wc-hand{ transform-box:view-box; transform-origin:230px 118px; animation:aa-spin 10s linear infinite; }
.wc-seg{ opacity:0.22; animation:wc-cycle 10s linear infinite; }
.wc-s0{ animation-delay:0s; } .wc-s1{ animation-delay:2s; } .wc-s2{ animation-delay:4s; }
.wc-s3{ animation-delay:6s; } .wc-s4{ animation-delay:8s; }
@keyframes wc-cycle{ 0%,18%{ opacity:1; } 22%,100%{ opacity:0.22; } }
.rs-up{ transform-box:fill-box; transform-origin:bottom; animation:rs-grow 5s ease-in-out infinite; }
.rs-down{ transform-box:fill-box; transform-origin:top; animation:rs-grow 5s ease-in-out infinite; animation-delay:.5s; }
@keyframes rs-grow{ 0%,100%{ transform:scaleY(0.12); } 45%,75%{ transform:scaleY(1); } }
.rs-arrowup{ animation:rs-arrow 5s ease-in-out infinite; }
.rs-arrowdown{ animation:rs-arrow 5s ease-in-out infinite; animation-delay:.5s; }
@keyframes rs-arrow{ 0%,30%{ opacity:0; } 55%,80%{ opacity:1; } 100%{ opacity:0; } }
.ad-travel{ animation:ad-travel 9s ease-in-out infinite; }
@keyframes ad-travel{ 0%{ transform:translateX(84px); opacity:0; } 8%{ opacity:1; } 45%{ transform:translateX(230px); opacity:1; } 55%{ transform:translateX(230px); } 92%{ opacity:1; } 100%{ transform:translateX(376px); opacity:0; } }
.ad-trust{ transform-box:fill-box; transform-origin:left center; animation:ad-trust 9s ease-in-out infinite; }
@keyframes ad-trust{ 0%{ transform:scaleX(0.04); } 45%{ transform:scaleX(0.5); } 92%,100%{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .wc-hand,.wc-seg,.rs-up,.rs-down,.rs-arrowup,.rs-arrowdown,.ad-travel,.ad-trust{ animation:none; }
  .wc-seg{ opacity:0.85; } .rs-arrowup,.rs-arrowdown{ opacity:1; } .ad-trust{ transform:scaleX(1); }
}

.stat-link{ text-decoration:none; color:inherit; position:relative; cursor:pointer;
  transition:border-color .35s var(--ease), transform .35s var(--ease); }
.stat-link:hover{ border-left-color:var(--navy); transform:translateY(-3px); }
.stat-link .stat-num{ transition:color .35s var(--ease); }
.stat-link:hover .stat-num{ color:var(--navy); }
.stat-go{ position:absolute; right:4px; top:2px; font-size:13px; color:var(--navy);
  opacity:0; transform:translateX(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.stat-link:hover .stat-go{ opacity:1; transform:translateX(0); }
.card::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; z-index:3;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--navy) 15%, transparent), transparent 62%);
  transition:opacity .4s var(--ease); }
.card{ position:relative; }
.card:hover::after{ opacity:1; }
html[data-theme="dark"] .card::after{ background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.09), transparent 62%); }
.read-bar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:color-mix(in srgb, currentColor 8%, transparent); }
.read-bar-fill{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, var(--navy), #6b8cb8); }
.pq-section{ padding:96px 0; position:relative; overflow:hidden; }
.pq-mark{ position:absolute; left:2vw; top:12px; font-family:'Playfair Display', Lora, serif;
  font-size:clamp(12rem, 26vw, 30rem); line-height:0.8; color:var(--navy); opacity:0.06;
  pointer-events:none; user-select:none; z-index:0; }
.pq-layout{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; margin-top:26px; }
.pq-stage{ position:relative; min-height:210px; }
.pq-item{ position:absolute; inset:0; margin:0; opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease); }
.pq-item.pq-on{ opacity:1; pointer-events:auto; }
.pq-w{ display:inline-block; opacity:0; transform:translateY(16px) rotate(1.2deg);
  transition:opacity .6s var(--ease), transform .6s var(--ease); }
.pq-item.pq-on .pq-w{ opacity:1; transform:none; transition-delay:calc(var(--i) * 42ms); }
.pq-open, .pq-close{ color:var(--navy); opacity:0.45; }
.pq-text{ font-family:'Playfair Display', Lora, serif; font-size:clamp(1.55rem, 3.6vw, 3rem);
  line-height:1.28; margin:0; max-width:none; letter-spacing:-0.012em; }
.pq-aside{ display:none; }
@media (min-width:900px){
  .pq-layout{ grid-template-columns:minmax(0,1fr) 300px; gap:56px; }
  .pq-stage{ min-height:250px; }
  .pq-main{ border-left:1px solid var(--line); padding-left:34px; }
  .pq-aside{ display:block; justify-self:end; width:300px; }
  .pq-aside svg{ width:100%; height:auto; color:var(--ink); filter:drop-shadow(0 16px 30px rgba(19,19,21,0.09)); }
}
#pqRing{ stroke-dasharray:653.5; stroke-dashoffset:653.5; animation:pq-ring 6.5s linear infinite; }
@keyframes pq-ring{ from{ stroke-dashoffset:653.5; } to{ stroke-dashoffset:0; } }
#pqIndex{ transition:opacity .3s var(--ease); }
.pq-src{ margin-top:18px; font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:2.4px; text-transform:uppercase; }
.pq-src a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:all .3s var(--ease); }
.pq-src a:hover{ color:var(--navy); border-bottom-color:var(--navy); }
.pq-dots{ display:flex; gap:9px; margin-top:34px; }
.pq-dot{ width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:none; border:1px solid color-mix(in srgb, currentColor 34%, transparent);
  -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none;
  transition:all .35s var(--ease); }
.pq-dot:hover{ border-color:var(--navy); }
.pq-dot-on{ background:var(--navy); border-color:var(--navy); transform:scale(1.15); }
@media (max-width:700px){ .pq-stage{ min-height:230px; } .pq-text{ max-width:none; } }
@media (prefers-reduced-motion: reduce){
  .pq-item{ transition:none; } .card::after{ display:none; } .read-bar-fill{ transition:none; }
}

@media (prefers-reduced-motion: reduce){
  .pq-w{ opacity:1; transform:none; transition:none; }
  .pq-mark{ transform:none !important; opacity:0.06 !important; }
  #pqRing{ animation:none; stroke-dashoffset:0; }
}

#latest-journal{ overflow:hidden; }

.pqm-part{ opacity:0; transform:scale(0.9); transform-box:view-box; transform-origin:120px 120px;
  transition:opacity .75s var(--ease), transform .75s var(--ease); }
.pqm-part.pqm-in{ opacity:1; transform:none; }
#pqP1.pqm-in{ transition-delay:0s; } #pqP2.pqm-in{ transition-delay:.05s; } #pqP3.pqm-in{ transition-delay:.1s; }
#pqP4.pqm-in{ transition-delay:.14s; } #pqP5.pqm-in{ transition-delay:.18s; } #pqP6.pqm-in{ transition-delay:.22s; }
.pqm-spin-barrel{ transform-box:view-box; transform-origin:78px 84px; animation:aa-spin 90s linear infinite; }
.pqm-spin-center{ transform-box:view-box; transform-origin:120px 122px; animation:aa-spin 36s linear infinite reverse; }
.pqm-spin-third{ transform-box:view-box; transform-origin:166px 104px; animation:aa-spin 20s linear infinite; }
.pqm-spin-fourth{ transform-box:view-box; transform-origin:162px 158px; animation:aa-spin 11s linear infinite reverse; }
.pqm-spin-escape{ transform-box:view-box; transform-origin:124px 176px; animation:aa-spin 7.5s steps(15) infinite; }
.pqm-pallet{ transform-box:view-box; transform-origin:104px 150px; animation:pqm-pallet .5s steps(2, jump-none) infinite alternate; }
@keyframes pqm-pallet{ from{ transform:rotate(-9deg); } to{ transform:rotate(9deg); } }
.pqm-balance{ transform-box:view-box; transform-origin:70px 162px; animation:pqm-balance 1s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes pqm-balance{ 0%{ transform:rotate(-42deg); } 50%{ transform:rotate(42deg); } 100%{ transform:rotate(-42deg); } }
.pq-ghost{ position:absolute; right:-4vw; top:0; width:min(46vw, 640px); opacity:0.05; pointer-events:none; z-index:0; color:var(--navy); }
.pq-ghost svg{ width:100%; height:auto; }
.pqg-a{ transform-box:view-box; transform-origin:130px 150px; animation:aa-spin 120s linear infinite; }
.pqg-b{ transform-box:view-box; transform-origin:286px 268px; animation:aa-spin 80s linear infinite reverse; }
html[data-theme="dark"] .pq-ghost{ opacity:0.09; color:#9db4dd; }
@media (max-width:899px){ .pq-ghost{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .pqm-part{ opacity:1; transform:none; transition:none; }
  .pqm-spin-barrel,.pqm-spin-center,.pqm-spin-third,.pqm-spin-fourth,.pqm-spin-escape,.pqm-pallet,.pqm-balance,.pqg-a,.pqg-b{ animation:none; }
}

.lt-offscreen, .lt-offscreen *{ animation-play-state:paused !important; }

.hx-barrel, .hx-center, .hx-third, .hx-fourth, .hx-escape, .hx-pallet, .hx-balance, .hx-inner{
  transform-box:fill-box; transform-origin:center; }
.hx-barrel{ animation:aa-spin 120s linear infinite; }
.hx-center{ animation:aa-spin 48s linear infinite reverse; }
.hx-third{ animation:aa-spin 26s linear infinite; }
.hx-fourth{ animation:aa-spin 14s linear infinite reverse; }
.hx-escape{ animation:aa-spin 9s steps(15) infinite; }
.hx-pallet{ animation:hx-pallet .6s steps(2, jump-none) infinite alternate; }
@keyframes hx-pallet{ from{ transform:rotate(-8deg); } to{ transform:rotate(8deg); } }
.hx-balance{ animation:hx-balance 1.2s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes hx-balance{ 0%{ transform:rotate(-38deg); } 50%{ transform:rotate(38deg); } 100%{ transform:rotate(-38deg); } }
.hero.hx-over{ cursor:crosshair; }
@media (prefers-reduced-motion: reduce){
  .hx-barrel,.hx-center,.hx-third,.hx-fourth,.hx-escape,.hx-pallet,.hx-balance{ animation:none; }
}

.hx-crown, .hx-ratchet{ transform-box:fill-box; transform-origin:center; }
.hx-crown{ animation:aa-spin 150s linear infinite; }
.hx-ratchet{ animation:aa-spin 150s linear infinite reverse; }
.hx-rotor{ transform-box:view-box; transform-origin:320px 320px; animation:hx-rotor 16s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes hx-rotor{ 0%{ transform:rotate(-26deg); } 42%{ transform:rotate(298deg); } 60%{ transform:rotate(276deg); } 100%{ transform:rotate(-26deg); } }
@media (prefers-reduced-motion: reduce){ .hx-crown,.hx-ratchet,.hx-rotor{ animation:none; } }

@media (prefers-reduced-motion: reduce){
  .pt-bar, .pt-bar::after, .logo-hour, .logo-minute, .marquee-track, .jm-track,
  #pageTransition .pt-bar{ animation:none !important; }
}

.rail-foot{ display:flex; align-items:center; gap:18px; }
.rail-count{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:2px; color:var(--muted);
  min-width:58px; flex:0 0 auto; }
.rail-foot .rail-progress{ flex:1; }

.hero-dial{ overflow:visible; }

.footer-tagline{ line-height:1.85; max-width:38ch; margin-top:16px; }
.footer-tagline + .footer-tagline{ margin-top:18px; }
.footer-grid{ gap:64px; }
.footer-bottom{ margin-top:14px; padding-top:22px; line-height:1.9; gap:16px 28px; }
@media (min-width:960px){ .footer-grid{ grid-template-columns:1.9fr 1fr 1fr; gap:72px; } }
@media (max-width:700px){
  .footer-tagline{ max-width:none; }
  .footer-grid{ gap:40px; }
  .footer-bottom{ padding-top:20px; }
}

.footer{ padding-top:96px; padding-bottom:56px; }
.footer-tagline{ line-height:2.0; margin-top:20px; }
.footer-tagline + .footer-tagline{ margin-top:24px; }
.footer-grid{ gap:76px; }
.footer-col{ gap:9px; }
.footer-bottom{ margin-top:28px; padding-top:30px; line-height:2.1; gap:18px 34px; }
@media (min-width:960px){ .footer-grid{ gap:88px; } }
@media (max-width:700px){
  .footer{ padding-top:72px; padding-bottom:48px; }
  .footer-grid{ gap:46px; }
  .footer-bottom{ margin-top:20px; padding-top:26px; }
}

.tm-mapwrap{ margin:34px 0 0; }
.tm-map{ width:100%; height:auto; color:var(--ink); border-radius:var(--radius);
  filter:drop-shadow(0 14px 30px rgba(19,19,21,0.07)); }
.tm-pin{ opacity:0; animation:tm-drop .7s var(--ease) forwards; }
@keyframes tm-drop{ from{ opacity:0; transform:translateY(-9px); } to{ opacity:1; transform:none; } }
.tm-ping{ transform-box:fill-box; transform-origin:center; animation:tm-ping 3s ease-out infinite; }
@keyframes tm-ping{ 0%{ transform:scale(1); opacity:.65; } 70%,100%{ transform:scale(3.1); opacity:0; } }
.tm-route{ stroke-dasharray:5 5; animation:tm-dash 22s linear infinite; }
@keyframes tm-dash{ to{ stroke-dashoffset:-200; } }
.tm-plane{ offset-path:path('M120 48 Q 250 28 380 48'); animation:tm-fly 9s ease-in-out infinite; }
@keyframes tm-fly{ 0%{ offset-distance:0%; opacity:0; } 8%{ opacity:1; } 88%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }
.tr-card{ border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px 26px;
  display:flex; flex-direction:column; gap:10px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.tr-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(19,19,21,0.08); }
.tr-num{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:2.4px; color:var(--navy); }
.tr-h{ font-family:'Playfair Display', Lora, serif; font-size:1.12rem; margin:0; }
.tr-list{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:11px; }
.tr-list li{ position:relative; padding-left:22px; font-size:.94rem; line-height:1.65; color:var(--muted); }
.tr-list li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%;
  border:1px solid var(--navy); opacity:.65; }
@media (max-width:700px){ .tm-map{ min-width:0; } .tr-card{ padding:24px 22px; } }
@media (prefers-reduced-motion: reduce){
  .tm-pin{ opacity:1; animation:none; } .tm-ping,.tm-route,.tm-plane{ animation:none; } .tm-ping{ opacity:0; }
}

.tw-hero{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
.tw-hero-watch{ display:none; }
@media (min-width:940px){
  .tw-hero{ grid-template-columns:minmax(0,1.05fr) 340px; gap:64px; }
  .tw-hero-watch{ display:block; justify-self:end; width:340px; }
}
.tw-watch{ width:100%; height:auto; color:var(--ink); filter:drop-shadow(0 20px 42px rgba(19,19,21,0.12)); }
.tv-watch{ width:100%; height:auto; color:var(--ink); filter:drop-shadow(0 22px 46px rgba(19,19,21,0.13)); }
.tv-barrel,.tv-inner,.tv-w1,.tv-w2,.tv-w3,.tv-esc,.tv-bal,.tv-ss,.tv-hr,.tv-mn,.tv-pr{
  transform-box:fill-box; transform-origin:center; }
.tv-cage{ transform-box:view-box; transform-origin:170px 258px; animation:aa-spin 60s linear infinite; }
.tv-bal{ animation:tv-bal 1.05s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes tv-bal{ 0%{ transform:rotate(-42deg); } 50%{ transform:rotate(42deg); } 100%{ transform:rotate(-42deg); } }
.tv-esc{ animation:aa-spin 6s steps(12) infinite; }
.tv-barrel{ animation:aa-spin 110s linear infinite; }
.tv-w1{ animation:aa-spin 26s linear infinite reverse; }
.tv-w2{ animation:aa-spin 16s linear infinite; }
.tv-w3{ animation:aa-spin 20s linear infinite reverse; }
.tv-ss{ transform-box:view-box; transform-origin:94px 178px; animation:aa-spin 60s steps(60) infinite; }
.tv-hr{ transform-box:view-box; transform-origin:170px 172px; animation:aa-spin 240s linear infinite; }
.tv-mn{ transform-box:view-box; transform-origin:170px 172px; animation:aa-spin 40s linear infinite; }
.tv-pr{ transform-box:view-box; transform-origin:170px 172px; animation:tv-pr 24s ease-in-out infinite; }
@keyframes tv-pr{ 0%{ transform:rotate(52deg); } 45%{ transform:rotate(-46deg); } 55%{ transform:rotate(-52deg); } 100%{ transform:rotate(52deg); } }
@media (prefers-reduced-motion: reduce){
  .tv-cage,.tv-bal,.tv-esc,.tv-barrel,.tv-w1,.tv-w2,.tv-w3,.tv-ss,.tv-hr,.tv-mn,.tv-pr{ animation:none; }
}
.tr-ico{ width:44px; height:44px; color:var(--ink); margin-bottom:2px; }
.tr-ico2{ width:30px; height:30px; color:var(--ink); flex:0 0 auto; }
.tr-h-ico{ display:flex; align-items:center; gap:11px; }
.tri-a{ animation:tri-pop 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes tri-pop{ 0%,70%,100%{ transform:scale(1); } 82%{ transform:scale(1.13); } }
.tri-scan{ animation:tri-scan 3.6s ease-in-out infinite; transform-box:view-box; }
@keyframes tri-scan{ 0%,100%{ transform:translateY(-8px); opacity:0; } 12%{ opacity:1; } 50%{ transform:translateY(8px); opacity:1; } 88%{ opacity:0; } }
.tri-flaw{ animation:tri-flaw 3.6s ease-in-out infinite; }
@keyframes tri-flaw{ 0%,45%{ opacity:0; } 60%,90%{ opacity:1; } 100%{ opacity:0; } }
.tri-check{ stroke-dasharray:100; stroke-dashoffset:100; animation:tri-draw 3.8s ease-in-out infinite; }
@keyframes tri-draw{ 0%{ stroke-dashoffset:100; } 30%,80%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:100; } }
.tri-swap{ animation:tri-swap 3.2s ease-in-out infinite; }
@keyframes tri-swap{ 0%,100%{ opacity:.45; transform:translateX(-1px); } 50%{ opacity:1; transform:translateX(1px); } }
.tri-bar{ stroke-dasharray:100; stroke-dashoffset:100; animation:tri-draw 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .tw-barrel,.tw-center,.tw-third,.tw-fourth,.tw-escape,.tw-pallet,.tw-balance,.tw-hands,
  .tri-a,.tri-scan,.tri-flaw,.tri-check,.tri-swap,.tri-bar{ animation:none; }
  .tri-check,.tri-bar{ stroke-dashoffset:0; } .tri-scan,.tri-flaw{ opacity:1; }
}

a.tl-year-link{ text-decoration:none; cursor:pointer; display:inline-block;
  border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); }
a.tl-year-link:hover, a.tl-year-link:focus-visible{ color:var(--navy); border-bottom-color:var(--navy); }

.art-wrap{ max-width:78ch; }
.art-lede{ font-size:1.06rem; }
.art-svg{ width:100%; height:auto; color:var(--ink); display:block; }
.art-fig{ margin:38px 0 8px; padding:26px 24px 18px; border:1px solid var(--line-soft); border-radius:var(--radius);
  background:color-mix(in srgb, currentColor 2%, transparent); }
.art-fig-wide{ padding:30px 22px 18px; }
.art-cap{ margin-top:16px; font-size:.86rem; line-height:1.65; color:var(--muted); max-width:62ch; }
.art-lab{ display:grid; grid-template-columns:1fr; gap:26px; align-items:center; margin:38px 0 10px;
  padding:26px 24px; border:1px solid var(--line-soft); border-radius:var(--radius);
  background:color-mix(in srgb, currentColor 2%, transparent); }
@media (min-width:820px){ .art-lab{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:38px; } }
.art-svg-sq{ max-width:340px; margin:0 auto; }
.art-panel{ display:flex; flex-direction:column; gap:16px; }
.art-ctrl{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; }
.art-ctrl label{ font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.art-ctrl output{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--navy); min-width:52px; text-align:right; }
.art-ctrl input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px;
  background:color-mix(in srgb, currentColor 22%, transparent); outline:none; cursor:pointer; }
.art-ctrl input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--navy); border:2px solid var(--bg); box-shadow:0 1px 5px rgba(19,19,21,.28); cursor:pointer; }
.art-ctrl input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--navy);
  border:2px solid var(--bg); cursor:pointer; }
.art-readout{ display:flex; align-items:baseline; gap:9px; padding-top:4px; border-top:1px solid var(--line-soft); }
.art-num{ font-family:'Playfair Display', Lora, serif; font-size:1.75rem; color:var(--ink); line-height:1; }
.art-unit{ font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.art-note{ font-size:.85rem; line-height:1.7; color:var(--muted); margin:0; }
.gt-a{ transform-box:fill-box; transform-origin:center; animation:aa-spin 64s linear infinite; }
.gt-b{ transform-box:fill-box; transform-origin:center; animation:aa-spin 16s linear infinite reverse; }
.gt-c{ transform-box:fill-box; transform-origin:center; animation:aa-spin 6s linear infinite; }
.gt-d{ transform-box:fill-box; transform-origin:center; animation:aa-spin 2.4s linear infinite reverse; }
.mw-min,.mw-minhand{ transform-box:view-box; transform-origin:150px 150px; animation:aa-spin 12s linear infinite; }
.mw-hr2,.mw-hourhand{ transform-box:view-box; transform-origin:150px 150px; animation:aa-spin 144s linear infinite; }
.mw-mid{ transform-box:fill-box; transform-origin:center; animation:aa-spin 6s linear infinite reverse; }
.kw-a{ transform-box:fill-box; transform-origin:center; animation:aa-spin 9s linear infinite; }
.kw-b{ transform-box:fill-box; transform-origin:center; animation:aa-spin 6s linear infinite reverse; }
.jw-spin{ transform-box:view-box; transform-origin:170px 60px; animation:aa-spin 5s linear infinite; }
.ec-arrow{ stroke-dasharray:60; stroke-dashoffset:60; animation:ec-draw 3.4s ease-in-out infinite; }
@keyframes ec-draw{ 0%{ stroke-dashoffset:60; } 26%,74%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:60; } }
@media (prefers-reduced-motion: reduce){
  .gt-a,.gt-b,.gt-c,.gt-d,.mw-min,.mw-minhand,.mw-hr2,.mw-hourhand,.mw-mid,.kw-a,.kw-b,.jw-spin,.ec-arrow{ animation:none; }
  .ec-arrow{ stroke-dashoffset:0; }
}

.nav-tabs{ gap:8px; }
.nav-tab{ padding:10px 18px; letter-spacing:1.9px; }
@media (min-width:1280px){ .nav-tabs{ gap:12px; } .nav-tab{ padding:10px 21px; } }
.section{ padding:132px 0; }
.section.tight{ padding:88px 0; }
@media (max-width:900px){ .section{ padding:92px 0; } .nav-links{ gap:20px; } }
.art-fig{ margin:46px 0 10px; }
.art-lab{ margin:46px 0 12px; }
.art-wrap .section-title{ margin-bottom:18px; }
.art-wrap .body-text + .body-text{ margin-top:18px; }

.art-readout{ min-height:52px; align-items:center; }
.art-num{ min-width:8.5ch; display:inline-block; font-variant-numeric:tabular-nums; }
.art-num.art-num-word{ font-family:'JetBrains Mono', monospace; font-size:1.05rem; letter-spacing:2px; min-width:10ch; }
.art-panel{ min-height:196px; }

.art-subhead{ margin-top:58px; }
.dt-ring{ transform-box:view-box; transform-origin:190px 150px; animation:aa-spin 62s steps(31) infinite; }
.dt-drive{ transform-box:fill-box; transform-origin:center; animation:aa-spin 9s linear infinite reverse; }
.ec-g1{ transform-box:fill-box; transform-origin:center; animation:aa-spin 7s linear infinite; }
.ec-g2{ transform-box:fill-box; transform-origin:center; animation:aa-spin 3.5s linear infinite reverse; }
@media (prefers-reduced-motion: reduce){ .dt-ring,.dt-drive,.ec-g1,.ec-g2{ animation:none; } }

html[data-theme="dark"] .pq-dot{ border-color:rgba(255,255,255,0.55); }
html[data-theme="dark"] .pq-dot:hover{ border-color:#ffffff; }
html[data-theme="dark"] .pq-dot-on{ background:#ffffff; border-color:#ffffff; }
.ta-section{ overflow:hidden; }
.ta-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
@media (min-width:940px){ .ta-grid{ grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:72px; } }
.ta-visual{ position:relative; justify-self:center; width:min(420px,92vw); }
#taWatch{ width:100%; height:auto; color:var(--ink); display:block; overflow:visible;
  filter:drop-shadow(0 24px 50px rgba(19,19,21,0.12)); transition:none; }
#taWatch g{ transform-box:view-box; }
.ta-visual{ padding:26px; }
#taWatch g{ will-change:transform; }
.ta-caption{ display:block; text-align:center; margin-top:16px; font-family:'JetBrains Mono', monospace;
  font-size:9px; letter-spacing:2.4px; text-transform:uppercase; color:var(--muted); opacity:.72; }
.ta-stats{ display:flex; gap:34px; margin-top:28px; flex-wrap:wrap; }
.ta-stat{ display:flex; flex-direction:column; gap:5px; }
.ta-num{ font-family:'Playfair Display', Lora, serif; font-size:1.85rem; line-height:1; color:var(--ink); }
.ta-lab{ font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:1.9px; text-transform:uppercase; color:var(--muted); }
@media (prefers-reduced-motion: reduce){ #taWatch{ transform:none !important; } }

.dt-finger{ transform-box:view-box; transform-origin:200px 168px; animation:aa-spin 62s steps(31) infinite; }
.cr-assembly{ animation:cr-pull 6s ease-in-out infinite; }
@keyframes cr-pull{ 0%,42%{ transform:translateX(0); } 55%,90%{ transform:translateX(13px); } 100%{ transform:translateX(0); } }
.cr-slide{ transform-box:fill-box; transform-origin:center; animation:aa-spin 8s linear infinite; }
.cr-wind{ transform-box:fill-box; transform-origin:center; animation:cr-wind 6s ease-in-out infinite; }
@keyframes cr-wind{ 0%,42%{ transform:rotate(0deg); } 55%,90%{ transform:rotate(-26deg); } 100%{ transform:rotate(0deg); } }
.cr-set{ transform-box:fill-box; transform-origin:center; animation:cr-set 6s ease-in-out infinite; }
@keyframes cr-set{ 0%,42%{ transform:rotate(0deg); } 55%,90%{ transform:rotate(30deg); } 100%{ transform:rotate(0deg); } }
@media (prefers-reduced-motion: reduce){ .dt-finger,.cr-assembly,.cr-slide,.cr-wind,.cr-set{ animation:none; } }

.dt-ring{ transform-box:view-box; transform-origin:210px 180px; animation:aa-spin 58s linear infinite; }
.dt-num{ animation:aa-spin 58s linear infinite reverse; }
.dt-jumper{ transform-box:view-box; transform-origin:210px 180px; animation:dt-jump 1.9s ease-in-out infinite; }
@keyframes dt-jump{ 0%,72%,100%{ transform:translateX(0); } 82%{ transform:translateX(-4px); } }
.dt-drivewrap{ transform-box:view-box; transform-origin:210px 180px; }
.dt-finger{ transform-box:fill-box; transform-origin:center; animation:aa-spin 9s linear infinite reverse; }
.cr-state{ animation:cr-s1 6s ease-in-out infinite; }
.cr-state2{ animation:cr-s2 6s ease-in-out infinite; }
@keyframes cr-s1{ 0%,40%{ opacity:.9; } 52%,88%{ opacity:0; } 100%{ opacity:.9; } }
@keyframes cr-s2{ 0%,40%{ opacity:0; } 52%,88%{ opacity:.9; } 100%{ opacity:0; } }
.cr-yoke{ transform-box:view-box; transform-origin:226px 196px; animation:cr-yoke 6s ease-in-out infinite; }
@keyframes cr-yoke{ 0%,42%{ transform:rotate(0deg); } 55%,90%{ transform:rotate(-16deg); } 100%{ transform:rotate(0deg); } }
.ta-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-top:14px; }
.ta-leg{ display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono', monospace;
  font-size:8.4px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); opacity:.72; }
.ta-swatch{ width:8px; height:8px; border-radius:50%; border:1px solid var(--navy); display:inline-block; }
.ta-sw2{ background:var(--navy); opacity:.35; } .ta-sw3{ background:var(--navy); opacity:.6; }
.ta-sw4{ background:var(--navy); opacity:.85; } .ta-sw5{ background:var(--navy); }
@media (prefers-reduced-motion: reduce){ .dt-ring,.dt-num,.dt-jumper,.dt-finger,.cr-state,.cr-state2,.cr-yoke{ animation:none; } .cr-state2{ opacity:0; } }

.cx-scratch{ animation:cx-fade 4.2s ease-in-out infinite; }
@keyframes cx-fade{ 0%,30%{ opacity:0; } 55%,85%{ opacity:1; } 100%{ opacity:0; } }
.cx-chip{ transform-box:fill-box; transform-origin:center bottom; animation:cx-chip 4.2s ease-in-out infinite; }
@keyframes cx-chip{ 0%,34%{ opacity:0; transform:translateY(3px); } 58%,86%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.cx-shine{ animation:cx-shine 4.2s ease-in-out infinite; }
@keyframes cx-shine{ 0%,100%{ opacity:.25; transform:translateX(-6px); } 50%{ opacity:.8; transform:translateX(6px); } }
.cx-ray1,.cx-ray3{ stroke-dasharray:120; stroke-dashoffset:120; animation:cx-in 3.4s ease-in-out infinite; }
.cx-ray2,.cx-ray4{ stroke-dasharray:120; stroke-dashoffset:120; animation:cx-out 3.4s ease-in-out infinite; }
@keyframes cx-in{ 0%{ stroke-dashoffset:120; } 34%,100%{ stroke-dashoffset:0; } }
@keyframes cx-out{ 0%,34%{ stroke-dashoffset:120; } 68%,100%{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .cx-scratch,.cx-chip,.cx-shine,.cx-ray1,.cx-ray2,.cx-ray3,.cx-ray4{ animation:none; stroke-dashoffset:0; opacity:1; } }

.tr-ico-lg{ width:44px; height:33px; }
.trs-left{ transform-box:view-box; transform-origin:16px 24px; animation:trs-l 3.6s ease-in-out infinite; }
.trs-right{ transform-box:view-box; transform-origin:48px 24px; animation:trs-r 3.6s ease-in-out infinite; }
@keyframes trs-l{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }
@keyframes trs-r{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-3px); } }
.trs-arc1{ animation:trs-a1 3.6s ease-in-out infinite; }
.trs-arc2{ animation:trs-a2 3.6s ease-in-out infinite; }
@keyframes trs-a1{ 0%,100%{ opacity:.35; } 45%{ opacity:1; } }
@keyframes trs-a2{ 0%,100%{ opacity:1; } 45%{ opacity:.35; } }
.jf-shout{ animation:jf-shout 2.6s ease-in-out infinite; transform-box:view-box; transform-origin:10px 16px; }
@keyframes jf-shout{ 0%,100%{ opacity:.45; transform:scaleX(.86); } 45%{ opacity:1; transform:scaleX(1); } }
.jf-calm{ animation:jf-calm 2.6s ease-in-out infinite; }
@keyframes jf-calm{ 0%,100%{ opacity:.75; } 60%{ opacity:1; } }
.rd-b{ transform-box:fill-box; transform-origin:center; animation:rd-b 2.8s ease-in-out infinite; }
.rd-b2{ animation-delay:.32s; } .rd-b3{ animation-delay:.64s; } .rd-b4{ animation-delay:.96s; } .rd-b5{ animation-delay:1.28s; }
@keyframes rd-b{ 0%,100%{ transform:translateX(0); opacity:.75; } 40%{ transform:translateX(4px); opacity:1; } }
.rd-shot{ stroke-dasharray:170; stroke-dashoffset:170; animation:rd-shot 2.8s ease-in infinite; }
.rd-s2{ animation-delay:.32s; } .rd-s3{ animation-delay:.64s; } .rd-s4{ animation-delay:.96s; } .rd-s5{ animation-delay:1.28s; }
@keyframes rd-shot{ 0%{ stroke-dashoffset:170; opacity:0; } 20%{ opacity:.6; } 62%{ stroke-dashoffset:0; opacity:.5; } 78%,100%{ opacity:0; } }
.rd-shield{ transform-box:view-box; transform-origin:330px 118px; animation:rd-shield 2.8s ease-in-out infinite; }
@keyframes rd-shield{ 0%,100%{ opacity:.3; transform:scale(1); } 62%{ opacity:.85; transform:scale(1.03); } }
@media (prefers-reduced-motion: reduce){
  .trs-left,.trs-right,.trs-arc1,.trs-arc2,.jf-shout,.jf-calm,.rd-b,.rd-shot,.rd-shield{ animation:none; }
  .rd-shot{ stroke-dashoffset:0; }
}

.ta-copy{ display:flex; flex-direction:column; row-gap:16px; align-items:flex-start; }
.ta-copy .body-text + .body-text{ margin-top:2px; }

@media (max-width:860px){
  .nav{ padding:14px 4vw; gap:10px; }
  .nav-brand span{ display:none; }
  .nav-tabs{ flex:1 1 auto; min-width:0; scroll-snap-type:x proximity; padding-right:18px; }
  .nav-tab{ padding:12px 15px; scroll-snap-align:center; }
  .nav-tabs::-webkit-scrollbar{ display:none; }
}
.nav-tabs-wrap{ position:relative; display:flex; min-width:0; flex:1 1 auto; }
.nav-tabs-wrap::after{ content:''; position:absolute; top:0; right:0; bottom:0; width:34px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--bg) 78%); opacity:0; transition:opacity .28s var(--ease); }
.nav-tabs-wrap.has-more::after{ opacity:1; }
.nav-tabs-wrap::before{ content:''; position:absolute; top:0; left:0; bottom:0; width:26px; pointer-events:none; z-index:2;
  background:linear-gradient(270deg, transparent, var(--bg) 78%); opacity:0; transition:opacity .28s var(--ease); }
.nav-tabs-wrap.has-prev::before{ opacity:1; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:400; background:var(--navy); color:#fff;
  padding:12px 20px; border-radius:0 0 10px 0; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:1.6px; }
.skip-link:focus{ left:0; }
.art-ctrl input[type=range]:focus-visible{ outline:2px solid var(--navy); outline-offset:4px; }
.art-ctrl input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px color-mix(in srgb, var(--navy) 35%, transparent); }
.m-item img, .card-media img, .watch-gallery img, .photo-band img{ display:block; }
.m-item{ contain:layout paint; }

.ta-sw6{ background:var(--navy); opacity:.18; border-color:var(--navy); }

.article-body h2{ font-size:1.5rem; margin-top:14px; font-family:'Playfair Display', Lora, serif; font-weight:600; line-height:1.25; }

.ns-nav{ display:none; position:relative; z-index:200; background:var(--bg-alt); border-bottom:1px solid var(--line);
  padding:16px 5vw; }
.ns-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; }
.ns-nav a{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; }
.ns-nav a:hover{ color:var(--navy); }

.ta-caption{ display:flex; flex-direction:column; align-items:center; gap:5px; min-height:56px; }
.ta-cap-main{ font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--navy); opacity:.92; }
.ta-cap-sub{ font-family:'Lora', serif; font-size:.82rem; letter-spacing:0; text-transform:none;
  color:var(--muted); opacity:.85; max-width:34ch; line-height:1.45; }
.ta-cap-step{ font-family:'JetBrains Mono', monospace; font-size:8px; letter-spacing:2px; color:var(--muted); opacity:.5; }

.rw-arm{ transform-box:view-box; transform-origin:150px 108px; animation:rw-swing 3.2s ease-in-out infinite; }
@keyframes rw-swing{ 0%,100%{ transform:rotate(-13deg); } 50%{ transform:rotate(13deg); } }
.rw-rotor{ transform-box:view-box; transform-origin:150px 108px; animation:rw-counter 3.2s ease-in-out infinite; }
@keyframes rw-counter{ 0%,100%{ transform:rotate(13deg); } 50%{ transform:rotate(-13deg); } }
.rw-g1{ transform-box:fill-box; transform-origin:center; animation:aa-spin 5s linear infinite; }
.rw-g2{ transform-box:fill-box; transform-origin:center; animation:aa-spin 3.4s linear infinite reverse; }
.rw-flow, .rw-flow2{ stroke-dasharray:90; stroke-dashoffset:90; animation:rw-flow 3.2s ease-in-out infinite; }
.rw-flow2{ animation-delay:.5s; }
@keyframes rw-flow{ 0%{ stroke-dashoffset:90; opacity:0; } 25%{ opacity:1; } 70%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } }
.rw-spring{ transform-box:view-box; transform-origin:520px 108px; animation:rw-wind 3.2s ease-in-out infinite; }
@keyframes rw-wind{ 0%,100%{ transform:rotate(0deg) scale(1); } 60%{ transform:rotate(24deg) scale(0.94); } }
.rw-bridle{ transform-box:view-box; transform-origin:150px 130px; animation:rw-bridle 2.6s ease-in-out infinite; }
@keyframes rw-bridle{ 0%,58%{ transform:rotate(0deg); } 72%{ transform:rotate(9deg); } 100%{ transform:rotate(0deg); } }
.rw-slip{ animation:rw-slip 2.6s ease-in-out infinite; }
@keyframes rw-slip{ 0%,55%{ opacity:0; transform:translateX(0); } 72%{ opacity:1; transform:translateX(5px); } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .rw-arm,.rw-rotor,.rw-g1,.rw-g2,.rw-flow,.rw-flow2,.rw-spring,.rw-bridle,.rw-slip{ animation:none; }
  .rw-flow,.rw-flow2{ stroke-dashoffset:0; opacity:1; }
}


.watch-rail, .jmarquee, .marquee-track, #taWatch, .hero-dial{ will-change:transform; }

.tv-watch, .tw-watch, .tm-map, #taWatch, .ct-watch, .hero-dial{ filter:none; }
.tv-watch, .tw-watch, #taWatch, .ct-watch{ -webkit-filter:none; }
.art-svg{ filter:none; }
#tlArc{ filter:none; }
.tv-shadow-wrap, .ta-visual, .tw-hero-watch, .tm-mapwrap{ position:relative; }
.ta-visual::after{ content:''; position:absolute; left:12%; right:12%; bottom:2%;
  height:26px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(19,19,21,0.16), transparent 70%);
  pointer-events:none; z-index:-1; }

#grWheel{ transform-box:view-box; transform-origin:140px 160px; animation:aa-spin 18s linear infinite; }
#grPinion{ transform-box:view-box; transform-origin:330px 160px; animation:aa-spin 3s linear infinite reverse; }
.art-wrap h3{ font-family:'Playfair Display', Lora, serif; font-size:1.35rem; font-weight:600; line-height:1.3; }
@media (prefers-reduced-motion: reduce){ #grWheel,#grPinion{ animation:none; } }

a.tr-card{ text-decoration:none; color:inherit; position:relative; }
a.tr-card:hover{ border-color:color-mix(in srgb, var(--navy) 45%, var(--line-soft)); }
.tr-go{ position:absolute; right:22px; bottom:20px; font-size:1rem; color:var(--navy);
  opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
a.tr-card:hover .tr-go, a.tr-card:focus-visible .tr-go{ opacity:1; transform:none; }
.ta-cap-main, .ta-cap-sub{ transition:opacity .34s var(--ease), transform .34s var(--ease); }
.ta-caption.ta-swap .ta-cap-main{ opacity:0; transform:translateY(-6px); }
.ta-caption.ta-swap .ta-cap-sub{ opacity:0; transform:translateY(6px); }

.photo-band, .brand-marquee, #latest-journal, #stats, .footer-grid{ contain:layout paint; }
.jm-card, .card, .m-item{ contain:layout style; }
#starCanvas{ will-change:auto; }

.ta-cap-main, .ta-cap-sub, .ta-cap-step{
  transition:opacity .34s var(--ease), transform .34s var(--ease); will-change:opacity, transform; }
.ta-cap-sub{ transition-delay:.05s; }
.ta-cap-step{ transition-delay:.09s; }
.ta-swap .ta-cap-step{ opacity:0; transform:translateY(4px); }
@media (prefers-reduced-motion: reduce){
  .ta-cap-main, .ta-cap-sub, .ta-cap-step{ transition:none; }
  .ta-swap .ta-cap-main, .ta-swap .ta-cap-sub, .ta-swap .ta-cap-step{ opacity:1; transform:none; }
}

.rt-rotor{ transform-box:view-box; transform-origin:150px 150px; animation:rt-swing 4.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes rt-swing{ 0%,100%{ transform:rotate(-34deg); } 50%{ transform:rotate(34deg); } }
.rt-hub{ transform-box:fill-box; transform-origin:center; animation:rt-hub 4.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes rt-hub{ 0%,100%{ transform:rotate(-60deg); } 50%{ transform:rotate(60deg); } }
.rt-rev1{ transform-box:fill-box; transform-origin:center; animation:aa-spin 5s linear infinite; }
.rt-rev2{ transform-box:fill-box; transform-origin:center; animation:aa-spin 3.4s linear infinite reverse; }
.rt-arcA{ animation:rt-arc 4.4s cubic-bezier(.45,0,.55,1) infinite; }
.rt-arcB{ animation:rt-arc 4.4s cubic-bezier(.45,0,.55,1) infinite reverse; }
@keyframes rt-arc{ 0%,42%{ opacity:.9; } 58%,100%{ opacity:.12; } }
.rt-pawlA{ transform-box:view-box; transform-origin:310px 116px; animation:rt-pawl 4.4s ease-in-out infinite; }
.rt-pawlB{ transform-box:view-box; transform-origin:310px 202px; animation:rt-pawl 4.4s ease-in-out infinite reverse; }
@keyframes rt-pawl{ 0%,42%{ transform:translateX(0) rotate(0deg); opacity:.95; } 50%{ transform:translateX(-5px) rotate(-9deg); opacity:.4; } 58%,100%{ transform:translateX(0) rotate(0deg); opacity:.95; } }
.rt-spring{ transform-box:view-box; transform-origin:520px 140px; animation:rt-wind 4.4s linear infinite; }
@keyframes rt-wind{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.rt-dir{ animation:rt-d1 4.4s cubic-bezier(.45,0,.55,1) infinite; }
.rt-dir2{ animation:rt-d2 4.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes rt-d1{ 0%,40%{ opacity:.9; } 52%,96%{ opacity:0; } 100%{ opacity:.9; } }
@keyframes rt-d2{ 0%,40%{ opacity:0; } 52%,96%{ opacity:.9; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .rt-rotor,.rt-hub,.rt-rev1,.rt-rev2,.rt-arcA,.rt-arcB,.rt-pawlA,.rt-pawlB,.rt-spring,.rt-dir,.rt-dir2{ animation:none; }
  .rt-dir2{ opacity:0; }
}

@media (min-width:820px){
  .art-ctrl{ grid-template-columns:1fr auto; grid-template-areas:"lab lab" "sld out"; row-gap:7px; }
  .art-ctrl label{ grid-area:lab; }
  .art-ctrl input[type=range]{ grid-area:sld; }
  .art-ctrl output{ grid-area:out; }
}

@media (max-width:620px){
  .art-ctrl{ grid-template-columns:1fr auto; grid-template-areas:"lab lab" "sld out"; row-gap:7px; }
  .art-ctrl label{ grid-area:lab; }
  .art-ctrl input[type=range]{ grid-area:sld; }
  .art-ctrl output{ grid-area:out; }
}

.ct-send{ display:inline-flex; align-items:center; gap:11px; }
.ct-plane{ width:17px; height:17px; flex:0 0 auto; overflow:visible;
  transition:transform .38s var(--ease), opacity .38s var(--ease); }
.ct-send:hover .ct-plane{ transform:translate(4px,-4px) rotate(-8deg); }
.ct-send:active .ct-plane{ transform:translate(7px,-7px) rotate(-12deg); }
.ct-send:disabled .ct-plane{ animation:ct-fly 1.1s ease-in forwards; }
@keyframes ct-fly{ 0%{ transform:translate(0,0) rotate(0); opacity:1; }
  70%{ transform:translate(26px,-26px) rotate(-16deg); opacity:0; }
  100%{ transform:translate(26px,-26px) rotate(-16deg); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .ct-plane, .ct-send:hover .ct-plane, .ct-send:active .ct-plane{ transition:none; transform:none; }
  .ct-send:disabled .ct-plane{ animation:none; }
}

.jz-big{ transform-box:view-box; transform-origin:15px 22px; animation:jz-b 3.4s ease-in-out infinite; }
.jz-small{ transform-box:view-box; transform-origin:30px 22px; animation:jz-s 3.4s ease-in-out infinite; }
@keyframes jz-b{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(0.84); } }
@keyframes jz-s{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.24); } }
.jz-arr{ animation:jz-a 3.4s ease-in-out infinite; }
@keyframes jz-a{ 0%,100%{ opacity:.25; } 50%{ opacity:.9; } }
.jn-one{ animation:jn-p 2.8s ease-in-out infinite; transform-box:view-box; transform-origin:29px 26px; }
@keyframes jn-p{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.16); opacity:1; } }
.jn-watch{ animation:jn-w 2.8s ease-in-out infinite; }
@keyframes jn-w{ 0%,100%{ opacity:.8; } 50%{ opacity:1; } }
.cv-a{ transform-box:view-box; transform-origin:150px 250px; animation:cv-a 5s ease-in-out infinite; }
.cv-b{ transform-box:view-box; transform-origin:510px 250px; animation:cv-b 5s ease-in-out infinite; }
@keyframes cv-a{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(150px); } }
@keyframes cv-b{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-160px); } }
.cv-w1{ transform-box:view-box; transform-origin:180px 120px; animation:cv-w1 5s ease-in-out infinite; }
.cv-w2{ transform-box:view-box; transform-origin:430px 120px; animation:cv-w2 5s ease-in-out infinite; }
@keyframes cv-w1{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(0.86); } }
@keyframes cv-w2{ 0%,100%{ transform:scale(0.86); } 50%{ transform:scale(1); } }
.cv-arrow1, .cv-arrow2{ animation:cv-ar 5s ease-in-out infinite; }
@keyframes cv-ar{ 0%,100%{ opacity:.25; } 50%{ opacity:.85; } }
.wn-none{ fill:currentColor; opacity:0.13; }
.wn-vague{ fill:currentColor; opacity:0.4; animation:wn-v 4s ease-in-out infinite; }
.wn-knows{ fill:var(--navy); transform-box:fill-box; transform-origin:center; animation:wn-k 4s ease-in-out infinite; }
@keyframes wn-v{ 0%,100%{ opacity:.28; } 50%{ opacity:.6; } }
@keyframes wn-k{ 0%,100%{ opacity:.75; transform:scale(1); } 50%{ opacity:1; transform:scale(1.2); } }
@media (prefers-reduced-motion: reduce){
  .jz-big,.jz-small,.jz-arr,.jn-one,.jn-watch,.cv-a,.cv-b,.cv-w1,.cv-w2,.cv-arrow1,.cv-arrow2,.wn-vague,.wn-knows{ animation:none; }
}

.gallery-jump{ display:inline-flex; align-items:center; gap:13px; padding:13px 24px; }
.gj-icon{ display:inline-grid; grid-template-columns:repeat(2,7px); grid-auto-rows:7px; gap:2.5px; flex:0 0 auto; }
.gj-icon span{ display:block; width:7px; height:7px; border-radius:1.5px; background:currentColor; opacity:.35;
  animation:gj-tile 2.6s ease-in-out infinite; }
.gj-icon span:nth-child(2){ animation-delay:.2s; } .gj-icon span:nth-child(3){ animation-delay:.4s; } .gj-icon span:nth-child(4){ animation-delay:.6s; }
@keyframes gj-tile{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.gj-count{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:1.4px; opacity:.6;
  padding-left:11px; border-left:1px solid currentColor; border-left-color:color-mix(in srgb, currentColor 30%, transparent); }
.gallery-jump .jump-chev{ transition:transform .3s var(--ease); }
.gallery-jump:hover .jump-chev{ transform:translateY(4px); }
@media (prefers-reduced-motion: reduce){ .gj-icon span{ animation:none; opacity:.6; } .gallery-jump:hover .jump-chev{ transform:none; } }

/* Gallery: reserve space before photos load so the masonry cannot reflow */
.m-item{ aspect-ratio:var(--ar, 3 / 4); contain:layout paint; }
.m-item img{ width:100%; height:100%; object-fit:cover; display:block; }
@supports not (aspect-ratio: 1 / 1){ .m-item{ min-height:240px; } }

/* Gallery column counts — declared last so they win over `columns:4 15rem` */
@media (max-width:1100px){ #photoGrid.masonry{ columns:3 11rem; } }
@media (max-width:900px){ #photoGrid.masonry{ columns:2 10rem; } }
@media (max-width:620px){ #photoGrid.masonry{ columns:1; } }
#photoGrid .m-item{ width:100%; box-sizing:border-box; }
#photoGrid .m-item img{ max-width:100%; box-sizing:border-box; }

/* Gallery: CSS grid instead of multi-column — grid cells never re-balance,
   so a photo finishing its download cannot push anything around. */
#photoGrid.masonry{ columns:auto; column-gap:normal; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); align-items:start; }
#photoGrid .m-item{ margin:0; aspect-ratio:4 / 5; break-inside:auto; }
@media (max-width:1100px){ #photoGrid.masonry{ grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); } }
@media (max-width:620px){ #photoGrid.masonry{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } }
@media (max-width:400px){ #photoGrid.masonry{ grid-template-columns:1fr; } }


/* Zoom: let the browser re-rasterise at the zoomed size instead of GPU-upscaling
   a 1x layer, which produced banding/lines across the photo. */
/* Zoom: never promote the photo to its own GPU layer. A promoted layer is
   rasterised once at 1x and then stretched, and on large scales the compositor
   splits it into tiles — the seams between those tiles let the panel background
   show through as thin light/dark lines. Without promotion the browser
   re-rasterises the photo at the zoomed size and the seams cannot occur. */
#wHero img#wPhoto{ will-change:auto; backface-visibility:visible; image-rendering:auto; }
#wHero.zoomed img#wPhoto{ will-change:auto; backface-visibility:visible; }

/* Keyboard focus for controls that were relying on the browser default,
   which the reset had removed — journal sort and the contact subject chips. */
#jSort:focus-visible,
.ct2-chip:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:6px; }
.ct2-chip:focus-visible{ background:color-mix(in srgb, var(--navy) 10%, transparent); }

.pq-src a:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:4px; }

/* `transition: all` also animates outline-width, so a keyboard focus ring
   faded in over 300ms instead of appearing at once. Outline is excluded here. */
.pq-src a, .pq-dot, .tl-chip, .tl-chip::before{ transition-property:color, background-color, background, border-color, border-bottom-color, transform, opacity, box-shadow; }

.hd-barrel{ transform-box:view-box; transform-origin:60px 150px; animation:aa-spin 216s linear infinite; }
.hd-centre{ transform-box:fill-box; transform-origin:center; animation:aa-spin 36s linear infinite reverse; }
.hd-third{ transform-box:fill-box; transform-origin:center; animation:aa-spin 4.5s linear infinite; }
.hd-fourth{ transform-box:fill-box; transform-origin:center; animation:aa-spin 0.6s linear infinite reverse; }
.hd-escape{ transform-box:fill-box; transform-origin:center; animation:hd-esc 0.6s steps(15) infinite; }
@keyframes hd-esc{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
.hd-bal{ transform-box:view-box; transform-origin:560px 150px; animation:hd-bal 0.5s ease-in-out infinite alternate; }
@keyframes hd-bal{ from{ transform:rotate(-135deg); } to{ transform:rotate(135deg); } }
.hd-motion{ transform-box:fill-box; transform-origin:center; animation:aa-spin 36s linear infinite reverse; }
.hd-hourwheel{ transform-box:fill-box; transform-origin:center; animation:aa-spin 432s linear infinite; }
.hd-sec{ transform-box:view-box; transform-origin:170px 170px; animation:aa-spin 5s steps(30) infinite; }
.hd-min{ transform-box:view-box; transform-origin:170px 170px; animation:aa-spin 300s linear infinite; }
.hd-hour{ transform-box:view-box; transform-origin:170px 170px; animation:aa-spin 3600s linear infinite; }
@media (prefers-reduced-motion: reduce){
  .hd-barrel,.hd-centre,.hd-third,.hd-fourth,.hd-escape,.hd-bal,.hd-motion,.hd-hourwheel,.hd-sec,.hd-min,.hd-hour{ animation:none; }
}

/* Six stats now, so the strip needs a sixth column */
.stats-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:22px; }
@media (max-width:1200px){ .stats-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; } }
@media (max-width:720px){ .stats-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; } }

/* Stats strip now carries six entries */
.stats-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:20px; }
@media (max-width:1240px){ .stats-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:30px; } }
@media (max-width:700px){ .stats-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:26px; } }

.jd-dad{ transform-box:view-box; transform-origin:13px 24px; animation:jd-d 3.6s ease-in-out infinite; }
@keyframes jd-d{ 0%,100%{ transform:translateX(0); opacity:.9; } 50%{ transform:translateX(-1.5px); opacity:1; } }
.jd-son{ transform-box:view-box; transform-origin:32px 26px; animation:jd-s 3.6s ease-in-out infinite; }
@keyframes jd-s{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.jd-pass{ stroke-dasharray:7; animation:jd-p 3.6s ease-in-out infinite; }
@keyframes jd-p{ 0%{ stroke-dashoffset:7; opacity:.2; } 45%{ stroke-dashoffset:0; opacity:.9; } 100%{ stroke-dashoffset:-7; opacity:.2; } }
.jd-watch{ transform-box:view-box; transform-origin:24px 9px; animation:jd-w 3.6s ease-in-out infinite; }
@keyframes jd-w{ 0%,100%{ transform:translateX(-9px); opacity:.45; } 50%{ transform:translateX(8px); opacity:1; } }
.dd-intro{ stroke-dasharray:88; animation:dd-i 4.4s ease-in-out infinite; }
@keyframes dd-i{ 0%{ stroke-dashoffset:88; } 40%,100%{ stroke-dashoffset:0; } }
.dd-dad{ animation:dd-pulse 4.4s ease-in-out infinite; transform-box:view-box; transform-origin:78px 150px; }
@keyframes dd-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.dd-w0{ transform-box:view-box; transform-origin:78px 150px; animation:aa-spin 26s linear infinite; }
.dd-w1{ transform-box:view-box; transform-origin:242px 150px; animation:aa-spin 20s linear infinite; }
.dd-line{ stroke-dasharray:230; animation:dd-l 4.4s ease-in-out infinite; }
.dd-line1{ animation-delay:.35s; } .dd-line2{ animation-delay:.6s; } .dd-line3{ animation-delay:.85s; } .dd-line4{ animation-delay:1.1s; }
@keyframes dd-l{ 0%,18%{ stroke-dashoffset:230; opacity:0; } 60%,100%{ stroke-dashoffset:0; opacity:.5; } }
.dd-ad{ animation:dd-a 4.4s ease-in-out infinite; }
.dd-ad1{ animation-delay:.45s; } .dd-ad2{ animation-delay:.7s; } .dd-ad3{ animation-delay:.95s; } .dd-ad4{ animation-delay:1.2s; }
@keyframes dd-a{ 0%,25%{ opacity:.2; } 65%,100%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .jd-dad,.jd-son,.jd-pass,.jd-watch,.dd-intro,.dd-dad,.dd-w0,.dd-w1,.dd-line,.dd-ad{ animation:none; }
  .dd-intro,.dd-line{ stroke-dashoffset:0; } .dd-ad{ opacity:1; }
}

/* ===== Customer reviews marquee (rv- prefix) ===== */
.rv-intro{ max-width:640px; margin-top:14px; }
.rv-marquee{ margin-top:38px; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rv-track{ display:flex; gap:22px; width:max-content; will-change:transform;
  animation:rv-slide 190s linear infinite; }
@keyframes rv-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.rv-marquee:hover .rv-track, .rv-marquee:focus-within .rv-track{ animation-play-state:paused; }
.rv-card{ flex:0 0 auto; width:344px; margin:0; padding:26px 26px 22px;
  border:1px solid var(--line); border-radius:14px; background:var(--bg-alt);
  display:flex; flex-direction:column; gap:14px; contain:layout style; }
.rv-stars{ display:flex; align-items:center; gap:3px; color:var(--navy); }
.rv-star{ width:21px; height:21px; display:block; }
.rv-star svg{ width:100%; height:100%; display:block; }
.rv-full svg path{ fill:currentColor; }
.rv-half svg path{ fill:url(#rvHalf); stroke:currentColor; stroke-width:1.4; }
.rv-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.rv-empty svg path{ fill:none; stroke:currentColor; stroke-width:1.4; opacity:.4; }
.rv-score{ margin-left:9px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:1.4px; opacity:.6; }
.rv-quote{ margin:0; font-family:'Lora',serif; font-size:15px; line-height:1.62; color:var(--ink); }
.rv-quote::before{ content:"“"; }
.rv-quote::after{ content:"”"; }
.rv-name{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; opacity:.55; margin-top:auto; }
@media (max-width:700px){ .rv-card{ width:280px; padding:22px 20px 18px; } .rv-quote{ font-size:14px; } }
@media (prefers-reduced-motion: reduce){ .rv-track{ animation:none; } }

.rv-card{ text-decoration:none; color:inherit; cursor:pointer;
  transition:border-color .35s var(--ease), transform .35s var(--ease); }
a.rv-card:hover{ border-color:var(--navy); transform:translateY(-4px); }
a.rv-card:focus-visible{ outline:2px solid var(--navy); outline-offset:4px; }
.rv-go{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:2px;
  text-transform:uppercase; opacity:0; color:var(--navy); transition:opacity .35s var(--ease); }
a.rv-card:hover .rv-go, a.rv-card:focus-visible .rv-go{ opacity:.8; }
.rv-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.rv-name{ margin-top:0; }

/* Thanks, Dad — diagram. Each element fades out before the cycle restarts, so the
   loop never snaps back visibly. pathLength="1" keeps dash maths identical on
   straight and curved paths. */
.dg-hand, .dg-bridge, .dg-link{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }
.dg-hand{ animation:dg-draw 14s ease-in-out infinite; }
.dg-hand1{ animation-delay:0s; } .dg-hand2{ animation-delay:.45s; } .dg-hand3{ animation-delay:.9s; }
.dg-bridge{ animation:dg-draw 14s ease-in-out infinite; animation-delay:2.4s; }
.dg-link{ animation:dg-draw 14s ease-in-out infinite; }
.dg-link1{ animation-delay:3.2s; } .dg-link2{ animation-delay:3.6s; } .dg-link3{ animation-delay:4s; } .dg-link4{ animation-delay:4.4s; }
@keyframes dg-draw{
  0%{ stroke-dashoffset:1; opacity:0; }
  6%{ opacity:.55; }
  24%{ stroke-dashoffset:0; opacity:.55; }
  84%{ stroke-dashoffset:0; opacity:.55; }
  95%{ stroke-dashoffset:0; opacity:0; }
  100%{ stroke-dashoffset:1; opacity:0; }
}
.dg-w, .dg-naut{ transform-box:fill-box; transform-origin:center; opacity:0; }
.dg-w{ animation:dg-appear 14s ease-in-out infinite; }
.dg-w1{ animation-delay:0s; } .dg-w2{ animation-delay:.45s; } .dg-w3{ animation-delay:.9s; }
.dg-naut{ animation:dg-appear 14s ease-in-out infinite; animation-delay:2.2s; }
@keyframes dg-appear{
  0%{ opacity:0; transform:scale(.9); }
  12%{ opacity:1; transform:scale(1); }
  84%{ opacity:1; transform:scale(1); }
  95%{ opacity:0; transform:scale(1); }
  100%{ opacity:0; transform:scale(.9); }
}
.dg-halo{ transform-box:view-box; transform-origin:228px 168px; opacity:0;
  animation:dg-halo 14s ease-in-out infinite; animation-delay:2.2s; }
@keyframes dg-halo{
  0%{ opacity:0; transform:scale(.72); }
  16%{ opacity:.13; transform:scale(1); }
  84%{ opacity:.13; transform:scale(1); }
  95%{ opacity:0; transform:scale(1); }
  100%{ opacity:0; transform:scale(.72); }
}
.dg-door{ opacity:0; animation:dg-appear 14s ease-in-out infinite; }
.dg-door1{ animation-delay:3.2s; } .dg-door2{ animation-delay:3.6s; } .dg-door3{ animation-delay:4s; } .dg-door4{ animation-delay:4.4s; }
@media (prefers-reduced-motion: reduce){
  .dg-hand,.dg-bridge,.dg-link,.dg-w,.dg-naut,.dg-halo,.dg-door{ animation:none; stroke-dashoffset:0; opacity:1; }
  .dg-halo{ opacity:.13; }
}

/* Cards lift on hover; give every scroller/marquee enough headroom that the
   raised card and its focus ring are not sliced off by the container. */
.rv-marquee{ padding:16px 0; }
.jmarquee{ padding-top:16px; padding-bottom:16px; }
.watch-rail{ padding-top:16px; padding-bottom:22px; }


/* The + on a stat pops in once the count-up finishes */
.stat-plus{ display:inline-block; transform-origin:50% 62%;
  animation:stat-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes stat-pop{
  0%{ transform:scale(0) rotate(-14deg); opacity:0; }
  55%{ transform:scale(1.32) rotate(3deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .stat-plus{ animation:none; } }

/* ===== Storage consent bar (ck- prefix) ===== */
.ck-bar{ position:fixed; left:0; right:0; bottom:0; z-index:900;
  background:var(--bg); border-top:1px solid var(--line);
  box-shadow:0 -14px 40px rgba(0,0,0,0);
  /* A short rise paired with a matched fade reads far softer than a full
     slide up from off-screen. Both directions share the same easing. */
  transform:translateY(26px); opacity:0; will-change:transform, opacity;
  transition:transform .66s cubic-bezier(.22,.9,.28,1),
             opacity .66s cubic-bezier(.22,.9,.28,1),
             box-shadow .66s ease;
  padding:20px max(5vw, 20px) calc(20px + env(safe-area-inset-bottom, 0px)); }
/* Entry runs as a keyframe animation rather than a transition: it starts from a
   defined state regardless of when the class lands, and the compositor can drive
   opacity and transform without waiting on the main thread. */
.ck-bar.ck-in{ transform:translateY(0); opacity:1; box-shadow:0 -14px 40px rgba(0,0,0,.14);
  animation:ck-rise .72s cubic-bezier(.22,.9,.28,1) both; }
@keyframes ck-rise{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
.ck-bar.ck-in{ transform:translateY(0); }
.ck-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.ck-copy{ flex:1 1 460px; min-width:0; }
.ck-title{ margin:0 0 6px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:2.2px; text-transform:uppercase; opacity:.6; }
.ck-body{ margin:0; font-family:'Lora',serif; font-size:14.5px; line-height:1.6; color:var(--ink); max-width:74ch; }
.ck-actions{ display:flex; gap:12px; flex:0 0 auto; }
.ck-btn{ padding:11px 26px; font-size:11.5px; white-space:nowrap; }
.ck-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
@media (max-width:700px){
  .ck-inner{ gap:18px; }
  .ck-actions{ width:100%; }
  .ck-btn{ flex:1 1 0; padding:13px 14px; }
  .ck-body{ font-size:13.5px; }
}
@media (prefers-reduced-motion: reduce){ .ck-bar{ transition:none; } .ck-bar.ck-in{ animation:none; } }

/* Keep the back-to-top button clear of the consent bar while it is showing */
body.ck-open #backToTop{ transform:translateY(calc(-1 * var(--ck-h, 0px) - 14px)); }
#backToTop{ transition:transform .45s var(--ease), opacity .3s var(--ease); }

/* Consent bar: live watch dial */
.ck-icon{ flex:0 0 auto; display:grid; place-items:center; }
.ck-watch{ width:62px; height:62px; color:var(--ink); overflow:visible; }
.ck-watch line, .ck-watch circle, .ck-watch rect{ vector-effect:non-scaling-stroke; }
.ck-sec{ transform-box:view-box; transform-origin:32px 32px; animation:ck-spin 6s steps(30) infinite; }
.ck-min{ transform-box:view-box; transform-origin:32px 32px; animation:ck-spin 240s linear infinite; }
.ck-hr{ transform-box:view-box; transform-origin:32px 32px; animation:ck-spin 2880s linear infinite; }
@keyframes ck-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.ck-bar.ck-in .ck-watch{ animation:ck-wind .8s cubic-bezier(.2,1.25,.4,1) .22s both; }
@keyframes ck-wind{ 0%{ transform:scale(.78) rotate(-14deg); opacity:0; } 62%{ transform:scale(1.05) rotate(3deg); opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
@media (max-width:700px){
  .ck-watch{ width:46px; height:46px; }
  .ck-inner{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon copy" "act act"; align-items:start; }
  .ck-icon{ grid-area:icon; padding-top:2px; } .ck-copy{ grid-area:copy; } .ck-actions{ grid-area:act; }
}
@media (prefers-reduced-motion: reduce){
  .ck-sec, .ck-min, .ck-hr{ animation:none; }
  .ck-bar.ck-in .ck-watch{ animation:none; }
}


/* Consent bar exit — slower and softer than the entrance so it reads as
   settling away rather than being cut off. */
/* Exit is a keyframe animation too, so it starts from a defined opacity rather
   than inheriting whatever the entry animation left behind. */
.ck-bar.ck-out{ animation:ck-sink .62s cubic-bezier(.4,0,.28,1) both; }
@keyframes ck-sink{
  from{ opacity:1; transform:translateY(0); box-shadow:0 -14px 40px rgba(0,0,0,.14); }
  to{ opacity:0; transform:translateY(22px); box-shadow:0 -14px 40px rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce){ .ck-bar.ck-out{ animation:none; opacity:0; } }


/* Contact float labels: animate the properties that actually change (position,
   size, colour, spacing) on a single easing so the label glides up instead of
   snapping. Previously the duration had been lost and it jumped instantly. */
.ct2-float label{
  transition:top .34s cubic-bezier(.22,.9,.3,1),
             font-size .34s cubic-bezier(.22,.9,.3,1),
             letter-spacing .34s cubic-bezier(.22,.9,.3,1),
             color .28s ease,
             opacity .28s ease;
  will-change:top, font-size;
}
.ct2-float input:focus + label,
.ct2-float textarea:focus + label{ color:var(--navy); }
/* underline that draws in from the centre as the field takes focus */
.ct2-float::after{ content:''; position:absolute; left:50%; right:50%; bottom:0; height:2px;
  background:var(--navy); border-radius:2px; opacity:0;
  transition:left .38s cubic-bezier(.22,.9,.3,1), right .38s cubic-bezier(.22,.9,.3,1), opacity .25s ease; }
.ct2-float:focus-within::after{ left:0; right:0; opacity:.9; }
@media (prefers-reduced-motion: reduce){
  .ct2-float label{ transition:none; }
  .ct2-float::after{ transition:none; }
}

/* ===== Contact review deck (ctr- prefix) — stacked cards, distinct from the
   homepage marquee: the front card lifts away while the next rises to meet you. */
.ctr-wrap{ margin-top:78px; }
.ctr-head{ margin-bottom:26px; }
.ctr-title{ font-family:'Playfair Display', Lora, serif; font-size:clamp(1.35rem, 2.4vw, 1.9rem);
  line-height:1.25; margin:10px 0 0; max-width:22ch; }
.ctr-stage{ position:relative; height:250px; perspective:1200px; }
.ctr-deck{ position:relative; height:196px; transform-style:preserve-3d; }
.ctr-card{ position:absolute; inset:0; margin:0; padding:26px 30px;
  border:1px solid var(--line); border-radius:16px; background:var(--bg-alt);
  display:flex; flex-direction:column; gap:13px;
  transform-origin:50% 100%;
  transform:translate3d(0, calc(var(--d, 0) * 13px), calc(var(--d, 0) * -46px)) scale(calc(1 - var(--d, 0) * 0.045));
  opacity:calc(1 - var(--d, 0) * 0.3);
  filter:blur(calc(var(--d, 0) * 0.6px));
  transition:transform .72s cubic-bezier(.22,.9,.28,1), opacity .6s ease, filter .6s ease, box-shadow .6s ease;
  pointer-events:none; }
.ctr-card.is-front{ pointer-events:auto; box-shadow:0 22px 50px rgba(19,19,21,0.10); }
.ctr-stars{ display:flex; align-items:center; gap:3px; color:var(--navy); }
.ctr-stars .rv-star{ width:17px; height:17px; }
.ctr-score{ margin-left:8px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.4px; opacity:.55; }
.ctr-quote{ margin:0; font-family:'Lora',serif; font-size:15.5px; line-height:1.6; color:var(--ink); }
.ctr-quote::before{ content:"\201c"; } .ctr-quote::after{ content:"\201d"; }
.ctr-name{ margin-top:auto; font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:2px; text-transform:uppercase; opacity:.55; }
.ctr-dots{ display:flex; gap:9px; justify-content:center; margin-top:20px; }
.ctr-dot{ width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--ink); background:transparent; opacity:.4;
  transition:opacity .3s var(--ease), background .3s var(--ease), width .3s var(--ease); }
.ctr-dot[aria-selected="true"]{ opacity:1; background:var(--navy); border-color:var(--navy); width:22px; border-radius:5px; }
.ctr-dot:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
@media (max-width:700px){
  .ctr-stage{ height:284px; } .ctr-deck{ height:230px; }
  .ctr-card{ padding:22px 20px; } .ctr-quote{ font-size:14.5px; }
}
@media (prefers-reduced-motion: reduce){ .ctr-card{ transition:none; } }

/* The three notes below are informational, not links — remove the hover affordance */
.ct2-tile.ct2-static{ cursor:default; }
.ct2-tile.ct2-static:hover{ transform:none; box-shadow:none; }

/* Why I Love All Watches — diagram + icon */
.lv-bal{ transform-box:view-box; transform-origin:98px 150px; animation:lv-osc 1.5s ease-in-out infinite alternate; }
@keyframes lv-osc{ from{ transform:rotate(-125deg); } to{ transform:rotate(125deg); } }
.lv-fork{ transform-box:view-box; transform-origin:300px 178px; animation:lv-buzz .18s ease-in-out infinite alternate; }
@keyframes lv-buzz{ from{ transform:scaleX(0.985); } to{ transform:scaleX(1.015); } }
.lv-wave{ stroke-dasharray:1; stroke-dashoffset:1; animation:lv-trace 3.4s linear infinite; }
@keyframes lv-trace{ 0%{ stroke-dashoffset:1; opacity:0; } 12%{ opacity:.85; } 78%{ stroke-dashoffset:0; opacity:.85; } 92%,100%{ stroke-dashoffset:0; opacity:0; } }
.lv-ping, .lv-ping2{ transform-box:view-box; transform-origin:502px 151px; }
.lv-ping{ animation:lv-ping 2.6s ease-out infinite; }
.lv-ping2{ animation:lv-ping 2.6s ease-out infinite 1.3s; }
@keyframes lv-ping{ 0%{ transform:scale(.5); opacity:0; } 14%{ opacity:.85; } 70%{ opacity:.12; } 100%{ transform:scale(3.1); opacity:0; } }
.jl-mech{ transform-box:view-box; transform-origin:11px 16px; animation:lv-osc 1.7s ease-in-out infinite alternate; }
.jl-quartz{ animation:jl-q 1.9s ease-in-out infinite; }
@keyframes jl-q{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
.jl-wave{ animation:jl-w 2.4s ease-out infinite; transform-box:view-box; transform-origin:31px 30px; }
@keyframes jl-w{ 0%{ opacity:.15; transform:scale(.85); } 45%{ opacity:1; transform:scale(1); } 100%{ opacity:.15; transform:scale(1.05); } }
@media (prefers-reduced-motion: reduce){
  .lv-bal,.lv-fork,.lv-wave,.lv-ping,.lv-ping2,.jl-mech,.jl-quartz,.jl-wave{ animation:none; }
  .lv-wave{ stroke-dashoffset:0; opacity:.85; }
}

/* Ten dots now, so keep them on one line at every width */
.pq-dots{ flex-wrap:nowrap; gap:7px; }
@media (max-width:420px){ .pq-dots{ gap:6px; } }


/* The envelope orbits beyond the dial edge, so the watch SVG must not clip it. */
.ct-watch{ overflow:visible; }
.ct-watchblock, .ct-fit{ overflow:visible; }

/* Why Keeping Time Matters — timeline diagram */
.tm-spine{ stroke-dasharray:1; stroke-dashoffset:1; animation:tm-draw 16s ease-out infinite; }
@keyframes tm-draw{ 0%{ stroke-dashoffset:1; } 22%,100%{ stroke-dashoffset:0; } }
.tm-node{ opacity:0; animation:tm-pop 16s ease-out infinite; }
.tm-n1{ animation-delay:.4s; } .tm-n2{ animation-delay:.9s; } .tm-n3{ animation-delay:1.4s; }
.tm-n4{ animation-delay:1.9s; } .tm-n5{ animation-delay:2.4s; } .tm-n6{ animation-delay:2.9s; }
@keyframes tm-pop{ 0%,2%{ opacity:0; transform:scale(.4); } 8%,94%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.4); } }
.tm-node{ transform-box:fill-box; transform-origin:center; }
.tm-shadow{ transform-box:view-box; transform-origin:86px 120px; animation:tm-sweep 9s ease-in-out infinite alternate; }
@keyframes tm-sweep{ from{ transform:rotate(-62deg); } to{ transform:rotate(62deg); } }
.tm-drop{ opacity:0; animation:tm-drip 2.4s linear infinite; }
.tm-d1{ animation-delay:0s; } .tm-d2{ animation-delay:.8s; } .tm-d3{ animation-delay:1.6s; }
@keyframes tm-drip{ 0%{ opacity:0; transform:translateY(0); } 24%{ opacity:.9; } 76%{ opacity:.9; transform:translateY(9px); } 100%{ opacity:0; transform:translateY(12px); } }
.tm-drop{ transform-box:view-box; }
.tm-esc{ transform-box:view-box; transform-origin:266px 113px; animation:tm-tick 3.6s steps(12) infinite; }
@keyframes tm-tick{ to{ transform:rotate(360deg); } }
.tm-pallet{ transform-box:view-box; transform-origin:266px 88px; animation:tm-pal .3s ease-in-out infinite alternate; }
@keyframes tm-pal{ from{ transform:rotate(-9deg); } to{ transform:rotate(9deg); } }
.tm-pend{ transform-box:view-box; transform-origin:356px 90px; animation:tm-swing 1.6s ease-in-out infinite alternate; }
@keyframes tm-swing{ from{ transform:rotate(-19deg); } to{ transform:rotate(19deg); } }
.tm-fork{ transform-box:view-box; transform-origin:446px 124px; animation:tm-buzz .17s ease-in-out infinite alternate; }
@keyframes tm-buzz{ from{ transform:scaleX(.985); } to{ transform:scaleX(1.015); } }
.tm-wave{ stroke-dasharray:1; stroke-dashoffset:1; animation:tm-trace 3.2s linear infinite; }
@keyframes tm-trace{ 0%{ stroke-dashoffset:1; opacity:0; } 12%{ opacity:.8; } 78%{ stroke-dashoffset:0; opacity:.8; } 92%,100%{ stroke-dashoffset:0; opacity:0; } }
.tm-pulse{ transform-box:view-box; transform-origin:536px 110px; animation:tm-ping 2.8s ease-out infinite; }
@keyframes tm-ping{ 0%{ transform:scale(.4); opacity:0; } 14%{ opacity:.8; } 100%{ transform:scale(2.4); opacity:0; } }
.tm-orb{ transform-box:view-box; transform-origin:536px 110px; animation:tm-spin 5s linear infinite; }
.tm-orb2{ transform-box:view-box; transform-origin:536px 110px; transform:rotate(60deg); animation:tm-spin2 5s linear infinite; }
@keyframes tm-spin{ to{ transform:rotate(360deg); } }
@keyframes tm-spin2{ from{ transform:rotate(60deg); } to{ transform:rotate(420deg); } }
.jt-shadow{ transform-box:view-box; transform-origin:12px 26px; animation:tm-sweep 6s ease-in-out infinite alternate; }
.jt-pend{ transform-box:view-box; transform-origin:24px 12px; animation:tm-swing 1.5s ease-in-out infinite alternate; }
.jt-ring{ transform-box:view-box; transform-origin:35px 22px; animation:jt-ring 2.6s ease-out infinite; }
@keyframes jt-ring{ 0%{ transform:scale(.5); opacity:0; } 16%{ opacity:.9; } 100%{ transform:scale(1.5); opacity:0; } }
.jt-dot{ opacity:.25; animation:jt-dot 3.6s ease-in-out infinite; }
.jt-dot1{ animation-delay:0s; } .jt-dot2{ animation-delay:.5s; } .jt-dot3{ animation-delay:1s; }
@keyframes jt-dot{ 0%,60%,100%{ opacity:.25; } 20%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .tm-spine,.tm-node,.tm-shadow,.tm-drop,.tm-esc,.tm-pallet,.tm-pend,.tm-fork,.tm-wave,.tm-pulse,.tm-orb,.tm-orb2,
  .jt-shadow,.jt-pend,.jt-ring,.jt-dot{ animation:none; }
  .tm-spine,.tm-wave{ stroke-dashoffset:0; } .tm-node,.tm-drop{ opacity:1; } .jt-dot{ opacity:1; }
}

/* How to Maintain a Luxury Watch — diagram */
.mt-hour{ transform-box:view-box; transform-origin:108px 140px; animation:mt-sweep 12s linear infinite; }
@keyframes mt-sweep{ to{ transform:rotate(360deg); } }
.mt-zone{ animation:mt-glow 12s ease-in-out infinite; }
@keyframes mt-glow{ 0%,42%{ opacity:.13; } 55%{ opacity:.3; } 72%,100%{ opacity:.13; } }
.mt-stress{ animation:mt-stress 2.2s ease-in-out infinite; }
@keyframes mt-stress{ 0%,100%{ opacity:.2; transform:translateY(0); } 50%{ opacity:1; transform:translateY(1.5px); } }
.mt-stress{ transform-box:view-box; }
.mt-wrong{ animation:mt-press 2.2s ease-in-out infinite; transform-box:view-box; transform-origin:274px 176px; }
@keyframes mt-press{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(1.2px); } }
.mt-tick{ stroke-dasharray:1; stroke-dashoffset:1; animation:mt-check 3.4s ease-in-out infinite; }
@keyframes mt-check{ 0%{ stroke-dashoffset:1; opacity:0; } 16%{ opacity:1; } 34%,82%{ stroke-dashoffset:0; opacity:1; } 94%,100%{ stroke-dashoffset:0; opacity:0; } }
.mt-field{ opacity:0; animation:mt-wave 2.6s ease-out infinite; }
.mt-f1{ animation-delay:0s; } .mt-f2{ animation-delay:.32s; } .mt-f3{ animation-delay:.64s; }
@keyframes mt-wave{ 0%{ opacity:0; } 22%{ opacity:.6; } 70%{ opacity:.18; } 100%{ opacity:0; } }
.mt-fast{ transform-box:view-box; transform-origin:546px 146px; animation:mt-spin 7s linear infinite; }
@keyframes mt-spin{ to{ transform:rotate(360deg); } }
.jm-hand{ transform-box:view-box; transform-origin:22px 22px; animation:mt-sweep 8s linear infinite; }
.jm-zone{ animation:mt-glow 8s ease-in-out infinite; }
.jm-warn{ transform-box:view-box; transform-origin:22px 22px; animation:jm-warn 8s linear infinite; }
@keyframes jm-warn{ 0%,40%{ opacity:.15; transform:rotate(0); } 58%{ opacity:.75; } 74%,100%{ opacity:.15; transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .mt-hour,.mt-zone,.mt-stress,.mt-wrong,.mt-tick,.mt-field,.mt-fast,.jm-hand,.jm-zone,.jm-warn{ animation:none; }
  .mt-tick{ stroke-dashoffset:0; opacity:1; } .mt-field{ opacity:.5; }
}

/* Dealer relationships — ladder diagram */
.ad-node{ opacity:0; transform-box:fill-box; transform-origin:center; animation:ad-pop 13s ease-out infinite; }
.ad-n1{ animation-delay:.3s; } .ad-n2{ animation-delay:1.1s; } .ad-n3{ animation-delay:1.9s; }
.ad-n4{ animation-delay:2.7s; } .ad-n5{ animation-delay:3.5s; }
@keyframes ad-pop{ 0%,1%{ opacity:0; transform:scale(.4); } 6%,92%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.4); } }
.ad-climb{ transform-box:view-box; animation:ad-climb 13s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes ad-climb{
  0%{ transform:translateY(0); opacity:0; }
  6%{ transform:translateY(0); opacity:.16; }
  24%{ transform:translateY(-39px); opacity:.16; }
  42%{ transform:translateY(-78px); opacity:.16; }
  60%{ transform:translateY(-117px); opacity:.16; }
  78%,88%{ transform:translateY(-156px); opacity:.16; }
  96%,100%{ transform:translateY(-156px); opacity:0; }
}
.ad-arrow{ stroke-dasharray:1; stroke-dashoffset:1; animation:ad-draw 5.2s ease-in-out infinite; }
.ad-r1{ animation-delay:0s; } .ad-r2{ animation-delay:.28s; } .ad-r3{ animation-delay:.56s; } .ad-r4{ animation-delay:.84s; }
.ad-l1{ animation-delay:2.2s; } .ad-l2{ animation-delay:2.48s; } .ad-l3{ animation-delay:2.76s; } .ad-l4{ animation-delay:3.04s; }
@keyframes ad-draw{ 0%{ stroke-dashoffset:1; opacity:0; } 10%{ opacity:.55; } 34%,80%{ stroke-dashoffset:0; opacity:.55; } 94%,100%{ stroke-dashoffset:0; opacity:0; } }
.jr-l, .jr-r{ stroke-dasharray:1; stroke-dashoffset:1; animation:ad-draw 5s ease-in-out infinite; }
.jr-r{ animation-delay:1.6s; }
.jr-give{ transform-box:view-box; opacity:0; animation:jr-give 5s ease-in-out infinite; }
@keyframes jr-give{ 0%,6%{ opacity:0; transform:translateX(-7px); } 20%{ opacity:1; } 44%{ opacity:1; transform:translateX(7px); } 60%,100%{ opacity:0; transform:translateX(7px); } }
.jr-rungs line{ opacity:.15; }
.jr-g1{ animation:jr-rung 5s ease-in-out infinite; }
.jr-g2{ animation:jr-rung 5s ease-in-out infinite .5s; }
.jr-g3{ animation:jr-rung 5s ease-in-out infinite 1s; }
@keyframes jr-rung{ 0%,10%{ opacity:.15; } 30%,86%{ opacity:1; } 96%,100%{ opacity:.15; } }

/* Does it matter what others think — attention decay */
.cw-curve{ stroke-dasharray:1; stroke-dashoffset:1; animation:cw-trace 10.5s linear infinite; }
@keyframes cw-trace{ 0%{ stroke-dashoffset:1; opacity:0; } 6%{ stroke-dashoffset:1; opacity:1; } 8%{ stroke-dashoffset:1; opacity:1; } 46%,84%{ stroke-dashoffset:0; opacity:1; } 94%,100%{ stroke-dashoffset:0; opacity:0; } }
.cw-head{ transform-box:view-box; animation:cw-head 10.5s linear infinite; }
@keyframes cw-head{
  0%{ transform:translate(0px, 0px); opacity:0; }
  6%{ transform:translate(0px, 0px); opacity:1; }
  8.00%{ transform:translate(0.00px, 0.00px); opacity:1; }
  9.36%{ transform:translate(3.78px, 9.60px); opacity:1; }
  10.71%{ transform:translate(7.79px, 18.90px); opacity:1; }
  12.07%{ transform:translate(12.21px, 28.18px); opacity:1; }
  13.43%{ transform:translate(16.99px, 37.16px); opacity:1; }
  14.79%{ transform:translate(22.24px, 45.93px); opacity:1; }
  16.14%{ transform:translate(28.02px, 54.40px); opacity:1; }
  17.50%{ transform:translate(34.34px, 62.41px); opacity:1; }
  18.86%{ transform:translate(41.24px, 69.91px); opacity:1; }
  20.21%{ transform:translate(48.79px, 76.81px); opacity:1; }
  21.57%{ transform:translate(56.88px, 82.95px); opacity:1; }
  22.93%{ transform:translate(65.55px, 88.36px); opacity:1; }
  24.29%{ transform:translate(74.69px, 92.97px); opacity:1; }
  25.64%{ transform:translate(84.13px, 96.79px); opacity:1; }
  27.00%{ transform:translate(93.87px, 99.93px); opacity:1; }
  28.36%{ transform:translate(103.78px, 102.46px); opacity:1; }
  29.71%{ transform:translate(113.75px, 104.47px); opacity:1; }
  31.07%{ transform:translate(123.84px, 106.07px); opacity:1; }
  32.43%{ transform:translate(133.99px, 107.34px); opacity:1; }
  33.79%{ transform:translate(144.20px, 108.34px); opacity:1; }
  35.14%{ transform:translate(154.34px, 109.12px); opacity:1; }
  36.50%{ transform:translate(164.55px, 109.74px); opacity:1; }
  37.86%{ transform:translate(174.76px, 110.23px); opacity:1; }
  39.21%{ transform:translate(184.96px, 110.61px); opacity:1; }
  40.57%{ transform:translate(195.17px, 110.91px); opacity:1; }
  41.93%{ transform:translate(205.38px, 111.14px); opacity:1; }
  43.29%{ transform:translate(215.59px, 111.33px); opacity:1; }
  44.64%{ transform:translate(225.79px, 111.47px); opacity:1; }
  46.00%{ transform:translate(236.00px, 111.59px); opacity:1; }
  84%{ transform:translate(236.00px, 111.59px); opacity:1; }
  94%, 100%{ transform:translate(236.00px, 111.59px); opacity:0; }
}

.cw-fill{ transform-box:view-box; transform-origin:372px 78px; animation:cw-fill 10.5s ease-in-out infinite; }
@keyframes cw-fill{ 0%,10%{ transform:scaleX(0); } 60%,88%{ transform:scaleX(1); } 98%,100%{ transform:scaleX(0); } }
.cw-no{ animation:cw-no 10.5s ease-in-out infinite; }
.cw-f1{ animation-delay:.4s; } .cw-f2{ animation-delay:.8s; } .cw-f3{ animation-delay:1.2s; }
@keyframes cw-no{ 0%,14%{ opacity:1; } 52%,88%{ opacity:.22; } 98%,100%{ opacity:1; } }
.cw-you{ animation:cw-you 10.5s ease-in-out infinite; }
@keyframes cw-you{ 0%,14%{ opacity:.55; } 52%,88%{ opacity:1; } 98%,100%{ opacity:.55; } }
.jo-fade1, .jo-fade2, .jo-fade3{ transform-box:view-box; animation:jo-drift 6s ease-in-out infinite; }
.jo-fade2{ animation-delay:.7s; } .jo-fade3{ animation-delay:1.4s; }
@keyframes jo-drift{ 0%,8%{ opacity:0; transform:translateX(-4px); } 24%{ opacity:.85; transform:translateX(0); } 62%{ opacity:.2; transform:translateX(5px); } 78%,100%{ opacity:0; transform:translateX(8px); } }
.jo-watch{ transform-box:view-box; transform-origin:20px 26px; animation:jo-steady 6s ease-in-out infinite; }
@keyframes jo-steady{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.jo-drift{ transform-box:view-box; animation:jo-drift 6s ease-in-out infinite 2.1s; }
@media (prefers-reduced-motion: reduce){
  .ad-node,.ad-climb,.ad-arrow,.jr-l,.jr-r,.jr-give,.jr-g1,.jr-g2,.jr-g3,.jo-watch,.jo-drift,.cw-curve,.cw-head,.cw-fill,.cw-no,.cw-you,.jo-fade1,.jo-fade2,.jo-fade3{ animation:none; }
  .ad-node,.jr-give{ opacity:1; } .jr-rungs line{ opacity:1; } .ad-arrow,.jr-l,.jr-r,.cw-curve{ stroke-dashoffset:0; opacity:.55; }
  .cw-fill{ transform:scaleX(1); }
}

/* Micro Brands — capability bars and cost breakdown */
.mb-then{ opacity:0; animation:mb-mark 9s ease-in-out infinite; }
.mb-t1{ animation-delay:0s; } .mb-t2{ animation-delay:.18s; } .mb-t3{ animation-delay:.36s; } .mb-t4{ animation-delay:.54s; }
@keyframes mb-mark{ 0%,14%{ opacity:0; } 30%,90%{ opacity:1; } 98%,100%{ opacity:0; } }
.mb-now{ transform-box:view-box; transform-origin:56px 0; animation:mb-now 9s ease-in-out infinite; }
.mb-n1{ animation-delay:.5s; } .mb-n2{ animation-delay:.68s; } .mb-n3{ animation-delay:.86s; } .mb-n4{ animation-delay:1.04s; }
@keyframes mb-now{ 0%,10%{ transform:scaleX(0); } 34%,90%{ transform:scaleX(1); } 98%,100%{ transform:scaleX(0); } }
.mb-seg{ transform-box:view-box; transform-origin:452px 150px; opacity:0; animation:mb-seg 9s ease-out infinite; }
.mb-s1{ animation-delay:.3s; } .mb-s2{ animation-delay:.6s; } .mb-s3{ animation-delay:.9s; } .mb-s4{ animation-delay:1.2s; }
@keyframes mb-seg{ 0%,4%{ opacity:0; transform:scale(.86); } 18%,90%{ opacity:1; transform:scale(1); } 98%,100%{ opacity:0; transform:scale(.86); } }
.mi-b2, .mi-b3{ transform-box:view-box; transform-origin:0 39px; animation:mi-grow 5s ease-in-out infinite; }
.mi-b3{ animation-delay:.35s; }
@keyframes mi-grow{ 0%,8%{ transform:scaleY(.25); } 30%,88%{ transform:scaleY(1); } 98%,100%{ transform:scaleY(.25); } }
.mi-gear{ transform-box:view-box; transform-origin:36px 14px; animation:mi-spin 6s linear infinite; }
@keyframes mi-spin{ to{ transform:rotate(360deg); } }
.mi-rise{ stroke-dasharray:1; stroke-dashoffset:1; animation:mi-draw 5s ease-in-out infinite; }
@keyframes mi-draw{ 0%{ stroke-dashoffset:1; opacity:0; } 12%{ opacity:1; } 40%,86%{ stroke-dashoffset:0; opacity:1; } 96%,100%{ stroke-dashoffset:0; opacity:0; } }

/* Are Luxury Watches Worth It — value line and statement cluster */
.wp-line{ stroke-dasharray:1; stroke-dashoffset:1; animation:wp-draw 11s ease-in-out infinite; }
@keyframes wp-draw{ 0%{ stroke-dashoffset:1; opacity:0; } 8%{ opacity:1; } 40%,88%{ stroke-dashoffset:0; opacity:1; } 96%,100%{ stroke-dashoffset:0; opacity:0; } }
.wp-dot{ opacity:0; transform-box:fill-box; transform-origin:center; animation:wp-dot 11s ease-out infinite; }
.wp-d1{ animation-delay:1.1s; } .wp-d2{ animation-delay:1.7s; } .wp-d3{ animation-delay:2.3s; }
.wp-d4{ animation-delay:2.9s; } .wp-d5{ animation-delay:3.5s; }
@keyframes wp-dot{ 0%,2%{ opacity:0; transform:scale(.4); } 8%,86%{ opacity:1; transform:scale(1); } 96%,100%{ opacity:0; transform:scale(.4); } }
.wp-cloud circle{ transform-box:fill-box; transform-origin:center; animation:wp-float 6s ease-in-out infinite; }
.wp-c2{ animation-delay:.5s; } .wp-c3{ animation-delay:1s; } .wp-c4{ animation-delay:1.5s; } .wp-c5{ animation-delay:2s; }
@keyframes wp-float{ 0%,100%{ transform:translateY(0) scale(1); opacity:.3; } 50%{ transform:translateY(-3px) scale(1.08); opacity:.5; } }
.wp-gap{ stroke-dasharray:1; stroke-dashoffset:1; animation:wp-draw 11s ease-in-out infinite 1.4s; }
.wo-beam{ transform-box:view-box; transform-origin:22px 15px; animation:wo-tip 5s ease-in-out infinite; }
@keyframes wo-tip{ 0%,100%{ transform:rotate(-7deg); } 50%{ transform:rotate(7deg); } }
.wo-tag{ transform-box:view-box; transform-origin:22px 34px; animation:wo-tag 5s ease-in-out infinite; }
@keyframes wo-tag{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce){
  .mb-then,.mb-now,.mb-seg,.mi-b2,.mi-b3,.mi-gear,.mi-rise,.wp-line,.wp-dot,.wp-cloud circle,.wp-gap,.wo-beam,.wo-tag{ animation:none; }
  .mb-then,.mb-now,.mi-b2,.mi-b3{ transform:none; } .mb-seg,.wp-dot{ opacity:1; }
  .mi-rise,.wp-line,.wp-gap{ stroke-dashoffset:0; opacity:1; }
}

/* Which Crystal Is Best — hardness scale and trade-off grid */
.cy-bar{ transform-box:view-box; transform-origin:58px 0; animation:cy-bar 11s ease-in-out infinite; }
.cy-b1{ animation-delay:.2s; } .cy-b2{ animation-delay:.9s; } .cy-b3{ animation-delay:1.6s; }
@keyframes cy-bar{ 0%,4%{ transform:scaleX(0); } 22%,90%{ transform:scaleX(1); } 98%,100%{ transform:scaleX(0); } }
.cy-tick{ opacity:0; animation:cy-fade 11s ease-in-out infinite; }
.cy-t1{ animation-delay:.5s; } .cy-t2{ animation-delay:1.2s; } .cy-t3{ animation-delay:1.9s; }
@keyframes cy-fade{ 0%,6%{ opacity:0; } 24%,90%{ opacity:1; } 98%,100%{ opacity:0; } }
.cy-th{ opacity:0; animation:cy-fade 11s ease-in-out infinite; }
.cy-h1{ animation-delay:2.6s; } .cy-h2{ animation-delay:3.1s; } .cy-h3{ animation-delay:3.6s; }
.cy-dot{ opacity:0; animation:cy-fade 11s ease-in-out infinite; }
.cy-r1{ animation-delay:4.4s; } .cy-r2{ animation-delay:4.9s; } .cy-r3{ animation-delay:5.4s; }
.cy-shine{ transform-box:view-box; transform-origin:22px 20px; animation:cy-shine 4.5s ease-in-out infinite; }
@keyframes cy-shine{ 0%,100%{ opacity:.25; transform:translateX(-2px); } 45%{ opacity:1; transform:translateX(3px); } }
.cy-scratch path{ stroke-dasharray:1; stroke-dashoffset:1; animation:cy-scratch 4.5s ease-in-out infinite; }
@keyframes cy-scratch{ 0%,30%{ stroke-dashoffset:1; opacity:0; } 46%{ opacity:.9; } 64%,84%{ stroke-dashoffset:0; opacity:.9; } 94%,100%{ stroke-dashoffset:0; opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .cy-bar,.cy-tick,.cy-th,.cy-dot,.cy-shine,.cy-scratch path{ animation:none; }
  .cy-bar{ transform:none; } .cy-tick,.cy-th,.cy-dot{ opacity:1; } .cy-scratch path{ stroke-dashoffset:0; opacity:.9; }
}

/* First Diver — funnel and rotating bezel */
.dv-node{ opacity:0; transform-box:fill-box; transform-origin:center; animation:dv-pop 12s ease-out infinite; }
.dv-n1{ animation-delay:.3s; } .dv-n2{ animation-delay:1.3s; } .dv-n3{ animation-delay:2.3s; } .dv-n4{ animation-delay:3.3s; }
@keyframes dv-pop{ 0%,1%{ opacity:0; transform:scale(.4); } 6%,92%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.4); } }
.dv-drop{ transform-box:view-box; opacity:0; animation:dv-drop 12s ease-in-out infinite; }
@keyframes dv-drop{
  0%{ transform:translateY(0); opacity:0; }
  5%{ transform:translateY(0); opacity:.16; }
  26%{ transform:translateY(44px); opacity:.16; }
  47%{ transform:translateY(88px); opacity:.16; }
  68%,86%{ transform:translateY(132px); opacity:.16; }
  95%,100%{ transform:translateY(132px); opacity:0; }
}
.dv-bezel{ transform-box:view-box; transform-origin:452px 156px; animation:dv-turn 12s ease-in-out infinite; }
@keyframes dv-turn{ 0%,14%{ transform:rotate(0deg); } 40%,86%{ transform:rotate(-100deg); } 96%,100%{ transform:rotate(0deg); } }
.dv-min{ transform-box:view-box; transform-origin:452px 156px; animation:dv-sweep 12s linear infinite; }
@keyframes dv-sweep{ to{ transform:rotate(360deg); } }
.dv-hr{ transform-box:view-box; transform-origin:452px 156px; animation:dv-sweep 144s linear infinite; }
.dv-lume{ transform-box:view-box; transform-origin:452px 156px; animation:dv-turn 12s ease-in-out infinite, dv-glow 3s ease-in-out infinite; }
@keyframes dv-glow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.dvi-bezel{ transform-box:view-box; transform-origin:22px 22px; animation:dvi-turn 5s ease-in-out infinite; }
@keyframes dvi-turn{ 0%,16%{ transform:rotate(0deg); } 46%,86%{ transform:rotate(-90deg); } 96%,100%{ transform:rotate(0deg); } }
.dvi-min{ transform-box:view-box; transform-origin:22px 22px; animation:dv-sweep 6s linear infinite; }
.dvi-hr{ transform-box:view-box; transform-origin:22px 22px; animation:dv-sweep 72s linear infinite; }
.dvi-lume{ transform-box:view-box; transform-origin:22px 22px; animation:dvi-turn 5s ease-in-out infinite, dv-glow 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .dv-node,.dv-drop,.dv-bezel,.dv-min,.dv-hr,.dv-lume,.dvi-bezel,.dvi-min,.dvi-hr,.dvi-lume{ animation:none; }
  .dv-node{ opacity:1; } .dv-drop{ opacity:.16; }
}

/* How to Fix Your Luxury Watch — response path and cost bars */
.fx-node{ opacity:0; transform-box:fill-box; transform-origin:center; animation:fx-pop 13s ease-out infinite; }
.fx-n1{ animation-delay:.3s; } .fx-n2{ animation-delay:1.1s; } .fx-n3{ animation-delay:1.9s; }
.fx-n4{ animation-delay:2.7s; } .fx-n5{ animation-delay:3.5s; }
@keyframes fx-pop{ 0%,1%{ opacity:0; transform:scale(.4); } 6%,92%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.4); } }
.fx-run{ transform-box:view-box; opacity:0; animation:fx-run 13s ease-in-out infinite; }
@keyframes fx-run{
  0%{ transform:translateY(0); opacity:0; } 5%{ transform:translateY(0); opacity:.16; }
  22%{ transform:translateY(46px); } 40%{ transform:translateY(92px); }
  58%{ transform:translateY(138px); } 74%,88%{ transform:translateY(184px); opacity:.16; }
  95%,100%{ transform:translateY(184px); opacity:0; }
}
.fx-x{ opacity:0; animation:fx-fade 13s ease-in-out infinite; }
.fx-x1{ animation-delay:4.4s; } .fx-x2{ animation-delay:4.7s; } .fx-x3{ animation-delay:5s; }
.fx-x4{ animation-delay:5.3s; } .fx-x5{ animation-delay:5.6s; } .fx-x6{ animation-delay:5.9s; }
@keyframes fx-fade{ 0%,4%{ opacity:0; } 16%,90%{ opacity:1; } 98%,100%{ opacity:0; } }
.fx-bar{ transform-box:view-box; transform-origin:150px 0; animation:fx-bar 13s ease-in-out infinite; }
.fx-b1{ animation-delay:6.6s; } .fx-b2{ animation-delay:7.2s; }
@keyframes fx-bar{ 0%,4%{ transform:scaleX(0); } 18%,90%{ transform:scaleX(1); } 98%,100%{ transform:scaleX(0); } }
.fxi-crown{ transform-box:view-box; animation:fxi-crown 5s ease-in-out infinite; }
@keyframes fxi-crown{ 0%,10%{ transform:translate(0,0); opacity:1; } 40%{ transform:translate(5px,7px) rotate(18deg); opacity:.8; } 70%,100%{ transform:translate(0,0); opacity:1; } }
.fxi-box{ animation:fxi-box 5s ease-in-out infinite; }
@keyframes fxi-box{ 0%,30%{ opacity:.35; } 55%,90%{ opacity:1; } 100%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){
  .fx-node,.fx-run,.fx-x,.fx-bar,.fxi-crown,.fxi-box{ animation:none; }
  .fx-node,.fx-x,.fxi-box{ opacity:1; } .fx-run{ opacity:.16; } .fx-bar{ transform:none; }
}

/* The Thinner the Better — thickness bars, layer stack, caliper icon */
.th-bar{ transform-box:view-box; transform-origin:210px 0; animation:th-bar 12s ease-in-out infinite; }
.th-b1{ animation-delay:.2s; } .th-b2{ animation-delay:.45s; } .th-b3{ animation-delay:.7s; } .th-b4{ animation-delay:.95s; }
.th-b5{ animation-delay:1.2s; } .th-b6{ animation-delay:1.45s; } .th-b7{ animation-delay:1.7s; } .th-b8{ animation-delay:1.95s; }
@keyframes th-bar{ 0%,4%{ transform:scaleX(0); } 20%,90%{ transform:scaleX(1); } 98%,100%{ transform:scaleX(0); } }
.th-layer{ transform-box:view-box; opacity:0; animation:th-layer 12s ease-out infinite; }
.th-l1{ animation-delay:3.2s; } .th-l2{ animation-delay:3.5s; } .th-l3{ animation-delay:3.8s; }
.th-l4{ animation-delay:4.1s; } .th-l5{ animation-delay:4.4s; }
@keyframes th-layer{ 0%,2%{ opacity:0; transform:translateY(-5px); } 12%,90%{ opacity:1; transform:translateY(0); } 98%,100%{ opacity:0; transform:translateY(-5px); } }
.th-arrow{ opacity:0; animation:th-fade 12s ease-in-out infinite; animation-delay:4.8s; }
.th-x{ opacity:0; animation:th-fade 12s ease-in-out infinite; }
.th-x1{ animation-delay:5.6s; } .th-x2{ animation-delay:5.9s; } .th-x3{ animation-delay:6.2s; }
.th-x4{ animation-delay:6.5s; } .th-x5{ animation-delay:6.8s; }
@keyframes th-fade{ 0%,3%{ opacity:0; } 14%,90%{ opacity:1; } 98%,100%{ opacity:0; } }
.ti-stack rect{ transform-box:view-box; animation:ti-squash 5s ease-in-out infinite; }
.ti-s2{ animation-delay:.12s; } .ti-s3{ animation-delay:.24s; } .ti-s4{ animation-delay:.36s; }
@keyframes ti-squash{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3.6px) scaleY(.55); } }
.ti-caliper{ transform-box:view-box; transform-origin:5px 22px; animation:ti-cal 5s ease-in-out infinite; }
@keyframes ti-cal{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.7); } }
@media (prefers-reduced-motion: reduce){
  .th-bar,.th-layer,.th-arrow,.th-x,.ti-stack rect,.ti-caliper{ animation:none; }
  .th-bar{ transform:none; } .th-layer,.th-arrow,.th-x{ opacity:1; }
}

/* About: extra life in the scroll-assembled watch */
.tlw-sec{ transform-box:view-box; transform-origin:170px 170px; animation:tlw-sweep-sec 60s steps(60) infinite; }
@keyframes tlw-sweep-sec{ to{ transform:rotate(360deg); } }
.tlw-barrel{ transform-box:view-box; transform-origin:170px 238px; animation:tlw-barrel 24s linear infinite; }
@keyframes tlw-barrel{ to{ transform:rotate(-360deg); } }
.tlw-jewel{ animation:tlw-jewel 4.5s ease-in-out infinite; }
.tlw-j2{ animation-delay:1.5s; } .tlw-j3{ animation-delay:3s; }
@keyframes tlw-jewel{ 0%,100%{ opacity:.55; } 50%{ opacity:.95; } }
@media (prefers-reduced-motion: reduce){ .tlw-sec,.tlw-barrel,.tlw-jewel{ animation:none; } }

/* Footer social links */
/* The hover ring sits INSIDE the 34px anchor rather than overflowing it.
   When it overflowed, the first icon's ring was clipped by the footer
   column edge. Keeping it inside means it cannot escape its own box. */
.footer-social{ display:flex; gap:12px; margin:22px 0 0 0; align-items:center; }
.footer-soc{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .38s cubic-bezier(.22,.9,.28,1); }
.footer-soc svg{ position:relative; z-index:1; width:18px; height:18px; fill:currentColor; display:block;
  opacity:.55;
  transition:opacity .38s cubic-bezier(.22,.9,.28,1), transform .38s cubic-bezier(.22,.9,.28,1); }

.soc-ring{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:1px solid currentColor; opacity:0;
  transform:scale(.62) rotate(-90deg);
  transition:opacity .38s cubic-bezier(.22,.9,.28,1), transform .38s cubic-bezier(.22,.9,.28,1); }
.soc-ring::before{ content:""; position:absolute; inset:3px; border-radius:50%;
  border:1px dashed currentColor; opacity:.4; }

.footer-soc:hover svg, .footer-soc:focus-visible svg{ opacity:1; transform:scale(1.08); }
.footer-soc:hover .soc-ring, .footer-soc:focus-visible .soc-ring{ opacity:.6; transform:scale(1) rotate(0deg); }
.footer-soc:active svg{ transform:scale(.94); }
.footer-soc:focus-visible{ outline:none; }
.footer-soc:focus-visible .soc-ring{ opacity:1; }

@media (pointer:coarse){
  .footer-social{ gap:6px; margin-left:-5px; }
  .footer-soc{ width:44px; height:44px; }
  .soc-ring{ inset:5px; }
}
@media (prefers-reduced-motion: reduce){
  .footer-soc, .footer-soc svg, .soc-ring{ transition:none; }
  .footer-soc:hover svg, .footer-soc:focus-visible svg{ transform:none; }
  .soc-ring{ transform:scale(1) rotate(0deg); }
}

/* Contact page: social row beneath the watch caption */
.ct-social{ display:flex; justify-content:center; align-items:center; gap:14px; margin:18px auto 0; }
.ct-social .footer-soc{ color:var(--ink); }
@media (pointer:coarse){ .ct-social{ gap:6px; } }

/* Appreciating the Watch — a sweep lights each opinion; the watch never moves */
.ap-sweep{ transform-box:view-box; transform-origin:168px 152px; animation:ap-sweep 18s linear infinite; }
@keyframes ap-sweep{ to{ transform:rotate(360deg); } }
.ap-op{ animation:ap-op 18s linear infinite; }
.ap-o1{ animation-delay:0s; } .ap-o2{ animation-delay:3s; } .ap-o3{ animation-delay:6s; }
.ap-o4{ animation-delay:9s; } .ap-o5{ animation-delay:12s; } .ap-o6{ animation-delay:15s; }
@keyframes ap-op{ 0%{ opacity:0; } 2%{ opacity:.85; } 12%{ opacity:.7; } 22%,100%{ opacity:0; } }
.ap-tap{ animation:ap-tap 9s ease-in-out infinite; }
@keyframes ap-tap{ 0%,100%{ opacity:.14; } 50%{ opacity:.28; } }
/* the hype spikes and decays; the watch line just sits there */
.ap-hype{ stroke-dasharray:1; stroke-dashoffset:1; animation:ap-draw 14s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes ap-draw{ 0%{ stroke-dashoffset:1; opacity:0; } 4%{ opacity:1; } 46%,86%{ stroke-dashoffset:0; opacity:1; } 96%,100%{ stroke-dashoffset:0; opacity:0; } }
.ap-flat{ stroke-dasharray:1; stroke-dashoffset:1; animation:ap-draw 14s cubic-bezier(.4,0,.5,1) infinite; }
.ap-dot{ transform-box:view-box; animation:ap-dot 14s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes ap-dot{ 0%{ transform:translateX(0); opacity:0; } 4%{ opacity:.6; }
  46%,86%{ transform:translateX(218px); opacity:.6; } 96%,100%{ transform:translateX(218px); opacity:0; } }
.ap-swing{ transform-box:view-box; transform-origin:450px 286px; animation:ap-swing 5s ease-in-out infinite; }
@keyframes ap-swing{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
@media (prefers-reduced-motion: reduce){
  .ap-sweep,.ap-op,.ap-tap,.ap-hype,.ap-flat,.ap-dot,.ap-swing{ animation:none; }
  .ap-op{ opacity:.7; } .ap-hype,.ap-flat{ stroke-dashoffset:0; opacity:1; } .ap-dot{ opacity:.6; }
}

/* Appreciating the Watch — card icon: sweep circles, opinion tags drift past */
.apx-sweep{ transform-box:view-box; transform-origin:22px 22px; animation:apx-sweep 7s linear infinite; }
@keyframes apx-sweep{ to{ transform:rotate(360deg); } }
.apx-t1{ transform-box:view-box; opacity:0; animation:apx-tag 7s ease-in-out infinite; }
.apx-t2{ transform-box:view-box; opacity:0; animation:apx-tag2 7s ease-in-out infinite 3.5s; }
@keyframes apx-tag{ 0%{ opacity:0; transform:translateX(4px); } 10%{ opacity:.75; transform:translateX(0); }
  30%{ opacity:.75; } 44%,100%{ opacity:0; transform:translateX(-4px); } }
@keyframes apx-tag2{ 0%{ opacity:0; transform:translateX(-4px); } 10%{ opacity:.75; transform:translateX(0); }
  30%{ opacity:.75; } 44%,100%{ opacity:0; transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce){ .apx-sweep,.apx-t1,.apx-t2{ animation:none; } .apx-t1,.apx-t2{ opacity:.6; } }

/* The Art — hand-drawn schematics, endless scroll */
.sk-section{ overflow:hidden; padding-bottom:38px; }
.sk-section + .section{ padding-top:46px; }
.sk-lede{ max-width:52ch; }
.sk-marquee{ position:relative; margin-top:38px; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.sk-track{ display:flex; width:max-content; will-change:transform;
  animation:sk-scroll 470s linear infinite; }
/* two identical sets: shifting by exactly half puts set 2 where set 1 began */
@keyframes sk-scroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.sk-marquee{ pointer-events:none; }
.sk-item{ flex:0 0 auto; width:min(420px,74vw); margin:0 26px 0 0; }
.sk-item img{ display:block; width:100%; height:auto; border-radius:18px;
  background:var(--bg-alt); border:1px solid var(--line);
  box-shadow:0 10px 34px rgba(19,19,21,0.07);
  pointer-events:none; user-select:none; -webkit-user-drag:none; }
.sk-cap{ margin-top:12px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:1.5px; text-transform:uppercase; opacity:.5; text-align:center; }
@media (max-width:700px){
  .sk-item{ width:min(300px,80vw); margin-right:18px; }
  .sk-item img{ border-radius:14px; }
  .sk-track{ animation-duration:360s; }
}
@media (prefers-reduced-motion: reduce){
  .sk-track{ animation:none; }
  .sk-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }

}

/* Light mode used to paint an opaque background on <body>, which hid the
   sky canvas behind it - dark mode left body transparent, which is why
   only dark mode ever showed a backdrop. html carries the colour now. */
html:not([data-theme="dark"]) body{ background:transparent; }
html:not([data-theme="dark"]) #starCanvas{ display:block; }

/* nav sits over the sky in both themes, so it keeps a faint panel at all times */
html[data-theme="dark"] .nav{ background:rgba(17,17,19,.34); }

/* Page transition: minimal mark only — no bar, no percentage.
   Deliberately quieter than the first-visit loader so the two read differently. */
.pt-bar{ display:none !important; }
#pageTransition .pt-mini{ width:34px; height:34px; opacity:0; transform:scale(.92);
  transition:opacity .26s cubic-bezier(.4,0,.2,1), transform .34s cubic-bezier(.4,0,.2,1); }
#pageTransition.cover .pt-mini{ opacity:.85; transform:scale(1); }
#pageTransition.cover .pt-mini .logo-mark{ animation:pt-tick 1.5s cubic-bezier(.4,0,.2,1) infinite; transform-origin:50% 50%; }
@keyframes pt-tick{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
#pageTransition.uncover .pt-mini{ opacity:0; transform:scale(.96); }
@media (max-width:700px){
  #pageTransition .pt-mini{ width:30px; height:30px; }
}
@media (prefers-reduced-motion: reduce){
  #pageTransition .pt-mini{ transition:none; }
  #pageTransition.cover .pt-mini .logo-mark{ animation:none; }
}

/* the transition mark is deliberately quieter than the first-visit loader */
#pageTransition.cover .pt-mini, #pageTransition.uncover .pt-mini{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion: reduce){ .pt-mini::after{ animation:none; opacity:.3; } }


/* Footer: header above the social icons */
.footer-follow{ display:block; margin-top:24px; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:2px; text-transform:uppercase; font-weight:700; opacity:.7; }
.footer-follow + .footer-social{ margin-top:12px; }

/* Pull-quote movement: extra detail */
.pqm-jewel{ animation:pqm-jewel 5s ease-in-out infinite; }
.pqm-jewel:nth-of-type(2){ animation-delay:1.2s; }
.pqm-jewel:nth-of-type(3){ animation-delay:2.4s; }
.pqm-jewel:nth-of-type(4){ animation-delay:3.6s; }
@keyframes pqm-jewel{ 0%,100%{ opacity:.5; } 50%{ opacity:.95; } }
.pqm-teeth{ transform-box:view-box; transform-origin:120px 120px; animation:pqm-teeth 90s linear infinite; }
@keyframes pqm-teeth{ to{ transform:rotate(-360deg); } }
@media (prefers-reduced-motion: reduce){ .pqm-jewel,.pqm-teeth{ animation:none; } }

/* Is a Watch a Statement Piece — the room lights up, the watch does not change */
.ap-halo{ animation:st-halo 12s ease-in-out infinite; }
.st-on{ animation-name:st-halo-on; }
.st-off{ animation:none; opacity:0; }
@keyframes st-halo-on{ 0%,8%{ opacity:0; } 26%,62%{ opacity:0.10; } 80%,100%{ opacity:0; } }
@keyframes st-halo{ 0%,100%{ opacity:0; } }
.st-tag{ opacity:0; animation:st-tag 12s ease-in-out infinite; }
.st-t1{ animation-delay:.6s; } .st-t2{ animation-delay:1.6s; } .st-t3{ animation-delay:2.6s; }
@keyframes st-tag{ 0%,4%{ opacity:0; } 16%,88%{ opacity:.7; } 97%,100%{ opacity:0; } }
.st-bar{ transform-box:view-box; transform-origin:200px 0; animation:st-bar 12s ease-in-out infinite; }
.st-b2{ animation-delay:.4s; } .st-b3{ animation-delay:.8s; }
@keyframes st-bar{ 0%,20%{ transform:scaleX(0); } 38%,90%{ transform:scaleX(1); } 98%,100%{ transform:scaleX(0); } }
.sti-halo{ animation:sti-halo 5s ease-in-out infinite; }
@keyframes sti-halo{ 0%,20%{ opacity:0; } 45%,70%{ opacity:.16; } 92%,100%{ opacity:0; } }
.sti-eyes circle{ animation:sti-eye 5s ease-in-out infinite; }
.sti-eyes circle:nth-child(2){ animation-delay:.3s; }
.sti-eyes circle:nth-child(3){ animation-delay:.6s; }
@keyframes sti-eye{ 0%,20%{ opacity:.2; } 45%,70%{ opacity:.85; } 92%,100%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){
  .ap-halo,.st-tag,.st-bar,.sti-halo,.sti-eyes circle{ animation:none; }
  .st-tag{ opacity:.7; } .st-bar{ transform:none; }
}

/* Phones paint a translucent highlight over any tapped control, and the
   default is light blue - which made these read as a different colour on
   mobile than on desktop. Cleared everywhere. */
button, a, .pq-dot, .tag-pill, .ctr-dot, .band-dot, .gal-nav, .theme-switch, .footer-soc{
  -webkit-tap-highlight-color:transparent; }

/* The Art — interactive 3D movement (m3-). The canvas is sized by JS;
   these styles are only the frame, controls and fallback around it. */
.m3-wrap{ margin:44px 0 8px; }
.m3-head{ max-width:56ch; }
.m3-eyebrow{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:2.4px; text-transform:uppercase; opacity:.5; margin-bottom:10px; }
.m3-title{ font-family:'Playfair Display',Lora,serif; font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.15; margin:0 0 10px; }
.m3-lede{ font-family:Lora,Georgia,serif; line-height:1.7; opacity:.72; margin:0 0 20px; }
.m3-stage{ position:relative; border:1px solid var(--line); border-radius:18px;
  background:var(--bg-alt); overflow:hidden; min-height:340px; }
.m3-canvas{ display:block; width:100%; height:auto; cursor:grab; }
.m3-canvas:active{ cursor:grabbing; }
.m3-hint{ position:absolute; left:14px; bottom:12px; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase; opacity:.38; pointer-events:none;
  transition:opacity .4s var(--ease); }
.m3-wrap.is-ready .m3-hint{ animation:m3-hint 6s ease-in-out 2s forwards; }
@keyframes m3-hint{ to{ opacity:0; } }
.m3-fallback{ padding:60px 24px; text-align:center; font-family:Lora,Georgia,serif;
  opacity:.6; line-height:1.7; margin:0; }
.m3-wrap.is-failed .m3-canvas, .m3-wrap.is-failed .m3-hint{ display:none; }
.m3-controls{ display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.m3-label{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.8px;
  text-transform:uppercase; opacity:.6; }
.m3-range{ flex:1 1 220px; max-width:340px; accent-color:var(--navy); height:22px; }
.m3-val{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.4px;
  opacity:.5; min-width:92px; }
.m3-reset{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.6px;
  text-transform:uppercase; padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:none; color:inherit; cursor:pointer; opacity:.7;
  transition:opacity .3s var(--ease), border-color .3s var(--ease); }
.m3-reset:hover{ opacity:1; border-color:var(--navy); }
.m3-legend{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.2px;
  line-height:1.9; opacity:.42; margin:14px 0 0; max-width:70ch; }
@media (max-width:700px){
  .m3-stage{ border-radius:14px; min-height:300px; }
  .m3-controls{ gap:10px; }
  .m3-val{ min-width:0; }
}
@media (prefers-reduced-motion: reduce){ .m3-wrap.is-ready .m3-hint{ animation:none; opacity:.38; } }
.m3-play{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.6px;
  text-transform:uppercase; padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:none; color:inherit; cursor:pointer; opacity:.7;
  transition:opacity .3s var(--ease), border-color .3s var(--ease); }
.m3-play:hover{ opacity:1; border-color:var(--navy); }

/* Caring for your watch — dust lifts away, the cloth sweeps across */
.cw-dust{ animation:cw-dust 6s ease-in-out infinite; }
.cw-d2{ animation-delay:.5s; } .cw-d3{ animation-delay:1s; } .cw-d4{ animation-delay:1.5s; }
.cw-d5{ animation-delay:2s; } .cw-d6{ animation-delay:2.5s; }
@keyframes cw-dust{ 0%,10%{ opacity:.45; transform:translate(0,0); }
  55%{ opacity:.18; } 80%,100%{ opacity:0; transform:translate(6px,-14px); } }
.cw-cloth{ transform-box:view-box; transform-origin:403px 130px; animation:cw-cloth 6s ease-in-out infinite; }
@keyframes cw-cloth{ 0%,100%{ transform:translateX(0) rotate(0deg); }
  50%{ transform:translateX(-26px) rotate(-5deg); } }
.cw-step{ animation:cw-step 6s ease-in-out infinite; }
.cw-s2{ animation-delay:.7s; } .cw-s3{ animation-delay:1.4s; }
@keyframes cw-step{ 0%,100%{ opacity:.28; } 50%{ opacity:.85; } }
.cwi-cloth{ transform-box:view-box; transform-origin:33px 31px; animation:cwi-cloth 4.5s ease-in-out infinite; }
@keyframes cwi-cloth{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-9px,-7px); } }
.cwi-sparkle{ animation:cwi-sparkle 4.5s ease-in-out infinite; }
.cwi-p2{ animation-delay:.5s; } .cwi-p3{ animation-delay:1s; }
@keyframes cwi-sparkle{ 0%,30%{ opacity:0; } 55%{ opacity:.7; } 80%,100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .cw-dust,.cw-cloth,.cw-step,.cwi-cloth,.cwi-sparkle{ animation:none; }
  .cw-dust{ opacity:.35; } .cw-step{ opacity:.5; } .cwi-sparkle{ opacity:.5; }
}

/* The Art — mainplate detail viewer (mp-). Frame, controls and the HTML
   label layer that tracks the 3D points. */
.mp-wrap{ margin:46px 0 10px; }
.mp-head{ max-width:56ch; }
.mp-eyebrow{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:2.4px; text-transform:uppercase; opacity:.5; margin-bottom:10px; }
.mp-title{ font-family:'Playfair Display',Lora,serif; font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.15; margin:0 0 10px; }
.mp-lede{ font-family:Lora,Georgia,serif; line-height:1.7; opacity:.72; margin:0 0 20px; }
.mp-stage{ position:relative; border:1px solid var(--line); border-radius:18px;
  background:var(--bg-alt); overflow:hidden; min-height:320px; }
.mp-canvas{ display:block; width:100%; height:auto; cursor:grab; }
.mp-canvas:active{ cursor:grabbing; }
.mp-tags{ position:absolute; inset:0; pointer-events:none; }
.mp-tag{ position:absolute; top:0; left:0; white-space:nowrap;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:1.3px;
  padding:3px 7px; border-radius:4px; background:var(--bg); border:1px solid var(--line);
  opacity:.86; }
.mp-zoom{ position:absolute; right:14px; bottom:12px; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:1.4px; opacity:.4; pointer-events:none; }
.mp-fallback{ padding:56px 24px; text-align:center; font-family:Lora,Georgia,serif;
  opacity:.6; line-height:1.7; margin:0; }
.mp-wrap.is-failed .mp-canvas, .mp-wrap.is-failed .mp-zoom{ display:none; }
.mp-controls{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.mp-labels, .mp-reset{ font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:1.6px; text-transform:uppercase; padding:8px 14px;
  border:1px solid var(--line); border-radius:999px; background:none; color:inherit;
  cursor:pointer; opacity:.7; transition:opacity .3s var(--ease), border-color .3s var(--ease); }
.mp-labels:hover, .mp-reset:hover{ opacity:1; border-color:var(--navy); }
.mp-note{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.2px;
  opacity:.4; }
@media (max-width:700px){
  .mp-stage{ border-radius:14px; min-height:280px; }
  .mp-tag{ font-size:8.5px; padding:2px 5px; }
}

/* Both 3D viewers share the same corner furniture: a fading drag hint
   bottom left, a live zoom readout bottom right. */
.m3-zoom{ position:absolute; right:14px; bottom:12px; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:1.4px; opacity:.4; pointer-events:none; }
.mp-hint{ position:absolute; left:14px; bottom:12px; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase; opacity:.38;
  pointer-events:none; transition:opacity .4s var(--ease); }
.mp-wrap.is-ready .mp-hint{ animation:m3-hint 6s ease-in-out 2s forwards; }
@media (prefers-reduced-motion: reduce){ .mp-wrap.is-ready .mp-hint{ animation:none; opacity:.38; } }

/* Magnetism — the hairspring coils cling, the scale fills, field lines pulse */
.mg-free{ animation:mg-free 7s ease-in-out infinite; }
.mg-stuck{ animation:mg-stuck 7s ease-in-out infinite; }
@keyframes mg-free{ 0%,8%{ opacity:.75; } 34%,74%{ opacity:0; } 96%,100%{ opacity:.75; } }
@keyframes mg-stuck{ 0%,12%{ opacity:0; } 38%,70%{ opacity:.85; } 92%,100%{ opacity:0; } }
.mg-bar{ transform-box:view-box; transform-origin:300px 0; animation:mg-bar 7s ease-in-out infinite; }
.mg-b2{ animation-delay:.18s; } .mg-b3{ animation-delay:.36s; }
.mg-b4{ animation-delay:.54s; } .mg-b5{ animation-delay:.8s; }
@keyframes mg-bar{ 0%,10%{ transform:scaleX(0); } 34%,88%{ transform:scaleX(1); } 98%,100%{ transform:scaleX(0); } }
.mg-ok{ animation:mg-pulse 7s ease-in-out infinite; }
.mg-bad{ animation:mg-pulse 7s ease-in-out infinite .6s; }
@keyframes mg-pulse{ 0%,40%{ opacity:.3; } 60%,88%{ opacity:.85; } 98%,100%{ opacity:.3; } }
.mgi-field{ animation:mgi-field 4.5s ease-in-out infinite; }
@keyframes mgi-field{ 0%,100%{ opacity:.25; transform:scale(.94); } 50%{ opacity:.9; transform:scale(1); } }
.mgi-field{ transform-box:view-box; transform-origin:22px 21px; }
.mgi-hand{ transform-box:view-box; transform-origin:22px 21px; animation:mgi-hand 4.5s ease-in-out infinite; }
@keyframes mgi-hand{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(70deg); } }
@media (prefers-reduced-motion: reduce){
  .mg-free,.mg-stuck,.mg-bar,.mg-ok,.mg-bad,.mgi-field,.mgi-hand{ animation:none; }
  .mg-stuck{ opacity:.85; } .mg-free{ opacity:0; } .mg-bar{ transform:none; }
  .mg-ok,.mg-bad{ opacity:.7; } .mgi-field{ opacity:.5; }
}

/* Art teaser watch — the added detail breathes rather than sits still */
.ta-jewel{ animation:ta-jewel 6s ease-in-out infinite; }
.ta-jewel:nth-of-type(2){ animation-delay:1s; } .ta-jewel:nth-of-type(3){ animation-delay:2s; }
.ta-jewel:nth-of-type(4){ animation-delay:3s; } .ta-jewel:nth-of-type(5){ animation-delay:4s; }
.ta-jewel:nth-of-type(6){ animation-delay:5s; }
@keyframes ta-jewel{ 0%,100%{ opacity:.4; } 50%{ opacity:.8; } }
.ta-ratchet{ transform-box:view-box; transform-origin:142px 168px; animation:ta-ratchet 120s linear infinite; }
@keyframes ta-ratchet{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ta-jewel,.ta-ratchet{ animation:none; } }

/* Art teaser watch — light across the crystal, a sweep over the movement,
   a power reserve that breathes and an escapement that steps. */
.ta-glint{ transform-box:view-box; opacity:0;
  animation:ta-glint 9s ease-in-out infinite, ta-sweep-in 2.4s ease-out .5s forwards; }
@keyframes ta-glint{ 0%{ transform:rotate(-24deg) translateX(0); }
  55%,100%{ transform:rotate(-24deg) translateX(700px); } }
.ta-sweep{ transform-box:view-box; transform-origin:210px 210px;
  animation:ta-sweep 30s linear infinite; }
.ta-sweep-in{ opacity:0; animation:ta-sweep-in 3.2s cubic-bezier(.4,0,.2,1) .35s forwards; }
@keyframes ta-sweep-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ta-sweep{ to{ transform:rotate(360deg); } }
.ta-reserve{ animation:ta-reserve 16s ease-in-out infinite; }
@keyframes ta-reserve{ 0%,100%{ stroke-dashoffset:.62; } 50%{ stroke-dashoffset:.18; } }
.ta-beat{ transform-box:view-box; transform-origin:210px 210px; animation:ta-beat 3.75s steps(15) infinite; }
@keyframes ta-beat{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ta-glint,.ta-sweep,.ta-reserve,.ta-beat{ animation:none; }
  .ta-glint{ opacity:.18; } .ta-reserve{ stroke-dashoffset:.4; }
}

/* ---------------------------------------------------------------
   Hidden overlays must stop costing anything.

   The loader is slid out of view with .hide and the page transition
   sits at opacity 0, but both stayed in the render tree with their
   marks still animating - four logo sweeps and an orbit running
   forever behind the page. On a phone that measured 6fps of the
   homepage's frame budget, spent drawing things nobody can see.
   --------------------------------------------------------------- */
#loader.hide{ visibility:hidden;
  transition:transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease),
             visibility 0s linear var(--t-slow); }
/* The transition overlay carries will-change and a layer promotion so its
   fade is smooth. Held permanently, that is a full-screen compositor layer
   sitting behind every page for nothing; it is only needed while fading. */
#pageTransition:not(.cover):not(.uncover){ will-change:auto; transform:none;
  visibility:hidden; }
#pageTransition.cover, #pageTransition.uncover{ visibility:visible; }


#pageTransition:not(.cover):not(.uncover){ visibility:hidden; }
#pageTransition:not(.cover):not(.uncover) *{ animation:none !important; }
#pageTransition:not(.cover):not(.uncover) .pt-mini::after,
#pageTransition:not(.cover):not(.uncover) .pt-mini::before{ animation:none !important; }


/* The teaser watch promoted all fourteen of its groups to their own
   compositor layers permanently. They only move while the section is
   being scrolled through, so the promotion is now scoped to that. */
#taWatch g{ will-change:auto; }
#taWatch.ta-live g{ will-change:transform; }

/* Phones: drop the purely decorative animation. Fourteen twinkling stars on
   the hero moonphase and the sweeping cue are the largest single group of
   running animations on the homepage, and none of them carry meaning - the
   dial itself still runs. Scrolling smoothness is worth more than they are. */
@media (pointer: coarse), (max-width: 760px){
  .hero-dial .mp-star{ animation:none; opacity:.55; }
  .cue-ring{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .ta-sweep-in{ animation:none; opacity:1; }
  .ta-glint{ animation:none; opacity:.18; }
}

/* Does a watch tell your personality — the assumptions surface, the real
   reasons fill in, and three eyes read the same wrist differently. */
.pe-w{ transform-box:view-box; animation:pe-w 9s ease-in-out infinite; }
.pe-w:nth-of-type(2){ animation-delay:.5s; } .pe-w:nth-of-type(3){ animation-delay:1s; }
.pe-w:nth-of-type(4){ animation-delay:1.5s; }
@keyframes pe-w{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.pe-bar{ transform-box:view-box; transform-origin:208px 0; animation:pe-bar 9s ease-in-out infinite; }
.pe-b2{ animation-delay:.25s; } .pe-b3{ animation-delay:.5s; } .pe-b4{ animation-delay:.75s; }
@keyframes pe-bar{ 0%,18%{ transform:scaleX(0); } 42%,88%{ transform:scaleX(1); } 98%,100%{ transform:scaleX(0); } }
.pei-eye{ animation:pei-eye 4.5s ease-in-out infinite; }
.pei-e2{ animation-delay:.55s; } .pei-e3{ animation-delay:1.1s; }
@keyframes pei-eye{ 0%,20%{ opacity:.2; } 45%,68%{ opacity:1; } 90%,100%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){
  .pe-w,.pe-bar,.pei-eye{ animation:none; }
  .pe-w{ opacity:.85; } .pe-bar{ transform:none; } .pei-eye{ opacity:.6; }
}

/* The Art — crown & keyless works viewer (cr-). Shares the visual language of
   the other two viewers; adds a three-position selector for the crown. */
.cr-wrap{ margin:46px 0 10px; }
.cr-head{ max-width:56ch; }
.cr-eyebrow{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:2.4px; text-transform:uppercase; opacity:.5; margin-bottom:10px; }
.cr-title{ font-family:'Playfair Display',Lora,serif; font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.15; margin:0 0 10px; }
.cr-lede{ font-family:Lora,Georgia,serif; line-height:1.7; opacity:.72; margin:0 0 20px; }
.cr-stage{ position:relative; border:1px solid var(--line); border-radius:18px;
  background:var(--bg-alt); overflow:hidden; min-height:320px; }
.cr-canvas{ display:block; width:100%; height:auto; cursor:grab; }
.cr-canvas:active{ cursor:grabbing; }
.cr-hint{ position:absolute; left:14px; bottom:12px; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase; opacity:.38; pointer-events:none; }
.cr-wrap.is-ready .cr-hint{ animation:m3-hint 6s ease-in-out 2s forwards; }
.cr-zoom{ position:absolute; right:14px; bottom:12px; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:1.4px; opacity:.4; pointer-events:none; }
.cr-fallback{ padding:56px 24px; text-align:center; font-family:Lora,Georgia,serif;
  opacity:.6; line-height:1.7; margin:0; }
.cr-wrap.is-failed .cr-canvas, .cr-wrap.is-failed .cr-zoom, .cr-wrap.is-failed .cr-hint{ display:none; }
.cr-positions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.cr-pos{ flex:1 1 150px; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:none;
  color:inherit; cursor:pointer; text-align:left;
  transition:border-color .3s var(--ease), background .3s var(--ease); }
.cr-pos:hover{ border-color:var(--navy); }
.cr-pos.is-on{ border-color:var(--navy); background:color-mix(in srgb, var(--navy) 8%, transparent); }
.cr-num{ font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; opacity:.85; }
.cr-name{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.4px;
  text-transform:uppercase; opacity:.75; }
.cr-sub{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:1.2px; opacity:.45; }
.cr-controls{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.cr-turn, .cr-reset{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.6px;
  text-transform:uppercase; padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:none; color:inherit; cursor:pointer; opacity:.7;
  transition:opacity .3s var(--ease), border-color .3s var(--ease); }
.cr-turn:hover, .cr-reset:hover{ opacity:1; border-color:var(--navy); }
.cr-mode{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.2px; opacity:.5; }
.cr-legend{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.2px;
  line-height:1.9; opacity:.42; margin:14px 0 0; max-width:70ch; }
@media (max-width:700px){
  .cr-stage{ border-radius:14px; min-height:280px; }
  .cr-pos{ flex:1 1 100%; flex-direction:row; align-items:center; gap:10px; padding:10px 12px; }
}
@media (prefers-reduced-motion: reduce){ .cr-wrap.is-ready .cr-hint{ animation:none; opacity:.38; } }

/* Painted before anything else. Without this the browser shows its own white
   default for a frame or two on every navigation, which on a dark theme reads
   as a flash between pages. */
html[data-theme="dark"]{ background:#131315; color-scheme:dark; }
html[data-theme="light"]{ background:#FFFFFF; color-scheme:light; }

/* Still wanting another watch — grails land, the horizon holds its distance */
.rw-dot{ animation:rw-dot 8s ease-in-out infinite; }
.rw-d2{ animation-delay:.5s; } .rw-d3{ animation-delay:1s; }
.rw-d4{ animation-delay:1.5s; } .rw-d5{ animation-delay:2s; }
@keyframes rw-dot{ 0%,6%{ opacity:0; transform:scale(.4); } 22%,88%{ opacity:.85; transform:scale(1); }
  98%,100%{ opacity:0; transform:scale(.4); } }
.rw-dot{ transform-box:fill-box; transform-origin:center; }
.rw-next{ animation:rw-next 8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes rw-next{ 0%,40%{ opacity:.25; transform:scale(.85); } 70%{ opacity:.85; transform:scale(1.12); }
  95%,100%{ opacity:.25; transform:scale(.85); } }
.rw-horizon{ stroke-dasharray:5 7; animation:rw-horizon 8s linear infinite; }
@keyframes rw-horizon{ to{ stroke-dashoffset:-48; } }
.rw-mode{ animation:rw-mode 8s ease-in-out infinite; }
.rw-m2{ animation-delay:1.2s; }
@keyframes rw-mode{ 0%,100%{ opacity:.22; } 50%{ opacity:.8; } }

/* Expectation vs wrist time — both sides fill, the gap shows itself */
.ex-e, .ex-a{ transform-box:view-box; animation:ex-grow 9s ease-in-out infinite; }
.ex-e{ transform-origin:208px 0; }
.ex-a{ transform-origin:452px 0; }
.ex-e2,.ex-a2{ animation-delay:.15s; } .ex-e3,.ex-a3{ animation-delay:.3s; }
.ex-e4,.ex-a4{ animation-delay:.45s; } .ex-e5,.ex-a5{ animation-delay:.6s; }
.ex-e6,.ex-a6{ animation-delay:.75s; }
@keyframes ex-grow{ 0%,12%{ transform:scaleX(0); } 38%,90%{ transform:scaleX(1); }
  99%,100%{ transform:scaleX(0); } }

/* The 5811 — the watch crosses from one wrist to the other */
.dad-w{ animation:dad-move 9s ease-in-out infinite; }
@keyframes dad-move{ 0%,18%{ transform:translate(0,0); } 46%,100%{ transform:translate(300px,0); } }
.dad-w{ transform-box:view-box; }
.dad-arc{ stroke-dasharray:4 6; animation:dad-arc 9s linear infinite; }
@keyframes dad-arc{ to{ stroke-dashoffset:-60; } }
.dad-i{ animation:dad-i 9s ease-in-out infinite; }
.dad-i2{ animation-delay:.7s; } .dad-i3{ animation-delay:1.4s; }
@keyframes dad-i{ 0%,40%{ opacity:.18; } 62%,92%{ opacity:.85; } 99%,100%{ opacity:.18; } }

/* The $50 watch — price bars fill, the three virtues light in turn */
.fy-bar{ transform-box:view-box; transform-origin:200px 0; animation:fy-bar 8s ease-in-out infinite; }
.fy-b2{ animation-delay:.2s; } .fy-b3{ animation-delay:.4s; } .fy-b4{ animation-delay:.6s; }
@keyframes fy-bar{ 0%,10%{ transform:scaleX(0); } 34%,88%{ transform:scaleX(1); }
  98%,100%{ transform:scaleX(0); } }
.fy-card{ animation:fy-card 8s ease-in-out infinite; }
.fy-c2{ animation-delay:.6s; } .fy-c3{ animation-delay:1.2s; }
@keyframes fy-card{ 0%,30%{ opacity:.2; } 52%,88%{ opacity:.85; } 98%,100%{ opacity:.2; } }

/* Card icons for the four */
.rwi-next{ animation:rwi-next 4.5s ease-in-out infinite; }
@keyframes rwi-next{ 0%,100%{ opacity:.28; } 50%{ opacity:.9; } }
.rwi-arrow{ stroke-dasharray:5; animation:rwi-arrow 4.5s ease-in-out infinite; }
@keyframes rwi-arrow{ 0%,100%{ stroke-dashoffset:5; } 55%{ stroke-dashoffset:0; } }
.exi-a{ transform-box:view-box; transform-origin:6px 0; animation:exi-a 4.5s ease-in-out infinite; }
.exi-2{ animation-delay:.25s; } .exi-3{ animation-delay:.5s; }
@keyframes exi-a{ 0%,12%{ transform:scaleX(0); } 40%,90%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
.dadi-w{ transform-box:view-box; animation:dadi-w 4.5s ease-in-out infinite; }
@keyframes dadi-w{ 0%,20%{ transform:translate(0,0); } 55%,100%{ transform:translate(22px,0); } }
.dadi-arc{ stroke-dasharray:3 4; animation:dadi-arc 4.5s linear infinite; }
@keyframes dadi-arc{ to{ stroke-dashoffset:-28; } }
.fyi-seg{ animation:fyi-seg 4.5s ease-in-out infinite; }
.fyi-s2{ animation-delay:.4s; }
@keyframes fyi-seg{ 0%,100%{ opacity:.25; } 50%{ opacity:.85; } }
.fyi-dot{ animation:fyi-dot 1.6s steps(2) infinite; }
@keyframes fyi-dot{ 0%{ opacity:.7; } 50%{ opacity:.15; } }

@media (prefers-reduced-motion: reduce){
  .rw-dot,.rw-next,.rw-horizon,.rw-mode,.ex-e,.ex-a,.dad-w,.dad-arc,.dad-i,
  .fy-bar,.fy-card,.rwi-next,.rwi-arrow,.exi-a,.dadi-w,.dadi-arc,.fyi-seg,.fyi-dot{ animation:none; }
  .rw-dot,.rw-next,.rw-mode,.dad-i,.fy-card,.rwi-next,.fyi-seg{ opacity:.7; }
  .ex-e,.ex-a,.fy-bar,.exi-a{ transform:none; }
  .dad-w,.dadi-w{ transform:none; }
}

/* ---------------------------------------------------------------
   Shared journal-diagram animation set (jd-*). Fifteen articles use
   five layout shapes between them, so one block of CSS drives all of
   them rather than fifteen near-identical ones.
   --------------------------------------------------------------- */
.jd-bar{ transform-box:view-box; transform-origin:232px 0; animation:jd-grow 8s ease-in-out infinite; }
.jd-b2{ animation-delay:.16s; } .jd-b3{ animation-delay:.32s; }
.jd-b4{ animation-delay:.48s; } .jd-b5{ animation-delay:.64s; }
@keyframes jd-grow{ 0%,10%{ transform:scaleX(0); } 34%,88%{ transform:scaleX(1); }
  98%,100%{ transform:scaleX(0); } }
.jd-node{ transform-box:fill-box; transform-origin:center; animation:jd-node 8s ease-in-out infinite; }
.jd-n2{ animation-delay:.4s; } .jd-n3{ animation-delay:.8s; }
.jd-n4{ animation-delay:1.2s; } .jd-n5{ animation-delay:1.6s; }
@keyframes jd-node{ 0%,6%{ opacity:0; transform:scale(.4); }
  24%,88%{ opacity:.9; transform:scale(1); } 98%,100%{ opacity:0; transform:scale(.4); } }
.jd-track{ animation:jd-track 8s ease-in-out infinite; }
@keyframes jd-track{ 0%,8%{ stroke-dashoffset:1; } 46%,90%{ stroke-dashoffset:0; }
  99%,100%{ stroke-dashoffset:1; } }
.jd-stem{ animation:jd-stem 8s ease-in-out infinite; }
.jd-s2{ animation-delay:.4s; } .jd-s3{ animation-delay:.8s; }
.jd-s4{ animation-delay:1.2s; } .jd-s5{ animation-delay:1.6s; }
@keyframes jd-stem{ 0%,10%{ opacity:0; } 30%,88%{ opacity:.3; } 98%,100%{ opacity:0; } }
.jd-panel{ animation:jd-panel 8s ease-in-out infinite; }
.jd-p2{ animation-delay:.8s; }
@keyframes jd-panel{ 0%,14%{ opacity:.12; } 38%,88%{ opacity:.34; } 98%,100%{ opacity:.12; } }
.jd-dot{ animation:jd-dot 8s ease-in-out infinite; }
.jd-d2{ animation-delay:.3s; } .jd-d3{ animation-delay:.6s; }
.jd-d4{ animation-delay:.9s; } .jd-d5{ animation-delay:1.2s; }
@keyframes jd-dot{ 0%,18%{ opacity:0; } 42%,88%{ opacity:.65; } 98%,100%{ opacity:0; } }
.jd-ring{ transform-box:view-box; transform-origin:300px 176px; animation:jd-ring 26s linear infinite; }
@keyframes jd-ring{ to{ transform:rotate(360deg); } }

/* Card icons for the same fifteen */
.jdi-a{ animation:jdi-fade 4.5s ease-in-out infinite; }
.jdi-b{ animation:jdi-fade 4.5s ease-in-out infinite 1s; }
@keyframes jdi-fade{ 0%,100%{ opacity:.25; } 50%{ opacity:.85; } }
.jdi-hand{ transform-box:view-box; transform-origin:22px 21px; animation:jdi-hand 5s linear infinite; }
@keyframes jdi-hand{ to{ transform:rotate(360deg); } }
.jdi-pulse{ transform-box:fill-box; transform-origin:center; animation:jdi-pulse 4.5s ease-in-out infinite; }
@keyframes jdi-pulse{ 0%,100%{ opacity:.12; transform:scale(.86); } 50%{ opacity:.5; transform:scale(1.04); } }
.jdi-loupe{ transform-box:view-box; transform-origin:30px 30px;
  animation:jdi-loupe 5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes jdi-loupe{ 0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-11px,-12px); } }
.jdi-measure{ transform-box:view-box; transform-origin:9px 22px; animation:jdi-measure 4.5s ease-in-out infinite; }
@keyframes jdi-measure{ 0%,100%{ transform:scaleY(.2); } 50%{ transform:scaleY(1); } }
.jdi-spin{ transform-box:view-box; transform-origin:22px 21px; animation:jdi-hand 6s linear infinite; }
.jdi-wave{ transform-box:view-box; animation:jdi-wave 4s ease-in-out infinite; }
.jdi-wave2{ transform-box:view-box; animation:jdi-wave 4s ease-in-out infinite .6s; }
@keyframes jdi-wave{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }
.jdi-quiet{ transform-box:fill-box; transform-origin:center; animation:jdi-quiet 5s ease-in-out infinite; }
@keyframes jdi-quiet{ 0%,100%{ opacity:.1; transform:scale(.85); } 50%{ opacity:.42; transform:scale(1.05); } }
.jdi-flash{ animation:jdi-fade 2.4s ease-in-out infinite; }
.jdi-c1,.jdi-c2,.jdi-c3{ animation:jdi-fade 4.5s ease-in-out infinite; }
.jdi-c2{ animation-delay:.5s; } .jdi-c3{ animation-delay:1s; }

@media (prefers-reduced-motion: reduce){
  .jd-bar,.jd-node,.jd-track,.jd-stem,.jd-panel,.jd-dot,.jd-ring,
  .jdi-a,.jdi-b,.jdi-hand,.jdi-pulse,.jdi-loupe,..jdi-measure,.
  .jdi-spin,.jdi-wave,.jdi-wave2,.jdi-quiet,.jdi-flash,.
  .jdi-c1,.jdi-c2,.jdi-c3{ animation:none; }
  .jd-bar{ transform:none; } .jd-node{ opacity:.85; transform:none; }
  .jd-track{ stroke-dashoffset:0; } .jd-stem{ opacity:.3; }
  .jd-panel{ opacity:.32; } .jd-dot{ opacity:.6; }
  .jdi-a,.jdi-b,.jdi-flash,.jdi-c1,.jdi-c2,.jdi-c3{ opacity:.6; }
  .jdi-measure{ transform:none; } }

/* ---------------------------------------------------------------
   Illustrated journal diagrams. These replaced a set of bar charts,
   so the animation is scene-specific rather than one generic grow.
   --------------------------------------------------------------- */
.dc-eye{ animation:dc-eye 7s ease-in-out infinite; }
.dc-e2{ animation-delay:.22s; } .dc-e3{ animation-delay:.44s; }
.dc-e4{ animation-delay:.66s; } .dc-e5{ animation-delay:.88s; } .dc-e6{ animation-delay:1.1s; }
@keyframes dc-eye{ 0%,22%{ opacity:0; } 46%,86%{ opacity:.55; } 98%,100%{ opacity:0; } }

.hl-gear{ transform-box:view-box; transform-origin:258px 122px; animation:hl-spin 22s linear infinite; }
.hl-gear2{ transform-box:view-box; transform-origin:330px 158px; animation:hl-spin 14s linear infinite reverse; }
.hl-gear3{ transform-box:view-box; transform-origin:288px 196px; animation:hl-spin 9s linear infinite; }
@keyframes hl-spin{ to{ transform:rotate(360deg); } }
.hl-oil{ animation:hl-oil 8s ease-in-out infinite; }
.hl-o2{ animation-delay:.6s; } .hl-o3{ animation-delay:1.2s; } .hl-o4{ animation-delay:1.8s; }
@keyframes hl-oil{ 0%,20%{ opacity:.75; r:4.6; } 70%,100%{ opacity:.12; r:2.2; } }
.hl-gasket{ animation:hl-gasket 8s ease-in-out infinite; }
@keyframes hl-gasket{ 0%,30%{ opacity:.55; } 80%,100%{ opacity:.14; } }

.om-d{ animation:om-d 9s ease-in-out infinite; }
.om-d2{ animation-delay:.1s; } .om-d3{ animation-delay:.2s; } .om-d4{ animation-delay:.3s; }
.om-d5{ animation-delay:.4s; } .om-d6{ animation-delay:.5s; } .om-d7{ animation-delay:.6s; }
.om-d8{ animation-delay:.7s; }
@keyframes om-d{ 0%,8%{ opacity:.16; } 32%,88%{ opacity:.9; } 98%,100%{ opacity:.16; } }

.wm-loupe{ transform-box:view-box; transform-origin:342px 118px; animation:wm-loupe 9s ease-in-out infinite; }
@keyframes wm-loupe{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-128px,26px); } }
.wm-nick{ animation:wm-nick 9s ease-in-out infinite; }
@keyframes wm-nick{ 0%,34%{ opacity:0; } 54%,88%{ opacity:.8; } 98%,100%{ opacity:0; } }
.wm-tick{ animation:wm-tick 9s ease-in-out infinite; }
.wm-t2{ animation-delay:.5s; } .wm-t3{ animation-delay:1s; } .wm-t4{ animation-delay:1.5s; }
@keyframes wm-tick{ 0%,26%{ opacity:0; } 48%,88%{ opacity:.7; } 98%,100%{ opacity:0; } }

.bs-link{ transform-box:view-box; transform-origin:168px 146px;
  animation:bs-link 9s ease-in-out infinite; }
.bs-l2{ animation-delay:.16s; } .bs-l3{ animation-delay:.32s; } .bs-l4{ animation-delay:.48s; }
@keyframes bs-link{ 0%,6%{ opacity:0; transform:scaleY(.2); }
  26%,84%{ opacity:1; transform:scaleY(1); } 97%,100%{ opacity:0; transform:scaleY(.2); } }
.bs-strap{ transform-box:view-box; transform-origin:432px 146px;
  animation:bs-strap 9s ease-in-out infinite 1.1s; }
@keyframes bs-strap{ 0%,8%{ opacity:0; transform:scaleY(.25); }
  30%,84%{ opacity:1; transform:scaleY(1); } 97%,100%{ opacity:0; transform:scaleY(.25); } }
.bs-tool{ transform-box:view-box; transform-origin:473px 213px;
  animation:bs-tool 9s ease-in-out infinite; }
@keyframes bs-tool{ 0%,36%{ opacity:0; transform:translate(14px,10px) rotate(18deg); }
  58%,84%{ opacity:.85; transform:translate(0,0) rotate(0deg); }
  97%,100%{ opacity:0; transform:translate(14px,10px) rotate(18deg); } }
.bs-case,.bs-case2{ animation:bs-case 9s ease-in-out infinite; }
.bs-case2{ animation-delay:1.1s; }
@keyframes bs-case{ 0%,4%{ opacity:.3; } 22%,84%{ opacity:1; } 97%,100%{ opacity:.3; } }

.sh-w{ animation:sh-pulse 8s ease-in-out infinite; }
.sh-m{ animation:sh-pulse 8s ease-in-out infinite; }
.sh-m2{ animation-delay:.2s; } .sh-m3{ animation-delay:.4s; }
.sh-m4{ animation-delay:.6s; } .sh-m5{ animation-delay:.8s; } .sh-m6{ animation-delay:1s; }
@keyframes sh-pulse{ 0%,14%{ opacity:.2; } 40%,88%{ opacity:.95; } 98%,100%{ opacity:.2; } }

.lg-ok,.lg-bad{ animation:lg-set 8s ease-in-out infinite; }
.lg-bad{ animation-delay:1.2s; }
@keyframes lg-set{ 0%,12%{ opacity:.25; } 36%,88%{ opacity:1; } 98%,100%{ opacity:.25; } }

.rg-gone{ animation:rg-gone 9s ease-in-out infinite; }
.rg-g2{ animation-delay:.2s; } .rg-g3{ animation-delay:.4s; } .rg-g4{ animation-delay:.6s; }
@keyframes rg-gone{ 0%,16%{ opacity:.7; } 62%,88%{ opacity:.16; } 98%,100%{ opacity:.7; } }
.rg-miss{ animation:rg-miss 9s ease-in-out infinite; }
.rg-m2{ animation-delay:.45s; } .rg-m3{ animation-delay:.9s; }
@keyframes rg-miss{ 0%,20%{ opacity:.3; } 52%,88%{ opacity:1; } 98%,100%{ opacity:.3; } }

.wd-w{ transform-box:view-box; transform-origin:300px 142px; animation:wd-turn 12s linear infinite; }
@keyframes wd-turn{ to{ transform:rotate(360deg); } }
.wd-cradle{ transform-box:view-box; transform-origin:300px 142px; animation:wd-turn 30s linear infinite reverse; }

.wr-wave{ transform-box:view-box; animation:wr-wave 7s ease-in-out infinite; }
.wr-w2{ animation-delay:.4s; } .wr-w3{ animation-delay:.8s; }
.wr-w4{ animation-delay:1.2s; } .wr-w5{ animation-delay:1.6s; }
@keyframes wr-wave{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(24px); } }
.wr-gasket{ animation:wr-gasket 7s ease-in-out infinite; }
@keyframes wr-gasket{ 0%,100%{ opacity:.24; } 50%{ opacity:.8; } }

.qt-p{ animation:qt-p 9s ease-in-out infinite; }
.qt-p2{ animation-delay:.3s; } .qt-p3{ animation-delay:.6s; }
.qt-p4{ animation-delay:.9s; } .qt-p5{ animation-delay:1.2s; }
@keyframes qt-p{ 0%,100%{ opacity:.14; } 50%{ opacity:.3; } }
.qt-halo{ transform-box:view-box; transform-origin:300px 200px; animation:qt-halo 9s ease-in-out infinite; }
@keyframes qt-halo{ 0%,100%{ opacity:.14; transform:scale(.9); } 50%{ opacity:.4; transform:scale(1.04); } }

.fw-crisp{ animation:fw-crisp 8s ease-in-out infinite; }
@keyframes fw-crisp{ 0%,24%{ opacity:.25; } 46%,88%{ opacity:.9; } 98%,100%{ opacity:.25; } }
.fw-soft{ animation:fw-crisp 8s ease-in-out infinite 1s; }

.ph-cone{ animation:ph-cone 8s ease-in-out infinite; }
@keyframes ph-cone{ 0%,20%{ opacity:.02; } 48%,88%{ opacity:.12; } 98%,100%{ opacity:.02; } }
.ph-big{ transform-box:view-box; transform-origin:330px 118px; animation:ph-big 8s ease-in-out infinite; }
@keyframes ph-big{ 0%,20%{ transform:scale(.86); opacity:.4; } 50%,88%{ transform:scale(1); opacity:1; }
  98%,100%{ transform:scale(.86); opacity:.4; } }

.sv-p{ animation:sv-p 9s ease-in-out infinite; }
.sv-p2{ animation-delay:.16s; } .sv-p3{ animation-delay:.32s; } .sv-p4{ animation-delay:.48s; }
.sv-p5{ animation-delay:.64s; } .sv-p6{ animation-delay:.8s; } .sv-p7{ animation-delay:.96s; }
@keyframes sv-p{ 0%,8%{ opacity:0; } 30%,88%{ opacity:1; } 98%,100%{ opacity:0; } }
.sv-scr{ animation:sv-p 9s ease-in-out infinite 1.1s; }

.fv-w{ animation:fv-w 9s ease-in-out infinite; }
.fv-w2{ animation-delay:.35s; } .fv-w3{ animation-delay:.7s; }
.fv-w4{ animation-delay:1.05s; } .fv-w5{ animation-delay:1.4s; }
@keyframes fv-w{ 0%,10%{ opacity:.22; } 34%,88%{ opacity:1; } 98%,100%{ opacity:.22; } }

@media (prefers-reduced-motion: reduce){
  .dc-eye,.hl-gear,.hl-gear2,.hl-gear3,.hl-oil,.hl-gasket,.om-d,.wm-loupe,.wm-nick,.wm-tick,
  .bs-link,.bs-strap,.bs-tool,.bs-case,.bs-case2,.sh-w,.sh-m,.lg-ok,.lg-bad,.rg-gone,.rg-miss,.wd-w,.wd-cradle,.wr-wave,
  .wr-gasket,.qt-p,.qt-halo,.fw-crisp,.fw-soft,.ph-cone,.ph-big,.sv-p,.sv-scr,.fv-w{ animation:none; }
  .dc-eye,.wm-nick,.wm-tick,.rg-miss,.sv-p,.sv-scr,.fv-w,.om-d,.sh-w,.sh-m,.lg-ok,.lg-bad{ opacity:.8; }
  .qt-p{ opacity:.24; } .qt-halo{ opacity:.3; } .ph-cone{ opacity:.1; }
  .hl-oil{ opacity:.6; } .hl-gasket{ opacity:.4; } .wr-gasket{ opacity:.55; }
  .ph-big,.wm-loupe,.wr-wave,.wd-w,.wd-cradle{ transform:none; }
}

/* Five redesigned card icons. Each one animates the idea in the article
   rather than nudging a decorative part around. */
.dci-p{ transform-box:view-box; transform-origin:22px 22px; animation:dci-p 4.5s ease-in-out infinite; }
.dci-p2{ animation-delay:.1s; } .dci-p3{ animation-delay:.2s; } .dci-p4{ animation-delay:.3s; }
@keyframes dci-p{ 0%,18%{ opacity:0; transform:scale(1.5); }
  52%,80%{ opacity:.75; transform:scale(1); } 96%,100%{ opacity:0; transform:scale(1.5); } }
.dci-ring{ transform-box:view-box; transform-origin:22px 22px; animation:dci-ring 4.5s ease-in-out infinite; }
@keyframes dci-ring{ 0%,26%{ opacity:0; transform:scale(.7); }
  60%,84%{ opacity:.5; transform:scale(1); } 98%,100%{ opacity:0; transform:scale(.7); } }

.shi-m{ animation:shi-m 4.5s ease-in-out infinite; }
.shi-m2{ animation-delay:.12s; } .shi-m3{ animation-delay:.24s; } .shi-m4{ animation-delay:.36s; }
@keyframes shi-m{ 0%,14%{ opacity:0; } 44%,84%{ opacity:.9; } 98%,100%{ opacity:0; } }
.shi-price{ transform-box:view-box; animation:shi-price 4.5s ease-in-out infinite; }
@keyframes shi-price{ 0%,22%{ transform:translateX(0); } 62%,84%{ transform:translateX(22px); }
  98%,100%{ transform:translateX(0); } }

.rgi-go{ transform-box:view-box; animation:rgi-go 5s ease-in-out infinite; }
.rgi-g2{ animation-delay:.18s; } .rgi-g3{ animation-delay:.36s; }
@keyframes rgi-go{ 0%,12%{ opacity:.85; transform:translate(0,0); }
  62%,84%{ opacity:.1; transform:translate(-11px,-7px); }
  98%,100%{ opacity:.85; transform:translate(0,0); } }
.rgi-back{ transform-box:view-box; animation:rgi-back 5s ease-in-out infinite; }
@keyframes rgi-back{ 0%,28%{ opacity:0; transform:translate(9px,7px); }
  64%,86%{ opacity:1; transform:translate(0,0); }
  98%,100%{ opacity:0; transform:translate(9px,7px); } }
.rgi-arc{ animation:rgi-arc 5s ease-in-out infinite; }
@keyframes rgi-arc{ 0%,30%{ stroke-dashoffset:22; } 66%,86%{ stroke-dashoffset:0; }
  98%,100%{ stroke-dashoffset:22; } }

.svi-p{ transform-box:view-box; animation:svi-p 5s ease-in-out infinite; }
.svi-p2{ animation-delay:.22s; } .svi-p3{ animation-delay:.44s; } .svi-p4{ animation-delay:.66s; }
@keyframes svi-p{ 0%,10%{ opacity:0; transform:translateY(-15px); }
  40%,84%{ opacity:.8; transform:translateY(0); }
  97%,100%{ opacity:0; transform:translateY(-15px); } }

.fwi-edge{ animation:fwi-edge 4.5s ease-in-out infinite; }
@keyframes fwi-edge{ 0%,14%{ stroke-dashoffset:1; } 52%,86%{ stroke-dashoffset:0; }
  98%,100%{ stroke-dashoffset:1; } }
.fwi-spark{ animation:fwi-spark 4.5s ease-in-out infinite; }
@keyframes fwi-spark{ 0%,48%{ opacity:0; } 62%{ opacity:.85; } 80%,100%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .dci-p,.dci-ring,.shi-m,.shi-price,.rgi-go,.rgi-back,.rgi-arc,.svi-p,.fwi-edge,.fwi-spark{
    animation:none; }
  .dci-p,.shi-m,.svi-p,.rgi-back{ opacity:.75; transform:none; }
  .dci-ring{ opacity:.4; transform:none; }
  .rgi-go{ opacity:.5; transform:none; }
  .rgi-arc,.fwi-edge{ stroke-dashoffset:0; }
  .fwi-spark{ opacity:.5; }
  .shi-price{ transform:none; }
}

/* ---------------------------------------------------------------
   September batch: illustrated diagrams and their card icons.
   --------------------------------------------------------------- */
.sm-loupe{ transform-box:view-box; transform-origin:258px 196px; animation:sm-loupe 8s ease-in-out infinite; }
@keyframes sm-loupe{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-72px,-4px) scale(1.06); } }
.sm-y{ animation:sm-in 8s ease-in-out infinite; }
.sm-y2{ animation-delay:.2s; } .sm-y3{ animation-delay:.4s; }
.sm-n{ animation:sm-in 8s ease-in-out infinite .8s; }
.sm-n2{ animation-delay:1s; } .sm-n3{ animation-delay:1.2s; }
@keyframes sm-in{ 0%,10%{ opacity:0; } 34%,86%{ opacity:1; } 98%,100%{ opacity:0; } }

.fk-tell{ animation:fk-tell 8s ease-in-out infinite; }
.fk-t2{ animation-delay:.55s; } .fk-t3{ animation-delay:1.1s; }
@keyframes fk-tell{ 0%,22%{ opacity:0; } 46%,86%{ opacity:.85; } 98%,100%{ opacity:0; } }
.fk-fake{ animation:fk-fake 8s ease-in-out infinite; }
@keyframes fk-fake{ 0%,20%{ opacity:1; } 50%,86%{ opacity:.55; } 98%,100%{ opacity:1; } }

.tt-h{ transform-box:view-box; animation:tt-h 9s ease-in-out infinite; }
.tt-h2{ animation-delay:.4s; } .tt-h3{ animation-delay:.8s; }
@keyframes tt-h{ 0%,14%{ opacity:.15; } 38%,86%{ opacity:1; } 98%,100%{ opacity:.15; } }
.tt-smile{ animation:tt-smile 9s ease-in-out infinite; }
@keyframes tt-smile{ 0%,34%{ opacity:0; } 58%,86%{ opacity:.5; } 98%,100%{ opacity:0; } }

.snd-esc{ transform-box:view-box; transform-origin:300px 150px; animation:snd-esc 3s steps(8) infinite; }
@keyframes snd-esc{ to{ transform:rotate(360deg); } }
.snd-fork{ transform-box:view-box; transform-origin:300px 150px; animation:snd-fork .5s ease-in-out infinite alternate; }
@keyframes snd-fork{ from{ transform:rotate(-5deg); } to{ transform:rotate(5deg); } }
.snd-w{ transform-box:view-box; transform-origin:300px 150px; animation:snd-w 3s ease-out infinite; }
.snd-w2{ animation-delay:.75s; } .snd-w3{ animation-delay:1.5s; } .snd-w4{ animation-delay:2.25s; }
@keyframes snd-w{ 0%{ opacity:.5; transform:scale(.5); } 70%,100%{ opacity:0; transform:scale(1); } }

.wl-p{ animation:wl-p 9s ease-in-out infinite; }
.wl-p2{ animation-delay:.2s; } .wl-p3{ animation-delay:.4s; }
.wl-p4{ animation-delay:.6s; } .wl-p5{ animation-delay:.8s; }
@keyframes wl-p{ 0%,10%{ opacity:.1; } 36%,86%{ opacity:.42; } 98%,100%{ opacity:.1; } }
.wl-arrow{ animation:wl-arrow 9s ease-in-out infinite; }
@keyframes wl-arrow{ 0%,38%{ stroke-dashoffset:22; } 64%,86%{ stroke-dashoffset:0; } 98%,100%{ stroke-dashoffset:22; } }

 .vl-shop{ animation:vl-shop 9s ease-in-out infinite; }
.vl-s2{ animation-delay:.24s; } .vl-s3{ animation-delay:.48s; } .vl-s4{ animation-delay:.72s; }
@keyframes vl-shop{ 0%,8%{ opacity:0; } 30%,86%{ opacity:1; } 98%,100%{ opacity:0; } }
.vl-link{ animation:vl-link 9s ease-in-out infinite; }
.vl-l2{ animation-delay:.3s; } .vl-l3{ animation-delay:.6s; } .vl-l4{ animation-delay:.9s; }
@keyframes vl-link{ 0%,26%{ opacity:0; } 50%,86%{ opacity:.45; } 98%,100%{ opacity:0; } }

.fl-gmt{ transform-box:view-box; transform-origin:300px 154px; animation:fl-gmt 20s linear infinite; }
@keyframes fl-gmt{ to{ transform:rotate(360deg); } }

.ac-mech{ animation:ac-draw 9s ease-in-out infinite .6s; }
.ac-quartz{ animation:ac-draw 9s ease-in-out infinite .3s; }
.ac-phone{ animation:ac-draw 9s ease-in-out infinite; }
@keyframes ac-draw{ 0%,8%{ stroke-dashoffset:1; } 44%,88%{ stroke-dashoffset:0; } 99%,100%{ stroke-dashoffset:1; } }

.br-fade{ animation:br-fade 9s ease-in-out infinite; }
.br-f2{ animation-delay:.25s; } .br-f3{ animation-delay:.5s; }
@keyframes br-fade{ 0%,16%{ opacity:1; } 58%,86%{ opacity:.2; } 98%,100%{ opacity:1; } }
.br-keep{ animation:br-keep 9s ease-in-out infinite; }
@keyframes br-keep{ 0%,16%{ opacity:.5; } 58%,86%{ opacity:1; } 98%,100%{ opacity:.5; } }

.in-shield{ animation:in-shield 9s ease-in-out infinite; }
@keyframes in-shield{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
.in-y{ animation:sm-in 9s ease-in-out infinite; }
.in-y2{ animation-delay:.35s; }
.in-n{ animation:sm-in 9s ease-in-out infinite .7s; }
.in-n2{ animation-delay:1.05s; }

.fm-b{ animation:fm-b 9s ease-in-out infinite; }
.fm-b2{ animation-delay:.3s; } .fm-b3{ animation-delay:.6s; }
.fm-b4{ animation-delay:.9s; } .fm-b5{ animation-delay:1.2s; } .fm-b6{ animation-delay:1.5s; }
@keyframes fm-b{ 0%,12%{ opacity:0; } 34%,72%{ opacity:.9; } 92%,100%{ opacity:0; } }

/* card icons */
.swi-loupe{ transform-box:view-box; transform-origin:32px 31px; animation:swi-loupe 4.5s ease-in-out infinite; }
@keyframes swi-loupe{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-10px,-4px); } }
.tti-hands{ transform-box:view-box; transform-origin:22px 21px; animation:tti-hands 4.5s ease-in-out infinite; }
@keyframes tti-hands{ 0%,100%{ transform:rotate(-14deg); } 50%{ transform:rotate(0deg); } }
    .vli-s{ animation:vli-s 4.5s ease-in-out infinite; }
.vli-s2{ animation-delay:.2s; } .vli-s3{ animation-delay:.4s; }
@keyframes vli-s{ 0%,12%{ opacity:.2; } 44%,84%{ opacity:1; } 98%,100%{ opacity:.2; } }
.fli-gmt{ transform-box:view-box; transform-origin:22px 21px; animation:fli-gmt 9s linear infinite; }
@keyframes fli-gmt{ to{ transform:rotate(360deg); } }
.aci-h{ transform-box:view-box; transform-origin:15px 21px; animation:fli-gmt 6s linear infinite; }
.aci-sig{ animation:aci-sig 2.2s ease-in-out infinite; }
.aci-s2{ animation-delay:.4s; }
@keyframes aci-sig{ 0%,100%{ opacity:.15; } 50%{ opacity:.8; } }
.bri-f{ animation:bri-f 5s ease-in-out infinite; }
.bri-f2{ animation-delay:.2s; } .bri-f3{ animation-delay:.4s; }
@keyframes bri-f{ 0%,16%{ opacity:.9; } 60%,86%{ opacity:.16; } 98%,100%{ opacity:.9; } }
.bri-keep{ animation:bri-keep 5s ease-in-out infinite; }
@keyframes bri-keep{ 0%,16%{ opacity:.45; } 60%,86%{ opacity:1; } 98%,100%{ opacity:.45; } }
.ini-sh{ animation:ini-sh 4.5s ease-in-out infinite; }
@keyframes ini-sh{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.fmi-b{ animation:fmi-b 5s ease-in-out infinite; }
.fmi-b2{ animation-delay:.22s; } .fmi-b3{ animation-delay:.44s; } .fmi-b4{ animation-delay:.66s; }
@keyframes fmi-b{ 0%,14%{ opacity:0; } 40%,76%{ opacity:.85; } 94%,100%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .sm-loupe,.sm-y,.sm-n,.fk-tell,.fk-fake,.tt-h,.tt-smile,.snd-esc,.snd-fork,.snd-w,
  .wl-p,.wl-arrow,.lm-dot,.vl-shop,.vl-link,.fl-gmt,.ac-mech,.ac-quartz,.ac-phone,
  .br-fade,.br-keep,.in-shield,.in-y,.in-n,.fm-b,
  .swi-loupe,.fki-ring,.fki-x,.tti-hands,.tti-smile,.sni-w,.wli-p,.wli-arrow,.lmi-d,
  .vli-s,.fli-gmt,.aci-h,.aci-sig,.bri-f,.bri-keep,.ini-sh,.fmi-b{ animation:none; }
  .sm-y,.sm-n,.fk-tell,.tt-h,.wl-p,.lm-dot,.vl-shop,.br-fade,.br-keep,.in-y,.in-n,
  .fm-b,.fki-ring,.fki-x,.tti-smile,.wli-p,.vli-s,.bri-f,.bri-keep,.fmi-b{ opacity:.8; }
  .snd-w,  .ac-mech,.ac-quartz,.ac-phone,.wl-arrow,  .sm-loupe,.swi-loupe,.tti-hands,.fl-gmt,.fli-gmt,.aci-h,.snd-esc,.snd-fork{ transform:none; }
  .vl-link{ opacity:.45; } .in-shield,.ini-sh{ opacity:.85; } .aci-sig{ opacity:.6; }
}

/* Valley: the workshops settle in, their parts rise above the roofs, and the
   road between them draws itself - which is the whole argument of the piece. */
.vl-shop{ transform-box:view-box; animation:vl-shop 9s ease-in-out infinite; }
.vl-s2{ animation-delay:.2s; } .vl-s3{ animation-delay:.4s; } .vl-s4{ animation-delay:.6s; }
@keyframes vl-shop{ 0%,6%{ opacity:0; transform:translateY(7px); }
  26%,88%{ opacity:1; transform:translateY(0); } 98%,100%{ opacity:0; transform:translateY(7px); } }
.vl-part{ transform-box:fill-box; transform-origin:center;
  animation:vl-part 9s ease-in-out infinite; }
.vl-p2{ animation-delay:.2s; } .vl-p3{ animation-delay:.4s; } .vl-p4{ animation-delay:.6s; }
@keyframes vl-part{ 0%,18%{ opacity:0; transform:translateY(10px) scale(.8); }
  42%,88%{ opacity:1; transform:translateY(0) scale(1); }
  98%,100%{ opacity:0; transform:translateY(10px) scale(.8); } }
.vl-link{ animation:vl-link 9s ease-in-out infinite; }
.vl-k2{ animation-delay:.28s; } .vl-k3{ animation-delay:.56s; }
@keyframes vl-link{ 0%,34%{ stroke-dashoffset:1; } 58%,88%{ stroke-dashoffset:0; }
  98%,100%{ stroke-dashoffset:1; } }
.vl-road{ animation:vl-road 22s linear infinite; }
@keyframes vl-road{ to{ stroke-dashoffset:-64; } }

/* Forums: each opinion arrives on a line pointing at the watch it is about. */
.fm-line{ animation:fm-line 10s ease-in-out infinite; }
.fm-l2{ animation-delay:.3s; } .fm-l3{ animation-delay:.6s; }
.fm-l4{ animation-delay:.9s; } .fm-l5{ animation-delay:1.2s; } .fm-l6{ animation-delay:1.5s; }
@keyframes fm-line{ 0%,8%{ stroke-dashoffset:1; } 34%,86%{ stroke-dashoffset:0; }
  98%,100%{ stroke-dashoffset:1; } }
.fm-op{ transform-box:fill-box; transform-origin:center;
  animation:fm-op 10s ease-in-out infinite; }
.fm-o2{ animation-delay:.3s; } .fm-o3{ animation-delay:.6s; }
.fm-o4{ animation-delay:.9s; } .fm-o5{ animation-delay:1.2s; } .fm-o6{ animation-delay:1.5s; }
@keyframes fm-op{ 0%,12%{ opacity:0; transform:scale(.8); }
  38%,86%{ opacity:1; transform:scale(1); } 98%,100%{ opacity:0; transform:scale(.8); } }

/* Ten past ten: the hands swing into the pose and hold it, and the space they
   frame is exactly where a logo goes. */
.tti-h{ transform-box:view-box; transform-origin:22px 21px; animation:tti-h 5s ease-in-out infinite; }
@keyframes tti-h{ 0%,10%{ transform:rotate(-150deg); } 46%,88%{ transform:rotate(0deg); }
  99%,100%{ transform:rotate(-150deg); } }
.tti-m{ transform-box:view-box; transform-origin:22px 21px; animation:tti-m 5s ease-in-out infinite; }
@keyframes tti-m{ 0%,10%{ transform:rotate(190deg); } 46%,88%{ transform:rotate(0deg); }
  99%,100%{ transform:rotate(190deg); } }
.tti-s{ transform-box:view-box; transform-origin:22px 21px; animation:tti-s 5s linear infinite; }
@keyframes tti-s{ to{ transform:rotate(360deg); } }
.tti-logo{ animation:tti-logo 5s ease-in-out infinite; }
@keyframes tti-logo{ 0%,48%{ opacity:0; } 64%,88%{ opacity:.6; } 98%,100%{ opacity:0; } }

/* Insurance: the collection is counted, then the cover closes over it. */
 @media (prefers-reduced-motion: reduce){
  .vl-shop,.vl-part,.vl-link,.vl-road,.fm-line,.fm-op,
  .tti-h,.tti-m,.tti-s,.tti-logo,.ini-w,  .vl-shop,.vl-part,.fm-op,  .vl-link,.fm-line{ stroke-dashoffset:0; }
  .tti-h,.tti-m,.tti-s{ transform:none; }
  .tti-logo{ opacity:.6; }
  }

/* ---------------------------------------------------------------
   Four card icons, rebuilt. Each animates what its article is about,
   and every watch glyph now carries real hands rather than reading
   as a blank ring.
   --------------------------------------------------------------- */
.ini-w{ transform-box:fill-box; transform-origin:center; animation:ini-w 5.5s ease-in-out infinite; }
.ini-w2{ animation-delay:.18s; } .ini-w3{ animation-delay:.36s; }
@keyframes ini-w{ 0%,6%{ opacity:0; transform:scale(.65); } 26%,88%{ opacity:1; transform:scale(1); } 98%,100%{ opacity:0; transform:scale(.65); } }
.ini-shield{ animation:ini-shield 5.5s ease-in-out infinite; }
@keyframes ini-shield{ 0%,40%{ opacity:0; stroke-dashoffset:1; fill-opacity:0; } 56%{ opacity:.9; } 76%,88%{ opacity:.9; stroke-dashoffset:0; fill-opacity:.07; } 98%,100%{ opacity:0; stroke-dashoffset:1; fill-opacity:0; } }
.fki-loupe{ transform-box:view-box; transform-origin:30px 30px; animation:fki-loupe 6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes fki-loupe{ 0%,10%{ transform:translate(0,0); } 44%,58%{ transform:translate(-11px,-11px); } 88%,100%{ transform:translate(0,0); } }
.fki-tell{ animation:fki-tell 6s ease-in-out infinite; }
@keyframes fki-tell{ 0%,42%{ opacity:0; } 52%,74%{ opacity:.9; } 86%,100%{ opacity:0; } }
.fki-x{ transform-box:fill-box; transform-origin:center; animation:fki-x 6s ease-in-out infinite; }
@keyframes fki-x{ 0%,64%{ opacity:0; transform:scale(.6); } 76%,88%{ opacity:.85; transform:scale(1); } 97%,100%{ opacity:0; transform:scale(.6); } }
.wli-q{ transform-box:view-box; animation:wli-q 5s ease-in-out infinite; }
@keyframes wli-q{ 0%,12%{ transform:translateX(0); } 56%,88%{ transform:translateX(5px); } 99%,100%{ transform:translateX(0); } }
.wli-p{ animation:wli-p 5s ease-in-out infinite; }
.wli-p2{ animation-delay:.12s; } .wli-p3{ animation-delay:.24s; } .wli-p4{ animation-delay:.36s; }
@keyframes wli-p{ 0%,8%{ opacity:.25; } 34%,88%{ opacity:.85; } 98%,100%{ opacity:.25; } }
.wli-arrow{ animation:wli-arrow 5s ease-in-out infinite; }
@keyframes wli-arrow{ 0%,20%{ stroke-dashoffset:1; opacity:0; } 50%,86%{ stroke-dashoffset:0; opacity:.55; } 98%,100%{ stroke-dashoffset:1; opacity:0; } }
.sni-bal{ transform-box:view-box; transform-origin:18px 22px; animation:sni-bal 1.6s ease-in-out infinite; }
@keyframes sni-bal{ 0%,100%{ transform:rotate(-32deg); } 50%{ transform:rotate(32deg); } }
.sni-w{ animation:sni-w 1.6s ease-out infinite; }
.sni-w2{ animation-delay:.14s; } .sni-w3{ animation-delay:.28s; }
@keyframes sni-w{ 0%{ opacity:0; } 24%{ opacity:.7; } 70%,100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .ini-w,.ini-shield,.fki-loupe,.fki-tell,.fki-x,.wli-q,.wli-p,.wli-arrow,.sni-bal,.sni-w{ animation:none; }
  .ini-w,.wli-p{ opacity:1; transform:none; }
  .ini-shield{ opacity:.9; stroke-dashoffset:0; fill-opacity:.07; }
  .fki-loupe,.wli-q,.sni-bal{ transform:none; }
  .fki-tell{ opacity:.9; }
  .fki-x{ opacity:.85; transform:none; }
  .wli-arrow{ opacity:.55; stroke-dashoffset:0; }
  .sni-w{ opacity:.45; }
}

/* ---------------------------------------------------------------
   Journal search. Sits directly above the category pills because the
   two are one control: searching within a category should narrow,
   not replace. The count underneath gives both of them the feedback
   they were missing on a 72-card grid.
   --------------------------------------------------------------- */
.jsearch{ position:relative; display:flex; align-items:center; max-width:520px; margin:0 0 16px; }
.jsearch-ico{ position:absolute; left:14px; width:17px; height:17px; opacity:.42;
  pointer-events:none; }
.jsearch-input{ width:100%; font-family:Lora,Georgia,serif; font-size:.95rem;
  color:inherit; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:999px; padding:13px 42px 13px 42px; outline:none;
  transition:border-color .3s var(--ease), background .3s var(--ease),
             box-shadow .3s var(--ease); -webkit-appearance:none; appearance:none; }
.jsearch-input::placeholder{ color:var(--ink); opacity:.38; }
.jsearch-input:hover{ border-color:color-mix(in srgb, var(--navy) 40%, var(--line)); }
.jsearch-input:focus{ border-color:var(--navy); background:var(--bg);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--navy) 12%, transparent); }
/* the browser's own clear affordance duplicates ours */
.jsearch-input::-webkit-search-decoration,
.jsearch-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.jsearch-clear{ position:absolute; right:8px; display:flex; align-items:center;
  justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:50%;
  background:none; color:inherit; opacity:.45; cursor:pointer;
  transition:opacity .25s var(--ease), background .25s var(--ease); }
.jsearch-clear svg{ width:15px; height:15px; }
.jsearch-clear:hover{ opacity:1; background:color-mix(in srgb, var(--navy) 10%, transparent); }
.jcount{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.5px;
  text-transform:uppercase; opacity:.45; margin:0 0 22px; }
@media (max-width:700px){
  .jsearch{ max-width:none; }
  /* 16px keeps iOS from zooming the viewport when the field is focused */
  .jsearch-input{ font-size:16px; padding:12px 40px 12px 40px; }
}

/* ---------------------------------------------------------------
   Card icons on touch. These only ever played on :hover, which meant
   nobody on a phone or tablet saw a single one of them. On a coarse
   pointer they run whenever the card is on screen instead.
   --------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  .card.ico-live .art-ico *{ animation-play-state:running !important; }
}
@media (prefers-reduced-motion: reduce){
  .card .art-ico *{ animation-play-state:paused !important; }
}

/* Label text for screen readers only - the field has a visible placeholder,
   but a placeholder is not a label. */
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---------------------------------------------------------------
   Site search. The button lives in the nav beside the theme switch;
   the panel opens over the page so a search never costs you your
   place. Styled from the same tokens as everything else: monospace
   eyebrows, navy accent, hairline rules, the shared easing.
   --------------------------------------------------------------- */
.nav-search-btn{ display:inline-flex; align-items:center; gap:9px; height:36px;
  width:auto; max-width:42vw; padding:0 8px 0 12px; margin-right:12px;
  border:1px solid var(--line); border-radius:999px; background:none; color:inherit;
  cursor:pointer; text-align:left;
  transition:border-color .3s var(--ease), background .3s var(--ease); }
.nav-search-btn svg{ width:15px; height:15px; display:block; flex:none; opacity:.5;
  transition:opacity .3s var(--ease); }
.nav-search-text{ flex:1; font-family:'JetBrains Mono',monospace; font-size:.7rem;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.62;
  transition:opacity .3s var(--ease); }
.nav-search-btn:hover{ border-color:var(--navy);
  background:color-mix(in srgb, var(--navy) 5%, transparent); }
.nav-search-btn:hover svg, .nav-search-btn:hover .nav-search-text{ opacity:.8; }
.nav-search-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
.nav-search-key{ font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1;
  padding:4px 6px; border:1px solid var(--line); border-radius:5px; opacity:.45; flex:none; }

/* The body lock removes the scrollbar; reserving its exact width stops the
   page - and the fixed nav - jumping sideways as the panel opens. */
body.ss-open{ padding-right:var(--ss-gutter, 0px); }
body.ss-open .nav{ right:var(--ss-gutter, 0px); }

/* The idle prompt types itself, with a caret that blinks only while typing. */
.ss-count.is-typing::after{ content:''; display:inline-block; width:1px; height:.95em;
  margin-left:3px; vertical-align:-2px; background:currentColor; opacity:.7;
  animation:ss-caret 1s steps(2) infinite; }
@keyframes ss-caret{ 0%,49%{ opacity:.7; } 50%,100%{ opacity:0; } }
.ss-count{ min-height:1.25em; }

.ss-wrap{ position:fixed; inset:0; z-index:240; display:flex;
  align-items:flex-start; justify-content:center; }
.ss-wrap[hidden]{ display:none !important; }
.ss-veil{ position:absolute; inset:0; background:var(--ink); opacity:0;
  transition:opacity .24s var(--ease); }
.ss-wrap.is-in .ss-veil{ opacity:.34; }
.ss-panel{ position:relative; width:min(680px, calc(100vw - 32px)); margin-top:12vh;
  background:var(--bg); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.20); overflow:hidden;
  opacity:0; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease); }
.ss-wrap.is-in .ss-panel{ opacity:1; transform:translateY(0); }
/* On the way out it only fades. Scaling the panel made the field appear to
   shift sideways as it went, which read as a layout jump rather than a fade. */
.ss-wrap:not(.is-in) .ss-panel{ transform:none; transition:opacity .18s var(--ease); }

.ss-field{ display:flex; align-items:center; gap:11px; padding:16px 16px 14px;
  border-bottom:1px solid var(--line); }
.ss-icon{ width:19px; height:19px; flex:none; opacity:.5; }
.ss-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ss-input{ flex:1; border:0; background:none; color:inherit; font-family:Lora,Georgia,serif;
  font-size:1.06rem; padding:2px 0; }
.ss-input:focus{ outline:none; }
.ss-input::placeholder{ opacity:.42; }
.ss-esc{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:1.3px;
  padding:5px 8px; border:1px solid var(--line); border-radius:5px; background:none;
  color:inherit; opacity:.55; cursor:pointer;
  transition:opacity .3s var(--ease), border-color .3s var(--ease); }
.ss-esc:hover{ opacity:1; border-color:var(--navy); }

.ss-count{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.4px;
  text-transform:uppercase; opacity:.42; margin:0; padding:11px 18px 3px; }
.ss-results{ max-height:min(56vh, 460px); overflow-y:auto; padding:4px 8px 10px;
  overscroll-behavior:contain; }
.ss-kind{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:1.8px;
  text-transform:uppercase; opacity:.38; margin:12px 0 5px; padding:0 10px; }
.ss-row{ display:block; padding:9px 10px; border-radius:9px; text-decoration:none;
  color:inherit; transition:background .16s var(--ease); }
.ss-row:hover, .ss-row.is-active{ background:color-mix(in srgb, var(--navy) 9%, transparent); }
.ss-row-t{ display:block; font-family:Lora,Georgia,serif; font-size:.97rem; line-height:1.35; }
.ss-row-m{ display:block; font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:1.2px; text-transform:uppercase; opacity:.44; margin-top:3px; }
.ss-row-b{ font-family:Lora,Georgia,serif; font-size:.83rem; line-height:1.55;
  opacity:.56; margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; }
.ss-row mark{ background:none; color:var(--navy); font-weight:600; }
.ss-empty{ font-family:Lora,Georgia,serif; opacity:.55; padding:20px 12px; margin:0; }
body.ss-open{ overflow:hidden; }

@media (max-width:1200px){
  .nav-search-text{ display:none; }
  .nav-search-btn{ padding:0 11px; }
}
@media (max-width:700px){
  .nav-search-key{ display:none; }
  .nav-search-btn{ padding:0 9px; margin-right:7px; }
  .ss-panel{ margin-top:7vh; border-radius:13px; }
  .ss-results{ max-height:62vh; }
}
@media (prefers-reduced-motion: reduce){
  .ss-veil, .ss-panel{ transition:none; }
  .ss-panel{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .ss-count.is-typing::after{ animation:none; opacity:.7; }
}

/* ---------------------------------------------------------------
   Touch refinements. Nothing here changes the desktop layout - every
   rule is behind a coarse-pointer query.
   --------------------------------------------------------------- */
@media (pointer: coarse){
  /* iOS Safari zooms the whole page when a focused field is under 16px,
     and it does not zoom back out afterwards. Every input goes to 16px so
     tapping search or the contact form stops throwing the page about. */
  input, textarea, select, .ss-input{ font-size:16px !important; }

  /* Tap targets. The hit area is grown with a pseudo-element rather than by
     resizing anything, so the nav keeps its exact proportions. */
  .theme-switch, .nav-search-btn, .nav-mark{ position:relative; }
  .theme-switch::after, .nav-search-btn::after, .nav-mark::after{
    content:''; position:absolute; inset:-10px; border-radius:inherit; }

  /* Small print in the footer and nav is legible rather than decorative. */
  .footer a, .foot-col a, .footer-links a{ font-size:12px; line-height:2.1; }

  /* Comfortable spacing between adjacent links so a thumb cannot hit two. */
  .foot-col a, .footer-links a{ display:inline-block; padding:3px 0; }
}

/* ---------------------------------------------------------------
   Lume. The three dials are one night seen at three moments, so they
   share a single decay cycle: everything charges, then fades on the
   real curve — fast at first, then a long faint tail. The 3AM dial
   is barely there by the time the cycle ends, which is the point.
   --------------------------------------------------------------- */
.lm-halo, .lm-pip{ animation:lm-s1 9s ease-in-out infinite; }
.lm-s2{ animation-name:lm-s2; }
.lm-s3{ animation-name:lm-s3; }
@keyframes lm-s1{ 0%,100%{ opacity:.88; } 50%{ opacity:1; } }
@keyframes lm-s2{ 0%,100%{ opacity:.34; } 50%{ opacity:.46; } }
@keyframes lm-s3{ 0%,100%{ opacity:.09; } 50%{ opacity:.15; } }
.lm-s2{ animation-delay:-1.4s; }
.lm-s3{ animation-delay:-2.8s; }

.lm-curve{ animation:lm-curve 13s ease-out infinite; }
@keyframes lm-curve{ 0%,4%{ stroke-dashoffset:1; } 40%,92%{ stroke-dashoffset:0; }
  99%,100%{ stroke-dashoffset:1; } }
.lm-dot{ animation:lm-dot 13s ease-in-out infinite; }
@keyframes lm-dot{ 0%,10%{ opacity:0; } 34%,92%{ opacity:.9; } 99%,100%{ opacity:0; } }

/* Card icon: the same charge-and-fade, at a pace you can read on a hover. */
.lmi-pip{ animation:lmi-fade 5.5s cubic-bezier(.16,.7,.3,1) infinite; }
.lmi-p2{ animation-delay:-.12s; } .lmi-p3{ animation-delay:-.24s; } .lmi-p4{ animation-delay:-.36s; }
@keyframes lmi-fade{ 0%,8%{ opacity:1; } 40%{ opacity:.42; } 78%{ opacity:.14; }
  94%{ opacity:.08; } 100%{ opacity:1; } }
.lmi-glow{ transform-box:fill-box; transform-origin:center;
  animation:lmi-glow 5.5s cubic-bezier(.16,.7,.3,1) infinite; }
@keyframes lmi-glow{ 0%,8%{ opacity:1; transform:scale(1); } 40%{ opacity:.45; transform:scale(.9); }
  94%{ opacity:.08; transform:scale(.78); } 100%{ opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion: reduce){
  .lm-halo,.lm-pip,.lm-curve,.lm-dot,.lmi-pip,.lmi-glow{ animation:none; }
  .lm-s1{ opacity:1; } .lm-s2{ opacity:.42; } .lm-s3{ opacity:.13; }
  .lm-curve{ stroke-dashoffset:0; } .lm-dot{ opacity:.9; }
  .lmi-glow{ opacity:.6; transform:none; }
}

/* ---------------------------------------------------------------
   The Art — in-page navigation. Sixteen sections and eight thousand
   words, so there is a rail on the left showing where you are, and a
   hairline progress bar under the nav. On a phone the rail becomes a
   sheet behind a single button, since there is no room for a column.
   --------------------------------------------------------------- */
.ta-progress{ position:fixed; left:0; right:0; top:0; height:2px; z-index:120;
  background:transparent; pointer-events:none; }
.ta-progress-fill{ display:block; height:100%; width:100%; transform:scaleX(0);
  transform-origin:0 50%; background:var(--navy); opacity:.5; }

/* A chapter ruler rather than a panel: one hairline down the left, a tick per
   section, and the line filling as you read. No box, so it sits in the margin
   instead of floating on top of the page. */
.ta-rail{ position:fixed; left:max(18px, 2.4vw); top:50%; transform:translateY(-50%);
  z-index:90; max-height:min(70vh, 600px); overflow:visible;
  padding:0 0 0 2px; scrollbar-width:none;
  --ta-pct:0; }
.ta-rail::-webkit-scrollbar{ display:none; }
/* a soft scrim so ticks stay legible where the page runs full-bleed behind */
.ta-rail::before{ content:''; position:absolute; left:-16px; top:-22px; bottom:-22px;
  width:150px; background:linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 46%, transparent 100%);
  pointer-events:none; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 100%); }

.tar-head{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:2.4px;
  text-transform:uppercase; opacity:.28; margin:0 0 14px 0; white-space:nowrap;
  position:relative; }
.tar-list{ display:flex; flex-direction:column; gap:0; position:relative; }
/* the ruler itself, and the part of it you have read */
.tar-list::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:currentColor; opacity:.14; }
.tar-list::after{ content:''; position:absolute; left:0; top:2px; width:1px;
  height:calc(100% - 4px); background:var(--navy); opacity:.5;
  transform:scaleY(var(--ta-pct)); transform-origin:50% 0; }

.tar-link{ display:flex; align-items:center; gap:10px; padding:6px 10px 6px 0;
  text-decoration:none; color:inherit; position:relative; }
/* the tick: short by default, long and navy for the section you are in */
.tar-dot{ width:9px; height:1.5px; flex:none; border:0; border-radius:0;
  background:currentColor; opacity:.3;
  transition:width .32s var(--ease), opacity .3s var(--ease), background .3s var(--ease); }
.tar-num{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1.2px;
  opacity:.32; width:15px; flex:none; transition:opacity .3s var(--ease); }
.tar-name{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:1.1px;
  text-transform:uppercase; opacity:0; white-space:nowrap; max-width:0; overflow:hidden;
  transition:opacity .3s var(--ease), max-width .36s var(--ease); }

.ta-rail:hover .tar-name, .ta-rail:focus-within .tar-name,
.tar-link.is-current .tar-name{ opacity:.6; max-width:230px; }
.ta-rail:hover .tar-num{ opacity:.5; }
.tar-link:hover .tar-name{ opacity:1; }
.tar-link:hover .tar-dot{ width:16px; opacity:.6; }
.tar-link.is-current .tar-dot{ width:22px; opacity:1; background:var(--navy); }
.tar-link.is-current .tar-num{ opacity:.75; }
.tar-link.is-current .tar-name{ opacity:.85; }
.tar-link:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:4px; }

.ta-jump{ display:none; }

@media (max-width:1180px){
  .tar-name{ display:none; }
  .ta-rail{ left:max(12px, 1.4vw); }
  .ta-rail::before{ width:96px; }
}
@media (max-width:900px){
  .ta-rail{ position:fixed; left:0; right:0; bottom:0; top:auto; transform:translateY(102%);
    max-height:64vh; overflow-y:auto; background:var(--bg); border-top:1px solid var(--line);
    border-radius:18px 18px 0 0; padding:20px 22px calc(22px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 50px rgba(0,0,0,.18); transition:transform .3s var(--ease); }
  .ta-rail::before{ display:none; }
  body.tar-open .ta-rail{ transform:translateY(0); }
  .tar-head{ font-size:10px; margin-bottom:12px; }
  .tar-list::before, .tar-list::after{ left:3px; }
  .tar-link{ padding:11px 6px 11px 0; gap:12px; }
  .tar-name{ display:block; opacity:.72; max-width:none; font-size:11px; }
  .tar-num{ font-size:10px; width:19px; }
  .tar-dot{ width:9px; }
  .tar-link.is-current .tar-dot{ width:14px; }
  .ta-jump{ display:inline-flex; align-items:center; gap:9px; position:fixed;
    left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom));
    z-index:95; height:42px; padding:0 8px 0 16px; border-radius:999px;
    border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
    color:inherit; box-shadow:0 10px 28px rgba(0,0,0,.16); cursor:pointer; }
  .ta-jump-n{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1.3px;
    opacity:.45; }
  .ta-jump-t{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.3px;
    text-transform:uppercase; max-width:46vw; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
  .ta-jump::after{ content:''; width:22px; height:22px; border-radius:50%;
    background:color-mix(in srgb, var(--navy) 12%, transparent);
    background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
    background-size:9px 1.4px, 1.4px 9px; background-position:center, center;
    background-repeat:no-repeat; opacity:.55; }
  body.tar-open .ta-jump{ opacity:0; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){
  .tar-dot, .tar-name, .ta-rail, .tar-num{ transition:none; }
}