@font-face {
  font-family: "Joker";
  src: url("../assets/fonts/Joker.woff2") format("woff2"), url("../assets/fonts/Joker.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Nighthawk";
  src: url("../assets/fonts/Nighthawk.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Biro Script";
  src: url("../assets/fonts/biro_script_plus.woff2") format("woff2"), url("../assets/fonts/biro_script_plus.otf") format("opentype");
  font-display: swap;
}

@font-face { font-family: "Dirtyline"; src: url("../assets/fonts/kdk/Dirtyline.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Thunder"; src: url("../assets/fonts/kdk/Thunder-LC.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Thunder"; src: url("../assets/fonts/kdk/Thunder-BoldLC.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Rattani"; src: url("../assets/fonts/greymen/Rattani.woff2") format("woff2"), url("../assets/fonts/greymen/Rattani.otf") format("opentype"); font-display: swap; } 
@font-face { font-family: "Interlope"; src: url("../assets/fonts/qmm/Interlope.otf") format("opentype"); font-display: swap; } 

@font-face { font-family: "DM Mono"; src: url("../assets/fonts/dmmono/DMMono-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../assets/fonts/dmmono/DMMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../assets/fonts/dmmono/DMMono-Medium.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  
  
  --paper-rgb:   241 234 223;  
  --flieder-rgb: 184 12 227;   
  --mint-rgb:    155 153 255;  
  --rot-rgb:     253 61 6;     
  --ink-rgb:     44 24 16;     

  --paper:   #F1EADF;
  --flieder: #B80CE3;
  --mint:    #9B99FF;
  --rot:     #FD3D06;
  --ink:     #2C1810;
  --sand:    #BEA691;          

  --rule: rgb(var(--ink-rgb) / .18);

  --font-display:  "Joker", "Arial Black", sans-serif;
  --font-sub:      "Nighthawk", Georgia, serif;
  --font-mono:     "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-scribble: "Biro Script", "Bradley Hand", cursive;

  --gutter: clamp(16px, 4vw, 56px);

  
  --cursor-default: url("../assets/cursor/Fork.png") 30 2, auto;
  --cursor-hover:   url("../assets/cursor/Egg.png") 16 16, pointer;

  --ease-paper: cubic-bezier(.2, .8, .2, 1);
  --shadow-paper:
    0 1px 1px rgb(var(--ink-rgb) / .1),
    0 14px 30px -12px rgb(var(--ink-rgb) / .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, ul, ol, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

body {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#main { overflow-x: clip; }

[hidden] { display: none !important; }

::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px dashed var(--rot); outline-offset: 4px; }

body::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: .16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.17  0 0 0 0 0.12  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgb(var(--ink-rgb) / .09) 100%);
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  17% { transform: translate(-6%, 4%); }
  33% { transform: translate(4%, -8%); }
  50% { transform: translate(-10%, 2%); }
  67% { transform: translate(8%, 6%); }
  83% { transform: translate(-3%, -5%); }
}

@media (hover: hover) and (pointer: fine) {
  html, body { cursor: var(--cursor-default); }

  a, button, [role="button"], label, summary, select,
  [data-cursor="hover"] {
    cursor: var(--cursor-hover);
  }
}

.display, h1 {
  font-family: var(--font-display);
  font-weight: normal;
  line-height: .88;
  letter-spacing: -.01em;
}

.subhead, h2 {
  font-family: var(--font-sub);
  font-weight: normal;
  line-height: 1.05;
  font-size: clamp(22px, 2.6vw, 34px);
}

.mono, .body-copy { font-family: var(--font-mono); }
.body-copy { max-width: 52ch; }
.body-copy p + p { margin-top: 1.1em; }

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.scribble {
  font-family: var(--font-scribble);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: var(--rot);
  display: inline-block;
  transform: rotate(var(--tilt, -3deg));
  transform-origin: left center;
  white-space: nowrap;
}

.link-ink {
  display: inline-block;
  padding-bottom: 2px;
  background: linear-gradient(var(--rot), var(--rot)) left bottom / 0 2px no-repeat;
  transition: background-size .4s var(--ease-paper), color .3s;
}
.link-ink:hover { background-size: 100% 2px; color: var(--rot); }

.highlight-mint    { background: linear-gradient(transparent 55%, rgb(var(--mint-rgb) / .8) 55% 88%, transparent 88%); }
.highlight-flieder { background: linear-gradient(transparent 55%, rgb(var(--flieder-rgb) / .7) 55% 88%, transparent 88%); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 24px;
  padding: 18px var(--gutter) 14px;
  background: rgb(var(--paper-rgb) / .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  transform: rotate(-2deg);
  transform-origin: left center;
}
.brand img { width: 30px; height: auto; transition: transform .5s var(--ease-paper); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.brand__name { font-family: var(--font-sub); font-size: 20px; line-height: 1; }

.nav { justify-self: center; }
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item:nth-child(2n) { transform: translateY(6px); }
.nav__item:nth-child(3n) { transform: translateY(-3px); }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  position: relative;
  isolation: isolate;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: 3px;
  height: 9px;
  background: var(--mint);
  z-index: -1;
  transform: scaleX(0) rotate(-1.5deg);
  transform-origin: left;
  transition: transform .35s var(--ease-paper);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1) rotate(-1.5deg); }
.nav__ext { font-size: 11px; }

.nav__link--soon { position: relative; cursor: default; }
.nav__link--soon::after { display: none; }
.shop-soon { display: inline-block; margin-left: 6px; color: var(--rot); font-size: 15px; letter-spacing: 0; text-transform: none; rotate: -6deg; white-space: nowrap; }
.nav__link--soon .shop-soon { position: absolute; left: 50%; top: 100%; margin: 0; translate: -40% -4px; font-size: 14px; pointer-events: none; } 
@media (max-width: 900px) { .nav__link--soon .shop-soon { position: static; translate: 0 -2px; margin-left: 10px; font-size: 18px; } }
.footer-link--soon { cursor: default; }
.footer-link--soon:hover { color: inherit; background-size: 0 1.5px; }
.site-footer .shop-soon { display: block; margin: 2px 0 0 4px; font-size: 18px; }

.nav__caret { font-size: 10px; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; transition: transform .3s; }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  min-width: 250px;
  padding: 18px 18px 16px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--flieder);
  transform: rotate(1.2deg) translateY(-6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .35s var(--ease-paper), visibility .25s;
  text-transform: none;
  letter-spacing: 0;
}
.dropdown::before { 
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav__item--has-dropdown:hover .dropdown,
.nav__item--has-dropdown:focus-within .dropdown,
.nav__item--has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: rotate(1.2deg) translateY(0);
}
.nav__item--has-dropdown:hover .nav__caret,
.nav__item--has-dropdown.is-open .nav__caret { transform: rotate(180deg); }

.dropdown__note { position: absolute; right: -10px; top: -24px; font-size: 22px; }
.dropdown__list { display: grid; gap: 4px; }
.dropdown__link {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--rule);
  transition: padding .25s var(--ease-paper), color .2s;
}
.dropdown__link:hover { color: var(--rot); padding-left: 6px; }
.dropdown__count { opacity: .5; font-size: 12px; }
.dropdown__empty { font-size: 13px; opacity: .6; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  transform: rotate(3deg);
}
.lang-switch button {
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  opacity: .75; 
  transition: opacity .2s, border-color .2s, background .2s;
}
.lang-switch button:hover { opacity: 1; }
.lang-switch button[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--ink);
  background: var(--mint); 
}

.nav-toggle { display: none; }

@media (max-width: 1180px) and (min-width: 901px) {
  .site-header { gap: 14px; }
  .brand__name { font-size: 16px; }
  .nav__list { gap: 6px 12px; font-size: 11.5px; letter-spacing: .02em; }
}
@media (max-width: 1060px) and (min-width: 901px) {
  .brand__name { display: none; } 
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 14px; }
  .nav-toggle {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    padding: 4px 10px;
    transform: rotate(-2deg);
  }
  .nav { grid-column: 1 / -1; justify-self: stretch; display: none; }
  .site-header.is-nav-open .nav { display: block; }
  .nav__list { flex-direction: column; gap: 10px; padding: 12px 0 8px; font-size: 15px; }
  .nav__item { flex-wrap: wrap; }
  .nav__item:nth-child(n) { transform: none; }
  .nav__item:nth-child(odd) { padding-left: 18px; }
  .dropdown,
  .nav__item--has-dropdown:hover .dropdown {
    position: static;
    display: none;
    flex-basis: 100%;
    min-width: 0;
    margin-top: 10px;
    box-shadow: 4px 4px 0 var(--flieder);
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__item--has-dropdown.is-open .dropdown { display: block; transform: none; }
}

.paper-photo {
  position: relative;
  background: #fff;
  padding: 10px 10px 34px;
  box-shadow: var(--shadow-paper);
  transform: rotate(var(--tilt, 0deg));
}
.paper-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(.92); }
.paper-photo figcaption { position: absolute; left: 14px; bottom: 4px; font-size: 22px; color: var(--ink); }

.tape {
  position: absolute;
  width: 92px;
  height: 26px;
  background: rgb(var(--mint-rgb) / .6);
  mix-blend-mode: multiply;
  z-index: 2;
  
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 82%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 18%);
}
.tape--tl  { top: -10px; left: -24px; transform: rotate(-38deg); }
.tape--tr  { top: -8px; right: -22px; transform: rotate(32deg); background: rgb(var(--flieder-rgb) / .6); }
.tape--top { top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); }

.blob {
  position: absolute;
  z-index: -1;
  border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
}
.blob--mint    { background: var(--mint); width: 38%; aspect-ratio: 1; }
.blob--flieder { background: var(--flieder); width: 22%; aspect-ratio: 1.2; border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%; }

.scribble-line path {
  fill: none;
  stroke: var(--rot);
  stroke-width: 3;
  stroke-linecap: round;
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100svh - 70px);
  overflow-x: clip;
  padding: clamp(20px, 3vw, 36px) var(--gutter) clamp(48px, 6vw, 80px);
  text-align: center;
}
.hero__meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.hero__title { margin-top: clamp(48px, 9vh, 120px); }
.hero__brand { margin: auto 0 0; padding-top: clamp(40px, 8vh, 100px); font-family: var(--font-display); font-weight: normal; font-size: clamp(34px, 10.4vw, 200px); line-height: .9; letter-spacing: -.01em; text-align: center; white-space: nowrap; color: var(--rot); } 
.hero > .hero__fields { margin: clamp(14px, 2vw, 26px) 0 0; text-align: center; font-size: clamp(11px, 1vw, 14px); letter-spacing: .2em; }
.hero__strip {
  display: flex;
  justify-content: center;
  margin-top: clamp(16px, 2.5vw, 36px);
  padding: 0 4vw;
}
.hero__strip img {
  width: clamp(110px, 15vw, 220px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0 -1.2vw;
  rotate: var(--tilt, 0deg);
  box-shadow: 0 10px 24px -12px rgb(var(--ink-rgb) / .45);
  transition: rotate .4s var(--ease-paper), translate .4s var(--ease-paper);
}
.hero__strip img:hover { rotate: 0deg; translate: 0 -10px; position: relative; z-index: 2; }
.hero__foot {
  width: 100%;
  margin-top: auto;
  padding-top: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr minmax(0, 46ch) 1fr;
  align-items: end;
  gap: 24px;
  text-align: left;
}
.hero__fields { font-size: 12px; font-weight: normal; }
.hero__intro { grid-column: 2; margin: 0; text-align: center; }
.hero__foot .link-ink { justify-self: end; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__meta > :first-child { display: none; }
  .hero__strip img { margin: 0 -3vw; width: 30vw; }
  .hero__strip img:nth-child(n+4) { display: none; }
  .hero__foot { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 48px; }
  .hero__intro { grid-column: auto; }
  .hero__foot .link-ink { justify-self: center; }
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px) 16px;
  padding: clamp(60px, 8vw, 120px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.index-grid__head { grid-column: 1 / span 6; display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }

.index-card {
  --card-bg: var(--flieder);
  --card-fg: var(--ink);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-areas: "no no" "title title" "meta collage";
  align-items: end;
  gap: 8px 18px;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--card-bg);
  color: var(--card-fg);
  rotate: var(--card-tilt, 0deg);
  box-shadow: 6px 8px 0 rgb(var(--ink-rgb) / .9);
  transition: rotate .5s var(--ease-paper), translate .5s var(--ease-paper);
}
.index-card::before { content: ""; position: absolute; top: -12px; left: 18%; width: 92px; height: 26px; background: rgb(var(--paper-rgb) / .7); rotate: -4deg; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.index-card:hover { rotate: 0deg; translate: 0 -6px; }
.index-card__no { grid-area: no; align-self: start; font-size: 12px; opacity: .75; }
.index-card__title { grid-area: title; font-size: clamp(34px, 5vw, 84px); line-height: .95; }
.index-card__meta { grid-area: meta; align-self: end; font-size: 13px; max-width: 30ch; }
.index-card__collage { position: relative; grid-area: collage; height: clamp(170px, 17vw, 240px); }
.collage-pic { position: absolute; height: 100%; box-shadow: 0 14px 26px -12px rgb(0 0 0 / .55); transition: rotate .5s var(--ease-paper), translate .5s var(--ease-paper); }
.collage-pic img { display: block; width: auto; height: 100%; max-width: none; border-radius: 6px; }
.collage-pic--1 { left: 0; top: 2%; rotate: -8deg; }
.collage-pic--2 { left: 50%; translate: -50% 0; top: 8%; rotate: 4deg; z-index: 2; }
.collage-pic--3 { right: 0; top: 0; rotate: 10deg; z-index: 1; }
.collage-pic .tape--top { width: 70px; height: 20px; }
.index-card:hover .collage-pic--1 { rotate: -14deg; translate: -10px -6px; }
.index-card:hover .collage-pic--2 { rotate: 1deg; translate: -50% -12px; }
.index-card:hover .collage-pic--3 { rotate: 16deg; translate: 12px -4px; }
.index-card--a { grid-column: 1 / span 7; --card-bg: var(--flieder); --card-tilt: -1.2deg; }
.index-card--b { grid-column: 8 / span 5; margin-top: 70px; --card-bg: var(--mint); --card-tilt: 1.4deg; }
.index-card--c { grid-column: 2 / span 5; --card-bg: var(--rot); --card-fg: var(--paper); --card-tilt: 1deg; }
.index-card--d { grid-column: 7 / span 6; margin-top: 50px; --card-bg: var(--ink); --card-fg: var(--paper); --card-tilt: -1.6deg; }
.index-card--d { box-shadow: 6px 8px 0 var(--flieder); }

@media (max-width: 900px) {
  .index-grid { grid-template-columns: 1fr; }
  .index-grid > * { grid-column: 1 !important; margin-top: 0 !important; }
  .index-card { grid-template-columns: 1fr; grid-template-areas: "no" "collage" "title" "meta"; }
  .index-card__collage { height: 44vw; max-height: 260px; margin: 10px 0 14px; }
}

.page-head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 20px;
  padding: clamp(40px, 7vw, 100px) var(--gutter) clamp(32px, 5vw, 64px);
}
.page-head__kicker { grid-column: 1 / span 4; border-top: 1px solid var(--ink); padding-top: 8px; }
.page-head__title { grid-column: 1 / span 11; font-size: clamp(56px, 12vw, 190px); }
.page-head__sub { grid-column: 6 / span 6; }
.page-head__note { position: absolute; right: var(--gutter); top: clamp(60px, 9vw, 130px); }

.page-text {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  padding: 0 var(--gutter) clamp(48px, 7vw, 100px);
}
.page-text .body-copy { grid-column: 1 / span 8; max-width: 42ch; font-family: var(--font-sub); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.38; }
.page-text .body-copy p { margin: 0 0 .8em; }
.page-text__aside { grid-column: 10 / span 3; align-self: start; }

.quote {
  font-family: var(--font-sub);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  margin: 2em 0 .4em;
  max-width: 28ch;
}
.quote + cite { font-style: normal; font-size: 13px; opacity: .7; }

.cv { display: grid; gap: 14px; margin-top: 12px; }
.cv li { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; border-top: 1px dotted var(--rule); padding-top: 10px; font-size: 14px; }
.cv__year { opacity: .7; }

@media (max-width: 900px) {
  .page-head, .page-text { grid-template-columns: 1fr; }
  .page-head > *, .page-text > * { grid-column: 1 !important; }
  .page-head__note { position: static; justify-self: end; }
  .page-text__aside { margin-top: 40px; }
  .cv li { grid-template-columns: 1fr; gap: 2px; }
}

.about-intro__title { font-size: clamp(40px, 5.6vw, 88px); margin-bottom: .45em; }
.about-intro__lead { font-family: var(--font-sub); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.3; }
.about-intro__accent { padding: .6em .8em; background: rgb(var(--mint-rgb) / .55); rotate: -.6deg; }

.life {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(20px, 3vw, 48px);
  padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(60px, 8vw, 120px);
  border-top: 1px solid var(--rule);
}
.life__title { grid-column: 1 / -1; font-size: clamp(48px, 7vw, 120px); }
.life__title::after { content: ""; display: block; width: 160px; height: 10px; margin-top: 10px; background: var(--flieder); rotate: -2deg; }
.life__head { border-top: 2px solid var(--ink); padding-top: 8px; }
.life .cv li { grid-template-columns: 1fr; gap: 2px; } 
.life__col:nth-of-type(2) { margin-top: 60px; }
.life__col:nth-of-type(3) { margin-top: 20px; }
@media (max-width: 900px) {
  .life { grid-template-columns: 1fr; }
  .life__col:nth-of-type(n) { margin-top: 0; }
}

.anim-lead { font-family: var(--font-sub); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; }
.anim-project {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: clamp(24px, 3vw, 44px);
  padding: clamp(60px, 8vw, 120px) var(--gutter);
}
.anim-project__head { grid-column: 1 / -1; position: relative; }
.anim-project__year { position: absolute; top: -.6em; left: 0; }
.anim-project__title { font-size: clamp(48px, 8.5vw, 150px); }
.anim-project__text { grid-column: 2 / span 5; font-size: 16px; }
.anim-project__claim {
  grid-column: 6 / span 7;
  font-size: clamp(30px, 4vw, 64px);
  line-height: .95;
  text-transform: uppercase;
}
.anim-project__body { grid-column: 3 / span 5; }
.anim-project__line { font-family: var(--font-sub); font-size: clamp(20px, 1.8vw, 26px); }
.anim-project__questions { grid-column: 7 / span 6; display: grid; gap: 18px; }
.anim-project__questions li {
  font-family: var(--font-scribble);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.05;
  rotate: -2deg;
}
.anim-project__questions li:nth-child(2) { rotate: 1.5deg; margin-left: 8%; }

.anim-project--drop { border-top: 1px solid var(--rule); }
.anim-project--drop .anim-project__title,
.anim-project--drop .anim-project__claim,
.anim-project--drop .anim-project__questions li { color: var(--rot); }

.anim-project--degree { background: var(--mint); }
.anim-project--degree .anim-project__head { grid-column: 1 / span 6; }
.anim-project--degree .anim-project__number { font-size: clamp(120px, 24vw, 380px); line-height: .8; }
.anim-project--degree .anim-project__body { grid-column: 7 / span 5; align-self: end; }
.anim-project__lead { font-family: var(--font-sub); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; }

@media (max-width: 900px) {
  .anim-project { grid-template-columns: 1fr; }
  .anim-project > * { grid-column: 1 !important; }
  .anim-project__questions li:nth-child(2) { margin-left: 0; }
}

.video-frame {
  grid-column: 2 / span 10;
  position: relative;
  padding: clamp(26px, 3vw, 40px) clamp(10px, 1.2vw, 16px);
  background:
    radial-gradient(circle, var(--paper) 0 42%, transparent 46%) 0 6px / 26px 16px repeat-x,
    radial-gradient(circle, var(--paper) 0 42%, transparent 46%) 0 calc(100% - 6px) / 26px 16px repeat-x,
    var(--ink);
  box-shadow: 12px 12px 0 var(--frame-shadow, var(--flieder));
  rotate: -.6deg;
}
.video-frame__screen { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.video-frame__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 20px;
  color: var(--paper);
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 3px), 
    radial-gradient(ellipse at center, transparent 40%, rgb(0 0 0 / .55)),
    var(--poster, var(--ink));
  text-align: center;
}
.video-frame__play {
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 104px);
  aspect-ratio: 1;
  padding-left: .2em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: clamp(24px, 3vw, 40px);
  transition: scale .3s var(--ease-paper), background .3s;
}
.video-frame__poster:hover .video-frame__play { scale: 1.1; background: rgb(255 255 255 / .12); }
.video-frame__cta { font-family: var(--font-scribble); font-size: clamp(24px, 2.6vw, 38px); rotate: -3deg; }
.video-frame__note { font-size: 11px; letter-spacing: .08em; opacity: .7; }
.video-frame__label { 
  position: absolute;
  top: -18px;
  left: 6%;
  z-index: 2;
  padding: 4px 14px;
  background: rgb(var(--mint-rgb) / .9);
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  rotate: -4deg;
  white-space: nowrap;
}
.anim-project--drop .video-frame { --poster: #5a0001; --frame-shadow: var(--rot); }
.anim-project--degree .video-frame { --poster: var(--ink); --frame-shadow: var(--paper); rotate: .8deg; }
.anim-project--degree .video-frame__label { background: var(--flieder); }
@media (max-width: 900px) {
  .video-frame { box-shadow: 6px 6px 0 var(--frame-shadow, var(--flieder)); }
}

.photo-overlay {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 70vh, 720px);
  margin: 0 var(--gutter) clamp(48px, 7vw, 100px);
  padding: 40px var(--gutter);
  background:
    linear-gradient(rgb(var(--ink-rgb) / .45), rgb(var(--ink-rgb) / .55)),
    var(--cover, var(--ink)) center / cover;
}
.photo-overlay__quote {
  max-width: 22ch;
  text-align: center;
  font-family: var(--font-scribble);
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 1.05;
  color: var(--paper);
  rotate: -2deg;
  text-shadow: 0 2px 18px rgb(0 0 0 / .5);
}

