:root { color-scheme:light; --pine:#06261c; --cream:#f6f2e8; --ink:#1b211c; --muted:#526057; --gold:#b7832b; --accent:#8fc558; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#082a20; color:var(--cream); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.shell { width:min(100% - 48px,1320px); margin-inline:auto; }
.site-header { border-bottom:1px solid #ffffff38; background:var(--pine); }
.header-inner { min-height:83px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.wordmark { display:inline-flex; flex-direction:column; width:max-content; text-decoration:none; line-height:.8; }
.wordmark span { color:#8ec45c; font-size:1.5rem; font-weight:950; letter-spacing:-.06em; }
.wordmark .tm { font-family:Arial,Helvetica,sans-serif; font-size:.3em; letter-spacing:0; vertical-align:super; margin-left:2px; }
.wordmark strong { font-family:Georgia,'Times New Roman',serif; color:#fff; font-weight:400; letter-spacing:.11em; font-size:1.8rem; margin-top:4px; }
nav { display:flex; gap:32px; }
nav a { text-decoration:none; text-transform:uppercase; letter-spacing:.15em; font-weight:800; font-size:.75rem; }
nav a:hover { color:var(--accent); }
.issue-shell { padding-top:28px; padding-bottom:70px; }
.breadcrumbs { display:flex; gap:10px; align-items:center; color:#bcd0c1; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:25px; }
.breadcrumbs a { text-decoration:none; border-bottom:1px solid #ffffff72; padding-bottom:3px; }
.breadcrumbs a:hover { color:var(--accent); }
.reader-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.reader-kicker { margin:0 0 8px; color:var(--accent); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:900; }
.reader-heading h1 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.6rem,4.5vw,4.5rem); line-height:1; font-weight:400; letter-spacing:-.055em; }
.reader-heading>p { margin:0 0 4px; color:#bbd0c1; font-size:.95rem; max-width:330px; line-height:1.45; }
.reader { position:relative; min-height:690px; overflow:hidden; perspective:1800px; background:radial-gradient(circle at 50% 40%,#1a4934,#062117 72%); border:1px solid #ffffff26; box-shadow:0 30px 75px #0006; }
.closed-state { min-height:690px; display:flex; justify-content:center; align-items:center; position:relative; z-index:2; transition:opacity .28s .54s; }
.cover-opener { position:relative; display:block; width:min(34vw,410px); min-width:280px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; transform-origin:left center; transform-style:preserve-3d; backface-visibility:hidden; transition:transform .9s cubic-bezier(.23,.72,.2,1),opacity .2s .7s; }
.cover-opener img { display:block; width:100%; height:auto; box-shadow:18px 24px 40px #0009; }
.open-prompt { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:19px 20px; background:linear-gradient(transparent,#031c14ed 32%); font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.18em; }
.open-prompt span { font-family:Georgia,'Times New Roman',serif; font-size:2rem; font-weight:400; line-height:.6; }
.cover-opener:hover { transform:translateY(-5px); }
.reader.is-open .closed-state { position:absolute; inset:0; min-height:0; opacity:0; pointer-events:none; }
.reader.is-open .cover-opener { transform:translateX(-21vw) rotateY(-158deg); opacity:0; }
.book-spread { display:none; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); min-height:750px; }
.reader.is-open .book-spread { display:grid; animation:spread-open .92s ease both; }
@keyframes spread-open { 0% { opacity:0; transform:translateX(28px) scale(.98); } 42% { opacity:.12; } 100% { opacity:1; transform:none; } }
.art-page { position:relative; min-height:100%; overflow:hidden; background:#122b1e; }
.art-page img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.art-caption { position:absolute; inset:auto 0 0; padding:85px 32px 32px; color:#fff; background:linear-gradient(transparent,#05180fdb 75%); }
.art-caption strong { display:block; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2rem,3vw,3.4rem); line-height:1; font-weight:400; letter-spacing:-.04em; }
.art-caption span { display:block; margin-top:13px; text-transform:uppercase; letter-spacing:.16em; font-size:.65rem; font-weight:800; }
.contents-page { background:var(--cream); color:var(--ink); padding:clamp(28px,4vw,60px) clamp(26px,4.5vw,68px) 45px; border-left:10px solid #d5d1c4; }
.issue-line { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid #a9aa9e; padding-bottom:11px; text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; font-weight:800; color:#3e5546; }
.contents-intro { padding:35px 0 30px; }
.kicker { margin:0 0 12px; color:#866116; text-transform:uppercase; letter-spacing:.23em; font-size:.72rem; font-weight:900; }
.contents-intro h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(4rem,7vw,7.6rem); line-height:.88; font-weight:400; letter-spacing:-.075em; }
#contents-title:focus { outline:none; }
.contents-intro h2 span { color:var(--gold); }
.edition-theme { margin:20px 0 12px; font-size:clamp(1.35rem,2.2vw,2rem); line-height:1.14; font-weight:800; letter-spacing:-.035em; }
.opening { margin:0; color:#3f4b43; line-height:1.58; font-size:1rem; max-width:650px; }
.contents-rule { display:flex; justify-content:space-between; border-block:2px solid #183a2a; padding:11px 0; text-transform:uppercase; letter-spacing:.17em; color:#284735; font-size:.7rem; font-weight:900; }
.toc-list { list-style:none; margin:0; padding:0; }
.toc-item { display:grid; grid-template-columns:52px 1fr; gap:12px; border-bottom:1px solid #d4d3c9; padding:19px 0 20px; }
.toc-number { font-family:Georgia,'Times New Roman',serif; color:#ab7e2a; font-size:1.55rem; line-height:1; }
.toc-type { display:block; color:#4d7256; text-transform:uppercase; letter-spacing:.15em; font-size:.66rem; font-weight:900; margin-bottom:6px; }
.toc-item h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.3rem,1.65vw,1.75rem); font-weight:400; line-height:1.15; letter-spacing:-.025em; }
.toc-item p { color:var(--muted); margin:7px 0 0; font-size:.91rem; line-height:1.44; }
.disclaimer { color:#5c665e; font-size:.78rem; line-height:1.5; border-left:3px solid #a87822; padding-left:13px; margin:28px 0 0; }
.reader-controls { display:flex; align-items:center; flex-wrap:wrap; gap:24px; padding-top:25px; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.reader-controls button { background:var(--accent); color:#09251b; border:0; padding:12px 18px; text-transform:uppercase; letter-spacing:.12em; font:inherit; cursor:pointer; }
.reader-controls button[hidden] { display:none; }
.reader-controls a { text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:5px; }
.reader-controls a:hover { color:var(--accent); }
footer { background:#041c15; padding:27px 0; }
.footer-inner { display:flex; justify-content:space-between; gap:22px; color:#c5d4c8; font-size:.82rem; }
.footer-inner a:hover { color:var(--accent); }
@media(max-width:900px) { .contents-page { padding:28px; } .cover-opener { width:min(48vw,380px); } }
@media(max-width:700px) { .shell { width:min(100% - 28px,1320px); } .reader-heading { display:block; } .reader-heading>p { margin-top:12px; } .reader,.closed-state { min-height:600px; } .cover-opener { width:min(70vw,360px); min-width:0; } .reader.is-open .book-spread { display:flex; flex-direction:column; } .art-page { min-height:330px; } .art-page img { object-position:center 47%; } .contents-page { border-left:0; border-top:8px solid #d5d1c4; } .art-caption { padding:60px 22px 20px; } .footer-inner { flex-direction:column; } }
@media(max-width:480px) { .header-inner { flex-direction:column; align-items:flex-start; gap:16px; padding-block:16px; } nav { gap:22px; } .reader,.closed-state { min-height:510px; } .cover-opener { width:min(70vw,310px); } .issue-line { flex-direction:column; gap:5px; } .contents-intro h2 { font-size:4rem; } .toc-item { grid-template-columns:38px 1fr; } .art-page { min-height:270px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }