/* ==========================================================================
   MR. STACH — Design System
   Vintage Americana × sports card × newspaper. Cream paper, black, deep red,
   muted gold, dark blue. Mobile-first.
   ========================================================================== */

@font-face { font-family: 'Anton'; src: url('/assets/fonts/Anton-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('/assets/fonts/Oswald-Bold.ttf') format('truetype'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/PlayfairDisplay.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  --cream: #f3e9d2;
  --cream-2: #ece0c4;
  --cream-3: #e3d4b1;
  --paper: #faf4e6;
  --ink: #1a1410;
  --ink-2: #3a3028;
  --ink-3: #6b5d4f;
  --red: #b01e22;
  --red-2: #8e171b;
  --gold: #c9a227;
  --gold-2: #a8851c;
  --blue: #1f3a5f;
  --blue-2: #162a45;
  --green: #2e5e3a;
  --white: #fffdf7;
  --shadow: 0 2px 0 rgba(26,20,16,.12), 0 10px 24px -12px rgba(26,20,16,.35);
  --shadow-sm: 0 1px 0 rgba(26,20,16,.10), 0 4px 10px -6px rgba(26,20,16,.3);
  --radius: 14px;
  --radius-sm: 8px;
  --head: 'Anton', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --cond: 'Oswald', 'Arial Narrow', sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--body); color: var(--ink); background: var(--cream);
  background-image: radial-gradient(rgba(26,20,16,.035) 1px, transparent 1px); background-size: 5px 5px;
  line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-2); }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.05; font-family: var(--head); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
h4 { font-size: 1.1rem; font-family: var(--cond); font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--cream); padding: 8px 14px; z-index: 999; border-radius: 6px; }
.skip-link:focus { left: 8px; }

/* Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } }
.section { padding: 36px 0; }
@media (min-width: 768px) { .section { padding: 52px 0; } }
.section--tight { padding: 20px 0; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } }
.flex { display: flex; gap: 12px; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { text-align: center; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:36px}
.muted { color: var(--ink-3); }
.small { font-size: .875rem; }
.tiny { font-size: .75rem; }
.cond { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.serif { font-family: var(--serif); }
.red { color: var(--red); } .gold { color: var(--gold-2); } .blue { color: var(--blue); }
.hide-mobile { display: none; } @media (min-width: 900px) { .hide-mobile { display: initial; } }
.hide-desktop { display: initial; } @media (min-width: 900px) { .hide-desktop { display: none !important; } }

/* Section headers -------------------------------------------------------- */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; display: flex; align-items: center; gap: 12px; }
.sec-head h2 .stache { width: 38px; height: 18px; color: var(--red); }
.sec-head .more { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.kicker { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--red); }
.rule { height: 3px; background: var(--ink); margin: 10px 0 16px; position: relative; }
.rule::after { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--ink); }
.divider-stache { text-align: center; margin: 8px 0 18px; color: var(--red); }
.divider-stache svg { width: 64px; height: 28px; }

