/* Promenade link pages (promenade.aetheronit.com.au). Phone layer: every value is a planning/SPEC.md §1 token (the A1 screen).
   From 768 px the block at the end steps the scale up for laptops and monitors; colours and fonts stay the same tokens. */
@font-face { font-family: "Red Hat Display"; font-weight: 800; font-display: swap; src: url(/fonts/red-hat-display-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-weight: 400; font-display: swap; src: url(/fonts/red-hat-text-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-weight: 600; font-display: swap; src: url(/fonts/red-hat-text-latin-600-normal.woff2) format("woff2"); }

:root {
  --ground: #F2EDE4;
  --ink: #14213A;
  --ink-secondary: #4F5A6E;
  --accent: #1F6F78;
  --accent-pressed: #185961;
  --on-accent: #FBF8F2;
  --radius-button: 12px;
  --duration-micro: 120ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 24px; /* space.48 above the logo as on A1 Join; space.24 under the credit as on A3 Log in */
  color: var(--ink);
  font: 400 0.9375rem/1.25rem "Red Hat Text", system-ui, sans-serif; /* type.body 15/20, in rem so browser text size applies */
  -webkit-font-smoothing: antialiased;
}
main, footer { width: 100%; max-width: 400px; }
main { margin: auto 0; } /* centred in the free space; top-aligned once the content is taller than the screen */
footer { padding-top: 48px; text-align: center; font-size: 0.8125rem; line-height: 1.125rem; color: var(--ink-secondary); } /* type.caption 13/18 */
.logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 40px; } /* A1: width 220, space.40 below */
h1 { margin: 0 0 12px; font: 800 1.75rem/2rem "Red Hat Display", system-ui, sans-serif; letter-spacing: -0.01em; text-wrap: balance; } /* type.displayXL 28/32, tracking -0.28 */
p { margin: 0; color: var(--ink-secondary); }
p + p { margin-top: 12px; }
a { color: inherit; text-underline-offset: 0.15em; }
.button {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; margin: 32px 0 20px; padding: 14px 20px; /* §2.3 primary: 52 high, full width; space.32 above, space.20 below as on A1 */
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-button); text-decoration: none; text-align: center;
  font-weight: 600; font-size: 1rem; line-height: 1.25rem; /* type.strongL 16/20 */
  transition: background var(--duration-micro);
}
.button:active { background: var(--accent-pressed); }
@media (hover: hover) { .button:hover { background: var(--accent-pressed); } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }

/* Laptops and monitors (owner, 2026-10-12: the phone layout "looks so small" on a desktop).
   One column of 600 px (about 64 characters of 18 px body), everything on one left edge, and the credit travels with
   the content instead of sitting at the bottom of a tall window (HIG Layout: macOS). The group sits 24 px above the
   geometric centre of the window (space.48 above, 2 x space.48 below), where the eye expects it. */
@media (min-width: 768px) {
  body { padding: 48px 24px 96px; justify-content: center; font-size: 1.125rem; line-height: 1.75rem; } /* body 18/28 */
  main, footer { max-width: 600px; }
  main { margin: 0; }
  footer { text-align: left; font-size: 0.875rem; line-height: 1.25rem; } /* credit 14/20, space.48 above it as before */
  .logo { width: 320px; margin: 0 0 48px; } /* 220 -> 320, on the column's left edge like the text; space.48 below */
  h1 { margin-bottom: 16px; font-size: 2.5rem; line-height: 2.75rem; letter-spacing: -0.02em; } /* 40/44, tracking -0.8 */
  p + p { margin-top: 16px; }
  .button { width: fit-content; max-width: 100%; min-height: 56px; margin: 32px 0 24px; padding: 16px 32px; font-size: 1.0625rem; line-height: 1.5rem; } /* label 17/24, 56 high, as wide as its label (HIG Layout: avoid full-width buttons) */
}

/* Monitors (1920 and wider at 1x; the widest laptop is 1728). One more step: 720 px column (about 68 characters of 20 px body),
   and the group sits 48 px above centre (space.48 above, 3 x space.48 below). */
@media (min-width: 1800px) {
  body { padding-bottom: 144px; font-size: 1.25rem; line-height: 2rem; } /* body 20/32 */
  main, footer { max-width: 720px; }
  footer { font-size: 0.9375rem; line-height: 1.25rem; } /* credit 15/20 */
  .logo { width: 400px; }
  h1 { margin-bottom: 20px; font-size: 3rem; line-height: 3.25rem; } /* 48/52, tracking -0.96 */
  p + p { margin-top: 20px; }
  .button { min-height: 60px; padding: 18px 36px; font-size: 1.125rem; } /* label 18/24, 60 high */
}