/* El Ciervo Blanco: public site styles.
   Palette from the white stag's forest: mist, birch bark, spruce, lichen and rowan berries.
   Alegreya (serif, text and headings) and Alegreya Sans (interface) are self-hosted; see fonts/OFL.txt. */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Alegreya";
    src: url("fonts/alegreya-latin-wght-normal.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    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;
}
@font-face {
    font-family: "Alegreya";
    src: url("fonts/alegreya-latin-ext-wght-normal.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Alegreya";
    src: url("fonts/alegreya-latin-wght-italic.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
    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;
}
@font-face {
    font-family: "Alegreya";
    src: url("fonts/alegreya-latin-ext-wght-italic.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    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;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("fonts/alegreya-sans-latin-ext-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("fonts/alegreya-sans-latin-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    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;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("fonts/alegreya-sans-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    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;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("fonts/alegreya-sans-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    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;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("fonts/alegreya-sans-latin-ext-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Local fallbacks matched to Alegreya's width and vertical metrics (measured against Georgia and Arial),
   so swapping in the web font barely moves the layout. */
@font-face {
    font-family: "Alegreya Fallback";
    src: local("Georgia"), local("Times New Roman");
    size-adjust: 92%;
    ascent-override: 111%;
    descent-override: 38%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Alegreya Sans Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
    size-adjust: 85%;
    ascent-override: 94%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
    --cb-mist: #eef1ec;
    --cb-birch: #fafbf8;
    --cb-ink: #1a2420;
    --cb-ink-soft: #4a5751;
    --cb-spruce: #23423a;
    --cb-spruce-deep: #1a332c;
    --cb-on-spruce: #eef3ee;
    --cb-on-spruce-soft: #b9cbc3;
    --cb-rowan: #9e2b25;
    --cb-lichen: #5f6e30;
    --cb-rule: #d3dbd3;
    --cb-focus: #9e2b25;

    --cb-serif: "Alegreya", "Alegreya Fallback", Georgia, serif;
    --cb-sans: "Alegreya Sans", "Alegreya Sans Fallback", system-ui, sans-serif;

    --cb-measure: 38rem;
    --cb-wide: 54rem;
    --cb-page: 72rem;
    --cb-gutter: clamp(1rem, 4vw, 2.5rem);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --cb-mist: #14201c;
    --cb-birch: #1b2925;
    --cb-ink: #e2e8e0;
    --cb-ink-soft: #a9b7b0;
    --cb-spruce: #9dbfb2;
    --cb-spruce-deep: #1d352f;
    --cb-on-spruce: #e2e8e0;
    --cb-on-spruce-soft: #9fb3ab;
    --cb-rowan: #e5786c;
    --cb-lichen: #b5c47a;
    --cb-rule: #2c3d37;
    --cb-focus: #e5786c;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cb-mist: #14201c;
        --cb-birch: #1b2925;
        --cb-ink: #e2e8e0;
        --cb-ink-soft: #a9b7b0;
        --cb-spruce: #9dbfb2;
        --cb-spruce-deep: #1d352f;
        --cb-on-spruce: #e2e8e0;
        --cb-on-spruce-soft: #9fb3ab;
        --cb-rowan: #e5786c;
        --cb-lichen: #b5c47a;
        --cb-rule: #2c3d37;
        --cb-focus: #e5786c;
        color-scheme: dark;
    }
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cb-mist);
    color: var(--cb-ink);
    font: 400 1.1875rem/1.75 var(--cb-serif);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--cb-serif); font-weight: 700; line-height: 1.15; text-wrap: balance; }

p { text-wrap: pretty; }

a {
    color: var(--cb-rowan);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

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

img { max-width: 100%; height: auto; }

::selection { background: color-mix(in srgb, var(--cb-lichen) 35%, transparent); }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 10;
    padding: .5rem 1rem;
    background: var(--cb-birch);
    color: var(--cb-ink);
    font: 500 1rem var(--cb-sans);
}
.skip-link:focus { top: 1rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-main { flex: 1; }

/* ---------- Brand ---------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: inherit;
    text-decoration: none;
}
/* Logo (images/logo.png) and its stag head (images/logo-mark.png) are white-on-transparent PNGs used as masks,
   so they take the color of the surface they sit on in both themes. */
.brand__logo, .stag-mark {
    display: block;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
}
.brand__logo { --logo: url("images/logo.png"); height: 4rem; aspect-ratio: 373 / 240; }
.stag-mark { --logo: url("images/logo-mark.png"); aspect-ratio: 211 / 320; }
.brand--small .brand__logo { height: 4.5rem; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--cb-rule); }
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    max-width: var(--cb-page);
    margin: 0 auto;
    padding: .75rem var(--cb-gutter);
    font-family: var(--cb-sans);
}
.site-header .brand { color: var(--cb-spruce); }

/* On the home page the header and the hero form one spruce band. */
.site-header--band { background: var(--cb-spruce-deep); color: var(--cb-on-spruce); border-bottom: 0; }
.site-header--band .brand { color: var(--cb-on-spruce); }

.site-search { margin-left: auto; }
.site-search input {
    width: 15rem;
    padding: .45rem .9rem;
    border: 1px solid var(--cb-rule);
    border-radius: 999px;
    background: var(--cb-birch);
    color: var(--cb-ink);
    font: 400 1rem var(--cb-sans);
}
.site-search input::placeholder { color: var(--cb-ink-soft); }
.site-header--band .site-search input {
    border-color: color-mix(in srgb, var(--cb-on-spruce) 30%, transparent);
    background: color-mix(in srgb, var(--cb-on-spruce) 8%, transparent);
    color: var(--cb-on-spruce);
}
.site-header--band .site-search input::placeholder { color: var(--cb-on-spruce-soft); }

.site-tools { display: flex; align-items: center; gap: .25rem; font-size: 1rem; }
.site-tools a, .theme-toggle {
    display: inline-grid;
    place-items: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: inherit;
    font: 500 1rem var(--cb-sans);
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
}
.site-tools a { color: var(--cb-ink-soft); }
.site-header--band .site-tools a { color: var(--cb-on-spruce-soft); }
.site-tools a:hover, .theme-toggle:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.site-tools a[aria-current="true"] { color: inherit; font-weight: 700; }
.site-header .site-tools a[aria-current="true"] { color: var(--cb-ink); }
.site-header--band .site-tools a[aria-current="true"] { color: var(--cb-on-spruce); }
.site-tools svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle[hidden] { display: none; }
.theme-toggle[aria-pressed="true"] svg { fill: currentColor; }
.site-tools__search { display: none !important; }
/* "Entrar" / the reader's first name; account.js swaps it when there is a session. */
.site-tools a.site-tools__account {
    display: inline-flex;
    gap: .35rem;
    max-width: 11rem;
    padding: 0 .75rem 0 .55rem;
    letter-spacing: 0;
}
.site-tools__account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-tools a.site-tools__account[aria-current="page"] { color: inherit; }

@media (max-width: 40rem) {
    .site-tools a.site-tools__account { padding: 0 .3rem; }
    .site-tools__account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .site-search { display: none; }
    .site-tools { margin-left: auto; }
    .site-tools__search { display: inline-grid !important; }
    .site-header__inner { gap: .5rem; padding-right: calc(var(--cb-gutter) - .4rem); }
    .site-tools { gap: 0; }
    .site-tools a, .theme-toggle { min-width: 2.25rem; padding: 0 .3rem; }
    .brand__logo { height: 3.25rem; }
}

/* ---------- Home hero: the one bold moment ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--cb-spruce-deep);
    color: var(--cb-on-spruce);
}
.hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--cb-page);
    margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 6rem) var(--cb-gutter) clamp(3rem, 8vw, 6.5rem);
}
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    margin: 0 0 1.25rem;
    color: var(--cb-on-spruce-soft);
    font: 400 1.05rem var(--cb-sans);
}
.hero__title {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2.4rem, 6.5vw, 4.75rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
}
.hero__title a { color: inherit; text-decoration: none; }
.hero__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.hero__excerpt {
    max-width: 36rem;
    margin: 1.5rem 0 0;
    color: var(--cb-on-spruce-soft);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    font-size: 1.25rem;
    line-height: 1.6;
}
.hero__cta {
    display: inline-block;
    margin-top: 2rem;
    padding: .7rem 1.4rem;
    border: 1px solid color-mix(in srgb, var(--cb-on-spruce) 45%, transparent);
    border-radius: 999px;
    color: var(--cb-on-spruce);
    font: 500 1.05rem var(--cb-sans);
    text-decoration: none;
}
.hero__cta:hover { background: var(--cb-on-spruce); color: var(--cb-spruce-deep); }
.hero__stag {
    position: absolute;
    top: -6%;
    bottom: -18%;
    right: max(-4rem, calc((100vw - var(--cb-page)) / 2));
    color: var(--cb-on-spruce);
    opacity: .12;
    pointer-events: none;
}
@media (max-width: 40rem) {
    .hero__stag { right: -30%; opacity: .08; }
}

/* ---------- Sections and the article index ---------- */
.page-section {
    max-width: var(--cb-page);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--cb-gutter);
}
.page-section--narrow { max-width: calc(var(--cb-measure) + 2 * var(--cb-gutter)); }
.page-section + .page-section { padding-top: 0; }

.section-title, .page-title { margin: 0 0 1.5rem; color: var(--cb-spruce); }
.section-title { font-size: 1.6rem; }
.page-title { font-size: clamp(2rem, 5vw, 2.75rem); }

.article-index {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 3.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 56rem) {
    .article-index { grid-template-columns: 1fr 1fr; }
}
.article-index__item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--cb-rule);
}
.article-index__date {
    display: flex;
    flex-direction: column;
    padding-top: .3rem;
    color: var(--cb-lichen);
    font: 500 .95rem/1.25 var(--cb-sans);
}
.article-index__year { color: var(--cb-ink-soft); font-weight: 400; }
.article-index__title { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.article-index__title a { color: var(--cb-ink); text-decoration: none; }
.article-index__title a:hover { color: var(--cb-rowan); }
.article-index__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: .5rem 0 0;
    color: var(--cb-ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
}
.article-index__meta { margin: .6rem 0 0; color: var(--cb-ink-soft); font: 400 .9rem var(--cb-sans); }

.page-section__more { margin: 2rem 0 0; font: 500 1.05rem var(--cb-sans); }

/* ---------- Breadcrumbs, archive headers and pagination ---------- */
.breadcrumbs { margin: 0 0 1.25rem; font: 400 .95rem var(--cb-sans); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { color: var(--cb-ink-soft); }
.breadcrumbs li + li::before { content: "›"; margin: 0 .5rem; color: var(--cb-lichen); }
.breadcrumbs a { color: var(--cb-ink-soft); }
.breadcrumbs a:hover { color: var(--cb-rowan); }
.breadcrumbs [aria-current="page"] {
    display: inline-block;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.term-header { margin-bottom: 2rem; }
.term-header .page-title { margin-bottom: .5rem; }
.term-header__kind { margin: 0 0 .35rem; color: var(--cb-lichen); font: 700 .85rem var(--cb-sans); letter-spacing: .08em; text-transform: uppercase; }
.term-header__description { max-width: var(--cb-measure); margin: 0 0 .75rem; color: var(--cb-ink-soft); font-size: 1.15rem; }
.term-header__count { margin: 0; color: var(--cb-ink-soft); font: 400 .95rem var(--cb-sans); }

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cb-rule);
    font: 500 1rem var(--cb-sans);
}
.pagination__status { color: var(--cb-ink-soft); font-weight: 400; }
.pagination__next { margin-left: auto; }

/* ---------- Forms ---------- */
.search-form { display: flex; gap: .5rem; margin: 0 0 1rem; }
.search-form input {
    flex: 1;
    min-width: 0;
    padding: .7rem 1.1rem;
    border: 1px solid var(--cb-rule);
    border-radius: 999px;
    background: var(--cb-birch);
    color: var(--cb-ink);
    font: 400 1.1rem var(--cb-sans);
}
.search-form button {
    padding: .7rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--cb-spruce);
    color: var(--cb-birch);
    font: 700 1.05rem var(--cb-sans);
    cursor: pointer;
}
.search-form button:hover { background: var(--cb-rowan); }
.search-summary { margin: 0; color: var(--cb-ink-soft); font: 400 1.05rem var(--cb-sans); }

