@font-face{
    font-family:'PP Neue Montreal';
    src: local('PP Neue Montreal'), local('PPNeueMontreal-Regular'), url('fonts/PPNeueMontreal-Regular.woff2') format('woff2');
    font-weight:400;
  }
  @font-face{
    font-family:'PP Neue Montreal';
    src: local('PP Neue Montreal Medium'), local('PPNeueMontreal-Medium'), url('fonts/PPNeueMontreal-Medium.woff2') format('woff2');
    font-weight:500;
  }

  :root{
    --bg:   #EFEFEC;
    --ink:  #121210;
    --mid:  #8B8A83;
    --line: #D9D8D2;
    --pill-bg:   #fff;
    --pill-text: #121210;
    --ease: cubic-bezier(.22,.61,.15,1);
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); overscroll-behavior:none; transition:background-color .5s ease, color .5s ease; }
  body{
    height:100vh; height:100dvh; overflow:hidden;
    font-family:'PP Neue Montreal','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:14px; line-height:1.5; letter-spacing:.005em;
    -webkit-font-smoothing:antialiased;
  }
  body.mobile-layout.about-active{ overflow:visible; height:auto; }

  a{ color:inherit; text-decoration:none; }
  .u{
    text-decoration:none; position:relative; color:var(--ink);
    transition: color .3s ease;
  }
  .u::before{
    content:''; position:absolute; inset:-6px -10px; border-radius:999px;
    background:var(--pill-bg); transform:scale(0.7); opacity:0; z-index:-1;
    pointer-events:none; transition: transform .45s var(--ease), opacity .3s ease, background-color .5s ease;
  }
  /* pill-text tracks the theme (dark text on the light pill) so contrast
     always mimics the same relationship regardless of which theme is active */
  .u:hover{ color:var(--pill-text); }
  .u:hover::before{ transform:scale(1); opacity:1; }
  button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }

  .ext-arrow{ display:inline-block; margin-left:3px; vertical-align:2px; }

  .stage{ position:relative; width:100vw; height:100vh; height:100dvh; overflow:hidden; }
  body.mobile-layout.about-active .stage{ height:auto; overflow:visible; }

  /* ---------------- header / chrome ---------------- */
  .chrome{
    position:fixed; inset:0; padding:28px 32px;
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
    pointer-events:none; z-index:65;
  }
  .chrome > *{ pointer-events:auto; }

  .brand{ grid-column:1; grid-row:1; align-self:start; justify-self:start; position:relative; z-index:70; }
  .brand span{ display:block; }
  .brand .name{ color:var(--ink); }

  .nav-about{ grid-column:2; grid-row:1; align-self:start; justify-self:end; position:relative; z-index:70; white-space:nowrap; }

  .foot-links{ grid-column:1; grid-row:2; align-self:end; justify-self:start; display:flex; gap:24px; color:var(--ink); }
  .foot-links .sep{ color:var(--mid); }
  .foot-tag{ grid-column:2; grid-row:2; align-self:end; justify-self:end; color:var(--ink); white-space:nowrap; }

  /* project chrome (side labels, carousel, scroll-hint) + frame + pill are
     faded in/out via a JS/GSAP timeline (see setAbout) rather than CSS,
     so the About transition can be sequenced instead of simultaneous. */

  /* ---------------- side labels (desktop) ---------------- */
  .side-label{ position:fixed; top:50%; transform:translateY(-50%); z-index:30; max-width:34vw; }
  .side-label.left{ left:32px; text-align:left; }
  .side-label.right{ right:32px; text-align:right; }
  .proj-meta-row{ display:flex; align-items:baseline; gap:16px; justify-content:flex-end; }
  .proj-credit{ color:var(--mid); }
  .proj-date{ color:var(--ink); }
  .side-label .char{ display:inline-block; will-change:transform, opacity; }
  .award-link{ margin-left:12px; color:var(--mid); }

  /* ---------------- frame ---------------- */
  .frame-wrap{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:20; }
  .frame-hover{ display:inline-block; transform-origin:center; }
  .frame{
    position:relative; display:block; overflow:hidden; background:#0b0b0a;
    border-radius:8px; will-change:width,height,transform,border-radius;
  }
  .frame .layer{ position:absolute; inset:0; opacity:0; z-index:1; }
  .frame .layer img, .frame .layer video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .frame .layer img[hidden], .frame .layer video[hidden]{ display:none; }

  /* ---------------- carousel ---------------- */
  .carousel{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); display:flex; align-items:flex-end; gap:9px; z-index:30; }
  .tick{ width:1px; height:11px; background:var(--mid); cursor:pointer; transform-origin:bottom;
    transition:height .4s var(--ease), width .4s var(--ease), background-color .3s ease; }
  .tick.near{ height:15px; }
  .tick.active{ height:22px; background:var(--ink); }
  .tick:hover{ background:var(--ink); }

  /* ---------------- about panel ---------------- */
  .about{
    position:fixed; inset:0; z-index:55; background:var(--bg);
    display:flex; align-items:center; justify-content:flex-start;
    opacity:0; visibility:hidden; pointer-events:none; padding-left:32px; padding-right:32px;
  }
  .about.open{ pointer-events:auto; }
  .about-body{ max-width:480px; }
  .about-body p{ margin:0 0 14px; }
  .about-links{ display:none; gap:24px; color:var(--ink); margin-top:22px; }
  .about-links .sep{ color:var(--mid); }
  .about-role{ display:none; color:var(--mid); margin-top:6px; }

  /* ---------------- cursor pill ---------------- */
  .cursor-pill{
    position:fixed; top:0; left:0; z-index:50; pointer-events:none; display:flex;
    align-items:center; justify-content:center; opacity:0;
  }
  .pill-bg{ position:absolute; inset:0; background:#fff; border-radius:999px; transform-origin:center; }
  .pill-text{ position:relative; padding:13px 22px; color:#121210; font-size:14px; white-space:nowrap; }
  @media (hover:none){ .cursor-pill{ display:none; } }

  /* ---------------- mobile stacked layout ---------------- */
  .mobile-stack{ display:none; }
  .m-title-group{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  .m-explore{ display:inline-flex; align-items:center; gap:4px; color:var(--mid); }
  .m-explore:active{ opacity:0.55; }
  .m-meta{ display:flex; flex-direction:column; align-items:center; gap:2px; }
  .m-credit{ color:var(--mid); }
  .m-date{ color:var(--ink); }
  .frame-slot{ flex:1 1 auto; width:100%; min-height:0; }

  @media (max-width:760px){
    .chrome{ padding:20px 18px; }
    .side-label{ display:none; }
    .foot-links, .foot-tag{ display:none; }
    .mobile-stack{
      display:flex; flex-direction:column; align-items:center; text-align:center;
      height:100dvh; padding:92px 24px 76px; gap:10px; position:relative; z-index:20;
    }
    body.about-active .mobile-stack{ display:none; }
    .about{
      top:0 !important; height:100dvh !important; display:block; overflow-y:auto;
      padding:88px 22px 40px; align-items:initial; justify-content:initial;
    }
    .about-links{ display:flex; }
    .about-role{ display:block; }
    .cursor-pill{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition-duration:.001s !important; animation-duration:.001s !important; }
  }