/* Original AVBECK layout, with a lighter portrait and native vertical work. */
:root { --radius:0; }
html { scroll-padding-top:100px; }
[data-shatter] { white-space:normal; display:block; }
body { background:#0a0c0d; }
body > main, .site-footer { position:relative; z-index:1; }
#bg-canvas { z-index:0; opacity:.7; pointer-events:none; }
.site-header { z-index:30; backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(9,11,13,.97); }
.hero { grid-template-columns:minmax(0,1.03fr) minmax(0,1fr); gap:3rem; align-items:center; min-height:0; padding-block:25px 42px; }
.section { padding-block:32px; scroll-margin-top:0; }
.home-stack { padding-bottom:0; }
.home-stack .hero { padding-bottom:12px; }
.home-stack > .scroll-cue { margin:0; padding:0 0 12px; }
.tools-section { padding-top:14px; }
.section-heading h2 { max-width:26ch; font-size:clamp(28px,2.75vw,40px); line-height:1.1; }
.tools-heading { gap:12px 36px; align-items:start; margin-bottom:22px; }
.tools-heading h2 { max-width:25ch; }
.tools-heading .section-copy { align-self:end; font-size:15px; }
.hero-copy { align-self:center; }
.hero h1 { font-size:clamp(2rem,3.3vw,3.3rem); max-width:20ch; line-height:1.15; letter-spacing:-.04em; }
.hero-intro { max-width:57ch; font-size:1rem; }
.hero-metrics { gap:10px; }
.metric-card { padding:15px; box-shadow:none; }
.metric-card strong { font-size:1rem; line-height:1.45; }
.metric-card p:last-child { font-size:.8rem; }
.scroll-line, .scroll-line::before, .scroll-line::after { animation:none; }
.identity-portrait { position:relative; margin:0; min-width:0; width:min(100%,560px); justify-self:end; align-self:center; }
.identity-image { position:relative; aspect-ratio:1; }
.identity-image::before, .identity-image::after { content:""; position:absolute; width:35px; height:35px; border-color:rgba(247,196,52,.45); border-style:solid; pointer-events:none; z-index:1; }
.identity-image::before { top:12%; left:2%; border-width:1px 0 0 1px; }
.identity-image::after { bottom:11%; right:2%; border-width:0 1px 1px 0; }
.identity-image img { width:100%; height:100%; object-fit:contain; mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 64%,transparent 100%); animation:portrait-breathe 9s ease-in-out infinite; animation-play-state:paused; }
.identity-portrait.is-in-view .identity-image img { animation-play-state:running; }
.identity-portrait figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:0 16px 16px; border-bottom:1px solid var(--line-strong); }
.identity-name { font:500 23px "Space Grotesk",sans-serif; letter-spacing:-.04em; color:var(--accent); }
.identity-role { font:10px/1.6 "IBM Plex Mono",monospace; color:var(--muted); text-align:right; }
.identity-disciplines { display:flex; justify-content:space-between; gap:12px; padding:17px 16px 0; font:10px/1.7 "IBM Plex Mono",monospace; }
.identity-disciplines a { border-bottom:1px solid transparent; padding-bottom:4px; }
.identity-disciplines a:hover { color:var(--accent); border-color:var(--accent); }
.production-films { display:grid; gap:45px; }
.production-film { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:34px; align-items:center; padding-bottom:35px; border-bottom:1px solid var(--line-strong); }
.production-film-media { padding:0; position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; cursor:pointer; border:1px solid var(--line); text-align:left; }
.production-film-media > img { width:100%; height:100%; object-fit:cover; }
.media-play { position:absolute; bottom:16px; left:16px; display:flex; align-items:center; gap:10px; padding:10px 14px; background:#0a0c0dee; border:1px solid var(--line-strong); font:10px "IBM Plex Mono",monospace; }
.media-play svg, .reel-link svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.production-film-media:hover .media-play { color:var(--accent); border-color:var(--accent); }
.film-kind { font:10px "IBM Plex Mono",monospace; color:var(--muted); text-transform:uppercase; }
.production-film-copy h3 { font:500 clamp(25px,2.6vw,40px)/1.1 "Space Grotesk",sans-serif; letter-spacing:-.04em; margin:17px 0; }
.production-film-copy h3 br { display:none; }
.film-roles { font:11px/1.7 "IBM Plex Mono",monospace; color:var(--accent); }
.film-description { color:var(--muted); font-size:14px; line-height:1.7; }
.film-detail { display:block; font:10px/1.8 "IBM Plex Mono",monospace; color:var(--muted); padding-top:12px; }
.reel-link { display:flex; align-items:center; gap:15px; width:100%; margin-top:20px; padding:14px 0; text-align:left; border-block:1px solid var(--line); cursor:pointer; font-size:12px; }
.reel-link img { width:90px; height:auto; aspect-ratio:16/9; object-fit:cover; }
.reel-link small { display:block; font-size:10px; color:var(--muted); padding-top:5px; }
.reel-link svg { margin-left:auto; flex-shrink:0; }
.reel-link:hover { color:var(--accent); }
.rendernode-showcase { border:1px solid var(--line-strong); background:rgba(12,15,18,.93); padding:25px; margin-bottom:35px; }
.product-heading { display:flex; justify-content:space-between; gap:25px; align-items:baseline; border-bottom:1px solid var(--line-strong); padding-bottom:20px; margin-bottom:25px; }
.product-heading h3 { font:500 clamp(28px,3vw,42px) "Space Grotesk",sans-serif; color:var(--accent); margin:0; }
.product-heading .mono { font:10px/1.7 "IBM Plex Mono",monospace; color:var(--muted); }
.rendernode-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:28px; align-items:start; }
.rendernode-screen { width:100%; text-align:left; cursor:pointer; border:1px solid var(--line-strong); }
.screen-bar { padding:10px 12px; display:flex; align-items:center; justify-content:space-between; font:9px "IBM Plex Mono",monospace; color:var(--muted); }
.screen-bar svg { width:15px; height:15px; stroke:currentColor; fill:none; }
.rendernode-screen img { width:100%; height:auto; }
.rendernode-copy h4 { font:500 25px/1.2 "Space Grotesk",sans-serif; margin:0 0 15px; }
.rendernode-copy > p { color:var(--muted); font-size:13px; }
.rendernode-features { margin-top:20px; }
.rendernode-features details { border-top:1px solid var(--line); }
.rendernode-features summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; padding:12px 0; font-size:12px; }
.rendernode-features summary::-webkit-details-marker { display:none; }
.rendernode-features summary span { color:var(--accent); }
.rendernode-features details[open] summary span { transform:rotate(45deg); }
.rendernode-features details p { margin:0 0 15px; font-size:12px; color:var(--muted); }
.development-note { font-size:11px; color:var(--muted); max-width:100ch; margin:25px 0 0; }
.reccevis-console__main { min-height:0; align-items:start; }
.reccevis-screen { display:block; min-height:0; aspect-ratio:auto; cursor:pointer; }
.reccevis-screen img, .reccevis-screen:hover img, .reccevis-screen:focus-visible img { height:auto; min-height:0; object-fit:contain; transform:none; filter:none; }
.reccevis-screen__label--top { display:none; }
.reccevis-screen__label--bottom { position:static; display:block; text-align:right; border:0; border-top:1px solid var(--line-strong); padding:10px 12px; }
.reccevis-module { min-height:0; }
.reccevis-screen__scan, .reccevis-screen::before { display:none; }
.frame-card, .reccevis-screen, .gallery-card, .atlas-card, .metric-card { backdrop-filter:none; -webkit-backdrop-filter:none; }
.worked-marquee__track { animation-duration:65s; animation-play-state:paused; }
.worked-marquee.is-in-view .worked-marquee__track { animation-play-state:running; }
.worked-marquee:hover .worked-marquee__track, .worked-marquee:focus-within .worked-marquee__track { animation-play-state:paused; }
.reveal, .reveal.is-visible { opacity:1; transform:none; transition:none; }
.frame-card::after, .atlas-card::after, .gallery-card::after { display:none; }
.frame-tilt, .atlas-card__tilt, .gallery-card__tilt { transform-style:flat; }
.frame-tilt::after, .atlas-card__tilt::after, .gallery-card__tilt::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(5,7,9,.65) 60%,rgba(5,7,9,.97)); z-index:1; pointer-events:none; }
.frame-copy, .atlas-card__copy, .gallery-card__copy { z-index:2; transform:none; }
.frame-copy h3, .atlas-card__copy h3, .gallery-card__copy h3 { color:var(--text); }
.frame-copy p, .atlas-card__copy p, .gallery-card__copy p { color:#c3bbab; }
.frame-copy .frame-kicker, .atlas-card__copy .frame-kicker, .gallery-card__copy .frame-kicker { color:var(--accent); }
.logo-card img[alt^="Unreal"], .logo-card img[alt^="Epic"] { filter:invert(1); }
#refresh-dialog { background:#0b0d0f; color:var(--text); border:1px solid var(--line-strong); padding:18px; width:min(1200px,94vw); max-height:94svh; overflow:auto; }
#refresh-dialog::backdrop { background:#020304ec; }
.refresh-dialog-bar { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-bottom:18px; }
.refresh-dialog-bar h2 { font:12px/1.6 "IBM Plex Mono",monospace; margin:0; }
.refresh-dialog-bar button { padding:9px 15px; border:1px solid var(--line-strong); cursor:pointer; font-size:11px; }
#refresh-media img { display:block; max-height:73svh; object-fit:contain; margin:auto; }
#refresh-media iframe, #refresh-media video { width:100%; aspect-ratio:16/9; max-height:75svh; border:0; display:block; background:#000; }
#refresh-caption { font-size:12px; color:var(--muted); margin:15px 0 0; }
#refresh-fallback { display:inline-block; font-size:12px; color:var(--accent); margin-top:15px; }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@keyframes portrait-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@media(max-width:1000px) {
  .hero { gap:22px; }
  .identity-portrait figcaption { flex-direction:column; gap:6px; }
  .identity-role { text-align:left; }
  .identity-disciplines { gap:10px; font-size:9px; flex-wrap:wrap; }
  .rendernode-layout { grid-template-columns:1fr; }
  .rendernode-copy { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
  .rendernode-features { grid-column:2; grid-row:1 / span 3; margin-top:0; }
}
@media(max-width:760px) {
  html { scroll-padding-top:100px; }
  .site-header { position:sticky; top:0; display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px 8px 5px; }
  .site-header .brand { font-size:14px; }
  .site-header .brand-line { width:auto; font-size:7.5px; letter-spacing:.03em; }
  .site-nav { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:2px; justify-content:space-between; }
  .site-nav a { font-size:8.5px; padding:8px 5px; }
  .hero { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding-top:12px; }
  .hero-copy { display:contents; }
  .hero-copy > .eyebrow { order:0; margin:0; }
  .hero-copy h1 { order:1; margin:0; }
  .hero-copy > .hero-intro { order:2; margin:0; }
  .identity-portrait { order:3; }
  .hero-metrics { order:4; }
  .scroll-cue { order:5; }
  .hero h1 { font-size:clamp(28px,6.8vw,42px); max-width:25ch; }
  .hero-intro { font-size:14px; }
  .hero-metrics { grid-template-columns:1fr; }
  .metric-card { padding:12px 15px; }
  .hero-metrics .metric-card { min-height:0; display:grid; grid-template-columns:100px minmax(0,1fr); gap:7px 14px; }
  .hero-metrics .metric-label { grid-column:1; grid-row:1 / span 2; font-size:9px; line-height:1.6; }
  .hero-metrics .metric-card strong { grid-column:2; font-size:13px; }
  .hero-metrics .metric-card p:last-child { grid-column:2; margin:0; font-size:12px; line-height:1.55; }
  .identity-portrait { width:min(100%,510px); margin-inline:auto; }
  .identity-image { margin-top:-10px; }
  .identity-portrait figcaption { flex-direction:row; align-items:center; }
  .identity-name { font-size:21px; }
  .identity-role { max-width:155px; text-align:right; font-size:9px; }
  .identity-disciplines { font-size:9px; justify-content:space-between; }
  .production-films { gap:30px; }
  .production-film { grid-template-columns:1fr; gap:20px; padding-bottom:28px; }
  .production-film-copy h3 { font-size:29px; }
  .production-film-copy p { margin-block:12px; }
  .film-description { font-size:13px; }
  .rendernode-showcase { padding:18px; }
  .product-heading { display:block; }
  .product-heading h3 { margin-bottom:9px; }
  .rendernode-copy { display:block; }
  .rendernode-features { margin-top:20px; }
  .rendernode-copy h4 { font-size:24px; }
  .rendernode-copy h4 br { display:none; }
  .screen-bar { font-size:8px; }
  .section { padding-block:24px; }
  .home-stack { padding-top:8px; padding-bottom:0; }
  .home-stack > .scroll-cue { padding-bottom:8px; }
  .tools-section { padding-top:12px; }
  .tools-heading { display:block; }
  .tools-heading h2 { max-width:none; font-size:28px; line-height:1.13; }
  .tools-heading .section-copy { margin-top:12px; font-size:14px; }
  .product-heading { margin-bottom:16px; padding-bottom:14px; }
  .rendernode-showcase { padding:14px; margin-bottom:24px; }
  .rendernode-layout { gap:20px; }
  .rendernode-screen .screen-bar { padding:8px; }
  .reccevis-console__bar { gap:10px; padding:14px; }
  .reccevis-console__main { min-height:0; }
  .reccevis-module { min-height:0; padding:18px; }
  .reccevis-module h3 { font-size:29px; }
  .reccevis-module__lead { font-size:15px; }
  .reccevis-module__body { font-size:13px; }
  .reccevis-node { min-height:74px; }
  .logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logo-card { min-width:0; min-height:64px; padding:10px; gap:8px; }
  .logo-card img { width:28px; height:28px; flex-shrink:0; object-fit:contain; }
  .logo-card span { min-width:0; font-size:12px; }
  #refresh-dialog { width:calc(100% - 16px); padding:12px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}