* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.deslop-about {
  --about-paper: var(--surface-card, #F5F0E8);
  --about-linen: var(--surface-linen, #E8E2D8);
  --about-ground: var(--surface-ground, #E3DCCE);
  --about-ink: var(--text-primary, #2D2A26);
  --about-soft: var(--text-secondary, #5C4A32);
  --about-rule: rgba(107, 94, 80, .72);
  --about-hairline: rgba(92, 74, 50, .24);
  --about-green: var(--green-700, #37671E);
  margin: 0;
  color: var(--about-ink);
  background: var(--about-ground);
  font-family: var(--font-body, 'Golos Text', sans-serif);
  overflow-x: clip;
}

.deslop-about #fs-app-header {
  background: var(--about-paper) !important;
  border-bottom-color: var(--about-hairline) !important;
  box-shadow: 0 3px 14px rgba(45, 42, 38, .07);
}

@media (min-width: 769px) {
  .deslop-about #fs-app-header .community-hub-nav-btn {
    gap: 6px !important;
    padding: 8px 12px !important;
    font-size: 1.02rem !important;
  }

  .deslop-about #fs-app-header .community-hub-nav-btn span { display: inline !important; }

  .deslop-about #fs-app-header .community-hub-nav-btn svg,
  .deslop-about #fs-app-header .community-hub-nav-btn i {
    width: 15px !important;
    height: 15px !important;
  }
}

.about-page { min-height: 100vh; }

/* The hero is carried by the photograph. Motion is limited to a few pixels of
   pointer response and one settled entrance, never a scroll-bound parallax. */
.about-hero {
  --about-hero-x: 0px;
  --about-hero-y: 0px;
  position: relative;
  min-height: clamp(700px, calc(100svh - 58px), 920px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  color: #FDFBF7;
  background: #1C2A19;
  overflow: hidden;
}

.about-hero > img {
  position: absolute;
  inset: -1.5%;
  width: 103%;
  height: 103%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.035) sepia(.025);
  transform: translate3d(var(--about-hero-x), var(--about-hero-y), 0) scale(1.045);
  transform-origin: 50% 48%;
  transition: transform 1400ms cubic-bezier(.2, .75, .2, 1), filter 500ms ease;
  will-change: transform;
}

.about-motion-ready .about-hero > img {
  transform: translate3d(var(--about-hero-x), var(--about-hero-y), 0) scale(1.018);
}

.about-hero::before,
.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about-hero::before {
  background: linear-gradient(180deg,
    rgba(12, 24, 11, .05) 0%,
    rgba(12, 24, 11, .12) 42%,
    rgba(12, 24, 11, .78) 100%);
}

.about-hero::after {
  background: linear-gradient(90deg,
    rgba(10, 22, 9, .45) 0%,
    rgba(10, 22, 9, .14) 55%,
    rgba(10, 22, 9, .03) 100%);
}

.about-hero__copy {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto;
  padding: 76px 0 72px;
}

.about-hero h1 {
  max-width: 880px;
  margin: 0;
  color: #FDFBF7;
  font: 700 clamp(52px, 6.1vw, 82px)/.99 var(--font-display, Georgia, serif);
  letter-spacing: -.047em;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(10, 22, 9, .15);
}

.about-hero__lead {
  max-width: 660px;
  margin: 26px 0 0;
  padding-left: 19px;
  color: rgba(253, 251, 247, .88);
  border-left: 1px solid rgba(244, 217, 140, .78);
  font-size: 17px;
  line-height: 1.68;
  text-wrap: pretty;
}

.about-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform 160ms cubic-bezier(.2, 0, 0, 1), background-color 160ms ease, box-shadow 160ms ease;
}

.about-button:hover { transform: translateY(-1px); }
.about-button:active { transform: translateY(1px); }

.about-button--warm {
  color: var(--about-ink);
  background: #D4A843;
  border-color: #96762D;
  box-shadow: inset 0 -1px #96762D;
}

.about-button--warm:hover { background: #E0BC5E; }

.about-button--dark {
  color: #fff;
  background: var(--about-green);
  border-color: #294D20;
  box-shadow: inset 0 -2px #294D20, 0 1px 2px rgba(45, 42, 38, .12);
}

.about-button--dark:hover {
  background: #477E25;
  box-shadow: inset 0 -2px #294D20, 0 5px 14px rgba(45, 42, 38, .13);
}

/* The manifesto keeps the shipped two-column anatomy. A long, quiet rule and
   different line measures give the two voices an editorial cadence. */
.about-manifesto {
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto;
  padding: clamp(94px, 9vw, 132px) 0 clamp(102px, 10vw, 144px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(68px, 8vw, 118px);
  align-items: start;
}

.about-manifesto__title {
  position: relative;
  padding-right: clamp(48px, 6vw, 84px);
}

.about-manifesto__title::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 0;
  width: 1px;
  height: calc(100% + 12px);
  background: var(--about-rule);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms cubic-bezier(.2, .75, .2, 1) 140ms;
}

.about-manifesto__title.is-revealed::after { transform: scaleY(1); }

.about-manifesto h2 {
  max-width: 8ch;
  margin: 0;
  color: var(--about-ink);
  font: 700 clamp(43px, 5vw, 67px)/1.02 var(--font-display, Georgia, serif);
  letter-spacing: -.043em;
  text-wrap: balance;
}

.about-manifesto__title > p {
  max-width: 34ch;
  margin: 27px 0 0;
  color: var(--about-soft);
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
}

.about-manifesto__copy {
  max-width: 630px;
  padding-top: 8px;
}

.about-manifesto__copy p {
  margin: 0;
  color: var(--about-soft);
  font-size: 18px;
  line-height: 1.82;
  text-wrap: pretty;
}

.about-manifesto__copy p + p { margin-top: 20px; }
.about-manifesto__copy p:last-child { margin-top: 31px; }

/* Three chapters remain a single contact sheet: identical anatomy, varied only
   by the photographs and words already in the record. */
.about-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--about-paper);
  border-top: 1px solid var(--about-rule);
  border-bottom: 1px solid var(--about-rule);
}

.about-panel {
  --about-image-x: 0px;
  --about-image-y: 0px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--about-paper);
  border-right: 1px solid var(--about-rule);
  overflow: hidden;
  transition: background-color 240ms ease;
}

