/* ============================================================
   BERUNDA — About Us (content). Quiet-luxury typographic maison
   spread on a candlelit parchment field. Chrome is the shared
   berunda-chrome.css. Ported verbatim from the design's about.css.
   ============================================================ */

.ab {
  --ab-bg: #f4ead7;
  /* Inks darkened for the crest-paper field — the letterhead beige is deeper
     than the old parchment, so body text needs more contrast to stay easy. */
  --ab-ink: #2a1808;
  --ab-ink-soft: #4a3410;
  --ab-line: rgba(66, 40, 23, 0.18);
  --ab-gold-line: rgba(198, 135, 27, 0.40);
  background: var(--ivory-beige); /* fallback under the fixed letterhead below */
  color: var(--ab-ink);
  overflow-x: clip;
  isolation: isolate;
}
.ab * { box-sizing: border-box; }

/* royal crest letterhead — the same fixed stationery field as the collection
   page: sized to the viewport, held still while the page scrolls over it. */
.ab::before {
  content: "";
  position: fixed;
  /* Overshoots the bottom edge for the same reason as .hs-sheet on the home
     page: mobile Safari resizes an unclipped fixed layer with the URL bar, and
     a layer ending exactly at the viewport bottom leaves a strip showing the
     wrapper's flat fallback instead of the crest. */
  top: 0;
  left: 0;
  right: 0;
  bottom: -180px;
  z-index: -2;
  pointer-events: none;
  background: var(--ivory-beige) url("collection-hero-crest-v2.webp") center / cover no-repeat;
}
.ab > * { position: relative; z-index: 1; }

/* Dawn's base.css hides empty decorative divs — restore the maison rules/flourish. */
.ab div:empty { display: revert; }

.ab-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 92px);
}

.ab-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--gold-700);
  font-weight: 700;
}

/* ============================================================
   Masthead
   ============================================================ */
.ab-masthead {
  text-align: center;
  padding: clamp(78px, 12vh, 156px) 0 clamp(20px, 4vh, 44px);
}
.ab-masthead-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--midnight-navy);
  font-size: clamp(33px, 3.9vw, 51px);
  letter-spacing: 0.035em;
  line-height: 1.05;
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  text-wrap: balance;
}
.ab-masthead-title .em { color: var(--regal-gold); }
.ab-masthead-rule {
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--regal-gold), transparent);
  margin: clamp(26px, 4vh, 40px) auto 0;
}

/* ============================================================
   Reusable CSS flourish — short rule · diamond · short rule
   ============================================================ */
.ab-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.ab-flourish::before,
.ab-flourish::after {
  content: "";
  width: clamp(46px, 7vw, 92px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ab-gold-line));
}
.ab-flourish::after { background: linear-gradient(90deg, var(--ab-gold-line), transparent); }
.ab-flourish i {
  width: 7px;
  height: 7px;
  background: var(--regal-gold);
  transform: rotate(45deg);
  flex: none;
}

/* ============================================================
   Provenance
   ============================================================ */
.ab-provenance {
  padding: clamp(40px, 7vh, 88px) 0 clamp(72px, 11vh, 132px);
}
.ab-lead {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--midnight-navy);
  text-align: center;
  text-wrap: balance;
  max-width: 17em;
  margin: 0 auto;
}
.ab-lead .em { color: var(--regal-gold); font-style: italic; }

.ab-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 84px);
  max-width: 920px;
  margin: clamp(54px, 8vh, 96px) auto 0;
  padding-top: clamp(40px, 6vh, 64px); /* keeps the gap the old hairline sat in */
  position: relative;
}
.ab-body {
  font-family: var(--font-body);
  font-size: clamp(20px, 1.62vw, 23px);
  font-weight: 500; /* the serif is thin at 400 on the textured paper */
  line-height: 1.72;
  color: var(--ab-ink);
  margin: 0;
}
.ab-body + .ab-body { margin-top: 1.1em; }
.ab-body .em { font-style: italic; }
.ab-body .gold { color: var(--regal-gold); }
.ab-standfirst {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--gold-700);
  font-weight: 700;
  margin: 0 0 clamp(16px, 2.2vh, 22px);
}

/* ============================================================
   The Sovereigns — asymmetric feature, hairline-split
   ============================================================ */
