/* sacredgeometry.io homepage, "Instrument" (DESIGN.md §9). Components and tokens live in system.css. */

/* ================= Plate I: hero + catalogue index (§9.2) ================= */
.sg-hero{position:relative;padding-block:clamp(24px,3.4vw,48px) clamp(40px,3.4vw,48px);isolation:isolate;overflow:hidden}
.sg-hero::before{content:"";position:absolute;z-index:-1;top:-72px;right:0;bottom:0;width:min(66vw,980px);pointer-events:none;
  background:radial-gradient(closest-side at 62% 40%,var(--sg-glow),transparent 74%)}
.sg-hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"copy figure" "index index";
  column-gap:var(--sg-s-8);align-items:center}
.sg-hero__copy{grid-area:copy}
.sg-index{grid-area:index}
.sg-hero__figure{grid-area:figure}
.sg-hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:var(--sg-s-5)}
.sg-hero__eyebrow .sg-roman{padding-right:14px;border-right:1px solid var(--sg-rule-2)}
.sg-hero h1{max-width:11em}
/* two-column hero: three fixed lines, sized so the longest ("Precision instruments") always fits its column,
   so line breaks never depend on which font (web font or metric fallback) is painted first */
@media (min-width:1024px){
  .sg-hero h1{font-size:min(var(--sg-step-4),calc((100vw - 144px) * .062));max-width:none;text-wrap:wrap}
  .sg-hero__line{display:block;white-space:nowrap}
}
.sg-hero__lede{margin-top:var(--sg-s-5);max-width:31em}
.sg-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sg-s-6)}
.sg-hero__note{display:flex;align-items:center;gap:10px;margin-top:var(--sg-s-5)}
.sg-hero__note::before{content:"";flex:none;width:18px;height:1px;background:var(--sg-brass)}
.sg-hero__figure{justify-self:end;width:min(100%,590px);margin:0}

/* engraved plate, Fig. 1 (§6.5) */
.sg-plate{width:100%;height:auto;overflow:visible}
.sg-plate .pl-main{fill:none;stroke:var(--sg-engrave);stroke-width:1.15}
.sg-plate .pl-heavy{stroke-width:1.7}
.sg-plate .pl-fine{fill:none;stroke:var(--sg-engrave-fine);stroke-width:.8}
.sg-plate .pl-mid{stroke-width:.95}
.sg-plate .pl-faint{fill:none;stroke:var(--sg-engrave-faint);stroke-width:.85}
.sg-plate .pl-dash{stroke-dasharray:3 4}
.sg-plate .pl-scale{fill:none;stroke:var(--sg-brass-hi);stroke-width:1}
.sg-plate .pl-alidade{fill:none;stroke:var(--sg-engrave-faint);stroke-width:.85}
.sg-plate .pl-alidade rect{fill:var(--sg-bg)}
/* SVG text is in viewBox units (640): 12 units render >= 10px wherever the annotations are shown (plate >= 536px) */
.sg-plate text{font-family:var(--sg-mono);font-size:12px;letter-spacing:.08em;fill:var(--sg-text-3)}
.sg-plate .pl-anno text{fill:var(--sg-text-2)}
.sg-plate .pl-anno .pl-anno--dim{fill:var(--sg-text-3)}
.sg-plate .pl-num text{font-size:12px;letter-spacing:.04em;fill:var(--sg-engrave-fine)}
.sg-plate text.pl-lbl,.sg-plate .pl-lbl text{font-family:var(--sg-display);font-style:italic;font-weight:600;font-size:17px;letter-spacing:0;fill:var(--sg-brass-hi);
  paint-order:stroke;stroke:var(--sg-bg);stroke-width:5px;stroke-linejoin:round}
.sg-plate text.pl-lbl--sm{font-size:16px}
.sg-plate .pl-letter text{font-family:var(--sg-display);font-style:italic;font-weight:600;font-size:16px;letter-spacing:0;fill:var(--sg-text-2);
  paint-order:stroke;stroke:var(--sg-bg);stroke-width:4px;stroke-linejoin:round}
