/* Phone layout: a compact reading surface, real photographs, no desktop card panels. */
@media(max-width:700px){
  :root{--space:22px}
  html{scroll-padding-top:88px}
  .topbar{top:max(10px,env(safe-area-inset-top));width:calc(100% - 28px);padding:9px 15px;min-height:56px;gap:14px;color:var(--graphite);background:linear-gradient(155deg,#ffffff26,#b3b3b317);border-color:#ffffffb3;box-shadow:inset 0 1px 1px #fff,0 5px 22px #292d3110;transition:transform 200ms var(--ease),opacity 200ms var(--ease),background 200ms var(--ease);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .topbar .brand{gap:8px}.topbar .brand img{width:25px;height:25px;filter:none}.topbar .brand>span{font-size:23px}.topbar .brand-sub{font-size:7px;letter-spacing:.16em;margin-top:4px}
  .nav-contact{font-size:12px;gap:9px;min-height:38px}.nav-contact span{font-size:20px}
  .topbar.nav-hidden{transform:translate(-50%,calc(-100% - 30px));opacity:0;pointer-events:none}.topbar:focus-within{transform:translateX(-50%);opacity:1;pointer-events:auto}
  .hero{height:100svh;min-height:580px;max-height:860px;background:#29312d}
  .hero-media{inset:0}.hero-media>img{transform:none!important}
  .hero-shade{background:linear-gradient(180deg,#17201a18 0%,transparent 28%,#18221b38 48%,#18221bb8 75%,#18221bea 100%)}
  .hero-intro{left:22px;right:22px;bottom:170px}.hero h1{font-size:clamp(42px,11.8vw,58px);line-height:1.06;letter-spacing:-.048em}
  .hero-aside{margin-top:17px}.hero-explore{font-size:13px;gap:25px;padding:10px 0 0;min-height:44px}.hero-explore>span{font-size:24px}
  .hero-selector{left:22px;right:22px;bottom:max(26px,env(safe-area-inset-bottom));width:auto}.hero-selector-row{gap:8px}.hero-arrow{width:44px;height:44px;flex-basis:44px}
  .hero-selector .hero-caption{padding:13px 15px;min-height:64px;gap:8px;background:#29312d61}.hero-selector .hero-caption>span:first-child{font-size:14px;line-height:1.3}.hero-selector .hero-caption small{font-size:10px;margin-bottom:4px}.hero-caption-arrow{font-size:22px}.hero-selector-bottom{padding-top:10px;gap:14px}.hero-dot{height:32px;width:28px}.hero-footer{display:none}
  .section{padding-left:22px;padding-right:22px;padding-top:68px;padding-bottom:68px}.opening{padding-top:58px;padding-bottom:38px}.opening>p{font-size:clamp(25px,6.7vw,29px);line-height:1.45}.opening>.text-link{margin-top:20px}
  .section-heading{margin-bottom:30px}.section-heading h2{font-size:clamp(34px,9.2vw,42px);line-height:1.08;letter-spacing:-.045em}.section-heading p{margin-top:19px;font-size:14px;line-height:1.65}
  .reels{padding-top:48px;padding-bottom:64px}.reel-grid{max-width:320px;margin-top:28px;gap:44px}.reel-frame{border-radius:0;clip-path:inset(0)}.reel-copy{padding:20px;margin-top:14px}.reel-copy h3{font-size:32px}.reel-duration{right:13px;top:13px;padding:7px 10px;font-size:11px}
  .portfolio{padding-top:38px}.portfolio-toolbar{margin-bottom:26px}.portfolio-toolbar>p{font-size:12px}.project-index{gap:9px 16px;margin-top:16px}.project-index a{display:inline-flex;align-items:center;min-height:34px;font-size:12px;text-underline-offset:4px}
  .project-track,.scroll-scenes .project-track{gap:52px}
  .project-card,.scroll-scenes .project-card,.project-card:nth-child(even){position:relative;top:auto;background:transparent;box-shadow:none;border:0;border-radius:0;padding:0;min-width:0}
  .project-open{border-radius:0}.project-photo{aspect-ratio:3/2;border-radius:0;clip-path:inset(0);isolation:isolate}.project-photo>img{object-fit:cover;object-position:center}
  .project-open-label{bottom:12px;right:12px;padding:8px 12px;gap:13px;font-size:11px;min-height:39px;background:#292d3166;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 1px #ffffff80;border-color:#ffffff60}.project-open-label>span{font-size:19px}
  .project-mini-gallery{gap:8px;margin-top:10px}.project-mini-gallery button{aspect-ratio:4/3;border-radius:0;min-width:0}.project-mini-gallery button:last-child>span{font-size:10px;background:#292d3170}
  .project-summary{margin-top:20px;padding:21px 20px;min-width:0;border-radius:16px}.project-sub{font-size:12px;line-height:1.5;margin-bottom:11px;color:#505b5b}.project-title{font-size:clamp(31px,8.6vw,38px);line-height:1.12;letter-spacing:-.04em;max-width:100%;overflow-wrap:normal;text-wrap:balance}.project-teaser{font-size:15px;line-height:1.7;color:#4d5759;margin-top:15px;max-width:38ch}.project-summary .text-link{font-size:14px;margin-top:14px;min-height:44px;padding:10px 0 8px}
  .project-journey{margin-top:24px;background:transparent}.project-journey li{padding:13px 0;line-height:1.5;font-size:12px}.journey-number{min-width:23px}
  .details-editorial,.scroll-scenes .details-editorial{margin-top:66px}.details-heading h3{font-size:36px}.details-heading p{font-size:14px;line-height:1.65}.details-images{gap:26px}.detail-frame,.detail-photo:nth-child(2) .detail-frame{border-radius:0;clip-path:inset(0)}.detail-photo>span{padding:10px 13px;margin-top:12px;font-size:12px}
  .spatial-story{height:78svh;min-height:490px;max-height:700px}.spatial-image{inset:0}.spatial-image>img{object-position:38% center}.spatial-story>p{left:22px;top:44%;font-size:clamp(52px,14vw,66px);line-height:1.08}.spatial-link{left:22px;right:22px;bottom:26px;min-height:52px;font-size:12px;padding:14px 17px}
  .approach{padding:65px 22px}.approach h2{font-size:46px;line-height:1.08}.approach-heading>p{font-size:14px;line-height:1.7}.approach-details{margin-top:32px}.approach-details article{padding:25px 0;gap:17px}.approach-details h3{font-size:25px}.approach-details p{line-height:1.7}
  .about{gap:30px}.portrait{width:min(100%,300px)}.about-copy h2{font-size:46px}.about-copy>p:not(.about-label){font-size:14px;line-height:1.75}.about-label{font-size:12px;margin-bottom:18px}
  .contact{padding:54px 18px}.contact-panel{padding:38px 19px;border-radius:24px}.contact h2{font-size:clamp(32px,8.6vw,39px)}.contact-panel>p{font-size:14px}.contact-button{min-height:48px;font-size:14px}.contact-links{margin-top:24px}
  dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:14px}.dialog-top{padding:12px 15px}.dialog-inner{padding:0 14px 23px;gap:12px}.gallery-stage{height:46svh;min-height:220px;max-height:430px}.dialog-copy h2{font-size:32px}.gallery-thumbs button{width:62px;height:47px}.gallery-controls .round{width:44px;height:44px}
  .section-canvas{opacity:.72}.styllove-ambient{opacity:.64}.gradient-portfolio{background:radial-gradient(ellipse at 10% 10%,#e5ebdd88,transparent 65%),linear-gradient(135deg,#f8f9f3,#e8eff0)}.gradient-approach .section-canvas{opacity:.86}
  footer{padding:115px 22px 30px;gap:20px}.footer-word{color:#ccd5d5}.motion-toggle{min-height:40px;margin-top:4px}
}
@media(max-width:360px){.topbar{padding:8px 13px}.topbar .brand>span{font-size:21px}.nav-contact{font-size:11px;gap:6px}.hero-intro,.hero-selector{left:18px;right:18px}.hero h1{font-size:40px}.hero-selector .hero-caption{padding:12px}.hero-selector .hero-caption>span:first-child{font-size:12px}.hero-caption-arrow{font-size:19px}.hero-selector-row{gap:6px}.section,.approach{padding-left:18px;padding-right:18px}.project-title{font-size:30px}.project-teaser{font-size:14px}.project-open-label{font-size:10px}}
@media(max-width:700px) and (max-height:500px){.hero{height:620px}.hero-intro{bottom:170px}.spatial-story{height:560px}}
@media(prefers-reduced-motion:reduce){.topbar{transition:none}}

@media(max-width:700px){
  .topbar.over-light{background:linear-gradient(155deg,#ffffff26,#b3b3b317);color:var(--graphite)}
  .topbar:not(.over-light){color:#fff;background:linear-gradient(155deg,#292d314d,#292d3126)}.topbar:not(.over-light) .brand img{filter:brightness(0) invert(1)}
  .project-index a{padding:8px 12px;min-height:36px}.portfolio-toolbar>p{display:inline-block;padding:9px 14px}
  .project-summary .project-title{font-size:clamp(29px,8vw,36px);line-height:1.14}.project-summary .project-teaser{font-size:14px;line-height:1.7}
  .project-card .project-open,.project-card .project-photo,.project-mini-gallery button{transform:none!important}.project-photo>img{transform:none!important}
  .reel-frame,.detail-frame{transform:none!important}.reel-copy>p:last-of-type{max-width:none}
}