/* Raleighwood theme: burnt red, tan and near-black; Courier Prime headings, Georgia body. Boxed
   sections with thin dark borders, small bold uppercase buttons with an arrow, a cream header with
   dotted dividers between the menu items, and a burnt-red footer. Light only. */
:root {
    color-scheme: light;
    --text: var(--ink);
    --muted: var(--ink-soft);
    --line: #d9d2bb;
    --surface: var(--white);
    --page: var(--white);
    --font-heading: var(--font-mono);
    --font-body: var(--font-serif);
    --font-ui: var(--font-mono);
    --header-bg: var(--cream);
    --header-border: 0;
    --footer-bg: var(--burnt-red);
    --footer-text: var(--white);
    --section-bg: var(--tan);
    --section-border: 1px solid var(--ink);
    --btn-bg: var(--burnt-red);
    --btn-text: var(--white);
    --btn-transform: uppercase;
    --link-color: var(--burnt-red);
    --accent: var(--burnt-red);
    --btn-light-text: var(--burnt-red);
    --card-border: var(--ink);
}

body {
    background: var(--page);
}

.site-header {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Between the menu items on a desktop: a vertical three-dot separator (decorative, drawn on the following link's
   left edge, no content, takes no clicks), in the same muted 70% grey as the dots above the Home buttons. */
@media (min-width: 60rem) {
    .main-nav a {
        position: relative;
    }

    .main-nav a + a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 3px;
        margin: -1.5px 0 0 -1.5px;
        border-radius: 50%;
        background: var(--muted);
        box-shadow: 0 -5px 0 var(--muted), 0 5px 0 var(--muted);
        opacity: 0.7;
        pointer-events: none;
    }
}

.main-nav a {
    font-family: var(--font-mono);
}

.pg-hero {
    background: var(--cream);
}

.hero-band {
    background: var(--white);
}

.hero-band .pg-hero {
    background: transparent;
}

.hero-headline, .box-heading, .promo-text h2, .band-text h2, .sponsor-title, .offer-text h3 {
    font-family: var(--font-mono);
    font-weight: 700;
}

.btn {
    border-radius: 3px;
}

.pg-band {
    background: var(--tan);
}

.footer-inner .footer-name {
    font-family: var(--font-mono);
}

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--burnt-red);
    outline-offset: 2px;
}

.site-footer a:focus-visible, .site-footer button:focus-visible, .site-footer summary:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

/* ==== Subscribe landing pages (newsletter/subscribe*.html): one appended, additive block ====
   The layout after the beehiiv landing page: a faded map fills the main area (a web-size copy of the founder's
   MapFade.png, from this site's own static files), and the content is centred over it: the logo with a soft shadow,
   the Courier Prime heading, two serif lines, then one thin-bordered cream box holding the email field (white) and
   the burnt-red button as one unit (stacked on a phone). The structure and spacing are in site.css (.subscribe-*,
   .landing-*, .join-box); this block is colour, type and shape only. */
