:root {
    --csntm-navy: #101d28;
    --csntm-amber: #f5ad24;
    --csntm-ink: #1a1a1a;
    --csntm-muted: #444;
    --csntm-surface: #f4f4f4;
    --csntm-card-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    --csntm-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --csntm-serif: Georgia, "Times New Roman", Times, serif;
}

/* ------------------------------------------------- Theme integration */

/*
 * The layout is injected into the theme's boxed `.entry-content` column, but
 * the hero, opportunities band, and progress bar are all full-bleed in the
 * design. Break out to the viewport width; `body`/`html` already carry
 * `overflow-x: hidden`, so this cannot introduce a horizontal scrollbar.
 */
.csntm-expedition-layout,
.csntm-landing-layout {
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

/*
 * The hero already announces the page ("Sponsor a Manuscript"), so the theme's
 * own page title above it is a duplicate — same treatment as the Expedition
 * pages below. The body class is added when the landing shortcode is present.
 */
body.csntm-has-sponsor-landing .entry-header {
    display: none;
}

body.csntm-has-sponsor-landing .site-header {
    margin-bottom: 0;
}

/* The page's featured image is the hero background here, so the theme's own
   featured-image band above the content is both redundant and — when no image
   is set — an empty gap between the navigation and the hero. */
body.csntm-has-sponsor-landing .featured-image {
    display: none;
}

body.csntm-has-sponsor-landing .hfeed.site {
    margin-top: 0;
}

/*
 * Throughout the sponsorship flow the site's general "Donate" calls to action
 * are a dead end: they lead away from the manuscript being sponsored, and on
 * the cart and checkout they read as the way to complete the purchase.
 */
body.csntm-hide-donate .floating-donate-btn,
body.csntm-hide-donate .main-navigation li.contact-us {
    display: none;
}

/*
 * The Expedition name is the hero subtitle, so the theme's own post title
 * above it is a duplicate and pushes the hero away from the header.
 */
body.single-csntm_expedition .entry-header {
    display: none;
}

/*
 * The theme sets `overflow-x: hidden`, which computes `overflow-y` to `auto`
 * and makes `body` a scroll container — that silently disables the sticky
 * progress bar. `clip` does the same horizontal clipping (still containing the
 * full-bleed bands above) without establishing a scroll container. Browsers
 * without `clip` support keep the theme's `hidden`: the layout stays correct,
 * only the sticky behaviour degrades to static.
 */
body.single-csntm_expedition {
    overflow-x: clip;
}

/* Pena spaces the content away from the site header; the hero supplies its own
   breathing room and must sit flush against the navigation. */
body.single-csntm_expedition .site-header {
    margin-bottom: 0;
}

body.single-csntm_expedition .hfeed.site {
    margin-top: 0;
}

/* The design sets all body copy in the sans stack; the theme defaults body
   text to a serif. Headings already inherit the theme's sans headings font. */
.csntm-expedition-layout,
.csntm-landing-layout,
.csntm-modal {
    font-family: var(--csntm-sans);
}

/* ---------------------------------------------------------------- Hero */

.csntm-sponsor-hero {
    position: relative;
    background: var(--csntm-navy);
    background-position: center;
    background-size: cover;
    color: #fff;
    padding: 72px 24px;
}

.csntm-sponsor-hero--expedition {
    display: flex;
    align-items: flex-end;
    min-height: 340px;
    padding: 56px 24px 40px;
}

.csntm-sponsor-hero--landing {
    display: flex;
    align-items: center;
    min-height: 460px;
    padding: 64px 24px;
}

/* Only darken the hero when there is a background image behind the copy. */
.csntm-sponsor-hero--has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 16, 22, 0.86) 0%, rgba(10, 16, 22, 0.55) 45%, rgba(10, 16, 22, 0.22) 100%);
}

.csntm-sponsor-hero__inner,
.csntm-sponsor-section,
.csntm-live-progress__inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.csntm-sponsor-hero--expedition .csntm-sponsor-hero__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    align-items: flex-end;
    justify-content: space-between;
}

/* The design sets the hero display type in the serif face, at a normal weight
   with generous tracking — not the theme's heavy sans headings. */
.csntm-sponsor-hero h1 {
    max-width: 720px;
    margin: 0 0 20px;
    color: #fff !important;
    font-family: var(--csntm-serif);
    font-size: clamp(36px, 5.4vw, 68px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* Each half of the title is its own line in the design, at every width. */
.csntm-sponsor-hero__title span {
    display: block;
}

.csntm-sponsor-hero p {
    max-width: 640px;
    margin: 0 0 28px;
    color: #fff !important;
}

.csntm-sponsor-hero__lede {
    max-width: 620px;
    margin: 0 0 32px !important;
    font-family: var(--csntm-serif);
    font-size: clamp(17px, 1.9vw, 22px);
    line-height: 1.45;
}

.csntm-sponsor-hero__intro {
    flex: 1 1 420px;
}

.csntm-sponsor-hero__subtitle {
    margin: 0 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(16px, 2vw, 22px);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Logo and search stack together in the hero's right-hand column, matching the
   design where the host institution mark sits directly above the search pill. */
.csntm-sponsor-hero__aside {
    display: flex;
    flex: 0 1 460px;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    min-width: 260px;
}

.csntm-sponsor-hero__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(80px, 8.2vw, 122px);
    margin: 0;
    object-fit: contain;
}

.csntm-sponsor-hero__search {
    position: relative;
    width: 100%;
}

/* `!important` throughout: the theme styles bare inputs with a serif stack,
   a tinted background, and an inset border that all bleed into the hero. */
.csntm-sponsor-hero__search input {
    width: 100%;
    min-height: 54px;
    /* Left inset so the placeholder clears the pill's rounded edge. The theme's
       own `input[type="search"]` padding ties on specificity and loads later. */
    padding: 0 56px 0 1em !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--csntm-ink) !important;
    font-family: var(--csntm-sans) !important;
    font-size: 17px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
    -webkit-appearance: none;
    appearance: none;
}

.csntm-sponsor-hero__search input::placeholder {
    color: #8a8a8a;
    font-family: var(--csntm-sans);
    opacity: 1;
}

.csntm-sponsor-hero__search input::-webkit-search-cancel-button {
    margin-right: 4px;
}

.csntm-sponsor-hero__search-icon {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 24px;
    height: 24px;
    color: #8a8a8a;
    transform: translateY(-50%);
    pointer-events: none;
}

.csntm-icon {
    display: block;
    width: 100%;
    height: 100%;
}

.csntm-sponsor-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

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

.csntm-button,
.csntm-tier-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 40px;
    padding: 8px 20px;
    border: 0;
    border-radius: 6px;
    background: var(--csntm-amber);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.csntm-button--light {
    background: #fff;
    color: var(--csntm-ink);
}

/* The hero pair in the design is larger, sentence case, and reads dark-on-fill
   for both the white and amber button. */
.csntm-button--hero {
    min-width: 230px;
    min-height: 52px;
    padding: 14px 28px;
    border-radius: 3px;
    color: var(--csntm-ink);
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
}

.csntm-button--block {
    width: 100%;
}

/* -------------------------------------------------- Section scaffolding */

.csntm-expedition-layout {
    background: var(--csntm-surface);
}

/*
 * The band carries the gutter and its children carry the max-width, matching
 * the hero and progress bands. Putting both on one border-box element would
 * inset this section's contents by an extra gutter and break the alignment
 * with the sections above and below.
 */
.csntm-expedition-layout__inner {
    padding: 48px 24px 56px;
}

.csntm-expedition-layout__inner > * {
    width: 100%;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}

.csntm-sponsor-section {
    padding: 56px 24px;
}

/*
 * On the landing page each section is a full-bleed band that can carry its own
 * background, so the max-width moves from the section to its children — the
 * same split used by `.csntm-expedition-layout__inner` above.
 */
.csntm-landing-layout .csntm-sponsor-section {
    box-sizing: border-box;
    max-width: none;
}

.csntm-landing-layout .csntm-sponsor-section > * {
    width: 100%;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}

.csntm-sponsor-section--expeditions {
    background: #eee;
}

/* Longhand: a `margin` shorthand here would reset the horizontal `auto`
   centering that boxes this header inside the full-bleed bands. */
.csntm-sponsor-section__header {
    margin-top: 0;
    margin-bottom: 32px;
}

.csntm-sponsor-section__header h2 {
    margin: 0 0 8px;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.csntm-expedition-layout .csntm-sponsor-section__header {
    text-align: left;
}

.csntm-sponsor-section:not(.csntm-expedition-layout) .csntm-sponsor-section__header {
    text-align: center;
}

/* "Active Expeditions:" and its subtitle are one two-line statement in the
   design, so the subtitle takes the heading's weight and case at a step down. */
.csntm-sponsor-section--expeditions .csntm-sponsor-section__header h2 {
    margin-bottom: 4px;
    font-size: clamp(21px, 2.6vw, 28px);
}

.csntm-sponsor-section__subtitle {
    margin: 0 !important;
    color: var(--csntm-ink) !important;
    font-family: var(--csntm-sans);
    font-size: clamp(15px, 1.8vw, 19px);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: uppercase;
}

.csntm-manuscript-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.csntm-perk-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* --------------------------------------------------- Expedition carousel */

.csntm-carousel {
    display: flex;
    gap: 18px;
    align-items: center;
}

/*
 * A scroll-snapping row rather than a wrapping grid: cards keep a fixed share
 * of the viewport (three across at full width) and the arrows page through
 * them, matching the design's carousel.
 */
.csntm-carousel__track {
    display: grid;
    flex: 1 1 0;
    min-width: 0;
    grid-auto-flow: column;
    /* A definite track size, not a minmax() — a `0` minimum lets the grid
       squeeze every card in to fit instead of overflowing into a scroller. */
    grid-auto-columns: calc((100% - 64px) / 3);
    gap: 32px;
    overflow-x: auto;
    /* Room for the card shadows, which the scroll container would otherwise
       clip; `scroll-padding` keeps the matching snap position at scrollLeft 0
       so the "previous" arrow can hide at the start of the row. */
    padding: 6px 4px 8px;
    scroll-behavior: smooth;
    scroll-padding: 0 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.csntm-carousel__track::-webkit-scrollbar {
    display: none;
}

.csntm-carousel__arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0 0 3px;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-family: var(--csntm-sans);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.csntm-carousel__arrow[hidden] {
    display: none;
}

/* ----------------------------------------------------- Manuscript cards */

.csntm-expedition-card,
.csntm-manuscript-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--csntm-card-shadow);
}

.csntm-manuscript-card__open {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.csntm-manuscript-card__open:focus-visible {
    outline: 3px solid var(--csntm-amber);
    outline-offset: -3px;
}

.csntm-expedition-card {
    scroll-snap-align: start;
}

.csntm-expedition-card__image,
.csntm-manuscript-card__image,
.csntm-modal__image {
    display: block;
    width: 100%;
    background: #eee;
    object-fit: cover;
}

/* Reserve the image band even without a featured image so cards in the row
   keep the same shape. */
.csntm-expedition-card__media {
    aspect-ratio: 4 / 3;
    background: #e3e3e3;
}

.csntm-expedition-card__media-link {
    display: block;
    height: 100%;
}

.csntm-expedition-card__image {
    height: 100%;
    margin: 0;
}

/* The theme underlines and recolours bare links; the card title should read as
   the heading it is until hovered. */
.csntm-expedition-card__title-link {
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.csntm-expedition-card__title-link:hover,
.csntm-expedition-card__title-link:focus-visible {
    color: var(--csntm-amber) !important;
}

.csntm-expedition-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px 18px 20px;
}

.csntm-expedition-card__body h3 {
    margin: 0 0 8px;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}

/* The shared meta line pins itself to the bottom of manuscript cards; here it
   belongs directly under the title. */
.csntm-expedition-card .csntm-card-meta {
    margin: 0 0 12px !important;
    font-size: 17px;
}

.csntm-expedition-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 20px !important;
    color: var(--csntm-muted) !important;
    font-family: var(--csntm-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.csntm-expedition-card__cta {
    align-self: flex-start;
    margin-top: auto;
    min-height: 40px;
    padding: 9px 20px;
    font-size: 14px;
}

.csntm-manuscript-card__media {
    position: relative;
}

.csntm-manuscript-card__image {
    aspect-ratio: 16 / 5;
}

.csntm-manuscript-card__info {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.csntm-manuscript-card__body {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
    padding: 18px 20px 20px;
}

.csntm-manuscript-card__text {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.csntm-manuscript-card__body h3 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
}

.csntm-manuscript-card__body p {
    margin: 0 0 10px;
    color: var(--csntm-muted);
    font-size: 16px;
    line-height: 1.35;
}

.csntm-manuscript-card__aside {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    width: 132px;
}

.csntm-manuscript-card__aside .csntm-button {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: auto;
    min-height: 34px;
    padding: 6px 12px;
    font-size: 12px;
}

.csntm-card-meta {
    margin: auto 0 0 !important;
    color: var(--csntm-ink) !important;
    font-size: 16px;
}

.csntm-card-meta--stacked {
    display: grid;
    justify-items: start;
    gap: 2px;
}

.csntm-card-meta--stacked .csntm-card-meta__separator {
    display: none;
}

/* Drawn rather than typed so the theme's wptexturize cannot fold the
   design's "----" run into an em dash. */
.csntm-card-meta__separator {
    display: inline-block;
    width: 20px;
    margin: 0 3px;
    border-top: 2px dashed currentColor;
    vertical-align: middle;
}

.csntm-card-meta__goal,
.csntm-card-meta__funded {
    white-space: nowrap;
}

.csntm-card-meta__funded {
    color: var(--csntm-amber);
}

/* ------------------------------------------------------- Progress rings */

.csntm-progress-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    color: var(--csntm-ink);
    font-size: 17px;
    font-weight: 700;
}

.csntm-progress-ring__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Start the arc at twelve o'clock rather than three. */
    transform: rotate(-90deg);
}

.csntm-progress-ring__track,
.csntm-progress-ring__fill {
    fill: none;
    stroke-width: 13;
}

.csntm-progress-ring__track {
    stroke: var(--csntm-navy);
}

.csntm-progress-ring__fill {
    stroke: var(--csntm-amber);
    stroke-linecap: round;
}

.csntm-progress-ring__value {
    position: relative;
}

.csntm-progress-ring--large {
    width: 148px;
    height: 148px;
    font-size: 32px;
}

/* -------------------------------------------- Project progress / perks */

.csntm-live-progress {
    padding: 26px 24px 30px;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}

/*
 * Keep funding progress in view while the manuscript grid is being scrolled.
 * As the last child of the layout, the bar releases at the end of the section
 * rather than overlaying the site footer.
 */
.csntm-expedition-layout .csntm-live-progress {
    position: sticky;
    bottom: 0;
    z-index: 900;
}

.csntm-live-progress__perks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.csntm-live-progress__perk {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
}

.csntm-live-progress__perk-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 40px;
    color: var(--csntm-amber);
}

.csntm-live-progress__perk-copy {
    display: block;
    min-width: 0;
}

.csntm-live-progress__perk-copy strong,
.csntm-live-progress__perk-copy small {
    display: block;
}

.csntm-live-progress__perk-copy strong {
    font-size: 14px;
    line-height: 1.3;
}

.csntm-live-progress__perk-copy small {
    margin-top: 3px;
    color: #555;
    font-size: 13px;
    font-style: italic;
    line-height: 1.35;
}

.csntm-live-progress__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.csntm-live-progress__bar strong {
    position: relative;
    padding-right: 28px;
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 800;
}

.csntm-live-progress__bar strong::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 1.4em;
    background: var(--csntm-ink);
    transform: translateY(-50%);
}

