/* ══════════════════════════════════════════════════════════════════
   the index under the station — everything mnemos, written flat

   The station is the front door. This is its flat twin, for a visitor
   who would rather scroll, whose machine will not run the room, or who
   arrived on a phone. It is the same building, in the same language.

   The language is the world page's ground (landing.css, WP-42/44) —
   the field, the scale, the ink, the flat control and the frame rows
   are copied here rather than imported, because this page must stand
   without the world page's bundle: no sky canvas, no engine, no
   JavaScript at all. Every value is a token; nothing raw lives in a
   rule. Where a name below matches landing.css it means the same thing.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* the faces — the pixel for titles, the serif for what is said,
     the mono for every datum. The room already declares the first two. */
  --ix-serif:'Newsreader',Georgia,serif;

  /* the field — 12 columns, 1120 wide, 24 gutters, a steady left edge */
  --g-cols:12; --g-max:1120px; --g-gutter:24px;
  --g-pad-x:32px; --g-pad-x-s:20px;
  --g-pad-t:48px; --g-pad-b:120px; --g-pad-t-s:32px; --g-pad-b-s:72px;

  /* the rhythm — 8pt */
  --g-half:4px; --g-1:8px; --g-2:16px; --g-3:24px; --g-4:32px;
  --g-5:40px; --g-6:48px; --g-8:64px; --g-10:80px; --g-12:96px;
  --g-hair:1px; --g-hair2:2px; --g-radius:2px; --g-press:1px;
  --g-tap:44px; --g-tap-lg:52px;

  /* the scale — few sizes, decisive gaps */
  --g-px-mark:28px; --g-px-mark-s:17px;
  --g-px-title:24px; --g-px-title-s:15px;
  --g-px-place:12px; --g-px-place-s:11px;
  --g-serif-stmt:26px; --g-serif-stmt-s:20px;
  --g-serif-body:16px; --g-serif-body-s:15px;
  --g-mono-xl:14px; --g-mono-lg:12px; --g-mono:11px; --g-mono-xs:9.5px;

  /* the counterforms */
  --g-track-mark:.14em;
  --g-track-title:.06em; --g-track-label:.16em; --g-track-mono:.05em;
  --g-track-place:.14em;
  --g-lh-title:1.45; --g-lh-place:1.6; --g-lh-stmt:1.28;
  --g-lh-body:1.55; --g-lh-mono:1.7;
  --g-measure:60ch; --g-measure-stmt:30ch; --g-measure-quote:34ch;

  /* the ink — one cool cream in three tiers, on the world's own night */
  --g-ink-full:#fffdf8;
  --g-ink-92:rgba(245,243,237,.92);
  --g-ink-64:rgba(245,243,237,.64);
  --g-ink-52:rgba(245,243,237,.52);
  --g-rule:rgba(242,236,223,.10);
  --g-rule-lit:rgba(242,236,223,.18);
  --g-rule-lit2:rgba(242,236,223,.30);
  --g-focus:rgba(245,243,237,.50);
  --g-signal:var(--amber-deep); --g-signal-lit:var(--amber);
  --g-signal-hair:rgba(217,147,52,.6);
  --g-well:#0a0812;
  --g-floor:#07070f;

  /* the flat object — a subtle fill, one hairline, a lit top edge */
  --g-fill:rgba(242,236,223,.045);
  --g-fill-hover:rgba(242,236,223,.085);
  --g-fill-press:rgba(242,236,223,.03);
  --g-lit:rgba(255,253,248,.09);
  --g-shade:rgba(4,3,8,.45);

  /* the pieces */
  --g-dot:4px;
  --g-frame-ratio:16/9; --g-frame-lift:1.1; --g-cap-lift:4px;
  --ix-fit-pad:var(--g-2); --ix-fit-pad-s:var(--g-1);
  --ix-ledger-n:15rem;

  /* the motion — a hover, and nothing else below the horizon */
  --g-hover:150ms; --g-ease:cubic-bezier(0.23,1,0.32,1);
}