.scrapbook {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(20px, 4vw, 60px) var(--gutter) clamp(60px, 8vw, 110px);
}
.scrapbook__stage { width: 100%; max-width: 1260px; filter: drop-shadow(0 30px 30px rgb(var(--ink-rgb) / .28)); }
.scrapbook__book { margin: 0 auto; }
.scrapbook__controls { display: flex; align-items: center; gap: 22px; }
.scrapbook__btn {
  padding: 10px 18px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 3px 3px 0 var(--flieder);
  transition: translate .2s var(--ease-paper), box-shadow .2s var(--ease-paper), background .2s;
}
.scrapbook__btn:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--flieder); background: var(--mint); }
.scrapbook__count { min-width: 6ch; text-align: center; }
.scrapbook__hint { font-size: clamp(20px, 1.8vw, 26px); color: var(--rot); }

.book-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgb(160 130 80 / .06) 0 1px, transparent 2px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgb(160 130 80 / .05) 0 1px, transparent 2px) 0 0 / 31px 27px,
    #f7f1e3;
  color: var(--ink);
}
.book-page--left::after,
.book-page--right::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  pointer-events: none;
}
.book-page--left::after  { right: 0; background: linear-gradient(to left, rgb(60 40 10 / .22), transparent); }
.book-page--right::after { left: 0;  background: linear-gradient(to right, rgb(60 40 10 / .22), transparent); }

.book-page__inner {
  position: absolute;
  inset: 7% 9% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7%;
}
.book-page--two .book-page__inner { justify-content: space-around; }
.book-page--two .book-photo:nth-child(1) { align-self: flex-start; }
.book-page--two .book-photo:nth-child(2) { align-self: flex-end; }

.book-photo {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  padding: 3.5%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15), 0 8px 14px -8px rgb(0 0 0 / .35);
  rotate: var(--tilt, 0deg);
}
.book-page--one .book-photo { width: 100%; }
.book-page--one .book-photo[style*="aspect-ratio"] { height: auto; }
.book-page--two .book-photo { width: 84%; }
.book-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book-photo .tape { width: 34%; height: 9%; min-height: 14px; }

.book-page__no { position: absolute; bottom: 3.5%; left: 50%; translate: -50% 0; font-size: 11px; opacity: .45; }
.book-notes { font-size: clamp(22px, 2vw, 30px); color: rgb(var(--ink-rgb) / .55); }
.book-flower {
  position: absolute;
  right: -6%;
  bottom: -4%;
  width: 34%;
  rotate: var(--rot, 0deg);
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 rgb(0 0 0 / .2));
}

.book-page--cover {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 3px),
    var(--ink);
  color: var(--paper);
}
.book-cover {
  position: absolute;
  inset: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  text-align: center;
  border: 1.5px solid rgb(var(--paper-rgb) / .35);
  outline: 1px solid rgb(var(--paper-rgb) / .2);
  outline-offset: -10px;
  padding: 8%;
}
.book-cover__title { font-size: clamp(34px, 5vw, 72px); }
.book-cover__sub { color: var(--mint); font-size: clamp(22px, 2.4vw, 34px); white-space: normal; }
.book-cover .book-photo { width: 62%; }
.book-cover__logo { width: 22%; margin-top: 6%; }

.scrapbook--static { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.scrapbook--static .book-page { aspect-ratio: 52 / 70; }

.gallery {
  padding: 0 var(--gutter) clamp(80px, 10vw, 140px);
  columns: 3 260px;
  column-gap: clamp(20px, 3vw, 40px);
}
.gallery .paper-photo {
  break-inside: avoid;
  margin-bottom: clamp(24px, 3vw, 44px);
  padding-bottom: 10px;
}
.gallery .paper-photo img { height: auto; }
.gallery__group { column-span: all; margin: 32px 0 20px; }
.gallery__empty { column-span: all; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px);
  padding: 0 var(--gutter) clamp(80px, 10vw, 140px);
}
.project-card { display: grid; gap: 14px; align-content: start; }
.project-card:nth-child(3n + 2) { margin-top: 48px; }
.project-card .paper-photo { transition: transform .5s var(--ease-paper); }
.project-card:hover .paper-photo { transform: rotate(calc(var(--tilt, 0deg) * -1)) translateY(-6px); }
.project-card .paper-photo img { aspect-ratio: 4 / 5; }
.project-card__title { font-size: clamp(32px, 4vw, 56px); }
.project-card__meta { font-size: 12px; opacity: .7; }

.sticker-layer {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 40;
}
.sticker {
  position: absolute;
  height: auto;
  rotate: var(--rot-deg, 0deg); 
  filter: drop-shadow(0 6px 8px rgb(var(--ink-rgb) / .18));
  user-select: none;
  -webkit-user-drag: none;
}

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 48px;
  padding: clamp(70px, 9vw, 140px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.contact__intro { grid-column: 1 / span 4; align-self: start; display: grid; gap: 18px; justify-items: start; position: sticky; top: 120px; }
.contact__title { font-size: clamp(52px, 7vw, 120px); }
.contact__note { margin-top: 8px; }

.contact__bottle { width: clamp(120px, 11vw, 180px); height: auto; margin: 6px 0 0 18%; rotate: 9deg;
  filter: drop-shadow(6px 8px 0 rgb(var(--ink-rgb) / .12)); transition: rotate .5s var(--ease-paper); }
.contact__bottle:hover { rotate: -3deg; }

.contact-card {
  grid-column: 6 / span 7;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  padding: clamp(28px, 4vw, 52px);
  background:
    linear-gradient(rgb(255 255 255 / .35), rgb(255 255 255 / .35)),
    var(--mint);
  border: 1.5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--flieder);
  transform: rotate(-.8deg);
}
.contact-card::before { 
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgb(var(--ink-rgb) / .35);
  pointer-events: none;
}
.contact-card__stamp {
  position: absolute;
  top: -16px;
  right: 28px;
  padding: 4px 12px;
  background: var(--paper);
  border: 1.5px solid var(--rot);
  color: var(--rot);
  font-size: 12px;
  letter-spacing: .14em;
  transform: rotate(4deg);
}

.field { display: grid; gap: 6px; position: relative; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-sub);
  font-size: 20px;
  line-height: 1;
}
.field label::after { content: " *"; color: var(--rot); font-family: var(--font-mono); font-size: 14px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 8px 2px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10'><path d='M1 2 L7 8 L13 2' fill='none' stroke='%23112C1F' stroke-width='1.6'/></svg>") right 4px center / 12px no-repeat;
}

.field textarea {
  resize: vertical;
  min-height: 170px;
  line-height: 32px;
  padding: 0 10px;
  border: 1.5px solid var(--ink);
  background:
    repeating-linear-gradient(transparent 0 31px, rgb(var(--ink-rgb) / .22) 31px 32px) 0 0 / 100% 32px local,
    var(--paper);
}
.field textarea::placeholder { color: rgb(var(--ink-rgb) / .4); }

.field input:focus,
.field select:focus { border-bottom-color: var(--rot); background-color: rgb(var(--paper-rgb) / .5); }
.field textarea:focus { border-color: var(--rot); }

.was-validated .field :invalid { border-color: var(--rot); }
.was-validated .field:has(:invalid) label { color: var(--rot); }

.contact-card__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.contact-card__status { font-size: 13px; min-height: 1.5em; }
.contact-card__status[data-state="error"] { color: var(--rot); }
.contact-card__status[data-state="ok"] { font-family: var(--font-scribble); font-size: 24px; }

.btn-ink {
  margin-left: auto;
  padding: 14px 28px 12px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 4px 4px 0 var(--rot);
  transition: transform .25s var(--ease-paper), box-shadow .25s var(--ease-paper), background .2s;
}
.btn-ink:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 6px 6px 0 var(--rot); }
.btn-ink:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--rot); }
.btn-ink:disabled { opacity: .6; }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
  .contact__intro, .contact-card { grid-column: 1; }
  .contact__intro { position: static; }
  .contact__bottle { width: 92px; margin: -44px 6% 0 auto; justify-self: end; }
  .contact-card { grid-template-columns: 1fr; transform: none; box-shadow: 6px 6px 0 var(--flieder); }
}

.hp-field {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-footer {
  position: relative;
  border-top: 1.5px solid var(--ink);
  overflow: hidden;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px 24px;
  padding: clamp(48px, 6vw, 80px) var(--gutter) 40px;
}
.site-footer__sign { display: grid; gap: 14px; justify-items: start; align-content: start; }
.site-footer__bye { font-size: clamp(48px, 6vw, 96px); }

.footer-head { margin-bottom: 14px; opacity: .6; }
.site-footer__col ul { display: grid; gap: 8px; }
.footer-link {
  display: inline-flex;
  gap: 6px;
  font-family: var(--font-sub);
  font-size: 22px;
  line-height: 1.1;
  background: linear-gradient(var(--rot), var(--rot)) left bottom / 0 1.5px no-repeat;
  transition: background-size .35s var(--ease-paper), color .2s;
}
.footer-link span[aria-hidden] { font-family: var(--font-mono); font-size: 12px; }
.footer-link:hover { color: var(--rot); background-size: 100% 1.5px; }

.site-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 14px 0;
  border-top: 1px dotted var(--rule);
}
.site-footer__base small { font-size: 11px; letter-spacing: .06em; opacity: .55; }
.site-footer__base .footer-link { font-family: var(--font-mono); font-size: 12px; }

.parade {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(160px, 19vw, 300px);
  margin-top: 8px;
  padding: 0 var(--gutter);
  border-bottom: 14px solid var(--ink); 
  background: linear-gradient(transparent 72%, rgb(var(--ink-rgb) / .08));
}
.parade__figure {
  --overlap: clamp(-40px, -2.4vw, -12px); 
  height: var(--h, 90%);
  width: auto;
  z-index: var(--z, 3);
  margin-inline: calc(var(--overlap) / 2);
  margin-bottom: -8px; 
  transform-origin: 50% 100%;
  transition: translate .45s var(--ease-paper); 
  animation: museum-sway var(--sway-dur, 3.8s) ease-in-out var(--sway-delay, 0s) infinite alternate;
  
  filter: drop-shadow(-10px 4px 7px rgb(var(--ink-rgb) / .28)) drop-shadow(0 2px 2px rgb(var(--ink-rgb) / .18));
}
.parade__figure:hover { translate: 0 -14px; }

@keyframes museum-sway {
  from { rotate: calc(var(--base, 0deg) - 1deg); scale: 1; }
  to   { rotate: calc(var(--base, 0deg) + 1deg); scale: 1.012; }
}

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__sign { grid-column: 1 / -1; }
  .parade { height: 34vw; padding: 0 6px; }
  .parade__figure { margin-inline: -2.2vw; }
  
  .parade__figure:nth-child(1), .parade__figure:nth-child(6), .parade__figure:nth-child(9) { display: none; }
}

body.page-salon {
  --fg: var(--paper);
  color: var(--paper);
  background: linear-gradient(180deg, #0A0A0A 0%, #0d1a13 26%, #1d0b07 58%, #6e0203 84%, var(--rot) 100%);
}
body.page-salon::after { mix-blend-mode: overlay; opacity: .32; }
body.page-salon::before { background: radial-gradient(120% 80% at 50% 30%, transparent 50%, rgb(0 0 0 / .45) 100%); }
body.page-salon ::selection { background: var(--rot); color: var(--paper); }
body.page-salon :focus-visible { outline-color: var(--mint); }

.page-salon .site-header { background: rgb(10 10 10 / .72); border-bottom-color: rgb(var(--paper-rgb) / .14); }
.page-salon .nav__link::after { background: var(--rot); }
.page-salon .lang-switch button[aria-pressed="true"] { color: var(--ink); border-color: var(--mint); }
.page-salon .dropdown { color: var(--ink); }
.page-salon .nav-toggle { border-color: var(--paper); }

.salon-room { position: relative; isolation: isolate; }
.salon-head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 18px;
  align-items: end;
  padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(36px, 5vw, 80px);
}
.salon-head__title { grid-column: 1 / span 8; font-size: clamp(56px, 10vw, 168px); }
.salon-subtitle { 
  grid-column: 1 / span 9;
  justify-self: start;
  font-family: var(--font-scribble);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  color: var(--paper);
  rotate: -3deg;
  margin: -.2em 0 .2em .3em;
}
.salon-head__note { grid-column: 10 / span 3; grid-row: 1; justify-self: end; color: var(--flieder); margin-bottom: 1em; }

.wall-text { grid-column: 1 / span 7; margin-top: clamp(16px, 3vw, 40px); text-align: left; }
.wall-text__body {
  font-family: var(--font-sub);
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.35;
  max-width: 40ch;
}
.dropcap {
  float: left;
  display: block;
  width: 5.4em; 
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: .2em .4em .05em 0;
}
.dropcap--light { filter: invert(1); } 
.dropcap-quote { float: left; margin-right: .08em; font-size: 2.6em; line-height: .9; } 

.salon {
  --gap: clamp(16px, 2vw, 32px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 6px;
  grid-auto-flow: dense;
  column-gap: var(--gap);
  align-items: start;
  padding: 0 var(--gutter) clamp(80px, 10vw, 160px);
}
.salon-item { position: relative; }
.salon-item--xl { grid-column: span 5; }
.salon-item--l  { grid-column: span 4; }
.salon-item--m  { grid-column: span 3; }
.salon-item--s  { grid-column: span 2; }
.salon-item--note { grid-column: span 3; z-index: 3; }

.png-frame {
  position: relative;
  display: block;
  width: 100%;
  rotate: var(--tilt, 0deg);
  filter: drop-shadow(6px 8px 0 rgb(0 0 0 / .4)); 
  
  transition: translate .5s var(--ease-paper), scale .5s var(--ease-paper), filter .5s var(--ease-paper);
}
.png-frame__art {
  position: absolute;
  object-fit: cover;
  background: #1a1208;
}
.png-frame__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; 
  pointer-events: none;
}
.png-frame:hover,
.png-frame:focus-visible {
  z-index: 4;
  translate: 0 -10px;
  scale: 1.04;
  filter: drop-shadow(12px 16px 0 rgb(0 0 0 / .36)) brightness(1.06);
}

.edge-flowers { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.edge-flower {
  position: absolute;
  width: clamp(130px, 17vw, 260px);
  rotate: var(--rot, 0deg);
  opacity: .9;
  filter: drop-shadow(4px 6px 0 rgb(0 0 0 / .3));
}
.edge-flower--left  { left: clamp(-130px, -6vw, -50px); }
.edge-flower--right { right: clamp(-130px, -6vw, -50px); }

.critters { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.critter { position: absolute; top: 0; left: 0; translate: -50% -50%; }
.critter--crawler { filter: drop-shadow(4px 6px 0 rgb(0 0 0 / .35)); animation: critter-legs .05s steps(2) infinite; }
.critter--butterfly img { display: block; transform-origin: 50% 50%; animation: wing-flap .08s ease-in-out infinite alternate; filter: drop-shadow(5px 8px 0 rgb(0 0 0 / .3)); }
@keyframes critter-legs { to { rotate: 3deg; } }      
@keyframes wing-flap { from { scale: 1 1; } to { scale: .35 1; } } 

.salon-item--note { pointer-events: none; }
.wall-note {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: calc(100% - var(--x, 0%)); 
  rotate: var(--tilt, -3deg);
  font-family: var(--font-scribble);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  color: var(--flieder);
  text-shadow: 0 1px 0 rgb(0 0 0 / .4);
}

.lamps { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lamp {
  position: absolute;
  width: clamp(80px, 10vw, 160px);
}
.lamp--right { right: calc(var(--gutter) * -0.4); }
.lamp--left  { left: calc(var(--gutter) * -0.4); scale: -1 1; } 
.lamp img {
  position: relative;
  width: 100%;
  animation: lamp-flicker var(--flicker, 4s) steps(1, end) var(--delay, 0s) infinite;
}

.lamp__glow {
  position: absolute;
  left: 27%;
  top: 68%;
  width: 380%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 196 110 / .42) 0%, rgb(255 160 70 / .16) 28%, transparent 62%);
  mix-blend-mode: screen;
  animation: lamp-glow var(--flicker, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes lamp-flicker { 
  0%, 100% { filter: brightness(1) drop-shadow(0 0 14px rgb(255 190 100 / .55)); }
  7%  { filter: brightness(.82) drop-shadow(0 0 6px rgb(255 190 100 / .3)); }
  9%  { filter: brightness(1.05) drop-shadow(0 0 16px rgb(255 190 100 / .6)); }
  41% { filter: brightness(.9) drop-shadow(0 0 10px rgb(255 190 100 / .4)); }
  43% { filter: brightness(.7) drop-shadow(0 0 4px rgb(255 190 100 / .2)); }
  45% { filter: brightness(1) drop-shadow(0 0 14px rgb(255 190 100 / .55)); }
  78% { filter: brightness(.94) drop-shadow(0 0 12px rgb(255 190 100 / .45)); }
}
@keyframes lamp-glow {
  0%, 100% { opacity: .9; scale: 1; }
  8%  { opacity: .55; }
  10% { opacity: .95; }
  42% { opacity: .5; scale: .96; }
  46% { opacity: .9; }
  70% { opacity: 1; scale: 1.04; }
}

html.has-curtain { overflow: hidden; }
.curtain {
  position: fixed;
  inset: 0;
  z-index: 10000; 
  overflow: hidden;
  background: #0A0A0A;
  pointer-events: none;
}

.curtain { background: #1c0a06; }
.curtain img { position: absolute; top: 0; user-select: none; }
.curtain__left, .curtain__right { width: max(60vw, 46vh); height: auto; }
.curtain__left  { left: 0; z-index: 1; }
.curtain__right { right: 0; }
.curtain__top {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0;
  height: clamp(110px, 17vw, 260px);
  background-repeat: repeat-x; background-position: center top; background-size: auto 100%;
  filter: drop-shadow(0 10px 10px rgb(0 0 0 / .45));
}
.curtain__note {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 3;
  translate: -50% -50%;
  rotate: -4deg;
  font-family: var(--font-scribble);
  font-size: clamp(30px, 4vw, 56px);
  color: var(--paper);
  white-space: nowrap;
  text-shadow: 0 2px 12px rgb(0 0 0 / .7);
}
.curtain.is-open { opacity: 0; transition: opacity .7s ease; } 

.curtain[data-curtain="gruen"] img { height: 100%; }
.curtain__middle { left: 0; width: 100%; object-fit: cover; }
.curtain[data-curtain="gruen"] .curtain__left  { left: 0; width: auto; min-width: 52vw; object-fit: cover; object-position: right center; }
.curtain[data-curtain="gruen"] .curtain__right { right: 0; width: auto; min-width: 52vw; object-fit: cover; object-position: left center; }

@media (max-width: 900px) {
  .salon { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .salon-item--xl   { grid-column: span 6; }
  .salon-item--l    { grid-column: span 4; }
  .salon-item--m    { grid-column: span 3; }
  .salon-item--s    { grid-column: span 2; }
  .salon-item--note { grid-column: span 3; }
  .lamp { width: clamp(60px, 16vw, 100px); }
  .salon-head { grid-template-columns: 1fr; }
  .salon-head > * { grid-column: 1 !important; grid-row: auto !important; }
  .salon-head__note { justify-self: start; }
}
@media (max-width: 560px) {
  .salon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .salon-item--xl, .salon-item--l, .salon-item--note { grid-column: span 4; }
  .salon-item--m, .salon-item--s { grid-column: span 2; }
  .dropcap { width: 4.2em; }
}

html.has-lightbox { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 56px clamp(16px, 8vw, 120px) 76px;
  border: 0;
  background: transparent;
  color: var(--paper);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop {
  background: rgb(var(--ink-rgb) / .97);
  backdrop-filter: blur(6px);
}

.lightbox__frame {
  padding: 0;
  background: none;
  outline: 0;
  box-shadow: none;
}
.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(84vw, 1400px);
  max-height: calc(100dvh - 200px);
  border: 0;
  background: none;
}
.lightbox__count { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; opacity: .75; }

.lightbox__btn,
.lightbox__close {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgb(var(--paper-rgb) / .5);
  background: rgb(0 0 0 / .35);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: background .25s, border-color .25s, translate .25s var(--ease-paper);
}
.lightbox__btn { top: 50%; translate: 0 -50%; }
.lightbox__btn--prev { left: clamp(10px, 2vw, 32px); }
.lightbox__btn--next { right: clamp(10px, 2vw, 32px); }
.lightbox__btn--prev:hover { translate: -4px -50%; }
.lightbox__btn--next:hover { translate: 4px -50%; }
.lightbox__close { top: 14px; right: clamp(10px, 2vw, 32px); padding: 8px 12px; }
.lightbox__btn:hover,
.lightbox__close:hover { background: var(--rot); border-color: var(--rot); }

@media (max-width: 900px) {
  .lightbox { padding: 56px 12px 96px; }
  .lightbox__img { max-width: 100%; max-height: calc(100dvh - 190px); }
  .lightbox__btn { top: auto; bottom: 18px; translate: none; }
  .lightbox__btn--prev:hover, .lightbox__btn--next:hover { translate: none; }
  .lightbox__label { display: none; }
  .lightbox__count { bottom: 30px; }
}

.page-salon .site-footer { border-top-color: rgb(var(--paper-rgb) / .25); }
.page-salon .footer-link:hover { color: var(--flieder); background-image: linear-gradient(var(--flieder), var(--flieder)); }
.page-salon .site-footer__base { border-top-color: rgb(var(--paper-rgb) / .2); }
.page-salon .site-footer .scribble { color: var(--flieder); }

.page-salon .parade {
  border-bottom-color: #1c0c05; 
  background: linear-gradient(transparent 72%, rgb(0 0 0 / .28));
}

.wanted-stage {
  position: relative;
  display: grid;
  place-items: start center;
  
  min-height: calc(100svh - 72px);
  padding: clamp(18px, 3svh, 36px) var(--gutter) clamp(18px, 3svh, 36px);
  overflow: hidden;
}

.wanted {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  text-align: center;
  color: var(--ink);
  rotate: -.8deg;
  transform-origin: 50% 18px; 
  perspective: 1800px;        
}

.wanted__flipper {
  position: relative;
  transform-style: preserve-3d;
}
.wanted__face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 22px 18px rgb(0 0 0 / .25)); 
}
.wanted__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2svh, 18px);
  padding: clamp(46px, 7svh, 64px) clamp(26px, 6vw, 64px) clamp(20px, 3svh, 30px);
}
.wanted__sheet,
.wanted__face--back,
.tab,
.tab-gap::before {
  
  background:
    linear-gradient(115deg, transparent 38%, rgb(0 0 0 / .07) 40%, transparent 43%),
    linear-gradient(64deg, transparent 57%, rgb(255 255 255 / .55) 59.5%, transparent 62%),
    linear-gradient(162deg, transparent 21%, rgb(0 0 0 / .06) 23%, transparent 26%),
    linear-gradient(18deg, transparent 69%, rgb(0 0 0 / .08) 71%, transparent 74%),
    linear-gradient(95deg, transparent 47%, rgb(255 255 255 / .4) 49%, transparent 51%),
    radial-gradient(ellipse at 28% 18%, rgb(255 255 255 / .55), transparent 60%),
    radial-gradient(ellipse at 82% 92%, rgb(0 0 0 / .09), transparent 55%),
    #f1ece0;
}

.wanted__face--back { background-color: #ebe3d1; }

.wanted__secret {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  padding-right: 6px; 
  text-align: left;
  font-family: var(--font-scribble);
  font-size: clamp(17px, min(1.75vw, 2.5svh), 23px);
  line-height: 1.42;
  color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--ink-rgb) / .3) transparent;
}
.wanted__secret p { margin: 0; }
.wanted__secret p + p { margin-top: .75em; }
.wanted__secret-last {
  font-size: 1.35em;
  color: var(--rot);
  rotate: -2deg;
  transform-origin: left;
}
.wanted__turn {
  margin-top: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--flieder);
}

.wanted__sheet {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.6svh, 16px);
  padding: clamp(30px, 4.5svh, 50px) clamp(16px, 2.6vw, 30px) clamp(12px, 2svh, 20px);
}

.thumbtack {
  position: absolute;
  top: -38px;
  left: 50%;
  z-index: 5;
  width: clamp(60px, 6.5vw, 84px); 
  height: auto;
  translate: -50% 0;
  rotate: 8deg;
  filter: drop-shadow(5px 7px 4px rgb(0 0 0 / .35));
  pointer-events: none;
}

.wanted__title {
  font-size: clamp(50px, min(9vw, 9.5svh), 116px);
  line-height: .85;
  color: var(--rot);
}
.wanted__photo {
  position: relative;
  margin: 0;
  
  width: 100%;
  height: clamp(220px, 43svh, 500px);
  border: 2px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.wanted__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 30%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 30%);
  filter: url(#photocopy); 
  opacity: 0;
  transition: opacity .4s;
}
.wanted__photo img.is-loaded { opacity: 1; }

.wanted__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgb(var(--ink-rgb) / .35) 0 .7px, transparent 1.1px) 0 0 / 3px 3px;
  mix-blend-mode: multiply;
  opacity: .5;
}
.wanted__question { font-size: clamp(24px, min(3.2vw, 4.4svh), 44px); line-height: 1.1; }

.tabs {
  display: flex;
  align-items: flex-start;
  height: clamp(110px, 17svh, 170px);
  margin: 0;
  padding: 0;
  border-top: 2px dashed rgb(var(--ink-rgb) / .4);
  list-style: none;
}
.tabs li { flex: 1; min-width: 0; height: 100%; }
.tabs li.tab-gap--wide { flex: 2.2; }
.tab {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0 16px;
  writing-mode: vertical-rl;
  overflow: hidden;
  font-family: var(--font-scribble);
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1;
  color: rgb(var(--ink-rgb) / .8);
  border-left: 1.5px dashed rgb(var(--ink-rgb) / .25);
  transform-origin: 50% 0;
  
  clip-path: polygon(0 0, 100% 0, 100% 96%, 82% 100%, 64% 95%, 46% 100%, 28% 96%, 10% 100%, 0 95%);
  transition: rotate .35s var(--ease-paper), color .2s;
}
.tabs li:nth-child(3n + 1) .tab { rotate: 1.4deg; }
.tabs li:nth-child(3n + 2) .tab { rotate: -1deg; }

.tab--action { color: var(--rot); font-size: clamp(17px, 1.7vw, 23px); }
.tab--action:hover, .tab--action:focus-visible { rotate: 7deg; }
.tab--deco { cursor: inherit; }
.tab--fish {
  position: relative;
  padding: 0;
  writing-mode: horizontal-tb; 
  container-type: size;
}
.tab--fish img {
  
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%; 
  width: min(78cqh, 200cqw);
  height: auto;
  max-width: none;
  rotate: 90deg;                       
  opacity: .85;
  mix-blend-mode: multiply;            
}
.tabs li:nth-child(even) .tab--fish img { rotate: -90deg; }

.fish-swim { position: fixed; z-index: 9000; pointer-events: none; will-change: transform; }
.fish-swim__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 82% 50%;
  animation: fish-wiggle .26s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / .25));
}
@keyframes fish-wiggle {
  from { transform: skewY(-6deg) scaleX(1.02); }
  to   { transform: skewY(6deg) scaleX(.98); }
}
.tab--fish { cursor: pointer; }
.tab-gap::before { 
  content: "";
  display: block;
  height: var(--stub, 14px);
  border-left: 1.5px dashed rgb(var(--ink-rgb) / .25);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 90% 80%, 78% 48%, 64% 100%, 50% 62%, 36% 92%, 22% 52%, 10% 86%, 0 60%);
}

.wanted .poster-butterfly { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; }
.wanted .poster-butterfly img { display: block; animation: wing-flap .09s ease-in-out infinite alternate; filter: drop-shadow(4px 6px 0 rgb(0 0 0 / .25)); }

.flower-field { position: absolute; inset: 0; pointer-events: none; }
.flower-field img {
  position: absolute;
  transform-origin: 50% 100%;
  rotate: var(--rot, 0deg);
  will-change: transform, opacity;
}

@media (max-width: 760px) {
  .wanted__photo { height: clamp(220px, 43svh, 400px); }
  .tab-optional { display: none; }
}

.about-intro { row-gap: clamp(28px, 4vw, 56px); }
.about-intro .note-card {
  grid-column: 3 / span 8;
  max-width: none;
  position: relative;
  padding: clamp(28px, 4vw, 52px);
  background: #fbf8f0;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 18px 30px -18px rgb(0 0 0 / .4);
  rotate: .5deg;
}

#lebenslauf, #kontakt { scroll-margin-top: 90px; }
.life--messy { position: relative; }
.life--messy .life__title { grid-column: 1 / span 2; }
.life__note { align-self: end; justify-self: start; font-size: clamp(24px, 2.4vw, 34px); color: var(--rot); }
.life--messy .life__title + .life__note { grid-column: 3; }
.life--messy .life__col {
  position: relative;
  padding: 30px 22px 22px 48px;
  background:
    linear-gradient(90deg, transparent 34px, rgb(var(--rot-rgb) / .35) 34px 35.5px, transparent 35.5px),
    repeating-linear-gradient(transparent 0 27px, rgb(var(--ink-rgb) / .09) 27px 28px) 0 12px,
    #fbf8ef;
  box-shadow: 4px 6px 0 rgb(var(--ink-rgb) / .12);
}
.life--messy .life__col:nth-of-type(1) { rotate: -1.6deg; }
.life--messy .life__col:nth-of-type(2) { rotate: 1.1deg; margin-top: 50px; }
.life--messy .life__col:nth-of-type(3) { rotate: -.7deg; margin-top: 16px; }
.life--messy .life__head {
  border: 0;
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--font-sub);
  font-size: clamp(22px, 2vw, 28px);
  text-decoration: underline wavy var(--rot) 2px;
  text-underline-offset: 7px;
}
.life--messy .cv li { border-top: 1px dashed rgb(var(--ink-rgb) / .2); }
.life--messy .cv__year { font-family: var(--font-scribble); font-size: 22px; color: var(--rot); opacity: 1; rotate: -2deg; transform-origin: left; }
.life__pin {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b8ffe9 0 18%, var(--mint) 45%, #2f8f72 100%);
  box-shadow: 2px 4px 0 rgb(0 0 0 / .2);
}
.life--messy .tape { width: 90px; }

@media (max-width: 900px) {
  .about-intro .note-card { grid-column: 1; min-width: 0; rotate: 0deg; }
  .about-intro__title { font-size: clamp(30px, 9vw, 44px); overflow-wrap: anywhere; hyphens: auto; }
  .life--messy .life__title, .life--messy .life__title + .life__note { grid-column: 1; }
  .life--messy .life__col:nth-of-type(n) { margin-top: 0; }
}

.site-header { grid-template-columns: auto 1fr auto auto; }
.header-social { display: flex; gap: 6px; align-items: center; }
.nav__item--social { display: none; gap: 10px; align-items: center; } 
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto auto; }
  .header-social { display: none; }
  .nav__item--social { display: flex; }
}
.nav__icon { display: inline-flex; padding: 4px; border-radius: 50%; transition: color .2s, translate .2s var(--ease-paper); }
.nav__icon:hover { color: var(--rot); translate: 0 -2px; }

.cookie-note {
  position: fixed;
  left: clamp(12px, 3vw, 32px);
  bottom: clamp(12px, 3vw, 32px);
  z-index: 9000; 
  width: min(360px, calc(100vw - 24px));
  padding: 22px 22px 18px;
  background: #fbf8ef;
  color: var(--ink);
  rotate: -1.5deg;
  box-shadow: 0 2px 2px rgb(0 0 0 / .12), 0 20px 30px -16px rgb(0 0 0 / .45);
  font-size: 13px;
  line-height: 1.5;
}
.cookie-note .tape--top { top: -12px; }
.cookie-note__title { font-size: 28px; color: var(--rot); margin-bottom: 6px; }
.cookie-note__actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.cookie-note .btn-ink { margin-left: 0; padding: 10px 18px 8px; }

.legal__body { grid-column: 3 / span 7 !important; max-width: 68ch; }
.legal__body h2 { font-size: clamp(20px, 2vw, 26px); margin: 1.8em 0 .5em; }
.legal__body h2:first-of-type { margin-top: .6em; }
.legal__en-note { opacity: .6; }
.legal__date { margin-top: 2.4em; opacity: .7; }
mark.ph { background: rgb(var(--flieder-rgb) / .45); color: inherit; padding: 0 .2em; } 

.tv {
  grid-column: 3 / span 8;
  justify-self: center;
  position: relative;
  width: min(620px, 100%);
  aspect-ratio: 736 / 910; 
  margin: 0;
}

.tv__screen {
  position: absolute;
  left: 14%;
  top: 12.3%;
  width: 57.8%;
  height: 42.4%;
  overflow: hidden;
  border-radius: 9% / 11%;
  background: #050505;
}
.tv__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv__screen::after { 
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(0 0 0 / .45) 100%);
  mix-blend-mode: multiply;
}
.tv__set { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(10px 14px 0 rgb(0 0 0 / .18)); }
.tv .video-frame__poster { padding: 8%; gap: 8px; }
.tv .video-frame__cta { font-size: clamp(20px, 2.2vw, 30px); }
.tv .video-frame__note { font-size: 9px; }

.tv__screen { container-type: size; }
.tv .video-frame__poster { gap: min(8px, 3cqh); }
.tv .video-frame__play { width: min(clamp(64px, 8vw, 104px), 34cqh); font-size: min(clamp(24px, 3vw, 40px), 13cqh); }
.tv .video-frame__cta { font-size: min(clamp(20px, 2.2vw, 30px), 12cqh); white-space: nowrap; }
.tv .video-frame__note { font-size: min(9px, 4.4cqh); }
.tv .video-frame__label { position: absolute; top: -14px; left: 6%; }
.tv__note { position: absolute; right: -4%; bottom: 8%; font-size: clamp(18px, 1.8vw, 24px); color: var(--rot); rotate: -6deg; white-space: normal; max-width: 14ch; }
.anim-project--drop .tv { --poster: #5a0001; }
.anim-project--degree .tv { --poster: var(--ink); }

.storyboard { grid-column: 1 / -1; }
.storyboard__title { margin-bottom: 14px; }
.storyboard__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 22px 18px; }
.storyboard__frame { position: relative; margin: 0; padding: 8px 8px 26px; background: #fff; box-shadow: var(--shadow-paper); rotate: var(--tilt, 0deg); }
.storyboard__frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.storyboard__no { position: absolute; left: 10px; bottom: 6px; opacity: .6; }

.loops { position: relative; padding: clamp(30px, 5vw, 70px) var(--gutter) 0; text-align: center; }
.loops__title { font-size: clamp(44px, 6vw, 96px); }
.loops__note { color: var(--rot); font-size: clamp(22px, 2.2vw, 30px); }
.loops__row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0px, 2vw, 30px); margin-top: 10px; }
.loops__gif {
  height: clamp(220px, 34vw, 420px);
  width: auto;
  rotate: var(--tilt, 0deg);
  mix-blend-mode: multiply; 
}
.loops__gif:nth-child(2) { height: clamp(250px, 38vw, 470px); }

.salon-head__titles { grid-column: 1 / span 9; margin: 0; }
.salon-head__titles .salon-subtitle { margin: .1em 0 0 .3em; }

.book-page--image { background: var(--ink); }
.book-cover__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book-photo { cursor: inherit; }
.photo-overlay { position: relative; }
.egg-hotspot { position: absolute; top: 0; right: 0; width: 70px; height: 70px; opacity: 0; } 
.camera-flash { position: fixed; inset: 0; z-index: 9500; background: #fff; pointer-events: none; }
.egg-bubble { position: absolute; top: 24px; right: 24px; z-index: 3; color: var(--paper); font-size: clamp(28px, 3vw, 44px); text-shadow: 0 2px 10px rgb(0 0 0 / .6); }
.polaroid {
  position: fixed;
  z-index: 9400;
  width: clamp(170px, 18vw, 240px);
  margin: 0;
  padding: 10px 10px 46px;
  background: #fbfbf7;
  box-shadow: 0 2px 3px rgb(0 0 0 / .2), 0 22px 30px -14px rgb(0 0 0 / .5);
  pointer-events: none;
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 12px; right: 12px; bottom: 8px; white-space: normal; font-size: 20px; line-height: 1; color: var(--ink); }

.comm-lead { font-family: var(--font-sub); font-size: clamp(20px, 2vw, 28px); line-height: 1.3; }
.comm-accent { padding: .6em .8em; background: rgb(var(--mint-rgb) / .55); rotate: -.5deg; }

.cover-table {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
  min-height: calc(100svh - 70px);
  padding: clamp(30px, 4vw, 60px) var(--gutter);
  overflow: hidden;
  background: #000; 
  color: var(--paper);
}
.cover-info { position: relative; z-index: 4; display: grid; gap: 14px; align-content: center; justify-items: start; }
.cover-info__nav { margin: 0; }
.cover-info__nav .link-ink { color: var(--paper); }
.cover-info__title { margin: 0; font-size: clamp(56px, 8vw, 140px); line-height: .85; color: var(--paper); }
.cover-info__text { max-width: 40ch; font-family: var(--font-sub); font-size: clamp(18px, 1.55vw, 24px); line-height: 1.38; }
.cover-info__text p { margin: 0; }
.cover-info__text p + p { margin-top: .8em; }
.cover-info__spotify { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 12px 20px; border-radius: 999px; background: var(--mint); color: var(--ink); font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--flieder); transition: translate .2s, box-shadow .2s; }
.cover-info__spotify:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--flieder); }
.cover-table__hint { margin: 0; color: rgb(var(--paper-rgb) / .75); font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 900px) { .cover-table { grid-template-columns: 1fr; } }

