/* ===================================================================
   Records — editorial section on amandasavinon.com
   Scoped stylesheet. Shares brand palette with the main site but
   declares its own rules so Records doesn't inherit main-site cascade.
   =================================================================== */

:root {
  /* Palette mirrors amandasavinon.com exactly. Terracotta is the brand's
     warm editorial accent (its italic-emphasis color); green (sage-dark /
     olive) owns every action — buttons and links. No blue anywhere. */
  --cream:        #f6f3ec;
  --cream-card:   #fdfbf6;
  --cream-edge:   #ede8dd;
  --charcoal:     #1e1b15;
  --charcoal-lt:  #3b352d;
  --charcoal-footer: #242019;
  --sage:         #b8c5a8;
  --sage-dark:    #8a3d2c;
  --sage-deep:    #c9a294;
  --olive:        #5c554a;
  --terracotta:   #8a3d2c;
  --terracotta-dk:#6f2f22;
  --gold:         #b89a5a;
  --hairline:     #ded7c9;

  --accent:       var(--terracotta);   /* display + editorial accent */
  --action:       var(--sage-dark);    /* buttons / links */
  --action-hover: var(--olive);

  --font-display: 'Cardo', Georgia, 'Times New Roman', serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', 'Helvetica Neue', system-ui, sans-serif;

  --ease-lux: cubic-bezier(0.22, 0.61, 0.36, 1);

  --max-page: 1120px;
  --max-read: 680px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.records {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--charcoal);
  /* Fun cursor — black asterisk, echoing the ✳ nav. */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cg%20stroke%3D%22%232b2926%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2214%22%20y1%3D%225%22%20x2%3D%2214%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%226.2%22%20y1%3D%229.5%22%20x2%3D%2221.8%22%20y2%3D%2218.5%22%2F%3E%3Cline%20x1%3D%226.2%22%20y1%3D%2218.5%22%20x2%3D%2221.8%22%20y2%3D%229.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 14 14, auto;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
  font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* Keep a normal caret where people type. */
body.records input, body.records textarea, body.records select { cursor: text; }

.records-skip {
  position: absolute;
  top: -100px; left: 8px;
  background: var(--charcoal); color: #fff;
  padding: 8px 14px; border-radius: 0 0 6px 6px;
  font-family: var(--font-ui); font-size: 0.85rem;
  z-index: 999;
  transition: top 0.15s;
}
.records-skip:focus { top: 0; }

/* Visible focus treatment for keyboard users. Default browser outlines
   were being swallowed on anchors with border-bottom styling — this
   gives every interactive element a consistent sage ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 3px;
  border-radius: 3px;
}

.eyebrow, .record-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 10px;
}

.record-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.65rem; letter-spacing: 0.1em;
  background: var(--gold); color: #fff;
  border-radius: 10px;
  vertical-align: 1px;
  font-weight: 700;
}

/* ============================================================ NAV */
.records-nav {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}
.records-nav-inner {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
}
.records-logo {
  font-family: var(--font-ui);
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal);
}
.records-menu {
  display: flex; gap: 30px; align-items: center;
}
.records-menu a {
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal-lt);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease-lux);
}
.records-menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-lux);
}
.records-menu a:hover { color: var(--charcoal); }
.records-menu a:hover::after { transform: scaleX(1); }

/* Persistent, top-of-page email CTA — the brand's green action color. */
.records-menu-cta {
  color: #fff !important;
  background: var(--action);
  padding: 10px 18px 9px !important;
  border-radius: 3px;
  transition: background 0.3s var(--ease-lux), transform 0.3s var(--ease-lux);
}
.records-menu-cta::after { display: none; }
.records-menu-cta:hover { color: #fff !important; background: var(--action-hover); transform: translateY(-1px); }

/* ============================================================ MAIN layout */
main {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================ HERO (landing)
   Visual-first: section identity on the left, the lead essay as a large
   image-led feature on the right — so the page opens on imagery + a story,
   not a wall of display type. */
.records-hero {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: 64px 0 72px;
  margin-bottom: 72px;
  border-bottom: 1px solid var(--hairline);
}
.records-hero-intro { max-width: 500px; }
.records-hero-title {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--accent);
  margin: 4px 0 20px;
}
.records-hero-dek {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--charcoal-lt);
  max-width: 420px;
  margin-bottom: 28px;
}
.records-hero-cue {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--action);
  border-bottom: 1px solid var(--sage-deep);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease-lux), border-color 0.3s var(--ease-lux);
}
.records-hero-cue:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); }

.records-hero-feature {
  display: block;
  background: var(--cream-card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux), border-color 0.45s var(--ease-lux);
}
.records-hero-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -22px rgba(44, 40, 32, 0.30);
  border-color: var(--accent);
}
.records-hero-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream-edge);
}
.records-hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease-lux);
}
.records-hero-feature:hover .records-hero-img img { transform: scale(1.04); }
.records-hero-feature-body { padding: 26px 30px 30px; }
.records-hero-feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.16;
  color: var(--charcoal);
  margin-bottom: 12px;
  transition: color 0.3s var(--ease-lux);
}
.records-hero-feature:hover .records-hero-feature-title { color: var(--accent); }
.records-hero-feature-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--charcoal-lt);
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 54ch;
}
.records-hero-readon { color: var(--action); font-weight: 600; }

/* ============================================================ MASTHEAD (landing) */
.records-mast {
  padding: 100px 0 56px;
  margin-bottom: 8px;
  max-width: 800px;
  border-bottom: 1px solid var(--hairline);
}
.records-mast h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.8vw, 4.25rem);
  line-height: 1.06;
  color: var(--accent);
  margin-bottom: 22px;
  letter-spacing: -0.012em;
}
.records-mast-dek {
  font-size: 1.12rem;
  color: var(--charcoal-lt);
  max-width: 620px;
  line-height: 1.7;
}

/* Category-variant masthead reads as a subsection, not a front door —
   smaller display size, same typographic feel. */
.records-mast-category { padding: 60px 0 40px; }
.records-mast-category h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}

/* Empty-state for a category with no posts yet. */
.records-empty {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--charcoal-lt);
  padding: 40px 0;
  text-align: center;
}

/* ============================================================ EDITOR'S PICKS */
.records-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  color: var(--accent);
  margin-bottom: 30px;
}

.records-picks {
  margin-bottom: 80px;
}
.records-picks-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  grid-auto-rows: min-content;
}
/* Two picks of deliberately different proportion — a tall portrait beside a
   wider landscape — so curation reads as a magazine spread, not two tiles. */
