@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   Design source: Figma "portfolio 2026", 1920px reference frame.
   Values tagged "fig" below are measured from that file.
   Fluid rule: clamp(floor, value/1920*100vw, value) - the page
   reproduces the design 1:1 at 1920 and scales down proportionally.
   ============================================================ */

:root{
  /* palette — fig */
  --ink:#000000;          /* headings, card titles */
  --muted:#555555;        /* nav, chip labels */
  --chip-bg:#f3f3f3;      /* inactive filter pill + card tag */
  --chip-active-bg:#333333;
  --chip-active-fg:#ffffff;
  --media-bg:#f8f8f8;     /* card image placeholder */
  --bg:#ffffff;

  /* palette — not yet verified against Figma (cv / project pages) */
  --gray-600:#6b6b6b;
  --gray-400:#9b9b9b;
  --gray-200:#eeeeee;

  /* horizontal frame — fig: content 1758.89 inset 81.11 in a 1920 frame */
  --content:min(1758.89px, 91.6089vw);
  --side-pad:clamp(20px, 4.2245vw, 81.11px);

  /* vertical rhythm — fig */
  --nav-pt:clamp(20px, 2.9167vw, 56px);        /* nav top 56 */
  --nav-pb:clamp(8px, 1.0417vw, 20px);         /* bar breathing room (sticky) */
  --nav-line:clamp(18px, 1.4583vw, 28px);      /* nav row height 28 */
  --nav-h:calc(var(--nav-pt) + var(--nav-pb) + var(--nav-line));
  --hero-pt:clamp(28px, 7.8354vw, 150.44px);   /* nav bottom -> h1 top = 170.44 */
  --hero-gap:clamp(20px, 3.0094vw, 57.78px);   /* h1 -> filter row = 57.78 */
  --filters-mb:clamp(40px, 8.8802vw, 170.5px); /* filter row -> grid = 170.5 */

  /* type scale — fig: Poppins Light 300, line-height 108%, tracking -2% */
  --fs-nav:clamp(13px, 1.3359vw, 25.65px);     /* 25.65 */
  --fs-h1:clamp(30px, 4.5594vw, 87.54px);      /* 87.54 */
  --fs-card:clamp(19px, 1.7958vw, 34.48px);    /* 34.48 */
  --fs-tag:clamp(11px, 1.0927vw, 20.98px);     /* derived: 36 box - 6.67*2 pad @108% */

  /* project-page scale - refinement, extends the same 1920 reference */
  --fs-project:clamp(28px, 2.2917vw, 44px);   /* sits between h1 87.54 and card 34.48 */
  --fs-body:clamp(15px, 1.09375vw, 21px);     /* running prose, measured for the wider column */
  --fs-meta:clamp(11px, 0.8333vw, 16px);      /* labels, credits, footer */
  --stack-top:calc(var(--nav-h) + 24px);      /* where the text column and the media cards pin */
  --body:#333333;
  --rule:#dcdcdc;

  --ease:cubic-bezier(.22,.9,.32,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.5;
}
img{max-width:100%;display:block;image-rendering:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}

h1,h2{
  font-family:'Poppins', sans-serif;
  font-weight:300;          /* fig: Light, not Medium */
  margin:0;
  line-height:1.08;         /* fig: 108% */
  letter-spacing:-0.02em;   /* fig: -2% */
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- NAV ----------
   fig: row at top 56, left 81, width 1759, height 28, sticky,
   space-between (Contact lands near centre but is not centred). */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  width:var(--content);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--nav-pt) 0 var(--nav-pb);
  background:var(--bg);
  font-size:var(--fs-nav);
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--muted);
}
.nav a{transition:color .2s var(--ease);}
.nav a:hover, .nav a.active{color:var(--ink);}

/* ---------- HOMEPAGE ---------- */
.hero{
  text-align:center;
  padding:var(--hero-pt) var(--side-pad) 0;
}
.hero h1{font-size:var(--fs-h1);}

.filters{
  display:flex;
  justify-content:center;
  gap:clamp(6px, 0.4672vw, 8.97px);          /* fig: 8.97 */
  flex-wrap:wrap;
  padding:var(--hero-gap) var(--side-pad) var(--filters-mb);
}
.filter-pill{
  border:none;
  cursor:pointer;
  background:var(--chip-bg);                  /* fig: #F3F3F3 */
  color:var(--muted);
  padding:clamp(6px, 0.4vw, 7.68px) clamp(12px, 1.2005vw, 23.05px);  /* fig: 7.68 / 23.05 */
  border-radius:999px;
  height:clamp(28px, 2.2016vw, 42.27px);      /* fig: 42.27 */
  display:inline-flex;
  align-items:center;
  font-size:var(--fs-nav);                    /* fig: same 25.65 as nav */
  font-weight:300;
  line-height:1.08;
  letter-spacing:-0.02em;
  transition:background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
}
.filter-pill:hover{transform:translateY(-1px);}
.filter-pill.active{
  background:var(--chip-active-bg);           /* fig: #333333 */
  color:var(--chip-active-fg);
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:clamp(16px, 4.1089vw, 78.89px);  /* fig: 78.89 */
  row-gap:clamp(32px, 4.1667vw, 80px);        /* fig: 80 */
  width:var(--content);
  margin:0 auto;
  padding:0 0 clamp(56px, 6.25vw, 120px);
}
@media (max-width:800px){
  .grid{grid-template-columns:1fr; row-gap:44px;}
}

