:root{
  --paper:#f5f0e8;
  --paper2:#eee6dc;
  --ink:#111418;
  --muted:#646b73;
  --navy:#0d1724;
  --navy2:#162438;
  --red:#b5332e;
  --red2:#8e2521;
  --gold:#b28c4e;
  --line:#d5cdc1;
  --white:#fff;
  --max:1240px;
  --read:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;color:var(--ink);background:var(--paper);
  background-image:linear-gradient(rgba(245,240,232,.96),rgba(245,240,232,.96)),url("images/paper.jpg");
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.65;font-size:16px
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.serif{font-family:Georgia,"Times New Roman",serif}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.progress{height:4px;background:var(--red);position:fixed;top:0;left:0;width:0;z-index:999}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:.6rem .8rem;border:2px solid #111;z-index:1001}
header{
  position:sticky;top:0;z-index:900;background:rgba(245,240,232,.96);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
.header-inner{min-height:82px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.brand{text-decoration:none;display:flex;align-items:center;gap:13px}
.brand strong{font-family:Georgia,serif;font-size:2rem;letter-spacing:-.04em;color:var(--navy)}
.brand span{border-left:1px solid #b8b0a4;padding-left:13px;color:#777d82;text-transform:uppercase;letter-spacing:.16em;font-size:.67rem}
nav{display:flex;justify-content:center;gap:25px}
nav a{text-decoration:none;font-weight:750;font-size:.9rem;color:#30363d}
nav a:hover{color:var(--red)}
.menu{display:none;border:1px solid #aaa195;background:#fff;padding:.55rem .75rem;font-weight:800}
.site-link{font-size:.82rem;color:var(--red);font-weight:850;text-decoration:none}

.hero{
  max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.04fr .96fr;min-height:690px
}
.hero-copy{background:linear-gradient(130deg,#111820,#18212d);color:#fff;padding:62px 54px;display:flex;flex-direction:column;justify-content:center}
.kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#cf4b45;font-weight:850}
.hero-line{width:58px;height:2px;background:#e6e3dc;margin:24px 0}
.hero h1{font-size:clamp(3.4rem,7vw,6.4rem);line-height:.9;letter-spacing:-.055em;margin:0 0 20px}
.hero p{font-size:1.08rem;color:#d8dde3;max-width:600px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:.9rem 1.05rem;text-decoration:none;border:1px solid rgba(255,255,255,.7);font-weight:850}
.btn.primary{background:var(--red);border-color:var(--red)}
.hero-visual{position:relative;background:#111;overflow:hidden}
.hero-visual img{width:100%;height:100%;object-fit:cover}
.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,17,24,.12),transparent 44%,rgba(0,0,0,.15))}
.hero-side{position:absolute;right:34px;top:70px;z-index:2;color:#e2e3e5;letter-spacing:.15em;text-transform:uppercase;line-height:1.75;font-size:.85rem}
.hero-phrase{position:absolute;right:36px;bottom:100px;z-index:2;color:#f2f2f2;font-family:cursive;font-size:2rem;line-height:1.2;opacity:.86}
.section{padding:88px 0}
.section-head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;margin-bottom:28px}
.eyebrow{color:var(--red);font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;font-weight:850}
.section h2{font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:-.04em;margin:.2rem 0 0}
.sidecopy{max-width:360px;color:#4d555d}
.year-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.year-card{display:block;text-decoration:none;border:1px solid var(--line);background:rgba(255,255,255,.5);padding:22px;min-height:160px}
.year-card:hover{transform:translateY(-3px);transition:.18s;box-shadow:0 15px 30px rgba(0,0,0,.07)}
.year-card strong{font-family:Georgia,serif;font-size:2.5rem}
.year-card i{display:block;width:42px;height:4px;background:var(--red);margin:13px 0}
.year-card p{margin:0;color:#485059}
.quote-band{display:grid;grid-template-columns:1.4fr .8fr;gap:42px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;margin-top:26px}
.quote-main{display:flex;gap:22px}
.qbar{width:4px;background:var(--red)}
.quote-main blockquote{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:0;letter-spacing:-.04em}
.quote-side{color:#424a52}
.quote-sign{font-family:Georgia,serif;letter-spacing:.23em;text-transform:uppercase;font-size:.82rem;color:#111}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.story-card{text-decoration:none;display:block}
.story-card img{width:100%;aspect-ratio:1.45/1;object-fit:cover;filter:grayscale(100%)}
.story-meta{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:850;margin-top:16px;color:#555}
.story-card h3{font-size:1.9rem;line-height:1.05;letter-spacing:-.03em;margin:.4rem 0 .55rem}
.story-card p{margin:0;color:#505860}
.story-card .read{display:inline-block;margin-top:15px;color:var(--red);font-weight:850}
.library{background:rgba(255,255,255,.42);border:1px solid var(--line);padding:26px}
.library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.lib-card{border:1px solid #e0d8cd;background:#fbf8f3;padding:20px;text-decoration:none}
.lib-card h3{font-size:1.25rem;margin:0 0 7px}
.lib-card p{font-size:.93rem;color:#59616a;margin:0}
.publisher{display:flex;justify-content:space-between;gap:28px;align-items:center;border-top:2px solid var(--navy);border-bottom:1px solid var(--line);padding:24px 0}
.publisher small{display:block;text-transform:uppercase;letter-spacing:.15em;color:#777;font-weight:800}
.publisher a{font-family:Georgia,serif;font-size:1.45rem;font-weight:700;text-decoration:none}
.publisher p{max-width:620px;color:#555d64}
footer{background:var(--navy);color:#fff;padding:44px 0 52px}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:28px}
.footer-brand{font-family:Georgia,serif;font-size:2rem}
.footer-sub{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:#aab5c2}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{text-decoration:none;color:#fff;font-weight:750}
.footer-bottom{border-top:1px solid #344155;margin-top:22px;padding-top:17px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#9dabb9}
.footer-bottom a{color:#fff;text-decoration:none;font-weight:850}

/* Article pages */
.article-hero{position:relative;background:#111;min-height:560px;display:grid;align-items:end}
.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,18,.08),rgba(9,13,18,.82))}
.article-hero .inside{position:relative;z-index:2;color:#fff;padding:70px 24px 54px;max-width:var(--max);width:100%;margin:auto}
.article-hero .crumbs{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#e3c27a;font-weight:850}
.article-hero h1{font-size:clamp(3rem,6vw,5.5rem);line-height:.94;letter-spacing:-.05em;max-width:900px;margin:14px 0 16px}
.article-hero .dek{font-size:1.08rem;max-width:760px;color:#e0e4e8}
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:58px;align-items:start;padding:60px 24px 80px;max-width:1100px;margin:auto}
.article-body{max-width:760px}
.article-body p{font-family:Georgia,serif;font-size:1.12rem;line-height:1.8;color:#272d33}
.article-body h2{font-size:2.4rem;line-height:1.05;margin:2.2rem 0 .9rem}
.article-body .pull{border-left:5px solid var(--red);padding:18px 22px;background:#eee7dc;font-family:Georgia,serif;font-size:1.4rem;line-height:1.35}
.article-body .note{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;color:#4f565d;font-size:.95rem}
.article-aside{position:sticky;top:110px}
.aside-box{border-top:3px solid var(--navy);padding-top:16px;margin-bottom:26px}
.aside-box h3{font-size:1.25rem;margin:0 0 10px}
.aside-box p,.aside-box li{font-size:.92rem;color:#555d64}
.aside-box ul{padding-left:18px}
.source-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.source-list a{color:var(--red);font-weight:800;text-decoration:none}
.related{border-top:1px solid var(--line);padding-top:28px;margin-top:42px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.related a{border:1px solid var(--line);padding:16px;text-decoration:none;background:#fff}
.related span{display:block;color:var(--red);font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em}
.related strong{font-family:Georgia,serif;font-size:1.12rem}
.page-hero{padding:78px 0 42px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(3rem,6vw,5rem);line-height:.95;letter-spacing:-.05em;margin:.3rem 0}
.page-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px}
.page-list a,.page-list .row{display:grid;grid-template-columns:140px 1fr;gap:18px;background:#fff;padding:20px;text-decoration:none}
.page-list a:hover{background:#faf6f0}
.page-list strong{font-family:Georgia,serif;font-size:1.3rem}
.page-list .date{color:var(--red);font-weight:850;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em}
.backtop{position:fixed;right:18px;bottom:18px;width:50px;height:50px;background:var(--navy);color:#fff;border:0;display:grid;place-items:center;opacity:0;pointer-events:none}
.backtop.show{opacity:1;pointer-events:auto}
@media(max-width:1000px){
  .hero{grid-template-columns:1fr}.hero-visual{min-height:520px}
  .year-grid{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:1fr}
  .library-grid{grid-template-columns:repeat(2,1fr)}
  .article-shell{grid-template-columns:1fr}.article-aside{position:static}
}
@media(max-width:760px){
  .container{padding:0 16px}
  .header-inner{grid-template-columns:1fr auto auto;padding:0 16px}
  .brand span{display:none}
  .brand strong{font-size:1.7rem}
  nav{display:none;position:fixed;top:82px;left:0;right:0;background:var(--paper);padding:12px 16px 20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  nav.open{display:flex}nav a{padding:.7rem 0;width:100%;border-bottom:1px solid var(--line)}
  .site-link{display:none}.menu{display:block}
  .hero{padding:0 16px}.hero-copy{padding:40px 26px}.hero h1{font-size:3.6rem}
  .hero-actions{display:grid}.btn{justify-content:center}.hero-visual{min-height:400px}
  .hero-side{right:18px;top:24px}.hero-phrase{right:18px;bottom:75px;font-size:1.6rem}
  .section{padding:68px 0}.section-head{grid-template-columns:1fr}
  .year-grid{grid-template-columns:1fr}.quote-band{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr}.library-grid{grid-template-columns:1fr}
  .publisher{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr}.footer-links{justify-content:flex-start}
  .article-hero{min-height:500px}.article-hero .inside{padding:55px 16px 38px}
  .article-shell{padding:42px 16px 65px}.article-body p{font-size:1.05rem}
  .related-grid{grid-template-columns:1fr}.page-list a,.page-list .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* =========================================================
   HOMEPAGE RESPONSIVE REBUILD — premium minimal + cinematic
   ========================================================= */

/* More compact masthead */
header .header-inner{
  min-height:72px;
}
header .brand strong{
  font-size:1.82rem;
}

/* Fused hero rather than two separate boxes */
.hero{
  position:relative;
  display:block;
  max-width:1360px;
  width:calc(100% - 48px);
  min-height:640px;
  padding:0;
  margin:0 auto;
  overflow:hidden;
  background:#0f1824;
}
.hero-visual{
  position:absolute;
  inset:0;
  z-index:0;
  min-height:0;
  overflow:hidden;
}
.hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(13,23,36,.99) 0%,
      rgba(13,23,36,.97) 34%,
      rgba(13,23,36,.80) 52%,
      rgba(13,23,36,.22) 72%,
      rgba(13,23,36,.06) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20));
}
.hero-copy{
  position:relative;
  z-index:2;
  width:min(58%, 720px);
  min-height:640px;
  padding:64px 54px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:transparent;
}
.hero h1{
  margin:0 0 20px;
  max-width:680px;
  font-size:clamp(4rem, 5.6vw, 5.65rem);
  line-height:.91;
  letter-spacing:-.055em;
}
.hero-title-line{
  display:block;
  white-space:nowrap;
}
.hero p{
  max-width:590px;
  margin:.25rem 0 0;
  font-size:1.08rem;
  line-height:1.6;
}
.hero-actions{
  margin-top:30px;
}
.hero .btn{
  min-width:175px;
  justify-content:center;
}
.hero-side{
  right:34px;
  top:52px;
  font-size:.78rem;
  opacity:.85;
}
.hero-phrase{
  right:38px;
  bottom:82px;
  font-size:1.85rem;
}
.hero-disclosure{
  position:absolute;
  z-index:3;
  right:22px;
  bottom:18px;
  padding:.34rem .5rem;
  background:rgba(9,13,18,.58);
  border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.82);
  font-size:.61rem;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
}

/* Make the first section sit cleanly below the hero */
#chapters.section{
  padding-top:76px;
}

/* Better tablet behavior */
@media (max-width:1000px){
  .hero{
    display:block;
    width:calc(100% - 32px);
    min-height:620px;
  }
  .hero-visual{
    position:absolute;
    inset:0;
    min-height:0;
  }
  .hero-copy{
    width:68%;
    min-height:620px;
  }
  .hero h1{
    font-size:clamp(3.6rem, 7vw, 4.9rem);
  }
}

/* Real mobile design: image and text are one composition */
@media (max-width:760px){
  header .header-inner{
    min-height:66px;
    padding:0 14px;
  }
  header .brand strong{
    font-size:1.48rem;
  }
  header nav{
    top:66px;
  }
  .menu{
    padding:.5rem .68rem;
    font-size:.86rem;
  }

  .hero{
    width:100%;
    max-width:none;
    min-height:700px;
    margin:0;
  }
  .hero-visual{
    position:absolute;
    inset:0;
    min-height:0;
  }
  .hero-visual img{
    object-position:69% center;
  }
  .hero-visual::after{
    background:
      linear-gradient(180deg,
        rgba(13,23,36,.08) 0%,
        rgba(13,23,36,.14) 27%,
        rgba(13,23,36,.55) 46%,
        rgba(13,23,36,.93) 65%,
        rgba(13,23,36,1) 100%),
      linear-gradient(90deg, rgba(13,23,36,.30), rgba(13,23,36,.02));
  }
  .hero-copy{
    width:100%;
    min-height:700px;
    padding:300px 22px 30px;
    justify-content:flex-end;
  }
  .hero .kicker{
    max-width:320px;
    margin-bottom:12px;
    font-size:.64rem;
    line-height:1.45;
    letter-spacing:.145em;
  }
  .hero-line{
    width:46px;
    margin:12px 0 17px;
  }
  .hero h1{
    max-width:none;
    margin-bottom:15px;
    font-size:clamp(2.8rem, 13vw, 3.45rem);
    line-height:.92;
    letter-spacing:-.052em;
  }
  .hero-title-line{
    display:block;
    white-space:normal;
  }
  .hero p{
    max-width:330px;
    font-size:.96rem;
    line-height:1.52;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    width:100%;
    margin-top:22px;
  }
  .hero .btn{
    min-width:0;
    padding:.76rem .68rem;
    font-size:.84rem;
    white-space:nowrap;
  }
  .hero-side,
  .hero-phrase{
    display:none;
  }
  .hero-disclosure{
    right:12px;
    top:12px;
    bottom:auto;
    font-size:.52rem;
    background:rgba(9,13,18,.48);
  }

  #chapters.section{
    padding-top:54px;
  }

  /* Horizontal chapter rail feels much better on a phone */
  .year-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    padding:0 0 8px;
    scrollbar-width:none;
  }
  .year-grid::-webkit-scrollbar{display:none}
  .year-card{
    flex:0 0 78vw;
    min-height:150px;
    scroll-snap-align:start;
  }

  .quote-main blockquote{
    font-size:1.85rem;
  }
  .story-card h3{
    font-size:1.55rem;
  }
}

/* Very narrow phones */
@media (max-width:390px){
  .hero-copy{
    padding-left:18px;
    padding-right:18px;
  }
  .hero h1{
    font-size:2.72rem;
  }
  .hero-actions{
    grid-template-columns:1fr;
  }
  .year-card{
    flex-basis:84vw;
  }
}