/**
 * Comedy Republic — Citizens: the stylesheet for page-citizens.php.
 *
 * functions.php loads it when cr_design_page() is 'citizens', then components.css (the :root tokens
 * and shared components) and design-brand.css (Brett's page-by-page calls). Gift vouchers reuses some
 * ct-* classes with a sheet of its own (design-gift-vouchers.css), which this file doesn't touch.
 *
 * It began as the port of docs/design/canvas/Citizens.dc.html. In the design-system restyle (8 Oct
 * 2026) the port was audited in Chrome, rule by rule: every rule the page no longer reaches, and
 * every declaration a later rule always overrides, at every width and state, came out (NOTES.md,
 * "Citizens restyle", the CSS audit). What's left is on the tokens. So this is no longer a port:
 * tests/visual/port-css.py --check and loop.sh's diff against the canvas don't apply to it.
 *
 * Sections, in cascade order:
 * - Base: the page frame, the chrome's layout (header, footer, menu, search panel) and the Citizens
 *   blocks' layout, at .crd (components.css and design-brand.css restyle much of it on top);
 * - Chrome additions: skip link, [hidden] parts, no-JS fallbacks, touch hit areas;
 * - Citizens additions: the Questions toggle before and without JS, scroll margins;
 * - Citizens restyle: Brett's list of 8 Oct, at .crd.crd.crd.
 * The only sizes off the type scale are the restyle's two page values (--ct-fs-h2, --ct-fs-price) and
 * the header tagline's 7.5px on phones (a shared chrome size; see Base, phones).
 */

/* ==== Base ==== */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cr-cream)}
:where(.crd) a{color:inherit}
:where(.crd) a:hover{color:inherit}

/* The page: cream with the grain at 85% (home's ground), ink type. --green stays for components.css's
   "available" dot (.cr-status--ok i); --wrap and --gut are the page width and side gutter. Type is the
   browser's 16px. */
.crd{--green:var(--cr-green);--wrap:1320px;--gut:clamp(20px,4.4vw,64px);position:relative;background-color:var(--cr-cream);background-image:linear-gradient(color-mix(in srgb,var(--cr-cream) 85%,transparent),color-mix(in srgb,var(--cr-cream) 85%,transparent)),url('../design/grain.webp');background-size:auto,220px 220px;background-blend-mode:normal,multiply;color:var(--cr-ink);font-family:var(--cr-font-body);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
:where(.crd) *,:where(.crd) *::before,:where(.crd) *::after{box-sizing:border-box}
:where(.crd) img{display:block;max-width:100%;height:auto}
:where(.crd) h1,:where(.crd) h2,:where(.crd) h3,:where(.crd) p,:where(.crd) address,:where(.crd) dl,:where(.crd) dd,:where(.crd) ul{margin:0}

:where(.crd) button,:where(.crd) input{font:inherit;color:inherit}
.crd :focus-visible{outline:3px solid var(--cr-ink);outline-offset:3px;box-shadow:0 0 0 3px var(--cr-marigold)}
/* On the dark and green surfaces the ring is marigold with a black halo. */
.crd .cr-footer :focus-visible,.crd .ct-pass :focus-visible,.crd .ct-cta__band :focus-visible{outline-color:var(--cr-marigold);box-shadow:0 0 0 3px var(--cr-black)}
.crd .cr-wrap{width:min(var(--wrap),calc(100% - 2 * var(--gut)));margin-inline:auto}
.crd .cr-grain{display:none}
.crd .cr-ico{flex:none;width:18px;height:18px}
.crd .cr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crd .cr-display{font-family:var(--cr-font-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.crd .cr-script{font-family:var(--cr-font-script);font-weight:400;line-height:1}

/* Header (black: Citizens restyle, Frame). */
.crd .cr-header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;color:var(--cr-cream)}
.crd .cr-header__inner{display:flex;align-items:center;gap:20px;min-height:88px}
.crd .cr-burger{display:none;flex:none;width:46px;height:46px;padding:0;border:0;background:none;cursor:pointer;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
.crd .cr-burger span{display:block;width:24px;height:2px;border-radius:var(--cr-radius-pill);background:var(--cr-cream)}
.crd .cr-burger span:nth-child(2){width:17px}
.crd .cr-burger--x{align-items:center}
.crd .cr-brand{display:flex;flex-direction:column;text-decoration:none}

.crd .cr-tagline{font-weight:900;line-height:1;text-transform:uppercase;white-space:nowrap}
.crd .cr-nav{display:flex;align-items:center;margin-left:auto}
.crd .cr-nav a{text-decoration:none;transition:background .2s}

.crd .cr-search{flex:none;width:48px;height:48px;margin-left:6px;padding:0;display:grid;place-items:center;font:inherit;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}

.crd .cr-whatson{display:inline-flex;align-items:center;font-weight:900;letter-spacing:.03em;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s}

.crd .cr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .2s,color .2s}

.crd .cr-btn--block{width:100%}

.crd .pg-hero{position:relative}
.crd .pg-kicker{transform:rotate(-4deg);transform-origin:left bottom}

.crd .pg-tbc{color:var(--cr-ink-muted);font-style:italic}

.crd .pg-acc__btn{width:100%;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 2px;border:0;background:none;font-family:var(--cr-font-display);font-weight:800;line-height:1.1;text-transform:uppercase;text-align:left;cursor:pointer}
.crd .pg-acc__sign{flex:none;border-radius:var(--cr-radius-pill);display:grid;place-items:center;transition:background .2s,color .2s,transform .25s}
.crd .pg-acc__sign .cr-ico{width:15px;height:15px}

.crd .pg-acc__item.is-open .pg-acc__sign{transform:rotate(45deg)}
.crd .pg-acc__body{padding:0 52px 22px 2px;line-height:1.6}

/* Citizens blocks */
.crd .ct-top{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"intro side" "get side";column-gap:72px;align-items:start}
.crd .ct-intro{grid-area:intro}
.crd .ct-side{grid-area:side;display:flex;flex-direction:column;gap:22px}
.crd .ct-get{grid-area:get}
.crd .ct-lede{max-width:28em}

.crd .ct-pass{position:relative;display:flex;overflow:hidden}
.crd .ct-pass__spine{flex:none;width:20px;background:var(--cr-pass-spine);box-shadow:inset -2px 0 0 color-mix(in srgb,var(--cr-black) 25%,transparent)}
.crd .ct-pass__inner{position:relative;flex:1;padding:36px 34px 32px;text-align:center}
.crd .ct-pass__inner::before{content:'';position:absolute;inset:12px 12px 12px 10px;border:1.5px solid color-mix(in srgb,var(--cr-cream) 55%,transparent);pointer-events:none}
.crd .ct-pass__inner::after{content:'';position:absolute;inset:18px 18px 18px 16px;border:1px solid color-mix(in srgb,var(--cr-cream) 22%,transparent);pointer-events:none}
.crd .ct-pass__mono{position:relative;width:62px;margin:0 auto;filter:sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(.97)}
.crd .ct-pass__kicker{position:relative;margin-top:14px;font-weight:900;line-height:1;text-transform:uppercase}
.crd .ct-pass__price{position:relative}
.crd .ct-pass__per{position:relative}
.crd .ct-pass__btn{position:relative}

.crd .ct-receipt{filter:drop-shadow(0 22px 26px color-mix(in srgb,var(--cr-ink) 14%,transparent)) drop-shadow(0 2px 3px color-mix(in srgb,var(--cr-ink) 8%,transparent))}
.crd .ct-maths{padding:24px 26px 34px;-webkit-mask:radial-gradient(circle 8px at 11px 100%,transparent 96%,black) 0 0/22px 100% repeat-x;mask:radial-gradient(circle 8px at 11px 100%,transparent 96%,black) 0 0/22px 100% repeat-x}

.crd .ct-maths__list{margin:16px 0 0}
.crd .ct-maths__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--cr-ink-line)}
.crd .ct-maths__row dd{display:flex;align-items:baseline;gap:8px;font-weight:900;white-space:nowrap}

.crd .ct-maths__arrow{font-weight:400}
.crd .ct-maths__row--total{margin-top:6px;padding-top:14px;border-top:2px solid var(--cr-ink);border-bottom:0;font-weight:900}

.crd .ct-get__list{display:flex;flex-direction:column;margin:20px 0 0;padding:0;list-style:none;max-width:620px}
.crd .ct-get__item{display:flex}
.crd .ct-get__n{display:grid;place-items:center;font-family:var(--cr-font-display);font-weight:800}
.crd .ct-get__h{font-family:var(--cr-font-display);font-weight:800;text-transform:uppercase}

.crd .ct-saved__panel{position:relative;isolation:isolate;overflow:hidden}

.crd .ct-saved__grid{display:grid}

.crd .ct-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:40px;align-items:start}

.crd .ct-cta__band{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:44px clamp(28px,4vw,56px);color:var(--cr-cream)}
.crd .ct-cta__band::before,.crd .ct-cta__band::after{content:'';position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle,color-mix(in srgb,var(--cr-marigold) 35%,var(--cr-paper)) 0 1.7px,color-mix(in srgb,var(--cr-marigold) 50%,transparent) 2.4px,transparent 4.6px) 0 50%/18px 10px repeat-x;animation:ct-bulbs 1.4s steps(1,end) infinite}
.crd .ct-cta__band::before{top:6px}
.crd .ct-cta__band::after{bottom:6px;animation-delay:-.7s}
@keyframes ct-bulbs{0%{opacity:1}50%{opacity:.55}}
.crd .ct-cta__mono{position:absolute;z-index:-1;right:24%;top:50%;width:280px;transform:translateY(-50%);opacity:.045;pointer-events:none}

.crd .ct-cta__sub{margin-top:10px}
.crd .ct-cta__btn{flex:none;min-width:260px}

/* Footer */
.crd .cr-footer{position:relative;isolation:isolate;overflow:hidden;padding:76px 0 34px;color:var(--cr-cream)}
.crd .cr-footer__mark{position:absolute;z-index:-1;right:-70px;bottom:-120px;width:430px;opacity:.06;pointer-events:none}
.crd .cr-footer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.crd .cr-footer__logo{width:280px}
.crd .cr-footer__addr{margin-top:22px;font-style:normal;line-height:1.65;color:color-mix(in srgb,var(--cr-cream) 78%,transparent)}
.crd .cr-footer__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px}
.crd .cr-footer__links a{width:fit-content;padding:6px 0;line-height:1.35;color:var(--cr-cream)}
.crd .cr-footer__links a:hover{color:var(--cr-cream)}
.crd .cr-ftform{display:flex;flex-direction:column;gap:10px}
.crd .cr-ftform__label{color:color-mix(in srgb,var(--cr-cream) 72%,transparent)}
.crd .cr-ftform__row{display:flex;gap:8px}
.crd .cr-ftform__input{flex:1;min-width:0;padding:0 16px;border:1.5px solid var(--cr-cream-line);background:color-mix(in srgb,var(--cr-cream) 5%,transparent);color:var(--cr-cream)}
.crd .cr-ftform__input::placeholder{color:color-mix(in srgb,var(--cr-cream) 50%,transparent)}
.crd .cr-ftform__input[aria-invalid="true"]{border-color:var(--cr-marigold)}
.crd .cr-ftform__input:focus{outline:none;border-color:var(--cr-marigold);box-shadow:0 0 0 4px color-mix(in srgb,var(--cr-marigold) 20%,transparent)}
.crd .cr-ftform__btn{flex:none;cursor:pointer;transition:transform .15s,box-shadow .15s}

.crd .cr-ftform__note{color:color-mix(in srgb,var(--cr-cream) 72%,transparent)}
.crd .cr-ftform__done{display:flex;align-items:center;gap:10px;min-height:52px;font-family:var(--cr-font-display);font-weight:800;text-transform:uppercase}
.crd .cr-footer__base{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:64px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--cr-cream) 14%,transparent);color:color-mix(in srgb,var(--cr-cream) 62%,transparent)}
.crd .cr-footer__legal{display:flex;gap:22px}
.crd .cr-footer__legal a{padding:6px 0}
.crd .cr-footer__legal a:hover{color:var(--cr-cream)}

/* Menu */
.crd .cr-menu{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:color-mix(in srgb,var(--cr-black) 50%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.crd .cr-menu__panel{background:var(--cr-cream);padding-bottom:30px;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--cr-black) 50%,transparent);animation:cr-drop .35s cubic-bezier(.2,.75,.2,1)}
@keyframes cr-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.crd .cr-menu__bar{gap:10px;min-height:70px}
.crd .cr-menu__nav{display:flex;flex-direction:column;margin-top:6px}
.crd .cr-menu__item{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:24px 0 21px;border-bottom:1px solid var(--cr-ink-line);text-decoration:none}
.crd .cr-menu__label{flex:none;line-height:.95;white-space:nowrap}
.crd .cr-menu__desc{flex:1;min-width:0;line-height:1.3;color:var(--cr-ink-muted);text-align:right}
.crd .cr-menu__cta{width:100%;margin-top:26px}

@media (max-width:899px){
  .crd .pg-acc__btn{min-height:56px}
  .crd .pg-acc__body{padding:0 40px 18px 2px}
  .crd .cr-footer{padding:52px 0 28px}
  .crd .cr-footer__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .crd .cr-footer__logo{width:228px}
  .crd .cr-footer__addr{margin-top:16px}
  .crd .cr-footer__links{gap:0 18px}
  .crd .cr-footer__base{flex-direction:column;align-items:flex-start;gap:10px;margin-top:40px}
  .crd .cr-footer__mark{width:260px;right:-60px;bottom:-60px}
}
@media (prefers-reduced-motion:reduce){
  .crd .cr-menu__panel{animation:none}
  .crd .cr-btn,.crd .pg-acc__sign{transition:none}
}

@media (max-width:1199px){
  .crd .ct-top{grid-template-columns:minmax(0,1fr) 400px;column-gap:48px}
}
@media (max-width:899px){
  .crd .ct-top{grid-template-columns:minmax(0,1fr)}
  .crd .ct-pass__inner{padding:28px 22px 24px}
  .crd .ct-pass__mono{width:50px}
  .crd .ct-maths{padding:20px 20px 30px}
  .crd .ct-faq{grid-template-columns:minmax(0,1fr);gap:16px}
  .crd .ct-cta__band{flex-direction:column;align-items:stretch;text-align:center;gap:20px;padding:38px 22px 34px}
  .crd .ct-cta__btn{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .crd .ct-cta__band::before,.crd .ct-cta__band::after{animation:none}
}

/* Global nav: the search panel, the compact header from 960px, the burger under it, the menu's search
   and sign-up. */
.crd .cr-whatson__x{display:none}
.crd .cr-menu{overflow-y:auto}
.crd .cr-sp{animation:cr-drop .3s cubic-bezier(.2,.75,.2,1)}

.crd .cr-sp__field{position:relative;display:block;flex:1;min-width:0}
.crd .cr-sp__ico{position:absolute;top:50%;pointer-events:none}
.crd .cr-sp__input{display:block;width:100%;font:inherit;-webkit-appearance:none;appearance:none}

.crd .cr-sp__input::-webkit-search-cancel-button,.crd .cr-ms__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}

.crd .cr-sp__close{flex:none;align-items:center;gap:8px;transition:background .2s,color .2s}

.crd .cr-sp__all{align-items:center;gap:6px}

