/* ==========================================================================
   Components — buttons, cards, accordions, modals, marquee, badges, forms
   ========================================================================== */

/* --- Buttons ---------------------------------------------------------- */

.ca-btn {
  display: inline-block;
  border: 0;
  border-radius: var(--ca-r-pill);
  padding: 14px 26px;
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-base);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background var(--ca-dur-fast) var(--ca-ease),
              color var(--ca-dur-fast) var(--ca-ease);
}

.ca-btn--primary {
  background: var(--ca-orange);
  color: var(--ca-cream);
}
.ca-btn--primary:hover { background: var(--ca-orange-dark); color: var(--ca-cream); }

.ca-btn--outline {
  background: none;
  color: var(--ca-ink);
  border: 2px solid var(--ca-ink);
  padding: 12px 24px;
}
.ca-btn--outline:hover { background: var(--ca-tint-hover); color: var(--ca-ink); }

.ca-btn--sm { padding: 10px 20px; font-size: 14px; }
.ca-btn--sm.ca-btn--outline { padding: 8px 18px; }
.ca-btn--block { display: block; width: 100%; }

.ca-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Cards ------------------------------------------------------------ */

.ca-card {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-lg);
  padding: var(--ca-card-pad);
  box-shadow: var(--ca-shadow-md);
}

/* Open/Closed pill. Colour comes from a data attribute set by PHP and kept
   in sync by location.js, so a cached page still shows the right state. */
.ca-status {
  flex: none;
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-xs);
  font-weight: 700;
  color: var(--ca-cream);
  padding: 6px 12px;
  border-radius: var(--ca-r-pill);
  background: var(--ca-status-closed);
}
.ca-status[data-state="open"]   { background: var(--ca-status-open); }
.ca-status[data-state="soon"]   { background: var(--ca-status-soon); }
.ca-status[data-state="closed"] { background: var(--ca-status-closed); }

/* --- Accordion (native <details>, no JS) ------------------------------- */

.ca-accordion {
  border: 1px solid var(--ca-hairline-mid);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--ca-white);
  box-shadow: var(--ca-shadow-sm);
}

/* Highlighted: the warm card Specials use (.ca-panel--accent), for a fold-away section. */
.ca-accordion--accent {
  border-color: var(--ca-orange-line);
  background: linear-gradient(180deg, var(--ca-peach), var(--ca-white));
}

.ca-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--ca-panel-pad);
  cursor: pointer;
  color: var(--ca-ink);
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(18px, 3vw, 24px);
  letter-spacing: var(--ca-tracking-tight);
  list-style: none;
}
.ca-accordion__summary::-webkit-details-marker { display: none; }
.ca-accordion__summary::marker { content: ""; }

.ca-accordion__title { display: flex; align-items: center; gap: 12px; }
.ca-accordion__title img { width: 36px; height: auto; }

/* The +/− affordance is drawn in CSS, so no icon font or JS is involved. */
.ca-accordion__sign {
  flex: none;
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ca-hairline-str);
}
.ca-accordion__sign::before,
.ca-accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 7px auto;
  height: 2px;
  background: var(--ca-orange);
  transform: translateY(-50%);
  transition: transform var(--ca-dur-fast) var(--ca-ease);
}
.ca-accordion__sign::after { transform: translateY(-50%) rotate(90deg); }
.ca-accordion[open] .ca-accordion__sign::after { transform: translateY(-50%) rotate(0deg); }

.ca-accordion__body { padding: 0 var(--ca-panel-pad) clamp(22px, 3vw, 28px); }

/* --- Review strip: the band and its label (the cards ride a carousel) --- */

.ca-marquee {
  padding-block: var(--ca-section-pad);
  background: var(--ca-sand);
  border-block: 1px solid var(--ca-hairline);
  overflow: hidden;
}

.ca-marquee__label {
  text-align: center;
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-eyebrow);
  /* Mono at this size is already emphatic; bold makes it shout. */
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-faint-warm);
  margin-bottom: 16px;
}

/* --- Carousel (inc/carousel.php) -----------------------------------------

   One for the review strip, the events rail and the store specials. The track
   holds the cards twice and slides by half its width, so the loop has no seam;
   the duration comes from PHP, worked out from one speed for them all.
   ------------------------------------------------------------------------- */