.card{
  opacity:1;
  transform:scale(1);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.card.is-hidden{
  opacity:0;
  transform:scale(.97);
  pointer-events:none;
  position:absolute;
  visibility:hidden;
}

.card__link{display:block;}
.card__media{
  position:relative;
  aspect-ratio:840/536.67;      /* fig: media 841.11 x 536.67 in an 840 card; use the card width */
  overflow:hidden;
  border-radius:0;              /* fig: square corners */
  background:var(--media-bg);   /* fig: #F8F8F8 */
}
.card__media img,
.card__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.card__link:hover .card__media img,
.card__link:hover .card__media video{
  transform:scale(1.045);
}
.card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.14), rgba(0,0,0,0) 40%);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.card__link:hover .card__media::after{opacity:1;}

.card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:clamp(14px, 4.0276vw, 77.33px);  /* fig: media -> title = 77.33 */
}
.card__title{
  font-size:var(--fs-card);                   /* fig: 34.48 */
  color:var(--ink);
}
.card__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-card);
  line-height:1.08;
  transition:transform .3s var(--ease);
}
.card__link:hover .card__arrow{transform:translateX(6px);}

.card__tags{
  display:flex;
  gap:clamp(6px, 0.4052vw, 7.78px);           /* fig: 7.78 */
  flex-wrap:wrap;
  margin-top:clamp(8px, 1.2729vw, 24.44px);   /* fig: title -> tags = 24.44 */
}
.tag{
  background:var(--chip-bg);                  /* fig: #F3F3F3 */
  color:var(--muted);
  font-size:var(--fs-tag);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-0.02em;
  padding:clamp(4px, 0.3474vw, 6.67px) clamp(10px, 1.0417vw, 20px);  /* fig: 6.67 / 20 */
  border-radius:999px;
}

.empty-state{
  text-align:center;
  padding:80px 20px;
  color:var(--gray-400);
  display:none;
}
.empty-state.is-visible{display:block;}

/* ---------- PROJECT PAGE ----------
   Refinement, not a redesign: the sidebar is set as a gallery wall
   label - hairline anchored to the same top line as the artwork,
   credit line as a footnote below a second rule. Display type keeps
   the tight 108% of the design system; prose loosens to 1.55 because
   reading a paragraph is a different job from reading a title. */
.project{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);  /* text 45.5% / work 54.5% */
  column-gap:clamp(24px, 3.125vw, 60px);
  width:var(--content);
  margin:0 auto;
  padding:clamp(14px, 1.25vw, 24px) 0 clamp(72px, 6.25vw, 120px);
  align-items:start;
}
.project__info{
  align-self:start;
  border-top:1px solid var(--rule);
  padding-top:clamp(14px, 1.25vw, 24px);
}

/* Text column keeps its own scroll; media stacks as cards. Desktop only -
   an inner scroll area and pinned cards both fight the touch scroll. */
