/* ============================================================
   MARCIN CHOCZAJ CONSULTING — choczaj.com
   Palette: absolute black & white, nothing else. As the brand book demands.
   Type:    Cinzel (Trajan-blooded display) · Raleway Light (whisper & data)
   Build:   MMXXVI·IX·II·VII — nothing here is accidental
   ============================================================ */

/* ---------- fonts (self-hosted, zero external requests) ---------- */
@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-400.04c6b515.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/fonts/raleway-300.7ccd7d40.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --ink:    #000000;                  /* brand black, the only colour */
  --paper:  #ffffff;
  --smoke:  rgba(255, 255, 255, .60); /* the whisper — 7.37:1 on black, WCAG AAA */
  --ash:    rgba(255, 255, 255, .47); /* the colophon — 4.76:1 on black, WCAG AA */
  --hair:   rgba(255, 255, 255, .22); /* hairlines */
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --utility: "Raleway", "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- foundation ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--utility);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--paper); color: var(--ink); }

/* ---------- portrait: a man emerging from the dark ---------- */
.portrait {
  position: fixed;
  top: 0; left: 0; bottom: 0;  /* fallback for inset */
  inset: 0 auto 0 0;
  width: 46vw;  /* fallback */
  width: min(46vw, 700px);
  height: 100vh;  /* fallback */
  height: 100dvh;
  animation: appear 2.4s var(--ease) both;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) contrast(1.04);
}
.portrait .veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,  rgba(0,0,0,0)   34%, var(--ink) 90%),
    linear-gradient(0deg,   rgba(0,0,0,.92) 0%,  rgba(0,0,0,0) 34%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%,  rgba(0,0,0,0) 22%),
    linear-gradient(270deg, rgba(0,0,0,0)   85%, rgba(0,0,0,.7) 100%);
}

/* ---------- the card ---------- */
.card {
  position: relative;
  z-index: 2;
  min-height: 100vh;  /* fallback */
  min-height: 100dvh;
  margin-left: 42vw;  /* fallback */
  margin-left: min(42vw, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.4rem, 3.2vh, 2.4rem);
  padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 4vw, 4rem);
}

.logo {
  width: 260px;  /* fallback */
  width: clamp(200px, 22vw, 300px);
  height: auto;
  animation: settle 1.8s var(--ease) .35s both;
}

.motto {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;  /* fallback */
  font-size: clamp(1.45rem, 2.6vw, 2.85rem);
  letter-spacing: .18em;
  padding-left: .18em; /* optical centering: tracking adds an invisible space after the final glyph */
  text-transform: uppercase;
  white-space: nowrap;
  animation: engrave 2.6s var(--ease) .7s both;
}
.motto .from { opacity: .55; }
.motto .dot  { opacity: .35; }

.rule {
  width: 58px;
  height: 1px;
  background: var(--hair);
  transform-origin: center;
  animation: unfold 1.6s var(--ease) 1.25s both;
}

.whisper {
  font-size: .78rem;
  letter-spacing: .34em;
  line-height: 2.1;
  text-transform: uppercase;
  color: var(--smoke);
  padding-left: .34em; /* optical centering of tracked text */
  white-space: pre-line; /* the longest whisper arrives as a couplet, by design */
  animation: settle 1.8s var(--ease) 1.55s both;
}

.contact { animation: settle 1.8s var(--ease) 1.95s both; }

.email {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .42em;
  padding: .9em 0 .55em .42em; /* left pad = optical centering */
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  position: relative;
}
a.email::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hair);
  transform: scaleX(.55);
  transition: transform .7s var(--ease), background-color .7s var(--ease);
}
a.email:hover::after,
a.email:focus-visible::after {
  transform: scaleX(1);
  background: var(--paper);
}
a.email:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 6px;
}

