/* ============================================================
   mocha — index.css  (home page only)
   Manga-panel halftone cover. Built entirely on tokens.css
   custom properties. Signature: halftone ink-in + SFX pops.
   ============================================================ */

section[id] { scroll-margin-top: 6rem; }

/* ---------- HEADER ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: clamp(0.95rem, 2vw, 1.7rem) var(--page-inline);
}
.site-header .brand {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  padding-top: 0.08em;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 2.2rem);
}
.site-nav a {
  font-family: var(--font-sfx);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15em;
}
.site-nav a[aria-current='page'] { background-size: 100% 2px; }

/* guaranteed-contrast fallback when mix-blend-mode:difference is
   unavailable — never leave light nav over a light hero */
@supports not (mix-blend-mode: difference) {
  .site-header.nav-blend { mix-blend-mode: normal; color: var(--color-ink); }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(6rem, 14vh, 11rem) clamp(3rem, 8vh, 6rem);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__speedlines {
  position: absolute;
  inset: -25%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 74%);
          mask-image: radial-gradient(closest-side, #000 18%, transparent 74%);
}
.hero__burst {
  position: absolute;
  right: -8%;
  top: 4%;
  width: min(72vw, 820px);
  aspect-ratio: 1 / 1;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 70%);
          mask-image: radial-gradient(closest-side, #000 10%, transparent 70%);
}
.hero__ghost {
  position: absolute;
  right: -4vw;
  top: 3vh;
  font-size: clamp(7rem, 24vw, 26rem);
  line-height: 0.78;
  white-space: nowrap;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.hero__eyebrow { color: var(--color-muted); }
.hero__title {
  font-family: var(--font-sfx);
  font-feature-settings: 'palt' 1;
  font-size: clamp(2.6rem, 10vw, 9rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-block: var(--space-2) var(--space-1);
}
.hero__title .line { display: block; }
.hero__body { max-width: 44ch; font-weight: 500; }
.hero__cta { margin-top: var(--space-3); }
.hero__side {
  position: absolute;
  right: clamp(0.6rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--color-muted);
  letter-spacing: 0.22em;
}
.hero__sfx {
  position: absolute;
  right: clamp(1rem, 6vw, 7rem);
  bottom: clamp(6rem, 16vh, 10rem);
  z-index: 3;
  font-size: clamp(2.4rem, 8vw, 6rem);
  color: var(--color-ink);
}

/* ---------- SECTION HEADS ---------- */
.featured { padding-block: var(--space-8) var(--space-7); }
.sec-head { margin-bottom: var(--space-5); }
.sec-head__meta { color: var(--color-muted); }
.sec-head__no { font-size: 1.5em; color: var(--color-accent); vertical-align: -0.06em; }
.sec-head__title { font-size: clamp(2rem, 6.2vw, 4.6rem); line-height: 1.02; }
.sec-head__title .line { display: block; }

/* ---------- FEATURED ---------- */
.featured__layout { align-items: center; }
.featured__panel {
  grid-column: 1 / 8;
  position: relative;
  overflow: hidden;
  z-index: 2;
  padding: clamp(1.6rem, 4vw, 3.4rem);
}
.featured__tone {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(125deg, #000, transparent 68%);
          mask-image: linear-gradient(125deg, #000, transparent 68%);
}
.featured__panel-in { position: relative; z-index: 1; }
.featured__body {
  font-size: var(--step-1);
  line-height: 1.95;
  font-weight: 500;
  max-width: 36ch;
}
.featured__more { margin-top: var(--space-4); }
.featured__aside {
  grid-column: 8 / 13;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(var(--gutter) * -1.4);
}
.soda-art { color: var(--color-ink); width: clamp(140px, 20vw, 240px); }
.soda-cherry, .soda-straw { stroke: var(--color-accent); }
.featured__sfx {
  position: absolute;
  top: -0.3em;
  right: -0.1em;
  font-size: clamp(2rem, 6vw, 4.6rem);
}

/* ---------- POSTS (horizontal comic strip) ---------- */
.posts { padding-block: var(--space-7) var(--space-6); }
.posts__head { margin-bottom: var(--space-5); }
.posts__head h2 { font-size: clamp(2.2rem, 7vw, 5rem); }
.posts__lede { max-width: 42ch; margin-top: var(--space-2); }
.posts__progress {
  position: relative;
  overflow: hidden;
  height: 3px;
  max-width: 320px;
  margin-top: var(--space-3);
  background: var(--hairline);
}
.posts__progress span {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
}
.posts__track {
  display: grid;
  gap: var(--space-4);
  padding-inline: var(--page-inline);
}
.post-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background-color var(--dur-1) var(--ease-out-expo), color var(--dur-1) var(--ease-out-expo);
}
.post-card .index-num {
  position: absolute;
  top: -0.12em;
  right: 0.08em;
  line-height: 0.7;
  pointer-events: none;
  color: color-mix(in srgb, var(--color-ink) 15%, transparent);
}
.post-card__cat { color: var(--color-muted); position: relative; z-index: 1; }
.post-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--step-1);
  line-height: 1.4;
}
.post-card__body { position: relative; z-index: 1; font-size: var(--step-0); }
.post-card__date {
  margin-top: auto;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  position: relative;
  z-index: 1;
}
.post-card::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 3px solid var(--color-accent);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-1) var(--ease-back), transform var(--dur-1) var(--ease-back);
  pointer-events: none;
  z-index: 2;
}
.post-card:hover { background: var(--color-ink); color: var(--color-bg); }
.post-card:hover .post-card__cat,
.post-card:hover .post-card__date { color: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.post-card:hover .index-num { color: color-mix(in srgb, var(--color-bg) 18%, transparent); }
.post-card:hover::after { opacity: 1; transform: scale(1); }

/* ---------- TOPICS ---------- */
.topics { padding-block: var(--space-5); }
.topics__head { padding-block: var(--space-3) var(--space-2); }
.topics__label { color: var(--color-muted); }
.topics__marquee { padding-block: var(--space-3); }
.topic { font-size: clamp(1.6rem, 4.4vw, 3rem); }

/* ---------- FOOTER ---------- */
.site-footer { position: relative; overflow: hidden; margin-top: var(--space-6); padding-top: var(--space-5); }
.footer__grid { padding-block: var(--space-5); align-items: start; }
.footer__lead { grid-column: 1 / 8; }
.footer__headline { font-size: clamp(2.4rem, 7vw, 5.4rem); }
.footer__body { margin-top: var(--space-3); max-width: 40ch; }
.footer__nav { grid-column: 8 / 11; }
.footer__navlabel { color: var(--color-muted); margin-bottom: var(--space-2); }
.footer__nav ul { display: flex; flex-direction: column; gap: var(--space-1); }
.footer__nav a { font-family: var(--font-sfx); font-size: var(--step-1); }
.footer__contact {
  grid-column: 11 / 13;
  align-self: end;
  font-size: var(--step--1);
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.footer__mark {
  font-family: var(--font-display);
  font-size: clamp(4rem, 24vw, 28rem);
  line-height: 0.72;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  white-space: nowrap;
  padding-inline: var(--page-inline);
  transform: translateY(6%);
  pointer-events: none;
  user-select: none;
}
.footer__marquee {
  border-block: 1px solid var(--hairline);
  padding-block: var(--space-2);
  margin-top: var(--space-3);
}
.footer__sfx { font-size: clamp(1.4rem, 3.4vw, 2.4rem); }
.footer__legal { padding: var(--space-4) var(--page-inline); text-align: center; color: var(--color-muted); }

/* ---------- INK-IN TONE OVERLAY (built by index.js) ---------- */
.inkin-tone {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(var(--color-ink) 1.7px, transparent 2.1px) 0 0 / 9px 9px,
    linear-gradient(180deg, var(--milk-foam) 0%, var(--espresso) 55%, var(--strawberry) 100%);
}

/* ---------- SFX PRESS BURST (built by index.js) ---------- */
.sfx-pop {
  position: absolute;
  left: 50%;
  top: -0.2em;
  transform-origin: 50% 100%;
  font-size: var(--step-1);
  z-index: 8;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 721px) {
  .posts__viewport { height: 100svh; display: flex; align-items: center; overflow: hidden; }
  .posts__track {
    display: flex;
    align-items: stretch;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-inline: clamp(4vw, 7vw, 10vw);
    will-change: transform;
  }
  .post-card { flex: 0 0 clamp(340px, 40vw, 540px); min-height: min(62vh, 560px); }
}

@media (min-width: 2000px) {
  /* keep the wide hero composed: fatter header so the round logo isn't
     cropped, a constrained speedline field, and a faint centre page-number
     to hold the middle so the view doesn't swim in empty radial lines */
  .site-header { padding-block: clamp(1.5rem, 2vw, 2.4rem); }
  .site-header .brand { line-height: 0.96; padding-top: 0.14em; }
  .hero__title { font-size: clamp(6rem, 9vw, 9rem); max-width: 20ch; }
  .hero__speedlines {
    inset: -8% -4%;
    -webkit-mask-image: radial-gradient(closest-side, #000 24%, transparent 60%);
            mask-image: radial-gradient(closest-side, #000 24%, transparent 60%);
  }
  .hero__burst { width: min(46vw, 640px); right: 3%; top: 8%; }
  .hero__ghost { right: 2vw; font-size: clamp(14rem, 20vw, 26rem); }
  .hero::before {
    content: '01';
    position: absolute;
    left: 46%;
    top: 44%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-feature-settings: 'palt' 1;
    font-size: clamp(9rem, 15vw, 20rem);
    line-height: 0.8;
    letter-spacing: -0.03em;
    color: color-mix(in srgb, var(--color-ink) 6%, transparent);
    z-index: 1;
    pointer-events: none;
    user-select: none;
  }
}

@media (max-width: 1024px) {
  .featured__panel { grid-column: 1 / 9; }
  .featured__aside { grid-column: 9 / 13; margin-left: calc(var(--gutter) * -0.6); }
  .footer__lead { grid-column: 1 / 9; }
  .footer__nav { grid-column: 9 / 13; }
  .footer__contact { grid-column: 1 / 13; align-self: start; margin-top: var(--space-3); }
}

@media (max-width: 720px) {
  .hero { align-items: flex-end; }
  .hero__title { font-size: clamp(2.4rem, 11.5vw, 4rem); }
  .hero__side { position: static; transform: none; margin-top: var(--space-3); align-self: flex-start; }
  .hero__sfx { top: clamp(5rem, 14vh, 7rem); bottom: auto; right: 1rem; font-size: clamp(2rem, 9vw, 3rem); }
  .featured__layout { grid-template-columns: 1fr; }
  .featured__panel, .featured__aside { grid-column: 1 / -1; }
  .featured__aside { margin-left: 0; margin-top: var(--space-4); }
  .featured__body { font-size: var(--step-0); }
  .posts__progress { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__lead, .footer__nav, .footer__contact { grid-column: 1 / -1; }
  .footer__nav { margin-top: var(--space-3); }
}

@media (max-width: 480px) {
  .hero__ghost { top: 8vh; opacity: 0.05; }
  .sec-head__title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
}