/*
 * Feedback That Lands: what this deck adds to the design system's slides.css (presentation/web, slides v2.1).
 * slides.css and slides.js are unchanged copies: update them from the design system, never edit them here.
 * They bring the navigation bar, linked contents, the skip link, presenting, and print.
 * This file holds: the self-hosted fonts, the Radical Candor quadrant, the sticky-note slide, and a few row widths.
 * No colour is hard-coded: everything uses the custom properties from slides.css.
 */

/* ------------------------------------------------ fonts (self-hosted, no third party) */
@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans.e001c72b.woff2") format("woff2");
    font-weight: 400 500;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader.1e46ca21.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-italic.66baf51c.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

.nowrap { white-space: nowrap; }

/* ------------------------------------------- rows with short terms */
.earn > div { grid-template-columns: 280px minmax(0, 1fr); }
.refs > div { grid-template-columns: 480px minmax(0, 1fr); }

/* ------------------------------------------- Radical Candor quadrant */
/* Two axes as rules, four quadrants as text. The quadrant that works is the one in indigo. */
.candor { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); }
.candor .axis { font-size: 20px; line-height: 28px; color: var(--fg-2); }
.candor .axis-y { grid-column: 1; grid-row: 1 / 3; writing-mode: vertical-rl; transform: rotate(180deg); align-self: start; justify-self: start; }
.candor .axis-y::before { content: "→ "; }
.candor .axis-x { grid-column: 2 / 4; grid-row: 3; justify-self: end; padding-top: 12px; }
.candor .axis-x::after { content: " →"; }
.candor .q { padding: 24px 48px 28px; }
.candor .q .title { margin-bottom: 10px; }
.candor .q-tl { grid-column: 2; grid-row: 1; border-right: 4px solid var(--rule-strong); border-bottom: 4px solid var(--rule-strong); padding-left: 0; }
.candor .q-tr { grid-column: 3; grid-row: 1; border-bottom: 4px solid var(--rule-strong); }
.candor .q-bl { grid-column: 2; grid-row: 2; border-right: 4px solid var(--rule-strong); padding-left: 0; }
.candor .q-br { grid-column: 3; grid-row: 2; }
.candor .q-tr .title { color: var(--indigo); }

/* ------------------------------------------------- sticky-note slide */
.note { max-width: 1440px; border-top: 5px solid var(--rule-strong); padding-top: 40px; }
.note p { font-family: var(--font-read); font-size: 64px; line-height: 80px; letter-spacing: -0.01em; text-wrap: balance; }
.note p + p { margin-top: 16px; }

/* ============================================================ phones */
@media screen and (max-width: 1023px) {
    html:not(.presenting) .earn > div, html:not(.presenting) .refs > div { grid-template-columns: 1fr; }
    html:not(.presenting) .candor { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); margin-top: 32px; }
    html:not(.presenting) .candor .axis { font-size: 13px; line-height: 18px; }
    html:not(.presenting) .candor .q { padding: 12px 12px 14px; }
    html:not(.presenting) .candor .q-tl, html:not(.presenting) .candor .q-bl { padding-left: 0; }
    html:not(.presenting) .candor .q .title { font-size: clamp(16px, 4.4vw, 24px); margin-bottom: 6px; }
    html:not(.presenting) .candor .q .body-2 { font-size: clamp(14px, 3.8vw, 18px); }
    html:not(.presenting) .candor .q-tl, html:not(.presenting) .candor .q-tr, html:not(.presenting) .candor .q-bl { border-width: 2px; }
    html:not(.presenting) .note { padding-top: 20px; border-top-width: 4px; }
    html:not(.presenting) .note p { font-size: clamp(24px, 6.6vw, 44px); line-height: 1.3; }
}