/* ==================================================================
   KEMET — "UNDER ONE COMMAND" closing band
   Supplied component (kemet-command-package/dist/styles.css), brought
   in line with the site's established conventions:
     - palette swapped to the GLB-sourced golds (--gold #C9A227 /
       --gold-lit #E8C765); the package's #E4B243 / #EDC866 are gone.
     - every green-cast near-black replaced with a warm equivalent
       (121512 -> #0B0906, 121212 -> #050608).
     - BarlowCondensed dropped for the site's self-hosted Oswald /
       Barlow / Roboto Mono. @font-face is declared here with
       ROOT-RELATIVE urls so the band also works inside an iframe.
   All rules are scoped to .kemet-command. No body/reset styling here —
   the standalone demo page carries its own.
   ================================================================== */

/* Root-relative so these resolve from any embed path. Duplicating the
   family declarations is harmless: the browser dedupes identical
   src urls, and the band must not depend on the host page. */
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;src:url(/fonts/oswald-var.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-400.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-500.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-600.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-700.woff2) format("woff2");}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/robotomono-var.woff2) format("woff2");}

/* Local fallbacks so the band is self-sufficient when it is embedded
   somewhere that does not define the site tokens. On preview-v3.html
   the :root values win, and they are identical. */
.kemet-command{
  --kc-gold:var(--gold,#C9A227);
  --kc-gold-lit:var(--gold-lit,#E8C765);
  --kc-gold-deep:var(--gold-deep,#8A6E14);
  --kc-ink:var(--ink,#050608);
  --kc-panel:#0B0906;          /* warm near-black; was 121512 (green cast) */
  --kc-sand:var(--sand,#F2EDE3);
  --kc-sand-dim:var(--sand-dim,#A9A396);
  --kc-gold-a40:rgba(201,162,39,.40);
  --kc-gold-a10:rgba(201,162,39,.10);
}

*,::before,::after{box-sizing:border-box;}

.kemet-command{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--kc-panel);color:var(--kc-sand);
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  min-height:480px;width:100%;
  border-top:1px solid var(--kc-gold-a40);
}
.kemet-inner{position:relative;z-index:2;padding:clamp(28px,3.2vw,44px) clamp(18px,3.4vw,60px) clamp(28px,2.6vw,36px);max-width:1500px;margin:auto;}

/* --- brand lockup: real Kemet mark, filled (never stroked) --- */
.kemet-brand{display:inline-flex;align-items:center;gap:14px;color:inherit;text-decoration:none;letter-spacing:.21em;font-size:20px;font-family:"Oswald","Arial Narrow",sans-serif;font-weight:600;}
.kemet-brand svg{width:46px;height:46px;flex:none;fill:var(--kc-gold);stroke:none;}
.kemet-brand small{display:block;font-family:"Roboto Mono",ui-monospace,"Courier New",monospace;font-size:9px;font-weight:400;letter-spacing:.15em;margin-top:6px;color:var(--kc-sand-dim);}

/* --- headline + circular CTA --- */
.kemet-main{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:22px 0 100px;}
.kemet-main h2,.kemet-main h1{
  font-family:"Oswald","Arial Narrow",sans-serif;
  /* shared section-heading contract - see kig-sections.css .why-kig h2 */
  font-size:var(--fs-3xl);font-weight:700;text-transform:uppercase;
  letter-spacing:-.018em;line-height:.94;margin:0;max-width:16ch;color:var(--kc-sand);
}
.kemet-brief{display:flex;align-items:center;gap:24px;text-decoration:none;color:var(--kc-sand);white-space:nowrap;font-family:"Roboto Mono",ui-monospace,"Courier New",monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;}
.kemet-orbit{display:grid;place-items:center;border:1px solid var(--kc-gold);outline:1px solid var(--kc-gold-a40);outline-offset:8px;border-radius:50%;width:120px;height:120px;transition:background .25s,transform .25s;position:relative;background:rgba(11,9,6,.55);backdrop-filter:blur(2px);}
/* Connector arc into the CTA. Was a 500x120 box anchored to the circle's LEFT
   with a border-bottom curve, so the line swept in horizontally from the side.
   The reference has it descending from the TOP of the band: this is a tall box
   sitting above and left of the circle, showing only its right edge, with a
   full top-right radius so that edge is vertical where it meets the circle and
   curves away to the upper left as it reaches the top. */
.kemet-orbit::before{content:'';position:absolute;width:320px;height:420px;right:58%;bottom:100%;border-right:1px solid var(--kc-gold);border-radius:0 100% 0 0 / 0 100% 0 0;pointer-events:none;opacity:.55;}
.kemet-orbit svg{width:45px;fill:none;stroke:var(--kc-gold-lit);stroke-width:1.2;}
.kemet-brief:hover .kemet-orbit{background:var(--kc-gold-a10);transform:translateX(4px);}
.kemet-brief:hover{color:var(--kc-gold-lit);}

/* --- contact rail + colophon --- */
.kemet-bottom{display:flex;justify-content:space-between;align-items:end;gap:28px;font-size:13px;color:var(--kc-sand-dim);}
.kemet-bottom address{font-style:normal;display:flex;flex-wrap:wrap;gap:14px;}
.kemet-bottom a{color:inherit;text-decoration:none;transition:color .25s;}
.kemet-bottom address>*+*{border-left:1px solid var(--kc-gold-a40);padding-left:14px;}
.kemet-bottom a:hover{color:var(--kc-gold-lit);}
.kemet-bottom p{margin:0;text-align:right;font-family:"Roboto Mono",ui-monospace,"Courier New",monospace;font-size:11px;line-height:1.9;letter-spacing:.08em;text-transform:uppercase;}
.kemet-bottom small{display:block;font-size:11px;letter-spacing:.08em;}

/* --- globe art layer --- */
.kemet-art{position:absolute;inset:0;z-index:0;pointer-events:none;}
.kemet-fallback{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 65%;transition:opacity .6s;}
.kemet-webgl{position:absolute;inset:0;}
.kemet-webgl canvas{width:100%;height:100%;display:block;}
.kemet-command.has-globe .kemet-fallback{opacity:0;}
/* Scrim was 121512 (green). Now the warm panel colour, so text keeps
   its measured contrast against a single known ground. */
.kemet-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#0B0906 0%,rgba(11,9,6,.87) 28%,rgba(11,9,6,.19) 60%,rgba(11,9,6,0) 100%),
             linear-gradient(0deg,rgba(11,9,6,.85),transparent 22%);}

/* Moved from bottom-right (package default) to top-right: the colophon
   block now runs four lines and the button was crowding it. */
.kemet-motion{position:absolute;z-index:3;top:14px;right:24px;background:rgba(11,9,6,.9);color:var(--kc-gold-lit);border:0;padding:5px 9px;font-family:"Roboto Mono",ui-monospace,"Courier New",monospace;font-size:11px;letter-spacing:.08em;cursor:pointer;}
.kemet-command a:focus-visible,.kemet-motion:focus-visible{outline:2px solid var(--kc-gold);outline-offset:6px;}

@media(min-width:1500px){.kemet-command{min-height:560px;}.kemet-main{margin-bottom:145px;}}
@media(max-width:1000px){
  .kemet-main{align-items:flex-start;flex-direction:column;gap:36px;margin-bottom:65px;}
  .kemet-main h2,.kemet-main h1{font-size:clamp(40px,7.4vw,74px);}
  .kemet-orbit{height:72px;width:72px;}.kemet-orbit::before{display:none;}.kemet-brief{gap:22px;}
  .kemet-bottom{align-items:start;}
  .kemet-art{left:-25%;width:150%;}
  .kemet-shade{background:linear-gradient(90deg,rgba(11,9,6,.93),rgba(11,9,6,.4)),linear-gradient(0deg,#0B0906,transparent 50%);}
}
@media(max-width:600px){
  .kemet-inner{padding:28px 18px 38px;}
  .kemet-main h2,.kemet-main h1{font-size:clamp(34px,9.6vw,58px);}
  .kemet-bottom{flex-direction:column;gap:24px;}
  .kemet-bottom address{flex-direction:column;gap:10px;}
  .kemet-bottom address>*+*{border:0;padding:0;}
  .kemet-bottom p{text-align:left;}
  .kemet-main{margin-bottom:60px;}
  .kemet-art{left:-85%;width:235%;}
  .kemet-brand{font-size:17px;}
}
@media(prefers-reduced-motion:reduce){.kemet-orbit,.kemet-fallback{transition:none;}}

/* ==================================================================
   LIGHT THEME
   Unlike the governance band, .kemet-command is NOT one of preview-v3's
   "dark island" hosts, so the ambient --gold/--gold-lit/--ink/--sand/
   --sand-dim tokens it already reads via var(--gold,#C9A227) etc. above
   flip to the page's real light values on their own — no rule needed for
   anything already routed through those fallbacks (panel border, brand
   mark fill, headline, brief text, orbit ring + icon stroke + hover
   colour, contact rail text + hover, focus outlines).
   Only the handful of literals that never went through var() need a
   light counterpart: --kc-panel and the two --kc-gold-a* rgba tokens,
   plus the .kemet-orbit backdrop, .kemet-shade scrim and .kemet-motion
   chip, which hardcode rgba(11,9,6,...) (near-black) directly. The globe
   canvas and its fallback image are left untouched, as specified.
   ================================================================== */
[data-theme="light"] .kemet-command{
  --kc-panel:#DCD3BD;
  --kc-gold-a40:rgba(201,162,39,.48);
  --kc-gold-a10:rgba(201,162,39,.14);
}
[data-theme="light"] .kemet-orbit{background:rgba(228,220,201,.55);}
[data-theme="light"] .kemet-shade{
  background:linear-gradient(90deg,#E4DCC9 0%,rgba(228,220,201,.87) 28%,rgba(228,220,201,.19) 60%,rgba(228,220,201,0) 100%),
             linear-gradient(0deg,rgba(228,220,201,.85),transparent 22%);
}
[data-theme="light"] .kemet-motion{background:rgba(228,220,201,.9);}
@media(max-width:1000px){
  [data-theme="light"] .kemet-shade{background:linear-gradient(90deg,rgba(228,220,201,.93),rgba(228,220,201,.4)),linear-gradient(0deg,#E4DCC9,transparent 50%);}
}

/* --- CTA relocated to bottom-left ---
   It previously sat opposite the headline on the right (.kemet-main was a
   space-between flex row). It now sits on its own, left-aligned, between the
   headline and the contact rail. .kemet-main therefore holds only the
   headline and no longer needs to be a flex row.

   The connector arc is switched off in this position: it descends from the top
   of the band, and with the circle down here that line would run straight
   through the headline. Re-enable it if the CTA ever moves back up-right. */
.kemet-main{display:block;margin:22px 0 44px;}
.kemet-brief{display:inline-flex;margin:0 0 clamp(28px,3vw,52px);}
.kemet-orbit::before{display:none;}
@media(max-width:1000px){ .kemet-main{margin-bottom:32px;} }

/* ---- inline newsletter, above the legal bar ----
   Two-column on desktop (label left, field right) collapsing at 760px, and
   separated from .kemet-bottom by the same hairline that band already uses.
   Colours come from the page tokens, not the --kc-* set, so it follows the
   light/dark theme with everything else. */
.kc-nl{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(16px,3vw,56px);align-items:end;
  padding-bottom:clamp(18px,2.2vw,30px);margin-bottom:clamp(18px,2.2vw,30px);
  border-bottom:1px solid var(--line-d);
}
@media (max-width:760px){.kc-nl{grid-template-columns:1fr;}}
.kc-nl-eyebrow{
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-txt);margin:0 0 8px;
}
.kc-nl h3{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-lg);line-height:1.04;color:var(--sand);margin:0;
}
.kc-nl-form{display:flex;flex-wrap:wrap;gap:clamp(9px,1vw,14px);align-items:flex-end;}
.kc-nl-field{flex:1 1 240px;}
.kc-nl-field label{
  display:block;font-family:var(--f-mono);font-size:var(--fs-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dim);margin-bottom:6px;
}
.kc-nl-field input{
  width:100%;font-family:var(--f-body);font-size:var(--fs-md);color:var(--sand);
  background:transparent;border:0;border-bottom:1px solid var(--line-d);
  padding:clamp(8px,.9vw,13px) 2px;caret-color:var(--gold-txt);
  transition:border-color .3s var(--ease);
}
.kc-nl-field input::placeholder{color:var(--sand-dim);opacity:.7;}
.kc-nl-field input:focus{outline:none;border-bottom-color:var(--gold);}
.kc-nl-form button{
  flex:none;font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-label);letter-spacing:.13em;
  padding:clamp(10px,1vw,15px) clamp(16px,1.5vw,26px);
  background:var(--gold);color:var(--gold-fg);border:0;cursor:pointer;
  transition:background .3s var(--ease);
}
.kc-nl-form button:hover{background:var(--gold-lit);}
.kc-nl-status{
  flex:1 0 100%;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sand-dim);min-height:1.2em;margin:0;
}
@media print{ .kc-nl{display:none !important;} }

/* ---- light mode: the briefing dial ----
   At 1px the #C9A227 ring is ~2.4:1 on the cream ground and the arrow was
   --gold-lit (#E8C765), which is ~1.6:1 - the control was barely there.
   The ring keeps the brand yellow but doubles in weight so the boundary
   actually reads, and the arrow (the part that has to be legible, not just
   present) drops to the deep gold at ~4.8:1. Hover fills with a yellow wash
   rather than the near-invisible 10% tint. */
[data-theme="light"] .kemet-orbit{
  border-width:2px;border-color:#C9A227;
  outline-color:rgba(201,162,39,.55);
  background:rgba(251,248,241,.75);
}
[data-theme="light"] .kemet-orbit svg{stroke:#8A6E14;stroke-width:1.6;}
[data-theme="light"] .kemet-orbit::before{border-right-color:rgba(201,162,39,.5);}
[data-theme="light"] .kemet-brief:hover .kemet-orbit{background:rgba(201,162,39,.22);}
[data-theme="light"] .kemet-brief:hover{color:#6B5320;}

/* ---- light mode: legal/contact bar ----
   Measured 5.99:1 against the flat band colour, which passes AA - but this
   text sits ON TOP of the globe artwork, and the measurement does not see
   that. Wherever the globe is bright the real contrast is well under the
   number, which is why the row read as faint. Darkened to ~9:1 against the
   band so it still holds up over the lit parts of the artwork. */
[data-theme="light"] .kemet-bottom{color:#000;}
[data-theme="light"] .kemet-bottom a{color:#000;}
[data-theme="light"] .kemet-bottom a:hover{color:var(--gold-txt);}

/* Newsletter field label + placeholder sit on the same artwork as the legal
   bar, so the flat-background measurement flatters them the same way. Same
   remedy: darken against the band so they survive the lit parts of the globe. */
[data-theme="light"] .kc-nl-field label{color:#000;}
[data-theme="light"] .kc-nl-field input{color:#000;}
[data-theme="light"] .kc-nl-field input::placeholder{color:#000;opacity:.72;}