/* Poison Arrow Frog Studios — one screen in the forest.
 *
 * Layers, back to front (all fixed to the viewport):
 *   photo · tint · light shafts · far mist · mid foliage · ground mist ·
 *   near foliage · shade · perch + mascot · text · footer · controls
 *
 * Foliage is drawn with SVG silhouettes used as CSS masks over gradients,
 * so each leaf is a plain element whose sway (the `rotate` property) and
 * parallax (a translate on its layer) stay on the compositor.
 */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --ivory: #f4ecd8;
  --ivory-soft: rgba(244, 236, 216, 0.74);
  --ivory-dim: rgba(244, 236, 216, 0.6);
  --lime: #c9f04a;
  --turquoise: #55dbdf;
  --deep: #071309;
  --font: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}

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

html {
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--deep);
  color: var(--ivory);
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-x: clip;
  line-height: 1.4;
}

::selection { background: rgba(201, 240, 74, 0.35); color: var(--ivory); }

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

/* ---------------------------------------------------------------- scene */

.scene {
  --px: 0;
  --py: 0;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.scene__photo img {
  position: absolute;
  left: -3%;
  top: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: 50% 42%;
  transition: opacity 1.6s ease;
  transform: translate3d(calc(var(--px) * -9px), calc(var(--py) * -6px), 0);
  animation: breathe-photo 46s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
/* The fade-in only exists when the script runs; without it the photo is
   simply there. */
html.js:not(.is-loaded) .scene__photo img { opacity: 0; }

.scene__tint {
  position: absolute;
  inset: 0;
  background: rgba(10, 44, 24, 0.24);
  mix-blend-mode: multiply;
}

/* Light shafts: soft horizontal bands, faded vertically, screened on top. */
.scene__light {
  position: absolute;
  top: -30vh;
  height: 170vh;
  width: 22vw;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 255, 205, 0.13) 40%, rgba(232, 255, 205, 0.17) 52%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 40%, transparent 80%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 40%, transparent 80%);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: shimmer 17s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--px) * -14px), 0, 0) rotate(-16deg);
}
.scene__light--a { left: 14vw; }
.scene__light--b { left: 76vw; width: 12vw; opacity: 0.5; animation-delay: -6s; animation-duration: 21s; transform: translate3d(calc(var(--px) * -14px), 0, 0) rotate(-11deg); }
.scene__light--c { left: 88vw; width: 15vw; opacity: 0.6; animation-delay: -11s; animation-duration: 14s; transform: translate3d(calc(var(--px) * -14px), 0, 0) rotate(-21deg); }

/* Mist: a couple of broad, faint clouds that drift across the frame. */
.scene__mist {
  position: absolute;
  left: -55vw;
  width: 210vw;
  will-change: transform;
}
.scene__mist--far {
  top: 14vh;
  height: 62vh;
  background:
    radial-gradient(58% 48% at 30% 52%, rgba(222, 242, 228, 0.13), transparent 72%),
    radial-gradient(44% 40% at 71% 44%, rgba(222, 242, 228, 0.1), transparent 72%),
    radial-gradient(70% 45% at 52% 62%, rgba(222, 242, 228, 0.07), transparent 72%);
  animation: drift 120s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 3px), 0);
}
.scene__mist--near {
  bottom: -12vh;
  height: 48vh;
  background:
    linear-gradient(to top, rgba(214, 236, 222, 0.17), rgba(214, 236, 222, 0.06) 45%, transparent 100%),
    radial-gradient(40% 55% at 38% 70%, rgba(214, 236, 222, 0.12), transparent 70%),
    radial-gradient(35% 50% at 74% 80%, rgba(214, 236, 222, 0.1), transparent 70%);
  animation: drift 84s ease-in-out infinite alternate-reverse;
  transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 5px), 0);
}

/* Fireflies and rain are drawn on a canvas by particles.js, above the
   shade so the vignette does not dim them; it rides with the mid-ground
   parallax. */
.scene__fireflies {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(calc(var(--px) * 18px), calc(var(--py) * 10px), 0);
  will-change: transform;
}

