/* Anicon theme.
   Banded editorial system, following the VCAT and VMBD landing pages:
   full-width bands alternating paper / white / iron, ruled section headers,
   Montserrat headings with Roboto Condensed labels, Share Tech Mono for
   figures. Content stays editable in the block editor. */

:root {
  --paper: var(--wp--preset--color--paper);
  --paper-2: var(--wp--preset--color--paper-2);
  --paper-rule: var(--wp--preset--color--paper-rule);
  --ink: var(--wp--preset--color--ink);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --ink-faint: var(--wp--preset--color--ink-faint);
  --iron: var(--wp--preset--color--iron);
  --iron-2: var(--wp--preset--color--iron-2);
  --iron-ink: var(--wp--preset--color--iron-ink);
  --iron-soft: var(--wp--preset--color--iron-soft);
  --iron-rule: var(--wp--preset--color--iron-rule);
  --mark: var(--wp--preset--color--mark);
  --mark-deep: var(--wp--preset--color--mark-deep);
  /* The logo's own red, kept separate from the page palette on purpose. */
  --brand-red: #FF0000;
  --brand-red-deep: #D40000;
  --label: var(--wp--preset--font-family--label);
  --mono: var(--wp--preset--font-family--mono);
  --display: var(--wp--preset--font-family--display);
}

/* ---------- bands ---------------------------------------------------- */

.an-band { padding-block: clamp(3.25rem, 7vw, 4.75rem); }
.an-band-light { background: var(--paper); }
.an-band-white { background: var(--paper-2); }
.an-band-iron { background: var(--iron); color: var(--iron-ink); }
.an-band-iron :is(h1, h2, h3, h4, h5) { color: var(--iron-ink); }
.an-band-iron p, .an-band-iron li { color: var(--iron-soft); }
.an-band-iron a:not(.wp-element-button) { color: var(--mark); }
.an-band-iron .wp-block-separator { border-color: var(--iron-rule); color: var(--iron-rule); }

/* ---------- section header ------------------------------------------- */

.an-sechead {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
  margin-bottom: 2.5rem;
}
.an-sechead .an-place {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
  padding-top: 0.6rem;
  border-top: 2px solid var(--mark-deep);
  color: var(--mark-deep);
  margin: 0;
}
.an-band-iron .an-sechead .an-place { color: var(--mark); border-top-color: var(--mark); }
.an-sechead h2, .an-sechead h1 { margin: 0; }
.an-sechead .an-lede { margin: 0.85rem 0 0; }

/* the same label used on its own, above a heading */
.an-place-solo {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mark-deep);
  border-top: 2px solid var(--mark-deep);
  padding-top: 0.6rem;
  display: inline-block;
  margin: 0 0 1rem;
}
.an-band-iron .an-place-solo { color: var(--mark); border-top-color: var(--mark); }

.an-lede {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
}
.an-band-iron .an-lede { color: var(--iron-soft); }

/* ---------- hero ------------------------------------------------------ */

.an-hero h1 { margin: 0.85rem 0 0; }
.an-hero h1 em { font-style: normal; color: var(--mark); }
.an-band-light .an-hero h1 em, .an-band-white .an-hero h1 em { color: var(--mark-deep); }
.an-hero .an-lede { margin-top: 1.4rem; font-size: var(--wp--preset--font-size--lg); max-width: 54ch; }
.an-hero .wp-block-buttons { margin-top: 2rem; }

/* ---------- capability figures, rule separated not boxed -------------- */

.an-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--paper-rule);
}
.an-band-iron .an-figures { border-top-color: var(--iron-rule); }
.an-figure {
  padding: 1.4rem 1.6rem 1.4rem 0;
  border-right: 1px solid var(--paper-rule);
}
.an-band-iron .an-figure { border-right-color: var(--iron-rule); }
.an-figure:last-child { border-right: none; }
.an-figure b {
  display: block;
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--mark-deep);
  font-variant-numeric: tabular-nums;
}
.an-band-iron .an-figure b { color: var(--mark); }
.an-figure b .u { font-size: 0.95rem; letter-spacing: 0.02em; margin-left: 0.2rem; color: var(--ink-faint); }
.an-band-iron .an-figure b .u { color: var(--iron-soft); }
.an-figure span {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.72rem;
  line-height: 1.42;
  color: var(--ink-faint);
}
.an-band-iron .an-figure span { color: var(--iron-soft); }

