/* Noto Serif italic (SIL Open Font License), latin subset, shipped with the app: no font CDN. */
@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-serif-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Tokens from the Observador Design System v0.3 (Figma: Color, Typography, Spacing & Grid · Tokens & Code).
 * Names and values are the system's own; the app only adds the aliases at the end of each block.
 * Two deliberate departures, both for contrast on small text (the system flags both as "a rever"):
 * links use azul/700 in light mode, and meta text uses neutral/600 instead of neutral/500.
 */
:root {
    /* primitivas */
    --neutral-0: #ffffff;
    --neutral-50: #f3f3f3;
    --neutral-100: #eeeeee;
    --neutral-200: #eaeaea;
    --neutral-250: #d1d1d1;
    --neutral-300: #cccccc;
    --neutral-500: #7b8794;
    --neutral-600: #737373;
    --neutral-650: #555555;
    --neutral-700: #444444;
    --neutral-800: #333333;
    --neutral-850: #2c2c2e;
    --neutral-900: #262626;
    --neutral-950: #111111;
    --azul-500: #57a0d7;
    --azul-700: #206dc5;
    --navy-900: #153044;

    /* cores (claro) */
    --cor-texto-principal: var(--neutral-900);
    --cor-texto-secundario: var(--neutral-700);
    --cor-texto-meta: var(--neutral-600);
    --cor-texto-inverso: var(--neutral-0);
    --cor-texto-destaque: var(--azul-700);
    --cor-fundo-pagina: var(--neutral-0);
    --cor-fundo-suave: var(--neutral-100);
    --cor-fundo-subtil: var(--neutral-50);
    --cor-fundo-destaque: var(--azul-500);
    --cor-fundo-destaque-forte: var(--azul-700);
    --cor-fundo-inverso: var(--neutral-900);
    --cor-borda-padrao: var(--neutral-200);
    --cor-borda-forte: var(--neutral-300);
    --cor-borda-foco: var(--azul-500);

    /* dimensões: the system's scale plus 24/32/48 from its proposed 4px scale */
    --espaco-4: 4px;
    --espaco-8: 8px;
    --espaco-12: 12px;
    --espaco-16: 16px;
    --espaco-20: 20px;
    --espaco-24: 24px;
    --espaco-32: 32px;
    --espaco-40: 40px;
    --espaco-48: 48px;
    --raio-sm: 5px;
    --raio-pilula: 999px;

    /* tipografia */
    --font-sans: 'Halyard Text', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Noto Serif', Georgia, serif;

    /* app: the map, which the system has no tokens for */
    --land: #e7e7e5;
    --land-line: var(--neutral-0);
    --dot: var(--azul-500);
    --dot-ref: #a9cbe8;
    --dot-on: var(--navy-900);

    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
}

:root[data-theme='dark'] {
    --cor-texto-principal: var(--neutral-0);
    --cor-texto-secundario: var(--neutral-250);
    --cor-texto-meta: var(--neutral-500);
    --cor-texto-inverso: var(--neutral-900);
    --cor-texto-destaque: var(--azul-500);
    --cor-fundo-pagina: var(--neutral-950);
    --cor-fundo-suave: var(--neutral-900);
    --cor-fundo-subtil: var(--neutral-850);
    --cor-fundo-inverso: var(--neutral-0);
    --cor-borda-padrao: var(--neutral-800);
    --cor-borda-forte: var(--neutral-650);

    --land: #2e2e2e;
    --land-line: var(--neutral-950);
    --dot-ref: #3b6283;
    --dot-on: var(--neutral-0);

    /* Light text on dark blooms with subpixel smoothing (macOS): every weight reads a step bolder. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Keep `hidden` authoritative even on elements given a display. */
[hidden] {
    display: none !important;
}

/* Height is measured from <body>: never give html/body a fixed or viewport height. */
html,
body {
    margin: 0;
    background: transparent;
    color: var(--cor-texto-principal);
}

main {
    padding: var(--espaco-32) 0 var(--espaco-32);
}

/* ---- type ---- */

/* Page title: Titulo/Bloco (30px), Card/Grande (24px) on phones. */
h2 {
    margin: 0 0 var(--espaco-12);
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Group heading: the system's "Título de bloco · Secção", a rule above the title. */
h3 {
    margin: var(--espaco-48) 0 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Subheading inside a detail page. */
h4 {
    margin: var(--espaco-40) 0 var(--espaco-4);
    padding-bottom: var(--espaco-8);
    border-bottom: 1px solid var(--cor-borda-padrao);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cor-texto-meta);
}

p {
    margin: 0 0 var(--espaco-12);
}

a {
    color: var(--cor-texto-destaque);
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 2px solid var(--cor-borda-foco);
    outline-offset: 2px;
}

/* Artigo/Lead. */
.intro {
    max-width: 40rem;
    margin-bottom: 0;
    font-size: 1.125rem;
    line-height: 1.45;
    color: var(--cor-texto-secundario);
}

/* UI/Meta. */
.list-note,
.meta,
.count,
.credit {
    color: var(--cor-texto-meta);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

.list-note {
    margin: var(--espaco-24) 0 0;
}

.subtitle {
    margin: 0 0 var(--espaco-12);
    color: var(--cor-texto-secundario);
    line-height: 1.4;
}

.empty {
    color: var(--cor-texto-meta);
    padding: var(--espaco-32) 0;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--cor-texto-destaque);
    text-decoration: underline;
}

/* Etiqueta: "Patrocinado" look for kinds (Pergunta de ouvinte, Atualidade…). */
.tag {
    display: inline-block;
    font-size: 0.6875rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cor-texto-meta);
    background: var(--cor-fundo-subtil);
    border-radius: var(--raio-sm);
    padding: 3px 6px;
    vertical-align: 1px;
}

/* Etiqueta "Em direto" look: a blue dot and the word, for recommendations. */
.tag.rec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    color: var(--cor-texto-destaque);
    font-size: 0.75rem;
    font-weight: 600;
}

