/* ==========================================================================
   Leonor Romana: Portfolio stylesheet
   --------------------------------------------------------------------------
   Aesthetic: "painterly museum at sunset", a rose-and-gold painted sky
   with a setting sun and a flock of pixel doves, paper textures, handwritten
   script headings, typewriter labels, a lace "postage stamp" portrait with a
   postmark, washi tape, pressed-flower sprigs and a torn-paper edge.
   All decorations are CSS/SVG only (no image files) and hidden from
   screen readers.

   Mobile-first: base styles target small screens; media queries at
   600px, 900px and 1200px add layout for larger screens.

   Readability note: the script font is used ONLY for large display
   headings, and the typewriter font only for short labels. All reading
   text uses the clear sans-serif, left-aligned, never justified or italic.

   TABLE OF CONTENTS
   1.  Design tokens (colours, fonts, spacing), light + dark themes
   2.  Reset & base elements
   3.  Accessibility helpers (skip link, focus, visually-hidden)
   4.  Layout helpers (container, sections, section headers)
   5.  Buttons, tags, badges
   6.  Header & navigation (menu, language switcher, theme toggle)
   7.  Hero (painted sky, script name, lace-framed portrait)
   8.  About
   9.  Education timeline
   10. Cards (experience + community)
   11. Skills (competencies + languages)
   12. Interests (gallery of painted swatches)
   13. Contact + form
   14. Footer + logos
   15. Scroll reveal animation
   16. Responsive breakpoints
   17. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Every colour lives here. Text colours meet WCAG 2.1 AA contrast
   (4.5:1) on the backgrounds they are used on, in both themes.
   ========================================================================== */