/* ── the lid ──
   The room is a full-viewport lid over the top of the document, and the
   index is always underneath it. Past the lid the room steps back. */
.lid{height:100vh}
body.reading #stage{opacity:0;pointer-events:none}
#stage{transition:opacity .45s var(--ease-out)}
/* while somebody is at the desk, or the world has the whole window, the
   page below holds still: the room's modes and the scroll never fight */
body.seated,body.flat{overflow:hidden}
/* no room tonight: the page is the whole front door */
body.flat-page #stage{display:none}
body.flat-page .lid{height:0}

/* ══════════════════════════════════════════════════════════════════
   THE INDEX — the ground, in the world page's own idiom.

   Twelve columns, 1120 wide, 24-pixel gutters, and a STEADY LEFT EDGE:
   every section and every row opens on column 1, nothing is centred,
   and the void accumulates on the right where it is earned. Hierarchy
   is size and opacity. Nothing is bold. Amber is the one signal — the
   dot on a control, the rule under a link, the marker beside a
   frame's caption. Focus is the element's own border brightening in
   place, never a second ring. Hairlines, never boxes.
   ══════════════════════════════════════════════════════════════════ */
.ix{position:relative;z-index:3;
  background:var(--g-floor);
  border-top:var(--g-hair) solid var(--g-rule);
  font-family:var(--mono);color:var(--g-ink-64);
  padding-bottom:var(--g-12)}
.ix__in{max-width:var(--g-max);margin:0 auto;padding:0 var(--g-pad-x)}

/* every link on this page is a `.btn`, a `.ln` or the way back up, and each
   of those states its own ink — nothing here inherits the browser's blue */

/* ── the masthead: the name, what the place is, and one datum ────── */
.ix__mast{padding-top:var(--g-10);padding-bottom:var(--g-8)}
.ix__mark{display:block;font-family:var(--px);font-weight:400;
  font-size:var(--g-px-mark);line-height:var(--g-lh-title);
  letter-spacing:var(--g-track-mark);color:var(--g-ink-92)}
.ix__say{margin-top:var(--g-5);font-family:var(--ix-serif);font-weight:300;
  font-style:italic;font-size:var(--g-serif-stmt);line-height:var(--g-lh-stmt);
  color:var(--g-ink-92);max-width:var(--g-measure-stmt);text-wrap:pretty}
.ix__fact{margin-top:var(--g-4);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}

/* ── the section: a hairline, the title close under it, then air ─── */
.sec{border-top:var(--g-hair) solid var(--g-rule);
  padding-top:var(--g-pad-t);padding-bottom:var(--g-pad-b)}
.sec--last{padding-bottom:var(--g-12)}
.sec__in{display:grid;grid-template-columns:repeat(var(--g-cols),minmax(0,1fr));
  column-gap:var(--g-gutter);row-gap:var(--g-5);align-content:start}
.sec__h{grid-column:1 / -1;display:block;font-weight:400}
.sec__no{display:block;margin-bottom:var(--g-2);font-family:var(--mono);
  font-size:var(--g-mono);line-height:var(--g-lh-mono);
  letter-spacing:var(--g-track-label);color:var(--g-ink-52)}
.sec__t{font-family:var(--px);font-weight:400;font-size:var(--g-px-title);
  line-height:var(--g-lh-title);letter-spacing:var(--g-track-title);color:var(--g-ink-92)}
.sec__in>.stmt{grid-column:1 / span 6}
.sec__in>.stmt--wide{grid-column:1 / span 7}
.quote{grid-column:1 / span 7;margin:0}
.act{grid-column:1 / span 5}
.ledger{grid-column:1 / span 9}
.honest{grid-column:1 / -1}

