:root { --space-section:112px; --space-content:72px; --space-break:48px; --space-control:28px; }
@media(max-width:720px) { :root { --space-section:80px; --space-content:56px; --space-break:36px; --space-control:24px; } }
.detail-media { position:relative; min-height:240px; background:#050709; }
.detail-media>img { width:100%; height:100%; object-fit:contain; }
.detail-media>iframe { display:block; width:100%; height:100%; min-height:240px; border:0; }
.film-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:18px 26px; border:1px solid #ffffff70; background:#0b1014e6; color:#f0ede6; font:13px 'DM Mono',monospace; cursor:pointer; white-space:nowrap; }
.film-play:hover { background:#243039; }
/* Static, low-contrast grain shared by all pages; never intercepts clicks. */
.noise,.portfolio-page .noise { opacity:.085; mix-blend-mode:normal; background-size:160px 160px; background-repeat:repeat; }
.home-page .header-center h1 { margin:0 0 3px; font:inherit; letter-spacing:.1em; }
.home-page .header-center span { display:block; }
.home-page .header-location { margin-top:3px; opacity:.55; }
.home-page .hero-bottom { border-top:0; justify-content:center; bottom:30px; }
.home-page .hero-actions { width:auto; justify-content:center; }
.home-page .hero-bottom a { text-shadow:0 1px 8px #000; }
.home-page .hero-bottom b { margin-left:10px; }
@media(max-width:720px) {
  .home-page .site-header { grid-template-columns:40px minmax(0,1fr) 36px; gap:10px; }
  .home-page .header-center { display:block; font-size:10px; line-height:1.6; }
  .home-page .header-center h1 { font-size:clamp(9px,2.5vw,12px); letter-spacing:.025em; }
  .home-page .header-center span { font-size:9px; letter-spacing:.025em; }
}
#work .project-info { display:block; }
#work > .project-wide { margin-bottom:36px; }
#work .project-image { height:auto; min-height:0; aspect-ratio:2.39 / 1; }
#work .project-info p { margin:10px 0 0; opacity:.62; }
#work .project-grid .project { margin-bottom:32px; }
#work .all-work { margin-bottom:0; padding-top:var(--space-control); padding-bottom:var(--space-control); }
#work.work { padding-top:var(--space-section); padding-bottom:var(--space-break); }
.home-page .section-head { margin-bottom:var(--space-content); }
.home-page .intro { padding-top:var(--space-section); padding-bottom:var(--space-section); }
.home-page .statement { margin:var(--space-content) 0; }
.home-page .intro-meta a { margin-top:36px; }
.home-page .contact { min-height:82svh; padding-top:var(--space-section); padding-bottom:var(--space-break); }
.home-page .contact > p { margin:0; }
.home-page .contact-link { margin:auto 0; padding:var(--space-content) 0; }
.home-page .contact-link span { top:calc(var(--space-content) + 10%); }
.portfolio-page .portfolio-list { margin-top:32px; }
.portfolio-page .portfolio-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:720px) { .portfolio-page .portfolio-list { grid-template-columns:1fr; } }
.portfolio-page .row-media { aspect-ratio:2.39 / 1; }
.portfolio-page .work-hero { min-height:0; padding-bottom:32px; }
.portfolio-page .work-next { display:flex; justify-content:space-between; gap:24px; padding-top:26px; padding-bottom:26px; }
.portfolio-page .portfolio-index { padding-bottom:var(--space-content); }
.portfolio-page .work-next { padding-top:var(--space-control); padding-bottom:var(--space-control); margin-bottom:var(--space-content); }
.portfolio-page .work-next > a { display:inline-flex; align-items:center; gap:20px; flex-shrink:0; font-size:clamp(20px,2vw,28px); line-height:1.2; letter-spacing:-.035em; }
.portfolio-page .work-next a i { float:none; font-size:1em; }
@media(max-width:720px) { .portfolio-page .work-next { flex-direction:column; align-items:flex-start; gap:12px; } .portfolio-page .work-next p { margin:0; } }
.card-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.card-preview { opacity:0; transition:opacity .25s ease; }
.card-preview.is-playing { opacity:1; }
.portfolio-brand { display:block; flex:none; width:var(--brand-width); max-width:var(--brand-max); background-repeat:no-repeat; filter:drop-shadow(0 2px 12px rgba(0,0,0,.2)); }
.brand-overlay { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; background:rgba(5,9,12,.32); opacity:0; transition:opacity .4s ease; pointer-events:none; }
.brand-overlay { flex-direction:column; gap:12px; }
.brand-credit { display:flex; flex-direction:column; gap:5px; max-width:86%; text-align:center; color:var(--paper); font:12px/1.35 'DM Mono',monospace; text-shadow:0 1px 8px #000; }
.brand-client { letter-spacing:.06em; }
.brand-role { opacity:.85; }
#work .project-info p,.portfolio-page .row-title > span { display:none; }
@media(max-width:900px) { .brand-overlay { gap:8px; } .brand-credit { font-size:11px; gap:3px; } }
[data-project-id].preview-active .brand-overlay { opacity:1; }
.brand-credit { filter:blur(4px); transition:filter .4s ease; }
.preview-active .brand-credit { filter:blur(0); }
.preview-toggle { display:inline-block; margin-left:22px; border:0; border-bottom:1px solid currentColor; padding:5px 0; background:none; color:inherit; cursor:pointer; font:12px 'DM Mono',monospace; letter-spacing:.06em; }
@media(hover:none) { .brand-overlay { opacity:0; } }
.portfolio-page .brand-overlay {
  opacity:1;
  background:radial-gradient(ellipse at center,rgba(5,9,12,.38) 0%,rgba(5,9,12,.16) 65%,rgba(5,9,12,.28) 100%),linear-gradient(0deg,rgba(5,9,12,.22),transparent 55%);
}
.portfolio-page .brand-credit {
  opacity:0;
  transition:opacity .4s ease,filter .4s ease;
}
.portfolio-page .portfolio-brand {
  width:calc(var(--brand-width) * .55);
  max-width:calc(var(--brand-max) * .55);
}
.portfolio-page .preview-active .brand-credit { opacity:1; }
@media(prefers-reduced-motion:reduce) { .brand-overlay,.card-preview,.brand-credit { transition:none; filter:none; transform:none; } }
@media(prefers-reduced-motion:reduce) { .portfolio-page .brand-credit { transition:none; } }
.detail-copy dd { white-space:pre-line; }
.detail-copy dl div[hidden] { display:none; }
.project-info { grid-template-columns:minmax(0,1fr) auto; }
.project-grid .project-info { display:block; }
.project-grid .project-info p { margin-top:10px; }
.row-title h2 { line-height:1.15; }
.project-info h3 { font-size:clamp(26px,3vw,46px); line-height:1.12; }
@media(max-width:720px) { .project-info { display:block; } .project-info p { margin-top:10px; } }