/* The landing page: watercolour worlds, then sections laid straight onto the paper with blooms of paint drifting behind them. */

:root {
  --butter: #ffc93c; --cream: #fff3c6; --cream-2: #ffe9a0;
  --verm: #f23c0c; --verm-deep: #d93108; --cobalt: #1e5bff; --violet: #5b45d6; --pink: #ffc4d0; --teal: #12c2b0; --green: #0fb87a;
  --caps: "Anton", Impact, "Arial Narrow Bold", "Haettenschweiler", sans-serif;
}

.display { font-family: var(--caps); font-weight: 400; text-transform: uppercase; letter-spacing: .012em; line-height: .96; }
.display.big { font-size: clamp(3rem, 8.4vw, 7.4rem); }
.display.huge { font-size: clamp(6rem, 24vw, 19rem); line-height: .82; }

/* buttons */
.btn-white, .btn-orange, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .85rem 1.5rem;
  font-family: var(--body); font-weight: 750; font-size: 1rem; letter-spacing: -.005em; text-decoration: none; line-height: 1.1;
  transition: transform .35s var(--spring), box-shadow .25s, background .25s, color .25s;
}
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 .7rem 0 -.3rem rgba(27, 23, 18, .2); }
.btn-orange { background: var(--verm-deep); color: #fff; }
.btn-orange:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 .7rem 0 -.3rem rgba(27, 23, 18, .25); }
.btn-line { box-shadow: inset 0 0 0 2px currentColor; }
.btn-line:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.big.btn-white, .big.btn-orange { padding: 1.15rem 2.2rem; font-size: 1.15rem; }

/* ---------- header (floats over the worlds) ---------- */
.site-header { position: absolute; z-index: 20; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem clamp(1rem, 3.6vw, 2.8rem); pointer-events: none; }
.site-header > *, .site-header nav > * { pointer-events: auto; }
.site-header nav { display: flex; align-items: center; gap: .6rem; }
.site-header .btn-orange { background: var(--ink); }   /* reads on every world, including the vermillion one */
.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; background: #fff; padding: .5rem 1rem .5rem .8rem; border-radius: 999px; font-family: var(--display); font-size: 1.3rem; font-weight: 800; letter-spacing: -.04em; transition: transform .35s var(--spring); }
.logo:hover { transform: translateY(-2px) rotate(-1.5deg); }
.logo svg { width: 1.2rem; height: 1.2rem; fill: var(--verm); transition: transform .6s var(--spring); }
.logo:hover svg { transform: rotate(90deg) scale(1.2); }
.nav-link { background: #fff; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .3s var(--spring), background .2s; }
.nav-link:hover { transform: translateY(-2px); background: var(--cream); }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem 1rem .25rem .35rem; border-radius: 999px; background: #fff; font-weight: 700; font-size: .92rem; transition: transform .3s var(--spring), background .2s; }
.pill:hover { background: var(--cream); transform: translateY(-2px); }
.pill span:last-child { white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }

/* ---------- how it works: paper cards dealt onto the table ---------- */
.how { position: relative; z-index: 2; margin-top: -2.6rem; border-radius: 2.6rem 2.6rem 0 0; background: var(--cream); padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 4vw, 3rem) clamp(5rem, 9vw, 8.5rem); text-align: center; }
.how > .display { font-size: clamp(2.8rem, 7.6vw, 6.6rem); color: var(--verm); max-width: 16ch; margin: 0 auto; }
.how em { font-style: normal; color: var(--cobalt); }
.deal { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(7rem, 9vw, 8.5rem) 2.4rem; margin-top: clamp(9rem, 12vw, 11rem); align-items: flex-end; }
.deal-card { position: relative; width: min(100%, 21rem); padding: 5rem 1.7rem 1.9rem; border-radius: 1.9rem; text-align: center; color: #fff; isolation: isolate; --rot: -3deg; --behind: var(--butter); --face: var(--verm); }
.deal-card::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--behind); transform: rotate(calc(var(--rot) * -1.8)); }
.deal-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--face); }
.deal-card.d1 { --face: var(--verm-deep); --rot: -3.2deg; --behind: var(--butter); }
.deal-card.d2 { --face: var(--cobalt); --rot: 2.4deg; --behind: var(--pink); }
.deal-card.d3 { --face: var(--violet); --rot: -2deg; --behind: var(--teal); }
.deal-card h3.display { font-size: clamp(2.1rem, 3.2vw, 2.7rem); margin: 0 0 .55rem; color: inherit; max-width: none; }
.deal-card p { margin: 0; font-weight: 550; font-size: 1.05rem; line-height: 1.45; }
.num-badge { position: absolute; top: 1rem; left: 1rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); font-family: var(--caps); font-size: 1.3rem; }
.deal-card.d1 .num-badge { left: auto; right: 1rem; }
.peek { position: absolute; left: 50%; bottom: calc(100% - 4.4rem); translate: -50% 0; height: 10.5rem; width: auto; transition: transform .5s var(--spring); filter: drop-shadow(0 .8rem .5rem rgba(27, 23, 18, .25)); transform-origin: 50% 90%; }
.peek.peek-wide { height: 8.5rem; }
.peek.peek-tall { height: 11.5rem; }
.peek.peek-pet { left: auto; right: .6rem; translate: 0 0; height: 6rem; bottom: calc(100% - 4rem); }
.deal-card:hover .peek { transform: translateY(-.8rem) rotate(-3deg) scale(1.05); }
.deal-card.reveal { opacity: 0; transform: translateY(70px) rotate(calc(var(--rot) * 3)); }
.deal-card.reveal.in { opacity: 1; transform: rotate(var(--rot)); transition: opacity .8s var(--ease), transform 1.1s var(--spring); transition-delay: calc(var(--k, 0) * 120ms); }
.deal-card.d2 .peek:not(.peek-pet), .deal-card.d3 .peek { left: 38%; }

