/*
 * Marketing pages (BE-102) — home hero + legal-page reading column. Loads only
 * on the always-on Web::Pages surfaces. Every color/size resolves against the v3
 * tokens (tokens.css) so light/dark + the palette come for free.
 *
 * NB: the shared page chrome (.site-mark masthead + .site-foot footer) now lives
 * in web/components.css so it is styled on EVERY surface (components.css is the
 * globally-linked stylesheet; pages.css only loads on the marketing surfaces).
 */

.home-hero {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--space-xxxl) var(--space-lg) var(--space-xxl);
  text-align: center;
}

.home-hero__eyebrow {
  font: 600 var(--fs-eyebrow) / 1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}

.home-hero__title {
  /* The one oversized Fraunces cover-line — bigger than the base display scale
     (the hero headline IS the art on the type-led masthead fallback). */
  font: 600 clamp(46px, 6.4vw, 82px) / 1.01 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: var(--space-lg) 0 var(--space-md);
  text-wrap: balance;
}
.home-hero__title em { font-style: italic; }

.home-hero__lede {
  font: 400 var(--fs-body-lg) / 1.6 var(--font-read);
  color: var(--ink-2);
  max-width: 42ch;
  margin: 0 auto var(--space-xl);
}

.home-hero__cta {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  font: 600 var(--fs-body) / 1 var(--font-body);
  text-decoration: none;
  /* Filled buttons carry no border by default (an <input type=submit>/<button>
     would otherwise show a UA chrome border). .btn--ghost re-adds its outline
     below — so .btn--block must NOT blanket-strip borders (that inverted the
     ghost affordance into borderless plain text). */
  border: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-bright); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--outline-variant); }

/* ── HERO "Rack" — a fanned shelf of Shiijak covers ─────────────────────────
   Center = the LIVE current Edition (a real .mag-cover), flanks = two current
   section fronts. Pure CSS (flex row + rotate() + negative margins + layered
   shadow) over the shipped .mag-cover object — zero sourced/stock images. It
   MEANS the Newsstand ("someone curated this"). Scales + simplifies on phones. */
.home-rack {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-xxxl);
  max-width: 100%;
}
.home-rack__item { flex: 0 0 auto; width: clamp(126px, 20vw, 166px); }
.home-rack__item .mag-frame { margin: 0; }
.home-rack__item--center {
  width: clamp(158px, 26vw, 210px);
  position: relative;
  z-index: 3;
}
.home-rack__item--center .mag-cover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 34px 54px -22px rgba(10, 10, 12, .62);
}
.home-rack__item--left  { transform: rotate(-8deg); margin-right: -24px; z-index: 1; }
.home-rack__item--right { transform: rotate(8deg);  margin-left:  -24px; z-index: 1; }
.home-rack__item--left .mag-cover,
.home-rack__item--right .mag-cover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 22px 38px -20px rgba(10, 10, 12, .55);
}
.home-rack--solo { margin-top: var(--space-xl); }
@media (max-width: 560px) {
  .home-rack { margin-top: var(--space-xl); }
  .home-rack__item--left,
  .home-rack__item--right { display: none; }
  .home-rack__item--center { width: clamp(150px, 52vw, 200px); }
}

