/* ==========================================================
   RESUME SITE — MAIN STYLESHEET
   Table of contents
     1. Fonts
     2. Design tokens (CSS variables)
     3. Base / reset
     4. Layout helpers (container, section, split)
     5. Typography
     6. Navigation
     7. Buttons
     8. Hero
     9. Lavender band (career objective)
    10. Skill flip cards
    11. Experience & Education (skill chips, cards, number strip)
    12. Contact chat bubbles / footer bar
    13. Image placeholder slots
    14. Scroll fade-in animation
    15. Responsive (mobile) rules
    16. Welcome screen (home page)
   ========================================================== */


/* ---------- 1. FONTS ----------
   RoxboroughCF is a local file in /fonts.
   Montserrat is loaded from Google Fonts in index.html. */
@font-face {
  font-family: "RoxboroughCF";
  src: url("../fonts/RoxboroughCF.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* show fallback text instantly, swap when loaded */
}


/* ---------- 2. DESIGN TOKENS ----------
   Change a colour or font here and it updates everywhere. */
:root {
  /* Palette */
  --brown: #64413A;
  --lavender: #C8ABD1;
  --cream: #FFF7EC;

  /* Colour roles used by the light sections */
  --page: var(--cream);      /* background of light sections */
  --ink: var(--brown);       /* text on light sections */
  --band: var(--brown);      /* navbar + brown sections */
  --card-bg: #fff;
  --line: rgba(100, 65, 58, 0.15);

  /* Font stacks, each with fallbacks */
  --font-headline: "RoxboroughCF", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Spacing and sizing */
  --nav-height: 72px;
  --section-space: clamp(5rem, 12vw, 9rem); /* generous whitespace */
  --container: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- 3. BASE / RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Stop the fixed navbar from covering headings when jumping to #anchors */
  scroll-padding-top: var(--nav-height);
}

body {
  margin: 0;
  /* Footer sits at the bottom even on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--page);
}

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

a {
  color: inherit;
}

/* Hidden on screen but still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

button {
  font: inherit;
}


/* ---------- 4. LAYOUT HELPERS ---------- */

/* Centres content and keeps a side gutter on small screens */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section {
  padding-block: var(--section-space);
}

/* main fills the space above the footer, and its last section
   stretches with it so no gap shows on short pages */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
main > section:last-child {
  flex: 1;
}

/* First section on inner pages: clear the fixed navbar */
.page-top {
  padding-top: calc(var(--nav-height) + var(--section-space) * 0.6);
}

/* Colour themes for sections */
.section--brown {
  background: var(--band);
  color: var(--cream);
}
.section--brown .headline {
  color: var(--lavender);
}

.section--cream {
  background: var(--page);
  color: var(--ink);
}

.section--lavender {
  background: var(--lavender);
  color: var(--brown);
}

/* Two-column split: text on one side, image on the other.
   Stacks to one column on mobile (see section 15). */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

/* Swap sides: image on the left, text on the right */
.split--reverse .split__text {
  order: 2;
}


/* Faint data / project-management drawing behind a page's top section,
   so the theme reads before any text does. Colour is baked into the SVG
   (lavender for brown sections, brown for cream); opacity keeps it quiet. */
.has-pattern {
  position: relative;
  isolation: isolate;
}
.has-pattern::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(100%, 52rem);
  z-index: -1;
  background: url("../images/data-pattern-brown.svg") center top / cover no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.section--brown.has-pattern::before {
  background-image: url("../images/data-pattern-lavender.svg");
  opacity: 0.16;
}


/* ---------- 5. TYPOGRAPHY ---------- */
.headline {
  font-family: var(--font-headline);
  font-weight: normal;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0 0 1.5rem;
}

/* Fluid sizes: scale smoothly between phone and desktop */
.headline--xl {
  font-size: clamp(3.5rem, 11vw, 8rem);
}
.headline--lg {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
}

/* Montserrat SemiBold for subheadings */
.subheading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
}

/* Small uppercase label above a headline */
.eyebrow {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  opacity: 0.8;
}

.lead {
  font-size: 1.15rem;
  max-width: 34ch;
  margin: 0 0 2.5rem;
}

/* Longer "about me" paragraph under the hero lead */
.hero__about {
  max-width: 60ch;
  margin: -1.25rem 0 2.5rem;
  line-height: 1.7;
}

p {
  margin: 0 0 1rem;
}


/* ---------- 6. NAVIGATION ---------- */
.navbar {
  position: fixed;
  inset: 0 0 auto 0; /* top, right, left = 0 */
  z-index: 100;
  background: var(--band);
  color: var(--cream);
  transition: box-shadow 0.3s ease;
}

/* Added by JS once the page is scrolled */
.navbar.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.navbar__logo {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lavender);
}

