:root {
    /* Brand palette — exact values from the SMGLI Figma design system
       (Visual Identity frame). Token names are kept stable; only values
       are reconciled to the designer's hex so nothing downstream breaks. */
    --color-ink: #2b2621;          /* Charcoal */
    --color-muted: #6b6358;
    --color-paper: #f2ebe4;        /* Cream page background — Figma #F2EBE4 */
    --color-panel: #ffffff;
    --color-panel-light: #f2ebe3;  /* Stone (exact) */
    --color-stone-dark: #e4d9cb;   /* Stone/Dark — designer devsite Jul 2026 */
    --color-white: #ffffff;
    --color-line: #e7e0d5;
    --color-line-dark: #3a352d;
    --color-accent: #ba4a29;       /* Clay — primary accent/CTA */
    --color-accent-dark: #9a3d22;  /* deeper Clay for pressed/contrast */
    --color-ochre: #d68a1c;        /* Ochre — hover/secondary accent */
    --color-ochre-light: #ffa423;  /* Ochre/Light — designer devsite Jul 2026 */
    --color-teal: #005966;         /* Teal */
    --color-sky: #a6c9de;          /* Sky */
    --color-verde: #47661f;        /* Verde */
    --color-cactus: #8ca16b;       /* Cactus */
    --color-sage: #506b5a;
    --color-dark: #2b2621;         /* Charcoal (dark surfaces / footer) */
    --color-dark-panel: #2b2620;
    --color-dark-line: #4a4339;
    --color-on-dark: #efe9df;
    --color-on-dark-muted: #b8b0a4;
    --color-on-dark-link: #d8d0c4;
    --color-on-dark-accent: #f3b9a6;
    --color-on-dark-line: #5a5249;
    --color-maroon: #47141f;       /* Plum */
    --color-maroon-dark: #2e0a12;  /* Plum/Dark — designer devsite Jul 2026 */
    --color-maroon-light: #6c444b; /* Plum/Light — designer devsite Jul 2026 */
    --color-maroon-line: rgba(255, 255, 255, .15);
    --color-on-maroon: #f6ece2;
    --color-on-maroon-muted: #d9c3b0;
    --color-on-maroon-accent: #a6c9de; /* Sky reads as the accent on Plum */
    --font-sans: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Vatican", Georgia, "Times New Roman", serif;
    --font-mono: "Inconsolata", "Courier New", monospace;
    --font-accent: "Crimson Text", Georgia, "Times New Roman", serif;

    /* Type scale — site-wide typography design system (H1-H7 / P1-P6) */
    --h1-font: 500 72px/72px var(--font-serif);
    --h1-transform: uppercase;
    --h2-font: 500 36px/1.2 var(--font-serif);
    --h2-transform: uppercase;
    --h3-font: 500 32px/1.2 var(--font-serif);
    --h3-transform: uppercase;
    --h3b-font: 500 24px/28px var(--font-serif); /* 24/28 Vatican step — designer devsite */
    --h3b-transform: uppercase;
    --h4-font: 500 20px/24px var(--font-serif);
    --h4-transform: uppercase;
    --h5-font: 600 18px/32px var(--font-mono);
    --h5-transform: uppercase;
    --h6-font: 600 20px/32px var(--font-mono);
    --h6-transform: uppercase;
    --h7-font: 600 14px/1.4 var(--font-mono);
    --h7-transform: uppercase;
    --p1-font: 400 20px/32px var(--font-sans);
    --p2-font: 400 18px/32px var(--font-sans);
    --p3-font: 400 16px/24px var(--font-sans);
    --p4-font: 400 14px/28px var(--font-sans);
    --p5-font: 500 14px/24px var(--font-mono);
    --p5-transform: uppercase;
    --p5b-font: 400 12px/18px var(--font-sans); /* Figma P5 — card descriptions */
    --p6-font: italic 600 16px/20px var(--font-accent);
    /* Figma label letterSpacing "3" is percent, not px (dev-mode emits
       0.42px @14px / 0.48px @16px = 3%). Was 3px — visibly over-tracked. */
    --tracking-caps-wide: .03em;

    /* Spacing rhythm — the Figma section grid steps (24/36) + card gutter */
    --space-md: 24px;
    --space-lg: 36px;
    --gap-cards: 12px;
    --header-h: 76px; /* .site-header__inner min-height — heroes subtract it */

    --radius: 8px;      /* buttons / inputs — Figma rounded-[8px] */
    --radius-lg: 20px;  /* cards / features — Figma rounded-[20px] */
    --space-page: clamp(1rem, 4vw, 3rem);
    --max-wide: 1344px;                      /* Figma content width (1440 − 48×2); matches institute-theme */
    --max-narrow: 760px;
    --shadow-sm: 0 14px 34px rgba(31, 28, 23, .12);
    --shadow-md: 0 14px 34px rgba(31, 28, 23, .14);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, white);
    --transition-fast: .15s ease;
}

/* Vatican is not distributed via Google Fonts — self-hosted. Drop the
   licensed woff2 files into assets/fonts/ (see assets/fonts/README.md). */
@font-face {
    font-family: "Vatican";
    src: url("../fonts/Vatican-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visibility — keyboard-navigable interactive elements only */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius);
}

* {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background-color: var(--color-paper);
    background-image: url("../img/bg-texture.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    /* Texture is a greyscale paper scan — multiply tints it to the cream
       base so the page reads as Figma's #F2EBE4. */
    background-blend-mode: multiply;
    color: var(--color-ink);
    font-family: var(--font-sans);
    line-height: 1.6;
    /* Sticky-footer frame: the page is a flex column at least one screen
       tall, and the FOOTER grows to absorb any leftover height (see
       .site-footer). Handled here rather than inside .site-main so no
       template shape or plugin-injected markup can reopen a strip of bare
       page texture between the last section and the footer. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.site-header,
.site-main {
    flex-shrink: 0;
}

/* Typography scale — site-wide design system (H1-H7, P1-P6) */
h1, .h1 { font: var(--h1-font); text-transform: var(--h1-transform); margin: 0; }
h2, .h2 { font: var(--h2-font); text-transform: var(--h2-transform); margin: 0; }
h3, .h3 { font: var(--h3-font); text-transform: var(--h3-transform); margin: 0; }
h4, .h4 { font: var(--h4-font); text-transform: var(--h4-transform); margin: 0; }
h5, .h5 { font: var(--h5-font); text-transform: var(--h5-transform); margin: 0; }
h6, .h6 { font: var(--h6-font); text-transform: var(--h6-transform); margin: 0; }
.h7 { font: var(--h7-font); text-transform: var(--h7-transform); margin: 0; }

p, .p3 { font: var(--p3-font); margin: 0; }
.p1 { font: var(--p1-font); }
.p2 { font: var(--p2-font); }
.p4 { font: var(--p4-font); }
.p5 { font: var(--p5-font); text-transform: var(--p5-transform); }
.p6 { font: var(--p6-font); }

a {
    color: var(--color-accent-dark);
}

img {
    max-width: 100%;
    height: auto;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 1rem;
    z-index: 20;
    background: var(--color-ink);
    color: var(--color-white);
    padding: .75rem 1rem;
}

.skip-link:focus {
    left: 1rem;
}

.site-header {
    border-bottom: 1px solid var(--color-line);
    background: rgba(251, 250, 247, .96);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Offset the sticky header below the WP admin bar so it isn't clipped on
   scroll in logged-in views (admin bar is position:fixed at 32/46px; at
   <=600px WP drops it to non-fixed, so reset to 0). Visitors are unaffected. */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    .admin-bar .site-header {
        top: 0;
    }
}

.site-header__inner,
.site-footer__inner,
.section__inner,
.page-header,
.archive-shell,
.single-shell {
    width: min(100% - (var(--space-page) * 2), var(--max-wide));
    margin-inline: auto;
}

.site-header__inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-brand {
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 800;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
}

.site-brand__logo {
    display: block;
    width: auto;
    height: 52px;
    color: var(--color-ink);
}

/* Visually hidden, still exposed to screen readers + search engines. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.primary-nav__list,
.footer-nav {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.primary-nav a,
.primary-nav__label,
.footer-nav a {
    text-decoration: none;
    /* 600, not 650: only discrete Figtree weights are loaded, and 650 made
       each browser round differently per site (institute → 600, conference
       → 700), so the two navbars rendered visibly different. */
    font-weight: 600;
}

.primary-nav__label {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
}

.menu-toggle {
    display: none;
}

.section {
    padding: clamp(3rem, 7vw, 6rem) 0;
}

/* Hero fills the first screen: viewport height minus the sticky header,
   content vertically centered. Padding is only a guard so copy never
   touches the edges — the min-height does the sizing, so the section no
   longer grows when a hero image is added. svh (where supported) keeps
   mobile URL-bar changes from jumping the layout. */
.section--hero {
    box-sizing: border-box;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.section--hero > .section__inner {
    width: min(100% - (var(--space-page) * 2), var(--max-wide));
}

/* Logged-in views: the WP admin bar (32px, 46px <=782px) eats viewport too. */
.admin-bar .section--hero {
    min-height: calc(100vh - var(--header-h) - 32px);
    min-height: calc(100svh - var(--header-h) - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .section--hero {
        min-height: calc(100vh - var(--header-h) - 46px);
        min-height: calc(100svh - var(--header-h) - 46px);
    }
}

.section--cta {
    background: var(--color-accent);
    color: var(--color-white);
}

.section--cta h2 {
    color: var(--color-white);
}

.section--dark {
    background: var(--color-dark);
    color: var(--color-on-dark);
}

.section--dark h2,
.section--dark h3 {
    color: var(--color-white);
}

.section--maroon {
    background: var(--color-maroon);
    color: var(--color-on-maroon);
}

.section--maroon h1,
.section--maroon h2,
.section--maroon h3 {
    color: var(--color-on-maroon);
}

.section--maroon .eyebrow {
    color: var(--color-on-maroon-accent);
}

.section--maroon p {
    color: var(--color-on-maroon-muted);
}

.section--plum-dark {
    background: var(--color-maroon-dark);
    color: var(--color-on-maroon);
}

.section--plum-dark h1,
.section--plum-dark h2,
.section--plum-dark h3 {
    color: var(--color-on-maroon);
}

.section--plum-dark .eyebrow {
    color: var(--color-on-maroon-accent);
}

.section--plum-dark p {
    color: var(--color-on-maroon-muted);
}

.section--ochre {
    background: var(--color-ochre);
    color: var(--color-dark);
}

.section--stone-dark {
    background: var(--color-stone-dark);
    color: var(--color-dark);
}

.section--ochre h1,
.section--ochre h2,
.section--ochre h3 {
    color: var(--color-maroon);
}

.section--clay {
    background: var(--color-accent);
    color: var(--color-white);
}

.section--clay h1,
.section--clay h2,
.section--clay h3 {
    color: var(--color-white);
}

/* Cards keep their own ink on colored bands — the variant text colors above
   are for section-level copy only, never for content inside a light .card
   (white-on-white bug, review 14 Jul). */
.section--maroon .card,
.section--plum-dark .card,
.section--ochre .card,
.section--clay .card,
.section--maroon .card h2,
.section--plum-dark .card h2,
.section--ochre .card h2,
.section--clay .card h2,
.section--maroon .card h3,
.section--plum-dark .card h3,
.section--ochre .card h3,
.section--clay .card h3 {
    color: var(--color-ink);
}

.section--maroon .card p,
.section--plum-dark .card p {
    color: inherit;
}

.section--maroon .card .eyebrow,
.section--plum-dark .card .eyebrow {
    color: var(--color-muted);
}

/* Section-level eyebrow/footnote on Clay (direct children, not in cards)
   read in Plum per the designer's Big Reads band. */
.section--clay .section__inner > .eyebrow,
.section--clay .section__head-titles > .eyebrow {
    color: var(--color-maroon);
}

/* Ochre burst ornament (Figma Page Header 171:14646 "Burst Divider"),
   replacing the old CSS diamond-bar. */
.hero__divider {
    display: block;
    width: 313px;
    max-width: 100%;
    height: auto;
    margin: 1rem 0 1.5rem;
}

.hero--centered .hero__divider {
    margin-inline: auto;
}

.section__inner--narrow {
    max-width: var(--max-narrow);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.hero h1,
.page-header h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.5rem, 7vw, 5.8rem);
    line-height: .98;
    letter-spacing: 0;
}

.hero__text {
    font-size: 1.15rem;
    color: var(--color-muted);
    max-width: 44rem;
}

.hero__image {
    margin: 0;
}

.hero__image img {
    /* Natural aspect, capped to the hero's screenful — the old forced 4/5
       portrait box letterboxed landscape art and inflated the section. */
    width: 100%;
    height: auto;
    max-height: calc(100svh - var(--header-h) - 8rem);
    object-fit: contain;
    border-radius: 8px;
}

/* Conference hub hero: full-bleed collage on the right that fills the panel
   and runs to the section's bottom edge (Figma Page Header 171:14646), rather
   than the small contained figure. Scoped to the conference template so other
   heroes keep the default contained image. */
.page-template-template-conference .section--hero {
    position: relative;
    overflow: hidden;
}

.page-template-template-conference .section--hero .hero {
    grid-template-columns: minmax(0, 1fr);
}

.page-template-template-conference .section--hero .hero__copy {
    max-width: 34rem;
    position: relative;
    z-index: 2;
}

.page-template-template-conference .section--hero .hero__image {
    position: absolute;
    top: 0;
    right: 0;
    /* Bleed the image bottom down past the rip line (same height as the
       ::after rip) so its solid bottom sits under the torn maroon edge and the
       rip overlaps the image; the hero's overflow:hidden clips the excess. */
    bottom: calc(-1 * clamp(24px, 3.5vw, 52px));
    left: auto;
    width: min(58vw, 920px);
    margin: 0;
    z-index: 1;
    pointer-events: none;
}

.page-template-template-conference .section--hero .hero__image img {
    width: 100%;
    height: 100%;
    max-height: none;
    /* The collage is a transparent cutout, so contain shows it whole with the
       paper band behind it; anchored bottom-right to bleed off those edges. */
    object-fit: contain;
    object-position: right bottom;
    border-radius: 0;
}

/* Maroon rip: the maroon stats band below tears UP over the bottom of the
   hero, overlapping the bottom of the hero image. z-index sits above the
   absolute image (1) and the copy (2) so the torn maroon edge covers the
   image's bottom edge; scaleY(-1) points the torn notches up into the hero. */
.page-template-template-conference .section--hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(24px, 3.5vw, 52px);
    z-index: 3;
    pointer-events: none;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: scaleY(-1);
}

/* Below the two-column breakpoint the collage drops back into flow under the
   copy instead of bleeding behind it. */
@media (max-width: 900px) {
    .page-template-template-conference .section--hero .hero__image {
        position: static;
        width: auto;
    }

    .page-template-template-conference .section--hero .hero__image img {
        height: auto;
        max-height: 60vh;
        object-fit: contain;
    }
}

.page-header {
    padding: clamp(3rem, 8vw, 6rem) 0 1rem;
}

/* Eyebrow — design-system H7 (tracked mono caps in Clay). Was a legacy
   800-weight Figtree style that predated the type-scale tokens. */
.eyebrow {
    margin: 0 0 .75rem;
    color: var(--color-accent);
    font: var(--h7-font);
    text-transform: var(--h7-transform);
    letter-spacing: var(--tracking-caps-wide);
}

.button,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background .15s ease;
}

.button:hover {
    /* Figma primary button hover: Clay → Ochre */
    background: var(--color-ochre);
    text-decoration: none;
}

.button--light {
    background: var(--color-white);
    color: var(--color-accent-dark);
}

.button--ghost {
    background: transparent;
    color: var(--color-accent-dark);
    border: 1px solid var(--color-line);
}

.button--ghost:hover {
    background: var(--color-panel);
}

/* ------------------------------------------------------------------
   Manicule link — design system's secondary text link (pointing hand +
   underline rule), per Figma "Button/Manicule" (node 3-2190).
   Label + hand + rule share ONE color per background: Clay on cream,
   Charcoal on light cards, Stone on dark bands (client refs 2026-07-15).
   Hover = weight 600 → 800, same color (Figma-literal).
   ------------------------------------------------------------------ */
.link-manicule {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .875rem;      /* Figma large: 14px */
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.link-manicule__row {
    display: inline-flex;
    align-items: center;
    gap: .9375rem;           /* Figma large: 15px */
}

/* Real engraved-hand artwork masked to currentColor (raw SVG is
   stone-baked, built for dark bands — mask lets it tint anywhere). */
.icon--manicule {
    display: block;
    width: 3rem;             /* Figma large: 48×17 */
    aspect-ratio: 48 / 17;
    flex: none;
    background-color: currentColor;
    -webkit-mask-image: url("../img/icons/Manicule.svg");
    mask-image: url("../img/icons/Manicule.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.link-manicule__rule {
    display: block;
    align-self: stretch;
    height: 1px;
    background: currentColor;
    opacity: .55;
}

.link-manicule:hover,
.link-manicule:focus-visible {
    font-weight: 800;
    text-decoration: none;
}

/* Invisible bold twin reserves the ExtraBold width so hover doesn't shift layout. */
.link-manicule__label::after {
    content: attr(data-label);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 800;
}

.link-manicule--small {
    font-size: .6875rem;     /* Figma small: 11px */
    letter-spacing: .05em;
    gap: .3125rem;
}

.link-manicule--small .link-manicule__row {
    gap: .375rem;            /* Figma small: 6px */
}

.link-manicule--small .icon--manicule {
    width: 1.9375rem;        /* Figma small: 31×11 */
}

/* Light cards / panels: Charcoal (client ref: "Register – $1,495"). */
.registration-pkg .link-manicule,
.hs-pricing .link-manicule {
    color: var(--color-ink);
}

/* On Plum / dark / clay surfaces the manicule reads in Stone. */
.section--maroon .link-manicule,
.section--plum-dark .link-manicule,
.section--clay .link-manicule,
.section--dark .link-manicule,
.site-footer--rich .link-manicule {
    color: var(--color-on-maroon);
}

.content-flow > * + * {
    margin-top: 1rem;
}

.content-flow h2,
.section h2 {
    margin-top: 0;
    /* Track the H2 token (36px) instead of blowing up to 48px on desktop;
       clamp only eases it down on small screens. */
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.2;
}

.card-grid,
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}

.card {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.card h2,
.card h3 {
    margin-top: 0;
    line-height: 1.2;
}

/* Media card (Figma "Card/Info" with photo, e.g. Bookstore & Mercado band):
   stone panel, full-width photo slot flush to the top with its own rounded
   plum hairline frame, padded body below. Big Reads keeps its split layout —
   its .card-grid--big-reads rules come later in the file and win. */
.card--media {
    padding: 0;
    overflow: hidden;
    background: var(--color-stone-dark);
    border: none;
}

.card--media .card__media {
    aspect-ratio: 2 / 1;
    background: var(--color-paper);
    border: 1px solid var(--color-maroon);
    border-radius: var(--radius-lg);
}

.card--media .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.card--media .card__body {
    padding: var(--space-md);
}

.card--media .card__body h3 {
    margin: 0 0 .5rem;
}

.card--media .card__meta {
    font: var(--p6-font);
    font-size: .75rem;
    text-transform: none;
    letter-spacing: .03em;
    color: var(--color-maroon-light);
    margin-bottom: 0;
}

.card__eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card__eyebrow-row .eyebrow {
    margin: 0;
}

.card__badge {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta-band h2,
.cta-band p {
    margin: 0;
}

.embed-frame iframe {
    width: 100%;
    min-height: 560px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
}

.smlf-cvent-embed iframe {
    display: block;
    width: 100%;
    min-height: 720px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-white);
}

.smlf-form {
    display: grid;
    gap: 1rem;
    max-width: var(--max-narrow);
}

.smlf-form label {
    display: grid;
    gap: .4rem;
    font-weight: 700;
}

.smlf-form input,
.smlf-form textarea {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: .75rem .85rem;
    font: inherit;
    background: var(--color-white);
}

.single-image {
    margin: 0 auto 2rem;
    width: min(100% - (var(--space-page) * 2), var(--max-narrow));
}

.site-footer {
    border-top: 1px solid var(--color-line);
    padding: 3rem 0;
    color: var(--color-muted);
    /* Absorbs the leftover height of the body's 100svh flex frame, so on
       short pages the footer's own surface runs to the bottom of the
       screen instead of leaving bare page texture above or below it. */
    flex-grow: 1;
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.site-footer__brand {
    color: var(--color-ink);
    font-weight: 800;
}

@media (max-width: 760px) {
    /* Two-row header: brand + Menu on row 1, actions full-width on row 2 */
    .site-header__inner {
        flex-wrap: wrap;
        align-items: center;
        row-gap: .75rem;
        column-gap: 1rem;
        padding: .85rem 0;
        min-height: 0;
    }

    .site-brand {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: auto;
    }

    .site-brand__name {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .site-brand__logo {
        height: 40px;
    }

    .menu-toggle {
        order: 1;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--color-line);
        background: transparent;
        border-radius: 6px;
        padding: .55rem .9rem;
        font: inherit;
        font-weight: 600;
    }

    .header-actions {
        order: 2;
        flex: 1 0 100%;
        gap: .6rem;
    }

    .header-actions .button {
        flex: 1;
        min-height: 46px;
        font-size: .95rem;
        white-space: nowrap;
    }

    /* Slide-down drawer anchored to the bottom of the (sticky) header */
    .primary-nav {
        display: none;
        position: absolute;
        inset: calc(100% + .5rem) var(--space-page) auto;
        padding: .5rem;
        background: var(--color-panel);
        border: 1px solid var(--color-line);
        border-radius: 10px;
        box-shadow: var(--shadow-md);
    }

    .primary-nav.is-open {
        display: block;
    }

    .primary-nav__list,
    .footer-nav,
    .site-footer__inner,
    .cta-band {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-nav__list {
        gap: 0;
    }

    .primary-nav .menu-item {
        border-bottom: 1px solid var(--color-line);
    }

    .primary-nav .menu-item:last-child {
        border-bottom: none;
    }

    .primary-nav .menu-item > a,
    .primary-nav .menu-item > .primary-nav__label {
        display: block;
        width: 100%;
        padding: .85rem .75rem;
        text-align: left;
    }

    /* Submenus inline (no absolute dropdown on touch) */
    .primary-nav .sub-menu {
        position: static;
        display: none;
        min-width: 0;
        margin: 0;
        padding: 0 0 .4rem .75rem;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .primary-nav .sub-menu.is-open {
        display: block;
    }

    .primary-nav .sub-menu a {
        padding: .55rem .75rem;
        white-space: normal;
    }

    .hero {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Brand + dropdown navigation
   ============================================================ */
.site-brand__name {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.header-actions .button {
    min-height: 40px;
    padding: .5rem .9rem;
    font-size: .85rem;
}

.lang-toggle,
.search-toggle {
    border: 1px solid var(--color-line);
    background: transparent;
    border-radius: var(--radius);
    padding: .45rem .7rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.primary-nav__list {
    align-items: center;
    gap: 1.4rem;
}

.primary-nav > .primary-nav__list > .menu-item > a,
.primary-nav > .primary-nav__list > .menu-item > .primary-nav__label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem;
    font-weight: 600;
}

.primary-nav .menu-item {
    position: relative;
}

.primary-nav .menu-item-has-children > a::after,
.primary-nav .menu-item-has-children > .primary-nav__label::after {
    content: " \25be";
    color: var(--color-muted);
}

.primary-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: none;
    z-index: 30;
}

.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .sub-menu.is-open {
    display: block;
}

.primary-nav .sub-menu a {
    display: block;
    padding: .55rem 1.2rem;
    font-weight: 500;
    font-size: .95rem;
    white-space: nowrap;
}

.primary-nav .sub-menu a:hover {
    background: #f1ebe1;
}

/* ============================================================
   Hero stats + eyebrow polish
   ============================================================ */
.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* ============================================================
   Generic carousel (keynotes, testimonials)
   ============================================================ */
.carousel {
    position: relative;
}

.carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(100%, 280px), 1fr);
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: .5rem;
}

.carousel__track > * {
    scroll-snap-align: start;
}

.carousel__nav {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.carousel__nav button,
.announce__dots button,
.carousel__dots button {
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font: inherit;
}

.carousel__dots {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
}

.carousel__dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-line);
    border: none;
}

.carousel__dots button.is-active {
    background: var(--color-accent);
}

/* Keynote card — Figma "Card / Style=Image, Format=Vertical" (74:1078):
   photo on top, stone-dark body with clay subhead / serif caps title /
   description / underlined text-button. */
.keynote-card {
    background: var(--color-stone-dark);
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding-bottom: 30px;
}

.keynote-card__media {
    display: block;
}

.keynote-card img {
    aspect-ratio: 27 / 22; /* 270x220 crop from the component */
    object-fit: cover;
    width: 100%;
    display: block;
    background: var(--color-panel);
}

.keynote-card__body {
    padding: 20px 24px 0;
}

.keynote-card__subhead {
    font: var(--h7-font);
    text-transform: var(--h7-transform);
    letter-spacing: .03em;
    color: var(--color-accent);
    margin: 0 0 4px;
}

.keynote-card__name {
    font: var(--h4-font);
    text-transform: var(--h4-transform);
    color: var(--color-ink);
    margin: 0;
}

.keynote-card__name a {
    color: inherit;
    text-decoration: none;
}

.keynote-card__name a:hover {
    color: var(--color-accent);
}

.keynote-card__desc {
    font: var(--p5b-font);
    color: var(--color-ink);
    margin: 8px 0 0;
}

/* The card body is light stone even inside the maroon keynotes band, so the
   card text must keep its own colours. `.section--maroon h3` / `p` (0,1,1)
   otherwise out-specify the single-class card rules: the name/desc go
   near-white (invisible) and the clay subhead is washed to muted tan. Re-assert
   the card colours at 0,2,0 so the card wins. */
.section--maroon .keynote-card__subhead {
    color: var(--color-accent);
}

.section--maroon .keynote-card__name,
.section--maroon .keynote-card__desc {
    color: var(--color-ink);
}

/* Underlined clay text-button — one rule for every card family. */
.card__btn,
.keynote-card__btn {
    display: inline-block;
    font: var(--h7-font);
    text-transform: var(--h7-transform);
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.keynote-card__btn {
    margin-top: 16px;
}

.card__btn:hover,
.keynote-card__btn:hover {
    color: var(--color-accent-dark);
}

.keynote-card__ph {
    display: block;
    aspect-ratio: 27 / 22;
    background: color-mix(in srgb, var(--color-maroon) 8%, var(--color-panel));
}

.keynote-card__caption {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: .75rem;
    letter-spacing: .03em;
    color: var(--color-plum-light, #6c444b);
    margin: 12px 0 0;
}

/* Literary Spotlight teaser (Figma 171:14681): two-column head, right-aligned
   italic "Showing N of M", three fixed-width keynote-cards, foot row with
   italic note left / manicule link right. */
.spotlight__head {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 611px);
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
}

.spotlight__heading {
    margin: 0;
}

.spotlight__intro {
    margin: 0;
}

.spotlight__showing {
    font-family: var(--font-accent);
    font-style: italic;
    letter-spacing: .03em;
    opacity: .6;
    text-align: right;
    margin: var(--gap-cards) 0 var(--space-lg);
}

.spotlight__cards {
    display: flex;
    justify-content: center;
    gap: var(--gap-cards);
    flex-wrap: wrap;
}

.spotlight__cards .keynote-card {
    width: 270px;
    flex: 0 0 auto;
}

.spotlight__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: var(--space-lg);
}

.spotlight__note {
    font-family: var(--font-accent);
    font-style: italic;
    letter-spacing: .03em;
    margin: 0;
}

.spotlight__foot .section__cta {
    margin: 0;
}

@media (max-width: 900px) {
    .spotlight__head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .spotlight__showing {
        text-align: left;
    }
}

/* Two-column teaser (Figma "Two Column", hub nodes 171:14783 / 171:14778):
   serif caps heading + indented stats row or italic note left (440px),
   paragraph + bottom-right manicule link right (611px). */
.teaser-cols__grid {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 611px);
    /* Keep both columns adjacent with the fixed gap, then centre the pair in
       the band (Figma Two Column). `space-between` instead flung them to
       opposite edges, leaving a void in the centre on the 1344px band; `start`
       packed them hard left. Centring splits the leftover width evenly. */
    justify-content: center;
    align-items: start;
    gap: 2rem;
}

.teaser-cols .teaser-cols__heading {
    font: var(--h3-font);
    text-transform: var(--h3-transform);
    color: var(--color-maroon);
    margin: 0;
}

.teaser-cols__stats {
    display: flex;
    gap: var(--space-md);
    padding-left: var(--space-lg);
    margin-top: 4px;
}

.teaser-cols__stat {
    display: flex;
    flex-direction: column;
}

.teaser-cols__stat-num {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-accent);
}

.teaser-cols__stat-label {
    font: var(--h7-font);
    text-transform: var(--h7-transform);
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-ink);
}

.teaser-cols__note {
    font: var(--p6-font);
    letter-spacing: .03em;
    color: var(--color-maroon-light);
    padding-left: var(--space-lg);
    margin: 8px 0 0;
}

.teaser-cols__text {
    font: var(--p3-font);
    color: var(--color-ink);
    margin: 0;
}

/* Checklist in the body column (volunteer variant): plain small-dot list. */
.teaser-cols__items {
    font: var(--p3-font);
    color: var(--color-ink);
    margin: var(--space-md) 0 0;
    padding-left: 1.25em;
    list-style: "·  ";
}

.teaser-cols__items li + li {
    margin-top: 4px;
}

/* Link under the heading (volunteer variant) instead of bottom-right.
   Drop the base flex layout so the manicule sits flush-left with the
   heading (flex + flex-start left the rule stretching oddly); no stats
   row here to indent under. */
.teaser-cols__cta--title {
    display: block;
    margin: var(--space-md) 0 0;
}

.teaser-cols__cta {
    display: flex;
    justify-content: flex-end;
    margin: var(--space-lg) 0 0;
}

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

    .teaser-cols__stats,
    .teaser-cols__note {
        padding-left: 0;
    }

    .teaser-cols__cta {
        justify-content: flex-start;
    }

    .teaser-cols__cta--title {
        padding-left: 0;
    }
}

/* Header row on a card-grid section (Figma Big Reads 171:14789): title block
   left, section link (manicule) hanging bottom-right on the same row. */
.section__head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section__head-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.section__head-titles > :last-child {
    margin-bottom: 0;
}

/* Plain (non-head_row) card-grid headers get the same gap below the intro/
   heading before the cards as the head_row layout above — one consistent rule
   so Bookstore, Travel, etc. match Big Reads. Preceded by .section__head-row
   in the head_row case, so it never double-stacks that block's margin. */
.section__inner > h2 + .card-grid,
.section__inner > p:not(.section__cta) + .card-grid,
.section__inner > h2 + .accordion--panels,
.section__inner > p:not(.section__cta) + .accordion--panels {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.section__head-cta {
    flex: 0 0 auto;
    margin: 0;
    padding-bottom: .35rem;
}

@media (max-width: 640px) {
    .section__head-row {
        align-items: flex-start;
    }

    .section__head-cta {
        padding-bottom: 0;
    }
}

/* Centered text-block head on a card-grid section (Figma Travel 171:14796):
   eyebrow / heading / intro and the closing CTA all center. */
.section--head-center .section__inner > h2,
.section--head-center .section__inner > p {
    text-align: center;
}

.section--head-center .section__inner > p:not(.section__cta) {
    max-width: 665px;
    margin-inline: auto;
}

/* Travel & Accommodations cards (Figma 171:14796): four fixed-width stone
   panels — maguey icon, serif caps title, small description, underlined
   clay text-button. */
.card-grid--travel {
    display: flex;
    justify-content: center;
    gap: var(--gap-cards);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
}

.card-grid--travel .card {
    width: 283px;
    flex: 0 0 auto;
    background: var(--color-stone-dark);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-md) var(--space-lg);
}

.card-grid--travel .card__icon {
    /* bare engraved mark, not the base .card__icon accent chip */
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    justify-content: flex-start;
    margin-bottom: var(--space-md);
}

.card-grid--travel .card__icon svg {
    width: 66px;
    height: auto;
    color: var(--color-ink);
}

.card-grid--travel .card h3 {
    font: var(--h4-font);
    text-transform: var(--h4-transform);
    color: var(--color-ink);
    margin: 0 0 8px;
}

.card-grid--travel .card p {
    font: var(--p5b-font);
    color: var(--color-ink);
    margin: 0 0 var(--gap-cards);
    padding-inline: var(--space-md) var(--gap-cards);
}

.card-grid--travel + .section__cta {
    margin-top: var(--space-lg);
}

/* Conference Celebrations (Figma 171:14767): centered text block head,
   trio of fixed-width keynote-cards. */
.celebrations__head {
    text-align: center;
    max-width: 665px;
    margin: 0 auto var(--space-lg);
}

.celebrations__subline {
    font: var(--p3-font);
    color: var(--color-ink);
    margin: 8px 0 0;
}

.celebrations__cards {
    display: flex;
    justify-content: center;
    gap: var(--gap-cards);
    flex-wrap: wrap;
}

.celebrations__cards .keynote-card {
    width: 290px;
    flex: 0 0 auto;
}

/* Keynotes section — centered head, sky italic heading, italic footnote
   (Figma hub node 171:14635). Track shows exactly 4 cards per viewport on
   desktop (the Figma layout); the rest scroll behind the dots. */
.keynotes .carousel__track {
    grid-auto-columns: calc(25% - 15px); /* 4-up at the track's 20px gap */
}

@media (max-width: 900px) {
    .keynotes .carousel__track {
        grid-auto-columns: calc(50% - 10px); /* 2-up */
    }
}

@media (max-width: 600px) {
    .keynotes .carousel__track {
        grid-auto-columns: 85%; /* 1-up with a peek of the next card */
    }
}

.keynotes .keynotes__head {
    text-align: center;
    max-width: 60rem;
    margin: 0 auto 2.5rem;
}

.keynotes .keynotes__heading {
    color: var(--color-sky);
    font-style: italic;
    margin: 0 0 .75rem;
}

.keynotes .keynotes__sub {
    margin: 0;
}

.keynotes .carousel__dots {
    margin-top: 1.5rem;
}

.keynotes .keynotes__note {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    margin: 2rem 0 0;
}

.section--maroon .carousel__dots button {
    background: color-mix(in srgb, var(--color-on-maroon) 40%, var(--color-maroon));
    border: none;
}

.section--maroon .carousel__dots button.is-active {
    background: var(--color-sky);
}

/* ============================================================
   Pricing / packages
   ============================================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
}

.pricing-card {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pricing-card.is-best {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent);
}

.pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 1.6rem;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .7rem;
    border-radius: 999px;
}

.pricing-card__price {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 600;
}

.pricing-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.pricing-card__features li {
    padding-left: 1.4rem;
    position: relative;
    font-size: .95rem;
}

.pricing-card__features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
}

.pricing-card .button {
    margin-top: auto;
}

/* à-la-carte tabs + rows */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.tabs button {
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    border-radius: 999px;
    padding: .5rem 1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tabs button.is-active {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.addon-row,
.date-row,
.workshop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-line);
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonial {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
}

.testimonial blockquote {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.4;
}

.testimonial__author {
    font-weight: 600;
}

.testimonial__role {
    color: var(--color-muted);
    font-size: .9rem;
}

/* ============================================================
   Media grid (Watch & Listen)
   ============================================================ */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem;
}

.media-card {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.media-card__thumb {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    background: #e7e0d5;
}

.media-card__body {
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.media-card__platforms {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.media-card__platforms a {
    font-size: .85rem;
    font-weight: 600;
}

/* ============================================================
   Newsletter band
   ============================================================ */
.section--newsletter {
    background: var(--color-dark-panel);
    color: var(--color-on-dark);
}

.newsletter__form {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    max-width: 480px;
}

.newsletter__form input {
    flex: 1 1 220px;
    border: 1px solid var(--color-dark-line);
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: var(--radius);
    padding: .75rem .85rem;
    font: inherit;
}

/* ============================================================
   Sponsor / partner logo strips
   ============================================================ */
.sponsor-group + .sponsor-group {
    margin-top: 2rem;
}

.logo-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
    align-items: center;
}

.logo-strip img {
    max-height: 70px;
    width: auto;
    margin: 0 auto;
    filter: grayscale(1);
    opacity: .8;
}

.logo-strip a:hover img {
    filter: none;
    opacity: 1;
}

/* ============================================================
   Timeline (origin story)
   ============================================================ */
.timeline {
    border-left: 2px solid var(--color-line);
    margin-left: .5rem;
    padding-left: 1.5rem;
    display: grid;
    gap: 1.6rem;
}

.timeline__item {
    position: relative;
}

.timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 6px);
    top: .4rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-accent);
}