/* Buttons ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--cream); font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: transform .08s ease, box-shadow .15s ease, background .15s; box-shadow: 0 3px 0 rgba(0,0,0,.25); line-height: 1.1; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); color: var(--white); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn-red { background: var(--red); border-color: var(--red-2); color: #fff; } .btn-red:hover { background: var(--red-2); }
.btn-blue { background: var(--blue); border-color: var(--blue-2); color: #fff; } .btn-blue:hover { background: var(--blue-2); }
.btn-gold { background: var(--gold); border-color: var(--gold-2); color: var(--ink); } .btn-gold:hover { background: var(--gold-2); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: none; } .btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink); padding: 8px 10px; } .btn-ghost:hover { background: rgba(26,20,16,.07); color: var(--ink); transform: none; }
.btn-sm { padding: 8px 14px; font-size: .8rem; }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }

/* Cards ------------------------------------------------------------------ */
.card { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.card--flat { box-shadow: var(--shadow-sm); }
.card-head { background: var(--ink); color: var(--cream); padding: 8px 14px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: 8px; }
.card-head.red { background: var(--red); color: #fff; }
.card-head.blue { background: var(--blue); color: #fff; }
.card-head.green { background: var(--green); color: #fff; }
.card-head.gold { background: var(--gold); color: var(--ink); }
.card-body { padding: 14px; }
@media (min-width: 768px) { .card-body { padding: 18px; } }
.card-img { aspect-ratio: 4/5; object-fit: cover; width: 100%; background: var(--cream-3); }
.card-img--wide { aspect-ratio: 16/10; }
.card-img--square { aspect-ratio: 1/1; }
.card-title { font-family: var(--head); text-transform: uppercase; font-size: 1.35rem; line-height: 1; margin: 0 0 4px; color: var(--ink); }
.card-title a { color: inherit; }
.card-sub { color: var(--ink-3); font-size: .9rem; }

/* Entity tile (celebs/characters/profiles) */
.tile { display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; color: var(--ink); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.tile .tile-img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cream-3); }
.tile .tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile .tile-body { padding: 10px 12px 12px; }
.tile .tile-name { font-family: var(--head); text-transform: uppercase; font-size: 1.1rem; line-height: 1; margin-bottom: 3px; }
.tile .tile-sub { font-size: .8rem; color: var(--ink-3); }
.tile .score { position: absolute; top: 8px; right: 8px; background: var(--red); color: #fff; font-family: var(--head); font-size: 1rem; padding: 3px 8px; border-radius: 6px; border: 2px solid var(--paper); box-shadow: var(--shadow-sm); }
.tile .tag { position: absolute; left: 8px; top: 8px; }
.tile .votes { position: absolute; left: 8px; bottom: 8px; background: rgba(26,20,16,.85); color: var(--cream); font-size: .75rem; padding: 3px 8px; border-radius: 6px; font-family: var(--cond); letter-spacing: .04em; }

/* Badges / chips ---------------------------------------------------------- */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; background: var(--ink); color: var(--cream); line-height: 1.4; }
.tag-red { background: var(--red); color: #fff; } .tag-gold { background: var(--gold); color: var(--ink); } .tag-blue { background: var(--blue); color: #fff; } .tag-green { background: var(--green); color: #fff; }
.tag-outline { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.tag-cream { background: var(--cream-3); color: var(--ink); }
.lvl-hof { background: var(--ink); color: var(--gold); } .lvl-platinum { background: #dcdce4; color: var(--ink); } .lvl-gold { background: var(--gold); color: var(--ink); } .lvl-silver { background: #c8c8c8; color: var(--ink); } .lvl-bronze { background: #b87333; color: #fff; } .lvl-rookie { background: var(--cream-3); color: var(--ink); }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Stats ---------------------------------------------------------------- */
.stats { display: grid; gap: 6px; }
.stat { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }
.stat .bar { grid-column: 1 / -1; height: 8px; background: rgba(26,20,16,.12); border-radius: 4px; overflow: hidden; }
.stat .bar > span { display: block; height: 100%; background: var(--red); border-radius: 4px; }
.stat .val { font-family: var(--head); font-size: 1.1rem; color: var(--red); }
.stat-big { display: flex; align-items: baseline; gap: 6px; } .stat-big .n { font-family: var(--head); font-size: 2.2rem; color: var(--red); line-height: 1; } .stat-big .l { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--ink-3); }

/* Forms ----------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label, .label { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .07em; font-size: .8rem; font-weight: 700; margin-bottom: 6px; }
.field .hint { font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.input, input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; border: 2px solid var(--ink); border-radius: 9px; background: var(--white); color: var(--ink); font-size: 16px; outline: none; transition: box-shadow .15s; }
.input:focus, input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(176,30,34,.25); border-color: var(--red); }
textarea { min-height: 110px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin-bottom: 10px; cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--red); flex: none; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
@media (min-width: 768px) { .check-grid { grid-template-columns: repeat(3, 1fr); } }
.form-row { display: grid; gap: 0 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.alert { padding: 12px 16px; border-radius: 10px; border: 2px solid var(--ink); margin-bottom: 16px; background: var(--paper); font-weight: 500; }
.alert-success { border-color: var(--green); background: #e8f2ea; color: var(--green); }
.alert-error { border-color: var(--red); background: #f9e6e6; color: var(--red-2); }
.alert-info { border-color: var(--blue); background: #e6ecf4; color: var(--blue); }
.hp { position: absolute; left: -5000px; }
fieldset { border: 2px solid var(--ink); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; }
legend { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 0 8px; }

/* Header ---------------------------------------------------------------- */
.site-header { background: var(--cream); border-bottom: 3px solid var(--ink); position: sticky; top: 0; z-index: 50; }
.site-header .bar { display: flex; align-items: center; gap: 12px; height: 64px; }
@media (min-width: 1024px) { .site-header .bar { height: 84px; } }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }
.logo img { width: 52px; height: 52px; } @media (min-width: 1024px) { .logo img { width: 72px; height: 72px; } }
.logo .logo-text { font-family: var(--head); font-size: 1.35rem; line-height: .95; text-transform: uppercase; }
.logo .logo-text small { display: block; font-family: var(--cond); font-size: .6rem; letter-spacing: .18em; color: var(--red); }
.nav { display: none; margin-left: auto; gap: 2px; align-items: center; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav a { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: .8rem; color: var(--ink); padding: 10px 7px; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a.active { border-bottom-color: var(--red); color: var(--ink); }
.nav .dd { position: relative; }
.nav .dd > a::after { content: ' ▾'; font-size: .7em; }
.nav .dd-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; min-width: 220px; padding: 8px 0; box-shadow: var(--shadow); z-index: 60; }
.nav .dd:hover .dd-menu, .nav .dd:focus-within .dd-menu { display: block; }
.nav .dd-menu a { display: block; padding: 8px 14px; border: 0; font-size: .82rem; }
.nav .dd-menu a:hover { background: var(--cream-2); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
@media (min-width: 1024px) { .header-actions { margin-left: 10px; } }
.icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid transparent; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: rgba(26,20,16,.08); }
.icon-btn svg { width: 22px; height: 22px; }
.burger { display: inline-flex; } @media (min-width: 1024px) { .burger { display: none; } }
.mobile-nav { display: none; position: fixed; inset: 64px 0 0 0; background: var(--cream); z-index: 49; overflow: auto; padding: 16px; border-top: 2px solid var(--ink); }
.mobile-nav.open { display: block; }
.mobile-nav a.mn-link { display: block; padding: 13px 8px; font-family: var(--head); text-transform: uppercase; font-size: 1.35rem; color: var(--ink); border-bottom: 1px solid rgba(26,20,16,.15); }
.mobile-nav .mn-sub { padding: 6px 8px 10px 20px; display: grid; gap: 4px; }
.mobile-nav .mn-sub a { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: var(--ink-2); padding: 6px 0; }
.mobile-nav .mn-cta { display: grid; gap: 10px; margin: 16px 0; }
.search-overlay { display: none; position: fixed; inset: 0; background: rgba(26,20,16,.85); z-index: 100; padding: 80px 16px; }
.search-overlay.open { display: block; }
.search-overlay form { max-width: 700px; margin: 0 auto; display: flex; gap: 8px; }
.search-overlay input { font-size: 1.25rem; padding: 16px; }
.announce { background: var(--ink); color: var(--cream); text-align: center; font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; padding: 6px 12px; }
.announce a { color: var(--gold); }

/* Hero ------------------------------------------------------------------ */
.hero { padding: 28px 0 20px; }
@media (min-width: 900px) { .hero { padding: 44px 0 28px; } }
.hero-grid { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 36px; } }
.hero-copy .pre { font-family: var(--cond); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.hero-copy .pre::before, .hero-copy .pre::after { content: ''; height: 2px; width: 28px; background: var(--ink); }
.hero-copy h1 { font-size: clamp(2.6rem, 7.5vw, 5.2rem); margin: 6px 0 10px; }
.hero-copy h1 .em { color: var(--red); display: block; }
.hero-copy .tag-line { display: inline-block; background: var(--red); color: #fff; font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; padding: 6px 16px; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); margin: 6px 0 14px; }
.hero-copy .lede { font-size: 1.1rem; max-width: 46ch; color: var(--ink-2); }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hero-logo { display: flex; justify-content: center; }
.hero-logo img { width: min(100%, 360px); filter: drop-shadow(0 14px 24px rgba(26,20,16,.3)); }
@media (min-width: 900px) { .hero-logo img { width: min(100%, 440px); } }
.hero-inline-logo { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
@media (min-width: 640px) { .hero-inline-logo { grid-template-columns: 180px 1fr; } }

/* Stach of the day ------------------------------------------------------- */
.sotd { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sotd { grid-template-columns: 1fr 1fr; } }
.sotd .sotd-img { position: relative; aspect-ratio: 1/1; background: var(--cream-3); }
.sotd .sotd-img img { width: 100%; height: 100%; object-fit: cover; }
.sotd .sotd-img .brush { position: absolute; top: 12px; left: 12px; background: var(--ink); color: var(--cream); font-family: var(--head); text-transform: uppercase; font-size: 1.1rem; padding: 6px 16px; clip-path: polygon(3% 0, 100% 6%, 97% 100%, 0 94%); }
.sotd .sotd-body { padding: 16px; display: flex; flex-direction: column; }
.sotd .name { font-family: var(--head); text-transform: uppercase; font-size: 1.9rem; line-height: 1; color: var(--red); }
.sotd .loc { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--ink-3); margin-bottom: 10px; }
.sotd .stat-table { width: 100%; border-collapse: collapse; font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; margin: 6px 0 10px; }
.sotd .stat-table td { padding: 5px 0; border-bottom: 1px solid rgba(26,20,16,.15); }
.sotd .stat-table td:last-child { text-align: right; font-family: var(--head); font-size: 1.2rem; color: var(--red); }
.sotd .rank { background: var(--gold); color: var(--ink); border-radius: 8px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.sotd .rank b { font-family: var(--head); font-size: 1.05rem; white-space: nowrap; }
.sotd .sotd-body { min-width: 0; } .sotd .rank { overflow: hidden; }

/* Battle ------------------------------------------------------------------ */
.battle { text-align: center; }
.battle .vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.battle .contestant img { aspect-ratio: 1/1; object-fit: cover; width: 100%; border: 2px solid var(--ink); border-radius: 10px; background: var(--cream-3); }
.battle .contestant .cname { font-family: var(--head); text-transform: uppercase; font-size: 1.05rem; margin: 8px 0 2px; line-height: 1; }
.battle .vs { font-family: var(--head); font-size: 1.4rem; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; align-self: center; border: 2px solid var(--ink); }
.battle .meter { height: 14px; border-radius: 7px; overflow: hidden; background: var(--blue); display: flex; border: 2px solid var(--ink); margin: 10px 0 6px; }
.battle .meter > span { display: block; height: 100%; background: var(--red); transition: width .5s ease; }
.battle .pcts { display: flex; justify-content: space-between; font-family: var(--head); font-size: 1.2rem; }
.battle .countdown { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: var(--ink-3); margin-top: 8px; }
.battle .countdown b { color: var(--red); font-variant-numeric: tabular-nums; }
.battle .voted { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--green); font-weight: 700; }

/* Trending strip ---------------------------------------------------------- */
.trend-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 640px) { .trend-row { grid-template-columns: repeat(6, 1fr); } }
.trend { position: relative; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; aspect-ratio: 4/5; background: var(--cream-3); color: var(--cream); display: block; }
.trend img { width: 100%; height: 100%; object-fit: cover; }
.trend .t-votes { position: absolute; left: 6px; bottom: 6px; background: rgba(26,20,16,.85); padding: 3px 7px; border-radius: 5px; font-size: .75rem; font-family: var(--cond); display: flex; align-items: center; gap: 4px; }
.trend .t-name { position: absolute; left: 0; right: 0; top: 0; padding: 6px; font-size: .7rem; font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; background: linear-gradient(rgba(0,0,0,.6), transparent); opacity: 0; transition: opacity .15s; }
.trend:hover .t-name { opacity: 1; }
.trend .t-rank { position: absolute; top: 6px; right: 6px; background: var(--red); color: #fff; font-family: var(--head); font-size: .9rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.filter-tabs { display: inline-flex; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.filter-tabs a, .filter-tabs button { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700; padding: 6px 12px; color: var(--ink); border: 0; background: transparent; cursor: pointer; }
.filter-tabs a.active, .filter-tabs button.active { background: var(--ink); color: var(--cream); }

/* Article list ------------------------------------------------------------ */
.article-card { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; }
.article-card img { aspect-ratio: 1/1; object-fit: cover; border: 2px solid var(--ink); border-radius: 8px; width: 100%; background: var(--cream-3); }
.article-card h3 { font-size: 1.1rem; margin: 4px 0 4px; }
.article-card h3 a { color: var(--ink); }
.article-card .meta { font-size: .75rem; color: var(--ink-3); font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; }
.article-feature { display: grid; gap: 0; }
.article-feature img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.article-feature h3 { font-size: 1.5rem; }
.prose { font-size: 1.05rem; line-height: 1.75; max-width: 72ch; }
.prose h2 { font-size: 1.7rem; margin-top: 1.4em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.3em; }
.prose blockquote { border-left: 4px solid var(--red); margin: 1.2em 0; padding: 6px 18px; font-family: var(--serif); font-size: 1.15rem; font-style: italic; background: var(--paper); }
.prose ul li, .prose ol li { margin-bottom: .35em; }
.prose a { text-decoration: underline; }
.prose img { border: 2px solid var(--ink); border-radius: var(--radius); }
.article-hero { position: relative; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.article-hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--ink-3); margin-bottom: 14px; }
.article-layout { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.sidebar > * + * { margin-top: 22px; }
.sticky { position: sticky; top: 100px; }

/* Profile / person page ---------------------------------------------------- */
.profile-hero { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .profile-hero { grid-template-columns: 380px 1fr; align-items: start; } }
.profile-hero .portrait { border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--cream-3); position: relative; }
.profile-hero .portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.profile-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.profile-hero .nick { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--red); }
.fact-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .95rem; }
.fact-list dt { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--red); font-weight: 700; padding-top: 2px; }
.fact-list dd { margin: 0; }
.vote-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vote-box .vcount { font-family: var(--head); font-size: 1.4rem; }
.score-ring { width: 86px; height: 86px; border-radius: 50%; background: var(--red); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--head); font-size: 2rem; line-height: 1; border: 3px solid var(--ink); box-shadow: var(--shadow-sm); flex: none; }
.score-ring small { font-family: var(--cond); font-size: .55rem; letter-spacing: .1em; }
.img-toggle { display: inline-flex; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.img-toggle button { padding: 6px 14px; border: 0; background: transparent; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; cursor: pointer; color: var(--ink); font-size: .8rem; }
.img-toggle button.active { background: var(--red); color: #fff; }
.share-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.share-row a, .share-row button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; background: var(--paper); color: var(--ink); cursor: pointer; }
.share-row a:hover, .share-row button:hover { background: var(--ink); color: var(--cream); }
.share-row svg { width: 18px; height: 18px; fill: currentColor; }

/* Stach Card display ---------------------------------------------------------- */
.stach-card-view { display: grid; gap: 18px; justify-items: center; }
.stach-card-view img { max-width: 100%; width: 380px; border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(26,20,16,.6); }
.card-flip { perspective: 1400px; width: min(100%, 380px); }
.card-flip .inner { position: relative; transition: transform .7s; transform-style: preserve-3d; aspect-ratio: 750/1050; }
.card-flip.flipped .inner { transform: rotateY(180deg); }
.card-flip .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px -16px rgba(26,20,16,.6); }
.card-flip .face img { width: 100%; height: 100%; object-fit: cover; }
.card-flip .back { transform: rotateY(180deg); }
.card-preview { background: var(--cream); border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; aspect-ratio: 750/1050; position: relative; box-shadow: var(--shadow); max-width: 360px; }
.card-preview .cp-head { background: var(--ink); color: var(--cream); font-family: var(--head); padding: 8px 14px; font-size: 1.3rem; display: flex; justify-content: space-between; align-items: center; }
.card-preview .cp-head small { font-family: var(--cond); font-size: .6rem; color: var(--gold); letter-spacing: .1em; }
.card-preview .cp-img { aspect-ratio: 1/1; object-fit: cover; width: 100%; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.card-preview .cp-body { padding: 10px 14px; }
.card-preview .cp-name { font-family: var(--head); font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.card-preview .cp-nick { font-family: var(--serif); font-style: italic; color: var(--red); font-size: .95rem; }
.card-preview .cp-foot { position: absolute; bottom: 10px; left: 14px; right: 14px; display: flex; justify-content: space-between; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--ink); color: var(--cream); margin-top: 40px; border-top: 6px solid var(--red); }
.site-footer a { color: var(--cream); opacity: .85; } .site-footer a:hover { opacity: 1; color: var(--gold); }
.footer-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; padding: 40px 0 24px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } }
.footer-grid h4 { color: var(--gold); font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: 10px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .92rem; }
.footer-brand { grid-column: 1 / -1; } @media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-brand img { width: 110px; }
.footer-bottom { border-top: 1px solid rgba(243,233,210,.15); padding: 16px 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: .8rem; }
.footer-bottom .motto { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; display: flex; gap: 14px; flex-wrap: wrap; }
.social-icons { display: flex; gap: 8px; }
.social-icons a { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(243,233,210,.4); display: inline-flex; align-items: center; justify-content: center; }
.social-icons svg { width: 18px; height: 18px; fill: currentColor; }

