/**
 * aurah.social — the one page.
 *
 * Requires tokens.css.
 *
 * The page is a column of full-height portraits at 5:7 — a print size, not a
 * web hero — and the type rides across them. That crossing is the whole
 * composition: the picture and the page are one object rather than a photo
 * placed politely beside some words. Small text always lands on cream, where
 * contrast is measured; only the large serif lines cross the plate, where
 * the large-text floor applies and the veil clears it comfortably.
 *
 * Everything else is Aurah's own: the cream ground, the grain, Newsreader
 * reading and Instrument Sans labelling, one green, no shadows, no gradients.
 */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Proximity, never mandatory: the page settles onto a scene when you stop
     near one, and lets go the moment you mean to keep going. */
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--color-page-bg);
  color: var(--text-ink);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}

a { color: var(--green-link); text-decoration: none; }
a:hover { color: var(--green-link-hover); text-decoration: underline; text-underline-offset: 3px; }
a:active { color: var(--green-link-active); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: 3px; }
img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-12); top: -60px; z-index: 20;
  background: var(--color-surface); color: var(--green-fill);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-14); font-size: var(--text-12-5);
}
.skip-link:focus { top: var(--space-12); }

/* ==================================================================
   Page
   ================================================================== */
:root {
  /* How much cream sits over a photograph. It does two jobs: it brings any
     picture into the page's tonal range, and it guarantees the ground under
     the large type that crosses it. Lower it for richer pictures, but check
     the crossing lines against the darkest frame before you do. */
  --plate-veil: 0.38;
  --page-max: 1240px;
  --page-pad: clamp(20px, 5vw, 64px);
  --read:     clamp(26ch, 40vw, 46ch);
}

.page {
  position: relative; z-index: 1;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.mast {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-20);
  padding-inline: var(--page-pad);
  margin-inline: calc(var(--page-pad) * -1);
  background: var(--color-page-bg);
}
.mast__brand { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-ink); }
.mast__brand:hover { color: var(--green-fill); text-decoration: none; }
.mast__word { font-family: var(--font-display); font-size: var(--text-17); letter-spacing: 0.01em; }
.mark { display: block; color: var(--green-fill); flex: none; }
.mark__halo { opacity: 0.38; }
.mast__enter { font-size: var(--text-12-5); color: var(--text-body-muted); }
.mast__enter:hover { color: var(--green-fill); }

/* ==================================================================
   The plate — a 5:7 print, at the height of the page.

   Held at ratio rather than cropped to a viewport, because 5×7 is a
   photograph's size and the page is arguing that these are photographs
   of people rather than headers.
   ================================================================== */
.plate {
  position: relative;
  /* The window's full height. At a typical desktop the cell is ~648px wide
     against a 900px viewport, which is 0.72 — near enough to 5:7 that a
     print-ratio file lands almost uncropped. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--image-placeholder);
  background-image: var(--src, none);
  background-size: cover;
  background-position: center;
  /* The house grade, so every photograph belongs to Aurah. */
  filter: var(--image-grade);
}
/* The veil. It carries two jobs: it brings any photograph into the page's
   tonal range, and it guarantees the ground under the type that crosses it. */
.plate::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--color-page-bg);
}

/* ==================================================================
   A scene — one plate, and the line that crosses it.

   Twelve columns. The plate takes seven, the words take seven, and they
   share two: that shared pair is the composition.
   ================================================================== */
.scene {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
.scene__plate { grid-column: 6 / 13; grid-row: 1; }
.scene__say   { grid-column: 1 / 11; grid-row: 1; z-index: 1; min-width: 0; }

.scene__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--text-ink);
  text-wrap: balance;
  /* Centred in its column, which sits left of the plate and overlaps it: a
     two-word line crosses as surely as a five-word one, and the centre axis
     plays against the left-ragged note under it. */
  text-align: center;
}
/* Small text never crosses the plate; it steps clear of the shared columns. */
.scene__note {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  /* Stops before the plate's left edge at 41.7% of the page: only the
     display line is allowed to cross a photograph. */
  max-width: min(var(--read), 48%);   /* 41.7% of the page ÷ an 83% column */
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.7;
  color: var(--text-body-muted);
  text-wrap: pretty;
}

/* ==================================================================
   The opening. The plate is on the right; the title crosses it, and the
   first thing on the page is a person.
   ================================================================== */
/* --mast: the height the wordmark and Sign in occupy above the fold. The
   opening plate gives back exactly that, so the first viewport holds the
   brand and a whole picture at once. */
:root { --mast: 88px; }
.open__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}
.open .plate { height: calc(100svh - var(--mast)); }
.open__plate { grid-column: 6 / 13; grid-row: 1; }
.open__say   { grid-column: 1 / 12; grid-row: 1; z-index: 1; min-width: 0; }

.open__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text-ink);
  text-align: center;
}
.open__body {
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  max-width: min(34ch, 36%);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--text-body-muted);
  text-wrap: pretty;
}
.open__body strong { font-weight: 500; color: var(--text-ink); }

/* ==================================================================
   The end — the product's own stopping point, borrowed intact
   ================================================================== */
.end {
  margin-block: clamp(72px, 12vw, 160px) clamp(56px, 8vw, 104px);
  padding-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--border-divider);
}
.end__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--text-ink);
  text-wrap: balance;
}
.end__links { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); margin-top: clamp(24px, 3vw, 36px); }
.end__links a { font-size: var(--text-12-5); }
.end__legal { margin: var(--space-20) 0 0; font-size: var(--text-11-5); color: var(--text-meta); }

/* ==================================================================
   Motion — one moment, and it belongs to the pictures.
   A plate lifts its veil as it arrives. Nothing else moves.
   ================================================================== */
.plate { --veil: 0.68; }
.plate::after { opacity: var(--veil); transition: opacity 1100ms var(--ease-settle); }
.plate.is-in { --veil: var(--plate-veil); }

/* The words arrive with the picture, a beat behind it. */
[data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--ease-settle) 120ms,
              transform 800ms var(--ease-settle) 120ms;
}
[data-rise].is-in { opacity: 1; transform: none; }

/* ==================================================================
   Adaptation — below 860 the plate becomes the ground it always wanted
   to be: full width, with the line sitting across its foot.
   ================================================================== */
@media (max-width: 860px) {
  .open__grid, .scene { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .open__plate, .open__say,
  .scene__plate, .scene__say { grid-column: 1; grid-row: auto; }

  .open__plate, .scene__plate { margin-inline: calc(var(--page-pad) * -1); border-radius: 0; }
  /* Still the window's height, less the room the crossing line needs to
     stay in view — the gesture is the point of the composition. */
  .plate { height: calc(100svh - 190px); }

  .open__say, .scene__say { margin-top: calc(clamp(44px, 10vw, 76px) * -1); }
  .open .plate { height: calc(100svh - var(--mast) - 120px); }

  .scene__note { max-width: 100%; }
  .scene__line, .open__line { text-align: left; }

}

@media (pointer: coarse) {
  .end__links a,
  .mast__enter,
  .mast__brand { display: inline-flex; align-items: center; min-height: 44px; }
  .mast__brand { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .plate { --veil: var(--plate-veil); }
  .plate::after { transition: none; }
  [data-rise] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}