.timeline__year {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--color-accent-dark);
}

/* ============================================================
   Stat cards
   ============================================================ */
/* Figma "Flashcard / Horizontal" (4:1200): stone card, icon left, then a
   baseline row of serif number + caps mono label with an italic Crimson
   sub-line underneath. */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1.25rem;
}

.stat-card {
    background: var(--color-panel-light);
    border: 1px solid var(--color-line);
    border-radius: 12px;
    min-height: 88px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: left;
}

.stat-card__icon {
    display: block;
    flex: none;
    width: 2.45rem;
    height: 2.65rem;
}

.stat-card__icon .icon {
    width: 100%;
    height: 100%;
}

.stat-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-ink);
    min-width: 0;
}

.stat-card__row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.stat-card__num {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-ink);
}

.stat-card__label {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.stat-card__text {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: .03em;
}

.section--maroon .stat-card {
    background: var(--color-panel-light);
    border-color: var(--color-panel-light);
    color: var(--color-ink);
}

.section--maroon .stat-card__num {
    color: var(--color-ink);
}

/* ============================================================
   Split feature
   ============================================================ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.split--reverse .split__media {
    order: 2;
}

.split__media img {
    border-radius: var(--radius-lg);
    width: 100%;
    object-fit: cover;
}

/* ============================================================
   Anchor / jump navigation
   ============================================================ */
.anchor-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 76px;
    z-index: 9;
    background: rgba(250, 247, 242, .95);
    border-bottom: 1px solid var(--color-line);
    backdrop-filter: blur(6px);
    /* Hidden until the hero scrolls past; JS adds .is-pinned (site.js) once the
       hero's bottom rip clears the top of the viewport. Fixed (not sticky) so it
       reserves no flow space — the hero rip meets the maroon stats band. */
    transform: translateY(-140%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
}

.anchor-nav.is-pinned {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* When the WP admin bar is present the sticky header is pushed down, so the
   anchor-nav must clear header (76px) + admin bar too, or it slides under the
   header on scroll (logged-in only). Breakpoints mirror .admin-bar .site-header
   above; the <=760px rule keeps the mobile base (top:0) since this selector
   would otherwise out-specify the mobile reset below. */
.admin-bar .anchor-nav {
    top: 108px; /* 76 header + 32 admin bar */
}

@media (max-width: 782px) {
    .admin-bar .anchor-nav {
        top: 122px; /* 76 header + 46 admin bar */
    }
}

@media (max-width: 760px) {
    .admin-bar .anchor-nav {
        top: 0;
    }
}

.anchor-nav__list {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding: .6rem 0;
    list-style: none;
    margin: 0;
}

.anchor-nav a {
    white-space: nowrap;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-muted);
}

.anchor-nav a:hover {
    background: #f1ebe1;
    color: var(--color-ink);
}

/* ============================================================
   People grids (team groups, faculty filter)
   ============================================================ */
.people-grid,
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1.25rem;
}

.team-group + .team-group {
    margin-top: 2.5rem;
}

.person-card {
    text-align: left;
}

.person-card img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: .75rem;
    background: #e7e0d5;
}

.person-card__name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    margin: 0;
}

.person-card__role {
    color: var(--color-muted);
    font-size: .9rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.filter-bar button {
    border: 1px solid var(--color-line);
    background: var(--color-panel);
    border-radius: 999px;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Reset link beside the facet result count (workshops multi-facet filter). */
.facet-clear {
    border: 0;
    background: none;
    padding: 0;
    margin-left: .75rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

.filter-bar button.is-active {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

[data-filter-hidden] {
    display: none !important;
}

/* ============================================================
   Workshop table
   ============================================================ */
.workshop-row {
    flex-wrap: wrap;
}

.workshop-row__meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--color-muted);
    font-size: .85rem;
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.accordion {
    border-top: 1px solid var(--color-line);
}

.accordion__item {
    border-bottom: 1px solid var(--color-line);
}

.accordion__q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.1rem 0;
    font: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.accordion__q::after {
    content: "+";
    color: var(--color-accent);
    font-size: 1.4rem;
    line-height: 1;
}

.accordion__item.is-open .accordion__q::after {
    content: "\2212";
}

.accordion__a {
    display: none;
    padding: 0 0 1.2rem;
    color: var(--color-muted);
}

.accordion__item.is-open .accordion__a {
    display: block;
}

/* Contest variant (Figma 171:14706): centered stone-dark head, numbered
   Plum pill rows "NN / TITLE ... LEARN MORE +", each expanding onto three
   light cards (guidelines / judge / registration). */
.contest .section__inner {
    max-width: 892px;
}

.contest__head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.contest__heading {
    text-transform: uppercase;
    color: var(--color-maroon);
    margin-bottom: 1rem;
}

.contest__head .icon--maguey {
    width: 66px;
    height: auto;
    color: var(--color-plum-light, #6c444b);
    margin: 0 auto 1rem;
    display: block;
}

.contest__intro {
    max-width: 620px;
    margin: 0 auto 2.25rem;
}

.contest__dates {
    font-family: var(--font-mono);
    font-size: .875rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.contest__dates strong {
    color: inherit;
    font-weight: 800;
}

.accordion--contest {
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion--contest .accordion__item {
    border-bottom: none;
}

.accordion--contest .accordion__q {
    align-items: center;
    background: var(--color-maroon);
    color: var(--color-on-maroon, #f2ebe3);
    border-radius: 20px;
    min-height: 92px;
    padding: 1rem 36px;
    gap: 24px;
}

.accordion--contest .accordion__q::after {
    content: none; /* base accordion "+" replaced by .contest__expand */
}

.contest__num {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: .03em;
}

.accordion--contest .accordion__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.5rem;
    text-transform: uppercase;
    flex: 1;
}

.accordion--contest .accordion__toggle {
    margin-left: auto;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .875rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.contest__expand::before {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 300;
}

.accordion__item.is-open .contest__expand::before {
    content: "\2212";
}

.accordion--contest .accordion__a {
    padding: 12px 0 0 36px;
    color: inherit;
}

.contest__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-items: stretch;
}

.contest-card {
    background: var(--color-panel-light);
    border-radius: 20px;
    padding: 1.5rem;
    font-size: .8rem;
    line-height: 1.45;
}

.contest-card .eyebrow {
    color: var(--color-accent);
    margin-bottom: .75rem;
}

.contest-card ul {
    margin: 0;
    padding-left: 1.1rem;
}

.contest-card li {
    margin-bottom: .35rem;
}

.contest-card__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-maroon);
    margin-bottom: .5rem;
}

.contest-card__dates {
    list-style: none;
    padding: 0;
}

.contest-card__dates li {
    margin-bottom: .2rem;
}

.contest-card__submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: .875rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contest-card__submit .icon--manicule {
    width: 2.2rem;
    height: auto;
}

.contest__contact,
.contest__footnote {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1rem;
    text-align: center;
}

.contest__contact {
    margin: 1.25rem 0 .25rem;
}

.contest__contact a {
    color: var(--color-accent);
}

.contest__footnote {
    color: var(--color-accent);
    margin-top: 2rem;
}

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

    .accordion--contest .accordion__a {
        padding-left: 16px;
    }

    .accordion--contest .accordion__q {
        padding: 1rem 20px;
        min-height: 72px;
        gap: 14px;
    }

    .accordion--contest .accordion__title {
        font-size: 1.15rem;
    }
}

/* Accordion on the Plum/Dark band (2027 hub Writing Contest): the base
   accordion assumes a light surface — buttons fall back to UA black and
   bodies to the dark muted token, both unreadable on Plum. */
.section--plum-dark .accordion__q {
    color: var(--color-on-maroon);
}

.section--plum-dark .accordion__a {
    color: var(--color-on-maroon-muted);
}

.section--plum-dark .accordion__a h4,
.section--plum-dark .accordion__a strong {
    color: var(--color-on-maroon);
}

.section--plum-dark .accordion__q::after,
.section--plum-dark .accordion--contest .accordion__toggle {
    color: var(--color-on-maroon-accent);
}

.section--plum-dark .accordion__item {
    border-bottom-color: rgba(246, 236, 226, .25);
}

/* Panels variant — Figma "Dropdown": a Plum row (title + panelists +
   day/time + chevron) that opens onto a Stone body. */
.accordion--panels {
    border-top: none;
}

.accordion--panels .accordion__item {
    border-bottom: none;
    margin-bottom: .75rem;
}

.accordion--panels .accordion__q {
    align-items: center;
    gap: 1.5rem;
    padding: 1.15rem 1.5rem;
    background: var(--color-maroon);
    color: var(--color-on-maroon);
    border-radius: var(--radius-lg);
}

.accordion--panels .accordion__item.is-open .accordion__q {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.accordion--panels .panel-row__main {
    flex: 1;
    min-width: 0;
}

.accordion--panels .panel-row__title {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-on-maroon);
}

.accordion--panels .panel-row__people {
    display: block;
    margin-top: .35rem;
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-white);
    opacity: .92;
}

.accordion--panels .panel-row__aside {
    flex: none;
    text-align: right;
}

.accordion--panels .panel-row__when {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-on-maroon-muted);
}

/* Chevron replaces the default +/− glyph and rotates on open. */
.accordion--panels .accordion__q::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-on-maroon);
    border-bottom: 2px solid var(--color-on-maroon);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-fast);
}

.accordion--panels .accordion__item.is-open .accordion__q::after {
    transform: translateY(2px) rotate(225deg);
}

.accordion--panels .accordion__a {
    padding: 1.2rem 1.5rem 1.4rem;
    background: var(--color-panel-light);
    color: var(--color-ink);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.accordion--panels .accordion__a p {
    margin: 0 0 .75rem;
}

@media (max-width: 560px) {
    .accordion--panels .accordion__q {
        flex-wrap: wrap;
    }

    .accordion--panels .panel-row__aside {
        text-align: left;
    }
}

/* ============================================================
   Announcement band (rotating)
   ============================================================ */
.section--announce {
    background: var(--color-dark);
    color: var(--color-on-dark);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.announce__item {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.announce__item.is-active {
    display: flex;
}

.announce__item a {
    color: var(--color-on-dark-accent);
    font-weight: 600;
}

.announce__dots {
    display: flex;
    gap: .4rem;
    margin-top: .75rem;
}

.announce__dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: var(--color-on-dark-line);
    padding: 0;
}

.announce__dots button.is-active {
    background: var(--color-on-dark-accent);
}

/* ============================================================
   Important dates
   ============================================================ */
.dates-list .date-row:last-child,
.addon-list .addon-row:last-child {
    border-bottom: none;
}

.date-row__label {
    font-weight: 600;
}

/* ============================================================
   Footer columns + newsletter
   ============================================================ */
.site-footer--rich {
    background: var(--color-dark);
    color: var(--color-on-dark-muted);
    border-top: none;
}

.site-footer--rich a {
    color: var(--color-on-dark-link);
}

.site-footer--rich .site-footer__brand,
.site-footer--rich h3 {
    color: var(--color-white);
}

.site-footer--rich .footer-nav {
    flex-direction: column;
    gap: .5rem;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem 2.5rem;
    align-items: start;
}

/* Brand + newsletter blocks read wider than the link columns. */
.footer-col--brand,
.footer-col--newsletter {
    grid-column: span 2;
    min-width: 220px;
}

.footer-col__title {
    margin: 0 0 1rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-address {
    font-style: normal;
    line-height: 1.7;
    font-size: .9rem;
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
    font-size: .9rem;
}

.footer-list a {
    text-decoration: none;
}

.footer-list a:hover {
    text-decoration: underline;
}

.footer-legal {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line-dark);
    font-size: .85rem;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
    .split {
        grid-template-columns: 1fr;
    }

    .split--reverse .split__media {
        order: 0;
    }

    .anchor-nav {
        top: 0;
    }
}

/* ============================================================
   Team accordion
   ============================================================ */
.team-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
}

.team-group {
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: .75rem;
    overflow: hidden;
}

.team-group__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.team-group__summary::-webkit-details-marker { display: none; }

.team-group__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 15%, white);
    color: var(--color-accent);
    flex-shrink: 0;
}

.team-group__meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
}

.team-group__title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-ink);
}

.team-group__desc {
    font-size: .875rem;
    color: var(--color-muted);
}

.team-group__chevron {
    color: var(--color-muted);
    flex-shrink: 0;
    transition: transform .2s ease;
}

details[open] .team-group__chevron {
    transform: rotate(180deg);
}

.team-group .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    padding: 1.5rem;
    border-top: 1px solid var(--color-line);
}

.team-group__empty {
    padding: 1rem 1.5rem;
    color: var(--color-muted);
    font-size: .875rem;
    border-top: 1px solid var(--color-line);
}

/* Person card — centered portrait layout (team accordion) */
.team-accordion .person-card {
    align-items: center;
    text-align: center;
}

.team-accordion .person-card img,
.team-accordion .person-card__photo {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: .5rem;
    margin-bottom: 0;
}

.team-accordion .person-card__photo--placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-line);
    border-radius: .5rem;
}

.team-accordion .person-card__name {
    font-size: .9rem;
    margin: 0;
}

.team-accordion .person-card__role {
    font-size: .8rem;
    color: var(--color-muted);
    margin: 0;
}

.team-accordion .person-card__bio {
    font-size: .8rem;
    color: var(--color-muted);
    margin: 0;
}

/* ============================================================
   Hero: centered variant, dark support, badge
   ============================================================ */
.hero--centered {
    display: block;
    text-align: center;
    max-width: var(--max-narrow);
    margin-inline: auto;
}

.hero--centered .hero__text {
    margin-inline: auto;
}

.hero--centered .hero__actions {
    justify-content: center;
}

.section--dark h1 {
    color: var(--color-white);
}

.section--dark .eyebrow {
    color: var(--color-on-dark-accent);
}

.section--dark .hero__text {
    color: var(--color-on-dark-muted);
}

.hero__badge {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: .4rem 1.1rem;
    font-size: .85rem;
    color: var(--color-on-dark-link);
    margin: 1.5rem 0 0;
}

/* ============================================================
   Get Involved button nav (support page)
   ============================================================ */
.section--get-involved {
    padding: 2rem 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
}

.get-involved-nav {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

/* ============================================================
   Card grid: icon variant
   ============================================================ */
.card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fde8e2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.card__icon svg {
    width: 24px;
    height: 24px;
}

.card-grid--icon-cols .card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 1rem 0;
    text-align: center;
}

.card-grid--icon-cols .card__icon {
    margin-inline: auto;
}

/* ============================================================
   CTA band: dark variant, multi-link, outline-white buttons
   ============================================================ */
.section--cta-dark {
    background: var(--color-dark);
    color: var(--color-on-dark);
}

.section--cta-dark h2 {
    color: var(--color-white);
}

.cta-band--stack {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.cta-band__links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}

.button--outline-white {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    color: var(--color-white);
}

.button--outline-white:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--color-white);
}

/* ============================================================
   Program Schedule
   ============================================================ */
