/* The opening borrows the journal's paper, ink and restrained metallic warmth. */
html.has-opening { overflow-anchor:none; scroll-behavior:auto; }
#opening-spacer { height:380svh; overflow-anchor:none; }
#opening { position:fixed; inset:0; z-index:80; overflow:hidden; isolation:isolate; color:var(--paper); background:transparent; }
#opening[hidden] { display:none!important; }
html.intro-bootstrap #opening[hidden] { display:block!important; background:#193f50 url('/assets/opening/origin.webp') center/cover no-repeat; }
.origin-visual { position:absolute; inset:0; pointer-events:none; perspective:1400px; }
.origin-canvas { display:block; width:100%; height:100%; }
.origin-pieces { position:absolute; inset:0; visibility:hidden; pointer-events:none; }
.origin-zoom { display:block; width:100%; height:100%; overflow:hidden; }
.origin-top { position:absolute; inset:26px 3.5% auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.origin-signature { font:700 10px/1.6 var(--sans); letter-spacing:.24em; background:#193f50de; border-radius:30px; padding:10px 16px; }
#opening #enter-journal { color:var(--paper); background:#193f50de; border:1px solid #fff2d96b; border-radius:30px; min-height:44px; font:600 12px var(--sans); padding:12px 20px; }
#opening #enter-journal:hover { color:var(--ink); background:var(--paper); }
#opening #enter-journal:focus-visible { outline-color:var(--gold); }
.origin-caption { position:absolute; left:5%; right:5%; top:calc(43% + var(--mark-size,480px) * .5 + 16px); text-align:center; opacity:0; pointer-events:none; }
.origin-caption small { display:block; font:700 9px/1.4 var(--sans); letter-spacing:.44em; color:var(--gold); margin-bottom:10px; }
.origin-caption p { font:900 clamp(38px,5.3vw,76px)/.98 var(--display); letter-spacing:-.04em; }
.origin-caption em { display:block; font:italic clamp(15px,1.6vw,20px)/1.4 var(--serif); margin-top:12px; }
.origin-bottom { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; padding:10px 18px; border-radius:12px; background:#193f50dc; }
.origin-bottom span { font:650 9px/1.6 var(--sans); letter-spacing:.22em; white-space:nowrap; }
.origin-progress { width:100px; height:2px; background:#fff2d938; margin:10px auto 0; }
.origin-progress i { display:block; height:100%; background:var(--gold); transform:scaleX(var(--origin-progress,0)); transform-origin:left; }
.opening-active #site-shell { will-change:transform; overflow-anchor:none; }
.opening-active .reading-progress,.opening-active .back-to-top { visibility:hidden; }
@media(max-width:650px) {
  #opening-spacer { height:310svh; }
  .origin-top { inset:16px 16px auto; gap:10px; }
  .origin-signature { font-size:8px; letter-spacing:.16em; padding:8px 10px; }
  #opening #enter-journal { padding:10px 13px; font-size:11px; }
  .origin-bottom { bottom:20px; }
  .origin-caption { top:calc(43% + var(--mark-size,280px) * .5 + 24px); }
  .origin-caption p { font-size:clamp(38px,10.8vw,60px); }
}
@media(max-height:540px) and (min-width:651px) {
  .origin-caption { top:calc(43% + var(--mark-size,240px) * .5 + 6px); }
  .origin-caption small,.origin-caption em { display:none; }
  .origin-caption p { font-size:34px; }
  .origin-top { top:12px; }
  .origin-bottom { bottom:10px; }
}
@media(prefers-reduced-motion:reduce) {
  #opening,#opening-spacer,html.intro-bootstrap #opening[hidden] { display:none!important; }
  .opening-active #site-shell { transform:none!important; }
}