/* Layout concept: a carved white-marble tablet set into a red-marble hall.
   Sections alternate red field / white field; folk wycinanki rosettes float at
   different depths for parallax; a Łowicz pasiak stripe band divides chapters.
   Single committed look (not theme-switched): every colour is set explicitly. */
:root{
  --oxblood:#4d0b10;      /* deep red marble field */
  --carmine:#a3171f;      /* folk red, wycinanki */
  --rose-vein:#e9c6b4;    /* pale vein in red marble */
  --marble:#f7f4ef;       /* polished white marble */
  --marble-shade:#e7e1d8; /* white marble shadow */
  --ink:#2b1114;          /* carved text on white */
  --ink-soft:#6b5357;
  --gilt:#b48a4a;         /* gilded hairline */
  --gilt-hi:#e3c78f;
  --forest:#1d5c41; --amber:#e48a1d; --cobalt:#23418f; --sun:#f2c53d; --plum:#7a1f5c; /* pasiak */
  --f-display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --f-label:"Cinzel","Trajan Pro",Georgia,serif;
  --f-ui:"Figtree","Segoe UI",system-ui,sans-serif;
  --step--1:clamp(.82rem,.78rem + .2vw,.92rem);
  --step-0:clamp(1rem,.96rem + .25vw,1.12rem);
  --step-1:clamp(1.25rem,1.1rem + .6vw,1.55rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3:clamp(2.1rem,1.5rem + 3vw,3.8rem);
  --step-4:clamp(3rem,1.6rem + 7vw,7.6rem);
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--oxblood);color:var(--ink);font-family:var(--f-ui);font-size:var(--step-0);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--oxblood)}
img,svg,canvas{max-width:100%}
h1,h2,h3{font-family:var(--f-display);font-weight:500;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}

/* marble surfaces: CSS fallback first, generated texture replaces it */
.m-red{background-color:var(--oxblood);background-image:radial-gradient(120% 80% at 20% 10%,#6e1219 0,transparent 60%),radial-gradient(90% 70% at 90% 80%,#3a080c 0,transparent 70%);background-size:cover;background-position:center}
.m-white{background-color:var(--marble);background-image:radial-gradient(120% 90% at 10% 0%,#fffdf9 0,transparent 55%),radial-gradient(100% 80% at 100% 100%,var(--marble-shade) 0,transparent 70%);background-size:cover;background-position:center}
.has-tex .m-red{background-image:var(--tex-red)}
.has-tex .m-white{background-image:var(--tex-white)}

.label{font-family:var(--f-label);font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;font-weight:600}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background .4s,box-shadow .4s}
.nav.solid{background:rgba(52,7,11,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(227,199,143,.25)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--marble)}
.seal{width:42px;height:42px;flex:none}
.brand b{font-family:var(--f-label);font-weight:600;letter-spacing:.16em;font-size:.95rem}
.brand small{display:block;font-family:var(--f-ui);font-size:.68rem;letter-spacing:.28em;color:var(--gilt-hi);text-transform:uppercase;opacity:.85}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;padding:8px 12px;color:var(--marble);text-decoration:none;font-size:.86rem;letter-spacing:.06em;border-radius:999px;transition:background .25s,color .25s}
.nav ul a:hover{background:rgba(247,244,239,.1);color:var(--gilt-hi)}
.nav .cta{border:1px solid var(--gilt);color:var(--gilt-hi)}
@media (max-width:820px){.nav ul li:not(:last-child){display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;margin-top:-70px;padding-top:70px;isolation:isolate}
.hero .layer{position:absolute;inset:-12% 0;will-change:transform;pointer-events:none}
.hero .bg{z-index:-3}
.hero .ghosts{z-index:-2}
.ghost{position:absolute;opacity:.16;mix-blend-mode:screen}
.hero .front{z-index:2;inset:0}
.hero .inner{position:relative;z-index:1;padding-block:clamp(72px,11vw,150px) clamp(84px,10vw,140px);display:grid;justify-items:center}
.tablet{position:relative;width:min(880px,100%);text-align:center;padding:clamp(36px,6vw,72px) clamp(20px,5vw,64px);border-radius:4px;
  box-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(0,0,0,.06) inset,0 40px 80px -30px rgba(0,0,0,.65),0 10px 24px -8px rgba(0,0,0,.45);
  will-change:transform}
.tablet::before{content:"";position:absolute;inset:12px;border:1px solid var(--gilt);border-radius:2px;pointer-events:none;box-shadow:0 0 0 4px rgba(180,138,74,.12)}
.tablet::after{content:"";position:absolute;inset:0;border-radius:4px;background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.25) 100%);pointer-events:none}
.tablet .label{color:var(--carmine)}
.carved{font-family:var(--f-display);font-weight:600;font-size:var(--step-4);letter-spacing:.02em;color:var(--ink);margin-block:.12em .05em;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(0,0,0,.18)}
.carved span{color:var(--carmine)}
.say{font-family:var(--f-display);font-style:italic;font-size:var(--step-1);color:var(--ink-soft)}
.say code{font-family:var(--f-ui);font-style:normal;font-size:.72em;letter-spacing:.04em;background:var(--marble-shade);padding:2px 8px;border-radius:999px;color:var(--ink)}
.thesis{max-width:34ch;margin:22px auto 0;font-family:var(--f-display);font-size:var(--step-2);line-height:1.15;color:var(--ink)}
.thesis em{color:var(--carmine)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 .9rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.btn-red{background:var(--carmine);color:var(--marble);box-shadow:0 10px 24px -10px rgba(163,23,31,.8)}
.btn-red:hover{transform:translateY(-2px);background:#b81c25}
.btn-line{border-color:var(--gilt);color:var(--ink);background:transparent}
.btn-line:hover{background:rgba(180,138,74,.1)}
.korale{display:flex;gap:6px;justify-content:center;margin-top:28px}
.korale i{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7b6b,#b3141b 55%,#5d0609);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.korale i:nth-child(odd){width:12px;height:12px}

/* ---------- pasiak band ---------- */
.pasiak{height:22px;background:repeating-linear-gradient(90deg,var(--carmine) 0 28px,var(--sun) 28px 34px,var(--forest) 34px 52px,var(--marble) 52px 55px,var(--cobalt) 55px 70px,var(--amber) 70px 82px,var(--plum) 82px 92px,var(--sun) 92px 96px);box-shadow:0 1px 0 var(--gilt) inset,0 -1px 0 var(--gilt) inset}
.pasiak.thin{height:8px}

/* ---------- chapters ---------- */
.chapter{position:relative;overflow:hidden;padding-block:clamp(72px,10vw,140px)}
.chapter .drift{position:absolute;pointer-events:none;will-change:transform;opacity:.9}
.ch-head{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.ch-head .label{color:var(--carmine)}
.ch-head h2{font-size:var(--step-3)}
.ch-head p{font-size:var(--step-1);font-family:var(--f-display);color:var(--ink-soft);line-height:1.35}
.on-red .ch-head h2,.on-red .ch-head p{color:var(--marble)}
.on-red .ch-head p{color:var(--rose-vein)}
.on-red .ch-head .label{color:var(--gilt-hi)}

.prose{max-width:64ch;display:grid;gap:1.1em}
.prose p{color:var(--ink)}
.prose strong{font-weight:600}
.pl{font-family:var(--f-display);font-style:italic;font-size:1.14em;color:var(--carmine)}

/* the word */
.word-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:860px){.word-grid{grid-template-columns:1fr}}
.syllables{display:flex;flex-wrap:wrap;gap:10px;margin-block:6px 4px}
.syl{display:grid;justify-items:center;gap:2px;padding:14px 18px 12px;border:1px solid var(--marble-shade);background:rgba(255,255,255,.6);border-radius:3px;min-width:84px}
.syl b{font-family:var(--f-display);font-size:2rem;font-weight:600;line-height:1}
.syl.stress{border-color:var(--carmine);background:rgba(163,23,31,.05)}
.syl.stress b{color:var(--carmine)}
.syl span{font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft)}
.ipa{font-size:.9rem;color:var(--ink-soft)}
.lexicon{display:grid;gap:0;border-top:1px solid var(--gilt)}
.lex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--marble-shade);align-items:baseline}
.lex dt{font-family:var(--f-display);font-size:1.4rem;font-weight:600;color:var(--ink)}
.lex dd{margin:0;color:var(--ink-soft);font-size:.95rem}
.lexicon caption,.lex-cap{font-family:var(--f-label);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gilt);padding-block:10px}

/* supper chapter */
.supper-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,32px)}
@media (max-width:860px){.supper-grid{grid-template-columns:1fr}}
.slab{position:relative;padding:clamp(26px,4vw,44px);border-radius:3px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 1px 0 #fff inset;display:grid;gap:14px;align-content:start}
.slab::before{content:"";position:absolute;inset:9px;border:1px solid rgba(180,138,74,.6);pointer-events:none}
.slab h3{font-size:var(--step-2)}
.slab .label{color:var(--carmine)}
.slab p{color:var(--ink)}
.slab.wide{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
@media (max-width:860px){.slab.wide{grid-template-columns:1fr}}
.customs{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.customs li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:.97rem}
.customs svg{width:26px;height:26px}
.quote{font-family:var(--f-display);font-size:var(--step-2);line-height:1.2;font-style:italic;color:var(--ink)}
.quote small{display:block;margin-top:12px;font:600 .74rem/1 var(--f-label);letter-spacing:.2em;font-style:normal;color:var(--gilt);text-transform:uppercase}

/* name chapter */
.name-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:860px){.name-grid{grid-template-columns:1fr}}
.spellings{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.spellings span{font-family:var(--f-display);font-size:1.15rem;padding:6px 14px;border:1px solid var(--marble-shade);border-radius:999px;background:rgba(255,255,255,.55)}
.compass{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto}
.compass canvas{width:100%;height:100%;display:block}

/* daily */
.daily-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(20px,3vw,32px);align-items:start}
@media (max-width:920px){.daily-grid{grid-template-columns:1fr}}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--marble-shade)}
.date-chip{font:500 .8rem/1 var(--f-ui);letter-spacing:.06em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.fact-year{font-family:var(--f-display);font-size:clamp(3rem,2rem + 4vw,5.4rem);font-weight:600;line-height:.9;color:var(--carmine);font-variant-numeric:lining-nums}
.fact-cat{display:inline-block;font:600 .7rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--marble)}
.fact h3{font-size:var(--step-2)}
.recipe h3{font-size:var(--step-2)}
.recipe .en{font-family:var(--f-display);font-style:italic;font-size:var(--step-1);color:var(--ink-soft);margin-top:-6px}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.85rem;color:var(--ink-soft)}
.meta b{color:var(--ink);font-weight:600}
.rec-cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px}
@media (max-width:620px){.rec-cols{grid-template-columns:1fr}}
.rec-cols h4{font:600 .74rem/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gilt);margin:0 0 10px}
.ing{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:.92rem}
.ing li{padding-left:16px;position:relative}
.ing li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--carmine)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px;font-size:.92rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.steps li::before{content:counter(s);font-family:var(--f-display);font-weight:600;font-size:1.3rem;line-height:1.1;color:var(--carmine)}
.countdown{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px;color:var(--rose-vein);font-size:.9rem;text-align:center}
.countdown b{font-family:var(--f-display);font-size:1.6rem;color:var(--marble);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.archive-nav{display:flex;gap:8px}
.archive-nav button{font:500 .78rem/1 var(--f-ui);border:1px solid var(--marble-shade);background:transparent;padding:8px 12px;border-radius:999px;cursor:pointer;color:var(--ink)}
.archive-nav button:hover{border-color:var(--gilt)}
.archive-nav button[disabled]{opacity:.35;cursor:default}

/* join */
.join-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:920px){.join-grid{grid-template-columns:1fr}}
.pledges{display:grid;gap:18px;margin-top:8px}
.pledge{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;color:var(--marble)}
.pledge svg{width:44px;height:44px}
.pledge b{display:block;font-family:var(--f-display);font-size:1.35rem;font-weight:600}
.pledge span{color:var(--rose-vein);font-size:.95rem}
form.join{display:grid;gap:16px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
.field label{font:600 .74rem/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{font:400 1rem/1.4 var(--f-ui);color:var(--ink);background:rgba(255,255,255,.75);border:1px solid #d6cdc0;border-radius:4px;padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--carmine);box-shadow:0 0 0 3px rgba(163,23,31,.15)}
.field .hint{font-size:.8rem;color:var(--ink-soft)}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:.9rem;color:var(--ink);align-items:start}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--carmine)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:.95rem;padding:14px 16px;border-radius:4px;display:none}
.status.show{display:block}
.status.ok{background:#eaf3ec;color:#1d4b33;border:1px solid #b9d8c3}
.status.err{background:#fbecec;color:#7a1218;border:1px solid #edc2c4}
.status.info{background:#f5efe3;color:#5a4320;border:1px solid #e2d2b0}
.counter-line{display:flex;align-items:baseline;gap:10px;color:var(--rose-vein);margin-top:28px;font-size:.92rem}
.counter-line b{font-family:var(--f-display);font-size:2.4rem;color:var(--marble);font-variant-numeric:tabular-nums}

/* footer */
footer{background:#2c0609;color:var(--rose-vein);padding-block:48px;font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
footer .brand b{color:var(--marble)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--rose-vein);text-decoration:none}
footer a:hover{color:var(--gilt-hi)}

/* reveal: visible at rest, gentle lift when JS confirms motion is OK */
.rise{transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s}
.motion .rise.pending{transform:translateY(22px);opacity:.15}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion .rise.pending{transform:none;opacity:1}}

/* decorative layers always sit behind the copy */
.chapter .drift{z-index:0}
.chapter > .wrap,.chapter > .m-red > .wrap{position:relative;z-index:1}
/* colored rosette medallion beside a chapter heading, never over text */
.head-row{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,64px);margin-bottom:clamp(36px,5vw,60px)}
.head-row .ch-head{margin-bottom:0;min-width:0}
.medallion{flex:none;width:clamp(180px,22vw,280px);will-change:transform;filter:drop-shadow(0 18px 28px rgba(77,11,16,.25))}
@media (max-width:860px){.head-row{flex-direction:column;align-items:flex-start}.medallion{width:160px;align-self:center;order:-1}}