:root{
  --bg:#0a0a0a;
  --panel:#0e0e0e;
  --text:#f0f0ed;
  --muted:#9a9a96;
  --line:#343434;
  --light:#eceae5;
  --dark:#141414;
  --orange:#f15a24;
  --frame:#4a4a46;
  --pad:26px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#060606;
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}

.page-frame{
  width:min(1180px,calc(100% - 28px));
  margin:14px auto 28px;
  border:1px solid var(--frame);
  background:var(--bg);
  overflow:hidden;
}

.site-header{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad);
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(10px);
}

.brand{
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
}

.nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:9px;
  letter-spacing:.02em;
}
.nav a{opacity:.86}
.nav a:hover{opacity:1}

.menu-toggle{
  display:none;
  width:34px;
  height:34px;
  background:none;
  border:0;
  padding:8px;
}
.menu-toggle span{
  display:block;
  height:1px;
  background:var(--text);
  margin:6px 0;
}

.hero{
  min-height:650px;
  padding:52px var(--pad) 36px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px;
  position:relative;
}

.hero-copy{
  align-self:start;
  padding:25px 0 0 14px;
  max-width:720px;
}

.hero h1{
  margin:0 0 34px;
  font-size:clamp(46px,6vw,82px);
  line-height:.98;
  letter-spacing:-.046em;
  font-weight:300;
}

.hero-period{
  display:inline-block;
  width:.13em;
  height:.13em;
  min-width:7px;
  min-height:7px;
  border-radius:50%;
  background:var(--orange);
  margin-left:.08em;
  transform:translateY(-.04em);
}

.hero-description{
  width:min(390px,90%);
  font-size:12px;
  line-height:1.6;
  color:#c4c4c0;
  margin:0 0 34px;
}

.quiet-link{
  display:inline-flex;
  gap:12px;
  align-items:center;
  font-size:9px;
  letter-spacing:.02em;
}
.quiet-link:hover{opacity:.65}

.section-rail{
  min-height:520px;
  position:sticky;
  top:88px;
  display:grid;
  grid-template-rows:auto 1fr;
  justify-items:center;
  align-self:start;
}

.rail-number{
  color:#d0d0cc;
  font-size:9px;
  margin-top:32px;
  position:relative;
  z-index:2;
}

.rail-rule{
  width:1px;
  background:#5e5e58;
  position:absolute;
  top:0;
  bottom:18px;
  left:50%;
}

.rail-dots{
  position:absolute;
  top:250px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:19px;
  z-index:3;
}

.rail-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid #d0d0ca;
  background:var(--bg);
  padding:0;
  cursor:pointer;
  transition:.18s ease;
}
.rail-dot:hover{transform:scale(1.25)}
.rail-dot.is-active{
  border-color:var(--orange);
  background:var(--orange);
}

.work-section{
  border-top:1px solid var(--line);
  padding:0 var(--pad) 32px;
  scroll-margin-top:74px;
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
}

.work-card{
  border-right:1px solid #292929;
  min-width:0;
}
.work-card:last-child{border-right:0}
.work-card a{display:block}
.work-index{
  height:39px;
  display:flex;
  align-items:center;
  font-size:9px;
  color:#c8c8c3;
}

.work-image{
  aspect-ratio:4/5;
  border-left:0;
  border-right:0;
  overflow:hidden;
}

.image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#d0d0ca;
  background:
    linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,0)),
    #30302f;
  border:1px solid #494946;
}
.image-placeholder span{
  font-size:9px;
  letter-spacing:.06em;
}

.work-card h2{
  font-size:10px;
  margin:13px 12px 7px;
  font-weight:600;
  line-height:1.25;
}
.work-card p{
  margin:3px 12px;
  font-size:9px;
  line-height:1.4;
  color:#d1d1cc;
}
.work-card .meta{color:#8f8f8a}

.dual-section{
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:0 var(--pad);
  scroll-margin-top:74px;
}

.dual-panel{
  display:grid;
  grid-template-columns:78px 1fr 220px;
  min-height:300px;
  align-items:center;
  padding:30px 22px 30px 0;
}
.dual-panel + .dual-panel{
  border-left:1px solid var(--line);
  padding-left:22px;
}

.dual-number,.section-number{
  font-size:34px;
  line-height:1;
  font-weight:300;
  align-self:start;
}

.dual-copy{
  padding-right:24px;
}
.dual-copy h2,
.credits-copy h2,
.about-copy h2{
  font-size:14px;
  font-weight:400;
  margin:0 0 16px;
}
.dual-copy p,
.about-copy p,
.intro-small{
  font-size:10px;
  line-height:1.65;
  color:#bcbcb7;
  margin:0 0 23px;
}
.feature-image{aspect-ratio:4/5}
.light-placeholder{background:#e4e0d7;color:#353535}

.light-section{
  background:var(--light);
  color:var(--dark);
  display:grid;
  grid-template-columns:1.3fr 1fr;
  scroll-margin-top:74px;
}

.credits-panel{
  min-height:330px;
  padding:34px 32px 32px var(--pad);
  display:grid;
  grid-template-columns:90px 1fr;
  border-right:1px solid #c6c3bc;
}

.credits-copy .intro-small{
  color:#555;
  max-width:180px;
}

.credit-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin:8px 0 27px;
}
.credit-columns ul{
  list-style:none;
  margin:0;
  padding:0;
}
.credit-columns li{
  font-size:9px;
  line-height:1.6;
  color:#3e3e3a;
}

.dark-link{color:#141414}

.about-panel{
  padding:34px var(--pad) 32px 28px;
  display:grid;
  grid-template-columns:70px 1fr 155px;
  gap:18px;
  align-items:start;
}
.about-copy p{
  color:#555;
  max-width:180px;
}
.about-image{
  aspect-ratio:1/1.18;
  background:#3a3a39;
  align-self:end;
}

.mobile-progress{display:none}

/* image replacement helper */
.work-image img,
.feature-image img,
.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* tablet */
@media (max-width: 960px){
  :root{--pad:22px}
  .page-frame{width:min(100% - 18px,1180px);margin:9px auto 20px}
  .hero{min-height:590px}
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .work-card{border-bottom:1px solid #292929}
  .dual-panel{
    grid-template-columns:62px 1fr 180px;
  }
  .light-section{grid-template-columns:1fr}
  .credits-panel{
    border-right:0;
    border-bottom:1px solid #c6c3bc;
  }
  .about-panel{
    min-height:300px;
    grid-template-columns:70px 1fr 190px;
  }
}

/* mobile */
@media (max-width: 720px){
  body{background:var(--bg)}
  .page-frame{
    width:100%;
    margin:0;
    border:0;
  }

  .site-header{
    height:64px;
    padding:0 20px;
  }

  .brand{font-size:13px}

  .menu-toggle{display:block;z-index:60}

  .nav{
    position:fixed;
    inset:0;
    background:rgba(9,9,9,.985);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:28px;
    padding:0 30px;
    font-size:20px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.22s ease;
  }
  .nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .hero{
    min-height:auto;
    display:block;
    padding:74px 20px 72px;
  }

  .hero-copy{
    padding:0;
  }

  .hero h1{
    font-size:clamp(42px,14vw,72px);
    line-height:.96;
    margin-bottom:30px;
  }

  .hero-description{
    width:92%;
    max-width:420px;
    font-size:13px;
  }

  .section-rail{display:none}

  .work-section{
    padding:0 20px 34px;
  }

  .work-grid{
    grid-template-columns:1fr;
  }

  .work-card{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-bottom:26px;
    margin-bottom:10px;
  }

  .work-index{
    height:42px;
    font-size:10px;
  }

  .work-image{
    aspect-ratio:16/11;
  }

  .work-card h2{
    margin-left:0;
    margin-right:0;
    font-size:13px;
  }

  .work-card p{
    margin-left:0;
    margin-right:0;
    font-size:11px;
  }

  .dual-section{
    display:block;
    padding:0 20px;
  }

  .dual-panel,
  .dual-panel + .dual-panel{
    grid-template-columns:55px 1fr;
    gap:8px 12px;
    padding:32px 0;
    border-left:0;
  }

  .dual-panel + .dual-panel{
    border-top:1px solid var(--line);
  }

  .dual-number{font-size:30px}
  .dual-copy{padding:0}
  .dual-copy h2{font-size:16px}
  .dual-copy p{font-size:12px}

  .feature-image{
    grid-column:1/-1;
    aspect-ratio:16/10;
    margin-top:16px;
  }

  .light-section{
    display:block;
  }

  .credits-panel{
    min-height:0;
    display:block;
    padding:34px 20px 40px;
  }

  .section-number{
    font-size:34px;
    margin-bottom:25px;
  }

  .credits-copy h2,
  .about-copy h2{
    font-size:16px;
  }

  .credits-copy .intro-small{
    max-width:260px;
    font-size:11px;
  }

  .credit-columns{
    grid-template-columns:1fr 1fr;
    gap:24px;
  }

  .credit-columns li{font-size:10px}

  .about-panel{
    min-height:0;
    display:grid;
    grid-template-columns:1fr 120px;
    padding:34px 20px 42px;
    border-top:1px solid #c6c3bc;
  }

  .about-panel .section-number{
    grid-column:1/-1;
  }

  .about-copy p{font-size:11px}
  .about-image{width:120px}

  .mobile-progress{
    display:flex;
    position:fixed;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    z-index:70;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid #393936;
    border-radius:30px;
    background:rgba(10,10,10,.88);
    backdrop-filter:blur(8px);
    font-size:8px;
  }

  .mobile-progress-dots{
    display:flex;
    gap:7px;
  }

  .mobile-progress-dots i{
    width:5px;
    height:5px;
    border:1px solid #c4c4bf;
    border-radius:50%;
  }

  .mobile-progress-dots i.active{
    background:var(--orange);
    border-color:var(--orange);
  }
}

@media (max-width: 420px){
  .hero h1{font-size:12.7vw}
  .credit-columns{grid-template-columns:1fr}
  .about-panel{grid-template-columns:1fr}
  .about-image{
    width:100%;
    aspect-ratio:16/11;
    margin-top:24px;
  }
}


/* =========================================================
   V2.3 — FULL-SCREEN PANEL MODE
   Desktop: 5 viewport panels + persistent rail + soft reveal
   Mobile: natural scrolling
   ========================================================= */

html{
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:y mandatory;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}

/* Keep frame visible while each section behaves like a slide. */
.page-frame{
  position:relative;
  overflow:visible;
}

/* All five destination sections become snap panels on desktop. */
#intro,
#work,
#ai,
#credits,
#about{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  scroll-margin-top:0 !important;
}

/* 01 — Intro */
#intro.hero{
  min-height:100svh !important;
  height:100svh;
  grid-template-columns:1fr !important;
  padding-top:86px;
  padding-bottom:42px;
  display:flex;
  align-items:center;
}

/* 02 — Work */
#work.work-section{
  min-height:100svh;
  height:100svh;
  display:flex;
  align-items:center;
  padding-top:74px;
  padding-bottom:38px;
}
#work .work-grid{
  width:100%;
}

/* 03 — AI / R&D + Collaboration */
#ai.dual-section{
  min-height:100svh;
  height:100svh;
  align-items:center;
  padding-top:74px;
  padding-bottom:34px;
}
#ai .dual-panel{
  min-height:0;
}

/* 04 — Credits only becomes the viewport panel.
   About remains visually connected but gets separated below into its own panel. */
#credits.light-section{
  min-height:200svh;
  display:block !important;
  padding:0;
  background:var(--light);
}

/* Credits occupies first viewport of the light section */
#credits .credits-panel{
  min-height:100svh;
  height:100svh;
  border-right:0 !important;
  border-bottom:1px solid #c6c3bc;
  padding:96px 7vw 54px;
  grid-template-columns:100px 1fr;
  align-items:start;
}

/* 05 — About occupies second viewport */
#about.about-panel{
  min-height:100svh;
  height:100svh;
  padding:96px 7vw 54px;
  grid-template-columns:90px minmax(0,1fr) minmax(220px,320px);
  gap:34px;
  align-items:center;
}

