/* =========================================================================
   The Premium Nexus: pages.css (inner pages)
   The shared page hero and its variants, breadcrumbs, cards, filters, detail
   lists, the catalogue, long-form reading (articles, legal), notices (thank-you,
   404) and the close band, all in concept G's language: Portoro marble, gold
   hairlines, pointed arches, the light bar, Gloock display, Anybody labels.
   ========================================================================= */

.chapter--tight { padding-block: clamp(72px, 9vw, 128px); }
.chapter--flush { padding-top: clamp(56px, 7vw, 96px); }
.chapter-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 48px; }
.chapter-head--row .tlink { margin-top: 0; }
.chapter-head__copy { display: grid; gap: 24px; max-width: 980px; }
[hidden] { display: none !important; }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: 10.5px; letter-spacing: .18em; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: ""; flex: none; display: inline-block; width: 4px; height: 4px; margin: 0 12px; background: var(--gold); transform: rotate(45deg); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.crumbs a:hover { color: var(--gold-hi); text-decoration: underline; }
.crumbs [aria-current] { color: var(--gold); min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.arcade__intro .crumbs, .loupe__head .crumbs, .contact__side .crumbs { margin-bottom: -4px; }

/* =========================================================================
   The page hero (src/partials/page.js)
   The unveiling: --xn (registered in site.css) runs from -0.15 to 1.25 once,
   by CSS alone. The light bar rides it; the photograph is unmasked behind it.
   Reduced motion ends the animation at once (site.css), so all is revealed.
   ========================================================================= */
@keyframes phero-sweep { from { --xn: -0.15; } to { --xn: 1.25; } }
@keyframes phero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* Images only lift (no fade): the light bar already unveils them, and they paint at once. */
@keyframes phero-lift { from { transform: translateY(34px); } to { transform: none; } }
@keyframes phero-turn { to { transform: rotate(360deg); } }
@keyframes phero-breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }

.phero {
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  padding: clamp(136px, 19vh, 208px) 0 clamp(64px, 8vw, 116px);
  background-color: var(--marble); background-position: 40% 30%;
  animation: phero-sweep 2.6s var(--ease-in-out) .2s both;
}
.phero__inner { position: relative; z-index: 3; display: grid; gap: clamp(40px, 5vw, 88px); align-items: center; }
.phero__copy { display: grid; gap: 22px; justify-items: start; align-content: start; min-width: 0; }
.phero__copy > * { animation: phero-rise 1.2s var(--ease-out) both; }
.phero__copy > :nth-child(2) { animation-delay: .08s; }
.phero__copy > :nth-child(3) { animation-delay: .16s; }
.phero__copy > :nth-child(4) { animation-delay: .24s; }
.phero__copy > :nth-child(n+5) { animation-delay: .32s; }
.phero__title { max-width: 16ch; font-size: clamp(2.6rem, 5.4vw, 5.6rem); overflow-wrap: break-word; }
.phero__lead { max-width: 60ch; }
.phero__meta { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; padding: 0; list-style: none; }
.phero__meta li { font-family: var(--font-band); font-stretch: 125%; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.phero__meta li:not(:last-child)::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px; vertical-align: middle; background: var(--gold); transform: rotate(45deg) translateY(-1px); }
.phero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.phero__line { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 5px; border-top: 1px solid var(--gold-line); border-bottom: 1px solid rgb(214 180 106 / .14); }
.phero__light { z-index: 2; }

/* cover: the company's (or article's) photograph, full bleed */
.phero--cover { display: grid; align-items: end; min-height: min(100svh, 940px); padding-top: clamp(150px, 24vh, 260px); background: var(--black); }
.phero__media { position: absolute; inset: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--xn) * 100% - 18%), rgb(0 0 0 / .14) calc(var(--xn) * 100% + 2%));
  mask-image: linear-gradient(90deg, #000 calc(var(--xn) * 100% - 18%), rgb(0 0 0 / .14) calc(var(--xn) * 100% + 2%));
}
.phero__media picture, .phero__media img { width: 100%; height: 100%; }
.phero__media img { object-fit: cover; filter: saturate(.92) sepia(.08); }
.phero--bright .phero__media img { filter: brightness(.56) contrast(1.08) saturate(.66) sepia(.2); }
.phero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(7 7 7 / .9) 0%, rgb(7 7 7 / .62) 38%, rgb(7 7 7 / .08) 72%),
    linear-gradient(0deg, rgb(7 7 7 / .96) 0%, rgb(7 7 7 / .2) 46%, rgb(7 7 7 / .4) 100%);
}
.phero--cover .phero__copy { max-width: 760px; }

