/* One viewport-based shell for every portfolio category. Media never positions the menu. */
:root {
  --page-max:2240px;
  --page-gutter:clamp(20px,4vw,96px);
  --header:clamp(72px,8dvh,104px);
  --footer-height:44px;
  --responsive-nav:clamp(190px,15vw,280px);
  --responsive-gap:clamp(28px,2.5vw,48px);
  --responsive-pad:clamp(18px,3.2dvh,64px);
  --responsive-title:clamp(24px,min(2.2vw,3.3dvh),46px);
  --responsive-heading:calc(var(--responsive-title) * 1.25 + clamp(14px,2dvh,26px));
  --responsive-pager:clamp(52px,7dvh,82px);
  --peek-share:clamp(.043,calc(.043 + (100vw - 700px) / 1220px * .129),.172);
  --rail-factor:calc(1 + 2 * var(--peek-share));
}
html:root body .site-header {
  height:var(--header); min-height:var(--header);
  padding-inline:max(var(--page-gutter),calc((100vw - var(--page-max)) / 2 + var(--page-gutter))) !important;
}
html:root body .site-header .wordmark { width:clamp(110px,7.2vw,160px); }
html:root body .site-header .header-note { font-size:clamp(11px,.75vw,16px); }
html:root body .site-header .language-switch button { font-size:clamp(13px,.9vw,18px); }
html:root body .screen-track { height:calc(100dvh - var(--header) - var(--footer-height) - env(safe-area-inset-bottom,0px)); }
html:root body .site-footer {
  box-sizing:border-box; height:calc(var(--footer-height) + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--page-gutter) env(safe-area-inset-bottom,0px);
  background:#fff; color:#77716c; text-align:center;
}
html:root body .site-footer small { font-size:clamp(10px,.72vw,13px); line-height:1.5; }
html:root body #work.screen.work:has(.work-content[data-category]) {
  display:grid;
  width:100%; max-width:var(--responsive-shell-width,var(--page-max)) !important;
  margin-inline:auto;
  grid-template-columns:var(--responsive-nav) minmax(0,1fr) !important;
  grid-template-rows:minmax(0,var(--responsive-group-height,1fr));
  gap:var(--responsive-gap) !important;
  padding:var(--responsive-pad) var(--page-gutter) !important;
  align-content:center !important; justify-content:stretch !important;
}
html:root body #work .discipline-nav { align-self:start; padding:0; margin:0; min-width:0; }
html:root body #work .discipline-nav > .back-intro {
  min-height:calc(var(--responsive-title) * 1.25); margin:0 0 clamp(18px,3dvh,38px);
  font-size:clamp(13px,1.5dvh,18px) !important;
}
html:root body #work .discipline-nav nav { gap:clamp(12px,2dvh,26px); padding:0; }
html:root body #work .discipline-nav .nav-primary {
  font-size:clamp(16px,min(1.4vw,2.5dvh),28px) !important;
  line-height:1.45; min-height:32px; padding:0;
}
html:root body #work .discipline-nav .subnav { margin-top:clamp(10px,1.6dvh,20px); gap:clamp(4px,.9dvh,12px); }
html:root body #work .discipline-nav .subnav button {
  font-size:clamp(13px,min(1.05vw,1.9dvh),20px) !important;
  min-height:28px; line-height:1.5;
}
html:root body #work .work-content[data-category] {
  container-type:size; width:100% !important;
  height:100% !important; max-height:100% !important;
  min-height:0 !important; align-self:stretch !important;
  grid-template-rows:var(--responsive-heading) minmax(0,var(--responsive-media,1fr)) var(--responsive-pager) var(--responsive-meta,160px) !important;
  align-content:start !important; gap:0 !important;
}
html:root body #work .work-content[data-category] > :is(.work-heading,#gallery,.gallery-bottom,#project-meta) {
  width:100% !important; max-width:100% !important; justify-self:stretch !important;
}
html:root body #work .work-content[data-category] > :is(.work-heading,.gallery-bottom,#project-meta),
html:root body #work .work-content[data-category]:not([data-category="research"]) > #gallery {
  width:var(--responsive-frame,100%) !important; justify-self:center !important;
}
html:root body #work .work-content[data-category] > .work-heading {
  height:100% !important; padding:0 0 clamp(14px,2dvh,26px) !important;
  align-items:start;
}
html:root body #work .work-content[data-category] .work-heading > div {
  flex-wrap:nowrap; align-items:baseline; gap:12px; justify-content:flex-start !important;
}
html:root body #work .work-content[data-category] #work-title {
  font-size:var(--responsive-title) !important; line-height:1.25 !important;
  text-align:start !important; text-wrap:pretty;
}
html:root body #work .work-content[data-category] .work-count {
  position:static !important; font-size:clamp(12px,1.3dvh,17px) !important;
  white-space:nowrap;
}
html:root body #work .work-content[data-category] > #gallery {
  height:100% !important; min-height:0 !important; max-height:100% !important;
  --rail-gap:clamp(8px,1vw,18px);
}
html:root body #work .work-content[data-category]:not([data-category="research"]) > #gallery { --rail-gap:0px; }
html:root body #work .work-content[data-category="web"] #active-project > .project-preview {
  inset:0 !important; height:100% !important;
}
html:root body #work .research-cover > img {
  width:auto !important; height:auto !important; max-width:100% !important;
  max-height:100% !important; object-fit:contain !important;
}
html:root body #work .work-content[data-category] > .gallery-bottom {
  height:100% !important; padding:8px 0 !important; align-items:center;
}
html:root body #work .gallery-arrows button {
  width:clamp(40px,4.8dvh,60px) !important; height:clamp(40px,4.8dvh,60px) !important;
}
html:root body #work .work-content[data-category] > #project-meta {
  padding:clamp(8px,1.1dvh,16px) 0 0 !important; align-self:start;
}
html:root body #work #project-meta h3 { font-size:clamp(23px,2.6dvh,36px) !important; }
html:root body #work #project-meta .project-description { font-size:clamp(13px,1.55dvh,20px) !important; }
/* Special content replaces the same inner rows; the shell and heading remain fixed. */
html:root body #work .work-content[data-category="games"] > :is(#gallery,#project-meta,.gallery-bottom) {
  display:block !important; visibility:hidden !important; pointer-events:none !important;
}
html:root body #work .work-content[data-category="games"] > :is(#gallery,#project-meta,.gallery-bottom) * {
  visibility:hidden !important;
}
html:root body #work .work-content[data-category="games"] > #games-preview {
  grid-row:2 / 5 !important; height:100% !important;
  justify-content:flex-start; min-height:0;
}
html:root body #work .work-content[data-category="games"] > .gallery-bottom { display:flex !important; }
html:root body #work .work-content[data-category] > #mm-wall {
  width:var(--responsive-frame,100%) !important; justify-self:center !important;
}
#games-preview iframe { height:auto; max-height:calc(100% - 88px); aspect-ratio:1.6; }
#games-preview .games-coming { font-size:clamp(24px,3dvh,38px); }

