/* ============================================================
   Agathia — About page styles
   Editorial / magazine-spread modules layered on top of
   design-system/colors_and_type.css + prototype-styles.css
   ============================================================ */

/* ---------- Page rhythm ---------- */
.ab-page {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--fg);
  background: var(--bg);
}

/* Reusable hairline label sitting above a section title */
.ab-marker {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.ab-marker::before {
  content: "";
  width: 36px;
  height: 0.5px;
  background: var(--accent);
  display: inline-block;
}

/* ============================================================
   1 · HERO — full-bleed founder portrait
   ============================================================ */
.ab-hero {
  position: relative;
  height: 760px;
  overflow: hidden;
  background: var(--ink);
  width: 100%;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}
.ab-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: contrast(1.05) saturate(0.85);
}
.ab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.0) 28%),
    linear-gradient(180deg, rgba(0,0,0,0.0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* The mark stands at the height of the figure on the right —
   white-on-transparent, with a soft cast shadow so it reads against
   the dark portrait without ever feeling pasted-on. */
.ab-hero__mark {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  z-index: 2;
  display: block;
  height: 78%;
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5))
          drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

.ab-hero__eyebrow {
  position: absolute;
  top: 56px;
  right: 56px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  color: rgba(242,238,230,0.78);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.ab-hero__eyebrow::before {
  content: "";
  width: 36px;
  height: 0.5px;
  background: var(--gold-leaf);
  display: inline-block;
}

.ab-hero__tagline {
  position: absolute;
  right: 56px;
  bottom: 44px;
  z-index: 2;
  font-family: var(--font-script);
  font-style: italic;
  font-size: 38px;
  color: var(--paper);
  letter-spacing: 0;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  max-width: 22ch;
  text-align: right;
  line-height: 1.25;
}

.ab-hero__title {
  position: absolute;
  left: 56px;
  bottom: 56px;
  z-index: 2;
  font-family: var(--font-titling);
  font-weight: 500;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* ============================================================
   2 · FOUNDER LETTER
   ============================================================ */
.ab-letter {
  max-width: 1440px;
  margin: 0 auto;
  padding: 56px 80px 40px;
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 40px;
  align-items: start;
  position: relative;
  border-bottom: 0.5px solid var(--hairline);
}
.ab-letter__rail {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ab-letter__rail .ab-marker {
  font-size: 20px;
  font-weight: 500;
  white-space: normal;
  text-align: left;
  max-width: 155px;
  align-items: center;
  gap: 10px;
}
.ab-family__body > .ab-marker,
.ab-murti__copy > .ab-marker {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 20px;
}
.ab-letter__from {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-4);
  line-height: 1.6;
}
.ab-letter__from strong {
  display: block;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: var(--tr-engraved);
  margin-bottom: 6px;
}

.ab-letter__body {
  max-width: none;
  width: 100%;
}

/* Magazine-style 2-column flow for the letter body — keeps the
   letter compact vertically and reads as a printed page. */
.ab-letter__columns {
  column-count: 2;
  column-gap: 56px;
  column-rule: 0.5px solid var(--hairline);
}
.ab-letter__columns p {
  break-inside: avoid;
  margin: 0 0 18px;
}
.ab-letter__columns p:last-child { margin-bottom: 0; }
.ab-letter__salutation {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 56px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 36px;
  letter-spacing: 0;
}
.ab-letter__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  color: var(--fg);
  margin: 0 0 18px;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.ab-letter__body p:last-of-type { margin-bottom: 0; }

/* Drop cap on the first paragraph */
.ab-letter__body p.has-dropcap::first-letter {
  font-family: var(--font-titling);
  font-weight: 500;
  font-size: 84px;
  line-height: 0.85;
  float: left;
  margin: 6px 14px 0 0;
  color: var(--accent);
  letter-spacing: 0;
}

.ab-letter__sign {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}
.ab-letter__sign-name {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: 0;
}
.ab-letter__sign-role {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ============================================================
   3 · FAMILY SPREAD — asymmetric editorial spread
   ============================================================ */
.ab-family {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 80px 40px;
  display: grid;
  grid-template-columns: 1fr 420px;
  column-gap: 64px;
  align-items: start;
  position: relative;
  border-bottom: 0.5px solid var(--hairline);
}
.ab-family__figure {
  position: relative;
  margin: 0;
}
.ab-family__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  filter: contrast(1.04) saturate(0.9);
  background: var(--ink);
}
.ab-family__figure figcaption {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  padding-left: 0;
  border-top: 0.5px solid var(--hairline);
  padding-top: 14px;
}
.ab-family__figure figcaption strong {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  color: var(--fg);
  display: block;
  margin-bottom: 4px;
}

.ab-family__body {
  padding-top: 0;
}
.ab-family__heading {
  font-family: var(--font-titling);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.0;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  margin: 18px 0 28px;
  color: var(--fg);
}
.ab-family__heading em {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 0.78em;
  letter-spacing: 0;
  color: var(--accent);
  text-transform: none;
  font-weight: 400;
  display: inline-block;
  margin-right: 4px;
}
.ab-family__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg);
  margin: 0 0 18px;
  max-width: none;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.ab-family__body p:last-child { margin-bottom: 0; }

.ab-family__pull {
  margin: 36px 0 28px;
  padding: 28px 0 28px;
  border-top: 0.5px solid var(--accent);
  border-bottom: 0.5px solid var(--accent);
  font-family: var(--font-script);
  font-style: italic;
  font-size: 32px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: 0;
  max-width: 22ch;
}

/* ============================================================
   4 · MURTI STORY — two images + text columns
   ============================================================ */
.ab-murti {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 80px 20px;
  border-bottom: 0.5px solid var(--hairline);
}
.ab-murti__head {
  display: block;
  margin-bottom: 32px;
}
.ab-murti__head-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ab-murti__heading {
  font-family: var(--font-titling);
  font-weight: 500;
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  margin: 0;
  color: var(--fg);
}
.ab-murti__heading em {
  display: block;
  font-family: var(--font-script);
  font-style: italic;
  font-size: 0.55em;
  letter-spacing: 0;
  color: var(--accent);
  text-transform: none;
  font-weight: 400;
  margin-top: 12px;
}
.ab-murti__lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.72;
  color: var(--fg);
  margin: 0 0 18px;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.ab-murti__gallery {
  display: grid;
  grid-template-columns: 420px 1fr;
  column-gap: 64px;
  align-items: start;
}
.ab-murti__fig {
  position: relative;
  margin: 0;
}
.ab-murti__fig-frame {
  position: relative;
  margin: 0;
  background: var(--ink);
  overflow: hidden;
}
.ab-murti__fig-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.85);
}
.ab-murti__fig-frame--tall {
  aspect-ratio: 4 / 5;
}
.ab-murti__fig-frame--wide {
  float: right;
  width: 420px;
  aspect-ratio: 4 / 5;
  margin: 6px 0 18px 28px;
  shape-outside: margin-box;
}
.ab-murti__fig-label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  color: rgba(242,238,230,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ab-murti__fig-label::before {
  content: "";
  width: 20px;
  height: 0.5px;
  background: var(--gold-leaf);
  display: inline-block;
  flex-shrink: 0;
}
.ab-murti__fig > figcaption {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  padding-left: 0;
  border-top: 0.5px solid var(--hairline);
  padding-top: 14px;
}
.ab-murti__fig > figcaption strong {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  color: var(--fg);
  display: block;
  margin-bottom: 4px;
}

.ab-murti__copy {
  display: block;
  padding: 0;
}
.ab-murti__copy::after {
  content: "";
  display: block;
  clear: both;
}
.ab-murti__copy p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.72;
  color: var(--fg);
  margin: 0 0 18px;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.ab-murti__copy p:last-child { margin-bottom: 0; }

/* Pillars row — three quiet statements with hairlines */
.ab-pillars {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--hairline);
}
.ab-pillar {
  padding: 18px 32px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 0.5px solid var(--hairline);
}
.ab-pillar:first-child { padding-left: 0; }
.ab-pillar:last-child  { padding-right: 0; }
.ab-pillar:last-child { border-right: none; }
.ab-pillar__num {
  font-family: var(--font-titling);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: var(--tr-engraved);
  color: var(--accent);
}
.ab-pillar__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.ab-pillar__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
  color: var(--fg-2);
  margin: 0;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

