/* The About page is an editorial studio story inside the shared Multideck
   system. It deliberately avoids the reusable feature-page composition. */

.about-page {
  --about-ink: #102b27;
  --about-paper: #f1efe8;
  --about-moss: #dfe7cc;
  background: var(--white);
}

.about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: rgba(16, 43, 39, 0.62);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.about-kicker span {
  display: inline-grid;
  inline-size: 28px;
  block-size: 28px;
  place-items: center;
  border: 1px solid rgba(16, 43, 39, 0.24);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

.about-kicker--dark { color: rgba(255, 255, 255, 0.62); }

.about-kicker--dark span { border-color: rgba(255, 255, 255, 0.26); }

.about-kicker--light { color: rgba(239, 244, 231, 0.62); }

.about-kicker--light span { border-color: rgba(239, 244, 231, 0.25); }

/* --------------------------------------------------------------------- hero */

.about-hero {
  min-block-size: calc(100svh - 72px);
  overflow: clip;
  padding-block: clamp(54px, 6vw, 88px) clamp(64px, 7vw, 100px);
  background: var(--about-paper);
}

.about-hero-head {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1.58fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: start;
}

.about-hero-copy {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.about-hero h1 {
  max-inline-size: 8.2ch;
  color: var(--about-ink);
  font-size: clamp(68px, 9.1vw, 138px);
  font-weight: 520;
  letter-spacing: -0.069em;
  line-height: 0.78;
}

.about-masked-heading {
  position: relative;
  margin: 0;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .about-masked-heading {
    background-image: url("/assets/images/about-heading-backdrop.jpg");
    background-repeat: no-repeat;
    background-position: 42% 44%;
    background-size: 145% auto;
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.about-hero-copy > p {
  max-inline-size: 28ch;
  padding-block-end: 0.35em;
  color: var(--about-ink);
  font-size: clamp(19px, 1.7vw, 25px);
  letter-spacing: -0.026em;
  line-height: 1.35;
}

.about-portrait-rail {
  display: grid;
  grid-template-columns: 1.12fr 0.92fr 0.96fr 0.92fr 1.12fr;
  gap: clamp(8px, 1vw, 15px);
  box-sizing: border-box;
  inline-size: 100%;
  margin-block: clamp(52px, 6vw, 86px) clamp(42px, 5vw, 68px);
  margin-inline: 0;
  padding-inline: clamp(16px, 2.5vw, 40px);
  align-items: end;
}

.about-portrait {
  display: grid;
  min-inline-size: 0;
  gap: 11px;
  margin: 0;
}

.about-portrait--1,
.about-portrait--5 { padding-block-end: clamp(20px, 2.5vw, 38px); }

.about-portrait--2,
.about-portrait--4 { padding-block-end: clamp(2px, 0.6vw, 9px); }

.about-portrait--3 { padding-block-end: clamp(28px, 3.8vw, 58px); }

.about-portrait-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: clamp(9px, 1vw, 14px);
  background: #d5d2c8;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-portrait--1 .about-portrait-frame,
.about-portrait--5 .about-portrait-frame { aspect-ratio: 0.88; }

.about-portrait img {
  display: block;
  inline-size: 100%;
  block-size: 108%;
  object-fit: cover;
  object-position: var(--portrait-position);
  filter: saturate(0.83) contrast(1.035);
  transform: translateY(-4%) scale(1.01);
  transition: filter 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-portrait-placeholder {
  display: grid;
  block-size: 100%;
  padding: 24px;
  place-content: center;
  gap: 12px;
  background: var(--about-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: rgba(241, 239, 232, 0.72);
  text-align: center;
}

.about-portrait-placeholder strong {
  color: var(--about-paper);
  font-size: clamp(38px, 4.6vw, 72px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
}

.about-portrait-placeholder span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-portrait figcaption {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--about-ink);
  font-size: 12px;
  font-weight: 590;
  letter-spacing: -0.01em;
}

.about-portrait figcaption > span:first-child {
  color: rgba(16, 43, 39, 0.46);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.about-portrait-person {
  display: grid;
  gap: 2px;
}

.about-portrait-person strong {
  font: inherit;
}

.about-portrait-person small {
  color: rgba(16, 43, 39, 0.58);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

.about-portrait:hover img {
  filter: saturate(1) contrast(1.02);
  transform: translateY(-4%) scale(1.045);
}

.about-portrait:hover .about-portrait-frame { transform: translateY(-4px); }

.about-hero-foot {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(36px, 8vw, 132px);
  align-items: end;
}

.about-hero-foot > p {
  max-inline-size: 49ch;
  color: rgba(16, 43, 39, 0.72);
  font-size: 15px;
  line-height: 1.58;
}

.about-text-link {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  justify-self: end;
  gap: 9px;
  color: var(--about-ink);
  font-size: 14px;
  font-weight: 580;
  text-decoration: underline;
  text-decoration-color: rgba(16, 43, 39, 0.3);
  text-underline-offset: 0.24em;
}

.about-text-link:hover,
.about-text-link:focus-visible { text-decoration-color: currentColor; }

/* --------------------------------------------------------------- origin flow */

.about-origin {
  padding-block: clamp(96px, 12vw, 180px);
  background: var(--about-ink);
  color: var(--white);
}

.about-origin-grid { display: grid; }

.about-origin-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(28px, 4vw, 48px);
  margin-block-start: clamp(70px, 9vw, 132px);
  align-items: start;
  text-align: center;
}

.about-origin h2,
.about-beliefs h2,
.about-close h2 {
  margin: 0;
  font-size: clamp(50px, 6.7vw, 96px);
  font-weight: 520;
  letter-spacing: -0.059em;
  line-height: 0.96;
  text-wrap: balance;
}

.about-origin h2 { max-inline-size: 15ch; }

.about-origin-copy {
  display: grid;
  max-inline-size: 58ch;
  justify-self: center;
  gap: 24px;
  padding-block-start: 0;
  color: rgba(255, 255, 255, 0.69);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.64;
}

.about-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: clamp(92px, 11vw, 168px) 0 0;
  padding: 0;
  list-style: none;
}

.about-flow li {
  position: relative;
  display: grid;
  gap: 9px;
  min-inline-size: 0;
  padding-block-start: 27px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 560;
}

.about-flow li::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline: 0;
  block-size: 1px;
  background: rgba(223, 231, 204, 0.52);
}

.about-flow li:first-child::before { inset-inline-start: 9px; }

.about-flow li:last-child::before { inset-inline-end: calc(100% - 9px); }

.about-flow-dot {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: 13px;
  block-size: 13px;
  border: 1px solid var(--about-moss);
  border-radius: 50%;
  background: var(--about-ink);
  box-shadow: 0 0 0 5px var(--about-ink);
}

.about-flow-index {
  color: rgba(223, 231, 204, 0.44);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
}

.about-origin-answer {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  gap: clamp(50px, 9vw, 142px);
  margin-block-start: clamp(76px, 9vw, 132px);
  padding-block-start: clamp(42px, 5vw, 72px);
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}

.about-origin-mark {
  margin: 0;
  color: var(--about-moss);
  font-size: clamp(72px, 10vw, 148px);
  font-weight: 430;
  letter-spacing: -0.07em;
  line-height: 0.8;
}

.about-origin-answer > div {
  display: grid;
  max-inline-size: 56ch;
  gap: 22px;
}

.about-origin-answer h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(36px, 4.1vw, 58px);
  font-weight: 520;
  letter-spacing: -0.05em;
  line-height: 1;
}

.about-origin-answer p:last-child {
  color: rgba(255, 255, 255, 0.67);
  font-size: 17px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ beliefs */

.about-beliefs {
  padding-block: clamp(96px, 12vw, 180px);
  background: #0a1715;
  color: #eff4e7;
}

.about-beliefs-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(420px, 0.92fr);
  gap: clamp(56px, 7vw, 110px);
  align-items: start;
}

.about-beliefs-intro {
  position: sticky;
  inset-block-start: 116px;
  display: grid;
  gap: clamp(36px, 5vw, 72px);
}

.about-beliefs h2 {
  max-inline-size: 13.5ch;
  font-size: clamp(48px, 5.8vw, 82px);
}

.about-beliefs-intro > p:last-child {
  max-inline-size: 38ch;
  color: rgba(239, 244, 231, 0.62);
  font-size: 16px;
  line-height: 1.62;
}

.about-belief-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-belief {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 42px);
  min-block-size: clamp(260px, 30vw, 380px);
  padding-block: clamp(46px, 6vw, 78px);
  border-block-start: 1px solid rgba(239, 244, 231, 0.18);
  align-content: center;
}

.about-belief:last-child { border-block-end: 1px solid rgba(239, 244, 231, 0.18); }

.about-belief-index {
  padding-block-start: 0.5em;
  color: rgba(223, 231, 204, 0.48);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.about-belief > div {
  display: grid;
  gap: 22px;
}

.about-belief h3 {
  max-inline-size: 13ch;
  margin: 0;
  color: #eff4e7;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 510;
  letter-spacing: -0.048em;
  line-height: 1.02;
  text-wrap: balance;
}

.about-belief p {
  max-inline-size: 46ch;
  color: rgba(239, 244, 231, 0.6);
  font-size: 16px;
  line-height: 1.62;
}

/* -------------------------------------------------------------------- close */

.about-close {
  padding-block: clamp(96px, 12vw, 180px);
  background: var(--about-moss);
  color: var(--about-ink);
}

.about-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr);
  gap: clamp(72px, 11vw, 176px);
  align-items: end;
}

.about-close-copy {
  display: grid;
  justify-items: start;
  gap: 32px;
}

.about-close h2 { max-inline-size: 9.5ch; }

.about-close-copy > p {
  max-inline-size: 42ch;
  color: rgba(16, 43, 39, 0.7);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
}

.about-close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 8px;
}

.about-close .btn-line {
  border-color: rgba(16, 43, 39, 0.28);
  color: var(--about-ink);
}

.about-close-guide {
  display: grid;
  inline-size: 100%;
  max-inline-size: 460px;
  gap: 28px;
  justify-self: end;
}

.about-close-guide > div {
  display: grid;
  gap: 10px;
}

.about-close-guide > div > p {
  margin: 0;
  color: rgba(16, 43, 39, 0.56);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-close-guide h3 {
  max-inline-size: 14ch;
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.about-close-guide ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid rgba(16, 43, 39, 0.2);
}

.about-close-guide li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding-block: 17px;
  border-block-start: 1px solid rgba(16, 43, 39, 0.2);
  align-items: baseline;
}

.about-close-guide li span {
  color: rgba(16, 43, 39, 0.46);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.about-close-guide li strong {
  font-size: 14px;
  font-weight: 560;
  line-height: 1.35;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .about-hero-head,
  .about-origin-story,
  .about-origin-answer,
  .about-beliefs-grid,
  .about-close-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-hero-head { gap: 42px; }

  .about-hero-copy { grid-column: auto; }

  .about-beliefs-intro {
    position: static;
    margin-block-end: 14px;
  }

  .about-beliefs h2 { max-inline-size: 13ch; }

  .about-origin-answer > div { justify-self: end; }

  .about-origin-mark { font-size: clamp(72px, 16vw, 128px); }

  .about-close-copy { max-inline-size: 760px; }

  .about-close-guide {
    max-inline-size: 760px;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .about-hero {
    min-block-size: 0;
    padding-block: 44px 72px;
  }

  .about-hero-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .about-hero h1 {
    font-size: clamp(64px, 20vw, 96px);
    line-height: 0.82;
  }

  .about-hero-copy > p { max-inline-size: 30ch; padding: 0; }

  .about-portrait-rail {
    display: flex;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block: 46px 44px;
    margin-inline-start: 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    align-items: start;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .about-portrait-rail::-webkit-scrollbar { display: none; }

  .about-portrait,
  .about-portrait--1,
  .about-portrait--2,
  .about-portrait--3,
  .about-portrait--4,
  .about-portrait--5 {
    flex: 0 0 min(72vw, 280px);
    padding-block-end: 0;
    scroll-snap-align: start;
  }

  .about-portrait-frame,
  .about-portrait--1 .about-portrait-frame,
  .about-portrait--5 .about-portrait-frame { aspect-ratio: 4 / 5; }

  .about-hero-foot { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  .about-text-link { justify-self: start; }

  .about-origin-story { margin-block-start: 62px; gap: 36px; }

  .about-origin h2,
  .about-beliefs h2,
  .about-close h2 { font-size: clamp(46px, 13vw, 68px); }

  .about-flow {
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: 72px;
    padding-inline-start: 2px;
  }

  .about-flow li {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    min-block-size: 70px;
    padding: 0 0 20px 30px;
    align-items: start;
  }

  .about-flow li::before {
    inset-block: 7px 0;
    inset-inline: 6px auto;
    inline-size: 1px;
    block-size: auto;
  }

  .about-flow li:first-child::before { inset-inline-start: 6px; }

  .about-flow li:last-child::before { inset-block-end: calc(100% - 7px); inset-inline-end: auto; }

  .about-flow-dot { inset-block-start: 1px; inset-inline-start: 0; }

  .about-flow-index { grid-column: 1; }

  .about-flow li > span:last-child { grid-column: 2; grid-row: 1; }

  .about-origin-answer { margin-block-start: 34px; gap: 38px; }

  .about-beliefs-grid { gap: 44px; }

  .about-beliefs-intro { gap: 34px; }

  .about-belief {
    grid-template-columns: 42px minmax(0, 1fr);
    min-block-size: 0;
    padding-block: 52px;
  }

  .about-belief h3 { font-size: clamp(34px, 10vw, 48px); }

  .about-close-grid { gap: 54px; }
}

@media (hover: none) {
  .about-portrait:hover .about-portrait-frame { transform: none; }

  .about-portrait:hover img {
    filter: saturate(0.83) contrast(1.035);
    transform: translateY(-4%) scale(1.01);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .about-masked-heading[data-shown="true"] {
      animation: about-heading-drift 12s ease-in-out 900ms infinite alternate;
    }
  }

  @supports (animation-timeline: view()) {
    .about-portrait img {
      animation: about-portrait-drift linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes about-heading-drift {
  from { background-position: 38% 40%; }
  to { background-position: 62% 58%; }
}

@keyframes about-portrait-drift {
  from { transform: translateY(-6%) scale(1.025); }
  to { transform: translateY(-1%) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .about-masked-heading { animation: none; }

  .about-portrait img,
  .about-portrait:hover img {
    animation: none;
    transition: none;
    transform: translateY(-4%) scale(1.01);
  }

  .about-portrait-frame,
  .about-portrait:hover .about-portrait-frame {
    transition: none;
    transform: none;
  }
}