/* ---------------------------------------------------------------------- *
 * The two typefaces, self-hosted.
 *
 * app/layout.tsx loads Inter and Cormorant Garamond with next/font, but this
 * stylesheet is read by /ministries, /groups, /events, /about and /privacy,
 * which are static files in public/ served by a rewrite (next.config.mjs).
 * They never pass through the React layout, so until these rules existed the
 * pages rendered in Georgia and system-ui — the intended faces had never
 * reached a reader.
 *
 * Self-hosted rather than linked from Google, so the pages keep contacting
 * exactly one host. Files are the woff2 latin and latin-ext subsets pulled
 * from Google Fonts; both faces are variable, so one file per subset serves
 * every weight, and unicode-range means latin-ext is fetched only when a
 * character outside latin is actually drawn.
 *
 * Both families are licensed under the SIL Open Font License 1.1, which
 * permits this redistribution. See public/fonts/LICENSE.txt.
 * ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  /* The monochrome emoji face, cut to the thirteen codepoints the drifting
     band draws (4 KB). Monochrome, so the glyphs take `fill` like any other
     text instead of arriving as colour bitmaps. */
  font-family: 'Noto Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-emoji.woff2') format('woff2');
  unicode-range: U+2699, U+FE0F, U+1F331, U+1F34E, U+1F3B5, U+1F3DB, U+1F3E0, U+1F464-1F465, U+1F4BB, U+1F527, U+1F5BC, U+1F6E0;
}

/* ---------------------------------------------------------------------- *
 * The shared surface of Catholic Spot.
 *
 * Ministries, Groups and Events & Places all ask a person the same kind of
 * question in the same kind of card, and each page used to hold its own copy
 * of the rules for it. Three copies drift: four title sizes, three card
 * paddings, two shapes of search box, rows of examples that differed by two
 * pixels of padding. This file is the one copy. A page keeps only what is
 * genuinely its own.
 *
 * Loaded by /about, /ministries, /groups and /events.
 * ---------------------------------------------------------------------- */

:root {
  --h1: clamp(30px, 7.5vw, 52px);
  --gap-nav: 28px;
  --gap-title: 28px;   /* title  → band */
  --gap-band: 34px;    /* band   → the card you type into */
  --band-h: 132px;
  --band-gap: 44px;
  /* The question is reserved two lines and no more. Every wording on every
     page was measured at 320, 375 and 430: below ~508px the size has to track
     the width or the longest question takes a third line and pushes the box
     down. Above that it holds at 30. */
  --ask-title: clamp(18px, calc(6.2vw - 1.5px), 30px);
  /* The focus ring is not decoration; it is the only thing that says where a
     keyboard is standing, so it has to clear 3:1 against what it is drawn on.
     The brand gold #c89b3c measures 2.56:1 on a white card (e2e run,
     2026-09-08, L9.7), which fails. The ring is drawn on two grounds, not one
     — the white card inside, the page's own paper under the name and the
     tabs — so it is taken down until it clears both: 3.87:1 on #fff and
     3.15:1 on #efe7da. It is a separate token from --gold so that darkening
     the ring does not darken the mic button, the chips, or anywhere else the
     brand colour is a fill. */
  --ring: #a67a24;
}

/* --- what a keyboard can see ---------------------------------------- *
 * Every page carries its own `:focus-visible { outline: 2px solid var(--gold) }`.
 * This rule is one step more specific, so the readable ring lands on all five
 * static pages from here without touching any of them. Outline only: an
 * outline is painted outside the box and takes no space, so nothing moves.
 * --------------------------------------------------------------------- */
:is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Off-screen for the eye, present for everything else. One class, so a page
   can add the half of a sentence only a screen reader needs — "opens in a new
   tab" — without a second copy of the recipe. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* The first thing a keyboard reaches: a way past the name, the corner and the
   three tabs, straight to the box. Off-screen until it is focused, and
   absolutely positioned in both states, so it never takes a pixel from the
   layout. */
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: 10px 16px; border-radius: 0 0 12px 0;
  background: #fff; color: var(--navy, #1e2a4a);
  border: 1px solid var(--ring); border-top: 0; border-left: 0;
  font: 600 14px/1.4 Inter, system-ui, sans-serif; text-decoration: none;
}
.skiplink:focus { left: 0; }
/* What the skip link lands on takes focus without becoming a tab stop, so it
   must not then be ringed as though it were a control of its own. */
