/* gta6.css — /gta-6, the GTA 6 hub (owner's Direction D design, 2026-11-12).
   Loaded by gta-6.html ONLY, after styles.css, and scoped under .g6shell /
   .g6 so nothing here reaches another page. scripts/gta6_hub.py writes the
   markup; this file only dresses it. House type only: Inter for everything,
   Playfair for the nameplate (two fonts, upright). */

.g6shell {
  --desk: #ff3d9a;
  --desk-strip: #ff3d9a;
  --g6-ground: #08080f;
  --g6-panel: #100f1b;
  --g6-panel-2: #0e0d18;
  --g6-line: #22202f;
  --g6-line-2: #262438;
  --g6-pink: #ff3d9a;
  --g6-pink-soft: #ff8cc4;
  --g6-text: #fff;
  --g6-soft: #e6e3f2;
  --g6-mute: #a7a3bd;
  --g6-faint: #9a95b3;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--g6-ground);
}
/* Playfair's 900 for the nameplate in the sign-up band: same file as
   fonts.css, a wider declared range (ent.css does the same). */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800 900; font-display: swap; src: url("fonts/playfair-display-v40-latin.woff2") format("woff2"); 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; }

.g6 { display: block; color: var(--g6-text); font-family: var(--ui); -webkit-font-smoothing: antialiased; background: var(--g6-ground); }
.g6 a { color: inherit; text-decoration: none; }
:where(.g6) :is(h1, h2, h3, p, ol, dl, dd) { margin: 0; padding: 0; }
.g6 ol { list-style: none; }
.g6 li { margin: 0; }
.g6-in { box-sizing: border-box; width: 100%; max-width: 1348px; margin: 0 auto; padding: 0 24px; }
.g6-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g6 :focus-visible { outline: 3px solid var(--g6-pink-soft); outline-offset: 3px; }

