/* So Share This -- production stylesheet (design: Pulse).
   Generated from mockups/css/base.css + pulse.css, then extended with the
   templates the mockups did not cover: archives, author pages, static pages,
   search and 404. No webfonts: the type is a system stack, so there is no
   font swap and no layout shift on load. */

/* Structural base shared by all three mockups.
   Only layout plumbing and accessibility live here -- every visual decision
   (type, colour, density, rhythm) belongs to the individual design files, so
   the three can be compared fairly. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Prevents the page body from ever scrolling sideways on small screens. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

button, input { font: inherit; color: inherit; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.wrap--narrow { max-width: 720px; }

/* Screen-reader-only text. Used for the h1 on the homepage, form labels, and
   section headings that the design expresses visually instead of in words. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 0; top: -100%;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: #111;
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* A single visible focus treatment everywhere, so keyboard users are never
   left guessing where they are. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Video facade: a poster frame that becomes the real player on click.
   Reserving the 16:9 box up front means the article never jumps as it loads. */
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-block: 2rem;
  background: #000;
  overflow: hidden;
}
.video-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .25s ease, transform .4s ease;
}
.video-facade__link {
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
}
.video-facade__link:hover img { opacity: 1; transform: scale(1.03); }
.video-facade__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  border: 3px solid #fff;
}
.video-facade__play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-left: 22px solid #fff;
  border-block: 13px solid transparent;
  transform: translateX(3px);
}
.video-facade__label {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: .35rem .7rem;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}

.embed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-block: 2rem;
  background: #eee;
}
.embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Wide content must scroll inside its own box rather than pushing the page. */
.post-body table { display: block; overflow-x: auto; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* PULSE -- the BuzzFeed direction.
   Dense, high-contrast, colour-coded by category. Optimised for scanning: the
   reader should be able to take in twelve headlines in one screen and know
   instantly which section each belongs to. */

:root {
  --ink: #14161a;
  --ink-soft: #5b626d;
  --line: #e3e6ea;
  --bg: #ffffff;
  --bg-alt: #f5f7f9;
  --brand: #6ca3bd;          /* sampled from the existing logo */
  --brand-deep: #35748f;     /* darkened for text contrast on white */
  --hot: #ff2e51;            /* the attention colour -- used sparingly */

  /* Category colours. These are the whole navigation system in this design:
     the reader learns them in two screens and stops reading section labels. */
  --cat-inspiration: #f5a623;
  --cat-awesome: #7b5cff;
  --cat-animals: #12a05c;
  --cat-funny: #ff4fa3;
  --cat-featured: var(--hot);

  --radius: 6px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .06), 0 8px 24px rgba(20, 22, 26, .06);
  --shadow-lift: 0 4px 8px rgba(20, 22, 26, .08), 0 18px 40px rgba(20, 22, 26, .14);

  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 3px solid var(--ink);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 74px;
}

/* Brand lockup.
   The supplied logo was a broken raster: the circular mark floated clear above
   the "SO   THIS" baseline, and the word "Share" was never set as type at all.
   The mark is now its own asset (tools/make_brand.py) and the wordmark is real
   text, so it stays crisp at any size and the name actually reads. The mark
   carries the "share" idea, and the word it stands for is tinted to match. */
.brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark {
  width: 44px;
  height: 44px;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__word {
  font-size: 1.42rem;
  font-weight: 900;
  letter-spacing: -.035em;
  /* Real spaces sit between the words so the accessible name reads
     "So Share This" rather than one run-together string; the tracking is
     tightened here instead of by removing them. */
  word-spacing: -.08em;
  line-height: 1;
  white-space: nowrap;
}
.brand__word em {
  font-style: normal;
  color: var(--brand-deep);
}

.site-nav { flex: 1 1 auto; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.site-nav a {
  display: block;
  padding: .45rem .85rem;
  border-radius: 100px;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.site-nav a:hover { background: var(--bg-alt); }
.site-nav a[aria-current="page"] { background: var(--ink); color: #fff; }

.site-search { display: flex; flex: 0 0 auto; }
.site-search input {
  width: 170px;
  padding: .5rem .8rem;
  border: 2px solid var(--line);
  border-right: 0;
  border-radius: 100px 0 0 100px;
  background: var(--bg-alt);
}
.site-search button {
  padding: .5rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 0 100px 100px 0;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- cards ---------- */

.card__link { text-decoration: none; display: block; }

.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
  aspect-ratio: 16 / 9;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.card:hover .card__media img { transform: scale(1.06); }

.card__body { padding-top: .85rem; }

/* The chip carries the category colour. data-cat means one rule per section
   instead of a class permutation for every card variant. */
.card__cat {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .18rem .55rem;
  border-radius: 3px;
  background: var(--cat, var(--hot));
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
[data-cat="inspiration"] { --cat: var(--cat-inspiration); }
[data-cat="awesome"]     { --cat: var(--cat-awesome); }
[data-cat="animals"]     { --cat: var(--cat-animals); }
[data-cat="funny"]       { --cat: var(--cat-funny); }
[data-cat="featured"]    { --cat: var(--cat-featured); }

.card__title {
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.015em;
}
.card:hover .card__title { text-decoration: underline; text-decoration-thickness: 2px; }

.card__excerpt {
  margin-top: .45rem;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.5;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
}
.card__author { color: var(--ink); }
.card__read::before { content: "\00b7\00a0"; }

/* ---------- lead block ---------- */

.lead { padding-block: 2rem 2.5rem; }

.lead-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.card--hero .card__media { aspect-ratio: 3 / 2; }
.card--hero .card__title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.1; }
.card--hero .card__excerpt { font-size: 1.02rem; }

.lead-side { display: grid; gap: 1.15rem; align-content: start; }

/* Side cards flip to a horizontal thumb layout so four fit beside the hero. */
.card--side .card__link {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}
.card--side .card__media { aspect-ratio: 1 / 1; }
.card--side .card__body { padding-top: 0; }
.card--side .card__title { font-size: .98rem; }
.card--side .card__excerpt, .card--side .card__meta { display: none; }

/* ---------- section headings ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: .7rem;
  border-bottom: 3px solid var(--ink);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.section-more {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

/* ---------- grids ---------- */

.grid {
  display: grid;
  gap: 2rem 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.feed { padding-block: 1rem 3rem; }

.strip { padding-block: 2.5rem; }
.strip--alt { background: var(--bg-alt); }

.card--compact .card__title { font-size: 1rem; }
.card--compact .card__excerpt { display: none; }

/* ---------- charity call-out ---------- */

.charity {
  margin-block: 3rem 0;
  padding-block: 3.5rem;
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.charity h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.charity p { max-width: 46ch; margin-inline: auto; margin-top: .8rem; color: #c9cfd6; }
.btn {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .85rem 2rem;
  border-radius: 100px;
  background: var(--hot);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover { background: #fff; color: var(--ink); }

/* ---------- article ---------- */

.post-header { padding-block: 2rem 1.5rem; }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .78rem; color: var(--ink-soft); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }
.breadcrumb a { text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

.post-cat {
  display: inline-block;
  margin: 1rem 0 .7rem;
  padding: .22rem .6rem;
  border-radius: 3px;
  background: var(--cat, var(--hot));
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.post-header h1 {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.post-standfirst {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 1.18rem;
  line-height: 1.5;
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
}
.post-author { font-weight: 800; }
.post-dates { display: flex; gap: .8rem; color: var(--ink-soft); }

.post-hero { margin-block: 1.5rem 2.5rem; }
.post-hero img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
}
.post-hero figcaption {
  max-width: 1180px;
  margin: .6rem auto 0;
  padding-inline: clamp(1rem, 4vw, 2rem);
  color: var(--ink-soft);
  font-size: .84rem;
}

.post-layout {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: start;
}

.share { position: sticky; top: 100px; }
.share__label {
  margin-bottom: .7rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.share ul { display: grid; gap: .5rem; }
.share a {
  display: grid;
  place-items: center;
  height: 44px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.share a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.post-body { max-width: 700px; font-size: 1.14rem; line-height: 1.72; }
.post-body > p { margin-bottom: 1.35rem; }
.post-body h2 {
  margin: 2.6rem 0 1rem;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.post-body h3 { margin: 2rem 0 .8rem; font-size: 1.3rem; font-weight: 800; }
.post-body a { color: var(--brand-deep); text-underline-offset: 3px; }
.post-body figure { margin-block: 2rem; }
.post-body figcaption {
  margin-top: .55rem;
  color: var(--ink-soft);
  font-size: .86rem;
}
.post-body blockquote {
  margin-block: 2rem;
  padding: 1.2rem 0 1.2rem 1.5rem;
  border-left: 5px solid var(--hot);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.42;
}
.post-body ul { margin-bottom: 1.35rem; padding-left: 1.3rem; list-style: disc; }
.post-body li { margin-bottom: .5rem; }

.post-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 3px solid var(--ink); }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-list a {
  display: block;
  padding: .3rem .75rem;
  border-radius: 100px;
  background: var(--bg-alt);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
.tag-list a:hover { background: var(--ink); color: #fff; }

.related { margin-top: 3.5rem; padding-block: 2.5rem 3.5rem; background: var(--bg-alt); }

/* ---------- footer ---------- */

.site-footer {
  padding-block: 3rem 2rem;
  background: var(--ink);
  color: #a8b0ba;
  font-size: .9rem;
}
.footer-inner { display: grid; gap: 1.5rem; }
.footer-tag { color: #fff; font-size: 1.05rem; }
.footer-fb a { color: var(--brand); font-weight: 700; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.copyright { padding-top: 1.2rem; border-top: 1px solid #2c3038; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .lead-grid { grid-template-columns: 1fr; }
  .site-search { display: none; }
  .post-layout { grid-template-columns: 1fr; }
  /* The share rail becomes a horizontal bar rather than disappearing --
     mobile is where sharing actually happens on this site. */
  .share { position: static; }
  .share ul { display: flex; flex-wrap: wrap; }
  .share a { padding-inline: 1.1rem; }
}

@media (max-width: 620px) {
  .header-inner { flex-wrap: wrap; min-height: 0; padding-block: .75rem; }
  .site-nav { order: 3; width: 100%; }
  .site-nav ul { overflow-x: auto; flex-wrap: nowrap; }
  .grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .grid--4 .card__title { font-size: .9rem; }
}


/* ==========================================================================
   Templates beyond the mockups
   ========================================================================== */

/* ---------- mobile nav toggle ---------- */

.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  position: absolute;
  left: 11px;
  width: 18px; height: 2px;
  background: var(--ink);
}
.nav-toggle__bar { top: 20px; }
.nav-toggle__bar::before { content: ""; top: -6px; }
.nav-toggle__bar::after  { content: ""; top: 6px; }
.nav-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; background: #fff; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { top: 0; background: #fff; transform: rotate(-45deg); }

/* ---------- archive + author pages ---------- */

.archive-header {
  margin-block: 1.5rem 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 3px solid var(--ink);
}
.archive-header h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -.03em;
}
.archive-intro { margin-top: .7rem; max-width: 62ch; color: var(--ink-soft); font-size: 1.05rem; }
.archive-count {
  margin-top: .6rem;
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

main > .wrap { padding-bottom: 4rem; }

/* ---------- pagination ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.pager a {
  padding: .7rem 1.6rem;
  border: 2px solid var(--ink);
  border-radius: 100px;
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.pager a:hover { background: var(--ink); color: #fff; }
.pager__count { color: var(--ink-soft); font-size: .84rem; font-weight: 700; }

/* Numbered links keep the last page two hops from the first, rather than the
   nine that prev/next alone would need on a ten-page archive. */
/* Must wrap: a 16-page archive overflows a phone, and because the body hides
   horizontal overflow the numbers past the edge become unreachable rather
   than merely clipped. */
.pager__nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.pager__num {
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: .55rem .5rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
}
.pager__num:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager__num--current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.pager__gap { padding-inline: .2rem; color: var(--ink-soft); font-weight: 800; }

/* ---------- static pages ---------- */

.page-header {
  margin-block: 1.5rem 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 3px solid var(--ink);
}
.page-header h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -.03em;
}
.static-page .post-body { max-width: none; }

.post-cats { margin-top: 1rem; font-size: .9rem; color: var(--ink-soft); }
.post-cats a { font-weight: 700; color: var(--brand-deep); }

/* ---------- search ---------- */

.search-page { display: flex; gap: .5rem; margin-block: 1.5rem 2rem; }
.search-page input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .85rem 1.2rem;
  border: 2px solid var(--line);
  border-radius: 100px;
  background: var(--bg-alt);
  font-size: 1.05rem;
}
.search-page input:focus { border-color: var(--ink); background: #fff; }
.search-page button {
  padding: .85rem 1.8rem;
  border: 2px solid var(--ink);
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
#search-status {
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.notice { padding: 1rem 1.2rem; background: var(--bg-alt); border-left: 4px solid var(--brand); }
.notice a { font-weight: 700; color: var(--brand-deep); }

/* ---------- 404 ---------- */

.error-header { border-bottom: 0; }
.error-code {
  font-size: clamp(4rem, 16vw, 8rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--hot);
}
.error-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.error-links a {
  display: block;
  padding: .6rem 1.3rem;
  border: 2px solid var(--line);
  border-radius: 100px;
  font-weight: 800;
  font-size: .84rem;
  text-transform: uppercase;
  text-decoration: none;
}
.error-links a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- responsive additions ---------- */

@media (max-width: 620px) {
  .nav-toggle { display: block; order: 2; margin-left: auto; }
  /* Collapsed by default on small screens; the toggle sets [data-open]. */
  .site-nav { display: none; }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-wrap: wrap; overflow: visible; gap: .3rem; padding-block: .5rem; }
  .site-nav a { width: 100%; border-radius: var(--radius); }
  /* Scale the lockup down so it and the menu button share one row. */
  .brand { gap: .45rem; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__word { font-size: 1.18rem; }
  /* Numbers get their own full-width row above Newer/Older on small screens. */
  .pager { flex-wrap: wrap; gap: .8rem; }
  .pager__nums { order: -1; width: 100%; }
  .pager__num { min-width: 40px; padding: .5rem .35rem; font-size: .84rem; }
  .search-page { flex-wrap: wrap; }
  .search-page input, .search-page button { width: 100%; }
}

/* Social embeds whose loader scripts were removed. Instagram and Facebook
   ship a grey skeleton that only their JavaScript fills in, so those became
   plain links; this makes them look deliberate rather than orphaned. */
.embed-link {
  margin-block: 2rem;
  padding: 1.1rem 1.3rem;
  border: 2px solid var(--line);
  border-left: 5px solid var(--brand);
  background: var(--bg-alt);
}
.embed-link a {
  font-weight: 800;
  color: var(--brand-deep);
  text-decoration: none;
}
.embed-link a:hover { text-decoration: underline; }
.embed-link a::after { content: " \2197"; }
.embed-link[data-network="instagram"] { border-left-color: var(--cat-funny); }
.embed-link[data-network="facebook"]  { border-left-color: var(--brand); }

/* Tweets keep their original blockquote, which still carries the text and a
   dated permalink without any script. */
.post-body blockquote.twitter-tweet {
  border-left-color: var(--brand);
  font-size: 1.1rem;
  font-weight: 400;
}