/* M72 Studio — site styles
   Tokens first; everything else uses them. */

@font-face { font-family: "Bricolage"; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bricolage"; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --bg: #ECEDEE;            /* cool gallery white */
  --bg-raised: #F7F7F6;
  --ink: #16171A;
  --ink-2: #5F636A;         /* metadata */
  --ink-3: #9A9EA5;         /* hairlines, disabled */
  --line: #D6D8DC;
  --red: #D5281F;           /* the M72 badge red */
  --black: #000;
  --white: #FFFFFF;

  --font: "Bricolage", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Bricolage", system-ui, sans-serif;

  /* type scale: 1.25 ratio from 16 */
  --t-0: 0.8125rem;   /* 13 meta */
  --t-1: 1rem;        /* 16 body */
  --t-2: 1.25rem;     /* 20 lede */
  --t-3: 1.5625rem;   /* 25 h3 */
  --t-4: 1.953rem;    /* 31 h2 */
  --t-5: 2.441rem;    /* 39 */
  --t-6: clamp(2.4rem, 5.2vw, 4.6rem);  /* display */

  --gutter: clamp(20px, 3.2vw, 48px);
  --max: 1480px;
  --col-gap: clamp(16px, 2vw, 28px);
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6.5rem; --s-7: 9rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--t-1); line-height: 1.5;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
:lang(zh) body, body:lang(zh) { font-family: var(--font-zh); }
.zh { font-family: var(--font-zh); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.meta { font-size: var(--t-0); color: var(--ink-2); line-height: 1.45; }
.lede { font-size: var(--t-2); line-height: 1.4; max-width: 34em; }
.measure { max-width: 38em; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  color: var(--white);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.nav.is-solid, .nav.is-light { color: var(--ink); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.2) blur(10px); }
.nav__links { display: flex; gap: clamp(14px, 2vw, 30px); align-items: center; font-size: var(--t-1); }
.nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.nav__lang { font-size: var(--t-0); opacity: .8; padding-left: 10px; margin-left: 4px; border-left: 1px solid currentColor; }
.nav__toggle { display: none; }
@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; font-size: var(--t-1); }
  .nav.is-open .nav__links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px var(--gutter) 32px; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav.is-open { color: var(--ink); background: var(--bg); }
}

/* the badge: red film-strip tab, as on the deck */
.mark { display: inline-flex; align-items: center; gap: 10px; }
.mark svg { height: 26px; width: auto; display: block; }
.mark span { font-weight: 500; letter-spacing: -0.01em; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--black); color: var(--white); min-height: 80svh; display: grid; align-items: end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 60%); }
.hero__body { position: relative; padding: 0 var(--gutter) clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: end; width: min(100%, var(--max) + 2 * var(--gutter)); margin-inline: auto; }
.hero h1 { font-size: var(--t-6); font-weight: 500; letter-spacing: -0.025em; line-height: 1; max-width: 10.5em; }
.hero__sub { margin-top: var(--s-3); font-size: var(--t-2); max-width: 30em; line-height: 1.35; color: rgba(255,255,255,.85); }
.hero__caption { font-size: var(--t-0); color: rgba(255,255,255,.75); text-align: right; line-height: 1.45; }
.hero__caption b { color: var(--white); font-weight: 500; }
.hero__sound { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--white); border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 6px 12px; font-size: var(--t-0); }
.hero__sound:hover { border-color: var(--white); color: var(--white); }
@media (max-width: 760px) {
  .hero { min-height: 0; display: block; }
  .hero__media { position: relative; aspect-ratio: 16/10; }
  .hero__scrim { display: none; }
  .hero__body { grid-template-columns: 1fr; padding-top: 24px; }
  .hero__caption { text-align: left; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--s-6); }
.section--tight { padding-block: var(--s-5); }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline; margin-bottom: var(--s-4); }
.section__head h2 { font-size: var(--t-4); }
.section__head a { font-size: var(--t-1); color: var(--ink-2); }
.section__head a:hover { color: var(--red); }

.intro { padding-block: var(--s-6) var(--s-5); }
.intro p { font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.22; letter-spacing: -0.015em; max-width: 26em; font-weight: 400; }
.intro p + p { margin-top: var(--s-3); font-size: var(--t-2); color: var(--ink-2); max-width: 36em; letter-spacing: 0; line-height: 1.4; }

/* ---------- Work grid ---------- */
.work-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4) var(--col-gap); }
.work-grid > * { grid-column: span 3; }
.work-grid > .is-wide { grid-column: span 6; }
.work-grid > .is-third { grid-column: span 2; }
@media (max-width: 900px) { .work-grid > .is-third { grid-column: span 3; } }
@media (max-width: 640px) { .work-grid > *, .work-grid > .is-third { grid-column: span 6; } }

.tile { display: block; color: inherit; }
.tile:hover { color: inherit; }
.tile__media { position: relative; background: var(--black); aspect-ratio: 16/9; overflow: hidden; }
.tile__media.r-185 { aspect-ratio: 1.85; }
.tile__media.r-235 { aspect-ratio: 2.35; }
.is-wide .tile__media { aspect-ratio: 2.2; }
.tile__media img, .tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__media video { opacity: 0; transition: opacity .3s ease; }
.tile__media.is-playing video { opacity: 1; }
.tile__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; padding-top: 12px; align-items: start; }
.tile__title { font-size: var(--t-2); line-height: 1.2; letter-spacing: -0.01em; }
.is-wide .tile__title { font-size: var(--t-3); }
.tile__title .zh { display: block; color: var(--ink-2); font-size: .72em; margin-top: 3px; font-weight: 400; letter-spacing: 0; }
.tile__client { grid-column: 1; color: var(--ink-2); font-size: var(--t-0); }
.tile__tags { grid-column: 2; grid-row: 1; text-align: right; font-size: var(--t-0); color: var(--ink-2); line-height: 1.45; max-width: 11em; padding-top: 4px; }
.tile:hover .tile__title { color: var(--red); }

/* filters (work index) */
.filters { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: var(--s-4); font-size: var(--t-1); }
.filters button { color: var(--ink-2); padding: 4px 0; border-bottom: 1px solid transparent; }
.filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.filters button:hover { color: var(--red); }
.filters__group + .filters__group { margin-left: auto; }
@media (max-width: 640px) { .filters__group + .filters__group { margin-left: 0; } }

/* ---------- Credits block (end-credits layout for facts) ---------- */
.credits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-5); align-items: start; }
.credits h2 { font-size: var(--t-4); max-width: 12em; }
.credits p.measure { margin-top: var(--s-3); color: var(--ink-2); }
.roll { border-top: 1px solid var(--line); }
.roll li { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.roll .k { text-align: right; color: var(--ink-2); font-size: var(--t-1); }
.roll .v { font-size: var(--t-3); letter-spacing: -0.015em; line-height: 1.1; }
.roll .v small { display: block; font-size: var(--t-0); color: var(--ink-2); letter-spacing: 0; margin-top: 4px; }
@media (max-width: 760px) { .credits { grid-template-columns: 1fr; gap: var(--s-4); } .roll li { grid-template-columns: 1fr; gap: 2px; } .roll .k { text-align: left; } }

/* ---------- What we make ---------- */
.offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--col-gap); }
.offer h3 { font-size: var(--t-3); margin-bottom: var(--s-2); }
.offer p { color: var(--ink-2); max-width: 30em; }
.offer .examples { margin-top: var(--s-2); font-size: var(--t-0); color: var(--ink-2); }
.offer .examples a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--line); }
.offer .examples a:hover { text-decoration-color: var(--red); }
@media (max-width: 900px) { .offer { grid-template-columns: 1fr; } }

