/* sacredgeometry.io system.css: GENERATED by build/home-src/build.py. Do not edit.
   Section 01 = build/shared/tokens.css (verbatim, shared with the store theme).
   Section 02 = build/home-src/static/css/system.src.css. */

/* ==========================================================================
   01 tokens: the Sacred Geometry "Instrument" design tokens (owner: foundation)
   Source of truth: final/DESIGN.md §5 (plus the §4 font stacks and §4.2 type
   steps). Concatenated verbatim into BOTH build/home/static/css/system.css and
   the store theme style.css, so the two properties can never drift.
   Tokens only: no component rules, no @font-face (each property declares its
   own font files; see DESIGN.md §4.1 and §11.2).

   Theme model (§5.1, §8): dark "Obsidian" lives on :root and is the default.
   Light "Vellum" is the single [data-theme="light"] block. The pre-paint
   bootstrap always writes html[data-theme], so there is deliberately NO
   prefers-color-scheme copy: no-JS visitors get dark, the brand default.

   Contrast (§5.2, WCAG 2.x, re-computed for these exact values on 2026-10-15):
   every dark text token >= 4.83:1 on bg/band/surface/surface-2/surface-3/notice.
   Light: text, text-2, text-3, brass, copper and danger >= 4.66:1 everywhere;
   brass-hi 3.06-3.94:1 = large text (>=24px), strokes and UI only;
   success fails on surface-3 (4.38:1), so never put success text on surface-3.
   Control edge (non-text) dark 3.56-3.60:1, light 3.08-3.42:1.
   Breakpoints (custom properties cannot be used in media queries):
   <390 stacked wordmark · <600 phone · <640 home phone order · <768 single-column
   forms · <900 section heads stack · <1024 two-column layouts stack ·
   <=1100 / >=1101 navigation breakpoint on both properties.
   ========================================================================== */

