/* ----------------------------------------------------------------------------
 * The landing page's own layout, September 2026: the distinctiveness pass.
 * Loaded by index.html after styles.css and by nothing else, so every rule
 * here reaches the landing page alone. The tokens, the type, the lockup
 * geometry, the card system and the button dress all stay styles.css's; this
 * sheet changes the bones. Three moves: the hero sets its headline left
 * against the connects board; the proof band carries photographs of the
 * rooms near full-bleed; the sections stack at varied widths with a rule
 * line and the open ring, reduced to a small mark, at the head of each. One
 * bronze moment per screenful: the spark in the hero, the ring elsewhere.
 * No new colours, no new type, no shadows.
 * -------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * Two widths. The measure (styles.css's .column, 38rem) for reading; the band
 * for the photographs, the app strip and the two-column sections, 1280px at
 * most, a gutter of 16px on phones widening to 64px, never a scroll.
 * -------------------------------------------------------------------------- */

.band {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 64px);
}

/* ----------------------------------------------------------------------------
 * The masthead: the lockup at 30px, the same geometry as the hero lockups
 * in styles.css re-derived at F = 30 (mark F x 42/40 = 31.5px; mark shift
 * (2104 x 30/2000 + 0.6) - (4822 x 30/2000 + 1.5) / 2 = -4.8px; line box
 * round(30 x 1.18) = 35px; spark round(30 x 0.13) = 4px at left 30 x 0.067 =
 * 2px, top 30 x 0.2245 = 6.7px). The 6.5px gap from mark to word is the one
 * every lockup shares. It sits left, one size at every width.
 * -------------------------------------------------------------------------- */

.masthead {
  padding-block: 28px 0;
}

.masthead .lockup {
  width: fit-content;
}

.masthead .lockup-mark {
  width: 31.5px;
  height: 31.5px;
  transform: translateX(-4.8px);
}

.masthead .wordmark-word {
  font-size: 30px;
  line-height: 35px;
}

.masthead .wordmark-spark {
  left: 2px;
  top: 6.7px;
  width: 4px;
  height: 4px;
}

/* ----------------------------------------------------------------------------
 * The ring, reduced to a small mark: the canonical arc at 14px in bronze,
 * sitting above each section heading as the section's one warm moment. The
 * hero has none; its warm moment is the spark.
 * -------------------------------------------------------------------------- */

.ring {
  display: block;
  width: 14px;
  height: 14px;
  color: var(--warm);
  margin-bottom: 18px;
}

/* ----------------------------------------------------------------------------
 * The hero: no longer a centred full-height stage. The headline and one line
 * set left, the store pair and the note beneath them, and the connects board
 * beside them from 900px up, the headline's top on the board's top line. On
 * phones the board follows the note. The hero's ground is the wall, no rule
 * above it; the masthead sits in the same band.
 * -------------------------------------------------------------------------- */

.hero {
  min-height: 0;
  display: block;
  text-align: left;
  /* A section in styles.css carries a hairline above; the hero is the page's
     first thing and carries none. */
  border-top: 0;
  padding-block: 0 clamp(64px, 8vw, 96px);
}

.hero-grid {
  margin-top: clamp(40px, 6vw, 88px);
}

.hero h1 {
  margin-top: 0;
  font-size: clamp(2.625rem, 5.4vw + 0.5rem, 4.5rem);
  line-height: 1.02;
  /* Narrow enough that the line breaks at the comma, "Your social life,"
     over "by design.", at every width: the measure scales with the size. */
  max-width: 7.4em;
}

.hero .hero-sub {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  max-width: 22em;
  margin-top: 24px;
}

.hero .store-links {
  justify-content: flex-start;
  margin-top: 36px;
}

/* From 900px the hero is one grid of two columns and two rows: the masthead
   and the copy down the left, the board spanning both rows on the right, so
   the right column is filled from the top of the page (the word of 11
   September: no empty quadrant top right). The board's ring and heading sit
   level with the lockup, mark over word beside mark over word, its first card
   above the headline's first line. The hero-grid wrapper steps out of the
   layout here (display: contents) so its two children join the hero's grid. */