/* ---------- Reader account pages ---------- */
.auth { font-family: var(--cb-sans); }
.auth .page-title { margin-bottom: .75rem; }
.auth-form { display: grid; gap: 1.1rem; }
.auth-form[hidden], .auth [hidden] { display: none !important; }
.auth-lead { margin: 0 0 .5rem; color: var(--cb-ink-soft); font: 400 1.1rem/1.55 var(--cb-sans); }
.auth-lead strong { color: var(--cb-ink); font-weight: 500; }
.auth-note, .auth-hint { margin: 0; color: var(--cb-ink-soft); font: 400 .95rem/1.5 var(--cb-sans); }
.auth-hint { margin-top: .35rem; font-size: .9rem; }

.auth-row { display: grid; gap: 1.1rem; }
@media (min-width: 30rem) {
    .auth-row { grid-template-columns: 1fr 1fr; }
}
.auth-field { display: grid; gap: .35rem; }
.auth-field label { color: var(--cb-ink); font: 500 1rem var(--cb-sans); }
.auth-field input {
    width: 100%;
    min-width: 0;
    padding: .7rem 1rem;
    border: 1px solid var(--cb-rule);
    border-radius: 8px;
    background: var(--cb-birch);
    color: var(--cb-ink);
    font: 400 1.1rem var(--cb-sans);
}
.auth-field input:focus-visible { outline-offset: 1px; border-color: var(--cb-focus); }
.auth-field input::placeholder { color: var(--cb-ink-soft); }
.auth-code { max-width: 12rem; font-variant-numeric: tabular-nums; letter-spacing: .3em; }

