/*
Theme Name: Upstanders v3
Theme URI: https://upstandersaward.org/
Description: Editorial theme for the Horace Mann Upstanders Book Awards — mobile-first, built around the book-spine rainbow signature. v3 is a CSS refresh of v2 (same markup/DNA, more polish). Standalone (no parent). Activate to go live; re-activate v2 or Canvas to roll back.
Author: Upstanders Award
Version: 3.0.3
Text Domain: upstanders-v2
*/

/* ==========================================================================
   Design tokens  (from specifications/frontend-refresh/frontend-design-direction.md)
   ========================================================================== */
:root{
	--paper:#ffffff;
	--ink:#1a1a1a;
	--muted:#6b6b6b;
	--rule:#e6e6e6;
	--accent:#dd3333;
	--accent-dark:#b82b2b;
	--seal:#c9ccce;

	/* book-spine rainbow — read off the logo; structural, never random */
	--s-pink:#e0448b; --s-blue:#2e9be6; --s-green:#3faf57; --s-purple:#8e57b0;
	--s-orange:#ff8a00; --s-yellow:#ffd23f; --s-red:#dd3333;

	--display:"Fraunces", Georgia, "Times New Roman", serif;
	--sans:"Inter", Arial, Helvetica, sans-serif;

	--maxw:1080px;      /* content max */
	--measure:40rem;    /* ~640px long-form column */
	--gutter:clamp(16px,4vw,24px);  /* fluid page gutter — tight on phones, roomy on desktop */
	--flow:clamp(44px,8vw,72px);    /* vertical section rhythm — bigger in v3 */
	--sp:8px;           /* baseline spacing unit */

	/* v3 signature helpers — the spine rainbow as a reusable gradient, the deep
	   tone behind the floating paper, and a shared lift shadow. */
	--rainbow:linear-gradient(90deg,var(--s-pink) 0 14.28%,var(--s-blue) 0 28.57%,var(--s-green) 0 42.85%,var(--s-purple) 0 57.14%,var(--s-orange) 0 71.42%,var(--s-yellow) 0 85.71%,var(--s-red) 0);
	--frame-bg:#241f1b; /* deep tone behind the books frame */
	--lift:0 16px 44px rgba(0,0,0,.16);
}

/* Mobile-first: base rules below target the phone; min-width queries layer up. */

/* ==========================================================================
   Reset-ish base — override Canvas/WooFramework sitewide
   ========================================================================== */
/* v3 signature layout: the books image is the surface the whole site sits on, at
   EVERY width (v2 only showed it ≥1080px, so phones — the main audience — never
   saw it). The white paper column floats over the books with a gap all around, so
   the colorful stacks frame the page as a thin border on phones and open into a
   full surround on desktop. A fixed dark wash keeps the paper popping and any
   edge text legible. */
body.upstanders-v2{
	margin:0;
	background:var(--frame-bg);
}
/* Backdrop + tint on ONE composited, viewport-fixed layer. Carrying the books
   image here (instead of background-attachment:fixed on the scrolling body)
   avoids per-scroll-frame repaints — the big scroll-jank win on mobile — and is
   reliable on iOS, where background-attachment:fixed is unsupported anyway.
   translateZ(0) forces this onto its OWN compositor layer so it's rasterized
   once and merely composited on scroll/layout (e.g. accordion toggles) — without
   it, a fixed raster backdrop repaints the whole viewport on every reflow. */
body.upstanders-v2::before{
	content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
	background:linear-gradient(180deg,rgba(15,12,10,.34),rgba(15,12,10,.58)),
		url( assets/img/books-bg.webp ) center top / cover no-repeat;
	transform:translateZ(0);
}
.upstanders-v2 #wrapper{
	position:relative;z-index:1;
	background:var(--paper);
	max-width:1120px;
	margin:12px;                      /* mobile: a 12px books frame all around */
	border-radius:4px;
	overflow:hidden;                  /* round the header/footer to the paper edge */
	box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.upstanders-v2 #content{
	background:var(--paper);
}
@media (min-width:721px){
	.upstanders-v2 #wrapper{ margin:32px auto; }   /* desktop: centered, full surround */
}
.upstanders-v2, .upstanders-v2 body{
	color:var(--ink);
	font:400 1.0625rem/1.65 var(--sans);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.upstanders-v2 #inner-wrapper{max-width:100%;}
.upstanders-v2 .col-full,
.upstanders-v2 #content{
	max-width:var(--maxw);
	width:auto;
	margin-left:auto;margin-right:auto;
	padding-left:var(--gutter);padding-right:var(--gutter);
	float:none;
}
.upstanders-v2 #main{width:100%;float:none;}