/* ============================================================
   5 · CLOSING FLOURISH — dark band with Zapfino quote
   ============================================================ */
.ab-closing {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 80px;
  text-align: center;
  position: relative;
}
.ab-closing__mark {
  width: 64px;
  height: auto;
  display: block;
  margin: 0 auto 32px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.ab-closing__quote {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 44px;
  line-height: 1.3;
  color: var(--gold-hi);
  letter-spacing: 0;
  margin: 0 auto 24px;
  max-width: 28ch;
}
.ab-closing__sub {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tr-engraved);
  text-transform: uppercase;
  color: rgba(242,238,230,0.6);
  margin: 0;
}

/* ============================================================
   MOBILE
   ============================================================ */
.agathia--mobile .ab-hero {
  height: 580px;
}
.agathia--mobile .ab-hero__mark {
  height: 62%;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
}
.agathia--mobile .ab-hero__eyebrow {
  top: 30px;
  right: 24px;
  font-size: 9px;
}
.agathia--mobile .ab-hero__eyebrow::before { width: 20px; }
.agathia--mobile .ab-hero__title {
  font-size: 44px;
  left: 24px;
  bottom: 92px;
}
.agathia--mobile .ab-hero__tagline {
  right: 24px;
  bottom: 28px;
  font-size: 22px;
  max-width: 18ch;
}