.sg-plate .pl-dot circle,.sg-plate .pl-pts circle,.sg-plate .pl-dotc{fill:var(--sg-brass-hi)}
.sg-plate .pl-pin{fill:var(--sg-bg);stroke:var(--sg-brass-hi);stroke-width:1.2}
/* Vellum: stronger engraving (§5.1 light tokens) and every plate stroke x1.15 (§6.5) */
[data-theme="light"] .sg-plate .pl-main{stroke-width:1.32}
[data-theme="light"] .sg-plate .pl-heavy{stroke-width:1.96}
[data-theme="light"] .sg-plate .pl-fine{stroke-width:.92}
[data-theme="light"] .sg-plate .pl-mid{stroke-width:1.09}
[data-theme="light"] .sg-plate .pl-faint,[data-theme="light"] .sg-plate .pl-alidade{stroke-width:.98}
[data-theme="light"] .sg-plate .pl-scale{stroke:var(--sg-brass);stroke-width:1.15}
[data-theme="light"] .sg-plate .pl-pin{stroke:var(--sg-brass);stroke-width:1.38}
[data-theme="light"] .sg-plate text.pl-lbl,[data-theme="light"] .sg-plate .pl-lbl text{fill:var(--sg-brass)}
[data-theme="light"] .sg-plate .pl-dot circle,[data-theme="light"] .sg-plate .pl-pts circle,[data-theme="light"] .sg-plate .pl-dotc{fill:var(--sg-brass)}
[data-theme="light"] .sg-plate .pl-num text{fill:var(--sg-engrave)}
@media (prefers-reduced-motion:no-preference){
  .sg-plate .d{stroke-dasharray:1;stroke-dashoffset:1;animation:sg-pl-draw 1.6s var(--sg-ease) forwards;animation-delay:calc(var(--i) * 45ms + 120ms)}
  .sg-plate .pl-fade{opacity:0;animation:sg-pl-fade 1.1s ease forwards;animation-delay:1.15s}
}
@keyframes sg-pl-draw{to{stroke-dashoffset:0}}
@keyframes sg-pl-fade{to{opacity:1}}

/* catalogue index */
.sg-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(32px,4vw,56px);border-block:1px solid var(--sg-rule)}
.sg-index__item{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;
  padding:16px 18px 16px 0;color:var(--sg-text);text-decoration:none}
