/* promowall.css — the Promos listing.
 *
 * One promo per ROW, two cells wide: a cream note card and a portrait.
 * The two swap sides every row, so the wall reads as a run of spreads
 * rather than a list with a picture column down one edge.
 *
 * The cream is the only place on the site that isn't dark, which is the
 * point: a promo is a written thing, so it sits on paper. --bg behind it
 * is the site's own #09090b, so the wall drops straight into the shell.
 *
 * NOTE ON LINK COLOURS: design2.css sets link colour with
 *   a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark)
 * which scores 0,4,1. Every link rule below repeats that same four-:not()
 * chain with a class in front so it scores 0,5,1 and wins. Dropping the
 * chain, or reordering the file, turns all of this accent red.
 */

.promo-wall,
.promo-sheet,
.show-sheet {
    --pw-card: #e7dcc6;      /* the paper */
    --pw-ink: #17140f;       /* headline */
    --pw-body: #56483c;      /* excerpt */
    --pw-meta: #8a7458;      /* eyebrow, Continue Reading */
    --pw-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --pw-text-serif: "Lora", Georgia, "Times New Roman", serif;
    --pw-gap: 8px;           /* between the note and the portrait */
    --pw-pad: clamp(1.25rem, 2.6vw, 2.6rem);

    /* Sheet-only. Long-form body ink is darker than a card excerpt's --
       a 40-word teaser can be soft, six paragraphs cannot. */
    --pw-read: #241c17;
    --pw-drop: #c45c3e;      /* the drop cap */
    --pw-rule: #c8beab;      /* hairlines and reaction chips */
    --pw-label: #6a5d4c;     /* the small condensed caps labels */
    --pw-quiet: #7d7161;     /* the tagline under the name */
}

.promo-wall {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 1.75rem;
}

.promo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pw-gap);
    /* Drives the row height. Both cells stretch to fill it, and a long
       excerpt pushes past it rather than being cut off. */
    min-height: clamp(320px, 50vw, 680px);
}

/* ---- The note ---- */

.promo-note {
    background: var(--pw-card);
    color: var(--pw-body);
    padding: var(--pw-pad);
    display: flex;
    flex-direction: column;
}

.promo-eyebrow {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pw-meta);
    line-height: 1.5;
}

.promo-eyebrow .promo-sep { opacity: 0.55; margin: 0 0.15em; }

.promo-eyebrow a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: inherit; }
.promo-eyebrow a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--pw-ink); }

.promo-headline {
    font-family: var(--pw-serif);
    font-weight: 700;
    font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.45rem);
    line-height: 1.14;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pw-ink);
    margin: 0.85rem 0 0;
}

a.promo-headline-link:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--pw-ink); }
a.promo-headline-link:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover {
    color: var(--accent);
}

/* line-clamp rather than a fixed excerpt length: the note card is a
   different width at every breakpoint, so a character count that fills a
   narrow card leaves a wide one two-thirds empty. Clamping by LINE fills
   whatever width the card happens to have. promos.php still cuts the text
   at 700 characters first, so the clamp is only ever hiding a little. */
.promo-excerpt {
    font-family: var(--pw-text-serif);
    font-size: clamp(0.88rem, 0.83rem + 0.22vw, 1rem);
    line-height: 1.72;
    color: var(--pw-body);
    margin: 1.1rem 0 0;
    max-width: 58ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    line-clamp: 9;
    overflow: hidden;
}

/* margin-top:auto pins this to the bottom of the card however short the
   excerpt is, which is what puts Continue Reading in the corner. */
.promo-foot {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

a.promo-more:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) {
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pw-meta);
}
a.promo-more:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--pw-ink); }

/* ---- The portrait ---- */

.promo-shot {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    min-height: 200px;
}

/* Absolute rather than in flow, so the art never sets the row height --
   the note and the portrait always finish level with each other. */
.promo-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;   /* faces sit high in a tall crop */
}

/* Scrim so the name reads over pale or busy art, not only over the dark
   portraits it was drawn against. */
.promo-shot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(to top, rgba(9, 9, 11, 0.85), rgba(9, 9, 11, 0));
    pointer-events: none;
}

a.promo-who:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) {
    position: absolute;
    left: var(--pw-pad);
    bottom: calc(var(--pw-pad) * 0.72);
    z-index: 1;
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f2ece1;
}
a.promo-who:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: #fff; }

/* ---- The swap ---- */

.promo-row.is-flipped .promo-note { order: 2; }
.promo-row.is-flipped .promo-shot { order: 1; }

