/* ==========================================================================
   CATALOGUE — products and industries

   One index-row component (`.idx`) shows both catalogues everywhere they
   appear: the two home-page sections, the two listing pages, and the
   cross-reference rail on every detail page. One page layout (`.pg`) is
   shared by every product and industry page. Nothing here needs a photo.
   ========================================================================== */

/* ---------------------------------------------------------------- sections */

.prod,
.cap{
  position:relative;
  border-top:1px solid var(--rule-soft);
  padding:clamp(5rem,11vw,8rem) clamp(20px,5vw,60px);
}
.prod{
  background:var(--ink-deep);
  background-image:var(--geo-b);
  background-size:cover; background-position:center;
}
.cap{ background:var(--ink); }

/* ---------------------------------------------------------------- index rows */

.idx{ list-style:none; margin:0; padding:0; counter-reset:none; }
.idx li{ border-top:1px solid var(--rule); }
.idx li:last-child{ border-bottom:1px solid var(--rule); }

.idx__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 30px;
  align-items:center;
  gap:0 1.3rem;
  padding:1.45rem 0;
  color:var(--paper-soft);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.idx__row:hover,
.idx__row:focus-visible{ background:var(--ink-deep); color:var(--paper); outline:none; }
.prod .idx__row:hover,
.prod .idx__row:focus-visible{ background:var(--ink); }

.idx__no{
  align-self:start;
  padding-top:.45rem;
  font-size:.7rem; font-weight:700; letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
  color:var(--paper-faint);
  transition:color .3s var(--ease);
}
.idx__row:hover .idx__no,
.idx__row:focus-visible .idx__no{ color:var(--green); }

.idx__main{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.idx__name{
  font-size:clamp(1.3rem,2.1vw,1.65rem); font-weight:700; letter-spacing:-.018em;
  line-height:1.1;
  color:var(--paper);
}
.idx__line{ font-size:.92rem; line-height:1.5; }

.idx__go{
  display:flex; align-items:center; justify-content:flex-end;
  color:var(--paper-faint);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.idx__go svg{ width:16px; height:16px; }
.idx__row:hover .idx__go,
.idx__row:focus-visible .idx__go{ color:var(--paper); transform:translateX(3px); }

/* the cross-reference rail on detail pages — same rows, a touch tighter */
.idx--tight .idx__row{ padding:1.05rem 0; gap:0 1rem; }
.idx--tight .idx__no{ padding-top:.3rem; }
.idx--tight .idx__name{ font-size:1.08rem; letter-spacing:-.01em; }
.idx--tight .idx__line{ font-size:.84rem; }

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

.pg{
  position:relative;
  isolation:isolate;
  background:var(--ink-deep);
  background-image:var(--geo-b);
  background-size:cover; background-position:center;
  padding:calc(var(--hdr-h) + clamp(2.6rem,6vw,4.5rem)) clamp(20px,5vw,60px) clamp(3rem,6.5vw,5rem);
  border-bottom:1px solid var(--rule);
}

.pg__crumb{
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 1.4rem;
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.pg__crumb a{ color:var(--paper-soft); transition:color .25s var(--ease); }
.pg__crumb a:hover{ color:var(--paper); }
.pg__of{
  color:var(--paper-faint);
  font-variant-numeric:tabular-nums;
  padding-left:.9rem;
  border-left:1px solid var(--rule);
}

.pg__h1{
  margin:0 0 1rem;
  font-size:clamp(2.2rem,5.5vw,4rem);
  font-weight:700; letter-spacing:-.025em; line-height:1.02;
  color:var(--paper);
  max-width:16ch;
}
.pg__lead{
  margin:0;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.5;
  color:var(--paper-soft);
  max-width:46ch;
}

/* small mark in the header on pages that have no hero logo */
.hdr__home{ justify-self:center; display:block; line-height:0; }
.hdr__home img{ width:clamp(74px,7vw,96px); height:auto; display:block; }

/* ---------------------------------------------------------------- page body */

.pg__body{
  position:relative;
  background:var(--ink);
  background-image:var(--geo-a);
  background-size:cover; background-position:center;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(20px,5vw,60px);
}

.pg__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr);
  gap:clamp(2.6rem,5vw,4.5rem);
  align-items:start;
}

/* section headings on a page — real titles, not eyebrows */
.pg__h2{
  margin:0 0 1.1rem;
  padding-bottom:.7rem;
  border-bottom:2px solid var(--paper);
  font-size:clamp(1.25rem,2.1vw,1.6rem);
  font-weight:700; letter-spacing:-.015em; line-height:1.15;
  color:var(--paper);
  display:inline-block;
  min-width:9ch;
}

.pg__block + .pg__block{ margin-top:clamp(2.8rem,5vw,3.8rem); }

.pg__text{
  margin:0 0 1.1em;
  font-size:clamp(1.12rem,1.7vw,1.35rem);
  line-height:1.6;
  color:var(--paper);
  max-width:40ch;
}
.pg__text:last-child{ margin-bottom:0; }

.pg__about{
  margin:0 0 1.15em;
  font-size:clamp(1.02rem,1.3vw,1.12rem);
  line-height:1.72;
  color:var(--paper-dim);
  max-width:58ch;
}
.pg__about:last-child{ margin-bottom:0; }

/* the key terms — set larger and heavier so the paragraph scans */
.pg__about strong,
.pg__text strong{
  font-weight:700;
  font-size:1.08em;
  color:var(--paper);
}

.pg__uses{ list-style:none; margin:0; padding:0; }
.pg__uses li{
  display:flex; align-items:center; gap:.85rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--rule-soft);
  font-size:1.06rem; font-weight:500;
  color:var(--paper);
}
.pg__uses li:first-child{ border-top:1px solid var(--rule-soft); }
.pg__uses li::before{
  content:""; flex:none;
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
}

