/* ============================================================
   Audrey Robert — bandes dessinées & illustrations de
   vulgarisation scientifique.
   Colours are taken straight from Audrey's own palette
   (Palette_de_Couleur.png).
   ============================================================ */

:root {
  /* ---- Audrey's palette ---- */
  --brick:      #B1340A;   /* deep rust — primary accent            */
  --brick-dark: #8C2807;
  --clay:       #BE5837;   /* terracotta                            */
  --blush:      #E3B2A0;
  --orange:     #EE8C18;   /* highlight, never body text            */
  --orange-ink: #C4700F;   /* same orange, dark enough to read on   */
                           /* cream (3.5:1 at display sizes)        */
  --peach:      #FACA91;
  --cream:      #FEF8EB;   /* the paper                             */
  --forest:     #1B482C;   /* deep green — dark bands, headings     */
  --emerald:    #398A6A;
  --leaf:       #9BCB7E;
  --mint:       #CFE5C3;

  /* ---- Derived surfaces ---- */
  --paper:      var(--cream);
  --paper-2:    #FBEEDC;                 /* cream leaning to peach  */
  --card:       #FFFFFF;
  --line:       #F0DCC1;
  --line-soft:  rgba(27, 72, 44, .12);

  /* ---- Ink ---- */
  --ink:        #1E2A20;
  --ink-soft:   #4C5A4C;
  --ink-faint:  #7B8878;
  --on-dark:    #F3EEE1;
  --on-dark-2:  #C3D4BC;

  /* Shadows are the paper colour driven dark, not green, so a lifted card
     reads as depth on cream rather than as a green glow. */
  --shadow:        rgba(122, 102, 70, .18);
  --shadow-strong: rgba(122, 102, 70, .34);

  /* ---- Type ---- */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:    "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --hand:    "Playpen Sans", "Bradley Hand", cursive;

  /* ---- Rhythm ---- */
  --maxw: 1180px;
  --gap: clamp(1rem, 3vw, 2.5rem);
  --radius: 16px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 74px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  /* Column flex + `main { flex: 1 }` keeps the footer on the bottom edge even
     when a page has very little content. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  color: var(--ink);
  background-color: var(--paper);
  line-height: 1.7;
  font-size: 1.05rem;
  overflow-x: hidden;
}
/* `height: auto` is what keeps the intrinsic width/height attributes from
   stretching an image once max-width kicks in. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
/* Several components set `display` explicitly, which would otherwise beat the
   UA rule for [hidden]. Language blocks and lightbox arrows rely on this. */
[hidden] { display: none !important; }
main { flex: 1 0 auto; }
:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
  font-optical-sizing: auto;
  color: var(--forest);
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.22rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.15rem; }
p  { margin: 0 0 1.1em; max-width: 68ch; }
strong { font-weight: 700; }

.kicker {
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(.86rem, 1.35vw, 1.01rem);
  color: var(--emerald);
  line-height: 1.2;
  display: inline-block;
  margin-bottom: .35rem;
}
.lead { font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--ink-soft); }
.text-emerald { color: var(--emerald); }
.text-forest { color: var(--forest); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; }
.section--tight { padding-block: clamp(1.5rem, 4vw, 3rem); }
.section--tint { background: var(--paper-2); }
.section--forest { background: var(--forest); color: var(--on-dark); }
.section--forest h1, .section--forest h2, .section--forest h3 { color: #fff; }
.section--forest .lead { color: var(--on-dark-2); }
.center { text-align: center; }
.section-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section-head.center { margin-inline: auto; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }

/* The rule under a heading: a plain straight stroke, round ends. */
.rule { display: block; width: 140px; height: 8px; margin: .45rem 0 1rem; color: var(--leaf); }
.center .rule, .rule--center { margin-inline: auto; }
.section--forest .rule { color: var(--peach); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: .98rem;
  padding: .8rem 1.5rem; border-radius: 999px;
  background: var(--brick); color: #fff;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  box-shadow: 0 6px 18px rgba(177, 52, 10, .26);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(177, 52, 10, .34); background: var(--brick-dark); }
.btn--ghost { background: transparent; color: var(--forest); box-shadow: none; border: 2px solid var(--forest); }
.btn--ghost:hover { background: var(--forest); color: #fff; box-shadow: 0 10px 22px var(--shadow); }
.btn--light { background: #fff; color: var(--forest); box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.btn--light:hover { background: var(--peach); color: var(--forest); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: .6rem;
}
/* The frosted bar lives on a pseudo-element rather than on the header itself.
   `backdrop-filter` makes its element a containing block for fixed-position
   descendants, and the mobile drawer is a fixed-position descendant: putting
   the blur on .site-header collapsed the drawer to the height of the header
   as soon as the page was scrolled. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(254, 248, 235, .95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(27, 72, 44, .09);
  opacity: 0; transition: opacity .3s;
}
.site-header.is-solid::before { opacity: 1; }
/* Set for the first frame only. Landing on an already-scrolled page would
   otherwise fade the background in over 300ms, which reads as a flicker. */
.site-header.no-anim::before { transition: none; }

/* The header carries both languages; <html lang> decides which one shows. */
html[lang="en"] .t-fr, html[lang="fr"] .t-en { display: none; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--forest); }
.brand img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 3px 10px var(--shadow); }
.brand small { display: block; font-family: var(--hand); font-weight: 600; font-size: .8rem; color: var(--emerald); line-height: 1.3; }
.brand .brand-name { line-height: 1.1; }

.nav-links { display: flex; align-items: center; gap: clamp(.6rem, 1.7vw, 1.5rem); }
.nav-links a {
  font-weight: 600; font-size: .95rem; color: var(--ink-soft);
  position: relative; padding: .3rem 0; transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--forest); }
