/* ==========================================================================
   portfolio-hub — page styles
   --------------------------------------------------------------------------
   Light Swiss portfolio holdings page for /design/portfolio.html.
   Reuses the news-media-feed visual language — paper bg, Space Mono
   kickers, Geologica headings, IBM Plex Sans body, Milano-Red accent, hairline
   rules, hard corners. Pills + chips are rounded full-pill (the only
   curved surfaces).

   Layout: hero → summary strip → sticky filter bar → either LIST table
   or GRID tiered cards → asset drawer (slide-in from right).
   PLAYGROUND MODE: raw values throughout (no token snap).
   ========================================================================== */

.ph {
  --ph-bg:        #F0EEE7; /* warm archival paper — ties the page to the terrain maps (was cool #F4F5F7) */
  --ph-surface:   #FFFFFF;
  --ph-surface-2: #E9E6DE;
  --ph-ink:       #141A26;
  --ph-dim:       rgba(20, 26, 38, 0.62);
  --ph-faint:     rgba(20, 26, 38, 0.42);
  --ph-rule:      rgba(20, 26, 38, 0.12);
  --ph-rule-soft: rgba(20, 26, 38, 0.06);
  --ph-rule-strong: rgba(20, 26, 38, 0.90);
  --ph-accent:    #C42800;

  /* Commodity indicator colours — desaturated for the Swiss palette so
     they read as editorial labels, not loud tags. */
  --ph-cu: #B5683E;
  --ph-ag: #6E7785;
  --ph-au: #B58A22;
  --ph-u:  #3F7456;
  --ph-zn: #5A7C99;   /* zinc/lead — cool slate */
  --ph-ree: #5B4E9E;  /* REE — violet */
  --ph-fe: #8A6248;   /* iron-titanium — umber */
  --ph-spec: #6E7785; /* specialty metals — neutral */

  /* Page grid (2026-08-20). Aligned to the site-wide grid in css/layout.css:
     --ph-measure is the OUTER page box (gutters included), --ph-gutter the
     space either side of the text column. Both are exposed as properties so
     full-bleed furniture (the Norway map overlays) can sit on exactly the
     same left edge as the sections above and below it.
     NOTE: --ph-measure was the inner content column until the site-wide
     width pass; it is the outer box now, so consumers no longer add the
     gutters back on. */
  --ph-measure: var(--teako-page-max);
  --ph-gutter:  var(--teako-page-gutter);

  background: var(--ph-bg);
  color: var(--ph-ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The container was content-box (the theme set no global border-box), so
   max-width:1400 + 2×56px padding made every section 1512px wide — wider than
   a 1440 viewport. `margin: 0 auto` cannot go negative, so the sections all
   sat flush left with the right-hand gutter pushed off screen: a 56px gutter
   on the left, none on the right. That is the width inconsistency the client
   flagged on "What the ground holds / why Europe". border-box is now set
   globally in css/base.css and the max-width is the site-wide outer measure,
   so this page shares its left edge with every other page. */
.ph__container {
  width: 100%;
  max-width: var(--ph-measure);
  margin: 0 auto;
  padding: 0 var(--ph-gutter);
}

/* ---------- Hero / intro ----------
   Dark band across the top of the page — the only dark surface here,
   so it acts as a deliberate masthead before the light ledger below.
   Background is full-bleed via 100vw + negative margin (the .ph parent
   has no horizontal padding, but this guards against any future change). */

.ph__hero {
  position: relative;
  padding: 220px 0 120px;
  background-color: #0B0F16;
  /* Cinematic field — a portfolio still graded under a left-weighted scrim
     so the type stays legible while the imagery breathes on the right. The
     gradient sits ABOVE the photo in the same shorthand (first layer paints
     on top). Swap the url for a video element later if wanted. */
  background-image:
    linear-gradient(95deg,
      rgba(8, 11, 16, 0.94) 0%,
      rgba(8, 11, 16, 0.80) 38%,
      rgba(8, 11, 16, 0.55) 70%,
      rgba(8, 11, 16, 0.42) 100%),
    linear-gradient(0deg,
      rgba(8, 11, 16, 0.85) 0%,
      rgba(8, 11, 16, 0.10) 42%,
      rgba(8, 11, 16, 0.10) 100%),
    url("../../assets/images/projects-portfolio-final.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center 28%;
  background-repeat: no-repeat;
  color: #F4F5F7;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
/* Quiet 45° hairline pattern layered over the image — masked to the
   upper-right so the photo reads as graded film, not a flat slab. */
.ph__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.9) 0,
    rgba(255, 255, 255, 0.9) 1px,
    transparent 1px,
    transparent 16px
  );
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 65%);
          mask-image: linear-gradient(225deg, #000 0%, transparent 65%);
}
/* Hairline that anchors the hero to the data band below it. */
.ph__hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(244, 245, 247, 0.14);
  pointer-events: none;
}
.ph__eyebrow {
  display: inline-block;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 245, 247, 0.62);
  margin-bottom: 22px;
}
.ph__h1 {
  margin: 0 0 22px;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  max-width: 18ch;
  color: #F4F5F7;
}
/* Refined accent (2026-08-20: italic OFF at the client's request). The word
   is no longer set apart by slant — the thin Milano-red underline rule does
   the whole job, which is the quieter, more institutional reading anyway. */
.ph__h1 em {
  font-style: normal;
  font-weight: 300;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ph-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}
.ph__lede {
  margin: 0;
  max-width: 64ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.6;
  color: rgba(244, 245, 247, 0.62);
}

/* ---------- Summary stats strip ---------- */

.ph__summary {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ph-rule);
  /* Red top rule removed 2026-08-20 — standing rule: no red top lines on
     containers (client flagged them on the portfolio + investor pages). */
  background: var(--ph-surface);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(20, 26, 38, 0.06);
}
/* The tiny commodity bar inside a summary cell read as noise — gone. */
.ph__sum-bar { display: none !important; }
.ph__sum-cell {
  padding: 26px 28px 28px;
  border-right: 1px solid var(--ph-rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ph__sum-cell:last-child { border-right: 0; }
.ph__sum-k {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-dim);
}
.ph__sum-v {
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 3.6vw, 54px);
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
}
.ph__sum-v small {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ph-dim);
  font-weight: 400;
  margin-left: 4px;
}
.ph__sum-bar {
  display: flex;
  height: 4px;
  background: var(--ph-rule-soft);
  overflow: hidden;
  gap: 1px;
  margin-top: 4px;
}
.ph__sum-bar i { display: block; height: 100%; }

/* ---------- Filter bar (sticky again 2026-08-18 — carries the tier nav
   so orientation never gets lost on the long page) ---------- */

.ph__filters.is-stuck {
  box-shadow: 0 14px 40px rgba(20, 26, 38, 0.10);
  border-bottom: 1px solid var(--ph-rule);
}
.ph__tiernav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-end; }
.ph__tiernav-a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-dim);
  transition: color 140ms ease;
  white-space: nowrap; /* "PARTNER-FUNDED" / "UNDER LOI" broke mid-word at 1024 */
}
.ph__tiernav-a i { font-style: normal; color: var(--ph-accent); }
.ph__tiernav-a:hover { color: var(--ph-ink); }
@media (max-width: 980px) { .ph__tiernav { display: none; } }

.ph__filters {
  position: sticky;
  top: var(--nav-height, 98px); /* docks under the nav while it's visible… */
  z-index: 40;
  background: var(--ph-bg);
  border-bottom: 1px solid var(--ph-rule);
  margin-top: 56px;
  padding: 16px 0;
  transition: box-shadow 200ms ease, top 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* …and owns the top edge once the nav hides on downward scroll. */
html.nav-hidden .ph__filters { top: 0; }
.ph__filters-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ph__flabel {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-faint);
}

/* Commodity chips */
.ph__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ph__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--ph-rule);
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-dim);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.ph__chip:hover {
  color: var(--ph-ink);
  border-color: var(--ph-ink);
}
.ph__chip.is-on {
  background: var(--ph-ink);
  border-color: var(--ph-ink);
  color: #fff;
}
/* Commodity swatch — small square, Bauhaus key, not a dot. */
.ph__chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

/* Ownership segmented control — sharp, hairline-divided cells. */
.ph__seg {
  display: inline-flex;
  border: 1px solid var(--ph-rule);
  border-radius: 0;
  overflow: hidden;
}
.ph__seg-btn {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--ph-rule);
  background: transparent;
  padding: 8px 16px;
  border-radius: 0;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-dim);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.ph__seg-btn:first-child { border-left: 0; }
.ph__seg-btn:hover { color: var(--ph-ink); }
.ph__seg-btn.is-on {
  background: var(--ph-ink);
  color: #fff;
}

/* Search */
.ph__search {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--ph-rule);
  border-radius: 0;
  padding: 8px 14px;
  min-width: 220px;
  color: var(--ph-dim);
  transition: border-color 200ms ease;
}
.ph__search:focus-within { border-color: var(--ph-ink); color: var(--ph-ink); }
.ph__search svg { width: 14px; height: 14px; flex-shrink: 0; }
.ph__search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ph-ink);
  outline: none;
}
.ph__search input::placeholder { color: var(--ph-faint); }

/* View toggle — sharp, hairline-divided. */
.ph__view-toggle {
  display: inline-flex;
  border: 1px solid var(--ph-rule);
  border-radius: 0;
  overflow: hidden;
}
.ph__view-btn {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--ph-rule);
  background: transparent;
  padding: 8px 12px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-dim);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.ph__view-btn:first-child { border-left: 0; }
.ph__view-btn:hover { color: var(--ph-ink); }
.ph__view-btn.is-on { background: var(--ph-ink); color: #fff; }
.ph__view-btn svg { width: 12px; height: 12px; }

.ph__count {
  margin-left: auto;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-dim);
}

/* ---------- View shell ---------- */

.ph__view { display: none; padding: 36px 0 120px; }
.ph__view.is-active { display: block; }
.ph__empty {
  padding: 80px 0;
  text-align: center;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-dim);
}

/* ---------- LIST view (ledger table) ---------- */

.ph__ledger-note {
  margin: 0 0 14px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ph-dim);
}
.ph__table {
  width: 100%;
  border-collapse: collapse;
}
.ph__table th {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-dim);
  padding: 0 18px 14px;
  border-bottom: 1.5px solid var(--ph-rule-strong);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: color 200ms ease;
}
.ph__table th:hover { color: var(--ph-ink); }
.ph__table th[data-dir="up"]::after   { content: ' \2191'; color: var(--ph-accent); }
.ph__table th[data-dir="down"]::after { content: ' \2193'; color: var(--ph-accent); }
.ph__table th.right { text-align: right; }
.ph__table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--ph-rule-soft);
  vertical-align: middle;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ph-ink);
}
.ph__table tbody tr {
  cursor: pointer;
  transition: background 160ms ease;
}
.ph__table tbody tr:hover { background: var(--ph-surface-2); }
.ph__table td.right { text-align: right; font-family: 'Space Mono', ui-monospace, monospace; font-size: 13px; font-variant-numeric: tabular-nums; }

.ph__asset-name {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ph-ink);
}
.ph__asset-sub {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ph-dim);
  margin-top: 4px;
}

/* Commodity tag inside cells — colour-coded outline pill */
.ph__comm-row {
  display: inline-flex;
  gap: 5px;
}
.ph__comm-tag {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 0;
}
.ph__comm-tag[data-c="Cu"] { color: var(--ph-cu); border-color: rgba(181, 104, 62, 0.45); }
.ph__comm-tag[data-c="Ag"] { color: var(--ph-ag); border-color: rgba(110, 119, 133, 0.45); }
.ph__comm-tag[data-c="Au"] { color: var(--ph-au); border-color: rgba(181, 138, 34, 0.45); }
.ph__comm-tag[data-c="U"]  { color: var(--ph-u);  border-color: rgba(63, 116, 86, 0.45); }

/* Ownership */
.ph__own-wrap { display: inline-flex; align-items: center; gap: 10px; }
.ph__own-track { width: 56px; height: 4px; background: var(--ph-rule); overflow: hidden; flex-shrink: 0; }
.ph__own-fill { height: 100%; background: var(--ph-accent); }
.ph__own-num {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
}

/* Stage */
.ph__stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ph-ink);
}
.ph__stage-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ph-dim); flex-shrink: 0; }
.ph__stage[data-s="Advanced"]      .ph__stage-dot,
.ph__stage[data-s="Drill-ready"]   .ph__stage-dot { background: var(--ph-u); }
.ph__stage[data-s="Exploration"]   .ph__stage-dot { background: var(--ph-au); }
.ph__stage[data-s="Reconnaissance"].ph__stage-dot { background: var(--ph-dim); }
.ph__stage[data-s="Dormant"]       .ph__stage-dot { background: var(--ph-faint); }

/* Enquire button (row-level) */
.ph__enq-btn {
  appearance: none;
  padding: 8px 15px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--ph-accent);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-accent);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  white-space: nowrap;
}
.ph__enq-btn:hover { background: var(--ph-accent); color: #fff; }

/* ---------- GRID view (tiered showcase) ---------- */

.ph__tier { margin-bottom: 64px; }
.ph__tier:last-child { margin-bottom: 0; }

.ph__tier-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ph-rule);
}
.ph__tier-h {
  margin: 0;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300; /* D1 */
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ph-ink);
}
.ph__tier-n {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-accent);
}
.ph__tier-desc {
  margin: 0 0 26px;
  max-width: 64ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ph-dim);
}

/* Flagship — large 2-col cards */
.ph__flag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.ph__flag {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 32px 28px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-rule);
  cursor: pointer;
  transition: border-color 220ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 260px;
}
.ph__flag:hover {
  border-color: var(--ph-ink);
  transform: translateY(-2px);
}
.ph__flag-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.ph__flag h3 {
  margin: 0;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300; /* D1 */
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ph-ink);
}
.ph__flag-loc {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin-top: 7px;
}
.ph__flag p {
  margin: 16px 0 auto;
  max-width: 46ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ph-dim);
}
.ph__flag-stats {
  display: flex;
  gap: 32px;
  margin-top: 22px;
}
.ph__flag-stat-k {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin-bottom: 6px;
}
.ph__flag-stat-v {
  display: block;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
}
.ph__flag-cta {
  position: absolute;
  right: 28px;
  bottom: 26px;
}

/* Active exploration — 3-col medium tiles */
.ph__mid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ph__mid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-rule);
  cursor: pointer;
  transition: border-color 200ms ease;
}
.ph__mid:hover { border-color: var(--ph-ink); }
.ph__mid-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.ph__mid-deal {
  /* Partner name, under the heading block. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: -4px;
}
/* Badge row (client, 3 Sep 2026): the deal mark sits top-left on its own
   line, tags to the right; the name + region drop beneath it. */
.ph__mid-head--deal { margin-bottom: 14px; align-items: center; }
.ph__mid-badge {
  font: 500 10px/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 8px 4px;
  /* Filled black, white text (client, 3 Sep 2026), with very subtle
     dark-grey diagonal hatching inside the label (client, 4 Sep 2026). */
  background-color: var(--ph-ink, #141A26);
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, #262D3A 3px 4px);
  border: 1px solid var(--ph-ink, #141A26);
  color: #FAFAF7;
  white-space: nowrap;
}
.ph__mid-badge--loi {
  /* Letter of intent: darker grey fill, white text (client, 3 Sep 2026);
     hatching a touch lighter than the fill (client, 4 Sep 2026). */
  background-color: #4A5160;
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, #5B6271 3px 4px);
  border-color: #4A5160;
  color: #FAFAF7;
}
.ph__mid-partner {
  font: 400 11.5px/1.5 'Space Mono', ui-monospace, monospace;
  color: var(--ph-ink);
  opacity: 0.82;
}
.ph__mid h4 {
  margin: 0;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300; /* house heading weight — was the only Plex heading on the site */
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ph-ink);
}
.ph__mid-loc {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin-top: 5px;
}
.ph__mid-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ph-dim);
}

/* Strategic optionality — 4-col compact tiles */
.ph__opt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ph__opt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-rule-soft);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.ph__opt:hover {
  border-color: var(--ph-rule);
  background: var(--ph-surface-2);
}
.ph__opt-name {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ph-ink);
}
.ph__opt-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-dim);
}

/* ---------- Drawer (slide-in from right) ---------- */

/* Scrim — covers the whole viewport and BLURS what's behind it via
   backdrop-filter, so the page underneath softens when the drawer
   is open. Tint is gentler than before (0.45 → 0.32) because the
   blur is already doing the visual heavy-lifting. */
.ph__scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 38, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
          backdrop-filter: blur(10px) saturate(1.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 60;
}
.ph__scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Full-screen takeover (2026-08-18) — the drawer expands to the whole
   viewport: sticky title bar, sticky facts rail left, reading column right,
   the doc's figures inline. Opens with a quiet rise, not a slide. */
.ph__drawer {
  overflow-anchor: none; /* the fold compensates scrollTop itself (portfolio-hub.js) */
  position: fixed;
  inset: 0;
  width: auto;
  background: var(--ph-surface);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(0.992);
  /* Opacity settles in 150ms — a slow fade double-exposed the portfolio
     grid through the takeover surface. The transform carries the motion. */
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms linear;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ph__drawer.is-open { transform: none; opacity: 1; pointer-events: auto; }
/* Base link colour: unstyled anchors (figure wrappers etc.) otherwise fall
   to browser default blue — off-brand the moment one shows text. */
.ph__drawer a { color: inherit; }
/* Pop-out signal: a red hazard band down the left edge (same motif as the
   site's notice banner) — colour, not glow. */
.ph__drawer::before {
  content: '';
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(-45deg, var(--ph-accent) 0 9px, #8F1D00 9px 18px);
  z-index: 4;
}
/* Head cascade: eyebrow → title → location → chips rise in sequence,
   echoing the site menu's reveal. Close control stays instant. */
.ph__drawer-eye, .ph__drawer h3, .ph__drawer-loc, .ph__x-chips {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 340ms ease,
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    font-size 320ms cubic-bezier(0.22, 1, 0.36, 1),
    max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ph__drawer.is-open .ph__drawer-eye  { opacity: 1; transform: none; transition-delay: 40ms; }
.ph__drawer.is-open .ph__drawer h3,
.ph__drawer.is-open h3               { opacity: 1; transform: none; transition-delay: 90ms; }
.ph__drawer.is-open .ph__drawer-loc  { opacity: 1; transform: none; transition-delay: 150ms; }
.ph__drawer.is-open .ph__x-chips     { opacity: 1; transform: none; transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  .ph__drawer-eye, .ph__drawer h3, .ph__drawer-loc, .ph__x-chips { opacity: 1; transform: none; transition: none; }
}
.ph__drawer-head {
  padding: 26px clamp(24px, 5vw, 72px) 22px;
  border-bottom: 1px solid var(--ph-rule);
  position: sticky;
  top: 0;
  background: var(--ph-surface);
  z-index: 4;
  overflow: hidden;
  transition: padding 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Terminal signature: a red keyline across the very top of the takeover. */
.ph__drawer-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ph-accent);
}
/* Instrument readout under the close control. */
.ph__x-index {
  position: absolute;
  top: 58px;
  right: clamp(24px, 5vw, 72px);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-faint);
}
/* Ghost index numeral — quiet, structural, behind the header content. */
.ph__x-ghost {
  position: absolute;
  right: clamp(90px, 14vw, 220px);
  bottom: -14px;
  font-family: 'Geologica', sans-serif;
  font-weight: 200;
  font-size: clamp(72px, 9vw, 128px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(20, 26, 38, 0.05);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 760px) { .ph__x-ghost, .ph__x-index { display: none; } }
.ph__drawer-close {
  position: absolute;
  top: 28px;
  right: clamp(24px, 5vw, 72px);
  appearance: none;
  border: 0;
  background: transparent;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44px tap target (it's the takeover's only exit on mobile) — padding
     grows the hit area, negative margins keep the visual position. */
  padding: 14px 12px;
  margin: -14px -12px 0 0;
  z-index: 5;
}
.ph__drawer-close:hover { color: var(--ph-ink); }
.ph__drawer-close svg { width: 14px; height: 14px; }
.ph__drawer-eye {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-accent);
  margin-bottom: 14px;
}
.ph__drawer h3 {
  margin: 0;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300; /* D1 */
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ph-ink);
}
.ph__drawer-loc {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin-top: 10px;
  max-height: 40px;
  overflow: hidden;
}
.ph__drawer-body { padding: 40px clamp(24px, 5vw, 72px) 72px; }

/* Compact head: past ~180px of scroll the sticky head folds to a slim
   title bar — at full height it held 21% of every viewport, mostly empty.
   (Placed after the is-open cascade rules so the fold wins the cascade;
   font-size/max-height/margin ride the cascade group's transition list.) */
.ph__drawer.is-compact .ph__drawer-head { padding: 12px clamp(24px, 5vw, 72px) 12px; }
.ph__drawer.is-compact h3 { font-size: clamp(19px, 2.1vw, 24px); }
.ph__drawer.is-compact .ph__drawer-eye { margin-bottom: 4px; }
.ph__drawer.is-compact .ph__drawer-loc,
.ph__drawer.is-compact .ph__x-chips {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}
.ph__x-ghost, .ph__x-index { transition: opacity 220ms ease; }
.ph__drawer.is-compact .ph__x-ghost,
.ph__drawer.is-compact .ph__x-index { opacity: 0; }
.ph__drawer.is-compact .ph__drawer-close { top: 50%; margin-top: 0; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) {
  .ph__drawer-head { transition: none; }
}

