/* THE CITY IN MOTION — a second room in the same house.
   Loaded after style.css: reuses its tokens, type, reveal, topbar, hero base, footer and sound toggle. Adds only. */

/* HERO — same anatomy as the landing hero, entered more slowly. */
.exp-hero .hero-image{object-position:50% 34%;transform-origin:50% 58%;animation:exp-settle 3.6s cubic-bezier(.16,.84,.26,1) both}
.exp-hero .hero-shade{background:linear-gradient(180deg,rgba(10,12,15,.24) 0%,rgba(10,12,15,0) 36%,rgba(10,12,15,.66) 100%)}
.exp-hero .hero-copy{bottom:8.5vh}
.exp-hero .hero-kicker{animation:exp-rise 1.6s .5s cubic-bezier(.16,.84,.26,1) both}
.exp-hero h1{font-size:clamp(3.4rem,8.6vw,8.2rem);animation:exp-rise 1.7s .7s cubic-bezier(.16,.84,.26,1) both}
.exp-hero .scroll-note{animation:exp-fade 1.6s 1.8s ease both}
.exp-hero .brand-line{color:#fff}
@keyframes exp-settle{from{transform:scale(1.08)}to{transform:none}}
@keyframes exp-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes exp-fade{from{opacity:0}to{opacity:.66}}
@media (prefers-reduced-motion:reduce){
  .exp-hero .hero-image,.exp-hero .hero-kicker,.exp-hero h1,.exp-hero .scroll-note{animation:none}
}

/* Align the hero with the same left edge as the content grid. */
.exp-hero .topbar,.exp-hero .hero-copy{left:max(var(--edge),calc((100% - var(--max)) / 2));right:max(var(--edge),calc((100% - var(--max)) / 2))}
.exp-hero .scroll-note{right:max(var(--edge),calc((100% - var(--max)) / 2))}

/* SHARED — a magazine grid.
   One reading spine (columns 4–9): each display sentence sits directly above its paragraph, on the same left edge.
   Two spreads (photograph + words) mirror each other: photo left / text right, then text left / photo right.
   Full-bleed looks and one container-width look punctuate the reading. Nothing floats. */
.exp{--gap-y:clamp(3.6rem,9vh,6.5rem);--edge-x:var(--edge);background:var(--paper);overflow-x:clip}
.exp strong{font-weight:inherit}
.exp-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw}
.exp-section{padding:var(--gap-y) var(--edge)}
.exp-section--open{padding-top:clamp(4.5rem,12vh,8rem)}
.exp-section--tight-top{padding-top:0}

/* The spine */
.exp-say{grid-column:4 / span 8;font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:0 0 clamp(1.3rem,3vh,2rem);text-wrap:balance}
.exp-say--lead{grid-column:4 / span 9;font-size:clamp(2.3rem,4.5vw,4.3rem);line-height:1.02;letter-spacing:-.026em;margin-bottom:clamp(1.8rem,4.5vh,3rem)}
.exp-say--after{margin:clamp(3rem,8vh,5rem) 0 0}
.exp-text{grid-column:4 / span 6;font-size:clamp(1.05rem,.42vw + .95rem,1.2rem);line-height:1.8;color:var(--soft);margin:0;text-wrap:pretty}

/* Spreads */
.exp-spread{align-items:center}
.exp-media{margin:0;overflow:hidden;aspect-ratio:5/6;max-height:76svh;width:100%}
.exp-media img{width:100%;height:100%;object-fit:cover}
.exp-media--usbank img{object-position:50% 0%}
.exp-spread .exp-media{grid-column:1 / span 5;grid-row:1}
.exp-spread-text{grid-column:7 / span 6;grid-row:1;max-width:34rem}
/* Closing spread: words left (cols 1–7), photograph right (cols 8–12), same height. */
.exp-spread--close{align-items:stretch}
.exp-spread--close .exp-media{grid-column:8 / span 5;grid-row:1;max-height:none;height:100%;min-height:0}
.exp-close-stack{grid-column:1 / span 7;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(2rem,5vh,3.4rem);padding-right:2vw}
.exp-close-stack .exp-say{grid-column:auto;margin:0;color:var(--soft);font-size:clamp(2rem,3.5vw,3.3rem)}
.exp-close-stack .exp-say strong{color:var(--ink)}
.exp-line{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.22;letter-spacing:-.015em;color:var(--faint);margin:0}
.exp-line--ink{color:var(--ink)}
.exp-final{font-family:var(--serif);font-weight:500;font-size:clamp(3.2rem,6.2vw,5.6rem);line-height:.92;letter-spacing:-.03em;color:var(--ink);margin:0 0 clamp(1.6rem,4vh,2.6rem)}
.exp-back{display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid var(--soft);padding:0 0 8px;font-size:.7rem;letter-spacing:.14em;font-weight:600;color:var(--soft);transition:opacity .2s ease}
.exp-back:hover{opacity:.55}
.exp-back .arrow{line-height:0}
.exp-section--close{padding-top:clamp(2rem,5vh,4rem);padding-bottom:clamp(3.5rem,9vh,6rem)}

