/* SIGNAL — the house, on the web.
 *
 * The registers below are lifted verbatim from
 * ~/Bastion/Design/haute-lumiere/tokens/colors.css so a correspondence read at
 * midnight is lit the way the magazine is lit at midnight. They are copied
 * rather than linked because this surface must open with no network at all —
 * a messenger whose stylesheet is a third-party request is a messenger that is
 * blank on the train.
 *
 * Radius zero. Hairline rules. Gold is a mark and never a fill — which is why
 * delivery is a gold hairline that fills in, and never a tick, never two
 * ticks, never blue. One curve, three durations. Nothing snaps or bounces.
 */

html[data-register="aurora"]{
  --paper:#F4F9FD; --paper-2:#E9F2FA; --ink:#17283A; --ink-soft:#3A5062;
  --text-body:#3A5062; --text-muted:#4E6B87; --muted:#4E6B87;
  --gold:#B7A667; --gold-d:#93813C; --rule:#D2E5F2; --border-light:#D2E5F2;
  --desk:#C3D9EC; --veil:20,42,64 /* @kind color */; --grain-blend:multiply /* @kind other */;
  --photo-grade:sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03) contrast(1.01) /* @kind other */;
  --image-filter:sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03) contrast(1.01) /* @kind other */;
  /* The panel — a chip inverted from the page, the same pair the other four
     registers already declare. share.css reads it; without it the popover fell
     through a level and took --ink/--paper by accident. */
  --panel:var(--ink) /* @kind color */; --panel-ink:var(--paper) /* @kind color */;
}

:root,
html[data-register="daylight"]{
  --paper:#FAF8F3; --paper-2:#F3EFE6; --ink:#0C1E16; --ink-soft:#334A3F;
  --text-body:#334A3F; --text-muted:#5C7065; --muted:#5C7065;
  --gold:#C5A059; --gold-d:#9A7A3A; --rule:#E1E7E2; --border-light:#E1E7E2;
  --desk:#D6DAD4; --veil:12,30,22 /* @kind color */; --grain-blend:multiply /* @kind other */;
  --photo-grade:saturate(1.04) contrast(1.03) brightness(1.01) /* @kind other */;
  --image-filter:saturate(1.04) contrast(1.03) brightness(1.01) /* @kind other */;
  --panel:var(--ink) /* @kind color */; --panel-ink:var(--paper) /* @kind color */;
}

html[data-register="solstice"]{
  --paper:#FDF8E4; --paper-2:#F7EFD3; --ink:#3A3117; --ink-soft:#5C4F28;
  --text-body:#5C4F28; --text-muted:#75683B; --muted:#75683B;
  --gold:#C79A3C; --gold-d:#A2782A; --rule:#EDE3C4; --border-light:#EDE3C4;
  --desk:#E6DBB6; --veil:58,49,23 /* @kind color */; --grain-blend:multiply /* @kind other */;
  --photo-grade:sepia(.26) saturate(1.1) brightness(1.04) /* @kind other */;
  --image-filter:sepia(.26) saturate(1.1) brightness(1.04) /* @kind other */;
  /* The panel — a chip inverted from the page, the same pair the other four
     registers already declare. share.css reads it; without it the popover fell
     through a level and took --ink/--paper by accident. */
  --panel:var(--ink) /* @kind color */; --panel-ink:var(--paper) /* @kind color */;
}

html[data-register="dusk"]{
  --paper:#FBF4EA; --paper-2:#F4E8DA; --ink:#33201A; --ink-soft:#5A3C2E;
  --text-body:#5A3C2E; --text-muted:#7A5B4C; --muted:#7A5B4C;
  --gold:#D69A4C; --gold-d:#B0713C; --rule:#EDDFCE; --border-light:#EDDFCE;
  --desk:#E0CDB8; --veil:51,32,26 /* @kind color */; --grain-blend:multiply /* @kind other */;
  --photo-grade:sepia(.16) saturate(1.24) contrast(1.07) brightness(1.02) /* @kind other */;
  --image-filter:sepia(.16) saturate(1.24) contrast(1.07) brightness(1.02) /* @kind other */;
  /* The panel — a chip inverted from the page, the same pair the other four
     registers already declare. share.css reads it; without it the popover fell
     through a level and took --ink/--paper by accident. */
  --panel:var(--ink) /* @kind color */; --panel-ink:var(--paper) /* @kind color */;
}