/* Takeover layout: sticky facts rail + reading column, capped and centred. */
.ph__x-grid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 84px);
  max-width: 1320px;
  margin: 0 auto;
  align-items: start;
}
.ph__x-rail { position: sticky; top: 176px; } /* clears the chip-tall sticky head */
.ph__x-main { max-width: 780px; }
.ph__x-main > .ph__section-t:first-child { margin-top: 0; }
/* Facts read as an instrument block. Red keyline removed 2026-08-20
   (standing rule: no red top lines on containers). */
.ph__x-rail .ph__drawer-stats { border-top: 1px solid var(--ph-rule); }
/* Overview reads as the lede. */
.ph__x-main > .ph__section-t + p { font-size: 16.5px; line-height: 1.65; }
/* Staggered quiet reveal when the takeover opens. */
.ph__x-facts, .ph__x-rail, .ph__x-main, .ph__x-nav {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 380ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ph__drawer.is-open .ph__x-facts { opacity: 1; transform: none; transition-delay: 60ms; }
.ph__drawer.is-open .ph__x-rail  { opacity: 1; transform: none; transition-delay: 140ms; }
.ph__drawer.is-open .ph__x-main  { opacity: 1; transform: none; transition-delay: 210ms; }
.ph__drawer.is-open .ph__x-nav   { opacity: 1; transform: none; transition-delay: 280ms; }
/* THE accent moment of the dossier viewport: one solid red CTA. */
.ph__x-jump {
  appearance: none;
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--ph-accent);
  background: var(--ph-accent);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background 160ms ease;
}
.ph__x-jump:hover { background: #A62200; }

/* Inline document figures — technical-plate treatment: hairline frame with
   registration ticks in opposite corners. */
.ph__desc-fig { margin: 28px 0; }
.ph__desc-fig a { display: block; position: relative; border: 1px solid var(--ph-rule); padding: 10px; background: var(--ph-surface); }
.ph__desc-fig a::before,
.ph__desc-fig a::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.ph__desc-fig a::before { top: -1px; left: -1px; border-top: 1px solid var(--ph-ink); border-left: 1px solid var(--ph-ink); }
.ph__desc-fig a::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--ph-ink); border-right: 1px solid var(--ph-ink); }
.ph__desc-fig a:hover { border-color: var(--ph-accent); }
.ph__desc-fig img { display: block; width: 100%; height: auto; }
.ph__desc-fig figcaption {
  margin-top: 9px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ph-dim);
}
.ph__desc-fig-n { color: var(--ph-accent); margin-right: 10px; }

/* ============================================================
   Project dossier v3 (2026-08-18) — research-led layout:
   facts band → lede → pull numbers → highlights → labelled
   sections → target cards → timeline → notes/references.
   ============================================================ */

/* Tag chips under the takeover title. */
.ph__x-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; max-height: 96px; overflow: hidden; }
.ph__x-chips[hidden] { display: none; }
.ph__x-chip {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-ink);
  border: 1px solid var(--ph-rule);
  padding: 5px 10px;
}
.ph__x-chip--stage { color: var(--ph-accent); border-color: var(--ph-accent); }

/* Full-bleed terrain hero — claim boundary on paper hillshade, with mono
   instrument overlays. Breaks out of the body padding on every side. */
.ph__x-hero {
  position: relative;
  height: clamp(380px, 52vh, 580px);
  margin: -40px calc(-1 * clamp(24px, 5vw, 72px)) 44px;
  border-bottom: 1px solid var(--ph-rule);
  background: #E9E6DE;
}
.ph__x-hero[hidden] { display: none; }
/* Explicit box: MapLibre re-positions its container (adds .maplibregl-map,
   position:relative), so the host must carry hard dimensions of its own. */
.ph__x-hero-map { position: absolute !important; inset: 0; width: 100%; height: 100%; }
.ph__x-hero-map .maplibregl-canvas { outline: none; }
/* Brand guard: MapLibre ships its own Helvetica stack on its containers —
   anything it ever injects (attribution, error text) renders in ours. */
.ph__x-hero-map.maplibregl-map { font-family: 'Space Mono', ui-monospace, monospace; }
.ph__x-hero, .ph__x-hero * { pointer-events: none; }
.ph__x-hero-coords,
.ph__x-hero-tag {
  position: absolute;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-ink);
  background: rgba(255, 255, 255, 0.82);
  padding: 6px 10px;
  border: 1px solid var(--ph-rule);
}
.ph__x-hero-coords { top: 18px; left: clamp(24px, 5vw, 72px); }
.ph__x-hero-tag { bottom: 24px; right: clamp(24px, 5vw, 72px); color: var(--ph-dim); }

/* Quick-facts panel ON the terrain (panel-on-field, matching the portfolio
   hero). Bottom-left, plated, red keyline. */
.ph__x-facts {
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  bottom: 24px;
  /* Below the sticky head (z4): at z3 the card painted OVER the top bar.
     JS also fades it out as it approaches the bar (scroll handler). */
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 22px;
  width: min(430px, calc(100vw - 48px));
  background: var(--ph-surface);
  border: 1px solid var(--ph-rule);
  /* Red top rule removed 2026-08-20 — standing rule: no red top lines on
     containers (client flagged them on the portfolio + investor pages). */
  padding: 6px 20px 10px;
  box-shadow: 0 18px 50px rgba(20, 26, 38, 0.10);
}
.ph__x-fact { padding: 12px 0 10px; border-bottom: 1px solid var(--ph-rule-soft); }
.ph__x-fact:last-child { border-bottom: 0; grid-column: 1 / -1; }
.ph__x-fact:last-child { border-right: 0; }
.ph__x-fact span {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin-bottom: 7px;
}
.ph__x-fact b {
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ph-ink);
}

/* Dossier body: the lede opens the page — no wrapper border. */
.ph__drawer-desc--dossier { margin: 0; padding-top: 0; border-top: 0; }
.pd__lede {
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(19px, 2vw, 24px) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.012em;
  color: var(--ph-ink);
}

/* Pull-number stat band. */
.pd__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 34px 0 0;
  /* Red top rule removed 2026-08-20 — standing rule: no red top lines on
     containers (client flagged them on the portfolio + investor pages). */
  border-top: 1px solid var(--ph-rule);
  border-bottom: 1px solid var(--ph-rule);
}
.pd__stat { padding: 20px 18px 18px 0; border-right: 1px solid var(--ph-rule-soft); }
.pd__stat + .pd__stat { padding-left: 18px; }
.pd__stat:last-child { border-right: 0; }
.pd__stat b {
  display: block;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
}
.pd__stat b sup { font-size: 12px; }
.pd__stat span {
  display: block;
  margin-top: 8px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-dim);
}

/* Highlights — mono-indexed rows. */
.pd__hl { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: pdhl; }
.pd__hl li {
  counter-increment: pdhl;
  position: relative;
  padding: 13px 0 13px 44px;
  border-bottom: 1px solid var(--ph-rule-soft);
  font-size: 14.5px;
  line-height: 1.55;
}
.pd__hl li::before {
  content: counter(pdhl, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ph-faint); /* red is rationed: keylines + live states only */
}
.pd__hl li:hover::before { color: var(--ph-accent); }

/* Labelled sections. */
.pd__sec { margin: 44px 0 0; padding-top: 20px; border-top: 1px solid var(--ph-rule); scroll-margin-top: 130px; }
.pd__sec::before {
  content: attr(data-label);
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin-bottom: 14px;
}
/* 700px measure ≈ 84 characters a line — the full 780px column ran to 94. */
.pd__sec p { font-size: 15px; line-height: 1.7; max-width: 700px; }
.pd__sec p + p { margin-top: 12px; }

/* Target cards. */
.pd__tgt { border: 1px solid var(--ph-rule); padding: 18px 20px; margin: 14px 0 0; transition: border-color 160ms ease; }
.pd__tgt:hover { border-color: var(--ph-rule-strong); box-shadow: inset 2px 0 0 var(--ph-accent); }
.pd__tgt-n {
  display: inline-block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-accent);
  margin-bottom: 9px;
}
.pd__tgt p { font-size: 14px !important; line-height: 1.62 !important; }

/* Next-steps timeline rows. */
.pd__steps { margin-top: 4px; }
.pd__step {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ph-rule-soft);
}
.pd__step span {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-dim);
  padding-top: 2px;
}
.pd__step:first-child span { color: var(--ph-accent); } /* the next milestone is the accent moment */
.pd__step p { font-size: 14.5px; line-height: 1.6; }

/* ============================================================
   Commodity exposure — plated instrument cards (2026-08-18).
   ============================================================ */
.ph__mix-grid { gap: 16px !important; }
.ph__mix-col {
  background: var(--ph-surface);
  border: 1px solid var(--ph-rule);
  /* Red top rule removed 2026-08-20 (standing rule: no red top lines on
     containers — the client called them out on the portfolio and investor
     pages). The hairline border carries the plate on its own. */
  padding: 22px 24px 20px;
  box-shadow: 0 12px 34px rgba(20, 26, 38, 0.05);
}
.ph__mix-crma li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid var(--ph-rule-soft);
  transition: border-color 140ms ease;
}
.ph__mix-crma li:hover { border-bottom-color: var(--ph-accent); }
.ph__mix-crma li span:last-child {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ph-dim);
}
.ph__mix-col .ph__mix-stat b {
  display: block;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 3.4vw, 52px) !important;
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ph-ink);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.ph__mix-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ph-rule-soft);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ph-dim);
}
.ph__mix-deposits {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ph-dim);
}

/* ============================================================
   Dossier sections v2: numbered, gridded targets, railed steps.
   ============================================================ */
.ph__drawer-desc--dossier { counter-reset: pdsec; }
.pd__sec { position: relative; counter-increment: pdsec; }
.pd__sec::after {
  content: counter(pdsec, decimal-leading-zero);
  position: absolute;
  top: 20px;
  right: 0;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ph-faint);
}
.pd__tgt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 14px;
  /* Cards keep their own height — row-equalised stretch left short cards
     with ~200px of trapped whitespace beside long neighbours. */
  align-items: start;
}
.pd__tgt-grid .pd__tgt { margin: 0; }
.pd__steps {
  border-left: 1px solid var(--ph-rule);
  padding-left: 20px;
  margin-left: 3px;
}
.pd__step { position: relative; }
.pd__step::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 20px;
  width: 7px;
  height: 7px;
  background: var(--ph-accent);
}

/* Field photograph band. */
.pd__photo { margin: 30px 0 0; }
.pd__photo img {
  display: block;
  width: 100%;
  height: clamp(300px, 36vh, 430px);
  object-fit: cover;
  border: 1px solid var(--ph-rule);
}
.pd__photo figcaption {
  margin-top: 9px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ph-dim);
}

