/*
 Theme Name: Shine Harder Tattoos 2026
 Theme URI: https://tattoos.shineharder.com
 Description: Brutalist editorial dark-mode reskin of tattoos.shineharder.com — built from the Claude Design handoff. Block/FSE child of Twenty Twenty-Five. Parallel slug; activate to replace the InkedMag look.
 Author: Shineharder
 Template: twentytwentyfive
 Version: 1.0
*/

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-sans); color: var(--text-primary); background: var(--canvas); -webkit-font-smoothing: antialiased; }
::selection { background: var(--mint); color: #000; }
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus-cyan); outline-offset: 3px;
}

/* Layout helpers (used by the marketing page templates) */
.sh-container { max-width: var(--max-width); margin: 0 auto; }
.sh-padx { padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { border-bottom: 1px solid var(--image-frame); background: var(--canvas); position: sticky; top: 0; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.wordmark { display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none; flex: 0 0 auto; }
.wordmark-main { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; line-height: .86; letter-spacing: .5px; color: #fff; }
.wordmark-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; color: var(--mint); }
.wordmark .dot, .footer-wordmark .dot { color: var(--mint); }
.nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav a { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; padding: 6px 0; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease); }
.nav a:hover { color: var(--mint); }                 /* mint hover — visible on black */
.nav a.is-active { color: #fff; box-shadow: inset 0 -1px 0 0 var(--mint); }

/* ============================================================
   BUTTON / TAG
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-radius: var(--r-feature); padding: 0 22px; height: 44px; border: 1px solid transparent; cursor: pointer; transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.btn--sm { height: 40px; }
.btn--primary { background: var(--mint); color: #000; }
.btn--primary:hover { background: var(--overlay); color: #000; box-shadow: inset 0 0 0 1px var(--ring-hover); }
.btn--primary:active { background: rgba(140,140,140,.5); }
.btn--promo { background: transparent; color: #fff; border-color: #fff; }
.btn--promo:hover { border-color: var(--mint); color: var(--mint); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: var(--r-tag); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: var(--ls-tag); text-transform: uppercase; }
.tag--outline { border: 1px solid var(--image-frame); color: var(--text-secondary); }
.tag--mint { background: var(--mint); color: #000; }

/* ============================================================
   STORYTILE (static)
   ============================================================ */
.tile { display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-card); padding: 22px; min-height: 230px; text-decoration: none; overflow: hidden; }
.tile--sm { min-height: 120px; padding: 16px 18px; }
.tile-time { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--ls-caps-tight); text-transform: uppercase; }
.tile-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.tile-headline { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.04; margin: 0; transition: color var(--dur-fast) var(--ease); }
.tile--sm .tile-headline { font-size: 20px; }
.tile-deck { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; margin: 0; }
.tile-img { margin-top: auto; border-radius: var(--r-image); border: 1px solid var(--image-frame); width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tile:hover .tile-headline { color: var(--link-hover); }
.tile--mint { background: var(--tile-mint); color: #000; }
.tile--yellow { background: var(--tile-yellow); color: #000; }
.tile--pink { background: var(--tile-pink); color: #000; }
.tile--orange { background: var(--tile-orange); color: #000; }
.tile--purple { background: var(--tile-purple); color: #fff; }
.tile--blue { background: var(--tile-blue); color: #fff; }
.tile--dark { background: var(--canvas); color: #fff; border: 1px solid var(--image-frame); }
.tile--mint .tile-time, .tile--yellow .tile-time, .tile--pink .tile-time, .tile--orange .tile-time { color: rgba(0,0,0,.7); }
.tile--purple .tile-time, .tile--blue .tile-time, .tile--dark .tile-time { color: var(--text-secondary); }
.tile--dark:hover { border-color: var(--mint); }

/* ============================================================
   FEED — WordPress Query Loop styled as StoryTiles
   post-template className "feed-grid"; tiles cycle 6 fills by position.
   Block order inside each post: date, terms, title, excerpt, image.
   ============================================================ */
/* Fixed 3 columns, not auto-fit. auto-fit resolved to FOUR columns in the 1300px
   container, so a 6-post feed rendered 4 + 2 and left two empty cells — a large
   blank swath on the right of the second row. Three columns divide evenly into
   the post counts this feed actually produces (3, 6, 9...). */
.feed-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .feed-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .feed-grid { grid-template-columns: 1fr; } }

.feed-grid > li, .feed-grid .wp-block-post {
  border-radius: var(--r-card); padding: 22px; min-height: 230px;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden; list-style: none;
  background: var(--canvas); border: 1px solid var(--image-frame); color: #fff;
}
.feed-grid .wp-block-post-date { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--ls-caps-tight); text-transform: uppercase; color: inherit; opacity: .72; }
.feed-grid .wp-block-post-terms { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.feed-grid .wp-block-post-terms a { color: inherit; text-decoration: none; }
.feed-grid .wp-block-post-title { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.04; margin: 0; }
.feed-grid .wp-block-post-title a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.feed-grid .wp-block-post-title a:hover { color: var(--link-hover); }
.feed-grid .wp-block-post-excerpt { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; margin: 0; color: inherit; opacity: .85; }
/* Clamp to 3 lines so every card's text block is the same height. Cards are
   stretched to the tallest in their row, and the image is pinned to the bottom —
   so ragged excerpt lengths were opening gaps between the text and the image. */
.feed-grid .wp-block-post-excerpt p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-grid .wp-block-post-excerpt .wp-block-post-excerpt__more-text { display: none; }
.feed-grid .wp-block-post-featured-image { margin-top: auto; }
.feed-grid .wp-block-post-featured-image img { border-radius: var(--r-image); border: 1px solid var(--image-frame); width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* A post with no featured image left a hole where the image should sit (WP omits
   the block entirely, and the card is still stretched to its row). Fill the slot
   so the card reads as complete rather than broken. */
.feed-grid .wp-block-post:not(.has-post-thumbnail)::after {
  content: ""; margin-top: auto; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--r-image); border: 1px solid var(--image-frame);
  background: repeating-linear-gradient(45deg, rgba(127,127,127,.14) 0 8px, rgba(127,127,127,.04) 8px 16px);
}
/* color rotation (6n+2 stays dark default) */
.feed-grid .wp-block-post:nth-child(6n+1) { background: var(--tile-mint);   border-color: transparent; color: #000; }
.feed-grid .wp-block-post:nth-child(6n+3) { background: var(--tile-purple); border-color: transparent; color: #fff; }
.feed-grid .wp-block-post:nth-child(6n+4) { background: var(--tile-yellow); border-color: transparent; color: #000; }
.feed-grid .wp-block-post:nth-child(6n+5) { background: var(--tile-pink);   border-color: transparent; color: #000; }
.feed-grid .wp-block-post:nth-child(6n)   { background: var(--tile-blue);   border-color: transparent; color: #fff; }
/* color by defining category (wins over rotation; child text inherits) */
.feed-grid .wp-block-post.category-tattoo-artists { background: var(--tile-pink);   border-color: transparent; color: #000; }
.feed-grid .wp-block-post.category-tattoo-shops   { background: var(--tile-blue);   border-color: transparent; color: #fff; }
.feed-grid .wp-block-post.category-guides         { background: var(--tile-yellow); border-color: transparent; color: #000; }
.feed-grid .wp-block-post.category-weekly-digest  { background: var(--tile-purple); border-color: transparent; color: #fff; }

/* ============================================================
   HOME static sections (hero, network) — reuse preview classes
   ============================================================ */
.hero { padding-top: 28px; }

/* Branding band — was a 440px block holding one headline. The top third earns
   its space with posts now, so the brand gets a slim strip instead. */
.hero-band { background: var(--mint); border-radius: var(--r-feature); padding: 18px clamp(20px,3vw,32px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: #000; opacity: .75; }
.hero-title { margin: 4px 0 0; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(30px,4.4vw,50px); line-height: .92; letter-spacing: 1px; color: #000; }
.hero-band .tag-row { margin-top: 0; }
.hero-band .tag--outline { border-color: rgba(0,0,0,.35); color: #000; }

/* Lead story + three secondaries */
.hero-posts { display: grid; gap: 16px; grid-template-columns: 1.55fr 1fr; align-items: stretch; }
@media (max-width: 900px) { .hero-posts { grid-template-columns: 1fr; } }

.hero-lead { display: flex; flex-direction: column; text-decoration: none; background: var(--tile-purple); color: #fff; border-radius: var(--r-feature); overflow: hidden; transition: transform var(--dur-fast) var(--ease); }
.hero-lead:hover { transform: translateY(-2px); }
.hero-lead-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-bottom: 1px solid var(--image-frame); }
.hero-lead-body { padding: clamp(20px,2.6vw,30px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hero-lead-title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(24px,3vw,34px); line-height: 1.04; color: #fff; }
.hero-lead-excerpt { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: #fff; opacity: .85; max-width: 52ch; }
.hero-lead .arrow { margin-top: auto; }

.hero-side { display: grid; gap: 16px; grid-template-rows: repeat(3, 1fr); }
/* The side cards stretch to match the tall lead card, so a fixed 96px thumbnail
   left each one a small image marooned in empty space. Let the image fill the
   card's full height instead. */
.hero-mini { display: grid; grid-template-columns: 38% 1fr; gap: 14px; align-items: stretch; text-decoration: none; background: var(--canvas); border: 1px solid var(--image-frame); border-radius: var(--r-feature); padding: 12px; transition: border-color var(--dur-fast) var(--ease); overflow: hidden; }
.hero-mini:hover { border-color: var(--mint); }
.hero-mini-img { width: 100%; height: 100%; min-height: 96px; object-fit: cover; border-radius: var(--r-image); display: block; }
.hero-mini-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hero-mini-title { font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 1.15; color: #fff; }
.hero-mini:hover .hero-mini-title { color: var(--link-hover); }

.lead-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: #fff; opacity: .8; margin-bottom: 6px; }
.arrow { font-family: var(--font-mono); font-size: 22px; color: #fff; }

/* Still used by the footer/network blocks */
.whisper { font-family: var(--font-sans); font-weight: 300; font-size: 19px; letter-spacing: 1.9px; color: #fff; margin-bottom: 14px; }
.lede { margin: 0; font-family: var(--font-serif); font-size: clamp(18px,2.4vw,22px); line-height: 1.35; color: var(--text-muted); max-width: 42ch; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--image-frame); padding-top: 22px; margin-bottom: 22px; }
.section-title { margin: 0; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(40px,6vw,64px); color: #fff; letter-spacing: .5px; line-height: .9; }
.network { background: var(--ultraviolet); border-radius: var(--r-feature); padding: clamp(28px,5vw,48px); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.network-copy { max-width: 46ch; }
.network-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(30px,4vw,44px); line-height: .92; color: #fff; }
.network-deck { margin: 14px 0 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.4; color: #fff; opacity: .9; }
.network-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* InkStream rail */
.rail-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.rail-label { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--mint); }
.rail-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); }
.rail { position: relative; max-width: 760px; padding-left: 22px; }
.rail::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 0; border-left: 1px dashed var(--purple-rule); }
.rail-items { display: flex; flex-direction: column; gap: 14px; }
.rail-item { position: relative; }
.rail-item::before { content: ""; position: absolute; left: -22px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.rail-time { margin-bottom: 6px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); }

/* Field / form */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); }
.field input, .field select, .field textarea { background: var(--canvas); color: #fff; border: 1px solid var(--text-secondary); border-radius: var(--r-input); padding: 12px 14px; font-size: 15px; font-family: var(--font-sans); transition: border-color var(--dur-fast) var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mint); outline: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--image-frame); background: var(--canvas); }
.footer-inner { padding-top: 48px; padding-bottom: 48px; }
.footer-news { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--image-frame); align-items: center; }
.footer-news .whisper { color: var(--text-secondary); margin-bottom: 10px; }
.footer-shout { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(32px,4vw,40px); line-height: .9; color: #fff; }
.footer-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.footer-form .field { flex: 1; min-width: 200px; }
.footer-cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 40px; }
.footer-wordmark { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; line-height: .86; color: #fff; }
.footer-micro { margin: 14px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); line-height: 1.7; }
.footer-col-head { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mint); margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { text-decoration: none; font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--mint); }
.social { display: flex; gap: 10px; flex-wrap: wrap; }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--image-frame); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.social a:hover { color: var(--mint); border-color: var(--mint); }
.footer-legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.footer-legal a { color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.footer-legal a:hover { color: var(--mint); }

/* ============================================================
   PAGE COMPONENTS — About / Categories / Contact (preview parity)
   ============================================================ */
.page-hero { padding-top: 56px; }
.eyebrow { font-family: var(--font-sans); font-weight: 300; font-size: 19px; letter-spacing: 1.9px; color: var(--text-secondary); margin-bottom: 18px; }
.page-title { margin: 0; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(56px,9vw,107px); line-height: .92; letter-spacing: 1px; color: #fff; }
.page-deck { margin: 26px 0 0; max-width: 60ch; font-family: var(--font-serif); font-size: clamp(18px,2.4vw,24px); line-height: 1.4; color: var(--text-muted); }
.divider { border-top: 1px solid var(--image-frame); padding-top: 24px; }
.block-title { margin: 0; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(34px,5vw,56px); line-height: .9; color: #fff; }
.kicker-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kicker { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--mint); }
.kicker-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); }
.cover-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cover-tile { border-radius: var(--r-card); padding: 28px; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; }
.cover-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; }
.cover-tile h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1; }
.cover-tile p { margin: 10px 0 0; font-family: var(--font-sans); font-size: 13px; line-height: 1.6; }
.cover-tile--mint { background: var(--tile-mint); } .cover-tile--mint .cover-num, .cover-tile--mint h3 { color: #000; } .cover-tile--mint p { color: rgba(0,0,0,.65); }
.cover-tile--purple { background: var(--tile-purple); } .cover-tile--purple .cover-num, .cover-tile--purple h3 { color: #fff; } .cover-tile--purple p { color: rgba(255,255,255,.7); }
.cover-tile--pink { background: var(--tile-pink); } .cover-tile--pink .cover-num, .cover-tile--pink h3 { color: #000; } .cover-tile--pink p { color: rgba(0,0,0,.65); }
.cover-tile--blue { background: var(--tile-blue); } .cover-tile--blue .cover-num, .cover-tile--blue h3 { color: #fff; } .cover-tile--blue p { color: rgba(255,255,255,.7); }
.process-rail { position: relative; padding-left: 30px; }
.process-rail::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 0; border-left: 1px dashed var(--purple-rule); }
.process-steps { display: flex; flex-direction: column; gap: 20px; }
.step { position: relative; }
.step::before { content: ""; position: absolute; left: -30px; top: 24px; width: 15px; height: 15px; border-radius: 50%; background: var(--mint); border: 3px solid var(--canvas); }
.step-card { background: var(--canvas); border: 1px solid var(--hazard-white); border-radius: var(--r-card); padding: 26px 28px; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.step-card--slate { background: var(--surface-slate); border: none; }
.step-num { font-family: var(--font-display); font-size: clamp(40px,6vw,60px); line-height: .8; color: var(--mint); min-width: 64px; }
.step-body { flex: 1; min-width: 220px; }
.step-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--mint); margin-bottom: 8px; }
.step-title { font-family: var(--font-sans); font-weight: 700; font-size: 22px; line-height: 1.05; color: #fff; margin-bottom: 8px; }
.step-text { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 60ch; }
.step-card--slate .step-text { color: var(--text-muted); }
.stats-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat-card { background: var(--canvas); border: 1px solid var(--image-frame); border-radius: var(--r-card); padding: 32px 28px; }
.stat-num { font-family: var(--font-display); font-size: clamp(48px,7vw,72px); line-height: .85; color: var(--mint); }
.stat-label { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); }
.voice { background: var(--tile-yellow); border-radius: var(--r-feature); padding: clamp(32px,6vw,64px); }
.voice-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: #000; margin-bottom: 18px; }
.voice-quote { margin: 0; max-width: 24ch; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(32px,5vw,60px); line-height: .95; color: #000; }
.voice-text { margin: 24px 0 0; max-width: 58ch; font-family: var(--font-serif); font-size: clamp(17px,2.2vw,20px); line-height: 1.45; color: #000; }
.cat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cat-tile { text-decoration: none; border-radius: var(--r-card); padding: 26px; min-height: 200px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; transition: border-color var(--dur-fast) var(--ease); }
.cat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; align-self: stretch; }
.cat-thumb { flex: 0 0 auto; width: 112px; height: 112px; object-fit: cover; border-radius: var(--r-nested); border: 1px solid var(--image-frame); }
.cat-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.cat-name { font-family: var(--font-display); text-transform: uppercase; font-size: 34px; line-height: 1.04; margin-bottom: 8px; }
.cat-desc { margin: 8px 0 0; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; }
.cat-tile--mint { background: var(--tile-mint); } .cat-tile--yellow { background: var(--tile-yellow); } .cat-tile--pink { background: var(--tile-pink); } .cat-tile--orange { background: var(--tile-orange); }
.cat-tile--mint .cat-name, .cat-tile--yellow .cat-name, .cat-tile--pink .cat-name, .cat-tile--orange .cat-name { color: #000; }
.cat-tile--mint .cat-count, .cat-tile--yellow .cat-count, .cat-tile--pink .cat-count, .cat-tile--orange .cat-count { color: rgba(0,0,0,.6); }
.cat-tile--mint .cat-desc, .cat-tile--yellow .cat-desc, .cat-tile--pink .cat-desc, .cat-tile--orange .cat-desc { color: rgba(0,0,0,.7); }
.cat-tile--purple { background: var(--tile-purple); } .cat-tile--blue { background: var(--tile-blue); }
.cat-tile--purple .cat-name, .cat-tile--blue .cat-name { color: #fff; }
.cat-tile--purple .cat-count, .cat-tile--blue .cat-count { color: rgba(255,255,255,.65); }
.cat-tile--purple .cat-desc, .cat-tile--blue .cat-desc { color: rgba(255,255,255,.72); }
.cat-tile--outline { background: var(--canvas); border: 1px solid var(--hazard-white); } .cat-tile--slate { background: var(--surface-slate); }
.cat-tile--outline .cat-name, .cat-tile--slate .cat-name { color: #fff; }
.cat-tile--outline .cat-count, .cat-tile--slate .cat-count { color: var(--mint); }
.cat-tile--outline .cat-desc, .cat-tile--slate .cat-desc { color: var(--text-secondary); }
.cat-tile--outline:hover { border-color: var(--mint); }
.table-wrap { overflow-x: auto; border: 1px solid var(--image-frame); border-radius: var(--r-card); }
.compare { width: 100%; min-width: 680px; border-collapse: collapse; font-family: var(--font-sans); }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--image-frame); }
.compare thead th { padding: 18px 20px; background: var(--canvas); }
.compare th + th, .compare td + td { border-left: 1px solid var(--image-frame); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare .row-head, .compare thead .corner { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); }
.compare .col-head { font-family: var(--font-display); text-transform: uppercase; font-size: 22px; }
.compare .col-head--mint { color: var(--mint); } .compare .col-head--white { color: #fff; } .compare .col-head--yellow { color: var(--tile-yellow); }
.compare td { font-size: 15px; color: var(--text-muted); }
.compare td.good { color: var(--mint); }
.contact-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.form-card { background: var(--canvas); border: 1px solid var(--hazard-white); border-radius: var(--r-feature); padding: clamp(24px,4vw,40px); display: flex; flex-direction: column; gap: 20px; }
.form-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--mint); }
.req { color: var(--mint); }
.consent { display: flex; align-items: flex-start; gap: 10px; }
.consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--mint); }
.consent label { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.contact-rail { display: flex; flex-direction: column; gap: 16px; }
.direct-card { background: var(--surface-slate); border-radius: var(--r-card); padding: 28px; }
.direct-card .form-kicker { margin-bottom: 16px; }
.direct-email { display: block; text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: clamp(20px,2.6vw,26px); color: #fff; margin-bottom: 14px; transition: color var(--dur-fast) var(--ease); }
.direct-email:hover { color: var(--mint); }
.direct-card p { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.direct-card .social { margin-top: 20px; }
.direct-card .social a { width: 42px; height: 42px; }
.link-card { text-decoration: none; border-radius: var(--r-card); padding: 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; transition: border-color var(--dur-fast) var(--ease); }
.link-card--purple { background: var(--tile-purple); }
.link-card--outline { background: var(--canvas); border: 1px solid var(--ultraviolet); }
.link-card--outline:hover { border-color: var(--mint); }
.link-card-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; margin-bottom: 6px; }
.link-card--purple .link-card-eyebrow { color: rgba(255,255,255,.7); }
.link-card--outline .link-card-eyebrow { color: var(--text-secondary); }
.link-card-title { font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: #fff; }
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.faq-item { background: var(--canvas); border: 1px solid var(--image-frame); border-radius: var(--r-card); padding: 4px 24px; transition: border-color var(--dur-fast) var(--ease); }
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(17px,2.2vw,20px); color: #fff; list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-plus { flex: 0 0 auto; font-family: var(--font-mono); font-size: 22px; color: var(--mint); transition: transform var(--dur-fast) var(--ease); }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item[open] { border-color: var(--mint); }
.faq-item p { margin: 0 0 20px; font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--text-secondary); max-width: 64ch; }

/* ============================================================
   SINGLE POST (dark) + pipeline-injected markup
   ============================================================ */
.single-post { color: var(--text-muted); }
.single-post .wp-block-post-terms a { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mint); text-decoration: none; }
.single-post .wp-block-post-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(40px,6vw,72px); line-height: .95; color: #fff; }
.single-post .wp-block-post-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); }
.single-post .wp-block-post-featured-image img { border-radius: var(--r-image); border: 1px solid var(--image-frame); width: 100%; }
.single-post .wp-block-post-content { font-family: var(--font-sans); font-size: 16px; line-height: 1.75; color: var(--text-muted); }
.single-post .wp-block-post-content p { margin: 0 0 20px; }
.single-post .wp-block-post-content h2, .single-post .wp-block-post-content h3 { font-family: var(--font-display); text-transform: uppercase; color: #fff; margin: 32px 0 12px; line-height: 1; }
.single-post .wp-block-post-content a { color: var(--mint); text-decoration: underline; text-underline-offset: 2px; }
.single-post .wp-block-post-content a:hover { color: var(--link-hover); }
.single-post .wp-block-separator { border-color: var(--image-frame); background: var(--image-frame); }

/* Pipeline-written content blocks (come embedded in post HTML) */
.discovery-source { font-size: 13px !important; color: var(--text-secondary) !important; font-style: italic; border-top: 1px solid var(--image-frame); padding-top: 12px; margin-top: 24px !important; }
.discovery-source a { color: var(--mint) !important; text-decoration: underline; }
.image-credit { font-size: 11px !important; color: var(--text-secondary) !important; text-align: right; margin-top: 4px !important; }

/* ============================================================
   SHOP OUR PICKS
   ============================================================ */
.shop-disclosure { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; letter-spacing: .3px; color: var(--text-secondary); border: 1px solid var(--image-frame); border-radius: var(--r-nested); padding: 14px 16px; margin: 0 0 40px; max-width: 92ch; }
.shop-section { margin-bottom: 48px; }
.shop-section .kicker-row { margin-bottom: 20px; }
.shop-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pick-card { display: flex; flex-direction: column; background: var(--canvas); border: 1px solid var(--image-frame); border-radius: var(--r-card); overflow: hidden; transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.pick-card:hover { border-color: var(--mint); transform: translateY(-3px); }
.pick-image { position: relative; aspect-ratio: 4 / 3; background-color: #0d0d0d; background-image: linear-gradient(135deg, rgba(60,255,208,.22), rgba(82,0,255,.28)), var(--pick-src, none); background-size: cover; background-position: center; }
.pick-source { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #000; background: var(--mint); padding: 4px 8px; border-radius: var(--r-input); }
.pick-badge { position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #fff; background: var(--absolute-black); border: 1px solid var(--overlay); padding: 4px 8px; border-radius: var(--r-input); }
.pick-body { display: flex; flex-direction: column; gap: 6px; padding: 18px; flex: 1; }
.pick-name { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: 18px; line-height: 1.2; color: #fff; }
.pick-brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.pick-blurb { margin: 4px 0 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.4; color: var(--text-muted); }
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.pick-price { font-family: var(--font-display); font-size: 22px; color: var(--mint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .wordmark-main { font-size: 24px; }
  .wordmark-sub { font-size: 10px; letter-spacing: 1.2px; }
  .nav { gap: 16px; }
}