/* ==========================================================================
   THE NEW JEWELLER UAE — HOME PAGE STYLESHEET
   Loaded by index.html only:

     <link rel="stylesheet" href="assets/home.css">

   Layout: a lead-story grid with a rail, category blocks, videos, magazines
   and web banners. The header, nav, footer and newsletter band are NOT here —
   they live in common.css, which every page shares. Do not restate a chrome
   rule in this file.

   DESKTOP ONLY — there are no media queries in this file.
   Everything below is the wide layout, written with no @media around it. The
   home page's tablet and phone rules are in assets/tablet.css and
   assets/mobile.css; index.html links assets/responsive.css after this sheet
   to pull them in. Add a width change there, not here.

   Card pictures use object-fit: contain, never cover — see .card__media img.

   Sibling sheets: style.css (the other pages), sm.css (article layout).
   ========================================================================== */

/* --------------------------------------------------------------- tokens - */
@import url("color.css");
@import url("common.css");

:root {
  /* Site typography. Same two families as style.css uses via --font-body /
     --font-display, so every page reads the same. Keep the <link> in the page
     head in step with this — see the font note in style.css. */
  --font:             "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --font-head:        "Playfair Display", Georgia, "Times New Roman", serif;

  --wrap:             1500px;
  --gap:              20px;
  --radius:           4px;
  --shadow:           0 1px 3px var(--color-shadow-card), 0 4px 16px var(--color-shadow-faint);

  /* Height of the compact .nav below. The site's sticky bar is .primary-nav
     from common.css, which is --chrome-nav-h tall — anything offsetting from
     the sticky header should use that, not this. */
  --header-h:         52px;

  /* One web-banner slot. The creatives are 160x200, so the grid columns and
     the images are both sized from this. */
  --banner-slot:      160px;

  /* The playlist rail beside the video player. The player takes whatever
     width is left over, so widening this narrows the player. */
  --playlist-w:       360px;
}

/* --------------------------------------------------------------- reset -- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  /* Centred by default. display:block on its own makes an image that is
     narrower than its container sit against the left edge, so anything not
     covered by a more specific rule below would end up off-centre. */
  margin-inline: auto;
}
a   { color: inherit; text-decoration: none; }
ul  { margin: 0; padding: 0; list-style: none; }
p   { text-align: justify; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -60px; left: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--brand);
  color: var(--color-white);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* -------------------------------------------------------------- buttons - */
.icon-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-2); }
.icon-btn svg { width: 18px; height: 18px; }

.btn {
  display: inline-block;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--color-brand-dark); }
.btn--ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--bg-2); }
.btn--block { display: block; width: 100%; }

/* --------------------------------------------------------------- navbar -
   An alternative compact header, driven by the data-* hooks in
   assets/js/main.js ([data-nav], [data-drawer], [data-searchbar]). The
   pages currently ship the common.css header instead (partials/header.js
   emits .primary-nav), so nothing here is on screen today — it is kept
   because the behaviour in main.js is still wired up for it. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand);
  box-shadow: 0 1px 6px var(--color-shadow);
}
.nav .wrap {
  display: flex;
  align-items: center;
  height: var(--header-h);
}

/* Compact logo that fades in once the masthead scrolls away. */
.nav__logo {
  display: none;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
}
.nav.is-stuck .nav__logo { display: flex; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav__list::-webkit-scrollbar { display: none; }

.nav__list > li > a {
  display: block;
  padding: 0 13px;
  line-height: var(--header-h);
  color: var(--color-white);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background .15s;
}
.nav__list > li > a:hover,
.nav__list > li.is-active > a { background: var(--color-overlay-soft); }

.nav__list .is-live > a { color: var(--color-live-text); }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: var(--header-h);
  padding: 0 12px 0 0;
  background: none;
  border: 0;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }

/* -------------------------------------------------------- mobile drawer - */
.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 130;
  width: min(320px, 86vw);
  background: var(--bg);
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--brand);
  color: var(--color-white);
}
.drawer__head .logo { color: var(--color-white); font-size: 22px; }
.drawer__head .logo__mark { background: var(--color-light-overlay); }
.drawer__close {
  background: none;
  border: 0;
  color: var(--color-white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.drawer__list li a {
  display: block;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 600;
}
.drawer__list li a:hover { background: var(--bg-2); color: var(--brand); }
.drawer__foot { padding: 16px; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s;
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------- search bar -- */
.searchbar {
  display: none;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.searchbar.is-open { display: block; }
.searchbar form {
  display: flex;
  gap: 8px;
  padding: 14px 0;
}
.searchbar input {
  flex: 1;
  padding: 11px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------- layout --- */
.main {
  padding: var(--gap) 0 40px;
  background: var(--bg);
}

/* Main column plus the 320px rail. tablet.css collapses it to one column. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gap);
}

.block {
  margin-bottom: var(--gap);
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.block__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}
.block__title {
  position: relative;
  padding-left: 12px;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.block__title::before {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px; left: 0;
  width: 4px;
  background: var(--them-active);
  border-radius: 2px;
}
.block__more {
  margin-left: auto;
  color: var(--them-active);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.block__more:hover { text-decoration: underline; }

/* --------------------------------------------------------------- cards -- */
.card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.card:hover {
  box-shadow: 0 4px 20px var(--color-shadow-soft);
  border-color: var(--brand);
}
.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  /* The same white as the card, so the letterboxing around a picture that is
     not 16/9 reads as part of the card rather than as a grey slab. */
  background: var(--bg);
  aspect-ratio: 16 / 9;
  /* Deliberately a plain block, NOT a flex/grid centring box. As a grid or flex
     container the row sizes to the picture's own height, which beats
     aspect-ratio and lets a portrait picture blow the frame out (a 200x800
     picture stretched a 285x159 frame to 285x1140). The frame keeps its shape
     here; the img rule below is what centres the picture inside it. */
}
/* contain, NOT cover. Pictures arrive in every shape — logos, portraits, wide
   press photos — and cover fills the frame by cropping whatever does not fit.
   contain fits the whole picture inside the frame instead, so nothing is cut.
   For the same reason there is no hover zoom: scaling a picture up inside a
   frame with overflow:hidden would clip its edges. */
.card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* Spelled out rather than left to the default, so the picture stays centred
     inside the frame even if someone sets object-position elsewhere later. */
  object-position: center center;
}

.tag {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 9px;
  background: var(--brand);
  color: var(--color-white);
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tag--live { background: var(--live); }

.card__body { padding: 12px 14px 14px; }
.card__title {
  font-size: 16px;
  line-height: 1.32;
  text-align: justify;
}
.card:hover .card__title { color: var(--them-active); }
.card__excerpt {
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 11.5px;
}
.meta__cat {
  color: var(--brand);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.meta span + span::before {
  content: "•";
  margin-right: 8px;
}

/* Lead story — oversized headline over a wide image. */
.lead { margin-bottom: var(--gap); }
.lead .card__media { aspect-ratio: 16 / 9; }
.lead .card__title { font-size: clamp(22px, 3.4vw, 34px); }
.lead .card__excerpt { font-size: 15px; }

/* Card grids.
  The default grid stays fluid, while the named variants control their
  intended column count at the responsive breakpoints. In the 1080px main
  column of .layout that gives:

     .grid      220px min  ->  4-up
     .grid--2   280px min  ->  3-up
     .grid--3              ->  2-up */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.event-grid { grid-template-columns: repeat(4, minmax(0, 1fr));}
.exclusive-grid { grid-template-columns: repeat(3, minmax(0, 1fr));}

/* Split block — two feature cards and a list of headlines.
   Used by the Association and Technology & Education blocks:

     .block__split
       .block__feature    a full card: picture, headline, excerpt
       .block__feature
       .block__stack      a vertical list of .card--row links

   FLEX, NOT GRID, AND ON PURPOSE
   These two blocks used .grid.grid--2 — an auto-fill grid of three items.
   auto-fill has no idea the third item is a list rather than a card, so as
   soon as three 280px tracks stopped fitting, the stack dropped onto a row of
   its own, sat in column 1, and left column 2 empty beside it. That is not a
   narrow-screen problem: the 320px rail takes its cut of the page first, so
   three tracks only fitted from about a 1300px window up. Every laptop, every
   tablet and the top of the phone range got the hole, and the 640px phone
   step landed on it again.

   Flex items grow to fill the line they end up on, which is the one thing the
   grid could not do. When the stack no longer fits beside the two features it
   wraps and takes the full width, with nothing left blank. Three layouts fall
   out of the same rule, at whatever width each one stops fitting:

     wide      feature | feature | stack
     medium    feature | feature          and the stack full-width below
     narrow    feature / feature / stack, one under the other

   So there is nothing here for tablet.css or mobile.css to restate, and no
   breakpoint to keep in step with them. If the proportions need tuning, move
   the flex-basis values below — do not reach for a media query. */
.block__split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* The basis is the width each item asks for; flex-grow shares out whatever is
   left over, so an item that wraps onto its own line fills it. min-width:0
   lets a long headline shrink its own card rather than shoving the card
   beside it off the line. */
.block__feature {
  flex: 1 1 280px;
  min-width: 0;
}
.block__stack {
  flex: 1 1 300px;
  min-width: 0;
}

/* .card--row draws a rule under every row so a run of them reads as a list.
   The last one in a stack has nothing after it to be separated from, and its
   rule collides with the bottom of the .block panel. */
.block__stack .card--row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Horizontal card used in category blocks and the rail. */
/* A row card is a list item, not a boxed card: no border around it, no radius,
   no panel background. Instead there is a single rule underneath it, with a
   small margin either side of that rule, so a stack of them reads as a list.

   border:0 first, then just the bottom edge — that order matters, because .card
   above sets a border on all four sides and this has to clear it. */
.card--row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transition: none;

  /* the line after each row, with a small margin above and below it */
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
/* .card:hover would otherwise put a shadow on it and turn the rule green */
.card--row:hover {
  box-shadow: none;
  border-color: var(--line);
}
.card--row .card__media { border-bottom: 0; }
.card--row .card__body { padding: 0; }
.card--row .card__title { font-size: 14.5px; }

/* ---------------------------------------------------------------- rail -- */
.rail { min-width: 0; }
/* clears the sticky .primary-nav from common.css, then a little breathing
   room — the same offset sm.css gives its Read Next rail. Once the rail drops
   below the main column there is nothing to stick beside, so tablet.css turns
   this back to static. */
.rail__sticky { position: sticky; top: calc(var(--chrome-nav-h) + 16px); }

.rank { counter-reset: rank;padding: 0; }
.rank li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.rank li:last-child { border-bottom: 0; padding-bottom: 0; }
.rank li::before {
  counter-increment: rank;
  content: counter(rank);
  flex: none;
  width: 26px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--them-active);
  opacity: .55;
}
.rank a { font-size: 14px; font-weight: 600; line-height: 1.35; }
.rank a:hover { color: var(--them-active); }

.ad {
  display: grid;
  place-items: center;
  min-height: 250px;
  background: repeating-linear-gradient(
    45deg, var(--bg-2), var(--bg-2) 10px, var(--line-2) 10px, var(--line-2) 20px);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  /* every instance carried this as an inline style before */
  margin-bottom: var(--gap);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ad--leaderboard { margin-bottom: var(--gap);}
.ad--leaderboard img { max-height: 110px;}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a {
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.chips a:hover { background: var(--brand); border-color: var(--brand); color: var(--color-white); }

.totop {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: var(--them-active);
  color: var(--them-text);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .2s;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }

/* -------------------- Hero: magazine card + editor's note -------------------- */
.hero { margin-bottom: var(--gap); border-bottom: 1px solid var(--line); background: var(--bg); }
.hero__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: center;
}

.magazine-card { text-align: center; }
.magazine-cover {
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  box-shadow: 0 18px 40px -14px var(--color-shadow-cover);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: 24px;
  position: relative;
  border: 1px solid var(--color-cover-border);
}
.magazine-cover::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--color-gold-overlay);
  pointer-events: none;
  z-index: 0;
}
.magazine-cover > a {
  position: relative;
  z-index: 1;
  display: block;
}
.magazine-cover .mc-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-black);
}
.magazine-cover img { width: 100%; margin: 8px auto; border-radius: 1px; }
.magazine-cover .mc-issue {
  font-size: 12px;
  margin-top: auto;
  letter-spacing: 1px;
  color: var(--color-black);
}
.magazine-card .mc-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.magazine-card .mc-cta:hover { color: var(--them-active); border-bottom-color: var(--them-active); }

/* Previous / Next under the cover — assets/js/magazines.js swaps the issue. */
.magazine-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}
.magazine-navigation button {
  border: 0;
  background: var(--color-brand);
  color: var(--color-white);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.magazine-navigation button:hover { opacity: .85; }

#magazineCount {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.eyebrow {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}

/* Clipped-corner gem-facet marker */
.facet {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--color-gold);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
  margin-right: 8px;
  position: relative;
  top: 1px;
}

.editors-note h2 {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 16px;
}
.editors-note .drop {
  font-family: var(--font-head);
  float: left;
  font-size: 56px;
  line-height: 0.8;
  padding: 4px 8px 0 0;
  color: var(--ink);
}
.editors-note p { color: var(--ink-2); font-size: 16px; margin: 0 0 14px; }
.editors-note .read-more {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--them-active);
  border-bottom: 1px solid var(--them-active);
  padding-bottom: 2px;
}
.editors-note .read-more:hover { opacity: .8; }

/* -------------------- Video section -------------------- */
.video-section { margin-bottom: var(--gap); background: var(--bg); }
.video-row {
  background: var(--them-color);
  color: var(--them-text);
  display: grid;
  /* minmax(0,1fr) — not plain 1fr — or the player refuses to shrink */
  grid-template-columns: minmax(0, 1fr) var(--playlist-w);
  gap: 5px;
  align-items: start;
}
.video-box { width: 100%; overflow: hidden; }

/* YT.Player REPLACES this empty <div> with an <iframe width="640"
   height="360">, so height:auto is required: those attributes count as a
   specified height and would beat aspect-ratio, pinning the player at a flat
   360px and letting YouTube letterbox inside it. There is also no
   "#youtube-player iframe" to style — the iframe IS this element. */
#youtube-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--color-black);
  border: 0;
}

/* The playlist is a window onto the titles, moved by the Previous / Next
   buttons only — hence overflow:hidden rather than auto. Beside the player,
   assets/js/video-player.js measures the video column and sets the height so
   both columns end level; stacked under it there is nothing to line up with,
   so --video-list-h is the cap instead. No scroll-behavior:smooth on purpose:
   the script reads the current scroll offset to decide where to go next, and
   mid-animation that reading is a mid-flight value. */
.video-list {
  --video-list-h: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: var(--video-list-h);
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.video-item {
  /* grow 1, shrink 0: when the panel is taller than the titles they share the
     spare height, so the list fills its column instead of leaving a blank
     strip above the buttons. Once there are more titles than fit they keep
     their natural height and the window scrolls instead. */
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
  transition: background .2s, color .2s;
}
.video-item:hover {     
  background: var(--bg-2);
  color: var(--them-active); 
}
.video-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.video-item.active {
  background: var(--bg-2);
  color: var(--them-active);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold);
}

/* No :disabled state — the playlist loops, so neither button is a dead end. */
.video-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}
.video-navigation button {
  border: none;
  background: var(--them-active);
  color: var(--color-white);
  padding: 10px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.video-navigation button:hover { background: var(--them-active); }
.video-count {
  font-size: 13px;
  color: var(--them-text);
  white-space: nowrap;
}

/* -------------------- Web banner section -------------------- */
.web-banners-section { margin-bottom: var(--gap); }

.banner-section {
  margin-bottom: var(--gap);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* 6-up on desktop; tablet.css takes it to 3 and mobile.css to 2. Change
   --banner-slot and the columns and the images follow together. */
.web-banners {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 15px;
  justify-content: center;
}
.web-banners a { display: block; }
.web-banners img {
  width: var(--banner-slot);
  height: calc(var(--banner-slot) * 1.25);  /* matches 160×200 creative ratio */
  /* contain, so a creative supplied at another ratio is shown whole, and
     centred in its slot rather than sitting to one side */
  object-fit: contain;
  object-position: center center;
  display: block;
  margin-inline: auto;
  border-radius: var(--radius);
  transition: opacity .2s, transform .2s;
}
.web-banners a:hover img { opacity: .88; transform: translateY(-2px); }

/* -------------------- Masthead leaderboard -------------------- */
/* common.css ships .masthead__ad hidden; the home page is the one page that
   shows it. mobile.css hides it again below 640px, where there is no room
   beside the logo for a 728px creative. */
.masthead__ad { display: block; }

/* ---------------------------------------------------------- responsive --
   Not here. Every width change this page makes is in assets/tablet.css and
   assets/mobile.css, which index.html pulls in through
   assets/responsive.css — linked after this sheet so it wins. The print
   rules moved there too. */