@charset "UTF-8";
/* ==========================================================================
   anilcurrimjee.com — Page-specific compositions
   Each page carries its own grid logic so no two pages share a rhythm.
   ========================================================================== */

/* ==========================================================================
   HOME — full-bleed split hero, horizontal era rail, editorial index
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink-950);
  color: var(--ivory-50);
  padding-block: calc(var(--header-h) + var(--sp-xl)) var(--sp-xl);
  overflow: hidden;
  isolation: isolate;
  min-height: min(94vh, 940px);
  display: flex;
  align-items: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(88% 70% at 74% 0%, rgba(29, 92, 134, 0.5) 0%, rgba(3, 18, 31, 0) 62%),
    radial-gradient(64% 60% at 2% 92%, rgba(156, 95, 58, 0.26) 0%, rgba(3, 18, 31, 0) 66%);
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(199, 209, 215, 0.055) 1px, transparent 1px);
  background-size: 12.5% 100%;
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
}
@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    gap: var(--sp-xl);
  }
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-300);
  font-weight: 600;
  margin-bottom: var(--sp-m);
  line-height: 1.5;
}
.hero__kicker::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--copper-400);
  flex: none;
}
.hero h1 {
  color: var(--ivory-50);
  font-size: var(--step-6);
  line-height: 1.0;
  letter-spacing: -0.028em;
  font-weight: 300;
  margin-bottom: var(--sp-s);
}
.hero h1 em {
  font-style: italic;
  color: var(--copper-300);
  font-weight: 300;
}
.hero__role {
  font-size: var(--step-1);
  font-family: var(--font-serif);
  color: var(--mineral-200);
  line-height: 1.4;
  margin-bottom: var(--sp-m);
  max-width: 28ch;
  font-weight: 300;
}
.hero__lede {
  color: var(--mineral-200);
  max-width: 54ch;
  font-size: var(--step-0);
  line-height: 1.78;
}
.hero__rule {
  width: 100%;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(to right, var(--copper-400), rgba(220,169,127,0));
  margin: var(--sp-m) 0;
  border: 0;
}

/* Face-safe portrait stage */
.hero__stage { position: relative; }
.hero__portrait {
  position: relative;
  aspect-ratio: 634 / 484;
  background:
    linear-gradient(150deg, rgba(29, 92, 134, 0.5), rgba(3, 18, 31, 0.9));
  border: 1px solid rgba(199, 209, 215, 0.16);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero__portrait-tag {
  position: absolute;
  left: 0; bottom: 0;
  background: rgba(3, 18, 31, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(220, 169, 127, 0.35);
  border-right: 1px solid rgba(220, 169, 127, 0.35);
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper-300);
  font-weight: 600;
  max-width: 88%;
  line-height: 1.5;
}
.hero__caption {
  margin-top: var(--sp-s);
  font-size: var(--step--2);
  color: var(--mineral-300);
  line-height: 1.6;
  max-width: 46ch;
}

.hero__marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-s) var(--sp-m);
  margin-top: var(--sp-l);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--rule-dark);
}
.hero__mark { display: grid; gap: 0.25rem; }
.hero__mark b {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 300;
  color: var(--ivory-50);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__mark span {
  font-size: 0.71rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mineral-300);
  font-weight: 600;
  line-height: 1.55;
}

@media (max-width: 979px) {
  .hero { min-height: 0; padding-block: calc(var(--header-h) + var(--sp-l)) var(--sp-l); }
  .hero__stage { order: -1; max-width: 560px; }
}

/* Home — Legacy intro: offset editorial columns */
.legacy-intro__grid {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) {
  .legacy-intro__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--sp-xl);
    align-items: start;
  }
}
@media (min-width: 940px) and (min-height: 700px) {
  .legacy-intro__aside { position: sticky; top: calc(var(--header-h) + var(--sp-m)); }
}
.legacy-intro__figure { display: grid; gap: var(--sp-s); }


