/* Know Your Midlife — homepage (parent publication)
   Inherits the design language of the LeanBliss and FemiCore reviews: the same
   serif display face, warm-paper neutrals, deep editorial blue + teal accent,
   soft shadows and quiet borders — but tuned to read as the parent brand rather
   than a product review. No product-review furniture (tier chips, pricing,
   evidence blocks) appears here. Images are deferred: every visual is a
   reusable aspect-ratio placeholder that a real asset drops into later without
   shifting layout. */

:root {
  /* ---- ink + paper (shared with the articles) ---- */
  --ink: #16202c;
  --ink-2: #37485a;
  --ink-3: #5d7080;
  --line: #e3e8ec;
  --line-2: #eef2f5;
  --paper: #ffffff;
  --paper-2: #f7f9fa;
  --paper-3: #eaf1f4;

  /* ---- house brand ---- */
  --brand: #1d4e89;      /* deep editorial blue */
  --brand-d: #16406f;
  --brand-dd: #0f2f53;
  --slate: #2f4a62;      /* manifest theme colour */
  --teal: #17a09a;       /* accent */
  --cta: #0f6f6b;        /* primary action */
  --cta-d: #0b5754;

  /* ---- geometry ---- */
  --shell: 1120px;
  --wrap: 760px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px rgba(16, 32, 44, .05);
  --shadow: 0 4px 16px rgba(16, 32, 44, .07);
  --shadow-lg: 0 16px 40px rgba(29, 78, 137, .14);

  --section-gap: 84px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }
a { color: var(--brand-dd); text-underline-offset: 3px; }
a:hover { color: var(--cta-d); }
:focus-visible { outline: 3px solid var(--brand-d); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .shell { padding: 0 18px; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================= masthead */
.masthead { border-bottom: 1px solid var(--line); background: var(--paper); padding: 15px 0; }
.masthead .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--brand-d); }
.brand img { display: block; height: 30px; width: auto; }
@media (max-width: 560px) { .brand img { height: 26px; } }
.masthead-tag {
  font-size: .74rem; color: var(--ink-3); letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.masthead-tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: 0 0 auto;
}

/* ============================================================= site nav */
.topnav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 6px rgba(16, 32, 44, .05);
}
.topnav-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 12px; min-height: 54px;
}
.topnav-home {
  flex: 0 0 auto; font-family: var(--serif); font-weight: 600; font-size: 1rem;
  color: var(--ink); text-decoration: none; padding-right: 4px;
}
.topnav-home:hover { color: var(--brand-dd); }
.topnav-list {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.topnav-list::-webkit-scrollbar { display: none; }
.topnav-list li { flex: 0 0 auto; margin: 0; }
.topnav-list a {
  display: block; padding: 7px 12px; border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.topnav-list a:hover, .topnav-list a:focus { color: var(--brand-dd); background: var(--paper-3); }
@media (max-width: 640px) {
  .topnav-inner { padding: 0 12px; gap: 8px; min-height: 48px; }
  .topnav-list a { padding: 6px 10px; }
}
@media (max-width: 400px) { .topnav-home { display: none; } }

/* ============================================================= buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.3;
  padding: 14px 26px; border-radius: var(--radius); text-decoration: none;
  min-height: 48px; border: 2px solid transparent; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-primary { background: var(--cta); color: #fff; border-color: var(--cta); box-shadow: 0 6px 18px rgba(15, 111, 107, .2); }
.btn-primary:hover, .btn-primary:focus { background: var(--cta-d); border-color: var(--cta-d); color: #fff; transform: translateY(-1px); }
.btn-outline { background: var(--paper); color: var(--brand-dd); border-color: var(--brand); }
.btn-outline:hover, .btn-outline:focus { background: var(--brand-dd); border-color: var(--brand-dd); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand-dd); border: 0; padding: 14px 6px; }
.btn-ghost::after { content: "\2192"; transition: transform .16s ease; }
.btn-ghost:hover, .btn-ghost:focus { color: var(--cta-d); text-decoration: underline; }
.btn-ghost:hover::after { transform: translateX(3px); }

/* link with trailing arrow */
.arrow-link {
  font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--brand-dd);
  display: inline-flex; align-items: center; gap: 6px;
}
.arrow-link::after { content: "\2192"; transition: transform .16s ease; }
.arrow-link:hover { color: var(--cta-d); }
.arrow-link:hover::after { transform: translateX(3px); }

/* ============================================================= section shell */
.section { padding: var(--section-gap) 0; }
.section + .section:not(.section-tint) { padding-top: 0; }
.section-tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tint + .section { padding-top: var(--section-gap); }

.eyebrow {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-d); font-weight: 700; margin: 0 0 16px;
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--teal); border-radius: 2px; }