/* ---------- colophon: year · seat · registry ---------- */
.colophon {
  position: fixed;
  z-index: 2;
  left: 0; right: 0; bottom: 0;  /* fallback for inset */
  inset: auto 0 0 0;
  display: grid;                       /* four fixed stations; the last is always a door - Legal out, Home back */
  grid-template-columns: repeat(4, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem clamp(1.2rem, 2.5vw, 2rem);
  padding-left: max(clamp(1.2rem, 2.5vw, 2rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1.2rem, 2.5vw, 2rem), env(safe-area-inset-right, 0px));
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  font-size: .62rem;
  letter-spacing: .28em;
  color: var(--ash);
  text-transform: uppercase;
  animation: settle 1.8s var(--ease) 2.3s both;
}
.colophon span,
.colophon time,
.colophon a { white-space: nowrap; }
.colophon time     { justify-self: start; }
.colophon .seat    { justify-self: center; }
.colophon #vat     { justify-self: center; }
.colophon a.record { justify-self: end; }

.colophon .seat { letter-spacing: .34em; margin-left: .34em; } /* optical centre */
.colophon #vat { letter-spacing: .22em; }

/* the record: present, never insistent */
.colophon a.record {
  letter-spacing: .28em;
  margin-right: -.28em;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: .18em;
  transition: color .6s var(--ease), border-color .6s var(--ease);
}
.colophon a.record:hover,
.colophon a.record:focus-visible { color: var(--paper); border-bottom-color: var(--hair); }
.colophon a.record:focus-visible { outline: 1px solid var(--paper); outline-offset: 5px; }

/* ---------- atmosphere ---------- */
.watermark {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 71vw;  /* fallback */
  left: calc((100vw + min(42vw, 640px)) / 2); /* the exact axis of the content column, whatever the window's width */
  width: min(64vh, 60vw);
  aspect-ratio: 441 / 479;
  translate: -50% -50%;
  background: url("/assets/emblem-white.78adecaa.svg") center / contain no-repeat;
  opacity: .045;
  animation: breathe 22s ease-in-out infinite;
  pointer-events: none;
}

.grain {
  position: fixed;
  top: -160px; right: -160px; bottom: -160px; left: -160px;  /* fallback */
  inset: -160px;
  z-index: 3;
  background: url("/assets/noise.27f27721.png") repeat;
  background-size: 160px 160px;
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: flicker 1.2s steps(4) infinite;
}
.grain.resting { animation-play-state: paused; } /* unattended, the grain holds its frame (app.js) */

/* ---------- candlelight ----------
   Two nested lights: a wide, faint aura (.glow) and a small warm-white
   core (.core) just beneath the cursor. Layered stops ease the falloff;
   plus-lighter blending and the film grain above dither away banding. */
.glow {
  position: fixed;
  z-index: 1;
  top: 0; left: 0;
  width: min(15vmax, 420px);
  height: min(29vmax, 780px);
  background: radial-gradient(ellipse 52% 46% at 50% 34%,
    rgba(255,255,255,.026) 0%,
    rgba(255,255,255,.018) 22%,
    rgba(255,255,255,.011) 40%,
    rgba(255,255,255,.006) 55%,
    rgba(255,255,255,.003) 68%,
    rgba(255,255,255,0)    80%);
  mix-blend-mode: plus-lighter;
  transform-origin: 50% 20%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  will-change: translate;
}
.glow .core {
  position: absolute;
  left: 50%; top: 20%;
  width: 18%;
  aspect-ratio: 1 / 1.35;
  translate: -50% -32%;
  background: radial-gradient(ellipse 50% 50% at 50% 42%,
    rgba(255,255,255,.040) 0%,
    rgba(255,255,255,.020) 35%,
    rgba(255,255,255,.007) 62%,
    rgba(255,255,255,0)    80%);
  filter: blur(6px);
  animation: pulse 3.4s ease-in-out infinite alternate;
}
.glow.lit { opacity: 1; animation: waver 6s ease-in-out infinite alternate; }
.glow:not(.lit) .core { animation-play-state: paused; } /* an unlit core does not pulse */

@keyframes waver {
  from { scale: 1 1; }
  to   { scale: .985 1.04; }
}
@keyframes pulse {
  from { opacity: .85; translate: -50% -32%; }
  to   { opacity: 1;   translate: -50% -29%; }
}

/* ---------- movements ---------- */
@keyframes appear  { from { opacity: 0; } }  /* no 'to': settles at the element's own opacity (1 desktop, .68 portrait-stacked) */
@keyframes settle  { from { opacity: 0; transform: translateY(14px); }   to { opacity: 1; transform: none; } }
@keyframes engrave { from { opacity: 0; letter-spacing: .38em; }         to { opacity: 1; letter-spacing: .18em; } }
@keyframes unfold  { from { opacity: 0; transform: scaleX(0); }          to { opacity: 1; transform: scaleX(1); } }
@keyframes breathe {
  0%, 100% { transform: scale(1);     opacity: .04; }
  50%      { transform: scale(1.035); opacity: .06; }
}
@keyframes flicker {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-64px, 32px); }
  50%  { transform: translate(32px, -64px); }
  75%  { transform: translate(-32px, -32px); }
  100% { transform: translate(0, 0); }
}