.schedule-day {
    margin-top: 2.5rem;
}

.schedule-day__header {
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
}

.schedule-row {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition: opacity 0.15s ease;
}

.schedule-row.is-dimmed {
    opacity: 0.3;
}

.schedule-row__time {
    flex: 0 0 5.5rem;
    text-align: right;
    font-weight: 600;
}

.schedule-row__body {
    flex: 1;
}

.schedule-row__body p {
    margin: 0.15rem 0 0;
}

.schedule-row__badge {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.schedule-row--keynote { border-left-color: #b45309; }
.schedule-row--workshop { border-left-color: #4338ca; }
.schedule-row--intensive { border-left-color: #6d28d9; }
.schedule-row--panel { border-left-color: #0f766e; }
.schedule-row--spotlight { border-left-color: #be123c; }
.schedule-row--celebration { border-left-color: #c2410c; }
.schedule-row--free-community { border-left-color: #15803d; }


/* ============================================================
   Page builds from signed-off Figma prototype (Jul 2026)
   ============================================================ */


/* ==== WORKSHOPS (/conference/workshops) ==== */

/* The delivered Figma frame reworks this page into three vertical zones: a
   full-bleed cream (Stone) hero with one image on each side, a dark Plum filter+grid zone edged by
   torn-paper transitions, and a sunset-lit community CTA band. A faint paper
   texture tints the whole page. All selectors are scoped to the template body
   class; the CTA band + filter buttons are shared markup restyled in place. */

/* --- Page base + full-page paper-grain overlay ------------------------- */
body.page-template-template-workshops {
    background-color: var(--color-panel-light); /* Stone base behind every zone */
}

/* 5%-opacity grain sits over the whole frame (Figma mix-blend: darken). Fixed,
   non-interactive, above content so the blend reads. NOTE: source asset is
   heavy — see build warnings; a production pass should recompress or drop it. */
body.page-template-template-workshops::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: darken;
    background: url("../img/workshops/page-texture-overlay.webp") center / cover no-repeat;
}

/* --- Hero: cream field with one supplied image on each side ------------ */
.page-template-template-workshops .workshops-hero {
    position: relative;
    overflow: hidden;
    background: transparent; /* background-less: the page's textured Stone base shows through */
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.page-template-template-workshops .workshops-hero__media {
    position: absolute;
    bottom: 0;
    z-index: 1;
    margin: 0;
    pointer-events: none;
}

.page-template-template-workshops .workshops-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

.page-template-template-workshops .workshops-hero__media--left {
    left: 0;
    width: clamp(150px, 21vw, 326px);
}

.page-template-template-workshops .workshops-hero__media--right {
    right: 0;
    width: clamp(210px, 30vw, 465px);
}

.page-template-template-workshops .workshops-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Delivered H1 is title-case ("Workshops & Intensives"), not the sitewide
   uppercase H1 treatment. */
.page-template-template-workshops .workshops-hero__content h1 {
    text-transform: none;
}

.page-template-template-workshops .page-header__intro {
    font: var(--p2-font);
    color: var(--color-muted);
    max-width: 42rem;
    margin: 0 auto;
}

/* --- Dark filter + grid zone, with torn-paper edges ------------------- */
/* The whole filter/grid band flips to Plum/Dark; torn-paper pseudo-bands hand
   the cream hero off at the top and the sunset CTA off at the bottom. The torn
   SVGs are Plum/Dark shapes on transparent, so they read as the dark zone
   tearing into its lighter neighbours. */
.page-template-template-workshops .section--workshops-grid {
    position: relative;
    z-index: 1;
    background: var(--color-maroon-dark);
    color: var(--color-on-maroon);
    padding-block: clamp(3rem, 7vw, 6rem);
}

.page-template-template-workshops .section--workshops-grid::before,
.page-template-template-workshops .section--workshops-grid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(28px, 4.5vw, 60px);
    pointer-events: none;
}

/* Top edge — sitewide rip convention: the dark grid zone below tears UP into
   the (background-less) hero, so the rip sits at the bottom of the hero, faces
   up, and carries the colour of this section below. Token-coloured strip
   masked by the shared torn-paper silhouette, same as the homepage seams. */
.page-template-template-workshops .section--workshops-grid::before {
    bottom: 100%;
    background-color: var(--color-maroon-dark);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: scaleY(-1);
}

/* Bottom edge: dark band hangs below the zone, flipped so the flat side meets
   the section and the jag tears down into the orange CTA. */
.page-template-template-workshops .section--workshops-grid::after {
    bottom: 0;
    z-index: 2;
    transform: translateY(100%) scaleY(-1);
    background: url("../img/workshops/section-torn-paper-bottom.svg") center top / 100% 100% no-repeat;
}

/* --- Two-tier text-tab filter ----------------------------------------- */
.page-template-template-workshops .workshop-filter {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Radios drive the CSS-only single-open disclosure; kept off-screen but live. */
.page-template-template-workshops .workshop-filter__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.page-template-template-workshops .workshop-filter__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-bottom: 1rem;
}

.page-template-template-workshops .workshop-filter__label {
    font: var(--p6-font);
    color: var(--color-on-maroon);
}

.page-template-template-workshops .workshop-filter__tab {
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-on-maroon);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.page-template-template-workshops .workshop-filter__tab:hover {
    color: var(--color-ochre);
}

/* Active facet-category tab: ExtraBold (faux-bold if Inconsolata 800 isn't
   loaded) + underline. Explicit per-facet so each :checked radio matches its
   own tab; harmless when a facet has no options and never renders. */
.page-template-template-workshops #wf-date:checked ~ .workshop-filter__tabs label[for="wf-date"],
.page-template-template-workshops #wf-session:checked ~ .workshop-filter__tabs label[for="wf-session"],
.page-template-template-workshops #wf-format:checked ~ .workshop-filter__tabs label[for="wf-format"],
.page-template-template-workshops #wf-track:checked ~ .workshop-filter__tabs label[for="wf-track"],
.page-template-template-workshops #wf-level:checked ~ .workshop-filter__tabs label[for="wf-level"],
.page-template-template-workshops #wf-instructor:checked ~ .workshop-filter__tabs label[for="wf-instructor"] {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* Only the open facet's option row shows. */
.page-template-template-workshops .workshop-filter__panels .filter-bar {
    display: none;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    margin: 0;
}

.page-template-template-workshops #wf-date:checked ~ .workshop-filter__panels .filter-bar[data-facet="date"],
.page-template-template-workshops #wf-session:checked ~ .workshop-filter__panels .filter-bar[data-facet="session"],
.page-template-template-workshops #wf-format:checked ~ .workshop-filter__panels .filter-bar[data-facet="format"],
.page-template-template-workshops #wf-track:checked ~ .workshop-filter__panels .filter-bar[data-facet="track"],
.page-template-template-workshops #wf-level:checked ~ .workshop-filter__panels .filter-bar[data-facet="level"],
.page-template-template-workshops #wf-instructor:checked ~ .workshop-filter__panels .filter-bar[data-facet="instructor"] {
    display: flex;
}

/* Leading expand glyph (Stone dash) before the open facet's options. */
.page-template-template-workshops .workshop-filter__panels .filter-bar::before {
    content: "";
    flex: none;
    width: 18px;
    height: 12px;
    background: url("../img/workshops/filter-expand-icon.svg") center / contain no-repeat;
}

/* Options: reset the shared pill chrome down to plain tracked text links. */
.page-template-template-workshops .workshop-filter__panels .filter-bar button {
    min-height: 0;
    padding: .15rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-on-maroon);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.page-template-template-workshops .workshop-filter__panels .filter-bar button:hover {
    color: var(--color-ochre);
}

.page-template-template-workshops .workshop-filter__panels .filter-bar button.is-active {
    background: transparent;
    border-color: transparent;
    color: var(--color-ochre);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- Result count ----------------------------------------------------- */
.page-template-template-workshops .workshop-count {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    font: var(--p6-font);
    color: var(--color-on-maroon);
    opacity: .8;
    text-align: right;
}

/* --- Workshop card grid (2-up) ---------------------------------------- */
.page-template-template-workshops .workshop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 2.5vw, 1.5rem);
}

/* Cards drop the white panel + hairline meta: a Plum header strip over a Stone
   body, rounded corners clipped by overflow. */
.page-template-template-workshops .workshop-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-stone-dark);
    color: var(--color-ink);
    text-decoration: none;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* Only real (linked) cards get the click affordance. */
.page-template-template-workshops a.workshop-card:hover,
.page-template-template-workshops a.workshop-card:focus-visible {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.page-template-template-workshops .workshop-card__tagbar {
    background: var(--color-maroon);
    padding: .6rem clamp(1rem, 2vw, 1.5rem);
    text-align: right;
}

.page-template-template-workshops .workshop-card__tags {
    font: var(--p6-font);
    color: var(--color-panel-light);
}

.page-template-template-workshops .workshop-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(1.1rem, 2vw, 1.5rem);
}

.page-template-template-workshops .workshop-card__instructor {
    margin: 0;
    font: var(--p5-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}

.page-template-template-workshops .workshop-card__title {
    margin: 0;
    font: var(--h4-font);
    text-transform: none;
    color: var(--color-ink);
}

/* Figtree 12/18 — smaller than any body token, so sized locally. */
.page-template-template-workshops .workshop-card__desc {
    margin: .15rem 0 0;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--color-muted);
}

/* Session + day/time: plain italic Crimson, no hairline rule (Figma). */
.page-template-template-workshops .workshop-card__meta {
    margin-top: .4rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 600;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--color-muted);
}

/* --- Community CTA band (shared markup, sunset restyle) ---------------- */
/* Flat Clay fill → full-bleed sunset artwork; a squiggle divider under the H2;
   outline-pill links downgraded to plain underlined text links. */
.page-template-template-workshops .section--cta {
    position: relative;
    background: var(--color-accent) url("../img/workshops/cta-band-sunset-bg.webp") center / cover no-repeat;
}

.page-template-template-workshops .section--cta .cta-band h2 {
    position: relative;
}

.page-template-template-workshops .section--cta .cta-band h2::after {
    content: "";
    display: block;
    width: min(260px, 60%);
    height: 18px;
    margin: 1.1rem auto 0;
    background: url("../img/workshops/cta-band-squiggle-divider.svg") center / contain no-repeat;
}

.page-template-template-workshops .section--cta .cta-band__links {
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

.page-template-template-workshops .section--cta .button--outline-white {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-white);
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.page-template-template-workshops .section--cta .button--outline-white:hover {
    background: transparent;
    color: var(--color-ochre);
}

/* --- Responsive (show both supplied images below copy) ---------------- */
@media (max-width: 900px) {
    .page-template-template-workshops .workshops-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-bottom: 0;
    }
    .page-template-template-workshops .workshops-hero__content {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .page-template-template-workshops .workshops-hero__media {
        position: relative;
        bottom: auto;
        grid-row: 2;
        width: 100%;
        align-self: end;
    }
    .page-template-template-workshops .workshops-hero__media--left {
        left: auto;
        grid-column: 1;
    }
    .page-template-template-workshops .workshops-hero__media--right {
        right: auto;
        grid-column: 2;
    }

    .page-template-template-workshops .workshop-grid {
        grid-template-columns: 1fr;
    }

    .page-template-template-workshops .workshop-filter__tabs,
    .page-template-template-workshops .workshop-filter__panels .filter-bar {
        gap: .75rem 1.25rem;
    }

    .page-template-template-workshops .workshop-count {
        text-align: left;
    }
}

/* Keep centered copy clear of both hero images. */
.page-template-template-workshops .workshops-hero__content h1 {
    text-transform: uppercase;
    font-size: clamp(2rem, 5.2vw, 3.75rem); /* was base clamp(2.5rem,7vw,5.8rem) */
    line-height: 1.02;
    overflow-wrap: break-word;              /* never let a word bleed past column */
    text-wrap: balance;                     /* tidy 2-line wrap at mid widths */
}

@media (min-width: 901px) {
    .page-template-template-workshops .workshops-hero__content {
        max-width: min(42rem, 46vw);
        margin-inline: auto;
        padding-inline: clamp(0.5rem, 2vw, 1.5rem);
    }
}

/* ==== PROGRAM SCHEDULE (/conference/schedule) ==== */
/* Page-scoped styles for template-schedule.php. All selectors namespaced
   under the .page-template-template-schedule body class. Category colour
   triads (Tailwind -100/-300/-800, sampled + verified against the Figma
   prototype) are page-scoped custom properties so the legend chips, event
   cards, and badges share one source of truth and cannot drift. Tokens only;
   inlines a page-local --p7-font (12px micro-caption) that the shared type
   ladder (P1–P6) does not cover. */

.page-template-template-schedule {
    --p7-font: 400 12px/16px var(--font-sans);
}

/* --- Category colour triads (single source of truth) ---------------- */
.page-template-template-schedule .schedule-row--keynote,
.page-template-template-schedule .schedule-chip--keynote { --cat-bg: #fef3c7; --cat-border: #fcd34d; --cat-text: #92400e; }
.page-template-template-schedule .schedule-row--workshop,
.page-template-template-schedule .schedule-chip--workshop { --cat-bg: #e0e7ff; --cat-border: #a5b4fc; --cat-text: #3730a3; }
.page-template-template-schedule .schedule-row--intensive,
.page-template-template-schedule .schedule-chip--intensive { --cat-bg: #ede9fe; --cat-border: #c4b5fd; --cat-text: #5b21b6; }
.page-template-template-schedule .schedule-row--panel,
.page-template-template-schedule .schedule-chip--panel { --cat-bg: #ccfbf1; --cat-border: #5eead4; --cat-text: #115e59; }
.page-template-template-schedule .schedule-row--spotlight,
.page-template-template-schedule .schedule-chip--spotlight { --cat-bg: #ffe4e6; --cat-border: #fda4af; --cat-text: #9f1239; }
.page-template-template-schedule .schedule-row--celebration,
.page-template-template-schedule .schedule-chip--celebration { --cat-bg: #ffedd5; --cat-border: #fdba74; --cat-text: #9a3412; }
.page-template-template-schedule .schedule-row--free,
.page-template-template-schedule .schedule-chip--free { --cat-bg: #dcfce7; --cat-border: #86efac; --cat-text: #166534; }

/* --- Hero ----------------------------------------------------------- */
.page-template-template-schedule .schedule-hero {
    background: linear-gradient(150deg, var(--color-panel-light) 0%, var(--color-paper) 48%, color-mix(in srgb, var(--color-panel-light) 55%, var(--color-paper)) 100%);
    text-align: center;
}

.page-template-template-schedule .schedule-hero__inner {
    max-width: var(--max-narrow);
    text-align: center;
}

.page-template-template-schedule .schedule-hero .eyebrow {
    margin-bottom: 1rem;
}

.page-template-template-schedule .schedule-hero__title {
    margin: 0 0 1.25rem;
    font: 500 clamp(2.5rem, 6vw, 3.9rem)/1.03 var(--font-serif);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
}

.page-template-template-schedule .schedule-hero__subtitle {
    margin: 0 auto 2rem;
    max-width: 42rem;
    font: var(--p2-font);
    color: var(--color-muted);
}

.page-template-template-schedule .schedule-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.page-template-template-schedule .schedule-hero__actions .button {
    gap: .5rem;
}

.page-template-template-schedule .button svg {
    width: 1.1em;
    height: 1.1em;
    flex: none;
}

/* --- Category legend band ------------------------------------------- */
.page-template-template-schedule .schedule-legend {
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-line);
    padding: 1.25rem 0;
}

.page-template-template-schedule .schedule-legend__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 1rem;
}

.page-template-template-schedule .schedule-chip {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: var(--cat-bg);
    border: 1px solid var(--cat-border);
    color: var(--cat-text);
    white-space: nowrap;
}

/* --- Filter band ---------------------------------------------------- */
.page-template-template-schedule .schedule-filter {
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
    padding: 1.1rem 0;
}

.page-template-template-schedule .schedule-filter__bar {
    justify-content: center;
    margin-bottom: 0;
}

/* --- Timeline reading column ---------------------------------------- */
.page-template-template-schedule .schedule-timeline {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.page-template-template-schedule .schedule-timeline__inner {
    width: min(100% - (var(--space-page) * 2), 1040px);
    margin-inline: auto;
}

/* --- Day block ------------------------------------------------------ */
.page-template-template-schedule .schedule-day {
    margin-top: 0;
}

.page-template-template-schedule .schedule-day + .schedule-day {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-template-template-schedule .schedule-day__header {
    display: block;
    border-bottom: 2px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
}

.page-template-template-schedule .schedule-day__name {
    margin: 0 0 .35rem;
    font: 500 clamp(1.9rem, 3.5vw, 2.4rem)/1.1 var(--font-serif);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
}

.page-template-template-schedule .schedule-day__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1.5rem;
}

.page-template-template-schedule .schedule-day__date {
    font: var(--p4-font);
    color: var(--color-muted);
}

.page-template-template-schedule .schedule-day__theme {
    font-size: .95rem;
    font-weight: 500;
    color: var(--color-accent);
    text-transform: none;
}

.page-template-template-schedule .schedule-day__rows {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* --- Event card (full-tint) ----------------------------------------- */
.page-template-template-schedule .schedule-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0;
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--cat-border, var(--color-line));
    border-radius: 14px;
    background: var(--cat-bg, var(--color-panel));
    color: var(--cat-text, var(--color-ink));
}

.page-template-template-schedule .schedule-row__time {
    flex: 0 0 6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    padding-right: 1rem;
    border-right: 1px solid color-mix(in srgb, var(--cat-text) 20%, transparent);
    text-align: right;
}

.page-template-template-schedule .schedule-row__time-val {
    font-size: .95rem;
    font-weight: 700;
    color: var(--cat-text);
}

.page-template-template-schedule .schedule-row__dur {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font: var(--p7-font);
    color: var(--color-muted);
    white-space: nowrap;
}

.page-template-template-schedule .schedule-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.page-template-template-schedule .schedule-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cat-text);
}

.page-template-template-schedule .schedule-row__desc {
    margin: .3rem 0 0;
    font: var(--p4-font);
    line-height: 1.5;
    color: var(--color-muted);
}

.page-template-template-schedule .schedule-row__loc {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: .4rem 0 0;
    font: var(--p7-font);
    color: var(--color-muted);
}

.page-template-template-schedule .schedule-row__dur svg,
.page-template-template-schedule .schedule-row__loc svg {
    width: 13px;
    height: 13px;
    flex: none;
    opacity: .8;
}

/* Condensed block rows disclose the sessions running inside them. */
.page-template-template-schedule .schedule-row__sessions {
    margin: .45rem 0 0;
}

.page-template-template-schedule .schedule-row__sessions-toggle {
    width: fit-content;
    cursor: pointer;
    font: var(--p7-font);
    font-weight: 600;
    color: var(--cat-text);
}

.page-template-template-schedule .schedule-row__session-list {
    list-style: none;
    margin: .6rem 0 0;
    padding: .6rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--cat-text) 20%, transparent);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .4rem 1.25rem;
}

.page-template-template-schedule .schedule-row__session {
    font: var(--p7-font);
    color: var(--cat-text);
}

.page-template-template-schedule .schedule-row__session a {
    color: inherit;
}

.page-template-template-schedule .schedule-row__session-by {
    display: block;
    color: var(--color-muted);
}

/* Inline neutral "Add-on" badge after a title */
.page-template-template-schedule .schedule-row__addon {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: .1rem .5rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-white) 55%, transparent);
    color: var(--color-muted);
    white-space: nowrap;
}

/* Right-aligned category badge */
.page-template-template-schedule .schedule-row__badge {
    align-self: center;
    flex: none;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: .2rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--cat-border);
    background: color-mix(in srgb, var(--color-white) 55%, transparent);
    color: var(--cat-text);
    white-space: nowrap;
}

/* --- Closing note --------------------------------------------------- */
.page-template-template-schedule .schedule-closing {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--color-line);
    text-align: center;
}

.page-template-template-schedule .schedule-closing__note {
    margin: 0 auto 1.5rem;
    max-width: 42rem;
    font: var(--p3-font);
    color: var(--color-muted);
}

.page-template-template-schedule .schedule-closing__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 640px) {
    .page-template-template-schedule .schedule-row__badge {
        display: none;
    }

    .page-template-template-schedule .schedule-row {
        padding: 1rem 1.1rem;
        gap: .85rem;
    }

    .page-template-template-schedule .schedule-row__time {
        flex-basis: 4.75rem;
        padding-right: .75rem;
    }
}


/* ==== TRAVEL & ACCOMMODATIONS (/conference/travel) ==== */
/* All selectors namespaced under the page body class. Tokens only. This block
 * replaces the old amber-literal mapping wholesale: the page now speaks the
 * redesigned visual language (light hero with one right image, full-bleed Plum + Stone/Dark
 * torn-paper bands, single maguey motif, typographic Basics list, Plum tip
 * cards with bare Ochre numerals, underlined text-link CTAs, textured mountain
 * community band). Torn edges are token-coloured strips masked by the torn-paper
 * SVGs (both svgs are fill-top/torn-bottom silhouettes; a scaleY(-1) flip gives
 * a torn-top edge). The shared closing community band (.section--cta) is
 * restyled page-scoped only — its markup and copy live in shared code. */

/* ---- Page shell + full-page paper-grain overlay (5% darken, decorative) ---- */
.page-template-template-travel {
    overflow-x: clip;
    background-color: var(--color-paper);
}
.page-template-template-travel::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: url("../img/travel/bg-paper-grain.webp") center / cover;
    opacity: .05;
    mix-blend-mode: darken;
}

/* Shared torn-edge scaffold (pseudo-elements straddle the section seam) */
.page-template-template-travel .section--travel-getting::before,
.page-template-template-travel .section--travel-getting::after,
.page-template-template-travel .section--travel-stay::after,
.page-template-template-travel .section--travel-know::before,
.page-template-template-travel .section--travel-know::after,
.page-template-template-travel .section--travel-faqs::before,
.page-template-template-travel .section--travel-faqs::after,
.page-template-template-travel .section--cta::before,
.page-template-template-travel .section--cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(20px, 3vw, 44px);
    z-index: 3;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ============================================================
   §1 — Hero: light Stone band, left copy + right collage
   ============================================================ */
.page-template-template-travel .travel-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-panel-light);
    padding-block: clamp(2rem, 5vw, 4rem);
}
.page-template-template-travel .travel-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    min-height: clamp(340px, 38vw, 500px);
}
.page-template-template-travel .travel-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 34rem;
}
.page-template-template-travel .travel-hero__eyebrow {
    margin: 0 0 1.25rem;
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}
.page-template-template-travel .travel-hero__title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--color-maroon);
    overflow-wrap: break-word;
}
.page-template-template-travel .travel-hero__ornament {
    display: block;
    width: clamp(150px, 22vw, 220px);
    height: 18px;
    margin: clamp(1rem, 2.4vw, 1.6rem) 0;
    background-color: var(--color-ochre);
    -webkit-mask: url("../img/travel/ornament-divider-join.svg") left center / contain no-repeat;
    mask: url("../img/travel/ornament-divider-join.svg") left center / contain no-repeat;
}
.page-template-template-travel .travel-hero__text p {
    margin: 0;
    max-width: 30rem;
    font: var(--p1-font);
    color: var(--color-ink);
}
.page-template-template-travel .travel-hero__text p + p {
    margin-top: .5rem;
}

/* One supplied right-side hero image. */
.page-template-template-travel .travel-hero__media {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(57vw, 820px);
    margin: 0;
}
.page-template-template-travel .travel-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   Shared band furniture (travel redesign, Figma TRAVEL 171:14977)
   — centered band header, two-column header row, rounded copy
   panels and the underlined caps text-link
   ============================================================ */
