/* ── Cormorant Garamond, self-hosted ─────────────────────────────────
   A variable font, weight axis 300–700, so one file covers every weight
   the page uses. SIL Open Font License 1.1 — public/fonts/OFL.txt.
   Served from this origin: no third party learns who visited.
   unicode-range keeps the English page from fetching Polish diacritics.
   ────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─────────────────────────────────────────────────────────────────────
   PRAEMORIA — teaser
   Ground: deep indigo/graphite. One accent (old gold), used sparingly.
   Type: Cormorant Garamond (display, proper Æ) + system sans for UI.
   Animated states are gated behind html.js so the page is complete
   without JavaScript and in browsers without individual transforms.
   ───────────────────────────────────────────────────────────────────── */

:root{
  --bg:        #F7F2E8;   /* warm ivory — aged paper, never white */
  --bg-lift:   #FFFBF1;   /* the light that falls across the top of the page */

  --ink:       #2E2720;   /* 13.2:1 on --bg — warm near-black, never pure black */
  --ink-soft:  #443C33;   /*  9.8:1 */
  --ink-mute:  #5F564A;   /*  6.6:1 */
  --ink-faint: #6F6558;   /*  5.2:1 — smallest text still clears AA */

  --accent:      #8C5F14; /*  5.0:1 — amber, safe for text */
  --accent-line: #B07C22; /*  3.3:1 — amber for rules and marks (AA for graphics) */
  --accent-fill: #C08A2E; /*  4.9:1 against --ink — the button */

  --hairline:  rgba(46,39,32,.17);
  --field:     rgba(46,39,32,.035);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;

  --measure: 52ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --ease: cubic-bezier(.22,.68,.16,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  overflow-x:hidden;
  background-color:var(--bg);
  background-image:radial-gradient(115% 72% at 50% 0%, var(--bg-lift) 0%, rgba(247,242,232,0) 66%);
  background-repeat:no-repeat;
  background-size:100% 100vh;
  background-size:100% 100svh;   /* a distant light over the first screen only */
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:clamp(.95rem,.9rem + .25vw,1.0625rem);
  line-height:1.65;
  text-rendering:optimizeLegibility;
}

/* ── Shared bits ─────────────────────────────────────────────────── */

.wrap{ max-width:64rem; margin-inline:auto; padding-inline:var(--gutter) }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:var(--gutter); top:-4rem; z-index:10;
  padding:.6rem 1rem; background:var(--bg-lift); color:var(--ink);
  border:1px solid var(--accent-line); border-radius:2px; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:.75rem }

a{ color:var(--ink-soft); text-decoration-color:var(--accent-line); text-underline-offset:.25em }
a:hover{ color:var(--ink); text-decoration-color:var(--accent) }

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Top bar ─────────────────────────────────────────────────────── */

.topbar{
  position:absolute; inset-block-start:0; inset-inline:0; z-index:5;
  padding:clamp(1rem,3vw,1.75rem) var(--gutter);
}
.lang{
  display:flex; gap:.55rem; justify-content:flex-end; align-items:center;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}
.lang a{ text-decoration:none; color:var(--ink-faint) }
.lang a:hover{ color:var(--ink) }
.lang a[aria-current]{ color:var(--accent) }

/* ── Hero ────────────────────────────────────────────────────────── */

.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding-block:clamp(6rem,16vh,10rem) clamp(4rem,10vh,7rem);
  text-align:center;
}
.hero-inner{ width:100%; max-width:44rem }

.wordmark{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,11.5vw,6rem);
  line-height:1.02;
  letter-spacing:.14em;
  text-indent:.14em;            /* optical: offset the trailing letter-space */
  color:var(--ink);
}

.rule{
  width:clamp(3.5rem,10vw,6rem); height:1px; margin:clamp(1.4rem,4vw,2.2rem) auto 0;
  background:linear-gradient(90deg,transparent,var(--accent-line) 18%,var(--accent) 50%,var(--accent-line) 82%,transparent);
}

