/*
 * Pins — a photo-board feel. Stories sit in two columns of cards of different
 * heights (three on a tablet, four on a computer): a rounded picture with a
 * "1/3" part badge, the title under it and a small category line. A story
 * without a picture becomes a soft pastel card with its opening line. Black
 * pill buttons, DM Sans. Story text stays plain and large. Loaded after
 * modern.css.
 */
:root {
    --md-bg: #FFFFFF;
    --md-head-bg: #FFFFFF;
    --md-story-bg: #FFFFFF;
    --md-surface: #FFFFFF;
    --md-surface-2: #EFEFEF;
    --md-line: #E9E9E9;
    --md-ink: #111111;
    --md-text: #1F1F1F;
    --md-soft: #3D3D3D;
    --md-mut: #5F5F5F;
    --md-accent: #111111;
    --md-accent-ink: #FFFFFF;
    --md-accent-text: #0B57D0;
    --md-accent-soft: #F1F1F1;
    --md-accent-soft-ink: #111111;
    --md-btn: #111111;
    --md-btn-ink: #FFFFFF;
    --md-radius: 22px;
    --md-radius-sm: 16px;
    --md-shadow: none;
    --md-shadow-up: none;
    --md-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --md-title-weight: 800;
    --pn-gap: 10px;
    --md-t1-bg: #FFE2CC; --md-t1-ink: #6A2A06;
    --md-t2-bg: #DCEBFA; --md-t2-ink: #0B3A6B;
    --md-t3-bg: #DCEFE0; --md-t3-ink: #1E4D2B;
    --md-t4-bg: #E7E1FB; --md-t4-ink: #3E2A86;
    --md-t5-bg: #FFF0BF; --md-t5-ink: #5E4300;
}
html.dark-mode {
    --md-bg: #121212;
    --md-head-bg: #121212;
    --md-story-bg: #121212;
    --md-surface: #1E1E1E;
    --md-surface-2: #2A2A2A;
    --md-line: #333333;
    --md-ink: #F2F2F2;
    --md-text: #E6E6E6;
    --md-soft: #C9C9C9;
    --md-mut: #A3A3A3;
    --md-accent: #F2F2F2;
    --md-accent-ink: #111111;
    --md-accent-text: #8AB4FF;
    --md-accent-soft: #2A2A2A;
    --md-accent-soft-ink: #F2F2F2;
    --md-btn: #F2F2F2;
    --md-btn-ink: #111111;
    --md-t1-bg: #4A2410; --md-t1-ink: #FFD9C2;
    --md-t2-bg: #10294A; --md-t2-ink: #CFE3FF;
    --md-t3-bg: #123222; --md-t3-ink: #C8F2DA;
    --md-t4-bg: #2A1F55; --md-t4-ink: #DCD2FF;
    --md-t5-bg: #3E2C05; --md-t5-ink: #FFE7AE;
    color-scheme: dark;
}

/* Header: a round initials mark beside the name, grey round buttons. */
.md-look-pins .md-mark { display: grid; width: 32px; height: 32px; border-radius: 50%; background: var(--md-ink); color: var(--md-bg); font-size: 12.5px; }
.md-look-pins .md-name { font-size: 20px; letter-spacing: -.03em; }
.md-look-pins .md-ico { background: var(--md-surface-2); box-shadow: none; }
.md-look-pins .md-masthead { border-bottom: 0; }

/* Category bar: big pills that wrap, the current one black. */
.md-look-pins .md-nav-in { gap: 8px; padding-top: 4px; padding-bottom: 14px; }
.md-look-pins .md-tab { min-height: 42px; padding: 10px 18px; background: var(--md-surface-2); color: var(--md-ink); font-size: 15px; font-weight: 700; }
.md-look-pins .md-tab:hover { color: var(--md-ink); filter: brightness(.96); }
.md-look-pins .md-tab.is-on { background: var(--md-ink); color: var(--md-bg); }