/* Shadows follow the actual clipped silhouettes, never an empty proxy card. */
html:root body #work .work-content[data-category="research"] {
  --research-rail-gap:clamp(8px,1vw,18px);
  --research-card-width:calc((var(--responsive-frame) - 2 * var(--research-rail-gap)) / var(--rail-factor));
}
html:root body #work .work-content[data-category="research"] > #gallery {
  width:var(--responsive-frame,100%) !important; justify-self:center !important;
  --rail-gap:var(--research-rail-gap); --card-w:var(--research-card-width);
}
html:root body #work .work-content[data-category="research"] > #gallery::before,
html:root body #work .work-content[data-category="research"] > #gallery::after { content:none !important; }
html:root body #work .work-content[data-category="research"] .gallery-track {
  filter:drop-shadow(0 14px 14px #241f1b22) drop-shadow(0 3px 4px #241f1b14);
}
html:root body #work .work-content[data-category="research"] #active-project .research-cover > img {
  box-shadow:none;
}
/* Use the spare rail width for a larger scene, keeping its centre fixed. */
html:root body #work .work-content[data-category="games"] > #games-preview {
  width:min(100%,calc(var(--responsive-frame,100%) * 1.16)) !important; justify-self:center;
  justify-content:flex-start;
}
/* AI cards, images and film share a visual ratio inside the same media row.
   The pager and description stay at a common height in every project category. */
