/* The introduction and work are two states of one viewport. */
:root {
  --page-max:1920px; --page-gutter:clamp(24px,5vw,96px);
  --menu-gap:clamp(32px,4vw,72px); --copy-measure:72ch;
  --side-scale:.86; --peek-share:.172; --rail-factor:1.344;
}
/* Neighbour previews taper from 20% on wide screens to 5% on phones.
   All rail, clipping and shadow geometry uses the same fluid share. */
:root:has(#work .work-content[data-category="research"]) {
  --peek-share:clamp(.043,calc(.043 + (100vw - 700px) / 1220px * .129),.172);
  --rail-factor:calc(1 + 2 * var(--peek-share));
  --peek-clip:calc(100% - var(--peek-share) / var(--side-scale) * 100%);
}
html, html:has(dialog[open]), body { height:100dvh; min-height:0; overflow:hidden; }
html body .screen-track { height:calc(100dvh - var(--header)); overflow:hidden; }
html body #intro.screen, html body #work.screen { height:100%; min-height:0; overflow:hidden !important; }
html body .site-header {
  padding-inline:max(var(--page-gutter),calc((100vw - var(--page-max)) / 2 + var(--page-gutter)));
}

/* Reserve the heading, pager and facts; the visual uses the remaining height. */
html body #work.screen.work {
  display:grid; grid-template-columns:220px minmax(0,1fr);
  gap:var(--menu-gap); width:100%; max-width:var(--page-max); margin-inline:auto;
  padding:clamp(16px,2.6dvh,28px) var(--page-gutter);
}
html body #work .work-content[data-category] {
  container-type:inline-size; display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto minmax(0,1fr) auto auto !important;
  align-content:stretch !important; align-self:stretch !important;
  height:100% !important; max-height:100% !important; min-height:0 !important;
  min-width:0; gap:0 !important; padding:0; overflow:visible !important;
}
html body #work .work-content[data-category] > * {
  grid-column:1 !important; min-width:0; margin:0 !important;
  width:100% !important; max-width:none !important;
}
/* The heading, text and action share the visual's edges rather than the whole empty stage. */
html body #work .work-content[data-category] > .work-heading,
html body #work .work-content[data-category] > .gallery-bottom,
html body #work .work-content[data-category] > #project-meta {
  width:min(100%,1080px) !important; justify-self:center;
}
html body #work .work-content[data-category="research"] > .work-heading,
html body #work .work-content[data-category="research"] > .gallery-bottom,
html body #work .work-content[data-category="research"] > #project-meta {
  width:clamp(min(100%,640px),var(--cover-w,100%),100%) !important;
}
html body #work .work-content[data-category] > .work-heading {
  grid-row:1 !important; height:auto !important; min-height:0 !important;
  padding:0 0 clamp(12px,2dvh,22px) !important;
}
html body #work .work-heading > div {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px;
  justify-content:flex-start; min-width:0;
}
html body #work .work-heading .eyebrow { display:none; }
html body #work #work-title {
  font-size:clamp(26px,2.2vw,40px); line-height:1.2 !important;
  white-space:normal !important; text-wrap:balance; margin:0;
}
html body #work .work-count { padding:0; margin:0; flex:none; }
html body #work .work-content[data-category] > #gallery {
  container-type:size;
  grid-row:2 !important; height:100% !important; min-height:0 !important;
  max-height:none !important; aspect-ratio:auto !important;
  padding:0 !important; overflow:visible !important;
}
html body #work .work-content[data-category]:not([data-category="research"]) > #gallery {
  width:min(100%,1080px) !important; justify-self:center;
}
html body #work #active-project {
  position:relative; width:100%; height:100%; min-height:0;
  background:none; overflow:visible;
}
html body #work .research-cover {
  position:absolute; inset:0; padding:0 !important;
  width:100%; height:100%; justify-content:center !important; align-items:center;
}
html body #work .research-cover > img {
  width:auto !important; height:auto !important; max-width:100% !important;
  max-height:100% !important; object-fit:contain !important; border-radius:14px;
}
html body #work .research-peek { display:none !important; }
/* Layers' separate lettering follows the image, including wide, short stages. */
html body #work .research-cover:has(.layers-cover-title) {
  container-type:inline-size; width:min(100%,calc(100cqh * 1366 / 706));
  height:auto; aspect-ratio:1366 / 706; inset:auto; top:50%; left:50%;
  translate:-50% -50%;
}
html body #work .research-cover .layers-cover-title { left:9%; top:13%; }
html body #work .layers-cover-title strong { font-size:clamp(24px,9cqw,90px); }
html body #work .layers-cover-title small,
html body #work .layers-cover-title em { font-size:clamp(6px,1.5cqw,13px); }
html body #work #active-project > .project-preview {
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; background:none;
}
html body #work #active-project .preview-concept .concept-browser { top:0; }
html body #work .work-content[data-category] > .gallery-bottom {
  grid-row:3 !important; display:flex; height:auto !important;
  min-height:0 !important; flex-wrap:nowrap;
  padding:clamp(8px,1.2dvh,14px) 0 0 !important; justify-content:center;
}
html body #work .work-content[data-category] > #project-meta {
  grid-row:4 !important; display:block; min-height:0 !important;
  padding:clamp(10px,1.5dvh,16px) 0 0 !important;
}
html body #work #project-meta > .pm {
  display:block !important; position:relative; width:100%; max-width:none;
  border:0; padding:0 !important;
}
html body #work #project-meta .pm-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; padding:0 0 12px; border-bottom:1px solid #e6e1db;
}
html body #work #project-meta .pm-head > div { flex:1; min-width:0; }
html body #work #project-meta .project-kicker {
  font-size:10px; line-height:1.4; letter-spacing:.08em; margin:0 0 6px;
}
html body #work #project-meta h3 {
  font-size:clamp(23px,1.8vw,32px); line-height:1.2; margin:0;
}
html body #work #project-meta .project-link {
  flex:none; margin:0; grid-column:auto; grid-row:auto; align-self:center;
}
html body #work #project-meta .project-description {
  margin:12px 0 0; max-width:var(--copy-measure); font-size:14px; line-height:1.65;
  text-wrap:pretty;
}
html body #work #project-meta .pm-line {
  margin:8px 0 0; display:flex; flex-wrap:wrap; gap:4px 24px;
  font-size:12px; line-height:1.5;
}
html[lang=ar] body #work #project-meta .project-description { line-height:1.75; }
html body #work .discipline-nav { align-self:start; padding:0; min-height:0; }
html body #work .discipline-nav .nav-primary { font-size:18px; line-height:1.45; min-height:32px; }
html body #work .discipline-nav .subnav button { font-size:14px; line-height:1.5; min-height:28px; }
html body #work .discipline-nav nav { gap:clamp(12px,2.2dvh,24px); }
html body #work .discipline-nav .subnav { gap:8px; margin-top:16px; }
html body #work .discipline-nav > .back-intro { margin-bottom:24px; padding:0; font-size:14px; }