/* square and landscape windows below 900px: the side-by-side layout, drawn tighter */
@media (max-width: 900px) and (min-aspect-ratio: 3/4) {
  .portrait { width: 44vw; }
  .card {
    margin-left: 40vw;
    gap: clamp(.8rem, 2.6vh, 1.4rem);
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
  .logo  { width: clamp(150px, 19vw, 220px); }
  .motto { font-size: clamp(1.15rem, 2.9vw, 2rem); }
  .watermark { left: 70vw; width: min(70vh, 42vw); } /* column axis: (100vw + 40vw) / 2 */
  .colophon { font-size: .56rem; }
}

/* ---------- smaller stages: stacked only when clearly vertical (<=3:4); the rest keep the side-by-side ---------- */
@media (max-width: 900px) and (max-aspect-ratio: 3/4) {
  /* one variable governs the composition: the content starts at --lift,
     the portrait always spans --lift * 1.174 (the original 46:54 ratio),
     so the face and the content scale TOGETHER and never collide */
  :root { --lift: clamp(34dvh, calc(100dvh - 24rem), 46dvh); }

  /* the portrait takes the top of the stage and fades to black before the content begins;
     dimmed and hemmed so both orientations burn the same candle */
  .portrait {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100vw;
    height: calc(var(--lift) * 1.174);
    opacity: .68;
  }
  .portrait img { object-position: 50% 10%; }
  .portrait .veil {
    background:
      linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 36%, var(--ink) 96%),
      linear-gradient(90deg,  rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.72) 100%);
  }

  /* the content begins below the face, on solid black */
  .card {
    margin-left: 0;
    justify-content: flex-start;
    padding-top: var(--lift);
    padding-bottom: 5rem;
    gap: clamp(1rem, 2.4vh, 1.6rem);
  }
  .logo  { width: clamp(180px, 52vw, 230px); }
  .motto { white-space: normal; line-height: 1.5; }

  /* tighter tracking, so nothing wraps awkwardly */
  .whisper { letter-spacing: .22em; padding-left: .22em; line-height: 1.85; }
  .email   { letter-spacing: .26em; padding-left: .26em; font-size: .8rem; }

  /* the watermark settles lower, beneath the text, quieter still */
  .watermark {
    left: 50%;
    top: 72%;
    width: min(52vh, 88vw);
    opacity: .035;
  }

  /* the colophon: hold the line while it fits; wrap with grace */
  .colophon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .5rem;
    column-gap: 1.4rem;
    font-size: .56rem;
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
  }
  .colophon .seat { margin-left: 0; }
  .colophon #vat { letter-spacing: .28em; }
  .colophon a.record { margin-right: 0; }
}

/* short vertical screens (e.g. the outer displays of foldables) */
@media (max-width: 900px) and (max-aspect-ratio: 3/4) and (max-height: 660px) {
  :root { --lift: clamp(32dvh, calc(100dvh - 22rem), 46dvh); }
  .card {
    padding-bottom: 4.5rem;
    gap: clamp(.8rem, 2vh, 1.2rem);
  }
  .logo { width: 165px; }
}


@media (max-height: 560px) {
  .card { gap: 1rem; padding-bottom: 4.5rem; }
  .logo { width: 170px; }
}

/* phone in landscape: a low stage — sizes scale with the height of the screen:
   the SE stays compact, larger phones receive a fuller scene;
   a hard reserve for the colophon, so nothing treads on anything */
