/* ============================================================
   UN.COMMON.ICON — story pages (editorial spreads)
   Loads after styles.css; inherits all tokens.
   ============================================================ */

/* --- Minimal masthead --- */
.story-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px var(--pad);
  background: rgba(18,15,11,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(90,83,74,.35);
}
.story-logo { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .14em; color: var(--cream); text-decoration: none; }
.story-logo .d { color: var(--signal); }
.story-nav { display: flex; align-items: center; gap: 26px; }
.story-nav a, .story-issue {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--taupe); text-decoration: none;
}
.story-nav a:hover, .story-nav a:focus-visible { color: var(--signal); }

/* --- Story hero --- */
/* top padding kept small: story pages now use the full 108px sticky header, so a big hero pad created a cavern */
.story-hero { padding: clamp(14px,2vh,30px) var(--pad) clamp(16px,2.4vh,32px); max-width: var(--maxw); margin: 0 auto; }
.story-series {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe);
  border-bottom: 1px solid rgba(90,83,74,.35); padding-bottom: 12px; margin-bottom: clamp(16px,2.4vw,30px);
}
.story-series .no { color: var(--signal); }
.story-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 7vw, 112px); line-height: .96; letter-spacing: .01em; color: var(--cream);
  margin: 0 0 clamp(22px,3vw,40px); overflow-wrap: break-word;
}
.story-title em { font-family: var(--font-serif); font-style: italic; text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--cream); }
.story-standfirst {
  font-family: var(--font-serif); font-size: clamp(19px,2vw,27px); line-height: 1.55; color: var(--serif);
  max-width: 34em; margin: 0 0 clamp(22px,3vw,38px);
}
.story-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.story-meta a { color: var(--glow); text-decoration: none; }
.story-meta a:hover { text-decoration: underline; }

/* First body element sits close to the hero — its own big top margin created a void after the top divider */
.story-body > *:first-child { margin-top: 0; }
.story-body > *:first-child .arch-issue { margin-top: 0; }

/* --- Spreads --- */
.story-body { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(60px,8vh,120px); }
.spread { margin: clamp(44px,7vw,110px) 0; }
.spread img, .spread video { width: 100%; height: auto; display: block; background: var(--frame); }
.spread--full img { max-height: 88vh; object-fit: cover; }
.spread--duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,1.6vw,22px); align-items: start; }
.spread--trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.6vw,22px); align-items: start; }
.spread figure { margin: 0; }
.spread figcaption, .spread .cap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--taupe); padding-top: 10px;
}
.spread--video { max-width: 560px; margin-left: auto; margin-right: auto; }

/* --- Prose --- */
.story-prose {
  max-width: 62ch; margin: clamp(40px,6vw,90px) auto;
  font-family: var(--font-serif); font-size: clamp(18px,1.35vw,22px); line-height: 1.75; color: var(--serif);
}
.story-prose p + p { margin-top: 1.4em; }
.story-prose .lead::first-letter {
  font-family: var(--font-display); font-weight: 800; color: var(--cream);
  font-size: 3.1em; float: left; line-height: .82; padding-right: .12em; padding-top: .04em;
}
.story-prose strong { color: var(--cream); font-weight: 600; }

/* --- Case study extras (Selected Work pages) --- */
.case-h {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--signal); font-weight: 400; margin: 0 0 1.2em;
  border-top: 1px solid rgba(90,83,74,.35); padding-top: 18px;
}
.case-list { list-style: none; margin: 0; padding: 0; }
.case-list li {
  position: relative; padding-left: 1.6em; margin-bottom: .8em;
  font-family: var(--font-serif); font-size: clamp(17px,1.3vw,21px); line-height: 1.6; color: var(--serif);
}
.case-list li::before { content: '✶'; position: absolute; left: 0; color: var(--pen); font-size: .85em; }

/* --- Pull quote --- */
.story-pull {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px,4.6vw,64px); line-height: 1.04; color: var(--cream); text-align: center;
  max-width: 18em; margin: clamp(56px,9vw,130px) auto;
}
.story-pull .ink { color: var(--pen); }
.story-pull .uv { color: var(--glow); }

/* --- End-of-story CTA --- */
.story-cta {
  border: 1px solid rgba(236,230,218,.14);
  padding: clamp(26px,4vw,48px);
  margin-top: clamp(48px,7vw,100px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
}
.story-cta .lines { max-width: 30em; }
.story-cta .k {
  display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 10px;
}
.story-cta .t { font-family: var(--font-serif); font-size: clamp(17px,1.6vw,21px); line-height: 1.5; color: var(--serif); margin: 0; }
.story-cta .acts { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* --- Where to next paths --- */
.story-paths { margin-top: clamp(48px,7vw,100px); }
.paths-k {
  display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 8px;
}
.path-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px,2.4vw,30px) 0; border-top: 1px solid rgba(236,230,218,0.16);
  text-decoration: none; transition: padding-left .4s ease, border-color .4s ease;
}
.path-row:last-child { border-bottom: 1px solid rgba(236,230,218,0.16); }
.path-row:hover { padding-left: 12px; border-top-color: rgba(216,255,71,0.5); }
.pr-title {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(22px,2.6vw,38px);
  line-height: 1.08; letter-spacing: -0.014em; color: var(--cream); transition: color .4s ease;
}
.pr-arrow {
  flex-shrink: 0; font-family: var(--font-display); font-size: clamp(24px,2.4vw,38px); line-height: 1;
  color: var(--taupe); opacity: .45; transform: translateX(-10px);
  transition: transform .4s ease, color .4s ease, opacity .4s ease;
}
.path-row:hover .pr-title { color: var(--signal); }
.path-row:hover .pr-arrow { color: var(--signal); opacity: 1; transform: none; }

/* --- Credits + next --- */
.story-credits {
  border-top: 1px solid rgba(90,83,74,.35); border-bottom: 1px solid rgba(90,83,74,.35);
  padding: clamp(24px,3vw,40px) 0; margin: clamp(50px,7vw,100px) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 30px;
}
.story-credits .k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.story-credits .v { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--serif); }
.story-credits .v a { color: var(--glow); text-decoration: none; }
.story-credits .v a:hover { text-decoration: underline; }

.story-next { text-align: center; margin: clamp(50px,7vw,100px) auto 0; }
.story-next .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); display: block; margin-bottom: 14px; }
.story-next a.big {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px,4vw,56px); line-height: 1.05; color: var(--cream); text-decoration: none;
}
.story-next a.big:hover .arrow { color: var(--signal); transform: translateX(6px); }
.story-next .arrow { display: inline-block; transition: transform .3s ease, color .3s ease; }
.story-next .back { display: inline-block; margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.story-next .back:hover { color: var(--signal); }

/* --- Letters (reader mail) --- */
.letters { max-width: 62ch; margin: clamp(50px,7vw,100px) auto; }
.letters-head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--taupe); border-bottom: 1px solid rgba(90,83,74,.35); padding-bottom: 12px; margin-bottom: clamp(22px,3vw,36px);
}
.letter { margin: 0 0 clamp(26px,3.4vw,44px); padding-left: clamp(16px,2vw,26px); border-left: 2px solid var(--glow); }
.letter p {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(17px,1.5vw,23px);
  line-height: 1.65; color: var(--serif); margin: 0 0 10px;
}
.letter cite { font-family: var(--font-mono); font-style: normal; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }

/* --- Founder letter extras --- */
.letter-litany { font-style: italic; }
.letter-sig { font-family: var(--font-hand); font-size: clamp(28px,3.2vw,44px); color: var(--pen); margin-top: 26px; transform: rotate(-2deg); display: inline-block; }
a.letter-sig { color: var(--pen); text-decoration: none; }

/* --- Story footer --- */
.story-foot {
  border-top: 1px solid rgba(90,83,74,.35);
  padding: clamp(26px,3vw,44px) var(--pad);
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.story-foot a { color: var(--taupe); text-decoration: none; }
.story-foot a:hover { color: var(--signal); }

/* --- Archive index --- */
.arch-issue { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--signal); margin: clamp(44px,6vw,80px) 0 8px; }
.arch-list { border-top: 1px solid rgba(90,83,74,.35); }
.arch-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: clamp(18px,2.4vw,30px) 0; border-bottom: 1px solid rgba(90,83,74,.35);
  text-decoration: none;
}
.arch-row .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px,2.4vw,34px); color: var(--cream); line-height: 1.1; }
.arch-row .s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); white-space: nowrap; }
a.arch-row:hover .t { color: var(--signal); }
.arch-row.dim .t { color: var(--muted); }

@media (max-width: 720px) {
  .spread--duo, .spread--trio { grid-template-columns: 1fr; }
  .story-issue { display: none; }
  .arch-row { flex-direction: column; gap: 6px; }
}

/* ---- Global link hover: everything answers in lime ---- */
a:hover, a:focus-visible { color: var(--signal); }
a:hover h3, a:hover h4 { color: var(--signal); }

/* --- Mobile masthead: keep the nav inside the viewport --- */
@media (max-width: 640px) {
  .story-top { gap: 12px; padding-left: 14px; padding-right: 14px; }
  .story-logo { font-size: 12px; letter-spacing: .08em; }
  .story-issue { display: none; }
  .story-nav { gap: 14px; }
}