/*!
Theme Name: Nice Packaging
Theme URI: https://getnicepackaging.com
Author: Julie Fredrickson
Author URI: https://getnicepackaging.com
Description: Custom editorial theme for Nice Packaging — cosmetics-counter quarterly aesthetic with cream parchment ground, oxblood accent, EB Garamond italic display, and Newsreader body.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.2
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: nice-packaging
Tags: editorial, magazine, custom-colors, custom-menu, featured-images
*/

/* ============================================================
   NICE PACKAGING — design system

   "Cosmetics Counter Quarterly"
   - Cream parchment ground, warm carbon ink, oxblood accent
   - EB Garamond italic for display, Newsreader for body
   - JetBrains Mono for marginalia / dates / metadata

   Note: this stylesheet doubles as the WP theme.css (header above)
   AND the active design system. functions.php enqueues it as the
   primary stylesheet.
   ============================================================ */

:root {
  /* ----- palette ----- */
  --cream-50:  #FAF4EA;
  --cream-100: #F4ECDD;
  --cream-200: #ECE2D0;
  --cream-300: #DACDB4;
  --ink-900:   #1B1612;
  --ink-700:   #443D33;
  --ink-500:   #6B6052;
  --ink-300:   #A89B89;

  --oxblood-700: #5C1A14;
  --oxblood-500: #7E2D24;
  --oxblood-300: #B05C50;
  --brass-500:   #A47A3D;
  --brass-300:   #C7A26B;

  /* ----- typography ----- */
  --serif-display: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --serif-body:    'Newsreader', 'EB Garamond', Georgia, serif;
  --mono:          'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 18px;
  --text-md:   20px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  46px;
  --text-4xl:  58px;
  --text-5xl:  74px;
  --text-6xl:  96px;
  --text-7xl:  128px;

  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-display: 0.95;
  --leading-body:    1.6;
  --leading-meta:    1.4;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --page-max:   1280px;
  --prose-max:  680px;
  --gutter:     clamp(20px, 4vw, 48px);

  --ease-out:   cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   reset + base
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink-900);
  font-family: var(--serif-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
a:hover { color: var(--oxblood-500); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--oxblood-500); color: var(--cream-50); }

/* WP admin bar adjustment */
body.admin-bar .seal { bottom: 64px; }

/* skip-link accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: var(--cream-50);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ============================================================
   utilities
   ============================================================ */

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-700);
  line-height: var(--leading-meta);
}
.label--accent { color: var(--oxblood-500); }
.label--muted  { color: var(--ink-500); }

/* ============================================================
   wax seal
   ============================================================ */

.seal {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--oxblood-500) 0%, var(--oxblood-700) 70%);
  color: var(--cream-50);
  text-align: center;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.18),
    inset 2px 3px 6px rgba(255,255,255,.16),
    inset -3px -4px 8px rgba(0,0,0,.22),
    0 8px 18px -8px rgba(94, 26, 20, .55);
  transition: transform .8s var(--ease-out);
  text-decoration: none;
  border: 0;
}
.seal:hover { transform: rotate(-9deg); color: var(--cream-50); }
.seal__no   { display: block; font-size: 9px; letter-spacing: 0.18em; opacity: .82; font-style: normal; font-variant: small-caps; line-height: 1; margin-bottom: 1px; }
.seal__num  { display: block; font-size: 22px; }

/* ============================================================
   masthead
   ============================================================ */

.masthead {
  border-top: 4px solid var(--ink-900);
  border-bottom: 1px solid var(--ink-900);
  padding: 14px var(--gutter);
  background: var(--cream-100);
  position: relative;
  z-index: 5;
}

.masthead__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

.masthead__brand {
  font-family: var(--serif-body);
  font-variant: small-caps;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.36em;
  text-transform: lowercase;
  color: var(--ink-900);
  border-bottom: 0;
  justify-self: start;
}
.masthead__brand:hover { color: var(--ink-900); }

.masthead__nav {
  display: flex;
  gap: var(--space-5);
  justify-self: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.masthead__nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 0;
  color: var(--ink-700);
}
.masthead__nav a:hover { color: var(--oxblood-500); }
.masthead__nav .menu-item { display: inline-block; }

.masthead__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  text-align: right;
  justify-self: end;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .masthead__inner { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .masthead__nav {
    grid-column: 1 / -1;
    order: 3;
    justify-self: stretch;
    justify-content: space-between;
    padding-top: var(--space-3);
    border-top: 1px solid var(--cream-300);
    overflow-x: auto;
  }
  .masthead__meta { font-size: 9px; }
}

/* ============================================================
   page container + reveal
   ============================================================ */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.reveal { opacity: 0; transform: translateY(8px); animation: reveal .9s var(--ease-out) forwards; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .18s; }
.reveal-3 { animation-delay: .32s; }
.reveal-4 { animation-delay: .46s; }
.reveal-5 { animation-delay: .60s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ============================================================
   cover (homepage hero)
   ============================================================ */

.cover {
  padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px);
  text-align: center;
  border-bottom: 1px solid var(--cream-300);
  position: relative;
}

.cover__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 10vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.014em;
  margin: 0;
  color: var(--ink-900);
  padding-bottom: 0.06em;
}
.cover__title .stop { color: var(--oxblood-500); display: inline-block; transform: translateY(-0.04em); }

.cover__tag {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-700);
  margin: var(--space-4) auto 0;
  max-width: 540px;
  line-height: 1.45;
}

.cover__rule { width: 48px; height: 1px; background: var(--oxblood-500); margin: var(--space-5) auto 0; }

.cover__byline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: var(--space-3);
}
.cover__byline em {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--ink-700);
}

/* ============================================================
   featured / lead article
   ============================================================ */

.lead {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(48px, 7vw, 88px) 0;
  border-bottom: 1px solid var(--cream-300);
}
.lead__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream-200);
  overflow: hidden;
  border-bottom: 0;
  display: block;
}
.lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
  filter: saturate(0.96);
}
.lead:hover .lead__media img { transform: scale(1.025); }

.lead__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood-500);
}
.lead__kicker::after { content: ""; flex: 1; height: 1px; background: var(--cream-300); }

.lead__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
  max-width: 14ch;
}
.lead__title a { border-bottom: 0; }
.lead__title a:hover { color: var(--oxblood-700); }

.lead__dek {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.42;
  color: var(--ink-700);
  margin: 0 0 var(--space-5);
  max-width: 38ch;
}

.lead__byline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--space-4);
}
.lead__byline em {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-700);
}

@media (max-width: 880px) {
  .lead { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-7) 0; }
  .lead__media { order: 2; aspect-ratio: 3 / 2; }
  .lead__copy  { order: 1; }
}

/* ============================================================
   section heading
   ============================================================ */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(48px, 6vw, 72px) 0 clamp(24px, 3vw, 32px);
  border-bottom: 1px solid var(--cream-300);
}

.section-head h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}
.section-head__count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ============================================================
   issue grid
   ============================================================ */

.issues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: clamp(20px, 3vw, 28px) 0 clamp(48px, 6vw, 80px);
}

.issue {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.5vw, 32px);
  border-bottom: 1px solid var(--cream-300);
  position: relative;
  transition: background .35s var(--ease-out);
  min-width: 0;
}
.issue:not(:nth-child(3n)) { border-right: 1px solid var(--cream-300); }
.issue:hover { background: var(--cream-50); }

.issue__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream-200);
  overflow: hidden;
  margin-bottom: var(--space-4);
  border-bottom: 0;
  display: block;
}
.issue__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out), filter .35s var(--ease-out);
  filter: saturate(0.92);
}
.issue:hover .issue__media img { transform: scale(1.04); filter: saturate(1); }

.issue__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood-500);
  margin-bottom: var(--space-3);
}
.issue__kicker .pipe { color: var(--ink-300); }
.issue__kicker time  { color: var(--ink-500); }

.issue__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
}
.issue__title a { border-bottom: 0; }
.issue__title a:hover { color: var(--oxblood-700); }

.issue__dek {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-700);
  margin: 0 0 var(--space-3);
  flex: 1;
}

.issue__meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
}
.issue__meta .members-only { color: var(--oxblood-500); }
.issue__meta .free         { color: var(--ink-700); }

@media (max-width: 980px) {
  .issues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .issue:not(:nth-child(3n))  { border-right: 0; }
  .issue:not(:nth-child(2n))  { border-right: 1px solid var(--cream-300); }
}

@media (max-width: 600px) {
  .issues { grid-template-columns: 1fr; }
  .issue, .issue:not(:nth-child(2n)) { border-right: 0; }
}

/* ============================================================
   footer
   ============================================================ */

.footer {
  background: var(--cream-200);
  padding: clamp(56px, 7vw, 96px) 0 var(--space-6);
  border-top: 4px double var(--ink-900);
  margin-top: var(--space-7);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(40px, 5vw, 56px);
  border-bottom: 1px solid var(--cream-300);
}

.footer__brand {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.014em;
  margin: 0 0 var(--space-3);
  color: var(--ink-900);
  padding-bottom: 0.04em;
}
.footer__brand .stop { color: var(--oxblood-500); }

.footer__about {
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 38ch;
  margin: 0 0 var(--space-4);
}

.footer__col h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--space-3);
  font-weight: 500;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: var(--space-2); }
.footer__col a {
  font-family: var(--serif-body);
  font-size: 16px;
  border-bottom: 0;
  color: var(--ink-900);
}
.footer__col a:hover { color: var(--oxblood-500); }

.footer__bottom {
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}

@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ============================================================
   buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  font-family: var(--serif-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--oxblood-500);
  color: var(--cream-50);
  border: 1px solid var(--oxblood-700);
  border-radius: 0;
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
  text-decoration: none;
}
.btn:hover { background: var(--oxblood-700); color: var(--cream-50); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-900);
}
.btn--ghost:hover { background: var(--ink-900); color: var(--cream-50); }