.auth-check { display: flex; align-items: center; gap: .6rem; color: var(--cb-ink); font: 400 1rem var(--cb-sans); cursor: pointer; }
.auth-check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--cb-spruce); }

.auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--cb-spruce);
    color: var(--cb-birch);
    font: 700 1.05rem var(--cb-sans);
    text-decoration: none;
    cursor: pointer;
}
.auth-button:hover { background: var(--cb-rowan); color: var(--cb-birch); }
.auth-button:disabled { opacity: .6; cursor: progress; }
.auth-button--quiet { border-color: var(--cb-rule); background: none; color: var(--cb-ink); font-weight: 500; }
.auth-button--quiet:hover { border-color: var(--cb-rowan); background: none; color: var(--cb-rowan); }
.auth-button--apple { width: 100%; background: #000; color: #fff; }
.auth-button--apple:hover { background: #2b2b2b; color: #fff; }
.auth-button--apple svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
:root[data-theme="dark"] .auth-button--apple { background: #fff; color: #000; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .auth-button--apple { background: #fff; color: #000; }
}

.auth-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cb-rowan);
    font: 400 1rem var(--cb-sans);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    cursor: pointer;
}
.auth-link:hover { text-decoration-thickness: 2px; }
.auth-link:disabled { opacity: .6; cursor: progress; }
.auth-link--danger { color: var(--cb-rowan); font-weight: 500; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: 1rem; }
.auth-footer { margin: .5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--cb-rule); color: var(--cb-ink-soft); font: 400 1rem var(--cb-sans); }

