/* Self-hosted font: Archivo variable, weight + width axes (SIL Open Font License) */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('fonts/archivo-wdth.woff2') format('woff2-variations'), url('fonts/archivo-wdth.woff2') format('woff2'); }

/* Campus & Cause v2
   Core: black, white, rust. Supporting section colors so the site has range:
   On Campus = cobalt, For the Cause = rust, Tools = signal green. */
:root {
  /* Palette: Red Rock leads. Clay, Sage Flower and Sky support. */
  --redrock: #B43F1F;  --clay: #E8843A;  --sage: #E8C547;  --sky: #3A7CA5;
  --black: #0A0A0A;
  --ink-2: #161616;
  --white: #ffffff;
  --paper: #FAFAF7;
  --rust: var(--redrock);
  --rust-light: var(--clay);
  --campus: #2F6A8F;   --campus-50: #EAF2F8;  --campus-fill: var(--sky);
  --cause: var(--redrock); --cause-50: #FBEDE8; --cause-fill: var(--redrock);
  --tools: #A3531B;    --tools-50: #FDF0E5;   --tools-fill: var(--clay);
  --gray-50: #F5F5F6;
  --gray-100: #EDEDEF;
  --gray-200: #E3E3E6;
  --gray-500: #5E5E64;
  --gray-700: #3A3A3F;
  --gray-on-dark: #A6A6AD;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px -12px rgba(20,20,20,.18);
  --shadow-lift: 0 2px 4px rgba(20,20,20,.04), 0 24px 48px -20px rgba(20,20,20,.32);
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--black); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--rust-light); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section { padding-top: 80px; padding-bottom: 32px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); padding: 8px 12px; z-index: 50; border-radius: 8px; }
.rust { color: var(--rust); }

/* Headline voice */
.hero h1, .page-hero h1, .section-head h2, .featured-title, .card-title, .row-title, .full-title, .takeaway-text,
.arch-title, .arch-num, .prose h2, .menu-links a, .gfx-title, .gfx-goodfor, .gfx-try-text {
  font-family: var(--sans); font-weight: 800; font-stretch: 100%; letter-spacing: -0.025em;
}

/* Logo: Archivo Bold, sentence case, tight, lighter & */
.wordmark, .gfx-brand, .stacked { font-family: var(--sans); font-weight: 700; font-stretch: 100%; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.amp { font-weight: 400; color: inherit; }
.brand { color: var(--black); display: inline-flex; }
.wordmark { font-size: 26px; letter-spacing: -0.025em; }
.wordmark-sm { font-size: 19px; }

/* Links and buttons */
.textlink { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--black); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; padding: 6px 0; }
.textlink::after { content: '→'; display: inline-block; transition: transform .2s var(--ease); }
.textlink:hover { color: var(--rust); }
.textlink:hover::after { transform: translateX(3px); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-size: 15px; font-weight: 700; background: var(--redrock); color: var(--white); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.btn::after { content: '→'; transition: transform .2s var(--ease); }
.btn:hover { transform: translateY(-2px); background: #C44A27; box-shadow: 0 14px 30px -12px rgba(180,63,31,.7); }
.btn:hover::after { transform: translateX(3px); }
.btn-ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.btn-ghost::after { content: none; }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }

/* Category pill, colored by section */
.kicker { --c: var(--rust); --c50: var(--cause-50); display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--c50); color: var(--c); font-size: 11px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; transition: background .2s, color .2s; }
.kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kicker[href*="on-campus"] { --c: var(--campus); --c50: var(--campus-50); }
.kicker[href*="for-the-cause"] { --c: var(--cause); --c50: var(--cause-50); }
.kicker[href*="tools"] { --c: var(--tools); --c50: var(--tools-50); }
.kicker:hover { background: var(--c); color: var(--white); }