/* ---- Narrow ---- */

@media (max-width: 720px) {
    .promo-row {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    /* Every row stacks portrait-then-note. Alternating has nothing to
       alternate across in one column, and letting it flip would just make
       some promos start with a picture and others with a headline. */
    .promo-row .promo-shot,
    .promo-row.is-flipped .promo-shot { order: 1; height: clamp(240px, 62vw, 380px); }
    .promo-row .promo-note,
    .promo-row.is-flipped .promo-note { order: 2; }

    .promo-foot { margin-top: 1.5rem; }
    .promo-excerpt { max-width: none; -webkit-line-clamp: 7; line-clamp: 7; }
}


/* ==================================================================
   THE SHEET — promo.php
   ==================================================================
   Same paper as the listing cards, opened out to read on. Everything
   from the eyebrow down to the reactions sits on it; only the back
   link stays out on the dark page.

   The four-:not() note at the top of this file applies here too.
   ================================================================== */

/* Capped and centred rather than filling the 80rem wrap. A promo runs to a
   thousand words, and at full wrap width the lines below the figure reach
   about 110 characters, which is past the point where the eye loses its
   place returning to the left margin. This lands them near 90. */
.promo-sheet {
    background: var(--pw-card);
    color: var(--pw-read);
    padding: clamp(1.5rem, 4vw, 3rem);
    margin: 1.75rem auto 0;
    max-width: 54rem;
}

/* ---- Head ---- */

.ps-eyebrow {
    margin: 0;
    font-family: var(--display);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pw-label);
    line-height: 1.4;
}
.ps-eyebrow .ps-sep { opacity: 0.5; margin: 0 0.2em; }

.ps-eyebrow a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: inherit; }
.ps-eyebrow a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--pw-ink); }

.ps-who {
    font-family: var(--display);
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pw-ink);
    margin: 0.3rem 0 0;
}
a.ps-who-link:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--pw-ink); }
a.ps-who-link:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--pw-drop); }

.ps-tagline {
    font-family: var(--pw-text-serif);
    font-style: italic;
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.08rem);
    color: var(--pw-quiet);
    margin: 0.5rem 0 0;
}

.ps-title {
    font-family: var(--pw-serif);
    font-weight: 700;
    font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem);
    line-height: 1.18;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pw-ink);
    margin: clamp(1.4rem, 3vw, 2.4rem) 0 0;
}

.ps-rule {
    border: 0;
    border-top: 1px solid var(--pw-rule);
    margin: clamp(1.6rem, 3.5vw, 2.6rem) 0;
}

/* ---- Body ---- */

/* ::after clears the figure, so a short promo cannot let the cut-out
   hang past the bottom of the sheet and out onto the dark page. */
.ps-body::after { content: ""; display: block; clear: both; }

/* No frame and no radius, unlike the old full-body shot: this slot is a
   cut-out with no background of its own, so it reads as a figure standing
   in the text rather than a photo pasted into it. */
.ps-figure {
    float: left;
    width: 38%;
    max-width: 20rem;
    height: auto;
    margin: 0 clamp(1.2rem, 2.5vw, 2rem) 1rem 0;
    display: block;
}

.ps-prose {
    font-family: var(--pw-text-serif);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
    line-height: 1.85;
    color: var(--pw-read);
}
.ps-prose p { line-height: inherit; }

/* :first-child, not :first-of-type. If a promo opens with a heading or a
   list, there is no opening paragraph to cap and the effect should simply
   not happen -- capping the third paragraph instead would look like a bug. */
.ps-prose .rich-body > p:first-child::first-letter {
    float: left;
    font-family: var(--display);
    font-weight: 400;
    /* Sized so the float box stays UNDER one line: 2.4em x 0.68 is about
       0.82 of the 1.85 line-height, and any top margin counts toward that
       total -- which is why there is none. The mock-up's initial clears a
       single line and the second line returns to the left margin, so this
       is a raised cap rather than a two-line drop. Grow the size, the
       line-height, or the top margin and it silently becomes a two-line
       drop the moment the box outgrows the line. */
    font-size: 2.4em;
    line-height: 0.68;
    color: var(--pw-drop);
    margin: 0 0.1em 0 0;
}

/* ---- Foot ---- */

.ps-label {
    font-family: var(--display);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pw-label);
    margin: 0 0 0.75rem;
}

.promo-sheet .reaction-row { margin: 0; }