:root{
  color-scheme:dark;

  /* ---- colour: surfaces (§5.1) ---- */
  --sg-bg:#0b0b0c;                 /* page; the Atlas black */
  --sg-band:#0f0f10;               /* alternating section bands, footer */
  --sg-surface:#131312;            /* plates, cards, panels, inputs */
  --sg-surface-2:#1a1917;          /* hover rows */
  --sg-surface-3:#23211d;          /* pressed / selected fills */

  /* ---- colour: text ladder ---- */
  --sg-text:#ede6d6;               /* 15.82:1 on bg */
  --sg-text-2:#bdb4a3;             /*  9.58:1 */
  --sg-text-3:#958c7b;             /*  5.92:1; annotations and meta, 12px+ */

  /* ---- colour: metal and states ---- */
  --sg-brass:#c9a35a;              /*  8.31:1; plate labels, model codes, rails */
  --sg-brass-hi:#e3c47f;           /* 11.68:1; emphasis and hover */
  --sg-brass-lo:#8f7034;           /* decorative only (gradients, ruler ends) */
  --sg-copper:#d08b5b;             /*  7.05:1; special-order labels only */
  --sg-danger:#e0705f;             /*  6.23:1; errors, remove-hover */
  --sg-success:#7fce9e;            /* 10.52:1; success notices */

  /* ---- colour: lines ---- */
  --sg-rule:rgba(201,163,90,.20);    /* hairlines (decorative) */
  --sg-rule-2:rgba(201,163,90,.40);  /* plate borders, dotted leaders */
  --sg-rule-n:rgba(237,230,214,.09); /* neutral row dividers */
  --sg-edge:rgba(201,163,90,.60);    /* boundaries of controls: 3.56-3.60:1 */

  /* ---- colour: engraving (SVG figures) ---- */
  --sg-engrave:#c9a35a;
  --sg-engrave-fine:rgba(201,163,90,.62);
  --sg-engrave-faint:rgba(201,163,90,.30);

  /* ---- colour: photo stage (identical in both themes; §6.1) ---- */
  --sg-stage:#100f0d;
  --sg-stage-edge:rgba(201,163,90,.26);
  --sg-stage-tick:rgba(227,196,127,.55);
  /* --sg-mat / --sg-mat-edge: light theme only (§6.2 mount); n/a in dark */

  /* ---- colour: interaction and atmosphere ---- */
  --sg-focus:#e3c47f;                /* focus ring, 11.68:1 on bg */
  --sg-notice-bg:rgba(201,163,90,.08); /* notice / selected tint (= #221f18 on surface) */
  --sg-glow:rgba(201,163,90,.11);    /* radial light behind hero art */
  --sg-header-bg:rgba(11,11,12,.86); /* header at >=1101px only (with blur) */
  --sg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c9a35a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---- elevation (§5.5) ---- */
  --sg-elev-1:0 1px 0 rgba(255,255,255,.03) inset;
  --sg-elev-2:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.8);
  --sg-stage-shadow:0 0 0 1px rgba(237,230,214,.06);

  /* ---- type families (§4.1) and scale (§4.2) ---- */
  --sg-display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sg-sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sg-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --sg-engraved:"Cinzel","Trajan Pro",serif;
  --sg-step--1:.8125rem;                                 /* 13px small */
  --sg-step-0:1.0625rem;                                 /* 17px body */
  --sg-step-1:1.1875rem;                                 /* 19px lede */
  --sg-step-2:clamp(1.5rem, 1.25rem + .9vw, 1.875rem);   /* 24-30px h3 */
  --sg-step-3:clamp(2.125rem, 1.55rem + 2.2vw, 3.375rem);/* 34-54px h2 */
  --sg-step-4:clamp(2.625rem, 1.55rem + 3.3vw, 4.5rem);  /* 42-72px h1 */

  /* ---- spacing, 4px base (§5.3) ---- */
  --sg-s-1:4px;
  --sg-s-2:8px;
  --sg-s-3:12px;
  --sg-s-4:16px;
  --sg-s-5:24px;
  --sg-s-6:32px;
  --sg-s-7:48px;
  --sg-s-8:64px;
  --sg-s-9:96px;
  --sg-s-10:128px;
  --sg-section-y:var(--sg-s-9);    /* section padding-block; 64px below 900px */

  /* ---- radii (§5.4) ---- */
  --sg-radius-1:2px;               /* buttons, inputs, chips, keys */
  --sg-radius-2:4px;               /* plates, stages, cards, panels */
  --sg-radius-3:6px;               /* drawer, modal */
  --sg-radius-knob:50%;            /* icon buttons */
  --sg-radius-pill:20px;           /* the scope's pause pill only */

  /* ---- layout (§5.6) ---- */
  --sg-wrap:1240px;                /* content width */
  --sg-gutter:clamp(16px, 4vw, 40px); /* phones always get 16px */
  --sg-wrap-max:calc(var(--sg-wrap) + 2 * var(--sg-gutter)); /* header, content and footer share it */
  --sg-measure:68ch;               /* long-form: blog, FAQ, privacy, product description */

  /* ---- motion (§5.7) ---- */
  --sg-ease:cubic-bezier(.2,.7,.2,1);
  --sg-dur-fast:160ms;             /* colour, border, background; arrow nudge */
  --sg-dur-sweep:220ms;            /* nav underline sweep */
  --sg-dur-row:300ms;              /* index-row underline */
  --sg-dur-theme:350ms;            /* html.sg-theme-anim cross-fade (class removed after 450ms) */
  --sg-dur-image:700ms;            /* image hover scale, motion-safe only */
}

