.article-section,
.magazine{
  --journal-ink:#111e33;
  --journal-paper:#fff9ea;
  --journal-gold:#eeb44e;
}
.article-section{background:#eee6d8;color:var(--journal-ink)}
.article-section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  padding-block-end:22px;
  border-block-end:2px solid currentColor;
}
.article-section-head h2{margin:.18em 0 0;font-size:clamp(32px,5vw,56px);color:inherit}
.article-section-head p{margin:.4em 0 0;color:#435168}
.mag-kicker{font:700 .72rem/1.4 Consolas,monospace;letter-spacing:.14em}
.mag-link{
  padding:.65em 1.2em;
  border:1px solid currentColor;
  color:inherit;
  font-weight:700;
}
.mag-link:hover{background:var(--journal-ink);color:var(--journal-paper)}
.mag-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-block-start:20px}
.mag-card{background:var(--journal-ink);color:var(--journal-paper);border-block-start:3px solid var(--journal-gold)}
.mag-card a{display:block;height:100%;padding:22px;color:inherit}
.mag-card a:hover{background:#223551}
.mag-card-mark{display:block;color:var(--journal-gold);font:900 clamp(28px,5vw,55px)/1 Impact, sans-serif;text-align:start}
.mag-card h3{color:inherit;font-size:22px;margin:18px 0 4px;text-align:start}
.mag-card p{color:#e6d9c0;margin:0;overflow-wrap:anywhere}

.magazine{min-height:100vh;background:#101b2f;color:var(--journal-paper)}
.magazine-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px max(4%,calc((100% - 1200px) / 2));
  border-block-end:1px solid #526079;
  color:var(--journal-paper);
}
.magazine-bar a{color:inherit;text-decoration:underline;text-underline-offset:.3em}
.magazine-bar strong{font:700 .9rem/1.3 Consolas,monospace;letter-spacing:.12em}
.magazine-bar strong span,.magazine-heading .mag-kicker{color:var(--journal-gold)}
.magazine-main{width:min(1200px,92%);margin-inline:auto;padding:clamp(28px,5vw,64px) 0 44px}
.magazine-heading h1{font-size:clamp(43px,7vw,96px);line-height:1.1;color:inherit;margin:.13em 0}
.magazine-heading p{margin:0;color:#e6d9c0;font-size:clamp(16px,2vw,21px)}
.magazine-spread{
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(0,2.65fr);
  margin-block-start:clamp(20px,4vw,38px);
  border-block-start:4px solid var(--journal-gold);
  box-shadow:0 12px 0 -7px #b4a48b,0 22px 0 -15px #e7d7bc,0 30px 50px -28px #000;
}
.magazine-index{padding:clamp(16px,3vw,34px);background:#24334b}
.magazine-index h2{color:var(--journal-gold);margin:0 0 .7em;font-size:1.18rem}
.mag-index-group{margin-block:.42rem;border:1px solid #526079;border-radius:.5rem}
.mag-index-group > summary{display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;cursor:pointer;font-weight:700;list-style:none}
.mag-index-group > summary::-webkit-details-marker{display:none}
.mag-index-group > summary::before{content:'+';inline-size:1em;text-align:center;color:var(--journal-gold)}
.mag-index-group[open] > summary::before{content:'−'}
.mag-index-count{margin-inline-start:auto;font-size:.8em;color:var(--journal-gold)}
.mag-index-entry{display:block;margin:.18rem .45rem;padding:.45rem .55rem;border-radius:.25rem;color:var(--journal-paper);text-align:start;overflow-wrap:anywhere;line-height:1.4;font-size:.93rem}
.mag-index-entry:first-of-type{font-size:.8rem;color:#e3d5bc}
.mag-index-entry:is([aria-current],:hover){background:var(--journal-gold);color:#15213a}
.mag-index-group > .mag-article-tree{margin:.3rem .45rem .5rem}
.magazine-desk{position:relative;min-width:0;perspective:1400px;touch-action:pan-y pinch-zoom}
.magazine-sheet{
  min-block-size:clamp(260px,33vw,420px);
  height:100%;
  padding:clamp(24px,6vw,74px);
  background:var(--journal-paper);
  color:var(--journal-ink);
  box-shadow:inset 0 0 26px #4d341623;
  overflow-wrap:anywhere;
}
.magazine-sheet .mag-kicker{
  color:#78501e;
  font-family:inherit;
  font-size:.85rem;
  letter-spacing:normal;
}
.magazine-sheet h2{color:inherit;font-size:clamp(31px,4.5vw,65px);line-height:1.16;margin:.42em 0;padding-block-end:.42em;border-block-end:1px solid #ad8b5b}
.magazine-sheet p{max-width:65ch;line-height:1.9;margin:0 0 1em}
.magazine-sheet a{color:#67431a;text-decoration:underline}
.magazine-turn{position:absolute;inset:0;pointer-events:none;backface-visibility:hidden;overflow:hidden}
.magazine-controls{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,34px);margin-block-start:28px}
.magazine-controls[hidden]{display:none}
.magazine-controls button{background:var(--journal-paper);color:var(--journal-ink);border:1px solid #b8aa92;padding:.55em 1.15em;font:inherit;font-weight:700;cursor:pointer}
.magazine-controls button:disabled{opacity:.5;cursor:default}
.magazine-controls [role="status"]{color:var(--journal-gold);font:700 .9rem Consolas,monospace}
.magazine-hint{text-align:center;font-size:.86rem;color:#e6d9c0;margin-block-start:.9em}
.magazine-footer{padding:18px 4%;text-align:center;border-block-start:1px solid #526079;color:var(--journal-paper);background:#101b2f}
.magazine-footer p{margin:0}
.mag-article p{max-width:none;margin:0;line-height:1.65}
.mag-article-meta{font-size:.86rem;color:#536074;margin-block-end:1rem}
.mag-article-meta .mag-article-subtitle{font-size:1.05rem;font-weight:700;color:var(--journal-ink);margin-block-end:.4rem}
.mag-article-tree{margin-block-start:.4rem;border:1px solid #c7a66c;border-radius:.55rem;background:#fff8e9;color:#382913}
.mag-article-tree summary{display:flex;align-items:center;gap:.5rem;padding:.65rem .7rem;background:#f4e5c8;border-radius:.48rem;cursor:pointer;font-weight:700;list-style:none}
.mag-article-tree summary::-webkit-details-marker{display:none}
.mag-article-tree summary::before{content:'+';inline-size:1.1em;text-align:center;color:#744514}
.mag-article-tree[open] summary::before{content:'−'}
.mag-tree-count{margin-inline-start:auto;padding:.05em .45em;border-radius:.25em;background:#fff8e9;color:#684010;font-size:.8em;font-variant-numeric:tabular-nums}
.mag-article-tree a{display:block;padding:.37rem .42rem;color:inherit;border-radius:.25rem;line-height:1.4;overflow-wrap:anywhere}
.mag-article-tree a:hover{background:#f4e5c8;text-decoration:underline;text-underline-offset:.18em}
.mag-article-tree a[aria-current='location']{background:#f0cf91;color:#452908;box-shadow:inset 0 -2px #a66a23;font-weight:700}
.mag-article-chapter h3{margin:0 0 .45rem;color:inherit;font-size:1.28rem;line-height:1.35}
.mag-article-tree ol{margin:0;padding:.3rem .45rem;list-style:none}
.mag-article-tree ol > li + li{border-block-start:1px solid #eadabc}
.mag-article-tree ol > li > a{font-weight:700}
.mag-article-tree ul{margin:.05rem .45rem .38rem;padding:0 .45rem;border-inline-start:1px solid #bf9b60;list-style:none;font-size:.88em;color:#604a30}
.mag-article-tree ul li{position:relative}
.mag-article-tree ul li::before{content:'';position:absolute;inset-inline-start:-.45rem;inset-block-start:.95rem;inline-size:.4rem;border-block-start:1px solid #bf9b60;pointer-events:none}
.magazine-turn:has(.mag-article){max-block-size:480px}
.mag-article-chapter{margin-block-start:1.3rem;scroll-margin-block-start:1rem}
.mag-article-chapter h3{border-inline-start:3px solid #c38737;padding-inline-start:.55rem}
.mag-article-chapter h4{margin:.65rem 0 .15rem;color:#634219;font-size:1rem;scroll-margin-block-start:1rem}
.mag-article-chapter :is(ol,ul){margin:.3rem 0;padding-inline-start:1.6rem}
.mag-article-chapter p > code{direction:ltr;unicode-bidi:isolate;color:#654415}
.mag-article-chapter pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#152238;color:#fff6e1;padding:.7rem;margin:.45rem 0}
.mag-article-figure{margin:.65rem 0}
.mag-article-figure img{display:block;width:100%;height:auto}
.mag-article-figure figcaption{font-size:.85rem;color:#536074}
.magazine :focus-visible,.article-section :focus-visible{outline:3px solid #d78220;outline-offset:3px}
@media (min-width:651px){
  .magazine-spread:has(.mag-article-tree){background:#24334b}
  .magazine-index:has(.mag-article-tree){position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto}
}
@media (max-width:650px){
  .mag-cards,.magazine-spread{grid-template-columns:1fr}
  .mag-index-group > summary{padding-block:.46rem}
}