/* ══════════════════════════════════════════════════════════
   page.css — pages secondaires NOL
   Chargé par : about.html · explore.html · issues/index.html
   Dépend de  : base.css (tokens, nav, back-top, reveal)
               + home.css (footer, nav responsive)
   ──────────────────────────────────────────────────────────
   Structure :
   1. Page secondaire — nav mobile fix
   2. Thème sombre (about.html · body.page--dark)
   3. About — hero, prose, pub, cats, cta, footer padding
   4. Explore — header, catégories, tracklist, timeline
   5. Issues — header, liste, site-footer
══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   1. PAGE SECONDAIRE — nav mobile fix
   Pages sans pill centrale : corrige grid-template-columns
   au breakpoint 860px (home.css pose 1fr 1fr, on corrige
   en 1fr auto pour que le bouton MENU reste à sa taille).
══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .page--secondary .nav {
    grid-template-columns: 1fr auto !important;
  }
}


/* ══════════════════════════════════════════════════════════
   2. THÈME SOMBRE — about.html (body.page--dark)
   Fond vert-encre : nav toujours sombre, logo + liens crème,
   barre de progression bordeaux, back-top en crème,
   footer avec padding généreux.
══════════════════════════════════════════════════════════ */

.page--dark { background: var(--vert-encre); }

/* Nav — reste à fond sombre, top et visible */
.page--dark .nav,
.page--dark .nav.nav-top,
.page--dark .nav.nav-visible {
  background: var(--vert-encre);
}

/* Logo texte */
.page--dark .logo-notes,
.page--dark .logo-listening { color: var(--creme); }

/* Liens nav */
.page--dark .nav-links a { color: var(--creme); opacity: 0.60; }
.page--dark .nav-links a::after { background: var(--peche); }
.page--dark .nav-links a:hover { opacity: 1; }

/* Bouton MENU mobile */
.page--dark .nav-menu-label { color: var(--creme); }
.page--dark .nav-visible .nav-menu-label { color: var(--creme); }

/* Barre de progression */
.page--dark .read-progress { background: var(--bordeaux); }

/* Back to top */
.page--dark .back-top svg { stroke: var(--creme); opacity: 0.50; }

/* Footer — padding plus généreux sur about */
.page--dark .footer { padding: clamp(100px, 14vh, 160px) var(--px); }


/* ══════════════════════════════════════════════════════════
   3. ABOUT
══════════════════════════════════════════════════════════ */

.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(80px, 11vh, 120px) var(--px) clamp(48px, 7vh, 72px);
  text-align: center;
}
.about-hero-logo {
  width: clamp(88px, 12vw, 130px);
  height: auto;
  margin-bottom: clamp(28px, 4vh, 40px);
  opacity: 0.90;
  padding-top: 55px;
}
.about-tagline {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.8vw, 30px);
  color: var(--peche);
  letter-spacing: 0.01em;
  margin: 0;
}

/* ── Prose — fond vert-encre ─────────────────────────── */
.about-prose {
  padding: clamp(48px, 6vh, 72px) var(--px) clamp(80px, 11vh, 120px);
  max-width: calc(580px + 2 * var(--px));
}
.about-prose p {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.82;
  font-weight: 300;
  color: rgba(237,227,208,0.68);
  margin-bottom: clamp(22px, 3vh, 30px);
}
.about-prose p:last-child { margin-bottom: 0; }
.about-prose .closing {
  font-family: var(--f-title);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--peche);
  line-height: 1.82;
}

/* ── The Publication — fond crème ────────────────────── */
.about-pub {
  background: var(--creme);
  color: var(--vert-encre);
  padding: clamp(80px, 11vh, 112px) var(--px) clamp(100px, 14vh, 140px);
}
.about-pub-inner { max-width: 600px; }
.about-pub-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(30,38,32,0.85);
  margin-bottom: clamp(32px, 5vh, 48px);
  font-weight: 400;
  opacity: 0.6;
}
.about-pub p {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.78;
  font-weight: 300;
  color: rgba(30,38,32,0.65);
  margin-bottom: clamp(18px, 2.5vh, 24px);
}
.about-pub p strong { color: rgba(30,38,32,0.85); font-weight: 500; }
.about-pub p:last-of-type { margin-bottom: 0; }

/* ── Six Ways ────────────────────────────────────────── */
.six-label {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--vert-encre);
  padding-top: clamp(64px, 9vh, 96px);
  margin-bottom: clamp(10px, 1.5vh, 14px);
}
.six-sub {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: clamp(30px, 4vh, 65px);
}
.about-pub .six-label {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--vert-encre);
  opacity: 0.45;
  padding-top: clamp(64px, 9vh, 96px);
  margin-bottom: clamp(10px, 1.5vh, 14px);
}

