/* ==========================================================================
   Subpage-only overrides.

   Everything else on this page is styles.css from the full Dossi site, byte
   for byte, so the three sections that survived look exactly as they do there.
   This file changes four things and nothing more.
   ========================================================================== */

/* 1. The header.
   `.sticky-nav` is built to be a bar that slides in and out of view, so it is
   fixed, translated off-screen and invisible until sticky-nav.js adds `is-in`.
   There is no hero here for it to hide behind, so it is simply always present:
   sticky rather than fixed, so it holds the top of the window while reading but
   can never overlap the copy, and with none of the enter/exit transition. */
.sticky-nav--static {
  position: sticky;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* 2. The first section's top padding.
   `.sec` is spaced for a page that arrives at it after a full-height hero and
   the seam. Landing on it cold, that much air reads as an empty screen, so the
   opening section starts nearer the top. Every section after it is untouched. */
.page > .sec:first-child {
  padding-top: clamp(48px, 6vw, 96px);
}

/* 3. The opening register — take two.
   The first attempt made the heading much bigger and turned the first paragraph
   into a grey deck. Rejected. This goes the other way: the heading stays at
   exactly the size it is, and the opening is marked by weight, tracking and air
   instead of by scale. Scoped to the first section; nothing below it moves.

     - the eyebrow is the thing that announces the page, so on this one section
       it is set a little larger and considerably wider-tracked than the section
       labels further down
     - the heading drops to weight 300 and opens its tracking up. Same size, but
       a lighter, slower voice than the medium-weight card titles below it, which
       is what makes it read as a masthead rather than as another section head
     - more room above the section and under the heading, so the opening has
       space around it without becoming a full title screen (this is a subtab,
       the reader should still see real content in the first view) */
.page > .sec:first-child {
  padding-top: clamp(72px, 8vw, 130px);
}
.page > .sec:first-child .eyebrow {
  font-size: 11.5px;
  letter-spacing: .2em;
}
.page > .sec:first-child .sec-title {
  margin-top: clamp(26px, 3vw, 46px);
  font-weight: 300;
  letter-spacing: -.018em;
}
.page > .sec:first-child .sec-title + .sec-lede {
  margin-top: clamp(28px, 3vw, 44px);
}

/* 4. A slightly larger header.
   On the full site the sticky bar is a secondary thing that slides in over a
   hero, so it is sized to stay out of the way. Here it is the only header the
   page has, and at the hero's numbers it reads a little undersized for that
   job. Everything below is the same geometry scaled up by roughly a sixth -
   the lockup, the divider, the mark and the pill all grow together, so the bar
   keeps the proportions it has on the main site. Scoped to .sticky-nav--static
   so the shared styles.css, and the hero topbar it also serves, are untouched. */
.sticky-nav--static .sticky-nav__in {
  padding: 2.5vw 2.6vw 2.7vw;
}
.sticky-nav--static .topbar-lockup__hh {
  height: clamp(22px, 1.78vw, 28px);
}
.sticky-nav--static .topbar-lockup__divider {
  height: clamp(26px, 2.05vw, 33px);
}
.sticky-nav--static .topbar-lockup__dossi {
  width: clamp(26px, 2.3vw, 36px);
  height: clamp(26px, 2.3vw, 36px);
}
.sticky-nav--static .link-button {
  height: 3.05vw;
  min-height: 40px;
}
.sticky-nav--static .link-button__text {
  padding: 0 1.75vw;
  font-size: .84vw;
}
.sticky-nav--static .link-button__face svg {
  width: 1vw;
  height: 1vw;
  min-width: 15px;
  min-height: 15px;
}
@media (max-width: 700px) {
  .sticky-nav--static .sticky-nav__in { padding: 5vw 5vw 5.4vw; }
  .sticky-nav--static .topbar-lockup__hh { height: 5.2vw; min-height: 21px; }
  .sticky-nav--static .topbar-lockup__divider { height: 6.1vw; min-height: 24px; }
  .sticky-nav--static .topbar-lockup__dossi {
    width: 6.7vw; height: 6.7vw; min-width: 25px; min-height: 25px;
  }
  .sticky-nav--static .link-button { height: 9.9vw; }
  .sticky-nav--static .link-button__text { padding: 0 4.6vw; font-size: 2.8vw; }
  .sticky-nav--static .link-button__face svg { width: 4vw; height: 4vw; }
}