@media (max-height: 480px) and (min-aspect-ratio: 3/4) {
  .card {
    gap: clamp(.6rem, 2.6vh, 1.1rem);
    padding-top: clamp(1.5rem, 6vh, 2.8rem);
    padding-bottom: calc(3.8rem + env(safe-area-inset-bottom, 0px));
  }
  .logo   { width: clamp(140px, 44vh, 200px); }
  .motto  { font-size: clamp(1.05rem, 5.5vh, 1.7rem); }
  .rule   { width: clamp(44px, 13vh, 58px); }
  .whisper { font-size: clamp(.58rem, 2.4vh, .72rem); letter-spacing: .26em; padding-left: .26em; line-height: 1.7; }
  .email   { font-size: clamp(.64rem, 2.6vh, .78rem); letter-spacing: .3em; padding-left: .3em; }
  .colophon {
    font-size: clamp(.5rem, 1.5vh, .6rem);
    padding-top: .75rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  }
  .watermark { opacity: .035; }
}

/* ---------- grand stages: TV & 4K, viewed from a distance ---------- */
@media (min-width: 1800px) {
  .portrait { width: min(46vw, 1000px); }
  .card     { margin-left: min(42vw, 940px); }
  .watermark { left: calc((100vw + min(42vw, 940px)) / 2); }
  .logo   { width: clamp(300px, 17vw, 420px); }
  .motto  { font-size: clamp(2.85rem, 2.2vw, 3.8rem); }
  .whisper { font-size: .95rem; }
  .email   { font-size: 1rem; }
  .colophon { font-size: .78rem; }
  .rule { width: 76px; }
}

/* ---------- monumental stages: 5K, 8K, wall screens ---------- */
@media (min-width: 2800px) {
  .portrait { width: min(46vw, 1400px); }
  .card     { margin-left: min(42vw, 1320px); gap: clamp(2rem, 3.4vh, 3.4rem); }
  .watermark { left: calc((100vw + min(42vw, 1320px)) / 2); }
  .logo    { width: clamp(420px, 15vw, 640px); }
  .motto   { font-size: clamp(3.8rem, 1.9vw, 6rem); }
  .whisper { font-size: clamp(1rem, .55vw, 1.6rem); }
  .email   { font-size: clamp(1.05rem, .55vw, 1.7rem); }
  .colophon { font-size: clamp(.8rem, .4vw, 1.25rem); padding: 1.6rem 2.6rem; }
  .rule    { width: 110px; }
  body.record .ledger { max-width: 62rem; }
  body.record .ledger .mark { width: 240px; }
  body.record h1 { font-size: 2.2rem; }
  body.record .ledger p, body.record .ledger li, body.record dd { font-size: 1.25rem; }
  body.record dt { font-size: .85rem; }
  body.lost .void .code { font-size: 6rem; }
  body.lost .void .line { font-size: 1.1rem; }
}


/* ---------- CDIV: the page that is not there ---------- */
body.lost .watermark {
  left: 50%;
  top: 50%;
  width: min(60vh, 80vw);
  opacity: .05;
}
body.lost .void {
  position: relative;
  z-index: 2;
  min-height: 100vh;  /* fallback */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
  padding: 2rem 2rem .6rem;
}
body.lost .void .code {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: .3em;
  padding-left: .3em;
  color: var(--paper);
  animation: settle 1.8s var(--ease) .2s both;
}
body.lost .void .line {
  font-size: .78rem;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: var(--smoke);
  line-height: 2.2;
  animation: settle 1.8s var(--ease) .7s both;
}
body.lost .void .back {
  font-size: .72rem;
  letter-spacing: .34em;
  padding-left: .34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  border-bottom: 1px solid var(--hair);
  padding-bottom: .5em;
  transition: color .6s var(--ease), border-color .6s var(--ease);
  animation: settle 1.8s var(--ease) 1.2s both;
}
body.lost .void .back:hover,
body.lost .void .back:focus-visible { color: var(--paper); border-color: var(--paper); }

/* ---------- the record: plain speech, same room ----------
   Composed like a deed: the title block sits on the axis, as the
   home page and CDIV do; the body reads from the left, as records
   must. Ceremony at the door, function in the room.              */