/* ---------- Directors ---------- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4) var(--col-gap); }
.person__media { aspect-ratio: 4/5; overflow: hidden; background: var(--black); }
.person__media img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: var(--t-2); margin-top: 12px; }
.person h3 .zh { color: var(--ink-2); font-size: .8em; margin-left: .5em; font-weight: 400; }
.person .role { color: var(--ink-2); font-size: var(--t-0); margin-top: 2px; }
.person .bio { margin-top: 10px; color: var(--ink-2); font-size: var(--t-0); line-height: 1.5; }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Studio / prose ---------- */
.prose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-5); }
.prose h2 { font-size: var(--t-4); max-width: 12em; }
.prose .body > p + p { margin-top: var(--s-2); }
.prose .body p { max-width: 38em; }
.prose .body .meta { margin-top: var(--s-3); }
@media (max-width: 760px) { .prose { grid-template-columns: 1fr; gap: var(--s-3); } }

.titles { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: var(--s-3); }
.titles li { font-size: var(--t-1); }
.titles li .zh { color: var(--ink-2); margin-left: .4em; }
.titles li small { display: block; color: var(--ink-2); font-size: var(--t-0); }

.clients { display: flex; flex-wrap: wrap; gap: 8px 26px; color: var(--ink-2); font-size: var(--t-1); max-width: 60em; }

/* ---------- Method steps ---------- */
.steps { border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--col-gap); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.steps h3 { font-size: var(--t-3); }
.steps p { color: var(--ink-2); max-width: 36em; }
.steps p + p { margin-top: var(--s-1); }
.steps .num { color: var(--ink-3); font-size: var(--t-0); display: block; margin-bottom: 6px; }
@media (max-width: 760px) { .steps li { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- CTA ---------- */
.cta { background: var(--ink); color: var(--bg); padding-block: var(--s-6); }
.cta h2 { font-size: var(--t-5); letter-spacing: -0.02em; max-width: 14em; }
.cta p { margin-top: var(--s-3); color: rgba(236,237,238,.75); max-width: 36em; }
.cta .ways { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 14px 40px; font-size: var(--t-2); }
.cta .ways a { border-bottom: 1px solid rgba(236,237,238,.35); padding-bottom: 2px; }
.cta .ways a:hover { color: var(--white); border-color: var(--red); }

/* ---------- Footer ---------- */
.footer { padding-block: var(--s-4); font-size: var(--t-0); color: var(--ink-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: start; }
.footer p { max-width: 46em; }
.footer .right { text-align: right; }
.footer a:hover { color: var(--red); }
@media (max-width: 640px) { .footer { grid-template-columns: 1fr; } .footer .right { text-align: left; } }

/* ---------- Work detail ---------- */
.page-head { padding-top: calc(72px + var(--s-5)); padding-bottom: var(--s-4); }
.page-head h1 { font-size: var(--t-6); letter-spacing: -0.025em; line-height: 1; max-width: 12em; }
.page-head h1 .zh { display: block; font-size: .42em; color: var(--ink-2); letter-spacing: 0; margin-top: 10px; font-weight: 400; }
.page-head .lede { margin-top: var(--s-3); }
.page-head .crumb { color: var(--ink-2); font-size: var(--t-0); margin-bottom: var(--s-3); }
.page-head .crumb a:hover { color: var(--red); }

.player { background: var(--black); position: relative; }
.player video { width: 100%; height: auto; max-height: 86svh; margin-inline: auto; }
.player__cap { color: var(--ink-2); font-size: var(--t-0); padding: 10px var(--gutter) 0; }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-5); padding-block: var(--s-5); }
.facts { border-top: 1px solid var(--line); font-size: var(--t-1); }
.facts div { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; }
.detail .body h2 { font-size: var(--t-0); color: var(--ink-2); font-weight: 400; margin-bottom: 8px; }
.detail .body section + section { margin-top: var(--s-4); }
.detail .body p { font-size: var(--t-2); line-height: 1.4; max-width: 32em; }
.detail .results li { font-size: var(--t-3); letter-spacing: -0.015em; line-height: 1.15; padding: 10px 0; border-bottom: 1px solid var(--line); }
.detail .results { border-top: 1px solid var(--line); max-width: 32em; }
@media (max-width: 760px) { .detail { grid-template-columns: 1fr; gap: var(--s-4); } }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap); padding-bottom: var(--s-6); }
.gallery figure { margin: 0; background: var(--black); aspect-ratio: 16/9; overflow: hidden; position: relative; }
.gallery figure.r-185 { aspect-ratio: 1.85; }
.gallery img, .gallery video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery video { opacity: 0; transition: opacity .3s ease; }
.gallery figure.is-playing video { opacity: 1; }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