.ipod-scene {
  position: relative;
  justify-self: center;
  height: min(calc(100svh - 110px), 1100px);
  aspect-ratio: 1 / 1;
  max-width: 100%;
}
.ipod-scene__napkin { position: absolute; left: 14%; top: 2%; width: 72%; rotate: -6deg; filter: drop-shadow(4px 8px 6px rgb(0 0 0 / .25)); }
.ipod-scene__phones { position: absolute; left: 57%; top: 1%; width: 70%; rotate: 7deg; z-index: 3; filter: drop-shadow(6px 10px 5px rgb(0 0 0 / .35)); pointer-events: none; }
.ipod {
  position: absolute;
  left: 23%;
  top: 1%;
  z-index: 2;
  width: 57%;
  aspect-ratio: 736 / 1245; 
  rotate: 3deg;
  filter: drop-shadow(14px 24px 18px rgb(0 0 0 / .42));
}
.ipod__body { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.ipod__screen {
  position: absolute;
  left: 6.8%;
  top: 4.2%;
  width: 86.2%;
  height: 39.1%;
  z-index: 0;
  overflow: hidden;
  border-radius: 3%;
  background: #111;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(9px, 1.3vh, 14px);
  color: #111;
}
.ipod__screen { --bar-h: 2.1em; --scrub-h: .55em; }

.ipod__screen::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: var(--cover-bg, none) center / cover;
  filter: blur(16px) saturate(1.3) brightness(.9);
  transition: background-image .3s;
}
.ipod__view { position: absolute; inset: var(--bar-h) 0 var(--scrub-h); overflow: hidden; }
.ipod__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgb(0 0 0 / .45)); }

.ipod__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6em;
  height: var(--bar-h);
  padding: 0 4%;
  background: linear-gradient(rgb(255 255 255 / .94), rgb(206 214 222 / .9));
  border-bottom: 1px solid rgb(0 0 0 / .25);
  font-weight: 700;
}
.ipod__count { font-weight: 400; opacity: .7; margin-left: auto; }
.ipod__state { font-size: .9em; }
.ipod__battery { width: 1.9em; height: .9em; border: 1px solid #333; border-radius: 2px; background: linear-gradient(90deg, #5ec85e 70%, transparent 70%); }

.ipod__scrub {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: var(--scrub-h);
  background: rgb(0 0 0 / .55);
}
.ipod__ticks {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .55) 0 1px, transparent 1px calc(100% / (var(--ticks, 10) - 1)));
  opacity: .7;
}
.ipod__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#9cc9f5, #2f6db3); transition: width .3s var(--ease-paper); }
.ipod__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: .5em;
  height: .5em;
  translate: -50% -50%;
  rotate: 45deg;
  background: #fff;
  border: 1px solid #333;
  transition: left .3s var(--ease-paper);
}
.ipod__half { position: absolute; top: 14%; bottom: 20%; width: 50%; z-index: 3; }
.ipod__half--prev { left: 0; }
.ipod__half--next { right: 0; }

.ipod__wheel { position: absolute; left: 18.7%; top: 52.5%; width: 62.6%; aspect-ratio: 1; z-index: 4; border-radius: 50%; touch-action: none; }
.ipod__key { position: absolute; border-radius: 40%; transition: background .15s; }
.ipod__key:hover, .ipod__key:focus-visible { background: rgb(0 0 0 / .08); }
.ipod__key:active { background: rgb(0 0 0 / .16); }
.ipod__key--menu { left: 32%; top: 0; width: 36%; height: 30%; }
.ipod__key--play { left: 32%; bottom: 0; width: 36%; height: 30%; }
.ipod__key--prev { left: 0; top: 32%; width: 30%; height: 36%; }
.ipod__key--next { right: 0; top: 32%; width: 30%; height: 36%; }
.ipod__center { position: absolute; left: 32.1%; top: 32.1%; width: 35.8%; height: 35.8%; border-radius: 50%; }
.ipod__center:hover, .ipod__center:focus-visible { background: rgb(0 0 0 / .06); }
.ipod.is-playing .ipod__bar { background: linear-gradient(rgb(224 255 244 / .95), rgb(170 230 210 / .9)); }

.projects-all { padding-top: clamp(50px, 7vw, 100px); }
.projects-all__title { padding: 0 var(--gutter) 30px; }

.gallery__intro { column-span: all; max-width: 62ch; margin: 0 0 28px; }
.gallery__lead { font-family: var(--font-sub); font-size: clamp(20px, 2vw, 28px); line-height: 1.25; margin-bottom: 12px; }
.gallery__intro .body-copy p + p { margin-top: 1em; }

@media (max-width: 900px) {
  .ipod-scene { height: auto; width: 100%; aspect-ratio: 1 / 1.15; }
  .ipod { left: 14%; width: 72%; }
  .ipod-scene__napkin { left: 4%; width: 92%; }
  .ipod-scene__phones { left: 52%; width: 66%; }
  .legal__body { grid-column: 1 !important; }
  .tv { grid-column: 1; }
}

.anim-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 8px;
  align-items: end;
  padding: clamp(30px, 4vw, 56px) var(--gutter) clamp(24px, 3vw, 40px);
}
.anim-top__title { grid-column: 1 / -1; font-size: clamp(64px, 11vw, 190px); line-height: .85; }
.anim-top__sub { grid-column: 1 / span 6; font-family: var(--font-scribble); font-size: clamp(26px, 2.8vw, 44px); color: var(--rot); rotate: -2deg; }
.anim-top__intro { grid-column: 7 / span 6; max-width: 46ch; }

.anim-top { position: relative; min-height: calc(100svh - 80px); align-content: center; overflow: hidden; }
.anim-top__title, .anim-top__sub, .anim-top__intro { grid-column: 1 / span 7; }
.anim-top__intro { margin-top: 10px; }
.anim-top__title { font-size: clamp(64px, 8.6vw, 150px); }
.anim-top__gifs { grid-column: 8 / span 5; grid-row: 1 / span 4; position: relative; align-self: center; height: min(70svh, 640px); }
.anim-top__gif { position: absolute; height: auto; max-width: none; }
.anim-top__gif--mask { top: 0; left: 10%; width: 58%; rotate: -3deg; box-shadow: 0 18px 30px -14px rgb(0 0 0 / .5); }
.anim-top__gif--line { bottom: 0; right: -2%; width: 54%; rotate: 2deg; }

.anim-top__hare { grid-column: 1 / span 3; width: clamp(130px, 12vw, 190px); height: auto; margin-top: 6px; pointer-events: none; }
.films { display: grid; gap: clamp(60px, 9vw, 140px); padding: clamp(10px, 2vw, 30px) var(--gutter) clamp(50px, 6vw, 90px); }

.film-row { position: relative; padding-right: 22%; }
.film-row--flip { padding-right: 0; padding-left: 22%; }
.film {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 54px);
  padding: clamp(22px, 3vw, 48px);
}
.film .storyboard { grid-column: 1 / -1; }
.film-row__gifs { position: absolute; top: 0; bottom: 0; right: 0; width: 34%; z-index: 2; pointer-events: none; }
.film-row--flip .film-row__gifs { right: auto; left: 0; }
.film-gif { position: absolute; width: 100%; height: auto; max-width: none; }
.film-gif--a { top: -6%; right: -4%; rotate: 4deg; }
.film-gif--b { bottom: -10%; right: 6%; width: 86%; rotate: -3deg; }
.film-row--flip .film-gif--a { right: auto; left: -4%; rotate: -4deg; }
.film-row--flip .film-gif--b { right: auto; left: 6%; rotate: 3deg; }

@media (min-width: 901px) {
  .films { padding-left: 0; padding-right: 0; }
  .film-row, .film-row--flip { padding: 0; }
  .film { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: clamp(48px, 6vw, 110px) 27% clamp(48px, 6vw, 110px) var(--gutter); }
  .film-row--flip .film { padding-left: 27%; padding-right: var(--gutter); }
  .film-row__gifs { width: 26%; right: 1%; }
  .film-row--flip .film-row__gifs { left: 1%; }
  .film__text { max-width: 48ch; }
  
  .film { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); padding: clamp(36px, 4vw, 70px) 19% clamp(36px, 4vw, 70px) var(--gutter); }
  .film-row--flip .film { padding-left: 19%; padding-right: var(--gutter); }
  .film .film__text { display: block; max-width: none; columns: 2; column-gap: clamp(24px, 2.6vw, 44px); }
  .film .film__text > * { margin: 0 0 12px; break-inside: avoid; }
  .film .film__meta, .film .film__title { column-span: all; }
  .film .film__title, .film .film__title--number { margin-bottom: clamp(14px, 1.4vw, 22px); font-size: clamp(36px, 3.4vw, 64px); line-height: 1; white-space: nowrap; }
  .film-row__gifs { width: 18%; }
}

