/* ─────────────────────────────────────────────────────────────
   Hunter House — Inverted reading layout (A2)
   Light Browse header above an ink page body.
   Pairs with light.css; loaded only on non-Browse pages.
   ─────────────────────────────────────────────────────────── */

:root{
  --inv-bg:#1e1c1a;
  --inv-fg:#f3f1ec;
  --inv-muted:rgba(243,241,236,0.55);
  --inv-soft:rgba(243,241,236,0.85);
  --inv-rule:rgba(243,241,236,0.18);
  --inv-rule-strong:rgba(243,241,236,0.4);
  --amber:#e4a47e;
  --plate:#f0e9d8;
}

/* opt into cross-document view transitions; the splash → reading page
   morph anchors the markid (shared view-transition-name 'hh-mark') */
@view-transition{navigation:auto}
.markid{view-transition-name:hh-mark}
::view-transition-old(root),
::view-transition-new(root){animation-duration:700ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-group(hh-mark){animation-duration:900ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}

html,body{overflow-x:hidden}
body{
  display:flex;flex-direction:column;min-height:100vh;
  background:var(--inv-bg);
}

/* Browse header retains its light styling; light.css gives us .site-top,
   .markid, .site-nav, .site-topright — no overrides needed. */

/* ── ink page body ──────────────────────────────────────────── */
.page-body{
  background:var(--inv-bg);color:var(--inv-fg);
  padding:96px 96px 200px;flex:1;
}

/* ── title block ────────────────────────────────────────────── */
.titleblock{margin-bottom:120px}
.titleblock h1{
  font-size:240px;font-weight:200;letter-spacing:-0.05em;line-height:0.9;
  color:var(--inv-fg);margin-bottom:32px;
}
.titleblock .deck{
  font-size:24px;line-height:1.4;font-weight:300;letter-spacing:-0.015em;
  color:var(--inv-soft);max-width:780px;
}
.titleblock .deck b{color:var(--inv-fg);font-weight:400}
.titleblock .deck a{color:var(--inv-fg);text-decoration:underline;text-decoration-color:var(--inv-rule-strong);text-underline-offset:3px}

/* ── section: 160px mono label + 720px content ──────────────── */
.sec{
  display:grid;grid-template-columns:160px minmax(0,720px);gap:64px;
  margin-bottom:72px;align-items:start;
}
.sec > .label{
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--inv-muted);padding-top:7px;font-weight:500;white-space:nowrap;
}
.sec > .label.first{color:var(--amber)}
.sec > .c{min-width:0}

.sec .c .lede{
  font-size:22px;line-height:1.45;color:var(--inv-fg);font-weight:300;letter-spacing:-0.012em;
}
.sec .c p{
  font-size:16.5px;line-height:1.7;color:var(--inv-soft);
  margin-bottom:20px;letter-spacing:-0.005em;
}
.sec .c p:last-child{margin-bottom:0}
.sec .c em{font-style:italic;color:var(--inv-fg)}
.sec .c a{
  color:var(--inv-fg);text-decoration:underline;
  text-decoration-color:var(--inv-rule-strong);text-underline-offset:3px;
}
.sec .c a:hover{text-decoration-color:var(--inv-fg)}
.sec .c code{font-family:var(--mono);font-size:14px;color:var(--inv-fg);letter-spacing:0.02em}

/* ── inline plate ───────────────────────────────────────────── */
.plate{margin:36px 0}
.plate .frame-ph{
  background-color:var(--plate);
  background-image:repeating-linear-gradient(135deg, rgba(118,114,106,0) 0 9px, rgba(118,114,106,0.10) 9px 10px);
  border:1px solid var(--inv-rule);
  aspect-ratio:5/3;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:10px;padding:24px;
  box-shadow:0 12px 32px -16px rgba(0,0,0,0.65);
}
.plate .frame-ph::before{
  content:"";position:absolute;inset:10px;border:1px dashed rgba(30,28,26,0.22);pointer-events:none;
}
.plate .frame-ph.tall{aspect-ratio:3/4;max-width:480px;margin-left:0}
.plate .frame-ph.wide{aspect-ratio:7/3}
.plate .frame-ph.portrait{aspect-ratio:4/5}
.plate .frame-ph .kind{
  font-family:var(--mono);font-size:10px;color:var(--ink);
  letter-spacing:0.22em;text-transform:uppercase;font-weight:500;
  background:var(--bg);padding:4px 10px;border:1px solid var(--ink);position:relative;z-index:1;
}
.plate .frame-ph .descr{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  letter-spacing:0.04em;line-height:1.6;position:relative;z-index:1;max-width:380px;
}
.plate .frame-ph .descr b{color:var(--ink);font-weight:500}
.plate img{
  width:100%;height:auto;display:block;
  border:1px solid var(--inv-rule);
  box-shadow:0 12px 32px -16px rgba(0,0,0,0.65);
}
.plate .pcap{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;
  padding-top:12px;
  font-family:var(--mono);font-size:10.5px;color:var(--inv-muted);letter-spacing:0.04em;
}
.plate .pcap .id{color:var(--amber);font-weight:500}
.plate .pcap .ti{
  font-family:var(--sans);font-size:13px;color:var(--inv-fg);letter-spacing:-0.005em;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.plate .pcap .ti em{font-style:italic;color:var(--inv-muted)}
.plate .pcap .yr{text-align:right;font-variant-numeric:tabular-nums}

/* ── data rows (collections, arcs, etc.) ────────────────────── */
.rows{margin:8px 0 0}
.rows .row{
  display:grid;grid-template-columns:1fr auto;gap:20px;
  padding:18px 0;border-top:1px solid var(--inv-rule);align-items:baseline;
}
.rows .row:first-child{border-top:1px solid var(--inv-rule-strong)}
.rows .row:last-child{border-bottom:1px solid var(--inv-rule-strong)}
.rows .ti{font-size:16.5px;font-weight:500;color:var(--inv-fg);letter-spacing:-0.005em}
.rows .ti .code{font-family:var(--mono);font-size:11.5px;color:var(--amber);letter-spacing:0.06em;margin-right:14px;font-weight:500}
.rows .d{font-size:14px;line-height:1.55;color:var(--inv-muted);margin-top:4px;max-width:640px}
.rows .meta{font-family:var(--mono);font-size:11px;color:var(--inv-muted);letter-spacing:0.04em;text-align:right;white-space:nowrap;padding-top:2px}
.rows .meta b{color:var(--inv-fg);font-weight:500;display:block}

/* ── vocabulary groups ──────────────────────────────────────── */
.vocab{margin:8px 0 0}
.vocab .vg{
  display:grid;grid-template-columns:140px 1fr;gap:24px;
  padding:14px 0;border-top:1px solid var(--inv-rule);align-items:baseline;
}
.vocab .vg:first-child{border-top:1px solid var(--inv-rule-strong)}
.vocab .vg:last-child{border-bottom:1px solid var(--inv-rule-strong)}
.vocab .lbl{
  font-family:var(--mono);font-size:10.5px;color:var(--inv-muted);
  letter-spacing:0.16em;text-transform:uppercase;
}
.vocab .terms{font-size:14.5px;line-height:1.75;color:var(--inv-fg);letter-spacing:-0.005em}
.vocab .terms .t::after{content:" · ";color:rgba(243,241,236,0.32);margin:0 6px}
.vocab .terms .t:last-child::after{display:none}

/* ── pullquote ──────────────────────────────────────────────── */
.pq{
  margin:48px 0;padding:6px 0 6px 24px;border-left:2px solid var(--amber);
  font-size:22px;line-height:1.5;color:var(--inv-fg);font-weight:300;letter-spacing:-0.012em;
  max-width:640px;
}
.pq .attr{
  display:block;margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--inv-muted);
  letter-spacing:0.08em;text-transform:uppercase;font-weight:400;
}