.crd .cr-sp__art{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center}

.crd .cr-ms__field{position:relative;display:block}

.crd .cr-ms__input{display:block;width:100%;font:inherit;-webkit-appearance:none;appearance:none}

.crd .cr-msign{display:flex;flex-direction:column;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--cr-ink-line)}
.crd .cr-msign__label{line-height:1;color:var(--cr-ink-muted)}
.crd .cr-msign__row{display:flex;gap:8px}
.crd .cr-msign__input{flex:1;min-width:0;padding:0 16px;border:1.5px solid color-mix(in srgb,var(--cr-ink) 40%,transparent);background:var(--cr-paper);color:var(--cr-ink);font:inherit}
.crd .cr-msign__input::placeholder{color:var(--cr-ink-muted)}
.crd .cr-msign__input:focus{outline:none;border-color:var(--cr-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--cr-marigold) 50%,transparent)}
.crd .cr-msign__input[aria-invalid="true"]{border-color:var(--cr-oxblood)}
.crd .cr-msign__btn{flex:none;cursor:pointer}

.crd .cr-msign__done{margin-top:24px;padding-top:20px;border-top:1px solid var(--cr-ink-line);font-family:var(--cr-font-display);font-weight:800;text-transform:uppercase;line-height:1}
@media (min-width:960px){
  .crd .cr-header__inner{transition:min-height .25s ease}
  .crd .cr-brand__logo{transition:width .25s ease}
  .crd .cr-header.is-compact .cr-header__inner{min-height:66px}
  .crd .cr-header.is-compact .cr-tagline{display:none}
  .crd .cr-header.is-compact .cr-whatson__x{display:inline}
}
@media (max-width:959px){
  .crd .cr-header__inner{min-height:70px;gap:10px}
  .crd .cr-burger{display:flex}
  .crd .cr-brand{align-items:center;gap:5px}
  .crd .cr-brand__logo{width:158px}
  /* The tagline's phone size, 7.5px, is a shared chrome size off the type scale (design-system.md:
     "Sizes still outside the scale"; components.css owns its 8.5px from 900px). It stays until the
     shared header takes it. */
  .crd .cr-tagline{padding-left:0;font-size:7.5px}
  .crd .cr-nav,.crd .cr-search,.crd .cr-sp{display:none}
  .crd .cr-whatson{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .crd .cr-sp,.crd .cr-header__inner,.crd .cr-brand__logo{animation:none;transition:none}
}

/* The menu's bar: a full-bleed band (black: components.css) behind the burger, the wordmark and What's
   on, cream type. */
.crd .cr-menu__bar{position:relative;isolation:isolate;border-bottom:0;color:var(--cr-cream)}
.crd .cr-menu__bar::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw)}
.crd .cr-header :focus-visible,.crd .cr-menu__bar :focus-visible{outline-color:var(--cr-marigold);box-shadow:0 0 0 3px var(--cr-black)}

/* ==== Chrome additions (every inner page's sheet has this block; here on the tokens) ==== */

/* Skip link: first thing in <body>, outside .crd, off-screen (no layout) until focused. */
.cr-skip{position:absolute;top:0;left:-9999px;z-index:200}
.cr-skip:focus{left:16px;top:16px;padding:12px 18px;font:900 var(--cr-fs-btn)/1.2 var(--cr-font-body);text-decoration:none}

/* The global nav's parts that wait in the page ([hidden]) for design.js: the menu dialog, the header
   search panel, the menu's search results. */
.crd .cr-menu[hidden],.crd .cr-sp[hidden],.crd .cr-ms__results[hidden]{display:none}

/* Without JS the header's search is a link to What's on's search box (the <noscript> one, a flex
   item of the header row like the button): the button (it opens the panel) needs JS. */
html:not(.cr-js) .crd button.cr-search{display:none}
html:not(.cr-js) .crd .cr-header__inner>noscript{display:contents}

/* Mailing-list forms (footer.php, the menu dialog): the error note and the done state are in the
   page, hidden; design.js shows them. A known subscriber (html.cr-subscribed, set before paint by the
   head script) sees the done states. A staff platform embed (Site settings → Email form embed)
   replaces the form. */
.crd .cr-ftform[hidden]{display:none}
html.cr-subscribed .crd [data-cr-ftform],html.cr-subscribed .crd [data-cr-msign]{display:none}
html.cr-subscribed .crd [data-cr-ftform-done]{display:flex}
html.cr-subscribed .crd [data-cr-msign-done]{display:block}

/* Focus and anchor jumps clear the sticky header (89px; 71px under 960px; the compact header, 67px,
   keeps the same padding so in-page jumps land where the designs' do). No effect at rest. */
html{scroll-padding-top:89px}

/* Without JS (no html.cr-js): under 960px the nav the burger would open shows as a row under the
   header. */
@media (max-width:959px){
  html{scroll-padding-top:71px}
  html:not(.cr-js) .crd .cr-header__inner{flex-wrap:wrap}
  html:not(.cr-js) .crd .cr-burger{visibility:hidden}
  html:not(.cr-js) .crd .cr-nav{display:flex;flex-wrap:wrap;order:1;flex-basis:100%;margin:-6px 0 8px -11px}
}

