:root {
  --bg:#faeddd; --paper:#fffdf9; --ink:#0d0d0d; --muted:#766f67;
  --line:rgba(13,13,13,.18); --red:#a41e22; --yellow:#eba821;
  --edition-font:Arial,sans-serif; color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0d0d0d; --paper:#1b1b1a; --ink:#faeddd; --muted:#a8a097;
  --line:rgba(250,237,221,.19); color-scheme:dark;
}
* { box-sizing:border-box }
html,body,#root { min-height:100%; margin:0 }
html { background:var(--bg); overflow-x:hidden }
body { font-family:var(--edition-font); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased }
button,input { font:inherit }
button { cursor:pointer }
button:focus-visible { outline:2px solid var(--red); outline-offset:4px }
.app { min-height:100svh; display:flex; flex-direction:column; transition:background-color .25s; background:var(--bg) }
.masthead { height:86px; flex:none; padding:0 clamp(20px,4vw,72px); display:flex; align-items:center; justify-content:space-between; gap:24px }
.identity,.header-actions { display:flex; align-items:center }
.identity { gap:17px; min-width:0 }
.wordmark { width:clamp(100px,9.2vw,145px); height:auto; object-fit:contain }
.dark-mark { display:none }
[data-theme="dark"] .light-mark { display:none }
[data-theme="dark"] .dark-mark { display:block }
.identity-divider,.action-divider { width:1px; height:15px; background:var(--line) }
.edition-name { font-size:11px; font-weight:600; letter-spacing:.19em }
.header-actions { gap:19px }
.text-action,.theme-action { border:0; background:none; color:var(--ink); font-size:10px; font-weight:600; letter-spacing:.15em; padding:12px 0; white-space:nowrap }
.text-action span,.theme-action span { margin-left:9px; font-size:15px; font-weight:400; line-height:0 }
.text-action:hover,.theme-action:hover,.navigation button:hover:not(:disabled) { color:var(--red) }
.viewer { flex:1; width:100%; max-width:1550px; margin:auto; padding:22px clamp(20px,5.8vw,94px) 36px; display:flex; flex-direction:column; justify-content:center }
.viewer-top { display:flex; justify-content:space-between; gap:12px; padding:0 2px 15px; font-size:10px; font-weight:600; letter-spacing:.19em }
.viewer-top span:last-child { color:var(--muted); font-weight:400 }
.book-stage { width:100%; max-width:1310px; margin:auto; padding:4px 0; }
.publication { width:100%; aspect-ratio:2.08/1; position:relative; background:var(--paper); touch-action:pan-y; user-select:none; -webkit-user-select:none; isolation:isolate; overflow:hidden; perspective:1600px; box-shadow:0 16px 42px rgba(13,13,13,.08) }
.publication.turning { touch-action:none; cursor:grabbing }
.spread { position:absolute; inset:0; display:flex; background:var(--paper) }
.spread > .page { flex:0 0 50%; width:50%; height:100% }
.spread.under { z-index:0; visibility:hidden }
.spread.current { z-index:1 }
.turn-sheet { position:absolute; z-index:2; top:0; left:50%; width:50%; height:100%; transform-origin:left center; visibility:hidden; pointer-events:none; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; will-change:transform }
.turn-sheet.backward { left:0; transform-origin:right center }
.turn-face { position:absolute; inset:0; width:100%; height:100%; background:var(--paper); backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(1px); overflow:hidden }
.turn-face.back { transform:rotateY(180deg) translateZ(1px) }
.turn-face > .page { width:100%; height:100% }
.turn-face::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--leaf-shadow,0); background:linear-gradient(90deg,rgba(0,0,0,.34),transparent 24%,transparent 72%,rgba(0,0,0,.2)) }
.turn-face.back::after { background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 28%,transparent 74%,rgba(0,0,0,.34)) }
.fold-shade { position:absolute; z-index:3; top:0; bottom:0; left:50%; width:24px; opacity:0; transform:translateX(-50%); pointer-events:none; background:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent) }
.page { position:relative; overflow:hidden; background:var(--paper); color:var(--ink); padding:8.5%; font-size:clamp(8px,.82vw,13px); }
.page h1,.page h2,.page p,.page figure { margin:0 }
.page h1,.page h2 { font-weight:400; letter-spacing:-.075em }
.page img { width:100%; height:100%; object-fit:contain; display:block }
.frame { min-width:0; min-height:0; overflow:hidden; background:rgba(128,120,110,.11) }
.frame img { object-fit:cover; }
.folio { position:absolute; bottom:4.2%; right:6%; z-index:2; font-size:9px; font-weight:500; letter-spacing:.08em; opacity:.6; font-variant-numeric:tabular-nums }
.section-marker,.eyebrow,.page-heading,.vertical-label,.bleed-caption,.closing-credit { font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase }
.page-heading { display:flex; justify-content:space-between; color:var(--muted); }
.opener { display:flex; flex-direction:column; padding:7% 8% }
.eyebrow { display:flex; justify-content:space-between; color:var(--muted) }
.opener-body { margin:auto 0 7%; }
.opener h1 { font-size:clamp(32px,5vw,86px); line-height:.93; margin-top:7%; }
.opener em { font-style:normal; color:var(--red) }
.opener-note { margin-top:10%!important; max-width:200px; color:var(--muted); line-height:1.5 }
.opener-image { width:36%; height:25%; margin-left:auto!important; }
.full-bleed { padding:0 }
.full-bleed > .frame { position:absolute; inset:0; }
.full-bleed .frame img { object-position:center 42% }
.full-bleed .bleed-caption { position:absolute; bottom:7%; left:8%; color:#fff; text-shadow:0 1px 9px #0008 }
.full-bleed .folio { color:#fff; opacity:.95; text-shadow:0 1px 9px #0008 }
.quiet-hero { display:flex; flex-direction:column; gap:6% }
.quiet-hero > .frame { margin:5% 14% 0 0; flex:1; min-height:0 }
.quiet-hero .frame img { object-fit:contain; background:var(--paper) }
.quiet-hero.reverse > .frame { margin:5% 0 0 15% }
.caption-row { display:flex; justify-content:space-between; gap:12px; align-items:end; line-height:1.35; padding-bottom:4% }
.caption-row strong { font-size:clamp(13px,1.5vw,24px); font-weight:400; letter-spacing:-.04em }
.caption-row span { color:var(--muted); max-width:40%; text-align:right }
.portrait { display:grid; grid-template-columns:9% 1fr; grid-template-rows:69% 1fr; column-gap:5% }
.portrait .vertical-label { grid-row:1/3; writing-mode:vertical-rl; color:var(--muted) }
.portrait > .frame { width:77%; height:100%; justify-self:center }
.portrait .frame img { object-fit:contain; background:var(--paper) }
.portrait-copy { align-self:end; padding-bottom:8% }
.portrait h2 { font-size:clamp(21px,3vw,49px); line-height:1.02; margin-top:3% }
.asymmetry { display:grid; grid-template-columns:60% 1fr; grid-template-rows:10% 55% 22% 1fr; column-gap:7% }
.asymmetry .page-heading { grid-column:1/3 }
.asymmetry .large { grid-row:2/4; align-self:stretch }
.asymmetry .small { grid-column:2; grid-row:3/5; align-self:start; height:70% }
.asymmetry p { grid-column:1; grid-row:4; align-self:end; color:var(--muted); max-width:190px; line-height:1.4 }
.spare { display:flex; flex-direction:column }
.spare h2 { font-size:clamp(34px,5vw,82px); line-height:.92; margin:10% 0 4% }
.spare .frame { height:33%; width:77%; margin-left:auto }
.spare p { max-width:170px; color:var(--muted); margin-top:auto; line-height:1.5 }
.mosaic { display:flex; flex-direction:column; gap:5% }
.mosaic-grid { display:grid; flex:1; min-height:0; grid-template-columns:1.22fr .8fr; grid-template-rows:1.1fr .85fr 1fr; gap:3.5% }
.mosaic-grid .frame:first-child { grid-row:span 3 }
.mosaic-grid .frame:nth-child(n+2) { grid-column:2 }
.mosaic-note { color:var(--muted); align-self:flex-end }
.collage { display:flex; flex-direction:column; gap:6% }
.collage-grid { flex:1; min-height:0; display:grid; grid-template-columns:1.25fr .66fr .77fr; grid-template-rows:1.1fr .8fr .8fr; gap:3.2% }
.collage-grid .frame:first-child { grid-row:span 3 }
.collage-grid .frame:nth-child(2) { grid-column:2/4 }
.collage-grid .frame:nth-child(3) { grid-column:2; grid-row:2/4 }
.collage-grid .frame:nth-child(4) { grid-column:3; grid-row:2 }
.collage-grid .frame:nth-child(5) { grid-column:3; grid-row:3 }
.final-portrait { display:grid; grid-template-columns:55% 1fr; gap:9%; align-items:center }
.final-portrait .frame { height:78%; }
.final-portrait .frame img { object-fit:contain; background:var(--paper) }
.final-portrait h2 { font-size:clamp(23px,3.2vw,54px); line-height:1; margin:12% 0 20% }
.final-portrait p { color:var(--muted); font-size:10px }
.closing { display:flex; flex-direction:column; justify-content:space-between }
.closing > div { margin:auto 0 }
.closing h2 { font-size:clamp(37px,5.3vw,91px); line-height:.91 }
.closing h2 span { color:var(--red) }
.closing p { color:var(--muted); margin-top:10% }
.closing-credit { color:var(--muted) }
.navigation { max-width:1310px; width:100%; align-self:center; display:flex; justify-content:space-between; align-items:center; padding-top:22px }
.navigation button { border:0; background:none; color:var(--ink); min-width:130px; padding:10px 0; font-size:17px; text-align:left }
.navigation button:last-child { text-align:right }
.navigation button span { font-size:10px; font-weight:600; letter-spacing:.16em; margin:0 8px; vertical-align:middle }
.navigation button:disabled { opacity:.25; cursor:default }
.page-indicator { font-size:11px; letter-spacing:.18em; font-variant-numeric:tabular-nums }
.page-indicator span { color:var(--muted); padding:0 8px }
.footer { min-height:54px; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:0 clamp(20px,4vw,72px); color:var(--muted); font-size:9px; font-weight:500; letter-spacing:.16em }
.footer span:nth-child(2) { opacity:.75 }
.engine-error { min-height:45vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; line-height:1.5 }
.engine-error span { color:var(--muted); max-width:320px }
.upload-backdrop { position:fixed; z-index:100; inset:0; background:#0009; display:flex; justify-content:flex-end }
[hidden] { display:none!important }
.upload-panel { position:relative; width:min(500px,100%); min-height:100%; background:var(--paper); padding:clamp(28px,5vw,70px); display:flex; flex-direction:column; justify-content:center }
.upload-panel .close { position:absolute; top:28px; right:32px; border:0; background:none; color:var(--ink); font-size:32px; font-weight:300 }
.upload-panel h2 { font-size:clamp(36px,4vw,65px); font-weight:400; letter-spacing:-.07em; line-height:1; margin:15px 0 24px }
.upload-panel p { color:var(--muted); line-height:1.6; max-width:330px; font-size:13px }
.upload-panel input { position:absolute; width:1px; height:1px; opacity:0 }
.upload-primary { display:flex; justify-content:space-between; width:100%; margin-top:40px; padding:18px 0; border:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:none; color:var(--ink); font-size:11px; font-weight:600; letter-spacing:.17em }
.upload-primary span { font-size:20px; line-height:0 }
.reset { margin-top:24px; padding:12px 0; border:0; background:none; color:var(--red); align-self:flex-start; font-size:10px; letter-spacing:.16em }
.upload-footnote { margin-top:60px; color:var(--muted); font-size:10px; line-height:1.5 }
@media (max-width:700px) {
  .masthead { height:70px; padding:0 18px }
  .identity { gap:9px }
  .wordmark { width:104px }
  .edition-name { font-size:9px }
  .header-actions { gap:10px }
  .text-action { font-size:0 }
  .text-action span { font-size:18px; margin:0 }
  .theme-action { font-size:9px }
  .viewer { padding:20px 16px 34px; justify-content:center }
  .viewer-top { font-size:8px; padding-bottom:14px }
  .viewer-top span:last-child { display:none }
  .book-stage { width:min(100%,520px) }
  .publication { aspect-ratio:1.04/1 }
  .spread > .page { flex-basis:100%; width:100% }
  .turn-sheet,.turn-sheet.backward { left:0; width:100% }
  .fullscreen-action,.fullscreen-divider { display:none }
  .page { font-size:clamp(9px,2.2vw,13px) }
  .page h1 { font-size:clamp(42px,10vw,78px) }
  .page h2 { font-size:clamp(30px,7vw,60px) }
  .section-marker,.eyebrow,.page-heading,.vertical-label,.bleed-caption,.closing-credit { font-size:8px }
  .folio { font-size:8px }
  .navigation { width:min(100%,520px); padding-top:16px }
  .navigation button { min-width:70px }
  .navigation button span { display:none }
  .footer { padding:0 18px; min-height:42px; font-size:8px }
  .footer span:nth-child(2),.footer span:nth-child(3) { display:none }
}
@media (max-width:430px) {
  .publication { aspect-ratio:.82/1 }
  .opener h1 { font-size:clamp(40px,12vw,66px) }
  .page { padding:8% }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important }
}