@import '/design-system/platform-tokens.css';

/* ============================================================
   /taste/ microsite
   ------------------------------------------------------------
   One stylesheet for every page of the Salt to Taste library
   (hub, prompts, interview, research, reading). Everything here
   is scoped under .taste so the platform sheets stay untouched.

   Surface mode is Read: a contents page for a body of work, not
   a sales page. Red is the accent, never the field.
   ============================================================ */

.taste {
    --taste-measure: 68ch;
    --taste-gutter: clamp(20px, 5vw, 48px);
    --taste-rule: var(--gray-200);
    --taste-folio: var(--color-ink-faint-accessible);

    color: var(--color-ink);
    font-family: var(--font-body);
}

.taste__inner {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: var(--taste-gutter);
    padding-right: var(--taste-gutter);
}

/* ------------------------------------------------------------
   HERO
   ws_hero carries the platform's Display Text Pattern and its
   own entrance cascade. A library index does not earn 90vh, so
   the geometry is pulled back to document proportions here.
   ------------------------------------------------------------ */
.taste-hero.hero {
    min-height: 0;
    padding: var(--space-16) 0 var(--space-12);
    background: transparent;
    display: block;
}
.taste-hero .hero-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: var(--taste-gutter);
    padding-right: var(--taste-gutter);
}
.taste-hero .hero-title {
    max-width: 14ch;
}
.taste-hero .hero-subtitle {
    max-width: var(--taste-measure);
    font-size: var(--text-h4);
    color: var(--color-ink-secondary);
}
.taste-hero .hero-actions {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   BAND
   The page's structural unit. Alternating surface fills give
   the scroll a rhythm without a second accent colour.
   ------------------------------------------------------------ */
.taste-band {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}
.taste-band--surface {
    background: var(--bg-surface);
    border-top: 1px solid var(--taste-rule);
    border-bottom: 1px solid var(--taste-rule);
}
.taste-band--book {
    background: var(--phase-learn-very-light);
    border-top: 1px solid var(--phase-learn-light);
    border-bottom: 1px solid var(--phase-learn-light);
}
/* Opens hard against whatever it follows. A tinted band already carries 64px of
   its own padding inside the fill, so a second 64px on this side of the rule
   only reads as a gap. */
.taste-band--flush {
    padding-top: 0;
}
.taste-band .ws-section-header {
    margin-bottom: var(--space-10);
}
.taste-band .ws-section-header__desc {
    max-width: var(--taste-measure);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}

/* ------------------------------------------------------------
   SECTION HEADER SUBTITLE
   The shared ws_section_header component nests its subtitle inside
   the <h2>, which gives the heading an accessible name like "Title
   Subtitle." Both pages of this site render the subtitle as its own
   paragraph instead, via a local closure, so the <h2> announces just
   its title. These rules restore the spacing the component would
   otherwise have produced.

   The colour is not the component's. Inside the <h2> the subtitle
   inherited 24px bold, where --mainsite-primary clears the 3:1 large
   text bar at 3.82:1. Set loose as a paragraph it is normal-size text
   and needs 4.5:1, which --color-primary-on-white gives.
   ------------------------------------------------------------ */
.taste .ws-section-header__title:has(+ .ws-section-header__subtitle) {
    margin-bottom: 0;
}
.taste .ws-section-header__subtitle {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-primary-on-white);
}
/* Same problem, one line up: the component sets its label in
   --mainsite-primary at 12px, which is 3.82:1 and never gets the large-text
   allowance. Local override rather than a component change, because that one
   is platform-wide and wants its own pass. */
.taste .ws-section-header__label {
    color: var(--color-primary-on-white);
}

/* ------------------------------------------------------------
   TABS
   The reading page splits by origin, written here or written by
   someone else, over one shared lead. The rule under the tab
   strip is the page's own 1px rule rather than the component's,
   so the strip reads as part of the document.
   ------------------------------------------------------------ */
.taste-tabs.ws-tabs {
    margin-bottom: var(--space-10);
    border-bottom: 1px solid var(--taste-rule);
}
/* The pane is focusable so a keyboard user landing from the tab strip has
   somewhere to arrive; it needs the platform ring like anything else. */
.taste-pane:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}
/* The line under the tabs, before the list starts. Same measure and colour as
   a section description, because that is the job it took over. */
.taste-pane__note {
    max-width: var(--taste-measure);
    margin: 0 0 var(--space-8);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}

/* ------------------------------------------------------------
   SHELF
   A card list of unequal entries: the lead one carries a list
   inside it and runs full width, which is what stops the set
   reading as a grid of identical cards. The hub no longer uses
   it; the resources page is the remaining consumer.
   ------------------------------------------------------------ */
.taste-shelf {
    display: grid;
    gap: var(--space-6);
}
@media (min-width: 961px) {
    .taste-shelf {
        grid-template-columns: repeat(3, 1fr);
    }
    .taste-entry--lead {
        grid-column: 1 / -1;
    }
}

.taste-entry.ws-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8);
    text-decoration: none;
    color: inherit;
}

/* The three short entries sit side by side, so their read-on links have to
   share a baseline whatever the lede length. */
.taste-entry .taste-entry__go {
    margin-top: auto;
    padding-top: var(--space-5);
}
.taste-entry--lead .taste-entry__go {
    margin-top: 0;
}
.taste-entry.ws-card.ws-card--hoverable:hover {
    border-color: var(--phase-learn-light);
}
.taste-entry__folio {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: var(--font-semibold);
    letter-spacing: 0.12em;
    color: var(--taste-folio);
    margin-bottom: var(--space-3);
}
.taste-entry__title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    margin: 0 0 var(--space-3);
}
.taste-entry--lead .taste-entry__title {
    font-size: var(--text-h1);
}
.taste-entry__lede {
    max-width: var(--taste-measure);
    margin: 0;
    font-size: var(--text-ui);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}
.taste-entry__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: var(--font-semibold);
    color: var(--color-primary-on-white);
}
.taste-entry__go .icon,
.taste-entry__go .material-symbols-outlined {
    width: var(--icon-md);
    height: var(--icon-md);
    font-size: var(--icon-md);
    transition: transform var(--duration-fast) var(--ease-out);
}
.taste-entry.ws-card:hover .taste-entry__go .icon,
.taste-entry.ws-card:hover .taste-entry__go .material-symbols-outlined {
    transform: translateX(3px);
}
.taste-entry__actions {
    margin-top: var(--space-6);
}

/* ------------------------------------------------------------
   LOOP
   The seven prompts, read straight off the same markdown files
   the printed appendix is built from. A ruled list, because a
   list of seven ordered things is a list, not a card grid.
   ------------------------------------------------------------ */
.taste-loop {
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--taste-rule);
}
.taste-loop__item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--taste-rule);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.taste-loop__item:hover {
    background: var(--phase-learn-very-light);
}
.taste-loop__id {
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: var(--color-primary-on-white);
}
.taste-loop__name {
    font-size: var(--text-ui);
    font-weight: var(--font-semibold);
    color: var(--color-ink);
}
.taste-loop__when {
    font-size: var(--text-small);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
}
.taste-loop__move {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink-faint-accessible);
}
/* The interview has no prompt number, so its row is marked by its place in the
   sequence instead. A word set at P0's size would crowd the column. */
