/* ==========================================================
   WEST + EAST STUDIOS — shared styles
   index.html + about.html + coming-soon.html
   ----------------------------------------------------------
   Fonts: IvyOra (Adobe Typekit kit hue2due) for headers,
          IBM Plex Sans for body.
   Layout is derived from the homepage logo's real dimensions
   (1081 × 217, text baseline at 91.7% of image height) so the
   MENU baseline and content tops align with the wordmark.
   ========================================================== */

:root{
  --bg:#000000;
  --ink:#ffffff;
  --body:#d6d6d6;
  --muted:#9a9a9a;
  --line:#ffffff;
  --line-dim:#2e2e2e;
  --red:#ff2d2d;
  --radius:26px;
  --rail-w:40vw;

  /* Logo geometry — drives alignment across the page */
  --logo-w:clamp(360px, 30vw, 560px);
  --logo-h:calc(var(--logo-w) * 0.2007);           /* image aspect ratio  */
  --logo-baseline:calc(40px + var(--logo-h) * 0.917); /* wordmark baseline  */
  --logo-inset:calc(var(--logo-w) * 0.0157);          /* left edge of the W  */
  --type-left:calc(48px + var(--logo-inset));         /* aligns type to logo text */
  --content-top:calc(40px + var(--logo-h) + 36px);    /* space below header */
  --topbar-h:60px;                                    /* mobile slim header */

  --font-head:'Bricolage Grotesque', -apple-system, sans-serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
html, body{ overflow-x:clip; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

/* ---------- Fixed rail (left) ---------- */
.rail{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--rail-w);
  padding:40px 48px;
  z-index:10;
  pointer-events:none;
}
.rail > *{ pointer-events:auto; }

.logo{ display:inline-block; width:var(--logo-w); }
.logo img{ width:100%; height:auto; }

/* ---------- Mobile top bar — small wordmark left, hamburger right ---------- */
.topbar{
  display:none;
  position:fixed;
  top:0; left:0; right:0;
  height:var(--topbar-h);
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:var(--bg);
  border-bottom:1px solid var(--line-dim);
  z-index:90;
}
.topbar .logo{ width:auto; }
.topbar .logo img{ width:auto; height:24px; display:block; }

/* Project index — top aligns with the first project image */
.pindex{
  list-style:none;
  position:absolute;
  top:calc(var(--content-top) - 4px); /* -4px optical nudge to cap height */
  left:48px;
  display:grid;
  grid-template-columns:repeat(2, max-content);
  column-gap:64px;
  row-gap:12px;
}
.pindex li{ line-height:1.2; }
.pindex a{
  display:flex;
  align-items:baseline;
  gap:10px;
  transition:opacity .18s ease;
}
.pindex a:hover{ opacity:.55; }
.pindex .num{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.04em;
}
.pindex .name{
  font-family:var(--font-head);
  font-size:18px;
  font-weight:500;
  letter-spacing:.03em;
}

/* Contact block pinned to rail bottom */
.railfoot{
  position:absolute;
  bottom:44px;
  left:48px;
}
.social{ display:flex; gap:16px; margin-bottom:26px; }
.social a{ display:inline-flex; transition:opacity .18s ease; }
.social a:hover{ opacity:.55; }
.social svg{ width:22px; height:22px; }

.contact p{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:10px;
}
.contact .label{
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--body);
}
.contact .value{
  font-size:18px;
  font-weight:500;
  letter-spacing:.02em;
}
.contact a.value{ transition:opacity .18s ease; }
.contact a.value:hover{ opacity:.55; }

.copyright{
  margin-top:26px;
  font-size:12px;
  color:var(--body);
  letter-spacing:.02em;
}

/* ---------- MENU trigger — baseline-aligned to the logo ---------- */
.menu-btn-desk{
  position:fixed;
  top:40px;
  right:48px;
  height:var(--logo-h);
  display:flex;
  align-items:flex-end;
  z-index:20;
  font-family:var(--font-head);
  font-size:clamp(34px, 2.6vw, 42px);
  font-weight:700;
  letter-spacing:.05em;
  transition:opacity .18s ease;
}
.menu-btn-desk:hover{ opacity:.55; }
.menu-btn-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  transition:opacity .18s ease;
}
.menu-btn-bar:hover{ opacity:.55; }
.menu-btn-bar svg{
  width:26px;
  height:26px;
  stroke:#ffffff;
  stroke-width:2.2;
  stroke-linecap:round;
  fill:none;
}

