/* ==========================================================================
   Portfolio site — blended style (elegant script + structured sections)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Work+Sans:wght@400;500;600&display=swap');
/* Loaded separately with display=block: the script font stays invisible
   for a beat instead of flashing as the browser's default cursive font
   (Comic Sans on Windows) while it loads. */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=block');

:root {
  --cream: #fff7f3;
  --cream-deep: #c9b1a1;
  --rose: #ecd2c9;
  --chocolate: #5e3a28;
  --ivory: #fff7f3;
  --sky: #ffffff;
  --sky-soft: #ffffff;
  --accent: #9b0909;
  --accent-about: #8c1b1b;
  --accent-deep: #49291b;
  --ink: #2c1712;
  --ink-soft: #5c4038;
  --line: rgba(44, 23, 18, 0.15);

  --font-script: 'Pinyon Script', 'Segoe Script', serif;
  --font-head: 'Fraunces', serif;
  --font-body: 'Lora', serif;
  --font-ui: 'Work Sans', sans-serif;

  --max-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

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

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Nav ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
}

/* Per-page header colors: nav matches that page's main section color */
.header-cream { background: var(--cream); }
.header-rose { background: var(--rose); }
.header-accent { background: var(--accent-about); }
.header-brown { background: var(--accent-deep); }

.header-cream .nav-logo,
.header-rose .nav-logo,
.header-cream .nav-links ,
.header-rose .nav-links {
  color: var(--ink-soft);   /* the same brown as the paragraphs, not black */
}

/* the name in the top-left of the cream (Home) header is the site's dark red */
.header-cream .nav-logo ,
.header-rose .nav-logo {
  color: var(--accent);
}

.header-accent .nav-logo,
.header-accent .nav-links,
.header-brown .nav-logo,
.header-brown .nav-links {
  color: var(--cream);
}

.header-cream .nav-links a:hover,
.header-cream .nav-links a.active,
.header-rose .nav-links a:hover,
.header-rose .nav-links a.active {
  border-color: var(--accent);
}

.header-accent .nav-links a:hover,
.header-accent .nav-links a.active,
.header-brown .nav-links a:hover,
.header-brown .nav-links a.active {
  border-color: var(--cream);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 24px;
  flex-wrap: wrap;
}

