/* ---------------------------------------------------------------------------
   Astmation public pages (articles)
   ---------------------------------------------------------------------------
   Tokens and component recipes are copied from the live marketing page,
   app/views/homes/astmation.html.erb, which inlines its own <style> block and
   is the single source of truth for the brand. Nothing here is shared with
   app/assets/stylesheets/app.css — that file still dresses the CV/bio pages
   and its light theme would fight every rule below, so the public layout
   (app/views/layouts/public.html.erb) deliberately does not load it.

   Site tokens:
     --bg    #010313   --purple #761cff
     --text  #f7f8ff   --blue   #247dff
     --muted #a5a9bf   --cyan   #09d9d0
     --line  rgba(92, 104, 170, 0.24)
   ------------------------------------------------------------------------- */
:root {
  --bg: #010313;
  --bg-soft: #05071a;
  --text: #f7f8ff;
  --muted: #a5a9bf;
  --line: rgba(92, 104, 170, 0.24);
  --purple: #761cff;
  --blue: #247dff;
  --cyan: #09d9d0;
  --panel: rgba(5, 9, 29, 0.72);
  --card: linear-gradient(145deg, rgba(10, 13, 39, 0.96), rgba(4, 13, 29, 0.96));
  --gradient: linear-gradient(105deg, #7618ff, #4d55ff 50%, #05cfc9);
  --radius: 7px;
  --max-width: 1400px;
  --header-height: 72px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The same radial wash the marketing page paints behind its hero. */
  background: radial-gradient(circle at 50% -10%, rgba(44, 30, 130, 0.13), transparent 34%),
              var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cyan);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: var(--blue);
}

img {
  max-width: 100%;
}

.container {
  width: min(calc(100% - 48px), var(--max-width));
  margin-inline: auto;
}

/* Header ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(1, 3, 19, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand:hover {
  color: #fff;
}

.brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
}

.main-nav > a:not(.nav-cta) {
  position: relative;
  color: #e8e9f3;
  font-size: 14px;
  font-weight: 500;
  transition: color 180ms ease;
}

/* The underline sweeps in from the centre, as on the marketing nav. */
.main-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.main-nav > a:not(.nav-cta):hover {
  color: #fff;
}

.main-nav > a:not(.nav-cta):hover::after,
.main-nav > a.is-active:not(.nav-cta)::after {
  transform: scaleX(1);
}

.main-nav > a.is-active:not(.nav-cta) {
  color: #fff;
}

.nav-cta {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 9px;
  background: linear-gradient(110deg, #7518ff 0%, #445cff 50%, #00cfc8 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 7px 25px rgba(78, 43, 255, 0.25);
}

/* Page head --------------------------------------------------------------- */
.page-main {
  flex: 1 0 auto;
  padding: 34px 0 56px;
}

.page-head {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(53, 71, 122, 0.2);
}

.eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #9349ff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-title {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
}

/* The marketing hero clips a gradient to the headline; reused here. */
.page-title .gradient {
  background: linear-gradient(90deg, #8a35ff, #197cff 55%, #14d3d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-lede {
  margin: 0;
  max-width: 70ch;
  color: var(--muted);
  font-size: 15px;
}

/* Flash ------------------------------------------------------------------- */
.flash {
  position: relative;
  margin-bottom: 18px;
  padding: 12px 44px 12px 16px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}

.flash--notice { border-left-color: var(--cyan); }
.flash--alert  { border-left-color: #ff5f6d; }

.flash__close {
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.flash__close:hover {
  color: var(--text);
}

/* Article cards ----------------------------------------------------------- */
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* The cover bleeds to the padding edge with a negative margin; without this
     its square-ish inner corners peek past the card's rounded ones. */
  overflow: hidden;
  background: var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.article-card:hover {
  transform: translateY(-3px);
  border-color: rgba(105, 119, 200, 0.55);
}

/* Cover image. The source is a remote URL of unknown dimensions, so it is
   painted as a background on a fixed 16:9 box rather than an <img>: the grid
   keeps its rhythm regardless of what comes back, and a 404 leaves the panel
   colour showing instead of a broken-image glyph. */
.article-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  margin: -18px -18px 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--panel);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.2s ease;
}

.article-card__media:hover {
  opacity: 0.88;
}

/* No image: the Astmation logo sits centred at a modest size on the panel
   colour, so it reads as a placeholder rather than a stretched photo. */
.article-card__media--fallback {
  background-size: 42% auto;
  background-color: rgba(9, 12, 38, 0.85);
}

/* Visually hidden but still announced — the media link has no text of its own. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.article-card__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
}

.article-card__title a {
  color: var(--text);
  transition: color 180ms ease;
}

.article-card__title a:hover {
  color: var(--cyan);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.article-meta__label {
  color: #7f8499;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Breaks long source URLs instead of letting them widen the card. */
.article-meta__value {
  overflow-wrap: anywhere;
}

/* A one-paragraph lead under the title. Clamped rather than truncated in Ruby
   alone so that a card whose description happens to be short does not leave a
   ragged hole in the grid: every card's text block is at most three lines tall,
   which keeps the tag row and the card bottoms aligned across a row. */
.article-card__excerpt {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Video cards ------------------------------------------------------------- */
/* Shares .article-card__media for the 16:9 background-image box; this adds
   only what a video thumbnail needs on top of it. position is the point: the
   play badge below is absolutely positioned against this box, and without a
   positioned ancestor it would centre itself on the page instead. */
.video-card__media {
  position: relative;
}

/* The play affordance. Drawn in CSS rather than shipped as an asset — it is a
   circle and a triangle, and an <img> here would be a second request per card
   plus a second thing to keep in step with the palette.
   YouTube's own thumbnails carry no play button, so without this a card reads
   as a still photograph and nothing tells the visitor the link is a video. */
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  /* Dark enough to hold the triangle against a bright thumbnail, translucent
     enough that the frame behind it still reads. */
  background: rgba(3, 6, 22, 0.62);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* The triangle: a zero-size box with one solid left border. Nudged right by
   3px because an equilateral triangle's optical centre sits left of its
   bounding box, and centred geometrically it looks off. */
.video-card__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--text);
}

/* Hover is on the link, not the badge — the badge is inside it and ignores
   pointer events of its own, so the whole thumbnail is the hit area. */
.video-card__media:hover .video-card__play {
  background: rgba(9, 217, 208, 0.22);
  border-color: var(--cyan);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Video detail ------------------------------------------------------------ */
/* Ratio box for the YouTube iframe. The embed has no intrinsic size, so an
   iframe left to itself renders at the HTML default of 300x150 — a letterbox
   strip in the middle of the page. aspect-ratio on the wrapper with the frame
   stretched to fill is what makes it 16:9 at any width.
   Pulled out to the card edges and squared at the top like
   .article-detail__media, so a video page and an article page have the same
   silhouette. */
.video-detail__player {
  aspect-ratio: 16 / 9;
  margin: -26px -26px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  /* Visible for the moment between layout and the player painting, and left
     showing if the video is region-blocked or deleted. */
  background-color: rgba(9, 12, 38, 0.85);
}

.video-detail__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

/* Chip recipe lifted from the marketing page's technology tabs. */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: #aeb3c8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.tag:hover {
  color: #f5f6ff;
  border-color: rgba(92, 130, 235, 0.5);
  transform: translateY(-1px);
}

/* Empty state ------------------------------------------------------------- */
.empty-state {
  padding: 48px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  text-align: center;
}

/* Article detail ---------------------------------------------------------- */
.article-detail {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden; /* see .article-card */
}

.article-detail__title {
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;
}

/* Detail cover: wider aspect than the cards so it does not dominate the page,
   and pulled out to the card edges the same way. */
.article-detail__media {
  aspect-ratio: 21 / 9;
  margin: -26px -26px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--panel);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.article-detail__media--fallback {
  background-size: 26% auto;
  background-color: rgba(9, 12, 38, 0.85);
}

.article-detail__meta {
  display: grid;
  gap: 8px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(53, 71, 122, 0.2);
}

/* Rich text body: ActionText output, so every element is styled defensively. */
.article-prose {
  font-size: 15.5px;
  line-height: 1.75;
  color: #dfe2f0;
  overflow-wrap: anywhere;
}

.article-prose h1,
.article-prose h2,
.article-prose h3,
.article-prose h4 {
  margin: 28px 0 10px;
  color: var(--text);
  line-height: 1.3;
  font-weight: 700;
}

.article-prose h1 { font-size: 26px; }
.article-prose h2 { font-size: 22px; }
.article-prose h3 { font-size: 19px; }

.article-prose p,
.article-prose ul,
.article-prose ol {
  margin: 0 0 14px;
}

.article-prose ul,
.article-prose ol {
  padding-left: 22px;
}

.article-prose li {
  margin-bottom: 6px;
}

.article-prose blockquote {
  margin: 18px 0;
  padding: 2px 18px;
  border-left: 3px solid var(--purple);
  color: var(--muted);
}

.article-prose code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #050a1d;
  color: var(--cyan);
  font-size: 0.9em;
}

.article-prose pre {
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #050a1d;
}

.article-prose pre code {
  padding: 0;
  border: 0;
  background: none;
  color: #dfe2f0;
}

.article-prose img {
  height: auto;
  border-radius: var(--radius);
}

.article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.article-prose th,
.article-prose td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
}

.article-prose th {
  background: var(--panel);
  color: var(--cyan);
}

/* Case studies ------------------------------------------------------------ */

/* auto-fit with a minimum rather than a column count, so two studies sit side
   by side today and a third wraps on its own without this rule changing. */
.study-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

/* Flex column so the button can be pushed to the bottom with margin-top: auto.
   The grid stretches the cards to equal height; without it the button sits
   wherever the summary happens to stop, which differs per card. */
.study-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.study-card:hover {
  transform: translateY(-3px);
  border-color: rgba(105, 119, 200, 0.55);
}

.study-card__kicker {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.study-card__title {
  margin: 8px 0 10px;
  font-size: 24px;
  line-height: 1.15;
}

.study-card__title a {
  color: var(--text);
}

.study-card__title a:hover {
  color: var(--cyan);
}

.study-card__summary {
  margin: 0 0 14px;
  color: var(--muted);
}

/* Pill list of technologies. list-style and padding are reset explicitly: it
   is a <ul> because it is a list, and the markers and indent that come with
   one are not wanted. */
.study-stack {
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}

.study-stack li {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.study-card .button {
  margin-top: auto;
  margin-right: auto;
}

/* height: auto overrides the height attribute on the tag. The attribute is
   there so the browser reserves the right box before the image decodes; without
   this rule it would also pin the rendered height to 800px and squash the
   image at any container narrower than 1600. */
.study-banner {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Matches .article-detail's measure. Long-form prose at the full container
   width runs past the line length anyone reads comfortably. */
.study-detail {
  max-width: 820px;
  margin-top: 24px;
}

.study-detail__status {
  margin: 0 0 16px;
  padding: 8px 14px;
  display: inline-block;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
}

/* Buttons ----------------------------------------------------------------- */
.button {
  min-height: 42px;
  padding: 0 22px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 7px 25px rgba(78, 43, 255, 0.25);
}

.button--primary:hover {
  color: #fff;
}

.button--secondary {
  color: #fff;
  border: 1px solid rgba(220, 226, 255, 0.55);
  background: rgba(4, 7, 24, 0.55);
}

.button--secondary:hover {
  color: #fff;
  border-color: #16d5d2;
}

/* A row of buttons closing a page. Only the top margin is its job — the
   buttons bring their own size — so it stays a layout wrapper and nothing
   else. */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Pagination --------------------------------------------------------------
   Markup comes from app/views/kaminari/public/, passed as `theme: 'public'`.
   These rules name its classes rather than Kaminari's default element shapes,
   so the admin tables — which still use the default theme — are untouched by
   anything here, and a Kaminari upgrade that changes its default markup cannot
   silently restyle the public site.

   Everything below reuses the brand tokens the cards already use, so the
   control reads as part of the page rather than as a widget dropped onto it.
   ------------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 36px;
}

/* A flex row of its own so the numbers stay together when the control wraps on
   a narrow screen: Prev and Next break to their own line rather than Prev
   ending up stranded above a number. */
.pagination__pages {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.pagination__link,
.pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* 38px tall and at least as wide, so every target clears the 36px floor for
     a thumb even when the label is a single digit. */
  min-width: 38px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: #aeb3c8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

a.pagination__link:hover {
  color: #f5f6ff;
  border-color: rgba(92, 130, 235, 0.5);
  transform: translateY(-1px);
}

/* Not folded into :hover. A keyboard user gets no hover, and the outline is the
   only thing telling them where they are in the row. */
a.pagination__link:focus-visible {
  outline: 2px solid rgba(92, 130, 235, 0.8);
  outline-offset: 2px;
  color: #f5f6ff;
}

.pagination__link.is-current {
  color: #fff;
  border-color: rgba(118, 32, 255, 0.7);
  background: linear-gradient(105deg,
              rgba(118, 32, 255, 0.2),
              rgba(40, 124, 255, 0.12),
              rgba(0, 214, 207, 0.08));
  box-shadow: 0 5px 20px rgba(76, 42, 255, 0.12);
}

/* Prev and Next on the first and last page. Rendered rather than omitted so the
   row keeps its width and the buttons keep their position — see the note in
   _paginator.html.erb. Dimmed and inert, not hidden. */
.pagination__link.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination__arrow {
  font-size: 15px;
  line-height: 1;
}

.pagination__gap {
  border-color: transparent;
  background: none;
  padding: 0 4px;
  min-width: 0;
}

.pagination__summary {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: #7c8296;
}

@media (max-width: 480px) {
  /* The words go, the arrows stay. Prev and Next are the two controls that get
     used on a phone, and at this width the labels are what push the numbers
     onto a third line. */
  .pagination__nav-label {
    display: none;
  }

  .pagination__link--nav {
    padding: 0 12px;
  }
}

/* Footer ------------------------------------------------------------------ */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: rgba(2, 4, 20, 0.72);
}

.footer-inner {
  min-height: 90px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.footer-brand {
  font-size: 19px;
}

.footer-brand img {
  width: 43px;
  height: 43px;
}

.copyright {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.social-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.social-links a {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(164, 171, 205, 0.42);
  border-radius: var(--radius);
  color: #b9bdd0;
  font-size: 20px;
  font-weight: 700;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.social-links a:hover {
  color: #fff;
  border-color: var(--cyan);
  transform: translateY(-2px);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 860px) {
  .main-nav {
    gap: 18px;
  }

  .main-nav > a:not(.nav-cta) {
    font-size: 13px;
  }

  .page-title {
    font-size: 27px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 20px 0;
    gap: 14px;
  }

  .social-links {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 28px);
  }

  .nav-cta {
    display: none;
  }

  .article-list {
    grid-template-columns: 1fr;
  }

  .article-detail {
    padding: 18px;
  }

  /* .article-detail's padding drops to 18px above, and the bleed margin has to
     follow it. Left at -26px the player is 8px wider than the card on each
     side; overflow: hidden clips it rather than scrolling the page, so the
     symptom is a silently cropped frame, which is the kind of thing nobody
     notices until a video's subtitles are cut off. */
  .video-detail__player {
    margin: -18px -18px 18px;
  }
}