.navbar__links {
  margin-left: auto;
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav links: a lavender underline grows in on hover */
.navbar__links a {
  position: relative;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.25rem;
}

.navbar__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--lavender);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

/* The page you're on stays underlined and lavender */
.navbar__links a[aria-current="page"] {
  color: var(--lavender);
}

.navbar__links a:hover::after,
.navbar__links a:focus-visible::after,
.navbar__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Hamburger button — hidden on desktop */
.navbar__toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--lavender);
  cursor: pointer;
  padding: 0.25rem;
}


/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease);
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform 0.3s var(--ease);
}

/* Lavender outline that fills in on hover */
.btn--lavender {
  color: var(--lavender);
}
.btn--lavender:hover,
.btn--lavender:focus-visible {
  background: var(--lavender);
  color: var(--brown);
  border-color: var(--lavender);
}

/* Brown outline version, for cream backgrounds */
.btn--brown {
  color: var(--brown);
}
.btn--brown:hover,
.btn--brown:focus-visible {
  background: var(--brown);
  color: var(--cream);
  border-color: var(--brown);
}

/* Buttons side by side, wrapping onto two lines on small screens */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Arrow nudges right on hover */
.btn:hover svg {
  transform: translateX(4px);
}


/* ---------- 8. HERO ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Extra top space so the fixed nav doesn't overlap */
  padding-top: calc(var(--nav-height) + var(--section-space) * 0.5);
}


/* Typing effect in the hero label, with a blinking caret */
.typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.15em;
  background: var(--lavender);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
  50% { opacity: 0; }
}


/* Email / GitHub / LinkedIn circles under the hero photo */
.socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.socials a {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(200, 171, 209, 0.5);
  border-radius: 50%;
  color: var(--lavender);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease);
}
.socials a:hover,
.socials a:focus-visible {
  background: var(--lavender);
  color: var(--brown);
  transform: translateY(-3px);
}
.socials svg {
  width: 1.25rem;
  height: 1.25rem;
}


/* ---------- 9. LAVENDER BAND (career objective) ---------- */
.band__inner {
  max-width: 900px;
  text-align: center;
}

.band__quote {
  font-family: var(--font-headline);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.4;
  margin: 0;
}


/* Highlighted goals inside the quote: a cream highlighter swipes in
   when the band scrolls into view (shows fully without JS) */
.hl {
  color: inherit;
  padding: 0 0.1em;
  background: linear-gradient(transparent 64%, rgba(255, 247, 236, 0.9) 64%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; /* highlight each line when a phrase wraps */
  box-decoration-break: clone;
}
.js .hl {
  background-size: 0% 100%;
  transition: background-size 1s var(--ease);
}
.js .is-visible .hl { background-size: 100% 100%; }
.js .is-visible .hl:nth-of-type(1) { transition-delay: 0.5s; }
.js .is-visible .hl:nth-of-type(2) { transition-delay: 0.9s; }
.js .is-visible .hl:nth-of-type(3) { transition-delay: 1.3s; }

/* Goal cards: one small illustration per highlighted goal */
.goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.goal {
  padding: 1.75rem 1.25rem 1.5rem;
  background: var(--cream);
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.goal:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(100, 65, 58, 0.15);
}
.goal .subheading {
  margin-top: 1rem;
}
.goal p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* "See the project" link on the Data Analysis card */
.goal__link {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.goal__link:hover,
.goal__link:focus-visible {
  border-bottom-color: var(--lavender);
}

.goal__art {
  width: 7.5rem;
  height: 5rem;
  fill: none;
  stroke: var(--brown);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.goal__bar,
.goal__task,
.goal__star {
  fill: var(--lavender);
  transform-box: fill-box;
  transition: transform 0.6s var(--ease);
}
.goal__dot {
  fill: var(--brown);
}

/* Little hover animations: bars grow, tasks slide, star spins */
.goal__bar { transform-origin: bottom; }
.goal:hover .goal__bar { transform: scaleY(1.15); }
.goal:hover .goal__bar:nth-of-type(2) { transform: scaleY(1.3); }
.goal__task { transform-origin: left; }
.goal:hover .goal__task { transform: scaleX(1.12); }
.goal__star { transform-origin: center; }
.goal:hover .goal__star { transform: rotate(72deg) scale(1.2); }


/* ---------- 10. SKILL CARDS ---------- */
/* "Flip a card below" in the Skills intro: bold, so visitors know
   the cards are interactive */
.flip-cue {
  font-weight: 600;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: clamp(3rem, 8vw, 6rem);
}

/* Flip cards (Skills page): front shows the group, back shows the skills.
   Both faces share one grid cell, so the card is as tall as the taller face. */
.flip-card {
  perspective: 1400px;
  cursor: pointer;
}

.flip-card__inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
}
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem 2rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: box-shadow 0.4s var(--ease), border-color 0.4s ease;
}
.flip-card__face--back {
  transform: rotateY(180deg);
}
.flip-card:hover .flip-card__face {
  border-color: var(--lavender);
  box-shadow: 0 18px 40px rgba(100, 65, 58, 0.12);
}

.flip-card__count {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* "Flip me" pill, pinned to the bottom of each face */
.flip-card__hint {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.45rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brown);
  background: rgba(200, 171, 209, 0.35);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.flip-card__hint:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}
.flip-card__face--back .flip-card__hint {
  margin-top: 1.5rem;
}
.flip-card__hint svg {
  width: 0.95rem;
  height: 0.95rem;
}
.flip-card:hover .flip-card__hint,
.flip-card__hint:focus-visible {
  background: var(--lavender);
}
/* The arrow gives a little spin on hover, hinting at the flip */
.flip-card:hover .flip-card__face--front .flip-card__hint svg {
  animation: hint-spin 0.8s var(--ease);
}
@keyframes hint-spin {
  to { transform: rotate(360deg); }
}

/* Skills inside a card: two columns, each with a small lavender square */
.skill-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.4;
}
.skill-list:not(.skill-list--levels) li {
  position: relative;
  padding-left: 1.2rem;
}
.skill-list:not(.skill-list--levels) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.6em;
  height: 0.6em;
  background: var(--lavender);
}

