/* Standalone gallery pages. The house entrance is deliberately NOT loaded here. */
body.subpage-body { margin:0; background:var(--yellow); color:var(--ink); }
.subpage-content { min-height:100vh; overflow:visible; }
.subpage-content .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.subpage-shell { max-width:1340px; margin:0 auto; padding:0 clamp(20px,4.8vw,72px); }
.subpage-hero { position:relative; min-height: min(750px,89svh); display:flex; flex-direction:column; justify-content:center; padding: 85px 0 58px; border-bottom:3px solid var(--ink); }
.subpage-hero h1 { font:1000 clamp(5.4rem,11.7vw,12.5rem)/.83 Impact,'Arial Black',Arial,sans-serif; letter-spacing:-.056em; margin:20px 0 50px; }
.subpage-hero h1 span { color:var(--paper); -webkit-text-stroke:2px var(--ink); }
.subpage-hero .section-tag { margin:0; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.hero-bottom p { font-size:clamp(1.1rem,2vw,1.55rem); max-width:560px; line-height:1.35; font-weight:750; margin:0; }
.hero-spark { color:var(--orange); font-size:clamp(65px,9vw,130px); transform:rotate(-18deg); }
.down-cue { margin-top:30px; font-weight:900; font-size:.78rem; letter-spacing:.12em; text-decoration:none; align-self:flex-start; border-bottom:2px solid var(--ink); padding-bottom:5px; }
.down-cue:hover { color:#ba3826; }
#projects, #process-board, .process-chapter { scroll-margin-top:90px; }
.work-collection { padding:24px 0 45px; }
.work-entry { padding:clamp(65px,9vw,120px) 0; border-bottom:2px solid var(--ink); }
.entry-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.entry-kicker,.entry-label { font-weight:950; font-size:.79rem; letter-spacing:.12em; margin:0; }
.entry-mark { background:var(--ink); color:var(--yellow); width:48px; height:48px; display:grid; place-items:center; border-radius:50%; font-weight:900; }
.work-entry h2,.process-chapter h2 { font:1000 clamp(3.8rem,8.5vw,9rem)/.9 Impact,'Arial Black',Arial,sans-serif; letter-spacing:-.047em; margin:20px 0 36px; }
.entry-feature-image { border:3px solid var(--ink); background:var(--ink); overflow:hidden; border-radius:13px; box-shadow:9px 9px 0 var(--ink); aspect-ratio:16/8.2; }
/* Featured projects now use actual playable clips instead of an image gallery. */
.entry-feature-video { aspect-ratio:16/9; box-shadow:9px 9px 0 var(--ink); }
.entry-feature-video video { display:block; width:100%; height:100%; object-fit:contain; background:#0d0d0d; }
.entry-feature-video video:focus-visible { outline:4px solid var(--orange); outline-offset:-4px; }
.entry-feature-image img { width:100%;height:100%;object-fit:cover; display:block; }
.entry-detail { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:38px 0; }
.entry-detail p:not(.entry-label) { max-width:635px; font-size:1.07rem; line-height:1.7; font-weight:550; }
.outlined-link { color:var(--ink); border:2px solid var(--ink); border-radius:100px; text-decoration:none; padding:16px 22px; white-space:nowrap; font-size:.8rem; font-weight:900; }
.outlined-link:hover,.outlined-link:focus-visible { background:var(--ink); color:var(--yellow); }
.entry-supporting { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.entry-supporting figure { margin:0; }
.entry-supporting img { border:2px solid var(--ink); border-radius:10px; display:block; width:100%; aspect-ratio:1.56; object-fit:cover; }
.entry-supporting figcaption { padding:15px 0 0; font-size:.77rem; font-weight:900; letter-spacing:.08em; }
.end-card { margin:90px 0 110px; padding:clamp(35px,5vw,75px); background:var(--paper); border:3px solid var(--ink); border-radius:14px; display:flex; justify-content:space-between; align-items:end; gap:30px; box-shadow:10px 10px 0 var(--ink); }
.end-card h2 { font:1000 clamp(3rem,6.1vw,6.8rem)/.92 Impact,'Arial Black',Arial,sans-serif; letter-spacing:-.045em; margin:15px 0 0; }
.pill-link { background:var(--ink);color:var(--yellow)!important; text-decoration:none; font-size:.8rem; font-weight:900; letter-spacing:.04em; padding:18px 25px; border-radius:100px; white-space:nowrap; }
.pill-link:hover { background:#503a27; }
.subpage-footer { border-top:2px solid var(--ink); padding:26px clamp(20px,4.8vw,72px) 38px; display:flex;align-items:center;justify-content:space-between;gap:15px; font-weight:900;letter-spacing:.07em;font-size:.7rem; }
.subpage-footer div { display:flex;gap:25px;flex-wrap:wrap; }
.subpage-footer a { color:var(--ink);text-decoration:none; }
.subpage-footer a:hover { text-decoration:underline; }
.process-intro { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,75px); padding:110px 0; align-items:center; border-bottom:2px solid var(--ink); }
.process-intro-image { position:relative; aspect-ratio:.95; border:3px solid var(--ink); border-radius:14px; box-shadow:9px 9px 0 var(--ink); background:var(--paper); overflow:hidden; }
.process-intro-image img { display:block; width:100%;height:100%;object-fit:cover; }
.process-sticker {position:absolute;top:24px;right:24px; background:var(--orange); color:#fff; transform:rotate(10deg); border:3px solid var(--ink); border-radius:50%; width:120px; height:120px; display:grid;place-items:center;text-align:center;font-weight:1000;line-height:1.05;}
.process-intro-copy h2 { font:1000 clamp(3rem,5.9vw,6rem)/.93 Impact,'Arial Black',Arial,sans-serif; letter-spacing:-.035em; margin:22px 0 28px; }
.process-intro-copy p:not(.entry-kicker) { max-width:510px; font-size:1.05rem; line-height:1.7; }
.process-intro-copy p.editor-note {font-size:.91rem; opacity:.75;}
.process-chapter { padding:75px 0 95px; border-bottom:2px solid var(--ink); }
.chapter-meta { display:flex; justify-content:space-between; gap:15px; font-size:.74rem; font-weight:950; letter-spacing:.11em; }
.pending-board { position:relative; min-height:375px; border:3px solid var(--ink); border-radius:13px; background:var(--paper); overflow:hidden; padding:30px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:8px 8px 0 var(--ink); }
.pending-board p { margin:20px 0 0; max-width:480px; font-size:1.2rem; font-weight:850; line-height:1.4; }
.board-small { font-size:.75rem;letter-spacing:.12em;font-weight:950; }
.board-sketch { background:#fff2da; }
.story-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:23px 0; }
.story-grid i { height:160px; border:3px solid #211a13; background:linear-gradient(140deg,#f5ce8d 0 35%,#f5bd7c 35% 45%,#f6dcac 45%);transform:rotate(var(--rot,0deg)); }
.story-grid i:nth-child(2){--rot:2deg}.story-grid i:nth-child(3){--rot:-2deg}.story-grid i:nth-child(4){--rot:1deg}
.board-rough { background:#f1aa68; }
.ghost-frames { display:block;align-self:center;font-size:clamp(55px,10vw,150px);font-weight:1000;letter-spacing:-.12em;color:#362119;opacity:.75; }
.board-art { background:#e8cf92; }
.art-sketch { align-self:center; font-size:220px;line-height:1;color:#bf4b31;transform:rotate(-12deg); }
@media (max-width:850px){ .subpage-hero {min-height:600px;} .process-intro {grid-template-columns:1fr;padding:80px 0;}.process-intro-image{aspect-ratio:1.55;} .entry-detail {align-items:start;flex-direction:column;} .end-card {align-items:start;flex-direction:column;} }
@media (max-width:650px){ .subpage-hero{ min-height:530px; padding:65px 0 40px;} .subpage-hero h1 {font-size:clamp(4.4rem,17vw,7rem); margin-bottom:45px;} .hero-bottom {align-items:end;} .hero-spark {font-size:60px;} .work-entry h2,.process-chapter h2 {font-size:clamp(3.4rem,13vw,6.5rem);} .entry-feature-image:not(.entry-feature-video) {aspect-ratio:1.25;} .entry-supporting{grid-template-columns:1fr;gap:26px;} .pending-board{min-height:320px;padding:19px;} .story-grid{gap:7px;} .story-grid i{height:100px;} .process-intro-image{aspect-ratio:1.1;} .process-sticker{width:90px;height:90px;font-size:.85rem;} .subpage-footer{flex-direction:column;align-items:flex-start;} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}


/* ===========================================================
   VIDEO GALLERY: powered by projects-data.js
   The entrance page and behind-the-scenes page are unchanged.
   =========================================================== */
#projects.dynamic-work-collection { scroll-margin-top:92px; padding:42px 0 14px; }
.video-library-section { padding:clamp(42px,7vw,95px) 0 clamp(70px,8vw,105px); border-bottom:3px solid var(--ink); }
.video-section-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.video-section-count { border:2px solid var(--ink); border-radius:100px; padding:8px 13px; font-weight:900; font-size:.72rem;letter-spacing:.06em; }
.video-section-title { font:1000 clamp(3.2rem,7.7vw,8.3rem)/.9 Impact,'Arial Black',Arial,sans-serif; text-transform:uppercase; letter-spacing:-.055em; margin:22px 0 12px; max-width:1100px; }
.video-section-intro { margin:0 0 clamp(29px,4vw,52px); max-width:600px; font-size:clamp(1rem,1.7vw,1.18rem); font-weight:650; line-height:1.5; }
.video-project-grid { display:grid; gap:clamp(32px,4vw,65px) clamp(20px,3vw,45px); }
.video-grid-featured { grid-template-columns:1fr; }
.video-grid-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.video-project-card { min-width:0; }
.video-card-head {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;min-height:35px;}
.video-card-number {font-size:.8rem; font-weight:1000; letter-spacing:.12em; }
.video-card-tag { font-size:.67rem; font-weight:950; text-transform:uppercase; letter-spacing:.07em; padding:8px 10px; border:2px solid var(--ink); border-radius:100px; background:var(--paper); text-align:center; }
.video-card-title {font:1000 clamp(2.6rem,4.6vw,5.1rem)/.98 Impact,'Arial Black',Arial,sans-serif; letter-spacing:-.035em; text-transform:uppercase; margin:0 0 25px; }
.video-grid-compact .video-card-title {font-size:clamp(2.05rem,3.7vw,4.1rem);}
.video-card-player { width:100%; aspect-ratio:16/9; background:#171310; border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:12px;overflow:hidden; }
.video-card-player video { display:block;width:100%;height:100%;object-fit:contain;background:#151313; }
.video-card-player video:focus-visible {outline:4px solid var(--orange); outline-offset:-5px;}
.video-card-description {font-size:1.03rem; font-weight:650; line-height:1.6; margin:23px 0 10px; max-width:780px;}
.video-card-credit {font-size:.82rem;line-height:1.5; opacity:.85; margin:0; max-width:800px;}
.video-card-credit strong {font-weight:1000;}
.video-grid-compact .video-card-description {font-size:.94rem;}
.video-library-empty {padding:80px 0 110px;}
.video-library-empty h2 {font:1000 clamp(3.6rem,10vw,8rem)/.92 Impact,'Arial Black',Arial,sans-serif;margin:0 0 18px;}
.gallery-load-message {font-weight:700;}
@media (max-width:680px) {
 .video-grid-compact {grid-template-columns:1fr;}
 .video-section-title{font-size:clamp(3.2rem,13vw,5.7rem);}
 .video-card-title,.video-grid-compact .video-card-title{font-size:clamp(2.5rem,9.3vw,4.2rem);}
 .video-card-player{box-shadow:5px 5px 0 var(--ink);}
 .video-card-tag{font-size:.6rem;}
}


/* =======================================================
   FEATURED PROJECTS COLOR STORY
   Smooth background changes while scrolling the video page.
   ======================================================= */
body.subpage-body.featured-color-page {
  --featured-scene: #f4c53b;
  background: var(--featured-scene);
  transition: background-color .72s cubic-bezier(.2,.7,.2,1);
}
body.subpage-body.featured-color-page .portfolio-content,
body.subpage-body.featured-color-page .site-nav {
  background: var(--featured-scene);
  transition: background-color .72s cubic-bezier(.2,.7,.2,1);
}
.featured-color-card .video-card-player,
.featured-color-card .video-card-tag {
  background: rgba(255,248,232,.55);
}
.featured-color-card .video-card-player {
  transition: transform 260ms cubic-bezier(.2,.75,.3,1), box-shadow 260ms cubic-bezier(.2,.75,.3,1);
}
.featured-color-card:hover .video-card-player,
.featured-color-card:focus-within .video-card-player {
  transform: translate(-2px,-2px);
  box-shadow: 10px 10px 0 var(--ink);
}
body.subpage-body.featured-color-page .featured-hero,
body.subpage-body.featured-color-page .end-card,
body.subpage-body.featured-color-page .subpage-footer {
  transition: background-color .72s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){
  body.subpage-body.featured-color-page,
  body.subpage-body.featured-color-page .portfolio-content,
  body.subpage-body.featured-color-page .site-nav,
  .featured-color-card .video-card-player {
    transition: none !important;
  }
}