/* Under 360px What's on is its calendar icon (components.css); it anchors its touch area. */
@media (max-width:359px){
  .crd .cr-whatson{position:relative}
}

/* 360–389px: the header row and the open menu's bar tighten their gaps, and under 375px the wordmark
   narrows, so the burger, the wordmark and What's on fit one row. */
@media (min-width:360px) and (max-width:389px){
  .crd .cr-header__inner,.crd .cr-menu__bar{gap:8px}
}
@media (min-width:360px) and (max-width:374px){
  .crd .cr-brand__logo{width:148px}
}

/* Touch screens (pointer: coarse): the chrome's small controls get hit areas of at least 44px — an
   invisible ::after around each — without changing what is drawn (the canvas is drawn for a mouse,
   so nothing changes there): footer and legal links (33px tall in the design), the header wordmark
   (30px), What's on (42px on phones), the nav links (43px at 960–1099px). */
@media (pointer:coarse){
  .crd .cr-footer__links a,.crd .cr-footer__legal a,.crd .cr-brand,.crd .cr-whatson,.crd .cr-nav a{position:relative}
  .crd .cr-footer__links a::after,.crd .cr-footer__legal a::after{content:'';position:absolute;inset:-6px -6px}
  .crd .cr-brand::after{content:'';position:absolute;inset:-8px 0}
  .crd .cr-whatson::after,.crd .cr-nav a::after{content:'';position:absolute;inset:-2px 0}
}

/* ==== Citizens additions ==== */

/* Questions: every answer is in the page, so without JS they all show. With JS on (html.cr-js, set
   before paint) a closed item's answer is hidden until assets/js/citizens.js runs; it then takes closed
   answers out of the DOM and toggles .is-open + aria-expanded, as the design's toggle does. */
html.cr-js .crd .ct-faq .pg-acc__item:not(.is-open) .pg-acc__body{display:none}
/* Without JS every answer shows and the questions do nothing: no open / closed sign on them. */
html:not(.cr-js) .crd .ct-faq .pg-acc__sign{visibility:hidden}

/* The membership card's kicker ("COMEDY REPUBLIC · CITIZEN") wraps to two lines under 360px: the
   lines get room between them. */
@media (max-width:359px){
  .crd .ct-pass__kicker{line-height:1.45}
}

/* A link to an answer lands its question a little under the sticky header (design.js / citizens.js
   scroll to the item). */
.crd .ct-faq .pg-acc__item{scroll-margin-top:12px}

/* No smooth jumps (skip link, links to an answer: #ct-faq-2) under reduced motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ==== Citizens restyle (Brett's list, 8 Oct 2026: design system phase 2) ====
   The page moves onto the system (design-system.md; tokens and shared components in components.css).
   Citizens is the one green page: --cr-green-deep for the bands, --cr-green for the pass and for every
   Citizens price on cream and paper. Marigold is "Become a Citizen" (and the cards' ticket stubs);
   oxblood is the script eyebrow only.
   Every rule is prefixed .crd.crd.crd: design-brand.css loads after this sheet and styles the ct-*
   blocks at .crd.crd, so these take one class more to lead. Not a body class: a Citizens page picked
   by its slug, with no template assigned, prints no page-template-* class, and this sheet still loads
   there (cr_design_page()). Two page values: --ct-fs-h2,
   the section headings (32px; 24px at 768px and under, where the type tokens step down), and
   --ct-fs-price, the pass's price (72px). Both are Brett's numbers; neither is on the type scale. */
.crd{--ct-fs-h2:32px;--ct-fs-price:72px}
@media (max-width:768px){
  .crd{--ct-fs-h2:24px}
}

/* -- Frame. The header is black, as on home (the felt green goes; the wordmark, tagline and nav stay
   cream). Citizens, the current page, keeps the system's marigold and is underlined like a text link
   (1px, 4px under its words), as What's on underlines Shows. */
.crd.crd.crd .cr-header{background:var(--cr-black)}
.crd.crd.crd .cr-nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}

/* One rhythm: the blocks on the cream (the top grid, the green band, Questions, the black band) sit one
   section pad apart, each taking it above itself; the last one takes it below too. Inside the top grid,
   What you get starts one pad under the intro. */
.crd.crd.crd :is(.ct-top,.ct-saved,.ct-faq,.ct-cta){margin-top:0;padding-top:var(--cr-section-pad);padding-bottom:0}
.crd.crd.crd .ct-cta{padding-bottom:var(--cr-section-pad)}
.crd.crd.crd .ct-get{margin-top:0;padding-top:var(--cr-section-pad)}

/* -- Intro. The script eyebrow in oxblood on the cream (as New here's and Bar & Food's on home), the
   title at the hero size, the lede 18px muted; the gaps are New here's. */
.crd.crd.crd .ct-intro .pg-kicker{font-size:var(--cr-fs-script);color:var(--cr-oxblood)}
.crd.crd.crd .ct-intro .pg-title{margin-top:14px;font-size:var(--cr-fs-hero);line-height:.95;letter-spacing:.01em;color:var(--cr-ink)}
.crd.crd.crd .ct-intro .pg-lede{margin-top:20px;font-size:var(--cr-fs-lede);line-height:1.6;color:var(--cr-ink-muted)}

/* -- What you get. Its heading is a muted label (Brett, 8 Oct: every 11px label on cream is ink-muted;
   brass on cream is 2.6:1). Each benefit is a .cr-card (paper, the card corner and
   shadow, no line), 12px apart, its number a Guess Sans numeral left of the line, as New here's stats:
   no disc. The numerals are decoration (aria-hidden; the list is the order), so brass on paper is
   allowed; they take --cr-brass-text when components.css has it (home's darker stat brass), else
   brass. A placeholder benefit (Placeholder ticked) is a dashed outline with muted type. */
.crd.crd.crd .ct-get__title{font-family:var(--cr-font-body);font-weight:900;font-size:var(--cr-fs-label);line-height:1;letter-spacing:var(--cr-label-track);text-transform:uppercase;color:var(--cr-ink-muted)}
.crd.crd.crd .ct-get__list{gap:12px;margin-top:16px}
.crd.crd.crd .ct-get__item{align-items:center;gap:18px;padding:18px 22px;border-radius:var(--cr-radius-lg);background:var(--cr-paper);color:var(--cr-ink);box-shadow:var(--cr-shadow-card)}
.crd.crd.crd .ct-get__n{flex:none;width:1em;font-size:var(--cr-fs-h3);line-height:1;text-align:center;color:var(--cr-brass-text,var(--cr-brass))}
.crd.crd.crd .ct-get__h{font-size:var(--cr-fs-h4);line-height:1.1;letter-spacing:.01em;color:var(--cr-ink)}
.crd.crd.crd .ct-get__p{margin-top:4px;font-size:var(--cr-fs-body);line-height:1.5;color:var(--cr-ink-muted)}
.crd.crd.crd .ct-get__item.is-tbc{border:1px dashed var(--cr-ink-line);background:transparent;box-shadow:none}
.crd.crd.crd .ct-get__item.is-tbc :is(.ct-get__n,.ct-get__h){color:var(--cr-ink-muted)}

/* -- The pass: the brand asset, kept (spine, gold M, double frame). The logo green, flat (the felt goes),
   the card corner, its offset step in the pass spine green and the card shadow; a 1px cream line at
   35% just inside its edge, so it holds on the cream (outside the edge, as on home's green band, a
   cream line on cream wouldn't show). Its frames are cream, as home's pass's (marigold is for buying).
   All its type is full cream (Brett, 8 Oct: 70% cream on the green was 3.2:1; full cream is 4.7:1): the
   kicker an 11px label, the price 72px Guess Sans, "per year" 14px Lato 400. */
.crd.crd.crd .ct-pass{border-radius:var(--cr-radius-lg);background:var(--cr-green);color:var(--cr-cream);box-shadow:-6px 6px 0 var(--cr-pass-spine),var(--cr-shadow-card);outline:1px solid color-mix(in srgb,var(--cr-cream) 35%,transparent);outline-offset:-1px}
.crd.crd.crd .ct-pass__inner::before{border-color:color-mix(in srgb,var(--cr-cream) 55%,transparent)}
.crd.crd.crd .ct-pass__inner::after{border-color:color-mix(in srgb,var(--cr-cream) 22%,transparent)}
.crd.crd.crd .ct-pass__kicker{font-size:var(--cr-fs-label);letter-spacing:var(--cr-label-track);color:var(--cr-cream)}
.crd.crd.crd .ct-pass__price{margin-top:16px;font-size:var(--ct-fs-price);line-height:.9;color:var(--cr-cream)}
.crd.crd.crd .ct-pass__per{margin-top:10px;font-size:var(--cr-fs-price);color:var(--cr-cream)}
.crd.crd.crd .ct-pass__btn{margin-top:24px}

/* "Become a Citizen" (the pass and the black band): the primary, as home's Join Citizens: marigold,
   ink, Lato 900 15px, 54px, 0 22px, the control corner, no shadow; the marigold hover. */
.crd.crd.crd :is(.ct-pass__btn,.ct-cta__btn){height:var(--cr-btn-h);padding:0 22px;border-radius:var(--cr-radius-sm);background:var(--cr-marigold);color:var(--cr-ink);font-weight:900;font-size:var(--cr-fs-btn);letter-spacing:.02em}
.crd.crd.crd :is(.ct-pass__btn,.ct-cta__btn):hover{background:var(--cr-marigold-hover);color:var(--cr-ink)}

/* -- The maths: flat paper, the perforated foot kept (Base's mask), card corners on top
   (design-brand.css). Rows: the label body size, muted; the full price muted with a 1px strike, the
   arrow muted; the Citizens price, Free and the total in the Citizens green, Lato 900 at the price
   size. The total's label is a muted label. */