.agathia--mobile .ab-letter {
  grid-template-columns: 1fr;
  padding: 56px 24px 56px;
  row-gap: 32px;
}
.agathia--mobile .ab-letter__rail { position: static; }
.agathia--mobile .ab-letter__salutation { font-size: 38px; margin-bottom: 24px; }
.agathia--mobile .ab-letter__columns { column-count: 1; column-rule: none; }
.agathia--mobile .ab-letter__body p { font-size: 15px; line-height: 1.72; margin-bottom: 16px; }
.agathia--mobile .ab-letter__body p.has-dropcap::first-letter { font-size: 56px; margin-right: 10px; }
.agathia--mobile .ab-letter__sign-name { font-size: 28px; }

.agathia--mobile .ab-family {
  grid-template-columns: 1fr;
  padding: 56px 24px;
  row-gap: 36px;
}
.agathia--mobile .ab-family__heading { font-size: 34px; }
.agathia--mobile .ab-family__pull { font-size: 22px; padding: 18px 0; margin: 24px 0; }
.agathia--mobile .ab-family__body p { font-size: 15px; }

.agathia--mobile .ab-murti {
  padding: 56px 24px;
}
.agathia--mobile .ab-murti__head {
  grid-template-columns: 1fr;
  row-gap: 24px;
  margin-bottom: 36px;
}
.agathia--mobile .ab-murti__heading { font-size: 42px; }
.agathia--mobile .ab-murti__lede { font-size: 16px; }
.agathia--mobile .ab-murti__gallery {
  grid-template-columns: 1fr;
  row-gap: 24px;
}
.agathia--mobile .ab-murti__fig-frame--tall { aspect-ratio: 4 / 5; grid-row: auto; }
.agathia--mobile .ab-murti__fig-frame--wide { aspect-ratio: 5 / 4; margin-top: 0; }
.agathia--mobile .ab-murti__copy {
  grid-column: 1;
  grid-row: auto;
  font-size: 15px;
}

.agathia--mobile .ab-pillars {
  margin-top: 48px;
  grid-template-columns: 1fr;
}
.agathia--mobile .ab-pillar {
  padding: 28px 0 28px;
  border-right: none;
  border-bottom: 0.5px solid var(--hairline);
}
.agathia--mobile .ab-pillar:last-child { border-bottom: none; }

.agathia--mobile .ab-closing { padding: 56px 24px; }
.agathia--mobile .ab-closing__quote { font-size: 26px; }

/* ============================================================
   WP theme — lock typography to mockup (core / plugin resets)
   ============================================================ */
.agathia.ab-page {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--fg);
  background: var(--bg);
}

.agathia.ab-page p {
  margin-block-start: 0;
}

.agathia.ab-page .ab-hero__tagline {
  text-align: right;
}

.agathia.ab-page .ab-letter__salutation {
  text-align: left;
}

.agathia.ab-page .ab-letter__columns p,
.agathia.ab-page .ab-letter__body > p:not(.ab-letter__salutation):not(.ab-letter__empty) {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  color: var(--fg);
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.agathia.ab-page .ab-family__body > p:not(.ab-marker):not(.ab-family__empty) {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  color: var(--fg);
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.agathia.ab-page .ab-family__figure figcaption,
.agathia.ab-page .ab-murti__fig > figcaption {
  text-align: left;
}

.agathia.ab-page .ab-murti__lede,
.agathia.ab-page .ab-murti__copy > p:not(.ab-marker):not(.ab-murti__empty) {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  color: var(--fg);
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.agathia.ab-page .ab-murti__lede {
  font-size: 19px;
  line-height: 1.72;
}

.agathia.ab-page .ab-pillar__body {
  text-align: justify;
  color: var(--fg-2);
}

.agathia.ab-page .ab-letter__sign {
  text-align: right;
}

.agathia.ab-page .ab-letter__sign-name {
  text-align: right;
}