@font-face {
  font-family: 'Lilita One';
  src: url('fonts/LilitaOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Brick Sans';
  src: url('fonts/BrickSans-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #eee7d8;
  --ink: #282521;
  --wine: #692e42;
  --muted: #655b50;
  --rule: #b9aa96;
  --mono: Consolas, ui-monospace, monospace;
  --serif: Georgia, 'Times New Roman', serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 Arial, sans-serif }
body:has(dialog[open]) { overflow: hidden }
h1, h2, h3, p, figure, ol { margin: 0 }
img { display: block; max-width: 100%; height: auto }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 3px solid #a34b66; outline-offset: 5px }
.frame { width: min(100% - 112px, 1272px); margin-inline: auto }
.label { font: 600 11px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 2; background: var(--paper); padding: .7rem }
.skip:focus { top: 1rem }

.mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: 66px }
.brand { justify-self: start; display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -.035em }
.brand span { color: var(--wine); font-size: 25px; line-height: 1 }
.mast nav { display: flex; gap: 28px; font-size: 13px; font-weight: bold }
.mast nav a:hover, .end a:hover { text-decoration: underline; text-underline-offset: 4px }
.mast-edition { justify-self: end; font: 600 10px/1.4 var(--mono); letter-spacing: .12em }

.cover {
  --cover-ink: #0953bf;
  --cover-guide: #4585d4;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  aspect-ratio: 1280 / 980;
  padding-block: clamp(12px, 4vw, 52px);
  overflow: clip;
  color: var(--cover-ink);
  background: #83929e;
}
.cover::before, .cover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('firstpage.png') center / contain no-repeat;
}
.cover::before { z-index: -2; background-size: cover; filter: blur(22px); scale: 1.07 }
.cover::after { z-index: -1; background-size: 100% auto }
.cover-sheet { container-type: inline-size; width: min(73vw, 860px) }
.cover-meta, .cover-year { color: #082f70; font: 600 clamp(13px, 1.65vw, 22px)/1.25 Arial, sans-serif; letter-spacing: -.025em; text-shadow: 0 0 4px #faf3e4 }
.cover-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px }
.cover-wordmark { position: relative; border: 1px solid var(--cover-guide); padding-block: 2.2cqw 3.4cqw; text-align: center }
.cover-wordmark h1 { font: 400 22cqw/.92 'Lilita One', 'Arial Black', sans-serif; letter-spacing: -.045em }
.cover-spark { position: absolute; top: 12%; left: 0; transform: translateX(-65%); color: #1689cf; font: 400 clamp(24px, 4.5vw, 58px)/1 Arial, sans-serif }
.cover-handle { position: absolute; width: 7px; height: 7px; border: 1px solid var(--cover-guide); background: #faf7e8 }
.top-left { top: -4px; left: -4px }
.top-right { top: -4px; right: -4px }
.bottom-left { bottom: -4px; left: -4px }
.bottom-right { bottom: -4px; right: -4px }
.cover-year { margin-top: 12px; text-align: right }

.about {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100svh;
  background: #d6cec0;
}
.about-spread {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 52.2% minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  aspect-ratio: 1366 / 768;
  background: #f9f9ec;
  color: #3d2018;
}
.about-portrait { position: relative; min-height: 0; margin-left: 9.1%; overflow: clip }
.about-portrait img {
  position: absolute;
  top: -22.8%;
  left: -3.55%;
  width: 109.4%;
  max-width: none;
}
.about-portrait h2, .about-intro h3 {
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
.about-portrait h2 {
  position: absolute;
  top: 8.8%;
  left: 6%;
  color: white;
  font-size: 9.2cqw;
  line-height: .88;
  text-shadow: 4px 7px 24px #0007;
}
.about-details {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  gap: .55cqw;
}
.about-intro {
  position: relative;
  padding: 1.5cqw 4.5cqw 0 1.95cqw;
}
.about-intro h3 {
  font-size: 7.15cqw;
  line-height: .94;
  letter-spacing: -.025em;
}
.about-intro p {
  margin-top: 2.15cqw;
  font-size: 1.82cqw;
  line-height: 1.32;
}
.about-seal {
  position: absolute;
  top: -5cqw;
  right: 0;
  width: 9.7cqw;
  pointer-events: none;
}
.about-collage {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: start;
  gap: .5cqw;
  padding-left: .35cqw;
  overflow: clip;
}
.about-receipts, .about-film {
  position: relative;
  overflow: clip;
}
.about-receipts { aspect-ratio: 1010 / 1143 }
.about-film { aspect-ratio: 761 / 1361 }
.about-receipts img, .about-film img {
  position: absolute;
  max-width: none;
}
.about-receipts img { width: 124.16%; left: -14.65%; top: -5.16% }
.about-film img { width: 123.65%; left: -11.83%; top: -10.51% }

@media (max-width: 760px), (max-aspect-ratio: 5/4) {
  .about { min-height: 0 }
  .about-spread {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    width: 100%;
    aspect-ratio: auto;
  }
  .about-portrait { aspect-ratio: 1; margin-left: 0 }
  .about-portrait img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 56%;
  }
  .about-portrait h2 { font-size: 17vw }
  .about-details { gap: 22px; padding: 24px 20px 28px }
  .about-intro { padding: 0 }
  .about-intro h3 { font-size: min(13vw, 82px) }
  .about-intro p { margin-top: 16px; font-size: clamp(16px, 4vw, 24px) }
  .about-seal { top: -16px; right: 0; width: min(16vw, 100px) }
  .about-collage { gap: 8px; padding-left: 0 }
}
@media (prefers-reduced-motion: no-preference) {
  .cover { position: sticky; top: var(--cover-pin-top, 0px) }
}

.contents-page {
  position: relative;
  z-index: 1;
  background: #fbb833;
}
.contents-spread {
  container-type: inline-size;
  position: relative;
  width: 100%;
}
.contents-spread > h2 {
  position: absolute;
  z-index: 1;
  top: clamp(16px, 2cqw, 36px);
  left: clamp(16px, 2cqw, 36px);
  color: #141414;
  font: 600 clamp(12px, 1cqw, 16px)/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contents-cards {
  padding: 0;
  list-style: none;
}
.contents-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 2cqw, 36px);
  min-height: 48svh;
  padding: clamp(16px, 2cqw, 32px);
  color: #141414;
}
.contents-card h3 {
  order: 1;
  align-self: flex-end;
  margin-bottom: clamp(8px, 4svh, 48px);
  font: 700 clamp(22px, 4cqw, 62px)/1.02 Arial, sans-serif;
  letter-spacing: -.045em;
}
.contents-card a { color: inherit; text-decoration: none }
.contents-card a::after { content: ''; position: absolute; inset: 0 }
.contents-card:focus-within { outline: 3px solid currentColor; outline-offset: -6px }
.contents-card a:hover { text-decoration: underline; text-underline-offset: .12em }
.contents-number {
  flex: none;
  font: 700 min(34cqw, 34svh)/.77 Arial, sans-serif;
  letter-spacing: -.08em;
}
.contents-character { background: #165f47; color: #e3ea98 }
.contents-card.contents-character, .character-intro { background: #fbb833; color: #141414 }
.contents-illustration { --card-index: 1 }
.contents-illustration, .illustration-intro { background: #fa4d43; color: #141414 }
.contents-game { --card-index: 2 }
.contents-game, .game-intro { background: #cfede0; color: #141414 }
.contents-environments { --card-index: 3 }
.contents-environments, .environments-intro { background: #533477; color: #71d4ef }
.environments-intro { background: #24143c }
.contents-card.contents-character { background: #fbb833 url("art/contents-character.png") left center / cover no-repeat }
.contents-card.contents-illustration { background: #fa4d43 url("art/contents-illustration-outline.png") center / cover no-repeat }
.contents-card.contents-game { background: #caeae0; color: #000 }
.contents-card.contents-environments {
  background: #e8def4 url("art/contents-hospital-lift.png") center / cover no-repeat;
  color: #000;
}
.contents-card:is(.contents-character, .contents-illustration), .contents-spread > h2 { color: #000 }
.contents-background-video {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
}

.chapter-slider.is-active .contents-spread {
  height: 100%;
  overflow: clip;
}
.chapter-slider.is-active .contents-card {
  --card-progress: clamp(0, calc(var(--contents-progress, 0) - var(--card-index, 0) + 1), 1);
  position: absolute;
  inset: 0;
  transform: translateX(calc(100% * (1 - var(--card-progress)) + 9.7% * var(--card-index, 0) * var(--card-progress)));
  padding-right: calc(9.7cqw * var(--card-index, 0) + 2cqw);
}
.chapter-slider.is-active .contents-number {
  font-size: min(35cqw, 65svh);
}
.chapter-slider.is-active .contents-card h3 {
  margin-bottom: 11svh;
}

.character-intro {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
}
.character-intro-label {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.character-intro svg { width: min(84%, 84rem); height: auto; overflow: visible }
.character-intro path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 14;
  stroke-linejoin: round;
}
.chapter-slider.is-active {
  height: calc(435svh + var(--contents-steps, 3) * 100svh + var(--chapter-extra, 0px));
}
.chapter-slider.is-active .character-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateY(calc(101% * (1 - var(--character-enter, 0))));
}
.chapter-slider.is-active .character-intro path,
.illustration-intro path,
.game-intro path,
.environments-intro path {
  --draw: clamp(0, calc(var(--character-draw, 1) * 2.1 - var(--letter) * .065), 1);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw));
  fill-opacity: clamp(0, calc((var(--draw) - .82) / .18), 1);
}
@property --character-draw {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
@keyframes illustration-draw {
  from { --character-draw: 0 }
  to { --character-draw: 1 }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .illustration-intro, .game-intro, .environments-intro {
      animation: illustration-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 100%;
    }
  }
}
.illustration-intro, .game-intro { z-index: 1 }
.slide-sequence.has-slide {
  --slide-screen: 100svh;
  --slide-distance: .72;
  --slide-hold: 35svh;
  overflow-x: clip;
}
.slide-sequence.has-slide > .slide-outgoing {
  position: sticky;
  top: var(--slide-stop, 0px);
  min-height: var(--slide-screen);
}
.slide-sequence.has-slide {
  margin-bottom: var(--slide-tail-offset, 0px);
}
.slide-sequence.has-slide.is-slide-complete > .slide-outgoing { visibility: hidden }
.has-slide > .slide-runway {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--slide-screen));
  overflow: clip;
}
.has-slide > .slide-runway::after {
  content: '';
  display: block;
  height: calc(var(--slide-screen) * var(--slide-distance) + var(--slide-hold));
}
/* Keep the first illustration pinned while the next runway crosses it. */
.has-slide > .slide-runway:has(+ .slide-runway)::after {
  height: calc(var(--slide-screen) * (1 + var(--slide-distance)) + var(--slide-hold) + 75svh);
}
.has-slide > .slide-runway + .slide-runway {
  margin-top: calc(-2 * var(--slide-screen));
}
.has-slide > .slide-runway > .slide-panel {
  position: sticky;
  top: 0;
  min-height: max(var(--slide-screen), var(--panel-height, 0px));
  transform: translate(var(--slide-offset, 100%), var(--slide-pan, 0px));
  border-radius: var(--slide-radius, 42px);
  overflow: clip;
}
.little-red {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 73fr) minmax(0, 27fr);
  background: #410b10;
  color: #fcfcef;
}
@font-face {
  font-family: 'Owned';
  src: url('fonts/Owned-Regular.woff') format('woff');
  font-display: swap;
}
.skate-stack {
  position: relative;
  z-index: 1;
  isolation: isolate;
  container-type: inline-size;
}
.skate-illustration {
  position: relative;
  z-index: 1;
  aspect-ratio: 1366 / 855;
  overflow: hidden;
  background: #5f913e;
  color: #ccb79c;
}
.skate-illustration img {
  position: absolute;
  top: -2.49%;
  left: 7.03%;
  width: 87.18%;
}
.skate-illustration h2 {
  position: absolute;
  inset: 11.43% .52% auto 0;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font: 400 7.52cqw/1.19 'Owned', 'Brick Sans', sans-serif;
}
@font-face {
  font-family: 'Splash';
  src: url('fonts/Splash-Regular.woff') format('woff');
  font-display: swap;
}
.skate-illustration-second {
  margin: 0;
  background: #aa485c;
  color: #0e0908;
}
.skate-illustration-second img {
  top: -10.27%;
  left: 0;
  width: 98.66%;
  transform: rotate(-1.74deg);
}
.skate-illustration-second figcaption {
  position: absolute;
  top: 16.33%;
  left: -26.57%;
  width: 59.87%;
  text-align: center;
  font: 400 4.53cqw/1.19 'Splash', cursive;
}
@font-face {
  font-family: 'Tanker';
  src: url('fonts/Tanker-Regular.woff2') format('woff2');
  font-display: swap;
}
.skate-witch {
  position: relative;
  z-index: 2;
  aspect-ratio: 1366 / 292;
  background: #cc51d3;
  color: #a9d154;
}
.skate-witch h2 {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: clip;
  font: 400 var(--witch-title-size, 20cqw)/.8 'Tanker', 'Owned', sans-serif;
}
.witch-title-text {
  white-space: nowrap;
}
.skate-witch h2.is-waiting {
  opacity: 0;
}
.witch-letter {
  display: inline-block;
}
.skate-process-card {
  position: relative;
  z-index: 3;
  background: #422f66;
}
.skate-process-card.has-flip::after {
  content: '';
  display: block;
  height: clamp(310px, 55svh, 620px);
}
.skate-process-stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.has-flip .skate-process-stage {
  position: sticky;
  top: min(0px, calc(100svh - 42.31cqw));
}
@media (prefers-reduced-motion: no-preference) {
  .skate-illustration {
    position: sticky;
    top: min(0px, calc(100svh - 62.59cqw));
  }
  .skate-witch {
    position: sticky;
    top: 0;
  }
}
.skate-process {
  position: relative;
  aspect-ratio: 1366 / 578;
  overflow: hidden;
  background: #422f66;
}
.skate-process video {
  position: absolute;
  top: -38.89%;
  left: 46.38%;
  width: 42.31%;
  height: auto;
  transform: rotate(-90deg);
}
@font-face {
  font-family: 'Cinema Outfit';
  src: url('fonts/CinemaOutfit-Regular.woff') format('woff');
  font-display: swap;
}
.skate-process-label {
  position: absolute;
  top: 5.44%;
  left: 1.18%;
  width: 27.49%;
  height: 91.56%;
  perspective: 1000px;
}
.skate-label-turn,
.skate-label-face {
  position: absolute;
  inset: 0;
}
.skate-label-turn {
  transform-style: preserve-3d;
  transform: rotateY(var(--witch-flip-angle, 0deg));
}
.skate-label-face {
  backface-visibility: hidden;
}
.skate-label-reverse {
  transform: rotateY(180deg);
}
.skate-label-reverse-art {
  position: absolute;
  top: 2.31%;
  left: 6.37%;
  width: 88.3%;
  height: 91.55%;
  background: url('art/skateboard-witch-reverse-art.jpg') center / 100% auto;
}
.skate-label-backing {
  position: absolute;
  inset: 2.31% auto auto 6.56%;
  width: 90.16%;
  height: 85.84%;
  background: linear-gradient(#ff8dd861, #ff8dd861),
    url('art/skateboard-witch-backing.jpg') center top / cover;
}
.skate-process-label img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.skate-process-label h2 {
  position: absolute;
  inset: 85.46% auto auto 1.42%;
  width: 93.44%;
  margin: 0;
  color: #422f66;
  text-align: center;
  text-transform: uppercase;
  font: 400 2.77cqw/1.17 'Cinema Outfit', 'Tanker', sans-serif;
}
.little-red img { width: 100%; height: auto }
.little-red-main h2 {
  padding: .55cqw .6cqw 0;
  font: 400 clamp(36px, 3.58cqw, 76px)/1 'Brick Sans', 'Arial Black', sans-serif;
  color: #712b2c;
  text-shadow: -.2em -.16em #000;
}
.little-red-main p {
  padding: .8cqw .6cqw 1.4cqw;
  font-size: clamp(15px, 1.48cqw, 28px);
  line-height: 1.35;
}
.little-red-studies {
  display: grid;
  align-content: start;
  gap: .8cqw;
  padding: 1.1cqw .9cqw 1.4cqw 1.7cqw;
}
.little-red figcaption { font-size: clamp(14px, 1.9cqw, 34px); line-height: 1.3 }
.little-red figcaption::before { content: '\2022'; margin: 0 .5em }
@font-face {
  font-family: 'Be Vietnam';
  src: url('fonts/BeVietnam-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-display: swap;
}
.trip {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 65.6fr) minmax(0, 34.4fr);
  background: #cc51d3;
  color: #d0cb4f;
}
.trip-main > .mallmory-reveal::before {
  content: '';
  position: absolute;
  top: 48.4%;
  left: 46.5%;
  width: 76.55%;
  height: 192.84%;
  transform: translate(-50%, -50%) rotate(-90deg);
  background: url('art/trip-backdrop.png') center / 100% 100% no-repeat;
}
.trip img { display: block; width: 100%; height: auto }
.trip-main > .mallmory-reveal img { position: relative }
.trip-caption {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: center;
}
.trip-caption h2 { margin: 0 }
.trip-caption p, .trip-studies figcaption {
  font: 800 clamp(12px, 1.49cqw, 32px)/1.17 'Be Vietnam', Arial, sans-serif;
}
.trip-caption p { padding: .4em; color: #bfd83e }
.trip-studies { display: grid; align-content: start }
.trip-studies figcaption {
  min-height: 2.92cqw;
  padding: .25em 0 .25em 20%;
  text-transform: uppercase;
}
.trip-studies figcaption::before { content: '•'; margin-right: .45em }
@media (max-width: 600px) {
  .trip { grid-template-columns: 1fr }
  .trip-caption { padding: 12px; grid-template-columns: 2fr 1fr }
  .trip-studies { gap: 12px }
}
@media (max-width: 600px) {
  .little-red { grid-template-columns: 1fr }
  .little-red-main h2, .little-red-main p { padding-inline: 16px }
  .little-red-studies { padding: 12px 16px 20px; gap: 12px }
}
.mallmory {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 38.4fr) minmax(0, 61.6fr);
  container-type: inline-size;
  background: #202636;
  color: #ccc2ba;
}
.mallmory-studies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0 1.6cqw;
  padding: .7cqw 2.2cqw 1.4cqw 1.5cqw;
}
.mallmory-studies h2, .mallmory-warm { grid-column: 1 / -1 }
.mallmory-studies h2 {
  margin-bottom: .65cqw;
  font: 400 6.4cqw/.95 Impact, 'Arial Black', sans-serif;
}
.mallmory img { width: 100%; height: auto }
.mallmory-warm img {
  aspect-ratio: 1.71;
  object-fit: cover;
  object-position: center;
  transform: rotate(180deg);
}
.mallmory-reveal { position: relative; overflow: clip }
.mallmory-shutters { display: none }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mallmory-reveal { view-timeline-name: --mallmory-image }
    .mallmory-reveal img {
      animation: mallmory-image-drift linear both;
      animation-timeline: --mallmory-image;
      animation-range: entry 0% entry 100%;
    }
    .mallmory-shutters {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      pointer-events: none;
    }
    .mallmory-shutters span {
      --panel-delay: 0%;
      background: #10131a;
      animation: mallmory-panel-reveal linear both;
      animation-timeline: --mallmory-image;
      animation-range: entry calc(8% + var(--panel-delay)) entry calc(52% + var(--panel-delay));
    }
    .mallmory-shutters span:nth-child(2) { --panel-delay: 10% }
    .mallmory-shutters span:nth-child(3) { --panel-delay: 20% }
    .mallmory-shutters span:nth-child(4) { --panel-delay: 30% }
    .mallmory-shutters span:nth-child(5) { --panel-delay: 40% }
  }
}
@keyframes mallmory-image-drift {
  from { translate: 0 -9%; scale: 1.19 }
  to { translate: 0 0; scale: 1 }
}
@keyframes mallmory-panel-reveal {
  from { opacity: 1 }
  to { opacity: 0; translate: 0 -100% }
}
.has-slide .slide-panel .mallmory-reveal img {
  animation: none;
  translate: 0 calc(-9% * (1 - var(--slide-fade, 0)));
  scale: calc(1.19 - .19 * var(--slide-fade, 0));
}
.has-slide .slide-panel .mallmory-shutters {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
}
.has-slide .slide-panel .mallmory-shutters span {
  --shutter-progress: clamp(0, calc(var(--slide-fade, 0) * 1.6 - var(--shutter-delay, 0)), 1);
  animation: none;
  background: var(--shutter-color, #410b10);
  opacity: calc(1 - var(--shutter-progress));
  translate: 0 calc(-100% * var(--shutter-progress));
}
.trip { --shutter-color: #521954 }
.has-slide .slide-panel .mallmory-shutters span:nth-child(2) { --shutter-delay: .15 }
.has-slide .slide-panel .mallmory-shutters span:nth-child(3) { --shutter-delay: .3 }
.has-slide .slide-panel .mallmory-shutters span:nth-child(4) { --shutter-delay: .45 }
.has-slide .slide-panel .mallmory-shutters span:nth-child(5) { --shutter-delay: .6 }
.mallmory figcaption, .mallmory-final p { font-size: clamp(12px, 1.95cqw, 36px); line-height: 1.35 }
.mallmory figcaption::before { content: '•'; margin-right: .45em }
.mallmory-final p { padding: .85cqw .5cqw .6cqw 0 }
@media (max-width: 600px) {
  .mallmory { grid-template-columns: 1fr }
  .mallmory-studies, .mallmory-final p { padding: 12px 16px }
  .mallmory-studies h2 { font-size: 12cqw; margin-bottom: 12px }
  .mallmory figcaption, .mallmory-final p { font-size: 16px }
}
.chapter-slider.is-active .chapter-slider-stage {
  --chapter-progress: 0;
  --chapter-bend: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  overflow-x: clip;
  perspective: 200svh;
  background: #d6cec0;
}
.chapter-slider.is-active .about,
.chapter-slider.is-active .contents-page {
  --page-shoulder: calc(1.5% * var(--chapter-bend));
  --page-far-shoulder: calc(100% - var(--page-shoulder));
  --page-bow: calc(1% * var(--chapter-bend));
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.chapter-slider.is-active .about {
  bottom: auto;
  --page-top: -6%;
  --page-bottom: calc(100% - 1.5% * var(--chapter-bend));
  transform-origin: center bottom;
  transform: translateY(calc(-1 * var(--chapter-pan, 0px) - 101svh * var(--chapter-progress)))
    rotateX(calc(13deg * var(--chapter-bend)))
    scaleX(calc(1 - .025 * var(--chapter-bend)));
}
.chapter-slider.is-active .contents-page {
  --distance-to-center: calc(1 - var(--chapter-progress));
  --page-top: calc(1.5% * var(--chapter-bend));
  --page-bottom: 100%;
  transform-origin: center top;
  transform: translateY(calc(101% * var(--distance-to-center) + var(--chapter-extra, 0px) - var(--chapter-pan, 0px)))
    rotateX(calc(-13deg * var(--chapter-bend)))
    scaleX(calc(1 - .025 * var(--chapter-bend)));
}
.chapter-slider.is-active .about,
.chapter-slider.is-active .contents-page {
  clip-path: shape(
    from var(--page-shoulder) var(--page-top),
    curve to var(--page-far-shoulder) var(--page-top) with 32% calc(var(--page-top) - 2 * var(--page-bow)) / 68% calc(var(--page-top) - 2 * var(--page-bow)),
    curve to var(--page-far-shoulder) var(--page-bottom) with calc(100% + var(--page-bow)) 30% / calc(100% + var(--page-bow)) 70%,
    curve to var(--page-shoulder) var(--page-bottom) with 68% calc(var(--page-bottom) + 2 * var(--page-bow)) / 32% calc(var(--page-bottom) + 2 * var(--page-bow)),
    curve to var(--page-shoulder) var(--page-top) with calc(0% - var(--page-bow)) 70% / calc(0% - var(--page-bow)) 30%,
    close
  );
}

.ruby-transition { position: relative; z-index: 2 }
.favourite { position: relative; background: #a12a05 }
.favourite.is-animated .favourite-stage { height: 130svh }
.favourite-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 100svh;
  overflow: clip;
  background: radial-gradient(ellipse at 15% 65%, #da4a04, #b12d04 55%, #721706);
  color: #f2bda7;
}
.favourite-stage img {
  position: absolute;
  top: 5%;
  left: 48%;
  width: max(78%, 650px);
  max-width: none;
  transform: translate(-50%, var(--favourite-drift, 0px));
  filter: grayscale(1) brightness(.35) contrast(1.35);
}
.favourite-stage h2 {
  position: relative;
  font: 400 clamp(42px, 15vw, 270px)/1 Impact, 'Arial Black', sans-serif;
  text-align: center;
  text-transform: uppercase;
}
.favourite-stage canvas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.favourite-stage img { z-index: 1 }
.favourite-stage h2, .favourite-front { z-index: 2 }
.favourite.is-animated canvas { display: block }
.favourite.is-animated h2 { opacity: 0 }
.saziel-page {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  overflow: clip;
  background: #c9c6bf;
  color: #401f18;
}
.saziel-sheet, .saziel-standing, .saziel-copy { position: absolute }
.saziel-sheet {
  top: 4%;
  left: 23.9%;
  width: 78.4%;
  max-width: none;
}
.saziel-sheet, .character-sheet { margin: 0 }
.saziel-sheet img, .character-sheet img { display: block; width: 100%; height: auto }
.character-study-label::before { content: '•'; margin-right: .5em }
.saziel-study-labels { color: #161412; font: 400 max(11px, 1.45cqw)/1.2 Arial, sans-serif }
.saziel-study-labels span { position: absolute }
.saziel-sketch-label { top: 69%; left: 1.6% }
.saziel-palette-label { top: 48%; left: 46%; font-size: max(9px, 1.12cqw) }
.saziel-standing {
  top: -5.8%;
  left: -10.3%;
  width: 52.2%;
}
.saziel-copy {
  top: 5.6%;
  left: 70.5%;
  width: 28%;
}
.saziel-copy h2 {
  margin: 0 0 1.3cqw .8cqw;
  font: 900 5.25cqw/.95 'Arial Black', Arial, sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.saziel-copy p { font: 400 2cqw/1.36 Arial, sans-serif }
@media (max-width: 600px) {
  .saziel-page { aspect-ratio: auto; padding: 24px 0 0 }
  .saziel-copy { position: static; width: auto; margin: 0 20px 24px }
  .saziel-copy h2 { font-size: 38px; margin-left: 0 }
  .saziel-copy p { font-size: 17px }
  .saziel-sheet { position: relative; inset: auto; width: 100% }
  .saziel-standing { display: none }
  .saziel-page { display: flex; flex-direction: column-reverse }
}
.chapter-slider.is-active + .ruby-transition { margin-top: -100svh }
.ruby-pixels, .ward-pixels {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  shape-rendering: crispEdges;
}
.ruby-transition.is-revealing .ruby-pixels,
.ward-transition.is-revealing .ward-pixels { display: block }
.ruby-transition.is-revealing .character-page,
.ward-transition.is-revealing .ward-page { clip-path: var(--pixel-clip) }

@font-face {
  font-family: 'Agrandir Grand';
  src: url('fonts/AgrandirGrand-Regular.woff') format('woff');
  font-display: swap;
}
.game-chapter { position: relative; isolation: isolate; z-index: 2 }
@media (prefers-reduced-motion: no-preference) {
  .game-chapter .game-intro { position: sticky; top: 0 }
}
.ward-transition { position: relative; z-index: 2 }
.ward-page {
  position: relative;
  aspect-ratio: 1366 / 593;
  overflow: hidden;
  container-type: inline-size;
  background: #1b211c;
  color: #ccc2ba;
}
.ward-page h2 {
  position: absolute;
  inset: 0 -5.88% auto;
  z-index: 1;
  margin: 0;
  text-align: center;
  font: 400 9.84cqw/1.25 'Agrandir Grand', 'Lilita One', sans-serif;
}
.ward-page h2 span { color: #5d2629 }
.ward-art {
  position: absolute;
  inset: 53.36% 0 0;
  display: grid;
  grid-template-columns: 451.49fr 454.9fr 459.61fr;
}
.ward-art img { width: 100%; height: 100%; object-fit: cover }
.ward-overlay {
  position: absolute;
  left: 44.55%;
  top: 56.72%;
  width: 10.3%;
}
.ward-console-story {
  position: relative;
  z-index: 2;
  background: #a6e572;
}
.ward-console-stage {
  position: relative;
  height: 100svh;
  overflow: clip;
  container-type: inline-size;
}
.ward-console {
  position: absolute;
  top: 47%;
  left: 50%;
  /* Size to the visible shell, which occupies about 97% by 67% of the PNG. */
  width: min(86%, 155svh);
  aspect-ratio: 1489 / 1056;
  margin: 0;
  transform: translate(-49.6%, -47.5%);
}
.ward-console img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: hue-rotate(180deg) saturate(1.8) brightness(1.45);
}
.ward-console-video {
  position: absolute;
  inset: 17.6% auto auto 16.7%;
  width: 65.4%;
  height: 60.1%;
  background: #070807;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .ward-console-story.is-scrubbing { height: 295svh; margin-bottom: -100svh }
  .ward-console-story.is-scrubbing .ward-console-stage { position: sticky; top: 0 }
}
.nightmare-rows {
  position: absolute;
  inset: 1.35% 1.9%;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 1.7svh;
}
.nightmare-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateX(calc(-1 * var(--nightmare-drift, 0%)));
}
.nightmare-track:nth-child(2) { transform: translateX(var(--nightmare-drift, 0%)) }
.nightmare-track img,
.nightmare-track::before,
.nightmare-track::after {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.nightmare-track img { left: 0 }
.nightmare-track::before,
.nightmare-track::after {
  content: '';
  background: url('art/nightmare-word.svg') center / 100% 100% no-repeat;
}
.nightmare-track::before { left: -103% }
.nightmare-track::after { left: 103% }
.ward-video-stack {
  position: relative;
  z-index: 3;
}
@media (prefers-reduced-motion: no-preference) {
  .ward-video-stack .ward-blast { position: sticky; top: 0 }
}
@font-face {
  font-family: 'Canva Impact';
  src: url('fonts/Impact-Canva.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
.ward-walkthrough {
  position: relative;
  z-index: 2;
  height: 100svh;
  container-type: inline-size;
  overflow: hidden;
  border-radius: clamp(16px, 3vw, 48px);
  background: #090b09;
}
.ward-walkthrough video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ward-walkthrough h2 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: rgb(255 255 255 / 60%);
  text-align: center;
  font: 700 18.24cqw/1.196 'Canva Impact', Impact, sans-serif;
  pointer-events: none;
}
.ward-blast h2 {
  white-space: nowrap;
  font-size: 26.4cqw;
}
.ward-ending { position: relative; z-index: 3; background: #0b1102 }
.ward-pdf-spread { position: relative; overflow: hidden }
.ward-pdf-spread > img { display: block; width: 100%; height: auto }
.environment-title {
  container-type: inline-size;
  view-timeline-name: --environment-entry;
}
.environment-title-mist { color: #4baed2; --curtain-color: #24143c }
.environment-title-hospital { color: #426126; --curtain-color: #080d04 }
.environment-number {
  position: absolute;
  right: var(--number-right, 81.8%);
  top: var(--number-baseline, 81%);
  font: 700 5cqw/.95 'Canva Impact', Impact, sans-serif;
  transform: translateY(-100%) scaleX(.72);
  transform-origin: right bottom;
}
.environment-title-hospital {
  --number-right: 84.5%;
  --number-baseline: 67.4%;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .environment-title::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--curtain-color);
      pointer-events: none;
      animation: var(--curtain-effect) linear both;
      animation-timeline: --environment-entry;
      animation-range: entry 8% entry 100%;
    }
    .environment-title-mist { --curtain-effect: environment-wipe }
    .environment-title-hospital { --curtain-effect: environment-fade }
  }
}
@keyframes environment-wipe {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) }
  to { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) }
}
@keyframes environment-fade {
  from { opacity: 1 }
  to { opacity: 0 }
}
.ward-making video {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--making-video-width);
  height: var(--making-video-height, 100%);
  object-fit: fill;
}
.ward-making-mist { --making-video-width: 69.7657% }
.ward-making-hospital {
  --making-video-width: 54.8316%;
  --making-video-height: 98.6979%;
}
.ward-making > .ward-making-title {
  position: absolute;
  inset: 0;
  height: 100%;
  pointer-events: none;
}
@media (orientation: portrait) {
  .ward-walkthrough video { object-fit: contain }
}

.character-page {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100svh;
  background: #fff;
}
.ruby-spread {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: clip;
}
.character-sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: 67%;
}
.character-sheet figcaption {
  color: #5d892f;
  text-align: center;
  font: 400 max(14px, 1.65cqw)/1.05 Arial, sans-serif;
}
.ruby-standing {
  position: absolute;
  z-index: 2;
  top: -.5%;
  left: -20.2%;
  width: 76.8%;
  pointer-events: none;
}
.ruby-title {
  position: absolute;
  z-index: 1;
  top: 2%;
  left: 28%;
  width: 23%;
}
.ruby-title img { width: 100% }
.ruby-bio {
  position: absolute;
  isolation: isolate;
  top: 71.5%;
  right: 1.25%;
  bottom: 0;
  left: 34.4%;
  padding: 1.8cqw .6cqw .6cqw 2cqw;
  color: #29201e;
  font-size: 1.8cqw;
  line-height: 1.37;
}
.ruby-bio::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #ffb3c7;
  clip-path: polygon(1% 0, 100% 17%, 99% 100%, 0 100%);
}
.character-sheet figcaption { position: relative; z-index: 1 }
@media (max-width: 760px), (max-aspect-ratio: 5/4) {
  .character-page { min-height: 0 }
  .ruby-spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 16px;
    aspect-ratio: auto;
    padding-block: 16px 24px;
  }
  .ruby-title, .ruby-standing, .ruby-bio, .character-sheet { position: static }
  .ruby-title, .character-sheet { grid-column: 1 / -1 }
  .ruby-title {
    justify-self: center;
    width: min(72%, 420px);
  }
  .character-sheet { width: 100% }
  .ruby-standing {
    width: 165%;
    max-width: none;
    margin-left: -32%;
  }
  .ruby-bio {
    position: relative;
    inset: auto;
    margin-right: 8px;
    padding: 14px 12px;
    font-size: clamp(15px, 3.6cqw, 22px);
  }
  .ruby-bio::before { clip-path: polygon(1% 0, 100% 3%, 99% 100%, 0 100%) }
}

.plate-image img { width: 100%; height: auto }

.chapter-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  mix-blend-mode: multiply;
}


.contents { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; padding-block: 67px 72px; scroll-margin-top: 20px }
.contents-head .label { color: var(--wine); margin-bottom: 12px }
.contents h2, .end h2 { font: 800 clamp(45px, 6vw, 90px)/.9 Arial, sans-serif; letter-spacing: -.085em }
.contents h2 em, .end h2 em { font: italic 400 .91em/1 var(--serif); letter-spacing: -.08em; color: var(--wine) }
.contents-head > p:last-child { margin-top: 16px; color: var(--muted) }
.chapter-index { padding: 0; list-style: none; border-top: 1px solid var(--rule) }
.index-link { display: grid; align-items: center; grid-template-columns: 38px 1fr auto; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--rule) }
.index-link:hover { color: var(--wine); background: #bb8b7e15 }
.index-number, .index-arrow { color: var(--wine) }
.index-name { font-size: clamp(18px, 2.2vw, 30px); font-weight: 750; letter-spacing: -.05em }
.index-arrow { font-size: 23px }

.chapter { --tone: #683849; --pale: #f0d7da; --accent: #e6aeb9 }
.chapter.slate { --tone: #263e4d; --pale: #dae4e2; --accent: #a5ced1 }
.chapter.olive { --tone: #373c2b; --pale: #e8e8d2; --accent: #c2c99a }
.chapter-banner { position: relative; isolation: isolate; background: var(--tone); color: var(--pale); overflow: hidden }
.chapter-head { position: relative; padding-block: clamp(26px, 3vw, 45px); padding-right: min(15vw, 140px) }
.chapter-head .label { color: var(--accent) }
.chapter-head h2 { position: relative; font: italic 400 clamp(42px, 6vw, 88px)/.93 var(--serif); letter-spacing: -.074em; margin-block: 8px }
.chapter-description { position: relative; font-size: clamp(15px, 1.5vw, 19px) }
.chapter-number { position: absolute; z-index: -1; right: 0; top: 50%; transform: translateY(-55%); color: #ffffff14; font: 700 clamp(100px, 21vw, 280px)/.8 Arial, sans-serif; letter-spacing: -.12em }

.project { background: var(--paper); color: var(--ink) }
.project + .project { border-top: 1px solid var(--rule) }
.project-details { display: grid; grid-template-columns: 1fr minmax(0, 36ch); align-items: end; gap: 8px 24px; width: min(100% - 112px, 1272px); margin-inline: auto; padding-block: 22px 27px }
.project-details .label { grid-column: 1 / -1; color: var(--tone) }
.project-details h3 { font: 800 clamp(28px, 4.3vw, 59px)/.95 Arial, sans-serif; letter-spacing: -.07em }
.project-description { color: var(--muted); max-width: 42ch }
.plate { position: relative }
.plate-image { position: relative; display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; cursor: zoom-in }
.plate-image:focus-visible { outline-offset: -5px }
.zoom-mark { position: absolute; z-index: 1; top: calc(100% + 4px); right: max(12px, calc((100% - 1272px) / 2)); display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--rule); background: var(--paper); color: var(--wine); font-weight: 700 }
.plate-image:hover .zoom-mark { background: var(--wine); color: white }
.plate figcaption { min-height: 40px; padding: 12px max(56px, calc((100% - 1184px) / 2)) 11px max(17px, calc((100% - 1272px) / 2)); color: var(--muted) }

#viewer-art figcaption { margin-top: 8px; color: var(--muted) }

.end { background: #252c2d; color: var(--paper) }
.end-inner { padding-top: 62px }
.end h2 { margin-top: 14px }
.end h2 em { color: #e6b6be }
.end h2 + p { max-width: 500px; margin-top: 20px; font-size: 18px }
.end-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-block: 18px; border-top: 1px solid #eee7d855; font: 600 11px/1.4 var(--mono); letter-spacing: .10em }

dialog { width: min(1060px, calc(100% - 24px)); max-height: 92dvh; padding: 0; border: 1px solid var(--rule); color: var(--ink); background: var(--paper) }
dialog::backdrop { background: #191717c9 }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; position: sticky; top: 0; padding: 10px 18px; border-bottom: 1px solid var(--rule); background: var(--paper) }
.viewer-bar button { border: 1px solid var(--rule); background: transparent; padding: 5px 10px }
.viewer-bar button:hover { border-color: var(--wine) }
#viewer-art { padding: 16px }
#viewer-art img { width: auto; max-width: 100%; margin-inline: auto }

@media (max-width: 980px) {
  .frame, .project-details { width: calc(100% - 54px) }
}
@media (max-width: 680px) {
  .frame, .project-details { width: calc(100% - 34px) }
  .mast { grid-template-columns: 1fr auto; min-height: 60px }
  .mast-edition { display: none }
  .mast nav { gap: 18px }
  .cover-sheet { width: 86vw }
  .project-details { grid-template-columns: 1fr; gap: 10px }
  .contents { grid-template-columns: 1fr; padding-block: 42px; gap: 20px }
  .chapter-head { padding-right: 32px }
  .end-inner { padding-top: 40px }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

.contact-footer {
  position: relative;
  z-index: 4;
  container-type: inline-size;
  min-height: 56.22vw;
  padding-top: 5.6vw;
  overflow: clip;
  color: #fafafa;
  background: linear-gradient(#0b110299, #0b110299),
    #0b1102 url('art/footer-illustration.jpeg') center / cover no-repeat;
}
.contact-footer-links {
  display: grid;
  grid-template-columns: 1.08fr .9fr 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding-inline: 4.7%;
}
.contact-footer-links h2 {
  margin: 0 0 .52em;
  font: 400 clamp(18px, 3.4cqw, 58px)/1 'Lilita One', sans-serif;
  text-transform: uppercase;
}
.contact-footer-links a {
  display: block;
  width: fit-content;
  padding: .42em .35em;
  color: inherit;
  font: 400 clamp(12px, 1.6cqw, 24px)/1.25 var(--mono);
  text-decoration: none;
  text-transform: uppercase;
}
.contact-footer-links a:hover { text-decoration: underline }
.contact-footer-signup {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.contact-footer-signup input, .contact-footer-signup button {
  min-width: 0;
  border: 0;
  border-radius: 4px;
  padding: .65em;
  font: 600 clamp(13px, 1.25cqw, 20px)/1.2 Arial, sans-serif;
}
.contact-footer-signup input { flex: 1 1 8ch; background: #fafafa; color: #171714 }
.contact-footer-signup button { background: #d4ea94; color: #171714; cursor: pointer }
.contact-footer-wordmark {
  display: flex;
  justify-content: center;
  margin-top: 1cqw;
  color: inherit;
  font: 400 26cqw/.95 'Lilita One', sans-serif;
  letter-spacing: -.035em;
  text-decoration: none;
}
.contact-footer-wordmark span { transition: transform .32s ease-out }
.footer-dock {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.4cqw, 22px);
  margin: clamp(12px, 2cqw, 32px) auto;
  width: fit-content;
  padding: clamp(9px, 1.2cqw, 22px);
  border: 1px solid rgb(255 255 255 / .38);
  border-radius: clamp(18px, 2cqw, 32px);
  background: linear-gradient(160deg, rgb(255 255 255 / .22), rgb(255 255 255 / .07));
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .36), 0 8px 24px rgb(0 0 0 / .22);
}
.footer-dock a {
  position: relative;
  display: block;
  width: clamp(48px, 4.7cqw, 82px);
  color: #fafafa;
}
.footer-dock :is(img, svg) {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center bottom;
  transform: scale(var(--dock-scale, 1));
  filter: drop-shadow(0 3px 5px #0008);
}
.footer-dock span {
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 22px);
  left: 50%;
  translate: -50%;
  padding: 4px 8px;
  border-radius: 6px;
  background: #161611;
  font: 600 12px/1.2 Arial, sans-serif;
  pointer-events: none;
  visibility: hidden;
}
.footer-dock a:hover span, .footer-dock a:focus-visible span { visibility: visible }
@media (prefers-reduced-motion: no-preference) {
  .footer-dock :is(img, svg) { transition: transform .16s ease-out }
  .footer-dock a:focus-visible :is(img, svg) { transform: scale(1.25) }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .contact-footer-wordmark span:hover { transform: translateY(-.08em) rotate(-4deg) }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .contact-footer {
      animation: footer-curve linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
  }
}
@keyframes footer-curve {
  from { clip-path: ellipse(64% 88% at 50% 88%); transform: translateY(6svh) }
  to { clip-path: ellipse(100% 145% at 50% 88%); transform: translateY(0) }
}
@media (max-width: 600px) {
  .contact-footer { padding: 24px 0 }
  .contact-footer-links { grid-template-columns: 1fr 1fr }
  .contact-footer-links > :last-child { grid-column: 1 / -1 }
  .contact-footer-wordmark { margin-top: 20px }
  .footer-dock { display: grid; grid-template-columns: repeat(3, 48px); gap: 8px }
  .footer-dock a { width: 100% }
}