.tag.rec::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* ---- buttons (Botão: Primário, Secundário; size S) ---- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--espaco-8) var(--espaco-12);
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--cor-fundo-destaque-forte);
    color: var(--neutral-0);
}

.btn-primary:hover {
    background: var(--navy-900);
}

:root[data-theme='dark'] .btn-primary:hover {
    background: var(--cor-fundo-destaque);
    color: var(--neutral-950);
}

.btn-secondary {
    background: transparent;
    border-color: var(--cor-borda-forte);
    color: var(--cor-texto-principal);
}

.btn-secondary:hover {
    border-color: var(--cor-texto-principal);
}

/* A listening link: a small play glyph before the words. */
.play {
    white-space: nowrap;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}

.play::before {
    content: '';
    display: inline-block;
    width: 0.62em;
    height: 0.72em;
    margin-right: 0.45em;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.play:hover {
    text-decoration: underline;
}

.play.btn::before {
    margin-right: 0;
}

.play .time {
    font-variant-numeric: tabular-nums;
}

/* "Ver mais": the system's list-closing link, a rule and a centred label. */
.more {
    display: block;
    width: 100%;
    margin-top: var(--espaco-16);
    padding: var(--espaco-12) 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--cor-borda-forte);
    color: var(--cor-texto-principal);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

.more::after {
    content: ' →';
    display: inline-block;
    transform: rotate(90deg);
    margin-left: 0.4em;
}

.more:hover {
    color: var(--cor-texto-destaque);
}

/* ---- own tabs (only without a host tab bar): Item de navegação ---- */

.own-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-4) var(--espaco-24);
    border-bottom: 1px solid var(--cor-borda-padrao);
    padding-top: var(--espaco-8);
}

.own-tabs button {
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    font-size: 0.9375rem;
    padding: var(--espaco-12) 0;
}

.own-tabs button:hover {
    color: var(--cor-texto-destaque);
}

.own-tabs button[aria-current='true'] {
    color: var(--cor-texto-destaque);
    border-bottom-color: currentColor;
    font-weight: 600;
}

/* ---- toolbars, search and toggles ---- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-12) var(--espaco-24);
    align-items: center;
    margin: var(--espaco-24) 0 0;
}

/* Campo de texto. */
input[type='search'] {
    font: inherit;
    font-size: 0.9375rem;
    color: inherit;
    background: transparent;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-sm);
    padding: 10px var(--espaco-12);
    width: 100%;
    max-width: 22rem;
    box-sizing: border-box;
}

input[type='search']::placeholder {
    color: var(--cor-texto-meta);
}

input[type='search']:focus-visible {
    outline: 2px solid var(--cor-borda-foco);
    outline-offset: -1px;
    border-color: var(--cor-borda-foco);
}

input[type='checkbox'] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cor-fundo-destaque-forte);
}

/* A set of pills: the system's topic chips (pílula), filled when chosen. */
.toggle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-8);
}

