/*
Theme Name: Sharp & Driven
Theme URI: https://sharpandriven.com/
Author: Sharp & Driven
Author URI: https://sharpandriven.com/
Description: A custom editorial publication theme for Sharp & Driven — a modern digital lifestyle media and commerce publication. Top Stories hero grid, Latest stream, modular category sections, article template with commerce modules, platform-agnostic product database, Founders' Notes, and newsletter capture. Vanilla CSS, no frameworks.
Version: 1.0.12
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sharp-driven
Tags: editorial, magazine, news, blog, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   SHARP & DRIVEN — design tokens
   Identity: intelligent, modern, architectural, editorial,
   sophisticated, clean. Premium without flashy; masculine
   without stereotype. Photography leads; type is quiet.
   ============================================================ */
:root {
  --sd-ink: #0f1114;
  --sd-ink-soft: #22252a;
  --sd-muted: #5b6470;
  --sd-faint: #9aa3af;
  --sd-paper: #ffffff;
  --sd-paper-deep: #f4f5f7;
  --sd-line: #e8ebf0;
  --sd-line-strong: #d3d9e2;
  --sd-accent: #203BA8;          /* Darker Cobalt — brand signal, used sparingly */
  --sd-accent-ink: #172E82;       /* deep ink blue — hovers, in-body links */
  --sd-accent-tint: #E3EAFB;      /* pale cobalt tint — pills, info blocks, secondary treatments */
  --sd-night: #0b0d10;           /* footer / inverted blocks */
  --sd-night-ink: #eef1f6;
  --sd-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --sd-max: 1240px;
  --sd-reading: 740px;
  --sd-radius: 12px;
  --sd-shadow: 0 1px 2px rgba(15, 17, 20, .06), 0 12px 30px rgba(15, 17, 20, .08);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sd-accent-ink); }
p { margin: 0 0 1.25em; }
h1, h2, h3, h4 { font-family: var(--sd-sans); font-weight: 800; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.02em; }
::selection { background: var(--sd-accent); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sd-night); color: #fff; padding: .7rem 1.1rem; font-size: .85rem;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 3px; }

.wrap { max-width: var(--sd-max); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }

/* kickers / category labels */
.kicker {
  font-family: var(--sd-sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sd-accent-ink);
  margin: 0 0 .55rem;
}
.kicker a:hover { color: var(--sd-accent); }

/* image placeholder blocks — elegant holding pattern until approved
   library images are placed. Never ship these to production. */