/* Home — Changing economy: split ink panel */
.split-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 1000px) {
  .split-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.split-panel__media {
  background: var(--ink-800);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-m);
  min-height: 320px;
}
.split-panel__media img {
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  border-radius: var(--radius-m);
}
.split-panel__body {
  background: var(--ink-950);
  color: var(--ivory-50);
  padding: var(--sp-xl) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-panel__body > * { max-width: 62ch; }
.split-panel__body h2 { color: var(--ivory-50); }
.split-panel__body p { color: var(--mineral-200); }
@media (min-width: 1000px) {
  .split-panel__body { padding-inline: clamp(2.5rem, 4vw, 5rem); }
}

/* Home — Perspective pillars: staggered ruled columns */
.pillars {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pillar {
  padding: var(--sp-l) var(--sp-m) var(--sp-l) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
@media (min-width: 760px) {
  .pillar { padding-right: var(--sp-l); }
  .pillar:nth-child(2n) { padding-left: var(--sp-l); border-left: 1px solid var(--rule); }
}
@media (min-width: 1120px) {
  .pillar:nth-child(2n) { padding-left: var(--sp-l); border-left: 1px solid var(--rule); }
  .pillar:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(3n+2), .pillar:nth-child(3n+3) { padding-left: var(--sp-l); border-left: 1px solid var(--rule); }
}
.pillar__idx {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--copper-700);
  font-weight: 700;
  display: block;
  margin-bottom: var(--sp-s);
}
.pillar h3 { font-size: var(--step-2); margin-bottom: 0.5em; }
.pillar p { color: var(--slate-500); font-size: var(--step--1); line-height: 1.75; }

/* Home — Horizontal heritage rail */
.rail-wrap { position: relative; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 320px);
  gap: var(--sp-m);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-m);
  scrollbar-width: thin;
  scrollbar-color: rgba(220,169,127,0.5) rgba(199,209,215,0.12);
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { height: 5px; }
.rail::-webkit-scrollbar-track { background: rgba(199,209,215,0.12); }
.rail::-webkit-scrollbar-thumb { background: rgba(220,169,127,0.55); border-radius: 4px; }
.rail-item {
  scroll-snap-align: start;
  border-top: 2px solid rgba(220, 169, 127, 0.55);
  padding-top: var(--sp-s);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rail-item .rail-item__year {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  color: var(--copper-300);
  line-height: 1;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rail-item__title {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ivory-50);
  line-height: 1.5;
}
.rail-item p { font-size: var(--step--1); color: var(--mineral-300); line-height: 1.72; }
.rail-controls {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--sp-m);
  align-items: center;
  flex-wrap: wrap;
}
.rail-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rule-dark-strong);
  background: transparent;
  color: var(--ivory-100);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rail-btn:hover:not(:disabled) { background: var(--copper-400); color: var(--ink-950); border-color: var(--copper-400); }
.rail-btn:disabled { opacity: 0.32; cursor: default; }
.rail-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rail-hint {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mineral-300);
  margin-left: 0.4rem;
  font-weight: 600;
}

/* Home — Mauritius context: figure + ledger */
.context-grid {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .context-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-xl); align-items: center; }
}
.ledger { border-top: 1px solid var(--rule); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-s);
  align-items: baseline;
  padding: var(--sp-s) 0;
  border-bottom: 1px solid var(--rule);
}
.ledger__label { font-size: var(--step--1); color: var(--slate-500); line-height: 1.6; }
.ledger__value {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--ink-700);
  font-weight: 300;
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: -0.015em;
}

/* Home — Insights index rows */
.index-rows { border-top: 1px solid var(--rule); }
.index-row {
  display: grid;
  gap: var(--sp-2xs) var(--sp-m);
  padding: var(--sp-m) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: background 0.4s var(--ease), padding-left 0.4s var(--ease);
}
@media (min-width: 860px) {
  .index-row { grid-template-columns: 8.5rem minmax(0, 1.5fr) minmax(0, 1fr) auto; }
}
.index-row:hover { background: var(--ivory-100); padding-left: var(--sp-s); }
.sec--sand .index-row:hover { background: var(--ivory-200); }
.index-row__cat {
  font-size: 0.715rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-700);
  font-weight: 700;
  line-height: 1.7;
}
.index-row__title {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink-800);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.012em;
}
.index-row__dek { font-size: var(--step--1); color: var(--slate-500); line-height: 1.7; margin: 0; }
.index-row__go {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.index-row:hover .index-row__go { color: var(--copper-700); }

/* Home — Visual legacy strip */
.visual-strip {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 820px) {
  .visual-strip { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--sp-l); }
}
.visual-strip__item { display: grid; gap: var(--sp-xs); }
/* Frames track the source photographs closely so letterboxing stays minimal */

