/* ============================================================
   SOHAIB ALDAYEM — portfolio as exhibition
   Gallery-white, wall-label typography, museum restraint.
   Type: Libre Franklin (display/body) · IBM Plex Mono (data)
   ============================================================ */

@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/libre-franklin-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/libre-franklin-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/libre-franklin-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/libre-franklin-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/libre-franklin-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/libre-franklin-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --white: #ffffff;
  --wall: #f7f7f5;
  --ink: #141311;
  --grey: #66645f;
  --hairline: #e4e3df;
  --red: #e0301e;
  --blue: #1d4fd7;
  --yellow: #f7c600;
  --accent: var(--ink);
  --sans: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.25, 0.6, 0.2, 1);
  --measure: 62ch;
}
body[data-accent="red"]    { --accent: var(--red); }
body[data-accent="blue"]   { --accent: var(--blue); }
body[data-accent="yellow"] { --accent: var(--yellow); --accent-ink: var(--ink); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--yellow); color: var(--ink); }

a { color: inherit; text-decoration: none; }
p a, .caption a { border-bottom: 1px solid var(--accent); transition: background-color 200ms var(--ease); }
p a:hover, .caption a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

img, svg { max-width: 100%; height: auto; display: block; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }

/* ---------------- wayfinding (nav) ---------------- */
.wayfinding {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.wayfinding .container {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px; gap: 16px;
}
.brand { font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.rooms { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; }
.rooms a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--grey); padding: 2px 0; border-bottom: 2px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.rooms a:hover { color: var(--ink); }
.rooms a[aria-current="page"], .rooms a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.rooms .num { color: var(--accent); margin-right: 2px; }
body[data-accent="yellow"] .rooms .num { color: var(--ink); }

/* ---------------- exhibition header per room ---------------- */
.room-head { padding: clamp(56px, 9vw, 120px) 0 clamp(32px, 5vw, 56px); }
.room-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--grey); text-transform: uppercase; margin-bottom: 20px;
}
.room-eyebrow .swatch {
  display: inline-block; width: 10px; height: 10px; background: var(--accent);
  margin-right: 8px; vertical-align: baseline;
}
h1.room-title {
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.02;
  font-size: clamp(40px, 7.2vw, 84px); max-width: 14ch;
}
.room-sub {
  margin-top: 22px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 300;
  color: var(--grey); max-width: 46ch; line-height: 1.45;
}

/* ---------------- the wall label (signature element) ---------------- */
.wall-label {
  max-width: 400px;
  padding: 22px 0 0;
  border-top: 3px solid var(--ink);
  font-size: 14.5px; line-height: 1.5;
}
.wall-label .artist { font-weight: 700; letter-spacing: 0.01em; }
.wall-label .work-title { font-style: italic; }
.wall-label .work-title .year { font-style: normal; color: var(--grey); }
.wall-label .medium { margin-top: 8px; color: var(--grey); font-size: 13.5px; }
.wall-label .acq { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--grey); text-transform: uppercase; }
.wall-label .curatorial { margin-top: 14px; font-size: 14px; color: var(--ink); }
.wall-label.on-wall { background: var(--wall); border-top: none; padding: 24px 26px 26px; }

/* spec block: engineering data rendered in mono, museum-tombstone spirit */
.spec-block {
  font-family: var(--mono); font-size: 13px; line-height: 1.9;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline);
  padding: 14px 0; margin: 8px 0;
}
.spec-block dt { float: left; clear: left; width: 9.5em; color: var(--grey); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding-top: 2px; }
.spec-block dd { margin-left: 10.5em; }

