/* Shared motion and navigation for Works, Highlights, and About. */
.navbar .nav-links a{position:relative}.navbar .nav-links a::after{position:absolute;right:0;bottom:-6px;left:0;height:1px;background:currentColor;content:"";transform:scaleX(0);transform-origin:right;transition:transform 250ms ease}.navbar .nav-links a:hover::after,.navbar .nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left}.navbar .logo img{transition:opacity 220ms ease,transform 320ms cubic-bezier(.22,1,.36,1)}.navbar .logo:hover img{opacity:.82;transform:translateY(-2px)}
.interior-page-transition{position:fixed;inset:0;z-index:2000;background:rgba(28,31,31,.42);opacity:0;pointer-events:none;backdrop-filter:blur(0);transition:opacity 420ms cubic-bezier(.22,1,.36,1),backdrop-filter 420ms ease}body.interior-is-leaving .interior-page-transition{opacity:1;backdrop-filter:blur(14px)}
body.interior-page-loading header,body.interior-page-loading .works-container,body.interior-page-loading .highlights-container,body.interior-page-loading .about-container,body.interior-page-loading footer{opacity:0;transform:translateY(-14px)}header,.works-container,.highlights-container,.about-container,footer{transition:opacity 800ms cubic-bezier(.34,1.56,.64,1),transform 800ms cubic-bezier(.34,1.56,.64,1)}.works-container,.highlights-container,.about-container{transition-delay:90ms}body.interior-is-leaving header,body.interior-is-leaving .works-container,body.interior-is-leaving .highlights-container,body.interior-is-leaving .about-container,body.interior-is-leaving footer{opacity:0;transform:scale(.992);transition:opacity 360ms ease,transform 420ms cubic-bezier(.22,1,.36,1)}

/* Header uses the homepage's percentage-based geometry, without a large-screen cap. */
.interior-header{position:fixed;inset:0 0 auto;z-index:1000;height:76px;background:transparent}.interior-header .navbar{position:absolute;top:0;right:4%;left:4%;display:flex;align-items:center;justify-content:space-between;width:92%;height:auto;margin:3vh 0}.interior-header .logo{display:flex;align-items:center;transform:scale(1.2)}.interior-header .logo img{width:auto;height:28px}.interior-header .navbar .nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}.interior-header .navbar .nav-links a{color:#fff;font-size:13px;letter-spacing:.02em;text-transform:uppercase}

/* Preserve the original desktop composition and internal content scrolling. */
body.works-page,body.highlights-page,body.about-page{width:100%;height:100vh;overflow:hidden}body>canvas{position:fixed!important;inset:0;z-index:-2}.works-page .works-container,.highlights-page .highlights-container{position:absolute;top:65px;right:0;bottom:0;left:3.8%;width:auto;min-height:0;padding:0 64px 200px;overflow:auto}.works-page .works-quote-section,.highlights-page .highlights-quote-section{margin:80px auto}.works-page .works-quote-text,.highlights-page .highlights-quote-text{font-size:32px}.works-page .ra-section{margin-right:56px;margin-bottom:-64px}.highlights-page .highlights-section{margin:0 56px 56px 0}
@media(min-width:1201px){.works-page .ra-gallery{grid-template-columns:repeat(auto-fit,clamp(210px,16.8vw,260px));justify-content:start}}

/* About keeps its fixed glass frame; only the left text column scrolls. */
.about-page .about-container{position:absolute;top:85px;right:3.8%;bottom:90px;left:3.8%;box-sizing:border-box;width:auto;min-height:0;margin:0;padding:20px;overflow:hidden}.about-page .left{min-height:0;overflow:auto}.about-page .right{position:static;flex:0 0 280px;min-width:280px;max-width:360px;overflow:hidden}.about-page footer{position:fixed;right:4%;bottom:0;left:4%;width:92%;margin:0}

.interior-menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;padding:0;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(70,70,70,.34);box-shadow:inset 0 1px rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.1);backdrop-filter:blur(20px) saturate(140%);cursor:pointer}.interior-menu-toggle span{width:15px;height:1px;background:currentColor;transition:transform 300ms cubic-bezier(.22,1,.36,1)}.interior-menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.interior-menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}