:root {
  /* Paper & ink */
  --color-bg: #F6F0EA;               /* warm rosy paper */
  --color-text: #33292B;             /* soft plum-black ink, 12:1 on bg */
  --color-text-muted: #625659;       /* pencil, 6.2:1 on bg */
  --color-surface: #FBF7F3;          /* card paper */
  --color-surface-alt: #EFE3DA;      /* blush sections */
  --color-neutral: #E3D5CC;          /* hairlines & borders */
  --color-input-border: #8E7E7B;     /* form borders, 3.4:1 (non-text UI) */

  /* Sunset accents */
  --color-accent: #C98B8B;           /* dusty rose (decorative) */
  --color-accent-strong: #8A4A56;    /* deep rose-plum for text, 5.8:1 on bg */
  --color-accent-soft: #F3E1DC;      /* pale rose wash */
  --color-secondary: #C9A24A;        /* sunset gold (decorative) */
  --color-secondary-strong: #8A6420; /* antique gold text, 4.7:1 on bg/surface */
  --color-secondary-soft: #F4E7CC;
  --color-ochre: #D9A95B;            /* warm gold (decorative) */
  --color-mist: #B9A8C0;             /* lilac cloud (decorative) */
  --color-lace: #F5EAD9;             /* lace frame */

  --color-error: #A8322D;            /* 6:1 on bg */
  --color-focus: #8A4A56;
  --color-header-bg: rgba(239, 227, 218, 0.94);

  /* The painted sunset behind the hero: lilac at the top, rose in the
     middle, gold glowing at the horizon */
  --hero-bg:
    radial-gradient(38% 30% at 18% 80%, rgba(255, 221, 150, 0.95), transparent 72%),
    radial-gradient(60% 40% at 10% 12%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(60% 38% at 85% 18%, rgba(196, 160, 196, 0.55), transparent 70%),
    radial-gradient(70% 35% at 70% 70%, rgba(240, 170, 160, 0.45), transparent 70%),
    linear-gradient(180deg, #DCC6D2 0%, #EBCBC6 32%, #F3D5BC 62%, #F0C592 86%, #E6B27C 100%);
  --hero-art-opacity: 0.55;
  --cloud-fill: #FFF6F0;
  --cloud-rose: #E7A9A3;
  --sun-core: #FFF4D6;
  --sun-mid: #F7CF7E;
  --sun-opacity: 0.95;
  --wash-rose: rgba(232, 176, 170, 0.28);
  --wash-gold: rgba(236, 199, 124, 0.24);
  --tape-rose: rgba(222, 158, 160, 0.55);
  --tape-gold: rgba(226, 190, 110, 0.55);
  --grain-opacity: 0.12;

  --shadow-soft: 0 1px 2px rgba(47, 49, 45, 0.04), 0 12px 28px -12px rgba(47, 49, 45, 0.18);

  /* Theme-toggle icon visibility (swapped in dark mode) */
  --icon-moon-display: block;
  --icon-sun-display: none;

  /* Typography */
  --font-script: "Sacramento", "Segoe Script", "Brush Script MT", cursive;
  --font-type: "Courier Prime", "Courier New", Courier, monospace;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --text-base: 1.0625rem;            /* 17px */
  --line-height: 1.65;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4.5rem;
  --radius-s: 4px;
  --header-height: 4.25rem;
  --max-width: 1100px;
  --gutter: 1rem;                    /* 16px side padding on mobile */

  color-scheme: light;
}

/* Dark theme, "the museum at night". Used when the system is dark and the
   visitor has not chosen light manually... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1C1819;
    --color-text: #F0E6E1;
    --color-text-muted: #BFB1AE;
    --color-surface: #262022;
    --color-surface-alt: #211C1D;
    --color-neutral: #3D3436;
    --color-input-border: #857674;
    --color-accent: #C98B8B;
    --color-accent-strong: #E3A9AE;
    --color-accent-soft: #3A2A2D;
    --color-secondary: #C9A24A;
    --color-secondary-strong: #E2BE6E;
    --color-secondary-soft: #3A3020;
    --color-ochre: #D9A95B;
    --color-mist: #8A7394;
    --color-lace: #DDCDB6;
    --color-error: #F2A097;
    --color-focus: #E3A9AE;
    --color-header-bg: rgba(33, 28, 29, 0.94);
    --hero-bg:
      radial-gradient(38% 30% at 18% 82%, rgba(236, 150, 90, 0.40), transparent 72%),
      radial-gradient(60% 38% at 85% 18%, rgba(140, 100, 150, 0.28), transparent 70%),
      radial-gradient(70% 35% at 70% 72%, rgba(190, 100, 100, 0.22), transparent 70%),
      linear-gradient(180deg, #211A26 0%, #36232F 42%, #532E33 76%, #6A3B2E 100%);
    --hero-art-opacity: 0.18;
    --cloud-fill: #E8C9C6;
    --cloud-rose: #C97F86;
    --sun-core: #FFD9A0;
    --sun-mid: #E0904F;
    --sun-opacity: 0.7;
    --wash-rose: rgba(180, 100, 110, 0.10);
    --wash-gold: rgba(200, 150, 70, 0.08);
    --tape-rose: rgba(201, 139, 139, 0.45);
    --tape-gold: rgba(201, 162, 74, 0.45);
    --grain-opacity: 0.22;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -12px rgba(0, 0, 0, 0.5);
    --icon-moon-display: none;
    --icon-sun-display: block;
    color-scheme: dark;
  }
}

/* ...or when the visitor chose dark with the toggle button */
:root[data-theme="dark"] {
  --color-bg: #1C1819;
  --color-text: #F0E6E1;
  --color-text-muted: #BFB1AE;
  --color-surface: #262022;
  --color-surface-alt: #211C1D;
  --color-neutral: #3D3436;
  --color-input-border: #857674;
  --color-accent: #C98B8B;
  --color-accent-strong: #E3A9AE;
  --color-accent-soft: #3A2A2D;
  --color-secondary: #C9A24A;
  --color-secondary-strong: #E2BE6E;
  --color-secondary-soft: #3A3020;
  --color-ochre: #D9A95B;
  --color-mist: #8A7394;
  --color-lace: #DDCDB6;
  --color-error: #F2A097;
  --color-focus: #E3A9AE;
  --color-header-bg: rgba(33, 28, 29, 0.94);
  --hero-bg:
    radial-gradient(38% 30% at 18% 82%, rgba(236, 150, 90, 0.40), transparent 72%),
    radial-gradient(60% 38% at 85% 18%, rgba(140, 100, 150, 0.28), transparent 70%),
    radial-gradient(70% 35% at 70% 72%, rgba(190, 100, 100, 0.22), transparent 70%),
    linear-gradient(180deg, #211A26 0%, #36232F 42%, #532E33 76%, #6A3B2E 100%);
  --hero-art-opacity: 0.18;
  --cloud-fill: #E8C9C6;
  --cloud-rose: #C97F86;
  --sun-core: #FFD9A0;
  --sun-mid: #E0904F;
  --sun-opacity: 0.7;
  --wash-rose: rgba(180, 100, 110, 0.10);
  --wash-gold: rgba(200, 150, 70, 0.08);
  --tape-rose: rgba(201, 139, 139, 0.45);
  --tape-gold: rgba(201, 162, 74, 0.45);
  --grain-opacity: 0.22;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -12px rgba(0, 0, 0, 0.5);
  --icon-moon-display: none;
  --icon-sun-display: block;
  color-scheme: dark;
}


/* ==========================================================================
   2. RESET & BASE ELEMENTS
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Stops the sticky header from covering section headings after a jump */
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height);
  letter-spacing: 0.012em;           /* comfortable spacing aids readability */
  word-spacing: 0.04em;
  text-align: left;                  /* never justified */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Very faint paper grain over the whole page. Purely decorative; clicks
   pass straight through it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  margin: 0;
  color: var(--color-text);
  font-weight: 400;
  line-height: 1.2;
}

/* Smaller headings use the clean sans-serif (like a gallery caption) */
h3 {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 var(--space-s);
  max-width: 68ch;                   /* comfortable line length */
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-accent-strong);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

ul, ol {
  margin: 0;
  padding: 0;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Titles of works: no italics (readability), semibold instead */
cite {
  font-style: normal;
  font-weight: 600;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

main:focus {
  outline: none;
}


/* ==========================================================================
   3. ACCESSIBILITY HELPERS
   ========================================================================== */

/* Hidden visually but still read by screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until focused with the keyboard */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 400;
  padding: 0.75rem 1.25rem;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-type);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Clear, consistent keyboard focus style for every interactive element */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  overflow-x: clip;                  /* tape & flowers never cause side-scroll */
  padding-block: var(--space-xl);
}

/* Alternating misty background, edged with hairlines like a mounted print */
.section--alt {
  background:
    radial-gradient(45% 60% at 5% 0%, var(--wash-rose), transparent 70%),
    radial-gradient(40% 55% at 98% 100%, var(--wash-gold), transparent 70%),
    var(--color-surface-alt);
  border-block: 1px solid var(--color-neutral);
}

.section__header {
  position: relative;
  margin-bottom: var(--space-l);
}

/* Typewriter label above each heading: "01 ,, PROFESSIONAL PROFILE" */
.section__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.25rem;
  font-family: var(--font-type);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.section__number {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-strong);
}