/* arch: the project's photograph in a pointed arch */
.phero--arch .phero__inner, .phero--mark .phero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
.phero__arch { margin: 0; justify-self: end; width: min(100%, 480px); animation: phero-lift 1.4s var(--ease-out) both; }
.phero__archbox { width: 100%; aspect-ratio: 4 / 5; }
.phero__archbox .arch__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.92) sepia(.08);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--xn) * 100% - 18%), rgb(0 0 0 / .12) calc(var(--xn) * 100% + 2%));
  mask-image: linear-gradient(90deg, #000 calc(var(--xn) * 100% - 18%), rgb(0 0 0 / .12) calc(var(--xn) * 100% + 2%));
}
.phero__arch--bright .arch__img img { filter: brightness(.66) contrast(1.06) saturate(.66) sepia(.22); }

/* mark: the TPN monogram in a slowly turning gold seal */
.phero__seal { position: relative; justify-self: center; width: clamp(240px, 30vw, 430px); aspect-ratio: 1; animation: phero-rise 1.6s var(--ease-out) .1s both; }
.phero__halo { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgb(214 180 106 / .2), rgb(214 180 106 / .04) 52%, transparent 70%); animation: phero-breathe 7s var(--ease-in-out) infinite; }
.phero__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--gold); stroke-width: .6; }
.phero__ring--a { animation: phero-turn 140s linear infinite; }
.phero__ring--a path { stroke: var(--gold-deep); stroke-width: .7; }
.phero__ring--b { inset: 9%; width: 82%; height: 82%; animation: phero-turn 90s linear infinite reverse; stroke: var(--gold-deep); }
.phero__ring--b circle { transform: scale(1.22); }
.phero__points { fill: var(--gold); stroke: none; transform: scale(1.22); }
.phero__mark { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 40px rgb(0 0 0 / .6)); }

/* trio: the three companies as arches, each a link */
.phero--trio .phero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); }
.phero__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.trio { animation: phero-lift 1.3s var(--ease-out) both; }
.trio:nth-child(2) { animation-delay: .12s; }
.trio:nth-child(3) { animation-delay: .24s; }
.trio__link { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.trio__arch { display: block; width: 100%; aspect-ratio: 4 / 5; }
.trio__arch .arch__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.92) sepia(.08); transition: transform 1.4s var(--ease-out);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--xn) * 100% - 18%), rgb(0 0 0 / .12) calc(var(--xn) * 100% + 2%));
  mask-image: linear-gradient(90deg, #000 calc(var(--xn) * 100% - 18%), rgb(0 0 0 / .12) calc(var(--xn) * 100% + 2%));
}
.trio--bright .arch__img img { filter: brightness(.66) contrast(1.06) saturate(.66) sepia(.22); }
.trio__link:hover .arch__img img { transform: scale(1.04); }
.trio__acr { margin-top: 14px; font-family: var(--font-band); font-stretch: 150%; font-weight: 840; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: .9; letter-spacing: -0.02em; color: var(--gold); }
.trio__name { font-family: var(--font-serif); font-size: clamp(1.35rem, 1.8vw, 1.8rem); line-height: 1.1; color: var(--white); }
.trio__link:hover .trio__name { color: var(--gold-hi); }
.trio__meta { font-size: .95rem; color: var(--muted); }
@media (min-width: 1100px) {
  .phero--trio .phero__inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; }
  .phero__trio { align-items: start; gap: clamp(20px, 2.2vw, 36px); }
  .trio:nth-child(odd) { padding-top: clamp(32px, 4vw, 60px); }
  .trio__acr { font-size: clamp(1.6rem, 2.3vw, 2.4rem); }
  .trio__name { font-size: clamp(1.2rem, 1.4vw, 1.45rem); }
  .trio__meta { font-size: .88rem; }
}

/* band: a panoramic strip in a gold frame (about) */
.phero--band .phero__inner { grid-template-columns: minmax(0, 1fr); }
.phero__band {
  position: relative; z-index: 3; container-type: inline-size; overflow: hidden;
  width: min(100% - 2 * var(--gutter), 1180px); margin: clamp(48px, 6vw, 88px) var(--gutter) 0 auto;
  aspect-ratio: 10 / 3; background: #0b0a08; animation: phero-lift 1.4s var(--ease-out) both;
}
.phero__band picture, .phero__band img { display: block; width: 100%; height: 100%; }
.phero__band img {
  object-fit: cover; transform: scale(1.14); filter: saturate(.94) sepia(.06);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--xn) * 100% - 18%), rgb(0 0 0 / .12) calc(var(--xn) * 100% + 2%));
  mask-image: linear-gradient(90deg, #000 calc(var(--xn) * 100% - 18%), rgb(0 0 0 / .12) calc(var(--xn) * 100% + 2%));
}
.phero__band-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 7px transparent, inset 0 0 0 8px var(--gold-deep); }

