/* The Features page, in the home page's vocabulary: home.css loads first, this file holds only what's
   particular to this page. The page opens on night like the home page's sections, then the features
   hang on paper like the "How we make your guide" labels: a rule, the number in patina, the words, and
   the picture in a white frame with night inside. The analytics block that left the home page on
   2026-10-13 lives here, on night, with the rules it had there. home.js runs the phone menu and the
   reveals; nothing else on this page moves. */

/* The opening: the page's title and one paragraph, centred on night */
.ft-head {
  padding: clamp(56px, 10vh, 120px) 0;
  text-align: center;
}

.ft-head .label {
  color: var(--on-night-soft);
}

.ft-head h1 {
  margin: 16px auto 0;
  font-size: clamp(42px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--on-night);
}

.ft-head .lede {
  margin: 24px auto 0;
  max-width: 34em;
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.3;
  color: var(--on-night);
}

/* The features, on paper */
.features {
  padding: clamp(72px, 12vh, 150px) var(--gutter) clamp(40px, 6vh, 80px);
  background: var(--paper);
  color: var(--ink);
}

.features-list {
  max-width: var(--width);
  margin: 0 auto;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: 22px 0 clamp(56px, 8vh, 96px);
}

/* Words and picture swap sides down the page, like works hung facing each other */
.feature:nth-child(even) .feature-text {
  order: 2;
}

/* The label: the number in patina beside the words, as on the home page's steps */
.feature-text {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
}

.feature-number {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--patina-deep);
}

.feature-text h2 {
  margin: 10px 0 0;
  max-width: 14ch;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
}

/* "One QR code, up to ten languages." holds to two lines */
.feature-text h2.wide {
  max-width: 20ch;
}

.feature-text h2 + p {
  margin-top: 18px;
}

.feature-text p:not(.label) {
  max-width: 32rem;
}

.feature-text p:not(.label) + p {
  margin-top: 12px;
}

/* The picture: a white mat, and inside it the night of the sections around, so the screenshots and
   paper notes stand out like works on a dark gallery wall */
.feature-art {
  position: relative;
  box-sizing: border-box;
  height: clamp(300px, 34vw, 420px);
  overflow: hidden;
  border: 12px solid #fff;
  background: var(--night);
}

.feature-art img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

/* 2. One screenshot, the frame sized to it */
.feature-art.fit {
  height: auto;
}

.feature-art.fit img {
  position: static;
  width: 100%;
}

/* 3. The edit: the screenshot, then the close-up on paper (.edit, .e-shot and .e-zoom are in home.css) */
.feature-art.edit {
  height: auto;
  padding: 12px;
}

.feature-art.edit .e-zoom {
  width: 100%;
  margin: 8px 0 0;
  padding: 16px 18px;
  border: 0;
  background: var(--paper);
  font-size: clamp(17px, 1.5vw, 21px);
}

/* 4. The ten languages, set large on paper */
.feature-art.langs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--paper);
}

.feature-art.langs .languages {
  max-width: 18ch;
  text-align: center;
  color: var(--ink); /* a paper card: ink whatever ground the section sits on */
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.3;
}

/* 5. The guide on a phone, standing in the frame and running off its bottom edge */
.feature-art.phone {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 28px;
}

.ft-phone {
  width: min(236px, 56%);
  aspect-ratio: 9 / 19;
  padding: 8px;
  background: #101418;
  border-radius: 32px;
  outline: 1px solid rgba(243, 240, 232, 0.3);
}

.ft-phone-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #f5f6f4;
}

.ft-phone-screen img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Analytics: the Studio's dashboard, large on night, with three short facts under it */
.analytics {
  padding: clamp(80px, 14vh, 160px) 0 clamp(72px, 12vh, 140px);
}

.an-shot {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin: clamp(32px, 6vh, 56px) auto 0;
  border: 1px solid rgba(243, 240, 232, 0.2);
}

.an-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  max-width: 880px;
  margin: clamp(24px, 4vh, 40px) auto 0;
}

.an-facts p {
  margin: 0;
  padding-top: 14px;
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3;
  color: var(--on-night);
}

/* Phone: everything stacks, titles on the left edge as on the home page */
@media (max-width: 860px) {
  .ft-head {
    padding: 48px 0 56px;
    text-align: left;
  }

  .ft-head h1 {
    margin-left: 0;
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -0.01em;
  }

  .ft-head .lede {
    margin-left: 0;
    font-size: 22px;
  }

  .features {
    padding: 56px 16px 40px;
  }

  .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 18px 0 48px;
  }

  .feature:nth-child(even) .feature-text {
    order: 0;
  }

  .feature-text h2 {
    font-size: 30px;
  }

  .feature-art {
    height: 240px;
  }

  .feature-art.langs .languages {
    font-size: 24px;
  }

  .an-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .an-facts p {
    font-size: 22px;
  }
}

/* One ground on desktop (2026-10-14), as on the home page: the features keep their paper on a phone and
   sit on night on a wider screen; the frames keep their white mats, the languages card and the note
   their paper */
@media (min-width: 861px) {
  .features {
    background: var(--night);
    color: var(--on-night);
  }

  .features .label {
    color: var(--on-night-soft);
  }

  .feature {
    border-top-color: var(--on-night-soft);
  }

  .feature-number {
    color: var(--patina);
  }

  /* The paper cards inside the frames inherit the section's colour: ink, whatever the ground */
  .feature-art .c-page,
  .feature-art .c-note,
  .feature-art .e-zoom {
    color: var(--ink);
  }
}