/* ── Cover-lines: the three pillars as mono small-cap magazine cover-lines ─── */
.home-marks {
  list-style: none;
  max-width: var(--measure-wide);
  margin: var(--space-xxl) auto 0;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.home-mark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-md);
  border-top: 2px solid var(--primary);
}
.home-mark__k {
  font: 700 var(--fs-caption) / 1.2 var(--font-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.home-mark__d {
  font: 400 var(--fs-body-sm) / 1.45 var(--font-read);
  color: var(--ink-2);
}
@media (max-width: 560px) {
  .home-marks { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ── Editorial "signatures": alternating cream-paper + grainy cover-black panels.
   Theme-independent by design (like the .mag-cover object — a magazine cover
   isn't dark-mode). A --paper panel PINS the light palette locally so every
   nested component (post-card / cover-mini / reaction bar) reads correctly on
   the cream even under the dark UI theme. ────────────────────────────────── */
.home-sig {
  margin: var(--space-xxl) auto 0;
  max-width: var(--measure-wide);
  padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 34px);
  border-radius: var(--r-xl);
}
.home-sig--paper {
  --ink: #1E1B18; --ink-2: #474556; --text: #1E1B18; --text-muted: #474556;
  --border: #E6DFD9; --outline-variant: #D9D2CC;
  --canvas: #FFF8F4; --surface-elevated: #FFFFFF; --surface-1: #FAF2ED;
  --accent: #522DE6; --primary: #522DE6; --primary-bright: #6B4EFF;
  --on-primary-container: #4109D7;
  background: #FFF8F4;
  color: #1E1B18;
  border: 1px solid rgba(30, 24, 20, .10);
  box-shadow: 0 24px 60px -40px rgba(10, 10, 12, .35);
}
.home-sig--cover {
  color: #F3F1FA;
  background-color: #0A0A0C;
  background-image:
    linear-gradient(168deg, rgba(82, 45, 230, .18) 0%, rgba(10, 10, 12, 0) 46%),
    var(--grain),
    radial-gradient(120% 120% at 78% 8%, #201a4a 0%, #131130 44%, #0a0a0c 82%);
  background-size: cover, 150px 150px, cover;
  background-repeat: no-repeat, repeat, no-repeat;
  border: 1px solid rgba(245, 245, 245, .08);
}
.home-sig__eyebrow {
  margin: 0 0 var(--space-md);
  font: 700 var(--fs-eyebrow) / 1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-bright);
}
.home-sig--paper .home-sig__eyebrow { color: var(--on-primary-container); }
.home-sig--cover .home-sig__eyebrow { color: #A99BFF; }
.home-sig__title {
  margin: 0 0 var(--space-md);
  font: 600 clamp(30px, 4.4vw, 44px) / 1.05 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.home-sig--paper .home-sig__title { color: #1E1B18; }
.home-sig__title em { font-style: italic; }
.home-sig__lede {
  margin: 0 0 var(--space-xl);
  max-width: 46ch;
  font: 400 var(--fs-body-lg) / 1.6 var(--font-read);
  color: #474556;
}

/* Look-inside proof: real edition cover + real section fronts + real posts. */
.home-inside__edition { max-width: 248px; margin-bottom: var(--space-sm); }
.home-inside__sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.home-inside__sections .cover-mini { min-height: 132px; }
@media (max-width: 460px) {
  .home-inside__sections { grid-template-columns: 1fr; }
}
.home-inside .feed-list { margin-top: 4px; }
.home-inside__seeall {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-md);
  font: 700 var(--fs-body-sm) / 1 var(--font-body);
  color: var(--on-primary-container); text-decoration: none;
}
.home-inside__seeall:hover { text-decoration: underline; }

/* Ethos micro-manifesto (cover-black). */
.home-ethos__line {
  margin: 0 0 var(--space-sm);
  font: 500 clamp(20px, 3vw, 27px) / 1.32 var(--font-display);
  letter-spacing: -0.01em;
  color: #F3F1FA;
  text-wrap: balance;
}
.home-ethos__belong {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(245, 245, 245, .14);
  font: 400 var(--fs-body-lg) / 1.5 var(--font-read);
  font-style: italic;
  color: #C8BFFF;
}

/* Objection strip (cream). */
.home-obj__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.home-obj__cell { display: flex; flex-direction: column; gap: 6px; }
.home-obj__k { margin: 0; font: 700 var(--fs-body) / 1.2 var(--font-body); color: #1E1B18; }
.home-obj__d { margin: 0; font: 400 var(--fs-body-sm) / 1.5 var(--font-read); color: #474556; }
@media (max-width: 560px) {
  .home-obj__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* Final CTA (cover-black). */
.home-final { text-align: center; }
.home-final__title {
  margin: 0 auto var(--space-sm);
  max-width: 18ch;
  font: 600 clamp(30px, 4.6vw, 46px) / 1.04 var(--font-display);
  letter-spacing: -0.02em;
  color: #F3F1FA;
  text-wrap: balance;
}
.home-final__sub {
  margin: 0 auto var(--space-xl);
  font: 400 var(--fs-body-lg) / 1.5 var(--font-read);
  color: #C8BFFF;
}
.home-final__cta { justify-content: center; }

/* Ghost button on a cover-black panel needs a light outline + label. */
.home-sig--cover .btn--ghost { color: #F5F5F5; border-color: rgba(245, 245, 245, .42); }
.home-sig--cover .btn--ghost:hover { border-color: rgba(245, 245, 245, .7); }

/* Signature lockup (brand, once). */
.home-signature {
  margin: var(--space-xxl) auto var(--space-xxxl);
  max-width: var(--measure-wide);
  text-align: center;
  font: 700 var(--fs-caption) / 1.5 var(--font-body);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .home-inside__seeall:hover { text-decoration: none; }
}

/* Legal / about reading column */
.doc-page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-xxxl) var(--space-lg);
}
.doc-page h1 {
  font: 600 var(--fs-heading) / 1.1 var(--font-display);
  color: var(--ink);
  margin-bottom: var(--space-lg);
}
.doc-page p {
  font: 400 var(--fs-body-lg) / 1.65 var(--font-read);
  color: var(--ink-2);
  margin-bottom: var(--space-lg);
}
.doc-page .doc-meta {
  font: 500 var(--fs-caption) / 1.4 var(--font-body);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
}
/* LEG-901/902 — the boilerplate-pending-counsel-review callout (see the code
   comment atop privacy.html.erb / terms.html.erb). Reuses the tertiary/crimson
   tokens the auth alert flash already uses for "pay attention" copy. */
.doc-page .legal-notice {
  background: var(--tertiary-container);
  color: var(--tertiary);
  border-radius: var(--r-md);
  padding: var(--space-md) var(--space-lg);
  font: 500 var(--fs-body-sm) / 1.5 var(--font-body);
  margin-bottom: var(--space-xl);
}
.doc-page h2 {
  font: 600 var(--fs-subtitle) / 1.2 var(--font-display);
  color: var(--ink);
  margin: var(--space-xxl) 0 var(--space-md);
}
.doc-page ul {
  margin: 0 0 var(--space-lg);
  padding-left: 1.3em;
  font: 400 var(--fs-body-lg) / 1.65 var(--font-read);
  color: var(--ink-2);
}
.doc-page li { margin-bottom: var(--space-sm); }
.doc-page a { color: var(--primary); }
/* Conversion CTA row on /about (a way out of the dead-end): reuses the marketing
   .btn set. `.doc-page a { color: --primary }` (0,1,1) would otherwise beat the
   button color rules (0,1,0) and paint violet-on-violet on the filled CTA — so
   re-assert both button ink colors at (0,2,0) here. */
.doc-cta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xxl); }
.doc-cta .btn--primary { color: var(--on-primary); }
.doc-cta .btn--ghost { color: var(--ink); }

/* ── Auth (sign in) — centered editorial card ──────────────────────────────── */
.auth { max-width: 452px; margin: 0 auto; padding: var(--space-xxxl) var(--space-lg); }
.auth__card {
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 40px 36px;
  box-shadow: 0 24px 60px -34px rgba(10, 10, 12, 0.45);
}
.auth__eyebrow {
  font: 600 var(--fs-eyebrow) / 1 var(--font-body); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--primary); margin: 0 0 10px;
}
.auth__title { font: 600 var(--fs-heading) / 1.04 var(--font-display); color: var(--ink); margin: 0 0 6px; }
.auth__sub { font: 400 var(--fs-body) / 1.5 var(--font-read); color: var(--ink-2); margin: 0 0 26px; }
.auth__form .field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }
.auth__form label { font: 600 var(--fs-body-sm) / 1 var(--font-body); color: var(--ink); }
/* Field styling for the text inputs ONLY — excluding the submit (type=submit),
   whose (0,1,1) reach previously beat .btn--primary (0,1,0) and painted every
   auth CTA the pale cream field color instead of brand violet. */
.auth__form input:not([type="submit"]) {
  font: 400 var(--fs-body) / 1.2 var(--font-body); color: var(--ink);
  background: var(--canvas); border: 1px solid var(--outline-variant);
  border-radius: var(--r-md); padding: 13px 14px; transition: border-color 0.12s, box-shadow 0.12s;
}
.auth__form input::placeholder { color: var(--ink-2); opacity: 0.55; }
.auth__form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-container); }
/* Layout only — never touches the border, so a .btn--ghost.btn--block (Resend
   link, Back to Shiijak) keeps its outline instead of collapsing to plain text. */
.btn--block { display: block; width: 100%; text-align: center; margin-top: 8px; cursor: pointer; }
.auth__foot { text-align: center; margin: 22px 0 0; font: 400 var(--fs-body-sm) / 1.5 var(--font-body); color: var(--ink-2); }
.auth__foot a { color: var(--primary); text-decoration: none; font-weight: 600; }
.auth__flash { padding: 12px 14px; border-radius: var(--r-md); font: 500 var(--fs-body-sm) / 1.4 var(--font-body); margin-bottom: 18px; }
.auth__flash--alert { background: var(--tertiary-container); color: var(--tertiary); }
.auth__flash--notice { background: var(--primary-container); color: var(--on-primary-container); }

/* Social login ("Continue with Google/Apple") — feature-detected buttons ABOVE
   the email form (fastest path first), split from it by a labelled rule. */
.auth__divider {
  display: flex; align-items: center; gap: var(--space-md);
  margin: 22px 0 18px; color: var(--ink-2);
  font: 600 var(--fs-caption) / 1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.auth__divider::before, .auth__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--outline-variant);
}
.auth__social { display: flex; flex-direction: column; gap: 10px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--outline-variant); background: var(--canvas);
  color: var(--ink); text-decoration: none;
  font: 600 var(--fs-body) / 1 var(--font-body);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.social-btn:hover { transform: translateY(-1px); border-color: var(--ink-2); }
/* Keyboard focus ring mirrors the email inputs (accessible, visible, calm). */
.social-btn:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-container);
}
.social-btn__icon { width: 18px; height: 18px; flex: none; }
/* Brand-correct "Sign in with Apple": a solid ink fill with inverse label/logo.
   Because --ink / --surface-elevated invert with the theme, this is the black
   button in light mode and the white button in dark — exactly Apple's guidance. */