[data-theme="light"]{
  color-scheme:light;

  --sg-bg:#f3efe5;
  --sg-band:#ebe5d7;
  --sg-surface:#fbf8f1;
  --sg-surface-2:#f0eadd;
  --sg-surface-3:#e4dccb;          /* no small text on it in light */

  --sg-text:#1a1712;               /* 15.56:1 on bg */
  --sg-text-2:#4a4337;             /*  8.51:1 */
  --sg-text-3:#665c4b;             /*  5.72:1 */

  --sg-brass:#7a5a1c;              /*  5.53:1; also links in light */
  --sg-brass-hi:#9b7630;           /*  3.64:1; LARGE TEXT (>=24px), STROKES AND UI ONLY */
  --sg-brass-lo:#b89a5e;           /* decorative only */
  --sg-copper:#94491f;             /*  5.66:1 */
  --sg-danger:#a63a29;             /*  5.61:1 */
  --sg-success:#2a7049;            /*  5.21:1; never on surface-3 (4.38:1) */

  --sg-rule:rgba(122,90,28,.22);
  --sg-rule-2:rgba(122,90,28,.44);
  --sg-rule-n:rgba(26,23,18,.11);
  --sg-edge:rgba(122,90,28,.74);     /* 3.08-3.42:1 */

  --sg-engrave:#5c420f;              /* raised from #6f5017: 8.16:1 on bg */
  --sg-engrave-fine:rgba(92,66,15,.82); /* 5.15:1 on bg */
  --sg-engrave-faint:rgba(92,66,15,.48);

  /* --sg-stage and --sg-stage-tick are inherited unchanged from :root */
  --sg-stage-edge:rgba(227,196,127,.30);
  --sg-mat:#fbf8f1;                  /* light-mode photo mount (§6.2) */
  --sg-mat-edge:rgba(26,23,18,.16);  /* hairline around the mount */

  --sg-focus:#7a5a1c;                /* 5.53:1 on bg */
  --sg-notice-bg:rgba(122,90,28,.07);/* = #f2ede2 on surface */
  --sg-glow:rgba(184,140,60,.16);
  --sg-header-bg:rgba(243,239,229,.90);
  --sg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237a5a1c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --sg-elev-1:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(48,34,10,.06);
  --sg-elev-2:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -26px rgba(48,34,10,.35);
  /* §5.5 "see §6.2 (mount)": the mount's shadow. Use it ONLY together with the
     mount outline (outline:8px solid var(--sg-mat); margin:8px). Small thumbnails
     (keyline 0 0 0 1px rgba(26,23,18,.18)) and instrument faces (scope, Atlas
     glyph) do not take the mat or this shadow. */
  --sg-stage-shadow:0 0 0 9px var(--sg-mat-edge), 0 22px 40px -24px rgba(48,34,10,.45);
}

/* Light mount on phones (§6.2: outline 5px, margin 5px) */
@media (max-width:599.98px){
  [data-theme="light"]{
    --sg-stage-shadow:0 0 0 6px var(--sg-mat-edge), 0 16px 28px -20px rgba(48,34,10,.4);
  }
}

/* Section rhythm below 900px (§5.3) */
@media (max-width:899.98px){
  :root{ --sg-section-y:var(--sg-s-8); }
}

/* Reduced motion (§5.7): every token-driven transition becomes instant.
   The component layer (store 19-motion-print.css, homepage system.css) still
   carries the universal <=0.001ms rule for untokenised animations. */
@media (prefers-reduced-motion:reduce){
  :root{
    --sg-dur-fast:.001ms;
    --sg-dur-sweep:.001ms;
    --sg-dur-row:.001ms;
    --sg-dur-theme:.001ms;
    --sg-dur-image:.001ms;
  }
}

/* ==========================================================================
   02 fonts + components: sacredgeometry.io (DESIGN.md §4, §6, §7)
   Section 01 above is build/shared/tokens.css, concatenated verbatim by
   build/home-src/build.py so the homepage and the store can never drift.
   Self-hosted OFL fonts (§4.1): no Google Fonts, no CDN.
   ========================================================================== */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/static/fonts/Manrope-VariableFont_wght.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/static/fonts/CormorantGaramond-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;
  src:url(/static/fonts/CormorantGaramond-italic-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/static/fonts/JetBrainsMono-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/static/fonts/Cinzel-normal-latin.woff2) format("woff2")}

/* Metric-matched local fallbacks (measured in Chrome against the real faces, 2026-10-15). While a web font
   is still loading, text is laid out in these instead of a raw system font, so the swap does not re-wrap the
   hero lede or h1 (a cold first visit at 390px otherwise shifted the page by one lede line: CLS ~0.21).
   "Cormorant" is already the second family in the shared --sg-display stack; the sans fallback is
   prefixed through --sg-sans-metric below, so the shared token itself is unchanged. */
