/* ============================================================
   Floral Portfolio — shared design system
   Sunlit-wildflower theme. One stylesheet drives index.html and
   every page in /pages. Layout + look live in reusable classes
   here; pages stay (almost) inline-style free.
   ============================================================ */

/* ---------------- tokens ---------------- */
:root {
  /* colour */
  --cream: #FBF6EC;
  --ink: #2A2118;
  --ink-muted: #4A4032;
  --soft: #6B5E4D;
  --faint: #A99477;
  --accent: #E8843A;
  --coral: #E2674A;
  --sun: #FBE39B;
  --dot: #F4C13F;
  --sky-pale: #E7F3FB;
  --card-border: #EFE6D5;
  --divider: #F0E7D6;
  --pill-border: #EAD9BD;
  --demo-bg: #FFF4E6;
  --demo-border: #F3DDBF;

  /* type */
  --serif: 'Instrument Serif', serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Space Mono', monospace;

  /* sky gradients (signature element) */
  --sky-up: linear-gradient(180deg, #2E8AD2 0%, #5AABE5 62%, #8AC6ED 100%);
  --sky-down: linear-gradient(180deg, #8AC6ED 0%, #57A8E4 44%, #2E8AD2 100%);

  /* motion + metrics */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --maxw: 1240px;
  --maxw-narrow: 1180px;
  --pad-x: clamp(20px, 6vw, 96px);
  --pad-y: clamp(90px, 13vh, 150px);
}

/* ---------------- reset ---------------- */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
/* The author `img { display: block }` above overrides the UA `[hidden]`
   rule, so a hidden <img> (e.g. .lightbox__img while a video plays) would
   still draw an empty box over the media. Restore the hidden contract. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
::selection { background: var(--dot); color: var(--ink); }

/* ---------------- keyframes ---------------- */
@keyframes swayA  { 0%,100% { transform: rotate(-3deg); }  50% { transform: rotate(3.5deg); } }
@keyframes swayB  { 0%,100% { transform: rotate(2.5deg); } 50% { transform: rotate(-3deg); } }
@keyframes floatA { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-14px); } }