/* Vignette, the darker clearing behind the text, and the ground fade. */
.scene__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 44% 30% at 50% 24%, rgba(3, 9, 5, 0.58), transparent 100%),
    radial-gradient(ellipse 56% 52% at 50% 44%, rgba(4, 12, 7, 0.5), transparent 100%),
    radial-gradient(ellipse 115% 90% at 50% 50%, transparent 52%, rgba(3, 9, 5, 0.62) 100%),
    linear-gradient(to top, rgba(3, 9, 5, 0.88) 0%, rgba(3, 9, 5, 0.42) 13%, transparent 32%),
    linear-gradient(to bottom, rgba(3, 9, 5, 0.5), transparent 30%);
}

/* ---------------------------------------------------------------- foliage */

.layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.layer--mid { transform: translate3d(calc(var(--px) * 15px), calc(var(--py) * 8px), 0); }
.layer--near { transform: translate3d(calc(var(--px) * 30px), calc(var(--py) * 17px), 0); }

.leaf {
  --amp: 1.6deg;
  --dur: 8s;
  --delay: 0s;
  --w: 40vmin;
  --aspect: 1;
  position: absolute;
  display: block;
  width: var(--w);
  height: calc(var(--w) / var(--aspect));
  animation: sway var(--dur) cubic-bezier(0.42, 0, 0.58, 1) var(--delay) infinite alternate;
  will-change: rotate;
}
/* Silhouettes: an SVG shape used as a mask over a dark gradient. */
.leaf--mask {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: linear-gradient(165deg, #173d22 0%, #0d2715 55%, #071a0d 100%);
}
/* Photographs: leaf cutouts with alpha, boxed at their own aspect ratio. */
.leaf--img {
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.layer--mid .leaf--img { filter: brightness(0.6) saturate(0.85); }

/* Horizontal fronds hinge at their stem end; upright leaves at the petiole.
   The palm cutout's stem is at its right end, so palms hinge on the right
   and the box is laid out leftward from the anchor. */
.leaf--h {
  transform-origin: 0 50%;
  left: var(--ax);
  top: calc(var(--ay) - var(--w) / var(--aspect) / 2);
}
.leaf--h-right {
  transform-origin: 100% 50%;
  left: calc(var(--ax) - var(--w));
}
.leaf--v {
  transform-origin: 50% 100%;
  left: calc(var(--ax) - var(--w) / 2);
  top: calc(var(--ay) - var(--w) / var(--aspect));
}

.leaf--monstera-b { --aspect: 0.667; -webkit-mask-image: url('/assets/leaf-monstera-b.svg'); mask-image: url('/assets/leaf-monstera-b.svg'); }
.leaf--fern-b { --aspect: 2.826; -webkit-mask-image: url('/assets/leaf-fern-b.svg'); mask-image: url('/assets/leaf-fern-b.svg'); }
.leaf--alocasia-a { --aspect: 0.626; -webkit-mask-image: url('/assets/leaf-alocasia-a.svg'); mask-image: url('/assets/leaf-alocasia-a.svg'); }
.leaf--alocasia-b { --aspect: 0.628; -webkit-mask-image: url('/assets/leaf-alocasia-b.svg'); mask-image: url('/assets/leaf-alocasia-b.svg'); }

/* Mid layer */
.leaf--m1 { --aspect: 2.168; --w: 56vmin; --ax: calc(100vw + 8vmin); --ay: -5vmin; --amp: 1.4deg; --dur: 9.5s; --delay: -3s; transform: rotate(-52deg); }
.leaf--m2 { --aspect: 0.798; --w: 42vmin; --ax: -12vmin; --ay: calc(100vh + 8vmin); --amp: 1.2deg; --dur: 7.5s; --delay: -1.5s; transform: rotate(42deg); }
.leaf--m3 { --aspect: 2.158; --w: 58vmin; --ax: calc(100vw + 6vmin); --ay: calc(100vh - 6vmin); --amp: 1deg; --dur: 8.5s; --delay: -5s; transform: rotate(-150deg) scaleY(-1); }
.leaf--m4 { --w: 46vmin; --ax: 12vw; --ay: calc(100vh + 5vmin); --amp: 1.1deg; --dur: 7s; --delay: -2.4s; transform: rotate(-17deg); }

/* Near layer */
.leaf--n1 { --aspect: 2.168; --w: 70vmin; --ax: -10vmin; --ay: -8vmin; --amp: 2deg; --dur: 10s; --delay: -4s; transform: rotate(232deg) scaleY(-1); }
.leaf--n2 { --aspect: 0.798; --w: 50vmin; --ax: calc(100vw - 5vmin); --ay: -9vmin; --amp: 1.7deg; --dur: 8.6s; --delay: -2s; transform: rotate(160deg); }
.leaf--n3 { --aspect: 2.158; --w: 68vmin; --ax: -8vmin; --ay: calc(100vh + 5vmin); --amp: 1.5deg; --dur: 7.4s; --delay: -0.8s; transform: rotate(-36deg); }


/* ---------------------------------------------------------------- perch */

.perch {
  --w: 60vmin;
  position: fixed;
  right: -10vmin;
  bottom: 1vmin;
  width: var(--w);
  height: calc(var(--w) / 2.141);
  z-index: 2;
  pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 12px), 0);
}
/* The perch sways from its stem and bobs a little under the frog's weight;
   the two run on different transform properties so they compose. */