.crd.crd.crd .ct-maths{background:var(--cr-paper)}
.crd.crd.crd .ct-maths__title{font-size:var(--cr-fs-h3);line-height:1;letter-spacing:.01em;color:var(--cr-ink)}
.crd.crd.crd .ct-maths__row{border-bottom-color:var(--cr-ink-line);font-size:var(--cr-fs-body);color:var(--cr-ink-muted)}
.crd.crd.crd .ct-maths__row dd{font-size:var(--cr-fs-price)}
.crd.crd.crd .ct-maths__row s{font-weight:700;color:var(--cr-ink-muted);text-decoration-color:currentColor;text-decoration-thickness:1px}
.crd.crd.crd .ct-maths__arrow{color:var(--cr-ink-muted)}
.crd.crd.crd .ct-maths__row dd b{font-weight:900;color:var(--cr-green)}
.crd.crd.crd .ct-maths__row--total{border-top-color:var(--cr-ink)}
.crd.crd.crd .ct-maths__row--total dt{font-weight:900;font-size:var(--cr-fs-label);letter-spacing:var(--cr-label-track);text-transform:uppercase;color:var(--cr-ink-muted)}

/* -- You'd have saved on these: the deep green, flat, with the film grain, as home's Citizens band; the
   card corner, the section pad inside (the side gutter on narrower screens, so the cards keep their
   width), no inner frame or shadow; the heading 32px cream. Heading beside the cards from 1340px
   (the cards are 354px there), above them below that. The cards sit side by side wherever two fit at
   300px or more (from about 768px), else one to a row; never wider than 420px, Most booked's card. */
.crd.crd.crd .ct-saved__panel{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start;padding:var(--cr-section-pad) var(--gut);border-radius:var(--cr-radius-lg);background:var(--cr-green-deep) url('../design/grain.webp') 0 0/220px 220px;background-blend-mode:multiply;color:var(--cr-cream)}
.crd.crd.crd .ct-saved__title{font-size:var(--ct-fs-h2);line-height:1;letter-spacing:.01em;color:var(--cr-cream)}
.crd.crd.crd .ct-saved__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;max-width:calc(2 * 420px + 16px)}
@media (min-width:1340px){
  .crd.crd.crd .ct-saved__panel{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;padding-inline:var(--cr-section-pad)}
}
@media (max-width:899px){
  .crd.crd.crd .ct-saved__panel{gap:32px}
}

/* The cards are home's Most booked card (.cr-popcard; template-parts/home-most-booked.php), its look
   at rest in the desktop deck, without the rank or the drag stamps: paper, the card corner and shadow;
   the photo at 4:3 (a venue photo for a season show, as on home); one muted label row (LINE-UP ·
   AVAILABLE); the title at h3; the schedule muted; the price (ink, its Citizens part green) beside a
   marigold Tickets stub. Its rules live in design-home.css (home only), so they're restated here from
   home's computed values, on the tokens (NOTES.md asks for a shared card). Two differences: the
   subtitle is body size (home's 15px is off the scale), and the foot wraps, so on a 240px card (320px
   screens) the stub drops under the price instead of running off the card. No photo: the show's
   initials, cream on black (design-system.md: never the coloured tile). */
.crd.crd.crd .ct-saved .cr-popcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--cr-radius-lg);background:var(--cr-paper);color:var(--cr-ink);box-shadow:var(--cr-shadow-card)}
.crd.crd.crd .ct-saved .cr-popart{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4 / 3;background-color:var(--cr-black-raised);background-size:cover;background-position:center 35%;background-repeat:no-repeat;color:var(--cr-cream)}
.crd.crd.crd .ct-saved .ct-popart--ini{display:grid;place-items:center;background-color:var(--cr-black)}
.crd.crd.crd .ct-saved .ct-popart__ini{font-size:var(--cr-fs-h2);line-height:1;letter-spacing:.01em}
.crd.crd.crd .ct-saved .cr-popcard__body{padding:20px 22px 0}
.crd.crd.crd .ct-saved .cr-popcard__tags{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.crd.crd.crd .ct-saved :is(.cr-cattag,.cr-status){display:inline-flex;align-items:center;font-family:var(--cr-font-body);font-weight:900;font-size:var(--cr-fs-label);line-height:1;letter-spacing:var(--cr-label-track);text-transform:uppercase;color:var(--cr-ink-muted)}
.crd.crd.crd .ct-saved .cr-status i{display:none}
.crd.crd.crd .ct-saved .cr-cattag + .cr-status::before{content:'\00B7';margin:0 .55em;letter-spacing:0}
.crd.crd.crd .ct-saved .cr-popcard__title{margin-top:10px;font-size:var(--cr-fs-h3);line-height:1;letter-spacing:.01em;color:var(--cr-ink);overflow-wrap:anywhere}
.crd.crd.crd .ct-saved .cr-popcard__sub{margin-top:5px;font-style:italic;font-size:var(--cr-fs-body);line-height:1.3}
.crd.crd.crd .ct-saved .cr-popcard__dates{margin-top:6px;font-size:var(--cr-fs-body);line-height:1.55;color:var(--cr-ink-muted)}
.crd.crd.crd .ct-saved .cr-popcard__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:18px 22px 22px}
.crd.crd.crd .ct-saved .cr-price{margin:0;font-weight:900;font-size:var(--cr-fs-price);line-height:1.3;letter-spacing:.01em;white-space:nowrap;color:var(--cr-ink)}
.crd.crd.crd .ct-saved .cr-price__cit{font-weight:700;color:var(--cr-green)}
.crd.crd.crd .ct-saved .cr-tix{flex:none;display:inline-flex;text-decoration:none}
.crd.crd.crd .ct-saved .cr-tix__body{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:98px;height:var(--cr-btn-h);padding:0 22px 0 26px;border-radius:var(--cr-radius-sm);background:var(--cr-marigold);color:var(--cr-ink);font-family:var(--cr-font-body);font-weight:900;font-size:var(--cr-fs-btn);line-height:1;letter-spacing:.02em;white-space:nowrap;-webkit-mask:radial-gradient(circle 6.5px at 0 50%,transparent 96%,black) 0 0/51% 100% no-repeat,radial-gradient(circle 6.5px at 100% 50%,transparent 96%,black) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle 6.5px at 0 50%,transparent 96%,black) 0 0/51% 100% no-repeat,radial-gradient(circle 6.5px at 100% 50%,transparent 96%,black) 100% 0/51% 100% no-repeat}
.crd.crd.crd .ct-saved .cr-tix__body::before{content:'';position:absolute;left:15px;top:10px;bottom:10px;border-left:1.5px dashed color-mix(in srgb,var(--cr-ink) 40%,transparent)}
.crd.crd.crd .ct-saved .cr-tix:hover .cr-tix__body{background:var(--cr-marigold-hover)}
@media (max-width:899px){
  .crd.crd.crd .ct-saved .cr-popcard__body{padding:16px 18px 0}
  .crd.crd.crd .ct-saved .cr-popcard__foot{padding:14px 18px 18px}
  .crd.crd.crd .ct-saved .cr-tix__body{min-width:88px;padding-left:23px}
  .crd.crd.crd .ct-saved .cr-tix__body::before{left:13px}
}