.btn--small { padding: 9px 16px; font-size: 13px; }

/* ============================================================
   single article
   ============================================================ */

.article {
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 80px);
}

.article__header {
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--cream-300);
}

.article__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood-500);
  margin-bottom: var(--space-4);
}
.article__kicker .pipe { color: var(--ink-300); }
.article__kicker time  { color: var(--ink-500); }
.article__kicker a { border-bottom: 0; color: inherit; }
.article__kicker a:hover { color: var(--oxblood-700); }

.article__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 4.9vw, 66px);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--ink-900);
  margin: 0 0 var(--space-4);
  max-width: 20ch;
  padding-bottom: 0.06em;
}

.article__dek {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--ink-700);
  margin: 0 0 var(--space-5);
  max-width: 50ch;
}

.article__byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.article__byline em {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-900);
}
.article__byline .pipe { color: var(--ink-300); }

.article__hero {
  margin: clamp(28px, 4vw, 44px) auto;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: var(--cream-200);
  overflow: hidden;
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; }

.article__body {
  max-width: var(--prose-max);
  margin: 0 auto;
  padding-top: clamp(24px, 3vw, 36px);
  position: relative;
}

.article__body p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  margin: 0 0 1.2em;
  color: var(--ink-900);
}

.article__body > p:first-of-type::first-letter,
.article__body > p.has-drop-cap::first-letter {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 5.4em;
  line-height: 0.85;
  float: left;
  margin: 0.06em 0.24em -0.04em -0.04em;
  color: var(--oxblood-500);
}

.article__body h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 1.8em 0 0.55em;
  color: var(--ink-900);
}

.article__body h3 {
  font-family: var(--serif-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.005em;
  margin: 1.6em 0 0.5em;
  color: var(--ink-900);
}

.article__body blockquote {
  margin: 2em 0;
  padding-left: 0.6em;
  border: 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.28;
  color: var(--ink-700);
  position: relative;
}
.article__body blockquote::before {
  content: "“";
  font-family: var(--serif-display);
  color: var(--oxblood-500);
  position: absolute;
  left: -0.5em;
  top: -0.05em;
  font-size: 1.3em;
  line-height: 1;
}
.article__body blockquote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 14px;
}

.article__body figure { margin: 2em 0; }
.article__body figure figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: var(--space-3);
  line-height: 1.5;
}

.article__body img {
  margin: 1.4em 0;
  background: var(--cream-200);
}

.article__body .image-link-expand,
.article__body .restack-image,
.article__body .view-image {
  display: none !important;
}

/* ensure WP align classes don't break the column */
.article__body .alignleft  { float: none; margin-inline: auto; }
.article__body .alignright { float: none; margin-inline: auto; }
.article__body .aligncenter { margin-inline: auto; }

.margin-note {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700);
  border-left: 1px solid var(--oxblood-500);
  padding: 4px 0 4px var(--space-3);
  margin: 1em 0;
}
.margin-note .label { display: block; margin-bottom: var(--space-2); }

@media (min-width: 1100px) {
  .margin-note {
    float: right;
    clear: right;
    width: 220px;
    margin-right: -260px;
    margin-top: 0.4em;
    margin-bottom: 1.2em;
  }
}

.product-callout {
  border-top: 1px solid var(--oxblood-500);
  border-left: 0;
  padding: 12px 0 0;
  font-family: var(--serif-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-700);
  margin: 1em 0;
}
.product-callout__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood-500);
  display: block;
  margin-bottom: var(--space-2);
}
.product-callout__brand {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-900);
  display: block;
}
.product-callout__name { display: block; margin-bottom: var(--space-2); }
.product-callout__buy {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood-500);
  border-bottom: 1px solid var(--oxblood-300);
}

@media (min-width: 1100px) {
  .product-callout {
    float: right;
    clear: right;
    width: 220px;
    margin-right: -260px;
    margin-top: 0.4em;
    margin-bottom: 1.2em;
  }
}

/* ============================================================
   paywall — PMP "Members Only" rendering
   PMP wraps the gated message in .pmpro_content_message
   ============================================================ */

.paywall, .pmpro_content_message {
  margin: var(--space-6) auto;
  max-width: 660px;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px);
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  position: relative;
  text-align: center;
}
.paywall::before, .pmpro_content_message::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 1px;
  background: var(--oxblood-500);
}

.paywall__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oxblood-500);
  margin: 0 0 var(--space-4);
}

.paywall__title, .pmpro_content_message h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-3);
  color: var(--ink-900);
}

.paywall__lede, .pmpro_content_message p {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-700);
  max-width: 44ch;
  margin: 0 auto var(--space-5);
}

.paywall__tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  max-width: 420px;
  margin: var(--space-5) auto 0;
}