.perch__sway {
  --amp: 1.7deg;
  position: absolute;
  inset: 0;
  transform-origin: 100% 50%;
  transform: rotate(8deg);
  animation:
    sway 7s cubic-bezier(0.42, 0, 0.58, 1) -3s infinite alternate,
    bob 5.2s ease-in-out -1.4s infinite alternate;
  will-change: rotate, translate;
}
.perch__leaf {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* The painting came out pale sage; this pulls it toward the jungle's
     deeper greens without losing the brushwork. */
  filter: drop-shadow(0 10px 14px rgba(2, 10, 4, 0.5)) hue-rotate(8deg) saturate(1.45) brightness(0.78);
}
.perch__shadow {
  position: absolute;
  left: 30%;
  bottom: 46%;
  width: 30%;
  height: 8%;
  background: radial-gradient(ellipse at 50% 50%, rgba(2, 10, 4, 0.72), rgba(2, 10, 4, 0.32) 45%, transparent 72%);
  filter: blur(4px);
}
.frog {
  position: absolute;
  left: 30%;
  bottom: 49%;
  width: 30%;
  transform-origin: 50% 100%;
  transform: rotate(-6deg);
  animation: breathe 3.8s ease-in-out infinite alternate;
  pointer-events: auto;
}
.frog__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(2, 10, 4, 0.55));
}

/* ---------------------------------------------------------------- text */

.clearing {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 10vh 6vw 24vh;
}
/* Every line in the block uses Canovaccio's cut of Fraunces: the text
   optical size (opsz 36), so name, tagline and wordmark read as one voice. */
.clearing__text {
  width: 100%;
  max-width: 46rem;
  font-variation-settings: 'opsz' 36;
  text-shadow: 0 1px 2px rgba(3, 9, 5, 0.6), 0 0 32px rgba(3, 9, 5, 0.55);
}
.clearing__text > * {
  opacity: 0;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.3s + var(--i, 0) * 0.13s) forwards;
}
.clearing__text > :nth-child(1) { --i: 0; }
.clearing__text > :nth-child(2) { --i: 1; }
.clearing__text > :nth-child(3) { --i: 2; }
.clearing__text > :nth-child(4) { --i: 3; }
.clearing__text > :nth-child(5) { --i: 4; }
.clearing__text > :nth-child(6) { --i: 5; }
.clearing__text > :nth-child(7) { --i: 6; }

.name {
  margin: 0 auto 0.35em;
  font-size: clamp(2.5rem, 1.35rem + 4.7vw, 5.5rem);
  font-weight: 600;
  font-variation-settings: 'opsz' 36;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
  max-width: 12ch;
  margin-inline: auto;
  color: var(--lime);
  text-shadow:
    0 1px 0 rgba(3, 9, 5, 0.35),
    0 2px 6px rgba(3, 9, 5, 0.75),
    0 0 22px rgba(3, 9, 5, 0.85),
    0 0 64px rgba(3, 9, 5, 0.7),
    0 0 120px rgba(3, 9, 5, 0.5);
}
.tagline {
  margin: 0;
  font-size: clamp(1.15rem, 0.9rem + 1.05vw, 1.6rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--ivory);
}
.vein {
  width: 3.5rem;
  height: 1px;
  margin: 1.7rem auto;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 240, 74, 0.75), transparent);
}
.production {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  margin: 0.9rem 0 0.3rem;
}
.production__label {
  font-size: clamp(0.68rem, 0.62rem + 0.25vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lime);
  opacity: 0.92;
}
/* The Canovaccio wordmark, set the way the app sets it: Fraunces at 600
   with the text optical size, upright. */