@font-face{font-family:"SG Manrope Fallback";font-style:normal;font-weight:200 800;
  src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Helvetica"),local("Segoe UI");
  size-adjust:102.5%;ascent-override:104%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:300 700;
  src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Times");size-adjust:96.5%}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:300 700;
  src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Times Italic");size-adjust:87.4%}
:root{--sg-sans-metric:"Manrope","SG Manrope Fallback",var(--sg-sans)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;min-height:100vh;
  background-color:var(--sg-bg);
  /* subtle noise (§6.5): inline feTurbulence, ~5% */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--sg-text);
  font:400 var(--sg-step-0)/1.62 var(--sg-sans-metric);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
html.sg-theme-anim body,html.sg-theme-anim body *,html.sg-theme-anim body *::before,html.sg-theme-anim body *::after{
  transition:background-color var(--sg-dur-theme) var(--sg-ease),color var(--sg-dur-theme) var(--sg-ease),
  border-color var(--sg-dur-theme) var(--sg-ease),outline-color var(--sg-dur-theme) var(--sg-ease),
  fill var(--sg-dur-theme) var(--sg-ease),stroke var(--sg-dur-theme) var(--sg-ease)!important}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--sg-focus);outline-offset:3px;border-radius:2px}
::selection{background:rgba(201,163,90,.32);color:var(--sg-text)}
.sg-wrap{width:100%;max-width:var(--sg-wrap-max);margin-inline:auto;padding-inline:var(--sg-gutter)}
.sg-nowrap{white-space:nowrap}
.sg-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.sg-skip-link{position:absolute;left:var(--sg-gutter);top:-64px;z-index:1000;background:#e3c47f;color:#15110a;padding:10px 16px;border-radius:2px;font-weight:600;text-decoration:none;transition:top var(--sg-dur-fast)}
.sg-skip-link:focus{top:12px}
.sg-skip-link:focus-visible{outline:2px solid #15110a;outline-offset:2px}

/* ---------- type roles (§4.2) ---------- */
.sg-display{font-family:var(--sg-display);font-weight:500;font-size:var(--sg-step-4);line-height:1;letter-spacing:-.012em;text-wrap:balance;font-variant-numeric:lining-nums}
.sg-h2{font-family:var(--sg-display);font-weight:500;font-size:var(--sg-step-3);line-height:1.04;letter-spacing:-.006em;text-wrap:balance;font-variant-numeric:lining-nums}
.sg-h3{font-family:var(--sg-display);font-weight:600;font-size:var(--sg-step-2);line-height:1.12;font-variant-numeric:lining-nums}
.sg-lede{font-size:var(--sg-step-1);line-height:1.58;color:var(--sg-text-2);max-width:36em}
.sg-prose{color:var(--sg-text-2);max-width:62ch}
.sg-prose p+p{margin-top:.9em}
.sg-prose strong{color:var(--sg-text);font-weight:650}
.sg-em{font-style:italic;font-weight:500;color:var(--sg-brass-hi)}
[data-theme="light"] .sg-em{color:var(--sg-brass)}
.sg-anno{font:500 .75rem/1.35 var(--sg-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--sg-text-3)}
.sg-anno--sentence{text-transform:none;letter-spacing:.02em}
.sg-anno--strong{color:var(--sg-brass)}
.sg-num{font-family:var(--sg-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.sg-roman{font-family:var(--sg-engraved);font-weight:600;letter-spacing:.2em;font-size:.8125rem;line-height:1;color:var(--sg-brass)}

/* plate label + section head (§7.16) */
.sg-plate-label{display:flex;align-items:center;gap:14px;margin-bottom:var(--sg-s-5)}
.sg-plate-label .sg-roman,.sg-plate-label .sg-anno{white-space:nowrap}
.sg-plate-label::after{content:"";flex:1;height:7px;min-width:24px;
  background:linear-gradient(90deg,var(--sg-rule-2),var(--sg-rule) 70%,transparent) left center/100% 1px no-repeat,
             linear-gradient(var(--sg-rule-2),var(--sg-rule-2)) right center/1px 7px no-repeat}
.sg-section{padding-block:var(--sg-section-y)}
.sg-section--band{background:var(--sg-band);border-block:1px solid var(--sg-rule-n)}
.sg-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--sg-s-5) var(--sg-s-8);align-items:end;margin-bottom:var(--sg-s-7)}
.sg-section-head .sg-prose{justify-self:end}
@media (max-width:899.98px){
  .sg-section-head{grid-template-columns:1fr}
  .sg-section-head .sg-prose{justify-self:start}
}

/* ---------- links + buttons (§7.4, §7.18) ---------- */
.sg-link{color:var(--sg-brass-hi);font-weight:600;text-decoration:underline;text-decoration-color:var(--sg-rule-2);text-decoration-thickness:1px;text-underline-offset:.28em;transition:color var(--sg-dur-fast),text-decoration-color var(--sg-dur-fast)}
.sg-link:hover{text-decoration-color:currentColor}
[data-theme="light"] .sg-link{color:var(--sg-brass)}
.sg-link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--sg-text);text-decoration:none;border-bottom:1px solid var(--sg-rule-2);padding-bottom:3px;transition:border-color var(--sg-dur-fast),color var(--sg-dur-fast)}
.sg-link-arrow:hover{border-color:var(--sg-brass);color:var(--sg-brass-hi)}
[data-theme="light"] .sg-link-arrow:hover{color:var(--sg-brass)}
.sg-link-arrow svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--sg-dur-fast) var(--sg-ease)}
.sg-link-arrow:hover svg{transform:translateX(3px)}

.sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 22px;
  border:1px solid transparent;border-radius:var(--sg-radius-1);font:600 .9375rem/1.1 var(--sg-sans-metric);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--sg-dur-fast),border-color var(--sg-dur-fast),color var(--sg-dur-fast),box-shadow var(--sg-dur-fast)}
.sg-btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--sg-dur-fast) var(--sg-ease)}
.sg-btn:hover svg{transform:translateX(3px)}
/* brass: the one primary action per view (fixed colours, §5.1) */
.sg-btn--brass{background:linear-gradient(180deg,#dcbb74,#bc9446);color:#15110a;border-color:#a7843d;
  box-shadow:inset 0 1px 0 rgba(255,246,220,.5),0 1px 0 rgba(0,0,0,.35)}
.sg-btn--brass:hover{background:linear-gradient(180deg,#e7c985,#c9a053)}
.sg-btn--brass:active{background:linear-gradient(180deg,#c49c4f,#d8b56c)}
[data-theme="light"] .sg-btn--brass{box-shadow:inset 0 1px 0 rgba(255,246,220,.5),0 1px 2px rgba(48,34,10,.18)}
/* line: the alternative route */
.sg-btn--line{background:transparent;color:var(--sg-text);border-color:var(--sg-edge)}
.sg-btn--line:hover{border-color:var(--sg-brass);background:var(--sg-notice-bg)}

/* icon buttons ("knobs", §7.1) */
.sg-icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;padding:0;
  border:1px solid var(--sg-edge);background:transparent;color:var(--sg-text-2);cursor:pointer;text-decoration:none;position:relative;
  transition:color var(--sg-dur-fast),border-color var(--sg-dur-fast),background var(--sg-dur-fast)}
.sg-icon-btn::before{content:"";position:absolute;inset:-2px;border-radius:50%}   /* 44px hit area */
.sg-icon-btn:hover{color:var(--sg-brass-hi);border-color:var(--sg-brass);background:var(--sg-notice-bg)}
[data-theme="light"] .sg-icon-btn:hover{color:var(--sg-brass)}
.sg-i{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sg-theme-toggle .sg-i-moon{display:none}
[data-theme="light"] .sg-theme-toggle .sg-i-sun{display:none}
[data-theme="light"] .sg-theme-toggle .sg-i-moon{display:block}

/* ---------- brand (§5.8, §7.1) ---------- */
.sg-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--sg-text);min-width:0}
.sg-brand__mark{width:30px;height:30px;flex:0 0 30px;aspect-ratio:1}
.sg-brand__mark .bm-ring{fill:none;stroke:var(--sg-brass);stroke-width:1}
.sg-brand__mark .bm-tick{fill:none;stroke:var(--sg-brass);stroke-width:1;stroke-linecap:round}
.sg-brand__mark .bm-seed circle{fill:none;stroke:var(--sg-brass-hi);stroke-width:.75}
.sg-brand__mark .bm-dot{fill:var(--sg-brass-hi)}
[data-theme="light"] .sg-brand__mark .bm-seed circle{stroke:var(--sg-brass)}
[data-theme="light"] .sg-brand__mark .bm-dot{fill:var(--sg-brass)}
.sg-brand__word{font:600 .9375rem/1 var(--sg-engraved);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}

/* ---------- header (§7.1) ---------- */
.sg-site-header{position:sticky;top:0;z-index:100;background:var(--sg-bg);border-bottom:1px solid var(--sg-rule-n)}
.sg-site-header__inner{display:flex;align-items:center;gap:var(--sg-s-5);min-height:72px}
.sg-site-header__inner>.sg-brand{margin-right:auto}
.sg-site-nav ul{display:flex;align-items:center;gap:0;list-style:none}
.sg-site-nav a{display:block;padding:10px 14px;color:var(--sg-text-2);text-decoration:none;font-weight:500;font-size:.9375rem;line-height:1.4;letter-spacing:.005em;position:relative;transition:color var(--sg-dur-fast)}
.sg-site-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:var(--sg-brass);transform:scaleX(0);transform-origin:left;transition:transform var(--sg-dur-sweep) var(--sg-ease)}
.sg-site-nav a:hover,.sg-site-nav a[aria-current="page"]{color:var(--sg-text)}
.sg-site-nav a:hover::after,.sg-site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.sg-site-actions{display:flex;align-items:center;gap:8px;flex:none}
.sg-icon-btn--menu{display:none}
/* the blur only above the navigation breakpoint: below it a filter would trap the fixed menu overlay */
@media (min-width:1101px){
  .sg-site-header{background:var(--sg-header-bg);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px)}
}
@media (max-width:1100px){
  .sg-site-nav{display:none}
  .sg-icon-btn--menu{display:inline-grid}
  .sg-site-header__inner{min-height:64px;gap:var(--sg-s-3)}
}
@media (max-width:599.98px){
  .sg-icon-btn{width:36px;height:36px}
  .sg-icon-btn::before{inset:-4px}
  .sg-brand{gap:8px}
  .sg-brand__mark{width:28px;height:28px;flex-basis:28px}
  .sg-brand__word{font-size:.75rem;letter-spacing:.1em}
}
@media (max-width:389.98px){
  .sg-brand__mark{width:26px;height:26px;flex-basis:26px}
  .sg-brand__word{font-size:.6875rem;letter-spacing:.12em;line-height:1.15}
  .sg-brand__word>span{display:block}
}

/* ---------- full-viewport menu (§7.2) ---------- */
.sg-mobile-nav{position:fixed;inset:0;z-index:400;width:100vw;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;background:var(--sg-bg);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) max(24px,env(safe-area-inset-bottom)) env(safe-area-inset-left)}
.sg-mobile-nav[hidden]{display:none}
.sg-mobile-nav__top{flex:none;border-bottom:1px solid var(--sg-rule-n)}
.sg-mobile-nav__top .sg-site-header__inner{min-height:64px}
.sg-mobile-nav__list{padding-top:var(--sg-s-4)}
.sg-mobile-nav__list ul{list-style:none;max-width:640px}
.sg-mobile-nav__list li{width:100%;border-bottom:1px solid var(--sg-rule)}
.sg-mobile-nav__list a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;padding:18px 0;
  font:500 2rem/1.1 var(--sg-display);color:var(--sg-text);text-decoration:none;transition:color var(--sg-dur-fast),padding var(--sg-dur-fast)}