.promo-sheet .reaction-btn {
    background: transparent;
    border: 1px solid var(--pw-rule);
    border-radius: 2px;
    padding: 0.45rem 0.85rem;
    color: var(--pw-read);
}
.promo-sheet .reaction-btn:hover { border-color: var(--pw-drop); }
.promo-sheet .reaction-btn.active {
    background: var(--pw-drop);
    border-color: var(--pw-drop);
    color: #fff;
}

.ps-vote { margin: 1.5rem 0 0; }
.ps-vote p {
    font-family: var(--pw-text-serif);
    font-size: 0.92rem;
    color: var(--pw-quiet);
    margin: 0;
}
.promo-sheet .btn.outline {
    border-color: var(--pw-rule);
    color: var(--pw-read);
    height: 2.6rem;
}
.promo-sheet .btn.outline:hover { border-color: var(--pw-drop); color: var(--pw-ink); }

.ps-vote a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--pw-drop); }

.ps-back { margin-top: 1.25rem; }

@media (max-width: 720px) {
    /* Capped by HEIGHT, not width. A full-body cut-out is roughly one part
       wide to two and a half tall, so a width cap of any useful size puts
       600px of figure between the headline and the first word of the promo
       -- a screen and a half of scrolling before you reach what you came
       to read. */
    .ps-figure {
        float: none;
        width: auto;
        max-width: 100%;
        max-height: 22rem;
        margin: 0 auto 1.25rem;
    }
}


/* ==================================================================
   THE CARD ON PAPER — show.php
   ==================================================================
   Same paper and the same serif as a promo, on the one container that
   holds the card. Scoped entirely to .show-sheet, so nothing outside it
   moves and the whole treatment comes off by removing the class.

   design2.css styles these components for a dark page, so most of what
   follows is undoing a colour rather than inventing one.
   ================================================================== */

.show-sheet {
    background: var(--pw-card);
    color: var(--pw-read);
    border: 0;
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* Each bout and segment is a leaf of the same paper, not a dark panel. */
.show-sheet .card-bout {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--pw-rule);
    border-radius: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    margin-bottom: 0;
}
.show-sheet .card-bout:first-of-type { border-top: 0; padding-top: 0; }

/* Small caps labels. */
.show-sheet .card-bout .order,
.show-sheet .eyebrow,
.show-sheet .stat-label { color: var(--pw-label); }

/* The bout or segment name, in the headline serif rather than the display
   face. An inline style sets the segment title's font-family, so that one
   needs !important to be reached at all -- there is no selector that
   outranks a style attribute. */
.show-sheet .card-bout .type {
    font-family: var(--pw-serif) !important;
    font-weight: 700;
    font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: 0 !important;
    text-transform: none;
    color: var(--pw-ink) !important;
    margin-top: 0.35rem;
}

/* The words themselves: the reading face, at reading size. */
.show-sheet .beat-content {
    font-family: var(--pw-text-serif);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
    line-height: 1.8;
    color: var(--pw-read);
    /* Long-form prose needs a measure. The card is wider than a column of
       text should be. */
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
}
.show-sheet .beat-content p { color: var(--pw-read); }

.show-sheet .beat,
.show-sheet .beat-stream { border-color: var(--pw-rule); }

/* No stage on this page carries a backdrop any more -- matches and segments
   alike are cut-outs on the paper -- so the panel that used to hold one is
   gone entirely. */

/* The figures simply sit on the paper.
   Three things have to go for that to work, all of them there to hold a
   photograph that is no longer present:
     - the panel itself, so there is no edge around nothing
     - ::after, a dark gradient across the foot to keep names readable over
       a lit backdrop, which on cream is just a grey smudge
     - the heavy black glow on the names, same reason
   The names then need dark ink, since they were white for the photo. */