.sg-index__item+.sg-index__item{padding-left:18px;border-left:1px solid var(--sg-rule-n)}
.sg-index__item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--sg-brass);transform:scaleX(0);transform-origin:left;transition:transform var(--sg-dur-row) var(--sg-ease)}
.sg-index__item:hover::after{transform:scaleX(1)}
.sg-index__item:hover .sg-index__title{color:var(--sg-brass-hi)}
[data-theme="light"] .sg-index__item:hover .sg-index__title{color:var(--sg-brass)}
.sg-index__thumb{width:84px;aspect-ratio:4/3;border-radius:2px}
.sg-stage--glyph{display:grid;place-items:center}
.sg-stage--glyph .sg-glyph{width:50px;height:50px}
.sg-glyph__ring{fill:none;stroke:rgba(201,163,90,.55);stroke-width:8}
.sg-glyph__trace{fill:none;stroke:#e3c47f;stroke-width:10;stroke-linejoin:round}
.sg-index__body{display:grid;gap:3px;min-width:0}
.sg-index__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sg-index__body .sg-roman{font-size:.75rem;letter-spacing:.22em}
.sg-index__price{font-size:.8125rem;color:var(--sg-brass);white-space:nowrap}
.sg-index__title{font-weight:650;font-size:1rem;line-height:1.25;transition:color var(--sg-dur-fast)}
.sg-index__data{text-transform:none;letter-spacing:.02em}

/* ================= Plate II: SG102 (§9.3) ================= */
.sg-sg102__grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:var(--sg-s-7);align-items:start}
.sg-sg102__stage{display:block}
.sg-callouts{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.sg-callout circle{fill:rgba(12,11,9,.35);stroke:#e3c47f;stroke-width:2.5}
.sg-callout path{fill:none;stroke:#e3c47f;stroke-width:1.6}
.sg-callout text{font:600 22px var(--sg-mono);letter-spacing:.1em;fill:#efe7d6;paint-order:stroke;stroke:rgba(10,9,8,.82);stroke-width:7px;stroke-linejoin:round}
.sg-callout text.dim{fill:#e3c47f;font-weight:500}
/* phones: numbered markers on the photo + a legend under it (callout text would be too small) */
.sg-marker{position:absolute;z-index:3;display:none;place-items:center;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:#e3c47f;color:#15110a;font:600 .75rem/1 var(--sg-mono);box-shadow:0 0 0 3px rgba(10,9,8,.55)}
.sg-marker--key{position:static;display:inline-grid;margin:0;flex:none;box-shadow:none}
.sg-sg102__legend{display:none;list-style:none;margin-top:14px;border-top:1px solid var(--sg-rule-n)}
.sg-sg102__legend li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--sg-rule-n);font-size:.9375rem;color:var(--sg-text-2)}
.sg-sg102__legend b{color:var(--sg-text);font-weight:600}
.sg-sg102__cap{margin-top:14px}
.sg-sg102__left .sg-lscale{margin-top:var(--sg-s-6);padding:var(--sg-s-5) var(--sg-s-5) var(--sg-s-4);border:1px solid var(--sg-rule);border-radius:var(--sg-radius-2)}
.sg-sg102__aside{margin-top:var(--sg-s-4);font-size:.9375rem;color:var(--sg-text-2);max-width:44ch}

/* logarithmic scale */
.sg-lscale{position:relative}
.sg-lscale__cap{display:flex;justify-content:space-between;gap:6px 12px;margin-bottom:12px;flex-wrap:wrap}
.sg-lscale__plot{position:relative;height:30px}
.sg-lscale__ticks{position:absolute;left:0;right:0;bottom:0;width:100%;height:20px;overflow:visible}
.sg-lscale__ticks path{fill:none;stroke:var(--sg-engrave-fine);stroke-width:1;vector-effect:non-scaling-stroke}
.sg-lscale__bar{position:absolute;top:0;height:6px;border-radius:1px;background:linear-gradient(90deg,var(--sg-brass-lo),var(--sg-brass-hi) 40%,var(--sg-brass-hi) 70%,var(--sg-brass-lo))}
[data-theme="light"] .sg-lscale__bar{background:linear-gradient(90deg,var(--sg-brass-hi),var(--sg-brass) 40%,var(--sg-brass) 70%,var(--sg-brass-hi))}
.sg-lscale__stop{position:absolute;top:-3px;width:1px;height:33px;background:var(--sg-brass-hi)}
[data-theme="light"] .sg-lscale__stop{background:var(--sg-brass)}
.sg-lscale__labels{position:relative;height:18px;margin-top:6px}
.sg-lscale__labels span{position:absolute;transform:translateX(-50%);font:500 .75rem/1 var(--sg-mono);color:var(--sg-text-3);white-space:nowrap}
.sg-lscale__labels span:first-child{transform:none}
.sg-lscale__labels span:last-child{transform:translateX(-100%)}
.sg-lscale__unit{display:none}

/* ================= Plate III: Rodin coils (§9.4) ================= */
.sg-coilkey{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);gap:var(--sg-s-7);align-items:center;
  padding:var(--sg-s-5);margin-bottom:40px;border:1px solid var(--sg-rule);border-radius:var(--sg-radius-2);background:var(--sg-surface);box-shadow:var(--sg-elev-1)}
.sg-coilkey__media .sg-stage{width:100%}
[data-theme="light"] .sg-coilkey__media .sg-stage{width:calc(100% - 16px)}
.sg-coilkey__caption{margin-top:var(--sg-s-3);color:var(--sg-text-2);font-size:.9375rem;max-width:72ch}
.sg-coilkey__keys{margin-top:var(--sg-s-5);border-top:1px solid var(--sg-rule)}
.sg-coilkey__keys>div{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--sg-rule-n)}
.sg-coilkey__keys dt{margin:0}
.sg-coilkey__keys dd{color:var(--sg-text-2)}
.sg-coilkey__keys dd b{color:var(--sg-text);font-weight:650}
.sg-glyphkey{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--sg-rule-2);border-radius:22px;
  font:600 1.0625rem/1 var(--sg-engraved);letter-spacing:.06em;color:var(--sg-brass-hi)}
.sg-glyphkey--wide{font:500 .875rem/1 var(--sg-mono);letter-spacing:0}
[data-theme="light"] .sg-glyphkey{color:var(--sg-brass)}
.sg-coilkey__listing{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:var(--sg-s-5);padding-top:var(--sg-s-4);border-top:1px solid var(--sg-rule)}
.sg-coilkey__name{font-weight:600;font-size:1.0625rem}
.sg-coilkey__listing .sg-coil__price{margin-right:auto}

.sg-coils__grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sg-s-6) var(--sg-s-5)}
.sg-coil{display:flex;flex-direction:column;color:var(--sg-text);text-decoration:none}
.sg-coil__body{display:grid;gap:4px;padding:14px 2px 0}
.sg-coil__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sg-coil__model{font:600 .8125rem/1 var(--sg-engraved);letter-spacing:.16em;color:var(--sg-brass);white-space:nowrap}
.sg-coil__price{font-size:1rem;color:var(--sg-text)}
.sg-coil__name{font-weight:600;font-size:1.0625rem;line-height:1.35;font-variant-numeric:lining-nums;transition:color var(--sg-dur-fast)}
.sg-coil:hover .sg-coil__name{color:var(--sg-brass-hi)}
[data-theme="light"] .sg-coil:hover .sg-coil__name{color:var(--sg-brass)}
.sg-coils__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sg-s-4) var(--sg-s-5);flex-wrap:wrap;margin-top:var(--sg-s-6);padding-top:var(--sg-s-5);border-top:1px solid var(--sg-rule-n)}
.sg-coils__note{color:var(--sg-text-2);font-size:.9375rem;max-width:68ch}

/* ================= Plate IV: special order (§9.5) ================= */
.sg-section--vault{background:radial-gradient(60% 50% at 85% 0%,rgba(208,139,91,.08),transparent 70%),var(--sg-band);border-block:1px solid var(--sg-rule-n)}
[data-theme="light"] .sg-section--vault{background:radial-gradient(60% 50% at 85% 0%,rgba(148,73,31,.07),transparent 70%),var(--sg-band)}
.sg-section--vault .sg-plate-label .sg-roman,.sg-section--vault .sg-plate-label .sg-anno{color:var(--sg-copper)}
.sg-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 var(--sg-s-7);border:1px solid var(--sg-rule);border-radius:var(--sg-radius-2)}
.sg-terms>div{padding:18px 20px}
.sg-terms>div+div{border-left:1px solid var(--sg-rule)}
.sg-terms dt{color:var(--sg-copper);margin-bottom:6px}
.sg-terms dd{color:var(--sg-text);font-size:.9375rem;line-height:1.5}
.sg-so__grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sg-s-6) var(--sg-s-5)}
.sg-so{display:flex;flex-direction:column;height:100%;color:var(--sg-text);text-decoration:none}
.sg-so__body{display:grid;gap:5px;padding-top:14px}
.sg-so__cat{color:var(--sg-copper)}
.sg-so__name{font-weight:650;font-size:1.0625rem;line-height:1.3;transition:color var(--sg-dur-fast)}
.sg-so:hover .sg-so__name{color:var(--sg-brass-hi)}
[data-theme="light"] .sg-so:hover .sg-so__name{color:var(--sg-brass)}
.sg-so__spec{font-size:.9375rem;line-height:1.45;color:var(--sg-text-2)}
.sg-so__price{font-size:.9375rem;color:var(--sg-text);margin-top:2px}
.sg-cats{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:var(--sg-s-7);padding-top:var(--sg-s-5);border-top:1px solid var(--sg-rule-n)}
.sg-cats__row{display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.sg-cats a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--sg-edge);border-radius:var(--sg-radius-1);
  color:var(--sg-text-2);text-decoration:none;font-weight:500;font-size:.9375rem;transition:border-color var(--sg-dur-fast),color var(--sg-dur-fast),background var(--sg-dur-fast)}
