/*
  Postmarq theme, design language v1.2.
  One style sheet drives everything. Tokens first; change a color here and it changes everywhere.
  Source of truth for the brand: ~/_Claude/02_Personal/Postmarq/Brand/README.md
*/

/* ---------- Fonts (self-hosted) ---------- */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url(../fonts/bricolage-grotesque.woff2) format("woff2");
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
}
@font-face {
    font-family: Literata;
    src: url(../fonts/literata.woff2) format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Literata;
    src: url(../fonts/literata-italic.woff2) format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
    /* Neutrals */
    --black: #0E0E10;
    --raised: #17171A;
    --line: #2A2A2F;
    --white: #F4F4F1;
    --muted: #A6A6AE;
    --soft: #D9D9D6;
    --ink: #DCDCD8;

    /* Phoenix dusk accents, all sampled from Dave's sky photo (IMG_1216), palms excluded.
       Every one passes 6.5:1 or better on --black. Dusk blue is for fills and rules only. */
    --peach: #FCCFB6;      /* main accent; Pulse: Jobs and AI */
    --apricot: #FFB98C;    /* the warmest glow above the horizon */
    --coral: #F29F87;      /* the hot edge of the clouds */
    --gold: #FEE3A9;       /* the horizon band */
    --blush: #E3B9B0;      /* Pulse: Field guides */
    --mauve: #C8ADB9;      /* the pink-violet haze */
    --periwinkle: #9197B3; /* Pulse: Community */
    --twilight: #7F99BA;   /* the clear blue band */
    --dusk: #516181;       /* fills and rules only, never text */

    --sky: linear-gradient(90deg, var(--dusk), var(--twilight) 14%, var(--periwinkle) 28%, var(--mauve) 42%, var(--blush) 56%, var(--coral) 70%, var(--apricot) 82%, var(--peach) 92%, var(--gold));

    /* Ghost's font picker can override these; by default they are the brand fonts */
    --head: var(--gh-font-heading, "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif);
    --serif: var(--gh-font-body, Literata, Georgia, "Times New Roman", serif);

    --wrap: 1240px;
    --gutter: 28px;

    /* Ridgelines: line weight, accent weight, and how strongly climbed lines stay tinted */
    --wl: 1.3px;
    --wa: 2.4px;
    --trail: .42;
}

/* ---------- Story color and level ----------
   Every card and story page carries .pm-story plus:
     pulse-<slug>   its Pulse color (primary tag)
     hash-color-*   a story color that overrides the Pulse (internal tag #color-coral, etc.)
     hash-level-N   how far the story has climbed, 1 (ground) to 7 (the peak, the Postmarq)
   Line 1 is the bottom ridge, line 7 the top. Lines read --rN / --oN / --wN; the meter reads --mN. */

.pm-story {
    --c: var(--peach);
    --r1: var(--c); --o1: 1; --w1: var(--wa);
    --r2: var(--white); --o2: .26; --w2: var(--wl);
    --r3: var(--white); --o3: .34; --w3: var(--wl);
    --r4: var(--white); --o4: .43; --w4: var(--wl);
    --r5: var(--white); --o5: .52; --w5: var(--wl);
    --r6: var(--white); --o6: .61; --w6: var(--wl);
    --r7: var(--white); --o7: .70; --w7: var(--wl);
    --m1: var(--c); --m2: var(--line); --m3: var(--line); --m4: var(--line); --m5: var(--line); --m6: var(--line); --m7: var(--line);
    --dia-fill: none;
    --lvl: "1";
}

.pulse-jobs-and-ai { --c: var(--peach); }
.pulse-community { --c: var(--periwinkle); }
.pulse-field-guides { --c: var(--blush); }

.hash-color-peach { --c: var(--peach); }
.hash-color-apricot { --c: var(--apricot); }
.hash-color-coral { --c: var(--coral); }
.hash-color-gold { --c: var(--gold); }
.hash-color-blush { --c: var(--blush); }
.hash-color-mauve { --c: var(--mauve); }
.hash-color-periwinkle { --c: var(--periwinkle); }
.hash-color-twilight { --c: var(--twilight); }

/* LEVELS:START (generated by scripts/build-ridges.mjs) */
.hash-level-2{--r1:var(--c);--o1:var(--trail);--w1:var(--wl);--m1:var(--c);--r2:var(--c);--o2:1;--w2:var(--wa);--m2:var(--c);--lvl:"2"}
.hash-level-3{--r1:var(--c);--o1:var(--trail);--w1:var(--wl);--m1:var(--c);--r2:var(--c);--o2:var(--trail);--w2:var(--wl);--m2:var(--c);--r3:var(--c);--o3:1;--w3:var(--wa);--m3:var(--c);--lvl:"3"}
.hash-level-4{--r1:var(--c);--o1:var(--trail);--w1:var(--wl);--m1:var(--c);--r2:var(--c);--o2:var(--trail);--w2:var(--wl);--m2:var(--c);--r3:var(--c);--o3:var(--trail);--w3:var(--wl);--m3:var(--c);--r4:var(--c);--o4:1;--w4:var(--wa);--m4:var(--c);--lvl:"4"}
.hash-level-5{--r1:var(--c);--o1:var(--trail);--w1:var(--wl);--m1:var(--c);--r2:var(--c);--o2:var(--trail);--w2:var(--wl);--m2:var(--c);--r3:var(--c);--o3:var(--trail);--w3:var(--wl);--m3:var(--c);--r4:var(--c);--o4:var(--trail);--w4:var(--wl);--m4:var(--c);--r5:var(--c);--o5:1;--w5:var(--wa);--m5:var(--c);--lvl:"5"}
.hash-level-6{--r1:var(--c);--o1:var(--trail);--w1:var(--wl);--m1:var(--c);--r2:var(--c);--o2:var(--trail);--w2:var(--wl);--m2:var(--c);--r3:var(--c);--o3:var(--trail);--w3:var(--wl);--m3:var(--c);--r4:var(--c);--o4:var(--trail);--w4:var(--wl);--m4:var(--c);--r5:var(--c);--o5:var(--trail);--w5:var(--wl);--m5:var(--c);--r6:var(--c);--o6:1;--w6:var(--wa);--m6:var(--c);--lvl:"6"}
.hash-level-7{--r1:var(--c);--o1:var(--trail);--w1:var(--wl);--m1:var(--c);--r2:var(--c);--o2:var(--trail);--w2:var(--wl);--m2:var(--c);--r3:var(--c);--o3:var(--trail);--w3:var(--wl);--m3:var(--c);--r4:var(--c);--o4:var(--trail);--w4:var(--wl);--m4:var(--c);--r5:var(--c);--o5:var(--trail);--w5:var(--wl);--m5:var(--c);--r6:var(--c);--o6:var(--trail);--w6:var(--wl);--m6:var(--c);--r7:var(--c);--o7:1;--w7:var(--wa);--m7:var(--c);--lvl:"7";--dia-fill:var(--c)}
/* LEVELS:END */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; border-radius: 2px; }

