/* Mnemos · the Field — ATTRACT MODE.

   Tokens come from commons.css. No new colours. The whole palette of this page is --floor,
   the ink cascade, and the six logo colours.

   The bans are the design: NO scanlines, NO curved glass, NO vignette, NO colour fringing,
   NO blur, NO glow, NO shadow — there is deliberately not one `filter`, `backdrop-filter`,
   `box-shadow` or `text-shadow` declaration in this file. Since WP-14 there is no persistence
   layer either: the title's burn-in read as a rendering fault on the live site, so it and the
   charge buffer that carried it are gone. Everything on the scene is drawn fresh each frame.

   Motion on the marks is pixel-stepped (whole cells) and lives in landing.js and masthead.js.
   Type states step in one frame — there is no fade on the title, the sentence or the way down. */

/* --r-mod is a commons.css token; the fallback keeps this page standing alone. */

/* ---- page frame ---- */
body{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}
main{flex:1 0 auto;outline:none}
.lpage{max-width:1240px;margin:0 auto;padding:0 40px}

/* ---- masthead: a flat --floor band floating over the scene ---- */
.lmast{
  position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  height:64px;padding:0 max(40px,calc((100vw - 1240px)/2 + 40px));
  border-bottom:1px solid var(--line);background:var(--floor);
}
.lmast-brand{display:flex;align-items:center;gap:14px}
.lmast .marks{display:inline-flex;gap:7px}
.lmast .marks .creature{width:18px;height:16px;transition:none}
.lmast-brand{cursor:pointer}
.lmast .wordmark{font-family:var(--pixel);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.lmast-nav{display:flex;gap:28px}
.lmast-nav a{
  font-size:14px;color:var(--ink-3);display:inline-flex;align-items:center;min-height:44px;
  position:relative;transition:color var(--t-fast);
}
.lmast-nav a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 11px);height:1px;background:transparent;transition:background var(--t-fast)}
.lmast-nav a:hover{color:var(--ink)}
.lmast-nav a:focus-visible{color:var(--ink);text-decoration:none}
.lmast-nav a:focus-visible::after{background:var(--line-focus)}

/* ---- the scene is the viewport ---- */
.scene{position:relative;width:100%;height:100vh;overflow:hidden;background:var(--floor)}
@supports (height:100svh){ .scene{height:100svh} }
#scene{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
/* the whole scene is the replay target; the type above it lets clicks through */
.scene-hit{position:absolute;inset:0;z-index:1;cursor:pointer}

/* ---- type on the scene: the title, the sentence, the way down. Nothing else. ---- */
/* The type stands below the line, in the scene's left third: the myth fills the sky, the
   arrival happens on the line, and the name of the place is written on the dark ground under
   it. --scene-ground is written by landing/attract.js from the lattice itself, so the block
   sits against the real line at every size rather than a guessed percentage. */
.scene-type{
  position:absolute;z-index:2;pointer-events:none;
  left:max(40px,calc((100vw - 1240px)/2 + 40px));right:40px;
  top:calc(var(--scene-ground,62%) + 38px);
}
.ltitle{
  font-family:var(--pixel);font-weight:400;font-size:clamp(34px,4vw,64px);
  line-height:1.15;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink);margin:0;padding:0;
  /* invisible until the salute — until then there is no title on the screen at all */
  opacity:0;visibility:hidden;transition:none;
}
.lede{
  max-width:min(52ch,38vw);margin:24px 0 0;font-size:17px;line-height:1.6;
  color:var(--ink-2);opacity:0;visibility:hidden;transition:none;
}
/* one frame each, no fade */
body.is-home .ltitle{opacity:1;visibility:visible}
body.is-said .lede{opacity:1;visibility:visible}

/* ---- the way down ----
   WP-09 note 3. It used to read `or just watch · ↓`, which looked like an apology for the page.
   It now names the three places under the fold, so the scroll is an offer rather than a hint,
   and it does not blink: a steady line with one pixel arrow beneath it that steps down a whole
   cell and back on the cabinet beat. The step lives in landing.js — nothing here eases. */
.cue{
  position:absolute;z-index:3;left:50%;bottom:36px;transform:translateX(-50%);
  /* an absolutely-positioned box at left:50% otherwise shrink-wraps into the right HALF of the
     viewport, which wrapped the three names onto two ragged lines on a phone */
  width:max-content;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:10px 12px;border:0;background:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--ink-3);opacity:0;visibility:hidden;cursor:pointer;
  transition:color var(--t-fast);
}
.cue-words{line-height:1}
/* 7x9 cells at exactly 2 device-independent px each — the ninth row is the step's headroom — a doubled lattice, so the arrow
   reads as an arrow beside 11.5px type and every step is a whole, crisp cell */