.sg-mobile-nav__list a:hover{color:var(--sg-brass-hi)}
[data-theme="light"] .sg-mobile-nav__list a:hover{color:var(--sg-brass)}
.sg-mobile-nav__list a[aria-current="page"]{color:var(--sg-brass-hi)}
[data-theme="light"] .sg-mobile-nav__list a[aria-current="page"]{color:var(--sg-brass)}
.sg-mobile-nav__list a:focus-visible{outline:none;border-radius:0;padding-left:14px;
  box-shadow:inset 3px 0 0 var(--sg-brass);background:linear-gradient(90deg,var(--sg-notice-bg),transparent)}
.sg-mobile-nav__foot{margin-top:auto;padding-top:var(--sg-s-6)}
html.sg-menu-open,html.sg-menu-open body{overflow:hidden}

/* ---------- photo stage (§6.1, §6.2) ---------- */
.sg-stage{position:relative;display:block;overflow:hidden;background:var(--sg-stage);border-radius:var(--sg-radius-2);
  box-shadow:0 0 0 1px rgba(237,230,214,.06);isolation:isolate}
.sg-stage img{width:100%;height:100%;object-fit:cover;transition:transform var(--sg-dur-image) var(--sg-ease)}
.sg-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.38))}
.sg-stage::after{content:"";position:absolute;inset:9px;z-index:2;pointer-events:none;border:1px solid var(--sg-stage-edge);border-radius:1px;
  background:
   linear-gradient(var(--sg-stage-tick),var(--sg-stage-tick)) left top/11px 1px no-repeat,
   linear-gradient(var(--sg-stage-tick),var(--sg-stage-tick)) left top/1px 11px no-repeat,
   linear-gradient(var(--sg-stage-tick),var(--sg-stage-tick)) right top/11px 1px no-repeat,
   linear-gradient(var(--sg-stage-tick),var(--sg-stage-tick)) right top/1px 11px no-repeat,
   linear-gradient(var(--sg-stage-tick),var(--sg-stage-tick)) left bottom/11px 1px no-repeat,
   linear-gradient(var(--sg-stage-tick),var(--sg-stage-tick)) left bottom/1px 11px no-repeat,
   linear-gradient(var(--sg-stage-tick),var(--sg-stage-tick)) right bottom/11px 1px no-repeat,
   linear-gradient(var(--sg-stage-tick),var(--sg-stage-tick)) right bottom/1px 11px no-repeat}
