/* thegrandcinema.com.hk — loaded after style.css, and only on this tenant.
 *
 * States what differs and nothing else. The shared sheet already owns the
 * reset, the type scale, the theme tokens, the masthead, the drawer and the
 * prose rules; duplicating any of that here would mean fixing every layout bug
 * twice.
 *
 * The palette shift is deliberate and load-bearing. The listings site is blue,
 * bright and dense — it is a timetable. This is a review site read at length,
 * so it goes warm and dark-leaning, with the accent reserved almost entirely
 * for the score. Two sites off one database must not look like one site with a
 * different logo, or a reader who lands on both from search will assume they
 * are the same thing and trust neither.
 *
 * Every colour is defined on bare :root first, then overridden per theme, so a
 * value can never exist only inside a media query.
 */

:root{
  --accent:#b4442d;            /* projector-lamp red, not the listings blue */
  --accent-ink:#fff8f4;
  --brand-punch:#e0a33c;       /* curtain gold, used in the masthead mark */
  --g-warm:#faf7f3;            /* page ground — paper, not screen white */
  --g-panel:#ffffff;
  --g-quote:#8a6a3b;
  --g-great:#1f7a4d; --g-good:#3f7d3f; --g-mixed:#9a7420; --g-poor:#a33b2c;
}
/* System-dark. Guarded with :not([data-theme="light"]) so an explicit light
   choice still wins, matching the shared sheet's convention exactly. */
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --accent:#e8724f; --accent-ink:#1a0f0a;
    --brand-punch:#e0a33c;
    --g-warm:#12100f; --g-panel:#1a1715; --g-quote:#c9a86a;
    --g-great:#4cc38a; --g-good:#6dbf6d; --g-mixed:#d9b03c; --g-poor:#e8695a;
  }
}
:root[data-theme="dark"]{
  --accent:#e8724f; --accent-ink:#1a0f0a;
  --brand-punch:#e0a33c;
  --g-warm:#12100f; --g-panel:#1a1715; --g-quote:#c9a86a;
  --g-great:#4cc38a; --g-good:#6dbf6d; --g-mixed:#d9b03c; --g-poor:#e8695a;
}

body{background:var(--g-warm)}
.g-mast{background:var(--g-panel)}
.pagebody{max-width:1080px}

/* -- film page ----------------------------------------------------------- */

/* The backdrop sits behind the header rather than above it: a full-bleed image
   pushing the title below the fold is the single most common way a film page
   wastes its own first screen. */
.g-hero{position:relative;height:280px;margin-bottom:-190px;
  background:var(--g-hero) center/cover no-repeat;}
.g-hero-veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--g-warm) 45%, transparent) 0%,
    var(--g-warm) 92%)}
@media (max-width:640px){ .g-hero{height:190px;margin-bottom:-140px} }

.g-film{position:relative}
.g-filmhead{display:flex;gap:26px;align-items:flex-start;margin:0 0 28px}
.g-poster{width:220px;height:auto;flex:none;border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);background:var(--panel-2)}
.g-filmhead-body{min-width:0;padding-top:8px}
.g-filmhead h1{margin:0 0 4px;font-size:clamp(24px,3.4vw,38px);line-height:1.15}
.g-tagline{margin:8px 0 0;color:var(--ink-2);font-style:italic}
@media (max-width:640px){
  .g-filmhead{gap:16px}
  .g-poster{width:38vw}
}

.g-score{display:flex;align-items:baseline;gap:8px;margin:16px 0 0;flex-wrap:wrap}
.g-score b{font-size:32px;line-height:1;color:var(--band,var(--ink))}
.g-score span{color:var(--ink-3);font-size:15px}
.g-score em{font-style:normal;font-weight:600;color:var(--band,var(--ink))}
.g-score small{color:var(--ink-3);font-size:12.5px}
.g-band-great{--band:var(--g-great)}
.g-band-good{--band:var(--g-good)}
.g-band-mixed{--band:var(--g-mixed)}
.g-band-poor{--band:var(--g-poor)}
.g-band-unrated{--band:var(--ink-3)}

.g-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0}
.g-facts div{display:flex;gap:6px;align-items:baseline}
.g-facts dt{color:var(--ink-3);font-size:12.5px;margin:0}
.g-facts dd{margin:0;font-size:13.5px;font-weight:500}

.g-genres{margin:14px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.g-genres .pill{text-decoration:none}

.g-film section{margin:34px 0}
.g-film h2{font-size:19px;margin:0 0 12px}
.g-lede{color:var(--ink-2);margin:0 0 14px}

/* The composed verdict. Given a rule and weight because it is the one block on
   the page built entirely from facts, and it should read as the site speaking. */
.g-verdict{border-left:3px solid var(--accent);padding:2px 0 2px 16px}
.g-verdict p{margin:0;font-size:16.5px;line-height:1.6}

/* The generated section carries a visible notice; it must never be mistaken
   for the verdict above, so it is set quieter, not louder. */
.g-ainote{margin:12px 0 0;padding:9px 12px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink-3);font-size:12.5px;line-height:1.5}