/* ---------------- layout primitives ---------------- */
.page { position: relative; overflow-x: clip; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.wrap--narrow { max-width: var(--maxw-narrow); }
.section { position: relative; padding: var(--pad-y) var(--pad-x); overflow: clip; }
.section--pale { background: var(--sky-pale); }

/* sky bands */
.hero { position: relative; overflow: clip; color: #fff; background: var(--sky-up); }
.hero--home { min-height: 100vh; }
.hero--project { padding-bottom: clamp(120px, 16vh, 200px); }
.band-down { position: relative; overflow: clip; color: #fff; background: var(--sky-down); }
.band-down.section { } /* allow .section padding on a sky band */

/* ---------------- colour helpers ---------------- */
.coral { color: var(--coral); }
.sun { color: var(--sun); }

/* ---------------- reveal-on-scroll ---------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease) var(--reveal-delay, 0s),
    transform .9s var(--ease) var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
.rd-1 { --reveal-delay: .08s; }
.rd-2 { --reveal-delay: .16s; }
.rd-soft { --reveal-delay: .1s; }

/* ---------------- decorative blooms ---------------- */
/* position + size stay inline (unique per bloom); motion is classed */
.bloom { position: absolute; pointer-events: none; }
.bloom__inner { width: 100%; height: 100%; }
.bloom__inner img { width: 100%; height: 100%; object-fit: contain; }
.sway-a { transform-origin: 50% 0; animation: swayA 8s ease-in-out infinite; }
.sway-b { transform-origin: 50% 0; animation: swayB 7.5s ease-in-out infinite; }
.float  { animation: floatA 9s ease-in-out infinite; }
.from-bottom { transform-origin: 50% 100%; }

/* ---------------- nav ---------------- */
/* custom-element hosts render their markup in light DOM; keep them transparent to layout */
site-nav, site-footer { display: contents; }
.nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; padding: 1.5rem var(--pad-x);
}
.nav--over { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.nav--solid { position: relative; z-index: 20; }
.brand {
  font-family: var(--serif); font-size: 1.55rem; color: #fff;
  text-shadow: 0 1px 12px rgba(0,40,80,.28);
}
.nav-list {
  display: flex; gap: clamp(1rem, 2.4vw, 2rem); list-style: none;
  margin: 0; padding: 0; font-weight: 500; font-size: .95rem; flex-wrap: wrap;
}
.nav-link { color: #fff; padding-bottom: 3px; border-bottom: 1.5px solid transparent; transition: border-color .3s; }
.nav-link:hover, .nav-link.is-active { border-bottom-color: var(--sun); }
.back-pill {
  display: inline-flex; align-items: center; gap: .5rem; color: #fff;
  font-weight: 500; font-size: .95rem; padding: .55rem 1.1rem;
  border: 1.5px solid rgba(255,255,255,.6); border-radius: 999px;
  transition: background .3s, color .3s;
}
.back-pill:hover { background: #fff; color: #2E8AD2; }

/* ---------------- type: labels / headings ---------------- */
.eyebrow {
  font-family: var(--mono); font-size: .85rem; letter-spacing: .12em;
  text-transform: uppercase; margin: 0;
}
.eyebrow--sky {
  display: flex; align-items: center; gap: .6rem; color: #fff;
  text-shadow: 0 1px 10px rgba(0,40,80,.25);
}
.eyebrow--project { color: var(--sun); margin: 0 0 1.4rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); display: inline-block; }

.label {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
}
.label--sun { color: var(--sun); margin-bottom: 1.4rem; }
.label--lg { margin-bottom: 2.5rem; }

.display {
  font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 11vw, 9rem);
  line-height: .9; letter-spacing: -.01em; margin: 0; color: #fff;
  text-shadow: 0 3px 28px rgba(0,40,80,.25);
}
.h-section { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1; margin: 0; }
.h-stack   { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4rem); line-height: .98; margin: 0; }
.h-project { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .94; letter-spacing: -.01em; margin: 0; color: #fff; text-shadow: 0 3px 26px rgba(0,40,80,.25); }
.h-contact { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1; margin: 0; text-shadow: 0 2px 22px rgba(0,40,80,.2); }
.h-case    { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.5vw, 3.4rem); line-height: 1.02; margin: 0 0 1.6rem; }

/* ---------------- hero (home) ---------------- */
.hero-inner {
  position: relative; z-index: 10; min-height: 100vh; display: flex;
  flex-direction: column; justify-content: center; max-width: var(--maxw);
  margin: 0 auto; padding: 8rem var(--pad-x) 4.5rem;
}
.hero-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 2.5rem; margin-top: clamp(2.5rem, 6vh, 4.5rem);
}
.hero-desc {
  max-width: 34ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5;
  color: #fff; margin: 0; text-shadow: 0 1px 10px rgba(0,40,80,.22);
}

/* ---------------- buttons ---------------- */
.cta-row { display: flex; gap: .9rem; flex-wrap: wrap; }
.btn { padding: .95rem 1.9rem; border-radius: 999px; font-weight: 600; font-size: 1rem; display: inline-block; }
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: 0 12px 26px rgba(0,40,80,.2); transition: transform .35s, box-shadow .35s; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0,40,80,.28); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.75); color: #fff; transition: background .35s, color .35s, transform .35s; }
.btn-ghost:hover { background: #fff; color: #2E8AD2; transform: translateY(-3px); }

/* ---------------- work grid + project cards ---------------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.8rem; margin-top: 3.2rem; }
.card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--card-border); border-radius: 22px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(42,33,24,.06);
  transition:
    opacity .9s var(--ease) var(--reveal-delay, 0s),
    transform .9s var(--ease) var(--reveal-delay, 0s),
    box-shadow .45s;
}
.card:hover { box-shadow: 0 24px 50px rgba(42,33,24,.15); }
.card__media { height: 220px; overflow: hidden; background: #EAF0E4; }
.card__media img,
.card__media video { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- inline video (use instead of GIFs) ---------------- */
/* Looping muted autoplay video that behaves like an animated image.
   Pair with <video autoplay loop muted playsinline poster="…"> */
.demo-video {
  display: block; width: 100%; height: auto; border-radius: 14px;
  background: #EAF0E4; object-fit: cover;
}
.card__media--placeholder {
  background: repeating-linear-gradient(45deg, #F3E7CF, #F3E7CF 12px, #FBF6EC 12px, #FBF6EC 24px);
  display: flex; align-items: center; justify-content: center;
}
.card__media--placeholder span { font-family: var(--mono); font-size: .78rem; color: var(--faint); }
.card__body { padding: 1.6rem 1.7rem 1.9rem; display: flex; flex-direction: column; gap: .7rem; }
.card__title { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin: 0; }
.card__desc { font-size: .95rem; line-height: 1.55; color: var(--soft); margin: 0; }

.tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.pill {
  font-family: var(--mono); font-size: .72rem; padding: .3rem .65rem;
  border: 1px solid var(--pill-border); border-radius: 999px;
  color: var(--soft); background: var(--cream);
}

/* ---------------- skills ---------------- */
.skills-grid { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lead { margin-top: 1.5rem; font-size: 1.05rem; line-height: 1.55; color: var(--ink-muted); max-width: 34ch; }
.skill-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 3rem; }
.skill-title { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
.skill-list { list-style: none; margin: 0; padding: 0; }
.skill-list li { padding: .4rem 0; border-bottom: 1px solid rgba(42,33,24,.1); font-size: .98rem; color: var(--ink-muted); }
.skill-list li:last-child { border-bottom: none; }

/* ---------------- contact ---------------- */
.section--contact { text-align: center; padding: clamp(100px, 15vh, 170px) var(--pad-x) clamp(40px, 6vh, 64px); }
.contact-inner { position: relative; z-index: 10; max-width: 760px; margin: 0 auto; }
.contact-intro { margin: 1.8rem auto 0; max-width: 52ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,.92); }
.contact-links { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.6rem; }
.contact-pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.5rem;
  border: 1.5px solid rgba(255,255,255,.6); border-radius: 999px; font-weight: 500; color: #fff;
  transition: background .35s, color .35s, transform .35s, border-color .35s;
}
.contact-pill:hover { background: #fff; color: #2E8AD2; border-color: #fff; transform: translateY(-3px); }
.contact-pill span { font-size: 1.05rem; }

/* ---------------- footers ---------------- */
.footnote { font-family: var(--mono); font-size: .78rem; color: rgba(255,255,255,.8); margin: 0; }
.footnote--contact { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.footer { padding: 2.4rem var(--pad-x); text-align: center; border-top: 1px solid var(--card-border); }
.footer p { margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--faint); }

/* ============================================================
   Project case studies
   ============================================================ */
.case-hero {
  position: relative; z-index: 10; max-width: var(--maxw-narrow); margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 5rem) var(--pad-x) 0;
  display: grid; grid-template-columns: 1.55fr minmax(280px, 350px);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.case-summary {
  margin-top: 1.8rem; max-width: 52ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6; color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,40,80,.18);
}

/* meta card */
.meta-card {
  background: #fff; border: 1px solid var(--card-border); border-radius: 20px;
  padding: 1.7rem 1.8rem; box-shadow: 0 18px 42px rgba(0,40,80,.2);
  display: flex; flex-direction: column; gap: 1.05rem;
}
.meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--divider); padding-bottom: 1.05rem; }
.meta-key { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.meta-val { font-size: .92rem; color: var(--ink); text-align: right; line-height: 1.4; }
.meta-val--link { text-decoration: underline; text-decoration-color: #E8C9A0; }
.meta-stack { display: flex; flex-direction: column; gap: .7rem; }

/* cover image pulled over the hero seam */
.cover { max-width: var(--maxw-narrow); margin: clamp(-110px, -13vh, -70px) auto 0; padding: 0 var(--pad-x); position: relative; z-index: 6; }
.cover img { width: 100%; border-radius: 22px; box-shadow: 0 26px 60px rgba(0,40,80,.22); border: 1px solid rgba(255,255,255,.5); }

/* content shell */
.case-body {
  max-width: var(--maxw-narrow); margin: 0 auto;
  padding: clamp(64px, 9vh, 110px) var(--pad-x);
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.case-side { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 1.6rem; }
.case-nav { display: flex; flex-direction: column; gap: .55rem; }
.spy-link { font-size: .95rem; font-weight: 500; color: #9A8C78; transition: color .25s; }
.spy-link.is-active { color: var(--accent); font-weight: 700; }
.case-links { border-top: 1px solid var(--pill-border); padding-top: 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.ext-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .82rem; color: var(--ink); transition: color .25s; }
.ext-link:hover { color: var(--accent); }
.ext-link > span { color: var(--accent); }
.case-main { min-width: 0; }
.case-sec { margin-bottom: clamp(3.2rem, 7vh, 5.5rem); }
.case-sec:last-child { margin-bottom: 0; }
.label--case { margin: 0 0 .9rem; }

/* prose */
.prose { font-size: 1.08rem; line-height: 1.72; color: var(--ink-muted); max-width: 64ch; }
.prose--stack { display: flex; flex-direction: column; gap: 1.1rem; }
.prose > p { margin: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin: 2rem 0 .8rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.mt-prose { margin-top: 1.6rem; }

/* figures */
.fig { margin: 0; }
.fig img { width: 100%; border-radius: 14px; border: 1px solid var(--card-border); }
.fig img.on-white { background: #fff; }
.figcap { font-family: var(--mono); font-size: .76rem; color: var(--faint); margin-top: .7rem; }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.fig--solo { margin-top: 2rem; }

/* demo callout */
.demo {
  display: flex; align-items: center; gap: 1.1rem; margin-top: 2rem;
  background: var(--demo-bg); border: 1px solid var(--demo-border); border-radius: 16px;
  padding: 1.2rem 1.5rem; transition: transform .35s, box-shadow .35s;
}
.demo:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(232,132,58,.18); }
.demo__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.demo__title { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); flex: 1; }
.demo__arrow { font-size: 1.4rem; color: var(--accent); }

/* next-project band */
.next {
  position: relative; z-index: 5; max-width: var(--maxw-narrow); margin: 0 auto;
  padding: clamp(50px, 9vh, 90px) var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.next__label { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sun); margin: 0 0 .6rem; }
.next__title { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3rem); margin: 0; line-height: 1; }
.next__arrow { font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; flex: none; }
.foot-strip { position: relative; z-index: 5; border-top: 1px solid rgba(255,255,255,.18); padding: 1.6rem var(--pad-x); text-align: center; }

/* ============================================================
   About page
   ============================================================ */
.about-hero {
  position: relative; z-index: 10; max-width: var(--maxw-narrow); margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 5rem) var(--pad-x) clamp(80px, 12vh, 140px);
  display: grid; grid-template-columns: 1.4fr minmax(240px, 340px);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.photo-frame { background: #fff; padding: .9rem .9rem 0; border-radius: 18px; box-shadow: 0 18px 42px rgba(0,40,80,.2); }
.photo-frame img { width: 140%; border-radius: 12px; }
.photo-cap { font-family: var(--mono); font-size: .72rem; color: var(--soft); text-align: center; padding: .7rem 0 .9rem; margin: 0; }

/* generic label | body split (bio + section headers) */
.split { display: grid; grid-template-columns: minmax(160px, 1fr) 2.4fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.bio { display: flex; flex-direction: column; gap: 1.1rem; max-width: 60ch; font-size: 1.08rem; line-height: 1.7; color: var(--ink-muted); }
.bio-lead { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; color: var(--ink); margin: 0; }
.bio p { margin: 0; }
.bio a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  transition: background-size .25s ease, color .2s ease;
}
.bio a:hover { background-size: 0 2px; color: var(--ink); }

/* timeline */
.timeline-group { margin-top: clamp(2.4rem, 5vh, 3.6rem); }
.timeline-group__label { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.3rem; }
.timeline-item { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: clamp(1rem, 3vw, 2.5rem); padding: 1.6rem 0; border-top: 1px solid var(--card-border); }
.timeline-year { font-family: var(--mono); font-size: .82rem; color: var(--soft); }
.timeline-title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin: 0 0 .3rem; }
.timeline-org { font-size: .98rem; color: var(--ink); font-weight: 500; margin: 0 0 .6rem; }
.timeline-desc { font-size: .98rem; line-height: 1.6; color: var(--ink-muted); margin: 0; max-width: 62ch; }

/* film gallery (masonry columns handle mixed orientations) */
.gallery-intro { margin: 1.2rem 0 0; max-width: 70ch; font-size: 1.05rem; line-height: 1.65; color: var(--ink-muted); }
.film-grid { columns: 3 220px; column-gap: 1.2rem; margin-top: 3rem; }
.film-cell { break-inside: avoid; margin: 0 0 1.2rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--card-border); box-shadow: 0 10px 30px rgba(42,33,24,.06); cursor: pointer; }
.film-cell:focus { outline: none; }
.film-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* zoom the image (not the cell) on hover — the cell carries data-reveal, so
   transitioning the cell itself would clobber the scroll-reveal animation. */
.film-cell img { width: 100%; display: block; transition: transform .5s var(--ease); }
.film-cell:hover img, .film-cell:focus-visible img { transform: scale(1.045); }

/* ============================================================
   Responsive — collapse multi-column grids on small screens
   ============================================================ */
@media (max-width: 820px) {
  .case-hero { grid-template-columns: 1fr; }
  .case-body { grid-template-columns: 1fr; }
  .case-side { position: static; top: auto; }
  .skills-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .about-hero { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 1fr; gap: .5rem; }
  .next { flex-wrap: wrap; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .bloom__inner, .sway-a, .sway-b, .float { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- flower cursor (pointer devices only) ---------------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  body a, body button, body [role="button"], body input, body textarea { cursor: none; }

  .flower-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    will-change: translate;
    /* JS sets --x/--y for instant positioning; scale animates on hover */
    translate: calc(var(--x, -100px) - 50%) calc(var(--y, -100px) - 50%);
    scale: var(--s, 1);
    transition: opacity .25s ease, scale .15s ease;
  }
  .flower-cursor.is-active { opacity: 1; }
  .flower-cursor.is-hover { --s: 1.5; }
}

/* ---------------- garden (gallery) ---------------- */
.garden-hero {
  position: relative; z-index: 10; max-width: var(--maxw-narrow); margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 5rem) var(--pad-x) 0;
}

.garden-grid {
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  column-count: 3;
  column-gap: 16px;
}
@media (max-width: 900px) { .garden-grid { column-count: 2; } }
@media (max-width: 560px) { .garden-grid { column-count: 1; } }

/* JS balanced masonry (js/garden.js): tiles are absolutely positioned into
   the shortest column. Falls back to the CSS columns above when JS is off. */
.garden-grid.is-masonry {
  position: relative;
  column-count: initial;
  column-gap: 0;
}
.garden-grid.is-masonry .garden-item {
  position: absolute;
  margin: 0;
}

.garden-item {
  break-inside: avoid;
  margin: 0 0 16px;
  cursor: pointer;
}
.garden-item img,
.garden-item video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--sky-pale);
  box-shadow: 0 12px 30px rgba(0, 40, 80, .12);
  border: 1px solid var(--card-border);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.garden-item:hover img,
.garden-item:focus-visible img,
.garden-item:hover video,
.garden-item:focus-visible video {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 40, 80, .2);
}
.garden-item:focus { outline: none; }
.garden-item:focus-visible img,
.garden-item:focus-visible video { outline: 2px solid var(--accent); outline-offset: 3px; }
.garden-cap {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .03em;
  color: var(--soft); margin: .6rem .2rem 0;
}

