/* 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 {
    --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);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* 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);
    text-underline-offset: 4px;
}
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;
    text-underline-offset: 4px;
}
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 .ps-late { color: var(--pw-drop); }

.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;
    }
}