/* ── Catégories ──────────────────────────────────────── */
.about-cats { padding-top: clamp(35px, 1.5vh, 65px); }
.about-cat {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-top: 0.5px solid rgba(30,38,32,0.09);
  max-width: 750px;
}
.about-cat:last-child { border-bottom: 0.5px solid rgba(30,38,32,0.09); }
.about-cat-bar { width: 2.5px; min-height: 34px; flex-shrink: 0; margin-top: 4px; }
.about-cat-name {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.about-cat-desc {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.68;
  font-weight: 300;
  color: rgba(30,38,32,0.50);
}
.about-cat--moved  { --cat-color: var(--cat-moved); }
.about-cat--brain  { --cat-color: var(--cat-brain); }
.about-cat--never  { --cat-color: var(--cat-never); }
.about-cat--record { --cat-color: var(--cat-record); }
.about-cat--pit    { --cat-color: var(--cat-pit); }
.about-cat--self   { --cat-color: var(--cat-self); }
.about-cat .about-cat-bar  { background: var(--cat-color); }
.about-cat .about-cat-name { color: var(--cat-color); }

/* ── CTA final ───────────────────────────────────────── */
.about-cta { margin-top: clamp(16px, 2vh, 24px); padding-top: clamp(16px, 2vh, 24px); }
.about-cta p {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.78;
  font-weight: 300;
  color: rgba(30,38,32,0.55);
  margin-bottom: 6px;
}
.about-cta-chair {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(35px, 3.2vw, 55px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--terra);
  margin-top: clamp(24px, 3vh, 36px);
  margin-bottom: 0;
}
.about-pub .about-cta-chair {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--terra);
  margin-top: clamp(32px, 5vh, 56px);
  margin-bottom: 0;
  display: block;
}
.about-cta-tagline {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(30,38,32,0.38);
  margin-top: clamp(20px, 3vh, 32px);
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .about-prose,
  .about-pub-inner,
  .about-cat { max-width: 100%; }
}


/* ══════════════════════════════════════════════════════════
   4. EXPLORE
══════════════════════════════════════════════════════════ */

.explore-page { padding-top: 80px; min-height: 100vh; }

.explore-header {
  padding: clamp(48px, 7vh, 80px) var(--px) clamp(28px, 3.5vh, 44px);
  border-bottom: 0.5px solid rgba(30,38,32,0.12);
}
.explore-eyebrow {
  font-family: var(--f-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.30;
  margin-bottom: 8px;
}
.explore-title {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(44px, 7vw, 80px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 12px;
  margin-bottom: 12px;
}
.explore-count {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.28;
  margin-top: 25px;
  margin-bottom: 12px;
}

/* Filtres — décommenter quand + d'articles */
/*
.explore-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.filter-pill { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; cursor: pointer; transition: opacity 0.2s; }
.filter-pill--active { background: var(--ink); color: var(--creme); }
.filter-pill--inactive { border: 0.5px solid rgba(30,38,32,0.18); color: var(--ink); opacity: 0.55; }
.filter-pill--inactive:hover { opacity: 1; }
*/

.explore-body { padding: 0 var(--px) clamp(64px, 9vh, 110px); }

/* ── Catégorie ───────────────────────────────────────── */
.cat-block {
  padding-top: clamp(28px, 4vh, 44px);
  border-bottom: 0.5px solid rgba(30,38,32,0.07);
  padding-bottom: clamp(20px, 3vh, 32px);
}
.cat-block--empty { opacity: 0.45; }
.cat-coming-soon {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 10px;
  color: var(--ink);
}
.cat-head {
  display: grid;
  grid-template-columns: 2.5px 1fr auto;
  gap: 0 14px;
  align-items: baseline;
  margin-bottom: 10px;
}
.cat-bar { height: 100%; min-height: 28px; border-radius: 0; align-self: stretch; flex-shrink: 0; }
.cat-name {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  align-self: center;
}
.cat-desc {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.42;
  max-width: 230px;
  text-align: right;
}

/* ── Tracklist ───────────────────────────────────────── */
.track-list { display: flex; flex-direction: column; }
.track-list:hover .track       { opacity: 0.28; }
.track-list:hover .track:hover { opacity: 1; }
.track-list:hover .track--soon { opacity: 0.14; }
.track {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 0 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 0.5px solid rgba(30,38,32,0.07);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.22s;
}
.track--soon { opacity: 0.28; cursor: default; pointer-events: none; }
.track-num  { font-family: var(--f-mono); font-size: 11px; opacity: 0.65; text-align: right; }
.track-title {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.track-meta { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink); opacity: 0.40; margin-top: 2px; }
.track-dur  { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--ink); opacity: 0.28; white-space: nowrap; }

/* ── Timeline ────────────────────────────────────────── */
.timeline-section {
  border-top: 0.5px solid rgba(30,38,32,0.12);
  padding: clamp(40px, 6vh, 72px) var(--px) clamp(80px, 11vh, 130px);
}
.timeline-eyebrow {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordeaux);
  opacity: 0.65;
  margin-bottom: 6px;
}
.timeline-intro {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 32px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: clamp(32px, 5vh, 56px);
}
.timeline-list { display: flex; flex-direction: column; }
.timeline-list:hover .timeline-item        { opacity: 0.28; }
.timeline-list:hover .timeline-item:hover  { opacity: 1; }
.timeline-list:hover .timeline-item--soon  { opacity: 0.12; }
.timeline-item {
  display: grid;
  grid-template-columns: clamp(72px, 10vw, 100px) 1fr;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.22s;
}
.timeline-item--soon { opacity: 0.30; cursor: default; pointer-events: none; }
.timeline-year-col {
  padding-right: 20px;
  padding-top: 2px;
  padding-bottom: 32px;
  border-right: 0.5px solid rgba(107,45,58,0.28);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline-year {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--bordeaux);
}
.timeline-issue { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink); opacity: 0.30; }
.timeline-content { padding-left: 20px; padding-top: 2px; padding-bottom: 32px; }
.timeline-artist { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bordeaux); opacity: 0.55; margin-bottom: 5px; }
.timeline-title {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 5px;
}
.timeline-hook {
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.42;
}