.ca-carousel {
  max-width: var(--ca-width);
  margin-inline: auto;
  overflow: hidden;
  /* Cards run off both sides; the fade says the row continues. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ca-edge-fade), #000 calc(100% - var(--ca-edge-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--ca-edge-fade), #000 calc(100% - var(--ca-edge-fade)), transparent 100%);
}

/* Full width when still, so a single card centres. */
.ca-carousel__track {
  display: flex;
  width: 100%;
  gap: var(--ca-carousel-gap, 16px);
  padding-inline: var(--ca-carousel-pad, 16px);
  padding-block: var(--ca-carousel-pad-block, 0);
  justify-content: center;
}

.ca-carousel__track > * {
  flex: none;
  /* A sliver of the next card stays visible on a phone: that says it scrolls. */
  width: min(var(--ca-carousel-card, 420px), var(--ca-carousel-max, 84vw));
}

.ca-carousel__track.is-scrolling {
  width: max-content;
  justify-content: flex-start;
  animation: ca-marquee var(--ca-carousel-duration, 60s) linear infinite;
}

/* You cannot read a card that is moving away: the pointer or keyboard on the row stops it. */
.ca-carousel:hover .ca-carousel__track,
.ca-carousel:focus-within .ca-carousel__track,
.ca-carousel.is-held .ca-carousel__track { animation-play-state: paused; }

/* Swiped or dragged sideways (site.js); up and down still scrolls the page. */
.ca-carousel:has(.is-scrolling) {
  touch-action: pan-y;
  cursor: grab;
}
.ca-carousel.is-held { cursor: grabbing; }
.ca-carousel.is-held * { user-select: none; }

@keyframes ca-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Less motion asked for: a row to swipe instead. */
@media (prefers-reduced-motion: reduce) {
  .ca-carousel__track.is-scrolling {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .ca-carousel__track > * { scroll-snap-align: start; }
}

/* Each kind's own spacing. */
.ca-carousel--events   { --ca-carousel-pad: var(--ca-gutter); --ca-carousel-max: 86vw; }
.ca-sec__parts .ca-carousel--events { --ca-carousel-pad: 0px; }
.ca-carousel--specials { --ca-carousel-pad: 0px; --ca-carousel-pad-block: 4px 10px; --ca-carousel-max: 78vw; }


.ca-stars {
  color: var(--ca-yellow);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.ca-cite {
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-sm);
  color: var(--ca-faint);
  font-style: normal;
}
.ca-modal::backdrop {
  background: var(--ca-scrim);
  backdrop-filter: blur(3px);
}

.ca-modal__title { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.ca-modal__note { color: var(--ca-muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 18px; }

.ca-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--ca-tint);
  color: var(--ca-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ca-modal__close:hover { background: var(--ca-tint-hover); }

.ca-modal__fallback {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ca-faint);
}

/* --- Forms ------------------------------------------------------------- */

.ca-input {
  width: 100%;
  background: var(--ca-cream);
  border: 1px solid rgba(20, 25, 43, 0.15);
  border-radius: var(--ca-r-pill);
  padding: 15px 22px;
  color: var(--ca-body);
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-base);
}
.ca-input::placeholder { color: var(--ca-faint); }

.ca-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.ca-chip {
  background: var(--ca-teal-tint);
  border: 1px solid var(--ca-teal-line);
  border-radius: var(--ca-r-pill);
  padding: 8px 14px;
  color: var(--ca-teal);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ca-chip:hover { background: var(--ca-teal); color: var(--ca-cream); }

/* --- Social icons ------------------------------------------------------ */

.ca-social { display: flex; gap: 8px; flex-wrap: wrap; }
.ca-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ca-social a img { width: 100%; height: 100%; object-fit: contain; }
.ca-social--lg a { width: 42px; height: 42px; }


/* A review card. (The store gallery has no edge fade on purpose: it shows one
   full photo at a time, and fading its sides looks like damage.) */
.ca-marquee__item {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  padding: 18px 24px;
  box-shadow: var(--ca-shadow-sm);
}

.ca-marquee__item p {
  color: var(--ca-body);
  font-size: 15.5px;
  margin: 0 0 12px;
  line-height: 1.5;
}

/*
 * A column with one scrolling part, rather than two elements both capped at
 * 88vh and hoping the inner one wins.
 *
 * `min-height: 0` on the scrolling child is the bit that matters: a flex item
 * defaults to `min-height: auto`, which refuses to shrink below its content —
 * so the panel grows to fit fourteen stores, is clipped by the dialog, and
 * never scrolls. It is the classic reason a modal will not scroll.
 */
.ca-modal {
  width: min(92vw, 560px);
  /* --ca-vv-h: the visible height, kept up to date by site.js while open. */
  max-height: min(calc(var(--ca-vv-h, 100vh) * 0.88), 900px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--ca-cream);
  box-shadow: var(--ca-shadow-modal);
  overflow: hidden;
}

/*
 * The column layout applies only while the dialog is open.
 *
 * `display` on `.ca-modal` itself overrides the browser's own
 * `dialog:not([open]) { display: none }` — author styles beat the user-agent
 * stylesheet whatever the specificity — so the dialog stayed on screen with no
 * way to close it. Scoping to [open] leaves the closed state to the browser.
 */
.ca-modal[open] {
  display: flex;
  flex-direction: column;
}

.ca-modal--wide { width: min(94vw, 820px); }

/*
 * The keyboard is open: sit at the top of what can still be seen, and use all
 * of it. The note and the mascot step aside to leave room for the list.
 */
.ca-modal.is-squeezed {
  margin-top: calc(var(--ca-vv-top, 0px) + 8px);
  margin-bottom: auto;
  max-height: calc(var(--ca-vv-h, 100vh) - 16px);
}
.ca-modal.is-squeezed .ca-modal__note,
.ca-modal.is-squeezed .ca-locator__mascot { display: none; }
.ca-modal.is-squeezed .ca-modal__inner { padding-block: 20px; }
.ca-modal.is-squeezed .ca-modal__title { padding-right: 40px; font-size: 19px; }

/* The page behind a dialog stays where it is. */
html.ca-modal-open { overflow: hidden; scrollbar-gutter: stable; }

.ca-modal__inner {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(24px, 5vw, 34px);
  overflow-y: auto;
  /* Reaching the end of the list should not start scrolling the page behind. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}.ca-modal__frame {
  width: 100%;
  height: min(62vh, 760px);
  border: 0;
  border-radius: 14px;
  background: var(--ca-white);
}

@media (max-width: 700px) {
  .ca-modal,
  .ca-modal--wide { width: 96vw; }
}

.ca-mk-picker__label { font-size: clamp(12px, 1.3vw, 14px); }


/* ==========================================================================
   Image shapes (inc/images.php)

   Every card, section and rail photo carries .ca-img; its container carries
   the chosen shape as custom properties. Original (ratio auto) is the photo
   as uploaded. Fill covers the frame, cropping the least it can; Whole fits
   inside it, padded with the tint.
   ========================================================================== */

.ca-img {
  display: block;
  width: 100%;
  height: auto;
  /* The chosen shape, else the photo's own ratio (inc/images.php). */
  aspect-ratio: var(--ca-img-ratio, var(--ca-img-own, auto));
  object-fit: var(--ca-img-fit, cover);
  object-position: var(--ca-img-pos, 50% 50%);
  background: var(--ca-img-bg, var(--ca-sand));
}

/* --- Full-size pictures (site.js, "Flyers and menus, full size") --------- */

/* The flyer or menu on the page, now a button that opens it full size. */
.ca-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: zoom-in;
  border-radius: var(--ca-r-md);
}
.ca-zoom--panel { margin-bottom: 18px; }
.ca-zoom--panel .ca-panel__image { margin-bottom: 0; }
.ca-zoom__hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 12px;
  border-radius: var(--ca-r-pill);
  background: rgba(20, 25, 43, 0.78);
  color: var(--ca-cream);
  font-family: var(--ca-font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}
.ca-zoom__hint::before { content: "\2922\00a0"; }
.ca-zoom:hover .ca-zoom__hint,
.ca-zoom:focus-visible .ca-zoom__hint { background: var(--ca-orange-dark); }

/* The picture over the page. */
.ca-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(20, 25, 43, 0.94);
  color: var(--ca-cream);
}
.ca-lightbox::backdrop { background: transparent; }
.ca-lightbox[open] { display: block; }

.ca-lightbox__stage {
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 12px 48px;
  box-sizing: border-box;
}
.ca-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
  background: var(--ca-white);
}
/* Zoomed: the picture at full size, dragged or scrolled around. */
.ca-lightbox.is-zoomed .ca-lightbox__stage { display: block; padding: 0; }
.ca-lightbox.is-zoomed .ca-lightbox__img {
  max-width: none;
  max-height: none;
  border-radius: 0;
  cursor: zoom-out;
}
.ca-lightbox.is-zoomed .ca-lightbox__hint { opacity: 0; }

.ca-lightbox__close {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--ca-cream);
  color: var(--ca-ink);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ca-shadow-md);
}
.ca-lightbox__hint {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  font-size: 13px;
  text-align: center;
  color: rgba(255, 248, 238, 0.82);
  transition: opacity var(--ca-dur-fast) var(--ca-ease);
  pointer-events: none;
}