@media(max-width:1024px){.interior-header .navbar{right:24px;left:24px;width:calc(100% - 48px)}.works-page .works-container,.highlights-page .highlights-container{left:24px;padding-right:32px;padding-left:46px}.works-page .ra-section,.highlights-page .highlights-section{margin-right:20px}.works-page .rail-label,.highlights-page .highlights-rail-label{translate:-44px}.about-page .about-container{right:24px;left:24px;gap:16px}.about-page .left{padding:28px}.about-page .right{flex-basis:260px;min-width:240px;padding:28px}}

@media(max-width:600px){body.works-page,body.highlights-page,body.about-page{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}.interior-header{height:72px;z-index:80}.interior-header .navbar{right:20px;left:20px;width:calc(100% - 40px);margin:3vh 0;align-items:flex-start}.interior-header .logo{z-index:2}.interior-menu-toggle{display:flex;position:relative;z-index:2;width:44px;height:44px;background:rgba(55,58,58,.3);border-color:rgba(255,255,255,.2);backdrop-filter:blur(12px)}.interior-menu-toggle span{position:absolute;width:15px;height:1px}.interior-menu-toggle span:first-child{top:17px}.interior-menu-toggle span:last-child{top:23px}.interior-menu-toggle[aria-expanded=true] span:first-child{top:20px;transform:rotate(45deg)}.interior-menu-toggle[aria-expanded=true] span:last-child{top:20px;transform:rotate(-45deg)}.interior-header .navbar .nav-links{position:absolute;top:-8px;right:-6px;display:grid;grid-template-columns:1fr;align-items:stretch;gap:0;width:min(224px,calc(100vw - 36px));box-sizing:border-box;margin:0;padding:66px 16px 13px;border:1px solid rgba(255,255,255,.18);border-radius:28px;background:rgba(42,45,45,.76);box-shadow:0 20px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.16);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;backdrop-filter:blur(20px);transition:opacity 250ms ease,transform 350ms cubic-bezier(.22,1,.36,1)}.interior-header .navbar .nav-links.is-open{opacity:1;transform:none;pointer-events:auto}.interior-header .navbar .nav-links a{width:100%;min-height:52px;padding:13px 10px;border-top:1px solid rgba(255,255,255,.13);font-size:15px;font-weight:400;letter-spacing:.01em;text-align:left;text-transform:none}.interior-header .navbar .nav-links a:first-child{border-top:0}.interior-header .navbar .nav-links a::after{display:none}
.works-page .works-container,.highlights-page .highlights-container{position:relative;inset:auto;box-sizing:border-box;width:100%;min-height:100vh;padding:92px 18px 100px;overflow:visible}.works-page .works-quote-section,.highlights-page .highlights-quote-section{margin:26px auto 62px;padding:0}.works-page .works-quote-text,.highlights-page .highlights-quote-text{font-size:clamp(23px,7vw,29px)}.works-page .ra-section,.highlights-page .highlights-section{display:block;margin:0 0 72px}.works-page .rail-label,.highlights-page .highlights-rail-col,.about-page .about-rail-col{display:block;position:static;width:auto;margin:0 0 22px;padding:0}.works-page .rail-label,.highlights-page .highlights-rail-label,.about-page .about-rail-label{position:static;display:block;margin:0;translate:none;transform:none;writing-mode:horizontal-tb;text-orientation:mixed;font-size:12px;line-height:1.3;letter-spacing:.08em}.works-page .ra-gallery{grid-template-columns:1fr;padding:28px 0 56px}.highlights-page .highlights-section-body{padding-top:0;transform:none}.highlights-page .highlights-list{padding-left:0}.about-page .about-section{display:block}.about-page .about-section-body{transform:none}
.about-page .about-container{position:relative;inset:auto;display:flex;flex-direction:column;width:calc(100% - 36px);min-height:auto;margin:92px auto 34px;padding:24px 20px 32px;gap:46px;overflow:visible}.about-page .left,.about-page .right{width:100%;min-width:0;max-width:none;padding:0;overflow:visible}.about-page .right{flex:none}.about-page footer{position:relative;inset:auto;width:calc(100% - 36px);margin:0 auto 14px}.about-page .footer-navbar{gap:16px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.navbar .nav-links a::after,.navbar .logo img,.interior-page-transition,header,.works-container,.highlights-container,.about-container,footer{transition-duration:1ms!important}}

