:root{
  --sp-ink:#1d2b23;
  --sp-deep:#112319;
  --sp-green:#36583e;
  --sp-sage:#7f8f73;
  --sp-gold:#b7894d;
  --sp-earth:#876648;
  --sp-paper:#f7f2e8;
  --sp-paper-2:#ece4d5;
  --sp-line:#ddd6ca;
  --sp-rust:#9b6852;
}

.special-page{
  padding:18px;
  counter-reset:chapter;
}

.special-breadcrumb{
  display:flex;
  align-items:center;
  gap:7px;
  margin:3px 2px 12px;
  color:#8b918c;
  font-size:9px;
}
.special-breadcrumb a{color:#647068}
.special-breadcrumb span{opacity:.65}

/* COVER */
.special-cover{
  position:relative;
  min-height:850px;
  overflow:hidden;
  border-radius:36px;
  background:#17301f;
  box-shadow:var(--shadow);
}

.special-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  opacity:.9;
}

.special-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(8,25,14,.08) 0%,rgba(8,25,14,.18) 36%,rgba(8,25,14,.92) 100%),
    linear-gradient(90deg,rgba(8,25,14,.64) 0%,rgba(8,25,14,.08) 62%,rgba(8,25,14,.08) 100%);
}

.cover-top{
  position:absolute;
  z-index:4;
  left:28px;
  right:28px;
  top:26px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.cover-edition{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}

.cover-edition span{
  display:block;
  color:#c3d2c6;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cover-edition strong{
  display:block;
  margin-top:2px;
  font-family:"Libre Caslon Display",serif;
  font-size:28px;
  line-height:1;
  font-weight:400;
}

.cover-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:9px;
  font-weight:800;
  backdrop-filter:blur(8px);
}

.cover-tools{
  display:flex;
  gap:8px;
}
.cover-tools button{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  backdrop-filter:blur(8px);
}

.cover-copy{
  position:absolute;
  z-index:4;
  left:34px;
  right:34px;
  bottom:32px;
  color:#fff;
}

.cover-copy .tag{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.12);
}

.cover-copy h1{
  max-width:1150px;
  margin:14px 0 10px;
  font-family:"Libre Caslon Display",serif;
  font-size:clamp(72px,8vw,128px);
  line-height:.82;
  letter-spacing:-.06em;
  font-weight:400;
}

.cover-copy p{
  max-width:850px;
  margin:0;
  color:#dce8df;
  font-size:14px;
  line-height:1.5;
}

.cover-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}
.cover-meta span{
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#eef4ef;
  font-size:8px;
}

/* CHAPTER RAIL */
.special-rail{
  position:sticky;
  top:74px;
  z-index:25;
  display:flex;
  gap:8px;
  margin:18px 0;
  padding:8px;
  overflow:auto;
  border:1px solid var(--sp-line);
  border-radius:18px;
  background:rgba(247,243,235,.94);
  backdrop-filter:blur(14px);
  scrollbar-width:none;
  box-shadow:0 8px 24px rgba(44,50,45,.04);
}
.special-rail::-webkit-scrollbar{display:none}
.special-rail a{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:999px;
  color:#5e675f;
  font-size:9px;
  font-weight:800;
}
.special-rail a.active{
  background:var(--sp-deep);
  color:#fff;
}

/* OPENING SPREAD */
.opening-spread{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:18px;
  margin-top:18px;
}

.opening-manifesto{
  min-height:470px;
  padding:28px;
  border:1px solid var(--sp-line);
  border-radius:30px;
  background:
    radial-gradient(circle at 90% 10%,rgba(183,137,77,.13),transparent 28%),
    linear-gradient(145deg,#f5ede1,#fffdf8);
  box-shadow:var(--shadow-soft);
}

.opening-manifesto span{
  color:var(--sp-earth);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.opening-manifesto h2{
  margin:12px 0 12px;
  font-family:"Libre Caslon Display",serif;
  font-size:50px;
  line-height:.98;
  font-weight:400;
  color:var(--sp-ink);
}

.opening-manifesto p{
  margin:0;
  color:#675f55;
  font-size:12px;
  line-height:1.6;
}

.opening-quote{
  position:relative;
  overflow:hidden;
  min-height:470px;
  border-radius:30px;
  background:#1a3122;
  box-shadow:var(--shadow-soft);
}

.opening-quote img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.62;
}

.opening-quote::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(9,29,17,.12),rgba(9,29,17,.9));
}

.opening-quote blockquote{
  position:absolute;
  z-index:3;
  left:26px;
  right:26px;
  bottom:25px;
  margin:0;
  color:#fff;
  font-family:"Libre Caslon Display",serif;
  font-size:46px;
  line-height:1;
}

.opening-quote small{
  display:block;
  margin-top:12px;
  color:#c9d8cc;
  font-family:"DM Sans",sans-serif;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* CHAPTER SYSTEM */
.story-chapter{
  position:relative;
  margin-top:26px;
}

.story-chapter::before{
  counter-increment:chapter;
  content:"0" counter(chapter);
  position:absolute;
  left:-2px;
  top:-8px;
  color:rgba(30,44,35,.08);
  font-family:"Libre Caslon Display",serif;
  font-size:120px;
  line-height:1;
  pointer-events:none;
}

.chapter-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px;
  align-items:end;
  padding:42px 0 20px;
  border-bottom:1px solid var(--sp-line);
}

.chapter-label span{
  display:block;
  color:var(--sp-earth);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.chapter-label strong{
  display:block;
  margin-top:5px;
  color:#7b827c;
  font-size:9px;
}

.chapter-head h2{
  margin:0;
  max-width:980px;
  color:var(--sp-ink);
  font-family:"Libre Caslon Display",serif;
  font-size:54px;
  line-height:.96;
  font-weight:400;
}

/* FULL BLEED VISUAL */
.full-bleed{
  position:relative;
  min-height:640px;
  overflow:hidden;
  margin-top:18px;
  border-radius:30px;
  background:#203227;
}

.full-bleed img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.full-bleed::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 20%,rgba(8,28,16,.84) 100%);
}

.full-bleed-caption{
  position:absolute;
  z-index:3;
  left:26px;
  right:26px;
  bottom:23px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:end;
  color:#fff;
}

.full-bleed-caption h3{
  margin:0;
  max-width:880px;
  font-family:"Libre Caslon Display",serif;
  font-size:43px;
  line-height:1;
  font-weight:400;
}

.full-bleed-caption p{
  max-width:300px;
  margin:0;
  color:#d8e4da;
  font-size:9px;
  line-height:1.4;
  text-align:right;
}

/* DATA STORY */
.data-story{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:18px;
  margin-top:18px;
}

