/* ============================================================
   COMPONENTS — the 3 primitives + editorial chrome.
   Per brief: every section must be built from these primitives
   plus the chrome. No bespoke section markup.

     1. .hairline-block   — META label + rule + headline + rule + body
     2. .index-row        — number / title / leader / descriptor / page#
     3. .pull-quote       — centered Fraunces italic with green ampersand

   Plus the chrome utilities:
     .meta-label, .hairline-rule, .signature-mark, .page-number,
     .text-display, .text-pull, .text-lead, .text-meta, .text-rule

   Legacy components (.btn, .card, .founder-portrait, .form-field,
   .faq-accordion) are kept below for sections not yet rebuilt.
   ============================================================ */

/* ============================================================
   TYPE UTILITIES — the 8 type styles as utility classes
   Use these directly on any element to apply the locked styles.
   ============================================================ */

.text-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-style: italic;
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

.text-pull {
  font-family: var(--font-display);
  font-size: var(--fs-pull);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-pull);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

.text-lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-normal);
  color: var(--color-ink-soft);
}

.text-meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  line-height: var(--lh-meta);
  color: var(--color-ink);
}

.text-rule {
  font-family: var(--font-body);
  font-size: var(--fs-rule);
  font-weight: 500;
  letter-spacing: var(--ls-rule);
  text-transform: uppercase;
  line-height: var(--lh-meta);
  color: var(--color-ink-mute);
}

/* ============================================================
   THE META LABEL — replaces every "eyebrow" on the site.
   Editorial chapter heading: hairline rule on top, label
   in META type, hairline rule below.
   ============================================================ */
.meta-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  line-height: var(--lh-meta);
  color: var(--color-ink);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--space-6);
}

.meta-label--on-dark {
  color: var(--color-ink-on-dark);
  border-top-color: var(--color-hairline-dark);
  border-bottom-color: var(--color-hairline-dark);
}

/* ============================================================
   HAIRLINE RULE — the journal's punctuation mark.
   1px, ink at 12% opacity, never thicker, never colored.
   ============================================================ */
.hairline-rule {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-hairline);
  border: 0;
  margin: 0;
}

.hairline-rule--short { width: 64px; }
.hairline-rule--on-dark { background-color: var(--color-hairline-dark); }

/* ============================================================
   PAGE NUMBER — floats in the outer margin of each section.
   Set in RULE type — the smallest editorial chrome.
   ============================================================ */
.page-number {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-rule);
  font-weight: 500;
  letter-spacing: var(--ls-rule);
  text-transform: uppercase;
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   SIGNATURE MARK — the single bold green &.
   Anchors specific moments: card corners, masthead, final CTA.
   ============================================================ */
.signature-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--color-green);
  user-select: none;
}

.signature-mark--lg { font-size: 32px; }
.signature-mark--sm { font-size: 18px; }

/* ============================================================
   AMPERSAND WATERMARK — State 1 of the ampersand system.
   Massive (400-600px), Fraunces 500 italic, 6-10% opacity.
   Decorative background presence, never interactive.
   ============================================================ */
.amp-watermark {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(280px, 38vw, 600px);
  line-height: 0.9;
  color: var(--color-green);
  opacity: 0.08;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   PRIMITIVE 1 — THE HAIRLINE BLOCK
   The journal's "article opener." Any introduction to a section.
   Composition: META label → rule → headline → rule → body
   ============================================================ */
.hairline-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: var(--content-max);
}

.hairline-block__label {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  line-height: var(--lh-meta);
  color: var(--color-ink);
  padding-block: var(--space-3);
  margin: 0;
}

.hairline-block__rule {
  width: 100%;
  height: 1px;
  background-color: var(--color-hairline);
  border: 0;
  margin: 0;
}

.hairline-block__headline {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin: 0;
  padding-block: var(--space-5);
  text-wrap: balance;
}

.hairline-block__headline--display {
  font-size: var(--fs-display);
  font-style: italic;
  line-height: var(--lh-display);
  padding-block: var(--space-6);
}

.hairline-block__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  margin: 0;
  padding-block: var(--space-5);
  max-width: 60ch;
}

.hairline-block__lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
  margin: 0;
  padding-block: var(--space-4);
}

/* ============================================================
   PRIMITIVE 2 — THE INDEX ROW
   Vertical layout: a top row (num + title + leader + descriptor)
   followed by a body paragraph beneath. Whole row shifts +4px on hover.
   ============================================================ */
.index-row {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-hairline);
  text-decoration: none;
  color: inherit;
  transition: transform 250ms var(--ease-out-cubic);
}

.index-row:last-child,
li:last-child > .index-row {
  border-bottom: 1px solid var(--color-hairline);
}

.index-row:hover,
.index-row:focus-visible {
  transform: translateX(4px);
}

.index-row__top {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  min-height: 56px;
}

.index-row__num {
  flex: 0 0 64px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-green);
  opacity: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
  transition: opacity 250ms var(--ease-out-cubic);
}

.index-row:hover .index-row__num,
.index-row:focus-visible .index-row__num {
  opacity: 1;
}

.index-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin: 0;
}

