/* ============================================================
   RULE — a practice made entirely of type.

   One typeface. Two colours, and the second one is only ever the
   reader. Nothing on this site is an image: every mark is a character
   in a monospaced grid, including the rules, the boxes, the tone and
   the works themselves.

   The first version of this was too polite — 10px type floating in the
   top third of an empty page. Minimal is not the same as small. The
   grid now fills the viewport edge to edge and the works are set at
   the size they were drawn for.
   ============================================================ */
:root{
  --paper:#fff;
  --ink:#000;
  --seen:#9a9a9a;        /* walked, no longer lit */
  --unseen:#e9e9e9;      /* never walked — present as texture, not as detail */
  --reader:#E5261F;      /* the only other colour on the site, and it is you */
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,p,figure{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
::selection{ background:var(--ink); color:var(--paper) }
:focus-visible{ outline:2px solid var(--reader); outline-offset:2px }

/* ---------- chrome: one rule, nothing else ---------- */
.top{
  position:fixed; z-index:40; top:0; left:0; right:0;
  display:flex; gap:1.4rem; align-items:baseline; flex-wrap:wrap;
  padding:.7rem clamp(.9rem,2.4vw,1.8rem);
  background:var(--paper); border-bottom:1px solid var(--ink);
  font-size:.7rem; letter-spacing:.1em;
}
.top b{ font-weight:700; letter-spacing:.46em }
.top nav{ display:flex; gap:1.1rem; margin-left:auto }
.top a{ color:#666 } .top a:hover, .top a[aria-current]{ color:var(--ink) }

/* ============================================================
   THE MAZE — full bleed. It is the site, not a widget on it.
   ============================================================ */
.maze{
  position:fixed; inset:0; z-index:1;
  display:grid; place-items:center; overflow:hidden;
  padding-top:2.4rem;
}
#grid{
  font-family:var(--mono); white-space:pre; line-height:1;
  letter-spacing:0; user-select:none; -webkit-user-select:none;
  font-variant-ligatures:none;
}
/* the four states of a cell */
#grid .u{ color:var(--unseen) }                       /* never reached */
#grid .s{ color:var(--seen) }                         /* reached, now behind you */
#grid .l{ color:var(--ink) }                          /* lit right now */
#grid .w{ color:var(--ink); font-weight:700 }         /* wall, lit */
#grid .f{ color:var(--reader); font-weight:700 }      /* a work, found */
#grid .me{
  color:var(--paper); background:var(--reader); font-weight:700;
  animation:beat 1.25s steps(1) infinite;
}
@keyframes beat{ 50%{ background:var(--ink) } }

/* the title sits over the maze and burns off as you move */
.overture{
  position:fixed; inset:0; z-index:20; display:grid; place-items:center;
  background:var(--paper); text-align:center; padding:2rem;
  transition:opacity .9s ease, visibility .9s;
}
.overture[data-gone="true"]{ opacity:0; visibility:hidden; pointer-events:none }
.overture h1{
  font-size:clamp(3.2rem,17vw,15rem); line-height:.82; font-weight:700;
  letter-spacing:.06em; margin:0;
}
.overture p{ margin-top:1.6rem; font-size:.82rem; letter-spacing:.14em; color:#555; max-width:46ch }
.overture .keys{ margin-top:2.2rem; font-size:.8rem; letter-spacing:.2em; color:var(--ink) }
.overture .keys b{ display:inline-block; border:1px solid var(--ink); padding:.15rem .45rem; margin:0 .1rem; font-weight:400 }

/* the status rule, pinned to the floor */
.status{
  position:fixed; z-index:30; left:0; right:0; bottom:0;
  display:flex; gap:clamp(1rem,3vw,2.6rem); flex-wrap:wrap; align-items:baseline;
  padding:.55rem clamp(.9rem,2.4vw,1.8rem);
  background:var(--paper); border-top:1px solid var(--ink);
  font-size:.7rem; letter-spacing:.09em; color:#666;
}
.status b{ color:var(--ink); font-weight:400 }
.status .hit{ color:var(--reader) }

/* touch: four keys, drawn as type */
.dpad{ position:fixed; z-index:31; right:.7rem; bottom:2.6rem; display:none;
  grid-template-columns:repeat(3,2.4rem); grid-template-rows:repeat(2,2.4rem) }
.dpad button{ border:1px solid var(--ink); font-size:1rem; line-height:1; background:var(--paper) }
.dpad button:active{ background:var(--ink); color:var(--paper) }
@media (hover:none){ .dpad{ display:grid } }

/* ============================================================
   THE WORKS — set at the size they were drawn for
   ============================================================ */
.sheet{ max-width:none; padding:4rem clamp(.9rem,2.4vw,1.8rem) 6rem }
.work__hd{
  display:flex; gap:1.4rem; align-items:baseline; flex-wrap:wrap;
  border-bottom:1px solid var(--ink); padding-bottom:.5rem; margin-bottom:clamp(1.6rem,4vw,3rem);
}
.work__no{ font-size:clamp(2.4rem,8vw,6rem); line-height:.8; font-weight:700; letter-spacing:.02em }
.work__ttl{ font-size:clamp(1rem,2.4vw,1.7rem); font-weight:400; letter-spacing:.02em }
.work__spec{ margin-left:auto; font-size:.72rem; color:#666; letter-spacing:.08em; text-align:right }

/* the art fills the sheet. it was drawn on a 76-column grid, so it is
   set to whatever size makes 76 columns reach both edges. */
.art{
  white-space:pre; line-height:1.04; letter-spacing:0;
  font-variant-ligatures:none; overflow-x:auto; overflow-y:hidden;
  font-size:var(--art-size, 12px);
}
.art::-webkit-scrollbar{ height:3px } .art::-webkit-scrollbar-thumb{ background:var(--ink) }

.work__note{
  max-width:60ch; margin-top:clamp(1.6rem,4vw,2.8rem);
  font-size:.92rem; line-height:1.7; color:#333;
}
.work__nav{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:.6rem; border-top:1px solid var(--ink); font-size:.75rem;
}

/* ---------- the plan / catalogue ---------- */
.plan{ padding:4.5rem clamp(.9rem,2.4vw,1.8rem) 6rem }
.plan h2{ font-size:clamp(2.2rem,9vw,7rem); line-height:.84; font-weight:700; letter-spacing:.04em }
.plan .lede{ max-width:58ch; margin-top:1.4rem; font-size:.95rem; line-height:1.7; color:#333 }
.cat{ margin-top:clamp(2rem,5vw,3.5rem); border-top:1px solid var(--ink) }
.cat a{
  display:grid; grid-template-columns:4.5rem minmax(0,1fr) 12rem 5rem;
  gap:1rem; align-items:baseline; padding:.85rem 0;
  border-bottom:1px solid #ddd; font-size:.85rem;
  transition:padding-left .18s, background .18s;
}
.cat a:hover{ background:#f4f4f4; padding-left:.6rem }
.cat a b{ font-weight:700 } .cat a span{ color:#666; font-size:.75rem }
.cat a .t{ color:var(--ink); font-size:.95rem }
@media (max-width:760px){
  .cat a{ grid-template-columns:3.4rem minmax(0,1fr); }
  .cat a span:nth-child(3), .cat a span:nth-child(4){ display:none }
}
.prose{ max-width:62ch; font-size:.92rem; line-height:1.75; color:#333 }
.prose p + p{ margin-top:1.1em }
.prose b{ color:var(--ink) }

/* ---------- the maze page ---------- */
body.is-maze{ overflow:hidden }
/* The probe and the view must resolve to the SAME font. If they diverge by even
   a fraction of a pixel per character the column count is wrong and the frame
   either overflows the viewport or leaves a gutter. Declared explicitly on both
   rather than inherited through a custom property. */
#probe, #view{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace;
  font-size:13px; line-height:1; margin:0;
  white-space:pre; font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0;
  letter-spacing:0; font-weight:400;
}
#probe{ position:absolute; top:0; left:0; visibility:hidden; pointer-events:none }
#view{ color:var(--ink) }
@media (max-width:640px){ #view, #probe{ font-size:10px } }

/* the catalogue can hand you the spot in front of a work */
.walkto{
  display:inline-block; margin:.1rem 0 1rem; font-size:.7rem; letter-spacing:.1em;
  color:#666; border-bottom:1px solid #ccc;
}
.walkto:hover{ color:var(--reader); border-color:var(--reader) }