.csntm-progress-track {
    position: relative;
    overflow: hidden;
    height: 34px;
    border: 1.5px solid var(--csntm-ink);
    border-radius: 999px;
    background: #fff;
}

.csntm-progress-track__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--csntm-amber);
}

/* --------------------------------------------------------------- Modal */

.csntm-modal[hidden] {
    display: none;
}

.csntm-modal-open {
    overflow: hidden;
}

.csntm-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
}

.csntm-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 18, 26, 0.62);
}

.csntm-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    width: min(1020px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* The disclaimer is a single column of prose, not the manuscript dialog's
   image-and-options split. */
.csntm-modal--disclaimer .csntm-modal__dialog {
    grid-template-columns: minmax(0, 1fr);
    width: min(640px, 100%);
}

.csntm-modal__disclaimer {
    padding: 48px 48px 40px;
}

.csntm-modal__disclaimer h2 {
    margin: 0 0 20px;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    text-transform: uppercase;
}

.csntm-modal__disclaimer-body {
    margin-bottom: 28px;
    color: #555;
    font-size: 17px;
    line-height: 1.7;
}

.csntm-modal__disclaimer-body p {
    margin: 0 0 14px;
    color: inherit !important;
    font-family: var(--csntm-sans);
    font-size: inherit;
    line-height: inherit;
}

.csntm-modal__disclaimer-body p:last-child {
    margin-bottom: 0;
}

.csntm-modal__close {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 2;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: var(--csntm-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.csntm-modal__manuscript {
    display: flex;
    flex-direction: column;
    background: #fff;
}

/*
 * Pinned to the top rather than centred: a manuscript with many sponsorship
 * tiers makes the options column far taller than this one, and centring pushed
 * the title and description halfway down the dialog, out of view on open.
 */
.csntm-modal__manuscript-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: 34px 40px 40px;
}

.csntm-modal__image {
    aspect-ratio: 21 / 9;
    margin: 0;
}

.csntm-modal__manuscript h2 {
    margin: 0 0 16px;
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 800;
    text-transform: uppercase;
}

.csntm-modal__subtitle {
    margin: 0 0 18px;
    font-size: 19px;
}

.csntm-modal__description {
    margin: 0;
    color: var(--csntm-muted);
    font-size: 17px;
    line-height: 1.4;
}

.csntm-modal__progress {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 32px;
}

.csntm-modal__progress .csntm-card-meta {
    margin: 0 !important;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.2;
}

.csntm-modal__options {
    display: flex;
    flex-direction: column;
    background: #f2f2f2;
}

.csntm-modal__options-scroll {
    flex: 1 1 auto;
    padding: 28px 26px 26px;
}

.csntm-modal__options h3 {
    margin: 0 0 20px;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

/*
 * Pinned to the bottom of the dialog's scroll container: a manuscript with a
 * long list of tiers would otherwise bury the checkout actions below the fold.
 */
.csntm-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 22px 26px 24px;
    background: #0a0a0a;
}

.csntm-modal__footer .csntm-button {
    max-width: 420px;
}

/* `!important`: the theme's own link colour is dark, which is invisible
   against the footer's black band. */
.csntm-modal__checkout,
.csntm-modal__checkout:hover,
.csntm-modal__checkout:focus {
    display: inline-flex;
    align-items: center;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
}

.csntm-modal__checkout-icon {
    display: inline-flex;
    margin-left: 5px;
}

.csntm-modal__checkout-icon .csntm-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.csntm-modal__checkout[hidden] {
    display: none;
}

/* ----------------------------------------------------------- Tier cards */

.csntm-tier-list {
    display: grid;
    gap: 16px;
}

.csntm-tier-card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.csntm-tier-card__icon {
    display: grid;
    place-items: center;
    padding: 18px;
    background: var(--csntm-navy);
    color: var(--csntm-amber);
}

.csntm-tier-card__icon .csntm-icon {
    width: 48px;
    height: 48px;
}

.csntm-tier-card__body {
    padding: 16px 18px 18px;
}

.csntm-tier-card__body h4 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
}

.csntm-tier-card__price {
    white-space: nowrap;
}

.csntm-tier-card__body > p {
    margin: 0 0 12px;
    color: #666;
    font-size: 14px;
    line-height: 1.35;
}

.csntm-tier-card__quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
}

