/* 7th Standard — component styles. Every colour, size, radius and gap comes from tokens.css (var(--…) and the type
   classes); this sheet only arranges them. Prefix: s7-. A component switches ground with data-theme="dark" on itself. */

/* ---------------------------------------------------------------- per-ground switches (inherit through nesting) */
:root, [data-theme="light"] {
  --s7-tile-deep: inline; --s7-tile-light: none; color-scheme: light;
  --s7-grain-blend: multiply; --s7-grain-opacity: var(--grain-paper);
  --s7-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}
[data-theme="dark"] {
  --s7-tile-deep: none; --s7-tile-light: inline; color-scheme: dark;
  --s7-grain-blend: screen; --s7-grain-opacity: var(--grain-ink);
  --s7-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* ---------------------------------------------------------------- type helpers */
.label, .nav, .source, .wordmark { text-transform: uppercase; }
.label, .source { color: var(--text-muted); }
.s7-muted { color: var(--text-muted); }
.s7-ground :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.s7-card :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }

/* ---------------------------------------------------------------- grounds, grain, hairlines */
.s7-ground { background: var(--ground); color: var(--text); position: relative; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
[data-theme] { color: var(--text); }
.s7-grain { position: relative; isolation: isolate; }
.s7-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit;
  background-image: var(--s7-grain); background-size: 256px 256px; mix-blend-mode: var(--s7-grain-blend); opacity: var(--s7-grain-opacity); }
.s7-hair { border: 0; border-top: 1px solid var(--line); margin: 0; }
.s7-rule-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- the tile and its windows */
.s7-window { position: relative; overflow: hidden; background: var(--window); border-radius: var(--radius-window); }
.s7-window--lg { border-radius: var(--radius-window-lg); }
.s7-window--thumb { border-radius: var(--radius-thumb); }
.s7-window--bleed { border-radius: 0; }
.s7-window--tile { border-radius: var(--radius-tile); }
.s7-window--paper { background: transparent; }
.s7-window > canvas.s7-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s7-tile { aspect-ratio: 1; border-radius: var(--radius-tile); }
.s7-swatch { width: 12px; height: 12px; border-radius: var(--radius-tile); flex: none; }
.s7-logo { display: inline-block; color: var(--text); line-height: 0; vertical-align: top; }
.s7-logo > svg { display: block; }
.s7-arrow { width: 26px; height: 26px; box-sizing: border-box; border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--card);
  color: var(--text); display: inline-grid; place-items: center; flex: none; text-decoration: none; }
.s7-arrow::before { content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6h8.5M6.8 2.6 10.2 6l-3.4 3.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6h8.5M6.8 2.6 10.2 6l-3.4 3.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.s7-play { width: 30px; height: 30px; border-radius: var(--radius-tile); background: var(--text); display: inline-grid; place-items: center; flex: none; }
.s7-play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--card); }
a.s7-card:focus-visible, .s7-chip:focus-visible, .s7-arrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a.s7-card:hover .s7-arrow, a.s7-card:focus-visible .s7-arrow { background: var(--text); color: var(--card); border-color: var(--text); }
.s7-chip:hover { border-color: var(--text-muted); }

/* ---------------------------------------------------------------- data kit: key, bars, source line, section tile */
.s7-key { display: grid; grid-template-columns: repeat(var(--s7-key-cols, 1), minmax(0, 1fr)); column-gap: var(--space-24); row-gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.s7-key > li { display: flex; align-items: center; gap: var(--space-8); color: var(--text); min-width: 0; }
.s7-key > li > .s7-key__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s7-bars { display: grid; grid-template-columns: max-content 1fr max-content; column-gap: var(--space-16); row-gap: var(--space-16); align-items: center; margin: 0; }
.s7-bars > dt { color: var(--text); }
.s7-bars > dd { margin: 0; display: contents; }
.s7-bar { height: 13px; border-radius: calc(13px * var(--tile-corner)); background: var(--bar-rest); min-width: 6px; }
.s7-bar--accent { background: var(--accent); }
.s7-bars .key-value { text-align: right; color: var(--text); }
.s7-source { border-top: 1px solid var(--line); padding-top: var(--space-8); color: var(--text-muted); }
.s7-section-tile { display: inline-flex; align-items: center; gap: var(--space-8); }
.s7-section-tile > .s7-window { width: 26px; height: 26px; border-radius: calc(26px * var(--tile-corner)); flex: none; }

/* ---------------------------------------------------------------- cards */
.s7-card { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-card); box-sizing: border-box;
  display: flex; flex-direction: column; position: relative; overflow: hidden; font-family: var(--font-sans); text-decoration: none; min-width: 0; }
.s7-card__media { margin: var(--space-10) var(--space-10) 0; aspect-ratio: 5 / 4; flex: none; }
.s7-card__body { padding: var(--space-24) var(--space-24) var(--space-24); display: flex; flex-direction: column; }
.s7-card__body > .label { margin-bottom: var(--space-16); }
.s7-card__body > .card-body, .s7-card__body > .s7-card__text { margin-top: 6px; color: var(--text-muted); }
.s7-card__foot { margin: auto var(--space-24) 0; padding: var(--space-10) 0 var(--space-10); min-height: 26px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16); border-top: 1px solid var(--line); }
.s7-card__foot > .label { line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* media */
.s7-card--media .s7-card__body { padding-top: 22px; }
/* feature: window left (56%), text right */
.s7-card--feature { display: grid; grid-template-columns: 56% minmax(0, 1fr); min-height: 360px; }
.s7-card--feature > .s7-card__media { margin: var(--space-10); aspect-ratio: auto; height: auto; }
.s7-card--feature > .s7-card__side { display: flex; flex-direction: column; padding: 40px var(--space-24) 0 14px; min-width: 0; }
.s7-card--feature > .s7-card__side > .label { margin-bottom: var(--space-24); }
.s7-card--feature > .s7-card__side > .card-body { margin-top: var(--space-8); color: var(--text-muted); }
.s7-card--feature > .s7-card__side > .s7-card__foot { margin: auto 0 0; padding: 14px 0 var(--space-16); }
/* film: 16:9 window, play tile row */
.s7-card--film > .s7-card__media { aspect-ratio: 16 / 9; }
.s7-card__playrow { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-16); }
.s7-card__playrow > .label:last-child { margin-left: auto; }
/* stat */
.s7-card--stat .s7-card__body { padding-top: 30px; }
.s7-card__figure { display: flex; align-items: baseline; gap: 10px; }
.s7-card__figure > .body { color: var(--text-muted); }
.s7-card__count { margin-top: var(--space-24); }
/* map */
.s7-card--map .s7-card__body { padding-top: 30px; }
.s7-card--map .card-title { margin-bottom: var(--space-16); }
.s7-card__map { width: 100%; }
.s7-card--map .s7-key { margin-top: var(--space-24); --s7-key-cols: 2; }
/* list */
.s7-card--list .s7-card__body { padding-top: 30px; }
.s7-list { list-style: none; margin: 0; padding: 0; }
.s7-list > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--space-16); align-items: center; padding: 9px 0; }
.s7-list > li + li { border-top: 1px solid var(--line); }
.s7-list > li > .s7-window { width: 52px; height: 52px; grid-row: span 2; }
.s7-list > li > .item { align-self: end; }
.s7-list > li > .label { align-self: start; margin-top: 4px; }
/* quote */
.s7-card--quote .s7-card__body { padding-top: 30px; }
.s7-card--quote .s7-logo { font-size: 36px; margin-bottom: 52px; }
.s7-card--quote blockquote { margin: 0; }

/* ---------------------------------------------------------------- bento: cards on the kit grid */
.s7-bento { container-type: inline-size; }
.s7-bento__grid { --u: calc(100cqw / (var(--kit-columns) + (var(--kit-columns) - 1) * var(--tile-gap)));
  display: grid; grid-template-columns: repeat(var(--kit-columns), minmax(0, 1fr)); grid-auto-rows: var(--u); gap: calc(var(--u) * var(--tile-gap)); }
.s7-bento__cell { border-radius: calc(var(--u) * var(--tile-corner) * 0.6); min-width: 0; min-height: 0; position: relative; overflow: hidden; box-sizing: border-box; }
.s7-bento__cell.s7-card { padding: 0; }
.s7-bento__pad { padding: calc(var(--u) * 0.18); display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.s7-bento__cell > .s7-window { position: absolute; inset: 0; border-radius: inherit; }
.s7-bento__cell > .s7-logo { font-size: var(--u); }
.s7-bento__cell > .s7-logo > svg { height: 100%; }
.s7-bento__fill { background: var(--fill, var(--cobalt-deep)); color: var(--on-fill, var(--on-cobalt-deep)); border: 0; }
@container (max-width: 760px) {
  .s7-bento__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); --u: calc(100cqw / (4 + 3 * var(--tile-gap))); }
  .s7-bento__cell { grid-column: span 4 !important; grid-row: span 2 !important; }
}

/* ---------------------------------------------------------------- site: header, nav, chips, section */
.s7-site { padding: 0 var(--space-48) var(--space-56); }
.s7-header { display: flex; align-items: center; justify-content: space-between; height: 78px; border-bottom: 1px solid var(--line); }
.s7-header .s7-logo { font-size: 18px; }
.s7-nav { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.s7-nav a { color: var(--text); text-decoration: none; }
.s7-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }
.s7-intro { padding: 56px 0 var(--space-32); }
.s7-intro > .body { color: var(--text-muted); margin-top: var(--space-8); }
.s7-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; margin: 0 0 var(--space-32); padding: 0; }
.s7-chip { height: 32px; padding: 0 14px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: var(--radius-chip); border: 1px solid var(--line);
  background: var(--card); color: var(--text); cursor: pointer; }
.s7-chip[aria-pressed="true"] { background: var(--text); color: var(--card); border-color: var(--text); }
.s7-row { display: grid; grid-template-columns: repeat(var(--s7-cols, 3), minmax(0, 1fr)); gap: var(--space-24); align-items: stretch; }

/* ---------------------------------------------------------------- publication formats: fixed artboards, scale with zoom */
.s7-artboard { position: relative; overflow: hidden; box-sizing: border-box; background: var(--ground); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.s7-artboard :where(h1, h2, h3, p) { margin: 0; }
.s7-abs { position: absolute; }

/* covers 420 × 560 */
.s7-cover { width: 420px; height: 560px; }
.s7-cover__no { position: absolute; }
.s7-cover--band > .s7-window { position: absolute; left: 0; top: 0; width: 420px; height: 336px; border-radius: 0; }
.s7-cover--band .s7-cover__head { position: absolute; left: 28px; right: 28px; top: 362px; display: flex; justify-content: space-between; align-items: center; }
.s7-cover--band .s7-cover__title { position: absolute; left: 28px; right: 28px; top: 414px; }
.s7-cover__title > .meta { color: var(--text-muted); margin-top: 6px; }
.s7-cover__foot { position: absolute; left: 28px; right: 28px; bottom: 0; height: 46px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); }
.s7-cover--inset .s7-cover__head { position: absolute; left: 26px; right: 26px; top: 26px; display: flex; justify-content: space-between; align-items: center; }
.s7-cover--inset > .s7-window { position: absolute; left: 22px; top: 62px; width: 376px; height: 316px; }
.s7-cover--inset .s7-cover__title { position: absolute; left: 26px; right: 26px; top: 404px; }
.s7-cover--inset .s7-cover__foot { left: 26px; right: 26px; height: 44px; }
.s7-cover--plate { background: var(--window); }
.s7-cover--plate > .s7-window { position: absolute; inset: 0; border-radius: 0; }
.s7-plate { position: absolute; background: var(--card); color: var(--text); border-radius: var(--radius-card); box-sizing: border-box; border: 1px solid var(--line); }
.s7-cover--plate > .s7-plate { left: 18px; right: 18px; bottom: 18px; height: 176px; padding: 22px; }
.s7-plate__head { display: flex; justify-content: space-between; align-items: center; }
.s7-cover--plate .feature { margin-top: 26px; }
.s7-plate .meta { color: var(--text-muted); margin-top: 4px; }
.s7-cover .s7-logo { font-size: 15px; }

/* title cards 960 × 540 (half of 1920 × 1080) */
.s7-tc { width: 960px; height: 540px; }
.s7-tc .s7-tc__eyebrow { display: block; margin-bottom: 30px; }
.s7-tc--split .s7-logo, .s7-tc--band .s7-logo { font-size: 26px; }
.s7-tc--split > .s7-logo { position: absolute; left: 56px; top: 46px; }
.s7-tc--split .s7-tc__text { position: absolute; left: 56px; width: calc(var(--measure) + var(--space-24)); top: 222px; }
.s7-tc__text > :is(.body, .meta, .card-body) { max-width: var(--measure); }
.s7-tc__foot { position: absolute; left: 56px; width: var(--measure); bottom: 0; height: 62px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); box-sizing: border-box; padding-bottom: 6px; }
.s7-tc--split > .s7-window, .s7-divider > .s7-window { position: absolute; left: calc(var(--space-56) + var(--measure) + var(--space-48)); right: 40px; top: 40px; bottom: 40px; }
.s7-tc--band > .s7-window { position: absolute; left: 0; top: 0; width: 960px; height: 340px; border-radius: 0; }
.s7-tc--band > .s7-logo { position: absolute; left: 56px; top: 380px; font-size: 24px; }
.s7-tc--band .s7-tc__text { position: absolute; left: 330px; top: 378px; width: 440px; }
.s7-tc--band .s7-tc__eyebrow { margin-bottom: 22px; }