/* Header */
.site-header { background: var(--paper); color: var(--black); position: relative; z-index: 5; }
.strip { background: var(--black); color: var(--white); }
.strip-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.strip-issue { display: inline-flex; align-items: center; gap: 10px; color: var(--white); padding: 8px 0; }
.strip-issue:hover { color: var(--rust-light); }
.strip-issue svg { width: 18px; height: auto; }
.strip-tag { color: var(--gray-on-dark); }
.masthead { border-bottom: 1px solid var(--gray-200); }
.masthead-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 76px; }
.nav { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }
.nav a, .mini-nav a { color: var(--black); padding: 9px 15px; border-radius: 999px; transition: background .2s, color .2s; }
.nav a:hover, .mini-nav a:hover { background: var(--gray-100); }
.nav a[aria-current="page"], .mini-nav a[aria-current="page"] { background: var(--black); color: var(--white); }

/* Slim sticky bar */
.minibar { position: fixed; top: 10px; left: 50%; z-index: 20; width: min(calc(100% - 24px), 1100px); background: rgba(250,250,247,.84); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border: 1px solid rgba(20,20,20,.08); border-radius: 999px; box-shadow: var(--shadow); transform: translate(-50%, -140%); transition: transform .35s var(--ease); }
.minibar.show { transform: translate(-50%, 0); }
.minibar .wrap { padding-left: 24px; padding-right: 10px; }
.minibar-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 54px; }
.mini-nav { display: flex; gap: 2px; font-size: 14px; font-weight: 600; }
.mini-nav a { padding: 8px 13px; }

/* Mobile menu */
.menu-btn, .menu-close { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--black); }
.menu-btn span, .menu-close span { position: absolute; left: 9px; width: 26px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, width .25s ease; }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 25px; width: 18px; }
.menu-btn:hover span:last-child { width: 26px; }
.menu-close { display: block; color: var(--white); }
.menu-close span { top: 21px; }
.menu-close span:first-child { transform: rotate(45deg); }
.menu-close span:last-child { transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 40; background: var(--black) radial-gradient(60% 50% at 100% 100%, rgba(180,63,31,.4), transparent 70%); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .25s ease; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-open .menu { opacity: 1; }
.menu-open body { overflow: hidden; }
.menu .brand, .menu .brand:hover { color: var(--white); }
.menu > .wrap { width: 100%; }
.menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-bottom: 1px solid #2e2e2e; }
.menu-links { display: flex; flex-direction: column; padding-top: 24px; padding-bottom: 24px; }
.menu-links a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid #2a2a2a; font-size: 32px; line-height: 1.1; opacity: 0; transform: translateX(-16px); transition: opacity .3s ease, transform .3s ease, color .15s ease; }
.menu-open .menu-links a { opacity: 1; transform: none; }
.menu-links a:nth-child(2) { transition-delay: .04s, .04s, 0s; }
.menu-links a:nth-child(3) { transition-delay: .08s, .08s, 0s; }
.menu-links a:nth-child(4) { transition-delay: .12s, .12s, 0s; }
.menu-links a:nth-child(5) { transition-delay: .16s, .16s, 0s; }
.menu-links a:nth-child(6) { transition-delay: .20s, .20s, 0s; }
.menu-links a:hover, .menu-links a[aria-current="page"] { color: var(--rust-light); }
.menu-num { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--rust-light); min-width: 22px; }
.menu-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; padding-bottom: 32px; font-size: 13px; color: var(--gray-on-dark); }

/* ===== Dark surfaces: grid texture + soft color glow ===== */
.hero, .page-hero.dark, .takeaway-panel, .site-footer { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .page-hero::before, .takeaway-panel::before, .site-footer::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid, rgba(255,255,255,.07)) 1px, transparent 1px), linear-gradient(90deg, var(--grid, rgba(255,255,255,.07)) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 75% 40%, #000 20%, transparent 75%);
}
.hero::after, .page-hero.dark::after, .takeaway-panel::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; width: 720px; height: 720px; right: -160px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,132,58,.38), rgba(180,63,31,.18) 45%, transparent 70%); filter: blur(10px);
  animation: glow 12s ease-in-out infinite alternate;
}
@keyframes glow { from { transform: translate(0,0) scale(1); } to { transform: translate(-60px, 40px) scale(1.08); } }

/* Home hero */
.hero { background: var(--black); color: var(--white); }
.hero .glow-2 { position: absolute; z-index: -1; width: 560px; height: 560px; left: -200px; bottom: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(58,124,165,.42), transparent 70%); pointer-events: none; }
.hero-decor { position: absolute; top: 0; right: -40px; height: 100%; width: 46%; pointer-events: none; }
.chev { opacity: 0; animation: chev-in 1.4s var(--ease) forwards, chev-wave 9s ease-in-out infinite; }
.chev-1 { animation-delay: .2s, 3.2s; }
.chev-2 { animation-delay: .8s, 4.2s; }
.chev-3 { animation-delay: 1.4s, 5.2s; }
@keyframes chev-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes chev-wave { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.hero-copy { position: relative; padding-top: 96px; padding-bottom: 112px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero h1, .page-hero h1 { margin: 0; font-size: clamp(40px, 6.2vw, 78px); line-height: 1.0; letter-spacing: -0.04em; max-width: 760px; }
.hero h1 .hl { color: var(--black); background: linear-gradient(transparent 12%, var(--sage) 12%, var(--sage) 92%, transparent 92%); padding: 0 .12em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 4px; }
/* Sage Flower highlighter for key phrases */
mark, .mark { color: inherit; background: linear-gradient(transparent 58%, var(--sage) 58%, var(--sage) 92%, transparent 92%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.takeaway-panel mark, .hero mark, .page-hero.dark mark { color: var(--black); background: linear-gradient(transparent 10%, var(--sage) 10%, var(--sage) 94%, transparent 94%); border-radius: 3px; }
.lede { margin: 0; font-size: 19px; line-height: 1.6; color: #CFCFD4; max-width: 580px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 14px; font-weight: 600; color: #E9E9EC; backdrop-filter: blur(6px); transition: background .2s; }
.chip:hover { background: rgba(255,255,255,.13); }
.chip b { background: var(--redrock); color: var(--white); border-radius: 999px; padding: 3px 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.chip::after { content: '→'; color: var(--clay); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Inner page heroes */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: 76px 0 84px; }
.page-hero .wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.page-hero.dark { background: var(--black); color: var(--white); }
.page-hero .lede { max-width: 640px; }
.page-meta { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-on-dark); }
/* Light, section-colored heroes */
.page-hero.light { --c: var(--rust); --c50: var(--cause-50); background: var(--c50); color: var(--black); --grid: color-mix(in srgb, var(--c) 14%, transparent); }
.page-hero.light .lede { color: var(--gray-700); }
.page-hero.light .page-meta { color: var(--c); }
.page-hero.light .page-meta::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.page-hero.sec-campus { --c: var(--campus); --c50: var(--campus-50); }
.page-hero.sec-cause { --c: var(--cause); --c50: var(--cause-50); }
.page-hero.sec-tools { --c: var(--tools); --c50: var(--tools-50); }
.ph-decor { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: min(44%, 520px); height: auto; pointer-events: none; z-index: -1; color: var(--c, var(--rust-light)); }
.ph-decor path { opacity: 0; animation: chev-in 1.2s var(--ease) forwards; }
.ph-decor path:nth-child(2) { animation-delay: .25s; }
.ph-decor path:nth-child(3) { animation-delay: .5s; }
.page-hero.dark .ph-decor { color: var(--rust-light); }
.ph-count { font-size: 14px; font-weight: 600; color: var(--gray-500); }

/* "In this issue" jump pills */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jump a { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); font-size: 14px; font-weight: 600; color: #E9E9EC; transition: background .2s; }
.jump a:hover { background: rgba(255,255,255,.14); }
.jump i { width: 8px; height: 8px; border-radius: 50%; background: var(--d); }
.byline { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--gray-on-dark); }

/* Section head */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 32px; }
.section-head h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; }
.section-head .eyebrow { display: block; font-size: 12px; font-weight: 800; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); margin-bottom: 6px; }

/* Featured story: one big rounded card */
.featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--white); border: 1px solid var(--gray-200); margin-bottom: 28px; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.featured:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.featured-gfx { display: flex; }
.featured-gfx .gfx { border-radius: 0; aspect-ratio: auto; min-height: 52.5cqw; flex: 1; }
.featured-body { padding: 44px 44px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; align-items: flex-start; }
.featured-title { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; }
.featured-title a:hover, .card-title a:hover { color: var(--rust); }
.summary { margin: 0; color: var(--gray-700); max-width: 560px; }

/* Card grid */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.card-gfx .gfx { border-radius: 0; }
.card-gfx .gfx-try, .card-gfx .gfx-tool { border: 0; border-bottom: 1px solid var(--gray-200); }
.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; flex: 1; }
.card-title { margin: 0; font-size: 21px; line-height: 1.18; letter-spacing: -0.02em; }
.card-title a::after { content: ''; position: absolute; inset: 0; }
.card .summary { font-size: 15.5px; line-height: 1.55; }
.card .kicker { position: relative; z-index: 1; }
.card-more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; display: inline-flex; gap: 6px; }
.card-more::after { content: '→'; transition: transform .2s var(--ease); }
.card:hover .card-more { color: var(--rust); }
.card:hover .card-more::after { transform: translateX(3px); }

/* Full story (issue page) */
.full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; padding: 56px 0; border-bottom: 1px solid var(--gray-200); scroll-margin-top: 90px; }
.full:first-of-type { padding-top: 8px; }
.full:last-of-type { border-bottom: 0; }
.full-gfx { position: sticky; top: 90px; }
.full-gfx .gfx { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.full-body { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.full-title { margin: 0; font-size: 32px; line-height: 1.1; }
.full-body p { margin: 0; color: var(--gray-700); }
.full-body strong { color: var(--black); }
.full-body strong.rust { color: var(--rust); }
.full-body a:not(.kicker):not(.textlink):not(.source) { text-decoration: underline; text-underline-offset: 4px; }
.full-body a:not(.kicker):not(.textlink):not(.source):hover { color: var(--rust); }
.trybox { width: 100%; background: var(--cause-50); border-radius: var(--r); padding: 18px 20px; }
.trybox p { color: var(--black) !important; }
.full.sec-campus .trybox { background: var(--campus-50); }
.full.sec-campus .trybox strong.rust { color: var(--campus); }
.full.sec-tools .trybox { background: var(--tools-50); }
.full.sec-tools .trybox strong.rust { color: var(--tools); }
.howto { width: 100%; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r); padding: 18px 20px; }
.howto-label { font-size: 11px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--black) !important; margin: 0 0 10px !important; }
.howto ol { margin: 0; padding: 0; list-style: none; counter-reset: s; color: var(--gray-700); font-size: 16px; display: grid; gap: 10px; }
.howto li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.howto li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: var(--redrock); color: var(--white); font-size: 13px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.source { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--gray-200); font-size: 13.5px; font-weight: 600; color: var(--gray-700); transition: border-color .2s, color .2s; }
.source::after { content: '↗'; }
.source:hover { border-color: var(--black); color: var(--black); }

/* Takeaway: dark rounded panel */
.takeaway { padding-top: 56px; padding-bottom: 96px; }
.takeaway-panel { background: var(--black); color: var(--white); border-radius: var(--r-xl); padding: 56px 56px 52px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.takeaway-panel::after { width: 600px; height: 600px; right: -200px; top: auto; bottom: -320px; }
.takeaway-label { font-size: 12px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust-light); display: flex; align-items: center; gap: 12px; }
.takeaway-label svg { width: 26px; height: auto; }
.takeaway-text { margin: 0; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -0.03em; max-width: 880px; }
.takeaway-panel .btn { margin-top: 10px; }

/* Archive */
.archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.archive a { background: var(--white); display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--gray-200); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.archive a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.archive a:hover .arch-title { color: var(--rust); }
.arch-num { font-size: 15px; color: var(--white); background: var(--redrock); border-radius: 12px; width: 48px; height: 48px; display: grid; place-items: center; letter-spacing: 0; }
.arch-title { flex: 1 1 320px; font-size: 24px; letter-spacing: -0.02em; }
.arch-date { font-size: 14px; color: var(--gray-500); }
.arch-dots { display: flex; gap: 6px; }
.arch-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--d); }

/* Prose (About) */
.prose { max-width: 760px; }
.prose h2 { font-size: 26px; margin: 52px 0 10px; letter-spacing: -0.02em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--gray-700); font-size: 18px; margin: 0 0 16px; }
.prose a { text-decoration: underline; text-underline-offset: 4px; }
.prose a:hover { color: var(--rust); }

/* Footer */
.site-footer { background: var(--black); color: var(--white); margin-top: 0; }
.site-footer::before { -webkit-mask-image: radial-gradient(ellipse 60% 90% at 90% 100%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 90% at 90% 100%, #000 10%, transparent 70%); }
.footer-row { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; padding-top: 64px; padding-bottom: 48px; }
.stacked { display: flex; flex-direction: column; gap: 2px; font-size: 40px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px; font-weight: 600; }
.footer-nav a { padding: 10px 0; }
.footer-nav a:hover { color: var(--rust-light); }
.footer-base { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 20px; padding-bottom: 32px; border-top: 1px solid #2e2e2e; font-size: 13px; color: var(--gray-on-dark); }
.footer-base a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Story graphics: 1200 x 630 (1cqw = 12px at full size) ===== */
.story-gfx { display: block; container-type: inline-size; }
.gfx { position: relative; width: 100%; aspect-ratio: 1200 / 630; overflow: hidden; font-family: var(--sans); border-radius: var(--r); isolation: isolate; }
.gfx-tag { font-size: 2.1cqw; font-weight: 800; font-stretch: 112%; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); }
.gfx-brand { font-size: 3cqw; }
.gfx-small { font-size: 2.1cqw; font-weight: 700; font-stretch: 112%; letter-spacing: 0.16em; text-transform: uppercase; }
.gfx-muted { color: var(--gray-500); }
.gfx-grid::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 6cqw 6cqw; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 80%); }
.gfx-grid::after { content: ''; position: absolute; z-index: -1; width: 70cqw; height: 70cqw; right: -20cqw; top: -30cqw; border-radius: 50%; background: radial-gradient(circle, rgba(232,132,58,.38), transparent 68%); }

/* Cover */
.gfx-cover { background: var(--black); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; padding: 6cqw; }
.gfx-cover-chevrons { display: flex; gap: 4cqw; align-items: center; flex: 1 1 auto; }
.gfx-cover-chevrons svg { width: 22cqw; height: auto; }
.gfx-cover-foot { display: flex; justify-content: space-between; align-items: center; }
.gfx-cover-num { color: var(--gray-on-dark); }

/* Stat */
.gfx-stat { background: var(--black); color: var(--white); padding: 5cqw 5.5cqw; display: flex; flex-direction: column; justify-content: space-between; }
.gfx-stat::after { display: none; }
.gfx-stat .gfx-tag { color: var(--sage); position: relative; }
.gfx-stat .gfx-brand { position: relative; }
.gfx-ring { position: absolute; right: -8cqw; top: -8cqw; width: 42cqw; height: 42cqw; border-radius: 50%; border: 5.5cqw solid var(--redrock); }
.gfx-stat-body { position: relative; display: flex; flex-direction: column; gap: 1.6cqw; }
.gfx-number { font-weight: 900; font-stretch: 110%; font-size: 17cqw; line-height: 0.9; letter-spacing: -0.04em; }
.gfx-bar { height: 1.2cqw; width: 18cqw; background: var(--sage); border-radius: 1cqw; }
.gfx-context { font-size: 3.2cqw; line-height: 1.35; max-width: 75cqw; color: #D4D4D8; }

/* Tool: signal green panel */
.gfx-tool { display: flex; background: var(--white); border: 1px solid var(--gray-200); }
.gfx-tool-left { flex: 0 0 46%; background: var(--clay); background-image: radial-gradient(circle at 100% 0%, rgba(232,197,71,.55), transparent 60%); color: var(--black); padding: 5cqw 4.5cqw; display: flex; flex-direction: column; justify-content: space-between; }
.gfx-tool-left .gfx-tag { color: var(--black); }
.gfx-toolname { font-weight: 900; font-stretch: 110%; font-size: 8cqw; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.gfx-dashes { display: flex; gap: 1.2cqw; }
.gfx-dashes i { display: block; height: 1.5cqw; border-radius: 1cqw; background: var(--black); }
.gfx-dashes i:nth-child(1) { width: 6.5cqw; }
.gfx-dashes i:nth-child(2) { width: 3.4cqw; opacity: 0.6; }
.gfx-dashes i:nth-child(3) { width: 1.9cqw; opacity: 0.35; }
.gfx-tool-right { flex: 1 1 auto; padding: 5cqw 4.5cqw; display: flex; flex-direction: column; justify-content: space-between; }
.gfx-tool-right .gfx-tag.gfx-muted { color: var(--tools); }
.gfx-goodfor { font-size: 4.6cqw; line-height: 1.1; }

/* Try this */
.gfx-try { background: var(--sage); padding: 5cqw 5.5cqw; display: flex; flex-direction: column; justify-content: space-between; }
.gfx-try .gfx-muted { color: #5B4A0E; }
.gfx-try-top { display: flex; justify-content: space-between; align-items: center; }
.gfx-pill { background: var(--black); color: var(--white); padding: 1.1cqw 2.4cqw; border-radius: 99cqw; font-size: 2.1cqw; font-weight: 800; font-stretch: 112%; letter-spacing: 0.18em; text-transform: uppercase; }
.gfx-arrow { color: var(--redrock); width: 10.5cqw; }
.gfx-arrow svg { width: 100%; height: auto; }
.gfx-try-text { font-size: 5.6cqw; line-height: 1.08; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gfx-try-foot { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .minibar, .menu, .menu-links a, .menu-btn span, .card, .featured, .btn { transition: none; }
  .chev, .ph-decor path { animation: none; opacity: 1; }
  .hero::after, .page-hero.dark::after, .takeaway-panel::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 960px) {
  .featured { grid-template-columns: 1fr; }
  .featured-body { padding: 28px 28px 30px; }
  .full { grid-template-columns: 1fr; gap: 24px; }
  .full-gfx { position: static; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .strip-tag { display: none; }
  .nav, .mini-nav { display: none; }
  .menu-btn { display: block; margin-right: -10px; }
  .masthead-row { min-height: 64px; }
  .wordmark { font-size: 21px; }
  .wordmark-sm { font-size: 18px; }
  .minibar .wrap { padding-right: 14px; }
  .hero-decor { opacity: .35; width: 80%; right: -30%; }
  .ph-decor { opacity: .35; width: 70%; right: -25%; }
  .hero-copy { padding-top: 56px; padding-bottom: 68px; }
  .page-hero { padding: 52px 0 60px; }
  .section { padding-top: 48px; }
  .full { padding: 40px 0; }
  .full-title { font-size: 26px; }
  .stacked { font-size: 34px; }
  .takeaway { padding-top: 32px; padding-bottom: 64px; }
  .takeaway-panel { padding: 36px 26px; border-radius: var(--r-lg); }
  .archive a { padding: 20px; }
}

/* fixes */
.masthead { border-bottom: 0; }
.site-header { border-bottom: 1px solid var(--gray-200); }
.featured .featured-gfx { display: flex; }
.stack { display: grid; gap: 24px; }
.stack .featured { margin-bottom: 0; }

/* Palette v3 extras */
.page-hero.light .ph-decor { color: var(--fill, var(--c)); }
.page-hero.sec-campus { --fill: var(--sky); }
.page-hero.sec-cause { --fill: var(--redrock); }
.page-hero.sec-tools { --fill: var(--clay); }
.page-hero.light .page-meta::before { background: var(--fill, var(--c)); }
.nav a[aria-current="page"], .mini-nav a[aria-current="page"] { background: var(--redrock); }
.textlink:hover, .featured-title a:hover, .card-title a:hover, .archive a:hover .arch-title, .card:hover .card-more { color: var(--redrock); }
.kicker::before { background: var(--dot, currentColor); }
.kicker[href*="on-campus"] { --dot: var(--sky); }
.kicker[href*="tools"] { --dot: var(--clay); }
.section-head .eyebrow, .takeaway-label { color: var(--redrock); }
.takeaway-panel .takeaway-label { color: var(--clay); }
.strip-issue:hover, .footer-nav a:hover, .menu-links a:hover, .menu-links a[aria-current="page"], .menu-num { color: var(--clay); }
.trybox strong.rust { color: var(--redrock); }
.card { background-color: var(--white); }
.gfx-cover, .gfx-stat { background-color: var(--black); }
.gfx-try { background-color: var(--sage); }

/* ===== Red Rock is the brand. Each section owns a secondary color. =====
   On Campus = Sky, For the Cause = Clay, Tools = Sage Flower */
.hero h1 .hl { color: var(--redrock); background: none; padding: 0; margin: 0; }
mark, .mark { background: none; color: inherit; padding: 0; }
.hero .glow-2 { background: radial-gradient(circle, rgba(58,124,165,.35), transparent 70%); }

/* Section tokens: fill color, readable text shade, light tint, ink on fill */
.sec-campus, .kicker[href*="on-campus"]   { --g: #3A7CA5; --g-text: #2D6589; --g-50: #E9F1F7; --g-ink: #ffffff; }
.sec-cause,  .kicker[href*="for-the-cause"] { --g: #E8843A; --g-text: #A8521A; --g-50: #FCEEE3; --g-ink: #0A0A0A; }
.sec-tools,  .kicker[href*="tools"]        { --g: #E8C547; --g-text: #7A6106; --g-50: #FBF4D8; --g-ink: #0A0A0A; }

.kicker { background: var(--g-50); color: var(--g-text); }
.kicker::before { background: var(--g); }
.kicker:hover { background: var(--g); color: var(--g-ink); }

.page-hero.light { --c: var(--g-text); --c50: var(--g-50); --fill: var(--g); background: var(--g-50); --grid: color-mix(in srgb, var(--g) 22%, transparent); }
.page-hero.light .page-meta { color: var(--g-text); }
.page-hero.light .page-meta::before { background: var(--g); }
.page-hero.light .ph-decor { color: var(--g); }

.full .trybox { background: var(--g-50); }
.full .trybox strong.rust { color: var(--g-text); }

/* Story graphics take their section color */
.gfx-cover-chevrons svg:first-child path { stroke: var(--g, var(--redrock)); }
.gfx-ring { border-color: var(--g, var(--redrock)); }
.gfx-bar { background: var(--g, var(--redrock)); }
.gfx-stat .gfx-tag { color: var(--g, var(--clay)); }
.gfx-tool-left { background: var(--g, var(--redrock)); background-image: radial-gradient(circle at 100% 0%, rgba(255,255,255,.35), transparent 60%); color: var(--g-ink, #fff); }
.gfx-tool-left .gfx-tag { color: var(--g-ink, #fff); }
.gfx-dashes i { background: var(--g-ink, #fff); }
.gfx-tool-right .gfx-tag.gfx-muted { color: var(--g-text, var(--redrock)); }
.gfx-try { background-color: var(--white); border: 1.2cqw solid var(--g, var(--redrock)); }
.gfx-try .gfx-muted { color: var(--gray-500); }
.gfx-pill { background: var(--g, var(--redrock)); color: var(--g-ink, #fff); }
.gfx-arrow { color: var(--g-text, var(--redrock)); }
.full.sec-campus .trybox, .full.sec-cause .trybox, .full.sec-tools .trybox { background: var(--g-50); }
.full.sec-campus .trybox strong.rust, .full.sec-cause .trybox strong.rust, .full.sec-tools .trybox strong.rust { color: var(--g-text); }
.page-hero.dark .ph-decor { color: var(--redrock); }

/* Review polish */
.who { font-size: 15px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r); padding: 12px 16px; width: 100%; }
.byline a { color: #E9E9EC; text-decoration: underline; text-underline-offset: 3px; }
.byline a:hover { color: var(--clay); }
.takeaway-panel .hero-ctas { margin-top: 10px; }

/* ===== Editor portrait (matches Stack Marketing Co. styling, in Red Rock) ===== */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 1fr); gap: 48px; align-items: center; margin: 52px 0 10px; }
.editor-grid h2 { margin-top: 0 !important; }
.prose:has(.editor-grid) { max-width: 1040px; }
.prose:has(.editor-grid) > p, .prose:has(.editor-grid) > h2 { max-width: 760px; }
.portrait { position: relative; aspect-ratio: 730 / 640; max-width: 440px; width: 100%; justify-self: center; }
.portrait-ring { position: absolute; top: 4%; right: 0; width: 34%; aspect-ratio: 1; border: 1px solid #D4D1CB; border-radius: 50%; }
.portrait-card { position: absolute; left: 7%; right: 6%; top: 20%; bottom: 7%; background: var(--redrock); border-radius: 22px; transform: rotate(-3deg); box-shadow: 0 28px 60px rgba(10,10,10,.18), 0 6px 16px rgba(10,10,10,.08); }
.portrait-card i { position: absolute; top: 9%; left: 7%; width: 42px; height: 4px; border-radius: 2px; background: #F3D6CC; }
.portrait img { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: 86%; height: auto; display: block; }
.avatar { display: inline-block; vertical-align: middle; width: 36px; height: 36px; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 0 2px var(--redrock); }
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
@media (max-width: 820px) { .editor-grid { grid-template-columns: 1fr; gap: 24px; } .portrait { max-width: 340px; } }

/* ===== Charts: brand colors, thin marks, direct labels, hover detail ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chart { width: 100%; margin: 4px 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r); padding: 20px 22px 16px; }
.chart-title { display: flex; flex-direction: column; gap: 2px; font-size: 17px; font-weight: 800; letter-spacing: -0.015em; color: var(--black); margin-bottom: 16px; }
.chart-title span { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--gray-500); }
.bars { display: grid; gap: 12px; }
.bar-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-size: 14px; color: var(--gray-700); line-height: 1.3; outline: none; }
.bar-track { position: relative; height: 12px; border-radius: 6px; background: transparent; box-shadow: inset 0 -1px 0 var(--gray-200); }
.bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: #BDB8AE; border-radius: 0 4px 4px 0; transform-origin: left; animation: grow .9s var(--ease) both; }
.bar-val { font-weight: 800; color: var(--black); text-align: right; font-variant-numeric: tabular-nums; }
.bar-row.is-key .bar { background: var(--redrock); }
.bar-row.is-key .bar-label { color: var(--black); font-weight: 700; }
.bar-row.is-key .bar-val { color: var(--redrock); }
.bar-tip { position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 8px); min-width: 220px; background: var(--black); color: #fff; font-size: 13px; line-height: 1.4; padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.bar-tip span { color: #B9B9BF; font-size: 12px; }
.bar-row:hover .bar-tip, .bar-row:focus .bar-tip { opacity: 1; transform: none; }
.bar-row:hover .bar { filter: brightness(.92); }
.chart-source { margin: 14px 0 0 !important; font-size: 12px !important; color: var(--gray-500) !important; line-height: 1.45; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 560px) { .bar-row { grid-template-columns: 1fr 44px; } .bar-track { grid-column: 1 / -1; grid-row: 2; } .bar-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .bar { animation: none; } }

/* ===== Screenshots and screen recordings in stories ===== */
.shot { width: 100%; margin: 4px 0; }
.shot img, .shot video { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--gray-200); box-shadow: var(--shadow); background: var(--white); }
.shot figcaption { margin-top: 8px; font-size: 13px; color: var(--gray-500); }

/* Mobile overflow fix: the hidden chart table was sizing to its content */
table.sr-only { display: block; }
html, body { overflow-x: clip; max-width: 100%; }