html.ca-lightbox-open { overflow: hidden; scrollbar-gutter: stable; }

/* --- Price tables (inc/price-tables.php) -----------------------------------

   WordPress's table block, drawn like the admission prices: a small mono
   header, then one rounded cream row per line, prices on the right in the
   display face. The same rules apply on a store page (.ca-ptable), on any
   page, and in the editor, so a table looks the same while it is written.

   A column aligned right (the table toolbar's "Align column") is a price.
   ------------------------------------------------------------------------- */

:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table {
  margin: 0 0 18px;
  overflow-x: visible;
}

:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: -8px;
  font-size: var(--ca-text-base);
  line-height: 1.45;
}

:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table thead {
  border: 0;
}
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table th {
  padding: 0 14px;
  border: 0;
  background: none;
  font-family: var(--ca-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-faint);
  text-align: left;
  vertical-align: bottom;
}

:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table td {
  padding: 14px;
  border: 1px solid var(--ca-hairline);
  border-width: 1px 0;
  background: var(--ca-cream);
  color: var(--ca-body);
  line-height: 1.35;
  vertical-align: middle;
}
/* The small print under a name, as the admission prices always had it. */
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table td:first-child {
  border-left-width: 1px;
  border-radius: var(--ca-r-sm) 0 0 var(--ca-r-sm);
  color: var(--ca-teal);
  font-size: var(--ca-text-xs);
}
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table td:last-child {
  border-right-width: 1px;
  border-radius: 0 var(--ca-r-sm) var(--ca-r-sm) 0;
}
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table td:only-child {
  border-radius: var(--ca-r-sm);
}

