/* About Us hero: sit on the same wrap as the letter below, and use the
   house header (logo, Menu, Book Now) instead of the artboard chrome. */

/* One left/right inset for the house header AND the hero copy: the page wrap's
   inset (so logo, headline and the letter below share an edge) but never more
   than 8.9cqw. Past that the copy column would run into the photograph, whose
   arch starts at 36.2cqw of the full-bleed artboard: at 8.9cqw the lead's right
   edge already sits within 0.3cqw of it (that is the 1440px fit). Wider screens
   therefore keep the hero aligned with itself, as in the comp, and the letter's
   wrap steps in a little further. The header is made an inline-size container
   so its cqw is the same width the hero's cqw measures. */
.r3-page.c12 {
  --hx-inset: min(calc((100% - min(100%, var(--wrap))) / 2 + var(--pad)), 8.9cqw);
}

.r3-page.c12 .site-header {
  color: var(--pine);
  container-type: inline-size;
}

.r3-page.c12 .site-header__inner {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--hx-inset);
  height: auto;
  min-height: 0;
  padding-top: 18px;
  padding-bottom: 18px;
  align-items: flex-start;
}

.r3-page.c12 .site-header__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.r3-page.c12 .site-header__logo {
  width: clamp(108px, 11vw, 148px);
  align-self: flex-start;
  margin-top: 0;
  filter: none;
}

.r3-page.c12 .site-header__tagline {
  position: relative;
  margin: 0;
  padding-right: 48px;
  font: 11px/1.35 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3d4b41;
  white-space: nowrap;
}

.r3-page.c12 .site-header__tagline::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 36px;
  height: 1px;
  margin: 0;
  background: #bc8463;
}

.r3-page.c12 .menu-button {
  height: 50px;
  min-height: 50px;
  padding: 0 20px;
  color: var(--pine);
  background: rgba(255, 253, 248, .55);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(29, 57, 47, .45);
  backdrop-filter: blur(10px);
  font-family: var(--body);
  font-size: .91rem;
  letter-spacing: .02em;
}

.r3-page.c12 .menu-button:hover {
  background: rgba(255, 253, 248, .88);
}

.r3-page.c12 .site-header .pill--ochre {
  color: #fffdf8;
  background: #b86e3f;
  border: 0;
  box-shadow: 0 8px 24px rgba(61, 30, 15, .17);
  font-family: var(--body);
  font-size: .91rem;
  letter-spacing: .02em;
}

.r3-page.c12 .site-header .pill--ochre:hover {
  background: #925331;
}

/* Copy column lines up with `.wrap` used by the sections below. */
.hx {
  --hx-head: clamp(120px, 14vw, 164px);
  --hx-air: var(--pad);
  /* --hx-inset is inherited from .r3-page.c12 above. */
}

@media (min-width: 901px) {
  /* Original Keepsake header sits in the cream ABOVE the photo: ~18px from
     the top, 50px pills, ~18px to the photo. Do not drop the pills onto the image. */

  /* The section ends on the photograph's flat bottom edge (artboard row 755 of
     941). Everything the art has below that row is paper, the erased stamp's
     paper rectangle and the branch's fade-out, which read as dead space and a
     second image under the hero. The artboard keeps its own 1672x941 geometry
     (every layer is placed in % of it, and the photo layer must stay at
     66.8062cqw so it sits exactly on the copy baked into bg.webp); the section
     is simply shorter than the artboard and clips it. min-height:0 stops the
     aspect-ratio box from growing to fit the taller artboard. */
  .hx {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1672 / 754;
    padding-top: 0;
    padding-bottom: 0 !important;
    overflow: clip;
  }
  .hx .hx__canvas {
    margin-block: 0;
    aspect-ratio: 1672 / 941;
  }

  .hx .hx__h1,
  .c12 main .hx .hx__h1 {
    left: var(--hx-inset);
    font-size: 5.35cqw;
    line-height: .9;
    letter-spacing: -.04cqw;
  }

  .hx .hx__lead {
    left: var(--hx-inset);
    max-width: 28cqw;
    white-space: normal;
  }

  .hx .hx__cta--fill {
    left: var(--hx-inset);
  }

  .hx .hx__cta--line {
    left: calc(var(--hx-inset) + 16.9cqw);
  }
}

/* The letter now starts on the photograph's edge instead of the artboard's
   empty bottom (and, on phones, on the branch), so the 200px of paper it was
   given in origin-live.css comes down to the scale of the other section gaps. */
.r3-page.c12 #story .fs2w {
  padding-top: clamp(64px, 8.4vw, 120px);
}

@media (max-width: 900px) {
  /* Stacked layout. The house header is absolute over the top: 18px + logo
     (clamp 108-148px) + 18px, so the canvas starts below it plus a beat. */
  .hx .hx__canvas {
    padding-top: calc(clamp(108px, 11vw, 148px) + 36px + 22px);
  }
  /* hero.css's phone rule for the headline is `.hx .hx__h1` (0,2,0) and loses
     to its own desktop `.c12 main .hx .hx__h1` (0,3,1), which sets the artboard
     size (6.79cqw = 26px on a 390px phone). Restate the phone size at the
     winning specificity. */
  .hx .hx__h1,
  .c12 main .hx .hx__h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.02em;
  }
  .r3-page.c12 .site-header__tagline {
    display: none;
  }
}