/*
 * Feed — a social-app feel. Every story is a post: category badge, name and
 * time, the title, the picture (or the story's opening line on a tinted card)
 * and a "Read" pill, divided by thin lines. Round category badges at the top.
 * The phone's own font; one raspberry accent. Loaded after modern.css.
 */
:root {
    --md-bg: #FFFFFF;
    --md-head-bg: #FFFFFF;
    --md-story-bg: #FFFFFF;
    --md-surface: #FFFFFF;
    --md-surface-2: #F7F9F9;
    --md-line: #EFF3F4;
    --md-ink: #0F1419;
    --md-text: #0F1419;
    --md-soft: #2F3336;
    --md-mut: #536471;
    --md-accent: #E11D48;
    --md-accent-ink: #FFFFFF;
    --md-accent-text: #BE123C;
    --md-accent-soft: #FFF1F3;
    --md-accent-soft-ink: #881337;
    --md-btn: #0F1419;
    --md-btn-ink: #FFFFFF;
    --md-radius: 16px;
    --md-radius-sm: 12px;
    --md-shadow: none;
    --md-shadow-up: none;
    --md-title-weight: 800;
    --md-t1-bg: #FFE4E8; --md-t1-ink: #9F1239;
    --md-t2-bg: #E0F2FE; --md-t2-ink: #075985;
    --md-t3-bg: #FEF3C7; --md-t3-ink: #92400E;
    --md-t4-bg: #DCFCE7; --md-t4-ink: #166534;
    --md-t5-bg: #EDE9FE; --md-t5-ink: #5B21B6;
}
html.dark-mode {
    --md-bg: #000000;
    --md-head-bg: #000000;
    --md-story-bg: #000000;
    --md-surface: #000000;
    --md-surface-2: #16181C;
    --md-line: #2F3336;
    --md-ink: #E7E9EA;
    --md-text: #E7E9EA;
    --md-soft: #C4C9CE;
    --md-mut: #8B9399;
    --md-accent: #D43850;
    --md-accent-ink: #FFFFFF;
    --md-accent-text: #FB7185;
    --md-accent-soft: #3B0D18;
    --md-accent-soft-ink: #FFD1DA;
    --md-btn: #E7E9EA;
    --md-btn-ink: #000000;
    --md-t1-bg: #4C0519; --md-t1-ink: #FFD1DA;
    --md-t2-bg: #082F49; --md-t2-ink: #BAE6FD;
    --md-t3-bg: #451A03; --md-t3-ink: #FDE68A;
    --md-t4-bg: #052E16; --md-t4-ink: #BBF7D0;
    --md-t5-bg: #2E1065; --md-t5-ink: #DDD6FE;
    color-scheme: dark;
}

/* Header: the wordmark with a dot, plain icons. */
.md-look-feed .md-name { font-size: 22px; letter-spacing: -.04em; }
.md-look-feed .md-name::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--md-accent); vertical-align: .05em; }
.md-look-feed .md-ico { background: transparent; box-shadow: none; }
.md-look-feed .md-masthead { border-bottom-color: var(--md-line); }

/* Category badges: round, with a ring; wrap onto rows of four on a phone. */
.md-look-feed .md-nav { border-bottom: 1px solid var(--md-line); }
.md-look-feed .md-nav-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 12px 6px; padding-top: 12px; padding-bottom: 14px; }
.md-look-feed .md-tab { flex-direction: column; gap: 6px; min-height: 0; padding: 0; background: transparent; color: var(--md-ink); font-size: 12px; font-weight: 600; white-space: normal; text-align: center; }
.md-look-feed .md-tab.is-on { background: transparent; color: var(--md-ink); }
.md-look-feed .md-tab-badge {
    display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
    background: var(--tone-bg); color: var(--tone-ink); font: 800 20px/1 var(--md-font);
    box-shadow: 0 0 0 3px var(--md-bg), 0 0 0 5.5px #CFD9DE;
}
.md-look-feed .md-tab.is-on .md-tab-badge { box-shadow: 0 0 0 3px var(--md-bg), 0 0 0 5.5px var(--md-accent); }
.md-look-feed .md-tab-label { max-width: 100%; overflow-wrap: anywhere; }

/* Home: a single-column feed, like the app. */
.md-look-feed .md-home { gap: 0; padding-top: 0; }
.md-look-feed .md-hello { margin: 16px 0 0; }
.md-look-feed .md-hello-date { display: none; }
.md-look-feed .md-hello-title { font-size: 22px; letter-spacing: -.03em; }
.md-look-feed .md-hero-grid, .md-look-feed .md-hero-side, .md-look-feed .md-list, .md-look-feed .md-stack, .md-look-feed .md-split { gap: 0; }
.md-look-feed .md-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.md-look-feed .md-block { padding-top: 22px; }
.md-look-feed .md-sec-title { font-size: 20px; }