/* ---------- Filters (projects by company, articles by topic) ---------- */
.pfilter { display: flex; flex-wrap: wrap; gap: 8px; }
.pfilter__chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  font: 600 12px/1 var(--font-band); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text); background: rgb(214 180 106 / .04); box-shadow: inset 0 0 0 1px var(--gold-line); text-decoration: none; cursor: pointer;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.pfilter__chip:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgb(214 180 106 / .6); }
.pfilter__chip[aria-current="true"], .pfilter__chip[aria-pressed="true"] { background: var(--gold); color: var(--black); box-shadow: inset 0 1px 0 rgb(255 246 222 / .55); }
.pfilter__count { font-variant-numeric: tabular-nums; opacity: .7; letter-spacing: .04em; }
.pfilter--topics { margin-bottom: clamp(28px, 4vw, 48px); }
.status {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px;
  font: 600 10px/1 var(--font-band); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-line); background: rgb(214 180 106 / .06);
}
.status--soon { color: var(--muted); box-shadow: inset 0 0 0 1px rgb(156 122 60 / .5); background: none; }

/* ---------- Cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 36px); }
.cards--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--projects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.cards--text { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3vw, 56px); }
.cards--featured { margin-bottom: clamp(48px, 6vw, 88px); }
.card { position: relative; }
.card__link { display: grid; gap: 10px; align-content: start; height: 100%; color: inherit; text-decoration: none; }
.card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; background: #0b0a08; margin-bottom: 10px; box-shadow: inset 0 0 0 1px var(--gold-line); }
.card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) sepia(.08); transition: transform 1.2s var(--ease-out); }
.pcard--bright .card__media img { filter: brightness(.7) contrast(1.06) saturate(.66) sepia(.2); }
.card__link:hover .card__media img { transform: scale(1.04); }
.card__light { --xn: -0.3; transition: --xn 0s; }
.card__link:hover .card__light, .card__link:focus-visible .card__light { --xn: 1.25; transition: --xn 1.3s var(--ease-in-out); }
.card__media--seal { display: grid; place-items: center; background: var(--marble) var(--marble-img) 30% 40% / cover no-repeat; }
.card__media--seal img { width: 22%; height: auto; object-fit: contain; filter: drop-shadow(0 12px 30px rgb(0 0 0 / .6)); }
.card__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 1.9vw, 1.9rem); line-height: 1.1; color: var(--white); }
.card__link:hover .card__title { color: var(--gold-hi); }
.card__meta { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.card__text { color: var(--text); font-size: .98rem; line-height: 1.6; }
.card__more { margin-top: 4px; color: var(--gold); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: .28em; }
.pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcard__co { font-family: var(--font-band); font-stretch: 150%; font-weight: 800; font-size: 13px; letter-spacing: .08em; color: var(--gold); }
.card--featured .card__link { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); align-items: center; }
.card--featured .card__media { grid-row: 1 / span 5; margin: 0; aspect-ratio: 16 / 11; }
.card--featured .card__title { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.04; }
.tcard { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--gold-line); }
.tcard__star { fill: var(--gold); }
.tcard__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 1.8vw, 1.75rem); line-height: 1.12; color: var(--white); }
.tcard p { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.chips li { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--gold-line); font-size: 13.5px; color: var(--white); background: rgb(214 180 106 / .04); }

/* ---------- About: the portfolio seats ---------- */
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); margin: 0; padding: 0; list-style: none; }
.seat__link { display: grid; gap: 10px; align-content: start; height: 100%; color: inherit; text-decoration: none; }
.seat__arch { display: block; width: 100%; aspect-ratio: 3 / 4; margin-bottom: 8px; }
.seat__arch .arch__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.92) sepia(.08); transition: transform 1.4s var(--ease-out); }
.seat__link:hover .arch__img img { transform: scale(1.04); }
.arch__img--empty { background: var(--marble) var(--marble-img) 60% 40% / cover no-repeat; }
.seat__glow { position: absolute; inset: 30% 20% 10%; border-radius: 50%; background: radial-gradient(circle, rgb(214 180 106 / .2), transparent 70%); animation: phero-breathe 7s var(--ease-in-out) infinite; }
.seat__acr { font-family: var(--font-band); font-stretch: 150%; font-weight: 840; font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: .9; letter-spacing: -0.02em; color: var(--gold); }
.seat__acr--next { font-size: 11.5px; font-stretch: 125%; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; }
.seat__name { font-family: var(--font-serif); font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.1; color: var(--white); }
.seat__link:hover .seat__name { color: var(--gold-hi); }
.seat--next .seat__link:hover .seat__name { color: var(--white); }
.seat__meta { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.seat__text { color: var(--text); font-size: .96rem; line-height: 1.6; }
.seat .tlink { margin-top: 4px; }

/* ---------- Company ---------- */
.cmp__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.cmp__copy { display: grid; gap: 20px; justify-items: start; }
.cmp__title { max-width: 18ch; font-size: clamp(2rem, 3.6vw, 3.6rem); }
.cmp__legal { font-size: 14px; color: var(--muted); }
.cmp__figures { position: relative; display: grid; gap: 22px; padding: clamp(28px, 3.4vw, 48px); background-position: 70% 30%; }
.cmp__figures::before { content: ""; position: absolute; inset: 8px; pointer-events: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px transparent, inset 0 0 0 7px var(--gold-deep); }
.cmp__source { position: relative; font-size: 13px; color: var(--muted); }
.figrow { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 26px clamp(20px, 3vw, 48px); margin: 0; }
.figrow div { display: flex; flex-direction: column-reverse; gap: 8px; }
.figrow dt { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.figrow dd { margin: 0; font-family: var(--font-band); font-stretch: 135%; font-weight: 720; font-size: clamp(2rem, 3.2vw, 3rem); line-height: .95; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.gemstrip__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.gemstrip__copy { display: grid; gap: 22px; justify-items: start; }
.gemstrip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 18px; margin: 0; padding: 0; list-style: none; }
.gemstrip__list li { flex: 0 0 calc((100% - 3 * 18px) / 4); }
.gemstrip__stone { display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--text); text-decoration: none; font-size: 14px; }
.gemstrip__stone img, .gemstrip__drawn { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; padding: 4px; background: var(--metal); box-shadow: 0 12px 26px rgb(0 0 0 / .55); transition: transform .6s var(--ease-spring); }
.gemstrip__drawn { display: block; background: radial-gradient(circle at 40% 35%, var(--s), #000 120%); box-shadow: 0 0 0 4px var(--gold-deep); }
.gemstrip__stone:hover { color: var(--gold-hi); }
.gemstrip__stone:hover img { transform: translateY(-4px) scale(1.04); }
.siblings { border-top: 1px solid var(--gold-line); }
.siblings__title { font-size: clamp(1.9rem, 3vw, 3rem); margin-bottom: clamp(32px, 4vw, 56px); }
.siblings__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.sib { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 6px; align-items: start; color: inherit; text-decoration: none; padding-top: 22px; border-top: 1px solid var(--line); }
.sib__media { grid-row: 1 / span 3; aspect-ratio: 1; overflow: hidden; box-shadow: inset 0 0 0 1px var(--gold-line); background: #0b0a08; }
.sib__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) sepia(.08); transition: transform 1.2s var(--ease-out); }
.sib--bright .sib__media img { filter: brightness(.7) contrast(1.06) saturate(.66) sepia(.2); }
.sib:hover .sib__media img { transform: scale(1.06); }
.sib__acr { font-family: var(--font-band); font-stretch: 150%; font-weight: 840; font-size: 1.6rem; line-height: .9; color: var(--gold); }
.sib__name { font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.1; color: var(--white); }
.sib:hover .sib__name { color: var(--gold-hi); }
.sib__meta { font-size: .95rem; color: var(--muted); }

/* ---------- Project ---------- */
.prj__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.prj__copy { display: grid; gap: 22px; align-content: start; }
.prj__title { font-size: clamp(2rem, 3.6vw, 3.6rem); }
.prj__specs { position: relative; padding: clamp(28px, 3.4vw, 44px); background: var(--marble) var(--marble-img) 30% 60% / cover no-repeat; }
.prj__specs::before { content: ""; position: absolute; inset: 8px; pointer-events: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px transparent, inset 0 0 0 7px var(--gold-deep); }
.prj__specs-title { position: relative; margin-bottom: 18px; font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.spectable { position: relative; display: grid; margin: 0; border-top: 1px solid var(--gold-line); }
.spectable div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spectable dt { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.spectable dd { margin: 0; color: var(--white); font-variant-numeric: tabular-nums lining-nums; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 28px); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.gallery__item { aspect-ratio: 4 / 3; overflow: hidden; box-shadow: inset 0 0 0 1px var(--gold-line); background: #0b0a08; }
.gallery__item picture, .gallery__item img { width: 100%; height: 100%; }
.gallery__item img { object-fit: cover; filter: saturate(.92) sepia(.08); }
.owner__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.owner__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0a08; }
.owner__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 7px transparent, inset 0 0 0 8px var(--gold-deep); }
.owner__media picture, .owner__media img { width: 100%; height: 100%; }
.owner__media img { object-fit: cover; filter: saturate(.92) sepia(.08); }
.owner__media--bright img { filter: brightness(.66) contrast(1.06) saturate(.66) sepia(.22); }
.owner__copy { display: grid; gap: 18px; justify-items: start; }
.owner__acr { font-family: var(--font-band); font-stretch: 150%; font-weight: 840; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: .9; letter-spacing: -0.02em; color: var(--gold); }
.owner__title { font-size: clamp(2rem, 3.4vw, 3.4rem); }
.owner__title a { text-decoration: none; }
.owner__title a:hover { color: var(--gold-hi); }
.owner__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }
.owner__act .tlink { margin-top: 0; }

/* ---------- Projects index ---------- */
.index__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 64px); }
.index__group { scroll-margin-top: 110px; }
.index__co { margin: 0 0 14px; font-family: var(--font-serif); font-weight: 400; font-size: 1.45rem; color: var(--white); }
.index__co a { text-decoration: none; }
.index__co a:hover { color: var(--gold-hi); }
.index__acr { margin-right: 10px; font-family: var(--font-band); font-stretch: 150%; font-weight: 820; font-size: 1rem; letter-spacing: .04em; color: var(--gold); }
.index__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gold-line); }
.index__list a { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.index__list a:hover .index__name { color: var(--gold-hi); }
.index__name { color: var(--white); font-size: 1.05rem; }
.index__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--muted); }