.show-sheet .bout-stage.no-bg,
.bout-stage.no-bg {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.show-sheet .bout-stage.no-bg::after,
.bout-stage.no-bg::after { display: none; }

/* The name comes OUT from over the figure and sits under it.
   It was absolutely positioned at the foot of the stage so it would read
   across a photograph. With no photograph it just lands on the figure's
   chest, and without the black glow holding it off there is nothing
   separating the two. Static, and the figure gives up the height. */
.show-sheet .bout-stage.no-bg .bout-name {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 0.5rem;
}
.show-sheet .bout-stage.no-bg .bout-side {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
/* The stage grows with its contents instead of being a fixed 24rem box.
   With a fixed height the row wraps on a narrow screen -- three or more
   figures do not fit across a phone -- and the second row has nowhere to
   go, so it spills straight over the paragraphs underneath. Everything
   inside it drops its 100% heights for the same reason: a percentage of
   an auto height resolves to nothing. */
.show-sheet .bout-stage.no-bg { height: auto; }
.show-sheet .bout-stage.no-bg .bout-side,
.show-sheet .bout-stage.no-bg .bout-side-col { height: auto; }
/* Room between wrapped rows, and between the figures and the prose below. */
.show-sheet .bout-stage.no-bg .bout-stage-inner { row-gap: 1.75rem; }
.show-sheet .bout-stage.no-bg { margin-bottom: 1.25rem; }

/* A FIXED height, so every figure stands the same size whatever the file
   behind it is. max-height only caps the tall ones and leaves anything
   smaller at its own size, which is why a card export sat shorter than the
   silhouette next to it. Height decides, width follows from the art's own
   proportions.

   width:auto, not the inherited 100%. With width:100% the IMG BOX is as
   wide as the column whatever shape the picture is, and object-fit:contain
   letterboxes the art inside it -- dead space that is invisible but still
   pushes the next figure away. Sizing the box to the art means the column
   hugs the figure. */
.show-sheet .bout-stage.no-bg .bout-figure {
    /* In rem, not a percentage. The stage has no fixed height to be a
       percentage OF any more, and this scales down on a phone so three
       across still fits before it has to wrap. */
    width: auto; height: clamp(9rem, 22vw, 20rem);
    max-width: 100%; max-height: none;
}

/* Two figures were ending up at opposite ends of the card.
   Each column is flex: 1 1 0, so it takes an equal SHARE of the full width
   -- with two of them that is half the card each, and each figure centres
   inside its own half. Capping the column closes the gap without touching
   how the figure is sized, and it only bites when there are few enough
   columns to be over the cap, so three or more are left as they are. */
/* flex: 0 1 auto, so a column is as wide as its figure rather than taking
   an equal share of the card. The max-width is a backstop for a very wide
   cut-out, not the normal case. */
/* The cap is a backstop for an unusually wide cut-out, not the normal case.
   Wide enough that height stays the thing deciding the size. */
.show-sheet .bout-stage.no-bg .bout-side-col { flex: 0 1 auto; max-width: 22rem; }

/* width: fit-content, so the row is exactly as wide as the figures and the
   VS, then centred. The base rule sets width:100%, which makes the row span
   the card however narrow its contents are -- and any slack inside it ends
   up between the competitors. This removes the slack entirely: whatever
   space is left is outside the group, not in the middle of it. */
.show-sheet .bout-stage.no-bg .bout-stage-inner {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 0.5rem;
}
.show-sheet .bout-stage.no-bg .vs { padding: 0; }

/* VS was white with a heavy black glow so it could be read across a lit
   photograph. On paper that is a white word with a shadow round it. Dark
   ink, no glow, and centred against the FIGURES rather than the whole
   column -- the names sit under the figures now, so centring on the column
   would drop the VS below the feet. */
.show-sheet .bout-stage.no-bg .vs {
    color: var(--pw-ink);
    text-shadow: none;
    align-self: center;
    margin-bottom: 2.5rem;
}

.show-sheet .bout-stage.no-bg .bout-name-text {
    color: var(--pw-ink);
    text-shadow: none;
    font-size: 1.1rem;
}
.show-sheet .bout-stage.no-bg a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--pw-ink); }
.show-sheet .bout-stage.no-bg a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--pw-drop); }

.show-sheet .theme-play-btn {
    background: transparent;
    border-color: var(--pw-rule);
    color: var(--pw-body);
}
.show-sheet .theme-play-btn:hover { border-color: var(--pw-drop); color: var(--pw-ink); }

.show-sheet table { color: var(--pw-read); }
.show-sheet th { color: var(--pw-label); }
.show-sheet td, .show-sheet th { border-color: var(--pw-rule); }

/* Links on paper. The four-:not() chain again, or the site-wide rule wins
   and every name on the card stays accent red. */
.show-sheet a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--pw-ink); }
.show-sheet a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark):hover { color: var(--pw-drop); }
/* Names written over the stage are on the dark floor, not the paper. */
.show-sheet .bout-stage a:not(.btn):not(.nav-link):not(.apply-link):not(.wordmark) { color: var(--pw-card); }

.show-sheet .btn.outline {
    border-color: var(--pw-rule);
    color: var(--pw-read);
}
.show-sheet .btn.outline:hover { border-color: var(--pw-drop); color: var(--pw-ink); }