.section__number::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--color-secondary);
}

/* Handwritten script headings, large, so they stay legible */
.section__title {
  font-family: var(--font-script);
  font-size: clamp(3.1rem, 2.3rem + 3.6vw, 5rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-text);
}

/* Hand-drawn rose-gold flourish under each script heading */
.section__title::after {
  content: "";
  display: block;
  width: 10rem;
  height: 0.9rem;
  margin-top: 0.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' fill='none' stroke-linecap='round'%3E%3Cpath d='M3 9C20 2 34 13 55 7s33-5 52 1 32 2 50-5' stroke='%23C98B8B' stroke-width='1.6'/%3E%3Cpath d='M40 12c20-4 45 0 70-3' stroke='%23D9A95B' stroke-width='1.1'/%3E%3Ccircle cx='157' cy='3' r='1.8' fill='%23D9A95B'/%3E%3C/svg%3E") left center / contain no-repeat;
}

.section__intro {
  margin-top: var(--space-s);
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

/* Little pixel doves (decorative), a nod to the second reference */
#education .section__header::after,
#interests .section__header::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  right: 0;
  width: 3.5rem;
  height: 2.4rem;
  opacity: 0.45;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' shape-rendering='crispEdges'%3E%3Cpath fill='%237E6A70' d='M2 0h2v1H2zM2 1h3v1H2zM3 2h3v1H3zM3 3h4v1H3zM4 4h4v1H4zM12 4h2v1h-2zM4 5h5v1H4zM11 5h4v1h-4zM0 6h2v1H0zM3 6h10v1H3zM0 7h13v1H0zM1 8h11v1H1zM3 9h7v1H3zM5 10h3v1H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#interests .section__header::after {
  transform: scaleX(-1);             /* this one flies the other way */
}


/* ==========================================================================
   5. BUTTONS, TAGS, BADGES
   Square, hairline-bordered, typewriter lettering, like museum signage.
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;                  /* comfortable touch target */
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--color-text);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-type);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.button__icon {
  flex-shrink: 0;
}

/* Primary: cream "paper" button that inverts to ink on hover */
.button--primary {
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.button--primary:hover,
.button--secondary:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Areas-of-interest tags */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-neutral);
  background: var(--color-surface);
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Clinical Psychology, the primary focus, set in ink */
.tag--primary {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
  font-weight: 600;
}

.tag__note {
  white-space: nowrap;
  font-family: var(--font-type);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Small typewriter badges ("In progress", "EQF level 6") */
.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid currentColor;
  font-family: var(--font-type);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge--status {
  color: var(--color-secondary-strong);
}

.badge--level {
  color: var(--color-text-muted);
}


/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-header-bg);
  border-bottom: 1px solid var(--color-neutral);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

/* Brand: spaced capitals in sage, like a gallery name */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-accent-strong);
  text-decoration: none;
}

/* The LR monogram only appears on very small phones (see below) */
.nav__monogram {
  display: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-accent-strong);
  font-family: var(--font-type);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-accent-strong);
}

.nav__name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Very small phones: monogram instead of the full name so the header fits */
@media (max-width: 479px) {
  .nav__monogram {
    display: inline-grid;
  }

  .nav__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* Language switcher: EN | PT | ES */
.lang-switch {
  display: flex;
  align-items: center;
  list-style: none;
  margin-right: 0.2rem;
}

.lang-switch li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85rem;
  vertical-align: middle;
  background: var(--color-input-border);
  opacity: 0.6;
}