body.record .watermark {
  left: 50%;
  top: 50%;
  width: min(58vh, 80vw);
  opacity: .035; /* the same seal as everywhere; quiet beneath the text */
}
body.record .ledger {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.4rem, 5vw, 2.5rem) 5rem;
  padding-left:  max(clamp(1.4rem, 5vw, 2.5rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1.4rem, 5vw, 2.5rem), env(safe-area-inset-right, 0px));
  animation: settle 1.6s var(--ease) .15s both;
}
body.record .ledger .mark {
  display: block;
  width: 148px;  /* fallback */
  width: clamp(150px, 16vw, 200px);
  height: auto;
  margin: 0 auto clamp(2rem, 5vh, 3rem);
}
/* the tongue: two languages, one record; in the corner, the current one a shade brighter, never loud */
body.record .tongue {
  position: absolute;
  z-index: 4; /* above the ledger, whose top padding reaches the corner on narrow screens */
  top: clamp(1.1rem, 2.6vh, 1.7rem);
  right: max(clamp(1.2rem, 2.5vw, 2rem), env(safe-area-inset-right, 0px));
  display: flex;
  align-items: baseline;
  gap: .9em;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ash);
  animation: settle 1.6s var(--ease) .15s both; /* arrives with the ledger */
}
body.record .tongue a {
  color: var(--ash);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: .18em;
  transition: color .6s var(--ease), border-color .6s var(--ease);
}
body.record .tongue a[aria-current="page"] { color: var(--smoke); }
body.record .tongue a:hover,
body.record .tongue a:focus-visible { color: var(--paper); border-bottom-color: var(--hair); }
body.record .tongue a:focus-visible { outline: 1px solid var(--paper); outline-offset: 5px; }
body.record .tongue .bar { color: var(--hair); }
body.record h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);
  letter-spacing: .26em;
  padding-left: .26em; /* optical centre of tracked capitals */
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
}
body.record .preface {
  text-align: center;
  max-width: 34rem;
  margin: 1.3rem auto 0;
}
body.record h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper);
  margin: clamp(2.4rem, 6vh, 3.2rem) 0 1.1rem;
}
body.record .ledger p,
body.record .ledger li {
  font-size: .92rem;
  line-height: 2;
  color: var(--smoke);
  max-width: 40rem;
}
body.record .ledger p + p { margin-top: 1.1rem; }
body.record dl {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: .85rem 2rem;
  margin-top: .4rem;
}
body.record dt {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ash);
  line-height: 2.1;
}
body.record dd { font-size: .92rem; line-height: 2.1; color: var(--paper); }
body.record ul { list-style: none; margin-top: .4rem; }
body.record li { padding-left: 1.4rem; position: relative; }
body.record li::before {
  content: "\2014"; /* em dash, not a bullet */
  position: absolute;
  left: 0;
  color: var(--ash);
}
body.record .ledger a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--hair); }
body.record .ledger a:hover,
body.record .ledger a:focus-visible { border-bottom-color: var(--paper); }
body.record .ledger a:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
body.record .rule { margin: clamp(2.6rem, 7vh, 3.6rem) auto 0; animation: none; }
body.record .close { text-align: center; margin-top: 2.4rem; }
body.record .back {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .34em;
  padding-left: .34em; /* optical centre */
  text-transform: uppercase;
  color: var(--ash);
  border-bottom-color: transparent;
}
body.record .back:hover,
body.record .back:focus-visible { color: var(--paper); }
/* the record closes with the same line the house signs everywhere */
body.record .colophon {
  position: static;
  margin-top: .4rem;
}

@media (max-width: 640px) {
  body.record dl { grid-template-columns: 1fr; gap: .2rem 0; }
  body.record dt { margin-top: 1.1rem; }
  body.record dt:first-child { margin-top: 0; }
}

/* ---------- contrast, on request ----------
   the greys step up to white, the atmosphere steps aside */
@media (prefers-contrast: more) {
  :root {
    --smoke: var(--paper);
    --ash:   var(--paper);
    --hair:  rgba(255, 255, 255, .6);
  }
  .motto .from, .motto .dot { opacity: 1; }
  .grain, .glow, .watermark { display: none; }
}

/* ---------- stillness, on request ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .grain, .glow { display: none; }
}

/* ---------- order, summoned by name (see app.js) ----------
   the noise stands still, then dissolves; the light finds the centre */
.grain   { transition: opacity 1.6s var(--ease); }
.whisper { transition: opacity .55s ease; }

body.ordered .grain {
  opacity: 0;
  animation-play-state: paused;
}

/* ---------- paper, should anyone ask for it ----------
   Ctrl+P yields a calling card, not a spilled inkwell. */
