/* Twenty-Five Evenings v2 — "Evening Window" on the A8 Deep Teal · Editorial kit.
   One idea carries the design: every evening is a lit window on a winter night.
   The calendar is a wall of windows, each evening opens behind its window,
   and the book is printed on warm paper. Everything else stays quiet. */

@font-face{font-family:"Fraunces";src:url(fonts/fraunces-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-600.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta-700.woff2) format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/spacemono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --navy:#0E1B2E; --navy-2:#16263D; --navy-3:#24354F; --teal-deep:#0A7A6E; --teal:#0FB5A1; --aqua:#C7EFE9; --amber:#EBA23C; --amber-soft:#F6D9A6;
  --paper:#FBF8F2; --mist:#F5F7FB; --n500:#56667F; --n400:#8593AA; --n300:#B4BFD0; --n200:#DCE2EC;

  --bg:var(--mist); --surface:#FFFFFF; --surface-2:#EBEFF5; --paper-s:var(--paper);
  --fg:var(--navy); --muted:#4F5F78; --line:#D5DCE7; --line-strong:#B4BFD0;
  --action:var(--teal-deep); --action-fg:#FFFFFF; --link:#086A60; --focus:#0A7A6E;
  --night:var(--navy); --night-fg:#F5F7FB; --night-muted:#B4BFD0;
  --amber-ink:#8A5A12; --danger:#A3402B;
  --shadow:0 1px 2px rgba(14,27,46,.06), 0 10px 28px -16px rgba(14,27,46,.28);

  --f-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-label:"Space Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-body:17px; --fs-small:15px; --fs-tiny:13px; --btn-h:48px; --tap:44px;
  --r:16px; --r-sm:10px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --gutter:max(16px, var(--sal)); --gutter-r:max(16px, var(--sar));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A1424; --surface:#13223A; --surface-2:#1B2C45; --paper-s:#16263D;
  --fg:#EEF2F8; --muted:#A9B5C8; --line:#26385424; --line:#2A3B56; --line-strong:#3A4B66;
  --action:var(--teal); --action-fg:var(--navy); --link:#6FDCCB; --focus:#6FDCCB;
  --night:#060F1C; --amber-ink:var(--amber-soft); --danger:#F0907A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 32px -18px rgba(0,0,0,.7);
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0A1424; --surface:#13223A; --surface-2:#1B2C45; --paper-s:#16263D;
  --fg:#EEF2F8; --muted:#A9B5C8; --line:#2A3B56; --line-strong:#3A4B66;
  --action:var(--teal); --action-fg:var(--navy); --link:#6FDCCB; --focus:#6FDCCB;
  --night:#060F1C; --amber-ink:var(--amber-soft); --danger:#F0907A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 32px -18px rgba(0,0,0,.7);
  color-scheme:dark; }