/* a white wash over the map (it is only a hint of a map behind the content, as on the beehiiv page) */
.subscribe-main {
    background-color: var(--white);
    background-image:
        linear-gradient(color-mix(in srgb, var(--white) 82%, transparent), color-mix(in srgb, var(--white) 82%, transparent)),
        url("../images/MapFade-1920.1222980b91dc.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.subscribe-landing .landing-logo {
    width: min(15.5rem, 100%);  /* a little larger than the 2x file's own 210px, as on the beehiiv page */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
    margin-bottom: 1.75rem;
}

.subscribe-landing .landing-title {
    margin-bottom: 1.125rem;
    font-family: var(--font-mono);
    font-size: clamp(1.375rem, 1rem + 1.9vw, 2.2rem);
    font-weight: 700;
    color: var(--ink);
}

.subscribe-landing .landing-tagline,
.subscribe-landing .landing-reassure {
    max-width: 26rem;
    margin-bottom: 1.25rem;
    font-family: var(--font-serif);
    color: var(--ink);
}

.subscribe-landing .landing-reassure {
    margin-bottom: 1.5rem;
}

.subscribe-form .join-box {
    max-width: 31rem;
    margin: 0 auto;
    background: var(--cream);
    border: 1px solid var(--ink);
    border-radius: 3px;
}

.subscribe-form .join-box input[type="email"] {
    padding: 0 16px;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    color: var(--ink);
    background: var(--white);
    border: 0;
    border-radius: 2px;
}

.subscribe-form .join-box input[type="email"]::placeholder {
    color: var(--ink-soft);
    opacity: 0.8;
}

.subscribe-form .join-box input[type="email"]:focus-visible {
    outline: 3px solid var(--burnt-red);
    outline-offset: 0;
}

.subscribe-form .join-box .has-error input[type="email"] {
    box-shadow: inset 0 0 0 2px #b91c1c;
}

.subscribe-form .join-box .btn {
    padding: 0 22px;
    letter-spacing: 0.08em;
    border-radius: 2px;
}

.subscribe-form .hint {
    font-family: var(--font-serif);
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.subscribe-landing .landing-link a {
    font-family: var(--font-mono);
}

/* the quieter button: white with a burnt-red outline, red when hovered */
.btn-secondary {
    background: var(--white);
    color: var(--burnt-red);
    border-color: var(--burnt-red);
}

.btn-secondary:hover {
    background: var(--burnt-red);
    color: var(--white);
}

/* ==== Home page: the same faded map as the subscribe landing page (one appended, additive block) ====
   The Home page's main area (main.home-page, set by cms/home_page.html; the other pages do not have it) gets the
   web-size MapFade-1920.webp under a white wash (82%, as on /subscribe/), so a hint of map shows in the white margins
   and between the cream section cards, which keep their look; the header and footer are not in the main area. The
   page is tall, so the map is not stretched to cover it: the tile is as wide as the page (at least 1280px wide,
   centred, so a phone sees the middle of it, not a tiny map) and repeats down the page. Its bottom edge is white and
   its top edge a very pale tan, which the wash makes the same white, so the repeats show no seam. A plain CSS
   background: no extra request beyond the one file, nothing that delays the first picture, no fixed attachment. */
.cms-main.home-page {
    background-color: var(--white);
    background-image:
        linear-gradient(color-mix(in srgb, var(--white) 82%, transparent), color-mix(in srgb, var(--white) 82%, transparent)),
        url("../images/MapFade-1920.1222980b91dc.webp");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% 100%, max(100%, 1280px) auto;
}

/* On a phone (640px and narrower) the tile is 1280px wide and only its middle shows, so a phone is given just that
   middle: MapFade-mobile.webp is the middle 1008 of MapFade-1920.webp's 1920 pixels at the same scale (1280 / 1920),
   about a third of the bytes, and the tile is drawn at 1280 * 1008 / 1920 = 672px, centred, so every pixel lands where
   it did. Only the url() and the size change; the wash, the repeat and the position are the rule above.
   The breakpoint is 640px, not 40rem: a media query's rem is the browser's default font size, so a visitor with a larger
   default would be given the crop on screens wider than it covers (a hard map edge). */
@media (max-width: 640px) {
    .cms-main.home-page {
        background-image:
            linear-gradient(color-mix(in srgb, var(--white) 82%, transparent), color-mix(in srgb, var(--white) 82%, transparent)),
            url("../images/MapFade-mobile.37ad943cea44.webp");
        background-size: 100% 100%, calc(1280px * 1008 / 1920) auto;
    }
}

/* the hero band (white behind the intro and the Latest Newsletter card) lets the map through on this page */
.cms-main.home-page .hero-band {
    background: transparent;
}

/* ==== Sponsorships page: the layout of the live partners page (one appended, additive block) ====
   The page's blocks are the editor's (cms/blocks.py): the Sponsor intro, the Stats indicator, the Partner marquee, the
   Offer rows and the Inquiry card; every number and sentence is a field of those blocks. Nothing here is page-specific
   markup: the hook is the main area that has a Sponsor intro (`:has(> .sponsor-intro)`), so it needs no template class
   and no other brand or page is touched.
   1. The hero: the title across the top; then the stats (with its italic line) in the left column, vertically centred
      beside the right column, which holds "What You Get", the points and the button. The intro's own section is
      `display: contents`, so its title, heading, list and button are grid items of the main area, and the stats block
      (the next section) is placed beside them. Stacked on a phone: title, stats, then the points.
   2. Past Partners and What We Offer get a thin divider above them; each offer is the picture (40% of the row, no
      border) and the text, the picture on the left in every row, stacked (picture on top) on a phone.
   3. The inquiry card: its copy line, the text and button on the left, and on the right a faded map panel (the same
      MapFade-1920.webp, painted behind the card's empty picture; a picture chosen in the block shows instead). */
.cms-main:has(> .sponsor-intro) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 40px;
    max-width: var(--content-width);
    margin: 0 auto;
    padding-bottom: 8px;
    align-items: center;
}

.cms-main:has(> .sponsor-intro) > * {
    grid-column: 1 / -1;
    min-width: 0;
    margin-left: 0;  /* a grid item with auto side margins would shrink to its content instead of filling its column */
    margin-right: 0;
}

.sponsor-intro > * {
    min-width: 0;
}

.cms-main:has(> .sponsor-intro) > .sponsor-intro {
    display: contents;
}

.sponsor-intro .sponsor-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 20px 16px 8px;
}