/* ---------- Gemstones catalogue ---------- */
.catalogue__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 0 clamp(28px, 4vw, 72px); border-top: 1px solid var(--gold-line); }
.stone { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.stone__img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; padding: 4px; background: var(--metal); box-shadow: 0 10px 24px rgb(0 0 0 / .5); }
.stone__img--drawn { display: block; background: radial-gradient(circle at 40% 35%, var(--s), #000 120%); box-shadow: 0 0 0 4px var(--gold-deep); }
.stone__body { display: grid; gap: 8px; align-content: start; }
.stone__name { font-family: var(--font-serif); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--gold); }
.stone__colour { color: var(--white); }
.stone__desc { color: var(--muted); font-size: .98rem; }
.stone:target .stone__name { color: var(--gold-hi); }
.catalogue__note { margin-top: 24px; }
.specs { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--gold-line); }
.specs div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.specs dd { margin: 0; color: var(--white); }
.specs--inline div { grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); padding: 10px 0; }

.catalogue__list--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.catalogue__list--compact .stone { grid-template-columns: 60px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
.catalogue__list--compact .stone__img { width: 60px; height: 60px; padding: 3px; }
.catalogue__list--compact .stone__name { font-size: 1.6rem; }
.catalogue__list--compact .stone__colour { font-size: .96rem; }
.catalogue__list--compact .specs--inline div { padding: 7px 0; }
.catalogue__list--compact .stone__desc { font-size: .92rem; line-height: 1.55; }
.catalogue__title { max-width: 22ch; }

/* ---------- Mineral deposits of AJK: the table (/gemstones) ----------
   Gold opens, white divides: a gold hairline over the head, white hairlines between rows, a double
   gold rule over the total. Figures in wide Anybody with tabular numerals, right aligned. Under
   760px every row becomes a stacked card (labels from data-label). */
.deposits { scroll-margin-top: 90px; }
.dtable-wrap { position: relative; }
.dtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.dtable__caption { caption-side: top; padding-bottom: 18px; text-align: left; font: 600 11.5px/1.4 var(--font-band); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.dtable thead { border-top: 1px solid var(--gold-line); }
.dtable th, .dtable td { padding: 16px 14px; text-align: left; vertical-align: middle; }
.dtable th:first-child, .dtable td:first-child { padding-left: 0; }
.dtable th:last-child, .dtable td:last-child { padding-right: 0; }
.dtable thead th { padding-block: 14px 12px; font: 600 10.5px/1.35 var(--font-band); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; }
.dtable thead tr:first-child th { padding-bottom: 8px; }
.dtable thead tr:last-child th { padding-top: 4px; }
.dtable thead .dtable__group { text-align: center; color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold-line); padding-bottom: 10px; }
.dtable thead { box-shadow: inset 0 -1px 0 var(--line); }
.dtable .dtable__num { text-align: right; }
.dtable tbody tr { border-bottom: 1px solid var(--line); transition: background-color .4s var(--ease-out); scroll-margin-top: 110px; }
.dtable tbody tr:hover { background: rgb(214 180 106 / .035); }
.dtable tbody tr:target { background: rgb(214 180 106 / .08); box-shadow: inset 2px 0 0 var(--gold); }
.dtable tbody th { font-weight: 400; }
.dtable__name { min-width: 15rem; }
.dtable tbody .dtable__name { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; }
.dtable__n { font: 600 10.5px/1 var(--font-band); font-stretch: 125%; letter-spacing: .08em; color: var(--gold-deep); }
.dtable__mineral { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; }
.dtable__cab { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; padding: 3px; background: var(--metal); box-shadow: 0 8px 18px rgb(0 0 0 / .5); }
.dtable__label { display: block; font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.15; color: var(--white); }
.dtable__cat { display: block; margin-top: 4px; font: 600 9.5px/1.3 var(--font-band); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dtable__districts { color: var(--text); font-size: .98rem; line-height: 1.45; min-width: 9rem; }
.dtable tbody .dtable__num { font-family: var(--font-band); font-stretch: 115%; font-weight: 600; font-size: 1.02rem; color: var(--white); white-space: nowrap; }
.dtable tbody .dtable__total { color: var(--gold-hi); }
.dtable tbody .dtable__value { color: var(--gold); font-stretch: 125%; font-weight: 700; font-size: 1.12rem; }
.dtable tbody .dtable__value--tbd { font-family: var(--font-body); font-stretch: 100%; font-weight: 600; font-size: .92rem; color: var(--muted); white-space: normal; }
.dtable__unit { color: var(--muted); font-size: .92rem; white-space: nowrap; }
.dtable__note { color: var(--muted); font-size: .94rem; line-height: 1.6; max-width: 62ch; }
.dtable__row--note .dtable__note { padding-block: 18px; }
.dtable tfoot tr { border-top: 1px solid var(--gold-line); box-shadow: inset 0 4px 0 -3px rgb(214 180 106 / .14); }
.dtable tfoot th { padding-block: 22px 18px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.1; color: var(--white); text-align: left; }
.dtable__approx { display: block; margin-top: 8px; font: 600 10.5px/1.4 var(--font-band); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dtable tfoot .dtable__value { font-family: var(--font-band); font-stretch: 135%; font-weight: 720; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1; letter-spacing: -0.01em; color: var(--gold); white-space: nowrap; vertical-align: middle; }
.dtable__source { margin-top: 18px; max-width: 80ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---------- Mineral deposits: the highlight on the minerals company's page ---------- */
.dhl__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.dhl__copy { display: grid; gap: 22px; justify-items: start; }
.dhl__copy .display { font-size: clamp(2rem, 3.6vw, 3.6rem); }
.dhl__panel { position: relative; display: grid; gap: 22px; padding: clamp(28px, 3.4vw, 48px); background-position: 65% 35%; }
.dhl__panel::before { content: ""; position: absolute; inset: 8px; pointer-events: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px transparent, inset 0 0 0 7px var(--gold-deep); }
.dhl__panel > * { position: relative; }
.dhl__total { display: grid; gap: 8px; margin: 0; }
.dhl__label, .dhl__approx, .dhl__h { font: 600 10.5px/1.4 var(--font-band); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.dhl__h { color: var(--gold); font-size: 11px; }
.dhl__fig small, .dtable__vunit { font-size: .5em; font-weight: 600; letter-spacing: .04em; color: var(--gold-hi); }
.dtable__vunit { display: block; margin-top: 3px; font-size: inherit; color: var(--muted); letter-spacing: inherit; }
.dhl__fig { font-family: var(--font-band); font-stretch: 135%; font-weight: 720; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: .95; letter-spacing: -0.02em; color: var(--gold); font-variant-numeric: tabular-nums; }
.dhl__list { margin: -8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gold-line); }
.dhl__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.dhl__item img { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; padding: 3px; background: var(--metal); box-shadow: 0 8px 18px rgb(0 0 0 / .5); transition: transform .6s var(--ease-spring); }
.dhl__name { font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.15; color: var(--white); }
.dhl__where { grid-column: 2; font-size: .9rem; color: var(--muted); }
.dhl__value { grid-column: 3; grid-row: 1 / span 2; font-family: var(--font-band); font-stretch: 125%; font-weight: 700; font-size: 1rem; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dhl__item:hover .dhl__name { color: var(--gold-hi); }
.dhl__item:hover img { transform: scale(1.06); }
.dhl__source { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.prj__deposits { margin-top: 4px; }
/* keep "Rs 636,340 million" on one line inside the framed panel on phones */
@media (max-width: 480px) { .dhl__fig { font-size: 1.7rem; white-space: nowrap; } }

/* ---------- Jump links (empty states, 404) ---------- */
.jump { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gold-line); }
.jump--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); column-gap: clamp(28px, 4vw, 64px); border-top: 0; }
.jump--grid li { border-top: 1px solid var(--gold-line); }
.jump__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.jump--grid .jump__link { border-bottom: 0; height: 100%; }
.jump__title { font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.12; color: var(--white); }
.jump__text { grid-column: 1; font-size: .95rem; color: var(--muted); }
.jump__link i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.3rem; color: var(--gold); transition: transform .5s var(--ease-spring); }
.jump__link:hover .jump__title { color: var(--gold-hi); }
.jump__link:hover i { transform: translate(3px, -3px); }

/* ---------- Insights ---------- */
.empty-state { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); padding: clamp(32px, 5vw, 80px); background-position: 30% 50%; }
.empty-state::before { content: ""; position: absolute; inset: 10px; pointer-events: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px transparent, inset 0 0 0 7px var(--gold-deep); }
.empty-state__copy { position: relative; display: grid; gap: 22px; justify-items: start; align-content: start; }
.empty-state__title { font-size: clamp(2rem, 3.4vw, 3.4rem); max-width: 14ch; }
.empty-state__links { position: relative; display: grid; gap: 14px; align-content: start; }
.empty-state__h { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* ---------- Long-form reading: articles and legal pages ---------- */
.post__grid, .legal__grid { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: clamp(40px, 6vw, 110px); }
.post__grid--toc, .legal__grid { grid-template-columns: minmax(200px, 270px) minmax(0, 760px); justify-content: start; }
.post__main, .legal__main { display: grid; gap: 32px; align-content: start; min-width: 0; }
.post__byline { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.toc { position: sticky; top: 112px; align-self: start; display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid var(--gold-line); }
.toc__title { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.toc__list li { counter-increment: toc; }
.toc__list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 7px 0; font-size: 14.5px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .3s var(--ease-out); }
.toc__list a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-band); font-stretch: 125%; font-size: 10.5px; padding-top: 3px; color: var(--gold-deep); }
.toc__list a:hover, .toc__list a.is-active { color: var(--white); }
.toc__list a.is-active::before { color: var(--gold); }
.legal__other { margin-top: 6px; }
.legal__draft { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; font-size: .96rem; line-height: 1.6; color: var(--white); background: rgb(214 180 106 / .07); box-shadow: inset 0 0 0 1px var(--gold-line), inset 3px 0 0 var(--gold); }
.legal__draft i { flex: none; font-size: 1.3rem; color: var(--gold); margin-top: 1px; }
.prose { font-size: 1.1rem; line-height: 1.78; color: var(--text); max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-serif); font-weight: 400; color: var(--white); line-height: 1.15; margin-top: 1.9em; text-wrap: balance; }
.prose h2 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); scroll-margin-top: 110px; padding-top: .6em; border-top: 1px solid var(--line); }
.prose h3 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); }
.prose h4 { font-size: 1.25rem; }
.prose a { color: var(--gold); text-decoration-color: var(--gold-line); text-underline-offset: .2em; }
.prose a:hover { color: var(--gold-hi); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--gold); }
.prose blockquote { margin-left: 0; padding-left: 24px; border-left: 1px solid var(--gold); font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.45; color: var(--white); }
.prose img { height: auto; }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: .98rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--gold); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--gold-line); }
.prose code { font-size: .92em; color: var(--gold-hi); overflow-wrap: anywhere; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 24px; border-top: 1px solid var(--gold-line); }
.share__label { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.share__list { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.share__link { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--gold); font-size: 1.2rem; text-decoration: none; box-shadow: inset 0 0 0 1px var(--gold-line); background: rgb(214 180 106 / .04); transition: background-color .35s var(--ease-out), color .35s var(--ease-out); }
.share__link:hover { background: var(--gold); color: var(--black); }
.pager { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 48px; }

/* ---------- Contact form context (from ?project=) ---------- */
.form__context { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 14px 18px; font-size: .96rem; color: var(--white); background: rgb(214 180 106 / .08); box-shadow: inset 0 0 0 1px var(--gold-line), inset 3px 0 0 var(--gold); }

/* ---------- Notices (thank-you, 404) ---------- */
.notice { min-height: 100svh; display: grid; align-items: center; padding: 140px 0 96px; }
.notice__inner { display: grid; gap: 24px; justify-items: start; max-width: 1040px; }
.notice__inner > * { animation: phero-rise 1.2s var(--ease-out) both; }
.notice__inner > :nth-child(2) { animation-delay: .08s; }
.notice__inner > :nth-child(n+3) { animation-delay: .16s; }
.notice__mark { width: 72px; height: 72px; }
.notice__code { font-family: var(--font-band); font-stretch: 150%; font-weight: 820; font-size: clamp(5rem, 16vw, 12rem); line-height: .8; color: var(--gold); letter-spacing: -0.02em; }
.notice__title { max-width: 20ch; }
.notice__ref { color: var(--muted); font-variant-numeric: tabular-nums; }
.notice__act { display: flex; flex-wrap: wrap; gap: 12px; }
.nextsteps { display: grid; gap: 20px; width: 100%; margin: 12px 0; }
.nextsteps__title { font-family: var(--font-band); font-stretch: 125%; font-weight: 600; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.nextsteps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.nextsteps__item { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--gold-line); }
.nextsteps__star { position: absolute; top: -7px; left: 0; fill: var(--gold); }
.nextsteps__n { font-family: var(--font-band); font-stretch: 150%; font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--gold); }
.nextsteps__item h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.4rem; line-height: 1.12; color: var(--white); }
.nextsteps__item p { color: var(--muted); font-size: .96rem; }