.anim-outro { display: grid; justify-items: center; padding: 0 var(--gutter) clamp(30px, 4vw, 60px); }
.anim-outro__me { height: clamp(220px, 30vw, 380px); width: auto; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
.film--drop { background: var(--rot); color: var(--paper); --poster: #5a0001; }
.film--degree { background: var(--mint); color: var(--ink); --poster: var(--ink); }
.films .tv { grid-column: auto; width: 100%; margin: 0; }
.film__text { display: grid; gap: 12px; }
.film__meta { opacity: .8; }
.film__title { font-size: clamp(40px, 4.6vw, 80px); line-height: .9; }
.film__title--number { font-size: clamp(80px, 9vw, 160px); line-height: .8; }
.film__claim { font-family: var(--font-sub); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; }
.film__line { font-family: var(--font-sub); font-size: clamp(18px, 1.5vw, 22px); }
.film__questions { display: grid; gap: 10px; padding: 0; list-style: none; }
.film__questions li { padding: 8px 12px; background: var(--paper); color: var(--rot); font-family: var(--font-scribble); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.15; rotate: -1deg; }
.film__questions li:nth-child(2) { rotate: 1deg; }
.film .storyboard { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .anim-top > * { grid-column: 1 / -1; }
  .anim-top { min-height: 0; }
  .anim-top__gifs { grid-row: auto; height: 108vw; margin-top: 18px; }
  .film-row, .film-row--flip { padding: 0 0 46vw; }
  .film { grid-template-columns: 1fr; }
  .film-row__gifs, .film-row--flip .film-row__gifs { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 46vw; }
  .film-gif--a, .film-row--flip .film-gif--a { top: 0; left: 0; right: auto; width: 56%; }
  .film-gif--b, .film-row--flip .film-gif--b { bottom: 0; right: 0; left: auto; width: 56%; }
}

.photo-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 10px;
  align-items: end;
  padding: clamp(36px, 5vw, 70px) var(--gutter) clamp(26px, 3vw, 44px);
}
.photo-intro__kicker { grid-column: 1 / -1; }
.photo-intro__title { grid-column: 1 / -1; font-size: clamp(64px, 11vw, 190px); line-height: .85; }
.photo-intro__text { grid-column: 1 / span 8; margin: clamp(22px, 3.2vw, 48px) 0 0; max-width: 42ch;  font-family: var(--font-sub); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.38; }
.photo-intro__text .rich-key { font-family: inherit; font-size: inherit; font-weight: 700; color: var(--rot); }
.photo-intro__hint { grid-column: 9 / span 4; justify-self: end; color: var(--rot); font-size: clamp(18px, 1.6vw, 22px); }

.rich-key { font-family: var(--font-sub); font-weight: 700; font-size: .78em; letter-spacing: .01em; color: var(--rot); }

.mindmap {
  position: relative;
  height: calc(100svh - 70px);
  min-height: 520px;
  overflow: hidden;
  background: #fbf8f1; 
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.mindmap__viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none; }
.mindmap__viewport.is-dragging { cursor: grabbing; }
.mindmap__viewport.is-dragging .mm-photo { pointer-events: none; }
.mindmap__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

.mm-photo {
  position: absolute;
  padding: 0;
  rotate: var(--turn, 0deg);
  border-radius: 14px;
  box-shadow: 0 14px 28px -16px rgb(var(--ink-rgb) / .55);
  cursor: zoom-in;
  transition: rotate .4s var(--ease-paper), scale .4s var(--ease-paper), box-shadow .4s;
}
.mm-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #ece7dc; user-select: none; -webkit-user-drag: none; }
.mm-photo .tape { z-index: 1; }
.mm-photo:hover, .mm-photo:focus-visible { rotate: 0deg; scale: 1.04; z-index: 3; box-shadow: 0 22px 40px -18px rgb(var(--ink-rgb) / .6); }

.mm-text {
  position: absolute;
  z-index: 2;
  width: 420px;
  margin: 0;
  font-family: var(--font-scribble);
  font-size: 25px;
  line-height: 1.22;
  color: var(--ink);
  rotate: var(--turn, 0deg);
  pointer-events: none;
  opacity: 0;
  filter: blur(6px);
  scale: .97;
  transition: opacity 1.1s ease, filter 1.1s ease, scale 1.1s var(--ease-paper);
}
.mm-text.is-near { opacity: 1; filter: blur(0); scale: 1; }
.mm-sticker { position: absolute; z-index: 1; width: 120px; height: auto; rotate: var(--turn, 0deg); pointer-events: none; filter: drop-shadow(1px 2px 1px rgb(0 0 0 / .2)); }

@media (max-width: 900px) {
  .photo-intro__title, .photo-intro__text, .photo-intro__hint { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  .mindmap { height: calc(100svh - 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-text { opacity: 1; filter: none; scale: 1; transition: none; }
}

.lightbox--ink::backdrop { background: rgb(var(--ink-rgb) / .97); backdrop-filter: blur(6px); }
.lightbox--ink .lightbox__frame { padding: 0; background: none; outline: 0; box-shadow: none; }
.lightbox--ink .lightbox__img { border: 0; background: none; border-radius: 0; }
.lightbox__img--svg { width: min(80vw, 900px); height: min(calc(100dvh - 200px), 900px); object-fit: contain; }
.lightbox--kdk-mint::backdrop { background: linear-gradient(170deg, #00f5d4 0%, #00b3e2 100%); }
.lightbox--kdk-mint .lightbox__frame { padding: 0; background: none; outline: 0; box-shadow: none; }
.lightbox--kdk-mint .lightbox__img { border: 0; background: none; border-radius: 0; }
.lightbox--kdk-mint .lightbox__count { color: #7a17ff; }
.lightbox--kdk-cream::backdrop { background: #fff0b0; }
.lightbox--kdk-cream .lightbox__frame { padding: 0; background: none; outline: 0; box-shadow: none; }
.lightbox--kdk-cream .lightbox__img { border: 0; background: none; border-radius: 0; }
.lightbox--kdk-cream .lightbox__count { color: #600018; }

.comm-head { align-content: start; overflow: hidden; padding-bottom: clamp(90px, 12vw, 200px); }
.comm-head .page-head__title { position: relative; z-index: 2; grid-column: 1 / -1; font-size: clamp(44px, 10.4vw, 190px); line-height: .85; }
.comm-text { position: relative; z-index: 2; grid-column: 1 / span 7; display: grid; gap: .8em; max-width: 42ch; margin-top: clamp(10px, 2vw, 30px); font-family: var(--font-sub); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.35; }
.comm-text p { margin: 0; }
.comm-text .comm-lead { font-size: inherit; line-height: inherit; }
.comm-text .comm-accent { justify-self: start; }
.comm-floats { position: absolute; z-index: 1; left: 51%; right: -2%; top: clamp(250px, 22vw, 340px); bottom: 2%; pointer-events: none; }
.comm-float { position: absolute; height: auto; max-width: none; rotate: var(--rot-deg, 0deg); filter: drop-shadow(6px 10px 8px rgb(var(--ink-rgb) / .3)); transition: transform .9s cubic-bezier(.2, .8, .2, 1); animation: sticker-float 5s ease-in-out var(--float-delay, 0s) infinite alternate; }
.comm-float--photo { box-shadow: 0 16px 26px -12px rgb(0 0 0 / .5); filter: none; }
@media (max-width: 760px) { .comm-text { grid-column: 1 / -1; } }

.projects-all__title { display: grid; gap: 6px; }
.projects-all__title .display { font-size: clamp(44px, 7vw, 110px); line-height: .9; }

.zine-index { display: grid; padding: 0 var(--gutter) clamp(60px, 8vw, 120px); }
.zine-entry {
  --accent: var(--mint);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(20px, 4vw, 70px);
  padding: clamp(28px, 4vw, 56px) 0;
}
.zine-entry--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.zine-entry--flip .zine-entry__pics { order: 2; }
.zine-entry__no {
  position: absolute;
  top: clamp(4px, 1vw, 16px);
  left: 38%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(110px, 17vw, 300px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  pointer-events: none;
}
.zine-entry--flip .zine-entry__no { left: auto; right: 38%; }
.zine-entry__pics { position: relative; z-index: 1; display: block; aspect-ratio: 5 / 4; }
.zine-entry__block {
  position: absolute;
  inset: 10% 6% 4% 14%;
  background: var(--accent);
  rotate: -3deg;
  transition: rotate .5s var(--ease-paper), inset .5s var(--ease-paper);
}
.zine-entry__pic {
  position: absolute;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 22px 34px -18px rgb(var(--ink-rgb) / .55);
  rotate: var(--tilt, 0deg);
  transition: rotate .5s var(--ease-paper), translate .5s var(--ease-paper);
}
.zine-entry__pics { aspect-ratio: auto; min-height: 0; padding-bottom: 14%; }
.zine-entry__pic--main { position: relative; left: 0; top: 0; width: 64%; height: auto; max-height: 70svh; object-fit: contain; }
.zine-entry__pic--second { right: 0; bottom: 0; width: 32%; height: auto; max-height: 60%; object-fit: contain; } 
.zine-entry__pic--third { right: 2%; top: -4%; width: 26%; height: auto; max-height: 52%; object-fit: contain; z-index: 2; }
.zine-entry--big .zine-entry__pic--second { right: -4%; bottom: -6%; width: 34%; max-height: 96%; }
.zine-entry--huge .zine-entry__pic--second { right: -12%; bottom: -12%; width: 56%; max-height: none; z-index: 3; } 
.zine-entry:hover .zine-entry__pic--third { rotate: calc(var(--tilt) - 6deg); translate: 8px -10px; }
.zine-entry__pic.is-free { object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(6px 12px 10px rgb(var(--ink-rgb) / .35)); }
.zine-entry__pics .tape { left: 18%; top: -10px; z-index: 2; }
.zine-entry:hover .zine-entry__pic--main { rotate: calc(var(--tilt) - 4deg); translate: -10px -8px; }
.zine-entry:hover .zine-entry__pic--second { rotate: calc(var(--tilt) + 6deg); translate: 14px 6px; }
.zine-entry:hover .zine-entry__block { rotate: 2deg; }
.zine-entry__text { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: start; }
.zine-entry__kind { padding: 3px 9px; background: var(--ink); color: var(--paper); }
.zine-entry__title { font-size: clamp(42px, 6.4vw, 110px); line-height: .9; }
.zine-entry__title {
  background: linear-gradient(var(--accent), var(--accent)) 0 88% / 0 .32em no-repeat;
  transition: background-size .5s var(--ease-paper);
}
.zine-entry:hover .zine-entry__title { background-size: 100% .32em; }
.zine-entry__lead { font-family: var(--font-scribble); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.15; color: var(--rot); max-width: 26ch; }
.zine-entry__go { display: inline-block; transition: translate .3s var(--ease-paper); }
.zine-entry:hover .zine-entry__go { translate: 8px 0; }
.zine-cut {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgb(var(--ink-rgb) / .55);
  font-size: 20px;
}
.zine-cut::after { content: ""; flex: 1; border-top: 2px dashed rgb(var(--ink-rgb) / .3); }

@media (max-width: 760px) {
  .zine-entry, .zine-entry--flip { grid-template-columns: 1fr; }
  .zine-entry--flip .zine-entry__pics { order: 0; }
  .zine-entry__no, .zine-entry--flip .zine-entry__no { left: auto; right: 0; }
  .comm-head { min-height: 0; padding-bottom: 122vw; }
  .comm-floats { left: 2%; right: 2%; top: auto; bottom: 2vw; height: 104vw; }
}

.panorama {
  display: flex;
  overflow-x: auto;
  margin: 0 0 clamp(40px, 6vw, 80px);
  padding: 0 var(--gutter);
  scrollbar-width: thin;
}
.panorama__img { flex: none; height: clamp(220px, 32vw, 420px); width: auto; max-width: none; border-radius: 10px; }
.chapter { position: relative; padding-top: clamp(30px, 5vw, 70px); }
.chapter + .chapter { border-top: 2px solid var(--ink); margin-top: clamp(30px, 5vw, 70px); }
.chapter__year {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter);
  font-size: clamp(90px, 18vw, 300px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.chapter:nth-of-type(2n) .chapter__year { text-align: right; -webkit-text-stroke-color: var(--flieder); }
.chapter .edge-icons__col { top: 0; }

.kdk {
  --kdk-cream: #fff0b0;
  --kdk-pink: #ff1848;
  --kdk-wine: #a80030;
  --kdk-bordeaux: #600018;
  --kdk-mint: #00f5d4;
  --kdk-cyan: #00b3e2;
  --kdk-violet: #7a17ff;
  font-family: "Thunder", "Arial Narrow", sans-serif;
  overflow: hidden;
}
.kdk-icons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kdk-icon { position: absolute; object-fit: contain; rotate: var(--rot-deg, 0deg); animation: sticker-float 5s ease-in-out var(--float-delay, 0s) infinite alternate; }

.kdk-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 70px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(80px, 9vw, 120px) var(--gutter) clamp(60px, 7vw, 100px);
  background-size: cover;
  background-position: center 40%;
  color: var(--kdk-cream);
  text-align: center;
}
.kdk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(20 0 8 / .35), rgb(20 0 8 / .7));
}
.kdk-hero > :not(.kdk-icons) { position: relative; z-index: 2; }
.kdk-hero__nav { position: absolute !important; top: 24px; left: var(--gutter); margin: 0; display: flex; align-items: center; gap: 12px; }
.kdk-hero__nav .link-ink { color: var(--kdk-cream); }
.kdk-hero__nav .kind-tag { margin: 0; background: var(--kdk-pink); color: var(--kdk-cream); }
.kdk-hero__title { margin: 0; }
.kdk-hero__logo { width: min(860px, 82vw); height: auto; filter: drop-shadow(0 10px 30px rgb(0 0 0 / .45)); }
.kdk-hero__text { max-width: 62ch; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; letter-spacing: .01em; text-wrap: balance; }
.kdk-hero__text p + p { margin-top: .8em; }

.kdk-hero { padding-top: clamp(64px, 7vh, 100px); padding-bottom: clamp(36px, 5vh, 70px); gap: clamp(14px, 2.4vh, 30px); }
.kdk-hero__logo { width: auto; max-width: min(860px, 82vw); max-height: 36svh; }
.kdk-hero__text { max-width: 72ch; font-size: clamp(16px, 1.25vw, 21px); }

.kdk-ch { position: relative; isolation: isolate; padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(80px, 10vw, 150px); }
.kdk-ch > :not(.kdk-icons) { position: relative; z-index: 2; }
.kdk-ch--pink { --ch-ink: var(--kdk-bordeaux); --ch-accent: var(--kdk-bordeaux); --ch-tile: var(--kdk-bordeaux); --ch-tile-dark: var(--kdk-wine);
  
  color: var(--kdk-bordeaux); background: linear-gradient(175deg, var(--kdk-pink) 0%, #ff6a6a 30%, #ffb08a 62%, #f7dfa0 85%, var(--kdk-cream) 100%); }
.kdk-ch--mint { --ch-ink: var(--kdk-violet); --ch-accent: var(--kdk-violet); --ch-tile: var(--kdk-mint); --ch-tile-dark: var(--kdk-violet);
  color: var(--kdk-violet); background: linear-gradient(170deg, var(--kdk-mint) 0%, var(--kdk-cyan) 45%, #4c7bf0 75%, var(--kdk-violet) 100%); }

.kdk-ch__head { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: clamp(30px, 4vw, 60px); }
.kdk-ch__year { margin: 0; font-family: "Dirtyline", var(--font-display); font-weight: 400; font-size: clamp(90px, 16vw, 260px); line-height: .85; color: var(--ch-ink); }

.kdk-label { margin: 0 0 18px; font-weight: 700; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--ch-ink); }

.kdk-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 0; margin-bottom: clamp(60px, 9vw, 140px); }
.kdk-poster { padding: 0; rotate: -4deg; justify-self: center; transition: rotate .5s var(--ease-paper), scale .5s var(--ease-paper); cursor: zoom-in; }
.kdk-poster img { display: block; height: min(86svh, 980px); width: auto; max-width: 100%; border-radius: 10px; box-shadow: 0 40px 70px -30px rgb(0 0 0 / .6); }
.kdk-poster:hover { rotate: -1deg; scale: 1.02; }
.kdk-crew-wrap { position: relative; z-index: 3; margin-left: -12%; }
.kdk-crew { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.kdk-crew__one {
  height: clamp(180px, 26vw, 360px);
  width: auto;
  max-width: none;
  margin: 0 -2.4vw -5vw;
  rotate: var(--turn, 0deg);
  filter: drop-shadow(0 12px 14px rgb(0 0 0 / .3));
  transition: translate .3s var(--ease-paper);
}
.kdk-crew__one:hover { translate: 0 -10px; z-index: 5; }
.kdk-crew__one--photo { border-radius: 14px; }

.kdk-crew-wrap:has(.kdk-crew--lines) { margin-left: 2%; } 
.kdk-crew--lines { gap: clamp(4px, 1vw, 14px) clamp(6px, 1.4vw, 20px); align-items: flex-end; }
.kdk-crew--lines .kdk-crew__one { height: clamp(150px, 19vw, 270px); margin: 0; filter: none; }
.kdk-crew--lines .kdk-crew__one:nth-child(-n+4) { height: clamp(130px, 16vw, 230px); }
.kdk-crew--lines .kdk-crew__one--photo { border-radius: 14px; }

.kdk-strip { display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; margin: 0 calc(var(--gutter) * -1) clamp(60px, 9vw, 130px); padding: 20px var(--gutter) 30px; scrollbar-width: none; cursor: grab; }
.kdk-strip::-webkit-scrollbar { display: none; }
.kdk-strip.is-dragging { cursor: grabbing; }
.kdk-strip__item { flex: none; padding: 0; rotate: var(--turn, 0deg); cursor: zoom-in; transition: rotate .4s var(--ease-paper), translate .4s var(--ease-paper); }
.kdk-strip__item img { display: block; height: clamp(240px, 38vw, 480px); width: auto; max-width: none; border-radius: 18px; box-shadow: 0 24px 40px -22px rgb(0 0 0 / .55); user-select: none; -webkit-user-drag: none; }
.kdk-strip__item:hover { rotate: 0deg; translate: 0 -8px; }

.kdk-merch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(6px, 1vw, 16px) 0; max-width: 1320px; margin: 0 auto; }
.kdk-merch__item, .kdk-crew__one { cursor: zoom-in; }
.kdk-merch__item:hover { scale: 1.06; }
.kdk-zoomable { padding: 0; cursor: zoom-in; display: contents; }
.kdk-merch__item { width: clamp(150px, 18vw, 270px); height: auto; max-width: none; margin: 0 -.6vw; rotate: var(--turn, 0deg); translate: 0 calc(var(--lift, 0px) * .3); }
.kdk-merch__item--float { filter: drop-shadow(0 22px 22px rgb(0 0 0 / .35)); animation: kdk-bob 4.6s ease-in-out var(--bob, 0s) infinite alternate; }
.kdk-merch__item--photo { width: clamp(140px, 15vw, 230px); border-radius: 16px; box-shadow: 0 24px 40px -22px rgb(0 0 0 / .55); }
@keyframes kdk-bob { from { translate: 0 calc(var(--lift, 0px) * .3 - 8px); } to { translate: 0 calc(var(--lift, 0px) * .3 + 8px); } }

@media (max-width: 900px) {
  .kdk-stage { grid-template-columns: 1fr; }
  .kdk-poster img { height: auto; width: 86vw; }
  .kdk-crew-wrap { margin: -14vw 0 0; }
  .kdk-crew__one { height: 34vw; margin: 0 -4vw -8vw; }
  .kdk-hero__nav { position: relative !important; top: 0; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kdk-icon, .kdk-merch__item--float { animation: none; }
}

.gm {
  --gm-concrete: #d6dada;
  --gm-orange: #f5430f;
  --gm-ink: #2b2b2b;
  position: relative;
  isolation: isolate;
  overflow: clip; 
  color: var(--gm-ink);
  background:
    radial-gradient(ellipse at 50% 30%, rgb(255 255 255 / .35), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='9'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .2  0 0 0 0 .2  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
    var(--gm-concrete);
}
.gm > :not(.gm-figures) { position: relative; z-index: 2; }
.gm-figures { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gm-figure { position: absolute; object-fit: contain; rotate: var(--rot-deg, 0deg); animation: sticker-float 6s ease-in-out var(--float-delay, 0s) infinite alternate; }
.gm-hero {
  min-height: calc(100svh - 70px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(10px, 2vw, 24px);
  padding: clamp(70px, 8vw, 110px) var(--gutter) clamp(40px, 5vw, 70px);
  text-align: center;
}
.gm-hero__nav { position: absolute !important; top: 24px; left: var(--gutter); margin: 0; display: flex; align-items: center; gap: 12px; }
.gm-hero__nav .kind-tag { margin: 0; background: var(--gm-orange); color: #fff; }
.gm-hero__title { margin: 0; display: grid; justify-items: center; font-family: "Rattani", var(--font-display); font-weight: 400; color: var(--gm-orange); line-height: .82; }
.gm-hero__title span { font-size: clamp(80px, 15vw, 250px); text-transform: uppercase; }
.gm-hero__title small { font-family: var(--font-mono); font-size: clamp(14px, 1.4vw, 20px); letter-spacing: .3em; text-transform: uppercase; margin-top: 8px; }
.gm-cover { padding: 0; cursor: zoom-in; transition: rotate .4s var(--ease-paper), scale .4s var(--ease-paper); }
.gm-cover img { display: block; width: 100%; height: auto; box-shadow: 0 34px 60px -28px rgb(0 0 0 / .6); }
.gm-cover:hover { scale: 1.03; rotate: 0deg; z-index: 3; }

.gm-reel { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2.4vw, 40px); margin-top: clamp(16px, 2vw, 30px); }
.gm-reel__video { height: min(56svh, 620px); aspect-ratio: 9 / 16; width: auto; object-fit: cover; border-radius: 16px; background: var(--gm-ink); box-shadow: 0 30px 50px -26px rgb(0 0 0 / .6); }
.gm-reel__video--main { height: min(66svh, 740px); }
.gm-hero__title span { font-size: clamp(60px, 9vw, 150px); }
.gm-divider { display: grid; justify-items: center; padding: clamp(20px, 4vw, 50px) 0; }
.gm-divider img { width: clamp(90px, 10vw, 150px); height: auto; }
.gm-figure--hat { rotate: 0deg !important; }

@media (max-width: 760px) {
  .gm-reel { gap: 8px; }
  .gm-reel__video { height: 46vw; }
  .gm-reel__video--main { height: 56vw; }
}

.gm-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 90px) var(--gutter);
}
.gm-text { position: relative; text-align: center; font-family: var(--font-sub); font-size: clamp(19px, 1.55vw, 24px); line-height: 1.45; }
.gm-text p + p { margin-top: .9em; }
.gm-text p { text-wrap: pretty; hyphens: manual; } 
.gm-text strong { color: var(--gm-orange); font-weight: 700; }
.gm-mock { width: 100%; height: auto; filter: drop-shadow(0 30px 34px rgb(0 0 0 / .3)); rotate: 2deg; }

@media (max-width: 900px) {
  .gm-intro { grid-template-columns: 1fr; }
  .gm-mock { max-width: 560px; justify-self: center; }
}
@media (max-width: 760px) {
}

.gm-side { display: grid; justify-items: center; gap: clamp(10px, 2vw, 24px); }
.gm-covers { display: flex; justify-content: center; align-items: center; }
.gm-cover--album { position: relative; z-index: 2; width: min(260px, 20vw); }
.gm-cover--left, .gm-cover--right { width: min(190px, 15vw); }
.gm-cover--left { margin-right: -3vw; rotate: -7deg; }
.gm-cover--right { margin-left: -3vw; rotate: 7deg; }

.gm-tape { position: relative; height: 420vh; }
.gm-tape__sticky { position: sticky; top: 70px; display: grid; place-items: center; height: calc(100svh - 70px); overflow: hidden; }
.gm-tape__stage { --p: 0; position: relative; width: min(1000px, 90vw, calc((100svh - 150px) * 1.2)); aspect-ratio: 1.2; }
.gm-tape__case, .gm-tape__tape { position: absolute; top: 50%; left: 50%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 36px 34px rgb(0 0 0 / .32)); will-change: transform, left; }
.gm-tape__case { z-index: 2; width: 52.5%; }
.gm-tape__tape { z-index: 1; width: 46%; }

.gm-jcard { position: absolute; z-index: 3; top: 50%; left: 50%; width: 50%; aspect-ratio: 1796 / 1760; opacity: 0; perspective: 1600px; transform: translate(-50%, -50%); clip-path: inset(0 0 0 39%); will-change: transform, left, clip-path; }
.gm-jcard__card { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.gm-jcard__face { position: absolute; inset: 0; backface-visibility: hidden; background: center / 100% 100% no-repeat; box-shadow: 0 30px 50px -26px rgb(0 0 0 / .55); }
.gm-jcard__face--back { transform: rotateY(180deg); background-size: calc(100% / .9186) calc(100% / .9462); background-position: 50.4% 79.9%; }

@media (max-width: 760px) {
  .gm-tape { height: 320vh; }
  .gm-cover--album { width: 40vw; }
  .gm-cover--left, .gm-cover--right { width: 30vw; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-tape { height: auto; }
  .gm-tape__sticky { position: static; height: auto; padding: 60px 0; }
  .gm-jcard { opacity: 1; }
}

.pz {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, #8fe3dc 0%, #5f9ec0 45%, #6f6fb5 80%, #4b3f8f 100%);
}
.pz-hero {
  position: relative;
  min-height: calc(100svh - 70px);
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(70px, 8vw, 110px) var(--gutter) clamp(40px, 5vw, 70px);
  text-align: center;
}
.pz-hero__nav { position: absolute; top: 24px; left: var(--gutter); margin: 0; display: flex; align-items: center; gap: 12px; }
.pz-hero__nav .link-ink { color: #fff; }
.pz-hero__nav .kind-tag { margin: 0; background: #4b3f8f; color: #fff; }
.pz-hero__title { position: relative; z-index: 3; margin: 0; font-size: clamp(54px, 10.5vw, 190px); line-height: .8; color: #fff; text-shadow: 0 10px 40px rgb(40 30 90 / .35); }
.pz-stage { position: relative; display: flex; justify-content: center; align-items: center; margin-top: clamp(10px, 2vw, 30px); }
.pz-set { position: relative; z-index: 2; height: min(48svh, 560px); width: auto; max-width: 56vw; filter: drop-shadow(0 40px 40px rgb(30 20 80 / .4)); animation: kdk-bob 5s ease-in-out infinite alternate; }
.pz-single { height: min(30svh, 340px); width: auto; max-width: 30vw; filter: drop-shadow(0 30px 30px rgb(30 20 80 / .35)); animation: kdk-bob 4.2s ease-in-out infinite alternate; }
.pz-single--a { rotate: -18deg; margin-right: -4vw; animation-delay: -1.4s; }
.pz-single--b { rotate: 16deg; margin-left: -4vw; animation-delay: -2.6s; }
.pz-text { max-width: 64ch; margin: 0 auto; padding: 0 var(--gutter) clamp(70px, 9vw, 130px); text-align: center; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; }
.pz-text p + p { margin-top: 1em; }
.pz-text strong { font-weight: bold; }
.pz-hero__lead { position: relative; z-index: 3; margin: 10px 0 0; font-family: var(--font-sub); font-size: clamp(18px, 2vw, 30px); color: #fff; }

@media (max-width: 760px) {
  .gm-hero__nav, .pz-hero__nav { position: relative !important; top: 0; left: 0; margin-bottom: 20px; }
  .gm-covers { flex-wrap: wrap; }
  .gm-cover--album { width: 80vw; order: -1; }
  .gm-cover--left, .gm-cover--right { width: 44vw; margin: -10vw -2vw 0; }
  .pz-set { height: auto; width: 62vw; max-width: none; }
  .pz-single { height: auto; width: 28vw; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-figure, .pz-set, .pz-single { animation: none; }
}

.ph { padding-bottom: clamp(60px, 8vw, 120px); }
.ph__nav { display: flex; align-items: center; gap: 12px; margin: 0; padding: clamp(20px, 3vw, 36px) var(--gutter) 16px; }
.ph__nav .kind-tag { margin: 0; }
.ph-hero { margin: 0 var(--gutter); aspect-ratio: 16 / 9; max-height: 82svh; overflow: hidden; border-radius: 6px; }
.ph-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-hero--gif { aspect-ratio: 1400 / 1024; max-height: none; width: min(1100px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.ph-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px clamp(24px, 4vw, 70px); align-items: end; padding: clamp(28px, 4vw, 60px) var(--gutter) clamp(30px, 4vw, 60px); }
.ph-head__title { grid-column: 1; margin: 0; font-size: clamp(54px, 9vw, 160px); line-height: .85; }
.ph-head__sub { grid-column: 1; margin: 0; font-size: clamp(20px, 2.2vw, 32px); color: var(--rot); }
.ph-head__text { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 42ch; font-family: var(--font-sub); font-size: clamp(18px, 1.55vw, 24px); line-height: 1.38; }
.ph-head__text p { margin: 0; }
.ph-head__text p + p { margin-top: .8em; }

.ph-strip__track { display: flex; gap: clamp(12px, 1.6vw, 22px); overflow-x: auto; padding: 0 var(--gutter) 12px; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.ph-strip__track::-webkit-scrollbar { display: none; }
.ph-strip__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ph-strip__item { flex: none; padding: 0; scroll-snap-align: start; cursor: zoom-in; }
.ph-strip__item img { display: block; height: clamp(320px, 66svh, 720px); width: auto; max-width: none; border-radius: 4px; user-select: none; -webkit-user-drag: none; transition: filter .4s; }
.ph-strip__item:hover img { filter: brightness(1.05); }
.ph-strip__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.ph-strip__btn { width: 48px; height: 48px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 18px; box-shadow: 3px 3px 0 var(--flieder); transition: translate .2s, box-shadow .2s; }
.ph-strip__btn:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--flieder); }
.ph-zoom { display: block; padding: 0; cursor: zoom-in; }
.ph-zoom img { display: block; width: 100%; height: auto; }
.ph-strip__item.ph-zoom img { width: auto; }

.mag-wrap { display: grid; gap: clamp(60px, 9vw, 150px); padding: clamp(20px, 3vw, 40px) var(--gutter) 0; }
.mag { position: relative; display: grid; gap: clamp(14px, 2vw, 30px); align-items: start; }
.mag__no { position: absolute; z-index: 1; top: -.5em; font-family: var(--font-display); font-size: clamp(70px, 10vw, 170px); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--rot); pointer-events: none; }
.mag__fig { position: relative; z-index: 2; margin: 0; }
.mag__fig img { border-radius: 3px; }
.mag__fig figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mag--full .mag__no { right: 0; top: auto; bottom: -.4em; }
.mag--duo { grid-template-columns: 1fr 1fr; width: min(1100px, 100%); justify-self: center; }
.mag--duo .mag__fig:last-of-type { margin-top: 18%; }
.mag--duo .mag__no { left: 46%; }
.mag--single { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); width: min(1200px, 100%); justify-self: center; }
.mag--single .mag__fig { grid-column: 1; }
.mag--single .mag__no { position: static; grid-column: 2; grid-row: 1; align-self: end; font-size: clamp(120px, 20vw, 340px); }
.mag:nth-of-type(even).mag--single .mag__fig { grid-column: 2; }
.mag:nth-of-type(even).mag--single .mag__no { grid-column: 1; justify-self: end; }
.mag--trio { grid-template-columns: repeat(3, 1fr); }
.mag--trio .mag__fig:nth-of-type(2) { margin-top: 14%; }
.mag--trio .mag__fig:nth-of-type(3) { margin-top: 5%; }
.mag--trio .mag__no { right: 2%; top: -.7em; }

.contact-sheet { margin: clamp(80px, 10vw, 160px) var(--gutter) 0; padding: clamp(18px, 2.5vw, 34px); background: #141414; color: #e9e4d8; border-radius: 4px; }
.contact-sheet__label { margin: 0 0 16px; color: #e9e4d8; }
.contact-sheet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 9vw, 130px), 1fr)); gap: 10px 8px; }
.contact-sheet__frame { position: relative; padding: 0 0 16px; cursor: zoom-in; }
.contact-sheet__frame img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: grayscale(.2); transition: filter .3s; }
.contact-sheet__frame:hover img { filter: none; }
.contact-sheet__no { position: absolute; left: 2px; bottom: 0; font-family: var(--font-mono); font-size: 10px; color: #f0b54a; }
.contact-sheet__frame.is-picked::after { content: ""; position: absolute; inset: -6px -6px 10px; border: 2.5px solid var(--rot); border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%; rotate: -4deg; pointer-events: none; }

.ph-grid { columns: 3 260px; column-gap: clamp(12px, 1.8vw, 24px); padding: 0 var(--gutter); }
.ph-grid__item { break-inside: avoid; margin-bottom: clamp(12px, 1.8vw, 24px); width: 100%; }
.ph-grid__item img { border-radius: 4px; }

.ph-next { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 6px 18px; margin: clamp(60px, 8vw, 120px) var(--gutter) 0; padding-top: 18px; border-top: 2px solid var(--ink); font-size: clamp(30px, 4vw, 60px); }
.ph-next__title { font-size: clamp(40px, 6vw, 100px); line-height: .9; }
.ph-next:hover .ph-next__title { color: var(--rot); }

.group-frieze { display: flex; justify-content: center; gap: clamp(8px, 1.4vw, 18px); padding: clamp(24px, 3vw, 40px) var(--gutter) 0; overflow: hidden; }
.group-frieze img { flex: 1 1 0; min-width: 0; height: clamp(160px, 22vw, 340px); object-fit: cover; border-radius: 4px; rotate: var(--tilt); box-shadow: 0 18px 30px -18px rgb(var(--ink-rgb) / .6); }
.dropdown__sublist--deep { margin-left: 4px; border-left-color: var(--flieder); }

.dropdown__sublist { display: none !important; }

.page-head.page-head--photo { min-height: calc(100svh - 70px); background-position: center 45%; }

.page-head.page-head--kdk { min-height: calc(100svh - 70px); }
.page-head--kdk .page-head__text { max-width: 52ch; margin-top: clamp(10px, 1.4vw, 20px); color: var(--paper); font-size: clamp(16px, min(1.35vw, 2.4svh), 21px); }

.page-head--kdk .page-head__title { font-size: clamp(48px, min(8.5vw, 15svh), 160px); }
.page-head.page-head--kdk { padding-bottom: clamp(28px, 5svh, 60px); }
.page-head__text { grid-column: 1 / span 7; max-width: 42ch; font-family: var(--font-sub); font-size: clamp(18px, 1.55vw, 24px); line-height: 1.38; }
.page-head__text p { margin: 0; }
.page-head.page-head--photo::before { background: linear-gradient(180deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .25) 45%, rgb(var(--ink-rgb) / .85) 100%); mix-blend-mode: normal; }
.dropdown__link--deep { font-size: .8em; }
@media (max-width: 760px) {
  .ph-head { grid-template-columns: 1fr; }
  .ph-head__text { grid-column: 1; grid-row: auto; }
  .ph-strip__item img { height: 62svh; }
  .mag--duo, .mag--trio, .mag--single { grid-template-columns: 1fr; }
  .mag .mag__fig { margin-top: 0 !important; grid-column: 1 !important; }
  .mag--single .mag__no { display: none; }
  .group-frieze img:nth-child(n+4) { display: none; }
}

.fa-chapter { margin: clamp(50px, 7vw, 110px) var(--gutter) 0; padding-top: clamp(18px, 2vw, 28px); border-top: 2px solid var(--ink); scroll-margin-top: 90px; }
.fa-chapter__head { display: grid; grid-template-columns: auto minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(16px, 2.4vw, 36px); align-items: end; margin-bottom: clamp(18px, 2.4vw, 32px); }
.fa-chapter__no { grid-row: 1 / span 2; align-self: start; font-family: var(--font-display); font-size: clamp(50px, 6vw, 100px); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--rot); }
.fa-chapter__title { grid-column: 2; margin: 0; font-size: clamp(36px, 5vw, 84px); line-height: .9; }
.fa-chapter__lead { grid-column: 2; margin: 4px 0 0; font-size: clamp(17px, 1.6vw, 24px); color: var(--rot); }
.fa-chapter__text { grid-column: 3; grid-row: 1 / span 2; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; }
.fa-chapter__text p + p { margin-top: .8em; }
.fa-chapter__row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * clamp(8px, 1.2vw, 16px)) / 5); gap: clamp(8px, 1.2vw, 16px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.fa-chapter__row::-webkit-scrollbar { display: none; }
.fa-chapter__row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.fa-chapter__pic { scroll-snap-align: start; }
.fa-chapter__pic img { user-select: none; -webkit-user-drag: none; }
.fa-chapter .ph-strip__controls { justify-content: flex-end; margin-top: 14px; }
.fa-chapter__pic img { aspect-ratio: 2 / 3; object-fit: contain; background: rgb(var(--ink-rgb) / .04); border-radius: 3px; transition: filter .4s; }
.fa-chapter__pic:hover img { filter: brightness(1.06); }
@media (max-width: 760px) {
  .fa-chapter__head { grid-template-columns: auto 1fr; }
  .fa-chapter__text { grid-column: 1 / -1; grid-row: auto; margin-top: 12px; }
  .fa-chapter__row { grid-auto-columns: 62%; }
}

.fz { position: relative; overflow: hidden; background: #0b0b0b; color: var(--paper); }
.fz-motifs { position: absolute; inset: 0; pointer-events: none; }
.fz-motif { position: absolute; width: var(--w); height: auto; rotate: var(--r); opacity: .92; }
.fz-motif--l { left: calc(var(--w) * -.35); }
.fz-motif--r { right: calc(var(--w) * -.35); }
.fz-hero { position: relative; display: grid; justify-items: center; padding: clamp(70px, 8vw, 110px) var(--gutter) clamp(40px, 6vw, 80px); text-align: center; }
.fz-hero__nav { position: absolute; top: 24px; left: var(--gutter); margin: 0; display: flex; align-items: center; gap: 12px; }
.fz-hero__nav .link-ink { color: var(--paper); }
.fz-hero__nav .kind-tag { margin: 0; background: var(--paper); color: #0b0b0b; }
.fz-hero__title { margin: 0; font-size: clamp(90px, 15vw, 240px); line-height: .85; color: var(--paper); }
.fz-hero__lead { margin: 10px 0 0; font-family: var(--font-sub); font-size: clamp(20px, 2.4vw, 34px); color: var(--paper); }
.fz-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(980px, 100%); margin-top: clamp(20px, 4vw, 50px); }
.fz-stage::before { content: ""; position: absolute; inset: -10% -15% 0; background: radial-gradient(closest-side, rgb(var(--paper-rgb) / .2), transparent 75%); pointer-events: none; }
.fz-hoodie { position: relative; z-index: 1; padding: 0; cursor: pointer; transition: scale .6s cubic-bezier(.2, .8, .2, 1), translate .6s cubic-bezier(.2, .8, .2, 1), filter .6s; filter: brightness(.7); scale: .86; }
.fz-hoodie--front { translate: 9% 0; rotate: -3deg; }
.fz-hoodie--back { translate: -9% 0; rotate: 3deg; }
.fz-hoodie.is-front { z-index: 2; filter: none; scale: 1; }
.fz-hoodie img { display: block; width: 100%; height: auto; animation: fz-float 6s ease-in-out infinite; filter: drop-shadow(0 40px 30px rgb(0 0 0 / .6)); }
.fz-hoodie--back img { animation-delay: -3s; }
.fz-hoodie::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -6%; height: 5%; border-radius: 50%; background: rgb(0 0 0 / .8); filter: blur(10px); animation: fz-shadow 6s ease-in-out infinite; }
.fz-hoodie--back::after { animation-delay: -3s; }
@keyframes fz-float { 50% { translate: 0 -14px; } }
@keyframes fz-shadow { 50% { scale: .85; opacity: .6; } }
.fz-text { position: relative; max-width: 60ch; margin: 0 auto; padding: clamp(30px, 5vw, 60px) var(--gutter); font-size: 17px; line-height: 1.7; text-align: center; }
.fz-zoom { display: block; padding: 0; cursor: zoom-in; }
.fz-zoom img { display: block; width: 100%; height: auto; }
.fz-print { position: relative; width: min(620px, calc(100% - 2 * var(--gutter))); margin: clamp(30px, 5vw, 70px) auto 0; }
.fz-photos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 34px); max-width: 1100px; margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(80px, 10vw, 140px); }
.fz-photo img { border-radius: 14px; }
.fz-photo:nth-child(1) { rotate: -2deg; }
.fz-photo:nth-child(2) { rotate: 1.5deg; translate: 0 30px; }
.fz-photo:nth-child(3) { rotate: -1deg; }
@media (prefers-reduced-motion: reduce) { .fz-hoodie img, .fz-hoodie::after { animation: none; } }
@media (max-width: 1100px) { .fz-motif { width: calc(var(--w) * .6); } .fz-motif--l { left: calc(var(--w) * -.3); } .fz-motif--r { right: calc(var(--w) * -.3); } }
@media (max-width: 760px) {
  .fz-hero__nav { position: relative; top: 0; left: 0; margin-bottom: 20px; }
  .fz-motif { width: calc(var(--w) * .4); }
  .fz-motif:nth-child(n+3) { display: none; }
  .fz-photos { grid-template-columns: 1fr; }
  .fz-photo:nth-child(2) { translate: 0; }
}

.qmm {
  --q-scarlet: #f52d00; --q-peri: #7887f7; --q-grey: #eaeaea; --q-plum: #ffa6f0; --q-crimson: #64113f; --q-black: #050404;
  background: var(--q-grey);
  color: var(--q-black);
}
.qmm-hero {
  position: relative;
  min-height: calc(100svh - 70px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: clamp(80px, 9vw, 120px) var(--gutter);
  background: var(--q-crimson);
  color: var(--q-peri);
  text-align: center;
}
.qmm-hero__nav { position: absolute; top: 24px; left: var(--gutter); margin: 0; display: flex; align-items: center; gap: 12px; }
.qmm-hero__nav .link-ink { color: var(--q-grey); }
.qmm-hero__nav .kind-tag { margin: 0; background: var(--q-peri); color: var(--q-crimson); }
.qmm-hero__logo { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 40px); font-weight: 400; color: var(--q-peri); }
.qmm-hero__logo .qmm-logo--qmm { width: clamp(150px, 26vw, 440px); }
.qmm-hero__logo .qmm-logo--mark { width: clamp(130px, 21vw, 380px); }
.qmm-hero__script { display: grid; font-family: "Interlope", var(--font-scribble); font-size: clamp(42px, 6.6vw, 120px); line-height: .9; text-align: left; }
.qmm-hero__script span:last-child { padding-left: .3em; font-size: 1.45em; }
.qmm-logo { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.qmm-logo--qmm { --m: url("../assets/brand/qmm/qmm.png"); aspect-ratio: 515 / 261; }
.qmm-logo--mark { --m: url("../assets/brand/qmm/mark.png"); aspect-ratio: 785 / 618; }
.qmm-spin { animation: qmm-spin 40s linear infinite; }
@keyframes qmm-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .qmm-spin { animation: none; } }
.qmm-logos { display: grid; grid-template-columns: 1fr 1fr; }
.qmm-tile { position: relative; display: grid; place-items: center; margin: 0; aspect-ratio: 1 / .72; }
.qmm-tile figcaption { position: absolute; top: 20px; left: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--q-black); }
.qmm-tile__full { display: flex; align-items: center; gap: 4%; width: 78%; }
.qmm-tile__full .qmm-logo--qmm { width: 55%; }
.qmm-tile__full .qmm-logo--mark { width: 41%; }
.qmm-tile__mark { width: 62%; }
.qmm-variants { display: grid; grid-template-columns: repeat(4, 1fr); }
.qmm-variant { display: grid; place-items: center; aspect-ratio: 1.4; }
.qmm-variant .qmm-logo { width: 58%; }
.qmm-fonts { display: grid; gap: clamp(14px, 2vw, 28px); }
.qmm-font { display: block; width: 100%; height: auto; }
.qmm-hero__lead { margin: 0; font-family: var(--font-mono); font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .14em; text-transform: uppercase; color: var(--q-plum); }
.qmm-text { max-width: 62ch; margin: 0 auto; padding: clamp(50px, 7vw, 100px) var(--gutter) 0; text-align: center; font-size: 17px; line-height: 1.65; }
.qmm-block { max-width: 1240px; margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--gutter) 0; }
.qmm-block:last-child { padding-bottom: clamp(80px, 10vw, 150px); }
.qmm-label { margin: 0 0 clamp(20px, 3vw, 36px); padding-bottom: 12px; border-bottom: 1px solid rgb(5 4 4 / .2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.qmm-zoom { display: block; padding: 0; cursor: zoom-in; overflow: hidden; }
.qmm-zoom img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .8, .2, 1); }
.qmm-zoom:hover img { scale: 1.03; }
.qmm-colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); padding: 0; list-style: none; }
.qmm-swatch { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 0; cursor: copy; text-align: center; }
.qmm-swatch__dot { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(5 4 4 / .12); transition: scale .4s cubic-bezier(.2, .8, .2, 1); }
.qmm-swatch:hover .qmm-swatch__dot { scale: 1.05; }
.qmm-swatch__name { font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; }
.qmm-swatch__hex { font-family: var(--font-mono); font-size: 11px; opacity: .6; }
.qmm-copied { min-height: 1.4em; margin: 16px 0 0; font-family: var(--font-mono); font-size: 12px; text-align: center; }
.qmm-mockups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.qmm-mockup { aspect-ratio: 4 / 3; }
.qmm-mockup:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.qmm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(14px, 2vw, 28px); }
.qmm-card { aspect-ratio: 1004 / 650; box-shadow: 0 30px 60px -40px rgb(5 4 4 / .5); }
@media (max-width: 760px) {
  .qmm-hero__nav { position: relative; top: 0; left: 0; margin-bottom: 20px; }
  .qmm-mockups, .qmm-cards, .qmm-logos { grid-template-columns: 1fr; }
  .qmm-variants { grid-template-columns: repeat(2, 1fr); }
  .qmm-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.project-loops { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(20px, 4vw, 60px); padding: 0 var(--gutter) clamp(40px, 6vw, 80px); }
.project-loops__video { width: clamp(200px, 24vw, 320px); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: var(--ink); rotate: var(--tilt, 0deg); box-shadow: 0 24px 40px -22px rgb(var(--ink-rgb) / .7); }

.dropdown__sublist { margin: 2px 0 6px; padding: 0 0 0 18px; list-style: none; border-left: 2px solid var(--mint); }
.dropdown__link--sub { font-size: .86em; opacity: .85; }
.zine-entry__subs { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.zine-entry__sub { padding: 2px 9px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

.kind-tag {
  display: inline-block;
  margin-left: 14px;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--paper);
  letter-spacing: .08em;
}
.page-head--hero {
  min-height: min(78svh, 760px);
  align-content: end;
  color: var(--paper);
  background-size: cover;
  background-position: center 40%;
  isolation: isolate;
}

.page-head--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(var(--ink-rgb) / .25) 0%, rgb(var(--ink-rgb) / .82) 78%),
    rgb(var(--mint-rgb) / .28);
  mix-blend-mode: multiply;
}
.page-head--hero .page-head__kicker { border-top-color: var(--paper); }
.page-head--hero .link-ink { color: var(--paper); }
.page-head--hero .kind-tag { background: var(--mint); color: var(--ink); }
.page-head--hero .page-head__note { color: var(--mint); }

.has-edge-icons { position: relative; }
.edge-icons { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.edge-icons__col {
  position: absolute;
  top: min(78svh, 760px); 
  bottom: 0;
  width: clamp(34px, 3.2vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 28px;
  overflow: hidden;
}
.edge-icons__col--l { left: max(6px, calc(var(--gutter) / 2 - 22px)); }
.edge-icons__col--r { right: max(6px, calc(var(--gutter) / 2 - 22px)); }
.edge-icons__col img { width: 100%; height: auto; rotate: var(--r, 0deg); opacity: .32; }
.has-edge-icons > :not(.edge-icons) { position: relative; z-index: 1; }
@media (max-width: 760px) { .edge-icons { display: none; } }

.rail {
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgb(var(--ink-rgb) / .06) 119px 120px),
    var(--paper);
  border-top: 2px solid var(--ink);
}
.rail__sticky { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; height: 100svh; padding: 86px 0 28px; overflow: hidden; }
.rail--native .rail__sticky { position: static; height: auto; }
.rail__item--card img { border-radius: 4px; box-shadow: 0 2px 2px rgb(0 0 0 / .2), 0 26px 34px -18px rgb(var(--ink-rgb) / .55); }

.page-text--poster .body-copy { grid-column: 1 / span 8; max-width: 42ch; font-family: var(--font-sub); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.38; }
.page-text--poster .body-copy p { margin: 0 0 .8em; }

.page-head--poster { min-height: calc(100svh - 80px); grid-template-rows: auto auto auto auto 1fr; align-content: stretch; overflow: hidden; }
.page-head--poster .page-head__title { margin-top: clamp(10px, 2vh, 30px); }
.page-head--poster .page-head__title { grid-column: 1 / span 6; position: relative; z-index: 2; font-size: clamp(56px, 9vw, 160px); line-height: .9; }
.page-head--poster .page-head__sub { grid-column: 1 / span 6; position: relative; z-index: 2; margin: 0; font-family: var(--font-scribble); font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; color: var(--rot); rotate: -2deg; max-width: 24ch; }

.page-head--poster .page-head__title { font-size: clamp(52px, 6.6vw, 120px); }
.page-head__text--poster { grid-column: 1 / span 6; position: relative; z-index: 2; max-width: 52ch; font-family: var(--font-sub); font-size: clamp(15px, 1.12vw, 18px); line-height: 1.4; }
.page-head__text--poster p { margin: 0 0 .7em; }
.page-head__text--poster strong { font-weight: bold; background: linear-gradient(transparent 55%, rgb(var(--mint-rgb) / .7) 55% 92%, transparent 92%); padding: 0 .1em; }
.poster-stack { grid-column: 7 / -1; grid-row: 1 / span 5; position: relative; align-self: stretch; min-height: min(72svh, 680px); }
.poster-stack__item { position: absolute; width: 48%; box-shadow: 0 26px 40px -20px rgb(var(--ink-rgb) / .6); transition: rotate .5s var(--ease-paper), translate .5s var(--ease-paper); }
.poster-stack__item img { display: block; width: 100%; height: auto; }
.poster-stack__item .tape { left: 30%; top: -12px; z-index: 2; }
.poster-stack__item--1 { left: 2%; top: 10%; rotate: -9deg; z-index: 1; }
.poster-stack__item--2 { left: 26%; top: 0; rotate: -2deg; z-index: 2; }
.poster-stack__item--3 { left: 50%; top: 8%; rotate: 6deg; z-index: 3; }
.poster-stack__item--4 { left: 30%; top: 34%; width: 40%; rotate: 11deg; z-index: 4; }
.page-head--poster:hover .poster-stack__item--1 { rotate: -13deg; translate: -14px 0; }
.page-head--poster:hover .poster-stack__item--3 { rotate: 10deg; translate: 14px 0; }
@media (max-width: 760px) {
  .page-head--poster { min-height: 0; }
  .page-head--poster .page-head__title, .page-head--poster .page-head__sub { grid-column: 1 / -1; }
  .poster-stack { grid-column: 1 / -1; grid-row: auto; min-height: 118vw; margin-top: 16px; }
}
.page-text--poster strong { font-weight: bold; background: linear-gradient(transparent 55%, rgb(var(--mint-rgb) / .7) 55% 92%, transparent 92%); padding: 0 .1em; }
.rail__controls { display: flex; justify-content: flex-end; gap: 14px; padding: 14px var(--gutter) 0; }
.rail--native .rail__viewport { cursor: grab; }
.rail--native .rail__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail--native .rail__item img { height: clamp(300px, 60svh, 600px); user-select: none; -webkit-user-drag: none; }
.rail--native.rail--alt .rail__item img { height: clamp(240px, 46svh, 480px); }
.rail--native .rail__sticky { padding: clamp(40px, 5vw, 70px) 0 clamp(30px, 4vw, 50px); }
.rail--alt { background: repeating-linear-gradient(90deg, transparent 0 119px, rgb(var(--ink-rgb) / .07) 119px 120px), rgb(var(--flieder-rgb) / .22); }
.rail__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; padding: 0 var(--gutter); }
.rail__no { order: -1; width: 100%; }
.rail__title { font-size: clamp(56px, 9vw, 150px); line-height: .85; }
.rail__hint { color: var(--rot); font-size: clamp(20px, 2vw, 28px); }
.rail__viewport { position: relative; display: flex; align-items: center; min-width: 0; }
.rail__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: 40px var(--gutter) 40px max(var(--gutter), 8vw);
  will-change: transform;
}
.rail__item {
  position: relative;
  flex: none;
  padding: 0;
  translate: 0 var(--lift, 0);
  rotate: var(--tilt, 0deg);
  transition: rotate .45s var(--ease-paper), translate .45s var(--ease-paper), scale .45s var(--ease-paper);
}
.rail__item img {
  display: block;
  height: clamp(260px, 58svh, 680px);
  width: auto;
  max-width: none;
  box-shadow: 0 2px 3px rgb(0 0 0 / .15), 0 26px 40px -22px rgb(var(--ink-rgb) / .6);
}
.rail--alt .rail__item img { height: clamp(220px, 46svh, 520px); }
.rail__item:hover, .rail__item:focus-visible { rotate: 0deg; translate: 0 calc(var(--lift, 0px) - 14px); scale: 1.03; z-index: 2; }
.rail__item .tape { z-index: 1; }
.rail__end { flex: none; font-size: clamp(80px, 12vw, 200px); color: var(--rot); padding-right: 10vw; }
.rail__progress { margin: 0 var(--gutter); height: 3px; background: rgb(var(--ink-rgb) / .12); }
.rail__progress span { display: block; height: 100%; width: 0; background: var(--rot); }

.rail--native { min-height: 0; padding-top: 40px; }
.rail--native .rail__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail--native .rail__viewport::-webkit-scrollbar { display: none; }
.rail--native .rail__item { scroll-snap-align: center; }
.rail--native .rail__item img { height: min(62svh, 440px); }
.rail--native .rail__end { display: none; }

.luv {
  --sq: clamp(46px, 6vw, 84px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr); 
  justify-items: center;
  gap: clamp(50px, 7vw, 110px);
  padding: clamp(36px, 5vw, 70px) var(--gutter) clamp(70px, 9vw, 130px);
  color: var(--ink);
  background: #1a1714;
}

.luv::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -2;
  background: repeating-conic-gradient(#171412 0 25%, #e6dfcd 0 50%) 0 0 / var(--sq) var(--sq);
  rotate: -1.4deg;
  filter: contrast(1.08) sepia(.18) blur(.35px);
}

.luv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 18% at 22% 28%, rgb(90 60 20 / .28), transparent 70%),
    radial-gradient(ellipse 22% 30% at 78% 62%, rgb(70 40 10 / .25), transparent 70%),
    radial-gradient(ellipse 18% 10% at 60% 12%, rgb(255 255 255 / .12), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0 0.05  0 0 0 1.4 -.45'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>"),
    radial-gradient(ellipse at 50% 45%, transparent 45%, rgb(0 0 0 / .6) 100%);
  mix-blend-mode: multiply;
}
.luv > * { position: relative; z-index: 2; }
.luv__stickers { position: absolute; inset: 0; z-index: 4; pointer-events: none; } 
.luv__sticker {
  position: absolute;
  object-fit: contain;
  rotate: var(--rot-deg, 0deg);
  filter: drop-shadow(6px 10px 6px rgb(0 0 0 / .5));
  animation: sticker-float 5s ease-in-out var(--float-delay, 0s) infinite alternate;
}

.luv__card {
  background: #f3eee1;
  box-shadow: 0 2px 3px rgb(0 0 0 / .25), 0 24px 34px -18px rgb(0 0 0 / .7);
}
.luv__head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.luv__back { justify-self: start; padding: 6px 12px; background: #f3eee1; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; rotate: -2deg; }

.luv__title { margin: 0; rotate: -1.2deg; }
.luv__wordmark {
  width: min(900px, 84vw);
  height: auto;
  filter:
    drop-shadow(3px 0 0 #f3eee1) drop-shadow(-3px 0 0 #f3eee1) drop-shadow(0 3px 0 #f3eee1) drop-shadow(0 -3px 0 #f3eee1)
    drop-shadow(8px 12px 8px rgb(0 0 0 / .6));
}
.luv__mark { width: clamp(80px, 10vw, 140px); rotate: 8deg; filter: drop-shadow(3px 5px 2px rgb(0 0 0 / .5)); }
.luv__story { position: relative; justify-self: stretch; margin: 0 calc(-1 * var(--luv-pad, 0px)); padding: clamp(36px, 5vw, 80px) max(var(--gutter), 8vw); background: rgb(14 12 10 / .86); color: #f3eee1; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .8); }
.luv__story-text { max-width: 44ch; font-family: var(--font-sub); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.38; text-align: left; }
.luv__story-text p { margin: 0; }

.luv__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(30px, 4vw, 70px); align-items: center; }

.luv__selfies { position: relative; height: clamp(600px, 60vw, 980px); margin-top: clamp(30px, 4vw, 60px); }
.luv__selfie { position: absolute; padding: 8px 8px 26px; background: #f3eee1; border: 0; cursor: pointer; box-shadow: 0 22px 34px -16px rgb(0 0 0 / .8); transition: rotate .5s var(--ease-paper), translate .5s var(--ease-paper); }
.luv__selfie img { display: block; width: 100%; height: auto; }
.luv__selfie--1 { left: 0; top: 0; width: 60%; rotate: -4deg; z-index: 1; }
.luv__selfie--2 { right: 0; top: 3%; width: 46%; rotate: 5deg; z-index: 2; }
.luv__selfie--3 { left: 6%; bottom: 0; width: 54%; rotate: 2deg; z-index: 3; }
.luv__selfie--4 { right: 2%; bottom: 6%; width: 42%; rotate: -6deg; z-index: 4; }

.luv__head { position: relative; padding: clamp(10px, 2vw, 30px) 0 clamp(30px, 4vw, 60px); }
.luv__head::before {
  content: ""; position: absolute; z-index: -2; left: 50%; width: 100vw; translate: -50% 0;
  top: calc(-1 * clamp(36px, 5vw, 70px)); bottom: clamp(-200px, -14vw, -90px); pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 27% 42%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 63% 30%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 78% 16%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 88% 48%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 6% 56%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 53% 60%, #fff 50%, transparent 52%),
    linear-gradient(180deg, #05071c 0%, #0c1240 45%, rgb(20 22 70 / .75) 72%, transparent 100%);
}
.luv__sky { position: absolute; inset: -60px -8% -40px; pointer-events: none; }
.luv__sky-item { position: absolute; z-index: -1; height: auto; filter: drop-shadow(4px 6px 6px rgb(0 0 0 / .5)); animation: sticker-float 7s ease-in-out calc(var(--i) * -.7s) infinite alternate; }
.luv__sky-item--cloud { width: clamp(300px, 40vw, 680px); opacity: .95; }
.luv__sky-item--star { width: clamp(40px, 4.4vw, 78px); }
.luv__sky-item:nth-child(1) { left: -6%; top: -6%; }
.luv__sky-item:nth-child(2) { right: -6%; bottom: -36%; z-index: 3; } 
.luv__sky-item:nth-child(3) { left: 18%; top: -4%; }
.luv__sky-item:nth-child(4) { right: 22%; top: -8%; }
.luv__sky-item:nth-child(5) { left: 6%; bottom: 4%; }
.luv__sky-item:nth-child(6) { right: 6%; top: 10%; }
.luv__sky-item:nth-child(7) { left: 34%; bottom: -10%; }
.luv__sky-item:nth-child(8) { right: 36%; top: -12%; }
.luv__sky-item:nth-child(9) { left: 1%; top: 52%; }
.luv__sky-item:nth-child(10) { right: 2%; top: 46%; }
.luv__sky-item:nth-child(11) { left: 50%; top: -14%; }
@media (max-width: 760px) { .luv__sky { inset: -40px -4% -20px; } .luv__sky-item:nth-child(n+8) { display: none; } }
.luv__selfie:hover { rotate: 0deg; translate: 0 -8px; z-index: 5; }
@media (max-width: 900px) {
  .luv__story { grid-template-columns: 1fr; }
  .luv__selfies { height: 112vw; margin-top: 30px; }
}
.luv__story-text p + p { margin-top: .9em; }
.luv__story strong { font-weight: bold; color: var(--mint); }
.luv__lead { font-family: var(--font-sub); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; margin-bottom: 16px; }
.luv__year { position: absolute; right: max(var(--gutter), 8vw); top: clamp(30px, 4vw, 70px); margin: 0; font-size: clamp(34px, 3.6vw, 56px); color: #f3eee1; rotate: var(--tilt, -5deg); }
@media (max-width: 900px) { .luv__year { position: static; margin-bottom: 14px; } }
.luv__block { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; width: 100%; min-width: 0; }
.luv__label { padding: 12px 22px 10px; text-align: center; rotate: -1.5deg; }
.luv__h { font-size: clamp(26px, 3vw, 40px); }
.luv__hint { color: var(--rot); font-size: clamp(18px, 1.8vw, 24px); white-space: normal; }
.luv__controls { display: flex; gap: 14px; }
.luv__btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: #f3eee1; border: 1.5px solid var(--ink);
  font-size: 20px;
  box-shadow: 3px 3px 0 var(--rot);
  transition: translate .2s var(--ease-paper), box-shadow .2s;
}
.luv__btn:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--rot); }

.litfass {
  --r: 300px;
  --face-w: 200px;
  --stage-h: 700px;
  --green: #e8dec6; 
  --grime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .12 2.6 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative;
  width: min(1000px, 100%);
  display: grid;
  justify-items: center;
  perspective: 1900px;
  touch-action: pan-y;
  user-select: none;
  outline-offset: 10px;
  cursor: grab;
}
.litfass:active { cursor: grabbing; }
.litfass__stage { position: relative; width: 100%; height: var(--stage-h); transform-style: preserve-3d; }
.litfass__cylinder { position: absolute; inset: 0; transform-style: preserve-3d; }
.litfass__face {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--face-w);
  height: 100%;
  margin: 0 0 0 calc(var(--face-w) / -2);
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  padding: calc(var(--face-w) * .1) 0;
  backface-visibility: hidden;
  
  background:
    var(--grain),
    var(--grime) 0 0 / 420px 420px,
    radial-gradient(ellipse 40% 6% at 30% 34%, rgb(120 90 40 / .22), transparent 70%),
    radial-gradient(ellipse 30% 5% at 70% 67%, rgb(120 90 40 / .2), transparent 70%),
    linear-gradient(transparent 62%, rgb(70 50 25 / .38) 100%),
    repeating-linear-gradient(90deg, rgb(60 40 20 / .07) 0 1px, transparent 1px 9px),
    var(--green);
}
.litfass__slot {
  position: relative;
  display: block;
  width: 88%;
  margin: 5% auto;
  padding: 0;
  translate: var(--dx, 0) 0;
  rotate: var(--rot, 0deg);
  cursor: zoom-in;
}
.litfass__slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .3), 3px 4px 6px rgb(0 0 0 / .5);
  filter: sepia(.14) contrast(1.05); 
}
.litfass__illu {
  position: absolute;
  z-index: 5;
  width: 24%;
  height: auto;
  rotate: var(--rot, 0deg);
  filter: drop-shadow(2px 3px 2px rgb(0 0 0 / .5));
  pointer-events: none;
}

.litfass__finial {
  width: calc(var(--face-w) * .2);
  height: calc(var(--face-w) * .26);
  margin-bottom: -2px;
  border-radius: 50% 50% 10% 10%;
  background: var(--grain), radial-gradient(circle at 35% 30%, #fbf6ea, var(--green) 55%, #9c8f72);
}
.litfass__cap {
  width: calc(var(--r) * 2.2);
  height: calc(var(--face-w) * .5);
  margin-bottom: -4px;
  border-radius: 50% 50% 10px 10px / 130% 130% 10px 10px;
  background:
    var(--grain),
    var(--grime) 0 0 / 420px 420px,
    linear-gradient(90deg, rgb(0 0 0 / .45), transparent 30%, rgb(255 255 255 / .3) 50%, transparent 70%, rgb(0 0 0 / .45)),
    var(--green);
  box-shadow: inset 0 -10px 0 #8a7a55, inset 0 -14px 0 #5b4e36, 0 12px 16px -6px rgb(0 0 0 / .65); 
}
.litfass__base {
  width: calc(var(--r) * 2.35);
  height: 54px;
  margin-top: -2px;
  border-radius: 4px 4px 14px 14px;
  background:
    var(--grain),
    linear-gradient(transparent 20%, rgb(60 42 20 / .5)),
    linear-gradient(90deg, rgb(0 0 0 / .45), transparent 30%, rgb(255 255 255 / .22) 50%, transparent 70%, rgb(0 0 0 / .45)),
    linear-gradient(#8a7a55 0 5px, var(--green) 5px);
  box-shadow: 0 22px 26px -8px rgb(0 0 0 / .75);
}

.cover-band {
  position: relative;
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(var(--gutter) * -1);
  padding: clamp(22px, 3vw, 40px) 0;
  background:
    linear-gradient(rgb(255 255 255 / .1), transparent 30%, rgb(0 0 0 / .14)),
    var(--rot);
  rotate: -1.2deg;
  box-shadow: 0 18px 30px -12px rgb(0 0 0 / .75), 0 -2px 0 rgb(0 0 0 / .2);
}

.cover-band::before, .cover-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed rgb(243 238 225 / .7);
}
.cover-band::before { top: 10px; }
.cover-band::after { bottom: 10px; }
.cover-strip {
  display: flex;
  gap: clamp(24px, 3vw, 44px);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10%;
  padding: 14px 10%;
  scrollbar-width: thin;
  scrollbar-color: #f3eee1 transparent;
}
.cover-strip.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.cover-strip__item {
  position: relative;
  flex: 0 0 clamp(230px, 28vw, 390px);
  aspect-ratio: 1;
  scroll-snap-align: center;
  rotate: var(--tilt, 0deg);
  box-shadow: 0 2px 2px rgb(0 0 0 / .3), 0 22px 28px -14px rgb(0 0 0 / .85);
  transition: rotate .4s var(--ease-paper), translate .4s var(--ease-paper);
}
.cover-strip__item img { width: 100%; height: 100%; object-fit: cover; }
.cover-strip__item:hover, .cover-strip__item:focus-visible { rotate: 0deg; translate: 0 -6px; }

.crt-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 56px) clamp(18px, 3vw, 40px);
  width: min(1100px, 100%);
}
.crt { margin: 0; display: grid; gap: 12px; justify-items: center; rotate: var(--tilt, 0deg); transition: rotate .4s var(--ease-paper), scale .4s var(--ease-paper); }
.crt:hover, .crt.is-on { rotate: 0deg; scale: 1.03; }
.crt__box { position: relative; width: 100%; aspect-ratio: 736 / 910; }
.crt__set { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 26px 24px rgb(0 0 0 / .7)); }
.crt__screen {
  position: absolute;
  left: 13.6%;
  top: 12.2%;
  width: 58.5%;
  height: 42.5%;
  overflow: hidden;
  border-radius: 8% / 9%;
  background: #0b0b0b;
  box-shadow: inset 0 0 0 5px #2b2b2b, inset 0 0 26px rgb(0 0 0 / .9);
}
.crt__poster { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; }
.crt__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.05); }