.lang-switch__link {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  min-height: 2.75rem;               /* comfortable touch target */
  padding-inline: 0.3rem;
  color: var(--color-text-muted);
  font-family: var(--font-type);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.lang-switch__link:hover {
  color: var(--color-accent-strong);
}

.lang-switch__link[aria-current="page"] {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

/* Theme toggle + hamburger share the same icon-button style */
.theme-toggle,
.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.theme-toggle:hover,
.nav__toggle:hover {
  background-color: var(--color-accent-soft);
}

.theme-toggle__icon--moon { display: var(--icon-moon-display); }
.theme-toggle__icon--sun  { display: var(--icon-sun-display); }

/* Hamburger icon: three thin bars that turn into an X when open */
.nav__toggle {
  gap: 5px;
  align-content: center;
}

.nav__toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile menu: dropdown panel below the header, hidden until opened */
.nav__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  padding: var(--space-xs) var(--gutter) var(--space-m);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-neutral);
  box-shadow: var(--shadow-soft);
}

.nav__menu.is-open {
  display: block;
}

/* Without JavaScript the hamburger cannot work, so show links inline instead */
html:not(.js) .nav__toggle { display: none; }
html:not(.js) .nav__menu {
  display: flex;
  flex-wrap: wrap;
  position: static;
  box-shadow: none;
  border: 0;
  padding: 0 0 var(--space-xs);
}
html:not(.js) .nav { flex-wrap: wrap; }

.nav__link {
  display: block;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--color-neutral);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav__menu li:last-child .nav__link {
  border-bottom: 0;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--color-accent-strong);
}

/* Active section: thin underline, as in the reference */
.nav__link.is-active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
}


/* ==========================================================================
   7. HERO
   A painted, misty sky; the name in handwriting; and the portrait in a
   lace frame that overlaps into the next section.
   ========================================================================== */
.hero {
  position: relative;
  overflow-x: clip;                  /* decorations never cause side-scroll */
  padding-block: 4rem 0;
  background: var(--hero-bg);
  text-align: center;
}

/* The setting sun, a soft painted disc low on the horizon */
.hero::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 62%;
  width: clamp(6rem, 14vw, 11rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sun-core) 0 32%, var(--sun-mid) 56%, transparent 72%);
  filter: blur(1.5px);
  opacity: var(--sun-opacity);
  pointer-events: none;
}

/* Soft painterly clouds (the SVG in the HTML) */
.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--hero-art-opacity);
}

.hero__stroke--sage       { fill: var(--cloud-fill); }
.hero__stroke--terracotta { fill: var(--cloud-rose); opacity: 0.6; }
.hero__stroke--line {
  fill: none;
  stroke: var(--cloud-fill);
  stroke-width: 26;
  stroke-linecap: round;
}

/* A little flock of pixel doves flying home at sunset */
.hero::after {
  content: "";
  position: absolute;
  top: 9%;
  right: 5%;
  width: clamp(7rem, 16vw, 13rem);
  height: clamp(3.5rem, 8vw, 6.5rem);
  opacity: 0.45;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' shape-rendering='crispEdges'%3E%3Cpath fill='%237E6A70' d='M2 0h2v1H2zM2 1h3v1H2zM3 2h3v1H3zM3 3h4v1H3zM4 4h4v1H4zM12 4h2v1h-2zM4 5h5v1H4zM11 5h4v1h-4zM0 6h2v1H0zM3 6h10v1H3zM0 7h13v1H0zM1 8h11v1H1zM3 9h7v1H3zM5 10h3v1H5z'/%3E%3C/svg%3E") 100% 0 / 26% auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' shape-rendering='crispEdges'%3E%3Cpath fill='%237E6A70' d='M2 0h2v1H2zM2 1h3v1H2zM3 2h3v1H3zM3 3h4v1H3zM4 4h4v1H4zM12 4h2v1h-2zM4 5h5v1H4zM11 5h4v1h-4zM0 6h2v1H0zM3 6h10v1H3zM0 7h13v1H0zM1 8h11v1H1zM3 9h7v1H3zM5 10h3v1H5z'/%3E%3C/svg%3E") 45% 55% / 17% auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' shape-rendering='crispEdges'%3E%3Cpath fill='%237E6A70' d='M2 0h2v1H2zM2 1h3v1H2zM3 2h3v1H3zM3 3h4v1H3zM4 4h4v1H4zM12 4h2v1h-2zM4 5h5v1H4zM11 5h4v1h-4zM0 6h2v1H0zM3 6h10v1H3zM0 7h13v1H0zM1 8h11v1H1zM3 9h7v1H3zM5 10h3v1H5z'/%3E%3C/svg%3E") 0 100% / 11% auto no-repeat;
}

.hero__inner {
  position: relative;                /* sits above the clouds */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 46rem;
}