.hero-title{
  margin:clamp(1.4rem,4vw,2.2rem) 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.45rem,4.6vw,2.35rem);
  line-height:1.28;
  letter-spacing:.005em;
  color:var(--ink);
  text-wrap:balance;
}

.hero-sub{
  margin:clamp(1.1rem,3vw,1.5rem) auto 0;
  max-width:var(--measure);
  font-size:.9375rem;
  line-height:1.75;
  color:var(--ink-mute);
  text-wrap:balance;
}

/* ── Sign-up ─────────────────────────────────────────────────────── */

.signup{ margin:clamp(2.2rem,6vw,3.25rem) auto 0; max-width:30rem; text-align:left }

.signup-row{ display:flex; flex-wrap:wrap; gap:.5rem }

.signup input[type=email]{
  flex:1 1 12rem; min-width:0;
  padding:.8rem .95rem;
  font:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--field);
  border:1px solid var(--hairline);
  border-radius:2px;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.signup input[type=email]::placeholder{ color:var(--ink-faint) }
.signup input[type=email]:hover{ border-color:rgba(46,39,32,.3) }
.signup input[type=email]:focus{ border-color:var(--accent-line); background:rgba(46,39,32,.05) }
.signup input[type=email][aria-invalid=true]{ border-color:#A33B22 }

.signup button{
  flex:0 1 auto;
  padding:.8rem 1.35rem;
  font-family:var(--serif); font-size:1.0625rem; font-weight:400; letter-spacing:.02em;
  color:var(--ink); background:var(--accent-fill);
  border:1px solid var(--accent-fill); border-radius:2px; cursor:pointer;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.signup button:hover{ background:#D6A244; border-color:#D6A244 }
.signup button:active{ transform:translateY(1px) }

.consent{
  display:flex; gap:.6rem; align-items:flex-start;
  margin:.95rem 0 0;
  font-size:.8125rem; line-height:1.5; color:var(--ink-mute);
}
.consent input{
  appearance:none; -webkit-appearance:none;
  position:relative; flex:none; margin:.24rem 0 0; width:1rem; height:1rem;
  background:var(--field); border:1px solid rgba(46,39,32,.3); border-radius:2px;
  cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.consent input:hover{ border-color:rgba(46,39,32,.5) }
.consent input:checked{ background:var(--accent-fill); border-color:var(--accent-fill) }
.consent input:checked::after{
  content:""; position:absolute; left:.3rem; top:.1rem;
  width:.2rem; height:.45rem;
  border:solid var(--ink); border-width:0 1.5px 1.5px 0;
  rotate:42deg;
}
.consent label{ cursor:pointer }
.consent a{ color:var(--ink-mute) }

.signup-note{
  margin:.85rem 0 0;
  font-size:.78125rem; letter-spacing:.02em; color:var(--ink-faint);
}

.signup-status{ margin:.7rem 0 0; font-size:.8125rem; line-height:1.5 }
.signup-status:empty{ margin:0 }
.signup-status[data-tone=note]{ color:var(--accent) }
.signup-status[data-tone=error]{ color:#A33B22 }

/* ── Definition entry ────────────────────────────────────────────── */

.entry{ padding-block:clamp(3rem,9vh,5.5rem) clamp(4rem,13vh,8rem); text-align:center }

.entry-mark{
  width:1px; height:clamp(2.5rem,7vw,4rem); margin:0 auto clamp(2.5rem,7vw,4rem);
  background:linear-gradient(180deg,transparent,var(--accent-line));
}

.entry-body{ margin:0 auto; max-width:38rem }

.entry dt{ display:grid; gap:.55rem }

.headword{
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.85rem,6vw,2.9rem);
  line-height:1.1; letter-spacing:.01em;
  color:var(--ink);
}
.phon{
  display:block;
  font-size:.875rem; letter-spacing:.06em; color:var(--ink-mute);
}
.gram{
  display:block;
  font-size:.8125rem; letter-spacing:.05em; color:var(--ink-faint);
}
.gram i{ font-style:italic }

.entry dd{
  margin:clamp(2rem,5vw,2.75rem) 0 0;
  padding-block:clamp(1.75rem,4.5vw,2.5rem);
  border-block:1px solid var(--hairline);
  font-family:var(--serif);
  font-size:clamp(1.2rem,3.2vw,1.6rem);
  line-height:1.5;
  color:var(--ink);
  text-wrap:balance;
}
.sense{ display:block }
.sense--2{ margin-top:.5em; font-style:italic; color:var(--ink-soft) }

/* ── The line ────────────────────────────────────────────────────── */

.strata{ overflow:hidden; padding-block:clamp(3rem,9vh,5rem) clamp(3rem,9vh,5rem) }

.strata-field{
  position:relative;
  height:clamp(13rem,26vw,17rem);
  --tx:46%;                 /* the threshold */
  --seg:24%;                /* the lived segment */
  --axis:72%;               /* vertical position of the axis */
  --step:2.6rem;            /* distance between layers */
}

.line{ position:absolute; height:1px; background:var(--hairline) }
.line--axis{ left:-12vw; right:-12vw; top:var(--axis); transform-origin:50% 50% }
.line--echo{
  left:-12vw; right:calc(100% - var(--tx));
  transform-origin:100% 50%;   /* the past grows away from the threshold */
}
.line--e1{ top:calc(var(--axis) - var(--step));     background:rgba(46,39,32,.24) }
.line--e2{ top:calc(var(--axis) - var(--step) * 2); background:rgba(46,39,32,.17) }
.line--e3{ top:calc(var(--axis) - var(--step) * 3); background:rgba(46,39,32,.115) }

.line--segment{
  left:var(--tx); width:var(--seg); top:var(--axis);
  background:var(--accent-line);
  box-shadow:0 0 14px rgba(176,124,34,.28);
  transform-origin:0 50%;
}

.dot{
  position:absolute; left:var(--tx); top:var(--axis);
  width:7px; height:7px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--accent-line);
}
.dot::after{
  content:""; position:absolute; inset:-6px;
  border:1px solid rgba(176,124,34,.38); border-radius:50%;
}

.tag{
  position:absolute;
  font-size:.75rem; letter-spacing:.11em; text-transform:lowercase;
  color:var(--ink-faint); white-space:nowrap;
}
.tag--e1{ top:calc(var(--axis) - var(--step)) }
.tag--e2{ top:calc(var(--axis) - var(--step) * 2) }
.tag--e3{ top:calc(var(--axis) - var(--step) * 3) }
.tag--e1,.tag--e2,.tag--e3{ right:calc(100% - var(--tx) + .85rem); margin-top:-1.55rem }
.tag--bio{
  left:calc(var(--tx) + var(--seg) / 2); top:var(--axis);
  margin-top:-1.85rem; transform:translateX(-50%);
  color:var(--accent); letter-spacing:.13em;
}
.tag--birth{
  left:var(--tx); top:var(--axis);
  margin-top:1.15rem; transform:translateX(-50%);
  color:var(--ink-mute);
}

/* ── Motion (only when JS is running) ────────────────────────────── */

.js .reveal{ opacity:0; translate:0 10px; transition:opacity 1s var(--ease), translate 1s var(--ease) }
.js .reveal.is-in{ opacity:1; translate:none }

.js .strata-field .line{ scale:0 1; opacity:0; transition:scale 1.6s var(--ease), opacity 1.2s var(--ease) }
.js .strata-field .dot{ opacity:0; scale:.4; transition:opacity .8s var(--ease) .5s, scale .8s var(--ease) .5s }
.js .strata-field .tag{ opacity:0; translate:0 4px; transition:opacity .9s var(--ease), translate .9s var(--ease) }

.js .is-drawn .line{ scale:1 1; opacity:1 }
.js .is-drawn .line--segment{ transition-delay:.15s }
.js .is-drawn .line--e1{ transition-delay:.25s }
.js .is-drawn .line--e2{ transition-delay:.4s }
.js .is-drawn .line--e3{ transition-delay:.55s }
.js .is-drawn .dot{ opacity:1; scale:1 }
.js .is-drawn .tag{ opacity:1; translate:none; transition-delay:1s }
.js .is-drawn .tag--e1{ transition-delay:1.05s }
.js .is-drawn .tag--e2{ transition-delay:1.15s }
.js .is-drawn .tag--e3{ transition-delay:1.25s }

/* ── Footer ──────────────────────────────────────────────────────── */

.site-foot{
  padding-block:clamp(2.5rem,7vh,4rem) clamp(2.5rem,7vh,3.5rem);
  border-top:1px solid var(--hairline);
  text-align:center;
}
.maxim{
  margin:0;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,3vw,1.4rem); letter-spacing:.04em;
  color:var(--accent);
}
.foot-line{
  display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center;
  margin:1.1rem 0 0;
  font-size:.78125rem; letter-spacing:.04em; color:var(--ink-faint);
}
.foot-line a{ color:var(--ink-faint); text-decoration:none; border-bottom:1px solid transparent }
.foot-line a:hover{ color:var(--ink); border-bottom-color:var(--accent-line) }

/* ── Narrow screens ──────────────────────────────────────────────── */

@media (max-width:44rem){
  .strata-field{ --tx:34%; --seg:44%; --axis:74%; --step:2.15rem; height:13rem }
  .tag{ font-size:.6875rem; letter-spacing:.09em }
  .tag--e1,.tag--e2,.tag--e3{ right:auto; left:var(--gutter); margin-top:-1.4rem }
  .tag--birth{
    left:var(--gutter); right:var(--gutter);
    transform:none; text-align:center; white-space:normal;
  }
  .signup button{ flex:1 1 100% }
}

/* ── Reduced motion, forced colors ───────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal,
  .js .strata-field .line,
  .js .strata-field .dot,
  .js .strata-field .tag{ opacity:1; translate:none; scale:none }
}

@media (forced-colors:active){
  .line,.dot,.rule,.entry-mark{ forced-color-adjust:none; background:CanvasText }
  .consent input{ appearance:auto; -webkit-appearance:auto }
}

/* ── Text pages (privacy) ────────────────────────────────────────── */

.doc{ padding-block:clamp(5rem,14vh,8rem) clamp(3rem,8vh,5rem); max-width:44rem }
.doc-back{
  display:inline-block; margin-bottom:clamp(2rem,5vw,3rem);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none;
}
.doc-back:hover{ color:var(--accent) }
.doc h1{
  margin:0 0 .6rem;
  font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,5.5vw,2.6rem);
  line-height:1.15; color:var(--ink);
}
.doc .doc-lede{ margin:0 0 clamp(2rem,5vw,2.75rem); color:var(--ink-mute); font-size:.9375rem }
.doc h2{
  margin:clamp(2rem,5vw,2.75rem) 0 .5rem;
  font-family:var(--sans); font-weight:600; font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.doc p,.doc li{ margin:0 0 .8rem; font-size:.9375rem; color:var(--ink-soft) }
.doc ul{ margin:0 0 .8rem; padding-left:1.1rem }
.doc li::marker{ color:var(--accent-line) }
.doc .doc-note{
  margin:0 0 clamp(2rem,5vw,2.75rem); padding:1rem 1.15rem;
  border:1px solid var(--hairline); border-left:2px solid var(--accent-line); border-radius:2px;
  background:var(--field); font-size:.875rem; color:var(--ink-soft);
}
.doc .doc-stamp{ margin-top:clamp(2.5rem,6vw,3.5rem); font-size:.78125rem; color:var(--ink-faint) }