.sg-stage--43{aspect-ratio:4/3}
.sg-stage--11{aspect-ratio:1/1}
.sg-stage--45{aspect-ratio:4/5}
.sg-stage--32{aspect-ratio:3/2}
/* small thumbnails (< 120px): inset 4px frame, no ticks, no vignette */
.sg-stage--thumb::before{display:none}
.sg-stage--thumb::after{inset:4px;background:none;border-color:rgba(227,196,127,.22)}
@media (prefers-reduced-motion:no-preference){
  a:hover .sg-stage img{transform:scale(1.025)}
}
/* Vellum: every photo stage is mounted on an ivory mat (outline-based: no wrapper, no scroll overflow) */
[data-theme="light"] .sg-stage:not(.sg-stage--thumb){outline:8px solid var(--sg-mat);outline-offset:0;margin:8px;box-shadow:var(--sg-stage-shadow)}
[data-theme="light"] .sg-stage--thumb{box-shadow:0 0 0 1px rgba(26,23,18,.18)}
@media (max-width:599.98px){
  [data-theme="light"] .sg-stage:not(.sg-stage--thumb){outline-width:5px;margin:5px}
}
/* instrument faces (scope, Atlas glyph) stay dark with a keyline, never matted */
[data-theme="light"] .sg-stage--instrument{box-shadow:0 0 0 1px rgba(26,23,18,.18)}

/* ---------- specification plate (§7.15) ---------- */
.sg-spec>div{display:flex;align-items:baseline;gap:12px;padding:9px 0}
.sg-spec dt{flex:1 1 auto;display:flex;align-items:baseline;gap:12px;margin:0;min-width:max-content;
  font:500 .75rem/1.5 var(--sg-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--sg-text-3);white-space:nowrap}
.sg-spec dt::after{content:"";flex:1;min-width:16px;border-bottom:1px dotted var(--sg-rule-2);transform:translateY(-3px)}
.sg-spec dd{margin:0;max-width:64%;font:500 .9375rem/1.45 var(--sg-sans-metric);color:var(--sg-text);text-align:right}
.sg-spec dd .sg-num{font-size:.875rem}
@media (max-width:359.98px){
  .sg-spec>div{flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--sg-rule-n)}
  .sg-spec dt{min-width:0}
  .sg-spec dt::after{display:none}
  .sg-spec dd{max-width:none;text-align:left}
}
.sg-specplate{position:relative;background:var(--sg-surface);border:1px solid var(--sg-rule-2);border-radius:var(--sg-radius-2);
  padding:var(--sg-s-5) var(--sg-s-6) var(--sg-s-6);box-shadow:var(--sg-elev-2)}
