:root {
  color-scheme: light;
  --paper: #ffffff;
  --surface: #ffffff;
  --ink: #182019;
  --muted: #526054;
  --rule: #dbe3dc;
  --red: #315b2d;
  --red-dark: #315b2d;
  --accent-soft: #edf4eb;
  --lime: #d9fb60;
  --showcase-paper: #f5f3ee;
  --canvas-ink: #252824;
}
body .site-header.is-scrolled { background: var(--paper); box-shadow: none; }
body .skip, body .mark, body .button-primary { background: var(--lime); color: #101809; }
body .button-primary:hover { background: #e2ff99; color: #101809; }
body .header-contact:hover { background: var(--lime); color: #101809; }
body .contact { background: var(--paper); border-top: 1px solid var(--rule); color: var(--ink); }
body .contact .eyebrow { color: var(--red-dark); }
.showcase-stage, .showcase-rail, .genie-layer {
  --ink: #1c211c;
  --muted: #51554c;
  --rule: #20261d2b;
  --red: var(--ink);
  --red-dark: var(--ink);
  color: var(--ink);
}
body :is(.showcase-stage, .genie-layer) .button-primary {
  background: var(--ink);
  color: #ffffff;
}
body :is(.showcase-stage, .genie-layer) .button-primary:hover {
  background: #363d33;
}
.showcase { position: relative; padding-block: clamp(23px, 4.4vw, 64px) clamp(33px, 5vw, 72px); }
.showcase-stage {
  display: grid; isolation: isolate; overflow: hidden;
  border: 1px solid #e6e2d8; border-radius: clamp(21px, 3.3vw, 35px);
  background: var(--showcase-paper);
}
.showcase-panel { grid-area: 1 / 1; min-width: 0; min-height: clamp(445px, 45vw, 565px); }
.showcase-panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.showcase-stage[data-genie] { background: transparent; border-color: transparent; }
.showcase-stage[data-genie] > .showcase-panel { visibility: hidden; }
.genie-layer { position: absolute; z-index: 2; pointer-events: none; }
.genie-strip {
  position: absolute; inset: 0 0 auto; overflow: hidden;
  transform-origin: 0 0; will-change: transform, opacity;
}
.genie-surface { position: absolute; inset: 0; opacity: 0; }
.genie-strip .genie-snapshot { position: absolute; inset-inline: 0; overflow: hidden; }
.genie-strip canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.genie-strip .visual-foot > span { font-size: 12px; }
.showcase .profile-panel {
  gap: clamp(20px, 4vw, 60px); padding: clamp(24px, 4.5vw, 68px);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.profile-panel h1 { font-size: clamp(65px, 8vw, 116px); }
.profile-panel .lead { max-width: 36ch; }
.profile-panel .hero-actions { margin-top: 15px; }
.profile-panel .identity { margin-top: 18px; }
.profile-panel .identity-links a { color: var(--ink); }
.profile-panel .canvas-stage {
  min-height: 330px; border: 1px solid #3c413a; color: #e4e7dc;
  background: var(--canvas-ink);
}
.profile-panel .canvas-stage::before {
  opacity: 1;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 33px, #b6c2b217 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 33px, #b6c2b217 34px 35px);
}
.profile-panel .canvas-stage::after { border-color: #b6c2b23d; }
.profile-panel .canvas-stage :focus-visible { outline-color: #f3ecdc; }
.profile-panel .mode, .profile-panel .replay { background: #252824; border-color: #62685d; color: #e4e7dc; }
.profile-panel .replay:hover { background: #41473e; }
.profile-panel .mode button { color: #e4e7dc; }
.profile-panel .mode button[aria-pressed="true"] { background: #f1eee4; color: #252824; }
.project-panel {
  position: relative; isolation: isolate; display: grid; align-items: end;
  padding: clamp(24px, 5vw, 70px);
  background: var(--panel-color);
}
.works-panel { --panel-color: #f8e8ee; }
.comic-panel { --panel-color: #f4eee3; }
.panel-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.panel-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel-color) 25%, transparent 82%); }
.works-art span {
  position: absolute; top: 10%; right: 10%; width: min(47%, 440px); height: 63%;
  border: 1px solid #b5738c6b; border-radius: 24px;
  background: linear-gradient(145deg, #fff6fa7d, #ed9abd51);
  transform: rotate(-14deg);
}
.works-art span:nth-child(2) { top: 16%; right: 16%; transform: rotate(-6deg); }
.works-art span:nth-child(3) { top: 22%; right: 22%; transform: rotate(2deg); }
.comic-art span {
  position: absolute; inset: 12% 12% auto auto; width: 35%; height: 63%;
  border: 1px solid #74614a60; border-radius: 16px; transform: rotate(-13deg);
  background: repeating-linear-gradient(138deg, #74614a29 0 3px, transparent 4px 30px);
}
.comic-art span:nth-child(2) { right: 18%; top: 19%; transform: rotate(-6deg); }
.comic-art span:nth-child(3) { right: 25%; top: 24%; transform: rotate(2deg); }
.project-copy { position: relative; max-width: 510px; }
.project-copy h2 { margin-block: 7px 13px; font-size: clamp(48px, 7vw, 100px); }
.project-copy > p:not(.eyebrow) { max-width: 32ch; margin-bottom: 23px; color: var(--muted); }
.showcase-controls { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.showcase-rail {
  --showcase-gap: 12px;
  --showcase-fade: 40px;
  --showcase-duration: 40s;
  flex: 1; min-width: 0; overflow: clip; padding-block: 4px;
}
.showcase-track { position: relative; display: flex; width: 100%; }
.showcase-group {
  position: relative; display: flex; align-items: center; flex: 0 0 100%; min-width: 0;
  gap: var(--showcase-gap); padding-inline-end: var(--showcase-gap);
}
.showcase-rail[data-loop] {
  mask-image: linear-gradient(to right, transparent, #000 var(--showcase-fade), #000 calc(100% - var(--showcase-fade)), transparent);
}
.showcase-rail[data-loop] .showcase-track {
  width: 200%;
  animation: showcase-scroll var(--showcase-duration) linear infinite;
}
.showcase-rail[data-loop] .showcase-group { flex-basis: 50%; }
.showcase-rail[data-paused] .showcase-track,
.showcase-rail[data-keyboard-focus] .showcase-track,
.showcase-rail[data-touch-hold] .showcase-track,
.showcase-rail[data-switching] .showcase-track,
.showcase-rail[data-background] .showcase-track,
.showcase-rail[data-offscreen] .showcase-track { animation-play-state: paused; }
@keyframes showcase-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.showcase-tile {
  position: relative; isolation: isolate; display: grid; place-items: end start;
  flex: 1 1 0; min-width: 0; min-height: 84px; padding: 14px 16px;
  overflow: hidden; border: 1px solid var(--rule); border-radius: 17px;
  color: var(--ink); text-align: left; font-weight: 600; cursor: pointer;
  background-color: var(--tile-rest);
  transition: background-color var(--motion-base) var(--ease-soft), border-color var(--motion-base), flex-grow var(--motion-base) var(--ease-soft), min-height var(--motion-base) var(--ease-soft);
}
/* Move the label's available-height wrapper using transforms only.
   Its top/left inset stays equal, including after the inner text scales. */
.showcase-tile {
  --tile-label-inset: 16px;
  --tile-label-bottom: 14px;
  --tile-label-scale: 1.28;
}
.showcase-tile > .tile-label {
  position: absolute;
  inset: var(--tile-label-inset) var(--tile-label-inset) var(--tile-label-bottom);
  line-height: 1.75;
  pointer-events: none;
  transform: translate3d(0, calc(100% - 1.75em), 0);
  transition: transform 420ms var(--ease-soft);
  will-change: transform;
}
.tile-label > span {
  display: block; width: max-content; white-space: nowrap;
  transform: scale(1); transform-origin: top left;
  transition: transform 420ms var(--ease-soft);
  will-change: transform;
}
.showcase-tile:focus-visible > .tile-label {
  transform: translate3d(0, 0, 0); transition-delay: 0ms;
}
.showcase-tile:focus-visible > .tile-label > span {
  transform: scale(var(--tile-label-scale));
  transition-duration: 420ms; transition-delay: 0ms;
}
@media (hover: hover) and (pointer: fine) {
  .showcase-tile:hover > .tile-label {
    transform: translate3d(0, 0, 0); transition-delay: 0ms;
  }
  .showcase-tile:hover > .tile-label > span {
    transform: scale(var(--tile-label-scale));
    transition-duration: 420ms; transition-delay: 0ms;
  }
}
.showcase-tile:active { scale: .98; }
.showcase-tile:focus-visible { outline-offset: -3px; }
.tile-profile { --tile-rest: #e7ebdc; --tile-selected: var(--lime); }
.tile-works { --tile-rest: #ede2e7; --tile-selected: #ed9abd; }
.tile-comic { --tile-rest: #eee7dc; --tile-selected: #edbf77; }
.showcase-tile:hover { border-color: #20261d55; }
.showcase-tile:is([aria-pressed="true"], [data-selected]) {
  flex-grow: 1.32; min-height: 105px; border-color: transparent;
  background-color: var(--tile-selected); font-size: 19px;
}
.showcase-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#comic-experience { scroll-margin-block-start: 12px; }
@media (max-width: 870px) {
  .profile-panel h1 { font-size: clamp(56px, 10vw, 90px); }
  .profile-panel .canvas-stage { min-height: 280px; }
}
@media (max-width: 670px) {
  .showcase-panel { min-height: 480px; }
  .showcase .profile-panel { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 15px; padding: 19px; }
  .profile-panel h1 { font-size: clamp(50px, 15vw, 73px); }
  .profile-panel .intro-role { font-size: 15px; }
  .profile-panel .lead { margin-top: 6px; font-size: 13px; }
  .profile-panel .identity { margin-top: 10px; padding-top: 8px; }
  .profile-panel .identity-links a { min-height: 27px; }
  .profile-panel .hero-actions { margin-top: 7px; }
  .profile-panel .hero-visual { margin-top: 0; width: 100%; min-width: 0; }
  .profile-panel .canvas-stage { width: 100%; min-width: 0; min-height: 192px; max-height: 226px; aspect-ratio: 1.48; border-radius: 16px; }
  .profile-panel .stage-title { top: 12px; }
  .profile-panel .mode button { min-height: 34px; min-width: 44px; }
  .project-panel { align-items: end; padding: 22px; }
  .panel-art::after { background: linear-gradient(0deg, var(--panel-color) 10%, transparent 85%); }
  .works-art span { width: 56%; height: 46%; border-radius: 18px; }
  .comic-art span { width: 52%; height: 47%; right: 12%; top: 13%; }
  .showcase-controls { margin-top: 7px; gap: 7px; }
  .showcase-rail { --showcase-gap: 6px; --showcase-fade: 15px; --showcase-duration: 24s; }
  .showcase-tile { min-height: 61px; padding: 7px; border-radius: 13px; font-size: 13px; }
  .showcase-tile { --tile-label-inset: 7px; --tile-label-bottom: 7px; --tile-label-scale: 1.12; }
  .showcase-tile:is([aria-pressed="true"], [data-selected]) { min-height: 79px; font-size: 15px; }
  .profile-panel .mode button { min-width: 44px; min-height: 44px; }
  /* Reserve a stable rail footprint; selection only scales the card, never its layout. */
  .showcase-rail { padding-block: 5px; --showcase-duration: 30s; }
  .showcase-tile,
  .showcase-tile:is([aria-pressed="true"], [data-selected]) {
    flex-grow: 1; min-height: 80px; font-size: 13px;
    transition: transform 320ms var(--ease-soft), background-color 240ms var(--ease-soft), border-color 240ms;
  }
  .showcase-tile { transform: scale(.96); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
  .showcase-tile:is([aria-pressed="true"], [data-selected]) { transform: scale(1); }
  .showcase-tile > .tile-label,
  .showcase-tile > .tile-label > span { transition-duration: 320ms; }
}
@media (max-width: 670px) and (hover: none), (max-width: 670px) and (pointer: coarse) {
  /* A single tap selects the panel and plays the label motion; no hover emulation. */
  /* On phones, pin the label at its original lower-left position in every state. */
  .showcase .showcase-tile > .tile-label {
    transform: translate3d(0, calc(100% - 1.75em), 0);
    transition: none;
  }
  .showcase-tile > .tile-label > span { transform-origin: bottom left; }
  .showcase-tile:is([aria-pressed="true"], [data-selected]) > .tile-label > span {
    transform: scale(var(--tile-label-scale));
  }
  .showcase-tile:active { scale: 1; }
  .showcase-tile:active > .tile-label > span { opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-tile:active { scale: 1; }
  .showcase-tile > .tile-label, .showcase-tile > .tile-label > span { transition: none; }
}