*,
*::before,
*::after{
  box-sizing:border-box;
}

:root{
  --black:#050505;
  --white:#f4f4f2;
  --grey:#929292;
  --dark-grey:#5f5f5f;
  --border:#292929;
}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
  overflow-y:auto;
}

body{
  font-family:"DM Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header{
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  width:100%;
  height:70px;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.identity{
  display:flex;
  align-items:center;
}

.studio,
.person,
.desktop-nav a,
.role-line,
.hero-subtitle,
.section-label,
.card-number,
.card-link,
.hero-portrait figcaption{
  font-family:"IBM Plex Mono",monospace;
  text-transform:uppercase;
}

.studio{
  font-size:13px;
  letter-spacing:.08em;
  font-weight:500;
}

.identity-rule{
  width:1px;
  height:32px;
  background:#333;
  margin:0 20px;
}

.person{
  font-size:11px;
  letter-spacing:.08em;
  color:#777;
}

.desktop-nav{
  display:flex;
  align-items:center;
  gap:36px;
}

.desktop-nav a{
  position:relative;
  padding:7px 0;
  color:#858585;
  font-size:9px;
  letter-spacing:.09em;
}

.desktop-nav a:hover,
.desktop-nav a.current{
  color:var(--white);
}

.desktop-nav a.current::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--white);
}

.mobile-toggle,
.mobile-menu{
  display:none;
}


/* ============================================================
   LANDING
   ============================================================ */

.landing{
  width:100%;
  height:100vh;
  min-height:680px;
  padding:70px 6vw 18px;

  display:grid;
  grid-template-rows:61% 39%;
}


/* ============================================================
   HERO
   ============================================================ */

.hero{
  min-height:0;

  display:grid;

  
  grid-template-columns:50% 50%;

  border-bottom:1px solid var(--border);
}

.hero-content{
  position:relative;
  z-index:10;
  min-width:0;
  align-self:center;
  padding-right:5.2vw;
}

.role-line{
  margin-bottom:21px;
  color:#a1a1a1;
  font-size:11px;
  letter-spacing:.08em;
}

.hero h1{
  margin:0;
  white-space:nowrap;

  font-size:clamp(60px,5.05vw,87px);
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:500;
}

.hero-subtitle{
  margin:17px 0 23px;

  color:#909090;

  font-size:clamp(21px,1.8vw,31px);
  line-height:1.18;
  letter-spacing:.075em;
}

.hero-description{
  max-width:640px;
  margin:0 0 21px;

  color:#b7b7b7;

  font-size:13px;
  line-height:1.65;
}

.hero-buttons{
  display:flex;
  gap:38px;
}

.cta{
  width:210px;
  height:45px;

  padding:0 20px;

  border:1px solid #777;

  display:flex;
  align-items:center;
  justify-content:space-between;

  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  letter-spacing:.08em;

  transition:.2s ease;
}

.cta.primary{
  background:var(--white);
  border-color:var(--white);
  color:#080808;
}

.cta.secondary{
  color:#eee;
}

.cta:hover{
  border-color:#eee;
}

.cta.primary:hover{
  background:#fff;
}

.arrow{
  font-size:17px;
  line-height:0;
}


/* ============================================================
   HERO PORTRAIT
   ============================================================ */

.hero-portrait{
  position:relative;
  z-index:1;

  min-width:0;
  min-height:0;

  width:100%;
  height:100%;

  margin:0;

  overflow:visible;

  background:#050505;
}


.hero-portrait img{
  position:absolute;

  top:0;
  right:0;

  width:100%;
  height:100%;

  max-width:none;
  max-height:none;

  display:block;

  object-fit:cover;
  object-position:right center;

  filter:grayscale(100%);
}


/* ============================================================
   LEFT FADE
   ============================================================ */