/* grandparent mode: larger text, larger targets */
:root.big{ --fs-body:20px; --fs-small:18px; --fs-tiny:16px; --btn-h:58px; --tap:56px; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
html,body{margin:0}
body{background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; min-height:100dvh}
img{max-width:100%; display:block}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display); font-weight:400; margin:0; text-wrap:balance; letter-spacing:-.012em; line-height:1.15}
p{margin:0}
a{color:var(--link)}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:8px}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--surface); padding:10px 14px; border-radius:8px}
.skip:focus{left:12px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:1120px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}
.col{max-width:680px; margin:0 auto}
.lbl{font-family:var(--f-label); font-size:12.5px; letter-spacing:.02em; color:var(--muted)}
:root.big .lbl{font-size:15px}
.muted{color:var(--muted)}
.small{font-size:var(--fs-small)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--btn-h); padding:0 20px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--fg); font-weight:600; font-size:var(--fs-small); cursor:pointer; text-decoration:none; line-height:1.2; text-align:center; -webkit-tap-highlight-color:transparent; transition:background-color .15s, border-color .15s}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn svg{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
:root.big .btn svg{width:24px; height:24px}
.btn.primary{background:var(--action); border-color:var(--action); color:var(--action-fg)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.glow{background:var(--amber); border-color:var(--amber); color:var(--navy)}
.btn.quiet{background:transparent; border-color:transparent; color:var(--link); padding:0 12px}
.btn.quiet:hover{background:var(--surface-2)}
.btn.danger{color:var(--danger); background:transparent; border-color:transparent}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.rec{background:var(--danger); border-color:var(--danger); color:#fff}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.row.end{justify-content:flex-end}

/* ---------- top bar & tab bar ---------- */
.top{position:sticky; top:0; z-index:30; background:var(--night); color:var(--night-fg); padding-top:var(--sat)}
.top-in{display:flex; align-items:center; gap:16px; min-height:56px; max-width:1120px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}
.brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; min-height:var(--tap)}
.brand .mark{width:26px; height:26px}
.brand-name{font-family:var(--f-display); font-size:19px; font-weight:400; letter-spacing:-.01em; white-space:nowrap}
.topnav{margin-left:auto; display:flex; gap:4px}
.topnav a{color:var(--night-muted); text-decoration:none; font-weight:600; font-size:15px; padding:9px 14px; border-radius:999px}
.topnav a:hover{color:#fff}
.topnav a[aria-current="page"]{background:var(--aqua); color:var(--navy)}
.tabbar{display:none}
@media (max-width:719px){
  .topnav{display:none}
  .top-in{justify-content:center; min-height:50px}
  .tabbar{display:grid; grid-template-columns:repeat(3,1fr); position:fixed; z-index:30; left:0; right:0; bottom:0; background:var(--night); padding:6px max(8px,var(--sal)) calc(6px + var(--sab)) max(8px,var(--sar)); border-top:1px solid rgba(255,255,255,.08)}
  .tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:var(--tap); color:var(--night-muted); text-decoration:none; font-size:12.5px; font-weight:600; border-radius:12px}
  :root.big .tabbar a{font-size:15px; min-height:60px}
  .tabbar svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round}
  .tabbar a[aria-current="page"]{color:var(--amber-soft)}
  main{padding-bottom:calc(84px + var(--sab))}
  :root.big main{padding-bottom:calc(100px + var(--sab))}
}

/* ---------- home: hero ---------- */
.hero{position:relative; background:var(--navy); color:var(--night-fg); overflow:hidden; isolation:isolate}
.hero-art{position:absolute; inset:0; z-index:-1; background:url(images/hero-wide.webp) right bottom / cover no-repeat}
.hero-art::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,27,46,.92) 0%, rgba(14,27,46,.65) 38%, rgba(14,27,46,0) 62%)}
.hero-in{min-height:min(52vw, 470px); display:flex; flex-direction:column; justify-content:center; padding-block:44px 52px; max-width:560px}
.hero .lbl{color:var(--amber-soft)}
.hero h1{font-size:clamp(34px, 4.6vw, 54px); font-weight:300; line-height:1.06; margin-top:10px}
.hero .lede{margin-top:14px; color:var(--night-muted); max-width:42ch}
.hero .row{margin-top:24px}
.hero .progress{margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; color:var(--night-muted); font-size:var(--fs-small)}
.dots{display:flex; gap:3px; flex-wrap:nowrap}
.dots i{width:6px; height:6px; border-radius:2px; background:rgba(255,255,255,.18)}
.dots i.on{background:var(--amber); box-shadow:0 0 6px rgba(235,162,60,.7)}
@media (max-width:719px){
  .hero-art{position:relative; inset:auto; height:220px; background-image:url(images/hero-phone.webp); background-position:center 70%; order:2; z-index:0}
  .hero-art::after{background:linear-gradient(180deg, var(--navy) 0%, rgba(14,27,46,0) 45%)}
  .hero{display:flex; flex-direction:column}
  .hero-in{min-height:0; padding-block:26px 0; max-width:none}
  .hero h1{font-size:clamp(30px, 8.6vw, 40px)}
}

/* notices under the hero */
.notices{display:grid; gap:12px; margin-top:20px}
.notice{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:var(--r-sm); padding:14px 16px}
.notice p{flex:1 1 240px; font-size:var(--fs-small)}
.notice.teal{border-left-color:var(--teal)}