.taste-loop__id--word {
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
/* The hover fill is --phase-learn-very-light, on which --color-ink-muted and
   --color-ink-faint-accessible both read 4.386:1 and miss AA. A row does not
   get to fail contrast for as long as the pointer is on it. */
.taste-loop__item:hover .taste-loop__when,
.taste-loop__item:hover .taste-loop__move {
    color: var(--color-ink-secondary);
}

@media (max-width: 768px) {
    .taste-loop__item {
        grid-template-columns: 3rem minmax(0, 1fr);
    }
    .taste-loop__when {
        grid-column: 2;
    }
}

/* ------------------------------------------------------------
   BOOK
   The one loud block on a quiet page: the cover in the narrow
   column, the book's own framing in the wide one. It gets a
   tinted field; it does not get a price, a countdown, or a
   second primary action.

   Everything set on the tint has to clear 4.5:1 against
   --phase-learn-very-light, which rules out --color-ink-muted
   and --color-ink-faint-accessible (both 4.386:1 there).
   --color-ink-secondary is 7.0:1 and --color-primary-on-white
   is 4.59:1, so the type here is limited to those two.
   ------------------------------------------------------------ */
.taste-book {
    display: grid;
    gap: var(--space-10);
    align-items: start;
}
@media (min-width: 961px) {
    .taste-book {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        gap: var(--space-16);
    }
}
.taste-book__label {
    display: block;
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-primary-on-white);
}
.taste-book__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(--color-ink);
    margin: var(--space-3) 0 var(--space-4);
}
/* Two classes deep on purpose: .taste-book__body p below outranks a single
   class and would otherwise repaint the subtitle as running body copy. */
.taste-book__body .taste-book__sub {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-h4);
    line-height: var(--leading-snug);
    color: var(--color-primary-on-white);
    margin: 0 0 var(--space-8);
}
.taste-book__body p {
    max-width: var(--taste-measure);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
    margin: 0 0 var(--space-5);
}
.taste-book__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ------------------------------------------------------------
   COVER
   The art lives at /academy/taste/cover.png, with the other
   Academy book assets. The stub below holds the space if that
   file is ever missing, set as a cover so an empty slot never
   reads as a broken image.

   The art carries no fixed proportions: the finished cover may
   not share the stub's trim, and forcing it would crop or
   letterbox. The stub does, because a shape with no proportions
   is not a book cover.
   ------------------------------------------------------------ */
.taste-cover {
    margin: 0;
}
/* Stacked above the prose, a full-bleed cover is taller than the viewport. */
@media (max-width: 960px) {
    .taste-cover {
        max-width: 15rem;
    }
}
/* A slight tilt, so the cover reads as a physical object set down on the page
   rather than a flat asset pasted into it. Kept under two degrees: past that it
   stops looking placed and starts looking crooked. The shadow is offset along
   the same axis so the light stays consistent with the rotation. */
.taste-cover__art,
.taste-cover__stub {
    transform: rotate(-1.6deg);
    transform-origin: 50% 60%;
}
@media (prefers-reduced-motion: reduce) {
    .taste-cover__art,
    .taste-cover__stub {
        transform: none;
    }
}

.taste-cover__art {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

/* Sits under the tilted cover and stays level, so the tilt reads as the cover's
   and not the column's. */
.taste-cover__soon {
    margin: var(--space-12) 0 0;
    font-size: var(--text-meta);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
    /* On the band's --phase-learn-very-light fill this is 7.01:1;
       --color-ink-faint-accessible would be 4.386:1 and fail AA. */
    color: var(--color-ink-secondary);
}
.taste-cover__stub {
    display: flex;
    flex-direction: column;
    /* The trim the proof is set to. */
    aspect-ratio: 595 / 842;
    padding: var(--space-8);
    border-radius: var(--radius-sm);
    /* --phase-learn-dark, not --phase-learn: white on the lighter red is
       3.82:1 and misses AA for anything but display type. */
    background: var(--phase-learn-dark);
    box-shadow: var(--shadow-lg);
    color: var(--text-inverse);
}
.taste-cover__mark {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: var(--font-bold);
    font-size: var(--text-meta);
    color: var(--text-inverse);
}
.taste-cover__title {
    margin-top: auto;
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}
.taste-cover__rule {
    width: var(--space-10);
    height: 2px;
    margin: var(--space-5) 0;
    background: var(--phase-learn-light);
}
.taste-cover__sub {
    /* 4.59:1 on --phase-learn-dark. */
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--phase-learn-very-light);
}
.taste-cover__caption {
    margin-top: var(--space-4);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    /* Not --color-ink-muted: this caption sits on the tinted band. */
    color: var(--color-ink-secondary);
}