.data-copy{
  padding:26px;
  border:1px solid var(--sp-line);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.data-copy span{
  color:var(--sp-gold);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.data-copy h3{
  margin:10px 0 9px;
  color:var(--sp-ink);
  font-family:"Libre Caslon Display",serif;
  font-size:40px;
  line-height:1;
  font-weight:400;
}

.data-copy p{
  margin:0;
  color:#6a716b;
  font-size:10px;
  line-height:1.5;
}

.data-figure{
  position:relative;
  min-height:420px;
  overflow:hidden;
  border:1px solid var(--sp-line);
  border-radius:28px;
  background:
    linear-gradient(rgba(54,88,62,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(54,88,62,.04) 1px,transparent 1px),
    linear-gradient(145deg,#f7f7f2,#ecefe8);
  background-size:48px 48px,48px 48px,auto;
  box-shadow:var(--shadow-soft);
}

.figure-axis{
  position:absolute;
  left:58px;
  right:28px;
  bottom:50px;
  height:1px;
  background:#cfd5ce;
}

.figure-bars{
  position:absolute;
  left:58px;
  right:34px;
  bottom:50px;
  top:38px;
  display:flex;
  align-items:flex-end;
  gap:18px;
}

.figure-item{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
}

.figure-bar{
  width:100%;
  max-width:58px;
  border-radius:10px 10px 2px 2px;
  background:linear-gradient(180deg,var(--sp-sage),var(--sp-green));
}
.fb1{height:82%}
.fb2{height:70%}
.fb3{height:58%}
.fb4{height:48%}
.fb5{height:38%}
.fb6{height:30%}
.fb7{height:22%}

.figure-item strong{
  margin-top:8px;
  color:#405046;
  font-size:8px;
  text-align:center;
}

.figure-note{
  position:absolute;
  left:18px;
  top:18px;
  color:#828a83;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

/* MAP STORY */
.map-story{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  margin-top:18px;
}

.map-stage{
  position:relative;
  min-height:590px;
  overflow:hidden;
  border-radius:30px;
  border:1px solid var(--sp-line);
  background:
    radial-gradient(circle at 52% 48%,rgba(183,137,77,.12),transparent 29%),
    linear-gradient(145deg,#eef1e8,#f8f5ee);
  box-shadow:var(--shadow-soft);
}

.map-shape{
  position:absolute;
  width:330px;
  height:365px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#cfd3ba;
  clip-path:polygon(33% 3%,56% 8%,65% 17%,78% 19%,86% 33%,82% 46%,92% 56%,81% 68%,74% 84%,58% 99%,45% 91%,35% 79%,22% 75%,16% 62%,7% 50%,14% 37%,10% 24%,24% 17%);
  filter:drop-shadow(0 18px 24px rgba(70,75,63,.08));
}

.map-pin{
  position:absolute;
  z-index:3;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--sp-gold);
  box-shadow:0 0 0 7px rgba(183,137,77,.12);
}

.pin-n{left:38%;top:24%}
.pin-co{left:43%;top:46%}
.pin-ne{left:64%;top:34%}
.pin-se{left:58%;top:62%}
.pin-s{left:49%;top:76%}

.map-label{
  position:absolute;
  z-index:3;
  min-width:145px;
  padding:9px 10px;
  border:1px solid #dcd8ce;
  border-radius:12px;
  background:rgba(255,253,248,.92);
  color:#6d756e;
  font-size:8px;
  box-shadow:0 8px 20px rgba(49,56,50,.04);
}
.map-label strong{
  display:block;
  color:#2f3d34;
  font-size:10px;
  margin-bottom:2px;
}
.ml-n{left:10%;top:13%}
.ml-ne{right:6%;top:19%}
.ml-co{left:8%;top:48%}
.ml-se{right:5%;top:58%}
.ml-s{left:22%;bottom:7%}

.map-notes{
  padding:24px;
  border:1px solid var(--sp-line);
  border-radius:30px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.map-notes span{
  color:var(--sp-earth);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.map-notes h3{
  margin:10px 0 12px;
  color:var(--sp-ink);
  font-family:"Libre Caslon Display",serif;
  font-size:42px;
  line-height:1;
  font-weight:400;
}

.map-notes p{
  margin:0;
  color:#687068;
  font-size:10px;
  line-height:1.5;
}

.region-note{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:10px;
  padding:11px 0;
  border-top:1px solid #ece8df;
}
.region-note:first-of-type{margin-top:14px}
.region-note strong{
  color:#34463a;
  font-size:9px;
}
.region-note span{
  color:#7f867f;
  font-size:8px;
  text-transform:none;
  letter-spacing:0;
  line-height:1.35;
}

/* PHOTO ESSAY */
.photo-essay{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:10px;
}

.photo-large,
.photo-small{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  background:#203328;
}

.photo-large{min-height:620px}

.photo-stack{
  display:grid;
  gap:10px;
}

.photo-small{min-height:305px}

.photo-large img,
.photo-small img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo-caption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(12,29,19,.5);
  color:#fff;
  backdrop-filter:blur(7px);
  font-size:8px;
  line-height:1.35;
}

/* TIMELINE */
.timeline-story{
  margin-top:18px;
  padding:22px;
  border:1px solid var(--sp-line);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.timeline-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:20px;
  padding-top:34px;
}

.timeline-line::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:17px;
  height:1px;
  background:#d5d9d3;
}

.timeline-item{
  position:relative;
}

.timeline-item::before{
  content:"";
  position:absolute;
  top:-24px;
  left:0;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#fff;
  border:4px solid var(--sp-gold);
}

.timeline-item span{
  color:var(--sp-earth);
  font-size:8px;
  font-weight:800;
}

.timeline-item strong{
  display:block;
  margin-top:5px;
  color:#314238;
  font-size:11px;
}

.timeline-item p{
  margin:5px 0 0;
  color:#818780;
  font-size:8px;
  line-height:1.35;
}

/* INTERVIEW */
.interview-spread{
  margin-top:18px;
  display:grid;
  grid-template-columns:360px 1fr;
  overflow:hidden;
  border:1px solid var(--sp-line);
  border-radius:30px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.interview-person{
  position:relative;
  min-height:560px;
  overflow:hidden;
  background:#22352a;
}

.interview-person img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.interview-person::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(7,27,16,.8));
}

.person-caption{
  position:absolute;
  z-index:3;
  left:18px;
  right:18px;
  bottom:17px;
  color:#fff;
}

.person-caption span{
  display:block;
  color:#c5d3c8;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.person-caption strong{
  display:block;
  margin-top:4px;
  font-size:13px;
}

.interview-copy{
  padding:28px;
}

.interview-copy span{
  color:var(--sp-earth);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.interview-copy h3{
  margin:10px 0 14px;
  color:var(--sp-ink);
  font-family:"Libre Caslon Display",serif;
  font-size:44px;
  line-height:1;
  font-weight:400;
}

.qa{
  padding:13px 0;
  border-top:1px solid #ece8df;
}

.qa strong{
  display:block;
  color:#36453b;
  font-size:10px;
}

.qa p{
  margin:6px 0 0;
  color:#6c746d;
  font-size:9px;
  line-height:1.45;
}

/* FINAL */
.special-finale{
  position:relative;
  min-height:650px;
  overflow:hidden;
  margin-top:26px;
  border-radius:32px;
  background:#183020;
  box-shadow:var(--shadow-soft);
}

.special-finale img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.76;
}

.special-finale::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(8,25,14,.06),rgba(8,25,14,.85)),
    linear-gradient(90deg,rgba(8,25,14,.5),transparent 65%);
}

.finale-copy{
  position:absolute;
  z-index:3;
  left:30px;
  right:30px;
  bottom:28px;
  color:#fff;
}

.finale-copy span{
  color:#c4d4c7;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.finale-copy h2{
  max-width:900px;
  margin:10px 0 9px;
  font-family:"Libre Caslon Display",serif;
  font-size:58px;
  line-height:.95;
  font-weight:400;
}

.finale-copy p{
  max-width:720px;
  margin:0;
  color:#d8e4da;
  font-size:11px;
  line-height:1.45;
}

.special-credits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:18px;
}

.credit{
  padding:14px;
  border:1px solid var(--sp-line);
  border-radius:16px;
  background:#fff;
}

.credit span{
  display:block;
  color:#8b918c;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.credit strong{
  display:block;
  margin-top:5px;
  color:#344239;
  font-size:10px;
}

.special-note{
  margin-top:10px;
  color:#8b918b;
  font-size:8px;
}

@media(max-width:1180px){
  .chapter-head{grid-template-columns:150px 1fr}
  .special-credits{grid-template-columns:1fr 1fr}
}

@media(max-width:980px){
  .opening-spread,
  .data-story,
  .map-story,
  .photo-essay,
  .interview-spread{
    grid-template-columns:1fr;
  }
  .interview-person{min-height:480px}
  .timeline-line{grid-template-columns:1fr}
  .timeline-line::before{
    top:0;
    bottom:0;
    left:8px;
    right:auto;
    width:1px;
    height:auto;
  }
  .timeline-item{padding-left:34px}
  .timeline-item::before{top:2px;left:1px}
}

@media(max-width:760px){
  .special-page{padding:12px}
  .special-cover{min-height:760px;border-radius:26px}
  .cover-copy{left:20px;right:20px;bottom:20px}
  .cover-copy h1{font-size:62px}
  .special-rail{top:66px}
  .opening-manifesto{padding:20px}
  .opening-manifesto h2{font-size:39px}
  .chapter-head{
    grid-template-columns:1fr;
    gap:8px;
  }
  .chapter-head h2{font-size:42px}
  .full-bleed{min-height:500px}
  .full-bleed-caption{grid-template-columns:1fr}
  .full-bleed-caption p{text-align:left}
  .data-copy{padding:19px}
  .data-copy h3{font-size:35px}
  .map-notes{padding:19px}
  .map-notes h3{font-size:36px}
  .photo-large{min-height:460px}
  .photo-small{min-height:240px}
  .interview-copy{padding:20px}
  .interview-copy h3{font-size:37px}
  .special-finale{min-height:520px}
  .finale-copy h2{font-size:44px}
  .special-credits{grid-template-columns:1fr}
}

@media(max-width:480px){
  .special-cover{min-height:820px}
  .cover-copy h1{font-size:54px}
  .cover-top{left:16px;right:16px}
  .map-stage{min-height:520px}
  .map-shape{width:260px;height:300px}
  .map-label{min-width:120px}
}