/* ==========================================================================
   FIVER — Fitment Ledger
   modes.css — one layout grammar per page type
   --------------------------------------------------------------------------
   This file is the answer to "don't make every page look the same".

   Each page type gets its own composition, not just its own colour:

     home     COVER      a full-bleed dark masthead + a poster band
     category INDEX      a dense fitment ledger with a permanent filter rail
     product  DOSSIER    a split page: bright gallery beside a dark data panel
     article  READING    a narrow column with marginalia, set in serif
     news     TIMELINE   a magazine index with oversized date blocks
     contact  DESK       a work-order form on the left, contact cards on the right
     search   LOOK-UP    a utilitarian, mono-heavy results console
     about    ESSAY      a photo-plate essay with a company timeline
     404      SIGNAL     a dead-end plate with recovery routes

   The shared shell (shell.css) frames them all, so the site still reads as
   one brand while no two sections repeat each other's composition.
   ========================================================================== */

/* ==========================================================================
   MODE: home — "COVER"
   ========================================================================== */
.cover {
  position: relative;
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(199, 115, 45, .16) 0%, rgba(199, 115, 45, 0) 58%),
    linear-gradient(168deg, #262C34 0%, #1A1F25 58%, #14181D 100%);
  color: #EEF1F4;
  overflow: hidden;
}
.cover::after {
  /* a faint engineering grid, the ledger's ruling */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}
.cover__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 92px;
}
.cover__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-orange-lt);
  margin-bottom: 26px;
}
.cover__eyebrow::before {
  content: '';
  width: 34px; height: 1px;
  background: var(--brand-orange-lt);
}
.cover__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 116%;
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
}
.cover__title .cover__line { display: block; }
.cover__title em {
  font-style: normal;
  color: var(--brand-orange-lt);
}
.cover__lead {
  margin-top: 26px;
  max-width: 46ch;
  font-size: 1.08rem;
  line-height: 1.7;
  color: #AEB7C0;
}
.cover__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }

.cover__stats {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--graphite-3);
}
.cover__stat { padding: 20px 18px 0 0; border-right: 1px solid var(--graphite-3); }
.cover__stat:last-child { border-right: 0; }
.cover__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 2.1rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}
.cover__stat span {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #79828D;
}