.page-template-template-travel .travel-band-head {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.page-template-template-travel .travel-band-head__eyebrow {
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    font: var(--h5-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}
.page-template-template-travel .travel-band-head__title {
    margin: 0 0 .5rem;
    font: var(--h2-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}
.page-template-template-travel .travel-band-head__title--h3 {
    font: var(--h3-font);
}
.page-template-template-travel .travel-band-head__note {
    margin: 0;
    font: var(--p6-font);
    letter-spacing: .03em;
}
.page-template-template-travel .travel-band-head__intro,
.page-template-template-travel .travel-band-head__text p {
    margin: 0;
    font: var(--p3-font);
    color: var(--color-ink);
}
.page-template-template-travel .travel-band-head__intro--wide {
    font: var(--p2-font);
}
.page-template-template-travel .travel-band-head__text p + p {
    margin-top: .75rem;
}

.page-template-template-travel .travel-twocol-head {
    margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.page-template-template-travel .travel-twocol-head__eyebrow {
    margin: 0 0 clamp(1rem, 2vw, 1.75rem);
    font: var(--h5-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}
.page-template-template-travel .travel-twocol-head__row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: start;
}
.page-template-template-travel .travel-twocol-head__title {
    margin: 0;
    font: var(--h3-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}
.page-template-template-travel .travel-twocol-head__sub {
    margin: .5rem 0 0 clamp(1rem, 2.5vw, 2.25rem);
    font: var(--p6-font);
    letter-spacing: .03em;
    color: var(--color-maroon-light);
}
.page-template-template-travel .travel-twocol-head__aside {
    margin: 0;
    font: var(--p3-font);
    color: var(--color-ink);
}

/* Rounded copy panel (hotel / tours / health / contact cards) */
.page-template-template-travel .travel-panel {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 3.5vw, 2.25rem);
    background: var(--color-panel-light);
    border-radius: var(--radius-lg);
}
.page-template-template-travel .travel-panel--dark {
    background: var(--color-stone-dark);
}
.page-template-template-travel .travel-panel__label {
    margin: 0 0 .35rem;
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}
.page-template-template-travel .travel-panel__title {
    margin: 0 0 .75rem;
    font: var(--h4-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}
.page-template-template-travel .travel-panel__body {
    padding-left: clamp(.85rem, 1.8vw, 1.5rem);
}
.page-template-template-travel .travel-panel__body p,
.page-template-template-travel .travel-panel__body li {
    margin: 0;
    font: var(--p5b-font);
    line-height: 1.5;
    color: var(--color-ink);
}
.page-template-template-travel .travel-panel__body p + p,
.page-template-template-travel .travel-panel__body p + ul,
.page-template-template-travel .travel-panel__body ul + p {
    margin-top: .75rem;
}
.page-template-template-travel .travel-panel__body ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .15rem;
}
.page-template-template-travel .travel-panel__address {
    margin: 1rem 0 0;
    font: var(--p6-font);
    font-size: 12px;
    line-height: 14px;
    letter-spacing: .03em;
    color: var(--color-maroon-light);
    text-align: center;
}
.page-template-template-travel .travel-panel__cta {
    margin: 1rem 0 0;
}

/* Underlined caps text-link (manicule-button equivalent) */
.page-template-template-travel .travel-link {
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}
.page-template-template-travel a.travel-link:hover,
.page-template-template-travel a.travel-link:focus-visible {
    color: var(--color-accent-dark);
}
.page-template-template-travel .travel-link--plum {
    font: var(--h6-font);
    color: var(--color-maroon);
}

/* ============================================================
   §2 — Getting to San Miguel: full-bleed Plum band, torn edges,
   labelled prose subsections + numbered Shuttle Tips rail
   ============================================================ */
.page-template-template-travel .section--travel-getting {
    position: relative;
    background: var(--color-maroon);
    padding-block: clamp(4rem, 8vw, 6rem);
}
/* torn TOP edge — Plum tears up into the hero */
.page-template-template-travel .section--travel-getting::before {
    bottom: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}
/* torn BOTTOM edge — Plum tears down into the Stone/Dark "Where to Stay" band */
.page-template-template-travel .section--travel-getting::after {
    top: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}
.page-template-template-travel .section--travel-getting .travel-band-head__eyebrow {
    color: var(--color-ochre-light);
}
.page-template-template-travel .section--travel-getting .travel-band-head__title {
    color: var(--color-on-maroon);
}
.page-template-template-travel .section--travel-getting .travel-band-head__note {
    color: var(--color-on-maroon);
}
.page-template-template-travel .travel-getting {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.page-template-template-travel .travel-getting__block + .travel-getting__block {
    margin-top: clamp(1rem, 2vw, 1.25rem);
    padding-top: clamp(1rem, 2vw, 1.25rem);
    border-top: 1px dashed var(--color-maroon-line);
}
.page-template-template-travel .travel-getting__label {
    margin: 0 0 .35rem;
    font: var(--p6-font);
    letter-spacing: .03em;
    color: var(--color-ochre-light);
}
.page-template-template-travel .travel-getting__body {
    padding-left: clamp(.85rem, 1.8vw, 1.5rem);
}
.page-template-template-travel .travel-getting__body p,
.page-template-template-travel .travel-getting__body li {
    margin: 0;
    font: var(--p3-font);
    color: var(--color-on-maroon);
}
.page-template-template-travel .travel-getting__body p + p,
.page-template-template-travel .travel-getting__body p + ul,
.page-template-template-travel .travel-getting__body ul + p {
    margin-top: .75rem;
}
.page-template-template-travel .travel-getting__body ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .25rem;
}
.page-template-template-travel .travel-getting__body strong {
    font-weight: 600;
    color: var(--color-on-maroon);
}
.page-template-template-travel .travel-getting__aside-title {
    margin: 0 0 1.1rem;
    font: 600 24px/28px var(--font-accent);
    color: var(--color-ochre-light);
}
.page-template-template-travel .shuttle-tips {
    list-style: none;
    margin: 0;
    padding: 0 0 0 clamp(.5rem, 1.5vw, 1.75rem);
    display: grid;
    gap: .75rem;
}
.page-template-template-travel .shuttle-tips__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.5rem;
    background: var(--color-maroon-light);
    border-radius: var(--radius);
}
.page-template-template-travel .shuttle-tips__num {
    flex: none;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-ochre);
}
.page-template-template-travel .shuttle-tips__text {
    font: var(--p5-font);
    font-size: 13px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-on-maroon);
}

/* ============================================================
   §3 — Where to Stay: full-bleed Stone/Dark band (its torn top
   edge is drawn by §2's ::after) with the official-hotel card
   ============================================================ */
.page-template-template-travel .section--travel-stay {
    position: relative;
    background: var(--color-stone-dark);
    padding-block: clamp(4rem, 8vw, 6rem);
}
/* torn BOTTOM edge — Stone/Dark tears down into the paper map zone */
.page-template-template-travel .section--travel-stay::after {
    top: 100%;
    background-color: var(--color-stone-dark);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}
.page-template-template-travel .travel-panel--stay {
    max-width: 42rem;
    margin-inline: auto;
}

/* ============================================================
   §4 — Conference Location & Maps: paper zone, two-column
   header over the rounded map image
   ============================================================ */
.page-template-template-travel .section--travel-map {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.page-template-template-travel .travel-map {
    margin: 0;
    padding: clamp(1rem, 2.5vw, 2rem);
    background: var(--color-white);
    border-radius: var(--radius-lg);
}
.page-template-template-travel .travel-map__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* ============================================================
   §5 — Explore San Miguel: paper zone, centered header + the
   Tours & Excursions card
   ============================================================ */
.page-template-template-travel .section--travel-explore {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.page-template-template-travel .travel-panel--explore {
    max-width: 42rem;
    margin-inline: auto;
    background: var(--color-stone-dark);
}

/* ============================================================
   §6 — Know Before You Go: full-bleed Ochre band, torn edges,
   two-column Plum accordion grid + Helpful Downloads link
   ============================================================ */
.page-template-template-travel .section--travel-know {
    position: relative;
    background: var(--color-ochre);
    padding-block: clamp(4rem, 8vw, 6rem);
}
.page-template-template-travel .section--travel-know::before {
    bottom: 100%;
    background-color: var(--color-ochre);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}
.page-template-template-travel .section--travel-know::after {
    top: 100%;
    background-color: var(--color-ochre);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}
.page-template-template-travel .section--travel-know .travel-band-head__eyebrow {
    color: var(--color-panel-light);
}
.page-template-template-travel .section--travel-know .travel-band-head__intro {
    color: var(--color-ink);
}
.page-template-template-travel .travel-know {
    position: relative;
    z-index: 1;
    border: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
}
.page-template-template-travel .travel-know__item {
    border: none;
}
/* Plum pill row; the shared JS toggles .is-open */
.page-template-template-travel .travel-know .accordion__q,
.page-template-template-travel .travel-faqs .accordion__q {
    align-items: center;
    padding: 1.6rem 2.25rem;
    background: var(--color-maroon);
    border-radius: var(--radius-lg);
    font: var(--h6-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    line-height: 1.3;
    color: var(--color-on-maroon);
}
.page-template-template-travel .travel-know .accordion__q::after,
.page-template-template-travel .travel-faqs .accordion__q::after {
    color: var(--color-on-maroon);
}
/* Static rows (no answer yet) — same pill, no toggle affordance. The shared
   JS still binds their click, but with no .accordion__a there is nothing to
   reveal, so hide the +/− and the pointer. */
.page-template-template-travel .travel-know span.accordion__q,
.page-template-template-travel .travel-faqs span.accordion__q {
    cursor: default;
}
.page-template-template-travel .travel-know span.accordion__q::after,
.page-template-template-travel .travel-faqs span.accordion__q::after {
    content: "";
}
.page-template-template-travel .travel-know .accordion__a,
.page-template-template-travel .travel-faqs .accordion__a {
    margin-left: clamp(1rem, 2.5vw, 1.75rem);
    padding: 1rem 2.25rem 1.15rem 1.75rem;
    background: var(--color-stone-dark);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.page-template-template-travel .travel-know .accordion__a p,
.page-template-template-travel .travel-faqs .accordion__a p {
    margin: 0;
    font: var(--p3-font);
    color: var(--color-maroon);
}
.page-template-template-travel .travel-know__foot {
    position: relative;
    z-index: 1;
    margin-top: clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.page-template-template-travel .travel-know__note {
    margin: .75rem 0 0;
    font: var(--p6-font);
    letter-spacing: .03em;
    color: var(--color-ink);
}

/* ============================================================
   §7 — Health & Safety: paper zone, two-column header over a
   card collage (safe / medical support / contacts / providers /
   accessibility)
   ============================================================ */
.page-template-template-travel .section--travel-health {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.page-template-template-travel .travel-health {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    max-width: 63rem;
    margin-inline: auto;
}
.page-template-template-travel .travel-health__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
}
.page-template-template-travel .travel-health__stack {
    display: grid;
    gap: .5rem;
    justify-items: center;
}
.page-template-template-travel .travel-health__stack > .travel-panel {
    width: 100%;
}
.page-template-template-travel .travel-health__stack > .travel-panel--contact {
    width: 90%;
}
.page-template-template-travel .travel-health__care {
    text-align: center;
    max-width: 50rem;
    margin-inline: auto;
}
.page-template-template-travel .travel-health__care-title {
    margin: 0 0 .5rem;
    font: var(--h4-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}
.page-template-template-travel .travel-health__care-intro p {
    margin: 0;
    font: var(--p3-font);
    color: var(--color-maroon);
}
.page-template-template-travel .travel-panel--wide {
    width: 100%;
}

/* ============================================================
   §8 — Travel FAQs "Is San Miguel Safe?": full-bleed Plum band,
   torn edges, Plum/Light accordion rows + italic closing line
   ============================================================ */
.page-template-template-travel .section--travel-faqs {
    position: relative;
    background: var(--color-maroon);
    padding-block: clamp(4rem, 8vw, 6rem);
}
.page-template-template-travel .section--travel-faqs::before {
    bottom: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}
.page-template-template-travel .section--travel-faqs::after {
    top: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}
.page-template-template-travel .section--travel-faqs .travel-band-head__eyebrow {
    color: var(--color-ochre-light);
}
.page-template-template-travel .section--travel-faqs .travel-band-head__title {
    color: var(--color-on-maroon);
}
.page-template-template-travel .travel-faqs {
    position: relative;
    z-index: 1;
    border: none;
    display: grid;
    gap: .75rem;
    max-width: 56rem;
    margin-inline: auto;
}
.page-template-template-travel .travel-faqs__item {
    border: none;
}
.page-template-template-travel .travel-faqs .accordion__q {
    background: var(--color-maroon-light);
}
.page-template-template-travel .travel-faqs__note {
    position: relative;
    z-index: 1;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    font: var(--p6-font);
    letter-spacing: .03em;
    color: var(--color-on-maroon);
    text-align: center;
}
.page-template-template-travel .travel-faqs__note a {
    color: var(--color-ochre-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-template-template-travel .travel-faqs__note a:hover,
.page-template-template-travel .travel-faqs__note a:focus-visible {
    color: var(--color-ochre);
}

/* ============================================================
   §9 — We're Here to Help: paper zone, centered header, 4-up
   contact cards + closing line
   ============================================================ */
.page-template-template-travel .section--travel-help {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.page-template-template-travel .travel-help {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
}
.page-template-template-travel .travel-help__outro {
    margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
    max-width: 50rem;
    font: var(--p2-font);
    color: var(--color-ink);
    text-align: center;
}


/* ============================================================
   §6 — Shared community band (.section--cta), restyled
   page-scoped: textured mountain background, ornament divider,
   underlined text links (markup + copy live in shared code)
   ============================================================ */
.page-template-template-travel .section--cta {
    position: relative;
    overflow: hidden;
    background: var(--color-maroon) url("../img/travel/join-band-bg-mountains.webp") center / cover no-repeat;
    padding-block: clamp(3.5rem, 8vw, 6rem);
}
/* torn TOP edge — paper tears down into the mountain band */
.page-template-template-travel .section--cta::before {
    top: 0;
    background-color: var(--color-paper);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
}
/* torn BOTTOM edge — Charcoal footer tears up into the band */
.page-template-template-travel .section--cta::after {
    bottom: 0;
    background-color: var(--color-dark);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
    transform: scaleY(-1);
}
.page-template-template-travel .section--cta .cta-band {
    position: relative;
    z-index: 1;
}
/* Ornament divider (Stone sunburst) under the band heading */
.page-template-template-travel .section--cta h2 {
    color: var(--color-on-maroon);
}
.page-template-template-travel .section--cta h2::after {
    content: "";
    display: block;
    width: clamp(150px, 20vw, 210px);
    height: 18px;
    margin: 1.1rem auto 0;
    background-color: var(--color-on-maroon);
    -webkit-mask: url("../img/travel/ornament-divider-join.svg") center / contain no-repeat;
    mask: url("../img/travel/ornament-divider-join.svg") center / contain no-repeat;
}
.page-template-template-travel .section--cta p {
    color: var(--color-on-maroon-muted);
}
/* Pill buttons → underlined Stone text links */
.page-template-template-travel .section--cta .cta-band__links {
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
.page-template-template-travel .section--cta .button--outline-white {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font: var(--h6-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-on-maroon);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}
.page-template-template-travel .section--cta .button--outline-white:hover,
.page-template-template-travel .section--cta .button--outline-white:focus-visible {
    background: none;
    color: var(--color-on-maroon-accent);
}

/* ============================================================
   Responsive — stack the getting/health/help grids, keep the
   supplied hero image
   ============================================================ */
@media (max-width: 900px) {
    .page-template-template-travel .travel-hero {
        padding-bottom: 0;
    }
    .page-template-template-travel .travel-hero__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .page-template-template-travel .travel-hero__copy {
        max-width: none;
    }
    .page-template-template-travel .travel-hero__media {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(100%, 720px);
        margin: 1.5rem 0 0 auto;
    }
    .page-template-template-travel .travel-getting {
        grid-template-columns: 1fr;
    }
    .page-template-template-travel .shuttle-tips {
        padding-left: 0;
    }
    .page-template-template-travel .travel-twocol-head__row {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
    .page-template-template-travel .travel-know {
        grid-template-columns: 1fr;
    }
    .page-template-template-travel .travel-health__row {
        grid-template-columns: 1fr;
    }
    .page-template-template-travel .travel-health__stack > .travel-panel--contact {
        width: 100%;
    }
    .page-template-template-travel .travel-help {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .page-template-template-travel .travel-help {
        grid-template-columns: 1fr;
    }
    .page-template-template-travel .travel-know .accordion__q,
    .page-template-template-travel .travel-faqs .accordion__q {
        padding: 1.15rem 1.35rem;
        font-size: 16px;
        line-height: 24px;
    }
    .page-template-template-travel .travel-know .accordion__a,
    .page-template-template-travel .travel-faqs .accordion__a {
        padding: .9rem 1.35rem 1rem;
    }
}


/* ==== FAQ (/conference/faq) ==== */
/* Page-scoped styling for template-faq.php. Two Figma-vs-theme gaps this page
   resolves in-scope (no site.css / partial edits):
   - Dark centered hero: reuses the generic `hero` partial (dark + centered);
     the Spanish subtitle + tagline are styled here as they ride inside
     `.hero__text`.
   - Carded accordion: Figma renders each FAQ row as a bordered/rounded card
     (space-y-3) rather than the theme's default hairline-divided `.accordion`
     list. Restyled here to the site's `.card` idiom (panel + line + radius),
     scoped to this page only so other accordions (contest, panels) keep the
     plain-list treatment. */

/* --- Hero: dark centered band, Spanish subtitle + tagline --------------- */
.page-template-template-faq .section--hero h1 {
    margin-bottom: .6rem;
}

.page-template-template-faq .faq-hero__es {
    font: var(--p6-font);
    color: var(--color-on-dark-muted);
    margin: 0 0 .9rem;
}

.page-template-template-faq .faq-hero__tagline {
    font: var(--p2-font);
    color: var(--color-on-dark-link);
    margin: 0;
}

/* --- Accordion: card treatment (Figma space-y-3 bordered cards) --------- */
.page-template-template-faq .accordion {
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.page-template-template-faq .accordion__item {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-panel);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.page-template-template-faq .accordion__q {
    padding: 1.15rem 1.35rem;
    align-items: center;
}

.page-template-template-faq .accordion__a {
    padding: 1rem 1.35rem 1.3rem;
    border-top: 1px solid var(--color-line);
}


/* ==== FEATURED COUNTRY (/conference/featured-country) ==== */
/* All selectors namespaced under the page body class. Tokens only. This block
 * replaces the old photo-band/dark-scrim mapping wholesale: the page now speaks
 * the redesigned visual language shared with Travel — light hero with one right image, a
 * full-bleed Plum "Why…?" band with a typewriter (mono, all-caps) narrative,
 * a Stone/Dark "Featured Voices" band of boxed square-photo cards, a card-less
 * centred Special Programming stack with agave/hummingbird bleed art, paper-band
 * Fellowship section with a two-column header + solid Plum cards (no avatars),
 * an underlined-manicule closing CTA, and the shared textured community band.
 * Torn seams are token-coloured strips masked by the shared torn-paper SVGs
 * (both are fill-top/torn-bottom silhouettes; a scaleY(-1) flip = a torn-top
 * edge). The shared community band (.section--cta) is restyled page-scoped only —
 * its markup and copy live in shared code. */

/* ---- Page shell + full-page paper-grain overlay (5% darken, decorative) ---- */
.page-template-template-featured-country {
    overflow-x: clip;
    background-color: var(--color-paper);
}
.page-template-template-featured-country::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: url("../img/travel/bg-paper-grain.webp") center / cover;
    opacity: .05;
    mix-blend-mode: darken;
}

/* Shared torn-edge scaffold (pseudo-elements straddle the section seams) */
.page-template-template-featured-country .section--country-why::before,
.page-template-template-featured-country .section--country-voices::before,
.page-template-template-featured-country .section--country-voices::after,
.page-template-template-featured-country .section--cta::before,
.page-template-template-featured-country .section--cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(20px, 3vw, 44px);
    z-index: 3;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ============================================================
   §1 — Hero: light Stone band, left copy + right collage
   ============================================================ */
.page-template-template-featured-country .country-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-panel-light);
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.page-template-template-featured-country .country-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    min-height: clamp(320px, 36vw, 460px);
}
.page-template-template-featured-country .country-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 34rem;
}
.page-template-template-featured-country .country-hero__badge {
    margin: 0 0 1.25rem;
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}
.page-template-template-featured-country .country-hero__title {
    margin: 0;
    font: var(--h1-font);
    text-transform: uppercase;
    color: var(--color-maroon);
    overflow-wrap: break-word;
}
.page-template-template-featured-country .country-hero__ornament {
    display: block;
    width: clamp(150px, 22vw, 220px);
    height: 18px;
    margin: clamp(1rem, 2.4vw, 1.6rem) 0;
    background-color: var(--color-ochre);
    -webkit-mask: url("../img/travel/ornament-divider-join.svg") left center / contain no-repeat;
    mask: url("../img/travel/ornament-divider-join.svg") left center / contain no-repeat;
}
.page-template-template-featured-country .country-hero__tagline {
    margin: 0;
    max-width: 30rem;
    font: var(--p2-font);
    color: var(--color-muted);
}

/* One supplied right-side hero image. */
.page-template-template-featured-country .country-hero__media {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(57vw, 820px);
    margin: 0;
}
.page-template-template-featured-country .country-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   §2 — "Why {country}?": full-bleed Plum band, torn edges,
   Ochre heading + all-caps mono (typewriter) narrative
   ============================================================ */
.page-template-template-featured-country .section--country-why {
    position: relative;
    background: var(--color-maroon);
    padding-block: clamp(4rem, 8vw, 6.5rem);
}
/* torn TOP edge — Plum tears up into the Stone hero */
.page-template-template-featured-country .section--country-why::before {
    bottom: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-c.svg");
    mask-image: url("../img/travel/torn-paper-edge-c.svg");
    transform: scaleY(-1);
}
.page-template-template-featured-country .country-why {
    position: relative;
    z-index: 1;
    max-width: 60rem;
}
.page-template-template-featured-country .country-why__title {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    font: var(--h2-font);
    text-transform: uppercase;
    color: var(--color-ochre);
}
.page-template-template-featured-country .country-why__body {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    max-width: 54rem;
    padding-left: clamp(0px, 2.4vw, 36px);
}
.page-template-template-featured-country .country-why__body p {
    margin: 0;
    font: var(--h5-font);
    line-height: 1.5;
    letter-spacing: var(--tracking-caps-wide);
    text-transform: uppercase;
    color: var(--color-on-maroon);
}

/* ============================================================
   §3 — "Featured Voices": full-bleed Stone/Dark band, torn edges,
   3-up boxed Stone cards with a square photo/initials slot
   ============================================================ */
.page-template-template-featured-country .section--country-voices {
    position: relative;
    background: var(--color-stone-dark);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
/* torn TOP edge — Stone/Dark tears up into the Plum band */
.page-template-template-featured-country .section--country-voices::before {
    bottom: 100%;
    background-color: var(--color-stone-dark);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}
/* torn BOTTOM edge — Stone/Dark tears down into the paper Programming band */
.page-template-template-featured-country .section--country-voices::after {
    top: 100%;
    background-color: var(--color-stone-dark);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}
.page-template-template-featured-country .country-voices {
    position: relative;
    z-index: 1;
    max-width: 60rem;
}
.page-template-template-featured-country .country-voices__title {
    margin: 0;
    font: var(--h2-font);
    text-transform: uppercase;
    color: var(--color-maroon);
    text-align: center;
}
.page-template-template-featured-country .country-voices__intro {
    margin: .75rem auto 0;
    max-width: 40rem;
    font: var(--p3-font);
    color: var(--color-muted);
    text-align: center;
}
.page-template-template-featured-country .country-voices__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
}
.page-template-template-featured-country .country-voice {
    display: flex;
    flex-direction: column;
    background: var(--color-panel-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.page-template-template-featured-country .country-voice__media {
    position: relative;
    aspect-ratio: 289 / 220;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-maroon) 8%, var(--color-panel-light));
}
.page-template-template-featured-country .country-voice__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-template-template-featured-country .country-voice__initials {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 2.75rem);
    letter-spacing: .02em;
    color: var(--color-maroon);
}
.page-template-template-featured-country .country-voice__text {
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.page-template-template-featured-country .country-voice__role {
    margin: 0 0 .5rem;
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}
.page-template-template-featured-country .country-voice__name {
    margin: 0 0 .6rem;
    font: var(--h4-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}
.page-template-template-featured-country .country-voice__bio {
    margin: 0;
    font: var(--p4-font);
    color: var(--color-ink);
}

/* ============================================================
   §4 — "Special Programming" / La Soirée Haïtienne: paper band,
   card-less centred stack, agave + hummingbird bleed art
   ============================================================ */
.page-template-template-featured-country .section--country-programming {
    position: relative;
    overflow: hidden;
    background: var(--color-paper);
}
.page-template-template-featured-country .country-programming__art {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: clamp(180px, 26vw, 420px);
    pointer-events: none;
}
.page-template-template-featured-country .cp-layer {
    position: absolute;
    display: block;
    height: auto;
}
.page-template-template-featured-country .cp-layer--agave { left: -10%; top: 8%;  width: 90%; opacity: .5; }
.page-template-template-featured-country .cp-layer--bird  { left: 32%;  top: 44%; width: 34%; opacity: .9; }
.page-template-template-featured-country .country-programming {
    position: relative;
    z-index: 1;
    text-align: center;
}
.page-template-template-featured-country .country-programming__eyebrow {
    margin: 0 0 1rem;
    font: var(--h5-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}
.page-template-template-featured-country .country-programming__subhead {
    margin: 0 auto;
    max-width: 34rem;
    font: var(--h3b-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}
.page-template-template-featured-country .country-programming__date {
    margin: 1rem 0 0;
    font: var(--p6-font);
    color: var(--color-accent);
}
.page-template-template-featured-country .country-programming__icon {
    display: block;
    width: clamp(46px, 6vw, 60px);
    height: clamp(29px, 3.8vw, 38px);
    margin: clamp(1.25rem, 3vw, 2rem) auto;
    background-color: var(--color-maroon);
    -webkit-mask: url("../img/travel/icon-maguey.svg") center / contain no-repeat;
    mask: url("../img/travel/icon-maguey.svg") center / contain no-repeat;
}
.page-template-template-featured-country .country-programming__title {
    margin: 0;
    font: var(--h1-font);
    text-transform: uppercase;
    color: var(--color-maroon);
    overflow-wrap: break-word;
}
.page-template-template-featured-country .country-programming__body {
    margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
    max-width: 46rem;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}
.page-template-template-featured-country .country-programming__body p {
    margin: 0;
    font: var(--p1-font);
    color: var(--color-ink);
}

/* ============================================================
   §5 — "Fellowship Recipients": paper band, two-column header,
   4-up solid Plum cards (no avatar), geyser bleed art
   ============================================================ */
.page-template-template-featured-country .section--country-fellows {
    position: relative;
    overflow: hidden;
    background: var(--color-paper);
}
.page-template-template-featured-country .country-fellows__art {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    width: clamp(160px, 20vw, 300px);
    pointer-events: none;
    opacity: .14;
    mix-blend-mode: multiply;
}
.page-template-template-featured-country .country-fellows__art img {
    display: block;
    width: 100%;
    height: auto;
}
.page-template-template-featured-country .country-fellows {
    position: relative;
    z-index: 1;
}
.page-template-template-featured-country .country-fellows__head {
    display: grid;
    grid-template-columns: minmax(0, 440fr) minmax(0, 611fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.page-template-template-featured-country .country-fellows__title {
    margin: 0;
    font: var(--h3-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}
.page-template-template-featured-country .country-fellows__intro p {
    margin: 0;
    font: var(--p3-font);
    color: var(--color-muted);
}
.page-template-template-featured-country .country-fellows__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.85rem, 1.6vw, 1.15rem);
}
.page-template-template-featured-country .country-fellow {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2.5vw, 1.5rem);
    padding-bottom: clamp(1.75rem, 3.4vw, 2.25rem);
    background: var(--color-maroon);
    border-radius: var(--radius-lg);
}
.page-template-template-featured-country .country-fellow__icon {
    display: block;
    width: 40px;
    height: 26px;
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
    background-color: var(--color-ochre);
    -webkit-mask: url("../img/travel/icon-maguey.svg") left center / contain no-repeat;
    mask: url("../img/travel/icon-maguey.svg") left center / contain no-repeat;
}
.page-template-template-featured-country .country-fellow__tag {
    margin: 0 0 .5rem;
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-ochre);
}
.page-template-template-featured-country .country-fellow__name {
    margin: 0 0 .4rem;
    font: var(--h4-font);
    text-transform: uppercase;
    color: var(--color-on-maroon);
}
.page-template-template-featured-country .country-fellow__place {
    margin: 0;
    font: var(--p6-font);
    color: var(--color-on-maroon-muted);
}

/* ============================================================
   §6 — "Join Us in {year}" closing CTA: paper band, maguey
   divider, underlined manicule link, flanking collage clusters
   ============================================================ */
.page-template-template-featured-country .section--country-cta {
    position: relative;
    overflow: hidden;
    background: var(--color-paper);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.page-template-template-featured-country .country-cta {
    position: relative;
    z-index: 2;
    text-align: center;
}
.page-template-template-featured-country .country-cta__title {
    margin: 0 0 clamp(1rem, 2vw, 1.25rem);
    font: var(--h2-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}
.page-template-template-featured-country .country-cta__icon {
    display: block;
    width: clamp(46px, 6vw, 60px);
    height: clamp(29px, 3.8vw, 38px);
    margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
    background-color: var(--color-maroon);
    -webkit-mask: url("../img/travel/icon-maguey.svg") center / contain no-repeat;
    mask: url("../img/travel/icon-maguey.svg") center / contain no-repeat;
}
.page-template-template-featured-country .country-cta__text {
    margin: 0 auto clamp(1.5rem, 3vw, 2rem);
    max-width: 34rem;
    font: var(--p3-font);
    color: var(--color-ink);
}
.page-template-template-featured-country .country-cta__actions {
    display: flex;
    justify-content: center;
}

/* Flanking collage clusters (decorative) */
.page-template-template-featured-country .country-cta__collage {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: clamp(160px, 22vw, 300px);
    pointer-events: none;
}
.page-template-template-featured-country .country-cta__collage--left  { left: 0; }
.page-template-template-featured-country .country-cta__collage--right { right: 0; }
.page-template-template-featured-country .cc-layer {
    position: absolute;
    display: block;
    height: auto;
}
.page-template-template-featured-country .cc-layer--paper-a { left: -8%;  top: 6%;     width: 82%; z-index: 1; }
.page-template-template-featured-country .cc-layer--paper-b { left: 22%;  top: 30%;    width: 55%; z-index: 2; }
.page-template-template-featured-country .cc-layer--flower  { left: -12%; bottom: 0;   width: 72%; z-index: 3; }
.page-template-template-featured-country .cc-layer--journal { right: -10%; top: 2%;    width: 80%; z-index: 1; }
.page-template-template-featured-country .cc-layer--arch    { right: 14%; top: 0;      width: 58%; z-index: 2; }
.page-template-template-featured-country .cc-layer--cactus  { right: -8%; bottom: -2%; width: 72%; z-index: 4; }

/* ============================================================
   §7 — Shared community band (.section--cta), restyled
   page-scoped: textured mountain background, ornament divider,
   underlined text links (markup + copy live in shared code)
   ============================================================ */
.page-template-template-featured-country .section--cta {
    position: relative;
    overflow: hidden;
    background: var(--color-maroon) url("../img/travel/join-band-bg-mountains.webp") center / cover no-repeat;
    padding-block: clamp(3.5rem, 8vw, 6rem);
}
/* torn TOP edge — paper tears down into the mountain band */
.page-template-template-featured-country .section--cta::before {
    top: 0;
    background-color: var(--color-paper);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
}
/* torn BOTTOM edge — Charcoal footer tears up into the band */
.page-template-template-featured-country .section--cta::after {
    bottom: 0;
    background-color: var(--color-dark);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
    transform: scaleY(-1);
}
.page-template-template-featured-country .section--cta .cta-band {
    position: relative;
    z-index: 1;
}
/* Ornament divider (Stone sunburst) under the band heading */
.page-template-template-featured-country .section--cta h2 {
    color: var(--color-on-maroon);
}
.page-template-template-featured-country .section--cta h2::after {
    content: "";
    display: block;
    width: clamp(150px, 20vw, 210px);
    height: 18px;
    margin: 1.1rem auto 0;
    background-color: var(--color-on-maroon);
    -webkit-mask: url("../img/travel/ornament-divider-join.svg") center / contain no-repeat;
    mask: url("../img/travel/ornament-divider-join.svg") center / contain no-repeat;
}
.page-template-template-featured-country .section--cta p {
    color: var(--color-on-maroon-muted);
}
/* Pill buttons → underlined Stone text links */
.page-template-template-featured-country .section--cta .cta-band__links {
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
.page-template-template-featured-country .section--cta .button--outline-white {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font: var(--h6-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-on-maroon);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}
.page-template-template-featured-country .section--cta .button--outline-white:hover,
.page-template-template-featured-country .section--cta .button--outline-white:focus-visible {
    background: none;
    color: var(--color-on-maroon-accent);
}

/* ============================================================
   Responsive — stack grids, keep supplied hero image
   ============================================================ */
@media (max-width: 900px) {
    .page-template-template-featured-country .country-hero {
        padding-bottom: 0;
    }
    .page-template-template-featured-country .country-hero__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .page-template-template-featured-country .country-hero__copy {
        max-width: none;
    }
    .page-template-template-featured-country .country-hero__media {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(100%, 720px);
        margin: 1.5rem 0 0 auto;
    }
    .page-template-template-featured-country .country-programming__art {
        display: none;
    }
    .page-template-template-featured-country .country-voices__grid {
        grid-template-columns: 1fr;
        max-width: 26rem;
        margin-inline: auto;
    }
    .page-template-template-featured-country .country-fellows__head {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .page-template-template-featured-country .country-fellows__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .page-template-template-featured-country .country-fellows__art {
        display: none;
    }
    .page-template-template-featured-country .country-cta__collage {
        display: none;
    }
    .page-template-template-featured-country .section--cta .cta-band__links {
        gap: 1rem;
    }
}

@media (max-width: 560px) {
    .page-template-template-featured-country .country-hero__title,
    .page-template-template-featured-country .country-programming__title {
        font-size: clamp(2.5rem, 13vw, 4.5rem);
        line-height: 1.04;
    }
    .page-template-template-featured-country .country-fellows__grid {
        grid-template-columns: 1fr;
        max-width: 22rem;
        margin-inline: auto;
    }
}


/* -----------------------------------------------------------------------------
   FIX 1 — Featured Voices: drop the pale-amber wrapper box (redesign QA, Jul 2026)

   In the COUNTRY frame the Featured Voices cards sit directly on the Stone/Dark
   band; heading, sub-head and grid have no enclosing card. A later POST-VERIFY
   tweak (`.country-voices { background:#fffbeb }`, further down the file) wrapped
   the whole section in a pale-amber box that reads as a second, lighter panel
   over the band. Neutralise that fill here. The extra ancestor class
   (.section--country-voices) raises specificity to (0,3,0) so this wins over the
   (0,2,0) amber rule regardless of source order.
   -------------------------------------------------------------------------- */
.page-template-template-featured-country .section--country-voices .country-voices {
    background: transparent;
}

/* -----------------------------------------------------------------------------
   FIX 2 — Featured Voices grid: balance a 4-person roster

   The design shows 3 voices, but the roster is CPT-driven and can hold any
   count (Haiti currently publishes 4). On the base 3-up grid a 4th card orphans
   alone on a second row. Switch an exactly-4 grid to a balanced 2x2; 3 (and 5-6)
   keep the base 3-up. Gated above the mobile 1-col breakpoint (max-width:900px)
   so small screens still stack — the :has() specificity would otherwise beat the
   mobile rule.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
    .page-template-template-featured-country .country-voices__grid:has(> .country-voice:nth-child(4)):not(:has(> .country-voice:nth-child(5))) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==== FREE EVENTS (/conference/free-events) ==== */
/* Template: template-free-events.php · body class .page-template-template-free-events
   Redesign (Jul 2026, Figma frame FREE EVENTS): centered hero with one supplied
   image on each side, a
   fixed 2-col grid of two-tone cards (a Plum "Free" ribbon over a Stone/Dark
   body, category demoted to an eyebrow, a single italic meta line — no icons),
   and a flat "All Events Welcome Everyone" callout with a maguey emblem (no
   panel). Closing CTA band is the shared component, unchanged. Tokens only;
   heavy collage hides < 900px. Partials: section-freeevents_{hero,grid,welcome}. */

/* ---- §2 Hero — centered header band + decorative collage ---- */
.page-template-template-free-events .freeevents-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.page-template-template-free-events .freeevents-hero__text {
    position: relative;
    z-index: 2;
    max-width: 44rem;
    margin-inline: auto;
}

/* H1 ink moves Charcoal → Plum on this page only (card titles stay Charcoal). */
.page-template-template-free-events .freeevents-hero h1 {
    color: var(--color-maroon);
}

.page-template-template-free-events .freeevents-hero .eyebrow {
    letter-spacing: var(--tracking-caps-wide);
}

.page-template-template-free-events .freeevents-hero__subtitle {
    margin: 0 auto;
    max-width: 40rem;
    color: var(--color-muted);
    font: var(--p2-font);
}

/* One supplied decorative image on each side. */
.page-template-template-free-events .freeevents-hero__media {
    position: absolute;
    bottom: 0;
    z-index: 1;
    margin: 0;
    pointer-events: none;
}

.page-template-template-free-events .freeevents-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

.page-template-template-free-events .freeevents-hero__media--left {
    left: 0;
    width: clamp(150px, 20vw, 376px);
    transform: translateY(5.15%);
}

.page-template-template-free-events .freeevents-hero__media--right {
    right: 0;
    width: clamp(145px, 19vw, 360px);
    transform: translateY(1.35%);
}

/* ---- §3 Grid section + two-tone event cards ---- */
.page-template-template-free-events .freeevents-section {
    padding-block: clamp(2rem, 4vw, 3rem);
}

/* Fixed 2-column grid (overrides .card-grid auto-fit). */
.page-template-template-free-events .freeevents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* Two-tone card: one rounded silhouette, Plum ribbon flush over a Stone/Dark
   body (overflow clips the ribbon's bottom + body's top corners). */
.page-template-template-free-events .freeevents-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-stone-dark);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.page-template-template-free-events .freeevents-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Ribbon — full-width Plum bar, "Free" right-aligned italic in Stone/Dark. */
.page-template-template-free-events .freeevents-card__ribbon {
    display: flex;
    justify-content: flex-end;
    background: var(--color-maroon);
    padding: .6rem 1.4rem;
}

.page-template-template-free-events .freeevents-card__free {
    font: var(--p6-font);
    color: var(--color-stone-dark);
    letter-spacing: .02em;
}

/* Body — Stone/Dark fill with internal vertical rhythm. */
.page-template-template-free-events .freeevents-card__body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: clamp(1.4rem, 2vw, 1.8rem);
}

/* Category — plain tracked mono eyebrow in Clay (no pill). */
.page-template-template-free-events .freeevents-card__cat {
    margin: 0;
    color: var(--color-accent);
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
}

/* Title — serif, stays Charcoal (inherits the sitewide h3 uppercase). */
.page-template-template-free-events .freeevents-card__title {
    margin: 0;
    color: var(--color-ink);
    font: var(--h3b-font);
}

.page-template-template-free-events .freeevents-card__text {
    margin: 0;
    color: var(--color-muted);
    font: var(--p4-font);
    line-height: 1.55;
}

/* Meta — single italic line (replaces the old 3 icon rows), muted Plum/Light.
   Sampled ~#8a6265; approximated with Plum/Light — a human call on exact tint
   is fine (see redesign map WARNINGS). */
.page-template-template-free-events .freeevents-card__meta {
    margin: .2rem 0 0;
    color: var(--color-maroon-light);
    font-family: var(--font-accent);
    font-style: italic;
    font-size: .9rem;
    line-height: 1.4;
}

/* ---- §4 "All Events Welcome Everyone" — flat callout (no panel) ---- */
.page-template-template-free-events .freeevents-welcome {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.page-template-template-free-events .freeevents-welcome__inner {
    max-width: 42rem; /* ~665px */
}

/* Heading ink moves Charcoal → Plum (same move as the hero H1). */
.page-template-template-free-events .freeevents-welcome__heading {
    margin: 0;
    color: var(--color-maroon);
}

.page-template-template-free-events .freeevents-welcome__icon {
    display: block;
    width: 66px;
    height: auto;
    margin: 1.4rem auto;
}

.page-template-template-free-events .freeevents-welcome__text p {
    margin: 0;
    color: var(--color-muted);
    font: var(--p2-font);
    line-height: 1.6;
}

.page-template-template-free-events .freeevents-welcome__text p + p {
    margin-top: 1rem;
}

/* ---- Mobile — single column with both hero images below copy ---- */
@media (max-width: 900px) {
    .page-template-template-free-events .freeevents-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-bottom: 0;
    }
    .page-template-template-free-events .freeevents-hero__text {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .page-template-template-free-events .freeevents-hero__media {
        position: relative;
        bottom: auto;
        width: 100%;
        grid-row: 2;
        align-self: end;
    }
    .page-template-template-free-events .freeevents-hero__media--left {
        left: auto;
        grid-column: 1;
    }
    .page-template-template-free-events .freeevents-hero__media--right {
        right: auto;
        grid-column: 2;
    }

    .page-template-template-free-events .freeevents-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ==== LITERARY SPOTLIGHT (/conference/literary-spotlight) ==== */
/* Jul 2026 redesign: vintage-collage visual language. All selectors namespaced
   under the template body class; tokens only. Page reads warmer than sitewide
   (Stone page bg), torn-paper dark band, underlined text-link CTAs, 4-up
   presenter grid, plain "Choose Your Way In" text. */

/* This page runs on the warmer Stone background, not sitewide --color-paper. */
.page-template-template-literary-spotlight {
    background-color: var(--color-panel-light);
}

/* Heading case: the sitewide h1–h4 tokens force uppercase, but this page
   renders every heading + presenter name in title case (Figma). Scoped
   override; eyebrows keep their own uppercase rule. */
.page-template-template-literary-spotlight :is(h1, h2, h3, h4, .keynote-card__name) {
    text-transform: none;
}

/* ---- §2 Hero (light page, text left / illustration collage right) ---- */
.page-template-template-literary-spotlight .spotlight-hero {
    position: relative;
    overflow: hidden; /* guard against collage bleed causing horizontal scroll */
}

.page-template-template-literary-spotlight .spotlight-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.page-template-template-literary-spotlight .spotlight-hero__text-col {
    position: relative;
    z-index: 2;
}

.page-template-template-literary-spotlight .spotlight-hero__badge {
    margin: 0 0 1.1rem;
    color: var(--color-accent);
    font: var(--h5-font);
    line-height: 24px; /* mapping table: override H5's 32px lh locally */
    letter-spacing: var(--tracking-caps-wide);
    text-transform: uppercase;
}

.page-template-template-literary-spotlight .spotlight-hero__title {
    margin: 0;
    color: var(--color-maroon);
    font: var(--h1-font);
    font-size: clamp(3rem, 6vw, 72px);
    line-height: 1.02;
    overflow-wrap: break-word;
}

.page-template-template-literary-spotlight .spotlight-hero__indent {
    margin-top: 1.25rem;
    padding-left: 36px; /* indented block under the H1 (Figma) */
}

.page-template-template-literary-spotlight .spotlight-hero__ornament {
    display: block;
    width: 313px;
    max-width: 100%;
    height: auto;
    margin: 0 0 1.25rem;
}

.page-template-template-literary-spotlight .spotlight-hero__text p {
    margin: 0;
    color: var(--color-ink);
    font: var(--p1-font);
}

.page-template-template-literary-spotlight .spotlight-hero__text p + p {
    margin-top: .75rem;
}

.page-template-template-literary-spotlight .spotlight-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-top: 1.75rem;
}

/* Underlined uppercase text-link (Figma "Text Button") — no pill, no icon. */
.page-template-template-literary-spotlight .spotlight-hero__link {
    color: var(--color-ochre);
    font: var(--h6-font);
    letter-spacing: var(--tracking-caps-wide);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: color .18s ease;
}

.page-template-template-literary-spotlight .spotlight-hero__link:hover,
.page-template-template-literary-spotlight .spotlight-hero__link:focus-visible {
    color: var(--color-accent);
}

/* Supplied hero illustration stays one responsive image. */
.page-template-template-literary-spotlight .spotlight-hero__media {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(57vw, 820px);
    margin: 0;
}

.page-template-template-literary-spotlight .spotlight-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- §3 "A Standalone Series" — full-bleed dark Plum band, torn edges ---- */
.page-template-template-literary-spotlight .spotlight-series {
    position: relative;
    z-index: 1; /* lift band + torn pseudos above the cream neighbours */
    /* No top gap: the torn ::before must reach back over the hero image. */
    margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
    background: var(--color-maroon);
    color: var(--color-panel-light);
}

/* Torn-paper transitions: a maroon strip whose ragged edge meets the cream.
   Top strip sits above the band (flipped so maroon is flush to the band top);
   bottom strip sits below it. SVGs are preserveAspectRatio="none", so
   background-size:100% 100% stretches them full-bleed. */
.page-template-template-literary-spotlight .spotlight-series::before,
.page-template-template-literary-spotlight .spotlight-series::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(26px, 3.5vw, 48px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.page-template-template-literary-spotlight .spotlight-series::before {
    bottom: 100%;
    background-image: url("../img/spotlight/divider-torn-paper-top.svg");
    transform: scaleY(-1);
}

.page-template-template-literary-spotlight .spotlight-series::after {
    top: 100%;
    background-image: url("../img/spotlight/divider-torn-paper-bottom.svg");
}

.page-template-template-literary-spotlight .spotlight-series__inner {
    width: min(100% - (var(--space-page) * 2), 880px);
    display: grid;
    grid-template-columns: 153px minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

/* Left rail — three vertically stacked stat mini-cards. */
.page-template-template-literary-spotlight .spotlight-series__stats {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.page-template-template-literary-spotlight .spotlight-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .6rem;
    padding: .85rem 1rem;
    background: var(--color-maroon-light);
    border-radius: var(--radius);
}

.page-template-template-literary-spotlight .spotlight-stat__icon {
    grid-row: 1 / 3;
    width: 26px;
    height: auto;
    filter: brightness(0) invert(1); /* recolor the maroon glyph to stone */
    opacity: .85;
}

.page-template-template-literary-spotlight .spotlight-stat__num {
    align-self: end;
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1;
    color: var(--color-panel-light);
}

.page-template-template-literary-spotlight .spotlight-stat__label {
    align-self: start;
    font: var(--p6-font);
    color: var(--color-panel-light);
}

/* Right column — heading, body copy, price line. */
.page-template-template-literary-spotlight .spotlight-series__copy h2 {
    margin: 0 0 1rem;
    color: var(--color-panel-light);
    font: var(--h2-font);
}

.page-template-template-literary-spotlight .spotlight-series__copy .content-flow {
    padding-left: 36px; /* same indent as the hero intro */
}

.page-template-template-literary-spotlight .spotlight-series__copy .content-flow p {
    margin: 0 0 1rem;
    color: var(--color-panel-light);
    font: var(--p3-font);
}

.page-template-template-literary-spotlight .spotlight-series__copy .content-flow strong {
    font-weight: 700;
}

/* Price line = last paragraph of the about copy: Sky, Crimson italic. */
.page-template-template-literary-spotlight .spotlight-series__copy .content-flow > p:last-of-type {
    margin-bottom: 0;
    color: var(--color-sky);
    font: var(--p6-font);
}

/* ---- §4 Spotlight Presenters (4-up grid, stone cards) ---- */
.page-template-template-literary-spotlight .spotlight-presenters {
    position: relative;
    overflow: hidden; /* clip the left-margin collage bleed */
}

.page-template-template-literary-spotlight .spotlight-presenters__head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.page-template-template-literary-spotlight .spotlight-presenters__head h2 {
    margin: 0;
    color: var(--color-maroon);
    font: var(--h2-font);
}

.page-template-template-literary-spotlight .spotlight-presenters__divider {
    display: block;
    width: 66px;
    height: auto;
    margin: .75rem auto .55rem;
}

.page-template-template-literary-spotlight .spotlight-presenters__sub {
    margin: 0;
    color: var(--color-ink);
    font: var(--p3-font);
}

/* Decorative maguey + hummingbird bleeding off the left margin. */
.page-template-template-literary-spotlight .spotlight-presenters__margin {
    position: absolute;
    left: 0;
    top: 10%;
    width: clamp(160px, 18vw, 240px);
    pointer-events: none;
    z-index: 0;
}

.page-template-template-literary-spotlight .spm-maguey {
    display: block;
    width: 100%;
    height: auto;
    transform: translateX(-38%);
}

.page-template-template-literary-spotlight .spm-bird {
    position: absolute;
    top: -6%;
    right: -4%;
    width: 42%;
    height: auto;
}

.page-template-template-literary-spotlight .spotlight-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.page-template-template-literary-spotlight .spotlight-presenters .keynote-card {
    display: flex;
    flex-direction: column;
    background: var(--color-stone-dark);
    border: none;
    border-radius: var(--radius-lg);
    transition: box-shadow .2s ease;
}

.page-template-template-literary-spotlight .spotlight-presenters .keynote-card:hover {
    box-shadow: var(--shadow-md);
}

/* Landscape card crop (~270x220) replaces the shared 1:1 keynote image. */
.page-template-template-literary-spotlight .spotlight-card__photo {
    aspect-ratio: 27 / 22;
    object-fit: cover;
    width: 100%;
    transition: transform .5s ease;
}

.page-template-template-literary-spotlight .spotlight-card__photo--placeholder {
    background: color-mix(in srgb, var(--color-maroon) 8%, var(--color-stone-dark));
}

.page-template-template-literary-spotlight .spotlight-presenters .keynote-card:hover .spotlight-card__photo {
    transform: scale(1.05);
}

.page-template-template-literary-spotlight .keynote-card__body {
    padding: 1rem 1.1rem 1.2rem;
}

.page-template-template-literary-spotlight .keynote-card__body .eyebrow {
    margin: 0 0 .2rem;
    color: var(--color-accent);
    font: var(--h7-font);
    letter-spacing: var(--tracking-caps-wide);
    text-transform: uppercase;
}

.page-template-template-literary-spotlight .keynote-card__name {
    margin: .1rem 0 .35rem;
    color: var(--color-maroon);
    font: var(--h4-font);
}

.page-template-template-literary-spotlight .spotlight-card__topic {
    margin: 0 0 .5rem;
    color: var(--color-ink);
    font: var(--p6-font);
    line-height: 1.35;
}

.page-template-template-literary-spotlight .spotlight-card__topic em {
    font-style: italic;
}

.page-template-template-literary-spotlight .spotlight-card__bio {
    margin: 0 0 .7rem;
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 18px;
}

.page-template-template-literary-spotlight .spotlight-card__time {
    margin: 0;
    color: var(--color-accent);
    font: var(--h7-font);
    letter-spacing: .02em;
}

.page-template-template-literary-spotlight .spotlight-card--tba {
    opacity: .6;
}

/* ---- §5 "Choose Your Way In" — plain centred text, no panel/CTAs ---- */
.page-template-template-literary-spotlight .spotlight-choose-section {
    position: relative;
    overflow: hidden;
}

.page-template-template-literary-spotlight .spotlight-choose {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.page-template-template-literary-spotlight .spotlight-choose__heading {
    margin: 0 0 1rem;
    color: var(--color-maroon);
    font: var(--h3b-font);
    text-transform: uppercase;
}

.page-template-template-literary-spotlight .spotlight-choose__text {
    margin: 0;
    color: var(--color-ink);
    font: var(--p1-font);
}

/* Decorative bottom-right collage cluster. */
.page-template-template-literary-spotlight .spotlight-choose__collage {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(150px, 16vw, 220px);
    height: clamp(150px, 16vw, 220px);
    pointer-events: none;
    z-index: 0;
}

.page-template-template-literary-spotlight .scc-layer {
    position: absolute;
    display: block;
    height: auto;
}

.page-template-template-literary-spotlight .scc-layer--arch {
    width: 88%;
    right: -6%;
    bottom: 0;
}

.page-template-template-literary-spotlight .scc-layer--paper {
    width: 60%;
    right: 34%;
    bottom: 34%;
    mix-blend-mode: multiply;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .page-template-template-literary-spotlight .spotlight-hero {
        padding-bottom: 0;
    }
    .page-template-template-literary-spotlight .spotlight-hero__inner {
        grid-template-columns: 1fr;
    }
    .page-template-template-literary-spotlight .spotlight-hero__media {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(100%, 720px);
        margin: 1.5rem 0 0 auto;
    }
    .page-template-template-literary-spotlight .spotlight-hero__indent {
        padding-left: 20px;
    }
    .page-template-template-literary-spotlight .spotlight-series__inner {
        grid-template-columns: 1fr;
    }
    .page-template-template-literary-spotlight .spotlight-series__stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .page-template-template-literary-spotlight .spotlight-series__stats .spotlight-stat {
        flex: 1 1 150px;
    }
    .page-template-template-literary-spotlight .spotlight-series__copy .content-flow {
        padding-left: 0;
    }
    .page-template-template-literary-spotlight .spotlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .page-template-template-literary-spotlight .spotlight-presenters__margin,
    .page-template-template-literary-spotlight .spotlight-choose__collage {
        display: none;
    }
}

@media (max-width: 600px) {
    .page-template-template-literary-spotlight .spotlight-grid {
        grid-template-columns: 1fr;
    }
}


/* ==== BIG READS (/conference/big-reads) ==== */
/* All selectors namespaced under the page body class. Tokens only, except the
 * amber "Staff Pick" badge (amber-100/200/700), which has no root token — the
 * design map sanctions these exact hex values and site.css already uses amber
 * #b45309 informally at .schedule-row--keynote. Flag to reconcile if a shared
 * category-colour system is built. */

/* --- Hero: left-aligned copy column, title-case H1, soft gradient band ------ */
.page-template-template-big-reads .section--hero {
    background: linear-gradient(
        135deg,
        var(--color-panel-light) 0%,
        var(--color-paper) 55%,
        color-mix(in srgb, var(--color-panel-light) 55%, var(--color-paper)) 100%
    );
}
.page-template-template-big-reads .section--hero .section__inner {
    max-width: 1040px;
}
.page-template-template-big-reads .section--hero .hero {
    display: block;
}
.page-template-template-big-reads .section--hero h1 {
    text-transform: none;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1.04;
}
.page-template-template-big-reads .section--hero .hero__text {
    max-width: 42rem;
}

/* --- Shared inner container (Staff Picks + list ≈ max-w-5xl) ---------------- */
.page-template-template-big-reads .bigreads-inner {
    max-width: 1040px;
}

/* --- Shared cover thumbnail (image + placeholder) -------------------------- */
.page-template-template-big-reads .bigreads-cover {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
    background: var(--color-panel-light);
}
.page-template-template-big-reads .bigreads-cover--placeholder {
    display: grid;
    place-items: center;
    color: var(--color-muted);
}
.page-template-template-big-reads .bigreads-cover--placeholder svg {
    width: 42%;
    height: auto;
    opacity: .5;
}

/* --- Soft category tag (Staff Picks cards) --------------------------------- */
.page-template-template-big-reads .bigreads-tag {
    align-self: flex-start;
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
    white-space: nowrap;
}

/* --- Staff Picks strip (native horizontal scroll-snap) --------------------- */
.page-template-template-big-reads .bigreads-staff {
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-line);
}
.page-template-template-big-reads .bigreads-strip {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.25rem;
    padding-bottom: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.page-template-template-big-reads .bigreads-pick {
    scroll-snap-align: start;
    flex: 0 0 clamp(15rem, 80vw, 20rem);
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: 12px;
}
.page-template-template-big-reads .bigreads-pick__cover {
    flex: 0 0 auto;
    width: 64px;
}
.page-template-template-big-reads .bigreads-pick__body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}
.page-template-template-big-reads .bigreads-pick__title {
    margin: .1rem 0 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    text-transform: none;
    color: var(--color-ink);
}
.page-template-template-big-reads .bigreads-pick__author {
    margin: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-accent);
}
.page-template-template-big-reads .bigreads-find {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .25rem;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
}
.page-template-template-big-reads .bigreads-find:hover {
    color: var(--color-ochre);
}
.page-template-template-big-reads .bigreads-find svg {
    width: 12px;
    height: 12px;
}

/* --- Filter bar count suffix ---------------------------------------------- */
.page-template-template-big-reads .bigreads-filter__count {
    margin-left: .3rem;
    font-weight: 500;
    opacity: .55;
}

/* --- Book list rows -------------------------------------------------------- */
.page-template-template-big-reads .bigreads-rows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-template-template-big-reads .bigreads-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: start;
    padding: 1.25rem;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.page-template-template-big-reads .bigreads-row:hover {
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-line));
    box-shadow: var(--shadow-sm);
}
.page-template-template-big-reads .bigreads-row__cover {
    width: 72px;
}
.page-template-template-big-reads .bigreads-row__main {
    min-width: 0;
}
.page-template-template-big-reads .bigreads-row__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}
.page-template-template-big-reads .bigreads-row__title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-ink);
}
.page-template-template-big-reads .bigreads-row__author {
    margin: .35rem 0 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-accent);
}
.page-template-template-big-reads .bigreads-row__meta {
    margin: .25rem 0 0;
    font-family: var(--font-sans);
    font-size: 12px;
    color: color-mix(in srgb, var(--color-ink) 50%, var(--color-paper));
}
.page-template-template-big-reads .bigreads-row__desc {
    margin: .6rem 0 0;
    font: var(--p4-font);
    color: var(--color-muted);
    max-width: 46rem;
}

/* --- "Find it:" label + retailer pills ------------------------------------- */
.page-template-template-big-reads .bigreads-row__find {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .65rem;
    margin-top: .85rem;
}
.page-template-template-big-reads .bigreads-row__find-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-muted);
}
.page-template-template-big-reads .bigreads-row__find-label svg {
    width: 13px;
    height: 13px;
    opacity: .8;
}
.page-template-template-big-reads .bigreads-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.page-template-template-big-reads .bigreads-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .7rem;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    color: var(--color-ink);
    text-decoration: none;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.page-template-template-big-reads .bigreads-pill:hover {
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-line));
    color: var(--color-accent);
}
.page-template-template-big-reads .bigreads-pill svg {
    width: 11px;
    height: 11px;
    opacity: .7;
}

/* --- Amber "Staff Pick" badge (see banner note) ---------------------------- */
.page-template-template-big-reads .bigreads-badge {
    display: inline-block;
    padding: .15rem .5rem;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 999px;
}

/* --- Trailing "Meet the author" link (hidden below md) --------------------- */
.page-template-template-big-reads .bigreads-row__aside {
    justify-self: end;
}
.page-template-template-big-reads .bigreads-meet {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
}
.page-template-template-big-reads .bigreads-meet:hover {
    color: var(--color-accent);
}

/* --- Inline bookstore callout --------------------------------------------- */
.page-template-template-big-reads .bigreads-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.75rem 2rem;
    background: color-mix(in srgb, var(--color-panel-light) 55%, var(--color-paper));
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}
.page-template-template-big-reads .bigreads-callout__copy {
    min-width: 0;
}
.page-template-template-big-reads .bigreads-callout__copy h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-ink);
}
.page-template-template-big-reads .bigreads-callout__copy p {
    margin: .4rem 0 0;
    color: var(--color-muted);
}
.page-template-template-big-reads .bigreads-callout .button {
    flex: 0 0 auto;
}

/* --- Mobile (stack under ~760px) ------------------------------------------ */
@media (max-width: 760px) {
    .page-template-template-big-reads .bigreads-row {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 1rem;
    }
    .page-template-template-big-reads .bigreads-row__cover {
        width: 64px;
    }
    .page-template-template-big-reads .bigreads-row__aside {
        display: none;
    }
    .page-template-template-big-reads .bigreads-callout {
        padding: 1.5rem;
    }
    .page-template-template-big-reads .bigreads-callout .button {
        width: 100%;
    }
}


/* ==== PITCHES (/conference/pitches) ==== */

/* Redesign Jul 2026: light Stone hero + right-side photo/illustration collage,
   full-bleed torn-paper Clay notice ribbon, Stone/Dark left-aligned roster cards
   with manicule text links, and a card-less centred closing CTA. Every rule is
   scoped to .page-template-template-pitches and uses design tokens only. The old
   amber/indigo page-local colour tokens and the title-case heading override are
   retired — headings now inherit the sitewide uppercase transform. Page-wide
   ambient layers: a faint paper-texture watermark behind the page, plus two
   color-burn line-art icons (geyser, pen) behind the roster grids. */

.page-template-template-pitches {
    --pitches-max: 1120px;
    background-color: var(--color-paper);
}

/* Faint page-wide paper-texture watermark: sits above the paper canvas but
   below page content, so it reads only where sections are unpainted (the roster
   grids and closing CTA), matching Figma. */
.page-template-template-pitches::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("../img/pitches/bg-watermark.webp") center / cover no-repeat;
    opacity: .06;
    pointer-events: none;
}

/* max-w content column — scoped to this page's bands only, so the shared
   community-CTA band that follows keeps its sitewide width. */
.page-template-template-pitches .pitches-band > .section__inner {
    max-width: var(--pitches-max);
}

/* -------------------------------------------------------------------
   §1 Hero — light Stone band, copy left / collage right
   ------------------------------------------------------------------- */
.page-template-template-pitches .pitches-hero {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--color-panel-light);
    color: var(--color-ink);
    overflow: hidden;
}

.page-template-template-pitches .pitches-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    min-height: 380px;
}

.page-template-template-pitches .pitches-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 40rem;
}

.page-template-template-pitches .pitches-hero__badge {
    margin: 0 0 1.25rem;
    font: var(--h5-font);
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}

.page-template-template-pitches .pitches-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.04;
    letter-spacing: 0;
    color: var(--color-maroon);
}

.page-template-template-pitches .pitches-hero__flourish {
    display: block;
    width: 220px;
    max-width: 62%;
    height: auto;
    margin: 0 0 1.5rem;
}

.page-template-template-pitches .pitches-hero__lede {
    max-width: 34rem;
    margin: 0;
    font: var(--p3-font);
    color: var(--color-ink);
}

/* One supplied right-side hero image. */
.page-template-template-pitches .pitches-hero__media {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(57vw, 820px);
    margin: 0;
}

.page-template-template-pitches .pitches-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------
   §2 Notice — full-bleed Clay ribbon with torn-paper top/bottom edges
   ------------------------------------------------------------------- */
.page-template-template-pitches .pitches-notice {
    position: relative;
    z-index: 2;
    padding: clamp(3.5rem, 6vw, 4.5rem) 0;
    background: var(--color-accent);
    color: var(--color-on-maroon);
    text-align: center;
}

.page-template-template-pitches .pitches-notice__inner {
    position: relative;
    z-index: 1;
}

