/* Temple of Tian Xiwei: components. Builds on style.css (tokens, nav, hero, gallery, lightbox). */

.fan .intro { max-width: var(--measure); color: var(--ink-soft); margin: -8px 0 26px; font-size: 1.05rem; }
.fan .note { max-width: var(--measure); font-size: .9rem; color: var(--ink-soft); margin-top: 18px; }
.fan .num, .fan .ledger .n, .fan td.y { font-variant-numeric: tabular-nums; }

/* hero quick facts: little rounded tiles */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; max-width: 46ch; }
.quick div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 10px 14px; min-width: 0; }
.quick dt { font-family: var(--f-label); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gilt); }
.quick dd { margin: 2px 0 0; font-size: .98rem; font-weight: 600; }

/* 2026 ledger: big colourful number cards */
.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ledger div { background: var(--card); border-radius: var(--r-md); padding: 24px 22px 26px; display: grid; gap: 10px; align-content: start; min-width: 0; box-shadow: 0 14px 30px -22px var(--shade); border: 1px solid var(--rule); }
.ledger div:nth-child(1) { background: var(--accent); border-color: transparent; }
.ledger div:nth-child(2) { background: var(--accent-2); border-color: transparent; }
.ledger div:nth-child(3) { background: var(--sun); border-color: transparent; }
.ledger div:nth-child(-n+3) .n, .ledger div:nth-child(-n+3) p { color: var(--on-accent); }
.ledger .n { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 4.8vw, 3.6rem); line-height: .95; letter-spacing: -.04em; color: var(--lacquer); }
.ledger p { font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }

/* milestones: newest first, grouped by year */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 780px; }
.timeline li { position: relative; padding: 0 0 22px 34px; border-left: 3px dotted var(--accent); margin-left: 10px; display: grid; gap: 6px; }
.timeline li:not(.year)::before { content: ""; position: absolute; left: -11px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--paper) 0 30%, var(--accent-2) 32% 64%, var(--sun) 66%); box-shadow: 0 0 0 2px var(--accent); }
.timeline li:not(.year) > *:not(.when) { background: transparent; }
.timeline li.year { padding: 6px 0 16px 0; border-left: 0; margin-left: 0; }
.timeline li.year span { display: inline-block; font-family: var(--f-display); font-weight: 800; font-size: 2rem; color: var(--on-accent); background: var(--accent); padding: 2px 16px 4px; border-radius: 999px; line-height: 1.1; }
.timeline li.year + li { padding-top: 2px; }
.timeline .when { font-family: var(--f-label); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gilt); }
.timeline .src { font-family: var(--f-label); font-size: .8rem; color: var(--ink-soft); }
.timeline .src a { color: var(--ink-soft); }

/* awards and tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--card); border-radius: var(--r-md); box-shadow: 0 14px 30px -24px var(--shade); }
.awards { min-width: 640px; }
.awards td.y { font-family: var(--f-label); font-weight: 700; color: var(--gilt); white-space: nowrap; }
.chip { display: inline-block; font-family: var(--f-label); font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.chip.won { background: var(--accent); color: var(--on-accent); }
.chip.nom { border: 1.5px solid var(--rule); color: var(--ink-soft); }

/* show cards: posters as rounded tiles that lift on hover */
.show-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 20px; }
.show { display: grid; grid-template-rows: auto 1fr; gap: 12px; text-align: left; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.show:disabled { cursor: default; }
.show .poster { position: relative; aspect-ratio: 2 / 3; width: 100%; overflow: hidden; background: var(--paper-2); border-radius: var(--r-md); box-shadow: 0 16px 30px -20px var(--shade); transition: transform .3s ease, box-shadow .3s ease; }
.show .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.show:hover:not(:disabled) .poster { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 24px 40px -22px var(--shade); }
.show .poster .blank { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-cute); font-size: 1.6rem; color: var(--ink-soft); writing-mode: vertical-rl; letter-spacing: .2em; }
.show .badge { position: absolute; top: 10px; left: 10px; }
.show .badge.hit { background: var(--sun); color: var(--on-accent); }
.show .badge.soon { background: var(--accent); color: var(--on-accent); }
.show .badge.plain { background: var(--card); color: var(--ink); }
.show .body { display: grid; gap: 3px; align-content: start; min-width: 0; }
.show .meta { font-family: var(--f-label); font-weight: 600; font-size: .78rem; color: var(--gilt); }
.show h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.show h3 .zh { display: block; font-size: .9rem; font-weight: 400; color: var(--ink-soft); margin-top: 2px; letter-spacing: 0; }
.show .role { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.show .hl { font-size: .86rem; line-height: 1.45; background: var(--paper-2); border-radius: var(--r-sm); padding: 6px 10px; margin-top: 6px; }
.show .photos { font-family: var(--f-label); font-weight: 700; font-size: .8rem; color: var(--lacquer); margin-top: 4px; }
.show:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }

/* gallery filters scroll sideways in their own row */
.fan-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.fan-filters button { flex: none; }