@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    /* The second row takes the board's spare height, so the spanning board
       never grows the masthead row and the headline keeps its place. */
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }

  .masthead {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-grid {
    display: contents;
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 2;
  }
}

/* The board: the connects, with their card system exactly as styles.css sets
   it. Its heading takes the h3 scale so the hero keeps one headline, and the
   ring above it is the hero's board marker. On phones it follows the hero copy
   after the same air the sections keep between a heading and its content. */

/* The board is a section inside the hero, so styles.css's section rule would
   give it a hairline above and the gallery padding. On phones the hairline
   stays as the rule between the hero copy and the board, over a shorter lead;
   from 900px up both go, and the board sits level with the headline. */
.board {
  margin-top: 40px;
  padding-block: 40px 0;
}

.board h2 {
  font-size: 21px;
  line-height: 27px;
  margin-bottom: 20px;
}

.board .connect-entry + .connect-entry {
  margin-top: 16px;
}

.board .connects-note {
  margin-top: 24px;
}

@media (min-width: 900px) {
  .board {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 0;
    border-top: 0;
    /* 40px puts the heading's baseline on the wordmark's (masthead padding
       28px, mark 31.5px, gap 6.5px, word box 35px) with the ring inside the
       mark's span. */
    padding-top: 40px;
  }
}

/* ----------------------------------------------------------------------------
 * The proof band: the rooms. Four photographs at the band's width, the lead
 * at three by two across two thirds with the first-connects copy beside it,
 * then three beneath in one row at one size, tops and bottoms level at every
 * width (the word of 11 September). Each print sits in a hairline
 * with the smallest corner on the page, and its caption, place and date in
 * quiet Hanken, hangs beneath. Until the photographs land, each frame holds
 * its ground and its subject line; the frame's ratio is what the photograph
 * is cropped to (object-fit: cover), so a portrait shot can fill a landscape
 * frame and the founder need not crop by hand.
 * -------------------------------------------------------------------------- */

.proof {
  padding-block: clamp(64px, 9vw, 120px);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 12px;
}

.proof-copy,
.proof-lead {
  grid-column: 1 / -1;
}

.proof-copy p {
  margin-top: 0;
}

.proof-copy h2 {
  margin-bottom: 20px;
}

.proof figure {
  margin: 0;
}

.proof-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 4px;
  overflow: hidden;
}

.proof-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proof-await {
  font-size: 13px;
  line-height: 1.4;
  color: var(--quiet);
  text-align: center;
  padding: 16px;
}

.proof figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--quiet);
}

.proof-lead .proof-frame {
  aspect-ratio: 3 / 2;
}

.proof-wide .proof-frame {
  aspect-ratio: 4 / 3;
}

/* On phones the copy leads, the lead print takes the width, and the three
   share one row beneath it, a third each. */

.proof-copy {
  order: -1;
}

@media (min-width: 900px) {
  .proof-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px 32px;
    align-items: start;
  }

  .proof-copy {
    order: 0;
    grid-column: 9 / 13;
    grid-row: 1;
  }

  .proof-lead {
    grid-column: 1 / 9;
    grid-row: 1;
  }

  .proof-wide {
    grid-column: 1 / 5;
  }

  .proof-mid {
    grid-column: 5 / 9;
  }

  .proof-last {
    grid-column: 9 / 13;
  }
}

/* ----------------------------------------------------------------------------
 * The founder line: one person speaking, after the rooms. A small photograph
 * in the open ring's own shape (a circle, the hairline its edge), the line in
 * the serif beside it, the name beneath in quiet Hanken. No rule above: it
 * closes the proof band rather than opening a section.
 * -------------------------------------------------------------------------- */

.founder {
  border-top: 0;
  padding-block: 0 clamp(64px, 9vw, 120px);
}

.founder-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  max-width: 44rem;
}

.founder-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--card);
  overflow: hidden;
}

.founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  line-height: 1.45;
  color: var(--ink);
}

.founder-name {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--quiet);
}