.sd-ph {
  position: relative; display: block; overflow: hidden;
  background: linear-gradient(135deg, #e9e4d5 0%, #dcd5c0 45%, #cfc6ab 100%);
}
.sd-ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(24,21,16,.10) 49.7%, rgba(24,21,16,.10) 50.3%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(24,21,16,.10) 49.7%, rgba(24,21,16,.10) 50.3%, transparent 50.3%);
}
.sd-ph::after {
  content: "IMAGE PLACEHOLDER — replace with approved library image";
  position: absolute; inset: auto 0 0 0; padding: .5rem .75rem;
  font-family: var(--sd-sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(24,21,16,.62); background: rgba(250,249,245,.82);
}
.sd-ph .sd-ph-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--sd-sans); font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700;
  color: rgba(24,21,16,.28); letter-spacing: .02em; padding-bottom: 1.5rem; text-align: center;
}
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-16x10 { aspect-ratio: 16 / 10; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-3x4 { aspect-ratio: 3 / 4; }

/* ============================================================
   Header
   ============================================================ */
.site-topbar {
  border-bottom: 1px solid var(--sd-line);
  font-size: .78rem; color: var(--sd-muted);
}
.site-topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .45rem; padding-bottom: .45rem; gap: 1rem;
}
.topbar-date { letter-spacing: .04em; }
.topbar-links { display: flex; gap: 1.25rem; align-items: center; }
.topbar-links a { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.topbar-links a:hover { color: var(--sd-accent-ink); }

.site-brand { text-align: center; padding: clamp(1.4rem, 3vw, 2.4rem) 1rem clamp(1rem, 2vw, 1.6rem); }
.site-wordmark {
  font-family: var(--sd-sans); font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  margin: 0;
}
.site-wordmark .amp { color: var(--sd-accent); font-weight: 400; }
.site-tagline {
  margin: .6rem auto 0; font-family: var(--sd-sans);
  font-size: clamp(.95rem, 2vw, 1.1rem); color: var(--sd-muted); max-width: 46rem;
}
.site-tagline .tagline-l2 { display: block; margin-top: .2rem; }
.brand-socials { margin-top: .9rem; display: flex; gap: 1.15rem; justify-content: center; align-items: center; }
.brand-socials a { color: var(--sd-accent); display: inline-flex; width: 17px; height: 17px; transition: color .2s; }
.brand-socials a:hover { color: var(--sd-accent-ink); }
.brand-socials svg { width: 100%; height: 100%; }

.site-nav {
  border-top: 1px solid var(--sd-ink);
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-paper);
  position: sticky; top: 0; z-index: 100;
}
.site-nav .wrap { display: flex; align-items: center; justify-content: center; }
.menu-toggle {
  display: none; background: none; border: 0; padding: .9rem .4rem;
  font-family: var(--sd-sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--sd-ink);
}
.menu-toggle .bars { display: inline-block; width: 18px; margin-right: .55rem; vertical-align: middle; }
.menu-toggle .bars span { display: block; height: 2px; background: var(--sd-ink); margin: 4px 0; }
.primary-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.primary-menu > li > a {
  display: block; padding: 1rem 1.05rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.primary-menu > li > a:hover { color: var(--sd-accent-ink); border-bottom-color: var(--sd-accent); }
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-category-ancestor > a { border-bottom-color: var(--sd-ink); }
.primary-menu > li.menu-item-latest > a {
  background: var(--sd-night); color: var(--sd-night-ink);
  margin: .55rem .2rem; padding: .45rem 1rem; border-bottom: 0;
}
.primary-menu > li.menu-item-latest > a:hover { background: var(--sd-accent-ink); color: #fff; }

/* ============================================================
   Front page — Top Stories
   ============================================================ */
.top-stories { padding: clamp(1.5rem, 3vw, 2.75rem) 0 clamp(1rem, 2vw, 1.5rem); }
.ts-grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 1020px) {
  .ts-grid { grid-template-columns: 300px minmax(0, 1fr) 330px; align-items: start; }
}
.ts-secondaries { display: grid; gap: 1.5rem; }
@media (min-width: 640px) and (max-width: 1019px) {
  .ts-secondaries { grid-template-columns: 1fr 1fr; }
}

.card-lead .card-media { margin-bottom: 1.1rem; }
.card-lead h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.card-lead .deck { font-family: var(--sd-sans); font-size: 1.08rem; color: var(--sd-muted); margin: .6rem 0 .8rem; }

/* Lead hero: title card over the image.
   The frame keeps a guaranteed minimum height and is a flex column, so the
   bottom-anchored text can never be clipped: if a long headline needs more
   room, the frame grows instead of cutting the kicker or the first line.
   The media image is absolutely positioned to always fill the frame. */
.card-lead-overlay .lead-frame {
  position: relative; border-radius: var(--sd-radius); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(20rem, 32vw, 25rem);
}
.card-lead-overlay .lead-media { display: block; position: absolute; inset: 0; }
.card-lead-overlay .lead-media .card-media { margin-bottom: 0; border-radius: 0; height: 100%; }
.card-lead-overlay .lead-media .card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-lead-overlay .lead-media .sd-ph { height: 100%; }
.card-lead-overlay .lead-media .sd-ph img { width: 100%; height: 100%; object-fit: cover; }
.card-lead-overlay .lead-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,9,17,.85) 0%, rgba(6,9,17,.5) 42%, rgba(6,9,17,0) 72%);
}
.card-lead-overlay .lead-text {
  position: relative; z-index: 1; margin-top: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
/* Keyboard focus on the hero headline: the link is inline and wraps across
   lines, which fragments the global outline into one box per line. Suppress
   the fragmented outline on the link and draw one clean rectangle around
   the whole headline via the h2 instead. Focus stays fully visible. */
.card-lead-overlay h2 a:focus-visible { outline: none; }
.card-lead-overlay h2:focus-within { outline: 2px solid var(--sd-accent); outline-offset: 3px; }
.card-lead-overlay .kicker { color: #fff; }
.card-lead-overlay .kicker a { color: #fff; }
.card-lead-overlay .kicker a:hover { color: var(--sd-accent-tint); }
.card-lead-overlay h2, .card-lead-overlay h2 a { color: #fff; }
.card-lead-overlay h2 a:hover { color: var(--sd-accent-tint); }
.card-lead-overlay .deck { color: rgba(255,255,255,.88); }
.card-lead-overlay .byline { color: rgba(255,255,255,.72); }
.card-lead-overlay .byline a { color: #fff; }
.card-lead-overlay .byline a:hover { color: var(--sd-accent-tint); }
.card-secondary h3 { font-size: 1.28rem; }
.card-secondary .card-media { margin-bottom: .8rem; }
.byline {
  font-size: .78rem; color: var(--sd-muted); letter-spacing: .03em;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.byline .avatar { border-radius: 50%; }
.byline a { font-weight: 600; color: var(--sd-ink-soft); }
.byline a:hover { color: var(--sd-accent-ink); }
.card-media { overflow: hidden; border-radius: var(--sd-radius); }
.card-media img { transition: transform .5s ease; width: 100%; }
a:hover .card-media img, .card-media a:hover img { transform: scale(1.025); }

/* ---------- Latest stream ---------- */
.latest-rail { border-left: 1px solid var(--sd-line); padding-left: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 1019px) { .latest-rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--sd-line); padding-top: 1.5rem; } }
.latest-rail > h2, .rail-title {
  font-family: var(--sd-sans); font-size: .85rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: .8rem; margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--sd-ink);
  display: flex; align-items: center; gap: .6rem;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sd-accent); display: inline-block; animation: sd-pulse 2s infinite; }
@keyframes sd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.latest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.latest-item { display: grid; grid-template-columns: 92px 1fr; gap: .9rem; align-items: start; }
.latest-item .thumb { border-radius: var(--sd-radius); overflow: hidden; }
.latest-item h3 { font-size: .98rem; line-height: 1.3; margin: .25rem 0 .35rem; }
.latest-item .meta { font-size: .74rem; color: var(--sd-faint); letter-spacing: .03em; }
.latest-item .kicker { font-size: .64rem; margin-bottom: .3rem; }
.latest-more { margin-top: 1.25rem; }

/* buttons */
.btn {
  display: inline-block; font-family: var(--sd-sans);
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .8rem 1.6rem; border: 1px solid var(--sd-ink); border-radius: var(--sd-radius);
  background: transparent; color: var(--sd-ink); cursor: pointer;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--sd-night); color: var(--sd-night-ink); border-color: var(--sd-night); }
.btn-solid { background: var(--sd-night); color: var(--sd-night-ink); }
.btn-solid:hover { background: var(--sd-accent-ink); border-color: var(--sd-accent-ink); color: #fff; }

/* ============================================================
   Homepage modular sections
   ============================================================ */
.home-section { padding: clamp(1.75rem, 3.5vw, 3rem) 0; border-top: 1px solid var(--sd-line); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem; padding-bottom: .9rem; border-bottom: 2px solid var(--sd-ink);
}
.section-head h2 {
  font-family: var(--sd-sans); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; margin: 0;
}
.section-head .view-all {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sd-muted); white-space: nowrap;
}
.section-head .view-all:hover { color: var(--sd-accent-ink); }
.cards-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }
.cards-grid .card-feature { grid-column: span 2; }
@media (max-width: 639px) { .cards-grid .card-feature { grid-column: span 1; } }
.card-standard h3 { font-size: 1.12rem; line-height: 1.3; }
.card-standard .card-media { margin-bottom: .85rem; }
.card-standard .deck-sm { font-size: .9rem; color: var(--sd-muted); margin: .4rem 0 .5rem; }
.card-feature h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

/* Founders' Notes cards */
.founder-strip { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-bottom: 1.75rem; }
@media (min-width: 760px) { .founder-strip { grid-template-columns: 1fr 1fr; } }
.founder-card {
  display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: center;
  border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  padding: 1.1rem; background: #fff;
}
.founder-card .f-photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; }
.founder-card h3 { font-size: 1.05rem; margin: 0 0 .2rem; }
.founder-card .f-role { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-accent-ink); }
.founder-card p { font-size: .88rem; color: var(--sd-muted); margin: .4rem 0 0; }

/* Founders' Notes page hero: the founder cards open the page as its title
   section. Same cards as elsewhere, with a touch more presence. */
.founder-hero { padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(1.25rem, 3vw, 2rem); }
.founder-hero .founder-strip { margin-bottom: 0; }
.founder-hero .founder-card h3 { font-size: 1.3rem; }
@media (min-width: 760px) {
  .founder-hero .founder-card { grid-template-columns: 112px 1fr; padding: 1.35rem; }
  .founder-hero .founder-card .f-photo { width: 112px; height: 112px; }
}

/* ============================================================
   Article (single)
   ============================================================ */
.article-hero { margin: clamp(1.5rem, 3vw, 2.5rem) auto; max-width: 1080px; padding: 0 clamp(1rem, 3vw, 2rem); }
.article-head { max-width: var(--sd-reading); margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.article-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin: .4rem 0 .9rem; }
.article-head .deck { font-family: var(--sd-sans); font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--sd-muted); line-height: 1.55; }
.article-meta {
  display: flex; justify-content: center; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--sd-line);
  font-size: .82rem; color: var(--sd-muted);
}
.article-meta .avatar { border-radius: 50%; }
.article-body { max-width: var(--sd-reading); margin: 0 auto; font-family: var(--sd-sans); font-size: 1.13rem; line-height: 1.75; color: var(--sd-ink-soft); }
.article-body p { margin-bottom: 1.5em; }
.article-body h2, .article-body h3 { font-family: var(--sd-sans); margin: 2em 0 .7em; }
.article-body h2 { font-size: 1.7rem; }
.article-body h3 { font-size: 1.35rem; }
.article-body a { color: var(--sd-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--sd-accent); }
.article-body blockquote, .pull-quote {
  margin: 2.2em 0; padding: 0 0 0 1.4rem;
  border-left: 3px solid var(--sd-accent);
  font-size: 1.4rem; line-height: 1.45; font-style: italic; color: var(--sd-ink);
}
.article-body figure { margin: 2em 0; }
.article-body figcaption { font-family: var(--sd-sans); font-size: .8rem; color: var(--sd-faint); margin-top: .6rem; }
.article-body ul, .article-body ol { margin: 0 0 1.5em 1.2em; padding: 0; }
.article-body li { margin-bottom: .5em; }
.article-tags { max-width: var(--sd-reading); margin: 2.5rem auto 0; font-size: .82rem; color: var(--sd-muted); }
.article-tags a { display: inline-block; border: 1px solid var(--sd-line); border-radius: 20px; padding: .3rem .9rem; margin: 0 .4rem .5rem 0; }
.article-tags a:hover { border-color: var(--sd-accent); color: var(--sd-accent-ink); }
.article-tags a.is-selected { background: var(--sd-accent-tint); border-color: var(--sd-accent); color: var(--sd-accent-ink); }