/* ---------------- exhibits: framed prints ---------------- */
.exhibit { margin: clamp(44px, 7vw, 88px) 0; }
.exhibit-frame {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: clamp(16px, 3vw, 40px);
  box-shadow: 0 1px 0 rgba(20,19,17,0.04);
}
.exhibit-frame.tight { padding: 0; overflow: hidden; }
.exhibit .wall-label { margin-top: 26px; border-top-width: 2px; }
.exhibit-row { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.exhibit-row .wall-label { margin-top: 0; position: sticky; top: 96px; }
@media (max-width: 880px) { .exhibit-row { grid-template-columns: 1fr; } .exhibit-row .wall-label { position: static; margin-top: 24px; } }

/* section wall text */
.wall-text { margin: clamp(40px, 7vw, 80px) 0; }
.wall-text h2 {
  font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.01em;
  margin-bottom: 18px; max-width: 24ch;
}
.wall-text h2 .index { font-family: var(--mono); font-weight: 400; font-size: 0.55em; color: var(--grey); vertical-align: super; margin-right: 10px; letter-spacing: 0.05em; }
.wall-text h3 { font-weight: 600; font-size: 19px; margin: 28px 0 10px; }

.divider { border: none; border-top: 1px solid var(--hairline); margin: clamp(40px, 7vw, 80px) 0; }

/* ---------------- landing: poster composition ----------------
   MoMA poster grammar × drawing sheet: asymmetric two-block hero,
   one dominant scale, single accent, everything on the grid. */
.poster { padding: clamp(56px, 9vw, 130px) 0 clamp(28px, 4vw, 48px); }
.poster-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(240px, 3fr);
  gap: clamp(28px, 5vw, 80px); align-items: end;
}
@media (max-width: 760px) { .poster-grid { grid-template-columns: 1fr; align-items: start; } }
.poster .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin-bottom: 26px; }
.poster h1 {
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
  font-size: clamp(32px, 7vw, 78px);
}
.poster h1 .accent-dot { color: var(--red); }
.poster-statement {
  margin-top: 22px; font-size: clamp(14px, 1.6vw, 17px); font-weight: 400;
  color: var(--grey); line-height: 1.5; max-width: 52ch;
}
/* exhibition tombstone block, right column */
.poster-label { border-top: 3px solid var(--ink); font-size: 13px; }
.poster-label .pl-row { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.poster-label .pl-key { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--grey); padding-top: 2px; }
.poster-label .pl-val { line-height: 1.45; }
.poster-label a { border-bottom: 1px solid var(--accent); }
.poster-rule { margin-top: clamp(30px, 5vw, 54px); max-width: 900px; }

/* ---------------- the journey: route diagram ----------------
   A single red spine, transit-diagram markers, drafted callouts.
   Grid: [year] [spine] [body]. The spine is drawn by .route::before. */
.journey { margin: clamp(48px, 8vw, 104px) auto; }
.journey-head { margin-bottom: clamp(26px, 4vw, 44px); max-width: 56ch; }
.journey-head h2 { font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.01em; margin-bottom: 8px; }
.journey-sub { color: var(--grey); font-size: 15px; }

.route { list-style: none; position: relative; max-width: 880px; }
.route .stop {
  display: grid; grid-template-columns: 64px 40px minmax(0, 1fr);
  column-gap: clamp(10px, 2.5vw, 26px);
}
.stop-year {
  font-family: var(--mono); font-size: 12px; color: var(--grey);
  text-align: right; padding-top: 3px; letter-spacing: 0.04em;
}
/* the spine cell: vertical red line + marker */
.stop-marker { position: relative; }
.stop-marker::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 3px; margin-left: -1.5px; background: var(--red);
}
.route .stop:first-child .stop-marker::before { top: 5px; }
.route .stop:last-child .stop-marker::before { bottom: auto; height: 14px; }
.stop-marker .dot {
  position: relative; z-index: 1; display: block; margin: 3px auto 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--red);
}
.stop-marker .dot.origin::after, .stop-marker .dot.now::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--red);
}
.stop-marker .arrow-down {
  position: relative; z-index: 1; display: block; margin: 8px auto 0;
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 11px solid var(--red);
}
.stop-body { padding: 0 0 clamp(30px, 5vw, 52px); }
.stop-body h3 { font-weight: 700; font-size: clamp(19px, 2.4vw, 24px); letter-spacing: -0.01em; line-height: 1.15; }
.stop-role { font-family: var(--mono); font-size: 11.5px; color: var(--grey); letter-spacing: 0.03em; margin-top: 6px; }
.stop-note { font-size: 15px; color: var(--ink); max-width: 52ch; margin-top: 10px; line-height: 1.55; }
.terminus-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); padding-top: 6px; }

