/* The Batik Forest, multi-page. One accent colour (hibiscus red), cream on deep forest green. */
:root {
  --ink: #0f2219;
  --forest: #142a20;
  --moss: #26443a;
  --moss-2: #2f5146;
  --cream: #f2ead8;
  --cream-2: rgba(242, 234, 216, 0.8);
  --cream-3: rgba(242, 234, 216, 0.62);
  --line: rgba(242, 234, 216, 0.14);
  --red: #c42d25;
  --red-press: #a8231d;
  --serif: 'Gambarino', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Switzer', 'Segoe UI', system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 4rem);
  /* a phone on its side: keep words and buttons clear of the notch */
  --gl: max(var(--gutter), env(safe-area-inset-left));
  --gr: max(var(--gutter), env(safe-area-inset-right));
  --wide: 72rem;
  --nav-h: 4.25rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* the open menu holds the page still; body stays visible so the sticky header stays put */
html.is-menu { overflow: hidden; }
html.is-menu body { overflow: visible; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
main:focus { outline: none; }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 90;
  padding: 0.6rem 1rem; border-radius: 999px;
  background: var(--cream); color: var(--ink); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.label {
  margin: 0;
  font: 500 0.75rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-3);
}

/* ---------- buttons and links ---------- */

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4rem;
  border: 0; border-radius: 999px;
  background: var(--red); color: #fff8ee;
  font: 500 1rem/1 var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.14s var(--ease), background-color 0.16s var(--ease);
}
.pill:hover { background: var(--red-press); }
.pill:active { transform: scale(0.97); }
.pill--quiet { background: var(--moss); color: var(--cream); }
.pill--quiet:hover { background: var(--moss-2); }
.pill--big { min-height: 56px; padding: 0 2rem; font-size: 1.0625rem; }

.arrow { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; transition: transform 0.2s var(--ease); }
.textlink {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.7rem 0; margin: -0.7rem 0; /* a finger-sized target without moving the text */
  font: 500 1rem/1.4 var(--sans); color: var(--cream); text-decoration: none;
}
.textlink:hover .arrow { transform: translateX(3px); }

