/* ============================================================
   Stacked Homes — /newsletter/ landing page (PRODUCTION)

   Self-contained on purpose. The staging redesign serves this page from
   assets/redesign/{tokens,base,chrome,newsletter}.css, but that whole tree is
   excluded from prod deploys (scripts/deploy.sh), so this file folds the parts
   this one page needs into a single prod-safe stylesheet:
     - the design tokens it references
     - the handful of base/reset rules it relies on
     - the page styles (1:1 with assets/redesign/newsletter.css)
     - a centred-logo header and minimal footer, replacing the redesign chrome

   Paired with newsletter-landing.php at the theme root. If the redesign's
   newsletter.css changes, mirror the change here — they are deliberate copies,
   not a shared import.
   ============================================================ */

/* ---------------- Fonts ---------------- */
@font-face { font-family:'Gascogne'; src:url('fonts/gascogne-regular.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap }
@font-face { font-family:'Whyte';    src:url('fonts/whyte-book.woff2') format('woff2');       font-weight:400 500; font-style:normal; font-display:swap }
@font-face { font-family:'Whyte';    src:url('fonts/whyte-bold.woff2') format('woff2');       font-weight:600 700; font-style:normal; font-display:swap }

/* Metric-matched fallbacks so the font swap causes ~no layout shift. */
@font-face { font-family:'Gascogne-fb'; src:local('Georgia'); size-adjust:98.7%;  ascent-override:78.2%; descent-override:23.1%; line-gap-override:17.9% }
@font-face { font-family:'Whyte-fb';    src:local('Arial');   size-adjust:105.3%; ascent-override:37.3%; descent-override:9.0%;  line-gap-override:0% }

/* ---------------- Tokens ---------------- */
:root {
  --sand:#F5F0E4;
  --card:#F2EBDC;
  --panel:#E9E2D2;
  --ink:#241F1A;
  --ink-hard:#1C1A16;
  --text-2:#6E6456;
  --text-faint:#8A8172;
  --body:#5A554A;
  --border:#D8CDB6;
  --border-alt:#C9BFA8;

  --f-display:'Gascogne', 'Gascogne-fb', Georgia, 'Times New Roman', serif;
  --f-body:'Whyte', 'Whyte-fb', Arial, system-ui, -apple-system, sans-serif;

  /* News accent (Marigold) — this page sits in the News section. */
  --accent:#F3C21A;
  --accent-tint:#F6E9C0;
  --accent-text:#3E3524;
}

/* ---------------- Base ---------------- */
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0 }
img,svg,video { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px }

body {
  background:var(--sand);
  font-family:var(--f-body);
  color:var(--ink);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Centred "paper" canvas. The GAM sticky leaderboard publishes its height as
   --launch-lb-h; reserve that space here so the fixed plate never covers the
   logo. Falls back to 0 when no leaderboard renders. */
.sh-canvas {
  max-width:1290px;
  margin:var(--launch-lb-h, 0px) auto 0;
  background:var(--sand);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
}

@media (prefers-reduced-motion:reduce) { *{ transition:none !important; animation:none !important } }

/* ---------------- Header: centred logo, no nav ---------------- */
.nl-head {
  display:flex; justify-content:center; align-items:center;
  padding:clamp(22px,3.4vw,34px) 20px;
  border-bottom:1px solid var(--border);
}
.nl-head__logo { display:block; line-height:0 }
.nl-head__logo img { width:clamp(132px,15vw,168px); height:auto }

/* ---------------- Page ---------------- */
.nl { display:block; background:var(--sand); }
.nl section { padding-left:20px; padding-right:20px; }

/* ---------------- Hero ---------------- */
.nl-hero { padding-top:clamp(40px,7vw,84px); padding-bottom:clamp(28px,4vw,44px); }
.nl-hero__inner { max-width:760px; margin:0 auto; text-align:center; }
.nl-kicker {
  margin:0 0 16px;
  font-family:var(--f-body); font-weight:600;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text);
}
.nl-title {
  margin:0 auto 20px; max-width:22ch;
  font-family:var(--f-display); font-weight:400; letter-spacing:-.02em;
  line-height:1.03; font-size:clamp(2.4rem,6vw,4rem); color:var(--ink-hard);
}
/* Keep the underlined phrase on one line so it never splits mid-phrase (and the
   underline stays continuous). */
.nl-u {
  white-space:nowrap;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% .14em; background-position:0 92%; background-repeat:no-repeat;
  padding-bottom:.02em;
}
.nl-sub {
  margin:0 auto; max-width:48ch;
  font-family:var(--f-body); font-size:clamp(1.05rem,1.8vw,1.24rem);
  line-height:1.55; color:var(--body);
}
.nl-sub strong { color:var(--ink-hard); font-weight:600; }

/* Signup forms. One rule set drives both the hero form and the band form lower
   down; only the wrapper width differs, set per placement below. */
.nl-form__row { display:flex; gap:10px; }
.nl-form input[type="email"] {
  flex:1 1 auto; min-width:0;
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
  padding:14px 16px; border:1px solid var(--border-alt); border-radius:0;
  background:#FCFAF5;
}
.nl-form input[type="email"]::placeholder { color:var(--text-faint); }
.nl-form input[type="email"]:focus { outline:none; border-color:var(--ink-hard); }
/* Dark button, sharp corners, matching the redesign's canonical form button. */
.nl-form button[type="submit"] {
  flex:none; cursor:pointer; white-space:nowrap;
  font-family:var(--f-body); font-weight:600; font-size:1rem; color:var(--sand);
  padding:14px 26px; border:0; border-radius:0; background:var(--ink);
  transition:opacity .15s ease;
}
.nl-form button[type="submit"]:hover { opacity:.88; }
.nl-form button[type="submit"]:disabled { background:var(--text-2); opacity:.7; cursor:default; }
/* Height reserved up front so an arriving response message shifts nothing. */
.nl-form__msg {
  min-height:1.35em; margin:10px 0 0;
  font-family:var(--f-body); font-size:.9rem; line-height:1.35;
  color:var(--accent-text);
}
/* Hero placement: centred and width-capped so it reads as part of the hero. */
.nl-hero .nl-formwrap { margin:26px auto 0; max-width:468px; }
.nl-hero .nl-form__msg { text-align:center; }
.nl-trust--hero { justify-content:center; margin-top:4px; }

/* Visually hidden, still read by screen readers (the input has only a placeholder). */
.nl-sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.nl-proof {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px; margin-top:24px;
}
.nl-proof__faces { display:inline-flex; }
.nl-proof__faces img {
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:2px solid var(--sand); background:var(--card); margin-left:-10px;
}
.nl-proof__faces img:first-child { margin-left:0; }
.nl-proof__txt { font-family:var(--f-body); font-size:1rem; color:var(--text-2); }
.nl-proof__txt strong { color:var(--ink-hard); font-weight:700; }

/* ---------------- Two panels ---------------- */
.nl-panels { padding-top:clamp(28px,4vw,48px); padding-bottom:clamp(28px,4vw,48px); }
.nl-panels__inner {
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.nl-panel {
  background:var(--card); border:1px solid var(--border);
  padding:clamp(20px,3vw,32px);
}
.nl-panel__h {
  margin:0 0 8px;
  font-family:var(--f-body); font-weight:600;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
}

/* Inside every issue */
.nl-inside { list-style:none; margin:0; padding:0; }
.nl-inside li { display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--border); }
.nl-inside li:first-of-type { border-top:0; }
.nl-inside__n {
  flex:none; min-width:2.2ch; padding-top:.12em;
  font-family:var(--f-display); font-weight:400; font-size:1rem; line-height:1.2;
  color:var(--text-faint); letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.nl-inside__body { display:flex; flex-direction:column; gap:3px; }
.nl-inside__body b { font-family:var(--f-body); font-weight:600; font-size:1.02rem; line-height:1.25; color:var(--ink-hard); }
.nl-inside__body span { font-family:var(--f-body); font-size:.92rem; line-height:1.45; color:var(--body); }

/* Recently covered */
.nl-covered { list-style:none; margin:0; padding:0; }
.nl-covered li { border-top:1px solid var(--border); }
.nl-covered li:first-of-type { border-top:0; }
.nl-covered__item { display:flex; gap:14px; align-items:center; padding:14px 0; text-decoration:none; }
.nl-covered__img { flex:none; width:108px; height:72px; object-fit:cover; background:var(--panel); }
.nl-covered__body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.nl-covered__body b {
  font-family:var(--f-body); font-weight:600; font-size:.98rem; line-height:1.25; color:var(--ink-hard);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nl-covered__body span { font-family:var(--f-body); font-size:.86rem; line-height:1.35; color:var(--text-2); }
.nl-covered__item:hover b { color:var(--accent-text); }

/* ---------------- Signup band ---------------- */
.nl-cta { padding-top:clamp(24px,3vw,44px); padding-bottom:clamp(36px,5vw,64px); }
.nl-cta__inner {
  max-width:1080px; margin:0 auto;
  background:var(--panel); border:1px solid var(--border);
  padding:clamp(24px,4vw,40px);
  display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(20px,3vw,36px); align-items:center;
}
.nl-cta__copy { display:flex; gap:16px; align-items:flex-start; }
.nl-cta__ico {
  flex:none; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent-tint); color:var(--accent-text);
}
.nl-cta__ico svg { width:26px; height:26px; }
.nl-cta__text h2 { margin:0 0 6px; font-family:var(--f-display); font-weight:400; font-size:clamp(1.4rem,2.4vw,1.8rem); line-height:1.1; color:var(--ink-hard); }
.nl-cta__text p { margin:0; font-family:var(--f-body); font-size:.98rem; line-height:1.5; color:var(--body); }

.nl-trust { list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 0; padding:0; }
.nl-trust li { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-body); font-size:.9rem; color:var(--text-2); }
.nl-tick { width:18px; height:18px; flex:none; }

/* ---------------- As featured on ---------------- */
.nl-featured { padding-top:clamp(24px,3vw,40px); padding-bottom:clamp(40px,6vw,72px); text-align:center; border-top:1px solid var(--border); }
.nl-featured__label { margin:0 0 16px; font-family:var(--f-body); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.nl-featured__logos { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,4vw,48px); }
.nl-featured__logos li { display:flex; align-items:center; }
.nl-featured__logos img { display:block; max-width:100%; height:auto; filter:grayscale(1); opacity:.6; }

/* ---------------- Minimal footer ---------------- */
.nl-foot {
  border-top:1px solid var(--border);
  padding:clamp(32px,4vw,44px) 20px clamp(28px,4vw,40px);
  text-align:center;
}
.nl-foot__logo { display:inline-block; line-height:0 }
.nl-foot__logo img { width:132px; height:auto }
.nl-foot__tag {
  margin:14px auto 0; max-width:34ch;
  font-family:var(--f-body); font-size:.94rem; line-height:1.5; color:var(--text-2);
}
.nl-foot__social { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px }
.nl-foot__social a { display:inline-flex; align-items:center; color:var(--text-faint) }
.nl-foot__social a:hover { color:var(--ink) }
.nl-foot__social svg { display:block; width:18px; height:18px }
/* Xiaohongshu has no single-path glyph — mask the brand wordmark so it inherits
   the same currentColor hover as the icon set. */
.nl-foot__social .xhs-mark {
  display:block; width:51px; height:18px; background-color:currentColor;
  -webkit-mask:url('xhs.svg') no-repeat center/contain;
          mask:url('xhs.svg') no-repeat center/contain;
}
.nl-foot__legal {
  margin:22px auto 0;
  font-family:var(--f-body); font-size:.82rem; line-height:1.7; color:var(--text-faint);
}
.nl-foot__legal a:hover { color:var(--ink); text-decoration:underline }
.nl-foot__legal .sep { padding:0 8px; opacity:.5 }

/* ---------------- Responsive ---------------- */
@media (max-width:840px) {
  .nl-panels__inner { grid-template-columns:1fr; }
  .nl-cta__inner { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .nl-form__row { flex-direction:column; }
  .nl-form button[type="submit"] { width:100%; }
  .nl-foot__legal .sep { display:block; height:0; overflow:hidden; padding:0 }
}