.sg-cats a:hover{border-color:var(--sg-brass);color:var(--sg-text);background:var(--sg-notice-bg)}

/* ================= Plate V: Frequency Atlas (§9.6) ================= */
.sg-atlas__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:var(--sg-s-8);align-items:center}
.sg-scope{position:relative;width:100%;max-width:440px;justify-self:center}
.sg-scope__face{border-radius:50%}
.sg-scope__svg{width:100%;height:auto}
.sg-scope .sc-face{fill:var(--sg-stage)}
.sg-scope .sc-ring{fill:none;stroke:#c9a35a;stroke-width:1.4}
.sg-scope .sc-ring--fine{stroke:rgba(201,163,90,.30);stroke-width:1}
.sg-scope .sc-tick{fill:none;stroke:rgba(201,163,90,.6);stroke-width:1}
.sg-scope .sc-reticle{fill:none;stroke:rgba(201,163,90,.22);stroke-width:1}
.sg-scope .sc-trace{fill:none;stroke:#e9cd8c;stroke-width:1.6;stroke-linejoin:round}
.sg-scope .sc-trace--glow{stroke:rgba(227,196,127,.22);stroke-width:7;filter:blur(3px)}
.sg-scope .sc-anno{font:500 12.5px var(--sg-mono);letter-spacing:.12em;fill:#cfc6b4}
.sg-scope .sc-anno--dim{fill:#a39985}
/* the instrument face keeps its dark brass ring in Vellum; a keyline mounts it on the page */
[data-theme="light"] .sg-scope .sc-ring{stroke:#5c420f}
[data-theme="light"] .sg-scope__face{box-shadow:none;filter:drop-shadow(0 18px 28px rgba(48,34,10,.25))}
.sg-scope__pause{position:absolute;right:0;bottom:-28px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;
  border:1px solid var(--sg-edge);border-radius:var(--sg-radius-pill);background:var(--sg-surface);color:var(--sg-text-2);cursor:pointer;
  font:500 .75rem/1 var(--sg-mono);letter-spacing:.06em;text-transform:uppercase;transition:color var(--sg-dur-fast),border-color var(--sg-dur-fast)}
.sg-scope__pause:hover{color:var(--sg-text);border-color:var(--sg-brass)}
.sg-scope__pause .sg-i{width:16px;height:16px}
.sg-scope__pause .p-play{display:none}
.sg-scope__pause[aria-pressed="true"] .p-play{display:block}
.sg-scope__pause[aria-pressed="true"] .p-pause{display:none}
.sg-scope.is-static .sg-scope__pause{display:none}
.sg-atlas__copy .sg-lede{margin-top:var(--sg-s-4)}
.sg-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--sg-s-6);border-top:1px solid var(--sg-rule)}
.sg-facts>div{padding:14px 0;border-bottom:1px solid var(--sg-rule-n)}
.sg-facts>div:nth-child(odd){padding-right:16px}
.sg-facts dt{margin-bottom:4px}
.sg-facts dd{font-weight:500}
.sg-facts dd.sg-num{font-size:1.25rem;line-height:1.3;color:var(--sg-brass-hi)}
[data-theme="light"] .sg-facts dd.sg-num{color:var(--sg-brass)}
.sg-atlas__actions{display:flex;align-items:center;gap:var(--sg-s-4) var(--sg-s-5);flex-wrap:wrap;margin-top:var(--sg-s-6)}
.sg-atlas__safety{font-size:.875rem;line-height:1.5;color:var(--sg-text-3);max-width:34ch}

/* Atlas chart (>=768px only) */
.sg-achart{margin-top:var(--sg-s-7);padding:28px var(--sg-s-6);border:1px solid var(--sg-rule);border-radius:var(--sg-radius-2);background:var(--sg-surface);box-shadow:var(--sg-elev-1)}
.sg-achart__cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:var(--sg-s-3);margin-bottom:var(--sg-s-2);border-bottom:1px solid var(--sg-rule)}
.sg-achart__row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sg-s-5);align-items:center;min-height:40px;border-bottom:1px solid var(--sg-rule-n)}
.sg-achart__row--axis{border-bottom:0;align-items:start;padding-top:6px}
.sg-achart__label{display:flex;flex-direction:column;gap:1px;font-weight:600;font-size:.9375rem;line-height:1.25}
.sg-achart__label .sg-anno{text-transform:none;letter-spacing:.02em;font-weight:500}
.sg-achart__plot{position:relative;height:26px}
.sg-achart__plot--axis{height:auto}
.sg-achart__plot--axis .sg-lscale__ticks{position:relative;display:block;height:16px}
.sg-achart__span{position:absolute;top:50%;height:1px;background:var(--sg-brass);opacity:.55}
.sg-achart__row--all .sg-achart__span{opacity:.25}
.sg-achart__plot i{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--sg-brass-hi);box-shadow:0 0 0 1.5px var(--sg-surface)}
[data-theme="light"] .sg-achart__plot i{background:var(--sg-brass)}
.sg-achart__density{position:absolute;inset:0;width:100%;height:100%}
.sg-achart__density path{stroke:var(--sg-brass-hi);stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}
[data-theme="light"] .sg-achart__density path{stroke:var(--sg-brass)}

