/* Nino Yap Cugtas - Personal Blog Styles */
/* Earthy Green Palette: #B7B5A1 (sage), #7C7F67 (olive), #3B524A (deep green), #F3EDE8 (cream) */

/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== BASE ===== */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.8;
  color: #2a2a2a;
  background: #F3EDE8;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #3B524A;
  text-decoration: none;
  transition: color .2s;
}

a:hover {
  color: #7C7F67;
  text-decoration: underline;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Playfair Display', 'Merriweather', Georgia, serif;
  color: #2a2a2a;
  line-height: 1.2;
  margin-bottom: .5em;
}

h1 {
  font-size: 2.2rem;
  font-weight: 700;
}

h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2rem;
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

h4 {
  font-size: 1.1rem;
  font-weight: 600;
}

p {
  margin-bottom: 1.2em;
}

ul,
ol {
  margin: 0 0 1.2em 1.5em;
}

li {
  margin-bottom: .4em;
}

blockquote {
  border-left: 4px solid #7C7F67;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: #EDE8E0;
  color: #4a453d;
  font-style: italic;
}

strong {
  font-weight: 600;
}

/* ===== SKIP LINK ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #3B524A;
  color: #fff;
  padding: .5rem 1rem;
  z-index: 9999;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
}

/* ===== CONTAINER ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--narrow {
  max-width: 800px;
}

/* ===== HEADER ===== */
.site-header {
  background: #F3EDE8;
  padding: 1.2rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-brand {
  margin-bottom: 0;
}

.site-brand a {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.44rem;
  /* A masthead breathes and a headline tightens. Was 700/near-black/0 tracking -
     indistinguishable from an article title. Now lighter, tracked open, and set in
     the brand green so the name reads as identity and steps back from body copy. */
  font-weight: 500;
  letter-spacing: .012em;
  color: #3B524A;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}

.site-brand a:hover {
  color: #2a2a2a;
  text-decoration: none;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

.main-nav a {
  padding: .4rem 0;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #5a544a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-bottom .2s;
}

.main-nav a:hover {
  background: transparent;
  color: #3B524A;
  border-bottom: 2px solid #3B524A;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid #D5D0C8;
  border-radius: 6px;
  padding: .5rem .7rem;
  cursor: pointer;
  font-size: 1.3rem;
  color: #5a544a;
  line-height: 1;
}

/* ===== EDITORIAL HERO ===== */
.editorial-hero {
  background: #EDE8E0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #D5D0C8;
}

.editorial-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 18% 10%, rgba(124, 127, 103, .08), transparent 45%),
                    radial-gradient(circle at 88% 80%, rgba(59, 82, 74, .06), transparent 50%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: 2.4rem 0 2rem;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: #7C7F67;
  margin-bottom: 1rem;
  opacity: 0;
  animation: rise .7s .05s ease-out forwards;
}

.hero-eyebrow__rule {
  flex: 0 0 38px;
  height: 1px;
  background: #7C7F67;
}

.hero-eyebrow__loc {
  color: #B7B5A1;
}

.hero-headline {
  font-family: Georgia, "Iowan Old Style", "Apple Garamond", "Times New Roman", serif;
  color: #2a2a2a;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: rise .9s .15s ease-out forwards;
}

.hero-headline em {
  font-style: italic;
  color: #3B524A;
  font-weight: 400;
}

/* The ampersand is an ornament, not a word, and it must never be left standing on a line
   by itself. Nino, 2026-09-03, looking at the phone: "the & sign is all alone by itself..
   the long view. went on to a new line."

   Cause: the headline composes a deliberate three-line desktop shape with hard <br>s. On a
   phone the measure is far narrower, so the text ALSO wraps naturally, and the hard breaks
   landed on top of that wrap - stranding the "&" at the end of a line and pushing "the long
   view." down alone.

   Fix has two halves. The tail is now one <span>, so "& the long view." is a single group
   that wraps as a unit rather than shedding its ampersand. And below 768px the hard breaks
   are switched off entirely, because a composition drawn for a 3.5rem headline at 1440px is
   not a composition at 2rem on a 390px screen - it is just extra breaks. The phone gets
   `text-wrap: balance` instead, which distributes the lines evenly for the measure it
   actually has. */
.hero-headline__tail {
  display: inline-block;
}

.hero-headline .amp {
  font-style: italic;
  color: #B7B5A1;
  font-weight: 400;
  padding: 0 .15em;
}

.hero-byline {
  /* 32rem (512px) broke this one-sentence lede 30px short of fitting, leaving "writing."
     alone on a second line inside a 676px column with room to spare. It needs 541px.
     35rem fits it on one line on desktop and still wraps sensibly when the column
     narrows. A widow in the one sentence that explains the whole site is the kind of
     detail that makes a considered page look unattended. */
  max-width: 35rem;
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: .98rem;
  line-height: 1.5;
  color: #4a453d;
  margin-bottom: 0;
  opacity: 0;
  animation: rise .8s .35s ease-out forwards;
}

.hero-byline a {
  color: #3B524A;
  border-bottom: 1px solid #B7B5A1;
}

.hero-byline a:hover {
  color: #2a2a2a;
  border-bottom-color: #3B524A;
  text-decoration: none;
}

.hero-crest {
  position: relative;
  justify-self: end;
  width: min(100%, 220px);
  aspect-ratio: 1;
  border: 1px solid #3B524A;
  border-radius: 50%;
  background: #F3EDE8;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 1.6rem;
  color: #3B524A;
  opacity: 0;
  animation: crestIn 1.1s .25s cubic-bezier(.2,.7,.2,1) forwards;
}

.hero-crest::before,
.hero-crest::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid #B7B5A1;
}

.hero-crest::before {
  inset: 10px;
  opacity: .5;
}

.hero-crest::after {
  inset: -14px;
  border-style: dashed;
  opacity: .35;
  animation: crestSpin 80s linear infinite;
}

.hero-crest__top {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: #7C7F67;
}

.hero-crest__num {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: clamp(3rem, 6.5vw, 4.4rem);
  line-height: 1;
  font-weight: 400;
  color: #3B524A;
  margin: .15rem 0 .15rem;
  letter-spacing: -.03em;
}

.hero-crest__num::before {
  content: "№ ";
  font-style: italic;
  color: #B7B5A1;
  font-size: .55em;
  vertical-align: .35em;
  letter-spacing: 0;
}

.hero-crest__bottom {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: #7C7F67;
  line-height: 1.6;
}

.hero-crest__bottom em {
  font-style: italic;
  color: #2a2a2a;
}

.hero-rule {
  display: block;
  width: 100%;
  height: 18px;
  color: #7C7F67;
  opacity: .5;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes crestIn {
  from { opacity: 0; transform: scale(.92) rotate(-3deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes crestSpin {
  to { transform: rotate(360deg); }
}

/* ===== INDEX (categories) ===== */
.cat-index {
  /* The strip is an INDEX to the hero above, not a section of its own, so it sits
     close to the hero and separates clearly from Latest essays. It used to do the
     opposite: 1.8rem above, 6rem below (2rem here + 4rem on .dispatches), which
     glued the cards to the wave and left a 108px void underneath. Nino, 2026-09-03:
     "the gap below it and when Latest essays starts is kinda odd."
     The background declaration was identical to body and did nothing; dropped. */
  padding: 2.2rem 0 1rem;
}

.cat-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .9rem;
}

.cat-card {
  --card-bg: #fff;
  --card-fg: #2a2a2a;
  --card-accent: #3B524A;
  --card-meta: #7C7F67;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  /* Was 1.1rem on top to clear an absolutely positioned "01"-"05" ordinal, removed
     2026-09-03. Nino: "you're right on the cards.. numbering them doesn't make sense."
     They never did: these five categories are not a sequence, so the number encoded
     nothing a reader could recover, and each card already carries a real number in its
     essay count. Symmetric now that nothing sits in the corner. */
  padding: 1rem .8rem 1rem;
  background: var(--card-bg);
  color: var(--card-fg);
  border-radius: 6px;
  border: 1px solid #E2DCD2;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .25s ease;
  opacity: 0;
  animation: rise .6s ease-out forwards;
}

.cat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent);
}

.cat-card:nth-child(1) { animation-delay: .08s; }
.cat-card:nth-child(2) { animation-delay: .14s; }
.cat-card:nth-child(3) { animation-delay: .20s; }
.cat-card:nth-child(4) { animation-delay: .26s; }
.cat-card:nth-child(5) { animation-delay: .32s; }

.cat-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--card-accent);
  box-shadow: 0 10px 22px -16px rgba(42, 42, 42, .25);
}

