/* Cinema layer (v4). Loads last, on every page. Adds the technical header,
   the giant condensed type, the dark Cordura breaks, the bathymetric contours
   and the home's cinematic sections. Same inks, same Archivo. */

:root {
  --chrome-h: 137px;   /* header row + technical bar, used to size the hero */
  --hero-h: max(560px, calc(100svh - var(--chrome-h)));
  --wrap-x: max(var(--gutter), calc((100vw - 1480px) / 2 + var(--gutter)));
  --weave:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px);
}

/* Giant condensed caps: Archivo at its narrowest width, heaviest weight. */
.giant {
  margin: 0;
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* ───────── Technical bar: place, coordinates, local time, Su misura ───────── */

.techbar {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--cover);
  background-image: var(--weave);
  border-top: 1px solid rgb(232 235 233 / 0.08);
  border-bottom: 1px solid rgb(0 0 0 / 0.35);
}
.techbar__in {
  display: flex; align-items: center; gap: 22px;
  max-width: 1480px; height: 46px;
  margin: 0 auto; padding: 0 var(--gutter);
}
.geo {
  display: flex; align-items: center; min-width: 0;
  margin: 0 auto 0 0;
  font-stretch: var(--cond); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cover-dim); white-space: nowrap;
}
.geo > span + span { margin-left: 12px; padding-left: 12px; border-left: 1px solid rgb(232 235 233 / 0.22); }
.geo__time { color: var(--cover-hi); font-variant-numeric: tabular-nums; }
.geo__time time { display: inline-block; min-width: 4.6em; }
.geo__pin { display: inline-block; vertical-align: -1px; width: 9px; height: 9px; margin-right: 8px; border: 2px solid var(--ink); border-radius: 50%; flex: none; }

