/*
 * Nanna Bayer — Colors & Type  (v2 · 11 May 2026)
 *
 * Canonical tokens for the public portfolio site.
 * Supersedes the 6‑palette eucalyptus system. The hub keeps its
 * eucalyptus dark independently.
 *
 * In Nanna's words:
 *   "All pages black background and either yellow, orange or pink
 *    text. Images always on left, text if any on right. Simple."
 *
 * Ground:  one black for every page  (#0D0D0D — one step off pure RGB).
 * Ink:     porcelain (#FDF6F0) for long prose; the per‑page accent
 *          (yellow / orange / pink) carries headings, labels, UI.
 * Layout:  every content row is image left, text right (stacks on mobile).
 * Type:    EB Garamond + Manrope, 18px floor.
 */

/* Fonts loaded via <link> tags in each page head — preconnect + async stylesheet */

:root {
  /* ───── Ground & ink ─────────────────────────────────────── */
  --color-ground:        #0D0D0D;  /* universal page background */
  --color-ground-raised: #161616;  /* lifted surfaces — sparingly */
  --color-porcelain:     #FDF6F0;  /* primary body ink on ground */
  --color-porcelain-soft:rgba(253, 246, 240, 0.72);
  --color-porcelain-faint:rgba(253, 246, 240, 0.50);
  --color-rule:          rgba(253, 246, 240, 0.18);  /* hairlines */
  --color-rule-strong:   rgba(253, 246, 240, 0.45);

  /* ───── Three accent worlds ──────────────────────────────────
     One per page. Each is the colour of every heading, label, link
     and UI element on that page; body prose stays porcelain.
     All three pass WCAG AAA (7:1) on #0D0D0D at body size.
  */
  --color-orange:        #EE8858;  /* terracotta‑warm — 7.7:1 on ground */
  --color-yellow:        #F0C030;  /* fired saffron    — 11.4:1 on ground */
  --color-pink:          #F08898;  /* dusty rose       — 8.0:1 on ground */

  /* Hover/active tonal steps */
  --color-orange-hover:  #F5A070;
  --color-yellow-hover:  #F5D060;
  --color-pink-hover:    #F5A0B0;

  /* ───── Semantic surface — overridden by [data-page] ──────── */
  --surface:    var(--color-ground);
  --surface-raised: var(--color-ground-raised);
  --fg:         var(--color-porcelain);
  --fg-soft:    var(--color-porcelain-soft);
  --fg-faint:   var(--color-porcelain-faint);
  --accent:     var(--color-orange);    /* default — Home */
  --accent-hover: var(--color-orange-hover);
  --rule:       var(--color-rule);

  /* ───── Typography ────────────────────────────────────────── */
  --font-display: 'EB Garamond', 'Times New Roman', serif;
  --font-body:    'EB Garamond', 'Times New Roman', serif;
  --font-label:   'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-icons:   'Material Symbols Outlined';

  /* Fluid scale — 18px floor (Nanna's eyesight; all text including labels) */
  --text-label-sm:   1.125rem;    /* floor 18px — was 11px; uppercase tracked Manrope */
  --text-label-md:   1.125rem;    /* floor 18px — was 13px */
  --text-label-lg:   1.125rem;    /* floor 18px — was 14px */
  --text-body:       clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --text-body-lg:    clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem);
  --text-lede:       clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --text-h3:         clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem);
  --text-h2:         clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  --text-h1:         clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  --text-display:    clamp(3rem, 2rem + 3vw, 5.5rem);

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.7;

  --track-display: 0.02em;
  --track-section: 0.3em;
  --track-nav:     0.18em;
  --track-tight:  -0.01em;

  /* ───── Spacing ───────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* ───── Radii (sharp by default) ──────────────────────────── */
  --radius-sharp: 0;
  --radius-fine:  2px;
  --radius-pill:  9999px;   /* 44px a11y toggles only */

  /* ───── Motion ────────────────────────────────────────────── */
  --ease-in-out: cubic-bezier(0.2, 0, 0, 1);
  --t-fast:   200ms;
  --t-normal: 300ms;
  --t-slow:   700ms;

  /* ───── Measure ───────────────────────────────────────────── */
  --measure-prose:  60ch;
  --measure-narrow: 45ch;
  --max-page:       85rem;

  color-scheme: dark;
}

/* ───── Per‑page accent override ─────────────────────────────
   One attribute on <html> selects the world. Ground never changes.
   Pick one per page; do not mix. */
[data-page="home"],
[data-page="work-functional"],
[data-page="contact"]      { --accent: var(--color-orange); --accent-hover: var(--color-orange-hover); }

[data-page="studio"],
[data-page="work-sculptural"] { --accent: var(--color-yellow); --accent-hover: var(--color-yellow-hover); }

[data-page="about"],
[data-page="classes"]      { --accent: var(--color-pink); --accent-hover: var(--color-pink-hover); }

/* ───── Element styles ──────────────────────────────────────── */
.h-display {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--accent);
}
.h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-h1); line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--accent);
}
.h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-h2); line-height: 1.15;
  color: var(--accent);
}
.h3 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-h3); line-height: 1.3;
  color: var(--accent);
}
.body {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-body); line-height: var(--leading-body);
  color: var(--fg);
  max-width: var(--measure-prose);
}
.lede {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-lede); line-height: 1.4;
  color: var(--fg);
  max-width: var(--measure-prose);
}
.label {
  font-family: var(--font-label); font-weight: 500;
  font-size: var(--text-label-md); letter-spacing: var(--track-section);
  text-transform: uppercase;
  color: var(--accent);
}
.nav-link {
  font-family: var(--font-label); font-weight: 500;
  font-size: var(--text-label-lg); letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--fg);
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--accent); }
.caption {
  font-family: var(--font-label); font-weight: 400;
  font-size: var(--text-label-sm); letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* ───── The signature layout ─────────────────────────────────
   .row — image left, text right. Stacks on ≤ 720px.            */
.row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
  padding-block: clamp(3rem, 6vw, 6rem);
}
.row__media { grid-column: 1; }
.row__media img,
.row__media figure {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.row__body {
  grid-column: 2;
  align-self: center;
  display: flex; flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 1.5rem; }
  .row__media, .row__body { grid-column: 1; }
}

/* prefers-reduced-motion handled in public.css (comprehensive) */