/* ---------- Home content column ---------- */
.content{
  margin-left:var(--rail-w);
  padding:var(--content-top) 4vw 140px 0;
}

.project{
  display:grid;
  grid-template-columns:64px 1fr;
  column-gap:16px;
  margin-bottom:150px;
  scroll-margin-top:60px;
}
.project:last-child{ margin-bottom:0; }

.vtitle{
  text-transform:uppercase;
  grid-row:1;
  grid-column:1;
  align-self:end;      /* bottom-aligned with the project image */
  justify-self:center;
  writing-mode:vertical-rl;
  font-family:var(--font-head);
  font-size:clamp(54px, 4.3vw, 76px);
  font-weight:600;
  letter-spacing:.1em;
  white-space:nowrap;
}

.frame-link{
  grid-row:1;
  grid-column:2;
  display:block;
  height:100%;
}
.frame-link img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
  background:#111;
}

.pbody{
  grid-column:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-top:30px;
}
.role{
  width:min(560px, 100%);
  font-family:var(--font-head);
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:10px;
}
.pbody p{
  width:min(560px, 100%);
  font-size:15px;
  line-height:1.55;
  color:var(--body);
}

/* Link group: each rule is exactly the text's length, text left-aligned,
   the group right-aligned to the image edge */
.plinks{
  width:min(560px, 100%);
  display:flex;
  justify-content:flex-end;
  gap:44px;
  margin-top:30px;
}
.plinks a{
  display:inline-block;
  border-top:1px solid var(--line);
  padding:12px 0 0;
  text-align:left;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  transition:opacity .18s ease;
}
.plinks a:hover{ opacity:.55; }

/* Scroll fade-in. First project stays static (no .reveal). */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1.6s ease, transform 1.6s ease;
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* ---------- Menu overlay ---------- */
.overlay{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:100;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.overlay.open{
  opacity:1;
  visibility:visible;
  transition:opacity .3s ease;
}

.ov-top{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 48px 0;
  position:relative;
}
.monogram-img{
  width:130px;
  height:auto;
}
.close-btn{
  position:absolute;
  top:26px; right:44px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .18s ease;
}
.close-btn:hover{ opacity:.55; }
.close-btn svg{
  width:26px;
  height:26px;
  stroke:#ffffff;
  stroke-width:2.2;
  stroke-linecap:round;
  fill:none;
}

.ov-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  padding:11vh 8vw 12vh;
}

.ov-nav ul{ list-style:none; }
.ov-nav li{ margin-bottom:30px; }
.ov-nav a{
  font-family:var(--font-head);
  font-size:26px;
  font-weight:500;
  letter-spacing:.01em;
  transition:opacity .18s ease;
}
.ov-nav a:hover{ opacity:.55; }
.ov-nav a.current{ color:var(--red); }
.ov-nav .social{ margin-top:64px; margin-bottom:0; }

.ov-form h2{
  font-family:var(--font-head);
  font-size:26px;
  font-weight:600;
  letter-spacing:.01em;
  margin-bottom:40px;
}
.field{ margin-bottom:30px; }
.field label{
  display:block;
  font-size:13px;
  color:#cfcfcf;
  margin-bottom:4px;
  letter-spacing:.02em;
}
.field input,
.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--ink);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  padding:10px 0;
  border-radius:0;
  resize:vertical;
}
.field textarea{ min-height:72px; }
.name-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.submit{
  background:var(--ink);
  color:#000;
  border-radius:999px;
  padding:13px 34px;
  font-size:15px;
  font-weight:600;
  margin-top:6px;
  transition:opacity .18s ease;
}
.submit:hover{ opacity:.8; }

/* ---------- Coming Soon page ---------- */
.soon-wrap{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  pointer-events:none;
}
.soon-text{
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(30px, 3.2vw, 46px);
  letter-spacing:.02em;
  color:#e9e9e9;
  animation:soonIn 1.8s ease both;
}
@keyframes soonIn{
  from{ opacity:0; filter:blur(16px); }
  to{ opacity:1; filter:blur(0); }
}