/* ------------------------------------------------------------
   BUY
   The one buy CTA, at the foot of the book band so it follows
   the argument rather than interrupting it. A white card on the
   tint: the surface change is what makes it read as an action
   instead of another paragraph, so it needs no second accent.
   Renders only when $taste_amazon_url is set.
   ------------------------------------------------------------ */
.taste-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-top: var(--space-12);
    padding: var(--space-6) var(--space-8);
    background: var(--bg-surface);
    border: 1px solid var(--phase-learn-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.taste-buy__body {
    min-width: 0;
    flex: 1 1 22rem;
}
.taste-buy__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-primary-on-white);
}
.taste-buy__line {
    max-width: var(--taste-measure);
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}
/* Full width only once the button is alone on its row, so it never stretches
   edge to edge on a desktop card. */
@media (max-width: 700px) {
    .taste-buy .ws-btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------
   MOVES
   The four the book teaches, in the order it teaches them. A
   ruled list rather than a row of pills: the pill component
   sets --phase-learn on --phase-learn-light, which is 3.1:1
   and fails AA at this size.
   ------------------------------------------------------------ */
.taste-moves {
    max-width: var(--taste-measure);
    margin: 0 0 var(--space-8);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--phase-learn-light);
}
.taste-move {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-3-5) 0;
    border-bottom: 1px solid var(--phase-learn-light);
}
.taste-move__name {
    font-family: var(--font-heading);
    font-size: var(--text-ui);
    font-weight: var(--font-bold);
    letter-spacing: 0.04em;
    color: var(--color-primary-on-white);
}
.taste-move__line {
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}

/* ------------------------------------------------------------
   CONTENTS
   Twelve entries set the way a contents page is set: a folio,
   the heading as the book prints it, and one line saying what
   it does. Front matter takes roman folios and the appendix
   takes a letter, which is how the book itself is numbered.
   ------------------------------------------------------------ */
.taste-contents {
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--taste-rule);
}
.taste-contents__row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--taste-rule);
}
.taste-contents__folio {
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--color-primary-on-white);
}
.taste-contents__body {
    display: block;
    min-width: 0;
}
.taste-contents__kicker {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink-faint-accessible);
}
.taste-contents__title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
}
.taste-contents__line {
    display: block;
    max-width: var(--taste-measure);
    margin-top: var(--space-2);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}

@media (max-width: 768px) {
    .taste-contents__row {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: var(--space-3);
    }
    .taste-move {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: var(--space-3);
    }
}

/* ------------------------------------------------------------
   COLOPHON
   ------------------------------------------------------------ */
.taste-colophon {
    padding-top: var(--space-12);
    padding-bottom: var(--space-16);
}
.taste-colophon__body {
    max-width: var(--taste-measure);
    border-top: 1px solid var(--taste-rule);
    padding-top: var(--space-5);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
}

/* ============================================================
   PROMPTS PAGE
   ------------------------------------------------------------
   Twelve blocks, each anchored on an id the printed book links
   to. The reader arrives mid-page from a deep link, so every
   block has to introduce itself: what it is, when to run it,
   what to attach, and the text itself, in that order.
   ============================================================ */

