/* =========================================================================
   Layout: mobile first
   The page opens on a full-height screen — the header, then the picture
   with the SOLUM name the full width across its foot, standing on a rule,
   and under the rule the line on the series and the way in — and
   continues into the sections below it.
   Phone        < 40rem   the line and the way in one above the other
   Wider        ≥ 40rem   the two under the rule, one at each end; the
                          slider on the right-hand edge of the screen
   Short        landscape phones: compact, nothing clipped, no slider
   The page scrolls if content is ever taller than the screen. Nothing is
   hidden behind overflow: hidden.
   ========================================================================= */

.page {
  position: relative;
  z-index: var(--z-page);
  display: flex;
  flex-direction: column;
  min-height: 100svh;   /* the opening screen holds the full viewport */
  padding:
    calc(var(--gutter) * 0.8 + var(--safe-top))
    calc(var(--gutter) + var(--safe-right))
    calc(var(--gutter) * 0.8 + var(--safe-bottom))
    calc(var(--gutter) + var(--safe-left));
}

/* ---- Header ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ---- Main ---- */
.main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* The opening screen: the picture, and low across the foot of it the
   SOLUM name, the full width of the page, standing on a rule; under the
   rule, the line on the series at one end and the way in at the other.
   The picture leads; the name is the one thing set on it. The time until
   pre-orders open is in the announcement below.

   The block fills the screen under the header, and its first row takes
   whatever height is left, so the name sits as low as the foot allows. */
.launch {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto;
  grid-template-areas:
    "light"
    "hero"
    "about"
    "cta";
}

/* the name, the full width, its foot just clear of the rule */
.hero {
  grid-area: hero;
  margin-bottom: clamp(var(--space-5), 3vh, var(--space-6));
}

/* the rule the name stands on */
.launch::before {
  content: "";
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: start;
  height: 1px;
  background: var(--c-hairline);
}

/* ---- What the series is, under the rule ----
   In the page's small voice, so it reads as an aside to the name rather
   than a second headline. */
.launch__about {
  grid-area: about;
  /* wide enough that the paragraph runs to two lines, and no more */
  max-width: 34rem;
  padding-top: var(--space-5);
  color: var(--c-ink-2);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.55);   /* over the picture */
}

.launch__about p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  text-wrap: balance;
}

/* the way in: on to Choose your SOLUM, to begin building */
.launch__cta {
  grid-area: cta;
  margin-top: var(--space-5);
}

/* the slider, top right of the picture */
.daylight {
  grid-area: light;
  align-self: start;
}

/* ---- Wider: the line and the way in share the space under the rule,
   one at each end; the slider leaves the flow for the right-hand edge of
   the screen ---- */
@media (min-width: 40rem) {
  .launch {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
      ".     ."
      "hero  hero"
      "about cta";
    column-gap: var(--space-7);
  }

  /* the paragraph and the button level with each other: both clear the
     rule by the same amount, and are centred on one another */
  .launch__about {
    align-self: center;
  }

  .launch__cta {
    align-self: center;
    justify-self: end;
    margin-top: 0;
    padding-top: var(--space-5);
  }

  .daylight {
    position: absolute;
    right: 0;
    top: 36%;
    translate: 0 -50%;
  }
}

/* ---- Short landscape phones ---- */
@media (orientation: landscape) and (max-height: 30rem) {
  /* no room for the slider in a screen this short */
  .daylight {
    display: none;
  }
}

/* ---- The page's footer, below everything ----
   The rule sits inside the gutters, as every other hairline on the page
   does, so it is carried by the paragraph rather than the footer box. */
.site-footer {
  margin-top: var(--section-pad);
  padding: 0 var(--gutter-safe) calc(var(--space-5) + var(--safe-bottom));
  color: var(--c-ink-4);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
}

.site-footer > p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-hairline);
}

/* After the questions, the last section, whose own padding already
   leaves the air above the footer: no second gap on top of it. (Not
   directly after: the tray, which is fixed, sits between them.) */
.faq ~ .site-footer {
  margin-top: 0;
}

/* The way to the privacy policy (and, on that page, back): there to be
   found, as quiet as the line it sits on until the pointer reaches it. */
.site-footer__link {
  color: var(--c-ink-4);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

@media (hover: hover) {
  .site-footer__link:hover {
    color: var(--c-ink-2);
  }
}

.site-footer__link:focus-visible {
  outline: 1px solid var(--c-led-core);
  outline-offset: 3px;
}

/* =========================================================================
   The full footer (the home page; the privacy page keeps the line above)

   A quiet sign-off: the mark, a line and the way to the form; the page's
   sections; how to reach the company. Under them the
   legal line, in the footer's own small mono. Columns from 64rem, two by two from 40rem, stacked below.
   ========================================================================= */
.site-footer--full {
  padding-top: var(--section-pad);
  border-top: 1px solid var(--c-hairline);
  margin-inline: var(--gutter-safe);
  padding-inline: 0;
}

.footer__grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
  padding-bottom: var(--block-gap);
}

@media (min-width: 40rem) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .footer__grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; }
}

/* the HAAVN BLACK mark, as in the header, a size down */
.footer__mark {
  display: block;
  width: clamp(9.5rem, 14vw, 13rem);
  aspect-ratio: 2854.35 / 232.43;
  background: #f6fbfe;
  -webkit-mask: url("/assets/brand/hvn-black-wordmark.svg") left center / contain no-repeat;
  mask: url("/assets/brand/hvn-black-wordmark.svg") left center / contain no-repeat;
}

/* the footer's words are the page's sans; only its labels and the legal
   line keep the mono it is given in base.css */
.footer__line,
.footer__list,
.footer__address,
.footer__cta {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.footer__line {
  max-width: 22rem;
  margin: var(--space-6) 0 var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-ink-3);
}

.footer__cta {
  font-size: var(--fs-small);
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) ease;
}

.footer__head {
  margin: 0 0 var(--space-4);
  color: var(--c-ink-4);
}

.footer__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.footer__list a {
  color: var(--c-ink-3);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

.footer__address {
  font-style: normal;
  color: var(--c-ink-3);
}

@media (hover: hover) {
  .footer__list a:hover { color: var(--c-ink); }
  .footer__cta:hover { border-bottom-color: currentColor; }
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-hairline);
}

/* back to the top, at the far end of the line */
.footer__top {
  margin-left: auto;
}