@media (min-width: 820px) {
  .visual-strip__item:nth-child(2) { margin-top: var(--sp-xl); }
}

/* ==========================================================================
   ABOUT — asymmetric offset spread with sticky identity rail
   ========================================================================== */
.about-open {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .about-open {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: var(--sp-xl);
    align-items: start;
  }
}
.about-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--ivory-100);
}
/* No sticky here: the card is taller than any realistic viewport, so pinning
   it would make its lower rows unreachable. */
.about-card__img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, var(--ink-700), var(--ink-950));
  display: flex; align-items: center; justify-content: center;
}
.about-card__img img { width: 100%; height: 100%; object-fit: contain; }
.about-card__body { padding: var(--sp-m); }
.about-card__name {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.15;
  margin-bottom: 0.35rem;
  font-weight: 400;
}
.about-card__role {
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-700);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: var(--sp-s);
}
.about-card dl { margin: 0; }

.about-body h2 { margin-top: 0; }
.about-body > * + h2 { margin-top: var(--sp-xl); }

/* About — offset image + text pairs */
.offset-pair {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .offset-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-xl); }
  .offset-pair--flip .offset-pair__media { order: 2; }
}


/* About — role matrix */
.role-matrix {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 700px) { .role-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .role-matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.role-cell {
  background: var(--ivory-50);
  padding: var(--sp-m);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.sec--sand .role-cell { background: var(--ivory-100); }
.role-cell__period {
  font-size: 0.71rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-700);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.role-cell h3 { font-size: var(--step-1); margin: 0; line-height: 1.25; }
.role-cell p { font-size: var(--step--1); color: var(--slate-500); line-height: 1.7; margin: 0; }

/* ==========================================================================
   LEADERSHIP JOURNEY — chaptered rail with sticky markers
   ========================================================================== */
.chapter {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--sp-xl);
  border-top: 1px solid var(--rule);
}
@media (min-width: 980px) {
  .chapter {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: var(--sp-xl);
    align-items: start;
  }
}
@media (min-width: 980px) and (min-height: 780px) {
  .chapter__aside { position: sticky; top: calc(var(--header-h) + var(--sp-l)); }
}
.chapter__num {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper-700);
  font-weight: 700;
  margin-bottom: var(--sp-s);
  display: block;
}
.chapter__years {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  color: var(--ink-700);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-xs);
}
.chapter__aside h2 { font-size: var(--step-2); line-height: 1.18; }
.chapter__aside .frame { margin-top: var(--sp-m); }
.chapter__body p { max-width: 66ch; }

.milestones { list-style: none; margin: var(--sp-m) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.milestones li {
  margin: 0;
  padding: var(--sp-s) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 0.2rem var(--sp-m);
}
@media (min-width: 640px) { .milestones li { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; } }
.milestones b {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--copper-700);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.milestones span { font-size: var(--step--1); color: var(--slate-500); line-height: 1.7; }
.sec--ink .milestones, .on-dark .milestones { border-top-color: var(--rule-dark); }
.sec--ink .milestones li, .on-dark .milestones li { border-bottom-color: var(--rule-dark); }
.sec--ink .milestones b, .on-dark .milestones b { color: var(--copper-300); }
.sec--ink .milestones span, .on-dark .milestones span { color: var(--mineral-200); }

/* ==========================================================================
   CURRIMJEE LEGACY — immersive era columns on ink
   ========================================================================== */
.era-band { border-top: 1px solid var(--rule-dark); padding-block: var(--sp-xl); }
.era-band:first-of-type { border-top: 0; }
.era-grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .era-grid { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sp-xl); align-items: start; }
}
.era-marker {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  color: var(--copper-300);
  line-height: 1;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.era-marker span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.705rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mineral-300);
  margin-top: var(--sp-xs);
  font-weight: 700;
  line-height: 1.6;
}
.era-body h2 { font-size: var(--step-3); margin-bottom: 0.6em; }
.era-body p { max-width: 70ch; }

.era-facts {
  display: grid;
  gap: var(--sp-s) var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: var(--sp-m);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--rule-dark);
}
.era-fact { display: grid; gap: 0.3rem; }
.era-fact b {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--ivory-50);
  font-weight: 400;
  line-height: 1.25;
}
.era-fact span { font-size: var(--step--1); color: var(--mineral-300); line-height: 1.65; }