h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(2.15rem, 5vw, 3.15rem); line-height: 1.12; color: var(--ink); margin: 0 0 20px;
}
h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.2; color: var(--ink);
  margin: 0 0 14px; padding-top: 18px; position: relative; scroll-margin-top: 76px;
}
h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--teal));
}
.section-head { max-width: 660px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center h2::before { left: 50%; transform: translateX(-50%); }
.section-head.center .eyebrow { justify-content: center; }
.section-sub { font-size: 1.08rem; color: var(--ink-2); margin: 0; }

h3 { font-family: var(--sans); font-weight: 700; color: var(--ink); }

/* ============================================================= placeholder system */
.ph {
  position: relative; display: block; width: 100%; overflow: hidden;
  background:
    radial-gradient(120% 130% at 50% 18%, #ffffff 0%, var(--paper-3) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ph::after {
  content: attr(data-label);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: #9fb2c0; padding: 8px; text-align: center;
}
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph--contain > img { object-fit: contain; }
.ph:has(img)::after { content: none; } /* hide the label once a real image drops in */

.ph-1x1 { aspect-ratio: 1 / 1; }
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-16x9 { aspect-ratio: 16 / 9; }

/* icon placeholders (methodology + looking-into) */
.ph-icon {
  width: 64px; height: 64px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #eef5f8, var(--paper-3));
  border: 1px solid var(--line); flex: 0 0 auto; position: relative;
}
.ph-icon::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 5px;
  background: #c4d4de;
}
.ph-icon-sm { width: 40px; height: 40px; border-radius: 8px; }
.ph-icon-sm::after { width: 15px; height: 15px; border-radius: 4px; }

/* real icon dropped into a .ph-icon tile: hide the decorative square and
   let the artwork sit inside the tile. The source icons already carry their
   own internal padding, so we contain (never upscale or distort) them and
   add no extra padding, keeping all four visually consistent. */
.ph-icon:has(img)::after { content: none; }
.ph-icon > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ============================================================= hero */
/* The editorial artwork is a decorative background layer on the right of the
   hero (not a card): a ::before pseudo-element, cover-sized and right-anchored
   so the figure — which sits on the right of the source art — stays in view,
   then masked so it fades toward the centre and never sits behind the H1.
   Being a background, it is invisible to assistive tech and never affects
   layout (no shift, no pushing the H1 down). */
.hero { position: relative; overflow: hidden; padding: 64px 0 72px; }
.hero::before {
  content: "";
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 52%; max-width: 760px;
  background: url("/assets/img/know-your-midlife-editorial-hero.webp") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 8%, #000 52%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 8%, #000 52%);
  pointer-events: none;
  z-index: 0;
}
.hero .shell { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } }
.hero-standfirst { font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 30px; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
@media (max-width: 899px) {
  .hero { padding: 40px 0 52px; }
  /* text-first on mobile: art recedes to a soft lower-right wash so the
     eyebrow + H1 sit on near-clean paper */
  .hero::before {
    width: 78%; max-width: none; opacity: .3;
    background-position: right bottom;
    -webkit-mask-image: linear-gradient(155deg, transparent 0, transparent 46%, #000 100%);
            mask-image: linear-gradient(155deg, transparent 0, transparent 46%, #000 100%);
  }
}

/* ============================================================= grids + cards */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card-link { text-decoration: none; color: inherit; }
.card-link:hover, .card-link:focus-within { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #d6e0e7; }
.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.card-cat {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--brand-d); margin: 0 0 8px;
}
.card h3 { font-size: 1.16rem; line-height: 1.3; margin: 0 0 8px; }
.card p { font-size: .95rem; color: var(--ink-2); margin: 0 0 16px; }
.card .arrow-link { margin-top: auto; }

/* upcoming topic cards — real editorial pillars not yet published.
   Clearly flagged and non-clickable, so a topic is never confused with a product review. */
.card-soon { cursor: default; }
.card-soon .ph img { opacity: .82; }
.soon-tag {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.soon-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .55; }

/* ---- methodology principle cards ---- */
.principle { padding: 22px 22px 24px; }
.principle .ph-icon { margin-bottom: 16px; }
.principle h3 { font-size: 1.08rem; margin: 0 0 6px; }
.principle p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* ---- featured review cards ---- */
.review-card .ph { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.review-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.review-pills li {
  margin: 0; font-size: .74rem; font-weight: 600; color: var(--brand-dd);
  background: var(--paper-3); border: 1px solid #dbe6ec; border-radius: 999px; padding: 4px 11px;
}

/* ---- looking-into: lighter, icon-led rows ---- */
.looking-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .looking-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .looking-grid { grid-template-columns: repeat(3, 1fr); } }
.looking-item {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; transition: border-color .16s ease, background-color .16s ease;
}
.looking-item:hover, .looking-item:focus { border-color: var(--brand); background: var(--paper-2); }
.looking-item .nm { font-weight: 650; color: var(--ink); font-size: .98rem; }
.looking-item .arrow { margin-left: auto; color: var(--ink-3); transition: transform .16s ease; }
.looking-item:hover .arrow { transform: translateX(3px); color: var(--brand-dd); }

/* ============================================================= editorial positioning */
.editorial { background: linear-gradient(180deg, #f4f8fb, var(--paper-2)); border: 1px solid #d8e4ee; border-radius: var(--radius-lg); padding: 40px; }
@media (max-width: 560px) { .editorial { padding: 26px 20px; } }
.editorial p { font-size: 1.04rem; }
.editorial p:last-of-type { margin-bottom: 0; }
.principle-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .principle-list { grid-template-columns: 1fr 1fr; gap: 12px 32px; } }
.principle-list li { position: relative; padding-left: 30px; margin: 0; font-size: .98rem; color: var(--ink-2); }
.principle-list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cta);
  -webkit-mask: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M8.5 13.6 4.9 10l-1.3 1.3 4.9 4.9 10-10L17.1 5z'/%3E%3C/svg%3E");
  mask: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M8.5 13.6 4.9 10l-1.3 1.3 4.9 4.9 10-10L17.1 5z'/%3E%3C/svg%3E");
}

/* ============================================================= article feed */
/* Text-led cards, deliberately lighter than the Featured Reviews cards
   (no thumbnail, no drop shadow — border only). */
.article-card { box-shadow: none; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .78rem; color: var(--ink-3); margin: 0 0 10px; }
.article-meta .cat { color: var(--brand-d); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.article-card h3 { font-size: 1.14rem; line-height: 1.32; margin: 0 0 8px; }
/* reserved (upcoming) slot — visually held, clearly not a fake article */
.card-reserved {
  border-style: dashed; box-shadow: none; background: var(--paper-2);
  align-items: center; justify-content: center; text-align: center; min-height: 220px;
}
.card-reserved .rz {
  padding: 28px; color: var(--ink-3); font-size: .9rem; max-width: 30ch;
}
.card-reserved .rz strong { display: block; color: var(--ink-2); font-family: var(--serif); font-size: 1.1rem; margin-bottom: 6px; }

/* ============================================================= closing CTA / newsletter */
.closing { background: var(--slate); color: #eaf1f6; border-radius: var(--radius-lg); padding: 52px 44px; text-align: center; }
@media (max-width: 560px) { .closing { padding: 36px 22px; } }
.closing h2 { color: #fff; }
.closing h2::before { left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #6fb7d6, var(--teal)); }
.closing .section-sub { color: #c6d6e2; max-width: 52ch; margin: 0 auto 26px; }
.closing-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 28px; }
.closing .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.closing .btn-outline:hover, .closing .btn-outline:focus { background: #fff; color: var(--slate); border-color: #fff; }
.signup {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 480px; margin: 0 auto;
}
.signup input[type="email"] {
  flex: 1 1 220px; min-width: 0; font-size: 1rem; padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff;
}
.signup input::placeholder { color: #b6c7d4; }
.signup .btn-primary { flex: 0 0 auto; }
.signup-note { font-size: .8rem; color: #a9bccb; margin: 14px 0 0; }
.signup-status { font-size: .85rem; font-weight: 600; margin: 12px 0 0; min-height: 1.2em; }
.signup-status.is-success { color: #b8ecc6; }
.signup-status.is-error { color: #ffb3b8; }

/* ============================================================= footer */
.site-footer { margin-top: var(--section-gap); background: var(--paper-2); border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-3); padding: 52px 0 46px; }
.footer-top { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand .brand { font-size: 1.2rem; }
.footer-brand p { margin: 12px 0 0; max-width: 34ch; }
.footer-col h3 { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; font-family: var(--sans); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0 0 9px; }
.footer-col a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.footer-col a:hover { color: var(--brand-dd); text-decoration: underline; }
.footer-legal { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 24px; }
.footer-legal p { margin: 0 0 12px; font-size: .82rem; line-height: 1.6; }
.footer-legal strong { color: var(--ink-2); }
.footer-copy { margin-top: 8px; font-size: .8rem; }

/* ============================================================= small screens */
@media (max-width: 560px) {
  body { font-size: 17px; }
  :root { --section-gap: 60px; }
  .btn { width: 100%; }
  .hero-cta .btn { width: 100%; }
}