/* Sections below the film. The engine keeps its fixed layers (stage z10, copy z20, topbar z50);
   this main sits above the stage and scrolls over it. */
:root{
  --cream:#F4EFE8; --cream-deep:#EAE2D6; --ink:#1E1E1E; --ink-soft:#6B655E;
  --sage:#B7C9B5; --sage-deep:#7A9B78; --rose:#E8C4C0; --denim:#5B7BA6;
  --hair:rgba(30,30,30,.08); --ease:cubic-bezier(.23,1,.32,1);
  --r-out:28px; --r-in:22px;
}
.site{position:relative;z-index:25;background:var(--cream);color:var(--ink);
  font-family:'Figtree',system-ui,sans-serif;font-size:1.05rem;line-height:1.55;
  box-shadow:0 -30px 80px rgba(30,30,30,.10);border-radius:40px 40px 0 0;}
.wrap{width:min(1240px,100% - clamp(36px,10vw,128px));margin-inline:auto;}
.section{padding-block:clamp(88px,12vw,160px);}
.section + .section{padding-top:0;}
.display{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-optical-sizing:auto;
  font-weight:600;font-size:clamp(2.2rem,5vw,4.4rem);line-height:.98;letter-spacing:-.03em;
  margin:0 0 clamp(36px,5vw,64px);text-wrap:balance;max-width:20ch;}
.display--sm{font-size:clamp(1.8rem,3.4vw,2.8rem);}

/* trays: deep-cream felt tray holding an inner surface */
.tray{background:var(--cream-deep);border-radius:var(--r-out);padding:10px;
  box-shadow:0 18px 50px rgba(120,100,70,.14),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);}
.tray__in{border-radius:var(--r-in);overflow:hidden;background:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 1px 2px rgba(30,30,30,.06);}
.tray__in img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.tray--sage{background:color-mix(in srgb,var(--sage) 70%,var(--cream-deep));}
.tray--denim{background:color-mix(in srgb,var(--denim) 22%,var(--cream-deep));}
.tray--ink{background:color-mix(in srgb,var(--ink) 55%,var(--cream-deep));}
.tray--rose{background:color-mix(in srgb,var(--rose) 80%,var(--cream-deep));}
.tray--tilt{transform:rotate(-2.5deg);}

/* work grid 7/5 then 5/7 */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px);}
.work{display:block;color:inherit;text-decoration:none;}
.work[data-span="7"]{grid-column:span 7;} .work[data-span="5"]{grid-column:span 5;}
.work .tray__in{aspect-ratio:16/10;}
.work[data-span="5"] .tray__in{aspect-ratio:4/3;background:#fff;}
.work[data-span="5"] .tray__in img{object-fit:contain;padding:6%;}
.work[data-span="7"] .tray__in--screen img{object-position:top;}
.work__meta{padding:22px 8px 0;display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:start;}
.work__meta h3{grid-column:1;margin:0;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:600;font-size:1.5rem;letter-spacing:-.02em;}
.work__type{grid-column:2;grid-row:1;font-size:.82rem;font-weight:600;color:var(--denim);padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--denim) 12%,#fff);}
.work__meta p{grid-column:1 / -1;margin:0;color:var(--ink-soft);max-width:56ch;}
@media (hover:hover) and (pointer:fine){
  .work:hover .tray{transform:translateY(-4px);box-shadow:0 26px 60px rgba(120,100,70,.18),inset 0 1px 0 rgba(255,255,255,.7);}
  .work:hover .tray__in img{transform:scale(1.03);}
}

/* about split */
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center;}
.about__photo{padding:24px;}
.about__photo .tray__in{aspect-ratio:3/4;}
.about__text p{margin:0 0 1.2em;max-width:60ch;color:color-mix(in srgb,var(--ink) 82%,var(--ink-soft));}
.about__text .display{max-width:16ch;}
.pills{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.pills li{font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--cream-deep);color:var(--ink);}