.sg-specplate::before{content:"";position:absolute;inset:6px;border:1px solid var(--sg-rule-n);border-radius:2px;pointer-events:none}
.sg-specplate__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:var(--sg-s-3);border-bottom:1px solid var(--sg-rule-2);margin-bottom:var(--sg-s-2)}
.sg-specplate__model{font:600 1.375rem/1 var(--sg-engraved);letter-spacing:.14em;color:var(--sg-brass-hi)}
[data-theme="light"] .sg-specplate__model{color:var(--sg-brass)}
.sg-specplate__buy{display:flex;align-items:center;justify-content:space-between;gap:var(--sg-s-4);flex-wrap:wrap;margin-top:var(--sg-s-5);padding-top:var(--sg-s-5);border-top:1px solid var(--sg-rule-2)}
.sg-specplate__price{display:grid;gap:2px}
.sg-specplate__price .sg-num{font-size:1.75rem;font-weight:500;line-height:1.1;color:var(--sg-text)}
.sg-specplate__manual{position:relative;margin-top:var(--sg-s-4)}
@media (max-width:599.98px){
  .sg-specplate{padding:var(--sg-s-4) var(--sg-s-4) var(--sg-s-5)}
}

/* ---------- footer (§7.3) ---------- */
.sg-signature-footer{background:var(--sg-band);border-top:1px solid var(--sg-rule);padding:var(--sg-s-8) 0 var(--sg-s-6)}
.sg-footer-grid{display:grid;grid-template-columns:1.25fr 1fr .9fr;gap:var(--sg-s-7) var(--sg-s-8)}
.sg-footer-brandlink{display:inline-flex;align-items:center;gap:12px;color:var(--sg-text);text-decoration:none}
.sg-footer-brandlink:hover{color:var(--sg-text);text-decoration:none}
.sg-footer-brandlink>span{font:600 .9375rem/1 var(--sg-engraved);letter-spacing:.2em;text-transform:uppercase}
.sg-footer-copy{margin-top:var(--sg-s-4);color:var(--sg-text-2);max-width:32ch;font-size:1rem}
.sg-footer-label{margin-bottom:var(--sg-s-4);color:var(--sg-brass)}
.sg-footer-nav{display:grid;grid-template-columns:repeat(2,max-content);gap:10px 40px}
.sg-footer-nav a{color:var(--sg-text-2);text-decoration:none;font-weight:500;font-size:1rem;line-height:1.5;padding:2px 0;
  transition:color var(--sg-dur-fast)}
.sg-footer-nav a:hover{color:var(--sg-text);text-decoration:underline;text-decoration-color:var(--sg-rule-2);text-underline-offset:.3em}
.sg-footer-paytitle{color:var(--sg-text);font-weight:600}
.sg-footer-methods{list-style:none;margin-top:var(--sg-s-3);display:grid;gap:6px}
.sg-footer-methods li{position:relative;padding-left:16px;font:500 .8125rem/1.45 var(--sg-mono);color:var(--sg-text-3)}
.sg-footer-methods li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--sg-brass)}
.sg-footer-bottom{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;margin-top:40px;padding-top:var(--sg-s-5);
  border-top:1px solid var(--sg-rule-n);font-size:.875rem;line-height:1.5;color:var(--sg-text-3)}
.sg-footer-medical{color:var(--sg-text-2);font-weight:600}
.sg-footer-wide{flex-basis:100%}
.sg-footer-wide a{margin-left:6px;color:var(--sg-text-2);text-decoration:underline;text-decoration-color:var(--sg-rule-2);text-underline-offset:.25em}
.sg-footer-wide a:hover{color:var(--sg-text);text-decoration-color:currentColor}
@media (max-width:899.98px){
  .sg-footer-grid{grid-template-columns:1fr 1fr}
  .sg-footer-brand{grid-column:1/-1}
}
@media (max-width:559.98px){
  .sg-signature-footer{padding-top:var(--sg-s-7)}
  .sg-footer-grid{grid-template-columns:1fr;gap:var(--sg-s-6)}
  .sg-footer-nav{gap:6px 32px}
  .sg-footer-methods{gap:4px}
  .sg-footer-bottom{flex-direction:column;gap:6px;margin-top:var(--sg-s-6)}
}

/* ---------- motion preferences (§5.7) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}