/* ---------- About page ---------- */
.about-main{
  margin-left:var(--rail-w);
  padding:24vh 6vw 20vh 0;
  max-width:calc(var(--rail-w) + 720px);
}
.about-name{
  font-family:var(--font-head);
  font-size:clamp(30px, 3vw, 42px);
  font-weight:700;
  letter-spacing:.01em;
}
.about-role{
  font-family:var(--font-head);
  font-size:17px;
  font-weight:700;
  margin:96px 0 14px;
}
.about-text p{
  font-size:15px;
  line-height:1.75;
  color:var(--body);
  margin-bottom:22px;
}
.about-text p:last-child{ margin-bottom:0; }

.portrait{
  position:fixed;
  left:48px;
  top:50%;
  transform:translateY(-50%);
  width:min(30vw, 460px);
  z-index:5;
}
.portrait img{
  width:100%;
  border-radius:var(--radius);
}

/* Stacked footer shown only on small layouts */
.mobile-foot{ display:none; }

/* ==========================================================
   About: portrait moves inline and aligns with the name
   ========================================================== */
@media (max-width:1399px){
  .portrait{
    position:static;
    transform:none;
    width:100%;
  }
  .about-main{
    margin-left:0;
    max-width:none;
    padding:20vh 6vw 14vh;
    display:grid;
    grid-template-columns:minmax(260px, 440px) 1fr;
    gap:64px;
    align-items:start;
  }
  .about-body{ max-width:640px; }
}

/* ==========================================================
   Stacked layout
   ========================================================== */
@media (max-width:1099px){
  :root{ --type-left:24px; }
  .topbar{ display:flex; }
  .rail .logo{ display:none; }
  .menu-btn-desk{ display:none; }
  .rail{
    position:static;
    width:100%;
    padding:32px 24px 0;
  }
  .pindex{
    position:static;
    margin-top:36px;
  }
  .railfoot{ display:none; }

  .content{
    margin-left:0;
    padding:40px 24px 96px;
  }

  .project{
    grid-template-columns:1fr;
    margin-bottom:56px;
  }
  .vtitle{
    grid-row:auto;
    grid-column:1;
    writing-mode:horizontal-tb;
    justify-self:start;
    align-self:auto;
    margin-bottom:18px;
    white-space:normal;
    font-size:clamp(42px, 11vw, 64px);
    line-height:1.02;
  }
  .frame-link{
    grid-row:auto;
    grid-column:1;
    height:auto;
  }
  .frame-link img{ height:auto; }
  .pbody{
    grid-column:1;
    margin-top:24px;
  }

  .about-main{
    grid-template-columns:1fr;
    gap:48px;
    padding:64px 24px 80px;
  }
  .about-role{ margin-top:48px; }

  .mobile-foot{
    display:block;
    padding:56px 24px 64px;
    border-top:1px solid var(--line-dim);
  }

  .soon-wrap{
    position:static;
    min-height:52vh;
    pointer-events:auto;
  }

  .ov-grid{
    grid-template-columns:1fr;
    gap:72px;
    padding:10vh 24px 12vh;
  }
  .ov-top{ padding:36px 24px 0; }
  .close-btn{ top:20px; right:14px; }
  .monogram-img{ width:104px; }
}

@media (max-width:560px){
  .pindex{
    grid-template-columns:1fr 1fr;
    column-gap:24px;
  }
  .pindex .name{ font-size:15px; }
  .name-row{ grid-template-columns:1fr; gap:0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .soon-text{ animation:none; }
}


/* ==========================================================
   OAKLEY project page
   ========================================================== */
.op-hero{
  padding-top:calc(40px + var(--logo-h) + 24px);
}
.op-hero img{
  width:100%;
  height:calc(100vh - 40px - var(--logo-h) - 24px);
  object-fit:cover;
}

.op-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:48px;
  padding:64px 48px 40px var(--type-left);
}
.op-title{
  font-family:var(--font-head);
  font-size:clamp(56px, 4.8vw, 84px);
  font-weight:600;
  letter-spacing:.02em;
}
.op-desc{ width:min(600px, 46%); }
.op-desc .role{ width:100%; margin-bottom:12px; }
.op-desc p{
  font-size:15px;
  line-height:1.55;
  color:var(--body);
  margin-bottom:18px;
}
.op-desc p:last-child{ margin-bottom:0; }

