/* ==========================================================================
   Onesto Studio — About page
   Builds on styles.css (tokens, menu, reveal). This design introduces its own
   header bar (inline nav) and footer, styled here as --bar variants.
   Desktop sizes are design pixels on a 1366px artboard, via var(--u).
   ========================================================================== */

.page-about {
  --header-h: calc(96 * var(--u));
  --header-h-condensed: calc(96 * var(--u));
  --wordmark: #704835;
}

/* ---------- Header bar ---------- */

.site-header--bar,
.site-header--bar.is-condensed { height: var(--header-h); }
.site-header--bar .menu-toggle { display: none; }

.bar-logo {
  position: absolute;
  left: calc(34 * var(--u));
  top: calc(36 * var(--u));
  font-family: var(--serif);
  font-size: calc(31 * var(--u));
  font-weight: 500;
  line-height: calc(31 * var(--u));
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bar-nav {
  position: absolute;
  right: calc(51 * var(--u));
  top: calc(44.5 * var(--u));
  display: flex;
  gap: calc(66.5 * var(--u));
  font-size: max(11px, calc(13 * var(--u)));
  font-weight: 400;
  line-height: calc(14 * var(--u));
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bar-nav a,
.bar-footer a {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .4s var(--ease);
}
.bar-nav a:hover,
.bar-nav a[aria-current="page"],
.bar-footer a:hover { background-size: 100% 1px; }

/* ---------- Hero ---------- */

.abt-hero {
  position: relative;
  height: calc(768 * var(--u));
  overflow: hidden;
  background: var(--black);
}
.abt-hero__bg {
  position: absolute;
  inset: var(--header-h) 0 0;
  background: #120806 url("../images/about-hero-chest.jpg") 0 75.5% / 119.4% auto no-repeat;
}
.abt-hero__copy {
  position: absolute;
  left: calc(77 * var(--u));
  top: calc(558 * var(--u));
}
.abt-hero__eyebrow {
  font-size: max(11px, calc(15 * var(--u)));
  font-weight: 400;
  line-height: calc(15 * var(--u));
  letter-spacing: .28em;
  text-transform: uppercase;
}
.abt-hero__title {
  margin-top: calc(19.5 * var(--u));
  font-family: var(--serif);
  font-size: calc(44 * var(--u));
  font-weight: 400;
  line-height: calc(48 * var(--u));
  letter-spacing: .025em;
  text-transform: uppercase;
}

/* ---------- Two emblems ---------- */

.emblems {
  background: var(--cream);
  color: var(--maroon);
}
.emblems__title {
  height: calc(120 * var(--u));
  padding-top: calc(43 * var(--u));
  font-family: var(--serif);
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: calc(36 * var(--u));
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
}
.emblems__band {
  display: flex;
  justify-content: center;
  height: calc(318 * var(--u));
  background: var(--maroon);
}
.emblems__band img {
  width: calc(795 * var(--u));
  height: 100%;
  object-fit: cover;
}

.emblems__cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(330 * var(--u));
}
.emblems__cols::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(52 * var(--u));
  width: 1px;
  height: calc(226 * var(--u));
  background: rgba(69, 23, 27, .6);
}

.emblem--key { padding-left: calc(36 * var(--u)); }
.emblem--sun { padding-right: calc(41 * var(--u)); text-align: right; }

.emblem__icon { display: block; height: auto; }
.emblem--key .emblem__icon { width: calc(102 * var(--u)); margin-top: calc(47 * var(--u)); }
.emblem--sun .emblem__icon { width: calc(83 * var(--u)); margin: calc(16.5 * var(--u)) 0 0 auto; }

.emblem__name {
  font-family: var(--serif);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: calc(22 * var(--u));
  letter-spacing: .2em;
  text-transform: uppercase;
}
.emblem--key .emblem__name { margin-top: calc(39 * var(--u)); }
.emblem--sun .emblem__name { margin-top: calc(48.5 * var(--u)); margin-right: -.2em; }

.emblem__tagline {
  font-size: max(11px, calc(14 * var(--u)));
  font-style: italic;
  font-weight: 400;
  line-height: calc(14 * var(--u));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
}
.emblem--key .emblem__tagline { margin-top: calc(40 * var(--u)); }
.emblem--sun .emblem__tagline { margin-top: calc(39.5 * var(--u)); }

.emblem__text {
  margin-top: calc(39.5 * var(--u));
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 400;
  line-height: calc(25 * var(--u));
  letter-spacing: .05em;
  color: var(--black);
}

/* ---------- Story sections (philosophy / think / work) ---------- */

.story {
  display: grid;
  overflow: hidden;
}
.story--maroon { background: var(--maroon); }
.story--black { background: var(--black); }

