/* Hallmark · genre: editorial · macrostructure: question-led photographic opening.
 * design-system: design.md · designed-as-app · theme: custom commemorative journal.
 * Pre-emit critique: P4 H4 E4 S5 R5 V4. User aesthetic review pending. */
@font-face{font-family:MarchQuestion;src:url('assets/opening/question-serif.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--cover-paper:#f8f0e3;--cover-ink:#342923;--cover-red:#a6382e;--cover-red-deep:#862c25;--cover-muted:#6c5b4d;--cover-rule:#d5c3ad;--cover-white:#fff6e8;--cover-focus:#a6382e;--cover-transparent:transparent;--cover-heading:MarchQuestion,'Noto Serif SC','Songti SC','SimSun',serif;--cover-body:var(--font-body);--cover-number:var(--font-display);--cover-gutter:clamp(20px,6.15vw,36px);--cover-gap:clamp(12px,2.2vh,22px);--cover-ease:cubic-bezier(.16,1,.3,1)}
body[data-page='1'] .deck-nav,body[data-page='1'] .deck-footer{display:none}
.opening{--opening-safe-top:env(safe-area-inset-top);--opening-safe-bottom:env(safe-area-inset-bottom);padding:calc(22px + var(--opening-safe-top)) var(--cover-gutter) calc(24px + var(--opening-safe-bottom));grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:var(--cover-gap);background:var(--cover-paper);color:var(--cover-ink)}
.opening>*{max-width:680px}
.opening .cover-masthead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.cover-commemoration{padding-top:4px;font-family:var(--cover-body);color:var(--cover-red);line-height:1.65;font-size:12px;letter-spacing:.035em}
.cover-commemoration strong{display:block;font-family:var(--cover-heading);font-weight:700;font-size:26px;line-height:1.45;letter-spacing:.03em}
.cover-anniversary{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:5px;color:var(--cover-red)}
.cover-anniversary strong{font-family:var(--cover-number);font-size:66px;font-weight:800;line-height:.95;letter-spacing:-.07em}
.cover-anniversary>span{font:600 11px/1.5 var(--cover-body);writing-mode:vertical-rl;letter-spacing:.15em}
.cover-anniversary small{grid-column:1/-1;justify-self:center;font:500 10px/1.8 var(--cover-body);letter-spacing:.055em;color:var(--cover-muted);margin-top:4px}
.opening .cover-question{font-family:var(--cover-heading);font-weight:700;font-size:clamp(31px,9.2vw,43px);line-height:1.35;letter-spacing:-.025em;max-width:680px;overflow-wrap:normal;text-wrap:balance;margin-block:0 2px;color:var(--cover-red-deep)}
.cover-question span{display:block;white-space:nowrap}
.cover-question .question-first{font-size:1.16em;margin-bottom:3px}
.opening .opening-landscape{position:relative;overflow:clip;width:100%;max-width:680px;min-height:0;isolation:isolate}
.opening-landscape img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:52% 63%;filter:none;transform:scale(1.025)}
.opening .opening-credit{font:400 10px/1.75 var(--cover-body);color:var(--cover-muted);margin-top:calc(var(--cover-gap)*-.55)}
.opening-credit span{display:block}
.opening-credit a{color:inherit;text-decoration:none;font-weight:400;display:inline-block}
.opening-credit a:focus-visible{outline:2px solid var(--cover-focus);outline-offset:3px}
.opening .opening-invitation{display:grid;gap:14px}
.cover-lead{font:400 13px/1.7 var(--cover-body);color:var(--cover-ink);text-wrap:pretty}
.cover-lead span{display:block}
.opening button.opening-enter{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:56px;padding:12px 18px;border:1px solid var(--cover-red);border-radius:3px;background:var(--cover-red);color:var(--cover-white);font-family:var(--cover-body);font-size:16px;font-weight:600;line-height:1.5;white-space:nowrap;touch-action:manipulation;transition:background 160ms var(--cover-ease),transform 160ms var(--cover-ease)}
.opening-enter .entry-trail{display:block;flex:none;width:96px;height:24px;overflow:visible;transition:transform 210ms var(--cover-ease)}
.entry-trail path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.entry-trail .trail-base{opacity:.32}
.entry-trail .trail-draw{stroke-dasharray:1;stroke-dashoffset:0}
.entry-trail .trail-footstep{fill:currentColor}
.opening-enter:hover{background:var(--cover-red-deep)}
.opening-enter:hover .entry-trail{transform:translateX(3px)}
.opening-enter:active:not(:disabled){transform:scale(.96)}
.opening-enter:focus-visible{outline:3px solid var(--cover-focus);outline-offset:4px}
.opening-enter:disabled{cursor:wait}
.opening.is-active .cover-masthead{animation:cover-reveal 500ms 30ms var(--cover-ease) both}
.opening.is-active .cover-question{animation:cover-reveal 650ms 130ms var(--cover-ease) both}
.opening.is-active .opening-landscape img{animation:cover-landscape 1200ms 100ms var(--cover-ease) both}
.opening.is-active .opening-invitation{animation:cover-reveal 550ms 300ms var(--cover-ease) both}
.opening.is-active .entry-trail .trail-footstep{animation:opening-step 1200ms 600ms linear 1 both}
.opening.is-departing .entry-trail{transform:translateX(6px)}
.opening.is-departing .entry-trail .trail-footstep{animation:opening-forward 200ms var(--cover-ease) both}
.opening.is-leaving .entry-trail .trail-footstep{animation:none;transform:translate(152px,-6px)}
.opening.is-retreating .opening-landscape img{animation:none}
@keyframes cover-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cover-landscape{from{opacity:.5;transform:scale(1.045)}to{opacity:1;transform:scale(1.025)}}
@keyframes opening-step{0%{opacity:0;transform:translate(0,0)}6%{opacity:1}41%{transform:translate(63px,0)}50%{transform:translate(76px,-6px)}100%{opacity:1;transform:translate(145px,-6px)}}
@keyframes opening-forward{from{transform:var(--step-start,translate(145px,-6px))}to{transform:translate(152px,-6px)}}
@media(max-height:700px){.opening{padding-top:calc(16px + var(--opening-safe-top));padding-bottom:calc(18px + var(--opening-safe-bottom));--cover-gap:12px}.cover-anniversary strong{font-size:56px}.cover-commemoration strong{font-size:23px}.opening .cover-question{font-size:clamp(30px,8.6vw,36px);line-height:1.3}.cover-question .question-first{font-size:1.1em;margin-bottom:0}.cover-lead{font-size:12px;line-height:1.55}.opening .opening-invitation{gap:10px}.opening button.opening-enter{min-height:52px}.opening .opening-credit{font-size:10px}}
@media(max-height:600px){.opening{--cover-gap:10px}.cover-anniversary strong{font-size:48px}.cover-commemoration{font-size:11px}.cover-commemoration strong{font-size:21px}.opening .cover-question{font-size:clamp(27px,8.4vw,32px)}.opening button.opening-enter{min-height:50px}.opening .opening-invitation{gap:8px}}
@media(min-width:650px){.opening{--cover-gap:24px}.cover-anniversary strong{font-size:80px}.cover-commemoration strong{font-size:32px}.cover-commemoration{font-size:16px}.opening .cover-question{font-size:52px}.cover-lead{font-size:16px}.opening .opening-credit{font-size:12px}.opening button.opening-enter{min-height:64px;font-size:18px}.opening-enter .entry-trail{width:130px}}
@media(prefers-reduced-motion:reduce){.opening.is-active .cover-masthead,.opening.is-active .cover-question,.opening.is-active .opening-landscape img,.opening.is-active .opening-invitation,.opening.is-active .entry-trail .trail-footstep{animation:none}.opening button.opening-enter,.opening-enter .entry-trail{transition:none}}