.records-picks-duo {
  display: grid;
  grid-template-columns: 0.92fr 1.18fr;
  gap: 36px;
  align-items: start;
}
.records-pick--tall .records-pick-img { aspect-ratio: 4 / 5; }
.records-pick--wide .records-pick-img { aspect-ratio: 3 / 2; }
.records-pick--wide { margin-top: 36px; }
.records-pick {
  display: block;
  background: var(--cream-card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux), border-color 0.45s var(--ease-lux);
}
.records-pick:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(44, 40, 32, 0.28);
  border-color: var(--accent);
}
.records-pick-lead {
  grid-row: span 2;
}
.records-pick-img {
  aspect-ratio: 3 / 2;
  background: var(--cream-edge);
  overflow: hidden;
}
.records-pick-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease-lux);
}
.records-pick:hover .records-pick-img img { transform: scale(1.045); }
.records-pick-img-placeholder,
.records-card-img-placeholder {
  background: linear-gradient(135deg, var(--cream-edge) 0%, rgba(138, 158, 116, 0.25) 100%);
}
.records-pick-body {
  padding: 16px 18px 20px;
}
.records-pick-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.2;
  color: var(--charcoal);
  margin-bottom: 8px;
  transition: color 0.3s var(--ease-lux);
}
.records-pick:hover .records-pick-body h3 { color: var(--accent); }
.records-pick-lead .records-pick-body h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
}
.records-pick-dek {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--charcoal-lt);
  margin-bottom: 10px;
  line-height: 1.5;
}
.records-pick-meta {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--olive);
  letter-spacing: 0.04em;
}

/* ============================================================ CATEGORIES */
.records-categories {
  margin-bottom: 36px;
}
.records-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-lt);
  background: var(--cream-card);
  transition: color 0.3s var(--ease-lux), border-color 0.3s var(--ease-lux), background 0.3s var(--ease-lux);
}
.chip:hover { border-color: var(--accent); color: var(--charcoal); }
.chip-active {
  background: var(--charcoal); color: #fff; border-color: var(--charcoal);
}
.chip-active:hover { color: #fff; border-color: var(--charcoal); }

/* ============================================================ ARCHIVE */
.records-archive {
  padding-bottom: 80px;
}
/* Three-up grid with smaller cards. Shape varies by ROW — landscape rows and
   portrait rows alternate — so the page reads editorial, not a uniform block,
   while every row's cards still align cleanly (no ragged gaps). */
.records-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 30px;
}
.records-card {
  display: block;
}
.records-card-img {
  aspect-ratio: 3 / 2;
  background: var(--cream-edge);
  margin-bottom: 14px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(44, 40, 32, 0.06);
}
/* Every other row of three runs portrait instead of landscape. */
.records-card:nth-child(6n+4) .records-card-img,
.records-card:nth-child(6n+5) .records-card-img,
.records-card:nth-child(6n+6) .records-card-img { aspect-ratio: 4 / 5; }
.records-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease-lux);
}
.records-card:hover .records-card-img img { transform: scale(1.045); }
.records-card-img-placeholder {
  background: linear-gradient(135deg, var(--cream-edge), var(--sage-deep) 200%);
  opacity: 0.3;
}
.records-card-body { padding: 0 2px; }
.records-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.22;
  color: var(--charcoal);
  margin-bottom: 7px;
  transition: color 0.3s var(--ease-lux);
}
.records-card:hover .records-card-title { color: var(--accent); }
.records-card-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--charcoal-lt);
  margin-bottom: 9px;
}
.records-card-meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--olive);
  letter-spacing: 0.03em;
}

/* ============================================================ SUBSCRIBE */
.records-subscribe {
  margin: 24px 0 88px;
  padding: 64px 32px 68px;
  background: var(--cream-card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  text-align: center;
}
.records-subscribe .records-section-title {
  margin-bottom: 18px;
}
.records-subscribe-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--charcoal);
  max-width: 520px;
  margin: 0 auto 14px;
  line-height: 1.5;
}
.records-subscribe-note {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--olive);
  margin-bottom: 26px;
}
.records-subscribe-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 34px;
  background: var(--action);
  color: #fff;
  border-radius: 3px;
  transition: background 0.3s var(--ease-lux), transform 0.3s var(--ease-lux);
}
.records-subscribe-link:hover { background: var(--action-hover); transform: translateY(-1px); }

/* ============================================================ ARTICLE (/nowwhat/:slug) */
.record {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 40px 0 80px;
}
.record-crumb {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--olive);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}
.record-crumb a { color: var(--olive); border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.record-crumb a:hover { border-bottom-color: var(--olive); }

.record-header {
  margin-bottom: 32px;
}
.record-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--charcoal);
  margin-bottom: 18px;
}
.record-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--charcoal-lt);
  margin-bottom: 18px;
  line-height: 1.5;
}
.record-meta {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--olive);
  letter-spacing: 0.04em;
}

.record-hero {
  margin: 28px 0 44px;
}
.record-hero-frame {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream-edge);
  box-shadow: inset 0 0 0 1px rgba(44, 40, 32, 0.06);
}
.record-hero-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Caption + photo credit — small italic line beneath any image. Used on the
   hero (heroCredit frontmatter) and on in-body <figure> images. */
.record-caption,
.record-body figure figcaption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--charcoal-lt);
  margin-top: 9px;
}

/* In-body images: wrap in <figure><img><figcaption>…</figcaption></figure>. */
.record-body figure {
  margin: 32px 0;
}
.record-body figure img {
  display: block;
  width: 100%;
  border-radius: 4px;
}

.record-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--charcoal);
}
.record-body p { margin-bottom: 18px; }
/* Drop cap on the opening paragraph — set in Cardo, the section's display face. */
.record-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.1rem;
  line-height: 0.82;
  margin: 0.08em 0.1em 0 0;
  color: var(--accent);
}
.record-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--accent);
  margin: 36px 0 14px;
}
.record-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 28px 0 10px;
}
.record-body a {
  color: var(--sage-dark);
  border-bottom: 1px solid var(--sage-deep);
  transition: color 0.15s, border-color 0.15s;
}
.record-body a:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); }
.record-body blockquote {
  margin: 48px 0;
  padding: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  line-height: 1.4;
  color: var(--accent);
}
.record-body blockquote::before {
  content: "";
  display: block;
  width: 40px; height: 2px;
  margin: 0 auto 26px;
  background: var(--accent);
}
.record-body blockquote p { margin-bottom: 0; }
.record-body blockquote p + p { margin-top: 14px; }
.record-body strong { color: var(--charcoal); }
.record-body em { color: var(--charcoal); }
.record-body hr {
  border: 0;
  border-top: 1px solid var(--cream-edge);
  margin: 36px 0;
}

