/* A live scene behind the whole page; project posters float on it. */
html { scroll-behavior: smooth; background: #15311d; }
body { overflow-x: clip; color: #f5f5f8; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Helvetica, Arial, sans-serif; }
body.talk-open { overflow: hidden; }
.hero, .projects, .projects *, .site-header, .scroll-cue { box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 60; padding: 14px 20px; color: #080b11; background: #c6ff72; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; isolation: isolate; pointer-events: none; }
.hero__scene { position: fixed; inset: 0; z-index: -1; pointer-events: auto; background: #15311d url("M3VDxHJ.jpg") center / cover; }
.hero__scene canvas { display: block; width: 100%; height: 100%; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 1; padding: 28px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: auto; background: linear-gradient(rgba(2,10,6,.35), transparent); }
.wordmark { color: #fff; text-decoration: none; font-size: 23px; font-weight: 850; letter-spacing: -.07em; }
.wordmark span { font-weight: 450; letter-spacing: -.05em; opacity: .75; }
.hero-nav { display: flex; align-items: center; gap: 32px; }
.index-link { display: flex; align-items: center; gap: 26px; padding: 10px 0; color: #fff; text-decoration: none; font-size: 13px; font-weight: 550; }
.index-link span { font-size: 22px; }
.motion-toggle { padding: 10px 13px; color: #fff; border: 1px solid #ffffff40; border-radius: 99px; background: #11111130; backdrop-filter: blur(12px); font: 11px/1.2 -apple-system, BlinkMacSystemFont, Helvetica, sans-serif; cursor: pointer; }
.motion-toggle:hover { background: #ffffff24; }
body .talk-trigger { background: linear-gradient(150deg, rgba(36,36,40,.92), rgba(24,24,28,.8)); }
.scroll-cue { position: absolute; bottom: 26px; left: 36px; z-index: 1; display: flex; align-items: center; gap: 15px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; pointer-events: auto; text-shadow: 0 1px 12px #071209; }
.scroll-cue small { display: block; margin-top: 5px; color: #ffffffb3; font-size: 11px; font-weight: 400; }
.scroll-cue__arrow { display: grid; place-items: center; width: 42px; height: 54px; border: 1px solid #ffffff59; border-radius: 24px; font-size: 22px; background: #08120a33; backdrop-filter: blur(12px); animation: scroll-hint 2.6s ease-in-out infinite; }
@keyframes scroll-hint { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

.projects { position: relative; padding: 62px 36px 0; pointer-events: none; }
.projects__intro, .project-card, .site-footer { pointer-events: auto; }
.projects__intro { margin-bottom: 38px; text-shadow: 0 1px 2px #000, 0 4px 22px #000, 0 0 36px #000000cc; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #d5d5d8; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #c6ff72; box-shadow: 0 0 12px #c6ff7240; }
.project-count { margin-left: auto; letter-spacing: .06em; text-transform: none; }
.projects__heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.projects h2 { margin: 0; font-size: clamp(36px, 3.4vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -.055em; }
.projects h2 .split::before, .projects h2 .split::after { opacity: .4; }
.projects__heading-row > p { margin: 0; color: #ececef; font-size: 13px; line-height: 1.6; }

/* One-pixel grid tracks pack naturally sized cards without changing DOM order. */
.project-grid { --column-gap: 24px; --card-gap: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap) var(--column-gap); align-items: start; }
.project-grid[data-masonry] { grid-auto-rows: 1px; row-gap: 0; }
.project-card { min-width: 0; --accent: 186,231,124; --poster-ratio: 3 / 4.1; }
.project-card[data-reveal="pending"] { opacity: 0; }
.project-card[data-reveal="entering"] .project-card__surface { will-change: transform, opacity, filter; transform-origin: 50% 70%; }
.project-card--broski { --accent: 205,244,123; --poster-ratio: 1 / 1; }
.project-card--atlas { --accent: 119,189,255; --poster-ratio: 3 / 3.5; }
.project-card--moonflower { --accent: 192,168,255; --poster-ratio: 3 / 4.65; }
.project-card--ligature { --accent: 234,177,153; --poster-ratio: 3 / 3.3; }
.project-card--snake { --accent: 200,231,110; --poster-ratio: 3 / 4.3; }
.project-card__surface { position: relative; display: block; min-width: 0; text-decoration: none; color: #f5f5f8; border-radius: 20px; }
.project-card__surface:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 6px; }
.project-art { position: relative; display: block; width: 100%; aspect-ratio: var(--poster-ratio); overflow: hidden; isolation: isolate; border-radius: 22px; box-shadow: 0 22px 44px -24px #000; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .4s ease, box-shadow .3s ease; }
.project-art::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(400px circle at var(--glow-x, 50%) var(--glow-y, 0%), rgba(var(--accent),.18), transparent 75%); opacity: 0; transition: opacity .3s ease; }
.project-art::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .1; background: repeating-linear-gradient(0deg, transparent, transparent 2px, #ffffff26 3px, transparent 4px); }
.project-art__composition { position: absolute; top: 48%; left: 50%; width: 340px; height: 300px; display: grid; place-items: center; transform: translate(-50%, -50%) scale(var(--art-scale, 1)); }
.art-label, .art-caption { position: absolute; left: 18px; right: 18px; z-index: 4; font: 8px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-align: center; opacity: .7; }
.art-label { top: 25px; }
.art-caption { bottom: 23px; font-size: 8px; letter-spacing: .12em; }
.project-card__body { position: relative; padding: 14px 40px 0 4px; text-shadow: 0 1px 2px #000, 0 3px 16px #000, 0 0 28px #000000e6; }
.project-card__meta { color: #c9c9cd; font-size: 10px; line-height: 1.5; }
.project-card__meta > span:last-child { display: none; }
.project-card h3 { margin: 4px 0 6px; font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; }
.project-card__body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: #dedee2; font-size: 12px; line-height: 1.5; }
.project-card__footer { position: absolute; top: 18px; right: 3px; }
.project-card__footer > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.project-card__arrow { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; font-size: 19px; color: #c6c6c9; transition: color .2s ease, background .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .project-card__surface:hover .project-art { box-shadow: -2px 0 0 #ff186055, 2px 0 0 #268cff66, 0 16px 28px -20px #000; }
  .project-card__surface:hover .project-art::before { opacity: 1; }
  .project-card__surface:hover .project-card__arrow { background: rgb(var(--accent)); color: #121412; }
}


.art-tifo { color: #dfff95; background: radial-gradient(ellipse at 50% 95%, #5a6c27 0, #283b20 42%, #14221e 82%); }
.tifo-screen { position: relative; display: flex; align-items: center; justify-content: center; width: 65%; height: 59%; padding-bottom: 13px; border: 1px solid rgba(221,255,162,.65); border-radius: 22px; transform: rotate(-8deg); background: linear-gradient(130deg, rgba(206,255,118,.2), rgba(11,24,13,.6) 55%, rgba(175,211,75,.1)); box-shadow: -3px 1px 0 rgba(255,75,116,.27), 3px -1px 0 rgba(117,208,255,.37), inset 0 0 50px rgba(180,219,87,.1), 0 35px 40px -22px #090f08; }
.tifo-logo { font-size: clamp(65px, 7.5vw, 104px); font-weight: 750; line-height: 1; letter-spacing: -.07em; text-shadow: -2px 0 rgba(255,79,137,.55), 2px 0 rgba(119,226,255,.55); }
.tifo-logo > span { font-size: 13px; vertical-align: top; display: inline-block; margin: 13px 0 0 9px; }
.tifo-play { position: absolute; bottom: 18px; left: 18px; font-size: 8px; }
.tifo-timeline { position: absolute; height: 2px; bottom: 21px; left: 39px; right: 20px; background: rgba(223,255,149,.18); }
.tifo-timeline::before { content: ""; display: block; height: 2px; width: 38%; background: #dfff95; box-shadow: 0 0 8px #dfff9580; }
.tifo-orbit { position: absolute; width: 91%; height: 37%; border: 1px solid rgba(212,255,154,.17); border-radius: 50%; transform: rotate(-24deg); }
.tifo-orbit--two { width: 73%; height: 82%; transform: rotate(24deg); }

.art-broski { color: #dbeabd; background: radial-gradient(ellipse at 50% 65%, #475442, #24352c 55%, #142821); }
.broski-orbit { position: absolute; width: 210px; height: 210px; border: 1px dashed rgba(214,241,168,.25); border-radius: 50%; }
.broski-receipt { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 148px; height: 198px; padding: 17px 0; color: #26392e; background: #e1e7c9; transform: rotate(7deg); box-shadow: 8px 14px 30px rgba(0,0,0,.25); clip-path: polygon(0 0,100% 0,100% 96%,94% 100%,88% 96%,82% 100%,76% 96%,70% 100%,64% 96%,58% 100%,52% 96%,46% 100%,40% 96%,34% 100%,28% 96%,22% 100%,16% 96%,10% 100%,4% 96%,0 99%); }
.broski-receipt > span { font: 8px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.broski-receipt > strong { font-size: 81px; font-weight: 400; line-height: 1.1; }
.broski-receipt > i { width: 65px; height: 12px; margin-top: 10px; background: repeating-linear-gradient(90deg, #26392e 0 1px, transparent 1px 3px, #26392e 3px 5px, transparent 5px 7px); }
.broski-sticker { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 83px; height: 83px; border-radius: 50%; background: #c8e79c; color: #24362a; font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 8px 18px #08130c55; }
.broski-sticker span { font: 42px/1.1 Arial, sans-serif; }
.broski-sticker--left { left: calc(50% - 153px); top: 29%; transform: rotate(-16deg); }
.broski-sticker--right { right: calc(50% - 152px); bottom: 20%; transform: rotate(15deg); background: #cabfe4; }

.art-atlas { color: #cce6f5; background: radial-gradient(ellipse at 45% 85%, #294b67, #152636 65%); }
.atlas-grid { position: absolute; inset: 0; background-image: linear-gradient(#7facbf10 1px, transparent 1px), linear-gradient(90deg, #7facbf10 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse, #000, transparent 80%); }
.atlas-library { position: absolute; width: 142px; height: 190px; border: 1px solid #a7c4da66; border-radius: 4px 15px 15px 4px; box-shadow: -4px 0 0 #0f2c3f, 0 18px 30px #08142160; }
.atlas-library--back { display: grid; place-items: center; font-size: 84px; color: #adcee8b3; background: linear-gradient(135deg, #3d6b84, #274457); transform: translate(43px, -5px) rotate(14deg); }
.atlas-library--front { display: flex; flex-direction: column; padding: 20px; background: linear-gradient(135deg, #ccdfdf, #8eb8c7); color: #1c394c; transform: translate(-29px, 6px) rotate(-8deg); }
.atlas-library--front > span { font: 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.atlas-library--front strong { font-size: 78px; font-weight: 400; line-height: 1.35; letter-spacing: -.07em; }
.atlas-library--front strong span { position: absolute; top: 19px; right: 17px; font-size: 20px; }
.atlas-library--front small { margin-top: auto; padding-top: 10px; border-top: 1px solid #1c394c55; font: 6px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }

.art-moonflower { color: #e1d8fd; background: radial-gradient(ellipse at 50% 65%, #4d3a69, #251e3d 60%, #1c192b); }
.moonflower-moon { position: absolute; top: 21%; width: 136px; height: 136px; border-radius: 50%; background: radial-gradient(circle at 28% 70%, #f1e6c5, #d6d2ee 55%, #9b83c5); box-shadow: 0 0 40px #ccaffe22; transform: rotate(-25deg); }
.moonflower-moon::after { content: ""; position: absolute; width: 116px; height: 116px; top: -14px; right: -18px; background: #302644; border-radius: 50%; }
.moonflower-orbit { position: absolute; width: 275px; height: 115px; border: 1px solid #c9afe32b; border-radius: 50%; transform: translateY(-15px) rotate(-32deg); }
.moonflower-stars { position: absolute; left: 26%; top: 28%; color: #c6afdd; font-size: 20px; }
.moonflower-stars span { position: absolute; left: 208px; top: 12px; font-size: 30px; }
.moonflower-stars i { position: absolute; left: 16px; top: 90px; font-size: 11px; font-style: normal; }
.moonflower-type { position: absolute; bottom: 22%; font: italic 29px/1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; text-shadow: 0 4px 20px #22162f; }

.art-ligature { color: #e8bdad; background: radial-gradient(ellipse at 50% 80%, #644c46, #382c30 70%); }
.ligature-lines { position: absolute; top: 31%; left: 13%; right: 13%; height: 41%; border-top: 1px solid #eac7b32e; border-bottom: 1px solid #eac7b347; }
.ligature-lines::before, .ligature-lines::after { content: ""; position: absolute; top: -16px; bottom: -16px; width: 1px; background: #eac7b32e; }
.ligature-lines::before { left: 23%; }.ligature-lines::after { right: 23%; }
.ligature-glyph { position: relative; margin-top: -35px; font: italic 180px/.8 Georgia, "Times New Roman", serif; letter-spacing: -.11em; color: #f1d5bf; text-shadow: -2px 1px #f5919780, 2px -1px #c3b6ff80, 0 12px 24px #21171960; }
.ligature-glyph > span { display: inline-block; color: #c79484; transform: translate(7px, 6px) rotate(8deg); }
.ligature-note { position: absolute; bottom: 14%; font: italic 13px/1 Georgia, "Times New Roman", serif; opacity: .8; }

.art-snake { color: #d5e49e; background: radial-gradient(ellipse at 50% 80%, #404c25, #242c1b 65%, #1d241a); }
.snake-board { display: grid; grid-template-columns: repeat(6, 41px); grid-template-rows: repeat(3, 41px); gap: 5px; transform: rotate(-8deg); }
.snake-board span { display: grid; place-items: center; border: 1px solid rgba(226,245,167,.3); border-radius: 5px; color: #d8e5ac; background: linear-gradient(135deg, #aec46a26, #a9c36c08); box-shadow: -1px 0 #f68f7a22, 1px 0 #a0cfff33, 0 5px 10px #11170755; font: 30px/1 Georgia, "Times New Roman", serif; }
.snake-board span:nth-child(1) { grid-area: 1 / 1; }
.snake-board span:nth-child(2) { grid-area: 1 / 2; }
.snake-board span:nth-child(3) { grid-area: 2 / 2; }
.snake-board span:nth-child(4) { grid-area: 3 / 2; }
.snake-board span:nth-child(5) { grid-area: 3 / 3; }
.snake-board span:nth-child(6) { grid-area: 3 / 4; }
.snake-board span:nth-child(7) { grid-area: 2 / 4; }
.snake-board span:nth-child(8) { grid-area: 2 / 5; color: #29321c; background: #d3e59b; }
.snake-board i { display: grid; place-items: center; grid-area: 1 / 6; color: #d3a7d0; font: 35px/1 Georgia, serif; }


/* The same artwork, composed as posters instead of landscape previews. */
.tifo-screen { width: 80%; height: 54%; }
.tifo-logo { font-size: 97px; }
.art-tifo { background: radial-gradient(ellipse at 50% 75%, #647e2d, #30461e 50%, #172d21); }
.art-broski { color: #405236; background: radial-gradient(ellipse at 55% 60%, #ecedcf, #c8d5a5); }
.broski-orbit { border-color: #52673444; }
.broski-receipt { background: #f4f2dc; }
.art-atlas { background: radial-gradient(ellipse at 50% 65%, #4584a2, #255272 70%, #203f56); }
.art-moonflower { background: radial-gradient(ellipse at 50% 60%, #644e8f, #332853 65%, #231e38); }
.moonflower-type { bottom: 17%; left: 12px; right: 12px; text-align: center; font-size: clamp(24px, 2.4vw, 36px); }
.moonflower-stars { left: 17%; }
.moonflower-stars span { left: 218px; }
.art-ligature { color: #684638; background: radial-gradient(ellipse at 50% 65%, #f2dfc6, #dcc5ae); }
.ligature-glyph { color: #514038; text-shadow: -2px 1px #d2676940, 2px -1px #889abf40; }
.ligature-glyph > span { color: #a06453; }
.ligature-lines { border-color: #68463835; }
.ligature-lines::before, .ligature-lines::after { background: #68463830; }
.ligature-note { bottom: 15%; left: 12px; right: 12px; text-align: center; }
.art-snake { background: radial-gradient(ellipse at 50% 65%, #596632, #343f22 65%, #252f1d); }
.snake-board { transform: rotate(-8deg) scale(1.08); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding: 30px 0 94px; border-top: 1px solid #ffffff18; text-shadow: 0 1px 14px #000000e6; }
.site-footer .wordmark { font-size: 19px; }
.site-footer p { color: #d0d0d4; font-size: 11px; }
.site-footer > a:last-child { color: #ececef; text-decoration: none; font-size: 11px; padding: 12px 0; }
.site-header a:focus-visible, .motion-toggle:focus-visible, .scroll-cue:focus-visible, .site-footer a:focus-visible { outline: 2px solid #c6ff72; outline-offset: 5px; border-radius: 3px; }
@media (max-width: 1399px) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --column-gap: 20px; }
  .projects { padding: 50px 24px 0; }
  .site-header { padding: 22px 24px; }
  .scroll-cue { left: 24px; }
}
@media (max-width: 620px) {
  .project-grid { --column-gap: 14px; --card-gap: 24px; }
  .projects { padding: 36px 18px 0; }
  .projects__intro { margin-bottom: 28px; }
  .projects__heading-row { flex-direction: column; gap: 10px; }
  .projects__heading-row > p { font-size: 12px; }
  .project-count { font-size: 8px; }
  .project-art { border-radius: 17px; }
  .art-label, .art-caption { left: 12px; right: 12px; font-size: 6px; }
  .art-label { top: 17px; }
  .art-caption { bottom: 17px; }
  .project-card h3 { font-size: 15px; }
  .project-card__meta { font-size: 9px; }
  .project-card__body > p { font-size: 11px; }
  .project-card__body { padding-right: 24px; }
  .project-card__arrow { width: 22px; height: 22px; font-size: 17px; }
  .moonflower-type { font-size: 22px; }
  .ligature-note { font-size: 11px; }
  .hero-nav { gap: 18px; }
  .index-link { gap: 12px; font-size: 12px; }
  .motion-toggle { position: absolute; top: 78px; right: 24px; }
  .wordmark { font-size: 21px; }
  .scroll-cue { bottom: 88px; }
  .site-footer { flex-wrap: wrap; gap: 6px 20px; }
  .site-footer p { order: 3; width: 100%; }
}
@media (max-width: 479px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-card { --poster-ratio: 3 / 3.5; }
  .project-card--broski { --poster-ratio: 1 / 1; }
  .project-card--atlas { --poster-ratio: 3 / 3.2; }
  .project-card--moonflower { --poster-ratio: 3 / 4.3; }
  .project-card--ligature { --poster-ratio: 3 / 3.1; }
  .project-card--snake { --poster-ratio: 3 / 3.9; }
  .project-card__body { padding: 12px 36px 0 3px; }
  .project-card h3 { font-size: 17px; }
  .project-card__meta { font-size: 10px; }
  .project-card__body > p { font-size: 12px; }
  .project-card__arrow { width: 29px; height: 29px; font-size: 19px; }
  .art-label, .art-caption { font-size: 8px; }
  .moonflower-type { font-size: 29px; }
  .ligature-note { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue__arrow { animation: none; }
  .project-art, .project-art::before, .project-card__arrow { transition: none; transform: none; }
}