/* ============================================================
   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·VIII·XXII·V — nothing here is accidental
   ============================================================ */

/* ---------- fonts (self-hosted, zero external requests) ---------- */
@font-face {
  font-family: "Cinzel";
  src: local("Cinzel"), url("/fonts/cinzel-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: local("Raleway Light"), local("Raleway-Light"),
       url("/fonts/raleway-300.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, .58); /* the whisper */
  --ash:    rgba(255, 255, 255, .32); /* the colophon */
  --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: 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;
  inset: 0 auto 0 0;
  width: min(46vw, 700px);
  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: 100dvh;
  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: clamp(200px, 22vw, 300px);
  height: auto;
  animation: settle 1.8s var(--ease) .35s both;
}

.motto {
  font-family: var(--display);
  font-weight: 400;
  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;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  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 a { white-space: nowrap; }
.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: calc((100vw + min(42vw, 640px)) / 2); /* dokładna oś kolumny treści, niezależna od szerokości okna */
  width: min(64vh, 60vw);
  aspect-ratio: 441 / 479;
  translate: -50% -50%;
  background: url("/assets/emblem-white.svg") center / contain no-repeat;
  opacity: .045;
  animation: breathe 22s ease-in-out infinite;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -160px;
  z-index: 3;
  background: url("/assets/noise.png") repeat;
  background-size: 160px 160px;
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: flicker 1.2s steps(4) infinite;
}

/* ---------- 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(22vmax, 600px);
  height: min(42vmax, 1100px);
  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; }

@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; }                                to { opacity: 1; } }
@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); }
}

/* ---------- smaller stages: pietrowo tylko dla wyraznie pionowych (<=3:4); reszta = bok ---------- */
@media (max-width: 900px) and (aspect-ratio <= 3/4) {
  /* jedna zmienna rzadzi kompozycja: tresc startuje na --lift,
     portret ma zawsze --lift * 1.174 (oryginalna proporcja 46:54),
     wiec twarz i tresc skaluja sie RAZEM i nigdy na siebie nie wchodza */
  :root { --lift: clamp(34dvh, calc(100dvh - 24rem), 46dvh); }

  /* portret zajmuje góre ekranu i wygasa w czern zanim zacznie sie tresc */
  .portrait {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100vw;
    height: calc(var(--lift) * 1.174);
    opacity: .9;
  }
  .portrait img { object-position: 50% 10%; }
  .portrait .veil {
    background:
      linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 42%, var(--ink) 96%),
      linear-gradient(90deg,  rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,.55) 100%);
  }

  /* treść startuje pod twarzą, na litej czerni */
  .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; }

  /* ciaśniejszy tracking, żeby nic nie łamało się dziwnie */
  .whisper { letter-spacing: .22em; padding-left: .22em; line-height: 1.85; }
  .email   { letter-spacing: .26em; padding-left: .26em; font-size: .8rem; }

  /* znak wodny schodzi niżej, pod tekst, jeszcze dyskretniej */
  .watermark {
    left: 50%;
    top: 72%;
    width: min(52vh, 88vw);
    opacity: .035;
  }

  /* stopka: trzymaj wiersz, dopoki sie miesci; zawijaj z wdziekiem */
  .colophon {
    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; }
}

/* niskie ekrany pionowe (np. zewnętrzne wyświetlacze składanych) */
@media (max-width: 900px) and (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; }
}

/* okna kwadratowe i poziome ponizej 900px - uklad boczny, ale ciasniej */
@media (max-width: 900px) and (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); } /* oś kolumny: (100vw + 40vw) / 2 */
  .colophon { font-size: .56rem; }
}

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

/* telefon w poziomie: scena niska - rozmiary skaluja sie z wysokoscia ekranu:
   SE zostaje kompaktowe, wieksze iPhone'y dostaja pelniejsza scene;
   twarda rezerwa na stopke, zeby nic na nic nie nachodzilo */
@media (max-height: 480px) and (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) {
  .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; }
}


/* ---------- 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: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
  padding: 2rem 2rem calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
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;
  height: auto;
  margin: 0 auto clamp(2rem, 5vh, 3rem);
}
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); }
body.record .stamp {
  display: block;
  margin-top: 1.6rem;
  font-size: .62rem;
  letter-spacing: .3em;
  padding-left: .3em; /* optical centre */
  text-transform: uppercase;
  color: var(--ash);
}

@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; }
}

/* ---------- 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; }
}

/* ---------- paper, should anyone ask for it ----------
   Ctrl+P yields a calling card, not a spilled inkwell. */
/* ---- 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;
}

@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 {
    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 .stamp { color: #666; }
  body.record li::before { color: #999; }
  body.record .ledger a { color: #000; border-bottom: none; }
  body.record .back { display: 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.lost .void .back { display: none; }
}