:root {
  --black: #111111;
  --panel: #222222;
  --white: #f5f5f2;
  --acid: #e7ff00;
  --muted: #a4a4a0;
  --line: rgba(245,245,242,.35);
  --mono: "Courier New", Courier, monospace;
  --sans: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: #080808; color: var(--white); font-family: var(--sans); }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { width: min(1440px, 100%); margin: 0 auto; padding: 30px clamp(18px, 4vw, 58px) 20px; overflow: hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding: 0 0 22px; }
.wordmark { color:var(--acid); font-weight:700; font-size: clamp(22px, 2.4vw, 34px); letter-spacing:-1.5px; }
.wordmark span { font-size:.62em; vertical-align:top; margin-left:2px; }
.availability { font-size:12px; color:var(--acid); display:flex; align-items:center; gap:9px; }
.availability i { display:block; width:7px; height:7px; background:var(--acid); border-radius:50%; box-shadow:0 0 12px #e7ff0070; }
.hero { position:relative; padding: 34px 0 30px; border-bottom:1px solid var(--line); }
.eyebrow { font: 12px var(--mono); letter-spacing:.11em; color:#c8c8c4; margin:0 0 28px; }
h1 { margin:0; line-height:.94; letter-spacing:-.065em; font-size:clamp(43px, 7.2vw, 106px); font-weight:700; }
h1 span:first-child { display:block; color:var(--white); }
h1 strong { display:block; color:var(--acid); font-weight:700; white-space:normal; }
.cursor { display:inline-block; animation:blink 1s steps(2,start) infinite; margin-left:.02em; }
.hero-nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:25px; position:relative; z-index:2; }
.nav-pill { border:1px solid #bcbcb8; border-radius:999px; padding:12px 20px; font-size:13px; transition:background .2s,color .2s,border-color .2s,transform .2s; }
.nav-pill:hover { transform:translateY(-3px); border-color:var(--acid); }
.nav-pill.active { background:var(--acid); color:var(--black); border-color:var(--acid); font-weight:700; }
.nav-pill span { margin-left:10px; font-size:17px; }
.orbit { border:1px solid var(--acid); border-radius:50%; width:145px; height:43px; transform:rotate(-28deg); position:absolute; right:4%; bottom:31px; opacity:.6; animation:float 6s ease-in-out infinite; }
.spark { color:var(--acid); position:absolute; font-size:40px; }
.spark-hero { right:1%; top:35px; animation:spin 16s linear infinite; }
.work-section { padding:30px 0 34px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:24px; }
.section-heading h2 { color:var(--acid); font-size:clamp(15px, 1.8vw, 22px); letter-spacing:-.04em; margin:0; white-space:nowrap; }
.section-heading h2 span { color:var(--white); font-weight:400; }
.filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.filter { cursor:pointer; border:1px solid #777; border-radius:99px; background:transparent; color:var(--white); font-size:10px; padding:9px 13px; transition:.2s ease; }
.filter:hover,.filter.active { background:var(--acid); color:var(--black); border-color:var(--acid); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 26px; }
.project-card { display:block; text-align:left; color:var(--white); border:0; padding:0; background:transparent; position:relative; cursor:pointer; min-width:0; }
.artwork { width:100%; aspect-ratio:1.12 / 1; position:relative; overflow:hidden; border-radius:7px; isolation:isolate; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .artwork { transform:translateY(-5px) rotate(-.4deg); }
.card-acid .artwork { background:var(--acid); color:#080808; }
.card-paper .artwork { background:#e3e1db; color:#111; }
.artwork::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.14; background-image:radial-gradient(#111 0.6px,transparent .7px); background-size:5px 5px; mix-blend-mode:multiply; }
.poster-words { position:absolute; z-index:2; left:5%; top:7%; font-weight:700; font-style:italic; font-size:clamp(36px,6.2vw,90px); line-height:.79; letter-spacing:-.085em; transform:skew(-7deg) rotate(-2deg); }
.big-star { position:absolute; right:6%; bottom:5%; font-size:clamp(70px,10vw,145px); line-height:1; }
.scribble { position:absolute; width:54%; height:24%; border:1.5px solid #111; border-radius:50%; right:4%; bottom:25%; transform:rotate(-28deg); }
.scribble::after { content:""; position:absolute; width:80%; height:80%; border:1.5px solid #111; border-radius:50%; left:10%; top:20%; }
.barcode { position:absolute; bottom:9%; left:6%; height:13%; width:12%; background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px); }
.art-micro { position:absolute; bottom:8%; left:22%; font:8px var(--mono); letter-spacing:.2em; line-height:1.7; }
.checker { position:absolute; bottom:-1px; right:0; width:11%; aspect-ratio:1; background:conic-gradient(#111 25%,transparent 0 50%,#111 0 75%,transparent 0); background-size:50% 50%; }
.tiny-title { position:absolute; left:5%; top:5%; font:10px var(--mono); letter-spacing:.05em; z-index:3; }
.moon-photo { position:absolute; width:60%; height:76%; left:10%; top:13%; overflow:hidden; background:linear-gradient(#101010,#4a4a48 54%,#111); filter:grayscale(1); }
.moon-photo::before { content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(#fff 0.7px,transparent 1px); background-size:9px 8px; }
.moon { position:absolute; width:38%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#eee,#aaa 35%,#666 70%); left:34%; top:25%; z-index:1; box-shadow:0 0 20px #fff5; }
.mountains { position:absolute; z-index:2; bottom:-2%; left:-5%; width:110%; height:37%; background:#ddd; clip-path:polygon(0 100%,0 65%,16% 35%,26% 63%,44% 8%,58% 55%,71% 23%,88% 60%,100% 36%,100% 100%); }
.giant-shape { position:absolute; right:8%; bottom:3%; font-size:clamp(130px,21vw,260px); line-height:.8; z-index:2; font-family:Arial; }
.side-copy { position:absolute; right:5%; top:25%; font:7px var(--mono); line-height:1.8; z-index:3; }
.plus-mark { position:absolute; right:18%; top:35%; font-size:27px; z-index:3; }
.loop-mark { position:absolute; width:30%; height:13%; border:2px solid var(--acid); border-radius:50%; right:-2%; bottom:28%; transform:rotate(-40deg); z-index:4; }
.doodle-art { background-color:var(--acid); background-image:radial-gradient(#111 1px,transparent 1.4px); background-size:13px 13px; }
.doodle-note { position:absolute; top:5%; left:5%; font-weight:700; font-size:clamp(10px,1.6vw,18px); line-height:.95; transform:rotate(-10deg); z-index:3; }
.doodle-character { position:absolute; width:48%; height:58%; left:25%; top:27%; z-index:2; }
.doodle-character .face { position:absolute; inset:18% 8% 0; border:5px solid #111; border-radius:45% 45% 42% 42%; background:#d9ff00; box-shadow:inset 0 0 0 4px #e7ff00; }
.doodle-character .ear { position:absolute; top:0; width:35%; height:44%; border:5px solid #111; background:var(--acid); border-radius:80% 10% 70% 10%; }
.doodle-character .ear.left { left:12%; transform:rotate(-25deg); }.doodle-character .ear.right { right:10%; transform:rotate(45deg) scaleX(-1); }
.doodle-character .face b { position:absolute; top:36%; width:11%; height:18%; border-radius:50%; background:#111; }.doodle-character .face b:first-child { left:24%; }.doodle-character .face b:nth-child(2) { right:24%; }
.doodle-character .face em { position:absolute; left:38%; top:55%; font-style:normal; font-size:clamp(20px,3vw,42px); }
.headphones { position:absolute; left:0; top:15%; width:100%; height:63%; border:8px solid #111; border-bottom-color:transparent; border-radius:50% 50% 0 0; }
.doodle-star { position:absolute; z-index:3; font-size:clamp(35px,6vw,80px); }.star-a { right:7%; top:7%; }.star-b { left:7%; bottom:7%; }
.bubble { position:absolute; right:9%; top:42%; font-size:clamp(40px,6vw,75px); border:3px solid #111; border-radius:50%; width:17%; aspect-ratio:1; display:grid; place-items:center; }
.drink { position:absolute; bottom:8%; right:18%; width:13%; height:23%; border:3px solid #111; border-radius:5px 5px 15px 15px; text-align:center; line-height:1.4; font-size:15px; transform:rotate(8deg); }
.drink::before { content:""; position:absolute; height:38%; width:3px; background:#111; top:-32%; left:55%; transform:rotate(12deg); }
.mini-heart { position:absolute; left:9%; top:42%; font-size:clamp(30px,4vw,55px); }.mini-cross { position:absolute; right:7%; bottom:6%; font-size:35px; }
.doodle-squiggle { position:absolute; width:26%; height:13%; left:6%; bottom:21%; border:3px solid #111; border-radius:50%; transform:rotate(-25deg); }
.culture-art { background:linear-gradient(90deg,#e3e1db 0 27%,#111 27% 72%,#e3e1db 72%); }
.culture-copy { position:absolute; top:8%; left:7%; z-index:3; font:8px var(--mono); line-height:1.9; }
.statue { position:absolute; top:2%; left:31%; width:40%; height:100%; background:linear-gradient(100deg,#555,#ddd 20%,#8c8c8a 48%,#e7e7e1 63%,#454545); clip-path:polygon(35% 0,75% 3%,92% 24%,79% 40%,69% 54%,83% 100%,10% 100%,26% 66%,14% 43%,4% 20%); filter:grayscale(1); }
.statue-head { position:absolute; top:5%; left:20%; width:60%; height:45%; border-radius:45% 42% 40% 35%; background:linear-gradient(90deg,#333,#ddd 35%,#777 70%,#222); }
.statue-neck { position:absolute; top:44%; left:32%; width:38%; height:30%; background:#aaa; }
.crown { position:absolute; z-index:4; top:9%; left:35%; font-size:clamp(50px,8vw,100px); color:var(--acid); transform:rotate(-15deg); }
.globe { position:absolute; right:6%; top:8%; font-size:clamp(34px,5vw,60px); }
.pixel-bars { position:absolute; left:6%; bottom:13%; width:30%; height:13%; background:linear-gradient(#111 0 20%,transparent 20% 45%,#111 45% 65%,transparent 65%); }
.circle-loop { position:absolute; width:20%; aspect-ratio:1; right:-2%; bottom:10%; border:3px solid var(--acid); border-radius:50%; z-index:5; }
.project-meta { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-top:13px; font-size:13px; }
.project-meta b { color:var(--acid); font:500 12px var(--mono); }.project-meta small { color:var(--muted); font:11px var(--mono); margin-top:2px; }
.card-arrow { position:absolute; right:12px; top:12px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--acid); color:#111; opacity:0; transform:translate(-5px,5px); transition:.2s; z-index:5; }
.project-card:hover .card-arrow,.project-card:focus-visible .card-arrow { opacity:1; transform:translate(0,0); }
.project-card[hidden] { display:none; }
.empty-state { color:var(--muted); font:12px var(--mono); padding:28px 0; }
.about-section { position:relative; display:grid; grid-template-columns:1fr 1.5fr; gap:35px; border-top:1px solid var(--line); padding:40px 0 55px; overflow:hidden; }
.about-label { color:var(--acid); font:12px var(--mono); }.about-label span { font-size:24px; margin-left:12px; display:inline-block; animation:spin 14s linear infinite; }
.about-copy { max-width:650px; position:relative; z-index:1; }
.about-copy h2 { margin:0 0 18px; font-size:clamp(38px,6vw,75px); line-height:.9; letter-spacing:-.07em; }
.about-copy h2 em { color:var(--acid); font-style:normal; }
.about-copy p { color:#c9c9c4; line-height:1.65; max-width:530px; font-size:15px; }
.contact-link { display:inline-flex; align-items:center; gap:18px; margin-top:15px; padding-bottom:8px; border-bottom:1px solid var(--acid); color:var(--acid); font:12px var(--mono); }
.contact-link span { font-size:18px; }
.about-orbit { position:absolute; width:280px; height:120px; right:-5%; bottom:15%; border:1px solid #e7ff0060; border-radius:50%; transform:rotate(-35deg); animation:float 8s ease-in-out infinite; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--line); padding-top:20px; font-size:12px; }
.footer > :first-child { color:var(--white); }.footer > :last-child { color:var(--acid); text-align:right; }.footer-spark { color:var(--acid); font-size:27px; animation:spin 12s linear infinite; }
.project-modal { width:min(900px,calc(100% - 28px)); max-height:90vh; padding:0; color:var(--white); background:#171717; border:1px solid #666; border-radius:12px; overflow:auto; box-shadow:0 30px 100px #000b; }
.project-modal::backdrop { background:#000c; backdrop-filter:blur(8px); }
.modal-close { position:sticky; float:right; top:12px; margin:12px 12px -48px 0; width:36px; height:36px; border:1px solid #777; background:#111; color:#fff; border-radius:50%; font-size:26px; line-height:1; cursor:pointer; z-index:4; }
.modal-art { min-height:280px; aspect-ratio:16/7; background:var(--acid); position:relative; overflow:hidden; }
.modal-art::before { content:"NERDSHIT®"; position:absolute; top:18px; left:20px; color:#111; font-size:clamp(26px,5vw,54px); font-weight:700; letter-spacing:-.06em; }
.modal-art::after { content:"DIGITAL PLAYGROUND / SELECTED WORK"; position:absolute; right:20px; bottom:20px; color:#111; font:11px var(--mono); }
.modal-content { padding:25px clamp(20px,4vw,40px) 35px; }.modal-content .eyebrow { margin-bottom:10px; }.modal-content h2 { margin:0 0 12px; font-size:clamp(28px,5vw,50px); line-height:1; letter-spacing:-.05em; }.modal-content > p:not(.eyebrow) { max-width:600px; color:#ccc; line-height:1.65; }
@keyframes blink { to { visibility:hidden; } }
@keyframes float { 0%,100% { translate:0 0; } 50% { translate:0 -12px; } }
@keyframes spin { to { rotate:360deg; } }
@media (min-width:1100px) { .project-grid { gap:38px 30px; }.artwork { aspect-ratio:1.13/1; } }
@media (max-width:760px) {
  .site-shell { padding:20px 18px 16px; }.hero { padding:28px 0 25px; } .eyebrow { font-size:10px; margin-bottom:22px; }
  h1 { font-size:clamp(39px,9.5vw,70px); }.orbit-hero { width:85px; height:28px; right:4%; bottom:25px; }.spark-hero { font-size:26px; top:24px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:14px; }.filters { justify-content:flex-start; }.project-grid { gap:25px 14px; }.artwork { aspect-ratio:.88/1; }
  .poster-words { font-size:clamp(30px,8vw,62px); }.big-star { font-size:clamp(48px,12vw,82px); }.doodle-character .face { border-width:3px; }.doodle-character .ear { border-width:3px; }.headphones { border-width:5px; }
  .about-section { grid-template-columns:1fr; gap:20px; padding:30px 0 40px; }.about-copy p { font-size:14px; }.footer { font-size:10px; }.footer-spark { font-size:20px; }
}
@media (max-width:430px) {
  .availability { font-size:9px; }.wordmark { font-size:22px; }.nav-pill { padding:10px 13px; font-size:11px; }
  .project-grid { grid-template-columns:1fr; gap:28px; }.artwork { aspect-ratio:1.1/1; }.poster-words { font-size:clamp(52px,16vw,76px); }
  .section-heading h2 { white-space:normal; }.footer { flex-wrap:wrap; }.footer-spark { order:3; width:100%; text-align:center; }.footer > :last-child { margin-left:auto; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* About portrait + secondary pages */
.about-section { grid-template-columns: minmax(220px, .78fr) minmax(0, 1.5fr); align-items: start; gap: clamp(24px, 5vw, 70px); }
.about-photo-wrap { position: relative; width: 100%; max-width: 390px; aspect-ratio: 4 / 5; background: #242424; border: 1px solid #5b5b55; border-radius: 8px; overflow: visible; }
.about-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; filter: none; }
.about-photo-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; border-radius: 7px; background: repeating-linear-gradient(135deg,#191919 0 12px,#202020 12px 24px); text-align: center; color: var(--acid); }
.about-photo-placeholder[hidden] { display: none; }
.about-photo-placeholder span { font-size: clamp(22px, 3vw, 36px); font-weight: 700; line-height: .95; letter-spacing: -.06em; }
.about-photo-placeholder small { color: #aaa; font: 10px var(--mono); }
.photo-sticker { position: absolute; right: -15px; bottom: 22px; z-index: 2; padding: 10px 12px; background: var(--acid); color: #111; font: 10px var(--mono); font-weight: 500; transform: rotate(-7deg); box-shadow: 4px 4px 0 #111; }
.about-details { position: relative; z-index: 1; }
.about-details .about-label { margin-bottom: 26px; }
.about-copy { max-width: 700px; }
.footer { flex-wrap: wrap; }
.footer-links { display: flex; gap: 18px; margin-left: auto; }
.footer-links a { color: #b8b8b2; font: 10px var(--mono); transition: color .2s; }
.footer-links a:hover { color: var(--acid); }
.subpage { min-height: 65vh; padding: clamp(42px, 7vw, 90px) 0 70px; }
.subpage-kicker { color: var(--acid); font: 12px var(--mono); letter-spacing: .1em; margin: 0 0 20px; }
.subpage h1 { font-size: clamp(42px, 8vw, 92px); line-height: .92; letter-spacing: -.07em; margin-bottom: 30px; overflow-wrap: anywhere; }
.subpage h1 em { color: var(--acid); font-style: normal; }
.subpage-intro { max-width: 700px; color: #d0d0cb; font-size: clamp(16px, 2vw, 20px); line-height: 1.65; }
.subpage-content { max-width: 760px; margin-top: 45px; }
.subpage-content h2 { font-size: 18px; margin: 32px 0 10px; color: var(--acid); }
.subpage-content p, .subpage-content li { color: #c5c5bf; line-height: 1.75; font-size: 14px; }
.subpage-content ul { padding-left: 20px; }
.subpage-content a:not(.contact-link) { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; }
.info-note { border-left: 2px solid var(--acid); padding: 14px 18px; margin: 30px 0; background: #1d1d1d; color: #c5c5bf; font-size: 13px; line-height: 1.65; }
.subpage-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.subpage-nav a { border: 1px solid #666; border-radius: 999px; padding: 10px 15px; font-size: 12px; }
.subpage-nav a:hover { border-color: var(--acid); color: var(--acid); }
@media (max-width:760px) {
  .about-section { grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr); gap: 22px; }
  .about-details .about-label { font-size: 10px; margin-bottom: 20px; }
  .about-photo-wrap { aspect-ratio: 3 / 4; }
  .footer-links { width: 100%; margin-left: 0; padding-top: 6px; }
}
@media (max-width:520px) {
  .about-section { grid-template-columns: 1fr; }
  .about-photo-wrap { max-width: 260px; width: 75%; aspect-ratio: 4 / 5; }
  .about-details .about-label { margin-top: 5px; }
  .footer-tagline { text-align: right; margin-left: auto; }
}


/* 30-item portfolio grid */
.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; }
.artwork { aspect-ratio: 1 / 1; }
.placeholder-art { display:flex; flex-direction:column; justify-content:space-between; padding:16px; }
.placeholder-art .art-index { position:relative; z-index:2; font:10px var(--mono); letter-spacing:.1em; }
.placeholder-art .art-title { position:relative; z-index:2; max-width:95%; font-size:clamp(23px, 2.6vw, 48px); font-weight:700; line-height:.88; letter-spacing:-.07em; text-transform:uppercase; overflow-wrap:anywhere; }
.placeholder-art .art-decoration { position:absolute; z-index:1; right:6%; bottom:10%; font-size:clamp(58px, 8vw, 115px); line-height:1; }
.placeholder-art .art-orbit { position:absolute; width:70%; height:27%; right:3%; bottom:19%; border:1px solid currentColor; border-radius:50%; transform:rotate(-32deg); opacity:.7; }
.placeholder-art .art-caption { position:relative; z-index:2; font:9px var(--mono); letter-spacing:.08em; }
.card-paper .placeholder-art { background-color:#e3e1db; color:#111; }
.card-acid .placeholder-art { background-color:var(--acid); color:#111; }
.art-design { background-image:linear-gradient(135deg, transparent 0 42%, #111 42% 44%, transparent 44%), radial-gradient(#111 1px,transparent 1px) !important; background-size:auto,9px 9px !important; }
.art-illustration { background-image:radial-gradient(circle at 25% 30%,transparent 0 14%,#111 14.5% 15%,transparent 15.5%),radial-gradient(circle at 70% 72%,transparent 0 20%,#111 20.5% 21%,transparent 21.5%),radial-gradient(#111 1px,transparent 1px) !important; background-size:auto,auto,10px 10px !important; }
.art-fashion { background-image:repeating-linear-gradient(135deg,transparent 0 15px,#111 15px 17px,transparent 17px 31px) !important; }
@media (max-width:900px) { .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 16px; } .placeholder-art .art-title { font-size:clamp(24px,4vw,40px); } }
@media (max-width:560px) { .project-grid { grid-template-columns:1fr; gap:28px; } .artwork { aspect-ratio:1.08 / 1; } .placeholder-art { padding:20px; } .placeholder-art .art-title { font-size:clamp(38px,11vw,62px); } }


/* Navigation, logo placeholder, footer and detail images */
.logo-link { display:inline-flex; align-items:center; justify-content:flex-start; width:clamp(130px,16vw,220px); height:clamp(34px,4vw,48px); color:var(--acid); }
.logo-image { display:block; max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; object-position:left center; }
.logo-fallback { color:var(--acid); font-weight:700; font-size:clamp(15px,2vw,24px); letter-spacing:-1.1px; white-space:nowrap; }
.hero-nav { align-items:center; }
.social-links { display:inline-flex; align-items:center; gap:10px; margin-left:4px; }
.social-links a { display:grid; place-items:center; width:38px; height:38px; border:1px solid #777; border-radius:50%; transition:background .2s,border-color .2s,transform .2s; }
.social-links a:hover { border-color:var(--acid); background:var(--acid); transform:translateY(-3px); color:var(--black); }
.social-links svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.social-links a:nth-child(2) svg,.social-links a:nth-child(3) svg { fill:currentColor; stroke:none; }
.social-links .social-cutout { fill:var(--black); }
.footer { flex-wrap:wrap; }
.copyright { font-size:11px; color:#c9c9c4; }
.footer-links { display:flex; align-items:center; gap:18px; margin-left:auto; }
.footer-links a { font:10px var(--mono); color:var(--white); transition:color .2s; }
.footer-links a:hover { color:var(--acid); }
.modal-art { display:block; min-height:0; aspect-ratio:16/8; background:#222; position:relative; overflow:hidden; }
.modal-art > img { display:block; width:100%; height:100%; max-height:62vh; object-fit:contain; background:#171717; }
.modal-art > img[hidden] { display:none; }
.modal-art:has(> img:not([hidden]))::before,.modal-art:has(> img:not([hidden]))::after { display:none; }
.modal-art::before { content:var(--modal-title, "PORTFOLIO ITEM"); position:absolute; top:18px; left:20px; z-index:1; color:var(--acid); font-size:clamp(26px,5vw,54px); font-weight:700; letter-spacing:-.06em; }
.modal-art::after { content:"ADD YOUR PROJECT IMAGE IN images/projects/"; position:absolute; right:20px; bottom:20px; z-index:1; color:var(--acid); font:10px var(--mono); }
.commission-hero-image { width:100%; aspect-ratio:16/6; background:var(--panel); border-radius:8px; overflow:hidden; margin:0 0 32px; display:grid; place-items:center; }
.commission-hero-image img { width:100%; height:100%; object-fit:cover; }
.commission-image-fallback { color:var(--acid); text-align:center; font:700 clamp(18px,3vw,34px) var(--sans); }
.commission-image-fallback span { display:inline-block; margin-top:12px; font:11px var(--mono); }
@media(max-width:900px){.hero-nav{gap:8px}.nav-pill{padding:10px 14px;font-size:11px}.social-links{gap:6px}.social-links a{width:34px;height:34px}}
@media(max-width:600px){.logo-link{width:125px;height:34px}.hero-nav{align-items:flex-start}.social-links{width:100%;margin:8px 0 0}.footer-links{width:100%;margin:0;justify-content:space-between}.copyright{width:100%}.footer-spark{display:none}}


/* Numbered image slots: replace the JPG files without editing HTML. */
.project-thumbnail {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}
.artwork { background-image: none !important; }
.full-site-nav { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:22px; padding-bottom:4px; }
.full-site-nav > a { border:1px solid #666; border-radius:999px; padding:10px 15px; font-size:11px; white-space:nowrap; transition:background .2s,color .2s,border-color .2s; }
.full-site-nav > a:hover { border-color:var(--acid); color:var(--acid); }
.full-site-nav .social-links { margin-left:4px; }
@media(max-width:980px) {
  .full-site-nav { gap:7px; }
  .full-site-nav > a { padding:9px 12px; font-size:10px; }
  .full-site-nav .social-links { margin-left:0; }
}
@media(max-width:600px) {
  .full-site-nav { align-items:flex-start; }
  .full-site-nav > a { padding:8px 10px; }
  .full-site-nav .social-links { width:auto; margin-top:0; }
}


/* About portrait updated for a landscape photo (800 x 670, ratio 1.194:1). */
.about-photo,
.about-image,
.about-visual img,
.about-photo-wrap img,
#about img {
  aspect-ratio: 800 / 670;
}

#about .about-photo,
#about .about-image,
#about .about-visual,
#about .about-photo-wrap {
  aspect-ratio: 800 / 670;
}
#about .about-photo img,
#about .about-image img,
#about .about-visual img,
#about .about-photo-wrap img,
#about img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 800 / 670;
}


/* Keep the About photo in its original colours. */
#about .about-photo { filter: none !important; }


/* Keep subpage social icons vertically centered with the navigation pills. */
.full-site-nav { align-items: center; }
.full-site-nav .social-links { align-self: center; height: 38px; line-height: 1; vertical-align: middle; }
.full-site-nav .social-links a { align-self: center; flex: 0 0 38px; box-sizing: border-box; }
@media (max-width: 900px) {
  .full-site-nav .social-links { height: 34px; }
  .full-site-nav .social-links a { flex-basis: 34px; }
}
@media (max-width: 600px) {
  .full-site-nav { align-items: center; }
  .full-site-nav .social-links { align-self: center; margin-top: 0; }
}

/* Dark / light mode toggle lives at the far right of the navigation. */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; width:38px; height:38px; margin-left:auto; border:1px solid #777; border-radius:50%; padding:0; background:transparent; color:var(--white); cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s; }
.theme-toggle:hover { border-color:var(--acid); color:var(--acid); transform:translateY(-2px); }
.theme-toggle-icon { display:block; font:24px/1 Arial,sans-serif; }
.full-site-nav .theme-toggle { align-self:center; }
.hero-nav .theme-toggle { align-self:center; }
body[data-theme="light"] { --white:#171717; --panel:#ffffff; --acid:#3bbbc9; --muted:#555550; --line:rgba(20,20,20,.24); background:#f5f5f2; color:#171717; }
body[data-theme="light"] .site-shell { background:#f5f5f2; }
body[data-theme="light"] .hero .eyebrow { color:#555550; }
body[data-theme="light"] .nav-pill { border-color:#777; }
body[data-theme="light"] .nav-pill.active { color:#111; }
body[data-theme="light"] .subpage-nav a { border-color:#777; }
body[data-theme="light"] .about-copy p { color:#41413d; }
body[data-theme="light"] .copyright { color:#555550; }
body[data-theme="light"] .footer-links a { color:#171717; }
body[data-theme="light"] .project-modal { background:#fff; color:#171717; border-color:#999; box-shadow:0 30px 100px #0003; }
body[data-theme="light"] .project-modal::backdrop { background:#0006; }
body[data-theme="light"] .modal-close { background:#fff; color:#171717; border-color:#777; }
body[data-theme="light"] .modal-content > p:not(.eyebrow) { color:#41413d; }
body[data-theme="light"] .modal-art > img { background:#f0f0ed; }
body[data-theme="light"] .subpage-intro, body[data-theme="light"] .subpage-content p { color:#41413d; }
body[data-theme="light"] .theme-toggle { color:#171717; border-color:#777; }
body[data-theme="light"] .theme-toggle:hover { color:#087b86; border-color:#087b86; }

/* Footer back-to-top control */
.back-to-top { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid #777; border-radius:999px; padding:9px 13px; background:transparent; color:var(--white); font:11px var(--mono); cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s; }
.back-to-top svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.back-to-top:hover { background:var(--acid); color:var(--black); border-color:var(--acid); transform:translateY(-2px); }
body[data-theme="light"] .back-to-top { color:#171717; border-color:#777; }
body[data-theme="light"] .back-to-top:hover { color:#111; border-color:var(--acid); }
@media(max-width:600px) { .theme-toggle { flex-basis:36px; width:36px; height:36px; } .theme-toggle-icon { font-size:23px; } .back-to-top { padding:8px 11px; } }


/* Final subpage navigation alignment fix: keep social icons on the same vertical centerline as the menu pills. */
.full-site-nav { align-items: center !important; }
.full-site-nav > a,
.full-site-nav > .social-links,
.full-site-nav > .theme-toggle { align-self: center !important; position: relative; top: 0; transform: none; margin-top: 0; }
.full-site-nav > .social-links { display: inline-flex !important; align-items: center !important; justify-content: center; height: 38px; line-height: 0; flex: 0 0 auto; }
.full-site-nav > .social-links a { display: grid; place-items: center; align-self: center; flex: 0 0 38px; width: 38px; height: 38px; box-sizing: border-box; line-height: normal; }
.full-site-nav > .theme-toggle { flex: 0 0 38px; width: 38px; height: 38px; }
@media (max-width: 900px) {
  .full-site-nav > .social-links { height: 34px; }
  .full-site-nav > .social-links a { flex-basis: 34px; width: 34px; height: 34px; }
  .full-site-nav > .theme-toggle { flex-basis: 34px; width: 34px; height: 34px; }
}
@media (max-width: 600px) {
  .full-site-nav { align-items: center !important; }
  .full-site-nav > .social-links { width: auto; margin-top: 0; }
}


/* Definitive subpage nav fix: reset generic .subpage-nav a padding on nested social icon links.
   The generic rule adds 10px 15px padding to every anchor, including icon circles. */
.full-site-nav .social-links a {
  padding: 0 !important;
  margin: 0 !important;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-self: center;
  line-height: 1;
  flex: 0 0 38px;
  vertical-align: middle;
}
.full-site-nav .social-links {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 10px;
  height: 38px;
  margin: 0 0 0 4px;
  padding: 0;
  line-height: 1;
  flex: 0 0 auto;
}
.full-site-nav .social-links svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) {
  .full-site-nav .social-links { gap: 6px; height: 34px; }
  .full-site-nav .social-links a { width: 34px; height: 34px; min-width: 34px; min-height: 34px; flex-basis: 34px; }
}
@media (max-width: 600px) {
  .full-site-nav .social-links { width: auto; margin: 0 0 0 4px; }
}


/* Artist Alley gallery: 15 square, non-clickable image slots. */
.artist-alley-page { padding-top: 12px; }
.artist-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px 20px; margin-top:48px; }
.artist-card { min-width:0; }
.artist-image-wrap { width:100%; aspect-ratio:1 / 1; position:relative; overflow:hidden; border-radius:7px; background:var(--panel); isolation:isolate; }
.artist-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; z-index:2; }
.artist-image[hidden] { display:none; }
.artist-image-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:15px; color:#111; background:linear-gradient(135deg,#e7ff00 0 49.8%,#e3e1db 50% 100%); }
.artist-image-placeholder[hidden] { display:none; }
.artist-image-placeholder span { font:10px var(--mono); letter-spacing:.1em; }
.artist-image-placeholder strong { font-size:clamp(20px,2.5vw,38px); line-height:.85; letter-spacing:-.06em; }
.artist-image-placeholder small { font:9px var(--mono); overflow-wrap:anywhere; }
.artist-card:nth-child(even) .artist-image-placeholder { background:radial-gradient(#111 1px,transparent 1px),#e3e1db; background-size:8px 8px; }
.artist-card:nth-child(3n) .artist-image-placeholder { background:linear-gradient(135deg,#e3e1db 0 38%,#e7ff00 38% 62%,#e3e1db 62% 100%); }
.artist-meta { display:flex; flex-direction:column; gap:5px; margin-top:12px; min-width:0; }
.artist-meta b { color:var(--acid); font:11px var(--mono); letter-spacing:.04em; }
.artist-meta span { font-size:15px; line-height:1.2; overflow-wrap:anywhere; }
.artist-meta small { color:var(--muted); font:10px var(--mono); line-height:1.4; text-transform:uppercase; }
body[data-theme="light"] .artist-image-placeholder { background:linear-gradient(135deg,#3bbbc9 0 49.8%,#e3e1db 50% 100%); }
body[data-theme="light"] .artist-card:nth-child(even) .artist-image-placeholder { background:radial-gradient(#111 1px,transparent 1px),#e3e1db; background-size:8px 8px; }
body[data-theme="light"] .artist-card:nth-child(3n) .artist-image-placeholder { background:linear-gradient(135deg,#e3e1db 0 38%,#3bbbc9 38% 62%,#e3e1db 62% 100%); }
@media(max-width:1050px) { .artist-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 16px; } }
@media(max-width:620px) { .artist-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; margin-top:32px; } .artist-image-placeholder { padding:10px; } .artist-image-placeholder strong { font-size:clamp(20px,6vw,30px); } .artist-meta span { font-size:13px; } }