@font-face {
  font-family: 'Pliant Black';
  src: url('../assets/fonts/Pliant-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pliant Bold';
  src: url('../assets/fonts/Pliant-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pliant Regular';
  src: url('../assets/fonts/Pliant-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pliant Medium';
  src: url('../assets/fonts/Pliant-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pliant Light';
  src: url('../assets/fonts/Pliant-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --vw1: 1vw; --vwf: 100vw; --dark: #1c011f; --red: #fb1616; --cream: #fffff5; --ink: #1c011f; --hover: #272626; --grey: #8c8c8c;
  --mint: #c2f8cb; --black: #000; --white: #fff;
  --ink-a14: rgba(28, 1, 31, 0.14); --ink-a16: rgba(28, 1, 31, 0.16); --ink-a28: rgba(28, 1, 31, 0.28); --ink-a30: rgba(28, 1, 31, 0.3); --cream-a30: rgba(255, 255, 245, 0.3);
  --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-36: 36px; --sp-40: 40px; --sp-60: 60px; --sp-80: 80px; --sp-120: 120px; --sp-160: 160px;
  --t-hover: 0.4s; --t-enter: 1.6s; --ease-reveal: cubic-bezier(0.12, 0, 0.39, 0); --f-display: 'Pliant Black', 'Arial Black', sans-serif; --f-heading: 'Pliant Bold', sans-serif; --f-mono: 'JetBrains Mono', monospace; --f-serif: 'Newsreader', Georgia, serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body { --nav-fs: clamp(13.8px, calc(1.341 * var(--vw1)), 25.4px); --fs-btn: clamp(14px, calc(1.13 * var(--vw1)), 23px); margin: 0; background: var(--dark); color: var(--cream); font-family: var(--f-heading); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; height: clamp(140px, calc(34 * var(--vw1)), 680px); display: flex; align-items: center; justify-content: space-between; background: var(--dark); }
@media (min-width: 1024px) {
  .site-header { padding: 0 clamp(20px, calc(5.35 * var(--vw1)), 120px) 0 0; }
}
.site-header .logo img { height: clamp(63px, calc(15 * var(--vw1)), 296px); }
@media (min-width: 1024px) {
  .site-header .logo img { width: auto; }
}
.main-nav { display: flex; gap: clamp(10px, calc(1.33 * var(--vw1)), 25px); margin-left: auto; }
@media (min-width: 768px) {
  .main-nav { margin-right: clamp(40px, calc(11.37 * var(--vw1)), 218px); }
}
.main-nav a { color: var(--red); text-decoration: none; font-family: var(--f-display); font-size: var(--nav-fs); letter-spacing: 0.04em; }
.main-nav .nav-work-btn { color: var(--red); text-decoration: none; font-family: var(--f-display); font-size: var(--nav-fs); letter-spacing: 0.04em; }
.main-nav a:hover { opacity: 0.75; }
.header-right { display: flex; align-items: baseline; margin-left: auto; padding-top: calc(0.72 * var(--vw1)); }
.header-right .main-nav { margin-left: 0; }
body:not(.page-inner) .header-right a { display: inline-block; text-decoration: none; transition: color var(--t-hover) var(--ease-in-out); }
body:not(.page-inner) .header-right a:hover { color: var(--hover); }
body:not(.page-inner) .header-right a:focus-visible { color: var(--hover); }
.wordmark { color: var(--red); font-family: var(--f-display); font-size: clamp(7.2px, calc(0.7065 * var(--vw1)), 13.6px); letter-spacing: 0.08em; text-decoration: none; }
:where(.wordmark) { display: none; }
:where(.main-nav) { margin-right: 0; }
/* ---------- Work sections ---------- */
.work { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 32px 32px 0 0; scroll-margin-top: 90px; }
.work-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.08); transition: transform var(--t-enter) cubic-bezier(0.16, 1, 0.3, 1); }
.work.in-view .work-bg { transform: scale(1); }
.work-overlay { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 0 var(--sp-20); }
.work-title span { display: inline-block; background: var(--red); color: var(--ink); font-family: var(--f-display); font-size: clamp(26px, calc(5 * var(--vw1)), 56px); padding: 0.18em 0.4em 0.12em; line-height: 1; letter-spacing: 0.01em; }
.work-desc { margin: 0; font-family: var(--f-mono); font-weight: 700; color: var(--red); font-size: clamp(11px, calc(1.4 * var(--vw1)), 13px); letter-spacing: 0.06em; text-transform: uppercase; }
/* Title + description fade up on hover (devices that support real hover). */
@media (hover: hover) and (pointer: fine) {
.work-title span { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-in), transform 0.8s var(--ease-in); }
.work-desc { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease-in) 0.1s, transform 0.8s var(--ease-in) 0.1s; }
.work:hover .work-title span,
  .work:focus-within .work-title span { opacity: 1; transform: translateY(0); }
.work:hover .work-desc,
  .work:focus-within .work-desc { opacity: 1; transform: translateY(0); }
}
.work-link { position: absolute; inset: 0; z-index: 3; }
.work.archive { justify-content: center; }
.top-arrow { font-size: 2em; line-height: 0; margin-left: 0.25em; }
/* ---------- About section ---------- */
.about-section { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: 32px 32px 0 0; background: var(--cream); color: var(--ink); padding: clamp(60px, 10vh, 120px) clamp(20px, calc(6 * var(--vw1)), 80px); scroll-margin-top: 90px; }
.about-inner { max-width: 1200px; margin: 0 auto; display: grid; column-gap: var(--sp-40); --about-h2: clamp(26px, calc(3.4 * var(--vw1)), 40px); }
@media (min-width: 1024px) { .about-inner { grid-template-columns: 200px 1fr; grid-template-areas: "eyebrow head"
    "sublabel text"; row-gap: var(--sp-28); } }
.eyebrow { grid-area: eyebrow; color: var(--mint); font-family: var(--f-display); font-size: var(--nav-fs); letter-spacing: 0.04em; text-decoration: none; justify-self: start; transition: color var(--t-hover) var(--ease-in-out); }
@media (min-width: 1024px) {
  .eyebrow { align-self: last baseline; margin-bottom: 0; }
  .about-inner h2 { align-self: last baseline; }
}
.eyebrow:hover { color: var(--hover); }
.sublabel { grid-area: sublabel; align-self: start; color: var(--mint); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; transition: color var(--t-hover) var(--ease-in-out); }
.about-inner h2 { grid-area: head; font-family: var(--f-heading); font-weight: 600; font-size: var(--about-h2); line-height: 1.2; margin: 0; }
.about-text { grid-area: text; }
.about-lead { font-family: var(--f-serif); font-style: normal; font-size: clamp(18px, calc(2 * var(--vw1)), 24px); line-height: 1.55; color: var(--ink); max-width: 720px; margin: 0 0 var(--sp-14); }
.about-body { font-family: 'Pliant Light', sans-serif; font-weight: 400; font-size: 13px; line-height: 1.7; letter-spacing: 0.05em; color: var(--ink); max-width: 640px; margin: 0; }
:where(.about-inner) { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "head" "sublabel" "text"; row-gap: var(--sp-16); }
:where(.eyebrow) { align-self: start; margin-bottom: 0; }
/* ---------- Services / Clients section ---------- */
.services-section { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: 32px 32px 0 0; background: var(--cream); color: var(--ink); padding: clamp(40px, 8vh, 90px) clamp(20px, calc(6 * var(--vw1)), 80px) clamp(80px, 10vh, 140px); scroll-margin-top: 90px; }
.services-inner { max-width: 1200px; margin: 0 auto; display: grid; }
@media (min-width: 1024px) {
  .services-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-60); }
}
.services-section h2 { font-family: var(--f-heading); font-weight: 700; font-size: clamp(24px, calc(2.8 * var(--vw1)), 34px); line-height: 1.15; margin: 0 0 var(--sp-20); }
.rule { width: 90px; height: 3px; background: var(--red); margin-bottom: var(--sp-28); }
.services-tags { font-family: var(--f-mono); font-size: 12px; line-height: 1.8; letter-spacing: 0.02em; color: var(--ink); max-width: 520px; margin: 0; }
.clients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
.clients-grid ul { list-style: none; margin: 0; padding: 0; font-family: var(--f-serif); font-size: clamp(18px, calc(2 * var(--vw1)), 24px); line-height: 1.2; color: var(--ink); }
:where(.services-inner) { grid-template-columns: 1fr; gap: var(--sp-40); }
/* ---------- Footer ---------- */
.site-footer { background: var(--dark); padding: calc(clamp(40px, calc(4.16 * var(--vw1)), 160px) + clamp(5.7px, calc(0.83 * var(--vw1)), 16.6px)) 20px clamp(17px, calc(2.48 * var(--vw1)), 49.8px) 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: clamp(24px, calc(8.35 * var(--vw1)), 160px) clamp(24px, calc(8.35 * var(--vw1)), 160px); }
@media (min-width: 768px) {
  .site-footer { align-items: flex-end; }
}
.site-footer .logo { align-self: flex-end; }
.site-footer .logo img { height: clamp(40.3px, calc(5.868 * var(--vw1)), 117.6px); width: auto; }
.footer-name { word-spacing: 0.3em; align-self: flex-end; line-height: 1.3; margin-bottom: -0.2em; color: var(--red); font-family: var(--f-display); font-size: clamp(11px, calc(0.71 * var(--vw1)), 14px); letter-spacing: 0.02em; }
.footer-actions { align-self: flex-end; display: flex; align-items: flex-end; gap: clamp(14px, calc(1.46 * var(--vw1)), 28px); }
.social { background: var(--red); color: var(--ink); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: opacity var(--t-hover) var(--ease-in-out); }
@media (min-width: 1024px) {
  .social { width: clamp(40px, calc(3.2 * var(--vw1)), 64px); height: clamp(40px, calc(3.2 * var(--vw1)), 64px); }
  .social svg { width: 64.4%; height: 64.4%; }
}
.social:hover { opacity: 0.8; }
.page-project .site-footer .social { background: var(--ink); color: var(--cream); }
.page-project .footer-name{ color: var(--ink); }
:where(.site-footer) { flex-direction: column; align-items: flex-start; }
:where(.footer-actions) { margin-left: 0; }
/* ---------- About page (about.html) ---------- */
/* Inner pages never grow past 1600px: viewport units are capped and the page is centered. */
body.page-inner { --vw1: min(1vw, 16px); --vwf: min(100vw, 1600px); max-width: 1600px; margin: 0 auto; }
html:has(body.page-about) { background: var(--dark); }
html:has(body.page-project) { background: var(--cream); }
.page-inner { --f-sans: 'Pliant Regular', 'Pliant Light', sans-serif; --ab-col-gap: calc(1.5 * var(--vw1)); --ab-inset: 0px; }
@media (min-width: 1024px) {
  .page-inner { --ab-h: clamp(20px, calc(2.3 * var(--vw1)), 44px); --ab-h-gap: clamp(12px, calc(1.6 * var(--vw1)), 30px); }
}
.page-inner .site-header { position: relative; height: auto; align-items: flex-end; }
@media (min-width: 1024px) {
  .page-inner .site-header { padding: clamp(24px, calc(3.5 * var(--vw1)), 66px) 20px 0 0; }
}
.page-inner .site-header .logo img { height: clamp(40px, calc(6.4 * var(--vw1)), 128px); }
@media (min-width: 768px) {
  .page-inner .main-nav { margin: 0; }
}
.page-inner .main-nav a[aria-current="page"] { opacity: 1; }
.inner-main { color: var(--cream); }
@media (min-width: 1024px) {
  .inner-main { padding: 0 var(--sp-20) 0 0; }
}
.inner-actions { display: flex; justify-content: space-between; align-items: center; margin: clamp(16px, calc(3.3 * var(--vw1)), 64px) 0 clamp(4px, calc(0.6 * var(--vw1)), 12px) auto; }
@media (min-width: 1024px) {
  .inner-actions { width: calc(50% - var(--ab-col-gap) / 2); }
}
.inner-socials { display: flex; gap: clamp(6px, calc(0.8 * var(--vw1)), 16px); }
.inner-socials .social { width: 44px; height: 44px; }
@media (min-width: 1024px) {
  .inner-socials .social { width: clamp(28px, calc(3 * var(--vw1)), 58px); height: clamp(28px, calc(3 * var(--vw1)), 58px); }
}
.ab-hero { display: grid; column-gap: var(--ab-col-gap); }
@media (min-width: 1024px) {
  .ab-hero { grid-template-columns: 1fr 1fr; }
}
.ab-portrait { width: 100%; height: auto; aspect-ratio: 423 / 383; object-fit: cover; object-position: center 30%; }
.ab-hero-copy { display: flex; flex-direction: column; justify-content: flex-end; }
.ab-headline { margin: 0; font-family: var(--f-display); font-weight: normal; line-height: 0.92; letter-spacing: -0.005em; text-transform: uppercase; }
@media (min-width: 1024px) {
  .ab-headline { font-size: clamp(22px, calc(2.75 * var(--vw1)), 52px); }
}
.ab-tags { margin: clamp(10px, calc(1.2 * var(--vw1)), 22px) 0 0; font-family: var(--f-sans); line-height: 1.3; }
@media (min-width: 1024px) {
  .ab-tags { font-size: clamp(11px, calc(1.3 * var(--vw1)), 25px); }
}
.ab-row { display: grid; }
@media (min-width: 1024px) {
  .ab-row { grid-template-columns: 1fr 1fr; column-gap: var(--ab-col-gap); margin-top: clamp(32px, calc(3.8 * var(--vw1)), 72px); }
  .ab-row--story { margin-top: clamp(48px, calc(9.6 * var(--vw1)), 180px); }
  .ab-row--me { margin-top: clamp(40px, calc(6 * var(--vw1)), 110px); }
}
.ab-row > .ab-col:first-child { padding-left: var(--ab-inset); }
@media (min-width: 1024px) {
  .ab-row > .ab-col:first-child { padding-right: calc(6.5 * var(--vw1)); }
}
.page-inner h2 { font-family: var(--f-display); font-weight: normal; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
@media (min-width: 1024px) {
  .page-inner h2 { margin: 0 0 var(--ab-h-gap); font-size: var(--ab-h); }
}
.ab-col--text p { margin: 0 0 1.1em; font-family: var(--f-serif); }
@media (min-width: 1024px) {
  .ab-col--text p { font-size: clamp(12px, calc(1.2 * var(--vw1)), 22px); line-height: 1.3; }
  .ab-col--aligned { padding-top: calc(var(--ab-h) + var(--ab-h-gap)); }
}
.ab-clients { display: grid; grid-template-columns: 54% 1fr; }
.ab-clients ul { list-style: none; margin: 0; padding: 0; font-family: var(--f-sans); line-height: 1.3; }
@media (min-width: 1024px) {
  .ab-clients ul { font-size: clamp(11px, calc(1.3 * var(--vw1)), 25px); }
}
.ab-roles { padding-left: var(--ab-inset); }
@media (min-width: 1024px) {
  .ab-roles { margin-top: clamp(32px, calc(4.8 * var(--vw1)), 90px); }
}
.ab-roles-grid { display: grid; justify-content: start; font-family: var(--f-sans); }
@media (min-width: 1024px) {
  .ab-roles-grid { grid-template-columns: repeat(4, auto); column-gap: calc(3.3 * var(--vw1)); row-gap: calc(1 * var(--vw1)); }
}
.ab-role { display: flex; flex-direction: column; }
.ab-role-co { line-height: 1.2; }
@media (min-width: 1024px) {
  .ab-role-co { font-size: clamp(11px, calc(1.2 * var(--vw1)), 23px); }
}
.ab-role > span:last-child { line-height: 1.3; }
@media (min-width: 1024px) {
  .ab-role > span:last-child { font-size: clamp(11px, calc(0.9 * var(--vw1)), 17px); }
}
.back-btn { display: flex; width: fit-content; align-items: center; gap: 0.5em; margin: calc(var(--back-gap, 100) * var(--u, 1px)) 0 0 0; padding: var(--sp-10) 0 var(--sp-10) var(--sp-10); background: none; color: var(--red); font-family: var(--f-mono); font-weight: 700; font-size: var(--fs-btn); line-height: 1; letter-spacing: 0.02em; text-decoration: none; transition: opacity var(--t-hover) var(--ease-in-out); }
.back-btn .top-arrow { display: inline-block; flex: none; width: 1.6em; height: 1.6em; margin: -0.3em 0; font-size: inherit; line-height: 1; text-indent: 300%; overflow: hidden; white-space: nowrap; background: currentColor; -webkit-mask: url('../assets/img/arrow-left.png') center / contain no-repeat; mask: url('../assets/img/arrow-left.png') center / contain no-repeat; }
.back-btn:hover { opacity: 0.8; }
/* BACK (left) and NEXT (right) share one row at the end of a project page. */
.pj-backrow { display: flex; justify-content: space-between; align-items: flex-start; }
.next-btn { padding: var(--sp-10) var(--sp-10) var(--sp-10) 0; margin-left: auto; }
.next-btn .top-arrow { -webkit-mask-image: url('../assets/img/arrow-right.png'); mask-image: url('../assets/img/arrow-right.png'); }
:where(.page-inner) { --ab-h: 24px; --ab-h-gap: 14px; }
:where(.page-inner .site-header) { padding-left: var(--sp-20); padding-right: var(--sp-20); }
:where(.inner-main) { padding: 0 var(--sp-20); }
:where(.inner-actions) { width: 100%; }
:where(.ab-hero), :where(.ab-row) { grid-template-columns: 1fr; row-gap: var(--sp-28); }
:where(.ab-hero-copy) { margin-top: var(--sp-24); }
:where(.ab-headline) { font-size: clamp(26px, calc(8 * var(--vw1)), 40px); }
:where(.ab-tags), :where(.ab-clients ul) { font-size: 14px; }
:where(.ab-col--text p) { font-size: 16px; line-height: 1.3; }
:where(.ab-row > .ab-col:first-child) { padding-right: 0; }
:where(.ab-col--aligned) { padding-top: 0; }
:where(.ab-roles-grid) { grid-template-columns: repeat(2, auto); column-gap: var(--sp-32); row-gap: var(--sp-16); }
:where(.ab-role-co) { font-size: 14px; }
:where(.ab-role > span:last-child) { font-size: 11px; }
:where(.ab-row--story), :where(.ab-row--me), :where(.ab-roles) { margin-top: 48px; }
:where(.inner-socials .social) { width: 36px; height: 36px; }
/* ---------- Keyboard focus ---------- */
:root { --focus: var(--cream); }
.page-project { --focus: var(--ink); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.work-link:focus-visible { outline-offset: -6px; outline-color: var(--cream); }
.work-menu a:focus-visible { outline-offset: 2px; }
.page-project .site-footer a:focus-visible { outline-color: var(--ink); }
/* ---------- WORK sub menu (all pages except home) ---------- */
.page-inner .site-header { z-index: 30; }
.main-nav .nav-work-btn { display: inline-flex; align-items: center; gap: 0.5em; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; font-family: var(--f-display); font-size: var(--nav-fs); letter-spacing: 0.04em; line-height: inherit; }
.nav-work { position: relative; }
.nav-chev { width: 0.8em; height: 0.5em; transform: rotate(180deg); transition: transform 0.45s var(--ease-in-out); }
.nav-work.open .nav-chev,
.nav-work:not(.dismissed):has(:focus-visible) .nav-chev { transform: none; }
.page-project .nav-chev { color: var(--ink); }
.work-menu { display: none; position: absolute; top: 100%; z-index: 40; list-style: none; }
@media (min-width: 768px) {
  .work-menu { left: 0; margin: 0; margin-left: -0.9em; padding: 0.7em 1em 0.6em 0.9em; }
}
.nav-work.open .work-menu { display: block; }
.nav-work:not(.dismissed):has(:focus-visible) .work-menu { display: block; }
.nav-work.open .nav-work-btn { color: var(--red); }
.work-menu a.current { color: var(--red); }
.work-menu a:hover { color: var(--red); }
.page-project .nav-work.open .nav-work-btn { color: var(--red); }
.work-menu a { display: block; color: var(--ink); text-decoration: none; font-family: 'Pliant Medium', 'Pliant Regular', sans-serif; font-size: max(11px, 0.74em); line-height: 1.1; letter-spacing: 0.04em; white-space: nowrap; }
.page-inner .main-nav .work-menu a { color: var(--ink); }
.page-inner .main-nav .work-menu a { line-height: 1.1; }
@media (min-width: 1024px) {
  .page-inner .main-nav .work-menu a { font-size: max(11px, calc(9.62 * var(--u))); }
}
.page-about .main-nav .work-menu a { color: var(--cream); }
.main-nav .work-menu a.current { color: var(--red); }
.main-nav .work-menu a:hover { color: var(--red); }
.page-project .work-menu { background: var(--cream-a30); }
.page-about .work-menu { background: var(--ink-a30); }
.main-nav .work-menu a:hover { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.nav-work:hover .work-menu { display: block; }
.nav-work:hover .nav-chev { transform: none; }
.page-project .nav-work:hover .nav-work-btn { color: var(--red); }
.page-about .nav-work:hover .nav-work-btn { color: var(--red); }
}
:where(.work-menu) { left: auto; right: 0; margin-left: 0; text-align: right; padding-right: 0; padding-left: 1em; }
/* ---------- Project pages (conrad.html, ...) ---------- */
/* Desktop geometry is expressed in "reference px" (1290px-wide design): --u = 1 reference px. */
.page-project { --u: calc(var(--vwf) / 1290); --fs-body: clamp(11px, calc(7.2 * var(--u)), 13px); --fs-label: clamp(11px, calc(16 * var(--u)), 30px); --fs-desc: clamp(12px, calc(18.2 * var(--u)), 34px); --fs-title: clamp(16px, calc(33 * var(--u)), 62px); --fs-name: clamp(16px, calc(28 * var(--u)), 52px); --su-12: calc(12 * var(--u)); --su-40: calc(40 * var(--u)); --su-64: calc(64 * var(--u)); --su-80: calc(80 * var(--u)); --su-96: calc(96 * var(--u)); --su-120: calc(120 * var(--u)); --pj-ink: var(--ink); background: var(--cream); color: var(--pj-ink); }
.page-project .site-header { background: var(--cream); }
@media (min-width: 1024px) {
  .page-project .site-header { padding: calc(56 * var(--u)) calc(86 * var(--u)) 0 var(--su-64); }
}
.page-project .site-header .logo img { height: auto; }
@media (min-width: 1024px) {
  .page-project .site-header .logo img { width: calc(151 * var(--u)); }
}
@media (min-width: 768px) {
  .page-project .main-nav { margin: 0; }
}
.page-project .main-nav a { color: var(--ink); font-size: var(--nav-fs); }
.page-project .main-nav .nav-work-btn { color: var(--ink); font-size: var(--nav-fs); }
.pj-title-row { display: grid; align-items: center; min-height: calc(40 * var(--u)); }
@media (min-width: 1024px) {
  .pj-title-row { grid-template-columns: calc(288 * var(--u)) calc(423 * var(--u)) 1fr; padding-left: var(--su-64); margin-top: var(--su-64); }
}
.pj-title { margin: 0; font-family: var(--f-display); font-weight: normal; line-height: 1; text-transform: uppercase; color: var(--pj-ink); }
@media (min-width: 1024px) {
  .pj-title { font-size: var(--fs-name); }
}
.pj-tagline { margin: 0; font-family: var(--f-serif); line-height: 1.1; color: var(--ink); }
@media (min-width: 1024px) {
  .pj-tagline { font-size: var(--fs-name); }
}
.pj-sub { margin: 0; font-family: var(--f-sans); color: var(--ink); }
@media (min-width: 1024px) {
  .pj-sub { font-size: var(--fs-body); }
}
.pj-hero { overflow: hidden; }
@media (min-width: 1024px) {
  .pj-hero { margin: var(--su-64) var(--su-80) 0 var(--su-80); border-radius: calc(33 * var(--u)); }
}
.pj-hero img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center 50%; transform: scale(1.12); }
@media (min-width: 1024px) {
  .pj-hero img { aspect-ratio: 1128 / 565; border-radius: calc(33 * var(--u)); }
}
.pj-info { display: grid; }
@media (min-width: 1024px) {
  .pj-info { grid-template-columns: minmax(max-content, calc(363 * var(--u))) 1fr; padding-left: var(--su-40); margin-top: calc(90 * var(--u)); }
}
.pj-meta { padding-top: var(--su-12); padding-right: var(--sp-20); }
.pj-meta h3 { margin: 0 0 var(--su-12); font-weight: normal; font-family: var(--f-heading); line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: var(--pj-ink); }
@media (min-width: 1024px) {
  .pj-meta h3 { font-size: var(--fs-label); }
}
.pj-meta h3 + ul { margin-bottom: calc(47 * var(--u)); }
.pj-meta ul:last-child { margin-bottom: 0; }
.pj-meta ul { list-style: none; margin: 0; padding: 0; font-family: var(--f-mono); }
@media (min-width: 768px) { .pj-meta ul{ white-space: nowrap; } }
@media (min-width: 1024px) {
  .pj-meta ul { font-size: clamp(11px, calc(10 * var(--u)), 18px); line-height: max(calc(18.5 * var(--u)), 1.3em); }
}
.pj-copy h2 { font-family: var(--f-sans); font-weight: normal; letter-spacing: 0; text-transform: none; color: var(--pj-ink); }
@media (min-width: 1024px) {
  .pj-copy h2 { margin: 0 0 var(--su-12); font-size: var(--fs-title); line-height: 1.1; }
}
.pj-copy p { font-family: var(--f-serif); }
@media (min-width: 1024px) {
  .pj-copy p { margin: 0; max-width: calc(508 * var(--u)); font-size: var(--fs-desc); line-height: 1.3; }
}
.pj-copy .pj-fine { font-family: var(--f-sans); color: var(--ink); }
@media (min-width: 1024px) {
  .pj-copy .pj-fine { margin-top: var(--su-40); max-width: calc(458 * var(--u)); font-size: var(--fs-body); line-height: 1.3; }
}
.pj-item { margin: 0; width: 100%; aspect-ratio: var(--ar); }
.pj-clip { overflow: hidden; }
.pj-item > img.zoom { transform: scale(1.14); transform-origin: 50% 45%; }
.pj-item > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-project .site-footer { background: var(--cream); }
/* Variant: full-bleed video hero + indented info block (abbott.html) */
.pj-hero--bleed { overflow: visible; }
@media (min-width: 1024px) {
  .pj-hero--bleed { margin: var(--su-64) 0 0; border-radius: 0; }
}
.pj-hero-media { display: block; width: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .pj-hero-media { aspect-ratio: 1290 / 695; }
}
.pj-info--indent { align-items: start; }
/* Variant: inset rounded hero + fixed-height info block (verizon.html) */
@media (min-width: 1024px) {
  .pj-hero--v { margin: calc(72 * var(--u)) calc(68 * var(--u)) 0 var(--su-64); }
}
.pj-hero--v img { transform: none; }
.pj-hero--v img { aspect-ratio: auto; }
@media (min-width: 1024px) {
  .pj-hero--v img { aspect-ratio: 1157 / 532; }
}
.pj-info--fixed { align-items: start; }
/* Variant: wide tagline, rounded inset hero, results list, video bands (jumeirah.html) */
@media (min-width: 1024px) {
  .pj-hero--j { margin: calc(85 * var(--u)) var(--su-80) 0 var(--su-64); }
}
.pj-hero--j img { transform: none; object-position: center top; }
@media (min-width: 1024px) {
  .pj-hero--j img { aspect-ratio: 1144 / 558; }
}
.pj-info--wide { align-items: start; }
.pj-results-h { font-family: var(--f-heading); line-height: 1.3; letter-spacing: 0; text-transform: uppercase; color: var(--pj-ink); }
@media (min-width: 1024px) {
  .pj-results-h { margin: var(--su-40) 0 var(--su-12); font-size: clamp(11px, calc(14.5 * var(--u)), 27px); }
}
.page-inner .pj-results-h { letter-spacing: 0; }
@media (min-width: 1024px) {
  .page-inner .pj-results-h { font-size: clamp(11px, calc(14.5 * var(--u)), 27px); margin: var(--su-40) 0 var(--su-12); }
}
.pj-results { list-style: none; margin: 0; padding: 0; font-family: var(--f-sans); color: var(--ink); }
@media (min-width: 1024px) {
  .pj-results { font-size: var(--fs-body); line-height: max(calc(12.3 * var(--u)), 1.3em); }
}
.jm-band { overflow: hidden; background: var(--dark); }
.jm-band > video, .jm-band > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jm-band { display: grid; }
.jm-band > * { grid-area: 1 / 1; }
/* Image / poster / video title (Jumeirah, Microsoft, Liminal): Role's size and weight, Title Case, colour from --title-color. */
.media-title { font-family: var(--f-heading); font-weight: normal; font-size: var(--fs-label); line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--title-color, var(--ink)); }
.jm-label { --title-color: var(--cream); align-self: start; justify-self: start; margin: var(--su-12) 0 0 var(--su-64); pointer-events: none; }
.jm-ooh { background: var(--cream); }
.jm-ooh { grid-template-columns: 2.868fr 94.57fr 2.562fr; grid-template-rows: 8.69fr 85.5fr 5.81fr; }
.jm-ooh > img { grid-area: 2 / 2; }
.jm-ooh > .jm-label { grid-area: 1 / 1 / -1 / -1; }
/* Variant: colored full-width sections (micron.html) */
@media (min-width: 1024px) {
  .pj-hero--m { margin: calc(74 * var(--u)) calc(101 * var(--u)) var(--su-120) calc(102 * var(--u)); }
}
.pj-hero--m img { transform: none; }
@media (min-width: 1024px) {
  .pj-hero--m img { aspect-ratio: 1087 / 562; }
}
.mc-sec { width: 100%; background: transparent; }
.mc-sec > .pj-item > img { object-fit: cover; }
.mc-bleed { margin: 0; width: 100%; }
.mc-sec > .pj-item.zoom-esc { overflow: hidden; }
.mc-sec > .pj-item.zoom-esc > img { transform: scale(1.08); transform-origin: 50% 35%; }
.mc-bleed img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-meta { padding-top: 0; color: var(--ink); }
.mc-meta h3 { color: var(--ink); font-weight: normal; }
.mc-copy { color: var(--ink); }
.page-inner .mc-copy h2 { margin: 0 0 calc(7 * var(--u)); font-family: var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.mc-copy p { font-family: var(--f-serif); }
@media (min-width: 1024px) {
  .mc-copy p { margin: 0; font-size: var(--fs-desc); line-height: calc(22.7 * var(--u)); }
}
/* Variant: colored bands over one stage (njoy.html) */
@media (min-width: 1024px) {
  .pj-hero--n { margin: var(--su-64) calc(138 * var(--u)) calc(74 * var(--u)) calc(138 * var(--u)); }
}
.pj-hero--n img { transform: none; }
@media (min-width: 1024px) {
  .pj-hero--n img { aspect-ratio: 1014 / 538; }
}
.nj-stage { overflow: hidden; }
.nj-band { display: none; }
.nj-stage .pj-item > img { object-fit: cover; }
.nj-clip { overflow: hidden; }
.nj-black { background: var(--black); }
.nj-stage .pj-item.nj-clip > img { transform: scale(var(--z)); transform-origin: var(--ox) var(--oy); }
.nj-cream { background: var(--cream); overflow: hidden; }
.nj-cream { display: flex; align-items: flex-end; }
.nj-cream > img { width: auto; height: 68.8%; }
.nj-info .pj-meta h3 + ul { margin-bottom: calc(22 * var(--u)); }
.nj-info .pj-meta h3 + ul:last-child { margin-bottom: 0; }
/* Variant: video hero + tall UI screens (pingpong.html) */
.pp-hero { overflow: hidden; background: var(--cream); }
@media (min-width: 1024px) {
  .pp-hero { margin: var(--su-96) 0 0; border-radius: 0; }
}
.pp-hero .pj-hero-media { object-position: center 70%; }
@media (min-width: 1024px) {
  .pp-hero .pj-hero-media { aspect-ratio: 1290 / 542; }
}
.pp-info { display: grid; align-items: start; }
.pp-info .pj-fine p, .cn-info .pj-fine p { font-family: inherit; color: inherit; }
@media (min-width: 1024px) {
  .pp-info .pj-fine p, .cn-info .pj-fine p { margin: 0 0 var(--su-12); max-width: none; font-size: inherit; line-height: inherit; }
}
.page-pingpong .pj-stage .pj-item:not(.pp-flat) { background: var(--cream); }
@media (min-width: 1024px) {
  .page-pingpong .pj-stage .pj-item:not(.pp-flat) { box-shadow: 0 calc(6 * var(--u)) calc(26 * var(--u)) var(--ink-a16); }
}
.pj-stage .pj-item > img { object-fit: cover; }
.pp-flat { overflow: hidden; }
/* Variant: Microsoft (microsoft.html) */
.ms-hero { background: var(--dark); }
@media (min-width: 1024px) {
  .ms-hero { margin: var(--su-64) 0 0; border-radius: 0; }
  .ms-hero .pj-hero-media { aspect-ratio: 1290 / 576; }
}
.ms-info { display: grid; align-items: start; }
.ms-info .pj-fine p { font-family: inherit; color: inherit; }
@media (min-width: 1024px) {
  .ms-info .pj-fine p { margin: 0 0 var(--su-12); max-width: none; font-size: inherit; line-height: inherit; }
}
.ms-stage .pj-item > img { object-fit: cover; }
.ms-logo { background: transparent; }
.ms-stage .ms-logo > img { object-fit: fill; }
.ms-label { margin: var(--sp-16) 0 0; white-space: nowrap; }
.ms-uiband { display: none; background: var(--dark); }
/* Variant: Liminal (liminal.html) */
.lm-hero { overflow: hidden; }
@media (min-width: 1024px) {
  .lm-hero { margin: var(--su-80) calc(101 * var(--u)) 0 calc(103 * var(--u)); border-radius: calc(33 * var(--u)); }
}
.lm-hero img { display: block; width: 100%; height: auto; object-fit: cover; transform: none; }
@media (min-width: 1024px) {
  .lm-hero img { aspect-ratio: 1086 / 522; }
}
.lm-info { display: grid; align-items: start; }
.lm-poster { background: var(--cream); overflow: hidden; }
@media (min-width: 1024px) {
  .lm-poster { box-shadow: calc(3 * var(--u)) calc(6 * var(--u)) calc(11 * var(--u)) var(--ink-a28); }
}
.lm-stage .pj-item > img { object-fit: cover; }
.lm-cap { margin: var(--sp-12) 0 0; font-family: var(--f-sans); line-height: max(calc(10.5 * var(--u)), 1.3em); color: var(--ink); }
@media (min-width: 1024px) {
  .lm-cap { font-size: var(--fs-body); }
}
@media (min-width: 1024px) {
  }
/* About page header: same geometry as project pages, red on dark */
.page-about { --u: calc(var(--vwf) / 1290); --fs-body: clamp(11px, calc(7.2 * var(--u)), 13px); --fs-label: clamp(11px, calc(16 * var(--u)), 30px); --fs-desc: clamp(12px, calc(18.2 * var(--u)), 34px); --fs-title: clamp(16px, calc(33 * var(--u)), 62px); --fs-name: clamp(16px, calc(28 * var(--u)), 52px); --su-12: calc(12 * var(--u)); --su-40: calc(40 * var(--u)); --su-64: calc(64 * var(--u)); --su-80: calc(80 * var(--u)); --su-96: calc(96 * var(--u)); --su-120: calc(120 * var(--u)); }
.page-about .site-header { background: var(--dark); }
@media (min-width: 1024px) {
  .page-about .site-header { padding: calc(56 * var(--u)) calc(86 * var(--u)) 0 var(--su-64); }
}
.page-about .site-header .logo img { height: auto; }
@media (min-width: 1024px) {
  .page-about .site-header .logo img { width: calc(151 * var(--u)); }
}
@media (min-width: 768px) {
  .page-about .main-nav { margin: 0; }
}
.page-about .main-nav a { color: var(--red); font-size: var(--nav-fs); }
.page-about .main-nav .nav-work-btn { color: var(--red); font-size: var(--nav-fs); }
.page-about .nav-chev { color: var(--red); }
/* Header nav: bottom of ABOUT / WORK aligns with the bottom of the logo */
.page-inner .main-nav { font-size: var(--nav-fs); line-height: 1; margin-bottom: -0.21em; }
.page-inner .main-nav a { line-height: inherit; }
.page-inner .main-nav .nav-work-btn { font-size: inherit; line-height: inherit; }
@media (min-width: 1024px) {
  .page-inner .main-nav a { font-size: inherit; }
}
/* About hero: elements beside the portrait scale with the portrait (--ph = portrait width) */
/* The About page is laid out on a 1190px reference width (--r = 1 reference px). One left margin (80r) runs the whole page. */
.page-about { --r: calc(var(--vwf) / 1190); --ph: calc(533 * var(--r)); }
@media (min-width: 1024px) {
.page-about .inner-actions { width: calc(var(--ph) * 0.9155); margin: 0; grid-column: 2; grid-row: 1; align-items: flex-start; justify-content: flex-start; gap: calc(var(--ph) * 0.0356); }
.page-about .inner-socials { gap: calc(var(--ph) * 0.0244); }
.page-about .inner-socials .social { width: calc(var(--ph) * 0.0732); height: calc(var(--ph) * 0.0732); }
/* Portrait: top = SAY HELLO top, left edge = logo left edge (64u), right edge unchanged (596r). */
.page-about .ab-hero { grid-template-columns: calc(596 * var(--r) - 64 * var(--u)) 1fr; grid-template-rows: auto 1fr; column-gap: calc(18 * var(--r)); justify-content: start; margin: clamp(16px, calc(3.3 * var(--vw1)), 64px) 0 0 0; }
.page-about .ab-hero .ab-portrait { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 516 / 483; }
.page-about .ab-hero-copy { grid-column: 2; grid-row: 2; }
.page-about .ab-headline { font-size: calc(var(--ph) * 0.0672); line-height: calc(var(--ph) * 0.0619); }
.page-about .ab-tags { font-size: calc(var(--ph) * 0.0313); line-height: calc(var(--ph) * 0.0375); max-width: calc(var(--ph) * 0.78); margin: calc(var(--ph) * 0.0285) 0 calc(var(--ph) * -0.004); height: calc(var(--ph) * 0.0375 * 5); /* keeps the old 5-line height so a longer list runs past it without moving anything else */ }
}
/* Variant: IBM (ibm.html) */
.ib-info { display: grid; align-items: start; }
.ib-stage .pj-item > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ib-stage .pj-item > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* IBM films: no autoplay; a play button sits over the poster (js/ibm.js). While a film plays the button hides, and shows as pause on hover or focus. */
.ib-stage .pj-item { position: relative; }
.ib-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(56px, calc(88 * var(--u)), 110px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: var(--ink); cursor: pointer; transition: background-color var(--t-hover) var(--ease-in-out), color var(--t-hover) var(--ease-in-out), opacity var(--t-hover) var(--ease-in-out), scale var(--t-hover) var(--ease-out); }
.ib-play::before { content: ''; position: absolute; left: 50%; top: 50%; width: 32%; height: 36%; translate: -38% -50%; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ib-play:hover, .ib-play:focus-visible { background: var(--dark); color: var(--cream); scale: 1.08; }
.is-playing .ib-play { opacity: 0; }
.is-playing:hover .ib-play, .is-playing .ib-play:focus-visible { opacity: 1; }
.is-playing .ib-play::before { width: 30%; height: 34%; translate: -50% -50%; clip-path: none; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%); }
/* Conrad page (wix layout): everything is positioned on the 1290px reference canvas.
   --hb = height of the header in reference px, so y values equal the Wix page's absolute y. */
/* Description block, identical on every project page (most common values across the pages):
   heading 33u, lead serif 18.2u / 20.4u, fine print 7.2u (11px floor). Desktop only; phones have their own sizes below. */
.page-inner .mc-copy h2 { margin-bottom: var(--su-12); }
@media (min-width: 1024px) {
  .page-project .pj-copy h2 { font-size: var(--fs-title); line-height: 1.1; margin-bottom: var(--su-12); }
  .page-inner .mc-copy h2 { font-size: var(--fs-title); line-height: 1.1; }
  .page-project .pj-copy > p:not(.pj-fine) { font-size: var(--fs-desc); line-height: calc(20.4 * var(--u)); max-width: calc(472 * var(--u)); }
  .page-inner .mc-copy p:not(.mc-fine) { font-size: var(--fs-desc); line-height: calc(20.4 * var(--u)); max-width: calc(472 * var(--u)); }
  .page-project .pj-copy p.pj-fine { margin-top: calc(39.2 * var(--u) - 10px); max-width: calc(440 * var(--u)); font-size: var(--fs-body); line-height: 1.3; }
  .page-project .pj-copy div.pj-fine { margin-top: calc(39.2 * var(--u) - 10px); max-width: calc(440 * var(--u)); font-size: var(--fs-body); line-height: 1.3; }
  .page-inner .mc-copy .mc-fine { margin-top: calc(39.2 * var(--u) - 10px); max-width: calc(440 * var(--u)); font-size: var(--fs-body); line-height: 1.3; }
}
:where(.page-project .site-header) { padding: var(--sp-24) var(--sp-20) 0; }
:where(.page-about .site-header) { padding: var(--sp-24) var(--sp-20) 0; }
:where(.page-about .site-header .logo img) { width: 110px; }
:where(.page-project .site-header .logo img) { width: 110px; }
:where(.pj-title-row) { grid-template-columns: 1fr; row-gap: 8px; padding: 0 var(--sp-20); margin-top: var(--sp-28); }
:where(.pj-title) { font-size: 22px; }
:where(.pj-tagline) { font-size: 22px; }
:where(.pj-sub) { font-size: 11px; }
:where(.pj-hero) { margin: var(--sp-24) var(--sp-20) 0; }
:where(.pj-hero--bleed) { margin: var(--sp-24) 0 0; }
:where(.pj-hero--v) { margin: var(--sp-24) var(--sp-20) 0; }
:where(.pj-hero--m) { margin: var(--sp-24) var(--sp-20) 0; }
:where(.pj-hero--n) { margin: var(--sp-24) var(--sp-20) var(--sp-24); }
:where(.pp-hero) { margin: var(--sp-24) 0 0; border-radius: 0; }
:where(.lm-hero) { margin: var(--sp-24) var(--sp-20) 0; border-radius: 16px; }
:where(.lm-info .pj-copy > p) { font-size: 16px; line-height: 1.3; max-width: none; }
:where(.ms-hero .pj-hero-media) { aspect-ratio: 4 / 3; }
:where(.ms-info .pj-copy > p) { font-size: 16px; line-height: 1.3; max-width: none; }
:where(.pp-hero .pj-hero-media) { aspect-ratio: 4 / 3; }
:where(.pp-info .pj-copy > p) { font-size: 16px; line-height: 1.3; max-width: none; }
:where(.pp-info .pj-fine p) { margin-bottom: var(--sp-12); }
:where(.page-pingpong .pj-stage .pj-item:not(.pp-flat)) { box-shadow: 0 4px 16px var(--ink-a14); }
:where(.nj-info .pj-copy) { margin-top: var(--sp-24); }
:where(.nj-info .pj-copy p) { font-size: 16px; line-height: 1.3; max-width: none; }
:where(.mc-meta) { position: static; margin-bottom: var(--sp-28); }
:where(.mc-copy p) { font-size: 16px; line-height: 1.35; }
:where(.mc-copy .mc-fine) { font-size: 11px; line-height: 1.5; margin-top: 17px; max-width: none; }
:where(.pj-hero--j) { margin: var(--sp-24) var(--sp-20) 0; }
:where(.pj-info--wide .pj-copy h2) { font-size: 24px; margin-bottom: var(--sp-14); }
:where(.pj-info--wide .pj-copy p) { font-size: 16px; line-height: 1.3; max-width: none; }
:where(.pj-results-h), :where(.page-inner .pj-results-h) { font-size: 13px; margin: var(--sp-24) 0 8px; }
:where(.pj-results) { font-size: 12px; line-height: 1.6; }
:where(.pj-copy--sm .pj-copy p:not(.pj-fine)) { font-size: 16px; line-height: 1.3; max-width: none; }
:where(.pj-hero-media) { aspect-ratio: 4 / 3; }
:where(.pj-hero img) { aspect-ratio: 4 / 3; border-radius: 16px; }
:where(.pj-info) { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-28); padding: 0 var(--sp-20); margin-top: var(--sp-36); }
:where(.pj-meta h3) { font-size: 14px; }
:where(.pj-meta ul) { font-size: 12px; line-height: 1.7; }
:where(.pj-copy h2) { font-size: 24px; }
:where(.pj-copy p) { font-size: 16px; max-width: none; }
:where(.pj-copy .pj-fine) { font-size: 11px; max-width: none; margin-top: 17px; }
/* Reduced motion: no smooth scrolling, no zoom/slide movement; fades and color changes stay as state feedback. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.work-bg, .work.in-view .work-bg { transform: none; transition: none; }
.nav-chev { transition: none; }
.work-title span, .work-desc { transform: none; transition: opacity var(--t-hover) var(--ease-in-out); }
}
/* About page desktop layout: same left margin (80r) for logo, portrait, headings and text; right column at 614r. */
@media (min-width: 1024px) {
.page-about { --ab-h: calc(30.5 * var(--r)); --ab-h-gap: calc(28 * var(--r)); }
.page-about .inner-main { padding: 0 calc(80 * var(--r)) 0 var(--su-64); }
.page-about .ab-row { grid-template-columns: calc(614 * var(--r) - 64 * var(--u)) 1fr; column-gap: 0; margin-top: calc(88.6 * var(--r)); }
.page-about .ab-row > .ab-col:first-child { padding: 0; }
/* Body copy = the project-page description style (serif, 18.2u / 20.4u, 472u wide) */
.page-about .ab-col--text p, .page-about .ab-row > .ab-col:last-child.ab-col--text p { max-width: calc(472 * var(--u)); font-size: var(--fs-desc); line-height: calc(20.4 * var(--u)); }
.page-about .ab-row--story { margin-top: calc(87.7 * var(--r)); }
.page-about .ab-row--me { margin-top: calc(88 * var(--r)); }
.page-about .ab-clients { margin-top: calc(-8 * var(--r)); }
.page-about .ab-clients ul { font-size: calc(16.7 * var(--r)); line-height: calc(26 * var(--r)); }
.page-about .ab-roles { margin-top: calc(84.3 * var(--r)); padding-left: 0; }
.page-about .ab-role-co { font-size: calc(17 * var(--r)); line-height: calc(19 * var(--r)); }
.page-about .ab-role > span:last-child { font-size: calc(13.3 * var(--r)); line-height: calc(15.5 * var(--r)); }
.page-about .ab-roles-grid { grid-template-columns: calc(156 * var(--r)) calc(175 * var(--r)) calc(178 * var(--r)) auto; column-gap: 0; row-gap: calc(12 * var(--r)); }
}
/* About page: no BACK button; the footer sits where it was (100u below the content). Title gaps are uniform: 88r above every title. */
.page-about .ab-col--text p:last-child { margin-bottom: 0; }
.page-about .site-footer { margin-top: calc(100 * var(--u)); }
/* About page: everything below the header sits 30px lower. */
@media (min-width: 1024px) {
  .page-about .inner-main { padding-top: 30px; }
}
.page-about .inner-actions .social { background: var(--cream); color: var(--ink); }
/* About Title (H2) uses the project-page Title style: Pliant Regular, Title Case as typed, 33u. */
.page-about .inner-main h2 { font-family: var(--f-sans); line-height: 1.1; letter-spacing: 0; text-transform: none; }
@media (min-width: 1024px) {
  .page-about .inner-main h2 { font-size: var(--fs-title); }
}
:where(.page-about .inner-main h2) { font-size: 24px; }
/* ===== Info block: ONE layout for every project page (desktop) =====
   Meta column (Role / Created at) starts at 64u, the same edge as the logo and Page name.
   Copy column (Title / Description / Body copy) starts at 420u.
   Title sits 62u below the hero (or below the top of its colored band); 60u of space follows the copy. */
