/* Alder: content pages. The content hero (partials/_content-hero), the blog
   index, a blog post, a guide and the /video/{slug} watch page. Linked
   inline by those templates (page.tpl hoists it into the head).

   One reading measure (46rem) everywhere; a contents rail beside it from
   1024px. Big Golos type, calm space, no rules between blocks: blocks part
   with space, a sand or paper panel, or a Lora italic label. */

.al-chead, .al-art, .al-blog, .al-watch { --al-read: 46rem; --al-artw: calc(46rem + 72px + 240px); }

/* Content hero */
.al-chead { padding: 4px 0 32px; }
.al-chead__wrap { width: min(100% - 2 * var(--al-gutter), 48rem); margin-inline: auto; }
.al-chead--read .al-chead__wrap, .al-chead--toc .al-chead__wrap { width: min(100% - 2 * var(--al-gutter), var(--al-read)); }
.al-chead--mid .al-chead__wrap { width: min(100% - 2 * var(--al-gutter), 60rem); }
.al-chead--wide .al-chead__wrap, .al-chead--xwide .al-chead__wrap { width: min(100% - 2 * var(--al-gutter), var(--al-max)); }
.al-chead .al-crumbs { margin-bottom: 12px; }
/* A long current crumb (the article title, printed again as the h1) takes
   one line and ellipsizes instead of wrapping under its chevron. */
:is(.al-chead, .al-watch) .al-crumbs li:last-child { min-width: 0; max-width: 100%; }
:is(.al-chead, .al-watch) .al-crumbs li:last-child > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.al-chead__eyebrow { margin-bottom: 10px; }
.al-chead__h {
  font: 800 clamp(2rem, 5.2vw, 3.5rem)/1.04 var(--al-display);
  letter-spacing: -.032em; color: var(--al-ink); text-wrap: balance; overflow-wrap: break-word;
}
.al-chead--wide .al-chead__h, .al-chead--xwide .al-chead__h { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1; max-width: 16em; }
.al-chead__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.al-chead__row .own-edit {
  display: inline-flex; align-items: center; gap: 6px; flex: none; margin-top: 4px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--al-line); border-radius: 999px;
  color: var(--al-muted); font: 600 14px/1 var(--al-sans);
}
@media (hover: hover) { .al-chead__row .own-edit:hover { border-color: var(--al-ink); color: var(--al-ink); } }
.al-chead__lede { margin-top: 18px; max-width: 36em; font: italic 400 19px/1.5 var(--al-serif); color: var(--al-body); text-wrap: pretty; }
.al-chead__meta { margin-top: 18px; font: 400 14.5px/1.6 var(--al-sans); color: var(--al-muted); }
.al-chead__meta a { color: var(--al-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--al-sage); text-underline-offset: 3px; }
.al-chead__meta a:hover { text-decoration-color: currentColor; }
.al-chead__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.al-chead__extras { margin-top: 24px; }
@media (min-width: 921px) {
  .al-chead { padding: 16px 0 48px; }
  .al-chead__lede { font-size: 21px; }
}
@media (min-width: 1024px) {
  .al-chead--toc .al-chead__wrap { width: min(100% - 2 * var(--al-gutter), var(--al-artw)); }
  .al-chead--toc .al-chead__h, .al-chead--toc .al-chead__lede { max-width: var(--al-read); }
}

/* Article: one reading column. From 1024px a post with contents gets the
   rail; a post without them keeps the column and lets the picture run wider. */
.al-art__wrap { width: min(100% - 2 * var(--al-gutter), var(--al-read)); margin-inline: auto; padding-bottom: 72px; }
.al-art__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.al-art__fig { margin-bottom: 32px; }
.al-art__fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--al-sand); }
.al-art__fig figcaption { margin-top: 10px; font: 400 13px/1.5 var(--al-sans); color: var(--al-muted); }
.al-art__tags { margin-bottom: 28px; }
.al-art__tag b { margin-left: 8px; font: 600 12px/1 var(--al-sans); color: var(--al-muted); }
.al-art__rest:not([hidden]) { display: contents; }
.al-art__tag--more { background: transparent; border-color: var(--al-line); color: var(--al-muted); }
@media (min-width: 921px) { .al-art__fig img { border-radius: var(--al-r); } }
@media (min-width: 1024px) {
  .al-art__wrap { width: min(100% - 2 * var(--al-gutter), var(--al-artw)); padding-bottom: 96px; }
  .al-art:not(.al-art--toc) .al-art__grid > :not(.al-art__fig) { width: 100%; max-width: var(--al-read); margin-inline: auto; }
  .al-art:not(.al-art--toc) .al-art__author { max-width: var(--al-read); margin-inline: auto; }
  .al-art--toc .al-art__grid { grid-template-columns: minmax(0, var(--al-read)) 240px; column-gap: 72px; align-items: start; }
  .al-art--toc .al-art__grid > * { grid-column: 1; }
  .al-art--toc .al-art__grid > .al-art__fig { grid-column: 1 / -1; margin-bottom: 40px; }
  .al-art--toc .al-art__grid > .al-art__toc { grid-column: 2; grid-row: 2 / span 5; }
  .al-art--toc .al-art__author { max-width: var(--al-read); }
}

/* Contents. Phone: a sand panel that folds. From 1024px: a sticky rail
   (the base script keys on position: sticky to keep it open). */