/* off screen */
.off { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.off-list { margin: 0; display: grid; gap: 10px; }
.off-list div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 18px; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; }
.off-list dt { font-family: var(--f-label); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gilt); padding-top: 3px; }
.off-list dd { margin: 0; }
.off-strip { padding-block: 0; --w: min(170px, calc((100vw - 56px) / 4.2)); }

/* coming up */
.coming { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.coming article { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 16px; box-shadow: 0 14px 30px -24px var(--shade); }
.coming img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; border-radius: var(--r-sm); }
.coming h3 { font-size: 1.35rem; margin: 8px 0 8px; }
.coming h3 .zh { font-size: 1rem; font-weight: 400; color: var(--ink-soft); margin-left: 6px; letter-spacing: 0; }
.coming p:last-child { font-size: .95rem; }

/* follow */
.follow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.follow a { display: grid; gap: 4px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 18px 20px; color: var(--ink); text-decoration: none; min-width: 0; transition: transform .2s, background .2s; }
.follow a:hover { background: var(--accent-2); transform: translateY(-3px); }
.follow b { font-family: var(--f-display); font-size: 1.2rem; }
.follow b::after { content: " \2197"; color: var(--lacquer); }
.follow span:last-child { font-size: .88rem; color: var(--ink-soft); }

@media (max-width: 860px) {
  .ledger, .follow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .off, .coming { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .off-list div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .coming article { grid-template-columns: 86px minmax(0, 1fr); }
}

/* ---------- brands page ---------- */
.page-head { padding-block: clamp(36px, 6vw, 72px) 24px; display: grid; gap: 14px; }
.page-head h1 { font-size: clamp(3rem, 7vw, 5.4rem); font-weight: 800; letter-spacing: -.045em; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-head .zh-mark { font-family: var(--f-cute); font-weight: 400; font-size: .32em; letter-spacing: 0; color: var(--on-accent); background: var(--sun); padding: 8px 14px 6px; border-radius: 14px; transform: rotate(-4deg); }
.page-head .lede { max-width: var(--measure); font-size: 1.12rem; }
.page-head .note { margin-top: 0; }
.brand-filters { margin-bottom: 6px; }
.brands { display: grid; gap: 22px; padding-block: 18px 10px; }
.brand { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: start; padding: clamp(18px, 3vw, 30px); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: 0 18px 40px -30px var(--shade); }
.brand-photos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.brand-photos button { padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in; display: block; width: 100%; border-radius: var(--r-sm); overflow: hidden; }
.brand-photos img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; transition: transform .35s ease; }
.brand-photos button:hover img { transform: scale(1.04); }
.brand-photos button:only-child img { max-height: 460px; }
.brand-photos button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.brand-photos.blank { display: grid; grid-auto-flow: row; place-content: center; justify-items: center; gap: 6px; min-height: 180px; background: var(--paper-2); border-radius: var(--r-md); padding: 24px; text-align: center; }
.brand-photos.blank span:first-child { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink-soft); }
.brand-photos.blank .zh { font-size: 1.1rem; color: var(--ink-soft); letter-spacing: .1em; }
.brand-body { display: grid; gap: 10px; max-width: var(--measure); min-width: 0; }
.brand-body .meta { justify-self: start; font-family: var(--f-label); font-weight: 700; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent-2); padding: 4px 11px; border-radius: 999px; }
.brand[data-cat="fashion"] .brand-body .meta { background: var(--accent-2); }
.brand[data-cat="beauty"] .brand-body .meta { background: var(--accent); }
.brand[data-cat="tech"] .brand-body .meta { background: var(--sun); }
.brand[data-cat="food"] .brand-body .meta { background: var(--sun); }
.brand[data-cat="play"] .brand-body .meta { background: var(--accent); }
.brand-body h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; }
.brand-body h2 .zh { font-size: .5em; font-weight: 400; color: var(--ink-soft); margin-left: 6px; letter-spacing: 0; }
.brand-body .role { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--lacquer); }
.brand-body .role .zh { font-family: var(--f-zh); font-weight: 400; font-size: .85em; color: var(--ink-soft); margin-left: 4px; }
.brand-body .src { font-family: var(--f-label); font-size: .82rem; color: var(--ink-soft); }
.brand-body .src a { color: var(--ink-soft); }
.off-more { font-family: var(--f-label); font-weight: 700; margin-top: 16px; }
@media (max-width: 760px) {
  .brand { grid-template-columns: minmax(0, 1fr); }
  .brand-photos img { max-height: 340px; }
}
/* cards with many photos: an even grid of portrait crops */
.brand-photos.many { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-photos.many img { aspect-ratio: 4 / 5; object-fit: cover; max-height: none; }
/* one featured photo spanning two columns and two rows */
.brand-photos.feature button:first-child { grid-column: span 2; grid-row: span 2; }
.brand-photos.feature button:first-child img { height: 100%; }
/* keep faces in view when grid tiles crop tall photos */
.brand-photos.many img { object-position: 50% 15%; }

/* ---------- watch: videos that load only when tapped ---------- */
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 26px 18px; }
.watch { display: grid; gap: 8px; align-content: start; min-width: 0; }
.yt, .yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0 0 4px; background: var(--paper-2); border-radius: var(--r-md); }
.yt { position: relative; cursor: pointer; overflow: hidden; box-shadow: 0 14px 28px -18px var(--shade); }
.yt img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.yt:hover img { transform: scale(1.04); }
.yt .play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--card) 70%, transparent), 0 10px 24px -8px var(--shade); transition: transform .2s; }
.yt .play::before { content: ""; position: absolute; left: 23px; top: 19px; width: 18px; height: 22px; background: var(--on-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.yt:hover .play { transform: scale(1.08); }
.yt:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.watch .meta { font-family: var(--f-label); font-weight: 700; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gilt); }
.watch h4 { margin: 0; font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.watch h4 .zh { font-size: .85em; font-weight: 400; color: var(--ink-soft); margin-left: 4px; letter-spacing: 0; }
.watch .what { font-size: .9rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .yt img, .yt .play, .show .poster, .brand-photos img, .follow a { transition: none; } }
.watch-sub { display: inline-block; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); margin: 44px 0 16px; }
.watch-sub::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 2px; }
.fan .intro + .watch-sub { margin-top: 0; }
.watch-grid.tall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.watch-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 4px; background: var(--paper-2); border-radius: var(--r-md); box-shadow: 0 14px 28px -18px var(--shade); }
.watch-grid.tall .watch-video { aspect-ratio: 9 / 16; }