.pm-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pm-skip {
    position: absolute;
    left: 16px; top: -60px;
    z-index: 10;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--peach);
    color: var(--black);
    font: 700 15px var(--head);
}
.pm-skip:focus { top: 12px; }

.pm-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.pm-dusk { height: 3px; background: var(--sky); }

/* ---------- Header ---------- */

.pm-header-in {
    display: flex;
    align-items: center;
    gap: 34px;
    height: 86px;
}

.pm-brand { flex: none; }
.pm-brand img { display: block; height: 56px; width: auto; }

.pm-nav { flex: 1; min-width: 0; }

.pm-nav-list {
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 500 16px var(--head);
}
.pm-nav-list a {
    display: block;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    color: var(--soft);
    white-space: nowrap;
}
.pm-nav-list a:hover { color: var(--white); border-color: color-mix(in srgb, var(--c, var(--peach)) 55%, transparent); }
.pm-nav-list a.is-on { color: var(--white); border-color: var(--c, var(--peach)); }

[data-nav="latest"], [data-nav="home"] { --c: var(--peach); }
[data-nav="jobs-and-ai"] { --c: var(--apricot); }
[data-nav="community"] { --c: var(--periwinkle); }
[data-nav="field-guides"] { --c: var(--blush); }
[data-nav="about"] { --c: var(--twilight); }
[data-nav="standards"] { --c: var(--gold); }