.al-art__toc { margin-bottom: 32px; border-radius: var(--al-r); background: var(--al-sand); }
.al-art__toc summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; }
.al-art__toclbl { font: 600 15px/1.2 var(--al-sans); color: var(--al-ink); }
.al-art__toccount { font: 400 13px/1.2 var(--al-sans); color: var(--al-muted); }
.al-art__toc summary .al-ico { width: 18px; height: 18px; margin-left: auto; color: var(--al-ink); transition: transform .2s var(--al-ease); }
.al-art__toc[open] summary .al-ico { transform: rotate(180deg); }
.al-art__toc .ocd-art-toc__nav, .al-guide__box .ocd-art-toc__nav { display: grid; padding: 0 8px 12px; }
.al-art .ocd-art-toc__nav a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px;
  font: 400 15px/1.35 var(--al-sans); color: var(--al-body);
}
.al-art .ocd-art-toc__nav a.is-sub { padding-left: 26px; font-size: 14px; color: var(--al-muted); }
.al-art .ocd-art-toc__nav a.is-active { color: var(--al-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--al-moss); border-radius: 0 10px 10px 0; }
@media (hover: hover) { .al-art .ocd-art-toc__nav a:hover { color: var(--al-ink); background: rgba(14, 42, 27, .05); } }
@media (prefers-reduced-motion: reduce) { .al-art__toc summary .al-ico { transition: none; } }
@media (min-width: 1024px) {
  .al-art--toc .al-art__toc { position: sticky; top: calc(var(--al-hdr-h) + 32px); margin: 0; background: transparent; border-radius: 0; }
  .al-art--toc .al-art__toc summary { min-height: 0; padding: 0 0 12px; cursor: default; }
  .al-art--toc .al-art__toc summary .al-ico, .al-art--toc .al-art__toccount { display: none; }
  .al-art--toc .al-art__toclbl { font: italic 400 17px/1.3 var(--al-serif); color: var(--al-moss); }
  .al-art--toc .al-art__toc .ocd-art-toc__nav {
    max-height: calc(100vh - var(--al-hdr-h) - 120px); padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .al-art--toc .ocd-art-toc__nav a { min-height: 36px; padding: 6px 12px; font-size: 14px; }
  .al-art--toc .ocd-art-toc__nav a.is-sub { padding-left: 26px; font-size: 13.5px; }
}
@supports selector(::details-content) {
  @media (min-width: 1024px) { .al-art--toc .al-art__toc::details-content { content-visibility: visible; } }
}

/* Prose. The base prose sheet forces its fonts through two tokens with
   !important, so the tokens are re-pointed here rather than fought. */
.al-art .al-prose {
  --ocd-font-ui: var(--al-sans); --ocd-font-display: var(--al-display);
  max-width: none; font: 400 17px/1.75 var(--al-sans); color: var(--al-body); overflow-wrap: break-word;
}
.al-art .al-prose > :first-child { margin-top: 0; }
.al-art .al-prose :is(p, ul, ol, dl, table, figure, blockquote, pre) { margin: 0 0 1.2em; }
.al-art .al-prose :is(h2, h3, h4) {
  scroll-margin-top: calc(var(--al-hdr-h) + 24px);
  font-family: var(--al-display); font-style: normal; color: var(--al-ink); text-wrap: balance;
  border: 0; padding-bottom: 0;
}
.al-art .al-prose h2 { margin: 2em 0 .6em; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.024em; }
.al-art .al-prose h3 { margin: 1.7em 0 .5em; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
/* Section anchors: the base sizes these in its own inline sheet, which the
   Alder post does not load. Same behaviour: quiet until the heading is
   hovered or the link is focused; absent on touch (the TOC covers it). */
.al-art .al-prose .ocd-art-anchor { display: inline-block; margin-left: .35em; color: var(--al-sage); text-decoration: none; vertical-align: middle; opacity: 0; transition: opacity .15s var(--al-ease); }
.al-art .al-prose .ocd-art-anchor svg { display: block; width: .6em; height: .6em; }
.al-art .al-prose .ocd-art-anchor:focus-visible { opacity: 1; }
@media (hover: hover) { .al-art .al-prose :is(h2, h3):hover .ocd-art-anchor { opacity: 1; } .al-art .al-prose .ocd-art-anchor:hover { color: var(--al-moss); } }
@media (hover: none) { .al-art .al-prose .ocd-art-anchor { display: none; } }
.al-art .al-prose h4 { margin: 1.5em 0 .4em; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.al-art .al-prose :is(strong, b) { color: var(--al-ink); font-weight: 600; }
.al-art .al-prose a { color: var(--al-moss); text-decoration: underline; text-decoration-color: var(--al-sage); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.al-art .al-prose a:hover { color: var(--al-ink); text-decoration-color: currentColor; }
.al-art .al-prose ul { padding-left: 1.3em; list-style: disc; }
.al-art .al-prose ol { padding-left: 1.4em; list-style: decimal; }
.al-art .al-prose li { margin: 0 0 .5em; padding-left: .2em; }
.al-art .al-prose li::marker { color: var(--al-moss); }
.al-art .al-prose li > :is(ul, ol) { margin: .5em 0 0; }
.al-art .al-prose blockquote {
  --ocd-font-ui: var(--al-serif);
  margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--al-sage);
  font: italic 400 1.12em/1.55 var(--al-serif); color: var(--al-ink);
}
.al-art .al-prose blockquote > :last-child { margin-bottom: 0; }
.al-art .al-prose img { height: auto; border-radius: 12px; }
.al-art .al-prose figure { margin: 2em 0; }
.al-art .al-prose figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--al-muted); }
.al-art .al-prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 1.6em 0; border: 0; border-radius: 12px; }
.al-art .al-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.al-art .al-prose :is(th, td) { min-width: 9rem; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--al-sand-2); text-align: left; vertical-align: top; background: transparent; }
.al-art .al-prose thead th { background: var(--al-sand); color: var(--al-ink); font-weight: 600; }
.al-art .al-prose hr { height: 0; margin: 2.4em 0; border: 0; }
.al-art .al-prose pre { overflow-x: auto; padding: 16px; border-radius: 12px; background: var(--al-sand); font-size: 14px; }
@media (min-width: 921px) { .al-art .al-prose { font-size: 18px; } }

/* Video, share */
.al-art__h2 { font: 800 clamp(1.5rem, 3vw, 2.25rem)/1.1 var(--al-display); letter-spacing: -.026em; color: var(--al-ink); text-wrap: balance; }
.al-art__video { margin-top: 48px; }
.al-art__video figure { margin-top: 18px; }
.al-art__video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.al-art__share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 48px; }
.al-art__sharelbl { flex-basis: 100%; font: italic 400 17px/1.3 var(--al-serif); color: var(--al-moss); }
.al-art__share .al-round svg { width: 18px; height: 18px; }
.al-art__copy svg { width: 18px; height: 18px; }
@media (min-width: 640px) { .al-art__sharelbl { flex-basis: auto; margin-right: 6px; } }

/* Author */
.al-art__author {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start;
  margin-top: 64px; padding: 24px 20px; border-radius: var(--al-r); background: var(--al-sand);
}
.al-art__avatar { position: relative; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--al-paper); }
.al-art__avatar img { width: 100%; height: 100%; object-fit: cover; }
.al-art__avatar > span { display: grid; place-items: center; height: 100%; font: 800 22px/1 var(--al-display); color: var(--al-ink); }
.al-art__avatar--logo { border-radius: 14px; background: #fff; }
.al-art__avatar--logo img { object-fit: contain; padding: 6px; }
.al-art__abody { min-width: 0; }
.al-art__abody > .al-label { font-size: 16px; }
.al-art__aname { display: inline-flex; align-items: center; min-height: 44px; font: 800 22px/1.15 var(--al-display); letter-spacing: -.02em; color: var(--al-ink); }
a.al-art__aname:hover { color: var(--al-moss); }
.al-art__facts { font: 400 14px/1.55 var(--al-sans); color: var(--al-muted); }
.al-art__facts b { color: var(--al-ink); font-weight: 600; }
.al-art__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--al-moss); font-weight: 600; vertical-align: middle; }
.al-art__verified .al-ico { width: 15px; height: 15px; }
.al-art__bio {
  margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--al-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.al-art__profile { margin-top: 8px; }
.al-art__moreby { margin-top: 20px; }
.al-art__morelbl { font: italic 400 16px/1.3 var(--al-serif); color: var(--al-moss); }
.al-art__moreby ul { margin-top: 6px; }
.al-art__moreby a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 0; font: 500 15px/1.4 var(--al-sans); color: var(--al-ink); }
.al-art__moreby a:hover span { color: var(--al-moss); }
.al-art__moreby time { flex: none; font-size: 13px; color: var(--al-muted); }
@media (min-width: 640px) {
  .al-art__author { grid-template-columns: 88px minmax(0, 1fr); gap: 24px; padding: 32px; }
  .al-art__avatar { width: 88px; height: 88px; }
  .al-art__avatar > span { font-size: 28px; }
}

/* Related reading and the closing call */
.al-art__related { padding-bottom: 72px; }
.al-art__relh, .al-blog__h2 { font: 800 clamp(1.75rem, 3.6vw, 2.75rem)/1.05 var(--al-display); letter-spacing: -.03em; color: var(--al-ink); text-wrap: balance; }
.al-art__relsub, .al-blog__sub { margin-top: 10px; max-width: 36em; font: italic 400 18px/1.5 var(--al-serif); color: var(--al-body); }
.al-art__related .al-posts { margin-top: 40px; }
.al-art__cta { padding: 64px 0; background: var(--al-paper); text-align: center; }
.al-art__ctawrap { width: min(100% - 2 * var(--al-gutter), 40rem); margin-inline: auto; }
.al-art__ctah { font: 800 clamp(1.85rem, 4.4vw, 3rem)/1.04 var(--al-display); letter-spacing: -.03em; color: var(--al-ink); text-wrap: balance; }
.al-art__ctawrap > p { margin-top: 12px; font: italic 400 18px/1.5 var(--al-serif); color: var(--al-body); }
.al-art__cta .al-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
@media (min-width: 921px) {
  .al-art__related { padding-bottom: 120px; }
  .al-art__cta { padding: 96px 0; }
  .al-art__ctawrap > p { font-size: 19px; }
}

/* Reading progress, under the fixed header */
.al-art__progress { position: fixed; left: 0; right: 0; top: var(--al-hdr-h); z-index: 40; height: 3px; pointer-events: none; }
.al-art__progress span { display: block; height: 100%; background: var(--al-brand); transform: scaleX(0); transform-origin: 0 50%; }

/* Blog index */
.al-blog { padding-bottom: 72px; }
.al-blog #browse { scroll-margin-top: calc(var(--al-hdr-h) + 16px); }
.al-blog .al-blog__grid { margin-top: 8px; }
.al-blog__empty { margin-top: 8px; }
.al-blog__rel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.al-blog__rellbl { font: italic 400 17px/1.3 var(--al-serif); color: var(--al-moss); }
.al-blog__guides { margin-top: 72px; padding: 72px 0; background: var(--al-sand); }
.al-blog__guides .al-label { margin-bottom: 8px; }
.al-blog__railhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 40px; }
.al-blog__h3 { font: 800 22px/1.15 var(--al-display); letter-spacing: -.02em; color: var(--al-ink); }
.al-blog__all { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.2 var(--al-sans); color: var(--al-moss); }
.al-blog__all:hover { color: var(--al-ink); }
.al-blog__railhead .al-rownav { margin-left: auto; }
.al-gcards { --g: 16px; gap: var(--g); margin-top: 16px; padding-block: 4px 8px; }
.al-gcards > .al-gcard { width: min(78vw, 300px); }
.al-gcard {
  display: flex; flex-direction: column; gap: 10px; min-height: 200px; padding: 24px;
  border-radius: var(--al-r); background: #fff; color: var(--al-ink); transition: background-color .18s;
}
.al-gcard__h { font: 800 20px/1.15 var(--al-display); letter-spacing: -.02em; text-wrap: balance; }
.al-gcard__p {
  font: 400 15px/1.55 var(--al-sans); color: var(--al-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.al-gcard__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font: 600 15px/1.2 var(--al-sans); color: var(--al-moss); }
.al-gcard__cta .al-ico { width: 16px; height: 16px; }
@media (hover: hover) { .al-gcard:hover { background: var(--al-page); } .al-gcard:hover .al-gcard__h { color: var(--al-moss); } }
@media (min-width: 760px) { .al-gcards > .al-gcard { width: calc((100% - 2 * var(--g)) / 3); } }
@media (min-width: 921px) {
  .al-blog { padding-bottom: 96px; }
  .al-blog__guides { margin-top: 96px; padding: 120px 0; }
  .al-gcards { --g: 24px; }
}
@media (min-width: 1200px) { .al-gcards > .al-gcard { width: calc((100% - 3 * var(--g)) / 4); } }

/* Guide: the reading column, then a sticky rail with the contents and the
   other guides from 1024px. On a phone the contents fold above the body. */
.al-guide__rail { margin-top: 56px; }
.al-guide__box--toc { display: none; }
.al-guide__box { padding: 20px 12px 12px; border-radius: var(--al-r); background: var(--al-sand); }
.al-guide__boxh { padding: 0 10px 8px; font: italic 400 17px/1.3 var(--al-serif); color: var(--al-moss); }
.al-guide__list { display: grid; }
.al-guide__list a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; font: 400 15px/1.35 var(--al-sans); color: var(--al-body); }
.al-guide__list a.is-on { color: var(--al-ink); font-weight: 600; background: rgba(255, 255, 255, .7); }
@media (hover: hover) { .al-guide__list a:hover { color: var(--al-ink); background: rgba(14, 42, 27, .05); } }
.al-guide__allg { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 10px; font: 600 15px/1.2 var(--al-sans); color: var(--al-moss); }
.al-guide__pros { margin-top: 64px; }
.al-guide__prosub { margin-top: 8px; font: italic 400 18px/1.5 var(--al-serif); color: var(--al-body); }
.al-guide__pros .al-reslist { margin-top: 24px; }
.al-guide__why { display: flex; align-items: center; gap: 8px; padding-top: 16px; font: 600 14px/1.4 var(--al-sans); color: var(--al-moss); }
.al-guide__why .al-ico { flex: none; width: 16px; height: 16px; }
.al-guide__why + * { margin-top: 0; }
@media (min-width: 1024px) {
  .al-guide__grid { display: grid; grid-template-columns: minmax(0, var(--al-read)) 240px; column-gap: 72px; align-items: start; }
  .al-guide__fold { display: none; }
  .al-guide__rail { grid-column: 2; grid-row: 1; height: 100%; margin-top: 0; }
  .al-guide__sticky {
    position: sticky; top: calc(var(--al-hdr-h) + 32px);
    max-height: calc(100vh - var(--al-hdr-h) - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .al-guide__box, .al-guide__box--toc { display: block; padding: 0; background: transparent; border-radius: 0; }
  .al-guide__box + .al-guide__box { margin-top: 36px; }
  .al-guide__boxh { padding: 0 0 12px; }
  .al-guide__box .ocd-art-toc__nav { padding: 0; }
  .al-guide .al-guide__box .ocd-art-toc__nav a, .al-guide__list a { min-height: 36px; padding: 6px 12px; font-size: 14px; }
  .al-guide .al-guide__box .ocd-art-toc__nav a.is-sub { padding-left: 26px; }
  .al-guide__allg { padding: 0 12px; font-size: 14px; }
}

/* Watch page */
.al-watch__wrap { width: min(100% - 2 * var(--al-gutter), 60rem); margin-inline: auto; }
.al-watch__wrap:first-child { padding-top: 4px; }
.al-watch .al-crumbs { margin-bottom: 12px; }
.al-watch__h { font: 800 clamp(1.9rem, 4.6vw, 3.25rem)/1.05 var(--al-display); letter-spacing: -.03em; color: var(--al-ink); text-wrap: balance; overflow-wrap: break-word; }
.al-watch__city { margin-top: 10px; font: italic 400 18px/1.4 var(--al-serif); color: var(--al-body); }
.al-watch__stage { width: min(100% - 2 * var(--al-gutter), 60rem); margin: 28px auto 0; }
.al-watch__desc { margin-top: 28px; max-width: var(--al-read); font-size: 17px; line-height: 1.7; color: var(--al-body); }
.al-watch__who {
  display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 16px;
  border-radius: var(--al-r); background: var(--al-sand); color: var(--al-ink); transition: background-color .18s;
}
@media (hover: hover) { .al-watch__who:hover { background: var(--al-sand-2); } }
.al-watch__face { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--al-paper); }
.al-watch__face img { width: 100%; height: 100%; object-fit: cover; }
.al-watch__face > span { display: grid; place-items: center; height: 100%; font: 800 22px/1 var(--al-display); }
.al-watch__id { display: grid; gap: 2px; min-width: 0; }
.al-watch__name { font: 800 20px/1.2 var(--al-display); letter-spacing: -.02em; }
.al-watch__meta { font: 400 14px/1.4 var(--al-sans); color: var(--al-muted); }
.al-watch__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 15px/1.2 var(--al-sans); color: var(--al-moss); }
.al-watch__go .al-ico { width: 16px; height: 16px; }
.al-watch__more { margin-top: 72px; padding-bottom: 72px; }
.al-watch__moreh { margin-bottom: 28px; font: 800 clamp(1.6rem, 3.2vw, 2.25rem)/1.1 var(--al-display); letter-spacing: -.026em; color: var(--al-ink); }
@media (min-width: 640px) { .al-watch__who { max-width: 34rem; padding: 18px 22px; } }
@media (min-width: 921px) {
  .al-watch__stage { margin-top: 36px; }
  .al-watch__more { margin-top: 120px; padding-bottom: 120px; }
}