.pill {
    border: 0;
    background: var(--cor-fundo-suave);
    border-radius: var(--raio-pilula);
    padding: 7px 14px;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.pill:hover {
    background: var(--cor-borda-forte);
}

.pill[aria-pressed='true'] {
    background: var(--cor-fundo-inverso);
    color: var(--cor-texto-inverso);
    font-weight: 600;
}

.check {
    display: inline-flex;
    gap: var(--espaco-8);
    align-items: center;
    font-size: 0.875rem;
    margin: var(--espaco-12) 0;
    cursor: pointer;
}

/* ---- section bar ---- */

/* Our own section bar, opened directly only: there the page scrolls itself, so CSS sticky works. */
.own-sections {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: var(--espaco-4);
    overflow-x: auto;
    padding: var(--espaco-8) 0;
    background: var(--cor-fundo-pagina);
    border-bottom: 1px solid var(--cor-borda-padrao);
}

.own-sections a {
    flex: none;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding: 6px 10px;
    border-radius: var(--raio-sm);
    color: inherit;
    text-decoration: none;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.own-sections a:hover {
    background: var(--cor-fundo-subtil);
}

.own-sections a span {
    max-width: 8.5em;
}

.own-sections small {
    color: var(--cor-texto-meta);
}

/* ---- group headings ---- */

.list-section {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espaco-4) var(--espaco-12);
    padding-top: var(--espaco-12);
    border-top: 2px solid var(--cor-texto-principal);
    scroll-margin-top: 64px;
}

/* The first group follows a toolbar or a note, which already leaves room. */
[data-root] > .list-section:first-child,
[data-root] > .epoch:first-child > .list-section {
    margin-top: var(--espaco-32);
}

/* ---- timeline: Item de lista (marcador + título) ---- */

.episode {
    border-bottom: 1px solid var(--cor-borda-padrao);
}

.list-section + .episode > summary {
    padding-top: var(--espaco-20);
}

.episode > summary {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    gap: var(--espaco-16);
    align-items: start;
    padding: var(--espaco-16) 0;
    cursor: pointer;
    list-style: none;
}

.episode > summary::-webkit-details-marker {
    display: none;
}

/* A plus that turns into a minus: the row opens. */
.episode > summary::after {
    content: '';
    width: 10px;
    height: 10px;
    margin: 5px 2px 0 0;
    background:
        linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
    color: var(--cor-texto-meta);
    transition: transform 0.15s ease;
}

.episode[open] > summary::after {
    background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat;
}

.period {
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto-destaque);
    line-height: 1.45;
}

.episode-main {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
    min-width: 0;
}

/* Card/Pequeno. */
.episode-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.episode > summary:hover .episode-title {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.episode-body {
    max-width: 42rem;
    padding: 0 0 var(--espaco-24) calc(7rem + var(--espaco-16));
}

.episode-body > p {
    margin-bottom: var(--espaco-16);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--cor-texto-secundario);
}

.chapters {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--espaco-16);
    border-left: 2px solid var(--cor-borda-padrao);
}

.chapters li {
    padding: var(--espaco-8) 0 var(--espaco-8) var(--espaco-16);
}

.chapters li + li {
    margin-top: var(--espaco-4);
}

.chapter-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-4) var(--espaco-8);
    align-items: baseline;
}

.chapter-head strong {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.chapters p {
    margin: var(--espaco-4) 0 var(--espaco-8);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cor-texto-secundario);
}

.links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espaco-8) var(--espaco-16);
    margin: 0;
}

/* Related people, places and works: topic pills. */
.chips {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--espaco-20);
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-8);
}

.chip {
    border: 0;
    border-radius: var(--raio-pilula);
    padding: 5px 12px;
    font-size: 0.8125rem;
    line-height: 1.2;
    background: var(--cor-fundo-suave);
}

.chip-obra {
    font-style: italic;
}

.chip:hover {
    background: var(--cor-borda-forte);
}

/* ---- people ---- */

.people {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    column-gap: var(--espaco-32);
}

.list-section + .people {
    margin-top: var(--espaco-8);
}

.people li {
    border-bottom: 1px solid var(--cor-borda-padrao);
}

.person {
    display: flex;
    align-items: center;
    gap: var(--espaco-16);
    width: 100%;
    background: none;
    border: 0;
    padding: var(--espaco-12) 0;
    text-align: left;
}

.person-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Historians: a plain list, one column, no portraits. */
.people.plain {
    grid-template-columns: minmax(0, 1fr);
    max-width: 36rem;
}

