/* Hallmark · redesign · structure: single interactive spectrum territory · idea: "the selector is the exhibition"
 * paper: oklch(19% 0.055 264) · accent: oklch(51% 0.18 264) · display: UTM Avo · body: UTM Avo
 * axes: dark / roman-serif / cool · gates: all-pass · studied: no
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 */

@font-face {
  font-family: "UTM Avo";
  src: url("./assets/fonts/utm-avo.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "UTM Avo";
  src: url("./assets/fonts/utm-avo-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-display: "UTM Avo", Arial, sans-serif;
  --font-body: "UTM Avo", Arial, sans-serif;
  --color-paper: oklch(19% 0.055 264);
  --color-paper-deep: oklch(12% 0.04 264);
  --color-header: #0D3B82;
  --color-paper-2: oklch(23% 0.06 264);
  --color-ink: oklch(95% 0.012 90);
  --color-ink-2: oklch(78% 0.018 260);
  --color-muted: oklch(64% 0.025 260);
  --color-rule: oklch(37% 0.05 264);
  --color-rule-soft: oklch(30% 0.045 264);
  --color-holdings: oklch(43% 0.17 264);
  --color-holdings-bright: oklch(59% 0.19 264);
  --color-focus: oklch(73% 0.19 80);
  --color-transparent: transparent;
  --color-shadow: oklch(8% 0.035 264 / 0.55);
  --color-paper-overlay: oklch(12% 0.04 264 / 0.78);
  --color-white-wash: oklch(98% 0.01 90 / 0.12);
  --color-white-faint: oklch(98% 0.01 90 / 0.05);
  --color-hho: oklch(68% 0.19 46);
  --color-hho-deep: oklch(45% 0.17 40);
  --color-hho-light: oklch(82% 0.13 55);
  --color-viene: #8CC63F;
  --color-viene-deep: #47761F;
  --color-viene-light: #CBEA8B;
  --color-vie: oklch(70% 0.15 225);
  --color-vie-deep: oklch(42% 0.13 235);
  --color-vie-light: oklch(84% 0.09 220);
  --color-vhe: oklch(59% 0.19 254);
  --color-vhe-deep: oklch(39% 0.15 259);
  --color-vhe-light: oklch(80% 0.09 248);
  --color-henco: #FFD200;
  --color-henco-deep: #A66B00;
  --color-henco-light: #FFF19A;
  --color-sothuong: oklch(52% 0.16 29);
  --color-sothuong-deep: oklch(34% 0.13 27);
  --color-sothuong-light: oklch(72% 0.1 33);
  --color-viendong: oklch(52% 0.055 235);
  --color-viendong-deep: oklch(32% 0.045 235);
  --color-viendong-light: oklch(74% 0.045 230);
  --color-hhg: oklch(66% 0.13 170);
  --color-hhg-deep: oklch(40% 0.11 170);
  --color-hhg-light: oklch(82% 0.08 165);
  --color-zecap: oklch(52% 0.13 160);
  --color-zecap-deep: oklch(33% 0.11 160);
  --color-zecap-light: oklch(74% 0.08 155);
  --space-page: clamp(1rem, 4vw, 4.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--color-ink); color: var(--color-paper); transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.kicker { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .22em; line-height: 1.4; }

.site-head { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--space-page); }
.holdings-mark { display: flex; align-items: center; gap: .7rem; white-space: nowrap; }
.holdings-mark__sigil { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid var(--color-white-wash); font-family: var(--font-display); font-size: 1.05rem; }
.holdings-mark__text { font-size: .56rem; font-weight: 700; letter-spacing: .14em; line-height: 1.35; }
.site-nav { display: none; gap: 2rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.site-nav a { white-space: nowrap; }
.edition { margin: 0; font-size: .56rem; letter-spacing: .12em; white-space: nowrap; }

.origin { position: relative; display: grid; min-height: 100svh; align-items: center; padding: 8rem var(--space-page) 5rem; isolation: isolate; background: radial-gradient(circle at 64% 42%, var(--color-holdings-bright), var(--color-transparent) 25%), linear-gradient(145deg, var(--color-paper-deep), var(--color-holdings)); }
.origin::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--color-transparent), var(--color-white-faint), var(--color-transparent)); opacity: .25; }
.origin::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--color-paper-overlay), var(--color-transparent) 88%); pointer-events: none; }
.origin__content { position: relative; z-index: 2; max-width: 66rem; }
.origin h1, .section-intro h2, .connections h2, .finale h2 { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-style: normal; font-weight: 400; letter-spacing: -.045em; }
.origin h1 { margin: 1rem 0 1.5rem; font-size: clamp(3.7rem, 12vw, 10.5rem); line-height: .78; }
.origin h1 span { color: var(--color-henco-light); }
.origin__intro { max-width: 36rem; margin: 2rem 0 0; font-size: clamp(.98rem, 1.3vw, 1.2rem); line-height: 1.8; color: var(--color-ink-2); }
.origin__beam { position: absolute; inset-block: 0; inset-inline-end: 4%; z-index: 1; display: flex; width: min(38vw, 32rem); transform: skewX(-7deg); transform-origin: bottom; opacity: .68; filter: saturate(1.12); }
.origin__beam span { flex: 1; background: var(--beam-color); transform: scaleY(0); transform-origin: bottom; animation: beam-rise 1.3s var(--ease-out) forwards; animation-delay: calc(.25s + var(--beam-index) * .06s); }
.origin__beam span:nth-child(1) { --beam-color: var(--color-hho); }.origin__beam span:nth-child(2) { --beam-color: var(--color-viene); }.origin__beam span:nth-child(3) { --beam-color: var(--color-vie); }.origin__beam span:nth-child(4) { --beam-color: var(--color-vhe); }.origin__beam span:nth-child(5) { --beam-color: var(--color-henco); }.origin__beam span:nth-child(6) { --beam-color: var(--color-sothuong); }.origin__beam span:nth-child(7) { --beam-color: var(--color-viendong); }.origin__beam span:nth-child(8) { --beam-color: var(--color-hhg); }.origin__beam span:nth-child(9) { --beam-color: var(--color-zecap); }
.scroll-cue { position: absolute; inset-block-end: 1.7rem; inset-inline-start: var(--space-page); z-index: 2; display: flex; gap: 1rem; align-items: center; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.scroll-cue span { font-size: 1rem; }
.origin__index { position: absolute; inset-block-end: 1.5rem; inset-inline-end: var(--space-page); margin: 0; font-family: var(--font-display); font-size: 1.1rem; }

.spectrum-section { background: var(--color-paper-deep); }
.section-intro { display: grid; gap: 1.5rem; padding: clamp(1rem, 2vw, 2rem) var(--space-page) clamp(2.5rem, 4vw, 4rem); }
.spectrum-brand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin-block-end: clamp(1.25rem, 2.5vw, 2.5rem); font-size: .6rem; font-weight: 700; letter-spacing: .13em; }
.spectrum-brand__sigil { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--color-rule); }
.spectrum-brand strong, .spectrum-brand > span:last-child { white-space: nowrap; }
.spectrum-brand__logo { display: block; width: clamp(10rem, 17vw, 17rem); height: auto; }
.spectrum-brand > span:last-child { grid-column: 3; justify-self: end; }
.section-intro h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(2.7rem, 7vw, 7rem); font-style: normal; font-weight: 700; letter-spacing: -.055em; line-height: .9; }
.section-intro > p:last-child { max-width: 30rem; margin: 0; align-self: end; color: var(--color-ink-2); font-size: .95rem; line-height: 1.8; }
.spectrum { display: flex; flex-direction: column; width: 100%; min-height: 39rem; }
.spectrum__band { --band: var(--color-hho); position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: 100%; min-height: 4.25rem; padding: 1rem var(--space-page); border: 0; border-block-end: 1px solid var(--color-white-wash); background: var(--band); cursor: pointer; text-align: start; transition: min-height .45s var(--ease-out), filter .3s ease; }
.spectrum__band:nth-child(2) { --band: var(--color-viene); }.spectrum__band:nth-child(3) { --band: var(--color-vie); }.spectrum__band:nth-child(4) { --band: var(--color-vhe); }.spectrum__band:nth-child(5) { --band: var(--color-henco); color: var(--color-paper-deep); }.spectrum__band:nth-child(6) { --band: var(--color-sothuong); }.spectrum__band:nth-child(7) { --band: var(--color-viendong); }.spectrum__band:nth-child(8) { --band: var(--color-hhg); color: var(--color-paper-deep); }.spectrum__band:nth-child(9) { --band: var(--color-zecap); }
.spectrum__band strong { min-width: 0; overflow-wrap: anywhere; font-size: clamp(1.1rem, 3vw, 2rem); letter-spacing: -.04em; }
.spectrum__number, .spectrum__sector { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.spectrum__sector { opacity: .8; }
.spectrum__band.is-active { min-height: 7rem; }

.color-story { --active: var(--color-hho); --active-deep: var(--color-hho-deep); --active-light: var(--color-hho-light); display: grid; min-height: 100svh; background: var(--active); color: var(--color-paper-deep); transition: background .65s var(--ease-out); }
.color-story__field { position: relative; display: grid; min-height: 50svh; place-items: center; overflow: hidden; background: radial-gradient(circle, var(--active-light), var(--color-transparent) 52%), var(--active-deep); transition: background .65s var(--ease-out); }
.color-story__monogram { position: relative; z-index: 2; max-width: 100%; font-family: var(--font-display); font-size: clamp(5rem, 20vw, 16rem); font-weight: 700; letter-spacing: -.08em; line-height: .7; color: var(--active-light); text-shadow: 0 1.5rem 3rem var(--color-shadow); }
.color-story__orbit { position: absolute; width: 78%; aspect-ratio: 1; border: 1px solid var(--color-white-wash); border-radius: 50%; animation: orbit 18s linear infinite; }
.color-story__orbit--two { width: 52%; animation-direction: reverse; animation-duration: 12s; }
.color-story__copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 4rem var(--space-page); }
.color-story__eyebrow { display: flex; align-items: center; gap: 1rem; margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .16em; }
.color-story__eyebrow span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.color-story h3 { min-width: 0; margin: 1.5rem 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(3.2rem, 8vw, 6.5rem); font-style: normal; font-weight: 700; letter-spacing: -.07em; line-height: .82; }
.color-story__description { max-width: 34rem; margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.65; }
.color-story__industries { max-width: 38rem; margin: 1.5rem 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .09em; line-height: 1.8; text-transform: uppercase; }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-block-start: 2.5rem; background: var(--color-shadow); }
.swatches button { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .2rem .55rem; align-items: center; min-width: 0; padding: .75rem; border: 0; background: var(--active-light); color: var(--color-paper-deep); cursor: pointer; text-align: start; }
.swatches button > span { grid-row: span 2; width: .8rem; height: 2.2rem; background: var(--swatch); }
.swatches button[data-tone="deep"] { --swatch: var(--active-deep); }.swatches button[data-tone="primary"] { --swatch: var(--active); }.swatches button[data-tone="light"] { --swatch: var(--active-light); }
.swatches b { min-width: 0; font-size: .52rem; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; }
.swatches code { min-width: 0; overflow: hidden; font-family: var(--font-body); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.copy-note { margin: .75rem 0 0; font-size: .65rem; }

.connections { position: relative; min-height: 100svh; padding: 6rem var(--space-page); overflow: hidden; background: var(--color-paper-deep); }
.connections__heading { position: relative; z-index: 2; }
.connections h2 { margin-block: 1rem 3rem; }
.connections__list { position: relative; z-index: 2; width: min(100%, 46rem); margin-inline-start: auto; }
.connection { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; width: 100%; padding: 1.15rem 0; border: 0; border-block-start: 1px solid var(--color-rule); background: var(--color-transparent); cursor: pointer; text-align: start; opacity: .5; transition: opacity .25s ease, padding .35s var(--ease-out); }
.connection:last-child { border-block-end: 1px solid var(--color-rule); }
.connection.is-active { padding-inline-start: 1rem; opacity: 1; }
.connection span { font-family: var(--font-display); font-size: clamp(1.55rem, 4vw, 2.4rem); }
.connection strong { font-size: .58rem; letter-spacing: .13em; }
.connection-field { position: absolute; inset: 0; opacity: .45; pointer-events: none; transition: background .65s var(--ease-out); }
.connection-field span { position: absolute; inset-inline-end: -12%; inset-block-end: -24%; width: min(80vw, 60rem); aspect-ratio: 1; border-radius: 50%; background: var(--connection-gradient); filter: blur(1px); }
.connection-field--industrial { --connection-gradient: conic-gradient(from 220deg, var(--color-hho), var(--color-henco), var(--color-viendong), var(--color-hho)); }
.connection-field--knowledge { --connection-gradient: conic-gradient(from 220deg, var(--color-vie), var(--color-vhe), var(--color-zecap), var(--color-vie)); }
.connection-field--global { --connection-gradient: conic-gradient(from 220deg, var(--color-viene), var(--color-hhg), var(--color-viene)); }
.connection-field--foundation { --connection-gradient: conic-gradient(from 220deg, var(--color-sothuong), var(--color-viendong), var(--color-sothuong)); }

.finale { position: relative; display: grid; min-height: 100svh; place-items: center; padding: 7rem var(--space-page); overflow: hidden; background: var(--color-holdings); text-align: center; }
.finale__copy { position: relative; z-index: 3; }
.finale h2 { margin: 1.2rem 0; font-size: clamp(3.1rem, 8vw, 8rem); line-height: .88; }
.finale__copy > p:last-child { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.finale__spectrum { position: absolute; inset: 0; display: flex; opacity: .6; transform: rotate(-16deg) scale(1.35); }
.finale__spectrum span { flex: 1; background: var(--strip); }.finale__spectrum span:nth-child(1) { --strip: var(--color-hho); }.finale__spectrum span:nth-child(2) { --strip: var(--color-viene); }.finale__spectrum span:nth-child(3) { --strip: var(--color-vie); }.finale__spectrum span:nth-child(4) { --strip: var(--color-vhe); }.finale__spectrum span:nth-child(5) { --strip: var(--color-henco); }.finale__spectrum span:nth-child(6) { --strip: var(--color-sothuong); }.finale__spectrum span:nth-child(7) { --strip: var(--color-viendong); }.finale__spectrum span:nth-child(8) { --strip: var(--color-hhg); }.finale__spectrum span:nth-child(9) { --strip: var(--color-zecap); }
.finale::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle, var(--color-transparent), var(--color-paper-deep)); opacity: .58; }
.finale__mark { position: absolute; z-index: 2; font-family: var(--font-display); font-size: min(60vw, 42rem); letter-spacing: -.12em; opacity: .12; }
.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--space-page); background: var(--color-paper-deep); font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.site-foot p { margin: 0; white-space: nowrap; }