.nav-logo {
  /* plain, even capitals in the same sans as the menu links */
  font-family: var(--font-ui);
  font-variant-caps: normal;
  font-feature-settings: normal;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.nav-links a {
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}

/* Phones and half-width windows (780px and under): the name and the
   "Let's talk" button share the top line, and the four links run along a
   line of their own underneath. */
@media (max-width: 780px) {
  .nav { column-gap: 14px; row-gap: 16px; }
  .nav-logo { order: 1; }
  .nav > .btn { order: 2; padding: 10px 20px; }
  .nav-links {
    order: 3;
    flex: 0 0 100%;
    justify-content: space-between;
    gap: 12px;
  }
}

/* a little smaller on narrow phones so the name and the button stay on one line */
@media (max-width: 430px) {
  .nav-logo { font-size: 1rem; letter-spacing: 0.12em; }
  .nav > .btn { padding: 8px 16px; font-size: 0.85rem; }
}
@media (max-width: 350px) {
  .nav-logo { font-size: 0.88rem; letter-spacing: 0.1em; }
  .nav-links { font-size: 0.88rem; }
}

/* The page is hidden for an instant while the Italian text is put in */
.i18n-wait body { visibility: hidden; }

/* EN | IT switch at the end of the menu */
.lang-item { display: flex; align-items: center; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 18px;
  margin-left: 2px;
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 35%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lang-sep {
  display: block;
  width: 1px;
  height: 0.95em;
  margin-bottom: 4px;
  background: currentColor;
  opacity: 0.4;
}
.lang-switch button {
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.lang-switch button:hover { opacity: 1; }
.lang-switch button[aria-pressed="true"] { opacity: 1; }
.header-cream .lang-switch button[aria-pressed="true"],
.header-rose .lang-switch button[aria-pressed="true"] { border-bottom-color: var(--accent); }
.header-accent .lang-switch button[aria-pressed="true"],
.header-brown .lang-switch button[aria-pressed="true"] { border-bottom-color: var(--cream); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  text-align: center;
}

.btn-solid {
  background: var(--accent);
  color: var(--ivory);
}

.btn-solid:hover {
  background: var(--accent-deep);
}

.btn-outline {
  background: transparent;
  color: var(--accent-deep);
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--ivory);
}

.btn-outline-light {
  border-color: var(--ivory);
  color: var(--ivory);
  background: transparent;
}

.btn-outline-light:hover {
  background: var(--ivory);
  color: var(--accent-deep);
}

/* ---------- Section helpers ---------- */

section {
  padding: 88px 0;
}

section.tight {
  padding: 56px 0;
}

.bg-cream { background: var(--cream); }
.bg-accent { background: var(--accent-about); color: var(--ivory); }
.bg-accent-deep { background: var(--accent-deep); color: var(--ivory); }
.bg-sky { background: var(--sky-soft); }
/* the contact section: a pale dusty rose instead of plain white */
#contact.bg-sky { background: #f6e4de; }

/* "Let's work together" and the line under it: chocolate brown */
#contact h2,
#contact .lede { color: var(--chocolate); }

/* selected text: dusty rose with red letters */
::selection { background: var(--rose); color: var(--accent); }
::-moz-selection { background: var(--rose); color: var(--accent); }
.bg-ivory { background: var(--ivory); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 12px;
}

.bg-accent .eyebrow,
.bg-accent-deep .eyebrow { color: var(--sky); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 20px;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: 1.3rem; }

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

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

.placeholder-note {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--accent-deep);
  background: var(--sky);
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- Photo placeholder blocks ---------- */
/* Swap these for real photos: replace the element with an <img> tag,
   or set background-image on .photo in your own CSS. */

.photo {
  background: repeating-linear-gradient(
    135deg,
    var(--sky-soft),
    var(--sky-soft) 12px,
    var(--sky) 12px,
    var(--sky) 24px
  );
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: center;
  min-height: 180px;
}

.photo-hero { min-height: 340px; border-radius: 0; }
.photo-square { aspect-ratio: 1 / 1; min-height: 0; }
.photo-tall { aspect-ratio: 4 / 5; min-height: 0; }
.photo-wide { aspect-ratio: 16 / 10; min-height: 0; }

/* ---------- Layout grids ---------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-section {
  padding: 32px 0 56px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-copy {
  margin-top: 16px;
}

.hero-photo {
  display: flex;
  justify-content: flex-end;
}

.hero-photo img {
  margin-right: 14px;
}

/* Two-column layouts only: nudge the photo down and a little toward the
   text. Done with relative positioning so it doesn't change how tall the
   hero row is (mobile stacks the photo and has its own spacing). */
@media (min-width: 601px) {
  .hero-photo img {
    position: relative;
    top: 40px;
    /* how far toward the text depends on how much room there is: up to
       48px on wide windows, tapering to a small nudge in half-view so the
       photo never ends up touching the paragraph */
    left: clamp(-48px, calc((100vw - 760px) * -0.12), -6px);
  }
}

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

/* Hero signature: the headline traced as real letterform outlines (from
   the Pinyon Script font itself). Sized in em so it scales exactly like
   the text it replaces did. */
.hero-signature {
  display: block;
  width: 6.02em;   /* 5.9em for the words + room for the full stop */
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
  font-size: clamp(2.75rem, 4.6vw, 4.3rem);
  overflow: visible;
}

/* Full-screen hero (add class "hero-wide" to the hero <section>): the
   first screen is just the photo, edge to edge, with "Hi, I'm Maria" on
   top of it; the text sits underneath and appears as you scroll.
   Everything is scoped to .hero-wide so removing the class brings back
   the side-by-side layout. The title and photo share one grid cell, which
   is what lets the title sit on top of the picture. */
.hero-wide {
  padding-top: 0;
}

.hero-wide .hero-grid {
  grid-template-columns: 1fr;
  grid-template-areas:
    "photo"
    "text";
  /* break out of the normal .wrap width so the photo runs edge to edge */
  max-width: none;
  padding: 0;
  gap: 0;
  align-items: start;
  row-gap: 0;
}

.hero-wide .hero-copy {
  display: contents;
}

/* The photo fills whatever is left of the first screen under the header
   (--header-h is measured by a small script in index.html). */
.hero-wide .hero-photo {
  grid-area: photo;
  position: relative;
  display: block;
  margin: 0;
  height: calc(100vh - var(--header-h, 98px));
  height: calc(100svh - var(--header-h, 98px));
  min-height: 380px;
}

.hero-wide .hero-photo img {
  display: block;
  position: static;
  width: 100%;
  height: 100% !important;   /* beats the inline "height: auto" on the <img> */
  max-width: 100% !important;
  margin: 0;
  object-fit: cover;
  /* keep her (right of centre) and the towers in frame when the screen is
     taller or narrower than the photo */
  object-position: 58% 38%;
}

/* No brown wash over the photo any more: the picture is already colour-graded.
   (The old tint was a radial rgba(64,52,46) gradient, 0.34 in the middle down
   to 0.10 at the edges, on .hero-wide .hero-photo::after.) */

/* Split hero (the Home page; class "hero-split" next to "hero-wide").
   Computer and half-width windows (601px and up): two halves, the title and
   the text on the left and the photo filling the right half. Phones (600px
   and under): the same left column first, with the photo below it. */

/* both layouts: the title sits on the cream page, so it is the same brown as the paragraphs (the
   red corrections stay red), including the corrected letters once the red
   marks are accepted, and the click ripple */
.hero-wide.hero-split .hero-title {
  /* as big as the left half allows (the title is 6.02 units wide), up to the
     size it had on the full-screen photo */
  --title-unit: clamp(2.2rem, calc((50vw - 56px) / 6.1), 6rem);
  text-align: center;
  grid-area: auto;
  justify-self: auto;
  align-self: auto;
  pointer-events: auto;
  z-index: auto;
  min-height: 0;
}
.hero-wide.hero-split .hero-edit { color: var(--ink-soft); }
.hero-wide.hero-split .hero-signature path { fill: var(--ink-soft); }
.hero-wide.hero-split .hero-edit.is-settled .mk { color: var(--ink-soft); }
.hero-wide.hero-split .hero-click { border-color: var(--ink-soft); }

.hero-wide.hero-split .hero-text {
  grid-area: auto;
  max-width: var(--box, 540px);
  margin: 0 auto;
  /* room for the "Editor" comment balloon that appears under the title (on
     phones; on bigger screens it hangs out to the right instead) */
  padding: 104px 0 0;
}
.hero-wide.hero-split .hero-text .lede {
  max-width: var(--box, 540px) !important;
  font-size: 1.02rem !important;
}

.hero-wide.hero-split .hero-photo { grid-area: photo; }
.hero-wide.hero-split .hero-photo img { object-position: 54% 38%; }

/* nothing below the photo to scroll to, and the credit sits on the photo */
.hero-wide.hero-split .hero-scroll { display: none; }
.hero-wide.hero-split .hero-credit {
  top: auto;
  bottom: 14px;
  right: 18px;
  color: var(--ivory);
  opacity: 0.8;
  text-shadow: 0 1px 4px rgba(20, 10, 8, 0.5);
}

@media (min-width: 601px) {
  .hero-wide.hero-split .hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "copy photo";
    align-items: stretch;
  }

  /* the title and the paragraphs share one box (460px at most, less in a
     narrow window) and the title is sized to be exactly as long as it */
  .hero-wide.hero-split .hero-copy {
    --box: min(460px, calc(50vw - 56px));
    grid-area: copy;
    position: relative;
    z-index: 2;          /* the comment balloon may overlap the photo's edge */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 28px;
  }

  .hero-wide.hero-split .hero-title {
    --title-unit: calc(var(--box) / var(--title-em, 6.02));
    width: 100%;
    max-width: var(--box);
    text-align: left;
  }

  /* the paragraphs sit close under the title */
  .hero-wide.hero-split .hero-text { padding-top: 22px; }

  /* the "Editor" comment hangs out to the right of the title, a little
     lower, out over the photo (instead of taking room under the title) */
  .hero-wide.hero-split .hero-comment {
    top: 46%;
    right: auto;
    left: calc(100% + 14px);
  }
  .hero-wide.hero-split .hero-comment::before {
    right: auto;
    left: -14px;
    top: 20px;
    width: 14px;
    height: 1px;
  }
}

/* half-width windows: the photo is cropped tighter there, so the balloon
   would land on her face. It goes up and to the right instead, over the sky. */
@media (min-width: 601px) and (max-width: 1180px) {
  .hero-wide.hero-split .hero-comment {
    top: auto;
    bottom: calc(100% + 10px);
    left: calc(100% - 2.4rem);
  }
  .hero-wide.hero-split .hero-comment::before {
    left: 1.6rem;
    top: 100%;
    width: 1px;
    height: 10px;
  }
}

@media (max-width: 600px) {
  .hero-wide.hero-split {
    padding-bottom: 8px;
    overflow-x: clip;   /* the comment balloon may hang a little past the edge */
  }

  .hero-wide.hero-split .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "photo";
    align-items: start;
  }

  /* the text column fills the first screen by itself, so the photo only
     shows up once you scroll; wider side margins than the rest of the page */
  .hero-wide.hero-split .hero-copy {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: calc(100vh - var(--header-h, 140px));
    min-height: calc(100svh - var(--header-h, 140px));
    padding: 40px 36px 48px;
  }

  /* smaller type on phones: the title, the paragraphs and the comment
     balloon */
  .hero-wide.hero-split .hero-title { --title-unit: clamp(2rem, calc(63.2vw / var(--title-em, 6.02)), calc(25.3rem / var(--title-em, 6.02))); }

  .hero-wide.hero-split .hero-text { padding-top: 78px; }
  .hero-wide.hero-split .hero-text .lede {
    font-size: 0.9rem !important;
    line-height: 1.45;
  }

  .hero-wide.hero-split .hero-comment {
    width: min(12.2rem, 68vw);
    padding: 8px 10px 9px;
    gap: 8px;
    font-size: 0.85rem;
  }
  .hero-wide.hero-split .hero-comment-avatar { width: 24px; height: 24px; font-size: 0.6rem; }
  .hero-wide.hero-split .hero-comment-name { font-size: 0.66rem; }
  .hero-wide.hero-split .hero-comment-text { font-size: 0.8rem; }

  /* the photo comes after the text, at its own height instead of filling
     a screen */
  .hero-wide.hero-split .hero-photo {
    height: auto;
    min-height: 0;
  }
  .hero-wide.hero-split .hero-photo img {
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-position: 64% 30%;
  }
}

