:root{
  --ink:#181715;
  --paper:#f4ecdc;
  --cream:#fffaf1;
  --red:#d73a32;
  --blue:#244b87;
  --yellow:#f0cc36;
  --pink:#e66a8d;
  --line:#2a2824;
  --max:1480px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.5;
}
img{display:block;width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px;top:10px;background:white;padding:10px;z-index:100}
.skip:focus{left:10px}
.site-header{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:250px 1fr auto;
  align-items:center;gap:28px;
  min-height:92px;padding:14px clamp(20px,4vw,64px);
  background:rgba(255,250,241,.95);
  border-bottom:2px solid var(--ink);
  backdrop-filter:blur(12px);
}
.brand,.footer-brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-size:1.55rem;font-weight:900;line-height:.85;letter-spacing:-.05em;
}
.brand img,.footer-brand img{width:70px;height:60px;object-fit:contain}
.nav{display:flex;justify-content:center;gap:clamp(18px,3vw,46px)}
.nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:800}
.header-cta{padding:11px 16px;background:var(--ink);color:white;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:800}
.menu-toggle{display:none;border:0;background:none}
.hero{
  position:relative;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  min-height:820px;
  overflow:hidden;
  background:var(--yellow);
  border-bottom:2px solid var(--ink);
}
.hero:before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),url("assets/doodle.png");
  background-size:cover;background-position:center;
  opacity:.22;mix-blend-mode:multiply;
}
.hero-text{
  position:relative;z-index:4;
  display:flex;flex-direction:column;justify-content:center;
  padding:110px 50px 110px clamp(24px,7vw,110px);
}
.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.7rem;font-weight:900}
.eyebrow.light{color:rgba(255,255,255,.78)}
.hero h1,.section-heading h2,.archive-hero h2,.story-copy h2,.memoir-copy h2,.final-grid h2{
  margin:12px 0 24px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;line-height:.9;letter-spacing:-.055em;
}
.hero h1{font-size:clamp(5rem,9vw,9rem)}
.hero h1 em{font-weight:400}
.lede{max-width:620px;font-size:1.2rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 20px;border:2px solid var(--ink);
  text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:900;
}
.button.red{background:var(--red);border-color:var(--red);color:white}
.button.line{background:transparent}
.button.dark{background:var(--ink);color:white}
.button.yellow{background:var(--yellow);border-color:var(--yellow)}
.hero-visual{position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:center;padding:60px 30px 0}
.hero-people{position:relative;z-index:2;width:min(95%,760px);max-height:720px;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply}
.sunburst{
  position:absolute;z-index:0;width:680px;height:680px;border-radius:50%;
  background:repeating-conic-gradient(var(--red) 0 9deg,transparent 9deg 18deg);
  opacity:.16;transform:rotate(-8deg);
}
.issue-stamp{
  position:absolute;right:34px;top:54px;z-index:4;
  display:flex;flex-direction:column;padding:12px 16px;
  background:var(--blue);color:white;border:3px solid white;outline:2px solid var(--ink);
  transform:rotate(3deg);
}
.issue-stamp strong{font-family:Georgia,serif;font-size:1.25rem}
.issue-stamp span{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}
.hero-caption{
  position:absolute;z-index:5;left:0;right:0;bottom:0;
  display:flex;gap:30px;padding:15px clamp(24px,7vw,110px);
  border-top:2px solid var(--ink);background:rgba(255,250,241,.92);
  text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:900;
}
.news-flash{
  display:grid;grid-template-columns:auto 1fr 120px;align-items:center;
  border-bottom:2px solid var(--ink);background:var(--paper);
}
.flash-label{
  align-self:stretch;display:grid;place-items:center;padding:16px 24px;
  background:var(--red);color:white;text-transform:uppercase;letter-spacing:.16em;font-weight:900;font-size:.7rem;
}
.flash-copy{display:flex;flex-direction:column;padding:14px 24px}
.flash-copy strong{font-family:Georgia,serif;font-size:1.15rem}
.flash-copy span{font-size:.82rem}
.news-flash img{height:82px;object-fit:contain;padding:8px;background:white}
.section{max-width:var(--max);margin:auto;padding:clamp(80px,9vw,140px) clamp(20px,5vw,78px)}
.section-heading{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:54px}
.section-heading.split{grid-template-columns:1.15fr .85fr;align-items:end}
.section-heading>p,.section-heading div>p{margin:0;text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;font-weight:900}
.section-heading h2,.archive-hero h2,.story-copy h2,.memoir-copy h2,.final-grid h2{font-size:clamp(4rem,7vw,7.5rem)}
.heading-note{max-width:500px;font-size:1.05rem}
.comic-spread{
  display:grid;grid-template-columns:.65fr 1fr;grid-template-rows:auto auto;gap:18px;
}
.comic-spread>*{border:3px solid var(--ink);background:white}
.comic-intro{position:relative;grid-row:1/span 2;padding:68px 40px 42px;display:flex;flex-direction:column;justify-content:center}
.comic-intro:after{content:"";position:absolute;inset:17px;border:1px solid rgba(0,0,0,.22)}
.comic-intro>*{position:relative;z-index:2}
.panel-tag{position:absolute;top:28px;left:38px;background:var(--yellow);padding:5px 8px;text-transform:uppercase;letter-spacing:.1em;font-size:.65rem;font-weight:900}
.comic-intro p{font-family:Georgia,serif;font-size:clamp(1.5rem,2.3vw,2.25rem);line-height:1.3}
.arrow-link{font-weight:900;text-decoration:none;margin-top:20px}
.cover-panel,.strip-panel{margin:0;padding:18px;display:grid;grid-template-rows:1fr auto}
.cover-panel img{height:470px;object-fit:contain;background:var(--yellow)}
.strip-panel img{height:280px;object-fit:cover;object-position:center}
.cover-panel figcaption,.strip-panel figcaption{padding:12px 0 0;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.quote-band{padding:34px 7vw;background:var(--blue);color:white;border-block:2px solid var(--ink)}
.quote-band p{max-width:1320px;margin:auto;font-family:Georgia,serif;font-size:clamp(2rem,4vw,4.8rem);font-style:italic;line-height:1.1}
.design-section{background:var(--cream)}
.design-mosaic{
  display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:280px;gap:16px;
}
.tile{position:relative;margin:0;overflow:hidden;border:2px solid var(--ink);background:#ddd}
.tile-wide{grid-column:span 2}.tile-tall{grid-row:span 2}
.tile img{height:100%;object-fit:cover;transition:.35s transform}
.tile:hover img{transform:scale(1.03)}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:rgba(24,23,21,.9);color:white;font-weight:800;
}
.tile figcaption span{display:block;color:var(--yellow);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem}
.archive-section{background:var(--ink);color:white}
.archive-hero{
  position:relative;display:grid;grid-template-columns:1.25fr .75fr;min-height:650px;overflow:hidden;border-bottom:2px solid white;
}
.archive-hero img{height:650px;object-fit:cover;opacity:.82}
.archive-hero>div{display:flex;flex-direction:column;justify-content:center;padding:60px}
.archive-hero>div p:last-child{max-width:500px;color:rgba(255,255,255,.78)}
.archive-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;background:white}
.archive-grid figure{margin:0;background:var(--ink)}
.archive-grid img{height:360px;object-fit:cover}
.archive-grid figcaption{padding:14px 18px;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;font-weight:900}
.story-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.story-copy p{max-width:680px}
.story-copy .button{margin-top:18px}
.story-visual{position:relative}
.story-visual>img{border:3px solid var(--ink)}
.story-note{
  position:absolute;right:-22px;bottom:-28px;width:230px;padding:18px;
  background:var(--red);color:white;border:3px solid var(--ink);transform:rotate(-2deg);
}
.story-note strong{display:block;font-family:Georgia,serif;font-size:2rem}
.story-note span{font-size:.82rem}
.memoir-section{display:grid;grid-template-columns:1.2fr .8fr;background:var(--blue);color:white;border-block:2px solid var(--ink)}
.memoir-art img{height:720px;object-fit:cover}
.memoir-copy{display:flex;flex-direction:column;justify-content:center;padding:70px}
.memoir-copy p{max-width:520px;color:rgba(255,255,255,.82)}
.memoir-copy .button{align-self:flex-start;margin-top:20px;color:var(--ink)}
.final-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}
.door-grid{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.door-grid a{
  min-height:220px;padding:24px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  display:flex;flex-direction:column;text-decoration:none;transition:.2s background,.2s color;
}
.door-grid a:hover{background:var(--ink);color:white}
.door-grid span{font-size:.7rem;font-weight:900}
.door-grid strong{margin:auto 0 8px;font-family:Georgia,serif;font-size:1.8rem}
.door-grid small{font-size:.76rem}
footer{
  display:grid;grid-template-columns:1.2fr .8fr .7fr 1fr;gap:40px;
  padding:60px clamp(20px,5vw,78px);background:var(--paper);border-top:2px solid var(--ink);
}
footer a{display:block;text-decoration:none;margin:4px 0}
.footer-label{text-transform:uppercase;letter-spacing:.13em;font-size:.65rem;font-weight:900}
.footer-note{align-self:end}
.footer-note p{font-family:Georgia,serif;font-size:1.2rem}
.footer-note small{color:#6e675d}
@media(max-width:1000px){
  .site-header{grid-template-columns:1fr auto}.nav,.header-cta{display:none}.menu-toggle{display:block}
  .menu-toggle span{display:block;width:28px;height:2px;background:var(--ink);margin:5px}
  .menu-toggle b{font-size:.6rem;text-transform:uppercase}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);padding:22px;border-bottom:2px solid var(--ink)}
  .hero{grid-template-columns:1fr;min-height:auto}.hero-text{padding-bottom:50px}.hero-visual{min-height:600px}
  .section-heading.split,.story-section,.memoir-section,.final-grid,.archive-hero{grid-template-columns:1fr}
  .comic-spread{grid-template-columns:1fr}.comic-intro{grid-row:auto}.design-mosaic{grid-template-columns:1fr 1fr}.tile-wide{grid-column:span 2}
  .archive-grid{grid-template-columns:1fr}.archive-grid img{height:460px}
  .memoir-art img{height:560px}.story-note{right:10px}
  footer{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .brand img,.footer-brand img{width:54px;height:48px}.brand{font-size:1.2rem}
  .hero h1{font-size:4.4rem}.hero-text{padding:80px 20px 40px}.hero-visual{min-height:470px}.hero-caption{display:none}
  .news-flash{grid-template-columns:1fr}.flash-label{min-height:44px}.news-flash img{display:none}
  .section{padding:70px 16px}.section-heading h2,.archive-hero h2,.story-copy h2,.memoir-copy h2,.final-grid h2{font-size:3.8rem}
  .comic-intro{padding:70px 28px 38px}.cover-panel img{height:360px}.strip-panel img{height:auto}
  .design-mosaic{grid-template-columns:1fr;grid-auto-rows:300px}.tile-wide{grid-column:auto}.tile-tall{grid-row:auto}
  .archive-hero img{height:420px}.archive-hero>div{padding:44px 20px}.archive-grid img{height:300px}
  .memoir-art img{height:420px}.memoir-copy{padding:54px 22px}
  .door-grid{grid-template-columns:1fr}.final-grid{gap:30px}
  footer{grid-template-columns:1fr}
}