.upstanders-v2 h1,.upstanders-v2 h2,.upstanders-v2 h3,.upstanders-v2 h4{
	font-family:var(--display);
	font-weight:600;
	color:var(--ink);
	letter-spacing:-.01em;
	line-height:1.15;
}
.upstanders-v2 h1{font-size:clamp(2.2rem,6vw,4rem);}
.upstanders-v2 h2{font-size:clamp(1.6rem,3.5vw,2.4rem);}
.upstanders-v2 h3{font-size:1.5rem;}
.upstanders-v2 p{margin:0 0 1.1em;}
.upstanders-v2 a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.upstanders-v2 a:hover{color:var(--accent);}

/* keyboard focus — quality floor */
.upstanders-v2 a:focus-visible,
.upstanders-v2 button:focus-visible,
.upstanders-v2 input:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* ==========================================================================
   Signature — the book-spine rule
   ========================================================================== */
.v2-spinerule{display:flex;height:6px;width:100%;overflow:hidden;}
.v2-spinerule i{flex:1;}
.v2-spinerule i:nth-child(1){background:var(--s-pink);}
.v2-spinerule i:nth-child(2){background:var(--s-blue);}
.v2-spinerule i:nth-child(3){background:var(--s-green);}
.v2-spinerule i:nth-child(4){background:var(--s-purple);}
.v2-spinerule i:nth-child(5){background:var(--s-orange);}
.v2-spinerule i:nth-child(6){background:var(--s-yellow);}
.v2-spinerule i:nth-child(7){background:var(--s-red);}
.v2-spinerule--short{width:220px;border-radius:2px;}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.upstanders-v2 #header.v2-header{
	background:var(--paper);
	border:0;
	padding:0;
	max-width:100%;
	margin:0;
}
.v2-bar{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
	max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter);
}
.v2-logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);
	font:600 1.25rem/1 var(--display);}
.v2-logo img{height:52px;width:auto;max-width:70vw;display:block;}

/* Hamburger toggle — hidden on desktop (see enhancement layer). Overrides the
   sitewide button styling, so scope it high enough to win. */
.upstanders-v2 .v2-nav-toggle{display:inline-flex;align-items:center;justify-content:center;
	width:44px;height:44px;padding:0;margin:0;background:none;border:0;border-radius:0;
	color:var(--ink);cursor:pointer;}
.upstanders-v2 .v2-nav-toggle:hover{background:none;color:var(--accent);}
.v2-burger,.v2-burger::before,.v2-burger::after{display:block;width:24px;height:2px;
	background:currentColor;transition:transform .2s ease,opacity .2s ease;}
.v2-burger{position:relative;}
.v2-burger::before,.v2-burger::after{content:"";position:absolute;left:0;}
.v2-burger::before{top:-7px;}
.v2-burger::after{top:7px;}
.v2-nav-toggle[aria-expanded="true"] .v2-burger{background:transparent;}
.v2-nav-toggle[aria-expanded="true"] .v2-burger::before{transform:translateY(7px) rotate(45deg);}
.v2-nav-toggle[aria-expanded="true"] .v2-burger::after{transform:translateY(-7px) rotate(-45deg);}

/* Mobile: nav is a collapsible panel that drops full-width below the bar. */
.v2-nav{display:none;order:3;width:100%;}
.v2-nav.is-open{display:block;}
.v2-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.v2-nav li{margin:0;border-top:1px solid var(--rule);}
.v2-nav a{display:block;color:var(--ink);text-decoration:none;font:600 1rem/1 var(--sans);
	letter-spacing:.02em;padding:14px 2px;}
.v2-nav a:hover,.v2-nav .current-menu-item>a,.v2-nav .current_page_item>a{color:var(--accent);}

/* Accessible label for the toggle */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ==========================================================================
   Homepage hero — the current winner
   ========================================================================== */
.v2-hero{max-width:var(--maxw);margin:0 auto;padding:clamp(32px,7vw,76px) var(--gutter) clamp(20px,4vw,32px);}
.v2-hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;}
/* Front-page hero leads with the cover on mobile; text follows. */
.v2-hero .v2-cover{order:-1;max-width:260px;margin:0 auto;}
.v2-eyebrow{font:700 .8125rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
	color:var(--muted);margin:0 0 14px;}