/* Skills with a proficiency level: one per row, name left, dots right */
.skill-list--levels {
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.skill-list--levels li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.skill-list--levels li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Three dots: filled = level reached */
.level__dots {
  display: inline-flex;
  gap: 0.3rem;
}
.level__dots i {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--brown);
  border-radius: 50%;
}
.level__dots i.is-on {
  background: var(--lavender);
  border-color: var(--lavender);
}

/* Legend for the dots, under the Skills intro */
.level-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.8rem;
  opacity: 0.85;
}
.level-key > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.card__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 1.5rem;
  color: var(--ink);
  stroke-width: 1.5;
}


/* ---------- 11. SHARED ENTRY STYLES ----------
   Date label and bullet list used on the Projects page,
   and the fade-in for anything that opens. */
.timeline__date {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.4rem;
}

.timeline__list {
  margin: 0;
  padding-left: 1.1rem;
}
.timeline__list li {
  margin-bottom: 0.4rem;
}

@keyframes open-entry {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}


/* ---------- 11b. SKILL CHIPS ---------- */
.skill-filter {
  margin-top: 2rem;
}

.skill-filter__label {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 1rem;
}

.skill-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  padding: 0.5rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}
.chip:hover,
.chip:focus-visible {
  border-color: var(--lavender);
  transform: translateY(-2px);
}
.chip[aria-pressed="true"] {
  background: var(--lavender);
  border-color: var(--lavender);
  color: var(--brown);
}

.skill-filter__status {
  min-height: 1.7em; /* keeps the layout still when text appears */
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.75;
}

/* ---------- 11c. EXPERIENCE JOURNEY ----------
   Two lanes side by side, each newest first: Work on the left,
   Leadership on the right. Each lane has its own line with an icon
   "stop" per role. The lines sit on the inner edges, so together
   they read as one spine down the middle of the page. */
.journey {
  --node: 3rem;
  --gap: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem;
  align-items: start;
}

/* Lane heading: coloured dot + "Work" / "Leadership" */
.journey__lane-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem 0 2rem;
  padding-bottom: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}
.journey__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--brown);
}
.journey__lane--lead .journey__dot {
  background: var(--lavender);
}

.journey__stops {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The lane's line, through the middle of its icon column:
   on the right edge for Work, the left edge for Leadership */
.journey__stops::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: var(--line);
}
.journey__lane--work .journey__stops::before { right: calc(var(--node) / 2 - 1px); }
.journey__lane--lead .journey__stops::before { left: calc(var(--node) / 2 - 1px); }

/* Each stop: date on top of the card, icon beside both */
.journey__item {
  display: grid;
  column-gap: var(--gap);
  align-items: start;
  margin-bottom: 1.5rem;
}
.journey__date { grid-row: 1; }
.journey__card { grid-row: 2; }
.journey__node { grid-row: 1 / span 2; }