.pm-pill {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--peach);
    color: var(--black);
    font: 700 15px/1 var(--head);
    white-space: nowrap;
    transition: background-color .15s;
}
.pm-pill:hover { background: var(--gold); }
.pm-pill--quiet { background: var(--raised); color: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.pm-pill--quiet:hover { background: var(--line); }

/* ---------- Front page ---------- */

.pm-front {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
}
.pm-main { padding: 34px 36px 56px 0; border-right: 1px solid var(--line); }
.pm-side { padding: 34px 0 56px 32px; }

/* Placeholders: the mountain grid, or the real photo once Dave shoots it */
.pm-ph {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--raised) 40%, color-mix(in srgb, var(--c) 10%, var(--raised)));
}
.pm-ph svg, .pm-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-ph--wide { aspect-ratio: 16 / 9; }
.pm-ph--card { aspect-ratio: 4 / 3; }
.pm-ph--square { aspect-ratio: 1; border-radius: 4px; }
.pm-ph-label {
    position: absolute;
    left: 4%;
    top: 5%;
    color: var(--muted);
    font: 600 13px var(--head);
}
.pm-ph--wide .pm-ph-label { font-size: 15px; }

.pm-kickrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font: 600 14px var(--head);
}
.pm-kicker { color: var(--c); }
.pm-kicker--story { color: var(--white); }
.pm-kicker--plain { color: var(--muted); font-weight: 500; }

/* The level meter: seven steps, filled up to where the story stands */
.pm-level {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font: 500 13px var(--head);
}
.pm-level:hover { color: var(--white); }
.pm-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.pm-meter i { width: 3px; border-radius: 1px; }
.pm-meter i:nth-child(1) { height: 22%; background: var(--m1); }
.pm-meter i:nth-child(2) { height: 35%; background: var(--m2); }
.pm-meter i:nth-child(3) { height: 48%; background: var(--m3); }
.pm-meter i:nth-child(4) { height: 61%; background: var(--m4); }
.pm-meter i:nth-child(5) { height: 74%; background: var(--m5); }
.pm-meter i:nth-child(6) { height: 87%; background: var(--m6); }
.pm-meter i:nth-child(7) { height: 100%; background: var(--m7); }
.pm-level-n::after { content: var(--lvl) " of 7"; }

.pm-lead-media { display: block; }
.pm-lead .pm-kickrow { margin-top: 24px; }
.pm-lead-title {
    max-width: 19ch;
    margin: 12px 0 14px;
    font: 800 68px/.96 var(--head);
    font-variation-settings: "wdth" 78;
    letter-spacing: -.015em;
}
.pm-lead-title a:hover, .pm-pair-title a:hover, .pm-guide-title a:hover, .pm-feed-item h3 a:hover, .pm-row-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--c);
    text-decoration-thickness: 2px;
    text-underline-offset: .12em;
}

.pm-deck {
    max-width: 36em;
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 21px;
    line-height: 1.5;
}

.pm-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    color: var(--muted);
    font: 500 14px var(--head);
}
.pm-by-name { color: var(--c); font-weight: 700; }
.pm-by-tag:hover, .pm-by-name:hover { text-decoration: underline; }

.pm-trust {
    margin: 10px 0 0;
    padding-left: 12px;
    border-left: 2px solid var(--peach);
    color: var(--muted);
    font: 500 13px/1.45 var(--head);
}
.pm-trust--peer { border-color: var(--twilight); }
.pm-trust a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.pm-trust a:hover { text-decoration-color: currentColor; }

.pm-pairs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
    border-top: 1px solid var(--line);
}
.pm-pair {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}
.pm-pair:nth-child(odd) { padding-right: 22px; border-right: 1px solid var(--line); }
.pm-pair:nth-child(even) { padding-left: 22px; }
.pm-pair-media { flex: 0 0 88px; }
.pm-pair-title {
    margin: 0 0 8px;
    font: 700 20px/1.14 var(--head);
}

.pm-sec { margin-top: 52px; }
.pm-sec-h {
    margin: 0;
    padding-top: 14px;
    border-top: 3px solid var(--c);
    font: 800 24px/1.2 var(--head);
    letter-spacing: -.01em;
}
.pm-sec-h span { color: var(--muted); font-size: 20px; font-weight: 400; }
.pm-sec-h span::before { content: "/"; margin: 0 10px 0 6px; color: var(--c); }

.pm-guides {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 22px;
}
.pm-guide .pm-ph { margin-bottom: 14px; }
.pm-guide-title { margin: 0 0 8px; font: 700 20px/1.15 var(--head); }
.pm-guide p { margin: 0 0 10px; color: #C9C9C5; font-size: 16px; line-height: 1.5; }

@media (min-width: 1181px) {
    .pm-main .pm-guides:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .pm-main .pm-guides:has(> :nth-child(4)) .pm-guide p { font-size: 15px; }
}
@media (max-width: 1180px) {
    .pm-guides:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pm-rows { margin-top: 8px; }
.pm-row {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 26px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}
.pm-row-title { margin: 10px 0 8px; font: 700 26px/1.12 var(--head); letter-spacing: -.005em; }
.pm-row-deck { margin: 0 0 12px; color: #C9C9C5; font-size: 17px; line-height: 1.5; }
.pm-more { margin: 26px 0 0; }

.pm-empty { padding: 60px 0; }
.pm-empty h2 { font: 800 44px/1 var(--head); font-variation-settings: "wdth" 80; margin: 0 0 12px; }
.pm-empty p { color: var(--ink); font-size: 19px; }

/* ---------- The side column ---------- */

.pm-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--raised);
    font: 700 13px var(--head);
}
.pm-tabs button {
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
}
.pm-tabs button[aria-selected="true"] { background: var(--peach); color: var(--black); }

.pm-feed-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.pm-feed-item h3 {
    position: relative;
    margin: 0 0 6px;
    padding-left: 16px;
    font: 700 18px/1.2 var(--head);
}
.pm-feed-item h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .42em;
    width: 7px;
    height: 7px;
    background: var(--c);
    transform: rotate(45deg);
}
.pm-feed-item p { margin: 0 0 8px; color: #C9C9C5; font-size: 15px; line-height: 1.5; }
.pm-feed-item .pm-by { font-size: 13px; }

.pm-pulses-intro { margin: 18px 0 6px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.pm-pulse {
    display: block;
    margin-top: 12px;
    padding: 14px 16px;
    border-left: 3px solid var(--c);
    border-radius: 0 8px 8px 0;
    background: var(--raised);
}
.pm-pulse b { display: block; color: var(--c); font: 700 17px var(--head); }
.pm-pulse span { display: block; margin-top: 4px; color: #C9C9C5; font-size: 14px; line-height: 1.45; }
.pm-pulse small { display: block; margin-top: 6px; color: var(--muted); font: 500 12px var(--head); }
.pm-pulse:hover { background: var(--line); }

.pm-join {
    position: relative;
    margin-top: 30px;
    padding: 22px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--raised);
}
.pm-join::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--sky); }
.pm-join-title {
    margin: 0 0 8px;
    font: 800 24px/1.05 var(--head);
    font-variation-settings: "wdth" 85;
}
.pm-join p { margin: 0 0 16px; color: #C9C9C5; font-size: 15px; line-height: 1.5; }
.pm-join--in .pm-join-title { color: var(--peach); }

.pm-form { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-form input {
    flex: 1 1 160px;
    min-width: 0;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--black);
    color: var(--white);
    font: 500 15px var(--head);
}
.pm-form input::placeholder { color: #7C7C85; }
.pm-form input:focus { outline: 2px solid var(--peach); outline-offset: 1px; }
.pm-form button {
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--peach);
    color: var(--black);
    font: 700 15px var(--head);
    cursor: pointer;
}
.pm-form button:hover { background: var(--gold); }
.pm-form-busy, .pm-form-ok, .pm-form-err { display: none; }
.pm-form .pm-form-ok, .pm-form .pm-form-err { flex-basis: 100%; margin: 6px 0 0; font: 500 14px var(--head); }
.pm-form.loading .pm-form-idle { display: none; }
.pm-form.loading .pm-form-busy { display: inline; }
.pm-form.success input, .pm-form.success button { display: none; }
.pm-form.success .pm-form-ok { display: block; color: var(--peach); margin: 0; }
.pm-form.error .pm-form-err { display: block; color: var(--coral); }

.pm-legend { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.pm-legend h2 { margin: 0 0 14px; font: 700 17px var(--head); }
.pm-legend ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pm-legend li { display: flex; gap: 14px; align-items: center; }
.pm-legend .pm-ph { flex: 0 0 64px; }
.pm-legend span { color: #C9C9C5; font-size: 14px; line-height: 1.45; }
.pm-legend b { color: var(--c); font: 700 14px var(--head); }

/* ---------- Story pages ---------- */

.pm-art-head { max-width: 860px; padding-top: 44px; }
.pm-art-title {
    max-width: 20ch;
    margin: 14px 0 18px;
    font: 800 64px/.98 var(--head);
    font-variation-settings: "wdth" 80;
    letter-spacing: -.015em;
}
.pm-art-deck { font-size: 22px; }

.pm-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 22px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font: 500 14px var(--head);
}
.pm-rail-by { color: var(--soft); }
.pm-rail-by a { color: var(--c); font-weight: 700; }
.pm-rail-updated { color: var(--gold); }

.pm-hero { max-width: 1040px; margin: 30px auto 0; }
.pm-hero figcaption { margin-top: 10px; color: var(--muted); font: 500 13px var(--head); }

.pm-body, .pm-endcap { max-width: 720px; margin: 44px auto 0; }
.pm-art-head + .pm-wrap .pm-body { margin-top: 32px; }

/* Article text */
.gh-content { color: #E6E6E2; font-size: 19.5px; line-height: 1.7; }
.gh-content > * { margin: 0 0 1.15em; }
.gh-content h2 { margin: 1.9em 0 .55em; color: var(--white); font: 700 30px/1.15 var(--head); letter-spacing: -.01em; }
.gh-content h3 { margin: 1.6em 0 .5em; color: var(--white); font: 700 22px/1.2 var(--head); }
.gh-content h2 + *, .gh-content h3 + * { margin-top: 0; }
.gh-content a { color: var(--white); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.gh-content a:hover { color: var(--c); }
.gh-content strong { color: var(--white); }
.gh-content ul, .gh-content ol { padding-left: 1.3em; }
.gh-content li { margin: .35em 0; }
.gh-content li::marker { color: var(--c); }
.gh-content blockquote {
    margin: 1.6em 0;
    padding: 2px 0 2px 22px;
    border-left: 3px solid var(--c);
    color: var(--white);
    font-style: italic;
}
.gh-content hr { height: 0; margin: 2.2em 0; border: 0; border-top: 1px solid var(--line); }
.gh-content figcaption { margin-top: 10px; color: var(--muted); font: 500 14px/1.4 var(--head); text-align: left; }
.gh-content img { height: auto; border-radius: 6px; }
.gh-content table { width: 100%; border-collapse: collapse; font: 500 15px/1.45 var(--head); }
.gh-content th, .gh-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gh-content th { color: var(--muted); font-weight: 600; }
.gh-content code { padding: 2px 5px; border-radius: 4px; background: var(--raised); font-size: .85em; }

/* Required by Ghost for wide and full-width cards */
.kg-width-wide { position: relative; width: min(1080px, 100vw - 2 * var(--gutter)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { position: relative; width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full img { border-radius: 0; }

/* Trust blocks: main.js wraps each standard H2 section (Sources, What we don't know yet, ...) in one of these */
.pm-block {
    margin: 2.2em 0;
    padding: 20px 24px 6px;
    border-top: 3px solid var(--bc, var(--c));
    border-radius: 0 0 8px 8px;
    background: var(--raised);
    font-size: 17px;
    line-height: 1.6;
}
.pm-block > h2 { margin: 0 0 .6em; font-size: 22px; }
.pm-block > * { margin-bottom: .9em; }
.pm-block--sources { --bc: var(--twilight); }
.pm-block--know { --bc: var(--peach); }
.pm-block--unknown { --bc: var(--gold); }
.pm-block--asked { --bc: var(--periwinkle); }
.pm-block--corrections { --bc: var(--coral); }
.pm-block--verified { --bc: var(--mauve); }
.pm-block--sources ol, .pm-block--sources ul { font: 500 15px/1.5 var(--head); }

/* End cap: the climb, corrections, sign-up */
.pm-endcap { margin-top: 56px; }
.pm-endcap > * + * { margin-top: 36px; }

.pm-climb ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: climb; }
.pm-climb li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font: 600 17px/1.3 var(--head);
}
.pm-climb li .pm-level { flex: 0 0 auto; min-width: 150px; }
.pm-climb li a:last-child:hover { color: var(--c); }
.pm-climb li[aria-current] a:last-child { color: var(--c); }
.pm-climb li[aria-current] a:last-child::after { content: "  · you're here"; color: var(--muted); font-weight: 500; font-size: 14px; }

.pm-correct { padding: 20px 24px; border-left: 3px solid var(--coral); border-radius: 0 8px 8px 0; background: var(--raised); }
.pm-correct h2 { margin: 0 0 8px; font: 700 20px var(--head); }
.pm-correct p { margin: 0; color: #C9C9C5; font-size: 16px; line-height: 1.6; }
.pm-correct a { color: var(--white); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }

.pm-comments { padding-top: 10px; }

.pm-related { margin-top: 64px; margin-bottom: 20px; }

/* Field guide: a jump list beside the body on wide screens */
.pm-guide-grid { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 48px; justify-content: center; }
.pm-guide-grid .pm-body { margin: 32px 0 0; }
.pm-toc { position: sticky; top: 24px; align-self: start; margin-top: 40px; }
.pm-toc h2 { margin: 0 0 10px; color: var(--muted); font: 600 13px var(--head); }
.pm-toc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.pm-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--soft); font: 500 14px/1.3 var(--head); }
.pm-toc a:hover { color: var(--white); border-color: var(--c); }

/* ---------- Pulse, author and archive pages ---------- */

.pm-archive { padding-bottom: 64px; }
.pm-archive-head { margin-top: 40px; padding-top: 18px; border-top: 4px solid var(--c); max-width: 820px; }
.pm-archive-head h1 { margin: 6px 0 10px; font: 800 56px/1 var(--head); font-variation-settings: "wdth" 80; letter-spacing: -.015em; }
.pm-archive-head p { margin: 0 0 6px; color: var(--ink); font-size: 19px; line-height: 1.5; }
.pm-archive-head .pm-kicker { margin: 0; font: 600 14px var(--head); }
.pm-author { display: flex; gap: 24px; align-items: flex-start; }
.pm-author-img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.pm-author-links { display: flex; gap: 16px; font: 600 15px var(--head); }
.pm-author-links a { color: var(--c); }
.pm-error .pm-archive-head { --c: var(--coral); }
.pm-error .pm-pill { margin-top: 18px; }

.pm-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    color: var(--muted);
    font: 500 14px var(--head);
}

/* ---------- Footer ---------- */

.pm-footer { margin-top: 24px; border-top: 1px solid var(--line); }
.pm-footer-in { display: flex; align-items: center; gap: 56px; padding-top: 48px; padding-bottom: 56px; }
.pm-footer-logo img { display: block; width: 430px; max-width: 100%; height: auto; }
.pm-footer-logo { flex: 0 1 430px; }
.pm-footer-line { margin: 0; max-width: 18ch; font: 700 26px/1.1 var(--head); font-variation-settings: "wdth" 85; }
.pm-footer-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--soft); font: 500 14px var(--head); }
.pm-footer-trust li { display: flex; align-items: center; gap: 8px; }
.pm-footer-trust li::before { content: ""; width: 6px; height: 6px; background: var(--c); transform: rotate(45deg); }
.pm-footer-nav .pm-nav-list { flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 14px; }
.pm-footer-nav .pm-nav-list a { padding: 2px 0; color: var(--muted); }
.pm-footer-nav .pm-nav-list a:hover { color: var(--white); }
.pm-footer small { display: block; margin-top: 14px; color: #7C7C85; font: 500 13px var(--head); }

/* ---------- Smaller screens ---------- */

@media (max-width: 1100px) {
    .pm-front { grid-template-columns: minmax(0, 1fr) 300px; }
    .pm-lead-title { font-size: 58px; }
    .pm-header-in { gap: 24px; }
    .pm-nav-list { gap: 20px; font-size: 15px; }
}

@media (max-width: 900px) {
    :root { --gutter: 16px; }

    .pm-header-in { flex-wrap: wrap; gap: 0 12px; height: auto; padding-top: 12px; }
    .pm-brand img { height: 42px; }
    .pm-header-in > .pm-pill { margin-left: auto; padding: 10px 16px; font-size: 14px; }
    .pm-nav { order: 3; flex: 0 0 100%; margin: 6px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
    .pm-nav::-webkit-scrollbar { display: none; }
    .pm-nav-list { gap: 22px; padding-bottom: 4px; }
    .pm-nav-list a { padding: 8px 0 10px; }

    .pm-front { grid-template-columns: 1fr; }
    .pm-main { padding: 20px 0 8px; border-right: 0; }
    .pm-side { padding: 28px 0 40px; border-top: 1px solid var(--line); }

    .pm-lead-title { font-size: 44px; }
    .pm-deck { font-size: 18px; }
    .pm-pairs { grid-template-columns: 1fr; margin-top: 28px; }
    .pm-pair:nth-child(odd), .pm-pair:nth-child(even) { padding: 18px 0; border-right: 0; }
    .pm-pair-media { flex-basis: 76px; }
    .pm-pair-title { font-size: 19px; }
    .pm-guides, .pm-guides:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; gap: 18px; }
    .pm-guide-title { font-size: 18px; }
    .pm-guide p { font-size: 15px; }

    .pm-row { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
    .pm-row-title { font-size: 20px; margin-top: 6px; }
    .pm-row-deck { display: none; }
    .pm-row .pm-ph--card { aspect-ratio: 1; }

    .pm-art-head { padding-top: 26px; }
    .pm-art-title { font-size: 42px; }
    .pm-art-deck { font-size: 19px; }
    .pm-hero { margin-top: 22px; }
    .pm-hero .pm-ph { border-radius: 4px; }
    .gh-content { font-size: 18px; }
    .gh-content h2 { font-size: 25px; }
    .pm-block { padding: 18px 18px 4px; }

    .pm-guide-grid { grid-template-columns: 1fr; gap: 0; }
    .pm-toc { position: static; margin-top: 28px; }

    .pm-archive-head h1 { font-size: 40px; }

    .pm-footer-in { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 36px; }
    .pm-footer-logo { flex: none; width: 100%; }
}

@media (max-width: 520px) {
    .pm-lead-title { font-size: 38px; }
    .pm-art-title { font-size: 36px; }

    /* Field guides become a swipeable row on phones */
    .pm-guides, .pm-guides:has(> :nth-child(4)) {
        display: flex;
        gap: 14px;
        margin-right: calc(-1 * var(--gutter));
        padding-right: var(--gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .pm-guides::-webkit-scrollbar { display: none; }
    .pm-guide { flex: 0 0 74%; scroll-snap-align: start; }
    .pm-footer-line { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}