/* ---------- Close band ---------- */
.close { position: relative; padding: clamp(88px, 11vw, 160px) 0; background-position: 70% 40%; border-top: 1px solid var(--gold-line); }
.close__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 32px clamp(40px, 6vw, 110px); align-items: end; }
.close__copy { display: grid; gap: 22px; }
.close__title { font-size: clamp(2.2rem, 4.2vw, 4.2rem); max-width: 20ch; }
.close__act { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cards--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post__grid--toc, .legal__grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}
@media (max-width: 899px) {
  .phero { padding-top: clamp(116px, 16vh, 150px); }
  .phero--cover { min-height: min(92svh, 760px); }
  .phero__shade { background: linear-gradient(0deg, rgb(7 7 7 / .97) 0%, rgb(7 7 7 / .62) 52%, rgb(7 7 7 / .3) 100%); }
  .phero--arch .phero__inner, .phero--mark .phero__inner { grid-template-columns: minmax(0, 1fr); }
  .phero__arch { justify-self: start; width: min(100%, 400px); }
  .phero__seal { justify-self: start; width: min(64vw, 280px); order: -1; }
  .phero__trio { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }
  .trio { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }
  .phero__band { width: calc(100% - 2 * var(--gutter)); margin-inline: var(--gutter); aspect-ratio: 16 / 7; }
  .cmp__grid, .prj__grid, .close__inner, .owner__grid, .gemstrip__grid, .empty-state, .card--featured .card__link { grid-template-columns: minmax(0, 1fr); }
  .card--featured .card__media { grid-row: auto; margin-bottom: 10px; }
  .cards--posts, .nextsteps__list { grid-template-columns: minmax(0, 1fr); }
  .spectable div, .specs div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .stone { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
  .stone__img { width: 64px; height: 64px; }
  .sib { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; }
  .gemstrip__list { gap: 22px 12px; }
  .gemstrip__list li { flex-basis: calc((100% - 3 * 12px) / 4); }
  .gemstrip__stone img, .gemstrip__drawn { width: 72px; height: 72px; }
  .dhl__grid { grid-template-columns: minmax(0, 1fr); }
}
/* the deposits table as stacked cards on phones (no sideways scrolling) */
@media (max-width: 759px) {
  .dtable, .dtable tbody, .dtable tfoot, .dtable tr, .dtable th, .dtable td { display: block; }
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dtable__caption { display: block; padding-bottom: 14px; border-bottom: 1px solid var(--gold-line); }
  .dtable tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; padding: 20px 0; }
  .dtable th, .dtable td { padding: 0; }
  .dtable tbody .dtable__name { grid-column: 1 / -1; min-width: 0; grid-template-columns: 22px minmax(0, 1fr); }
  .dtable__districts, .dtable__note { grid-column: 1 / -1; min-width: 0; }
  .dtable td::before { content: attr(data-label); display: block; margin-bottom: 5px; font: 600 9.5px/1.3 var(--font-band); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .dtable .dtable__num { text-align: left; }
  .dtable tbody .dtable__num { white-space: normal; overflow-wrap: anywhere; }
  .dtable__unit { white-space: normal; }
  .dtable tbody .dtable__value { grid-column: 2 / -1; }
  .dtable__row--note .dtable__value { grid-column: 1 / -1; }
  .dtable__row--note .dtable__note { padding-block: 0; }
  .dtable tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 4px; }
  .dtable tfoot th { padding: 18px 0 0; }
  .dtable tfoot td { padding-bottom: 6px; }
  .dhl__item { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .dhl__item img { width: 40px; height: 40px; grid-row: 1 / span 3; }
  .dhl__value { grid-column: 2; grid-row: auto; white-space: normal; }
}
@media (max-width: 560px) {
  .seats { grid-template-columns: minmax(0, 1fr); }
  .seat__arch { width: min(100%, 300px); }
  .pfilter__chip { padding: 0 14px; }
}

/* ---------- Phones: readable micro-labels ---------- */
@media (max-width: 899px) {
  .crumbs, .status, .card__meta, .seat__meta, .figrow dt, .spectable dt, .specs dt, .dtable__n, .dtable__approx,
  .dhl__label, .dhl__approx, .dhl__h, .post__byline, .toc__title, .toc__list a::before, .share__label { font-size: 12px; letter-spacing: .13em; }
  .dtable__cat, .dtable td::before { font-size: 11px; letter-spacing: .12em; }
}