/* Persistent desktop rail, outside the page frame when space allows */
.section-rail{
  position:fixed !important;
  top:50% !important;
  right:calc((100vw - min(1180px, calc(100vw - 28px))) / 2 - 48px);
  transform:translateY(-50%);
  width:28px;
  height:330px;
  min-height:330px !important;
  display:block !important;
  z-index:150;
  pointer-events:none;
}
.rail-number{
  display:none;
}
.rail-rule{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  background:#5e5e58;
}
.rail-dots{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  display:flex;
  flex-direction:column;
  gap:19px;
  z-index:5;
  pointer-events:auto;
}

/* Soft entrance animation. We animate inner content, not the whole panel,
   so snapping stays stable and there is no fade-to-black pause. */
.panel-reveal{
  opacity:.18;
  transform:translateY(18px);
  transition:
    opacity 420ms cubic-bezier(.2,.7,.2,1),
    transform 420ms cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.panel-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Keep project card scale compact enough to fit a typical desktop viewport. */
@media (min-width:721px){
  #work .work-image{aspect-ratio:4/4.65}
  #work .work-card h2{font-size:9.5px}
  #work .work-card p{font-size:8.5px}

  #ai .feature-image{
    max-height:58vh;
    width:100%;
    object-fit:cover;
  }

  #credits .credit-columns{
    max-width:760px;
  }
}

/* Bring rail closer when there is not enough outside room. */
@media (max-width:1280px){
  .section-rail{right:10px}
}

/* TABLET: retain snap but loosen hard dimensions slightly */
@media (min-width:721px) and (max-width:960px){
  #intro.hero,
  #work.work-section,
  #ai.dual-section,
  #credits .credits-panel,
  #about.about-panel{
    min-height:100svh;
    height:auto;
  }
  #credits.light-section{
    min-height:auto;
  }
}

/* MOBILE: natural document flow, no forced viewport slides */
@media (max-width:720px){
  html{
    scroll-snap-type:none;
  }

  #intro.hero,
  #work.work-section,
  #ai.dual-section,
  #credits.light-section,
  #credits .credits-panel,
  #about.about-panel{
    min-height:0 !important;
    height:auto !important;
    scroll-snap-align:none !important;
  }

  #intro.hero{
    padding-top:74px;
    padding-bottom:72px;
  }

  #work.work-section{
    display:block;
    padding-top:0;
  }

  #ai.dual-section{
    display:block;
    padding-top:0;
  }

  #credits.light-section{
    min-height:0;
  }

  #credits .credits-panel,
  #about.about-panel{
    padding:34px 20px 40px;
  }

  .section-rail{
    display:none !important;
  }

  .panel-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
    scroll-snap-type:y proximity;
  }
  .panel-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   V2.4 — QUICK FADE TRANSITIONS FOR CLICKS / PAGE NAVIGATION
   ========================================================= */

/* Global page fade layer */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--bg);
  opacity:0;
  pointer-events:none;
  z-index:9999;
  transition:opacity 180ms ease;
}

body.is-page-fading::before{
  opacity:1;
  pointer-events:auto;
}

/* Slightly soften clickable UI interactions */
a,
button,
.work-card,
.quiet-link,
.rail-dot{
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

/* Project/card hover */
.work-card a:hover .work-image,
.dual-panel a:hover + .feature-image{
  transform:translateY(-2px);
}
.work-card a:hover{
  opacity:.92;
}

/* Animate the image containers themselves very subtly */
.work-image,
.feature-image,
.about-image{
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    opacity 180ms ease;
}

/* Keep fades instant for users who prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  body::before,
  a,
  button,
  .work-card,
  .quiet-link,
  .rail-dot,
  .work-image,
  .feature-image,
  .about-image{
    transition:none !important;
  }
}


/* =========================================================
   V2.5 — PAGE 05 IS THE FULL ABOUT DESTINATION
   ========================================================= */

.about-copy-expanded{
  max-width:520px;
  align-self:center;
}
.about-copy-expanded .about-lede{
  font-size:14px;
  line-height:1.55;
  color:#20201e;
  max-width:430px;
  margin-bottom:20px;
}
.about-copy-expanded > p:not(.about-lede){
  font-size:10px;
  line-height:1.7;
  color:#575752;
  max-width:460px;
}
.about-timeline{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:28px 0 28px;
  max-width:500px;
}
.about-timeline span{
  font-size:8px;
  letter-spacing:.04em;
  color:#555550;
}
.about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

@media (max-width:720px){
  .about-copy-expanded{
    max-width:none;
  }
  .about-copy-expanded .about-lede{
    font-size:15px;
    max-width:none;
  }
  .about-copy-expanded > p:not(.about-lede){
    font-size:12px;
    max-width:none;
  }
  .about-actions{
    gap:18px;
  }
  .about-timeline{
    gap:9px 12px;
  }
  .about-timeline span{
    font-size:9px;
  }
}


/* =========================================================
   V2.6 — PAGE 04 IS THE FULL CREDITS DESTINATION
   ========================================================= */

.credits-note{
  margin-top:24px;
  max-width:420px;
  font-size:8px;
  line-height:1.55;
  color:#6b6b66;
}

@media (max-width:720px){
  .credits-note{
    font-size:10px;
    max-width:none;
  }
}


/* =========================================================
   V2.7 — ORGANIZED ABOUT PANEL
   ========================================================= */

#about.about-panel{
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr) minmax(210px,280px) !important;
  gap:34px !important;
  align-items:center !important;
  padding:82px 6vw 62px !important;
}

.about-section-number{
  align-self:start;
}

.about-main{
  min-width:0;
  align-self:center;
}

.about-heading{
  margin-bottom:34px;
}

.about-kicker,
.about-label{
  margin:0 0 10px;
  font-size:8px;
  letter-spacing:.08em;
  color:#6a6a65;
}

.about-heading h2{
  margin:0;
  font-size:clamp(28px,3.8vw,52px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:300;
  color:#171715;
}

.about-dot{
  display:inline-block;
  width:.14em;
  height:.14em;
  min-width:6px;
  min-height:6px;
  border-radius:50%;
  background:var(--orange);
  margin-left:.08em;
  transform:translateY(-.04em);
}

.about-body-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  max-width:700px;
  padding-top:24px;
  border-top:1px solid #c9c6bf;
}

.about-body-block p:last-child{
  margin:0;
  font-size:10px;
  line-height:1.72;
  color:#4f4f4a;
}

.about-career{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid #c9c6bf;
  max-width:760px;
}

.about-career-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px 16px;
}

.about-career-row span{
  font-size:8px;
  letter-spacing:.045em;
  color:#4c4c47;
  position:relative;
}

.about-career-row span:not(:last-child)::after{
  content:"→";
  margin-left:16px;
  color:#8a8a84;
}

.about-actions{
  margin-top:32px;
  display:flex;
  gap:26px;
  flex-wrap:wrap;
}

.about-side{
  align-self:center;
}

.about-image{
  width:100%;
  aspect-ratio:4/5;
}

.about-side-note{
  margin:13px 0 0;
  font-size:7.5px;
  line-height:1.55;
  letter-spacing:.035em;
  color:#686863;
}

/* tablet */
@media (min-width:721px) and (max-width:960px){
  #about.about-panel{
    grid-template-columns:58px minmax(0,1fr) 180px !important;
    gap:24px !important;
    padding-left:32px !important;
    padding-right:32px !important;
  }

  .about-body-grid{
    gap:24px;
  }

  .about-heading h2{
    font-size:clamp(30px,4.5vw,44px);
  }
}

/* mobile */
@media (max-width:720px){
  #about.about-panel{
    display:block !important;
    padding:36px 20px 46px !important;
  }

  .about-section-number{
    margin-bottom:28px;
  }

  .about-heading{
    margin-bottom:26px;
  }

  .about-heading h2{
    font-size:clamp(34px,10vw,52px);
  }

  .about-body-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .about-body-block p:last-child{
    font-size:12px;
  }

  .about-career-row{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .about-career-row span{
    font-size:9px;
  }

  .about-career-row span:not(:last-child)::after{
    content:"";
    margin:0;
  }

  .about-side{
    margin-top:34px;
  }

  .about-image{
    aspect-ratio:16/11;
  }

  .about-side-note{
    font-size:8px;
  }
}




/* =========================================================
   V3.0 — SMOOTH NAV MOTION + TRUE CIRCULAR RIPPLE
   ========================================================= */

/* The real navigation dots are always outline targets.
   A separate orange indicator floats above them and moves between positions. */
.rail-dot,
.mobile-progress-dots i{
  background:transparent !important;
}

/* Prevent the old active classes from filling the actual outline target. */
.rail-dot.is-active,
.mobile-progress-dots i.active{
  background:transparent !important;
  border-color:#cfcfca !important;
}

/* During the intro, unrevealed targets are temporarily hidden. */
body.nav-intro-v30 .rail-dot:not(.nav-drawn),
body.nav-intro-v30 .mobile-progress-dots i:not(.nav-drawn){
  border-color:transparent !important;
}

/* Drawn outline target */
.rail-dot.nav-drawn,
.mobile-progress-dots i.nav-drawn{
  border-color:#cfcfca !important;
}

.nav-trace-ring,
  .nav-ripple-ring{
    display:none !important;
  }
}










/* =========================================================
   V3.5 — INDICATORS ANCHORED INSIDE THEIR DOT ROWS
   ========================================================= */

/* Static outline targets */
.rail-dot,
.rail-dot.is-active,
.mobile-progress-dots i,
.mobile-progress-dots i.active{
  background:transparent !important;
  border-color:#cfcfca !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Intro only: temporarily hide unrevealed outlines. */
body.nav-intro-v35 .rail-dot,
body.nav-intro-v35 .mobile-progress-dots i{
  opacity:0 !important;
  transform:scale(.9) !important;
}
body.nav-intro-v35 .rail-dot.nav-drawn,
body.nav-intro-v35 .mobile-progress-dots i.nav-drawn{
  opacity:1 !important;
  transform:scale(1) !important;
  transition:opacity 115ms ease, transform 115ms cubic-bezier(.2,.8,.2,1) !important;
}

/* Both indicators now live INSIDE their respective dot containers.
   This prevents any viewport-coordinate drift during scroll/snap. */
.rail-dots,
.mobile-progress-dots{
  position:relative !important;
}

.desktop-nav-indicator,
.mobile-nav-indicator{
  position:absolute;
  left:50%;
  top:0;
  border-radius:50%;
  background:var(--orange);
  pointer-events:none;
  opacity:0;
  z-index:10;
  transform:translate(-50%,-50%) scale(.82);
  transition:
    top 175ms cubic-bezier(.22,.75,.22,1),
    left 175ms cubic-bezier(.22,.75,.22,1),
    opacity 110ms ease,
    transform 110ms cubic-bezier(.22,.75,.22,1);
}

.desktop-nav-indicator{
  width:8px;
  height:8px;
}

.mobile-nav-indicator{
  width:7px;
  height:7px;
}

.desktop-nav-indicator.is-visible,
.mobile-nav-indicator.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* Larger, easier-to-use mobile control */
.mobile-progress{
  min-height:44px;
  padding:10px 16px !important;
  gap:12px !important;
  border-radius:28px !important;
}

.mobile-progress-dots{
  display:flex !important;
  align-items:center;
  gap:12px !important;
}

.mobile-progress-dots i{
  width:9px !important;
  height:9px !important;
  min-width:9px;
  min-height:9px;
  cursor:pointer;
  touch-action:manipulation;
  position:relative;
}

/* Invisible larger tap target around each tiny visual dot */
.mobile-progress-dots i::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
}

.mobile-progress-dots i:focus-visible{
  outline:1px solid var(--orange);
  outline-offset:6px;
}

#mobileSectionNumber{
  min-width:20px;
  text-align:center;
  font-size:9px;
}