/* ---------- the header and menu ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--nav-h);
  padding: env(safe-area-inset-top) var(--gr) 0 var(--gl);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
/* the frosted backing sits on its own layer: a blur on the header itself would trap the fixed menu inside it */
.nav::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(15, 34, 25, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 0.3s var(--ease);
}
/* home: over the forest, until the visitor scrolls past it */
.nav--over { position: fixed; left: 0; right: 0; border-color: transparent; }
.nav--over::after { opacity: 0; }
.nav--over.is-solid::after { opacity: 1; }
.nav--over::before {
  content: ''; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(10, 24, 17, 0.72), rgba(10, 24, 17, 0));
  transition: opacity 0.3s var(--ease);
}
.nav--over.is-solid { border-color: var(--line); }
.nav--over.is-solid::before { opacity: 0; }
.nav__brand {
  position: relative; z-index: 2; /* stays above the open menu */
  margin-right: auto; padding: 0.75rem 0;
  font: 400 1.3rem/1 var(--serif); text-decoration: none; white-space: nowrap;
}
.nav--over .nav__brand { text-shadow: 0 1px 12px rgba(6, 16, 11, 0.8); }
.nav__panel { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav__menu { display: flex; gap: clamp(0.25rem, 1.6vw, 1.4rem); }
.nav__menu a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.35rem;
  font: 500 0.9375rem/1 var(--sans); color: var(--cream-2); text-decoration: none;
  transition: color 0.16s;
}
.nav--over .nav__menu a { text-shadow: 0 1px 10px rgba(6, 16, 11, 0.85); }
.nav__menu a:hover, .nav__menu a[aria-current='page'] { color: var(--cream); }
.nav__menu a::after {
  content: ''; position: absolute; left: 0.35rem; right: 0.35rem; bottom: 0.55rem; height: 1.5px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.nav__menu a:hover::after, .nav__menu a[aria-current='page']::after { transform: none; }
.nav__ask { min-height: 44px; padding: 0 1.1rem; font-size: 0.9375rem; }
.nav__toggle { display: none; }

@media (max-width: 859px) {
  .nav__toggle {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.6rem;
    min-height: 44px; padding: 0 0.9rem 0 0.75rem;
    border: 1px solid rgba(242, 234, 216, 0.28); border-radius: 999px;
    background: rgba(10, 24, 17, 0.55); cursor: pointer;
    font: 500 0.9375rem/1 var(--sans);
  }
  .nav__bars { position: relative; width: 18px; height: 12px; }
  .nav__bars i { position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
  .nav__bars i:nth-child(1) { top: 2px; }
  .nav__bars i:nth-child(2) { top: 8px; }
  .is-menu .nav__bars i:nth-child(1) { top: 5px; transform: rotate(45deg); }
  .is-menu .nav__bars i:nth-child(2) { top: 5px; transform: rotate(-45deg); }
  /* the menu: a full-screen panel of big links */
  .nav__panel {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 2rem;
    padding: calc(var(--nav-h) + env(safe-area-inset-top) + 1rem) var(--gr) max(2rem, env(safe-area-inset-bottom)) var(--gl);
    background: #0c1c14;
    visibility: hidden; opacity: 0;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .is-menu .nav__panel { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); }
  .nav__menu { flex-direction: column; gap: 0.25rem; }
  .nav__menu a {
    min-height: 56px; padding: 0; justify-content: space-between;
    font: 400 clamp(2rem, 9vw, 2.75rem)/1.1 var(--serif); color: var(--cream);
    border-bottom: 1px solid var(--line); text-shadow: none !important;
  }
  .nav__menu a::after { left: 0; right: auto; bottom: auto; top: 50%; width: 0.5rem; height: 0.5rem; border-radius: 50%; transform: scale(0); }
  .nav__menu a[aria-current='page']::after { position: static; transform: none; margin-left: auto; }
  .nav__ask { align-self: flex-start; min-height: 52px; font-size: 1rem; }
  .nav__panel .nav__menu a, .nav__ask { transform: translateY(10px); opacity: 0; transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); }
  .is-menu .nav__panel .nav__menu a, .is-menu .nav__ask { transform: none; opacity: 1; }
  .is-menu .nav__menu a:nth-child(2) { transition-delay: 0.04s; }
  .is-menu .nav__menu a:nth-child(3) { transition-delay: 0.08s; }
  .is-menu .nav__menu a:nth-child(4) { transition-delay: 0.12s; }
  .is-menu .nav__ask { transition-delay: 0.16s; }
}

/* ---------- the forest (home) ---------- */

.hero { position: relative; }
.stage {
  position: relative;
  height: 100svh; overflow: hidden; overflow: clip;
  background: #1d3a2d;
  contain: paint;
  /* a finger resting on a cloth picks it up; it must not select words or open a menu */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.sky { position: absolute; left: 0; top: 0; width: 100%; height: 114%; will-change: transform; }
.sky__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.layer { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; will-change: transform; }
.layer[data-layer='1'] { height: 122%; }
.layer[data-layer='2'] { height: 145%; }
.layer[data-layer='3'] { height: 170%; }
.layer[data-layer='4'] { height: 200%; }
.layer[data-layer='5'] { height: 238%; }

.rays {
  position: absolute; left: 0; top: -12%; width: 100%; height: 150%;
  pointer-events: none; mix-blend-mode: screen; will-change: transform; opacity: 0.55;
}
.rays i {
  position: absolute; top: -10%; height: 115%;
  background: linear-gradient(to bottom, rgba(255, 238, 190, 0.78), rgba(255, 238, 190, 0.22) 55%, rgba(255, 238, 190, 0) 92%);
  transform-origin: 50% 0;
  filter: blur(8px);
  animation: ray 10s ease-in-out infinite alternate;
}
.rays i:nth-child(1) { left: 24%; width: 5%; --r: 22deg; animation-duration: 11s; }
.rays i:nth-child(2) { left: 41%; width: 9%; --r: 18deg; animation-duration: 13s; animation-delay: -4s; }
.rays i:nth-child(3) { left: 58%; width: 6%; --r: 20deg; animation-duration: 9s; animation-delay: -2s; }
.rays i:nth-child(4) { left: 70%; width: 11%; --r: 16deg; animation-duration: 15s; animation-delay: -7s; }
.rays i:nth-child(5) { left: 86%; width: 4%; --r: 21deg; animation-duration: 10s; animation-delay: -5s; }
@keyframes ray {
  from { transform: rotate(var(--r)) translateX(-6%); opacity: 0.5; }
  to { transform: rotate(calc(var(--r) - 3deg)) translateX(6%); opacity: 1; }
}

.flyby { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
/* the hornbill: 16 frames of a wingbeat, played as a strip */
.hornbill {
  position: absolute; left: 0; top: 0; width: 140px; aspect-ratio: 320 / 279;
  background: url('../img/anim/hornbill.webp') 0 0 / 1600% 100% no-repeat;
  animation: hornbill-beat 0.95s steps(16) infinite;
  filter: drop-shadow(0 10px 18px rgba(4, 12, 8, 0.35));
}
@keyframes hornbill-beat { to { background-position: 106.6667% 0; } }

.dim { position: absolute; inset: 0; background: #08140e; opacity: 0; pointer-events: none; }
.cloth {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.cloth.is-grabbing { cursor: grabbing !important; }
.layer--front { pointer-events: none; }
.sway { position: absolute; pointer-events: none; }
.sway__in { width: 100%; animation: sway 6s ease-in-out infinite alternate; }
.sway__in img { display: block; width: 100%; height: auto; user-select: none; }
@keyframes sway {
  from { transform: rotate(calc(var(--amp) * -1)); }
  to { transform: rotate(var(--amp)); }
}

.hero__copy {
  position: absolute; left: var(--gl); right: var(--gr);
  top: calc(var(--nav-h) + env(safe-area-inset-top) + clamp(0.5rem, 3svh, 2.5rem));
  max-width: 44rem;
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(6, 16, 11, 0.75), 0 0 2px rgba(6, 16, 11, 0.5);
}
.hero__copy::before {
  content: ''; position: absolute; z-index: -1;
  inset: -60% -40% -70% -30%;
  background: radial-gradient(closest-side, rgba(8, 22, 15, 0.86), rgba(8, 22, 15, 0.6) 55%, rgba(8, 22, 15, 0));
}
.hero__copy a { pointer-events: auto; text-shadow: none; }
.hero__kicker { color: var(--cream); margin-bottom: 0.9rem; text-shadow: 0 0 10px rgba(6, 16, 11, 0.95), 0 1px 3px rgba(6, 16, 11, 0.9); }
.hero__title { margin: 0; font: 400 clamp(3.25rem, 13.5vw, 6.75rem)/0.92 var(--serif); letter-spacing: -0.02em; }
.hero__title .line { display: inline-block; overflow: hidden; padding-bottom: 0.08em; vertical-align: top; }
.hero__title .line > span { display: inline-block; }
.hero__sub { margin: 1rem 0 0; max-width: 26rem; color: var(--cream); font-weight: 500; }
.hero__actions { margin: 1.4rem 0 0; }
@media (min-width: 900px) { .hero__title { font-size: clamp(4rem, 6.6vw, 6.75rem); } }
/* on a phone the four cloths fill the middle of the screen: the button waits below, in the cards */
@media (max-width: 699px) { .hero__actions { display: none; } }
@media (max-height: 690px) and (max-width: 700px) { .hero__sub { display: none; } }

.hint {
  position: absolute; left: 50%; bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.5rem));
  margin: 0; width: max-content; max-width: calc(100% - 2rem);
  transform: translateX(-50%);
  pointer-events: none;
}
.hint__pill {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1.1rem; border-radius: 1.6rem;
  background: rgba(10, 24, 17, 0.78);
  box-shadow: 0 0 0 1px rgba(242, 234, 216, 0.12), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  font: 500 0.9375rem/1.3 var(--sans); color: var(--cream); text-align: left;
}
[data-hint] .hint__pill { padding-left: 0.75rem; }
.hint__text { display: grid; gap: 0.1rem; }
.hint__b { color: var(--cream-2); font-weight: 400; }
/* a finger that drags sideways, then taps */
.hint__hand { flex: none; width: 34px; height: 34px; overflow: visible; }
.hint__finger { fill: rgba(242, 234, 216, 0.14); stroke: var(--cream); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform-box: view-box; transform-origin: 50% 80%; animation: hint-drag 3.2s var(--ease) infinite; }
.hint__ring { fill: none; stroke: var(--cream); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: hint-tap 3.2s ease-out infinite; }
@keyframes hint-drag {
  0%, 8% { transform: translateX(-5px); }
  38%, 58% { transform: translateX(5px); }
  66% { transform: translateX(5px) scale(0.9); }
  74% { transform: translateX(5px); }
  100% { transform: translateX(-5px); }
}
@keyframes hint-tap {
  0%, 64% { opacity: 0; transform: translateX(5px) scale(0.3); }
  68% { opacity: 0.9; }
  90%, 100% { opacity: 0; transform: translateX(5px) scale(1.2); }
}
/* after the hint: a way on to the cards */
.hint--cue { pointer-events: none; opacity: 0; text-decoration: none; transition: opacity 0.3s var(--ease); }
.hint--cue.is-on { pointer-events: auto; opacity: 1; transition: opacity 0.6s var(--ease) 0.6s; }
.hint--cue .hint__pill { display: flex; min-height: 44px; border-radius: 999px; }
.hint--cue .hint__pill::after {
  content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.2em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

/* a tap between the cloths: a ring of air */
.puff {
  position: absolute; z-index: 1; width: 140px; height: 140px; margin: -70px 0 0 -70px;
  border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(242, 234, 216, 0.7), 0 0 24px rgba(242, 234, 216, 0.18);
}

/* without WebGL: flat cloths that drift (each one a link to its page) */
.fallback { position: absolute; inset: 0; }
.fallback__cloth {
  position: absolute; width: clamp(120px, 19vw, 240px); aspect-ratio: 1;
  padding: clamp(6px, 1vw, 12px); background: #3a1f24;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
  animation: drift 7s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.7s);
}
.fallback__cloth img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fallback__cloth:nth-child(1) { left: 6%; top: 46%; }
.fallback__cloth:nth-child(2) { left: 29%; top: 54%; }
.fallback__cloth:nth-child(3) { left: 53%; top: 44%; }
.fallback__cloth:nth-child(4) { left: 76%; top: 53%; }
@media (max-width: 780px) {
  .fallback__cloth { width: 38vw; }
  .fallback__cloth:nth-child(1) { left: 6%; top: 34%; }
  .fallback__cloth:nth-child(2) { left: 54%; top: 40%; }
  .fallback__cloth:nth-child(3) { left: 8%; top: 58%; }
  .fallback__cloth:nth-child(4) { left: 56%; top: 64%; }
}
@keyframes drift {
  from { transform: translateY(-8px) rotate(-3deg); }
  to { transform: translateY(8px) rotate(3deg); }
}

/* the opening, and the fade when a cloth is opened */
.curtain { position: fixed; inset: 0; z-index: 60; background: var(--ink); pointer-events: none; }
.leave { position: fixed; inset: 0; z-index: 60; background: var(--ink); opacity: 0; pointer-events: none; }

/* ---------- home: below the forest ---------- */

.intro {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--gr) clamp(2rem, 5vw, 4rem) var(--gl);
  display: grid; gap: 1.25rem;
}
.intro__big { margin: 0; max-width: 46rem; font: 400 clamp(1.75rem, 4.4vw, 3rem)/1.15 var(--serif); letter-spacing: -0.01em; }
.intro__small { margin: 0; max-width: 34rem; color: var(--cream-2); }
@media (min-width: 900px) {
  .intro { grid-template-columns: 1.6fr 1fr; align-items: end; gap: 3rem; }
}

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section-title { margin: 0; font: 400 clamp(2.1rem, 6vw, 3.5rem)/1.02 var(--serif); letter-spacing: -0.015em; }

.cards { max-width: var(--wide); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--gr) clamp(4rem, 9vw, 7rem) var(--gl); }
.cards__list, .grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 1.5rem; }
.cards__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.card__link { display: grid; gap: 0.35rem; text-decoration: none; }
.card__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--forest); margin-bottom: 0.65rem; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8); }
.card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.card__title { margin: 0; font: 400 clamp(1.6rem, 3vw, 2rem)/1.1 var(--serif); }
.card__line { color: var(--cream-2); font-size: 0.9375rem; line-height: 1.5; }
.card__more { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.35rem; font-weight: 500; font-size: 0.9375rem; }
.card__link:hover .card__img img, .card__link:focus-visible .card__img img { transform: scale(1.04); }
.card__link:hover .arrow { transform: translateX(3px); }