.auth-message {
    margin: 0;
    padding: .75rem 1rem;
    border-left: 3px solid var(--cb-rowan);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--cb-rowan) 9%, var(--cb-birch));
    color: var(--cb-ink);
    font: 400 1rem/1.5 var(--cb-sans);
}
.auth-message--ok { border-left-color: var(--cb-lichen); background: color-mix(in srgb, var(--cb-lichen) 12%, var(--cb-birch)); }

.auth-providers { display: grid; gap: .75rem; }
.auth-google { display: flex; justify-content: center; min-height: 44px; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: .25rem 0 0; color: var(--cb-ink-soft); font: 400 .95rem var(--cb-sans); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--cb-rule); }

.account { display: grid; gap: 1.5rem; }
.account-panel { padding: 1.5rem; border: 1px solid var(--cb-rule); border-radius: 10px; background: var(--cb-birch); }
.account-panel__title { margin: 0 0 1rem; color: var(--cb-spruce); font-size: 1.4rem; }
.account-panel .auth-field input { background: var(--cb-mist); }
.account-panel .auth-form + .auth-form, .account-panel .auth-note + .auth-form { margin-top: 1rem; }
.account-facts { display: grid; gap: .6rem; margin: 0 0 1.25rem; }
.account-facts div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.account-facts dt { color: var(--cb-ink-soft); }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }
.account-panel > .auth-note { margin-bottom: 1rem; }
@media (max-width: 30rem) {
    .account-facts div { grid-template-columns: 1fr; gap: 0; }
}
.account-state { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.account-chip {
    display: inline-block;
    padding: .1rem .7rem;
    border: 1px solid var(--cb-rule);
    border-radius: 999px;
    color: var(--cb-ink-soft);
    font: 500 .85rem var(--cb-sans);
}
.account-chip--on { border-color: var(--cb-lichen); color: var(--cb-lichen); }
.account-factor { display: grid; gap: .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--cb-rule); }
.account-factor__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.account-factor h3 { margin: 0; font: 700 1.1rem var(--cb-sans); }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.account-setup { display: grid; gap: .75rem; justify-items: start; }
.account-qr { width: 240px; max-width: 100%; height: auto; padding: 8px; border-radius: 8px; background: #fff; }
.account-setup summary { color: var(--cb-rowan); cursor: pointer; }
.account-secret { margin: .5rem 0 0; font: 500 1rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; overflow-wrap: anywhere; }

.empty-state { text-align: center; }
.empty-state__stag { height: 7rem; margin: 0 auto 1rem; color: var(--cb-lichen); }
.empty-state .search-form { max-width: 28rem; margin: 1.5rem auto; }
.empty-state__detail { color: var(--cb-ink-soft); font: .9rem var(--cb-sans); }

/* ---------- Static pages (about, contact, legal) ---------- */
.static-page__header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cb-rule); }
.static-page__header .page-title { margin-bottom: .75rem; }
.static-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    margin: 0;
    color: var(--cb-ink-soft);
    font: 500 .95rem var(--cb-sans);
}

