/*
  /industries and the twelve /industries/<slug> pages.

  Thirteen pages, one stylesheet. The hub is a dark hero over a grid of twelve; a
  sector page is the eleven sections of content/industries/AUTHORING.md between the
  same hero and the closing call to action every page on this site ends on. The hero
  and the CTA are base.css's — everything between them is here.

  A sector page also loads faq.css, for the accordion, and learn.css, for the
  breadcrumb and the two closing sections. Both are deliberate: those are the site's
  existing components, and the alternative — restating them here — is the same object
  styled twice and drifting from the day it is written. What this file does with them
  is confined to `.ind-crumbs`, `.ind-end` and `.ind-grid--related` at the bottom.

  Nothing in this file is loaded by the homepage, and nothing here restates a
  colour: every value is a token from styles/tokens.css, so both themes and both
  grounds come for free.
*/

/* ── The hero ───────────────────────────────────────────────────────────────
   The same measurements /faq and /suppliers open on, so the three read as one
   site: the bar's height plus a screenful proportion of air, the display size for
   the h1, and a standfirst wider than the body measure because it is one sentence
   under a short headline.
*/
.ind-hero {
  padding: calc(var(--topbar-h) + clamp(56px, 8vh, 104px)) var(--gutter)
    clamp(56px, 7vh, 92px);
  background: var(--bg);
  color: var(--fg);
}

.ind-hero .eyebrow {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.ind-hero h1 {
  font-size: var(--t-display);
  max-width: 18em;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

.ind-hero .lead {
  max-width: 44em;
}

/* ── The grid of twelve ─────────────────────────────────────────────────────
   Four across, and the cards are the homepage rail's cards: same hairline, same
   8px radius, same raised panel, same square window on a 4:5 photograph. A reader
   who has met them on the rail should recognise them here, because they are the
   same twelve things.

   The one difference is that these are links, so the response to a pointer is a
   control's rather than a card's — the hairline comes up *and* the name does. On
   the rail there is nothing behind a category to go to; here there is.
*/
.ind-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  list-style: none;
}

.ind-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.ind-card-link:hover {
  border-color: var(--line-strong);
}

/*
  Square, and the picture fills it — the same crop the rail takes, and the same
  reason: square puts the photograph at about 60% of the card and stops the panel
  under it from reading as a caption on a poster.
*/
.ind-card-figure {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.ind-card-figure picture,
.ind-card-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Above centre, for the placeholder's sake. One line to revisit with the shoot. */
  object-position: 50% 42%;
}

.ind-card-body {
  display: block;
  padding: clamp(14px, 1.3vw, 20px);
}

.ind-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.011em;
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease);
}

/*
  The three examples, one to a line and with no separators between them, for the
  reason argued at `.cats-tags`: two of the three are two words long on most of the
  twelve, so any separator ends up orphaned by a wrap.
*/
.ind-card-tags {
  display: block;
  margin-top: 8px;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-soft);
}

.ind-card-tags span {
  display: block;
}

@media (max-width: 1080px) {
  .ind-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ind-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
  Still two across on a phone rather than one. Twelve full-width cards is twelve
  screens of scrolling to reach the twelfth, and the names are short enough to read
  at half a 390px window.
*/
@media (max-width: 560px) {
  .ind-card-name {
    font-size: var(--t-body);
  }
}

/* ── Section 02, typical products ───────────────────────────────────────────
   The photograph beside what the category covers, and the way back up.

   It is also the whole of a sector page whose copy for that language is not written
   yet — see `sectorStub` in build.mjs and FLAGS.industryPagesAreWritten. The list
   beside the picture is the only difference between the two: the three examples from
   the card in the stub, the four to eight the writer named in the real thing.
*/
.ind-one-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

/*
  Capped, and not left as the remaining 1fr. The rows in this column are one word
  long and each carries a rule; at the full 756px the third rule runs six inches
  under the word "Rings" and the set reads as a table with its cells missing. At a
  body measure it reads as what it is — a short list beside a photograph.
*/
.ind-one-copy {
  max-width: 30em;
}

.ind-one-figure {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
}

.ind-one-figure picture,
.ind-one-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.ind-one-title {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-soft);
}

/*
  A list, and a rule between the rows. Three items on their own in a column of
  white read as an accident; a hairline each says they are a set of three.
*/
.ind-one-tags {
  margin-top: clamp(18px, 2vw, 26px);
  list-style: none;
}