/* commerce module inside articles */
.commerce-module {
  max-width: var(--sd-reading); margin: 2.75rem auto;
  border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  background: #fff; padding: clamp(1.25rem, 3vw, 2rem);
}
.commerce-module > h2 {
  font-family: var(--sd-sans); font-size: .85rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .4rem;
}
.commerce-module .cm-note { font-size: .82rem; color: var(--sd-muted); margin-bottom: 1.25rem; }
.product-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.product-card { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .25s; }
.product-card:hover { box-shadow: var(--sd-shadow); }
.product-card .p-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.product-card .p-brand { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--sd-accent-ink); margin-bottom: .3rem; }
.product-card h3 { font-size: 1.02rem; margin: 0 0 .45rem; line-height: 1.35; }
.product-card .p-desc { font-size: .87rem; color: var(--sd-muted); margin-bottom: .8rem; flex: 1; }
.product-card .p-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; }
.product-card .p-price { font-weight: 800; font-size: 1rem; }
.product-card .p-status { font-size: .72rem; color: var(--sd-faint); letter-spacing: .04em; }
.product-card .btn { margin-top: .9rem; text-align: center; }
.affiliate-note { font-size: .74rem; color: var(--sd-faint); margin-top: 1.1rem; }

/* related reading */
.related { max-width: var(--sd-max); margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--sd-line); }

/* author box */
.author-box {
  max-width: var(--sd-reading); margin: 2.5rem auto 0;
  display: grid; grid-template-columns: 84px 1fr; gap: 1.2rem; align-items: start;
  border-top: 1px solid var(--sd-line); padding-top: 1.75rem;
}
.author-box .avatar { border-radius: 50%; }
.author-box h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.author-box p { font-size: .92rem; color: var(--sd-muted); margin: 0; }