/* Torn edges: neighbour-coloured strips masked by the torn-paper silhouettes so
   the Stone hero (top) and paper page (bottom) tear into the Clay ribbon. */
@supports ((-webkit-mask-image: url("i")) or (mask-image: url("i"))) {
    .page-template-template-pitches .pitches-notice::before,
    .page-template-template-pitches .pitches-notice::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 46px;
        pointer-events: none;
        z-index: 0;
    }

    .page-template-template-pitches .pitches-notice::before {
        bottom: 100%;
        background: var(--color-accent);
        -webkit-mask: url("../img/pitches/torn-paper-top.svg") center / 100% 100% no-repeat;
                mask: url("../img/pitches/torn-paper-top.svg") center / 100% 100% no-repeat;
        transform: scaleY(-1);
    }

    .page-template-template-pitches .pitches-notice::after {
        bottom: -1px;
        background: var(--color-paper);
        -webkit-mask: url("../img/pitches/torn-paper-bottom.svg") center / 100% 100% no-repeat;
                mask: url("../img/pitches/torn-paper-bottom.svg") center / 100% 100% no-repeat;
        transform: scaleY(-1);
    }
}

.page-template-template-pitches .pitches-notice__title {
    margin: 0 0 .6rem;
    font: var(--h6-font);
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-on-maroon);
}

.page-template-template-pitches .pitches-notice__strong {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-template-template-pitches .pitches-notice__text {
    max-width: 46rem;
    margin: 0 auto;
    font: var(--p6-font);
    color: var(--color-on-maroon);
}

/* -------------------------------------------------------------------
   §3 / §4 Roster grids — Stone/Dark left-aligned cards
   ------------------------------------------------------------------- */
.page-template-template-pitches .pitches-grid {
    position: relative;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.page-template-template-pitches .pitches-grid > .section__inner {
    position: relative;
    z-index: 1;
}

/* Page-background line-art icons behind the grids (faint; internal opacity is
   baked into the SVGs). Anchored to page centre so they sit just outside the
   content column, behind the cards. */
.page-template-template-pitches .pitches-grid--divider::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -620px;
    width: 200px;
    height: 260px;
    background: url("../img/pitches/icon-geyser.svg") no-repeat left top / contain;
    pointer-events: none;
    z-index: 0;
}

.page-template-template-pitches .pitches-grid:not(.pitches-grid--divider)::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -600px;
    width: 150px;
    height: 260px;
    background: url("../img/pitches/icon-pen-bg.svg") no-repeat left top / contain;
    pointer-events: none;
    z-index: 0;
}

.page-template-template-pitches .pitches-grid__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.page-template-template-pitches .pitches-grid__title {
    margin: 0;
    font: var(--h3-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}

.page-template-template-pitches .pitches-grid__sub {
    margin: 0;
    font: var(--p6-font);
    text-align: right;
    color: var(--color-maroon-light);
}

.page-template-template-pitches .pitches-grid__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.page-template-template-pitches .pitches-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 24px 24px 32px;
    background: var(--color-stone-dark);
    border-radius: var(--radius-lg);
}

.page-template-template-pitches .pitches-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.page-template-template-pitches .pitches-card__avatarwrap {
    flex: none;
    width: 66px;
    height: 66px;
    overflow: hidden;
    background: var(--color-panel-light);
}

.page-template-template-pitches .pitches-card__avatar {
    display: block;
    width: 66px;
    height: 66px;
    border-radius: 0;
    object-fit: cover;
}

.page-template-template-pitches .pitches-card__price {
    margin: 0;
    font: var(--h3b-font);
    color: var(--color-maroon-light);
}

.page-template-template-pitches .pitches-card__label {
    margin: 0 0 .35rem;
    font: var(--h7-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    color: var(--color-accent);
}

.page-template-template-pitches .pitches-card__name {
    margin: 0 0 .35rem;
    font: var(--h4-font);
    text-transform: uppercase;
    color: var(--color-ink);
}

.page-template-template-pitches .pitches-card__specialty {
    margin: 0 0 1.25rem;
    margin-left: 24px;
    font: 400 12px/18px var(--font-sans);
    color: var(--color-ink);
}

/* Manicule text link — reused by the cards' "Book" and the closing CTA. Label
   carries a hand-drawn underline rule (SVG background); a small pointing-hand
   icon sits to its right. */
.page-template-template-pitches .pitches-actionlink {
    display: inline-flex;
    align-items: flex-end;
    gap: .45rem;
    text-decoration: none;
}

.page-template-template-pitches .pitches-card__book {
    margin-top: auto;
    align-self: flex-start;
}

.page-template-template-pitches .pitches-actionlink__text {
    padding-bottom: 6px;
    font: 600 11px/13px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--color-accent);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 2px;
}

.page-template-template-pitches .pitches-actionlink__text--book {
    background-image: url("../img/pitches/underline-book.svg");
}

.page-template-template-pitches .pitches-actionlink__text--viewpackages {
    background-image: url("../img/pitches/underline-viewpackages.svg");
}

.page-template-template-pitches .pitches-actionlink__hand {
    flex: none;
    width: 22px;
    height: auto;
    margin-bottom: 4px;
}

.page-template-template-pitches .pitches-actionlink:hover .pitches-actionlink__text {
    color: var(--color-accent-dark);
}

/* -------------------------------------------------------------------
   §5 Closing CTA — card-less centred stack
   ------------------------------------------------------------------- */
.page-template-template-pitches .pitches-cta {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    background: transparent;
    border: 0;
}

.page-template-template-pitches .pitches-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.page-template-template-pitches .pitches-cta__title {
    margin: 0;
    font: var(--h3b-font);
    text-transform: uppercase;
    color: var(--color-maroon);
}

.page-template-template-pitches .pitches-cta__logomark {
    width: 58px;
    height: auto;
    margin: .25rem 0;
}

.page-template-template-pitches .pitches-cta__text {
    max-width: 34rem;
    margin: 0;
    font: var(--p3-font);
    color: var(--color-ink);
}

.page-template-template-pitches .pitches-cta__link {
    margin-top: .5rem;
}

/* -------------------------------------------------------------------
   Responsive — stack the hero, drop the collage, reflow the grids
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .page-template-template-pitches .pitches-grid__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .page-template-template-pitches .pitches-hero {
        padding-bottom: 0;
    }
    .page-template-template-pitches .pitches-hero__inner {
        grid-template-columns: 1fr;
    }

    .page-template-template-pitches .pitches-hero__media {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(100%, 720px);
        margin: 1.5rem 0 0 auto;
    }

    .page-template-template-pitches .pitches-grid--divider::before,
    .page-template-template-pitches .pitches-grid:not(.pitches-grid--divider)::before {
        display: none;
    }
}

@media (max-width: 600px) {
    .page-template-template-pitches .pitches-grid__cards {
        grid-template-columns: 1fr;
    }

    .page-template-template-pitches .pitches-grid__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-template-template-pitches .pitches-grid__sub {
        text-align: left;
    }
}


/* ==== WHAT TO EXPECT (/conference/what-to-expect) ==== */
/* All rules namespaced under .page-template-template-what-to-expect.
   Tokens only; no new CSS variables. Three page-specific components:
   the full-bleed gradient hero, the numbered guide cards, and the two
   boxed CTA rows (white card + soft tinted panel). */

/* --- Hero: full-bleed soft diagonal gradient band, centered column --- */
.page-template-template-what-to-expect .page-header {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: center;
    background: linear-gradient(135deg,
        var(--color-panel-light) 0%,
        var(--color-paper) 55%,
        color-mix(in srgb, var(--color-panel-light) 50%, var(--color-paper)) 100%);
}

.page-template-template-what-to-expect .expect-hero__inner {
    width: min(100% - (var(--space-page) * 2), var(--max-narrow));
    margin-inline: auto;
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.page-template-template-what-to-expect .expect-hero .eyebrow {
    letter-spacing: .14em;
}

.page-template-template-what-to-expect .expect-hero__lede {
    max-width: 40rem;
    margin: 0 auto;
    color: var(--color-muted);
    font: var(--p2-font);
}

.page-template-template-what-to-expect .expect-hero__cta {
    margin: 2rem 0 0;
}

.page-template-template-what-to-expect .expect-hero__chevron {
    margin-left: .4rem;
    flex: none;
}

/* --- Shared narrow measure for the guide + boxes (Figma max-w-5xl) --- */
.page-template-template-what-to-expect .expect-inner {
    width: min(100% - (var(--space-page) * 2), 64rem);
}

/* Section rhythm: one tight block (hero band already pads above). */
.page-template-template-what-to-expect .expect-cards {
    padding: clamp(3rem, 7vw, 4rem) 0 0;
}

.page-template-template-what-to-expect .expect-box--card {
    padding: 3rem 0 0;
}

.page-template-template-what-to-expect .expect-box--muted {
    padding: 2rem 0 clamp(3rem, 7vw, 5rem);
}

/* --- Numbered guide cards --- */
.page-template-template-what-to-expect .expect-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.page-template-template-what-to-expect .expect-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.page-template-template-what-to-expect .expect-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
    box-shadow: var(--shadow-sm);
}

.page-template-template-what-to-expect .expect-card__num {
    flex: none;
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1;
    color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.page-template-template-what-to-expect .expect-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.page-template-template-what-to-expect .expect-card__title {
    margin: 0 0 .5rem;
    font-size: 1.3rem;
    line-height: 1.2;
}

.page-template-template-what-to-expect .expect-card__text {
    flex: 1 1 auto;
    margin: 0 0 .9rem;
    color: var(--color-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.page-template-template-what-to-expect .expect-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
}

.page-template-template-what-to-expect .expect-card__pill {
    display: inline-block;
    padding: .2rem .6rem;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
}

.page-template-template-what-to-expect .expect-card__more {
    flex: none;
    color: var(--color-accent);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.page-template-template-what-to-expect .expect-card__more:hover,
.page-template-template-what-to-expect .expect-card__more:focus-visible {
    color: var(--color-ochre);
    text-decoration: underline;
}

/* --- Boxed CTA rows (Community Partners card + Ready-to-join panel) --- */
.page-template-template-what-to-expect .expect-box__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 2rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

.page-template-template-what-to-expect .expect-box--card .expect-box__panel {
    background: var(--color-panel);
}

.page-template-template-what-to-expect .expect-box--muted .expect-box__panel {
    background: color-mix(in srgb, var(--color-panel-light) 45%, var(--color-paper));
}

.page-template-template-what-to-expect .expect-box__text .eyebrow {
    margin: 0 0 .5rem;
    letter-spacing: .12em;
}

.page-template-template-what-to-expect .expect-box__title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    line-height: 1.15;
}

.page-template-template-what-to-expect .expect-box__lede {
    max-width: 42rem;
    margin: .5rem 0 0;
    color: var(--color-muted);
    font-size: .95rem;
    line-height: 1.6;
}

.page-template-template-what-to-expect .expect-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    flex: none;
}

/* --- Mobile: stack cards and box rows (matches theme's 760px breakpoint) --- */
@media (max-width: 760px) {
    .page-template-template-what-to-expect .expect-guide {
        grid-template-columns: 1fr;
    }

    .page-template-template-what-to-expect .expect-box__panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .page-template-template-what-to-expect .expect-box__actions {
        width: 100%;
    }

    .page-template-template-what-to-expect .expect-box__actions .button {
        flex: 1 1 auto;
    }
}


/* ==== FACULTY (/faculty) ==== */

/* --- Centered page header (hero) --------------------------------------- */
.page-template-template-faculty .page-header {
    text-align: center;
}

/* Delivered H1 is title-case ("Faculty, Literary Agents & Consultants"), not
   the sitewide uppercase H1 treatment. */
.page-template-template-faculty .page-header h1 {
    text-transform: none;
}

.page-template-template-faculty .page-header__intro {
    font: var(--p2-font);
    color: var(--color-muted);
    max-width: 42rem;
    margin: 0 auto;
}

/* --- Filter bar -------------------------------------------------------- */
/* Sits directly on the page background (no wrapping panel), centered as a
   group beneath the centered hero. */
.page-template-template-faculty .filter-bar--center {
    justify-content: center;
    margin-bottom: 2.5rem;
}

/* --- Faculty card grid ------------------------------------------------- */
/* Figma: 5 columns desktop, 4 tablet, 2 mobile; gap-4 (1rem). */
.page-template-template-faculty .people-grid--faculty {
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

/* --- Person card (full-card link, bordered, portrait crop) ------------- */
.page-template-template-faculty .person-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--color-ink);
    text-decoration: none;
    transition: box-shadow var(--transition-fast);
}

.page-template-template-faculty a.person-card:hover,
.page-template-template-faculty a.person-card:focus-visible {
    box-shadow: var(--shadow-sm);
}

/* Portrait photo box clips the hover zoom. Overrides the sitewide square
   .person-card img (1:1, own radius/margin) for this page's 3:4 crop. */
.page-template-template-faculty .person-card__photo {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-line);
}

.page-template-template-faculty .person-card__photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    display: block;
    transition: transform .5s ease;
}

.page-template-template-faculty a.person-card:hover .person-card__photo img {
    transform: scale(1.05);
}

.page-template-template-faculty .person-card__body {
    display: block;
    padding: .75rem;
}

/* Card micro-label — accent, uppercase, tracked; smaller than .eyebrow. */
.page-template-template-faculty .person-card__eyebrow {
    display: block;
    margin: 0 0 .35rem;
    color: var(--color-accent);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.page-template-template-faculty .person-card__name {
    display: block;
    margin: 0 0 .15rem;
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-ink);
}