.teaser {
  position: relative; display: grid; align-items: end;
  min-height: min(80svh, 44rem);
  padding: clamp(3rem, 8vw, 6rem) var(--gr) clamp(3rem, 8vw, 6rem) var(--gl);
  overflow: hidden;
}
.teaser__img {
  position: absolute; inset: 0;
  background: url('../img/photo/far-floor-s.webp') 50% 70% / cover no-repeat;
}
.teaser__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(15, 34, 25, 0.25), rgba(15, 34, 25, 0.92) 70%), linear-gradient(90deg, rgba(15, 34, 25, 0.7), rgba(15, 34, 25, 0)); }
.teaser__text { position: relative; max-width: 30rem; display: grid; gap: 1rem; justify-items: start; }
.teaser__text p:not(.label) { margin: 0; color: var(--cream); }
@media (min-width: 900px) { .teaser__text { margin-left: max(0px, calc((100vw - var(--wide)) / 2 - var(--gutter))); } }

.band {
  padding: clamp(4rem, 10vw, 8rem) var(--gr) clamp(4rem, 10vw, 8rem) var(--gl);
  text-align: center;
}
.band p { margin: 1rem auto 2rem; max-width: 28rem; color: var(--cream-2); }

/* ---------- page heads ---------- */

.page-head {
  position: relative;
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gr) clamp(2.5rem, 6vw, 4rem) var(--gl);
  display: grid; gap: 1rem; justify-items: start;
}
.page-title { margin: 0; max-width: 18ch; font: 400 clamp(2.5rem, 8vw, 5rem)/1 var(--serif); letter-spacing: -0.02em; }
.page-lede { margin: 0; max-width: 36rem; color: var(--cream-2); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); }
.page-head--photo { max-width: none; padding-top: clamp(5rem, 14vw, 10rem); overflow: hidden; isolation: isolate; }
.page-head--photo::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--img) 50% 40% / cover no-repeat; }
.page-head--photo::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(15, 34, 25, 0.3), rgba(15, 34, 25, 0.55) 45%, var(--ink) 96%); }
.page-head--canopy { --img: url('../img/photo/far-canopy-s.webp'); }
.page-head--floor { --img: url('../img/photo/far-floor-s.webp'); }
.page-head--photo { padding-left: max(var(--gl), calc((100vw - var(--wide)) / 2)); padding-right: max(var(--gr), calc((100vw - var(--wide)) / 2)); }
.page-head--photo .page-title, .page-head--photo .page-lede, .page-head--photo .label { text-shadow: 0 1px 14px rgba(6, 16, 11, 0.7); }
.page-head--photo .label { color: var(--cream); }