/* newsletter module */
.newsletter-module {
  background: var(--sd-night); color: var(--sd-night-ink);
  border-radius: var(--sd-radius); padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: var(--sd-reading); margin: 3rem auto;
  text-align: center;
}
.newsletter-module h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; color: #fff; }
.newsletter-module p { color: #aab3c0; font-size: .95rem; max-width: 34rem; margin: 0 auto 1.4rem; }
.newsletter-form { display: flex; gap: .6rem; max-width: 26rem; margin: 0 auto; }
.newsletter-form input[type="email"] {
  flex: 1; padding: .85rem 1rem; border: 1px solid #3a352a; border-radius: var(--sd-radius);
  background: #1d1a14; color: #fff; font-size: .95rem; font-family: var(--sd-sans);
}
.newsletter-form input[type="email"]::placeholder { color: #8a8474; }
.newsletter-form .btn { background: var(--sd-accent); border-color: var(--sd-accent); color: #fff; white-space: nowrap; }
.newsletter-form .btn:hover { background: var(--sd-accent-ink); border-color: var(--sd-accent-ink); }
.newsletter-note { font-size: .74rem; color: #8a8474; margin-top: .9rem; }
.newsletter-success { border: 1px solid var(--sd-accent); padding: 1.25rem; border-radius: var(--sd-radius); }
@media (max-width: 560px) { .newsletter-form { flex-direction: column; } }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Archives, search, author
   ============================================================ */
.archive-head { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1rem clamp(1.25rem, 3vw, 2rem); max-width: 46rem; margin: 0 auto; }
.archive-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: .4rem 0 .7rem; }
.archive-head .archive-desc { font-family: var(--sd-sans); font-size: 1.05rem; color: var(--sd-muted); }
.archive-head .kicker { color: var(--sd-faint); }
.archive-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: 1fr; padding-bottom: 1rem; }
@media (min-width: 640px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }
.archive-feature { grid-column: 1 / -1; display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .archive-feature { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.archive-feature h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }

.author-hero { display: grid; gap: 1.5rem; align-items: center; max-width: 46rem; margin: 0 auto; text-align: left; grid-template-columns: 120px 1fr; }
.author-hero .avatar { border-radius: 50%; width: 120px; height: 120px; }
@media (max-width: 560px) { .author-hero { grid-template-columns: 84px 1fr; } .author-hero .avatar { width: 84px; height: 84px; } }

.search-head { padding: clamp(1.75rem, 4vw, 3rem) 0 1rem; }
.search-form-inline { display: flex; gap: .6rem; max-width: 30rem; margin: 1.25rem auto 0; }
.search-form-inline input[type="search"] { flex: 1; padding: .8rem 1rem; border: 1px solid var(--sd-line-strong); border-radius: var(--sd-radius); font-size: .95rem; font-family: var(--sd-sans); background: #fff; }

.pagination { display: flex; gap: .5rem; justify-content: center; padding: 2.5rem 0; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  font-size: .82rem; font-weight: 700; padding: 0 .8rem;
}
.pagination .page-numbers:hover { border-color: var(--sd-accent); color: var(--sd-accent-ink); }
.pagination .page-numbers.current { background: var(--sd-night); color: var(--sd-night-ink); border-color: var(--sd-night); }

/* 404 */
.error-404 { text-align: center; padding: clamp(3rem, 8vw, 6rem) 1rem; max-width: 40rem; margin: 0 auto; }
.error-404 .bignum { font-family: var(--sd-sans); font-size: clamp(4rem, 12vw, 7rem); font-weight: 700; color: var(--sd-line-strong); line-height: 1; margin-bottom: 1rem; }
.error-404 h1 { font-size: 1.8rem; }

/* ============================================================
   Static pages (About, Contact, Standards, Disclosure, Privacy, Terms)
   ============================================================ */
.page-narrow { max-width: var(--sd-reading); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem); }
.page-narrow h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: 1rem; text-align: center; }
.page-narrow .lede { font-family: var(--sd-sans); font-size: 1.2rem; color: var(--sd-muted); text-align: center; margin-bottom: 2.5rem; }
.page-narrow h2 { font-size: 1.45rem; margin: 2.2em 0 .6em; }
.page-narrow h3 { font-size: 1.15rem; margin: 1.8em 0 .5em; }
.page-narrow p, .page-narrow li { font-size: 1.02rem; line-height: 1.7; color: var(--sd-ink-soft); }
.page-narrow ul, .page-narrow ol { margin: 0 0 1.4em 1.3em; }
.owner-note {
  border: 1px dashed var(--sd-accent); background: #fffdf6;
  border-radius: var(--sd-radius); padding: 1rem 1.25rem;
  font-size: .85rem; color: var(--sd-accent-ink); margin: 1.5rem 0;
}
.contact-form { display: grid; gap: 1rem; max-width: 34rem; margin: 2rem auto 0; }
.contact-form label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sd-muted); }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius); font-size: .95rem; font-family: var(--sd-sans); background: #fff;
}
.contact-form textarea { min-height: 9rem; resize: vertical; }
.form-message { padding: 1rem 1.25rem; border-radius: var(--sd-radius); font-size: .9rem; margin-bottom: 1rem; }
.form-message.success { background: #eef3e6; border: 1px solid #9db380; color: #3c5222; }
.form-message.error { background: #f9e9e4; border: 1px solid #cf927f; color: #7c3a26; }

/* ============================================================
   Shop (platform-agnostic commerce)
   ============================================================ */
.shop-cats { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 2rem 0 3rem; }
@media (min-width: 640px) { .shop-cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .shop-cats { grid-template-columns: repeat(3, 1fr); } }
.shop-cat-card { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); overflow: hidden; background: #fff; transition: box-shadow .25s; }
.shop-cat-card:hover { box-shadow: var(--sd-shadow); }
.shop-cat-card .sc-body { padding: 1.1rem 1.25rem 1.35rem; }
.shop-cat-card h3 { font-size: 1.25rem; margin: 0 0 .35rem; }
.shop-cat-card p { font-size: .9rem; color: var(--sd-muted); margin: 0 0 .6rem; }
.shop-cat-card .count { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sd-faint); font-weight: 700; }

/* ============================================================
   Founders' Notes index
   ============================================================ */
.founders-intro { max-width: 44rem; margin: 0 auto 2.5rem; text-align: center; }
.founders-intro .lede { font-family: var(--sd-sans); font-size: 1.15rem; color: var(--sd-muted); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--sd-night); color: var(--sd-night-ink); margin-top: clamp(2.5rem, 5vw, 4rem); }
.footer-top { display: grid; gap: 2.25rem; grid-template-columns: 1fr; padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.footer-brand .site-wordmark { font-size: 1.5rem; text-align: left; color: #fff; }
.footer-brand p { font-size: .88rem; color: #a39c88; max-width: 22rem; }
.footer-col h3 { font-family: var(--sd-sans); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { font-size: .88rem; color: #b9b2a0; }
.footer-col a:hover { color: #fff; }
.footer-newsletter p { font-size: .85rem; color: #a39c88; }
.footer-newsletter .newsletter-form { margin: 0; max-width: none; }
.footer-bottom { border-top: 1px solid #22262c; padding: 1.4rem 0; font-size: .76rem; color: #7c8592; }
.footer-bottom .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom a { color: #aab3c0; }
.footer-bottom a:hover { color: #fff; }
.footer-affdisc { border: 1px solid #22262c; border-left: 3px solid var(--sd-accent); border-radius: 8px; padding: .9rem 1.1rem; margin: 1rem 0 0; background: #101318; font-size: .82rem; line-height: 1.6; color: #aab3c0; }
.footer-affdisc strong { color: #fff; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; }
.footer-socials { justify-content: flex-start; margin-top: 1rem; }
.footer-sister { font-size: .85rem; color: #7c8592; margin-top: .9rem; }
.footer-sister a { color: #93a3f2; font-weight: 600; }

/* flag-inline retired with the sample-content system */

/* ============================================================
   Responsive nav
   ============================================================ */
@media (max-width: 1019px) {
  .menu-toggle { display: block; width: 100%; text-align: left; }
  .site-nav .wrap { flex-direction: column; align-items: stretch; }
  .primary-menu { display: none; flex-direction: column; padding-bottom: .75rem; }
  .site-nav.toggled .primary-menu { display: flex; }
  .primary-menu > li > a { padding: .7rem .4rem; border-bottom: 1px solid var(--sd-line); }
  .primary-menu > li.menu-item-latest > a { margin: .5rem 0; text-align: center; }
}

/* ---------- utility ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: .8rem; color: var(--sd-faint); }

@media print {
  .site-topbar, .site-nav, .site-footer, .newsletter-module, .commerce-module, .related { display: none; }
  body { background: #fff; }
}

@media (min-width: 1020px) { .cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) and (max-width: 1019px) { .cards-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }

.mt-2 { margin-top: 2rem; }

.narrow-list { max-width: 46rem; margin: 0 auto; }
.text-center { text-align: center; }

.strip-narrow { max-width: 60rem; margin: 0 auto 2.5rem; }
.note-narrow { max-width: 46rem; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; }
.archive-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 639px) { .archive-grid.cols-2 { grid-template-columns: 1fr; } }

/* Ticket action module — natural CTA for culture/sports/travel/entertainment coverage */
.ticket-module {
  border: 1px solid var(--sd-line);
  background: var(--sd-accent-tint);
  padding: 1.75rem;
  margin: 2.5rem 0;
  text-align: center;
}
.ticket-event {
  font-family: var(--sd-sans);
  font-size: 1.5rem;
  margin: .5rem 0;
}
.ticket-text { color: var(--sd-muted); max-width: 36rem; margin: 0 auto 1.25rem; }
.ticket-cta { margin: 0 0 .75rem; }
.ticket-note { font-size: .78rem; color: var(--sd-faint); margin: 0; }

/* ============================================================
   Article: affiliate disclosure box + prev/next
   ============================================================ */
.affiliate-disclosure-box {
  max-width: var(--sd-reading); margin: 2.5rem auto 0;
  border: 1px solid var(--sd-line); border-left: 3px solid var(--sd-accent);
  border-radius: 8px; background: var(--sd-paper-deep);
  padding: 1rem 1.2rem; font-size: .88rem; color: var(--sd-muted); line-height: 1.6;
}
.affiliate-disclosure-box strong {
  display: block; color: var(--sd-ink); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .3rem;
}
.affiliate-disclosure-box p { margin: 0; }
.affiliate-disclosure-box a { color: var(--sd-accent-ink); text-decoration: underline; }

.post-nav {
  display: grid; gap: 1rem; margin: 3rem auto 0; max-width: var(--sd-max);
}
@media (min-width: 760px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav-prev a, .post-nav-next a {
  display: block; border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  padding: 1.1rem 1.25rem; transition: border-color .2s, transform .2s;
}
.post-nav-prev a:hover, .post-nav-next a:hover { border-color: var(--sd-accent); transform: translateY(-2px); }
.post-nav-next { text-align: right; }
.pn-label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sd-faint); margin-bottom: .3rem;
}
.pn-title { font-weight: 700; font-size: 1.02rem; }

/* ============================================================
   In-article ad unit [sd_ad] — clearly labeled, restrained
   ============================================================ */
.sd-ad-unit {
  border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  background: var(--sd-paper-deep); padding: 1.6rem; margin: 2.5rem auto;
  max-width: var(--sd-reading); text-align: center;
}
.sd-ad-label {
  font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sd-faint); margin: 0 0 .7rem;
}
.sd-ad-title { font-size: 1.3rem; margin: 0 0 .5rem; }
.sd-ad-text { color: var(--sd-muted); font-size: .95rem; max-width: 30rem; margin: 0 auto 1.1rem; }
.sd-ad-cta { margin: 0 0 .8rem; }
.sd-ad-disclosure { font-size: .74rem; color: var(--sd-faint); margin: 0; }

/* ============================================================
   Empty states (honest placeholders — no demo content ships)
   ============================================================ */
.card-empty { text-align: left; }
.card-empty h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: .6rem 0; }
.latest-empty { color: var(--sd-muted); font-size: .92rem; padding: 1rem 0; }
.owner-note {
  border: 1px dashed var(--sd-line-strong); border-radius: 8px;
  background: var(--sd-paper-deep); color: var(--sd-muted);
  font-size: .88rem; padding: 1rem 1.2rem; margin: 0 0 1.5rem; line-height: 1.6;
}
.owner-note strong { color: var(--sd-ink); }

/* ============================================================
   Slideshow template — visual stories
   ============================================================ */
.sd-slideshow { position: relative; max-width: 1100px; margin: 0 auto; }
/* Without JS every slide stacks in reading order; JS adds .is-js to enable the carousel. */
.sd-slideshow .sd-slide { margin-bottom: 3rem; }
.sd-slideshow.is-js .sd-slide { display: none; margin-bottom: 0; }
.sd-slideshow.is-js .sd-slide.is-active { display: block; animation: sd-fade .35s ease; }
@keyframes sd-fade { from { opacity: 0; } to { opacity: 1; } }
.sd-slide figure { margin: 0 auto; max-width: 56%; }
.sd-slide img { width: 100%; height: auto; border-radius: var(--sd-radius); }
.sd-slide-body { max-width: var(--sd-reading); margin: 1.25rem auto 0; font-size: 1.08rem; line-height: 1.75; color: var(--sd-ink-soft); }
.sd-slide-cap { max-width: var(--sd-reading); margin: .8rem auto 0; font-size: .82rem; color: var(--sd-faint); }
.sd-slideshow-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--sd-reading); margin: 1.5rem auto 0;
}
.sd-slide-count { font-size: .82rem; font-weight: 700; letter-spacing: .1em; color: var(--sd-muted); font-variant-numeric: tabular-nums; }
.sd-slide-nav { display: flex; gap: .6rem; }
.sd-slide-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--sd-line-strong); background: var(--sd-paper);
  font-size: 1.1rem; cursor: pointer; color: var(--sd-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
.sd-slide-btn:hover { background: var(--sd-ink); border-color: var(--sd-ink); color: #fff; }
.sd-slide-btn:disabled { opacity: .35; cursor: default; }
.sd-slide-btn:disabled:hover { background: var(--sd-paper); color: var(--sd-ink); border-color: var(--sd-line-strong); }
.sd-slideshow-intro { max-width: var(--sd-reading); margin: 0 auto 2.5rem; font-size: 1.13rem; line-height: 1.75; color: var(--sd-ink-soft); }
@media (max-width: 639px) {
  .sd-slide-body { font-size: 1rem; }
  .sd-slide-btn { width: 40px; height: 40px; }
  .sd-slide figure { max-width: 100%; }
}

/* ============================================================
   Responsive refinements — 360 / 768 / 1024
   ============================================================ */
/* Mobile: hero leads, supporting stories follow (approved hierarchy). */
@media (max-width: 1019px) {
  .ts-lead { order: -1; }
}
/* 360px: keep the wide-tracked wordmark inside the viewport. */
@media (max-width: 560px) {
  .site-wordmark { font-size: 1.55rem; letter-spacing: .1em; }
  .topbar-date { display: none; }
  .site-topbar .wrap { justify-content: center; }
  .search-form-inline { flex-direction: column; }
  .search-form-inline .btn { width: 100%; }
  .article-head h1 { overflow-wrap: break-word; }
}
/* 768px: two-column card grids hold; tighten section spacing. */
@media (min-width: 640px) and (max-width: 1019px) {
  .home-section { padding: 2rem 0; }
}

/* ============================================================
   Cluster tabs (v1.0.8) — editorial tab row, not pills
   ============================================================ */
.cluster-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.5rem;
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--sd-line);
}
.cluster-tab {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sd-muted);
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.cluster-tab:hover { color: var(--sd-ink); }
.cluster-tab.is-active { color: var(--sd-accent); border-bottom-color: var(--sd-accent); }

/* Footer uses the text wordmark (.site-wordmark); the monogram logo is reserved
   for the publication author avatar, favicon, and Google publisher logo. */

/* ---------- Cookie consent banner ---------- */
.sd-cookie {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: #fff; border-top: 1px solid var(--sd-line);
  box-shadow: 0 -12px 40px rgba(6,9,17,.14);
}
.sd-cookie.sd-show { display: block; }
.sd-cookie .wrap {
  display: flex; align-items: center; gap: .9rem 1.5rem; flex-wrap: wrap;
  padding-top: 1rem; padding-bottom: 1rem;
}
.sd-cookie p { margin: 0; font-size: .85rem; color: var(--sd-ink-soft); flex: 1 1 26rem; }
.sd-cookie p a { font-weight: 600; color: var(--sd-ink); text-decoration: underline; text-underline-offset: 2px; }
.sd-cookie-btns { display: flex; gap: .6rem; flex: 0 0 auto; margin-left: auto; }
.sd-cookie-btns .btn { padding: .65rem 1.3rem; }
@media (max-width: 640px) {
  .sd-cookie-btns { width: 100%; }
  .sd-cookie-btns .btn { flex: 1 1 0; text-align: center; }
}

/* ---------- In-article links: visibly distinct ----------
   Body links inherit text color with no underline by default, which makes
   affiliate and shopping links invisible in article text (no hover on touch).
   Links inside article content get an underline with the brand accent. */
.article-body a, .sd-slide-body a, .sd-slideshow-intro a {
  color: var(--sd-ink);
  text-decoration: underline;
  text-decoration-color: var(--sd-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover, .sd-slide-body a:hover, .sd-slideshow-intro a:hover {
  color: var(--sd-accent-ink);
  text-decoration-color: var(--sd-accent-ink);
}