/* Projects page band: dusty rose with the site's red and brown (it keeps the
   .bg-accent sizing so it is as tall as the About and Blog bands) */
.bg-accent.bg-rose { background: var(--rose); color: var(--ink-soft); }
.bg-accent.bg-rose .eyebrow { color: var(--accent); }
.bg-accent.bg-rose h1.script { color: var(--accent); }

/* ---------- Projects: a shelf of covers ---------- */

/* The covers share the whole width of the page. First row: two dissertations
   close together, then a slightly wider gap (--sp) before the academic
   publication; later rows use the same columns so covers line up. */
.shelf-wrap {
  --g: clamp(14px, 2vw, 22px);        /* gap between neighbouring covers */
  --sp: clamp(0px, 3.5vw, 48px);      /* extra room before the right-hand cover */
}

.shelf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 40px var(--g);
}

.shelf-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) var(--sp) minmax(0, 1fr);
  column-gap: var(--g);
  margin-bottom: 56px;
}

.shelf-group { display: flex; flex-direction: column; min-width: 0; }
.shelf-group-left { grid-column: 1 / 3; }
.shelf-group-right { grid-column: 4; }

.shelf-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--g); }
.shelf-single { grid-template-columns: minmax(0, 1fr); }
.shelf-more { grid-template-columns: repeat(2, minmax(0, 1fr)) var(--sp) minmax(0, 1fr); }

.shelf-label {
  margin: 0 0 14px;
  font: 600 0.68rem var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
}
.shelf-label-right { text-align: right; white-space: nowrap; align-self: flex-end; }

/* phones: two covers per line, the single one below */
@media (max-width: 700px) {
  .shelf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .shelf-group-right { grid-column: 1 / 2; }
  .shelf-label-right { text-align: left; align-self: flex-start; }
  .shelf-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.shelf-link {
  display: block;
  text-decoration: none;
  color: var(--ink-soft);
}

/* the cover: a real <img> or a coloured placeholder, always 2:3 */
.shelf-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  padding: 0;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 10px 22px rgba(60, 30, 20, 0.22), 0 2px 4px rgba(60, 30, 20, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.shelf-link:hover .shelf-cover,
.shelf-link:focus-visible .shelf-cover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(60, 30, 20, 0.26), 0 3px 6px rgba(60, 30, 20, 0.16);
}

.shelf-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* A cover with a second picture: the second picture is a sheet tucked behind
   the cover and sticking out a little at the top right, tilted; on hover it
   slides out a bit further. */
.shelf-stack {
  position: relative;
  display: block;
  isolation: isolate;
  transition: transform 0.25s ease;
}
.shelf-stack .shelf-cover { position: relative; z-index: 1; transform: none !important; transition: none; }
.shelf-link:hover .shelf-stack,
.shelf-link:focus-visible .shelf-stack { transform: translateY(-6px); }

.shelf-behind {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;   /* the poster's text sits on its right side */
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 6px 14px rgba(60, 30, 20, 0.22);
  transform-origin: 15% 100%;
  transform: translate(12px, -5px) rotate(3.5deg);
  transition: transform 0.35s ease;
}
.shelf-link:hover .shelf-behind,
.shelf-link:focus-visible .shelf-behind { transform: translate(24px, -9px) rotate(6deg); }

@media (prefers-reduced-motion: reduce) {
  .shelf-stack, .shelf-behind { transition: none; }
}

/* placeholder covers (removed once a real picture is used) */
span.shelf-cover { padding: 12px; color: var(--ivory); font-family: var(--font-head); }
.shelf-cover b {
  font: 600 0.52rem var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.shelf-cover i { font-style: normal; font-size: 0.95rem; line-height: 1.1; }
.shelf-c1 { background: #8c1b1b; }
.shelf-c2 { background: #d9b3a8; color: #5a1a1a !important; }
.shelf-c3 { background: var(--accent-deep); }
.shelf-c4 { background: #efe3da; color: var(--accent-deep) !important; box-shadow: inset 0 0 0 1px rgba(73, 41, 27, 0.25), 0 10px 22px rgba(60, 30, 20, 0.15); }

.shelf-kind {
  display: block;
  margin-top: 14px;
  font: 600 0.68rem var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  opacity: 0.75;
}

.shelf-title {
  display: block;
  margin: 3px 0 6px;
  font: 500 1.05rem/1.25 var(--font-head);
  color: var(--ink-soft);
}

/* the titles and the citation under a cover are justified, with automatic
   hyphenation so long words can break instead of leaving wide gaps */
.shelf-title,
.shelf-cite {
  text-align: justify;
  hyphens: auto;
}

/* on a phone the covers are only ~150px wide: justified text would leave big
   gaps between words, so these lines go back to the left edge there */
@media (max-width: 640px) {
  .shelf-title,
  .shelf-cite { text-align: left; }
}

/* a citation line under a title: where the piece was published */
.shelf-cite {
  display: block;
  margin: 0 0 8px;
  font: 0.8rem/1.45 var(--font-body);
  color: var(--ink-soft);
}

.shelf-go {
  display: inline-block;
  font: 600 0.7rem var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

.shelf-link:hover .shelf-go { border-bottom-color: currentColor; }

/* a "Request" link sitting under a cover, separate from the cover's own link */
.shelf-request,
.shelf-view {
  text-decoration: none;
}
.shelf-request:hover,
.shelf-request:focus-visible,
.shelf-view:hover,
.shelf-view:focus-visible,
.shelf-abstract:hover,
.shelf-abstract:focus-visible { border-bottom-color: currentColor; }

/* the "Abstract" button goes on its own line under "View" / "Request" */
.shelf-abstract {
  display: block;
  width: max-content;
  margin-top: 6px;
  text-decoration: none;
}


@media (prefers-reduced-motion: reduce) {
  .shelf-cover { transition: none; }
  .shelf-link:hover .shelf-cover, .shelf-link:focus-visible .shelf-cover { transform: none; }
}

/* ---------- Document viewer (Projects) ---------- */

.doc-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 18px 18px 14px;
  background: rgba(20, 10, 8, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.doc-viewer.open { opacity: 1; pointer-events: auto; }

.doc-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  /* as wide as an A4 page is at this height, so the arrows sit right beside it */
  width: min(100%, 880px, calc((100vh - 112px) * 0.7071));
  margin: 0 auto;
}

/* the pages sit side by side; swiping or the arrows move between them */
.doc-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.doc-track::-webkit-scrollbar { display: none; }

.doc-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  padding: 4px 0;
}

.doc-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;           /* the script sets the exact size so each picture fits */
  height: auto;
  flex: none;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.doc-close,
.doc-nav {
  border: 1.5px solid var(--ivory);
  border-radius: 50%;
  background: rgba(20, 10, 8, 0.45);
  color: var(--ivory);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.doc-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  font-size: 1.4rem;
}

.doc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  font-size: 1.5rem;
}
.doc-prev { left: -62px; }
.doc-next { right: -62px; }

.doc-close:hover,
.doc-nav:hover:not(:disabled) { background: var(--ivory); color: var(--accent-deep); }
.doc-nav:disabled { opacity: 0.25; cursor: default; }
.doc-nav[hidden],
.doc-download[hidden] { display: none; }

.doc-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: min(100%, 880px, calc((100vh - 112px) * 0.7071));
  margin: 12px auto 0;
  color: var(--ivory);
  font: 600 0.72rem var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.doc-count { opacity: 0.7; }
.doc-download {
  justify-self: end;
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 247, 243, 0.5);
}
.doc-download:hover { border-bottom-color: var(--ivory); }

/* narrow screens: the arrows sit over the page edges instead of beside it */
@media (max-width: 1000px) {
  .doc-prev { left: 6px; }
  .doc-next { right: 6px; }
  .doc-nav { width: 38px; height: 38px; background: rgba(20, 10, 8, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .doc-viewer { transition: none; }
}

/* Projects page: its short intro line reserves the same number of lines as
   the About page's longer intro, so the coloured band is as tall as the
   ones on About and Blog. (Line height is 1.6, so 4 lines = 6.4em.) */
.lede-match { min-height: 6.4em; }
@media (min-width: 861px) and (max-width: 1180px) { .lede-match { min-height: 8em; } }
@media (max-width: 607px) { .lede-match { min-height: 8em; } }
@media (max-width: 440px) { .lede-match { min-height: 9.6em; } }
@media (max-width: 415px) { .lede-match { min-height: 11.2em; } }
@media (max-width: 361px) { .lede-match { min-height: 12.8em; } }
@media (max-width: 330px) { .lede-match { min-height: 14.4em; } }

/* Typing effect for page headings (js/type-title.js) */
.js .type-title:not(.is-typing) {
  visibility: hidden;
  /* safety net: if the script never runs the heading still appears */
  animation: type-failsafe 0s 3.2s forwards;
}
@keyframes type-failsafe { to { visibility: visible; } }

.type-wrap { position: relative; display: inline-block; }
.type-size { visibility: hidden; }
.type-live { position: absolute; left: 0; top: 0; white-space: nowrap; }
.type-caret {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  transition: opacity 0.5s ease;
}
.type-caret::after {
  content: "";
  position: absolute;
  left: 0.03em;
  bottom: -0.16em;
  width: 0.035em;
  height: 0.8em;
  background: currentColor;
  animation: type-blink 1s steps(1) infinite;
}
.type-caret.is-done { opacity: 0; }
@keyframes type-blink { 50% { opacity: 0; } }

/* Bouncing "scroll down" arrow at the bottom of the picture */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3.2vh, 30px);
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  opacity: 0;
  animation: hero-arrow-in 0.8s ease-out 1.6s forwards, hero-bounce 1.7s ease-in-out 2.4s infinite;
  transition: opacity 0.4s ease;
}
.hero-scroll svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.hero-scroll.is-gone {
  opacity: 0 !important;
  pointer-events: none;
  animation: none;
}
@keyframes hero-arrow-in { to { opacity: 0.9; } }
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; border-radius: 4px; }

/* Photo credit: tiny, brown, tucked under the right edge of the picture */
.hero-credit {
  position: absolute;
  top: calc(100% + 10px);
  right: clamp(14px, 3vw, 40px);
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  opacity: 0.65;
  white-space: nowrap;
}

/* The title shares the photo's grid cell and is centred in it, both ways. */
.hero-wide .hero-title {
  grid-area: photo;
  z-index: 2;
  justify-self: center;
  align-self: center;
  min-height: 0;
  display: block;
  padding: 0;
  pointer-events: none;
}

.hero-wide .hero-title {
  --title-unit: clamp(2.6rem, 8vw, 6rem);
}

.hero-wide .hero-signature {
  margin: 0;
  font-size: var(--title-unit);
  filter: none;
}

/* cream-white lettering instead of the usual red (the path's fill is set
   both in the SVG and in .hero-signature path, hence the extra specificity) */
.hero-wide .hero-signature path {
  fill: var(--ivory);
}

/* The text under the photo: a centred reading column. */
.hero-wide .hero-text {
  grid-area: text;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 32px 0;
}

.hero-wide .hero-text .lede {
  max-width: 900px !important;
}

@media (max-width: 560px) {
  .hero-wide .hero-text {
    padding: 30px 20px 0;
  }
}

/* TRIAL — body text on the photo too (add class "hero-text-on-photo" next
   to "hero-wide" on the hero <section>; remove it to put the text back
   under the picture).
   The title and the text become one overlay on the photo: three rows,
   spacer / title / text, so the title stays exactly centred and the text
   hangs from just under it, left-aligned, in cream. The photo's row is at
   least a screen tall but grows if the text ever needs more room, and the
   image simply fills whatever height it ends up with.
   Wide screens only (900px and up): below that the picture is too narrow
   to carry the text without covering her, so phones and small tablets keep
   the text under the picture. */
@media (min-width: 901px) {
  .hero-wide.hero-text-on-photo .hero-grid {
    grid-template-areas: "photo";
    grid-template-rows: minmax(calc(100vh - var(--header-h, 98px)), auto);
    grid-template-rows: minmax(calc(100svh - var(--header-h, 98px)), auto);
  }

  .hero-wide.hero-text-on-photo .hero-photo {
    height: auto;
    min-height: 380px;
    align-self: stretch;
  }

  .hero-wide.hero-text-on-photo .hero-photo img {
    position: absolute;
    inset: 0;
  }

  .hero-wide.hero-text-on-photo .hero-copy {
    grid-area: photo;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto 1fr;
    height: 100%;
    align-self: stretch;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 clamp(22px, 5vw, 76px);
    pointer-events: none;
  }

  .hero-wide.hero-text-on-photo .hero-title {
    grid-area: auto;
    grid-row: 2;
    grid-column: 1;
  }

  .hero-wide.hero-text-on-photo .hero-title {
    --title-unit: clamp(2.6rem, min(8vw, 12.5vh), 6rem);
  }

  .hero-wide.hero-text-on-photo .hero-text {
    grid-area: auto;
    grid-row: 3;
    grid-column: 1;
    align-self: end;          /* hangs from the bottom of the picture */
    justify-self: start;
    width: auto;
    /* a wide, low rectangle: about 60% of the screen (up to 900px), so the
       sentences run long and the block stays short */
    max-width: min(100%, clamp(420px, 60vw, 900px));
    margin: 0;
    padding: clamp(12px, 1.8vw, 24px) 0 clamp(24px, 3.4vw, 52px);
    pointer-events: auto;
  }

  .hero-wide.hero-text-on-photo .hero-text .lede {
    color: var(--ivory) !important;
    text-align: left !important;
    max-width: none !important;
    /* scales with the window's height as well as its width, so on a short
       window the whole overlay still fits on the first screen */
    font-size: clamp(0.84rem, min(1.1vw, 1.95vh), 1.08rem) !important;
    line-height: 1.42 !important;
    margin-bottom: 8px !important;
  }



  /* one flat, even tint (same desaturated brown) behind the text and title */
  .hero-wide.hero-text-on-photo .hero-photo::after {
    background: rgba(64, 52, 46, 0.30);
  }
}

/* Hero title being "edited" (class "hero-edit-on" on the hero section; the
   static SVG title is shown when that class is absent). The text is typed
   with typos and corrected the way an editor would: tracked insertions in
   red, a selection that is replaced, then a Word-style comment appears. */
.hero-edit { display: none; }

.hero-edit-on .hero-signature { display: none; }

.hero-edit-on .hero-edit {
  --mark: #b61f28;                         /* the red of the tracked insertions: a deep, true red */
  display: inline-block;
  position: relative;
  font-family: var(--font-script);
  /* same size the drawn title had: 6.0em of text == 6.02 sizing units */
  font-size: var(--title-unit, clamp(2.6rem, 8vw, 6rem));
  line-height: 1.25;
  color: var(--ivory);
  white-space: nowrap;
  text-align: left;
}

/* the invisible, finished title holds the final width so the title never
   shifts sideways while letters are inserted */
.hero-edit-size { visibility: hidden; }

.hero-edit-live {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
}

/* until the script starts (it waits for the font) keep the live layer
   hidden, so there is no flash of the finished title before it types */
.js .hero-edit-on .hero-edit:not(.is-running) .hero-edit-live { visibility: hidden; }

.hero-edit .mk {
  /* an inserted letter, as a tracked change: red with an underline. Only
     colour / background / underline are used (no padding, margin or
     border), so the script font keeps its natural spacing between letters
     and nothing is nudged when a letter is marked or un-marked. */
  color: var(--mark);
  background-color: rgba(182, 31, 40, 0.24);
  text-decoration: underline;
  text-decoration-color: var(--mark);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
  transition: color 0.65s ease-in-out, background-color 0.65s ease-in-out,
              text-decoration-color 0.65s ease-in-out;
}

/* a text selection: grows across the letter(s), like dragging */
.hero-edit .sel {
  color: var(--ivory);
  background-image: linear-gradient(rgba(150, 16, 24, 0.92), rgba(150, 16, 24, 0.92));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: hero-sel-grow 0.24s ease-out forwards;
}
@keyframes hero-sel-grow { to { background-size: 100% 100%; } }

/* the selected "m" (before it becomes a capital) keeps the title's brown on
   a softer, see-through red highlight */
.hero-edit.sel-soft .sel {
  color: var(--ink-soft);
  background-image: linear-gradient(rgba(150, 16, 24, 0.5), rgba(150, 16, 24, 0.5));
}

/* once everything is corrected the red marks settle back to cream */
.hero-edit.is-settled .mk {
  color: var(--ivory);
  background-color: transparent;
  text-decoration: none;     /* no underline at all: on the letters of "Maria."
                                (painted with background-clip: text) even a
                                transparent underline can show up as a thin
                                white line under the word */
  transition: none;          /* accepted with a click: instant, no fade */
}

/* "Maria." turns white as the highlighter sweeps across it (the letters sit
   on the red bar; white letters under a see-through bar would vanish into
   the cream page). The colour is painted through the letters
   (background-clip: text), so only the paint changes, never the spacing. */
@property --nt-p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
.hero-edit .nt {
  /* the script "M" swings out past its own box (about a third of an em to
     the right); extra paint room, with the same amount of negative margin so
     nothing moves, keeps it whole */
  padding: 0.3em 0.45em 0.3em 0.15em;
  margin: 0 -0.45em 0 -0.15em;
  --nt-pink: var(--ivory);
  background-image: linear-gradient(90deg, var(--nt-pink) 0, var(--nt-pink) var(--nt-p), var(--ink-soft) var(--nt-p));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hero-nt-sweep var(--note-ms, 460ms) linear both;
}
@keyframes hero-nt-sweep { from { --nt-p: 0%; } to { --nt-p: 100%; } }

/* the mouse pointer that clicks "accept" and then selects "Maria." */
.hero-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  margin: -2px 0 0 -3px;           /* the arrow's tip is the point it clicks */
  opacity: 0;
  transform-origin: 3px 2px;
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease, transform 0.1s ease;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 3;
}
.hero-cursor.is-on { opacity: 1; }
.hero-cursor.is-down { transform: scale(0.8); }

.hero-click {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--ivory);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.hero-click.go { animation: hero-click 0.42s ease-out; }
@keyframes hero-click {
  from { opacity: 0.95; transform: scale(0.2); }
  to   { opacity: 0;    transform: scale(1.2); }
}

/* the soft highlight behind the commented word (placed by the script) */
.hero-note-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background: rgba(150, 16, 24, 0.85);   /* deep enough for white letters on top */
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
/* dragged across "Maria." from left to right, like selecting it */
.hero-edit.show-comment .hero-note-bar { transform: scaleX(1); }

/* blinking text cursor: drawn over the text (positioned by the script), so it
   is never part of the line and can't shift or re-space the letters */
.hero-caret {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.035em;
  height: 0;
  background: var(--ivory);
  opacity: 0;
  pointer-events: none;
}
.hero-caret.is-on { opacity: 1; animation: hero-blink 1s steps(1) infinite; }
@keyframes hero-blink { 50% { opacity: 0; } }

/* the Word-style comment balloon */
.hero-comment {
  position: absolute;
  top: calc(100% + 18px);       /* below the title ... */
  /* ... centred on its right end: half under "Maria.", half beyond it.
     --shift is set by the script (half the balloon's width, less if the
     screen is too narrow to fit it) */
  right: calc(var(--shift, 0px) * -1);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(15.5rem, 78vw);
  padding: 10px 12px 11px;
  background: var(--ivory);
  border: 1px solid rgba(73, 41, 27, 0.25);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(20, 10, 8, 0.28);
  font-family: var(--font-ui);
  font-size: 1rem;           /* the title is huge: reset to normal text */
  line-height: 1.35;
  white-space: normal;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease-in-out 0.38s, transform 0.5s ease-in-out 0.38s;
  pointer-events: none;
}
.hero-edit.show-comment .hero-comment {
  opacity: 1;
  transform: translateY(0);
}
/* line up to the commented word */
.hero-comment::before {
  content: "";
  position: absolute;
  right: calc(var(--shift, 0px) + 1.2rem);   /* points at the end of "Maria." */
  top: -18px;
  width: 1px;
  height: 18px;
  background: var(--mark);
}
.hero-comment-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ivory);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 3px;
}
.hero-comment-body { display: block; min-width: 0; }
.hero-comment-name {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-deep);
}
.hero-comment-text {
  display: block;
  margin-top: 2px;
  font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-edit .sel,
  .hero-caret.is-on { animation: none; }
  .hero-click.go { animation: none; }
  .hero-scroll { animation: hero-arrow-in 0.8s ease-out 1.6s forwards; }
  .hero-comment, .hero-note-bar { transition: none; }
  .hero-edit .nt { animation: none; }
}