.legacy-figure { margin-top: var(--sp-l); display: grid; gap: var(--sp-s); }

@media (min-width: 900px) {
  .legacy-figure--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-m); }
  .legacy-figure--wide figcaption { grid-column: 1 / -1; }
}

/* Legacy — cluster mosaic */
.cluster-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
@media (min-width: 640px) { .cluster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .cluster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cluster {
  background: var(--ink-900);
  padding: var(--sp-m);
  display: grid;
  gap: 0.55rem;
  align-content: start;
  transition: background 0.4s var(--ease);
}
.cluster:hover { background: var(--ink-800); }
.cluster__no {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--copper-300);
  font-weight: 700;
}
.cluster h3 { font-size: var(--step-1); margin: 0; color: var(--ivory-50); line-height: 1.25; }
.cluster p { font-size: var(--step--1); color: var(--mineral-300); margin: 0; line-height: 1.7; }

/* ==========================================================================
   BUSINESS PERSPECTIVE — wide typographic spreads
   ========================================================================== */
.spread {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .spread { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-xl); }
}
.spread__title { font-size: var(--step-4); line-height: 1.08; }
@media (min-width: 1000px) and (min-height: 640px) {
  .spread__title { position: sticky; top: calc(var(--header-h) + var(--sp-l)); }
}
.spread__cols { columns: 1; column-gap: var(--sp-l); }
@media (min-width: 1240px) { .spread__cols { columns: 2; } }
.spread__cols p { break-inside: avoid; max-width: none; }

.principle-stack { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.principle {
  padding-block: var(--sp-l);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: var(--sp-s) var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) {
  .principle { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; }
}
.principle__mark {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  line-height: 0.9;
  color: var(--copper-500);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.principle h3 { font-size: var(--step-3); line-height: 1.14; margin-bottom: 0.5em; }
.principle__grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--sp-m);
}
@media (min-width: 820px) { .principle__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.principle__sub h4 {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-700);
  font-weight: 700;
  margin-bottom: 0.6em;
}
.principle__sub p { font-size: var(--step--1); line-height: 1.75; color: var(--slate-500); }

/* Attribution key */
.attrib-key {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-m);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-m);
  background: rgba(199, 209, 215, 0.045);
}
@media (min-width: 860px) { .attrib-key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.attrib-key__item { display: grid; gap: 0.45rem; align-content: start; }
.attrib-key__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper-300);
}
.attrib-key__tag::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--copper-400);
  flex: none;
}
.attrib-key__item:nth-child(2) .attrib-key__tag::before { background: var(--ink-500); }
.attrib-key__item:nth-child(3) .attrib-key__tag::before { background: var(--slate-400); }
.attrib-key p { font-size: var(--step--1); color: var(--mineral-200); line-height: 1.7; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.32rem 0.65rem;
  border-radius: 100px;
  border: 1px solid var(--rule-strong);
  color: var(--slate-500);
  line-height: 1.5;
  margin-bottom: var(--sp-xs);
  white-space: nowrap;
}
.tag--verified { border-color: rgba(156, 95, 58, 0.45); color: var(--copper-700); background: rgba(240, 222, 201, 0.55); }
.tag--context { border-color: rgba(20, 72, 107, 0.35); color: var(--ink-600); background: rgba(225, 231, 234, 0.6); }
.tag--editorial { border-color: var(--rule-strong); color: var(--slate-500); background: rgba(234, 227, 214, 0.5); }

/* ==========================================================================
   MAURITIUS & GROWTH — data-led layout
   ========================================================================== */
.data-hero {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .data-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-xl); align-items: center; }
}

.chart-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  padding: var(--sp-m);
  background: var(--ivory-50);
}
.sec--sand .chart-card { background: var(--ivory-50); }
.sec--ink .chart-card, .on-dark .chart-card {
  background: rgba(199, 209, 215, 0.04);
  border-color: var(--rule-dark);
}
.chart-card__title {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: 0.35rem;
}
.sec--ink .chart-card__title, .on-dark .chart-card__title { color: var(--ivory-50); }
.chart-card__sub { font-size: var(--step--2); color: var(--slate-500); margin-bottom: var(--sp-m); line-height: 1.6; }
.sec--ink .chart-card__sub, .on-dark .chart-card__sub { color: var(--mineral-300); }