.hero-portrait::before{
  content:"";

  position:absolute;
  z-index:2;
  top:0;

  
  left:-30vw;
  width:calc(100% + 30vw);
  height:100%;
  pointer-events:none;

  background:linear-gradient(
    to right,
    #050505 0%,
    #050505 18%,
    rgba(5,5,5,.998) 32%,
    rgba(5,5,5,.985) 44%,
    rgba(5,5,5,.94) 54%,
    rgba(5,5,5,.84) 63%,
    rgba(5,5,5,.69) 71%,
    rgba(5,5,5,.50) 79%,
    rgba(5,5,5,.32) 86%,
    rgba(5,5,5,.16) 92%,
    rgba(5,5,5,.055) 97%,
    transparent 100%
  );
}


/* ============================================================
   BOTTOM FADE
   ============================================================ */

.hero-portrait::after{
  content:"";

  position:absolute;
  z-index:2;

  left:0;
  bottom:0;

  width:100%;
  height:11%;

  pointer-events:none;

  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5,5,5,.015) 35%,
    rgba(5,5,5,.04) 70%,
    rgba(5,5,5,.12) 100%
  );
}

.hero-portrait figcaption{
  position:absolute;
  z-index:3;

  right:24px;
  bottom:18px;

  color:#e4e4e4;

  font-size:8px;
  letter-spacing:.07em;
}


/* ============================================================
   SELECTED WORK
   ============================================================ */

.selected-work{
  min-height:0;
  padding-top:17px;
}

.section-label{
  height:34px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  color:#aaa;

  font-size:11px;
  letter-spacing:.1em;
}

.section-label small{
  color:#606060;
  font-size:9px;
}

.work-grid{
  height:calc(100% - 34px);

  min-height:0;

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:24px;
}

.work-card{
  min-width:0;
  min-height:0;

  height:100%;

  border:1px solid #303030;

  background:#070707;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  transition:border-color .2s ease;
}

.work-card:hover{
  border-color:#666;
}

.work-image{
  position:relative;

  flex:0 0 100px;

  height:100px;

  overflow:hidden;

  background:#111;

  border-bottom:1px solid #303030;
}

.work-image>img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  filter:grayscale(10%);

  transition:transform .35s ease;
}

.work-card:hover .work-image>img{
  transform:scale(1.025);
}

.work-info{
  min-height:0;
  flex:1;

  padding:11px 18px 13px;

  display:flex;
  flex-direction:column;
}

.card-number{
  margin-bottom:9px;

  color:#aaa;

  font-size:9px;
  letter-spacing:.08em;
}

.work-info h2{
  margin:0 0 7px;

  font-family:"IBM Plex Mono",monospace;

  font-size:16px;
  line-height:1.1;
  letter-spacing:.045em;

  font-weight:400;
}

.work-info p{
  max-width:440px;

  margin:0;

  color:#aaa;

  font-size:11.5px;
  line-height:1.42;
}

.card-link{
  width:max-content;

  margin-top:auto;
  padding-bottom:6px;

  border-bottom:1px solid #4c4c4c;

  color:#eee;

  font-size:9px;
  letter-spacing:.08em;
}

.card-link b{
  margin-left:12px;

  font-family:Arial,sans-serif;

  font-size:14px;
  font-weight:400;
}


/* ============================================================
   PUBLICATION CARD
   ============================================================ */

.publication-image{
  display:flex;
  align-items:center;
  justify-content:center;

  background:#151515;
}

.sheet{
  position:absolute;

  width:53%;
  height:78%;

  background:#d7d7d5;
  color:#151515;

  box-shadow:0 6px 20px rgba(0,0,0,.45);
}

.sheet-back{
  transform:rotate(8deg) translate(18px,-3px);

  background:#bcbcbc;
}