/* Newsletter block ---------------------------------------------------------- */
.newsletter-block { background: var(--ink); color: var(--cream); border: 3px solid var(--gold); border-radius: var(--radius); padding: 22px; display: grid; gap: 16px; grid-template-columns: 1fr; align-items: center; position: relative; overflow: hidden; }
@media (min-width: 900px) { .newsletter-block { grid-template-columns: 1.2fr 1fr; padding: 28px; } }
.newsletter-block h3 { color: var(--gold); font-size: 2rem; margin-bottom: 2px; }
.newsletter-block .tag-line { font-family: var(--serif); font-style: italic; color: var(--cream); opacity: .9; }
.newsletter-block form { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .newsletter-block form { grid-template-columns: 1fr auto; } }
.newsletter-block input { border-color: var(--gold); }
.newsletter-inline { display: flex; gap: 6px; } .newsletter-inline input { flex: 1; min-width: 0; }

/* Pagination / breadcrumbs ---------------------------------------------------- */
.breadcrumbs { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--ink-3); margin: 12px 0 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--ink-3); } .breadcrumbs a:hover { color: var(--red); }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 13px; border: 2px solid var(--ink); border-radius: 8px; font-family: var(--cond); font-weight: 700; color: var(--ink); }
.pagination span.cur { background: var(--ink); color: var(--cream); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.chips a { padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 700; color: var(--ink); background: var(--paper); }
.chips a.active, .chips a:hover { background: var(--ink); color: var(--cream); }

/* Misc ---------------------------------------------------------------- */
.poster { background: var(--ink); color: var(--cream); border: 3px solid var(--gold); border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden; }
.poster h2, .poster h3 { color: var(--gold); }
.poster-red { background: var(--red); border-color: var(--ink); color: #fff; } .poster-red h2, .poster-red h3 { color: #fff; }
.poster-blue { background: var(--blue); border-color: var(--gold); }
.numbered { counter-reset: n; list-style: none; padding: 0; display: grid; gap: 10px; }
.numbered li { counter-increment: n; display: block; position: relative; padding-left: 54px; min-height: 40px; }
.numbered li::before { content: counter(n); position: absolute; left: 0; top: 0; font-family: var(--head); font-size: 1.4rem; color: var(--red); width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--paper); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; padding: 8px; border-bottom: 2px solid var(--ink); }
.table td { padding: 8px; border-bottom: 1px solid rgba(26,20,16,.15); vertical-align: middle; }
.table tr:hover td { background: rgba(26,20,16,.03); }
.table-wrap { overflow-x: auto; }
.rank-row { display: grid; grid-template-columns: 44px 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(26,20,16,.15); color: var(--ink); }
.rank-row .rn { font-family: var(--head); font-size: 1.5rem; color: var(--red); text-align: center; }
.rank-row img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); }
.rank-row .rname { font-family: var(--head); text-transform: uppercase; font-size: 1.1rem; line-height: 1; }
.rank-row .rsub { font-size: .78rem; color: var(--ink-3); }
.rank-row .rscore { font-family: var(--head); font-size: 1.3rem; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 10px; border: 2px solid var(--gold); opacity: 0; pointer-events: none; transition: .25s; z-index: 200; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.faq details { border: 2px solid var(--ink); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: var(--paper); }
.faq summary { cursor: pointer; font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.qr img, .qr svg { width: 160px; height: 160px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; padding: 6px; }
.phone-steps { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 768px) { .phone-steps { grid-template-columns: 1fr 1fr; } }
.install-banner { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; background: var(--ink); color: var(--cream); border: 2px solid var(--gold); border-radius: 12px; padding: 12px 14px; z-index: 90; align-items: center; gap: 12px; }
.install-banner.show { display: flex; }
.install-banner img { width: 44px; height: 44px; border-radius: 10px; }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-3); border: 2px dashed rgba(26,20,16,.3); border-radius: var(--radius); }
.stache-icon { width: 28px; height: 14px; vertical-align: middle; }
.level-pill { display: inline-block; padding: 4px 10px; border-radius: 6px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; }
.upload-drop { border: 2px dashed var(--ink); border-radius: var(--radius); padding: 22px; text-align: center; background: var(--paper); cursor: pointer; }
.upload-drop.has-file { border-style: solid; }
.upload-drop img { max-height: 260px; margin: 10px auto 0; border-radius: 10px; border: 2px solid var(--ink); }
.step-bar { display: flex; gap: 4px; margin-bottom: 18px; }
.step-bar span { flex: 1; height: 6px; background: rgba(26,20,16,.15); border-radius: 3px; }
.step-bar span.done { background: var(--red); }
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 640px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } }
.theme-opt { border: 2px solid var(--ink); border-radius: 10px; padding: 10px; cursor: pointer; background: var(--paper); display: flex; gap: 8px; align-items: center; }
.theme-opt input { accent-color: var(--red); }
.theme-opt.active { background: var(--ink); color: var(--cream); }
.theme-opt .sw { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.3); flex: none; }