.stmt{font-family:var(--ix-serif);font-weight:300;font-style:italic;
  font-size:var(--g-serif-stmt);line-height:var(--g-lh-stmt);color:var(--g-ink-92);
  max-width:var(--g-measure-stmt);text-wrap:pretty}
.stmt--wide{max-width:none}
.fact{margin-top:var(--g-4);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}
.honest{margin-top:var(--g-12);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}

/* ── the one inline signal: a word with an amber rule under it ───── */
.ln{font-family:var(--mono);font-size:var(--g-mono);letter-spacing:var(--g-track-mono);
  color:var(--g-ink-64);text-decoration:none;
  border-bottom:var(--g-hair) solid var(--g-signal-hair);padding-bottom:var(--g-half);
  transition:color var(--g-hover) var(--g-ease),border-color var(--g-hover) var(--g-ease)}
.ln:hover{color:var(--g-ink-92);border-bottom-color:var(--g-signal-lit)}
.ln:focus-visible{outline:none;color:var(--g-ink-92);border-bottom-color:var(--g-focus)}
.ln:active{color:var(--g-ink-52)}

/* ── the control: a flat object in the house's own language. A subtle
      fill, one hairline, a lit top edge, a whisper of shade — and five
      states, the last of them the focus the element already carries. */
.btn{display:inline-flex;align-items:center;gap:var(--g-1);
  min-height:var(--g-tap);padding-left:var(--g-2);padding-right:var(--g-2);
  font-family:var(--mono);font-size:var(--g-mono-lg);letter-spacing:var(--g-track-mono);
  color:var(--g-ink-92);text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--g-fill);border:var(--g-hair) solid var(--g-rule-lit);
  border-radius:var(--g-radius);
  box-shadow:inset 0 var(--g-hair) 0 var(--g-lit),0 var(--g-hair) var(--g-hair2) var(--g-shade);
  transition:background var(--g-hover) var(--g-ease),border-color var(--g-hover) var(--g-ease),
    color var(--g-hover) var(--g-ease),transform var(--g-hover) var(--g-ease)}
.btn__dot{width:var(--g-dot);height:var(--g-dot);flex:none;background:var(--g-signal);
  transition:background var(--g-hover) var(--g-ease)}
.btn:hover{background:var(--g-fill-hover);border-color:var(--g-rule-lit2);color:var(--g-ink-full)}
.btn:hover .btn__dot{background:var(--g-signal-lit)}
.btn:focus-visible{outline:none;border-color:var(--g-focus);color:var(--g-ink-full);
  background:var(--g-fill-hover)}
.btn:focus-visible .btn__dot{background:var(--g-signal-lit)}
.btn:active{background:var(--g-fill-press);border-color:var(--g-rule-lit2);
  transform:translateY(var(--g-press));box-shadow:inset 0 var(--g-hair) var(--g-hair2) var(--g-shade)}
.btn[aria-disabled="true"]{color:var(--g-ink-52);border-color:var(--g-rule);background:none;
  box-shadow:none;cursor:default;pointer-events:none}
.btn[aria-disabled="true"] .btn__dot{background:var(--g-ink-52)}
.btn--lg{min-height:var(--g-tap-lg);padding-left:var(--g-3);padding-right:var(--g-3);
  font-size:var(--g-mono-xl)}

/* ── the rows — the frames carry the weight ───────────────────────
      One destination, one row: the frame on seven columns and the
      words on five. The sides alternate down the page — every second
      section carries `--flip` — so the eye keeps moving; column 1 is
      occupied in every row, so the left edge never wanders. */
.places{display:grid;row-gap:var(--g-12);margin-top:var(--g-10)}
.place{display:grid;grid-template-columns:repeat(var(--g-cols),minmax(0,1fr));
  column-gap:var(--g-gutter);row-gap:var(--g-4);align-items:start}