html[data-register="vespers"]{
  --paper:#3A2E22; --paper-2:#463829; --ink:#F2E3C8; --ink-soft:#DCC9A6;
  --text-body:#DCC9A6; --text-muted:#C0AB8A; --muted:#C0AB8A;
  --gold:#D9AE6A; --gold-d:#C79753; --rule:#55432F; --border-light:#55432F;
  --desk:#241C14; --veil:36,28,20 /* @kind color */; --grain-blend:screen /* @kind other */;
  --photo-grade:sepia(.55) saturate(.85) contrast(1.02) /* @kind other */;
  --image-filter:sepia(.55) saturate(.85) contrast(1.02) /* @kind other */;
  --panel:var(--desk) /* @kind color */; --panel-ink:var(--ink) /* @kind color */;
}

html[data-register="midnight"]{
  --paper:#111620; --paper-2:#171E2A; --ink:#EFE8D8; --ink-soft:#CFC7B4;
  --text-body:#CFC7B4; --text-muted:#8E97A6; --muted:#8E97A6;
  --gold:#D9B472; --gold-d:#C39A56; --rule:#2A3140; --border-light:#2A3140;
  --desk:#080B11; --veil:5,8,14 /* @kind color */; --grain-blend:screen /* @kind other */;
  --photo-grade:contrast(1.14) brightness(.9) saturate(1.04) /* @kind other */;
  --image-filter:contrast(1.14) brightness(.9) saturate(1.04) /* @kind other */;
  --panel:var(--desk) /* @kind color */; --panel-ink:var(--ink) /* @kind color */;
}

html[data-register="nocturne"]{
  --paper:#0E1712; --paper-2:#131F18; --ink:#EDE6D2; --ink-soft:#C9C2AA;
  --text-body:#C9C2AA; --text-muted:#7E8C80; --muted:#7E8C80;
  --gold:#C7A468; --gold-d:#AC8B4C; --rule:#243128; --border-light:#243128;
  --desk:#070B08; --veil:7,13,9 /* @kind color */; --grain-blend:screen /* @kind other */;
  --photo-grade:sepia(.14) hue-rotate(75deg) saturate(.82) contrast(1.13) brightness(.87) /* @kind other */;
  --image-filter:sepia(.14) hue-rotate(75deg) saturate(.82) contrast(1.13) brightness(.87) /* @kind other */;
  --panel:var(--desk) /* @kind color */; --panel-ink:var(--ink) /* @kind color */;
}

:root{
  --serif:'Cormorant Garamond',Georgia,ui-serif,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.165,.84,.44,1);
  --quick:200ms; --base:400ms; --slow:700ms;
  --rail:22rem;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--serif);
  -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.5;
  overflow:hidden;
}
::selection{background:var(--paper-2)}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;
  border-radius:0;text-align:left}
input,textarea{font:inherit;color:inherit;background:none;border:none;border-radius:0}
input:focus,textarea:focus,button:focus-visible{outline:none}
button:focus-visible,a:focus-visible{box-shadow:none;border-color:var(--gold)}
a{color:var(--gold-d);text-decoration:none;transition:color var(--base) var(--ease)}
a:hover{color:var(--ink)}
[hidden]{display:none!important}

/* Furniture the reader ignores: Manrope, uppercase, tracked. Nothing here is
   ever read aloud. */
.tag{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted)}
.kicker{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold-d)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* On glass the hit area grows and the mark never does. */
[data-hit]{position:relative}
[data-hit]::after{content:"";position:absolute;inset:-14px;pointer-events:auto}

/* ── the shell ─────────────────────────────────────────────────────────── */
#shell{display:grid;height:100%;
  grid-template-columns:var(--rail) 1px 1fr;
  grid-template-rows:auto 1px 1fr;
  grid-template-areas:"bar bar bar" "barrule barrule barrule" "index spine room";
  background:var(--rule)}
#bar{grid-area:bar;background:var(--paper)}
#barrule{grid-area:barrule}
#index{grid-area:index;background:var(--paper);overflow-y:auto;min-height:0}
#spine{grid-area:spine}
#room{grid-area:room;background:var(--paper);min-height:0;display:flex;flex-direction:column}

