:root {
  --ink: #15133b;
  --paper: #fff9ec;
  --page-bg: #fff9ec;
  --page-text: #15133b;
  --header-bg: rgba(255,249,236,.94);
  --theme-line: #15133b;
  --white: #ffffff;
  --coral: #ff5c70;
  --coral-dark: #e63e59;
  --yellow: #ffd84d;
  --sun: var(--yellow);
  --mint: #7fe3c2;
  --sky: #84d7f7;
  --lavender: #c7adff;
  --muted: #69677c;
  --line: #15133b;
  --shadow: 6px 7px 0 var(--ink);
  --soft-shadow: 0 18px 50px rgba(21, 19, 59, .12);
  --radius: 22px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --page-bg: #0e0d20;
  --page-text: #f8f1df;
  --header-bg: rgba(14,13,32,.94);
  --theme-line: #f8f1df;
  --muted: #c3bdd2;
  --soft-shadow: 0 18px 50px rgba(0,0,0,.34);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--page-text);
  background: var(--page-bg);
  font-family: "Trebuchet MS", Verdana, sans-serif;
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  z-index: 20;
  background-image: radial-gradient(rgba(21,19,59,.17) .65px, transparent .65px);
  background-size: 8px 8px;
  mix-blend-mode: multiply;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

a:focus-visible, button:focus-visible {
  outline: 4px solid var(--sky);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 18px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border: 3px solid var(--ink);
  background: var(--yellow);
  font-weight: 900;
}
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 15;
  border-bottom: 3px solid var(--theme-line);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
}

.nav-shell {
  width: min(1240px, calc(100% - 36px));
  min-height: 80px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -.06em;
}

.brand-mark {
  width: 43px;
  height: 43px;
  position: relative;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50% 50% 48% 52%;
  background: var(--coral);
  transform: rotate(-7deg);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 22px;
}

.main-nav { display: flex; align-items: center; gap: 8px; }
.main-nav a {
  padding: 9px 12px;
  border: 2px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 900;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  border-color: var(--ink);
  background: var(--yellow);
  color: var(--ink);
  transform: rotate(-1deg);
  box-shadow: 2px 3px 0 var(--ink);
}

.button, .nav-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 19px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--coral);
  background-image: linear-gradient(180deg, rgba(255,255,255,.38) 0, rgba(255,255,255,.08) 42%, rgba(21,19,59,.1) 100%);
  color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.58), inset 0 -3px 0 rgba(21,19,59,.14), 0 6px 0 var(--ink), 0 12px 20px rgba(21,19,59,.2);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.button::before, .nav-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 12px auto;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  pointer-events: none;
}
.button:hover, .nav-cta:hover {
  transform: translateY(-2px) rotate(-.5deg);
  filter: saturate(1.08);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.62), inset 0 -3px 0 rgba(21,19,59,.14), 0 8px 0 var(--ink), 0 16px 24px rgba(21,19,59,.23);
}
.button:active, .nav-cta:active {
  transform: translateY(5px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(21,19,59,.18), 0 1px 0 var(--ink), 0 4px 8px rgba(21,19,59,.18);
}
.button--yellow { background-color: var(--yellow); }
.button--mint { background-color: var(--mint); }
.button--ink {
  background: var(--ink);
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), transparent 45%, rgba(0,0,0,.18));
  color: white;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.28), 0 6px 0 var(--coral-dark), 0 12px 20px rgba(21,19,59,.25);
}
.button--ink:hover {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.28), 0 8px 0 var(--coral-dark), 0 16px 24px rgba(21,19,59,.28);
}
.button--ink:active {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 0 var(--coral-dark), 0 4px 8px rgba(21,19,59,.2);
}
.hero-actions .button:first-child::after {
  content: "♥";
  position: absolute;
  left: -10px;
  top: -12px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 12px;
  transform: rotate(-9deg);
}

:root[data-theme="dark"] .nav-cta {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.58), inset 0 -3px 0 rgba(21,19,59,.14), 0 6px 0 var(--lavender), 0 12px 20px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .nav-cta:hover {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.62), inset 0 -3px 0 rgba(21,19,59,.14), 0 8px 0 var(--lavender), 0 16px 24px rgba(0,0,0,.38);
}
:root[data-theme="dark"] .nav-cta:active {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(21,19,59,.18), 0 1px 0 var(--lavender), 0 4px 8px rgba(0,0,0,.3);
}

