/* One dark world so the pictures do the talking; pig pink for the name and anything you press. */
:root {
  color-scheme: dark;
  --ground: #151417; --ground-up: #211f24; --storm: #0f121b; --ink: #f7f0e3; --soft: #bdb6a9;
  --pip: #f08f9b; --pip-deep: #d9596e; --gold: #eab13f; --line: #3b383d;
  --tale: "EB Garamond", Georgia, serif; --round: "Fredoka", "Trebuchet MS", sans-serif;
  --plain: "Nunito", system-ui, sans-serif; --carved: "Cinzel", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding-bottom: 46px; background: var(--ground); color: var(--ink); font: 18px/1.6 var(--plain); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--pip); }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--round); font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(30px, 5vw, 46px); }
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.tale { font: italic 400 clamp(22px, 3vw, 28px)/1.4 var(--tale); max-width: 30em; }
.quiet { color: var(--soft); font-size: 15px; }

/* Top bar */
.bar { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; padding-block: 16px; font: 500 16px var(--round); }
.bar a { color: var(--soft); text-decoration: none; }
.bar a:hover { color: var(--pip); }
.bar .home { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 600; color: var(--pip); margin-right: auto; }

/* Title */
.named { display: flex; align-items: flex-end; gap: clamp(10px, 2vw, 22px); }
.pip { width: clamp(96px, 15vw, 170px); height: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55)); transform-origin: 50% 100%; }
.js .pip { animation: boing 1s cubic-bezier(.3, 1.5, .5, 1) both, breathe 3.2s ease-in-out 1s infinite; }
@keyframes boing { from { transform: translateY(-40px) scale(.9, 1.1); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.025, .98); } }
.title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding-block: 24px 64px; }
.name { display: flex; font: 600 clamp(84px, 13vw, 150px)/1.05 var(--round); color: var(--pip); letter-spacing: -0.01em; }
.name span { display: block; }
.js .name span { animation: hop 0.7s cubic-bezier(.3, 1.5, .5, 1) both; }
.name span:nth-child(2) { animation-delay: .08s; } .name span:nth-child(3) { animation-delay: .16s; } .name span:nth-child(4) { animation-delay: .24s; }
@keyframes hop { from { transform: translateY(0.35em) scale(1, .75); } }
.sub { font: 600 clamp(19px, 2.6vw, 28px)/1.2 var(--carved); letter-spacing: 0.2em; margin: 14px 0 28px; }
.kind { font: 500 17px var(--round); color: var(--gold); margin: 0 0 8px; }
.art { border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.where { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font: 500 15px var(--round); }
.where li { border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 14px; color: var(--soft); }
.where a { text-decoration: none; }
.where .live { background: var(--pip); border-color: var(--pip); }
.where .live a { color: var(--ground); }

/* Form */
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; max-width: 480px; }
.signup label { flex: 1 0 100%; font: 500 16px var(--round); }
.signup input[type=email] { flex: 1 1 200px; min-width: 0; font: 400 17px var(--plain); padding: 13px 16px; color: var(--ink); background: var(--ground-up); border: 2px solid var(--line); border-radius: 12px; }
.signup input[type=email]:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.signup button { font: 600 17px var(--round); padding: 13px 22px; color: var(--ground); background: var(--pip); border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 5px 0 var(--pip-deep); transition: transform .12s, box-shadow .12s; }
.signup button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--pip-deep); }
.signup button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--pip-deep); }
.signup button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.signup .note { flex: 1 0 100%; margin: 4px 0 0; font-size: 14px; color: var(--soft); }
.signup .answer { flex: 1 0 100%; margin: 0; font-weight: 700; color: var(--gold); }
.trap { position: absolute; left: -9999px; }

/* The storm: rain falls on a canvas behind it */
.storm { position: relative; overflow: hidden; background: var(--storm); padding-block: 80px; }
.storm canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.storm .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: center; }
.storm h2 { margin-bottom: 18px; }
.storm p { color: var(--soft); }
.storm .tale { color: var(--ink); }
.afloat { border-radius: 18px; }
.js .afloat { animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-9px) rotate(-0.8deg); } }

/* Colour comes back: pictures start grey and bloom as they come into view. */
.js .bloom { filter: grayscale(1) brightness(0.85); transition: filter 1.8s ease, transform .25s; }
.js .bloom.back { filter: none; }

.friends { padding-block: 80px; }
.friends > .wrap > .tale { margin: 14px 0 40px; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.shots img { border-radius: 16px; }
.shots li:hover img { transform: translateY(-6px) rotate(-1deg); }
.shots h3 { font-size: 21px; margin: 14px 0 4px; color: var(--pip); }
.shots p { margin: 0; font-size: 16px; color: var(--soft); line-height: 1.45; }

.wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding-bottom: 80px; }
.wide img { border-radius: 16px; }
.wide figure { margin: 0; }
.wide figcaption { font: italic 19px var(--tale); color: var(--soft); margin-top: 8px; }

.maker { background: var(--ground-up); padding-block: 72px; }
.maker p { max-width: 36em; }
.maker h2 { margin-bottom: 16px; }
.last { padding-block: 72px; }
.last h2 { margin-bottom: 18px; }

footer { background: #0c0b0d; padding-block: 32px; font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
footer a { color: var(--ink); }
footer .by { margin-right: auto; color: var(--soft); }

/* Inside pages */
.page { padding-block: 24px 72px; max-width: 760px; }
.page h1 { font-size: clamp(36px, 6vw, 54px); margin: 12px 0 14px; color: var(--pip); }
.page h2 { font-size: 28px; margin: 40px 0 8px; }
.page figure { margin: 28px 0; }
.page figure img { border-radius: 16px; }
.page ul { padding-left: 22px; }

/* The long way home: a little pig walks the bottom of the screen as you scroll, and reaches the farm at the end. */
.road { position: fixed; left: 0; right: 0; bottom: 0; height: calc(38px + env(safe-area-inset-bottom, 0px)); background: #0c0b0d; border-top: 1px solid var(--line); pointer-events: none; z-index: 5; }
.road i { position: absolute; left: 0; bottom: calc(5px + env(safe-area-inset-bottom, 0px)); width: 34px; height: 26px; }
.road svg { display: block; width: 100%; height: 100%; }
.road i img { display: block; width: 28px; height: 28px; }
.road .farm { position: absolute; right: 12px; bottom: calc(5px + env(safe-area-inset-bottom, 0px)); width: 30px; height: 26px; }
.road .walking img { animation: trot .28s steps(2) infinite; }
@keyframes trot { 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .bloom { filter: none; transition: none; }
  .js .name span, .js .afloat, .js .pip, .road .walking img { animation: none; }
}
@media (max-width: 800px) {
  .bar { gap: 2px 16px; font-size: 15px; }
  .bar .home { flex: 1 0 100%; }
  .title { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 12px 40px; }
  .storm { padding-block: 56px; }
  .storm .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .friends { padding-block: 56px; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wide { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
}