/* Kahanë — Our Story
   Loads *after* styles.css and only on /story. Everything shared (masthead,
   colophon, .page, .eyebrow, the color and type tokens) comes from styles.css;
   this file adds only what the story page introduces.

   It is a separate file on purpose. /assets/* is served immutable for a year
   with no hash in the filename, so appending to styles.css would leave anyone
   who had already visited the site with a stale copy and an unstyled page. A
   new filename can't be stale. Same reasoning applies to any future page. */

:root {
  /* The signature face. Loaded from Google Fonts in story.html — already
     covered by the CSP's font-src/style-src allowances in netlify.toml. */
  --script: Parisienne, "Snell Roundhand", "Apple Chancery", cursive;
}

/* Current page in the nav — same underline the waitlist link uses. */
.navlink[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-40);
  padding-bottom: 2px;
}

/* ------------------------------------------------------------- Story head */

/* A quieter cousin of the home hero: same radial bloom and same watermark,
   sized to introduce a page you read rather than to fill one screen. */
.storyhead {
  position: relative;
  overflow: hidden;
  padding: 86px 48px 54px;
  text-align: center;
  background: radial-gradient(ellipse 900px 520px at 50% 30%,
              var(--bloom-light) 0%, var(--paper) 52%, var(--bloom-dark) 100%);
}

.storyhead__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--urdu);
  font-size: 260px;
  line-height: 1.6;
  color: var(--ink);
  opacity: .045;
  pointer-events: none;
  user-select: none;
  animation: drift 22s ease-in-out infinite;
  will-change: transform;
}

.storyhead__content { position: relative; }

.storyhead__title {
  margin: 22px 0 0;
  font-weight: 300;
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.storyhead__title em { font-style: italic; }

/* ------------------------------------------------------------------ Story */

/* The site's first page that scrolls. The home page is centred, which works
   for two lines and fights the reader over seven paragraphs — so the body
   sets left-aligned in a ~65-character column. */
.story {
  flex: 1;
  padding: 8px 48px 96px;
}

.story__column {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.story__column p {
  margin: 0;
  font-size: 20px;
  line-height: 1.78;
  color: var(--ink-62);
}

.story__column em { font-style: italic; }

/* The two lines that turn the piece. Lifted out of the column rhythm and set
   in full ink so they read as beats rather than paragraphs. */
.story__beat {
  margin: 0;
  text-align: center;
  font-size: 30px;
  line-height: 1.5;
  padding: 14px 0;
}

/* Wins over .story__column p without needing !important. */
.story__column p.story__beat { color: var(--ink); }

.story__beat--close { font-size: 27px; }

/* ---------------------------------------------------------------- Signoff */

.signoff {
  max-width: 620px;
  margin: 62px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
  text-align: center;
  /* Sizes the signature against this column rather than the viewport, so the
     one-line rule below holds at any width. */
  container-type: inline-size;
}

.signoff__salutation {
  margin: 0;
  font-size: 20px;
  font-style: italic;
  color: var(--ink-62);
}

/* All four names stay on one line. Size is driven by the column width, so it
   scales down on narrow screens instead of wrapping or overflowing. Don't add
   a vw-based font-size in the media query below — it would cancel this. */
.signoff__names {
  margin: 18px 0 0;
  font-family: var(--script);
  font-size: clamp(15px, 6cqw, 32px);
  line-height: 1.6;
  color: var(--ink);
  white-space: nowrap;
  /* Script faces sit on a slanted baseline; a hair of tracking stops the
     joins from crowding. */
  letter-spacing: .01em;
}

/* ------------------------------------------------------------ Responsive */

/* Matches the 820px breakpoint in styles.css, which already handles the
   masthead and colophon. Only the story-specific pieces are set here. */
@media (max-width: 820px) {
  .storyhead { padding: 54px 24px 40px; }
  .storyhead__watermark { font-size: 150px; }
  .storyhead__title { font-size: clamp(44px, 13vw, 76px); }

  .story { padding: 8px 24px 72px; }
  .story__column { gap: 26px; }
  .story__column p { font-size: 18px; }
  .story__beat { font-size: clamp(23px, 6.5vw, 30px); }
  .story__beat--close { font-size: clamp(21px, 6vw, 27px); }

  .signoff { margin-top: 48px; padding-top: 34px; }
}

/* styles.css disables the home watermark's drift; do the same here. */
@media (prefers-reduced-motion: reduce) {
  .storyhead__watermark { animation: none; }
}