.split-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 72px;   /* row gap, then a wide gap between the columns */
  margin-top: 48px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Justified text in the "What I do" cards, like the About page */
.card p:not(.card-label) {
  font-size: 0.9375rem;   /* 15px, one point under the normal body size */
  text-align: justify;
  hyphens: auto;
}

.card-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0;   /* the gap on .card sets the space to the text below */
}

.section-head h2 {
  color: var(--accent);   /* the site's red (same as the name and the buttons) */
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Vertical timeline (About) ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-item {
  position: relative;
  max-width: 600px; /* keeps the hover/click area hugging the text column */
  padding: 0 0 44px 40px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* dot */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-about);
  z-index: 1;
}

/* connector to the next dot (none after the last item) */
.timeline-item::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  height: calc(100% - 18px);
  width: 2px;
  background: var(--accent-about);
}

.timeline-item:last-child::after {
  content: none;
}

.timeline-date {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 8px;
}

.timeline-item h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: var(--ink-soft);   /* a softer brown than the near-black body colour */
}

.timeline-item p {
  margin: 0;
  max-width: 560px;
  color: var(--ink-soft);
}

.timeline-item p + p {
  margin-top: 14px;
}

/* Justified body copy on the About page */
.page-about main p {
  text-align: justify;
  hyphens: auto;
}