.crt__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 30% 20%, rgb(255 255 255 / .2), transparent 45%),
    repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / .22) 2px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .55));
}
.crt__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid #f3eee1;
  background: rgb(0 0 0 / .45);
  color: #f3eee1;
  font-size: 20px;
  transition: scale .3s var(--ease-paper), background .3s;
}
.crt__poster:hover .crt__play, .crt__poster:focus-visible .crt__play { scale: 1.15; background: var(--rot); }
.crt__screen iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.crt.is-on .crt__screen::after { z-index: 4; opacity: .5; } 
.crt__label { padding: 4px 12px; background: #f3eee1; font-family: var(--font-sub); font-size: clamp(15px, 1.4vw, 19px); rotate: -2deg; box-shadow: 0 6px 10px -6px rgb(0 0 0 / .6); }
.luv__note { max-width: 52ch; padding: 6px 12px; background: rgb(243 238 225 / .9); font-size: 12px; text-align: center; }

.wallshelf {
  width: min(1180px, 100%);
  padding: clamp(26px, 3vw, 44px) clamp(18px, 3vw, 48px) clamp(30px, 3vw, 50px);
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 250 235 / .55), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='3'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0 0.32  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    radial-gradient(ellipse at center, #ece4d2 40%, #cfc3a8 100%);
  box-shadow: inset 0 0 60px rgb(80 60 30 / .35), 0 30px 50px -20px rgb(0 0 0 / .85);
}
.wallshelf__row + .wallshelf__row { margin-top: clamp(10px, 1.4vw, 18px); }
.wallshelf__items {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: clamp(10px, 2vw, 28px);
  padding: 0 3%;
}
.wallshelf__item {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  transform-origin: 50% 100%;
  rotate: var(--tilt, 0deg);
  transition: translate .3s var(--ease-paper), rotate .3s var(--ease-paper);
}
.wallshelf__item img {
  display: block;
  max-height: clamp(170px, 26vw, 330px);
  max-width: 100%;
  width: auto;
  height: auto;
  
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / .45)) drop-shadow(10px -4px 12px rgb(60 40 20 / .3));
}
.wallshelf__item:hover { translate: 0 -10px; rotate: 0deg; }
.wallshelf__price {
  position: absolute;
  right: -6px;
  top: 6%;
  padding: 2px 8px;
  background: #fbf8ef;
  border: 1px solid rgb(0 0 0 / .3);
  font-size: 11px;
  rotate: 8deg;
  box-shadow: 0 3px 4px -2px rgb(0 0 0 / .4);
}
.wallshelf__plank {
  position: relative;
  display: block;
  height: 26px;
  margin: 0 -2%;
  border-radius: 2px;
  background:
    linear-gradient(rgb(255 255 255 / .28) 0 3px, transparent 3px 9px, rgb(0 0 0 / .25) 100%),
    repeating-linear-gradient(90deg, rgb(70 40 15 / .18) 0 1px, transparent 1px 7px, rgb(255 230 190 / .08) 7px 9px, transparent 9px 23px),
    linear-gradient(90deg, #a47448, #b98654 30%, #a06e42 60%, #b27f4d);
  box-shadow: 0 16px 18px -8px rgb(40 25 10 / .7), 0 2px 0 rgb(0 0 0 / .25);
}
.wallshelf__bracket {
  position: absolute;
  top: 100%;
  width: 14px;
  height: 38px;
  background: linear-gradient(90deg, #3a3a3a, #8a8a8a 45%, #2d2d2d);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 30%);
  box-shadow: 4px 6px 8px rgb(0 0 0 / .3);
}
.wallshelf__bracket:first-child { left: 9%; }
.wallshelf__bracket:last-child { right: 9%; }

@media (max-width: 760px) {
  .luv__wordmark { width: 88vw; }
  .crt-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallshelf__items { flex-wrap: wrap; justify-content: center; }
}

:where(.hero > :not(.hero__stickers)) { position: relative; z-index: 2; }

.typo {
  display: grid;
  justify-items: center;
  font-size: clamp(48px, 9vw, 150px);
  line-height: .95;
  font-weight: normal;
  color: var(--ink);
}
.typo__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .2em; }
.tw { position: relative; display: inline-block; }

[data-pixel] { color: transparent; }
[data-pixel] canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.tw--pixel { --pixel-ink: var(--ink); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.01em; }
.tw--hand { font-family: var(--font-scribble); font-size: .5em; color: var(--rot); rotate: -6deg; }
.tw--serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: -.02em; }
.tw--fat {
  font-family: "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.05em;
  font-size: 1.12em;
}
.tw--amp { font-family: var(--font-display); font-size: .7em; color: var(--flieder); }
.typo__arrow { width: 1.1em; height: .3em; align-self: center; fill: none; stroke: var(--rot); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.tw--ring::after {
  content: "";
  position: absolute;
  inset: -.12em -.35em -.08em;
  border: 2px solid var(--rot);
  border-radius: 50%;
  rotate: -4deg;
  pointer-events: none;
}
.hero__badge { padding: 3px 8px; background: var(--ink); color: var(--paper); }
.hero-sticker[hidden] { display: none; }

.hero__stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-sticker,
[data-page="home"] .sticker {
  pointer-events: auto;
  rotate: var(--rot-deg, 0deg);
  animation: sticker-float 4.2s ease-in-out var(--float-delay, 0s) infinite alternate;
  transition: scale .3s var(--ease-paper), filter .3s;
}
.hero-sticker { position: absolute; object-fit: contain; }
.hero-sticker:hover,
[data-page="home"] .sticker:hover {
  scale: 1.22;
  animation: sticker-wiggle .55s ease-in-out;
}
@keyframes sticker-float { from { translate: 0 0; } to { translate: 0 -9px; } }
@keyframes sticker-wiggle {
  0%, 100% { rotate: var(--rot-deg, 0deg); }
  25% { rotate: calc(var(--rot-deg, 0deg) + 14deg); }
  60% { rotate: calc(var(--rot-deg, 0deg) - 10deg); }
}

.beetle-trail { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.beetle-trail__bug { position: absolute; left: 0; top: 0; height: auto; filter: drop-shadow(1px 2px 0 rgb(0 0 0 / .3)); will-change: transform, opacity; }

@media (max-width: 900px) {
  .typo { font-size: clamp(40px, 13vw, 90px); }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .parade__figure, .lamp img, .lamp__glow, .critter, .critter img, .poster-butterfly img,
  .hero-sticker, [data-page="home"] .sticker, .luv__sticker { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.luv__block--column { margin-top: calc(-1 * clamp(20px, 3.5vw, 60px)); }

.pz-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; justify-items: stretch; column-gap: clamp(20px, 4vw, 70px); text-align: left; }
.pz-copy { position: relative; z-index: 3; display: grid; gap: 10px; align-content: center; }
.pz-hero .pz-hero__title { font-size: clamp(44px, 5.2vw, 100px); line-height: .9; text-align: left; white-space: nowrap; } 
.pz-hero .pz-text { max-width: 50ch; margin: 6px 0 0; padding: 0; text-align: left; font-family: var(--font-sub); font-size: clamp(16px, 1.3vw, 21px); line-height: 1.36; }
.pz-hero .pz-stage { margin-top: 0; }
.pz-hero .pz-set { height: min(50svh, 500px); max-width: 28vw; }
.pz-hero .pz-single { height: min(30svh, 300px); max-width: 16vw; }
@media (max-width: 900px) {
  .pz-hero { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .pz-hero .pz-set { max-width: 60vw; height: auto; }
  .pz-hero .pz-single { max-width: 28vw; height: auto; }
  .pz-hero .pz-hero__title { white-space: normal; font-size: clamp(40px, 11vw, 64px); }
}
.ph-grid--more { columns: 4 220px; margin-top: clamp(70px, 9vw, 140px); }

.ph-grid__fig { break-inside: avoid; margin: 0 0 clamp(14px, 2vw, 26px); }
.ph-grid__fig .ph-grid__item { margin-bottom: 6px; }
.ph-grid__fig figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.fz-hero { padding-bottom: clamp(30px, 4vw, 60px); }
.fz-hero__title { font-size: clamp(80px, 11vw, 190px); }
.fz-row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(20px, 4vw, 60px); width: min(1240px, 100%); margin-top: clamp(16px, 2.5vw, 34px); text-align: left; }
.fz-row .fz-text { max-width: 40ch; margin: 0; padding: 0; font-family: var(--font-sub); font-size: clamp(18px, 1.55vw, 24px); line-height: 1.38; text-align: left; }
.fz-row .fz-text p { margin: 0; }
.fz-row .fz-text p + p { margin-top: .8em; }
.fz-row .fz-stage { width: 100%; margin-top: 0; justify-self: end; }
.fz-row .fz-hoodie img { max-height: 56svh; width: auto; max-width: 100%; margin: 0 auto; }
@media (max-width: 900px) { .fz-row { grid-template-columns: 1fr; } }

.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero__oil { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; animation: oil-drift 38s ease-in-out infinite alternate, oil-wobble 13s ease-in-out infinite alternate; transform-origin: 45% 55%; }
@keyframes oil-drift { from { translate: -2% -1%; rotate: -1.2deg; } to { translate: 2% 1.5%; rotate: 1.4deg; } }
@keyframes oil-wobble { 0% { scale: 1 1.02; } 50% { scale: 1.03 1; } 100% { scale: 1.01 1.035; } }

.hero__bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse 64% 40% at 50% 46%, rgb(var(--paper-rgb) / .72), rgb(var(--paper-rgb) / 0) 100%); }
@media (prefers-reduced-motion: reduce) { .hero__oil { animation: none; } }

.hero__me { position: absolute; z-index: 1; right: clamp(0px, 1.5vw, 24px); bottom: 0; width: auto; height: min(46svh, 470px); max-width: none; pointer-events: none; filter: drop-shadow(8px 14px 16px rgb(0 0 0 / .28)); }
.hero__foot .link-ink { grid-column: 1; grid-row: 1; justify-self: start; }

.hero__foot .link-ink {
  padding: 10px 22px 8px; font-size: 14px; letter-spacing: .06em;
  background: var(--mint); color: var(--ink); rotate: -3deg;
  clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 55%, 100% 82%, 97% 100%, 2% 94%, 0 70%, 4% 45%, 0 18%);
  transition: rotate .3s var(--ease-paper), background .2s;
}
.hero__foot .link-ink:hover { background: var(--mint); color: var(--ink); rotate: 0deg; }
@media (max-width: 900px) {
  .hero { min-height: calc(100svh - 70px); }
  .hero__me { height: 30svh; right: -6px; }
  .hero__foot .link-ink { padding: 9px 16px 7px; font-size: 13px; } 
}

