@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --paper:#f2efe8;
  --ink:#10100f;
  --muted:#777168;
  --rule:rgba(16,16,15,.17);
  --dark:#0b0b0a;
  --light:#f2efe8;
  --accent:#b7aa98;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --gutter:clamp(18px,2.6vw,44px);
  --max:1760px;
  --ease:cubic-bezier(.2,.7,.15,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
body.dark{background:var(--dark);color:var(--light)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
::selection{background:var(--ink);color:var(--paper)}
body.dark ::selection{background:var(--light);color:var(--dark)}

.page-shell{width:min(calc(100vw - (2 * var(--gutter))),var(--max));margin:0 auto}
.micro{font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.muted{color:var(--muted)}
body.dark .muted{color:rgba(242,239,232,.5)}

/* top chrome */
.site-header{
  position:fixed;left:0;right:0;top:0;z-index:80;
  height:72px;display:flex;align-items:center;
  pointer-events:none;
}
.site-header .inner{
  width:min(calc(100vw - (2 * var(--gutter))),var(--max));
  margin:0 auto;display:flex;justify-content:space-between;align-items:center;
}
.site-header a{pointer-events:auto}
.brand{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.nav{display:flex;gap:26px}
.nav a{
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.46;
  transition:opacity .25s ease;
}
.nav a:hover,.nav a.active{opacity:1}
.header-backdrop{
  position:absolute;inset:0;background:rgba(242,239,232,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
  opacity:0;transition:opacity .3s ease;z-index:-1;
}
body.dark .header-backdrop{background:rgba(11,11,10,.9);border-color:rgba(255,255,255,.13)}
.site-header.scrolled .header-backdrop{opacity:1}

/* reveal / page entrance */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.page-curtain{
  position:fixed;inset:0;background:var(--ink);z-index:200;
  transform-origin:top;animation:curtain .7s .08s var(--ease) forwards;
  pointer-events:none;
}
body.dark .page-curtain{background:var(--paper)}
@keyframes curtain{to{transform:scaleY(0)}}

/* HOME */
.home{
  min-height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  align-items:center;
  gap:0;
  padding:100px var(--gutter) 34px;
}
.home-left{
  position:relative;z-index:2;
  padding-left:max(0px,calc((100vw - var(--max))/2));
}
.home-kicker{margin-bottom:22px}
.home-name{
  font-family:var(--serif);font-weight:400;line-height:.78;letter-spacing:-.055em;
  font-size:clamp(80px,10.3vw,196px);margin:0;
}
.home-name span{display:block}
.home-name .second{margin-left:clamp(28px,5vw,88px)}
.home-dek{
  width:min(480px,80%);margin:36px 0 0 clamp(28px,5vw,88px);
  font-family:var(--serif);font-size:clamp(20px,2vw,32px);line-height:1.15;
}
.home-right{
  position:relative;align-self:stretch;
  display:flex;align-items:center;justify-content:flex-end;
}
.home-right::before{
  content:"";position:absolute;left:-7vw;top:7%;bottom:7%;width:1px;background:var(--rule)
}
.home-image{
  width:min(79%,680px);
  margin-right:max(0px,calc((100vw - var(--max))/2));
  position:relative;
}
.home-image img{width:100%;height:auto}
.home-image .image-index{
  position:absolute;right:0;bottom:-24px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.home-nav{
  position:absolute;left:var(--gutter);bottom:31px;z-index:4;
  display:flex;gap:30px;align-items:center;
  padding-left:max(0px,calc((100vw - var(--max))/2));
}
.home-nav a{
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px
}
.home-nav a::before{
  content:"";width:0;height:1px;background:currentColor;transition:width .35s var(--ease)
}
.home-nav a:hover::before{width:20px}

/* ARCHITECTURE LANDING */
.arch-intro{
  min-height:62svh;padding:142px 0 70px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end;
}
.arch-title{
  font-family:var(--serif);font-size:clamp(86px,12vw,205px);
  letter-spacing:-.06em;line-height:.78;font-weight:400;margin:0;
}
.arch-intro-copy{
  max-width:520px;margin-left:auto;padding-bottom:7px;
  font-family:var(--serif);font-size:clamp(19px,1.8vw,30px);line-height:1.15;
}
.arch-projects{position:relative;border-top:1px solid var(--rule)}
.project-index{
  position:sticky;top:72px;z-index:30;height:0;pointer-events:none;
}
.project-index-inner{
  position:absolute;left:0;top:28px;
  display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.project-index .bar{width:34px;height:1px;background:var(--ink)}
.project-scene{
  min-height:100svh;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  align-items:center;
  padding:110px 0 80px;
}
.project-scene .visual{position:relative}
.project-scene img{width:100%;height:auto}
.project-scene .number{
  font-family:var(--serif);font-size:clamp(90px,12vw,210px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(16,16,15,.28);
  position:absolute;z-index:-1
}
.project-scene .copy h2{
  font-family:var(--serif);font-size:clamp(50px,6.5vw,108px);
  font-weight:400;letter-spacing:-.05em;line-height:.88;margin:0 0 20px;
}
.project-scene .copy p{max-width:390px;color:var(--muted);line-height:1.6;font-size:13px}
.project-scene .go{
  display:inline-flex;align-items:center;gap:11px;margin-top:20px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase
}
.project-scene .go span{
  display:block;width:28px;height:1px;background:currentColor;transition:width .3s var(--ease)
}
.project-scene .go:hover span{width:46px}

.scene-ua .visual{grid-column:2/span 7}
.scene-ua .copy{grid-column:10/-1}
.scene-ua .number{left:-7vw;top:-10vw}

.scene-hm .copy{grid-column:2/span 4;grid-row:1}
.scene-hm .visual{grid-column:7/-1;grid-row:1}
.scene-hm .number{right:-3vw;bottom:-8vw}

.scene-fhf .visual{grid-column:3/span 6}
.scene-fhf .copy{grid-column:10/-1}
.scene-fhf .number{left:-8vw;bottom:-8vw}

/* Selected work: not masonry; curated editorial sequence */
.selected{
  border-top:1px solid var(--rule);
  padding:110px 0 150px;
}
.selected-head{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:90px
}
.selected-head h2{
  font-family:var(--serif);font-size:clamp(60px,8vw,132px);line-height:.86;
  letter-spacing:-.055em;font-weight:400;margin:0
}
.selected-head p{max-width:430px;margin-left:auto;color:var(--muted);font-size:13px;line-height:1.6}
.editorial-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);row-gap:clamp(90px,10vw,180px);
  align-items:start
}
.work{margin:0}
.work img{width:100%;height:auto}
.work figcaption{
  padding-top:9px;display:flex;justify-content:space-between;gap:14px;
  font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)
}
.w1{grid-column:1/span 7}
.w2{grid-column:9/-1;margin-top:14vw}
.w3{grid-column:2/span 5}
.w4{grid-column:8/-1;margin-top:-4vw}
.w5{grid-column:1/span 4}
.w6{grid-column:6/-1;margin-top:10vw}
.w7{grid-column:3/span 7}
.w8{grid-column:9/-1;margin-top:7vw}
.w9{grid-column:1/span 5}
.w10{grid-column:7/-1;margin-top:5vw}
.w11{grid-column:2/span 4}
.w12{grid-column:7/span 5;margin-top:8vw}

/* project detail */
.detail-intro{
  min-height:82svh;padding:150px 0 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end
}
.detail-title{
  font-family:var(--serif);font-size:clamp(76px,10vw,170px);font-weight:400;
  line-height:.8;letter-spacing:-.06em;margin:16px 0 0
}
.detail-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  padding-top:20px;border-top:1px solid var(--rule)
}
.detail-meta p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.detail-gallery{padding:30px 0 150px}
.detail-row{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  margin-bottom:clamp(80px,10vw,170px);align-items:start
}
.detail-row figure{margin:0}
.detail-row img{width:100%;height:auto}
.detail-row figcaption{
  padding-top:8px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)
}
.d-left{grid-column:1/span 8}
.d-right{grid-column:6/-1}
.d-mid{grid-column:3/span 8}
.d-small-left{grid-column:2/span 5}
.d-small-right{grid-column:8/-1}
.d-pair-a{grid-column:1/span 5}
.d-pair-b{grid-column:7/-1;margin-top:12vw}
.next-project{
  border-top:1px solid var(--rule);padding:50px 0 70px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center
}
.next-project a{
  font-family:var(--serif);font-size:clamp(36px,5vw,78px);letter-spacing:-.04em
}

/* FILM */
.film-page{overflow:hidden}
.film-hero{
  min-height:100svh;padding:124px 0 40px;
  display:grid;grid-template-rows:auto 1fr auto
}
.film-hero-top{display:flex;justify-content:space-between;gap:30px}
.film-mark{
  font-family:var(--serif);font-size:clamp(110px,17vw,320px);
  line-height:.7;letter-spacing:-.07em;opacity:.06;white-space:nowrap;
  align-self:center;transform:translateX(-2vw)
}
.film-main-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(68px,10vw,178px);
  line-height:.78;letter-spacing:-.06em;margin:0;max-width:1250px
}
.film-bottom{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end
}
.film-bottom p{max-width:560px;color:rgba(242,239,232,.5);font-size:13px;line-height:1.7;margin:0}
.film-bottom .film-actions{display:flex;justify-content:flex-end;gap:24px}
.film-actions a{font-size:9px;letter-spacing:.15em;text-transform:uppercase;border-bottom:1px solid;padding-bottom:5px}
.film-index{
  border-top:1px solid rgba(255,255,255,.15);padding:70px 0 130px
}
.film-item{
  display:grid;grid-template-columns:120px 1fr 180px;gap:35px;
  padding:26px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:center
}
.film-item .year,.film-item .type{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,232,.38)}
.film-item h2{
  font-family:var(--serif);font-size:clamp(34px,4.6vw,72px);font-weight:400;letter-spacing:-.04em;margin:0
}
.film-item .type{text-align:right}

/* ABOUT */
.about-page{
  min-height:100svh;padding:140px 0 70px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(60px,8vw,140px)
}
.about-title{
  font-family:var(--serif);font-size:clamp(90px,12vw,196px);
  letter-spacing:-.06em;line-height:.78;font-weight:400;margin:12px 0 46px
}
.about-lead{
  max-width:760px;font-family:var(--serif);font-size:clamp(27px,3.2vw,48px);line-height:1.08
}
.about-copy{max-width:650px;margin-top:40px;color:var(--muted);font-size:13px;line-height:1.75}
.about-side{padding-top:31vh}
.contact-block{border-top:1px solid var(--rule)}
.contact-row{
  display:grid;grid-template-columns:120px 1fr;gap:20px;
  padding:14px 0;border-bottom:1px solid rgba(16,16,15,.08);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase
}
.contact-row span:last-child{color:var(--muted)}
.recognition{margin-top:70px}
.recognition h3{font-family:var(--serif);font-size:34px;font-weight:400;margin:0 0 10px}
.recognition p{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 32px}

/* footer */
.footer{
  border-top:1px solid var(--rule);padding:28px 0 38px;
  display:flex;justify-content:space-between;gap:20px;
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
body.dark .footer{border-color:rgba(255,255,255,.14);color:rgba(242,239,232,.38)}

@media(max-width:1000px){
  .home{grid-template-columns:1fr .85fr}
  .arch-intro{grid-template-columns:1fr}
  .arch-intro-copy{margin-left:0}
  .project-scene{min-height:auto;padding:110px 0}
  .scene-ua .visual{grid-column:1/span 8}
  .scene-ua .copy{grid-column:9/-1}
  .scene-hm .copy{grid-column:1/span 4}
  .scene-hm .visual{grid-column:5/-1}
  .scene-fhf .visual{grid-column:1/span 8}
  .scene-fhf .copy{grid-column:9/-1}
  .about-page{grid-template-columns:1fr}
  .about-side{padding-top:0}
}
@media(max-width:760px){
  .site-header{height:62px}
  .site-header .inner{height:62px}
  .brand{font-size:9px}
  .nav{gap:15px}
  .nav a{font-size:8px}
  .home{display:block;min-height:auto;padding:108px var(--gutter) 88px}
  .home-left{padding-left:0}
  .home-name{font-size:clamp(68px,22vw,110px)}
  .home-name .second{margin-left:20px}
  .home-dek{width:auto;margin-left:20px}
  .home-right{margin-top:46px}
  .home-right::before{display:none}
  .home-image{width:78%;margin:0 0 0 auto}
  .home-nav{position:static;padding:44px 0 0 20px;flex-wrap:wrap}
  .arch-intro{min-height:auto;padding:120px 0 70px}
  .arch-title{font-size:clamp(74px,22vw,118px)}
  .project-index{display:none}
  .project-scene{
    display:block;padding:80px 0;border-top:1px solid var(--rule)
  }
  .project-scene .visual,.project-scene .copy{margin:0}
  .project-scene .copy{padding-top:24px}
  .project-scene .number{display:none}
  .selected-head{grid-template-columns:1fr}
  .selected-head p{margin-left:0}
  .editorial-grid{display:block}
  .work{margin:0 0 64px!important}
  .detail-intro{grid-template-columns:1fr;min-height:auto;padding:120px 0 70px}
  .detail-gallery .detail-row{display:block;margin-bottom:70px}
  .detail-row figure{margin-bottom:35px!important}
  .film-bottom{grid-template-columns:1fr}
  .film-bottom .film-actions{justify-content:flex-start}
  .film-item{grid-template-columns:55px 1fr}
  .film-item .type{grid-column:2;text-align:left}
  .about-page{padding-top:120px}
  .about-side{padding-top:10px}
}


/* V3.1 — slide viewer
   Added without changing the V3 palette, typography, or architecture landing system.
   Images always retain their supplied frame/aspect ratio. */
.image-slider{
  position:relative;
  width:100%;
  height:clamp(560px,72svh,940px);
  background:rgba(16,16,15,.035);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-rows:minmax(0,1fr) 58px;
  overflow:hidden;
}
.image-slider .slider-stage{
  position:relative;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 34px 22px;
}
.image-slider .slide{
  position:absolute;
  inset:28px 34px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateX(24px);
  pointer-events:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.image-slider .slide.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.image-slider .slide img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.slider-toolbar{
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:18px;
  align-items:center;
  padding:0 14px 0 2px;
}
.slider-caption{
  min-width:0;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.slider-counter{
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.slider-controls{display:flex;gap:1px}
.slider-button{
  appearance:none;
  width:44px;height:34px;
  border:1px solid var(--rule);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.slider-button:hover{background:var(--ink);color:var(--paper)}
.slider-note{
  margin-top:12px;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.detail-slider{
  padding:10px 0 145px;
}
.selected-slider-wrap{
  padding-top:0;
}

@media(max-width:760px){
  .image-slider{
    height:68svh;
    min-height:500px;
  }
  .image-slider .slider-stage{padding:18px 14px}
  .image-slider .slide{inset:18px 14px}
  .slider-toolbar{grid-template-columns:1fr auto}
  .slider-counter{display:none}
  .detail-slider{padding-bottom:90px}
}

/* V3.2 — spacing / scale corrections after review */

/* Project intros should introduce the work, not behave like full-screen heroes. */
.detail-intro{
  min-height:0;
  padding:126px 0 48px;
  align-items:end;
}

/* Put more of the viewport in service of the photograph. */
.detail-slider{
  padding:0 0 118px;
}
.image-slider{
  height:clamp(640px,82svh,960px);
  grid-template-rows:minmax(0,1fr) 48px;
}
.image-slider .slider-stage{
  padding:14px 14px 8px;
}
.image-slider .slide{
  inset:14px 14px 8px;
}

/* Compact controls sit immediately below the image rather than at the edge
   of a large footer bar. Caption remains quiet at left. */
.slider-toolbar{
  min-height:48px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
}
.slider-caption{
  position:absolute;
  left:12px;
  max-width:42%;
}
.slider-counter{
  margin-right:10px;
}
.slider-controls{
  display:flex;
  gap:3px;
}
.slider-button{
  width:36px;
  height:30px;
}

/* The Mies vertical should fit inside the landing viewport without creating
   a scrollbar simply because of the photograph. */
.home-image img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100svh - 190px);
  margin-left:auto;
}

@media(max-width:760px){
  .detail-intro{
    padding:105px 0 38px;
  }
  .image-slider{
    height:72svh;
    min-height:540px;
  }
  .image-slider .slider-stage{padding:10px 8px 6px}
  .image-slider .slide{inset:10px 8px 6px}
  .slider-caption{display:none}
  .detail-slider{padding-bottom:82px}
  .home-image img{max-height:none;width:100%}
}

/* Let the active photograph determine viewer height so controls stay visually
   attached to the image instead of floating below empty stage space. */
.image-slider{
  height:auto;
  min-height:0;
  display:block;
}
.image-slider .slider-stage{
  min-height:0;
  height:auto;
  display:block;
  padding:14px 14px 8px;
}
.image-slider .slide{
  position:absolute;
  inset:14px;
  width:calc(100% - 28px);
  height:auto;
  min-height:0;
}
.image-slider .slide.active{
  position:relative;
  inset:auto;
  width:100%;
}
.image-slider .slide img{
  max-width:100%;
  max-height:80svh;
}
@media(max-width:760px){
  .image-slider{height:auto;min-height:0}
  .image-slider .slider-stage{padding:10px 8px 6px}
  .image-slider .slide{inset:10px 8px;width:calc(100% - 16px)}
  .image-slider .slide.active{width:100%}
  .image-slider .slide img{max-height:72svh}
}


/* =========================================================
   V7
   Baseline: V3.2. Only spacing and slider-control refinements.
   ========================================================= */

/* Architecture landing:
   let the project content determine height rather than forcing
   each project to occupy an entire viewport. */
.project-scene{
  min-height:0 !important;
  padding-top:clamp(68px,6vw,96px) !important;
  padding-bottom:clamp(68px,6vw,96px) !important;
}
.arch-projects .project-scene + .project-scene{
  border-top:1px solid var(--rule);
}

/* Keep the V3 project layouts, but reduce the visual gap between
   the image and its copy slightly. */
.scene-ua .copy,
.scene-fhf .copy{
  grid-column:9/-1 !important;
}
.scene-hm .visual{
  grid-column:7/-1 !important;
}

/* Sliders:
   controls stay in a fixed row ABOVE the photograph.
   The image can change height with its native aspect ratio without
   making the arrows jump around. */
.image-slider{
  display:grid !important;
  grid-template-rows:48px auto !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

.image-slider .slider-toolbar{
  grid-row:1 !important;
  min-height:48px !important;
  border-top:none !important;
  border-bottom:1px solid var(--rule) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:stretch !important;
  padding:0 6px 0 2px !important;
}

.image-slider .slider-stage{
  grid-row:2 !important;
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  padding:14px 0 0 !important;
  overflow:visible !important;
}

.image-slider .slide{
  position:absolute !important;
  inset:14px 0 auto 0 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

.image-slider .slide.active{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  display:flex !important;
}

.image-slider .slide img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:80svh !important;
  object-fit:contain !important;
}

.slider-caption{
  position:static !important;
  left:auto !important;
  max-width:none !important;
  min-width:0 !important;
}

.slider-counter{
  margin:0 !important;
  white-space:nowrap;
}

.slider-controls{
  display:flex !important;
  gap:3px !important;
}

.slider-button{
  width:36px !important;
  height:30px !important;
}

/* Keep the Mies landing image inside the visible desktop viewport. */
.home-image img{
  max-height:calc(100svh - 205px) !important;
}

@media(max-width:760px){
  .project-scene{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  .image-slider{
    grid-template-rows:44px auto !important;
  }

  .image-slider .slider-toolbar{
    min-height:44px !important;
  }

  .image-slider .slider-stage{
    padding-top:10px !important;
  }

  .image-slider .slide{
    inset:10px 0 auto 0 !important;
  }

  .image-slider .slide img{
    max-height:72svh !important;
  }

  .slider-caption{
    display:none !important;
  }

  .home-image img{
    max-height:none !important;
  }
}


/* V7.1 — center slideshow controls above every image */
.image-slider .slider-toolbar{
  position:relative !important;
  grid-template-columns:1fr auto 1fr !important;
}

.slider-center{
  grid-column:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  white-space:nowrap;
}

.slider-toolbar-spacer{
  grid-column:3 !important;
}

.slider-center .slider-counter{
  display:block !important;
  min-width:46px;
  text-align:center;
  margin:0 !important;
}

.slider-center .slider-button{
  width:36px !important;
  height:30px !important;
}

@media(max-width:760px){
  .image-slider .slider-toolbar{
    grid-template-columns:1fr auto 1fr !important;
  }

  .slider-caption{
    display:none !important;
  }

  .slider-center .slider-counter{
    display:block !important;
  }
}


/* =========================================================
   V7.2 — Film + About content pass only
   V7.1 Architecture / Home remain unchanged.
   ========================================================= */

/* FILM */
.film-hero-v72{
  min-height:94svh;
  padding-bottom:52px;
}
.film-feature{
  align-self:center;
  position:relative;
}
.film-feature-kicker{
  margin:0 0 14px 4px;
  position:relative;
  z-index:2;
}
.film-bottom-v72{
  grid-template-columns:1.25fr .75fr;
}
.film-feature-copy{
  max-width:660px !important;
  color:rgba(242,239,232,.68) !important;
  font-size:14px !important;
}
.film-award-line{
  max-width:720px !important;
  margin-top:13px !important;
  font-size:10px !important;
  line-height:1.6 !important;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:rgba(242,239,232,.34) !important;
}
.film-index-v72{
  padding-top:46px;
}
.film-index-head{
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-bottom:18px;
}
.film-item-expanded{
  grid-template-columns:105px 1fr 160px;
  align-items:start;
  padding:30px 0 34px;
}
.film-item-copy h2{
  margin-bottom:9px;
}
.film-item-copy p{
  max-width:720px;
  margin:0;
  color:rgba(242,239,232,.46);
  font-size:12px;
  line-height:1.65;
}
.film-item-expanded .type{
  padding-top:13px;
}

/* ABOUT */
.about-page-v72{
  padding-top:126px;
  padding-bottom:90px;
  align-items:start;
}
.about-page-v72 .about-title{
  margin-bottom:34px;
}
.about-page-v72 .about-lead{
  max-width:820px;
}
.about-copy-v72{
  max-width:760px;
  margin-top:36px;
}
.about-copy-v72 p{
  margin:0 0 20px;
}
.about-side-v72{
  padding-top:22vh;
}
.about-facts{
  border-top:1px solid var(--rule);
}
.about-side-v72 .contact-row{
  grid-template-columns:105px 1fr;
}
.recognition-subhead{
  margin-top:48px;
}
.about-contact-note{
  margin-top:58px;
  padding-top:18px;
  border-top:1px solid var(--rule);
}
.about-contact-note p{
  max-width:380px;
  margin:12px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

@media(max-width:760px){
  .film-hero-v72{
    min-height:auto;
    padding-bottom:70px;
  }
  .film-bottom-v72{
    grid-template-columns:1fr;
  }
  .film-item-expanded{
    grid-template-columns:55px 1fr;
  }
  .film-item-expanded .type{
    grid-column:2;
    text-align:left;
    padding-top:0;
  }
  .about-side-v72{
    padding-top:12px;
  }
}


/* V7.3 — poster-led Film page + exact About copy */

.about-copy-v73{
  max-width:760px;
  margin-top:42px;
}
.about-copy-v73 p{
  margin:0 0 22px;
  color:var(--muted);
  font-size:13px;
  line-height:1.78;
}
.about-page-v72 > section > .micro + .about-title{margin-bottom:0}

.film-hero-v73{
  min-height:auto;
  padding-top:122px;
  padding-bottom:88px;
}
.film-feature-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.58fr);
  gap:clamp(50px,7vw,120px);
  align-items:center;
  min-height:calc(100svh - 210px);
}
.film-feature-copyblock{position:relative}
.film-feature-copyblock .film-mark{top:-8vw;left:-1vw}
.film-feature-copyblock .film-main-title{position:relative;z-index:2}
.film-feature-copyblock .film-feature-copy{margin-top:30px}
.film-feature-copyblock .film-actions{margin-top:24px}
.film-feature-poster{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.film-feature-poster img{
  width:auto;
  max-width:100%;
  max-height:72svh;
  height:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
.film-secondary{
  padding-top:86px;
  padding-bottom:120px;
  border-top:1px solid rgba(242,239,232,.12);
}
.film-poster-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(52px,7vw,110px);
  align-items:start;
  margin-top:36px;
}
.film-poster-card{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(220px,.55fr);
  gap:28px;
  align-items:end;
}
.film-poster-card figure{margin:0}
.film-poster-card figure img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 18px 50px rgba(0,0,0,.26);
}
.film-poster-meta{padding-bottom:2px}
.film-poster-meta h2{
  margin:9px 0 16px;
  font-family:var(--serif);
  font-size:clamp(30px,3vw,54px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.035em;
}
.film-poster-meta p{
  margin:0;
  color:rgba(242,239,232,.48);
  font-size:11px;
  line-height:1.65;
  max-width:330px;
}

@media(max-width:1050px){
  .film-feature-grid{grid-template-columns:1fr .52fr}
  .film-poster-card{grid-template-columns:1fr;align-items:start}
}
@media(max-width:760px){
  .film-feature-grid{display:block;min-height:auto}
  .film-feature-poster{margin-top:48px;justify-content:center}
  .film-feature-poster img{max-height:none;width:min(76vw,460px)}
  .film-secondary{padding-top:64px}
  .film-poster-pair{grid-template-columns:1fr;gap:76px}
  .film-poster-card{grid-template-columns:1fr}
  .film-poster-card figure{width:min(78vw,520px)}
}


/* =========================================================
   V7.4 — homepage type refinement + repeated Film treatments
   ========================================================= */

/* HOME
   Keep the V7 geography. The name gets slightly more breathing room
   vertically and is allowed to reach farther across the central axis. */
@media(min-width:761px){
  .home-name{
    font-size:clamp(82px,10.85vw,204px) !important;
    line-height:.855 !important;
    letter-spacing:-.052em !important;
    width:calc(100% + 155px);
    position:relative;
    z-index:3;
  }
  .home-name .second{
    margin-left:clamp(42px,4.2vw,74px) !important;
  }
  .home-dek{
    margin-top:32px !important;
    margin-left:clamp(42px,4.2vw,74px) !important;
  }
}

/* FILM — three works use one consistent editorial system */
.film-page{overflow:visible !important}

.film-work{
  min-height:100svh;
  padding-top:122px;
  padding-bottom:88px;
  border-bottom:1px solid rgba(242,239,232,.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.film-work:first-of-type{
  padding-top:122px;
}

.film-work-top{
  display:flex;
  justify-content:space-between;
  gap:28px;
  margin-bottom:38px;
}

.film-work-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.58fr);
  gap:clamp(52px,7vw,120px);
  align-items:center;
}

.film-work-copy{
  position:relative;
  z-index:2;
}

.film-work-ghost{
  position:absolute;
  left:-1vw;
  top:-7vw;
  font-family:var(--serif);
  font-size:clamp(110px,16vw,290px);
  line-height:.7;
  letter-spacing:-.065em;
  opacity:.055;
  white-space:nowrap;
  pointer-events:none;
}

.film-work-title{
  position:relative;
  z-index:2;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(62px,8.7vw,156px);
  line-height:.8;
  letter-spacing:-.058em;
  margin:0;
  max-width:1100px;
}

.film-work-title.long{
  font-size:clamp(54px,7vw,122px);
  line-height:.84;
}

.film-work-description{
  position:relative;
  z-index:2;
  max-width:650px;
  margin:30px 0 0;
  color:rgba(242,239,232,.58);
  font-size:13px;
  line-height:1.7;
}

.film-work-note{
  position:relative;
  z-index:2;
  max-width:720px;
  margin:13px 0 0;
  color:rgba(242,239,232,.34);
  font-size:10px;
  line-height:1.6;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.film-work-actions{
  position:relative;
  z-index:2;
  margin-top:24px;
}

.film-work-actions a{
  font-size:9px;
  letter-spacing:.15em;
  text-transform:uppercase;
  border-bottom:1px solid;
  padding-bottom:5px;
}

.film-work-poster{
  margin:0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.film-work-poster img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:72svh;
  height:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}

.film-work-ch .film-work-poster img{
  max-height:69svh;
}

.film-work-sadmax .film-work-poster img{
  max-height:70svh;
}

@media(max-width:950px){
  .film-work-grid{
    grid-template-columns:1fr .52fr;
    gap:42px;
  }
  .film-work-title{
    font-size:clamp(55px,8.4vw,112px);
  }
  .film-work-title.long{
    font-size:clamp(48px,6.8vw,92px);
  }
}

@media(max-width:760px){
  .film-work{
    min-height:auto;
    padding-top:100px;
    padding-bottom:76px;
  }
  .film-work-top{
    margin-bottom:30px;
  }
  .film-work-grid{
    display:block;
  }
  .film-work-ghost{
    top:-54px;
    font-size:30vw;
  }
  .film-work-poster{
    margin-top:46px;
    justify-content:center;
  }
  .film-work-poster img,
  .film-work-ch .film-work-poster img,
  .film-work-sadmax .film-work-poster img{
    width:min(76vw,480px);
    max-height:none;
  }
}


/* =========================================================
   V7.5 — Film year cleanup + actual About contact/links
   ========================================================= */

.about-links{
  margin-top:58px;
}

.about-link-list{
  margin-top:15px;
  border-top:1px solid var(--rule);
}

.about-link-list a{
  display:grid;
  grid-template-columns:105px 1fr;
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid var(--rule);
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.about-link-list a span:first-child{
  color:var(--ink);
}

.about-link-list a span:last-child{
  color:var(--muted);
  transition:color .2s ease, transform .2s ease;
}

.about-link-list a:hover span:last-child{
  color:var(--ink);
  transform:translateX(4px);
}

@media(max-width:760px){
  .about-link-list a{
    grid-template-columns:88px 1fr;
    gap:14px;
  }
}

/* V7.6 */
.selected-head{display:block !important;}
.selected-head h2{margin-bottom:0 !important;}


/* =========================================================
   V7.7 — James Frommeyer brand mark / favicon
   ========================================================= */

.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
}

.footer-logo{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
  opacity:.64;
}

body.dark .footer-logo{
  filter:invert(1);
  opacity:.58;
}

@media(max-width:760px){
  .footer-logo{
    width:18px;
    height:18px;
  }
}


/* =========================================================
   V7.9 — Architecture intro spacing refinement
   ========================================================= */

/* Keep the existing Architecture title/copy composition, but bring
   Project 01 into the initial viewport sooner. */
.arch-intro{
  min-height:clamp(430px,46svh,560px) !important;
  padding-bottom:50px !important;
}

@media(max-width:760px){
  .arch-intro{
    min-height:auto !important;
    padding-bottom:42px !important;
  }
}


/* =========================================================
   V7.10 — Architecture intro: remove excess top dead space
   ========================================================= */

@media(min-width:761px){
  .arch-intro{
    min-height:clamp(350px,38svh,430px) !important;
    padding-top:108px !important;
    padding-bottom:24px !important;
    align-items:end !important;
  }
}


/* =========================================================
   V7.11 — selected captions, About mark, 404, final polish
   ========================================================= */
.selected .image-slider{grid-template-rows:48px auto auto !important;}
.selected .slider-caption{display:none !important;}
.selected-caption-line{
  grid-row:3;padding:11px 2px 0;min-height:30px;color:var(--muted);
  font-size:10px;line-height:1.5;letter-spacing:.025em;text-transform:none;
}
@media(max-width:760px){
  .selected .image-slider{grid-template-rows:44px auto auto !important;}
  .selected-caption-line{min-height:42px;padding-top:9px;font-size:10px;}
}
.about-mark{display:flex;justify-content:flex-end;margin:0 0 64px;}
.about-mark img{width:clamp(132px,12vw,188px);height:auto;opacity:.86;}
.about-side-v72{padding-top:12vh !important;}
@media(max-width:760px){
  .about-mark{justify-content:flex-start;margin:0 0 42px;}
  .about-mark img{width:112px;}
  .about-side-v72{padding-top:12px !important;}
}
.error-page{
  min-height:calc(100svh - 90px);padding-top:clamp(150px,20vh,230px);
  padding-bottom:90px;position:relative;overflow:hidden;
}
.error-ghost{
  position:absolute;top:115px;right:0;font-family:var(--serif);
  font-size:clamp(190px,28vw,500px);line-height:.72;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:1px rgba(16,16,15,.11);pointer-events:none;
}
.error-page h1{
  position:relative;z-index:2;margin:18px 0 24px;font-family:var(--serif);
  font-weight:400;font-size:clamp(78px,11vw,190px);line-height:.78;letter-spacing:-.055em;
}
.error-page p{position:relative;z-index:2;color:var(--muted);font-size:13px;}
.error-links{
  position:relative;z-index:2;display:flex;gap:26px;flex-wrap:wrap;margin-top:46px;
  padding-top:18px;border-top:1px solid var(--rule);max-width:760px;
}
.error-links a{font-size:9px;letter-spacing:.15em;text-transform:uppercase;}