/* ===========================================================================
   Industry pages — /industries/ and /industries/<slug>/

   Components only. Every colour, face, radius and spacing step comes from
   assets/css/eden.css; nothing here redefines a token or restyles a primitive.
   Loaded after eden.css, and generated into /industries/ so an indexed page
   never has to fetch a stylesheet out of the noindexed demonstration estate.
   ======================================================================== */

/* --- section heading ----------------------------------------------------
   The same primitive the demonstration template uses. It is defined here as
   well because /industries/ must not depend on a stylesheet that lives inside
   the noindexed demonstration estate. */

.sec-head {
  max-width: 60ch;
}

.sec-head h2 {
  margin-top: 12px;
}

.sec-head .lede {
  margin-top: 16px;
}

/* --- breadcrumb --------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--stone);
}

.crumbs a {
  text-decoration: none;
  color: var(--sage);
}

.crumbs a:hover {
  color: var(--forest);
}

.crumbs span[aria-hidden] {
  color: var(--line-strong);
}

/* --- the trade's own words ---------------------------------------------
   A strip of vocabulary is the fastest domain-knowledge proof on the page:
   an owner reads four terms and knows whether we have been in their office.
   It is decoration to a stranger and a credential to the buyer. */

.vocab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.vocab-strip li {
  position: relative;
  padding-right: 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--ink-soft);
}

/* Hairline separators only make sense on a line that does not wrap, and a long
   term must be allowed to wrap on a narrow phone rather than push the page
   sideways. Below 600px the strip is a plain wrapped list. */

@media (min-width: 600px) {
  .vocab-strip li {
    white-space: nowrap;
  }
}

.vocab-strip li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.9em;
  width: 1px;
  height: 0.9em;
  background: var(--line-strong);
}

.vocab-strip li:last-child::after {
  display: none;
}

/* --- the scope line -----------------------------------------------------
   The boundary of the central claim, stated once under the hero lede before
   the reader has had time to form the wrong idea of what is being claimed.
   Set as a rule-and-indent rather than a box: it is part of the opening
   statement, not an aside qualifying it. */

.scope-line {
  max-width: 60ch;
  margin-top: 26px;
  padding-left: 20px;
  border-left: 2px solid var(--sage);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}

/* --- the boundary -------------------------------------------------------
   Two columns of deliberately equal weight. The physical column is not a
   disclaimer set in small print under the real content: for an owner who is
   proud of their crew it is the first reassuring thing on the page, so it is
   given the same room, the same type and the same border as the claim beside
   it. */

.boundary {
  display: grid;
  gap: 1px;
  margin-top: 44px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 860px) {
  .boundary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.boundary__side {
  padding: 28px;
}

@media (min-width: 860px) {
  .boundary__side {
    padding: 36px;
  }
}

.boundary__side--hands {
  background: var(--paper);
}

.boundary__side--desk {
  background: var(--forest);
  color: var(--cream);
}

.boundary__label {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

.boundary__side--desk .boundary__label {
  color: rgba(244, 241, 234, 0.66);
}

.boundary__side h3 {
  margin-top: 14px;
  font-size: 1.4rem;
  line-height: 1.3;
}

.boundary__side--desk h3 {
  color: var(--cream);
}

.boundary__note {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.boundary__side--desk .boundary__note {
  color: rgba(244, 241, 234, 0.78);
}

.boundary__side ul {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}

.boundary__side--desk ul {
  border-top-color: rgba(244, 241, 234, 0.24);
}

.boundary__side li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.boundary__side--desk li {
  color: rgba(244, 241, 234, 0.9);
}

.boundary__side li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--line-strong);
}

.boundary__side--desk li::before {
  background: rgba(244, 241, 234, 0.55);
}

/* --- the photographic plate ---------------------------------------------
   One picture, and only on the pages that supply one. Every frame in the
   library is empty of people on purpose, so the plate is not decoration: an
   immaculate room with nobody in it is the argument the page is making, and it
   lands faster than the paragraph beside it.

   The image is unconstrained in height so a 3:2 and a 16:9 frame both sit
   correctly, and it never exceeds its column — which is what keeps a narrow
   phone from scrolling sideways. */

.industry-plate {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px 20px 0;
}

@media (min-width: 768px) {
  .industry-plate {
    padding-inline: 32px;
  }
}

.industry-plate img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--r-md);
  background: var(--linen);
}

.industry-plate figcaption {
  max-width: 60ch;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* --- the concurrency proof ----------------------------------------------
   The only claim on the site a reader can settle from where they are sitting,
   so it is set apart from the prose around it and written as an instruction.
   The dark variant sits inside the surge band; .proof--light sits on paper. */

.proof {
  margin-top: 36px;
  padding: 26px;
  border: 1px solid rgba(244, 241, 234, 0.24);
  border-radius: var(--r-md);
  background: rgba(244, 241, 234, 0.06);
}

@media (min-width: 768px) {
  .proof {
    padding: 34px 36px;
  }
}

.proof__label {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.62);
}

.proof__claim {
  margin-top: 14px;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  line-height: 1.35;
  color: var(--cream);
}

.proof__body {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(244, 241, 234, 0.82);
}

.proof--light {
  border-color: var(--line);
  background: var(--linen);
}

.proof--light .proof__label {
  color: var(--sage);
}

.proof--light .proof__claim {
  color: var(--forest);
}

.proof--light .proof__body {
  color: var(--ink-soft);
}