.ind-one-tags li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--fg);
}

.ind-back {
  display: inline-block;
  margin-top: clamp(26px, 3vw, 40px);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color var(--dur-fast) var(--ease);
}

.ind-back:hover {
  color: var(--fg);
}

@media (max-width: 900px) {
  .ind-one-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Copy first on a narrow screen: the picture is context, the list is the content. */
  .ind-one-figure {
    order: 2;
    max-width: 420px;
  }

  .ind-one-copy {
    order: 1;
  }
}

/* ── One sector, written ────────────────────────────────────────────────────
   The eleven sections of content/industries/AUTHORING.md, in its order. Everything
   below this line renders written copy; everything above it renders the hub and the
   band those twelve pages carried before any of them had an argument in it.

   ── Nine light bands and one dark one ─────────────────────────────────────

   Ten `.section`s at the full `--section-y` is 2,640px of padding on a desktop page
   before a word is set, and a reader scrolling past a tenth heading with nothing but
   air between them has no way to tell where one argument ended. So the light bands are
   `.ind-sec`: about two thirds of the vertical rhythm, and a hairline above every
   heading. The rule is the separator the ground change cannot be, because the ground
   changes twice on this page and there are eleven sections.

   The dark band is the eight stages, and it keeps the full `--section-y` — it is the
   page's centrepiece and the one place a reader is meant to stop.
*/
.ind-sec {
  padding-block: clamp(52px, 5.2vw, 84px);
}

/*
  The rule sits on the `.head` rather than on the section, so it runs the shell's width
  and not the page's. A hairline is furniture and may be 1,240px long; it may not run
  into the gutter, where it would read as a border on the viewport.

  `.head` is always the first child of the shell in these bands — `sectorSection` in
  build.mjs puts it there — and it carries the section's `data-reveal`, so the rule
  arrives with the heading rather than a beat before it.
*/
.ind-sec > .shell > .head {
  padding-top: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid var(--line);
  /* base.css sets up to 76px, which is the gap under a full-height section's heading. */
  margin-bottom: clamp(26px, 3vw, 40px);
}

/*
  The breadcrumb, in the dark hero. `learn.css` draws it; this is only the space under
  it, which the crumbs there do not need because that page has no eyebrow beneath them.
*/
.ind-crumbs {
  margin-bottom: clamp(18px, 2vw, 26px);
}

/* The site's two buttons, under the standfirst. `.cta-actions` is the row itself. */
.ind-hero-actions {
  margin-top: clamp(28px, 3.2vw, 40px);
}

/* ── Rich text ──────────────────────────────────────────────────────────────
   The five fields content/industries/AUTHORING.md §3 allows `**bold**`, `` `code` ``
   and `[label](/path)` in. The same three treatments the Learn pages give them, because
   they are the same three things: an underline in route blue that is a border rather
   than a `text-decoration` so it can differ in colour from the word above it, bold in
   ink against grey prose, and code in the mono face on a whisper of the foreground.
*/
.ind-prose a,
.ind-help a,
.ind-points a,
.ind-region a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--info);
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.ind-prose a:hover,
.ind-prose a:focus-visible,
.ind-help a:hover,
.ind-help a:focus-visible,
.ind-points a:hover,
.ind-points a:focus-visible,
.ind-region a:hover,
.ind-region a:focus-visible {
  color: var(--info);
  border-bottom-width: 2px;
}

.ind-prose strong,
.ind-help strong,
.ind-points strong,
.ind-region strong {
  font-weight: 600;
  color: var(--fg);
}

.ind-prose code,
.ind-help code,
.ind-points code,
.ind-region code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg);
}

/* ── The caption under a list heading ───────────────────────────────────────
   Six sections are lists of examples and every one of them says so, because a list of
   eight materials set without a caption reads as the eight we can do. content/industries/
   chrome.js carries the six strings and the argument for them.

   Sized and coloured as a caption, not as a lead: `--t-small` under the section's own
   `.lead` size, so it sits between the heading and the list without competing with
   either. It is the one line on the page that is neither the writer's argument nor the
   list itself, and it should read as an aside.
*/
.ind-note {
  max-width: var(--measure-lead);
  margin-bottom: clamp(18px, 2vw, 28px);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-sub);
}

/* Beside the photograph the caption follows the tag list instead of a heading, so it
   needs the space above it and much less below — the back link comes next. */