[tabindex="-1"]:focus { outline: 0; }

@media (max-width: 560px) {
  :root { --gap-nav: 18px; --gap-title: 20px; --gap-band: 26px; --band-h: 104px; --band-gap: 28px; }
}

/* --- the name, above everything ------------------------------------- */
.brand {
  display: block; text-align: center; padding: 16px 20px 0;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 4vw, 38px);
  font-weight: 600; letter-spacing: .01em; color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--navy); }
/* The o of Spot is a magnifying glass: the lens is the letter, the handle
   runs off its lower right. The span is empty, so its bottom margin edge is
   its baseline - which is where the o's own baseline sits - and everything is
   sized in em, so the glass grows with the name at every breakpoint. The
   drawing overhangs the span on purpose; the t after it keeps its place. */
.brand-lens {
  /* The width is the o's own advance in Cormorant Garamond (.486em), so the t
     lands exactly where it always did. The glass is drawn a shade larger than
     the letter and centred on its ink; the handle overhangs to the right, but
     below the baseline, where the t has nothing. */
  display: inline-block; position: relative;
  width: .486em; height: .4em; vertical-align: baseline;
  /* A little air either side, so the glass reads as its own mark rather than
     a letter jammed between the p and the t. */
  margin: 0 .07em;
  color: var(--gold);
}
/* The letter itself is still in the markup, just not on screen: the link
   still reads and copies as Catholic Spot. Taken out of flow, so the span
   stays empty and keeps the baseline the glass is aligned to. */
