/* ==========================================================================
   ABOUT — the family story. The journey is the page's spine: a horizontal
   timeline with one hairline drawing through six decades.
   ========================================================================== */

/* --- 1 · HERO ------------------------------------------------------------- */

.ahero__inner {
  padding-top: calc(var(--nav-h) + clamp(60px, 12vh, 150px));
  padding-bottom: clamp(70px, 10vw, 150px);
}
.ahero__headline { margin-top: clamp(24px, 3vw, 40px); max-width: min(12ch, 100%); }

.ahero__foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(40px, 5vw, 76px);
  align-items: end;
}
.ahero__sub { grid-column: 1 / span 5; max-width: min(36ch, 100%); }
.ahero__side { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 28px; }
.ahero__para { font-size: var(--fs-small); }
.ahero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 960px) {
  .ahero__sub, .ahero__side { grid-column: 1 / -1; }
}


/* --- 2 · WHO WE ARE · 3 · THE FAMILY -------------------------------------- */

.newest__grid, .family__grid { row-gap: 40px; }
.newest__grid .index, .family__grid .index { margin-bottom: 8px; }
.newest__title, .family__title { margin-bottom: clamp(40px, 5vw, 70px); }
.newest__body, .family__body { row-gap: 34px; }

.leaders { margin-top: clamp(56px, 7vw, 110px); }
.leaders__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.leaders__list li {
  background: var(--bg);
  padding: clamp(24px, 2.6vw, 40px) clamp(18px, 1.8vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leaders__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.3vw, 21px);
  letter-spacing: -0.018em;
}

@media (max-width: 1024px) { .leaders__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .leaders__list { grid-template-columns: 1fr; } }


/* --- 4 · THE JOURNEY — the horizontal timeline ---------------------------- */

.journey { padding-block: 0; }

.journey__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(40px, 6vh, 80px);
  padding-block: clamp(80px, 10vh, 150px);
}

.journey__head .index { margin-bottom: 12px; }
.journey__title { max-width: min(16ch, 100%); }

.journey__viewport { overflow: hidden; }

.journey__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(34px, 4vw, 80px);
  padding-inline: var(--gutter);
  padding-top: 54px;
  width: max-content;
  will-change: transform;
}

/* the hairline that draws through the decades */
.journey__rule {
  position: absolute;
  top: 26px;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--rule);
}
.journey__rule span {
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.era {
  position: relative;
  flex: 0 0 auto;
  width: clamp(250px, 24vw, 340px);
}
/* the mark where each era meets the line */
.era::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.era__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 16px;
}
.era h3 { margin-bottom: 12px; font-size: clamp(17px, 1.4vw, 22px); }
.era p { font-size: var(--fs-small); }

.era--now .era__year { color: var(--accent); }

@media (max-width: 860px) {
  .journey__pin { min-height: 0; display: block; padding-block: var(--sp-band); }
  .journey__viewport { overflow: visible; margin-top: 48px; }
  .journey__track {
    width: auto;
    flex-direction: column;
    padding-inline: 0;
    padding-top: 0;
    gap: 44px;
    transform: none !important;
  }
  .journey__rule { display: none; }
  .era { width: 100%; padding-top: 26px; border-top: 1px solid var(--rule); }
  .era::before { top: -4px; }
}


/* --- 5 · THE PARTNERSHIP -------------------------------------------------- */

.partner__grid { row-gap: 40px; }
.partner__grid .index { margin-bottom: 8px; }
.partner__title { margin-bottom: clamp(40px, 5vw, 70px); }
.partner__body { row-gap: 34px; }


/* --- 6 · THE HOUSE OF COLLECTIONS ----------------------------------------- */

.house__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.house__head .index { margin-bottom: 8px; }

.house__list { border-top: 1px solid var(--rule); }
.house__list li { border-bottom: 1px solid var(--rule); }
.house__list a,
.house__row {
  display: grid;
  grid-template-columns: minmax(220px, 4fr) minmax(0, 7fr);
  gap: clamp(14px, 2.5vw, 44px);
  align-items: baseline;
  padding-block: clamp(20px, 2.4vw, 34px);
  transition: opacity var(--t) var(--ease);
}
.house__list span.dim { font-size: var(--fs-small); }

