/* =========================================================================
   Sunglasstest — "Edit" UI
   Ported verbatim from the reference build (D:\Sunglasstest\site\style.css).
   Values below are the reference values; WordPress-only additions are
   grouped at the end under "WordPress additions".
   ========================================================================= */

:root {
  --cream: #faf8f5;
  --ink: #121110;
  --sub: #6f6d69;
  --mute: #8a8781;
  --bronze: #a87b51;
  --line: #e3dfd8;
  --sand: #eee8df;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', ui-sans-serif, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: #d8cebf; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }
.page-pad { padding-left: 56px; padding-right: 56px; }

.desktop-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 124px; background: rgba(250,248,245,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.header-brand-row { position: relative; display: flex; align-items: center; justify-content: center; padding-top: 24px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; font-family: var(--serif); font-size: 24px; line-height: 32px; letter-spacing: -.025em; }
.brand span { color: var(--bronze); }
/* margin, not gap: gap would also push the bronze period away from the word */
.brand-mark { flex: 0 0 auto; width: 32px; height: 32px; margin-right: 11px; display: block; object-fit: contain; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: rgba(18,17,16,.62); cursor: pointer; transition: .3s ease; }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:hover { color: var(--bronze); background: var(--sand); transform: scale(1.08); }
.desktop-header .search-trigger { position: absolute; left: 56px; }
.main-nav { display: flex; justify-content: center; gap: 36px; padding-top: 16px; padding-bottom: 8px; }
.main-nav a, .arrow-link { font-family: var(--mono); font-size: 10px; line-height: 15px; text-transform: uppercase; letter-spacing: .24em; color: rgba(18,17,16,.62); transition: color .25s ease; }
.main-nav a:hover, .arrow-link:hover { color: var(--bronze); }
.mobile-header { display: none; }

.hero { padding-top: 208px; padding-bottom: 80px; }
.eyebrow { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 16.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .3em; color: var(--mute); }
.hero h1 { margin: 0; text-align: center; font-family: var(--serif); font-size: 6.6vw; line-height: 1.08; font-weight: 500; letter-spacing: -.025em; }
.hero-line { display: block; }
.image-pill { display: inline-block; width: 1.75em; height: .7em; margin: 0 .1em; border-radius: 999px; overflow: hidden; vertical-align: -.05em; }
.image-pill img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero h1 em { font-style: normal; color: var(--bronze); }
.hero-topics { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 34px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; text-transform: uppercase; letter-spacing: .18em; color: var(--ink); }
.hero-topics span { color: var(--bronze); }
.hero-deck { max-width: 576px; margin: 36px auto 0; text-align: center; color: var(--sub); font-size: 18px; line-height: 1.625; font-weight: 300; }

.hero-grid { display: grid; grid-template-columns: 1fr 1.35fr 1fr; margin-top: 80px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-grid > * + * { border-left: 1px solid var(--line); }
.hero-aside { min-width: 0; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.hero-quote { margin: auto 0; font-family: var(--serif); font-size: 24px; line-height: 1.375; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .2em; }
.arrow-link span { font-family: var(--sans); font-size: 14px; transition: transform .2s ease; }
.arrow-link:hover span { transform: translateX(4px); }
.featured-card { display: block; min-width: 0; padding: 40px; }
.featured-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.featured-image img { position: absolute; inset: 0; width: 100%; height: 125%; object-fit: cover; transition: transform .7s ease; }
.featured-card:hover .featured-image img { transform: scale(1.03); }
.featured-copy { margin-top: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.featured-copy .eyebrow { margin-bottom: 12px; font-size: 10px; line-height: 15px; letter-spacing: .25em; }
.featured-copy h2 { margin: 0; font-family: var(--serif); font-size: 27.2px; line-height: 1.18; font-weight: 400; transition: color .3s ease; }
.featured-card:hover h2 { color: var(--bronze); }
.round-arrow { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; font-size: 19px; transition: .45s ease; }
.featured-card:hover .round-arrow { color: var(--cream); border-color: var(--bronze); background: var(--bronze); transform: rotate(45deg); }
.trend-list { display: grid; gap: 24px; margin: auto 0; }
.trend-list .eyebrow { margin-bottom: 8px; font-size: 10px; line-height: 15px; letter-spacing: .22em; }
.bronze { color: var(--bronze); }
.trend-list h3 { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.375; font-weight: 400; transition: color .3s ease; }
.trend-list a:hover h3 { color: var(--bronze); }

.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; white-space: nowrap; user-select: none; }
.ticker-track { display: inline-flex; align-items: center; gap: 36px; min-width: max-content; animation: marquee 28s linear infinite; }
.ticker span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .28em; color: var(--mute); }
.ticker b { color: var(--bronze); font-size: 9px; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

.chapter { padding-top: 96px; padding-bottom: 96px; border-bottom: 1px solid var(--line); scroll-margin-top: 124px; }
.chapter-heading { margin-bottom: 64px; text-align: center; }
.chapter-heading > span { display: block; margin-bottom: 16px; color: var(--bronze); font-family: var(--mono); font-size: 14px; line-height: 20px; }
.chapter-heading h2 { margin: 0; font-family: var(--serif); font-size: 48px; line-height: 48px; font-weight: 400; letter-spacing: -.025em; }
.chapter-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--mute); font-family: var(--mono); font-size: 11px; line-height: 16.5px; text-transform: uppercase; letter-spacing: .2em; transition: color .3s ease; }
.chapter-link b { font-family: var(--sans); font-size: 15px; font-weight: 400; transition: transform .3s ease; }
.chapter-link:hover { color: var(--bronze); }
.chapter-link:hover b { transform: translateX(4px); }
.article-grid { display: grid; column-gap: 40px; row-gap: 56px; }
.article-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 896px; margin: 0 auto; }
.article-card { min-width: 0; }
.card-image { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); }
.card-image > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.article-card > a:hover .card-image > img { transform: scale(1.05); }
.card-copy { padding-top: 20px; }
.card-meta { margin: 0 0 10px; color: var(--mute); font-family: var(--mono); font-size: 10px; line-height: 15px; text-transform: uppercase; letter-spacing: .22em; }
.card-copy h3 { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.375; font-weight: 400; transition: color .3s ease; }
.article-card > a:hover h3 { color: var(--bronze); }
.excerpt { display: -webkit-box; margin: 12px 0 0; overflow: hidden; color: var(--sub); font-size: 14px; line-height: 1.625; font-weight: 300; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.byline { margin: 16px 0 0; color: var(--mute); font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: .025em; }

.manifesto { padding-top: 128px; padding-bottom: 128px; background: var(--ink); color: #fbf9f5; scroll-margin-top: 124px; }
.manifesto header { text-align: center; }
.manifesto header p { margin: 0 0 24px; color: #c39569; font-family: var(--mono); font-size: 11px; line-height: 16.5px; text-transform: uppercase; letter-spacing: .3em; }
.manifesto header h2 { max-width: 768px; margin: 0 auto; font-family: var(--serif); font-size: 48px; line-height: 1.25; font-weight: 400; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; margin-top: 96px; }
.principles article { padding-top: 32px; border-top: 1px solid rgba(251,249,245,.14); }
.principles span { color: var(--bronze); font-family: var(--mono); font-size: 14px; }
.principles h3 { margin: 16px 0; font-family: var(--serif); font-size: 24px; line-height: 32px; font-weight: 400; }
.principles p { margin: 0; color: rgba(251,249,245,.6); font-size: 16px; line-height: 1.625; font-weight: 300; }

.site-footer { padding-top: 96px; padding-bottom: 40px; border-top: 1px solid rgba(251,249,245,.14); background: var(--ink); color: #fbf9f5; text-align: center; }
.footer-brand { display: inline-flex; align-items: center; font-family: var(--serif); font-size: 36px; line-height: 40px; letter-spacing: -.025em; }
.footer-brand span { color: var(--bronze); }
.footer-brand .brand-mark { width: 46px; height: 46px; margin-right: 15px; }
.footer-deck { max-width: 384px; margin: 20px auto 0; color: rgba(251,249,245,.5); font-size: 14px; line-height: 1.625; font-weight: 300; }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; margin-top: 40px; }
.site-footer nav a { color: rgba(251,249,245,.6); font-family: var(--mono); font-size: 11px; line-height: 16.5px; text-transform: uppercase; letter-spacing: .2em; transition: color .3s ease; }
.site-footer nav a:hover { color: #c39569; }
.copyright { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(251,249,245,.14); }
.copyright p { margin: 0; color: rgba(251,249,245,.35); font-family: var(--mono); font-size: 11px; line-height: 16.5px; letter-spacing: .025em; }

.overlay { position: fixed; inset: 0; z-index: 100; visibility: hidden; opacity: 0; background: rgba(250,248,245,.98); transition: opacity .35s ease, visibility .35s; }
.overlay.open { visibility: visible; opacity: 1; }
.overlay-close { position: absolute; top: 28px; right: 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 30px; font-weight: 200; line-height: 1; cursor: pointer; }
.menu-overlay nav { display: grid; gap: 18px; margin: 18vh 20px 0; text-align: center; }
.menu-overlay nav a { font-family: var(--serif); font-size: 38px; line-height: 1.15; }
body.overlay-open { overflow: hidden; }

@media (max-width: 1023px) {
  .page-pad { padding-left: 32px; padding-right: 32px; }
  .desktop-header { display: none; }
  .mobile-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 64px; display: flex; align-items: center; justify-content: space-between; background: rgba(250,248,245,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
  .mobile-header .brand { font-size: 20px; line-height: 28px; }
  .mobile-header .brand-mark { width: 28px; height: 28px; margin-right: 9px; }
  .mobile-actions { display: flex; align-items: center; gap: 2px; }
  .hero { padding-top: 192px; padding-bottom: 64px; }
  .hero h1 { font-size: 9vw; }
  .hero-grid { grid-template-columns: 1fr; margin-top: 56px; }
  .hero-aside { display: none; }
  .featured-card { padding: 40px; border-left: 0 !important; }
  .chapter { padding-top: 64px; padding-bottom: 64px; scroll-margin-top: 64px; }
  .chapter-heading { margin-bottom: 48px; }
  .article-grid.three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manifesto { padding-top: 80px; padding-bottom: 80px; scroll-margin-top: 64px; }
  .manifesto header h2 { font-size: 36px; }
  .principles { grid-template-columns: 1fr; gap: 48px; margin-top: 64px; }
  .site-footer { padding-top: 64px; }
}

@media (max-width: 639px) {
  .page-pad { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 144px; padding-bottom: 64px; }
  .hero h1 { font-size: 12.5vw; }
  .hero-line:first-child { max-width: 100%; line-height: 1.08; }
  .hero-topics { gap: 10px; margin-top: 26px; font-size: 10px; letter-spacing: .14em; }
  .hero-deck { margin-top: 26px; font-size: 16px; line-height: 1.625; }
  .hero-grid { margin-top: 56px; }
  .featured-card { padding: 24px; }
  .featured-copy { margin-top: 24px; }
  .featured-copy h2 { font-size: 24px; line-height: 1.375; }
  .featured-copy .eyebrow { max-width: 230px; }
  .ticker-track { gap: 32px; }
  .chapter-heading h2 { font-size: 30px; line-height: 36px; }
  .article-grid.three-col, .article-grid.two-col { grid-template-columns: 1fr; }
  .card-copy h3 { font-size: 20px; }
  .principles p { font-size: 14px; }
  .footer-brand { font-size: 30px; line-height: 36px; }
  .footer-brand .brand-mark { width: 38px; height: 38px; margin-right: 12px; }
  .overlay-close { top: 14px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ticker-track { animation: none; } }

/* routed chapter pages */
.main-nav a { position: relative; padding-bottom: 7px; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: .24em; bottom: 0; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.main-nav a.active { color: var(--ink); }
.main-nav a.active::after { transform: scaleX(1); }
.category-page { min-height: 75vh; padding-top: 164px; padding-bottom: 120px; }
.category-hero { margin-bottom: 91px; text-align: center; }
.category-hero > p { margin: 0 0 22px; color: var(--bronze); font-family: var(--mono); font-size: 11px; line-height: 16px; text-transform: uppercase; letter-spacing: .28em; }
.category-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(52px, 6vw, 76px); line-height: 1; font-weight: 400; letter-spacing: -.035em; }

/* article pages */
.article-page { padding-top: 124px; }
.article-head { max-width: 892px; margin: 0 auto; padding-top: 64px; }
.article-back { display: inline-block; color: var(--bronze); font-family: var(--mono); font-size: 10px; line-height: 16px; text-transform: uppercase; letter-spacing: .2em; transition: opacity .2s ease; }
.article-back:hover { opacity: .65; }
.article-head h1 { margin: 11px 0 0; font-family: var(--serif); font-size: clamp(44px, 4.2vw, 52px); line-height: 1.03; font-weight: 400; letter-spacing: -.035em; }
.article-deck { max-width: 780px; margin: 23px 0 0; color: var(--sub); font-size: 18px; line-height: 1.62; font-weight: 300; }
.article-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 36px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-meta-row > p { margin: 0; color: var(--mute); font-family: var(--mono); font-size: 9px; line-height: 16px; text-transform: uppercase; letter-spacing: .16em; }
.article-hero { margin: 64px auto 0; }
.article-hero img { display: block; width: 100%; height: min(66vw, 680px); object-fit: cover; }
.article-prose { max-width: 720px; margin: 84px auto 0; padding: 0 20px; }
.article-prose > p { margin: 0 0 30px; color: #34312d; font-size: 18px; line-height: 1.85; font-weight: 300; }
.article-prose h2 { margin: 68px 0 24px; font-family: var(--serif); font-size: 39px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; }
.article-prose blockquote { margin: 64px -72px; padding: 8px 56px; border-left: 2px solid var(--bronze); color: var(--ink); font-family: var(--serif); font-size: 34px; line-height: 1.38; font-weight: 400; }
.article-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 34px auto 104px; padding: 0 20px; }
.article-tags span, .article-tags a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--mute); font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }
.article-tags a:hover { color: var(--bronze); border-color: var(--bronze); }
.continue-reading { padding-top: 96px; padding-bottom: 112px; border-top: 1px solid var(--line); }
.continue-reading > header { margin-bottom: 56px; text-align: center; }
.continue-reading > header .eyebrow { color: var(--bronze); }
.continue-reading > header h2 { margin: 13px 0 0; font-family: var(--serif); font-size: 42px; line-height: 1.2; font-weight: 400; }

/* about */
.about-page { padding-top: 124px; }
.about-intro { padding-top: 68px; padding-bottom: 104px; border-bottom: 1px solid var(--line); text-align: center; }
.about-intro > .eyebrow, .about-manifesto .eyebrow, .coverage .eyebrow, .about-cta .eyebrow { color: var(--bronze); }
.about-intro h1 { max-width: 700px; margin: 24px auto 54px; font-family: var(--serif); font-size: clamp(54px, 6vw, 72px); line-height: 1.02; font-weight: 400; letter-spacing: -.04em; }
.about-intro h1 em { color: var(--bronze); font-style: normal; }
.about-copy { max-width: 690px; margin: 0 auto; }
.about-copy p { margin: 0 0 18px; color: var(--sub); font-size: 16px; line-height: 1.8; font-weight: 300; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 58px; padding-bottom: 58px; border-bottom: 1px solid var(--line); }
.about-stats > div { text-align: center; }
.about-stats > div + div { border-left: 1px solid var(--line); }
.about-stats strong { display: block; font-family: var(--serif); font-size: 47px; line-height: 1; font-weight: 400; }
.about-stats span { display: block; margin-top: 14px; color: var(--mute); font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .18em; }
.about-manifesto { padding-top: 112px; padding-bottom: 112px; text-align: center; }
.about-manifesto header h2, .coverage header h2 { max-width: 720px; margin: 20px auto 0; font-family: var(--serif); font-size: 45px; line-height: 1.22; font-weight: 400; letter-spacing: -.02em; }
.about-principles { max-width: 920px; margin: 74px auto 0; }
.about-principles article { padding: 42px 12%; border-top: 1px solid var(--line); }
.about-principles article:last-child { border-bottom: 1px solid var(--line); }
.about-principles article > span { color: var(--bronze); font-family: var(--mono); font-size: 11px; }
.about-principles h3 { margin: 14px 0 14px; font-family: var(--serif); font-size: 30px; font-weight: 400; }
.about-principles p { margin: 0 auto; color: var(--sub); font-size: 15px; line-height: 1.75; font-weight: 300; }
.coverage { padding-top: 112px; padding-bottom: 112px; text-align: center; }
.coverage-list { max-width: 940px; margin: 68px auto 0; border-top: 1px solid var(--line); }
.coverage-list a { display: grid; grid-template-columns: 60px 1fr 100px 24px; align-items: center; gap: 20px; padding: 28px 18px; border-bottom: 1px solid var(--line); text-align: left; transition: color .25s ease; }
.coverage-list a:hover { color: var(--bronze); }
.coverage-list a > span, .coverage-list a > p { color: var(--mute); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .17em; }
.coverage-list h3 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.coverage-list p { margin: 0; }
.coverage-list b { font-size: 18px; font-weight: 300; }
.about-cta { padding-top: 104px; padding-bottom: 104px; background: var(--ink); color: #fbf9f5; text-align: center; }
.about-cta h2 { margin: 20px 0 32px; font-family: var(--serif); font-size: 50px; line-height: 1.15; font-weight: 400; }
.about-cta a, .not-found a { display: inline-flex; gap: 10px; color: #c39569; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; }

/* search */
.search-overlay { overflow-y: auto; background: #10100f; color: #f7f3ed; }
.search-shell { width: 100%; min-height: 100%; padding: 105px 4.5vw 70px; }
.search-top { display: flex; align-items: center; justify-content: space-between; }
.search-top > p { margin: 0; color: #c39569; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .33em; }
.search-overlay .overlay-close { position: static; width: 34px; height: 34px; border: 0; color: rgba(247,243,237,.72); font-size: 29px; }
.search-box { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: center; margin-top: 58px; border-bottom: 1px solid rgba(195,149,105,.75); }
.search-box svg { width: 26px; height: 26px; fill: none; stroke: rgba(247,243,237,.55); stroke-width: 1.45; }
.search-box input { width: 100%; min-width: 0; padding: 0 0 19px; border: 0; outline: none; background: transparent; color: #f7f3ed; font-family: var(--serif); font-size: clamp(33px, 4.2vw, 58px); line-height: 1.15; }
.search-box input::placeholder { color: rgba(247,243,237,.2); opacity: 1; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.search-filters button { padding: 10px 18px; border: 1px solid rgba(247,243,237,.12); border-radius: 999px; background: transparent; color: rgba(247,243,237,.65); font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .2em; cursor: pointer; }
.search-filters button.active { border-color: #b9885d; background: #b9885d; color: #fff; }
.search-note { margin: 46px 0 0; color: rgba(247,243,237,.36); font-family: var(--sans); font-size: 14px; font-weight: 300; text-transform: none; letter-spacing: 0; }
.search-note strong { color: rgba(247,243,237,.54); font-weight: 300; }
.search-note kbd { margin-left: 8px; padding: 4px 7px; border: 1px solid rgba(247,243,237,.14); border-radius: 3px; font-family: var(--mono); font-size: 9px; font-weight: 400; }
.search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; max-width: 1000px; margin-top: 34px; background: rgba(247,243,237,.12); }
.search-results a { display: grid; grid-template-columns: 84px 1fr 22px; gap: 18px; align-items: center; min-width: 0; padding: 16px; background: #10100f; }
.search-results img { width: 84px; height: 66px; object-fit: cover; }
.search-results span { color: #b9885d; font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .16em; }
.search-results h3 { margin: 6px 0 0; font-family: var(--serif); font-size: 17px; line-height: 1.25; font-weight: 400; }
.search-results b { color: #b9885d; font-weight: 300; }
.no-results { margin: 0; padding: 28px; background: #10100f; color: rgba(247,243,237,.5); }

.not-found { min-height: 75vh; display: grid; place-items: center; align-content: center; gap: 24px; padding-top: 150px; padding-bottom: 100px; text-align: center; }
.not-found h1 { margin: 0; font-family: var(--serif); font-size: clamp(44px, 7vw, 80px); font-weight: 400; }

@media (max-width: 1023px) {
  .category-page { padding-top: 140px; padding-bottom: 88px; }
  .article-page, .about-page { padding-top: 64px; }
  .article-head { padding-top: 70px; }
  .article-prose blockquote { margin-left: 0; margin-right: 0; padding-left: 34px; padding-right: 10px; }
  .about-intro { padding-top: 104px; }
}

@media (max-width: 639px) {
  .category-page { padding-top: 126px; padding-bottom: 72px; }
  .category-hero { margin-bottom: 52px; }
  .category-hero h1 { font-size: 45px; }
  .category-page .article-grid.three-col, .category-page .article-grid.two-col { grid-template-columns: 1fr; }
  .article-head { padding-top: 58px; }
  .article-head h1 { margin-top: 22px; font-size: 42px; }
  .article-deck { font-size: 16px; }
  .article-meta-row { display: block; }
  .article-meta-row > p { line-height: 1.8; }
  .article-hero { margin-top: 34px; padding-left: 0; padding-right: 0; }
  .article-hero img { height: 82vw; }
  .article-prose { margin-top: 56px; }
  .article-prose > p { font-size: 16px; line-height: 1.8; }
  .article-prose h2 { margin-top: 52px; font-size: 31px; }
  .article-prose blockquote { margin-top: 50px; margin-bottom: 50px; padding-left: 22px; font-size: 28px; }
  .article-tags { margin-bottom: 72px; }
  .continue-reading { padding-top: 72px; padding-bottom: 80px; }
  .continue-reading > header h2 { font-size: 34px; }
  .continue-reading .article-grid.two-col { grid-template-columns: 1fr; }
  .about-intro { padding-top: 88px; padding-bottom: 80px; }
  .about-intro h1 { margin-bottom: 34px; font-size: 51px; }
  .about-copy p { font-size: 15px; }
  .about-stats { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 0; }
  .about-stats > div { padding: 38px 0; }
  .about-stats > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .about-manifesto, .coverage { padding-top: 80px; padding-bottom: 80px; }
  .about-manifesto header h2, .coverage header h2 { font-size: 36px; }
  .about-principles { margin-top: 56px; }
  .about-principles article { padding: 36px 5px; }
  .coverage-list { margin-top: 52px; }
  .coverage-list a { grid-template-columns: 36px 1fr 20px; gap: 10px; padding: 23px 5px; }
  .coverage-list a > p { display: none; }
  .coverage-list h3 { font-size: 23px; }
  .about-cta { padding-top: 80px; padding-bottom: 80px; }
  .about-cta h2 { font-size: 40px; }
  .search-shell { padding: 86px 20px 50px; }
  .search-box { margin-top: 50px; }
  .search-box input { font-size: 32px; }
  .search-filters { gap: 8px; }
  .search-filters button { padding: 9px 12px; font-size: 8px; }
  .search-note { margin-top: 38px; }
  .search-results { grid-template-columns: 1fr; }
  .search-results a { grid-template-columns: 68px 1fr 16px; gap: 13px; padding: 13px 0; }
  .search-results img { width: 68px; height: 55px; }
  .search-results h3 { font-size: 15px; }
}

/* =========================================================================
   WordPress additions — not present in the reference build, required
   because WordPress has more posts, richer post bodies, and an admin bar.
   Every value below is derived from the reference scale above.
   ========================================================================= */

/* Admin bar: WordPress pins a 32px bar over our fixed header. */
body.admin-bar .desktop-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .desktop-header, body.admin-bar .mobile-header { top: 46px; } }

/* Pagination — the reference has 10 articles and no pager. */
.edt-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 88px; }
.edt-pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--mute); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; transition: .25s ease; }
.edt-pagination a.page-numbers:hover { color: var(--bronze); border-color: var(--bronze); }
.edt-pagination .page-numbers.current { background: var(--bronze); border-color: var(--bronze); color: var(--cream); }
.edt-pagination .page-numbers.dots { border-color: transparent; }

/* Long post bodies carry elements the reference's ten articles never used. */
.article-prose h3 { margin: 46px 0 18px; font-family: var(--serif); font-size: 28px; line-height: 1.25; font-weight: 400; letter-spacing: -.015em; }
.article-prose h4, .article-prose h5, .article-prose h6 { margin: 38px 0 14px; font-family: var(--serif); font-size: 22px; line-height: 1.3; font-weight: 400; }
.article-prose ul, .article-prose ol { margin: 0 0 30px; padding-left: 1.3em; color: #34312d; font-size: 18px; line-height: 1.85; font-weight: 300; }
.article-prose li { margin-bottom: 10px; }
.article-prose li::marker { color: var(--bronze); }
.article-prose strong, .article-prose b { font-weight: 600; color: var(--ink); }
.article-prose a { color: var(--bronze); border-bottom: 1px solid rgba(168,123,81,.35); transition: border-color .2s ease; }
.article-prose a:hover { border-bottom-color: var(--bronze); }
.article-prose img { display: block; height: auto; margin: 44px 0; }
.article-prose figure { margin: 44px 0; }
.article-prose figcaption { margin-top: 12px; color: var(--mute); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; text-align: center; }
.article-prose blockquote p { margin: 0; font: inherit; color: inherit; }
.article-prose blockquote p + p { margin-top: 18px; }
.article-prose hr { margin: 56px 0; border: 0; border-top: 1px solid var(--line); }
.article-prose table { width: 100%; margin: 0 0 30px; border-collapse: collapse; font-size: 15px; font-weight: 300; }
.article-prose th, .article-prose td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.article-prose th { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--mute); font-weight: 400; }
.article-prose code { padding: 2px 6px; background: var(--sand); font-family: var(--mono); font-size: .86em; }
.article-prose pre { margin: 0 0 30px; padding: 24px; overflow-x: auto; background: var(--sand); font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.article-prose pre code { padding: 0; background: none; }
.article-prose > *:last-child { margin-bottom: 0; }

/* Search overlay: WordPress ships more posts than fit on one screen. */
.search-results { max-height: none; }
.search-results a { transition: background .2s ease; }
.search-results a:hover { background: #171715; }
.search-results a:focus-visible { outline: 1px solid var(--bronze); outline-offset: -1px; }
.search-results .search-thumb-fallback { display: block; width: 84px; height: 66px; background: linear-gradient(150deg, #2a2724 0%, #1c1a18 100%); }
@media (max-width: 639px) { .search-results .search-thumb-fallback { width: 68px; height: 55px; } }

/* A post with no featured image gets a declared tile rather than a borrowed
   photograph, so the grid keeps its rhythm without misattributing artwork. */
.card-image.is-fallback, .featured-image.is-fallback {
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(155deg, #EDE8DF 0%, #E2DCD1 52%, #D6CEC1 100%);
}
.card-image.is-fallback::after, .featured-image.is-fallback::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(18,17,16,.16); border-radius: 50%;
}

/* Skip link, for keyboard users, in the reference's type scale. */
.edt-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 14px 20px; background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; }
.edt-skip:focus { left: 0; }