/* ---- the hero ---- */
.g6-hero { position: relative; height: 540px; overflow: hidden; background: #1b1830; }
.g6-hero-art, .g6-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.g6-hero-art img { object-fit: cover; object-position: 70% 30%; }
.g6-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,15,.92) 0%, rgba(8,8,15,.72) 32%, rgba(8,8,15,0) 62%), linear-gradient(0deg, rgba(8,8,15,.85) 0%, rgba(8,8,15,0) 30%); }
.g6-credit { position: absolute; right: 28px; bottom: 14px; z-index: 3; font: 500 12px/1.3 var(--ui); color: rgba(255,255,255,.72); }
.g6-hin { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 56px; }
.g6-htxt { max-width: 600px; }
.g6-eyebrow { font: 800 15px/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--g6-pink); }
.g6-h1 { font: 800 84px/.98 var(--ui); letter-spacing: -.036em; margin-top: 16px !important; color: #fff; }
.g6-sub { font: 400 20px/1.45 var(--ui); color: var(--g6-soft); margin-top: 20px !important; max-width: 470px; }
.g6-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.g6-btn { display: inline-flex; align-items: center; gap: 10px; font: 800 15px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; padding: 18px 26px; border-radius: 6px; background: var(--g6-pink); color: #fff !important; }
.g6-btn:hover { background: #ff5aa9; }
.g6-ghost { background: rgba(8,8,15,.4); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.g6-ghost:hover { background: rgba(8,8,15,.65); }
.g6-bell { width: 12px; height: 13px; background: #fff; border-radius: 6px 6px 2px 2px; display: inline-block; }
.g6-launch { flex: none; background: rgba(10,9,20,.82); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 22px 26px; min-width: 330px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.g6-launch-k { font: 700 13px/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: #b9b4d0; }
.g6-launch b { display: block; font: 800 24px/1.2 var(--ui); margin-top: 8px; }
.g6-plats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.g6-plats em { font: 700 15px/1 var(--ui); font-style: normal; padding: 9px 12px; border-radius: 6px; background: rgba(255,255,255,.1); }

/* ---- the ticker ---- */
.g6-ticker { background: var(--g6-panel-2); border-top: 1px solid #1e1c2c; border-bottom: 1px solid #1e1c2c; }
.g6-ticker .g6-in { display: flex; align-items: center; min-height: 60px; gap: 18px; }
.g6-lbl { flex: none; display: flex; align-items: center; gap: 9px; font: 800 14px/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--g6-pink); padding-right: 18px; border-right: 1px solid #2e2b40; }
.g6-lbl i { width: 10px; height: 10px; border-radius: 50%; background: var(--g6-pink); box-shadow: 0 0 0 4px rgba(255,61,154,.25); }
.g6-hl { font: 600 17px/1.3 var(--ui); }
.g6-rm { flex: none; font: 600 15px/1 var(--ui); text-decoration: underline !important; text-underline-offset: 3px; color: #d9d6e8 !important; }
.g6-ts { flex: none; margin-left: auto; font: 500 14px/1 var(--ui); color: var(--g6-faint); }

/* ---- the grid ---- */
.g6-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; padding-top: 52px; padding-bottom: 70px; }
.g6-shead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
.g6-shead h2 { font: 800 32px/1 var(--ui); letter-spacing: -.025em; color: #fff; }
.g6-shead p { font: 400 16px/1.3 var(--ui); color: var(--g6-mute); }
.g6-va { margin-left: auto; font: 700 15px/1 var(--ui); }
.g6-va:hover { color: var(--g6-pink-soft); }
.g6-rule { height: 1px; background: var(--g6-line); margin: 44px 0 40px; }
.g6-empty { font: 400 17px/1.5 var(--ui); color: var(--g6-mute); }

/* ---- the clips ---- */
.g6-clips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
#g6-allclips { padding-bottom: 56px; }
.g6-face { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: #1a1726; }
.g6-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.g6-face:hover img { transform: scale(1.04); }
.g6-play { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(8,8,15,.75); border: 1.5px solid rgba(255,255,255,.8); }
.g6-play::after { content: ''; position: absolute; left: 15px; top: 11px; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.g6-dur { position: absolute; right: 10px; bottom: 12px; font: 700 13px/1 var(--ui); color: #fff; background: rgba(8,8,15,.8); padding: 5px 7px; border-radius: 5px; }
.g6-spoil { position: absolute; left: 10px; top: 10px; font: 800 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #14111f; background: #ffd447; padding: 6px 8px; border-radius: 5px; }
.g6-spoiler .g6-face img { filter: blur(14px) brightness(.7); }
.g6-who { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; font: 600 14px/1.2 var(--ui); color: var(--g6-mute); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g6-pf { flex: none; width: 20px; height: 20px; border-radius: 5px; background: #fff; color: #08080f; font: 800 11px/20px var(--ui); text-align: center; font-style: normal; }
.g6-cap { font: 600 16px/1.35 var(--ui); margin-top: 8px !important; color: #f1eff8; }

/* ---- the stories ---- */
.g6-newpill { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--ui); color: var(--g6-pink-soft); background: rgba(255,61,154,.14); padding: 8px 12px; border-radius: 999px; align-self: center; }
.g6-newpill[hidden] { display: none; }
.g6-newpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--g6-pink); }
.g6-stories { display: grid; grid-template-columns: 1.12fr 1fr; gap: 26px; }
.g6-stories.g6-solo { grid-template-columns: 1fr; }
.g6-kick { font: 800 13px/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--g6-pink); }
.g6-by { font: 500 14px/1 var(--ui); color: var(--g6-mute); margin-top: 14px !important; }
.g6-leadcard { position: relative; border-radius: 12px; overflow: hidden; min-height: 470px; border: 1px solid #2a2740; background: #15131f; }
.g6-leadcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g6-lshade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,15,.96) 0%, rgba(8,8,15,.7) 36%, rgba(8,8,15,0) 62%); }
.g6-ltxt { position: absolute; left: 28px; right: 28px; bottom: 26px; }
.g6-ltxt h3 { font: 800 32px/1.12 var(--ui); letter-spacing: -.025em; margin-top: 10px; }
.g6-ltxt .g6-dek { font: 400 17px/1.5 var(--ui); color: #dad6ea; margin-top: 10px; }
.g6-leadcard h3 a::after, .g6-row h3 a::after { content: ''; position: absolute; inset: 0; }
.g6-leadcard h3 a:hover, .g6-row h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.g6-rows { display: flex; flex-direction: column; }
.g6-row { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--g6-line); }
.g6-row.g6-row-solo { grid-template-columns: 1fr; }
.g6-row:last-child { border-bottom: 0; margin-bottom: 0; }
.g6-thumb { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 11; background: #15131f; }
.g6-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g6-rtxt .g6-kick { font-size: 12px; }
.g6-rtxt h3 { font: 800 19px/1.25 var(--ui); letter-spacing: -.012em; margin-top: 7px; }
.g6-rtxt .g6-dek { font: 400 15px/1.45 var(--ui); color: #b9b4d0; margin-top: 6px; }
.g6-rtxt .g6-by { font-size: 13px; margin-top: 10px !important; }

/* ---- the side cards ---- */
.g6-aside { display: flex; flex-direction: column; gap: 24px; }
.g6-card { background: var(--g6-panel); border: 1px solid var(--g6-line-2); border-radius: 12px; overflow: hidden; }
.g6-card h2 { font: 800 22px/1 var(--ui); letter-spacing: -.012em; color: #fff; }
.g6-trendart { position: relative; height: 170px; overflow: hidden; }
.g6-trendart img { width: 100%; height: 100%; object-fit: cover; }
.g6-tin { padding: 22px 24px 24px; }
.g6-trend h2 { color: var(--g6-pink); text-transform: uppercase; letter-spacing: .04em; font-size: 19px; }
.g6-trend ol { margin-top: 12px; }
.g6-trend li { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--g6-line); }
.g6-trend li b { font: 800 26px/1 var(--ui); color: var(--g6-pink); min-width: 18px; }
.g6-trend li a { display: block; font: 600 16px/1.32 var(--ui); }
.g6-trend li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g6-trend li time { display: block; font: 500 13px/1 var(--ui); color: var(--g6-faint); margin-top: 7px; }
.g6-how { font: 400 12px/1.4 var(--ui); color: #8a85a3; margin-top: 12px !important; }
.g6-vall { display: block; text-align: center; margin-top: 18px; padding: 14px; border: 1.5px solid #fff; border-radius: 6px; font: 700 15px/1 var(--ui); }
.g6-vall:hover { background: rgba(255,255,255,.08); }
.g6-basics { padding: 24px; }
.g6-basics dl { display: grid; grid-template-columns: 90px 1fr; gap: 12px 10px; margin-top: 16px; }
.g6-fact { display: contents; }
.g6-fact[hidden] { display: none; }
.g6-basics dt { font: 600 14px/1.3 var(--ui); color: var(--g6-faint); }
.g6-basics dd { font: 700 16px/1.3 var(--ui); }
.g6-src { font: 400 13px/1.45 var(--ui); color: #8a85a3; margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--g6-line); }
.g6-src a { text-decoration: underline !important; text-underline-offset: 2px; }
.g6-src a:hover { color: #fff; }

/* ---- every story, every clip ---- */
.g6-all { padding-bottom: 56px; }
.g6-all h2 { font: 800 26px/1 var(--ui); letter-spacing: -.02em; margin-bottom: 14px !important; }
.g6-all ol { columns: 2; column-gap: 44px; }
.g6-all li { break-inside: avoid; display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--g6-line); font: 600 16px/1.35 var(--ui); }
.g6-all time { flex: none; width: 92px; font: 500 13px/1.6 var(--ui); color: var(--g6-faint); }
.g6-all a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g6-more { font: 400 14px/1.4 var(--ui); color: var(--g6-mute); margin-top: 14px !important; }
.g6-more a { text-decoration: underline !important; }

/* ---- the sign-up band ---- */
.g6-signup { position: relative; min-height: 150px; overflow: hidden; border-top: 1px solid var(--g6-line); }
.g6-signart, .g6-signart img { position: absolute; inset: 0; width: 100%; height: 100%; }
.g6-signart img { object-fit: cover; }
.g6-fshade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,15,.94), rgba(8,8,15,.7)); }
.g6-fin { position: relative; min-height: 150px; display: flex; align-items: center; gap: 24px 60px; padding-top: 24px; padding-bottom: 24px; }
.g6-fbrand { max-width: 330px; }
.g6-fmast { font: 900 26px/1 var(--display); letter-spacing: -.01em; color: #fff; }
.g6-fbrand p:not(.g6-fmast) { font: 400 13px/1.45 var(--ui); color: var(--g6-mute); margin-top: 8px; }
.g6-fsign h2 { font: 800 19px/1.2 var(--ui); color: #fff; }
.g6-fsign p { font: 400 15px/1.4 var(--ui); color: #c9c5db; margin-top: 6px; }
.g6-field { margin: 0 0 0 auto; display: flex; align-items: stretch; background: #fff; border-radius: 6px; overflow: hidden; height: 48px; }
.g6-field input[type=email] { width: 260px; border: 0; padding: 0 18px; font: 400 15px/1 var(--ui); color: #14111f; background: #fff; outline: none; }
.g6-field input[type=email]::placeholder { color: #7d7891; }
.g6-field button { border: 0; cursor: pointer; padding: 0 22px; background: var(--g6-pink); color: #fff; font: 800 15px/1 var(--ui); }
.g6-field button:hover { background: #ff5aa9; }
.g6-hp { position: absolute; left: -9999px; }

/* ---- the clip player ---- */
.g6-player { position: fixed; inset: 0; margin: auto; height: fit-content; box-sizing: border-box; width: min(560px, 94vw); max-height: 92vh; padding: 48px 16px 16px; border: 1px solid var(--g6-line-2); border-radius: 14px; background: var(--g6-panel); color: #fff; overflow: auto; }
.g6-player::backdrop { background: rgba(4,4,10,.82); }
.g6-player .g6-close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font: 400 26px/36px var(--ui); text-align: center; cursor: pointer; }
.g6-player .g6-close:hover { background: rgba(255,255,255,.22); }
.g6-player .post-embed { margin: 0; }
.g6-player .post-embed-frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; }

/* ---- the trending shorts (owner, 2026-11-12): a shelf of tall cards,
   reserved in Rockstar's art and filled by gta6.js from /api/gta6-shorts ---- */
.g6-shorts { background: linear-gradient(180deg, #0e0d18 0%, var(--g6-ground) 100%); border-bottom: 1px solid #1e1c2c; padding: 40px 0 36px; }
.g6-shelf { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 24px; margin: 0 -24px; padding: 2px 24px 10px; scrollbar-width: thin; scrollbar-color: #3a3650 transparent; }
.g6-shelf[hidden] { display: none; }
.g6-short { flex: 0 0 176px; scroll-snap-align: start; }
.g6-sface { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #1a1726; text-align: left; color: #fff; font: inherit; }
.g6-sface:disabled { cursor: default; }
.g6-sface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.g6-sface:not(:disabled):hover img { transform: scale(1.05); }
.g6-sshade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,15,.95) 0%, rgba(8,8,15,.55) 45%, rgba(8,8,15,.1) 75%); }
.g6-sface .g6-play { left: 12px; top: 12px; bottom: auto; width: 34px; height: 34px; }
.g6-sface .g6-play::after { left: 12px; top: 8px; border-left-width: 11px; border-top-width: 8px; border-bottom-width: 8px; }
.g6-badge { position: absolute; right: 10px; top: 14px; font: 800 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; background: rgba(8,8,15,.78); color: #fff; }
.g6-badge:empty { display: none; }
.is-youtube .g6-badge { background: #ff0033; }
.is-twitch .g6-badge { background: #9146ff; }
.is-reddit .g6-badge { background: #ff4500; }
.is-x .g6-badge { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.g6-stitle { position: absolute; left: 12px; right: 12px; bottom: 34px; font: 700 15px/1.3 var(--ui); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.g6-swho { position: absolute; left: 12px; right: 12px; bottom: 12px; font: 600 12px/1.2 var(--ui); color: var(--g6-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g6-shorts[data-state="waiting"] .g6-stitle, .g6-shorts[data-state="waiting"] .g6-swho { visibility: hidden; }
.g6-short.g6-spoiler .g6-sface img { filter: blur(16px) brightness(.6); }
.g6-short.g6-spoiler .g6-stitle { filter: blur(5px); }
.g6-sface .g6-spoil { right: auto; left: 54px; top: 18px; }
.g6-rest { font: 400 15px/1.5 var(--ui); color: var(--g6-mute); margin-top: 4px !important; }
.g6-player.g6-tall { width: min(420px, 94vw); }
.g6-player.g6-tall .post-embed-frame { aspect-ratio: 9 / 16; max-height: 78vh; width: auto; margin: 0 auto; }

/* ---- the wire and the talk (owner, 2026-11-12: "THE SPOT"): reserved rows,
   filled by gta6.js from /api/gta6-shorts ---- */
.g6-wire h2, .g6-talk h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; }
.g6-live { width: 9px; height: 9px; border-radius: 50%; background: var(--g6-pink); box-shadow: 0 0 0 0 rgba(255,61,154,.6); animation: g6pulse 2s infinite; }
@keyframes g6pulse { 0% { box-shadow: 0 0 0 0 rgba(255,61,154,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,61,154,0); } 100% { box-shadow: 0 0 0 0 rgba(255,61,154,0); } }
.g6-wsub { font: 400 13px/1.4 var(--ui); color: var(--g6-faint); margin-top: 6px !important; }
.g6-wlist, .g6-tlist { margin-top: 10px; }
.g6-wlist[hidden], .g6-tlist[hidden] { display: none; }
.g6-wrow, .g6-trow { padding: 12px 0; border-bottom: 1px solid var(--g6-line); }
.g6-wrow:last-child, .g6-trow:last-child { border-bottom: 0; }
.g6-wlink, .g6-tlink { display: block; font: 600 15px/1.35 var(--ui); color: #fff; }
.g6-wlink:hover .g6-wt, .g6-tlink:hover .g6-tt { text-decoration: underline; text-underline-offset: 3px; }
.g6-wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font: 600 12px/1.2 var(--ui); color: var(--g6-faint); }
.g6-wout { color: var(--g6-pink-soft); }
.g6-ours { padding: 3px 7px; border-radius: 999px; background: rgba(255,61,154,.16); color: var(--g6-pink-soft) !important; font-weight: 800; }
.g6-ours:hover { background: rgba(255,61,154,.3); }
.g6-tby { display: block; margin-top: 5px; font: 600 12px/1.2 var(--ui); color: var(--g6-faint); }
.g6-trow.g6-spoiler .g6-tt { filter: blur(5px); }
.g6-trow.g6-spoiler:hover .g6-tt, .g6-trow.g6-spoiler:focus-within .g6-tt { filter: none; }
[data-state="waiting"] .g6-wt, [data-state="waiting"] .g6-tt { display: block; height: 1.1em; border-radius: 4px; background: rgba(255,255,255,.06); }
.g6-card .g6-rest { font: 400 14px/1.5 var(--ui); color: var(--g6-mute); margin-top: 12px !important; }
@media (prefers-reduced-motion: reduce) { .g6-live { animation: none; } }

/* ---- the frame around the page, in the page's dark ---- */
.g6shell .photo-credits { box-sizing: border-box; width: 100%; max-width: 1348px; margin: 0 auto; padding: 14px 24px 44px; border-top: 0; color: #8a85a3; background: var(--g6-ground); }
.g6shell .photo-credits p { border-top: 1px solid var(--g6-line); padding-top: 14px; }
.g6shell .photo-credits-label { color: #c9c5db; }
.g6shell footer { background: #050508; color: #aaa; border-top: 1px solid var(--g6-line); }
.g6shell footer a { color: #b8b8c6; }
.g6shell footer a:hover { color: #fff; }

/* ---- tablet ---- */
@media (max-width: 1100px) {
  .g6-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .g6-aside { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .g6-fin { flex-wrap: wrap; }
  .g6-field { margin-left: 0; }
}
@media (max-width: 960px) {
  .g6-h1 { font-size: 64px; }
  .g6-hin { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 22px; padding-bottom: 40px; }
  .g6-hero { height: 600px; }
  .g6-stories { grid-template-columns: 1fr; }
}

/* ---- phone ---- */
@media (max-width: 760px) {
  .g6-in { padding: 0 16px; }
  /* The phone hero: the art on top, the words under it on the dark ground,
     so the headline never sits on a face. */
  .g6-hero { height: auto; display: flex; flex-direction: column; background: var(--g6-ground); }
  .g6-hero-art { position: relative; inset: auto; display: block; height: 420px; }
  .g6-hero-art img { object-position: 50% 12%; }
  .g6-shade { inset: auto; top: 0; left: 0; right: 0; height: 420px; background: linear-gradient(0deg, rgba(8,8,15,1) 0%, rgba(8,8,15,.6) 22%, rgba(8,8,15,0) 48%); }
  .g6-credit { position: relative; right: auto; bottom: auto; order: 2; padding: 0 16px 14px; font-size: 11px; }
  .g6-hin { height: auto; margin-top: -84px; padding-bottom: 18px; }
  .g6-h1 { font-size: 46px; letter-spacing: -.03em; }
  .g6-eyebrow { font-size: 13px; }
  .g6-sub { font-size: 17px; margin-top: 14px !important; }
  .g6-ctas { margin-top: 22px; gap: 10px; }
  .g6-btn { padding: 15px 18px; font-size: 13px; }
  .g6-launch { min-width: 0; width: 100%; box-sizing: border-box; padding: 18px 20px; }
  .g6-launch b { font-size: 21px; }
  .g6-ticker .g6-in { flex-wrap: wrap; gap: 8px 14px; padding-top: 14px; padding-bottom: 14px; }
  .g6-lbl { border-right: 0; padding-right: 0; }
  .g6-hl { flex: 1 1 100%; order: 3; font-size: 16px; }
  .g6-rm { order: 4; font-size: 14px; }
  .g6-ts { margin-left: 0; font-size: 13px; }
  .g6-grid { padding-top: 36px; padding-bottom: 48px; }
  .g6-shead h2 { font-size: 26px; }
  .g6-shead p { flex: 1 1 100%; order: 3; font-size: 15px; }
  .g6-clips { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .g6-clips::-webkit-scrollbar { display: none; }
  .g6-clip { flex: 0 0 44vw; scroll-snap-align: start; }
  .g6-shorts { padding: 30px 0 26px; }
  .g6-shelf { margin: 0 -16px; padding: 2px 16px 8px; scroll-padding: 0 16px; gap: 10px; }
  .g6-short { flex: 0 0 40vw; }
  .g6-stitle { font-size: 14px; }
  .g6-clips-all { flex-wrap: nowrap; }
  .g6-cap { font-size: 15px; }
  .g6-rule { margin: 32px 0 28px; }
  .g6-leadcard { min-height: 420px; }
  .g6-ltxt { left: 20px; right: 20px; bottom: 20px; }
  .g6-ltxt h3 { font-size: 26px; }
  .g6-ltxt .g6-dek { font-size: 16px; }
  .g6-row { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .g6-rtxt h3 { font-size: 17px; }
  .g6-rtxt .g6-dek { display: none; }
  .g6-aside { display: flex; }
  .g6-all ol { columns: 1; }
  .g6-fin { flex-direction: column; align-items: stretch; gap: 18px; padding-top: 28px; padding-bottom: 28px; }
  .g6-field { width: 100%; }
  .g6-field input[type=email] { flex: 1; width: auto; min-width: 0; }
  .g6shell .photo-credits { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .g6-face img { transition: none; }
  .g6-face:hover img { transform: none; }
}