/* ---------- "Ask me about..." topic menu ---------- */

.bg-accent .lede {
  max-width: 640px;
}

/* Flexbox with space-between: the timeline and the toggle block sit at
   opposite ends of the row, and whatever room is left between them
   becomes the gap automatically — no fragile column-width math, and
   it scales smoothly all the way from mobile-breakpoint up to the
   1120px max-width, instead of needing a separate half-view tweak. */
.curriculum-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.curriculum-grid .timeline {
  order: 2;
  flex: 1 1 auto;
  max-width: 560px;
  min-width: 0;
}

/* No visible frame — just a defined-width block sitting on the same
   page background. */
.about-more {
  order: 1;
  flex: 0 0 340px;
  width: 340px;
  padding: 28px 30px;
}

@media (min-width: 861px) and (max-width: 1180px) {
  .bg-accent .lede {
    max-width: 460px;
  }
}

/* Below the 1120px max-width the side-by-side layout gets cramped
   (see the half-view tweak above), so from here down through mobile
   the toggle menu moves to the top and the timeline follows beneath
   it, full width. */
@media (max-width: 1180px) {
  .curriculum-grid {
    flex-direction: column;
  }

  .curriculum-grid .timeline {
    order: 2;
    max-width: 100%;
  }

  .about-more {
    order: 1;
    width: 100%;
    flex-basis: auto;
    margin-bottom: 32px;
  }
}

/* On computer-sized screens the menu lines up with the left edge of the
   page text ("About me", "With experience as…"); on a phone it keeps its
   even margin on both sides. */
@media (min-width: 601px) {
  .about-more { padding-left: 0; }
}

.about-more-title {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 3.6vw, 2.7rem);
  color: var(--accent-about);
}

/* The topic menu, styled like a book's table of contents: numbered lines
   between thin rules; the chosen line turns red, in italics, with a small
   indent. */
.topic-toggles {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  counter-reset: topic;
  border-top: 1px solid rgba(73, 41, 27, 0.25);
}

.topic-toggle {
  counter-increment: topic;
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid rgba(73, 41, 27, 0.25);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, padding 0.2s ease;
}

.topic-toggle::before {
  content: "0" counter(topic);
  min-width: 1.4em;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.topic-toggle:hover { color: var(--accent-about); }

.topic-toggle[aria-pressed="true"] {
  padding-left: 10px;
  color: var(--accent-about);
  font-style: italic;
}

.topic-toggle[aria-pressed="true"]::before {
  opacity: 1;
  color: var(--accent-about);
}

.topic-toggle:focus-visible {
  outline: 2px solid var(--accent-about);
  outline-offset: 2px;
}

/* ---------- "Download CV": a button with a drop-down, under the topic menu ---------- */

.cv-menu { position: relative; width: fit-content; margin: 48px auto 0; }   /* centred under the list, with room above */

.cv-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* soft dusty rose with red letters: quiet, no hard edge */
  background: var(--rose);
  border-color: var(--rose);
  color: var(--accent);
}
.cv-trigger:hover,
.cv-trigger:focus-visible,
.cv-trigger[aria-expanded="true"] {
  background: #e6c6bb;
  border-color: #e6c6bb;
  color: var(--accent);
}
.cv-trigger svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.cv-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.cv-list {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 280px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--ivory);
  border: 1px solid rgba(73, 41, 27, 0.15);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(40, 20, 10, 0.18);
}
.cv-list[hidden] { display: none; }
.cv-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.cv-flag {
  flex: none;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(73, 41, 27, 0.2);
}
.cv-list a:hover,
.cv-list a:focus-visible { background: rgba(73, 41, 27, 0.08); color: var(--accent); }