.about-panel:nth-child(3n) { border-right: 0; }
.about-panel:nth-child(n + 4) { border-top: 1px solid var(--about-rule); }
.about-panel:hover { background: #F9F5EE; }

.about-panel > img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  filter: saturate(.86) contrast(1.035) sepia(.025);
  transform: translate3d(var(--about-image-x), var(--about-image-y), 0) scale(1.01);
  transition: transform 700ms cubic-bezier(.2, .75, .2, 1), filter 400ms ease;
  will-change: transform;
}

.about-panel:hover > img {
  filter: saturate(.94) contrast(1.025);
  transform: translate3d(var(--about-image-x), var(--about-image-y), 0) scale(1.035);
}

.about-panel__copy {
  flex: 1 1 auto;
  padding: clamp(30px, 3vw, 44px) clamp(25px, 3vw, 42px) clamp(36px, 4vw, 54px);
  border-top: 1px solid var(--about-hairline);
}

.about-panel h3 {
  max-width: 16ch;
  margin: 0;
  color: var(--about-ink);
  font: 700 clamp(27px, 2.4vw, 34px)/1.11 var(--font-display, Georgia, serif);
  letter-spacing: -.029em;
  text-wrap: balance;
}

.about-panel__copy > p:last-child {
  max-width: 44ch;
  margin: 18px 0 0;
  color: var(--about-soft);
  font-size: 14.5px;
  line-height: 1.76;
  text-wrap: pretty;
}

.about-panel figcaption {
  margin: 0;
  padding: 0 clamp(25px, 3vw, 42px) 20px;
  color: var(--about-soft);
  font: italic 12px/1.55 var(--font-display, Georgia, serif);
}

/* The five-picture field is a deliberate contact sheet, not a collection of
   decorative offsets. The central portrait crop anchors two matched stacks. */
.about-field {
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto;
  padding: clamp(94px, 9vw, 132px) 0 clamp(102px, 10vw, 144px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: clamp(220px, 19vw, 286px) clamp(220px, 19vw, 286px);
  gap: 12px;
  align-items: stretch;
}

.about-field__shot {
  --about-image-x: 0px;
  --about-image-y: 0px;
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  background: var(--about-linen);
  border: 1px solid var(--about-rule);
  overflow: hidden;
}

.about-field__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(253, 251, 247, .16);
}

.about-field__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.04) sepia(.025);
  transform: translate3d(var(--about-image-x), var(--about-image-y), 0) scale(1.012);
  transition: transform 700ms cubic-bezier(.2, .75, .2, 1), filter 400ms ease;
  will-change: transform;
}

.about-field__shot:hover img {
  filter: saturate(.96) contrast(1.025);
  transform: translate3d(var(--about-image-x), var(--about-image-y), 0) scale(1.04);
}

.about-field__shot--wide {
  grid-column: 1 / 6;
  grid-row: 1;
}

.about-field__shot--span {
  grid-column: 1 / 6;
  grid-row: 2;
}

.about-field__shot--tall {
  grid-column: 6 / 10;
  grid-row: 1 / 3;
}

.about-field__shot--inset {
  grid-column: 10 / 13;
  grid-row: 1;
}

.about-field__shot--low {
  grid-column: 10 / 13;
  grid-row: 2;
}

/* Elements remain fully available without JavaScript. The reveal contract only
   activates after about.js has mounted successfully. */