@media (min-width: 1024px) {
.page-project .pj-hero { margin-top: var(--su-64); margin-bottom: 0; }
.page-project .pj-info, .page-project .pp-info, .page-project .ms-info, .page-project .lm-info, .page-project .ib-info,
  .page-project .mc-purple { display: grid; grid-template-columns: minmax(max-content, calc(356 * var(--u))) 1fr; align-items: start; margin: var(--su-64) 0 0; padding: 0 0 var(--su-120) var(--su-64); min-height: 0; height: auto; }
.page-project .mc-purple { margin-top: 0; padding-top: var(--su-64); }
.page-project .mc-purple .mc-meta, .page-project .mc-purple .mc-copy { position: static; width: auto; left: auto; top: auto; }
.page-project .nj-info { top: var(--su-64); padding-left: var(--su-64); grid-template-columns: minmax(max-content, calc(356 * var(--u))) 1fr; margin: 0; }
.page-project .pj-meta { padding: var(--su-12) 20px 0 0; }
.page-project .pj-meta h3 { margin: 0 0 var(--su-12); line-height: 1.2; }
.page-project .pj-meta h3 + ul { margin: 0 0 var(--su-40); }
.page-project .pj-meta ul:last-child { margin: 0; }
.page-project .pj-meta li:nth-child(2) { margin-top: 0; }
.page-project .pj-copy { padding-top: 0; }
.page-project .cn-hero-flow { margin: var(--su-64) var(--su-40) 0 var(--su-40); border-radius: calc(30 * var(--u)); }
.page-project .cn-hero-flow img { display: block; width: 100%; height: auto; aspect-ratio: 1212 / 608; object-fit: cover; }
}
@media (min-width: 1024px) {
.page-project .pj-fine p:last-child { margin-bottom: 0; }
}
/* ===== Project-page image stages (mobile first) =====
   Mobile: images stack in one column (each keeps its own crop via --ar).
   Desktop (>=1024px): the same items are placed on a 1000-unit CSS Grid (--gc/--gs = column start/span,
   --gr/--gh = row start/span, --rows and --sar = grid height). No absolute positioning. */