.paywall__signin {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: var(--space-4) 0 0;
}
.paywall__signin a { border-bottom-color: var(--ink-300); color: var(--ink-700); }

.paywall__founding {
  margin-top: var(--space-5);
  padding: 16px 20px;
  background: var(--ink-900);
  color: var(--cream-100);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}
.paywall__founding strong {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  display: block;
  margin-bottom: 2px;
}
.paywall__founding span {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--cream-200);
  display: block;
}
.paywall__founding .btn { background: var(--brass-500); border-color: var(--brass-300); color: var(--ink-900); }
.paywall__founding .btn:hover { background: var(--brass-300); color: var(--ink-900); }

@media (max-width: 640px) {
  .paywall__tiers { grid-template-columns: 1fr; }
  .paywall__founding { grid-template-columns: 1fr; text-align: center; }
}

/* ============================================================
   callout — in-flow subscribe pitch (replaces Substack widgets)

   Frames itself as a "pause from the editor" with: a brand
   wordmark above the pitch, top + bottom oxblood rules acting as
   a magazine pull-frame, soft cream-200 ground that's distinct
   from the page without going dark, italic display pitch text
   centered like a print pull-quote, and a two-action footer.
   ============================================================ */

.callout {
  margin: 2.2em auto;
  padding: clamp(20px, 2.6vw, 28px) clamp(24px, 4vw, 48px);
  background: var(--cream-200);
  border-top: 3px solid var(--oxblood-500);
  border-bottom: 1px solid var(--oxblood-300);
  position: relative;
  max-width: var(--prose-max);
  text-align: center;
  color: var(--ink-900);
}

.callout__pitch {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.005em;
  padding-bottom: 0.06em;
}

.callout__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.callout__actions .btn {
  background: var(--oxblood-500);
  color: var(--cream-50);
  border-color: var(--oxblood-700);
  padding: 11px 22px;
  font-size: 14px;
}

.callout__alt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-300);
}
.callout__alt:hover { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

@media (max-width: 520px) {
  .callout__actions { flex-direction: column; gap: var(--space-3); }
}

/* ============================================================
   subscribe page — 4-tier comparison
   ============================================================ */

.subscribe__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
}
.subscribe__intro .label {
  display: inline-block;
  margin-bottom: var(--space-4);
}
.subscribe__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin: 0 0 var(--space-4);
  padding-bottom: 0.06em;
}
.subscribe__lede {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-700);
  margin: 0 auto;
  max-width: 50ch;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--cream-300);
  border-bottom: 1px solid var(--cream-300);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.tier {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
  position: relative;
  background: var(--cream-100);
  transition: background .3s var(--ease-out);
  min-width: 0;
}
.tier:not(:last-child) { border-right: 1px solid var(--cream-300); }
.tier:hover { background: var(--cream-50); }

.tier--featured {
  background: var(--cream-200);
  position: relative;
}
.tier--featured:hover { background: var(--cream-200); }

.tier__flag {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--oxblood-500);
  color: var(--cream-50);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  text-align: center;
}
.tier--featured .tier__header { padding-top: var(--space-5); }

.tier__header {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--cream-300);
  margin-bottom: var(--space-4);
}

.tier__name {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
  padding-bottom: 0.04em;
}

.tier__price {
  margin: 0 0 var(--space-2);
  font-family: var(--serif-body);
  color: var(--ink-900);
}
.tier__price-amount {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.tier__price-period {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-left: var(--space-1);
}

.tier__pitch {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-500);
  margin: 0;
}

.tier__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  flex: 1;
}
.tier__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--serif-body);
  font-size: 14.5px;
  line-height: 1.45;
  margin-bottom: var(--space-3);
  color: var(--ink-900);
}
.tier__feature-mark {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--serif-display);
  font-size: 14px;
  margin-top: 2px;
  font-weight: 600;
}
.tier__feature.is-included {
  color: var(--ink-900);
}
.tier__feature.is-included .tier__feature-mark {
  background: var(--oxblood-500);
  color: var(--cream-50);
  font-size: 18px;
  line-height: 1;
}
.tier__feature.is-excluded {
  color: var(--ink-300);
}
.tier__feature.is-excluded .tier__feature-mark {
  color: var(--ink-300);
  background: transparent;
  font-size: 14px;
}

.tier__feature--divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood-500);
  margin: var(--space-3) 0;
}
.tier__feature--divider::before,
.tier__feature--divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--oxblood-300);
}

.tier__feature--exclusive {
  font-weight: 500;
  color: var(--oxblood-700);
}
.tier__feature--exclusive .tier__feature-mark {
  background: transparent;
  color: var(--oxblood-500);
  font-family: var(--serif-display);
  font-size: 14px;
  font-weight: 600;
}

.tier__cta {
  width: 100%;
  justify-content: center;
}