html:root body #work .work-content:is([data-category="ai"],[data-category="video"]) #active-project {
  display:grid; place-items:center;
}
html:root body #work .work-content[data-category="ai"] .slide-pe,
html:root body #work .work-content[data-category="video"] .slide-film {
  width:min(100%,calc(100cqh * 16 / 9)) !important;
  height:auto !important; aspect-ratio:16 / 9; max-height:100%; margin-inline:auto;
}
html:root body #work .work-content[data-category="video"] .slide-film video {
  object-fit:cover;
}
/* The portrait and text begin directly below their heading. */
@container mmw (aspect-ratio >= 1.05) {
  #mm-wall .mw-in { justify-content:flex-start; align-items:flex-start; }
  #mm-wall .mw-stage { height:min(100%,74cqw); width:min(calc(100cqh * 2 / 3),49cqw); }
  #mm-wall .mw-side { flex:1 1 0; max-width:none; margin-top:0; align-self:flex-start; }
}
@container mmw (aspect-ratio < 1.05) {
  #mm-wall .mw-side { align-items:center; text-align:center; }
  #mm-wall .mw-hint { justify-content:center; max-width:34ch; }
}
@container mmw (max-height:420px) {
  #mm-wall .mw-desc { display:none; }
  #mm-wall .mw-title { font-size:clamp(18px,3.3cqw,24px); }
  #mm-wall .mw-hint { margin-top:8px; font-size:11px; }
}
html:root body #work .slide-pe .pe-frame { inset:0; }

/* Secondary study facts reappear only when there is room for a generous cover. */
@media (max-height:1000px) {
  html:root body #work #project-meta .pm-line { display:none !important; }
}

@media (max-width:1199px) and (min-width:801px) {
  :root { --responsive-gap:28px; --page-gutter:28px; }
  html:root body #work .discipline-nav nav { gap:10px; }
  html:root body #work .discipline-nav .subnav { gap:4px; }
  html:root body #work .work-count { display:none; }
}
@media (max-width:800px) {
  :root {
    --header:60px; --page-gutter:clamp(16px,4vw,28px);
    --footer-height:32px;
    --responsive-pad:12px; --responsive-gap:12px;
    --responsive-title:clamp(20px,3.6vw,28px);
    --responsive-heading:calc(var(--responsive-title) * 1.25 + 16px);
    --responsive-pager:52px;
  }
  html:root body .site-header .wordmark { width:92px; }
  html:root body .site-header .header-note { display:none; }
  html:root body #work.screen.work:has(.work-content[data-category]) {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:112px minmax(0,1fr) !important;
    align-content:stretch !important;
  }
  html:root body #work .discipline-nav { width:100%; height:112px; }
  html:root body #work .discipline-nav > .back-intro { height:28px; min-height:28px; margin:0 0 6px; font-size:12px !important; }
  html:root body #work .discipline-nav nav {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:42px 36px; gap:0 8px; padding:0; margin:0;
    align-items:center; overflow:visible; min-height:0;
  }
  html:root body #work .practice-group { display:contents; }
  html:root body #work .discipline-nav .nav-primary {
    width:100%; font-size:clamp(11px,1.8vw,16px) !important;
    min-height:40px; white-space:normal !important; line-height:1.35;
    justify-content:center; text-align:center; padding:0;
  }
  html:root body #work .discipline-nav .subnav {
    grid-row:2; grid-column:1 / -1; height:36px; margin:0; padding:4px 0 0;
    gap:0 16px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; border-inline:0; border-top:1px solid #eee9e5;
  }
  html:root body #work .discipline-nav .subnav button {
    flex:0 0 auto; font-size:clamp(11px,1.65vw,14px) !important;
    min-height:30px; white-space:nowrap; padding:2px 0;
  }
  html:root body #work .work-content[data-category] .work-heading > div { justify-content:center !important; }
  html:root body #work .work-content[data-category] #work-title { text-align:center !important; }
  html:root body #work .work-content[data-category] > .work-heading { padding-bottom:16px !important; }
  html:root body #work .work-count { display:none !important; }
  html:root body #work #project-meta h3 { font-size:22px !important; }
  html:root body #work #project-meta .project-description { font-size:12px !important; line-height:1.5; }
  html:root body #work #project-meta .pm-line { display:none !important; }
  html:root body #work .work-content[data-category] > #gallery { --rail-gap:6px; }
  html:root body #work .work-content[data-category="research"] { --research-rail-gap:6px; }
  html:root body #work .work-content[data-category]:not([data-category="research"]) > #gallery { --rail-gap:0px; }
  html:root body #work .gallery-arrows button { width:38px !important; height:38px !important; }
  #games-preview iframe { max-height:calc(100% - 70px); }
}
@media (max-width:480px) {
  :root { --responsive-heading:66px; }
  html:root body #work .work-content[data-category] #work-title { max-width:100%; }
}
@media (max-width:800px) and (max-height:650px) {
  :root { --header:52px; --footer-height:28px; --responsive-pad:8px; --responsive-gap:8px; --responsive-heading:54px; --responsive-pager:42px; }
  html:root body #work.screen.work:has(.work-content[data-category]) { grid-template-rows:98px minmax(0,1fr) !important; }
  html:root body #work .discipline-nav { height:98px; }
  html:root body #work .discipline-nav > .back-intro { height:24px; min-height:24px; margin-bottom:2px; }
  html:root body #work .discipline-nav nav { grid-template-rows:38px 34px; }
  html:root body #work .discipline-nav .nav-primary { min-height:36px; }
  html:root body #work .work-content[data-category] > .work-heading { padding-bottom:4px !important; }
  html:root body #work #project-meta h3 { font-size:19px !important; }
  html:root body #work #project-meta .project-kicker { font-size:8px; }
  html:root body #work #project-meta .project-description {
    font-size:11px !important; line-height:1.4; margin-top:6px;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  }
  html:root body #work #project-meta .project-link { font-size:11px; }
  html:root body #work .gallery-arrows button { width:32px !important; height:32px !important; }
  html:root body #work .work-content[data-category] > .gallery-bottom { padding:4px 0 !important; }
  #games-preview .games-coming { font-size:22px; }
}