/* A bounded type scale, with spacing that also responds to short displays. */
@media (min-width:801px) {
  html body #intro .intro-layout {
    height:100%; min-height:0; max-width:var(--page-max);
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    column-gap:clamp(28px,4vw,80px);
    padding:clamp(12px,2.6dvh,28px) var(--page-gutter);
  }
  html body #intro .composition-area { justify-content:center; }
  html body #intro .visual-composition {
    width:min(100cqw,calc(100cqh / 1.02)); aspect-ratio:1 / 1.02;
    height:auto; min-height:0; max-height:100%;
  }
  html body #intro .hero-copy { padding:0; max-width:640px; }
  html body #intro .hero-copy > * {
    --q-name:clamp(40px,min(4vw,8dvh),70px);
    --q-line:clamp(21px,min(1.8vw,3.7dvh),30px);
    --q-body:clamp(13px,1.65dvh,16px); --q-gap:clamp(12px,2.2dvh,24px);
  }
  html body #intro .hero-copy > .eyebrow { font-size:11px; margin-bottom:calc(var(--q-gap) * .6); }
  html body #intro .hero-copy h1#intro-title { font-size:var(--q-name); line-height:1.05; margin-bottom:calc(var(--q-gap) * .5); }
  html[lang=ar] body #intro .hero-copy h1#intro-title { font-size:var(--q-name); line-height:1.3; }
  html body #intro .hero-copy .identity-roles {
    display:flex; flex-wrap:wrap; gap:4px 16px; white-space:normal;
    font-size:clamp(12px,1.6dvh,15px); line-height:1.5; margin-bottom:var(--q-gap);
  }
  html body #intro .identity-roles > .role-product:after,
  html body #intro .identity-roles > .role-prompt:after { content:none; }
  html body #intro .hero-copy .hero-line {
    font-size:var(--q-line); line-height:1.3; max-width:28ch;
    white-space:normal; text-wrap:balance; margin-bottom:calc(var(--q-gap) * .6);
  }
  html body #intro .hero-copy .hero-caption { font-size:var(--q-body); line-height:1.75; width:100%; max-width:72ch; }
  html[lang=ar] body #intro .hero-copy .hero-caption { line-height:1.8; }
  html body #intro .hero-links { margin-top:var(--q-gap); flex-wrap:wrap; gap:8px 24px; }
  html body #intro .profile-link { font-size:13px; }
  html body #intro .profile-link svg { width:16px; height:16px; }
  html body #intro .enter-work { margin:calc(var(--q-gap) * 1.3) 0 0; gap:16px; }
  html body #intro .circle-arrow { width:clamp(42px,6dvh,64px); height:clamp(42px,6dvh,64px); font-size:28px; }
  html body #intro .enter-work strong { font-size:15px; }
  html body #intro .enter-work small { font-size:13px; }
}
/* Position the desktop introduction near the upper third of the viewport. */
@media (min-width:1101px) and (min-height:700px) {
  html body #intro .hero-copy { align-self:start; margin-block-start:11dvh; }
}
@media (max-height:800px) {
  html body #work .work-count { display:none; }
  html body #work #project-meta .pm-line { display:none; }
  html body #work #project-meta .project-description { font-size:13px; }
  html body #work .gallery-bottom .gallery-arrows button { width:38px; height:38px; }
}
@media (max-width:1100px) and (min-width:801px) {
  :root { --page-gutter:28px; --menu-gap:28px; }
  html body #work.screen.work { grid-template-columns:190px minmax(0,1fr); }
  html body #work .discipline-nav .nav-primary { font-size:16px; }
  html body #work .discipline-nav .subnav button { font-size:13px; }
}
@media (max-width:800px) {
  :root { --page-gutter:5vw; }
  html body #work.screen.work {
    grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
    gap:12px; padding:10px 5vw 16px;
  }
  html body #work .discipline-nav nav { gap:0 6px; }
  html body #work .discipline-nav .nav-primary { font-size:12px; min-height:36px; }
  html body #work .discipline-nav .subnav { margin:0; gap:0 12px; }
  html body #work .discipline-nav .subnav button { font-size:11px; min-height:30px; }
  html body #work .discipline-nav > .back-intro { margin-bottom:4px; font-size:12px; min-height:28px; }
  html body #work #work-title { font-size:22px; }
  html body #work .work-count { display:none; }
  html body #work #project-meta .pm-head { gap:12px; padding-bottom:8px; }
  html body #work #project-meta h3 { font-size:22px; }
  html body #work #project-meta .project-kicker { font-size:9px; margin-bottom:4px; }
  html body #work #project-meta .project-description { font-size:12px; line-height:1.5; margin-top:8px; }
  html body #work #project-meta .pm-line { display:none; }
  html body #work #project-meta .project-link { padding:10px 12px; font-size:12px; }
  html body #intro .intro-layout { height:100%; min-height:0; }
  html body #intro .composition-area { min-height:0; }
}