/* adverts on brand cards */
.brand-video { display: grid; gap: 6px; margin: 4px 0 2px; min-width: 0; }
.brand-video .yt { margin: 0; }
.brand-video video { display: block; width: 100%; height: auto; background: var(--paper-2); border-radius: var(--r-md); }
.brand-video.tall video { width: auto; max-width: 100%; max-height: 520px; }
.brand-video .cap { font-family: var(--f-label); font-size: .8rem; color: var(--ink-soft); }
.brand-video .cap a { color: var(--ink-soft); }
.brand-video.lead { margin: 0; }
/* cards of landscape stills: two across */
.brand-photos.wide { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand-photos.wide img { aspect-ratio: 16 / 9; object-fit: cover; max-height: none; }
.watch-grid.tall .watch.landscape { grid-column: span 2; }
.watch-grid.tall .watch.landscape .watch-video { aspect-ratio: 4 / 3; }
@media (max-width: 480px) { .watch-grid.tall .watch.landscape { grid-column: auto; } }

/* peak heat table */
.peaks-head { font-family: var(--f-display); font-size: 1.5rem; font-weight: 800; margin: 40px 0 10px; }
.peaks { min-width: 520px; }
.peaks td.peak { font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; color: var(--lacquer); font-variant-numeric: tabular-nums; white-space: nowrap; }
.peaks td .zh { display: block; margin-left: 0; }
.page-head .label { justify-self: start; }

/* milestones with photos: text on the left, a tilted polaroid on the right */
.timeline { max-width: 1060px; }
.timeline li.has-pic { grid-template-columns: minmax(0, 1fr) clamp(150px, 22vw, 240px); column-gap: clamp(18px, 3vw, 36px); align-items: start; }
.timeline li.has-pic > :not(.tl-pic) { grid-column: 1; }
.timeline .tl-pic { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 7px 7px 26px; background: var(--card); border-radius: 6px; box-shadow: 0 14px 28px -16px var(--shade); transform: rotate(2deg); position: relative; }
.timeline li.has-pic:nth-child(even) .tl-pic { transform: rotate(-2deg); }
.timeline .tl-pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; border-radius: 3px; }
.timeline .tl-pic.tall { width: 68%; justify-self: end; }
.timeline .tl-pic.tall img { aspect-ratio: 2 / 3; }
.timeline .tl-pic figcaption { position: absolute; left: 10px; right: 10px; bottom: 5px; font-family: var(--f-label); font-size: .7rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .timeline li.has-pic { grid-template-columns: minmax(0, 1fr); }
  .timeline .tl-pic { grid-column: 1; grid-row: auto; order: 9; width: min(260px, 80%); margin-top: 6px; }
  .timeline .tl-pic.tall { width: min(170px, 55%); justify-self: start; }
}

/* awards: a row of photos above the table */
.award-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.award-pics figure { margin: 0; padding: 7px 7px 26px; background: var(--card); border-radius: 6px; box-shadow: 0 14px 28px -16px var(--shade); position: relative; }
.award-pics figure:nth-child(odd) { transform: rotate(-1.5deg); }
.award-pics figure:nth-child(even) { transform: rotate(1.5deg); }
.award-pics img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: 3px; }
.award-pics figcaption { position: absolute; left: 10px; right: 10px; bottom: 5px; font-family: var(--f-label); font-size: .7rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .award-pics { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; padding: 6px 4px 14px; scrollbar-width: none; } .award-pics::-webkit-scrollbar { display: none; } }
/* gallery filters: a small label before the drama tabs */
.filter-sep { flex: none; align-self: center; font-family: var(--f-label); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gilt); padding: 0 4px 0 14px; border-left: 2px dotted var(--rule); margin-left: 4px; }