/* Phone rotation keeps the menu beside the work, freeing vertical space. */
@media (min-width:600px) and (max-height:500px) {
  :root { --header:52px; --footer-height:28px; --page-gutter:20px; --responsive-nav:clamp(144px,21vw,184px); --responsive-gap:20px; --responsive-pad:10px; --responsive-title:17px; --responsive-heading:48px; --responsive-pager:36px; }
  html:root body #work.screen.work:has(.work-content[data-category]) {
    grid-template-columns:var(--responsive-nav) minmax(0,1fr) !important;
    grid-template-rows:minmax(0,var(--responsive-group-height,1fr)) !important;
    align-content:center !important;
  }
  html:root body #work .discipline-nav { height:auto; }
  html:root body #work .discipline-nav > .back-intro { min-height:24px; height:24px; margin-bottom:10px; font-size:12px !important; }
  html:root body #work .discipline-nav nav { display:flex; flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:6px; }
  html:root body #work .practice-group { display:block; }
  html:root body #work .discipline-nav .nav-primary { min-height:24px; width:100%; font-size:13px !important; text-align:start; justify-content:flex-start; }
  html:root body #work .discipline-nav .subnav { flex-direction:column; height:auto; margin-top:6px; padding:0; gap:2px; border:0; overflow:visible; }
  html:root body #work .discipline-nav .subnav button { min-height:22px; font-size:11px !important; padding:0; }
  html:root body #work .work-content[data-category] > .work-heading { padding-bottom:4px !important; }
  html:root body #work .work-content[data-category] .work-heading > div { justify-content:flex-start !important; }
  html:root body #work .work-content[data-category] #work-title { text-align:start !important; }
  html:root body #work .work-count { display:none !important; }
  html:root body #work #project-meta .pm-head { padding-bottom:4px; gap:8px; }
  html:root body #work #project-meta h3 { font-size:18px !important; }
  html:root body #work #project-meta .project-kicker { font-size:8px; }
  html:root body #work #project-meta .project-description { display:none; }
  html:root body #work #project-meta .pm-line { display:none !important; }
  html:root body #work #project-meta .project-link { font-size:11px; }
  html:root body #work .gallery-arrows button { width:28px !important; height:28px !important; }
  html:root body #work .work-content[data-category] > .gallery-bottom { padding:4px 0 !important; }
  #games-preview iframe { max-height:calc(100% - 56px); }
  #games-preview .games-caption { padding:6px 8px 0; }
  #games-preview .games-coming { font-size:20px; }
  #games-preview .games-credit { margin-top:5px; }
}