/* ---------- spec list ------------------------------------------------- */

.an-specs { margin: 0; border-top: 1px solid var(--paper-rule); }
.an-band-iron .an-specs { border-top-color: var(--iron-rule); }
.an-spec {
  display: grid;
  grid-template-columns: minmax(0, 175px) minmax(0, 1fr);
  gap: 0.35rem 2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--paper-rule);
}
.an-band-iron .an-spec { border-bottom-color: var(--iron-rule); }
.an-spec dt {
  font-family: var(--label);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.2rem;
}
.an-band-iron .an-spec dt { color: var(--iron-soft); }
.an-spec dd { margin: 0; color: var(--ink-soft); }
.an-band-iron .an-spec dd { color: var(--iron-soft); }
.an-spec dd strong { color: var(--ink); font-weight: 500; }
.an-band-iron .an-spec dd strong { color: var(--iron-ink); }

/* ---------- part plates ----------------------------------------------- */

.an-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.25rem;
  margin: 0;
}
.an-part {
  margin: 0;
  background: linear-gradient(180deg, #2E363D 0%, #23292E 100%);
  border: 1px solid var(--iron-rule);
  border-radius: 3px;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
}
.an-band-light .an-part, .an-band-white .an-part {
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF1F3 100%);
  border-color: var(--paper-rule);
}
.an-part img { display: block; width: 100%; height: 170px; object-fit: contain; margin: 0 auto 1.1rem; }
.an-part b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.28;
  color: var(--iron-ink);
}
.an-band-light .an-part b, .an-band-white .an-part b { color: var(--ink); }
.an-part span {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--iron-soft);
}
.an-band-light .an-part span, .an-band-white .an-part span { color: var(--ink-faint); }

/* ---------- step / reason cards --------------------------------------- */

.an-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; }
.an-card {
  background: var(--paper-2);
  border: 1px solid var(--paper-rule);
  border-top: 3px solid var(--mark-deep);
  border-radius: 3px;
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
}
.an-band-white .an-card { background: var(--paper); }
.an-band-iron .an-card { background: var(--iron-2); border-color: var(--iron-rule); border-top-color: var(--mark); }
.an-card .an-n {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--mark-deep);
  display: block;
  margin-bottom: 0.65rem;
}
.an-band-iron .an-card .an-n { color: var(--mark); }
.an-card h3 { font-size: 1.03rem; margin: 0 0 0.45rem; line-height: 1.28; }
.an-card p { margin: 0 0 1rem; font-size: 0.92rem; color: var(--ink-soft); }
.an-band-iron .an-card p { color: var(--iron-soft); }
.an-card .an-more {
  margin-top: auto;
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--mark-deep);
}
.an-band-iron .an-card .an-more { color: var(--mark); }
.an-card .an-more::after { content: " \2192"; }

/* ---------- table ------------------------------------------------------ */

.an-tablewrap { overflow-x: auto; margin: 0; }
.an-table { border-collapse: collapse; width: 100%; min-width: 580px; font-size: 0.94rem; }
.an-table th {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
  color: var(--mark-deep);
  padding: 0 1.1rem 0.7rem 0;
  border-bottom: 2px solid var(--mark-deep);
  vertical-align: bottom;
}
.an-band-iron .an-table th { color: var(--mark); border-bottom-color: var(--mark); }
.an-table td {
  padding: 1rem 1.1rem 1rem 0;
  border-bottom: 1px solid var(--paper-rule);
  vertical-align: top;
  color: var(--ink-soft);
  line-height: 1.5;
}
.an-band-iron .an-table td { border-bottom-color: var(--iron-rule); color: var(--iron-soft); }
.an-table tr:last-child td { border-bottom: none; }
.an-table td strong { color: var(--ink); font-weight: 500; }
.an-band-iron .an-table td strong { color: var(--iron-ink); }
.an-table .num { font-family: var(--mono); font-size: 1.02em; letter-spacing: 0.01em; color: var(--ink); }
.an-band-iron .an-table .num { color: var(--iron-ink); }