/* Desktop only / mobile only */
@media (max-width:720px){
  .desktop-nav-indicator{display:none !important;}
}
@media (min-width:721px){
  .mobile-nav-indicator{display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  .desktop-nav-indicator,
  .mobile-nav-indicator{
    transition:none !important;
  }
}


/* =========================================================
   V3.6 — ADAPTIVE NAV CONTRAST
   ========================================================= */

/* Default: medium outline for light/neutral panels. */
.rail-dot,
.rail-dot.is-active,
.mobile-progress-dots i,
.mobile-progress-dots i.active{
  border-color:rgba(30,30,28,.42) !important;
  transition:
    border-color 220ms ease,
    opacity 115ms ease,
    transform 115ms cubic-bezier(.2,.8,.2,1) !important;
}

/* When the current panel is dark, invert the outlines to light. */
body.nav-on-dark .rail-dot,
body.nav-on-dark .rail-dot.is-active,
body.nav-on-dark .mobile-progress-dots i,
body.nav-on-dark .mobile-progress-dots i.active{
  border-color:rgba(255,255,255,.68) !important;
}

/* On very light/white panels use a darker outline for visibility. */
body.nav-on-light .rail-dot,
body.nav-on-light .rail-dot.is-active,
body.nav-on-light .mobile-progress-dots i,
body.nav-on-light .mobile-progress-dots i.active{
  border-color:rgba(25,25,23,.48) !important;
}

/* Intro still hides unrevealed circles regardless of panel color. */
body.nav-intro-v35 .rail-dot:not(.nav-drawn),
body.nav-intro-v35 .mobile-progress-dots i:not(.nav-drawn){
  opacity:0 !important;
}

/* Orange stays orange on every background. */
.desktop-nav-indicator,
.mobile-nav-indicator{
  background:var(--orange) !important;
}


/* =========================================================
   V3.7 — KEEP DESKTOP RAIL OUTSIDE FRAME + REMOVE X-LAG
   ========================================================= */

/*
  JS now positions the entire desktop rail from the actual .page-frame
  right edge. This overrides older breakpoint rules such as right:10px.
*/
.section-rail{
  right:auto !important;
  left:var(--rail-x, calc(100vw - 8px)) !important;
  transform:translate(-50%,-50%) !important;
}

/*
  The desktop orange indicator is locked to the horizontal center of the
  vertical dot row. It only animates vertically, so resizing the browser
  cannot create a delayed sideways "catch-up" motion.
*/
.desktop-nav-indicator{
  left:50% !important;
  transition:
    top 175ms cubic-bezier(.22,.75,.22,1),
    opacity 110ms ease,
    transform 110ms cubic-bezier(.22,.75,.22,1) !important;
}

/* On desktop the rail itself never transitions while resizing. */
.section-rail,
.rail-dots{
  transition:none !important;
}

/*
  As available outside gutter shrinks, the rail moves closer to the frame
  edge but remains outside it. Mobile takes over below 720px.
*/
@media (min-width:721px){
  .section-rail{
    display:block !important;
  }
}


/* =========================================================
   V3.8 — RAIL ALIGNMENT + GUARANTEED OUTSIDE GUTTER
   ========================================================= */

/*
  Reserve a permanent right/left gutter on desktop so the rail
  can always sit outside the bordered canvas and remain visible.
*/
@media (min-width:721px){
  .page-frame{
    width:min(1180px, calc(100% - 96px)) !important;
  }
}

/* Mobile remains edge-to-edge. */
@media (max-width:720px){
  .page-frame{
    width:100% !important;
  }
}

/*
  The vertical line and the dot stack now share the exact same
  horizontal center inside .section-rail.
*/
.section-rail{
  width:30px !important;
}

.rail-rule{
  left:50% !important;
  transform:translateX(-50%) !important;
}

.rail-dots{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:10px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:19px !important;
  z-index:5 !important;
  pointer-events:auto !important;
}

/* Every desktop outline is centered exactly on the vertical rule. */
.rail-dot,
.rail-dot.is-active{
  flex:0 0 auto !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.68) !important;
  background:transparent !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
}

/*
  The rail always lives outside the dark bordered canvas now,
  so adaptive inversion is no longer needed.
*/
body.nav-on-light .rail-dot,
body.nav-on-light .rail-dot.is-active,
body.nav-on-dark .rail-dot,
body.nav-on-dark .rail-dot.is-active{
  border-color:rgba(255,255,255,.68) !important;
}

/* Orange indicator stays centered on the dot column. */
.desktop-nav-indicator{
  left:50% !important;
}

/*
  Give the outside rail enough breathing room from both the
  frame border and viewport edge at every desktop width.
*/
@media (min-width:721px){
  .section-rail{
    --rail-safe-gap:18px;
  }
}


/* =========================================================
   V3.9 — MOBILE OUTLINES + PROGRAMMATIC NAV LOCK
   ========================================================= */

/* Force both desktop and mobile outline circles to always be visible post-intro. */
.rail-dot,
.rail-dot.is-active,
.mobile-progress-dots i,
.mobile-progress-dots i.active{
  opacity:1 !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.68) !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
}

/* Mobile visual dots: slightly larger, consistent outlines. */
@media (max-width:720px){
  .mobile-progress-dots i,
  .mobile-progress-dots i.active{
    width:9px !important;
    height:9px !important;
    min-width:9px !important;
    min-height:9px !important;
    border:1px solid rgba(255,255,255,.72) !important;
    opacity:1 !important;
  }
}

/* Intro still controls visibility while it is actually running. */
body.nav-intro-v35 .rail-dot:not(.nav-drawn),
body.nav-intro-v35 .mobile-progress-dots i:not(.nav-drawn){
  opacity:0 !important;
}
body.nav-intro-v35 .rail-dot.nav-drawn,
body.nav-intro-v35 .mobile-progress-dots i.nav-drawn{
  opacity:1 !important;
}

/*
  During a click-driven page jump, the orange indicator should move once
  directly to the selected target and stay there. No intermediate observer
  updates are allowed to pull it toward sections passed during the scroll.
*/
body.nav-programmatic-lock .desktop-nav-indicator,
body.nav-programmatic-lock .mobile-nav-indicator{
  transition-duration:420ms !important;
  transition-timing-function:cubic-bezier(.22,.75,.22,1) !important;
}


/* =========================================================
   V4.0 — CLICKABLE PROJECT / FEATURE IMAGES
   ========================================================= */

/* Page 02 work images are already inside each project link.
   Make the image region read clearly as interactive. */
.work-card a{
  cursor:pointer;
}

.work-card a .work-image{
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    opacity 180ms ease;
}

.work-card a:hover .work-image,
.work-card a:focus-visible .work-image{
  transform:translateY(-3px);
  opacity:.94;
}

/* Page 03 image areas now link to the same destinations as their text CTAs. */
.feature-image-link{
  display:block;
  cursor:pointer;
  min-width:0;
}

.feature-image-link .feature-image{
  width:100%;
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    opacity 180ms ease;
}

.feature-image-link:hover .feature-image,
.feature-image-link:focus-visible .feature-image{
  transform:translateY(-3px);
  opacity:.94;
}

.feature-image-link:focus-visible{
  outline:1px solid var(--orange);
  outline-offset:5px;
}

@media (prefers-reduced-motion:reduce){
  .work-card a .work-image,
  .feature-image-link .feature-image{
    transition:none !important;
  }
}


/* =========================================================
   V4.1 — PAGE 03: AI / PERSONAL / COLLABORATION
   ========================================================= */

#ai.page03-section{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:stretch !important;
  padding:74px var(--pad) 34px !important;
  gap:0 !important;
}

.page03-panel{
  min-width:0;
  display:grid;
  grid-template-rows:auto auto 1fr;
  align-content:start;
  padding:26px 26px 24px;
  border-right:1px solid var(--line);
}

.page03-panel:first-child{
  padding-left:0;
}

.page03-panel:last-child{
  border-right:0;
  padding-right:0;
}

.page03-number{
  font-size:9px;
  color:#c6c6c1;
  margin-bottom:24px;
}

.page03-copy{
  min-height:165px;
}

.page03-copy h2{
  margin:0 0 15px;
  font-size:14px;
  font-weight:400;
}

.page03-copy p{
  margin:0 0 22px;
  max-width:300px;
  font-size:10px;
  line-height:1.65;
  color:#bcbcb7;
}

.page03-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.page03-image-link{
  display:block;
  align-self:end;
  margin-top:24px;
}

.page03-image{
  width:100%;
  aspect-ratio:4/3;
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    opacity 180ms ease;
}

.page03-image-link:hover .page03-image,
.page03-image-link:focus-visible .page03-image{
  transform:translateY(-3px);
  opacity:.94;
}

.k-instagram-link{
  opacity:.82;
}
.k-instagram-link:hover{
  opacity:1;
}

/* Personal Work page */
.personal-page{
  padding:80px 5vw 90px;
}

.personal-page-heading{
  max-width:760px;
  margin-bottom:56px;
}

.personal-kicker{
  margin:0 0 14px;
  font-size:9px;
  color:#8d8d88;
  letter-spacing:.08em;
}

.personal-page-heading h1{
  margin:0 0 22px;
  font-size:clamp(48px,7vw,92px);
  line-height:.95;
  font-weight:300;
  letter-spacing:-.045em;
}

.personal-page-heading > p:last-child{
  max-width:560px;
  color:#bdbdb8;
  font-size:12px;
  line-height:1.7;
}

.personal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:42px 18px;
  padding-top:28px;
  border-top:1px solid var(--line);
}

.personal-card{
  display:block;
}

.personal-thumb{
  aspect-ratio:16/10;
  transition:transform 220ms cubic-bezier(.2,.7,.2,1), opacity 180ms ease;
}

.personal-card:hover .personal-thumb{
  transform:translateY(-3px);
  opacity:.94;
}

.personal-card h2{
  margin:13px 0 5px;
  font-size:11px;
  font-weight:500;
}

.personal-card p{
  margin:0;
  font-size:9px;
  color:#8e8e89;
}

/* Tablet */
@media (min-width:721px) and (max-width:960px){
  #ai.page03-section{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .page03-panel{
    padding-left:18px;
    padding-right:18px;
  }

  .page03-copy{
    min-height:190px;
  }

  .page03-copy p{
    font-size:9.5px;
  }
}

/* Mobile */
@media (max-width:720px){
  #ai.page03-section{
    display:block !important;
    padding:0 20px !important;
  }

  .page03-panel,
  .page03-panel:first-child,
  .page03-panel:last-child{
    padding:32px 0 !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line);
  }

  .page03-panel:last-child{
    border-bottom:0;
  }

  .page03-number{
    margin-bottom:18px;
  }

  .page03-copy{
    min-height:0;
  }

  .page03-copy h2{
    font-size:16px;
  }

  .page03-copy p{
    font-size:12px;
    max-width:440px;
  }

  .page03-image{
    aspect-ratio:16/10;
  }

  .personal-page{
    padding:72px 20px 70px;
  }

  .personal-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4.2 — PAGE 03 IMAGE FRAME ALIGNMENT
   Keep all three image frames visually identical.
   ========================================================= */

#ai.page03-section{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.page03-panel{
  grid-template-rows:auto 190px 1fr !important;
}

/* Same image footprint for AI / R&D, Personal Work, Collaboration */
.page03-image-link{
  width:100% !important;
  margin-top:24px !important;
  align-self:end !important;
}

.page03-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4 / 3 !important;
  box-sizing:border-box !important;
}

/* Remove any inherited sizing difference on the middle card */
.page03-panel:nth-child(2) .page03-image-link,
.page03-panel:nth-child(2) .page03-image{
  width:100% !important;
  max-width:none !important;
}

/* Give every column the same horizontal image inset */
.page03-panel{
  padding-left:32px !important;
  padding-right:32px !important;
}
.page03-panel:first-child{
  padding-left:0 !important;
}
.page03-panel:last-child{
  padding-right:0 !important;
}