/* Every card is a post. */
.md-look-feed .md-card {
    display: flex; flex-direction: column; gap: 10px; padding: 16px 0; overflow: visible;
    background: transparent; border-radius: 0; box-shadow: none; transform: none; border-bottom: 1px solid var(--md-line);
}
.md-look-feed .md-card .md-card-body { display: contents; }
.md-look-feed .md-card .md-card-top { order: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "badge cat" "badge meta"; column-gap: 10px; row-gap: 0; align-items: center; }
.md-look-feed .md-card .md-badge {
    grid-area: badge; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--tone-bg); color: var(--tone-ink); font: 800 15px/1 var(--md-font);
}
.md-look-feed .md-card .md-cat { grid-area: cat; color: var(--md-ink); font-size: 15px; letter-spacing: 0; text-transform: none; }
.md-look-feed .md-card .md-meta { grid-area: meta; font-size: 13.5px; }
.md-look-feed .md-card .md-card-top:not(:has(.md-cat)) { display: block; }
.md-look-feed .md-card-title { order: 2; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }
.md-look-feed .md-card-excerpt { order: 3; font-size: 15.5px; color: var(--md-soft); }
.md-look-feed .md-card .md-media { order: 4; border-radius: var(--md-radius); border: 1px solid var(--md-line); aspect-ratio: 16 / 10; }
.md-look-feed .md-card .md-read {
    order: 5; display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; padding: 9px 18px; border-radius: var(--md-pill);
    background: var(--md-btn); color: var(--md-btn-ink); font: 700 14px/1 var(--md-font);
}
.md-look-feed .md-card .md-read .md-i { display: none; }
.md-look-feed .md-rank { top: 16px; left: auto; right: 0; }

/* No picture: the story's opening line on a tinted card. */
.md-look-feed .md-card.no-photo .md-media { aspect-ratio: auto; border: 0; background: transparent; }
.md-look-feed .md-card.no-photo .md-cover {
    position: static; display: block; padding: 20px; border-radius: var(--md-radius);
    background: var(--md-accent-soft); color: var(--md-accent-soft-ink);
}
.md-look-feed .md-card.no-photo .md-cover-cat, .md-look-feed .md-card.no-photo .md-cover-mark { display: none; }
.md-look-feed .md-card.no-photo .md-cover-line { display: block; font-size: 22px; line-height: 1.22; }
.md-look-feed .md-card.no-photo .md-cover:not(:has(.md-cover-line)) { display: none; }

/* Rows (lists, related): compact posts without the big media. */
.md-look-feed .md-card--row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 0; }
.md-look-feed .md-card--row .md-card-body { display: flex; flex-direction: column; gap: 6px; padding: 0; }
.md-look-feed .md-card--row .md-card-title { font-size: 17px; }
.md-look-feed .md-card--row .md-read { display: none; }
.md-look-feed .md-card--row .md-media { order: 0; grid-column: 2; grid-row: 1; width: 76px; aspect-ratio: 1 / 1; border-radius: var(--md-radius-sm); }
.md-look-feed .md-card--row.no-photo .md-media { display: none; }
.md-look-feed .md-card--row.no-photo { grid-template-columns: minmax(0, 1fr); }
.md-look-feed .md-grid--cat .md-card--tile { display: flex; padding: 16px 0; }
.md-look-feed .md-grid--cat .md-card--tile .md-media { aspect-ratio: 16 / 10; }
.md-look-feed .md-grid--cat .md-card--tile.no-photo .md-media { aspect-ratio: auto; }
.md-look-feed .md-grid--cat .md-card--tile .md-cover-line { display: block; }
.md-look-feed .md-grid--cat .md-card--tile .md-cover-mark { display: none; }
.md-look-feed .md-grid .md-card--tile .md-meta { display: inline; }
.md-look-feed .md-grid .md-card--tile .md-card-title { font-size: 19px; }

/* Panels and story pieces: flat, divided by lines. */
.md-look-feed .md-panel { box-shadow: none; border: 1px solid var(--md-line); }
.md-look-feed .md-author, .md-look-feed .md-upnext, .md-look-feed .md-parts { border: 0; }
.md-look-feed .md-figure { border: 1px solid var(--md-line); }
.md-look-feed .md-foot { background: var(--md-surface-2); border-top: 0; }
.md-look-feed .md-pages .page-numbers { border: 1px solid var(--md-line); }

@media (min-width: 768px) {
    .md-look-feed .md-home, .md-look-feed .md-feed { max-width: 720px; }
    .md-look-feed .md-nav-in { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
@media (min-width: 1024px) {
    .md-look-feed .md-hero-grid, .md-look-feed .md-split { grid-template-columns: minmax(0, 1fr); }
}