.ab-king {
  /* no hairlines / gold wash — the crest letterhead runs uninterrupted;
     the band keeps its full vertical padding for rhythm */
  padding: clamp(72px, 11vh, 134px) 0;
}
.ab-king-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: clamp(44px, 6vw, 104px);
  align-items: center;
}
.ab-king-grid.reverse {
  grid-template-columns: 1fr minmax(300px, 380px);
}
.ab-king-grid.reverse .ab-king-portrait { order: 2; }
.ab-king-grid.reverse .ab-king-body { order: 1; }

.ab-king-rule {
  /* pure spacer now — the line is gone, the gap between sovereigns stays */
  height: 1px;
  margin: clamp(56px, 8vh, 104px) 0;
}

.ab-king-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--midnight-navy);
  font-size: clamp(32px, 3.8vw, 54px);
  letter-spacing: 0.04em;
  line-height: 1.08;
  margin: clamp(10px, 1.6vh, 16px) 0 clamp(20px, 2.8vh, 30px);
  text-wrap: balance;
}
.ab-king-body .ab-eyebrow { letter-spacing: 0.34em; }

.ab-king-num {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11px;
  font-weight: 600;
  color: var(--ab-ink-soft);
  margin: 0 0 clamp(16px, 2.4vh, 22px);
  padding-bottom: clamp(14px, 2vh, 18px); /* keeps the gap the old underline sat in */
  display: inline-block;
}

.ab-king-portrait {
  margin: 0;
  justify-self: center;
}
.ab-king-portrait img {
  display: block;
  width: 100%;
  height: auto; /* override the width/height attr hint so aspect-ratio governs the box */
  max-width: 380px;
  aspect-ratio: 51 / 69;
  object-fit: cover;
  border: 1px solid var(--ab-line);
  box-shadow: 0 26px 60px -32px rgba(0, 9, 29, 0.55);
}
.ab-king-portrait figcaption {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10px;
  color: var(--regal-gold);
  margin-top: 16px;
  text-align: center;
}

.ab-king-body { max-width: 40em; }
.ab-king-body .ab-body { font-size: clamp(19px, 1.55vw, 22px); }
.ab-king-body .ab-body + .ab-body { margin-top: clamp(16px, 2vh, 22px); }
.ab-king-body .gold { color: var(--regal-gold); }

.ab-quote {
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: clamp(6px, 1vh, 10px) 0 clamp(6px, 1vh, 10px) clamp(26px, 3vw, 40px);
  border-left: 2px solid var(--regal-gold);
}
.ab-quote-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.4;
  color: var(--midnight-navy);
  margin: 0;
  text-wrap: pretty;
}
.ab-quote-by {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(11.5px, 0.9vw, 13px);
  font-weight: 600;
  color: var(--ab-ink-soft);
  margin: clamp(22px, 3vh, 30px) 0 0;
}
.ab-quote-by::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--ab-ink-soft);
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.6;
}

/* ============================================================
   The Board of Directors
   ============================================================ */
.ab-board {
  padding: clamp(72px, 11vh, 134px) 0 clamp(40px, 7vh, 80px);
}
.ab-board-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(56px, 9vh, 104px);
}
.ab-board-head .ab-flourish { margin-bottom: clamp(22px, 3.4vh, 34px); }
.ab-board-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--midnight-navy);
  font-size: clamp(30px, 3.6vw, 50px);
  letter-spacing: 0.045em;
  line-height: 1.08;
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  text-wrap: balance;
}
.ab-board-intro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ab-ink-soft);
  margin: clamp(20px, 3vh, 28px) auto 0;
  max-width: 30em;
  text-wrap: pretty;
}

.ab-board-list {
  display: grid;
  gap: clamp(72px, 12vh, 144px);
}
.ab-director {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: clamp(40px, 6vw, 92px);
  align-items: center;
}
.ab-director:nth-child(even) { grid-template-columns: 1.16fr 0.84fr; }
.ab-director:nth-child(even) .ab-portrait { order: 2; }
.ab-director:nth-child(even) .ab-director-body { order: 1; }