/* QP / provenance foot. */
.pd__qp {
  margin: 30px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--ph-rule-soft);
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  color: var(--ph-dim) !important;
}
.pd__qp a { color: var(--ph-ink); text-decoration-color: var(--ph-accent); }
.pd__qp a:hover { color: var(--ph-accent); }

/* Print / save PDF — the secondary rail action. */
.ph__x-print {
  appearance: none;
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid var(--ph-rule);
  background: transparent;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-dim);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.ph__x-print:hover { color: var(--ph-ink); border-color: var(--ph-rule-strong); }

/* Dossier print: the takeover becomes a clean document. */
@media print {
  body.ph-drawer-open .ph, body.ph-drawer-open .page-nav, body.ph-drawer-open .ph__scrim { display: none !important; }
  body.ph-drawer-open .ph__drawer {
    position: static !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }
  body.ph-drawer-open .ph__drawer::before,
  body.ph-drawer-open .ph__drawer-close,
  body.ph-drawer-open .ph__x-progress,
  body.ph-drawer-open .ph__x-ghost,
  body.ph-drawer-open .ph__x-toc,
  body.ph-drawer-open .ph__x-jump,
  body.ph-drawer-open .ph__x-print,
  body.ph-drawer-open .ph__drawer-news,
  body.ph-drawer-open .ph__enquire,
  body.ph-drawer-open .ph__x-nav { display: none !important; }
  body.ph-drawer-open .ph__drawer-head { position: static !important; }
  body.ph-drawer-open .ph__x-grid { display: block !important; }
  body.ph-drawer-open .ph__x-hero { height: 300px !important; margin: 0 0 24px !important; }
  body.ph-drawer-open .pd-reveal { opacity: 1 !important; transform: none !important; }
  body.ph-drawer-open .ph__desc-fig a::before,
  body.ph-drawer-open .ph__desc-fig a::after { display: none; }
}

/* Rail: section anchor nav. */
.ph__x-toc { margin-top: 20px; }
.ph__x-toc[hidden] { display: none; }
.ph__x-toc-links { display: flex; flex-direction: column; border-top: 1px solid var(--ph-rule); margin-top: 10px; }
.ph__x-toc-a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--ph-rule-soft);
  text-decoration: none;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ph-dim);
  transition: color 140ms ease;
}
.ph__x-toc-a i {
  font-style: normal;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ph-faint);
}
.ph__x-toc-a:hover { color: var(--ph-ink); }
.ph__x-toc-a.is-on { color: var(--ph-ink); }
.ph__x-toc-a.is-on i { color: var(--ph-accent); }

/* Notes + references as quiet accordion rows. */
.ph__drawer-desc--dossier details {
  margin: 26px 0 0;
  border: 1px solid var(--ph-rule);
  padding: 0;
}
.ph__drawer-desc--dossier summary {
  padding: 13px 18px;
  list-style: none;
}
.ph__drawer-desc--dossier summary::-webkit-details-marker { display: none; }
.ph__drawer-desc--dossier summary::after { content: '+'; float: right; color: var(--ph-faint); font-family: 'Space Mono', ui-monospace, monospace; }
.ph__drawer-desc--dossier details[open] summary::after { content: '–'; }
.ph__drawer-desc--dossier details p { padding: 0 18px; margin: 0 0 10px; }
.ph__drawer-desc--dossier details p:first-of-type { margin-top: 4px; }
.ph__drawer-desc--dossier details p:last-of-type { padding-bottom: 16px; }

/* Lightbox. */
.ph__lightbox {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(20, 26, 38, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 240ms ease;
}
.ph__lightbox.is-open { opacity: 1; }
.ph__lightbox[hidden] { display: none; }
.ph__lb-stage { margin: 0; max-width: min(92vw, 1400px); max-height: 88vh; display: flex; flex-direction: column; }
.ph__lb-stage img { max-width: 100%; max-height: calc(88vh - 46px); object-fit: contain; background: #fff; }
.ph__lb-stage figcaption {
  padding: 12px 2px 0;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}
.ph__lb-stage .ph__desc-fig-n { color: #FF6B4A; }
.ph__lb-close {
  position: absolute;
  top: 22px;
  right: clamp(24px, 5vw, 72px);
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ph__lb-close:hover { color: #fff; }
.ph__lb-close svg { width: 14px; height: 14px; }
.ph__lb-arrow {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  width: 46px;
  height: 46px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: border-color 140ms ease;
}
.ph__lb-arrow:hover { border-color: #fff; }
.ph__lb-arrow svg { width: 20px; height: 20px; }
.ph__lb-arrow--prev { left: clamp(16px, 3vw, 48px); }
.ph__lb-arrow--next { right: clamp(16px, 3vw, 48px); }

/* Reading progress hairline (sits on the head's bottom rule). */
.ph__x-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.ph__x-progress i {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--ph-accent);
}

/* One-time below-fold reveals. */
.pd-reveal { opacity: 0; transform: translateY(18px); transition: opacity 460ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.pd-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pd-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Portfolio page v2 (2026-08-18) — ledger register, counted bar,
   numbered main cards, all-claims Norway hero.
   ============================================================ */

/* Full-bleed Norway strip with every claim cell plotted. */
.ph__norway {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Taller band (2026-08-20): the client read the old 380–560px strip as
     cramped. +~30% gives the map room and lets the summary panel breathe. */
  height: clamp(500px, 68vh, 700px);
  border-top: 1px solid var(--ph-rule);
  border-bottom: 1px solid var(--ph-rule);
  background: #E9E6DE;
  /* No trailing margin (client, 2026-08-20: "weird spacing underneath it").
     The 64px that used to sit here showed as a pale empty strip between the
     map band and the dark aggregate section — a gap that read as a mistake
     rather than as breathing room. The two full-bleed bands now meet on the
     hairline, which is how every other band seam on the page behaves. */
  /* Same left/right edge as .ph__container, measured off this band's own
     width rather than 100vw so the panel never drifts off the page grid. */
  --ph-edge: calc(max(0px, (100% - var(--ph-measure)) / 2) + var(--ph-gutter));
}
.ph__norway[hidden] { display: none; }
.ph__norway-map { position: absolute !important; inset: 0; width: 100%; height: 100%; }
/* The map is click-interactive; only the overlay chips are inert. */
.ph__norway-counted, .ph__norway-tag, .ph__norway-hover { pointer-events: none; }
.ph__norway-hover {
  position: absolute;
  z-index: 3;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ph-ink);
  color: #fff;
  padding: 6px 10px;
  white-space: nowrap;
  transform: translateY(-100%);
}
.ph__norway-hover[hidden] { display: none; }
.ph__norway-tag,
.ph__norway-north {
  position: absolute;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--ph-rule);
  padding: 7px 11px;
  color: var(--ph-dim);
}
.ph__norway-tag { right: var(--ph-edge); top: 18px; }
/* Data credit — small, mandatory (OSM licence). */
.ph__norway-credit {
  position: absolute;
  left: var(--ph-edge);
  top: 18px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(20, 26, 38, 0.45);
  background: rgba(255, 255, 255, 0.75);
  padding: 4px 8px;
  pointer-events: none;
}

/* North indicator: makes the deliberate rotation read as a drawing convention. */
.ph__norway-north { right: var(--ph-edge); bottom: 20px; color: var(--ph-ink); }
.ph__norway-north::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 9px solid var(--ph-accent);
  margin-left: 7px;
  transform: rotate(62deg);
  transform-origin: 50% 65%;
}
.ph__norway-hover { background: #fff; color: var(--ph-ink); }

/* The summary panel ON the map — the panel-on-field signature.
   2026-08-20: red top rule removed and the plate switched to the house WHITE
   glass recipe (the hero investor-card treatment), which is what the client
   asked for on legibility grounds. The drop shadow is kept and deepened a
   little: over pale terrain the glass border alone would not describe an
   edge. Padding is up ~40% so the plate reads as generous, not cramped. */
.ph__nw-panel {
  position: absolute;
  left: var(--ph-edge);
  /* Optically centred against the map frame (client, 2026-08-20: "the content
     on the left-hand side is just centred on the left-hand side"). Stretch the
     plate between both edges and let auto block margins settle it — the height
     is content-driven, so no fixed offset has to be maintained as the rows or
     the band's vh clamp change. */
  top: 0;
  bottom: 0;
  height: max-content;
  margin-block: auto;
  z-index: 3;
  box-sizing: border-box;
  width: min(376px, calc(100% - 40px));
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
          backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  color: #14161C;
  box-shadow: 0 20px 56px rgba(20, 26, 38, 0.14);
  padding: 28px 30px 24px;
}
.ph__nw-big {
  display: inline-block;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(56px, 5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
}
.ph__nw-bigk {
  display: inline-block;
  margin-left: 10px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-dim);
}
.ph__nw-rows { margin-top: 14px; border-top: 1px solid var(--ph-rule); }
.ph__nw-row {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 2px;
  border-bottom: 1px solid var(--ph-rule-soft);
  cursor: pointer;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ph-ink);
  transition: color 140ms ease;
}
.ph__nw-sw {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.ph__nw-sw--mix { background: conic-gradient(#E23100 0 90deg, #8B7BD8 0 180deg, #D4A536 0 270deg, #6E9BD8 0); }
.ph__nw-sw--ring { background: transparent; border: 2px solid #C2308F; }
.ph__nw-row i { margin-left: auto; }
.ph__nw-row i {
  font-style: normal;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ph-accent);
  min-width: 22px;
}
.ph__nw-row:hover { color: var(--ph-accent); }
.ph__nw-foot {
  display: block;
  margin-top: 12px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-dim);
}

/* Country initials — cartographic furniture, never interactive. */
.ph__nw-country {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(20, 26, 38, 0.38);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  user-select: none;
}

/* Main-project label chips pinned to their claims. */
.ph__nw-label {
  appearance: none;
  border: 1px solid var(--ph-rule);
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 9px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ph-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms ease, color 140ms ease;
  pointer-events: auto;
}
.ph__nw-label i { font-style: normal; color: var(--ph-accent); margin-right: 6px; }
.ph__nw-label:hover { border-color: var(--ph-accent); color: var(--ph-accent); }
/* Labels join the entrance build. */
.ph__nw-label { opacity: 0; transform: translateY(6px); transition: opacity 320ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1); }
.ph__nw-label.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ph__nw-label { opacity: 1; transform: none; } }

/* Survey scale bar. */
.ph__norway-scale {
  position: absolute;
  bottom: 20px;
  right: calc(var(--ph-edge) + 74px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-ink);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--ph-rule);
  padding: 7px 11px;
  pointer-events: none;
}
.ph__norway-scale i { display: block; width: 120px; height: 0; border-top: 1.5px solid var(--ph-ink); }
@media (max-width: 860px) { .ph__norway-scale { display: none; } }
@media (max-width: 860px) {
  .ph__norway { height: clamp(520px, 72vh, 660px); }
  /* Still centred vertically (base rule); only the horizontal inset changes. */
  .ph__nw-panel { left: 16px; right: 16px; width: auto; padding: 20px 22px 16px; }
  .ph__nw-big { font-size: 46px; }
  .ph__nw-label { display: none; }
}
@media (max-width: 760px) { .ph__norway-tag { display: none; } .ph__norway { height: 340px; } }

/* Main-project cards: oversized ghost numerals + red title rule. */
.ph__flag { position: relative; overflow: hidden; }
.ph__flag-idx {
  position: absolute;
  top: -14px;
  right: 6px;
  font-family: 'Geologica', sans-serif;
  font-weight: 200;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(20, 26, 38, 0.06);
  pointer-events: none;
  user-select: none;
}
.ph__flag:hover .ph__flag-idx { color: rgba(196, 40, 0, 0.10); }
.ph__flag-head h3 { position: relative; display: inline-block; padding-bottom: 6px; }
.ph__flag-head h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--ph-accent);
}

