/* Landing page, desktop and large screens: one proportional layout.
   The portrait collage takes all the height it can and its column is exactly as wide as it is, so there is no dead
   space between the words and the images; the text column takes the rest, and every size in it follows one unit
   (--u) that grows with that column and never lets the text outgrow the screen height. Loaded last. */
@media (min-width: 1101px) and (min-height: 600px) and (orientation: landscape) {
  :root {
    --lp-pad-t: 14px;
    --lp-pad-b: 26px;
    --lp-side: clamp(40px, 4.3vw, 132px);
    --lp-h: calc(100dvh - var(--header) - var(--lp-pad-t) - var(--lp-pad-b));   /* height the composition may use */
    --lp-comp: min(calc(var(--lp-h) / 1.02), 61%);                               /* its width (1 : 1.02) */
  }
  html .intro .intro-layout {
    max-width: calc(var(--lp-h) * 1.95 + 2 * var(--lp-side));   /* ultra-wide screens stay balanced */
    padding: var(--lp-pad-t) var(--lp-side) var(--lp-pad-b);
    grid-template-columns: minmax(0, 1fr) var(--lp-comp);
    column-gap: clamp(40px, 3.4vw, 120px);
    align-items: center;
  }
  html .intro .composition-area { justify-content: flex-end; }
  html .intro .visual-composition {
    width: min(100%, calc(var(--lp-h) / 1.02));
    aspect-ratio: 1 / 1.02;
    max-height: 100%;
  }
  /* the collage and the portrait are the same height (see below); centred in the box, level with the text */
  html .intro .visual-composition .collage,
  html .intro .visual-composition .portrait-cutout { top: 1.873%; }

  /* the text column: one unit for every size; each size also has a gentler ceiling, so on very large screens
     the words grow a little less than the column (laptop sizes are unchanged) */
  html .intro .hero-copy { --u: min(1cqw, .86dvh); }
  html[lang=ar] .intro .hero-copy { --u: min(1cqw, .74dvh); }
  html .intro .hero-copy > .eyebrow { font-size: min(calc(6px + 1.2 * var(--u)), calc(8px + .8 * var(--u))); margin-bottom: calc(2.6 * var(--u)); }
  html .intro .hero-copy > .eyebrow .red-rule { width: calc(18px + 1.2 * var(--u)); }
  html .intro .hero-copy h1#intro-title { font-size: min(calc(13.9 * var(--u)), calc(12px + 11.5 * var(--u))); margin-bottom: calc(.9 * var(--u)); }
  html[lang=ar] .intro .hero-copy h1#intro-title { font-size: min(calc(17 * var(--u)), calc(14px + 14.2 * var(--u))); }
  /* these two lines never wrap, so they are also held to the column width */
  html .intro .hero-copy .identity-roles,
  html[lang=ar] .intro .hero-copy .identity-roles { font-size: min(calc(6px + 2.4 * var(--u)), calc(8px + 2 * var(--u)), 3.4cqw); margin-bottom: calc(3 * var(--u)); }
  html .intro .hero-copy .hero-line,
  html[lang=ar] .intro .hero-copy .hero-line { font-size: min(calc(6px + 4.5 * var(--u)), calc(11px + 3.5 * var(--u)), 6.4cqw); margin-bottom: calc(2.8 * var(--u)); }
  /* the paragraph takes the width of the column as the screen grows, so it reads in fewer, longer lines */
  html .intro .hero-copy .hero-caption { font-size: min(calc(9px + 1.6 * var(--u)), calc(12px + 1 * var(--u))); max-width: min(100%, 72ch); text-wrap: pretty; }
  /* Arabic sets smaller on the line at the same size, so its lines take a little more */
  html[lang=ar] .intro .hero-copy .identity-roles { font-size: min(calc(6px + 2.8 * var(--u)), calc(9px + 2.2 * var(--u)), 3.9cqw); }
  html[lang=ar] .intro .hero-copy .hero-line { font-size: min(calc(6px + 5.2 * var(--u)), calc(12px + 4 * var(--u)), 7.4cqw); }
  html[lang=ar] .intro .hero-copy .hero-caption { font-size: min(calc(8px + 1.8 * var(--u)), calc(12px + 1 * var(--u))); }
  html .intro .hero-links { margin-top: calc(3.2 * var(--u)); column-gap: calc(2px + 3.6 * var(--u)); }
  html .intro .profile-link { font-size: min(calc(7px + 1.6 * var(--u)), calc(10px + 1 * var(--u))); gap: calc(4px + .6 * var(--u)); }
  html .intro .profile-link svg { width: calc(8px + 1.6 * var(--u)); height: calc(8px + 1.6 * var(--u)); }
  html .intro .profile-link .link-arrow { font-size: .9em; }

  /* the action */
  html .intro .enter-work { margin: calc(5.4 * var(--u)) 0 calc(2 * var(--u)); gap: calc(8px + 2.2 * var(--u)); }
  html .intro .enter-work .circle-arrow {
    width: min(calc(26px + 10 * var(--u)), calc(36px + 8 * var(--u))); height: min(calc(26px + 10 * var(--u)), calc(36px + 8 * var(--u)));
    font-size: min(calc(12px + 4.6 * var(--u)), calc(17px + 3.6 * var(--u))); border-width: 2px;
  }
  html .intro .enter-work strong { font-size: min(calc(8px + 2 * var(--u)), calc(11px + 1.4 * var(--u))); }
  html .intro .enter-work small { font-size: min(calc(6px + 1.6 * var(--u)), calc(9px + 1 * var(--u))); max-width: 36ch; }

  /* the words arrive from a distance that grows with them */
  html .intro .hero-copy > * { --lp-shift: calc(4px + 4 * var(--u)); }
  html .intro .hero-copy > h1, html .intro .hero-copy > .role, html .intro .hero-copy > .hero-line,
  html .intro .hero-copy > .hero-caption, html .intro .hero-copy > .enter-work { animation-name: lp-copy-in; }
}
@keyframes lp-copy-in { from { opacity: 0; transform: translateY(var(--lp-shift, 30px)); } to { opacity: 1; transform: none; } }