/* -- Questions: the heading 32px; the questions Guess Sans at h4, ink; a 1px ink line at 16% above and
   between them; the plus in a 32px ring, ink at 40%; hover: the full ink ring and a 6% wash (the
   system's round-button hover); open: the plus turns to a cross (Base's 45deg). Answers at the
   body size, muted. */
.crd.crd.crd .ct-faq .pg-h2{font-size:var(--ct-fs-h2);line-height:1;letter-spacing:.01em;color:var(--cr-ink)}
.crd.crd.crd .ct-faq .pg-acc{border-top:1px solid var(--cr-ink-line)}
.crd.crd.crd .ct-faq .pg-acc__item{border-bottom:1px solid var(--cr-ink-line)}
.crd.crd.crd .ct-faq .pg-acc__btn{font-size:var(--cr-fs-h4);letter-spacing:.01em;color:var(--cr-ink)}
.crd.crd.crd .ct-faq .pg-acc__sign{width:32px;height:32px;border:1px solid color-mix(in srgb,var(--cr-ink) 40%,transparent);background:transparent;color:var(--cr-ink)}
.crd.crd.crd .ct-faq .pg-acc__btn:hover .pg-acc__sign{border-color:var(--cr-ink);background:color-mix(in srgb,var(--cr-ink) 6%,transparent);color:var(--cr-ink)}
.crd.crd.crd .ct-faq .pg-acc__item.is-open .pg-acc__sign{background:transparent;color:var(--cr-ink)}
.crd.crd.crd .ct-faq .pg-acc__item.is-open .pg-acc__btn:hover .pg-acc__sign{background:color-mix(in srgb,var(--cr-ink) 6%,transparent)}
.crd.crd.crd .ct-faq .pg-acc__body{font-size:var(--cr-fs-body);color:var(--cr-ink-muted)}

/* -- The black band: kept, marigold bulbs and all (black and its corner: design-brand.css), with the
   card shadow. The headline 32px cream, the line the page's 16px in cream at 70%. */
.crd.crd.crd .ct-cta__title{font-size:var(--ct-fs-h2);line-height:1;letter-spacing:.01em;color:var(--cr-cream)}
.crd.crd.crd .ct-cta__sub{color:color-mix(in srgb,var(--cr-cream) 70%,transparent)}
.crd.crd.crd .ct-cta__band{box-shadow:var(--cr-shadow-card)}

/* -- Phones and tablets (under 900px): one column, the pass first, then the intro, The maths and What
   you get, one pad apart. The side column's box steps aside (display: contents) so its pass and
   receipt take their own places in the grid; it's a plain <div>, so nothing is lost to assistive
   tech. The benefits tighten. */
@media (max-width:899px){
  .crd.crd.crd .ct-top{grid-template-areas:"pass" "intro" "maths" "get";row-gap:var(--cr-section-pad)}
  .crd.crd.crd .ct-side{display:contents}
  .crd.crd.crd .ct-pass{grid-area:pass}
  .crd.crd.crd .ct-receipt{grid-area:maths}
  .crd.crd.crd .ct-get{padding-top:0}
  .crd.crd.crd .ct-intro .pg-title{margin-top:10px}
  .crd.crd.crd .ct-intro .pg-lede{margin-top:14px}
  .crd.crd.crd .ct-get__item{gap:14px;padding:14px 16px}
  .crd.crd.crd .ct-pass__price{margin-top:14px}
  .crd.crd.crd .ct-pass__btn{margin-top:20px}
}
/* At phone widths the band stacks and centres, so its M watermark sat behind the line under the
   headline: it goes under 900px (Brett: only if it crowds at 390px). */
@media (max-width:899px){
  .crd.crd.crd .ct-cta__mono{display:none}
}