.cat-card:nth-child(2) { --card-accent: #7C7F67; }
.cat-card:nth-child(3) { --card-accent: #3B524A; --card-bg: #EDE8E0; }
.cat-card:nth-child(4) { --card-accent: #B7B5A1; }
.cat-card:nth-child(5) { --card-accent: #7C7F67; }

.cat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--card-accent);
}

.cat-card__icon img,
.cat-card__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cat-card__name {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--card-fg);
  margin: 0;
}

.cat-card__count {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--card-meta);
}

/* ===== LATEST DISPATCHES ===== */
.dispatches {
  /* MEASURED, not guessed. The page's own rhythm above this point is tight: 19px from
     the hero to the category strip, 35px from the strip's top edge to the cards. Then
     the break to this heading was 61px - nearly double anything else on the page, and
     the heading is only 42px tall with 32px under it to its own grid. A heading with
     twice as much air above it as below it, in a page that is otherwise tight, reads as
     a hole rather than as a break.
     1.75rem here + 1rem on .cat-index = 44px, against 32px from the heading down to the
     first card. Still unmistakably a section break, no longer a gap you notice. */
  padding: 1.75rem 0 2rem;
}

.dispatches__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dispatches__head h2 {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0;
  color: #2a2a2a;
}

.dispatches__head h2 em {
  font-style: italic;
  color: #3B524A;
}