/* Collapsible timeline copy: shows ~7 lines, blurs/fades the rest,
   and opens or closes when the entry is clicked (tapped on a phone). */
.timeline-copy {
  position: relative;
  max-width: 560px; /* match .timeline-item p */
  max-height: 11.2em; /* ~7 lines at the body line-height of 1.6 */
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.timeline-copy.is-expanded {
  max-height: 100em;
}

.timeline-copy.has-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5em;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, rgba(255, 247, 243, 0) 0%, rgba(255, 247, 243, 0.55) 55%, var(--cream) 100%);
  background-size: 140px 140px, 100% 100%;
  background-repeat: repeat, no-repeat;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 45%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 45%, #000 100%);
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.timeline-copy.has-more.is-expanded::after {
  opacity: 0;
}

.timeline-item:has(.timeline-copy.has-more) {
  cursor: pointer;
}

/* ---------- Contact form ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

input,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

input:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-note {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--rose);   /* dusty rose, the colour of the Projects page */
  border-top: 1px solid var(--line);
  padding: 72px 0 40px;
}

.site-footer h2 {
  color: var(--accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}

.footer-buttons {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.footer-contact {
  align-self: center;   /* centred next to the title, buttons and icons on the left */
}

.footer-contact p {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

.social-row {
  display: flex;
  gap: 18px;
  margin-top: 28px;
}

.social-row a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--accent-deep);
  transition: background 0.15s ease, color 0.15s ease;
}

.social-row a:hover {
  background: var(--accent-deep);
  color: var(--ivory);
}

.social-row svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Instagram-style post grid ---------- */

.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 48px;
}

.insta-grid[hidden] {
  display: none;
}

/* Page-turn animation for the grid's prev/next arrows: the outgoing page
   slides out one way, the incoming page slides in from the other. */
.insta-grid {
  transition: opacity 0.22s ease, transform 0.22s ease;
  opacity: 1;
  transform: translateX(0);
}

.insta-grid-out-left {
  opacity: 0;
  transform: translateX(-24px);
}

.insta-grid-out-right {
  opacity: 0;
  transform: translateX(24px);
}

.insta-grid-in-left {
  opacity: 0;
  transform: translateX(-24px);
}

.insta-grid-in-right {
  opacity: 0;
  transform: translateX(24px);
}

.grid-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.grid-page-prev,
.grid-page-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-deep);
  background: transparent;
  color: var(--accent-deep);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.grid-page-prev:hover:not(:disabled),
.grid-page-next:hover:not(:disabled) {
  background: var(--accent-deep);
  color: var(--ivory);
}

.grid-page-prev:disabled,
.grid-page-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.grid-page-count {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  min-width: 46px;
  text-align: center;
}

.insta-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  background: repeating-linear-gradient(
    135deg,
    var(--sky-soft),
    var(--sky-soft) 12px,
    var(--cream-deep) 12px,
    var(--cream-deep) 24px
  );
  overflow: hidden;
}

.insta-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.insta-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.insta-caption-hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: rgba(44, 23, 18, 0.72);
  color: var(--ivory);
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.insta-item:hover .insta-caption-hover,
.insta-item:focus-visible .insta-caption-hover {
  opacity: 1;
}

.insta-caption-hover strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 500;
}

.insta-caption-hover span {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky);
}

/* ---------- Post modal (click a grid item to open) ---------- */

.post-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(20, 10, 8, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.post-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.post-modal {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr);
  width: 100%;
  max-width: 980px;
  height: min(78vh, 640px);
  background: var(--ivory);
  border-radius: 10px;
}

.post-modal-image {
  position: relative;
  height: min(78vh, 640px);
  aspect-ratio: var(--img-ratio, 1);
  transition: aspect-ratio 0.25s ease;
}

/* Clips the photo itself to the card's rounded left corner. The tab/panel
   below live outside this frame so they're free to spill past the card's
   edge instead of being clipped with it. */
.post-modal-image-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: var(--accent-deep);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  background: repeating-linear-gradient(
    135deg,
    var(--sky-soft),
    var(--sky-soft) 12px,
    var(--cream-deep) 12px,
    var(--cream-deep) 24px
  );
}

.post-modal-image.has-image .post-modal-image-frame {
  padding: 0;
  background: var(--ink);
}

.post-modal-image-track[hidden] {
  display: none;
}

.post-modal-image-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.post-modal-image-track::-webkit-scrollbar {
  display: none;
}

.post-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  scroll-snap-align: start;
}

.post-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--ink);
}

.post-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.post-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--ink);
}

.post-video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(to top, rgba(20, 10, 8, 0.82), rgba(20, 10, 8, 0));
}

.post-video-play {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ivory);
  background: transparent;
  color: var(--ivory);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.post-video-play:hover {
  background: var(--ivory);
  color: var(--accent-deep);
}

.post-video-seek,
.post-video-volume {
  accent-color: var(--ivory);
  cursor: pointer;
  height: 4px;
}

.post-video-seek {
  flex: 1;
  min-width: 0;
}

.post-video-volume {
  width: 64px;
  flex-shrink: 0;
}

/* Translation tab + panel: a persistent pair of elements (not per-slide)
   that JS re-targets at whichever slide is currently visible. They live
   outside .post-modal-image-frame's overflow:hidden on purpose, so the
   panel can spill past the card's own border instead of being clipped. */
.post-slide-tab {
  position: absolute;
  left: 24px;
  bottom: -16px;
  z-index: 6;
  padding: 6px 16px;
  border: none;
  border-radius: 0 0 8px 8px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(20, 10, 8, 0.35);
  transition: background 0.15s ease, color 0.15s ease;
}

.post-slide-tab:hover {
  background: var(--sky);
}

.post-slide-tab[hidden] {
  display: none;
}