.production__name {
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.8rem);
  font-weight: 600;
  font-variation-settings: 'opsz' 36;
  line-height: 1.05;
  letter-spacing: 0;
  color: #fbf5e6;
  text-shadow: 0 1px 2px rgba(3, 9, 5, 0.6), 0 2px 18px rgba(3, 9, 5, 0.7), 0 0 48px rgba(3, 9, 5, 0.6);
}
.production__tm {
  font-size: 0.5em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.06em;
}
.pitch {
  margin: 0 0 1.9rem;
  font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.65rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ivory);
}

.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.6em 1.5em 0.66em;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  color: var(--ivory);
  text-decoration: none;
  text-shadow: none;
  border: 1px solid rgba(201, 240, 74, 0.5);
  border-radius: 999px;
  background: rgba(5, 16, 9, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}
.cta__arrow {
  display: inline-block;
  color: var(--lime);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cta:hover {
  border-color: rgba(201, 240, 74, 0.95);
  background: rgba(201, 240, 74, 0.09);
  box-shadow: 0 0 0 1px rgba(201, 240, 74, 0.12), 0 0 28px rgba(201, 240, 74, 0.12);
}
.cta:hover .cta__arrow { transform: translateX(0.25em); }
.cta:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}
.cta:active { background: rgba(201, 240, 74, 0.16); }

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

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 3;
  margin: 0;
  padding: 0 6vw;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ivory-dim);
  text-shadow: 0 1px 2px rgba(3, 9, 5, 0.7);
}
.footer p { margin: 0; }
.footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(244, 236, 216, 0.3);
  text-underline-offset: 0.2em;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.footer a:hover { color: var(--ivory); text-decoration-color: rgba(201, 240, 74, 0.7); }
.footer a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------------- controls */

.controls {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 4;
  display: flex;
  gap: 8px;
}
.toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(244, 236, 216, 0.28);
  border-radius: 50%;
  background: rgba(5, 14, 8, 0.45);
  color: rgba(244, 236, 216, 0.72);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.toggle:hover { color: var(--ivory); border-color: rgba(244, 236, 216, 0.6); }
.toggle[aria-pressed='true'] { color: var(--lime); border-color: rgba(201, 240, 74, 0.6); }
.toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.toggle:disabled { opacity: 0.4; cursor: default; }
.toggle__icon { display: block; }
.toggle .toggle__on { display: none; }
.toggle[aria-pressed='true'] .toggle__on { display: block; }
.toggle[aria-pressed='true'] .toggle__off { display: none; }

.is-og .controls { display: none; }

/* ---------------------------------------------------------------- motion */

