@font-face { font-family:"Fell"; src:url(/static/fonts/im-fell-english-latin-400-normal.woff2) format("woff2"); font-style:normal; font-display:swap; }
@font-face { font-family:"Fell"; src:url(/static/fonts/im-fell-english-latin-400-italic.woff2) format("woff2"); font-style:italic; font-display:swap; }
@font-face { font-family:"FellSC"; src:url(/static/fonts/im-fell-english-sc-latin-400-normal.woff2) format("woff2"); font-display:swap; }
/* IM Fell has no ă ș ț (Romanian): borrow EB Garamond for just those letters */
@font-face { font-family:"FellExt"; src:url(/static/fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2"); font-style:normal; unicode-range:U+0100-02AF; font-display:swap; }
@font-face { font-family:"FellExt"; src:url(/static/fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2"); font-style:italic; unicode-range:U+0100-02AF; font-display:swap; }
@font-face { font-family:"FellTitle"; src:url(/static/fonts/im-fell-double-pica-latin-400-normal.woff2) format("woff2"); font-display:swap; }

:root { --paper:#e8d5a8; --paper-hi:#f5ead0; --paper-lo:#d2b57a; --ink:#3b2a1a; --ink-soft:#6a5238; --red:#8b2e1f; --ok:#3f6b3a; --line:#8a6a3a; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; min-height:100%;
  background-color:var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(255,246,218,.65) 0%, rgba(255,246,218,0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(110,70,25,.38) 120%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .26 0 0 0 0 .1 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment:scroll; }
body { margin:0; color:var(--ink); font:19px/1.55 "Fell", "FellExt", Georgia, "Times New Roman", serif; background:transparent; }
main { max-width:560px; margin:0 auto; padding:18px 16px 72px; }
h1 { font:400 2.1rem/1.1 "FellTitle", "Fell", serif; margin:.15em 0 .3em; text-align:center; color:var(--ink); }
h2 { font:400 1.2rem/1.2 "FellSC", "Fell", serif; letter-spacing:.08em; margin:1.8em 0 .5em; color:var(--red); text-align:center; }
h3 { font:400 1.05rem "FellSC", serif; margin:.8em 0 .3em; }
p { margin:.6em 0; }
a { color:var(--red); }
.eyebrow { font:400 .9rem "FellSC", serif; letter-spacing:.14em; color:var(--ink-soft); text-align:center; margin:.6em 0 0; }
.muted { color:var(--ink-soft); font-size:.95rem; font-style:italic; }
.error { color:var(--red); font-style:italic; }
.center { text-align:center; }
.hero { width:130px; display:block; margin:6px auto 0; filter:drop-shadow(0 2px 2px rgba(60,40,10,.3)); }
.rule { display:block; width:200px; height:auto; margin:.4em auto; opacity:.85; }
.plate { display:block; width:100%; max-width:360px; height:auto; margin:.4em auto 0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6em; background:linear-gradient(#a53b29, #7d2417); color:var(--paper-hi); border:1px solid #5a1a10; border-radius:8px; padding:.7em 1.4em; font:400 1.08rem "FellSC", serif; letter-spacing:.07em; text-decoration:none; text-shadow:0 1px 0 rgba(0,0,0,.35); min-height:52px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 0 #4a150d, 0 5px 10px rgba(60,30,10,.32); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .08s, box-shadow .08s, filter .15s; }
.btn:hover { filter:brightness(1.07); }
.btn:active { transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 #4a150d, 0 2px 4px rgba(60,30,10,.3); }
.btn:focus-visible { outline:3px solid rgba(139,46,31,.45); outline-offset:3px; }
.btn.ghost { background:rgba(250,243,224,.55); color:var(--red); border:1.5px solid var(--red); text-shadow:none; box-shadow:0 2px 0 rgba(139,46,31,.35), 0 4px 8px rgba(60,30,10,.12); }
.btn.ghost:active { box-shadow:0 0 0 transparent; }
.btn[disabled], .btn[aria-disabled=true] { opacity:.5; filter:grayscale(.4); pointer-events:none; }
.btn.small { min-height:40px; padding:.4em 1em; font-size:.95rem; letter-spacing:.05em; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #4a150d; }
.btn.ghost.small { box-shadow:none; }
.btn .ico { width:1.35em; height:1.35em; flex:none; }
.cta { text-align:center; margin:.9em 0; }
.cta .btn { display:flex; width:100%; max-width:24rem; margin-left:auto; margin-right:auto; min-height:56px; }
/* photo buttons: the main action on most pages */
.picker { display:flex; flex-direction:column; gap:.75em; align-items:center; margin:.8em 0; }
.picker label { width:100%; max-width:24rem; position:relative; margin:0; font-style:normal; }
.picker label.camera { min-height:68px; font-size:1.25rem; }
.picker label .btn-text { pointer-events:none; }
.picker.busy { opacity:.55; pointer-events:none; }
.pages, .bonuses { list-style:none; padding:0; margin:0; }
.pages li a { display:flex; align-items:center; gap:.8em; padding:.45em .9em .45em .5em; margin:.55em 0; background:rgba(245,234,208,.65); border:1px solid var(--line); outline:1px solid rgba(138,106,58,.45); outline-offset:3px; border-radius:2px; color:var(--ink); text-decoration:none; min-height:56px; font-size:1.1rem; }
.pages .thumb { width:64px; height:40px; flex:none; object-fit:contain; }
.pages .n { font:400 .8rem "FellSC", serif; color:var(--ink-soft); margin-right:.2em; }
.pages .tick { margin-left:auto; font-size:1.3rem; }
.pages li.done a { background:rgba(210,181,122,.55); }
.pages li.done .tick::after { content:"✓"; color:var(--ok); font-weight:bold; }
.progress { text-align:center; font:400 1.1rem "FellSC", serif; letter-spacing:.06em; }
.chip { display:block; text-align:center; margin:.6em auto; font-size:.95rem; font-style:italic; color:var(--ink-soft); }
.chip.ok::before { content:"⚓ "; } .chip.warn { color:var(--red); }
label { display:block; margin:1em 0; font-style:italic; }
input, textarea { width:100%; margin-top:.4em; padding:.65em; border:1px solid var(--line); border-radius:2px; background:rgba(250,243,224,.8); color:var(--ink); font:1.05rem "Fell", serif; }
input[type=file] { background:transparent; border:1px dashed var(--line); }
.log .entry { white-space:pre-line; background:rgba(250,243,224,.7); padding:1.1em 1.2em; border:1px solid var(--line); outline:1px solid rgba(138,106,58,.45); outline-offset:3px; font-style:italic; font-size:1.08rem; }
.vh { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
.preview { margin:.8em 0 0; text-align:center; }
.preview img { max-width:100%; max-height:46dvh; border:8px solid var(--paper-hi); box-shadow:0 4px 12px rgba(60,40,10,.35); transform:rotate(.6deg); }
.preview figcaption { font-style:italic; color:var(--ink-soft); font-size:.95rem; margin-top:.5em; }
.photo { margin:.6em 0 0; text-align:center; }
.photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border:10px solid var(--paper-hi); box-shadow:0 5px 14px rgba(60,40,10,.4); transform:rotate(-.8deg); background:var(--paper-hi); }
.photo figcaption { font-size:.8rem; font-style:italic; color:var(--ink-soft); margin-top:.7em; }
.photo figcaption a { color:var(--ink-soft); }
.fact { margin:1.2em 0 0; padding:.2em 1.1em 1em; background:rgba(210,181,122,.45); border:1px dashed var(--line); }
.fact h3 { text-align:center; color:var(--red); }
.fact p { font-style:italic; }
.margin { font-style:italic; color:var(--ink-soft); font-size:.92rem; transform:rotate(-1deg); margin:.9em .6em; border-top:1px dashed var(--line); padding-top:.4em; }
.vessel { font:400 2.4rem/1 "FellTitle", serif; letter-spacing:.35em; color:var(--red); text-align:center; margin:.6em 0; }
.bonus { background:rgba(245,234,208,.65); border:1px solid var(--line); outline:1px solid rgba(138,106,58,.45); outline-offset:3px; padding:.2em 1em 1em; margin:1.1em 0; }
.bonus.done { background:rgba(210,181,122,.55); }
.cipher { font:400 1.7rem/1.4 "FellTitle", serif; letter-spacing:.2em; text-align:center; background:rgba(250,243,224,.7); border:1px solid var(--line); padding:1em; overflow-wrap:anywhere; white-space:pre-wrap; }
.seal { display:block; width:120px; margin:.4em auto; filter:drop-shadow(0 3px 3px rgba(60,20,10,.35)); }
#toast { position:fixed; left:16px; right:16px; bottom:16px; background:var(--ink); color:var(--paper-hi); padding:.8em 1em; border-radius:3px; text-align:center; box-shadow:0 4px 18px #0006; max-width:560px; margin:0 auto; }
.banner { text-align:center; font:400 1.1rem "FellSC", serif; letter-spacing:.05em; padding:.6em .8em; border:1px solid var(--line); background:rgba(250,243,224,.7); }
.banner.ok { color:var(--ok); border-color:var(--ok); } .banner.warn { color:var(--red); border-color:var(--red); }
.checks { list-style:none; padding:0; }
.checks li { padding:.5em .2em; border-bottom:1px dashed var(--line); }
.checks .s { display:inline-block; width:1.5em; font-weight:bold; }
.checks .ok { color:var(--ok); } .checks .no { color:var(--red); }
.timetable { margin:1.2em 0 0; background:rgba(245,234,208,.65); border:1px solid var(--line); outline:1px solid rgba(138,106,58,.45); outline-offset:3px; padding:.1em 1em .8em; }
.timetable h2 { margin-top:.7em; }
.timetable ul { list-style:none; padding:0; margin:0; }
.timetable li { display:flex; gap:1em; padding:.3em 0; border-bottom:1px dashed var(--line); }
.timetable li:last-child { border-bottom:0; }
.timetable .when { font:400 1.15rem "FellTitle", serif; color:var(--red); min-width:3.4em; }
.trainrow { display:grid; grid-template-columns:1fr; gap:0; padding-bottom:.4em; }
.prologue { margin:1.4em 0 .4em; }
.prologue summary { font:400 1.2rem "FellSC", serif; letter-spacing:.08em; color:var(--red); text-align:center; cursor:pointer; list-style:none; margin-bottom:.6em; }
.prologue summary::-webkit-details-marker { display:none; }
.prologue summary::after { content:" ▾"; }
.prologue:not([open]) summary::after { content:" ▸"; }
.prologue .entry { white-space:pre-line; background:rgba(250,243,224,.7); padding:1.1em 1.2em; border:1px solid var(--line); outline:1px solid rgba(138,106,58,.45); outline-offset:3px; font-style:italic; font-size:1.08rem; }
.prologue .entry::first-letter { font:400 2.6rem/.8 "FellTitle", serif; float:left; margin:.08em .1em 0 0; color:var(--red); }
.countdown { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5em; margin:1em 0 .4em; }
.countdown div { background:rgba(245,234,208,.7); border:1px solid var(--line); outline:1px solid rgba(138,106,58,.45); outline-offset:3px; padding:.5em 0 .35em; text-align:center; }
.countdown b { display:block; font:700 2.1rem/1.1 "Times New Roman", Times, Georgia, serif; color:var(--red); font-variant-numeric:tabular-nums; }
.countdown span { font:400 .72rem "FellSC", serif; letter-spacing:.1em; color:var(--ink-soft); }
/* wrapped story */
#story { height:100dvh; overflow-y:auto; scroll-snap-type:y mandatory; margin:-18px -16px; }
.slide { min-height:100dvh; scroll-snap-align:start; padding:32px 24px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.6em; }
.slide.msg { padding:20px 24px; }
.slide.msg .fitbox { max-width:30em; width:100%; }
.slide.msg h1 { font-size:1.7rem; margin:.1em 0 .3em; }
.slide.msg .seal { width:64px; margin:0 auto; }
.letter { text-align:left; line-height:1.42; }
.slide .shot { max-width:100%; max-height:66dvh; border:12px solid var(--paper-hi); box-shadow:0 6px 18px rgba(60,40,10,.45); transform:rotate(-1.2deg); }
.slide:nth-child(even) .shot { transform:rotate(1.2deg); }
.slide p { max-width:30em; white-space:pre-line; }
.slide canvas, .slide #collage-img { width:min(64vw, 300px); height:auto; border:1px solid var(--line); box-shadow:0 4px 14px rgba(60,40,10,.4); -webkit-touch-callout:default; }
.slide #collage-img[hidden], .slide canvas[hidden] { display:none; }
.stats dl { display:grid; gap:.2em; text-align:center; }
.stats dt { color:var(--ink-soft); font-style:italic; margin-top:1em; }
.stats dd { margin:0; font:400 1.9rem "FellTitle", serif; color:var(--red); }
/* admin */
.row { background:rgba(245,234,208,.65); border:1px solid var(--line); padding:.2em 1em 1em; margin:.9em 0; }
.row.pending { outline:2px solid var(--red); }
.row.rejected { opacity:.5; }
.adminnav { display:flex; flex-wrap:wrap; gap:.4em 1.1em; align-items:center; justify-content:center; margin:.2em 0 .8em; font:400 1.05rem "FellSC", serif; letter-spacing:.06em; }
.adminnav a { text-decoration:none; padding:.2em .1em; border-bottom:2px solid transparent; }
.adminnav a.on { border-bottom-color:var(--red); }
.adminnav form { margin:0; }
.row textarea { min-height:5em; }
code { font-size:.9em; background:rgba(250,243,224,.7); padding:0 .3em; }
.row .thumb-img { max-width:100%; max-height:240px; }