/* Gallery (owner, 2026-10-26): a page under Company for the owner's videos. A short head (the Company tag and the title at
   the Display size), then the list: the first item is featured, its 16:9 card across nine columns with the title, the
   channel and the YouTube link beside it; further items would run three across below. The card is the video's own light
   thumbnail with a Midnight play button at its foot (its middle carries the video's own headline); served from the web it
   turns into the player in place (js/gallery.js). Every font-size is a type-scale token. gl- prefix. */

/* ---------- the hero (owner, 2026-10-26, from the owner's picture) ----------
   A centred heading at the Display size, its second line ending in a round picture set into the type (a chrome sphere, about the
   height of a capital), the owner's line under it; then a strip of four pictures
   across the whole screen, its top bowed down in the middle and its foot a touch, like a curved screen (a mask of two
   ellipses); the two links at the right under the strip. */
.gl-hero { padding-top: calc(var(--hdr) + clamp(28px, 4vw, 64px)); overflow-x: clip; }
.gl-hero__head { text-align: center; }
.gl-hero__title {
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-display); line-height: 1.12; letter-spacing: -0.035em;
}
.gl-hero__line { display: block; }
.gl-hero__em { color: var(--gold-mark); }   /* the picture's serif italic "Ideas": the brand gold, as the inner heroes' second lines */
.gl-pill {
  display: inline-block; vertical-align: -0.12em; height: 0.84em; overflow: hidden; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(14, 14, 14, 0.18);
}
.gl-pill img { width: 100%; height: 100%; object-fit: cover; }
.gl-pill--sphere { width: 0.84em; margin-left: 0.1em; }   /* the circle at the end of the second line (owner, 2026-10-26) */
.gl-hero__lead { margin: clamp(14px, 1.6vw, 22px) auto 0; max-width: 60ch; font-size: var(--t-lead); color: var(--ink-2); }

/* the curved strip: four pictures edge to edge of the screen, a hairline of white between them */
.gl-strip { position: relative; margin-top: clamp(28px, 3vw, 48px); }
.gl-strip__row {
  display: grid; grid-template-columns: 1.07fr 1fr 1.2fr 0.87fr; gap: 6px; height: clamp(240px, 28vw, 480px);
  -webkit-mask-image: radial-gradient(ellipse 60% 24.6% at 50% -13.6%, transparent 99.4%, #000 100%), radial-gradient(ellipse 60% 4.5% at 50% 102.5%, transparent 99%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 60% 24.6% at 50% -13.6%, transparent 99.4%, #000 100%), radial-gradient(ellipse 60% 4.5% at 50% 102.5%, transparent 99%, #000 100%);
  mask-composite: intersect;
}
.gl-strip__item { overflow: hidden; background: var(--panel); }
.gl-strip__item img { width: 100%; height: 100%; object-fit: cover; }
.gl-strip__item--box img { object-position: 100% 50%; transform: scale(2); transform-origin: 100% 90%; }   /* the box's side corner, its vents and ports (the lid's logo stays out of the crop) */
.gl-strip__item--chip img { object-position: 50% 50%; }
.gl-strip__item--people img { object-position: 50% 45%; }
.gl-strip__item--earth img { object-position: 30% 60%; }


.gl-hero__links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px clamp(24px, 3vw, 48px); padding-top: clamp(20px, 2.4vw, 36px); }
.gl-hero__link {
  display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-lead); color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 calc(100% - 8px); background-repeat: no-repeat;
  transition: color 0.2s var(--ease);
}
.gl-hero__link:hover { color: var(--gold-ink); }

.gl-list { padding-block: clamp(28px, 3.4vw, 56px) clamp(56px, 6vw, 104px); }

.gl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.gl-item--feature { grid-column: 1 / -1; }

/* the featured video: the card on nine columns, its words on three, at the card's foot */
.gl-video { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px; align-items: end; }
.gl-video__media {
  grid-column: 1 / 10; position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--line);
}
.gl-video__info { grid-column: 10 / 13; padding-bottom: 6px; }

.gl-video__play { position: absolute; inset: 0; display: block; color: var(--ink); }
.gl-video__play img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
/* the play button: Midnight with a gold arrow (it reads on the light thumbnail), at the card's foot, clear of the
   video's own headline in its middle */
.gl-video__btn {
  position: absolute; z-index: 1; left: 50%; bottom: 5%; display: grid; place-items: center;
  width: clamp(52px, 5vw, 72px); aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background: var(--dark); box-shadow: 0 0 0 8px rgba(246, 196, 83, 0.28), 0 14px 32px rgba(11, 15, 20, 0.28);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.gl-video__btn svg { width: 38%; height: 38%; margin-left: 6%; fill: var(--gold); transition: fill 0.3s var(--ease); }
.gl-video__play:hover img { transform: scale(1.03); }
.gl-video__play:hover .gl-video__btn { transform: translateX(-50%) scale(1.08); }
.gl-video__play:hover .gl-video__btn svg { fill: var(--gold-light); }
.gl-video__play:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: -6px; border-radius: var(--r-xl); }
/* the player, once a click has asked for it (js/gallery.js) */
.gl-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.gl-video__title { font-size: var(--t-h4); line-height: 1.2; letter-spacing: -0.02em; }
.gl-video__by { margin-top: 8px; font-size: var(--t-small); color: var(--ink-2); }
.gl-video__link { margin-top: 16px; min-height: 44px; }

@media (max-width: 1023px) {
  .gl-video__media, .gl-video__info { grid-column: 1 / -1; }
  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .gl-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-video { row-gap: 14px; }
  /* on a phone the card's foot is all the thumbnail's own small lines: the button goes to its empty top right corner */
  .gl-video__btn { left: auto; right: 4%; top: 7%; bottom: auto; width: 48px; transform: none; }
  .gl-video__play:hover .gl-video__btn { transform: scale(1.08); }
}
@media (max-width: 767px) {
  .gl-strip__row { gap: 4px; height: clamp(200px, 62vw, 260px); }
  .gl-hero__links { justify-content: flex-end; padding-top: 14px; }
  .gl-hero__link { font-size: var(--t-body); }
}
@media (prefers-reduced-motion: reduce) {
  .gl-video__play img, .gl-video__btn { transition: none; }
  .gl-video__play:hover img { transform: none; }
}