.csntm-tier-card__quantity input {
    width: 76px;
    min-height: 34px;
    margin: 0;
    padding: 4px 8px;
}

.csntm-tier-card__button {
    width: 100%;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 3px;
    background: var(--csntm-navy);
    font-size: 12px;
}

.csntm-tier-card__button[disabled],
.csntm-button[disabled] {
    opacity: 0.6;
    cursor: default;
}

.csntm-tier-card__button[disabled].csntm-tier-card__button--loading,
.csntm-button[disabled].csntm-button--loading {
    opacity: 1;
}

.csntm-tier-card__button--loading,
.csntm-button--loading {
    color: transparent;
    pointer-events: none;
}

.csntm-tier-card__button--loading::after,
.csntm-button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: csntm-spin 0.6s linear infinite;
}

.csntm-button--light.csntm-button--loading::after {
    border-color: rgba(17, 17, 17, 0.25);
    border-top-color: #111;
}

@keyframes csntm-spin {
    to {
        transform: rotate(360deg);
    }
}

.csntm-tier-card__cart-status {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e6e6e6;
}

.csntm-tier-card__cart-count {
    margin: 0 0 10px !important;
    color: var(--csntm-ink) !important;
    font-size: 13px !important;
    font-weight: 700;
}

.csntm-tier-card__feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.csntm-tier-card__feedback-actions .csntm-button {
    flex: 1 1 auto;
    min-height: 32px;
    padding: 5px 12px;
    font-size: 11px;
}

