/* ==================================================================
   KEMET — PRIMARY NAICS / PSC CODES  (procurement band)
   ------------------------------------------------------------------
   Changes from the supplied package:
   - Package palette dropped entirely. #E4B243/#EDC866 -> --gold/--gold-lit,
     #846413 -> --gold-ink, #121212 -> --dark-txt, #F8F8F6 -> --paper,
     #DFDFD8 -> --paper-line, and the olive-tinted neutrals #59594F /
     #55554D / #44443E (green channel >= red and >= blue) -> --mid-txt.
     No hex is declared locally; every colour is a site token.
   - Package shipped BarlowCondensed-Bold.ttf. Dropped. Headings use the
     self-hosted Oswald var, code column uses Roboto Mono (tabular figures),
     body uses Barlow. @font-face urls are ROOT-RELATIVE so this stylesheet
     also works when the section is embedded in an iframe.
   - No background is painted. This block is designed to sit INSIDE the
     existing cream .band-codes section and inherit its ground; the package
     assumed it owned the band and painted its own near-white.
   - Fallback token block below only fires if the host page has not defined
     the site tokens (i.e. standalone / iframe use).
   No external requests, no imagery, no JS.
   ================================================================== */

@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:600;font-display:swap;src:url(/fonts/barlow-600.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");}

#kemet-procurement{
  /* Fallbacks only — the host page's :root wins wherever it defines these. */
  --gold:var(--kp-fb-gold,#C9A227);
  --gold-lit:var(--kp-fb-gold-lit,#E8C765);
  --gold-ink:var(--kp-fb-gold-ink,#806316);
  --paper-line:var(--kp-fb-paper-line,#E0D6C0);
  --dark-txt:var(--kp-fb-dark-txt,#16181C);
  --mid-txt:var(--kp-fb-mid-txt,#4E5157);
  --ink:var(--kp-fb-ink,#050608);
  --f-display:"Oswald","Arial Narrow",sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Roboto Mono",ui-monospace,"Courier New",monospace;

  box-sizing:border-box;
  color:var(--dark-txt);
  font-family:var(--f-body);
  width:100%;
}
#kemet-procurement *{box-sizing:border-box;}

/* three columns on desktop: heading | table | capability note + CTA */
#kemet-procurement .kp-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  align-items:start;
  min-width:0;
}

/* ---- left column: eyebrow + display heading ---- */
#kemet-procurement .kp-kicker{
  display:flex;align-items:center;gap:14px;
  margin:0 0 clamp(10px,1.2vw,18px);
  font-family:var(--f-mono);font-weight:400;
  font-size:var(--fs-mono,clamp(11px,10.27px + .19vw,14px));
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-ink);           /* 5.7:1 on --paper */
}
#kemet-procurement .kp-kicker::after{
  content:"";flex:0 0 clamp(38px,5vw,92px);height:1px;
  background:var(--gold);opacity:.55;
}
#kemet-procurement h2{
  font-family:var(--f-display);font-weight:700;
  /* One step down from the other band heads (--fs-3xl). At 71px this title
     stacked four words deep in its 319px column; --fs-2xl lands it on the
     two lines the explicit <br> asks for. It is the longest heading on the
     page, so it is the one that needs the smaller step. */
  /* Shared section-heading contract - see kig-sections.css .why-kig h2.
     NOTE: this heading sits in the narrow .9fr track of a 3-column layout,
     so at the shared size it wraps to three lines rather than the two it
     had when it was sized to its column. Size coherence was chosen over the
     line count; widening the track is the alternative. */
  font-size:var(--fs-3xl);
  line-height:.94;letter-spacing:-.018em;
  margin:0;max-width:18ch;color:var(--dark-txt);
}

/* ---- centre column: the codes table (real table semantics kept) ---- */
#kemet-procurement table{
  width:100%;border-collapse:collapse;text-align:left;
}
#kemet-procurement caption{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
#kemet-procurement thead th{
  font-family:var(--f-mono);font-weight:400;
  font-size:var(--fs-mono,clamp(11px,10.27px + .19vw,14px));
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);
  padding-bottom:clamp(9px,1vw,14px);
  border-bottom:1px solid var(--gold-deep,#8A6E14);
}
#kemet-procurement thead th:first-child{width:8.5em;}
#kemet-procurement tbody tr{border-top:1px solid var(--paper-line);}
#kemet-procurement tbody tr:last-child{border-bottom:1px solid var(--paper-line);}
#kemet-procurement tbody tr:hover{background:rgba(201,162,39,.10);}
#kemet-procurement tbody th,
#kemet-procurement tbody td{
  padding-block:clamp(11px,1.2vw,17px);vertical-align:baseline;
}
#kemet-procurement tbody th{
  padding-right:clamp(10px,1.4vw,20px);
  font-family:var(--f-mono);font-weight:600;
  font-size:var(--fs-md,clamp(16px,15.27px + .19vw,19px));
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--gold-ink);   /* 5.7:1 */
}
#kemet-procurement tbody td{
  font-size:var(--fs-sm,clamp(15px,14.39px + .16vw,17.5px));
  line-height:1.34;color:var(--mid-txt);      /* 7.5:1 on --paper */
}
#kemet-procurement .kp-more{
  margin-top:clamp(14px,1.6vw,22px);
  padding-top:clamp(11px,1.2vw,16px);
  border-top:1px solid var(--paper-line);
  font-family:var(--f-display);font-weight:600;color:var(--gold-ink);
  font-size:var(--fs-mono,clamp(11px,10.27px + .19vw,14px));
  letter-spacing:.11em;text-transform:uppercase;line-height:1.3;
}