:where(.pj-stage, .mc-sec:not(.mc-purple)) { display: flex; flex-direction: column; gap: var(--sp-20); width: 100%; }
:where(.pj-stage) { padding: var(--sp-36) var(--sp-20) 0; }
:where(.ib-stage, .ms-stage, .lm-stage) { padding: 0 var(--sp-20) var(--sp-28); }
:where(.ms-stage, .nj-stage) { gap: var(--sp-16); }
:where(.lm-stage) { gap: var(--sp-14); }
:where(.nj-stage) { padding: var(--sp-28) var(--sp-20); background: var(--cream); }
:where(.mc-sec:not(.mc-purple)) { padding: var(--sp-36) var(--sp-20); display: block; }
.jm-band { aspect-ratio: 16 / 10; }
.jm-label { margin: var(--sp-12) 0 0 var(--sp-16); font-size: 12px; }
.nj-cream > img { height: 69%; }
.nj-info { order: -1; display: block; padding: 0 0 var(--sp-12); }
.cn-stage .pj-item { aspect-ratio: auto; }
.cn-stage .pj-item > img { height: auto; }
.cn-contain > img { object-fit: contain; }
.cn-main { overflow-x: clip; }
/* Liminal, phone and tablet: the last poster caption clears the TOP button's hover area. */
.lm-stage { padding-bottom: calc(var(--sp-28) + var(--sp-60)); }
/* Conrad: newspaper and tote bag are 75% of their old size (phone and tablet: 75% of the width, centered; desktop sizes are set per item in the grid). */
.cn-s75 { width: 75%; margin-left: auto; margin-right: auto; }
.cn-s50 { width: 50%; margin-left: auto; margin-right: auto; }
.cn-s70 { width: 70%; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
.pj-stage, .mc-sec:not(.mc-purple) { display: grid; grid-template-columns: repeat(1000, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: 0; padding: 0; aspect-ratio: var(--sar); }
.nj-stage { background: none; overflow: hidden; }
.pj-item, .ms-label, .ms-uiband, .lm-cap, .nj-band, .nj-info { display: block; grid-column: var(--gc) / span var(--gs); grid-row: var(--gr) / span var(--gh); min-width: 0; margin: 0; padding: 0; width: auto; aspect-ratio: auto; }
.ms-label { display: block; margin: 0; }
.ms-uiband, .nj-band { display: block; }
.pj-item[style*="--ml"] { width: var(--mw); margin-left: var(--ml); max-width: none; justify-self: start; }
.cn-stage .pj-item > img { height: 100%; }
.nj-info { order: 0; display: grid; grid-column: 1 / -1; grid-row: 49 / span 500; }
.nj-cream > img { height: 68.8%; }
.jm-band { aspect-ratio: auto; }
.jm-label { margin: var(--su-12) 0 0 var(--su-64); font-size: var(--fs-label); }
}
/* Mobile defaults that desktop rules used to cover (zero specificity so desktop rules always win at >=1024px) */
:where(body:not(.page-inner) .site-header) { padding: 0 clamp(20px, calc(5.35 * var(--vw1)), 120px) 0 0; }
:where(.work-menu a) { font-size: 11px; line-height: 1.1; letter-spacing: 0.04em; }
:where(.work-menu) { left: auto; right: 0; margin: 0; padding: 0.7em 0 0.6em 1em; text-align: right; }
:where(.page-about .inner-main) { padding-top: 30px; }
:where(.pj-hero) { border-radius: 16px; }
:where(.pj-hero--bleed, .ms-hero) { border-radius: 0; }
:where(.pp-hero) { border-radius: 0; }
:where(.lm-hero) { border-radius: 16px; }
:where(.lm-poster) { box-shadow: 1px 2px 4px var(--ink-a28); }
:where(.lm-cap) { font-size: 12px; line-height: 1.4; }
:where(.pj-hero--v img, .pj-hero--j img, .pj-hero--m img, .pj-hero--n img, .lm-hero img) { aspect-ratio: 4 / 3; }
body:not(.page-inner) .header-right a.wordmark { display: none; }
@media (min-width: 768px) {
body:not(.page-inner) .header-right a.wordmark { display: inline-block; }
}
/* ===== Tablet (768px - 1023px): stacked layout from the mobile rules above, with wider gutters,
   larger type and a two-column Info block (Meta | Copy). Desktop (>=1024px) uses the reference layout. ===== */
@media (min-width: 768px) {
  :where(.page-project .site-header), :where(.page-about .site-header), :where(.page-inner .site-header) { padding-left: var(--sp-32); padding-right: var(--sp-32); }
  :where(.page-project .site-header .logo img), :where(.page-about .site-header .logo img) { width: 140px; }
  :where(.pj-title-row), :where(.ib-title) { padding: 0 var(--sp-32); margin-top: var(--sp-36); }
  :where(.pj-title), :where(.pj-tagline) { font-size: 32px; }
  :where(.pj-sub) { font-size: 13px; }
  :where(.pj-hero), :where(.pj-hero--v), :where(.pj-hero--m), :where(.pj-hero--j) { margin-left: var(--sp-32); margin-right: var(--sp-32); }
  :where(.pj-hero--n) { margin-left: var(--sp-32); margin-right: var(--sp-32); }
  :where(.lm-hero) { margin-left: var(--sp-32); margin-right: var(--sp-32); }
  :where(.pj-info), :where(.pp-info), :where(.ms-info), :where(.lm-info), :where(.ib-info), :where(.pj-info--wide), :where(.pj-info--fixed), :where(.pj-info--indent) { grid-template-columns: minmax(max-content, 200px) 1fr; column-gap: var(--sp-32); row-gap: 0; padding-left: var(--sp-32); padding-right: var(--sp-32); }
  :where(.pj-copy h2), :where(.page-inner .mc-copy h2), :where(.pj-info--wide .pj-copy h2) { font-size: 30px; }
  :where(.pj-copy p), :where(.mc-copy p), :where(.pj-info--wide .pj-copy p), :where(.pp-info .pj-copy > p), :where(.ms-info .pj-copy > p), :where(.lm-info .pj-copy > p) { font-size: 18px; line-height: 1.35; }
  :where(.pj-meta h3) { font-size: 15px; }
  :where(.pj-meta ul) { font-size: 14px; }
  :where(.pj-stage), :where(.ib-stage), :where(.lm-stage), :where(.ms-stage) { padding-left: var(--sp-32); padding-right: var(--sp-32); }
  :where(.nj-stage), :where(.mc-sec) { padding-left: var(--sp-32); padding-right: var(--sp-32); }
  :where(.pj-wide) { margin-left: var(--sp-32); margin-right: var(--sp-32); }
  :where(.inner-main) { padding: 0 var(--sp-32); }
  :where(.ab-row) { grid-template-columns: 1fr 1fr; column-gap: var(--sp-32); }
  :where(.ab-headline) { font-size: clamp(36px, calc(6 * var(--vw1)), 56px); }
  :where(.ab-tags), :where(.ab-clients ul) { font-size: 16px; }
  :where(.ab-col--text p) { font-size: 18px; }
  :where(.services-inner) { grid-template-columns: 1fr 1fr; }
}

/* reset: mobile/tablet-only values that have no desktop rule */
@media (min-width: 768px) {
  :where(.wordmark) { display: block; }
  :where(.site-footer) { flex-direction: initial; }
  :where(.footer-actions) { margin-left: 0; }
  :where(.work-menu) { right: initial; text-align: start; }
}

/* reset: mobile/tablet-only values that have no desktop rule */
@media (min-width: 1024px) {
  :where(.ab-hero) { row-gap: normal; }
  :where(.ab-row) { row-gap: normal; }
  :where(.ab-hero-copy) { margin-top: 0; }
  :where(.pj-title-row) { row-gap: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; }
  :where(.lm-title) { grid-template-columns: none; }
  :where(.ib-title) { grid-template-columns: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; }
  :where(.ib-info) { row-gap: normal; column-gap: normal; }
  :where(.lm-info) { row-gap: normal; height: auto; column-gap: normal; }
  :where(.lm-info .pj-fine) { font-size: initial; line-height: initial; max-width: initial; margin-top: 0; }
  :where(.ms-info) { row-gap: normal; height: auto; column-gap: normal; }
  :where(.pp-info) { row-gap: normal; height: auto; column-gap: normal; }
  :where(.nj-info) { position: static; order: initial; padding-top: 0; padding-right: 0; padding-bottom: 0; }
  :where(.nj-info .pj-copy) { margin-top: 0; }
  :where(.mc-copy) { position: static; width: auto; }
  :where(.mc-meta) { position: static; margin-bottom: 0; }
  :where(.pj-title-row--j) { grid-template-columns: none; }
  :where(.pj-info--wide) { height: auto; padding-top: 0; padding-right: 0; padding-bottom: 0; row-gap: normal; column-gap: normal; }
  :where(.pj-info--fixed) { height: auto; padding-top: 0; padding-right: 0; padding-bottom: 0; column-gap: normal; row-gap: normal; }
  :where(.pj-info--indent) { height: auto; padding-top: 0; padding-right: 0; padding-bottom: 0; column-gap: normal; row-gap: normal; }
  :where(.pj-info) { row-gap: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; column-gap: normal; }
  :where(.pj-stage) { padding-left: 0; padding-right: 0; }
  :where(.ib-stage) { padding-left: 0; padding-right: 0; }
  :where(.lm-stage) { padding-left: 0; padding-right: 0; }
  :where(.ms-stage) { padding-left: 0; padding-right: 0; }
  :where(.nj-stage) { padding-left: 0; padding-right: 0; }
  :where(.mc-sec) { padding-left: 0; padding-right: 0; }
}

/* Project-page title row: Page name, Tagline and Title-row line share one bottom edge. */
@media (min-width: 1024px) {
  .page-project .pj-title-row { align-items: end; align-items: last baseline; }
}


/* Microsoft: the four screen-animation strips show whole at their own aspect, top-aligned in their slot (level with the label). */
.ms-strip { background: transparent; }
.ms-stage .ms-strip > img { object-fit: contain; }
@media (min-width: 1024px) { .ms-strip { align-self: start; height: auto; aspect-ratio: var(--ar); } }

/* Body copy (P2) on every project page: Pliant Light (300), 12px, 1.55 line height. Tripled class = beats the per-page rules above. */
body.page-inner .pj-fine.pj-fine.pj-fine,
body.page-inner .mc-fine.mc-fine.mc-fine,
body.page-inner .lm-d.lm-d.lm-d {
  font-family: 'Pliant Light', 'Pliant Regular', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.05em;
}

/* Description (P1) on every project page: Newsreader Light (300). */
body.page-inner .pj-copy > p:not(.pj-fine),
body.page-inner .mc-copy p:not(.mc-fine) { font-weight: 300; }

/* Hero (Page-top image): every image hero is the same size and sits 62u below the title row. Video heroes (full width) start at the same height. */
@media (min-width: 1024px) {
  .page-project .pj-hero--v, .page-project .pj-hero--j, .page-project .pj-hero--m,
  .page-project .pj-hero--n, .page-project .lm-hero, .page-project .cn-hero-flow {
    margin-top: var(--su-64);
    margin-left: var(--su-64);
    margin-right: var(--su-64);
    border-radius: calc(33 * var(--u));
  }
  .page-project .pj-hero--v img, .page-project .pj-hero--j img, .page-project .pj-hero--m img,
  .page-project .pj-hero--n img, .page-project .lm-hero img, .page-project .cn-hero-flow img {
    width: 100%; height: auto; aspect-ratio: 1128 / 565; object-fit: cover; transform: none;
  }
}

/* WORK drop-down: 5px higher, no background box. */
.work-menu { top: calc(100% - 5px); }
.page-project .work-menu, .page-about .work-menu { background: none; }

/* Home About: the text block (title, description, body copy) is 25% narrower than the full column beside the labels. */
@media (min-width: 1024px) {
  .about-inner { grid-template-columns: 200px calc((100% - 240px) * 0.75); }
  .about-lead { max-width: none; }
  .about-body { max-width: none; }
}

/* Description (P1), every page: line width 10% narrower (472u -> 424.8u). */
@media (min-width: 1024px) {
  body.page-inner .pj-copy > p:not(.pj-fine),
  body.page-inner .mc-copy p:not(.mc-fine) { max-width: calc(488.5 * var(--u)); } /* Project description, +15% */
  body.page-about .ab-col--text p { max-width: calc(424.8 * var(--u)); }
}

/* Info block: Role and Project title share a baseline. */
@media (min-width: 1024px) {
  .page-project :is(.pj-info, .mc-purple, .nj-info) { align-items: first baseline; }
}

/* Home About description: tighter line spacing (1.2). */
.about-lead { line-height: 1.2; }

/* Home About: I CREATE WORLDS sits on the baseline of the description's first line. */
@media (min-width: 1024px) {
  .sublabel, .about-text { align-self: first baseline; }
}


/* Archive page: a grid of equal tiles with the same gap across and down. Images show whole inside their tile, top-left aligned.
   Phones: 2 columns, tablet: 4 columns. Desktop: rows of 4 to 7 tiles (tiles are larger in rows with fewer images). */
.ar-grid { --ar-gap: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ar-gap); margin: 0; padding: var(--sp-36) var(--sp-20) 0; }
.ar-row { display: contents; }
.ar-item { margin: 0; min-width: 0; aspect-ratio: 7 / 5; }
.ar-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 768px) { .ar-grid { --ar-gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 48px var(--sp-32) 0; } }
@media (min-width: 1024px) {
  .ar-grid { --ar-gap: calc(12 * var(--u)); display: flex; flex-direction: column; padding: var(--su-64) var(--su-64) 0; }
  .ar-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--ar-gap); }
}