.cue-arrow{width:14px;height:18px;fill:var(--ink-3);transition:fill var(--t-fast)}
/* one frame, no fade — the same step the title and the sentence take */
body.is-cued .cue{opacity:1;visibility:visible}
.cue:hover{color:var(--ink-2)}
.cue:hover .cue-arrow{fill:var(--ink-2)}
.cue:focus-visible{color:var(--ink);opacity:1;visibility:visible}
.cue:focus-visible .cue-words{text-decoration:underline;text-decoration-color:var(--line-focus);text-underline-offset:4px}
.cue:focus-visible .cue-arrow{fill:var(--ink)}

/* A short viewport has less ground under the line; the block closes up rather than running
   into the way down. */
@media (max-height:830px) and (min-width:701px){
  .scene-type{top:calc(var(--scene-ground,62%) + 16px)}
  .lede{margin-top:18px}
  .cue{bottom:16px}
}

/* ---- the doors, below the fold ---- */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:96px 0 0;scroll-margin-top:88px}
.door{
  position:relative;display:grid;grid-template-rows:auto auto 1fr auto;row-gap:16px;
  border:1px solid var(--line);border-radius:var(--r-mod,6px);padding:24px;min-height:232px;
  background:transparent;transition:border-color var(--t-fast),background var(--t-fast);
}

.dmark-slot{display:block;width:36px;height:32px}
.dmark{display:block;width:36px;height:32px;transition:none}

.door .dname{font-size:13px;letter-spacing:.09em;color:var(--ink);line-height:1;transition:color var(--t-fast)}
.door .dlines{display:flex;flex-direction:column;gap:4px;font-size:14.5px;line-height:1.5;color:var(--ink-3);transition:color var(--t-fast)}
.door .go{font-family:var(--mono);font-size:14px;color:var(--ink-4);text-align:right;line-height:1;transition:color var(--t-fast)}
.door .shut{display:none;text-align:right;color:var(--ink-4)}

/* five states */
.door:hover{border-color:var(--line-focus)}
.door:hover .go{color:var(--ink)}
.door:hover .dlines{color:var(--ink-2)}
.door:focus-visible{outline:none;border-color:var(--line-focus);text-decoration:none}
.door:focus-visible .go{color:var(--ink)}
.door:active{background:var(--raise);border-color:var(--line-focus)}
.door.is-closed{cursor:default}
.door.is-closed .dname{color:var(--ink-4)}
.door.is-closed .dlines{color:var(--ink-4)}
.door.is-closed .go{display:none}
.door.is-closed .shut{display:block}
.door.is-closed:hover{border-color:var(--line)}
.door.is-closed:hover .dlines{color:var(--ink-4)}
.door.is-closed .dmark{opacity:.45}

/* ---- footer ---- */
.lfoot{
  flex:0 0 auto;max-width:1240px;width:100%;margin:96px auto 0;
  padding:24px 40px 56px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
}

/* ---- responsive ---- */
@media (max-width:980px){
  .lpage{padding:0 24px}
  .lmast{padding:0 24px;gap:20px}
  .lfoot{padding:24px 24px 48px}
  .scene-type{left:24px;right:24px}
  .lede{max-width:min(52ch,60vw)}
  .doors{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:72px}
  .door{min-height:208px;padding:20px}
}
@media (max-width:700px){
  .doors{grid-template-columns:1fr;gap:12px}
  .door{min-height:0;grid-template-rows:auto auto auto auto;row-gap:12px}
  .lfoot{flex-direction:column;gap:8px;margin-top:64px}
  .lmast{gap:14px}
  .lmast-nav{gap:16px}
  .lmast-nav a{font-size:13px}
  .lmast .marks{gap:5px}
  .scene-type{left:20px;right:20px;top:calc(var(--scene-ground,62%) + 22px)}
  .lede{max-width:none}
  .lede{font-size:15.5px;margin-top:20px}
  .cue{bottom:24px;font-size:10.5px;letter-spacing:.1em;gap:8px}
}
/* Four links need about 460px beside the five marks. Below that, Polyphonic stays a door and
   is named in the way down; the bar keeps the three places on this site. */
@media (max-width:479px){
  .lmast-nav .nav-away{display:none}
}
@media (max-width:420px){
  .lmast .wordmark{display:none}
}

/* ---- reduced motion ----
   One frame. The colony is home on the line, the formation stands still above it, the words
   and the way down are already lit. No blink, no replay, no walk: the scene is shown as a
   record rather than a motion. */
@media (prefers-reduced-motion:reduce){
  .scene-hit{display:none}
  /* the way down is SHOWN, standing still — it is information, not motion */
  .cue{opacity:1;visibility:visible}
  .ltitle{opacity:1;visibility:visible}
  .lede{opacity:1;visibility:visible}
  .door,.dmark,.lmast .marks .creature{transition:none}
}