@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
  --ink: #071d28;
  --deep: #061b27;
  --sea: #0d4954;
  --foam: #ecfbf4;
  --aqua: #9aefe2;
  --paper: #f2f5ef;
  --muted: #a6bec2;
  /* accent trio: tags, highlights, illustrations */
  --mint: #a8e8d6;
  --pink: #ffabf9;
  --orange: #ffbf5f;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
::selection {
  background: var(--aqua);
  color: var(--deep);
}
.wrap {
  width: min(100% - 6rem, 1420px);
  margin-inline: auto;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: #fff;
  padding: 0.6rem;
  z-index: 99;
}
.skip-link:focus {
  top: 1rem;
}
.site-nav {
  height: 76px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(90deg, #061b27ef, #0b4450ec);
  color: var(--foam);
  backdrop-filter: blur(14px);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font:
    800 1.4rem Manrope,
    sans-serif;
  letter-spacing: -0.1em;
}
.logo span {
  font-size: 0.8rem;
  color: var(--aqua);
  vertical-align: top;
  margin-left: 0.25rem;
}
.site-nav nav {
  display: flex;
  gap: 2.3rem;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 700;
}
.site-nav nav a {
  opacity: 0.9;
}
.site-nav nav a:hover {
  color: var(--aqua);
}
.site-nav nav a:last-child {
  border: 1px solid #fff7;
  border-radius: 100px;
  padding: 0.65rem 0.9rem;
}
.hero {
  /* sized by both width and height so the whole hero fits short, wide screens */
  --hero-size: clamp(4.5rem, min(20vw, 27svh), 21rem);
  min-height: calc(100svh - 76px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(
    circle at 72% 50%,
    #176d78,
    #0b3a47 38%,
    #061b27 77%
  );
  color: var(--foam);
}
.hero:after,
.project-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 76px, #ffffff09 77px),
    repeating-linear-gradient(90deg, transparent 0 76px, #ffffff09 77px);
  pointer-events: none;
}
.hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-glow {
  position: absolute;
  width: 65vw;
  height: 65vw;
  left: 48%;
  top: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, #25a2a288, transparent 67%);
  filter: blur(25px);
}
.hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 4rem;
}
.eyebrow,
.label,
.project-meta,
.visual-no,
.hero-side-note,
.hero-coordinate,
.footer,
.case-index {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.eyebrow {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  color: #c7e9e1;
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow:
    0 0 0 8px #a8f6df20,
    0 0 20px var(--aqua);
}
.hero h1 {
  font:
    600 var(--hero-size) / 0.82 Manrope,
    sans-serif;
  letter-spacing: -0.11em;
  margin: 2rem 0 3.4rem;
}
.hero h1 > span {
  display: block;
}
.hero h1 > span:last-child {
  display: flex;
  align-items: flex-start;
}
.hero h1 em {
  font-style: normal;
  color: var(--aqua);
}
.jellyfish {
  width: clamp(3.5rem, 6vw, 6.5rem);
  height: auto;
  margin: 0.05em 0 0 0.35em;
  overflow: visible;
  animation: jelly-float 5s ease-in-out infinite;
}
.jellyfish path:last-child {
  animation: jelly-wiggle 2s ease-in-out infinite;
}
@keyframes jelly-float {
  50% {
    transform: translateY(-18px) rotate(4deg);
  }
}
@keyframes jelly-wiggle {
  50% {
    transform: translateX(3px);
  }
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  max-width: 1050px;
}
.hero-bottom p {
  max-width: 530px;
  margin: 0;
  font-size: clamp(1.22rem, 2vw, 1.65rem);
  line-height: 1.45;
  color: #d4eae5;
}
.explore-link {
  white-space: nowrap;
  border-bottom: 1px solid #bde5db;
  padding-bottom: 0.7rem;
  font-weight: 700;
}
.explore-link span {
  margin-left: 2rem;
}
.hero-side-note {
  position: absolute;
  z-index: 2;
  right: 2.2rem;
  top: 45%;
  writing-mode: vertical-rl;
  color: #c0ded9;
}
.hero-coordinate {
  position: absolute;
  z-index: 2;
  bottom: 1.7rem;
  right: 3rem;
  color: #a2c3c4;
}
.intro {
  position: fixed;
  z-index: 50;
  inset: 0;
  background: var(--deep);
  color: #b9e8df;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2.3rem;
  pointer-events: none;
  animation: intro-out 0.8s 2.7s forwards;
}
.amy-puzzle {
  display: flex;
  gap: 0.03em;
  font:
    800 clamp(7rem, 19vw, 17rem)/0.74 Manrope,
    sans-serif;
  letter-spacing: -0.16em;
  color: #83dbc9;
}
.amy-puzzle .piece {
  display: inline-block;
  opacity: 0;
  border: 4px solid #d2fff2;
  border-radius: 16%;
  padding: 0.08em 0.14em;
  box-shadow:
    inset 0 0 0 2px #5ebca8,
    0 0 45px #7de4cf52;
  animation: amy-lock 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.pa {
  --x: -100vw;
  --y: -24vh;
  animation-delay: 0.15s;
}
.pm {
  --x: 0;
  --y: -85vh;
  animation-delay: 0.45s;
}
.py {
  --x: 100vw;
  --y: 28vh;
  animation-delay: 0.75s;
}
.intro > span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  animation: fade-in 0.8s 1s both;
}
@keyframes amy-lock {
  from {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(24deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes intro-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.work-section,
.page-content {
  padding-block: 7rem;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 2.4fr 1fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 4.5rem;
}
.label {
  margin: 0;
  color: #23727d;
}
.section-heading h2,
.about-section h2 {
  font:
    600 clamp(3.4rem, 6.8vw, 7.2rem)/0.98 Manrope,
    sans-serif;
  letter-spacing: -0.08em;
  margin: 0;
}
.section-heading h2 em,
.about-section h2 em {
  font-style: normal;
  color: #237987;
}
.section-heading > p:last-child {
  line-height: 1.7;
  color: #536a6b;
}
.project-list,
.project-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.project {
  min-width: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
.project:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 55px #0a34421c;
}
.project.featured {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
}
.project-visual {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.featured .project-visual {
  min-height: 560px;
}
.visual-no {
  position: absolute;
  z-index: 3;
  top: 2rem;
  left: 2rem;
  color: #e4fff1;
}
.habitu-visual {
  background: radial-gradient(
    circle at 54% 52%,
    #267b83,
    #0e4b58 43%,
    #082935 80%
  );
}
.orbital {
  position: absolute;
  border: 1px solid #8dcec575;
  border-radius: 50%;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.orbital-one {
  width: 85%;
  animation: orbit 25s linear infinite;
}
.orbital-two {
  width: 62%;
  border-style: dashed;
  animation: orbit 18s linear infinite reverse;
}
@keyframes orbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.visual-core {
  position: absolute;
  width: min(75%, 520px);
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%) rotate(-6deg);
  box-shadow: 0 32px 75px #00192290;
  border: 8px solid #e5efea;
  border-radius: 12px;
  overflow: hidden;
}
.visual-core img {
  display: block;
  width: 100%;
}
.character-visual {
  background: radial-gradient(circle at 50% 60%, #816b91, #304665 55%, #122d45);
}
.rune {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13rem;
  color: #d8f8d7;
  text-shadow: 0 0 55px #a9f8d6;
  animation: float 5s ease-in-out infinite;
}
.rune-orbit {
  position: absolute;
  inset: 13%;
  border: 1px solid #d7f5e07a;
  border-radius: 50%;
  transform: rotateX(70deg) rotate(-20deg);
}
@keyframes float {
  50% {
    transform: translate(-50%, -54%) rotate(8deg);
  }
}
.coming-visual {
  background: radial-gradient(circle at 50% 55%, #315f6b, #113544 58%, #071e2b);
}
.coming-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font:
    400 12rem/1 Manrope,
    sans-serif;
  color: #bdf9e4;
  text-shadow: 0 0 55px #a5f1df80;
  animation: float 5s ease-in-out infinite;
}
.project-tags {
  position: absolute;
  z-index: 4;
  bottom: 1.6rem;
  left: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  max-width: 80%;
}
.project-tags b {
  background: #ffffffee;
  color: #0a4752;
  border-radius: 100px;
  padding: 0.48rem 0.72rem;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  box-shadow: 0 5px 18px #00263336;
}
.project-copy {
  padding: 2.6rem 2.8rem 3rem;
  display: flex;
  flex-direction: column;
}
.featured .project-copy {
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 6rem);
}
.project-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  color: #367780;
}
.project-meta span:first-child {
  color: #839392;
}
.project h3 {
  font:
    600 clamp(2.3rem, 3.8vw, 4.5rem)/1.04 Manrope,
    sans-serif;
  letter-spacing: -0.07em;
  margin: 2.2rem 0 1rem;
  display: flex;
  justify-content: space-between;
}
.project-copy > p {
  font-size: 1.06rem;
  line-height: 1.65;
  color: #526568;
  margin: 0 0 2.4rem;
}
.project-cta {
  margin-top: auto;
  font-weight: 700;
  border-bottom: 1px solid #aac1bc;
  padding-bottom: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.about-section {
  background: #0a303b;
  color: #eaf9f3;
  padding: 8rem 0 9rem;
}
.about-grid {
  display: grid;
  gap: 2rem;
}
.about-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.primary-cta.ghost-cta {
  background: transparent;
  color: var(--aqua);
  box-shadow: inset 0 0 0 1.5px #a5f1df80;
}
.primary-cta.ghost-cta:hover,
.primary-cta.ghost-cta:focus-visible {
  background: #a5f1df;
  color: #062630;
  box-shadow: 0 10px 24px #00000040;
}
.about-grid .label {
  color: var(--aqua);
}
.about-section h2 em {
  color: var(--mint);
}
.about-grid > div > p {
  font-size: 1.22rem;
  line-height: 1.65;
  color: #b9d7d4;
  max-width: 690px;
  margin: 3rem 0;
}
.primary-cta {
  display: inline-flex;
  gap: 3rem;
  align-items: center;
  padding: 1.1rem 1.3rem;
  border-radius: 100px;
  background: #a5f1df;
  color: #062630;
  font-weight: 800;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}
.primary-cta span {
  transition: transform 0.2s;
}
.primary-cta:hover,
.primary-cta:focus-visible {
  background: #d2fbf0;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px #00000040;
}
.primary-cta:hover span,
.primary-cta:focus-visible span {
  transform: translate(3px, -3px);
}
.footer {
  min-height: 110px;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  color: #47656b;
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s,
    transform 0.8s;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.page-hero {
  padding: 8rem 0 5rem;
  background: radial-gradient(circle at 77% 15%, #1a7681, #0a3441 43%, #061b27);
  color: #effdf5;
}
.page-hero h1 {
  font:
    600 clamp(4rem, 10vw, 10rem)/0.95 Manrope,
    sans-serif;
  letter-spacing: -0.09em;
  margin: 1.2rem 0;
}
.page-hero h1 em {
  font-style: normal;
  color: #a5f1df;
}
.page-hero p {
  max-width: 620px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #c6e7df;
}
.page-hero .eyebrow {
  font-size: 0.72rem;
}
.project-page-grid .project {
  min-height: 530px;
}
.event-graphic {
  background: linear-gradient(135deg, #ccf1e1, #d9eff4 46%, #649ba1);
  color: #0b4350;
}
.event-graphic:after {
  content: "EVENT\A GRAPHICS";
  white-space: pre;
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font:
    800 clamp(3rem, 7vw, 7rem)/0.82 Manrope,
    sans-serif;
  letter-spacing: -0.1em;
}
.about-page {
  background: #eef3ee;
}
.journey-intro h2,
.contact-grid h2 {
  font:
    600 clamp(3rem, 6vw, 6rem)/1 Manrope,
    sans-serif;
  letter-spacing: -0.08em;
  margin: 0;
}
.journey-intro p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #49666b;
  max-width: 680px;
}
.journey-section {
  background: #0a303b;
  color: #effdf5;
  padding: 7rem 0;
}
.journey-intro p {
  color: #c0dbd6;
}
.journey-board {
  margin-top: 4rem;
  position: relative;
  min-height: 420px;
  border: 1px solid #77aaa5;
  background: linear-gradient(135deg, #0a4350, #0e2739);
  padding: 3rem;
  overflow: hidden;
}
.journey-stops {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  height: 340px;
  align-items: center;
  gap: 1rem;
}
.journey-stop {
  border: 0;
  border-radius: 50%;
  width: 84px;
  height: 84px;
  background: #effdf5;
  color: #0b4952;
  font:
    800 0.72rem/1.2 "DM Sans",
    sans-serif;
  letter-spacing: 0.06em;
  padding: 0.7rem;
  cursor: pointer;
  transition:
    transform 0.25s,
    background 0.25s;
  box-shadow: 0 8px 22px #00192266;
}
.journey-stop:nth-child(even) {
  align-self: end;
}
.journey-stop:hover,
.journey-stop.active {
  transform: scale(1.12);
  background: #a5f1df;
}
.journey-detail {
  position: relative;
  margin-top: 1.6rem;
  background: #effdf5;
  color: #0b3540;
  padding: 1.3rem 1.5rem;
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.6;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: start;
}
.contact-list {
  display: grid;
  gap: 1rem;
}
.contact-list a {
  background: #fff;
  padding: 1.35rem 1.45rem;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  box-shadow: 0 10px 25px #09313a12;
}
.resume-note {
  padding: 1.5rem;
  border-left: 3px solid #50a8a4;
  background: #dff0e8;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .wrap {
    width: min(100% - 3rem, 1420px);
  }
  .project.featured {
    grid-template-columns: 1fr;
  }
  .section-heading {
    grid-template-columns: 1fr 2fr;
  }
  .section-heading > p:last-child {
    grid-column: 2;
  }
  .hero-side-note {
    display: none;
  }
}
@media (max-width: 700px) {
  .wrap {
    width: min(100% - 2.25rem, 1420px);
  }
  .site-nav nav {
    gap: 0.8rem;
    font-size: 0.7rem;
  }
  .site-nav nav a:last-child {
    padding: 0.55rem 0.6rem;
  }
  .hero {
    --hero-size: clamp(4.5rem, min(24vw, 20svh), 9rem);
  }
  .hero h1 {
    margin: 2rem 0;
  }
  .jellyfish {
    width: 3.5rem;
  }
  .hero-bottom {
    display: block;
  }
  .hero-bottom p {
    margin-bottom: 2rem;
    font-size: 1.18rem;
  }
  .hero-coordinate {
    left: 1.2rem;
    right: auto;
  }
  .section-heading {
    display: block;
    margin-bottom: 3rem;
  }
  .section-heading h2 {
    margin: 1rem 0;
  }
  .project-list,
  .project-page-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .project.featured {
    grid-column: auto;
  }
  .featured .project-visual,
  .project-visual {
    min-height: 340px;
  }
  .project-copy,
  .featured .project-copy {
    padding: 2rem;
  }
  .project-tags {
    left: 1rem;
    bottom: 1rem;
  }
  .project-tags b {
    font-size: 0.56rem;
  }
  .about-grid {
    display: block;
  }
  .about-section {
    padding: 5rem 0;
  }
  .footer {
    padding-block: 2rem;
    min-height: 0;
    display: grid;
    gap: 0.75rem;
    font-size: 0.62rem;
  }
  .footer span:nth-child(2) {
    display: none;
  }
  .page-hero {
    padding: 6rem 0 4rem;
  }
  .journey-board {
    padding: 1.2rem;
  }
  .journey-stops {
    gap: 0.3rem;
    height: 220px;
  }
  .journey-stop {
    width: 54px;
    height: 54px;
    font-size: 0.5rem;
  }
  .journey-detail {
    font-size: 0.95rem;
  }
  .amy-puzzle {
    font-size: 7rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .intro {
    display: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* Six-piece launch puzzle */
.amy-puzzle {
  display: grid;
  grid-template-columns: repeat(3, clamp(5.4rem, 11vw, 9.5rem));
  grid-template-rows: repeat(2, clamp(5.4rem, 11vw, 9.5rem));
  gap: 0;
  font-size: initial;
  letter-spacing: 0;
  color: initial;
}
.puzzle-piece {
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  filter: drop-shadow(0 0 18px #7de4cf62);
  animation: puzzle-lock 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.puzzle-piece path {
  fill: #70d6c2;
  stroke: #d4fff2;
  stroke-width: 3;
  stroke-linejoin: round;
}
.puzzle-piece text {
  fill: #062630;
  font:
    800 42px Manrope,
    sans-serif;
  text-anchor: middle;
}
.p1 {
  --x: -105vw;
  --y: -26vh;
  --r: -30deg;
  animation-delay: 0.08s;
}
.p2 {
  --x: 0;
  --y: -92vh;
  --r: 18deg;
  animation-delay: 0.32s;
}
.p3 {
  --x: 105vw;
  --y: -34vh;
  --r: 31deg;
  animation-delay: 0.56s;
}
.p4 {
  --x: -100vw;
  --y: 40vh;
  --r: 21deg;
  animation-delay: 0.8s;
}
.p5 {
  --x: 0;
  --y: 94vh;
  --r: -21deg;
  animation-delay: 1.04s;
}
.p6 {
  --x: 100vw;
  --y: 42vh;
  --r: -28deg;
  animation-delay: 1.28s;
}
@keyframes puzzle-lock {
  from {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.75);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 700px) {
  .amy-puzzle {
    grid-template-columns: repeat(3, 5.15rem);
    grid-template-rows: repeat(2, 5.15rem);
  }
}

/* Pixel jellyfish and pop-up storybook */
.hero .jellyfish{display:none}.book-stories{padding-block:8rem;background:linear-gradient(180deg,#eaf8f3 0%,#f6f3e9 100%)}.story-heading{display:grid;grid-template-columns:1fr 2.5fr 1fr;align-items:end;gap:2rem;margin-bottom:4rem}.story-heading h2{font:600 clamp(3.4rem,7vw,7.6rem)/.95 Manrope,sans-serif;letter-spacing:-.09em;margin:0;color:#113f4c}.story-heading h2 em{font-style:normal;color:#5c9d9b}.story-heading>p:last-child{line-height:1.7;color:#526b6e}.storybook{position:relative;padding:1.25rem 4.8rem 3.6rem}.book-arrow{position:absolute;z-index:10;top:50%;width:4rem;aspect-ratio:1;display:grid;place-items:center;padding:0;border:1.5px solid #ffffffd0;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 32% 26%,#ffffffa0,#e8f1f540 40%,#b9cdd866 75%,#9fb8c680);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 2px 4px #fffd,inset 0 -6px 12px #5a7d8c1f,0 6px 16px #0a3b5a24;transform:translateY(-50%);transition:transform .2s,background .2s}.book-arrow svg{width:46%;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1.5px #0a3b5a66)}.book-arrow:hover,.book-arrow:focus-visible{transform:translateY(-50%) scale(1.07);outline:none;background:radial-gradient(circle at 32% 26%,#ffffffd0,#ffffff60 40%,#dbe8ee60 75%,#c7d9e270)}.book-arrow-prev{left:0}.book-arrow-next{right:0}@media(max-width:850px){.story-heading{display:block}.story-heading h2{margin:1rem 0}.book-stories{padding-block:5rem}}@media(max-width:560px){.storybook{padding-inline:2.4rem}.book-arrow{width:3rem;font-size:1.5rem}}


/* Scrollable scrapbook journey */
.scrapbook-section{background:#f5f0e5;color:#172d35;padding:6rem 0 9rem;overflow:hidden}.scrapbook{width:min(100% - 3rem,860px);margin:auto;position:relative}.scrapbook:before{content:"";position:absolute;inset:0 -18vw;background-image:radial-gradient(#bda98a38 .7px,transparent .7px);background-size:9px 9px;pointer-events:none}.scrapbook-heading{position:relative;z-index:1;margin:0 0 3rem}.scrapbook-heading h2{margin:.6rem 0;font:800 clamp(2.5rem,5vw,4.3rem)/.9 Manrope,sans-serif;letter-spacing:-.08em;color:#12354b}.scrapbook-heading p:last-child{max-width:440px;line-height:1.55}.scrap-memory{position:relative;z-index:1;display:grid;grid-template-columns:190px 1fr;gap:2rem;align-items:center;margin:3.5rem 0 6rem}.scrap-copy{font-size:.88rem;line-height:1.55;color:#1d3b56}.scrap-year{display:block;margin-bottom:.65rem;font-size:.65rem;letter-spacing:.12em;font-weight:800;color:#092d5c}.scrap-copy p{margin:0}.scrap-photos{position:relative;min-height:210px;display:flex;align-items:flex-start}.photo-placeholder{width:142px;height:164px;margin:0 -15px 0 0;padding:10px;background:#fff;box-shadow:3px 8px 13px #573d282e;transform-origin:center;display:grid;place-items:center;position:relative;z-index:1}.photo-placeholder:after{content:"";position:absolute;inset:10px;background:linear-gradient(135deg,#c8e4e3,#aed0bd 48%,#d6bb9d);opacity:.92}.photo-placeholder span{position:relative;z-index:1;text-align:center;font:700 .53rem/1.45 'DM Sans',sans-serif;letter-spacing:.09em;color:#294b59}.photo-placeholder:nth-child(2){z-index:2}.photo-placeholder:nth-child(3){z-index:3}.photo-placeholder:nth-child(4){z-index:4}.tilt-left{transform:rotate(-8deg)}.tilt-right{transform:rotate(7deg)}.landscape{width:180px;height:132px}.tall{width:155px;height:205px}.memory-early .scrap-photos{margin-top:-1.7rem}.memory-nature{grid-template-columns:170px 1fr;margin-left:5%}.memory-queens{grid-template-columns:1fr 230px;margin-left:17%;margin-right:5%;align-items:end}.memory-queens .scrap-copy{order:2}.memory-community{grid-template-columns:190px 1fr;margin-left:3%}.memory-ux{grid-template-columns:1fr 230px;margin-left:22%;margin-right:5%}.memory-ux .scrap-copy{order:2}.photo-cluster-two{justify-content:center}.photo-cluster-three{padding-top:1rem}.scrap-line{position:absolute;z-index:0;fill:none;stroke:#183d60;stroke-width:1.5;stroke-dasharray:2 6;opacity:.8}.scrap-line path{animation:scrap-dash 9s linear infinite}.line-one{left:11%;top:21%;width:140px}.line-two{right:8%;top:39%;width:145px}.line-three{left:17%;top:64%;width:130px}@keyframes scrap-dash{to{stroke-dashoffset:-90}}.scrapbook-end{position:relative;z-index:1;text-align:center;margin-top:-1.5rem;font:700 1rem/1.35 'DM Sans',sans-serif;color:#173d59}.scribble-heart{display:block;font:500 5rem/1 cursive;transform:rotate(-14deg);color:#1d405f}.scrap-memory.photos-in .photo-placeholder{animation:photo-settle .75s both}.scrap-memory.photos-in .photo-placeholder:nth-child(2){animation-delay:.12s}.scrap-memory.photos-in .photo-placeholder:nth-child(3){animation-delay:.24s}.scrap-memory.photos-in .photo-placeholder:nth-child(4){animation-delay:.36s}@keyframes photo-settle{from{opacity:0;transform:translateY(30px) rotate(0) scale(.87)}to{opacity:1}}@media(max-width:650px){.scrapbook{width:min(100% - 2.25rem,860px)}.scrap-memory,.memory-nature,.memory-queens,.memory-community,.memory-ux{display:flex;flex-direction:column;align-items:flex-start;margin:3rem 0 5rem}.memory-queens .scrap-copy,.memory-ux .scrap-copy{order:initial}.scrap-copy{max-width:260px}.scrap-photos{min-height:170px;width:100%}.photo-placeholder{width:104px;height:128px}.landscape{width:135px;height:100px}.tall{width:120px;height:160px}.line-one{top:19%}.line-two{top:44%}.line-three{top:68%}}

/* Animated resume paper airplane */
.resume-flight{position:relative;height:210px;margin-top:2rem;overflow:visible}
.resume-airplane{
  position:absolute;left:-12%;top:36%;width:285px;height:190px;display:block;z-index:2;cursor:pointer;
  animation:resume-flight-across 7s cubic-bezier(.45,.05,.55,.95) infinite;transition:filter .25s ease
}
.resume-plane-svg{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 10px #0b4a5638);transform:rotate(-2deg)}
.resume-airplane:hover,.resume-airplane:focus-visible{animation-play-state:paused;filter:drop-shadow(0 18px 18px #0b4a5648);outline:none}
.resume-airplane:focus-visible .resume-plane-svg{outline:3px solid var(--aqua);outline-offset:7px;border-radius:8px}
.resume-flight-hint{position:absolute;left:8%;bottom:-1rem;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#518086;opacity:.75}
@keyframes resume-flight-across{
  0%{left:-12%;top:36%;opacity:0;transform:rotate(-8deg) scale(.82)}
  9%{opacity:1}
  42%{left:40%;top:28%;transform:rotate(0deg) scale(1)}
  72%{left:76%;top:8%;transform:rotate(-8deg) scale(1.02)}
  91%{left:96%;top:-6%;opacity:1;transform:rotate(-13deg) scale(1)}
  100%{left:104%;top:-12%;opacity:0;transform:rotate(-16deg) scale(.92)}
}
@media(max-width:700px){
  .resume-flight{height:175px}
  .resume-airplane{width:190px;height:130px}
  .resume-flight-hint{left:0}
}
/* Eyebrow sparkle: metallic gradient with a sweeping shine (gradient animates inside the SVG) */
.sparkle{width:1.6rem;height:1.6rem;flex:none;overflow:visible;filter:drop-shadow(0 0 6px #ffd98a88);animation:sparkle-twinkle 2.6s ease-in-out infinite}
.sparkle .s-small{transform-box:fill-box;transform-origin:center;animation:sparkle-twinkle 1.8s ease-in-out infinite reverse}
@keyframes sparkle-twinkle{50%{transform:scale(.82) rotate(12deg)}}

/* Hero jellyfish: JS moves .hero-jelly (wander / follow cursor), CSS handles bob + shock */
/* 1ex in the h1 font = the height of the "m" in Amy */
.hero-jelly{position:absolute;z-index:3;left:0;top:0;font:600 var(--hero-size) Manrope,sans-serif;height:1.04ex;pointer-events:none;will-change:transform;transform:translate(70vw,30vh)}
.jelly-body{position:relative;height:100%;animation:jelly-bob 2.4s ease-in-out infinite;filter:drop-shadow(0 0 10px #3cc8ff88)}
.jelly-body img{display:block;height:100%;width:auto}
.jelly-bolts{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jelly-bolts{opacity:0}
@keyframes jelly-bob{0%,100%{transform:translateY(0) scaleY(1)}35%{transform:translateY(-6px) scaleY(.92)}}
.hero-jelly.is-shocked .jelly-body{animation:jelly-shock-shake .1s steps(2) infinite,jelly-shock-flash .2s steps(2) infinite}
.hero-jelly.is-shocked .jelly-bolts{animation:jelly-bolts .16s steps(2) infinite}
@keyframes jelly-shock-shake{0%{transform:translate(-3px,1px) rotate(-4deg)}100%{transform:translate(3px,-2px) rotate(4deg)}}
@keyframes jelly-shock-flash{
  0%{filter:brightness(2.6) drop-shadow(0 0 10px #fff7b0) drop-shadow(0 0 28px #ffe14d)}
  100%{filter:brightness(1.5) saturate(2) hue-rotate(-150deg) drop-shadow(0 0 16px #fff36b)}
}
@keyframes jelly-bolts{0%{opacity:1}100%{opacity:.15;transform:scale(1.08)}}

/* Storybook: Amy's open-book art (assets/book-home.svg) with the project spreads scrolling over its pages,
   plus a cover-and-pages opening */
.storybook{padding:1rem 4.8rem 3.6rem}
.pixel-book{
  /* The element is the book's cover box: 1236x654 at (102,86) in the 1440x825 art.
     --s (px per art unit) is set by script.js. */
  --s:.8;
  position:relative;isolation:isolate;margin:0 auto;
  width:calc(1236px * var(--s));height:calc(654px * var(--s));
  font:calc(var(--s) * 15.6px)/1.6 "DM Sans",sans-serif;
  color:#333;
}
.book-art{position:absolute;z-index:0;left:-8.252%;top:-13.15%;width:116.5%;height:126.15%;max-width:none;pointer-events:none}
.book-carousel{
  position:absolute;z-index:1;inset:1.2% 2.4% 7.8% 2.4%;display:grid;grid:1fr / auto-flow 100%;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scroll-behavior:smooth;scrollbar-width:none;outline:none
}
.book-carousel::-webkit-scrollbar{display:none}
.book-carousel{transition:opacity .22s}
.storybook.is-turning .book-carousel{opacity:0}
.book-art.is-mirrored{transform:scaleX(-1)}
.book-scene{position:relative;scroll-snap-align:start;scroll-snap-stop:always}
.page-container{display:flex;gap:3em;height:100%}
.book-left,.book-right{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:1.4em 0 2.6em 1.4em}
.book-right{padding:1.8em 2.2em 4em 1.4em}
.book-page-placeholder{flex:1;width:100%}
.book-posters{position:relative;flex:1;width:100%}
.book-posters img{position:absolute;top:50%;left:50%;width:42%;border-radius:4px;box-shadow:0 14px 22px #173e4840;translate:-50% -50%}
.book-posters img:nth-child(1){rotate:-9deg;margin-left:-22%}
.book-posters img:nth-child(2){z-index:1;margin-top:-2%}
.book-posters img:nth-child(3){rotate:8deg;margin-left:22%}
.book-page-mockup{margin:auto -10% auto -2.5%;width:112%;max-width:none;height:auto;filter:drop-shadow(0 18px 16px #173e4840)}
.book-index{font-size:.7em;font-weight:800;letter-spacing:.16em;color:#4c8c8a}
.book-right h3{font:700 3.2em/.92 Manrope,sans-serif;letter-spacing:-.09em;margin:.35em 0 .4em;color:#184a55}
.book-right p{margin:0;text-align:justify;hyphens:auto}
.book-tags{display:flex;flex-wrap:wrap;gap:.4em;margin:1em 0}
.book-tags b{font-size:.7em;padding:.45em .8em;border-radius:99px;background:rgb(21,78,88);color:#e6faf3}
.book-cta{margin-top:auto;display:inline-flex;align-items:center;gap:1.4em;padding:.85em 1.5em;border-radius:99px;background:#a5f1df;color:#062630;font-size:1.15em;font-weight:800;box-shadow:0 .35em 0 #2c7375,0 .8em 1.2em #154e5833;transition:transform .2s,box-shadow .2s}
.book-cta:hover{transform:translateY(-2px);box-shadow:0 .45em 0 #2c7375,0 1em 1.4em #154e5844}
@supports (animation-timeline:scroll()){
  .page-container{animation:stay-centered linear both;animation-timeline:view(x)}
}
/* keep the spread still while the page turns, fading the old spread out and the new one in.
   Faded-out spreads overlap the visible one, so they are hidden too, or they would catch its clicks. */
@keyframes stay-centered{
  entry 0%{opacity:0;translate:-100%;visibility:hidden}
  entry 75%{opacity:0;translate:-25%;visibility:hidden}
  entry 100%{opacity:1;translate:0%;visibility:visible}
  exit 0%{opacity:1;translate:0%;visibility:visible}
  exit 50%{opacity:0;translate:50%;visibility:hidden}
  exit 100%{opacity:0;translate:100%;visibility:hidden}
}

/* Opening: the closed book sits on the right; its cover and pages swing over to the left.
   Colours and shapes follow book-home.svg (cover #B88742 on a #8A6230 base, gold caps, cream pages). */
/* Geometry from book-home.svg, as % of the 1236x654 cover box: cover face 0..98.5%, darker base
   3.06..100.15%, top page 0.6..94.3% tall and 47.5% wide starting just right of the spine. */
.book-intro{position:absolute;z-index:2;inset:0;perspective:320em;pointer-events:none;--r:calc(34px * var(--s));--pr:calc(18px * var(--s));--st:calc(3.2px * var(--s))}
.book-intro:before,.book-intro:after{content:"";position:absolute;z-index:-1;left:50%}
.book-intro:before{top:0;width:50%;height:100.15%;background:url(assets/book-cover-inside.svg) 0 0/100% 100% no-repeat;filter:drop-shadow(0 12px 18px #0003)}
.book-intro:after{left:50.16%;top:.6%;width:47.5%;height:94.3%;background:#fff9e9;border-radius:0 var(--pr) var(--pr) 0;
  box-shadow:inset -3px 0 18px #8a623022,0 var(--st) 0 #efe3c4,0 calc(var(--st) * 2) 0 #fff9e9,0 calc(var(--st) * 3) 0 #efe3c4,0 calc(var(--st) * 4) 0 #fff9e9,0 calc(var(--st) * 5) 0 #efe3c4}
.book-intro i,.intro-cover{position:absolute;transform-origin:0 50%}
.book-intro i{left:50.16%;top:.6%;width:47.5%;height:94.3%;background:#fff9e9;border:1px solid #8a623040;border-left:0;border-radius:0 var(--pr) var(--pr) 0;box-shadow:inset 18px 0 22px -14px #8a623035,0 0 12px #8a62301f}
.intro-cover{left:50%;top:0;width:50%;height:100.15%;background:url(assets/book-cover.svg) 0 0/100% 100% no-repeat;filter:drop-shadow(0 12px 18px #0003)}
.storybook.is-opened .intro-cover{animation:intro-cover 1.6s forwards,intro-cover-face 1.6s forwards}
.storybook.is-opened .book-intro i{animation:intro-page 1.6s forwards}
.storybook.is-opened .book-intro i:nth-of-type(1){animation-delay:.05s}
.storybook.is-opened .book-intro i:nth-of-type(2){animation-delay:.22s}
.storybook.is-opened .book-intro i:nth-of-type(3){animation-delay:.44s}
.storybook.is-opened .book-intro i:nth-of-type(4){animation-name:intro-page-150;animation-delay:.66s}
.storybook.is-opened .book-intro i:nth-of-type(5){animation-name:intro-page-30;animation-delay:.8s}
.storybook.is-opened .book-intro i:nth-of-type(6){animation-name:intro-page-55;animation-delay:.84s}
.storybook.is-opened .book-intro{animation:book-fade-out .45s 2.15s forwards}
@keyframes intro-cover{30%{z-index:999}100%{transform:rotateY(-180deg);z-index:1}}
/* the cover shows its decorated front until it passes upright, then its plain inside */
/* past upright the cover shows its plain inside; mirrored by the turn, its caps land on the left corners like the art */
@keyframes intro-cover-face{0%,44%{background-image:url(assets/book-cover.svg)}45%,100%{background-image:url(assets/book-cover-inside.svg)}}
@keyframes intro-page{30%{z-index:999}100%{transform:rotateY(-180deg);z-index:999}}
@keyframes intro-page-150{30%{z-index:999}100%{transform:rotateY(-150deg);z-index:999}}
@keyframes intro-page-30{50%{z-index:999}100%{transform:rotateY(-30deg);z-index:999}}
@keyframes intro-page-55{30%{z-index:999}100%{transform:rotateY(-55deg);z-index:999}}
@keyframes book-fade-out{to{opacity:0;visibility:hidden}}
@keyframes book-fade-in{from{opacity:0}}
.storybook:not(.is-opened) :is(.book-art,.book-carousel,.book-arrow){opacity:0}
.storybook.is-opened .book-art{transition:opacity .5s 1.9s}
.storybook.is-opened :is(.book-carousel,.book-arrow){animation:book-fade-in .5s 1.9s both}

/* Popup phones: sit over the first spread's left page and pop out of it after the book has opened.
   Phone offsets come from habitu-popup.svg, cropped to the phones' bounding box (819x555). */
.book-popup{position:absolute;z-index:3;left:26.1%;top:50%;width:52%;aspect-ratio:819/555;translate:-50% -50%;pointer-events:none;transition:opacity .2s}
.book-popup.is-hidden{opacity:0}
.book-popup img{position:absolute;height:auto;max-width:none;opacity:0;transform-origin:50% 100%;filter:drop-shadow(0 30px 24px #173e4855) drop-shadow(0 8px 6px #173e4830)}
.book-popup .popup-phone-1{left:0;top:24.14%;width:57.8%;--d:0s}
.book-popup .popup-phone-2{left:25.37%;top:0;width:51.16%;--d:.15s}
.book-popup .popup-phone-3{left:46.52%;top:13.35%;width:53.52%;--d:.3s}
/* short pause after the book finishes opening (~2.6s) before the phones rise */
.storybook.is-opened .book-popup img{animation:book-phone-pop .9s cubic-bezier(.3,1.35,.5,1) calc(3s + var(--d)) both}
.storybook .book-popup.is-revealing img{animation:book-phone-pop .8s cubic-bezier(.3,1.35,.5,1) calc(.15s + var(--d)) both}
@keyframes book-phone-pop{
  0%{opacity:0;transform:translateY(35%) scale(.45)}
  40%{opacity:1}
  100%{opacity:1;transform:none}
}

/* Phones: one page per card instead of the open-book spread */
@media(max-width:700px){
  .storybook{padding:0 0 5rem}
  .pixel-book{width:100%;height:auto;font-size:15px}
  .book-art,.book-intro{display:none}
  .book-carousel{height:auto}
  .page-container{flex-direction:column;gap:0;height:100%;background:#fff9e9;border:8px solid #b88742;border-radius:8px;animation:none!important}
  .book-left{flex:none;min-height:0;aspect-ratio:1.3;padding:1rem}
  [data-story="1"] .book-left{aspect-ratio:1.12}
  [data-story="0"] .book-left{aspect-ratio:1}
  .book-page-mockup{margin:auto;width:100%}
  .book-right{padding:0 1rem 2.6rem}
  .book-popup{left:-2%;top:6px;width:104%;translate:none}
  .book-carousel{position:relative;inset:auto}
  .book-arrow{top:auto;bottom:0;transform:none}
  .book-arrow:hover{transform:scale(1.07)}
  .storybook :is(.book-art,.book-carousel,.book-arrow),.storybook .book-popup img{opacity:1!important;animation:none!important;transition:none}
}
@media(prefers-reduced-motion:reduce){
  .book-intro{display:none}
  .storybook :is(.book-art,.book-carousel,.book-arrow),.book-popup img{opacity:1!important;transition:none}
  .storybook :is(.book-carousel,.book-arrow),.book-popup img{animation:none!important}
}

/* Resume popup on the contact page */
.resume-dialog{width:min(900px,94vw);height:min(92svh,1150px);padding:0;border:0;border-radius:16px;background:#fff9e9;color:#173d59;box-shadow:0 30px 80px #061b2766;overflow:hidden}
.resume-dialog[open]{display:flex;flex-direction:column}
.resume-dialog::backdrop{background:#061b27b3;backdrop-filter:blur(3px)}
.resume-dialog-bar{display:flex;align-items:center;gap:1.2rem;padding:.8rem 1rem .8rem 1.4rem;border-bottom:1px solid #e3d7b8}
.resume-dialog-bar strong{margin-right:auto;font:800 .78rem "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.resume-dialog-bar a{font-weight:700;color:#155866;border-bottom:2px solid #83b7ad}
.resume-dialog-bar form{margin:0}
.resume-dialog-bar button{width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:#2c7375;color:#fff8de;font-size:1rem;cursor:pointer}
.resume-dialog-bar button:hover{background:#50a99f}
.resume-pages{flex:1;overflow-y:auto;padding:1rem;display:grid;gap:1rem;background:#e9e2cf}
.resume-pages img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 4px 14px #173e4826}

/* About title: "creator / artist / developer" slide in turn (script.js sets --i and the width) */
.word-cycle{display:inline-block;vertical-align:-.22em;height:1.2em;overflow:hidden;transition:width .45s cubic-bezier(.3,.7,.3,1)}
.word-cycle>span{display:grid;justify-items:start;transform:translateY(calc(var(--i, 0) * -1.2em));transition:transform .55s cubic-bezier(.5,1.4,.5,1)}
.word-cycle em{display:block;width:max-content;line-height:1.2em}
.about-section .word-cycle em:nth-child(2){color:var(--pink)}
.about-section .word-cycle em:nth-child(3){color:var(--orange)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* keep "A developer with" on one line on narrow screens so the cycle never reflows */
.about-section h2{font-size:min(clamp(3.4rem,6.8vw,7.2rem),11.4vw)}

/* About journey map: real photos in the scrapbook frames, a path that draws itself as you scroll,
   and a doodle icon that travels each leg (positions set by script.js) */
.photo-placeholder.has-photo:after{display:none}
.photo-placeholder.has-photo img{position:absolute;inset:10px;display:block;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:cover}
.photo-placeholder.square{width:150px;height:150px}
.photo-cluster-many{flex-wrap:wrap;row-gap:.9rem}
.photo-placeholder.mystery span{font:600 4.2rem/1 Manrope,sans-serif;letter-spacing:0;color:#45585c;transform-origin:50% 85%;animation:mystery-wiggle 1.6s ease-in-out infinite}
.photo-placeholder.mystery:nth-child(2) span{animation-delay:-.8s}
@keyframes mystery-wiggle{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg) translateY(-3px)}}
.journey-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.journey-line{fill:none;stroke:#183d60;stroke-width:2.2;stroke-dasharray:3 8;stroke-linecap:round;opacity:.85}
.journey-draw{fill:none;stroke:#fff;stroke-width:8}
.journey-icon{position:absolute;left:0;top:0;z-index:5;width:46px;height:46px;margin:-23px 0 0 -23px;opacity:0;pointer-events:none;transition:opacity .35s;filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 -2px 0 #fff)}
.journey-icon.is-on{opacity:1}
.journey-icon svg{display:block;width:100%;height:100%;overflow:visible;animation:icon-bob 2.2s ease-in-out infinite}
.journey-icon .tint{fill:currentColor;fill-opacity:.16}
@keyframes icon-bob{50%{transform:translateY(-3px) rotate(-4deg)}}
@media(max-width:650px){.photo-placeholder.square{width:112px;height:112px}.photo-placeholder.mystery span{font-size:3rem}}
@media(prefers-reduced-motion:reduce){.photo-placeholder.mystery span,.journey-icon svg{animation:none}}
@media(max-width:1000px){.scrap-memory{padding-left:34px}.journey-icon{width:32px;height:32px;margin:-16px 0 0 -16px}}

/* journey: text is always there; each chapter's photos fade in once the path reaches it (script.js adds .photos-in) */
.scrap-memory:not(.photos-in) .photo-placeholder{opacity:0}
.scrap-memory.photos-in .photo-placeholder:nth-child(5){animation-delay:.48s}
/* 2025: full-width chapter with two hand-drawn speech bubbles */
.memory-2025{display:block;margin-left:3%;margin-right:3%}
.memory-2025 .scrap-copy p+p{margin-top:1rem}
.speech-row{display:flex;justify-content:center;gap:1rem;margin:1.8rem 0 1rem}
.speech-bubble{position:relative;width:220px;aspect-ratio:220/170;margin:0;display:grid;place-items:center;padding:0 34px 40px;text-align:center;font:800 1.05rem/1.3 Manrope,sans-serif;color:#12354b}
.speech-bubble svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#1d3b56;stroke-width:1.6;stroke-linejoin:round;animation:bubble-wiggle .5s steps(1) infinite}
.speech-bubble span{position:relative}
.speech-reply{margin-top:4.5rem}
.speech-reply svg{transform:scaleX(-1);animation-delay:-.25s}
@keyframes bubble-wiggle{0%{filter:url(#wiggle-0)}20%{filter:url(#wiggle-1)}40%{filter:url(#wiggle-2)}60%{filter:url(#wiggle-3)}80%{filter:url(#wiggle-4)}}
.scrap-closing{max-width:640px;margin:0 auto;text-align:center;font-size:.92rem;line-height:1.75;color:#1d3b56}
.scrap-closing u{text-underline-offset:3px}
@media(max-width:650px){.speech-row{gap:.2rem}.speech-bubble{width:160px;font-size:.85rem;padding:0 24px 30px}.speech-reply{margin-top:3rem}.memory-2025{margin:3rem 0 5rem}}
@media(prefers-reduced-motion:reduce){.speech-bubble svg{animation:none}.scrap-memory .photo-placeholder{opacity:1}}
/* journey chapters laid out like the Wix page: photos-first chapters, a right-aligned 2020 */
.scrap-memory.stack{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem}
.scrap-memory.stack .scrap-copy{max-width:560px}
.scrap-copy.align-right{align-self:flex-end;text-align:right;max-width:360px}
.memory-2020{margin-left:6%;margin-right:4%}
.memory-2020 .photo-cluster-two{align-self:center}
.memory-community{margin-left:0}
.scrap-copy p+p{margin-top:1rem}
.scrap-year{font-size:.8rem;letter-spacing:.04em}
@media(max-width:650px){.scrap-copy.align-right{align-self:flex-start;text-align:left}.memory-2020{margin:3rem 0 5rem}}
/* first chapter is shown as-is; every later chapter reveals its text together with its photos */
.memory-early .photo-placeholder{opacity:1!important;animation:none!important}
.scrap-memory:not(.memory-early)>:is(.scrap-copy,.scrap-closing){transition:opacity .7s ease,transform .7s ease}
.scrap-memory:not(.memory-early):not(.photos-in)>:is(.scrap-copy,.scrap-closing){opacity:0;transform:translateY(18px)}
.photo-break{flex-basis:100%;height:0}
.memory-ux{margin-left:6%}
@media(max-width:650px){.memory-nature .photo-placeholder.square{width:100px;height:100px}}
@media(prefers-reduced-motion:reduce){.scrap-memory>:is(.scrap-copy,.speech-row,.scrap-closing){opacity:1!important;transform:none!important}}
.memory-early .scrap-photos{margin-top:0}
.scrap-memory.stack .scrap-copy{order:0}
@media(max-width:650px){.memory-early .photo-placeholder{width:84px;height:104px}}
/* speech bubbles appear one by one as the icon passes them (script.js adds .is-in) */
.speech-bubble{transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}
.speech-bubble:not(.is-in){opacity:0;transform:translateY(14px) scale(.85)}
.memory-ux .scrap-photos{align-self:center;width:auto}
@media(prefers-reduced-motion:reduce){.speech-bubble{opacity:1!important;transform:none!important}}

/* Hobby tarot (about hero): a deck of face-down cards cycles across the book; picking one
   lifts it to the centre, light blooms from the jellyfish, flashes white and flips to the hobby.
   Card positions come from script.js (--x/--y in % of the stage, --r rotation, --sc scale, --o opacity). */
.tarot{margin-top:2.5rem}
.tarot-stage{position:relative;max-width:1440px;margin:0 auto;aspect-ratio:1440/820;container-type:inline-size}
.tarot-book{position:absolute;inset:0;width:100%;height:100%}
.tarot-title,.tarot-sub{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.tarot-deck{list-style:none;margin:0;padding:0}
.tarot-deck li{display:contents}
.tarot-card{--x:50;--y:48;--r:0deg;--sc:1;--o:0;position:absolute;z-index:1;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:15.5%;aspect-ratio:2/3;padding:0;border:0;background:none;cursor:pointer;
  translate:-50% -50%;rotate:var(--r);scale:var(--sc);opacity:var(--o);perspective:1200px;
  transition:translate .25s,filter .3s}
/* only the lift to and from the centre is eased; the drift is set every frame by script.js */
.tarot-card.is-moving{transition:left .7s cubic-bezier(.45,0,.2,1),top .7s cubic-bezier(.45,0,.2,1),rotate .7s,scale .7s cubic-bezier(.3,1.2,.5,1),opacity .4s,translate .25s}
.tarot-card[data-hidden]{pointer-events:none}
.tarot-card:not(.is-picked):hover,.tarot-card:not(.is-picked):focus-visible{translate:-50% calc(-50% - 16px);rotate:0deg;outline:none;z-index:2}
.tarot-card:focus-visible .tc-inner{box-shadow:0 0 0 3px var(--aqua),0 18px 30px #0008}
.tc-inner{position:absolute;inset:0;border-radius:16.667%/11.111%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1),box-shadow .4s;box-shadow:0 16px 24px #0007}
.tc-back,.tc-front{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;overflow:hidden}
.tc-back{background:url(assets/about/tarot/back.webp) center/cover;box-shadow:inset 0 0 0 1.5px #ffffff45}
.tc-front{transform:rotateY(180deg)}
.tc-front img{width:100%;height:100%;display:block}
/* light: blooms from the jellyfish, then spreads to fill the card, then washes it out to white */
.tc-back::before,.tc-back::after{content:"";position:absolute;pointer-events:none;opacity:0}
.tc-back::before{left:53%;top:57%;width:60%;aspect-ratio:1;translate:-50% -50%;scale:0;border-radius:50%;
  background:radial-gradient(circle,#fff 0,#e4fbff 14%,#9aefe2b0 36%,#9aefe240 55%,#9aefe200 72%);transition:scale .35s cubic-bezier(.3,0,.4,1),opacity .2s}
.tc-back::after{inset:0;background:#fff;transition:opacity .18s}
.is-glow .tc-back::before{opacity:1;scale:1}
.is-glow .tc-inner{box-shadow:0 0 30px 4px #9aefe2aa,0 16px 24px #0007}
.is-radiate .tc-back::before{scale:3.4;opacity:.92;transition-duration:.45s}
.is-radiate .tc-inner{box-shadow:0 0 50px 12px #9aefe2,0 0 16px 2px #fff}
.is-flash .tc-back::after{opacity:1}
.is-flash .tc-inner{box-shadow:0 0 40px 14px #fff,0 0 100px 30px #9aefe2cc}
.is-flipped .tc-inner{transform:rotateY(180deg);box-shadow:0 0 34px 4px #9aefe288,0 18px 30px #0008}
.tarot-card.is-picked{z-index:20;cursor:zoom-out}
.tarot-card.is-dim:not([data-hidden]){filter:brightness(.55) saturate(.6)}
.tc-spark{position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;pointer-events:none;translate:-50% -50%;
  background:radial-gradient(circle,#fff6d8 0 18%,#f2c46a 30%,transparent 62%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:tc-spark .9s cubic-bezier(.2,.7,.3,1) var(--d,0s) both}
@keyframes tc-spark{0%{opacity:0;transform:translate(0,0) scale(.2)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(90deg)}}
.tarot-dots{display:none}

/* Phones: a single page book (drawn in CSS) with the centre card large and its neighbours peeking in */
@media(max-width:700px){
  .tarot{margin-top:2rem}
  .tarot-stage{aspect-ratio:auto;height:520px;border-radius:22px;background:#fff9e9;overflow:hidden;
    box-shadow:0 0 0 8px #c99a52,0 0 0 9px #8a6230,inset 0 0 0 1px #8a623055,inset -6px 0 0 -3px #efe3c4,0 14px 0 6px #8a6230,0 30px 40px #000a;margin:0 10px}
  .tarot-book{display:none}
  .tarot-title,.tarot-sub{position:static;width:auto;height:auto;clip-path:none;text-align:center}
  .tarot-title{margin:26px 0 4px;font:800 30px/1 Manrope,sans-serif;letter-spacing:-.04em;color:#0d4954}
  .tarot .tarot-sub{margin:0;font:800 10px "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a6230}
  .tarot-card{width:52%}
  .tarot-dots{display:flex;justify-content:center;gap:7px;position:absolute;left:0;right:0;bottom:22px}
  .tarot-dots i{width:7px;height:7px;border-radius:50%;border:1.5px solid #8a6230;transition:background .3s}
  .tarot-dots i.on{background:#8a6230}
  .tarot-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:46px;height:2px;background:#8a6230;opacity:.6}
}
@media(prefers-reduced-motion:reduce){.tarot-card,.tc-inner,.tc-back::before,.tc-back::after{transition:none!important}.tc-spark{display:none}}