/* ==========================================================================
   Large screens keep the laptop proportions.
   The frame is sized from the screen (height first, then width), and the menu + frame form one
   group in the middle of the page. Title, pager and details sit right under the frame, as wide
   as it, so the page reads the same on a laptop and on a 27-inch monitor.
   ========================================================================== */
@media (min-width:1200px) and (orientation:landscape){
  :root{
    --g-nav:clamp(220px,15vw,300px);
    --rail-gap:clamp(10px,1vw,18px);
    --g-h:min(max(180px,calc(100dvh - var(--header) - 270px - 15dvh)),62dvh,calc((100vw - 2 * var(--page-gutter) - var(--g-nav) - var(--menu-gap) - 2 * var(--rail-gap)) / var(--rail-factor) * 9 / 16));
    --g-w:calc(var(--g-h) * 16 / 9);
    --g-rail:calc(var(--rail-factor) * var(--g-w) + 2 * var(--rail-gap));
    /* the group's column is the same for every category (the widest case), so the menu never moves */
    --g-ref:min(calc(100vw - 2 * var(--page-gutter) - var(--g-nav) - var(--menu-gap)),calc(1.344 * min(max(180px,calc(100dvh - var(--header) - 270px - 15dvh)),62dvh) * 16 / 9 + 2 * var(--rail-gap)));
  }
  html body #work.screen.work{
    grid-template-columns:var(--g-nav) var(--g-ref) !important;justify-content:center !important;
    align-content:start !important;max-width:none !important;
    padding-inline:var(--page-gutter) !important;
    padding-top:max(16px,calc((100dvh - var(--header) - var(--g-h) - 220px - 13dvh) / 2)) !important
  }
  html body #work .work-content[data-category]{
    grid-template-rows:auto auto auto auto !important;align-content:start !important;align-self:start !important;height:auto !important
  }
  html body #work .work-content[data-category]>.work-heading,
  html body #work .work-content[data-category]>.gallery-bottom,
  html body #work .work-content[data-category]>#project-meta,
  html body #work .work-content[data-category]>#gallery,
  html body #work .work-content[data-category]:not([data-category="research"])>#gallery,
  html body #work .work-content[data-category="research"]>.work-heading,
  html body #work .work-content[data-category="research"]>.gallery-bottom,
  html body #work .work-content[data-category="research"]>#project-meta{width:var(--g-rail) !important;justify-self:start !important}
  html body #work .work-content[data-category]>#project-meta{min-height:0 !important}
  /* text grows a little with the screen height, so it keeps its weight next to a bigger frame */
  html body #work .discipline-nav .nav-primary{font-size:clamp(18px,min(1.4vw,2.5dvh),28px) !important}
  html body #work .discipline-nav .subnav button{font-size:clamp(14px,min(1.05vw,1.95dvh),20px) !important}
  html body #work .discipline-nav > .back-intro{font-size:clamp(14px,1.4dvh,18px) !important}
  html body #work #work-title{font-size:clamp(26px,3.2dvh,46px) !important}
  html body #work .work-count{font-size:clamp(13px,1.3dvh,17px) !important}
  html body #work #project-meta .project-kicker{font-size:clamp(10px,1.05dvh,14px) !important}
  html body #work #project-meta h3{font-size:clamp(23px,2.6dvh,36px) !important}
  html body #work #project-meta .project-description{font-size:clamp(14px,1.55dvh,20px) !important}
  html body #work #project-meta .pm-line{font-size:clamp(12px,1.2dvh,16px) !important}
  html body #work .work-content[data-category]>#gallery{height:var(--g-h) !important}
  html body #work .research-cover>img{width:100% !important;height:100% !important;object-fit:cover !important}
  html body[data-view="work"] .site-header{
    padding-inline:var(--page-gutter) !important
  }
}