.social-btn--apple {
  background: var(--ink); color: var(--surface-elevated); border-color: var(--ink);
}
.social-btn--apple:hover { border-color: var(--ink); }
.social-btn--apple .social-btn__icon { color: var(--surface-elevated); }

/* Respect reduced-motion: the auth pages load only web/pages + web/cover_art, so
   the global guard in components.css doesn't reach here — drop the button motion. */
@media (prefers-reduced-motion: reduce) {
  .social-btn { transition: none; }
  .social-btn:hover { transform: none; }
}

/* ── Onboarding (pick-3 interests) — editorial topic chips ──────────────────── */
.onboard__lede { font: 400 var(--fs-body) / 1.5 var(--font-read); color: var(--ink-2); margin: 0 0 var(--space-lg); }
.onboard__group { margin: 0 0 var(--space-xl); }
.onboard__group-title { font: 600 var(--fs-body) / 1.2 var(--font-body); color: var(--ink); margin: 0 0 12px; }
.onboard__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.onboard__chip { display: inline-flex; }
.onboard__chip-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.onboard__chip-label {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--outline-variant); background: var(--surface-elevated);
  color: var(--ink); font: 500 var(--fs-body-sm) / 1 var(--font-body); cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.onboard__chip-label:hover { border-color: var(--primary); }
.onboard__chip-input:checked + .onboard__chip-label {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.onboard__chip-input:focus-visible + .onboard__chip-label {
  outline: none; box-shadow: 0 0 0 3px var(--primary-container);
}
.onboard__actions { display: flex; gap: 12px; align-items: center; margin-top: var(--space-lg); }

/* ── Reactivation choice / goodbye / account-inactive — shared auth-card extras.
   Stacked full-width actions + a calm inline note (the scheduled-deletion date /
   grace copy). Used by the deletion reactivation choice, the goodbye page after
   scheduling, and the honest account-inactive page. ── */
.auth__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.auth__actions form { margin: 0; }
.auth__note {
  padding: 13px 15px; border-radius: var(--r-md); margin: 0 0 22px;
  font: 500 var(--fs-body-sm) / 1.55 var(--font-body);
  background: var(--tertiary-container); color: var(--tertiary);
}
.btn--danger { background: var(--tertiary); color: #fff; border: none; cursor: pointer; }
.btn--danger:hover { filter: brightness(1.08); }