/* ==========================================================================
   Subscription Page (LYC-138 / REQ-17)
   Ported from /designs/html/subscribe.html (single source of truth).
   The 3-tier layout has been removed per REQ-17; Phase 2 tiers ship at /join/.
   ========================================================================== */

.page-subscribe { background: var(--color-quarter-white); }

/* -------------------------------------------------------------------------- */
/* Hero band                                                                   */
/*                                                                             */
/* LYC-555 / REQ-13 (Pass-3 Phase 4 Wave 0): the subscribe page is a single-  */
/* screen strip. The hero is the only band inside <main class="subscribe-     */
/* main">, so we size it to fill the viewport minus the sticky header and     */
/* vertically center its content. The global footer then renders naturally    */
/* below the viewport. Mobile drops the min-height so short devices can       */
/* scroll the form into view without awkward empty space.                     */
/* -------------------------------------------------------------------------- */
.subscribe-hero {
	background: var(--color-satin-linen);
	padding: var(--space-10) var(--gutter);
	text-align: center;
	min-height: calc(100vh - 84px);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.subscribe-hero__inner {
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
}
.subscribe-hero__pillar {
	display: block;
	width: 96px;
	height: 79px;
	margin: 0 auto var(--space-5);
	color: var(--color-claret);
}
.subscribe-hero__eyebrow {
	display: block;
	color: var(--color-claret);
	margin-bottom: var(--space-3);
}
.subscribe-hero__h1 { margin: 0 0 var(--space-4); }
.subscribe-hero__dek {
	max-width: 560px;
	margin: 0 auto;
	color: var(--color-shuttle-gray);
}
.subscribe-hero .subscribe-form {
	max-width: 520px;
	margin: var(--space-6) auto 0;
}
.subscribe-hero__micro { margin-top: var(--space-4); }

@media (max-width: 640px) {
	.subscribe-hero {
		min-height: auto;
		padding: var(--space-10) var(--gutter);
	}
}

/* -------------------------------------------------------------------------- */
/* Generic section band (what / quotes / faq)                                 */
/* -------------------------------------------------------------------------- */
.subscribe-section { padding: var(--space-16) 0; }
.subscribe-section__h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-display-3xl);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-10);
	text-align: center;
	color: var(--color-black);
}

/* -------------------------------------------------------------------------- */
/* "What you'll actually get" three-column grid                                */
/* -------------------------------------------------------------------------- */
.subscribe-what__col {
	display: block;
}
.subscribe-what__eyebrow {
	display: block;
	color: var(--color-claret);
	margin-bottom: var(--space-3);
}
.subscribe-what__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 var(--space-3);
	color: var(--color-black);
}
.subscribe-what__body {
	font-family: var(--font-body-serif);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-shuttle-gray);
	margin: 0;
}
.subscribe-what__cadence {
	display: inline-block;
	margin-top: var(--space-4);
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-black);
	border-top: var(--rule-width) solid var(--color-rule);
	padding-top: var(--space-3);
}

/* -------------------------------------------------------------------------- */
/* "Who we are" band                                                           */
/* -------------------------------------------------------------------------- */
.subscribe-who {
	background: var(--color-satin-linen);
	padding: var(--space-16) 0;
}
.subscribe-who__inner {
	display: grid;
	grid-template-columns: minmax(240px, 380px) 1fr;
	gap: var(--space-12);
	align-items: start;
}
.subscribe-who__photo {
	aspect-ratio: 4 / 5;
	background: var(--color-quarter-white);
	display: grid;
	place-items: center;
	color: var(--color-shuttle-gray);
	font-family: var(--font-ui);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: var(--rule-width) solid var(--color-rule);
	margin: 0;
}
.subscribe-who__copy h2,
.subscribe-who__h2 {
	text-align: left;
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	color: var(--color-black);
}
.subscribe-who__p {
	font-family: var(--font-body-serif);
	font-size: 19px;
	line-height: 1.7;
	color: var(--color-black);
	margin: 0 0 var(--space-5);
}
.subscribe-who__sign {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: var(--rule-width) solid var(--color-rule);
}
.subscribe-who__editor {
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--color-shuttle-gray);
}
.subscribe-who__editor strong {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0;
	color: var(--color-black);
	margin-bottom: 2px;
}
@media (max-width: 900px) {
	.subscribe-who__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

/* -------------------------------------------------------------------------- */
/* Reader quotes row                                                           */
/* -------------------------------------------------------------------------- */
.subscribe-quotes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-10);
}
.subscribe-quote-card {
	border-left: 3px solid var(--color-claret);
	padding: var(--space-2) 0 var(--space-4) var(--space-6);
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: var(--color-black);
}
.subscribe-quote-card footer {
	margin-top: var(--space-4);
	font-family: var(--font-ui);
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-shuttle-gray);
}
@media (max-width: 1024px) {
	.subscribe-quotes-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------- */
/* FAQ (native <details>)                                                      */
/* -------------------------------------------------------------------------- */
.subscribe-faq-list {
	max-width: var(--container-article);
	margin: 0 auto;
	border-top: var(--rule-width) solid var(--color-rule);
}
.subscribe-faq-list details {
	border-bottom: var(--rule-width) solid var(--color-rule);
}
.subscribe-faq-list summary {
	list-style: none;
	cursor: pointer;
	padding: var(--space-6) var(--space-2);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	color: var(--color-black);
}
.subscribe-faq-list summary::-webkit-details-marker { display: none; }
.subscribe-faq-list summary::after {
	content: "+";
	font-family: var(--font-ui);
	font-size: 24px;
	color: var(--color-claret);
	transition: transform var(--dur-base) var(--ease-std);
}
.subscribe-faq-list details[open] summary::after { content: "\2212"; /* minus */ }
.subscribe-faq-list__answer {
	padding: 0 var(--space-2) var(--space-6);
	font-family: var(--font-body-serif);
	font-size: 18px;
	line-height: 1.65;
	color: var(--color-shuttle-gray);
	max-width: 640px;
}
.subscribe-faq-list summary:focus-visible {
	outline: 2px solid var(--color-claret);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Editor body extension (optional admin-editable prose)                      */
/* -------------------------------------------------------------------------- */
.subscribe-body .article-body {
	max-width: var(--container-article);
	margin: 0 auto;
	font-family: var(--font-body-serif);
	font-size: var(--fs-article);
	line-height: 1.7;
	color: var(--color-black);
}

/* -------------------------------------------------------------------------- */
/* Closing CTA band                                                            */
/* -------------------------------------------------------------------------- */
.subscribe-closing {
	background: var(--color-satin-linen);
	padding: var(--space-16) var(--gutter);
	text-align: center;
}
.subscribe-closing__inner {
	max-width: 560px;
	margin: 0 auto;
}
.subscribe-closing__h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-display-3xl);
	line-height: 1.15;
	margin: 0 0 var(--space-3);
	color: var(--color-black);
}
.subscribe-closing__body {
	color: var(--color-shuttle-gray);
	margin: 0 0 var(--space-6);
	font-size: 18px;
}
.subscribe-closing .subscribe-form {
	max-width: 520px;
	margin: 0 auto;
}