/* FULL-BLEED — the long looks, kept under one screen on a laptop. */
.exp-full{position:relative;margin:0;width:100%;overflow:hidden;background:#15171b;aspect-ratio:2.1/1;max-height:74svh}
.exp-full img,.exp-quote>img{position:absolute;left:0;top:-3%;width:100%;height:106%;object-fit:cover;will-change:transform}
.exp-full--bridge img{object-position:50% 30%}
.exp-full--dusk img{object-position:50% 42%}
.exp-section--after-full{padding-top:var(--gap-y)}

/* Container-width look: same edges as the text grid. */
.exp-section--figure{padding-top:0;padding-bottom:0}
.exp-section--figure + .exp-section{padding-top:clamp(4rem,10vh,7rem)}
.exp-inset{margin:0 auto;max-width:var(--max);overflow:hidden;aspect-ratio:2/1;max-height:68svh}
.exp-inset img{width:100%;height:100%;object-fit:cover;object-position:50% 54%}

/* THE CRACK — the one dark room. Its words share the grid's left edge. */
.exp-quote{position:relative;margin:0;width:100%;min-height:80svh;overflow:hidden;background:#0b1024;color:#fff;display:flex;align-items:center}
.exp-quote>img{object-position:62% 50%}
.exp-quote-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,22,.74) 0%,rgba(6,9,22,.4) 46%,rgba(6,9,22,0) 78%),linear-gradient(180deg,rgba(6,9,22,.25) 0%,rgba(6,9,22,0) 40%,rgba(6,9,22,.35) 100%)}
.exp-quote-copy{position:relative;z-index:2;margin:0 auto;padding:10vh var(--edge);max-width:calc(var(--max) + 2 * var(--edge));width:100%}
.exp-quote-lead{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.3;color:rgba(255,255,255,.78);margin-bottom:1.4rem;max-width:26rem;text-wrap:balance}
.exp-quote-copy strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,4.8vw,4.5rem);line-height:1.02;letter-spacing:-.025em;max-width:18ch;text-wrap:balance;text-shadow:0 1px 24px rgba(6,9,22,.35)}

/* Reveals: display first, then the words, then the photograph. */
.exp .reveal{transition-duration:1.2s}
.exp .exp-say + .exp-text.reveal,.exp .exp-spread .exp-media.reveal,.exp-close-lines .exp-line + .exp-line{transition-delay:.16s}
.exp-full.reveal,.exp-quote.reveal{transform:none}

/* TABLET / MOBILE — one column, same reading order. */
@media (max-width:859px){
  .exp{--gap-y:clamp(3rem,7vh,4.5rem)}
  .exp-section--open{padding-top:4.5rem}
  .exp-say,.exp-say--lead,.exp-text,.exp-spread-text{grid-column:1 / -1}
  .exp-spread .exp-media,.exp-spread--close .exp-media{grid-column:1 / -1;grid-row:auto;max-width:30rem;max-height:none;height:auto;aspect-ratio:5/6}
  .exp-spread-text{grid-row:auto;margin-top:1.8rem}
  .exp-spread{row-gap:0}
  .exp-spread--close .exp-close-stack{grid-column:1 / -1;grid-row:auto;padding-right:0;gap:2.4rem}
  .exp-spread--close .exp-media{order:-1;margin:0 0 2.6rem;grid-row:auto}
  .exp-full,.exp-full--dusk{aspect-ratio:4/5;max-height:none}
  .exp-full--bridge img{object-position:50% 50%}
  .exp-full--dusk img{object-position:46% 50%}
  .exp-inset{aspect-ratio:4/5;max-height:none;max-width:none;margin-left:calc(-1 * var(--edge));margin-right:calc(-1 * var(--edge))}
  .exp-inset img{object-position:46% 56%}
  .exp-section--figure{padding-left:var(--edge);padding-right:var(--edge)}
  .exp-quote{min-height:92svh;align-items:flex-end}
  .exp-quote>img{object-position:74% 50%}
  .exp-quote-shade{background:linear-gradient(180deg,rgba(6,9,22,.55) 0%,rgba(6,9,22,.1) 45%,rgba(6,9,22,.75) 100%)}
  .exp-quote-copy{padding-top:9vh;padding-bottom:9vh}
}
@media (max-width:859px) and (orientation:landscape){
  /* Keep the skyline readable on landscape phones without changing the portrait layout. */
  .exp-media--usbank img{object-position:50% 12%}
  .exp-full--dusk img{object-position:46% 50%}
}
@media (max-width:640px){
  .exp-hero h1{font-size:clamp(3.2rem,16vw,5.2rem)}
  .exp-hero .hero-copy{bottom:8vh}
  .exp-text{font-size:1.02rem;line-height:1.75}
  .exp-say{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .exp-say--lead{font-size:clamp(2.35rem,11vw,3.3rem)}
  .exp-close-stack .exp-say{font-size:clamp(1.95rem,8.6vw,2.6rem)}
  .exp-quote-copy strong{font-size:clamp(2.2rem,10.5vw,3.2rem)}
  .exp-final{font-size:clamp(3.2rem,17vw,5rem)}
}