.sheet-front{
  transform:rotate(-3deg) translate(-7px,2px);

  padding:11px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.sheet-front span{
  font:7px "IBM Plex Mono";
  letter-spacing:.05em;
}

.sheet-front strong{
  font:8px "IBM Plex Mono";
  letter-spacing:.04em;
  line-height:1.3;
}

.sheet-front i{
  font:italic 8px "IBM Plex Mono";
}

.sheet-front em{
  font:6px "IBM Plex Mono";
  align-self:flex-end;
}


/* Wide viewport readability adjustments. */
@media(min-width:1700px){
  .hero-description{
    font-size:clamp(13px,.72vw,15px);
  }

  .section-label{
    font-size:clamp(11px,.58vw,13px);
  }

  .work-info p{
    font-size:clamp(11.5px,.60vw,13px);
  }

  .work-info h2{
    font-size:clamp(16px,.84vw,18px);
  }
}

/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1100px) and (min-width:801px){

  .site-header{
    padding:0 4vw;
  }

  .desktop-nav{
    gap:20px;
  }

  .landing{
    padding-left:4vw;
    padding-right:4vw;
  }

  .hero{
    grid-template-columns:50% 50%;
  }

  .hero-content{
    padding-right:3vw;
  }

  .hero h1{
    font-size:clamp(52px,5vw,76px);
  }

  .hero-description{
    font-size:12px;
  }

  .work-grid{
    gap:15px;
  }

  .work-image{
    height:85px;
    flex-basis:85px;
  }

  .hero-portrait img{
    object-fit:cover;
    object-position:right center;
  }
}


/* ============================================================
   SHORT / ZOOMED DESKTOP VIEWPORT
   ============================================================ */

@media(min-width:801px) and (max-height:850px){

  /*
     Short/zoomed desktop: let the page grow and scroll, but keep the
     fixed header completely independent of the page flow.
  */
  .site-header{
    position:fixed;
    top:0;
    left:0;
    height:70px;
    padding-top:0;
    padding-bottom:0;
    align-items:center;
  }

  .landing{
    height:auto;
    min-height:0;
    display:block;
    padding-top:70px;
    padding-bottom:28px;
  }

  .hero{
    min-height:560px;
    grid-template-columns:50% 50%;
  }

  .hero-content{
    align-self:center;
  }

  .hero h1{
    white-space:normal;
  }

  .hero-portrait{
    height:560px;
  }

  .selected-work{
    padding-top:22px;
  }

  .work-grid{
    height:auto;
    min-height:0;
  }

  .work-card{
    height:auto;
    min-height:245px;
  }
}

/* Narrow desktop and tablet adjustments. */
@media(min-width:801px) and (max-width:1100px){
  .hero h1{
    font-size:clamp(48px,5vw,68px);
  }

  .hero-subtitle{
    font-size:clamp(18px,1.8vw,25px);
  }

  .hero-description{
    font-size:12px;
  }

  .hero-buttons{
    gap:16px;
  }

  .cta{
    width:190px;
  }
}


/* ============================================================
   ZOOM-OUT COMPENSATION
   ============================================================ */

/*
   Browser zoom-out creates an unusually wide CSS viewport. The browser
   itself scales everything down, so use modestly larger minimum sizes at
   very wide viewports to keep the portfolio readable. These rules do not
   affect ordinary desktop widths.
*/
@media(min-width:2200px){
  .studio{
    font-size:15px;
  }

  .person{
    font-size:12px;
  }

  .desktop-nav a{
    font-size:10px;
  }

  .hero h1{
    font-size:clamp(76px,5.05vw,100px);
  }

  .hero-subtitle{
    font-size:clamp(25px,1.8vw,34px);
  }

  .hero-description{
    font-size:14px;
    line-height:1.6;
  }

  .role-line{
    font-size:12px;
  }

  .section-label{
    font-size:12px;
  }

  .section-label small{
    font-size:10px;
  }

  .work-info h2{
    font-size:18px;
  }

  .work-info p{
    font-size:13px;
  }

  .card-number,
  .card-link{
    font-size:10px;
  }
}