/* A plain bar rather than a drawn stroke: a scaled SVG would be a different
   thickness under every menu item, since they are all different widths. */
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2.5px; border-radius: 3px; background: var(--emerald);
}

.lang-toggle { display: inline-flex; border: 2px solid var(--leaf); border-radius: 999px; overflow: hidden; flex: none; }
.lang-toggle button { padding: .25rem .62rem; font-weight: 800; font-size: .8rem; color: var(--ink-soft); transition: background .2s, color .2s; }
.lang-toggle button:hover { background: var(--mint); }
/* Driven by <html lang>, which the head script sets before the first paint,
   so the pill is never briefly on the wrong side. */
html[lang="fr"] .lang-toggle button[data-lang="fr"],
html[lang="en"] .lang-toggle button[data-lang="en"],
.lang-toggle button.active { background: var(--forest); color: #fff; }

.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 24px; height: 2.5px; background: var(--forest); border-radius: 3px;
  position: relative; margin-inline: auto; transition: transform .3s, opacity .2s;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; z-index: 95; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px);
    background: var(--paper); flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 1.3rem; padding: 2rem 2.2rem;
    transform: translateX(100%); transition: transform .35s var(--ease);
    box-shadow: -10px 0 40px rgba(27,72,44,.2); z-index: 90;
  }
  body.nav-open .nav-links { transform: translateX(0); }
  .nav-links a { font-size: 1.35rem; font-family: var(--display); }
  .brand small { display: none; }
  /* Keep the language switch reachable while the drawer is open. */
  .lang-toggle { position: relative; z-index: 95; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: clamp(6.5rem, 12vw, 9rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { margin-bottom: .3em; }
.hero h1 .accent { color: var(--orange-ink); font-style: italic; }
.hero .lead { max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.5rem; }

.hero-art { position: relative; }
/* The three most recent comic covers, laid down like a small stack on a
   table: each card is half the column wide and they overlap heavily, so the
   group fills the banner. The offsets are deliberately uneven, left to
   right, so it reads as dropped there rather than centred with a ruler. */
.hero-fan { display: flex; align-items: center; justify-content: center; padding: 1.6rem 0 1.4rem; }
.hero-card {
  flex: none; width: 50%; background: #fff; padding: 9px; border-radius: 10px;
  box-shadow: 0 16px 38px var(--shadow-strong);
}
.hero-card img { border-radius: 4px; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }
.hero-card:nth-child(1) { z-index: 1; margin-right: -27%; transform: translateY(26px) rotate(-5deg) scale(.90); }
.hero-card:nth-child(2) { z-index: 3; transform: translateY(-14px) rotate(1.5deg) scale(1.06); }
.hero-card:nth-child(3) { z-index: 2; margin-left: -23%; transform: translateY(18px) rotate(5.5deg) scale(.86); }

/* taped photo frame */
.frame { position: relative; background: #fff; padding: 12px; border-radius: 6px; box-shadow: 0 18px 40px var(--shadow-strong); }
.frame img { border-radius: 3px; }
.frame::after {
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 92px; height: 28px; background: rgba(250, 202, 145, .75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.frame--notape::after { display: none; }


/* ============================================================
   MISSION BAND
   ============================================================ */

/* ============================================================
   PROJECT CARDS — comics & graphic facilitation
   ============================================================ */
.card-grid { display: grid; gap: clamp(1.4rem, 3.2vw, 2.4rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }

.project-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.project-card:hover, .project-card:focus-within { transform: translateY(-7px); box-shadow: 0 22px 46px var(--shadow-strong); }
.project-card .cover { position: relative; overflow: hidden; background: var(--paper-2); }
.project-card .cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease); }
.project-card:hover .cover img { transform: scale(1.045); }
.project-card--portrait .cover { aspect-ratio: 3 / 4; }
.project-card--landscape .cover { aspect-ratio: 4 / 3; }
.project-card--landscape .cover img { object-position: center; }


.card-body { padding: 1.05rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card-tag { font-family: var(--hand); font-weight: 600; color: var(--emerald); font-size: .92rem; line-height: 1.3; }
.card-body h3 { margin: .2rem 0 .45rem; }
.card-body p { font-size: .95rem; color: var(--ink-soft); margin: 0 0 1rem; }
.card-more { margin-top: auto; font-weight: 800; font-size: .92rem; color: var(--emerald); display: inline-flex; align-items: center; gap: .4rem; }
.project-card:hover .card-more { color: var(--forest); }
.project-card:hover .card-more .arrow { transform: translateX(4px); }
.card-more .arrow { transition: transform .25s var(--ease); }
/* whole card is the link target */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 4; }

/* ============================================================
   MASONRY — illustrations
   ============================================================ */
.masonry { column-count: 3; column-gap: clamp(.9rem, 2vw, 1.4rem); }
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 540px) { .masonry { column-count: 1; } }

.tile {
  break-inside: avoid; margin: 0 0 clamp(.9rem, 2vw, 1.4rem);
  position: relative; border-radius: 12px; overflow: hidden; cursor: zoom-in;
  background: var(--card); box-shadow: 0 8px 22px var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: 0 18px 38px var(--shadow-strong); }
.tile img { width: 100%; transition: transform .6s var(--ease); }
.tile:hover img { transform: scale(1.035); }
.tile-cap {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem .95rem .85rem;
  background: linear-gradient(to top, rgba(27,72,44,.9), transparent);
  color: #fff; transform: translateY(8px); opacity: 0; transition: all .3s var(--ease);
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { transform: translateY(0); opacity: 1; }
.tile-cap .t { font-family: var(--display); font-weight: 600; font-size: 1.05rem; display: block; line-height: 1.2; }
.tile-cap .m { font-size: .82rem; color: var(--mint); }

/* ============================================================
   PROJECT PAGE — reader
   ============================================================ */
.project-hero { padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)); padding-bottom: clamp(1rem, 3vw, 2rem); }
.crumbs { font-size: .9rem; font-weight: 700; color: var(--ink-faint); margin-bottom: .8rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.crumbs a { color: var(--emerald); }
.crumbs a:hover { color: var(--forest); }

.project-meta { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 820px) { .project-meta { grid-template-columns: 1fr; } }
.project-facts { background: var(--card); border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: 0 8px 24px var(--shadow); }
.project-facts dl { margin: 0; display: grid; gap: .9rem; }
.project-facts dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 800; }
.project-facts dd { margin: .1rem 0 0; font-weight: 600; color: var(--forest); }

/* language switch for a comic that exists in both versions */
.version-switch { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.version-switch .vs-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 800; }
.version-btn {
  padding: .35rem .95rem; border-radius: 999px; font-weight: 800; font-size: .85rem;
  border: 2px solid var(--leaf); color: var(--forest); transition: all .2s;
}
.version-btn:hover { border-color: var(--emerald); background: var(--mint); }
.version-btn.active { background: var(--forest); border-color: var(--forest); color: #fff; }

.lang-note {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem;
  background: var(--peach); color: var(--forest); font-weight: 700; font-size: .9rem;
  padding: .45rem 1rem .45rem .55rem; border-radius: 999px;
}
.flag { display: block; width: 26px; height: 18px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }

.reader { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); justify-items: center; }
.reader-item { width: 100%; display: flex; flex-direction: column; align-items: center; }
.reader-page {
  position: relative; width: 100%; max-width: 900px; cursor: zoom-in;
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 14px 40px var(--shadow-strong);
  transition: transform .3s var(--ease);
}
.reader-page:hover { transform: translateY(-4px); }
.reader--wide .reader-page { max-width: 1080px; }
.reader-page img { width: 100%; }
.reader-page .pg {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  background: rgba(30,42,32,.75); color: #fff; font-size: .75rem; font-weight: 800;
  padding: .25rem .6rem; border-radius: 999px; backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s;
}
.reader-page:hover .pg { opacity: 1; }
.reader-page .zoom-hint {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  background: rgba(30,42,32,.75); color: #fff; font-size: .78rem; font-weight: 700;
  padding: .35rem .8rem; border-radius: 999px; backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s;
}
.reader-page:hover .zoom-hint { opacity: 1; }
.board-title { font-family: var(--hand); font-weight: 600; font-size: 1.05rem; color: var(--emerald); text-align: center; margin: 0 0 .5rem; }

/* prev / next between projects */
.project-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.project-nav a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--emerald); }
.project-nav a:hover { color: var(--forest); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

.about-portrait .cap { font-family: var(--hand); font-weight: 500; color: var(--ink-soft); font-size: .95rem; text-align: center; margin-top: 1.1rem; }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  /* The art moves above the copy; the tilted comic hangs past its box, so
     leave room for it rather than letting it sit on the headline. */
  .hero-art { order: -1; max-width: 440px; margin: 0 auto 2.5rem; }
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 2.2rem; } }