/* very large screens: the header grows a little with the page */
@media (min-width: 2000px) and (min-height: 1000px) {
  :root { --header: 96px; }
  html .site-header .wordmark { width: 138px; }
  html .site-header .header-note { font-size: 14px; }
  html .site-header .language-switch button { font-size: 16px; padding: 9px 17px; }
}

/* every size: the collage and the portrait are exactly the same height, so the first cards line up with the top of
   the portrait and the last cards with its bottom (same 2.5% gap between them as before) */
html .intro .visual-composition .collage { width: 60.388%; }
html .intro .visual-composition .portrait-cutout { width: 37.112%; }

/* the header has no motion button; motion still follows the device's reduce-motion setting */
html .site-header #motion { display: none; }

/* Work view: the summary under the carousel. Title and action on one line, a rule, one overview paragraph held to a
   comfortable line length, then the methods and the status on one quiet line. */
/* Its vertical rhythm: one even step between every line of it, so each item has a little space above and below it,
   and under the page heading about as much air as there is above it (between the heading and the cover). Shorter screens use a smaller step; in UX Research the page picks the
   step from the space it really has (swiss.js sets data-pm-space). */
html .work-content{--pm-head:46px;--pm-pager:14px;--pm-gap:14px;--pm-kicker:10px;--pm-row:8px}
@media (min-width:801px) and (max-height:900px){html .work-content{--pm-head:40px;--pm-pager:12px;--pm-gap:12px;--pm-kicker:8px;--pm-row:6px}}
@media (min-width:801px) and (max-height:780px){html .work-content{--pm-head:32px;--pm-pager:10px;--pm-gap:10px;--pm-kicker:6px;--pm-row:4px}}
@media (min-width:801px) and (max-height:700px){html .work-content{--pm-head:20px;--pm-pager:8px;--pm-gap:8px;--pm-kicker:4px;--pm-row:4px}}
html .work-content[data-pm-space="0"]{--pm-head:46px;--pm-pager:14px;--pm-gap:14px;--pm-kicker:10px;--pm-row:8px}
html .work-content[data-pm-space="1"]{--pm-head:40px;--pm-pager:12px;--pm-gap:12px;--pm-kicker:8px;--pm-row:6px}
html .work-content[data-pm-space="2"]{--pm-head:32px;--pm-pager:10px;--pm-gap:10px;--pm-kicker:6px;--pm-row:4px}
html .work-content[data-pm-space="3"]{--pm-head:20px;--pm-pager:8px;--pm-gap:8px;--pm-kicker:4px;--pm-row:4px}
/* phones: the same even step, a little smaller (there is no rule above the summary there). In UX Research the cover
   keeps its full width and the summary follows it; when the screen is too short for both, the view scrolls instead of
   shrinking the cover to a thumbnail */