.subscribe__signin {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding-bottom: var(--space-7);
  margin: 0;
}
.subscribe__signin a {
  color: var(--ink-700);
  border-bottom-color: var(--ink-300);
  margin-left: var(--space-2);
}
.subscribe__signin a:hover { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

@media (max-width: 1080px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier:not(:last-child) { border-right: 0; }
  .tier:nth-child(odd) { border-right: 1px solid var(--cream-300); }
  .tier:nth-child(-n+2) { border-bottom: 1px solid var(--cream-300); }
}
@media (max-width: 600px) {
  .tiers { grid-template-columns: 1fr; }
  .tier, .tier:nth-child(odd) { border-right: 0; }
  .tier:not(:last-child) { border-bottom: 1px solid var(--cream-300); }
}

/* ============================================================
   auth — /join, /signin, /check-email
   single-column, generous whitespace, one input forward
   ============================================================ */

.auth {
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 32px) clamp(64px, 8vw, 120px);
  text-align: center;
}

.auth__intro {
  margin-bottom: var(--space-6);
}
.auth__intro .label {
  display: inline-block;
  margin-bottom: var(--space-3);
}
.auth__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin: 0 0 var(--space-4);
  padding-bottom: 0.06em;
}
.auth__lede {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--ink-700);
  margin: 0 auto;
  max-width: 42ch;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  text-align: left;
}

.auth__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
}

.auth__input {
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.4;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-700);
  border-radius: 0;
  padding: 10px 0;
  color: var(--ink-900);
  width: 100%;
  outline: 0;
  box-shadow: none;
}
.auth__input::placeholder { color: var(--ink-300); }
.auth__input:focus {
  border-bottom-color: var(--oxblood-500);
  outline: 0;
}

.auth__submit {
  background: var(--oxblood-500);
  color: var(--cream-50);
  border-color: var(--oxblood-700);
  padding: 13px 24px;
  font-size: 14px;
  margin-top: var(--space-3);
  align-self: stretch;
  text-align: center;
}

.auth__error {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 14px;
  color: var(--oxblood-700);
  margin: 0;
  padding: 8px 0 0;
}

.auth__alt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  text-align: center;
  margin: var(--space-5) 0 0;
}
.auth__alt a {
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-300);
  margin-left: var(--space-2);
}
.auth__alt a:hover { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

.auth__hint {
  font-family: var(--serif-body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0 auto;
  max-width: 38ch;
  text-align: center;
}

.auth__resend {
  margin: var(--space-4) auto 0;
  text-align: center;
}
.auth__resend-btn {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-300);
  padding: 0 0 1px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.auth__resend-btn:hover { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

/* --- /signin/ password-fallback bits ---
   Initially the password row is hidden via the [hidden] attribute (and the
   no-JS form action shows it server-side via ?mode=password). The JS toggle
   adds .is-password-mode to the form for any other dynamic state. */
.auth__password-row[hidden] { display: none; }
.auth__password-row {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth__hint--reset {
  text-align: right;
  margin: 0;
  max-width: none;
  font-size: 12px;
}
.auth__hint--reset a {
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-300);
  font-style: normal;
  font-family: var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
}
.auth__hint--reset a:hover { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

.auth__toggle {
  text-align: center;
  margin: var(--space-3) 0 0;
}
.auth__toggle a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-300);
}
.auth__toggle a:hover { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

/* --- /account-password/ password input + visibility toggle --- */
.auth__input-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.auth__input-row .auth__input { flex: 1 1 auto; }
.auth__visibility {
  flex: 0 0 auto;
  align-self: end;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-300);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  cursor: pointer;
  padding: 10px 0;
}
.auth__visibility:hover { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

/* --- /membership-account/ injected affordances --- */
.np-account-saved {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 16px;
  color: var(--oxblood-700);
  border-top: 1px solid var(--oxblood-300);
  border-bottom: 1px solid var(--oxblood-300);
  padding: var(--space-3) 0;
  margin: 0 0 var(--space-5);
  text-align: center;
}
.np-account-extras {
  margin: var(--space-5) 0 var(--space-6);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.np-account-extras a {
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-300);
}
.np-account-extras a:hover { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

/* Magic Login plugin shortcode form — match our type system.
   The plugin renders inside #magic-login-shortcode at a fixed 320px and
   paints success/error messages with a stark white box + blue-left rule.
   Override the lot. */
#magic-login-shortcode {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 !important;
}
#magic-login-shortcode .magic-login-inline-login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
#magic-login-shortcode label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
}
#magic-login-shortcode input.input,
#magic-login-shortcode input[type="text"],
#magic-login-shortcode input[type="email"] {
  font-family: var(--serif-body) !important;
  font-size: 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink-700) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  color: var(--ink-900) !important;
  box-shadow: none !important;
  width: 100% !important;
  margin: 0 !important;
}
#magic-login-shortcode input.input:focus,
#magic-login-shortcode input[type="email"]:focus { border-bottom-color: var(--oxblood-500) !important; outline: 0 !important; }
#magic-login-shortcode .magic-login-submit,
#magic-login-shortcode input[type="submit"],
#magic-login-shortcode button[type="submit"] {
  background: var(--oxblood-500) !important;
  color: var(--cream-50) !important;
  border: 1px solid var(--oxblood-700) !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 13px 24px !important;
  cursor: pointer;
  width: 100% !important;
  margin: var(--space-3) 0 0 !important;
}