@media print {
  html { color-scheme: light; }
  body { background: #fff; color: #000; }
  .portrait, .grain, .glow, .watermark { display: none !important; }
  .card {
    margin: 0;
    min-height: auto;
    padding: 3cm 2cm 1cm;
    gap: 1.2cm;
  }
  .card, .logo, .motto, .rule, .whisper, .contact, .colophon {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .logo { filter: invert(1); width: 180px; }
  .motto { color: #000; font-size: 1.6rem; }
  .rule { background: #999; }
  .whisper { color: #444; }
  .email, a.email { color: #000; text-decoration: none; }
  a.email::after { display: none; }
  .colophon {
    display: flex;
    position: static;
    justify-content: center;
    gap: 2rem;
    color: #666;
    padding-top: 2cm;
  }
  .colophon a.record { display: none; } /* a link is dead on paper */

  /* the record, committed to paper — the one page meant for it */
  body.record .ledger { animation: none !important; max-width: none; padding: 3cm 2cm 1cm; }
  body.record .mark { filter: invert(1); width: 180px; margin-bottom: 1.2cm; }
  body.record h1,
  body.record h2,
  body.record dd { color: #000; }
  body.record .ledger p,
  body.record .ledger li { color: #222; }
  body.record dt,
  body.record li::before { color: #999; }
  body.record .ledger a { color: #000; border-bottom: none; }

  /* the void, committed to paper — nobody will, but the house is ready */
  body.lost .void {
    min-height: auto;
    justify-content: flex-start;
    padding: 3cm 2cm 1cm;
    gap: 1.2cm;
  }
  body.lost .void .code,
  body.lost .void .line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.lost .void .code { color: #000; }
  body.lost .void .line { color: #444; }
  body.record .back { display: none; }
  body.lost .void .back { display: none; }
}

/* ============================================================
   Compatibility & finishing layer — MMXXVI·VIII·XXVII
   Older engines get a composed room, not a broken one.
   ============================================================ */

/* the seal, centred even where `translate` is unknown (pre-2022 engines) */
@supports not (translate: 0) {
  .watermark {
    transform: translate(-50%, -50%);
    animation-name: breathe-legacy;
  }
  body.lost .watermark,
  body.record .watermark { transform: translate(-50%, -50%); }
}
@keyframes breathe-legacy {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: .04; }
  50%      { transform: translate(-50%, -50%) scale(1.035); opacity: .06; }
}

/* prose that breaks like it was set by hand (progressive) */
body.record .ledger p { text-wrap: pretty; }

/* touch targets: the small print stays small to the eye, generous to the finger (WCAG 2.5.8) */
.colophon a.record,
body.record .back,
body.record .tongue a,
body.lost .void .back { position: relative; }
.colophon a.record::before,
body.record .back::before,
body.record .tongue a::before,
body.lost .void .back::before {
  content: "";
  position: absolute;
  top: -.9em; right: -.7em; bottom: -.9em; left: -.7em;
}

/* Windows High Contrast / forced colors: the mark must survive any decree */
@media (forced-colors: active) {
  .grain, .glow, .watermark, .portrait { display: none; }
  .rule { background: CanvasText; forced-color-adjust: none; }
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .logo, body.record .mark { filter: invert(1); }
}

/* ---------- paper, second sitting: every page prints as a document ---------- */
@media print {
  @page { margin: 14mm 0; }  /* breathing room at page breaks; the sides are carried by the content */
  .card { padding-top: 2cm; }                       /* page margin now shares the load */
  body.record .ledger { padding: 1cm 2cm 1.2cm; }
  body.lost .void { padding-top: 2cm; }

  /* the record justifies on paper — a deed, not a memo */
  body.record .ledger p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    orphans: 3;
    widows: 3;
  }
  body.record h2 { break-after: avoid; page-break-after: avoid; }
  body.record dl { break-inside: avoid; page-break-inside: avoid; }
  body.record .preface { text-align: center; } /* the title block keeps its axis */

  /* leading for paper: the screen breathes at 2, a deed reads at 1.7;
     the closing rule and colophon draw in, so the record ends where its text ends */
  body.record .ledger p,
  body.record .ledger li,
  body.record dd { line-height: 1.7; }
  body.record .rule  { margin-top: 1.6rem; break-before: avoid; page-break-before: avoid; }
  body.record .close { margin-top: 1.2rem; break-before: avoid; page-break-before: avoid; }
  body.record .colophon { break-before: avoid; page-break-before: avoid; }
  body.record .tongue { display: none; } /* two doors, both dead on paper */
}