.timeline { position: relative; margin-top: .8rem; padding-left: 1.6rem; border-left: 2px dashed var(--leaf); }
.timeline li { position: relative; padding: 0 0 1.4rem .4rem; }
.timeline li::before {
  content: ""; position: absolute; left: -2.15rem; top: .45rem; width: 13px; height: 13px;
  background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 4px var(--paper);
}
.section--tint .timeline li::before { box-shadow: 0 0 0 4px var(--paper-2); }
.timeline .yr { font-weight: 800; color: var(--emerald); font-size: .88rem; letter-spacing: .02em; }
.timeline .role { font-family: var(--display); font-size: 1.1rem; font-weight: 600; display: block; color: var(--forest); line-height: 1.25; }



/* ---------- published research ---------- */
.pub-card {
  background: var(--card); border-radius: var(--radius); padding: 1.5rem 1.7rem;
  box-shadow: 0 8px 24px var(--shadow); max-width: 46rem;
}
.pub-label {
  display: inline-block; background: var(--mint); color: var(--forest);
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 999px; margin-bottom: .8rem;
}
.pub-cite { font-size: .97rem; color: var(--ink-soft); margin-bottom: 1.1rem; max-width: none; }
.pub-cite em { color: var(--forest); font-style: normal; font-weight: 700; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--forest); }
.field input, .field textarea {
  width: 100%; padding: .8rem 1rem; border-radius: 10px; border: 2px solid var(--line);
  background: var(--card); font-family: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 4px rgba(57,138,106,.2); }