.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s ease, transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes beam-rise { to { transform: scaleY(1); } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (min-width: 40rem) {
  .site-nav { display: flex; }
  .section-intro { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .section-intro .kicker { grid-column: 1 / -1; }
  .connection { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .swatches button { padding: 1rem; }
}

@media (max-width: 24.99rem) {
  .spectrum-brand > span:last-child { font-size: 0; }
  .spectrum-brand > span:last-child::after { content: "2026"; font-size: .56rem; }
}

@media (min-width: 60rem) {
  .site-head { position: fixed; mix-blend-mode: normal; }
  .spectrum { flex-direction: row; min-height: 44rem; }
  .spectrum__band { display: flex; flex: 1; min-width: 0; min-height: 44rem; padding: 1.4rem .7rem; flex-direction: column; justify-content: space-between; border-block-end: 0; border-inline-end: 1px solid var(--color-white-wash); transition: flex .55s var(--ease-out), filter .3s ease; }
  .spectrum__band strong { writing-mode: vertical-rl; transform: rotate(180deg); }
  .spectrum__sector { writing-mode: vertical-rl; transform: rotate(180deg); }
  .spectrum__band.is-active { flex: 2.5; min-height: 44rem; }
  .color-story { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .color-story__field { min-height: 100svh; }
  .color-story__copy { padding: 6rem clamp(3rem, 6vw, 7rem); }
  .connections { padding-block: 9rem; }
  .connections__heading { width: 66%; }
  .connections__list { margin-block-start: -1rem; }
}

@media (hover: hover) and (pointer: fine) {
  .spectrum__band:hover { filter: brightness(1.12); }
  .connection:hover { opacity: 1; }
  .site-nav a:hover { text-decoration: underline; text-underline-offset: .35rem; }
  .swatches button:hover { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Hallmark · accordion territory refinement
 * interaction: desktop expands inline / mobile expands in flow
 * critique: P5 H5 E5 S5 R5 V5
 */
.spectrum-section { background: var(--color-header); }
.section-intro { min-height: 0; align-content: start; gap: clamp(1.25rem, 2.5vw, 2.5rem); background: var(--color-header); }
.section-intro h1 { font-size: clamp(3.5rem, 10vw, 10rem); letter-spacing: -.075em; line-height: .8; }
.spectrum { min-height: 0; background: var(--color-paper-deep); }
.spectrum__band { --band: var(--color-hho); --active-deep: var(--color-hho-deep); --active-light: var(--color-hho-light); --band-ink: var(--color-ink); display: block; width: 100%; min-height: 4.75rem; padding: 0; overflow: clip; background: var(--band); color: var(--band-ink); cursor: default; transition: flex .55s var(--ease-out); }
.spectrum__band:nth-child(2) { --band: var(--color-viene); --active-deep: var(--color-viene-deep); --active-light: var(--color-viene-light); --band-ink: var(--color-paper-deep); }
.spectrum__band:nth-child(3) { --band: var(--color-vie); --active-deep: var(--color-vie-deep); --active-light: var(--color-vie-light); }
.spectrum__band:nth-child(4) { --band: var(--color-vhe); --active-deep: var(--color-vhe-deep); --active-light: var(--color-vhe-light); }
.spectrum__band:nth-child(5) { --band: var(--color-henco); --active-deep: var(--color-henco-deep); --active-light: var(--color-henco-light); --band-ink: var(--color-paper-deep); }
.spectrum__band:nth-child(6) { --band: var(--color-sothuong); --active-deep: var(--color-sothuong-deep); --active-light: var(--color-sothuong-light); }
.spectrum__band:nth-child(7) { --band: var(--color-viendong); --active-deep: var(--color-viendong-deep); --active-light: var(--color-viendong-light); }
.spectrum__band:nth-child(8) { --band: var(--color-hhg); --active-deep: var(--color-hhg-deep); --active-light: var(--color-hhg-light); --band-ink: var(--color-paper-deep); }
.spectrum__band:nth-child(9) { --band: var(--color-zecap); --active-deep: var(--color-zecap-deep); --active-light: var(--color-zecap-light); }
.spectrum__trigger { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto 1rem; align-items: center; gap: .8rem; width: 100%; min-height: 4.75rem; padding: 1rem var(--space-page); border: 0; background: var(--color-transparent); color: inherit; cursor: pointer; text-align: start; }
.spectrum__trigger strong { min-width: 0; overflow: hidden; font-size: clamp(1rem, 3vw, 1.45rem); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.spectrum__plus { font-size: 1.35rem; font-weight: 400; line-height: 1; transition: transform .35s var(--ease-out); }
.spectrum__band.is-active { min-height: 4.75rem; }
.spectrum__band.is-active .spectrum__plus { transform: rotate(45deg); }
.spectrum__detail { display: grid; grid-template-rows: 0fr; min-width: 0; opacity: 0; visibility: hidden; transition: grid-template-rows .55s var(--ease-out), opacity .3s ease, visibility 0s linear .55s; }
.spectrum__detail-inner { min-height: 0; overflow: hidden; }
.spectrum__band.is-active .spectrum__detail { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .55s var(--ease-out), opacity .35s ease .15s, visibility 0s; }
.territory { display: grid; gap: 2rem; padding: 1rem var(--space-page) 3rem; }
.territory__visual { position: relative; display: grid; min-height: 16rem; place-items: center; overflow: clip; background: radial-gradient(circle, var(--active-light), var(--color-transparent) 52%), var(--active-deep); }
.territory__visual::before, .territory__visual::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid var(--color-white-wash); border-radius: 50%; }
.territory__visual::after { width: 45%; }
.territory__monogram { position: relative; z-index: 1; max-width: 100%; overflow: hidden; color: var(--active-light); font-size: clamp(4rem, 18vw, 8rem); font-weight: 700; letter-spacing: -.08em; line-height: .8; text-overflow: ellipsis; white-space: nowrap; }
.territory__copy { min-width: 0; }
.territory__group { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.territory__copy h2 { min-width: 0; margin: 1rem 0; overflow-wrap: anywhere; font-size: clamp(2.5rem, 10vw, 5.5rem); font-style: normal; letter-spacing: -.065em; line-height: .92; }
.territory__color-name,
.territory__descriptor { display: block; }
.territory__color-name { text-transform: uppercase; }
.territory__descriptor { margin-block-start: .28em; }
.territory__description { max-width: 34rem; margin: 0; font-size: 1rem; line-height: 1.65; }
.territory__industries { max-width: 38rem; margin: 1.25rem 0 0; font-size: .64rem; font-weight: 700; letter-spacing: .08em; line-height: 1.8; text-transform: uppercase; }
.territory__swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-block-start: 2rem; background: var(--color-shadow); }
.territory__swatches button { display: grid; gap: .25rem; min-width: 0; padding: .8rem .65rem; border: 0; background: var(--tone); color: var(--color-paper-deep); cursor: pointer; text-align: start; }
.territory__swatches button:nth-child(1) { --tone: var(--active-deep); color: var(--color-ink); }
.territory__swatches button:nth-child(2) { --tone: var(--band); }
.territory__swatches button:nth-child(3) { --tone: var(--active-light); }
.territory__swatches b { overflow: hidden; font-size: .48rem; letter-spacing: .08em; text-overflow: ellipsis; }
.territory__swatches code { overflow: hidden; font-family: var(--font-body); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.territory__note { margin: .65rem 0 0; font-size: .58rem; }

@media (min-width: 40rem) {
  .section-intro { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .spectrum-brand { grid-column: 1 / -1; }
  .territory { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
}

@media (min-width: 60rem) {
  .section-intro { min-height: 0; }
  .spectrum { flex-direction: row; height: max(44rem, 86svh); min-height: 0; }
  .spectrum__band { display: flex; flex: 1; min-width: 0; width: auto; min-height: 0; padding: 0; flex-direction: row; justify-content: flex-start; border-block-end: 0; border-inline-end: 1px solid var(--color-white-wash); }
  .spectrum__band.is-active { flex: 10; min-height: 0; }
  .spectrum__trigger { display: flex; flex: 0 0 100%; width: 100%; min-width: 0; min-height: 100%; padding: 1.35rem .65rem; flex-direction: column; justify-content: space-between; transition: flex-basis .55s var(--ease-out), width .55s var(--ease-out); }
  .spectrum__band.is-active .spectrum__trigger { flex-basis: 4.25rem; width: 4.25rem; }
  .spectrum__trigger strong, .spectrum__sector { writing-mode: vertical-rl; transform: rotate(180deg); }
  .spectrum__trigger strong { overflow: visible; font-size: clamp(1rem, 1.4vw, 1.35rem); }
  .spectrum__plus { margin-block-start: auto; }
  .spectrum__detail { display: grid; flex: 1 1 auto; grid-template-rows: 1fr; max-width: 0; height: 100%; opacity: 0; visibility: hidden; transition: max-width .55s var(--ease-out), opacity .2s ease, visibility 0s linear .55s; }
  .spectrum__band.is-active .spectrum__detail { max-width: 70rem; opacity: 1; visibility: visible; transition: max-width .55s var(--ease-out), opacity .35s ease .18s, visibility 0s; }
  .spectrum__detail-inner { height: 100%; overflow-y: auto; }
  .territory { grid-template-columns: minmax(9rem, .72fr) minmax(13rem, 1.28fr); min-width: 0; min-height: 100%; align-items: center; padding: clamp(2rem, 3vw, 3.5rem); }
  .territory__visual { min-height: min(30rem, 62vh); }
  .territory__monogram { font-size: clamp(4rem, 8vw, 8rem); }
  .territory__copy h2 { overflow-wrap: normal; font-size: clamp(2.4rem, 3.8vw, 4.75rem); }
}

@media (hover: hover) and (pointer: fine) {
  .spectrum__trigger:hover { background: var(--color-white-faint); }
}

/* Content-only territory panel — no decorative colour specimen. */
.territory { display: block; min-width: 0; padding: clamp(2rem, 6vw, 5rem) var(--space-page); }
.territory__copy { width: min(100%, 38rem); max-width: 38rem; }
.territory__copy h2 { overflow-wrap: normal; word-break: normal; }
.territory__swatches { gap: 0; background: var(--color-transparent); border-block: 1px solid currentColor; }
.territory__swatches button,
.territory__swatches button:nth-child(1),
.territory__swatches button:nth-child(2),
.territory__swatches button:nth-child(3) { padding: 1rem .35rem; border: 0; background: var(--color-transparent); color: inherit; }
.territory__swatches button + button { border-inline-start: 1px solid currentColor; }

@media (min-width: 60rem) {
  .territory { display: flex; min-width: 0; min-height: 100%; align-items: center; padding: clamp(2.5rem, 5vw, 5rem); }
  .territory__copy { width: min(100%, 40rem); max-width: 40rem; }
  .territory__copy h2 { font-size: clamp(3rem, 5vw, 5.5rem); }
}