/* ============================================================
   AXV v4 — PORTFOLIO
   The centerpiece. A single continuous dark surface of tiles.
   Layouts: gallery (default) · mosaic · index
   Plus logo-only row and the rich slide-over detail panel.
   ============================================================ */

/* The whole portfolio lives on one dark canvas. data-theme="dark"
   flips the design-system tokens for everything inside. */
.pf {
  background: var(--ink-950); color: var(--platinum-50);
  padding-top: clamp(24px, 4vh, 48px);
}
.pf--page { padding-top: calc(var(--nav-h) + clamp(40px, 7vh, 88px)); }

.pf-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 0 var(--wrap-pad);
  max-width: var(--wrap); margin: 0 auto clamp(28px, 4vh, 46px);
}
.pf-hd .sec-eyebrow { color: var(--ink-300); }
.pf-hd .sec-eyebrow::before { background: var(--ink-400); }
.pf-hd h2 {
  font-family: var(--font-display); font-weight: 500; color: var(--platinum-50);
  font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.06; letter-spacing: -.025em;
  max-width: 20ch; margin-top: 16px;
}
.pf-hd-r { display: flex; align-items: center; gap: 18px; }
.pf-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-300); white-space: nowrap; }

/* ---- Filters (portfolio page only) ---- */
.pf-filters {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--wrap-pad);
  max-width: var(--wrap); margin: 0 auto clamp(18px, 3vh, 30px);
}
.pf-filter {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--ink-300);
  padding: 8px 14px; border: 1px solid var(--ink-700); border-radius: var(--r-full);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.pf-filter:hover { color: var(--platinum-100); border-color: var(--ink-500); }
.pf-filter[data-on="true"] { color: var(--ink-950); background: var(--platinum-50); border-color: var(--platinum-50); }
.pf-filter .n { font-size: 9.5px; opacity: .6; }

/* ============================================================
   THE SURFACE — full-bleed, hairline-jointed. One continuous plane.
   ============================================================ */
.pf-surface {
  --gap: 1px;
  background: var(--ink-800);           /* hairline joints show through the gap */
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
}

/* GALLERY — uniform grid */
.pf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } }

/* MOSAIC — hero companies span larger, dense flow */
.pf-grid--mosaic { grid-auto-flow: dense; grid-auto-rows: 1fr; }
.pf-grid--mosaic .pf-tile[data-feature="true"] { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  .pf-grid--mosaic .pf-tile[data-feature="true"] { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .pf-grid--mosaic { grid-template-columns: 1fr; }
  .pf-grid--mosaic .pf-tile[data-feature="true"] { grid-column: span 1; }
}

/* ---- Tile ---- */
.pf-tile {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--ink-900); cursor: pointer; isolation: isolate;
  text-align: left; width: 100%; color: inherit;
}
.pf-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.pf-tile::after { /* legibility scrim */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(6,8,15,.92) 0%, rgba(6,8,15,.62) 22%, rgba(6,8,15,.10) 52%, rgba(6,8,15,0) 74%);
  transition: opacity .4s var(--ease); opacity: .96;
}
.pf-tile:hover img { filter: saturate(1.06) contrast(1.04) brightness(1.04); }
.pf-tile:focus-visible { outline: 2px solid var(--platinum-50); outline-offset: -3px; }

.pf-tile-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
}
.pf-badge {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tr-wider);
  text-transform: uppercase; color: var(--platinum-100); white-space: nowrap;
  padding: 5px 9px; background: rgba(10,14,24,.5); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
}
.pf-badge--lead { color: var(--ink-950); background: var(--platinum-50); border-color: var(--platinum-50); }
html[data-accent="signal"] .pf-badge--lead { background: var(--signal-500); border-color: var(--signal-500); color: var(--ink-950); }