/* ── the bar ───────────────────────────────────────────────────────────── */
#bar{display:flex;align-items:center;gap:14px;padding:14px 22px}
#bar .mark{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.44em;
  text-transform:uppercase;color:var(--gold-d)}
#bar .who{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted)}
#bar .spacer{flex:1}
.quiet{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);padding:8px 0;
  transition:color var(--base) var(--ease)}
.quiet:hover{color:var(--ink)}
.quiet[aria-pressed=true]{color:var(--ink)}

/* The register switch is fixed chrome — the one place a radius lives. */
.registers{display:flex;gap:2px;padding:4px;border:1px solid var(--rule);border-radius:2px}
.registers button{width:14px;height:14px;border-radius:8px;border:1px solid var(--rule);
  background:var(--paper-2);transition:border-color var(--base) var(--ease)}
.registers button[aria-pressed=true]{border-color:var(--gold)}

/* ── the index of correspondences ──────────────────────────────────────── */
#index header{padding:22px 22px 14px}
.corr{display:block;width:100%;padding:14px 22px;border-top:1px solid var(--rule);
  transition:background var(--base) var(--ease)}
.corr:first-of-type{border-top:0}
.corr:hover{background:var(--paper-2)}
.corr[aria-current=true]{background:var(--paper-2)}
.corr .name{font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.2;
  display:block;color:var(--ink)}
.corr .last{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--text-muted);
  display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Something said since you last looked is a gold hairline in the margin.
   Never a number, never a disc, never red. */
.corr .since{display:block;width:22px;height:1px;background:var(--gold);margin-top:8px;
  opacity:0;transition:opacity var(--base) var(--ease)}
.corr[data-since=true] .since{opacity:1}

/* ── the room ──────────────────────────────────────────────────────────── */
#roomhead{padding:22px;border-bottom:1px solid var(--rule)}
#roomhead h2{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1.06;
  letter-spacing:-.018em;margin:0}
#roomhead .with{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted);
  margin:4px 0 0}
#paper{flex:1;overflow-y:auto;min-height:0;padding:22px;
  container-type:inline-size}
#paper .sheet{max-width:54ch;margin:0 auto}

/* A conversation is a correspondence, not a feed: each turn is a letter with a
   hand above it, set in the same serif as the books. No bubbles. */
.note{padding:14px 0 22px;border-top:1px solid var(--rule)}
.note:first-child{border-top:0}
.note .hand{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.note .hand .when{color:var(--text-muted);letter-spacing:.2em}
.note p{font-family:var(--serif);font-size:19px;line-height:1.55;margin:8px 0 0;
  white-space:pre-wrap;overflow-wrap:break-word;color:var(--text-body)}
.note.mine p{color:var(--ink)}
.note .shut{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--text-muted);
  margin:8px 0 0}
/* Delivery is a hairline that fills in gold. It is 2px at most, which is why
   it is a rule and not a bar. */
.note .went{display:block;width:14px;height:1px;background:var(--rule);margin-top:8px;
  transition:width var(--slow) var(--ease),background var(--slow) var(--ease)}
.note[data-went=true] .went{width:34px;height:1px;background:var(--gold)}

.empty{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;
  color:var(--text-muted);max-width:44ch;margin:52px auto;text-align:center}
.empty b{font-style:normal;font-weight:400;color:var(--ink);display:block;margin-bottom:8px}

/* ── the desk ──────────────────────────────────────────────────────────── */
#desk{border-top:1px solid var(--rule);padding:14px 22px 22px}
#desk .sheet{max-width:54ch;margin:0 auto}
#saying{width:100%;font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);padding:14px;resize:none;
  min-height:74px;max-height:34vh;transition:border-color var(--base) var(--ease)}
#saying:focus{border-color:var(--gold)}
#saying::placeholder{color:var(--text-muted);font-style:italic}
#desk .under{display:flex;align-items:baseline;gap:14px;margin-top:8px}
#desk .under .said{font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--text-muted);flex:1}
#desk .carrying{display:flex;align-items:baseline;gap:14px;margin:8px 0 0;
  font-family:var(--serif);font-style:italic;font-size:15px;color:var(--text-muted)}