.prose { overflow-wrap: break-word; }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.2rem; }
.prose h2 { margin-top: 2.75rem; color: var(--cb-spruce); font-size: 1.55rem; scroll-margin-top: 1.5rem; }
.prose h3 { margin-top: 2rem; font-size: 1.25rem; }
.prose h2 + *, .prose h3 + * { margin-top: .6rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .4rem; }
.prose li::marker { color: var(--cb-lichen); }
.prose code { padding: .1em .35em; border-radius: 4px; background: var(--cb-birch); font-size: .85em; }
.prose blockquote {
    margin-inline: 0;
    padding: .25rem 0 .25rem 1.4rem;
    border-left: 3px solid var(--cb-lichen);
    color: var(--cb-ink-soft);
    font-size: 1.2rem;
    font-style: italic;
}
.prose blockquote p { margin: 0; }
.prose__lead { color: var(--cb-ink-soft); font-size: 1.25rem; font-style: italic; line-height: 1.5; }
.prose__attribution { margin-top: .35rem !important; font: normal 500 .95rem var(--cb-sans); }
.prose__gloss { color: var(--cb-ink-soft); font-weight: 400; }

/* Sections of the about page: term and description pairs. */
.prose__list { display: grid; gap: 1rem; }
.prose__list div { padding-left: 1rem; border-left: 2px solid var(--cb-rule); }
.prose__list dt { color: var(--cb-spruce); font: 700 1.05rem var(--cb-serif); }
.prose__list dd { margin: .15rem 0 0; }

.prose__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    background: var(--cb-birch);
    font: 500 1.15rem var(--cb-sans);
}
.prose__contact span { color: var(--cb-ink-soft); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

.prose__summary {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--cb-spruce);
    border-radius: 0 6px 6px 0;
    background: var(--cb-birch);
    font: 400 1rem/1.55 var(--cb-sans);
}
.prose__summary p { margin: 0 0 .5rem; }
.prose__summary ul { margin: 0; }

/* Tables scroll sideways inside their own box on narrow screens. */
.prose__table { overflow-x: auto; }
.prose__table table { width: 100%; min-width: 32rem; border-collapse: collapse; font: 400 .95rem/1.45 var(--cb-sans); }
.prose__table th, .prose__table td { padding: .6rem .75rem; border-bottom: 1px solid var(--cb-rule); text-align: left; vertical-align: top; }
.prose__table th { color: var(--cb-spruce); font-weight: 700; }

.auth-note--legal { font-size: .85rem; }