/* the framed poster — one of the client's own banners, mounted */
.cover__poster { position: relative; }
.cover__poster-frame {
  position: relative;
  border: 1px solid var(--graphite-3);
  background: #fff;
  padding: 10px;
}
.cover__poster-frame img { width: 100%; display: block; }
.cover__poster-tag {
  position: absolute;
  left: -1px;
  bottom: -1px;
  background: var(--brand-orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
}
.cover__poster-caption {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #79828D;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cover__poster-tech { margin-top: 34px; }
.cover__poster-tech .cover__poster-caption { margin-top: 12px; }

/* --- the brand banner band ------------------------------------------------
   The client's four banners are 3.9:1 strips. Laid out one per column they
   shrink to a sliver, so they are presented as a 2x2 plate gallery: the
   artwork keeps its own proportion and the caption sits under it, never on
   top of it. */
.band { background: #fff; border-bottom: 1px solid var(--line); }
.band__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
.band__slide {
  position: relative;
  background: #fff;
  overflow: hidden;
  display: block;
}
.band__slide img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.band__slide:hover img { transform: scale(1.025); }
.band__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px 15px;
  border-top: 1px solid var(--line);
}
.band__cap b {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.band__cap span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: right;
}

/* --- families ledger ------------------------------------------------------ */
.families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.family {
  background: #fff;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color .2s ease;
  position: relative;
}
.family:hover { background: var(--paper-2); }
.family__no {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.family__name {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 106%;
  font-size: 1.32rem;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
}
.family__desc { font-size: 0.93rem; line-height: 1.65; color: var(--ink-3); flex: 1 1 auto; }
.family__meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
}
.family__go { color: var(--accent); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; }

/* --- capability rows ------------------------------------------------------ */
.caps { border-top: 1px solid var(--graphite-3); }
.cap {
  display: grid;
  grid-template-columns: 92px 1fr 1.2fr;
  gap: 32px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--graphite-3);
}
.cap__no {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--brand-orange-lt);
  letter-spacing: -0.02em;
}
.cap__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 1.18rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
}
.cap__body { color: #98A1AB; font-size: 0.95rem; line-height: 1.7; }
.cap__body em { font-style: normal; color: var(--brand-orange-lt); font-family: var(--font-mono); font-size: .88rem; }

/* --- range showcase ------------------------------------------------------- */
.range { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.range__card {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.range__card:hover { border-color: var(--accent); transform: translateY(-3px); }
.range__media {
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.range__media img { width: 100%; height: 100%; object-fit: contain; }
.range__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.range__cat { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.range__name { font-size: 0.98rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.range__oe { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-4); margin-top: auto; }

/* --- news strip ----------------------------------------------------------- */
.newsstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.newsstrip__item { background: #fff; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 11px; }
.newsstrip__date { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.newsstrip__title { font-family: var(--font-display); font-weight: 700; font-stretch: 104%; font-size: 1.04rem; line-height: 1.25; text-transform: uppercase; color: var(--ink); }
.newsstrip__excerpt { font-size: 0.9rem; line-height: 1.65; color: var(--ink-3); flex: 1 1 auto; }
.newsstrip__more { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* --- RFQ band ------------------------------------------------------------- */
.rfq { background: var(--brand-orange); color: #fff; position: relative; overflow: hidden; }
.rfq::before {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 420px; height: 420px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
}
.rfq::after {
  content: '';
  position: absolute;
  right: 40px; top: 40px;
  width: 260px; height: 260px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}
.rfq__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  padding-top: 58px;
  padding-bottom: 58px;
}
.rfq__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 114%;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.rfq__sub { margin-top: 12px; font-size: 1rem; color: rgba(255, 255, 255, .88); max-width: 52ch; }
.rfq__actions { display: flex; gap: 14px; flex-wrap: wrap; flex: 0 0 auto; }
.rfq .btn--accent { background: #fff; color: #A85F22; }
.rfq .btn--accent:hover { background: #fff8F0; }
.rfq .btn--outline-light { border-color: rgba(255, 255, 255, .6); color: #fff; }
.rfq .btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ==========================================================================
   MODE: category — "INDEX"
   ========================================================================== */
.idxbar {
  background: var(--graphite);
  color: #fff;
  border-bottom: 3px solid var(--accent);
}
.idxbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.idxbar__count { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #AEB7C0; }
.idxbar__count b { color: #fff; font-weight: 600; }
.idxbar__tools { display: flex; align-items: center; gap: 8px; }
.idxbar__tools span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #79828D; margin-right: 4px; }
.idxbar__sort {
  background: transparent;
  border: 1px solid var(--graphite-3);
  color: #D4D9DF;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 7px 10px;
  border-radius: var(--r-xs);
}
.idxbar__view { display: flex; gap: 4px; }
.idxbar__view button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--graphite-3);
  color: #79828D;
}
.idxbar__view button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.idxlayout { display: flex; gap: 40px; align-items: flex-start; padding-top: 44px; padding-bottom: 80px; }

.idxrail { flex: 0 0 288px; position: sticky; top: 24px; }
.idxrail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 11px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.idxrail__head h3 {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 106%;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.idxrail__head span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.idxrail__group { border-bottom: 1px solid var(--line); }
.idxrail__group > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  font-family: var(--font-display);
  font-weight: 650;
  font-stretch: 104%;
  font-size: 0.9rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}
.idxrail__group > a:hover { color: var(--accent); }
.idxrail__group > a span { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-4); font-weight: 400; }
.idxrail__sub { padding: 0 0 12px; }
.idxrail__sub a {
  display: block;
  padding: 6px 2px 6px 14px;
  font-size: 0.88rem;
  color: var(--ink-3);
  border-left: 1px solid var(--line);
}
.idxrail__sub a:hover, .idxrail__sub a.is-active { color: var(--accent-deep); border-left-color: var(--accent); }
.idxrail__filters { margin-top: 28px; }
.idxrail__filters h4 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
}
.idxrail__check { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.idxrail__check input { accent-color: var(--accent); width: 14px; height: 14px; }
.idxrail__check span { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-4); margin-left: auto; }

/* --- the fitment ledger rows ---------------------------------------------- */
.ledger { border-top: 2px solid var(--ink); }
.ledger__row {
  display: grid;
  grid-template-columns: 46px 132px 1fr 220px;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: background-color .16s ease;
}
.ledger__row:hover { background: rgba(168, 118, 30, .05); }
.ledger__no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .1em;
  color: var(--ink-4);
}
.ledger__thumb {
  aspect-ratio: 1/1;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--ink-4);
}
.ledger__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ledger__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.02rem;
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -.005em;
}
.ledger__name:hover { color: var(--accent-deep); }
.ledger__spec {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.ledger__spec b { color: var(--ink); font-weight: 500; }
.ledger__fit { margin-top: 9px; font-size: 0.87rem; color: var(--ink-3); }
.ledger__side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.ledger__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.ledger__head {
  display: grid;
  grid-template-columns: 46px 132px 1fr 220px;
  gap: 24px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ledger__head span:last-child { text-align: right; }

/* grid variant */
.ledger.is-grid { border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ledger.is-grid .ledger__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
}
.ledger.is-grid .ledger__thumb { aspect-ratio: 4/3; }
.ledger.is-grid .ledger__side { align-items: flex-start; text-align: left; }
.ledger.is-grid .ledger__tags { justify-content: flex-start; }

.idxpager { margin-top: 34px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   MODE: product — "DOSSIER"
   ========================================================================== */
.dossier {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 0;
  align-items: start;
}
.dossier__gallery { padding: 44px 44px 48px 0; }
.dossier__stage {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  padding: 48px;
  color: var(--ink-4);
}
.dossier__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dossier__oe {
  position: absolute;
  left: 18px; bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dossier__zoom {
  position: absolute;
  right: 18px; bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 7px;
}
.dossier__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.dossier__thumb {
  width: 78px; height: 78px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 7px;
  display: grid;
  place-items: center;
  transition: border-color .15s ease;
}
.dossier__thumb img { width: 100%; height: 100%; object-fit: contain; }
.dossier__thumb.is-active { border-color: var(--accent); }
.dossier__tech { margin-top: 34px; }
.dossier__tech img { width: 100%; border: 1px solid var(--line); background: #fff; }

/* the dark data panel */
.dossier__panel {
  background: var(--graphite);
  color: #D4D9DF;
  padding: 44px 40px 48px;
  position: sticky;
  top: 0;
}
.dossier__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-orange-lt);
}
.dossier__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 108%;
  font-size: 1.6rem;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
}
.dossier__oenumber {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--graphite-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.dossier__oenumber span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #79828D;
}
.dossier__oenumber b {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--brand-orange-lt);
  letter-spacing: .04em;
}
.dossier__specs { margin-top: 26px; }
.dossier__specs dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #79828D;
  padding: 9px 0;
  border-bottom: 1px solid var(--graphite-3);
}
.dossier__specs dd {
  padding: 9px 0;
  border-bottom: 1px solid var(--graphite-3);
  font-size: 0.95rem;
  color: #E4E8EC;
}
.dossier__specs dd:last-child { border-bottom: 0; }
.dossier__form { margin-top: 30px; border-top: 1px solid var(--graphite-3); padding-top: 26px; }
.dossier__form h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff;
  margin-bottom: 16px;
}
.dossier__form .field label { color: #8E97A1; }
.dossier__form .field input, .dossier__form .field textarea {
  background: rgba(255, 255, 255, .05);
  border-color: var(--graphite-3);
  color: #fff;
}
.dossier__form .field input::placeholder, .dossier__form .field textarea::placeholder { color: #6C7580; }
.dossier__form .form-grid { gap: 12px; }
.dossier__direct { margin-top: 22px; display: grid; gap: 9px; }
.dossier__direct a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #C4CAD1;
}
.dossier__direct a:hover { color: var(--brand-orange-lt); }
.dossier__direct svg { color: var(--brand-orange-lt); flex: 0 0 auto; }

.sheet { padding: 56px 0 72px; border-top: 1px solid var(--line); }
.sheet__grid { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.sheet__title {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 106%;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--ink);
}
.sheet__side { position: sticky; top: 24px; }
.sheet__side-block { border: 1px solid var(--line); background: #fff; margin-bottom: 18px; }
.sheet__side-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sheet__side-body { padding: 14px; }
.sheet__side-body li { padding: 6px 0; font-size: .9rem; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.sheet__side-body li:last-child { border-bottom: 0; }
.sheet__side-body a:hover { color: var(--accent); }

.related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* --- image lightbox ------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 15, 19, .93);
  display: grid;
  place-items: center;
  padding: 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1000px, 92vw);
  max-height: 78vh;
  object-fit: contain;
  background: #fff;
  padding: 12px;
}
.lightbox__cap {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #98A1AB;
}
.lightbox__close {
  position: absolute;
  top: 18px; right: 24px;
  width: 44px; height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
}
.lightbox__close:hover { background: #fff; color: var(--ink); }

/* ==========================================================================
   MODE: article — "READING"
   ========================================================================== */
.reading {
  display: grid;
  grid-template-columns: 176px minmax(0, var(--measure)) 200px;
  gap: 48px;
  align-items: start;
  padding-top: 56px;
  padding-bottom: 96px;
}
.reading__aside { position: sticky; top: 28px; }
.reading__aside dl { margin: 0; }
.reading__aside dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 18px;
}
.reading__aside dd { margin: 5px 0 0; font-size: 0.88rem; color: var(--ink-2); }
.reading__aside .share { display: flex; gap: 7px; margin-top: 22px; }
.reading__aside .share a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.reading__aside .share a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.reading__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
}
.reading__standfirst {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.reading__byline {
  margin-top: 26px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.prose { font-family: var(--font-serif); font-size: 1.09rem; line-height: 1.78; color: #2A3038; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 106%;
  font-size: 1.42rem;
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-top: 2em;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin-top: 1.8em;
}
.prose p { text-align: justify; hyphens: auto; }
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.6rem;
  line-height: .82;
  padding: 6px 12px 0 0;
  color: var(--accent);
}
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: none; border-left: 2px solid var(--accent); padding-left: 18px; }
.prose li { padding: 5px 0; }
.prose li::before { content: '—'; color: var(--ink-4); margin-right: 9px; }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 24px;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; border: 1px solid var(--line); background: #fff; }
.prose figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: .06em;
  color: var(--ink-4);
}
.prose .table-wrap { font-family: var(--font-body); font-size: 0.92rem; }

.reading__toc { position: sticky; top: 28px; }
.reading__toc h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.reading__toc li { padding: 5px 0; font-size: 0.85rem; color: var(--ink-3); line-height: 1.45; }
.reading__toc li::before { content: '— '; color: var(--ink-4); }
.reading__toc a:hover { color: var(--accent); }

.reading__foot {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.reading__foot a { font-family: var(--font-display); font-weight: 650; font-stretch: 104%; font-size: 0.95rem; text-transform: uppercase; letter-spacing: .02em; }
.reading__foot a:hover { color: var(--accent); }
.reading__foot span { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }

/* ==========================================================================
   MODE: news — "TIMELINE"
   ========================================================================== */
.tabs {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.tabs__inner { display: flex; gap: 4px; overflow-x: auto; min-width: 0; max-width: 100%; }
.tabs__inner a {
  padding: 16px 18px;
  font-family: var(--font-display);
  font-weight: 650;
  font-stretch: 104%;
  font-size: 0.78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs__inner a:hover { color: var(--ink); }
.tabs__inner a.is-active { color: var(--accent-deep); border-bottom-color: var(--accent); }

.lead {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 46px;
  align-items: center;
  padding: 52px 0;
  border-bottom: 1px solid var(--line);
}
.lead__media { position: relative; }
.lead__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--line); }
.lead__badge {
  position: absolute;
  top: 0; left: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 13px;
}
.lead__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 14px;
}
.lead__title:hover { color: var(--accent-deep); }
.lead__excerpt { margin-top: 16px; font-size: 1.02rem; line-height: 1.7; color: var(--ink-3); }
.lead__meta { margin-top: 20px; display: flex; gap: 16px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

.tl { display: flex; flex-direction: column; }
.tl__row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 40px;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .18s ease;
}
.tl__row:hover { background: rgba(168, 68, 42, .035); }
.tl__date { position: relative; padding-top: 4px; }
.tl__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 2.6rem;
  line-height: .9;
  color: var(--ink);
  letter-spacing: -.03em;
}
.tl__month {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
}
.tl__tag {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--line);
  padding: 3px 9px;
}
.tl__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
}
.tl__title:hover { color: var(--accent-deep); }
.tl__excerpt { margin-top: 12px; font-size: 0.98rem; line-height: 1.7; color: var(--ink-3); max-width: 68ch; }
.tl__more { margin-top: 16px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

.newsrail { flex: 0 0 288px; }
.newsrail__block { border: 1px solid var(--line); background: #fff; margin-bottom: 22px; }
.newsrail__head {
  background: var(--graphite);
  color: #fff;
  padding: 12px 15px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.newsrail__body { padding: 15px; }
.newsrail__years { display: flex; flex-wrap: wrap; gap: 7px; }
.newsrail__years a {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 6px 11px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.newsrail__years a:hover, .newsrail__years a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.newsrail__body li { padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 0.9rem; line-height: 1.45; }
.newsrail__body li:last-child { border-bottom: 0; }
.newsrail__body li span { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-4); margin-bottom: 3px; }
.newsrail__body a:hover { color: var(--accent-deep); }

/* ==========================================================================
   MODE: contact — "DESK"
   ========================================================================== */
.desk { background: var(--graphite); color: #C9D0D8; padding: 62px 0 76px; }
.desk__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: start; }

/* the work order */
.workorder { background: #fff; color: var(--ink); }
.workorder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper-2);
}
.workorder__head b {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 106%;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.workorder__ref { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.workorder__body { padding: 28px 26px 30px; }
.workorder__note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: .06em;
  color: var(--ink-4);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.workorder__submit { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* contact cards */
.people { display: grid; gap: 14px; }
.person {
  border: 1px solid var(--graphite-3);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  align-items: start;
  background: rgba(255, 255, 255, .02);
  transition: border-color .18s ease, background-color .18s ease;
}
.person:hover { border-color: var(--brand-orange-lt); background: rgba(255, 255, 255, .045); }
.person__avatar {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--graphite-3);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: .06em;
  color: var(--brand-orange-lt);
}
.person__role {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-orange-lt);
}
.person__name { font-family: var(--font-display); font-weight: 700; font-stretch: 104%; font-size: 1.06rem; color: #fff; margin: 4px 0 8px; text-transform: uppercase; letter-spacing: .01em; }
.person__line { font-size: 0.9rem; color: #9AA3AD; display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.person__line a:hover { color: #fff; }
.person__line svg { flex: 0 0 auto; color: #6E7781; }

.facility { margin-top: 22px; border: 1px solid var(--graphite-3); }
.facility__head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--graphite-3);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #79828D;
}
.facility__body { padding: 18px; display: grid; gap: 13px; }
.facility__row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; font-size: 0.9rem; }
.facility__row dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .14em; text-transform: uppercase; color: #6E7781; padding-top: 3px; }
.facility__row dd { color: #C4CAD1; }

.mapplate {
  margin-top: 22px;
  border: 1px solid var(--graphite-3);
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 100%,
    #1E242B;
  height: 220px;
  display: grid;
  place-items: center;
  position: relative;
}
.mapplate__pin { text-align: center; }
.mapplate__pin b { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-orange-lt); }
.mapplate__pin span { font-family: var(--font-mono); font-size: .64rem; color: #79828D; }
.mapplate__coords {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: .1em;
  color: #5D666F;
}

.reply { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.reply__step { background: #fff; padding: 28px 26px 30px; }
.reply__no { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .18em; color: var(--accent); }
.reply__title { font-family: var(--font-display); font-weight: 700; font-stretch: 104%; font-size: 1.05rem; text-transform: uppercase; margin: 10px 0 8px; }
.reply__body { font-size: 0.9rem; line-height: 1.65; color: var(--ink-3); }

/* ==========================================================================
   MODE: search — "LOOK-UP"
   ========================================================================== */
.term {
  background: var(--graphite);
  color: #CBD2DA;
  font-family: var(--font-mono);
  padding: 26px 0;
}
.term__line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.term__prompt { color: var(--brand-orange-lt); font-size: 1.05rem; }
.term__q { color: #fff; font-size: 1.05rem; }
.term__meta { margin-top: 10px; font-size: 0.72rem; letter-spacing: .08em; color: #79828D; }
.term__meta b { color: #D4D9DF; font-weight: 500; }

.facets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.facets__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-right: 6px; }
.facet {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .04em;
  padding: 6px 12px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: #fff;
  transition: all .14s ease;
}
.facet:hover { border-color: var(--ink); }
.facet.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.facet__n { opacity: .6; margin-left: 6px; }

.hits { border-top: 2px solid var(--ink); }
.hit {
  display: grid;
  grid-template-columns: 28px 96px 1fr 190px;
  gap: 20px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  transition: background-color .15s ease;
}
.hit:hover { background: rgba(74, 91, 120, .05); }
.hit__no { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-4); }
.hit__thumb { aspect-ratio: 1/1; border: 1px solid var(--line); background: #fff; padding: 6px; display: grid; place-items: center; }
.hit__thumb img { width: 100%; height: 100%; object-fit: contain; }
.hit__title { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.hit__title:hover { color: var(--accent-deep); }
.hit__meta { margin-top: 6px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-4); letter-spacing: .03em; }
.hit__side { text-align: right; }

.empty { text-align: center; padding: 80px 20px; border: 1px dashed var(--line); margin-top: 30px; background: #fff; }
.empty b { display: block; font-family: var(--font-display); font-weight: 750; font-stretch: 108%; font-size: 1.3rem; text-transform: uppercase; margin-bottom: 10px; }
.empty p { color: var(--ink-3); max-width: 46ch; margin: 0 auto 22px; }

/* ==========================================================================
   MODE: about — "ESSAY"
   ========================================================================== */
.essay { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding: 58px 0; border-bottom: 1px solid var(--line); }
.essay--flip .essay__media { order: 2; }
.essay__media { position: relative; }
.essay__media img { width: 100%; border: 1px solid var(--line); background: #fff; }
.essay__no {
  position: absolute;
  top: -18px; left: -14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 114%;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--accent);
  opacity: .22;
  letter-spacing: -.04em;
}
.essay__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
}
.essay__body { margin-top: 16px; font-size: 1rem; line-height: 1.75; color: var(--ink-3); }
.essay__body p + p { margin-top: 14px; }
.essay__facts { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.essay__fact { border-top: 2px solid var(--ink); padding-top: 12px; }
.essay__fact b { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.essay__fact span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }

.chrono { border-top: 2px solid var(--ink); }
.chrono__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.chrono__year { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: 1.7rem; color: var(--accent); line-height: 1; letter-spacing: -.02em; }
.chrono__text { font-size: 0.97rem; line-height: 1.7; color: var(--ink-3); }
.chrono__text b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 5px; font-family: var(--font-display); font-stretch: 104%; text-transform: uppercase; font-size: 1rem; }

/* ==========================================================================
   MODE: 404 — "SIGNAL LOST"
   ========================================================================== */
.lost {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--graphite);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.lost__code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(6rem, 20vw, 13rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px var(--graphite-3);
  letter-spacing: -.04em;
}
.lost__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 116%;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  text-transform: uppercase;
  margin-top: -8px;
}
.lost__body { margin: 16px auto 30px; max-width: 48ch; color: #98A1AB; }
.lost__routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--graphite-3); max-width: 880px; margin: 0 auto; }
.lost__route { background: var(--graphite); padding: 28px 24px; text-align: left; transition: background-color .18s ease; }
.lost__route:hover { background: var(--graphite-2); }
.lost__route b { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 104%; font-size: 1rem; text-transform: uppercase; margin-bottom: 7px; }
.lost__route span { font-size: .88rem; color: #8B949E; }

/* ==========================================================================
   MODE: templates index — the handoff gallery
   ========================================================================== */
.modegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.modecard {
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modecard__swatch { height: 8px; }
.modecard__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.modecard__name { font-family: var(--font-display); font-weight: 750; font-stretch: 108%; font-size: 1.15rem; text-transform: uppercase; }
.modecard__mode { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.modecard__desc { font-size: .92rem; line-height: 1.65; color: var(--ink-3); flex: 1 1 auto; }
.modecard__url { font-family: var(--font-mono); font-size: .7rem; color: var(--accent-deep); padding-top: 12px; border-top: 1px solid var(--line-2); }
.modecard__link { margin-top: 4px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .cover__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 68px; padding-bottom: 60px; }
  .cover__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .cover__stat:nth-child(2n) { border-right: 0; }
  .band__track { grid-template-columns: minmax(0, 1fr); }
  .families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cap { grid-template-columns: 72px 1fr; gap: 20px; }
  .cap__body { grid-column: 2; }
  .reading { grid-template-columns: minmax(0, var(--measure)); }
  .reading__aside, .reading__toc { position: static; }
  .reading__aside { order: 2; }
  .reading__toc { order: 3; }
  .dossier { grid-template-columns: minmax(0, 1fr); }
  .dossier__panel { position: static; }
  .dossier__gallery { padding: 34px 0 40px; }
  .sheet__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lead { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .desk__grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .idxlayout { gap: 28px; }
}

@media (max-width: 900px) {
  .families { grid-template-columns: minmax(0, 1fr); }
  .range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsstrip { grid-template-columns: minmax(0, 1fr); }
  .reply { grid-template-columns: minmax(0, 1fr); }
  .modegrid { grid-template-columns: minmax(0, 1fr); }
  .ledger__row, .ledger__head { grid-template-columns: 38px 96px 1fr; }
  .ledger__side, .ledger__head span:last-child { display: none; }
  .ledger.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idxrail { position: static; flex-basis: 100%; }
  .idxlayout { flex-direction: column; }
  .lost__routes { grid-template-columns: minmax(0, 1fr); }
  .essay { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .essay--flip .essay__media { order: 0; }
  .hit { grid-template-columns: 22px 78px 1fr; }
  .hit__side { display: none; }
}

@media (max-width: 640px) {
  .band__track { grid-template-columns: minmax(0, 1fr); }
  .range { grid-template-columns: minmax(0, 1fr); }
  .ledger.is-grid { grid-template-columns: minmax(0, 1fr); }
  /* data rail below the hero: 2 x 2 on phones (never one tall column) */
  .cover__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .cover__stat { padding: 15px 14px 17px 0; border-right: 1px solid var(--graphite-3); }
  .cover__stat:nth-child(2n) { border-right: 0; padding-right: 0; }
  .cover__stat:nth-child(-n + 2) { border-bottom: 1px solid var(--graphite-3); }
  .tl__row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .essay__facts { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   MOBILE BANNER TYPOGRAPHY — 2026-11-14 follow-up
   Hero / cover, campaign band, inner-page index banner, quotation band and
   page-title plates were cramped on narrow phones: fixed-size display type,
   flex rows squeezing copy, and mid-phrase wraps. Rules below only apply at
   phone widths — the desktop (>= 641px) composition is untouched.
   Principles: clamp() type that scales with the viewport, measure capped in
   ch, natural word wrapping only (no mid-word breaks), balanced rag.
   ========================================================================== */
.idxbar__page { white-space: nowrap; }

@media (max-width: 820px) {
  /* Quotation band: the actions used to squeeze the copy into a sliver. */
  .rfq__inner { flex-direction: column; align-items: stretch; gap: 22px; padding-top: 40px; padding-bottom: 40px; }
  .rfq__actions { flex: 1 1 auto; }
  .rfq__actions .btn { flex: 1 1 auto; justify-content: center; }
  .idxbar__tools { width: 100%; justify-content: space-between; }
}

@media (max-width: 640px) {
  /* --- home hero / cover ------------------------------------------------ */
  .cover__inner { padding-top: 46px; padding-bottom: 44px; gap: 34px; }
  .cover__eyebrow {
    font-size: clamp(0.58rem, 2.6vw, 0.7rem);
    letter-spacing: 0.14em;
    margin-bottom: 18px;
  }
  .cover__title {
    font-size: clamp(1.8rem, 8.8vw, 2.45rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    max-width: 18ch;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .cover__title .cover__line { display: inline; }
  .cover__lead {
    margin-top: 18px;
    max-width: 42ch;
    font-size: clamp(0.98rem, 4.1vw, 1.06rem);
    line-height: 1.62;
  }
  .cover__actions { margin-top: 26px; gap: 10px; }
  .cover__stats { margin-top: 36px; }
  .cover__stat b { font-size: clamp(1.55rem, 7.4vw, 2.1rem); }
  .cover__poster-caption {
    font-size: 0.62rem;
    line-height: 1.5;
    flex-wrap: wrap;
    gap: 4px 12px;
    text-wrap: balance;
  }
  .cover__poster-tag { font-size: 0.58rem; letter-spacing: 0.1em; padding: 6px 10px; }

  /* --- campaign banner band captions ----------------------------------- */
  .band__cap { flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 14px 13px; }
  .band__cap b {
    font-size: clamp(0.8rem, 3.7vw, 0.92rem);
    line-height: 1.25;
    max-width: 24ch;
    text-wrap: balance;
  }
  .band__cap span {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    line-height: 1.45;
    max-width: 30ch;
    text-wrap: balance;
  }

  /* --- inner-page index banner (category / brand) ----------------------- */
  .idxbar__inner { gap: 10px; padding-top: 11px; padding-bottom: 11px; }
  .idxbar__count {
    font-size: clamp(0.6rem, 2.8vw, 0.72rem);
    letter-spacing: 0.05em;
    line-height: 1.55;
    max-width: 36ch;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .idxbar__tools span { font-size: 0.62rem; }
  .idxbar__sort { font-size: 0.68rem; padding: 6px 8px; }

  /* --- quotation plate headers (contact / form cards) ------------------- */
  .workorder__head { flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 13px 16px; }
  .workorder__head b {
    font-size: clamp(0.85rem, 3.9vw, 0.95rem);
    line-height: 1.25;
    max-width: 26ch;
    text-wrap: balance;
  }
  .workorder__ref { font-size: 0.6rem; letter-spacing: 0.1em; max-width: 26ch; text-wrap: balance; }

  /* --- orange quotation band ------------------------------------------- */
  .rfq__inner { gap: 18px; padding-top: 34px; padding-bottom: 34px; }
  .rfq__title {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
    line-height: 1.06;
    max-width: 18ch;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .rfq__sub { font-size: 0.95rem; line-height: 1.6; max-width: 40ch; }

  /* --- page-title plates (product sheet / article) ---------------------- */
  .dossier__title {
    font-size: clamp(1.25rem, 5.5vw, 1.6rem);
    line-height: 1.16;
    max-width: 26ch;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .reading__title {
    font-size: clamp(1.5rem, 6.6vw, 2rem);
    line-height: 1.14;
    max-width: 26ch;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .lost__title { font-size: clamp(1.5rem, 7vw, 2.2rem); line-height: 1.12; max-width: 20ch; text-wrap: balance; }
}

/* ==========================================================================
   NUMERIC / YEAR TOKENS — keep digits and year ranges on one line.
   Legacy spec strings contain ranges like "2012 - 2013"; a default break
   opportunity after the hyphen used to split them across lines.
   ========================================================================== */
.num-nowrap,
.tl__year,
.chrono__year,
.essay__fact b,
.cover__stat b,
.cover__stat span,
.dossier__oenumber b,
.idxrail__item b,
.newsstrip__date { white-space: nowrap; }
.newsstrip__title,
.newsstrip__excerpt { overflow-wrap: break-word; }

/* ==========================================================================
   REQUEST-DESKTOP-WEBSITE CANVAS — 2026-11-14 follow-up
   When a phone requests the desktop site the layout viewport is ~980px while
   several blocks are laid out for desktop. Give the whole document one shared
   minimum width so the header, body, footer and the copyright bar all sit on
   the same axis when the page scrolls horizontally. Desktop windows are wider
   than this and are not affected.
   ========================================================================== */
@media (min-width: 901px) {
  html,
  body { min-width: 1024px; }
}

/* ==========================================================================
   LEGACY LONG TOKENS — real ECSHOP titles/specs sometimes contain runs with
   no spaces (e.g. "ROVER,SUBARU,HYUNDAI,HONDA"). Break them only when there
   is no normal word break available, so they can never push the page wider
   than the viewport (visible in "Request Desktop Website" and on phones).
   ========================================================================== */
.tl__title,
.tl__title a,
.tl__excerpt,
.newsrail a,
.ledger__name,
.ledger__name a,
.ledger__spec,
.ledger__fit,
.range__name,
.range__oe,
.family__name,
.newsstrip__title,
.newsstrip__excerpt,
.dossier__title,
.reading__title,
.hit__title,
.prose,
.prose p,
.prose li,
.prose td { overflow-wrap: break-word; }

/* /catalog.php — the legacy "all categories" tree. It was a two-column
   multi-column block at every width, which squeezed deep nested branches into
   a few pixels on phones and made the page wider than the viewport. */
.catalog-cols { columns: 2; column-gap: 64px; }
.idxrail__group > a,
.idxrail__sub a { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 900px) {
  .catalog-cols { columns: 1; }
}