/* ============================================================
   FIELD GUIDE BOOK PAGES  (/dna/book/, /email/)
   A Workshopr field guide's own page. Layout comes from the ws_*
   helpers; this file sets the bands, the cover beside the prose,
   the buy or waitlist card, and three lists: fg-pairs (a name
   beside one line, ruled like the back covers' tables), fg-steps
   (numbered parts) and fg-contents (a contents page).
   ============================================================ */

.fg {
    color: var(--text-dark);
    font-family: var(--font-body);
}

/* ------------------------------------------------------------
   BANDS
   ------------------------------------------------------------ */
.fg-band {
    padding-block: var(--space-16);
}
.fg-band--book {
    padding-top: var(--space-6);
    background: var(--brand-tint);
    border-bottom: 1px solid var(--brand-line);
}
.fg-band--surface {
    background: var(--bg-surface);
    border-block: 1px solid var(--card-border);
}

.fg__crumbs {
    margin-bottom: var(--space-10);
}

/* ------------------------------------------------------------
   HERO: cover beside the book's own framing
   ------------------------------------------------------------ */
.fg-hero {
    display: grid;
    gap: var(--space-10);
    align-items: start;
}
@media (min-width: 961px) {
    .fg-hero {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        gap: var(--space-16);
    }
}

.fg-cover {
    margin: 0;
}
/* A slight tilt so the cover reads as a book set down on the page. */
.fg-cover__art {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transform: rotate(-1.6deg);
    transform-origin: 50% 60%;
}
@media (prefers-reduced-motion: reduce) {
    .fg-cover__art {
        transform: none;
    }
}
.fg-cover__actions {
    margin-top: var(--space-8);
}
@media (max-width: 960px) {
    .fg-cover__art {
        max-width: 15rem;
    }
}

.fg-hero__label,
.fg-buy__label {
    display: block;
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-ink);
}
.fg-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-display);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-dark);
    margin: var(--space-3) 0 var(--space-4);
}
/* Two classes deep: .fg-hero__body p would otherwise repaint it. */
.fg-hero__body .fg-hero__sub {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-h4);
    line-height: var(--leading-snug);
    color: var(--brand-ink);
    margin: 0 0 var(--space-8);
}
.fg-hero__body p {
    max-width: 65ch;
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--text-default);
    margin: 0 0 var(--space-5);
}
.fg-hero__list-title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-semibold);
    color: var(--text-dark);
    margin: var(--space-8) 0 var(--space-3);
}

/* ------------------------------------------------------------
   PAIRS: a name beside one line, ruled like the back covers'
   tables
   ------------------------------------------------------------ */
.fg-pairs {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 65ch;
    border-top: 1px solid var(--brand-line);
}
.fg-pairs__row {
    display: grid;
    gap: var(--space-1) var(--space-6);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--brand-line);
}
@media (min-width: 641px) {
    .fg-pairs__row {
        grid-template-columns: 11rem minmax(0, 1fr);
        align-items: baseline;
    }
}
.fg-pairs__name {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: var(--font-semibold);
    font-size: var(--text-h4);
    color: var(--brand-ink);
}
.fg-pairs__line {
    color: var(--text-default);
    line-height: var(--leading-normal);
}

/* ------------------------------------------------------------
   BUY CARD
   ------------------------------------------------------------ */
.fg-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-top: var(--space-10);
    padding: var(--card-padding);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}
.fg-buy__body {
    flex: 1 1 22rem;
}
.fg-buy__line {
    margin: var(--space-2) 0 0;
    max-width: 52ch;
    color: var(--text-default);
    line-height: var(--leading-relaxed);
}
.fg-buy__form {
    margin: 0;
}
/* Inside the stack in the contents band the stack sets the gap. */
.ws-stack > .fg-buy {
    margin-top: 0;
}

/* ------------------------------------------------------------
   STEPS: numbered parts
   ------------------------------------------------------------ */
.fg-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-8) var(--space-10);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.fg-steps__item {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding-top: var(--space-4);
    border-top: 2px solid var(--brand-line);
}
.fg-steps__num {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--font-bold);
    line-height: 1;
    color: var(--brand-ink);
}
.fg-steps__what {
    margin: 0;
    color: var(--text-default);
    line-height: var(--leading-relaxed);
}

/* ------------------------------------------------------------
   CONTENTS: set the way a contents page is set
   ------------------------------------------------------------ */
.fg-contents {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--card-border);
}
.fg-contents__row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--card-border);
}
.fg-contents__folio {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-semibold);
    color: var(--brand-ink);
    font-variant-numeric: tabular-nums;
}
.fg-contents__body {
    display: grid;
    gap: var(--space-1);
}
.fg-contents__kicker {
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-default);
}
.fg-contents__title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-semibold);
    color: var(--text-dark);
}
.fg-contents__line {
    max-width: 70ch;
    color: var(--text-default);
    line-height: var(--leading-relaxed);
}

/* ------------------------------------------------------------
   WAITLIST CARD
   For a book not out yet: the same card as the buy card, with
   an email field in place of the button. js/taste-waitlist.js
   posts it and writes into the status line.
   ------------------------------------------------------------ */
.fg-waitlist__form {
    flex: 1 1 24rem;
    margin: 0;
}
.fg-waitlist__form .ws-field {
    margin-bottom: 0;
}
.fg .taste-waitlist__status {
    min-height: 1.5em;
    margin: var(--space-2) 0 0;
    font-size: var(--text-small);
    color: var(--text-default);
}
.fg .taste-waitlist__status--error {
    color: var(--brand-ink);
}

/* The book's closing line, set the way the back cover sets it. */
.fg-closing {
    margin: 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-h3);
    line-height: var(--leading-snug);
    color: var(--text-dark);
    text-align: center;
}
.fg-closing__turn {
    display: block;
    color: var(--brand-ink);
}