.index-row__leader {
  flex: 1;
  align-self: center;
  height: 1px;
  border-bottom: 1px dotted rgba(26, 31, 46, 0.25);
  min-width: 48px;
  margin-bottom: 0.35em;
}

.index-row__desc {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3;
  color: rgba(26, 31, 46, 0.70);
  text-align: right;
  margin: 0;
  transition: color 250ms var(--ease-out-cubic);
}

.index-row:hover .index-row__desc,
.index-row:focus-visible .index-row__desc {
  color: var(--color-ink);
}

.index-row__body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 31, 46, 0.75);
  margin: 12px 0 0 84px;  /* indent past the 64px num + gap */
  max-width: 60ch;
}

/* Mobile fallback */
@media (max-width: 640px) {
  .index-row__leader,
  .index-row__desc {
    display: none;
  }
  .index-row__body {
    margin-left: 0;
  }
}

/* ============================================================
   PRIMITIVE 3 — THE PULL QUOTE
   The journal's "featured aside." Once per page maximum.
   Composition: green & + centered italic Fraunces quote + cite
   ============================================================ */
.pull-quote {
  display: block;
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-9);
  position: relative;
}

.pull-quote__amp {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3rem, 5vw, 4.5rem);
  color: var(--color-green);
  line-height: 1;
  margin-bottom: var(--space-5);
}

.pull-quote__text {
  font-family: var(--font-display);
  font-size: var(--fs-pull);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-pull);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}

.pull-quote__attribution {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-ink-mute);
  font-style: normal;
  margin-top: var(--space-5);
}

/* ============================================================
   THE MASTHEAD LINE — global chrome (markup TBD)
   Three columns of small caps, separated by space,
   hairline rule below. Visible on every page above the nav.
   ============================================================ */
.masthead {
  border-bottom: 1px solid var(--color-hairline);
  padding-block: var(--space-3);
  background-color: var(--color-paper);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.masthead__item {
  font-family: var(--font-body);
  font-size: var(--fs-rule);
  font-weight: 500;
  letter-spacing: var(--ls-rule);
  text-transform: uppercase;
  color: var(--color-ink-mute);
  line-height: var(--lh-meta);
}

.masthead__item--center { color: var(--color-ink); }

/* ============================================================
   LEGACY COMPONENTS — kept for sections not yet rebuilt.
   These obey the new palette via token aliases but their
   structure is from the previous design. Each will be
   replaced when its section is migrated.
   ============================================================ */

/* Legacy .card / .card--dark / card child classes stripped during Section 02 build.
   Replaced by the .index-row primitive (above). Why M&S and Resources Teaser
   sections inherit the transitional unstyled state until their own rebuild. */

/* ===== FOUNDER PORTRAIT ===== */
.founder-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--color-hairline);
  background-color: var(--color-paper-deep);
}

.founder-portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#msacct-duotone);
  transition: transform 1.2s ease;
}

.founder-portrait:hover .founder-portrait__img { transform: scale(1.02); }

.founder-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(26, 31, 46, 0.78) 100%);
  pointer-events: none;
}

.founder-portrait__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-6);
  z-index: 1;
  color: var(--color-ink-on-dark);
}

.founder-portrait__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  margin: 0 0 var(--space-1);
  color: var(--color-ink-on-dark);
}

.founder-portrait__role {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-ink-on-dark-soft);
}

/* ===== FORMS ===== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-field__label {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

.form-field__input,
.form-field__select,
.form-field__textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--color-ink);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-hairline-strong);
  border-radius: 0;
  transition: border-color var(--duration-fast) ease;
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
  outline: none;
  border-bottom-color: var(--color-navy);
}

.form-field__textarea { min-height: 120px; resize: vertical; }

/* ===== FAQ ACCORDION ===== */
.faq-accordion { display: grid; gap: 0; }
.faq-accordion__item {
  border-top: 1px solid var(--color-hairline);
  transition: border-color var(--duration-hover) ease;
}
.faq-accordion__item:last-child { border-bottom: 1px solid var(--color-hairline); }
.faq-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-ink);
  background-color: transparent;
}
.faq-accordion__icon {
  display: inline-block; width: 14px; height: 14px;
  position: relative; flex-shrink: 0;
  transition: transform var(--duration-hover) ease;
}
.faq-accordion__icon::before,
.faq-accordion__icon::after {
  content: ""; position: absolute; background-color: var(--color-ink);
}
.faq-accordion__icon::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.faq-accordion__icon::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); transition: opacity var(--duration-fast) ease; }
.faq-accordion__item.is-open .faq-accordion__icon::after { opacity: 0; }
.faq-accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--duration-reveal) ease; }
.faq-accordion__item.is-open .faq-accordion__panel { max-height: 600px; }
.faq-accordion__content {
  padding: 0 0 var(--space-5);
  color: var(--color-ink-soft);
  line-height: var(--lh-body);
  max-width: 64ch;
}

/* Legacy .btn / .eyebrow / .section-head / .hl-green stripped during Section 01 build.
   Replaced by typographic CTA (no button chrome), .meta-label (hairline-ruled top/bottom),
   .hairline-block (the journal "article opener"), and the green ampersand watermark. */