@media (min-width: 900px) {
  /* Portrait and line as one pair, the line held to about sixty characters
     (630px at its 21px), the pair centred in the band (the word of 11
     September). */
  .founder-row {
    grid-template-columns: 80px minmax(0, 630px);
    gap: 28px;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .founder-photo {
    width: 80px;
    height: 80px;
  }
}

/* ----------------------------------------------------------------------------
 * The app as it is: the stand's copy in the measure, then the four App Store
 * screenshots in the quiet frame styles.css draws (hairline, 28px corner, no
 * shadow), captioned with what each shows. From 900px up they stand in a row,
 * the second and fourth dropped a step; on phones the row becomes a strip
 * that scrolls sideways under the thumb, each frame two thirds of the screen,
 * snapping frame to frame, the page itself never scrolling sideways.
 * -------------------------------------------------------------------------- */

.app-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.app-copy {
  max-width: var(--measure);
}

/* The demo: one minute in the app, in the same quiet frame as the
   screenshots, 300px wide beside the copy from 900px up and under it on
   phones. Native controls carry the tap to play; the poster is all that
   loads until then. */
.demo {
  margin: 0;
  width: min(100%, 300px);
}

.demo .media-frame {
  width: 100%;
  margin: 0;
}

.demo video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--wall);
}

@media (min-width: 900px) {
  .app-top {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
}

.app-copy p + p {
  margin-top: 24px;
}

.app-lead {
  max-width: 34em;
  margin-top: 56px;
  font-size: 18px;
  line-height: 1.5;
}

.shots {
  display: flex;
  gap: 20px;
  margin-top: 32px;
  /* The strip bleeds to the screen edge on phones and starts at the gutter. */
  margin-inline: calc(-1 * clamp(16px, 4vw, 64px));
  padding-inline: clamp(16px, 4vw, 64px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.shots::-webkit-scrollbar {
  display: none;
}

.shot {
  flex: 0 0 auto;
  width: min(66vw, 240px);
  margin: 0;
  scroll-snap-align: start;
  scroll-margin-inline-start: clamp(16px, 4vw, 64px);
}

.shot .media-frame {
  width: 100%;
  margin: 0;
}

.shot-caption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--quiet);
}

.shot-caption strong {
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 900px) {
  .shots {
    gap: 32px;
    margin-top: 40px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    align-items: flex-start;
  }

  /* Four abreast at any band width from 900px: each frame grows to the
     240px the sources are cut for and no further, and gives way evenly on a
     narrower laptop so the row never runs past the band. */
  .shot {
    flex: 1 1 0;
    width: auto;
    max-width: 240px;
    scroll-margin-inline-start: 0;
  }

  .shot:nth-child(even) {
    margin-top: 56px;
  }
}

/* ----------------------------------------------------------------------------
 * How it works and the house rules: two-column sections from 900px up, the
 * heading and its intro in the left third, the content in the right two
 * thirds as rows parted by hairlines. The beats keep their quiet numeral; the
 * rules keep their semibold lead, set on its own column so the three leads
 * read down the page like a margin note. Each stacks on phones.
 * -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 48px;
}

.split-head h2 {
  margin-bottom: 16px;
}

.split-head p {
  max-width: 26em;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 0 clamp(48px, 6vw, 96px);
    align-items: start;
  }
}

.rows {
  list-style: none;
  border-top: 1px solid var(--hair);
}

.rows > li {
  border-bottom: 1px solid var(--hair);
  padding-block: 24px;
}

.rows .beat {
  gap: 24px;
}

.rows .beat p {
  max-width: 30em;
}

.rule-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 32px;
}

.rule-row strong {
  font-weight: 600;
}

.rule-row p {
  max-width: 30em;
}

@media (min-width: 600px) {
  .rule-row {
    grid-template-columns: 12em minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------------------------
 * The mission line keeps its centre, the page's one centred moment, and the
 * store pair beneath it as styles.css sets them.
 * -------------------------------------------------------------------------- */

.mission {
  padding-block: clamp(80px, 10vw, 128px);
}

/* Calm is the default; the strip's snap needs no motion, so nothing to remove
   here beyond what styles.css already quiets. */