/* Mobile keeps full-width stacked imagery */
@media (max-width:720px){
  .page03-panel,
  .page03-panel:first-child,
  .page03-panel:last-child{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .page03-panel{
    grid-template-rows:auto auto auto !important;
  }

  .page03-image{
    width:100% !important;
    aspect-ratio:16 / 10 !important;
  }
}


/* =========================================================
   V4.3 — COLLABORATION DETAIL PAGE
   ========================================================= */

.collaboration-page{
  padding:78px 5vw 90px;
}

.collaboration-hero{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:38px;
  align-items:start;
  padding-bottom:52px;
}

.collaboration-index{
  padding-top:9px;
  font-size:9px;
  color:#8e8e89;
  letter-spacing:.06em;
}

.collaboration-heading{
  max-width:760px;
}

.collaboration-heading h1{
  margin:0 0 24px;
  font-size:clamp(42px,6vw,82px);
  line-height:.96;
  font-weight:300;
  letter-spacing:-.045em;
}

.collaboration-heading p{
  max-width:620px;
  margin:0;
  font-size:12px;
  line-height:1.75;
  color:#bdbdb8;
}

.collaboration-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
  padding-top:10px;
  min-width:110px;
}

.collaboration-links a{
  font-size:9px;
  letter-spacing:.03em;
  transition:opacity 160ms ease;
}

.collaboration-links a:hover{
  opacity:.65;
}

.collaboration-credit{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:32px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.collaboration-credit div{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.collaboration-credit span{
  font-size:8px;
  color:#777772;
}

.collaboration-credit strong{
  font-size:10px;
  font-weight:400;
}

.collaboration-project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding-top:42px;
}

.collaboration-project-image{
  width:100%;
  aspect-ratio:4/3;
}

.collaboration-project-meta{
  padding-top:13px;
}

.collaboration-project-meta h2{
  margin:0 0 6px;
  font-size:11px;
  font-weight:500;
}

.collaboration-project-meta p{
  margin:0;
  font-size:9px;
  color:#8e8e89;
}

/* Placeholder IG remains visually normal; replace href="#" later. */
.instagram-placeholder{
  opacity:.8;
}

@media (max-width:720px){
  .collaboration-page{
    padding:72px 20px 70px;
  }

  .collaboration-hero{
    display:block;
    padding-bottom:36px;
  }

  .collaboration-index{
    margin-bottom:24px;
  }

  .collaboration-heading h1{
    font-size:clamp(42px,13vw,68px);
  }

  .collaboration-heading p{
    font-size:12px;
  }

  .collaboration-links{
    flex-direction:row;
    gap:24px;
    padding-top:28px;
  }

  .collaboration-credit{
    grid-template-columns:1fr;
    gap:20px;
  }

  .collaboration-project-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .collaboration-project-image{
    aspect-ratio:16/10;
  }
}


/* =========================================================
   V4.4 — PAGE 03 EXACT IMAGE SIZING
   All three frames use one identical height and bottom baseline.
   ========================================================= */

@media (min-width:721px){

  #ai.page03-section{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }

  .page03-panel,
  .page03-panel:first-child,
  .page03-panel:last-child{
    /* Equal horizontal inset in every column. */
    padding-left:32px !important;
    padding-right:32px !important;

    /* Explicit row layout: number / copy / flexible gap / image */
    display:grid !important;
    grid-template-rows:auto auto 1fr auto !important;
    min-width:0 !important;
  }

  /* All image links occupy the same available column width. */
  .page03-image-link,
  .page03-panel:nth-child(1) .page03-image-link,
  .page03-panel:nth-child(2) .page03-image-link,
  .page03-panel:nth-child(3) .page03-image-link{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:24px 0 0 !important;
    align-self:end !important;
  }

  /*
    Do NOT use aspect-ratio here. The prior mismatch was coming from
    different effective widths/inherited sizing. Give every placeholder
    the exact same physical height instead.
  */
  .page03-image,
  .page03-panel:nth-child(1) .page03-image,
  .page03-panel:nth-child(2) .page03-image,
  .page03-panel:nth-child(3) .page03-image{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:clamp(230px, 30vh, 320px) !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
}

/* Preserve the existing full-width mobile treatment. */
@media (max-width:720px){
  .page03-image-link{
    width:100% !important;
  }

  .page03-image{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16/10 !important;
  }
}

/* V4.5 — Site colophon */
#about{position:relative;}
.site-colophon{
  position:absolute; left:32px; bottom:20px;
  display:flex; align-items:center; gap:8px;
  font-size:8px; line-height:1; letter-spacing:.045em;
  color:#777772; white-space:nowrap;
}
.site-colophon a{color:inherit; transition:color 160ms ease;}
.site-colophon a:hover,.site-colophon a:focus-visible{color:var(--orange);}
.site-colophon .external-arrow{display:inline-block; margin-left:2px; font-size:.9em;}
.site-colophon-divider{opacity:.45;}
@media (max-width:720px){
  .site-colophon{
    position:static; margin-top:34px; padding-top:18px;
    border-top:1px solid var(--line); flex-wrap:wrap; white-space:normal;
  }
}




/* =========================================================
   V4.9 — TRUE 04 / 05 SIBLINGS + MOBILE TRANSFORM PAGER
   ========================================================= */

#credits.light-section{
  min-height:100svh !important;
  height:100svh !important;
  display:block !important;
  background:var(--light) !important;
}

#credits .credits-panel{
  min-height:100svh !important;
  height:100svh !important;
  border-bottom:0 !important;
}

#about.about-panel{
  min-height:100svh !important;
  height:100svh !important;
  background:var(--light) !important;
  color:var(--dark) !important;
  scroll-snap-align:start;
}

@media (max-width:720px){
  html, body{
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  body.mobile-pager-v49 main{
    position:relative !important;
    width:100vw !important;
    height:100dvh !important;
    overflow:hidden !important;
    display:block !important;
    touch-action:pan-y;
  }

  .mobile-page-track-v49{
    position:absolute;
    left:0;
    top:0;
    height:100dvh;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    will-change:transform;
    transform:translate3d(0,0,0);
  }

  .mobile-page-v49{
    flex:0 0 100vw !important;
    width:100vw !important;
    min-width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box !important;
    scroll-snap-align:none !important;
  }

  body.mobile-pager-v49 .site-header{
    position:fixed !important;
    top:0; left:0; right:0;
    z-index:1000;
  }

  body.mobile-pager-v49 #intro,
  body.mobile-pager-v49 #work,
  body.mobile-pager-v49 #ai,
  body.mobile-pager-v49 #credits,
  body.mobile-pager-v49 #about{
    padding-top:max(76px, env(safe-area-inset-top)) !important;
    padding-bottom:max(88px, calc(env(safe-area-inset-bottom) + 70px)) !important;
  }

  body.mobile-pager-v49 #credits,
  body.mobile-pager-v49 #about{
    min-height:100dvh !important;
    height:100dvh !important;
  }

  body.mobile-pager-v49 #credits .credits-panel{
    min-height:auto !important;
    height:auto !important;
    padding-top:0 !important;
  }

  body.mobile-pager-v49 #ai .page03-panel{
    padding-top:0 !important;
  }

  body.mobile-pager-v49 .mobile-progress{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:max(14px, env(safe-area-inset-bottom)) !important;
    transform:translateX(-50%) !important;
    z-index:10030 !important;
    min-height:48px !important;
    padding:11px 18px !important;
    border-radius:28px !important;
  }

  body.mobile-pager-v49 .mobile-progress-dots{
    gap:15px !important;
  }

  body.mobile-pager-v49 .mobile-progress-dots i{
    width:10px !important;
    height:10px !important;
    min-width:10px !important;
    min-height:10px !important;
  }

  .mobile-pull-cue-v49{
    position:fixed;
    left:50%;
    top:max(72px, calc(env(safe-area-inset-top) + 56px));
    transform:translateX(-50%) translateY(-6px);
    z-index:10050;
    opacity:0;
    pointer-events:none;
    font-size:8px;
    letter-spacing:.065em;
    color:#d7d7d2;
    transition:opacity 90ms ease, transform 90ms ease, color 90ms ease;
  }

  body.mobile-pull-v49 .mobile-pull-cue-v49{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  body.mobile-pull-ready-v49 .mobile-pull-cue-v49{
    color:var(--orange);
  }
}


/* =========================================================
   V4.10 — MOBILE EXPLORE WORK ARROW
   Desktop keeps ↓ because the experience moves vertically.
   Mobile uses → because the experience pages horizontally.
   ========================================================= */

.mobile-arrow{
  display:none;
}

@media (max-width:720px){
  .explore-work-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
  }

  .explore-work-link .desktop-arrow{
    display:none;
  }

  .explore-work-link .mobile-arrow{
    display:inline-block;
    font-size:1.55em;
    line-height:.7;
    font-weight:300;
    transform:translateY(-.02em);
  }
}


/* =========================================================
   V4.11 — WEBSITE CLEANUP / RESUME / PAGE 02 SQUARE IMAGES
   ========================================================= */

/* Page 02: all featured work image frames are true squares. */
.work-card .work-image,
.work-image{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  box-sizing:border-box !important;
}

/* If a real IMG is placed inside the frame later, crop consistently. */
.work-image img,
img.work-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}

/* Resume landing page */
.resume-page-frame{
  min-height:100vh;
}

.resume-landing{
  min-height:calc(100vh - 70px);
  padding:88px 5vw 64px;
  box-sizing:border-box;
}

.resume-kicker{
  margin-bottom:28px;
  font-size:9px;
  letter-spacing:.07em;
  color:#777772;
}

.resume-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:end;
}

.resume-title-row h1{
  margin:0;
  font-size:clamp(58px,8.2vw,118px);
  line-height:.88;
  font-weight:300;
  letter-spacing:-.055em;
}

.resume-role{
  margin:18px 0 0;
  font-size:10px;
  letter-spacing:.03em;
  color:#a7a7a1;
}

.resume-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  padding-bottom:3px;
  font-size:9px;
  color:#8a8a85;
}

.resume-contact a{
  color:inherit;
}

.resume-contact a:hover{
  color:var(--orange);
}

.resume-rule{
  position:relative;
  height:1px;
  margin:38px 0 34px;
  background:var(--line);
}

.resume-rule span{
  position:absolute;
  right:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  transform:translateY(-50%);
}

.resume-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:50px;
  align-items:start;
  margin-bottom:54px;
}

.resume-intro-copy{
  max-width:570px;
}

.resume-intro-copy p{
  margin:0;
  color:#bcbcb7;
  font-size:12px;
  line-height:1.75;
}

.resume-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  min-width:150px;
}

.resume-actions a{
  font-size:9px;
  letter-spacing:.025em;
}

.resume-primary-link{
  color:#f0f0ec;
}

.resume-primary-link:hover,
.resume-secondary-link:hover{
  color:var(--orange);
}

.resume-secondary-link{
  color:#858580;
}

.resume-preview{
  position:relative;
  display:grid;
  grid-template-columns:130px 1fr;
  gap:30px;
  align-items:end;
  min-height:190px;
  padding:30px 32px;
  border:1px solid var(--line);
  box-sizing:border-box;
  transition:border-color 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
}

.resume-preview:hover{
  border-color:#686863;
  transform:translateY(-2px);
}

.resume-preview > a{
  position:absolute;
  inset:0;
  z-index:2;
}

.resume-preview-label{
  font-size:8px;
  color:#777772;
  letter-spacing:.05em;
}

