/* ==========================================================================
   Bordered grid layout
   .grid-row = full-width section. Modifiers set background column count;
   .grid-cols-* set content tracks. Vertical and horizontal rules share the
   same dash rhythm (--dash-y / --dash-x).
   ========================================================================== */

:root {
  --max-width-wide: 1200px;
  /* --grid-gutter: card padding, section padding, and vertical stack gap.
     --grid-gap: horizontal track gap (2× gutter so a centered dashed
     column rule has 12px clearance on each side). */
  --grid-gutter: 12px;
  --grid-gap: calc(var(--grid-gutter) * 2);
  --grid-frame-inset: 0px;
  /* 4px stroke, 5px gap (9px period) — same for vertical and horizontal. */
  --dash-y: repeating-linear-gradient(
    to bottom,
    var(--grid-line-color) 0 4px,
    transparent 4px 9px
  );
  --dash-x: repeating-linear-gradient(
    to right,
    var(--grid-line-color) 0 4px,
    transparent 4px 9px
  );
  --hatch: repeating-linear-gradient(
    -45deg,
    var(--grid-line-color) 0 1px,
    transparent 1px 6px
  );
}

.container--wide {
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding-inline: calc(var(--grid-gutter) + var(--grid-frame-inset));
}

/* Bordered card */
.panel {
  position: relative;
  z-index: 1;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--grid-gutter);
}

.panel > :first-child,
.panel > .badge:first-child + * {
  margin-top: 0;
}

.badge {
  position: absolute;
  top: var(--grid-gutter);
  right: var(--grid-gutter);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-control);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
}

.badge--accent {
  background: var(--badge-accent-bg);
  color: var(--badge-accent-fg);
}

.badge--green {
  background: var(--badge-green-bg);
  color: var(--badge-green-fg);
}

.badge--teal {
  background: var(--badge-teal-bg);
  color: var(--badge-teal-fg);
}

.badge--amber {
  background: var(--badge-amber-bg);
  color: var(--badge-amber-fg);
}

.badge--red {
  background: var(--badge-red-bg);
  color: var(--badge-red-fg);
}

.badge--inline {
  position: static;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border: 0.75px solid currentColor;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

/* Glass pill with a light that travels the rim.
   The color field stays put. A conic mask and a thin highlight spin
   via --beam-angle, so the light appears to run around the edge. */
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

@property --beam-opacity {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.beam-badge {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 999px;
  overflow: hidden;
  color: #f5f5f7;
  text-decoration: none;
  vertical-align: middle;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.22);
  animation:
    beam-spin 1.96s linear infinite,
    beam-fade-in 0.6s ease forwards;
}

.beam-badge:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.beam-badge__label {
  display: flex;
  align-items: center;
  height: 34px;
  margin: 0;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(42, 42, 45, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: saturate(1.8) blur(20px);
  color: inherit;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: normal;
  white-space: nowrap;
}

.beam-badge::before,
.beam-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  animation: beam-hue-shift 12s ease-in-out infinite;
}

.beam-badge::before {
  z-index: 1;
  clip-path: inset(0 round 999px);
  background:
    radial-gradient(ellipse 9px 18px at 2% 68%, rgba(60, 140, 200, 0.5), transparent),
    radial-gradient(ellipse 4px 8px at 2% 68%, rgba(50, 120, 180, 0.45), transparent),
    radial-gradient(ellipse 59px 9px at 72% -3%, rgba(100, 80, 220, 0.35), transparent),
    radial-gradient(ellipse 42px 7px at 74% 100%, rgba(80, 100, 255, 0.35), transparent),
    radial-gradient(ellipse 10px 17px at 100% 27%, rgba(120, 70, 240, 0.3), transparent),
    radial-gradient(ellipse 10px 18px at 100% 27%, rgba(90, 80, 220, 0.4), transparent),
    radial-gradient(ellipse 5px 10px at 100% 27%, rgba(70, 110, 255, 0.3), transparent),
    radial-gradient(ellipse 11px 12px at 100% 27%, rgba(110, 90, 230, 0.3), transparent);
  box-shadow: inset 0 0 5px 1px rgba(255, 255, 255, 0.3);
  -webkit-mask-image: conic-gradient(
    from var(--beam-angle),
    transparent 0%, transparent 22%,
    rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
    #fff 46%, #fff 82%,
    rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
    transparent 97%, transparent 100%
  );
  mask-image: conic-gradient(
    from var(--beam-angle),
    transparent 0%, transparent 22%,
    rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
    #fff 46%, #fff 82%,
    rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
    transparent 97%, transparent 100%
  );
  opacity: calc(var(--beam-opacity) * 0.24 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
}

.beam-badge::after {
  z-index: 2;
  border-radius: 998px;
  padding: 1px;
  clip-path: inset(0 round 999px);
  background:
    conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 54%,
      rgba(255, 255, 255, 0.1) 57%,
      rgba(255, 255, 255, 0.3) 60%,
      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.75) 66%,
      rgba(255, 255, 255, 0.6) 69%,
      rgba(255, 255, 255, 0.3) 72%,
      rgba(255, 255, 255, 0.1) 75%,
      transparent 78%, transparent 100%
    ),
    radial-gradient(ellipse 9px 18px at 2% 68%, rgb(60, 140, 200), transparent),
    radial-gradient(ellipse 4px 8px at 2% 68%, rgb(50, 120, 180), transparent),
    radial-gradient(ellipse 59px 9px at 72% -3%, rgb(100, 80, 220), transparent),
    radial-gradient(ellipse 42px 7px at 74% 100%, rgb(80, 100, 255), transparent),
    radial-gradient(ellipse 10px 17px at 100% 27%, rgb(120, 70, 240), transparent),
    radial-gradient(ellipse 10px 18px at 100% 27%, rgb(90, 80, 220), transparent),
    radial-gradient(ellipse 5px 10px at 100% 27%, rgb(70, 110, 255), transparent),
    radial-gradient(ellipse 11px 12px at 100% 27%, rgb(110, 90, 230), transparent);
  -webkit-mask:
    conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      #fff 52%, #fff 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      #fff 52%, #fff 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  opacity: calc(var(--beam-opacity) * 0.46 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
}

.beam-badge__bloom {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 998px;
  padding: 1px;
  clip-path: inset(0 round 999px);
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0%, transparent 58%,
    rgba(255, 255, 255, 0.03) 62%,
    rgba(255, 255, 255, 0.08) 65%,
    rgba(255, 255, 255, 0.2) 67%,
    rgba(255, 255, 255, 0.45) 69%,
    rgba(255, 255, 255, 0.85) 70%,
    rgba(255, 255, 255, 0.85) 70.5%,
    rgba(255, 255, 255, 0.45) 71.5%,
    rgba(255, 255, 255, 0.2) 73%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0.03) 78%,
    transparent 82%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: blur(8px) brightness(1.3) saturate(1.2);
  pointer-events: none;
  opacity: calc(var(--beam-opacity) * 0.38 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
}

@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}

@keyframes beam-fade-in {
  to { --beam-opacity: 1; }
}

@keyframes beam-hue-shift {
  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.3) saturate(1.2); }
  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.3) saturate(1.2); }
  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.3) saturate(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .beam-badge,
  .beam-badge::before,
  .beam-badge::after {
    animation: none;
  }

  .beam-badge {
    --beam-angle: 66deg;
    --beam-opacity: 1;
  }
}

.panel img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.panel .mosaic img {
  height: 100%;
}

/* Image-only: full-bleed media, no inner padding. */
.panel--image {
  padding: 0;
  overflow: hidden;
}

.panel--image img {
  height: 100%;
  min-height: 220px;
}

/* Image on top, text below. */
.panel--figure {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.panel--figure img {
  flex: 1 1 auto;
  min-height: 160px;
}

/* Image + text side by side. */
.panel--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  overflow: hidden;
}

.panel--split img {
  height: 100%;
  min-height: 180px;
}

.panel--split-inset {
  padding: var(--grid-gutter);
  column-gap: var(--grid-gutter);
}

.panel--split-inset img {
  border-radius: var(--radius-media);
}

.panel--split > .trace,
.panel--image > .trace,
.mosaic > .trace {
  height: 100%;
}

.panel--split-inset > .trace,
.panel--row > .trace,
.mosaic > .trace {
  overflow: hidden;
  border-radius: var(--radius-media);
}

/* Several stills in one card. Columns on a wide screen, a stack when narrow. */
.panel--row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

.panel--row img {
  height: auto;
  min-height: 0;
  border-radius: var(--radius-media);
  object-fit: contain;
}

.panel--split-inset .panel__body {
  padding: 0;
}

.panel--split + .panel--split {
  margin-top: var(--grid-gutter);
}

/* Collage of photos, last row clipped by the card. */
.panel--mosaic {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.grid-row__inner > .grid-cols-3 + .panel--mosaic,
.grid-row__inner > .panel--mosaic + .grid-cols-2 {
  margin-top: var(--grid-gutter);
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 88px;
  gap: var(--grid-gutter);
  height: 228px;
  margin-top: var(--grid-gutter);
  overflow: hidden;
  align-items: stretch;
}

.mosaic--2 {
  grid-template-columns: repeat(2, 1fr);
}

.mosaic img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.mosaic > img:nth-child(1),
.mosaic > img:nth-child(4),
.mosaic > .trace:nth-child(1),
.mosaic > .trace:nth-child(4) {
  grid-row: span 3;
}

.mosaic > img:nth-child(2),
.mosaic > img:nth-child(3),
.mosaic > img:nth-child(n + 5),
.mosaic > .trace:nth-child(2),
.mosaic > .trace:nth-child(3),
.mosaic > .trace:nth-child(n + 5) {
  grid-row: span 2;
}

.panel__body {
  padding: var(--grid-gutter);
}

.panel__body > :first-child {
  margin-top: 0;
}

/* Equal-height stack beside a taller feature panel.
   Flex (not 1fr grid rows) so a short neighbor isn't stretched
   to twice the tallest card. */
.stack {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: min-content;
  gap: var(--grid-gutter);
}

.stack > * {
  flex: 1 1 0;
  min-height: min-content;
}

/* Studies and other stills that should keep their own aspect ratio. */
.stack--natural {
  height: auto;
  min-height: 0;
}

.stack--natural > * {
  flex: none;
}

.stack--natural .panel--image img {
  height: auto;
  min-height: 0;
}

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  font-variant-ligatures: none;
  line-height: var(--leading-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.eyebrow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 0.7rem;
}

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ui);
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

.icon-box svg {
  width: 1.1rem;
  height: 1.1rem;
}

.accent {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Grid row
   Top-only horizontal rule (one line between stacked rows). .grid-row__bg
   paints vertical dashes; line positions account for gutter padding + gaps
   so each line sits at the center of its column gap.
   -------------------------------------------------------------------------- */

.grid-row {
  position: relative;
}

.grid-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 1px;
  background: var(--dash-x);
  pointer-events: none;
}

.grid-row__bg {
  position: absolute;
  inset: 0 var(--grid-frame-inset);
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat-y;
  background-size: 1px 9px;
}

.grid-row--bg-1 .grid-row__bg {
  background-image: var(--dash-y), var(--dash-y);
  background-position: 0% 0, 100% 0;
}

.grid-row--bg-2 .grid-row__bg {
  background-image: var(--dash-y), var(--dash-y), var(--dash-y);
  background-position: 0% 0, 50% 0, 100% 0;
}

.grid-row--bg-3 .grid-row__bg {
  background-image: var(--dash-y), var(--dash-y), var(--dash-y), var(--dash-y);
  background-position:
    0% 0,
    calc(33.3333% + (var(--grid-gutter) / 3) - (var(--grid-gap) / 6)) 0,
    calc(66.6667% - (var(--grid-gutter) / 3) + (var(--grid-gap) / 6)) 0,
    100% 0;
}

.grid-row--bg-4 .grid-row__bg {
  background-image: var(--dash-y), var(--dash-y), var(--dash-y), var(--dash-y), var(--dash-y);
  background-position:
    0% 0,
    calc(25% + (var(--grid-gutter) * 0.5) - (var(--grid-gap) * 0.25)) 0,
    50% 0,
    calc(75% - (var(--grid-gutter) * 0.5) + (var(--grid-gap) * 0.25)) 0,
    100% 0;
}

.grid-row--bg-2-1 .grid-row__bg {
  background-image: var(--dash-y), var(--dash-y), var(--dash-y);
  background-position:
    0% 0,
    calc(66.6667% - (var(--grid-gutter) / 3) - (var(--grid-gap) / 6)) 0,
    100% 0;
}

