/* Neutral viewing surfaces. Type, spacing and project geometry stay unchanged. */
:root {
  --bg: #242628;
  --panel: #2b2d2f;
  --text: #efefec;
  --muted: #b2b5b6;
  --line: #414548;
  --accent: #d1d5d6;
}

body { background: var(--bg); }
body::before { display: none; }
::selection { background: #ced3d5; color: #202224; }
.site-header { background: #202224; border-color: #414548; backdrop-filter: none; }
.site-footer { background: #202224; color: #aeb2b4; }
.site-header nav a, .identity-role { color: #b2b5b6; }
.site-header nav a:is(:hover,[aria-current=page]) { color: #f0f1ef; }
.site-header nav a[aria-current=page]::after { background: #cbd0d2; }
.artist-role { color: #d4d6d6; }
.artist-summary, .intro-aside { color: #b2b5b6; }
.minimal-toolbar h2 { color: #e0e2e1; }
.project-row .project-card-caption .row-category { color: #bfc4c6; }
.project-row .project-card-caption .row-description { color: #bec1c2; }
.project-row .project-card-caption .row-context { color: #a7adaf; }
.project-row .project-card-image { background: #191b1c; outline-color: #000; }
.project-row:hover .project-card-image { outline-color: #000; }
.thumbnail-preview { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .25s; }
.thumbnail-preview iframe { display:block; width:100%; height:100%; border:0; pointer-events:none; }
.preview-playing .thumbnail-preview { opacity:1; }
@media(prefers-reduced-motion:reduce) { .thumbnail-preview { display:none; transition:none; } }
.project-card-image > span { background: #202224e8; border-color: #717a7e; }
.row-link, .intro-aside a, .small-link, .contact-work-link { color: #dfe3e4; border-color: #818b8f; }
.project-row:hover .row-link, .row-link:hover, .intro-aside a:hover,
.small-link:hover, .contact-work-link:hover { color: #fff; border-color: #e0e6e8; }
.minimal-footer-note { color: #afb4b6; }
.minimal-footer-note a { color: #dfe3e4; }
.eyebrow { color: #bfc4c6; }
.skill-list span { color: #c8cdcf; border-color: #4b5154; background: transparent; }
.skill-list > span { display:flex; align-items:center; gap:12px; }
.skill-symbol { display:inline-block; width:22px; height:22px; object-fit:contain; flex-shrink:0; }
.practice-symbol { color:#aebbc1; }
.project-software dd { display:flex; flex-wrap:wrap; gap:12px 24px; }
.software-item { display:inline-flex; align-items:center; gap:9px; }
.software-item .skill-symbol { width:20px; height:20px; }
@media(max-width:750px) { .skill-list > span { gap:10px; } .skill-symbol { width:20px; height:20px; } }
.contact-main h2 { color: #e5e8e8; }
.email-address > span { color: #bfc6c9; }
.email-actions > a { background: #d8dddf; color: #222628; }
.email-actions > a:hover { background: #eef1f2; }
.email-actions > button { border-color: #737e83; color: #d2d9dc; }
.email-actions > button:hover { border-color: #cdd5d9; color: #fff; }
.copy-status { color: #c8d0d4; }
.contact-facts > div { border-color: #414548; }
.contact-facts dt, .contact-profiles span { color: #adb5b8; }
.contact-facts dd, .contact-details ul { color: #c8cfd2; }
.contact-profiles > a { color: #e0e5e7; border-color: #737e83; }
.profile-name { display:flex; align-items:center; gap:12px; font:inherit; font-weight:400; }
.profile-name b { margin-left:auto; font-weight:400; }
.profile-logo { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.profile-logo.fab { filter:invert(1); }
@media(max-width:750px) { .profile-name { min-width:145px; gap:10px; } .profile-logo { width:22px; height:22px; } }
.project-summary-credit { color: #adb5b8; }
.reel-stage, .viewer-canvas { background: #151718; }
.reel-step { background: #242628e8; color: #e8ecee; border-color: #778085; }
.reel-step:hover { background: #d8dddf; color: #222628; border-color: #d8dddf; }
.reel-expand, .reel-swipe-hint { background: #202224d9; color: #d7dddf; }
.reel-caption { color: #b2babd; }
.reel-dots button > span { background: #737d82; }
.reel-dots button[aria-pressed=true] > span { background: #d6dfe3; }
.viewer-toolbar, .viewer-bottom { background: #202224; }
.project-facts { display:flex; flex-wrap:wrap; gap:18px 36px; padding:18px 0; margin:0 0 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.project-facts dt { font-size:11px; color:var(--muted); margin-bottom:5px; }
.project-facts dd { font-size:13px; line-height:1.6; color:#dbe0e2; margin:0; max-width:380px; }
.project-focus { max-width:800px; margin:25px 0 0; padding-left:18px; border-left:1px solid #78848a; }
.project-focus p { font-size:14px; line-height:1.8; color:var(--muted); margin:0 0 13px; }
.project-focus strong { display:block; font-weight:500; color:#dbe0e2; margin-bottom:4px; }
.project-source-link { margin-top:30px; }
@media(max-width:750px) { .project-facts { gap:16px 25px; padding:15px 0; } .project-facts dd { font-size:12px; } .project-focus { margin-top:22px; padding-left:14px; } .project-focus p { font-size:13px; } }
.qr-widget { position:fixed; right:24px; bottom:24px; z-index:50; }
.qr-trigger { width:48px; height:48px; display:grid; place-items:center; background:#202224; color:#e5eaec; border:1px solid #68747a; box-shadow:0 4px 15px #0004; border-radius:5px; }
.qr-trigger svg { width:25px; height:25px; }
.qr-trigger:hover,.qr-trigger[aria-expanded=true] { border-color:#d6e0e5; background:#303639; }
.qr-panel { position:absolute; right:0; bottom:64px; width:min(280px,calc(100vw - 32px)); aspect-ratio:1; padding:16px; background:#202224; border:1px solid #586269; border-radius:5px; box-shadow:0 8px 28px #0005; }
.qr-panel[hidden] { display:none; }
.qr-panel img { width:100%; height:100%; object-fit:contain; }
.qr-close { position:absolute; right:5px; top:3px; width:24px; height:24px; display:grid; place-items:center; border:0; background:transparent; color:#dbe1e4; font:22px/1 Arial,sans-serif; }
@media(max-width:750px) { .qr-widget { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); } .qr-trigger { width:46px; height:46px; } .qr-panel { bottom:60px; } }
.availability { font-size:13px; line-height:1.7; color:#d3dce0; margin:15px 0 0; }
.about-actions,.showreel-actions { display:flex; flex-wrap:wrap; gap:20px 28px; align-items:center; }
.contact-extra-links { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.email-actions > .cv-action { background:transparent; color:#d2d9dc; border:1px solid #737e83; padding:11px 15px; }
.email-actions > .cv-action:hover { background:#303639; }
.showreel-page { padding-bottom:65px; }
.showreel-player { display:block; width:100%; aspect-ratio:16/9; background:#111; margin-top:28px; outline:1px solid #000; }
.showreel-actions { margin-top:26px; }
.reel-credit-note { color:var(--muted); font-size:12px; line-height:1.8; max-width:800px; margin-top:26px; }
@media(max-width:750px) { .availability { font-size:12px; max-width:340px; } .intro-aside { flex-wrap:wrap; gap:15px; } .showreel-actions { gap:20px; } .reel-credit-note { font-size:11px; } }
.project-software { display:flex; gap:24px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:18px; margin:26px 0 0; font-size:13px; line-height:1.8; }
.project-software dt { color:var(--muted); }
.project-software dd { margin:0; color:#dbe0e2; }
@media(max-width:750px) { .project-software { gap:6px 18px; font-size:12px; margin-top:22px; padding-top:15px; } }

.about-opportunities { display:grid; grid-template-columns:1fr 1fr; gap:9%; border-top:1px solid var(--line); padding-top:30px; margin-top:45px; }
.about-opportunities h2 { font-size:20px; font-weight:500; margin:0 0 20px; }
.about-opportunities p,.about-opportunities ul { color:var(--muted); font-size:15px; line-height:1.85; margin:0; }
.about-opportunities ul { list-style:none; padding:0; display:grid; gap:5px; }
.project-video { margin-top:38px; }
.project-video h2 { font-size:22px; font-weight:500; letter-spacing:-.5px; margin:0 0 20px; }
.project-video .video-poster { outline:1px solid #000; }
.project-video .play-circle { background:#202224c9; border-color:#d1d5d6; color:#efefec; }
.project-video .video-poster:hover .play-circle { background:#d8dddf; color:#222628; }
.project-video .play-symbol { font-size:14px; }
@media(max-width:750px) {
  .about-opportunities { grid-template-columns:1fr; gap:28px; margin-top:32px; padding-top:25px; }
  .about-opportunities h2 { font-size:18px; margin-bottom:15px; }
  .about-opportunities p,.about-opportunities ul { font-size:14px; line-height:1.8; }
  .project-video { margin-top:28px; }
  .project-video h2 { font-size:20px; margin-bottom:15px; }
  .project-video .play-symbol { font-size:12px; }
}

.about-history { display:grid; grid-template-columns:1fr 1fr; gap:9%; margin-top:55px; padding-top:35px; border-top:1px solid var(--line); }
.about-history > section { min-width:0; }
.about-history h2 { font-size:20px; font-weight:500; margin:0 0 28px; }
.history-entry + .history-entry { margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.history-entry h3 { font-size:20px; line-height:1.4; font-weight:500; letter-spacing:-.35px; margin:0 0 8px; }
.history-entry p { font-size:15px; line-height:1.85; color:var(--muted); margin:0 0 12px; }
.history-entry .history-date { font-size:12px; color:#aeb7bb; margin-bottom:12px; }
.history-entry .history-place { font-size:14px; color:#d5dcdf; margin-bottom:18px; }
.history-place span { display:block; font-size:12px; color:#aeb7bb; margin-top:3px; }
.history-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:18px; }
.history-heading > div { min-width:0; }
.history-heading .history-place { margin-bottom:0; }
.organisation-logo { flex-shrink:0; width:100px; height:65px; object-fit:contain; }
.organisation-logo.sloth-logo { width:108px; height:108px; }
.organisation-logo.lsbu-logo { width:120px; background:transparent; }
.heldritch-artwork { display:block; width:320px; max-width:100%; margin-top:24px; }
.heldritch-preview {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:460/215;
  padding:0;
  border:1px solid #000;
  background:#111;
  cursor:pointer;
  overflow:hidden;
}
.heldritch-preview video,.heldritch-preview img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.heldritch-preview video { object-fit:cover; }
.heldritch-preview[data-playing] img { visibility:hidden; }
.heldritch-preview:focus-visible { outline:2px solid #d6dfe3; outline-offset:3px; }
.heldritch-steam-link { margin-top:12px; }
@media(max-width:750px) {
  .history-heading { gap:15px; }
  .organisation-logo { width:85px; height:55px; }
  .organisation-logo.sloth-logo { width:90px; height:90px; }
}
@media(max-width:750px) {
  .about-history { grid-template-columns:1fr; gap:34px; margin-top:35px; padding-top:26px; }
  .about-history h2 { font-size:18px; margin-bottom:23px; }
  .history-entry h3 { font-size:18px; }
  .history-entry p { font-size:14px; line-height:1.8; }
  .history-entry .history-place { font-size:13px; }
  .history-entry .history-date,.history-place span { font-size:11px; }
}

/* Material comparisons stay inside the existing process slideshow. */
.reel-media{width:100%;height:100%}.reel-comparison .comparison-card{height:100%;position:relative}.reel-comparison .comparison{height:100%;aspect-ratio:auto;border:0;touch-action:pan-y}.reel-comparison .comparison-controls{position:absolute;bottom:12px;left:65px;right:65px;z-index:3;margin:0;padding:7px 12px;background:#202224ed;border:1px solid #586269}.reel-comparison .compare-instruction{bottom:64px}.reel-comparison .comparison-line{background:#d5d9da}.reel-comparison .comparison-line:after{background:#d5d9da;color:#202224}.reel-stage:has(.reel-comparison)>.reel-swipe-hint{display:none}.reel-stage:has(.reel-comparison)>.reel-step{z-index:4}@media(max-width:600px){.reel-comparison .comparison-controls{left:43px;right:43px;bottom:7px;gap:7px;padding:4px 7px}.reel-comparison .compare-instruction{bottom:52px}.reel-comparison .comparison-label{font-size:8px}}

.reel-stage:has(.reel-comparison){aspect-ratio:auto}.reel-comparison,.reel-comparison .comparison-card{height:auto}.reel-comparison .comparison{height:auto;aspect-ratio:16/9}.reel-comparison .comparison-controls{position:static;margin:0;padding:12px 16px;border:0;border-top:1px solid #41484b;background:#202224}.reel-comparison .compare-instruction{bottom:15px}


/* Final usability polish without changing page structure. */
.reel-step:focus-visible,.comparison-controls button:focus-visible,.comparison-controls input:focus-visible,.qr-trigger:focus-visible,.small-link:focus-visible{outline:2px solid #d6dfe3;outline-offset:3px}
@media(max-width:750px){.reel-step{width:44px;height:44px;top:calc(50% - 22px)}.reel-dots button{min-height:24px}.site-footer{padding-bottom:80px}}
@media(max-width:350px){.site-header{padding-left:4%;padding-right:4%}.site-header nav{gap:12px;font-size:10px}.identity{gap:6px;font-size:12px}.identity-role{font-size:6px;white-space:nowrap}.site-header nav a{white-space:nowrap}}

.contact-reel{display:block;width:100%;height:auto;aspect-ratio:1280/540;object-fit:contain;margin-top:34px;background:#151718;outline:1px solid #000}

.contact-reel{margin-top:72px}


.contact-reel{aspect-ratio:2/1;object-fit:cover}.contact-reel+.contact-extra-links{margin-top:34px}


.contact-reel{outline:1px solid #657077;outline-offset:0}


.contact-reel{outline-color:#000}


.project-activity-totals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--muted);
}
.project-activity-totals[hidden], .activity-form[hidden] { display: none; }
.project-activity-totals button, .activity-form button, .comment-actions button {
  border: 1px solid #596267;
  padding: 8px 13px;
  background: #202224;
  color: var(--text);
}
.project-activity-totals button[aria-pressed=true] { color: #ffa4a9; }
.project-activity-totals a { text-decoration: underline; text-underline-offset: 4px; }
.project-activity {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  scroll-margin-top: 95px;
}
.project-activity h2 { font-size: 22px; font-weight: 500; }
.project-comments, .activity-form { max-width: 620px; }
.project-comments article { border-bottom: 1px solid var(--line); padding: 12px 0; overflow-wrap: anywhere; }
.project-comments p { white-space: pre-wrap; margin: 6px 0; }
.comments-empty, .project-activity [role=status], .activity-form span { color: var(--muted); }
.activity-form { display: grid; justify-items: start; gap: 12px; margin-top: 18px; }
.activity-form label { display: grid; gap: 6px; width: 100%; }
.activity-form input, .activity-form textarea, .activity-form select {
  max-width: 100%;
  background: #202224;
  color: var(--text);
  border: 1px solid #596267;
  border-radius: 0;
  padding: 8px;
  font: inherit;
}
.comment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.project-banner{width:100%;max-width:1600px;margin:0 auto;background:#151718;outline:1px solid #000}.project-banner img{display:block;width:100%;height:clamp(130px,25vw,350px);object-fit:cover;object-position:center}

.project-banner[data-banner-project="titan"] img{object-position:50% 39%}.project-banner[data-banner-project="police"] img{object-position:50% 48%}

.row-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:510px}
.row-footer .row-link{flex-shrink:0;margin:0}
.work-activity{display:flex;align-items:center;gap:16px;margin:0;padding-bottom:8px;font-size:12px;font-variant-numeric:tabular-nums;color:#a7adaf;line-height:1}
.work-activity>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.work-activity svg{width:15px;height:15px;flex-shrink:0}
.work-activity[hidden]{display:none}
@media(max-width:750px){.row-footer{gap:14px;flex-wrap:wrap}.work-activity{gap:13px;font-size:12px}.row-footer .row-link{gap:22px}}

.skill-symbol[src="assets/software-unreal.svg"]{opacity:1;filter:none}