/* Three full cards move together behind a window that shows 20% of each neighbour. */
html body #work .work-content[data-category] > #gallery {
  --rail-gap:clamp(10px,1vw,18px);
  --card-w:calc((100cqw - 2 * var(--rail-gap)) / var(--rail-factor));
  display:block; position:relative; direction:ltr;
  overflow-x:clip !important; overflow-y:visible !important;
}
html body #work .work-content[data-category] > #gallery[data-single="true"] { --card-w:100cqw; }
html body #work .gallery-track {
  position:relative; display:flex; flex-direction:row; direction:ltr;
  gap:var(--rail-gap); width:max-content; height:100%;
  transform:translateX(calc((var(--peek-share) - 1) * var(--card-w)));
}
/* The transparent rail extends beyond the gallery; only its buttons receive clicks. */
html body #work .gallery-track { pointer-events:none; }
html body #work .gallery-track > button { pointer-events:auto; }
html body #work #gallery[data-single="true"] .gallery-track { transform:none; }
html body #work .gallery-track > * {
  position:relative; inset:auto; flex:0 0 var(--card-w);
  width:var(--card-w) !important; height:100%; min-height:0;
  padding:0; border:0; background:transparent;
}
html body #work #previous-preview { order:0; transform-origin:right center; }
html body #work #active-project { order:1; }
html body #work #next-preview { order:2; transform-origin:left center; }
html[dir="rtl"] body #work #previous-preview { order:2; transform-origin:left center; }
html[dir="rtl"] body #work #next-preview { order:0; transform-origin:right center; }
html[dir="rtl"] body #work .gallery-track > * { direction:rtl; }
html body #work .side-preview:not([hidden]) {
  display:block !important; overflow:hidden; cursor:pointer; opacity:1; filter:none;
  border-radius:14px; transform:scale(var(--side-scale));
}
html body #work .carousel-buffer[data-side="left"] { transform-origin:right center; }
html body #work .carousel-buffer[data-side="right"] { transform-origin:left center; }
html body #work .preview-art {
  display:block; position:relative; width:100%; height:100%;
  overflow:hidden; pointer-events:none; filter:none;
}
html body #work .preview-art .project-stage { width:100%; left:0; }
html body #work .side-preview .preview-art *,
html body #work .carousel-buffer .preview-art * {
  pointer-events:none; animation:none !important; transition:none !important;
}
html body #work .side-preview .preview-arrow { display:none; }
html body #work .side-preview:focus-visible { outline:2px solid #ca2d25; outline-offset:-3px; }
html body #work #active-project { overflow:hidden; border-radius:14px; }
/* Elevate the cover image itself, without outlining its taller gallery slot. */
html body #work .work-content[data-category="research"] #active-project {
  border-radius:0; box-shadow:none; overflow:visible;
}
html body #work #active-project .research-cover > img {
  box-shadow:0 18px 32px -18px #241f1b50,0 4px 10px -4px #241f1b18;
}
/* Project covers remain still while the pointer passes over them. */
html body #work #active-project > :first-child {
  transform:none; transition:none;
}
html body #work .slide-green .browser-frame {
  transform:rotate(-3deg); transition:none;
}
html body #work #project-meta .project-description { width:100%; max-width:none; }