/* ---------- chips ------------------------------------------------------ */

.an-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.an-chip {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  border: 1px solid var(--paper-rule);
  background: var(--paper-2);
  padding: 0.45rem 0.75rem;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
}
.an-chip:hover { border-color: var(--mark-deep); color: var(--mark-deep); }
.an-band-iron .an-chip { background: var(--iron-2); border-color: var(--iron-rule); color: var(--iron-soft); }
.an-band-iron .an-chip:hover { border-color: var(--mark); color: var(--mark); }

/* ---------- note -------------------------------------------------------- */

.an-note {
  border-left: 3px solid var(--mark-deep);
  background: var(--paper-2);
  padding: 1.2rem 1.4rem;
}
.an-band-white .an-note { background: var(--paper); }
.an-band-iron .an-note { background: var(--iron-2); border-left-color: var(--mark); }
.an-note p { margin: 0; color: var(--ink-soft); }
.an-band-iron .an-note p { color: var(--iron-soft); }

/* ---------- figure plate ------------------------------------------------ */

.an-plate { border: 1px solid var(--paper-rule); border-radius: 4px; overflow: hidden; margin: 0; background: #DDE1E4; }
.an-band-iron .an-plate { border-color: var(--iron-rule); background: var(--iron-2); }
.an-plate img { display: block; width: 100%; height: auto; }
.an-plate figcaption {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--ink-faint);
  padding: 0.7rem 0.9rem;
  background: var(--paper-2);
  border-top: 1px solid var(--paper-rule);
}
.an-band-iron .an-plate figcaption { background: var(--iron); color: var(--iron-soft); border-top-color: var(--iron-rule); }

/* ---------- header / footer --------------------------------------------- */

.an-header {
  border-bottom: 1px solid var(--paper-rule);
  background: var(--paper-2);
  position: sticky; top: 0; z-index: 40;
}
.an-header .wp-block-navigation a:hover,
.an-header .wp-block-navigation .current-menu-item a { color: var(--mark-deep); }

.an-strap {
  font-family: var(--label);
  font-size: 0.73rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
}
.an-strap a { color: inherit; text-decoration: none; }
.an-strap a:hover { color: var(--mark-deep); }

.an-footer { background: var(--iron); color: var(--iron-soft); }
.an-footer :is(h2, h3, h4, h5, h6) { color: var(--iron-ink); }
.an-footer h6 { color: var(--mark); }
.an-footer p, .an-footer li { color: var(--iron-soft); }
.an-footer a { color: var(--iron-soft); text-decoration: none; }
.an-footer a:hover { color: var(--mark); }
.an-footer .an-strap { color: #7B8790; }
.an-footer .wp-block-separator { border-color: var(--iron-rule); color: var(--iron-rule); }

/* ---------- RFQ form ---------------------------------------------------- */

.an-rfq { margin: 0; }
.an-rfq fieldset {
  border: 1px solid var(--paper-rule);
  border-top: 3px solid var(--mark-deep);
  border-radius: 3px;
  background: var(--paper-2);
  padding: 1.6rem 1.6rem 1.75rem;
  margin: 0 0 1.25rem;
}
.an-rfq legend {
  font-family: var(--label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mark-deep);
  padding: 0 0.6rem;
  margin-left: -0.6rem;
}
.an-field { margin-bottom: 1.1rem; }
.an-field:last-child { margin-bottom: 0; }
.an-field label {
  display: block;
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.42rem;
}
.an-field .req { color: var(--mark-deep); }
.an-rfq :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 100%;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-rule);
  border-radius: 2px;
  padding: 0.66rem 0.75rem;
}
.an-rfq :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--mark-deep);
  box-shadow: 0 0 0 3px var(--wp--preset--color--mark-tint);
  background: var(--paper-2);
}
.an-rfq textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.an-rfq input[type="file"] {
  width: 100%;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.9rem;
  padding: 0.85rem;
  background: var(--paper);
  border: 1px dashed var(--paper-rule);
  border-radius: 2px;
}
.an-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 0 1.1rem; }
.an-hint { font-size: 0.82rem; color: var(--ink-faint); margin: 0.42rem 0 0; }
.an-check { margin-top: 1rem; }
.an-check label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; color: var(--ink-soft); }
.an-check input { margin-top: 0.3rem; }
.an-rfq-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.an-rfq-actions button {
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--paper-2);
  background: var(--mark-deep);
  border: 2px solid var(--mark-deep);
  border-radius: 2px;
  padding: 0.8rem 1.75rem;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.an-rfq-actions button:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.an-rfq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.an-rfq-error { border-left: 3px solid var(--mark-deep); background: var(--wp--preset--color--mark-tint); padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; }