/* Replace the plugin's white-box / blue-rule notice with our quiet
   inline-italic note. The plugin renders these inside p.message or
   div#login_error after submit. */
#magic-login-shortcode .message,
#magic-login-shortcode .success,
#magic-login-shortcode .magic_login_block_login_success,
#magic-login-shortcode #login_error,
#magic-login-shortcode .magic_login_block_login_error {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  padding: var(--space-3) 0 !important;
  margin: 0 !important;
  font-family: var(--serif-body) !important;
  font-style: italic !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--ink-700) !important;
  text-align: center !important;
}
#magic-login-shortcode .magic_login_block_login_success,
#magic-login-shortcode .success {
  color: var(--oxblood-700) !important;
}
#magic-login-shortcode #login_error,
#magic-login-shortcode .magic_login_block_login_error {
  color: var(--oxblood-700) !important;
}

/* ============================================================
   PMP checkout overrides — paid-tier signup collects email + Stripe
   only. Username/password/confirm-email are server-side prefilled
   (see PmpCheckoutFilters in the site plugin); hide them visually.
   ============================================================ */

#pmpro_user_fields .pmpro_checkout-field-username,
#pmpro_user_fields .pmpro_checkout-field-password,
#pmpro_user_fields .pmpro_checkout-field-password2,
#pmpro_user_fields .pmpro_checkout-field-confirmemail,
#pmpro_user_fields .pmpro_checkout-field-bconfirmemail,
.pmpro_checkout-field-username,
.pmpro_checkout-field-password,
.pmpro_checkout-field-password2,
.pmpro_checkout-field-confirmemail,
.pmpro_checkout-field-bconfirmemail,
#pmpro_user_fields .pmpro_checkout_field-username,
#pmpro_user_fields .pmpro_checkout_field-password,
#pmpro_user_fields .pmpro_checkout_field-password2,
#pmpro_user_fields .pmpro_checkout_field-confirmemail,
#pmpro_user_fields .pmpro_checkout_field-bconfirmemail {
  display: none !important;
}

/* ============================================================
   default page template
   ============================================================ */

.entry {
  padding: clamp(40px, 6vw, 72px) 0;
  max-width: var(--prose-max);
  margin: 0 auto;
}

.entry__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin: 0 0 var(--space-4);
  padding-bottom: 0.04em;
}

.entry__content { font-size: var(--text-base); line-height: var(--leading-body); }
.entry__content p { margin: 0 0 1.2em; }
.entry__content h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
  margin: 1.8em 0 0.55em;
}
.entry__content a { color: var(--oxblood-500); border-bottom-color: var(--oxblood-300); }

/* ============================================================
   FluentForms overrides — match the design language
   ============================================================ */

.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="url"],
.fluentform input[type="tel"],
.fluentform input[type="number"] {
  font-family: var(--serif-body) !important;
  font-size: var(--text-base) !important;
  background: transparent !important;
  border: 0 !important;
  /* Soft cream underline — readable but not loud enough to double as a
     section divider. Focus state below brings the oxblood accent. */
  border-bottom: 1px solid var(--cream-300) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  color: var(--ink-900) !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
.fluentform .ff-el-form-control:focus {
  border-bottom-color: var(--oxblood-500) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.fluentform textarea.ff-el-form-control {
  min-height: 120px !important;
  padding: 12px 14px !important;
  background: var(--cream-50) !important;
  border: 1px solid var(--cream-300) !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}
.fluentform textarea.ff-el-form-control:focus {
  border-color: var(--ink-700) !important;
  background: var(--cream-100) !important;
}

.fluentform .ff-el-input--label label {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-500) !important;
  font-weight: 500 !important;
}
.fluentform .ff_help_message,
.fluentform .ff-el-help-message {
  font-family: var(--serif-body) !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: var(--ink-500) !important;
}

.fluentform .ff-el-input--content > label,
.fluentform .ff_t_radios label,
.fluentform .ff_t_checks label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: 9px 16px !important;
  border: 1px solid var(--cream-300) !important;
  background: var(--cream-50) !important;
  font-family: var(--serif-body) !important;
  font-size: 15px !important;
  color: var(--ink-900) !important;
  cursor: pointer !important;
  transition: all .2s var(--ease-out) !important;
  margin: 0 !important;
}
.fluentform .ff-el-input--content > label:hover,
.fluentform .ff_t_radios label:hover,
.fluentform .ff_t_checks label:hover { border-color: var(--ink-700) !important; }
.fluentform input[type="radio"],
.fluentform input[type="checkbox"] { display: none !important; }
.fluentform input[type="radio"]:checked + span,
.fluentform input[type="checkbox"]:checked + span,
.fluentform .ff_t_radios input:checked + label,
.fluentform .ff_t_checks input:checked + label {
  background: var(--ink-900) !important;
  color: var(--cream-50) !important;
  border-color: var(--ink-900) !important;
}