/* ==========================================================================
   Base .subscribe-form (hotfix 2026-04-15)
   The flex layout + input styling was authored in designs/html/design-tokens.css
   but never ported into the theme. Result: every subscribe-form on the site
   (hero, closing, footer capture) rendered unstyled. These rules mirror the
   mockup spec verbatim.
   ========================================================================== */
.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Turnstile widget gets its own row below the input + button. The
   widget has an intrinsic ~300px width that would otherwise eat the
   email input's flex space and collapse it to a sliver. flex-basis
   100% forces a wrap; centering keeps it visually anchored to the
   form row above. */
.subscribe-form .cf-turnstile,
.subscribe-form .lyceum-turnstile {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: var(--rule-thick, 2px) solid var(--color-black);
  background: var(--color-white);
  font-family: var(--font-body-serif);
  font-size: 17px;
  padding: 14px 16px;
  min-height: 52px;
  border-radius: 0;
  color: var(--color-black);
}

.subscribe-form input[type="email"]::placeholder {
  color: var(--color-shuttle-gray);
  opacity: 1;
}

.subscribe-form input[type="email"]:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 2px;
}

.subscribe-form button,
.subscribe-form button[type="submit"],
.subscribe-form input[type="submit"] {
  flex: 0 0 auto;
  min-height: 52px;
  /* Mirror .btn + .btn-filled so MC4WP submit buttons (rendered as
     <input type="submit"> with no class) inherit the brand button look
     without requiring template edits in WP Admin. The placeholder form
     uses <button class="btn btn-filled"> and ignores these reset
     properties because explicit classes win. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: none;
  border-radius: var(--btn-radius);
  background: var(--color-claret);
  color: var(--color-quarter-white);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.subscribe-form button:hover,
.subscribe-form input[type="submit"]:hover {
  opacity: 0.85;
}

/* MC4WP's shortcode adds an extra <div class="mc4wp-form-fields">
   between the <form> and the form-template body, AND each field is
   wrapped in <p><label>...input...</label></p>. Flatten ALL THREE
   wrappers so the input + button become direct flex children of the
   <form> and the layout collapses to one horizontal row. */
.subscribe-form .mc4wp-form-fields,
.subscribe-form p,
.subscribe-form label {
  margin: 0;
  display: contents;
}
.subscribe-form input[type="email"] { flex: 1; }
/* Suppress MC4WP's response notice from breaking the flex row.
   It needs its own block so the success/error message reads
   on its own line below the form. */
.subscribe-form .mc4wp-response {
  flex: 0 0 100%;
  margin-top: var(--space-2);
}

/* MC4WP's default <label> text ("Email address: ") fronts the input
   and is redundant with the input placeholder. Visually hide it but
   keep it readable for screen readers. Wrapping the label text itself
   isn't reliable across MC4WP form templates, so use a font-size-zero
   trick on the label that doesn't break a screen reader's reading. */
.subscribe-form label {
  font-size: 0;
}
.subscribe-form label > input,
.subscribe-form label > select,
.subscribe-form label > textarea {
  font-size: 17px;
}

/* Responsive: stack on narrow viewports so the input doesn't squeeze
   the button off-screen. */
@media (max-width: 540px) {
  .subscribe-form { flex-direction: column; }
  .subscribe-form button,
  .subscribe-form input[type="submit"] { width: 100%; }
}