.g-trailer{position:relative;max-width:640px;aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;background:#000}
.g-trailer iframe,.g-trailer img{width:100%;height:100%;border:0;object-fit:cover}
.g-trailer-btn{display:block;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:pointer}
.g-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;
  display:grid;place-items:center;border-radius:50%;font-size:22px;
  background:rgba(0,0,0,.6);color:#fff;pointer-events:none}

.g-people{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.g-people a,.g-people li{display:flex;gap:10px;align-items:center;
  text-decoration:none;color:inherit;min-width:0}
.g-people img,.g-noface{width:48px;height:48px;flex:none;border-radius:50%;
  object-fit:cover;background:var(--panel-2)}
.g-people b{font-size:13.5px;font-weight:600;display:block}
.g-people small{color:var(--ink-3);font-size:12px;display:block}
.g-people a:hover b{color:var(--accent)}

.g-crew{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 18px}
.g-crew li{display:flex;gap:8px;font-size:13.5px}
.g-crew span{color:var(--ink-3);flex:none}

.g-venues td:first-child{font-weight:500}
.g-offer{margin:8px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.g-offer b{font-size:13px;color:var(--ink-3);min-width:88px}

.g-quote{margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--g-quote);
  background:var(--panel-2);border-radius:0 8px 8px 0}
.g-quote p{margin:0 0 6px;font-size:14.5px;line-height:1.6}
.g-quote cite{font-style:normal;font-size:12.5px;color:var(--ink-3)}

/* -- card grids ---------------------------------------------------------- */
.g-cards{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 16px}
@media (max-width:640px){
  .g-cards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px 12px}
}
.g-card a{text-decoration:none;color:inherit;display:block}
.g-card-art{position:relative;aspect-ratio:2/3;border-radius:9px;overflow:hidden;
  background:var(--panel-2);margin-bottom:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.14)}
.g-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.g-card-noart{display:grid;place-items:center;width:100%;height:100%;
  font-size:34px;font-weight:700;color:var(--ink-3)}
.g-card-score{position:absolute;left:6px;bottom:6px;padding:2px 7px;
  border-radius:6px;font-size:12.5px;font-weight:700;
  background:rgba(0,0,0,.72);color:var(--band,#fff);backdrop-filter:blur(3px)}
.g-card-title{display:block;font-size:13.5px;line-height:1.3;font-weight:600;
  /* Two lines then ellipsis: HK release titles run long in both languages and
     a ragged grid of three-line titles destroys the row rhythm. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.g-card-meta{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.g-card a:hover .g-card-title{color:var(--accent)}
.g-card a:hover .g-card-art{box-shadow:0 8px 22px rgba(0,0,0,.24)}

/* -- people / genre indexes ---------------------------------------------- */
.g-linklist{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 18px}
.g-linklist li{display:flex;gap:8px;align-items:baseline;padding:6px 0;
  border-bottom:1px solid var(--line)}
.g-linklist a{text-decoration:none;font-weight:500}
.g-linklist small{color:var(--ink-3);font-size:12px;margin-left:auto}

.g-personhead{display:flex;gap:20px;align-items:center;margin:0 0 20px}
.g-face{width:140px;height:140px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--panel-2)}

.g-foot .foot-note{max-width:70ch}
.foot-legal{color:var(--ink-3);font-size:12px}

/* A facts panel at the head of an article: year, director, runtime. A reader
   deciding whether to spend two hours wants these before they want an opinion,
   and putting them here means the prose never stops to recite them. */
.g-facts-panel{background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 16px;margin:0 0 22px;gap:8px 26px}
.g-facts-panel dt{font-size:12px}
.g-facts-panel dd{font-size:14px}

.g-linklist-wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.g-linklist-wide li{flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 0}
.g-linklist-wide small{margin-left:0;line-height:1.4}

/* The cheapest venue is called out rather than left to be found by scanning a
   price column — it is the single most acted-on fact in the table. */
.g-venues .is-cheapest{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.g-cheap-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;
  font-size:11px;font-weight:600;background:var(--accent);color:var(--accent-ink)}
.pill-sm{font-size:11px;padding:1px 6px;margin-right:3px}
.g-note{color:var(--ink-3);font-size:12.5px;margin:10px 0 0;max-width:70ch}

/* Where you are. An underline rather than a background: the nav sits on the
   masthead's own panel colour, and a filled pill there reads as a button. */
.g-mast .mainnav a.is-here{color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--accent)}
.mobnav a.is-here{color:var(--accent);font-weight:600}