.csntm-tier-card__feedback-actions .csntm-button--light {
    border: 1px solid #d5d5d5;
}

/* --------------------------------------------------- Landing extras */

.csntm-sponsor-perks {
    padding-bottom: 24px;
}

/* The design underlines the section label with the amber rule rather than
   capping the section above it. */
.csntm-sponsor-section__header--rule {
    padding-bottom: 12px;
    border-bottom: 3px solid var(--csntm-amber);
    margin-bottom: 44px;
    text-align: left !important;
}

.csntm-sponsor-perks .csntm-sponsor-section__header h2 {
    margin: 0;
    font-size: clamp(17px, 1.9vw, 21px);
    letter-spacing: 0.02em;
}

.csntm-landing-layout .csntm-perk-grid {
    max-width: 1040px;
}

.csntm-perk {
    text-align: center;
}

.csntm-perk__icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    color: var(--csntm-amber);
}

.csntm-perk h3 {
    /* Reserve two lines so the descriptions share a baseline whether or not a
       given perk title wraps. */
    min-height: 2.6em;
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: uppercase;
}

.csntm-perk__tier {
    display: block;
    margin-bottom: 3px;
    font-size: 0.82em;
}

/* ------------------------------------------------ Checkout recognition */

.csntm-recognition {
    margin: 24px 0;
    padding: 22px;
    border: 1px solid #ddd;
    background: #fafafa;
}

