/* =========================
   FONT
   ========================= */

@font-face {
    font-family: 'stetsonregular';
    src: url('stetson-webfont.eot');
    src: url('stetson-webfont.eot?#iefix') format('embedded-opentype'),
         url('stetson-webfont.woff') format('woff'),
         url('stetson-webfont.ttf') format('truetype'),
         url('stetson-webfont.svg#stetsonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* =========================
   TEXT SELECTION
   ========================= */

::selection { background: #ffffff; }
::-moz-selection { background: #ffffff; }

/* =========================
   BASE / BODY
   ========================= */

body {
    margin: 0;
    background-color: #ff0000;
}

/* =========================
   MAIN TYPOGRAPHY BLOCK
   ========================= */

.fontbody {
    font-family: 'stetsonregular';
    color: #ffffff;
    text-align: left;

    /* Mobile-first poster scale */
    font-size: clamp(2.2rem, 6vw, 3rem);
    line-height: 1.25;

    padding: 1rem;
    max-width: 40rem;
    margin: 0 auto;
}

/* =========================
   LINKS
   ========================= */

a {
    color: #ffffff;
    text-decoration: none;
}

a:hover,
a:active {
    color: #ffffff;
    background: #ffffff;
}

/* =========================
   IMAGES – BASELINE
   ========================= */

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

/* =========================
   MOBILE IMAGE SPACING
   ========================= */

@media (max-width: 768px) {
    img {
        max-width: calc(100% - 2rem);
        margin: 1rem;
    }
}

/* =========================
   LOGO: NEVER UPSCALE
   Assumes logo is first image inside .fontbody
   ========================= */

.fontbody img:first-of-type {
    width: auto;
    max-width: min(100%, 500px); /* adjust if your logo isn't 500px wide */
    margin: 0;
}

/* =========================
   DESKTOP TUNING (general pages)
   ========================= */

@media (min-width: 769px) {

    .fontbody {
        font-size: clamp(4.25rem, 3.4vw, 6.75rem);
        line-height: 1.15;

        max-width: 72rem;
        padding: 2.5rem;
        margin: 0 auto;
    }

    /* Default: align content images to the text column.
       NOTE: specific pages (POD grid, PLACE story) override this below. */
    img {
        max-width: 72rem;
        width: 100%;
        margin: 0 auto 2rem auto;
    }

    /* Re-assert logo never becomes 100% width */
    .fontbody img:first-of-type {
        width: auto;
        max-width: 500px;
        margin: 0;
    }

    /* =========================
       PAPDIYPOD: 3-column grid on desktop
       Target: the plain <div> directly after the first .fontbody
       ========================= */

    .fontbody + div {
        max-width: 72rem;
        margin: 0 auto;
        padding: 0 2.5rem 2.5rem 2.5rem;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .fontbody + div a {
        display: block;
    }

    .fontbody + div img {
        width: 100%;
        margin: 0;
        max-width: none;
    }
}

/* =========================
   PLACE (story stack) – CSS-only scoping
   We scope this to pages that contain YouTube embeds.
   This prevents collisions with PAPDIYPOD.
   ========================= */

/* Constrain the content block (the div after the first .fontbody) */
body:has(iframe[src*="youtube"]) .fontbody + div {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 2.5rem 2.5rem 2.5rem;

    /* Force single-column stack, even on desktop */
    display: block;
}

/* Stack items */
body:has(iframe[src*="youtube"]) .fontbody + div a,
body:has(iframe[src*="youtube"]) .fontbody + div img,
body:has(iframe[src*="youtube"]) .fontbody + div iframe {
    display: block;
}

/* Images: do NOT upscale; shrink only if necessary to fit viewport */
body:has(iframe[src*="youtube"]) .fontbody + div img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 0 1rem 0; /* 1rem spacing between items */
}

/* Videos: keep authored size when possible; shrink only if needed */
body:has(iframe[src*="youtube"]) .fontbody + div iframe {
    width: 640px;          /* your HTML uses 640x360 */
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0 0 1rem 0;
    border: 0;
}

/* PLACE page: narrative text sizing */
body:has(iframe[src*="youtube"]) .fontbody + div {
  font-family: 'stetsonregular';
  color: #ffffff;

  /* Make the text feel intentional, not browser-default */
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  line-height: 1.3;
}