/* The name, bold in the first column; the line under it is the small print. */
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table td:first-child :is(strong, b) {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--ca-ink);
  font-size: var(--ca-text-base);
  font-weight: 600;
  line-height: 1.45;
}

/*
 * Small print, in the teal of the line under a name: the words under a price
 * ("Per Guest"), and a named column of details (Upgrades & Add-ons).
 */
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table .ca-ptable__sub,
.ca-ptable .wp-block-table td.is-text[data-label] {
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ca-teal);
}

/* A price and the words under it, kept together (one item in the phone layout). */
.ca-ptable .ca-ptable__val { display: inline-block; text-align: right; }

/* Prices: right, in the display face. */
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table :is(td, th).has-text-align-right {
  text-align: right;
}
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table td.has-text-align-right {
  font-family: var(--ca-font-display);
  font-weight: 700;
  color: var(--ca-ink);
}
:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table :is(td, th).has-text-align-center {
  text-align: center;
}

:is(.ca-ptable, .ca-page-content, .is-root-container) .wp-block-table figcaption {
  margin-top: 4px;
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-xs);
  color: var(--ca-faint);
  text-align: left;
}

/* Editing a price table: white behind it, as in the store's panel. */
.editor-styles-wrapper.post-type-ca_table { background: var(--ca-white); }

/* A heading over a table, and the small print under one. */
.ca-ptable :is(h2, h3, h4) {
  margin: 22px 0 10px;
  font-size: var(--ca-text-lg);
}
.ca-ptable > :first-child { margin-top: 0; }
.ca-ptable p {
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-xs);
  color: var(--ca-faint);
}

/* Items beside their prices: built for phones, hidden until then. */
.ca-ptable td.ca-ptable__pairs { display: none; }

/*
 * On a phone, a table with more than three columns, or a column of text,
 * becomes a card per row: the name on top, each value under its column's
 * name (inc/price-tables.php adds the names). Three columns of prices stay
 * side by side, as the admission prices do.
 */
@media (max-width: 600px) {
  .ca-ptable .wp-block-table table.is-stacked,
  .ca-ptable .is-stacked :is(tbody, tr, td) {
    display: block;
    width: 100%;
  }
  .ca-ptable .is-stacked { margin-top: 0; }
  .ca-ptable .is-stacked thead { display: none; }

  .ca-ptable .wp-block-table .is-stacked tr {
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid var(--ca-hairline);
    border-radius: var(--ca-r-sm);
    background: var(--ca-cream);
  }
  .ca-ptable .wp-block-table .is-stacked td,
  .ca-ptable .wp-block-table .is-stacked td:first-child,
  .ca-ptable .wp-block-table .is-stacked td:last-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .ca-ptable .wp-block-table .is-stacked td:first-child {
    display: block;
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ca-hairline);
  }
  .ca-ptable .wp-block-table .is-stacked td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--ca-font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ca-faint);
  }
  /* A column of text reads as a list under its name. */
  .ca-ptable .wp-block-table .is-stacked td.is-text {
    display: block;
    text-align: left;
  }
  .ca-ptable .wp-block-table .is-stacked td.is-text::before {
    display: block;
    margin-bottom: 3px;
  }
  .ca-ptable .wp-block-table .is-stacked td.is-empty,
  .ca-ptable .wp-block-table .is-stacked td.is-paired { display: none; }

  .ca-ptable .wp-block-table .is-stacked td.ca-ptable__pairs { display: block; }
  .ca-ptable__pairs ul { margin: 0; padding: 0; list-style: none; }
  .ca-ptable__pairs li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
  }
  .ca-ptable__pairs li + li { border-top: 1px dashed var(--ca-hairline); }
  .ca-ptable__pairs li span:last-child {
    flex: none;
    font-family: var(--ca-font-display);
    font-weight: 700;
    color: var(--ca-ink);
    text-align: right;
  }
}