.fluentform .ff-btn-submit {
  background: var(--oxblood-500) !important;
  color: var(--cream-50) !important;
  border: 1px solid var(--oxblood-700) !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  font-family: var(--serif-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: background .25s var(--ease-out) !important;
  text-transform: none !important;
}
.fluentform .ff-btn-submit:hover { background: var(--oxblood-700) !important; }

.fluentform .ff-el-section-title {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-500) !important;
  border-top: 1px solid var(--cream-300) !important;
  padding-top: var(--space-6) !important;
  margin-top: var(--space-6) !important;
  font-weight: 500 !important;
}

/* ============================================================
   onboarding form — extra polish for /onboarding/

   FluentForms' "list buttons" field type renders each option as an
   .ff-el-image-holder div with an empty .ff-el-image-input-src image
   placeholder (~250px tall) when no image is uploaded. Killing the
   placeholder + flattening the holder into a pill removes the giant
   empty boxes the user complained about and converts the whole field
   into a wrapping pill row.
   ============================================================ */

.onboarding {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 32px) clamp(64px, 8vw, 120px);
}

.onboarding__intro { margin-bottom: var(--space-7); }
.onboarding__intro .label { display: inline-block; margin-bottom: var(--space-3); }
.onboarding__title {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin: 0 0 var(--space-4);
  padding-bottom: 0.06em;
}
.onboarding__lede {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
  max-width: 56ch;
}
.onboarding__lede strong { font-style: normal; color: var(--ink-900); }

.onboarding__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: var(--space-3);
}
.onboarding__meta span + span { margin-left: var(--space-3); padding-left: var(--space-3); border-left: 1px solid var(--cream-300); }

.onboarding__after {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--cream-300);
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-500);
  line-height: 1.55;
}
.onboarding__after strong { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oxblood-500); display: block; margin-bottom: var(--space-2); font-weight: 500; }

/* --- field group spacing --- */
.onboarding .fluentform .ff-el-group { margin-bottom: var(--space-5); }
.onboarding .fluentform .ff-el-form-top { margin-top: var(--space-3); }

/* --- pill-style "list buttons" for radios + checkboxes ---
   Strips the empty image placeholder, flattens the .ff-el-image-holder
   into a wrapping flex row of pills. */
.fluentform .ff_list_buttons .ff-el-image-input-src,
.fluentform .ff-el-form-check .ff-el-image-input-src {
  display: none !important;
}

.fluentform .ff_list_buttons .ff_el_checkable_photo_holders {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-2) !important;
  grid-template-columns: none !important;
}

.fluentform .ff_list_buttons .ff-el-image-holder {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

.fluentform .ff_list_buttons .ff-el-form-check-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: 8px 16px !important;
  border: 1px solid var(--cream-300) !important;
  background: var(--cream-50) !important;
  border-radius: 999px !important;
  font-family: var(--serif-body) !important;
  font-size: 15px !important;
  color: var(--ink-900) !important;
  cursor: pointer !important;
  transition: all .2s var(--ease-out) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.fluentform .ff_list_buttons .ff-el-form-check-label:hover {
  border-color: var(--ink-700) !important;
}

/* Neutralize FluentForms' inner <span> styling. The plugin renders the
   visible button as a <span> inside the label with its own white bg +
   1px #dcdfe6 border + 12×20 padding, which doubled up over our pill
   styling on the label and produced a "pill inside a pill" look. */
.fluentform .ff_list_buttons .ff-el-form-check-label > span,
.fluentform .ff_list_buttons .ff-el-form-check.ff-el-image-holder span {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  display: inline !important;
  box-shadow: none !important;
  font: inherit !important;
  color: inherit !important;
  white-space: nowrap !important;
}

/* The radio/checkbox sits inside the label; hide it visually while
   keeping it focusable. The selected state comes from FluentForms'
   .ff_item_selected class on the wrapping .ff-el-image-holder. */
.fluentform .ff_list_buttons .ff-el-form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

.fluentform .ff_list_buttons .ff_item_selected .ff-el-form-check-label {
  background: var(--oxblood-500) !important;
  color: var(--cream-50) !important;
  border-color: var(--oxblood-700) !important;
}
.fluentform .ff_list_buttons .ff_item_selected .ff-el-form-check-label > span {
  color: var(--cream-50) !important;
}

/* --- inline help text instead of blue tooltip icons ---
   FluentForms emits .ff-el-tooltip with the help message in data-content.
   Hide its SVG icon and surface the text inline as italic body copy. */
.fluentform .ff-el-tooltip { display: block !important; line-height: 1.4 !important; margin-top: 4px !important; }
.fluentform .ff-el-tooltip svg { display: none !important; }
.fluentform .ff-el-tooltip::after {
  content: attr(data-content);
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-500);
}