/* Works and Highlights use native document scrolling. The header stays fixed,
   while the content participates in the page flow instead of owning a scroller. */
body.works-page,
body.highlights-page {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.works-page .works-container,
.highlights-page .highlights-container {
  position: relative;
  inset: auto;
  left: 3.8%;
  box-sizing: border-box;
  width: 96.2%;
  min-height: calc(100vh - 65px);
  margin-top: 65px;
  overflow: visible;
}

@media (max-width: 1024px) {
  .works-page .works-container,
  .highlights-page .highlights-container {
    left: 24px;
    width: calc(100% - 24px);
  }
}

@media (max-width: 600px) {
  .works-page .works-container,
  .highlights-page .highlights-container {
    left: auto;
    width: 100%;
    margin-top: 0;
  }
}

/* Homepage-like staged reveal: expose content groups, not a single framed shell. */
body.interior-page-loading .interior-header,
body.interior-page-loading .works-quote-section,
body.interior-page-loading .highlights-quote-section,
body.interior-page-loading .ra-section,
body.interior-page-loading .highlights-section,
body.interior-page-loading .about-container,
body.interior-page-loading footer { opacity:0; transform:translateY(-14px); }
body.interior-page-loading .works-container,
body.interior-page-loading .highlights-container { opacity:1; transform:none; }
.interior-header,.works-quote-section,.highlights-quote-section,.ra-section,.highlights-section,.about-container,footer { transition:opacity 800ms cubic-bezier(.34,1.56,.64,1),transform 800ms cubic-bezier(.34,1.56,.64,1); }
.works-quote-section,.highlights-quote-section{transition-delay:70ms}.ra-section:nth-of-type(2),.highlights-section:nth-of-type(2){transition-delay:140ms}.ra-section:nth-of-type(3),.highlights-section:nth-of-type(3){transition-delay:210ms}.about-container{transition-delay:100ms}footer{transition-delay:250ms}
@media(min-width:1201px){.works-page .ra-gallery{grid-template-columns:repeat(auto-fill,minmax(220px,260px));justify-content:start;gap:clamp(18px,1.45vw,28px)}}

/* Works category labels sit above each gallery instead of forming a side rail. */
.works-page .ra-section {
  display: block;
  margin: 0 56px 0 0;
}
.works-page .rail-label {
  position: static;
  display: block;
  width: auto;
  margin: 0 0 0 var(--gapX);
  padding: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
  translate: none;
  opacity: .9;
}
.works-page .section-body {
  display: block;
  margin: 0;
}

@media (max-width: 1024px) {
  .works-page .ra-section { margin-right: 20px; }
}

@media (max-width: 600px) {
  .works-page .ra-section { margin: 0 0 56px; }
  .works-page .rail-label { margin: 0; font-size: 12px; }
  .works-page .ra-gallery { padding-top: 28px; padding-bottom: 28px; }
}

/* ================================================================
   Works gallery — Refik Anadol–inspired grid system

   Desktop keeps four square cells inside the reference's capped
   1560px working grid (an 1800px canvas minus 120px on each side). At the
   reference site's mobile breakpoint the cards become persistent
   image-and-information tiles instead of relying on hover content.
   ================================================================ */
body.works-page {
  --works-edge: clamp(34px, 6.25vw, 120px);
  --works-gap: 25px;
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
}

.works-page .works-container {
  --gapX: var(--works-gap);
  --padTop: clamp(52px, 4vw, 72px);
  --padBottom: clamp(88px, 7vw, 118px);
  position: relative;
  inset: auto;
  box-sizing: border-box;
  width: min(1560px, calc(100% - var(--works-edge) - var(--works-edge)));
  min-height: 100vh;
  margin: 0 auto;
  padding: 148px 0 180px;
  overflow: visible;
}

.works-page .works-quote-section {
  width: min(900px, 82%);
  margin: 34px auto clamp(108px, 10vw, 168px);
  padding: 0;
}

.works-page .works-quote-text {
  margin: 0;
  font-size: clamp(28px, 2.15vw, 40px);
  line-height: 1.35;
}

.works-page .ra-section {
  display: block;
  width: 100%;
  margin: 0 0 clamp(92px, 8vw, 136px);
}

.works-page .rail-label {
  position: static;
  display: block;
  width: auto;
  margin: 0 0 32px;
  padding: 0;
  color: rgba(255, 255, 255, .86);
  font-family: 'Heebo', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .09em;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
  translate: none;
}

.works-page .section-body {
  display: block;
  width: 100%;
}

.works-page .ra-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--works-gap);
  width: 100%;
  padding: var(--padTop) var(--works-gap) var(--padBottom);
  margin: calc(-1 * var(--padTop)) calc(-1 * var(--works-gap)) calc(-1 * var(--padBottom));
}