.house__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 28px);
  letter-spacing: -0.022em;
}

@media (hover: hover) {
  .house__list:hover li { opacity: 0.45; }
  .house__list li:hover { opacity: 1; }
}
@media (max-width: 620px) {
  .house__list a, .house__row { grid-template-columns: 1fr; row-gap: 6px; }
}

.house__close {
  margin-top: clamp(40px, 5vw, 70px);
  max-width: min(64ch, 100%);
}


/* --- 7 · WHAT WE STAND FOR ------------------------------------------------ */

.stand__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.stand__head .index { margin-bottom: 8px; }

.stand__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 64px);
}
.stand__row { padding-block: clamp(26px, 3vw, 44px); border-top: 1px solid var(--rule); }
.stand__row h3 { margin-bottom: 12px; font-size: clamp(20px, 1.7vw, 28px); }
.stand__row p { font-size: var(--fs-small); }

@media (max-width: 960px) { .stand__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stand__list { grid-template-columns: 1fr; } }


/* --- 8 · LOOKING FORWARD + STATS ------------------------------------------ */

.forward__grid { row-gap: 40px; }
.forward__grid .index { margin-bottom: 8px; }
.forward__title { margin-bottom: clamp(40px, 5vw, 70px); }
.forward__body { row-gap: 34px; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 60px);
  margin: clamp(60px, 8vw, 120px) 0 20px;
  padding-top: clamp(34px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}
.stats__item { display: flex; flex-direction: column; gap: 12px; }
.stats__figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 92px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.stats dd { margin: 0; }

@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* --- 9 · CLOSING ---------------------------------------------------------- */

.aclose__inner {
  padding-block: var(--sp-band);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.aclose__lines { max-width: min(22ch, 100%); }
.aclose__second { margin-top: clamp(22px, 2.6vw, 36px); color: var(--dim); }
.aclose__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(40px, 5vw, 66px);
}
.aclose__careers { margin-top: clamp(40px, 5vw, 64px); font-size: var(--fs-small); }


/* ==========================================================================
   PERSONALITY — THE FAMILY RECORD
   Sections open like chapters in a bound history: the label above a long
   rule, the statement set large and left, nothing centred.
   ========================================================================== */

[data-page="about"] .sec-head {
  display: block;
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--rule-strong);
  margin-bottom: clamp(56px, 7.5vw, 120px);
}
[data-page="about"] .sec-head > .col-3,
[data-page="about"] .sec-head > .col-8 { grid-column: auto; }
[data-page="about"] .sec-head > .col-3 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(22px, 2.6vw, 38px);
}
[data-page="about"] .sec-head .index { margin-bottom: 0; }
[data-page="about"] .sec-head h2 {
  font-size: clamp(29px, 3.9vw, 60px);
  letter-spacing: -0.032em;
  max-width: min(17ch, 100%);
}

/* the family record — rooms, not materials */
[data-page="about"] .plate { background-image: url("../assets/fields/aperture.svg"); }


/* ==========================================================================
   THE DIRECTORS
   An editorial index, not a staff grid. Each name occupies a full measure of
   the page with the office set small beneath it. No portraits are used
   because none were supplied, and none are invented.
   ========================================================================== */

.directors__head { margin-bottom: clamp(56px, 8vw, 120px); }

.directors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}

.director {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(20px, 4vw, 70px);
  padding-block: clamp(28px, 4.2vw, 62px);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.director__n {
  position: absolute;
  top: clamp(30px, 4.4vw, 66px);
  left: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.director__name {
  margin: 0;
  padding-left: clamp(42px, 5vw, 78px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.director__role {
  color: var(--label-ink);
  white-space: nowrap;
}

.directors__note {
  margin-top: clamp(34px, 4vw, 54px);
  font-size: var(--fs-small);
  max-width: min(56ch, 100%);
}

@media (max-width: 620px) {
  .director { grid-template-columns: 1fr; row-gap: 12px; }
  .director__role { padding-left: clamp(42px, 5vw, 78px); }
}