.place__f{grid-column:1 / span 7;grid-row:1;margin:0}
.place__t{grid-column:8 / -1;grid-row:1}
.place--flip .place__f{grid-column:6 / -1}
.place--flip .place__t{grid-column:1 / span 5}

.place__f .box{position:relative;display:block;overflow:hidden;
  aspect-ratio:var(--g-frame-ratio);background:var(--g-well);
  border:var(--g-hair) solid var(--g-rule-lit);border-radius:var(--g-radius);
  transition:border-color var(--g-hover) var(--g-ease)}
.place__f img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;
  transition:filter var(--g-hover) var(--g-ease)}
.place__f figcaption{display:flex;align-items:center;gap:var(--g-1);
  margin-top:var(--g-2);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52);
  transition:color var(--g-hover) var(--g-ease),transform var(--g-hover) var(--g-ease)}
.place__f figcaption::before{content:"";width:var(--g-dot);height:var(--g-dot);flex:none;
  background:var(--g-signal);transition:background var(--g-hover) var(--g-ease)}
.place:hover .box,.place:focus-within .box{border-color:var(--g-rule-lit2)}
.place:hover img,.place:focus-within img{filter:brightness(var(--g-frame-lift))}
.place:hover figcaption,.place:focus-within figcaption{color:var(--g-ink-92);
  transform:translateY(calc(var(--g-cap-lift) * -1))}
.place:hover figcaption::before,.place:focus-within figcaption::before{background:var(--g-signal-lit)}

.place__t h3{font-family:var(--px);font-weight:400;font-size:var(--g-px-place);
  line-height:var(--g-lh-place);letter-spacing:var(--g-track-place);color:var(--g-ink-92);
  margin-bottom:var(--g-3)}
.place__t p{font-family:var(--ix-serif);font-weight:300;font-size:var(--g-serif-body);
  line-height:var(--g-lh-body);color:var(--g-ink-64);max-width:var(--g-measure);
  margin-bottom:var(--g-4);text-wrap:pretty}
/* a datum under a row stays in the mono, whatever the row's prose is set in */
.place__t .fact{margin-top:0;margin-bottom:var(--g-4);
  font-family:var(--mono);font-size:var(--g-mono);line-height:var(--g-lh-mono);
  letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}
.place__t .after{margin-top:var(--g-3);margin-bottom:0}
/* a link at the end of a line goes whole or goes to the next line: an
   amber rule broken across a wrap reads as damage */
.fact .ln{white-space:nowrap}

/* not every frame is pixel art. A 3D render and a drawn page are both
   made of smooth edges, and nearest-neighbour scaling breaks them —
   mullions go stippled, a drawn line goes to stairs. Those frames are
   resampled instead. */
.place__f .box--smooth img,.place__f .box--fit img{image-rendering:auto}

/* a drawn page is not a view of a room: it is a picture with edges the
   maker chose. It hangs whole inside the frame, on the page's own
   ground, and nothing crops it — a letterbox is the honest treatment. */
.place__f .box--fit{display:flex;align-items:center;justify-content:center;
  padding:var(--ix-fit-pad)}
.place__f .box--fit img{width:auto;height:100%;max-width:100%;object-fit:contain}

/* ── the ledger — a name, a line, and where it goes (or does not) ── */
.ledger{display:grid;row-gap:0;margin-top:var(--g-6)}
.ledger__r{display:grid;grid-template-columns:var(--ix-ledger-n) minmax(0,1fr) auto;
  column-gap:var(--g-3);row-gap:var(--g-1);align-items:baseline;
  padding-top:var(--g-3);padding-bottom:var(--g-3);
  border-top:var(--g-hair) solid var(--g-rule)}
.ledger__r:last-child{border-bottom:var(--g-hair) solid var(--g-rule)}
.ledger__n{font-family:var(--mono);font-size:var(--g-mono-lg);
  letter-spacing:var(--g-track-label);color:var(--g-ink-92);text-transform:uppercase}