.grid-row--bg-1-2 .grid-row__bg {
  background-image: var(--dash-y), var(--dash-y), var(--dash-y);
  background-position:
    0% 0,
    calc(33.3333% + (var(--grid-gutter) / 3) + (var(--grid-gap) / 6)) 0,
    100% 0;
}

.grid-row__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--grid-gutter);
}

/* Side rails sit in the leftover viewport outside the 1200px body.
   Center track is forced to the body width so it lines up with
   .grid-row__bg; gutter (not gap) sits between a rail card and the
   dashed body edge, matching the 12px clearance used everywhere else. */
.grid-row__outers {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, var(--max-width-wide))
    minmax(0, 1fr);
  column-gap: var(--grid-gutter);
  padding: var(--grid-gutter) calc(var(--grid-gutter) + var(--grid-frame-inset));
  align-items: stretch;
}

.grid-row__outers > .grid-row__inner {
  width: var(--max-width-wide);
  max-width: 100%;
  min-width: 0;
  padding-block: 0;
  padding-inline: var(--grid-gutter);
}

.grid-row__rail {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
}

.grid-row:has(.grid-row__rail--hatch) {
  z-index: 2;
}

.grid-row__rail--hatch {
  z-index: 2;
}

.grid-row__rail--hatch::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* Top/right sit on this row’s padding box; left/bottom overlap the 1px
     grid dashes (body column line + next row’s top rule). */
  top: calc(var(--grid-gutter) * -1);
  right: calc(var(--grid-gutter) * -1);
  bottom: calc(var(--grid-gutter) * -1 - 1px);
  left: calc(var(--grid-gutter) * -1 - 1px);
  background-image: var(--hatch);
  /* background-attachment: fixed; */
  border: 1px solid var(--grid-line-color);
  pointer-events: none;
}

.grid-row__rail--hatch .panel {
  position: relative;
  z-index: 1;
}

.grid-row__rail .panel,
.grid-row__outers > .grid-row__inner > .panel {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* Sticky rail: aside stays put while the taller center scrolls, then
   releases at the bottom of this row. align-self: start keeps the rail
   content-sized so sticky has room to travel inside the tall grid cell. */
.grid-row__outers--sticky .grid-row__rail {
  position: sticky;
  top: var(--grid-gutter);
  align-self: start;
}

.grid-row__outers--sticky .grid-row__rail .panel {
  flex: none;
  height: auto;
}

/* Column presets — usable on .grid-row__inner or any nested grid */
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-2-1,
.grid-cols-1-2 {
  display: grid;
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gutter);
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

/* Nested 2-up cards sit inside an already-guttered track, so the
   gap between them is one gutter, not the dashed-column gap. */
.grid-row__inner > .grid-cols-2 {
  column-gap: var(--grid-gutter);
}
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
.grid-cols-1-2 { grid-template-columns: 1fr 2fr; }

@media (max-width: 1400px) {
  .grid-row__outers {
    grid-template-columns: 1fr;
    row-gap: var(--grid-gutter);
  }

  .grid-row__outers > .grid-row__inner {
    width: 100%;
    padding-inline: 0;
  }

  .grid-row__outers > .grid-row__inner,
  .grid-row__rail {
    max-width: var(--max-width-wide);
    margin-inline: auto;
    width: 100%;
  }

  .grid-row__outers--sticky .grid-row__rail {
    position: static;
  }

  .grid-row__rail--hatch::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

@media (max-width: 800px) {
  :root {
    --grid-frame-inset: var(--grid-gutter);
  }

  /* Columns stack, so the interior vertical rules would cut through
     a single track. Keep only the left and right frame. */
  .grid-row--bg-2 .grid-row__bg,
  .grid-row--bg-3 .grid-row__bg,
  .grid-row--bg-4 .grid-row__bg,
  .grid-row--bg-2-1 .grid-row__bg,
  .grid-row--bg-1-2 .grid-row__bg {
    background-image: var(--dash-y), var(--dash-y);
    background-position: 0% 0, 100% 0;
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-2-1,
  .grid-cols-1-2,
  .panel--split,
  .panel--row {
    grid-template-columns: 1fr;
  }

  .mosaic {
    grid-template-columns: repeat(3, 1fr);
  }

  .mosaic--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}