.dispatches__sub {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: #7C7F67;
}

.dispatches__more {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.dispatches__cta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.6rem;
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 1.05rem;
  color: #2a2a2a;
  background: transparent;
  border: 1px solid #3B524A;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}

.dispatches__cta em {
  font-style: italic;
  color: #3B524A;
  font-weight: 400;
}

.dispatches__cta svg {
  width: 18px;
  height: 18px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}

.dispatches__cta:hover {
  background: #3B524A;
  color: #F3EDE8;
  text-decoration: none;
  transform: translateY(-1px);
}

.dispatches__cta:hover em {
  color: #F3EDE8;
}

.dispatches__cta:hover svg {
  transform: translateX(4px);
}

/* ===== ARTICLE SECTION ===== */
.articles-section {
  padding-top: .5rem;
}

.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  color: #2a2a2a;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #D5D0C8;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.article-card {
  background: transparent;
  border-radius: 8px;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.article-card:hover {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.article-card__image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: #EDE8E0;
  border-radius: 8px;
  margin-bottom: 0;
}

.article-card__body {
  padding: .5rem .3rem .6rem;
}

.article-card__title {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: .25rem;
  line-height: 1.35;
}

.article-card__title a {
  color: inherit;
}

.article-card__title a:hover {
  color: #3B524A;
  text-decoration: none;
}

.article-card__excerpt {
  font-size: .82rem;
  color: #6b6560;
  line-height: 1.45;
  margin-bottom: .3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  color: #B7B5A1;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.article-card__category {
  color: #7C7F67;
}

.article-card__sep {
  color: #D5D0C8;
}

/* ===== CATEGORY GRID ===== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}

.category-card {
  display: block;
  background: #fff;
  border: 1px solid #D5D0C8;
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  transition: all .2s;
}

.category-card:hover {
  background: #fff;
  border-color: #7C7F67;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
}

.category-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: #2a2a2a;
  margin-bottom: .3rem;
}

.category-card:hover .category-card__name {
  color: #3B524A;
}

.category-card__count {
  font-size: .8rem;
  color: #7C7F67;
}

/* ===== CATEGORY PAGE GRID ===== */
.article-grid--category {
  padding-top: 2rem;
}

/* ===== SINGLE ARTICLE ===== */
.article-title {
  font-size: 2.2rem;
  margin-bottom: .4rem;
  line-height: 1.2;
}

.article-excerpt {
  font-size: 1.05rem;
  color: #6b6560;
  line-height: 1.6;
  margin-bottom: .6rem;
}

.article-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid #D5D0C8;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  color: #B7B5A1;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.article-meta .separator {
  margin: 0 .4rem;
  color: #D5D0C8;
}