.ab-portrait {
  position: relative;
  padding: clamp(8px, 0.9vw, 12px);
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid var(--ab-gold-line);
  box-shadow: 0 24px 60px -34px rgba(58, 36, 18, 0.55);
}
.ab-portrait::after {
  content: "";
  position: absolute;
  inset: clamp(8px, 0.9vw, 12px);
  border: 1px solid rgba(198, 135, 27, 0.22);
  pointer-events: none;
}
.ab-portrait img {
  display: block;
  width: 100%;
  height: auto; /* override the width/height attr hint so aspect-ratio governs the box */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
.ab-portrait.is-placeholder {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(198, 135, 27, 0.07) 0,
      rgba(198, 135, 27, 0.07) 11px,
      rgba(58, 36, 18, 0.04) 11px,
      rgba(58, 36, 18, 0.04) 22px);
}
.ab-portrait.is-placeholder .ab-portrait-note {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ab-ink-soft);
  text-align: center;
  padding: 0 24px;
}
.ab-portrait.is-placeholder .ab-portrait-note span {
  display: block;
  color: var(--gold-700);
  letter-spacing: 0.3em;
  margin-bottom: 8px;
}

.ab-director-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--midnight-navy);
  font-size: clamp(26px, 2.7vw, 38px);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.ab-director-role {
  margin: clamp(14px, 2vh, 18px) 0 clamp(24px, 3.4vh, 30px);
}
.ab-director-role span {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: clamp(12.5px, 1.1vw, 14.5px);
  color: var(--gold-700);
  font-weight: 700;
}
.ab-director-role span + span { margin-top: 5px; }
.ab-director-bio {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.74;
  color: var(--ab-ink);
  margin: 0;
  text-wrap: pretty;
}
.ab-director-bio + .ab-director-bio { margin-top: 1em; }
.ab-director-langs {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ab-ink-soft);
  margin: clamp(16px, 2.2vh, 20px) 0 0;
}

/* ============================================================
   Baba Budan & the Seven Beans
   ============================================================ */
.ab-budan {
  text-align: center;
  padding: clamp(88px, 14vh, 168px) 0 clamp(96px, 15vh, 180px);
}
.ab-budan-rule {
  margin: 0 auto clamp(40px, 6vh, 64px);
}
.ab-budan-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--midnight-navy);
  font-size: clamp(28px, 3.6vw, 50px);
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin: clamp(30px, 4.5vh, 48px) 0 0;
  text-wrap: balance;
}
.ab-budan-body {
  font-family: var(--font-body);
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.76;
  color: var(--ab-ink);
  max-width: 33em;
  margin: clamp(30px, 4.5vh, 44px) auto 0;
  text-wrap: pretty;
}
.ab-budan-body + .ab-budan-body { margin-top: clamp(20px, 2.6vh, 28px); }
.ab-budan-body .strong {
  font-weight: 700;
  color: var(--regal-gold);
}
.ab-budan-body .em { font-style: italic; }

/* ============================================================
   Scroll reveal — visible by default; hidden only once .ab-js set.
   ============================================================ */
.ab-js .ab-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease-entrance), transform 1.1s var(--ease-entrance);
  will-change: opacity, transform;
}
.ab-js .ab-reveal.in { opacity: 1; transform: none; }
.ab-js .ab-reveal.d1 { transition-delay: 0.12s; }
.ab-js .ab-reveal.d2 { transition-delay: 0.24s; }
.ab-js .ab-reveal.d3 { transition-delay: 0.36s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .ab-columns { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 40px); max-width: 560px; }
  .ab-king-grid { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 40px); justify-items: start; }
  .ab-king-grid.reverse { grid-template-columns: 1fr; }
  /* Un-nest the body so the reader sees WHO before the portrait:
     identity (title/name/reign) → portrait → body. */
  .ab-king-body { display: contents; }
  .ab-king-id { order: 1; }
  .ab-king-grid .ab-king-portrait,
  .ab-king-grid.reverse .ab-king-portrait { order: 2; }
  .ab-king-text { order: 3; }
  .ab-king-portrait { justify-self: start; }
  .ab-king-portrait img { max-width: 300px; }
  .ab-king-portrait figcaption { text-align: left; }
  /* Both the combined selector AND nth-child(even) so the even rows (whose
     desktop 1.16fr/0.84fr rule out-specifies a bare .ab-director) also
     collapse to a single column instead of a cramped 2-up. */
  .ab-director,
  .ab-director:nth-child(even) {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vh, 40px);
    max-width: 480px;
    margin: 0 auto;
  }
  /* Un-nest the body: identity (name/role) → portrait → bio. */
  .ab-director-body { display: contents; }
  .ab-director-id { order: 1; }
  .ab-director .ab-portrait,
  .ab-director:nth-child(even) .ab-portrait { order: 2; }
  .ab-director-text { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-js .ab-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}