/* ===========================================================================
   Landing page: title, byline and the four ways into the paper.

   Loaded after index.css, so the fonts, colour tokens and byline classes
   (.author-line, .publication-affiliations, .publication-contact) are the
   blog's own. The phone overrides in index.css shrink that byline to keep
   the blog's masthead short; here the byline is the page, so they are
   relaxed again under .landing.
   ========================================================================= */
body.landing-page { background: #f3f4f6; }

.landing {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}
@supports (min-height: 100svh) { .landing { min-height: 100svh; } }
.landing-inner { width: 100%; max-width: 1100px; }

/* One line at every width: the title scales with the viewport rather than
   wrapping. 21.5 is its width per unit of font size in CMU Serif bold (20.0)
   with headroom for the Georgia fallback (20.8) shown until the webfont
   lands; the subtracted width is the page's side padding. */
.landing-title {
  font-family: var(--cm); font-weight: 700;
  font-size: min(2.9rem, calc((100vw - 3rem) / 21.5)); line-height: 1.2;
  white-space: nowrap;
  color: var(--tailrl);
  margin: 0 0 1.1rem 0;
}

.landing .publication-affiliations { margin-top: 0.6rem; }
.landing .publication-contact { margin-top: 0.4rem; }

/* ---- the choices ------------------------------------------------------------
   Flex rather than grid so that when the row wraps on a phone, the odd tile
   out centres under the others instead of hanging at the left. */
.choices {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem; max-width: 880px; margin: 2.4rem auto 0 auto;
}
.choice {
  flex: 0 0 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 1.3rem 0.75rem 1.15rem 0.75rem;
  background: #fff; border: 1px solid var(--border-light); border-radius: 12px;
  color: var(--text-dark); text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.choice:hover {
  color: var(--text-dark); border-color: var(--tailrl);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08); transform: translateY(-2px);
}
.choice:focus-visible { outline: 2px solid var(--tailrl); outline-offset: 3px; }
.choice svg, .choice-logo {
  width: 30px; height: 30px; margin-bottom: 0.35rem;
}
.choice svg {
  fill: none; stroke: var(--tailrl); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.choice svg .fill { fill: var(--tailrl); stroke: none; }
/* the GitHub and X marks are filled glyphs in their own ink, not outline icons */
.choice svg.is-solid { fill: var(--text-dark); stroke: none; width: 26px; height: 26px; margin: 2px 0 calc(0.35rem + 2px) 0; }
/* the arXiv logomark keeps its own colours; it is taller than wide */
.choice-logo { width: auto; object-fit: contain; }
.choice-label { font-family: var(--cm); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }

/* ---- video lightbox -------------------------------------------------------
   The dialog is the close bar plus the video's box. The bar ignores the
   pointer outside its button, so a click anywhere but the video or the button
   lands on the dialog element itself (or its backdrop) and closes it. Sized
   by whichever runs out first: the width of the screen, or 16:9 of the height
   left once the bar is taken out. */
.video-dialog {
  padding: 0; border: 0; background: transparent; overflow: visible;
  width: min(92vw, calc((90vh - 3rem) * 16 / 9), 1280px); max-width: none; max-height: none;
}
.video-dialog::backdrop { background: rgba(10, 10, 10, 0.86); }
.video-bar {
  display: flex; justify-content: flex-end; align-items: center;
  height: 2.75rem; pointer-events: none;
}
.video-dialog video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #0b0b0b; border-radius: 8px;
}
.video-close {
  pointer-events: auto;
  width: 2.4rem; height: 2.4rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.video-close:hover { background: rgba(255, 255, 255, 0.14); }
.video-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- smaller screens -------------------------------------------------------- */
@media (max-width: 768px) {
  .landing { padding: 2rem 1rem; }
  .landing-title { font-size: min(2.9rem, calc((100vw - 2rem) / 21.5)); }
  .landing .author-line { font-size: 1rem; line-height: 1.5; }
  .landing .author-line sup { font-size: 0.7em; }
  .landing .publication-affiliations { font-size: 0.86rem; line-height: 1.45; margin-top: 0.5rem; }
  .landing .publication-contact { font-size: 0.86rem; margin-top: 0.35rem; }
  .landing .publication-contact code { font-size: 0.82rem; }
  .choices { gap: 0.75rem; margin-top: 1.8rem; }
  /* two to a row with the gap taken out; the fifth centres on its own */
  .choice { flex-basis: calc(50% - 0.375rem); padding: 1.05rem 0.5rem 0.95rem 0.5rem; }
  .choice-label { font-size: 1.12rem; }
  /* phones are usually portrait, so the width is what binds */
  .video-dialog { width: min(96vw, calc((90vh - 3rem) * 16 / 9)); }
}
@media (max-width: 400px) {
  .landing .author-line { font-size: 0.9rem; }
}
/* A phone held sideways is wide but short, so the byline alone would fill
   the screen. Height is what binds here: tighten everything and set the
   tiles on one row of compact pills. */
@media (max-height: 500px) and (min-width: 560px) {
  .landing { padding: 0.9rem 1.5rem; }
  .landing-title { font-size: min(2rem, calc((100vw - 3rem) / 21.5)); margin-bottom: 0.45rem; }
  .landing .author-line { font-size: 0.86rem; line-height: 1.35; }
  .landing .publication-affiliations { font-size: 0.74rem; line-height: 1.3; margin-top: 0.3rem; }
  .landing .publication-contact { font-size: 0.74rem; margin-top: 0.2rem; }
  .landing .publication-contact code { font-size: 0.72rem; }
  .choices { margin-top: 0.9rem; gap: 0.5rem; max-width: none; }
  .choice { flex: 0 1 auto; flex-direction: row; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; }
  .choice svg, .choice-logo { width: 18px; height: 18px; margin: 0; }
  .choice svg.is-solid { width: 16px; height: 16px; margin: 0; }
  .choice-label { font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) {
  .choice, .choice:hover { transition: none; transform: none; }
}