.article-meta__category {
  color: #7C7F67;
  text-decoration: none;
}

.article-meta__category:hover {
  color: #3B524A;
  text-decoration: underline;
}

.article-content {
  margin-bottom: 2rem;
}

.article-content h2 {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #D5D0C8;
}

.article-content h3 {
  margin-top: 2rem;
}

.article-content ul,
.article-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.5em;
}

.article-content li {
  margin-bottom: .5em;
}

.article-featured-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.article-inline-image {
  margin: 2rem 0;
  text-align: center;
}

.article-inline-image img {
  max-width: 100%;
  border-radius: 8px;
}

.article-inline-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #7C7F67;
  font-style: italic;
}

/* Share icons (inline) */
.share-icons {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background .2s, transform .2s;
}

.share-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-icon:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.share-icon--facebook { background: #1877F2; }
.share-icon--twitter { background: #1DA1F2; }
.share-icon--linkedin { background: #0A66C2; }
.share-icon--email { background: #7C7F67; }

.share-icon--facebook:hover { background: #166fe5; }
.share-icon--twitter:hover { background: #1a91da; }
.share-icon--linkedin:hover { background: #0959a8; }
.share-icon--email:hover { background: #6b6e58; }

/* Footer share */
.article-footer-share {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 0;
  border-top: 1px solid #D5D0C8;
  margin-bottom: 2rem;
}

.article-footer-share__label {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #B7B5A1;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Related articles */
.related-articles {
  margin-top: 3rem;
}

.related-articles .section-title {
  font-size: 1.3rem;
}

/* ===== CATEGORY PAGE ===== */
.page-hero {
  background: #EDE8E0;
  padding: 3rem 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid #D5D0C8;
}

.page-hero h1 {
  margin-bottom: .3em;
}

.page-hero p {
  color: #6b6560;
  font-size: 1.05rem;
  max-width: 600px;
}

/* ===== STATIC PAGES ===== */
.page-content {
  padding: 3rem 0;
}

.page-content h1 {
  margin-bottom: 1rem;
}

.page-content h2 {
  margin-top: 2rem;
}

/* ===== FOOTER ===== */
.site-footer {
  background: #EDE8E0;
  color: #2a2a2a;
  padding: 2rem 0 0;
  margin-top: 2rem;
  border-top: 1px solid #D5D0C8;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: .3rem;
}

.footer-tagline {
  color: #7C7F67;
  font-size: .9rem;
  margin-bottom: 1rem;
}

.footer-heading {
  font-size: .85rem;
  font-weight: 700;
  color: #5a544a;
  margin-bottom: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: .4rem;
}

.footer-links a {
  color: #6b6560;
  font-size: .9rem;
}

.footer-links a:hover {
  color: #3B524A;
}

.social-icons {
  display: flex;
  gap: .7rem;
  margin-top: .8rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #D5D0C8;
  color: #3B524A;
  transition: background .2s, transform .2s, color .2s;
}

.social-icon:hover {
  background: #3B524A;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-bottom {
  border-top: 1px solid #D5D0C8;
  padding: 1.5rem 0;
  text-align: center;
  font-size: .8rem;
  color: #7C7F67;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #3B524A;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  transition: opacity .2s;
  z-index: 999;
}

.back-to-top:hover {
  background: #7C7F67;
}

/* ===== 404 ===== */
.error-page {
  text-align: center;
  padding: 5rem 1.5rem;
}

.error-page h1 {
  font-size: 4rem;
  color: #3B524A;
}

.error-page p {
  color: #6b6560;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.error-page a {
  display: inline-block;
  background: #3B524A;
  color: #fff;
  padding: .8rem 2rem;
  border-radius: 8px;
  font-weight: 600;
}

.error-page a:hover {
  background: #7C7F67;
  color: #fff;
  text-decoration: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-grid {
    gap: 2rem;
    padding: 2.2rem 0 1.8rem;
  }

  .hero-crest {
    width: min(100%, 200px);
  }
}

@media (max-width: 768px) {
  body {
    font-size: 17px;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  .header-inner {
    /* Was centred, with the toggle absolutely positioned right. Nino asked, 2026-09-03,
       whether the title should be centred or left aligned on a phone.

       MEASURED left edges at 390px: headline 24, byline 24, category rows 24, section
       head 24, footer title 24, essay titles 27. The brand was at 103 - the only element
       on the page not on the spine everything else is built from. It was also left
       aligned on DESKTOP, so the identity moved when the window narrowed.

       Both conventions are real: a centred wordmark is the fashion/luxury pattern and it
       needs FLANKING controls to balance - one on each side. Ours had a hamburger on the
       right and nothing on the left, so it read lopsided rather than symmetrical. Left
       brand + right control is the dominant editorial and app-bar convention, and here it
       is also the one that agrees with the rest of the page. */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
  }

  .site-brand a {
    font-size: 1.4rem;
  }

  .menu-toggle {
    /* Static now: with space-between the flex row places it, so it no longer needs to be
       lifted out of flow and pinned. */
    display: block;
  }

  .main-nav {
    display: none;
    width: 100%;
    background: #F3EDE8;
    border-top: 1px solid #D5D0C8;
    flex-direction: column;
    padding: .5rem 0;
    gap: 0;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    padding: .6rem 0;
    width: 100%;
    text-align: center;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    padding: 3rem 0 2.4rem;
  }

  .hero-crest {
    justify-self: start;
    width: min(220px, 60%);
  }

  .cat-index {
    padding: 1.4rem 0 1.6rem;
  }

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

  .category-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: .3rem;
  }

  .share-bar {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .article-card__body {
    padding: .6rem .2rem;
  }
}

/* <picture> wraps the featured/card images so a WebP source can be offered before the
   JPEG fallback (2026-09-01). `display: contents` makes the wrapper generate no box at
   all, so every existing rule targeting the inner <img> — width, aspect-ratio,
   object-fit, border-radius — keeps applying exactly as it did before the wrapper
   existed. Without this the inline <picture> box would reintroduce a baseline gap under
   each card image on mobile. */
picture {
  display: contents;
}


/* ===== CATEGORY PAGE HEADER =====
   The homepage card promises each category an icon, a number and a count. Clicking it
   landed on a band with a title, one line of description, and two thirds of it empty -
   the visual system dropped at exactly the moment the reader acted on it. This carries
   the same three marks through, on the right, where the homepage hero puts its crest. */
.page-hero--category {
  padding: 2.6rem 0;
}

.cat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}

.cat-hero__text h1 {
  margin-bottom: .25em;
}

.cat-hero__text p {
  margin-bottom: 0;
}

.breadcrumbs__sep {
  /* Rendered as "Home/ Technology" - the slash had no space before it. */
  margin: 0 .45em;
  color: #B7B5A1;
}

.cat-hero__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.5rem 1.9rem;
  border: 1px solid #D5D0C8;
  border-top: 2px solid #3B524A;
  background: #F6F2ED;
  min-width: 148px;
}

.cat-hero__count {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: #7C7F67;
}

.cat-hero__icon {
  display: block;
  color: #3B524A;
}

.cat-hero__icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

@media (max-width: 640px) {
  .cat-hero {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .cat-hero__mark {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    padding: .8rem 1rem;
    min-width: 0;
  }
}


/* ===== CATEGORY INDEX ON A PHONE =====
   MEASURED 2026-09-03 at 390x844: a reader had to scroll 1,305px - 1.55 screens - before
   reaching a single essay, and 516px of that was the category strip alone. On desktop
   that strip is a tidy 152px-tall row of five; on a phone the same markup became a
   2-column grid of tall square cards, three rows deep, with the fifth stranded on its
   own row.

   That is not one design working at two sizes. That is a desktop design surviving at a
   smaller one. Same content, different constraint, so it gets the layout its constraint
   calls for: a list. Icon left, name and count on one line, one row each.

   The accent rotates with it. On the card it is a 3px rule along the TOP edge; on the row
   it moves to the LEFT edge, which is where a list gets its spine.

   ~300px instead of 516px, and no orphan, because a single column cannot leave one.

   Nino: "it's 5 categories, i think that last category card will always have to live on
   its own." Correct, and that is the whole argument: 5 is prime, so it divides evenly
   into no column count a narrow screen can offer. There is no arrangement of a grid that
   fixes it - the grid IS the problem. So the breakpoint is a single boundary at 768px:
   five across above it, a list below it, and the two-column rule that used to sit in the
   768 block is deleted rather than retuned. It was the only width where the orphan could
   still have appeared. */
@media (max-width: 768px) {
  .cat-index__list {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .cat-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: .9rem;
    padding: .7rem .9rem;
  }

  .cat-card::before {
    /* top rule -> left spine */
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
  }

  .cat-card__icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }

  .cat-card__name {
    flex: 1 1 auto;
    margin: 0;
  }

  .cat-card__count {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .hero-headline {
    /* MEASURED at 390px, reading the real rendered line boxes at each size rather than
       modelling them (a first probe used roman metrics and got it wrong - the phrases are
       italic):

         32px (was)  5 lines, "technology, senior / care," split and "care," near-alone
         28-30px     4 lines, phrases intact
         <=27px      3 lines - the EXACT composition the <br>s were drawn for

       So the phone is not given a different arrangement, it is given the size at which the
       intended one survives. 1.7rem floors it at 27.2px on a 390px screen and scales back
       up toward the desktop setting as the measure widens. text-wrap:pretty keeps the last
       line from orphaning on the widths in between. */
    font-size: clamp(1.7rem, 5.2vw, 2.6rem);
    text-wrap: pretty;
  }
}

/* ---------------------------------------------------------------
   Incident timeline (article figure, emitted from a :::html block)
   Built for the Hugging Face intrusion piece. Kept generic so any
   article can use it. Scrolls inside itself on narrow screens
   rather than pushing the page sideways.
   --------------------------------------------------------------- */
.tl {
  margin: 2.5rem 0;
  padding: 0;
}

.tl__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #3B524A;
  margin: 0 0 .25rem;
  letter-spacing: .01em;
}

.tl__intro {
  font-size: .95rem;
  color: #5d6b62;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.tl__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.6rem;
  border-left: 2px solid #B7B5A1;
}

.tl__item {
  position: relative;
  padding: 0 0 1.4rem 0;
}

.tl__item:last-child { padding-bottom: 0; }

.tl__item::before {
  content: "";
  position: absolute;
  left: calc(-1.6rem - 6px);
  top: .42rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7C7F67;
  box-shadow: 0 0 0 4px #F3EDE8;
}

/* The turning points get a filled marker in the brand green. */
.tl__item--key::before { background: #3B524A; }

.tl__when {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7C7F67;
  margin-bottom: .15rem;
}

.tl__what {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #3B524A;
}

.tl__what strong { font-weight: 700; }

.tl__who {
  display: inline-block;
  margin-top: .3rem;
  font-size: .8rem;
  color: #7C7F67;
  font-style: italic;
}

/* A caption under the whole figure, for sourcing. */
.tl__source {
  margin-top: 1.25rem;
  font-size: .85rem;
  color: #7C7F67;
  line-height: 1.5;
  font-style: italic;
}

/* Phase separators inside the list. */
.tl__phase {
  list-style: none;
  position: relative;
  margin: 0 0 1.1rem;
  padding: .35rem 0 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #3B524A;
}

.tl__phase::before {
  content: "";
  position: absolute;
  left: calc(-1.6rem - 9px);
  top: .55rem;
  width: 16px;
  height: 2px;
  background: #3B524A;
}

@media (max-width: 600px) {
  .tl__list { padding-left: 1.25rem; }
  .tl__item::before { left: calc(-1.25rem - 6px); }
  .tl__phase::before { left: calc(-1.25rem - 9px); }
  .tl__what { font-size: .96rem; }
}

/* ---------------------------------------------------------------
   Explainer diagram (article figure from a :::html block).
   HTML, deliberately NOT SVG. An SVG scales uniformly, so on a
   390px phone column its labels rendered at 10.8px against 19px
   body text and the figure needed sideways scrolling. HTML reflows:
   the text stays at reading size and the boxes just get taller.
   Most of these readers are on a phone, possibly on cell data.
   --------------------------------------------------------------- */
.dg {
  margin: 2.5rem 0;
  padding: 0;
}

.dg__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #3B524A;
  margin: 0 0 .25rem;
}

.dg__intro {
  font-size: .95rem;
  color: #5d6b62;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.dg__steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.9rem;
  border-left: 2px solid #B7B5A1;
}

.dg__step {
  position: relative;
  margin: 0 0 .85rem;
  padding: .8rem 1rem;
  background: #FFFFFF;
  border: 1px solid #B7B5A1;
  border-radius: 10px;
}

.dg__step::before {
  content: attr(data-n);
  position: absolute;
  left: calc(-1.9rem - 20px);
  top: .8rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3B524A;
  color: #F3EDE8;
  font-size: .92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px #F3EDE8;
}

/* The step where they had already won and could have stopped. */
.dg__step--key::before { background: #C0803A; }

/* The grader that was never built. */
.dg__step--void {
  background: none;
  border: 2px dashed #7C7F67;
}

.dg__h {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: #3B524A;
}

.dg__step--void .dg__h { color: #7C7F67; }

.dg__s {
  margin: .3rem 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: #7C7F67;
}

.dg__step--void .dg__s { font-style: italic; }

.dg__foot {
  margin: 1.4rem 0 0 1.9rem;
  padding: .9rem 1rem;
  background: #EDE8E0;
  border-radius: 10px;
}

.dg__foot p { margin: 0; font-size: .95rem; line-height: 1.55; color: #7C7F67; }
.dg__foot p strong { color: #3B524A; }

@media (max-width: 600px) {
  .dg__steps { padding-left: 1.5rem; }
  .dg__step::before {
    left: calc(-1.5rem - 17px);
    width: 30px; height: 30px; font-size: .85rem;
  }
  .dg__foot { margin-left: 0; }
}

/* ---------------------------------------------------------------
   Collapsible appendix wrapper for a .tl timeline. The timeline is
   the reference version of a narrative told above it, so it sits at
   the end, folded shut, rather than stopping the piece in the middle.
   --------------------------------------------------------------- */
.tlx {
  margin: 2rem 0 2.5rem;
  border: 1px solid #dcd6cc;
  border-radius: 4px;
  background: #FAF7F3;
}

.tlx__sum {
  cursor: pointer;
  list-style: none;
  padding: .9rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #3B524A;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.tlx__sum::-webkit-details-marker { display: none; }

.tlx__sum::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 6px solid #7C7F67;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .15s ease;
}

.tlx[open] > .tlx__sum::before { transform: rotate(90deg); }
.tlx[open] > .tlx__sum { border-bottom: 1px solid #e4ded4; }

.tlx__sum:hover { color: #2c3f38; }
.tlx__sum:focus-visible { outline: 2px solid #7C7F67; outline-offset: 2px; }

.tlx__body { padding: 0 1.1rem 1.4rem; }
.tlx__body .tl { margin: 1.4rem 0 0; }

@media (max-width: 600px) {
  .tlx__sum { padding: .85rem .85rem; font-size: 1rem; }
  .tlx__body { padding: 0 .85rem 1.2rem; }
}