/* Horizontal bar chart (pure CSS, accessible table fallback) */
.bars { display: grid; gap: var(--sp-s); margin: 0; }
.bar-row { display: grid; gap: 0.35rem; }
.bar-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-s);
  font-size: var(--step--1);
}
.bar-row__name { color: var(--text); line-height: 1.5; }
.sec--ink .bar-row__name, .on-dark .bar-row__name { color: var(--ivory-100); }
.bar-row__val {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--ink-700);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.2;
}
.sec--ink .bar-row__val, .on-dark .bar-row__val { color: var(--copper-300); }
.bar-track {
  height: 8px;
  background: rgba(35, 46, 55, 0.1);
  border-radius: 100px;
  overflow: hidden;
}
.sec--ink .bar-track, .on-dark .bar-track { background: rgba(199, 209, 215, 0.14); }
.bar-fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--ink-600), var(--copper-500));
  width: 0;
  transition: width 1.3s var(--ease-out);
}
.bar-fill.is-in { width: var(--w, 0%); }
.js-off .bar-fill { width: var(--w, 0%); }
@media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; width: var(--w, 0%); } }

/* Column chart */
.cols-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(0.4rem, 1.4vw, 1.1rem);
  align-items: end;
  height: clamp(180px, 26vw, 260px);
  padding-top: var(--sp-s);
  border-bottom: 1px solid var(--rule);
}
.sec--ink .cols-chart, .on-dark .cols-chart { border-bottom-color: var(--rule-dark); }
.col-item {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  height: 100%;
  min-height: 0;
  text-align: center;
}
.col-bar {
  background: linear-gradient(180deg, var(--copper-400), var(--ink-600));
  border-radius: 2px 2px 0 0;
  height: 0;
  width: 100%;
  transition: height 1.2s var(--ease-out);
  align-self: end;
  min-height: 3px;
}
.col-bar.is-in { height: var(--h, 0%); }
.js-off .col-bar { height: var(--h, 0%); }
@media (prefers-reduced-motion: reduce) { .col-bar { transition: none; height: var(--h, 0%); } }
.col-val {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.sec--ink .col-val, .on-dark .col-val { color: var(--copper-300); }
.col-key {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--slate-500);
  font-weight: 600;
  padding-top: 0.45rem;
  line-height: 1.4;
}
.sec--ink .col-key, .on-dark .col-key { color: var(--mineral-300); }

/* Data table */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
}
.sec--ink .data-table-wrap, .on-dark .data-table-wrap { border-color: var(--rule-dark); }
.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.data-table caption {
  text-align: left;
  padding: var(--sp-s) var(--sp-m);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
.data-table th, .data-table td {
  padding: 0.85rem var(--sp-m);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
  vertical-align: top;
}
.data-table thead th {
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
  background: var(--ivory-100);
}
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody th { font-weight: 600; color: var(--text-strong); }
.data-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sec--ink .data-table caption, .on-dark .data-table caption { color: var(--mineral-300); border-bottom-color: var(--rule-dark); }
.sec--ink .data-table th, .sec--ink .data-table td,
.on-dark .data-table th, .on-dark .data-table td { border-bottom-color: var(--rule-dark); color: var(--mineral-200); }
.sec--ink .data-table thead th, .on-dark .data-table thead th { background: rgba(199,209,215,0.06); color: var(--mineral-300); }
.sec--ink .data-table tbody th, .on-dark .data-table tbody th { color: var(--ivory-50); }

/* Corridor / opportunity blocks */
.corridors {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 780px) { .corridors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .corridors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-l); } }
.corridor {
  border-top: 2px solid var(--copper-500);
  padding-top: var(--sp-s);
}
.corridor h3 { font-size: var(--step-2); margin-bottom: 0.45em; }
.corridor p { font-size: var(--step--1); line-height: 1.75; color: var(--slate-500); }
.sec--ink .corridor p, .on-dark .corridor p { color: var(--mineral-200); }

/* ==========================================================================
   INSIGHTS — magazine index + long-form article
   ========================================================================== */
.insight-lead {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 980px) {
  .insight-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-xl); }
}

.insight-lead__title { font-size: var(--step-4); line-height: 1.08; margin-bottom: var(--sp-s); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: var(--sp-l);
  padding-bottom: var(--sp-m);
  border-bottom: 1px solid var(--rule);
}
.filter-chip {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  background: transparent;
  color: var(--slate-500);
  cursor: pointer;
  min-height: 42px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  line-height: 1.4;
}
.filter-chip:hover { border-color: var(--copper-500); color: var(--copper-700); }
.filter-chip[aria-pressed="true"] {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: var(--ivory-50);
}

