/* ==========================================================================
   Quantum Ed — aligned to the site-wide system
   Typography, the nav dock and the team cards.

   Loaded after styles.css by quantum-ed.html. This began as a review variant
   at /quantum-ed-inter; that page was folded into /quantum-ed and removed.

   Type values come from the canonical kit, not re-derived:
   .claude/skills/whiteshield-design/whiteshield-kit.css

   Nav dock and team card values were read off the live site at a 1440px
   viewport, not from src/. Later CSS layers override the source chunks, so
   what ships differs from what the chunks say: the dock is 18px and 54px
   tall, not the 16px and 60px in src/chunks-merge/contacts/head.html.

   Layout, spacing, motion, the particle field and the blue metal gradient
   are untouched.
   ========================================================================== */

:root{
  /* One family for everything. The page had two: Palatino for display and
     Archivo for text. The site has one, and it is Inter. Both tokens now
     point at the kit's --sf stack, so all 32 rules that read them follow. */
  --serif:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   Display headings: kit .h-xl / .h-lg / .h-md
   Palatino carries a display size at weight 400. Inter does not: the site
   sets 700 on every heading, with negative tracking to close the gaps that
   opens up. Weight and tracking travel together here.
   -------------------------------------------------------------------------- */

/* .h-xl */
.h-hero{
  font-weight:700;
  font-size:clamp(40px,5.4vw,80px);
  letter-spacing:-.025em;
  line-height:1.05;
}

/* .h-lg */
.h-section,
.close__statement{
  font-weight:700;
  font-size:clamp(32px,4.2vw,60px);
  letter-spacing:-.022em;
  line-height:1.08;
}

/* .h-md */
.h-minor,
.card-label,
.panel__state-title,
.champ-card__role,
.close__product{
  font-weight:700;
  font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.018em;
  line-height:1.15;
}

/* The design system's note: at these line-heights the g and y glyphs clip
   against the box, so every tight heading buys itself a little room. */
.h-hero,
.h-section,
.close__statement{padding-bottom:.06em}

/* --------------------------------------------------------------------------
   Highlights
   The kit sets `.h-xl em, .h-lg em, .h-md em { font-style: normal }`: the
   highlight is part of the heading and is never italic. It also has to be
   upright here for a second reason. The site loads Inter without an italic
   axis, so an italic rule makes the browser slant the upright face itself,
   and a faked slant at 80px is visibly wrong. Every <em> on this page is a
   .metal, so this one rule covers all of them.
   The gradient, its single-sweep behaviour and the nowrap fix are unchanged.
   -------------------------------------------------------------------------- */
.metal{
  font-style:normal;
  font-weight:700;
  /* The .09em of right padding existed so the italic serif's overhang was not
     clipped by background-clip:text. Upright Inter has no overhang, and the
     padding shows up as a gap before the following punctuation: "future self ."
     rather than "future self." */
  padding-right:0;
}

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */

/* kit .lede: was a flat 18px/1.65, now scales and sits tighter. The 62ch
   measure was already correct and is left alone. */
.lede{
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.45;
}

/* kit .eyebrow. The page set 15px uppercase at .20em; the site sets 14px at
   600 weight and almost no tracking, in sentence case. This is the most
   visible non-heading change on the page. */
.eyebrow{
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
}

/* Figures: tabular so the number does not change width as it counts. */
.panel__state-num{
  font-weight:700;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}

/* The pull quote follows the display face like every other serif rule did. */
.pull-quote{
  font-weight:400;
  letter-spacing:-.018em;
}

/* ==========================================================================
   Site tokens

   Brought in under their own names rather than overwriting the page's own.
   The page's --navy is #0E3D73; the site's is #003B5C. Overwriting it would
   retint buttons, links and the journey panel, which is well past the nav
   and the team cards.
   ========================================================================== */
:root{
  --ws-ink:#0E2433;
  --ws-navy:#003B5C;
  --ws-turq:#24B6D1;
  --ws-muted:#7C8E9A;
}

/* ==========================================================================
   Nav dock

   Nothing here any more. The page's bespoke .site-header dock was replaced
   with the shared site nav: markup from src/chrome/nav.html, styles in
   site-nav.css, behaviour in site-nav.js. styles.css still carries the old
   .site-header rules, but no element matches them.
   ========================================================================== */

/* ==========================================================================
   Team cards

   The site's people card is a white tile with a square full-bleed photo on
   top and the name and role left-aligned underneath. No border, no glass, no
   circle, and the photographs are in colour.
   ========================================================================== */

.team-grid,
.team-grid--row{--team-gap:14px}

.team-card,
.team-grid--row .team-card{
  display:block;
  text-align:left;
  padding:0;
  overflow:hidden;
  /* The site's .person rule defines this hairline, then a later layer sets the
     width to 0 because the people page band is #EDF0F3, dark enough to hold a
     white card on its own. This section's band is #F4F6F7, and a white card on
     it is about 2% of contrast: invisible. The hairline comes back, using the
     site's own --rule value. */
  border:1px solid #DCE5EA;
  border-radius:18px;
  background:#FFFFFF;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
}

.team-card:hover{
  transform:translateY(-4px);
  border-color:var(--ws-turq);
  box-shadow:0 22px 60px rgba(2,24,37,.12);
}

/* Square, full-bleed, colour. The circle, the ring, the placeholder gradient
   and the greyscale filter all go. */
.team-card__portrait,
.team-grid--row .team-card__portrait{
  display:block;
  width:100%;
  aspect-ratio:1;
  margin:0;
  border-radius:0;
  background:#EDF0F3;
  box-shadow:none;
}
.team-card__portrait img{filter:none;object-position:50% 22%}

/* The site wraps name and role in a .bd with its own padding. This markup has
   no wrapper, so the padding is split across the two paragraphs.
   Both selectors carry .team-grid--row because styles.css:1661 sets a smaller
   size on that compound selector, which outranks a bare .team-card__name. */
.team-card__name,
.team-grid--row .team-card__name{
  padding:16px 20px 0;
  margin:0;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.3;
  color:var(--ws-ink);
}
.team-card__role,
.team-grid--row .team-card__role{
  padding:3px 20px 22px;
  margin:0;
  font-size:13px;
  font-weight:400;
  letter-spacing:normal;
  line-height:1.4;
  color:var(--ws-muted);
}

/* The site's people grid goes 8 columns, then 4 below 980px, then 2 below
   560px. This page has five people, so the row stays five across, but the
   mobile end matches: two up, not one. styles.css:1898 sets 100% on the
   compound selector, so this has to carry it too. */
@media (max-width:560px){
  .team-card,
  .team-grid--row .team-card{
    flex:0 1 calc((100% - var(--team-gap)) / 2);
  }
}

/* The five supplied photographs are monochrome files, not colour images that
   a filter was greying out: sampled channel spread is 0 to 21 out of 255. The
   filter is off, so this is as close to the site's colour treatment as the
   current files allow. Colour needs new files. */