/* ---------- Article ---------- */
.article { padding: clamp(2rem, 6vw, 4.5rem) var(--cb-gutter) 4rem; }
.article__header { max-width: var(--cb-measure); margin: 0 auto 2.5rem; }
.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    margin: 0 0 1rem;
    color: var(--cb-lichen);
    font: 500 1rem var(--cb-sans);
}
.article__meta span { color: var(--cb-ink-soft); font-weight: 400; }
.article__header h1 {
    margin: 0;
    color: var(--cb-spruce);
    font-size: clamp(2.2rem, 5.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.015em;
}
.article__subtitle { margin: 1rem 0 0; color: var(--cb-ink-soft); font-size: 1.35rem; font-style: italic; line-height: 1.45; }
.article__translation { margin: 1.25rem 0 0; font: 500 1rem var(--cb-sans); }

/* The body is a three-track grid: text keeps the reading measure, media may widen. */
.article__body {
    display: grid;
    grid-template-columns: [wide-start] minmax(0, 1fr) [content-start] min(var(--cb-measure), 100%) [content-end] minmax(0, 1fr) [wide-end];
    max-width: var(--cb-wide);
    margin: 0 auto;
}
.article__body > * { grid-column: content; margin-block: 0; }
.article__body > * + * { margin-top: 1.35rem; }
.article__body > .cb-figure,
.article__body > .cb-gallery,
.article__body > .cb-table,
.article__body > .cb-embed,
.article__body > .cb-media-text { grid-column: wide; margin-block: 2.5rem; }

.article__body h2 { margin-top: 3rem; color: var(--cb-spruce); font-size: 1.8rem; }
.article__body h3 { margin-top: 2.5rem; font-size: 1.4rem; }
.article__body h4 { margin-top: 2rem; font: 700 1.1rem var(--cb-sans); }
.article__body h2 + *, .article__body h3 + *, .article__body h4 + * { margin-top: .75rem; }
.article__body hr + h2, .article__body hr + h3 { margin-top: 0; }
.article__body ul, .article__body ol { padding-left: 1.4rem; }
.article__body li + li { margin-top: .35rem; }
.article__body li::marker { color: var(--cb-lichen); }

/* Drop cap on the opening paragraph. */
.article__body > p:first-of-type::first-letter {
    float: left;
    margin: .1em .12em 0 0;
    color: var(--cb-rowan);
    font-size: 3.6em;
    font-weight: 800;
    line-height: .8;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .article__body > p:first-of-type::first-letter {
        float: none;
        margin: 0 .12em 0 0;
        font-size: inherit;
        line-height: inherit;
        -webkit-initial-letter: 3;
        initial-letter: 3;
    }
}

.article__body blockquote {
    padding: .25rem 0 .25rem 1.4rem;
    border-left: 3px solid var(--cb-lichen);
    color: var(--cb-ink-soft);
    font-style: italic;
}
.article__body blockquote > :first-child { margin-top: 0; }
.article__body blockquote > :last-child { margin-bottom: 0; }

/* Section break: a small three-leaf ornament instead of a rule. */
.article__body hr {
    height: 14px;
    margin: 3rem 0;
    border: 0;
    background: var(--cb-lichen);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 14'%3E%3Cpath d='M36 1c3 3 3 9 0 12-3-3-3-9 0-12ZM12 7c2-2 6-2 8 0-2 2-6 2-8 0ZM52 7c2-2 6-2 8 0-2 2-6 2-8 0Z'/%3E%3C/svg%3E") center / auto 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 14'%3E%3Cpath d='M36 1c3 3 3 9 0 12-3-3-3-9 0-12ZM12 7c2-2 6-2 8 0-2 2-6 2-8 0ZM52 7c2-2 6-2 8 0-2 2-6 2-8 0Z'/%3E%3C/svg%3E") center / auto 14px no-repeat;
}

.article__body code { padding: .1em .35em; border-radius: 4px; background: var(--cb-birch); font-size: .9em; }

/* ---------- Content blocks emitted by CiervoBlanco.Content ---------- */
.cb-figure, .cb-quote, .cb-media-text__media { margin: 0; }
.cb-figure img, .cb-media-text__media img { display: block; width: 100%; border-radius: 4px; }
.cb-figure figcaption, .cb-gallery figcaption, .cb-quote figcaption, .cb-media-text__media figcaption {
    max-width: var(--cb-measure);
    margin: .6rem auto 0;
    color: var(--cb-ink-soft);
    font: 400 .95rem/1.5 var(--cb-sans);
}
.cb-credit { opacity: .8; }

.cb-quote { padding: .5rem 0 .5rem 1.6rem; border-left: 3px solid var(--cb-rowan); }
.cb-quote blockquote { margin: 0; padding: 0; border: 0; color: var(--cb-ink); font-size: 1.35rem; line-height: 1.5; }
.cb-quote figcaption { margin: .75rem 0 0; }

.cb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.cb-gallery figure { margin: 0; }
.cb-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }

.cb-verse { padding-left: 1.5rem; font-style: italic; white-space: pre-line; }

.cb-media-text { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 40rem) {
    .cb-media-text { grid-template-columns: 2fr 3fr; }
    .cb-media-text--right .cb-media-text__media { order: 2; }
}

.cb-table { overflow-x: auto; }
.cb-table table { width: 100%; border-collapse: collapse; font: 400 1rem/1.5 var(--cb-sans); }
.cb-table th, .cb-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--cb-rule); text-align: left; vertical-align: top; }
.cb-table th { color: var(--cb-spruce); font-weight: 700; border-bottom-width: 2px; }

.cb-details { padding: .9rem 1.2rem; border: 1px solid var(--cb-rule); border-radius: 6px; background: var(--cb-birch); }
.cb-details summary { cursor: pointer; font: 700 1.05rem var(--cb-sans); color: var(--cb-spruce); }
.cb-details[open] summary { margin-bottom: .5rem; }

.cb-toc {
    padding: 1.1rem 1.4rem;
    border-left: 3px solid var(--cb-spruce);
    background: var(--cb-birch);
    font: 400 1.1rem/1.6 var(--cb-sans);
}
.cb-toc__title { margin: 0 0 .4rem; color: var(--cb-spruce); font-weight: 700; }
.cb-toc ol { margin: 0; padding-left: 1.25rem; }
.cb-toc a { color: var(--cb-ink); text-decoration: none; }
.cb-toc a:hover { color: var(--cb-rowan); text-decoration: underline; }
.cb-toc__sub { margin-left: 1rem; list-style-type: circle; }

/* Clarification bubble: shown on hover, keyboard focus or tap (the span is focusable). Hidden with display so it
   never widens the page while closed; tooltips.js sets --cb-tip-shift when it would leave the viewport. */
.cb-tip {
    position: relative;
    text-decoration: underline dotted var(--cb-lichen);
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
    cursor: help;
}
.cb-tip__bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + .5rem);
    left: var(--cb-tip-shift, 0px);
    z-index: 10;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: .5rem .75rem;
    border-radius: 6px;
    background: var(--cb-spruce-deep);
    color: var(--cb-on-spruce);
    box-shadow: 0 6px 18px rgb(0 0 0 / .18);
    font: 400 .95rem/1.45 var(--cb-sans);
    font-style: normal;
    text-align: left;
    white-space: normal;
}
.cb-tip__bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(1rem - var(--cb-tip-shift, 0px));
    border: 6px solid transparent;
    border-top-color: var(--cb-spruce-deep);
}
.cb-tip:hover .cb-tip__bubble, .cb-tip:focus-within .cb-tip__bubble { display: block; }

.cb-embed { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--cb-spruce-deep); }
.cb-embed__link { padding: 1rem; color: var(--cb-on-spruce); font: 700 1.05rem var(--cb-sans); text-align: center; }

.cb-card a {
    display: grid;
    gap: .2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cb-rule);
    border-radius: 6px;
    background: var(--cb-birch);
    color: var(--cb-ink);
    text-decoration: none;
}
.cb-card a:hover { border-color: var(--cb-rowan); }
.cb-card__kicker { color: var(--cb-lichen); font: 500 .9rem var(--cb-sans); }
.cb-card__title { font-weight: 700; }
.cb-card__excerpt { color: var(--cb-ink-soft); font-size: 1rem; }

.cb-rating { color: #b8862b; font-size: 1.5rem; letter-spacing: .1em; }
.cb-rating__half { opacity: .5; }

.article__sources {
    max-width: var(--cb-measure);
    margin: 4rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cb-rule);
    font: 400 1rem/1.55 var(--cb-sans);
}
.article__sources h2 { margin: 0 0 1rem; color: var(--cb-spruce); font: 700 1.25rem var(--cb-serif); }
.article__sources ul { margin: 0; padding: 0; list-style: none; }
.article__sources li { padding-left: 1.5rem; text-indent: -1.5rem; }
.article__sources li + li { margin-top: .5rem; }