/* --- the claim component ------------------------------------------------
   The rule this exists to enforce: a figure renders only beside the means of
   checking it. The generator refuses a register row that carries a figure
   with neither a source nor a stated basis, so .claim has no unsourced
   variant to fall into — .claim--qual simply has no figure at all. */

.claim {
  display: grid;
  gap: 6px 24px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--paper);
}

@media (min-width: 720px) {
  .claim {
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    align-items: start;
    padding: 26px 30px;
  }
}

.claim__figure {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1;
  color: var(--forest);
  overflow-wrap: anywhere;
}

.claim__body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.claim__source {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--stone);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.claim__source a {
  color: var(--sage);
  overflow-wrap: anywhere;
}

.claim--qual {
  border-left-color: var(--line-strong);
}

.claim--tight {
  padding: 18px 20px;
}

/* --- the job sequence ---------------------------------------------------
   The front office of a trade, in the order of a job's life. Numbered because
   the order is the argument: these are stages, not a feature list. */

.job-sequence {
  margin-top: 44px;
  counter-reset: job;
  border-top: 1px solid var(--line);
}

.job {
  counter-increment: job;
  display: grid;
  gap: 6px 28px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 800px) {
  .job {
    grid-template-columns: 44px minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
}

.job::before {
  content: counter(job, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--sage);
}

.job__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
}

.job__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* --- what the first call has to capture --------------------------------- */

.intake-list {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.intake {
  display: grid;
  gap: 4px 32px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 800px) {
  .intake {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: baseline;
  }
}

.intake__field {
  font-weight: 500;
  line-height: 1.5;
}

.intake__why {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* --- where it breaks, and what Eden does --------------------------------
   Two columns of equal weight. The failure is not shrunk to make the answer
   look better: an owner who recognises the failure is the whole audience, and
   soft-pedalling it would lose them on the first line. */

.failure-answer {
  display: grid;
  gap: 0;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}

@media (min-width: 860px) {
  .failure-answer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.failure-answer__break,
.failure-answer__answer {
  padding: 26px;
}

@media (min-width: 860px) {
  .failure-answer__break,
  .failure-answer__answer {
    padding: 32px;
  }
}

.failure-answer__break {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 860px) {
  .failure-answer__break {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}

.failure-answer__answer {
  background: var(--linen);
}

.fa-label {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

.failure-answer__break h3 {
  margin-top: 12px;
  font-size: 1.3rem;
  line-height: 1.3;
}

.failure-answer__break p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.failure-answer__cost {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink);
}

.failure-answer__answer p {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--forest);
}

.failure-answer .claim {
  margin-top: 18px;
  background: var(--linen);
}

/* --- the surge ---------------------------------------------------------- */

.surge {
  background: var(--forest);
  color: var(--cream);
}

.surge .kicker {
  color: rgba(244, 241, 234, 0.62);
}

.surge h2 {
  margin-top: 12px;
  color: var(--cream);
}

.surge__body {
  margin-top: 20px;
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(244, 241, 234, 0.84);
}

.surge .claim {
  margin-top: 32px;
  background: rgba(244, 241, 234, 0.06);
  border-color: rgba(244, 241, 234, 0.2);
  border-left-color: rgba(244, 241, 234, 0.55);
}

.surge .claim__figure {
  color: var(--cream);
}

.surge .claim__body {
  color: rgba(244, 241, 234, 0.82);
}

.surge .claim__source {
  color: rgba(244, 241, 234, 0.55);
}

.surge .claim__source a {
  color: rgba(244, 241, 234, 0.8);
}

/* --- the four front doors ----------------------------------------------- */

.door-grid {
  display: grid;
  gap: 1px;
  margin-top: 40px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 720px) {
  .door-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.door {
  background: var(--paper);
  padding: 26px;
}

.door__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.door h3 {
  font-size: 1.3rem;
}

.door__weight {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}

.door p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* --- what Eden will not do ----------------------------------------------
   Considered, not defensive: generous padding, no icon, no warning colour,
   and the source visible rather than hidden behind a footnote. */

.limit-list {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.limit {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--linen);
}

@media (min-width: 768px) {
  .limit {
    padding: 34px 36px;
  }
}

.limit__label {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

.limit__what {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
}

.limit__why {
  margin-top: 14px;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.limit__source {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--stone);
}

.limit__source a {
  color: var(--sage);
  overflow-wrap: anywhere;
}

/* --- see it running ------------------------------------------------------ */

.running {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--paper);
}

@media (min-width: 860px) {
  .running {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
    padding: 40px;
  }
}

.running h2 {
  font-size: 1.85rem;
}

.running p {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* --- owner truths -------------------------------------------------------- */

.truths {
  display: grid;
  gap: 1px;
  margin-top: 40px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 860px) {
  .truths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.truth {
  background: var(--linen);
  padding: 26px;
}

.truth dt {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.truth dd {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.5;
}

/* --- the hub ------------------------------------------------------------- */

.trade-grid {
  display: grid;
  gap: 20px;
  margin-top: 44px;
}

@media (min-width: 720px) {
  .trade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.trade-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  border-radius: var(--r-md);
  background: var(--linen);
  text-decoration: none;
  transition: border-color 160ms ease;
}

.trade-card:hover {
  border-color: var(--line-strong);
  border-top-color: var(--brass);
}

.trade-card h2 {
  margin-top: 10px;
  font-size: 1.6rem;
}

.trade-card p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.trade-card__words {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.9;
}

.trade-card__go {
  margin-top: 20px;
  font-size: 14px;
  color: var(--forest);
}