/* v3 hero eyebrow — bigger, brand red, led by a rainbow tick. */
.v2-hero .v2-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.9375rem;
	color:var(--accent);margin:0 0 18px;}
.v2-hero .v2-eyebrow::before{content:"";width:44px;height:8px;border-radius:2px;background:var(--rainbow);}
.v2-hero h1{margin:0;font-size:clamp(2.9rem,9vw,5.5rem);line-height:.98;letter-spacing:-.025em;}
.v2-hero .by{color:var(--muted);font-size:1.25rem;margin:16px 0 0;font-family:var(--display);font-style:italic;}
.v2-hero .citation{font-size:1.25rem;line-height:1.6;color:var(--ink);max-width:46ch;margin:22px 0 0;}
.v2-hero .cta{display:inline-block;margin-top:28px;background:var(--accent);color:#fff;
	text-decoration:none;font:700 .9375rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
	padding:18px 30px;border-radius:3px;box-shadow:var(--lift);
	transition:background .2s ease,transform .2s ease;}
.v2-hero .cta:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px);}
.v2-cover{position:relative;aspect-ratio:2/3;background:var(--s-orange);border-radius:2px;
	box-shadow:inset 14px 0 22px rgba(0,0,0,.22),0 22px 50px rgba(0,0,0,.30);}
.v2-cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px;
	box-shadow:inset 14px 0 22px rgba(0,0,0,.22);}
/* Wide/landscape jackets: show the whole cover (no title clipping) centered over a
   blurred fill of itself, so the tile keeps the same 2:3 shelf shape. --cover is set
   inline per row. */
.v2-cover.is-contain{overflow:hidden;}
.v2-cover.is-contain::before{content:"";position:absolute;inset:-8%;
	background:var(--cover) center/cover no-repeat;filter:blur(22px) brightness(.82) saturate(1.1);}
.v2-cover.is-contain img{position:relative;z-index:1;object-fit:contain;box-shadow:none;}
.v2-hero-rule{max-width:var(--maxw);margin:clamp(28px,5vw,44px) auto 0;padding:0 var(--gutter);}
.v2-hero-rule .v2-spinerule{width:100%;height:10px;border-radius:3px;}

/* ==========================================================================
   Homepage ceremony slider — native, no plugin
   ========================================================================== */
.v2-slider-section{padding-top:8px;}
.v2-slider-section .v2-eyebrow{margin-bottom:14px;}
.v2-slider{position:relative;overflow:hidden;background:#111;border-radius:4px;
	box-shadow:var(--lift);}
.v2-slider:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.v2-slider-track{position:relative;aspect-ratio:3/2;}
.v2-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s ease;
	pointer-events:none;}
.v2-slide.is-active{opacity:1;pointer-events:auto;}
.v2-slide img{width:100%;height:100%;object-fit:cover;display:block;}

/* arrows (scoped high enough to beat the sitewide `.upstanders-v2 button`) */
.upstanders-v2 .v2-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
	width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.42);
	color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.upstanders-v2 .v2-slider-arrow:hover{background:var(--accent);}
.upstanders-v2 .v2-slider-arrow::before{content:"";width:11px;height:11px;border-top:2px solid #fff;
	border-right:2px solid #fff;display:block;}
.upstanders-v2 .v2-slider-prev{left:12px;}
.upstanders-v2 .v2-slider-prev::before{transform:rotate(-135deg);margin-left:4px;}
.upstanders-v2 .v2-slider-next{right:12px;}
.upstanders-v2 .v2-slider-next::before{transform:rotate(45deg);margin-right:4px;}

/* dots */
.v2-slider-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;
	justify-content:center;gap:8px;flex-wrap:wrap;padding:0 12px;}
.upstanders-v2 .v2-slider-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
	background:rgba(255,255,255,.55);transition:background .2s ease,transform .2s ease;}
.upstanders-v2 .v2-slider-dot:hover{background:#fff;}
.upstanders-v2 .v2-slider-dot.is-active{background:#fff;transform:scale(1.3);}

/* No-JS / reduced-motion fallback: the first slide is visible via .is-active,
   so the component degrades to a single static photo. */
@media (prefers-reduced-motion:reduce){
	.v2-slide{transition:none;}
}

/* ==========================================================================
   Homepage sections — about + recent posts
   ========================================================================== */
.v2-section{max-width:var(--maxw);margin:0 auto;padding:var(--flow) var(--gutter);}
.v2-section--narrow > *{max-width:var(--measure);}  /* left-aligned to the content edge, not centered */
/* v3 section headings carry a rainbow tick — the spine signature, section by section. */
.v2-section h2{margin:0 0 26px;position:relative;padding-top:24px;}
.v2-section h2::before{content:"";position:absolute;top:0;left:0;width:56px;height:8px;
	border-radius:2px;background:var(--rainbow);}
.v2-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px;}
.v2-card{border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column;
	transition:transform .2s ease,box-shadow .2s ease;}
.v2-card:hover{transform:translateY(-4px);box-shadow:var(--lift);}
.v2-card .v2-card-bar{height:6px;background:var(--s-blue);}
/* sequential rainbow bars — the same "infinite loop" as the spine rule */
.v2-cards .v2-card:nth-child(7n+1) .v2-card-bar{background:var(--s-pink);}
.v2-cards .v2-card:nth-child(7n+2) .v2-card-bar{background:var(--s-blue);}
.v2-cards .v2-card:nth-child(7n+3) .v2-card-bar{background:var(--s-green);}
.v2-cards .v2-card:nth-child(7n+4) .v2-card-bar{background:var(--s-purple);}
.v2-cards .v2-card:nth-child(7n+5) .v2-card-bar{background:var(--s-orange);}
.v2-cards .v2-card:nth-child(7n+6) .v2-card-bar{background:var(--s-yellow);}
.v2-cards .v2-card:nth-child(7n+7) .v2-card-bar{background:var(--s-red);}
.v2-card .v2-card-body{padding:22px 24px;}
.v2-card h3{margin:0 0 8px;font-size:1.375rem;}
.v2-card h3 a{text-decoration:none;}
.v2-card h3 a:hover{color:var(--accent);}
.v2-card .date{display:block;font:600 .75rem/1 var(--sans);letter-spacing:.1em;
	text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-variant-numeric:tabular-nums;}
.v2-card p{color:var(--muted);margin:0;font-size:.9375rem;}

/* ==========================================================================
   Page / archive / search headers (list pages)
   ========================================================================== */
.v2-pagehead{max-width:var(--maxw);margin:0 auto;padding:var(--flow) var(--gutter) 8px;}
.v2-pagehead h1{margin:0;}
.v2-pagehead .v2-desc{color:var(--muted);max-width:52ch;margin:16px 0 0;font-size:1.125rem;}
.v2-pagehead .v2-search{margin:22px 0 0;display:flex;gap:8px;max-width:420px;}
.v2-pagehead .v2-search input[type=search]{flex:1;min-width:0;}
.v2-pagehead .v2-spinerule{width:220px;border-radius:2px;margin:28px 0 0;}
.upstanders-v2 .v2-cards{margin-top:8px;}
.v2-cards .v2-card-thumb{display:block;}
.v2-cards .v2-card-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}

/* ==========================================================================
   Article — single post / page, readable measure
   ========================================================================== */
.v2-article{max-width:calc(var(--measure) + 48px);margin:0 auto;padding:0 var(--gutter);}
.v2-article-head{padding:56px 0 0;}
.v2-article-head .v2-eyebrow{margin-bottom:12px;}
.v2-article-head h1{margin:0;}
.v2-article-head .v2-spinerule{width:180px;border-radius:2px;margin:24px 0 0;}
.v2-article-cover{margin:32px 0 0;}
.v2-article-cover img{display:block;width:100%;height:auto;}
.upstanders-v2 .entry{font-size:1.0625rem;line-height:1.7;padding:8px 0 24px;}
.upstanders-v2 .entry > *{margin-top:1.1em;}
.upstanders-v2 .entry img{max-width:100%;height:auto;}
.upstanders-v2 .entry h2,
.upstanders-v2 .entry h3{margin-top:1.6em;}
.upstanders-v2 .entry a{color:var(--accent);}
.upstanders-v2 .entry blockquote{margin:1.6em 0;padding:4px 0 4px 22px;
	border-left:4px solid var(--accent);font-family:var(--display);font-size:1.375rem;
	line-height:1.4;color:var(--ink);}
.upstanders-v2 .entry ul,
.upstanders-v2 .entry ol{padding-left:1.4em;}

/* pagination + empty state */
.v2-pagination{max-width:var(--maxw);margin:16px auto 0;padding:24px;}
.v2-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;}
.v2-pagination a,.v2-pagination span{padding:8px 14px;border:1px solid var(--rule);
	text-decoration:none;font-weight:600;color:var(--ink);}
.v2-pagination .current{background:var(--ink);color:#fff;border-color:var(--ink);}
.v2-pagination a:hover{border-color:var(--accent);color:var(--accent);}
.v2-none{max-width:var(--measure);margin:0 auto;padding:24px;}

/* comments — kept quiet */
.upstanders-v2 #comments{max-width:calc(var(--measure) + 48px);margin:0 auto;padding:24px var(--gutter) 0;
	border-top:1px solid var(--rule);}
.upstanders-v2 #comments h2,.upstanders-v2 #reply-title{font-family:var(--display);}

/* buttons / search sitewide */
.upstanders-v2 input[type=search],
.upstanders-v2 input[type=text]{padding:12px 14px;font-size:1rem;border:1px solid #ccc;
	border-radius:0;background:#fff;color:var(--ink);}
.upstanders-v2 button,
.upstanders-v2 input[type=submit]{background:var(--accent);color:#fff;border:0;border-radius:0;
	font:600 1rem/1 var(--sans);padding:12px 20px;cursor:pointer;}
.upstanders-v2 button:hover,
.upstanders-v2 input[type=submit]:hover{background:var(--accent-dark);}

/* ==========================================================================
   Footer
   ========================================================================== */
.upstanders-v2 #footer.v2-footer{background:var(--paper);border:0;max-width:100%;
	margin:64px 0 0;padding:0;float:none;width:auto;}
.v2-foot{max-width:var(--maxw);margin:0 auto;padding:26px var(--gutter) 40px;
	display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
	color:var(--muted);font-size:.875rem;}
.v2-foot a{color:var(--muted);text-decoration:none;}
.v2-foot a:hover{color:var(--accent);}
.v2-foot .v2-foot-nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:600;}

/* ==========================================================================
   On-brand 404
   ========================================================================== */
.v2-404{max-width:640px;margin:24px auto 40px;text-align:center;}
.v2-404 .code{font:700 clamp(64px,15vw,120px)/.9 var(--display);letter-spacing:-.02em;margin:0;}
.v2-404 h1{font-size:clamp(1.4rem,4vw,1.9rem);margin:.4em 0 .3em;}
.v2-404 .lead{color:var(--muted);font-size:1.125rem;line-height:1.6;margin:0 auto;max-width:46ch;}
.v2-404 .v2-spinerule{width:200px;margin:30px auto;border-radius:2px;height:8px;}
.v2-404 form{display:flex;gap:8px;max-width:420px;margin:0 auto 30px;}
.v2-404 form input[type=search]{flex:1;min-width:0;}
.v2-404 .links{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;
	padding-top:24px;border-top:1px solid var(--rule);}
.v2-404 .links a{color:var(--ink);font-weight:700;font-size:.9375rem;text-decoration:none;}
.v2-404 .links a:hover{color:var(--accent);text-decoration:underline;}

/* ==========================================================================
   Winners page — editorial accordion (<details>), color-coded by sequence.
   Mobile-first: summary is a stacked row; tab spine at the left, chevron at right.
   ========================================================================== */
.v2-winners{max-width:var(--maxw);margin:0 auto;padding:8px var(--gutter) var(--flow);}

.v2-winner{border-bottom:1px solid var(--rule);}
.v2-winner:first-child{border-top:1px solid var(--rule);}

/* Summary row — the always-visible header. Kill the native disclosure triangle. */
.v2-winner-sum{display:grid;grid-template-columns:10px 1fr auto;gap:2px 16px;
	align-items:baseline;padding:18px 0;cursor:pointer;list-style:none;}
.v2-winner-sum::-webkit-details-marker{display:none;}
.v2-winner-sum:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.v2-winner-sum .tab{grid-row:1/span 3;align-self:stretch;border-radius:3px;}
.v2-winner-sum .yr{grid-column:2;font:700 1.125rem/1.2 var(--display);color:var(--ink);
	font-variant-numeric:tabular-nums;}
.v2-winner-sum .ttl{grid-column:2;font:600 1.5rem/1.2 var(--display);color:var(--ink);}
.v2-winner-sum .ttl .badge{display:inline-block;font:600 .625rem/1 var(--sans);letter-spacing:.08em;
	text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:2px;
	padding:3px 6px;margin-left:10px;vertical-align:middle;}
.v2-winner-sum .by{grid-column:2;font-size:.9375rem;color:var(--muted);}
.v2-winner:hover .ttl,
.v2-winner[open] .ttl{color:var(--accent);}

/* Chevron — sits top-right, rotates when the row is open. */
.v2-winner-sum .chev{grid-column:3;grid-row:1;align-self:center;width:12px;height:12px;
	border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
	transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px;}
.v2-winner[open] .chev{transform:rotate(-135deg);}

/* Panel — the expanded detail. */
.v2-winner-panel{padding:0 0 22px;}
.v2-winner-panel .citation{font-size:1.0625rem;line-height:1.65;color:var(--ink);
	max-width:52ch;margin:0 0 14px;}
.v2-winner-panel.has-cover .v2-cover{max-width:180px;margin:0 0 18px;}
.v2-winner-link{display:inline-block;font:600 .9375rem/1 var(--sans);color:var(--accent);
	text-decoration:none;letter-spacing:.01em;}
.v2-winner-link:hover{color:var(--accent-dark);text-decoration:underline;}
.v2-winner-link span{display:inline-block;transition:transform .2s ease;}
.v2-winner-link:hover span{transform:translateX(3px);}

/* ==========================================================================
   Quiet the inherited Canvas sidebars until cut 2 removes them per-template
   ========================================================================== */
.upstanders-v2 #sidebar,
.upstanders-v2 #sidebar-alt{font-size:.9375rem;}

/* ==========================================================================
   Enhancement layers — mobile is the base above; these add multi-column
   layouts as the viewport grows (min-width, not max-width).
   ========================================================================== */

/* Tablet and up: the summary row becomes a four-track line (tab / year / title /
   author), with the chevron pinned right. The open panel gets a cover+text 2-up. */
@media (min-width:641px){
	.v2-winner-sum{grid-template-columns:10px 5rem 1fr auto auto;gap:0 22px;padding:20px 0;
		align-items:baseline;}
	.v2-winner-sum .tab{grid-row:1;}
	.v2-winner-sum .yr,
	.v2-winner-sum .ttl{grid-column:auto;}
	.v2-winner-sum .by{grid-column:auto;text-align:right;align-self:baseline;}
	.v2-winner-sum .chev{grid-column:5;align-self:center;}
	.v2-winner-panel{padding-left:calc(10px + 22px);}  /* align under the year column */
	.v2-winner-panel.has-cover{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:start;}
	.v2-winner-panel.has-cover .v2-cover{margin:0;}
}

/* Wider: the homepage hero goes side-by-side, and the nav goes inline (no burger). */
@media (min-width:721px){
	.v2-hero-grid{grid-template-columns:1fr minmax(260px,380px);gap:56px;}
	.v2-hero .v2-cover{order:0;max-width:none;margin:0;}
	.v2-bar{gap:24px;padding:16px var(--gutter);}
	.upstanders-v2 .v2-nav-toggle{display:none;}
	.v2-nav{display:block;order:0;width:auto;}
	.v2-nav ul{flex-direction:row;flex-wrap:wrap;gap:8px 26px;}
	.v2-nav li{border-top:0;}
	.v2-nav a{position:relative;display:inline-block;font-size:.9375rem;padding:6px 0;}

	/* Each item carries its own book-spine color, cycling through the palette. */
	.v2-nav li{--item:var(--accent);}
	.v2-nav li:nth-child(7n+1){--item:var(--s-pink);}
	.v2-nav li:nth-child(7n+2){--item:var(--s-blue);}
	.v2-nav li:nth-child(7n+3){--item:var(--s-green);}
	.v2-nav li:nth-child(7n+4){--item:var(--s-purple);}
	.v2-nav li:nth-child(7n+5){--item:var(--s-orange);}
	.v2-nav li:nth-child(7n+6){--item:var(--s-yellow);}
	.v2-nav li:nth-child(7n+7){--item:var(--s-red);}

	/* Centered underline: 80% of the item, in that item's color. Grows from the
	   centre on hover; pinned open for the current page. */
	.v2-nav a::after{content:"";position:absolute;left:50%;bottom:0;width:80%;height:3px;
		background:var(--item);border-radius:3px;transform:translateX(-50%) scaleX(0);
		transform-origin:center;transition:transform .22s ease;}
	.v2-nav a:hover::after,
	.v2-nav .current-menu-item>a::after,
	.v2-nav .current_page_item>a::after{transform:translateX(-50%) scaleX(1);}

	/* Keep the label ink on desktop — the colored underline is the indicator. */
	.v2-nav a:hover,
	.v2-nav .current-menu-item>a,
	.v2-nav .current_page_item>a{color:var(--ink);}
}

@media (prefers-reduced-motion:reduce){
	.upstanders-v2 *{animation:none!important;transition:none!important;}
}