/* The register as a ledger — the card grid becomes a single-column list. */
.ph__opt-grid { display: block !important; }
.ph__led-row {
  display: grid;
  /* Number column removed (client, 3 Sep 2026). */
  grid-template-columns: minmax(180px, 1.1fr) 1.6fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 12px 2px;
  border-bottom: 1px solid var(--ph-rule-soft);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.ph__led-row:first-child { border-top: 1px solid var(--ph-rule); }
.ph__led-row:hover { border-bottom-color: var(--ph-accent); background: rgba(196, 40, 0, 0.02); }
.ph__led-no {
  font-style: normal;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ph-faint);
}
.ph__led-row:hover .ph__led-no { color: var(--ph-accent); }
.ph__led-name { font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em; }
.ph__led-meta {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ph-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph__led-status {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ph-dim);
  border: 1px solid var(--ph-rule);
  padding: 3px 8px;
  white-space: nowrap;
}
.ph__led-status[data-s="Drilled 2025"], .ph__led-status[data-s="Drill-ready"] { color: var(--ph-accent); border-color: var(--ph-accent); }
@media (max-width: 860px) {
  .ph__led-row { grid-template-columns: 1fr auto; }
  .ph__led-meta { display: none; }
}

/* Dossier responsive. */
@media (max-width: 1020px) {
  .ph__x-facts { left: 16px; right: 16px; width: auto; padding: 2px 16px 8px; }
  .ph__x-toc { display: none; }
  .ph__x-hero { height: clamp(430px, 60vh, 560px); margin-top: -40px; }
  .ph__x-hero-tag { display: none; }
}
@media (max-width: 700px) {
  .pd__stats { grid-template-columns: repeat(2, 1fr); }
  .pd__stat { padding-left: 0 !important; border-right: 0; }
  .pd__step { grid-template-columns: 1fr; gap: 4px; }
}

/* Previous / next — a plated bar, two cells, hairline divider. */
.ph__x-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1320px;
  margin: 64px auto 0;
  border: 1px solid var(--ph-rule);
  /* Red top rule removed 2026-08-20 — standing rule: no red top lines on
     containers (client flagged them on the portfolio + investor pages). */
  background: var(--ph-surface);
  box-shadow: 0 12px 34px rgba(20, 26, 38, 0.05);
}
.ph__x-nav-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 22px 26px;
  cursor: pointer;
  text-align: left;
  color: var(--ph-ink);
  transition: background 160ms ease;
}
.ph__x-nav-btn:hover { background: rgba(196, 40, 0, 0.03); }
.ph__x-nav-btn--next { text-align: right; border-left: 1px solid var(--ph-rule-soft); grid-column: 2; }
/* First/last project: the single neighbour takes the full bar. */
.ph__x-nav--solo { grid-template-columns: 1fr; }
.ph__x-nav--solo .ph__x-nav-btn--next { grid-column: 1; border-left: 0; }
.ph__x-nav-btn span {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin-bottom: 6px;
}
.ph__x-nav-btn b {
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.ph__x-nav-btn:hover b { color: var(--ph-accent); }

@media (max-width: 1020px) {
  .ph__x-grid { grid-template-columns: 1fr; gap: 28px; }
  .ph__x-rail { position: static; }
}
.ph__drawer-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ph-rule);
  margin-bottom: 28px;
}
.ph__drawer-stat {
  padding: 16px 18px;
  border-right: 1px solid var(--ph-rule-soft);
  border-bottom: 1px solid var(--ph-rule-soft);
}
.ph__drawer-stat:nth-child(2n) { border-right: 0; }
.ph__drawer-stat:nth-last-child(-n+2) { border-bottom: 0; }
.ph__drawer-stat-k {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin-bottom: 6px;
}
.ph__drawer-stat-v {
  display: block;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ph-ink);
}
.ph__section-t {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-dim);
  margin: 24px 0 12px;
}
.ph__drawer-body p {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ph-ink);
}
.ph__lightnote {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed var(--ph-rule);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ph-dim);
}
.ph__lightnote svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* Register interest */
.ph__enquire {
  margin-top: 32px;
  padding: 26px;
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-rule);
}
.ph__enquire h4 {
  margin: 0 0 8px;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ph-ink);
}
.ph__enquire-sub {
  margin: 0 0 20px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ph-dim);
}
.ph__int-opts {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.ph__int-opt {
  flex: 1;
  appearance: none;
  text-align: center;
  border: 1px solid var(--ph-rule);
  background: var(--ph-surface);
  padding: 12px 10px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.ph__int-opt:hover { border-color: var(--ph-ink); }
.ph__int-opt.is-on {
  background: var(--ph-ink);
  border-color: var(--ph-ink);
  color: #fff;
}
.ph__int-opt-t {
  display: block;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.ph__int-opt-d {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}
.ph__efield {
  width: 100%;
  /* Inputs default to content-box — without this the field renders 30px
     wider than the Subscribe button beneath it. */
  box-sizing: border-box;
  background: var(--ph-surface);
  border: 1px solid var(--ph-rule);
  padding: 12px 14px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ph-ink);
  margin-bottom: 10px;
  outline: none;
  transition: border-color 200ms ease;
}
.ph__efield:focus { border-color: var(--ph-ink); }
.ph__efield::placeholder { color: var(--ph-faint); }
.ph__esubmit {
  width: 100%;
  appearance: none;
  border: 0;
  background: var(--ph-accent);
  color: #fff;
  padding: 14px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  transition: filter 200ms ease;
}
.ph__esubmit:hover { filter: brightness(1.08); }
.ph__edone {
  display: none;
  text-align: center;
  padding: 14px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ph-u);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .ph { --ph-gutter: var(--teako-page-gutter); } /* one knob — container padding AND map furniture follow */
  .ph__hero { padding: 130px 0 36px; }
  .ph__summary { grid-template-columns: repeat(3, 1fr); }
  .ph__summary .ph__sum-cell:nth-child(n+4) { border-top: 1px solid var(--ph-rule-soft); }
  .ph__filters-row { gap: 12px; }
  .ph__count { margin-left: 0; width: 100%; }
  .ph__flag-grid { grid-template-columns: 1fr; }
  .ph__mid-grid { grid-template-columns: repeat(2, 1fr); }
  .ph__opt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ph__summary { grid-template-columns: repeat(2, 1fr); }
  .ph__mid-grid,
  .ph__opt-grid { grid-template-columns: 1fr; }
  .ph__table th:nth-child(4),
  .ph__table td:nth-child(4),
  .ph__table th:nth-child(6),
  .ph__table td:nth-child(6) { display: none; }
}

/* ==========================================================================
   Commodity exposure (deck slide 15) — hatch bars + CRMA register.
   ========================================================================== */
.ph__mix { margin-top: 8px; padding-top: 34px; padding-bottom: 10px; }
.ph__mix-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(20, 26, 38, 0.92);
}
.ph__mix-kicker,
.ph__mix-label,
.ph__mix-src {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 26, 38, 0.5);
}
.ph__mix-kicker { color: #C42800; }
/* Section-header system: kicker + hairline runner + zero-padded count.
   Every section on the page opens with this exact rhythm. */
.ph__upside .ph__mix-kicker,
.ph__mix .ph__mix-kicker {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.ph__upside .ph__mix-kicker::after,
.ph__mix .ph__mix-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ph-rule);
  align-self: center;
}
.ph__sec-count {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--ph-dim);
}
/* Uniform section rhythm — the upside sits on the same container grid as
   every other section (left edge 56px), no special casing. */