.page-template-template-faculty .person-card__role {
    display: block;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
    .page-template-template-faculty .people-grid--faculty {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .page-template-template-faculty .people-grid--faculty {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==== KEYNOTES ARCHIVE (/keynotes) ==== */

/* --- Centered page header ---------------------------------------------- */
.post-type-archive-smlf_speaker .page-header {
    text-align: center;
}

/* --- Keynote card grid -------------------------------------------------- */
/* The hub's branded keynote card (stone-dark body, clay subhead, underlined
   text-button) laid out as a wrapping grid instead of the carousel track:
   4-up at full content width, dropping columns fluidly down to 1 on phones.
   min() guards the track against overflow below the 270px card minimum. */
.keynotes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

/* Equal-height cards: body stretches, Learn More pins to the bottom edge so
   the button row lines up across the grid regardless of desc length. */
.keynotes-grid .keynote-card {
    display: flex;
    flex-direction: column;
}

.keynotes-grid .keynote-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
}

.keynotes-grid .keynote-card__desc {
    margin-bottom: 16px;
}

.keynotes-grid .keynote-card__btn {
    margin-top: auto;
}


/* ==== REGISTRATION (/registration) ==== */

/* Page-scoped styling for template-registration.php, matching the Jul-2026
   dev-ready Figma redesign. Everything is namespaced under the
   .page-template-template-registration body class; tokens only.

   Formation vs. the shared partials:
   - Page base is Stone (panel-light); the hero carries a decorative illustrated
     collage (cactus + bell-tower + pressed-flower stamps), clipped so it never
     forces a horizontal scroll, and the conference-dates line is now plain
     tracked Clay text (no pill, no emoji).
   - Packages sit on a full-bleed dark Plum band (torn-paper top + bottom edges);
     every card is identical Stone/Dark, no "best" distinction — only a plain
     "Most Popular" label. Card CTA is the design-system manicule text-link
     (Ochre), not a button. Subtitle + hairline divider are drawn here.
   - À-la-carte add-ons sit on a full-bleed Stone/Dark band (torn-paper bottom
     edge) as a 2-up card grid under always-underlined text tabs.
   - Refund Policy is plain centered text (no box), rendered ABOVE the
     Important Dates / Scholarships / Questions? 3-up info row (Stone/Dark cards).

   Torn-paper band edges are the SVG exports painted as full-bleed pseudo-element
   strips; the Plum band sits above the Stone band in the stacking order so its
   torn bottom overlaps cleanly. Title-case headings override the sitewide
   uppercase transform on this page's own section headings only (package card
   names stay uppercase, matching Figma; the shared community-CTA band is
   left alone). */

.page-template-template-registration {
    --reg-torn: clamp(24px, 3.5vw, 48px); /* torn-paper edge strip height */
    --reg-measure: 1024px;                /* mid-width band content measure */
    background-color: var(--color-panel-light);
}

/* Title-case section headings — Figma sets these title case; the sitewide
   --hN-transform:uppercase would force-cap them. Scoped so the package
   card names (uppercase in Figma) and the shared CTA heading keep their
   sitewide treatment. */
.page-template-template-registration .registration-addons > .section__inner > h2,
.page-template-template-registration .registration-refund__title,
.page-template-template-registration .registration-info-grid .card h3 {
    text-transform: none;
}

/* -------------------------------------------------------------------
   §1 Hero — centered narrow copy over an illustrated collage
   ------------------------------------------------------------------- */
.page-template-template-registration .registration-hero {
    position: relative;
    overflow: hidden;
    background: transparent;
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.page-template-template-registration .registration-hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--max-narrow);
    text-align: center;
}

.page-template-template-registration .registration-hero__content h1 {
    margin: .5rem 0 0;
    color: var(--color-maroon);
    font-size: clamp(2rem, 4.6vw, 3rem);
    line-height: 1.05;
}

.page-template-template-registration .registration-hero .page-header__lede {
    max-width: 42rem;
    margin: 1rem auto 0;
    color: var(--color-ink);
    font: var(--p2-font);
}

.page-template-template-registration .registration-hero__dates {
    margin: 1.25rem 0 0;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: var(--tracking-caps-wide);
    text-transform: uppercase;
}

/* One supplied decorative image on each side. */
.page-template-template-registration .registration-hero__media {
    position: absolute;
    bottom: 0;
    z-index: 1;
    margin: 0;
    pointer-events: none;
}

.page-template-template-registration .registration-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

.page-template-template-registration .registration-hero__media--left {
    left: 0;
    width: clamp(150px, 20vw, 310px);
}

.page-template-template-registration .registration-hero__media--right {
    right: 0;
    width: clamp(210px, 30vw, 465px);
}

/* -------------------------------------------------------------------
   §2 Packages — full-bleed Plum band, torn-paper edges, uniform cards
   ------------------------------------------------------------------- */
.page-template-template-registration .registration-packages {
    position: relative;
    z-index: 1;
    background: var(--color-maroon);
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* Torn-paper edges — the SVGs are pre-filled Plum, so the tear jags into the
   cream hero above (::before) and the Stone add-ons band below (::after). */
.page-template-template-registration .registration-packages::before,
.page-template-template-registration .registration-packages::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--reg-torn);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.page-template-template-registration .registration-packages::before {
    bottom: 100%;
    background-image: url("../img/registration/torn-paper-pricing-band-top.svg");
    background-position: bottom center;
    /* SVG is solid-fill-top/torn-bottom (same orientation as the ::after
       asset). ::after sits below packages so that orientation is correct
       as-is; ::before sits above packages (its near/continuous edge is at
       the box's BOTTOM, not top), so the fill needs flipping to land the
       solid portion against packages and the torn reveal up into the hero. */
    transform: scaleY(-1);
}

.page-template-template-registration .registration-packages::after {
    top: 100%;
    background-image: url("../img/registration/torn-paper-pricing-band-bottom.svg");
    background-position: top center;
}

.page-template-template-registration .registration-pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.page-template-template-registration .registration-pkg {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: var(--color-stone-dark);
    border-radius: var(--radius-lg);
    color: var(--color-ink);
}

.page-template-template-registration .registration-pkg__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.75rem;
}

.page-template-template-registration .registration-pkg__flag {
    margin: 0;
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .95rem;
}

.page-template-template-registration .registration-pkg__price {
    margin-left: auto;
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    line-height: 1;
}

.page-template-template-registration .registration-pkg__name {
    margin: 1rem 0 0;
    color: var(--color-maroon);
    font-size: 1.5rem;
}

.page-template-template-registration .registration-pkg__sub {
    margin: .35rem 0 0;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
}

/* Other Rates — the price_tiers meta (August special, student/Sala discount,
   Mexican-national peso rates) as a ruled label/price table under the
   subtitle, so the discounted audiences find their figure next to the USD
   headline instead of only at checkout. */
.page-template-template-registration .registration-pkg__rates {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
}

.page-template-template-registration .registration-pkg__rates-title {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-template-template-registration .registration-pkg__rate-list {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.page-template-template-registration .registration-pkg__rate-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.page-template-template-registration .registration-pkg__rate-label {
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .9rem;
    line-height: 1.4;
}

.page-template-template-registration .registration-pkg__rate-price {
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}

/* Feature list — hairline divider above, mono uppercase disc bullets. */
.page-template-template-registration .registration-pkg__features {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.page-template-template-registration .registration-pkg__features li {
    position: relative;
    padding-left: 1rem;
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.5;
}

.page-template-template-registration .registration-pkg__features li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* Manicule "Select Package" text-link — Ochre, pushed to the card foot so
   CTAs align across a row. */
.page-template-template-registration .registration-pkg .link-manicule {
    margin-top: auto;
    padding-top: 1.75rem;
    color: var(--color-ochre);
}

.page-template-template-registration .registration-pkg .link-manicule:hover,
.page-template-template-registration .registration-pkg .link-manicule:focus-visible {
    color: var(--color-accent);
    font-weight: 700;
}

/* -------------------------------------------------------------------
   §3 À-la-carte — full-bleed Stone/Dark band, torn bottom, 2-up cards
   ------------------------------------------------------------------- */
.page-template-template-registration .registration-addons {
    position: relative;
    z-index: 0;
    background: var(--color-stone-dark);
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.page-template-template-registration .registration-addons::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--reg-torn);
    background: url("../img/registration/torn-paper-addons-band-bottom.svg") top center / 100% 100% no-repeat;
    pointer-events: none;
}

.page-template-template-registration .registration-addons h2 {
    margin: .5rem 0 0;
    color: var(--color-maroon);
}

.page-template-template-registration .registration-addons__intro {
    max-width: 42rem;
    margin: .75rem 0 0;
    color: var(--color-ink);
}

/* Always-underlined text tabs; active reads Clay (Figma §3). */
.page-template-template-registration .registration-addons .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 1.75rem 0;
}

.page-template-template-registration .registration-addons .tabs button {
    padding: 0 0 .25rem;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: var(--tracking-caps-wide);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .35em;
    cursor: pointer;
}

.page-template-template-registration .registration-addons .tabs button.is-active,
.page-template-template-registration .registration-addons .tabs button:hover {
    color: var(--color-accent);
}

.page-template-template-registration .registration-addon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* The tab script hides inactive panels via the hidden attribute; the
   display:grid above outranks the UA [hidden] rule, so restate it. */
.page-template-template-registration .registration-addon-grid[hidden] {
    display: none;
}

.page-template-template-registration .registration-addon {
    padding: 1.5rem;
    background: var(--color-panel-light);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: var(--radius-lg);
}

.page-template-template-registration .registration-addon__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.page-template-template-registration .registration-addon__title {
    margin: 0;
    color: var(--color-maroon);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.3;
}

.page-template-template-registration .registration-addon__buy {
    flex: none;
    text-align: right;
}

.page-template-template-registration .registration-addon__price {
    margin: 0;
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1;
}

.page-template-template-registration .registration-addon__add {
    display: inline-block;
    margin-top: .35rem;
    color: var(--color-ochre);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.page-template-template-registration .registration-addon__add:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.page-template-template-registration .registration-addon__note {
    margin: .75rem 0 0;
    color: var(--color-muted);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .95rem;
}

.page-template-template-registration .registration-addon__desc {
    margin: .5rem 0 0;
    color: var(--color-ink);
    font-size: .92rem;
    line-height: 1.5;
}

.page-template-template-registration .registration-addons__note {
    margin-top: 1.5rem;
    color: var(--color-muted);
}

/* -------------------------------------------------------------------
   §4 Refund Policy — plain centered text (no box), above the info row
   ------------------------------------------------------------------- */
.page-template-template-registration .registration-refund {
    background: transparent;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
}

.page-template-template-registration .registration-refund .section__inner {
    max-width: 780px;
    text-align: center;
}

.page-template-template-registration .registration-refund__title {
    margin: 0 0 1rem;
    color: var(--color-maroon);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.page-template-template-registration .registration-refund__text {
    margin: 0;
    color: var(--color-ink);
    line-height: 1.8;
}

.page-template-template-registration .registration-refund__text a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* -------------------------------------------------------------------
   §5 Info row — Important Dates + Scholarships + Questions? (3-up)
   ------------------------------------------------------------------- */
.page-template-template-registration .registration-info-grid .section__inner {
    max-width: var(--reg-measure);
}

.page-template-template-registration .registration-info-grid .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.page-template-template-registration .registration-info-grid .card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--color-stone-dark);
    border: none;
    border-radius: var(--radius-lg);
    text-align: center;
}

.page-template-template-registration .registration-info-grid .card > h3 {
    margin: 0 0 1rem;
    color: var(--color-maroon);
    font-size: 1.3rem;
}

.page-template-template-registration .registration-info-grid .card p {
    color: var(--color-ink);
}

/* Important Dates renders through card_grid's items list — Figma wants plain
   centered lines, not the Clay-checkmark feature bullets that markup carries. */
.page-template-template-registration .registration-info-grid .pricing-card__features {
    gap: .4rem;
    text-align: center;
}

.page-template-template-registration .registration-info-grid .pricing-card__features li {
    padding-left: 0;
    color: var(--color-ink);
    font-size: .95rem;
}

.page-template-template-registration .registration-info-grid .pricing-card__features li::before {
    content: none;
}

/* Scholarships / Questions? text link — Clay, tracked, pinned to the card foot. */
.page-template-template-registration .registration-info-grid .card > a {
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .25em;
}

.page-template-template-registration .registration-info-grid .card > a:hover {
    color: var(--color-ochre);
}

/* -------------------------------------------------------------------
   Responsive — collapse grids, show both hero images below copy
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .page-template-template-registration .registration-pkg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .page-template-template-registration .registration-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-bottom: 0;
    }
    .page-template-template-registration .registration-hero__content {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .page-template-template-registration .registration-hero__media {
        position: relative;
        bottom: auto;
        width: 100%;
        grid-row: 2;
        align-self: end;
    }
    .page-template-template-registration .registration-hero__media--left {
        left: auto;
        grid-column: 1;
    }
    .page-template-template-registration .registration-hero__media--right {
        right: auto;
        grid-column: 2;
    }

    .page-template-template-registration .registration-pkg-grid,
    .page-template-template-registration .registration-addon-grid,
    .page-template-template-registration .registration-info-grid .card-grid {
        grid-template-columns: 1fr;
    }
}

/* §3 À-la-carte add-on cards: top-left icon added to the card head.
 * .registration-addon__top was title|buy (space-between); the title is now
 * wrapped with the icon in .registration-addon__head so icon+title cluster on
 * the left and price/+Add stays right. Everything else (.registration-addon,
 * __top, __title, __buy, __price, __add) is already styled earlier in this
 * block — these two rules are the only genuinely new selectors. */
.page-template-template-registration .registration-addon__head {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-width: 0;
}

.page-template-template-registration .registration-addon__icon {
    flex: none;
    display: block;
    width: 1.5rem;
    margin-top: .1rem;
}

.page-template-template-registration .registration-addon__icon .icon--typewriter {
    display: block;
    width: 100%;
    height: auto;
}

/* ==== KEYNOTESINGLE (single-smlf_speaker.php) ==== */
/* Two-column keynote/speaker single: sticky sidebar (photo + identity + CTA)
   beside a scrolling content column (Biography, About This Keynote, Conference
   Events). All selectors namespaced under the .single-smlf_speaker body class;
   tokens only. */

.single-smlf_speaker .keynote-single__back {
    margin-bottom: 2rem;
}

.single-smlf_speaker .keynote-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3rem;
    align-items: start;
}

/* ---- Sidebar --------------------------------------------------------- */
.single-smlf_speaker .keynote-single__sticky {
    position: sticky;
    top: 6rem;
}

.single-smlf_speaker .keynote-single__photo {
    margin: 0 0 1.5rem;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-panel-light);
}

.single-smlf_speaker .keynote-single__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-smlf_speaker .keynote-single__photo--empty {
    border: 1px solid var(--color-line);
}

.single-smlf_speaker .keynote-single__ident {
    margin-bottom: 1.5rem;
}

.single-smlf_speaker .keynote-single__name {
    margin: 0 0 .5rem;
    font-family: var(--font-serif);
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
}

.single-smlf_speaker .keynote-single__role {
    margin: 0 0 .5rem;
    color: var(--color-accent);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.4;
}

.single-smlf_speaker .keynote-single__session {
    margin: 0;
    color: var(--color-muted);
    font-size: .875rem;
    line-height: 1.4;
}

.single-smlf_speaker .keynote-single__meta {
    margin: .4rem 0 0;
    color: var(--color-muted);
    font-size: .875rem;
    line-height: 1.4;
}

.single-smlf_speaker .keynote-single__genre {
    display: inline-block;
    margin-top: .7rem;
    padding: .25rem .7rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.single-smlf_speaker .keynote-single__links {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
}

.single-smlf_speaker .keynote-single__links a {
    font: var(--h7-font);
    text-transform: var(--h7-transform);
    letter-spacing: .03em;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.single-smlf_speaker .keynote-single__cta {
    width: 100%;
}

/* ---- Content column -------------------------------------------------- */
.single-smlf_speaker .keynote-single__block {
    margin-bottom: 3rem;
}

.single-smlf_speaker .keynote-single__block:last-child {
    margin-bottom: 0;
}

.single-smlf_speaker .keynote-single__subhead {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
}

.single-smlf_speaker .keynote-single__prose > * {
    font: var(--p2-font);
    color: color-mix(in srgb, var(--color-ink) 82%, var(--color-paper));
    margin: 0 0 1rem;
}

.single-smlf_speaker .keynote-single__prose > *:last-child {
    margin-bottom: 0;
}

.single-smlf_speaker .keynote-single__books strong {
    color: var(--color-ink);
    font-weight: 600;
}

/* ---- Conference Events cards ---------------------------------------- */
.single-smlf_speaker .keynote-single__events {
    display: grid;
    gap: 1rem;
}

.single-smlf_speaker .keynote-event {
    border-radius: 12px;
    transition: box-shadow var(--transition-fast);
}

.single-smlf_speaker .keynote-event:hover {
    box-shadow: var(--shadow-sm);
}

.single-smlf_speaker .keynote-event__badge {
    display: inline-block;
    margin: 0 0 .6rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-panel));
    color: var(--color-accent);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.single-smlf_speaker .keynote-event__title {
    margin: 0 0 .6rem;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
}

.single-smlf_speaker .keynote-event__meta {
    display: grid;
    gap: .25rem;
}

.single-smlf_speaker .keynote-event__meta p {
    margin: 0;
    font: var(--p4-font);
    color: var(--color-muted);
}

.single-smlf_speaker .keynote-event__meta strong {
    color: var(--color-ink);
    font-weight: 600;
}

/* ---- Mobile: unstick + single column -------------------------------- */
@media (max-width: 860px) {
    .single-smlf_speaker .keynote-single__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .single-smlf_speaker .keynote-single__sticky {
        position: static;
    }

    .single-smlf_speaker .keynote-single__photo {
        max-width: 320px;
    }
}


/* ==== FACULTY SINGLE (/faculty/<slug>) ==== */

/* Content column vertical rhythm — matches the delivered py-24 wrapper. */
.single-smlf_faculty .facultysingle {
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* Back-to-faculty link — keep the established sibling-single pattern (plain
   eyebrow link + chevron prefix), not Figma's bordered button chrome. */
.single-smlf_faculty .facultysingle__back {
    margin-bottom: 2rem;
}

.single-smlf_faculty .facultysingle__back a {
    color: var(--color-accent);
    text-decoration: none;
}

.single-smlf_faculty .facultysingle__back a:hover {
    color: var(--color-ochre);
}

/* --- Profile grid: 2/5 aside + 3/5 identity --------------------------- */
.single-smlf_faculty .facultysingle-profile {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: clamp(2rem, 5vw, 3rem);
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.single-smlf_faculty .facultysingle-profile__aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Portrait — 4:5, rounded, cover. Tinted placeholder holds the box when no
   featured image is set. */
.single-smlf_faculty .facultysingle-photo {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-panel-light);
}

.single-smlf_faculty .facultysingle-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Consultation card — soft accent tint (no dedicated token; color-mix keeps it
   on the existing Clay accent). */
.single-smlf_faculty .facultysingle-consult {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-white));
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.single-smlf_faculty .facultysingle-consult__title {
    font: var(--p2-font);
    font-weight: 600;
    text-transform: none;
    color: var(--color-ink);
    margin: 0 0 .5rem;
}

.single-smlf_faculty .facultysingle-consult__desc {
    font: var(--p4-font);
    line-height: 1.5;
    color: var(--color-muted);
    margin: 0 0 .9rem;
}

.single-smlf_faculty .facultysingle-consult__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.single-smlf_faculty .facultysingle-consult__slots {
    font: var(--p4-font);
    color: var(--color-muted);
}

.single-smlf_faculty .facultysingle-consult__price {
    font: var(--p3-font);
    font-weight: 700;
    color: var(--color-ink);
}

.single-smlf_faculty .facultysingle-consult__cta {
    width: 100%;
    min-height: 40px;
}

/* Recent books — plain block, no card chrome. */
.single-smlf_faculty .facultysingle-books__title {
    font: var(--p2-font);
    font-weight: 600;
    text-transform: none;
    color: var(--color-ink);
    margin: 0 0 .75rem;
}

.single-smlf_faculty .facultysingle-books__list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.single-smlf_faculty .facultysingle-book__name {
    font: var(--p3-font);
    font-weight: 500;
    color: var(--color-ink);
    margin: 0;
}

.single-smlf_faculty .facultysingle-book__year {
    font: var(--p4-font);
    color: var(--color-muted);
    margin: 0;
}

/* --- Identity column -------------------------------------------------- */
.single-smlf_faculty .facultysingle-pill {
    display: inline-block;
    margin-bottom: 1rem;
}

/* Accent-filled "Faculty" pill (person_type term) — distinct from the
   ink-filled session badges. */
.single-smlf_faculty .card__badge--accent {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

/* Person name — sitewide serif uppercase per brand policy, scaled down for an
   in-column (non-hero) heading so it doesn't overpower the layout. */
.single-smlf_faculty .facultysingle-name {
    font: var(--h2-font);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    color: var(--color-ink);
    margin: 0 0 .75rem;
}

.single-smlf_faculty .facultysingle-specialty {
    font: var(--p1-font);
    color: var(--color-accent);
    margin: 0 0 1.5rem;
}

.single-smlf_faculty .facultysingle-bio > * + * {
    margin-top: 1rem;
}

.single-smlf_faculty .facultysingle-bio p {
    font: var(--p2-font);
    line-height: 1.7;
    color: color-mix(in srgb, var(--color-ink) 82%, var(--color-paper));
}

/* --- Session sections (Workshops / Intensives) ------------------------ */
.single-smlf_faculty .facultysingle-sessions,
.single-smlf_faculty .facultysingle-panels {
    margin-top: clamp(2.5rem, 6vw, 4rem);
}

.single-smlf_faculty .facultysingle-sessions__title,
.single-smlf_faculty .facultysingle-panels__title {
    margin-bottom: 1.5rem;
}

/* Two-up card grid across the full column (overrides the auto-fit default). */
.single-smlf_faculty .facultysingle-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.single-smlf_faculty .facultysingle-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.single-smlf_faculty .facultysingle-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Ink-filled session badge — the Figma blue-slate is a shadcn placeholder, not
   a brand colour; fill with ink to match the sitewide fix. */
.single-smlf_faculty .card__badge--filled {
    background: var(--color-ink);
    color: var(--color-white);
    border-color: var(--color-ink);
}

.single-smlf_faculty .facultysingle-card__title {
    font: var(--h4-font);
    text-transform: none;
    color: var(--color-ink);
    margin: 0;
}

.single-smlf_faculty .facultysingle-card__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font: var(--p4-font);
    line-height: 1.4;
    color: var(--color-muted);
    margin: 0;
}

.single-smlf_faculty .facultysingle-card__meta svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.single-smlf_faculty .facultysingle-card__price {
    font: var(--p3-font);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
}

/* Ghost CTA pinned to the card bottom so footers align across a row. */
.single-smlf_faculty .facultysingle-card__cta {
    width: 100%;
    margin-top: auto;
}

/* --- Panel discussions — full-width stacked rows ---------------------- */
.single-smlf_faculty .facultysingle-panels__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.single-smlf_faculty .facultysingle-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.single-smlf_faculty .facultysingle-panel__title {
    font: var(--h4-font);
    text-transform: none;
    color: var(--color-ink);
    margin: 0 0 .35rem;
}

.single-smlf_faculty .facultysingle-panel__meta {
    font: var(--p4-font);
    color: var(--color-muted);
    margin: 0;
}

.single-smlf_faculty .facultysingle-panel__badge {
    flex: none;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
    .single-smlf_faculty .facultysingle-profile {
        grid-template-columns: 1fr;
    }

    .single-smlf_faculty .facultysingle-photo {
        max-width: 24rem;
    }

    .single-smlf_faculty .facultysingle-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .single-smlf_faculty .facultysingle-panel {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==== POST-VERIFY FIXES (Jul 2026 full-site build) ==== */

/* Featured Country: Featured Voices band is pale amber in the prototype
   (amber-50 #fffbeb — same literal precedent as the Travel basics band;
   no amber token exists in the brand palette). */
.page-template-template-featured-country .country-voices {
    background: #fffbeb;
}

/* FAQ: the page's own "Still have questions?" band is pale amber with dark
   text in the prototype, not the clay .section--cta default. Scoped with
   :not(:last-of-type) so the shared community CTA band (last section on the
   page) keeps the sitewide clay treatment. */
.page-template-template-faq .section--cta:not(:last-of-type) {
    background: #fffbeb;
    color: var(--color-ink);
}
.page-template-template-faq .section--cta:not(:last-of-type) h2 {
    color: var(--color-ink);
}
.page-template-template-faq .section--cta:not(:last-of-type) .button--light {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}
.page-template-template-faq .section--cta:not(:last-of-type) .button--outline-white {
    border-color: var(--color-ink);
    color: var(--color-ink);
}

/* Literary Spotlight — presenter portraits.
   Cards render photo-forward per the prototype (portrait on top, 3-col grid).
   A presenter with no featured image and no bundled fallback falls back to a
   token-colour block so the card is never imageless. The .spotlight-card__photo
   base rule already supplies the 3:4 crop; the block needs its own box sizing
   since `.keynote-card img` (width/object-fit) only targets <img>. The
   --fallback class is a swap hook for generic stock faces (no visual change). */
.page-template-template-literary-spotlight .spotlight-card__photo--placeholder {
    display: block;
    width: 100%;
    background: var(--color-panel-light);
    border-bottom: 1px solid var(--color-line);
}

/* ==== SHARED CHROME (designer devsite Jul 2026) ==== */

/* All selectors below are scoped to the chrome elements' OWN classes
 * (header actions, the community band's .section--cta-community, and the rich
 * footer) — never to a page body class — because this chrome is sitewide.
 * Tokens only. Paths are relative to assets/css/site.css (append target). */

/* ------------------------------------------------------------------
   1. Header — Donate button
   Figma renders BOTH header actions ("Donate" + "Register Now") as solid
   Clay pills; live rendered Donate as a ghost/outline pill. Promote the
   ghost pill in the header to the same solid Clay fill (and Clay -> Ochre
   hover) as the primary button. Styling only — header markup unchanged.
   ------------------------------------------------------------------ */
.header-actions .button--ghost {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: transparent;
}

.header-actions .button--ghost:hover {
    background: var(--color-ochre);
    color: var(--color-white);
}

/* ------------------------------------------------------------------
   2. Community CTA band — .section--cta-community
   Sitewide chrome band rendered by conference_community_cta(). Designer
   devsite: full-bleed torn-paper Clay artwork, an ornament divider under
   the heading, and the outline pills downgraded to underlined uppercase
   text links. Scoped to the community band's own class so the other shared
   cta_band callers stay on the flat-Clay default; the page-scoped band
   overrides (travel/workshops) keep winning on their own pages by
   specificity. Mirrors the already-shipped workshops band treatment.
   ------------------------------------------------------------------ */
.section--cta-community {
    position: relative;
    background: var(--color-accent) url("../img/cta/cta-band-bg.webp") center / cover no-repeat;
}

/* Torn-paper seam: band -> footer.
   The delivered band artwork carries its own torn bottom edge, but a
   full-bleed `background-size: cover` rescales and crops that baked edge
   per viewport (and the clay fill shows through its transparent teeth), so
   it can't reliably meet the footer. Instead the band owns a charcoal torn
   BOTTOM edge that tears down to the footer: a masked pseudo-element whose
   mask (cta-band-rip.png) is the delivered artwork's own tear silhouette,
   extracted from its alpha channel, so the rip matches the design exactly
   and scales with the element -- never leaving a gap. Scoped to the band
   itself, so it only appears where the community band precedes the footer. */
.section--cta-community::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(26px, 3vw, 44px);
    background-color: var(--color-dark);
    -webkit-mask: url("../img/cta/cta-band-rip.png") center bottom / 100% 100% no-repeat;
    mask: url("../img/cta/cta-band-rip.png") center bottom / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* Matching torn TOP edge: the clay band tears UP into the section above,
   mirroring the bottom seam. Same delivered-artwork silhouette (its own top
   edge, cta-band-rip-top.png) filled with the clay token (#ba4a29, an exact
   match for the artwork's top tone), sitting just above the band so the clay
   teeth rise into whatever section precedes it -- the transparent gaps reveal
   that section, so it works on any background. */
.section--cta-community::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-100%);
    height: clamp(26px, 3vw, 44px);
    background-color: var(--color-accent);
    -webkit-mask: url("../img/cta/cta-band-rip-top.png") center top / 100% 100% no-repeat;
    mask: url("../img/cta/cta-band-rip-top.png") center top / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 1;
}

.section--cta-community .cta-band {
    position: relative;
    z-index: 1;
}

.section--cta-community h2 {
    color: var(--color-white);
}

/* Ornament divider under the band heading (token-coloured, shape masked). */
.section--cta-community h2::after {
    content: "";
    display: block;
    width: clamp(150px, 20vw, 210px);
    height: 18px;
    margin: 1.1rem auto 0;
    background-color: var(--color-white);
    -webkit-mask: url("../img/cta/cta-band-divider.svg") center / contain no-repeat;
    mask: url("../img/cta/cta-band-divider.svg") center / contain no-repeat;
}

.section--cta-community p {
    color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

/* Outline pills -> underlined uppercase text links. */
.section--cta-community .cta-band__links {
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.section--cta-community .button--outline-white {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-white);
    font: var(--h6-font);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-wide);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}

.section--cta-community .button--outline-white:hover,
.section--cta-community .button--outline-white:focus-visible {
    background: none;
    color: var(--color-ochre);
}

/* ------------------------------------------------------------------
   3. Footer — .site-footer--rich
   Designer-devsite restructure: an identity cluster (brand + tagline with
   Location/Contact rows stacked beneath) + a large brand wordmark, ahead of
   the existing Programs / Quick Links / Newsletter columns. The markup keeps
   bloginfo() brand + dynamic © year, the id="newsletter" form, and all
   existing page links untouched. The identity column reuses .footer-col--brand
   (existing `grid-column: span 2`); the wordmark spans two tracks so the grid
   stays balanced (identity 2 + wordmark 2 + programs 1 + quick 1 + news 2).
   ------------------------------------------------------------------ */
.site-footer--rich .footer-col--identity {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

/* The design shows only the engraved lockup in the identity column; the
   descriptive tagline is retained for screen readers / SEO but hidden. */
.site-footer--rich .footer-col--identity .footer-tagline {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Engraved brand lockup (delivered footer asset). Stone artwork on the
   charcoal panel — no recolour needed; the SVG fill is already Stone. */
.site-footer--rich .footer-logo-lockup {
    display: inline-block;
    width: 200px;
    max-width: 100%;
}

.site-footer--rich .footer-logo-lockup img {
    display: block;
    width: 100%;
    height: auto;
}

.site-footer--rich .footer-col--identity .footer-block {
    display: grid;
    gap: .35rem;
}

.site-footer--rich .footer-col--wordmark {
    grid-column: span 2;
    align-self: center;
}

/* Wordmark is now the delivered SVG artwork rather than styled text. */
.site-footer--rich .footer-wordmark {
    display: block;
    margin: 0;
    width: clamp(150px, 16vw, 214px);
    height: auto;
}

@media (max-width: 760px) {
    .site-footer--rich .footer-col--wordmark {
        align-self: start;
    }

    .site-footer--rich .footer-wordmark {
        width: clamp(140px, 40vw, 200px);
    }
}

/* ==== 2027 CONFERENCE HUB (/conference/) ====
 * Torn-paper dividers for the 6 newly-colored full-bleed bands (Maroon
 * stats+keynotes, Ochre panels, Plum/Dark contest+country, Clay big-reads,
 * Ochre bookstore). Reuses the travel.php scaffold: the colored section
 * owns both of its own edges -- ::before (scaleY-flipped, tears UP into the
 * lighter section above) / ::after (tears DOWN into the section below) --
 * filled with the section's OWN background-color so the mask's transparent
 * tear-notches always reveal a flat color, never bleed-through art (see the
 * registration-page bug this same rule fixed). Contest + Featured Country
 * share one continuous Plum/Dark zone (same color, no seam between them).
 * #stats/#keynotes/#panels/#featured-country/#big-reads/#bookstore id wraps
 * scope each rule to its one intended instance, since .section--maroon and
 * .section--ochre are also reused elsewhere on this same page. */
.page-template-template-conference #stats .section--maroon,
.page-template-template-conference #keynotes .section--maroon,
.page-template-template-conference #panels .section--ochre,
.page-template-template-conference #contest .section--stone-dark,
.page-template-template-conference #featured-country .section--plum-dark,
.page-template-template-conference #big-reads .section--clay,
.page-template-template-conference #bookstore .section--ochre {
    position: relative;
}

.page-template-template-conference #stats .section--maroon::before,
.page-template-template-conference #keynotes .section--maroon::after,
.page-template-template-conference #panels .section--ochre::before,
.page-template-template-conference #contest .section--stone-dark::before,
.page-template-template-conference #featured-country .section--plum-dark::before,
.page-template-template-conference #big-reads .section--clay::before,
.page-template-template-conference #big-reads .section--clay::after,
.page-template-template-conference #bookstore .section--ochre::before,
.page-template-template-conference #bookstore .section--ochre::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(20px, 3vw, 44px);
    z-index: 3;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* stats: top edge tears up into the cream hero/anchor-nav zone */
.page-template-template-conference #stats .section--maroon::before {
    bottom: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}

/* keynotes: bottom edge tears down into the cream Literary Spotlight zone */
.page-template-template-conference #keynotes .section--maroon::after {
    top: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}

/* panels: top edge tears up into the cream zone above (spotlight/pricing) */
.page-template-template-conference #panels .section--ochre::before {
    bottom: 100%;
    background-color: var(--color-ochre);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}