/* background lists */
.bg-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);}
.bg-list{list-style:none;margin:0;padding:0;}
.bg-list li{display:grid;grid-template-columns:1fr auto;gap:24px;padding:18px 0;border-top:1px solid var(--hair);}
.bg-list li:last-child{border-bottom:1px solid var(--hair);}
.bg-list__what strong{display:block;font-weight:600;}
.bg-list__what{color:var(--ink-soft);}
.bg-list__when{color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* contact */
.section--contact{padding-bottom:clamp(60px,8vw,110px);}
.email{display:inline-block;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:500;
  font-size:clamp(1.3rem,3.2vw,2.6rem);letter-spacing:-.02em;color:var(--denim);text-decoration:none;
  border-bottom:2px solid color-mix(in srgb,var(--denim) 35%,transparent);padding-bottom:4px;transition:border-color .3s var(--ease);}
.email:hover{border-color:var(--denim);}
.contact__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:40px;}
.btn{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 22px;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:600;text-decoration:none;transition:transform .16s var(--ease);}
.btn__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.14);transition:transform .4s var(--ease);}
.btn:hover .btn__ic{transform:translate(2px,-2px);}
.btn:active{transform:scale(.97);}
.link{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .3s var(--ease);}
.link:hover{border-color:var(--ink);}
.foot{border-top:1px solid var(--hair);padding:28px 0 40px;font-size:.9rem;color:var(--ink-soft);}
.foot__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* reveal: one authored moment, once, blur to sharp */
.reveal{opacity:0;transform:translateY(24px);filter:blur(6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
  transition-delay:var(--d,0ms);}
.reveal.is-in{opacity:1;transform:none;filter:none;}

/* engine chrome handoff once the film is behind us */
body.past-film .sw-route,body.past-film .sw-hint,body.past-film .sw-nav{opacity:0;pointer-events:none;transition:opacity .3s;}
.site-nav{display:none;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);border:1px solid rgba(91,123,166,.16);}
.site-nav a{font-size:.82rem;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:7px 14px;border-radius:999px;transition:color .25s,background .25s;}
.site-nav a:hover{color:var(--ink);}
body.past-film .site-nav{display:flex;}

@media (max-width:860px){
  .site{border-radius:24px 24px 0 0;}
  .work-grid{grid-template-columns:1fr;gap:36px;}
  .work[data-span="7"],.work[data-span="5"]{grid-column:1 / -1;}
  .work .tray__in,.work[data-span="5"] .tray__in{aspect-ratio:4/3;background:#fff;}
.work[data-span="5"] .tray__in img{object-fit:contain;padding:6%;}
  .about{grid-template-columns:1fr;gap:32px;}
  .about__photo{padding:12px 32px 0;max-width:360px;}
  .bg-cols{grid-template-columns:1fr;gap:0;}
  .bg-cols .bg-list + .bg-list li:first-child{border-top:0;}
  .site-nav{display:none !important;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{transform:none;filter:none;transition:opacity .4s;}
  .tray,.tray__in img,.btn__ic{transition:none;}
  .tray--tilt{transform:none;}
}

/* top bar backdrop once the page content is scrolling under it */
body.past-film .sw-topbar{background:linear-gradient(180deg,var(--cream) 55%,rgba(244,239,232,0));padding-bottom:34px;}
.section--about{padding-top:clamp(40px,6vw,80px) !important;}
.section--background,.section--contact{padding-top:clamp(40px,5vw,64px) !important;}

/* Film copy: plain type on the cream ground, scene pushed right so the left stays clear */
.sw-root .sw-copy{width:min(44vw,600px);padding:0;background:none;box-shadow:none;}
.sw-root .sw-copy__num{display:none;}
.sw-root .sw-copy__eyebrow{margin-top:0;font-size:.8rem;letter-spacing:.2em;}
.sw-root .sw-copy__title{font-size:clamp(2.6rem,5.6vw,5rem);line-height:.98;letter-spacing:-.035em;font-weight:700;text-shadow:none;}
.sw-root .sw-copy__body{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.5;max-width:42ch;text-shadow:none;color:var(--ink);}
@media (min-width:861px){
  .sw-root .sw-scene__video,.sw-root .sw-scene__still{object-position:62% 45%;transform:translateX(9vw) scale(1.04);transform-origin:center;}
}
@media (max-width:860px){
  .sw-root .sw-copy{width:auto;}
  .sw-root .sw-copy__title{font-size:clamp(2rem,8.5vw,2.8rem);}
  .sw-root .sw-copy__body{font-size:1.05rem;}
}

/* anchor jumps land below the fixed bar; strip aligns with the page column */
.section{scroll-margin-top:96px;}
.strip{padding-left:max(clamp(18px,5vw,64px),calc((100% - 1240px) / 2));padding-right:clamp(18px,5vw,64px);}
.strip__item video{display:block;width:100%;height:100%;object-fit:cover;}
.strip{scroll-padding-inline:max(clamp(18px,5vw,64px),calc((100% - 1240px) / 2));}
.lede{max-width:66ch;}
.tray__in--todo{min-height:100%;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#fff 0 14px,#f6f2ec 14px 28px);color:var(--ink-soft);font-size:.9rem;}
.tray__in--todo::after{content:"Screens coming";}
.more{margin:36px 8px 0;color:var(--ink-soft);max-width:70ch;}
.more a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--hair);}
.more a:hover{border-color:var(--ink);}
.sw-root .sw-copy{width:min(48vw,640px);}
.sw-root .sw-copy__title{font-size:clamp(2.4rem,5vw,4.5rem);}
body.past-film .sw-topcta{opacity:0;pointer-events:none;transition:opacity .3s;}
.work[data-fit="cover"] .tray__in img{object-fit:cover;padding:0;object-position:center 30%;}

/* AIOVA strip (restored): horizontal scroll-snap gallery of portrait trays */
.section--studio .display--sm{max-width:22ch;margin-bottom:16px;}
.lede{margin:0 0 40px;max-width:66ch;color:color-mix(in srgb,var(--ink) 82%,var(--ink-soft));}
.strip{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-top:12px;padding-bottom:28px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.strip::-webkit-scrollbar{display:none;}
.strip__item{flex:0 0 auto;width:clamp(220px,22vw,300px);margin:0;scroll-snap-align:start;}
.strip__item:nth-child(3n+2){margin-top:36px;}
.strip__item .tray__in{aspect-ratio:3/4;}
.strip__item figcaption{margin-top:12px;font-size:.9rem;color:var(--ink-soft);padding-left:6px;}
.section--studio .btn{margin-top:8px;}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid rgba(30,30,30,.18);}
.btn--ghost .btn__ic{background:rgba(30,30,30,.06);}
.inline{color:var(--denim);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--denim) 40%,transparent);}
.inline:hover{border-color:var(--denim);}
@media (max-width:860px){.strip__item{width:68vw;} .strip__item:nth-child(3n+2){margin-top:0;}}
/* all work covers are the same 1800x1036 device mockup */
.work .tray__in,.work[data-span="5"] .tray__in{aspect-ratio:1800/1036;background:var(--cream);}
.work[data-span="5"] .tray__in img,.work .tray__in img{object-fit:cover;padding:0;object-position:center;}

