/* The page: one container for the bar and both tabs, type and rules rather than boxes, one film.
   Scale: page title 52, version and section titles 30, subheads 21, text 17, captions 13. Hanken
   Grotesk throughout; the monospaced face only for version numbers and timings. */
.hub-page [hidden] { display:none !important; }
.hub-page {
  --hub-ink:#15151a; --hub-soft:#3b3b44; --hub-second:#4a4a55; --hub-muted:#63636e;
  --hub-rule:rgba(20,20,30,.14); --hub-rule-soft:rgba(20,20,30,.12); --hub-rule-strong:rgba(20,20,30,.16);
  --hub-magenta:#d6225f; --hub-gutter:32px; --hub-bar:64px;
  --hub-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}
.hub-wrap { width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--hub-gutter); }
.hub-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hub-skip { position:absolute; top:8px; left:16px; z-index:100; padding:8px 12px; background:var(--bg); color:var(--hub-ink);
  transform:translateY(-200%); }
.hub-skip:focus { transform:none; }

/* ─────────────────────────────────────────────── the bar: brand, tabs beside it, language */
.hub-page .hub-bar { backdrop-filter:none; background:var(--bg); border-bottom:1px solid var(--hub-rule-soft); }
.hub-bar__inner { display:flex; align-items:center; gap:40px; min-height:var(--hub-bar); }
.hub-brand { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--hub-ink); text-decoration:none;
  font-size:17px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.hub-brand b { font-weight:400; }
.hub-brand__mark { flex:none; }
.hub-tabs { display:flex; gap:28px; align-self:stretch; }
.hub-tab { display:flex; align-items:center; gap:7px; border:0; padding:0; background:none; cursor:pointer;
  color:var(--hub-second); font:500 15px/1 var(--sans); box-shadow:inset 0 -2px 0 transparent; }
/* the label keeps the width of its bold form, so selecting a tab moves nothing */
.hub-tab > [data-label] { display:inline-grid; }
.hub-tab > [data-label]::after { content:attr(data-label); grid-area:1 / 1; height:0; visibility:hidden; overflow:hidden; font-weight:600; }
.hub-tab:hover { color:var(--hub-ink); }
.hub-tab[aria-selected="true"] { color:var(--hub-ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--hub-magenta); }
.hub-dot { display:flex; flex:none; }
.hub-dot__mark { width:6px; height:6px; border-radius:3px; background:var(--hub-magenta); }
/* the language pill of the detail page; each button still offers 44 px to a finger */
.hub-langs { display:flex; flex:none; margin-left:auto; padding:3px; border:1px solid var(--hub-rule-strong); border-radius:999px; }
.hub-lang-btn { display:grid; place-items:center; min-width:44px; height:44px; margin-block:-7px; padding:0; border:0; background:none;
  color:var(--hub-muted); font:700 12px/1 var(--sans); cursor:pointer; }