@media (max-width: 680px) {
  .cat-head { grid-template-columns: 2.5px 1fr; gap: 0 12px; }
  .cat-desc  { display: none; }
  .track-dur { display: none; }
  .timeline-item { grid-template-columns: clamp(60px, 18vw, 80px) 1fr; }
}


/* ══════════════════════════════════════════════════════════
   5. ISSUES INDEX
══════════════════════════════════════════════════════════ */

.issues-page { padding-top: 80px; min-height: 100vh; }

.issues-header {
  padding: clamp(48px, 7vh, 80px) var(--px) clamp(28px, 3.5vh, 44px);
  border-bottom: 0.5px solid rgba(30,38,32,0.12);
}
.issues-eyebrow {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.30;
  margin-bottom: 8px;
}
.issues-title {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(44px, 7vw, 80px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 12px;
  margin-bottom: 12px;
}
.issues-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink);
  opacity: 0.40;
  margin-top: 18px;
}

.issues-body { padding: clamp(40px, 6vh, 72px) var(--px) clamp(64px, 9vh, 110px); }

.issue-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 0 clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(24px, 3.5vh, 36px) 0;
  border-bottom: 0.5px solid rgba(30,38,32,0.08);
  text-decoration: none;
  color: var(--ink);
  transition: opacity 0.18s;
}
.issue-row:first-child { border-top: 0.5px solid rgba(30,38,32,0.08); }
.issue-row:hover { opacity: 0.65; }
.issue-num {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--terra);
  flex-shrink: 0;
}
.issue-date { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.35; margin-bottom: 6px; }
.issue-name { font-family: var(--f-title); font-style: italic; font-weight: 700; font-size: clamp(20px, 2.8vw, 30px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 7px; }
.issue-tagline { font-family: var(--f-body); font-size: 14px; line-height: 1.55; color: var(--ink); opacity: 0.55; }
.issue-arrow { font-family: var(--f-mono); font-size: 11px; opacity: 0.25; letter-spacing: 0.08em; flex-shrink: 0; align-self: center; transition: opacity 0.18s; }
.issue-row:hover .issue-arrow { opacity: 0.70; }

/* ── Site footer (issues/index.html uniquement) ──────── */
.site-footer {
  background: var(--creme);
  border-top: 0.5px solid rgba(30,38,32,0.10);
  padding: clamp(48px, 7vh, 80px) var(--px);
}
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.5vh, 24px); text-align: center; }
.site-footer .footer-tagline { font-family: var(--f-title); font-style: italic; font-weight: 300; font-size: clamp(15px, 1.4vw, 18px); color: var(--vert-encre); opacity: 0.55; }
.footer-nav { display: flex; gap: clamp(20px, 3vw, 36px); }
.footer-nav a { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); opacity: 0.40; transition: opacity 0.2s; }
.footer-nav a:hover { opacity: 0.80; }
.footer-copy { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink); opacity: 0.28; }

@media (max-width: 640px) {
  .issue-row { grid-template-columns: 52px 1fr; gap: 0 16px; }
  .issue-arrow { display: none; }
}