.hero__eyebrow {
  margin-bottom: 0.25rem;
  font-family: var(--font-type);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* The name, handwritten */
.hero__title {
  font-family: var(--font-script);
  font-size: clamp(4.25rem, 2.6rem + 8vw, 8.75rem);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: var(--space-s);
  color: var(--color-text);
}

.hero__title-accent {
  color: var(--color-accent-strong);
}

.hero__subtitle {
  margin-inline: auto;
  max-width: 34rem;
  font-family: var(--font-type);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

.hero__tagline {
  margin: var(--space-s) auto 0;
  max-width: 36rem;
  font-size: 1rem;
  color: var(--color-text);
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* LACE FRAME around the portrait.
   Layer 1 (the wrapper's background): a grid of small circles, its outer
   row forms the scalloped lace edge.
   Layer 2 (::before): a solid lace band pierced with tiny holes.
   Layer 3: the photo itself. */
.hero__photo-wrap {
  position: relative;
  z-index: 2;
  width: min(17rem, 74vw);
  margin-bottom: -5rem;              /* overlaps into the next section */
  padding: 1.5rem;
  background: radial-gradient(circle at 8px 8px, var(--color-lace) 6.6px, transparent 7.2px) 0 0 / 16px 16px;
  filter: drop-shadow(0 18px 26px rgba(40, 44, 40, 0.22));
}

.hero__photo-wrap::before {
  content: "";
  position: absolute;
  inset: 7px;
  background: radial-gradient(circle, transparent 1.5px, var(--color-lace) 2.1px) 0 0 / 9px 9px;
}

/* A postmark stamped over the top corner, the lace frame becomes a
   posted stamp: two rings plus wavy cancellation lines */
.hero__photo-wrap::after {
  content: "";
  position: absolute;
  top: -1.1rem;
  right: -4rem;
  width: 7.5rem;
  height: 3.75rem;
  transform: rotate(-8deg);
  opacity: 0.55;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='none' stroke='%236B4A52' stroke-width='1.6'%3E%3Ccircle cx='30' cy='30' r='24'/%3E%3Ccircle cx='30' cy='30' r='18.5' stroke-dasharray='2 3'/%3E%3Cpath d='M58 18q8-5 15 0t15 0 15 0 15 0M58 26q8-5 15 0t15 0 15 0 15 0M58 34q8-5 15 0t15 0 15 0 15 0M58 42q8-5 15 0t15 0 15 0 15 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A fine line around the photo, like the edge of a mount */
.hero__photo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--color-lace), 0 0 0 5px rgba(120, 96, 88, 0.35);
}

/* The section after the hero makes room for the overlapping portrait */
.hero + .section {
  padding-top: calc(var(--space-xl) + 5rem);
}

/* Torn-paper edge where the painted sky meets the page */
.hero + .section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  height: 18px;
  background: var(--color-bg);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V11l5-3 6 4 7-6 6 4 7-5 7 4 6-2 6 4 7-7 6 4 7-2 7 5 6-4 7 2 6-4 7 5 7-3 6 4 4-3v14z'/%3E%3C/svg%3E") bottom / 120px 18px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V11l5-3 6 4 7-6 6 4 7-5 7 4 6-2 6 4 7-7 6 4 7-2 7 5 6-4 7 2 6-4 7 5 7-3 6 4 4-3v14z'/%3E%3C/svg%3E") bottom / 120px 18px repeat-x;
}


/* ==========================================================================
   8. ABOUT
   ========================================================================== */
.about {
  display: grid;
  gap: var(--space-l);
}

.about__text p:first-child {
  font-size: 1.1875rem;              /* slightly larger lead paragraph */
}

/* Framed box, like a label card in a gallery */
.about__areas {
  position: relative;
  align-self: start;
  padding: var(--space-m);
  border: 1px solid var(--color-neutral);
  background: var(--color-surface);
  outline: 1px solid var(--color-neutral);
  outline-offset: -8px;
}

.about__areas-title {
  margin-bottom: var(--space-s);
  font-family: var(--font-type);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ==========================================================================
   9. EDUCATION TIMELINE
   ========================================================================== */
.timeline {
  position: relative;
  list-style: none;
  padding-left: 1.75rem;
}

/* Vertical line */
.timeline::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.4rem;
  width: 1px;
  background: var(--color-input-border);
  opacity: 0.5;
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-l);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* Timeline marker: a small open diamond */
.timeline__item::before {
  content: "";
  position: absolute;
  top: 1.7rem;
  left: -1.75rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.05rem;
  border: 1px solid var(--color-accent-strong);
  background: var(--color-surface-alt);
  transform: rotate(45deg);
}

.timeline__item:first-child::before {
  background: var(--color-accent-strong);
}

/* WASHI TAPE, a strip of translucent patterned tape "holding" a card
   to the page. Shared by the education cards and the interests box. */
.timeline__card::after,
.about__areas::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 6.5rem;
  height: 1.4rem;
  transform: translateX(-50%) rotate(-2.5deg);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.32) 0 5px, transparent 5px 10px),
    var(--tape-rose);
  /* slightly torn ends */
  clip-path: polygon(0 12%, 4% 0, 96% 6%, 100% 0, 98% 50%, 100% 100%, 4% 94%, 0 100%, 2% 50%);
  pointer-events: none;
}