.ledger__d{font-family:var(--ix-serif);font-weight:300;font-size:var(--g-serif-body);
  line-height:var(--g-lh-body);color:var(--g-ink-64);text-wrap:pretty}
.ledger__x{font-family:var(--mono);font-size:var(--g-mono);
  letter-spacing:var(--g-track-mono);color:var(--g-ink-52);white-space:nowrap}

/* ── the charter's own line ───────────────────────────────────────── */
.quote blockquote{margin:0;font-family:var(--ix-serif);font-weight:300;font-style:italic;
  font-size:var(--g-serif-stmt);line-height:var(--g-lh-stmt);color:var(--g-ink-92);
  max-width:var(--g-measure-quote);text-wrap:pretty}
.quote figcaption{margin-top:var(--g-3);font-family:var(--mono);font-size:var(--g-mono);
  line-height:var(--g-lh-mono);letter-spacing:var(--g-track-mono);color:var(--g-ink-52)}

/* ── the foot: what the page is not, and the way back up ─────────── */
.ix__foot{border-top:var(--g-hair) solid var(--g-rule);padding-top:var(--g-6)}
.ix__foot .honest{margin-top:0}
.ix__up{display:inline-flex;align-items:center;min-height:var(--g-tap);
  margin-top:var(--g-3);font-family:var(--mono);font-size:var(--g-mono);
  letter-spacing:var(--g-track-mono);color:var(--g-ink-64);text-decoration:none;
  border-bottom:var(--g-hair) solid var(--g-rule-lit);
  transition:color var(--g-hover) var(--g-ease),border-color var(--g-hover) var(--g-ease)}
.ix__up:hover{color:var(--g-ink-92);border-bottom-color:var(--g-rule-lit2)}
.ix__up:focus-visible{outline:none;color:var(--g-ink-full);border-bottom-color:var(--g-focus)}
.ix__up:active{color:var(--g-ink-52)}
body.flat-page .ix__up{display:none}

/* ── the field narrows: the two blocks stack, the frames go first ── */
@media (max-width:980px){
  .quote,.act,.honest,.ledger,.sec__in>.stmt,.sec__in>.stmt--wide{grid-column:1 / -1}
  .place__f,.place__t,
  .place--flip .place__f,.place--flip .place__t{
    grid-column:1 / -1;grid-row:auto}
  .stmt{max-width:none}
}
@media (max-width:560px){
  .ix__in{padding-left:var(--g-pad-x-s);padding-right:var(--g-pad-x-s)}
  .ix__mast{padding-top:var(--g-8)}
  .ix__mark{font-size:var(--g-px-mark-s)}
  .sec{padding-top:var(--g-pad-t-s);padding-bottom:var(--g-pad-b-s)}
  .sec--last{padding-bottom:var(--g-10)}
  .sec__t{font-size:var(--g-px-title-s)}
  .sec__no{margin-bottom:var(--g-1)}
  .stmt,.ix__say,.quote blockquote{font-size:var(--g-serif-stmt-s)}
  .quote blockquote{max-width:none}
  .place__t p,.ledger__d{font-size:var(--g-serif-body-s)}
  .place__t h3{font-size:var(--g-px-place-s)}
  .places{row-gap:var(--g-10);margin-top:var(--g-8)}
  .honest{margin-top:var(--g-10)}
  .btn{white-space:normal}
  .place__f .box--fit{padding:var(--ix-fit-pad-s)}
  .ledger__r{grid-template-columns:minmax(0,1fr) auto}
  .ledger__d{grid-column:1 / -1}
}

/* below the horizon nothing moves but the light on a frame you point at */
@media (prefers-reduced-motion:reduce){
  .btn,.btn__dot,.ln,.ix__up,#stage,
  .place__f .box,.place__f img,.place__f figcaption,
  .place__f figcaption::before{transition:none}
  .place:hover figcaption,.place:focus-within figcaption{transform:none}
}