.resume-preview-copy{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.resume-preview-copy span:first-child{
  font-size:clamp(28px,4vw,54px);
  font-weight:300;
  letter-spacing:-.04em;
}

.resume-preview-copy span:last-child{
  font-size:9px;
  color:#8c8c87;
}

@media (max-width:720px){
  .resume-landing{
    padding:88px 20px 70px;
  }

  .resume-title-row{
    display:block;
  }

  .resume-title-row h1{
    font-size:clamp(54px,17vw,86px);
  }

  .resume-contact{
    align-items:flex-start;
    margin-top:28px;
  }

  .resume-intro-grid{
    display:block;
  }

  .resume-actions{
    margin-top:28px;
    flex-direction:row;
    flex-wrap:wrap;
    gap:20px;
  }

  .resume-preview{
    grid-template-columns:1fr;
    min-height:180px;
  }
}


/* =========================================================
   V4.12 — EMBEDDED RESUME PDF PREVIEW
   ========================================================= */

.resume-pdf-shell{
  display:block !important;
  min-height:0 !important;
  padding:18px !important;
  border:1px solid var(--line);
  background:#1a1a1a;
  transform:none !important;
}

.resume-pdf-shell:hover{
  transform:none !important;
  border-color:#686863;
}

.resume-pdf-shell .resume-preview-label{
  margin-bottom:12px;
}

.resume-pdf-link{
  display:block;
  width:min(100%, 760px);
  margin:0 auto;
  aspect-ratio:8.5 / 11;
  background:#fff;
  overflow:hidden;
  position:relative;
}

.resume-pdf-object{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
  pointer-events:none;
}

.resume-pdf-fallback{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-sizing:border-box;
  padding:34px;
  color:#171717;
  background:#f6f5f1;
}

.resume-pdf-fallback div{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.resume-pdf-fallback span:first-child{
  font-size:clamp(30px,5vw,58px);
  font-weight:300;
  letter-spacing:-.045em;
}

.resume-pdf-fallback span:last-child{
  font-size:9px;
  color:#666;
}

.resume-pdf-fallback strong{
  font-size:9px;
  font-weight:500;
  letter-spacing:.04em;
  color:#e85d24;
}

/* Mobile browsers often handle embedded PDFs inconsistently.
   Keep the preview legible and click-through to the full PDF. */
@media (max-width:720px){
  .resume-pdf-shell{
    padding:10px !important;
  }

  .resume-pdf-link{
    width:100%;
    aspect-ratio:8.5 / 11;
  }

  .resume-pdf-object{
    min-height:560px;
  }
}


/* =========================================================
   V4.13 — CLEAN RESUME IMAGE PREVIEW
   Avoids browser PDF toolbars/UI while keeping the real PDF
   as the view/download document.
   ========================================================= */

.resume-image-shell{
  display:block !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  transform:none !important;
}

.resume-image-shell:hover{
  transform:none !important;
  border:0 !important;
}

.resume-image-shell .resume-preview-label{
  margin:0 0 12px;
  font-size:8px;
  letter-spacing:.06em;
  color:#777772;
}

.resume-image-link{
  position:relative;
  display:block;
  width:min(100%, 760px);
  margin:0 auto;
  background:#fff;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
  overflow:hidden;
}

.resume-image-preview{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:8.5 / 11;
  object-fit:cover;
  background:#fff;
}

.resume-image-open{
  position:absolute;
  right:18px;
  bottom:18px;
  padding:9px 11px 8px;
  background:rgba(10,10,10,.86);
  color:#f3f3ef;
  font-size:8px;
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(5px);
  transition:opacity 160ms ease, transform 180ms cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.resume-image-link:hover .resume-image-open,
.resume-image-link:focus-visible .resume-image-open{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:720px){
  .resume-image-link{
    width:100%;
    box-shadow:0 10px 26px rgba(0,0,0,.24);
  }

  .resume-image-open{
    opacity:1;
    transform:none;
    right:10px;
    bottom:10px;
    font-size:7px;
  }
}


/* V4.14 — keep resume preview footprint even before image finishes loading */
.resume-image-link{
  aspect-ratio:8.5 / 11 !important;
}

.resume-image-preview{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}


/* =========================================================
   V4.15 — RESUME FRAME + MOBILE HEADER MENU
   ========================================================= */

/* Resume page frame must grow with the entire portrait resume preview.
   This keeps the outer portfolio border around ALL resume content. */
.resume-page-frame{
  min-height:calc(100vh - 42px) !important;
  height:auto !important;
  overflow:visible !important;
  display:flow-root;
}

.resume-page-frame .resume-landing{
  height:auto !important;
  min-height:calc(100vh - 76px) !important;
}

/* Make sure the resume preview remains part of normal document flow. */
.resume-image-shell,
.resume-image-link{
  position:relative !important;
}

.resume-image-link{
  display:block !important;
  width:min(100%, 760px) !important;
  aspect-ratio:8.5 / 11 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ---------------------------------------------------------
   MOBILE HEADER MENU
   When opened, DAE-HAN YI fades out and the four nav items
   occupy the same top header in one horizontal row.
   No full-screen vertical overlay.
   --------------------------------------------------------- */
@media (max-width:720px){

  .site-header{
    overflow:visible;
  }

  .site-header .brand{
    transition:opacity 160ms ease, visibility 160ms ease;
  }

  .site-header:has(.nav.open) .brand{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .site-header .nav{
    position:absolute !important;
    inset:0 50px 0 16px !important;
    height:64px !important;
    padding:0 !important;
    background:rgba(10,10,10,.97) !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(14px,4vw,24px) !important;
    font-size:9px !important;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .site-header .nav.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .site-header .nav a{
    flex:0 0 auto;
  }

  .menu-toggle{
    position:relative;
    z-index:70 !important;
    flex:0 0 34px;
  }

  /* Secondary / resume pages should scroll normally.
     The horizontal homepage pager's global overflow lock should not
     affect the resume page. */
  html:has(body.resume-page-body),
  body.resume-page-body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
  }

  body.resume-page-body .page-frame{
    min-height:100dvh !important;
    height:auto !important;
    overflow:visible !important;
  }

  body.resume-page-body .resume-landing{
    min-height:auto !important;
    height:auto !important;
    padding-bottom:52px !important;
  }

  body.resume-page-body .resume-image-link{
    width:100% !important;
  }
}


/* =========================================================
   V4.16 — SHARED PROJECT DETAIL PAGE SYSTEM
   All project-page layout/mobile rules live here so each
   individual project HTML only contains project content.
   ========================================================= */

html:has(body.project-detail-page) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}

body.project-detail-page {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

body.project-detail-page .page-frame {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

.project-page {
  padding: 70px 5vw 80px;
  max-width: 1180px;
  margin: auto;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

.project-page h1 {
  font-size: clamp(44px, 7vw, 92px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.045em;
  margin: 10px 0 26px;
}

.project-meta {
  color: #aaa;
  font-size: 12px;
  line-height: 1.7;
}

/* Project hero — preserves original image ratio. */
.project-hero {
  width: 100%;
  margin: 46px 0 0;
}

.project-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.media-context-note {
  margin: 10px 0 0;
  color: #777;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .01em;
}

/* Contribution / text rows. */
.project-copy {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  border-top: 1px solid #333;
  padding-top: 28px;
  margin-top: 55px;
}

.project-copy p {
  max-width: 720px;
  color: #ccc;
  line-height: 1.7;
  margin: 0;
}

.project-copy-full {
  display: block;
}

/* Development artwork — never crops presentation sheets. */
.artwork-section {
  margin-top: 55px;
}

.artwork-label {
  border-top: 1px solid #333;
  padding-top: 28px;
  margin-top: 55px;
  margin-bottom: 18px;
}

.artwork-label:first-child {
  margin-top: 0;
}

.project-artwork {
  width: 100%;
}

.project-artwork img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Production-context video. */
.context-note {
  max-width: 720px;
  margin-top: 10px !important;
  margin-bottom: 18px !important;
  color: #777 !important;
  font-size: 10px;
  line-height: 1.5;
}

.project-video-wrap {
  width: 100%;
  margin-top: 18px;
}

.project-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

/* Mobile project navigation dots are injected by main.js. */
.project-mobile-nav {
  display: none;
}

/* Small transition before moving between project pages. */
body.project-detail-page.project-is-leaving-left {
  opacity: 0;
  transform: translateX(-16px);
}

body.project-detail-page.project-is-leaving-right {
  opacity: 0;
  transform: translateX(16px);
}

body.project-detail-page {
  transition:
    opacity 150ms ease,
    transform 170ms cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 720px) {

  html:has(body.project-detail-page) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  body.project-detail-page {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    position: static !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    padding-bottom: 48px;
  }

  body.project-detail-page .page-frame {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .project-page {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 70px;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .project-copy {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .project-video {
    width: 100%;
  }

  .project-mobile-nav {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 15px;
    z-index: 120;
    background: rgba(10,10,10,.76);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-radius: 30px;
  }

  .project-mobile-dot {
    display: block;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid #8a8a84;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition:
      background 150ms ease,
      border-color 150ms ease,
      transform 150ms ease;
  }

  .project-mobile-dot.is-active {
    background: var(--orange, #e85d24);
    border-color: var(--orange, #e85d24);
    transform: scale(1.08);
  }
}


/* =========================================================
   V4.17 — PROJECT SWIPE-DOWN HOME TRANSITION
   ========================================================= */

body.project-detail-page.project-is-leaving-down {
  opacity: 0;
  transform: translateY(16px);
}


/* =========================================================
   V4.18 — SPRING PULL-TO-HOME
   ========================================================= */

body.project-detail-page {
  --project-pull-y: 0px;
  --project-pull-progress: 0;
}

.project-pull-home {
  display: none;
}

@media (max-width: 720px) {

  body.project-detail-page .page-frame {
    transform: translateY(var(--project-pull-y));
    transition:
      transform 420ms cubic-bezier(.22, 1.12, .34, 1);
    will-change: transform;
  }

  body.project-detail-page.project-pulling-home .page-frame {
    transition: none;
  }

  .project-pull-home {
    position: fixed;
    left: 50%;
    top: 14px;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    opacity: calc(var(--project-pull-progress) * 1);
    transform:
      translateX(-50%)
      translateY(calc(-10px + (var(--project-pull-progress) * 10px)));

    transition:
      opacity 130ms ease,
      transform 160ms ease;
  }

  .project-pull-home-text {
    padding: 8px 12px;
    border: 1px solid #555550;
    border-radius: 999px;
    background: rgba(10,10,10,.78);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    color: #aaa;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .08em;
    white-space: nowrap;

    transition:
      color 120ms ease,
      border-color 120ms ease,
      transform 120ms ease;
  }

  body.project-detail-page.project-pull-home-ready
  .project-pull-home-text {
    color: var(--orange, #e85d24);
    border-color: var(--orange, #e85d24);
    transform: scale(1.04);
  }

  body.project-detail-page.project-pull-home-released
  .page-frame {
    transition:
      transform 180ms cubic-bezier(.2,.8,.2,1),
      opacity 150ms ease;
    transform: translateY(22px);
    opacity: 0;
  }

  body.project-detail-page.project-is-leaving-down {
    opacity: 0;
    transform: translateY(16px);
  }
}


/* =========================================================
   V4.19 — PROJECT PULL CUE MATCHES MAIN PAGE
   ========================================================= */

@media (max-width: 720px) {

  .project-pull-home {
    top: max(72px, calc(env(safe-area-inset-top) + 56px)) !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .project-pull-home-text {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    color: #d7d7d2 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;

    transform: none !important;
    transition:
      color 90ms ease,
      opacity 90ms ease !important;
  }

  body.project-detail-page.project-pull-home-ready
  .project-pull-home-text {
    color: var(--orange, #e85d24) !important;
    transform: none !important;
  }
}


/* =========================================================
   V4.20 — ANDROID PROJECT SWIPE STABILITY
   ========================================================= */

@media (max-width: 720px) {
  body.project-detail-page {
    overscroll-behavior-x: none;
  }
}


/* =========================================================
   V4.21 — CROSS-PLATFORM PROJECT HISTORY STABILITY
   Project-to-project navigation replaces the current history entry,
   preventing browser back gestures from replaying the project chain.
   ========================================================= */


/* =========================================================
   V1.48 — DIRECT-BOUND MOBILE IMAGE PINCH
   ========================================================= */

html,
body,
.page-frame{
  overscroll-behavior-x:none;
}

img[data-pinch-zoom="true"]{
  touch-action:pan-y !important;
  will-change:transform;
  -webkit-user-drag:none;
  user-select:none;
}

img[data-pinch-zoom="true"].pinch-active{
  position:relative;
  z-index:1002 !important;
  transition:none !important;
}

img[data-pinch-zoom="true"].pinch-returning{
  position:relative;
  z-index:1002 !important;
  transition:transform .3s cubic-bezier(.22,.9,.32,1) !important;
}

.project-export-image.pinch-frame-active,
.generic-page-card-image.pinch-frame-active,
.pinch-image-frame.pinch-frame-active,
.personal-thumb.pinch-frame-active,
.collaboration-project-image.pinch-frame-active{
  overflow:visible !important;
  position:relative;
  z-index:1001 !important;
}


/* =========================================================
   V1.52 — MOBILE VERTICAL SCROLL RELIABILITY
   ========================================================= */

/*
  Detail images still receive the custom TWO-finger pinch listeners, but a
  ONE-finger drag on an image must remain normal vertical page scrolling.
*/
img[data-pinch-zoom="true"]{
  touch-action:pan-y !important;
}


/* =========================================================
   V1.53 — UNIFIED DETAIL MEDIA CONTAINERS
   ========================================================= */

/*
  Editor-generated area pages use these generic classes.
  Keep their container width/grid geometry aligned with project detail media.
*/
.generic-page-media-grid{
  display:grid;
  width:100%;
  max-width:1180px;
  gap:16px;
  margin-left:auto;
  margin-right:auto;
}

.generic-page-media-grid.grid-1{
  grid-template-columns:1fr;
}

.generic-page-media-grid.grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.generic-page-media-grid.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.generic-page-video-frame{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:720px){
  .generic-page-media-grid.grid-2,
  .generic-page-media-grid.grid-3{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V1.56 — TIGHTER CONTENT SPACING
   ========================================================= */

.generic-page-items{
  gap:18px;
}

.generic-page-card{
  margin-bottom:0;
}

.generic-page-card.has-description{
  margin-bottom:18px;
}

.generic-page-card-copy{
  margin-top:8px;
}

.generic-page-card.has-description .generic-page-card-copy{
  margin-top:12px;
}

.generic-page-card-copy:empty{
  display:none;
}

@media(max-width:720px){
  .generic-page-items{
    gap:16px;
  }

  .generic-page-card.has-description{
    margin-bottom:16px;
  }
}


/* =========================================================
   V1.57 — AI / R&D CONTENT COPY
   ========================================================= */

.ai-rd .generic-page-card-copy,
body.ai-rd .generic-page-card-copy{
  display:block;
}


/* =========================================================
   V1.58 — AREA PAGE / PROJECT PAGE VERTICAL SPACING PARITY
   ========================================================= */

.personal-work .generic-page-items,
.selected-collaboration .generic-page-items,
.ai-rd .generic-page-items,
body.personal-work .generic-page-items,
body.selected-collaboration .generic-page-items,
body.ai-rd .generic-page-items{
  gap:24px !important;
  row-gap:24px !important;
  padding-top:0 !important;
}

.personal-work .generic-page-card,
.selected-collaboration .generic-page-card,
.ai-rd .generic-page-card,
body.personal-work .generic-page-card,
body.selected-collaboration .generic-page-card,
body.ai-rd .generic-page-card,
.personal-work .generic-page-card.has-description,
.selected-collaboration .generic-page-card.has-description,
.ai-rd .generic-page-card.has-description,
body.personal-work .generic-page-card.has-description,
body.selected-collaboration .generic-page-card.has-description,
body.ai-rd .generic-page-card.has-description{
  margin-bottom:0 !important;
}

@media(max-width:720px){
  .personal-work .generic-page-items,
  .selected-collaboration .generic-page-items,
  .ai-rd .generic-page-items,
  body.personal-work .generic-page-items,
  body.selected-collaboration .generic-page-items,
  body.ai-rd .generic-page-items{
    gap:20px !important;
    row-gap:20px !important;
  }
}


/* =========================================================
   V1.59 — IMAGE DESCRIPTION TYPE PARITY
   ========================================================= */

.generic-page-card-copy h2{
  margin:0 0 6px;
  font-size:11px;
  font-weight:500;
  line-height:1.35;
  color:#d5d5d0;
}

.generic-page-card-copy,
.generic-page-card-copy p,
.generic-page-card-copy div{
  font-size:9px;
  line-height:1.4;
  color:#8e8e89;
}

/* Project image labels / image-context notes only. */
.project-export-label{
  font-size:11px !important;
  font-weight:500;
  line-height:1.35;
}

.project-export-note{
  font-size:9px !important;
  line-height:1.4 !important;
  color:#8e8e89 !important;
}


/* =========================================================
   V1.63 — UNIFORM ADDABLE-MEDIA GAP
   ========================================================= */

:root{
  --portfolio-media-gap:16px;
}

/* Personal Work / Collaboration / AI-R&D addable media */
.personal-work .generic-page-items,
.selected-collaboration .generic-page-items,
.ai-rd .generic-page-items,
body.personal-work .generic-page-items,
body.selected-collaboration .generic-page-items,
body.ai-rd .generic-page-items{
  gap:var(--portfolio-media-gap) !important;
  row-gap:var(--portfolio-media-gap) !important;
  column-gap:var(--portfolio-media-gap) !important;
}

.generic-page-card,
.generic-page-card.has-description{
  margin-bottom:0 !important;
}

.site-page-preview-media,
.generic-page-card-media{
  gap:var(--portfolio-media-gap) !important;
  row-gap:var(--portfolio-media-gap) !important;
  column-gap:var(--portfolio-media-gap) !important;
}

.generic-page-card-copy,
.generic-page-card.has-description .generic-page-card-copy{
  margin-top:8px !important;
}

/* Project content blocks */
.project-export-block,
.project-export-block + .project-export-block,
.project-export-block:first-child{
  margin-top:var(--portfolio-media-gap) !important;
  padding-top:0 !important;
}

.project-export-block:first-child{
  margin-top:var(--portfolio-media-gap) !important;
}

.project-export-grid{
  gap:var(--portfolio-media-gap) !important;
  row-gap:var(--portfolio-media-gap) !important;
  column-gap:var(--portfolio-media-gap) !important;
}

@media(max-width:720px){
  .personal-work .generic-page-items,
  .selected-collaboration .generic-page-items,
  .ai-rd .generic-page-items,
  body.personal-work .generic-page-items,
  body.selected-collaboration .generic-page-items,
  body.ai-rd .generic-page-items{
    gap:var(--portfolio-media-gap) !important;
    row-gap:var(--portfolio-media-gap) !important;
  }
}


/* =========================================================
   V1.64 — TRUE 16PX MEDIA-TO-MEDIA GAP
   ========================================================= */

.generic-page-card:not(.has-copy) .generic-page-card-copy{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.generic-page-card.has-copy .generic-page-card-copy{
  display:block;
  margin:8px 0 0 !important;
  padding:0 !important;
}

.personal-work .generic-page-items,
.selected-collaboration .generic-page-items,
.ai-rd .generic-page-items,
body.personal-work .generic-page-items,
body.selected-collaboration .generic-page-items,
body.ai-rd .generic-page-items{
  gap:16px !important;
  row-gap:16px !important;
  column-gap:16px !important;
}

.site-page-preview-media,
.generic-page-card-media,
.project-export-grid{
  gap:16px !important;
  row-gap:16px !important;
  column-gap:16px !important;
}


/* =========================================================
   V1.66 — TWO-IMAGE RESPONSIVE SPLIT
   ========================================================= */
@media(max-width:720px){
  .project-export-grid.grid-2,
  .generic-page-media-grid.grid-2,
  .final-production-image-grid.grid-2{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   V1.69 — TWO-IMAGE FIXED DESKTOP HEIGHT / MOBILE STACK
   ========================================================= */
@media(max-width:720px){
  .project-export-grid.grid-2 > .project-export-image,
  .generic-page-media-grid.grid-2 > .generic-page-card-image,
  .final-production-image-grid.grid-2 > .project-export-image{
    height:auto !important;
  }
}


/* =========================================================
   V1.70 — PERSISTENT TWO-IMAGE DESKTOP ROW HEIGHT
   ========================================================= */

.project-export-grid.grid-2,
.generic-page-media-grid.grid-2,
.final-production-image-grid.grid-2{
  align-items:stretch;
}

.project-export-grid.grid-2 > .project-export-image,
.generic-page-media-grid.grid-2 > .generic-page-card-image,
.final-production-image-grid.grid-2 > .project-export-image{
  height:100%;
  aspect-ratio:auto;
}

@media(max-width:720px){
  .project-export-grid.grid-2,
  .generic-page-media-grid.grid-2,
  .final-production-image-grid.grid-2{
    aspect-ratio:auto !important;
    height:auto !important;
    align-items:initial;
  }

  .project-export-grid.grid-2 > .project-export-image,
  .generic-page-media-grid.grid-2 > .generic-page-card-image,
  .final-production-image-grid.grid-2 > .project-export-image{
    height:auto !important;
  }
}


/* =========================================================
   V1.80 — MARKDOWN LINK STYLING
   ========================================================= */

.md-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.34);
}

.md-link:hover{
  text-decoration-color:currentColor;
}


/* =========================================================
   V1.81 — GENERIC PAGE MOBILE/DESKTOP SCROLL FIX
   Personal Work / AI-R&D / Collaboration
   ========================================================= */

html,
body{
  min-height:100%;
}

/*
  These content pages should use normal document scrolling.
  Some earlier mobile/page-lock rules were preventing vertical scroll.
*/
body.generic-content-page,
body:has(.generic-page){
  overflow-y:auto !important;
  overflow-x:hidden !important;
  height:auto !important;
  min-height:100vh !important;
  position:static !important;
  touch-action:pan-y pinch-zoom !important;
  overscroll-behavior-y:auto !important;
}

.generic-page{
  height:auto !important;
  min-height:100vh !important;
  overflow:visible !important;
  touch-action:pan-y pinch-zoom !important;
}

.generic-page-items,
.generic-page-card{
  overflow:visible !important;
}

/*
  Mobile: preserve fixed-page-width behavior while allowing vertical page scroll.
*/
@media(max-width:720px){
  body:has(.generic-page){
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y pinch-zoom !important;
  }

  .generic-page{
    overflow:visible !important;
    touch-action:pan-y pinch-zoom !important;
  }
}


/* =========================================================
   V1.82 — AREA PAGE TEMPLATE / LIVE PARITY
   ========================================================= */

/* Shared section divider treatment, echoing project detail pages. */
body.personal-work .generic-page-card,
body.selected-collaboration .generic-page-card,
body.ai-rd .generic-page-card{
  border-top:1px solid #3a3a36;
  padding-top:26px;
  margin-top:4px;
}

/* PERSONAL WORK — match the editor template composition. */
body.personal-work .generic-page{
  padding:80px 5vw 90px !important;
}

body.personal-work .live-area-kicker{
  margin:0 0 14px;
  font-size:9px;
  color:#8d8d88;
  letter-spacing:.08em;
}

body.personal-work .generic-page h1{
  margin:0 0 22px;
  font-size:clamp(48px,7vw,92px);
  line-height:.95;
  font-weight:300;
  letter-spacing:-.045em;
}

body.personal-work .generic-page-intro{
  max-width:560px;
  color:#bdbdb8;
  font-size:12px;
  line-height:1.7;
  margin:0 0 56px;
}

body.personal-work .generic-page-items{
  display:grid;
  grid-template-columns:minmax(0,1fr) !important;
  gap:18px !important;
  row-gap:18px !important;
  column-gap:0 !important;
}

/* AI / R&D keeps its broad media presentation, but gains clean section rules. */
body.ai-rd .generic-page-items{
  display:grid;
}

/* COLLABORATION — preserve the template's metadata strip. */
body.selected-collaboration .editor-collaboration-meta{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:32px;
  padding:24px 0;
  margin-bottom:18px;
  border-top:1px solid #292926;
  border-bottom:1px solid #292926;
}

body.selected-collaboration .editor-collaboration-meta div{
  display:flex;
  flex-direction:column;
  gap:7px;
}

body.selected-collaboration .editor-collaboration-meta span{
  font-size:8px;
  color:#777772;
}

body.selected-collaboration .editor-collaboration-meta strong{
  font-size:10px;
  font-weight:400;
}

@media(max-width:720px){
  body.personal-work .generic-page-items{
    grid-template-columns:1fr;
    gap:20px !important;
    row-gap:20px !important;
  }

  body.personal-work .generic-page-card,
  body.selected-collaboration .generic-page-card,
  body.ai-rd .generic-page-card{
    padding-top:18px;
  }

  body.selected-collaboration .editor-collaboration-meta{
    grid-template-columns:1fr;
    gap:16px;
  }
}


/* =========================================================
   V1.84 — PERSONAL WORK STACK + SECTION RULES
   ========================================================= */

body.personal-work .generic-page-items{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:18px !important;
}

body.personal-work .generic-page-card,
body.selected-collaboration .generic-page-card,
body.ai-rd .generic-page-card{
  border-top:1px solid #3a3a36 !important;
  padding-top:26px !important;
  margin-top:4px !important;
}

@media(max-width:720px){
  body.personal-work .generic-page-items{
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }

  body.personal-work .generic-page-card,
  body.selected-collaboration .generic-page-card,
  body.ai-rd .generic-page-card{
    padding-top:20px !important;
  }
}


/* =========================================================
   V1.85 — AREA PAGES USE PROJECT-PAGE HIERARCHY
   Personal Work / AI-R&D / Collaboration
   ========================================================= */

/*
  All three area pages now follow:
  PAGE TITLE
  optional INTRO TITLE
  INTRO DESCRIPTION
  ONE DIVIDER
  page-specific meta (Collaboration only)
  content blocks
*/

/* Remove the old kicker entirely. */
body.personal-work .live-area-kicker,
body.ai-rd .live-area-kicker,
body.selected-collaboration .live-area-kicker{
  display:none !important;
}

/* Remove section rules from every image/content card. */
body.personal-work .generic-page-card,
body.ai-rd .generic-page-card,
body.selected-collaboration .generic-page-card{
  border-top:0 !important;
  padding-top:0 !important;
  margin-top:0 !important;
}

body.personal-work .area-page-intro,
body.ai-rd .area-page-intro,
body.selected-collaboration .area-page-intro{
  max-width:760px;
  margin:28px 0 0;
}

body.personal-work .area-page-intro-title,
body.ai-rd .area-page-intro-title,
body.selected-collaboration .area-page-intro-title{
  margin:0 0 14px;
  color:#d5d5d0;
  font-size:11px;
  font-weight:500;
  line-height:1.35;
}

body.personal-work .area-page-intro .generic-page-intro,
body.ai-rd .area-page-intro .generic-page-intro,
body.selected-collaboration .area-page-intro .generic-page-intro{
  max-width:760px;
  margin:0 !important;
}

/* The ONE structural divider. */
body.personal-work .area-page-divider,
body.ai-rd .area-page-divider,
body.selected-collaboration .area-page-divider{
  width:100%;
  height:1px;
  background:#343430;
  margin:46px 0 24px;
}

/* Collaboration metadata has no extra rules of its own. */
body.selected-collaboration .editor-collaboration-meta{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:32px;
  padding:0 0 24px !important;
  margin:0 !important;
  border:0 !important;
}

/* Keep all area-page content stacked like project page sections. */
body.personal-work .generic-page-items,
body.ai-rd .generic-page-items,
body.selected-collaboration .generic-page-items{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:18px !important;
}

@media(max-width:720px){
  body.personal-work .area-page-divider,
  body.ai-rd .area-page-divider,
  body.selected-collaboration .area-page-divider{
    margin:32px 0 20px;
  }

  body.selected-collaboration .editor-collaboration-meta{
    grid-template-columns:1fr;
    gap:16px;
    padding-bottom:20px !important;
  }
}


/* =========================================================
   V1.87 — AREA PAGE LAYOUT + TYPOGRAPHY NORMALIZATION
   Personal Work / AI-R&D / Collaboration
   ========================================================= */

/*
  Treat all three area pages like project detail pages, minus the hero:
  title -> optional intro title -> intro description -> ONE divider -> content.
*/

body.personal-work .generic-page,
body.ai-rd .generic-page,
body.selected-collaboration .generic-page{
  display:block !important;
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:70px 5vw 90px !important;
}

/* Normalize page title size across all three pages. */
body.personal-work .generic-page > h1,
body.ai-rd .generic-page > h1,
body.selected-collaboration .generic-page > h1{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  margin:10px 0 26px !important;
  padding:0 !important;
  font-size:clamp(44px,7vw,92px) !important;
  font-weight:300 !important;
  line-height:.95 !important;
  letter-spacing:-.045em !important;
}

/* Full-width intro block; prevents old collaboration grid rules from narrowing copy. */
body.personal-work .area-page-intro,
body.ai-rd .area-page-intro,
body.selected-collaboration .area-page-intro{
  display:block !important;
  width:100% !important;
  max-width:760px !important;
  margin:28px 0 0 !important;
  padding:0 !important;
  grid-template-columns:none !important;
}

/* Optional intro title matches project-page small heading treatment. */
body.personal-work .area-page-intro-title,
body.ai-rd .area-page-intro-title,
body.selected-collaboration .area-page-intro-title{
  display:block !important;
  width:auto !important;
  margin:0 0 14px !important;
  padding:0 !important;
  color:#d5d5d0 !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
}

/* Intro body uses the same readable scale everywhere. */
body.personal-work .area-page-intro .generic-page-intro,
body.ai-rd .area-page-intro .generic-page-intro,
body.selected-collaboration .area-page-intro .generic-page-intro,
body.personal-work .area-page-intro .generic-page-intro p,
body.ai-rd .area-page-intro .generic-page-intro p,
body.selected-collaboration .area-page-intro .generic-page-intro p{
  display:block !important;
  width:100% !important;
  max-width:760px !important;
  margin:0 0 12px !important;
  padding:0 !important;
  color:#aaa !important;
  font-size:12px !important;
  line-height:1.7 !important;
}

/* Exactly one divider, directly under intro/description. */
body.personal-work .area-page-divider,
body.ai-rd .area-page-divider,
body.selected-collaboration .area-page-divider{
  display:block !important;
  width:100% !important;
  height:1px !important;
  margin:46px 0 28px !important;
  padding:0 !important;
  background:#333 !important;
  border:0 !important;
}

/* Collaboration meta strip removed completely. */
body.selected-collaboration .editor-collaboration-meta{
  display:none !important;
}

/* Never put divider rules on individual media cards. */
body.personal-work .generic-page-card,
body.ai-rd .generic-page-card,
body.selected-collaboration .generic-page-card{
  display:block !important;
  width:100% !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* All area-page items stack vertically. */
body.personal-work .generic-page-items,
body.ai-rd .generic-page-items,
body.selected-collaboration .generic-page-items{
  display:grid !important;
  width:100% !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:18px !important;
  row-gap:18px !important;
  column-gap:0 !important;
}

/* Normalize image title/description typography across all three. */
body.personal-work .generic-page-card-copy h2,
body.ai-rd .generic-page-card-copy h2,
body.selected-collaboration .generic-page-card-copy h2{
  margin:0 0 6px !important;
  color:#d5d5d0 !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
}

body.personal-work .generic-page-card-copy,
body.personal-work .generic-page-card-copy p,
body.personal-work .generic-page-card-copy div,
body.ai-rd .generic-page-card-copy,
body.ai-rd .generic-page-card-copy p,
body.ai-rd .generic-page-card-copy div,
body.selected-collaboration .generic-page-card-copy,
body.selected-collaboration .generic-page-card-copy p,
body.selected-collaboration .generic-page-card-copy div{
  color:#8e8e89 !important;
  font-size:9px !important;
  line-height:1.4 !important;
}

@media(max-width:720px){
  body.personal-work .generic-page,
  body.ai-rd .generic-page,
  body.selected-collaboration .generic-page{
    padding:46px 20px 70px !important;
  }

  body.personal-work .generic-page > h1,
  body.ai-rd .generic-page > h1,
  body.selected-collaboration .generic-page > h1{
    font-size:48px !important;
  }

  body.personal-work .area-page-divider,
  body.ai-rd .area-page-divider,
  body.selected-collaboration .area-page-divider{
    margin:32px 0 22px !important;
  }
}


/* =========================================================
   V1.88 — MAIN PAGE IMAGE / NAV / FRAME FIXES
   ========================================================= */

/*
  The persistent nav now has two additional destinations. Slightly tighten
  spacing on narrower desktop widths instead of allowing the links to collide.
*/
@media(min-width:721px){
  .site-header .nav{
    gap:clamp(12px,1.7vw,24px);
    white-space:nowrap;
  }
}

/*
  Homepage outer-frame fix:
  draw the frame INSIDE its bounds rather than relying on a border that can
  visually disappear against the top/bottom browser edge during snap panels.
*/
.home-page .page-frame{
  border:0 !important;
  box-shadow:inset 0 0 0 1px var(--frame);
}

@media(max-width:720px){
  .home-page .page-frame{
    box-shadow:none;
  }
}


/* =========================================================
   V4.6 — PAGE 03: IMAGE ABOVE COPY
   Same grid, same rows, same spacing — just visually reorders
   each panel so the image sits above the title/description/link
   instead of below it. No structural/layout changes.
   ========================================================= */
.page03-number{ order:1; }
.page03-image-link{ order:2; margin-top:0 !important; margin-bottom:24px !important; }
.page03-copy{ order:3; }

/* index.html embeds a page-specific "published-page03-layout" <style>
   block that pulls the image out of normal flow with position:absolute
   (used to vertically-center it, ignoring the order above). These
   higher-specificity rules cancel that absolute positioning so the
   image renders in normal flow again, first, above the copy. Panel
   width, borders, and the 3-column layout are untouched. */
body.home-page #ai .page03-panel .page03-number{ order:1; }
body.home-page #ai .page03-panel .page03-image-link{
  order:2;
  /* Stay "relative" (not static) so this remains the positioned
     container the inline-styled <img> (position:absolute, height:100%)
     sizes itself against. Give it a real height instead of the
     top:50%/transform centering trick, since that height is what the
     image's own 100%-height inline style resolves against. */
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  height:clamp(230px, 30vh, 320px) !important;
  transform:none !important;
  margin:0 0 24px !important;
}
body.home-page #ai .page03-panel .page03-copy{ order:3; margin-top:0 !important; }

/* =========================================================
   V4.8 — PAGE 03: NUMBER+IMAGE+COPY GROUP AS VERTICAL CENTERPOINT
   The whole group (number, image, copy — same tight relationship
   as the "01/02/03..." index sitting right above each image in the
   WORK grid on page 2) is centered together as one block in the
   panel height, so the number stays close to the image instead of
   being pinned to the top of the panel.
   ========================================================= */
body.home-page #ai .page03-panel{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
body.home-page #ai .page03-panel .page03-group{
  display:flex;
  flex-direction:column;
}
body.home-page #ai .page03-panel .page03-number{
  order:1;
  height:63px;
  display:flex;
  align-items:center;
  margin-bottom:0 !important;
  flex:0 0 auto !important;
}
body.home-page #ai .page03-panel .page03-image-link{
  order:2;
  margin-top:0 !important;
  margin-bottom:24px !important;
  flex:0 0 auto !important;
}
body.home-page #ai .page03-panel .page03-copy{
  order:3;
  margin-top:0 !important;
  margin-bottom:0 !important;
  flex:0 0 auto !important;
}

/* =========================================================
   V5.1 — PAGE 03: SHORTER DIVIDERS, MATCHING PAGE 2
   The column divider used to run the full panel height (the panel
   is stretched to fill the 100svh section). Move the divider from
   the panel onto the inner content group instead, so — like the
   WORK grid's card dividers on page 2 — it only spans the visible
   content, not the empty space around it. Negative margin + equal
   padding keeps the line flush at the same column edge as before.
   ========================================================= */
@media(min-width:721px){
  body.home-page #ai .page03-panel{
    border-right:0 !important;
  }
  body.home-page #ai .page03-panel .page03-group{
    padding-right:20px;
    margin-right:-20px;
    border-right:1px solid var(--line);
    box-sizing:content-box;
  }
  body.home-page #ai .page03-panel:last-child .page03-group{
    padding-right:0;
    margin-right:0;
    border-right:0;
  }
}

/* =========================================================
   TARGETED FIX — EXPANDED PERSISTENT NAV
   ========================================================= */
@media(min-width:721px){
  body:not(.project-detail-page) .site-header .nav{
    gap:clamp(10px,1.45vw,20px);
    white-space:nowrap;
  }
}


/* =========================================================
   TARGETED FIX — HOMEPAGE OUTER FRAME VISIBILITY
   ========================================================= */
.home-page .page-frame{
  box-sizing:border-box !important;
  border:0 !important;
  min-height:100dvh;
  box-shadow:
    inset 0 1px 0 var(--frame),
    inset 0 -1px 0 var(--frame),
    inset 1px 0 0 var(--frame),
    inset -1px 0 0 var(--frame) !important;
}

@media(max-width:720px){
  .home-page .page-frame{
    box-shadow:none !important;
  }
}

/* =========================================================
   V4.9 — PAGE 2 WORK GRID: BREATHING ROOM FOR INDEX NUMBERS
   The "01/02/03..." labels sat flush against the vertical divider
   between columns (0 left padding). Give them the same left inset
   as the title/description below them so they clear the divider.
   ========================================================= */
@media(min-width:721px){
  .work-index{
    padding-left:6px !important;
  }
}

/* =========================================================
   V5.0 — BIG PAGE NUMBERS
   Large decorative page numbers, sized close to the hero title,
   for each of the 5 snap sections. Pages 4/5 already had a small
   ".section-number" in the top-left — that placement stays, just
   scaled up. Pages 1-3 get new numbers, all bottom-right to match
   page 1. Desktop only; hidden on the mobile stacked layout.
   ========================================================= */
@media(min-width:721px){
  #intro.hero,
  #work.work-section,
  #ai.dual-section{
    position:relative;
  }

  .page-number-big{
    position:absolute;
    right:var(--pad);
    font-size:clamp(46px,6vw,82px);
    line-height:1;
    font-weight:300;
    letter-spacing:-.02em;
    color:var(--text);
    pointer-events:none;
    z-index:1;
    margin:0;
  }

  .page-number-01,
  .page-number-02,
  .page-number-03{
    bottom:var(--pad);
  }

  .section-number,
  .dual-number{
    font-size:clamp(46px,6vw,82px) !important;
  }
}

@media(max-width:720px){
  #intro,
  #work,
  #ai,
  #credits,
  #about{
    position:relative;
  }

  /*
    The number is position:absolute with a fixed top value, so it renders
    correctly regardless of the section's own padding. The titles below
    rely on normal document flow, though, which depends entirely on that
    padding — and outside the mobile-pager-v49 context these sections
    have padding-top:0, so a title could render up near the very top of
    the viewport instead of beside its number. This fallback keeps that
    from happening if the pager JS isn't active for any reason.
  */
  #work.work-section,
  #ai.dual-section{
    padding-top:76px !important;
  }

  .page-number-big,
  .section-number{
    position:absolute;
    top:76px;
    right:20px;
    left:20px;
    margin:0;
    font-size:34px;
    line-height:1;
    font-weight:300;
    letter-spacing:-.02em;
    text-align:right;
    pointer-events:none;
  }

  .page-number-big{
    color:var(--text);
  }

  /*
    Verified against actual rendered pixels (not just DOM box metrics,
    which can be misleading when font sizes differ): the number's ink
    was starting 3px above the h1's ink. Nudged down to match exactly.
  */
  .page-number-01{
    top:75px;
  }

  /*
    Discovered a uniform 2px gap between every title's ink and its
    number's ink — present on all 5 pages equally (verified with numbers
    forced to full opacity to rule out an opacity-based measurement
    bias). Most visible on the bigger page 1/5 type, but real everywhere.
    Closing it here for page 1's h1.
  */
  #intro h1{
    transform:translateY(-2px);
  }

  /*
    Same pixel-verification, done for every page after page 1 turned out
    to need it: "WORK" and "BEYOND" render ~2px above their numbers.
  */
  .page-number-02,
  .page-number-03{
    top:74px;
  }

  /*
    .credits-panel carries the .panel-reveal entrance-animation class,
    which sets a CSS transform — that makes it the containing block for
    absolutely positioned descendants (a CSS quirk), not #credits itself
    like the other four sections. Its own top-padding is already 0 here,
    so top:0 (not 76px) is what actually lines up with the others.
  */
  body.mobile-pager-v49 #credits .section-number{
    top:-1px;
  }

  /*
    Page 2's "02A" label sat in a much shorter box (42px) than page 3's
    "03A" (63px), so the image started noticeably tighter under it even
    though both start at the same offset as their big number above. Match
    page 3's spacing. The big "02" itself is unaffected (still absolute,
    fixed at top:76px), so this doesn't touch the cross-page alignment.
  */
  .work-index{
    height:63px;
  }

  /*
    The "ABOUT" kicker above the headline was the reason page 5's number
    sat lower (96px) than every other page's (76px) — a small but real
    bounce when swiping. Hide the kicker on mobile and let the headline
    move up to the shared baseline instead, so the number doesn't need
    a special-cased offset at all.
  */
  body.mobile-pager-v49 #about .about-kicker{
    display:none;
  }

  #about .section-number{
    top:74px;
  }

  /*
    The headline spans full width across multiple lines, unlike page 1's
    shorter first line — aligning the number with it put both in the same
    row with nothing keeping the text from wrapping underneath it. Reserve
    a right-side gutter sized to the number so text never reaches it,
    regardless of exact wrapping on a given device.
  */
  body.mobile-pager-v49 #about .about-heading h2{
    padding-right:76px;
    transform:translateY(-2.5px);
  }

  /*
    Mobile-only titles for pages 2 and 3 ("WORK" / "BEYOND"), sitting in
    the same row as their number, left-aligned — same pattern as page 1's
    h1 and page 4's "SELECTED CREDITS". Hidden on desktop; these don't
    exist in that layout.
  */
  .mobile-page-title{
    display:block;
    font-size:26px;
    font-weight:400;
    line-height:1;
    letter-spacing:-.02em;
    color:var(--text);
    margin:0 0 18px;
    transform:translateY(.5px);
  }

  /*
    Page 4's title already existed — bring it in line with the new
    page 2/3 titles (and the number beside it): same size treatment.
  */
  body.mobile-pager-v49 #credits .credits-copy h2{
    font-size:26px;
    font-weight:400;
    padding-right:76px;
    transform:translateY(-.5px);
  }
}

@media(min-width:721px){
  .mobile-page-title{
    display:none;
  }
}

/* =========================================================
   V5.2 — LOWER CONTRAST ON ALL BIG PAGE NUMBERS
   ========================================================= */
.page-number-big,
.section-number,
.dual-number{
  opacity:.5;
}

@media(max-width:720px){
  .section-number{
    text-align:right;
  }
}

/* =========================================================
   V5.3 — PAGES 4/5: CENTER CONTENT IN THE VIEWPORT SECTION
   Both panels are single-row grids inside a 100svh section. Grid
   rows default to their content height and sit at the top of any
   leftover space (align-content:normal behaves like "start" here)
   — align-items alone only affects alignment *within* that row,
   not the row's position in the container. align-content:center
   centers the row (and so all its content) in the section.
   ========================================================= */
@media(min-width:721px){
  #credits .credits-panel,
  #about.about-panel{
    align-content:center;
  }

  /* The number shared a grid row with the copy, so centering the
     row pulled the number down with it. Pin the number back to its
     original top-left spot (matching the panel's own padding) and
     take it out of grid flow, then lock the remaining columns in
     place so they don't shift into the column the number vacated. */
  #credits .credits-panel{
    position:relative;
  }
  #credits .credits-panel .section-number{
    position:absolute;
    top:96px;
    left:7vw;
    margin:0;
  }
  #credits .credits-panel .credits-copy{
    grid-column:2;
  }

  #about.about-panel{
    position:relative;
  }
  #about.about-panel .about-section-number{
    position:absolute;
    top:82px;
    left:6vw;
    margin:0;
  }
  #about.about-panel .about-main{
    grid-column:2;
  }
  #about.about-panel .about-side{
    grid-column:3;
  }
}