.op-gallery{ position:relative; }
.hslider{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.hslider::-webkit-scrollbar{ display:none; }
.hslider img{
  height:min(72vh, 700px);
  width:auto;
  max-width:none;   /* fixed-height slides keep their true ratio */
  flex:0 0 auto;
}

.slide-btn{
  position:absolute;
  right:28px;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  background:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:6;
  transition:opacity .18s ease, transform .18s ease;
}
.slide-btn:hover{ transform:translateY(-50%) scale(1.06); }
.slide-btn svg{ width:20px; height:20px; stroke:#000; }
.slide-btn.prev{ left:28px; right:auto; }
.slide-btn[data-hidden]{ opacity:0; pointer-events:none; }

.op-posters{ padding-top:28px; padding-bottom:240px; }
.op-posters.mid{ padding-bottom:8px; }
.op-sub{
  font-family:var(--font-head);
  font-size:clamp(24px, 2vw, 34px);
  font-weight:600;
  letter-spacing:.02em;
  padding:0 24px 22px var(--type-left);
}
.pos-wrap{ position:relative; }
.pgrid{
  display:grid;
  grid-auto-flow:column dense;
  grid-auto-columns:minmax(240px, 22vw);
  grid-template-rows:repeat(2, minmax(220px, 38vh));
  gap:8px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.pgrid::-webkit-scrollbar{ display:none; }
.pgrid img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.pgrid img.tall{ grid-row:span 2; }
.pgrid img.wide{ grid-column:span 2; }
.pgrid img.big{ grid-column:span 2; grid-row:span 2; }

@media (max-width:1099px){
  .op-hero{ padding-top:calc(var(--topbar-h) + 16px); }
  .op-hero img{ height:60vh; }
  .op-intro{
    flex-direction:column;
    gap:28px;
    padding:48px 24px 48px var(--type-left);
  }
  .op-posters{ padding-top:36px; padding-bottom:72px; }
  .op-desc{ width:100%; }
  .hslider img{ height:52vh; }
  .pgrid{
    grid-auto-columns:minmax(180px, 44vw);
    grid-template-rows:repeat(2, minmax(160px, 28vh));
  }
  .slide-btn{ right:16px; width:46px; height:46px; }
  .slide-btn.prev{ left:12px; }
  .cgrid{ height:56vh; }
}


/* ==========================================================
   Lightbox — fullscreen image viewer
   ========================================================== */
[data-lightbox] img{ cursor:pointer; }

.lightbox{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox > img{
  max-width:74vw;
  max-height:82vh;
  object-fit:contain;
}
.lb-btn{
  position:absolute;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  display:flex;
  transition:opacity .18s ease;
}
.lb-btn:hover{ opacity:.5; }
.lb-btn svg{ width:26px; height:26px; stroke:#111; fill:none; }
.lb-close{ top:32px; right:40px; }
.lb-expand{ top:32px; left:40px; }
.lb-prev{ left:28px; top:50%; transform:translateY(-50%); }
.lb-next{ right:28px; top:50%; transform:translateY(-50%); }

@media (max-width:700px){
  .lightbox > img{ max-width:92vw; max-height:72vh; }
  .lb-close{ top:20px; right:20px; }
  .lb-expand{ top:20px; left:20px; }
  .lb-prev{ left:8px; }
  .lb-next{ right:8px; }
}

/* ==========================================================
   Moments page
   ========================================================== */
.mo-gallery{
  position:relative;
  padding-top:calc(40px + var(--logo-h) + 24px);
  padding-bottom:150px;
}
@media (max-width:1099px){
  .mo-gallery{
    padding-top:calc(var(--topbar-h) + 24px);
    padding-bottom:72px;
  }
}


/* ==========================================================
   Collage gallery — scaled, never cropped
   Columns of natural-aspect images at varied widths,
   packed by script into a horizontal scrolling band.
   ========================================================== */
.cgrid{
  display:flex;
  gap:8px;
  align-items:flex-start;
  height:min(72vh, 720px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.cgrid::-webkit-scrollbar{ display:none; }
.cgrid .col{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
}
.cgrid img{
  width:100%;
  height:auto;
  display:block;
}
.cgrid.even{
  flex-direction:column;
  align-items:stretch;
}
.cgrid.even .row{
  display:flex;
  gap:8px;
  height:calc((100% - 8px) / 2);
  width:max-content;
}
.cgrid.even .row img{
  height:100%;
  width:auto;
}


/* ==========================================================
   I'M project page
   ========================================================== */
.im-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:8px 0;
}
.im-row .cell{
  position:relative;
  height:min(80vh, 780px);
}
.im-row img,
.im-row video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
  background:#111;
}

.im-video{
  position:relative;
  padding:8px 0;
}
.im-video video{
  width:100%;
  height:auto;
  display:block;
}

.mute-btn{
  position:absolute;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  transition:transform .18s ease;
}
.mute-btn:hover{ transform:scale(1.06); }
.mute-btn svg{ width:20px; height:20px; stroke:#000; fill:none; }
.mute-btn .icon-off{ display:none; }
.mute-btn.muted .icon-on{ display:none; }
.mute-btn.muted .icon-off{ display:block; }

.im-posters{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  padding:8px 0;
}
.im-posters img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width:1399px){
  .im-posters{ grid-template-columns:repeat(2, 1fr); }
}

/* ----- Mosaic galleries — tiles at varying scales, hand-placed ----- */
.mosaic{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:8px;
  padding:8px 0;
}
.mosaic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* I'M book / editorial photos — 12 × 14 canvas, near-native 3:2 tiles */
.book-mosaic{
  grid-template-rows:repeat(14, 1fr);
  aspect-ratio:12 / 9;
}
.book-mosaic img:nth-child(1){  grid-area:1 / 1 / 6 / 6; }   /* large */
.book-mosaic img:nth-child(2){  grid-area:1 / 6 / 6 / 10; }
.book-mosaic img:nth-child(3){  grid-area:1 / 10 / 4 / 13; }
.book-mosaic img:nth-child(4){  grid-area:4 / 10 / 6 / 13; } /* small */
.book-mosaic img:nth-child(5){  grid-area:6 / 1 / 11 / 5; }
.book-mosaic img:nth-child(6){  grid-area:6 / 5 / 11 / 10; } /* large */
.book-mosaic img:nth-child(7){  grid-area:6 / 10 / 9 / 13; }
.book-mosaic img:nth-child(8){  grid-area:9 / 10 / 11 / 13; }
.book-mosaic img:nth-child(9){  grid-area:11 / 1 / 15 / 5; }
.book-mosaic img:nth-child(10){ grid-area:11 / 5 / 13 / 7; } /* small */
.book-mosaic img:nth-child(11){ grid-area:13 / 5 / 15 / 7; }
.book-mosaic img:nth-child(12){ grid-area:11 / 7 / 13 / 10; }
.book-mosaic img:nth-child(13){ grid-area:13 / 7 / 15 / 10; }
.book-mosaic img:nth-child(14){ grid-area:11 / 10 / 15 / 13; }

/* Hole19 posters / Matrix automata — 12 × 11 canvas, landscape rhythm */
.h19-mosaic,
.mx-mosaic{
  grid-template-rows:repeat(11, 1fr);
  aspect-ratio:12 / 8;
}
.h19-mosaic img:nth-child(1),  .mx-mosaic img:nth-child(1){ grid-area:1 / 1 / 5 / 6; }  /* large */
.h19-mosaic img:nth-child(2),  .mx-mosaic img:nth-child(2){ grid-area:1 / 6 / 5 / 10; }
.h19-mosaic img:nth-child(3),  .mx-mosaic img:nth-child(3){ grid-area:1 / 10 / 4 / 13; }
.h19-mosaic img:nth-child(4),  .mx-mosaic img:nth-child(4){ grid-area:4 / 10 / 6 / 13; }/* small */
.h19-mosaic img:nth-child(5),  .mx-mosaic img:nth-child(5){ grid-area:5 / 1 / 8 / 5; }
.h19-mosaic img:nth-child(6),  .mx-mosaic img:nth-child(6){ grid-area:5 / 5 / 9 / 10; } /* large */
.h19-mosaic img:nth-child(7),  .mx-mosaic img:nth-child(7){ grid-area:6 / 10 / 9 / 13; }
.h19-mosaic img:nth-child(8),  .mx-mosaic img:nth-child(8){ grid-area:8 / 1 / 12 / 5; }
.h19-mosaic img:nth-child(9),  .mx-mosaic img:nth-child(9){ grid-area:9 / 5 / 12 / 13; }/* wide strip */

/* Side-by-side pair — full images, scale change only, no crop */
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:8px 0;
}
.duo img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width:699px){
  .duo{ grid-template-columns:1fr; }
}

@media (max-width:699px){
  .mosaic{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:none;
    aspect-ratio:auto;
  }
  .mosaic img{ height:auto; grid-area:auto !important; }
}

@media (max-width:1099px){
  .im-row{ grid-template-columns:1fr; }
  .im-row .cell{ height:52vh; }
  .mute-btn{ right:16px; bottom:16px; width:42px; height:42px; }
}

/* ==========================================================
   Exploration page
   ========================================================== */
.xslider{
  grid-column:2;
  position:relative;
  margin-top:8px;
}
.xslider .hslider img{
  height:min(56vh, 560px);
}
/* Vertical sources cropped to match the horizontal rhythm */
.xslider .hslider img.crop{
  aspect-ratio:16 / 9;
  width:auto;
  object-fit:cover;
}
.frame-video{
  position:relative;
}
.frame-link video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
  background:#111;
  display:block;
}
@media (max-width:1099px){
  .xslider{ grid-column:1; }
  .xslider .hslider img{ height:min(42vh, 420px); }
}

/* About: cap the text measure so long paragraphs stay readable */
.about-body{ max-width:660px; }

/* Exploration layout: hero row is its own grid; the vertical title
   hangs off the frame's bottom-left without stretching the row */
.explore .project{ display:block; }
.xhead{
  position:relative;
  display:grid;
  grid-template-columns:170px 1fr;
  column-gap:16px;
}
.xhead .vtitle{
  position:absolute;
  left:0;
  bottom:0;
  width:170px;
  display:flex;
  justify-content:center;
  white-space:nowrap;
  line-height:1.06;
  font-size:clamp(38px, 2.9vw, 58px);
}
.xhead .frame-link{
  grid-column:2;
  height:auto;
}
/* Full frame, true scale — never cropped */
.xhead .frame-link img,
.xhead .frame-link video{
  width:100%;
  height:auto;
  object-fit:fill;
}
.frame-video{ aspect-ratio:16 / 9; }

/* Exploration sliders: full-bleed like the brand strategy galleries */
.explore .xslider{
  margin-left:calc(-1 * var(--rail-w));
  width:calc(var(--rail-w) + 100% + 4vw);
}
.explore .xslider .hslider img{
  height:min(34vh, 340px);
}
@media (max-width:1099px){
  .explore .project{ display:block; }
  .xhead{ grid-template-columns:1fr; }
  .xhead .vtitle{
    position:static;
    width:auto;
    display:block;
    white-space:normal;
    writing-mode:horizontal-tb;
    margin-bottom:18px;
  }
  .xhead .vtitle br{ display:none; }
  .xhead .frame-link{ grid-column:1; }
  .explore .xslider{
    margin-left:-24px;
    width:calc(100% + 48px);
  }
  .explore .xslider .hslider img{ height:min(30vh, 300px); }
}

/* ==========================================================
   Flow mosaic — vertical, repeating varied-scale bands.
   Tiles are placed by script (mosaicFlow) on a 12-column grid;
   the page scrolls down through the collage.
   ========================================================== */
.flow-wrap{ container-type:inline-size; }
.flow-mosaic{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:calc((100cqw - 88px) / 16.5); /* cell width / 1.375 */
  gap:8px;
  padding:8px 0;
}
.flow-mosaic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:699px){
  .flow-mosaic{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; }
  .flow-mosaic img{ height:auto; grid-area:auto !important; }
}


/* ---------- Back to top ---------- */
.to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:80;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}
.to-top.show{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.to-top:hover{ transform:scale(1.06); }
.to-top svg{
  width:20px;
  height:20px;
  stroke:#000;
  stroke-width:2.4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}