.pf-tile-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
}
.pf-tile-co {
  font-family: var(--font-display); font-weight: 650; color: var(--platinum-50);
  font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -.02em; line-height: 1.03;
}
.pf-tile[data-feature="true"] .pf-tile-co { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
.pf-tile-sector {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--platinum-400); margin-top: 9px;
}
.pf-tile-line {
  font-family: var(--font-body); font-size: .88rem; line-height: 1.45;
  color: var(--platinum-200); margin-top: 12px; max-width: 42ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease);
}
.pf-tile[data-feature="true"] .pf-tile-line { max-width: 52ch; }
/* Reveal descriptor on hover/focus (desktop). Kept subtle + quick. */
@media (hover: hover) {
  .pf-tile:hover .pf-tile-line, .pf-tile:focus-visible .pf-tile-line { max-height: 6em; opacity: 1; margin-top: 12px; }
}
/* Touch / no-hover: always show the descriptor (tight) */
@media (hover: none) {
  .pf-tile-line { max-height: 6em; opacity: 1; }
}
.pf-tile-open {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--platinum-300);
  opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) { .pf-tile:hover .pf-tile-open, .pf-tile:focus-visible .pf-tile-open { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pf-tile img { transition: none; }
  .pf-tile-line, .pf-tile-open { transition: none; }
}

/* ---- Logo plate tiles (companies without photography) ---- */
.pf-tile[data-plate="true"]{background:linear-gradient(160deg,var(--ink-900) 0%,var(--ink-950) 62%)}
.pf-tile-plate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 0 34px}
.pf-tile-plate img{position:static;width:auto;height:auto;max-width:56%;object-fit:contain;filter:brightness(0) invert(1);opacity:.5;transition:opacity .3s var(--ease)}
.pf-tile-mono{font-family:var(--font-mono);font-size:26px;letter-spacing:var(--tr-wider);color:var(--platinum-400);opacity:.6}
.pf-tile[data-plate="true"]:hover .pf-tile-plate img{opacity:.85}
.pf-tile[data-plate="true"]::after{background:linear-gradient(to top,var(--ink-950) 4%,rgba(10,14,24,.45) 46%,rgba(10,14,24,0) 78%)}

/* ============================================================
   LOGO ROW — companies without photography, same dark canvas.
   ============================================================ */
.pf-logos { margin-top: 1px; }
.pf-logos-lbl {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(22px, 3vh, 34px) var(--wrap-pad) clamp(14px, 2vh, 20px);
  max-width: var(--wrap); margin: 0 auto;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tr-wider);
  text-transform: uppercase; color: var(--ink-300);
}
.pf-logos-lbl::after { content: ""; flex: 1; height: 1px; background: var(--ink-800); }
.pf-logo-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--ink-800);
  border-top: 1px solid var(--ink-800); border-bottom: 1px solid var(--ink-800);
}
.pf-logo-cell {
  position: relative; aspect-ratio: 3 / 2; background: var(--ink-950);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  cursor: pointer; transition: background .22s var(--ease);
}
.pf-logo-cell:hover { background: var(--ink-900); }
.pf-logo-cell:focus-visible { outline: 2px solid var(--platinum-50); outline-offset: -3px; }
.pf-logo-cell img {
  max-width: 74%; max-height: 40px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .58; transition: opacity .22s var(--ease);
}
.pf-logo-cell:hover img { opacity: .95; }
.pf-logo-cell .pf-logo-co {
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--ink-400);
  opacity: 0; transition: opacity .22s var(--ease);
}
.pf-logo-cell:hover .pf-logo-co { opacity: 1; }
@media (max-width: 900px) { .pf-logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .pf-logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Preview footer (home) ---- */
.pf-more {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 5vh, 60px) var(--wrap-pad) clamp(40px, 6vh, 72px);
}
.pf-more button {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--platinum-50);
  padding: 15px 26px; border: 1px solid var(--ink-600); border-radius: var(--r-full);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.pf-more button:hover { border-color: var(--platinum-400); }
.pf-more button .arr { transition: transform .22s var(--ease); }
.pf-more button:hover .arr { transform: translateX(4px); }

/* ============================================================
   INDEX layout (list / ledger)
   ============================================================ */
.pf-index { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-pad); }
.pf-row {
  display: grid; grid-template-columns: 52px 1.1fr 1fr 88px 24px;
  align-items: center; gap: 20px; width: 100%; text-align: left;
  padding: 20px 6px; border-bottom: 1px solid var(--ink-800); color: inherit;
  transition: background .18s var(--ease);
}
.pf-row:first-child { border-top: 1px solid var(--ink-800); }
.pf-row:hover { background: var(--ink-900); }
.pf-row-thumb { width: 52px; height: 40px; overflow: hidden; background: var(--ink-800); }
.pf-row-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); }
.pf-row-thumb.is-mono { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.pf-row-co { font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; letter-spacing: -.01em; color: var(--platinum-50); }
.pf-row-co .st { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-400); margin-top: 5px; }
.pf-row-line { font-size: .88rem; line-height: 1.45; color: var(--platinum-300); }
.pf-row-stage { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-300); }
.pf-row-arr { text-align: right; color: var(--ink-400); }
.pf-row:hover .pf-row-arr { color: var(--platinum-50); }
@media (max-width: 720px) {
  .pf-row { grid-template-columns: 44px 1fr 64px; }
  .pf-row-line, .pf-row-arr { display: none; }
}

/* ============================================================
   DETAIL PANEL — slide-over, dark, editorial
   ============================================================ */