/* =========================================================
   V5.4 — LEFT-ALIGN PAGE CONTENT WITH THE LOGO (DESKTOP)
   The header/nav use var(--pad) consistently, but hero-copy had its
   own extra 14px left padding, and the credits/about panels used
   vw-based padding (7vw/6vw) instead of var(--pad) — vw scales with
   viewport width, so at narrower desktop widths (e.g. a resized
   browser or tablet) it drifts noticeably out of alignment with the
   logo instead of staying locked to it like every other page.
   ========================================================= */
@media(min-width:721px){
  .hero-copy{
    padding-left:0;
  }

  #credits .credits-panel,
  #about.about-panel{
    padding-left:var(--pad) !important;
    padding-right:var(--pad) !important;
  }

  #credits .credits-panel{
    grid-template-columns:1fr !important;
  }
  #credits .credits-panel .section-number{
    left:var(--pad) !important;
  }
  #credits .credits-panel .credits-copy{
    grid-column:1 !important;
  }

  #about.about-panel{
    grid-template-columns:minmax(0,1fr) minmax(220px,320px) !important;
  }
  #about.about-panel .about-section-number{
    left:var(--pad) !important;
  }
  #about.about-panel .about-main{
    grid-column:1 !important;
    align-self:start !important;
  }
  #about.about-panel .about-side{
    grid-column:2 !important;
    align-self:start !important;
    margin-top:75px !important;
  }
}