.article-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.article-row {
  display: grid;
  gap: var(--sp-s) var(--sp-m);
  padding-block: var(--sp-m);
  border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 860px) {
  .article-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--sp-l); align-items: center; }
}
.article-row.is-hidden { display: none; }

.article-row__cat {
  font-size: 0.71rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-700);
  font-weight: 700;
  margin-bottom: 0.6rem;
  display: block;
  line-height: 1.6;
}
.article-row h3 { font-size: var(--step-2); line-height: 1.2; margin-bottom: 0.4em; }
.article-row h3 a { transition: color 0.3s var(--ease); }
.article-row h3 a:hover { color: var(--copper-700); }
.article-row p { font-size: var(--step--1); color: var(--slate-500); line-height: 1.75; max-width: 68ch; }
.article-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--sp-s);
  margin-top: var(--sp-xs);
  font-size: 0.71rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
}

/* Article page */
.article-hero {
  background: var(--ink-950);
  color: var(--ivory-50);
  padding-block: calc(var(--header-h) + var(--sp-l)) var(--sp-l);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.article-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 88% 0%, rgba(29,92,134,0.42), rgba(3,18,31,0) 64%);
  z-index: -1;
}
.article-hero h1 { color: var(--ivory-50); font-size: var(--step-5); line-height: 1.05; max-width: 20ch; }
.article-hero__dek { color: var(--mineral-200); font-size: var(--step-1); max-width: 62ch; line-height: 1.6; margin-top: var(--sp-s); }
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-m);
  margin-top: var(--sp-m);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--rule-dark);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mineral-300);
  font-weight: 600;
}

.article-shell {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1060px) {
  .article-shell { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--sp-xl); align-items: start; }
}
@media (min-width: 1060px) and (min-height: 900px) {
  .article-aside { position: sticky; top: calc(var(--header-h) + var(--sp-m)); }
}
.article-body { font-size: var(--step-0); }
.article-body > p:first-of-type { font-size: var(--step-1); line-height: 1.65; color: var(--slate-600); }
.article-body h2 { font-size: var(--step-3); margin-top: 1.5em; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: var(--step-1); margin-top: 1.8em; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.005em; }
.article-body figure { margin: var(--sp-l) 0; display: grid; gap: var(--sp-xs); }

.article-body figcaption { font-size: var(--step--2); color: var(--slate-500); line-height: 1.6; }

.aside-box {
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  padding: var(--sp-m);
  background: var(--ivory-100);
  margin-bottom: var(--sp-m);
}
.aside-box h4,
.aside-box .aside-box__h {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-700);
  font-weight: 700;
  margin-bottom: var(--sp-s);
  margin-top: 0;
  line-height: 1.5;
}
.aside-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.aside-box li { margin: 0; font-size: var(--step--1); line-height: 1.6; }
.aside-box a { color: var(--ink-700); border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.aside-box a:hover { color: var(--copper-700); border-bottom-color: var(--copper-500); }

.related-grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-l); } }
.related-item { border-top: 2px solid var(--copper-500); padding-top: var(--sp-s); }
.related-item__cat {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-700);
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}
.related-item h3 { font-size: var(--step-1); line-height: 1.25; margin-bottom: 0.4em; }
.related-item p { font-size: var(--step--1); color: var(--slate-500); line-height: 1.7; }
.sec--ink .related-item h3, .on-dark .related-item h3 { color: var(--ivory-50); }
.sec--ink .related-item p, .on-dark .related-item p { color: var(--mineral-300); }
.sec--ink .related-item__cat, .on-dark .related-item__cat { color: var(--copper-300); }

/* ==========================================================================
   GALLERY — asymmetric editorial mosaic + lightbox
   ========================================================================== */
.gal-groups { display: grid; gap: var(--sp-xl); }
.gal-group__head {
  display: grid;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-m);
  padding-bottom: var(--sp-s);
  border-bottom: 1px solid var(--rule);
}
.gal-group__head h2 { font-size: var(--step-3); margin: 0; }
.gal-group__head p { font-size: var(--step--1); color: var(--slate-500); max-width: 72ch; }