/* ── timeline / chron list (for Hunter) ─────────────────────── */
.chron{margin:8px 0 0;border-top:1px solid var(--inv-rule-strong)}
.chron .crow{
  display:grid;grid-template-columns:120px 1fr;gap:24px;
  padding:12px 0;border-bottom:1px solid var(--inv-rule);align-items:baseline;
}
.chron .crow:last-child{border-bottom:1px solid var(--inv-rule-strong)}
.chron .yr{font-family:var(--mono);font-size:11.5px;color:var(--amber);letter-spacing:0.04em;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.chron .yr.gap{color:var(--inv-muted);font-style:italic;letter-spacing:0.02em}
.chron .ev{font-size:14.5px;line-height:1.55;color:var(--inv-fg);letter-spacing:-0.005em}
.chron .ev em{color:var(--inv-muted);font-style:italic}

/* ── people list (for About) ────────────────────────────────── */
.people{margin:8px 0 0;border-top:1px solid var(--inv-rule-strong)}
.people .p{
  display:grid;grid-template-columns:180px 1fr;gap:24px;
  padding:14px 0;border-bottom:1px solid var(--inv-rule);align-items:baseline;
}
.people .p:last-child{border-bottom:1px solid var(--inv-rule-strong)}
.people .role{
  font-family:var(--mono);font-size:10px;color:var(--inv-muted);
  letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
}
.people .name{font-size:15px;font-weight:500;color:var(--inv-fg);letter-spacing:-0.005em;margin-bottom:4px}
.people .bio{font-size:13.5px;line-height:1.55;color:var(--inv-muted);max-width:560px}

/* ── mandate (for About) ────────────────────────────────────── */
.mandate{margin:8px 0 0;border-top:1px solid var(--inv-rule-strong)}
.mandate .m{
  display:grid;grid-template-columns:140px 1fr;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--inv-rule);align-items:baseline;
}
.mandate .m:last-child{border-bottom:1px solid var(--inv-rule-strong)}
.mandate .num{
  font-family:var(--mono);font-size:10.5px;color:var(--amber);
  letter-spacing:0.14em;font-weight:500;
}
.mandate .mt{font-size:16px;font-weight:500;color:var(--inv-fg);letter-spacing:-0.005em;margin-bottom:4px}
.mandate .md{font-size:14px;line-height:1.55;color:var(--inv-muted);max-width:560px}

/* ── placeholder block (for Hunter sections in progress) ────── */
.placeholder{
  background:rgba(243,241,236,0.04);border:1px dashed var(--inv-rule);padding:18px 22px;
  margin:18px 0;font-family:var(--mono);font-size:12.5px;color:var(--inv-muted);
  letter-spacing:0.02em;line-height:1.7;
}
.placeholder .lbl{
  display:inline-block;font-size:9.5px;color:var(--amber);letter-spacing:0.18em;
  text-transform:uppercase;font-weight:500;margin-right:8px;
}
.placeholder em{font-style:italic;color:var(--inv-fg)}

/* ── next link ──────────────────────────────────────────────── */
.next-link{
  margin-top:120px;display:grid;grid-template-columns:160px minmax(0,720px);gap:64px;align-items:baseline;
}
.next-link .l{
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--inv-muted);font-weight:500;
}
.next-link a{
  font-size:18px;color:var(--inv-fg);text-decoration:none;letter-spacing:-0.008em;
  border-bottom:1px solid var(--inv-rule-strong);padding-bottom:4px;
}
.next-link a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.next-link a .ar{color:var(--amber);margin-left:10px}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .page-body{padding:64px 48px 120px}
  .titleblock h1{font-size:140px}
  .titleblock{margin-bottom:80px}
  .sec{grid-template-columns:120px minmax(0,1fr);gap:40px}
  .next-link{grid-template-columns:120px 1fr;gap:40px}
}
@media (max-width:760px){
  .page-body{padding:48px 22px 96px}
  .titleblock h1{font-size:84px}
  .titleblock .deck{font-size:18px}
  .sec{grid-template-columns:1fr;gap:14px}
  .sec > .label{padding-top:0}
  .rows .row{grid-template-columns:1fr;gap:4px}
  .rows .meta{text-align:left;padding-top:2px}
  .vocab .vg{grid-template-columns:1fr;gap:6px}
  .chron .crow{grid-template-columns:1fr;gap:4px}
  .people .p,.mandate .m{grid-template-columns:1fr;gap:4px}
  .next-link{grid-template-columns:1fr;gap:12px}
}