@media (prefers-reduced-motion: no-preference) {
  .about-motion-ready .about-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 720ms cubic-bezier(.2, .75, .2, 1) var(--about-reveal-delay, 0ms),
      transform 820ms cubic-bezier(.2, .75, .2, 1) var(--about-reveal-delay, 0ms);
  }

  .about-motion-ready .about-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.about-photo-error {
  grid-column: 1 / -1;
  padding: 30px;
  color: var(--about-ink);
  background: var(--about-paper);
  border: 1px solid #C4652A;
  border-top-width: 5px;
}

.about-hero > .about-photo-error {
  position: relative;
  z-index: 2;
  width: min(720px, calc(100% - 48px));
  margin: 40px auto 0;
}

.about-photo-error h3 {
  margin: 0 0 10px;
  font: 700 23px/1.2 var(--font-body, sans-serif);
}

.about-photo-error p {
  margin: 0;
  color: var(--about-soft);
  line-height: 1.6;
}

.about-footer {
  background: var(--about-linen);
  border-top: 1px solid var(--about-rule);
}

.about-footer__inner {
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto;
  padding: 28px 0 31px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--about-soft);
  font-size: 12px;
  line-height: 1.55;
}

.about-footer a {
  color: var(--about-green);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(55, 103, 30, .45);
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.about-footer a:hover {
  color: #294D20;
  text-decoration-color: currentColor;
}

@media (max-width: 960px) {
  .about-hero__copy,
  .about-manifesto,
  .about-field,
  .about-footer__inner {
    width: min(100% - 48px, 1240px);
  }

  .about-manifesto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    gap: 52px;
  }

  .about-manifesto__title { padding-right: 44px; }
  .about-panel__copy { padding-inline: 26px; }
}

@media (max-width: 760px) {
  .about-hero {
    min-height: min(720px, calc(100svh - 54px));
    height: 680px;
  }

  .about-hero > img {
    inset: -1%;
    width: 102%;
    height: 102%;
  }

  .about-hero__copy {
    width: calc(100% - 40px);
    padding: 50px 0 45px;
  }

  .about-hero h1 {
    max-width: 9ch;
    font-size: clamp(43px, 12.4vw, 58px);
    line-height: 1;
    letter-spacing: -.043em;
  }

  .about-hero__lead {
    max-width: 34em;
    margin-top: 23px;
    padding-left: 15px;
    font-size: 15px;
    line-height: 1.63;
  }

  .about-manifesto {
    width: calc(100% - 40px);
    padding: 70px 0 78px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-manifesto__title {
    padding: 0 0 35px;
    border-bottom: 1px solid var(--about-rule);
  }

  .about-manifesto__title::after { content: none; }

  .about-manifesto h2 {
    max-width: 9ch;
    font-size: clamp(42px, 12vw, 56px);
  }

  .about-manifesto__title > p {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.68;
  }

  .about-manifesto__copy {
    max-width: none;
    padding-top: 31px;
  }

  .about-manifesto__copy p {
    font-size: 16px;
    line-height: 1.75;
  }

  .about-strip { grid-template-columns: 1fr; }

  .about-panel,
  .about-panel:nth-child(3n) {
    border-right: 0;
    border-bottom: 1px solid var(--about-rule);
  }

  .about-panel:last-child { border-bottom: 0; }
  .about-panel:nth-child(n + 4) { border-top: 0; }
  .about-panel > img { aspect-ratio: 4 / 3; }

  .about-panel__copy {
    min-height: 0;
    padding: 29px 20px 40px;
  }

  .about-panel h3 {
    max-width: 18ch;
    font-size: clamp(27px, 8vw, 33px);
  }

  .about-panel__copy > p:last-child {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.7;
  }

  .about-field {
    width: calc(100% - 32px);
    padding: 72px 0 82px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 168px 168px auto;
    gap: 8px;
  }

  .about-field__shot--wide {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 3 / 2;
  }

  .about-field__shot--tall {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  .about-field__shot--inset {
    grid-column: 2;
    grid-row: 2;
  }

  .about-field__shot--low {
    grid-column: 2;
    grid-row: 3;
  }

  .about-field__shot--span {
    grid-column: 1 / -1;
    grid-row: 4;
    aspect-ratio: 3 / 2;
  }

  .about-footer__inner {
    width: calc(100% - 40px);
    padding: 25px 0 calc(28px + var(--safe-bottom, 0px));
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .about-button--dark { width: 100%; }

  .about-field {
    grid-template-rows: auto minmax(142px, 43vw) minmax(142px, 43vw) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .about-hero > img,
  .about-motion-ready .about-hero > img,
  .about-panel > img,
  .about-panel:hover > img,
  .about-field__shot img,
  .about-field__shot:hover img,
  .about-reveal,
  .about-button,
  .about-footer a,
  .about-manifesto__title::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .about-reveal { opacity: 1 !important; }
  .about-manifesto__title::after { transform: scaleY(1) !important; }
}