/*
  AF Post components.

  Every class here appears in a template partial or include. Layout of whole
  pages lives in pages/*.css. Tokens and typographic voices live in base.css.
*/

@layer components {

  /* Buttons and inputs */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control);
    padding: 0 22px;
    background: var(--red);
    color: var(--white);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 0;
    white-space: nowrap;
  }
  .btn:hover { background: var(--red-2); color: var(--white); }
  .btn.btn-sm { height: 36px; padding: 0 16px; font-size: 12px; }
  .btn.btn-ghost { background: transparent; color: var(--ink); border: var(--line); }
  .btn.btn-ghost:hover { background: var(--ink); color: var(--paper); }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

  .input {
    height: var(--control);
    width: 100%;
    border: var(--line);
    background: var(--white);
    padding: 0 14px;
    font-size: 16px;
    color: var(--ink);
  }
  .input::placeholder { color: var(--muted); }
  .input-row { display: flex; }
  .input-row .input { border-right: 0; flex: 1 1 auto; }

  .field-error {
    font-family: var(--mono);
    font-size: var(--fs-label);
    color: var(--red);
    padding-top: 6px;
  }

  /* Top strip: date, newsletter line, account links */

  .topstrip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-bottom: var(--line);
    gap: 16px;
  }
  .topstrip .links { display: flex; gap: 24px; }
  .topstrip .promo { color: var(--ink); }
  .topstrip .promo a { color: var(--red); font-weight: 600; }
  .topstrip .date-short { display: none; }
  .topstrip .date-long, .topstrip .date-short { white-space: nowrap; }

  /* Masthead: full on the home page, compact elsewhere */

  .masthead {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0 22px;
    gap: 14px;
  }
  .masthead .wordmark {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .masthead .mast { font-size: var(--fs-mast); }
  .masthead .flag { width: 140px; height: 74px; }
  .masthead .tagline { color: var(--ink); text-align: center; }

  .flag { display: block; flex: 0 0 auto; }

  /* Section nav */

  /* A ruled row of cells, packed left. The search cell sits at the right end. */
  .section-nav {
    display: flex;
    align-items: stretch;
    height: 46px;
    border-top: var(--line);
    border-bottom: var(--line-thick);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-right: var(--hair);
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .section-nav a:first-child { padding-left: 0; }
  .section-nav a.is-current, .section-nav a[aria-current="page"] {
    color: var(--red);
    box-shadow: inset 0 -3px 0 var(--red);
  }
  .section-nav a.nav-end {
    margin-left: auto;
    border-right: 0;
    border-left: var(--hair);
    padding-right: 0;
    color: var(--muted);
  }
  .section-nav a.nav-end:hover { color: var(--red); }

  /* Ticker: the latest three feed items on one line */

  .ticker {
    display: flex;
    align-items: stretch;
    height: 40px;
    border-bottom: var(--line);
  }
  .ticker .ticker-label {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--red);
    color: var(--white);
    font-family: var(--mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 0 0 auto;
  }
  /* The crawl: two identical tracks scroll left; when the first has fully
     passed, the loop restarts at the same pixel, so it reads as endless.
     Hover or keyboard focus pauses it. Reduced motion shows it still. */
  .ticker .ticker-items {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--mono);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .ticker .ticker-track {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 0 24px;
    flex: 0 0 auto;
    animation: ticker-crawl calc(var(--ticker-items, 3) * 30s) linear infinite;
  }
  .ticker .ticker-items:hover .ticker-track,
  .ticker .ticker-items:focus-within .ticker-track { animation-play-state: paused; }
  .ticker .ticker-track a { color: var(--ink); }
  .ticker .ticker-track a:hover { color: var(--red); }
  .ticker .ticker-items .time { color: var(--red); padding-right: 8px; }
  .ticker .ticker-empty { padding: 0 18px; color: var(--muted); }
  @keyframes ticker-crawl {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ticker .ticker-track { animation: none; padding-left: 18px; }
    .ticker .ticker-track[aria-hidden="true"] { display: none; }
    .ticker .ticker-items { mask-image: none; }
  }

  /* Story: a headline unit used in the lead, story grids, and rails */

  .story {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .story .hl { font-size: var(--fs-h2); }
  .story .deck { font-size: 18px; }
  .story figure { display: flex; flex-direction: column; }
  .story img { width: 100%; }

  .story-lead { gap: 14px; }
  .story-lead .hl { font-size: var(--fs-h1); }
  .story-lead .deck { font-size: 24px; max-width: 30em; }
  .story-lead figure { padding-top: 6px; }

  /* Three ruled columns */

  .story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: var(--line-thick);
    padding-top: var(--gutter);
  }
  .story-grid > .story { padding: 0 var(--gutter); border-left: var(--hair); }
  .story-grid > .story:first-child { padding-left: 0; border-left: 0; }
  .story-grid > .story:last-child { padding-right: 0; }

  /* Rail: the right column with a left rule */

  .rail {
    display: flex;
    flex-direction: column;
    gap: 28px;
    border-left: var(--line);
    padding-left: var(--gutter);
  }

  .rail-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
  }
  .rail-head .sect { font-size: 18px; display: flex; align-items: center; gap: 10px; }
  .rail-head .lbl a, .rail-head a.lbl { color: var(--red); }

  .rail-title {
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom: var(--line-thick);
  }

  /* Feed: timestamped items, refreshed by htmx on a timer */

  .feed { display: flex; flex-direction: column; }
  .feed-item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-top: var(--hair);
    font-size: 16px;
    line-height: 1.4;
  }
  .feed-item .time { padding-top: 4px; }
  .feed-item:last-child { border-bottom: var(--line); }
  .feed-item a { color: var(--ink); }
  .feed-item a:hover { color: var(--red); }

  /* Poll box */

  .poll {
    display: flex;
    flex-direction: column;
    border: var(--line);
    padding: 18px 20px 20px;
  }
  .poll .kicker { padding-bottom: 8px; }
  .poll .question { font-size: 22px; padding-bottom: 14px; }
  .poll-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 0;
    border-top: var(--hair);
    font-size: 16px;
    cursor: pointer;
  }
  .poll-opt:last-of-type { border-bottom: var(--line); }
  .poll-opt input[type="radio"] {
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: var(--line);
    background: var(--white);
    flex: 0 0 auto;
  }
  .poll-opt input[type="radio"]:checked { background: var(--red); border-color: var(--red); }
  .poll-opt .pct {
    margin-left: auto;
    font-family: var(--mono);
    font-size: var(--fs-label);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .poll-opt .bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--red);
  }
  .poll-opt.has-result { position: relative; cursor: default; padding-bottom: 12px; }
  .poll-opt.has-result .pct { color: var(--ink); font-weight: 600; }
  .poll .field-error { padding: 8px 0 0; }
  .poll-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    gap: 12px;
  }

  /* Catalog: dense ruled list of editorials */

  .catalog-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: var(--line-thick);
    padding-bottom: 8px;
  }
  .catalog-head .sect { font-size: 26px; }
  .catalog-head a.lbl { color: var(--red); }

  .catalog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
  }
  .catalog > div { display: flex; flex-direction: column; }
  .cat-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-top: var(--hair);
    align-items: baseline;
  }
  .catalog > div > .cat-row:first-child { border-top: 0; }
  .cat-row .date { font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
  .cat-row .body { display: flex; flex-direction: column; gap: 4px; }
  .cat-row .hl-sm { font-size: 18px; }
  .cat-row .meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); }
  .cat-row .meta .cat { color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

  /* Author index rows */

  .author-rows { display: flex; flex-direction: column; border-top: var(--line-thick); }
  .author-row {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 110px;
    gap: 24px;
    padding: 14px 0;
    border-bottom: var(--hair);
    align-items: baseline;
  }
  .author-row .hl { font-size: 24px; line-height: 1.1; }
  .author-row .bio { font-size: 16px; line-height: 1.4; color: var(--ink-2); }
  .author-row .count { font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .author-rows > .author-row:last-child { border-bottom: var(--line-thick); }

  /* Section index table */

  .tabs {
    display: flex;
    border: var(--line);
    border-bottom: var(--line-thick);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    font-family: var(--mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 16px;
    border-right: var(--line);
    white-space: nowrap;
  }
  .tab.is-current, .tab[aria-current="page"] { background: var(--ink); color: var(--paper); }
  .tab.tab-end { margin-left: auto; border-right: 0; border-left: var(--line); color: var(--muted); }

  .index-row {
    display: grid;
    grid-template-columns: 110px 140px minmax(0, 1fr) 200px 80px;
    gap: 20px;
    padding: 16px 0;
    border-top: var(--hair);
    align-items: baseline;
  }
  .index-row.index-head { border-top: 0; padding: 10px 0; }
  .index-row .date { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
  .index-row .cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); font-weight: 600; }
  .index-row .hl { font-size: 26px; line-height: 1.1; margin-bottom: 4px; }
  .index-row .deck { font-size: 17px; }
  .index-row .author { font-family: var(--mono); font-size: 12.5px; }
  .index-row .type { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: right; }
  .index-rows > .index-row:last-child { border-bottom: var(--line-thick); }
  .index-empty { font-style: italic; color: var(--muted); padding: 24px 0; border-top: var(--hair); border-bottom: var(--line-thick); }
  .results-count { padding: 8px 0 12px; }

  .section-head.author-head { grid-template-columns: 140px minmax(0, 1fr); gap: 32px; align-items: center; }
  .author-head .author-portrait img { width: 140px; height: 140px; object-fit: cover; }

  .correction {
    border: var(--line);
    border-left: 4px solid var(--red);
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: var(--fs-body);
  }
  .correction .kicker { padding-bottom: 4px; }

  .prose .rich p { font-size: var(--fs-read); line-height: 1.55; margin: 0 0 22px; text-wrap: pretty; }
  .prose .rich a { border-bottom: 1px solid var(--red); }
  .prose .rich h2, .prose .rich h3 { font-family: var(--headline-sm); font-weight: 700; line-height: 1.2; margin: 12px 0 14px; }
  .prose .rich h2 { font-size: 26px; }
  .prose .rich h3 { font-size: 21px; }
  .prose .rich ul, .prose .rich ol { padding-left: 1.2em; margin: 0 0 22px; font-size: var(--fs-read); line-height: 1.5; }
  .prose .rich ul { list-style: square; }
  .prose .rich ol { list-style: decimal; }
  .prose .dropcap > p:first-child::first-letter {
    font-family: var(--headline);
    font-size: 84px;
    line-height: 0.8;
    float: left;
    padding: 8px 10px 0 0;
    color: var(--red);
  }
  .prose blockquote.pull p { font: inherit; margin: 0; }
  .prose .rich img { margin: 8px 0 28px; }

  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    gap: 16px;
  }
  .pagination .pages { display: flex; border: var(--line); }
  .pagination .pages a, .pagination .pages span {
    font-family: var(--mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-left: var(--line);
  }
  .pagination .pages > :first-child { border-left: 0; }
  .pagination .pages .is-current { background: var(--ink); color: var(--paper); }

  /* Newsletter box */

  .newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 40px;
    align-items: center;
    border: 2px solid var(--red);
    padding: 26px 28px;
  }
  .newsletter .copy { display: flex; flex-direction: column; gap: 6px; }
  .newsletter .sect { font-size: 28px; }
  .newsletter .deck { font-size: 18px; }
  .newsletter-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 2px solid var(--red);
    padding: 18px;
  }
  .newsletter-compact .sect { font-size: 16px; }
  .newsletter-confirm {
    font-family: var(--mono);
    font-size: var(--fs-small);
    color: var(--ink);
  }

  /* Article parts */

  .article-head { display: flex; flex-direction: column; gap: 16px; }
  .article-head .hl { font-size: 80px; }
  .article-head .deck { font-size: 26px; max-width: 28em; }

  .author-card {
    display: flex;
    gap: 14px;
    align-items: center;
  }
  .author-card .portrait { width: 56px; height: 56px; background: var(--rule); flex: 0 0 auto; object-fit: cover; }
  .author-card .name { font-weight: 600; font-size: 18px; }
  .author-card .role { font-size: 11px; }

  .article-meta { display: flex; gap: 16px; padding-top: 6px; flex-wrap: wrap; }

  .prose { display: flex; flex-direction: column; }
  .prose p { font-size: var(--fs-read); line-height: 1.55; margin: 0 0 22px; text-wrap: pretty; }
  .prose p a { border-bottom: 1px solid var(--red); }
  .prose h2 { font-family: var(--headline-sm); font-weight: 700; font-size: 26px; line-height: 1.2; margin: 12px 0 14px; }
  .prose figure { margin: 8px 0 28px; }
  .prose .dropcap::first-letter {
    font-family: var(--headline);
    font-size: 84px;
    line-height: 0.8;
    float: left;
    padding: 8px 10px 0 0;
    color: var(--red);
  }
  .prose .pull {
    font-family: var(--headline-sm);
    font-style: italic;
    font-size: 32px;
    line-height: 1.15;
    margin: 8px 0 30px;
    padding: 18px 0;
    border-top: var(--line-thick);
    border-bottom: var(--line);
    text-wrap: balance;
  }
  .prose .embed { margin: 8px 0 28px; border: var(--line); }

  .article-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: var(--line-thick);
    border-bottom: var(--line);
    padding: 14px 0;
    margin-top: 12px;
    gap: 16px;
  }
  .article-foot .tags span { color: var(--red); }
  .article-foot .share { display: flex; gap: 16px; }

  .author-box {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 20px;
    padding: 24px 0;
    border-bottom: var(--line);
  }
  .author-box .portrait { width: 96px; height: 96px; background: var(--rule); object-fit: cover; }
  .author-box .body { display: flex; flex-direction: column; gap: 6px; }
  .author-box .hl { font-size: 26px; }
  .author-box p { font-size: 17px; line-height: 1.45; color: var(--ink-2); }

  .related { display: flex; flex-direction: column; }
  .related-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: var(--hair); }
  .related-item .hl-sm { font-size: 19px; line-height: 1.15; }
  .related-item .meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
  .related-item .cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); font-weight: 600; }

  /* Section page header */

  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    align-items: end;
    padding: 40px 0 20px;
  }
  .section-head .title { display: flex; flex-direction: column; gap: 10px; }
  .section-head .mast { font-size: 60px; }
  .section-head .intro { font-style: italic; font-size: 20px; color: var(--ink-2); }
  .section-head .search { display: flex; flex-direction: column; gap: 8px; }

  /* Footer */

  .footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--gutter);
    border-top: var(--line-thick);
    padding-top: 18px;
    margin-top: 48px;
  }
  .footer .brand { display: flex; flex-direction: column; gap: 8px; }
  .footer .wordmark { display: flex; align-items: center; gap: 10px; }
  .footer .mast { font-size: 26px; }
  .footer .flag { width: 38px; height: 20px; }
  .footer .col { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
  .footer .col .head { color: var(--muted); }

  /* htmx states */

  .htmx-indicator { opacity: 0; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
  .htmx-request .btn { opacity: 0.6; }
  @media (prefers-reduced-motion: no-preference) {
    .htmx-indicator { transition: opacity 0.15s; }
  }

  /* Tip banner under the ticker on the front page */

  .tip-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: var(--hair);
    font-size: var(--fs-small);
  }
  .tip-banner a { color: var(--red); white-space: nowrap; }

  /* Feed pages: news feed and X posts */

  .feed-list { display: flex; flex-direction: column; border-top: var(--line-thick); }
  .feed-entry {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 110px;
    gap: 24px;
    padding: 16px 0;
    border-bottom: var(--hair);
    align-items: baseline;
  }
  .feed-entry .time { padding-top: 3px; }
  .feed-entry .text { font-size: 18px; line-height: 1.45; }
  .feed-entry .source { color: var(--red); text-align: right; white-space: nowrap; }
  .feed-list > .feed-entry:last-of-type { border-bottom: var(--line-thick); }
  .feed-rss { align-self: end; }

  /* Polls page */

  .polls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    border-top: var(--line-thick);
    padding-top: 28px;
  }
  .polls-cell { display: flex; flex-direction: column; gap: 10px; }

  /* Forms: tip page and comments */

  .field { display: flex; flex-direction: column; gap: 6px; }
  .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .input.textarea { height: auto; padding: 10px 14px; line-height: 1.45; resize: vertical; }
  .check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.45; }
  .check input { width: 14px; height: 14px; margin-top: 4px; appearance: none; border: var(--line); background: var(--white); flex: 0 0 auto; }
  .check input:checked { background: var(--red); border-color: var(--red); }
  .form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 4px; }
  .form-note { padding: 0; }
  .form-done { border: 2px solid var(--red); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-read); }
  .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .cf-turnstile { min-height: 65px; }
  .tip-form form { display: flex; flex-direction: column; gap: 18px; }
  .tip-form .lbl.field-error { color: var(--red); }

  .comments { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; border-top: var(--line-thick); padding-top: 14px; }
  .comments-head { display: flex; justify-content: space-between; align-items: baseline; }
  .comments-head .sect { font-size: 15px; }
  .comment-list { display: flex; flex-direction: column; }
  .comment { padding: 12px 0; border-top: var(--hair); display: flex; flex-direction: column; gap: 4px; }
  .comment-meta { font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); }
  .comment-meta b { color: var(--ink); font-weight: 500; margin-right: 8px; }
  .comment-body { font-size: var(--fs-body); line-height: 1.5; }
  .comment-empty { font-style: italic; color: var(--muted); padding: 8px 0 4px; }
  .comment-form { display: flex; flex-direction: column; gap: 14px; border-top: var(--line); padding-top: 16px; }
  .comment-form .field-row { grid-template-columns: minmax(0, 320px); }
  .comments-head .sect .lbl { margin-left: 8px; }
  .comment-tabs { display: flex; border: var(--line); }
  .comment-tabs .tab { padding: 6px 12px; border-right: var(--line); }
  .comment-tabs .tab:last-child { border-right: 0; }
  .upvote { padding-top: 4px; }
  .upvote-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--muted); padding: 4px 8px 4px 0; }
  .upvote-btn .marker { width: 8px; height: 8px; background: var(--rule); }
  .upvote-btn:hover { color: var(--red); }
  .upvote-btn:hover .marker, .upvote-btn.is-voted .marker { background: var(--red); }
  .upvote-btn.is-voted { color: var(--ink); cursor: default; }

  .subscribe { display: flex; flex-direction: column; gap: 10px; }
  .issue-list { display: flex; flex-direction: column; margin-top: 28px; }
  .issue-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: var(--hair); align-items: baseline; }
  .issue-row .date { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
  .issue-row .hl { font-size: 26px; line-height: 1.1; margin-bottom: 4px; }
  .issue-row .deck { font-size: 17px; }
  .issue-heading { font-size: 14px; border-bottom: var(--line); padding-bottom: 6px; margin: 24px 0 8px; }
  .issue-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: var(--hair); }
  .issue-item .hl { font-size: 26px; }
  .issue-item .deck { font-size: 17px; }
  .prose .rich ul li a, .issue-item a { color: var(--ink); }
  .newsletter-compact .btn { align-self: flex-start; }
  select.input { appearance: none; background: var(--white); }

  /* Social and support links in the top strip and footer */

  .topstrip .promo a { color: var(--red); font-weight: 600; }
  .footer .col a.ext::after { content: " \2197"; color: var(--muted); }

  /* Responsive component rules */

  @media (max-width: 1100px) {
    .author-row { grid-template-columns: 200px minmax(0, 1fr) 90px; }
    .article-head .hl { font-size: 56px; }
    .newsletter { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .section-head { grid-template-columns: minmax(0, 1fr); }
    .index-row { grid-template-columns: 96px minmax(0, 1fr) 150px; }
    .index-row .cat, .index-row .type { display: none; }
  }

  @media (max-width: 720px) {
    .topstrip .promo { display: none; }
    .topstrip .date-long { display: none; }
    .topstrip .date-short { display: inline; }
    .topstrip .links { gap: 16px; }
    .section-head.author-head { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
    .author-head .author-portrait img { width: 96px; height: 96px; }
    .story-lead .deck { font-size: 18px; }
    .masthead { padding: 20px 0 14px; gap: 8px; }
    .masthead .wordmark { gap: 14px; }
    .masthead .flag { width: 64px; height: 34px; }
    .masthead .tagline { font-size: 10px; }
    .section-nav { height: 40px; }
    .section-nav a { font-size: 11.5px; padding: 0 14px; }
    .section-nav a.nav-end { margin-left: 0; border-left: 0; padding-right: 14px; }
    .ticker { height: 36px; }
    .ticker .ticker-items { gap: 24px; padding: 0 12px; font-size: 11.5px; }
    .story-grid { grid-template-columns: minmax(0, 1fr); }
    .story-grid > .story { padding: 16px 0; border-left: 0; border-top: var(--hair); }
    .story-grid > .story:first-child { border-top: 0; padding-top: 0; }
    .rail { border-left: 0; padding-left: 0; border-top: var(--line-thick); padding-top: 10px; }
    .catalog { grid-template-columns: minmax(0, 1fr); }
    .cat-row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
    .author-row { grid-template-columns: minmax(0, 1fr) 80px; gap: 8px 16px; }
    .author-row .bio { grid-column: 1 / -1; }
    .article-head .hl { font-size: 38px; }
    .article-head .deck { font-size: 18px; }
    .index-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .index-row .author { display: none; }
    .feed-entry { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .feed-entry .source { text-align: left; }
    .polls-grid { grid-template-columns: minmax(0, 1fr); }
    .field-row, .comment-form .field-row { grid-template-columns: minmax(0, 1fr); }
    .tip-banner { flex-direction: column; align-items: flex-start; gap: 6px; }
    .form-foot { flex-direction: column; align-items: flex-start; }
    .index-row .hl { font-size: 22px; }
    .footer { grid-template-columns: 1fr 1fr; }
    .author-box { grid-template-columns: 72px minmax(0, 1fr); }
    .author-box .portrait { width: 72px; height: 72px; }
    .prose p { font-size: 18px; }
    .prose .pull { font-size: 26px; }
  }
}