/* A quiet text action, with a compact accent arrow instead of a solid pill. */
html body #work #project-meta .project-link {
  min-height:44px; padding:0; gap:12px; border:0; border-radius:0;
  background:transparent; color:#242424; font-size:clamp(14px,1.45dvh,17px);
  font-weight:500; letter-spacing:0; box-shadow:none; transform:none !important;
  transition:color .2s;
}
html body #work #project-meta .project-link > span {
  padding-block:4px; border-bottom:1px solid #d8d3ce;
  transition:border-color .2s;
}
html body #work #project-meta .project-link > i {
  display:grid; place-items:center; flex:none; width:32px; height:32px;
  border-radius:50%; background:#ca2d25; color:white; font-size:17px;
  transition:background .2s,transform .2s;
}
html body #work #project-meta .project-link:hover { background:transparent; color:#ca2d25; }
html body #work #project-meta .project-link:hover > span { border-color:#ca2d25; }
html body #work #project-meta .project-link:hover > i { background:#242424; transform:translate(2px,-2px); }
html[dir="rtl"] body #work #project-meta .project-link > i { transform:scaleX(-1); }
html[dir="rtl"] body #work #project-meta .project-link:hover > i { transform:translate(-2px,-2px) scaleX(-1); }
html body #work #project-meta .project-link:focus-visible { outline:2px solid #ca2d25; outline-offset:5px; }
@media (min-width:801px) {
  html body #work .work-content[data-category] > .work-heading,
  html body #work .work-content[data-category] > .gallery-bottom,
  html body #work .work-content[data-category] > #project-meta {
    width:100% !important; justify-self:start;
  }
  html body #work .discipline-nav nav { gap:clamp(14px,2dvh,26px); }
  html body #work .discipline-nav .subnav { gap:clamp(7px,1dvh,12px); }
}

/* A compact project note, with a clear title and a separate facts row. */
html body #work #project-meta > .pm {
  padding:0 !important;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
html body #work #project-meta .pm-head {
  align-items:center; padding:0; border:0; gap:20px;
}
html body #work #project-meta .project-kicker {
  color:#7a746d; line-height:1.5; letter-spacing:.07em;
}
html body #work #project-meta h3 {
  font-size:clamp(26px,3dvh,36px) !important; font-weight:600;
  line-height:1.15; letter-spacing:-.035em;
}
html body #work #project-meta .project-description {
  margin-top:12px; color:#5c5954;
}
@media (min-width:801px) and (min-height:801px) {
  html body #work #project-meta .pm-line {
    display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    gap:20px; margin-top:12px; padding-top:10px;
    border-top:1px solid #e6e1db; color:#615c56;
  }
  html body #work #project-meta .pm-line > span { min-width:0; }
  html body #work #project-meta .pm-line b {
    display:block; margin:0 0 4px; color:#807970;
    font-size:10px; font-weight:500; letter-spacing:.1em;
  }
}
html[lang="ar"] body #work #project-meta h3 { letter-spacing:0; }
html[lang="ar"] body #work #project-meta .project-kicker,
html[lang="ar"] body #work #project-meta .pm-line b { letter-spacing:0; }
@media (max-width:800px), (max-height:800px) {
  html body #work #project-meta > .pm { padding:0 !important; border-radius:0; }
  html body #work #project-meta .pm-head { gap:12px; }
  html body #work #project-meta h3 { font-size:24px !important; }
  html body #work #project-meta .project-description { margin-top:8px; }
}
@media (max-width:800px) {
  html body #work #project-meta h3 { font-size:22px !important; }
  html body #work #project-meta .project-link { gap:8px; font-size:12px; }
  html body #work #project-meta .project-link > i { width:28px; height:28px; font-size:16px; }
  html body #work #active-project .research-cover > img {
    box-shadow:0 10px 20px -12px #241f1b40,0 0 0 1px #241f1b0a;
  }
}