.ph__upside { margin-bottom: 72px; }
/* IR conversion block (main projects). */
.ph__ir-line { margin-top: 16px; font-size: 12.5px; color: var(--ph-dim); }
.ph__ir-line a { color: var(--ph-ink); text-decoration-color: var(--ph-accent); }
.ph__ir-line a:hover { color: var(--ph-accent); }
.ph__agg { align-items: stretch; }
.ph__agg-box { display: flex; flex-direction: column; }
.ph__agg-s { margin-top: auto; padding-top: 8px; }
.ph__mix-h {
  margin: 8px 0 0;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 300; /* D1: Geologica 300, face from css/base.css */
  letter-spacing: -0.015em;
  color: #141A26;
}
.ph__mix-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px 64px;
  padding-top: 26px;
}
.ph__mix-bar { margin-bottom: 18px; }
.ph__mix-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  font-size: 13px;
  color: rgba(20, 26, 38, 0.65);
}
.ph__mix-bar-head b { font-weight: 500; color: #141A26; }
.ph__mix-bar-head > span {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ph__mix-bar-track {
  display: block;
  margin-top: 6px;
  height: 12px;
  border: 1px solid rgba(20, 26, 38, 0.14);
}
.ph__mix-bar-fill {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--mix-c, #141A26) 0, var(--mix-c, #141A26) 1.5px,
    transparent 1.5px, transparent 5px
  );
}
.ph__mix-deposits {
  margin: 20px 0 0;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20, 26, 38, 0.45);
}
.ph__mix-crma {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.ph__mix-crma li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20, 26, 38, 0.07);
  font-size: 14px;
  color: #141A26;
}
.ph__mix-crma li > span:last-child {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(20, 26, 38, 0.55);
}
.ph__mix-stat {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(20, 26, 38, 0.65);
  max-width: 380px;
}
.ph__mix-stat b {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 34px;
  color: #C42800;
  margin-bottom: 4px;
}
@media (max-width: 860px) {
  .ph__mix-grid { grid-template-columns: 1fr; }
  .ph__mix-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Phone: the register table scrolls sideways inside its own track instead of
   dragging the whole page wide. */
@media (max-width: 760px) {
  .ph__table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ph__table { min-width: 640px; }
}

.ph__own-note { font-size: 11px; line-height: 1.35; color: var(--ph-dim, #5E6673); display: inline-block; max-width: 180px; }

/* Drawer v2 — licence mini-map, maps & figures, related news (2026-08-03) */
.ph__drawer-map { height: 216px; margin: 0 0 18px; border: 1px solid rgba(20,26,38,.14); overflow: hidden; }
.ph__drawer-map[hidden] { display: none; }
.ph__drawer-map .maplibregl-canvas { outline: none; }
/* The mini-map is non-interactive — never let its canvas trap wheel/touch
   scrolling away from the drawer. */
.ph__drawer-map, .ph__drawer-map * { pointer-events: none; }
.ph__drawer-maps { margin: 22px 0 0; }
.ph__map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.ph__map-thumb { display: block; border: 1px solid rgba(20,26,38,.14); }
.ph__map-thumb img { display: block; width: 100%; height: 86px; object-fit: cover; }
.ph__factsheet { margin: 14px 0 0; font-size: 13px; }

/* Project description — client-authored long-form text (V8 overviews, 2026-08-18) */
.ph__drawer-desc { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(20,26,38,.12); }
.ph__drawer-desc p { margin: 18px 0 0; font-size: 15px; line-height: 1.7; }
/* Doc-style section heads (<p><strong>) and subheads (<p><em>) need air
   above them or the dossier reads as one unbroken wall (client, 2 Sep). */
.ph__drawer-desc--dossier p:has(> strong:only-child) { margin-top: 36px; }
.ph__drawer-desc--dossier p:has(> em:only-child) { margin-top: 28px; }
.ph__drawer-desc--dossier p:has(> strong:only-child) + p,
.ph__drawer-desc--dossier p:has(> em:only-child) + p { margin-top: 12px; }
.ph__drawer-desc h4 {
  margin: 20px 0 0;
  font-family: 'Geologica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}
.ph__drawer-desc sup { font-size: 9.5px; line-height: 0; }
.ph__desc-notes { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid rgba(20,26,38,.12); }
/* 64ch cap: full-column footnotes ran to ~147 characters a line. */
.ph__desc-notes p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.55; max-width: 64ch; color: var(--ph-dim, #5E6673); }
.ph__drawer-desc details { margin: 14px 0 0; }
.ph__drawer-desc summary {
  cursor: pointer;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5E6673;
}
.ph__drawer-desc details p { font-size: 11px; line-height: 1.55; color: var(--ph-dim, #5E6673); word-break: break-word; }
.ph__drawer-news { margin: 24px 0 0; }
.ph__drawer-news[hidden] { display: none; }
.ph__news-rows { display: flex; flex-direction: column; margin-top: 10px; border-top: 1px solid rgba(20,26,38,.12); }
.ph__news-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(20,26,38,.12); text-decoration: none; color: inherit; }
.ph__news-row span { font-family: 'Space Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; color: #5E6673; }
.ph__news-row b { font-weight: 500; font-size: 13px; line-height: 1.4; }
.ph__news-row:hover b { color: #C42800; }
/* Ledger discipline inside the dossier too: red rule + number on hover. */
.ph__news-row { transition: border-color 140ms ease; }
.ph__news-row:hover { border-bottom-color: var(--ph-accent); }
.ph__news-row:hover span { color: var(--ph-accent); }
.ph__efield.is-missing { border-color: #C42800; }

/* Page scroll locks while the asset drawer is open — wheel/touch then
   always scrolls the drawer, never the page behind it. */
html.ph-drawer-open, body.ph-drawer-open { overflow: hidden; }

/* Aggregated upside — boxed strip mirroring the investor hub (2026-08-06). */
.ph__upside { margin: 6px 0 34px; }
.ph__agg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 1100px) { .ph__agg { grid-template-columns: repeat(5, 1fr); } }
.ph__agg-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(24, 26, 31, 0.14);
}
.ph__agg-v {
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #181A1F;
}
.ph__agg-k {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: #181A1F;
  line-height: 1.5;
  margin-top: 6px;
}
.ph__agg-s { font-size: 11px; color: #5E6673; line-height: 1.45; }

/* Aggregated upside v2 — match the hub treatment.
   2026-08-20: the red top rule is gone (client: red top borders on
   containers don't work); the band's dark-glass override carries the boxes. */
.ph__agg-box {
  position: relative;
  border-top: 1px solid rgba(24, 26, 31, 0.14);
  background: var(--ph-surface, #fff);
  padding: 20px 18px 18px;
  box-shadow: 0 12px 34px rgba(20, 26, 38, 0.05);
  transition: background .25s ease, transform .25s ease;
}
.ph__agg-box:hover { background: rgba(196, 40, 0, 0.03); transform: translateY(-2px); }
.ph__agg-v { font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 500; font-size: 32px; letter-spacing: -0.01em; }

/* Partner-funded always-on chips: smaller, teal-marked, quieter than mains. */
.ph__nw-label--jv {
  font-size: 9px;
  padding: 3px 7px;
  color: var(--ph-dim);
  border-color: rgba(20, 26, 38, 0.16);
}
.ph__nw-label--jv::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2DD4BF;
  margin-right: 6px;
  vertical-align: 1px;
}
.ph__nw-label--jv:hover { color: var(--ph-accent); border-color: var(--ph-accent); }
@media (max-width: 860px) { .ph__nw-label--jv { display: none; } }

/* ==========================================================================
   Portfolio page — client pass, 2026-08-20 (register D12–D17)
   D12 hero clip · D13 map plate (edited in place above) · D14 dark upside
   band · D15 page grid (edited in place above) · D16 filter zone ·
   D17 main-project card texture.
   ========================================================================== */

/* ---------- D12 · Hero background clip -----------------------------------
   The graded still stays on .ph__hero and doubles as the poster: the clip
   simply covers it, so if the video is stripped (reduced motion, no source,
   codec refusal) the hero falls back to exactly what shipped before. The
   scrim repeats the two gradient layers the still carried, so the headline
   keeps the same contrast it had against the photograph. */
.ph__hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  pointer-events: none;
}
.ph__hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(95deg,
      rgba(8, 11, 16, 0.94) 0%,
      rgba(8, 11, 16, 0.80) 38%,
      rgba(8, 11, 16, 0.55) 70%,
      rgba(8, 11, 16, 0.42) 100%),
    linear-gradient(0deg,
      rgba(8, 11, 16, 0.85) 0%,
      rgba(8, 11, 16, 0.10) 42%,
      rgba(8, 11, 16, 0.10) 100%);
}
/* Restack: hairline texture and the anchoring rule stay above the clip,
   the type stays above everything. */
.ph__hero--video::before,
.ph__hero--video::after { z-index: 2; }
.ph__hero--video .ph__container { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .ph__hero-video { display: none; }
}

/* ---------- D14 · Aggregated upside becomes its own dark section ---------
   Full-bleed dark band in the homepage language: #0B0F16 (the same dark this
   page already uses for its hero, so no new value enters the palette) plus
   the house 45° hairline motif, masked away toward the bottom-right. The
   inner boxes drop their red top rules and become the dark glass variant. */
.ph__upside-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 92px 0 100px;
  margin-bottom: 96px;
  background: #0B0F16;
  color: #F4F5F7;
  overflow: hidden;
}
.ph__upside-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: repeating-linear-gradient(
    45deg,
    #ffffff 0,
    #ffffff 1px,
    transparent 1px,
    transparent 16px
  );
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 65%);
          mask-image: linear-gradient(135deg, #000 0%, transparent 65%);
}
.ph__upside-band .ph__upside {
  position: relative;
  z-index: 1;
  margin: 0 auto; /* keep the container's own centring — the band owns the spacing */
}
/* Kicker rhythm survives; the red reads as mud on black, so the eyebrow
   takes the hero's light-grey treatment instead. */
.ph__upside-band .ph__mix-kicker { color: rgba(244, 245, 247, 0.62); }
.ph__upside-band .ph__mix-kicker::after { background: rgba(244, 245, 247, 0.16); }
.ph__upside-band .ph__sec-count { color: rgba(244, 245, 247, 0.45); }
.ph__upside-band .ph__agg { margin-top: 26px; gap: 14px; }
.ph__upside-band .ph__agg-box {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 22, 28, 0.45);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
          backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: none;
  padding: 28px 22px 26px;
  color: #F4F5F7;
}
.ph__upside-band .ph__agg-box:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
}
.ph__upside-band .ph__agg-v { color: #F4F5F7; }
.ph__upside-band .ph__agg-k { color: rgba(244, 245, 247, 0.88); }
.ph__upside-band .ph__agg-s { color: rgba(244, 245, 247, 0.52); }
@media (max-width: 860px) {
  .ph__upside-band { padding: 64px 0 68px; margin-bottom: 64px; }
}

/* ---------- D16 · Filter zone --------------------------------------------
   Its own tonal band (a shift in paper, not a colour), a two-column grid so
   the mono labels sit in a gutter and the controls run on one measure, and
   pill geometry — the single sanctioned rounded surface on the site. */
.ph__filters {
  margin-top: 72px;
  padding: 22px 0 20px;
  background: var(--ph-surface-2);
  border-top: 1px solid var(--ph-rule);
  border-bottom: 1px solid var(--ph-rule);
}
.ph__filters-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 16px 20px;
}
/* The commodity group hands its label to the gutter and its chips to the
   content column, rather than becoming a box of its own. */
.ph__fgroup--comm { display: contents; }
.ph__chips-wrap { display: contents; }   /* phones give it a box (see the 760px block) */
.ph__futility {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.ph__futility .ph__fgroup { display: flex; align-items: center; gap: 10px; }
.ph__flabel { padding-top: 8px; } /* optical baseline against the first pill row */
.ph__futility .ph__flabel { padding-top: 0; }
.ph__flabel--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pills */
.ph__chips { gap: 7px; }
.ph__chip {
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  gap: 8px;
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(20, 26, 38, 0.10);
}
.ph__chip-dot { width: 7px; height: 7px; border-radius: 50%; }
.ph__chip-l { line-height: 1; }
/* Facet count — the register's own ledger habit, zero-padded and tabular. */
.ph__chip-n {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ph-faint);
  font-variant-numeric: tabular-nums;
}
.ph__chip:hover { background: #fff; }
.ph__chip.is-on .ph__chip-n { color: rgba(255, 255, 255, 0.60); }
.ph__chip.is-empty {
  opacity: 0.38;
  background: transparent;
  cursor: not-allowed;
}
.ph__chip.is-empty:hover { border-color: rgba(20, 26, 38, 0.10); color: var(--ph-dim); }

.ph__seg { border-radius: 999px; background: rgba(255, 255, 255, 0.55); }
.ph__seg-btn { padding: 8px 15px; }
.ph__search {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  padding: 7px 16px;
  min-width: 210px;
}
.ph__search:focus-within { background: #fff; }
.ph__view-toggle { border-radius: 999px; background: rgba(255, 255, 255, 0.55); }
.ph__view-btn { padding: 8px 14px; }

/* Reset — only rendered once something is filtered, so the default state
   stays clean and the escape hatch is unmissable when it matters. */
.ph__reset {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--ph-accent);
  border-radius: 999px;
  background: transparent;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ph-accent);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.ph__reset[hidden] { display: none; }
.ph__reset:hover { background: var(--ph-accent); color: #fff; }
.ph__reset span { font-size: 13px; line-height: 1; }

/* Result count + tier nav travel together as one right-hand cluster, so they
   stay aligned to the right edge instead of stranding on a wrapped line. */
.ph__fmeta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.ph__fmeta .ph__count {
  margin-left: 0;
  font-variant-numeric: tabular-nums;
}
.ph__fmeta .ph__tiernav { margin-left: 0; }
.ph__count.is-filtered { color: var(--ph-ink); }

/* Keyboard: every control in the zone shows where focus is. */
.ph__filters .ph__chip:focus-visible,
.ph__filters .ph__seg-btn:focus-visible,
.ph__filters .ph__view-btn:focus-visible,
.ph__filters .ph__reset:focus-visible,
.ph__filters .ph__tiernav-a:focus-visible,
.ph__filters .ph__search:focus-within {
  /* Same ring as every other control on the site (css/base.css). */
  outline: 2px solid var(--ph-accent);
  outline-offset: 2px;
}
.ph__filters .ph__search input:focus-visible { outline: none; }

/* Pinned, the zone slims down. Twenty-one chips stacked three deep is fine
   as a resting state but eats a third of the viewport once the bar sticks,
   so the chip rail collapses to one sideways-scrolling line with a fade at
   the right edge to say there is more. */
.ph__filters.is-stuck { padding: 12px 0 10px; }
.ph__filters.is-stuck .ph__chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
}
.ph__filters.is-stuck .ph__chips::-webkit-scrollbar { display: none; }
.ph__filters.is-stuck .ph__chip { flex: none; }
.ph__filters.is-stuck .ph__flabel { padding-top: 7px; }

@media (max-width: 760px) {
  .ph__filters-row { grid-template-columns: minmax(0, 1fr); }
  .ph__futility { grid-column: 1; }
  .ph__flabel { padding-top: 0; }
  .ph__search { min-width: 0; flex: 1; }
}

/* ---------- D17 · Main-project cards carry the house texture -------------
   Same 45° hairline motif as the hero and the dark band, at the light-on-
   paper end: ink at 5%, masked out toward the bottom-right so the stats
   corner of the card stays perfectly clean. Overlay-on-top follows the
   .ph__hero::before precedent in this file — at 5% it is felt, not read. */
.ph__flag::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: repeating-linear-gradient(
    45deg,
    #141A26 0,
    #141A26 1px,
    transparent 1px,
    transparent 16px
  );
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(135deg, #000 0%, transparent 62%);
}

/* ---------- Print: the open dossier as a clean A4 report ----------
   html.ph-print is set by the drawer's print button (and beforeprint when a
   dossier is open). Everything but the dossier is dropped; the drawer's
   fixed panel becomes a static document with report typography. */
@media print {
  @page { size: A4; margin: 16mm 14mm 20mm; }

  html.ph-print, html.ph-print body { background: #fff !important; }
  /* Skeleton is body > .teako-site > .teako-site__main > main.ph > drawer;
     prune every branch that is not on that path, and force the path itself
     visible over anything else that hides it in print. */
  html.ph-print body > :not(.teako-site) { display: none !important; }
  html.ph-print .teako-site > :not(.teako-site__main) { display: none !important; }
  html.ph-print .teako-site__main > :not(.ph) { display: none !important; }
  html.ph-print main.ph > :not(.ph__drawer) { display: none !important; }
  html.ph-print .teako-site,
  html.ph-print .teako-site__main,
  html.ph-print main.ph { display: block !important; height: auto !important; overflow: visible !important; }

  /* The fixed slide-in panel becomes the document itself. */
  html.ph-print .ph__drawer {
    position: static !important;
    width: auto !important; max-width: none !important;
    height: auto !important; overflow: visible !important;
    transform: none !important; box-shadow: none !important;
    border: 0 !important; background: #fff !important;
    padding: 0 !important;
  }
  html.ph-print .ph__drawer::before,
  html.ph-print .ph__drawer::after { display: none !important; }
  /* Entrance/reveal states must not print half-faded. */
  html.ph-print .ph__drawer, html.ph-print .ph__drawer * {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
    visibility: visible !important;
  }

  /* Report cover header from the drawer head. */
  html.ph-print .ph__drawer-head {
    position: static !important; padding: 0 0 6mm !important;
    border-bottom: 2pt solid #C42800 !important; margin: 0 0 8mm !important;
    background: #fff !important;
  }
  html.ph-print .ph__drawer-head h3 { font-size: 26pt !important; line-height: 1.08 !important; max-width: none !important; }
  html.ph-print .ph__drawer-eye { font-size: 8pt !important; letter-spacing: .14em !important; }
  html.ph-print .ph__drawer-loc { font-size: 9pt !important; max-height: none !important; }
  html.ph-print .ph__drawer-close,
  html.ph-print .ph__drawer-ghost,
  html.ph-print .ph__drawer-index { display: none !important; }

  /* Screen-only apparatus. The hero stays (it carries the facts panel);
     only its map field and chrome are dropped. */
  html.ph-print .ph__x-hero { display: block !important; position: static !important; height: auto !important; min-height: 0 !important; background: #fff !important; margin: 0 !important; padding: 0 !important; }
  html.ph-print .ph__x-hero-map,
  html.ph-print .ph__x-hero-coords,
  html.ph-print .ph__x-hero-tag,
  html.ph-print .ph__x-rail,
  html.ph-print .ph__x-toc,
  html.ph-print .ph__x-jump,
  html.ph-print .ph__x-print,
  html.ph-print .ph__enquire,
  html.ph-print .ph__x-nav,
  html.ph-print .ph__drawer-maps,
  html.ph-print .ph__lightbox { display: none !important; }

  /* One-column measure. */
  html.ph-print .ph__x-grid { display: block !important; }
  html.ph-print .ph__x-main { width: auto !important; max-width: none !important; }
  html.ph-print .ph__drawer-body { padding: 0 !important; }

  /* Facts panel becomes a bordered fact table under the cover. */
  html.ph-print .ph__x-facts {
    position: static !important; inset: auto !important;
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
    gap: 4mm 6mm !important; border: .5pt solid #c9c4b8 !important;
    padding: 5mm !important; margin: 0 0 8mm !important;
    background: #fff !important; box-shadow: none !important;
    break-inside: avoid;
  }

  /* Report typography. */
  html.ph-print .ph__drawer { font-size: 10pt !important; line-height: 1.55 !important; color: #16130e !important; }
  html.ph-print .ph__x-main p { max-width: none !important; }
  html.ph-print .ph__x-main h4, html.ph-print .ph__x-main h5 { break-after: avoid; }

  /* Blocks that must not split across pages. */
  html.ph-print .ph__desc-fig,
  html.ph-print .pd__photo,
  html.ph-print .ph__drawer-stats,
  html.ph-print .pd__stats,
  html.ph-print .pd__tgt,
  html.ph-print .pd__qp,
  html.ph-print .ph__news-row { break-inside: avoid; }
  html.ph-print .ph__desc-fig img, html.ph-print .pd__photo img {
    max-height: 120mm !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; display: block !important;
  }

  /* Next-steps timeline: label above a full-measure body. */
  html.ph-print .pd__steps { display: block !important; border: 0 !important; }
  html.ph-print .pd__step {
    display: block !important; break-inside: avoid;
    margin: 0 0 5mm !important; max-width: none !important; width: auto !important;
  }
  html.ph-print .pd__step > span { display: block !important; margin: 0 0 1.5mm !important; }
  html.ph-print .pd__step p { max-width: none !important; width: auto !important; }

  /* Keep the brand accents on paper. */
  html.ph-print .ph__drawer * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* References/details print expanded. */
  html.ph-print .ph__drawer details { display: block; }
  html.ph-print .ph__drawer details > * { display: block; }

  /* Running footer on every sheet; opaque band so full pages cut cleanly
     underneath it instead of showing content through. */
  html.ph-print .ph__drawer.is-open .ph__drawer-body::after {
    content: "Teako Minerals Corp. · CSE: TMIN · teakominerals.com";
    position: fixed; bottom: 0; left: 0; right: 0;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 7.5pt; letter-spacing: .08em; color: #6d675c;
    background: #fff; border-top: .5pt solid #d8d3c7;
    padding: 2mm 0 0; min-height: 6mm;
    display: block !important;
  }
}

/* ---------- Løkken District box + partner descriptions (client, 2026-08-28) ----------
   The third main-project card is now the district: full width under Tynset
   and Venna, holding Løkken Ophiolite (100%) first and Løkken (90%) second,
   each with its own More. Headline grade dropped from the stats. */
.ph__flag--district { grid-column: 1 / -1; }
.ph__flag-body { display: flex; flex-direction: column; flex: 1; }
.ph__district-head { margin-bottom: 22px; }
.ph__district-head h3 { margin: 0 0 4px; }
.ph__district-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.ph__district-entry {
  display: flex;
  flex-direction: column;
  padding-top: 22px;
  border-top: 1px solid var(--ph-rule);
}
.ph__district-entry .ph__flag-head { margin-bottom: 16px; }
.ph__district-entry h3 { font-size: 22px; }
/* Each entry is its own positioning context, so its More sits at ITS bottom-
   right. Without this both absolute CTAs resolve against .ph__flag--district
   and stack on the same 79x34 rect at the box's corner — the Ophiolite button
   ends up underneath Løkken's and is neither visible nor clickable. */
.ph__district-entry { position: relative; }
.ph__district-entry .ph__flag-cta { right: 0; bottom: 0; }
.ph__mid-desc {
  margin: 10px 0 14px;
  font-family: var(--ph-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ph-dim);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Summary plate sat over the western dots; hug the viewport edge instead
   of the page gutter (client, 2026-08-28). */
@media (min-width: 761px) {
  .ph__nw-panel { left: 16px; }
}
@media (max-width: 900px) {
  .ph__district-grid { grid-template-columns: 1fr; }
}
/* Phones: the district's ownership values are long ("90% · Capella 10%"), so a
   corner-anchored CTA collides with them at 390. Drop the button into the flow
   under the stats, still right-aligned — the plain main cards keep the corner
   anchor because their only stat is "100 %". */
@media (max-width: 760px) {
  .ph__district-entry .ph__flag-cta {
    position: static;
    align-self: flex-end;
    margin-top: 16px;
  }
}

/* ---------- Partner-funded carousel (client, 2026-08-28) ----------
   Grid view scrolls the nine partner cards as a snap carousel, three up on
   desktop, with arrows in the tier head. List view is untouched. */
.ph__mid-grid--carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.ph__mid-grid--carousel::-webkit-scrollbar { display: none; }
.ph__mid-grid--carousel .ph__mid { flex: 0 0 calc((100% - 28px) / 3); scroll-snap-align: start; }
.ph__mid-nav { display: flex; justify-content: flex-end; gap: 8px; margin: -6px 0 12px; }
.ph__mid-arrow {
  width: 36px; height: 36px;
  border: 1px solid var(--ph-rule);
  background: var(--ph-surface);
  color: var(--ph-ink);
  font-family: var(--ph-mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.ph__mid-arrow:hover { border-color: var(--ph-accent); color: var(--ph-accent); }
.ph__mid-desc { -webkit-line-clamp: 3; }
@media (max-width: 900px) { .ph__mid-grid--carousel .ph__mid { flex-basis: 78%; } }

/* ---------- Map summary as a strip (client, 2026-08-28) ----------
   The plated box covered the western dots. The same summary now runs
   horizontally along the bottom edge of the map: count · tier rows · foot. */
.ph__norway .ph__nw-panel {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 14px var(--ph-edge) 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 36px;
  border-top: 1px solid var(--ph-rule);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.ph__norway .ph__nw-big { font-size: clamp(36px, 3.2vw, 48px); }
.ph__norway .ph__nw-bigk { margin-left: 10px; }
.ph__norway .ph__nw-rows { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; border: 0; }
.ph__norway .ph__nw-row { width: auto; padding: 4px 0; border: 0; gap: 8px; }
.ph__norway .ph__nw-row i { margin-left: 2px; min-width: 0; }
.ph__norway .ph__nw-foot { margin: 0 0 0 auto; }
.ph__norway-north { display: none; }
@media (max-width: 760px) {
  .ph__norway .ph__nw-panel { left: 0; right: 0; width: 100%; padding: 12px 16px 14px; gap: 8px 18px; }
  .ph__norway .ph__nw-foot { margin-left: 0; width: 100%; }
}

/* ---------- Summary strip, iteration 2 (client, 2026-08-28) ----------
   "Gets a little lost": float it ON the map with a margin, slight
   translucency, a full frame, and pull the count word in tight. */
.ph__norway .ph__nw-panel {
  left: var(--ph-edge);
  right: var(--ph-edge);
  bottom: 22px;
  width: auto;
  padding: 14px 22px 16px;
  gap: 8px 32px;
  border: 1px solid var(--ph-rule-strong);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 14px 34px -22px rgba(20, 26, 38, 0.45);
}
.ph__nw-kicker {
  flex-basis: 100%;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-dim);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ph-rule);
}
.ph__nw-count { display: inline-flex; align-items: baseline; gap: 6px; padding-right: 28px; border-right: 1px solid var(--ph-rule); }
.ph__norway .ph__nw-big { font-size: clamp(34px, 3vw, 44px); }
.ph__norway .ph__nw-bigk { margin-left: 0; }
.ph__norway .ph__nw-rows { gap: 6px 22px; }
.ph__norway .ph__nw-foot { padding-left: 28px; border-left: 1px solid var(--ph-rule); }
@media (max-width: 760px) {
  .ph__norway .ph__nw-panel { left: 12px; right: 12px; bottom: 12px; }
  .ph__nw-count, .ph__norway .ph__nw-foot { border: 0; padding: 0; }
}

/* ==========================================================================
   Register rows: arrow at the far right on every row, both widths (client,
   29 Aug 2026) — the row is clickable and now says so. The commodity label
   (.ph__led-comm) is a phone-only companion to the name.
   ========================================================================== */
.ph__led-row { grid-template-columns: minmax(180px, 1.1fr) 1.6fr auto 18px; } /* number column removed (client, 3 Sep 2026) */
.ph__led-comm { display: none; }
.ph__led-arrow { display: inline-flex; align-items: center; justify-content: flex-end; color: var(--ph-faint); transition: color 140ms ease, transform 140ms ease; }
.ph__led-arrow svg { width: 16px; height: 16px; }
.ph__led-row:hover .ph__led-arrow { color: var(--ph-accent); transform: translateX(2px); }
@media (max-width: 860px) {
  .ph__led-row { grid-template-columns: 1fr auto 18px; }
}

/* ==========================================================================
   PHONES — Project Portfolio (client, 29 Aug 2026)
   ========================================================================== */
@media (max-width: 760px) {
  /* Map: a lot more height. */
  .ph__norway { height: 72vh; min-height: 480px; }
  /* Aggregated upside: one box on top of the other, never two by two. */
  .ph__agg { grid-template-columns: 1fr; }
  /* Filter bar: compact. Row 1 search + view (icons); row 2 commodity chips
     as one scrolling line; row 3 ownership segment + count. Labels go. */
  .ph__filters { margin-top: 40px; padding: 8px 0 10px; }
  .ph__filters-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .ph__fgroup--comm { display: contents; }
  .ph__flabel { display: none; }
  .ph__futility { display: contents; }
  .ph__futility .ph__fgroup { display: contents; }
  /* Client, 10 Sep 2026: the search takes the whole first row; count + view
     toggle share the second; the chips scroll on the third with a fade and a
     chevron so the row never reads as cut off; the ownership segment last. */
  .ph__search { order: 1; flex: 1 1 100%; min-width: 0; padding: 9px 14px; }
  .ph__search input { font-size: 14px; }
  .ph__view-toggle { flex: none; }
  .ph__view-btn { padding: 8px 7px; font-size: 0; gap: 0; }
  .ph__view-btn svg { width: 15px; height: 15px; }
  .ph__chips-wrap { display: block; order: 4; flex: 1 0 100%; position: relative; min-width: 0; }
  .ph__chips { order: 0; flex: none; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 48px 2px 0; margin: 0; -webkit-overflow-scrolling: touch; }
  .ph__chips::-webkit-scrollbar { display: none; }
  /* The fade + chevron sit on the wrapper's far right edge, outside the scroller. */
  .ph__chips-wrap::after { content: '\203A'; position: absolute; right: 0; top: 0; bottom: 2px; width: 48px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 20px; line-height: 1; color: var(--ph-accent, #C42800); background: linear-gradient(90deg, rgba(244, 245, 247, 0) 0%, var(--ph-bg, #F4F5F7) 50%); pointer-events: none; transition: opacity 200ms ease; }
  .ph__chips-wrap.is-end::after { opacity: 0; }
  .ph__chip { flex: none; padding: 6px 11px 6px 10px; font-size: 10.5px; }
  /* Count sits beside the search; the ownership segment gets a full row so
     'Wholly-owned' never collides with 'Partial'. */
  .ph__fmeta, .ph__count { order: 2; flex: 1 1 auto; width: auto; margin: 0; font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }
  .ph__view-toggle { order: 3; margin-left: auto; }
  .ph__seg { order: 5; flex: 1 0 100%; }
  .ph__seg-btn { flex: 1 1 0; padding: 7px 8px; font-size: 10.5px; text-align: center; white-space: nowrap; }
  /* Register rows: no TK number; commodity label under the name; stage;
     arrow. */
  .ph__led-row { grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "name status arrow" "comm status arrow"; gap: 2px 12px; align-items: center; padding: 11px 2px; }
  .ph__led-no { display: none; }
  .ph__led-name { grid-area: name; }
  .ph__led-comm { grid-area: comm; display: block; font-family: 'Space Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ph-dim); }
  .ph__led-status { grid-area: status; }
  .ph__led-arrow { grid-area: arrow; }
  /* Partner-card foot: the label wrapped mid-word ("Partner-" / "funded")
     beside the terms; let the two spans wrap as whole units. */
  .ph__mid-foot { flex-wrap: wrap; gap: 4px 12px; }
  .ph__mid-foot > span:first-child { white-space: nowrap; }
}


/* ---------- Wider-register summary rail (client, 1 Sep 2026) ----------
   Register rows no longer open the full dossier — a third-width rail slides
   in from the right with the project name and its high-level facts. */
.ph__rrail-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 26, 38, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.ph__rrail-back.is-open { opacity: 1; pointer-events: auto; }
.ph__rrail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 81;
  width: 33.333vw;
  min-width: 380px;
  max-width: 560px;
  box-sizing: border-box;
  padding: 52px 44px;
  background: var(--ph-surface, #FFFFFF);
  border-left: 1px solid var(--ph-rule, rgba(20, 26, 38, 0.12));
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ph__rrail.is-open { transform: none; }
.ph__rrail-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ph-rule, rgba(20, 26, 38, 0.12));
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ph-ink, #141A26);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.ph__rrail-close:hover { border-color: var(--ph-accent, #C42800); color: var(--ph-accent, #C42800); }
.ph__rrail-eye {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-accent, #C42800);
}
.ph__rrail-name {
  margin: 10px 0 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--ph-ink, #141A26);
}
.ph__rrail-loc {
  margin-top: 6px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-faint, rgba(20, 26, 38, 0.42));
}
.ph__rrail-facts {
  margin-top: 30px;
  border-top: 1px solid var(--ph-rule, rgba(20, 26, 38, 0.12));
}
.ph__rrail-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ph-rule, rgba(20, 26, 38, 0.12));
}
.ph__rrail-fact span {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph-faint, rgba(20, 26, 38, 0.42));
  flex: none;
}
.ph__rrail-fact b {
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-ink, #141A26);
  text-align: right;
}
@media (max-width: 760px) {
  .ph__rrail { width: 100%; min-width: 0; max-width: none; padding: 44px 24px; }
}


/* ---------- Partner / LOI attribution + agreement terms (2026-09-01) ----------
   Client brief: every partner-funded or LOI project names its partner the
   moment the dossier opens, and carries the package terms. The LOI mark is
   deliberately loud (accent plate) without blinking — Swiss, not sirens. */
.ph__x-deal {
  /* Label above, partner name beneath — one consistent stack (client, 2 Sep). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 8px;
}
.ph__deal-k {
  padding: 5px 10px 4px;
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-rule);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-ink);
}
.ph__deal-k--loi {
  background: #C42800;
  border-color: #C42800;
  color: #FAFAF7;
}
.ph__deal-name {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ph-ink);
}
.ph__terms {
  margin-top: 40px;
  padding-top: 12px;
  border-top: 1px solid var(--ph-rule);
}
.ph__terms ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 15px;
}
.ph__terms li {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ph-ink);
}
.ph__terms-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ph-dim);
  font-style: italic;
}
/* 7 Sep 2026 round (items 13, 14), tuned 9 Sep: the caveat block is closed off by a
   hairline that mirrors the one above it, and the field-imagery heading starts a
   clearly separate section below it. */
.ph__drawer-desc--dossier h3 { margin-top: 2.5rem; }
.ph__desc-notes + h3, .ph__desc-notes + p + h3 { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(20,26,38,.12); }