/* Extreme wide viewport spacing adjustment. */
@media(min-width:2600px){
  .landing{
    padding-top:78px;
    padding-bottom:24px;
  }

  .hero-description{
    max-width:700px;
  }

  .work-grid{
    gap:28px;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:800px){

  html,
  body{
    height:auto;
    overflow:auto;
  }

  .site-header{
    position:relative;

    height:65px;

    padding:0 6vw;

    border-bottom:1px solid var(--border);
  }

  .identity-rule,
  .person,
  .desktop-nav{
    display:none;
  }

  .studio{
    font-size:12px;
  }

  .mobile-toggle{
    display:block;

    border:0;

    background:transparent;

    padding:8px 0;

    cursor:pointer;
  }

  .mobile-toggle span{
    display:block;

    width:25px;
    height:1px;

    margin:6px 0;

    background:#fff;
  }

  .mobile-menu{
    position:absolute;
    z-index:40;

    top:65px;
    left:0;
    right:0;

    padding:22px 6vw;

    background:#050505;

    border-bottom:1px solid var(--border);

    flex-direction:column;

    gap:17px;
  }

  .mobile-menu.open{
    display:flex;
  }

  .mobile-menu a{
    font:10px "IBM Plex Mono";
    letter-spacing:.08em;
  }

  .landing{
    height:auto;
    min-height:0;

    padding:0 6vw 35px;

    display:block;
  }

  .hero{
    display:flex;
    flex-direction:column;
  }

  .hero-portrait{
    order:-1;

    height:58vh;
    min-height:390px;

    overflow:hidden;
  }

  .hero-portrait img{
    width:100%;
    height:100%;

    right:0;

    object-fit:cover;
    object-position:82% 31%;
  }

  /* Mobile: keep the fade strong at the image edge,
     but make its overall reach much shorter. */
  .hero-portrait::before{
    left:0;
    width:100%;
    background:linear-gradient(
      to right,
      rgba(5,5,5,.38) 0%,
      rgba(5,5,5,.30) 10%,
      rgba(5,5,5,.22) 20%,
      rgba(5,5,5,.15) 30%,
      rgba(5,5,5,.095) 40%,
      rgba(5,5,5,.05) 50%,
      rgba(5,5,5,.02) 60%,
      transparent 70%
    );
  }

  .hero-content{
    padding:50px 0 35px;
  }

  .hero h1{
    white-space:normal;

    font-size:clamp(48px,14vw,72px);
  }

  .hero-subtitle{
    font-size:20px;
  }

  .hero-description{
    font-size:13px;
  }

  .hero-buttons{
    flex-wrap:wrap;
    gap:12px;
  }

  .cta{
    flex:1;
    min-width:180px;
  }

  .selected-work{
    padding-top:35px;
  }

  .section-label{
    height:auto;
    margin-bottom:16px;
  }

  .section-label small{
    display:none;
  }

  .work-grid{
    height:auto;

    grid-template-columns:1fr;

    gap:14px;
  }

  .work-card{
    height:260px;
  }
}

/* ============================================================
   ROBUST BROWSER-ZOOM HANDLING
   ============================================================ */

/* High-zoom desktop header handling. */
@media(min-width:801px) and (max-height:850px){
  .site-header{
    position:fixed !important;
    top:0 !important;
    height:70px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    transform:none !important;
  }

  .landing{
    margin-top:0;
    padding-top:90px;
  }
}

/* Wide viewport scale adjustments. */
@media(min-width:3000px){
  body{ zoom:2; }
}

@media(min-width:2500px) and (max-width:2999px){
  body{ zoom:1.6; }
}

@media(min-width:1900px) and (max-width:2499px){
  body{ zoom:1.35; }
}

/* Narrow desktop heading adjustment. */
@media(min-width:801px) and (max-width:1100px){
  .hero h1{
    white-space:nowrap;
    font-size:clamp(44px,5vw,68px);
  }

  .hero-content{
    padding-right:2vw;
  }

  .hero-description{
    max-width:520px;
  }
}

/* High-zoom header and hero separation. */
@media(min-width:801px) and (max-height:850px){
  .site-header{
    height:42px !important;
    min-height:42px !important;
    padding:0 6vw !important;
    align-items:center !important;
  }

  .studio{
    font-size:11px;
  }

  .person{
    font-size:9px;
  }

  .desktop-nav a{
    font-size:8px;
    padding:4px 0;
  }

  .landing{
    padding-top:58px !important;
  }

  .hero{
    min-height:560px;
  }

  .hero-content{
    align-self:start !important;
    padding-top:150px;
  }
}

/* ============================================================
   HEADER BACKGROUND — keep navigation/identity clear of the hero
   ============================================================ */
.site-header{
  background:#050505 !important;
  z-index:1000 !important;
}