/* ===== Home page only ===== */
.skip-link{position:fixed;left:12px;top:-60px;z-index:300;background:#2979ff;color:#fff;padding:.7rem 1rem;font-family:var(--font-mono);font-size:.8rem;text-decoration:none}
.skip-link:focus{top:12px}
/* hero stats: readable over the photo */
.hss-num{color:#8db4ff!important;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.75)}
.hss-label{color:#d6d6d6!important;text-shadow:0 1px 3px rgba(0,0,0,.95),0 1px 10px rgba(0,0,0,.8)}
.hero-desc{color:#cfcfcf}
/* touch targets (>=44px) */
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem}
.nav-logo{display:inline-flex;align-items:center;min-height:44px}
.ft-top,.show-more-btn,.show-less-btn,.cat-tab{min-height:44px}
.ft-top{display:inline-flex;align-items:center}
@media(max-width:600px){
  .nav-links a{padding:0 .2rem;letter-spacing:.02em}
  .nav-links{gap:.35rem}
  .nav-logo{font-size:.95rem}
}
/* about: single column until a portrait is configured */
/* About: same sidebar + main rhythm as the project detail pages */
#about{display:grid!important;grid-template-columns:minmax(220px,280px) minmax(0,1fr)!important;column-gap:clamp(32px,4vw,68px)!important;row-gap:0!important;align-items:start!important;max-width:none!important}
.about-aside{position:sticky;top:96px;display:grid;gap:1.1rem;align-self:start}
.about-aside-label{color:var(--electric);letter-spacing:.18em;text-transform:uppercase}
#about .photo-frame{max-height:none}
#about .about-stats{margin:0!important;display:grid!important;grid-template-columns:1fr!important;gap:0!important;background:none!important;border-top:1px solid var(--gray-line2)}
#about .about-stats .stat-item{padding:1.1rem 0!important;border:0!important;border-bottom:1px solid var(--gray-line)!important;background:none!important}
.about-main{min-width:0}
.about-copy{columns:2 26rem;column-gap:clamp(32px,4vw,64px);margin-top:1.6rem;font-size:1.05rem}
.about-copy p{break-inside:avoid-column}
.about-main .pill-row{margin-top:2rem}
@media(max-width:960px){
  #about{grid-template-columns:1fr!important;row-gap:2.5rem!important}
  .about-aside{position:static;order:2}
  #about .about-stats{grid-template-columns:1fr 1fr!important}
  #about .about-stats .stat-item{padding-right:1rem!important}
  .about-copy{columns:1}
}
#about .photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
/* tabs: fade hint that the strip scrolls */
.cat-tabs{-webkit-mask-image:linear-gradient(to right,#000 92%,transparent);mask-image:linear-gradient(to right,#000 92%,transparent)}
/* contact */
#contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;max-width:1280px!important;gap:4rem!important}
#contact .c-links{max-width:none}
.contact-side{display:grid;gap:1.6rem;align-content:start;padding-top:2.2rem}
.contact-side h3{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--electric);font-weight:500}
.contact-side p{color:var(--gray-light);line-height:1.75;max-width:46ch}
.contact-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.contact-cta a{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.9rem 1.2rem;border:1px solid var(--gray-line2);color:var(--white);min-height:44px;display:inline-flex;align-items:center}
.contact-cta a.primary{background:var(--electric);border-color:var(--electric);color:#fff}
.contact-cta a:hover{border-color:var(--electric)}
#social-links{display:flex;flex-wrap:wrap;gap:.6rem}
#social-links a{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--gray-light);border-bottom:1px solid var(--gray-line2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 .2rem}
#social-links a:hover{color:var(--white);border-color:var(--electric)}
@media(max-width:960px){#contact{grid-template-columns:1fr!important;gap:2rem!important}.contact-side{padding-top:0}}
/* showreel (appears only when configured in assets/js/site-config.js) */
#reel{padding:5rem 3rem 2rem;max-width:1280px;margin:0 auto}
#reel video{width:100%;aspect-ratio:16/9;background:#000;display:block;border:1px solid var(--gray-line2)}
@media(max-width:600px){#reel{padding:3rem 1.2rem 1rem}}
.hero-sidestats>div{text-align:right}
.hss-label{max-width:18rem;margin-left:auto}


/* ---- Hero: temple point-cloud render ----
   The artwork is already dark navy that fades to near-black at its edges, so it runs at full strength
   (no 40% dimming) and a gradient only protects the text column and the page seam. */
.hero-slides{inset:0!important}
.hero-slide{background-size:cover!important;background-position:100% 40%!important;animation:heroKen 50s ease-in-out infinite alternate!important}
.hero-slide.active{opacity:1!important}
@keyframes heroKen{0%{transform:scale(1.02)}100%{transform:scale(1.09)}}
.hero-ov-main{background:
  linear-gradient(to right,rgba(8,8,8,.88) 0%,rgba(8,8,8,.62) 30%,rgba(8,8,8,.12) 58%,rgba(8,8,8,0) 75%),
  linear-gradient(to top,#080808 0%,rgba(8,8,8,.55) 22%,rgba(8,8,8,0) 48%),
  linear-gradient(to bottom,rgba(8,8,8,.55) 0%,rgba(8,8,8,0) 18%)!important}
@media (min-width:901px) and (max-width:1250px){
  .hero-ov-main{background:
    linear-gradient(to right,rgba(8,8,8,.9) 0%,rgba(8,8,8,.78) 42%,rgba(8,8,8,.3) 68%,rgba(8,8,8,0) 85%),
    linear-gradient(to top,#080808 0%,rgba(8,8,8,.55) 22%,rgba(8,8,8,0) 48%),
    linear-gradient(to bottom,rgba(8,8,8,.55) 0%,rgba(8,8,8,0) 18%)!important}
}
@media (max-width:900px){
  .hero-slide{background-position:74% 30%!important}
  .hero-ov-main{background:
    linear-gradient(to top,#080808 0%,rgba(8,8,8,.82) 38%,rgba(8,8,8,.25) 70%,rgba(8,8,8,.45) 100%)!important}
}
@media (prefers-reduced-motion:reduce){.hero-slide{animation:none!important}}

/* ---- Contact: single block, heading left / links right (the "Open to" panel was removed) ---- */
#contact{grid-template-columns:minmax(0,1fr)!important;max-width:1280px!important}
#contact>div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:4rem;row-gap:1.25rem;align-items:end}
#contact>div>.sec-label{grid-column:1/-1}
#contact>div>.contact-big{grid-column:1;grid-row:2;margin:0}
#contact>div>.contact-sub{grid-column:1;grid-row:3;margin:0;max-width:46ch}
#contact>div>.c-links{grid-column:2;grid-row:2/4;align-self:end;margin:0}
#contact>div>#social-links{grid-column:2;grid-row:4}
@media(max-width:960px){
  #contact>div{display:block}
  #contact>div>.contact-big{margin-bottom:1.25rem}
  #contact>div>.c-links{margin-top:1.75rem}
  #contact>div>#social-links{margin-top:1.25rem}
}

/* ---- Selected Works: one heading level per block ----
   The tabs already name the category, so the "02 / Projection Mapping" label and the second big slogan
   ("Beyond the surface.") are hidden; each tab keeps its one-line description. */
.portfolio-category-intro .portfolio-category-label,
.portfolio-category-intro .portfolio-category-title{display:none!important}
.portfolio-category-intro{margin:0 0 1.25rem!important;padding:0!important}
.cat-panel>.portfolio-category-intro{margin-top:-1.5rem!important}
.portfolio-category-intro .portfolio-category-desc{margin:0!important;max-width:60ch;color:#c4c4c4;font-size:1rem;line-height:1.6}

/* ---- Hero stats: bottom-aligned with the left column, soft feathered backing (no visible edge) ---- */
.hero-sidestats{top:auto!important;bottom:5rem!important;transform:none!important;right:3rem!important;gap:1.6rem!important;z-index:3;isolation:isolate}
.hero-sidestats::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-5.5rem -6rem -4.5rem -9rem;
  background:radial-gradient(closest-side,rgba(8,8,8,.72) 0%,rgba(8,8,8,.52) 38%,rgba(8,8,8,.2) 72%,rgba(8,8,8,0) 100%)}

/* ---- lead projects, archive, process ---- */
.lead-head{margin:2.2rem 0 1.2rem}
.lead-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-bottom:3.5rem}
.lead-grid .lead-card{display:block;text-decoration:none;color:inherit;aspect-ratio:16/9}
.lead-grid .lead-card:focus-visible{outline:2px solid var(--electric);outline-offset:-3px}
details.archive{border-top:1px solid var(--gray-line2,rgba(255,255,255,.13))}
details.archive>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.4rem 0;min-height:44px}
details.archive>summary::-webkit-details-marker{display:none}
details.archive>summary span{font-family:var(--font-display,'Bebas Neue',sans-serif);font-size:1.8rem;letter-spacing:.03em}
details.archive>summary span::after{content:'+';margin-left:.7rem;color:var(--electric)}
details.archive[open]>summary span::after{content:'\2212'}
details.archive>summary em{font-style:normal;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-text,#9c9c9c)}
details.archive>summary:focus-visible{outline:2px solid var(--electric);outline-offset:2px}
.proc-list{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem;margin-top:2rem}
.proc-list li{counter-increment:p;border-top:2px solid var(--electric);padding-top:1rem}
.proc-list li::before{content:'0' counter(p);display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--electric);margin-bottom:.5rem}
.proc-list b{display:block;font-family:var(--font-display,'Bebas Neue',sans-serif);font-weight:400;font-size:1.6rem;letter-spacing:.03em;margin-bottom:.4rem}
.proc-list span{font-size:.86rem;line-height:1.6;color:var(--gray-text,#9c9c9c)}
@media(max-width:1100px){.proc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.lead-grid .lead-card{aspect-ratio:1/1}.lead-grid .pbg{background-size:auto 100%!important}.lead-grid,.proc-list{grid-template-columns:1fr}#process{padding-top:3rem;padding-bottom:2rem}}

#process{padding-top:5rem;padding-bottom:3rem}
#process .proc-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.proc-list .pr-kind{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--electric);margin-bottom:.35rem}
.proc-list li>a{display:inline-block;margin-top:.9rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--white);text-decoration:none;border-bottom:1px solid var(--electric);padding-bottom:2px}
.proc-list li>a:hover{color:var(--electric)}
.proc-list li::before{display:none}
.proc-list li>span:not(.pr-kind){display:block}
.proc-list li>a{display:table}
.proc-block{margin:0 0 3.5rem}
.proc-intro{font-size:.9rem;color:var(--gray-text,#9c9c9c);margin:0 0 .4rem}
#process .proc-list{margin-top:1.4rem}
.proc-block .lead-head{margin-top:0}

/* contact: label + value, no icons, no lines */
#contact .c-links{display:grid;gap:1.1rem;align-self:end;padding-bottom:.35rem}
#contact .c-link{display:grid!important;grid-template-columns:6.5rem minmax(0,1fr);align-items:baseline;column-gap:1rem;padding:0!important;border:0!important;background:none!important;font-family:var(--font-mono)!important;font-size:.92rem!important;letter-spacing:.04em!important;line-height:1.5!important;color:var(--white)!important;text-decoration:none}
#contact .c-link small{font-size:.6rem;letter-spacing:.16em;line-height:1.5;text-transform:uppercase;color:var(--electric)}
#contact a.c-link:hover{color:var(--electric)!important}
@media(min-width:961px){#contact .c-link:last-child{white-space:nowrap}}
@media(max-width:600px){#contact .c-link{grid-template-columns:1fr;row-gap:.2rem}}