.timeline__item:nth-child(2) .timeline__card::after {
  left: 18%;
  transform: translateX(-50%) rotate(3deg);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.32) 0 5px, transparent 5px 10px),
    var(--tape-gold);
}

.about__areas::before {
  left: auto;
  right: -1.2rem;
  top: 0.6rem;
  width: 5.5rem;
  transform: rotate(38deg);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.32) 0 5px, transparent 5px 10px),
    var(--tape-gold);
}

/* PRESSED FLOWERS, delicate line-drawn sprigs tucked beside boxes */
.about__areas::after,
.form::after {
  content: "";
  position: absolute;
  width: 4.6rem;
  height: 6.9rem;
  opacity: 0.85;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90' fill='none' stroke='%23B77A7F' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 88C28 62 34 40 30 12'/%3E%3Cpath d='M30 70C18 66 12 58 10 50c10 2 17 10 20 20zM31 55c11-5 17-13 19-21-10 2-17 10-19 21zM30 38c-10-4-14-12-15-20 9 3 14 11 15 20z'/%3E%3Cpath d='M30 12c-3-3-3-7 0-10 3 3 3 7 0 10z' fill='%23E2BE6E' stroke='%23C9A24A'/%3E%3Ccircle cx='24' cy='6' r='1.5' fill='%23C98B8B' stroke='none'/%3E%3Ccircle cx='37' cy='8' r='1.2' fill='%23C98B8B' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.about__areas::after {
  bottom: -1.6rem;
  left: -1.4rem;
  transform: rotate(-18deg);
}

.form::after {
  bottom: -1.4rem;
  right: -0.8rem;
  transform: rotate(16deg) scaleX(-1);
}

/* Paper card with an inner mount line */
.timeline__card {
  position: relative;
  padding: var(--space-m);
  border: 1px solid var(--color-neutral);
  background: var(--color-surface);
  outline: 1px solid var(--color-neutral);
  outline-offset: -8px;
}

.timeline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.timeline__title {
  font-size: 1.45rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.timeline__place {
  color: var(--color-text-muted);
}

.timeline__details {
  display: grid;
  gap: var(--space-s);
  margin: var(--space-m) 0 0;
}

.timeline__detail dt {
  font-family: var(--font-type);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.timeline__detail dd {
  margin: 0.15rem 0 0;
  max-width: 68ch;
}

/* Stat badges (16.4/20, Merit ×2) */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
  list-style: none;
}

.stat {
  display: flex;
  flex-direction: column;
  min-width: 9.5rem;
  padding: 0.8rem 1.2rem;
  background: var(--color-accent-soft);
  border-left: 2px solid var(--color-accent-strong);
}

.stat__value {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: lining-nums;
  color: var(--color-text);
}

.stat__unit {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

.stat__label {
  font-family: var(--font-type);
  font-size: 0.8125rem;
  color: var(--color-text);
}


/* ==========================================================================
   10. CARDS (experience + community)
   ========================================================================== */
.card-grid {
  display: grid;
  gap: var(--space-m);
}

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  border: 1px solid var(--color-neutral);
  background: var(--color-surface);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* A thin painted line draws across the top of a card on hover */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--color-mist), var(--color-accent), var(--color-ochre));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-3px);
}

.card:hover::before {
  transform: scaleX(1);
}

/* Featured card gets an inner mount line, like a framed print */
.card--featured {
  outline: 1px solid var(--color-neutral);
  outline-offset: -8px;
}

.card__title {
  font-size: 1.35rem;
  line-height: 1.3;
  margin-bottom: 0.45rem;
}

.card__subtitle {
  margin-bottom: var(--space-s);
  font-family: var(--font-type);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-secondary-strong);
}

.card__list {
  display: grid;
  gap: 0.55rem;
  list-style: none;
}

/* Custom list marker: a short hairline dash */
.card__list li {
  position: relative;
  padding-left: 1.3rem;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.65rem;
  height: 1px;
  background: var(--color-accent-strong);
}

/* 4/20 → 12/20 highlight */
.result {
  margin: var(--space-xs) 0 var(--space-m);
  padding: var(--space-m);
  background: var(--color-accent-soft);
}

.result__visual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.result__from {
  font-size: 2.6rem;
  color: var(--color-text-muted);
}

.result__to {
  font-size: 3.6rem;
  color: var(--color-accent-strong);
}

.result__unit {
  font-size: 0.45em;
  color: var(--color-text-muted);
}