.field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: .88rem; color: var(--ink-faint); }
.form-note:empty { display: none; }   /* no gap before the first submission */
.form-note.is-ok  { color: var(--emerald); font-weight: 700; }
/* Orange, not red: the palette's red is reserved for button fills. */
.form-note.is-err { color: var(--orange-ink); font-weight: 700; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
/* Bots fill hidden fields; people never see this one. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-cards { display: grid; gap: .9rem; }
.contact-line { display: flex; align-items: center; gap: .9rem; background: var(--card); border-radius: var(--radius); padding: .95rem 1.15rem; box-shadow: 0 6px 18px var(--shadow); transition: transform .25s var(--ease); }
.contact-line:hover { transform: translateX(4px); }
.contact-line .ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--mint); border-radius: 12px; color: var(--forest); }
.contact-line .lbl { font-size: .76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.contact-line .val { font-weight: 700; color: var(--ink); word-break: break-word; }

.socials { display: flex; gap: .7rem; margin-top: .5rem; }
.socials a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: #fff; transition: transform .25s var(--ease), background .25s; }
.socials a:hover { transform: translateY(-4px); background: var(--emerald); }
.socials svg { width: 22px; height: 22px; }

/* ============================================================
   LIGHTBOX (with pan & zoom)
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; }
.lightbox.open { display: block; }
.lightbox-bg { position: absolute; inset: 0; background: #101E14; }
.lightbox-stage { position: relative; height: 100%; display: flex; flex-direction: column; }
.lightbox-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem); color: var(--on-dark); position: relative; z-index: 3;
}
.lightbox-title { font-family: var(--display); font-size: clamp(1rem, 2.2vw, 1.45rem); color: #fff; line-height: 1.2; }
.lightbox-title .meta { display: block; font-family: var(--hand); font-weight: 500; color: var(--peach); font-size: .9rem; line-height: 1.3; }
.lb-tools { display: flex; gap: .5rem; flex: none; }
.lb-btn {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.13); color: #fff;
  display: grid; place-items: center; font-size: 1.25rem; transition: background .2s, transform .2s;
}
.lb-btn:hover { background: rgba(255,255,255,.28); }
.lb-close:hover { transform: rotate(90deg); }

.lightbox-body { flex: 1; position: relative; min-height: 0; }
/* Absolutely positioned so it has a definite height — that is what lets
   `max-height: 100%` on the artwork actually constrain it. */
.lb-viewport {
  position: absolute; inset: 0; padding: 0 clamp(.4rem, 5vw, 4.5rem);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: zoom-in;
}
.lb-viewport.is-zoomed { cursor: grab; }
.lb-viewport.is-panning { cursor: grabbing; }
.lightbox-img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px;
  background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.55);
  transform-origin: center center; will-change: transform;
  transition: transform .22s var(--ease);
}
.lb-viewport.is-panning .lightbox-img { transition: none; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.6rem; display: grid; place-items: center; transition: background .2s; z-index: 3;
}
.lb-nav:hover { background: rgba(255,255,255,.3); }
.lb-prev { left: clamp(.3rem, 2vw, 1.4rem); }
.lb-next { right: clamp(.3rem, 2vw, 1.4rem); }
.lightbox-foot { text-align: center; color: var(--on-dark-2); padding: .6rem 1rem 1.1rem; font-size: .92rem; position: relative; z-index: 3; }
.lightbox-foot .counter { font-weight: 800; color: #fff; }
.lightbox-foot .desc { max-width: 62ch; margin: .2rem auto 0; color: var(--on-dark-2); }
@media (max-width: 600px) { .lb-nav { width: 42px; height: 42px; font-size: 1.3rem; } .lightbox-foot .desc { display: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--forest); color: var(--on-dark-2); padding-block: clamp(2.8rem, 6vw, 4rem) 1.4rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--gap); }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer h4 { color: #fff; }
.site-footer a { color: var(--on-dark-2); transition: color .2s; }
.site-footer a:hover { color: var(--peach); }
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.footer-brand img { width: 52px; height: 52px; border-radius: 50%; }
.footer-brand .n { font-family: var(--display); font-size: 1.25rem; color: #fff; }
.footer-links li { margin-bottom: .45rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.4rem; padding-top: 1.2rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  font-size: .84rem; color: #91AC89;
}
.footer-bottom .hand { font-family: var(--hand); font-weight: 500; font-size: .92rem; color: var(--peach); }

/* ============================================================
   IMAGE LOADING
   ============================================================ */
/* Every generated <img> carries its intrinsic ratio and a placeholder colour,
   so nothing on the page shifts while the artwork streams in. */
img[data-ph] { background-color: var(--ph, var(--paper-2)); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tile:hover img, .project-card:hover .cover img, .project-card:hover, .tile:hover, .reader-page:hover { transform: none; }
  .lightbox-img { transition: none; }
}

/* ---------- page intro band ---------- */
.page-hero { padding-top: calc(var(--header-h) + clamp(1.5rem, 5vw, 3.5rem)); padding-bottom: clamp(1rem, 2.5vw, 2rem); position: relative; }
.page-hero .kicker { margin-bottom: .15rem; }
.page-hero p { max-width: 60ch; }

/* ---------- empty state (no project yet in a category) ---------- */
.empty-note { color: var(--ink-faint); font-style: italic; }