/* Editorial masonry: multi-column flow lets every photograph keep its own
   proportions, so nothing is cropped and nothing is letterboxed. */
.mosaic {
  columns: 1;
  column-gap: var(--sp-m);
}
@media (min-width: 620px) { .mosaic { columns: 2; } }
@media (min-width: 1180px) { .mosaic { columns: 3; } }
.mosaic--duo { columns: 1; }
@media (min-width: 720px) { .mosaic--duo { columns: 2; } }

.gal-item {
  display: block;
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--sp-m);
}
.gal-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  text-align: left;
}
.gal-btn .frame {
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.gal-btn:hover .frame { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(3, 18, 31, 0.16); }
.gal-btn .frame img { transition: transform 0.7s var(--ease); }
.gal-btn:hover .frame img { transform: scale(1.018); }
.gal-item__cap {
  margin-top: var(--sp-xs);
  font-size: var(--step--2);
  color: var(--slate-500);
  line-height: 1.6;
  padding-top: 0.15rem;
}
.gal-item__cap b { display: block; color: var(--text-strong); font-weight: 600; margin-bottom: 0.1rem; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(3, 18, 31, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-s);
  color: var(--mineral-300);
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-s);
  flex: none;
}
.lightbox__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-s);
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-m);
}
.lightbox__cap {
  flex: none;
  margin-top: var(--sp-s);
  color: var(--mineral-200);
  font-size: var(--step--1);
  line-height: 1.6;
  text-align: center;
  max-width: 78ch;
  margin-inline: auto;
}
.lb-btn {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(199,209,215,0.32);
  background: rgba(3,18,31,0.6);
  color: var(--ivory-50);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lb-btn:hover { background: var(--copper-400); color: var(--ink-950); border-color: var(--copper-400); }
.lb-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
body.lb-open { overflow: hidden; }

/* ==========================================================================
   CONTACT — split screen
   ========================================================================== */
.contact-split {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .contact-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--sp-xl); }
}
.contact-card {
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-m);
  background: rgba(199, 209, 215, 0.045);
  overflow: hidden;
}
.contact-card__head {
  padding: var(--sp-m);
  border-bottom: 1px solid var(--rule-dark);
}
.contact-card__head h2 { font-size: var(--step-2); margin: 0 0 0.3em; color: var(--ivory-50); }
.contact-card__head p { margin: 0; font-size: var(--step--1); color: var(--mineral-300); }
.contact-lines { display: grid; }
.contact-line {
  display: grid;
  gap: 0.35rem var(--sp-m);
  padding: var(--sp-m);
  border-bottom: 1px solid var(--rule-dark);
  align-items: center;
  transition: background 0.35s var(--ease);
}
@media (min-width: 560px) {
  .contact-line { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
.contact-line:last-child { border-bottom: 0; }
a.contact-line:hover { background: rgba(199, 209, 215, 0.08); }
.contact-line__k {
  font-size: 0.71rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-300);
  font-weight: 700;
  line-height: 1.6;
}
.contact-line__v {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--ivory-50);
  line-height: 1.25;
  font-weight: 300;
  word-break: break-word;
  letter-spacing: -0.01em;
}
.contact-line__note { display: block; font-size: var(--step--2); color: var(--mineral-300); line-height: 1.6; margin-top: 0.3rem; }



.contact-nav {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.contact-nav__row {
  display: grid;
  gap: 0.3rem var(--sp-m);
  padding: var(--sp-s) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: padding-left 0.35s var(--ease), background 0.35s var(--ease);
}
@media (min-width: 700px) { .contact-nav__row { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); } }
.contact-nav__row:hover { padding-left: var(--sp-s); background: var(--ivory-100); }
.contact-nav__t { font-family: var(--font-serif); font-size: var(--step-1); color: var(--ink-800); line-height: 1.3; }
.contact-nav__d { font-size: var(--step--1); color: var(--slate-500); line-height: 1.65; }

/* ==========================================================================
   PASSCODE GATE (index.html)
   ========================================================================== */