/* Work: card, then icon on the right. Leadership: icon, then card. */
.journey__item--work { grid-template-columns: 1fr var(--node); }
.journey__item--work .journey__date,
.journey__item--work .journey__card { grid-column: 1; }
.journey__item--work .journey__node { grid-column: 2; }
.journey__item--work .journey__date { text-align: right; }

.journey__item--lead { grid-template-columns: var(--node) 1fr; }
.journey__item--lead .journey__node { grid-column: 1; }
.journey__item--lead .journey__date,
.journey__item--lead .journey__card { grid-column: 2; }

.journey__date {
  margin: 0;
  padding-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Icon circle sitting on the line */
.journey__node {
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  margin-top: 1.75rem; /* lines up with the card, below the date */
  border-radius: 50%;
  background: var(--brown);
  color: var(--cream);
  box-shadow: 0 0 0 6px var(--page); /* gap so the line doesn't touch it */
  transition: box-shadow 0.35s var(--ease), opacity 0.4s ease;
}
.journey__node svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.6;
}
.journey__item--lead .journey__node {
  background: var(--lavender);
  color: var(--brown);
}

/* An open card gets a lavender ring around its icon, so it's easy to
   see which roles are expanded (no effect on hover) */
.journey__item:has(.journey__card[open]) .journey__node {
  box-shadow: 0 0 0 4px var(--page), 0 0 0 6px var(--lavender);
}

/* The card: closed by default, the whole top part is clickable */
.journey__card {
  min-width: 0; /* lets long titles wrap instead of widening the grid */
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease), opacity 0.4s ease;
}
.journey__card:hover,
.journey__card[open] {
  border-color: var(--lavender);
  box-shadow: 0 10px 28px -16px rgba(100, 65, 58, 0.35);
}
.journey__card:hover {
  transform: translateY(-2px);
}

.journey__card summary {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  padding: 1.15rem 1.4rem;
  list-style: none;
  cursor: pointer;
}
.journey__card summary::-webkit-details-marker {
  display: none;
}
.journey__card summary:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 3px;
  border-radius: 10px;
}

.journey__heading,
.journey__place,
.journey__highlight {
  grid-column: 1;
  display: block;
}
.journey__heading {
  margin-bottom: 0.15rem;
}
.journey__place {
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
}

/* The one highlight: a big serif number, or a short phrase */
.journey__highlight {
  grid-column: 1 / -1; /* full card width, under the pill too */
  margin-top: 0.7rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.journey__highlight strong {
  font-family: var(--font-headline);
  font-weight: normal;
  font-size: 1.9rem;
  line-height: 1;
  margin-right: 0.3rem;
}

/* "See details +" pill — says plainly that the card opens */
.journey__toggle {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem 0.4rem 0.95rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
/* Plus sign drawn in CSS; its vertical bar disappears when open (= minus) */
.journey__toggle::after {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: background-size 0.3s var(--ease);
}
.journey__card[open] .journey__toggle::after {
  background-size: 100% 1.5px, 1.5px 0;
}
.journey__card summary:hover .journey__toggle,
.journey__card[open] .journey__toggle {
  background: var(--lavender);
  border-color: var(--lavender);
  color: var(--brown);
}
.journey__toggle .when-open,
.journey__card[open] .journey__toggle .when-closed {
  display: none;
}
.journey__card[open] .journey__toggle .when-open {
  display: inline;
}

/* What's inside once opened */
.journey__list {
  margin: 0 1.4rem;
  padding: 1rem 0 1.2rem 1.1rem;
  border-top: 1px solid var(--line);
}
.journey__list li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}
.journey__card[open] .journey__list {
  animation: open-entry 0.45s var(--ease);
}
.journey__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.4rem 1.4rem 1.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.journey__link svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Skill filter: matches stay bright, the rest fade back */
.journey.is-filtering .journey__item:not(.is-match) .journey__card,
.journey.is-filtering .journey__item:not(.is-match) .journey__node {
  opacity: 0.3;
}

/* Label row above the chips, with the Open all / Close all button */
.skill-filter__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}
.skill-filter__top .skill-filter__label {
  margin: 0;
}
.journey-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
}
.journey-toggle-all svg {
  width: 0.95rem;
  height: 0.95rem;
}
.journey-toggle-all:hover,
.journey-toggle-all:focus-visible {
  color: var(--brown);
  border-color: var(--lavender);
}

/* ---------- 11d. EDUCATION PAGE ----------
   Number strip, award tiles, and the FSU card. Icons only on the
   two section headings, to keep the page calm. */

