/*
  COLOURS (updated 22 August 2026 — faded pink paper, soft dark grey ink).

  A pale, washed-out pink background with grey text rather than black: gentler on the eyes
  than white-and-black, and it reads calmly on a phone at night. Type is still the system
  font stack — no typeface has been chosen with Joanna yet (see ARCHITECTURE.md section 8).

    --paper   #fbeef1   page background, a faded pink
    --ink     #3a3a3c   body and headings, a soft dark grey (10.1:1 on paper)
    --muted   #5a5a60   secondary text, a lighter grey (6.1:1 on paper)
    --focus   #1b5fbe   links and the keyboard focus ring (5.4:1 on paper)
    --heading-light #86868c  the About Me heading, a light grey (3.2:1 — only safe
                             because that heading never renders below 24px)
    --band    #ddefe0   the nav bar across the top, a light green (grey ink on it is 9.5:1)
    --accent  #7a3350   the Email me button, a deep plum from the same family
                        (white on it is 9.1:1)

  Rules that survive whatever gets designed:
    - Body text no smaller than 18px.
    - WCAG AA contrast, minimum.
    - Visible focus rings. Never remove the outline without replacing it.
    - Motion minimal, and honour prefers-reduced-motion.
    - Nothing loaded from a third-party domain. Fonts live in assets/fonts/.
*/

:root {
  --ink: #3a3a3c;
  --paper: #fbeef1;
  --muted: #5a5a60;
  --focus: #1b5fbe;
  --heading-light: #86868c;
  --band: #ddefe0;
  --accent: #7a3350;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

main { display: block; }

.hero {
  max-width: 44rem;
  margin: 0 auto;
  padding: 12vh 1.25rem 6rem;
}

h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 9vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* A long unbroken word must never push the page wider than the phone. */
  overflow-wrap: break-word;
}

/* The big title blinks on and off, on purpose. One flash per second — well under the
   three-per-second limit that can trigger seizures — and it never fades all the way out,
   so the words stay readable at every point in the cycle. Anyone whose device asks for
   reduced motion sees it sitting still instead. */
@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.18; }
}

h1 {
  animation: blink 1s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  h1 { animation: none; }
}

p {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
}

a { color: var(--focus); }

/* --- About Me -------------------------------------------------------------
   Photo on the left, text beside it on wide screens; the photo stacks above
   the text on a phone. No image file yet, so the placeholder is drawn in CSS. */

.about {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
}

h2 {
  margin: 0 0 1.5rem;
  color: var(--heading-light);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.about-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}

.about-text {
  flex: 1 1 18rem;
  min-width: 0;
}

.about-text p + p { margin-top: 1rem; }

.photo-placeholder {
  flex: 0 0 auto;
  width: 14rem;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  border: 2px dashed var(--muted);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.02);
}

/* --- Nav ------------------------------------------------------------------
   A soft light-green band across the top, with a quiet green hairline under it.
   Plain links: the page you are on is marked with aria-current and drawn
   underlined. */

.site-nav {
  background: var(--band);
  border-bottom: 1px solid rgba(45, 90, 60, 0.18);
}

.site-nav ul {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  /* A comfortable tap target on a phone. */
  display: inline-block;
  padding: 0.2rem 0;
}

.site-nav a:hover { text-decoration: underline; }

.site-nav a[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* --- Inner pages ---------------------------------------------------------- */

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 6rem;
}

.page-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* Inner-page titles don't blink — that is the front page's party trick. */
  animation: none;
  overflow-wrap: break-word;
}

.page h2 {
  margin: 2.5rem 0 1rem;
  color: var(--ink);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.page p + p { margin-top: 1rem; }

.lede {
  font-size: 1.15rem;
  color: var(--ink);
}

.plain-list {
  margin: 0;
  padding-left: 1.2rem;
  max-width: 34rem;
  color: var(--muted);
}

.plain-list li + li { margin-top: 0.5rem; }

.contact-action { margin-top: 2rem; }

.button {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1.05rem;
  /* Long email addresses must not push a 320px phone sideways. */
  max-width: 100%;
  overflow-wrap: break-word;
}

.button:hover { text-decoration: underline; }

.contact-note {
  margin-top: 0.85rem;
  font-size: 0.95rem;
}

.page-next { margin-top: 2.5rem; }