.person.plain {
    padding: var(--espaco-12) 0;
}

/* Avatar S (48) in lists, L in the detail head; fundo/suave behind. */
.portrait,
.detail-portrait {
    display: block;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
}

.portrait img,
.detail-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    border-radius: 50%;
    background: var(--cor-fundo-suave);
    filter: grayscale(0.2);
}

.initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--cor-fundo-suave);
    color: var(--cor-texto-meta);
    font-size: 0.9375rem;
    font-weight: 600;
}

.initials.big {
    font-size: 2.25rem;
}

/* Card/Pequeno. */
.person-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.person:hover .person-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- detail page ---- */

.detail {
    max-width: 46rem;
    margin-top: var(--espaco-24);
    scroll-margin-top: 12px;
    outline: none;
}

.back {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-4);
    background: none;
    border: 0;
    padding: var(--espaco-4) 0;
    margin-bottom: var(--espaco-24);
    color: var(--cor-texto-destaque);
    font-size: 0.875rem;
    font-weight: 600;
}

.back:hover {
    text-decoration: underline;
}

.link-row {
    background: none;
    border: 0;
    padding: var(--espaco-8) 0;
    text-align: left;
    line-height: 1.35;
}

.link-row > span:first-child {
    font-weight: 600;
}

.link-row:hover > span:first-child {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.plain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-head {
    display: flex;
    gap: var(--espaco-24);
    align-items: center;
    padding-bottom: var(--espaco-8);
}

.detail-head .detail-portrait {
    flex: 0 0 128px;
    width: 128px;
    height: 128px;
}

.detail-head h3 {
    margin: 0 0 var(--espaco-8);
    padding: 0;
    border: 0;
    font-size: 1.875rem;
    letter-spacing: -0.01em;
}

.mentions {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mentions li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-4);
    padding: var(--espaco-20) 0;
    border-bottom: 1px solid var(--cor-borda-padrao);
}

.mention-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
}

.mention-title:hover {
    text-decoration: underline;
}

.mentions p {
    margin: var(--espaco-8) 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--cor-texto-secundario);
}

.mentions .play {
    margin-top: var(--espaco-8);
}

/* A passage from the transcript: the hosts' words, in the same serif as the listeners' questions. */
blockquote {
    margin: var(--espaco-8) 0 0;
    padding-left: var(--espaco-16);
    border-left: 2px solid var(--cor-fundo-destaque);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--cor-texto-secundario);
}

.refs {
    margin-top: var(--espaco-32);
}

.refs > summary {
    cursor: pointer;
    padding: var(--espaco-12) 0;
    border-bottom: 1px solid var(--cor-borda-padrao);
    font-size: 0.9375rem;
    font-weight: 600;
}

.refs > summary:hover {
    color: var(--cor-texto-destaque);
}

.credit {
    margin-top: var(--espaco-24);
    font-size: 0.6875rem;
}

/* ---- map ---- */

/* Desktop: map and list side by side; the list scrolls in its column, as tall as the map. */
@media (min-width: 900px) {
    .map-layout {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(17rem, 2fr);
        gap: var(--espaco-32);
        align-items: start;
    }

    .map-layout .map {
        aspect-ratio: 1.45;
    }

    .map-side {
        margin-top: var(--espaco-24);
        max-height: var(--map-h, 560px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: var(--espaco-8);
    }

    .map-side .toolbar {
        margin-top: 0;
    }

    .map-side .list-note {
        margin-top: var(--espaco-16);
    }

    .map-side .place-list {
        columns: 1;
    }

    .map-side .detail {
        margin-top: 0;
    }
}

.map-frame {
    position: relative;
    margin-top: var(--espaco-24);
    background: var(--cor-fundo-subtil);
    border-radius: var(--raio-sm);
    overflow: hidden;
}

.map {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2;
    touch-action: none; /* the map handles its own pan and pinch */
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.map:active {
    cursor: grabbing;
}

.map-controls {
    position: absolute;
    top: var(--espaco-12);
    right: var(--espaco-12);
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
}

.map-controls button {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    background: var(--cor-fundo-pagina);
    color: var(--cor-texto-principal);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-sm);
}

.map-controls button:hover {
    border-color: var(--cor-texto-principal);
}

.land {
    fill: var(--land);
    stroke: var(--land-line);
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
}

.dot {
    fill: var(--dot);
    fill-opacity: 0.85;
    stroke: var(--cor-fundo-subtil);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.dot.ref {
    fill: var(--dot-ref);
}

.dot:hover,
.dot:focus,
.dot.on {
    fill: var(--dot-on);
    fill-opacity: 1;
    outline: none;
}

.labels text {
    fill: var(--cor-texto-principal);
    stroke: var(--cor-fundo-subtil);
    paint-order: stroke;
    stroke-linejoin: round;
    font-weight: 600;
    pointer-events: none;
}

.place-list {
    list-style: none;
    padding: 0;
    margin: var(--espaco-8) 0 0;
    columns: 2 14rem;
    column-gap: var(--espaco-32);
}

.place-list li {
    break-inside: avoid;
    border-bottom: 1px solid var(--cor-borda-padrao);
}

.place-list .link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--espaco-8);
    width: 100%;
    padding: 10px 0;
}