/* Archive page: dark page (About header and footer); cream type; images vary in size along each row. */
.ar-main { color: var(--ink); }
.ar-main .pj-title, .ar-main .pj-tagline { color: var(--ink); }
.ar-main .ar-item img { mix-blend-mode: normal; }
@media (min-width: 1024px) { .ar-main .pj-title-row { align-items: end; align-items: last baseline; } }


/* Home: info bar across the bottom of the Conrad, Abbott, Verizon and Jumeirah sections: purple at 90% multiplied into the image; cream type.
   The bar stays on the section's bottom edge (under the next project); --bar-push (set from js/main.js) grows it upward so its top edge and text rise as the next project slides up. */
.work-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--sp-10); padding: 6px 20px calc(30px + var(--bar-push, 0px)); color: var(--cream); font-family: var(--f-mono); font-weight: 300; font-size: 12px; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; pointer-events: none; }
.work-bar::before { content: ''; position: absolute; inset: 0; background: var(--dark); opacity: 0.9; mix-blend-mode: multiply; }
.work-bar ul { position: relative; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
  .work-bar { flex-direction: row; gap: 0; padding: calc(2.3vw - 10px) 2.4vw calc(1.6vw + 10px + var(--bar-push, 0px)); min-height: calc(7.4vw + var(--bar-push, 0px)); }
  .work-bar ul:nth-child(1) { width: calc(33.2vw - 2.4vw); }
  .work-bar li { white-space: nowrap; }
  .work-bar ul:nth-child(2) { min-width: 12vw; padding-right: 1vw; }
}

/* Home page load sequence (only when html has .intro-on: set in <head>, and removed again if the page loads scrolled down, e.g. on refresh, so nothing rises through the footer).
   0.2s: the logo, ABOUT, WORK and AMINORVARIANT all slide up from their baselines at the same time (each is clipped at its baseline).
   0.5s (0.3s later): the Conrad project rises from the bottom. Its image keeps the original zoom-out (108% to 100%, 1.6s) that plays when the section comes into view, i.e. as it lands. All moves ease out. */
.rise { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes intro-slide { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes intro-clip-text { from, to { clip-path: inset(-1em -1em 0.2em -1em); } }
  @keyframes intro-clip-logo { from, to { clip-path: inset(-1em -1em 27.5% -1em); } }
  @keyframes intro-rise { from { transform: translateY(100vh); } to { transform: none; } }
  html.intro-on body:not(.page-inner) .site-header .logo { animation: intro-clip-logo 2.2s linear 0.2s backwards; }
  html.intro-on body:not(.page-inner) .site-header .logo img { animation: intro-slide 2.2s var(--ease-out) 0.2s backwards; }
  html.intro-on body:not(.page-inner) .header-right a { animation: intro-clip-text 1s linear 0.2s backwards; }
  html.intro-on body:not(.page-inner) .header-right a .rise { animation: intro-slide 1s var(--ease-out) 0.2s backwards; }
  html.intro-on body:not(.page-inner) #conrad { animation: intro-rise 3.2s var(--ease-out) 0.5s backwards; }
}

/* ---- Home project sections with an info bar (.has-bar) ---- */
/* Title: 30px higher. The red box wipes up from its baseline (clip-path, no clipping container or parked box), then the title copy fades in. Hover over the box: purple box, grey copy. */
.has-bar .work-title { position: relative; top: -30px; display: flex; justify-content: center; }
.has-bar .work-overlay { pointer-events: none; z-index: 4; }
/* Touch screens: the info bar is always showing and stacks tall, so the title is centred in the image area above it (not the whole section). */
@media (hover: none) {
  .work.has-bar { box-sizing: border-box; padding-bottom: var(--bar-h, 0px); }
}
.has-bar .work-title .wt-box { display: inline-block; pointer-events: auto; text-decoration: none; background: var(--red); transition: background-color 0.5s var(--ease-in-out); }
.has-bar .work-title .wt-box:hover { background: var(--dark); }
.has-bar .work-title .wt-text { display: inline-block; padding: 0.18em 0.4em 0.12em; background: none; color: var(--ink); font-family: var(--f-display); font-size: clamp(26px, calc(5 * var(--vw1)), 56px); line-height: 1; letter-spacing: 0.01em; transition: color 0.5s var(--ease-in-out), opacity 0.6s var(--ease-out); }
.has-bar .work-title .wt-box:hover .wt-text { color: var(--grey); }

@media (hover: hover) and (pointer: fine) {
  /* resting state: box below its baseline (clipped), copy hidden, bar below the image */
  .work.has-bar .work-title > .wt-box { clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--ease-in) 0.15s, background-color 0.5s var(--ease-in-out); }
  .work.has-bar .work-title .wt-text { opacity: 0; transform: none; transition: color 0.5s var(--ease-in-out), opacity 0.35s var(--ease-in); }
  .work.has-bar:hover .work-title > .wt-box, .work.has-bar:focus-within .work-title > .wt-box { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-out), background-color 0.5s var(--ease-in-out); }
  .work.has-bar:hover .work-title .wt-text, .work.has-bar:focus-within .work-title .wt-text { opacity: 1; transition: color 0.5s var(--ease-in-out), opacity 0.7s var(--ease-out) 0.9s; }

  /* project image: 7% zoom in frame on hover */
  .work.has-bar:hover .work-bg { transform: scale(1.07); }

  /* info bar: slides up from the bottom on hover; the copy follows slightly behind (--bar-h is set from js/main.js) */
  .work.has-bar .work-bar { bottom: calc(-1 * var(--bar-h, 160px)); transition: bottom 0.9s var(--ease-in); }
  .work.has-bar .work-bar ul { transform: translateY(40px); transition: transform 0.9s var(--ease-in); }
  .work.has-bar:hover .work-bar { bottom: 0; transition: bottom 1s var(--ease-out); }
  .work.has-bar:hover .work-bar ul { transform: none; transition: transform 1.1s var(--ease-out) 0.2s; }
}
@media (prefers-reduced-motion: reduce) {
  .work.has-bar .work-bar, .work.has-bar .work-bar ul, .work.has-bar .work-title > .wt-box, .work.has-bar .work-title .wt-text { transition: none; }
}

/* Home About section only (these classes are not used on about.html): Title 48px, description 34px, body copy 13px (its original size). */
.about-inner { --about-h2: 48px; }
.about-lead { font-size: 34px; }
.about-body { font-size: 13px; }

/* Home About: body copy column 77% of the text column and tighter line spacing; ABOUT at 1.5625x the nav size (25% larger, twice);
   CTA arrow (cta-right-arrow.svg) in the bottom-left, left edge of the artwork aligned with ABOUT, bottom of the artwork 100px above the section bottom. */
.about-body { max-width: 77%; line-height: 1.45; }
.eyebrow { font-size: calc(var(--nav-fs) * 1.5625); }
.about-cta { position: absolute; bottom: calc(100px - 6.4px); left: calc(clamp(20px, calc(6 * var(--vw1)), 80px) + max(0px, (100% - 2 * clamp(20px, calc(6 * var(--vw1)), 80px) - 1200px) / 2) - 7.8px); width: 85.5px; height: 75px; background: var(--mint); -webkit-mask: url('../assets/img/cta-right-arrow.svg') center / contain no-repeat; mask: url('../assets/img/cta-right-arrow.svg') center / contain no-repeat; transition: background-color var(--t-hover) var(--ease-in-out), transform 0.7s var(--ease-in); }
/* ABOUT and the arrow share one hover state: hovering either one triggers both. */
.about-cta:hover, .about-section:has(.eyebrow:hover) .about-cta { background: var(--dark); transform: translateX(10px); transition: background-color var(--t-hover) var(--ease-in-out), transform 0.7s var(--ease-out); }
.eyebrow:hover, .about-section:has(.about-cta:hover) .eyebrow { color: var(--hover); }

/* Home Services section: titles match the About title (Pliant Bold 600, 48px, line-height 1.2). The CTA arrow is the .about-cta element, same place as in About. */
.services-section h2 { font-family: var(--f-heading); font-weight: 600; font-size: 48px; line-height: 1.2; }

/* Services: the red line runs the full width of the text block (same width as the tags paragraph). */
.services-inner .rule { width: 100%; max-width: 520px; }

/* Back-to-top CTA (every page): the NEXT PROJECT button with the arrow turned to point up. TOP in Pliant Black (same size as SAY HELLO),
   arrow = cta-right-arrow.svg rotated, purple -> red on hover with the arrow nudging up. Centred over the KM logo in the footer (js/top-cta.js sets left; 20px is the fallback), on the same line as NEXT PROJECT.
   Home: red, purple on hover (it sits over the Archive film). */
.top-cta { position: absolute; left: var(--sp-20); bottom: 0; z-index: 3; display: inline-flex; align-items: center; gap: 0.5em; padding: var(--sp-10) 0; text-decoration: none;
  font-family: var(--f-display); font-weight: normal; font-size: var(--fs-btn); line-height: 1; letter-spacing: 0.02em; color: var(--dark); transition: color var(--t-hover) var(--ease-in-out); }
.top-cta .bk-text { align-self: baseline; }
.top-cta .top-arrow { flex: none; display: block; width: 1.6em; height: 1.4em; margin: 0; font-size: inherit; line-height: 1; overflow: visible; background: currentColor; rotate: -90deg; translate: 0 -0.53em;
  transition: translate var(--t-hover) var(--ease-out), scale var(--t-hover) var(--ease-out);
  -webkit-mask: url('../assets/img/cta-right-arrow.svg') center / contain no-repeat; mask: url('../assets/img/cta-right-arrow.svg') center / contain no-repeat; }
.top-cta:hover, .top-cta:focus-visible { color: var(--red); }
.top-cta:hover .top-arrow, .top-cta:focus-visible .top-arrow { translate: 0 calc(-0.53em - 6px); scale: 1.1; }
body:not(.page-inner) .top-cta { bottom: var(--sp-20); color: var(--red); }
body:not(.page-inner) .top-cta:hover, body:not(.page-inner) .top-cta:focus-visible { color: var(--dark); }
/* Archive has two buttons in its row (PREVIOUS PROJECT, HOME), so below 1024px TOP gets its own line under them. */
.pj-backrow.top-below, .ar-main .pj-backrow { padding-bottom: calc(var(--sp-40) + var(--sp-10)); }
@media (min-width: 1024px) { .ar-main .pj-backrow:not(.top-below) { padding-bottom: 0; } }

/* Home info bar, layout per the reference: tagline | two role columns | "created at" on the right. A "/" starts every line. */
.work-bar li::before { content: '/ '; }
.work-bar .wb-made { text-align: left; }
@media (min-width: 768px) {
  .work-bar .wb-made { margin-left: auto; margin-right: 2.4vw; text-align: right; }
}
@media (min-width: 768px) {
  /* the "/ " prefix widens column 2; its right padding goes so column 3 stays where it was */
  .work-bar ul:nth-child(2) { padding-right: 0; }
}

/* Sections with the purple bar (except Conrad, which keeps its intro): the image zooms out (125% to 100%, same timing and easing as Conrad's 108%-to-100%)
   when the project reaches the top of the page. js/main.js toggles .at-top. Hover still zooms in to 107%. */