/* =========================================================
   V5.5 — PAGE 4: TRUE VERTICAL CENTERING
   align-content:center (V5.3) left the block ~34px closer to the top
   than the bottom — credits-note's own margin-top isn't being fully
   absorbed into the grid's centering math the way a plain top-aligned
   layout would suggest. Nudge the block up by that same fixed amount
   so it reads as genuinely centered instead of just approximately so.
   ========================================================= */
@media(min-width:721px){
  #credits .credits-panel .credits-copy{
    margin-top:-34px;
  }

  #about.about-panel .about-main{
    margin-top:56px;
  }
}

/* =========================================================
   V5.6 — PAGE 5: RESIZE BODY TEXT TO MATCH OTHER PAGES
   The about heading and body copy were noticeably smaller-scaled
   than page 1's hero type (h2 clamp topped out at ~65% of h1's),
   making the page feel emptier than the rest despite the same
   amount of open space. Bring the type up closer to that scale.
   ========================================================= */
@media(min-width:721px){
  .about-heading h2{
    font-size:clamp(32px,4.4vw,60px);
  }

  .about-body-block p:last-child{
    font-size:11px;
    line-height:1.65;
  }
}

/* =========================================================
   V5.7 — PAGE 2: KEEP THE NUMBER ANCHORED REGARDLESS OF GRID WRAP
   height:100svh is only a suggestion once content is taller than
   that — the box grows to fit it, dragging the number (positioned
   from the section's own bottom edge) down with it. At tablet-range
   widths the project grid drops to 3 columns, so 5 cards wrap into
   2 rows and the section ends up taller than the viewport, pushing
   "02" noticeably below "01" and "03". Cap it at true 100vh and let
   any overflow scroll internally instead, so the number always sits
   at the same spot relative to the viewport, matching every page.
   ========================================================= */
@media(min-width:721px){
  #work.work-section{
    max-height:100vh;
    overflow-y:auto;
  }
}