/* ================= Plate VI: Journal (§9.7) ================= */
.sg-journal__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sg-s-7)}
.sg-jfeature__link,.sg-jentry{display:block;color:var(--sg-text);text-decoration:none}
.sg-jfeature .sg-jentry__meta{margin-top:var(--sg-s-4)}
.sg-jentry__meta{display:flex;flex-wrap:wrap;gap:6px 16px}
.sg-jentry__meta span:first-child{color:var(--sg-brass)}
.sg-jfeature__title{margin-top:10px;font:500 clamp(1.625rem,1.3rem + 1vw,2.125rem)/1.12 var(--sg-display);text-wrap:balance;font-variant-numeric:lining-nums;transition:color var(--sg-dur-fast)}
.sg-jentry__title{margin-top:8px;font:500 1.5rem/1.15 var(--sg-display);text-wrap:balance;font-variant-numeric:lining-nums;transition:color var(--sg-dur-fast)}
.sg-jfeature__link:hover .sg-jfeature__title,.sg-jentry:hover .sg-jentry__title{color:var(--sg-brass-hi)}
[data-theme="light"] .sg-jfeature__link:hover .sg-jfeature__title,[data-theme="light"] .sg-jentry:hover .sg-jentry__title{color:var(--sg-brass)}
.sg-jentry__desc{margin-top:8px;color:var(--sg-text-2);font-size:.9375rem;max-width:56ch}
.sg-jlist{list-style:none;border-top:1px solid var(--sg-rule)}
.sg-jlist li{border-bottom:1px solid var(--sg-rule)}
.sg-jentry{padding:18px 0 20px}
.sg-journal__all{margin-top:var(--sg-s-6)}

/* ================= Plate VII: use & evidence, questions, contact (§9.8) ================= */
.sg-standards__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sg-s-8);align-items:start}
.sg-statement{padding-left:var(--sg-s-5);border-left:2px solid var(--sg-brass)}
.sg-statement p{font:500 clamp(1.5rem,1.15rem + 1.25vw,2.125rem)/1.22 var(--sg-display);color:var(--sg-text);text-wrap:pretty;font-variant-numeric:lining-nums}
.sg-statement footer{margin-top:var(--sg-s-4);color:var(--sg-text-3)}
.sg-standards__also{margin-top:var(--sg-s-6);color:var(--sg-text-2);max-width:52ch}
.sg-accordion__title{font:600 .75rem/1.3 var(--sg-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--sg-brass);margin-bottom:var(--sg-s-4)}
.sg-accordion{border-top:1px solid var(--sg-rule);margin-bottom:var(--sg-s-5)}
.sg-accordion details{border-bottom:1px solid var(--sg-rule)}
.sg-accordion summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.0625rem;line-height:1.4;transition:color var(--sg-dur-fast)}
.sg-accordion summary::-webkit-details-marker{display:none}
.sg-accordion summary:hover{color:var(--sg-brass-hi)}
[data-theme="light"] .sg-accordion summary:hover{color:var(--sg-brass)}
.sg-accordion__x{position:relative;width:14px;height:14px;flex:none}
.sg-accordion__x::before,.sg-accordion__x::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:var(--sg-brass)}
.sg-accordion__x::after{transform:rotate(90deg)}
@media (prefers-reduced-motion:no-preference){.sg-accordion__x::after{transition:transform 200ms var(--sg-ease)}}
.sg-accordion details[open] .sg-accordion__x::after{transform:rotate(0)}
.sg-accordion details p{padding:0 0 20px;color:var(--sg-text-2);max-width:62ch}