.index-card--a { --card-bg: var(--mint); --card-fg: var(--ink); }
.index-card--b { --card-bg: var(--rot); --card-fg: var(--ink); }
.index-card--c { --card-bg: var(--flieder); --card-fg: var(--paper); }
.index-card--d { --card-bg: var(--sand); --card-fg: var(--ink); }

.index-card--d .index-card__collage .collage-pic { height: 175%; top: -112%; left: 46%; box-shadow: none; }
.index-card--d .collage-pic img { border-radius: 0; }

.collage-pic.is-free { box-shadow: none; filter: drop-shadow(4px 10px 8px rgb(0 0 0 / .35)); }
.collage-pic.is-free img { border-radius: 0; }
.hero__logo { fill: var(--rot); }
.contact-card { background: var(--sand); }

.hero__logo { display: block; width: auto; height: clamp(110px, 13vw, 190px); margin: clamp(22px, 3vw, 40px) auto auto; fill: var(--rot); } 
.hero .hero__brand { padding-top: 0; }
.hero .hero__foot { margin-top: 0; padding-top: clamp(10px, 3vh, 30px); }
.index-card__collage--single .collage-pic--1 { left: 50%; top: 0; translate: -50% 0; rotate: -3deg; }
.index-card:hover .index-card__collage--single .collage-pic--1 { rotate: 2deg; translate: -50% -8px; }

