/* constance.earth
   ---------------------------------------------------------------------------
   Reference register: Bunny Rogers (meryn.us), Olivia Erlanger, LD Deutsch.
   Text placed in space, not poured into boxes. Enormous emptiness. One accent
   per section. Nothing decorative.

   HARD RULES — do not break these when adding anything:
     · no border-radius, anywhere, ever
     · no box-shadow, no gradients, no bevels
     · hairlines are 1px and structural, never ornamental
     · no more than two type families on a page
     · if an element can be removed, remove it
   ---------------------------------------------------------------------------*/

:root {
  --paper:   #ede7da;   /* albescent white */
  --ink:     #16120d;
  --hair:    #c7bda9;
  --quiet:   #857a66;

  --oxblood: #a63a1e;   /* red damask */
  --claret:  #8c0c46;   /* rose bud cherry */
  --sage:    #cfdcc4;   /* pixie green */
  --rajah:   #f0a64b;
  --seance:  #5e2a84;

  --accent:  var(--oxblood);

  /* THE NAME, AND NOTHING ELSE. Workbench (Google Fonts, OFL) — a dot-matrix
     variable face in the register of BD Terminal. Self-hosted from
     assets/fonts/, so the site makes zero external requests and needs no Adobe
     subscription. Used on exactly two things: the wordmark in the header and
     the big name on the home page. Nowhere else. */
  --script: Workbench, ui-monospace, "Courier New", monospace;

  /* EVERYTHING ELSE. Mono is the ground state: nav, meta, captions, labels,
     body copy, the lot. The odd one is a Didone — high-contrast and engraved,
     completely wrong next to a terminal font, which is exactly why it works. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --odd:  Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif;
}

@font-face {
  font-family: Workbench;
  src: url("/assets/fonts/workbench-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: block; /* not swap — the name must not flash in a fallback */
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.6 var(--mono);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* Each section takes one colour. It is the only thing that changes. */
body.cat-artwork { --accent: var(--oxblood); }
body.cat-writing { --accent: var(--claret); }
body.cat-play    { --accent: var(--seance); }
body.cat-photos  { --accent: #2f5d50; }
body.cat-project { --accent: var(--rajah); }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.page { max-width: 1180px; margin: 0 auto; padding: 26px 30px 140px; position: relative; }

/* ------------------------------------------------------------------ header */

.hd { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; margin-bottom: 8px; }

.who {
  font: 400 19px/1.2 var(--script);
  font-variation-settings: "BLED" 12, "SCAN" -50;
  letter-spacing: .02em;
  border: 0;
  display: block;
}
.who:hover { color: var(--accent); }

.nav { font: 12px/1.6 var(--mono); letter-spacing: .06em; }
.nav a { border: 0; margin-left: 2px; }
.nav a::after { content: ","; color: var(--quiet); }
.nav a:last-child::after { content: ""; }
.nav a[aria-current="page"] { color: var(--accent); font-style: italic; }

/* ------------------------------------------------------- the placed field */

/* scatter.js positions these absolutely. It is the only layout system here. */
.stage { position: relative; margin-top: 30px; }
.blk .ln { display: block; }
.blk a { border: 0; }
.blk .ln::selection { background: var(--accent); color: var(--paper); }

/* The homepage is a loose pile, not a fixed layout. Links still activate on a
   click; a pointer move turns the block into a draggable object. */
.drag-field .blk { cursor: grab; touch-action: none; }
.drag-field .blk.is-dragging { cursor: grabbing; user-select: none; }

.t-meta { color: var(--quiet); }
/* No text-transform and no letter-spacing here: pretext measured the exact
   string at the exact tracking, and CSS that changes either makes the measured
   width a lie — the block overflows its packed box. Both are applied in JS
   before measuring instead. */

/* Bunny Rogers' hatching: hand-drawn diagonals, drawn once, sitting under
   everything. Generated in JS so the wobble is seeded per page. */
.hatch { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hatch svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------- listings */

.index { margin-top: 70px; }
.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 40px;
  padding: 0 0 190px;
}
.row .ttl { font: 400 21px/1.2 var(--odd); }
.row .ttl sup { font: 10px var(--mono); margin-left: 5px; vertical-align: super; color: var(--quiet); }
.row .sub { font: 11px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--quiet); margin-top: 6px; }
.row a { border: 0; display: block; }
.row a:hover .ttl { color: var(--accent); }

/* ----------------------------------------------------------------- project */

.proj { margin-top: 44px; }
.proj h1 {
  font: 400 clamp(32px, 5.6vw, 66px)/1.02 var(--odd);
  letter-spacing: -.01em;
  margin: 0 0 6px; max-width: 15ch;
}
.proj .yr { font: 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--quiet); margin-bottom: 46px; }
.proj .intro { font: 20px/1.55 var(--odd); max-width: 32em; margin: 0 0 10px; }
.proj .aside { font: 12px/1.7 var(--mono); letter-spacing: .04em; color: var(--accent); max-width: 34em; margin: 30px 0 0; }

.plates { margin: 96px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 40px; }
.plate { margin: 0; }
.plate button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.plate button:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.plate svg, .plate img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); }
.plate figcaption { font: 11px/1.5 var(--mono); letter-spacing: .03em; color: var(--quiet); margin-top: 10px; }
.plate:nth-child(3n+2) { margin-top: 64px; }
.plate:nth-child(3n)   { margin-top: 26px; }

.text { max-width: 33em; margin: 110px 0 0; }
.text p { font: 14px/1.85 var(--mono); margin: 0 0 32px; white-space: pre-line; }
.text p:first-letter { }

/* -------------------------------------------------------------- lightbox */

#viewer[hidden] { display: none; }
#viewer {
  position: fixed; inset: 0; z-index: 50;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 26px 30px;
}
#viewer .vtop { display: flex; justify-content: space-between; align-items: baseline; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
#viewer .vtop button { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 4px; }
#viewer .vtop button:hover { color: var(--accent); }
#viewer .vmid { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 24px 0; }
#viewer .vmid svg, #viewer .vmid img { max-width: min(100%, 900px); max-height: 100%; height: auto; border: 1px solid var(--hair); }
#viewer .vcap { font: 12px/1.6 var(--mono); letter-spacing: .03em; text-align: center; color: var(--ink); }

/* ---------------------------------------------------------------- outward */

.out { margin-top: 150px; padding-top: 18px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.out .lead { font: 17px/1.55 var(--odd); max-width: 32em; }
.out .lead a { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--accent); color: var(--accent); }
.out .lead a:hover { background: var(--accent); color: var(--paper); }
.out .sig { font: 11px var(--mono); letter-spacing: .05em; color: var(--quiet); }

/* ------------------------------------------------------------------ phone */

@media (max-width: 760px) {
  .page { padding: 20px 18px 90px; }
  .hd { flex-direction: column; gap: 10px; }
  .row { grid-template-columns: 1fr; padding-bottom: 70px; gap: 34px; }
  .plates { grid-template-columns: 1fr; gap: 46px; }
  .plate:nth-child(n) { margin-top: 0; }
  .proj h1 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }