/* mp.works design overrides.
   Loaded on every page right AFTER Webflow's CSS (mphuong.webflow.shared.*.min.css),
   so a rule here wins over Webflow's rule of equal specificity.
   Keep each change in its own commented block: what / which pages / date. */

/* Scoping cheat-sheet (see README-COWORK.md for the full list)
   Home .................. html[data-wf-page="650877ce60c07dfb13c492fc"]
   /portfolio ............ html[data-wf-page="69ca2df0932998b3df3fd99d"]
   all /s/ items ......... html[data-wf-page="650877ce60c07dfb13c492ff"]
   all /photos/ sets ..... html[data-wf-page="650877ce60c07dfb13c492fe"]
   one /ftw/ case study .. its own data-wf-page id (each /ftw/ page is a separate page)
   design option B ....... .mp-variant-b …   (preview with ?variant=b, clear with ?variant=off) */


/* =====================================================================
   FIXES: live for everyone (2026-11-13)
   ===================================================================== */

/* FIX 1: case-study navbar disappears over white content.
   Pages: /portfolio and every /ftw/ page that uses .port-navbar.
   Webflow's scroll interaction turns the logo white and the links black
   inline, so once you scroll past the hero the logo vanishes on white and the
   links collide with images. Keep everything white and let the bar
   invert against whatever is underneath (difference blend). Normal blending
   while the mobile menu is open, so the menu overlay isn't inverted. */
.port-navbar { mix-blend-mode: difference; }
.port-navbar:has(.w--open) { mix-blend-mode: normal; }
.port-navbar:not(:has(.w--open)) .port-navbar-link,
.port-navbar:not(:has(.w--open)) .port-navbar-logo,
.port-navbar:not(:has(.w--open)) .menu-button.port-page { color: #fff !important; }

/* FIX 2: case-study descriptions too faint (#7c7c7c light, below 4.5:1).
   Pages: /portfolio. */
.port-work-text-description { color: var(--dim-grey); font-weight: 400; }

/* FIX 3: oversized logo on phones (130 px wide on a 375 px screen).
   Pages: home, /photography, /info, /s/ (all pages with .sticky-nav). */
@media screen and (max-width: 767px) {
  .sticky-nav .brand,
  .sticky-nav .brand.w--current { width: 72px; height: auto; padding-top: 16px; }
  .sticky-nav .menu-button { width: 28px; height: 28px; }
}

/* FIX 5: Webflow background videos sit at z-index -100, so any section
   background painted above them hides the video. Give each video its own
   stacking context. Pages: all (home showreel, /portfolio thumbs, /ftw/). */
.w-background-video-atom { isolation: isolate; }

/* FIX 4: contact line in the home sidebar (HTML now has a space + mailto link).
   Pages: home, /info. */
.mp-contact-link { color: inherit; text-decoration: none; }
.mp-contact-link:hover { text-decoration: underline; }


/* =====================================================================
   DESIGN PASS 1: option C "Editorial grid", chosen 2026-11-13 (rounded corners kept)
   Refs: Tendril / FutureDeluxe / ManvsMachine. Same layouts, calmer type,
   the work does the talking.
   ===================================================================== */

/* B1: sidebar nav in sentence case, medium weight (Play / Photography / Info). */
.nav-link {
  text-transform: lowercase; font-weight: 400; font-size: 22px; line-height: 26px;
  padding: 6px 0; letter-spacing: -0.01em; transition: color .25s;
}
.nav-link::first-letter { text-transform: uppercase; }
.nav-link:hover { color: #000; }
.bottom-widget { color: var(--grey); font-size: 12px; line-height: 18px; }

/* B3: hover keeps the image visible. Title sits bottom-left over a soft
   shade instead of a solid colour block covering the work. */
.project-grid-cover:not(.cover-photos) {
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,0) 62%) !important;
  justify-content: flex-end; align-items: flex-start; padding: 14px 16px; box-sizing: border-box; z-index: 2;
}
.project-grid-cover:not(.cover-photos) .project-grid-name {
  text-align: left; font-size: 15px; line-height: 19px; font-weight: 700;
}
.project-grid-cover:not(.cover-photos) .client-name {
  font-style: normal; font-weight: 400; font-size: 13px; line-height: 18px; opacity: .8;
}
.project-grid-item { overflow: hidden; }
.project-grid-item .image { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.project-grid-item:hover .image { transform: scale(1.035); }

/* B4: showreel label moves to the bottom-left, smaller, with an arrow.
   The link becomes the positioning box so the shade stays inside the video. */
.c-hero-link { position: relative; }
.c-hero-text {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 28px 32px; box-sizing: border-box; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 45%);
}
.c-hero-text-block {
  margin: 0; text-align: left; font-size: 30px; line-height: 34px; font-weight: 700;
  letter-spacing: -0.01em; text-transform: lowercase;
}
.c-hero-text-block::first-letter { text-transform: uppercase; }
.c-hero-text-block::after { content: "\2009\2197"; }

/* B5: case-study intro reads as a statement: regular weight, larger, tighter. */
.heading-1.port-intro {
  font-weight: 400; font-size: clamp(34px, 3.9vw, 60px); line-height: 1.08; letter-spacing: -0.02em;
}
.port-intro .portfolio-link {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* B6: case-study cards: smaller title, quiet outlined tags. */
.port-work-title { font-size: 20px; line-height: 24px; letter-spacing: .02em; }
.link-icon { height: 18px; align-self: center; }
.port-work-text-description { font-size: 16px; line-height: 24px; max-width: 560px; }
.port-tag-wrapper { gap: 6px; margin-top: 14px; }
.port-tag-div {
  background: transparent; color: var(--95-black); border: 1px solid rgba(13,13,13,.28);
  border-radius: 999px; margin: 0; padding: 2px 10px; font-size: 12px; line-height: 18px;
}
.port-work-thumb { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.port-work-thumb-wrapper:hover .port-work-thumb { transform: scale(1.025); }

/* B8: phones: always show tile titles (there is no hover on touch). */
@media screen and (max-width: 767px) {
  .project-grid-cover:not(.cover-photos) { opacity: 1 !important; padding: 10px 12px; }
  .project-grid-cover:not(.cover-photos) .project-grid-name { font-size: 12px; line-height: 15px; }
  .project-grid-cover:not(.cover-photos) .client-name { display: none; }
  .c-hero-text-block { font-size: 20px; line-height: 24px; }
  .c-hero-text { padding: 16px 18px; }
}


/* --- Editorial grid: FutureDeluxe work grid + ManvsMachine off-white ground --- */

/* C1: off-white ground on home + portfolio, so the work reads as framed. */
html[data-wf-page="650877ce60c07dfb13c492fc"] body,
html[data-wf-page="69ca2df0932998b3df3fd99d"] body { background-color: var(--95-white); }

/* C2: case studies in a two-column grid, right column dropped by 200 px. */
@media screen and (min-width: 768px) {
  .port-work-div {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px; margin: 0 5%; padding-bottom: 200px;
  }
  .port-work-row .port-work-wrapper._9-col-left { width: 100%; margin: 0 0 112px 0; }
  .port-work-row:nth-child(even) .port-work-wrapper { transform: translateY(200px); }
  .port-work-thumb-wrapper,
  .port-work-thumb-wrapper.medium,
  .port-work-thumb-wrapper.big2 { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 3; }
  .port-work-thumb { height: 100%; }
}


/* =====================================================================
   DESIGN PASS 2: menu, intro, footer (2026-11-13)
   ===================================================================== */

/* D1: case-study / photo menu matches the home menu: Work · Play · Photo · About,
   sentence case, regular weight. Phones keep Webflow's large overlay menu. */
@media screen and (min-width: 768px) {
  .port-navbar-link { font-size: 20px; line-height: 24px; font-weight: 400; letter-spacing: -0.01em; height: auto; }
}

/* D2: one-line intro above the home grid (Tendril / FutureDeluxe style). */
.mp-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin: 50px 6px 32px; }
.mp-intro-text { margin: 0; max-width: 50ch; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.18; font-weight: 400; letter-spacing: -0.015em; color: var(--95-black); }
.mp-intro-link { color: var(--95-black); font-size: 16px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.mp-intro-link:hover { color: var(--dim-grey); }
@media screen and (max-width: 767px) {
  .mp-intro { margin: 8px 0 20px; }
  .mp-intro-text { font-size: 22px; }
}

/* D3: footer links readable and clickable everywhere (case-study footers
   + the footer custom.js adds to home, /info, /s/, /photography, /photos/). */
.port-footer .port-link, .port-footer .mp-mail { color: inherit; text-decoration: none; }
.port-footer .port-link:hover, .port-footer .mp-mail:hover { text-decoration: underline; text-underline-offset: 4px; }



/* =====================================================================
   DESIGN PASS 3: footer, Work, About, Photography (2026-11-13)
   Designs: Claude Design canvas "mp.works — footer, Photography & About options"
   (Footer A, Work A, About A, Photography E).
   ===================================================================== */

/* E0: shared pieces. Micro label with tick (Mecha-style), statement text. */
.mp-label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-grey); }
.mp-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mp-statement { margin: 0; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.2; font-weight: 400; letter-spacing: -0.015em; color: var(--95-black); }
.mp-h1 { margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: 1; font-weight: 400; letter-spacing: -0.03em; }
.mp-sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--dim-grey); max-width: 640px; }
.mp-link { color: var(--95-black); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.mp-num { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--dim-grey); width: 28px; flex: none; }
.right-panel.mp-page { padding-top: 32px; }
.mp-main { display: flex; flex-direction: column; gap: 72px; padding: 0 6px 24px; }
body.body:has(.mp-page) { background-color: var(--95-white); }

/* E1: Footer A, every page. Replaces the old .port-footer. */
.port-footer { display: none !important; }
.mp-foot { margin: 64px clamp(6px, 1.5vw, 24px) clamp(12px, 2vw, 24px); background: #0D0D0D; color: #F2F2F2; border-radius: 6px; padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px) 32px; display: flex; flex-direction: column; gap: 56px; font-family: bicyclette, sans-serif; }
.mp-foot a { color: inherit; text-decoration: none; }
.mp-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mp-foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.mp-foot-cta { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; }
.mp-foot-title { margin: 0; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; }
.mp-foot-sub { margin: 0; font-size: 18px; line-height: 1.5; color: #C9C9C9; }
.mp-foot-mail { font-size: clamp(20px, 1.8vw, 26px); text-decoration: underline !important; text-underline-offset: 6px; width: fit-content; }
.mp-foot-cols { display: flex; gap: clamp(40px, 6vw, 96px); font-size: 16px; line-height: 1.9; }
.mp-foot-col { display: flex; flex-direction: column; }
.mp-foot-label { color: #A6A6A6; font-size: 13px; margin-bottom: 6px; }
.mp-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; border-top: 1px solid rgba(242,242,242,.18); font-size: 13px; color: #A6A6A6; }
.mp-foot-bottom span:last-child { max-width: 560px; }
.photos-section > .mp-foot { margin-left: 5%; margin-right: 5%; }

/* E2: Work page = Work A. Full-screen hero; the menu floats top-left with the
   same look and position as the home/About/Photo sidebar (logo 106 px at 55/50 px,
   22 px regular links, current page bold, others dimmed). Difference blend keeps
   it readable over the video and the off-white page. Phones keep Webflow's button. */
@media screen and (min-width: 768px) {
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 40px;
    width: auto; height: auto; right: auto; padding: 50px 0 0 55px;
  }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar-logo { width: 106px; align-self: flex-start; padding: 0; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar-menu { flex-direction: column; align-items: flex-start; width: auto; margin: 0; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar-link,
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar-link.end-div {
    text-align: left; font-size: 22px; line-height: 26px; padding: 6px 0; height: auto; margin: 0;
    font-weight: 400; letter-spacing: -0.01em; opacity: .62; transition: opacity .25s;
  }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar-link:hover,
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar-link.w--current { opacity: 1; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-selected-work { padding: 0 clamp(20px, 3vw, 40px) 0 clamp(20px, 18vw, 280px); }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-work-div { margin: 0; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-intro { width: auto; max-width: 900px; margin: 96px 0 72px; display: flex; flex-direction: column; gap: 16px; }
}
html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-intro .mp-work-statement { font-size: clamp(30px, 3.8vw, 58px); line-height: 1.08; letter-spacing: -0.02em; }
@media screen and (max-width: 767px) {
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-intro { display: flex; flex-direction: column; gap: 12px; }
}
.port-work-title { text-transform: none; font-weight: 700; }

/* E3: About = About A. Page: /info */
.mp-about-hero { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-end; }
.mp-portrait { flex: 0 1 300px; width: 300px; max-width: 100%; height: auto; aspect-ratio: 7 / 8; object-fit: cover; border-radius: 6px; }
.mp-about-text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 20px; }
.mp-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.mp-btn { border: 1px solid rgba(13,13,13,.3); color: var(--95-black); padding: 12px 20px; border-radius: 999px; font-size: 16px; text-decoration: none; }
.mp-btn:hover { border-color: var(--95-black); }
.mp-btn-dark { background: #0D0D0D; color: #F2F2F2; border-color: #0D0D0D; font-weight: 700; }
.mp-btn-dark:hover { color: #FFFFFF; }
.mp-block { display: flex; flex-direction: column; gap: 16px; }
.mp-award { display: flex; flex-wrap: wrap; gap: 6px 32px; padding: 18px 0; border-top: 1px solid rgba(13,13,13,.14); }
.mp-award p { margin: 0; }
.mp-award-project { flex: 0 0 200px; font-weight: 700; font-size: 17px; }
.mp-award-name { flex: 1 1 360px; font-size: 16px; line-height: 1.5; }
.mp-award-role { flex: 0 1 260px; font-size: 14px; color: var(--dim-grey); }
.mp-two { display: flex; flex-wrap: wrap; gap: 48px; }
.mp-two > div { flex: 1 1 360px; display: flex; flex-direction: column; gap: 16px; }
.mp-list-text { margin: 0; font-size: 22px; line-height: 1.5; }

/* E4: Photography = E. 21:9 frames crop the black bars off 16:9 exports. Page: /photography */
.mp-page-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.mp-set { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 24px; }
.mp-set-head { display: flex; align-items: baseline; gap: 20px; padding-top: 14px; border-top: 1px solid rgba(13,13,13,.14); }
.mp-set-name { margin: 0; flex: 1; font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; letter-spacing: -0.02em; }
.mp-set-pics { display: flex; flex-direction: column; gap: 10px; }
.mp-pano { aspect-ratio: 21 / 9; border-radius: 6px; overflow: hidden; background: #111; }
.mp-pano img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mp-set-pics:hover .mp-pano img { transform: scale(1.02); }
/* Sidebar set index (numbered rows with hairlines, Mecha-style) */
.mp-index { display: flex; flex-direction: column; margin-top: 40px; border-bottom: 1px solid rgba(13,13,13,.14); width: 100%; max-width: 200px; }
.mp-index .mp-label { padding-bottom: 10px; }
.mp-index-row { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(13,13,13,.14); font-size: 13px; color: var(--dim-grey); text-decoration: none; }
.mp-index-row:hover { color: var(--95-black); }
@media screen and (max-width: 767px) { .mp-index { display: none; } }


/* =====================================================================
   DESIGN PASS 4: spacing scale, grid gutters, one sidebar size (2026-11-14)
   ===================================================================== */

/* F0: spacing scale. Every new gap should be one of these.
   4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128
   Page edge on phones = 20 px; Play gutter = 16 px desktop / 12 px phone;
   Work gutter = 48 px, row gap 96 px. */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --page-x-phone: 20px;
  --play-gutter: 16px;
  --work-gutter: 48px;
}

/* F1: Play grid. Same gutter across and down (was 12 across / 12 down on desktop,
   19 across / 12 down on phones). Hero and intro line up with the tile edges. */
.masonry-item { padding: 0 calc(var(--play-gutter) / 2); margin-bottom: var(--play-gutter); }
.c-hero { padding: 0 calc(var(--play-gutter) / 2); margin-top: 0; margin-bottom: var(--play-gutter); }
.mp-intro { margin: 50px calc(var(--play-gutter) / 2) var(--s7); }
html[data-wf-page="650877ce60c07dfb13c492fc"] .project-section { padding-top: 0; }
.masonry-item .project-grid-item { display: block; }
.masonry-item .project-grid-item .image { display: block; width: 100%; }
@media screen and (max-width: 767px) {
  :root { --play-gutter: 12px; }
  .masonry { margin: 0 calc(var(--page-x-phone) - var(--play-gutter) / 2) !important; }
  .masonry-item { width: 50% !important; margin-left: 0 !important; }
  .c-hero { padding: 0 var(--page-x-phone); }
  .mp-intro { margin: var(--s2) var(--page-x-phone) var(--s6); }
  .mp-intro-text { font-size: 22px; line-height: 1.25; }
  .project-section { padding-left: 0 !important; padding-right: 0 !important; }
  .masonry { width: auto !important; }
  .mp-foot { margin-left: var(--page-x-phone); margin-right: var(--page-x-phone); }
}

/* F2: Work grid. Wider gutter for the bigger tiles, 96 px between rows, and a
   stagger of about a third of a tile (the old 200 px was almost exactly half a
   tile, which read as a misaligned checkerboard rather than a deliberate offset). */
@media screen and (min-width: 768px) {
  .port-work-div { column-gap: var(--work-gutter); padding-bottom: var(--s10); }
  .port-work-row .port-work-wrapper._9-col-left { margin: 0 0 var(--s9) 0; }
  .port-work-row:nth-child(even) .port-work-wrapper { transform: translateY(clamp(64px, 9vw, 140px)); }
}
/* Caption under each case-study tile: 16 px below the image, flush left with it
   (was 20 px + a 5 px indent), 8 px title to text, 16 px text to tags. */
.port-work-text-wrapper { margin-top: var(--s4); padding-left: 0; }
.port-work-title-link { margin-bottom: var(--s2); }
.port-tag-wrapper { margin-top: var(--s4); }

/* F3: Narrative Environment thumbnail. It reused SkillsFuture's class (work-05),
   which Webflow hides below 992 px, so it was blank on tablets and phones. */
.port-work-thumb[href$="narrative-environment.html"] { display: inline-block !important; }

/* F4: one sidebar size everywhere. The Work menu now uses the Play/Photo/About
   logo (135 px) and the same vertical positions: logo top 60 px, first link 225 px. */
@media screen and (min-width: 768px) {
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar { gap: 0; padding: 0 0 0 55px; top: 0; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar-logo { width: 135px; margin: 60px 0 0; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-navbar-menu { margin: 89px 0 0; } /* first link at 225 px, as on Play */
}


/* =====================================================================
   DESIGN PASS 5: logo-bar marker, one phone menu, About from resume (2026-11-14)
   ===================================================================== */

/* G1: section marker = one bar of the logo, same 27:70 proportion, square corners
   like the logo. Replaces the dot (class name kept so the HTML needn't change). */
.mp-dot, .mp-bar {
  flex: none; display: inline-block; height: 11px; width: auto; aspect-ratio: 27 / 70;
  border-radius: 0; background: currentColor;
}

/* G2: one phone menu on every page (built in custom.js). Webflow's two menus are
   hidden below 768 px. Button: the + top-right, turning 45° into ×. */
.mp-menu-btn, .mp-menu { display: none; }
@media screen and (max-width: 767px) {
  .sticky-nav .menu-button, .port-navbar .menu-button, .w-nav-overlay { display: none !important; }
  .mp-menu-btn {
    display: block; position: fixed; top: 12px; right: 12px; z-index: 10001;
    width: 44px; height: 44px; padding: 8px; margin: 0; border: 0; background: none; cursor: pointer;
    color: #FFFFFF; mix-blend-mode: difference; -webkit-tap-highlight-color: transparent;
  }
  .mp-menu-btn svg { display: block; width: 28px; height: 28px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .mp-menu-btn path { stroke: currentColor; stroke-width: 4; fill: none; }
  /* Same logo size and spot on every page (was 72 px on Play/Photo/About, 60 px on
     Work, case studies and photo sets), so nothing jumps when the menu opens. */
  .sticky-nav { padding-left: 20px; padding-right: 20px; }
  .port-navbar { padding: 16px 20px 0; }
  .port-navbar-logo, .port-navbar-logo.w--current { width: 72px; height: auto; padding: 0; align-self: flex-start; }
  .mp-menu-open .mp-menu-btn { mix-blend-mode: normal; color: #F2F2F2; }
  .mp-menu-open .mp-menu-btn svg { transform: rotate(45deg); }
  .mp-menu-open, .mp-menu-open body { overflow: hidden; }

  .mp-menu:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 10000;
    background: #0D0D0D; color: #F2F2F2; padding: 16px var(--page-x-phone, 20px) 28px;
    font-family: bicyclette, sans-serif; overflow-y: auto; animation: mpMenuIn .3s ease both;
  }
  @keyframes mpMenuIn { from { opacity: 0; } to { opacity: 1; } }
  .mp-menu-logo { display: block; width: 72px; color: #F2F2F2; }
  .mp-menu-logo svg { display: block; width: 72px; height: auto; fill: currentColor; }
  .mp-menu-nav { display: flex; flex-direction: column; gap: var(--s2, 8px); margin-top: var(--s9, 96px); }
  .mp-menu-nav a {
    display: flex; align-items: center; gap: 14px; color: rgba(242,242,242,.5); text-decoration: none;
    font-size: 48px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 400;
  }
  .mp-menu-nav a .mp-bar { height: 34px; background: transparent; }
  .mp-menu-nav a.is-current { color: #F2F2F2; }
  .mp-menu-nav a.is-current .mp-bar { background: currentColor; }
  .mp-menu-foot { margin-top: auto; padding-top: var(--s7, 48px); display: flex; flex-direction: column; gap: 18px; }
  .mp-menu-mail { color: #F2F2F2; font-size: 20px; text-decoration: underline; text-underline-offset: 5px; width: fit-content; }
  .mp-menu-soc { display: flex; gap: 20px; font-size: 15px; }
  .mp-menu-soc a { color: #C9C9C9; text-decoration: none; }
  .mp-menu-copy { margin: 0; padding-top: 14px; border-top: 1px solid rgba(242,242,242,.18); font-size: 12px; color: #A6A6A6; }
}

/* G3: About recognition rows get a year. */
.mp-award-project { display: flex; flex-direction: column; gap: 2px; }
.mp-award-year { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--dim-grey); }


/* =====================================================================
   DESIGN PASS 6: case studies in the sidebar layout (2026-11-14)
   Canvas artboard "Case study, sidebar layout". First page: Bloomberg × Itochu.
   Markup is generated (see CHANGELOG); photos and videos share one figure style.
   ===================================================================== */
.mp-case { gap: var(--s9); max-width: 1180px; }
.mp-case-head { display: flex; flex-direction: column; gap: var(--s5); max-width: 900px; padding-top: 18px; }
.mp-case-lead { max-width: 34ch; }
.mp-facts { margin: var(--s2) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--s6); border-top: 1px solid rgba(13,13,13,.14); }
.mp-fact { padding: var(--s4) 0; border-bottom: 1px solid rgba(13,13,13,.14); display: flex; flex-direction: column; gap: 6px; }
.mp-fact dt, .mp-credit dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-grey); }
.mp-fact dd, .mp-credit dd { margin: 0; font-size: 16px; line-height: 1.45; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-chip { border: 1px solid rgba(13,13,13,.28); border-radius: 999px; padding: 2px 10px; font-size: 13px; line-height: 20px; }
.mp-case-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }

/* Figures: photo or video, same frame and caption. */
.mp-fig { margin: 0; display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.mp-fig img, .mp-fig video { display: block; width: 100%; height: auto; border-radius: 6px; background: #DADADA; object-fit: cover; }
.mp-fig video { aspect-ratio: 16 / 9; }
.mp-cap { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-grey); }
.mp-figs { display: flex; flex-direction: column; gap: var(--s7); }
.mp-fig-row { display: grid; gap: var(--s4); align-items: start; }
.mp-fig-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-fig-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Sections: heading left, text right on wide screens; figures full width below. */
.mp-case-sec { display: flex; flex-direction: column; gap: var(--s7); scroll-margin-top: var(--s5); }
.mp-case-sec-head { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: var(--s4) var(--s7); padding-top: var(--s4); border-top: 1px solid rgba(13,13,13,.14); }
.mp-case-h2 { margin: 0; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; font-weight: 400; letter-spacing: -0.015em; }
.mp-case-text { max-width: 62ch; display: flex; flex-direction: column; gap: var(--s4); font-size: 17px; line-height: 1.6; }
.mp-case-text p { margin: 0; }
.mp-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mp-list li { position: relative; padding-left: 18px; }
.mp-list li::before { content: ""; position: absolute; left: 0; top: .45em; height: .7em; aspect-ratio: 27 / 70; background: currentColor; }
.mp-credits { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.mp-credit { display: flex; flex-direction: column; gap: 4px; padding: var(--s3) 0; border-bottom: 1px solid rgba(13,13,13,.14); }

/* Previous / next */
.mp-case-pager { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s6); align-items: end; padding-top: var(--s5); border-top: 1px solid rgba(13,13,13,.14); }
.mp-case-pager a { color: var(--95-black); text-decoration: none; display: flex; flex-direction: column; gap: var(--s3); }
.mp-case-pager-title { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.mp-case-prev .mp-case-pager-title { font-size: 18px; color: var(--dim-grey); }
.mp-case-next-img { display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #DADADA; }
.mp-case-next-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mp-case-next:hover .mp-case-next-img img { transform: scale(1.02); }

/* Sidebar: back link + contents; current section follows the scroll (custom.js). */
.mp-back { font-size: 14px; color: var(--95-black); text-decoration: none; padding-bottom: var(--s4); }
.mp-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.mp-index-row.is-current { color: var(--95-black); font-weight: 700; }

@media screen and (max-width: 991px) {
  .mp-case-sec-head { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .mp-case { gap: var(--s8); }
  .mp-main.mp-case { padding: 0 var(--page-x-phone) var(--s5); }
  .mp-case-head { padding-top: 0; }
  .mp-fig-row-2, .mp-fig-row-3 { grid-template-columns: 1fr; }
  .mp-credits { grid-template-columns: 1fr; }
  .mp-case-pager { grid-template-columns: 1fr; }
  .mp-case-text { font-size: 16px; }
}
/* Case-study sidebar: contact line moves to the footer so the contents list fits;
   the list scrolls on short screens. Paired images share one 3:2 frame. */
.mp-case-page .sticky-nav .bottom-widget { display: none; }
.mp-case-index { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.mp-case-index .mp-index-row { padding: 6px 0; }
.mp-fig-row-2 .mp-fig img { aspect-ratio: 3 / 2; }
/* Case studies, batch 2: sub-headings in the text column, small fact rows for
   projects inside a collection page (Creative Tech), YouTube embeds in the figure frame. */
.mp-case-h3 { margin: var(--s3) 0 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--95-black); }
.mp-case-h3:first-child { margin-top: 0; }
.mp-mini-facts { margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.mp-mini-facts div { display: flex; flex-direction: column; gap: 2px; }
.mp-mini-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-grey); }
.mp-mini-facts dd { margin: 0; font-size: 15px; }
.mp-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #111; }
.mp-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   DESIGN PASS 7: one footer position everywhere (2026-11-14)
   Desktop: every page's content column starts at 298 px and ends 28 px from the
   right edge (Play tiles, About, Photo, case studies, Work grid); the footer card now
   uses exactly the same edges. Before: full width on Work, wider sidebar on case
   studies (265 px instead of 240 px), different margins per page.
   ===================================================================== */
@media screen and (min-width: 992px) {
  .sticky-nav { flex: 0 0 240px; width: 240px; max-width: 240px; box-sizing: border-box; }
  .right-panel > .mp-foot { margin: 96px 8px 20px 8px; }
  .mp-main { padding-left: 8px; padding-right: 8px; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-selected-work { padding-left: 298px; padding-right: 28px; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] body > .mp-foot { margin: 96px 28px 20px 298px; }
}

/* Work page thumbnail for the Projection Mapping case study (The Ascension). */
.port-work-thumb.mp-thumb-projection { background-image: url("/mp-assets/lightbloom/09_mecha_dragon.jpg"); background-size: cover; background-position: 50% 50%; display: inline-block !important; }

/* Audio player inside a case-study figure (The Ascension, sound design). */
.mp-fig audio { width: 100%; display: block; }

/* ==========================================================================
   DESIGN PASS 8 (2026-11-14): Play project pages + photo set pages
   Same sidebar layout as the case studies (built by tools/case-builder/play.py).
   The sidebar "Contact / Copyright" block is gone everywhere: the footer has both.
   ========================================================================== */
.sticky-nav .bottom-widget { display: none !important; }
.mp-play-sub { margin: calc(var(--s3) * -1) 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; color: var(--dim-grey); }
.mp-play-desc { max-width: 62ch; }
.mp-play-desc a { color: inherit; text-underline-offset: 4px; }
.mp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.mp-zoom { display: block; cursor: zoom-in; }
.mp-fig img { max-width: 100%; }
.mp-play .mp-fig img, .mp-photo-set .mp-fig img { object-fit: contain; }
.mp-photos { display: flex; flex-direction: column; gap: var(--s3); }
.mp-photo img { background: #111; }
.mp-photo-page .mp-case-index .mp-index-row.is-current { font-weight: 700; color: var(--95-black); }
@media screen and (max-width: 767px) {
  .mp-grid-2 { grid-template-columns: 1fr; gap: var(--s3); }
}
.mp-photos-pano .mp-fig img { aspect-ratio: 21 / 9; object-fit: cover; }
.mp-photos:not(.mp-photos-pano) .mp-fig img { width: auto; max-width: 100%; max-height: 88vh; margin: 0 auto; background: none; }
/* DEX: keyframes and storyboards carry on-image text, so show every image whole (no 3:2 / 4:3 crop) */
.mp-case--dex-visual-development .mp-fig img { aspect-ratio: auto !important; object-fit: contain; }
/* Case-study facts: Disciplines (the row with chips) always takes its own full-width line */
.mp-fact:has(.mp-chips) { grid-column: 1 / -1; }

/* ==========================================================================
   DESIGN PASS 9 (2026-11-14): motion system, the owner's mix from the
   "logo motion and interaction system" canvas:
     first load: Type (logo typed in, bar by bar)   loading: Build (bars rise)
     menu + highlight: Playhead (one short bar moves) page transition + buttons: Shutter
     project tiles + contact/footer: Build           section labels + headings: no motion
   Markup for the logo, menu marker, shutter and tile bars is added by custom.js.
   Everything is off for visitors who ask their system for reduced motion.
   ========================================================================== */
:root {
  --mp-build: cubic-bezier(.2, .7, .2, 1);      /* Build: rise */
  --mp-shutter: cubic-bezier(.77, 0, .18, 1);   /* Shutter: wipe */
  --mp-spring: cubic-bezier(.3, 1.4, .4, 1);    /* Playhead: glide */
}

/* First load: Type. custom.js swaps the logo image for an inline SVG of the four bars. */
svg.mp-logo-svg { display: block; height: auto; color: #0D0D0D; }
svg.mp-logo-svg rect { fill: currentColor; }
.mp-logo-type .mp-lb { opacity: 0; animation: mpOn .01s steps(1, end) forwards; }
.mp-logo-type .mp-lb.is-short { animation: mpOn .01s steps(1, end) forwards, mpBlink .5s steps(1, end) 2; }
@keyframes mpOn { to { opacity: 1; } }
@keyframes mpBlink { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* Menu: Playhead. One marker bar glides to the link under the pointer and rests on the current page. */
.mp-nav-host { position: relative; }
.mp-ind {
  position: absolute; left: -16px; top: 0; width: 4.3px; height: 11px; background: var(--dim-grey);
  pointer-events: none; opacity: 0; transition: transform .45s var(--mp-spring), opacity .2s;
}
.mp-ind.is-ready { opacity: 1; }
@media screen and (max-width: 767px) { .mp-ind { display: none; } }

/* Highlight: Playhead. A cursor drags across the phrase and leaves it selected (on scroll into view). */
.mp-hl { position: relative; background: linear-gradient(#D4D4D4, #D4D4D4) no-repeat 0 0 / 0% 100%; }
.mp-hl::after { content: ""; position: absolute; top: .1em; bottom: .1em; left: 0; width: 2px; background: #0D0D0D; opacity: 0; }
.mp-hl.is-on { animation: mpSel 1.1s var(--mp-build) forwards; }
.mp-hl.is-on::after { animation: mpCaret 1.1s var(--mp-build) forwards, mpCaretOut .3s 1.6s forwards; }
@keyframes mpSel { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes mpCaret { from { left: 0; opacity: 1; } to { left: 100%; opacity: 1; } }
@keyframes mpCaretOut { from { opacity: 1; left: 100%; } to { opacity: 0; left: 100%; } }

/* Contact / footer: Build. The underline is a short bar that grows to full height. */
.mp-foot-mail, .mp-menu-mail { position: relative; text-decoration: none !important; padding-bottom: 8px; }
.mp-foot-mail::after, .mp-menu-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: currentColor; transform: scaleY(.3); transform-origin: 50% 100%; transition: transform .5s var(--mp-build); }
.mp-foot-mail:hover, .mp-menu-mail:hover { text-decoration: none !important; }
.mp-foot-mail:hover::after, .mp-menu-mail:hover::after, .mp-foot-mail:focus-visible::after { transform: scaleY(1); }

/* Buttons: Shutter. A black block wipes in from the left behind the label and leaves to the right. */
.mp-link, .mp-back { position: relative; isolation: isolate; padding: 2px 6px; margin: -2px -6px; transition: color .45s var(--mp-shutter); }
.mp-link::before, .mp-back::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0D0D0D; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--mp-shutter); }
.mp-link:hover, .mp-back:hover, .mp-link:focus-visible, .mp-back:focus-visible { color: #F2F2F2 !important; text-decoration: none !important; }
.mp-link:hover::before, .mp-back:hover::before, .mp-link:focus-visible::before, .mp-back:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }

@media (prefers-reduced-motion: reduce) {
  .mp-logo-type .mp-lb { opacity: 1; animation: none; }
  .mp-ind, .mp-link, .mp-link::before, .mp-back, .mp-back::before, .mp-foot-mail::after, .mp-menu-mail::after { transition: none; }
  .mp-hl, .mp-hl.is-on { background-size: 100% 100%; animation: none; }
  .mp-hl::after { display: none; }
}

/* ==========================================================================
   DESIGN PASS 10 (2026-11-14): one type scale for every page
   Steps (desktop → phone):  72→40 title · 48→32 big statement · 36→26 statement
   · 30→24 heading · 22→20 lead · 17→16 body · 15 small · 13 caption · 12 label.
   Two weights: 400 for everything, 700 only for small labels and project titles
   on/under images. Tracking: −0.02em at 30 px and up, −0.01em at 20–24, 0 for body,
   +0.08em on uppercase labels.
   The Webflow stylesheet makes every link bold (a{font-weight:700}); links now take
   the weight of their text, which also makes the "current" row in sidebars readable.
   ========================================================================== */
:root {
  --t-title: clamp(40px, 5vw, 72px);
  --t-xl: clamp(32px, 3.34vw, 48px);
  --t-statement: clamp(26px, 2.5vw, 36px);
  --t-h2: clamp(24px, 2.08vw, 30px);
  --t-lead: clamp(20px, 1.53vw, 22px);
  --t-body: 17px;
  --t-small: 15px;
  --t-caption: 13px;
  --t-label: 12px;
}
@media screen and (max-width: 767px) { :root { --t-body: 16px; } }

a { font-weight: inherit; }

/* titles */
.mp-h1 { font-size: var(--t-title); line-height: 1; font-weight: 400; letter-spacing: -0.03em; }
.port-hero-title .heading-1 { font-size: var(--t-title) !important; line-height: 1 !important; font-weight: 400 !important; letter-spacing: -0.03em; text-transform: none; }
/* big statement */
.mp-foot-title { font-size: var(--t-xl); line-height: 1.08; font-weight: 400; letter-spacing: -0.02em; }
/* statements: page intros and case-study leads */
.mp-statement, .mp-work-statement, .mp-intro-text, .mp-case-lead { font-size: var(--t-statement) !important; line-height: 1.2 !important; font-weight: 400; letter-spacing: -0.02em !important; }
/* headings */
.mp-case-h2, .mp-set-name { font-size: var(--t-h2); line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; }
.mp-case-next .mp-case-pager-title { font-size: var(--t-h2); line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; }
.mp-case-prev .mp-case-pager-title { font-size: var(--t-body); line-height: 1.4; font-weight: 400; letter-spacing: 0; }
/* on-image labels (showreel links): heading size, bold, sentence case */
.c-hero-text-block { font-size: var(--t-h2) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
.port-hero-title.showreel-link > div { font-size: var(--t-h2) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.01em; }
/* lead */
.mp-play-sub, .mp-list-text, .mp-sub, .mp-foot-mail { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.01em; }
.mp-foot-mail { font-weight: 400; line-height: 1.3; }
/* project titles under / on images */
.port-work-title { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.project-grid-cover:not(.cover-photos) .project-grid-name { font-weight: 700; }
/* body */
.mp-case-text, .mp-case-text p, .mp-case-text li, .mp-foot-sub, .mp-play-desc { font-size: var(--t-body); line-height: 1.6; }
/* small */
.mp-fact dd, .mp-credit dd, .mp-mini-facts dd, .mp-award-name, .port-work-text-description, .mp-link, .mp-foot-cols, .mp-foot-col a { font-size: var(--t-small); line-height: 1.5; font-weight: 400; }
.port-work-text-description { color: #5E5E5E; }
/* caption */
.mp-chip, .mp-award-role, .mp-foot-label, .mp-foot-bottom, .mp-back, .mp-index-row, .mp-cap, .project-grid-cover:not(.cover-photos) .client-name, .port-tag-div { font-size: var(--t-caption); line-height: 1.45; }
.mp-back { font-weight: 400; }
/* labels: 12 px, bold, uppercase, tracked */
.mp-label, .mp-fact dt, .mp-credit dt, .mp-mini-facts dt, .mp-case-h3 { font-size: var(--t-label); line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mp-case-h3 { margin-top: var(--s4); }
.project-grid-cover:not(.cover-photos) .project-grid-name.client-name { font-weight: 400; }
.mp-intro-link, .mp-btn { font-size: var(--t-small); }
/* captions read as sentences: regular weight, sentence case, grey (they were bold capitals) */
.mp-cap span { font-size: var(--t-caption); line-height: 1.45; font-weight: 400; letter-spacing: 0; text-transform: none; color: #5E5E5E; }

/* ==========================================================================
   DESIGN PASS 9b (2026-11-14): motion adjustments after review
   - Project tiles: no rising bars, just a soft black shade fading in.
   - No page transition (removed from custom.js and above).
   - Work page: project name gets the Build underline on hover (card or title).
   - Footer links follow the Build rule too.
   - Menu marker: same grey as the section-label bar. On Work and case studies the
     menu blends with "difference", so its marker is drawn #A2A2A2 to come out #505050.
   ========================================================================== */
/* the shade is positioned against the thumbnail itself (fix 2026-11-14: without this, cards
   whose thumbnail has no position of its own, e.g. Creative Tech, Senka, Motion UI/UX,
   darkened the whole card including name, description and tags) */
.port-work-thumb, .project-grid-item { position: relative; overflow: hidden; }
.port-work-thumb::after, .project-grid-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #0D0D0D; opacity: 0; transition: opacity .5s var(--mp-build);
}
.port-work-wrapper:hover .port-work-thumb::after, .port-work-thumb:focus-visible::after,
.project-grid-item:hover::after, .project-grid-item:focus-visible::after { opacity: .3; }
.port-navbar .mp-ind { background: #A2A2A2; }

.port-work-title { position: relative; display: inline-block; }
.port-work-title::after, .mp-foot-col a::after {
  content: ""; position: absolute; left: 0; right: 0; background: currentColor;
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--mp-build);
}
.port-work-title::after { bottom: -6px; height: 4px; }
.port-work-wrapper:hover .port-work-title::after, .port-work-title-link:focus-visible .port-work-title::after { transform: scaleY(1); }
.mp-foot-col a { position: relative; width: fit-content; }
.mp-foot-col a::after { bottom: 2px; height: 3px; }
.mp-foot-col a:hover, .mp-foot-col a:focus-visible { text-decoration: none !important; }
.mp-foot-col a:hover::after, .mp-foot-col a:focus-visible::after { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .port-work-thumb::after, .project-grid-item::after, .port-work-title::after, .mp-foot-col a::after { transition: none; }
}

/* ==========================================================================
   DESIGN PASS 9c (2026-11-14): text links in the Type style
   Project names on Work, the footer email and the footer links re-type themselves
   on hover, one letter per step (35 ms), then a block cursor blinks after them.
   The footer email shows the cursor all the time. Replaces the Build underline
   on these (the phone-menu email keeps it). --n is set per link by custom.js.
   ========================================================================== */
.port-work-title br { display: none; }
.port-work-title::after, .mp-foot-col a::after, .mp-foot-mail::after {
  content: ""; position: static; display: inline-block; inset: auto; transform: none; transition: none;
  width: .5em; height: .85em; margin-left: .12em; vertical-align: -.06em;
  background: currentColor; opacity: 0;
}
.mp-foot-mail { padding-bottom: 0; }
.mp-foot-mail::after { opacity: 1; animation: mpCur 1s steps(1, end) infinite; }
.port-work-wrapper:hover .port-work-title, .port-work-title-link:focus-visible .port-work-title,
.mp-foot-col a:hover, .mp-foot-col a:focus-visible, .mp-foot-mail:hover, .mp-foot-mail:focus-visible {
  animation: mpRetype calc(var(--n, 8) * 35ms + 60ms) steps(var(--n, 8), end);
}
.port-work-wrapper:hover .port-work-title::after, .port-work-title-link:focus-visible .port-work-title::after,
.mp-foot-col a:hover::after, .mp-foot-col a:focus-visible::after, .mp-foot-mail:hover::after, .mp-foot-mail:focus-visible::after {
  transform: none; animation: mpCur 1s steps(1, end) calc(var(--n, 8) * 35ms + 60ms) infinite;
}
@keyframes mpRetype { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mpCur { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .port-work-wrapper:hover .port-work-title, .mp-foot-col a:hover, .mp-foot-mail:hover { animation: none; }
  .port-work-title::after, .mp-foot-col a::after, .mp-foot-mail::after { animation: none !important; }
  .port-work-wrapper:hover .port-work-title::after, .mp-foot-col a:hover::after, .mp-foot-mail:hover::after, .mp-foot-mail::after { opacity: 1; }
}

/* ==========================================================================
   DESIGN PASS 9d (2026-11-14): arrows removed, About buttons follow the motion rules
   - No arrow after "Watch the showreel" (Play), "Showreel" (Work hero) or the
     project names on Work.
   - Buttons = Shutter: the About buttons (.mp-btn) and the Play intro link get the
     block wipe. Outline button: black block, light text. Dark button: light block,
     black text.
   ========================================================================== */
.c-hero-text-block::after { content: none !important; }
.port-hero-title .port-hero-icon, .port-work-title-link .link-icon { display: none !important; }

.mp-btn, .mp-intro-link { position: relative; isolation: isolate; overflow: hidden; transition: color .45s var(--mp-shutter), border-color .45s var(--mp-shutter); }
.mp-intro-link { padding: 2px 6px; margin: -2px -6px; }
.mp-btn::before, .mp-intro-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #0D0D0D;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--mp-shutter);
}
.mp-btn-dark::before { background: #F2F2F2; }
.mp-btn:hover, .mp-btn:focus-visible, .mp-intro-link:hover, .mp-intro-link:focus-visible { color: #F2F2F2; border-color: #0D0D0D; text-decoration: none; }
.mp-btn-dark:hover, .mp-btn-dark:focus-visible { color: #0D0D0D; }
.mp-btn:hover::before, .mp-btn:focus-visible::before, .mp-intro-link:hover::before, .mp-intro-link:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) {
  .mp-btn, .mp-btn::before, .mp-intro-link, .mp-intro-link::before { transition: none; }
}

/* ==========================================================================
   DESIGN PASS 9e (2026-11-14): footer link typing fixed + email click-to-copy
   The typing now runs on an inner span (.mp-tw, added by custom.js). Clipping the
   link itself took it out from under the pointer, so the hover kept ending and
   restarting (flashing, no cursor). Footer email: click copies it, "Copied!" shows.
   ========================================================================== */
.mp-foot-col a:hover, .mp-foot-col a:focus-visible, .mp-foot-mail:hover, .mp-foot-mail:focus-visible { animation: none; }
.mp-tw { display: inline-block; }
.mp-foot-col a:hover .mp-tw, .mp-foot-col a:focus-visible .mp-tw, .mp-foot-mail:hover .mp-tw, .mp-foot-mail:focus-visible .mp-tw {
  animation: mpRetype calc(var(--n, 8) * 35ms + 60ms) steps(var(--n, 8), end);
}
a[href^="mailto:"] { cursor: copy; }
/* "Copied!" label, placed under the clicked email by custom.js (fixed position). */
.mp-copied {
  position: fixed; z-index: 100001; left: 0; top: 0; padding: 3px 8px; border-radius: 4px;
  background: #F2F2F2; color: #0D0D0D; border: 1px solid #0D0D0D; font-size: var(--t-caption); line-height: 1.4;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .35s var(--mp-build); pointer-events: none;
}
.mp-copied.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mp-foot-col a:hover .mp-tw, .mp-foot-mail:hover .mp-tw { animation: none; }
  .mp-copied { transition: none; }
}

/* ==========================================================================
   DESIGN PASS 9f (2026-11-14): showreel follows the motion rules; copy on every email
   Play hero and Work hero: the label re-types with a blinking cursor (like other
   text links); the video is not dimmed. Label in sentence case.
   Click-to-copy now covers every email link (custom.js, "Copied!" label above).
   ========================================================================== */
.c-hero-text-block { text-transform: none !important; }
.c-hero-text-block::first-letter { text-transform: none; }
/* (video dimming on hover removed at the owner's request: the label only re-types) */
.mp-cur { display: inline-block; width: .5em; height: .8em; margin-left: .12em; vertical-align: -.04em; background: currentColor; opacity: 0; }
.c-hero-link:hover .mp-tw, .c-hero-link:focus-visible .mp-tw, .showreel-link:hover .mp-tw, .showreel-link:focus-visible .mp-tw {
  animation: mpRetype calc(var(--n, 8) * 35ms + 60ms) steps(var(--n, 8), end);
}
.c-hero-link:hover .mp-cur, .c-hero-link:focus-visible .mp-cur, .showreel-link:hover .mp-cur, .showreel-link:focus-visible .mp-cur {
  animation: mpCur 1s steps(1, end) calc(var(--n, 8) * 35ms + 60ms) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .c-hero-link:hover .mp-tw, .showreel-link:hover .mp-tw, .c-hero-link:hover .mp-cur, .showreel-link:hover .mp-cur { animation: none; }
}

/* ==========================================================================
   DESIGN PASS 11 (2026-11-14): Work hero
   - Hero video 80 % of the screen height (was 100 vh, min 800 px).
   - "Stories in motion" and "Showreel" start at the same left edge as the
     section below (298 px desktop, the clamp() edge on tablet, 20 px on phones),
     stacked with a fixed gap so they never overlap.
   ========================================================================== */
html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-hero { position: relative; }
html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-hero-title .heading-1 { margin: 0; }
@media screen and (min-width: 768px) {
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-hero { height: 80vh; min-height: 520px; }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-hero-title {
    left: clamp(20px, 18vw, 280px); right: clamp(20px, 3vw, 40px); width: auto; top: auto; bottom: 120px;
  }
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-hero-title.showreel-link { bottom: 56px; height: auto; }
}
@media screen and (min-width: 992px) {
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-hero-title { left: 298px; right: 28px; }
}
@media screen and (max-width: 767px) {
  html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-hero-title { left: var(--page-x-phone); right: var(--page-x-phone); width: auto; }
}

/* ==========================================================================
   DESIGN PASS 12 (2026-11-14): text links use a Playhead-style underline
   Replaces the Type re-typing on Work project names, the footer email and links,
   and the showreel labels: on hover an underline runs from left to right and
   stays while the pointer is there (no end bar, no cursor). Leaving reverses it.
   ========================================================================== */
.port-work-wrapper:hover .port-work-title, .port-work-title-link:focus-visible .port-work-title,
.mp-tw, .mp-foot-col a:hover .mp-tw, .mp-foot-mail:hover .mp-tw,
.c-hero-link:hover .mp-tw, .showreel-link:hover .mp-tw { animation: none !important; clip-path: none !important; }
.port-work-title::after, .mp-foot-col a::after, .mp-foot-mail::after { display: none !important; }
.mp-cur { display: none !important; }

.port-work-title, .mp-tw {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 2px;
  padding-bottom: 3px; transition: background-size .5s cubic-bezier(.3, 0, .2, 1);
}
.c-hero-text-block .mp-tw, .showreel-link .mp-tw, .mp-foot-mail .mp-tw { background-size: 0% 3px; }
.port-work-wrapper:hover .port-work-title, .port-work-title-link:focus-visible .port-work-title,
.mp-foot-col a:hover .mp-tw, .mp-foot-col a:focus-visible .mp-tw { background-size: 100% 2px; }
.mp-foot-mail:hover .mp-tw, .mp-foot-mail:focus-visible .mp-tw,
.c-hero-link:hover .mp-tw, .c-hero-link:focus-visible .mp-tw,
.showreel-link:hover .mp-tw, .showreel-link:focus-visible .mp-tw { background-size: 100% 3px; }
@media (prefers-reduced-motion: reduce) { .port-work-title, .mp-tw { transition: none; } }

/* ==========================================================================
   DESIGN PASS 13 (2026-11-14): text links get the menu's bar marker
   Replaces the running underline (pass 12) on Work project names, footer links and
   email, and the showreel labels. A 27:70 bar left of the text (outside it, so the
   text never moves). Hover: drops in from slightly above, growing from nothing to
   full size. Leave: moves down, slightly overshoots, shrinks away. (custom.js 4c)
   ========================================================================== */
.port-work-title, .mp-tw { background: none !important; padding-bottom: 0; }
.mp-mk-host { position: relative; }
.mp-mk {
  position: absolute; left: -.75em; top: calc(50% - .36em); width: .28em; height: .72em;
  background: currentColor; opacity: 0; transform: scaleY(0); pointer-events: none;
}
.port-work-title .mp-mk { background: var(--dim-grey); }
.mp-mk.is-in { opacity: 1; transform-origin: 50% 0; animation: mpMkIn .38s cubic-bezier(.2, .7, .2, 1) forwards; }
.mp-mk.is-out { opacity: 1; transform-origin: 50% 100%; animation: mpMkOut .42s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes mpMkIn { 0% { transform: translateY(-55%) scaleY(0); } 100% { transform: translateY(0) scaleY(1); } }
@keyframes mpMkOut {
  0% { transform: translateY(0) scaleY(1); }
  55% { transform: translateY(40%) scaleY(1); }
  70% { transform: translateY(32%) scaleY(.85); }
  100% { transform: translateY(30%) scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-mk.is-in { animation: none; transform: none; }
  .mp-mk.is-out { animation: none; opacity: 0; }
}

/* ==========================================================================
   DESIGN PASS 14 (2026-11-14): photo sets full width, uncropped
   - Photo set pages use the same width as the Photography page (the case-study
     1180 px cap no longer applies to them).
   - Every photo shows whole at its own aspect ratio: no 21:9 crop (Japan 24,
     France 26) and no height cap on portrait photos.
   ========================================================================== */
.mp-main.mp-photo-set { max-width: none; }
.mp-photo-set .mp-photos .mp-fig img,
.mp-photo-set .mp-photos-pano .mp-fig img,
.mp-photo-set .mp-photos:not(.mp-photos-pano) .mp-fig img {
  width: 100% !important; height: auto !important; max-width: 100%; max-height: none !important;
  aspect-ratio: auto !important; object-fit: fill !important; margin: 0;
}

/* ==========================================================================
   DESIGN PASS 15 (2026-11-14): no scroll bars in the sidebar lists
   The case-study / Play / photo-set sidebar list scrolls when it is taller than the
   screen, but showed grey scroll bars. The "← All …" link's wipe box sticks out
   6 px each side, which also caused the horizontal bar. The list keeps scrolling
   (wheel / touch), with the bars hidden and room left for the wipe.
   ========================================================================== */
.mp-case-index { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 6px; margin-left: -6px; margin-right: -6px; }
.mp-case-index::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ==========================================================================
   DESIGN PASS 16 (2026-11-14): text-link bars match the menu exactly
   - Every bar is exactly the logo's 27:70 ratio (aspect-ratio), like the menu marker;
     its height follows the text size (11 px on footer links, as in the menu).
   - Footer link columns share one bar each that glides between links like the side
     menu (custom.js), so fast mouse moves never show two bars.
   ========================================================================== */
.mp-mk { width: auto !important; aspect-ratio: 27 / 70; }
.mp-colmk { position: absolute; left: -.75em; top: 0; height: 11px; width: auto; aspect-ratio: 27 / 70; pointer-events: none; }
.mp-colmk.is-glide { transition: transform .45s var(--mp-spring); }
.mp-colmk .mp-mk { position: absolute; left: 0; top: 0; height: 100%; width: 100% !important; }

/* ==========================================================================
   DESIGN PASS 17 (2026-11-14): phone check fixes
   - About and Photography sat 6 px from the screen edge on phones; now 20 px like
     every other page.
   - About portrait fills the width on phones (was a fixed 300 px).
   - Work hero: a soft shade at the bottom so "Stories in motion" and "Showreel"
     stay readable over bright frames of the video (all sizes).
   - Play hero / grid can't spill 1 px past the screen edge.
   ========================================================================== */
@media screen and (max-width: 767px) {
  .mp-main:not(.mp-case) { padding-left: var(--page-x-phone); padding-right: var(--page-x-phone); }
  .mp-portrait { flex: 1 1 100%; width: 100%; }
  .c-hero, .project-section { max-width: 100%; box-sizing: border-box; }
}
html[data-wf-page="69ca2df0932998b3df3fd99d"] .port-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 5; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
}