.gate {
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--ink-950);
  color: var(--ivory-50);
  position: relative;
  overflow: hidden;
}
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 60% at 50% 0%, rgba(29, 92, 134, 0.36) 0%, rgba(3, 18, 31, 0) 66%),
    radial-gradient(58% 52% at 50% 100%, rgba(156, 95, 58, 0.2) 0%, rgba(3, 18, 31, 0) 70%);
  pointer-events: none;
}
.gate__panel {
  position: relative;
  width: 100%;
  max-width: 430px;
  text-align: center;
}
.gate__mark {
  width: 54px; height: 54px;
  margin: 0 auto var(--sp-m);
  border: 1px solid rgba(220, 169, 127, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--copper-300);
}
.gate__mark svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.gate__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 300;
  color: var(--ivory-50);
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.gate__hint {
  font-size: 0.8rem;
  color: var(--mineral-300);
  line-height: 1.7;
  margin: 0 auto var(--sp-l);
  max-width: 34ch;
}
.gate__form { display: grid; gap: var(--sp-s); }
.gate__field { display: grid; gap: 0.5rem; text-align: left; }
.gate__label {
  font-size: 0.705rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-300);
  font-weight: 700;
}
.gate__input {
  width: 100%;
  min-height: 56px;
  padding: 0.9rem 1.1rem;
  background: rgba(199, 209, 215, 0.07);
  border: 1px solid rgba(199, 209, 215, 0.26);
  border-radius: var(--radius-m);
  color: var(--ivory-50);
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0.24em;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.gate__input::placeholder { color: rgba(158, 174, 184, 0.5); letter-spacing: 0.2em; }
.gate__input:focus { outline: 2px solid var(--copper-400); outline-offset: 2px; border-color: transparent; background: rgba(199, 209, 215, 0.11); }
.gate__submit {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--copper-600);
  border-radius: var(--radius-m);
  background: var(--copper-600);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.gate__submit:hover { background: var(--ivory-50); color: var(--ink-950); border-color: var(--ivory-50); }
.gate__msg {
  min-height: 1.5rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--copper-300);
  margin: 0;
}
.gate__msg[data-state="error"] { color: #F2A88A; }
.gate__msg[data-state="ok"] { color: #9FD6BF; }
.gate--shake { animation: gate-shake 0.45s var(--ease); }
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) { .gate--shake { animation: none; } }
.gate__foot {
  margin-top: var(--sp-l);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mineral-300);
  line-height: 1.7;
}

/* Contact — paired portrait figure */
.contact-figure__pair {
  display: grid;
  gap: var(--sp-s);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 480px) {
  .contact-figure__pair { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: stretch; }
}




/* --------------------------------------------------------------------------
   ON-DARK VARIANTS — applied wherever a section paints an ink background.
   -------------------------------------------------------------------------- */
.on-dark .thesis-list { border-top-color: var(--rule-dark); }
.on-dark .thesis { border-bottom-color: var(--rule-dark); }
.on-dark .thesis__num { color: var(--copper-300); }
.on-dark .thesis__title { color: var(--ivory-50); }
.on-dark .thesis__body p { color: var(--mineral-200); }

.on-dark .principle-stack { border-top-color: var(--rule-dark); }
.on-dark .principle { border-bottom-color: var(--rule-dark); }
.on-dark .principle__mark { color: var(--copper-300); }
.on-dark .principle__sub h4 { color: var(--copper-300); }
.on-dark .principle__sub p { color: var(--mineral-200); }

.on-dark .ledger { border-top-color: var(--rule-dark); }
.on-dark .ledger__row { border-bottom-color: var(--rule-dark); }
.on-dark .ledger__label { color: var(--mineral-300); }
.on-dark .ledger__value { color: var(--copper-300); }

.on-dark .index-rows, .on-dark .index-row { border-color: var(--rule-dark); }
.on-dark .index-row__title { color: var(--ivory-50); }
.on-dark .index-row__dek { color: var(--mineral-300); }
.on-dark .index-row__cat, .on-dark .index-row:hover .index-row__go { color: var(--copper-300); }
.on-dark .index-row__go { color: var(--mineral-300); }
.on-dark .index-row:hover { background: rgba(199, 209, 215, 0.06); }

.on-dark .pillars, .on-dark .pillar { border-color: var(--rule-dark); }
.on-dark .pillar__idx { color: var(--copper-300); }
.on-dark .pillar h3 { color: var(--ivory-50); }
.on-dark .pillar p { color: var(--mineral-300); }

.on-dark .gal-group__head { border-bottom-color: var(--rule-dark); }
.on-dark .gal-item__cap { color: var(--mineral-300); }
.on-dark .gal-item__cap b { color: var(--ivory-50); }