* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Prevent rubber-banding / overscroll while the opening consumes a wheel gesture. */
html:has(body.intro-locked) { overflow: hidden; overscroll-behavior: none; scroll-behavior: auto; }
body { margin: 0; background: #0d0b0a; color: #f6eee3; font-family: Arial, sans-serif; }
body.intro-locked { overflow: hidden; overscroll-behavior: none; }
.entrance { position: relative; min-height: 100svh; display: grid; place-items: center; background: #0c0a09; overflow: hidden; }
.animation-stage { width: 100%; height: 100svh; position: relative; display: grid; place-items: center; transition: transform 180ms ease-out; }
/* Preserve a shared, exact 16:9 drawing area for both videos. */
.scene-canvas {
  position: relative;
  width: min(100%, 177.77778svh);
  max-height: 100svh;
  aspect-ratio: 16 / 9;
}
.reel-media, .house-media {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.reel-media { z-index: 1; background: #090807; }
.house-media { z-index: 2; pointer-events: none; }
/* When the new house animation ends, leave the reel exposed and operable. */
body.house-finished #house-video { visibility: hidden; }
#house-video { visibility: hidden; }
body.playing #house-video { visibility: visible; }
body.playing #scrub-frame { visibility: hidden; }
/* IDLE CUE: a tiny house hop, followed by a big fading title. */
/* Change 5.8s below to make the repeated idle cue faster or slower. */
.entrance.prompt-active .animation-stage {
  animation: house-idle-hop 5.8s ease-in-out infinite;
}
@keyframes house-idle-hop {
  0%, 11%, 28%, 100% { transform: translateY(0); }
  15% { transform: translateY(-25px); }
  19% { transform: translateY(-35px); }
  23% { transform: translateY(3px); }
  25% { transform: translateY(-7px); }
}
.scroll-prompt {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 49%;
  width: max-content;
  max-width: 95%;
  margin: 0;
  color: #fff7ea;
  font-size: clamp(2.4rem, 8vw, 7.5rem);
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.9);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -46%);
}
.entrance.prompt-active .scroll-prompt {
  animation: enter-prompt-fade 5.8s ease-in-out infinite;
}
@keyframes enter-prompt-fade {
  0%, 29% { opacity: 0; transform: translate(-50%, -44%); }
  43%, 58% { opacity: 1; transform: translate(-50%, -50%); }
  77%, 100% { opacity: 0; transform: translate(-50%, -56%); }
}
body.playing .scroll-prompt { display: none; }

/* Only the progress line and a small skip button remain near the bottom. */
.entrance-ui {
  position: absolute;
  z-index: 6;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: min(94%, 460px);
}
.progress-track { height: 3px; background: #4c3831; flex: 1; min-width: 60px; }
#progress-fill { width: 0%; height: 100%; background: #f5a84d; }
.playback-message { display: none; color: #e1cdb3; font-size: 13px; line-height: 1.5; }
button { font: inherit; cursor: pointer; }
#skip-intro { flex-shrink: 0; padding: 9px 17px; border: 1px solid #99715d; background: #0c0a09a8; border-radius: 6px; color: #f6eee3; }
#skip-intro:focus-visible { outline: 2px solid #f5a84d; outline-offset: 4px; }
body.playing .entrance-ui { display: none; }
/* Returning visitors see the reel instead of the house or its intro UI. */
body.house-finished #scrub-frame { visibility: hidden; }
body.house-finished .entrance-ui,
body.house-finished .scroll-prompt { display: none; }
@media (prefers-reduced-motion: reduce) {
  .entrance.prompt-active .animation-stage,
  .entrance.prompt-active .scroll-prompt { animation: none; }
  .reduced-motion .scroll-prompt { display: none; }
}

/* YELLOW PORTFOLIO: Only the interior changes; entrance styling above stays intact. */
:root { --yellow:#f4c53b; --ink:#211a13; --paper:#fff3d4; --orange:#ed5b27; }
.portfolio-content { color:var(--ink); background:var(--yellow); min-height:100vh; overflow:clip; }
.portfolio-content a { color:inherit; }
.site-nav { position:sticky; top:0; z-index:50; background:var(--yellow); border-bottom:2px solid var(--ink); min-height:72px; padding:14px clamp(20px,4vw,70px); display:flex; align-items:center; justify-content:space-between; gap:26px; }
.site-nav a { text-decoration:none; font-weight:850; font-size:.83rem; }
.nav-brand { letter-spacing:-.06em; white-space:nowrap; font-size:1.23rem!important; font-weight:1000!important; }
.nav-brand-dot { color:var(--orange); font-size:1.5em; }
.nav-links { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:clamp(14px,2.2vw,34px); }
.site-nav a:hover,.site-nav a:focus-visible { text-decoration:underline; text-underline-offset:4px; }
.site-nav a:focus-visible,.portfolio-content a:focus-visible { outline:3px solid var(--orange); outline-offset:5px; }
.reel-nav-link { background:var(--ink); color:var(--yellow)!important; border:2px solid var(--ink); border-radius:999px; padding:9px 16px; }
.portfolio-shell { max-width:1330px; padding:0 clamp(20px,4.8vw,70px) 95px; margin:0 auto; }
.portfolio-head { position:relative; padding:clamp(70px,9vw,135px) 0 65px; }
.section-tag { font-weight:950; letter-spacing:.145em; font-size:.76rem; margin:0 0 16px; }
.section-tag-dot { display:inline-block; vertical-align:middle; width:10px;height:10px;background:var(--ink);border-radius:50%; margin-right:6px; }
.portfolio-head h1 { font-family:Impact,'Arial Black',Arial,sans-serif; font-weight:1000; font-stretch:condensed; font-size:clamp(4.5rem,12vw,12rem); letter-spacing:-.055em; line-height:.81; margin:0; }
.portfolio-head h1 span { color:var(--paper); -webkit-text-stroke:2px var(--ink); }
.portfolio-subhead { font-size:clamp(1rem,1.6vw,1.27rem); margin:29px 0 0; max-width:520px; line-height:1.45; font-weight:600; }
.tiny-spark { position:absolute; right:8%; top:33%; color:var(--orange); font-size:clamp(3rem,8vw,7rem); transform:rotate(-14deg); }
.magnetic-grid { display:grid; grid-template-columns: 1fr 1fr .72fr; gap:clamp(15px,2vw,28px); align-items:stretch; }
.magnet-slot { min-width:0; isolation:isolate; padding:12px; margin:-12px; }
.magnet-card { display:block; min-height:clamp(315px,36vw,490px); height:100%; position:relative; overflow:hidden; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); border-radius:13px; background:#ce5d2d; text-decoration:none; transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0); transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease; will-change:transform; }
.magnet-card:active { box-shadow:3px 3px 0 var(--ink); }
.magnet-card img { display:block; position:absolute; inset:0; width:100%;height:100%;object-fit:cover; transform:translate3d(var(--img-x,0px),var(--img-y,0px),0) scale(1.05); transition:transform 220ms cubic-bezier(.2,.8,.2,1); }
.magnet-scrim { position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.04) 30%,rgba(0,0,0,.78) 100%); }
.magnet-content { position:absolute;z-index:1;inset:0;display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:clamp(19px,2.3vw,30px); color:white; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.magnet-number { font-size:.71rem;font-weight:900;letter-spacing:.14em;margin-bottom:12px; }
.magnet-content strong { font-family:Impact,'Arial Black',Arial,sans-serif;font-size:clamp(2.4rem,3.5vw,4.3rem); line-height:.9; letter-spacing:-.03em; }
.magnet-action { padding-top:25px;font-weight:950;font-size:.75rem;letter-spacing:.1em; }
.magnet-action span { display:inline-block;margin-left:10px;font-size:1.4rem;transition:transform 200ms ease; }
.magnet-card:hover .magnet-action span { transform:translate(3px,-3px); }
.magnet-about { background:#f39c56; }
.magnet-about img { object-position:center; transform:translate3d(var(--img-x,0px),var(--img-y,0px),0) scale(1); }
.magnet-about .magnet-content { justify-content:space-between; color:var(--ink); text-shadow:none; background:linear-gradient(to bottom,rgba(243,156,86,.9),transparent 40%,rgba(243,156,86,.12)); }
.magnet-about .magnet-content strong { margin-top:auto;font-size:clamp(2.4rem,3.2vw,3.8rem); }
.magnet-about .magnet-action { padding-top:14px; }
.hint-magnetic { font-size:.8rem; font-weight:750; text-align:right; margin:24px 5px 0; opacity:.7; }
.content-section { scroll-margin-top:100px; margin-top:clamp(140px,19vw,240px); }
.section-heading { display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:43px; }
.section-heading h2 {font-family:Impact,'Arial Black',Arial,sans-serif;letter-spacing:-.035em;line-height:.92;font-size:clamp(3.3rem,7vw,7.2rem);margin:0;}
.section-period,.about-dot { color:var(--orange); }
.handwritten-note {font-weight:850;transform:rotate(-8deg);font-size:1.14rem; white-space:nowrap;}
.project-grid {display:grid;grid-template-columns:1fr 1fr; gap:clamp(18px,2.5vw,36px);}
.project-preview {min-width:0;}
.project-image {aspect-ratio:1.35; border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#d9ad3e;box-shadow:7px 7px 0 var(--ink);}
.project-image img {width:100%;height:100%;object-fit:cover;display:block;transition:transform 300ms ease;}
.project-preview:hover img {transform:scale(1.04);}
.project-meta {display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:19px;}
.project-meta h3 {font-weight:950;font-size:clamp(1.18rem,2vw,1.65rem);margin:0;}
.project-meta span {font-size:.65rem;font-weight:900;letter-spacing:.075em;text-align:right;}
.editor-note {font-size:.88rem; opacity:.75;line-height:1.6; max-width:720px; }
.text-arrow-link {display:inline-block; margin-top:24px;font-size:.79rem;font-weight:950;letter-spacing:.08em;text-underline-offset:6px;}
.process-layout {display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,80px);align-items:center;}
.process-image-wrap {position:relative;aspect-ratio:1.25;overflow:hidden;background:#ecddbc;border:3px solid var(--ink);box-shadow:9px 9px 0 var(--ink);border-radius:14px;}
.process-image-wrap img {width:100%;height:100%;object-fit:cover;}
.visual-label {position:absolute;left:18px;bottom:18px;font-weight:950;font-size:.7rem;letter-spacing:.1em;color:var(--ink);background:var(--yellow);padding:11px 14px;border:2px solid var(--ink);}
.process-description {position:relative;}
.doodle-star {color:var(--orange);font-size:4rem;}
.process-description h3 {font-family:Impact,'Arial Black',Arial,sans-serif; font-size:clamp(2.6rem,4.4vw,5rem);line-height:.99;letter-spacing:-.03em;margin:15px 0 22px;}
.process-description p {font-size:1.06rem;line-height:1.7;max-width:520px;}
.about-section { scroll-margin-top:72px; background:var(--ink);color:var(--paper);padding:clamp(70px,8vw,125px) clamp(20px,4.8vw,70px) 0; }
.about-inner {max-width:1190px;margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr; gap:clamp(30px,7vw,110px);align-items:center;}
.about-section h2 {font-family:Impact,'Arial Black',Arial,sans-serif;font-size:clamp(6rem,14vw,13rem);letter-spacing:-.06em;line-height:.78;margin:0 0 45px;}
.about-lead {font-size:clamp(1.35rem,2.5vw,2.15rem);font-weight:850;line-height:1.25;max-width:590px;}
.about-copy {font-size:1.02rem;line-height:1.7;max-width:620px;}
.editor-note-light {color:#e5d1aa;}
.about-illustration { position:relative;background:#f39c56;border:3px solid var(--paper);border-radius:40% 40% 13px 13px;aspect-ratio: .85;overflow:hidden;transform:rotate(3deg);box-shadow:10px 10px 0 var(--orange); }
.about-illustration img {width:100%;height:100%;object-fit:cover;}
.about-sticker {position:absolute;right:2%;top:6%;transform:rotate(10deg);font-weight:950;font-size:clamp(.95rem,2vw,1.6rem);line-height:1.05;color:var(--ink);background:var(--yellow);border:3px solid var(--ink);border-radius:50%;width:112px;height:112px;display:grid;place-items:center;text-align:center;}
.site-footer {max-width:1190px;margin:100px auto 0;padding:28px 0 40px;border-top:1px solid #85715a;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.72rem;font-weight:900;letter-spacing:.09em;}
.site-footer a {color:var(--paper)!important;text-decoration:none;}
.site-footer a:hover {text-decoration:underline;text-underline-offset:4px;}
body.reduced-motion .house-media { visibility: hidden !important; }
.reel-media:focus-visible { outline:2px solid #f5a84d; outline-offset:-2px; }
@media (max-width:1000px){
  .magnetic-grid {grid-template-columns:1fr 1fr;}
  .magnet-slot-about {grid-column:1 / -1;}
  .magnet-slot-about .magnet-card {min-height:245px;}
  .magnet-slot-about img {object-position:center 48%;}
}
@media (max-width:650px){
  .site-nav {align-items:flex-start;flex-direction:column;gap:10px;}
  .nav-links {justify-content:flex-start;gap:14px;font-size:.7rem;}
  .site-nav a {font-size:.73rem;}
  .portfolio-head {padding:75px 0 55px;}
  .portfolio-head h1 {font-size:clamp(4.4rem,18vw,8rem);}
  .tiny-spark {right:0;top:13%;font-size:3.5rem;}
  .magnetic-grid {grid-template-columns:1fr;gap:12px;}
  .magnet-slot-about {grid-column:auto;}
  .magnet-card,.magnet-slot-about .magnet-card {min-height:365px;}
  .hint-magnetic {display:none;}
  .project-grid,.process-layout,.about-inner {grid-template-columns:1fr;}
  .section-heading {display:block;}
  .handwritten-note {display:inline-block;margin-top:20px;}
  .project-meta {display:block;}
  .project-meta span {display:block;text-align:left;padding-top:6px;}
  .about-illustration {max-width:340px;justify-self:center;}
  .site-footer {margin-top:75px;align-items:flex-start;flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){.magnet-card,.magnet-card img,.project-image img{transition:none!important;transform:none!important;}}