/* ---------------- lightbox ---------------- */
body.lb-lock { overflow: hidden; }
/* Safari composites a playing <video> in its own layer that ignores z-index,
   so the grid's auto-playing tile clips paint on top of the lightbox overlay.
   Hide them while the lightbox is open (the overlay covers the page anyway). */
body.lb-lock .garden-video { visibility: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  visibility: hidden;
  transition: visibility .28s var(--ease);
  /* Promote the fixed overlay to its own compositing layer. Without this,
     Safari offsets a <video> descendant of a position:fixed element by the
     page scroll amount, dragging the clip to the bottom of the viewport. */
  transform: translateZ(0);
  will-change: transform;
}
/* Fade the dimmed backdrop on a pseudo-element, NOT on .lightbox itself.
   An opacity / filter / backdrop-filter on a <video> ancestor makes Safari
   composite the video in a detached layer pinned to the bottom of the
   viewport (the lightbox figure then looks empty). Keeping every video
   ancestor free of those properties is what keeps the clip in its box. */
.lightbox::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(20, 14, 8, .92);
  opacity: 0; transition: opacity .28s var(--ease);
}
.lightbox.is-open { visibility: visible; }
.lightbox.is-open::before { opacity: 1; }

.lightbox__content {
  position: relative; z-index: 1; /* paint above the ::before backdrop */
  margin: 0; max-width: min(1000px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  /* Promote the video's DIRECT parent to its own compositing layer so Safari
     composites the hardware-accelerated <video> inside this box instead of
     letting it peel out to the bottom of the viewport. */
  transform: translateZ(0);
  will-change: transform;
}
.lightbox__img,
.lightbox__video {
  max-width: 100%; max-height: 76vh; width: auto; height: auto;
  border-radius: 14px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.lightbox__cap {
  font-family: var(--body); font-size: 1rem; line-height: 1.5;
  color: #fff; text-align: center; max-width: 60ch;
}

.lightbox__close,
.lightbox__nav {
  position: absolute; z-index: 2;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.lightbox__close {
  top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 44px; height: 44px; font-size: 1.6rem; line-height: 1;
}
.lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; font-size: 2rem; line-height: 1;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 560px) {
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .skill-cols { grid-template-columns: 1fr; }
}