*{box-sizing:border-box}

:root{
  --u:4.166666667vw;
  --page-x:var(--u);
  --gap:calc(var(--u) * 2);
  --bg:#fff;
  --fg:#000;
  --inverse-source:#fff;
  --muted:.42;
}

html[data-theme="dark"]{
  --bg:#000;
  --fg:#fff;
}

html[data-theme="blue"]{
  --bg:#2450FF;
  --fg:#fff;
}

html[data-theme="magenta"]{
  --bg:#FF00A8;
  --fg:#000;
}

html[data-theme="green"]{
  --bg:#123D2C;
  --fg:#fff;
}

html[data-theme="yellow"]{
  --bg:#F4FF55;
  --fg:#000;
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Fragment Mono",monospace;
  font-weight:500;
  font-size:13px;
  line-height:1.15;
  transition:background-color .18s ease,color .18s ease;
}

body{min-height:100vh}

button,a{
  font:inherit;
  font-size:13px;
  font-weight:500;
  color:inherit;
}

button{
  border:0;
  background:none;
  padding:0;
}

a{text-decoration:none}

.instrument-copy{
  font-family:"Public Sans",sans-serif;
  font-weight:400;
  font-size:13px;
}

/* HEADER */
.topbar{
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  right:0;
  padding:18px var(--page-x) 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  color:var(--inverse-source);
  background:transparent;
  mix-blend-mode:difference;
  pointer-events:none;
  font-size:13px;
}

.topbar button,
.topbar nav,
.topbar .brand{
  pointer-events:auto;
}

.brand{
  display:flex;
  justify-self:start;
  align-items:center;
  height:1em;
}

.brand img{
  display:block;
  width:auto;
  height:.78em;
  filter:brightness(0) invert(1);
}

nav{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:18px;
  font-size:13px;
}

.nav-btn{
  opacity:var(--muted);
  font-size:13px;
}

.nav-btn.is-active{opacity:1}

/* SIDE THEME CONTROLS */
.theme-rail{
  position:fixed;
  z-index:1200;
  top:50%;
  transform:translateY(-50%);
  pointer-events:auto;
}

.theme-rail--left{
  left:0;
  width:28px;
  display:flex;
  justify-content:center;
}

.side-theme-toggle{
  transform:rotate(-90deg);
  transform-origin:center;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  color:#fff;
  background:var(--bg);
  padding:2px 4px;
  transition:background-color .18s ease;
}

/* Keep the background-coloured mask, while the lettering behaves like the header/footer. */
.side-theme-toggle > span{
  mix-blend-mode:difference;
}

.side-theme-toggle .theme-divider{opacity:.35}

html[data-theme="light"] .theme-light{opacity:1}
html[data-theme="light"] .theme-dark{opacity:var(--muted)}
html[data-theme="dark"] .theme-light{opacity:var(--muted)}
html[data-theme="dark"] .theme-dark{opacity:1}

html[data-theme="blue"] .theme-light,
html[data-theme="blue"] .theme-dark,
html[data-theme="magenta"] .theme-light,
html[data-theme="magenta"] .theme-dark,
html[data-theme="green"] .theme-light,
html[data-theme="green"] .theme-dark,
html[data-theme="yellow"] .theme-light,
html[data-theme="yellow"] .theme-dark{
  opacity:var(--muted);
}

.theme-rail--right{
  right:0;
  width:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.color-swatch{
  width:10px;
  height:10px;
  background:var(--swatch);
  border:1px solid rgba(127,127,127,.55);
  flex:0 0 auto;
  font-size:13px;
}

.color-swatch.is-active{
  outline:1px solid var(--fg);
  outline-offset:3px;
}

/* WORK */
.project-stream{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:calc(var(--u) * 2);
  align-items:start;
  padding-top:58px;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
  padding-bottom:calc(var(--gap) + 48px);
}

.project-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.project-card{
  width:100%;
  margin:0;
}

.project-card img,
.project-card .work-preview-video{
  display:block;
  width:100%;
  height:auto;
}

.project-card .work-preview-video{
  border:0;
  background:transparent;
}

.project-caption{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-top:8px;
  font-size:13px;
}

.preview-title{
  font-weight:500;
  font-size:13px;
}

.project-caption span:last-child{
  text-align:right;
  opacity:.52;
  font-size:13px;
}

/* CONTACT */
.contact-view{
  min-height:100vh;
  padding:70px var(--page-x) calc(var(--gap) + 60px);
}

.contact-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:var(--gap);
}

.contact-copy{
  max-width:720px;
  font-size:13px;
  line-height:1.35;
}

.contact-copy p{
  margin:0 0 1.1em;
  font-size:13px;
}

.contact-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 22px;
  align-content:start;
  font-size:13px;
  line-height:1.35;
}

.contact-meta h3,
.project-meta h3{
  margin:0 0 12px;
  font-family:"Fragment Mono",monospace;
  font-size:13px;
  font-weight:500;
  opacity:var(--muted);
}

.contact-meta p,
.project-meta p{
  margin:0;
  font-family:"Fragment Mono",monospace;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
}

.contact-meta>div:last-child{grid-column:1/-1}

/* PROJECT PAGE */
body.project-page{overflow:hidden}
.project-view{height:100vh;overflow:hidden}

.project-split{
  height:100vh;
  display:grid;
  grid-template-columns:calc(var(--u) * 10) calc(var(--u) * 11);
  column-gap:var(--u);
  padding-left:var(--page-x);
  padding-right:var(--page-x);
}

.project-media-panel{
  min-width:0;
  height:100vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding-top:58px;
  padding-bottom:var(--gap);
}

.project-media-panel::-webkit-scrollbar{display:none}

.project-media-list{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.project-media-list img,
.project-media-list video{
  display:block;
  width:100%;
  height:auto;
}

.project-media-list video{
  object-fit:contain;
  background:transparent;
}

.project-info-panel{
  height:100vh;
  min-width:0;
  padding-top:calc(58px + (var(--u) * 2));
  padding-bottom:64px;
  overflow:hidden;
}

.project-info-inner{
  height:100%;
  display:flex;
  flex-direction:column;
}

.project-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  font-size:13px;
}

.project-title,
.project-disciplines{
  font-size:13px;
}

.project-disciplines{
  text-align:right;
  opacity:.52;
}

.project-desc{
  max-width:680px;
  margin:34px 0 0;
  font-family:"Fragment Mono",monospace;
  font-weight:500;
  text-transform:uppercase;
  line-height:1.35;
  font-size:13px;
  white-space: pre-line;
}

.project-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-top:var(--u);
  line-height:1.35;
  font-size:13px;
}

/* PROJECT CLICK ZONES: 4u / 16u / 4u */
.project-edge-nav{
  display:none;
  position:fixed;
  top:var(--u);
  bottom:var(--u);
  width:calc(var(--u) * 3.5);
  z-index:900;
  background:transparent;
}

body.project-page .project-edge-nav{display:block}
.project-edge-nav--prev{left:calc(var(--u) * .5)}
.project-edge-nav--next{right:calc(var(--u) * .5)}

.project-mini-nav{
  display:none;
}

/* FOOTER */
.site-footer{
  position:fixed;
  z-index:1000;
  left:0;
  right:0;
  bottom:0;
  padding:0 var(--page-x) 18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  color:var(--inverse-source);
  background:transparent;
  mix-blend-mode:difference;
  pointer-events:none;
  font-size:13px;
  font-weight:500;
}

/* CURSORS */
@media(pointer:fine){
  html,body,button,a,.project-card{cursor:none!important}

  .cursor-dot{
    position:fixed;
    z-index:9999;
    top:0;
    left:0;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#fff;
    mix-blend-mode:difference;
    pointer-events:none;
    transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
    will-change:transform;
  }

  .work-cursor-label{
    position:fixed;
    z-index:10000;
    top:0;
    left:0;
    pointer-events:none;
    white-space:nowrap;
    font-size:13px;
    font-weight:500;
    color:#fff;
    mix-blend-mode:difference;
    opacity:0;
    transform:translate3d(-100px,-100px,0);
    will-change:transform;
  }

  .edge-cursor{
    position:fixed;
    z-index:10001;
    top:0;
    left:0;
    pointer-events:none;
    opacity:0;
    color:#fff;
    mix-blend-mode:difference;
    font-size:13px;
    font-weight:500;
    line-height:1.2;
    white-space:nowrap;
    will-change:transform;
  }

  .edge-cursor--prev,
  .edge-cursor--prev .edge-name{text-align:right}

  .edge-cursor--next{text-align:left}

  .edge-cursor--prev,
  .edge-cursor--next{
    transform-origin:center center;
  }

  body.edge-prev .cursor-dot,
  body.edge-next .cursor-dot{opacity:0}

  body.edge-prev .edge-cursor--prev,
  body.edge-next .edge-cursor--next{opacity:1}
}