/* ---------- home: the window wall ---------- */
.wall{padding-block:28px 40px}
.wall-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; margin-bottom:16px}
.wall-head h2{font-size:clamp(24px, 3.4vw, 30px)}
.grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px 10px}
@media (min-width:600px){ .grid{grid-template-columns:repeat(6, minmax(0,1fr)); gap:20px 16px} }
@media (min-width:1000px){ .grid{grid-template-columns:repeat(8, minmax(0,1fr)); gap:22px 18px} }
:root.big .grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 14px}
@media (min-width:720px){ :root.big .grid{grid-template-columns:repeat(4, minmax(0,1fr))} }
.win{position:relative; display:flex; flex-direction:column; gap:6px; background:none; border:0; padding:0; text-align:left; cursor:pointer; color:var(--fg); text-decoration:none; min-width:0; -webkit-tap-highlight-color:transparent}
.pane{position:relative; aspect-ratio:4/5; border-radius:48% 48% 8px 8px / 30% 30% 8px 8px; overflow:hidden; background:var(--navy-2); box-shadow:inset 0 0 0 3px #3a2a1a, 0 1px 0 rgba(14,27,46,.08); transition:transform .2s ease}
.pane::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 3px #4a3622, inset 0 0 0 5px rgba(255,255,255,.06); pointer-events:none}
.win:hover .pane{transform:translateY(-2px)}
.pane img{width:100%; height:100%; object-fit:cover}
/* closed shutters */
.shut{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr}
.shut i{background:linear-gradient(180deg,#1E3150,#15253D); border-right:1px solid rgba(0,0,0,.35); box-shadow:inset 0 0 0 4px rgba(255,255,255,.03)}
.shut i:last-child{border-right:0; border-left:1px solid rgba(255,255,255,.05)}
.shut i::before{content:""; display:block; height:100%; background:repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 2px, transparent 2px 9px)}
.date{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#E6ECF5; text-align:center; pointer-events:none}
.date b{font-family:var(--f-display); font-weight:300; font-size:clamp(24px, 6.4vw, 38px); line-height:1}
.date small{font-family:var(--f-label); font-size:11px; color:var(--n300); margin-top:4px}
:root.big .date small{font-size:13px}
.date svg{width:14px; height:14px; margin-top:6px; fill:none; stroke:var(--amber-soft); stroke-width:2}
.num{position:absolute; left:6px; bottom:6px; min-width:26px; height:26px; padding:0 7px; border-radius:999px; background:rgba(251,248,242,.94); color:var(--navy); font-family:var(--f-display); font-size:15px; display:grid; place-items:center; line-height:1}
.mark-ans{position:absolute; right:6px; top:auto; bottom:6px; height:26px; min-width:26px; padding:0 7px; border-radius:999px; background:var(--amber); color:var(--navy); font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:3px; justify-content:center; box-shadow:0 0 0 2px rgba(14,27,46,.35)}
.mark-ans svg{width:11px; height:11px; fill:currentColor}
:root.big .num, :root.big .mark-ans{height:32px; min-width:32px; font-size:16px}
.win.tonight .pane{box-shadow:0 0 0 3px var(--amber), 0 0 22px 2px rgba(235,162,60,.55)}
.win-cap{font-size:var(--fs-tiny); line-height:1.3; color:var(--muted); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.6em}
.win.tonight .win-cap{color:var(--fg); font-weight:600}
@media (max-width:599px){ :root:not(.big) .win-cap{display:none} }
.win.locked .pane{opacity:.82}
/* Christmas Day: one wide double window */
.win.xmas{grid-column:1 / -1; margin-top:6px}
.win.xmas .pane{aspect-ratio:auto; height:clamp(150px, 30vw, 230px); border-radius:120px 120px 10px 10px / 70px 70px 10px 10px}
.win.xmas .pane img{object-position:center 60%}
.win.xmas .xm{position:absolute; inset:auto 0 0 0; padding:40px 18px 16px; background:linear-gradient(180deg, rgba(14,27,46,0), rgba(14,27,46,.85)); color:#F5F7FB; display:flex; justify-content:space-between; align-items:flex-end; gap:12px}
.win.xmas .xm h3{font-size:clamp(22px, 4vw, 30px); font-weight:300}
.win.xmas .xm p{font-size:var(--fs-tiny); color:var(--n300)}
.win.xmas .num, .win.xmas .mark-ans{bottom:auto; top:12px}
.win.xmas .num{left:auto; right:12px}
.win.xmas .mark-ans{right:auto; left:12px}
.wall-foot{margin-top:18px; font-size:var(--fs-small); color:var(--muted)}

/* ---------- welcome ---------- */
.welcome .hero-in{max-width:600px}
.steps{display:grid; gap:14px; margin-top:28px}
@media (min-width:860px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
.step .n{font-family:var(--f-display); font-size:28px; font-weight:300; color:var(--amber-ink); line-height:1}
.step h3{font-size:21px; margin-top:8px}
.step p{margin-top:6px; color:var(--muted); font-size:var(--fs-small)}
.welcome-form{margin-top:26px; display:grid; gap:18px; max-width:560px}

/* ---------- fields ---------- */
.field{display:grid; gap:7px}
.field > label, .field > .flabel{font-weight:600; font-size:var(--fs-small)}
.field .hint{font-size:var(--fs-tiny); color:var(--muted)}
input[type=text], input[type=time], textarea, select{width:100%; border:1.5px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); padding:12px 14px; font-size:max(16px, var(--fs-body)); min-height:var(--btn-h)}
textarea{min-height:150px; resize:vertical; line-height:1.55; font-family:var(--f-display); font-size:max(17px, var(--fs-body))}
input:focus, textarea:focus, select:focus{outline:3px solid var(--focus); outline-offset:0; border-color:transparent}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:var(--tap); padding:0 16px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--surface); font-weight:600; font-size:var(--fs-tiny); cursor:pointer}
:root.big .chip{font-size:17px}
.chip[aria-pressed="true"]{background:var(--aqua); border-color:var(--teal-deep); color:var(--navy)}
.seg{display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--line-strong); border-radius:999px; padding:3px; background:var(--surface-2); gap:2px}
.seg button{border:0; background:transparent; min-height:var(--tap); padding:0 16px; border-radius:999px; font-weight:600; font-size:var(--fs-small); color:var(--muted); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--fg); box-shadow:var(--shadow)}
.switch{display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; min-height:var(--tap)}
.switch.inline{justify-content:flex-start; gap:12px}
:root.big .switch .track{width:60px; height:36px}
:root.big .switch .track::after{width:30px; height:30px}
:root.big .switch input:checked + .track::after{transform:translateX(24px)}
.switch .txt{display:grid; gap:2px}
.switch .txt b{font-weight:600}
.switch .txt span{font-size:var(--fs-tiny); color:var(--muted)}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch .track{width:50px; height:30px; border-radius:999px; background:var(--line-strong); position:relative; flex:none; transition:background .15s}
.switch .track::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .track{background:var(--teal-deep)}
.switch input:checked + .track::after{transform:translateX(20px)}
.switch input:focus-visible + .track{outline:3px solid var(--focus); outline-offset:2px}