/* Admin -------------------------------------------------------------- */
.admin-layout { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 1024px) { .admin-layout { grid-template-columns: 240px 1fr; } }
.admin-side { background: var(--ink); color: var(--cream); padding: 18px 14px; }
.admin-side a { display: block; color: var(--cream); padding: 8px 10px; border-radius: 8px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; opacity: .85; }
.admin-side a:hover, .admin-side a.active { background: rgba(255,255,255,.08); opacity: 1; color: var(--gold); }
.admin-side h5 { color: var(--gold); font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; margin: 16px 10px 6px; }
.admin-main { padding: 20px; } @media (min-width: 1024px) { .admin-main { padding: 28px 32px; } }
.kpi { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; padding: 14px; }
.kpi .n { font-family: var(--head); font-size: 2rem; color: var(--red); line-height: 1; } .kpi .l { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--ink-3); }
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.status { display: inline-block; padding: 2px 8px; border-radius: 5px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700; }
.status-pending, .status-review, .status-idea { background: var(--gold); color: var(--ink); } .status-approved, .status-published, .status-active { background: var(--green); color: #fff; } .status-rejected, .status-archived, .status-closed { background: var(--ink-3); color: #fff; } .status-flagged, .status-open { background: var(--red); color: #fff; } .status-draft, .status-scheduled { background: var(--blue); color: #fff; }

@media print { .site-header, .site-footer, .nav, .btn, .newsletter-block, .install-banner { display: none !important; } body { background: #fff; } }

/* Admin slice ------------------------------------------------------------ */
.admin-bar { background: var(--ink); color: var(--cream); border-bottom: 3px solid var(--gold); }
.admin-bar .inner { display: flex; align-items: center; gap: 12px; height: 56px; }
.admin-bar .logo .logo-text { color: var(--cream); font-size: 1.1rem; } .admin-bar .logo img { width: 40px; height: 40px; }
.admin-bar .links { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.admin-bar .links a, .admin-bar .links button { color: var(--cream); font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: transparent; border: 2px solid transparent; cursor: pointer; }
.admin-bar .links a:hover, .admin-bar .links button:hover { border-color: var(--gold); color: var(--gold); }
.admin-side details { margin-bottom: 4px; } .admin-side summary { list-style: none; cursor: pointer; } .admin-side summary::-webkit-details-marker { display: none; }
.admin-side .side-group { display: block; }
@media (max-width: 1023px) { .admin-side { padding: 10px 12px; } .admin-side .side-group { display: flex; flex-wrap: wrap; gap: 2px; } .admin-side h5 { margin: 10px 8px 4px; width: 100%; } .admin-side a { padding: 5px 8px; font-size: .75rem; } }
.admin-main h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-main .card { margin-bottom: 18px; } .admin-main .card-body { padding: 14px; }
.admin-main .table img.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); }
.admin-main .table .actions { display: flex; gap: 4px; flex-wrap: wrap; } .admin-main .table .actions form { display: inline; }
.admin-main .table td.nowrap, .admin-main .table th.nowrap { white-space: nowrap; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .filter-bar input, .filter-bar select { width: auto; min-width: 140px; padding: 8px 10px; font-size: .9rem; }
.bar-list { list-style: none; padding: 0; margin: 0; } .bar-list li { display: grid; grid-template-columns: 90px 1fr 50px; gap: 10px; align-items: center; font-size: .8rem; margin-bottom: 5px; }
.bar-list .bar { height: 12px; background: rgba(26,20,16,.1); border-radius: 4px; overflow: hidden; } .bar-list .bar span { display: block; height: 100%; background: var(--red); }
.admin-main .field textarea.tall { min-height: 320px; font-family: ui-monospace, Menlo, monospace; font-size: .88rem; }
.admin-main .field input[type=datetime-local], .admin-main .field input[type=date] { width: 100%; padding: 11px 13px; border: 2px solid var(--ink); border-radius: 9px; background: var(--white); }
.card-thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .card-thumbs img { width: 120px; border: 2px solid var(--ink); border-radius: 6px; }
.mod-item { display: grid; grid-template-columns: 96px 1fr; gap: 14px; } .mod-item img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); }
@media (min-width: 768px) { .mod-item { grid-template-columns: 140px 1fr 260px; } .mod-item img { width: 140px; height: 140px; } }
.mod-actions { display: flex; flex-direction: column; gap: 6px; } .mod-actions form { display: flex; gap: 6px; flex-wrap: wrap; } .mod-actions input[type=text] { padding: 6px 8px; font-size: .85rem; }
.quick-links { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-editor { display: grid; grid-template-columns: 1fr; gap: 0 18px; } @media (min-width: 1024px) { .admin-editor { grid-template-columns: minmax(0, 1fr) 340px; } }

/* ==========================================================================
   SLICE: Public profile = the collectible — HTML Mr. Stach Card (.mscard),
   profile card section, share area, owner area, awards.
   ========================================================================== */
.mscard { --mc-w: 100%; width: var(--mc-w); max-width: 420px; aspect-ratio: 2.5 / 3.5; container-type: inline-size; background: var(--ink); border-radius: 4.2cqw; box-shadow: 0 24px 44px -18px rgba(26,20,16,.65), 0 0 0 1px rgba(201,162,39,.35) inset; color: var(--cream); font-family: var(--cond); text-transform: uppercase; position: relative; overflow: hidden; margin: 0 auto; }
.mscard *, .mscard *::before, .mscard *::after { box-sizing: border-box; }
.mscard .mscard-inner { position: absolute; inset: 3.2cqw; border: .8cqw solid var(--gold); border-radius: 2.4cqw; display: flex; flex-direction: column; overflow: hidden; background: var(--ink); }
.mscard sup { font-size: .5em; font-family: var(--body); vertical-align: top; margin-left: .1em; }
.mscard small { display: block; font-size: 3cqw; letter-spacing: .16em; color: var(--gold); font-weight: 700; line-height: 1.2; }
/* ---- front */
.mscard-front .mscard-portrait { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; background: var(--cream-3); border-bottom: .8cqw solid var(--gold); }
.mscard-front .mscard-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; margin: 0; border-radius: 0; box-shadow: none; }
.mscard-ribbon { position: absolute; top: 3.5cqw; left: -1.5cqw; background: var(--red); color: #fff; font-family: var(--head); font-size: 4.6cqw; letter-spacing: .08em; padding: 1.2cqw 3.4cqw 1.2cqw 4cqw; box-shadow: 0 2px 0 rgba(0,0,0,.35); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); }
.mscard-shield { position: absolute; top: 3cqw; right: 3cqw; background: var(--gold); color: var(--ink); font-family: var(--head); font-size: 3.6cqw; letter-spacing: .08em; padding: 1.6cqw 2.6cqw 2.4cqw; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); text-align: center; line-height: 1.05; max-width: 34cqw; }
.lvl-platinum .mscard-shield { background: #dcdce4; } .lvl-silver .mscard-shield { background: #c8c8c8; } .lvl-bronze .mscard-shield { background: #b87333; color: #fff; } .lvl-rookie .mscard-shield { background: var(--cream-3); } .lvl-hof .mscard-shield { background: var(--ink); color: var(--gold); border: .6cqw solid var(--gold); }
.mscard-no { position: absolute; left: 3cqw; bottom: 3cqw; width: 20cqw; height: 20cqw; border-radius: 50%; background: var(--cream); color: var(--ink); border: .9cqw solid var(--red); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--head); font-size: 4cqw; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mscard-no small { font-size: 2.2cqw; color: var(--red); letter-spacing: .1em; margin-bottom: .6cqw; }
.mscard-emblem { position: absolute; right: 3cqw; bottom: 3cqw; width: 16cqw; height: 16cqw; border-radius: 50%; background: var(--blue); border: .8cqw solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 8cqw; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mscard-ai { position: absolute; left: 50%; bottom: 3.4cqw; transform: translateX(-50%); background: rgba(26,20,16,.85); color: var(--gold); font-size: 2.6cqw; letter-spacing: .14em; padding: .8cqw 2.4cqw; border-radius: 99px; border: 1px solid var(--gold); white-space: nowrap; }
.mscard-nameband { background: var(--blue); color: #fff; text-align: center; padding: 1.8cqw 3cqw; flex: 0 0 auto; font-family: var(--head); font-size: 6.2cqw; line-height: 1.05; letter-spacing: .03em; border-bottom: .5cqw solid var(--gold); }
.mscard-nameband .mscard-nick { color: var(--gold); font-family: var(--serif); font-style: italic; font-size: .72em; text-transform: none; letter-spacing: 0; }
.mscard-badges { background: var(--red); color: #fff; text-align: center; flex: 0 0 auto; font-size: 3.2cqw; font-weight: 700; letter-spacing: .14em; padding: 1.4cqw 3cqw; display: flex; justify-content: center; gap: 1.4cqw; flex-wrap: wrap; line-height: 1.2; }
.mscard-badges i { font-style: normal; color: var(--gold); }
.mscard-loc { text-align: center; color: var(--gold); font-size: 3cqw; letter-spacing: .18em; padding: 1.2cqw 3cqw .4cqw; font-weight: 700; flex: 0 0 auto; }
.mscard-cells { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.6cqw; padding: 1.4cqw 3cqw 3cqw; flex: 0 0 auto; }
.mscard-cell { background: var(--cream); color: var(--ink); border-radius: 1.6cqw; padding: 1.2cqw 1.4cqw; text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 13cqw; }
.mscard-cell small { color: var(--ink-3); font-size: 2.4cqw; letter-spacing: .12em; margin-bottom: .6cqw; }
.mscard-cell b { font-family: var(--head); font-size: 3.8cqw; line-height: 1.05; letter-spacing: .03em; word-break: break-word; }
.mscard-cell--power b { color: var(--red); font-size: 8cqw; }
.mscard-front .mscard-loc:last-of-type { padding-bottom: 1cqw; }
/* ---- back */
.mscard-back .mscard-inner { background: var(--cream); color: var(--ink); padding: 1.8cqw 3cqw 0; gap: .9cqw; }
.mscard-bhead { display: grid; grid-template-columns: 8.5cqw 1fr auto; align-items: center; gap: 2cqw; }
.mscard-medal { width: 8.5cqw; height: 8.5cqw; border-radius: 50%; background: var(--ink); border: .7cqw solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 5.4cqw; }
.mscard-banner { background: var(--ink); color: var(--cream); font-family: var(--head); font-size: 4.4cqw; letter-spacing: .1em; text-align: center; padding: .7cqw 2cqw; clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%); }
.mscard-bno { font-size: 2.8cqw; letter-spacing: .12em; color: var(--ink-3); font-weight: 700; }
.mscard-bname { background: var(--red); color: #fff; font-family: var(--head); font-size: 4cqw; letter-spacing: .05em; text-align: center; padding: .9cqw 2cqw; clip-path: polygon(0 0, 100% 0, 98% 50%, 100% 100%, 0 100%, 2% 50%); line-height: 1.1; }
.mscard-bname i { color: var(--gold); font-family: var(--serif); font-style: italic; text-transform: none; font-size: .8em; letter-spacing: 0; }
.mscard-row3 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.6cqw; }
.mscard-row3 > div { background: var(--paper); border: 1px solid rgba(26,20,16,.25); border-radius: 1.2cqw; padding: .7cqw 1.4cqw; min-width: 0; }
.mscard-row3 small { color: var(--red); font-size: 2.3cqw; }
.mscard-row3 b { display: block; font-size: 2.9cqw; line-height: 1.15; font-weight: 700; letter-spacing: .03em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mscard-about { background: var(--blue); color: #fff; border-radius: 1.4cqw; padding: 1.2cqw 2.4cqw; text-transform: none; font-family: var(--body); }
.mscard-about small { color: var(--gold); text-transform: uppercase; font-family: var(--cond); }
.mscard-about p { margin: .3cqw 0 0; font-size: 2.7cqw; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mscard-about q { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: .8cqw; font-family: var(--serif); font-style: italic; font-size: 2.7cqw; line-height: 1.3; color: var(--gold); quotes: none; }
.mscard-stats { background: var(--paper); border: 1px solid rgba(26,20,16,.25); border-radius: 1.4cqw; padding: 1cqw 2cqw .8cqw; }
.mscard-stats small { color: var(--red); margin-bottom: .4cqw; }
.mscard-stat { display: grid; grid-template-columns: 34cqw 1fr 8cqw; align-items: center; gap: 1.6cqw; font-size: 2.4cqw; font-weight: 700; letter-spacing: .06em; line-height: 1.25; padding: .35cqw 0; }
.mscard-stat > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mscard-blocks { display: grid; grid-template-columns: repeat(10, 1fr); gap: .6cqw; }
.mscard-blocks i { display: block; height: 1.9cqw; background: rgba(26,20,16,.14); border-radius: .4cqw; }
.mscard-blocks i.on { background: var(--red); }
.mscard-stat b { font-family: var(--head); color: var(--red); text-align: right; font-size: 2.9cqw; }
.mscard-rank { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0 2.4cqw; background: var(--ink); color: var(--cream); border: .6cqw solid var(--gold); border-radius: 1.4cqw; padding: .8cqw 2.4cqw; }
.mscard-rank small { color: var(--gold); }
.mscard-rank b { font-family: var(--head); font-size: 4.8cqw; color: var(--gold); line-height: 1; }
.mscard-rank span { font-size: 2.4cqw; letter-spacing: .1em; color: var(--cream-3); font-weight: 700; text-align: right; }
.mscard-honor small { color: var(--red); margin-bottom: .3cqw; }
.mscard-honor div { display: flex; flex-wrap: wrap; gap: .8cqw; }
.mscard-honor span { background: var(--cream-3); border: 1px solid rgba(26,20,16,.3); border-radius: 99px; font-size: 2.3cqw; font-weight: 700; letter-spacing: .06em; padding: .4cqw 1.6cqw; white-space: nowrap; }
.mscard-honor span i { font-style: normal; margin-right: .6cqw; }
/* Organizations I Support — compact line, generic icons (licensed logos only) */
.mscard-supports { display: flex; align-items: center; gap: 1.2cqw; flex-wrap: wrap; }
.mscard-supports small { color: var(--red); }
.mscard-supports div { display: flex; flex-wrap: wrap; gap: .6cqw 1.6cqw; }
.mscard-supports span { font-family: var(--cond); font-size: 2.2cqw; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mscard-supports span i { font-style: normal; margin-right: .4cqw; }
.mscard-supports span img { width: 3cqw; height: 3cqw; object-fit: contain; vertical-align: -.6cqw; margin-right: .5cqw; }
.org-chips .tag img { display: inline-block; }
.mscard-cells--back { padding: 0; margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(24cqw, 1fr)); }
.mscard-cells--back .mscard-cell { background: var(--paper); border: 1px solid rgba(26,20,16,.25); min-height: 8cqw; padding: .8cqw 1.2cqw; }
.mscard-cells--back .mscard-cell small { color: var(--red); font-size: 2.2cqw; }
.mscard-cells--back .mscard-cell b { font-family: var(--cond); font-size: 2.5cqw; text-transform: none; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mscard-bfoot { margin-top: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding: .6cqw 0 .8cqw; }
.mscard-respect b { display: block; font-family: var(--serif); font-style: italic; text-transform: none; font-size: 3.8cqw; color: var(--red); line-height: 1.05; }
.mscard-respect span { display: block; font-family: var(--body); text-transform: none; font-size: 2.3cqw; color: var(--ink-3); margin-top: .6cqw; line-height: 1.3; }
.mscard-qr svg { width: 13cqw; height: 13cqw; display: block; border: .6cqw solid var(--ink); border-radius: 1cqw; background: #fff; }
.mscard-cta { text-align: right; }
.mscard-cta b { display: block; font-family: var(--head); font-size: 3.6cqw; letter-spacing: .08em; line-height: 1.05; }
.mscard-cta span { display: block; font-size: 2.8cqw; letter-spacing: .18em; color: var(--red); font-weight: 700; margin-top: .6cqw; }
.mscard-redbar { background: var(--red); color: #fff; text-align: center; font-family: var(--head); font-size: 3.2cqw; letter-spacing: .14em; padding: .8cqw; margin: 0 -3cqw; }
.mscard-fine { text-align: center; font-family: var(--body); text-transform: none; font-size: 2cqw; color: var(--ink-3); padding: .5cqw 0 .8cqw; background: var(--cream); margin: 0 -3cqw; line-height: 1.2; }
@supports not (width: 1cqw) { .mscard { font-size: 12px; } .mscard small { font-size: .7em; } }

/* ---- card section on profile / card pages */
.mscard-pair { display: grid; gap: 20px; grid-template-columns: 1fr; justify-items: center; align-items: start; }
@media (min-width: 900px) { .mscard-pair { grid-template-columns: 1fr 1fr; } }
.mscard-tabs { display: none; }
.mscard-panel[hidden] { display: none !important; }
@media (max-width: 899px) {
  .mscard-tabs { display: inline-flex; margin: 0 auto 14px; }
  .mscard-pair.has-tabs { grid-template-columns: 1fr; }
  .mscard-pair.has-tabs .mscard-panel:not(.is-active) { display: none; }
}
@media (min-width: 900px) { .mscard-pair .mscard-panel--ai { display: none; } }
.mscard-pair .mscard-panel { width: 100%; max-width: 420px; }

/* ---- share area */
.share-area { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.share-area .share-primary { font-size: 1.05rem; padding: 16px 24px; }
.share-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.share-nets a, .share-nets button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; cursor: pointer; }
.share-nets a:hover, .share-nets button:hover { background: var(--ink); color: var(--cream); }
.share-nets svg { width: 16px; height: 16px; fill: currentColor; }
.battle-callout { background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.battle-callout a { color: var(--gold); } .battle-callout a.btn { color: var(--ink); }
.owner-area { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.owner-area .btn { padding: 10px 12px; font-size: .8rem; white-space: normal; text-align: center; line-height: 1.2; }

/* ---- awards */
.awards-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.award-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; background: var(--paper); border: 2px solid var(--gold); border-radius: 12px; padding: 10px 12px; }
.award-item .award-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 2px solid var(--gold); }
.award-item b { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; }
.award-banner { background: var(--ink); color: var(--cream); border: 3px solid var(--gold); border-radius: var(--radius); padding: 18px 20px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.award-banner h3 { color: var(--gold); margin: 0; font-size: clamp(1.3rem, 3vw, 1.9rem); }
.award-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.award-grid img { border: 2px solid var(--ink); border-radius: 10px; aspect-ratio: 1200/630; object-fit: cover; width: 100%; }

/* ---- Admin share preview (slice: admin-share-preview) ---- */
.share-previews { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 900px) { .share-previews { grid-template-columns: 1fr 1fr; } }
.og-preview { border: 1px solid #d8d2c2; border-radius: 10px; overflow: hidden; background: #fff; max-width: 520px; font-family: Inter, system-ui, sans-serif; }
.og-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid #e4ded0; }
.og-preview-meta { padding: 10px 12px; }
.og-preview-host { font-size: .7rem; letter-spacing: .04em; color: #65676b; text-transform: uppercase; }
.og-preview-title { font-weight: 700; font-size: 1rem; color: #050505; margin-top: 2px; line-height: 1.25; }
.og-preview-desc { font-size: .85rem; color: #65676b; margin-top: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.og-preview--x { border-radius: 16px; } .og-preview--x .og-preview-host { text-transform: none; margin-top: 4px; } .og-preview--x .og-preview-title { font-weight: 600; font-size: .95rem; }
.og-preview-missing { aspect-ratio: 1200 / 630; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #f3e9d2, #f3e9d2 10px, #eadfc4 10px, #eadfc4 20px); color: var(--ink); padding: 10px; text-align: center; }
.share-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .share-tools form { display: inline; }
.award-list { display: flex; flex-direction: column; gap: 10px; }
.award-item { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; } .award-item img { width: 120px; height: auto; border: 2px solid var(--ink); border-radius: 6px; display: block; }
.grant-award .form-row { display: grid; grid-template-columns: 1fr; gap: 8px; } @media (min-width: 700px) { .grant-award .form-row { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (max-width: 899px) { .share-nets:not(.is-open) { display: none; } }

/* ---- Stach Wire (slice: news-wire) ---- */
.wire-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wire-row { padding: 12px 0; border-bottom: 1px dashed rgba(26,20,16,.18); display: grid; gap: 4px; }
.wire-row:last-child { border-bottom: 0; }
.wire-row--pinned { background: linear-gradient(90deg, rgba(201,162,39,.12), transparent); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 6px; }
.wire-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wire-meta .tag { font-size: .65rem; padding: 2px 8px; }
.wire-source { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wire-title { font-family: 'Oswald', 'Anton', Impact, sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--ink); text-decoration: none; }
.wire-title:hover { color: var(--red); text-decoration: underline; }
.wire-ext { font-size: .8em; opacity: .55; }
.wire-summary { margin: 0; }
.wire-list--compact .wire-row { padding: 8px 0; }
.wire-list--compact .wire-title { font-size: .95rem; }
.wire-strip .wire-list { display: grid; grid-template-columns: 1fr; column-gap: 24px; }
@media (min-width: 800px) { .wire-strip .wire-list { grid-template-columns: 1fr 1fr; } .wire-strip .wire-row:nth-last-child(2) { border-bottom: 0; } }
.wire-mini { list-style: none; padding: 10px 0 0; margin: 0; border-top: 1px solid rgba(26,20,16,.15); display: grid; gap: 5px; }
.wire-mini-label { display: flex; align-items: center; gap: 6px; }
.wire-mini .tag.tiny { font-size: .6rem; padding: 1px 7px; }
.wire-admin-title { max-width: 46ch; }

/* SLICE: try-a-stach */
.try-hero { padding-bottom: 6px; }
.try-hero .lede { font-size: 1.1rem; max-width: 60ch; }
.try-privacy { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 12px; color: var(--ink-2); font-weight: 600; }
.try-layout { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .try-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .try-stage-col { position: sticky; top: 84px; } }
.try-stage { position: relative; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden; min-height: 300px; aspect-ratio: 4 / 5; max-height: 78vh; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.try-stage[data-empty="1"] { background: repeating-linear-gradient(135deg, var(--paper) 0 14px, var(--cream-2) 14px 28px); aspect-ratio: 4 / 3; }
.try-stage canvas { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; margin: 0 auto; cursor: grab; outline: none; }
.try-stage[data-empty="1"] canvas { display: none; }
.try-stage.is-dragging canvas { cursor: grabbing; }
.try-stage.is-drop { box-shadow: inset 0 0 0 4px var(--gold); }
.try-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }
.try-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; }
.try-empty-stache { color: var(--red); filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); }
.try-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 8px; }
.try-sample { padding: 0; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--paper); cursor: pointer; line-height: 0; transition: transform .12s; }
.try-sample:hover, .try-sample:focus-visible { transform: translateY(-2px); border-color: var(--red); }
.try-sample img { display: block; width: 54px; height: 66px; object-fit: cover; }
.try-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(26,20,16,.78); color: var(--cream); font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.try-stage-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.try-controls { display: flex; flex-direction: column; gap: 14px; }
.try-step { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: 14px; }
.try-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.try-step-head h3 { margin: 0; font-size: 1.15rem; }
.try-step-head .try-current { margin-left: auto; font-weight: 600; }
.try-num { width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--cond); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex: none; }
.try-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.try-style { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; background: var(--cream); border: 2px solid var(--cream-3); border-radius: 10px; cursor: pointer; color: var(--ink); font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; font-weight: 700; transition: border-color .12s, transform .12s, background .12s; }
.try-style svg { width: 100%; height: 30px; display: block; }
.try-style:hover { border-color: var(--ink); transform: translateY(-1px); }
.try-style.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.try-style.is-active svg { color: var(--gold); }
.try-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.try-swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--sw); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--cream-3); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.try-swatch:hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--ink); }
.try-swatch.is-active { box-shadow: 0 0 0 3px var(--red); transform: scale(1.1); }
.try-custom { margin-top: 10px; }
.try-custom summary { cursor: pointer; color: var(--red); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.try-custom-preview { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; justify-self: start; }
.try-sliders { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 8px 0 10px; }
.try-sliders label { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700; }
.try-sliders input[type="range"] { width: 100%; accent-color: var(--red); margin: 0; }
.try-ctas { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 760px) { .try-ctas { grid-template-columns: repeat(3, 1fr); } }
.try-cta { display: block; color: var(--ink); transition: transform .12s; }
.try-cta:hover { transform: translateY(-2px); color: var(--ink); }
.try-cta .card-body p { margin: 0 0 8px; }
.try-cta .more { color: var(--red); font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 700; }
.home-tryon { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 700px) { .home-tryon { grid-template-columns: 180px 1fr; } }
.home-tryon-art { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); padding: 14px; display: grid; place-items: center; color: var(--red); }
.home-tryon-art svg { width: 100%; height: auto; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); }

/* Photo attribution caption (components/photo-credit.php) */
.photo-credit { margin: 6px 0 0; font-size: .7rem; line-height: 1.35; color: var(--ink-2, #666); opacity: .75; }
.photo-credit a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.photo-credit a:hover { opacity: 1; border-bottom-style: solid; }
.photo-credit-note { display: block; font-style: italic; }
.credits-table td { vertical-align: top; }

/* ---- slice: per-style how-to guides grid (care-index) ---- */
.howto-grid .tile-name{font-size:1rem}
.howto-grid .tile-img{aspect-ratio:16/10}
@media (max-width:640px){.howto-grid{grid-template-columns:repeat(2,1fr)}}
.try-empty[hidden], .try-hint[hidden], .try-stage-actions[hidden] { display: none; }

/* ---- slice: photo wishlist / admin media uploader (slice-e) ---- */
.wl-group .card-head .tiny { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.wl-table td { vertical-align: top; }
.wl-table .thumb { width: 48px; height: 60px; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); background: var(--cream-3); }
.wl-up summary { list-style: none; display: inline-block; cursor: pointer; } .wl-up summary::-webkit-details-marker { display: none; }
.wl-up[open] summary { margin-bottom: 8px; }
.wl-form { min-width: 260px; max-width: 420px; padding: 10px; border: 2px dashed rgba(26,20,16,.3); border-radius: 8px; background: var(--paper); }
.wl-form .field { margin-bottom: 8px; } .wl-form .field label { font-size: .72rem; } .wl-form .field input, .wl-form .field select { padding: 7px 9px; font-size: .85rem; }
.kpi-grid a.kpi { text-decoration: none; color: inherit; display: block; } .kpi-grid a.kpi:hover { border-color: var(--red); }
.wl-group + .wl-group { margin-top: 0; }
/* ---- slice A: article hero credits ---- */
.article-hero-credit { margin: -14px 0 16px; }
.article-hero-credit .photo-credit { margin: 0; text-align: right; }
/* ---- slice A: homepage trio cards (equal height, leaderboards, battle result) ---- */
.home-trio { align-items: stretch; }
.home-trio > .card { display: flex; flex-direction: column; }
.home-trio > .card > .card-body:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.home-trio > .card > .card-body:last-child > .home-board { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.home-trio > .card > .card-body:last-child > .home-result { margin-top: auto; }
.home-board .rank-row--mini { grid-template-columns: 22px 40px 1fr auto; gap: 8px; padding: 5px 0; text-decoration: none; flex: 1 0 auto; }
.home-board .rank-row--mini .rn { font-size: 1.05rem; }
.home-board .rank-row--mini img { width: 40px; height: 40px; border-radius: 6px; }
.home-board .rank-row--mini .rname { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.home-board .rank-row--mini .rscore { font-size: .95rem; white-space: nowrap; }
.home-board .rank-row--mini .rscore small { font-family: var(--cond); font-size: .65rem; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }
.home-board .rank-row--mini:last-child { border-bottom: 0; }
.home-result { border-top: 1px solid rgba(26,20,16,.15); padding-top: 10px; margin-top: 12px; }
.home-result-line { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; color: var(--ink); margin-top: 6px; font-size: .9rem; line-height: 1.25; }
.home-result-line .muted { white-space: nowrap; }
.home-result-line img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); }
.home-result-line b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .03em; }
/* SLICE: contest + challenges */
.contest-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contest-grid { grid-template-columns: 520px 1fr; gap: 36px; } }
.contest-poster img { width: 100%; height: auto; display: block; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--gold); }
.contest-countdown { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 14px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.contest-countdown b { font-family: var(--head); font-size: 1.5rem; color: var(--red); letter-spacing: .04em; }
.contest-h { font-size: 1.25rem; margin: 18px 0 6px; color: var(--red); }
.contest-steps { margin: 0 0 4px; } .contest-steps li { margin-bottom: 6px; }
.contest-prize { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.gear-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 4px; }
.gear-mini { display: grid; gap: 6px; text-align: center; color: var(--ink); text-decoration: none; }
.gear-mini .gear-name { font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; line-height: 1.1; }
.gear-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 10px; background: repeating-linear-gradient(135deg, var(--cream-3, #ebdfc2) 0 8px, var(--paper) 8px 16px); font-size: 2rem; }
.gear-mini:hover .gear-img { border-color: var(--red); box-shadow: 3px 3px 0 var(--gold); }
.gear-grid .gear-tile .gear-img { border: 0; border-bottom: 2px solid var(--ink); border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 4/3; font-size: 3.2rem; }
.contest-row { grid-template-columns: 52px 56px 1fr auto; text-decoration: none; }
.contest-row.is-leader { background: linear-gradient(90deg, rgba(201,162,39,.22), transparent); border-radius: 10px; padding-left: 6px; padding-right: 6px; border-bottom-color: var(--gold); }
.contest-row.is-leader .rn { font-size: 1.6rem; }
.contest-row .rscore small { font-family: var(--cond); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.contest-mine .stat-big .n { font-size: 2.6rem; }
.contest-rules { margin: 0; padding-left: 18px; } .contest-rules li { margin-bottom: 5px; }
.past-winner .card-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.contest-pill { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 2px solid var(--gold); background: var(--paper); color: var(--ink); font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-weight: 700; text-decoration: none; }
.contest-pill:hover { background: var(--gold); }
/* homepage module */
.home-contest-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px 14px; }
@media (min-width: 768px) { .home-contest-card { grid-template-columns: 110px 1fr auto; } }
.home-contest-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid var(--ink); display: block; }
.home-contest-body .kicker a { color: inherit; text-decoration: none; }
.home-contest-line { font-size: 1rem; line-height: 1.3; } .home-contest-line b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.home-contest-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; } @media (min-width: 768px) { .home-contest-actions { grid-column: auto; flex-direction: column; } }
/* challenges */
.challenge-form .challenge-mode { border: 2px solid rgba(26,20,16,.2); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.challenge-form .challenge-mode legend { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; padding: 0 6px; }
.opp-picker { position: relative; }
.opp-results { position: absolute; left: 0; right: 0; z-index: 20; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; margin-top: 4px; max-height: 300px; overflow: auto; box-shadow: 4px 4px 0 rgba(26,20,16,.15); }
.opp-item { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; background: none; border: 0; border-bottom: 1px solid rgba(26,20,16,.12); cursor: pointer; font: inherit; color: inherit; }
.opp-item:hover, .opp-item:focus { background: rgba(201,162,39,.18); }
.opp-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); }
.opp-item span { display: grid; line-height: 1.2; } .opp-item small { font-size: .72rem; }
.opp-none { padding: 10px; }
.opp-selected { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.opp-selected.is-hidden { display: none; }
.opp-selected img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); }
.chip-radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); cursor: pointer; font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.chip-radio input { accent-color: var(--red); margin: 0; }
.chip-radio:has(input:checked) { background: var(--ink); color: var(--cream); }
.challenge-banner { margin: 10px 0 4px; padding: 10px 14px; border-left: 4px solid var(--gold); background: var(--paper); border-radius: 0 10px 10px 0; max-width: 70ch; }
.challenge-msg { margin: 6px 0 0; font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.05rem; color: var(--red); }
.open-strip { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 700px) { .open-strip { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .open-strip { grid-template-columns: repeat(3, 1fr); } }
.open-chip { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px; color: inherit; text-decoration: none; }
.open-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); }
.open-chip > span { display: grid; line-height: 1.25; min-width: 0; } .open-chip > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenges-panel .status-open { background: var(--gold); color: var(--ink); }

/* SLICE: sample-mode */
.sample-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 18px; border: 2px dashed var(--red); border-radius: 12px; background: var(--cream-2); }
.sample-cta__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; }
.sample-cta__text b { font-size: 1.02rem; letter-spacing: .02em; text-transform: uppercase; }
.sample-cta--hero { padding: 20px 22px; border-style: solid; border-color: var(--gold); background: linear-gradient(180deg, rgba(212,160,23,.14), transparent); }
.sample-band { padding-top: 18px; border-top: 3px double var(--ink); }
.sample-band .sec-head h2 { margin: 0; }
.sample-note { font-style: italic; }
.sample-note a { color: var(--red); }

/* SLICE: hero contest card */
.hero-contest { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hero-contest { grid-template-columns: 1fr 1fr; } }
.hero-contest-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
.hero-contest-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hero-contest-title { font-family: var(--head); text-transform: uppercase; font-size: 1.7rem; line-height: 1; color: var(--red); }
.hero-contest-top { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.hero-contest-top a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; color: var(--ink); font-family: var(--cond); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }
.hero-contest-top img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; border: 2px solid var(--ink); }
.hero-contest-top b { font-family: var(--head); color: var(--red); }

/* SLICE: avatar-builder */
.av-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) { .av-layout { grid-template-columns: minmax(300px, 420px) 1fr; } .av-preview-col { position: sticky; top: 16px; } }
.av-preview { padding: 10px; background: var(--paper); }
.av-preview img { display: block; width: 100%; height: auto; border-radius: 8px; transition: opacity .15s ease; }
.av-preview img.is-loading { opacity: .55; }
.av-controls { display: grid; gap: 0; }
.av-controls fieldset { margin-bottom: 14px; }
.av-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.av-chiprow .chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.av-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.av-swatch { position: relative; cursor: pointer; }
.av-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.av-swatch span { display: block; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 1px 2px 0 rgba(26,20,16,.2); }
.av-swatch:has(input:checked) span { outline: 3px solid var(--red); outline-offset: 2px; }
.av-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.av-type { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); cursor: pointer; text-align: center; line-height: 1.15; }
.av-type input { position: absolute; opacity: 0; pointer-events: none; }
.av-type-emoji { font-size: 1.5rem; line-height: 1; }
.av-type:has(input:checked) { background: var(--ink); color: var(--cream); box-shadow: 2px 2px 0 rgba(26,20,16,.25); }
.av-type-ai { border-style: dashed; border-color: var(--red); }
.av-scenegrid .av-type-emoji { font-size: 1.25rem; }
.avatar-chosen { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; }
.avatar-chosen img { width: 140px; height: auto; border-radius: 10px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(26,20,16,.15); }
@media (max-width: 480px) { .avatar-chosen { grid-template-columns: 100px 1fr; } .avatar-chosen img { width: 100px; } }

/* SLICE: memorials */
/* In Memoriam — quiet navy/gold/cream. No red, no stats bars, nothing loud. */
.memorials .kicker { color: var(--blue); }
.memorial-cta { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; color: var(--blue); border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.memorial-cta:hover { color: var(--blue-2); }

.memorial-grid { align-items: stretch; }
.memorial-tile { display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; color: var(--ink); box-shadow: 3px 3px 0 rgba(26,20,16,.12); transition: transform .15s ease, box-shadow .15s ease; }
.memorial-tile:hover { transform: translateY(-3px); box-shadow: 4px 6px 0 rgba(26,20,16,.16); }
.memorial-tile-frame { display: block; border-bottom: 3px solid var(--gold); background: var(--ink); }
.memorial-tile-frame img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: saturate(.85); }
.memorial-tile-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.memorial-tile-name { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; }
.memorial-tile-years { font-family: var(--cond); letter-spacing: .12em; color: var(--blue); font-size: .85rem; }
.memorial-tile-candles { color: var(--blue); margin-top: 4px; }

.memorial-empty { text-align: center; padding: 44px 16px; border: 2px dashed rgba(26,20,16,.25); border-radius: 12px; background: var(--paper); }
.memorial-empty-glyph { font-size: 2.4rem; }

.memorial-hero { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 820px) { .memorial-hero { grid-template-columns: minmax(280px, 380px) 1fr; } }
.memorial-portrait { border: 3px solid var(--ink); outline: 2px solid var(--gold); outline-offset: -8px; background: var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 4px 5px 0 rgba(26,20,16,.15); }
.memorial-portrait img { display: block; width: 100%; height: auto; filter: saturate(.85); }
.memorial-name { color: var(--ink); }
.memorial-nick { color: var(--blue); }
.memorial-years { font-family: var(--cond); letter-spacing: .18em; color: var(--blue); font-size: 1.05rem; margin-top: 6px; }
.memorial-badges .memorial-chip, .memorial-chip { background: var(--paper); border: 1px solid var(--blue); color: var(--blue); }
.memorial-byline { font-family: var(--serif); font-style: italic; color: var(--ink); opacity: .85; }

.memorial-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.memorial-gallery img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 2px solid var(--ink); border-radius: 6px; filter: saturate(.85); }
.memorial-gallery a:hover img { border-color: var(--gold); }

.memorial-candle-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.candle-btn { background: var(--blue); color: var(--cream); border-color: var(--blue-2); }
.candle-btn:hover { background: var(--blue-2); }
.candle-btn[disabled] { opacity: .75; cursor: default; }

.memorial-story .prose p { font-size: 1.02rem; }
.memorial-quote { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--blue); border-left: 3px solid var(--gold); margin: 22px 0 0; padding: 6px 0 6px 18px; }
.memorial-quote footer { font-size: .9rem; margin-top: 8px; font-style: normal; font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; color: var(--ink); opacity: .7; }

.memorial-card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.memorial-card-pair img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 3px 4px 0 rgba(26,20,16,.18); }
@media (max-width: 480px) { .memorial-card-pair { grid-template-columns: 1fr; } }

.memorial-photo-row .field input[type="file"] { font-size: .85rem; }
.memorial-footer-note { padding: 10px 16px 26px; }
.memorial-note { opacity: .9; }

/* ---- Slice B: AI / answer-engine optimization ------------------------------ */
/* "At a glance" fact box on mustache style pages — compact dl LLMs extract well */
.at-a-glance { margin-bottom: 24px; }
.at-a-glance .fact-list { margin: 0; }
.at-a-glance .fact-list dt { min-width: 150px; }
@media (max-width: 560px) { .at-a-glance .fact-list dt { min-width: 120px; } }

/* ---- Slice C: Stach Radar & Social Queue (admin) -------------------------- */
.radar-banner { padding: 14px 18px; font-size: .98rem; line-height: 1.5; }
.radar-list { display: grid; gap: 14px; }
.radar-mention .card-body { padding: 14px 16px; }
.radar-meta { gap: 8px; align-items: center; margin-bottom: 6px; }
.radar-title { font-size: 1.05rem; margin: 2px 0 6px; line-height: 1.35; }
.radar-title a { color: inherit; }
.radar-title a:hover { color: var(--red); }
.radar-snippet { margin: 0 0 8px; }
.radar-reply { margin: 8px 0 10px; }
.radar-reply textarea { width: 100%; font-size: .9rem; line-height: 1.45; background: var(--cream-2, #f6efe2); resize: vertical; }
.radar-actions { gap: 8px; align-items: center; }
.radar-actions form { margin: 0; }
.sq-body { margin: 4px 0 6px; font-size: .98rem; line-height: 1.5; white-space: pre-wrap; }

/* ---- SLICE: sponsors media kit ---- */
.sponsor-stats { gap: 18px; }
.sponsor-stats .stat-big { border: 2px solid var(--ink); background: var(--paper); padding: 18px 20px; box-shadow: 4px 5px 0 rgba(26,20,16,.15); }
.sponsor-honesty { text-align: right; }
.sponsor-pkg .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sponsor-pkg .card-body p { flex: 1; margin: 0; }
.sponsor-pkg-tag { align-self: flex-start; }
@media (max-width: 560px) { .sponsor-honesty { text-align: left; } }

/* ---- slice A: Sponsor Scout (admin) ---- */
.sponsor-table td { vertical-align: top; }
.sponsor-why { max-width: 220px; }
.sponsor-actions form { display: flex; gap: 6px; flex-wrap: wrap; }
.sponsor-due-row { padding: 6px 0; border-bottom: 1px dashed rgba(26,20,16,.15); gap: 8px; align-items: center; }
.sponsor-due-row:last-child { border-bottom: 0; }
.sponsor-draft { background: var(--paper); border: 2px dashed rgba(26,20,16,.3); border-radius: 8px; padding: 10px 14px; }
.sponsor-draft summary { cursor: pointer; }
.sponsor-draft textarea[name="body"] { width: 100%; font-size: .92rem; line-height: 1.5; }
.sponsor-draft-row > td { background: rgba(26,20,16,.03); }
.sponsor-sent-body { white-space: pre-wrap; font-family: inherit; font-size: .92rem; background: rgba(26,20,16,.04); border-radius: 6px; padding: 10px 12px; margin: 10px 0; }

/* SLICE: veteran owned badge */
.vet-owned { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 2px solid var(--gold); border-radius: 999px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--cream); background: rgba(201,162,39,.10); }
.vet-owned svg { width: 20px; height: 20px; fill: var(--gold); flex: none; }
.vet-owned b { color: var(--gold); font-weight: 700; }
.footer-bottom { gap: 14px; }
@media (max-width: 640px) { .vet-owned { font-size: .68rem; padding: 5px 12px; } }