@media(pointer:coarse){
  .cursor-dot,.work-cursor-label,.edge-cursor{display:none}
}

/* MOBILE + TABLET PROJECT NAVIGATION */
@media(max-width:1024px){
  /* Replace desktop cursor zones with compact fixed project arrows. */
  .project-edge-nav{display:none!important}

  body.project-page .project-mini-nav{
    display:block;
    position:fixed;
    top:58px;
    z-index:1300;
    font-family:"Fragment Mono",monospace;
    font-size:13px;
    font-weight:500;
    line-height:1;
    color:var(--fg);
    background:var(--bg);
    padding:2px 3px;
    white-space:nowrap;
    transition:background-color .18s ease,color .18s ease;
  }

  /* Outer arrow tips align with the fixed 28px side-control rails. */
  .project-mini-nav--prev{left:6px}
  .project-mini-nav--next{right:6px}
}

/* CONTACT collapses earlier: tablet / small desktop */
@media(max-width:1200px){
  .contact-grid{display:block}

  .contact-copy{
    max-width:none;
    margin-bottom:70px;
  }

  .contact-meta{
    grid-template-columns:1fr;
    gap:34px;
  }

  /* CONTACT, SERVICES, SELECTED EXHIBITS */
  .contact-meta>div:nth-child(1){order:2}
  .contact-meta>div:nth-child(2){order:1}
  .contact-meta>div:nth-child(3){order:3}
  .contact-meta>div:last-child{grid-column:auto}
}

/* MOBILE */
.project-stream-mobile{
  display:none;
}
@media(max-width:760px){
  :root{
    --page-x:16px;
    --gap:52px;
  }

  html,body,
  button,a{
    font-size:13px;
  }

  body.project-page{overflow:auto}

  .topbar{
    padding:14px var(--page-x) 0;
    grid-template-columns:1fr 1fr;
    font-size:13px;
  }

  .brand img{height:.8em}
  nav{gap:12px}

  /* Keep both controls on the sides on mobile */
  .theme-rail--left{
    width:28px;
  }

  .theme-rail--right{
    width:28px;
    gap:8px;
  }

  .side-theme-toggle{
    font-size:13px;
  }

  .color-swatch{
    width:10px;
    height:10px;
  }

.project-stream--desktop{
  display:none;
}

.project-stream-mobile{
  display:block;
  padding-top:58px;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
  padding-bottom:110px;
}

.project-stream-mobile .project-card{
  display:block;
  margin:0 0 28px;
}

.project-stream-mobile .project-card:last-child{
  margin-bottom:0;
}

  .project-caption,
  .preview-title,
  .project-caption span:last-child{
    font-size:13px;
  }

  .contact-view{
    padding:70px var(--page-x) 120px;
  }

  .contact-grid{display:block}

  .contact-copy{
    max-width:none;
    margin-bottom:70px;
  }

  .contact-meta{
    grid-template-columns:1fr;
    gap:34px;
  }

  /* Mobile contact order: CONTACT, SERVICES, SELECTED EXHIBITS. */
  .contact-meta>div:nth-child(1){order:2}
  .contact-meta>div:nth-child(2){order:1}
  .contact-meta>div:nth-child(3){order:3}
  .contact-meta>div:last-child{grid-column:auto}

  .project-view{
    height:auto;
    min-height:100vh;
    overflow:visible;
    padding:58px var(--page-x) 120px;
  }

  body.project-page .project-mini-nav{top:58px}

  .project-split{
    height:auto;
    display:flex;
    flex-direction:column;
    padding:0;
  }

  .project-media-panel{
    order:1;
    height:auto;
    overflow:visible;
    padding:0;
  }

  .project-media-list{gap:52px}

  .project-info-panel{
    order:2;
    height:auto;
    overflow:visible;
    padding:52px 0 0;
  }

  .project-info-inner{height:auto}
  .project-heading{display:block}

  .project-disciplines{
    margin-top:5px;
    text-align:left;
  }

  .project-desc{margin-top:34px}
  .project-meta{margin-top:34px}

  /* Cursor navigation remains desktop-only */
  .project-edge-nav{display:none!important}

  .site-footer{
    padding:0 var(--page-x) 14px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    font-size:13px;
  }

  .site-footer span:last-child{text-align:left}
}

/* Semantic heading reset: preserves the existing project-title appearance. */
.project-title{
  margin:0;
  font-weight:inherit;
}