/* ---- questions ---- */

.questions {
    list-style: none;
    padding: 0;
    margin: var(--espaco-24) 0 0;
    border-top: 2px solid var(--cor-texto-principal);
}

.question {
    padding: var(--espaco-32) 0;
    border-bottom: 1px solid var(--cor-borda-padrao);
}

/* The listener's own words: Artigo/Citação, set down a size for a list. */
.question .q {
    margin: 0 0 var(--espaco-16);
    padding: 0;
    border: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--cor-texto-principal);
    max-width: 36em;
}

.q-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-4) var(--espaco-16);
    margin: 0 0 var(--espaco-12);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.q-meta div {
    display: flex;
    gap: 6px;
    min-width: 0;
}

.q-meta dt {
    color: var(--cor-texto-meta);
}

.q-meta dd {
    margin: 0;
}

.q-meta a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.q-meta a:hover {
    text-decoration: underline;
}

.q-actions {
    margin: 0;
}

/* Desktop: the question on the left, its details in a column of their own. */
@media (min-width: 760px) {
    .question {
        display: grid;
        grid-template-columns: minmax(0, 40rem) 15rem;
        grid-template-rows: auto 1fr;
        justify-content: start;
        column-gap: var(--espaco-48);
    }

    .question .q {
        grid-row: 1 / span 2;
        margin: 0;
    }

    .q-meta {
        flex-direction: column;
        gap: var(--espaco-12);
        margin-bottom: var(--espaco-16);
    }

    .q-meta div {
        flex-direction: column;
        gap: 2px;
    }

    /* UI/Tópico. */
    .q-meta dt {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
}

/* ---- works: Card de notícia · Texto (no image) ---- */

.works {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--espaco-8) var(--espaco-32);
    margin: var(--espaco-8) 0 0;
}

.work {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-8);
    padding: var(--espaco-16) 0 var(--espaco-20);
    border-bottom: 1px solid var(--cor-borda-padrao);
}

.work-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-4);
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
}

.work-title {
    font-style: italic;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.3;
}

.work-open:hover .work-title {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Card/Lead. */
.work p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--cor-texto-secundario);
}

.work p.meta {
    margin-top: auto;
    padding-top: var(--espaco-4);
    color: var(--cor-texto-meta);
    font-size: 0.8125rem;
}

/* ---- footer ---- */

.about {
    margin-top: var(--espaco-48);
    padding-top: var(--espaco-16);
    border-top: 1px solid var(--cor-borda-padrao);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cor-texto-meta);
}

.about summary {
    cursor: pointer;
    font-weight: 600;
}

.about summary:hover {
    color: var(--cor-texto-principal);
}

.about details[open] summary {
    margin-bottom: var(--espaco-12);
}

.about p {
    max-width: 40rem;
}

/* ---- phones ---- */

@media (max-width: 560px) {
    main {
        padding-top: var(--espaco-24);
    }

    h2,
    .detail-head h3 {
        font-size: 1.5rem;
    }

    h3 {
        margin-top: var(--espaco-40);
        font-size: 1.25rem;
    }

    .intro {
        font-size: 1rem;
    }

    .episode > summary {
        grid-template-columns: 4.75rem minmax(0, 1fr) auto;
        gap: var(--espaco-12);
    }

    .episode-body {
        padding-left: 0;
    }

    .period {
        font-size: 0.8125rem;
    }

    .detail-head {
        gap: var(--espaco-16);
    }

    .detail-head .detail-portrait {
        flex-basis: 88px;
        width: 88px;
        height: 88px;
    }

    .question .q {
        font-size: 1.125rem;
    }

    .map {
        aspect-ratio: 1.1;
    }
}

.nowrap {
    white-space: nowrap;
}