/* ---------- the list ---------- */

.grid {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--gr) clamp(4rem, 9vw, 7rem) var(--gl);
  gap: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
}
@media (min-width: 760px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .grid .card:nth-child(even) { margin-top: 6rem; }
}
.grid .card__title { font-size: clamp(2rem, 4vw, 2.6rem); }
.grid .card__line { font-size: 1rem; max-width: 30rem; }

/* ---------- one cloth ---------- */

.crumbs {
  max-width: var(--wide); margin: 0 auto;
  padding: 1.25rem var(--gr) 0 var(--gl);
  display: flex; gap: 0.6rem; align-items: center;
  font-size: 0.9375rem; color: var(--cream-3);
}
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream-2); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgba(242, 234, 216, 0.35); }
.crumbs [aria-current] { color: var(--cream); }

.piece {
  max-width: var(--wide); margin: 0 auto;
  padding: 0.75rem var(--gr) clamp(3rem, 7vw, 5rem) var(--gl);
  display: grid; gap: 2rem;
}
@media (min-width: 900px) {
  .piece { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .piece__media { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}
.piece__frame {
  position: relative; aspect-ratio: 1;
  touch-action: pan-y; cursor: crosshair;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.piece__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7); }
/* where a part of the pattern is: the rest of the cloth dims */
.marks { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; pointer-events: none; }
.mark {
  position: absolute; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 9999px rgba(8, 20, 14, 0.55);
  opacity: 0; transition: opacity 0.3s var(--ease), left 0.45s var(--ease), top 0.45s var(--ease), width 0.45s var(--ease), height 0.45s var(--ease);
}
.mark.is-on { opacity: 1; }
.loupe {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: clamp(110px, 32vmin, 200px); aspect-ratio: 1; border-radius: 50%;
  background-repeat: no-repeat; background-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(242, 234, 216, 0.92), 0 18px 40px rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 0.18s; pointer-events: none; will-change: transform;
}
.loupe.is-on { opacity: 1; }
.tip {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0.9rem 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--cream);
}
.tip svg, .parts__help svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.piece__title { margin: 0.4rem 0 0.9rem; font: 400 clamp(2.6rem, 7vw, 4rem)/1 var(--serif); letter-spacing: -0.02em; }
.piece__story { margin: 0; color: var(--cream-2); font-size: clamp(1.0625rem, 1.5vw, 1.15rem); }
.piece__h { margin: 2.25rem 0 0.35rem; font: 400 1.6rem/1.2 var(--serif); }
.parts__help { margin: 0 0 0.9rem; font-size: 0.9375rem; color: var(--cream-3); }
.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.part {
  display: flex; gap: 0.9rem; width: 100%; padding: 0.9rem 1rem;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(242, 234, 216, 0.03);
  text-align: left; cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.part:hover { background: rgba(242, 234, 216, 0.07); border-color: rgba(242, 234, 216, 0.3); }
.part[aria-pressed='true'] { background: rgba(196, 45, 37, 0.14); border-color: rgba(196, 45, 37, 0.7); }
.part__n {
  flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid rgba(242, 234, 216, 0.4); font: 500 0.875rem/1 var(--sans);
}
.part[aria-pressed='true'] .part__n { background: var(--red); border-color: var(--red); color: #fff8ee; }
.part__body { display: grid; gap: 0.2rem; flex: 1; }
.part__crop { flex: none; width: 4.25rem; height: 4.25rem; border-radius: 6px; background-repeat: no-repeat; box-shadow: 0 0 0 1px var(--line); }
.part__name { font: 400 1.25rem/1.25 var(--serif); }
.part__text { color: var(--cream-2); font-size: 0.9375rem; line-height: 1.5; }

.facts { margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.facts div { display: grid; gap: 0.25rem; }
.facts dt { font: 500 0.75rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-3); }
.facts dd { margin: 0; font-size: 1rem; }
.piece__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.credit { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--cream-3); }

.pager {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--gr) clamp(4rem, 9vw, 6rem) var(--gl);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.pager__link {
  display: flex; align-items: center; gap: 1rem; min-height: 5.5rem; padding: 0.75rem;
  border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
  transition: background-color 0.2s var(--ease);
}
.pager__link:hover { background: rgba(242, 234, 216, 0.05); }
.pager__link img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 3px; flex: none; }
.pager__link > span { display: grid; gap: 0.2rem; min-width: 0; }
.pager__link--next { justify-content: flex-end; text-align: right; }
.pager__title { font: 400 1.35rem/1.15 var(--serif); }
@media (max-width: 520px) {
  .pager__link { flex-direction: column; align-items: flex-start; }
  .pager__link--next { flex-direction: column-reverse; align-items: flex-end; }
  .pager__link img { width: 3.5rem; height: 3.5rem; }
}