.csntm-recognition fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 0;
    border: 0;
    margin: 0 0 16px;
}

.csntm-recognition fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.csntm-recognition__name[hidden] {
    display: none;
}

.csntm-perk p {
    margin: 0;
    color: #666 !important;
    font-family: var(--csntm-sans);
    font-size: 17px;
    line-height: 1.55;
}

/* The testimonial is a raised card floating on the page, not a full-bleed
   band, so the section supplies the surrounding air. */
.csntm-testimonial-section {
    padding-top: 32px;
}

.csntm-testimonial {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 48px 64px 48px 0;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.csntm-testimonial__image {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    background: #e3e3e3;
}

.csntm-testimonial__eyebrow {
    margin: 0 0 10px !important;
    color: #7a7a7a !important;
    font-family: var(--csntm-sans);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.csntm-testimonial h2 {
    margin: 0 0 18px;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
}

.csntm-testimonial__body p:last-child {
    margin: 0;
    color: #555 !important;
    font-family: var(--csntm-sans);
    font-size: 18px;
    line-height: 1.7;
}

.csntm-floating-cart {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    background: var(--csntm-amber);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.csntm-floating-cart[hidden] {
    display: none;
}

.csntm-floating-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 12px;
}

/* ---------------------------------------------------------- Responsive */

@media (max-width: 1080px) {
    .csntm-manuscript-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .csntm-perk-grid,
    .csntm-live-progress__perks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .csntm-carousel__track {
        grid-auto-columns: calc((100% - 32px) / 2);
    }
}

@media (max-width: 900px) {
    .csntm-modal__dialog {
        grid-template-columns: 1fr;
    }

    .csntm-modal__manuscript-body {
        padding: 26px 24px 30px;
    }
}

@media (max-width: 800px) {
    .csntm-manuscript-grid,
    .csntm-perk-grid,
    .csntm-live-progress__perks,
    .csntm-testimonial {
        grid-template-columns: 1fr;
    }

    .csntm-carousel__track {
        grid-auto-columns: 100%;
    }

    .csntm-testimonial {
        gap: 24px;
        padding: 36px 28px;
        text-align: center;
    }

    .csntm-sponsor-hero--landing {
        min-height: 380px;
    }

    .csntm-button--hero {
        min-width: 0;
        flex: 1 1 200px;
    }

    .csntm-live-progress__perk {
        justify-content: flex-start;
    }

    .csntm-expedition-layout .csntm-live-progress {
        position: static;
    }

    .csntm-live-progress__bar {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .csntm-live-progress__bar strong {
        padding-right: 0;
    }

    .csntm-live-progress__bar strong::after {
        display: none;
    }

    .csntm-manuscript-card__body {
        grid-template-columns: 1fr;
    }

    .csntm-manuscript-card__aside {
        align-items: flex-start;
        width: 100%;
    }

    .csntm-manuscript-card__aside .csntm-button {
        max-width: 220px;
    }
}

@media (max-width: 560px) {
    .csntm-tier-card {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .csntm-tier-card__icon .csntm-icon {
        width: 34px;
        height: 34px;
    }
}