/*
Theme Name: Bollywood Chronicle
Theme URI: https://bollywoodchronicle.com
Author: Bollywood Chronicle
Description: The bollywoodchronicle.com news theme, built from the client's design handoff on the Modernist system: flat, Archivo, square corners, two-pixel rules, grayscale photography, with the logo's purple as the brand accent and red kept for the Breaking tag alone. Homepage, article, section and reviews archive, celebrity profile, video and about/contact templates. The design system is assets/css/modernist.css, shipped verbatim; this file re-tokens its accent and lays the pages out.
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bollywood-chronicle
Tags: news, blog, two-columns, custom-menu, custom-logo, featured-images, threaded-comments
*/

/* ---- tokens: the handoff swaps the system's red accent for the logo's purple; red is Breaking only ---- */
:root {
  --color-accent: #5a1fd1;
  --color-accent-100: #efe9fc;
  --color-accent-600: #43158f;
  --color-accent-700: #43158f;
  --color-accent-800: #2f0f66;
  --bc-purple: #5a1fd1;
  --bc-purple-700: #43158f;
  --bc-purple-100: #efe9fc;
  --bc-red: #ec3013;
  --bc-red-text: #ae1800;
  --muted: color-mix(in srgb, var(--color-text) 55%, transparent);
  --gutter: 32px;
}