/* panels/contest seam: the beige Contest band below tears UP into the ochre
   Panels band, so the rip sits at the bottom of Panels, faces up, and carries
   the beige colour of the section below (visible against ochre; a beige tongue
   facing down onto the beige Contest band would be invisible). */
.page-template-template-conference #contest .section--stone-dark::before {
    bottom: 100%;
    background-color: var(--color-stone-dark);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}

/* contest/haiti seam: the dark Haiti band below tears UP into the beige
   Contest band. Rip sits at the bottom of Contest, faces up, and carries the
   dark colour of the Haiti section below (visible against beige). */
.page-template-template-conference #featured-country .section--plum-dark::before {
    bottom: 100%;
    background-color: var(--color-maroon-dark);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}

/* big-reads: top edge tears UP into the Plum/Dark Haiti band above, filled
   with the Clay band's own orange so the divider reads as an orange tear
   rising into Haiti (not a maroon tongue dropping down). */
.page-template-template-conference #big-reads .section--clay::before {
    bottom: 100%;
    background-color: var(--color-accent);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}

/* big-reads: bottom edge tears down into the cream Workshops/Pitches zone */
.page-template-template-conference #big-reads .section--clay::after {
    top: 100%;
    background-color: var(--color-accent);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}

/* bookstore: top edge tears up into the cream zone above */
.page-template-template-conference #bookstore .section--ochre::before {
    bottom: 100%;
    background-color: var(--color-ochre);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}

/* bookstore: bottom edge tears down into the cream Volunteer/Travel zone */
.page-template-template-conference #bookstore .section--ochre::after {
    top: 100%;
    background-color: var(--color-ochre);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}

/* Maroon-zone fallbacks: the stats section (top tear) and keynote carousel
   (bottom tear) each render nothing when their content is missing — stats
   meta empty / zero smlf_speaker posts. Whichever maroon section survives
   takes over the missing edge; the suppressions below turn the fallback off
   whenever the primary owner is present, so the normal page is unchanged. */
.page-template-template-conference #keynotes .section--maroon::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(20px, 3vw, 44px);
    z-index: 3;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    bottom: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-a.svg");
    mask-image: url("../img/travel/torn-paper-edge-a.svg");
    transform: scaleY(-1);
}

.page-template-template-conference #stats .section--maroon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(20px, 3vw, 44px);
    z-index: 3;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    top: 100%;
    background-color: var(--color-maroon);
    -webkit-mask-image: url("../img/travel/torn-paper-edge-b.svg");
    mask-image: url("../img/travel/torn-paper-edge-b.svg");
}

.page-template-template-conference #stats:has(.section--maroon) + #keynotes .section--maroon::before,
.page-template-template-conference #stats:has(+ #keynotes .section--maroon) .section--maroon::after {
    content: none;
}

/* ------------------------------------------------------------------
   Section decorations (client-delivered assets, assets/img/conference/).
   Applied as CSS multiple-background layers on each id-scoped section so
   no section partial needs new markup and the layers compose with the
   torn-paper edges above. First layer paints on top, the last sits just
   above the section's background-colour. Ornaments bleed from the band
   edges; the faint texture fills the band behind the content.
   ------------------------------------------------------------------ */

/* §2 Keynotes — maroon band: faint paper-line texture only. The four
   delivered icons are rendered per-card (see .keynote-card__icon), one to a
   card in order (typewriter, cactus, maguey, heart), not as band ornaments. */
.page-template-template-conference #keynotes .section--maroon {
    background-image: url("../img/conference/conference-keynote-presentations-background.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/* §3 Literary Spotlight — head illustration in the top-right of the band. */
.page-template-template-conference #literary-spotlight .section {
    background-image: url("../img/conference/conference-literary-spotlight-image-right-head.svg");
    background-repeat: no-repeat;
    background-position: right -10px top 0;
    background-size: clamp(150px, 22vw, 340px) auto;
}

/* §4 Packages — two delivered collages only: left panel top-left, right panel
   bottom-right of the band. */
.page-template-template-conference #packages .hs-pricing {
    position: relative;
    /* Transparent so the page texture shows through (this section otherwise
       carries a flat --color-paper fill from .hs-pricing). */
    background-color: transparent;
    background-image:
        url("../img/conference/conference-packages-image-left.png"),
        url("../img/conference/conference-packages-image-right.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left 0 top 0, right 0 bottom 0;
    background-size: clamp(120px, 15vw, 240px) auto, clamp(100px, 12vw, 190px) auto;
}
/* Drop the inherited six-image institute collage here — the conference hub
   uses only the two delivered collages (set as backgrounds above). */
.page-template-template-conference #packages .hs-pricing .collage { display: none; }

/* §5 Panels — delivered paper texture across the ochre band, behind content. */
.page-template-template-conference #panels .section--ochre {
    background-image: url("../img/conference/conference-panel-discussions-background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* §6 Writing Contest — no corner ornament (removed per client). */

/* §7 Featured Country (Haiti) — band texture + right illustration bleeding off
   the plum band's bottom-right. */
.page-template-template-conference #featured-country .section--plum-dark {
    background-image:
        url("../img/conference/conference-haiti-image-right.svg"),
        url("../img/conference/conference-haiti-background.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: right -10px bottom 0, center;
    background-size: clamp(180px, 26vw, 420px) auto, cover;
}

/* §8 Big Reads — delivered texture across the clay band, behind the cards. */
.page-template-template-conference #big-reads .section--clay {
    background-image: url("../img/conference/conference-big-reads-background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* §9 Workshops / Agent / Celebration / Free — one ornament (or the celebration
   image) hanging off the appropriate side of each two-column band. */
.page-template-template-conference #workshops .section {
    background-image: url("../img/conference/conference-workshops-intensives-icon-right-typewriter.svg");
    background-repeat: no-repeat;
    background-position: right 40px center;
    background-size: clamp(80px, 10vw, 150px) auto;
}

.page-template-template-conference #pitches .section {
    background-image: url("../img/conference/conference-agent-pitches-2icons-left.svg");
    background-repeat: no-repeat;
    background-position: left 24px center;
    background-size: clamp(90px, 12vw, 180px) auto;
}

/* Two collages: one top-right, one centred on the left edge (same delivered
   asset — only one was supplied). */
.page-template-template-conference #celebrations .section {
    background-image:
        url("../img/conference/conference-celebrations-right-image.png"),
        url("../img/conference/conference-celebrations-right-image.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right 0 top 0, left 0 center;
    background-size: clamp(150px, 20vw, 300px) auto, clamp(150px, 20vw, 300px) auto;
}

.page-template-template-conference #free-programs .section {
    background-image: url("../img/conference/conference-free-programs-right-icon-heart.svg");
    background-repeat: no-repeat;
    background-position: right 40px center;
    background-size: clamp(70px, 9vw, 130px) auto;
}

/* Travel cards: the delivered maguey icon recoloured to the dark brand maroon
   via CSS mask (solid silhouette) rather than the original coloured art. */
.page-template-template-conference #travel .travel-maguey {
    display: inline-block;
    width: 72px;
    height: 72px;
    background-color: var(--color-maroon);
    -webkit-mask: url("../img/conference/conference-keynote-presentations-icon3-maguey.svg") center / contain no-repeat;
    mask: url("../img/conference/conference-keynote-presentations-icon3-maguey.svg") center / contain no-repeat;
}

/* §10 Bookstore — delivered texture across the ochre band, behind the cards. */
.page-template-template-conference #bookstore .section--ochre {
    background-image: url("../img/conference/conference-bookstore-background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* §11 Volunteer — head ornament on the left of the two-column band. */
.page-template-template-conference #volunteer .section {
    background-image: url("../img/conference/conference-volonteer-left-icon-head.svg");
    background-repeat: no-repeat;
    background-position: left 24px center;
    background-size: clamp(80px, 10vw, 150px) auto;
}

/* Big Reads cards (designer devsite Jul 2026): split card — square book-cover
   slot on the left (asset pending, slot renders empty), Stone text panel on
   the right. Eyebrow reads Clay, footnote is an italic serif Clay line. */
.card-grid--big-reads {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.card-grid--big-reads .card {
    display: grid;
    grid-template-columns: minmax(180px, 42%) 1fr;
    padding: 0;
    overflow: hidden;
    background: var(--color-paper);
    border: none;
}

.card-grid--big-reads .card__media {
    aspect-ratio: 1 / 1;
    background: var(--color-stone-dark);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    margin: 1rem;
}

.card-grid--big-reads .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.card-grid--big-reads .card__body {
    padding: 1.75rem 1.75rem 1.75rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.card-grid--big-reads .card .eyebrow {
    color: var(--color-accent);
    margin: 0;
}

.card-grid--big-reads .card p {
    font-size: .92rem;
}

.card-grid--big-reads .card .card__meta {
    margin-top: auto;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-accent);
}

@media (max-width: 900px) {
    .card-grid--big-reads {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .card-grid--big-reads .card {
        grid-template-columns: 1fr;
    }

    .card-grid--big-reads .card__body {
        padding: 1.5rem;
    }
}

/* ============================================================
   Packages & Pricing (conference hub) — hs-pricing component.
   Layout/positioning/functionality ported verbatim from the
   institute home page's Packages & Pricing section (the
   client-approved reference; institute-theme .home .hs-pricing).
   Ported CSS references the institute token names; the shim on
   .hs-pricing maps them onto conference-theme's own design tokens
   (same Figma design system, so values match). Scoped entirely
   under .hs-pricing so nothing else in the theme is affected.
   Markup: template-parts/section-pricing.php.
   ============================================================ */
.hs-pricing {
    /* --- token shim: institute var name -> conference value --- */
    --clay: var(--color-accent);
    --clay-hover: var(--color-accent-dark);
    --plum: var(--color-maroon);
    --charcoal: var(--color-ink);
    --stone: var(--color-panel-light);
    --stone-dark: var(--color-stone-dark);
    --teal: var(--color-teal);
    --ochre: var(--color-ochre);
    --sky: var(--color-sky);
    --color-panel: #faf6ef;                 /* near-white stone for cards/panel */
    --font-display: var(--font-serif);
    --font-label: var(--font-mono);
    --fs-h2: clamp(1.9rem, 4vw, 2.25rem);
    --fs-h5: 1.125rem;
    --fs-h7: 0.875rem;
    --fs-p1: 1.25rem;
    --fs-p3: 1rem;
    --tracking-caps: 0.05em;

    position: relative;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    overflow: hidden;
}

/* section shell */
.hs-pricing .hs__inner {
    position: relative;
    max-width: var(--max-wide);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    z-index: 2;
}
.hs-pricing .hs__center { text-align: center; }
.hs-pricing .hs-eyebrow {
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h5);
    color: var(--clay);
    margin: 0;
}
.hs-pricing .hs-h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--plum);
    margin: 0;
    overflow-wrap: break-word;
}
.hs-pricing .hs-sub { font-size: var(--fs-p3); color: var(--charcoal); margin: 0; }
.hs-pricing .hs-card--light { background: var(--color-panel); }

/* manicule button */

/* collage layer */
.hs-pricing .collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hs-pricing .collage__item { position: absolute; }
.hs-pricing .collage img { display: block; width: 100%; height: auto; object-fit: contain; }

/* header */
.hs-pricing__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    max-width: 46rem;
    margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
}
.hs-pricing__head .hs-sub { color: var(--color-muted); }

/* tabbed box */
.hs-pricing__box { position: relative; max-width: 62rem; margin-inline: auto; z-index: 2; }
.hs-pricing__tabs { display: flex; align-items: stretch; }
.hs-pricing__tab {
    flex: 1 1 0;
    min-width: 0;
    margin-left: -1px;
    padding: .875rem 1rem;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--plum) 45%, transparent);
    border-bottom: 1px solid var(--teal);
    font-family: var(--font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h7);
    line-height: 1.1;
    color: var(--plum);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.hs-pricing__tab:first-child { margin-left: 0; border-top-left-radius: var(--radius-lg); }
.hs-pricing__tab:last-child { border-top-right-radius: var(--radius-lg); }
.hs-pricing__tab:hover { color: var(--teal); }
.hs-pricing__tab.is-active {
    position: relative;
    z-index: 3;
    color: var(--teal);
    background: var(--color-panel);
    border-color: var(--teal);
    border-bottom-color: transparent;
}
.hs-pricing__tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
.hs-pricing__panels {
    position: relative;
    z-index: 1;
    border: 1px solid var(--teal);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-panel);
    display: grid;
}
.hs-pricing__panel { grid-area: 1 / 1; padding: clamp(1.5rem, 3.2vw, 2.5rem); align-self: start; }
.hs-pricing__panel[hidden] { display: block; visibility: hidden; }
.hs-pricing__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap;
}
.hs-pricing__badge { font-family: var(--font-accent); font-style: italic; color: var(--clay); font-size: var(--fs-p3); margin: 0 0 .25rem; }
.hs-pricing__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1; text-transform: uppercase; color: var(--plum); margin: 0; }
.hs-pricing__tagline { font-size: var(--fs-p3); color: var(--charcoal); margin: .5rem 0 0; }
.hs-pricing__panel-price { text-align: right; flex: none; margin-left: auto; }
.hs-pricing__price { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 5vw, 2.75rem); line-height: 1; color: var(--teal); margin: 0; }
.hs-pricing__price-note { font-family: var(--font-accent); font-style: italic; font-size: var(--fs-p3); color: var(--teal); margin: .375rem 0 0; }
.hs-pricing__bullets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(1.5rem, 3vw, 2rem);
}
.hs-pricing__bullet-list { list-style: none; margin: 0; padding: 0; }
.hs-pricing__bullet {
    position: relative;
    display: flex;
    gap: .5rem;
    font-family: var(--font-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h7);
    line-height: 1.5;
    color: var(--charcoal);
    padding: .1875rem 0;
}
.hs-pricing__bullet::before { content: "\25AA"; color: var(--charcoal); flex: none; line-height: 1.4; }
/* Secondary rates (price_tiers meta) under the feature bullets. */
.hs-pricing__rates { max-width: 26rem; margin-top: clamp(1.25rem, 3vw, 1.75rem); padding-top: .875rem; border-top: 1px solid color-mix(in srgb, var(--charcoal) 20%, transparent); }
.hs-pricing__rates-title {
    font-family: var(--font-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-h7);
    color: var(--charcoal);
    margin: 0 0 .375rem;
}
.hs-pricing__rate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.hs-pricing__rate {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-p3);
    color: var(--charcoal);
}
.hs-pricing__rate-price { color: var(--teal); white-space: nowrap; }
.hs-pricing__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.hs-pricing__see-all { font-family: var(--font-accent); font-style: italic; font-size: var(--fs-p1); color: var(--clay); text-decoration: none; }
.hs-pricing__see-all:hover { color: var(--clay-hover); text-decoration: underline; text-underline-offset: 3px; }

/* à-la-carte band */
.hs-pricing__alacarte {
    position: relative;
    z-index: 1;
    max-width: 62rem;
    margin: calc(var(--radius-lg) * -1) auto 0;
    padding: clamp(2.75rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
    background: var(--plum);
    color: var(--color-on-dark);
    border-radius: var(--radius-lg);
}
.hs-pricing__ac-title { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-h5); color: var(--stone); text-align: center; margin: 0; }
.hs-pricing__ac-sub { text-align: center; font-size: var(--fs-p3); color: var(--color-on-dark); margin: .625rem auto clamp(1.25rem, 3vw, 1.75rem); max-width: 40rem; }
.hs-pricing__ac-link { color: var(--ochre); font-family: var(--font-accent); font-style: italic; text-decoration: underline; text-underline-offset: 2px; }
.hs-pricing__ac-link:hover { color: #e59b34; }
.hs-pricing__ac-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; list-style: none; margin: 0; padding: 0; }
.hs-pricing__ac-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .75rem;
    row-gap: .25rem;
    background: var(--stone);
    border-radius: 12px;
    padding: .875rem 1.125rem;
}
.hs-pricing__ac-icon { grid-column: 1; grid-row: 1 / 3; width: 34px; height: 34px; object-fit: contain; align-self: center; }
.hs-pricing__ac-name { grid-column: 2; grid-row: 1; font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-h7); line-height: 1.2; color: var(--charcoal); }
.hs-pricing__ac-price { grid-column: 3; grid-row: 1; justify-self: end; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 1.75rem); line-height: 1; color: var(--teal); }
.hs-pricing__ac-dur { grid-column: 2; grid-row: 2; font-family: var(--font-accent); font-style: italic; font-size: var(--fs-p3); color: var(--color-muted); }
.hs-pricing__ac-add {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    background: var(--plum);
    color: var(--stone);
    font-family: var(--font-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: .75rem;
    border: 0;
    border-radius: var(--radius);
    padding: .25rem .5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease;
}
.hs-pricing__ac-add:hover { background: #5a1a27; }

/* collage placement */
.hs-pricing .collage__item--belltower  { top: 3%;  left: -1%;  width: min(22vw, 300px); }
.hs-pricing .collage__item--maguey      { top: 24%; left: -2%;  width: min(19vw, 260px); }
.hs-pricing .collage__item--daisy       { top: 52%; left: 1%;   width: min(11vw, 150px); }
.hs-pricing .collage__item--hummingbird { top: 18%; right: 2%;  width: min(11vw, 150px); }
.hs-pricing .collage__item--cactus      { top: 30%; right: -2%; width: min(20vw, 290px); }
.hs-pricing .collage__item--notebook    { bottom: 1%; right: 1%; width: min(21vw, 300px); }

@media (max-width: 900px) {
    .hs-pricing__box,
    .hs-pricing__alacarte { max-width: 100%; }
    .hs-pricing__tabs { overflow-x: auto; scrollbar-width: none; }
    .hs-pricing__tabs::-webkit-scrollbar { display: none; }
    .hs-pricing__tab { flex: 1 0 auto; white-space: nowrap; }
    .hs-pricing__panel-head { flex-direction: column; }
    .hs-pricing__panel-price { text-align: left; margin-left: 0; }
    .hs-pricing__bullets { grid-template-columns: 1fr; }
    .hs-pricing__foot { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .hs-pricing__ac-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   404 page (Figma 377:8116) — scoped to the error404 body class.
   Centered Crimson numeral + burst ornament + manicule link home, flanked by
   the two delivered collage exports from the design. Community band + footer
   are the sitewide chrome.
   ========================================================================== */

.error404 .error-404 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(4rem, 11vw, 8.5rem) var(--space-page) clamp(5rem, 13vw, 10rem);
    overflow: hidden; /* collage bleeds past both edges by design */
}

/* Giant ghost numeral behind everything (Figma: 5% darken watermark). The
   empty alt-text keeps it out of the accessibility tree; browsers without
   the slash syntax drop the whole declaration, losing only the watermark. */
.error404 .error-404::before {
    content: "404" / "";
    position: absolute;
    left: -8%;
    top: -12%;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(360px, 60vw, 820px);
    line-height: 1;
    color: var(--color-maroon);
    opacity: .04;
    pointer-events: none;
    user-select: none;
}

.error404 .error-404__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px; /* Figma stack gap */
}

.error404 .error-404__code {
    margin: 0;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: clamp(88px, 13vw, 128px);
    line-height: .8; /* Figma 128/100 */
    color: var(--color-maroon);
}

/* Burst ornament masked to ochre — same technique as the CTA-band fleuron
   (the raw divider-burst.svg carries no usable fills of its own). */
.error404 .error-404__burst {
    display: block;
    width: min(237px, 60vw);
    aspect-ratio: 313 / 26;
    background-color: currentColor;
    color: var(--color-ochre);
    -webkit-mask: url("../img/icons/divider-burst.svg") no-repeat center / contain;
    mask: url("../img/icons/divider-burst.svg") no-repeat center / contain;
}

.error404 .error-404__message {
    margin: 0;
    font: var(--p2-font);
    color: var(--color-maroon);
}

.error404 .error-404__cta {
    margin: clamp(2.5rem, 6vw, 5rem) 0 0; /* Figma: 108px below the stack */
}

/* ---- Collage art (decorative, hidden from AT) — one flattened image per
   side, bottom-aligned so it sits against the community band's torn edge. */
.error404 .error-404__art {
    position: absolute;
    bottom: 0;
    z-index: 0;
    height: auto;
    pointer-events: none;
}

.error404 .error-404__art--left  { left: 0;  width: clamp(200px, 25vw, 362px); }
.error404 .error-404__art--right { right: 0; width: clamp(220px, 28vw, 404px); }

@media (max-width: 960px) {
    .error404 .error-404__art--left  { width: clamp(130px, 18vw, 200px); }
    .error404 .error-404__art--right { width: clamp(150px, 21vw, 230px); }
}

@media (max-width: 720px) {
    /* Phone: the art would crowd the message — drop it, keep the ghost. */
    .error404 .error-404__art { display: none; }
}