.s7-tc--band .s7-tc__dur { position: absolute; right: 56px; top: 378px; }
.s7-tc--band .s7-tc__place { position: absolute; right: 56px; bottom: 32px; }
.s7-tc--plate { background: var(--window); }
.s7-tc--plate > .s7-window { position: absolute; inset: 0; border-radius: 0; }
.s7-tc--plate > .s7-plate { left: 32px; bottom: 32px; width: 470px; height: 210px; padding: 28px 30px 22px; display: flex; flex-direction: column; }
.s7-tc--plate .s7-logo { font-size: 15px; }
.s7-tc--plate .feature { margin-top: 24px; }
.s7-tc--plate .s7-plate > .label { margin-top: auto; }
.s7-tc--window > .s7-tc__head { position: absolute; left: 48px; right: 48px; top: 28px; display: flex; justify-content: space-between; align-items: center; }
.s7-tc--window .s7-logo { font-size: 16px; }
.s7-tc--window > .s7-window { position: absolute; left: 48px; right: 48px; top: 70px; height: 346px; }
.s7-tc--window .feature { position: absolute; left: 48px; right: 48px; top: 444px; }
.s7-tc--window .s7-tc__meta { position: absolute; left: 48px; right: 48px; top: 492px; display: flex; justify-content: space-between; }

/* section divider 960 × 540 */
.s7-divider { width: 960px; height: 540px; }
.s7-divider > .s7-logo { position: absolute; left: 56px; top: 40px; font-size: 15px; }
.s7-divider .s7-divider__text { position: absolute; left: 56px; width: calc(var(--measure) + var(--space-24)); top: 150px; }
.s7-divider__text > .body { max-width: var(--measure); }
.s7-divider .part { display: block; }
.s7-divider .s7-divider__text > .label { display: block; margin: 18px 0 26px; }
.s7-divider .s7-divider__text > .body { color: var(--text-muted); margin-top: 10px; }
.s7-divider .s7-tc__foot { height: 56px; }

/* research page 960 × 540 */
.s7-research { width: 960px; height: 540px; padding: 0 48px; }
.s7-research__head { height: 70px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.s7-research__head .s7-logo { font-size: 15px; }
.s7-research__lead { margin: 30px 0 22px; }
.s7-research__lead strong { font-weight: 600; }
.s7-research__figs { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 20px; height: 300px; }
.s7-fig { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 22px; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; }
.s7-fig > .label { margin-bottom: 14px; }
.s7-fig .s7-key { margin-top: auto; --s7-key-cols: 3; row-gap: 6px; }
.s7-research__foot { position: absolute; left: 48px; right: 48px; bottom: 0; height: 40px; display: flex; align-items: center; border-top: 1px solid var(--line); }
.s7-research--map .s7-research__figs { grid-template-columns: 600px minmax(0, 1fr); gap: 40px; height: 380px; margin-top: 30px; }
.s7-research__side { display: flex; flex-direction: column; padding-top: 10px; }
.s7-research__side > .label { margin-bottom: 22px; }
.s7-research__side > .card-body { color: var(--text-muted); margin-top: 12px; }
.s7-research__side > .s7-key { margin-top: auto; row-gap: 12px; }

/* social square 420 × 420 */
.s7-social { width: 420px; height: 420px; }
.s7-social > .s7-window { position: absolute; left: 20px; top: 20px; width: 380px; height: 290px; }
.s7-social .card-title { position: absolute; left: 24px; right: 24px; top: 334px; }
.s7-social__foot { position: absolute; left: 24px; right: 24px; top: 374px; display: flex; justify-content: space-between; align-items: center; }
.s7-social .s7-logo { font-size: 12px; }

/* ---------------------------------------------------------------- reduced motion: nothing here animates */