/* ---------- evening ---------- */
.ev{padding-block:14px 48px}
.ev-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px}
.ev-bar .lbl{text-align:center; white-space:nowrap}
.ev-bar .btn{min-height:var(--tap)}
.ev-layout{display:grid; gap:22px}
@media (min-width:900px){ .ev-layout{grid-template-columns:minmax(0, 400px) minmax(0,1fr); gap:44px; align-items:start} .ev-art{position:sticky; top:84px} }
.ev-art{position:relative}
.frame{position:relative; border-radius:180px 180px 14px 14px / 120px 120px 14px 14px; overflow:hidden; background:var(--navy-2); box-shadow:inset 0 0 0 4px #4a3622, var(--shadow); aspect-ratio:1}
.frame img{width:100%; height:100%; object-fit:cover}
@media (max-width:899px){ .frame{aspect-ratio:16/11; border-radius:140px 140px 12px 12px / 70px 70px 12px 12px} .frame img{object-position:center 55%} }
.frame.fallback, .pane.fallback{background:radial-gradient(60% 50% at 50% 62%, rgba(235,162,60,.75), rgba(235,162,60,0) 70%), linear-gradient(180deg,#1E3150,#0E1B2E)}
.frame.fallback::before, .pane.fallback::before{content:""; position:absolute; left:50%; top:16%; bottom:12%; width:2px; background:#4a3622; transform:translateX(-50%)}
.frame.fallback::after, .pane.fallback::after{content:""; position:absolute; left:12%; right:12%; top:50%; height:2px; background:#4a3622}
.ev-q{display:grid; gap:12px}
.ev-q .theme{font-family:var(--f-display); font-style:italic; color:var(--amber-ink); font-size:clamp(18px, 2.4vw, 21px)}
.ev-q h1{font-size:clamp(27px, 3.6vw, 38px); font-weight:400; line-height:1.2}
:root.big .ev-q h1{font-size:clamp(30px, 4.2vw, 42px)}
.ev-tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.ev-tools .btn{min-height:calc(var(--btn-h) - 6px); padding:6px 14px; font-size:var(--fs-tiny); border-width:1px}
@media (max-width:599px){ .ev-tools{display:grid; grid-template-columns:1fr 1fr} .ev-tools .btn{justify-content:flex-start; text-align:left; border-radius:14px; padding:8px 12px} :root.big .ev-tools{grid-template-columns:1fr} }
:root.big .ev-tools .btn{min-height:var(--btn-h); font-size:17px}
.alt-note{font-size:var(--fs-tiny); color:var(--muted)}
.alt-row{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.alt-row .btn{min-height:var(--tap); padding:6px 14px; font-size:var(--fs-tiny); border-width:1px}
.kids{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; display:grid; gap:6px}
.kids .k{font-family:var(--f-display); font-size:clamp(19px, 2.4vw, 22px); line-height:1.35}
.kids p.small{color:var(--muted)}
.faith{border-left:3px solid var(--amber); padding:4px 0 4px 16px; display:grid; gap:8px}
.faith blockquote{margin:0; font-family:var(--f-display); font-style:italic; font-size:clamp(18px, 2.2vw, 20px); line-height:1.45}
.faith cite{font-style:normal; font-family:var(--f-label); font-size:12.5px; color:var(--muted)}
.faith .prayer{font-size:var(--fs-small); color:var(--muted)}
.memory{background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--r); padding:16px 18px; display:grid; gap:10px}

.answers{display:grid; gap:14px; margin-top:8px}
.ans{background:var(--paper-s); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; display:grid; gap:10px}
.ans .who{font-weight:700; font-size:var(--fs-small); color:var(--link)}
.ans .said{font-size:var(--fs-tiny); color:var(--muted); font-style:italic}
.ans .text{font-family:var(--f-display); font-size:max(18px, var(--fs-body)); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere}
.ans .media{display:flex; flex-wrap:wrap; gap:10px}
.ans .media img{width:132px; height:132px; object-fit:cover; border-radius:var(--r-sm); background:var(--surface-2)}
:root.big .ans .media img{width:160px; height:160px}
.ans .acts{display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; margin-right:-8px}
.ans .acts .btn{min-height:var(--tap); font-size:var(--fs-tiny); padding:0 10px}
.play{display:inline-flex; align-items:center; gap:10px}
.empty-ans{color:var(--muted); font-size:var(--fs-small)}

.form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; gap:16px; box-shadow:var(--shadow)}
.form h2{font-size:23px}
.slots{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px}
.slot{position:relative; border:1.5px dashed var(--line-strong); border-radius:var(--r-sm); min-height:var(--btn-h); display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 12px; font-weight:600; font-size:var(--fs-small); cursor:pointer; background:transparent; text-align:center}
.slot input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.slot:focus-within{outline:3px solid var(--focus); outline-offset:2px}
.slot svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.slot.has{border-style:solid; padding:6px; justify-content:flex-start}
.slot.has img{width:56px; height:56px; object-fit:cover; border-radius:8px}
.recorder{border:1.5px solid var(--line-strong); border-radius:var(--r-sm); padding:12px; display:grid; gap:10px}
.recorder .meter{height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.recorder .meter i{display:block; height:100%; width:0; background:var(--danger); transition:width .25s linear}
.recorder .status{font-size:var(--fs-tiny); color:var(--muted)}
.recorder .status.err{color:var(--danger)}
.after-save{display:grid; gap:12px; justify-items:start}

/* ---------- past books ---------- */
.past{padding-block:8px 40px}
.past h2{font-size:clamp(22px, 3vw, 26px); margin-bottom:12px}
.past-list{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
.past-book{display:grid; gap:4px; text-decoration:none; color:var(--fg); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:var(--r-sm); padding:14px 16px; min-height:var(--tap)}
.past-book:hover{border-color:var(--line-strong)}
.pb-yr{font-family:var(--f-display); font-size:28px; font-weight:300; line-height:1}
.pb-meta{font-size:var(--fs-tiny); color:var(--muted)}
.pb-go{font-weight:600; font-size:var(--fs-small); color:var(--link)}
.season-pick{max-width:none}
.print-note{display:grid; gap:8px}

/* ---------- settings ---------- */
.set{padding-block:26px 48px}
.set h1{font-size:clamp(28px, 3.6vw, 36px)}
.set-grid{display:grid; gap:16px; margin-top:20px}
@media (min-width:900px){ .set-grid{grid-template-columns:1fr 1fr; align-items:start} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; gap:14px; align-content:start}
.card h2{font-size:22px}
.card > p{color:var(--muted); font-size:var(--fs-small)}
.card hr{border:0; border-top:1px solid var(--line); margin:2px 0; width:100%}
.meterbar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.meterbar i{display:block; height:100%; background:var(--teal-deep)}
.install{display:grid; gap:12px}
.install ol{margin:0; padding-left:22px; display:grid; gap:6px; font-size:var(--fs-small)}
.unlocked-badge{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--link)}

/* ---------- book: screen ---------- */
.bk{padding-block:22px 48px}
.bk-tools{display:grid; gap:16px}
.bk-tools h1{font-size:clamp(28px, 3.6vw, 36px)}
.bk-tools .row{gap:10px}
.print-note{font-size:var(--fs-small); color:var(--muted); max-width:70ch}
.pages{display:grid; gap:26px; justify-items:center; margin-top:24px}
.pg-wrap{width:100%; max-width:640px; position:relative}
.pg-wrap .pg{transform-origin:0 0; position:absolute; left:0; top:0}
.bk-progress{font-size:var(--fs-small); color:var(--muted)}

/* ---------- book: the page (always light, 8in square = 768px) ---------- */
.pg{width:768px; height:768px; background:#FBF8F2; color:#0E1B2E; overflow:hidden; position:relative; box-shadow:0 2px 4px rgba(14,27,46,.08), 0 24px 50px -24px rgba(14,27,46,.45); font-family:var(--f-body); display:flex; flex-direction:column}
.pg .in{position:absolute; inset:48px 56px 52px; display:flex; flex-direction:column}
.pg .folio{position:absolute; left:56px; right:56px; bottom:22px; display:flex; justify-content:space-between; font-family:var(--f-label); font-size:11.5px; color:#56667F}
/* cover */
.pg.cover .in{align-items:center; justify-content:center; text-align:center; gap:22px; inset:56px}
.pg.cover .cv-art{width:300px; height:340px; border-radius:150px 150px 10px 10px / 110px 110px 10px 10px; overflow:hidden; box-shadow:inset 0 0 0 5px #4a3622; background:#16263D}
.pg.cover .cv-art img{width:100%; height:100%; object-fit:cover}
.pg.cover h1{font-family:var(--f-display); font-weight:300; font-size:54px; line-height:1.02; letter-spacing:-.02em}
.pg.cover .fam{font-family:var(--f-display); font-style:italic; font-size:24px; color:#8A5A12}
.pg.cover .yr{font-family:var(--f-display); font-size:22px; color:#3A4B66; letter-spacing:.04em}
.pg.cover.dark{background:#0E1B2E; color:#F5F7FB}
.pg.cover.dark .fam{color:#F6D9A6}
.pg.cover.dark .yr{color:#B4BFD0}
/* title, table, dedication, closing */
.pg.plain .in{justify-content:center; align-items:center; text-align:center; gap:16px}
.pg.plain h2{font-family:var(--f-display); font-weight:300; font-size:40px; line-height:1.1}
.pg.plain .sub{font-family:var(--f-display); font-style:italic; font-size:20px; color:#56667F; max-width:30ch}
.pg.plain .rule{width:48px; height:2px; background:#EBA23C}
.table-list{list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 220px)); gap:10px 36px; text-align:left}
.table-list.one{grid-template-columns:minmax(0,320px)}
.table-list li{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #DCE2EC; padding-bottom:6px; font-family:var(--f-display); font-size:20px}
.table-list li span{font-family:var(--f-label); font-size:11px; color:#56667F; align-self:center; white-space:nowrap}
.pg .ded-name{font-family:var(--f-display); font-size:44px; font-weight:300}
.pg .closing-line{font-family:var(--f-display); font-weight:300; font-size:42px; line-height:1.15}
.pg .closing-line i{color:#8A5A12}
.pg .a8{display:flex; align-items:center; gap:8px; font-family:var(--f-label); font-size:12px; color:#0A7A6E}
.pg .a8 svg{width:22px; height:22px}
/* evening page */
.pg .band{position:absolute; left:0; right:0; top:0; height:216px; overflow:hidden; background:#16263D}
.pg .band img{width:100%; height:100%; object-fit:cover; object-position:center 58%}
.pg .band.fallback{background:radial-gradient(40% 70% at 50% 70%, rgba(235,162,60,.7), rgba(235,162,60,0) 70%), linear-gradient(180deg,#1E3150,#0E1B2E)}
.pg.ev-pg .in{top:240px}
.pg.ev-pg.cont .in{top:48px}
.pg .ev-head{display:flex; align-items:baseline; gap:12px; font-family:var(--f-label); font-size:11px; color:#56667F}
.pg .ev-head b{font-family:var(--f-display); font-weight:300; font-size:30px; color:#8A5A12; line-height:1}
.pg .ev-head .theme{font-family:var(--f-display); font-style:italic; font-size:16px; color:#56667F}
.pg h3.q{font-family:var(--f-display); font-weight:400; font-size:21px; line-height:1.3; margin-top:8px; color:#24354F}
.pg .verse{font-family:var(--f-display); font-style:italic; font-size:13.5px; color:#3A4B66; margin-top:6px}
.pg .verse .ref{font-style:normal; font-family:var(--f-body); font-size:11.5px; color:#56667F; white-space:nowrap}
.pg .flow{margin-top:18px; display:flex; flex-direction:column; gap:16px; flex:1; min-height:0}
.pg .pull{font-family:var(--f-display); font-style:italic; font-weight:300; font-size:28px; line-height:1.25; color:#0E1B2E; padding-left:18px; border-left:3px solid #EBA23C}
.pg .a{display:block}
.pg .a > * + *{margin-top:5px}
.pg .a > .ph.side{margin-top:4px}
.pg.compact .a .tx{font-size:16.5px}
.pg.tight .flow{gap:12px}
.pg.tight .a .tx{font-size:18px; line-height:1.45}
.pg.tight .a > * + *{margin-top:3px}
.pg.compact .flow{gap:14px}
.pg .a .nm{font-family:var(--f-body); font-weight:700; font-size:14px; color:#0A7A6E; letter-spacing:.01em}
.pg .a .nm .vo{font-weight:500; color:#56667F; margin-left:10px; padding-left:10px; border-left:1px solid #B4BFD0}
.pg .a .tx{font-family:var(--f-display); font-size:19px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.pg .a .said{font-size:11.5px; color:#56667F; font-style:italic}
.pg .ph{display:flex; gap:12px; margin-top:6px}
.pg .ph figure{margin:0; background:#fff; padding:6px; box-shadow:0 1px 3px rgba(14,27,46,.18); flex:0 1 auto}
.pg .ph img{height:200px; width:auto; max-width:300px; object-fit:cover}
.pg .ph figcaption{font-family:var(--f-label); font-size:9.5px; color:#56667F; padding-top:4px}
.pg .ph.single img{height:240px; max-width:420px}
.pg .ph.side{float:right; margin:4px 0 10px 22px}
.pg .a::after{content:""; display:block; clear:both}
.pg .flow{gap:20px; position:relative; overflow:hidden}
.pg .ph.small img{height:150px; max-width:220px}

/* ---------- dialog ---------- */
dialog{border:0; padding:0; border-radius:var(--r); background:var(--surface); color:var(--fg); width:min(520px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
dialog::backdrop{background:rgba(6,15,28,.6)}
.dlg-in{padding:22px; display:grid; gap:16px}
.dlg-in h2{font-size:24px}
.dlg-acts{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
.copybox{width:100%; min-height:120px; font-family:var(--f-body); font-size:var(--fs-small)}
.card-preview{width:100%; max-width:300px; border-radius:10px; box-shadow:var(--shadow); justify-self:center}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + var(--sab)); z-index:60; background:var(--navy); color:#F5F7FB; padding:12px 18px; border-radius:14px; font-weight:600; font-size:var(--fs-small); max-width:calc(100vw - 32px); text-align:center; box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
@media (max-width:719px){ .toast{bottom:calc(92px + var(--sab))} }
:root[data-theme="dark"] .toast{background:var(--aqua); color:var(--navy)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .toast{background:var(--aqua); color:var(--navy)} }

/* ---------- Christmas reveal ---------- */
.reveal{position:fixed; inset:0; z-index:80; background:#060F1C; display:grid; place-items:center; overflow:hidden}
.reveal video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rv-stage{perspective:900px}
.rv-window{position:relative; width:min(60vw, 300px); aspect-ratio:3/4; border-radius:50% 50% 8px 8px / 36% 36% 8px 8px; overflow:hidden; box-shadow:0 0 0 8px #3a2a1a}
.rv-light{position:absolute; inset:0; background:radial-gradient(60% 55% at 50% 60%, #FFE7B8 0%, #EBA23C 45%, #8A5A12 100%); opacity:.25}
.rv-sh{position:absolute; top:0; bottom:0; width:50%; background:linear-gradient(180deg,#22385C,#15253D); box-shadow:inset 0 0 0 5px rgba(255,255,255,.04)}
.rv-sh::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px)}
.rv-l{left:0; transform-origin:left center}
.rv-r{right:0; transform-origin:right center}
.rv-text{position:absolute; bottom:calc(14vh + var(--sab)); left:20px; right:20px; text-align:center; text-wrap:balance; line-height:1.15; font-family:var(--f-display); font-weight:300; font-size:clamp(30px, 6vw, 52px); color:#FBF8F2; opacity:0}
.rv-skip{position:absolute; top:calc(16px + var(--sat)); right:calc(16px + var(--sar)); background:transparent; color:#F5F7FB; border-color:rgba(255,255,255,.35)}
.reveal.play .rv-l{animation:shutL 1.6s cubic-bezier(.6,.05,.25,1) .5s forwards}
.reveal.play .rv-r{animation:shutR 1.6s cubic-bezier(.6,.05,.25,1) .5s forwards}
.reveal.play .rv-light{animation:light 2.4s ease-out .7s forwards}
.reveal.play .rv-window{animation:spill 2.6s ease-out .9s forwards}
.reveal.play .rv-text{animation:fadein 1.2s ease-out 1.9s forwards}
@keyframes shutL{to{transform:rotateY(-105deg)}}
@keyframes shutR{to{transform:rotateY(105deg)}}
@keyframes light{to{opacity:1}}
@keyframes spill{to{box-shadow:0 0 0 8px #3a2a1a, 0 0 160px 60px rgba(235,162,60,.55)}}
@keyframes fadein{to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .reveal.play .rv-l, .reveal.play .rv-r{animation:none; opacity:0}
  .reveal.play .rv-light{animation:none; opacity:1}
  .reveal.play .rv-window{animation:none; box-shadow:0 0 0 8px #3a2a1a, 0 0 160px 60px rgba(235,162,60,.55)}
  .reveal.play .rv-text{animation:none; opacity:1}
  .win:hover .pane{transform:none}
  *{transition:none!important}
}

/* ---------- print: the book only, 8 x 8 in ---------- */
@media print{
  @page{size:8in 8in; margin:0}
  html,body{background:#fff!important}
  .top,.tabbar,.toast,.skip,dialog,.reveal,.bk-tools,.no-print{display:none!important}
  main{padding:0!important}
  .bk, .wrap{padding:0!important; max-width:none!important; margin:0!important}
  .pages{display:block; margin:0}
  .pg-wrap{max-width:none!important; width:8in!important; height:8in!important; page-break-after:always; break-after:page; overflow:hidden}
  .pg-wrap:last-child{page-break-after:auto; break-after:auto}
  .pg-wrap .pg{position:static; transform:none!important; width:8in; height:8in; box-shadow:none}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}