.cms-main:has(> .sponsor-intro) > .pg-stats {
    grid-column: 1;
    grid-row: 2;
}

.sponsor-intro .box-heading {
    grid-column: 1;
    grid-row: 3;
    margin: 16px 16px 4px;
}

.sponsor-intro .points {
    grid-column: 1;
    grid-row: 4;
    max-width: none;
    margin: 8px 16px;
    font-size: 1rem;
}

.sponsor-intro .box-cta {
    grid-column: 1;
    grid-row: 5;
    margin: 12px 16px 16px;
}

@media (min-width: 48rem) {
    .cms-main:has(> .sponsor-intro) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .cms-main:has(> .sponsor-intro) > .pg-stats {
        grid-row: 2 / span 3;
    }

    .sponsor-intro .box-heading,
    .sponsor-intro .points,
    .sponsor-intro .box-cta {
        grid-column: 2;
    }

    .sponsor-intro .box-heading {
        grid-row: 2;
        align-self: end;
    }

    .sponsor-intro .points {
        grid-row: 3;
        align-self: center;
    }

    .sponsor-intro .box-cta {
        grid-row: 4;
        align-self: start;
    }
}

.cms-main:has(> .sponsor-intro) .pg-partners,
.cms-main:has(> .sponsor-intro) .pg-offers {
    margin: 24px 16px 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--line);
}

.cms-main:has(> .sponsor-intro) .pg-partners .box-heading,
.cms-main:has(> .sponsor-intro) .pg-offers > .box-heading {
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.pg-offers .offer-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
}

.pg-offers .offer-row:first-of-type {
    border-top: 0;
    padding-top: 8px;
}

/* the offer pictures take the stats card's outline and corners (components/page_components.css: 2px solid var(--card-border), 5px
   radius); the picture itself carries them and fills its box (no letterbox gap inside the border) */
.pg-offers .offer-media img,
.pg-offers .offer-media .img-placeholder {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 2px solid var(--card-border);
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);  /* the stats card's own shadow (components/page_components.css has no variable for it) */
}

.pg-offers .offer-text h3 {
    font-family: var(--font-mono);
    font-size: 1.375rem;
    margin: 0 0 12px;
}

.pg-offers .offer-quote {
    margin: 0 0 12px;
    font-style: italic;
    quotes: "\201C" "\201D";
}

.pg-offers .offer-quote::before {
    content: open-quote;
}

.pg-offers .offer-quote::after {
    content: close-quote;
}

.pg-offers .offer-text p {
    margin: 0 0 14px;
}

.pg-offers .offer-text .btn {
    margin-top: 4px;
}

@media (min-width: 48rem) {
    .pg-offers .offer-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 48px;
    }
}

/* the inquiry card: the copy line, the text and button on the left and the faded map on the right */
.pg-box.inquiry .inquiry-layout {
    align-items: stretch;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}

.pg-box.inquiry .inquiry-note {
    align-self: center;
    padding: 8px 16px;
}

.pg-box.inquiry .inquiry-note p {
    margin: 0 0 14px;
}

.pg-box.inquiry .inquiry-map {
    min-height: 15rem;
}

.pg-box.inquiry .inquiry-map img,
.pg-box.inquiry .inquiry-map .img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 15rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background-color: var(--white);
    background-image:
        linear-gradient(color-mix(in srgb, var(--white) 35%, transparent), color-mix(in srgb, var(--white) 35%, transparent)),
        url("../images/MapFade-1920.1222980b91dc.webp");
    background-position: center;
    background-size: cover;
}

.pg-box.inquiry .inquiry-map img {
    background: none;
}

@media (min-width: 48rem) {
    .pg-box.inquiry .inquiry-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}