/* Small uppercase heading with a rule under it (and one small icon) */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 4rem 0 1.75rem;
  padding-bottom: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}
.section-label svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Header: everything on the left, framed photo on the right */
.edu-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(14rem, 24vw, 19rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Key numbers: big serif value, small label underneath */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.stat-strip li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stat-strip strong {
  white-space: nowrap; /* keeps "May 2028" on one line */
  font-family: var(--font-headline);
  font-weight: normal;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
}
.stat-strip span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Road to graduation bar: lavender fill + a dot for "you are here".
   --progress is set on the track (by JS, with a fallback in the HTML).
   The fill grows in when the bar scrolls into view. */
.grad-progress {
  max-width: 46rem;
  margin: 2.75rem 0 0;
}
.grad-progress__ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}
.grad-progress__track {
  position: relative;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
}
.grad-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  background: var(--lavender);
  border-radius: inherit;
  transition: width 1.6s var(--ease) 0.3s;
}
.grad-progress__dot {
  position: absolute;
  top: 50%;
  left: var(--progress);
  width: 1.1rem;
  height: 1.1rem;
  background: var(--brown);
  border: 3px solid var(--page);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--lavender);
  transform: translate(-50%, -50%);
  transition: left 1.6s var(--ease) 0.3s;
}
/* Before it's on screen, start empty so it can grow in */
.js .grad-progress:not(.is-visible) .grad-progress__fill { width: 0; }
.js .grad-progress:not(.is-visible) .grad-progress__dot  { left: 0; }

.grad-progress__label {
  margin: 1rem 0 0;
  font-size: 0.85rem;
}
.grad-progress__label strong {
  font-family: var(--font-headline);
  font-weight: normal;
  font-size: 1.5rem;
}

/* Award tiles */
.award-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr)); /* all 5 in one row on desktop */
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.award-tiles li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.3rem 1.4rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lavender);
  border-radius: 10px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.award-tiles li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -16px rgba(100, 65, 58, 0.35);
}
.award-tiles__name {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  line-height: 1.2;
}
.award-tiles__meta {
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.75;
}

/* FSU card: degree info on the left, tag groups on the right */
.school-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 2rem clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lavender);
  border-radius: 10px;
}
.school-feature__name {
  margin: 0.2rem 0 0.6rem;
  font-family: var(--font-headline);
  font-weight: normal;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
}
.school-feature__degree {
  margin: 0 0 0.3rem;
  font-weight: 600;
}
.school-feature .journey__place {
  display: block;
  margin: 0;
}
.school-feature__note {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  line-height: 1.7;
}
.school-feature__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Labelled groups of tags (FSU card) */
.school-details__label {
  margin: 1rem 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}
.school-details__label:first-child {
  margin-top: 0;
}
/* Small rounded labels, like the skill chips but not clickable */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  background: rgba(200, 171, 209, 0.25);
  border-radius: 999px;
}


/* Project entry: screenshot and link buttons under the bullet list */
/* Short intro line under an inner page's headline */
.page-intro {
  max-width: 46rem;
  margin: -0.5rem 0 0;
  line-height: 1.7;
}

/* Projects page: one .project per project, screenshot beside the text.
   Projects after the first get a thin rule above them. */
.project {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: 3.5rem;
}
.project + .project {
  padding-top: 3.5rem;
  border-top: 1px solid var(--ink);
}
.project .project-shot {
  margin: 0;
  max-width: none;
}
.project__title {
  font-size: 1.35rem;
  margin: 0.3rem 0 0.9rem;
}
.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.project__tags li {
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid var(--lavender);
  border-radius: 999px;
  background: rgba(200, 171, 209, 0.25);
}
.project .project-links {
  margin-top: 1.75rem;
}

/* Small labels that split a project entry into the rubric's parts */
.project-label {
  margin: 1rem 0 0.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.project-label:first-child {
  margin-top: 0;
}

/* Lavender mat around the screenshot; lifts on hover like the goal cards */
.project-shot {
  display: block;
  max-width: 640px;
  margin: 1.25rem 0;
  padding: 0.6rem;
  background: var(--lavender);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(100, 65, 58, 0.14);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.project-shot:hover,
.project-shot:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(100, 65, 58, 0.2);
}
/* Left column of a project: screenshot / slides, then any extra images */
.project__media .project-label {
  margin-top: 1.75rem;
}
.post-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  max-width: 34rem;
}

/* Phone frame: dark rounded bezel with a small pill "island" on top */
.phone {
  position: relative;
  display: block;
  padding: 1.6rem 0.55rem 0.9rem;
  background: #1c1c1e;
  border-radius: 2.2rem;
  box-shadow: 0 0 0 2px #3a3a3c, 0 14px 32px rgba(100, 65, 58, 0.22);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.phone::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 50%;
  width: 28%;
  height: 0.55rem;
  background: #000;
  border-radius: 999px;
  transform: translateX(-50%);
}
.phone:hover,
.phone:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px #3a3a3c, 0 22px 44px rgba(100, 65, 58, 0.28);
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
}

/* Small note under a project's tags (e.g. when it ran) */
.project__note {
  margin: -0.5rem 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  font-style: italic;
  opacity: 0.85;
}
.project__note--after {
  margin: 1rem 0 0;
}
.project__note a {
  font-style: normal;
  font-weight: 600;
}

/* Slide viewer: same lavender mat, but it isn't a link, so no lift */
.slides:hover {
  transform: none;
  box-shadow: 0 8px 24px rgba(100, 65, 58, 0.14);
}
.slides:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}
.slides__viewport {
  touch-action: pan-y; /* let JS handle sideways swipes */
}
/* .project-shot img sets display: block, which would beat the hidden attribute */
.slides__viewport img[hidden] {
  display: none;
}
.slides__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 0.6rem;
  color: var(--brown);
}
.slides__count {
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}
.slides__btn {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  color: var(--brown);
  background: var(--cream);
  border: 1px solid var(--brown);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.slides__btn:hover,
.slides__btn:focus-visible {
  background: var(--brown);
  color: var(--cream);
}
.slides__btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.project-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.project-links .btn {
  padding: 0.75rem 1.25rem;
}


/* ---------- 12. CONTACT (message window) / FOOTER ---------- */
/* Chat bubbles on the Contact page, inside a message window.
   "them" = the visitor (right, lavender); "me" = Mariana (left, white).
   With JS, .chat--animate hides the bubbles until main.js plays them in;
   they keep their space so the page doesn't jump. */
.chat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 1.1rem 1.4rem 0.9rem;
  list-style: none;
}

.bubble {
  position: relative;
  max-width: 85%;
  overflow-wrap: anywhere; /* lets the long email address wrap on phones */
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--brown);
  border-radius: 1.25rem;
  transition: opacity 0.35s ease, transform 0.45s var(--ease);
}
.bubble a {
  font-weight: 600;
  text-underline-offset: 3px;
}
.bubble a:hover,
.bubble a:focus-visible {
  text-decoration-thickness: 2px;
}

.bubble--me {
  align-self: flex-start;
  background: #fff;
  border-bottom-left-radius: 0.3rem;
  transform-origin: bottom left;
}
.bubble--them {
  align-self: flex-end;
  background: var(--lavender);
  border-bottom-right-radius: 0.3rem;
  transform-origin: bottom right;
}
/* A little space between each question-and-answer exchange */
.bubble--me + .bubble--them {
  margin-top: 0.6rem;
}

/* Waiting to be played in */
.chat--animate .bubble {
  opacity: 0;
  transform: scale(0.85) translateY(8px);
}
.chat--animate .bubble.is-shown {
  opacity: 1;
  transform: none;
}

/* "Typing…" pill shown where Mariana's next bubble will appear */
.bubble.is-typing::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.6rem;
  height: 2.3rem;
  border-radius: 1.25rem 1.25rem 1.25rem 0.3rem;
  background:
    radial-gradient(circle, var(--brown) 0.18rem, transparent 0.2rem) 0.95rem 50% / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle, var(--brown) 0.18rem, transparent 0.2rem) 1.55rem 50% / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle, var(--brown) 0.18rem, transparent 0.2rem) 2.15rem 50% / 0.6rem 0.6rem no-repeat,
    #fff;
  opacity: 1;
  animation: typing-pulse 0.9s ease-in-out infinite;
}
.chat--animate .bubble.is-typing {
  opacity: 1;
  transform: none;
  color: transparent;
  background: transparent;
}
.chat--animate .bubble.is-typing a {
  visibility: hidden;
}
@keyframes typing-pulse {
  50% { opacity: 0.55; }
}


/* Contact layout: title + intro line left, message window right */
.contact-split {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start; /* text sits at the top, beside the window */
}
.contact-split .split__text {
  padding-top: 1rem;
}
.contact-intro {
  max-width: 24rem;
  margin: 1.5rem 0 0;
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.35;
  color: var(--cream);
}
.contact-more {
  max-width: 29rem;
  margin: 1.25rem 0 0;
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.85;
}
.contact-more strong {
  color: var(--lavender);
  font-weight: 600;
}
.contact-label {
  margin: 1.75rem 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.6;
}
/* Tags on the brown background */
.tags--dark li {
  color: var(--cream);
  background: rgba(200, 171, 209, 0.18);
  border: 1px solid rgba(200, 171, 209, 0.35);
}