.pronav.pronav--bar {
  display: flex; gap: 22px; max-width: none; margin: 0; padding: 0;
  font-size: 13px; white-space: nowrap;
}
.sumisura {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 32px; padding: 0 14px 0 12px;
  font-stretch: var(--cond); font-weight: 800; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  border: 1.5px solid var(--ink); border-radius: 4px;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.sumisura svg { width: 20px; height: 20px; color: var(--ink); transition: color var(--t-fast) var(--ease-out); }
.sumisura:hover { background: var(--ink-text); border-color: var(--ink-text); }
.sumisura:hover svg { color: #fff; }

.pronav--row { display: none; }
@media (max-width: 1100px) {
  .pronav--bar { display: none !important; }
  .pronav--row { display: flex; }
}
@media (max-width: 900px) {
  .techbar__in { height: 44px; gap: 12px; }
  .geo__coord { display: none; }
  .pronav--row { padding-top: 10px; }
}
@media (max-width: 560px) {
  .geo__region { display: none; }
  .geo { font-size: 12.5px; letter-spacing: 0.06em; }
  .sumisura { padding: 0 10px; font-size: 13.5px; }
}

/* section anchors clear the sticky bar */
[id] { scroll-margin-top: 60px; }

/* ───────── Contours: the −10 m pool, drawn as a chart ───────── */

[data-contours] { position: relative; isolation: isolate; }
.contours {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.contours path {
  fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.32;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
}
.contours path.is-index { stroke-width: 1.6; opacity: 0.5; }

/* ───────── Deep band: the Cordura comes back as a chapter break ───────── */

.deep {
  position: relative;
  color: var(--cover-hi);
  padding: clamp(64px, 8vw, 128px) 0;
  overflow: hidden;
}
.deep--sewn { background-color: var(--cover); background-image: var(--weave); }
.deep--sewn::before, .deep--sewn::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1;
  border-top: 1.5px dashed var(--stitch, rgb(232 235 233 / 0.34));
  pointer-events: none;
}
.deep--sewn::before { top: var(--hem, 14px); }
.deep--sewn::after { bottom: var(--hem, 14px); }
.deep__in { position: relative; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
.deep .giant { font-size: clamp(2.7rem, 7.2vw, 7.4rem); color: #fff; }
/* azure type on the cover: the same ink lifted a step so it reads on Cordura (5:1) */
.deep .giant em { font-style: normal; color: #3db1ff; }
.deep__sub { margin: 22px 0 0; max-width: 60ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--cover-hi); }

/* ───────── Home: cinematic hero ───────── */

.hero {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto auto 1.2fr;
  height: var(--hero-h);
  padding: 0 var(--wrap-x);
  overflow: hidden;
  color: #fff;
  background: #1c1e20;
}
.hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
/* the diver stands right of centre; the words take the dark sea and sky on his left */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(16 18 20 / 0.72) 0, rgb(16 18 20 / 0.46) 30%, rgb(16 18 20 / 0) 56%),
    linear-gradient(0deg, rgb(16 18 20 / 0.5), rgb(16 18 20 / 0) 34%);
}
.hero__title {
  grid-row: 2;
  /* the diver's left edge sits about one hero-height from the left: the two lines stay clear of him */
  font-size: min(calc(var(--hero-h) / 7), 9vw, 9rem);
}
.hero__title span { display: block; }
.hero__copy {
  grid-row: 3;
  max-width: min(34rem, calc(var(--hero-h) - var(--gutter) - 80px));
  margin-top: clamp(20px, 3vh, 34px);
}
.hero__name {
  margin: 0;
  font-stretch: var(--wide); font-weight: 820;
  font-size: clamp(1.3rem, 1.9vw, 1.8rem); line-height: 1.05; letter-spacing: -0.015em;
}
.hero__name .title__new { font-size: 12px; vertical-align: 0.3em; }
.hero__line { margin: 10px 0 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.45; color: rgb(255 255 255 / 0.88); max-width: 40ch; }
.hero .open-actions { margin-top: 22px; }
.hero .textlink { color: #fff; border-bottom-color: var(--ink); }
.hero .textlink:hover { border-bottom-color: #fff; }

@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .hero {
    display: flex; flex-direction: column;
    height: auto; padding: 0;
    background: transparent;
  }
  .hero__scrim { display: none; }
  .hero__title {
    order: 1;
    padding: 18px var(--gutter) 20px;
    font-size: min(calc((100vw - 2 * var(--gutter)) / 5.9), 8rem);
  }
  .hero__media { order: 2; position: static; z-index: auto; }
  .hero__media img { height: auto; aspect-ratio: 765 / 724; object-position: 50% 36%; }
  .hero__copy { order: 3; max-width: none; margin: 0; padding: 20px var(--gutter) 8px; }
  .hero__line { max-width: 52ch; }
}
@media (min-width: 601px) and (max-width: 900px), (min-width: 601px) and (max-aspect-ratio: 5/4) {
  .hero__media img { aspect-ratio: 16 / 10; }
}

/* ───────── Home: marquee of facts ───────── */

.marquee {
  overflow: hidden;
  padding: 18px 0;
  border-bottom: 1px solid rgb(232 235 233 / 0.14);
  color: var(--cover-hi);
}
.marquee__track { display: flex; width: max-content; animation: marquee 56s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.marquee li {
  display: flex; align-items: center; white-space: nowrap;
  font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1; letter-spacing: 0.01em;
}
.marquee li::after {
  content: ""; flex: none;
  width: 0.3em; height: 0.3em; margin: 0 0.75em;
  border: 2px solid var(--ink); border-radius: 50%;
}
.marquee li small { font-size: 0.5em; font-weight: 700; margin-left: 0.4em; color: var(--cover-dim); letter-spacing: 0.06em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: auto; padding: 0 var(--gutter); }
  .marquee ul { flex-wrap: wrap; justify-content: center; row-gap: 10px; flex: 1; }
  .marquee ul[aria-hidden] { display: none; }
}

/* the notebook follows the hero on the same Cordura */
.home .notebook { padding-top: clamp(28px, 4vw, 56px); }

/* ───────── Home: giant triplet as a section break ───────── */

.big-triplet {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(16px, 2vw, 32px);
  margin: 0 0 clamp(44px, 5.6vw, 84px);
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--ink);
}
.big-triplet dt { font-size: clamp(3rem, 7.4vw, 7.8rem); color: var(--graphite); }
.big-triplet dd { margin: 12px 0 0; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--graphite-soft); }
@media (max-width: 900px) {
  .big-triplet { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .big-triplet dt { font-size: min(calc((100vw - 2 * var(--gutter)) / 3.7), 7.4rem); }
  .big-triplet dd { margin-top: 6px; }
}

/* ───────── Home: product categories as cards ───────── */

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.cards a {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(12px, 1.4vw, 20px);
  background: var(--ground-alt);
  text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.cards a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cards img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  padding: 8%; mix-blend-mode: multiply;
}
.cards span {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--ink-line);
  font-stretch: var(--cond); font-weight: 800; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15;
}
.cards span svg { flex: none; color: var(--ink-text); font-size: 18px; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards span { font-size: 13.5px; letter-spacing: 0.04em; }
}

/* ───────── Home: military chapter on the Cordura ───────── */

#campo.deep { padding-bottom: 0; }
#campo .deep__in { padding-bottom: clamp(48px, 6vw, 88px); }
#campo .widefig { margin: 0; }
#campo .campo__links { padding-top: 22px; padding-bottom: clamp(52px, 6vw, 88px); }
.deep .textlink { color: #fff; border-bottom-color: var(--ink); }
.deep .textlink:hover { border-bottom-color: #fff; }
@media (max-width: 900px) {
  .deep .widefig__over { color: #fff; }
  .deep .widefig__sub { color: var(--cover-hi); }
  .deep .widefig__over .textlink { color: #fff; }
}

/* ───────── Home: offset collage of where the suits dive ───────── */

.stories-head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 clamp(28px, 3.4vw, 56px); align-items: end; margin-bottom: clamp(36px, 4.4vw, 64px); }
.stories-head .h2 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 4.6rem) !important; line-height: 1.02 !important; }
.stories-head p { margin: 0; color: var(--graphite-soft); }
.collage { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.collage__col { display: grid; gap: clamp(32px, 4vw, 56px); }
.collage__col--b { padding-top: clamp(60px, 10vw, 150px); }
.collage__col--c { padding-top: clamp(30px, 4.5vw, 64px); }
.story { margin: 0; }
.story a { display: block; text-decoration: none; }
.story__img { display: block; position: relative; overflow: hidden; background: #dfe3e5; }
.story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.story a:hover .story__img img { transform: scale(1.025); }
.story__t { display: block; margin-top: 12px; font-weight: 800; font-size: 1.05rem; color: var(--ink-text); }
.story a:hover .story__t { text-decoration: underline; text-decoration-color: var(--ink-line); }
.story__d { display: block; margin-top: 3px; font-size: 15px; color: var(--graphite); max-width: 46ch; }
.story--offset { margin-left: 18%; }
/* crops of DiveSystem's own news images, made in CSS */
.r-1x1 { aspect-ratio: 1; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-3x4 { aspect-ratio: 3 / 4; }
.r-16x10 { aspect-ratio: 16 / 10; }
.r-4x5 { aspect-ratio: 4 / 5; }
.at-left img { object-position: 0% 50%; }
.at-right img { object-position: 100% 50%; }
.at-right-top img { object-position: 100% 20%; }
/* Pipin: only the diver on the line, above the printed caption band */
.crop-pipin img { position: absolute; top: 0; left: -107%; width: 207%; max-width: none; height: auto; }
.crop-pipin:hover img, .story a:hover .crop-pipin img { transform: none; }
@media (max-width: 1100px) { .stories-head { grid-template-columns: minmax(0, 1fr); row-gap: 14px; } }
@media (max-width: 900px) {
  .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .collage__col { display: contents; }
  .story--offset { margin-left: 0; }
  .collage > .collage__col > .story:nth-child(n) { margin-top: 0; }
}
@media (max-width: 560px) { .collage { grid-template-columns: minmax(0, 1fr); } }

/* ───────── Home: the wordmark, once, filled with the sea ───────── */

.wordmark { display: block; width: 100%; height: auto; margin: 0 0 clamp(36px, 4.6vw, 64px); }
.wordmark text, .footmark text {
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 62%; font-weight: 900;
}

/* ───────── Home: retail stores on a schematic coast ───────── */

.stores { width: 100%; border-collapse: collapse; margin-top: 22px; border-top: 1.5px solid var(--ink); }
.stores th, .stores td { padding: 11px 0; border-bottom: 1px solid var(--ink-line); text-align: left; vertical-align: middle; }
.stores .c-n { width: 44px; }
.stores .c-n i {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  font-style: normal; font-stretch: var(--cond); font-weight: 800; font-size: 14px;
  color: var(--ink-text); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 50%;
}
.stores th { font-stretch: var(--cond); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-text); padding-right: 14px; }
.stores td:last-child { font-weight: 700; }
.map { margin: 0; }
.map svg { display: block; width: 100%; height: auto; }
.map .sea { fill: #eaf3fb; }
.map .iso { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; opacity: 0.55; }
.map .erase { fill: none; stroke: #eaf3fb; stroke-linejoin: round; stroke-linecap: round; }
.map .land { fill: #fff; stroke: var(--graphite-soft); stroke-width: 0.6; stroke-linejoin: round; }
.map .pin-c { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.map .pin-n { font: 800 8px "Archivo", system-ui, sans-serif; font-stretch: 75%; fill: var(--ink-text); text-anchor: middle; dominant-baseline: central; }
@media (max-width: 560px) {
  .map .lbl--city { display: none; }
  .map .pin-c { r: 10px; }
  .map .pin-n { font-size: 12px; }
}
.map .lbl { font: 600 8.5px "Archivo", system-ui, sans-serif; fill: var(--graphite); }
.map .north { font: 800 8px "Archivo", system-ui, sans-serif; font-stretch: 75%; fill: var(--ink-text); text-anchor: middle; }
@media (max-width: 560px) { .map .lbl, .map .north { font-size: 12px; } }
.map figcaption { margin-top: 10px; font-size: 14px; color: var(--graphite-soft); }

/* ───────── Footer: the giant wordmark, Halcyon-style, quiet on the cover ───────── */

.footmark { display: block; width: 100%; height: auto; margin-top: clamp(36px, 5vw, 72px); }
.footmark text { fill: rgb(232 235 233 / 0.12); }
.foot__geo { font-stretch: var(--cond); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; }
.home .cover--bottom { padding-bottom: clamp(16px, 2vw, 28px); }

/* ───────── Configurator: the test band on the cover ───────── */

.deep--test { padding: clamp(40px, 5vw, 80px) 0 clamp(52px, 6vw, 96px); margin-bottom: clamp(8px, 1.6vw, 20px); }
.deep--test .giant { font-size: clamp(3rem, 9vw, 9.4rem); }

/* professional paths in the bar (home.css styles them only on the home) */
.pronav--bar a { color: var(--cover-dim); text-decoration: none; }
.pronav--bar a:hover { color: var(--cover-hi); text-decoration: underline; }



/* ── review fixes: the collage reads as an aligned editorial grid, never crooked ──
   Five stories: three across, then two wider; every tile 4:3, tops aligned in each row. */
.collage { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) clamp(20px, 2.4vw, 32px); }
.collage__col { display: contents; }
.collage__col--b, .collage__col--c { padding-top: 0; }
.story, .story--offset { margin: 0; grid-column: span 2; }
.collage__col--b .story:last-child, .collage__col--c .story { grid-column: span 3; }
.collage .story__img { aspect-ratio: 4 / 3; }
.crop-stand img { object-position: 50% 42%; }
@media (max-width: 900px) {
  .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .story, .story--offset, .collage__col--b .story:last-child { grid-column: span 1; }
  .collage__col--c .story { grid-column: 1 / -1; }
  .collage__col--c .story__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .collage { grid-template-columns: minmax(0, 1fr); }
  .collage__col--c .story__img { aspect-ratio: 4 / 3; }
}

/* professional links row on phones: scrolls with a fade, nothing hard-clipped */
@media (max-width: 1100px) {
  .pronav--row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .pronav--row::-webkit-scrollbar { display: none; }
}
.crop-face img { object-position: 50% 18%; }

/* the test line under the giant title runs the full width */
.deep--test .deep__sub { max-width: none; }

/* LEGGERA | CALDA | ROBUSTA: printed separators between the three words */
@media (min-width: 901px) {
  .big-triplet > div + div { border-left: 2px solid var(--ink); padding-left: clamp(20px, 2.4vw, 40px); }
}
@media (max-width: 900px) {
  .big-triplet > div + div { border-top: 2px solid var(--ink); padding-top: 14px; }
}

/* "see all" links promoted to outlined buttons */
.btn-all {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  font-stretch: var(--cond); font-weight: 800; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-text); text-decoration: none;
  border: 2px solid var(--ink-text); border-radius: 4px;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.btn-all svg { font-size: 20px; }
.btn-all:hover { background: var(--ink-text); color: #fff; }

/* footer: DiveSystem's own lettering with the orca, quiet on the cover */
.footmark--logo { display: block; width: 100%; height: auto; margin-top: clamp(36px, 5vw, 72px); filter: grayscale(1) brightness(1.4); opacity: 0.16; }
/* store chart: one coastline, no isobath rings */
.map .coastline { fill: none; stroke: var(--ink); stroke-width: 1.4; }

/* real coastline (Natural Earth), land white on the light sea */
.map .land { stroke: var(--ink); stroke-width: 0.9; }
.map .sea--line { stroke: var(--ink); stroke-width: 0.9; stroke-linejoin: round; }
.map .lbl--city { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* "Promo Wetnote": printed vertically in the cover margins beside the notebook */
.notebook--promo { position: relative; }
.promo-side {
  position: absolute; top: 50%; z-index: 1;
  writing-mode: vertical-rl;
  font-stretch: var(--cond); font-weight: 800; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cover-dim); white-space: nowrap; pointer-events: none;
}
.promo-side::before, .promo-side::after { content: ""; display: inline-block; width: 1.5px; height: 36px; background: var(--ink); vertical-align: middle; margin: 0 0 14px; }
.promo-side::after { margin: 14px 0 0; }
/* centred in the cover band between the notebook and the screen edge, at any width */
.promo-side--l { left: calc(var(--gutter) / 2 - max(0px, (100vw - 1480px) / 4)); transform: translate(-50%, -50%) rotate(180deg); }
.promo-side--r { right: calc(var(--gutter) / 2 - max(0px, (100vw - 1480px) / 4)); transform: translate(50%, -50%); }
@media (max-width: 1100px) { .promo-side { display: none; } }

/* LEGGERA / CALDA / ROBUSTA: an attribute of the photograph, set on its free right side */
.hero__scrim--r { background: linear-gradient(270deg, rgb(16 18 20 / 0.62) 0, rgb(16 18 20 / 0.3) 18%, rgb(16 18 20 / 0) 32%); }
.hero__triplet {
  position: absolute; z-index: 1; margin: 0;
  top: 50%; transform: translateY(-50%);
  right: max(var(--gutter), calc((100vw - 1480px) / 2 + var(--gutter)));
  width: min(300px, 21vw);
}
.hero__triplet > div { padding: 14px 0 16px; }
.hero__triplet > div + div { border-top: 2px solid var(--ink); }
.hero__triplet dt {
  font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.01em;
  font-size: clamp(2.2rem, 3.6vw, 3.8rem); color: #fff;
}
.hero__triplet dd { margin: 6px 0 0; font-size: clamp(0.95rem, 1.1vw, 1.1rem); color: rgb(255 255 255 / 0.86); }
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .hero__scrim--r { display: none; }
  .hero__triplet {
    position: static; transform: none; order: 4; width: auto;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 4px var(--gutter) 0; padding-bottom: 8px;
  }
  .hero__triplet > div { padding: 10px 10px 10px 0; }
  .hero__triplet > div + div { border-top: 0; border-left: 2px solid var(--ink); padding-left: 12px; }
  .hero__triplet dt { font-size: clamp(1.6rem, 6.4vw, 2.6rem); }
  .hero__triplet dd { font-size: 13px; }
}
@media (min-width: 901px) and (min-aspect-ratio: 5/4) {
  .hero__triplet { right: 4vw; width: min(290px, 19vw); }
}