@keyframes sway {
  from { rotate: calc(var(--amp) * -1); }
  to { rotate: var(--amp); }
}
@keyframes drift {
  from { translate: -5% 0; }
  to { translate: 5% 0; }
}
@keyframes shimmer {
  from { opacity: 0.45; }
  to { opacity: 1; }
}
@keyframes bob {
  from { translate: 0 0; }
  to { translate: 0 -0.6vmin; }
}
@keyframes breathe {
  from { scale: 1; }
  to { scale: 1.014; }
}
@keyframes breathe-photo {
  from { scale: 1; }
  to { scale: 1.03; }
}
@keyframes rise {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Motion is on by default, off when the OS asks for less, and the toggle
   overrides either way. Only the text fade survives with motion off. */
html[data-motion='off'] :is(.leaf, .perch__sway, .frog, .scene__mist, .scene__light, .scene__photo img) {
  animation: none;
}
html[data-motion='off'] .clearing__text > * { animation-name: fade; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='on']) :is(.leaf, .perch__sway, .frog, .scene__mist, .scene__light, .scene__photo img) {
    animation: none;
  }
  html:not([data-motion='on']) .clearing__text > * { animation-name: fade; }
  html:not([data-motion='on']) .cta__arrow { transition: none; }
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 700px) {
  body { display: flex; flex-direction: column; }
  .clearing { order: 1; flex: 0 0 auto; min-height: 0; padding: 9vh 7vw calc(18vw + 1.5rem); align-content: start; }
  .perch { order: 2; position: relative; right: auto; bottom: auto; left: 16vw; flex: 0 0 auto; align-self: flex-end; z-index: 2; }
  .footer { order: 3; position: static; margin-top: auto; padding-top: 0.75rem; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .production { margin-top: 0.6rem; }
  .controls { order: 4; }
  .name { max-width: 10ch; }
  .vein { margin: 1.3rem auto; }
  .pitch { margin-bottom: 1.5rem; }
  .cta { font-size: 1rem; padding: 0.55em 1.25em; min-height: 44px; align-items: center; }

  .perch { --w: 100vw; }
  .perch__sway { transform: rotate(6deg); }
  .frog { width: 30%; left: 30%; bottom: 49%; }
  .perch__shadow { left: 30%; width: 30%; bottom: 46%; }

  .leaf--m4 { display: none; }
  .leaf--n1 { --w: 62vmin; --ax: -8vmin; --ay: -8vmin; transform: rotate(240deg) scaleY(-1); }
  .leaf--m1 { --w: 52vmin; --ax: calc(100vw + 6vmin); --ay: -4vmin; transform: rotate(-60deg); }
  .leaf--n2 { --w: 46vmin; --ax: calc(100vw - 3vmin); --ay: -8vmin; }
  .leaf--n3 { --w: 80vmin; --ax: -12vmin; --ay: calc(100vh + 6vmin); transform: rotate(-42deg); }
  .leaf--m2 { --w: 44vmin; --ax: -9vmin; --ay: 74vh; transform: rotate(40deg); }
  .leaf--m3 { --w: 70vmin; --ax: calc(100vw + 8vmin); --ay: calc(100vh - 4vmin); }

  .footer { font-size: 0.8rem; }
}

/* Wide phones and narrow tablets in portrait: a slightly smaller perch so
   the footer still fits on the first screen. */
@media (min-width: 560px) and (max-width: 700px) {
  .clearing { padding-bottom: calc(16vw + 1.5rem); }
  .perch { --w: 88vw; }
}

/* Budget the portrait layout using the space left with browser bars open.
   Keep everything in flow so enlarged text can still scroll naturally. */
@media (max-width: 700px) and (orientation: portrait) {
  body {
    --phone-perch: min(100vw, max(10rem, calc(100svh - 300px)));
  }
  .clearing {
    padding-top: max(env(safe-area-inset-top), clamp(0.75rem, calc(9svh - 30px), 4.5rem));
    padding-bottom: calc(var(--phone-perch) * 0.18 + 0.5rem);
  }
  .name { font-size: clamp(1.875rem, 5svh, 2.6rem); margin-bottom: 0.25em; }
  .vein { margin: clamp(0.45rem, calc(3svh - 7px), 1.3rem) auto; }
  .pitch { margin-bottom: clamp(0.6rem, 2svh, 1.5rem); }
  .perch { --w: var(--phone-perch); left: calc(var(--phone-perch) * 0.16); }
  .footer { padding-top: 0.25rem; }
  .footer a { overflow-wrap: anywhere; }
  /* The sound button sits beside the illustration, clear of the title. */
  .controls { top: auto; bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.5rem)); right: auto; left: max(14px, env(safe-area-inset-left)); }
}

@media (max-width: 700px) and (max-height: 560px) and (orientation: portrait) {
  .tagline { font-size: 1rem; }
  .pitch { font-size: 1rem; }
  .vein { margin: 0.45rem auto; }
}

@media (max-width: 360px) and (orientation: portrait) {
  .footer__contact-label { display: none; }
}

/* Short landscape (a phone on its side): let the page scroll a little and
   keep the footer below the copy instead of on top of it. */
@media (max-height: 520px) and (orientation: landscape) {
  .clearing { min-height: 0; padding: 5vh 6vw 5.5rem; }
  .name { font-size: clamp(1.8rem, 1rem + 3.4vw, 3rem); margin-bottom: 0.25em; }
  .vein { margin: 0.8rem auto; }
  .pitch { margin-bottom: 0.9rem; }
  .perch { --w: 56vmin; right: -10vmin; bottom: -4vmin; }
}