.post-slide-panel {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -44px;
  z-index: 5;
  background: var(--cream);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(20, 10, 8, 0.45);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.post-slide-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Video slides: the player's controls run along the bottom of the video, so
   the ENGLISH tab hangs from the top edge instead and its panel opens just
   under it. */
.post-modal-image.is-video-slide .post-slide-tab {
  top: 0;
  bottom: auto;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 14px rgba(20, 10, 8, 0.35);
}

.post-modal-image.is-video-slide .post-slide-panel {
  top: 40px;
  bottom: auto;
}

.post-slide-panel-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.post-slide-panel-close:hover {
  background: var(--sky);
}

.post-slide-panel-text {
  max-height: min(60vh, 320px);
  overflow-y: auto;
  padding: 18px 40px 16px 18px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: justify;
}

/* Warm scrollbars instead of the default OS grey, wherever text scrolls */
.post-modal-body,
.post-slide-panel-text {
  scrollbar-width: thin;
  scrollbar-color: var(--cream-deep) transparent;
}

.post-modal-body::-webkit-scrollbar,
.post-slide-panel-text::-webkit-scrollbar {
  width: 8px;
}

.post-modal-body::-webkit-scrollbar-track,
.post-slide-panel-text::-webkit-scrollbar-track {
  background: transparent;
}

.post-modal-body::-webkit-scrollbar-thumb,
.post-slide-panel-text::-webkit-scrollbar-thumb {
  background: var(--cream-deep);
  border-radius: 999px;
  border: 2px solid var(--cream);
}

.post-modal-body::-webkit-scrollbar-thumb:hover,
.post-slide-panel-text::-webkit-scrollbar-thumb:hover {
  background: var(--accent-deep);
}

.post-modal-image-count {
  position: absolute;
  bottom: 16px;
  left: 0;
  background: rgba(20, 10, 8, 0.6);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 2;
}

.post-image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 10, 8, 0.55);
  color: var(--ivory);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.post-image-nav:hover {
  background: rgba(20, 10, 8, 0.8);
}

.post-image-nav[hidden] {
  display: none;
}

.post-image-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.post-image-prev {
  left: 12px;
}

.post-image-next {
  right: 12px;
}

.post-modal-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.post-lang-toggle {
  display: flex;
  gap: 8px;
}

/* a quiet text link, to the right of the ITA / ENG buttons */
.post-copy-link {
  margin-left: auto;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.post-copy-link:hover,
.post-copy-link:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
}

.post-lang-toggle[hidden] {
  display: none;
}

.lang-btn {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--accent-deep);
  background: transparent;
  color: var(--accent-deep);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-btn:hover {
  background: var(--sky-soft);
}

.lang-btn.active {
  background: var(--accent-deep);
  color: var(--ivory);
}

.lang-btn.active:hover {
  background: var(--accent-deep);
}

.post-modal-body {
  padding: 48px 44px;
  overflow-y: auto;
}

.post-modal-body .post-modal-meta {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 8px;
}

.post-modal-body h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 20px;
}

.post-modal-body p {
  color: var(--ink-soft);
  margin-bottom: 16px;
  text-align: justify;
}

.post-modal-close,
.post-modal-prev,
.post-modal-next {
  position: absolute;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ivory);
  background: transparent;
  color: var(--ivory);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.post-modal-close:hover,
.post-modal-prev:hover,
.post-modal-next:hover {
  background: var(--ivory);
  color: var(--accent-deep);
}

/* Pinned to the modal's own corner */
.post-modal-close {
  top: 24px;
  right: 24px;
}

/* Pinned to the viewport edges (via the overlay), independent of how wide
   the modal ends up being for any given image — so they never get pushed
   off-screen by a wide photo. */
.post-modal-prev,
.post-modal-next {
  top: 50%;
  transform: translateY(-50%);
}

.post-modal-prev {
  left: 24px;
}

.post-modal-next {
  right: 24px;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .two-col,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: 1fr 1fr;
  }

  /* Stacked modal: the card sits above a reserved strip (bottom padding)
     that holds the previous/next-post arrows, so no button ever floats
     over the photo or the text. */
  .post-modal-overlay {
    padding-bottom: 68px;
  }

  /* Flex column instead of the desktop grid: the photo keeps its own
     height and the text takes whatever is left (and scrolls) — with a
     grid, the text row could get squeezed and the photo would spill over
     the top of it, covering the language buttons. */
  .post-modal {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - 32px - 68px);
    max-height: calc(100dvh - 32px - 68px);
    overflow-y: auto;
  }

  .post-modal-image {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: 60vh;
    min-height: 180px;
  }

  .post-modal-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  .post-modal-prev,
  .post-modal-next {
    top: auto;
    bottom: 12px;
    transform: none;
  }

  .post-modal-prev {
    left: calc(50% - 56px);
  }

  .post-modal-next {
    right: auto;
    left: calc(50% + 12px);
  }

  /* dark backing so the close button reads over bright photos */
  .post-modal-close {
    background: rgba(20, 10, 8, 0.55);
  }

  /* The translation tab can't hang off the photo's bottom edge here — the
     text column (and its ITA/ENG buttons) is right underneath — so it sits
     inside the photo, with its panel opening just above it. */
  .post-slide-tab {
    bottom: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 12px rgba(20, 10, 8, 0.3);
  }

  .post-slide-panel {
    left: 10px;
    right: 10px;
    bottom: 36px;
  }

  .post-slide-panel-text {
    max-height: min(40vh, 240px);
  }

  section { padding: 64px 0; }
}

/* hero keeps two columns through tablet/half-window widths, only
   stacking to one column at genuine phone widths */
@media (max-width: 600px) {
  .hero-section {
    padding: 0 0 48px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "photo"
      "text";
    row-gap: 0;
  }

  /* let hero-title/hero-text rejoin the grid directly as "title"/"text"
     areas, instead of being sized as one spanning block next to the photo
     (that spanning caused the grid to inflate the title row on desktop) */
  .hero-copy {
    display: contents;
  }

  .hero-title { grid-area: title; }
  .hero-text { grid-area: text; }
  .hero-photo { grid-area: photo; }

  /* the headline gets the whole first screen to itself (header included,
     no scrolling needed to see it); photo + bio text follow together as
     one block the visitor reaches by scrolling, instead of the photo
     standing alone below a long run of text */
  .hero-title {
    min-height: calc(100vh - 150px);
    min-height: calc(100dvh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-photo {
    justify-content: center;
    margin-bottom: 24px;
  }

  .hero-photo img {
    max-width: 320px !important;
    margin-right: 0;
  }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .nav { padding: 16px 20px; }
  .split-photos { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .post-modal-overlay { padding: 12px 12px 68px; gap: 6px; }
  .post-modal { max-height: calc(100vh - 12px - 68px); max-height: calc(100dvh - 12px - 68px); }
  .post-modal-body { padding: 32px 24px; }
  .post-modal-prev,
  .post-modal-next { width: 36px; height: 36px; bottom: 16px; }
  .post-modal-prev { left: calc(50% - 48px); }
  .post-modal-next { left: calc(50% + 12px); }
}