/* ---- right column: capability-statement note + CTA ---- */
#kemet-procurement .kp-action{
  border-left:1px solid var(--gold-deep,#8A6E14);
  padding:4px 0 4px clamp(18px,2.5vw,36px);
  display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);
  min-width:0;
}
#kemet-procurement .kp-note{
  margin:0;max-width:26ch;
  font-size:var(--fs-sm,clamp(15px,14.39px + .16vw,17.5px));
  line-height:1.5;color:var(--mid-txt);
}
#kemet-procurement .kp-cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:290px;padding:15px 18px;
  background:var(--gold);color:var(--ink);      /* 10.1:1 */
  border:1px solid var(--gold);text-decoration:none;
  font-family:var(--f-display);font-weight:700;
  font-size:var(--fs-label,clamp(13px,12.27px + .19vw,16px));
  line-height:1.2;letter-spacing:.065em;text-transform:uppercase;
  transition:background .2s var(--ease,ease),border-color .2s var(--ease,ease);
}
#kemet-procurement .kp-arrow{
  font-family:var(--f-body);font-size:1.25em;font-weight:400;
  flex:none;transition:transform .2s var(--ease,ease);
}
#kemet-procurement .kp-cta:hover{background:var(--gold-lit);border-color:var(--gold-lit);}
#kemet-procurement .kp-cta:hover .kp-arrow{transform:translate(2px,-2px);}
#kemet-procurement .kp-cta:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}

/* ---- responsive: 2-up at tablet, single column on small screens ---- */
@media (max-width:1000px){
  #kemet-procurement .kp-layout{grid-template-columns:1fr 1fr;}
  #kemet-procurement .kp-action{
    grid-column:1 / -1;border-left:0;border-top:1px solid var(--gold-deep,#8A6E14);
    padding:clamp(18px,2.4vw,24px) 0 0;
    flex-direction:row;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:18px;
  }
  #kemet-procurement .kp-note{max-width:44ch;}
}
@media (max-width:680px){
  #kemet-procurement .kp-layout{grid-template-columns:1fr;gap:clamp(22px,4vw,28px);}
  #kemet-procurement .kp-action{flex-direction:column;align-items:stretch;}
  #kemet-procurement thead th:first-child{width:6.6em;}
  #kemet-procurement .kp-cta{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  #kemet-procurement .kp-cta,
  #kemet-procurement .kp-arrow{transition:none;}
}

/* ---- reveal stagger ----
   The .rv/.in classes and the transition itself come from the page's reveal
   system (html.anim .rv -> opacity 0 + translateY, .rv.in -> settled), which
   also removes .in when the element leaves the viewport, so this replays every
   time the reader comes back. All this adds is the cascade: rows arrive one
   after another instead of as a single block.

   Scoped under html.anim so nothing here exists when motion is off — the
   page's contract is that everything is visible by default and hidden states
   live only inside html.anim. Delay only; no layout property is animated. */
/* No stagger delays here: the page's reveal JS assigns transition-delay as an
   INLINE style (0ms, 70ms, 140ms, ...) as each .rv element is revealed, and an
   inline style beats any stylesheet rule. The cascade is already handled. */

/* A table row is not a normal block box; translateY on <tr> is honoured by
   current engines but the rows also need to not collapse the row-group, so the
   reveal offset is kept small here rather than the page default 22px. */
html.anim #kemet-procurement tbody tr.rv{transform:translateY(10px)}
html.anim #kemet-procurement tbody tr.rv.in{transform:none}

@media (prefers-reduced-motion:reduce){
  html.anim #kemet-procurement tbody tr.rv,
  html.anim #kemet-procurement tbody tr.rv.in{transform:none;transition-delay:0s}
}