/* ---------- about ---------- */

.steps, .ways, .these, .credits { max-width: var(--wide); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--gr) 0 var(--gl); }
.steps__list { list-style: none; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 2rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.step { display: grid; gap: 0.6rem; align-content: start; }
.step__img { display: block; aspect-ratio: 4 / 3; border-radius: 4px; background-size: 340%; background-repeat: no-repeat; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8); }
.step__n { display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: 0.4rem; border-radius: 50%; background: var(--red); font: 500 0.9375rem/1 var(--sans); color: #fff8ee; }
.step__title { margin: 0; font: 400 1.6rem/1.15 var(--serif); }
.step p { margin: 0; color: var(--cream-2); }

.ways__grid { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
@media (min-width: 760px) { .ways__grid { grid-template-columns: 1fr 1fr; } }
.way { padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(242, 234, 216, 0.03); }
.way__title { margin: 0 0 0.5rem; font: 400 1.6rem/1.15 var(--serif); }
.way p { margin: 0; color: var(--cream-2); }

/* the forest floor, where the two flowers open */
.floor { max-width: var(--wide); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) var(--gr) 0 var(--gl); display: grid; gap: 1.5rem; }
.floor__head p { margin: 0.9rem 0 0; max-width: 32rem; color: var(--cream-2); }
.floor__scene {
  position: relative; overflow: hidden; border-radius: 6px;
  aspect-ratio: 16 / 10; min-height: 22rem;
  background: url('../img/photo/far-floor-s.webp') 50% 72% / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
}
.floor__scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(8, 20, 14, 0.35), rgba(8, 20, 14, 0) 40%, rgba(8, 20, 14, 0.25)); }
.bloom { position: absolute; z-index: 1; }
.bloom__art { position: relative; aspect-ratio: 1; }
.bloom__ground, .bloom__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.perch { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.bloom--raya { right: 6%; top: 4%; width: min(30%, 260px); }
.bloom--rafflesia { left: 50%; bottom: -10%; width: min(62%, 520px); transform: translateX(-50%); }
@media (max-width: 699px) {
  .floor__scene { aspect-ratio: 4 / 5; min-height: 0; }
  .bloom--raya { right: 2%; top: 3%; width: 44%; }
  .bloom--rafflesia { width: 96%; bottom: -8%; }
}
.notes { display: grid; gap: 1rem; }
@media (min-width: 760px) { .notes { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.note { margin: 0; padding-left: 0.9rem; border-left: 2px solid var(--red); font-size: 1rem; line-height: 1.55; color: var(--cream-2); }
.note__name { display: block; font: 400 1.35rem/1.3 var(--serif); color: var(--cream); }

.these p { margin: 1rem 0 1.75rem; max-width: 36rem; color: var(--cream-2); }
.credits { padding-bottom: clamp(4rem, 9vw, 6rem); }
.credits__title { margin: 0 0 0.75rem; font: 400 1.5rem/1.2 var(--serif); }
.credits p { margin: 0 0 0.7rem; max-width: 60rem; font-size: 0.875rem; line-height: 1.75; color: var(--cream-3); }
.credits__k { color: var(--cream-2); font-weight: 500; margin-right: 0.35em; }

/* ---------- contact ---------- */

.page-contact .page-head { max-width: 46rem; }
.ask {
  max-width: 46rem; margin: 0 auto;
  padding: 0 var(--gr) clamp(4rem, 9vw, 6rem) var(--gl);
  display: grid; gap: 2rem;
}
.ask__set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0.9rem; }
.ask__legend { padding: 0; font: 400 1.5rem/1.2 var(--serif); }
.ask__opt { font: 400 0.9375rem/1 var(--sans); color: var(--cream-3); }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 9rem), 1fr)); gap: 0.75rem; }
.choice { position: relative; display: grid; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__img { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 5px; background: var(--forest); font: 400 2rem/1 var(--serif); color: var(--cream-3); }
.choice__img img { width: 100%; height: 100%; object-fit: cover; }
.choice__name { font-size: 0.9375rem; font-weight: 500; padding: 0 0.15rem 0.15rem; }
.choice--other { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 0.9rem; }
.choice--other .choice__img { width: 3rem; font-size: 1.4rem; }
.choice:hover { background: rgba(242, 234, 216, 0.05); }
.choice:has(input:checked) { border-color: var(--red); background: rgba(196, 45, 37, 0.12); box-shadow: 0 0 0 1px var(--red); }
.choice:has(input:focus-visible) { outline: 2px solid var(--cream); outline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid rgba(242, 234, 216, 0.3); border-radius: 999px; cursor: pointer; font-size: 0.9375rem; font-weight: 500; transition: background-color 0.2s, border-color 0.2s; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:hover { background: rgba(242, 234, 216, 0.06); }
.chip:has(input:checked) { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--cream); outline-offset: 3px; }
.ask__note textarea {
  width: 100%; padding: 0.85rem 1rem; resize: vertical;
  border: 1px solid rgba(242, 234, 216, 0.3); border-radius: 10px;
  background: rgba(242, 234, 216, 0.04); color: var(--cream);
  font: 400 1rem/1.5 var(--sans);
}
.ask__note textarea:focus { outline: 2px solid var(--cream); outline-offset: 2px; }
.ask__preview { padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--forest); border: 1px solid var(--line); }
.ask__text { margin: 0.5rem 0 0; color: var(--cream); white-space: pre-line; }
.ask .pill--big { justify-self: start; }