.sg-contact-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--sg-s-7);align-items:center;
  margin-top:var(--sg-s-7);padding:var(--sg-s-6);border:1px solid var(--sg-rule-2);border-radius:var(--sg-radius-2);background:var(--sg-surface);box-shadow:var(--sg-elev-2)}
.sg-contact-cta::before{content:"";position:absolute;inset:6px;border:1px solid var(--sg-rule-n);border-radius:2px;pointer-events:none}
.sg-contact-cta__head p{margin-top:var(--sg-s-3);color:var(--sg-text-2);font-size:.9375rem}
.sg-contact-cta__topics{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sg-contact-cta__topics a{display:grid;gap:6px;height:100%;padding:16px;border:1px solid var(--sg-rule);border-radius:var(--sg-radius-1);
  color:var(--sg-text);text-decoration:none;transition:border-color var(--sg-dur-fast),background var(--sg-dur-fast)}
.sg-contact-cta__topics a:hover{border-color:var(--sg-brass);background:var(--sg-notice-bg)}
.sg-contact-cta__topics .sg-roman{text-transform:lowercase;font-size:.75rem}
.sg-contact-cta__t{font-weight:650}

/* the last plate sits directly on the footer */
.page-home .sg-standards{padding-bottom:var(--sg-s-9)}

/* ================= responsive ================= */
@media (min-width:1024px) and (max-width:1279.98px){
  /* the copy column is ~465px at 1024: keep both CTAs on one row, so a late web-font swap never re-wraps them */
  .sg-hero__actions{flex-wrap:nowrap;gap:10px}
  .sg-hero__actions .sg-btn{padding:0 16px}
  .sg-plate .pl-anno,.sg-plate .pl-num{display:none}
  .sg-callout text{font-size:26px}   /* the stage is narrowest here: keep the callouts >= 10px rendered */
}
@media (max-width:1199.98px){
  .sg-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-index__item:nth-child(3){border-left:0;padding-left:0}
  .sg-index__item:nth-child(n+3){border-top:1px solid var(--sg-rule-n)}
}
@media (max-width:1023.98px){
  .sg-hero::before{top:auto;left:0;right:0;bottom:0;width:auto;height:min(100vw,620px);background:radial-gradient(closest-side at 50% 50%,var(--sg-glow),transparent 72%)}
  .sg-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "index" "figure"}
  .sg-hero__figure{justify-self:center;width:min(100%,560px);margin-top:var(--sg-s-7)}
  .sg-sg102__grid,.sg-atlas__grid,.sg-journal__grid,.sg-standards__grid{grid-template-columns:minmax(0,1fr)}
  .sg-standards__grid{gap:var(--sg-s-7)}
  .sg-so__grid,.sg-coils__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-contact-cta{grid-template-columns:minmax(0,1fr);gap:var(--sg-s-5)}
  .sg-atlas__grid{gap:var(--sg-s-6)}
  .sg-scope{max-width:400px}
  .sg-contact-cta{margin-top:var(--sg-s-7)}
}
@media (max-width:767.98px){
  .sg-terms{grid-template-columns:1fr}
  .sg-terms>div+div{border-left:0;border-top:1px solid var(--sg-rule)}
  .sg-achart{display:none}
  .sg-contact-cta__topics{grid-template-columns:1fr}
  .sg-contact-cta__topics a{grid-template-columns:30px 1fr;align-items:baseline;column-gap:10px}
  .sg-contact-cta__topics .sg-anno{grid-column:2}
}
@media (max-width:639.98px){
  .sg-hero__actions .sg-btn{flex:1 1 100%}
  .sg-index{grid-template-columns:minmax(0,1fr)}
  .sg-index__item,.sg-index__item+.sg-index__item{padding:12px 0;border-left:0}
  .sg-index__item+.sg-index__item{border-top:1px solid var(--sg-rule-n)}
  .sg-index__item:nth-child(3){padding-left:0}
  .sg-hero__figure{width:min(100%,264px)}
  /* the plate is decorative and small here: drop every SVG label that would render under 10px */
  .sg-plate .pl-anno,.sg-plate .pl-num,.sg-plate .pl-lbl,.sg-plate text.pl-lbl,.sg-plate .pl-letter{display:none}
  .sg-callouts{display:none}
  .sg-marker{display:grid}
  .sg-marker--key{display:inline-grid}
  .sg-sg102__legend{display:block}
  .sg-coilkey{grid-template-columns:minmax(0,1fr);gap:var(--sg-s-5);padding:var(--sg-s-4)}
  .sg-coilkey__media{max-width:min(240px,100%)}
  .sg-sg102__left .sg-lscale{padding:var(--sg-s-4)}
  .sg-sg102__legend li{padding:8px 0}
  .sg-coilkey__keys>div{grid-template-columns:72px 1fr}
  .sg-coils__grid{gap:var(--sg-s-5) var(--sg-s-3)}
  .sg-coil__name{font-size:.9375rem}
  .sg-coil__row{flex-wrap:wrap;gap:4px 8px}
  .sg-so__grid{gap:var(--sg-s-5) var(--sg-s-3)}
  .sg-scope__pause{position:static;display:flex;margin:var(--sg-s-4) auto 0;width:max-content}
  .sg-jentry__desc{display:none}
  .sg-jentry__title{font-size:1.375rem}
  .sg-jentry{padding:16px 0 18px}
  .sg-contact-cta{padding:var(--sg-s-5);margin-top:var(--sg-s-6)}
  .sg-contact-cta__topics a{padding:12px 14px;gap:2px}
  .sg-coilkey{margin-bottom:var(--sg-s-6)}
  .sg-journal__all{margin-top:var(--sg-s-5)}
  .sg-standards__grid{gap:40px}
  .sg-coil__body{gap:2px}
  .sg-coilkey__keys>div{padding:10px 0}
  .sg-terms>div{padding:14px 16px}
  .sg-jentry{padding:14px 0 16px}
  .sg-jfeature__title{font-size:1.5rem}
  .sg-journal__grid{gap:var(--sg-s-5)}
  /* the plate renders at ~264/640 scale here: thicken the linework so no stroke falls below ~0.7px on screen */
  .sg-plate .pl-main{stroke-width:2.2}
  .sg-plate .pl-heavy{stroke-width:3}
  .sg-plate .pl-fine{stroke-width:1.6}
  .sg-plate .pl-mid{stroke-width:1.8}
  .sg-plate .pl-faint,.sg-plate .pl-alidade{stroke-width:1.5}
  .sg-plate .pl-scale{stroke-width:1.8}
  [data-theme="light"] .sg-plate .pl-main{stroke-width:2.5}
  [data-theme="light"] .sg-plate .pl-heavy{stroke-width:3.45}
  [data-theme="light"] .sg-plate .pl-fine{stroke-width:1.84}
  [data-theme="light"] .sg-plate .pl-mid{stroke-width:2.07}
  [data-theme="light"] .sg-plate .pl-faint,[data-theme="light"] .sg-plate .pl-alidade{stroke-width:1.72}
  [data-theme="light"] .sg-plate .pl-scale{stroke-width:2.07}
}
@media (max-width:599.98px){
  .sg-cats{display:grid;gap:12px}
  .sg-cats__row{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:2px 0 4px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .sg-cats__row::-webkit-scrollbar{display:none}
  .sg-cats__row a{flex:none;scroll-snap-align:start}
  .sg-cats__row a:last-child{margin-right:28px}
  .sg-so__name{font-size:.9375rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .sg-so__spec{display:none}
  .sg-so__price{font-size:.875rem}
}