:root {
  --paper: #fffdf6;
  --cream: #ffffff;
  --ink: #202c4a;
  --muted: #505c75;
  --wine: #285ac5;
  --deep: #25377a;
  --gold: #ffe07d;
  --ochre: #805716;
  --line: #dce4f1;
  --lake: #366da1;
  --sky: #dbeeff;
  --rose: #ffddeb;
  --mint: #dff4dc;
  --lemon: #fff2bc;
  --display: 'Trebuchet MS', system-ui, sans-serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'DejaVu Sans Mono', monospace;
  color-scheme: light;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.55;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--wine); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
img, video { max-width: 100%; display: block; height: auto; }
svg { display: block; }
:focus-visible { outline: 3px solid #33748e; outline-offset: 4px; }
[hidden] { display: none !important; }
.wrap { width: min(1260px, calc(100% - 96px)); margin-inline: auto; }
.icon { flex: 0 0 auto; width: 1.25em; height: 1.25em; }
.skip { position: absolute; z-index: 20; top: 1rem; left: 1rem; padding: .6rem 1rem; background: var(--cream); transform: translateY(-160%); }
.skip:focus { transform: none; }
.honeypot { position: absolute; inset: 0 auto auto -10000px; }
.eyebrow {
  font: 800 .72rem/1.4 var(--sans);
  letter-spacing: .095em;
  text-transform: uppercase;
  color: var(--wine);
  margin: 0 0 .6rem;
}
.diamond { display: inline-block; width: .46rem; height: .46rem; margin-right: .5rem; vertical-align: .08rem; background: currentColor; transform: rotate(45deg); }
.button {
  display: inline-flex; gap: .65rem; align-items: center; justify-content: center;
  border: 1px solid transparent; background: var(--wine); color: white; text-decoration: none;
  font-size: .875rem; font-weight: 750; min-height: 48px; padding: .7rem 1rem; border-radius: 999px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.button:hover { background: var(--deep); color: white; }
.button-small { min-height: 42px; font-size: .8125rem; }
.button-gold { color: #34231d; background: var(--gold); border-color: var(--gold); }
.button-gold:hover { background: #ffe0a5; color: var(--ink); }
.button-outline { color: #fff; border-color: #d5e1ff; background: #25377a; }
.button-outline:hover { background: #33488e; color: white; }
.ghost { background: transparent; color: var(--wine); border-color: #99acd7; }
.ghost:hover { background: #eaf0ff; color: var(--deep); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.text-link {
  display: inline-flex; gap: .45rem; align-items: center; width: fit-content; color: var(--wine);
  text-decoration: none; border-bottom: 1px solid #9daee7; font-weight: 750; font-size: .875rem; padding-block: .18rem;
}
.text-link:hover { border-color: currentColor; color: var(--deep); }
.masthead { background: var(--cream); }
.masthead-inner { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; gap: .62rem; align-items: center; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand img { width: 38px; height: 44px; }
.brand strong { display: block; font-size: 1.51rem; line-height: 1; letter-spacing: -.07em; font-weight: 900; }
.brand strong span { color: var(--wine); }
.brand small { display: block; margin-top: .28rem; font: 700 .58rem var(--mono); letter-spacing: .13em; }
.main-nav, .head-tools { display: flex; align-items: center; }
.main-nav { gap: clamp(.9rem, 2.3vw, 2.25rem); }
.main-nav a { color: var(--ink); font-weight: 700; font-size: .9rem; text-decoration: none; padding: .55rem 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav [aria-current] { color: var(--wine); border-color: var(--wine); }
.head-tools { gap: .75rem; }
.icon-link { display: grid; place-items: center; min-width: 36px; min-height: 44px; }
.menu-toggle, .nav-mobile { display: none !important; }
.bulletin { color: var(--ink); background: var(--lemon); border-block: 1px solid #f3e6ad; }
.bulletin-inner { display: flex; min-height: 42px; align-items: center; gap: 1rem; }
.bulletin-inner strong { font: 800 .72rem var(--sans); color: #654817; letter-spacing: .075em; white-space: nowrap; }
.live-dot { display: inline-block; vertical-align: .07em; width: .48rem; height: .48rem; background: #ad587f; border-radius: 50%; margin-right: .45rem; }
.bulletin-inner p { margin: 0; padding-left: 1rem; border-left: 1px solid #d4bf80; font-size: .83rem; }
.bulletin-inner a { margin-left: auto; color: var(--ink); display: inline-flex; gap: .4rem; align-items: center; white-space: nowrap; font-size: .77rem; }
.hero { background: radial-gradient(circle at 87% 8%, #fff1b6 0, transparent 28%), linear-gradient(115deg,#eef7ff,#e2f4ff 57%,#fce7f0); color: var(--ink); overflow: clip; }
.hero-inner { display: grid; align-items: center; grid-template-columns: 1fr 1.03fr; gap: clamp(1.4rem, 5vw, 5rem); padding-block: clamp(3rem, 6vw, 6rem); }
.hero-welcome { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .75rem; border-radius: 999px; color: #31558c; background: #fff; font-size: .79rem; font-weight: 800; }
.hero h1 { margin: .8rem 0 1rem; font: 900 clamp(4rem, 7.2vw, 7.2rem)/.91 var(--display); letter-spacing: -.085em; }
.hero h1 > span { color: #285ac5; }
.hero-period { color: #a6386a; }
.hero-lede { font-size: clamp(1.06rem, 2.2vw, 1.45rem); line-height: 1.3; margin: .9rem 0 .45rem; font-weight: 800; }
.hero-description { color: var(--muted); font-size: .95rem; margin: .5rem 0 1.5rem; max-width: 34ch; }
.hero-portrait { position: relative; margin: 0; padding: .65rem; min-width: 0; background: #fff; border-radius: 32px; box-shadow: 0 17px 45px #52699528; transform: rotate(2deg); }
.hero-image { overflow: hidden; border-radius: 24px; background: var(--rose); }
.hero-image img { width: 100%; height: auto; aspect-ratio: 1.24; object-fit: cover; object-position: 42% 43%; filter: brightness(1.1) saturate(.93); }
.hero-sticker { display: grid; place-items: center; position: absolute; top: -1rem; right: -.75rem; width: 4.8rem; height: 4.8rem; background: var(--rose); color: #963765; border: 4px solid #fff; border-radius: 50%; transform: rotate(12deg); }
.hero-sticker .icon { width: 2.2rem; height: 2.2rem; }
.hero-sparkle { position: absolute; bottom: 1.7rem; left: -.9rem; color: #f5c948; -webkit-text-stroke: 1px #fff; font-size: 3.5rem; line-height: 1; }
.portrait-caption { padding: .45rem .55rem .2rem; }
.portrait-caption a { display: flex; align-items: center; gap: .45rem; justify-content: space-between; text-decoration: none; }
.portrait-caption strong { font: 900 1.35rem var(--display); }
.portrait-caption span { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; }
.shortcut-strip { background: var(--paper); padding-top: 1.2rem; }
.shortcuts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .72rem; }
.shortcuts a { display: flex; align-items: center; padding: .85rem; gap: .65rem; text-decoration: none; border-radius: 17px; background: var(--sky); }
.shortcuts a:nth-child(2) { background: var(--rose); }
.shortcuts a:nth-child(3) { background: var(--lemon); }
.shortcuts a:nth-child(4) { background: var(--mint); }
.shortcuts a:hover { box-shadow: inset 0 0 0 2px #8ca6d4; }
.shortcuts a > .icon:first-child { color: var(--wine); background: #ffffffb3; box-sizing: content-box; border-radius: 10px; padding: .45rem; }
.shortcuts strong, .shortcuts small { display: block; }
.shortcuts strong { font-size: .84rem; }
.shortcuts small { color: var(--muted); font-size: .72rem; }
.shortcut-arrow { margin-left: auto; color: var(--wine); width: .85em; }
.record:nth-child(4n+1) { border-top: 4px solid #a9cdfb; }
.record:nth-child(4n+2) { border-top: 4px solid #f1b4d0; }
.record:nth-child(4n+3) { border-top: 4px solid #f2d875; }
.record:nth-child(4n+4) { border-top: 4px solid #a4d9b4; }
.section { padding-block: clamp(2.5rem, 5vw, 5rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.1rem; margin-bottom: 1.4rem; }
.section-no { display: inline-grid; align-items: center; padding: .17rem .39rem; background: var(--wine); color: white; margin-right: .36rem; border-radius: 2px; }
h2 { font: 700 clamp(1.65rem, 4.6vw, 3.45rem)/1.04 var(--display); letter-spacing: -.055em; margin: 0 0 .5rem; }
h3 { font: 700 1.45rem/1.16 var(--display); letter-spacing: -.035em; margin: 0 0 .5rem; }
.section-head p:not(.eyebrow) { color: var(--muted); margin: .4rem 0 0; }
.section-head > a { flex-shrink: 0; }
.map-shell { border: 1px solid #ccd9ee; background: #f5f8ff; border-radius: 19px; overflow: hidden; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .78rem 1rem; border-bottom: 1px solid #dce4f1; }
.map-toolbar .eyebrow { margin: 0; }
.map-filters { display: flex; flex-wrap: wrap; gap: .32rem; }
.map-filters button { color: #344466; border: 1px solid #ccd9ee; padding: .4rem .52rem; border-radius: 3px; background: #fffdf6; font-size: .72rem; }
.map-filters button[aria-pressed="true"] { background: var(--wine); border-color: var(--wine); color: white; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 27%); }
.map-area { position: relative; overflow: hidden; background: #e6f3ff; }
.map-svg { display: block; width: 100%; height: auto; min-height: 310px; user-select: none; touch-action: pan-y; cursor: grab; }
.map-svg.is-dragging { cursor: grabbing; }
.map-ground { fill: #e6f3ff; }
.map-exterior { fill: #dce4f2; stroke: #92a5c1; stroke-width: 1.1; }
.map-romand { fill: #ccebd6; stroke: #72a58e; stroke-width: 1.45; }
.map-mixed { fill: url(#map-mixed); stroke: #72a58e; stroke-width: 1.4; }
.map-lake { fill: #88c9f4; stroke: #68a9d8; stroke-width: 1.3; }
.lake-label { fill: #224980; font: 700 13px var(--mono); letter-spacing: .22em; pointer-events: none; }
.marker-hit { fill: transparent; }
.marker-halo { fill: #fff4bf; stroke: #285ac5; stroke-width: 1.65; }
.marker-dot { fill: #285ac5; }
.capital .marker-halo { stroke-width: 2.4; }
.capital .marker-dot { fill: #a6386a; }
.map-marker text { font: 750 17px var(--sans); fill: #202c4a; stroke: #ffffff; stroke-width: 3px; paint-order: stroke; }
.map-marker.capital text { font-size: 22px; }
.map-marker:hover .marker-halo, .map-marker:focus .marker-halo, .map-marker.is-selected .marker-halo { fill: #ffd16b; stroke-width: 3; }
.map-marker:focus-visible { outline: none; }
.map-compass { position: absolute; top: .8rem; right: .9rem; display: grid; place-items: center; font: 700 .7rem var(--mono); color: #365481; pointer-events: none; }
.map-compass span { font-size: 1.55rem; line-height: 1; }
.map-controls { display: grid; position: absolute; bottom: 1.8rem; left: .8rem; gap: .2rem; }
.map-controls button { border: 1px solid #a9bddf; background: var(--cream); color: var(--ink); width: 38px; height: 36px; border-radius: 3px; line-height: 1; font-size: 1.2rem; }
.map-controls button:hover { background: #ecf4ff; }
.map-credit { position: absolute; bottom: .2rem; right: .3rem; font-size: .65rem; margin: 0; padding: .09rem .3rem; background: #ffffffeb; color: #475577; }
.map-info { padding: clamp(.9rem, 2vw, 1.65rem); border-left: 1px solid #ccd9ee; align-self: stretch; }
.map-info .eyebrow { display: block; margin: .4rem 0 .65rem; }
.map-info h3 { font-size: 1.77rem; }
.map-description, .map-citizens, .map-links { font-size: .84rem; color: var(--muted); }
.map-citizens { font-size: .76rem; font-weight: 700; }
.map-links { list-style: none; padding: 0; }
.map-links a { display: flex; gap: .3rem; align-items: center; padding: .55rem 0; justify-content: space-between; border-top: 1px solid var(--line); text-decoration: none; }
.map-info .text-link { margin-top: .3rem; }
.news-section { background: linear-gradient(125deg,#fff1f6,#f5f1ff); border-block: 1px solid #f3e1ef; }
.story-grid, .record-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.story-card, .record, .paper { border: 1px solid var(--line); border-radius: 18px; background: var(--cream); }
.story-card { overflow: hidden; display: flex; flex-direction: column; }
.story-art img { width: 100%; aspect-ratio: 560/320; object-fit: cover; }
.story-copy { padding: 1.2rem; display: flex; flex-direction: column; flex: 1; }
.story-copy h3 a, .record h3 a { text-decoration: none; }
.story-meta { display: flex; gap: .4rem; justify-content: space-between; font-size: .64rem; }
.story-meta span { color: var(--muted); white-space: nowrap; }
.story-copy > p:not(.eyebrow), .record > p:not(.eyebrow) { color: var(--muted); margin: .35rem 0 .7rem; font-size: .9rem; }
.story-copy .text-link { margin-top: auto; }
.split-grid, .account-grid, .detail-grid { display: grid; gap: 1.25rem; align-items: start; }
.split-grid { grid-template-columns: 1fr 1fr; }
.account-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.detail-grid { grid-template-columns: minmax(0, 1fr) minmax(185px, 26%); }
.stack { display: grid; gap: 1rem; }
.event-list, .service-list, .dossier, .prose, .form-panel, .record { padding: clamp(1rem, 2.5vw, 1.65rem); }
.event-list a, .service-list a { display: flex; align-items: center; justify-content: space-between; gap: .85rem; border-top: 1px solid var(--line); padding: .75rem 0; text-decoration: none; }
.event-list time { color: var(--wine); font: 700 .75rem var(--mono); white-space: nowrap; }
.event-list a span, .service-list a span { flex: 1; }
.event-list small, .service-list small { display: block; color: var(--muted); }
.page-intro { padding: clamp(2rem, 5vw, 4.5rem) 0; background: linear-gradient(110deg, var(--sky), #f6ecff 75%, var(--rose)); border-top: 1px solid #dce9fc; border-bottom: 1px solid #dce9fc; }
.page-intro h1 { font: 850 clamp(2.5rem, 6.2vw, 5rem)/1.02 var(--display); letter-spacing: -.07em; margin: .65rem 0 .6rem; text-wrap: balance; }
.lede { font-size: clamp(1rem, 2.5vw, 1.32rem); color: #455879; margin: .7rem 0; max-width: 60ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; color: var(--muted); font-size: .79rem; margin-bottom: 1.25rem; }
.government-profile { display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; }
.government-profile img { height: 100%; min-height: 340px; width: 100%; object-fit: cover; object-position: 42% center; }
.government-profile > div { padding: clamp(1.3rem, 4vw, 3rem); }
blockquote { margin: 1rem 0; padding-left: .8rem; border-left: 3px solid #df87aa; font-family: var(--display); font-size: 1.15rem; }
.record { position: relative; overflow-wrap: anywhere; }
.emblem { color: var(--wine); display: inline-grid; place-items: center; font-size: 1.25rem; width: 2rem; height: 2rem; margin: .1rem 0 .55rem; background: #fae1ed; border-radius: 3px; }
.detail-art { max-height: 270px; width: 100%; object-fit: cover; border-radius: 4px; }
.dossier a { margin: .2rem 0; display: flex; }
.prose > p, .prose li, .prose dd { max-width: 76ch; }
.prose h2, .form-panel h2 { margin-top: 1.25rem; font-size: clamp(1.42rem, 3vw, 2.35rem); }
.prose .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .record { padding: 1rem; }
.fact-list { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr; gap: .45rem 1rem; }
.fact-list dt { font-weight: 700; }
.fact-list dd { margin: 0; overflow-wrap: anywhere; }
.price { color: var(--wine) !important; font-weight: 850; }
.callout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; margin-bottom: 1rem; }
.pill { display: inline-block; background: #eaf0ff; padding: .38rem .6rem; border-radius: 4px; font-size: .8rem; color: var(--wine); font-weight: 750; }
.notice, .empty { background: #fff4cb; border: 1px solid #e8d596; border-left: 4px solid #bd872a; padding: .72rem 1rem; border-radius: 3px; }
.wrap.notice { margin-block: 1rem; }
.subnote { color: var(--muted); font-size: .83rem; }
.video { background: var(--ink); width: 100%; border-radius: 5px; margin-bottom: .65rem; }
.radio-player { display: grid; grid-template-columns: minmax(135px, 30%) 1fr; overflow: hidden; }
.radio-art { display: grid; place-items: center; color: var(--gold); background: repeating-linear-gradient(125deg,#3555a0,#3555a0 3px,#435fa9 3px,#435fa9 8px); min-height: 240px; }
.radio-art .icon { width: clamp(4rem, 12vw, 10rem); height: auto; }
.radio-copy { padding: clamp(1rem, 3vw, 2rem); }
.radio-copy audio { display: block; width: 100%; max-width: 480px; margin: 1rem 0; }
form { display: grid; gap: .82rem; max-width: 50rem; }
form .button { justify-self: start; }
form label, .radio-copy label { display: grid; gap: .35rem; font-weight: 700; font-size: .9rem; }
input:not([type=checkbox]), textarea, select {
  width: 100%; min-width: 0; border: 1px solid #a9bddf; background: #ffffff; color: var(--ink);
  border-radius: 4px; padding: .56rem .67rem; font-weight: 450; min-height: 42px;
}
textarea { resize: vertical; }
.check { display: flex; align-items: start; gap: .55rem; }
.check input { width: 1.05rem; height: 1.05rem; margin-top: .2rem; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.form-panel { max-width: 800px; }
.form-panel h2:first-child { margin-top: 0; }
.form-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; font-size: .85rem; }
.comment, .participation, .report, details { margin: 1rem 0; }
.comment, .participation { border-top: 1px solid var(--line); padding-top: .9rem; }
.comment small { margin-left: .6rem; color: var(--muted); }
.participation form + form, .report form { margin-top: 1rem; }
summary { cursor: pointer; font-weight: 750; color: var(--wine); }
.admin-grid { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 1rem; align-items: start; }
.admin-nav { display: grid; gap: .3rem; padding: .85rem; }
.admin-nav a { padding: .2rem .5rem; text-decoration: none; }
.admin-nav a[aria-current] { background: #eaf0ff; font-weight: 750; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 440px; }
.table-scroll { overflow: auto; }
.admin-table :is(th,td) { text-align: left; padding: .55rem .45rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.admin-table .button { min-height: 34px; padding: .25rem .5rem; }
.footer { background: #253669; color: #f4f6ff; border-top: 4px solid #f8add2; padding-top: 2.2rem; }
.footer .brand, .footer .brand strong span { color: #f4f6ff; }
.footer .eyebrow { color: #ffdf86; }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3,1fr); gap: 1rem; }
.footer-grid p:not(.eyebrow) { font-size: .85rem; color: #e6eaff; }
.footer-grid > div:not(:first-child) a { display: block; margin: .33rem 0; font-size: .85rem; }
.footer a:hover { color: #ffdf86; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; border-top: 1px solid #596b9e; padding-block: 1rem; margin-top: 1.7rem; font-size: .73rem; color: #dbe3ff; }
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 56px); }
  .masthead-inner { gap: .85rem; }
  .shortcuts a { padding-inline: .65rem; gap: .55rem; }
  .shortcut-arrow { display: none; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .masthead-inner { min-height: 68px; position: relative; flex-wrap: wrap; padding-block: .55rem; gap: .4rem; }
  .head-tools { margin-left: auto; }
  .head-tools .button { display: none; }
  .brand img { width: 34px; height: 40px; }
  .brand strong { font-size: 1.35rem; }
  .js .menu-toggle { display: inline-flex !important; min-height: 38px; order: 1; padding: .3rem .55rem; }
  .main-nav { order: 2; width: 100%; flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
  .js .main-nav:not(.is-open) { display: none; }
  .main-nav .nav-mobile { display: block !important; }
  .bulletin-inner { gap: .48rem; min-height: 40px; }
  .bulletin-inner strong { font-size: .6rem; }
  .bulletin-inner p { padding-left: .45rem; font-size: .72rem; line-height: 1.23; }
  .bulletin-inner a { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 1.85rem; padding-block: 2.2rem 2.5rem; }
  .hero h1 { font-size: clamp(3.5rem, 14vw, 5.8rem); }
  .hero-description { margin-bottom: 1rem; }
  .hero-portrait { width: min(100% - 12px, 470px); justify-self: center; }
  .hero-image img { aspect-ratio: 1.48; }
  .hero-sticker { width: 3.6rem; height: 3.6rem; }
  .hero-sticker .icon { width: 1.7rem; height: 1.7rem; }
  .hero .button { padding-inline: .72rem; min-height: 44px; font-size: .78rem; gap: .35rem; }
  .shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .section-head { align-items: start; flex-direction: column; }
  .map-toolbar { align-items: start; flex-direction: column; }
  .map-grid { grid-template-columns: 1fr; }
  .map-info { border: 0; border-top: 1px solid #ccd9ee; }
  .map-svg { min-height: auto; }
  .map-controls { display: flex; bottom: .85rem; left: .4rem; }
  .map-controls button { width: 34px; height: 32px; }
  .map-marker text { font-size: 24px; stroke-width: 5px; }
  .map-marker.capital text { font-size: 28px; }
  .story-grid, .record-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
  .split-grid, .account-grid, .detail-grid, .government-profile, .admin-grid { grid-template-columns: 1fr; }
  .government-profile img { min-height: 230px; max-height: 430px; }
  .admin-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .story-grid, .record-grid, .prose .record-grid, .field-grid { grid-template-columns: 1fr; }
  .story-art img { aspect-ratio: 2 / 1; }
  .callout { align-items: start; flex-direction: column; }
  .radio-player { grid-template-columns: 1fr; }
  .radio-art { min-height: 110px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.broadcast-card { overflow: hidden; }
.broadcast-poster { display: block; position: relative; }
.broadcast-poster img { width: 100%; height: 220px; object-fit: cover; object-position: 43% 38%; filter: sepia(.25); }
.broadcast-poster span { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border: 1px solid var(--gold); background: var(--deep); color: var(--gold); border-radius: 50%; }
.broadcast-poster:hover span { background: var(--wine); }
.broadcast-card > div { padding: 1rem; }

.consent-dialog {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: clamp(1.2rem, 4vw, 2rem);
  background: var(--cream);
  color: var(--ink);
  border: 1px solid #99acd7;
  border-radius: 6px;
  box-shadow: 0 12px 40px #25366940;
}
.consent-dialog::backdrop { background: #25366980; }
.consent-dialog h2 { font-size: clamp(1.55rem, 5vw, 2.2rem); }
.consent-actions { margin-top: 1rem; }
.consent-actions .button { flex: 1 1 7rem; }
.consent-settings {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: .2em;
  font-size: .85rem;
}
.consent-settings:hover { color: #ffdf86; }

.citizen-auth { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); max-width: 58rem; }
.citizen-banner {
  background: radial-gradient(ellipse at top right, #7895ed, transparent 70%), #324b9d;
  color: #fffdf6;
}
.citizen-banner { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 6px 0 0 6px; }
.citizen-banner img { margin-bottom: 1.5rem; }
.citizen-banner .eyebrow { color: #ffe08a; }
.citizen-banner-title, .citizen-auth h1 { font-family: var(--display); font-weight: 700; line-height: .98; letter-spacing: -.045em; }
.citizen-banner-title { font-size: clamp(2rem, 4.5vw, 3.5rem); margin: .5rem 0 1rem; }
.citizen-banner a { display: inline-flex; align-items: center; gap: .4rem; color: #ffe08a; }
.citizen-auth-panel { padding: clamp(1.35rem, 4vw, 3rem); border-radius: 0 6px 6px 0; }
.citizen-auth h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: .5rem 0; }
.citizen-auth .lede { margin-bottom: 1.5rem; }
.citizen-auth form .subnote { margin: 0; }
@media (max-width: 690px) {
  .citizen-auth { grid-template-columns: 1fr; }
  .citizen-banner { display: none; }
  .citizen-auth-panel { border-radius: 6px; }
}

.admin-header { background: linear-gradient(110deg,var(--sky),var(--rose)); padding-block: 2rem; }
.admin-header .eyebrow { display: flex; align-items: center; gap: .5rem; }
.admin-header h1 { font: 850 clamp(2.4rem,6vw,4.8rem)/1 var(--display); letter-spacing: -.07em; margin: .45rem 0 1rem; }
.admin-main { min-width: 0; }
.admin-grid { padding-block: 1.5rem 4rem; }
.admin-nav { gap: .2rem; }
.admin-nav .eyebrow { grid-column: 1 / -1; margin: .7rem .5rem .2rem; }
.admin-nav a { border-radius: 10px; padding: .45rem .6rem; line-height: 1.22; }
.admin-nav a:hover { background: var(--sky); }
.admin-nav a[aria-current] { background: var(--sky); color: #244ca5; }
.admin-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.admin-heading h2 { margin: 0; }
.admin-heading p { margin: .25rem 0 0; color: var(--muted); }
.admin-filter { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; align-items: end; margin-bottom: 1.15rem; max-width: none; }
.admin-filter .button { min-height: 42px; }
.admin-table :is(th,td) { padding: .75rem .55rem; }
.admin-table th { background: #f1f6ff; color: #334c84; font-size: .85rem; }
.admin-table .actions { gap: .4rem; }
.admin-table .button { white-space: nowrap; font-size: .76rem; }
.admin-table small { color: var(--muted); }
.status-draft { color: #6d4b0e; background: var(--lemon); }
.status-published { color: #285d3e; background: var(--mint); }
.status-archived { color: #803857; background: var(--rose); }
.admin-pages { margin-top: 1rem; }
.admin-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin: 1rem 0; }
.admin-stats div { padding: .8rem; border-radius: 12px; background: var(--sky); }
.admin-stats div:nth-child(4n+2) { background: var(--rose); }
.admin-stats div:nth-child(4n+3) { background: var(--lemon); }
.admin-stats div:nth-child(4n+4) { background: var(--mint); }
.admin-stats dt { font-size: .8rem; font-weight: 750; }
.admin-stats dd { margin: .1rem 0 0; font: 850 2rem var(--display); }
@media (max-width: 520px) {
  .admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-filter { grid-template-columns: 1fr; gap: .55rem; }
}

.cat-welcome, .cat-passport-stage {
  background: url('/assets/img/pattes.svg') right top / 190px 190px repeat, linear-gradient(122deg,#edf5ff 12%,#f1ebff 51%,#fff0f5);
  padding-block: clamp(2rem, 5.5vw, 5.5rem);
}
.cat-welcome-inner, .cat-account-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(1.6rem, 5vw, 5rem); }
.cat-welcome-copy, .cat-account-head > div { min-width: 0; }
.cat-tag { display: inline-flex; align-items: center; gap: .45rem; background: var(--lemon); padding: .45rem .8rem; border-radius: 999px; color: #594128; }
.cat-welcome h1, .cat-account-head h1, .cat-passport h1 {
  margin: .45rem 0 .75rem; font: 900 clamp(2.7rem, 6.4vw, 6.5rem)/.98 var(--display);
  letter-spacing: -.075em; overflow-wrap: anywhere;
}
.cat-welcome h1 span { color: var(--wine); }
.cat-welcome-copy > p:not(.eyebrow), .cat-account-head > div > p:not(.eyebrow) { color: #3d4f76; font-size: clamp(1rem,2vw,1.2rem); max-width: 36ch; }
.cat-ambassador { position: relative; background: #fff; margin: 0; padding: .6rem; border-radius: 30px; box-shadow: 0 19px 45px #4b57982b; transform: rotate(1.8deg); }
.cat-ambassador > img { width: 100%; aspect-ratio: 1.33; object-fit: cover; object-position: 43% 43%; border-radius: 24px; }
.cat-ambassador figcaption { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .3rem 1rem; padding: .75rem .6rem .4rem; }
.cat-ambassador strong { font: 900 2rem/1 var(--display); }
.cat-ambassador .eyebrow { margin-bottom: .25rem; }
.cat-stamp { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 4.7rem; height: 4.7rem;
  border: 3px solid #fff; border-radius: 50%; color: #87345e; background: var(--rose); box-shadow: 0 4px 18px #63205f26; transform: rotate(14deg); pointer-events: none; }
.cat-stamp .icon { width: 2.35rem; height: 2.35rem; }
.cat-ambassador .cat-stamp { top: -.8rem; right: -.7rem; }
.cat-stamp-small { width: 3.15rem; height: 3.15rem; }
.cat-stamp-small .icon { width: 1.6rem; height: 1.6rem; }
.cat-register > .eyebrow, .cat-tile .eyebrow, .cat-passport-details .eyebrow { display: flex; align-items: center; gap: .4rem; }
.cat-register .lede { margin-bottom: 1.6rem; }
.cat-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(.75rem,2.4vw,1.6rem); }
.cat-tile { position: relative; padding: .5rem; border: 1px solid #d9e3f5; border-radius: 22px; background: #fff; box-shadow: 0 8px 25px #364e7511; min-width: 0; }
.cat-portrait { display: grid; overflow: hidden; background: var(--sky); border-radius: 16px; min-width: 0; }
.cat-portrait > :is(img, .cat-portrait-empty) { width: 100%; height: 100%; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.cat-portrait-empty { display: grid; place-items: center; background: url('/assets/img/pattes.svg') center / 150px, linear-gradient(130deg,var(--sky),var(--rose)); color: #5b56a1; }
.cat-portrait-empty > .icon { width: 28%; height: auto; }
.cat-tile:nth-child(3n+2) .cat-portrait-empty { background-color: var(--lemon); background-image: url('/assets/img/pattes.svg'), linear-gradient(130deg,var(--lemon),#fff8e2); }
.cat-tile:nth-child(3n+3) .cat-portrait-empty { background-color: var(--mint); background-image: url('/assets/img/pattes.svg'), linear-gradient(130deg,var(--mint),#ecfbff); }
.cat-tile-copy { padding: 1rem .75rem .8rem; overflow-wrap: anywhere; }
.cat-tile-copy h3 { font-size: clamp(1.3rem,2.3vw,2rem); margin-block: .3rem; }
.cat-tile-copy h3 a { text-decoration: none; }
.cat-tile-copy p:not(.eyebrow) { margin: 0 0 .7rem; color: var(--muted); }
.cat-empty { display: flex; align-items: center; gap: .85rem; background: var(--mint); color: #305943; border-radius: 18px; padding: .75rem 1.25rem; }
.cat-empty > .icon { width: 2rem; height: 2rem; }
.cat-empty p { margin: .35rem 0; }
.cat-back { display: inline-block; color: #34558f; margin-bottom: 1.1rem; font-weight: 750; }
.cat-passport { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); padding: .65rem; gap: .8rem; border: 1px solid #dce5f8; border-radius: 28px; background: #fff; box-shadow: 0 18px 42px #42559725; }
.cat-passport > .cat-portrait { border-radius: 20px; }
.cat-passport-copy { position: relative; min-width: 0; padding: clamp(1.25rem,4vw,3.5rem); border: 1px dashed #bbcaeb; border-radius: 20px; background: linear-gradient(155deg,#f4f7ff,#fff7fb); overflow-wrap: anywhere; }
.cat-passport-copy .cat-tag { margin-right: 3.75rem; }
.cat-passport h1 { font-size: clamp(2.55rem,6vw,5.6rem); color: #253f81; }
.cat-nickname { font-style: italic; color: #874367; }
.cat-profession { color: var(--muted); font-size: 1.16rem; }
.cat-facts { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 0; }
.cat-facts div { padding: .55rem .75rem; border-radius: 12px; background: var(--mint); }
.cat-facts div + div { background: var(--lemon); }
.cat-facts dt { font-size: .72rem; font-weight: 750; }
.cat-facts dd { margin: 0; }
.cat-passport-details { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cat-bio { white-space: pre-line; overflow-wrap: anywhere; }
.cat-share { background: #f0f7ff; }
.cat-account-head h1 { font-size: clamp(2.45rem,5.8vw,5.2rem); }
.cat-passport-private { grid-template-columns: minmax(0,.95fr) minmax(0,1fr); }
.cat-passport-private .cat-passport-copy { padding: 1rem; }
.cat-passport-private .eyebrow { margin-right: 2rem; }
.cat-passport-private .cat-stamp { width: 2.35rem; height: 2.35rem; top: .4rem; right: .4rem; }
.cat-passport-private .cat-stamp .icon { width: 1.1rem; height: 1.1rem; }
.cat-private-name { font: 850 clamp(1.35rem,3vw,2.6rem)/1.1 var(--display); margin: .3rem 0 .5rem; color: #263e80; }
.cat-upload { border: 2px dashed #b5c9ed; border-radius: 14px; padding: .85rem; background: #f0f6ff; }
.cat-upload > span { display: flex; gap: .45rem; align-items: center; }
.cat-upload small { color: var(--muted); }
@media (max-width: 740px) {
  .cat-welcome-inner, .cat-account-head, .cat-passport-details { grid-template-columns: 1fr; }
  .cat-welcome h1 { font-size: clamp(2.6rem, 10vw, 4rem); }
  .cat-ambassador { width: min(100% - 8px, 520px); justify-self: center; }
  .cat-stamp { width: 3.5rem; height: 3.5rem; }
  .cat-stamp .icon { width: 1.75rem; height: 1.75rem; }
  .cat-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cat-passport:not(.cat-passport-private) { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .cat-gallery { grid-template-columns: 1fr; }
  .cat-passport-private { grid-template-columns: 1fr; }
}

.ambient-controls { position: fixed; right: 1rem; bottom: max(.7rem, env(safe-area-inset-bottom)); z-index: 8; width: max-content; max-width: calc(100% - 2rem); text-align: end; }
.ambient-controls .button { box-shadow: 0 4px 14px #2b48963b; }
.ambient-controls [data-ambient-error]:empty { display: none; }
.ambient-controls [data-ambient-error] { display: block; padding: .25rem .55rem; background: var(--paper); }
.club-register-actions, .live-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem; }
.club-register-actions p { margin: 0; color: var(--muted); }
.club-inline { display: inline-flex; }
.favorite-score { margin-block: .7rem .35rem; font-weight: 750; }
.family-emblem { display: inline-flex; align-items: center; gap: .55rem; margin: .45rem 0; padding: .35rem .8rem .35rem .45rem; border-radius: 18px; background: var(--sky); color: var(--ink); font-weight: 750; overflow-wrap: anywhere; }
.family-emblem[data-palette="rose"] { background: var(--rose); }
.family-emblem[data-palette="mint"] { background: var(--mint); }
.family-emblem[data-palette="sun"] { background: var(--lemon); }
.family-emblem-mark { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; background: #fff; color: #54438b; font-size: 1.3rem; }
.duel-challenge { margin-bottom: 1.5rem; }
.duel-list, .police-feed { display: grid; gap: 1rem; }
.duel-card { border-inline-start: 5px solid #bca6ed; }
.duel-card h2 { overflow-wrap: anywhere; }
.duel-card h2 span { color: var(--muted); font-size: .72em; }
.police-feed { list-style: none; padding: 0; }
.police-feed li { padding: clamp(1.15rem,3vw,2rem); border-inline-start: 6px solid #a7c5f1; }
.police-feed li:nth-child(even) { border-inline-start-color: #eaa9c6; }
.police-feed h2 { font-size: clamp(1.25rem,2.7vw,2.15rem); margin-top: .35rem; }
.police-feed time { color: var(--muted); font-size: .83rem; }

/* Le salon de jeux et le Panthéon des coussinets */
.home-play-wrap { padding-top: clamp(1.4rem,4vw,3.4rem); }
.home-play { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: center; gap: 1.5rem; overflow: hidden; padding: clamp(1.3rem,4vw,3.5rem); border-radius: 30px; background: #382659; color: #fff2f9; }
.home-play :is(h2,.eyebrow) { color: #fff2f9; }
.home-play .eyebrow { color: #ffc7eb; }
.home-play .button, .play-header-chase .button { background: #ffe27b; border-color: #ffe27b; color: #32204e; }
.home-play-art { display: flex; align-items: center; justify-content: center; gap: .1em; min-height: 1.7em; border-radius: 50%; background: radial-gradient(ellipse, #a35e9a 0%, #633f81 45%, transparent 71%); color: #ffe27b; font-size: clamp(2rem,6vw,5.5rem); transform: rotate(-9deg); }
.home-play-art span:is(:first-child,:last-child) { font-size: .45em; }
.play-header { padding-block: clamp(2.6rem,7vw,6.4rem); background: url('/assets/img/pattes.svg') 95% 20% / 145px, linear-gradient(125deg,#ffe0f0,#f4e8ff 55%,#ddf7ec); }
.play-header .eyebrow { display: flex; align-items: center; gap: .5em; }
.play-header h1 { max-width: 15ch; font-size: clamp(3rem,8vw,7rem); }
.play-header h1 em { color: #8c2561; }
.play-header p:not(.eyebrow) { max-width: 50ch; font-size: clamp(1.05rem,2vw,1.28rem); }
.play-header-chase { background: radial-gradient(ellipse at 85% 75%,#713e82,transparent 68%), #30214f; color: #fff5fa; }
.play-header-chase :is(h1,.eyebrow) { color: #fff5fa; }
.play-header-chase h1 em { color: #ffc4e3; }
.cat-rank-link { display: inline-flex; margin: .4rem 0; padding: .38rem .75rem; border-radius: 100px; background: #ffddf0; color: #751e50; font-weight: 750; }
.cat-compliments { margin-bottom: 1rem; scroll-margin-top: 6rem; background: #fff0f8; border-color: #f6cee6; }
.compliment-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.compliment-choices button { display: inline-flex; align-items: center; gap: .35em; padding: .45rem .7rem; border-radius: 100px; border: 1px solid #e6a9ca; background: #fff; color: #782254; font: inherit; font-weight: 750; cursor: pointer; }
.compliment-choices button:hover, .compliment-choices button[aria-pressed="true"] { background: #8b2a65; color: #fff; }
.compliment-choices span { padding-inline: .3em; background: #ffdfef; color: #782254; border-radius: 50%; }
.rank-grid, .play-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: clamp(1rem,4vw,3rem); align-items: start; }
.rank-list { padding: 0; display: grid; gap: .55rem; list-style: none; }
.rank-list li { display: grid; grid-template-columns: 2rem 3rem minmax(0,1fr) auto; gap: .7rem; align-items: center; min-width: 0; padding: .6rem; border-radius: 18px; background: #f4edff; }
.rank-list li:nth-child(2n) { background: #e8f9f0; }
.rank-list li small { display: block; }
.rank-list li a { font-weight: 800; overflow-wrap: anywhere; }
.rank-position { text-align: center; font-weight: 900; color: #693a8d; }
.rank-list .cat-portrait { border-radius: 12px; }
.rank-tiers { background: #fff4d5; }
.rank-tiers dl > div { padding-block: .5rem; border-bottom: 1px solid #eddcad; }
.rank-tiers dt { font-weight: 800; }
.rank-tiers dd { margin: 0; }
.chase-game { scroll-margin-top: 6rem; padding: clamp(.9rem,3vw,1.9rem); border-radius: 28px; background: #f0e8ff; }
.chase-game canvas { display: block; width: 100%; height: auto; border-radius: 18px; background: #322a66; }
.chase-hud { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin-bottom: .6rem; }
.chase-hud span { padding: .28rem .65rem; border-radius: 100px; background: #fff; color: #463071; }
.chase-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin-top: .7rem; }
.chase-controls .button:disabled { opacity: .55; }
.chase-result { margin: .55rem 0 0; text-align: center; font-weight: 800; }
.chase-result:empty { display: none; }
.chase-dispatch { padding: clamp(1rem,3vw,2rem); border-radius: 28px; background: #e0f7eb; }
.chase-dispatch a { display: flex; justify-content: space-between; gap: .6rem; padding-block: .7rem; border-bottom: 1px solid #a7ddc2; font-weight: 750; }
.chase-dispatch h2 { font-size: clamp(1.65rem,3vw,2.45rem); }
.chase-clips { padding-top: 0; }
.clips-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.clip-card { display: flex; align-items: center; gap: 1rem; padding: clamp(1rem,3vw,2rem); border-radius: 23px; background: #ffe2f0; color: #48223b; text-decoration: none; }
.clip-card:nth-child(2) { background: #dceaff; color: #263f70; }
.clip-card strong, .clip-card small { display: block; }
.clip-card:hover strong { text-decoration: underline; }
.clip-play { display: grid; place-items: center; flex: 0 0 2.8rem; height: 2.8rem; border-radius: 50%; background: #fff; }
@media (max-width: 720px) {
  .rank-grid, .play-grid, .clips-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .home-play { grid-template-columns: 1fr; }
  .home-play-art { display: none; }
}