/* The visible neighbour has its own rounded edge and shadow. The full cards
   keep their rail geometry while moving between positions. */
html body #work .work-content[data-category="research"] > #gallery {
  --left-preview-ratio:calc(9 / 16);
  --right-preview-ratio:calc(9 / 16);
  overflow:visible !important; isolation:isolate;
}
html body #work .work-content[data-category="research"] .gallery-track { z-index:1; }
html body #work .work-content[data-category="research"] .side-preview {
  --preview-ratio:calc(9 / 16);
  --preview-inset-y:max(0px,calc((100% - var(--card-w) * var(--preview-ratio)) / 2));
}
html body #work .work-content[data-category="research"] .side-preview:has(.layers-cover-title) {
  --preview-ratio:calc(706 / 1366);
}
html body #work .work-content[data-category="research"] #previous-preview {
  clip-path:inset(var(--preview-inset-y) 0 var(--preview-inset-y) var(--peek-clip,80%) round 14px);
}
html body #work .work-content[data-category="research"] #next-preview {
  clip-path:inset(var(--preview-inset-y) var(--peek-clip,80%) var(--preview-inset-y) 0 round 14px);
}
html[dir="rtl"] body #work .work-content[data-category="research"] #previous-preview {
  clip-path:inset(var(--preview-inset-y) var(--peek-clip,80%) var(--preview-inset-y) 0 round 14px);
}
html[dir="rtl"] body #work .work-content[data-category="research"] #next-preview {
  clip-path:inset(var(--preview-inset-y) 0 var(--preview-inset-y) var(--peek-clip,80%) round 14px);
}
html body #work .work-content[data-category="research"] > #gallery::before,
html body #work .work-content[data-category="research"] > #gallery::after {
  content:""; position:absolute; top:50%; z-index:0; pointer-events:none;
  width:calc(var(--card-w) * var(--peek-share));
  height:min(calc(100% * var(--side-scale)),calc(var(--card-w) * var(--left-preview-ratio) * var(--side-scale)));
  transform:translateY(-50%); border-radius:calc(14px * var(--side-scale));
  box-shadow:0 18px 32px -18px #241f1b50,0 4px 10px -4px #241f1b18;
}
html body #work .work-content[data-category="research"] > #gallery::before { left:0; }
html body #work .work-content[data-category="research"] > #gallery::after {
  right:0;
  height:min(calc(100% * var(--side-scale)),calc(var(--card-w) * var(--right-preview-ratio) * var(--side-scale)));
}
html body #work .work-content[data-category="research"] > #gallery:has(#previous-preview .layers-cover-title) {
  --left-preview-ratio:calc(706 / 1366);
}
html body #work .work-content[data-category="research"] > #gallery:has(#next-preview .layers-cover-title) {
  --right-preview-ratio:calc(706 / 1366);
}
html[dir="rtl"] body #work .work-content[data-category="research"] > #gallery:has(#previous-preview .layers-cover-title) {
  --left-preview-ratio:calc(9 / 16); --right-preview-ratio:calc(706 / 1366);
}
html[dir="rtl"] body #work .work-content[data-category="research"] > #gallery:has(#next-preview .layers-cover-title) {
  --left-preview-ratio:calc(706 / 1366); --right-preview-ratio:calc(9 / 16);
}
html body #work .work-content[data-category="research"] > #gallery.is-changing {
  overflow-x:clip !important; overflow-y:visible !important;
}
html body #work .work-content[data-category="research"] #gallery.is-changing .side-preview { clip-path:none; }
html body #work .work-content[data-category="research"] > #gallery:is(.is-changing,[data-single="true"])::before,
html body #work .work-content[data-category="research"] > #gallery:is(.is-changing,[data-single="true"])::after { content:none; }

/* On phones, cover galleries take the cover's height instead of stretching
   an empty stage between the heading and pager. */
@media (max-width:800px) {
  html body #work.screen.work:has(.work-content[data-category="research"]) {
    padding-inline:3vw;
  }
  html body #work .work-content[data-category="research"] {
    grid-template-rows:auto minmax(0,calc((94vw - 12px) / var(--rail-factor) * 9 / 16)) auto auto !important;
    align-content:start !important;
  }
  html body #work .work-content[data-category="research"] > #gallery { --rail-gap:6px; }
  html body #work .work-content[data-category="research"] > .work-heading {
    padding-bottom:16px !important;
  }
  html body #work .work-content[data-category="research"] > .gallery-bottom {
    padding-top:14px !important;
  }
  html body #work .work-content[data-category="research"] > #project-meta {
    padding-top:16px !important;
  }
}