.brand-lens i {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.brand-lens svg {
  position: absolute; left: -.07em; bottom: -.28em;
  width: .78em; height: .78em; overflow: visible;
}
/* One line under the name saying who this is for (founder, 2026-09-08). */
.brand-tag {
  /* One row, at every width. The line is 297px of Inter at 16px, so it fits
     inside the viewport less its padding whenever the size is under
     (width - 24) / 297 * 16 - that is 18.9px on a 375px phone and 15.9px on a
     320px one. 4.6vw stays under that line all the way down to about 270px,
     and the 16px ceiling is the size it has always been on a desktop.

     The 78px of side padding this used to carry below 400px is gone: it was
     there to clear the two corner icons, and the caption now begins below
     them (53.5px against their 48px), so it was only stealing the room the
     line needs. */
  margin: 4px 0 0; padding: 0 12px; text-align: center;
  font-size: clamp(12px, 4.6vw, 16px); line-height: 1.4;
  white-space: nowrap; color: var(--soft);
}
/* The account button's vertical position is computed in account.js, not set
   here: it depends on the name's rendered height, which moves with the width,
   the font size and whether the webfont has arrived. Two `body #acctCorner`
   rules used to sit at this spot; they never applied, because the inline
   `top` account.js writes always wins, so they are gone rather than left to
   look load-bearing. */
.topnav { padding-top: 10px; }
@media (max-width: 560px) { .brand { padding-top: 12px; } }
/* At the narrow end the name shares its line with About on one side and the
   account button on the other, so it gives way rather than crowding them. */
@media (max-width: 400px) { .brand { font-size: 25px; padding-left: 78px; padding-right: 56px; } }

/* About is a page about the site rather than a place to search, so it sits
   out of the row of three and holds the top-left corner, opposite the account
   button. Absolute, so it takes no height from the rhythm below it. */
.corner {
  position: absolute; top: 16px; left: 20px; z-index: 30;
  font-size: 14px; color: var(--soft); text-decoration: none;
  padding: 6px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.corner:hover { color: var(--ink); background: rgba(31, 42, 68, .05); }
.corner[aria-current] {
  color: var(--ink); font-weight: 600;
  background: rgba(200, 155, 60, .16); border-color: rgba(200, 155, 60, .45);
}
@media (max-width: 560px) { .corner { top: 12px; left: 12px; padding: 5px 10px; } }
/* As an icon it mirrors the account button on the right: the same round
   white disc, the same size, an "i" instead of a letter. */
/* The `top` here is only what a reader sees before account.js runs: the script
   centres this icon on the name's own line, together with the account button
   opposite, and its inline `top` wins. Left as a sensible starting place, not
   as the number that decides where the icon sits. */
.corner.icon {
  width: 34px; height: 34px; padding: 0; top: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: transparent; border-color: rgba(31, 42, 68, .16);
  color: var(--ink);
}
.corner.icon svg { width: 19px; height: 19px; }
.corner.icon:hover { background: rgba(31, 42, 68, .05); border-color: var(--gold); }
.corner.icon[aria-current] { background: rgba(200, 155, 60, .16); border-color: rgba(200, 155, 60, .45); }
@media (max-width: 560px) { .corner.icon { top: 12px; left: 12px; padding: 0; } }
@media (max-width: 380px) { .corner { padding: 4px 8px; font-size: 13px; } }

/* --- header, title -------------------------------------------------- */
.topnav {
  padding: 20px 20px 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; font-size: 14px;
  margin-bottom: var(--gap-nav);
}
.topnav a {
  color: var(--soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.topnav a svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.topnav a[aria-current] svg { opacity: 1; color: var(--gold); }
.topnav a:hover { color: var(--ink); background: rgba(31, 42, 68, .05); }
/* The page you are on is a chip, not an underline: it reads as a place you
   are standing rather than a link you have already used. */
.topnav a[aria-current] {
  color: var(--ink); font-weight: 600;
  background: rgba(200, 155, 60, .16); border-color: rgba(200, 155, 60, .45);
}
/* A nav that wraps to two lines reads as two navs. At the narrow end the
   chips give up padding first, and the longest label drops its tail, so the
   three of them still hold one line on a 320px phone. */
@media (max-width: 430px) {
  .topnav { padding: 16px 10px 0; gap: 5px; font-size: 13px; }
  .topnav a { padding: 6px 9px; gap: 5px; }
  .topnav a svg { width: 15px; height: 15px; }
  .topnav .wide { display: none; }
}
@media (max-width: 340px) {
  .topnav { gap: 3px; }
  .topnav a { padding: 5px 7px; gap: 4px; font-size: 12.5px; }
}
h1 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--h1);
  font-weight: 600; letter-spacing: -1px; margin: 4px 0 0;
}
.cross { color: var(--gold); font-size: .62em; vertical-align: middle; margin-right: .12em; }

/* --- the line at the top of the card ----------------------------------------- */
.pagecap {
  /* Inside the card, above the question: the line that says what this page
     finds, quiet enough that the question below it is still the loudest
     thing in the card. Same 14px as a nav link, same colour. */
  text-align: center; margin: 0 0 10px;
  font-size: 14px; line-height: 1.4; color: var(--soft);
}
/* On a phone the longest of the three captions takes a second line. The space
   is reserved on all three so the box below sits at the same height whichever
   page you are on. */
@media (max-width: 430px) { .pagecap { min-height: 2.8em; } }

/* --- the band of people --------------------------------------------- */
/* Under the drawings, above the card: the same right-to-left drift, at the
   same speed. Two identical runs side by side, so sliding the track by exactly
   half its width loops with no seam.

   The durations are not copied from the drawings, they are derived, and each
   row gets its own because each carries different words and so a run of a
   different width. The drawings cover one run of 2510px in 90s, which is
   27.9px a second; the top row's run is 1338px and the bottom's 1462px, so
   48.0s and 52.4s. Below 560px the runs come to 1218px and 1334px while the
   drawings slow to 21.1px a second, giving 57.8s and 63.3s.

   Both numbers are text-width dependent: change a title, the padding or the
   gap and the run changes, so re-measure .nrun and divide again. */
.nband {
  overflow: hidden; margin: 14px auto 0; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nband { display: flex; flex-direction: column; gap: 10px; }
.ntrk { display: flex; width: max-content; }
/* Each row's own duration, because each carries different words and so a run
   of a different width. Both are derived below from the drawings' speed. */
.row-top    { animation: gmarch 48.0s linear infinite; }
/* A little behind the row above, so the two rows' chips fall between each
   other rather than stacking into columns. A negative delay is a phase shift:
   the row starts partway through its own loop, which staggers it without
   moving it out of step. */
.row-bottom { animation: gmarch 52.4s linear infinite; animation-delay: -2.2s; }
.nrun { display: flex; align-items: center; gap: 10px; padding-right: 10px; }
/* .nchip, not .chip: search.html already had a .chip - the clickable prompt
   buttons, which its own stylesheet styles and whose click handler is bound by
   document.querySelectorAll('.chip'). Sharing the name meant these drifting
   labels took that styling instead of this, and were wired to run a search
   when clicked, while staying aria-hidden. A name of their own settles both.

   The same cream and gold edge the example requests wear inside the card, as a
   pill rather than a row - near enough to belong to the page, far enough that
   a drifting label is not mistaken for a button that can be pressed. */
.nchip {
  flex: none; white-space: nowrap;
  background: #faf6ee; border: 1px solid rgba(200, 155, 60, .28); border-radius: 999px;
  padding: 9px 16px; font-size: 15px; line-height: 1; color: var(--ink);
}
@media (max-width: 560px) {
  .nchip { padding: 8px 14px; font-size: 14px; }
  .nrun { gap: 8px; padding-right: 8px; }
  .nband { gap: 8px; }
  /* Smaller chips, shorter runs, and the drawings down to 21.1px a second:
     1218px/21.1 and 1334px/21.1. */
  .row-top    { animation-duration: 57.8s; }
  .row-bottom { animation-duration: 63.3s; }
}
@media (prefers-reduced-motion: reduce) { .row-top, .row-bottom { animation: none; } }
/* Like the drawings, it is the welcome: once there is an answer on the page
   the room belongs to the answer. */
body.searched .nband { display: none; }
@media (prefers-reduced-motion: reduce) { .ntrk { animation: none; } }

/* --- the band of drawings ------------------------------------------- */
.gband {
  overflow: hidden; margin: var(--gap-title) auto 0; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* The band is the welcome. Once a person has asked something, the room
   belongs to the answer, so it steps aside on every page that has one. The
   name and the three tabs stay. */
body.searched .gband { display: none; }
.gtrk { display: flex; width: max-content; animation: gmarch 90s linear infinite; }
.grun { display: flex; align-items: flex-end; gap: var(--band-gap); padding-right: var(--band-gap); }
.grun img { height: var(--band-h); width: auto; display: block; }
@keyframes gmarch { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gtrk { animation: none; } }

/* --- the card a person types into ----------------------------------- */
.askcard {
  background: #fff; border-radius: 28px; padding: 20px 22px 22px;
  margin-top: var(--gap-band); box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  border: 1px solid rgba(31, 42, 68, .08); text-align: left; min-width: 0;
}
.ask-title { transition: opacity .42s ease;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--ask-title);
  font-weight: 700; line-height: 1.2; margin: 0 0 14px; text-align: center;
  /* The rotating question is the page's one real heading, so on /groups it is
     an h1. Every other property in this block already outranks the `h1` rule
     above — a class beats an element — but letter-spacing is set there and
     nowhere here, and at this size -1px closes the words up. Named, so
     promoting the question on another page cannot inherit it either. */
  letter-spacing: normal;
  /* Two lines, always. The question rotates and every page words it
     differently, so the space it occupies is reserved rather than measured:
     otherwise the box below sits at a different height on each page, and
     moves as the wording turns. */
  min-height: 2.4em;
  display: flex; align-items: center; justify-content: center;
}
.ask-title.turning { opacity: 0; }

/* --- the box itself ------------------------------------------------- */
.searchbox {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  margin: 0; padding: 6px 8px 6px 16px; background: #fff;
  border: 1px solid rgba(31, 42, 68, .14); border-radius: 999px;
}
/* The box grows downward as a person types, so the icon and the button hold
   the top line rather than drifting to the middle of a tall box. The height of
   an empty box is the button's height, and it is the same on all three pages. */
.searchbox { align-items: flex-start; }
.searchbox > svg { flex: none; color: var(--gold); margin-top: 13px; }
.qwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.searchbox textarea, .searchbox input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: 17px; line-height: 1.45; color: var(--ink); padding: 9px 0; border-radius: 0;
  display: block; margin: 0; min-height: 44px; max-height: 40vh; overflow-y: auto;
}
/* The words in the empty box are the instruction for using it, so they are
   read, not glanced at. #8a8f9c measured 3.24:1 on white (L9.7); this is the
   same cool grey at 4.88:1, still plainly lighter than typed text. */
.searchbox textarea::placeholder, .searchbox input::placeholder { color: #6b7180; }
/* The placeholder must never change the shape of the box. It is a hint, not
   content: on a narrow phone "Type or use the mic.." wrapped to a second
   line, which pushed the field to two rows and raised a scrollbar beside it,
   so the control looked taller and busier before a word was typed. While the
   field is empty the text is held to one line and the overflow is clipped —
   losing the tail of a hint costs nothing. The moment a person types,
   :placeholder-shown stops matching and the box wraps and grows exactly as it
   did, because their own words must all stay in view. */
.searchbox textarea:placeholder-shown,
.searchbox input:placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The one control a person types into was the one stop with no ring: the
   `outline: 0` above beat every page's `:focus-visible` rule (L9.2/L2.24).
   The ring goes round the whole pill rather than the bare textarea, because
   the pill is what a reader sees as the box — the field, the glyph and the
   two buttons are one control to the eye. Where :has() is understood the ring
   is held back until the field itself holds focus, so a focused mic button
   shows its own ring and not two. */
.searchbox:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
@supports selector(:has(*)) {
  .searchbox:focus-within { outline: 0; }
  .searchbox:has(textarea:focus-visible), .searchbox:has(input:focus-visible) {
    outline: 2px solid var(--ring); outline-offset: 2px;
  }
}
/* The field inside keeps no ring of its own, in either arrangement. */
.searchbox textarea:focus-visible, .searchbox input:focus-visible { outline: 0; }
.searchbox button {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.searchbox button:hover { transform: scale(1.04); }
.searchbox button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.searchbox .ic { display: none; }
/* Two things a person can do with the box, both offered: speak it, or search
   what is typed. The microphone steps aside as soon as there are words —
   by then it is not what they want. */
.searchbox .btn-mic { background: var(--gold); }
.searchbox .btn-go { background: var(--navy); }
.searchbox .btn-mic .ic-stop { display: none; }
.searchbox[data-mode="rec"] .btn-mic { background: #a5322f; }
.searchbox[data-mode="rec"] .btn-mic .ic-mic { display: none; }
.searchbox[data-mode="rec"] .btn-mic .ic-stop { display: block; }
.searchbox[data-mode="go"] .btn-mic { display: none; }

/* --- example requests ----------------------------------------------- */
.ex-label {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
}
.ex-label::before, .ex-label::after { content: ''; flex: 1; border-top: 1px solid rgba(31, 42, 68, .14); }
.ex {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 10px;
  padding: 14px 16px; text-align: left; background: #faf6ee;
  border: 1px solid rgba(200, 155, 60, .28); border-radius: 14px;
  color: var(--ink); font: inherit; cursor: pointer; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.ex:hover { border-color: var(--gold); box-shadow: 0 4px 12px rgba(200, 155, 60, .18); }
.ex:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ex-ic { flex: none; width: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.ex-ic svg { width: 28px; height: 28px; }
.ex-q { flex: 1; min-width: 0; font-size: 16px; line-height: 1.35; }
.ex-q b { font-weight: 700; }
.ex-ch { flex: none; color: var(--ink); display: flex; }
.ex-ch svg { width: 18px; height: 18px; }
.ex-more {
  justify-content: flex-start; background: rgba(200, 155, 60, .10);
  margin-bottom: 0; font-weight: 600; font-size: 15px;
}
.ex-more .ex-plus { flex: none; display: flex; color: var(--gold); }
.ex-more .ex-plus svg { width: 22px; height: 22px; }
.ex-more .ex-ch { margin-left: auto; }
@media (max-width: 480px) {
  .ex { gap: 12px; padding: 12px 14px; }
  .ex-ic { width: 28px; }
  .ex-ic svg { width: 26px; height: 26px; }
  .ex-q { font-size: 15px; }
}