.catalog { padding: clamp(30px, 5vw, 70px) var(--gutter) clamp(80px, 10vw, 150px); }
.catalog__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 5vw, 80px) clamp(14px, 2vw, 28px); align-items: start; }
.catalog__item { grid-column: var(--start) / span var(--span); margin: 0; }
.catalog__item:nth-child(3n) { align-self: end; }
.catalog__photo { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.catalog__photo img { display: block; width: 100%; height: auto; border-radius: 0; }
.catalog__text { max-width: 46ch; margin-top: 12px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.catalog__text .rich-key { font-family: inherit; font-size: inherit; letter-spacing: 0; font-weight: 700; color: var(--rot); }
.catalog--fade .catalog__item { opacity: 0; translate: 0 14px; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .8, .2, 1); }
.catalog--fade .catalog__item.is-in { opacity: 1; translate: 0 0; }
@media (max-width: 760px) {
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .catalog__item { grid-column: auto / span 1; align-self: start !important; }
  .catalog__item--wide { grid-column: 1 / -1; }
}

.notfound { display: grid; justify-items: center; gap: clamp(14px, 2vw, 26px); padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(80px, 10vw, 150px); text-align: center; }
.notfound__code { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(0px, 1vw, 16px); margin: 0; font-size: clamp(120px, 26vw, 360px); line-height: .9; }
.notfound__box { width: clamp(150px, 30vw, 420px); height: auto; margin: 0 -2%; rotate: -4deg; cursor: pointer;
  filter: drop-shadow(8px 10px 0 rgb(var(--ink-rgb) / .12)); animation: notfound-wobble 4s ease-in-out infinite; }
.notfound__box.is-hop { animation: notfound-hop .6s var(--ease-paper); }
@keyframes notfound-wobble { 50% { rotate: 3deg; translate: 0 -6px; } }
@keyframes notfound-hop { 40% { translate: 0 -40px; rotate: 12deg; } 100% { translate: 0 0; rotate: -4deg; } }
.notfound__note { position: absolute; right: -6%; top: -10%; font-size: clamp(32px, 3.8vw, 54px); line-height: 1; rotate: 8deg; color: var(--rot); }
.notfound .btn-ink { margin-left: 0; }
.notfound__line { max-width: 30ch; margin: 0; font-size: clamp(26px, 3.6vw, 48px); }
.notfound__text { max-width: 44ch; margin: 0 0 clamp(8px, 1.5vw, 18px); }
@media (max-width: 640px) { .notfound__note { position: static; flex: 0 0 100%; order: -1; margin-bottom: 10px; text-align: center; } .notfound__code { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .notfound__box { animation: none; } }

.fz-credit { position: relative; z-index: 2; margin: 0; padding: 0 var(--gutter) clamp(50px, 6vw, 90px); text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .7); }

.page-head.ph-bold { background-position: center 19%; margin-bottom: clamp(40px, 6vw, 90px); }
.ph-bold .page-head__kicker { border-top: 0; padding-top: 0; }
.ph-bold__nav { margin: 0; padding: 0; }
.ph-bold__nav a, .ph-bold__nav { color: var(--paper); }

.critter--crawler { pointer-events: auto; }

.barcode { width: 92px; padding: 0; border: 0; background: none; color: inherit; opacity: .55; transition: opacity .2s, rotate .2s; }
.barcode:hover, .barcode:focus-visible { opacity: 1; rotate: -3deg; }
.barcode svg, .nutrition__code svg { display: block; width: 100%; height: auto; fill: currentColor; }
.barcode text, .nutrition__code text { font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; }

.nutrition { position: fixed; inset: 0; z-index: 10001; display: flex; padding: 56px 16px 24px; background: rgb(var(--ink-rgb) / .78); perspective: 1400px; overflow-y: auto; }
.nutrition__pack {
  position: relative; margin: auto; width: min(440px, 100%); padding: clamp(22px, 4vw, 38px); background: var(--sand);
  background-image: radial-gradient(rgb(0 0 0 / .07) 1px, transparent 1.4px); background-size: 5px 5px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7); rotate: -1.5deg; transform-style: preserve-3d;
}
.nutrition__note { position: absolute; right: 18px; top: -34px; margin: 0; font-size: clamp(26px, 4vw, 36px); color: var(--paper); }
.nutrition__label { padding: 14px 16px; background: #fff; color: #000; border: 2px solid #000; font-family: var(--font-mono); }
.nutrition__label { container-type: inline-size; }
.nutrition__title { margin: 0; font-family: var(--font-display); font-size: min(clamp(30px, 5vw, 42px), 10.5cqw); line-height: 1; white-space: nowrap; } 
.nutrition__sub { margin: 4px 0 10px; font-size: 11px; }
.nutrition table { width: 100%; border-collapse: collapse; font-size: 12.5px; border-top: 8px solid #000; }
.nutrition th { font-weight: bold; text-align: right; padding: 4px 0; border-bottom: 3px solid #000; }
.nutrition td { padding: 5px 0; border-bottom: 1px solid #000; vertical-align: top; }
.nutrition td + td { text-align: right; padding-left: 12px; }
.nutrition tr.is-strong td { font-weight: bold; }
.nutrition tr.is-sub td:first-child { padding-left: 14px; }
.nutrition tbody tr:last-child td { border-bottom: 6px solid #000; }
.nutrition__small { margin: 8px 0 0; font-size: 10.5px; line-height: 1.4; }
.nutrition__recipe { margin-top: 10px; padding-top: 8px; border-top: 3px solid #000; }
.nutrition__recipe-title { margin: 0; font-family: var(--font-scribble); font-size: 26px; font-weight: normal; line-height: 1; rotate: -3deg; color: var(--rot); }
.nutrition__recipe .nutrition__small { margin-top: 5px; }
.nutrition__code { width: 120px; margin: 12px 0 0 auto; }
.nutrition__close { margin-top: 16px; padding: 8px 14px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 13px; box-shadow: 4px 4px 0 var(--flieder); }
.nutrition__close:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--flieder); }

.bug-case { position: fixed; left: 16px; bottom: 16px; z-index: 61; translate: 0 calc(100% + 40px); transition: translate .5s var(--ease-paper); pointer-events: none; }
.bug-case.is-open { translate: 0 0; }
.bug-case__label { margin: 0 0 4px 6px; font-size: 22px; color: var(--rot); }
.bug-case__glass {
  display: grid; grid-template-columns: repeat(4, 38px); gap: 8px; padding: 12px; background: var(--paper);
  border: 3px solid var(--ink); box-shadow: inset 0 0 0 4px var(--sand), 0 16px 30px -12px rgb(0 0 0 / .6);
}
.bug-case__bug { position: relative; display: grid; place-items: center; width: 38px; height: 38px; }
.bug-case__bug img { width: 34px; height: 34px; object-fit: contain; rotate: var(--r); }
.bug-case__bug::after { content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 5px; border-radius: 50%; background: var(--rot); translate: -50% -50%; box-shadow: 0 1px 1px rgb(0 0 0 / .4); }

.next-project {
  position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 24px;
  margin: 0 calc(50% - 50vw); padding: clamp(36px, 6vw, 80px) max(var(--gutter, 16px), 8vw);
  background: var(--paper); color: var(--ink); text-decoration: none; border-top: 2px solid var(--ink); overflow: hidden;
}
.next-project__kicker { grid-column: 1; }
.next-project__title { grid-column: 1; font-size: clamp(42px, 8vw, 120px); line-height: .9; transition: color .25s, translate .35s var(--ease-paper); }
.next-project__pic { grid-column: 2; grid-row: 1 / span 3; width: clamp(110px, 18vw, 260px); height: clamp(110px, 18vw, 260px); object-fit: cover; rotate: 4deg; box-shadow: 6px 6px 0 var(--flieder); transition: rotate .35s var(--ease-paper); }
.next-project__pic.is-free { object-fit: contain; box-shadow: none; filter: drop-shadow(6px 8px 6px rgb(0 0 0 / .35)); }
.next-project__arrow { grid-column: 1; font-family: var(--font-mono); font-size: 28px; color: var(--rot); transition: translate .35s var(--ease-paper); }
.next-project:hover .next-project__title { color: var(--rot); translate: 8px 0; }
.next-project:hover .next-project__arrow { translate: 14px 0; }
.next-project:hover .next-project__pic { rotate: -3deg; }