/* ---------- footer ---------- */

.foot { padding: 2.5rem var(--gr) max(2.5rem, env(safe-area-inset-bottom)) var(--gl); border-top: 1px solid var(--line); }
.foot__top { max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.foot__brand { padding: 0.75rem 0; font: 400 1.4rem/1 var(--serif); text-decoration: none; margin-right: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--cream-2); text-decoration: none; font-size: 0.9375rem; }
.foot__links a:hover { color: var(--cream); }
.foot__note { max-width: var(--wide); margin: 1.5rem auto 0; font-size: 0.875rem; line-height: 1.7; color: var(--cream-3); }

/* ---------- butterflies ---------- */

.flutter { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }

/* ---------- a phone on its side: short and wide ---------- */

@media (orientation: landscape) and (max-height: 520px) {
  :root { --nav-h: 3.5rem; }
  .hero__copy { top: calc(var(--nav-h) + env(safe-area-inset-top) + 0.25rem); }
  .hero__kicker { margin-bottom: 0.5rem; }
  .hero__title { font-size: clamp(2.5rem, 14svh, 4.25rem); }
  .hero__sub, .hero__actions { display: none; }
  .hint { bottom: max(0.75rem, calc(env(safe-area-inset-bottom) + 0.25rem)); }
  .hint__pill { padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .nav__panel { justify-content: flex-start; overflow-y: auto; }
  .nav__menu a { min-height: 48px; font-size: 1.75rem; }
  .piece { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .piece__media { position: sticky; top: calc(var(--nav-h) + 0.75rem); }
  .piece__frame { width: min(100%, calc(100svh - var(--nav-h) - 5rem)); }
  .floor__scene { aspect-ratio: 16 / 9; min-height: 0; }
  .bloom--raya { width: 24%; }
  .bloom--rafflesia { width: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .sway__in, .rays i, .fallback__cloth, .hornbill, .hint__finger, .hint__ring { animation: none; }
  .mark { transition: opacity 0.2s; }
}