/* --- required marker: small mono "·required", no red asterisk ---
   FluentForms emits .ff-el-input--label.ff-el-is-required.asterisk-right
   (specificity 0,4,1 with the label::after rule). Mirror that selector
   exactly + use !important so the override wins reliably. */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
  content: " ·required" !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  color: var(--ink-300) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  margin-left: var(--space-2) !important;
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label:before,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
  content: "" !important; /* drop the leading red asterisk */
}

/* --- shipping fields side-by-side on desktop ---
   The intake form lays the address as 6 stacked text inputs. Pair city/state
   and zip/country on a 2-col grid at desktop widths. */
@media (min-width: 720px) {
  .onboarding .fluentform .ff-el-group[data-name="shipping_city"],
  .onboarding .fluentform .ff-el-group[data-name="shipping_state"] {
    width: calc(50% - var(--space-2));
    display: inline-block;
    vertical-align: top;
    margin-right: var(--space-3);
  }
  .onboarding .fluentform .ff-el-group[data-name="shipping_state"] { margin-right: 0; }

  .onboarding .fluentform .ff-el-group[data-name="shipping_zip"],
  .onboarding .fluentform .ff-el-group[data-name="shipping_country"] {
    width: calc(50% - var(--space-2));
    display: inline-block;
    vertical-align: top;
    margin-right: var(--space-3);
  }
  .onboarding .fluentform .ff-el-group[data-name="shipping_country"] { margin-right: 0; }
}

/* --- submit button alignment ---
   .ff-el-form-top is on the <form> itself, so styling text-align there
   right-aligns EVERY label. Target only the submit wrapper. */
.onboarding .fluentform .ff_submit_btn_wrapper,
.onboarding .fluentform form > .ff_submit_btn_wrapper { text-align: right; }
.onboarding .fluentform .ff-btn-submit {
  padding: 14px 32px !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-family: var(--mono) !important;
}
@media (max-width: 600px) {
  .onboarding .fluentform .ff_submit_btn_wrapper { text-align: center; }
  .onboarding .fluentform .ff-btn-submit { width: 100% !important; }
}

/* --- gdpr_agreement checkbox: render as a single-line consent line, not as a pill row --- */
.fluentform .ff-el-group[data-name="gdpr_agreement"] .ff-el-form-check-label {
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: var(--ink-700) !important;
}
.fluentform .ff-el-group[data-name="gdpr_agreement"] .ff_list_buttons .ff-el-form-check-input,
.fluentform .ff-el-group[data-name="gdpr_agreement"] input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  margin-right: var(--space-2) !important;
}

/* --- hide the welcome custom_html block ---
   The form's first field is a custom_html paragraph duplicating the
   welcome copy that's already in our page chrome. The form has another
   custom_html block before the shipping fields ("Required so I can
   send your sample box.") — that one is contextual help, keep it.
   Identify by data-name: form id 4's first custom_html is "custom_html-4_1". */
.onboarding .fluentform .ff-el-group[data-name="custom_html-4_1"] { display: none; }

/* --- section dividers ---
   Mirror the Google Form's four sections: identity (no header — flows
   from the page lede), About your skin, Your current & desired skincare
   routine, Final thoughts. Inject a hairline + italic display title via
   ::before on the first field of each section. data-name lives on the
   <input>, not the wrapping .ff-el-group, so use :has(input[name=…]). */

.onboarding .fluentform .ff-el-group:has(input[name="skin_type"])::before,
.onboarding .fluentform .ff-el-group:has(textarea[name="current_routine"])::before,
.onboarding .fluentform .ff-el-group:has(textarea[name="other_interests"])::before {
  display: block;
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  margin: var(--space-7) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--oxblood-300);
}

/* Section-specific titles */
.onboarding .fluentform .ff-el-group:has(input[name="skin_type"])::before { content: "About your skin."; }
.onboarding .fluentform .ff-el-group:has(textarea[name="current_routine"])::before { content: "Your current & desired routine."; }
.onboarding .fluentform .ff-el-group:has(textarea[name="other_interests"])::before { content: "Final thoughts."; }

/* ============================================================
   PMP overrides
   ============================================================ */

.pmpro_btn,
.pmpro_btn-submit-checkout,
input.pmpro_btn,
button.pmpro_btn {
  background: var(--oxblood-500) !important;
  color: var(--cream-50) !important;
  border: 1px solid var(--oxblood-700) !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  font-family: var(--serif-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background .25s var(--ease-out) !important;
  text-decoration: none !important;
}
.pmpro_btn:hover { background: var(--oxblood-700) !important; color: var(--cream-50) !important; }

.pmpro_pricing_box,
.pmpro_pricing-page,
.pmpro_levels_table {
  font-family: var(--serif-body);
  color: var(--ink-900);
}
.pmpro_levels_table th,
.pmpro_levels_table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--cream-300);
}