/* ---------- the statement ---------- */
.statement { position: relative; z-index: 1; margin-top: -2.6rem; padding: clamp(9rem, 17vw, 15rem) clamp(1.2rem, 6vw, 5rem) clamp(9rem, 16vw, 14rem); background: var(--cobalt); color: #fff; clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%); overflow: hidden; }
.scrub { font-size: clamp(2.9rem, 8.6vw, 8.2rem); max-width: 14ch; margin: 0 auto 0 clamp(0rem, 6vw, 6rem); position: relative; z-index: 2; }
.sw { opacity: .24; transition: opacity .45s; }
.sw.lit { opacity: 1; }
.statement-art { position: absolute; z-index: 1; right: 3%; bottom: 7%; width: min(38vw, 30rem); filter: drop-shadow(0 1.4rem 1rem rgba(0, 0, 0, .25)); animation: bob-soft 7s ease-in-out infinite; }
@keyframes bob-soft { 50% { transform: translateY(-14px) rotate(1.5deg); } }

/* ---------- the stories ---------- */
.band { position: relative; z-index: 2; background: var(--cream); margin-top: -2.6rem; border-radius: 2.6rem 2.6rem 0 0; }
.shelf { max-width: 88rem; margin: 0 auto; padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 4vw, 3rem) 2rem; scroll-margin-top: 0; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.shelf-head .display { color: var(--verm); }
.tabs { display: inline-flex; flex-wrap: wrap; gap: .45rem; }
.tab { padding: .7rem 1.3rem; border-radius: 999px; background: #fff; font-weight: 750; font-size: .98rem; transition: transform .3s var(--spring), background .25s, color .25s; }
.tab:hover { transform: translateY(-2px); }
.tab[aria-pressed="true"] { color: #fff; background: var(--ink); }
.tab-cozy[aria-pressed="true"] { background: var(--verm-deep); } .tab-funny[aria-pressed="true"] { background: var(--butter); color: var(--ink); }
.tab-wondrous[aria-pressed="true"] { background: var(--teal); color: var(--ink); } .tab-brave[aria-pressed="true"] { background: var(--cobalt); }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; aspect-ratio: 1 / 1.05; padding: 1.3rem 1.4rem; border-radius: 2rem; background: var(--tone); color: var(--tone-fg, var(--ink)); overflow: hidden; isolation: isolate; transition: transform .5s var(--spring), box-shadow .4s; }
.tone-red { --tone: var(--verm-deep); --tone-fg: #fff; } .tone-yellow { --tone: var(--butter); } .tone-green { --tone: var(--green); --tone-fg: var(--ink); }
.tone-blue { --tone: var(--cobalt); --tone-fg: #fff; } .tone-pink { --tone: var(--pink); } .tone-orange { --tone: #ff8a2b; } .tone-teal { --tone: var(--teal); }
.tile:hover { transform: translateY(-7px) rotate(-.6deg); box-shadow: 0 1.6rem 1.6rem -1.2rem rgba(27, 23, 18, .45); }
.tile-art { position: absolute; z-index: -1; inset: 6% 3% 34% 3%; display: grid; place-items: center; }
.tile-art img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--spring); filter: drop-shadow(0 1rem .8rem rgba(27, 23, 18, .22)); }
.tile:hover .tile-art img { transform: translateY(-4%) scale(1.08) rotate(-1.5deg); }
.tile-text { display: flex; flex-direction: column; gap: .35rem; padding-right: 3rem; }
.tile .mood { color: inherit; opacity: .8; }
.tile-title { font-family: var(--caps); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1; letter-spacing: .012em; }
.tile-go { position: absolute; right: 1.1rem; bottom: 1.1rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .4s var(--spring); }
.tile-go svg { width: 1.05rem; height: 1.05rem; }
.tile:hover .tile-go { transform: scale(1.15) rotate(-8deg); }
.reveal { opacity: 0; transform: translateY(34px) scale(.98); }
.reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--k, 0) * 70ms); }
.more { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin: 2.6rem 0 0; }
.count { font-size: .92rem; color: var(--ink-soft); font-weight: 650; }
.more .btn-white { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- the crew marquee ---------- */
.crew { position: relative; margin-top: clamp(4.5rem, 9vw, 8rem); padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem); background: var(--violet); color: #fff; border-radius: 2.6rem 2.6rem 0 0; overflow: hidden; text-align: center; }
.crew .display { padding: 0 1rem; max-width: 14ch; margin: 0 auto; }
.track { overflow: hidden; margin: clamp(1.6rem, 3vw, 2.6rem) 0; }
.belt { display: flex; align-items: flex-end; gap: clamp(1.4rem, 3vw, 2.6rem); width: max-content; animation: belt 70s linear infinite; padding: 1.4rem 0 0; }
.track.rev .belt { animation-direction: reverse; animation-duration: 58s; }
.track:hover .belt { animation-play-state: paused; }
.belt img { height: clamp(7.5rem, 15vw, 12rem); width: auto; flex: none; transform-origin: 50% 90%; transition: transform .5s var(--spring); filter: drop-shadow(0 .8rem .5rem rgba(0, 0, 0, .25)); -webkit-user-drag: none; }
.track.rev .belt img { height: clamp(5rem, 10vw, 8rem); }
.belt img:hover { transform: translateY(-.8rem) rotate(-4deg) scale(1.08); }
@keyframes belt { to { transform: translateX(-50%); } }
.crew-cta { margin: 1.8rem 0 0; }

/* ---------- the finale ---------- */
.finale { position: relative; background: var(--butter); text-align: center; padding: clamp(5rem, 10vw, 8rem) 1rem clamp(11rem, 19vw, 17rem); overflow: hidden; border-radius: 2.6rem 2.6rem 0 0; margin-top: -2.6rem; z-index: 1; }
.finale .display { color: var(--verm); margin: 0 0 1.6rem; position: relative; z-index: 2; }
.finale .btn-orange { position: relative; z-index: 2; }
.cheer { position: absolute; inset: auto 0 0 0; height: 100%; pointer-events: none; z-index: 1; }
.cheer .c { position: absolute; bottom: clamp(3.6rem, 8.5vw, 7.5rem); height: clamp(9rem, 19vw, 16rem); width: auto; transform-origin: 50% 100%; filter: drop-shadow(0 .8rem .5rem rgba(27, 23, 18, .2)); }
.cheer .c1 { left: 12%; } .cheer .c2 { left: 46%; height: clamp(5rem, 10vw, 9rem); bottom: clamp(6.4rem, 14.5vw, 12.5rem); } .cheer .c3 { right: 11%; }
.cheer .c.reveal { transform: translateY(60%); opacity: 1; }
.cheer .c.reveal.in { transform: none; transition: transform 1.2s var(--spring); transition-delay: calc(var(--k, 0) * 140ms); }
.site-footer { position: relative; z-index: 3; background: var(--ink); color: var(--cream); text-align: center; padding: 1.2rem 1rem 2.6rem; font-size: .95rem; font-weight: 600; }
.site-footer a { color: inherit; text-decoration-color: rgba(255, 243, 198, .4); }

/* ---------- phones ---------- */
@media (max-width: 46rem) { .site-header nav .nav-link, .site-header .pill { display: none; } }
@media (max-width: 46rem), (max-aspect-ratio: 4/5) {
  .logo { font-size: 1.15rem; padding: .4rem .85rem .4rem .7rem; }
  .btn-orange { padding: .7rem 1.1rem; font-size: .92rem; }
  .pill span:last-child { max-width: 5.5rem; }
  .deal { margin-top: 7rem; }
  .statement-art { width: 52vw; right: 2%; bottom: 4%; }
  .scrub { max-width: none; margin: 0; }
  .tile { aspect-ratio: auto; min-height: 17rem; }
  .grid { grid-template-columns: 1fr; }
}
@media (max-height: 640px) and (min-width: 46rem) {
}

@media (prefers-reduced-motion: reduce) {
  .world.on { animation: none; }
  .who { transform: none; translate: none; transition: none; }
  .layer { transform: none; }
  .drift, .bird, .statement-art, .bloom, .tile::before, .deal-card::after { animation: none; }
  .belt { animation: none; overflow-x: auto; }
  .reveal, .deal-card.reveal { opacity: 1; transform: none; }
  .deal-card.reveal { transform: rotate(var(--rot)); }
  .sw { opacity: 1; }
}

/* =====================================================================================================
   Watercolour skin: everything sits on one sheet of paper. No cards, no coloured bands, no borders: colour arrives as
   loose blooms of paint that soak in when they scroll into view and then keep drifting, like wet pigment that never dries.
   (Everything above is structure; this block sets the look.)
   ===================================================================================================== */
:root {
  --navy: #26282f; --navy-soft: #5b5f6a; --paper-tint: #fbf8f1;
  --coral: #d9573a; --ultra: #2f68cf;
}
body { background: var(--paper-tint) url("../assets/watercolor/paper.webp") 0 0 / 512px 512px; }
.display { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: -.04em; line-height: 1.02; color: var(--navy); }
.display.huge { letter-spacing: -.06em; line-height: .9; }

/* ---------- the blooms ---------- */
.bloom { position: absolute; z-index: 0; pointer-events: none; width: var(--w, 34rem); aspect-ratio: 1; background: var(--wc) 50% 50% / contain no-repeat;
  animation: drift var(--d, 26s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.bc-peach { --wc: url("../assets/watercolor/bloom-peach.webp"); } .bc-coral { --wc: url("../assets/watercolor/bloom-coral.webp"); }
.bc-butter { --wc: url("../assets/watercolor/bloom-butter.webp"); } .bc-sage { --wc: url("../assets/watercolor/bloom-sage.webp"); }
.bc-sky { --wc: url("../assets/watercolor/bloom-sky.webp"); } .bc-lilac { --wc: url("../assets/watercolor/bloom-lilac.webp"); }
.bc-pink { --wc: url("../assets/watercolor/bloom-pink.webp"); } .bc-teal { --wc: url("../assets/watercolor/bloom-teal.webp"); }
/* a drop of paint spreading through wet paper */
.bloom.reveal { opacity: 0; scale: .45; filter: blur(18px); }
.bloom.reveal.in { opacity: var(--o, .5); scale: 1; filter: blur(0); transition: opacity 1.6s var(--ease), scale 2.4s var(--ease), filter 2s var(--ease); transition-delay: calc(var(--k, 0) * 160ms); }
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  33% { transform: translate(var(--mx, 2.5rem), calc(var(--my, 1.5rem) * -1)) rotate(var(--r, 9deg)) scale(1.06, .96); }
  66% { transform: translate(calc(var(--mx, 2.5rem) * -.6), var(--my, 1.5rem)) rotate(calc(var(--r, 9deg) * -.5)) scale(.96, 1.05); }
  100% { transform: translate(calc(var(--mx, 2.5rem) * .4), calc(var(--my, 1.5rem) * .6)) rotate(calc(var(--r, 9deg) * 1.4)) scale(1.04, 1.02); }
}
.bl-1 { --w: clamp(22rem, 48vw, 44rem); left: -12%; top: -6%; --o: .38; --d: 31s; }
.bl-2 { --w: clamp(18rem, 36vw, 34rem); right: -10%; top: 30%; --o: .32; --d: 27s; --dl: -9s; --r: -12deg; }
.bl-3 { --w: clamp(30rem, 70vw, 62rem); left: -18%; top: -12%; --o: .5; --d: 34s; --mx: 4rem; }
.bl-4 { --w: clamp(22rem, 46vw, 42rem); right: -14%; top: 22%; --o: .42; --d: 29s; --dl: -12s; --r: -10deg; }
.bl-5 { --w: clamp(14rem, 26vw, 24rem); left: 38%; bottom: -10%; --o: .36; --d: 23s; --dl: -5s; }
.bl-6 { --w: clamp(24rem, 50vw, 46rem); right: -16%; top: -8%; --o: .3; --d: 33s; --dl: -7s; }
.bl-7 { --w: clamp(26rem, 56vw, 52rem); left: -16%; top: -4%; --o: .42; --d: 30s; }
.bl-8 { --w: clamp(20rem, 40vw, 38rem); right: -10%; top: 18%; --o: .38; --d: 26s; --dl: -11s; --r: -14deg; }
.bl-9 { --w: clamp(14rem, 26vw, 24rem); left: 40%; bottom: -8%; --o: .32; --d: 22s; --dl: -4s; }
.bl-10 { --w: clamp(30rem, 66vw, 60rem); left: 50%; top: -14%; margin-left: calc(var(--w) / -2); --o: .55; --d: 32s; }
.bl-11 { --w: clamp(16rem, 30vw, 28rem); left: -6%; top: 8%; --o: .38; --d: 25s; --dl: -8s; }
.bl-12 { --w: clamp(16rem, 30vw, 28rem); right: -6%; top: 2%; --o: .34; --d: 28s; --dl: -15s; --r: -12deg; }

/* buttons: ink pills, and a paper one */
.btn-orange { background: var(--navy); color: #fff; }
.site-header .btn-orange { background: var(--navy); }
.btn-white { background: rgba(255, 251, 242, .9); color: var(--navy); box-shadow: 0 .6rem 1.2rem -.9rem rgba(38, 40, 47, .5); }
.btn-line { background: rgba(255, 255, 255, .55); box-shadow: none; color: var(--navy); backdrop-filter: blur(6px); }
.btn-line:hover { background: #fff; }

/* the floating bar: a strip of paper */
.site-header { justify-content: center; padding: 1rem clamp(.8rem, 3vw, 2rem); }
.bar { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100%, 62rem); padding: .45rem .5rem .45rem 1rem; background: rgba(251, 248, 241, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 .8rem 2rem -1.4rem rgba(38, 40, 47, .45); }
.bar .logo { background: none; padding: 0; font-size: 1.25rem; color: var(--navy); }
.bar .logo svg { fill: var(--coral); }
.bar .nav-link { background: none; padding: .55rem .9rem; color: var(--navy); }
.bar .nav-link:hover { background: rgba(38, 40, 47, .06); }
.bar .pill { background: rgba(38, 40, 47, .06); }
.bar .pill:hover { background: rgba(255, 212, 90, .6); }
.bar .btn-orange { padding: .7rem 1.2rem; font-size: .95rem; }

/* every section lies on the same paper: no backgrounds, no rounded tops */
.how, .statement, .band, .crew, .finale { background: transparent; border-radius: 0; clip-path: none; margin-top: 0; isolation: isolate; overflow: visible; }
/* lift the content above its blooms, without beating any element that places itself */
:where(.how, .statement, .shelf, .crew, .finale) > :where(:not(.bloom)) { position: relative; z-index: 1; }
.band { overflow-x: clip; }
.how { overflow-x: clip; }
.how > .display, .shelf-head .display, .finale .display, .crew .display { color: var(--navy); }
.how em { color: var(--coral); }

/* how it works: three blooms of paint instead of three cards */
.deal-card { color: var(--navy); isolation: isolate; }
.deal-card::before { content: none; }
.deal-card::after { inset: -16% -14% -12%; border-radius: 0; background: var(--wc) 50% 50% / contain no-repeat; opacity: .55; animation: drift 24s ease-in-out infinite alternate; --mx: 1rem; --my: .8rem; --r: 5deg; }
.deal-card.d1 { --wc: url("../assets/watercolor/bloom-peach.webp"); }
.deal-card.d2 { --wc: url("../assets/watercolor/bloom-lilac.webp"); }
.deal-card.d2::after { animation-delay: -8s; }
.deal-card.d3 { --wc: url("../assets/watercolor/bloom-sage.webp"); }
.deal-card.d3::after { animation-delay: -16s; }
.deal-card h3.display { color: var(--navy); }
.deal-card p { font-weight: 600; }
.num-badge { font-family: var(--display); font-weight: 800; font-size: 1.1rem; background: rgba(255, 251, 242, .9); }
.peek { filter: drop-shadow(0 .8rem .6rem rgba(60, 40, 30, .2)); }

/* statement: words on a wash of sky */
.statement { color: var(--navy); overflow-x: clip; }
.statement .scrub { color: var(--navy); }
.sw { opacity: .22; }
.statement-art { filter: drop-shadow(0 1.2rem 1rem rgba(60, 40, 30, .16)); }

/* stories: each painting sits on its own bloom, its name written on the paper underneath */
.tab { background: rgba(255, 251, 242, .9); color: var(--navy); }
.tab[aria-pressed="true"], .tab-cozy[aria-pressed="true"], .tab-funny[aria-pressed="true"], .tab-wondrous[aria-pressed="true"], .tab-brave[aria-pressed="true"] { background: var(--navy); color: #fff; }
.tone-red { --wc: url("../assets/watercolor/bloom-coral.webp"); } .tone-yellow { --wc: url("../assets/watercolor/bloom-butter.webp"); }
.tone-green { --wc: url("../assets/watercolor/bloom-sage.webp"); } .tone-blue { --wc: url("../assets/watercolor/bloom-sky.webp"); }
.tone-pink { --wc: url("../assets/watercolor/bloom-pink.webp"); } .tone-orange { --wc: url("../assets/watercolor/bloom-peach.webp"); }
.tone-teal { --wc: url("../assets/watercolor/bloom-teal.webp"); }
.tile { --tone: transparent; --tone-fg: var(--navy); background: transparent; border-radius: 0; overflow: visible; aspect-ratio: 1 / 1.12; }
.tile::before { content: ""; position: absolute; z-index: -2; inset: -4% -6% 30%; background: var(--wc) 50% 50% / contain no-repeat; opacity: .5;
  transition: opacity .6s var(--ease), scale .9s var(--spring); animation: drift 28s ease-in-out infinite alternate; --mx: .7rem; --my: .5rem; --r: 6deg; }
.grid li:nth-child(3n + 2) .tile::before { animation-delay: -9s; rotate: 70deg; }
.grid li:nth-child(3n + 3) .tile::before { animation-delay: -18s; rotate: -110deg; }
.tile:hover { box-shadow: none; transform: translateY(-6px); }
.tile:hover::before { opacity: .75; scale: 1.1; }
.tile-art { inset: 4% 3% 40% 3%; }
.tile-art img { filter: drop-shadow(0 .9rem .7rem rgba(60, 40, 30, .16)); }
.tile .mood { opacity: .7; }
.tile-title { font-family: var(--display); font-weight: 800; text-transform: none; letter-spacing: -.035em; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.05; }
.tile-text { padding-right: 2.8rem; }
.tile-go { background: var(--navy); color: #fff; }
.more .btn-white { box-shadow: inset 0 0 0 2px var(--navy); }

/* crew */
.crew { color: var(--navy); overflow-x: clip; }
.belt img { filter: drop-shadow(0 .8rem .6rem rgba(60, 40, 30, .16)); }

/* finale: a sunny wash, the cheering crew standing in a painted meadow */
.finale { overflow-x: clip; padding-bottom: clamp(12rem, 20vw, 18rem); }
.finale .btn-orange { background: var(--navy); }
.meadow { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(7rem, 15vw, 13rem); object-fit: cover; object-position: 50% 100%; pointer-events: none;
  /* soaked into the paper on every side */
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 35%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.cheer { z-index: 3; }
.cheer .c { filter: drop-shadow(0 .8rem .6rem rgba(60, 40, 30, .16)); }
.cheer .c2 { left: 57%; bottom: clamp(6rem, 12.5vw, 11rem); }
.site-footer { background: transparent; color: var(--navy-soft); }
.site-footer a { text-decoration-color: rgba(38, 40, 47, .3); }

/* phones and portrait tablets */
@media (max-width: 46rem), (max-aspect-ratio: 4/5) {
  .bar { padding-left: .85rem; }
  .bar .logo { font-size: 1.1rem; }
  .bar .nav-link { display: none; }
  .tile { aspect-ratio: auto; min-height: 19rem; }
}