.panel-root { position: fixed; inset: 0; z-index: 120; }
.panel-scrim { position: absolute; inset: 0; background: rgba(4,6,12,.72); backdrop-filter: blur(3px); animation: scrimIn .3s ease both; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(680px, 94vw); background: var(--ink-950); color: var(--platinum-100);
  border-left: 1px solid var(--ink-700); display: flex; flex-direction: column;
  animation: panelIn .36s var(--ease) both;
}
@keyframes panelIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel, .panel-scrim { animation: none; } }

.panel-chrome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--ink-800); flex: 0 0 auto;
}
.panel-crumb { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-300); }
.panel-crumb b { color: var(--platinum-100); font-weight: 500; }
.panel-chrome-r { display: flex; align-items: center; gap: 6px; }
.panel-nav {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--ink-300); border: 1px solid var(--ink-700);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.panel-nav:hover:not(:disabled) { color: var(--platinum-50); border-color: var(--ink-500); }
.panel-nav:disabled { opacity: .35; cursor: default; }
.panel-close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--ink-200); font-size: 20px; border: 1px solid var(--ink-700); }
.panel-close:hover { color: var(--platinum-50); border-color: var(--ink-500); }

.panel-body { overflow-y: auto; flex: 1; }
.panel-hero { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-900); margin: 0; }
.panel-hero img { width: 100%; height: 100%; object-fit: cover; }
.panel-hero.is-plate { display: flex; align-items: center; justify-content: center; }
.panel-hero.is-plate img { width: auto; height: auto; max-width: 52%; max-height: 46%; object-fit: contain; filter: brightness(0) invert(1); opacity: .8; }
.panel-hero-mono{font-family:var(--font-mono);font-size:clamp(38px,6vw,64px);letter-spacing:var(--tr-wider);color:var(--platinum-400);opacity:.55}
.panel-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink-950) 2%, rgba(10,14,24,0) 40%); }

.panel-in { padding: clamp(24px, 3.4vw, 40px); }
.panel-in > * + * { margin-top: 30px; }

.panel-head-top { display: flex; align-items: center; gap: 14px; }
.panel-logo { height: 30px; display: flex; align-items: center; }
.panel-logo img { max-height: 30px; max-width: 190px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.panel-lead { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-950); background: var(--platinum-50); padding: 5px 9px; }
html[data-accent="signal"] .panel-lead { background: var(--signal-500); }
.panel-co { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -.03em; color: var(--platinum-50); margin-top: 16px; line-height: 1.02; }
.panel-sector { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--platinum-400); margin-top: 12px; }

.panel-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ink-800); border: 1px solid var(--ink-800); }
.panel-spec > div { background: var(--ink-950); padding: 16px 18px; }
.panel-spec dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-400); }
.panel-spec dd { margin: 8px 0 0; font-family: var(--font-body); font-size: .95rem; color: var(--platinum-100); }
.panel-spec dd a { color: var(--platinum-100); display: inline-flex; align-items: center; gap: 6px; }
.panel-spec dd a:hover { color: var(--platinum-50); text-decoration: underline; }
.panel-spec dd .ext { font-size: .8em; color: var(--ink-300); }

.panel-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-400); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.panel-lbl::after { content: ""; flex: 1; height: 1px; background: var(--ink-800); }

.panel-thesis { font-family: var(--font-display); font-weight: 400; font-size: 1.28rem; line-height: 1.4; letter-spacing: -.015em; color: var(--platinum-100); }
.panel-prose p { font-size: .96rem; line-height: 1.62; color: var(--platinum-300); }
.panel-prose p + p { margin-top: 14px; }

.panel-founders { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.panel-founders li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-800); }
.panel-founders .n { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--platinum-50); }
.panel-founders .r { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); text-align: right; }

.panel-list { list-style: none; padding: 0; margin: 0; }
.panel-list li { position: relative; padding: 0 0 12px 22px; font-size: .93rem; line-height: 1.55; color: var(--platinum-300); }
.panel-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border: 1px solid var(--ink-400); }

.panel-timeline { list-style: none; padding: 0; margin: 0; }
.panel-timeline li { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--ink-800); }
.panel-timeline .when { font-family: var(--font-mono); font-size: 12px; color: var(--platinum-400); flex: 0 0 56px; }
.panel-timeline .what { font-size: .92rem; color: var(--platinum-200); line-height: 1.45; }

.panel-gallery-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.panel-gallery figure { margin: 0; }
.panel-gallery-frame { overflow: hidden; background: var(--ink-900); }
.panel-gallery-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.panel-gallery-cap { display: flex; gap: 12px; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; color: var(--ink-300); }
.panel-gallery-cap .n { color: var(--platinum-400); }

.panel-foot { display: flex; justify-content: space-between; padding: 24px 0 4px; margin-top: 12px; border-top: 1px solid var(--ink-800); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-400); }

@media (max-width: 520px) { .panel-spec { grid-template-columns: 1fr; } }