/* A film, a photograph, a voice — sealed under the key of the message that
   carried it, and opened here. A plate is bled or it is uncut, never stretched,
   and the crop is taken from the top because cutting the top of a head is a
   fault rather than a style. */
.note .brought{margin:14px 0 0;max-width:100%}
.note .brought video,.note .brought img{display:block;width:100%;height:auto;max-height:52vh;
  object-fit:contain;background:var(--paper-2)}
.note .brought audio{display:block;width:100%}
.note .brought figcaption{margin:8px 0 0;font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.note .brought .shut{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--text-muted)}

#writing{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);
  height:22px;padding:0 22px;opacity:0;transition:opacity var(--base) var(--ease)}
#writing.on{opacity:1}

/* ── a sheet over the room: the door, someone, the set ─────────────────── */
#dim{position:fixed;inset:0;background:rgba(0,0,0,.34);opacity:0;pointer-events:none;
  transition:opacity var(--base) var(--ease);display:grid;place-items:center;padding:22px}
#dim.on{opacity:1;pointer-events:auto}
.sheet-panel{width:min(38rem,100%);max-height:88vh;overflow-y:auto;background:var(--paper);
  border:1px solid var(--rule);padding:34px;box-shadow:var(--shadow-sheet,0 40px 90px -40px rgba(0,0,0,.3))}
.sheet-panel h3{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1.06;
  margin:8px 0 8px;letter-spacing:-.018em}
.sheet-panel .lede{font-family:var(--serif);font-size:18px;line-height:1.55;
  color:var(--text-body);margin:0 0 22px;max-width:52ch}
.sheet-panel p{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--text-body)}

/* A passage carried in from a book. It is somebody's own sentence, so it is set
   the way the book set it — serif, italic, a gold hairline in the margin — and
   never as a grey quotation block with a mark stuck on the front. */
.passage{margin:0 0 22px;padding:0 0 0 22px;border-left:1px solid var(--gold)}
.passage blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:20px;
  line-height:1.52;color:var(--ink)}
.passage figcaption{margin:8px 0 0;font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

.field{margin-bottom:22px}
.field label{display:block;font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px}
.field input{width:100%;font-family:var(--serif);font-size:20px;background:var(--paper-2);
  border:1px solid var(--rule);padding:14px;transition:border-color var(--base) var(--ease)}
.field input:focus{border-color:var(--gold)}
.field input::placeholder{color:var(--text-muted)}
.field .hint{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--text-muted);
  margin:8px 0 0}

.go{width:100%;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--gold);padding:14px;
  text-align:center;transition:background var(--base) var(--ease)}
.go:hover{background:var(--paper-2)}
.go[disabled]{opacity:.42;cursor:default}

.row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 0;border-top:1px solid var(--rule)}
.row .k{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}
.row .v{font-family:var(--serif);font-size:17px;color:var(--text-body);text-align:right}

.person{display:flex;align-items:baseline;gap:14px;width:100%;padding:14px 0;
  border-top:1px solid var(--rule);transition:color var(--base) var(--ease)}
.person:hover{color:var(--gold-d)}
.person .mk{font-family:var(--serif);font-size:22px;color:var(--gold-d);width:22px}
.person .nm{font-family:var(--serif);font-size:19px;flex:1}
.person .un{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-muted)}

/* ── the murmur: one line, spoken once, then gone ──────────────────────── */
#murmur{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  font-family:var(--serif);font-style:italic;font-size:17px;color:var(--panel-ink,var(--paper));
  background:var(--panel,var(--ink));padding:14px 22px;max-width:44ch;text-align:center;
  opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease)}
#murmur.on{opacity:1}

/* ── narrow glass: one column at a time, the index or the room ─────────── */
@media (max-width:52rem){
  #shell{grid-template-columns:1fr;grid-template-rows:auto 1px 1fr;
    grid-template-areas:"bar" "barrule" "room"}
  #index{grid-area:room;z-index:2}
  #spine{display:none}
  body[data-at=room] #index{display:none}
  body[data-at=index] #room{display:none}
  #roomhead h2{font-size:28px}
  #paper,#desk{padding-left:22px;padding-right:22px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:0ms!important}}