.work.has-bar:not(#conrad) .work-bg,
.work.has-bar:not(#conrad).in-view .work-bg { transform: scale(1.25); }
.work.has-bar:not(#conrad).at-top .work-bg { transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .work.has-bar:not(#conrad).at-top:hover .work-bg { transform: scale(1.07); }
}

/* Subtle parallax on the red project titles: js/main.js sets --title-par on each .work section while it scrolls in and out. */
.work .work-title { transform: translateY(var(--title-par, 0px)); }

/* ---- Home About section: entrance animation (plays once, the first time the section comes into view) + parallax per copy block ----
   1  ABOUT and the title slide up from their baselines        (0.2s)
   2  I CREATE WORLDS and the description fade in and glide up (0.9s)
   3  body copy fades in and glides up                           (1.5s)
   4  red arrow fades in and glides up                           (2.1s)                                                                       */
.eyebrow, .about-inner h2 { transform: translateY(var(--p-a, 0px)); }
.sublabel, .about-lead { transform: translateY(var(--p-b, 0px)); }
.about-body { transform: translateY(var(--p-c, 0px)); }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  @keyframes ab-clip { from, to { opacity: 1; clip-path: inset(-0.5em -1em 0 -1em); } }
  @keyframes ab-rise { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes ab-glide { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
  /* resting (not in view): hidden */
  .about-section:not(.in-view) .eyebrow, .about-section:not(.in-view) .about-inner h2,
  .about-section:not(.in-view) .sublabel, .about-section:not(.in-view) .about-lead,
  .about-section:not(.in-view) .about-body, .about-section:not(.in-view) .about-cta { opacity: 0; }
  .about-section.in-view .eyebrow, .about-section.in-view .about-inner h2 { animation: ab-clip 1.4s linear 0.2s both; }
  .about-section.in-view .eyebrow .rise, .about-section.in-view .about-inner h2 .rise { animation: ab-rise 1.4s var(--ease-out) 0.2s both; }
  .about-section.in-view .sublabel, .about-section.in-view .about-lead { animation: ab-glide 1.4s var(--ease-out) 0.9s both; }
  .about-section.in-view .about-body { animation: ab-glide 1.4s var(--ease-out) 1.5s both; }
  .about-section.in-view .about-cta { animation: ab-glide 1.4s var(--ease-out) 2.1s both; }
}

/* ---- Home Services section: entrance animation (plays once, the first time the section comes into view) + the same parallax as About ----
   titles slide up from their baselines (0.2s) > red line wipes in left to right (0.9s) > services fade in and drift up (1.4s)
   > clients fade in down the left list, then the right list (1.8s, 0.131s apart, 2.4s smooth ease-out fades) > arrow fades in and drifts up (7.2s) */
.services-section h2 { transform: translateY(var(--p-a, 0px)); }
.services-section .rule { transform: translateY(var(--p-b, 0px)); }
.services-section .clients-grid { transform: translateY(var(--p-b, 0px)); }
.services-section .services-tags { transform: translateY(var(--p-c, 0px)); }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  @keyframes sv-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  /* resting (not in view): hidden */
  .services-section:not(.in-view) h2, .services-section:not(.in-view) .rule, .services-section:not(.in-view) .services-tags,
  .services-section:not(.in-view) .clients-grid li, .services-section:not(.in-view) .about-cta { opacity: 0; }
  .services-section.in-view h2 { animation: ab-clip 1.4s linear 0.2s both; }
  .services-section.in-view h2 .rise { animation: ab-rise 1.4s var(--ease-out) 0.2s both; }
  .services-section.in-view .rule { animation: sv-wipe 1.4s var(--ease-out) 0.9s both; }
  .services-section.in-view .services-tags { animation: ab-glide 1.4s var(--ease-out) 1.4s both; }
  .services-section.in-view .clients-grid li { animation: sv-fade 2.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(1) { animation-delay: 1.800s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(2) { animation-delay: 1.931s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(3) { animation-delay: 2.062s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(4) { animation-delay: 2.194s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(5) { animation-delay: 2.325s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(6) { animation-delay: 2.456s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(7) { animation-delay: 2.588s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(8) { animation-delay: 2.719s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(9) { animation-delay: 2.850s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(10) { animation-delay: 2.981s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(11) { animation-delay: 3.112s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(12) { animation-delay: 3.244s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(13) { animation-delay: 3.375s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(14) { animation-delay: 3.506s; }
  .services-section.in-view .clients-grid ul:nth-child(1) li:nth-child(15) { animation-delay: 3.638s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(1) { animation-delay: 3.769s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(2) { animation-delay: 3.900s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(3) { animation-delay: 4.031s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(4) { animation-delay: 4.162s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(5) { animation-delay: 4.294s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(6) { animation-delay: 4.425s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(7) { animation-delay: 4.556s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(8) { animation-delay: 4.688s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(9) { animation-delay: 4.819s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(10) { animation-delay: 4.950s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(11) { animation-delay: 5.081s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(12) { animation-delay: 5.213s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(13) { animation-delay: 5.344s; }
  .services-section.in-view .clients-grid ul:nth-child(2) li:nth-child(14) { animation-delay: 5.475s; }
  .services-section.in-view .about-cta { animation: ab-glide 1.4s var(--ease-out) 1.6s both; }
}

/* Footer social circles: hover = red background, purple icon (all pages). */
body .site-footer .social { transition: background-color var(--t-hover) var(--ease-in-out), color var(--t-hover) var(--ease-in-out); }
body .site-footer .social:hover, body .site-footer .social:focus-visible { background: var(--red); color: var(--dark); opacity: 1; }
/* Email link (footer and About hero): colour comes from --mail-color (default: inherited), red on hover. */
.mail-link { color: var(--mail-color, inherit); text-decoration: none; transition: color var(--t-hover) var(--ease-in-out); }
.mail-link:hover, .mail-link:focus-visible { color: var(--red); }

/* Home About + Services titles: tighter line spacing (1.2 -> 1.1). */
.about-inner h2, .services-section h2 { line-height: 1.1; }

/* Home bar copy: 8px up to a 1338px-wide window, then it scales with the screen (8px at 1338px). */
.work-bar { font-size: 11px; }
@media (min-width: 768px) {
  .work-bar { font-size: max(8px, calc(0.5979 * 1vw)); }
}

/* Liminal home image is an SVG with a transparent background: give it the white the old JPG had, so the project below doesn't show through. */
#liminal .work-bg { background: var(--white); }

/* ---- Conrad page: load animation (header and nav stay static) ----
   Names used on this page: title = CONRAD, project = "Uniquely Patterned", tagline = "/ A Graphic Re-Visioning of Place".
   0s    the nav appears and, with the logo, drifts up 10px (0.25s before the rest start). Only the first time the header loads in a browser session
         (js flag in sessionStorage, set in <head> of every page); later pages keep the header static.
   0.25s title: drifts in from 20px.
         project: drifts in from 80px while fading 0% > 100%. tagline: drifts in from 120px while fading 0% > 100%. Shared 1.6s ease-out.
         The Description drifts in 40px when it scrolls into view.
   0.55s (0.3s after the title starts) the hero image is revealed from the top: 2s, soft ease in only (ease-in-sine).
   2.55s (when the reveal is complete) the hero image zooms out in frame, 107% to 100%. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes title-drift { from { transform: translateX(var(--drift, -40px)); opacity: var(--fade, 1); } to { transform: none; opacity: 1; } }
  @keyframes nav-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes logo-in { from { transform: translateY(10px); } to { transform: none; } }
  @keyframes reveal-top { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes zoom-out { from { transform: scale(1.07); } to { transform: scale(1); } }
  html:not(.nav-seen) .page-anim .main-nav { animation: nav-in 0.8s var(--ease-out) 0s backwards; }
  html:not(.nav-seen) .page-anim .site-header .logo { animation: logo-in 0.8s var(--ease-out) 0s backwards; }
  .page-anim .pj-title, .page-anim .pj-tagline, .page-anim .pj-sub { animation: title-drift var(--t-enter) var(--ease-out) 0.25s backwards; }
  .page-anim .pj-title { --drift: -20px; }
  .page-anim .pj-tagline { --drift: -80px; --fade: 0; }
  .page-anim .pj-sub { --drift: -120px; --fade: 0; }
  .anim-hero .pj-hero { animation: reveal-top 2s var(--ease-reveal) 0.55s backwards; }
  .anim-hero .pj-hero img { animation: zoom-out var(--t-enter) var(--ease-out) 2.55s both; }
  /* Info block: starts when the section is 50% in view (js/project.js adds .info-anim, then .info-in) */
  @keyframes reveal-baseline { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes meta-in { from { clip-path: inset(100% 0 0 0); opacity: 0; translate: 0 10px; } to { clip-path: inset(0 0 0 0); opacity: 1; translate: 0 0; } }
  @keyframes rise { from { opacity: 0; translate: 0 var(--rise, 20px); } to { opacity: 1; translate: 0 0; } }
  .info-anim:not(.info-in) :is(.pj-meta h3, .pj-meta li, .pj-copy > h2, .mc-copy > h2) { opacity: 0; }
  .info-anim:not(.info-in) :is(.pj-copy, .mc-copy) > p:not(.pj-fine, .mc-fine) { opacity: 0; }
  .info-anim:not(.info-in) :is(.pj-fine, .mc-fine) { opacity: 0; }
  .info-in .pj-meta :is(h3, li) { animation: meta-in var(--t-enter) var(--ease-out) calc(var(--i, 0) * 0.2s) backwards; }
  .info-in :is(.pj-copy, .mc-copy) > h2 { animation: reveal-baseline var(--t-enter) var(--ease-out) 0s backwards; }
  .info-in :is(.pj-copy, .mc-copy) > p:not(.pj-fine, .mc-fine) { animation: rise var(--t-enter) var(--ease-out) 0.4s backwards; --rise: 20px; }
  .info-in :is(.pj-fine, .mc-fine) { animation: rise var(--t-enter) var(--ease-out) 0.8s backwards; --rise: 40px; }
}

/* Project stage image motion (Conrad, Abbott) (js/project.js sets .fx-pre, then .fx-in when the item is in view;
   --par / --pf are scroll-linked offsets). Only items tagged data-fx / data-par are touched. */
@media (prefers-reduced-motion: no-preference) {
  main [data-par] { translate: 0 var(--par, 0px); }
  main [data-fx~="par-frame"], main [data-fx~="zoom"], main [data-fx~="hover"] { overflow: hidden; }
  main [data-fx~="par-frame"] img { scale: var(--pfs, 2); translate: 0 calc(var(--pf, 0) * var(--pft, 50%)); }
  main [data-fx~="hover"] img { transition: scale 0.8s var(--ease-in-out); }
  main [data-fx~="hover"]:hover img { scale: 1.05; }
  main .fx-pre { transition: opacity var(--t-enter) var(--ease-out) var(--d, 0s), translate var(--t-enter) var(--ease-out) var(--d, 0s), scale var(--t-enter) var(--ease-out) var(--d, 0s); }
  main .fx-pre[data-fx~="scale"].fx-in { scale: 1.1; }
  main .fx-pre[data-fx~="zoom"] img { transition: scale var(--t-enter) var(--ease-out); }
  main .fx-pre[data-fx~="fade"]:not(.fx-in) { opacity: 0; }
  main .fx-pre[data-fx~="drift"]:not(.fx-in) { translate: 0 60px; }
  main .fx-pre[data-fx~="zoom"]:not(.fx-in) img { scale: 1.07; }
}

/* BACK / NEXT row (all project pages): centered, type = SAY HELLO (Pliant Black, same size),
   home CTA arrow with no background, purple -> red on hover with a nudge. The divider is a
   Pliant Black pipe (3.8px stem at 20px) 20px tall: 5px above the cap height, 5px below the baseline. */
.pj-backrow { display: flex; justify-content: center; align-items: baseline; gap: var(--sp-40); margin-top: calc(var(--back-gap, 100) * var(--u, 1px)); }
.pj-backrow .back-btn {
  display: inline-flex; align-items: center; gap: 0.5em; width: auto; margin: 0; padding: var(--sp-10) 0;
  font-family: var(--f-display); font-weight: normal; font-size: var(--fs-btn);
  line-height: 1; letter-spacing: 0.02em; color: var(--dark); background: none; opacity: 1;
  transition: color var(--t-hover) var(--ease-in-out);
}
.pj-backrow .back-btn .bk-text { align-self: baseline; }
.pj-backrow .back-btn .top-arrow {
  flex: none; display: block; width: 1.6em; height: 1.4em; margin: 0; text-indent: 0; overflow: visible;
  background: currentColor; translate: 0 -0.185em; transition: translate var(--t-hover) var(--ease-out), scale var(--t-hover) var(--ease-out);
  -webkit-mask: url('../assets/img/cta-right-arrow.svg') center / contain no-repeat; mask: url('../assets/img/cta-right-arrow.svg') center / contain no-repeat;
}
.pj-backrow .back-btn:not(.next-btn) .top-arrow { transform: scaleX(-1); }
.pj-backrow .back-btn:hover, .pj-backrow .back-btn:focus-visible { color: var(--red); opacity: 1; }
.pj-backrow .back-btn:hover .top-arrow, .pj-backrow .back-btn:focus-visible .top-arrow { translate: 6px -0.185em; scale: 1.1; }
.pj-backrow .back-btn:not(.next-btn):hover .top-arrow, .pj-backrow .back-btn:not(.next-btn):focus-visible .top-arrow { translate: -6px -0.185em; }

/* Footer, phone (below 768px): row 1 = logo left, social icons right; row 2 = AMINORVARIANT centered; row 3 = email centered. */
.site-footer { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo actions" "brand brand" "mail mail"; align-items: end; row-gap: var(--sp-40); column-gap: var(--sp-20); }
.site-footer .logo { grid-area: logo; justify-self: start; }
.footer-actions { grid-area: actions; justify-self: end; }
.site-footer .social { width: 44px; height: 44px; }
.footer-name { grid-area: brand; justify-self: center; margin: 0 -20px 0 0; }
.footer-mailbox { grid-area: mail; justify-self: center; margin-right: -20px; }
@media (min-width: 768px) {
  .site-footer { display: flex; grid-template-columns: none; grid-template-areas: none; row-gap: clamp(24px, calc(8.35 * var(--vw1)), 160px); column-gap: clamp(24px, calc(8.35 * var(--vw1)), 160px); }
  .site-footer .logo, .footer-actions, .footer-name, .footer-mailbox { grid-area: auto; justify-self: auto; }
  .footer-name { margin: 0 0 -0.2em; }
  .footer-mailbox { margin-right: 0; }
}

/* Footer: the name line is the email and AMINORVARIANT, 60px apart; on desktop every footer element is
   vertically centered on the logo. */
.footer-name { display: flex; align-items: baseline; gap: var(--sp-60); word-spacing: 0; }
@media (min-width: 1024px) {
  .site-footer { align-items: center; }
  .site-footer > * { align-self: center; }
  .footer-name{ margin-bottom: 0; line-height: 1; }
}

/* Footer, desktop: only AMINORVARIANT moves. It is centered on the page at 1.5x its old size; the email keeps
   its old place (it still reserves the brand's old width + 60px). */
@media (min-width: 1024px) {
  .site-footer { position: relative; }
  .footer-brand {
    position: absolute; left: 50%; font-size: clamp(19.481px, calc(1.572395 * var(--vw1)), 32.0045px); line-height: 1;
    top: calc(50% + (clamp(40px, calc(4.16 * var(--vw1)), 160px) + clamp(5.7px, calc(0.83 * var(--vw1)), 16.6px) - clamp(17px, calc(2.48 * var(--vw1)), 49.8px)) / 2);
    translate: -50% -50%;
  }
}

/* Footer: social circles 10% larger with half the spacing; the email turns red on hover. */
.footer-actions { gap: clamp(7px, calc(0.73 * var(--vw1)), 14px); }
@media (min-width: 768px) {
  .site-footer .social { width: clamp(44px, calc(3.52 * var(--vw1)), 70.4px); height: clamp(44px, calc(3.52 * var(--vw1)), 70.4px); }
}

/* Footer, desktop (BROOKLYN removed): the email sits in the slot the social circles had, the circles sit
   in the slot BROOKLYN had (right-aligned), and the name block keeps its old width so nothing else moves. */
.footer-mailbox { font-family: var(--f-display); font-size: clamp(11px, calc(0.71 * var(--vw1)), 14px); letter-spacing: 0.02em; line-height: 1; color: var(--red); white-space: nowrap; }
.page-project .footer-mailbox { color: var(--ink); }
@media (min-width: 1024px) {
  .site-footer .logo { order: 0; }
  .footer-name { order: 1; width: calc(23.02em + 60px); }
  .footer-actions { order: 3; width: calc(6.015 * clamp(15px, calc(2.31 * var(--vw1)), 44px)); justify-content: flex-end; }
}

/* Footer, desktop: the email is centered between AMINORVARIANT's right edge and the social circles' left edge. */
@media (min-width: 1024px) {
  .footer-mailbox {
    position: absolute; width: auto;
    left: calc((50% + 4.696 * clamp(19.481px, calc(1.572395 * var(--vw1)), 32.0045px) + 100% - 20px - 2 * clamp(44px, calc(3.52 * var(--vw1)), 70.4px) - clamp(7px, calc(0.73 * var(--vw1)), 14px)) / 2);
    top: calc(50% + (clamp(40px, calc(4.16 * var(--vw1)), 160px) + clamp(5.7px, calc(0.83 * var(--vw1)), 16.6px) - clamp(17px, calc(2.48 * var(--vw1)), 49.8px)) / 2);
    translate: -50% -50%;
  }
}

/* NEXT PROJECT sits on the right edge of the page (same right margin as the footer). */
.pj-backrow { justify-content: flex-end; padding-right: var(--sp-20); }

/* TOP CTA on project pages and Archive: positioned against the end of main. */
main:has(> .top-cta) { position: relative; }

/* Desktop: NEXT PROJECT's left edge lines up with the footer email's left edge (same centering formula as .footer-mailbox). */
@media (min-width: 1024px) {
  .pj-backrow {
    justify-content: flex-start; padding-right: 0;
    padding-left: calc((50% + 4.696 * clamp(19.481px, calc(1.572395 * var(--vw1)), 32.0045px) + 100% - 20px - 2 * clamp(44px, calc(3.52 * var(--vw1)), 70.4px) - clamp(7px, calc(0.73 * var(--vw1)), 14px)) / 2 - 6.7835 * clamp(11px, calc(0.71 * var(--vw1)), 14px));
  }
}


/* Jumeirah: video titles sit on the film (top-left); the OOH still keeps its inset-on-dark frame (no title, not zoomed). */
.jm-band { position: relative; }
.jm-band > .jm-label { position: absolute; top: 0; left: 0; z-index: 1; }
.pj-stage .jm-ooh { display: grid; }

/* Micron: no band background colors (the page's cream shows through everywhere). */
.mc-sec { background-color: transparent; }
.mc-over { position: relative; z-index: 1; }


.mc-top { position: relative; isolation: isolate; }
.mc-mid { position: relative; isolation: isolate; }

/* Items that both drift in and have scroll parallax: the parallax offset uses top (not translate) so it does not fight the drift. */
main [data-par][data-fx] { translate: none; position: relative; top: var(--par, 0px); }

/* Microsoft: the four SCREEN ANIMATIONS strips share the storefront's size and x; images fill their box (cropped). */
@media (min-width: 1024px) {
  .ms-stage .pj-item.ms-fill { align-self: stretch; height: auto; aspect-ratio: auto; }
  .ms-stage .ms-fill > img { object-fit: cover; }
}

/* Microsoft: the SCREEN ANIMATIONS titles use the Jumeirah video-title style (Role's size and weight, Pliant Bold,
   "/  Title", Title Case) left-aligned with Role (64u), in purple. */
.ms-label.media-title { margin: 0 0 0 var(--su-64); }

/* Liminal: poster title in the Microsoft title style (Pliant Bold, Role's size, purple), description below it in the
   body-copy style (.lm-d is listed with .pj-fine above). The caption block keeps its place above each poster. */
.lm-cap .lm-t { margin: 0; }
.lm-cap .lm-d { margin: 0.3em 0 0; color: var(--ink); }

/* Liminal: the body copy block is 15% narrower than the poster. */
.lm-cap .lm-d { max-width: 85%; }

/* About hero: SAY HELLO is replaced by the email (same type size, lowercase, cream -> red on hover); the social pair
   moves to the right so Instagram's right edge sits on the WORK menu arrow; circles are red with a purple icon,
   grey on hover. */
.page-about .inner-actions { width: auto; justify-content: space-between; align-items: center; margin-right: calc(var(--vwf) * -0.00056); }
.page-about .inner-actions { width: 100%; }
@media (min-width: 768px) {
  .page-about .inner-actions { width: auto; }
}
.page-about .ab-mail { padding: var(--sp-10) var(--sp-40) var(--sp-10) 0; font-family: var(--f-display); font-size: var(--fs-btn); line-height: 1; letter-spacing: 0.02em; text-transform: none; --mail-color: var(--red); }
.page-about .inner-actions .social { background: var(--red); color: var(--dark); transition: background-color var(--t-hover) var(--ease-in-out); }
.page-about .inner-actions .social:hover, .page-about .inner-actions .social:focus-visible { background: var(--hover); color: var(--dark); opacity: 1; }

/* About hero: the portrait sits in a frame so it can be revealed from the top and zoomed like the project-page heroes
   (same timing as .pj-hero: reveal 2s at 0.55s, zoom 107% -> 100% at 2.55s). */
.ab-pframe { width: 100%; aspect-ratio: 423 / 383; overflow: hidden; }
.ab-pframe > .ab-portrait { display: block; width: 100%; height: 100%; aspect-ratio: auto; }
.page-about .ab-hero .ab-pframe { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 516 / 483; }
@media (prefers-reduced-motion: no-preference) {
  .ab-pframe { animation: reveal-top 2s var(--ease-reveal) 0.55s backwards; }
  .ab-pframe > .ab-portrait { animation: zoom-out var(--t-enter) var(--ease-out) 2.55s both; }
  /* email = reveal from the baseline, headline = drift up 20px and fade in (the project-page title / description sequence) */
  .page-about .ab-mail { animation: reveal-baseline var(--t-enter) var(--ease-out) 0.25s backwards; }
  .page-about .ab-headline { animation: rise var(--t-enter) var(--ease-out) 0.65s backwards; --rise: 20px; }
  .page-about .ab-tags { animation: rise var(--t-enter) var(--ease-out) 1.05s backwards; --rise: 40px; }  /* the services line: drift up 40px and fade in, like body copy */
  /* social links: drift up and fade in, left to right */
  .page-about .inner-actions .social:nth-child(1) { animation: rise var(--t-enter) var(--ease-out) 0.25s backwards; --rise: 60px; }
  .page-about .inner-actions .social:nth-child(2) { animation: rise var(--t-enter) var(--ease-out) 0.55s backwards; --rise: 60px; }
}

/* About: Work + Clients entrance (class names set by js/project.js). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .ab-anim:not(.ab-in) :is(h2, .ab-col--text p, .ab-clients li) { opacity: 0; }
  .ab-in .ab-col--text h2 { animation: reveal-baseline var(--t-enter) var(--ease-out) 0s backwards; }
  .ab-in .ab-col--text p { animation: rise var(--t-enter) var(--ease-out) 0.4s backwards; --rise: 20px; }
  .ab-in .ab-col:not(.ab-col--text) h2 { animation: reveal-baseline var(--t-enter) var(--ease-out) 0.8s backwards; }
  .ab-in .ab-clients li { animation: fade-in var(--t-enter) var(--ease-out) calc(1.2s + var(--i, 0) * 0.08s) backwards; }
}

/* About: Agency Roles entrance (class names set by js/project.js). */
@media (prefers-reduced-motion: no-preference) {
  .ab-roles.ab-anim:not(.ab-in) :is(h2, .ab-role) { opacity: 0; }
  .ab-roles.ab-in h2 { animation: reveal-baseline var(--t-enter) var(--ease-out) 0s backwards; }
  .ab-roles.ab-in .ab-role { animation: rise var(--t-enter) var(--ease-out) calc(0.4s + var(--i, 0) * 0.2s) backwards; --rise: 20px; }
}

/* About: Concept / Process and About Me entrance (class names set by js/project.js). */
@media (prefers-reduced-motion: no-preference) {
  .ab-s-anim:not(.ab-s-in) :is(h2, .ab-col p) { opacity: 0; }
  .ab-s-in .ab-col h2 { animation: reveal-baseline var(--t-enter) var(--ease-out) calc(var(--c, 0) * 0.3s) backwards; }
  .ab-s-in .ab-col p { animation: rise var(--t-enter) var(--ease-out) calc(0.4s + var(--c, 0) * 0.3s) backwards; --rise: 20px; }
}

/* About, desktop: the portrait starts at the same height as the hero image on the project pages (166u below the
   header; the page already has 30px of top padding), and there is 60px more space above the footer. */
@media (min-width: 1024px) {
  .page-about .ab-hero { margin-top: calc(166 * var(--u) - 30px); }
  .page-about .site-footer { margin-top: calc(100 * var(--u) + 60px); }
}

/* Tap targets (phone and tablet): invisible hit areas of at least 44px; no visual change. */
.main-nav > a, .main-nav .nav-work-btn, .back-btn, a.logo, .mail-link, .social { position: relative; }
.main-nav > a::after, .main-nav .nav-work-btn::after, .mail-link::after, .social::after { content: ""; position: absolute; inset: -15px -8px; }
.social::after { inset: -12px; }
.mail-link::after { inset: -16px -8px; }
.back-btn::after, a.logo::after { content: ""; position: absolute; inset: -4px; }
@media (min-width: 1024px) {
  .main-nav > a::after, .main-nav .nav-work-btn::after, .mail-link::after, .social::after, .back-btn::after, a.logo::after { content: none; }
}

/* Home, phone and tablet: About, Services and Archive can be taller than the screen, so they scroll in normal flow instead of being clipped inside a sticky 100svh box. */
.about-section, .services-section, .work.archive { position: relative; height: auto; min-height: 100svh; }
@media (min-width: 1024px) {
  .about-section, .services-section, .work.archive { position: sticky; height: 100vh; height: 100svh; min-height: 480px; }
}

/* Tablet (768-1023px): the project image stage is capped and centered instead of stretching the full width. */
@media (min-width: 768px) {
  .pj-stage { max-width: calc(600px + 2 * var(--sp-32)); margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  .pj-stage { max-width: none; margin-left: 0; margin-right: 0; }
}

/* Verizon hero (desktop): shift the crop right so the whole verizon wordmark and the red check sit inside the frame. */
@media (min-width: 1024px) {
  .page-project .pj-hero--v img { object-position: 77% 50%; }
}

/* Conrad quote under the letterbox image: Title style (H2) and Body copy style (P2), 60px below the image. */
.cn-quote { margin: calc(60px - var(--sp-20)) 0 0; text-align: center; }
.cn-quote h2 { margin: 0 0 12px; font-family: var(--f-sans); font-weight: normal; letter-spacing: 0; text-transform: none; color: var(--pj-ink); font-size: 24px; line-height: 1; }
.cn-quote p { margin: 0; color: var(--ink); }
@media (min-width: 768px) {
  .cn-quote h2 { font-size: 30px; }
}
@media (min-width: 1024px) {
  .cn-quote { grid-column: var(--gc) / span var(--gs); grid-row: var(--gr) / span var(--gh); min-width: 0; margin: 0; padding-top: 60px; }
  .cn-quote h2 { margin-bottom: var(--su-12); font-size: var(--fs-title); line-height: 1.1; }
}

/* Conrad city patterns: rows of three, 20px between images and rows, group is half the page width and centered (12px gaps, full width on phones). */
.cn-city { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; align-content: start; }
.cn-city img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .cn-city { gap: 20px; width: 50%; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  .cn-city { grid-column: var(--gc) / span var(--gs); grid-row: var(--gr) / span var(--gh); min-width: 0; width: auto; margin: 0; }
}

/* Conrad website home page image: half of its pixel size (728px wide at most, 50% of the page below that), centered; it has the per-image parallax (data-par). */
.cn-stage .cn-natural > img { display: block; width: min(728px, 50%); height: auto; margin: 0 auto; }

/* Conrad quote under the letterbox image: both lines reveal from the baseline once the quote is 50% in view (js/project.js adds .qa, then .qa-in). */
@media (prefers-reduced-motion: no-preference) {
  .qa:not(.qa-in) :is(h2, p) { opacity: 0; }
  .qa-in h2 { animation: reveal-baseline var(--t-enter) var(--ease-out) 0s backwards; }
  .qa-in p { animation: reveal-baseline var(--t-enter) var(--ease-out) 0.4s backwards; }
}

/* Conrad, desktop: the website home page image sits 100px to the right of center; the phone image sits beside it on the left,
   60px from it and vertically centered on it (phone width 13.6% of the page; the phone's right edge = home image's left edge + 100px - 60px). */
@media (min-width: 1024px) {
  .cn-stage .cn-natural { display: flex; align-items: center; }
  .cn-stage .cn-natural > img { position: relative; left: 100px; }
  .cn-phone { width: 13.6%; margin-left: calc((100% - min(728px, 50%)) / 2 + 40px - 13.6%); }
}

/* Conrad stationery: 70% of its old size, 60px higher (desktop; position keeps its size and the grid unchanged). */
@media (min-width: 1024px) {
  .cn-s70 { position: relative; top: -60px; }
}

/* NJOY green and brown rooms: the picture sits 100px higher in its frame (desktop; on smaller screens the frame is too short
   for the zoomed picture to cover it with this shift). */
@media (min-width: 1024px) {
  .nj-stage .nj-up100 > img { position: relative; top: -100px; }
}

/* Home About and Services sections: the arrow sits 60px higher than the old position. */
.about-section .about-cta, .services-section .about-cta { bottom: calc(100px - 6.4px + 60px); }

/* Home About and Services: the arrow (at rest), ABOUT, the small label and the Services line are mint (--mint). */
.services-section .rule { background: var(--mint); }

/* Home About and Services: grow to fit their content when it is taller than the window (js/main.js adds .grow). */
.about-section.grow, .services-section.grow { position: relative; height: auto; min-height: max(100svh, var(--need, 0px)); overflow: visible; }
/* The section after a grown one tucks under its own rounded top corners (32px), so the grown section shows there, not an older pinned section. */
.about-section.grow + section, .services-section.grow + section { margin-top: -32px; }

/* Home About: the small label turns purple while the arrow is hovered. */
.about-section:has(.about-cta:hover) .sublabel { color: var(--ink); }

/* Home Services: --clients-shift (js/main.js) moves the right column down so "Collaborators" sits on the baseline of "Creative Direction". */
.services-section .services-clients { padding-top: var(--clients-shift, 0px); }
.services-section.measuring *, .services-section.measuring *::before { transform: none !important; translate: none !important; animation: none !important; }

/* Home Services client lists: sans serif (Pliant Regular) at the project Description size (18.2 reference px of a 1290px page, page capped at 1600px). */
.services-section .clients-grid ul { font-family: 'Pliant Regular', 'Pliant Light', sans-serif; font-weight: normal; letter-spacing: 0; font-size: clamp(12px, calc(18.2 * min(100vw, 1600px) / 1290), 34px); line-height: 1.2; }

/* Home Services (desktop): the second client list sits 80px further left. */
@media (min-width: 1024px) {
  .services-section .clients-grid ul:nth-child(2) { position: relative; left: -80px; }
}

/* About hero (desktop): the email, social icons, headline and services line sit 100px higher; the portrait and everything below stay put. */
@media (min-width: 1024px) {
  .page-about .inner-actions, .page-about .ab-hero-copy { position: relative; top: -100px; }
}

/* About portrait (desktop): 50px taller, the extra height added at the top (bottom edge, width and everything else stay put). */
@media (min-width: 1024px) {
  .page-about .ab-hero .ab-pframe { box-sizing: content-box; padding-top: 50px; margin-top: -50px; }
  .page-about .ab-hero .ab-pframe > .ab-portrait { height: calc(100% + 50px); margin-top: -50px; }
}

/* About hero: the services list matches the home page's services list: mono, 12px, line height 1.8, letter spacing 0.02em. */
.page-about .ab-tags { font-family: var(--f-mono); font-size: 12px; line-height: 1.8; letter-spacing: 0.02em; }

/* About hero (desktop): the email's left edge lines up with the portrait's left edge (it moves left by the portrait width + column gap). */
@media (min-width: 1024px) {
  .page-about .ab-mail { position: relative; left: calc(-1 * (596 * var(--r) - 64 * var(--u) + 18 * var(--r))); }
}

/* About Process: each title (DISCOVER, EXPLORE, REFINE) sits half a line above its copy. */
.ab-col--text p.ab-step { margin-bottom: 0.65em; margin-bottom: 0.5lh; }

/* About: the body copy under Work, Concept, Process and About Me is set in the sans serif (Pliant Light) at the same size and line height. */
.page-about .ab-col--text p { font-family: 'Pliant Light', 'Pliant Regular', sans-serif; font-weight: normal; letter-spacing: 0; }

/* About Process: the titles (DISCOVER, EXPLORE, REFINE) are Pliant Regular; the copy under them stays Pliant Light. */
.page-about .ab-col--text p.ab-step { font-family: 'Pliant Regular', 'Pliant Light', sans-serif; }

/* About hero email: red at rest, dark grey (--hover) on hover. */
.page-about .ab-mail:hover, .page-about .ab-mail:focus-visible { color: var(--hover); }

/* About hero (desktop): the portrait and the headline / services text swap sides (portrait right, text left). The email and icons stay above the portrait. */
@media (min-width: 1024px) {
  .page-about .ab-hero { grid-template-columns: 1fr calc(596 * var(--r) - 64 * var(--u)); }
  .page-about .ab-hero .ab-pframe, .page-about .ab-hero .ab-portrait { grid-column: 2; }
  .page-about .ab-hero-copy { grid-column: 1; }
  .page-about .ab-mail { left: 0; }
  /* The email and icons row spans both columns: the email's left edge lines up with the headline's left edge, the icons stay at the right. */
  .page-about .inner-actions { grid-column: 1 / -1; }
}

/* About hero (desktop): the social icons sit 10px higher. */
@media (min-width: 1024px) {
  .page-about .inner-socials { position: relative; top: -10px; }
}

/* Archive: each picture opens a larger view with a caption (js/archive.js). */
.ar-link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.ar-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ar-lightbox { padding: 0; border: 0; background: transparent; color: var(--cream); max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100svh; margin: 0; overflow: hidden; }
.ar-lightbox::backdrop { background: rgba(28, 1, 31, 0.94); }
.ar-lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; justify-items: center; gap: var(--sp-12); padding: var(--sp-60) var(--sp-12) var(--sp-20); }
.ar-lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); min-height: 0; }
.ar-lb-img { display: block; max-width: 100%; max-height: calc(100svh - 200px); width: auto; height: auto; object-fit: contain; background: transparent; }
.ar-lb-cap { font-family: var(--f-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; text-align: center; color: var(--cream); white-space: pre-wrap; }
.ar-lb-close { position: absolute; top: var(--sp-20); right: var(--sp-20); padding: var(--sp-12) var(--sp-16); background: none; border: 0; color: var(--red); font-family: var(--f-mono); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; }
.ar-lb-nav { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--red); }
.ar-lb-nav span { display: block; width: 28px; height: 28px; background: currentColor; -webkit-mask: url('../assets/img/arrow-right.png') center / contain no-repeat; mask: url('../assets/img/arrow-right.png') center / contain no-repeat; }
.ar-lb-prev span { transform: scaleX(-1); }
.ar-lb-close:hover, .ar-lb-nav:hover { color: var(--cream); }
.ar-lb-close:focus-visible, .ar-lb-nav:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
@media (min-width: 1024px) {
  .ar-lightbox[open] { gap: var(--sp-32); padding: var(--sp-80) var(--sp-32) var(--sp-32); }
  .ar-lb-img { max-height: calc(100svh - 240px); }
  .ar-lb-cap { font-size: 13px; }
}
.cn-quote cite { font-style: normal; }

/* Liminal: the thesis companion book, 39 pages under the posters in 4 rows of 10 (the last row has 9). Phones: 2 columns, tablets: 5.
   Pages keep their own shape (the cover is portrait), centred in a cell, with the poster shadow. Desktop: spans the same width as the posters (5% to 95%). */
.lm-stage { padding-bottom: 0; }
.lm-book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); margin: 60px var(--sp-20) var(--sp-60); }
.lm-book-row { display: contents; }
.lm-book-pg { margin: 0; min-width: 0; aspect-ratio: 2800 / 2050; display: flex; align-items: center; justify-content: center; }
.lm-book-pg img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 1px 2px 4px var(--ink-a28); }
@media (min-width: 768px) {
  .lm-book { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-left: var(--sp-32); margin-right: var(--sp-32); }
}
@media (min-width: 1024px) {
  .lm-book { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin: 60px 4.9% var(--su-80) 5%; }
  .lm-book-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
}