.article__related {
    max-width: var(--cb-measure);
    margin: 4rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cb-rule);
}
.article__related h2 { margin: 0 0 .5rem; color: var(--cb-spruce); font: 700 1.25rem var(--cb-serif); }
/* The reading column is too narrow for the two-column index. */
.article__related .article-index { grid-template-columns: 1fr; }
.article__related .article-index__item:first-child { border-top: 0; }
.article__related .article-index__title { font-size: 1.2rem; }

.article__byline { margin: 1rem 0 0; color: var(--cb-ink-soft); font: 400 1rem var(--cb-sans); }
.article__byline a { font-weight: 500; }

.article__series {
    max-width: var(--cb-measure);
    margin: 3rem auto 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--cb-lichen);
    background: var(--cb-birch);
    font: 400 1rem/1.5 var(--cb-sans);
}
.article__series-title { margin: 0; }
.article__series-title a { font-weight: 700; }
.article__series ul { margin: .75rem 0 0; padding: 0; list-style: none; }
.article__series li + li { margin-top: .4rem; }
.article__series li span { color: var(--cb-ink-soft); }
.article__series li span::after { content: ":"; }

.article__tags { max-width: var(--cb-measure); margin: 2.5rem auto 0; font: 400 1rem var(--cb-sans); }
.article__tags h2 { margin: 0 0 .75rem; color: var(--cb-spruce); font: 700 1.1rem var(--cb-serif); }
.article__tags ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.article__tags a {
    display: inline-block;
    padding: .2rem .75rem;
    border: 1px solid var(--cb-rule);
    border-radius: 999px;
    color: var(--cb-ink);
    text-decoration: none;
}
.article__tags a:hover { border-color: var(--cb-rowan); color: var(--cb-rowan); }

/* ---------- Ads (AdSense units placed by the article page) ---------- */
.ad-slot {
    max-width: var(--cb-measure);
    margin: 2.5rem auto;
    text-align: center;
}
.article__body > .ad-slot { grid-column: wide; width: 100%; max-width: none; margin-block: 2.5rem; }
.ad-slot::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .4rem;
    color: var(--cb-ink-soft);
    font: 500 .75rem var(--cb-sans);
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* Reserved height so the text does not jump when the ad arrives. */
.ad-slot ins.adsbygoogle { min-height: var(--ad-min-mobile, 280px); }
@media (min-width: 40rem) {
    .ad-slot ins.adsbygoogle { min-height: var(--ad-min-desktop, 250px); }
}
/* AdSense marks units it could not fill; give the space back. */
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
/* adsbygoogle.js never ran (ad blocker, network): ads.js flags the page. */
.ads-blocked .ad-slot { display: none; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 2rem; background: var(--cb-spruce-deep); color: var(--cb-on-spruce-soft); }
.site-footer__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem 2rem;
    max-width: var(--cb-page);
    margin: 0 auto;
    padding: 2.25rem var(--cb-gutter);
    font: 400 1rem var(--cb-sans);
}
.site-footer .brand { color: var(--cb-on-spruce); }
.site-footer p { margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--cb-on-spruce); }
.site-footer__social { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__legal { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--cb-on-spruce-soft) 25%, transparent); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.site-footer__copy { grid-column: 1 / 3; font-size: .9rem; }
.site-footer__powered { grid-column: 3; justify-self: end; font-size: .9rem; }
@media (max-width: 48rem) {
    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__copy, .site-footer__powered { grid-column: 1; justify-self: start; }
}

/* ---------- Motion, print ---------- */
@media (prefers-reduced-motion: no-preference) {
    a, .theme-toggle, .hero__cta, .search-form button { transition: color .15s, background-color .15s, text-decoration-thickness .15s; }
}

@media print {
    .site-header, .site-footer, .skip-link, .search-form, .ad-slot { display: none; }
    .prose__table table { min-width: 0; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .article__body { display: block; max-width: none; }
    a { color: inherit; }
    .cb-tip__bubble { display: inline; position: static; padding: 0; background: none; color: inherit; box-shadow: none; font: inherit; }
    .cb-tip__bubble::before { content: " ("; }
    .cb-tip__bubble::after { content: ")"; position: static; border: 0; }
}