/* ---- base: ink links that turn purple on hover; focus outlines in purple ---- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--color-bg); }
a { color: var(--color-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--bc-purple); }
:focus-visible { outline: 2px solid var(--bc-purple); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--bc-purple) 25%, transparent); }
img { height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 8px 12px; background: var(--bc-purple); color: #fff; }
.btn { transition: background-color .15s, color .15s; }
.btn-primary { background: var(--bc-purple); color: #fff; }
.btn-primary:hover, .btn-primary:active { background: var(--bc-purple-700); color: #fff; }
.btn-ghost { color: var(--bc-purple); align-self: flex-start; justify-self: start; }
.btn-ghost:hover { color: var(--bc-purple-700); }
.input:focus-visible { border-color: var(--bc-purple); }
.frame { max-width: 1280px; margin: 0 auto; background: var(--color-bg); min-height: 100vh; display: flex; flex-direction: column; }
.wrap { padding: 28px var(--gutter) 0; flex: 1 0 auto; width: 100%; box-sizing: border-box; }
.wrap > *:first-child { margin-top: 0; }

/* ---- shared micro-styles ---- */
.kicker { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bc-purple); }
a.kicker:hover { color: var(--bc-purple-700); }
.breaking { background: var(--bc-red); color: var(--color-bg); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; line-height: 1.2; }
.tags { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.meta { font-size: 12px; color: var(--muted); }
.dek { margin: 0; color: var(--color-neutral-700); text-wrap: pretty; }
.t14, .t15 { font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.t14 { font-size: 14px; }
.t15 { font-size: 15px; }
.t17, .t19, .t21 { font-family: var(--font-heading); font-weight: 800; line-height: 1.2; text-wrap: pretty; }
.t17 { font-size: 17px; }
.t19 { font-size: 19px; }
.t21 { font-size: 21px; line-height: 1.15; }

/* section header: a 2px rule, the purple h6, an "All →" link on the right */
.sec { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 2px solid var(--color-divider); padding-top: 10px; margin: 44px 0 20px; }
.sec h6 { margin: 0; color: var(--bc-purple); }
.sec__more { font-size: 12px; color: var(--bc-purple); white-space: nowrap; }
.sec__more:hover { color: var(--bc-purple-700); }
.sec--tight { margin: 0; }
.sec--list { margin-bottom: 4px; }
.sec--related { margin: 24px 0 4px; }
.sec--contact { margin-bottom: 24px; }

/* photographs: grayscale on the frame, never baked in; a still too small for its frame is
   letterboxed on the grey, never blown up */
.media { position: relative; display: block; overflow: hidden; background: var(--color-neutral-400); }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media.is-small img { object-fit: contain; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-2x3 { aspect-ratio: 2 / 3; }
.r-1 { aspect-ratio: 1; }
.r-3x4 { aspect-ratio: 3 / 4; }

/* grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.grid-related { gap: 24px; }
.grid-ad { grid-column: 1 / -1; }

/* cards */
.card-s { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-s__text { display: flex; flex-direction: column; gap: 10px; }
.card-r { gap: 10px; min-width: 0; }
.card-r .card-title:hover { color: var(--bc-purple); }
.stars-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stars-row strong { font-size: 12px; }
.stars { color: var(--bc-purple); letter-spacing: 2px; font-size: 15px; }
.stars--big { font-size: 24px; letter-spacing: 3px; }
.card-v { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-v__row { display: flex; gap: 10px; align-items: flex-start; }
.card-v__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-v .meta { font-size: 11px; }
.play { flex: none; width: 32px; height: 32px; background: var(--bc-purple); color: #fff; display: grid; place-items: center; }
.play--big { width: 72px; height: 72px; }
.card-c { display: flex; flex-direction: column; gap: 8px; }

/* list rows */
.li-thumb { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.li-thumb__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.li-thumb .meta { font-size: 11px; }
.li-thumb:hover .t15 { color: var(--bc-purple); }
.li-wide { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
.li-wide__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.li-text { padding: 12px 0; border-bottom: 1px solid var(--color-divider); }

/* trending: a 36px rank column, the title, "{section} · {reads}" */
.trend { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.trend__n { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1; color: var(--bc-purple); }
.trend__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trend__text a { font-weight: 600; font-size: 15px; line-height: 1.3; text-wrap: pretty; }
.trend .meta { font-size: 11px; }

/* ---- header (.nav from the system: flex, 2px bottom rule) ---- */
.site-header { gap: 22px; padding: 10px var(--gutter); position: relative; }
.site-header .logo { margin-right: auto; display: block; flex: none; }
.site-header .logo img { display: block; width: 168px; height: auto; max-height: 84px; object-fit: contain; }
.nav__links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.nav .nav__links a { font-size: 15px; font-weight: 600; }
.nav .nav__links a[aria-current="page"] { color: var(--bc-purple); }
.nav .btn-primary { color: #fff; font-size: 14px; }
.nav .btn-primary:hover { color: #fff; }
.drawer-toggle { display: none; }
.site-search { display: none; padding: 12px var(--gutter); border-bottom: 1px solid var(--color-divider); }
.site-search:target, .site-search.is-open { display: block; }
.search-form { display: flex; gap: 8px; max-width: 560px; }
.drawer { padding: 4px var(--gutter) 20px; border-bottom: 2px solid var(--color-divider); display: flex; flex-direction: column; }
.drawer[hidden] { display: none; }
.drawer:target { display: flex; }
.drawer__row { padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-weight: 600; font-size: 16px; }
.drawer__row--small { font-weight: 400; font-size: 14px; }
.drawer .btn { margin-top: 16px; align-self: flex-start; }

/* ---- homepage (1a) ---- */
.home-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
.lead { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lead h1 { margin: 0; font-size: 46px; line-height: 1.05; letter-spacing: -.02em; text-wrap: pretty; max-width: 780px; }
.lead .dek { font-size: 18px; line-height: 1.5; max-width: 680px; }
.trending .sec { margin: 0; }
.home-bo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; }
.home-bo .sec { margin-bottom: 12px; }
.home-bo section:last-child .sec { margin-bottom: 4px; }

/* box office table: Film, Week, Weekend, India total, Change */
.bo__head, .bo__row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 8px; }
.bo__head { padding: 8px 0; border-bottom: 2px solid var(--color-divider); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.bo__row { padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; font-variant-numeric: tabular-nums; }
.bo3 { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---- article (1e) ---- */
.crumbs { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--bc-purple); }
.crumbs span { color: inherit; }
.art-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; margin-top: 20px; }
.art { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.art h1 { margin: 0; font-size: 50px; line-height: 1.04; letter-spacing: -.02em; text-wrap: pretty; }
.art--page { max-width: 780px; }
.standfirst { margin: 0; font-size: 20px; line-height: 1.45; color: var(--color-neutral-700); text-wrap: pretty; }
.review-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.review-head strong { font-size: 14px; }
.verdict { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.2; text-wrap: pretty; }
.byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.byline__avatar { width: 40px; height: 40px; flex: none; overflow: hidden; background: var(--color-neutral-500); }
.byline__avatar img { width: 40px; height: 40px; object-fit: cover; display: block; }
.byline__who { display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.byline__actions { margin-left: auto; display: flex; gap: 8px; }
.hero { display: flex; flex-direction: column; }
.hero--poster .media { max-width: 380px; }
.entry { max-width: 680px; display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.65; }
.entry > * { margin: 0; }
.entry a { color: var(--bc-purple); text-decoration: underline; text-underline-offset: 3px; }
.entry a:hover { color: var(--bc-purple-700); }
.entry h2 { font-size: 28px; margin-top: 8px; }
.entry h3 { font-size: 22px; margin-top: 8px; }
.entry ul, .entry ol { padding-left: 1.2em; }
.entry li + li { margin-top: 6px; }
.entry figure { display: flex; flex-direction: column; max-width: 100%; }
.entry figure img, .entry > p > img { filter: grayscale(1) contrast(1.08); }
.entry blockquote, .entry .wp-block-quote, .entry .wp-block-pullquote { margin: 12px 0; padding: 18px 0; border: 0; border-top: 2px solid var(--bc-purple); border-bottom: 2px solid var(--bc-purple); font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -.015em; color: var(--bc-purple); text-wrap: pretty; text-align: left; }
.entry blockquote p { margin: 0; }
.entry blockquote cite, .entry .wp-block-pullquote cite { display: block; margin-top: 10px; font-family: var(--font-body); font-weight: 400; font-size: 13px; font-style: normal; letter-spacing: 0; color: var(--muted); }
.entry iframe, .entry video { width: 100%; max-width: 100%; border: 0; }
.entry iframe[src*="youtube"], .entry iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }
.entry table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry td, .entry th { padding: 8px; border-bottom: 1px solid var(--color-divider); text-align: left; }
.entry th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); border-bottom-width: 2px; }
.entry .alignleft { float: left; margin: 0 16px 8px 0; }
.entry .alignright { float: right; margin: 0 0 8px 16px; }
.entry .wp-caption-text, .entry figcaption { font-size: 11px; color: var(--muted); }
.updated { margin: 0; }
.tagrow { display: flex; gap: 8px; flex-wrap: wrap; }
.tagrow .tag:hover { background: var(--bc-purple-100); color: var(--bc-purple-700); }
.side { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.page-links { font-weight: 800; font-size: 14px; }

/* ---- section archive (1f) ---- */
.archive-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: end; border-bottom: 2px solid var(--color-divider); padding-bottom: 24px; }
.archive-head h6 { margin: 0 0 8px; color: var(--bc-purple); }
.archive-head h1 { margin: 0; font-size: 64px; line-height: 1; letter-spacing: -.025em; text-wrap: pretty; overflow-wrap: anywhere; }
.archive-head__desc { margin: 0; font-size: 16px; line-height: 1.5; color: var(--color-neutral-700); text-wrap: pretty; }
.filters { display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; font-weight: 600; }
.filters a.is-active { color: var(--bc-purple); box-shadow: inset 0 -2px var(--bc-purple); padding-bottom: 4px; }
.filters__count { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--muted); }
.feat-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; margin-top: 32px; }
.feat-review .media { max-width: 380px; }
.feat-review__text { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.feat-review__text .stars-row { justify-content: flex-start; gap: 14px; }
.feat-review__text .stars-row strong { font-size: 14px; }
.feat-review h2 { margin: 0; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.feat-review .dek { font-size: 16px; line-height: 1.55; max-width: 620px; }
.archive-grid { margin-top: 44px; }
.pager { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 36px; }
.pager .page-numbers { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 14px; padding: 8px 14.4px; border: 1px solid var(--color-divider); }
.pager a.page-numbers:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.pager .page-numbers.current { background: var(--bc-purple); border-color: var(--bc-purple); color: #fff; }
.pager .page-numbers.dots { border-color: transparent; }
.empty { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 32px 0; }
.empty h1 { margin: 0; font-size: 46px; }

/* ---- celebrity profile (1g) ---- */
.profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; margin-top: 20px; }
.profile__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.profile__text h6 { margin: 0; color: var(--bc-purple); }
.profile__text h1 { margin: 0; font-size: 64px; line-height: 1; letter-spacing: -.025em; text-wrap: pretty; }
.bio { font-size: 17px; line-height: 1.5; color: var(--color-neutral-700); max-width: 620px; }
.bio > * { margin: 0 0 12px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.fact { border-top: 2px solid var(--color-divider); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.fact .meta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.fact strong { font-size: 16px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tabs { display: flex; gap: 28px; margin-top: 44px; border-bottom: 2px solid var(--color-divider); font-size: 14px; font-weight: 600; overflow-x: auto; }
.tabs a { padding: 10px 0; white-space: nowrap; }
.tabs a.is-active { color: var(--bc-purple); box-shadow: inset 0 -2px var(--bc-purple); }
.profile-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; }
.profile-body > aside { margin-top: 18px; }
.profile-body .btn-ghost { margin-top: 16px; }
.film { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.film > div { display: flex; flex-direction: column; }
.film strong + .meta { font-size: 12px; }
#news, #films, #photos, #interviews { scroll-margin-top: 16px; }

/* ---- video (1h) ---- */
.video-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; margin-top: 20px; }
.vlead { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vlead h1 { margin: 0; font-size: 34px; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; }
.vlead .meta { font-size: 13px; }
.vlead__desc { margin: 0; font-size: 16px; line-height: 1.55; max-width: 680px; color: var(--color-neutral-700); text-wrap: pretty; }
.player { position: relative; aspect-ratio: 16 / 9; background: var(--color-neutral-900); display: grid; place-items: center; overflow: hidden; }
.player iframe, .player video, .player > img, .player > a { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player > a > img, .player > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player .wp-video { width: 100% !important; height: 100%; }
.player__link { display: grid; place-items: center; }
.upnext { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.upnext__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.upnext .meta { font-size: 11px; }
.upnext:hover .t14 { color: var(--bc-purple); }
.autoplay { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; }
.autoplay input { accent-color: var(--bc-purple); width: 16px; height: 16px; margin: 0; }

/* ---- about / contact (1i) ---- */
.about { padding-top: 40px; }
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.about-intro h1 { margin: 0; font-size: 56px; line-height: 1; letter-spacing: -.025em; text-wrap: pretty; }
.about-copy { font-size: 17px; line-height: 1.6; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.about-copy > * { margin: 0; }
.about-copy a { color: var(--bc-purple); text-decoration: underline; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.stat { border-top: 2px solid var(--color-divider); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.stat__v { font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1; color: var(--bc-purple); }
.stat .meta { font-size: 13px; }
.person { display: flex; flex-direction: column; gap: 10px; }
.person .media img { width: 100%; height: 100%; object-fit: cover; }
.person strong { font-size: 17px; }
.person .meta { font-size: 13px; margin-top: -6px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.contact-details { font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; gap: 16px; }
.contact-details a { color: var(--bc-purple); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.contact .full { grid-column: 1 / -1; }
.contact .btn { justify-self: start; }
.field__err { display: block; margin-top: 4px; font-size: 12px; color: var(--bc-red-text); }
.notice { margin: 0; font-size: 13px; padding: 8px 12px; border-left: 2px solid var(--bc-purple); background: var(--bc-purple-100); }
.notice.err { border-left-color: var(--bc-red-text); background: var(--color-surface); color: var(--bc-red-text); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- ad slots (AdSense or a sponsor's unit, placed as widgets) ---- */
.ad-slot { display: grid; gap: 4px; justify-items: center; margin: 24px 0; }
.ad-slot__label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---- subscribe band and footer ---- */
.subscribe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; padding-top: 0; margin-top: 56px; }
.subscribe > div { border-top: 2px solid var(--color-divider); padding-top: 10px; }
.subscribe h6 { margin: 0 0 6px; color: var(--bc-purple); }
.subscribe p { margin: 0; color: var(--color-neutral-700); }
.subscribe__form { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe__form .input { flex: 1 1 220px; width: auto; }
.subscribe__form .notice { flex-basis: 100%; }
.site-footer { margin-top: 56px; background: var(--bc-purple); color: #fff; padding: 40px var(--gutter) 20px; }
.subscribe + .site-footer { margin-top: 40px; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.wordmark { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: #fff; }
.wordmark:hover { color: #fff; }
.fbrand p { font-size: 13px; margin: 14px 0 0; max-width: 300px; }
.fcol { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fcol h6 { margin: 0 0 6px; color: #fff; }
.site-footer a { color: #fff; }
.fcol a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, .4); margin-top: 32px; padding-top: 14px; font-size: 12px; }
.site-footer :focus-visible { outline-color: #fff; }

/* ---- comments (not designed: the article's rules, the same micro-styles) ---- */
.comments { display: flex; flex-direction: column; gap: 12px; }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.comment-list .children { list-style: none; padding-left: 16px; }
.comment-body { padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.comment-meta { font-size: 11px; color: var(--muted); }
.comment-form { display: flex; flex-direction: column; gap: 12px; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; box-sizing: border-box; }
.comment-form .submit { font-family: var(--font-heading); font-weight: 800; font-size: 14px; background: var(--bc-purple); color: #fff; border: 0; padding: 8px 14.4px; cursor: pointer; }
.comment-form .submit:hover { background: var(--bc-purple-700); }

/* ---- 1024px and below: four columns become two, three become two, sidebars drop below ---- */
@media (max-width: 1024px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-top, .home-bo, .art-grid, .profile-body, .video-grid { grid-template-columns: minmax(0, 1fr); }
  .home-bo { gap: 0; }
  .trending { margin-top: 12px; }
  .art-grid { gap: 44px; }
  .nav__links { gap: 10px 18px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .fbrand { grid-column: 1 / -1; }
}

/* ---- 640px and below: the phone layouts (1d, 1j) ---- */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .wrap { padding-top: 16px; }
  .site-header { display: grid; grid-template-columns: 36px 1fr 36px; gap: 8px; padding: 6px 12px; }
  .drawer-toggle { display: inline-flex; }
  .site-header .logo { margin: 0 auto; }
  .site-header .logo img { width: 124px; }
  .nav__links, .nav__subscribe { display: none; }
  .search-toggle { border-color: transparent; }
  .sec { margin: 28px 0 14px; }
  .sec--list, .sec--related { margin-bottom: 0; }
  .lead { gap: 10px; }
  .lead h1 { font-size: 26px; line-height: 1.1; }
  .lead .dek { font-size: 15px; }
  .trend { padding: 12px 0; }
  .trend__n { font-size: 24px; }
  .trend .meta { display: none; }
  /* Latest and related as 96px square-thumbnail rows */
  .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grid-3 .card-s { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
  .grid-3 .card-s .media { aspect-ratio: 1; }
  .grid-3 .card-s__text { gap: 4px; }
  .grid-3 .card-s .kicker { font-size: 10px; }
  .grid-3 .card-s .t19, .grid-3 .card-s .t17 { font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.3; }
  .grid-3 .card-s .meta { font-size: 11px; }
  .grid-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid-reviews .card-r { gap: 8px; }
  .grid-reviews .stars { font-size: 13px; }
  .grid-reviews .card-title { font-size: 16px; }
  .grid-reviews .card-meta { display: none; }
  /* videos as 128px rows with a 26px play square */
  .grid-videos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grid-videos .card-v { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
  .grid-videos .play { width: 26px; height: 26px; }
  .grid-videos .play svg { width: 12px; height: 12px; }
  .grid-videos .t15 { font-size: 14px; }
  /* box office: Film, Weekend, Total */
  .bo__head, .bo__row { grid-template-columns: 2fr 1fr 1fr; }
  .bo__wk, .bo__ch { display: none; }
  .bo__head { font-size: 10px; }
  .bo__row { font-size: 13px; padding: 10px 0; }
  .grid-4 { gap: 16px; }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  /* article */
  .art { gap: 14px; }
  .art h1 { font-size: 30px; line-height: 1.08; }
  .standfirst { font-size: 16px; }
  .byline { gap: 10px; padding: 12px 0; flex-wrap: wrap; }
  .byline__avatar, .byline__avatar img { width: 32px; height: 32px; }
  .byline__actions { margin-left: 0; width: 100%; }
  .entry { font-size: 16px; line-height: 1.6; gap: 16px; }
  .entry blockquote, .entry .wp-block-quote, .entry .wp-block-pullquote { font-size: 22px; padding: 14px 0; margin: 8px 0; }
  .verdict { font-size: 19px; }
  .stars--big { font-size: 20px; }
  /* archive, profile, video, about */
  .archive-head, .profile, .feat-review, .about-intro, .contact-grid, .subscribe { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .archive-head h1, .profile__text h1 { font-size: 40px; }
  .feat-review h2 { font-size: 30px; }
  .feat-review .media { max-width: 240px; }
  .filters { gap: 16px; }
  .filters__count { margin-left: 0; flex-basis: 100%; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .li-wide { grid-template-columns: 112px 1fr; gap: 12px; padding: 12px 0; }
  .li-wide .t21 { font-size: 17px; }
  .vlead h1 { font-size: 26px; }
  .upnext { grid-template-columns: 128px 1fr; }
  .about { padding-top: 24px; }
  .about-intro h1 { font-size: 38px; }
  .stats, .team { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stat__v { font-size: 36px; }
  .team .person { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; align-items: start; }
  .team .person .media { grid-row: span 2; }
  .team .person .meta { margin-top: 0; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact .field { grid-column: 1 / -1; }
  .empty h1 { font-size: 32px; }
  /* the phone footer: the wordmark, a wrapping row of links, the copyright */
  .site-footer { margin-top: 40px; padding: 28px 16px 20px; }
  .site-footer__grid { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .fbrand { flex-basis: 100%; margin-bottom: 8px; }
  .wordmark { font-size: 28px; }
  .fbrand p { display: none; }
  .fcol { display: contents; }
  .fcol h6 { display: none; }
  .site-footer__bar { margin-top: 16px; padding-top: 12px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }