/* Off to Pride — design system (17 October 2026 refresh).
   Palette: deep plum ink, warm cream paper, gold accents, rainbow accent strip.
   Headings use Fraunces (self-hosted variable font); body text stays on the system stack. */
@font-face{font-family:'Fraunces';src:url('/fraunces.woff2') format('woff2');font-weight:300 900;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fbf7f0;color:#322441;font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:#6d2f86;text-underline-offset:4px}
a:hover{color:#3c1d4e}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a94614;outline-offset:4px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:620;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,5.5vw,4.2rem);max-width:900px;margin-bottom:22px;font-weight:650}
h2{font-size:clamp(1.65rem,3vw,2.3rem)}
h3{font-size:1.4rem}
.wrap{max-width:1180px;margin:auto;padding:0 28px}
.rainbow{height:4px;background:linear-gradient(90deg,#d9574c 0 16.6%,#dc8939 16.6% 33.3%,#e9c251 33.3% 50%,#53835b 50% 66.6%,#4873ae 66.6% 83.3%,#9250a3 83.3%)}
header{background:linear-gradient(135deg,#431e4e,#351540)}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.brand{display:flex;align-items:center;text-decoration:none;color:#fff;font-family:'Fraunces',Georgia,serif;font-weight:640;font-size:25px;letter-spacing:-.01em;white-space:nowrap}
.brand img{width:52px;height:49px;margin-right:10px}
.brand span{color:#f3c75c}
nav{display:flex;gap:26px;flex-wrap:wrap}
nav a{font-size:15px;font-weight:650;color:#f1e6f5;text-decoration:none;padding:6px 0}
nav a:hover{color:#fff}
nav a[aria-current=page]{color:#f3c75c;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:#f3c75c;text-underline-offset:8px}
.skip{position:absolute;top:-100px}
.skip:focus{top:10px;background:white;padding:12px;z-index:9}
/* Hero: full-bleed deep plum band on every page */
.hero{background:radial-gradient(1100px 420px at 85% -60px,rgba(233,194,81,.16),transparent 60%),radial-gradient(900px 420px at -10% 110%,rgba(146,80,163,.35),transparent 60%),linear-gradient(140deg,#3f1b4a 0%,#542563 58%,#41204c 100%);color:#fff;padding:58px 0 54px}
.hero h1{color:#fff}
.hero .eyebrow{color:#f3c75c}
.hero .lead{color:#ecdcf2}
.hero a{color:#fff}
.hero .status{color:#d9c3e2}
.hero.lost-page{background:none;color:inherit;padding:56px 28px}
.hero.lost-page h1{color:inherit}
.hero.lost-page .eyebrow{color:#6b466d}
.hero.lost-page .lead{color:inherit}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2.5px;font-weight:800;color:#6b466d;margin-bottom:18px}
.lead{font-size:20px;max-width:690px;line-height:1.6}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:48px}
.buttons{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:9px;text-decoration:none;background:#e8b63e;color:#3a2410;font-weight:750;border:2px solid #e8b63e;font-size:15px}
.button:hover{background:#d9a52c;border-color:#d9a52c;color:#2c1a08}
.button.light{background:transparent;color:currentColor;border:2px solid currentColor}
.button.light:hover{background:rgba(127,127,127,.12)}
/* Home "board" panel */
.board{background:rgba(24,8,30,.45);border:1px solid rgba(243,199,92,.4);border-radius:16px;padding:26px 26px 20px;color:#fff;box-shadow:0 10px 30px rgba(20,5,25,.3)}
.board-title{font-size:12px;text-transform:uppercase;letter-spacing:2.5px;font-weight:800;color:#f3c75c;margin-bottom:6px}
.board dl{margin:0}
.board dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(243,199,92,.35)}
.board dt{font-size:14px;color:#e4d2ea}
.board dd{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:650;font-size:19px;color:#f6d47a;text-align:right}
.board>a{display:inline-block;margin-top:16px;font-weight:700;color:#f3c75c}
.board>a:hover{color:#fff}
.board-welcome{font-size:11px;letter-spacing:2.5px;font-weight:750;color:#d9c3e2;margin:18px 0 0;text-align:center}
.art{border-radius:50% 50% 12% 12%;background:#eee6f3;min-height:370px;display:grid;place-items:center;position:relative;overflow:hidden}
.art img{width:85%;max-width:350px}
.art span{font-size:12px;letter-spacing:2px;font-weight:750;position:absolute;bottom:28px}
.notice{padding:16px 22px;border-left:4px solid #b78ac4;background:#f3ebf6;border-radius:0 10px 10px 0;font-size:15px}
.section{padding:56px 0;border-top:1px solid #ece2d2}
.tinted{background:#f4ecdf;border-top:none}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:25px;margin-bottom:26px}
.section-head h2{margin:0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{background:#fff;border:1px solid #e9ddcb;border-radius:14px;padding:26px;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(62,31,74,.07);transition:box-shadow .15s ease,transform .15s ease}
.card:hover{box-shadow:0 8px 22px rgba(62,31,74,.13);transform:translateY(-2px)}
.card h3{margin:16px 0 12px}
.card h2{font-size:1.45rem;margin:14px 0 12px}
.card p{font-size:16px}
.card a{margin-top:auto;font-weight:700}
.tag{display:inline-block;font-size:12px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;color:#5c2d6e;background:#f3e7f6;border-radius:99px;padding:4px 12px}
.card .number{font-family:'Fraunces',Georgia,serif;font-size:38px;font-weight:650;color:#b07c2c;line-height:1.1}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}
.feature-art{background:#efe5d4;border-radius:14px;padding:48px;min-height:300px}
.feature-art .place{font-family:'Fraunces',Georgia,serif;font-size:48px;font-weight:650;line-height:1.05;letter-spacing:-.02em}
.feature-art p{margin:20px 0 0}
.filters{display:flex;gap:16px;margin:28px 0;align-items:end;flex-wrap:wrap}
.filters label{display:grid;gap:6px;font-size:14px;font-weight:650;flex:1;min-width:190px}
input,select{font:inherit;color:inherit;border:1px solid #baaabc;border-radius:8px;padding:12px;width:100%;background:white;min-height:48px}
.event-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.event{border:1px solid #e9ddcb;border-radius:14px;padding:22px;background:white;box-shadow:0 1px 3px rgba(62,31,74,.07);transition:box-shadow .15s ease,transform .15s ease}
.event:hover{box-shadow:0 8px 22px rgba(62,31,74,.13);transform:translateY(-2px)}
.event h2{font-size:22px;letter-spacing:-.01em;margin:12px 0 8px}
.event h3{font-size:21px;letter-spacing:-.01em;margin:12px 0 8px}
.event p{font-size:14px;margin-bottom:8px}
.event a{font-size:15px;font-weight:700;display:inline-block;padding:6px 0}
.evt-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.date-badge{background:#46204f;color:#fff;border-radius:10px;min-width:56px;text-align:center;padding:7px 9px 6px;font-weight:800;line-height:1.05;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.date-badge strong{display:block;font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:650;letter-spacing:0}
.date-badge.tbc{background:#efe6f2;color:#5c2d6e}
.status{color:#69486b;font-size:13px;font-weight:650}
.article{display:grid;grid-template-columns:minmax(0,760px) 260px;gap:60px;padding-bottom:60px}
.article section{padding:26px 0;border-top:1px solid #e9ddcb}
.article section h2{font-size:29px}
.article p,.article li{font-size:17px}
.article aside{align-self:start;position:sticky;top:24px;background:#fff;border:1px solid #e9ddcb;border-radius:14px;padding:24px;box-shadow:0 1px 3px rgba(62,31,74,.07)}
.article aside strong{font-family:'Fraunces',Georgia,serif;font-size:19px}
.article aside a{display:block;font-size:14px;padding:5px 0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;background:#fff;border:1px solid #e9ddcb;border-radius:14px;box-shadow:0 1px 3px rgba(62,31,74,.07);padding:22px 26px;margin:26px 0}
.facts div{border-left:3px solid #e8b63e;padding-left:14px}
.facts dt{font-size:12px;text-transform:uppercase;font-weight:750;letter-spacing:1px;color:#6b466d}
.facts dd{margin:6px 0 0;font-weight:650}
details{border-top:1px solid #e3d5c2;padding:18px 0}
summary{cursor:pointer;font-weight:700;min-height:32px}
details p{margin-top:14px}
.prose{max-width:800px}
.prose h2{margin-top:36px}
footer{background:#2a1430;color:#f4ecf6;padding:48px 0 22px;border-top:4px solid #e8b63e}
footer a{color:#f0cc74}
footer a:hover{color:white}
.foot{display:grid;grid-template-columns:2fr 1fr;gap:60px}
.foot h2{font-size:24px}
.foot p{font-size:15px;max-width:540px}
.fine{font-size:12px;margin-top:28px;padding-top:20px;border-top:1px solid #5b3f63;color:#d9c7de}
.hidden{display:none!important}
[hidden]{display:none!important}
/* Article bodies and shared components */
.article-content{padding-bottom:56px}
.article-content section{padding:24px 0;border-top:1px solid #e9ddcb}
.article-content .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.article-content h2{font-size:29px}
.duck-card{display:flex;align-items:center;gap:12px;border:1px solid #6a4a73;background:#372045;color:#fff;border-radius:14px;padding:15px;max-width:340px;margin-bottom:22px}
.duck-card img{flex:0 0 94px}
.duck-card strong{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:620;line-height:1.1;letter-spacing:0}
.sources{overflow-wrap:anywhere}
.sources li{font-size:15px}
.prose .button{max-width:100%}
footer .fine{overflow-wrap:anywhere}
.card,.event{min-width:0}
.card h2,.card h3,.event h2,.event h3{overflow-wrap:break-word;hyphens:auto}
.article>div{min-width:0}
main p a,main li a,main dd{overflow-wrap:anywhere}
/* 404 cartoon */
.lost-cartoon{margin:0;text-align:center}
.lost-number{display:block;font-family:'Fraunces',Georgia,serif;font-size:clamp(64px,10vw,110px);font-weight:650;color:#c9a1d6;line-height:1}
.duck-speech{display:inline-block;background:#fff;border:1px solid #e9ddcb;border-radius:16px 16px 16px 3px;padding:10px 18px;box-shadow:0 1px 3px rgba(62,31,74,.07);font-weight:650;margin:10px 0 6px}
.lost-cartoon img{max-width:420px;width:80%;height:auto}
.lost-cartoon figcaption{font-size:12px;color:#7d6a86}
/* Responsive */
@media(min-width:761px) and (max-width:980px){.cards,.event-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
.wrap{padding:0 20px}
.header{display:block;padding-top:12px;padding-bottom:14px;min-height:0}
.brand{font-size:23px}
nav{gap:10px 20px;margin-top:10px}
nav a{padding:7px 0;min-height:36px}
.hero{padding:40px 0 38px}
.hero.lost-page{padding:40px 20px}
.hero-grid,.feature,.article,.foot{grid-template-columns:1fr;gap:28px}
.hero h1{font-size:42px;overflow-wrap:break-word}
.lead{font-size:18px}
.art{min-height:270px;max-width:420px}
.art img{width:70%}
.cards,.event-list{grid-template-columns:1fr}
.section{padding:38px 0}
.section-head{display:block}
.section-head a{display:inline-block;margin-top:14px}
.article aside{position:static;grid-row:1}
.facts{grid-template-columns:1fr;gap:16px}
.feature-art{min-height:210px;padding:32px}
.filters{display:block}
.filters label{margin-top:14px}
.button{width:100%;white-space:normal;text-align:center}
.foot{gap:24px}
h1{font-size:40px}
.article section h2{font-size:27px}
.article-content .cards{grid-template-columns:1fr}
.duck-card{max-width:100%}
.duck-card strong{font-size:22px}
.facts dd{overflow-wrap:anywhere}
.prose h2{overflow-wrap:break-word}
.board{padding:22px 20px 16px}
}
/* Keep all five mobile navigation links in one row; allow scrolling if needed. */
@media(max-width:760px){header nav{flex-wrap:nowrap;gap:10px;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:thin}header nav a{flex:0 0 auto;white-space:nowrap;font-size:14px;min-height:44px}}
/* Fit all five nav links on a 390px screen */
@media(max-width:420px){header nav{gap:8px}header nav a{font-size:13px}}
/* Long Pride names on very narrow phones */
@media(max-width:380px){.hero h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.event{transition:none}}