/* Message window around the chat, styled like the photo frames:
   dark outline, cream title bar with three dots */
.messenger {
  --frame: #3B2630;
  max-width: 36rem;
  margin: 0;
  overflow: hidden;
  background: var(--cream);
  border: 3px solid var(--frame);
  border-radius: 14px;
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.55);
}
.messenger__bar {
  display: flex;
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 3px solid var(--frame);
}
.messenger__bar span {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--lavender);
  border: 2px solid var(--frame);
  border-radius: 50%;
}

/* Header: name and status */
.messenger__header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--brown);
}
.messenger__name {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}
.messenger__status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  opacity: 0.7;
}
.messenger__status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--lavender);
  border-radius: 50%;
}

/* "Today" at the top and "Read" under the last message */
.chat__meta {
  align-self: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
  opacity: 0.5;
}
.chat__read {
  align-self: flex-start;
  margin-top: -0.2rem;
  padding-left: 0.4rem;
  text-transform: none;
  letter-spacing: 0.04em;
  transition: opacity 0.4s ease;
}
/* While the chat plays in, "Read" waits until the last message */
.chat--animate .chat__read {
  opacity: 0;
}
.chat--animate.is-done .chat__read {
  opacity: 0.5;
}

/* Bubble tails, like a messaging app */
.bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 14px;
  background: inherit;
}
.bubble--them::before {
  right: -7px;
  clip-path: path("M0 0 Q1 13 12 14 L0 14 Z");
}
.bubble--me::before {
  left: -7px;
  clip-path: path("M12 0 Q11 13 0 14 L12 14 Z");
}

/* Message bar at the bottom of the window: looks like a chat app's
   "type a message" box, with a round send button. It's one big button
   that copies the email address. */
.quick-replies {
  position: relative;
  padding: 0.9rem 1.2rem 1.1rem;
  border-top: 1px solid var(--line);
}
.compose {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  font: inherit;
  text-align: left;
  color: var(--brown);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.compose:hover,
.compose:focus-visible {
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(200, 171, 209, 0.35);
}
.compose:focus-visible {
  outline: none;
}
/* Blinking text cursor that follows the typed text */
.compose__caret {
  margin-left: -0.45rem; /* sits right after the last letter */
  width: 1.5px;
  height: 1.1em;
  background: var(--brown);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink {
  50% { opacity: 0; }
}
.compose__text {
  min-height: 1.35em; /* keeps the bar's height while the text is empty */
  font-size: 0.9rem;
  opacity: 0.75;
  white-space: nowrap;
}
.compose:hover .compose__text,
.compose:focus-visible .compose__text {
  opacity: 1;
}
.compose__send {
  margin-left: auto; /* pushed to the right end of the bar */
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--brown);
  background: var(--lavender);
  border-radius: 50%;
  transition: transform 0.3s var(--ease);
}
.compose__send svg {
  width: 1rem;
  height: 1rem;
}
.compose:hover .compose__send {
  transform: translateY(-2px);
}

/* Little "Copied!" pop-up above the send button */
.quick-replies__toast {
  position: absolute;
  right: 1.2rem;
  top: -1rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cream);
  background: var(--brown);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.quick-replies__toast.is-visible {
  opacity: 1;
  transform: none;
}

/* Slim copyright bar at the bottom of every page */
.site-footer {
  padding-block: 1.75rem;
  border-top: 1px solid rgba(255, 247, 236, 0.12);
}
.site-footer p {
  margin-block: 0;
  font-size: 0.8rem;
  opacity: 0.7;
}


/* ---------- 13. IMAGE PLACEHOLDER SLOTS ----------
   Each <figure class="img-slot"> holds an <img>. If the image
   file doesn't exist yet, JS adds .is-empty and the box shows
   the expected file path instead of a broken image icon. */
.img-slot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(200, 171, 209, 0.35);
}

/* Image that brings its own frame: show it whole, no tint or crop,
   and lift it slightly on hover instead of zooming inside the box */
.img-slot--framed {
  overflow: visible;
  background: none;
  border-radius: 0;
  transition: transform 0.5s var(--ease);
}
.img-slot--framed img {
  height: auto;
}
.img-slot--framed:hover {
  transform: translateY(-6px);
}
.img-slot--framed:hover img {
  transform: none;
}

.img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

/* Gentle zoom on hover */
.img-slot:hover img {
  transform: scale(1.04);
}