.more { padding-bottom: var(--s-6); }

/* ---------- Contact form ---------- */
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--col-gap); max-width: 52em; }
.form label { display: grid; gap: 6px; font-size: var(--t-0); color: var(--ink-2); }
.form label.full { grid-column: span 2; }
.form input, .form select, .form textarea { font: inherit; font-size: var(--t-1); color: var(--ink); background: var(--bg-raised); border: 1px solid var(--line); padding: 12px 14px; border-radius: 0; width: 100%; }
.form textarea { min-height: 9em; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form .submit { grid-column: span 2; justify-self: start; background: var(--ink); color: var(--bg); padding: 14px 22px; font-size: var(--t-1); }
.form .submit:hover { background: var(--red); color: var(--white); }
.form .note { grid-column: span 2; }
.form .sent { grid-column: span 2; font-size: var(--t-2); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } .form label.full, .form .submit, .form .note { grid-column: span 1; } }

/* prototype notice */
.proto { position: fixed; bottom: 14px; left: 14px; z-index: 60; font-size: 12px; color: var(--ink-2); background: var(--bg-raised); border: 1px solid var(--line); padding: 6px 10px; }

/* ---------- Method case walkthrough ---------- */
.case { padding-bottom: var(--s-5); }
.case__head { max-width: 46em; margin-bottom: var(--s-5); }
.case__head h2 { font-size: var(--t-5); letter-spacing: -0.02em; margin: 10px 0 var(--s-2); }
.case__head .lede a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--line); }
.case__head .lede a:hover { text-decoration-color: var(--red); }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-4) var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--line); align-items: start; }
.step__text h3 { font-size: var(--t-3); margin-bottom: var(--s-2); }
.step__text p { max-width: 32em; }
.step__text p + p { margin-top: var(--s-2); }
.step__text p.meta { max-width: 32em; }
.step > .wide, .step > .sheets, .step > .bible, .step > .brief { grid-column: 2; }
.step figure { margin: 0; }
.step figure img { width: 100%; height: auto; display: block; background: var(--black); }
.step figcaption { margin-top: 8px; }
.wide { position: relative; }
.wide[data-preview] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.wide[data-preview].is-playing video { opacity: 1; }
.wide[data-preview] img { aspect-ratio: 16/9; object-fit: cover; }
.wide[data-preview] figcaption { position: relative; }
.canvas img { border: 1px solid var(--line); }
.sheets { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); }
.sheets--2 { grid-template-columns: repeat(2, 1fr); }
.sheets img { aspect-ratio: 4/3; object-fit: contain; background: #E4E5E7; }
.sheets--2 img { aspect-ratio: 16/9; }
.bible { margin: 0; padding: var(--s-3) var(--s-4); border-left: 2px solid var(--red); background: var(--bg-raised); }
.bible p[lang="zh"] { font-family: var(--font-zh); font-size: var(--t-2); line-height: 1.55; }
.bible .meta { margin-top: var(--s-2); max-width: 46em; }
.brief { margin-top: var(--s-3); border: 1px solid var(--line); }
.brief summary { cursor: pointer; padding: 14px 18px; font-size: var(--t-1); list-style: none; display: flex; justify-content: space-between; }
.brief summary::-webkit-details-marker { display: none; }
.brief summary::after { content: "+"; color: var(--ink-2); }
.brief[open] summary::after { content: "–"; }
.brief summary:hover { color: var(--red); }
.brief__body { padding: 0 18px 18px; font-family: var(--font-zh); font-size: var(--t-0); line-height: 1.7; color: var(--ink-2); }
.brief__body p + p { margin-top: 10px; }
.brief__body b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .sheets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .step { grid-template-columns: 1fr; gap: var(--s-3); } .step > .wide, .step > .sheets, .step > .bible, .step > .brief { grid-column: 1; } }