.pg__facts{ margin:0; }
.pg__facts div{
  display:grid; grid-template-columns:8rem minmax(0,1fr);
  gap:1rem; align-items:baseline;
  padding:.8rem 0;
  border-bottom:1px solid var(--rule-soft);
}
.pg__facts div:first-child{ border-top:1px solid var(--rule-soft); }
.pg__facts dt{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-soft);
}
.pg__facts dd{ margin:0; font-size:1.02rem; font-weight:500; color:var(--paper); }

.pg__side .pg__h2{ margin-bottom:.3rem; }
.pg__none{ margin:0; color:var(--paper-faint); }

/* ---------------------------------------------------------------- prev / next */

.pg__nav{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(3rem,6vw,5rem);
}
.pg__navLink{
  display:flex; flex-direction:column; gap:.45rem;
  padding:1.4rem clamp(20px,5vw,60px) 1.4rem 0;
  color:var(--paper-soft);
  transition:color .25s var(--ease);
}
.pg__navLink--next{ text-align:right; align-items:flex-end; padding:1.4rem 0 1.4rem clamp(20px,5vw,60px); border-left:1px solid var(--rule); }
.pg__navLink:hover{ color:var(--paper); }
.pg__navDir{
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-faint);
}
.pg__navName{
  display:inline-flex; align-items:baseline; gap:.7rem;
  font-size:1.05rem; font-weight:600;
}
.pg__navLink--next .pg__navName{ flex-direction:row-reverse; }
.pg__navLink:hover .idx__no{ color:var(--green); }

/* ---------------------------------------------------------------- footer nav */

.foot__nav{ display:flex; gap:1.4rem; }
.foot__nav a{ color:var(--paper-faint); transition:color .25s var(--ease); }
.foot__nav a:hover{ color:var(--paper); }

/* ---------------------------------------------------------------- responsive */

@media (max-width:860px){
  .pg__grid{ grid-template-columns:1fr; gap:2.8rem; }
  .pg__text{ max-width:none; }
}
@media (max-width:640px){
  .idx__row{ padding:1.05rem 0; }
  .pg__navLink{ padding-right:1rem; }
  .pg__navLink--next{ padding-left:1rem; }
  .pg__navName{ font-size:.95rem; }
  .foot__in{ flex-direction:column; align-items:flex-start; }
}