.ind-note--tight {
  margin-top: clamp(14px, 1.4vw, 18px);
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

/*
  Sections 03 and 08's prose. A reading measure and nothing else — no pull quotes, no
  panel. This is the argument, and the argument is read.
*/
.ind-prose {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--fg-sub);
}

.ind-prose p + p {
  margin-top: 1.05em;
}

/*
  Section 03 alone, and only once there is room for two full measures.

  At one measure the argument occupied 545px of a 1240px shell — 44% — while the section
  above it and the two below used the whole width, so the page read as though this one
  section had been left unfinished. Widening the measure was not the fix: 1240px is about
  145 characters, twice what a line should carry.

  So: two columns of the same measure the rest of the page uses. `#helps` directly below
  is already two columns of 588px carrying 545px of text, which is what makes this
  consistent rather than a third layout — the reader meets the same column width twice in
  a row, once holding an argument and once holding six answers.

  A media query and not `column-width`, because `column-width` is a target and not a cap:
  at a 1000px container it yields one 1000px column, which is the fault this fixes made
  worse. Below 1100px there is not room for two, so there is one.
*/
@media (min-width: 1100px) {
  .ind-prose--cols {
    max-width: none;
    columns: 2;
    column-gap: clamp(40px, 4.6vw, 68px);
    orphans: 2;
    widows: 2;
  }
}

/* ── 04 Who this is for ─────────────────────────────────────────────────────
   Five statements, one to a row, each ruled. They are not a list of features and they
   are not prose: each one is a reader deciding whether the page is about them, so the
   row is the unit and a bullet would make them look like a specification.
*/
.ind-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px);
  list-style: none;
}

.ind-rows li {
  padding: clamp(13px, 1.2vw, 17px) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg-sub);
}

/*
  Two across rather than one column at `--measure-lead`, for the reason section 03 has
  two columns: five short statements down the left half left the right half of the shell
  empty between two sections that use all of it.

  `nth-child(-n + 2)` and not `:first-child` for the top rule: in two columns the top of
  the list is two cells, and ruling only the left one leaves the right column starting in
  mid-air. An odd number of statements leaves the last cell of the right column empty and
  therefore unruled, which is the list ending where it ends and not a gap.
*/
.ind-rows li:nth-child(-n + 2) {
  border-top: 1px solid var(--line);
}

/* ── 05 What Library of Trade helps with ────────────────────────────────────
   Four to six, two across. A ruled block each rather than a bordered card: a card is a
   thing to choose between, and these are six halves of one answer.
*/
.ind-helps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 44px) clamp(28px, 4vw, 64px);
  list-style: none;
}

.ind-help {
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--line);
}

.ind-help-title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--fg);
  margin-bottom: 10px;
}

.ind-help p {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-sub);
}

/* ── 06 The eight stages ────────────────────────────────────────────────────
   Four across and two down, on the dark ground.

   Not eight cards. A card is a surface with a border and a background and it invites a
   choice; nobody chooses between stage 3 and stage 6, and eight of them at 300px tall
   is the shape of a pricing page. So: a hairline, the number in route blue, the label,
   and the sentence — the same numbered-step treatment `.learn-steps` gives an ordered
   list, laid out in a grid because eight rows in a column would be two screens.

   The number is the writer's `01`–`08` and the label is `PROCESS.stages[i].name`, so
   these are byte-for-byte the eight stages the homepage's How-it-works strip shows. See
   the note in content/industries/chrome.js for why the labels are not in the content.
*/
.ind-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
  list-style: none;
}

.ind-stage {
  padding-top: clamp(14px, 1.4vw, 18px);
  border-top: 1px solid var(--line);
}

.ind-stage-code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--info);
}

.ind-stage-name {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--fg);
}

.ind-stage-text {
  margin-top: 8px;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-sub);
}

/* ── 07 Materials, processes and supplier types ─────────────────────────────
   Three columns, in BUILDING_COLUMNS' order. The label is mono and uppercase — the same
   furniture `.ind-one-title` is — because it names a column rather than making a point,
   and at a display size three of them would outrank the section heading above them.
*/
.ind-build {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 48px);
}

.ind-build-col {
  padding-top: clamp(14px, 1.4vw, 18px);
  border-top: 1px solid var(--line);
}

.ind-build-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-soft);
}

.ind-build-list {
  margin-top: clamp(12px, 1.2vw, 16px);
  list-style: none;
}

.ind-build-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--fg-sub);
}

