/* NOS Watches v2 design tokens (from the approved prototype, shared/tokens.css), the self-hosted
   fonts and the base of every page. Never use em dashes. No italics anywhere. */

/* ---------- fonts: self-hosted subsets, font-display swap ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-display:swap;font-weight:400 500;src:url(../fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-display:swap;font-weight:400 500;src:url(../fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-display:swap;font-weight:400 600;src:url(../fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-display:swap;font-weight:400 600;src:url(../fonts/jost-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Grounds: light and legible by default, dark "vault" sections only where they earn it */
  --paper:#f5f1e8;        /* main page ground, warm ivory */
  --paper-2:#ece6d9;      /* alternate light band */
  --card:#fffdf8;         /* cards on paper */
  --ink:#16140f;          /* body text on light */
  --ink-2:#4a453b;        /* secondary text on light (7:1 on paper) */
  --line:#d9d1c0;         /* hairlines on light */
  --vault:#1a1814;        /* dark sections: live drop, aisle view, track record */
  --vault-2:#24211c;
  --on-vault:#f3eee4;     /* text on vault */
  --on-vault-2:#bdb5a6;   /* secondary text on vault (>=7:1) */
  --vault-line:#3a352d;
  /* Accent: the amber-orange gold of the bezel concept (never green in the UI) */
  --amber:#d8973a;        /* fills, large type, buttons (button text is --ink) */
  --amber-hi:#efb35a;     /* hover, highlights on vault */
  --amber-ink:#8f5a12;    /* small amber text on paper (>=4.5:1) */
  /* Steel for the engraved plates */
  --steel-1:#e9ebee; --steel-2:#c6cad0; --steel-3:#9aa0a8; --steel-ink:#2b2e33;
  /* Signal colours */
  --live:#d8573a;         /* live dot only (a warm red-orange), never as text on paper below 18px */
  /* Type: upright only, no italics anywhere */
  --f-display:"Newsreader", "Times New Roman", serif;   /* 400/500, optical sizes */
  --f-ui:"Jost", system-ui, sans-serif;                 /* 400/500/600 */
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;    /* stock labels, quirky dealer details */
  --fs-hero:clamp(40px,6.4vw,92px);
  --fs-h2:clamp(30px,4vw,56px);
  --fs-h3:clamp(22px,2.2vw,30px);
  --fs-body:18px; --fs-small:15px;
  --g:clamp(16px,4vw,56px);   /* page gutter */
  --r:14px;                   /* radius */
  --btn-h:52px;
  --ease:cubic-bezier(.16,1,.3,1); /* expo out */

  /* Astra's global colours follow the tokens (pages in Astra's layout: cart, checkout, account) */
  --ast-global-color-0:var(--amber-ink);   /* Astra's accent is also its link colour: the dark amber reads on paper */
  --ast-global-color-1:var(--amber);
  --ast-global-color-2:var(--ink);
  --ast-global-color-3:var(--ink-2);
  --ast-global-color-4:var(--paper);
  --ast-global-color-5:var(--card);
  --ast-global-color-6:var(--paper-2);
  --ast-global-color-7:var(--line);
  --ast-global-color-8:var(--ink);
}
@media (max-width:700px){:root{--fs-body:17px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html body,html body.nos-v2{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
em,i,cite,address,dfn,var{font-style:normal}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--amber) 45%,transparent);color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--btn-h);padding:0 26px;border-radius:999px;font:600 16px/1 var(--f-ui);letter-spacing:.02em;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform .2s var(--ease),background .2s,border-color .2s}
.btn-primary{background:var(--amber);color:var(--ink)}
.btn-primary:hover{background:var(--amber-hi);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--card);color:var(--ink)}
.vault .btn-ghost{color:var(--on-vault);border-color:var(--on-vault-2)}
.vault .btn-ghost:hover{background:var(--vault-2);color:var(--on-vault)}
.btn:active{transform:translateY(1px)}

/* ---------- the drop plugin on a light page: its palette variables set to the tokens ---------- */
.nos-v2 .nosdp{--gold:var(--amber-ink);--gold-light:var(--amber);--dark:var(--card);--dark-2:var(--paper-2);--text:var(--ink);--white:var(--ink);--border:var(--line);--nosdp-serif:var(--f-display);--nosdp-sans:var(--f-ui)}

/* the plugin's hold line and hold-over notice in the cart and checkout */
.nos-v2 .nosdp-hold,.nos-v2 .nosdp-hold-over{--gold:var(--amber-ink);--text:var(--ink);--white:var(--ink);--dark:var(--card);--dark-2:var(--card)}

/* ---------- the collector quiz (its own dark design) as a v2 vault section: warm black, amber, the v2 type ---------- */
.nos-v2 .nosq{--gold:var(--amber-hi);--ast-global-color-0:var(--amber);--dark:var(--vault);--dark-2:var(--vault-2);--text:var(--on-vault);--white:var(--on-vault);--nosq-serif:var(--f-display);--nosq-sans:var(--f-ui);border-radius:var(--r)}
.nos-v2 .nosq .nosq-btn{border-radius:999px;font:600 16px/1.2 var(--f-ui);letter-spacing:.02em;text-transform:none}
.nos-v2 .nosq .nosq-btn-primary{border-color:var(--amber);background:var(--amber);color:var(--ink)}
.nos-v2 .nosq .nosq-title,.nos-v2 .nosq .nosq-q-t{font-weight:400;letter-spacing:-.01em!important}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}