@font-face {
  font-family: 'Relative';
  src: local('Relative Pro Book'), local('RelativePro-Book');
  font-style: normal; font-weight: 400;
}
@font-face {
  font-family: 'Relative';
  src: local('Relative Pro Medium'), local('RelativePro-Medium');
  font-style: normal; font-weight: 500;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000; font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #fcfaf4; --ink: #211e1b; --orange: #ff5000; --lemon: #f9ff0d;
  --pink: #ff99c8; --mint: #a2ffd0;
  --edge: clamp(18px, 2.7vw, 58px);
  --ease: cubic-bezier(.2,.74,.25,1);
  font-family: 'Relative','DM Sans','Helvetica Neue',Arial,sans-serif;
  font-synthesis: none; -webkit-text-size-adjust: 100%;
  background: var(--paper); color: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, p { margin: 0; }
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
::selection { background: #ff99c8; color: #181512; text-shadow: none; }
.bio ::selection, .intro-card ::selection { background: #f9ff0d; color: #181512; }
.email::selection { background: #a2ffd0; color: #181512; }
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: calc(clamp(17px,1.7vw,30px) + var(--gallery-header-inset, 0px)) var(--edge);
}
.masthead h1 {
  font-size: clamp(27px,3.3vw,76px); line-height: .97; font-weight: 400;
  letter-spacing: -.058em;
}
.masthead h1 span { white-space: nowrap; }
.identity { flex: none; display: flex; align-items: center; gap: clamp(30px,5.7vw,145px); }
.identity p, .contact-link { font-size: clamp(15px,1.1vw,23px); line-height: 1.12; letter-spacing: -.025em; }
.contact-link, .back { display: inline-flex; align-items: center; white-space: nowrap; gap: .36em; min-height: 44px; }
.arrow { display: inline-block; transition: transform 180ms var(--ease); }
.contact-link:is(:hover,:focus-visible) .arrow { transform: translateY(3px); }
.back:is(:hover,:focus-visible) .arrow { transform: translateY(-3px); }
.gallery {
  --default-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, var(--default-columns)), minmax(0, 1fr));
}
.tile, .intro-card { min-width: 0; width: 100%; aspect-ratio: 4/5; position: relative; }
.tile { display: block; container-type: inline-size; text-align: start; isolation: isolate; overflow: hidden; padding: 0; background: var(--median); color: var(--letter); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tile > img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.tile-ink {
  position: absolute; inset: 0; display: grid; place-items: end start;
  padding: clamp(12px, 4.2cqi, 28px); background: var(--median);
  clip-path: inset(0 100% 0 0); transition: clip-path 180ms var(--ease);
}
.tile[aria-pressed="true"] .tile-ink { clip-path: inset(0); }
.tile-title { max-width: 100%; font-size: clamp(14px, 4.6cqi, 24px); font-weight: 400; letter-spacing: -.022em; line-height: 1.13; text-wrap: pretty; overflow-wrap: anywhere; }
.tile:focus-visible { outline-offset: -8px; z-index: 1; }
.tile, .tile-title, .bio-word { -webkit-user-select:text; user-select:text; }
.tile-title::selection { background: var(--letter); color: var(--median); }

.intro-card, .bio { background-color: var(--orange); }
.intro-card {
  display: flex; align-items: flex-end; padding: clamp(20px,2.7vw,58px);
  container-type: inline-size; grid-column: span var(--intro-span, 1); aspect-ratio: auto;
}
.intro-card h2 { position: relative; z-index: 1; color: var(--lemon); font-size: calc(22cqw / var(--intro-span, 1)); font-weight: 400; line-height: .90; letter-spacing: -.07em; }
.intro-arrow { color: var(--lemon); width: 18%; max-width: 104px; position: absolute; top: 9%; right: 9%; }
.closing-page { display: grid; grid-template-rows: 1fr auto; min-height: 100vh; min-height: 100dvh; }
.bio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 124px);
  padding: clamp(32px, 6svh, 92px) clamp(24px, 5vw, 112px);
}
.bio-story {
  align-self: center;
  width: min(100%, 41ch);
  font-size: clamp(22px, 2.08vw, 38px);
  line-height: 1.27;
  letter-spacing: -.022em;
  text-wrap: pretty;
}
.bio-story p + p { margin-block-start: .85em; }
.bio-story .bio-signoff { margin-block-start: 1.45em; }
.bio-signoff a {
  text-decoration: underline;
  text-decoration-thickness: .075em;
  text-underline-offset: .15em;
  transition: background-color 140ms var(--ease);
}
.bio-signoff a:is(:hover,:focus-visible) { background-color: var(--lemon); }
.bio-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(205px, 28svh, 330px);
  pointer-events: none;
}
.bio-drawing {
  position: absolute;
  width: min(96%, 32vw, 470px);
  height: 99%;
  max-height: 47svh;
  object-fit: contain;
  opacity: 0;
  transform: translateY(4px) rotate(-3deg) scale(.97);
  transition: opacity 140ms ease-out, transform 210ms var(--ease);
}
.bio:not(:has([aria-controls="bio-character"][aria-pressed="true"], [aria-controls="bio-cupcake"][aria-pressed="true"])) #bio-hand,
.bio:has([aria-controls="bio-character"][aria-pressed="true"]) #bio-character,
.bio:has([aria-controls="bio-cupcake"][aria-pressed="true"]) #bio-cupcake {
  opacity: 1;
  transform: none;
}
.bio:has([aria-controls="bio-hand"][aria-pressed="true"]) #bio-hand { transform: rotate(-3deg); }
.bio-word {
  display: inline-block; position: relative; background: transparent;
  margin: 0; padding: 0; font: inherit; line-height: inherit; letter-spacing: inherit;
  vertical-align: baseline; white-space: nowrap; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.word-pair { white-space: nowrap; }
.bio .bio-word {
  background-image: linear-gradient(var(--lemon),var(--lemon));
  background-repeat: no-repeat; background-position: 0 94%; background-size: 100% .07em;
  transition: background-size 160ms var(--ease);
}
.bio .bio-word[aria-pressed="true"] { background-size: 100% .78em; }
.peek {
  display: block; position: absolute; z-index: 4; pointer-events: none;
  width: clamp(250px,31vw,470px); max-width: min(calc(100vw - 36px),46svh); height: auto;
  left: 50%; bottom: calc(100% + 7px);
  opacity: 0; visibility: hidden;
  transform: translate(calc(-50% + var(--peek-shift,0px)),8px) rotate(-5deg) scale(.92);
  transform-origin: 50% 95%;
  transition: opacity 150ms,transform 210ms var(--ease),visibility 0s 210ms;
}
.peek.portrait { width: min(clamp(180px,22vw,380px),34svh); bottom: calc(100% + .87em + 8px); }
.intro-card:has(.name-word[aria-pressed="true"]) { z-index: 2; }
.bio-word.peek-below .peek { top: calc(100% + 8px); bottom: auto; transform-origin: 50% 5%; }
.bio-word[aria-pressed="true"] { z-index: 3; }
.bio-word[aria-pressed="true"] .peek {
  visibility: visible; opacity: 1;
  transform: translate(calc(-50% + var(--peek-shift,0px)),0) rotate(-2deg);
  transition-delay: 0s;
}
.contact-strip {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: baseline;
  gap: clamp(24px,4vw,88px); padding: clamp(12px,2vh,32px) var(--edge);
}
.email { width: fit-content; max-width: 100%; font-size: clamp(20px,2.35vw,52px); line-height: 1.12; letter-spacing: -.045em; }
.socials, .back { font-size: clamp(15px,1.12vw,24px); line-height: 1.1; letter-spacing: -.025em; }
.socials { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(14px,1.65vw,36px); }
.socials a, .email { display: inline-block; padding-block: .3em; }
.socials a:is(:hover,:focus-visible), .email:is(:hover,:focus-visible) { text-decoration: underline; text-decoration-thickness: .09em; text-underline-offset: .16em; }
@media (any-hover:hover) and (any-pointer:fine) {
  :root {
    --arrow-cursor: url('assets/cursor-arrow.png?v=2') 2 2, auto;
    --burst-cursor: url('assets/cursor-burst.png?v=2') 48 48, pointer;
    cursor: var(--arrow-cursor);
  }
  @supports (cursor: image-set(url('assets/cursor-arrow.png?v=2') 1x) 2 2, auto) {
    :root {
      --arrow-cursor: image-set(url('assets/cursor-arrow.png?v=2') 1x,url('assets/cursor-arrow@2x.png?v=2') 2x) 2 2, auto;
      --burst-cursor: image-set(url('assets/cursor-burst.png?v=2') 1x,url('assets/cursor-burst@2x.png?v=2') 2x) 48 48, pointer;
    }
  }
  .tile { cursor: var(--arrow-cursor); }
  a, .bio-word { cursor: var(--burst-cursor); }
  h1, .bio p, .identity p, .intro-card h2 { cursor: text; }
  html:active:has(.bio-word:active) .bio-word:active { cursor: text; }
  html::-webkit-scrollbar { width: 26px; }
  html::-webkit-scrollbar-track { background: var(--paper); }
  html::-webkit-scrollbar-thumb { background: var(--orange); border: 0; border-radius: 0; box-shadow: none; min-height: 36px; }
  @supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--orange) var(--paper); } }
}
@media (max-width:1050px) {
  .gallery { --default-columns: 2; }
  .contact-strip { grid-template-columns: minmax(0,1fr) auto; gap: 0 24px; }
  .email { grid-column: 1 / -1; font-size: clamp(22px,3.4vw,34px); }
  .socials { grid-column: 1; }
  .back { grid-column: 2; }
}
@media (max-width:700px) and (orientation:portrait), (max-width:540px) {
  .bio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(min-content, 1fr) auto;
    gap: clamp(20px, 3.5svh, 40px);
    padding: clamp(26px, 4.5svh, 52px) var(--edge);
  }
  .bio-story { justify-self: center; font-size: clamp(18px, 4.7vw, 23px); }
  .bio-stage { min-height: clamp(138px, 23svh, 242px); }
  .bio-drawing { width: min(70vw, 295px); max-height: 30svh; }
}
@media (orientation:landscape) and (max-height:500px) and (min-width:541px) {
  .bio {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    padding: 20px var(--edge);
    gap: 16px 4vw;
  }
  .bio-stage { min-height: 120px; }
  .bio-story { font-size: clamp(16px, 2.55vw, 20px); line-height: 1.26; }
}
@media (max-width:600px) {
  .masthead { gap: 14px; }
  .masthead h1 { font-size: clamp(25px,6.7vw,38px); }
  .identity p { display: none; }
  .contact-link { font-size: 15px; }
  .gallery { --default-columns: 1; }
  .gallery:not([data-multiple-columns]) .intro-card { min-height: 13rem; padding: 38px var(--edge) 0; }
  .gallery:not([data-multiple-columns]) .intro-card h2 { font-size: clamp(54px,15vw,85px); }
  .gallery:not([data-multiple-columns]) .intro-arrow { width: 56px; top: 17%; right: var(--edge); }
  .peek { width: min(69vw,280px); }
  .contact-strip { gap: 8px 8px; }
  .email { font-size: clamp(18px,5.55vw,28px); }
  .socials { gap: clamp(9px,3.2vw,18px); }
  .socials,.back { font-size: clamp(14px,3.45vw,17px); }
  .socials a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors:active) {
  .bio .bio-word { text-decoration: underline; }
  .tile-ink { background: Canvas; color: CanvasText; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); border: 0; }