#philosophy { grid-template-columns: calc(772 * var(--u)) calc(508 * var(--u)) 1fr; height: calc(537 * var(--u)); }
#how-we-think { grid-template-columns: calc(35 * var(--u)) calc(427 * var(--u)) 1fr; height: calc(570 * var(--u)); }
#how-we-work { grid-template-columns: calc(856 * var(--u)) calc(432 * var(--u)) 1fr; height: calc(570 * var(--u)); }

.story--media-left .story__media { grid-column: 2; }
.story--media-left .story__copy { grid-column: 3; padding-left: calc(45 * var(--u)); }
.story--media-right .story__copy { padding-left: calc(77 * var(--u)); }

.story__media { overflow: hidden; }
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
#philosophy .story__media img { object-position: 50% 62%; }
#how-we-work .story__media img { object-position: 50% 66%; }
.story:hover .story__media img { transform: scale(1.025); }

.story__copy { padding-top: calc(80 * var(--u)); }

.story__eyebrow {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  font-size: max(11px, calc(16 * var(--u)));
  font-weight: 400;
  line-height: calc(16 * var(--u));
  letter-spacing: .225em;
  text-transform: uppercase;
}
.story__eyebrow::before {
  content: "";
  width: calc(44 * var(--u));
  height: 1px;
  background: var(--cream);
}

.story__title {
  margin-top: calc(44 * var(--u));
  font-family: var(--serif);
  font-size: calc(48 * var(--u));
  font-weight: 400;
  line-height: calc(57 * var(--u));
  text-transform: uppercase;
}

.story__copy p:not(.story__eyebrow) {
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 300;
  line-height: calc(25 * var(--u));
  letter-spacing: .045em;
}
.story__title + p { margin-top: calc(42 * var(--u)); }
.story__copy p + p { margin-top: calc(23.5 * var(--u)); }
.story__copy em {
  font-weight: 400;
  letter-spacing: .065em;
}

/* ---------- Marble quote ---------- */

.marble-quote {
  height: calc(94 * var(--u));
  padding: calc(39 * var(--u)) 24px 0;
  background: #e6d9c6 url("../images/about-marble.jpg") 50% 79.5% / 100% auto no-repeat;
  color: var(--maroon);
  text-align: center;
}
.marble-quote p {
  font-size: calc(26 * var(--u));
  font-style: italic;
  font-weight: 400;
  line-height: calc(26 * var(--u));
  letter-spacing: .045em;
}

/* ---------- Wordmark ---------- */