.theme-toggle {
  position: relative;
  width: 118px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0 36px 0 13px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--sky);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem;
  font-weight: 900;
  transition: background .25s ease, transform .18s ease, box-shadow .18s ease;
}
.theme-toggle:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.theme-toggle__label { white-space: nowrap; }
.theme-toggle__sun, .theme-toggle__moon {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
}
.theme-toggle__sun { left: 7px; }
.theme-toggle__moon { right: 7px; }
.theme-toggle::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  top: 9px;
  right: 9px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 rgba(21,19,59,.3);
  transition: background .25s ease, box-shadow .25s ease;
}
:root[data-theme="dark"] .theme-toggle { background: var(--lavender); }
:root[data-theme="dark"] .theme-toggle::after { background: var(--coral); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 9px rgba(255,92,112,.8); }

.theme-transition body,
.theme-transition .site-header,
.theme-transition .section,
.theme-transition .article-card {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

.menu-button {
  display: none;
  width: 45px;
  height: 45px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  background-image: linear-gradient(180deg, rgba(255,255,255,.45), transparent 50%, rgba(21,19,59,.1));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 var(--ink);
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-button:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 5px 0 var(--ink); }
.menu-button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 var(--ink); }

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  background: var(--coral);
  color: var(--ink);
}

.hero::before, .hero::after {
  content: "";
  position: absolute;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
}
.hero::before { width: 280px; height: 280px; right: -90px; top: -120px; }
.hero::after { width: 120px; height: 120px; left: 4%; bottom: -60px; background: var(--mint); }

.hero-shell {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 36px));
  min-height: 680px;
  margin: auto;
  padding: 90px 0 78px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(36px, 7vw, 100px);
}

.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  font-weight: 900;
}