.an-rfq-error p { margin: 0; color: var(--mark-deep); font-size: 0.94rem; }
.an-rfq-done { border-left: 3px solid var(--mark-deep); background: var(--paper-2); padding: 1.75rem 1.9rem; }
.an-rfq-done h2 { margin: 0.3rem 0 0.8rem; }
.an-rfq-done p:last-child { margin-bottom: 0; }

/* ---------- accessibility, print, responsive ----------------------------- */

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--mark-deep);
  outline-offset: 3px;
}
.skip-link:focus { background: var(--paper-2); color: var(--ink); padding: 0.6rem 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media print {
  .an-header, .an-footer, .wp-block-buttons, .an-rfq { display: none; }
  .an-band-iron { background: #fff; color: #000; }
  .an-band-iron :is(h1,h2,h3,h4,p,li) { color: #000; }
  .an-part { background: #fff; border-color: #999; }
  body { font-size: 11pt; }
}

@media (max-width: 782px) {
  .an-sechead { grid-template-columns: 1fr; gap: 0.9rem; }
  .an-spec { grid-template-columns: 1fr; gap: 0.2rem; }
  .an-figure { border-right: none; border-bottom: 1px solid var(--paper-rule); padding-right: 0; }
  .an-band-iron .an-figure { border-bottom-color: var(--iron-rule); }
  .an-part img { height: 150px; }
}

/* ---------- wordmark ------------------------------------------------------
   ANICON is set in Impact, which is a system font on Windows and macOS.
   Anton is loaded from Google Fonts as the substitute for machines without
   it; the two are close enough that the mark reads the same either way.
   Impact carries no bold or italic, so weight is never varied here.        */

.an-wordmark {
  display: inline-block;
  line-height: 0;            /* a lone replaced child otherwise sits on a descender gap */
  text-decoration: none;
}

/* The lockup, traced from the supplied artwork. It replaces the mark and the
   lettering together, and it is sized to lead: previously the company name was
   set smaller than the navigation beside it, so "Components" outweighed
   "ANICON", which is the wrong way round on any company's own website.

   Letters are always drawn over the red panel, so plain white is correct on
   any ground and one file serves the pale header and the iron footer alike. */
.an-lockup {
  display: block;
  height: 2.15rem;
  width: auto;
}
.an-footer .an-lockup { height: 2.55rem; }

.an-wordmark:hover .an-lockup { opacity: 0.85; }
.an-lockup, .an-wordmark:hover .an-lockup { transition: opacity 0.15s ease; }

@media (max-width: 520px) {
  .an-lockup { height: 1.6rem; }
}

/* ---------- hero band carrying a photograph -------------------------------
   The image sits behind the type rather than beside it, so the first thing a
   visitor meets is metal being cut. Eager loaded and high priority, because
   this is the largest contentful paint on the page.                        */

.an-hero-band { position: relative; overflow: hidden; background: var(--iron); }
.an-hero-band > .an-hero-bg {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.an-hero-band > .an-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.an-hero-band > .an-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(14,17,20,.94) 0%, rgba(14,17,20,.86) 42%, rgba(14,17,20,.42) 100%),
    linear-gradient(0deg, rgba(14,17,20,.75) 0%, rgba(14,17,20,0) 55%);
}
.an-hero-band > .wp-block-group,
.an-hero-band > .an-hero { position: relative; z-index: 1; }
.an-hero-band { color: var(--iron-ink); }
.an-hero-band :is(h1, h2, h3) { color: var(--iron-ink); }
.an-hero-band p { color: var(--iron-soft); }
.an-hero-band .an-place-solo { color: var(--mark); border-top-color: var(--mark); }
.an-hero-band .an-hero h1 em { color: var(--mark); }
.an-hero-band .an-figures { border-top-color: rgba(231,236,239,.22); }
.an-hero-band .an-figure { border-right-color: rgba(231,236,239,.22); }
.an-hero-band .an-figure b { color: var(--iron-ink); }
.an-hero-band .an-figure b .u,
.an-hero-band .an-figure span { color: var(--iron-soft); }

/* ---------- part plates, larger --------------------------------------- */

.an-parts { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.an-part img { height: 230px; }
.an-parts.is-wide { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.an-parts.is-wide .an-part img { height: 290px; }

/* ---------- inline diagrams -------------------------------------------- */

.an-figure-block { margin: 0; }
.an-figure-block svg { display: block; width: 100%; height: auto; }
.an-figure-block figcaption {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-top: 0.85rem;
}
.an-band-iron .an-figure-block figcaption { color: var(--iron-soft); }

@media (max-width: 640px) {
  .an-part img { height: 190px; }
  .an-hero-band > .an-hero-bg::after {
    background: linear-gradient(0deg, rgba(14,17,20,.95) 20%, rgba(14,17,20,.72) 100%);
  }
}

/* ---------- measure ------------------------------------------------------
   Prose stays at the reading measure. Anything visual or tabular takes the
   wide measure instead, because a five-up parts grid and a control chart
   both suffocate inside a 48rem column.                                   */

.an-band :is(.an-parts, .an-cards, .an-tablewrap, .an-figures,
              .an-figure-block, .an-plate, .an-chips) {
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}
.an-band .an-sechead { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.an-hero-band .an-hero,
.an-hero-band .an-figures { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }

/* the hero should feel like a hero without becoming a full screen of nothing */
.an-hero-band { padding-block: clamp(4rem, 9vw, 7rem); }
.an-hero-band .an-hero h1 { max-width: 20ch; }

/* ---------- small screens ------------------------------------------------ */

@media (max-width: 640px) {
  /* four stacked figures push the first section a screen and a half down */
  .an-figures { grid-template-columns: repeat(2, 1fr); }
  .an-figure { padding-right: 1rem; border-right: 1px solid var(--paper-rule); }
  .an-hero-band .an-figure { border-right-color: rgba(231,236,239,.22); }
  .an-figure:nth-child(2n) { border-right: none; padding-right: 0; }
  .an-figure b { font-size: 1.4rem; }

  /* a six stage flow at 340px is unreadable, so let it scroll instead */
  .an-figure-block { overflow-x: auto; }
  .an-figure-block svg { min-width: 700px; }
  .an-figure-block figcaption { min-width: 0; }
}

/* ---------- hero background must escape the constrained layout ------------
   WordPress caps every direct child of a constrained group at contentSize,
   and max-width applies to absolutely positioned elements as well. Without
   this the background figure is squeezed to the reading column and the photo
   is cover-cropped into a tall narrow strip.                              */

.an-hero-band > .an-hero-bg {
  max-width: none;
  width: auto;
  margin: 0;
}

/* ---------- header at laptop widths --------------------------------------
   Eight nav items plus the wordmark plus the button overrun a 1024 viewport
   and the row wraps. Tightening the nav rather than dropping an item, since
   every one of them is a page a buyer might want.                         */

@media (max-width: 1250px) {
  .an-header .wp-block-navigation { font-size: 0.86rem; letter-spacing: 0.02em; }
  .an-header .wp-block-navigation__container { gap: 0.95rem; }
  .an-header .wp-block-button__link { padding-left: 1.05rem; padding-right: 1.05rem; font-size: 0.8rem; }
  .an-lockup { height: 1.85rem; }
}
@media (max-width: 1080px) {
  .an-header .wp-block-navigation { font-size: 0.8rem; }
  .an-header .wp-block-navigation__container { gap: 0.7rem; }
  .an-lockup { height: 1.7rem; }
}

/* ---------- the run chart, plotted in time order --------------------------

   The chart argues something sequential: the process runs stable, it leans,
   and the lean is caught while every part is still good. Drawn in that order
   the argument makes itself.

   Only the trace, the samples and the call-out move. The frame, the limits and
   the capability window are never animated, and that is deliberate: the first
   version faded them in with `opacity`, which overrode the `fill-opacity` the
   tolerance band relies on and rendered it as a solid slab. Animated opacity
   and semantic opacity are kept apart here.

   The finished chart is also the default state, so a reader whose browser
   never runs the animation, whether from a reduced-motion setting or anything
   else, sees the complete chart rather than an empty frame.                  */

.an-chart.is-running .an-chart-trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: an-chart-draw 1.3s 0.25s backwards;
  animation-timing-function: linear;
}
.an-chart.is-running .an-chart-trace--drift {
  animation-duration: 0.9s;
  animation-delay: 1.4s;
}

/* Each sample carries its own index, so the stagger does not need to know how
   many samples there are.                                                    */
.an-chart.is-running .an-chart-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: an-chart-dot 0.3s backwards;
  animation-delay: calc(0.28s + var(--i, 0) * 0.072s);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.an-chart.is-running .an-chart-callout {
  animation: an-chart-in 0.45s 2.35s backwards;
}
.an-chart.is-running .an-chart-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: an-chart-ring 0.6s 2.3s backwards;
}

@keyframes an-chart-draw { from { stroke-dashoffset: 1; } }
@keyframes an-chart-in   { from { opacity: 0; } }
@keyframes an-chart-dot  { from { opacity: 0; transform: scale(0.2); } }
@keyframes an-chart-ring {
  0%   { opacity: 0; transform: scale(2.1); }
  60%  { opacity: 1; transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .an-chart .an-chart-trace,
  .an-chart .an-chart-dot,
  .an-chart .an-chart-callout,
  .an-chart .an-chart-ring {
    animation: none;
  }
  .an-chart .an-chart-trace { stroke-dashoffset: 0; }
}

/* ---------- component family cards ---------------------------------------

   Picking a family is recognition, not reading: the engineer is looking for
   the shape of the part in front of them. The photograph leads, the words
   confirm.

   The whole card is one link. That gives a large target and, more usefully,
   avoids the pair of adjacent links to the same place that a clickable image
   plus a clickable title would produce.

   Shots are given a fixed height and contained rather than cropped, because
   these are parts against a plain ground and cropping a machined component
   loses the very thing being recognised.                                    */

.an-famcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}

.an-famcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--paper-rule);
  border-top: 3px solid var(--mark-deep);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.an-band-white .an-famcard { background: var(--paper); }
.an-band-iron .an-famcard {
  background: var(--iron-2);
  border-color: var(--iron-rule);
  border-top-color: var(--mark);
}

.an-famcard-shot {
  display: block;
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF1F3 100%);
  border-bottom: 1px solid var(--paper-rule);
  padding: 1.15rem;
}
.an-band-iron .an-famcard-shot {
  background: linear-gradient(180deg, #2E363D 0%, #23292E 100%);
  border-bottom-color: var(--iron-rule);
}
.an-famcard-shot img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: contain;
}

.an-famcard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem 1.35rem 1.4rem;
}
.an-famcard-body h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink);
}
.an-band-iron .an-famcard-body h2 { color: var(--iron-ink); }
.an-famcard-body p {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.an-band-iron .an-famcard-body p { color: var(--iron-soft); }
.an-famcard-body .an-more { margin-top: auto; padding-top: 1rem; }

.an-famcard:hover {
  border-color: var(--mark-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 22, 28, 0.09);
}
.an-famcard:hover .an-more { text-decoration: underline; }
.an-famcard:focus-visible {
  outline: 2px solid var(--mark-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .an-famcard { transition: none; }
  .an-famcard:hover { transform: none; }
}

@media (max-width: 640px) {
  .an-famcard-shot img { height: 190px; }
}