.record-signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--accent);
  margin: 48px 0 28px;
  padding-top: 36px;
  border-top: 1px solid var(--hairline);
}

.record-cta {
  background: var(--cream-card);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  padding: 24px 26px;
  margin: 20px 0 40px;
  border-radius: 0 4px 4px 0;
}
.record-cta p {
  font-size: 1rem;
  color: var(--charcoal-lt);
  line-height: 1.55;
  margin: 0;
}
.record-cta a {
  color: var(--sage-dark);
  font-weight: 700;
  border-bottom: 1px solid var(--sage-deep);
}

.record-back {
  margin-top: 24px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.record-back a { color: var(--olive); border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.record-back a:hover { border-bottom-color: var(--olive); }

.record-related {
  margin: 64px 0 24px;
  padding-top: 36px;
  border-top: 1px solid var(--cream-edge);
}
.record-related-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 20px;
}
.record-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.record-related-grid .records-card-title {
  font-size: 1.05rem;
}

/* ============================================================ START HERE */
.records-start {
  max-width: 760px;
  padding: 56px 0 80px;
}
.records-start h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--accent);
  margin-bottom: 20px;
  line-height: 1.1;
}
.records-start-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--charcoal-lt);
  margin-bottom: 40px;
}
.records-start-picks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.records-start-pick {
  display: block;
  background: var(--cream-card);
  border: 1px solid var(--cream-edge);
  border-radius: 10px;
  padding: 20px 22px;
  transition: border-color 0.15s, transform 0.15s;
}
.records-start-pick:hover {
  border-color: var(--sage-dark);
  transform: translateY(-2px);
}
.records-start-pick h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 6px;
  color: var(--charcoal);
}
.records-start-pick p { font-size: 0.95rem; color: var(--charcoal-lt); line-height: 1.55; }