.taste--prompts {
    /* No platform mono token exists; this is the same stack the
       component sheet uses, so a future --font-mono picks it up. */
    --taste-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.taste-stack {
    display: grid;
    gap: var(--space-8);
}

/* ------------------------------------------------------------
   BLOCK
   ------------------------------------------------------------ */
.taste-prompt.ws-card {
    padding: var(--space-8);
    /* The book prints these anchors, so a deep link must not land
       under the sticky header. */
    scroll-margin-top: var(--space-16);
}

/* Deep-linked block, marked once so a reader arriving from print can see
   which of twelve they were sent to. */
.taste-prompt.ws-card:target {
    border-color: var(--phase-learn-light);
    background: var(--phase-learn-very-light);
}

/* The term/permalink labels sit at --color-ink-faint-accessible /
   --color-ink-muted normally (4.8:1 on white), but that pair drops to
   4.386:1 on the :target tint above and misses AA. Darken one step to
   --color-ink-secondary, which clears 4.5:1 on --phase-learn-very-light. */
.taste-prompt.ws-card:target .taste-prompt__term,
.taste-prompt.ws-card:target .taste-prompt__permalink {
    color: var(--color-ink-secondary);
}

/* ------------------------------------------------------------
   DISCLOSURE
   Twelve prompts in full is a very long page to scroll past, so
   each one opens on demand. Native <details>, because the book
   prints these anchors: find-in-page inside a closed drawer,
   keyboard operation, and an open state a fragment can force are
   all things the element already has and a JS accordion would
   have to rebuild.

   The copy button is not in here. It is a sibling of the
   <details>, because <summary> is itself interactive and the
   panel is unreachable while the block is closed.
   ------------------------------------------------------------ */
.taste-prompt__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    align-items: center;
    cursor: pointer;
    /* Both spellings of the disclosure triangle: ::marker in current
       engines, ::-webkit-details-marker in older WebKit. */
    list-style: none;
}
.taste-prompt__summary::-webkit-details-marker {
    display: none;
}
.taste-prompt__summary::marker {
    content: "";
}
.taste-prompt__summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}
.taste-prompt__summary:hover .taste-prompt__title {
    color: var(--color-primary-on-white);
}
.taste-prompt__summary > .taste-prompt__kicker,
.taste-prompt__summary > .taste-prompt__title,
.taste-prompt__summary > .taste-prompt__tags {
    grid-column: 1;
}
.taste-prompt__chevron {
    grid-column: 2;
    grid-row: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* --color-ink-muted would read 4.39:1 against the :target tint above.
       This one clears AA on the tint and on white. */
    color: var(--color-ink-secondary);
    transition: transform var(--duration-fast) var(--ease-out);
}
.taste-prompt__chevron .icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
}
.taste-prompt__disclosure[open] > .taste-prompt__summary .taste-prompt__chevron {
    transform: rotate(180deg);
}
/* The rule under the header earns its place only when something is under it. */
.taste-prompt__disclosure[open] > .taste-prompt__summary {
    border-bottom: 1px solid var(--taste-rule);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
}

/* The interview page still sets its own header block rather than a summary. */
.taste-prompt__head {
    border-bottom: 1px solid var(--taste-rule);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
}
.taste-prompt__kicker {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-meta);
    font-weight: var(--font-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary-on-white);
    margin-bottom: var(--space-2);
}
.taste-prompt__title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    margin: 0;
}
.taste-prompt__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

/* ------------------------------------------------------------
   FACTS
   A two-column definition list on wide screens, stacked below.
   These are the two questions a reader asks before pasting.
   ------------------------------------------------------------ */
.taste-prompt__facts {
    display: grid;
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
}
@media (min-width: 769px) {
    .taste-prompt__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }
}
.taste-prompt__fact {
    min-width: 0;
}
.taste-prompt__term {
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink-faint-accessible);
    margin-bottom: var(--space-2);
}
.taste-prompt__detail {
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}
.taste-prompt__files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.taste-prompt__file {
    display: inline-block;
    font-family: var(--taste-mono);
    font-size: var(--text-caption);
    line-height: var(--leading-normal);
    color: var(--color-ink);
    background: var(--bg-muted, var(--bg-page));
    border: 1px solid var(--taste-rule);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

/* ------------------------------------------------------------
   SOURCE
   The prompt itself. Monospace and preserved wrapping, because
   the indentation in these prompts is load-bearing and the copy
   button reads this element's text verbatim.
   ------------------------------------------------------------ */
.taste-prompt__source {
    margin: 0;
    padding: var(--space-6);
    background: var(--bg-page);
    border: 1px solid var(--taste-rule);
    border-radius: var(--radius-md);
    font-family: var(--taste-mono);
    font-size: var(--text-caption);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 4;
    overflow-x: auto;
}

/* ------------------------------------------------------------
   ACTIONS
   Copy and permalink are siblings. Nesting either inside the
   other is invalid and the parser splits it silently.
   ------------------------------------------------------------ */
.taste-prompt__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.taste-prompt__permalink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--taste-mono);
    font-size: var(--text-caption);
    color: var(--color-ink-muted);
    text-decoration: none;
}
.taste-prompt__permalink:hover {
    color: var(--color-primary-on-white);
}
.taste-prompt__permalink .icon,
.taste-prompt__permalink .material-symbols-outlined {
    width: var(--icon-sm);
    height: var(--icon-sm);
    font-size: var(--icon-sm);
}