.hub-lang-btn > span { display:grid; place-items:center; height:30px; padding:0 14px; border-radius:999px; }
.hub-lang-btn:hover { color:var(--hub-ink); }
.hub-lang-btn.active > span { background:var(--hub-ink); color:#fff; }

/* ─────────────────────────────────────────────── the page */
.hub-page .filmpage { max-width:1240px; padding:0 var(--hub-gutter) 72px; font-size:17px; line-height:1.6; color:var(--hub-ink); }
.hub-page .filmpage:focus { outline:none; }
.hub-hero { padding-top:72px; }
.hub-hero h1 { margin:0; max-width:880px; font-size:clamp(32px, 5.2vw, 52px); line-height:1.08; font-weight:700; letter-spacing:-.02em; }
/* Discover's title: one sentence per line, on two lines across the column */
#panel-discover .hub-hero h1 { max-width:none; }
.hub-title-line { display:block; text-wrap:balance; }
.hub-lead { margin:20px 0 0; max-width:720px; font-size:21px; line-height:1.5; color:var(--hub-second); text-wrap:pretty; }
.hub-arrow::after { content:''; display:inline-block; width:.95em; height:.95em; margin-left:.3em; vertical-align:-.12em; background:currentColor;
  -webkit-mask:var(--hub-arrow) center / contain no-repeat; mask:var(--hub-arrow) center / contain no-repeat; }
.hub-page :is(.hub-moment, .hub-detail-link) { color:var(--hub-ink); font-weight:600; text-decoration:none; }
.hub-page :is(.hub-moment, .hub-detail-link):hover { color:var(--hub-magenta); }

/* the film: the app window keeps the column's edges; its control waits at the window's center */
.hub-film { margin:48px 0 0; scroll-margin-top:calc(var(--hub-bar) + 24px); }
.hub-film-screen { position:relative; }
.hub-player { position:relative; min-width:0; font-size:16px; }
.hub-player .fit { overflow:clip; }
/* the app window sits 21 px inside the stage's edge (its 20 px inset and the stage's 1 px border):
   the stage is widened and shifted so the window's edges are the column's */
.hub-page:not(.embed):not(.bare) .hub-player:not(.hub-expanded) .fit { width:calc(100% * 1280 / 1240); margin-left:calc(100% * -21 / 1240); }
.hub-page:not(.embed) .hub-player:not(.hub-expanded) :is(.transport, .hub-player-note) { display:none; }
.hub-page:not(.embed):not(.bare) .bigplay { display:none !important; }
.hub-page .hub-player .fit { cursor:pointer; }
.hub-play { z-index:2; display:flex; align-items:center; gap:10px;
  min-height:52px; padding:0 22px 0 18px; border:0; border-radius:999px; background:var(--hub-ink); color:#fff; cursor:pointer;
  font:600 16px/1 var(--sans); white-space:nowrap; }
@media (min-width:601px) {
  /* at rest (to watch, resume or watch again), the control sits at the center of the app window,
     whose center is 328 px down the 720 px stage */
  .hub-play { position:absolute; left:50%; top:calc(100% * 328 / 720); transform:translate(-50%, -50%);
    box-shadow:0 18px 40px -18px rgba(21,21,26,.6), 0 2px 4px rgba(21,21,26,.2); }
  /* while the film plays, it steps aside to the window's lower right corner and shows only when
     the film is pointed at or the control has the keyboard; a click on the film pauses it too */
  .hub-play[data-mode="pause"] { left:auto; top:auto; right:20px; bottom:calc(100% * 79 / 720 + 20px); transform:none;
    opacity:0; transition:opacity .2s ease; }
  .hub-film-screen:hover .hub-play[data-mode="pause"], .hub-play[data-mode="pause"]:focus-visible { opacity:1; }
}
.hub-play__icon { width:18px; height:18px; flex:none; fill:currentColor; stroke:currentColor; }
.hub-play[data-mode="replay"] .hub-play__icon { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hub-play__length { font-weight:400; color:rgba(255,255,255,.78); }
.hub-play:hover { background:#000; }
.hub-play:disabled { cursor:default; }
/* on a phone, the film's still at its poster frame, cut to the app window (no ground around it) */
.hub-poster { display:none; overflow:hidden; aspect-ratio:1240 / 626; border-radius:4px; }
.hub-poster-image { display:block; width:calc(100% * 1280 / 1240); max-width:none; height:auto;
  margin:calc(100% * -14 / 1240) 0 0 calc(100% * -20 / 1240); cursor:pointer; }
.hub-chapters { margin:28px 0 0; }
.hub-chapters ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.hub-chapter { display:block; width:100%; min-height:44px; padding:12px 0 4px; border:0; border-top:2px solid var(--hub-rule-strong);
  background:none; color:var(--hub-ink); text-align:left; cursor:pointer; font:600 16px/1.35 var(--sans); text-wrap:balance; }
.hub-chapter-time { display:block; margin-bottom:4px; color:var(--hub-muted); font:500 12px/1.5 var(--mono); font-variant-numeric:tabular-nums; }
.hub-chapter:hover .hub-chapter-name { color:var(--hub-magenta); }
.hub-chapter[aria-current] { border-top-color:var(--hub-magenta); }
.hub-caption { margin:16px 0 0; max-width:36em; color:var(--hub-muted); font-size:13px; line-height:1.5; }
.hub-cta { display:flex; align-items:flex-start; gap:14px; margin:40px 0 0; color:var(--hub-second); font-size:21px; line-height:1.4; text-wrap:pretty; }
.hub-cta-mark { flex:none; width:24px; height:24px; margin-top:calc((1.4em - 24px) / 2); }
.hub-cta strong { color:var(--hub-ink); font-weight:600; }

/* the four questions, to read: a ruled fold, closed until it is asked for */
.hub-questions { margin-top:96px; }
.hub-fold { border-block:1px solid var(--hub-rule); }
.hub-fold > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; align-items:center; padding:28px 0;
  list-style:none; cursor:pointer; }
.hub-fold > summary::-webkit-details-marker { display:none; }
.hub-questions h2 { grid-column:1; margin:0; font-size:30px; line-height:1.2; font-weight:700; letter-spacing:-.01em; }
.hub-section-lead { grid-column:1; margin:6px 0 0; color:var(--hub-second); }
/* the drawn mark of a fold, as on the improvements of a version: a plus that loses its upright when open */
.hub-fold > summary::after { content:''; grid-column:2; grid-row:1 / span 2; width:18px; height:18px; color:var(--hub-muted);
  background:linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat,
             linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat;
  transition:background-size .2s ease; }
.hub-fold[open] > summary::after { background-size:18px 2px, 2px 0; }
.hub-fold > summary:hover :is(h2, .hub-section-lead), .hub-fold > summary:hover::after { color:var(--hub-magenta); }
.hub-question-list { margin-top:0; }
.hub-question { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px; padding:28px 0; border-top:1px solid var(--hub-rule-soft); }
.hub-question h3 { grid-column:span 5; margin:0; font-size:21px; line-height:1.4; font-weight:600; text-wrap:pretty; }
.hub-question-body { grid-column:span 7; min-width:0; }
.hub-question-body p { margin:0 0 10px; max-width:35em; color:var(--hub-soft); text-wrap:pretty; }
.hub-question-body .hub-figures { color:var(--hub-muted); }
.hub-moment { display:inline-flex; align-items:center; min-height:44px; font-size:15px; }
/* what the film does not show, in view whether the fold is open or not, across the questions' column */
.hub-also { margin:32px 0 0; color:var(--hub-soft); text-wrap:pretty; }

/* ─────────────────────────────────────────────── What's new: a journal without images */
#panel-updates .hub-hero { padding-bottom:56px; }
.hub-versions { border-bottom:1px solid var(--hub-rule); }
.hub-entry { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:32px; padding:40px 0 48px; border-top:1px solid var(--hub-rule);
  scroll-margin-top:calc(var(--hub-bar) + 24px); }
.hub-entry-meta { grid-column:span 3; min-width:0; }
.hub-entry-date { display:block; font-size:15px; font-weight:600; line-height:1.5; }
.hub-entry-id { display:block; color:var(--hub-muted); font:500 13px/1.6 var(--mono); }
.hub-entry-tools { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:8px 0 0 -12px; }
.hub-copy-link { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:none; color:var(--hub-muted); cursor:pointer; }
.hub-copy-link:hover, .hub-copy-link[data-state="copied"] { color:var(--hub-ink); }
.hub-copy-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hub-copy-note { color:var(--hub-muted); font-size:13px; line-height:1.5; }
.hub-copy-note:empty { display:none; }
.hub-link-input { display:block; width:100%; margin-top:6px; padding:8px; border:1px solid var(--hub-rule-strong); background:none; color:var(--hub-ink); font:13px var(--mono); }
.hub-entry-body { grid-column:4 / span 7; min-width:0; }
.hub-entry-title { margin:0; font-size:30px; line-height:1.2; font-weight:700; letter-spacing:-.01em; }
.hub-summary { margin:12px 0 0; max-width:34em; color:var(--hub-soft); font-size:19px; line-height:1.55; text-wrap:pretty; }
.hub-items { display:grid; gap:12px; max-width:33em; margin:24px 0 0; padding:0; list-style:none; }
.hub-items li { text-wrap:pretty; }
.hub-items strong { font-weight:600; }
.hub-items span { color:var(--hub-soft); }
.hub-more-label { margin:28px 0 0; color:var(--hub-second); font-size:15px; font-weight:600; }
.hub-more { display:grid; gap:6px; max-width:37em; margin:8px 0 0; padding-left:20px; color:var(--hub-soft); font-size:16px; line-height:1.55; }
.hub-more li { text-wrap:pretty; }
.hub-more li::marker { color:var(--hub-muted); }
.hub-more-toggle { display:flex; width:max-content; align-items:center; min-height:44px; margin-top:4px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--hub-ink); font:600 15px var(--sans); }
.hub-more-toggle:hover { color:var(--hub-magenta); }
.hub-detail-link { display:flex; width:max-content; max-width:100%; align-items:center; min-height:44px; margin-top:16px; font-size:16px; }
.hub-more-toggle + .hub-detail-link { margin-top:4px; }
#panel-updates > .hub-cta { margin-top:56px; }

/* focus, shared */
.hub-page :is(.hub-brand, .hub-tab, .hub-chapter, .hub-play, .hub-close-film, .hub-copy-link, .hub-more-toggle, .hub-moment,
  .hub-detail-link, .hub-skip, .hub-fold > summary, input):focus-visible { outline:2px solid var(--hub-magenta); outline-offset:4px; }
.hub-page .hub-lang-btn:focus-visible { outline:none; }
.hub-page .hub-lang-btn:focus-visible > span { outline:2px solid var(--hub-magenta); outline-offset:2px; }
.hub-page .hub-player :is(.seg, .pp):focus-visible { outline:2px solid var(--hub-magenta); outline-offset:4px; }
.hub-page button:disabled { cursor:default; }

/* the film full screen on a phone */
.hub-close-film { display:none; }
.hub-player:fullscreen { display:flex; flex-direction:column; justify-content:center; background:var(--bg); padding:16px; overflow:auto; }
.hub-player:fullscreen .fit { width:min(100%, calc((100vh - 140px) * 16 / 9)); margin-inline:auto; flex:none; }
.hub-player:fullscreen .transport { width:100%; max-width:1000px; margin-inline:auto; }
.hub-player:fullscreen .hub-close-film { display:block; align-self:flex-end; }
.hub-close-film { min-height:44px; padding:10px 18px; border:1px solid var(--hub-ink); background:none; color:var(--hub-ink); cursor:pointer; font:600 14px var(--sans); }
.hub-close-film:hover { background:var(--hub-ink); color:var(--bg); }
.hub-player-note { margin:0 0 8px; color:var(--hub-muted); font-size:13px; text-align:right; }

/* the player alone */
.hub-page.embed .filmpage, .hub-page.bare .filmpage { padding:0; max-width:none; }
.hub-page.embed .hub-film, .hub-page.bare .hub-film { margin:0; }
.hub-page.embed .hub-player-note { margin:0; padding:4px 12px; }
.hub-page.embed .hub-player .fit { cursor:default; }

@media (max-width:899px) {
  .hub-entry { grid-template-columns:minmax(0,1fr); row-gap:12px; padding:32px 0 40px; }
  .hub-entry-meta, .hub-entry-body { grid-column:1; }
  .hub-entry-meta { display:flex; align-items:center; flex-wrap:wrap; column-gap:12px; }
  .hub-entry-tools { margin:0 0 0 -8px; }
  .hub-question { grid-template-columns:minmax(0,1fr); row-gap:10px; }
  .hub-question h3, .hub-question-body { grid-column:1; }
  .hub-chapters ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .hub-page { --hub-gutter:16px; }
  .hub-page .hub-bar { position:static; }
  .hub-film, .hub-entry { scroll-margin-top:16px; }
  .hub-bar__inner { flex-wrap:wrap; gap:0 12px; min-height:0; }
  .hub-brand { min-height:56px; font-size:16px; gap:8px; }
  .hub-tabs { order:3; flex-basis:100%; gap:24px; height:44px; }
  .hub-lang-btn > span { padding:0 12px; }
  .hub-hero { padding-top:32px; }
  .hub-hero h1 { line-height:1.12; letter-spacing:-.015em; }
  .hub-lead { margin-top:14px; font-size:17px; }
  .hub-film { margin-top:28px; }
  .hub-player { display:none; }
  .hub-player.hub-expanded { display:block; }
  .hub-player.hub-expanded .hub-close-film { display:block; margin:0 0 12px auto; }
  .hub-player.hub-expanded :is(.transport, .hub-player-note) { display:flex; }
  .hub-player.hub-expanded .hub-player-note { display:block; }
  .hub-poster { display:block; }
  .hub-film-screen:has(.hub-expanded) .hub-poster { display:none; }
  .hub-play { position:static; justify-content:center; width:100%; min-height:48px; margin-top:12px; }
  .hub-chapters { margin-top:20px; }
  .hub-chapters ol { display:block; border-bottom:1px solid var(--hub-rule-soft); }
  .hub-chapter { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:16px; min-height:48px;
    padding:8px 0; border-top:1px solid var(--hub-rule-soft); }
  .hub-chapter[aria-current] { border-top-color:var(--hub-rule-soft); }
  .hub-chapter[aria-current] .hub-chapter-name { color:var(--hub-magenta); }
  .hub-chapter-time { margin:0; flex:none; }
  .hub-caption { margin-top:12px; }
  .hub-cta { margin-top:32px; gap:12px; font-size:18px; }
  .hub-cta-mark { width:20px; height:20px; margin-top:calc((1.4em - 20px) / 2); }
  .hub-questions { margin-top:56px; }
  .hub-fold > summary { column-gap:16px; padding:20px 0; }
  .hub-questions h2 { font-size:24px; line-height:1.25; }
  .hub-question { padding:20px 0; }
  .hub-question h3 { font-size:18px; }
  .hub-question-body p { font-size:16px; }
  #panel-updates .hub-hero { padding-bottom:32px; }
  .hub-entry-title { font-size:24px; line-height:1.25; }
  .hub-summary { font-size:17px; }
  .hub-items, .hub-more { font-size:16px; }
  .hub-page :is(.hub-entry-body, .hub-question-body) { overflow-wrap:anywhere; }
  .hub-page.embed .hub-player, .hub-page.bare .hub-player { display:block; }
}
@media (min-width:900px) {
  /* while a long version is read, its date stays in the margin */
  .hub-entry-meta { position:sticky; top:calc(var(--hub-bar) + 24px); align-self:start; }
}
@media (prefers-reduced-motion:reduce) {
  .hub-page .hub-player, .hub-page .hub-player * { scroll-behavior:auto; }
  .hub-page .hub-play, .hub-page .hub-fold > summary::after { transition:none; }
}