/* Home: the board. The page heading stays for search engines and screen readers. */
.md-look-pins .md-home { gap: 0; padding-top: 4px; }
.md-look-pins .md-hello { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.md-look-pins .md-block { padding-top: 26px; }
.md-look-pins .md-sec-title { font-size: 21px; letter-spacing: -.025em; }
.md-look-pins .md-see-all { color: var(--md-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Masonry: cards flow down two columns and keep their own height. */
.md-look-pins .md-hero-grid,
.md-look-pins .md-grid,
.md-look-pins .md-list,
.md-look-pins .md-stack,
.md-look-pins .md-split:not(.md-split--ranked) {
    display: block; columns: 2; column-gap: var(--pn-gap); orphans: 1; widows: 1;
}
.md-look-pins .md-hero-main, .md-look-pins .md-hero-side,
.md-look-pins .md-split:not(.md-split--ranked) > .md-split-main,
.md-look-pins .md-split:not(.md-split--ranked) > .md-split-side { display: contents; }
/* Anything in a board that is not a story (an ad, a list) spans the columns. */
.md-look-pins .md-grid > :not(.md-card), .md-look-pins .md-list > :not(.md-card) { column-span: all; margin-top: 4px; margin-bottom: 18px; }

.md-look-pins .md-card {
    display: block; width: 100%; margin: 0 0 18px; padding: 0; overflow: visible;
    background: transparent; border-radius: 0; box-shadow: none; transform: none;
    -webkit-column-break-inside: avoid; break-inside: avoid;
}
.md-look-pins .md-card .md-media { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 18px; }
.md-look-pins .md-card:nth-child(3n+2) .md-media { aspect-ratio: 1 / 1; }
.md-look-pins .md-card:nth-child(3n) .md-media { aspect-ratio: 4 / 5; }
.md-look-pins .md-card .md-card-body { display: flex; flex-direction: column; gap: 6px; padding: 9px 4px 0; }
.md-look-pins .md-card .md-card-title { order: 1; font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.md-look-pins .md-card .md-card-top { order: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.md-look-pins .md-card .md-badge {
    display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--tone-bg); color: var(--tone-ink); font: 800 10px/1 var(--md-font);
}
.md-look-pins .md-card .md-cat { min-width: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--md-mut); }
.md-look-pins .md-card .md-meta { display: none; }
.md-look-pins .md-card .md-card-excerpt, .md-look-pins .md-card .md-read { display: none; }
.md-look-pins .md-card .md-part { display: block; top: 10px; left: 10px; right: auto; padding: 5px 9px; background: #FFFFFF; color: #111111; font-weight: 800; }
.md-look-pins .md-card .md-rank { top: 10px; left: auto; right: 10px; }
/* No picture: a pastel card with the opening line; its height follows the text. */
.md-look-pins .md-card .md-media:has(> .md-cover) { aspect-ratio: auto; }
.md-look-pins .md-card .md-cover { position: static; min-height: 170px; justify-content: space-between; gap: 22px; padding: 18px 16px 20px; border-radius: 18px; }
.md-look-pins .md-card .md-cover-cat { display: block; font-size: 11.5px; font-weight: 800; }
.md-look-pins .md-card .md-cover-line { display: block; font-size: 20px; line-height: 1.17; letter-spacing: -.02em; }
.md-look-pins .md-card .md-cover-mark { display: none; }
.md-look-pins .md-card .md-cover:not(:has(.md-cover-line)) .md-cover-mark { display: block; align-self: flex-start; margin: 0; font-size: 56px; }
.md-look-pins .md-card:has(.md-part) .md-cover-cat { padding-left: 46px; min-height: 20px; }
/* The phone list rules of the shared stylesheet do not apply on a board. */
@media (max-width: 767px) {
    .md-look-pins .md-grid--cat .md-card--tile { display: block; padding: 0; }
    .md-look-pins .md-grid--cat .md-card--tile .md-card-body { padding: 9px 4px 0; }
    .md-look-pins .md-grid .md-card--tile .md-card-title, .md-look-pins .md-grid--cat .md-card--tile .md-card-title { font-size: 15px; }
    .md-look-pins .md-grid--cat .md-card--tile .md-cover { align-items: stretch; justify-content: space-between; }
    .md-look-pins .md-grid--cat .md-card--tile .md-cover-cat, .md-look-pins .md-grid--cat .md-card--tile .md-cover-line { display: block; }
    .md-look-pins .md-grid--cat .md-card--tile .md-cover-mark { display: none; }
    .md-look-pins .md-grid .md-card--tile .md-cover-line { font-size: 19px; }
}
/* The ranked "featured" block keeps its big card and list. */
.md-look-pins .md-split--ranked .md-card .md-media { aspect-ratio: 4 / 3; }
.md-look-pins .md-panel { box-shadow: none; background: var(--md-surface-2); }

/* Story page */
.md-look-pins .md-figure { border-radius: 28px; }
.md-look-pins .md-chip { background: var(--md-surface-2); color: var(--md-ink); font-weight: 700; }
.md-look-pins .md-chip--cat { background: var(--md-ink); color: var(--md-bg); }
.md-look-pins .md-share .share-btn:not(.share-btn-facebook-full) { background: var(--md-surface-2); }
.md-look-pins .md-prose blockquote, .md-look-pins .md-prose .wp-block-quote,
.md-look-pins .emo-highlight.emo-style-dialogue.emo-quote-block {
    border-radius: 24px; background: var(--md-t1-bg); color: var(--md-t1-ink);
}
.md-look-pins .emo-highlight.emo-style-dialogue.emo-quote-block { padding: .85em 1.05em .9em; font-size: 1.12em; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
html.dark-mode .md-look-pins .emo-highlight.emo-style-dialogue.emo-quote-block { background: var(--md-t1-bg); color: var(--md-t1-ink); }
.md-look-pins .md-parts { background: var(--md-surface-2); }
.md-look-pins .md-parts-steps span.is-on { background: var(--md-ink); }
.md-look-pins .md-parts-next { border-radius: var(--md-pill); box-shadow: none; }
.md-look-pins .md-parts-arrow { background: color-mix(in srgb, var(--md-accent-ink) 16%, transparent); }
.md-look-pins .md-related .md-list { columns: 2; }
.md-look-pins .md-author, .md-look-pins .md-upnext, .md-look-pins .md-postnav a { background: var(--md-surface-2); }
.md-look-pins .md-comments .comment-body { background: var(--md-surface-2); }
.md-look-pins .md-comments .cf-field textarea, .md-look-pins .md-comments .cf-field input[type="text"], .md-look-pins .md-comments .cf-field input[type="email"], .md-look-pins .md-comments .cf-field input[type="url"] { border-radius: 18px; background: var(--md-surface-2); border-color: transparent; }
.md-look-pins .md-foot { background: var(--md-surface-2); border-top: 0; }
.md-look-pins .md-pages .page-numbers { background: var(--md-surface-2); }
.md-look-pins .md-pages .page-numbers.current { background: var(--md-ink); color: var(--md-bg); }

@media (min-width: 768px) {
    :root { --pn-gap: 16px; }
    .md-look-pins .md-hero-grid, .md-look-pins .md-grid, .md-look-pins .md-list, .md-look-pins .md-stack, .md-look-pins .md-split:not(.md-split--ranked) { columns: 3; }
    .md-look-pins .md-related .md-list { columns: 3; }
}
@media (min-width: 1024px) {
    .md-look-pins .md-hero-grid, .md-look-pins .md-grid, .md-look-pins .md-block--grid .md-grid, .md-look-pins .md-list, .md-look-pins .md-stack, .md-look-pins .md-split:not(.md-split--ranked) { columns: 4; }
    .md-look-pins .md-columns-main .md-grid { columns: 3; }
    .md-look-pins .md-story .md-related .md-list { columns: 3; }
}