/* film copy legibility: desktop scene further right, phone block compact inside the scrim */
@media (min-width:861px){
  .sw-root .sw-scene__video,.sw-root .sw-scene__still{transform:translateX(12vw) scale(1.06);}
  .sw-root .sw-copy{width:min(44vw,600px);}
}
@media (max-width:860px){
  .sw-root .sw-copylayer::before{height:82%;background:linear-gradient(0deg,var(--sw-bg) 22%,color-mix(in srgb,var(--sw-bg) 82%,transparent) 55%,transparent 100%);}
  .sw-root .sw-copy__tags{display:none;}
  .sw-root .sw-copy__eyebrow{font-size:.68rem;letter-spacing:.14em;}
  .sw-root .sw-copy__title{font-size:clamp(1.8rem,7.6vw,2.4rem);}
  .sw-root .sw-copy__body{font-size:1rem;line-height:1.45;}
}
@media (min-width:861px){
  .sw-root .sw-copylayer::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sw-bg) 0%,color-mix(in srgb,var(--sw-bg) 88%,transparent) 30%,color-mix(in srgb,var(--sw-bg) 35%,transparent) 44%,transparent 56%);pointer-events:none;}
  .sw-root .sw-copy__title{font-size:clamp(2.3rem,4.5vw,4.1rem);}
}
@media (min-width:861px){
  .sw-root .sw-copylayer{overflow:hidden;}
  .sw-root .sw-copylayer::before{display:block;width:60%;height:100%;top:0;bottom:auto;left:0;}
  .sw-root .sw-copy__title{max-width:11ch;}
}
.more .soon{font-weight:600;color:var(--ink);}
.site-nav__cv{background:var(--ink);color:#fff !important;font-weight:600;}
.site-nav__cv:hover{background:#000;}
/* phones: after the film, show only the CV button in the bar */
@media (max-width:860px){
  body.past-film .site-nav{display:flex !important;padding:3px;background:transparent;border:0;backdrop-filter:none;}
  body.past-film .site-nav a:not(.site-nav__cv){display:none;}
  .site-nav__cv{padding:9px 14px;font-size:.82rem;}
}
@media (max-width:860px){
  .sw-root .sw-brand__name{font-size:.95rem;white-space:nowrap;}
  .sw-root .sw-topbar{gap:10px;padding-inline:16px;}
  .site-nav__cv{white-space:nowrap;padding:8px 12px;font-size:.8rem;}
}
body.past-film .sw-topcta{display:none;}
.about__photo{padding:0;}
.about__img{display:block;width:100%;height:auto;max-width:520px;margin:0 auto;}
@media (max-width:860px){.about__photo{max-width:420px;padding:0;}}