/* ============================================================ 404 */
.records-404 {
  max-width: 640px;
  padding: 88px 0 120px;
  text-align: left;
}
.records-404 h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--accent);
  line-height: 1.05;
  margin-bottom: 20px;
}
.records-404-lede {
  font-size: 1.15rem;
  color: var(--charcoal-lt);
  margin-bottom: 28px;
  line-height: 1.65;
}
.records-404-cta {
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.records-back-link {
  color: var(--sage-dark);
  border-bottom: 1px solid var(--sage-deep);
  transition: color 0.15s, border-color 0.15s;
}
.records-back-link:hover {
  color: var(--charcoal);
  border-bottom-color: var(--charcoal);
}
.records-404-sep { color: var(--olive); margin: 0 6px; }

/* ============================================================ FOOTER */
.records-footer {
  background: var(--charcoal-footer);
  color: rgba(255,255,255,0.85);
  padding: 30px 0 26px;
  margin-top: 40px;
}
.records-footer-inner {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.records-footer-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  color: #fff;
  margin-bottom: 12px;
}
.records-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 14px;
}
.records-footer-links a {
  font-family: var(--font-ui);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease-lux), border-color 0.3s var(--ease-lux);
}
.records-footer-links a:hover {
  color: #fff;
  border-bottom-color: var(--terracotta);
}
.records-footer-social {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 16px;
}
.records-footer-social a {
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  transition: color 0.3s var(--ease-lux), transform 0.3s var(--ease-lux);
}
.records-footer-social a:hover {
  color: var(--terracotta);
  transform: translateY(-2px);
}
.records-footer-social svg { display: block; }
.records-footer-copy {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-ui);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* ============================================================ RESPONSIVE */
@media (max-width: 860px) {
  .records-picks-grid {
    grid-template-columns: 1fr;
  }
  .records-pick-lead {
    grid-row: span 1;
  }
  .records-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 0 48px;
    margin-bottom: 56px;
  }
  .records-hero-intro { max-width: none; }
  .records-picks-duo {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .records-pick--wide { margin-top: 0; }
  .records-pick--tall .records-pick-img { aspect-ratio: 3 / 2; }
  .records-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  html { font-size: 16px; }
  main { padding: 0 16px; }
  .records-nav-inner { padding: 14px 16px; flex-wrap: wrap; gap: 12px; }
  .records-menu { gap: 18px; }
  .records-menu a { font-size: 0.72rem; }
  .records-mast { padding: 60px 0 40px; }
  .records-archive-grid { grid-template-columns: 1fr; gap: 36px; }
  .records-subscribe { padding: 48px 22px 52px; }
  .record-body > p:first-of-type::first-letter { font-size: 3.4rem; }
  .records-footer-links { gap: 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   "Now What?" — ported flip/Newsreader design (landing + headers)
   ============================================================ */
.records.home { background: #eeeae1; }
.nw-home-hd, .nw-hd, .nw-page, .nw-mast-h, .nw-mast-tag, .nw-mast-by,
.nw-nav, .nw-navmenu, .nw-wm, .nw-card, .nw-lead-h, .nw-lead-d,
.nw-card-h, .nw-card-d, .nw-restlabel, .nw-date {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
}
/* Home masthead header */
/* ===== Full-quirk header (booooooom-inspired) ===== */
/* Top strip: email-list call to action + Join pill (replaces the marquee) */
.nw-cta-strip { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; background: #2b2926; color: var(--cream); padding: 10px 20px; text-align: center; }
.nw-cta-strip-txt { font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; }
.nw-cta-pill { font-family: var(--font-ui); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #2b2926; background: var(--cream); padding: 7px 20px; border-radius: 999px; transition: background 0.2s var(--ease-lux), color 0.2s var(--ease-lux); }
.nw-cta-pill:hover { background: var(--terracotta); color: #fff; }
/* Nav bar: logo left, horizontal asterisk-separated links right */
.nw-navbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 15px 30px; background: var(--cream); flex-wrap: wrap; }
.nw-logo { font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal); transition: color 0.25s var(--ease-lux); }
.nw-logo:hover { color: var(--terracotta); }
.nw-nav2 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.nw-nav2 a { font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); transition: color 0.2s var(--ease-lux); }
.nw-nav2 a:hover { color: var(--terracotta); }
.nw-nav2 i { color: var(--terracotta); font-style: normal; font-size: 0.58rem; }
.nw-mn, .nw-mnbtn { display: none; }
.nw-cta-pill--menu { display: none; }
/* Home hero block (centered) */
.nw-hero-block { position: relative; background: #f6f2ea; color: #242019; --qast-mask: #f6f2ea; text-align: center; padding: 54px 24px 48px; border-top: 3px solid #2b2926; overflow: hidden; }
.nw-hero-h { font-family: 'Newsreader', Georgia, serif; font-weight: 600; color: #242019; font-size: clamp(3.2rem, 9vw, 6.2rem); line-height: 0.9; letter-spacing: -0.01em; margin: 0; }
.nw-stretch { display: inline-block; transform: scaleX(2.2); transform-origin: center; margin: 0 0.16em; }
/* The ?'s dot becomes the site's ✳ (hero size only — the ✳ needs room to read).
   ::before masks the glyph's own dot with the hero background; ::after sets the ✳. */
.nw-qast { position: relative; display: inline-block; }
.nw-qast::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.17em; width: 0.34em; height: 0.24em; background: var(--qast-mask, var(--terracotta)); }
.nw-qast::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.185em; width: 0.26em; height: 0.26em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cg%20stroke%3D%22%232b2926%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2214%22%20y1%3D%222.5%22%20x2%3D%2214%22%20y2%3D%2225.5%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%228.2%22%20x2%3D%2224%22%20y2%3D%2219.8%22%2F%3E%3Cline%20x1%3D%224%22%20y1%3D%2219.8%22%20x2%3D%2224%22%20y2%3D%228.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.nw-hero-dek { font-family: 'Newsreader', Georgia, serif; font-style: normal; font-size: clamp(1.18rem, 2.6vw, 1.4rem); line-height: 1.42; max-width: 600px; margin: 18px auto 0; color: #1e1b15; }
.nw-sticker:hover { transform: rotate(-11deg) scale(1.06); box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); }
.nw-sticker { position: absolute; top: 24px; right: 34px; width: 118px; height: 118px; border-radius: 50%; background: #cf9a3c; color: #2b2216; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-ui); font-weight: 800; font-size: 0.6rem; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; transform: rotate(-11deg); padding: 8px; cursor: pointer; transition: transform .25s var(--ease-lux), box-shadow .25s var(--ease-lux); box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
.nw-home-hd { border-bottom: 1px solid #e3ddd0; }
.nw-nav { max-width: 1100px; margin: 0 auto; padding: 16px 28px; display: flex; justify-content: center; gap: 26px; border-bottom: 1px solid #e3ddd0; }
.nw-nav a { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c0825a; }
.nw-mast { text-align: center; padding: 44px 24px 34px; max-width: 820px; margin: 0 auto; }
.nw-mast-h { font-weight: 600; color: #c0825a; letter-spacing: -0.01em; font-size: clamp(2.6rem, 6.5vw, 4.6rem); line-height: 1; margin: 0; }
.nw-mast-tag { font-size: clamp(1.25rem, 2.4vw, 1.65rem); color: #5e574d; max-width: 660px; margin: 16px auto 0; line-height: 1.45; }
.nw-mast-by { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8278; margin-top: 18px; }
/* "Read" CTA beneath the lead story */
.nw-read { display: inline-block; margin-top: 18px; font-family: 'Inter', system-ui, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: #c0825a; color: #fff; padding: 11px 32px; border-radius: 3px; transition: background 0.3s ease; }
.nw-lead a:hover .nw-read { background: #a96e48; }
/* Slim header (inner pages) */
.nw-hd { border-bottom: 1px solid #e3ddd0; }
.nw-hd-in { max-width: 1080px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.nw-wm { font-style: italic; font-weight: 500; font-size: 1.3rem; color: #c0825a; }
.nw-nvt { display: none; }
.nw-ham { display: none; }
.nw-navmenu { display: flex; }
.nw-navmenu a { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #c0825a; margin-left: 24px; }
/* Landing */
.nw-page { max-width: 1040px; margin: 30px auto; background: #fdfbf6; border: 1px solid #e3ddd0; border-radius: 10px; box-shadow: 0 18px 50px -30px rgba(40,34,24,.5); padding: 40px 0; overflow: hidden; }

/* ===== Quirky landing: featured story (image left / text right) + grid ===== */
.nw-feature { display: grid; grid-template-columns: 1.12fr 1fr; gap: 36px; align-items: center; padding: 30px 44px 38px; }
.nw-feature { align-items: start; }
.nw-feature--noimg { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; }
/* Second feature mirrors the first so the two stack as a spread rather than
   two identical rows. Reverts to image-on-top on narrow screens. */
.nw-feature--alt { grid-template-columns: 1fr 1.12fr; border-top: 1px solid #e3ddd0; }
.nw-feature--alt .nw-feature-img { order: 2; }
.nw-feature--alt .nw-feature-body { order: 1; }
.nw-feature-img { display: block; overflow: hidden; border-radius: 6px; background: #e3ddd0; }
.nw-feature-img img { width: 100%; height: auto; display: block; transition: transform .55s var(--ease-lux); }
.nw-feature-img:hover img { transform: scale(1.04); }
.nw-kicker { display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 13px; }
.nw-feature-h { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.07; letter-spacing: -0.01em; margin: 0 0 13px; }
.nw-feature-h a { color: #2c2c2c; }
.nw-feature-h a:hover { color: var(--terracotta); }
.nw-feature-d { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.2rem; line-height: 1.5; color: #5e574d; margin: 0 0 16px; }
/* Byline on its own line above the date — tidier than one crowded meta row. */
.nw-by { display: block; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); margin-bottom: 22px; }
.nw-by--card { margin-bottom: 3px; }
.nw-feature-meta { display: block; font-family: var(--font-ui); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive); margin: 2px 0 12px; }
.nw-readmore { display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--terracotta); padding: 14px 28px; border-radius: 3px; transition: background .25s var(--ease-lux), transform .25s var(--ease-lux); }
.nw-readmore:hover { background: var(--terracotta-dk); transform: translateY(-2px); }

.nw-more { padding: 0 44px 40px; }
.nw-more-label { text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #2c2c2c; margin: 4px 0 34px; padding-top: 34px; border-top: 1px solid var(--hairline); }
.nw-more-label span { color: var(--terracotta); }
/* Aligned 3-up rows; images keep their natural shape (no crop). */
.nw-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 30px; align-items: start; }
/* Editorial stagger: the cards do not share a top baseline, so the row reads
   as placed objects rather than a uniform strip. */
.nw-more-grid > .nw-scard:nth-child(3n+2) { margin-top: 26px; }
.nw-more-grid > .nw-scard:nth-child(3n+3) { margin-top: 12px; }
.nw-scard { display: block; }
/* Each lede keeps its own proportions. Bounding by HEIGHT rather than width
   means a portrait renders narrower and a landscape wider, instead of every
   image being stretched to the column and portraits becoming enormous. */
/* Each lede keeps its own proportions. Bounding by HEIGHT rather than width
   means a portrait renders narrower and a landscape wider, instead of every
   image being stretched to the column and portraits becoming enormous. */
.nw-scard-img { display: block; overflow: hidden; border-radius: 5px; margin-bottom: 14px; background: transparent; line-height: 0; }
.nw-scard-img img { width: auto; max-width: 100%; height: auto; max-height: 330px;
  display: block; border-radius: 5px; transition: transform .55s var(--ease-lux); }
.nw-scard:hover .nw-scard-img img { transform: scale(1.05); }
.nw-scard-date { display: block; font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive); margin-bottom: 7px; }
.nw-scard-h { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 1.28rem; line-height: 1.18; margin: 0 0 7px; color: #2c2c2c; transition: color .2s var(--ease-lux); }
.nw-scard:hover .nw-scard-h { color: var(--terracotta); }
.nw-scard-d { font-family: 'Newsreader', Georgia, serif; font-size: 0.99rem; line-height: 1.45; color: #5e574d; margin: 0; }
@media (max-width: 760px) {
  .nw-feature { grid-template-columns: 1fr; gap: 20px; padding: 26px 20px 30px; }
  .nw-feature--alt { grid-template-columns: 1fr; }
  .nw-feature--alt .nw-feature-img { order: 1; }
  .nw-feature--alt .nw-feature-body { order: 2; }
  .nw-more { padding: 0 20px 32px; }
  .nw-more-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .nw-more-grid > .nw-scard:nth-child(n) { margin-top: 0; }
  .nw-scard-img img { max-height: 260px; }
}
@media (max-width: 460px) { .nw-more-grid { grid-template-columns: 1fr; } }

/* ===== Share Your Story form ===== */
.nw-form-page { max-width: 620px; margin: 0 auto; padding: 44px 24px 64px; }
.nw-form-kicker { display: block; text-align: center; margin-bottom: 10px; }
.nw-form-h { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; text-align: center; margin: 0 0 16px; color: #2c2c2c; }
.nw-form-lede { font-family: 'Newsreader', Georgia, serif; font-size: 1.18rem; line-height: 1.6; color: #5e574d; text-align: center; margin: 0 auto 34px; max-width: 34rem; }
.nw-form { display: flex; flex-direction: column; gap: 18px; }
.nw-field { display: flex; flex-direction: column; gap: 7px; }
.nw-field span { font-family: var(--font-ui); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive); }
.nw-field input, .nw-field textarea { font-family: 'Newsreader', Georgia, serif; font-size: 1.05rem; color: #2c2c2c; background: #faf9f5; border: 1.5px solid var(--hairline); border-radius: 6px; padding: 12px 14px; width: 100%; transition: border-color 0.2s var(--ease-lux); }
.nw-field input:focus, .nw-field textarea:focus { outline: none; border-color: var(--terracotta); }
.nw-field textarea { resize: vertical; line-height: 1.5; }
.nw-form-btn { align-self: flex-start; font-family: var(--font-ui); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--terracotta); border: none; border-radius: 3px; padding: 15px 30px; cursor: pointer; transition: background 0.25s var(--ease-lux), transform 0.25s var(--ease-lux); }
.nw-form-btn:hover:not(:disabled) { background: var(--terracotta-dk); transform: translateY(-2px); }
.nw-form-btn:disabled { opacity: 0.6; cursor: default; }
.nw-form-msg { font-family: var(--font-ui); font-size: 0.85rem; margin: 0; min-height: 1.2em; }
.nw-form-msg.ok { color: #5c6e4f; font-weight: 600; }
.nw-form-msg.err { color: #b0492f; font-weight: 600; }
.nw-form-fine { font-family: var(--font-ui); font-size: 0.72rem; color: var(--olive); margin: 4px 0 0; }
/* Contact page — big email link */
.nw-contact-email { text-align: center; margin: 6px 0 0; }
.nw-contact-email a { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.05rem, 3vw, 1.5rem); color: var(--terracotta); border-bottom: 2px solid var(--hairline); padding-bottom: 3px; transition: color 0.2s var(--ease-lux), border-color 0.2s var(--ease-lux); }
.nw-contact-email a:hover { color: var(--terracotta-dk); border-color: var(--terracotta); }
.nw-date { font-size: 0.72rem; letter-spacing: 0.04em; color: #8a8278; text-transform: uppercase; }
.nw-lead { max-width: 960px; margin: 0 auto; padding: 0 15px; }
.nw-lead a { display: block; }
.nw-lead img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 5px; margin-bottom: 20px; }
.nw-lead-h { font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.14; margin: 0 0 12px; color: #2c2c2c; }
.nw-lead-d { font-style: italic; font-size: 1.2rem; color: #5e574d; line-height: 1.5; max-width: 62ch; margin: 0; }
.nw-lead .nw-date { display: block; margin-top: 14px; }
.nw-grid { max-width: 960px; margin: 42px auto 0; padding: 42px 15px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 36px; border-top: 1px solid #e3ddd0; }
.nw-card { display: block; }
.nw-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; margin-bottom: 13px; }
.nw-card .nw-date { display: block; margin-bottom: 6px; }
.nw-card-h { font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0 0 7px; color: #2c2c2c; }
.nw-card-d { font-size: 0.96rem; color: #5e574d; line-height: 1.5; margin: 0; }
.nw-rest { max-width: 960px; margin: 46px auto 0; padding: 40px 15px 0; border-top: 1px solid #e3ddd0; }
.nw-restlabel { text-align: center; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #c0825a; margin: 0 0 28px; }
.nw-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.nw-g3 .nw-card-h { font-size: 1.12rem; }
.nw-g3 .nw-card-d { font-size: 0.9rem; }
@media (max-width: 680px) {
  .nw-page { margin: 18px 12px; border-radius: 8px; padding: 30px 0; }
  .nw-sticker { display: none; }
  .nw-hero-block { padding: 40px 18px 36px; }
  .nw-hero-h { font-size: 15vw; }
  .nw-cta-strip { padding: 9px 16px; }
  .nw-mast { padding: 34px 18px 24px; }
  .nw-mast-h { font-size: clamp(2.4rem, 13vw, 3.4rem); }
  .nw-nav { flex-wrap: wrap; gap: 9px 16px; padding: 13px 16px; }
  .nw-lead { padding: 0 20px; }
  .nw-grid { grid-template-columns: 1fr; gap: 32px; padding: 34px 20px 0; }
  .nw-rest { padding: 34px 20px 0; }
  .nw-g3 { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .nw-hd-in { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; padding: 13px 16px; }
  .nw-ham { display: flex; flex-direction: column; gap: 5px; cursor: pointer; grid-column: 1; justify-self: start; }
  .nw-ham span { display: block; width: 22px; height: 2px; background: #c0825a; }
  .nw-wm { grid-column: 2; justify-self: center; font-size: 1.2rem; }
  .nw-navmenu { grid-column: 1 / -1; position: absolute; top: 100%; left: 0; right: 0; background: #faf9f5; border-bottom: 1px solid #e3ddd0; flex-direction: column; display: none; padding: 4px 0; z-index: 5; }
  .nw-navmenu a { margin: 0; padding: 13px 20px; font-size: 0.78rem; }
  .nw-nvt:checked ~ .nw-navmenu { display: flex; }
}

/* ---- Article (click-in) page ---- */
body.records { background: #ece5d8; }
.nw-article, .nw-t, .nw-dek, .nw-byline, .nw-metasub, .nw-crumb, .nw-cap,
.nw-body, .nw-cta, .nw-rel-title, .nw-back { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
.nw-article { max-width: 840px; margin: 34px auto; background: #faf9f5; border: 1px solid #e3ddd0; border-radius: 10px; box-shadow: 0 18px 50px -30px rgba(40,34,24,.5); padding: 44px 0 8px; overflow: hidden; color: #2c2c2c; line-height: 1.7; }
.nw-col { max-width: 660px; margin: 0 auto; padding: 0 30px; }
.nw-crumb { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8278; margin-bottom: 20px; }
.nw-crumb a { color: #8a8278; }
.nw-t { font-weight: 600; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.14; letter-spacing: -0.01em; color: #2c2c2c; margin-bottom: 18px; }
.nw-dek { font-style: italic; font-size: 1.24rem; color: #5e574d; line-height: 1.5; margin-bottom: 18px; }
.nw-byline { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2c2c2c; }
.nw-metasub { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8278; margin-top: 5px; padding-bottom: 8px; }
.nw-hero { margin: 26px 0 8px; }
.nw-hero-frame { display: block; aspect-ratio: 16/9; overflow: hidden; background: #e3ddd0; }
.nw-hero-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Natural hero — no 16:9 crop; the full photograph, centered. Portraits are
   width-capped so a tall image doesn't swallow the first screen. */
.nw-hero--natural { text-align: center; }
.nw-hero--natural img { display: block; width: auto; max-width: 100%; max-height: 78vh; height: auto; margin: 0 auto; }
.nw-cap { font-style: italic; font-size: 0.82rem; color: #5e574d; margin: 9px auto 0; max-width: 660px; padding: 0 30px; }
.nw-cap--center { text-align: center; }
.nw-body { font-size: 1.08rem; line-height: 1.78; color: #2c2c2c; padding-top: 30px; }
.nw-body p { margin-bottom: 18px; }
.nw-body > p:first-of-type::first-letter { float: left; font-weight: 600; font-size: 4rem; line-height: 0.82; margin: 0.08em 0.1em 0 0; color: #c0825a; }
.nw-body h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: #c0825a; margin: 36px 0 14px; }
.nw-body em { font-style: italic; }
.nw-body strong { font-weight: 700; }
.nw-body a { color: #c0825a; border-bottom: 1px solid #d8b48f; }
.nw-body blockquote { margin: 42px 0; text-align: center; font-style: italic; font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.38; color: #c0825a; }
.nw-body blockquote p { margin: 0; }
.nw-body hr { border: none; margin: 34px 0; text-align: center; }
.nw-body hr::after { content: "\2735"; color: var(--terracotta); font-size: 0.85rem; }
.nw-figure { margin: 34px 0; }
.nw-figure img { display: block; width: 100%; border-radius: 4px; }
.nw-figure figcaption { font-style: italic; font-size: 0.82rem; color: #5e574d; margin-top: 9px; }
/* Vipassana essay elements: schedules, song list, appendix, coaching pitch */
.nw-body .vp-sched { margin: 6px 0 26px; font-size: 1rem; line-height: 1.9; list-style: none; padding: 18px 22px; background: #f3ece1; border-left: 2px solid #d8b48f; border-radius: 0 5px 5px 0; }
.nw-body .vp-sched li { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; }
.nw-body .vp-sched .vp-t { font-weight: 600; color: #c0825a; font-variant-numeric: tabular-nums; }
.nw-body .vp-sched--times { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.nw-body .vp-sched--times li { display: block; font-weight: 600; color: #c0825a; font-variant-numeric: tabular-nums; }
.nw-body .vp-songs { margin: 8px 0 26px; padding: 0 0 0 22px; border-left: 2px solid #e3ddd0; list-style: none; font-style: italic; font-size: 1.06rem; line-height: 1.85; color: #5e574d; }
.nw-body .vp-appendix { margin: 10px 0 0; }
.nw-body .vp-appendix h2 { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8278; margin: 0 0 16px; padding-top: 26px; border-top: 1px solid #e3ddd0; }
.nw-body .vp-appendix p { font-size: 0.98rem; line-height: 1.72; color: #5e574d; margin-bottom: 14px; }
.nw-body .post-pitch { margin: 20px 0 0; padding-top: 26px; border-top: 1px solid #e3ddd0; font-size: 1.06rem; line-height: 1.7; color: #5e574d; }
.nw-body .post-pitch p { margin: 0; }
@media (max-width: 680px) {
  .nw-body .vp-sched { padding: 16px 18px; font-size: 0.96rem; }
  .nw-body .vp-sched li { grid-template-columns: 6em 1fr; }
  .nw-body .vp-sched--times { grid-template-columns: 1fr; }
  .nw-body .vp-songs { padding-left: 18px; font-size: 1rem; }
}
/* Portrait/tall images shouldn't fill the column — cap and center them. */
.nw-figure.nw-portrait img { max-width: 440px; margin-left: auto; margin-right: auto; }
.nw-figure.nw-portrait figcaption { max-width: 440px; margin-left: auto; margin-right: auto; text-align: center; }
.nw-cta { margin: 18px 30px 8px; background: #f3ece1; border: 1px solid #e3ddd0; border-left: 2px solid #c0825a; border-radius: 0 6px 6px 0; padding: 28px 30px; text-align: center; }
.nw-cta p { font-size: 1.06rem; color: #5e574d; line-height: 1.55; margin-bottom: 18px; }
.nw-cta-btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.nw-cta-b { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: #c0825a; color: #fff; padding: 13px 26px; border-radius: 3px; }
.nw-cta-b2 { font-size: 0.82rem; font-weight: 600; color: #c0825a; text-decoration: underline; text-underline-offset: 3px; }
.nw-rel { max-width: 840px; margin: 30px auto 0; padding: 0 30px; }
.nw-rel-title { font-style: italic; font-weight: 500; font-size: 1.5rem; color: #c0825a; margin-bottom: 20px; }
.nw-rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.nw-rel .nw-card img { aspect-ratio: 4/3; margin-bottom: 12px; }
.nw-rel .nw-card .nw-date { display: block; margin-bottom: 4px; }
.nw-back { max-width: 840px; margin: 26px auto 0; padding: 0 30px 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8278; }
.nw-back a { color: #8a8278; }
@media (max-width: 680px) {
  .nw-article { margin: 16px 12px; border-radius: 8px; padding: 32px 0 8px; }
  .nw-col { padding: 0 22px; }
  .nw-t { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .nw-cap, .nw-rel, .nw-back { padding-left: 22px; padding-right: 22px; }
  .nw-rel-grid { grid-template-columns: 1fr; gap: 26px; }
  .nw-cta { margin: 18px 16px 8px; padding: 24px 20px; }
}


/* ===== Interview posts (Inner Views) ===== */
.iv-note {
  margin: 0 0 26px; padding: 18px 22px;
  background: #f3ece1; border-left: 2px solid var(--terracotta); border-radius: 0 5px 5px 0;
  font-family: 'Newsreader', Georgia, serif; font-size: 0.98rem; line-height: 1.65; color: #5e574d;
}
.iv-note p { margin: 0; }
.iv-note strong { color: #2c2c2c; }
.nw-body .iv-q, .nw-body .iv-a { margin-bottom: 20px; }
.iv-who {
  font-family: var(--font-ui);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
.iv-q .iv-who { color: var(--terracotta); }
.iv-a .iv-who { color: var(--olive); }
.nw-body .iv-q { font-weight: 500; }
.nw-body .iv-a { color: #3a3630; }
@media (max-width: 680px) { .iv-note { padding: 16px 18px; font-size: 0.95rem; } }


/* Eyebrow logo: the masthead wordmark at eyebrow scale. The stretch and the
   asterisk-dot are em-based, so they scale down with the font size. The
   aria-label on the parent link carries the real text for screen readers,
   since the mark itself is decorative once shrunk. */
.nw-crumb-logo {
  display: inline-block;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--olive);
  text-transform: none;
}
/* The masthead's scaleX(2.2) overflows roughly 0.3em each side without
   affecting layout, which collapses the letters at eyebrow size. Dialled back
   to 1.8 with matching margins so the mark stays legible when small. */
.nw-crumb-logo { --qast-mask: #fdfbf6; }
.nw-crumb-logo .nw-stretch { transform: scaleX(1.8); margin: 0 0.28em; }


/* ===== Home: Featured + Trending pair, then smaller squares ===== */
.nw-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 34px 44px 6px; border-top: 1px solid var(--hairline); }
.nw-bigcard { display: block; }
.nw-bigcard-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--cream-edge); margin-bottom: 14px; }
.nw-bigcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease-lux); }
.nw-bigcard:hover .nw-bigcard-img img { transform: scale(1.04); }
.nw-bigcard-h { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 1.55rem; line-height: 1.12; margin: 6px 0 8px; color: var(--charcoal); transition: color .2s var(--ease-lux); }
.nw-bigcard:hover .nw-bigcard-h { color: var(--terracotta); }
.nw-bigcard-d { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.02rem; line-height: 1.45; color: #5e574d; margin: 0 0 10px; }
.nw-bigcard-meta { display: block; font-family: var(--font-ui); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive); }

/* More Stories: small square thumbnails, four across. */
.nw-more-grid { grid-template-columns: repeat(4, 1fr); gap: 26px 20px; align-items: start; }
.nw-scard-img { display: block; overflow: hidden; border-radius: 5px; background: transparent; margin-bottom: 11px; }
.nw-scard-img img { width: 100%; height: auto; object-fit: unset; aspect-ratio: auto; max-height: none; display: block; }
.nw-more-grid > .nw-scard:nth-child(n) { margin-top: 0; }
.nw-scard-h { font-size: 1.02rem; }

@media (max-width: 860px) { .nw-duo { grid-template-columns: 1fr; gap: 26px; padding: 28px 20px 4px; }
  .nw-more-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .nw-more-grid { grid-template-columns: 1fr 1fr; } }


/* ===== Mobile pass (2026-08): full-bleed page, hamburger header, uniform cards ===== */
@media (max-width: 680px) {
  /* M-2: one-row header — name left, ✳ menu right; email strip folds into the menu */
  .nw-cta-strip { display: none; }
  .nw-navbar { position: relative; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--hairline); }
  .nw-mnbtn { display: flex; align-items: center; cursor: pointer; padding: 4px; }
  .nw-mnbtn svg { transition: transform 0.35s var(--ease-lux); }
  .nw-mn:checked ~ .nw-mnbtn svg { transform: rotate(90deg); }
  .nw-nav2 { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: var(--cream); border-bottom: 3px solid #2b2926; box-shadow: 0 18px 30px -18px rgba(40,34,24,.35);
    flex-direction: column; align-items: center; gap: 9px; padding: 16px 20px 20px; }
  .nw-mn:checked ~ .nw-nav2 { display: flex; }
  .nw-nav2 a { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.2rem; letter-spacing: 0; text-transform: none; }
  .nw-nav2 i { display: none; }
  .nw-nav2 a.nw-cta-pill--menu { display: inline-block; background: #2b2926; color: var(--cream); font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px; }
  .nw-nav2 a.nw-cta-pill--menu:hover { background: var(--terracotta); color: #fff; }

  /* M-1: kill the narrow container — full-bleed card, tighter side padding */
  .nw-page { margin: 0; border-radius: 0; border-left: none; border-right: none; box-shadow: none; padding: 22px 0 26px; }
  .nw-feature { padding: 22px 16px 28px; }
  .nw-duo { padding: 24px 16px 4px; gap: 30px; }
  .nw-more { padding: 0 16px 30px; }

  /* M-3: tagline a touch bigger */
  .nw-hero-dek { font-size: 1.3rem; }

  /* M-4: every non-latest story shares one card template —
     same 3:2 image, date, title, byline; no kicker/dek on the duo cards */
  .nw-more-grid { grid-template-columns: 1fr; gap: 30px; }
  .nw-bigcard .nw-kicker, .nw-bigcard-d { display: none; }
  .nw-bigcard-img, .nw-scard-img { aspect-ratio: 3 / 2; border-radius: 6px; margin-bottom: 12px; }
  .nw-scard-img img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
  .nw-bigcard-h, .nw-scard-h { font-size: 1.34rem; line-height: 1.14; margin: 4px 0 7px; }
  .nw-bigcard-meta, .nw-scard-date { margin-bottom: 3px; }
}


/* ===== Mobile "Vogue" pass: no containers, edge-to-edge images, natural ratios ===== */
@media (max-width: 680px) {
  body.records { background: #fdfbf6; }
  .nw-hero-block { border-bottom: 3px solid #2b2926; }
  .nw-page { background: transparent; border: none; box-shadow: none; margin: 0; padding: 6px 0 18px; }
  .nw-article { margin: 0; border: none; border-radius: 0; box-shadow: none; }

  /* images escape the text gutter and run edge to edge, uncropped */
  .nw-feature-img, .nw-bigcard-img, .nw-scard-img {
    margin-left: -16px; margin-right: -16px; border-radius: 0;
    aspect-ratio: auto; background: transparent;
  }
  .nw-feature-img img, .nw-bigcard-img img, .nw-scard-img img {
    width: 100%; height: auto; object-fit: unset; aspect-ratio: auto; max-height: none;
  }
  .nw-bigcard-img, .nw-scard-img { margin-bottom: 13px; }

  /* article hero edge to edge as well */
  .nw-hero { margin-top: 18px; }
  .nw-hero--natural img { max-height: none; width: 100%; }
}


/* ===== Mobile Vogue pass 2: sticky mini-masthead + compact story rows ===== */
.nw-stickybar { display: none; }
@media (max-width: 680px) {
  .nw-stickybar { display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: var(--cream); border-bottom: 2px solid #2b2926; padding: 9px 16px;
    transform: translateY(-102%); transition: transform 0.3s var(--ease-lux); }
  .nw-scrolled .nw-stickybar { transform: none; }
  .nw-stickybar-logo { font-family: 'Newsreader', Georgia, serif; font-weight: 600;
    font-size: 1.3rem; line-height: 1; color: var(--charcoal); letter-spacing: -0.01em; }
  .nw-mnbtn--sticky { display: flex; align-items: center; cursor: pointer; padding: 3px; }
  /* menu opened while scrolled: pin the panel below the sticky bar */
  .nw-scrolled .nw-mn:checked ~ .nw-nav2 { position: fixed; top: 47px; left: 0; right: 0; }

  /* After the first three stories: compact Vogue rows — small thumb left, text right */
  .nw-more-grid { gap: 20px; }
  .nw-scard { display: grid; grid-template-columns: 104px 1fr; column-gap: 14px; align-content: center; }
  .nw-scard-img { grid-row: 1 / span 3; margin: 0; width: 104px; height: 104px;
    aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; }
  .nw-scard-img img { width: 100%; height: 100%; object-fit: cover; }
  .nw-scard-h { font-size: 1.04rem; line-height: 1.18; margin: 0 0 5px; }
  .nw-scard-date { font-size: 0.56rem; margin-bottom: 4px; }
  .nw-by--card { font-size: 0.56rem; margin-bottom: 0; }
}


/* ===== Sticky mini-masthead on desktop too ===== */
.nw-stickybar { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--cream); border-bottom: 2px solid #2b2926; padding: 10px 28px;
  transform: translateY(-102%); transition: transform 0.3s var(--ease-lux); }
.nw-scrolled .nw-stickybar { transform: none; }
.nw-stickybar-logo { font-family: 'Newsreader', Georgia, serif; font-weight: 600;
  font-size: 1.35rem; line-height: 1; color: var(--charcoal); letter-spacing: -0.01em; }
.nw-stickybar-links { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.nw-stickybar-links a { font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); transition: color 0.2s var(--ease-lux); }
.nw-stickybar-links a:hover { color: var(--terracotta); }
.nw-stickybar-links i { color: var(--terracotta); font-style: normal; font-size: 0.58rem; }
.nw-mnbtn--sticky { display: none; }
@media (max-width: 680px) {
  .nw-stickybar { padding: 9px 16px; }
  .nw-stickybar-links { display: none; }
  .nw-mnbtn--sticky { display: flex; align-items: center; cursor: pointer; padding: 3px; }
}


/* ===== Authorship: visible byline, linked to the coaching site ===== */
.nw-hero-by { margin-top: 14px; }
.nw-hero-by a { font-family: var(--font-ui); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal);
  padding-bottom: 2px; border-bottom: 1px solid var(--terracotta);
  transition: color 0.25s var(--ease-lux); }
.nw-hero-by a:hover { color: var(--terracotta); }
.nw-stickybar { justify-content: flex-start; }
.nw-stickybar-by { font-family: var(--font-ui); font-weight: 600; font-size: 0.6rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--olive);
  transition: color 0.2s var(--ease-lux); }
.nw-stickybar-by:hover { color: var(--terracotta); }
.nw-stickybar-links { margin-left: auto; }
.nw-byline-a { border-bottom: 1px solid var(--hairline); transition: color 0.2s var(--ease-lux), border-color 0.2s var(--ease-lux); }
.nw-byline-a:hover { color: var(--terracotta); border-color: var(--terracotta); }
@media (max-width: 680px) {
  .nw-mnbtn--sticky { margin-left: auto; }
  .nw-stickybar-by { display: none; }
  /* restore the deks on the big stories (feature keeps its own; these are featured/trending) */
  .nw-bigcard-d { display: block; }
}