/* Adjacent project covers belong to research; other categories use a centred stage. */
html body #work .work-content[data-category]:not([data-category="research"]) > #gallery {
  --card-w:100cqw;
  --rail-gap:0px;
}
html body #work .work-content[data-category]:not([data-category="research"]) .gallery-track {
  width:100%; gap:0; transform:none;
}
html body #work .work-content[data-category]:not([data-category="research"]) .side-preview {
  display:none !important;
}

/* 10px more air above and below the card, in every category */
html body #work .work-content[data-category] > .work-heading,
html body #work .work-content[data-category="research"] > .work-heading{padding-bottom:calc(clamp(12px,2dvh,22px) + 10px) !important}
html body #work .work-content[data-category] > .gallery-bottom,
html body #work .work-content[data-category="research"] > .gallery-bottom{padding-top:calc(clamp(8px,1.2dvh,14px) + 10px) !important}

/* motion buttons removed from every page (motion still follows the device reduce-motion setting) */
#motion,#case-motion,#motion-toggle,.rawaf-motion-button,.sm-motion,.sk-motion-button{display:none !important}

/* the section title sits centred above the card, at every screen size */
html body #work .work-content[data-category] > .work-heading{text-align:center !important}
html body #work .work-content[data-category] .work-heading > div{justify-content:center !important;width:100% !important;max-width:none !important;margin-inline:0 !important}
html body #work .work-content[data-category] #work-title{text-align:center !important}
@media (min-width:1200px) and (orientation:landscape){
  html body #work .work-content[data-category] > .work-heading,
  html body #work .work-content[data-category="research"] > .work-heading{width:var(--g-rail) !important}
}
/* the study count stays at the end of the row, so it never pushes the title off centre */
html body #work .work-content[data-category] .work-heading > div{position:relative !important}
html body #work .work-content[data-category] .work-heading .work-count{position:absolute !important;inset-inline-end:0 !important;bottom:.35em !important}
@media (max-width:800px){html body #work .work-content[data-category] .work-heading .work-count{display:none !important}}

/* ==========================================================================
   Large screens: menu and cards are one group, centred on the page.
   The menu column is only as wide as its longest line (it grows with the menu text),
   and the gap to the cards is short, so the menu sits close to the work.
   The cards keep one centre line in every category, so nothing jumps when switching.
   ========================================================================== */
@media (min-width:1200px) and (orientation:landscape){
  :root{
    --nav-fs:clamp(18px,min(1.4vw,2.5dvh),28px);
    --sub-fs:clamp(14px,min(1.05vw,1.95dvh),20px);
    /* wide enough for the longest main item and the longest sub item (with its indent) */
    --g-nav:max(calc(var(--nav-fs) * 9.2),calc(var(--sub-fs) * 11.4 + 26px));
    --menu-gap:clamp(24px,2vw,44px);
  }
  html:root body #work.screen.work{grid-template-columns:var(--g-nav) var(--g-ref) !important;justify-content:center !important;column-gap:var(--menu-gap) !important}
  html:root body #work .work-content[data-category]>.work-heading,
  html:root body #work .work-content[data-category]>.gallery-bottom,
  html:root body #work .work-content[data-category]>#project-meta,
  html:root body #work .work-content[data-category]>#gallery{justify-self:center !important}
  html:root body #work .work-content[data-category]>.work-heading,
  html:root body #work .work-content[data-category]>.gallery-bottom,
  html:root body #work .work-content[data-category]>#project-meta{width:var(--g-rail) !important;max-width:100% !important}
  html:root body #work .discipline-nav .nav-primary,html:root body #work .discipline-nav .subnav button{white-space:nowrap !important}
  /* pager arrows grow a little with the screen too */
  html:root body #work .gallery-arrows button,html:root body #work .gallery-bottom button[class*=arrow]{width:clamp(44px,4.2dvh,60px) !important;height:clamp(44px,4.2dvh,60px) !important}
}
/* menu items never break onto a second line in the side menu */
@media (min-width:801px){html:root body #work .discipline-nav .nav-primary,html:root body #work .discipline-nav .subnav button{white-space:nowrap !important}}

/* Large screens: the frame grows until the last line under it sits 25px above the bottom of the
   screen. work-fit.js measures the page and sets --g-boost; the same boost feeds the frame height
   and the menu's reference column, so everything stays in proportion and centred. */
@media (min-width:1200px) and (orientation:landscape){
  :root{
    --g-hh:min(max(180px,calc(100dvh - var(--header) - 270px - 15dvh + var(--g-boost,0px))),calc(62dvh + var(--g-boost,0px)));
    --g-h:min(var(--g-hh),calc((100vw - 2 * var(--page-gutter) - var(--g-nav) - var(--menu-gap) - 2 * var(--rail-gap)) / var(--rail-factor) * 9 / 16));
    --g-ref:min(calc(100vw - 2 * var(--page-gutter) - var(--g-nav) - var(--menu-gap)),calc(1.344 * var(--g-hh) * 16 / 9 + 2 * var(--rail-gap)));
  }
}
/* Computer screens (side menu, landscape): the section title starts at the cards' edge, in line with the
   text under them. Portrait tablets and phones keep it centred. */
@media (min-width:801px) and (orientation:landscape){
  html:root body #work .work-content[data-category] > .work-heading{text-align:start !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}
}

/* ==========================================================================
   Work view, large screens: the whole group exactly in the middle of the page.
   Columns are exactly menu + gap + cards (no spare width on either side), centred across the page;
   work-fit.js sets the menu column to its longest line (--g-nav-fit), the gap (--g-gap-fit, 40px
   more than before: 10px, then 30px more on large screens) and the top padding that centres the
   group between the header and the bottom.
   ========================================================================== */
@media (min-width:1200px) and (orientation:landscape){
  :root{
    --g-nav:var(--g-nav-fit,max(calc(var(--nav-fs) * 9.2),calc(var(--sub-fs) * 11.4 + 26px)));
    --menu-gap:var(--g-gap-fit,calc(clamp(24px,2vw,44px) + 40px));
    /* one cards width for every category (the research rail ratio), so the group never changes width */
    --peek-share:clamp(.043,calc(.043 + (100vw - 700px) / 1220px * .129),.172);
    --rail-factor:calc(1 + 2 * var(--peek-share));
  }
  html:root body #work.screen.work{
    grid-template-columns:var(--g-nav) var(--g-rail) !important;justify-content:center !important;column-gap:var(--menu-gap) !important;
    padding-top:var(--g-padtop,max(16px,calc((100dvh - var(--header) - var(--g-h) - 220px - 13dvh) / 2))) !important;
    padding-bottom:0 !important
  }
}
/* side menu on smaller screens: 10px more between the menu and the cards too */
@media (min-width:801px) and (max-width:1199px),(min-width:1200px) and (orientation:portrait){
  html:root body #work.screen.work{column-gap:calc(var(--menu-gap) + 10px) !important}
}

/* ==========================================================================
   Tablets: the menu keeps the rhythm of the large screens.
   Side menu (801–1199px, and portrait screens from 1200px): items keep their touch height, with
   small gaps, so the spacing follows the text size (as on large screens) instead of the screen height.
   Stacked menu (480–800px): the main items take their own width, side by side with equal gaps,
   instead of four wide columns spread across the screen. Phones keep the four columns.
   ========================================================================== */
@media (min-width:801px) and (max-width:1199px),(min-width:1200px) and (orientation:portrait){
  html:root body #work .discipline-nav nav{gap:6px}
  html:root body #work .discipline-nav .subnav{gap:2px;margin-top:6px}
}
@media (min-width:480px) and (max-width:800px){
  html:root body #work .discipline-nav nav{grid-template-columns:repeat(4,max-content) minmax(0,1fr);column-gap:28px}
}
/* phones: four equal columns, each title centred in its column (a title on two lines has both lines
   centred), and the one-line titles sit on the middle of the row */
@media (max-width:479px){
  html:root body #work .discipline-nav nav{align-items:center}
  html:root body #work .discipline-nav .nav-primary{justify-content:center;text-align:center}
}

/* ==========================================================================
   Web Design, large screens: a bigger stage. The project fills the frame's height (the same gap to the
   title as the cards in the other categories) and the frame takes part of the space the shorter Web
   summaries leave free below (--g-extra, set by work-fit.js), so nothing else moves.
   ========================================================================== */
@media (min-width:1200px) and (orientation:landscape){
  html:root body #work .work-content[data-category="web"] > #gallery{height:calc(var(--g-h) + var(--g-extra,0px)) !important}
  html:root body #work .work-content[data-category="web"] #active-project > .project-preview{inset:-14px 0 !important;height:auto !important}
}