.hero h1 {
  max-width: 790px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 8.7vw, 8.7rem);
  line-height: .79;
  letter-spacing: -.085em;
}
.hero h1 em {
  display: block;
  color: var(--paper);
  text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink);
  transform: rotate(-2deg);
}
.hero-copy { max-width: 610px; margin: 30px 0 28px; font-size: 1.15rem; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.confession-stack { position: relative; min-height: 450px; }
.confession-note {
  position: absolute;
  width: min(390px, 86%);
  padding: 30px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.confession-note:nth-child(1) { top: 30px; left: 4%; transform: rotate(-6deg); background: var(--sky); }
.confession-note:nth-child(2) { top: 116px; right: 0; transform: rotate(6deg); background: var(--yellow); }
.confession-note:nth-child(3) { bottom: 10px; left: 13%; transform: rotate(-2deg); }
.confession-note::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 42%;
  width: 74px;
  height: 23px;
  background: rgba(255,255,255,.63);
  border: 2px solid rgba(21,19,59,.22);
  transform: rotate(3deg);
}
.confession-note small { display: block; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }
.confession-note p { margin: 12px 0 0; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; line-height: 1.25; }

.ticker {
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
}
.ticker-track {
  width: max-content;
  padding: 13px 0;
  display: flex;
  gap: 35px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  animation: marquee 26s linear infinite;
}
.ticker-track span::after { content: " ♥"; color: var(--coral-dark); }
@keyframes marquee { to { transform: translateX(-50%); } }

.recent-stories {
  padding: 46px 0 52px;
  border-bottom: 3px solid var(--ink);
  background: var(--lavender);
  color: var(--ink);
}
.recent-stories__shell { width: min(1240px, calc(100% - 36px)); margin: auto; }
.recent-stories__heading {
  margin-bottom: 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.recent-stories__heading .kicker { margin-bottom: 8px; background: var(--paper); }
.recent-stories__heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4vw, 4.25rem);
  line-height: .95;
  letter-spacing: -.055em;
}
.recent-stories__heading > a {
  margin-bottom: 7px;
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.recent-stories__list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.recent-story {
  min-height: 126px;
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr 42px;
  align-items: center;
  gap: 18px;
  padding: 18px 19px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 12px 18px rgba(21,19,59,.18);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.recent-story--yellow { background: var(--yellow); }
.recent-story--mint { background: var(--mint); }
.recent-story:hover { transform: translateY(-3px) rotate(-.35deg); box-shadow: 0 9px 0 var(--ink), 0 17px 24px rgba(21,19,59,.22); }
.recent-story:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.recent-story__date {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 2px dashed var(--ink);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  font-weight: 900;
}
.recent-story__date strong { font-family: Georgia, serif; font-size: 2.4rem; line-height: .9; letter-spacing: -.05em; }
.recent-story__copy { display: flex; flex-direction: column; gap: 5px; }
.recent-story__copy small { text-transform: uppercase; letter-spacing: .1em; font-size: .67rem; font-weight: 900; }
.recent-story__copy strong { font-family: Georgia, serif; font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.03; }
.recent-story__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
  font-weight: 900;
  transition: transform .18s ease;
}
.recent-story:hover .recent-story__arrow { transform: rotate(12deg) scale(1.06); }

.section { padding: clamp(70px, 9vw, 125px) 0; }
.section--sky { background: var(--sky); border-block: 3px solid var(--ink); }
.section--mint { background: var(--mint); border-block: 3px solid var(--ink); }
.section--sky, .section--mint { color: var(--ink); }
.section-shell { width: min(1240px, calc(100% - 36px)); margin: auto; }

.section-heading {
  margin-bottom: 42px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.section-heading h2 {
  max-width: 780px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.9rem, 6vw, 6.3rem);
  line-height: .92;
  letter-spacing: -.065em;
}
.section-heading p { max-width: 430px; margin: 0 0 8px; font-size: 1rem; font-weight: 700; }
.scribble { position: relative; white-space: nowrap; }
.scribble::after {
  content: "";
  position: absolute;
  left: -2%; right: -4%; bottom: -.08em;
  height: 12px;
  border-top: 5px solid var(--coral);
  border-radius: 50%;
  transform: rotate(-2deg);
}

.story-grid { display: grid; grid-template-columns: 1.35fr .85fr .85fr; gap: 24px; }
.story-card {
  min-height: 390px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.story-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 10px 13px 0 var(--ink); }
.story-card--feature { min-height: 520px; background: var(--coral); }
.story-card--yellow { background: var(--yellow); transform: rotate(1.2deg); }
.story-card--lavender { background: var(--lavender); transform: rotate(-1.5deg); }
.story-card__top { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.story-card__number { font-family: Georgia, serif; font-size: 4.6rem; line-height: .8; opacity: .17; font-weight: 900; }
.story-card__stamp { padding: 5px 9px; border: 2px solid var(--ink); border-radius: 4px; transform: rotate(5deg); text-transform: uppercase; font-size: .69rem; font-weight: 900; background: rgba(255,255,255,.55); }
.story-card h3 { margin: auto 0 15px; font-family: Georgia, serif; font-size: clamp(2rem, 3.6vw, 4.5rem); line-height: .92; letter-spacing: -.055em; }
.story-card:not(.story-card--feature) h3 { font-size: clamp(1.7rem, 2.25vw, 2.6rem); }
.story-card__quote { margin: 0 0 24px; font-weight: 700; }
.story-card__footer { padding-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 2px dashed var(--ink); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.drama { letter-spacing: 1px; color: var(--coral-dark); filter: saturate(1.4); }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.article-card {
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: white;
  color: var(--ink);
  box-shadow: var(--soft-shadow);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.article-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(21,19,59,.19); }
.article-card__art { height: 210px; position: relative; overflow: hidden; border-bottom: 3px solid var(--ink); }
.article-card__art::before, .article-card__art::after { content: ""; position: absolute; border: 3px solid var(--ink); }
.art-apps { background: var(--sky); }
.art-apps::before { width: 130px; height: 220px; left: 28%; top: 28px; border-radius: 22px; background: var(--paper); transform: rotate(-9deg); }
.art-apps::after { content: "♥"; display: grid; place-items: center; width: 80px; height: 80px; right: 18%; top: 35px; border-radius: 50%; background: var(--coral); font-size: 38px; }
.art-ghost { background: var(--lavender); }
.art-ghost::before { width: 115px; height: 135px; border-radius: 60px 60px 20px 20px; background: var(--paper); left: 38%; top: 34px; box-shadow: -18px 14px 0 rgba(21,19,59,.18); }
.art-ghost::after { content: "··"; border: 0; left: 46%; top: 62px; font-size: 56px; letter-spacing: 8px; }
.art-exit { background: var(--yellow); }
.art-exit::before { width: 120px; height: 155px; right: 19%; top: 32px; background: var(--mint); }
.art-exit::after { content: "→"; display: grid; place-items: center; border: 0; left: 21%; top: 46px; font-size: 95px; font-weight: 900; transform: rotate(-7deg); }
.article-card__body { padding: 24px; }
.article-card__body .kicker { margin: 0 0 13px; padding: 4px 8px; background: var(--mint); }
.article-card h3 { margin: 0 0 15px; font-family: Georgia, serif; font-size: 1.8rem; line-height: 1.05; letter-spacing: -.035em; }
.article-card p { margin: 0; color: var(--muted); }
.article-card__meta { margin-top: 20px; display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 900; }

.split-banner { display: grid; grid-template-columns: 1fr 1fr; border-block: 3px solid var(--ink); }
.split-banner { color: var(--ink); }
.split-banner > div { padding: clamp(60px, 8vw, 110px) max(30px, calc((100vw - 1240px)/2)); }
.split-banner > div:first-child { background: var(--coral); border-right: 3px solid var(--ink); padding-right: clamp(30px, 7vw, 100px); }
.split-banner > div:last-child { background: var(--yellow); padding-left: clamp(30px, 7vw, 100px); }
.split-banner h2 { margin: 0 0 18px; font-family: Georgia, serif; font-size: clamp(2.8rem, 5vw, 5.5rem); line-height: .9; letter-spacing: -.06em; }
.split-banner p { max-width: 480px; margin: 0 0 25px; font-weight: 700; }

.page-hero { padding: 85px 0 70px; border-bottom: 3px solid var(--ink); background: var(--coral); }
.page-hero { color: var(--ink); }
.page-hero--articles { background: var(--sky); }
.page-hero .section-shell { position: relative; }
.page-hero h1 { max-width: 950px; margin: 0; font-family: Georgia, serif; font-size: clamp(4.2rem, 9vw, 9rem); line-height: .82; letter-spacing: -.085em; }
.page-hero p { max-width: 670px; margin: 28px 0 0; font-size: 1.2rem; font-weight: 700; }

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-button {
  position: relative;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: white;
  background-image: linear-gradient(180deg, rgba(255,255,255,.9), rgba(21,19,59,.06));
  box-shadow: inset 0 1px 0 white, 0 3px 0 var(--ink);
  font-weight: 900;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.filter-button { color: var(--ink); }
.filter-button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 white, 0 5px 0 var(--ink); }
.filter-button.is-active { background-color: var(--yellow); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 var(--ink); }
.filter-button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 var(--ink); }
:root[data-theme="dark"] .filter-button { box-shadow: inset 0 1px 0 white, 0 3px 0 var(--lavender); }
:root[data-theme="dark"] .filter-button:hover { box-shadow: inset 0 1px 0 white, 0 5px 0 var(--lavender); }
:root[data-theme="dark"] .filter-button.is-active { box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 var(--lavender); }
:root[data-theme="dark"] .filter-button:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 var(--lavender); }
.story-archive { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.story-archive--live { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
.story-archive--live .story-card--feature { grid-column: auto; }
.story-archive .story-card:nth-child(4n+1) { background: var(--coral); }
.story-archive .story-card:nth-child(4n+2) { background: var(--yellow); }
.story-archive .story-card:nth-child(4n+3) { background: var(--lavender); }
.story-archive .story-card:nth-child(4n+4) { background: var(--mint); }
.story-card[hidden], .article-card[hidden] { display: none; }

.reading-hero { padding: 70px 0 58px; border-bottom: 3px solid var(--ink); background: var(--yellow); }
.reading-hero { color: var(--ink); }
.reading-hero--story { background: var(--coral); }
.reading-hero--preferences { background: var(--lavender); }
.reading-hero--apps { background: var(--sky); }
.reading-hero--popular { background: var(--coral); }
.reading-hero__inner { width: min(1075px, calc(100% - 36px)); margin: auto; }
.reading-hero__inner--long h1 { font-size: clamp(3rem, 6.4vw, 6.3rem); }
.reading-hero h1 { max-width: 980px; margin: 13px 0 20px; font-family: Georgia, serif; font-size: clamp(3.2rem, 7.5vw, 7.4rem); line-height: .88; letter-spacing: -.07em; }
.reading-dek { max-width: 850px; font-family: Georgia, serif; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.35; }
.byline { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 25px; padding-top: 18px; border-top: 2px dashed var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; font-weight: 900; }
.reading-hero__art {
  margin: 38px 0 -96px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--ink);
  box-shadow: 8px 9px 0 var(--ink);
}
.reading-hero__art img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.reading-hero__art--poster { width: min(820px, 100%); margin-inline: auto; }
.reading-hero__art--poster img { height: auto; aspect-ratio: auto; object-fit: contain; }
.reading-hero__art--natural img { height: auto; aspect-ratio: auto; object-fit: contain; }
.reading-hero:has(.reading-hero__art) { padding-bottom: 96px; }

.article-body {
  width: min(1075px, calc(100% - 36px));
  margin: 0 auto;
  padding: 70px 0 110px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.78;
}
.article-body > * { max-width: 1075px; }
.article-body h2 { margin: 2.1em 0 .6em; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.article-body h3 { margin: 1.8em 0 .5em; font-size: 1.65rem; }
.article-body p { margin: 0 0 1.45em; }
.article-body > p:first-of-type::first-letter { float: left; margin: .08em .1em 0 0; color: var(--coral); font-size: 5rem; line-height: .75; font-weight: 900; }
.article-body ol, .article-body ul { margin: 0 0 1.8em; padding-left: 1.5em; }
.article-body li { margin: 0 0 .9em; padding-left: .3em; }
.article-body li::marker { color: var(--coral); font-family: "Trebuchet MS", sans-serif; font-weight: 900; }
.article-body figure { margin: 2.7em 0; }
.article-body figure img {
  width: min(896px, 100%);
  margin: 0 auto;
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 7px 8px 0 var(--coral);
}
.article-body .figure--portrait img { width: min(614px, 100%); }
.article-body .figure--square img { width: min(650px, 100%); }
.article-body figcaption { max-width: 760px; margin: 14px auto 0; color: var(--muted); font-family: "Trebuchet MS", sans-serif; font-size: .78rem; text-align: center; }
.article-body .article-illustration {
  max-width: 1020px;
  margin: 3.4em auto;
  line-height: 0;
}
.article-body .article-illustration img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-width: 4px;
  border-radius: 18px;
}
.article-body .article-illustration--swipe img { box-shadow: 10px 11px 0 var(--coral); transform: rotate(-.65deg); }
.article-body .article-illustration--crossroads img { box-shadow: -10px 11px 0 var(--yellow); transform: rotate(.55deg); }
.article-body .article-illustration--crowd img { box-shadow: 10px 11px 0 var(--sky); transform: rotate(-.35deg); }
.article-body .article-illustration--slot img { box-shadow: -10px 11px 0 var(--coral); transform: rotate(.45deg); }
.article-body .article-illustration--ghost img { box-shadow: 10px 11px 0 var(--lavender); transform: rotate(-.5deg); }
.article-body .article-illustration--offline img { box-shadow: -10px 11px 0 var(--yellow); transform: rotate(.35deg); }
.article-body h4 { margin: 1.7em 0 .7em; font-family: "Trebuchet MS", sans-serif; font-size: 1rem; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.article-body .standfirst { font-size: 1.18em; font-style: italic; }
.article-body .standfirst::first-letter { float: none; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.self-check {
  margin: 2.2em 0;
  padding: 30px 36px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--lavender);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.self-check h3 { margin-top: 0; }
.self-check ul { margin-bottom: 0; }
.article-next {
  margin-top: 70px;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 3px solid currentColor;
  font-family: "Trebuchet MS", sans-serif;
}
.article-next p { margin: 0; }
.article-body blockquote { margin: 2.2em 0; padding: 30px 40px; border: 3px solid var(--ink); border-radius: 14px; background: var(--sky); box-shadow: var(--shadow); font-size: 1.35em; line-height: 1.4; font-weight: 700; transform: rotate(-.7deg); }
.article-body blockquote { color: var(--ink); }
.article-body .article-quote { transform: none; background: var(--mint); }
.article-body .article-quote p { margin: 0 0 .8em; }
.article-body .article-quote cite { display: block; font-family: "Trebuchet MS", sans-serif; font-size: .8rem; font-style: normal; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.article-body .timeline-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  list-style: none;
}
.article-body .timeline-list li { margin: 0; padding: 18px 20px; border: 2px solid var(--ink); border-radius: 14px; background: var(--yellow); color: var(--ink); box-shadow: 4px 5px 0 var(--ink); }
.article-body .timeline-list li:nth-child(4n+2) { background: var(--mint); }
.article-body .timeline-list li:nth-child(4n+3) { background: var(--lavender); }
.article-body .timeline-list li:nth-child(4n+4) { background: var(--coral); }
.article-body .timeline-list li strong:first-child { font-family: "Trebuchet MS", sans-serif; font-size: 1.18em; }
.article-table { max-width: 100%; margin: 2.3em 0; overflow-x: auto; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 7px 8px 0 var(--coral); }
.article-table:focus-visible { outline: 4px solid var(--sky); outline-offset: 5px; }
.article-table table { width: 100%; min-width: 700px; border-collapse: collapse; font-family: "Trebuchet MS", sans-serif; font-size: .9rem; }
.article-table th, .article-table td { padding: 16px 18px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); text-align: left; vertical-align: top; }
.article-table th { background: var(--coral); color: var(--ink); text-transform: uppercase; letter-spacing: .05em; }
.article-table tr:last-child td { border-bottom: 0; }
.article-table th:last-child, .article-table td:last-child { border-right: 0; }
.app-review { margin: 2em 0; padding: 30px 34px; border: 3px solid var(--ink); border-radius: 18px; background: var(--yellow); color: var(--ink); box-shadow: var(--shadow); }
.app-review--bumble { background: var(--mint); }
.app-review--hinge { background: var(--lavender); }
.article-body .app-review h3 { margin-top: 0; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.article-body .app-review p:last-child { margin-bottom: 0; }
.faq-card { margin: 1.4em 0; padding: 25px 28px; border: 2px solid #15133b; border-left: 10px solid var(--coral); border-radius: 12px; background: #fff; color: #15133b; box-shadow: 4px 5px 0 #15133b; }
.article-body .faq-card h3 { margin-top: 0; font-size: 1.35rem; }
.article-body .faq-card p:last-child { margin-bottom: 0; }
.wide-callout { margin: 50px 0; padding: 30px; border: 3px solid var(--ink); background: var(--mint); font-family: "Trebuchet MS", sans-serif; box-shadow: var(--shadow); }
.wide-callout { color: var(--ink); }
.wide-callout strong { display: block; font-family: Georgia, serif; font-size: 1.7rem; }

.story-body { width: min(980px, calc(100% - 36px)); }
.story-body .story-opening { font-size: 1.35em; font-style: italic; }
.reaction-box { margin-top: 70px; padding: 30px; border: 3px solid var(--ink); border-radius: 18px; background: var(--yellow); font-family: "Trebuchet MS", sans-serif; box-shadow: var(--shadow); text-align: center; }
.reaction-box { color: var(--ink); }
.reaction-box h2 { margin: 0 0 20px; font-size: 2rem; }
.reactions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.reaction {
  padding: 10px 16px;
  border: 2px solid var(--ink);
  color: var(--ink);
  border-radius: 999px;
  background: white;
  background-image: linear-gradient(180deg, rgba(255,255,255,.85), rgba(21,19,59,.06));
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  font-weight: 900;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.reaction:hover, .reaction.is-picked { background-color: var(--coral); transform: translateY(-2px) rotate(-2deg) scale(1.04); box-shadow: 0 5px 0 var(--ink); }
.reaction:active { transform: translateY(2px) rotate(0); box-shadow: 0 1px 0 var(--ink); }

.article-card__meta span:last-child {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: transform .18s ease;
}
.article-card:hover .article-card__meta span:last-child { transform: translateX(5px); }

.site-footer { padding: 65px 0 30px; border-top: 3px solid var(--ink); background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .site-footer { border-top-color: var(--coral); background: #070613; }
:root[data-theme="dark"] .article-card { background: #fdf8ec; }
:root[data-theme="dark"] body::before { opacity: .14; mix-blend-mode: screen; }
.footer-grid { width: min(1240px, calc(100% - 36px)); margin: auto; display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 40px; }
.footer-brand { font-family: Georgia, serif; font-size: 3rem; font-weight: 900; letter-spacing: -.06em; }
.footer-grid h3 { margin: 0 0 13px; color: var(--yellow); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.footer-grid ul { margin: 0; padding: 0; list-style: none; }
.footer-grid li { margin: 8px 0; }
.footer-grid a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.footer-bottom { width: min(1240px, calc(100% - 36px)); margin: 50px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7); font-size: .78rem; text-align: center; }
.footer-note { width: min(1240px, calc(100% - 36px)); margin: 50px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7); font-size: .78rem; }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.reveal { animation: rise .65s both; }
.reveal:nth-child(2) { animation-delay: .08s; }
.reveal:nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

@media (max-width: 980px) {
  .nav-cta { display: none; }
  .main-nav { position: fixed; inset: 79px 0 auto; display: none; padding: 20px; border-bottom: 3px solid var(--theme-line); background: var(--page-bg); }
  .main-nav.is-open { display: grid; }
  .main-nav a { border-color: var(--theme-line); }
  .main-nav a:hover, .main-nav a[aria-current="page"] { border-color: var(--ink); }
  .menu-button { display: block; }
  .hero-shell { grid-template-columns: 1fr; padding-top: 65px; }
  .confession-stack { min-height: 420px; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card--feature { grid-column: 1 / -1; }
  .article-grid, .story-archive { grid-template-columns: 1fr 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
}

@media (max-width: 680px) {
  .nav-shell { min-height: 70px; gap: 10px; }
  .brand-mark { width: 37px; height: 37px; }
  .main-nav { top: 69px; }
  .theme-toggle { width: 52px; height: 38px; padding: 0; }
  .theme-toggle__label { display: none; }
  .theme-toggle__sun, .theme-toggle__moon { display: block; }
  .theme-toggle__moon { right: 5px; }
  .theme-toggle__sun { left: 5px; }
  .theme-toggle::after { width: 24px; height: 24px; top: 4px; right: auto; left: 4px; transition: transform .28s cubic-bezier(.2,.8,.2,1), background .25s ease; }
  :root[data-theme="dark"] .theme-toggle::after { transform: translateX(14px); }
  .hero-shell { min-height: auto; }
  .hero h1 { font-size: clamp(3.7rem, 19vw, 6rem); }
  .confession-stack { min-height: 390px; margin-top: 5px; }
  .confession-note { padding: 21px; }
  .confession-note p { font-size: 1.08rem; }
  .story-grid, .article-grid, .story-archive, .split-banner, .footer-grid { grid-template-columns: 1fr; }
  .recent-stories__heading { align-items: start; flex-direction: column; }
  .recent-stories__list { grid-template-columns: 1fr; }
  .recent-story { grid-template-columns: 66px 1fr 36px; gap: 12px; padding: 15px; }
  .recent-story__arrow { width: 34px; height: 34px; }
  .story-card--feature { grid-column: auto; min-height: 440px; }
  .split-banner > div:first-child { border-right: 0; border-bottom: 3px solid var(--ink); }
  .article-card__art { height: 180px; }
  .section { padding: 70px 0; }
  .section-heading h2 { font-size: 3.5rem; }
  .page-hero h1 { font-size: 4.7rem; }
  .reading-hero h1 { font-size: 3.8rem; }
  .reading-hero__inner--long h1 { font-size: 3.35rem; }
  .reading-hero__art { margin-bottom: -74px; }
  .reading-hero:has(.reading-hero__art) { padding-bottom: 74px; }
  .article-body blockquote { padding: 24px; margin-inline: 0; }
  .self-check { padding: 24px; }
  .article-next { align-items: start; flex-direction: column; }
  .article-body .timeline-list { grid-template-columns: 1fr; }
  .app-review, .faq-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}