/* ------------------------------------------------------------
   ONWARD
   One pointer off the page, to the one thing too long to sit
   on it.
   ------------------------------------------------------------ */
.taste-onward {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 961px) {
    .taste-onward {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        gap: var(--space-16);
    }
}
.taste-onward__label {
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-primary-on-white);
}
.taste-onward__title {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    margin: var(--space-3) 0 0;
}
.taste-onward__body p {
    max-width: var(--taste-measure);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
    margin: 0 0 var(--space-5);
}
.taste-onward__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .taste-prompt.ws-card {
        padding: var(--space-6);
    }
    .taste-prompt__source {
        padding: var(--space-4);
    }
}

/* ============================================================
   INTERVIEW PAGE
   ------------------------------------------------------------
   A hundred questions is an hour of reading, so this page is
   built for someone working down it one question at a time
   with a model open in another window. Three things follow
   from that: the questions are prose rather than a wall of
   monospace, every section says where it sits in the hundred,
   and each section can be copied on its own for the second
   sitting.

   This page replaces nine printed pages. Nothing that was in
   the book may be missing from it.
   ============================================================ */

/* The copy payloads. Hidden rather than printed: the rendered
   version above each one is the same text set to be read, and
   textContent still resolves on a hidden element, which is all
   the copy script needs. */
.taste-source-hidden {
    display: none;
}

/* ------------------------------------------------------------
   FRAMING AND RULES
   The half of the prompt that is aimed at the model. It is
   read here, not pasted, so it gets body type rather than the
   monospace field the prompts page uses.
   ------------------------------------------------------------ */
.taste-framing p {
    max-width: var(--taste-measure);
    margin: 0 0 var(--space-5);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}

.taste-rules {
    max-width: var(--taste-measure);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: taste-rule;
    border-top: 1px solid var(--taste-rule);
}
.taste-rule {
    counter-increment: taste-rule;
    position: relative;
    padding: var(--space-4) 0 var(--space-4) var(--space-10);
    border-bottom: 1px solid var(--taste-rule);
    font-size: var(--text-ui);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}
.taste-rule::before {
    content: counter(taste-rule) ".";
    position: absolute;
    left: 0;
    top: var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-ui);
    font-weight: var(--font-bold);
    letter-spacing: 0.04em;
    color: var(--color-primary-on-white);
}
.taste-rule strong {
    color: var(--color-ink);
    font-weight: var(--font-semibold);
}

/* ------------------------------------------------------------
   SECTION TABLE
   The source's own table, doubling as this page's navigation.
   It scrolls inside its own box rather than pushing the page
   sideways on a phone.
   ------------------------------------------------------------ */
.taste-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--taste-rule);
}
.taste-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-ui);
    text-align: left;
}
.taste-table__caption {
    caption-side: bottom;
    padding-top: var(--space-4);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    text-align: left;
}
.taste-table th,
.taste-table td {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-bottom: 1px solid var(--taste-rule);
    vertical-align: baseline;
    color: var(--color-ink-secondary);
}
.taste-table thead th {
    font-size: var(--text-micro);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink-faint-accessible);
}
.taste-table tbody th {
    font-weight: var(--font-semibold);
    color: var(--color-ink);
    white-space: nowrap;
}
.taste-table tbody th a {
    color: var(--color-primary-on-white);
    text-decoration: none;
}
.taste-table tbody th a:hover {
    text-decoration: underline;
}
.taste-table__num {
    width: 1%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Three columns shrink to their content so the fourth, the only one with a
   sentence in it, absorbs the slack. Without this the section names sit a
   long way from their counts on a wide screen. */
.taste-table__name {
    width: 1%;
    white-space: nowrap;
}
.taste-note {
    max-width: var(--taste-measure);
    margin: var(--space-6) 0 0;
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
}

/* ------------------------------------------------------------
   QUESTIONS
   Numbered from the source, not from the list position: the
   prompt tells the model to report Q37/100, so section 3 has
   to open at 36 and mean it.
   ------------------------------------------------------------ */
.taste-questions {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--taste-rule);
}
.taste-question {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--taste-rule);
    /* A deep link from the book lands on one question, not near it. */
    scroll-margin-top: var(--space-16);
}
.taste-question:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
/* Right-aligned, the way a native decimal marker sets: the column is wide
   enough for "100." so left-aligning would strand every one-digit question
   two characters away from its own text. */
.taste-question__n {
    font-family: var(--font-heading);
    font-size: var(--text-ui);
    font-weight: var(--font-bold);
    line-height: var(--leading-relaxed);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--color-primary-on-white);
}
.taste-question__text {
    font-size: var(--text-ui);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}
.taste-question:target .taste-question__text {
    color: var(--color-ink);
    font-weight: var(--font-semibold);
}

/* The seven section cards. A deep-linked card is marked with its
   border alone: the tinted field the prompts page uses would drop
   the muted text on it below 4.5:1, and there are 100 lines of
   muted text here to get wrong. */
.taste-section.ws-card {
    scroll-margin-top: var(--space-16);
}
.taste-section.ws-card:target {
    border-color: var(--phase-learn-light);
    box-shadow: inset 3px 0 0 0 var(--color-primary-on-white);
}

/* ------------------------------------------------------------
   AFTER THE INTERVIEW
   The compilation shape. It is reference rather than something
   to paste on its own, so it keeps the monospace field and no
   copy button: it travels inside the full prompt.
   ------------------------------------------------------------ */
.taste-after {
    max-width: var(--container-md);
}
.taste-after__lead {
    margin: 0 0 var(--space-5);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}
.taste-after__rules {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}
.taste-after__rules li {
    position: relative;
    padding: 0 0 var(--space-4) var(--space-5);
    font-size: var(--text-ui);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}
.taste-after__rules li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--color-primary-on-white);
}
.taste-after__rules strong {
    color: var(--color-ink);
    font-weight: var(--font-semibold);
}

/* Inline code inside running prose, not inside a source block. */
.taste-code {
    font-family: var(--taste-mono);
    font-size: 0.9em;
    color: var(--color-ink);
    background: var(--bg-page);
    border: 1px solid var(--taste-rule);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
}

@media (max-width: 768px) {
    .taste-question {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: var(--space-2);
    }
    .taste-rule {
        padding-left: var(--space-8);
    }
}

/* ============================================================
   RESOURCES PAGE
   ------------------------------------------------------------
   Two blocks. The nine essays are a ruled list, set the way the
   contents page is set, because nine dated things in order are a
   list. The outside reading is three shelf cards, because three
   groups of unlike links are not.
   ============================================================ */

/* ------------------------------------------------------------
   READING
   One row per essay. A row with a live piece behind it is an
   anchor; a row without one is a plain div, so an unpublished
   essay cannot be clicked into a 404.
   ------------------------------------------------------------ */
.taste-reading {
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--taste-rule);
}
.taste-reading__row {
    border-bottom: 1px solid var(--taste-rule);
}
.taste-reading__item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-5) 0;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--duration-fast) var(--ease-out);
}
/* The hover tint is --phase-learn-very-light, on which --color-ink-muted
   and --color-ink-faint-accessible both fall to 4.39:1 and miss AA.
   Nothing inside a row is set in either: the date is
   --color-ink-secondary and the read-on line is --color-primary-on-white,
   which clear 4.5:1 on the tint as well as on white. */