/* ── 08 Quality, compliance and risk ────────────────────────────────────────
   The one section on the page where a list says something the prose does not: the
   argument on the left at a reading measure, and beside it the checks themselves, in a
   bordered area because they are a thing to work from rather than a thing to read.

   The left track is the measure and not `1fr`: at `1fr` the prose still stops at its own
   `max-width` and the leftover opens as a hole between the paragraph and the panel it
   belongs to, rather than closing up behind it.

   The right track is `1fr` and no longer a fixed 400px. Fixed, the two tracks came to
   945px of a 1240px shell and the section stopped 240px short of the rule above it —
   which was defensible while the who-rows and the regions stopped short too, and stopped
   being defensible when they were given the width. The panel holds short check lines, so
   it takes the leftover without its own content thinning out. Both tracks keep a `0`
   minimum so they shrink rather than overflow in the band before the single-column step.
*/
.ind-quality {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.ind-points {
  display: grid;
  row-gap: 11px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  list-style: none;
}

.ind-points li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-sub);
}

/* The same tick `.learn-check` draws, and drawn the same way — two borders on an empty
   box, rotated. No glyph, so it cannot be read out as a character. */
.ind-points li::before {
  content: '';
  width: 11px;
  height: 6px;
  margin-top: 0.5em;
  border-left: 1.6px solid var(--info);
  border-bottom: 1.6px solid var(--info);
  transform: rotate(-45deg);
}

/* ── 09 Sourcing regions ────────────────────────────────────────────────────
   Name in the left column, the paragraph beside it, a rule between the rows. A `ul` and
   not an `ol`, and no numbers: three to five regions with real trade-offs between them,
   and a number on each would read as a ranking the copy does not make.
*/
/*
  Two across, the name over its paragraph.

  It was one column a row deep — a 220px name track and the paragraph beside it — and the
  paragraph kept its own 545px measure inside a 980px track, so every row stopped 435px
  short of the rule above it. Widening the paragraph to the track was not available: 980px
  is about 115 characters.

  Two of them side by side fixes the width and does something the row form could not.
  These are three to five regions with real trade-offs against each other, and a reader is
  comparing them; side by side, two are on screen at once. The `ul`, the absence of
  numbers and the reason for both are unchanged — a number would read as a ranking the
  copy does not make, and reading order across two columns is no more a ranking than down
  one.
*/
.ind-regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px);
  list-style: none;
}

.ind-region {
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--line);
}

.ind-region-name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--fg);
  margin-bottom: 10px;
}

.ind-region p {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-sub);
}

/* ── After 10 — related reading, related sectors, sources ───────────────────
   `learn.css`'s three closing sections, unchanged, because they are the same three
   objects an article ends on. Only two things here are this page's: the band's own
   top rule, and undoing the margin `.learn-end` needs when it follows an article body
   and does not need when it is the only thing in a section.
*/
.ind-end > .shell {
  padding-top: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid var(--line);
}

.ind-end .learn-end {
  margin-top: 0;
}

/*
  Two or three cards, not twelve, so three across rather than four — the width
  `.learn-related` uses for the same row on an article page. These rules come after
  `.ind-grid`'s own narrow steps on purpose: same specificity, later wins, and the
  media queries below re-state the collapse for this modifier alone.
*/
.ind-grid--related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── Narrow ────────────────────────────────────────────────────────────────
   Four steps, and each one is a grid giving up a column at the width where its own
   content stops fitting rather than at a shared breakpoint: the stages have four columns
   to lose and go to two at 1080px, while the two-across blocks — helps, building, the
   who-rows and the regions — hold until 760px, where a half-shell stops being wide
   enough for a sentence.
*/
@media (max-width: 1080px) {
  .ind-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ind-quality {
    grid-template-columns: minmax(0, 1fr);
  }

  .ind-points {
    max-width: 480px;
  }

  .ind-grid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ind-helps,
  .ind-build,
  .ind-rows,
  .ind-regions {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column again, so only the first row's top is the list's top. */
  .ind-rows li:nth-child(-n + 2) {
    border-top: 0;
  }

  .ind-rows li:first-child {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .ind-stages {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
    One across, where the hub's twelve stay two. Twelve full-width cards is twelve
    screens to reach the twelfth and that is the trade the hub makes; three is not, so
    these get the width instead.
  */
  .ind-grid--related {
    grid-template-columns: minmax(0, 1fr);
  }
}