.works-page .ra-card {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
}

.works-page .ra-clip {
  width: 100%;
  height: 100%;
  background: rgba(18, 18, 18, .18);
}

.works-page .ra-clip img {
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1), filter 500ms ease;
}

.works-page .ra-card:hover .ra-clip img,
.works-page .ra-card:focus-visible .ra-clip img {
  transform: scale(1.025);
}

.works-page .ra-card::after,
.works-page .ra-panel {
  transition-duration: 320ms;
}

.works-page .ra-card:focus-visible {
  z-index: 200;
  outline: none;
}

.works-page .ra-card:focus-visible::after,
.works-page .ra-card:focus-visible .ra-panel {
  opacity: 1;
}

/* Refik's desktop grid remains four columns up to its 1800px cap. */
@media (min-width: 1025px) {
  .works-page .ra-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--works-gap);
  }
}

/* The reference switches to persistent information cards at 1024px. */
@media (max-width: 1024px) {
  body.works-page {
    --works-edge: clamp(28px, 5.85vw, 60px);
    --works-gap: 10px;
  }

  .works-page .works-container {
    left: auto;
    width: calc(100% - var(--works-edge) - var(--works-edge));
    margin: 0 auto;
    padding: 128px 0 128px;
  }

  .works-page .works-quote-section {
    width: min(760px, 90%);
    margin: 32px auto 96px;
  }

  .works-page .ra-section {
    margin: 0 0 84px;
  }

  .works-page .rail-label {
    margin-bottom: 24px;
    font-size: 12px;
  }

  .works-page .ra-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--works-gap);
    margin: 0;
    padding: 0;
  }

  .works-page .ra-card {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(27, 29, 29, .42);
    backdrop-filter: blur(10px);
  }

  .works-page .ra-clip {
    flex: none;
    aspect-ratio: 1;
    height: auto;
  }

  .works-page .ra-card::after {
    display: none;
  }

  .works-page .ra-panel {
    position: relative;
    inset: auto;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 118px;
    padding: 13px 14px 16px;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: none;
  }

  .works-page .ra-meta,
  .works-page .ra-bottom {
    position: static;
    inset: auto;
  }

  .works-page .ra-meta {
    order: 2;
    margin-top: auto;
    padding-top: 16px;
    font-size: 10px;
    white-space: normal;
    opacity: .72;
  }

  .works-page .ra-bottom {
    order: 1;
  }

  .works-page .ra-title {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.2;
    white-space: normal;
  }

  .works-page .ra-tags {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    opacity: .72;
  }

  .works-page .works-container::before {
    display: none;
  }
}

@media (max-width: 700px) {
  body.works-page {
    --works-edge: 18px;
  }

  .works-page .works-container {
    width: calc(100% - 36px);
    padding: 106px 0 96px;
  }

  .works-page .works-quote-section {
    width: 100%;
    margin: 24px auto 76px;
  }

  .works-page .works-quote-text {
    font-size: clamp(24px, 7vw, 30px);
  }

  .works-page .ra-section {
    margin-bottom: 70px;
  }

  .works-page .ra-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-page .ra-panel {
    min-height: 124px;
    padding: 12px 11px 14px;
  }

  .works-page .ra-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding-top: 13px;
  }

  .works-page .ra-date {
    display: none;
  }

  .works-page .ra-title {
    font-size: 15px;
  }
}

@media (max-width: 390px) {
  .works-page .ra-panel {
    min-height: 118px;
  }

  .works-page .ra-title {
    font-size: 14px;
  }

  .works-page .ra-tags {
    font-size: 10px;
  }
}