a.taste-reading__item:hover {
    background: var(--phase-learn-very-light);
}
a.taste-reading__item:hover .taste-reading__title {
    color: var(--color-primary-on-white);
}
.taste-reading__date {
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--color-ink-secondary);
}
.taste-reading__body {
    display: block;
    min-width: 0;
}
.taste-reading__title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    transition: color var(--duration-fast) var(--ease-out);
}
.taste-reading__lede {
    display: block;
    max-width: var(--taste-measure);
    margin-top: var(--space-2);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}
.taste-reading__meta {
    display: block;
    margin-top: var(--space-3);
}
.taste-reading__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    color: var(--color-primary-on-white);
}
.taste-reading__go .icon,
.taste-reading__go .material-symbols-outlined {
    width: var(--icon-sm);
    height: var(--icon-sm);
    font-size: var(--icon-sm);
    transition: transform var(--duration-fast) var(--ease-out);
}
a.taste-reading__item:hover .taste-reading__go .icon,
a.taste-reading__item:hover .taste-reading__go .material-symbols-outlined {
    transform: translate(2px, -2px);
}

/* ------------------------------------------------------------
   LINKS
   The annotated list inside a shelf card. The name is the link;
   the line under it is not, so a reader can decide before
   leaving rather than after.
   ------------------------------------------------------------ */
.taste-entry--group.ws-card {
    /* The card is a flex column with align-items: flex-start, which would
       otherwise shrink the list to its longest word. */
    align-self: stretch;
}
.taste-entry--group .taste-entry__title {
    font-size: var(--text-h4);
}
.taste-links {
    width: 100%;
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--taste-rule);
}
.taste-link {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--taste-rule);
}
.taste-link:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.taste-link__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-ui);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--color-primary-on-white);
    text-decoration: none;
}
.taste-link__name:hover {
    text-decoration: underline;
}
.taste-link__name .icon,
.taste-link__name .material-symbols-outlined {
    flex: 0 0 auto;
    width: var(--icon-sm);
    height: var(--icon-sm);
    font-size: var(--icon-sm);
}
.taste-link__note {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-secondary);
}

@media (max-width: 768px) {
    .taste-reading__item {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        gap: var(--space-3);
    }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   The token file already zeroes the duration variables; this
   catches the transforms those durations do not govern.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .taste-entry.ws-card:hover .taste-entry__go .icon,
    .taste-entry.ws-card:hover .taste-entry__go .material-symbols-outlined {
        transform: none;
    }
    .taste-entry.ws-card--hoverable:hover {
        transform: none;
    }
    a.taste-reading__item:hover .taste-reading__go .icon,
    a.taste-reading__item:hover .taste-reading__go .material-symbols-outlined {
        transform: none;
    }
}

/* ------------------------------------------------------------
   MARGIN SCRIBBLE
   A drawn note in the margin, pointing at the row to run first.
   Stroke paths rather than a font: the platform sets Fraunces
   and Inter, and a hand is neither, so this stays an
   illustration instead of becoming a third typeface.

   It hangs off the First row itself rather than off the band, so
   it tracks that row wherever the list moves instead of needing
   a measured offset from the top of the section.

   It only draws where there is real margin to hold it. The note
   is 11rem wide and sits 2rem clear of the list, so it needs
   (viewport - 1120) / 2 plus the gutter to exceed about 190px.
   Below 1440px it is not drawn at all rather than clipped by the
   window or laid over the prose.
   ------------------------------------------------------------ */
.taste-loop__row--first {
    position: relative;
}
.taste-scribble {
    display: none;
}
@media (min-width: 1440px) {
    .taste-scribble {
        display: block;
        position: absolute;
        /* This artwork sweeps its arrow down and right from under the words,
           so landing the tip on the First row puts the words above it. The
           arrowhead stops short of the label rather than sitting on it: at
           calc(100% - 0.75rem) it covered the F and the row read as IRST. */
        top: -5rem;
        right: calc(100% + 0.75rem);
        width: 9rem;
        height: auto;
        /* The brand red at full strength: this is a marker on the page, and a
           faded one would read as a watermark rather than a hand. */
        color: var(--phase-learn);
        pointer-events: none;
    }
}