@media (min-width:881px){
  .project__info{
    position:sticky;
    top:var(--stack-top);
    height:calc(100vh - var(--stack-top) - 24px);
    overflow-y:auto;
    padding-right:16px;
    scrollbar-width:thin;
    scrollbar-color:var(--rule) transparent;
  }
  .project__info::-webkit-scrollbar{width:4px;}
  .project__info::-webkit-scrollbar-track{background:transparent;}
  .project__info::-webkit-scrollbar-thumb{background:var(--rule); border-radius:999px;}

  /* Only items that fit the viewport can pin - a taller sheet would
     freeze at the top and hide its own content. main.js sets the class. */
  .project__media > .is-stacked{
    position:sticky;
    top:var(--stack-top);
    box-shadow:0 -16px 34px rgba(0,0,0,0.14);
  }
}
.project__year{
  font-size:var(--fs-meta);
  letter-spacing:0;
  line-height:1.4;
  color:var(--muted);
  margin:0 0 clamp(10px, 0.9375vw, 18px);
}
.project__title{
  font-size:var(--fs-project);
  color:var(--ink);
  margin-bottom:clamp(12px, 1.0417vw, 20px);
}
.project__tags{
  display:flex;
  gap:clamp(6px, 0.4052vw, 7.78px);
  flex-wrap:wrap;
  margin-bottom:clamp(18px, 1.6667vw, 32px);
}
.project__desc p{
  font-size:var(--fs-body);
  line-height:1.55;
  letter-spacing:0;
  color:var(--body);
  margin:0 0 1em;
}
.project__desc p:last-child{
  margin-bottom:0;
  margin-top:clamp(16px, 1.4583vw, 28px);
  padding-top:clamp(10px, 0.8333vw, 16px);
  border-top:1px solid var(--rule);
}
.project__desc em{
  font-style:normal;
  font-size:var(--fs-meta);
  letter-spacing:0;
  color:var(--muted);
}
.project__back{
  display:inline-block;
  margin-top:clamp(20px, 1.6667vw, 32px);
  font-size:var(--fs-meta);
  letter-spacing:0;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.project__back:hover{color:var(--ink); border-bottom-color:var(--ink);}

.project__media{display:flex; flex-direction:column; gap:0;}
/* Every item is positioned so paint order follows DOM order: a later item
   always covers an earlier pinned one. Without this the sticky items paint
   above the static ones and content slides behind them. */
.project__media > *{position:relative;}
.project__media img,
.project__media video{width:100%; height:auto; display:block;}

.project__video{
  background:#000;
  object-fit:contain;
  max-height:80vh;
}
.project__video--fill{
  background:none;
  object-fit:cover;
  max-height:none;
}
.project__video--dark{
  background:#27242d;
  object-fit:contain;
  max-height:none;
}

@media (max-width:880px){
  .project{grid-template-columns:1fr; row-gap:clamp(24px, 3vw, 40px);}
}

/* ---------- CONTACT / CV ----------
   Not yet verified against the Figma cv / contact frames. */
.simple-page{
  min-height:calc(100vh - var(--nav-h));
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px var(--side-pad);
}
.simple-page h1{font-size:clamp(40px,6vw,64px); margin-bottom:36px;}
.simple-page__list{
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 1.4583vw, 28px);
  font-size:var(--fs-card);
  color:var(--muted);
}
.simple-page__list a:hover{color:var(--ink);}

.cv-page{max-width:900px; margin:0 auto; padding:48px var(--side-pad) 120px;}
.cv-header{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px; border-bottom:1px solid var(--gray-200); padding-bottom:28px; margin-bottom:40px;}
.cv-header h1{font-size:clamp(34px,5vw,48px);}
.cv-header__contact{color:var(--gray-600); font-size:15px; display:flex; gap:16px; align-items:center;}
.cv-header__contact .dot{color:var(--gray-400);}
.cv-header__contact a{transition:color .2s var(--ease);}
.cv-header__contact a:hover{color:var(--ink);}
.cv-section{margin-bottom:44px;}
.cv-section h2{font-size:22px; margin-bottom:22px;}
.cv-role{margin-bottom:28px;}
.cv-role h3{font-size:18px; font-weight:400; margin:0 0 4px;}
.cv-role .meta{font-size:14px; font-weight:500; color:var(--gray-600); margin-bottom:10px;}
.cv-role ul{padding-left:18px;}
.cv-role li{font-size:14.5px; color:#3a3a3a; margin-bottom:5px; list-style:disc;}
.cv-langs{display:flex; gap:28px; flex-wrap:wrap; font-size:17px;}
.cv-langs b{font-weight:500;}

footer.site-footer{
  width:var(--content);
  margin:0 auto;
  text-align:center;
  border-top:1px solid var(--rule);
  padding:clamp(20px, 1.875vw, 36px) 0 clamp(32px, 2.5vw, 48px);
  color:var(--muted);
  font-size:var(--fs-meta);
  letter-spacing:0;
}

/* ---------- MOBILE ----------
   The Figma file has dedicated "* mobile" frames that have NOT been
   measured yet. These rules are the previous hand-tuned breakpoint,
   re-pointed at the corrected type and colour tokens. */
@media (max-width:600px){
  .nav{
    width:auto;
    padding:20px 20px;
    font-size:13.5px;
  }
  .hero{padding:36px 20px 0;}
  .hero h1{font-size:30px;}

  .filters{
    padding:20px 20px 36px;
    gap:8px;
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none;}
  .filter-pill{
    padding:8px 16px;
    font-size:13px;
    flex:0 0 auto;
  }

  .grid{width:auto; row-gap:36px; padding:0 20px 72px;}
  .card__title{font-size:19px;}
  .card__arrow{font-size:19px;}
  .card__row{margin-top:14px;}
  .card__tags{margin-top:10px;}

  .project{
    width:auto;
    grid-template-columns:1fr;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    row-gap:28px;
  }
  .project__info{
    margin:24px 20px 0;
    padding-top:16px;
  }
  .project__title{font-size:30px;}
  .project__media{gap:0;}

  .simple-page{padding:60px 20px;}
  .simple-page__list{font-size:17px; gap:16px;}

  .cv-page{padding:32px 20px 80px;}
  .cv-header{flex-direction:column; align-items:flex-start; gap:6px; padding-bottom:20px; margin-bottom:28px;}
  .cv-header__contact{font-size:13.5px;}

  footer.site-footer{width:auto; margin:0 20px;}
}