/* Placeholder state */
.img-slot.is-empty img {
  display: none;
}
.img-slot.is-empty::after {
  content: "Add photo: " attr(data-label);
  position: absolute;
  inset: 1rem;
  display: grid;
  place-items: center;
  border: 1px dashed currentColor;
  border-radius: var(--radius);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.7;
}


/* ---------- 14. SCROLL FADE-IN ANIMATION ----------
   Elements with .reveal start hidden and slide up when JS adds
   .is-visible. The .js class (added by main.js) means content
   is still visible if JavaScript is turned off. */
.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

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

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
  * { animation: none !important; }
}


/* ---------- 15. RESPONSIVE (MOBILE) ---------- */
@media (max-width: 820px) {

  /* Stack all two-column layouts */
  .split,
  .school-feature,
  .project {
    grid-template-columns: 1fr;
  }

  /* On mobile, text always comes before the image */
  .split--reverse .split__text {
    order: 0;
  }

  .hero {
    min-height: auto;
  }

  /* Journey: the lanes stack (Work, then Leadership). The Work lane
     flips so its line and icons are on the left like Leadership's. */
  .journey {
    --node: 2.5rem;
    --gap: 1rem;
    grid-template-columns: 1fr;
  }
  .journey__lane-title {
    justify-content: flex-start;
    margin: 0.5rem 0 1.5rem;
  }
  .journey__lane--work .journey__stops::before {
    right: auto;
    left: calc(var(--node) / 2 - 1px);
  }
  .journey__item--work {
    grid-template-columns: var(--node) 1fr;
  }
  .journey__item--work .journey__node { grid-column: 1; }
  .journey__item--work .journey__date,
  .journey__item--work .journey__card { grid-column: 2; }
  .journey__item--work .journey__date { text-align: left; }
  .journey__node {
    margin-top: 1.6rem;
  }
  .journey__node svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  /* Education header: photo goes under the text */
  .edu-intro {
    grid-template-columns: 1fr;
  }
  .edu-intro__photo {
    max-width: 18rem;
  }

  /* Graduation bar: just the dates on phones */
  .grad-progress__desc {
    display: none;
  }

  /* Education numbers: 2 x 2 */
  .stat-strip {
    grid-template-columns: repeat(2, auto);
  }

  /* Pill moves under the text so the title gets the full width */
  .journey__card summary {
    grid-template-columns: 1fr;
    padding: 1rem 1.1rem;
  }
  .journey__toggle {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 0.9rem;
  }
  .journey__list {
    margin: 0 1.1rem;
  }
  .journey__link {
    margin: -0.4rem 1.1rem 1.1rem;
  }

}

/* Hamburger menu: kicks in before the 6 nav links would crowd the logo
   (wider than the 820px layout breakpoint above) */
@media (max-width: 1060px) {

  /* Show the hamburger button */
  .navbar__toggle {
    display: block;
    margin-left: auto;
  }

  /* Links become a dropdown panel under the navbar */
  .navbar__links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--band);
    padding: 0 clamp(1.25rem, 5vw, 3rem);
    max-height: 0;             /* closed */
    overflow: hidden;
    transition: max-height 0.4s var(--ease), padding 0.4s var(--ease);
  }

  /* Open state — toggled by JS */
  .navbar__links.is-open {
    max-height: 400px;
    padding-block: 1rem 2rem;
  }

  .navbar__links li {
    border-bottom: 1px solid rgba(255, 247, 236, 0.12);
  }

  .navbar__links a {
    display: block;
    padding-block: 1rem;
  }

  .navbar__links a::after {
    display: none; /* underline effect not needed in the dropdown */
  }
}


/* ---------- 16. WELCOME SCREEN (home page) ----------
   Full-screen cream cover with the "hello" dot animation.
   Only shown while <html> has .welcome-open (set in index.html). */
.welcome {
  display: none;
}

html.welcome-open {
  overflow: hidden; /* stop the page scrolling behind the cover */
}

.welcome-open .welcome {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000; /* above the navbar */
  background: var(--cream);
  cursor: pointer; /* a click anywhere goes to the home page */
}

.welcome:focus {
  outline: none;
}

.welcome__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.welcome__skip {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.welcome__skip:hover,
.welcome__skip:focus-visible {
  opacity: 1;
}

/* Word finished: hide Skip */
.welcome.is-done .welcome__skip {
  opacity: 0;
  pointer-events: none;
}

/* Exit: the canvas draws the cream cover with a growing hole in it,
   so the element's own background has to go */
.welcome.is-leaving {
  background: transparent;
  cursor: default;
}