.wordmark {
  height: calc(506 * var(--u));
  padding-top: calc(50 * var(--u));
  overflow: hidden;
  background: var(--maroon);
  color: var(--wordmark);
  font-family: var(--serif);
  font-weight: 400;
  line-height: calc(209.5 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.wordmark__line { display: block; letter-spacing: .1em; }
.wordmark__line--1 { margin-left: calc(40.5 * var(--u)); font-size: calc(255 * var(--u)); }
.wordmark__line--2 { margin-left: calc(219.5 * var(--u)); font-size: calc(268.5 * var(--u)); }

/* ---------- Footer ---------- */

.bar-footer {
  border-top: calc(2 * var(--u)) solid rgba(252, 242, 224, .7);
  background: var(--maroon);
}
.bar-footer__main {
  display: grid;
  grid-template-columns: calc(311 * var(--u)) calc(311 * var(--u)) 1fr;
  height: calc(233 * var(--u));
  padding: calc(23.5 * var(--u)) calc(45 * var(--u)) 0 calc(48 * var(--u));
}
.bar-footer__heading {
  font-family: var(--sans);
  font-size: max(13px, calc(17 * var(--u)));
  font-weight: 500;
  line-height: calc(20 * var(--u));
  letter-spacing: .2em;
  text-transform: uppercase;
}
.bar-footer__col ul { margin-top: calc(24 * var(--u)); }
.bar-footer__col li + li { margin-top: calc(20.5 * var(--u)); }
.bar-footer__col a {
  font-size: max(12px, calc(14 * var(--u)));
  font-style: italic;
  line-height: calc(20 * var(--u));
  letter-spacing: .02em;
}

.bar-footer__col--cta { text-align: right; }
.bar-footer__col--cta .bar-footer__heading { margin-right: -.2em; }
.bar-footer__col--cta ul { margin-top: calc(28 * var(--u)); }
.bar-footer__col--cta li + li { margin-top: calc(18.5 * var(--u)); }
.bar-footer__col--cta a {
  font-size: max(11px, calc(13.5 * var(--u)));
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bar-footer__bar {
  display: grid;
  place-items: center;
  height: calc(49 * var(--u));
  border-top: calc(2 * var(--u)) solid rgba(252, 242, 224, .55);
  font-family: var(--serif);
  font-size: max(11px, calc(14.5 * var(--u)));
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ==========================================================================
   Tablet & mobile
   ========================================================================== */

@media (max-width: 1023.98px) {
  .page-about {
    --header-h: 64px;
    --header-h-condensed: 64px;
  }

  .bar-logo { left: var(--gutter); top: 21px; font-size: 22px; line-height: 22px; }
  .bar-nav { display: none; }
  .site-header--bar .menu-toggle { display: block; left: auto; right: var(--gutter); top: 20px; }
  .site-header--bar.is-condensed .menu-toggle { top: 20px; }

  /* The chest photo is only 1672px wide, so it is drawn at about one photo pixel per screen
     pixel (even on 3x phones) to stay sharp, with the copy below it rather than over it. */
  .abt-hero { height: auto; padding-top: var(--header-h); }
  .abt-hero__bg {
    position: relative;
    inset: auto;
    height: clamp(280px, 82vw, 520px);
    background-size: cover;
    background-position: 61% 100%;
  }
  .abt-hero__bg::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 25%;
    background: linear-gradient(rgba(0, 0, 0, 0), var(--black));
  }
  .abt-hero__copy { position: relative; inset: auto; margin-top: -20px; padding: 0 var(--gutter) 56px; }
  .abt-hero__eyebrow { font-size: 12px; }
  .abt-hero__title { margin-top: 16px; font-size: clamp(32px, 8vw, 44px); line-height: 1.1; }

  .emblems__title { height: auto; padding: 48px var(--gutter) 32px; font-size: clamp(26px, 6vw, 36px); line-height: 1.15; }
  .emblems__band { height: auto; }
  .emblems__band img { width: min(100%, 795px); height: auto; aspect-ratio: 795 / 318; }
  .emblems__cols { grid-template-columns: 1fr; height: auto; padding: 0 var(--gutter) 56px; }
  .emblems__cols::before { display: none; }
  .emblem--key,
  .emblem--sun { padding: 0; text-align: left; }
  .emblem--sun { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(69, 23, 27, .35); }
  .emblem--key .emblem__icon { width: 96px; margin-top: 40px; }
  .emblem--sun .emblem__icon { width: 72px; margin: 20px 0 0; }
  .emblem__name { font-size: 19px; line-height: 1.3; letter-spacing: .16em; }
  .emblem--key .emblem__name { margin-top: 24px; }
  .emblem--sun .emblem__name { margin: 0; }
  .emblem--key .emblem__tagline,
  .emblem--sun .emblem__tagline { margin-top: 16px; font-size: 12px; line-height: 1.5; }
  .emblem__text { margin-top: 16px; font-size: 15px; line-height: 1.6; }

  #philosophy,
  #how-we-think,
  #how-we-work { grid-template-columns: 1fr; height: auto; }
  .story--media-left .story__media,
  .story--media-left .story__copy { grid-column: auto; }
  .story__copy,
  .story--media-left .story__copy,
  .story--media-right .story__copy { padding: 56px var(--gutter) 64px; }
  .story__media { aspect-ratio: 4 / 5; max-height: 80vh; }
  .story__eyebrow { font-size: 12px; gap: 14px; }
  .story__eyebrow::before { width: 32px; }
  .story__title { margin-top: 24px; font-size: clamp(30px, 6.4vw, 48px); line-height: 1.12; }
  .story__title + p { margin-top: 24px; }
  .story__copy p + p { margin-top: 16px; }
  .story__copy p:not(.story__eyebrow) { font-size: 15px; line-height: 1.6; letter-spacing: .02em; }

  .marble-quote { height: auto; padding: 28px var(--gutter); background-size: cover; }
  .marble-quote p { font-size: clamp(17px, 3.6vw, 24px); line-height: 1.4; letter-spacing: .02em; }

  .wordmark { height: auto; padding: 28px 0 36px; line-height: .86; }
  .wordmark__line { letter-spacing: .02em; }
  .wordmark__line--1 { margin-left: 3vw; font-size: 22vw; }
  .wordmark__line--2 { margin-left: 9vw; font-size: 23vw; }

  .bar-footer { border-top-width: 1px; }
  .bar-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
    height: auto;
    padding: 40px var(--gutter) 44px;
  }
  .bar-footer__col--cta { grid-column: 1 / -1; text-align: left; }
  .bar-footer__col--cta .bar-footer__heading { margin-right: 0; }
  .bar-footer__heading { font-size: 14px; }
  .bar-footer__col ul,
  .bar-footer__col--cta ul { margin-top: 14px; }
  .bar-footer__col li + li,
  .bar-footer__col--cta li + li { margin-top: 12px; }
  .bar-footer__col a { font-size: 15px; line-height: 1.4; }
  .bar-footer__col--cta a { font-size: 13px; }
  .bar-footer__bar { height: auto; padding: 16px var(--gutter); border-top-width: 1px; font-size: 12px; letter-spacing: .1em; text-align: center; }
}