/* Layout v2 (2026-10-04): solid header, larger about copy, process flow, project mosaic.
   Loaded last; remove this file's <link> to revert these rules. */

/* 1 · Header matches the page canvas behind it; experience.js updates --header-bg on scroll */
.site-header,.site-header[data-theme="dark"],.site-header[data-theme="light"]{background:var(--header-bg,var(--rumo-canvas));backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--rumo-text);text-shadow:none;transition:none}

/* 3 · About copy reads as a statement, not a footnote */
.about-title{grid-column:1 / span 6}
.about-copy{grid-column:7 / span 6}
.about-copy h3{margin-bottom:28px;font-size:clamp(30px,2.7vw,42px);line-height:1.1}
.about-copy p{margin-bottom:20px;font-size:clamp(17px,1.3vw,20px);line-height:1.6}
@media(max-width:900px) and (min-width:721px){.about-title{grid-column:1 / span 6}.about-copy{grid-column:7 / span 6}}
@media(max-width:720px){.about-copy h3{font-size:28px}.about-copy p{font-size:17px}}

/* 4 · Process as a connected, progressively drawn flow */
.process-flow{position:relative;z-index:2;margin-top:48px;padding:clamp(28px,3vw,44px);border:1px solid var(--rumo-line);border-radius:18px;background:var(--rumo-surface,rgba(255,255,255,.035))}
.process-flow>.micro{margin-bottom:36px;color:var(--rumo-muted)}
.process-flow ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.process-flow li{position:relative;padding:34px 28px 0 0}
.process-flow li:before,.process-flow li:after{content:"";position:absolute;top:6px;left:0;right:0;height:2px}
.process-flow li:before{background:var(--rumo-line)}
.process-flow li:after{background:var(--rumo-accent);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.process-flow li.visible:after{transform:scaleX(1)}
.process-flow .step-dot{position:absolute;z-index:1;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--rumo-accent);box-shadow:0 0 0 5px rgba(224,112,255,.16)}
.process-flow .step-num{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--rumo-accent)}
.process-flow h4{margin:10px 0 10px;font-size:clamp(20px,1.7vw,26px);font-weight:500;line-height:1.15;letter-spacing:-.02em;color:var(--rumo-text)}
.process-flow li p{margin:0;max-width:26ch;font-size:15px;line-height:1.5;color:var(--rumo-muted)}
.process-flow li:nth-child(2),.process-flow li:nth-child(2):after{transition-delay:.15s}
.process-flow li:nth-child(3),.process-flow li:nth-child(3):after{transition-delay:.3s}
.process-flow li:nth-child(4),.process-flow li:nth-child(4):after{transition-delay:.45s}
.process-flow li:last-child:before,.process-flow li:last-child:after{right:28px}
@media(max-width:900px){
  .process-flow ol{grid-template-columns:1fr}
  .process-flow li{padding:0 0 30px 38px}
  .process-flow li:last-child{padding-bottom:0}
  .process-flow li:before,.process-flow li:after,.process-flow li:last-child:before,.process-flow li:last-child:after{top:6px;bottom:-6px;left:6px;right:auto;width:2px;height:auto}
  .process-flow li:after{transform:scaleY(0);transform-origin:top}
  .process-flow li.visible:after{transform:scaleY(1)}
  .process-flow li:last-child:before,.process-flow li:last-child:after{display:none}
  .process-flow li p{max-width:none}
}
@media(prefers-reduced-motion:reduce){.process-flow li:after{transition:none;transform:none}}

/* 5 · Work as a filmstrip: one shared height, every piece at its own proportion */
.work-carousel{position:relative;z-index:2;margin-top:clamp(44px,5.5vw,76px);--work-height:clamp(400px,75vw,600px)}
.project-stage.project-stage-real{display:flex;columns:auto;gap:14px;height:auto;min-height:0;margin-top:0;aspect-ratio:auto;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.project-stage.project-stage-real::-webkit-scrollbar{display:none}
.project-stage.project-stage-real:focus-visible{outline:2px solid var(--rumo-accent);outline-offset:6px}
.project-stage.project-stage-real .case{display:block;flex:0 0 auto;max-width:100%;min-width:0;min-height:0;margin:0;scroll-snap-align:start}
.project-stage.project-stage-real .case-art{position:relative;flex:none;height:var(--work-height);max-width:100%;aspect-ratio:var(--ar,1);overflow:hidden;border-radius:6px;background:#151a33}
.project-stage.project-stage-real .case-art img,.project-stage.project-stage-real .case-art video{display:block;width:100%;height:100%;object-fit:cover}
.project-stage.project-stage-real .case footer{flex:none;padding:14px 2px 0}
/* Dark veil over every piece so the wall sits inside the page's palette */
.project-stage.project-stage-real .case-art:after{content:"";position:absolute;inset:0;background:rgba(8,12,28,.42);pointer-events:none}
/* Arrows: two long hairlines under the strip, no container */
.work-nav{display:flex;justify-content:flex-end;gap:20px;margin-top:18px}
.work-arrow{display:grid;place-items:center;width:72px;height:44px;padding:0;border:0;background:transparent;color:var(--rumo-muted);cursor:pointer;transition:color .3s}
.work-prev svg{transform:scaleX(-1)}
.work-arrow svg{transition:translate .35s cubic-bezier(.22,1,.36,1)}
.work-arrow:hover{color:var(--rumo-accent)}
.work-next:hover svg{translate:6px 0}
.work-prev:hover svg{translate:-6px 0}
.work-arrow:focus-visible{outline:2px solid var(--rumo-accent);outline-offset:2px}
@media(max-width:720px){
  .project-stage.project-stage-real{gap:10px}
  .project-stage.project-stage-real .case footer h3{font-size:14px}
  .work-nav{gap:12px;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.work-arrow,.work-arrow svg{transition:none}}

/* Header and footer wordmark: capitals with a white full stop */
.brand{letter-spacing:.01em}
.brand span{color:var(--rumo-text)}

/* Photos breathe: a very slow zoom in, then back out. Videos stay as they are. */
.project-stage.project-stage-real .case-art img{animation:work-breathe 16s ease-in-out infinite alternate;transition:none;will-change:transform}
.project-stage.project-stage-real .case:nth-child(4) .case-art img{animation-delay:-6s}
.project-stage.project-stage-real .case:nth-child(5) .case-art img{animation-delay:-11s}
.project-stage.project-stage-real .case:hover .case-art img{transform:none}
@keyframes work-breathe{from{transform:scale(1)}to{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.project-stage.project-stage-real .case-art img{animation:none}}