/* callout annotations: dimension-line refs that key to the catalog */
.stop-annos { margin-top: 18px; display: grid; gap: 10px; max-width: 480px; }
.anno {
  display: grid; grid-template-columns: 64px 76px 1fr; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--hairline); padding: 9px 0 2px;
  position: relative;
}
.anno::before { /* leader tick off the spine */
  content: ""; position: absolute; left: -14px; top: 9px; width: 8px; height: 8px;
  border-left: 1px solid var(--grey); border-bottom: 1px solid var(--grey);
}
.anno-ref { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--red); }
.anno-val { font-family: var(--mono); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.anno-key { font-family: var(--mono); font-size: 11px; color: var(--grey); line-height: 1.5; }
.anno:hover .anno-key, .anno:focus-visible .anno-key { color: var(--ink); }
.anno:hover .anno-ref { text-decoration: underline; }
@media (max-width: 560px) {
  .route .stop { grid-template-columns: 34px 28px minmax(0, 1fr); }
  .stop-year { font-size: 10px; }
  .anno { grid-template-columns: 54px 62px 1fr; gap: 8px; }
  .anno::before { display: none; }
}

/* ---------------- the galleries: catalog rows, not cards ---------------- */
.catalog { margin: clamp(48px, 8vw, 104px) auto; }
.catalog-list { list-style: none; border-top: 3px solid var(--ink); }
.catalog-list li { border-bottom: 1px solid var(--hairline); }
.catalog-list a {
  display: grid; grid-template-columns: 58px minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr) 30px;
  gap: clamp(10px, 2vw, 24px); align-items: baseline;
  padding: clamp(16px, 2.6vw, 26px) 4px;
  transition: background-color 250ms var(--ease);
}
.catalog-list a:hover, .catalog-list a:focus-visible { background: var(--wall); }
.cat-num { font-family: var(--mono); font-size: 13px; color: var(--row-accent, var(--ink)); font-weight: 500; }
.cat-title { font-weight: 700; font-size: clamp(18px, 2.4vw, 25px); letter-spacing: -0.01em; line-height: 1.15; }
.catalog-list a:hover .cat-title { text-decoration: underline; text-decoration-color: var(--row-accent, var(--ink)); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cat-desc { font-size: 14px; color: var(--grey); line-height: 1.5; }
.cat-kpi { font-family: var(--mono); font-size: 11.5px; color: var(--ink); line-height: 1.5; }
.cat-go { font-size: 18px; color: var(--row-accent, var(--ink)); text-align: right; transition: transform 250ms var(--ease); display: inline-block; }
.catalog-list a:hover .cat-go { transform: translateX(4px); }
@media (max-width: 760px) {
  .catalog-list a { grid-template-columns: 40px minmax(0, 1fr) 22px; grid-template-rows: auto auto auto; align-items: start; }
  .cat-num { grid-row: 1; }
  .cat-title { grid-column: 2; }
  .cat-go { grid-column: 3; grid-row: 1; }
  .cat-desc { grid-column: 2; grid-row: 2; margin-top: 4px; }
  .cat-kpi { grid-column: 2; grid-row: 3; margin-top: 6px; }
}

/* ---------------- recreated interfaces (kiosk exhibits) ---------------- */
.kiosk { border: 1px solid var(--hairline); background: var(--white); font-size: 14px; }
.kiosk-chrome { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: var(--wall); }
.kiosk-chrome .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.kiosk-chrome .addr { font-family: var(--mono); font-size: 11px; color: var(--grey); margin-left: 6px; }
.kiosk-body { padding: clamp(14px, 2.5vw, 28px); }

/* tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 0 22px; border-bottom: 1px solid var(--hairline); margin-bottom: 22px; }
.tabs button {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--grey); padding: 10px 2px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabpanel[hidden] { display: none; }

/* dashboard grid inside kiosk */
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.dash-cell { grid-column: span 6; min-width: 0; }
.dash-cell.w4 { grid-column: span 4; } .dash-cell.w8 { grid-column: span 8; } .dash-cell.w12 { grid-column: span 12; }
@media (max-width: 820px) { .dash-cell, .dash-cell.w4, .dash-cell.w8 { grid-column: span 12; } }
.dash-cell h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--hairline); padding: 14px 16px; }
.kpi .v { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.kpi .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--grey); margin-top: 4px; }
.kpi.alert .v { color: var(--red); }
.kpi.good .v { color: var(--blue); }

/* data tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); font-weight: 500; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ink); }
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.data-table td.num, .data-table th.num { font-family: var(--mono); text-align: right; }
.data-table .status { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--hairline); white-space: nowrap; }
.status.ok { color: #1a7f37; border-color: #1a7f3733; }
.status.warn { color: #b45309; border-color: #b4530933; }
.status.bad { color: var(--red); border-color: #e0301e33; }
.status.neutral { color: var(--grey); }

/* Jira board — anatomy mirrors the real product: grey swimlane columns,
   white shadowed cards, soft epic labels, type icon + key + points + avatar */