.result__arrow {
  width: 3.25rem;
  height: auto;
  color: var(--color-secondary-strong);
}

.result__caption {
  margin-top: 0.6rem;
  font-family: var(--font-type);
  font-size: 0.875rem;
  color: var(--color-text);
}


/* ==========================================================================
   11. SKILLS (competencies + languages)
   ========================================================================== */
.skills {
  display: grid;
  gap: var(--space-l);
}

.skills__heading {
  margin-bottom: var(--space-m);
  font-family: var(--font-type);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.competencies {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  list-style: none;
}

.competency {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-neutral);
  background: var(--color-surface);
  transition: border-color 0.25s ease;
}

.competency:hover {
  border-color: var(--color-accent);
}

/* Line icons: stroke-only, in a soft sage circle */
.competency__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  fill: none;
  stroke: var(--color-accent-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.languages {
  display: grid;
  gap: 0.6rem;
  list-style: none;
}

.language {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name  label"
    "level level";
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-neutral);
  background: var(--color-surface);
}

.language__name {
  grid-area: name;
  font-weight: 600;
}

.language__label {
  grid-area: label;
  font-family: var(--font-type);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* Four-segment level indicator; data-level controls how many are filled */
.lang-level {
  grid-area: level;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.lang-level span {
  height: 4px;
  background: var(--color-neutral);
}

.lang-level[data-level="1"] span:nth-child(-n+1),
.lang-level[data-level="2"] span:nth-child(-n+2),
.lang-level[data-level="3"] span:nth-child(-n+3),
.lang-level[data-level="4"] span:nth-child(-n+4) {
  background: var(--color-accent);
}


/* ==========================================================================
   12. INTERESTS, a small "collection" of painted swatches
   Each card shows an abstract painted colour study (pure CSS, no images)
   above a gallery-style caption.
   ========================================================================== */
.interests {
  display: grid;
  gap: var(--space-l) var(--space-m);
  list-style: none;
}

.interest {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* The painted swatch */
.interest::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-s);
  border: 1px solid rgba(47, 49, 45, 0.08);
  background-blend-mode: soft-light, normal, normal, normal;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.09' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.1 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    var(--swatch-a), var(--swatch-b), var(--swatch-c);
  transition: transform 0.4s ease;
}

.interest:hover::before {
  transform: scale(1.015);
}

/* Colour studies, a sunset in four moods: lilac dusk, rose, gold, and
   a sun sinking into a violet sky */
.interest--sage {
  --swatch-a: radial-gradient(40% 45% at 30% 30%, #F6E6D2 0%, transparent 70%);
  --swatch-b: radial-gradient(55% 60% at 72% 65%, #A98BAA 0%, transparent 70%);
  --swatch-c: linear-gradient(135deg, #D2BCCD 0%, #9C86A6 100%);
}

.interest--terracotta {
  --swatch-a: radial-gradient(40% 45% at 35% 35%, #F8DFB9 0%, transparent 70%);
  --swatch-b: radial-gradient(55% 60% at 70% 72%, #D48688 0%, transparent 70%);
  --swatch-c: linear-gradient(160deg, #EFC3AE 0%, #C27F7A 100%);
}

.interest--neutral {
  --swatch-a: radial-gradient(45% 50% at 60% 32%, #FFF4D8 0%, transparent 70%);
  --swatch-b: radial-gradient(60% 55% at 25% 80%, #E6B06E 0%, transparent 70%);
  --swatch-c: linear-gradient(180deg, #F3D6B2 0%, #D9A06C 100%);
}

.interest--wide {
  --swatch-a: radial-gradient(30% 36% at 30% 64%, #FFD98A 0%, transparent 70%);
  --swatch-b: radial-gradient(60% 60% at 75% 30%, #C77D8E 0%, transparent 70%);
  --swatch-c: linear-gradient(200deg, #E8AFA3 0%, #7E6190 100%);
}

/* Hand-drawn shape floating over the swatch */
.interest__shape {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 4.5rem;
  height: 4.5rem;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.75;
  pointer-events: none;
}

.interest__title {
  font-size: 1.35rem;
  line-height: 1.3;
}

.interest__text {
  margin-top: 0.3rem;
  color: var(--color-text-muted);
}


/* ==========================================================================
   13. CONTACT + FORM
   ========================================================================== */
.contact {
  display: grid;
  gap: var(--space-l);
}

.contact__list {
  display: grid;
  gap: var(--space-m);
  list-style: none;
  align-content: start;
}

.contact__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem;
  border: 1px solid var(--color-neutral);
  border-radius: 50%;
  background: var(--color-surface);
  fill: none;
  stroke: var(--color-accent-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact__label {
  display: block;
  font-family: var(--font-type);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact__link,
.contact__value {
  font-size: 1.0625rem;
  overflow-wrap: anywhere;           /* long emails/URLs never cause side-scroll */
}

.form {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--color-neutral);
  background: var(--color-surface);
  outline: 1px solid var(--color-neutral);
  outline-offset: -8px;
}

.form__field {
  display: grid;
  gap: 0.35rem;
}

.form__label {
  font-family: var(--font-type);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.form__input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-input-border);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;              /* ≥16px stops iOS zooming into fields */
  line-height: 1.5;
  transition: border-color 0.2s ease;
}

.form__input:focus-visible {
  border-color: var(--color-focus);
  outline-offset: 1px;
}

.form__input--textarea {
  min-height: 9rem;
  resize: vertical;
}

.form__input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form__error {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-error);
}

.form__error:empty {
  display: none;
}

.form__submit {
  justify-self: start;
}

.form__status {
  margin: 0;
  font-weight: 600;
}

.form__status.is-success { color: var(--color-accent-strong); }
.form__status.is-error   { color: var(--color-error); }

/* Spam trap, hidden from everyone */
.form__honeypot {
  display: none;
}


/* ==========================================================================
   14. FOOTER + LOGOS
   ========================================================================== */
.site-footer {
  padding-block: var(--space-l);
  border-top: 1px solid var(--color-neutral);
  background: var(--color-surface-alt);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-type);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.site-footer__links {
  display: flex;
  gap: 0.5rem;
  list-style: none;
}

.site-footer__icon-link {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-neutral);
  border-radius: 50%;
  color: var(--color-accent-strong);
  transition: background-color 0.2s ease;
}

.site-footer__icon-link:hover {
  background: var(--color-accent-soft);
}

.site-footer__icon-link svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-type);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Partner / funding logos, the last row of the page */
.site-footer__logos {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-neutral);
}

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
}

/* Logos keep a white plate in both themes so their official colours stay intact */
.logos__item {
  display: flex;
  align-items: center;
  max-width: 100%;
  padding: 0.75rem;
  background: #FFFFFF;
  border: 1px solid var(--color-neutral);
}

.logos__img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Youth and Lifelong Learning Foundation */
.logos__img--square {
  height: 5.5rem;
}

/* Erasmus+ co-funding logo */
.logos__img--wide {
  height: 3.75rem;
}


/* ==========================================================================
   15. SCROLL REVEAL
   Elements with .reveal fade in as they enter the viewport. The hidden
   starting state only applies when JavaScript is running (html.js), so
   content is never invisible if JS fails.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   16. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ---------- ≥ 600px: small tablets ---------- */
@media (min-width: 600px) {
  :root {
    --gutter: 1.5rem;
  }

  .section {
    padding-block: 5.5rem;
  }

  .hero {
    padding-top: 5rem;
  }

  .hero__photo-wrap {
    width: 19rem;
  }

  .competencies {
    grid-template-columns: repeat(2, 1fr);
  }

  .interests {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline__card,
  .card,
  .form,
  .about__areas {
    padding: 2rem;
  }

  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- ≥ 900px: tablets landscape / small laptops ---------- */
@media (min-width: 900px) {
  :root {
    --gutter: 2rem;
    --text-base: 1.125rem;           /* 18px on larger screens */
  }

  .hero {
    padding-top: 6rem;
  }

  .hero__photo-wrap {
    width: 21rem;
    margin-bottom: -7rem;
  }

  .hero + .section {
    padding-top: calc(5.5rem + 7rem);
  }

  .about {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-xl);
  }

  .timeline {
    padding-left: 2.5rem;
  }

  .timeline__item::before {
    left: -2.5rem;
  }

  .card-grid--two {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  /* Featured tutoring card fills the left column; the other two
     experience cards stack beside it */
  .card-grid--two .card--featured {
    grid-row: span 2;
  }

  .card-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }

  .skills {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-xl);
  }

  .contact {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-xl);
  }

  #education .section__header::after,
  #interests .section__header::after {
    right: 8%;
    width: 4.5rem;
    height: 3.1rem;
  }
}

/* ---------- ≥ 1200px: desktops ---------- */
@media (min-width: 1200px) {
  /* Desktop navigation: links inline, hamburger hidden.
     (Starts at 1200px so the longer Portuguese/Spanish labels fit.
     Keep in sync with the breakpoint in js/main.js.) */
  .nav__toggle {
    display: none;
  }

  .nav__actions {
    order: 3;
    margin-left: 0.75rem;
  }

  .nav__menu,
  .nav__menu.is-open {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    position: static;
    order: 2;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav__link {
    padding: 0.5rem 0.6rem;
    border-bottom: 0;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .hero {
    padding-top: 6.5rem;
  }

  .hero__photo-wrap {
    width: 23rem;
  }

  /* Interests: one gallery row of four, like a collection page */
  .interests {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   17. REDUCED MOTION
   For visitors who ask their system for less motion: no smooth scrolling,
   no fades, no transitions.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .card:hover,
  .interest:hover::before {
    transform: none;
  }
}