@media (max-width:800px){
  html .work-content{--pm-gap:12px;--pm-kicker:8px;--pm-row:6px}
  html .work-content[data-category="research"]{grid-template-rows:auto auto auto auto;align-content:start;align-self:start}
  html .work-content[data-category="research"] .gallery{height:auto;aspect-ratio:16/9;min-height:auto}
  html #work:has(> .work-content[data-category="research"]){overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
}
@media (min-width:801px){
  html .work-content .work-heading{padding-bottom:var(--pm-head)}
  html .work-content[data-category="research"]>.gallery-bottom{padding-top:var(--pm-pager)}
  html .work-content[data-category="research"] #project-meta>div{padding-top:var(--pm-gap)}
  html .work-content[data-category="research"] .gallery{height:min(calc((100cqw - var(--peek)) * .5625),62vh,var(--gallery-fit,100vh))}
}
html .work-content #project-meta{display:block}
html .work-content[data-category] > #project-meta{padding-top:var(--pm-gap)}
html .work-content #project-meta .pm{display:block;position:relative}
html .work-content #project-meta .pm-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:var(--pm-gap);border-bottom:1px solid #e6e1db}
html .work-content #project-meta .pm-head>div{flex:1 1 auto;min-width:0}
html .work-content #project-meta .pm-head .project-kicker{margin:0 0 var(--pm-kicker)}
html .work-content #project-meta .pm-head h3{margin:0}
html .work-content #project-meta .pm-head .project-link{flex:none;margin:0;grid-column:auto;grid-row:auto;align-self:center}
html .work-content #project-meta .pm .project-description{margin:var(--pm-gap) 0 0;max-width:88ch;font-size:15px;line-height:1.6;color:#4f4a46;text-wrap:pretty}
html[lang=ar] .work-content #project-meta .pm .project-description{line-height:1.85}
html .work-content #project-meta .pm-line{margin:var(--pm-gap) 0 0;display:flex;flex-wrap:wrap;row-gap:var(--pm-row);column-gap:28px;font-size:12.5px;line-height:1.5;color:#5f5954}
html .work-content #project-meta .pm-line b{font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6c6560;margin-inline-end:8px}
html[lang=ar] .work-content #project-meta .pm-line b{letter-spacing:0;font-size:12px}
/* Arabic: the rows size to their content as in English (the shared right-to-left rule squeezed the cover under the pager) */
@media (min-width:801px){html[dir=rtl] .work-content[data-category="research"]{grid-template-rows:auto auto auto auto}}
/* laptop-height screens: a little less frame around the page, and the summary title holds to the height */
@media (min-width:801px) and (max-height:1000px){
  html .work{padding-top:24px;padding-bottom:20px}
  html .work-content #project-meta .pm-head h3{font-size:min(clamp(22px,2.2vw,34px),3.6vh)}
}
/* short screens: a smaller paragraph, and the methods line steps aside (it is on the study page) */
@media (min-width:801px) and (max-height:780px){
  html .work{padding-top:18px;padding-bottom:14px}
  html .work-content #project-meta .pm .project-description{font-size:14px;line-height:1.55}
  html[lang=ar] .work-content #project-meta .pm .project-description{line-height:1.75}
  html .work-content #project-meta .pm-line{display:none}
}
/* when the cover cannot give up more height, the study count steps aside (the pager shows it), the methods line too,
   and on the very shortest screens the view scrolls rather than cutting the summary off */
html .work-content.pm-no-count .work-count{display:none}
html .work-content.pm-compact #project-meta .pm-line{display:none}
html #work.pm-scroll{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}
/* a view that can scroll can take focus (a #work link lands on it); it is not a control, so it draws no ring */
html #work:focus{outline:none}
/* the next study's peek stays beside the cover when the cover gives up some height */
html .work-content[data-category="research"] .research-peek{left:calc(var(--cover-w,calc(100% - var(--peek))) + 24px);right:auto}
html[dir=rtl] .work-content[data-category="research"] .research-peek{right:calc(var(--cover-w,calc(100% - var(--peek))) + 24px);left:auto}