/* Self-hosted brand faces, variable.
   Archivo carries everything (body 500, micro-labels and headlines 700/800);
   Newsreader is the wordmark only. 汉字 resolve through the PingFang SC /
   Songti SC system fallback declared in --sans / --serif — no CJK webfont. */

/* Archivo — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Archivo-latin-ext.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;
}

/* Archivo — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Archivo-latin.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;
}

/* Newsreader — latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/Newsreader-latin-ext.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;
}

/* Newsreader — latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/Newsreader-latin.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;
}


:root { --ink:#171916; --paper:#fff; --accent:#b61f25; --muted:#64665f; --line:#c9cbc4; --sans:Archivo,Arial,sans-serif; --serif:Newsreader,Georgia,serif; --edge:clamp(22px,4.4vw,70px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:5px; }
button { font:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
figure,h1,h2,h3,p { margin:0; }
img,video { display:block; width:100%; max-width:100%; }
img { height:auto; }
h1,h2,h3 { font-weight:500; }
p+p { margin-top:18px; }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; padding:12px 16px; color:var(--ink); background:white; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:25px var(--edge); }
.wordmark { font-size:18px; line-height:.98; font-weight:750; letter-spacing:-.04em; text-decoration:none; }
.wordmark span { display:block; }
.header-note { font-size:12px; line-height:1.4; }
.header-date { text-align:right; font-size:12px; line-height:1.4; }
.header-date span { display:block; }
.opening { position:relative; }
.eyebrow { font-size:12px; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; }
.opening h1 { letter-spacing:-.045em; }
.opening h1 span { display:block; }
.winner { font-size:16px; line-height:1.45; }
.winner strong { font-weight:600; }
.lead-photo { margin:0; }
.lead-photo img { object-fit:cover; }
.lead-photo figcaption { font-size:12px; line-height:1.4; }
.lead-photo figcaption span { margin-right:10px; }
.opening-intro { font-size:17px; line-height:1.55; }
.opening-intro .byline { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:44px; font-size:14px; text-decoration:none; border-bottom:1px solid currentColor; }
.text-link:hover { color:var(--accent); }
.play-link { display:inline-flex; align-items:center; gap:14px; min-height:48px; text-decoration:none; font-size:14px; }
.play-symbol { display:grid; width:42px; height:42px; place-items:center; border:1px solid currentColor; }
.play-symbol::before { content:""; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; margin-left:3px; }
.play-link small { font-size:12px; opacity:.72; }
.play-link:hover .play-symbol { background:var(--accent); border-color:var(--accent); color:white; }
.chapter-number { font:400 16px/1 var(--serif); }
.work-opening { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; padding:64px var(--edge) 72px; }
.work-opening .eyebrow { grid-column:1/4; }
.work-title { grid-column:4/13; letter-spacing:-.035em; line-height:.99; }
.work-title span { display:block; }
.work-photo { grid-column:1/5; margin-top:42px; }
.work-photo img { aspect-ratio:4/4.7; object-fit:cover; object-position:center 29%; }
.work-photo figcaption { font-size:12px; line-height:1.5; margin-top:12px; }
.work-copy { grid-column:6/12; margin-top:42px; align-self:center; max-width:53ch; }
.work-copy h3 { font-size:15px; line-height:1.4; font-weight:600; margin-bottom:17px; }
.work-copy .relevance { border-top:1px solid var(--line); padding-top:22px; margin-top:24px; }
.work-copy .text-link { margin-top:23px; }
.preview-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:21px var(--edge); font-size:12px; border-top:1px solid var(--line); }
.preview-footer a { font-size:14px; }
dialog { width:min(1080px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; background:#111; color:white; }
dialog::backdrop { background:rgba(0,0,0,.86); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 16px; font-size:13px; }
.dialog-close { min-height:44px; padding:8px 14px; border:1px solid #676767; background:transparent; color:white; cursor:pointer; font-size:14px; }
dialog video { width:100%; max-height:calc(100dvh - 125px); aspect-ratio:16/9; background:black; }
.dialog-caption { padding:14px 16px; font-size:12px; color:#ccc; }
/* A: a white magazine spread, with a serif headline and deliberately uneven columns. */
.magazine .site-header { margin:0 var(--edge); padding:25px 0; border-bottom:2px solid var(--ink); }
.magazine .header-note { margin-left:auto; margin-right:9%; }
.magazine .opening { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 24px; padding:28px var(--edge) 42px; }
.magazine .opening>.eyebrow { grid-column:1/9; padding-block:0 24px; color:var(--accent); }
.magazine .opening h1 { grid-column:1/10; grid-row:2; position:relative; z-index:1; margin-bottom:27px; font:400 clamp(64px,7.9vw,120px)/.91 var(--serif); letter-spacing:-.065em; }
.magazine .opening h1 .title-second { margin-left:8.5%; }
.magazine .winner { grid-column:10/13; grid-row:2; align-self:end; margin-bottom:31px; border-top:1px solid var(--ink); padding-top:12px; font-size:14px; }
.magazine .winner strong { display:block; margin-bottom:5px; }
.magazine .lead-photo { grid-column:1/9; grid-row:3/5; }
.magazine .lead-photo img { aspect-ratio:1.65; object-position:center 64%; }
.magazine .lead-photo figcaption { display:flex; margin-top:10px; color:var(--muted); }
.magazine .lead-photo figcaption span { color:var(--ink); }
.magazine .opening-intro { grid-column:9/13; grid-row:3; padding-top:12px; border-top:1px solid var(--ink); }
.magazine .opening-intro .byline { color:var(--accent); margin-bottom:17px; }
.magazine .opening-intro p:not(.byline) { font-size:16px; }
.magazine .opening-intro .text-link { margin-top:19px; }
.magazine .opening-play { grid-column:9/13; grid-row:4; align-self:end; margin-top:25px; padding-bottom:26px; }
.magazine .work-opening { margin:0 var(--edge); padding-inline:0; border-top:2px solid var(--ink); }
.magazine .work-title { font:400 clamp(44px,5.6vw,78px)/.98 var(--serif); letter-spacing:-.045em; }
.magazine .work-opening .eyebrow { margin-top:6px; color:var(--accent); }
.magazine .work-photo { grid-column:2/5; }
.magazine .work-copy { grid-column:6/12; }
.magazine .work-copy .relevance { font:400 29px/1.18 var(--serif); letter-spacing:-.02em; }
/* B: a photographic opening with production credits and a direct change of scale. */
.film { --paper:#111311; --ink:#f3f3ec; --muted:#a1a59d; --line:#42463f; --accent:#dfaf70; }
.film .site-header { position:absolute; z-index:3; top:0; width:100%; color:white; padding-block:28px; }
.film .wordmark { font-weight:650; }
.film .header-note { letter-spacing:.015em; }
.film .opening { min-height:850px; min-height:max(800px,100svh); padding:116px var(--edge) 43px; isolation:isolate; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; grid-template-rows:auto auto 1fr auto auto; color:white; }
.film .lead-photo { position:absolute; inset:0; z-index:-2; }
.film .lead-photo picture { display:block; width:100%; height:100%; }
.film .lead-photo img { width:100%; height:100%; object-position:58% 62%; }
.film .lead-photo::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(0,0,0,.81),rgba(0,0,0,.16) 66%,rgba(0,0,0,.11)),linear-gradient(180deg,rgba(0,0,0,.52),transparent 30%,transparent 58%,rgba(0,0,0,.85)); }
.film .lead-photo figcaption { position:absolute; right:var(--edge); bottom:43px; z-index:1; max-width:255px; color:#dddcd5; font-size:12px; text-align:right; }
.film .opening>.eyebrow { grid-row:1; grid-column:1/10; color:#eee1ce; margin-bottom:23px; }
.film .opening h1 { grid-column:1/12; grid-row:2; font:750 clamp(65px,8.8vw,132px)/.89 var(--sans); letter-spacing:-.065em; margin-left:-5px; }
.film .opening h1 .title-first { font-weight:400; font-size:.68em; letter-spacing:-.045em; margin-bottom:8px; }
.film .winner { grid-column:10/13; grid-row:3; align-self:start; margin-top:32px; padding-top:12px; border-top:1px solid #b0aaa0; color:#e9e5dd; font-size:14px; }
.film .winner strong { display:block; color:white; margin-bottom:5px; }
.film .opening-intro { grid-column:1/6; grid-row:4; max-width:50ch; padding-top:60px; }
.film .opening-intro .byline { margin-bottom:14px; color:#dfc8a8; }
.film .opening-intro p:not(.byline) { font-size:16px; color:#f2f0e9; }
.film .opening-intro .text-link { margin-top:16px; }
.film .opening-play { grid-column:7/10; grid-row:4; align-self:end; margin-bottom:2px; }
.film .play-symbol { width:58px; height:58px; }
.film .opening-play .play-link { gap:15px; }
.film .opening-play .play-link small { display:block; margin-top:2px; }
.film .work-opening { padding-block:72px 88px; }
.film .work-opening>.eyebrow { grid-column:1/4; color:var(--accent); padding-top:5px; }
.film .work-title { grid-column:4/13; font:600 clamp(43px,5.7vw,80px)/.98 var(--sans); letter-spacing:-.055em; }
.film .work-title span:last-child { color:#acb1a5; }
.film .work-photo { grid-column:1/6; }
.film .work-photo img { aspect-ratio:1.05; object-position:center 32%; }
.film .work-photo figcaption { color:var(--muted); }
.film .work-copy { grid-column:7/12; }
.film .work-copy h3 { color:var(--accent); }
.film .work-copy .relevance { font-size:23px; line-height:1.4; letter-spacing:-.02em; }
.film .preview-footer { color:var(--muted); }
@media (min-width:1600px) {
  .magazine { max-width:1600px; margin-inline:auto; }
  .film .opening { min-height:920px; }
}
@media (max-width:1000px) {
  .magazine .opening { gap:0 20px; }
  .magazine .opening h1 { grid-column:1/10; font-size:9vw; }
  .magazine .winner { grid-column:10/13; font-size:13px; }
  .magazine .lead-photo { grid-column:1/8; }
  .magazine .lead-photo img { aspect-ratio:.96; }
  .magazine .opening-intro,.magazine .opening-play { grid-column:8/13; }
  .film .opening-intro { grid-column:1/7; }
  .film .opening-play { grid-column:8/13; }
  .film .winner { grid-column:9/13; }
  .work-copy,.film .work-copy { grid-column:7/13; }
  .magazine .work-photo { grid-column:1/5; }
}
@media (max-width:650px) {
  body { font-size:16px; }
  .site-header,.magazine .site-header { padding-block:20px; }
  .header-note { display:none; }
  .header-date { font-size:12px; }
  .wordmark { font-size:17px; }
  .eyebrow { font-size:11px; letter-spacing:.075em; }
  .magazine .opening { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 14px; padding-top:23px; padding-bottom:37px; }
  .magazine .opening>.eyebrow { grid-column:1/-1; padding-bottom:23px; }
  .magazine .opening h1 { grid-column:1/-1; grid-row:2; font-size:clamp(53px,11.7vw,76px); letter-spacing:-.065em; margin-bottom:24px; }
  .magazine .opening h1 .title-second { margin-left:0; }
  .magazine .winner { grid-column:1/-1; grid-row:4; font-size:14px; margin:14px 0 25px; padding-top:13px; }
  .magazine .winner strong { display:inline; margin-right:5px; }
  .magazine .lead-photo { grid-column:1/-1; grid-row:3; }
  .magazine .lead-photo img { aspect-ratio:1.22; object-position:54% 66%; }
  .magazine .lead-photo figcaption { font-size:12px; }
  .magazine .opening-intro { grid-column:1/-1; grid-row:5; padding-top:0; border-top:0; }
  .magazine .opening-intro .byline { margin-bottom:12px; }
  .magazine .opening-intro .text-link { margin-top:12px; }
  .magazine .opening-play { grid-column:1/-1; grid-row:6; padding:0; margin-top:18px; }
  .work-opening,.magazine .work-opening,.film .work-opening { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 14px; padding-top:32px; padding-bottom:40px; }
  .work-opening .eyebrow,.film .work-opening>.eyebrow { grid-column:1/-1; margin-bottom:22px; }
  .work-title,.magazine .work-title,.film .work-title { grid-column:1/-1; font-size:clamp(39px,10vw,58px); }
  .work-photo,.magazine .work-photo,.film .work-photo { grid-column:1/4; margin-top:27px; }
  .work-photo img,.film .work-photo img { aspect-ratio:4/5; }
  .work-copy,.magazine .work-copy,.film .work-copy { grid-column:1/-1; margin-top:28px; }
  .magazine .work-copy .relevance { font-size:27px; }
  .preview-footer { align-items:flex-start; flex-direction:column; gap:12px; }
  .film .site-header { padding-top:23px; }
  .film .opening { min-height:1020px; padding-top:116px; padding-bottom:68px; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto auto minmax(150px,1fr) auto auto; gap:0 14px; }
  .film .opening>.eyebrow { grid-column:1/-1; grid-row:1; font-size:11px; margin-bottom:22px; }
  .film .opening h1 { grid-column:1/-1; grid-row:2; margin-left:-2px; font-size:clamp(47px,10.5vw,70px); line-height:.99; letter-spacing:-.06em; }
  .film .opening h1 .title-first { font-size:.9em; margin-bottom:0; }
  .film .winner { grid-column:1/4; grid-row:3; font-size:13px; margin-top:24px; }
  .film .lead-photo img { object-position:56% center; }
  .film .lead-photo::after { background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.3) 31%,rgba(0,0,0,.08) 46%,rgba(0,0,0,.9) 65%,rgba(0,0,0,.96)),linear-gradient(90deg,rgba(0,0,0,.2),transparent); }
  .film .opening-intro { grid-column:1/-1; grid-row:5; padding-top:40px; max-width:40ch; }
  .film .opening-play { grid-column:1/-1; grid-row:6; margin-top:22px; }
  .film .play-symbol { width:44px; height:44px; }
  .film .opening-play .play-link small { display:inline; margin-left:9px; }
  .film .lead-photo figcaption { left:var(--edge); right:var(--edge); bottom:20px; max-width:none; text-align:left; font-size:11px; }
}
@media (max-width:370px) {
  .magazine .opening h1 { font-size:47px; }
  .film .opening h1 { font-size:43px; }
  .film .opening { min-height:1120px; }
}

/* C: cinematic in daylight. Black titles on white, with the photograph in its own wide frame. */
.film.film-light { --paper:#fff; --ink:#171916; --muted:#64685f; --line:#cbd0c6; --accent:#a02c27; }
.film-light .site-header { position:relative; color:var(--ink); padding-block:26px; border-bottom:1px solid var(--line); }
.film-light .opening { min-height:0; padding-top:34px; padding-bottom:50px; grid-template-rows:auto auto auto auto; row-gap:0; color:var(--ink); }
.film-light .opening>.eyebrow { color:var(--accent); grid-column:1/10; margin-bottom:24px; }
.film-light .opening h1 { grid-column:1/10; grid-row:2; font-size:clamp(65px,8.2vw,124px); margin-bottom:32px; }
.film-light .winner { grid-column:10/13; grid-row:2; align-self:end; color:var(--muted); border-color:var(--line); margin-top:0; margin-bottom:35px; }
.film-light .winner strong { color:var(--ink); }
.film-light .lead-photo { position:relative; inset:auto; z-index:auto; grid-column:1/-1; grid-row:3; margin-inline:calc(-1 * var(--edge)); }
.film-light .lead-photo picture { height:auto; }
.film-light .lead-photo img { width:100%; height:auto; aspect-ratio:2.6; object-position:58% 72%; }
.film-light .lead-photo::after { display:none; }
.film-light .lead-photo figcaption { position:static; max-width:none; padding:12px var(--edge) 0; color:var(--muted); text-align:left; font-size:12px; }
.film-light .opening-intro { grid-column:1/8; grid-row:4; max-width:62ch; padding-top:34px; }
.film-light .opening-intro .byline { color:var(--accent); }
.film-light .opening-intro p:not(.byline) { color:var(--ink); font-size:17px; }
.film-light .opening-play { grid-column:10/13; grid-row:4; align-self:start; margin-top:35px; }
.film-light .play-symbol { width:50px; height:50px; }
.film-light .work-opening { border-top:1px solid var(--line); }
.film-light .work-title span:last-child { color:#697064; }
.film-light .work-photo img { aspect-ratio:1.15; }
@media (max-width:1000px) {
  .film-light .opening h1 { grid-column:1/10; font-size:8.2vw; }
  .film-light .winner { grid-column:10/13; font-size:13px; }
  .film-light .opening-intro { grid-column:1/8; }
  .film-light .opening-play { grid-column:9/13; }
}
@media (max-width:650px) {
  .film-light .site-header { padding-block:20px; }
  .film-light .opening { min-height:0; grid-template-rows:auto auto auto auto auto auto; padding-top:27px; padding-bottom:35px; }
  .film-light .opening>.eyebrow { grid-column:1/-1; margin-bottom:23px; }
  .film-light .opening h1 { grid-column:1/-1; grid-row:2; font-size:clamp(45px,10.5vw,69px); margin-bottom:26px; }
  .film-light .winner { grid-column:1/-1; grid-row:4; margin:22px 0 0; padding-top:15px; font-size:14px; }
  .film-light .winner strong { display:inline; margin-right:5px; }
  .film-light .lead-photo { grid-column:1/-1; grid-row:3; }
  .film-light .lead-photo img { aspect-ratio:1.2; object-position:56% 68%; }
  .film-light .lead-photo figcaption { font-size:12px; line-height:1.5; padding-top:10px; }
  .film-light .opening-intro { grid-column:1/-1; grid-row:5; padding-top:26px; }
  .film-light .opening-intro p:not(.byline) { font-size:16px; }
  .film-light .opening-play { grid-column:1/-1; grid-row:6; margin-top:24px; }
  .film-light .play-symbol { width:44px; height:44px; }
  .film-light .work-photo img { aspect-ratio:4/5; }
}
@media (max-width:370px) { .film-light .opening h1 { font-size:43px; } }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .site-header { position:static!important; color:#111!important; } .film { --ink:#111; --paper:white; } .film .opening { min-height:0; color:#111; display:block; padding-top:25px; } .film .lead-photo { position:relative; } .film .lead-photo::after { display:none; } .film .lead-photo figcaption { position:static; color:#111; } .film .opening-intro p:not(.byline),.film .winner,.film .winner strong { color:#111; } .film .opening-intro { padding-top:20px; } .film .opening h1 { font-size:60px; } .play-link,dialog { display:none; } }