.board { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 10px; }
@media (max-width: 880px) { .board { grid-template-columns: 1fr; } }
.board-col { background: #f4f5f7; border-radius: 5px; padding: 10px 8px 6px; min-width: 0; }
.board-col h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #5e6c84; padding: 2px 6px 10px; display: flex; gap: 8px; }
.board-col h4 .count { color: #5e6c84; background: #dfe1e6; border-radius: 10px; padding: 0 7px; font-size: 10px; }
.card { background: var(--white); border-radius: 3px; box-shadow: 0 1px 2px rgba(9,30,66,0.2); padding: 10px 12px 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.45; }
.card .summary { color: #172b4d; }
.card.done .summary { color: #6b778c; }
.card .epic-line { margin-top: 7px; }
.card .epic { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.epic.e1 { background: #deebff; color: #0747a6; } .epic.e2 { background: #eae6ff; color: #403294; }
.epic.e3 { background: #ffebe6; color: #bf2600; } .epic.e4 { background: #e3fcef; color: #006644; }
.card .card-foot { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }
.card .tkey { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; color: #5e6c84; }
.card.done .tkey .knum { text-decoration: line-through; }
.card .ticon { width: 13px; height: 13px; border-radius: 2px; background: #36b37e; color: #fff; font-size: 9px; line-height: 13px; text-align: center; flex: none; }
.card .ticon.task { background: #4bade8; }
.card .tright { display: inline-flex; align-items: center; gap: 6px; }
.card .prio { font-size: 11px; font-weight: 700; line-height: 1; }
.prio.hi { color: #ff5630; } .prio.md { color: #ffab00; } .prio.lo { color: #0065ff; }
.card .pts { font-family: var(--mono); font-size: 10px; color: #172b4d; background: #dfe1e6; border-radius: 10px; padding: 1px 7px; }
.card .avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 8.5px; display: grid; place-items: center; flex: none; }
.card .meta { margin-top: 7px; font-family: var(--mono); font-size: 10px; color: #6b778c; }

/* streamlit-ish shell */
.app-shell { display: grid; grid-template-columns: 200px minmax(0,1fr); }
@media (max-width: 820px) { .app-shell { grid-template-columns: 1fr; } .app-side { display: none; } }
.app-side { background: var(--wall); padding: 18px 16px; border-right: 1px solid var(--hairline); font-size: 13px; }
.app-side .nav-item { padding: 7px 10px; margin-bottom: 2px; color: var(--grey); }
.app-side .nav-item.active { background: var(--white); color: var(--ink); border-left: 3px solid var(--accent); }
.app-main { padding: clamp(14px, 2.5vw, 26px); min-width: 0; }
.app-main h3.app-title { font-weight: 700; font-size: 22px; margin-bottom: 8px; }
.app-main .app-sub { color: var(--grey); font-size: 13px; margin-bottom: 18px; }

/* Streamlit-app recreation details (review tracker) */
.side-app-title { font-weight: 700; font-size: 14px; line-height: 1.3; padding: 4px 10px 16px; }
.side-sep { border-top: 1px solid var(--hairline); margin: 14px 6px; }
.side-misc { padding: 5px 10px; color: var(--grey); font-size: 12px; }
.app-crumb { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.app-btn {
  font-family: var(--mono); font-size: 11px; color: var(--ink);
  background: var(--white); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 5px 12px; margin: 2px 0 6px; cursor: default;
}
.rt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.rt-kpis.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .rt-kpis, .rt-kpis.three { grid-template-columns: repeat(2, 1fr); } }
.rt-kpi { border: 1px solid var(--hairline); border-radius: 6px; padding: 12px 14px; background: var(--white); }
.rt-kpi .l { font-size: 11px; color: var(--grey); }
.rt-kpi .v { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin-top: 2px; }
.rt-expander { border: 1px solid var(--hairline); border-radius: 6px; padding: 8px 12px; font-size: 12.5px; color: var(--grey); margin: 4px 0 18px; }
.rt-flex { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; }
@media (max-width: 900px) { .rt-flex { grid-template-columns: 1fr; } }
.rt-h { font-weight: 600; font-size: 15px; margin: 6px 0 8px; }
.rt-quick { min-width: 0; }
.rt-quick-empty { background: #eef3f8; border-radius: 6px; padding: 14px; font-size: 12.5px; color: var(--grey); }
.rt-table { font-size: 12px; }
.rt-table th { white-space: nowrap; }
.rt-table td { white-space: nowrap; }
.rt-x { color: var(--red); font-weight: 700; }
.rt-y { color: #1a7f37; font-weight: 700; }
.rt-velocity { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .rt-velocity { grid-template-columns: 1fr; } }

/* drafted diagrams: keep text legible on phones by allowing
   horizontal scroll instead of shrinking the sheet */
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram-scroll svg { min-width: var(--dmw, 680px); }

/* ---------------- BI-tool recreation (dark kiosk) ----------------
   Mirrors the production BI tool: dark canvas, light panel title bars,
   page tabs along the BOTTOM, row-count status bar. */
.kiosk.sf { background: #2b2b2b; border-color: #1f1f1f; }
.kiosk.sf .kiosk-chrome { background: #1f1f1f; border-color: #141414; }
.kiosk.sf .kiosk-chrome .dot { background: #4a4a4a; }
.kiosk.sf .kiosk-chrome .addr { color: #a5a29d; }
.sf-canvas { padding: 10px; }
.sf-grid { display: grid; gap: 10px; grid-template-columns: repeat(12, 1fr); }
.sf-grid > .sf-panel { grid-column: span 6; min-width: 0; }
/* per-page arrangements (desktop) */
.sf-grid.t1 > .sf-panel:nth-child(1) { grid-column: span 5; }
.sf-grid.t1 > .sf-panel:nth-child(2) { grid-column: span 4; }
.sf-grid.t1 > .sf-panel:nth-child(3) { grid-column: span 3; }
.sf-grid.t1 > .sf-panel:nth-child(4) { grid-column: span 8; }
.sf-grid.t1 > .sf-panel:nth-child(5) { grid-column: span 4; }
.sf-grid.t2 > .sf-panel:nth-child(1) { grid-column: span 7; }
.sf-grid.t2 > .sf-panel:nth-child(2) { grid-column: span 5; grid-row: span 2; }
.sf-grid.t2 > .sf-panel:nth-child(3) { grid-column: span 7; }
.sf-grid.t3 > .sf-panel:nth-child(1) { grid-column: span 4; }
.sf-grid.t3 > .sf-panel:nth-child(2) { grid-column: span 4; }
.sf-grid.t3 > .sf-panel:nth-child(3) { grid-column: span 4; }
.sf-grid.t3 > .sf-panel:nth-child(4) { grid-column: span 7; }
.sf-grid.t3 > .sf-panel:nth-child(5) { grid-column: span 5; }
.sf-grid.t4 > .sf-panel:nth-child(1) { grid-column: span 4; }
.sf-grid.t4 > .sf-panel:nth-child(2) { grid-column: span 8; }
.sf-grid.t4 > .sf-panel:nth-child(3) { grid-column: span 4; }
.sf-grid.t4 > .sf-panel:nth-child(4) { grid-column: span 4; }
.sf-grid.t4 > .sf-panel:nth-child(5) { grid-column: span 4; }
.sf-grid.t5 > .sf-panel:nth-child(1) { grid-column: span 12; }
.sf-grid.t5 > .sf-panel:nth-child(2) { grid-column: span 7; }
.sf-grid.t5 > .sf-panel:nth-child(3) { grid-column: span 5; }
@media (max-width: 960px) { .sf-grid > .sf-panel { grid-column: span 12 !important; grid-row: auto !important; } }
.sf-panel { background: #333333; border: 1px solid #1f1f1f; display: flex; flex-direction: column; }
.sf-title {
  background: #9a9a9a; color: #141311; text-align: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.03em;
  padding: 4px 8px; border-bottom: 1px solid #1f1f1f;
}
.sf-body { padding: 8px; min-width: 0; flex: 1; }
.sf-body .diagram-scroll svg { display: block; width: 100%; height: auto; }
/* tables inside the dark canvas */
.sf-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 10.5px; color: #e8e6e3; }
.sf-table th { text-align: left; font-weight: 500; font-size: 9.5px; letter-spacing: 0.05em; text-transform: lowercase; color: #a5a29d; border-bottom: 1px solid #6b6b6b; padding: 5px 8px; }
.sf-table td { padding: 5px 8px; border-bottom: 1px solid #454545; }
.sf-table .num, .sf-table th.num { text-align: right; }
.sf-ok { color: #8fd694; }
/* KPI tiles (vendor page) */
.sf-kpis { display: grid; gap: 10px; }
.sf-kpi { background: #2a6fd4; color: #fff; padding: 12px 14px 8px; }
.sf-kpi .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; opacity: 0.85; }
.sf-kpi .v { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; margin-top: 2px; }
.sf-kpi .l { font-family: var(--mono); font-size: 9.5px; opacity: 0.85; margin: 2px 0 6px; }
/* bottom page-tab strip, BI-tool style */
.sf-tabs { display: flex; flex-wrap: wrap; background: #1f1f1f; border-top: 1px solid #141414; padding: 0 6px; }
.sf-tabs button {
  appearance: none; border: none; cursor: pointer;
  background: transparent; color: #a5a29d;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em;
  padding: 8px 14px; border-right: 1px solid #333;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.sf-tabs button:hover { color: #e8e6e3; }
.sf-tabs button[aria-selected="true"] { background: #3d3d3d; color: #ffffff; }
.sf-status { display: flex; gap: 22px; justify-content: flex-end; background: #171717; color: #7d7a76; font-family: var(--mono); font-size: 9.5px; padding: 4px 12px; }

/* captions under exhibits */
.caption { font-size: 13px; color: var(--grey); margin-top: 12px; max-width: 70ch; }
.caption .recreation-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--yellow); padding: 1px 7px; margin-right: 8px; white-space: nowrap;
}

/* about + contact */
.contact-strip { background: var(--ink); color: var(--white); padding: clamp(48px, 8vw, 96px) 0; }
.contact-strip h2 { font-weight: 900; font-size: clamp(30px, 5vw, 54px); letter-spacing: -0.02em; line-height: 1.12; max-width: 18ch; }
.contact-strip .email { display: inline-block; margin-top: 28px; font-family: var(--mono); font-size: clamp(15px, 2.4vw, 20px); border-bottom: 2px solid var(--yellow); padding-bottom: 4px; color: var(--white); }
.contact-strip .fine { margin-top: 22px; font-size: 13px; color: #a9a7a2; max-width: 52ch; }

/* footer colophon */
.colophon { border-top: 1px solid var(--hairline); padding-top: 34px; padding-bottom: 60px; margin-top: clamp(48px, 8vw, 96px); font-family: var(--mono); font-size: 11.5px; color: var(--grey); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.colophon a { border-bottom: 1px solid var(--hairline); }
.colophon a:hover { color: var(--ink); }

/* room-to-room footer nav */
.room-next { margin-top: clamp(48px, 8vw, 96px); border-top: 3px solid var(--ink); padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.room-next a { font-weight: 700; font-size: 18px; }
.room-next .dir { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); display: block; margin-bottom: 6px; }
.room-next a:hover .title { border-bottom: 2px solid var(--accent); }

/* ---------------- pull-quote: wall text, writ large ---------------- */
.pull-quote { margin: clamp(48px, 8vw, 104px) auto; }
.pull-quote blockquote { border-left: 3px solid var(--accent); padding-left: clamp(20px, 3.5vw, 40px); max-width: 780px; }
.pq-text { font-weight: 300; font-size: clamp(26px, 4vw, 40px); line-height: 1.18; letter-spacing: -0.015em; }
.pq-support { margin-top: 18px; max-width: var(--measure); font-size: 16px; line-height: 1.6; color: var(--ink); }
.pq-source { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }

/* ---------------- miniatures carousel: the work beside the belief ----------------
   Asymmetric two-column: quote keeps primacy (wider column, read first);
   the carousel is a small framed counterpoint in the hairline style.
   Labels appear only on hover/focus; motion is museum-slow and fully
   stopped under prefers-reduced-motion (static first slide, manual arrows). */
.pq-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 28vw, 356px);
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.pq-showcase { max-width: 356px; }
.mini-carousel { position: relative; }
.mc-track {
  list-style: none; position: relative; aspect-ratio: 340 / 250;
  background: var(--white); border: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(20,19,17,0.04);
}
.mc-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.mc-slide:first-child { opacity: 1; visibility: visible; }
.js .mc-slide {
  transition: opacity 900ms var(--ease), visibility 0s 900ms;
}
.js .mc-slide.current { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.js .mc-slide:first-child:not(.current) { opacity: 0; visibility: hidden; }
.mc-slide a { display: block; position: absolute; inset: 0; }
.mc-slide svg { width: 100%; height: 100%; display: block; }
/* the label veil: restrained bottom strip, hover/focus only */
.mc-veil {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: rgba(255,255,255,0.94);
  border-top: 1px solid var(--hairline);
  opacity: 0; transition: opacity 300ms var(--ease);
}
.mc-slide a:hover .mc-veil, .mc-slide a:focus-visible .mc-veil { opacity: 1; }
.mc-name { font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em; color: var(--ink); line-height: 1.3; }
.mc-era {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--grey); white-space: nowrap;
}
/* controls: tiny arrows + progress ticks (revealed by JS) */
.mc-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px;
}
.mc-nav[hidden] { display: none; }
.mc-arrow {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 13px; color: var(--grey);
  padding: 2px 6px; transition: color 200ms var(--ease);
}
.mc-arrow:hover, .mc-arrow:focus-visible { color: var(--ink); }
.mc-ticks { display: flex; gap: 6px; }
.mc-tick {
  appearance: none; border: none; cursor: pointer; padding: 4px 0;
  width: 16px; background: none;
}
.mc-tick::before { content: ""; display: block; height: 2px; background: var(--hairline); transition: background-color 300ms var(--ease); }
.mc-tick:hover::before { background: var(--grey); }
.mc-tick[aria-current="true"]::before { background: var(--accent); }
/* mono plate caption, like the portrait's museum labeling */
.mc-plate {
  margin-top: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
}
@media (max-width: 880px) {
  .pq-grid { grid-template-columns: 1fr; gap: 34px; }
  .pq-showcase { max-width: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mc-slide { transition: none; }
  .mc-veil { transition: none; }
}

/* ---------------- method list: numbered, datasheet style ---------------- */
.method-list { list-style: none; counter-reset: method; margin-top: 14px; max-width: var(--measure); }
.method-list li { counter-increment: method; padding: 12px 0 12px 44px; position: relative; border-top: 1px solid var(--hairline); }
.method-list li:last-child { border-bottom: 1px solid var(--hairline); }
.method-list li::before { content: "0" counter(method); position: absolute; left: 0; top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }

/* ---------------- landing hero: type-led, portrait as editorial byline ----------------
   The words carry the room. A modest circular portrait (hairline ring, museum
   restraint) anchors the kicker like a byline; his gaze faces the headline below. */
.folio-hero { padding-top: clamp(48px, 8vw, 112px); padding-bottom: clamp(48px, 7vw, 96px); }
.fh-byline { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(28px, 4vw, 44px); }
.fh-avatar {
  position: relative; flex: none; width: clamp(52px, 5.5vw, 72px); aspect-ratio: 1 / 1;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline);
  outline: 1px solid var(--hairline); outline-offset: 6px;
}
.fh-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.4); transform-origin: 48% 34%;
}
.folio-hero .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin-bottom: 0; }
.folio-hero h1 {
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
  font-size: clamp(34px, 8vw, 96px);
}
.folio-hero h1 .accent-dot { color: var(--red); }
.fh-fact { margin-top: 24px; font-size: clamp(14px, 1.6vw, 17px); color: var(--grey); max-width: 64ch; line-height: 1.5; }
.see-work {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 34px;
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--white); border: 1px solid var(--ink);
  padding: 16px 28px;
  transition: background-color 250ms var(--ease), color 250ms var(--ease);
}
.see-work .sw-arrow { color: var(--red); transition: transform 250ms var(--ease); }
.see-work:hover, .see-work:focus-visible { background: var(--ink); color: var(--white); }
.see-work:hover .sw-arrow, .see-work:focus-visible .sw-arrow { transform: translateX(6px); }
@media (max-width: 780px) {
  /* phone: same byline grammar, slightly tighter */
  .fh-byline { gap: 14px; margin-bottom: 22px; }
  .fh-avatar { width: 48px; }
  .fh-avatar::after { inset: -5px; }
  .fh-fact { max-width: 100%; }
  .see-work { margin-top: 26px; }
}

/* ---------------- experience strip: page-centered employer logo cluster ----------------
   The three ink-toned marks (vectorized from the official artwork, one visual
   weight, wordmark heights optically matched to the glyph) sit as ONE centered
   cluster with comfortable even gaps — group midpoint = page midpoint at every
   width. ONE shared caption line sits in reserved space BELOW the cluster,
   centered to the page; hover / tap / keyboard focus swaps in that employer's
   skill line (single caption at a time — CSS for hover/focus, site.js for
   tap). Reduced motion: instant swap, no lift. */
.xp { margin-top: clamp(56px, 8vw, 96px); }
.xp-plate {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 30px;
}
.xp-row {
  list-style: none; position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(40px, 6vw, 88px);
  padding-bottom: 68px; /* reserved shared caption line below the cluster — no reflow */
}
.xp-row li { position: static; display: flex; }
.xp-item {
  appearance: none; background: none; border: none; padding: 8px 2px;
  cursor: pointer; display: block; color: var(--ink);
}
.xp-item:focus-visible { outline: 1px solid var(--ink); outline-offset: 8px; }
.xp-mark {
  display: block; height: clamp(32px, 4vw, 50px); width: auto; color: var(--ink); opacity: 0.42;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.xp-mark.word { height: clamp(20px, 2.6vw, 32px); } /* optically equal to the glyph */
.xp-row li:hover .xp-mark,
.xp-row li.open .xp-mark,
.xp-item:focus-visible .xp-mark { opacity: 1; transform: translateY(-3px); }
.xp-skills {
  /* the shared caption: bottom of the row's reserved space, page-centered,
     spanning the full width under the bar of logos */
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono); font-size: 15.5px; line-height: 1.6; color: var(--grey);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s 300ms;
}
.xp-row li:hover .xp-skills,
.xp-row li.open .xp-skills,
.xp-item:focus-visible + .xp-skills {
  opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
}
@media (max-width: 640px) {
  /* phone: marks scale down but hold one centered row;
     the shared caption keeps its own line below, still page-centered */
  .xp-row { gap: 26px; padding-bottom: 84px; }
  .xp-mark { height: 26px; }
  .xp-mark.word { height: 16px; }
  .xp-skills { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-mark, .xp-skills { transition: none; }
  .xp-row li:hover .xp-mark, .xp-row li.open .xp-mark,
  .xp-item:focus-visible .xp-mark { transform: none; }
  .xp-skills { transform: none; }
}

/* ---------------- the glance: three stations on one horizontal line ---------------- */
.glance { margin: clamp(48px, 8vw, 104px) auto; }
.glance-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(22px, 3.5vw, 36px); }
.glance-head h2 { font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.01em; }
.glance-more { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--grey); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.glance-more:hover { color: var(--ink); border-color: var(--red); }
.glance-route { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3.5vw, 44px); border-top: 3px solid var(--red); }
.glance-route li { position: relative; padding-top: 24px; }
.glance-route li::before {
  content: ""; box-sizing: border-box; position: absolute; top: -9px; left: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--red);
}
.glance-route li.g-origin::after, .glance-route li.g-now::after {
  content: ""; position: absolute; top: -4px; left: 5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}
.glance-route .g-year { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--grey); }
.glance-route h3 { font-weight: 700; font-size: clamp(16px, 2vw, 20px); letter-spacing: -0.01em; margin-top: 6px; line-height: 1.2; }
.glance-route p { font-size: 14px; color: var(--grey); margin-top: 6px; line-height: 1.5; max-width: 30ch; }
@media (max-width: 640px) {
  .glance-route { grid-template-columns: 1fr; gap: 0; border-top: none; border-left: 3px solid var(--red); }
  .glance-route li { padding: 0 0 26px 24px; }
  .glance-route li:last-child { padding-bottom: 4px; }
  .glance-route li::before { top: 2px; left: -12px; }
  .glance-route li.g-origin::after, .glance-route li.g-now::after { top: 7px; left: -7px; }
}

/* ---------------- projects index: the spine as wayfinding ---------------- */
.index-route { margin-bottom: clamp(24px, 4vw, 48px); }
.index-route .ix-ref { color: var(--red); font-weight: 500; letter-spacing: 0.1em; font-size: 11px; }
.index-route .ix-link { display: block; max-width: 56ch; }
.index-route .ix-link h3 { font-weight: 700; font-size: clamp(20px, 2.8vw, 28px); letter-spacing: -0.01em; line-height: 1.15; }
.index-route .ix-go { color: var(--row-accent, var(--red)); display: inline-block; transition: transform 250ms var(--ease); }
.index-route .ix-link:hover h3, .index-route .ix-link:focus-visible h3 {
  text-decoration: underline; text-decoration-color: var(--row-accent, var(--red));
  text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.index-route .ix-link:hover .ix-go, .index-route .ix-link:focus-visible .ix-go { transform: translateX(5px); }
.index-route .ix-kpi { font-family: var(--mono); font-size: 12px; color: var(--ink); letter-spacing: 0.02em; margin-top: 7px; }
.index-route .stop-note { margin-top: 8px; }
.index-route .terminus-note a { border-bottom: 1px solid var(--red); padding-bottom: 1px; }
.index-route .terminus-note a:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }

/* ---------------- cross-document view transitions ----------------
   Museum restraint: a short cross-fade between pages; the nav bar stays put.
   Browsers without support simply navigate — no JS, no fallback code needed. */
@view-transition { navigation: auto; }
.wayfinding { view-transition-name: wayfinding; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.25, 0.6, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------------- motion: museum restraint ----------------
   Reveal styles are gated on html.js so nothing is hidden without JS. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); will-change: opacity, transform; }
.js .reveal.in { opacity: 1; transform: none; }
.parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .parallax { transform: none !important; }
  .cat-go, .catalog-list a, .see-work, .sw-arrow, .ix-go { transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* print: it is, after all, an exhibition catalogue */
@media print {
  .wayfinding, .room-next { display: none; }
  body { font-size: 11pt; }
}