/* Cleaned site stylesheet
   Goal: preserve current visual behavior while removing duplicate rules,
   canceled overrides, and repeated media blocks.
*/

:root{
  --bg:#F4F4F4;
  --text:#111;
  --muted:rgba(17,17,17,.55);

  --container-max:1512px;
  --grid-cols:12;
  --grid-gutter:16px;
  --container-pad:24px;

  --lh:120%;
  --h1:48px;
  --h2:22px;
  --body:13px;
  --display:72px;

  --hero-h:368px;
  --cta-grad:linear-gradient(110deg,#6A73D8 0%,#A277F0 55%,#D46BDE 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-weight:400;
  font-size:var(--body);
  line-height:var(--lh);
}

.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.grid-12{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  column-gap:var(--grid-gutter);
}

.page{opacity:0}
.page.is-loaded{opacity:1;transition:opacity 700ms ease}
main{padding-top:56px}

/* Typography */
.h1{font-family:"Crimson Pro",ui-serif,Georgia,serif;font-weight:300;font-size:var(--h1);line-height:var(--lh);margin:0}
.h2{font-family:"IBM Plex Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-weight:400;font-size:var(--h2);line-height:var(--lh);margin:0 0 10px}
.body{font-family:"IBM Plex Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-weight:400;font-size:var(--body);line-height:var(--lh);margin:0 0 14px;color:rgba(17,17,17,.7)}
.display{font-family:"IBM Plex Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-weight:200;font-size:var(--display);line-height:var(--lh)}
.muted{color:var(--muted)}

/* Header / Nav */
.site-header{
  padding:14px 0;
  position:fixed;
  z-index:1;
  background-color:var(--bg);
  width:100%;
  transition:transform 260ms ease;
}
.site-header.is-hidden{transform:translateY(-100%)}
.nav{align-items:center}

.nav-brand{
  grid-column:1/span 1;
  text-decoration:none;
  color:var(--text);
  font-weight:400;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.nav-role{
  grid-column:2/span 3;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(17,17,17,.45);
}
.nav-links{
  grid-column:7/span 6;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:28px;
  justify-items:start;
  align-items:center;
}
.nav-link{
  text-decoration:none;
  color:rgba(17,17,17,.55);
  font-weight:400;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.nav-link:hover{color:rgba(17,17,17,.9)}
.nav-menu-button{
  display:none;
  grid-column:12/span 1;
  justify-self:end;
  font-weight:400;
  font-size:12px;
  border:0;
  background:transparent;
  color:rgba(17,17,17,.75);
  padding:8px 10px;
  cursor:pointer;
}

/* Menu overlay */
.menu-overlay{position:fixed;inset:0;background:rgba(244,244,244,.92);backdrop-filter:blur(8px);z-index:50}
.menu-panel{padding-top:16px}
.menu-close{border:0;background:transparent;font-weight:400;font-size:12px;cursor:pointer;padding:10px 12px}
.menu-links{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.menu-link{text-decoration:none;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,17,17,.85);font-weight:400}

/* Hero */
.hero{
  height:var(--hero-h);
  align-items:center;
  margin:0 auto;
}
.hero-heading{grid-column:1/span 5;}
.hero-meta{
  grid-column:7/span 6;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:0;
}
.hero-meta-col{min-width:0}
.meta-line{font-size:13px;line-height:1.7;letter-spacing:.02em}

/* Work */
.work-section{padding-top:8px;padding-bottom:48px}
.work-section .section-label{margin-bottom:18px}
.work{display:grid}
.project-card{text-decoration:none;color:inherit;display:block}
.work .project-card:nth-child(1){grid-column:1/span 3}
.work .project-card:nth-child(2){grid-column:4/span 3}
.work .project-card:nth-child(3){grid-column:7/span 3}
.work .project-card:nth-child(4){grid-column:10/span 3}

.project-media{
  width:100%;
  aspect-ratio:3 / 4;
  overflow:hidden;
  position:relative;
  background:#E9E9E9;
}
.project-media-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1);
  transition:transform 450ms ease;
}
.project-card:hover .project-media-image{transform:scale(1.05)}

.project-info{padding-top:10px}
.project-title,.project-subtitle,.project-year{font-size:13px;letter-spacing:0;text-transform:uppercase;color:rgba(17,17,17,.55)}
.project-title{font-weight:400;color:rgba(17,17,17,.65)}
.project-subtitle{letter-spacing:.06em;color:rgba(17,17,17,.45);margin-top:2px}
.project-year{letter-spacing:.06em;color:rgba(17,17,17,.45);margin-top:2px}

/* Updates */
.updates{padding-top:28px;padding-bottom:40px}
.section-label{
  grid-column:1/span 3;
  font-size:18px;
  color:rgba(17,17,17,.45);
  margin-bottom:18px;
  scroll-margin-top:100px;
}
.updates-list{grid-column:1/span 12;display:grid;gap:10px}
.updates-item{
  display:inline-block;
  font-family:"Crimson Pro",ui-serif,Georgia,serif;
  font-weight:300;
  font-size:40px;
  line-height:1.15;
  text-decoration:none;
  color:rgba(17,17,17,.9);
  padding:14px 10px;
  background:transparent;
  transition:background-color 180ms ease, transform 180ms ease, color 180ms ease;
}
.updates-item:hover{background:#E7EEF2;transform:translateX(4px)}
.updates-item:focus-visible{background:#E7EEF2;outline:none}

/* About */
.about{padding-top:18px;padding-bottom:64px;align-items:start}
.about-text-1{grid-column:1/span 3}
.about-text-2{grid-column:4/span 3}
.about-text-3{grid-column:7/span 3}
.about-photo{grid-column:7/span 6}
.media-portrait{width:100%;aspect-ratio:4/3;background:linear-gradient(180deg,#E9E9E9 0%,#CFCFCF 100%)}

/* Impact */
.impact{padding-bottom:46px;align-items:end}
.impact-label{grid-column:1/span 3;font-size:12px;color:rgba(17,17,17,.45);margin-bottom:18px}
.impact-number{margin:0;display:block}
.impact-item{min-width:0}
.impact .impact-item:nth-child(2){grid-column:1/span 3}
.impact .impact-item:nth-child(3){grid-column:4/span 3}
.impact .impact-item:nth-child(4){grid-column:7/span 3}
.impact .impact-item:nth-child(5){grid-column:10/span 3}
.impact-caption{margin-top:8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,17,17,.45)}

/* CTA */
.cta{background:var(--cta-grad);padding:84px 0}
.cta-inner{max-width:820px;margin:0 auto;text-align:center;padding:0 24px}
.cta-heading{font-family:"Crimson Pro",ui-serif,Georgia,serif;font-weight:300;font-size:40px;line-height:var(--lh);color:rgba(255,255,255,.95);margin:0 0 22px}
.cta-buttons{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta-button{border:1px solid rgba(255,255,255,.85);color:rgba(255,255,255,.95);text-decoration:none;border-radius:999px;padding:10px 16px;font-size:12px;font-weight:400}
.cta-button:hover{background:rgba(255,255,255,.14)}

/* Footer */
.site-footer{padding:18px 0 26px}
.footer{align-items:center}
.footer-brand{grid-column:1/span 3;font-weight:400;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.footer-role{grid-column:4/span 3;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.footer-links{grid-column:9/span 4;display:flex;justify-content:flex-end;gap:44px}
.footer-link{text-decoration:none;color:rgba(17,17,17,.55);font-weight:400;font-size:10px;letter-spacing:.06em;text-transform:uppercase}

/* Reveal helpers */
.section-reveal{opacity:0;transform:translateY(14px);transition:opacity 650ms ease,transform 650ms ease}
.section-reveal.is-visible{opacity:1;transform:translateY(0)}
.mask-line{display:block;overflow:hidden}
.mask-line-inner{display:block;transform:translateY(110%);transition:transform 720ms cubic-bezier(.2,.9,.2,1)}
.h1-mask.is-revealed .mask-line-inner{transform:translateY(0)}

/* Project page (legacy support + shared hero-meta system) */
.project-hero{padding-top:64px;padding-bottom:28px;align-items:start}
.project-heading{grid-column:1/span 6}
.project-meta{grid-column:8/span 5;padding-top:6px}
.project-meta-row{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:4px 0}
.project-meta-label{font-weight:400;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,17,17,.45)}
.project-meta-value{font-weight:400;font-size:13px;line-height:1.7;letter-spacing:.02em;color:rgba(17,17,17,.55)}
.project-body{padding-bottom:48px}
.case-row{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start;margin-bottom:22px}
.case-text{padding-top:8px}
.media-case{width:100%;aspect-ratio:16/9;background:linear-gradient(180deg,#E9E9E9 0%,#CFCFCF 100%)}

/* Shared hero-meta parity for project page if it uses unicorn-style hero markup */
body[data-page="project"] .hero-meta{
  grid-column:7/span 6;
  display:grid;
  grid-template-columns:minmax(92px,auto) minmax(1,1fr);
  column-gap:16px;
  align-items:start;
  padding-left:0;
}
body[data-page="project"] .hero-meta-col{min-width:0}
body[data-page="project"] .meta-line{
  font-size:13px;
  line-height:1.7;
  letter-spacing:.02em;
}

/* Tablet */
@media (max-width:1024px){
  :root{--grid-cols:6}

  .nav-role,.nav-links{display:none}
  .nav-menu-button{display:inline-block;grid-column:6/span 1}
  .nav-brand{grid-column:1/span 5}

  .hero-heading{grid-column:1/span 6;padding-left:0}
  .hero-meta{grid-column:1/span 6;margin-top:18px;padding-left:0}

  .work-section{overflow:hidden}
  .work{
    display:flex;
    gap:var(--grid-gutter);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:28px;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:var(--container-pad);
    scroll-padding-right:var(--container-pad);
    margin-right:calc(-1 * var(--container-pad));
    padding-right:var(--container-pad);
  }
  .work .project-card{
    flex:0 0 auto;
    scroll-snap-align:start;
  }

  .section-label,.updates-list{grid-column:1/span 6}
  .about-text-1{grid-column:1/span 3}
  .about-text-2{grid-column:4/span 3}
  .about-photo{grid-column:1/span 6;margin-top:18px}

  .impact-label{grid-column:1/span 6}
  .impact{row-gap:22px}
  .impact .impact-item:nth-child(2){grid-column:1/span 3}
  .impact .impact-item:nth-child(3){grid-column:4/span 3}
  .impact .impact-item:nth-child(4){grid-column:1/span 3}
  .impact .impact-item:nth-child(5){grid-column:4/span 3}

  .display{font-size:56px}
  .case-row{grid-template-columns:1fr}

  /* Keep first card aligned left while preserving right-side bleed */
  .work:not(.container){
    padding-left:0;
    padding-right:var(--container-pad);
  }

  body[data-page="project"] .hero-meta{
    grid-column:1/span 6;
    grid-template-columns:minmax(92px,auto) minmax(0,1fr);
    column-gap:16px;
    padding-left:0;
    margin-top:18px;
  }
}

@media (min-width:641px) and (max-width:1024px){
  .work .project-card{
    width:calc((100vw - (var(--container-pad) * 2) - var(--grid-gutter) - 56px) / 2);
  }
}

/* Mobile */
@media (max-width:640px){
  .work .project-card{
    width:calc(100vw - (var(--container-pad) * 2) - 20px);
  }

  :root{
    --container-pad:16px;
    --grid-cols:4;
    --h1:32px;
    --h2:14px;
    --display:48px;
  }

  .nav-brand{grid-column:1/span 3}
  .nav-menu-button{grid-column:4/span 1}

  .hero{
    height:auto;
    padding-top:48px;
    padding-bottom:48px;
    align-items:start;
  }

  .hero-heading{
    grid-column:1 / -1;
    padding-left:0 !important;
  }

  .hero-meta{
    grid-column:1 / -1;
    grid-template-columns:92px minmax(110px,auto) minmax(0,1fr);
    column-gap:8px;
    padding-left:0 !important;
    margin-top:24px;
    align-items:start;
    width:100%;
    max-width:100%;
  }
  .hero-meta-col{min-width:0}
  .meta-line{font-size:13px;line-height:1.7}

  .updates-item{font-size:22px}
  .about-text-1,.about-text-2,.about-photo{grid-column:1/span 4}
  .impact-label{grid-column:1/span 4}
  .impact .impact-item:nth-child(2),
  .impact .impact-item:nth-child(3),
  .impact .impact-item:nth-child(4),
  .impact .impact-item:nth-child(5){grid-column:1/span 4}

  /* Project page mobile */
  body[data-page="project"] .project-hero,
  body[data-page="project"] .hero{
    height:auto;
    align-items:start;
    padding-top:48px;
    padding-bottom:48px;
  }

  body[data-page="project"] .project-heading,
  body[data-page="project"] .hero-heading{
    grid-column:1/span 4;
  }

  body[data-page="project"] .project-meta{
    grid-column:1/span 4;
    margin-top:16px;
    display:grid;
    grid-template-columns:minmax(92px,auto) 1fr;
    column-gap:24px;
    row-gap:10px;
    justify-items:start;
  }
  body[data-page="project"] .project-meta-row{display:contents}
  body[data-page="project"] .project-meta-label{grid-column:1}
  body[data-page="project"] .project-meta-value{grid-column:2}

  body[data-page="project"] .hero-meta{
    grid-column:1 / -1;
    grid-template-columns:minmax(92px,auto) minmax(0,1fr);
    column-gap:8px;
    padding-left:0 !important;
    margin-top:24px;
    width:100%;
    max-width:100%;
  }
  body[data-page="project"] .hero-meta-col{min-width:0}
  body[data-page="project"] .meta-line{
    font-size:13px;
    line-height:1.7;
  }
}