/* ==========================================================================
   Components — Buttons, Cards, Forms, Article styles (Ruki theme)
   ========================================================================== */

/* ==========================================================================
   Buttons (Ruki: 25px radius, red bg, 15px 30px padding)
   ========================================================================== */

.btn, .button, button, input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 15px 30px;
    border-radius: var(--radius-btn);
    font-family: var(--font-title);
    font-size: var(--text-size-body);
    font-weight: var(--weight-black);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-btn);
    user-select: none;
    background: var(--brand-red);
    color: var(--white);
}

.btn:hover, .button:hover, button:hover, input[type="submit"]:hover {
    text-decoration: none;
    opacity: 0.9;
}

.btn:active, .button:active, button:active, input[type="submit"]:active {
    transform: scale(var(--btn-active-scale));
}

.btn:disabled, .btn.disabled, button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 1. Primary Filled (red) */
.btn-primary {
    background: var(--brand-red);
    color: var(--white);
}

.btn-primary:hover {
    opacity: 0.9;
}

/* 2. Outlined */
.btn-outline {
    background: transparent;
    color: var(--brand-red);
    border: 2px solid var(--brand-red);
}

.btn-outline:hover {
    background: var(--brand-red);
    color: var(--white);
}

/* 3. Dark Filled */
.btn-dark {
    background: var(--very-dark-grey);
    color: var(--white);
}

.btn-dark:hover {
    opacity: 0.9;
}

/* 4. Dark Outlined */
.btn-dark-outline {
    background: transparent;
    color: var(--very-dark-grey);
    border: 2px solid var(--very-dark-grey);
}

.btn-dark-outline:hover {
    background: var(--very-dark-grey);
    color: var(--white);
}

/* 5. White on colored bg */
.btn-white {
    background: var(--white);
    color: var(--brand-red);
    border: 2px solid var(--white);
}

.btn-white:hover {
    opacity: 0.9;
}

/* 6. White outlined on dark */
.btn-white-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-white-outline:hover {
    background: var(--white);
    color: var(--brand-red);
}

/* 7. Small button */
.btn-sm {
    padding: 7px 12px;
    font-size: var(--text-size-micro);
    border-radius: var(--radius-misc);
}

/* 8. Large CTA */
.btn-lg {
    padding: 18px 40px;
    font-size: 1.125rem;
}

/* Button row */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ==========================================================================
   Cards (Ruki: white bg, 7px radius, subtle shadow)
   ========================================================================== */

.card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 15px;
}

.card-padded {
    padding: 30px;
}

.card-clickable {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-clickable:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}

.card img:first-child {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    width: calc(100% + 60px);
    height: auto;
}

/* ==========================================================================
   Card Grid
   ========================================================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ==========================================================================
   Translation Note
   ========================================================================== */

.translation-note {
    background: var(--very-light-bg);
    border-left: 4px solid var(--brand-red);
    padding: var(--space-2) var(--space-3);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    margin-bottom: var(--space-4);
    font-size: var(--text-size-small);
    color: var(--text-heading);
}

.translation-note a {
    font-weight: var(--weight-black);
}

/* ==========================================================================
   PDF Download Link
   ========================================================================== */

.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 12px 24px;
    border-radius: var(--radius-btn);
    background: var(--brand-red);
    color: var(--white);
    font-size: var(--text-size-small);
    font-weight: var(--weight-black);
    font-family: var(--font-title);
    text-decoration: none;
    transition: var(--transition-btn);
    margin-top: var(--space-2);
}

.pdf-link:active {
    transform: scale(var(--btn-active-scale));
}

.pdf-link:hover {
    text-decoration: none;
    opacity: 0.9;
    color: var(--white);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
    text-align: center;
    padding: var(--space-7) 0 var(--space-5);
}

.hero-title {
    font-size: var(--text-size-entry);
    font-weight: var(--weight-black);
    color: var(--text-heading);
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--line-height-compact);
    margin-bottom: var(--space-3);
    font-family: var(--font-title);
}

.hero-tagline {
    font-size: var(--text-size-body);
    color: var(--medium-grey);
    max-width: 640px;
    margin: 0 auto;
}

/* ==========================================================================
   Feature Band (dark strip)
   ========================================================================== */

/* 3.1: was `<section class="section-white" style="background: var(--very-dark-grey);
   padding: 60px 0;">` with `style="color: var(--white)"` on the title/body
   below -- moved into classes so home.html carries no inline styles. */
.feature-band-section {
    background: var(--very-dark-grey);
    padding: var(--space-7) 0;
}

.feature-band-section .feature-band-title {
    color: var(--white);
}

.feature-band-section .feature-band-body {
    color: rgba(255, 255, 255, 0.7);
}

.feature-band {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.feature-band-text {
    flex: 3;
}

.feature-band-media {
    flex: 2;
}

.feature-band-media img {
    border-radius: var(--radius-card);
}

.feature-band-title {
    font-size: var(--text-size-h2);
    font-weight: var(--weight-black);
    color: var(--text-heading);
    margin-bottom: var(--space-2);
    letter-spacing: var(--letter-spacing-heading);
}

.feature-band-body {
    font-size: var(--text-size-body);
    color: var(--medium-grey);
    margin-bottom: var(--space-3);
}

/* ==========================================================================
    Post Thumbnail (Ruki: full-width, border-radius on top)
    ========================================================================== */

.post-thumbnail {
    width: 100%;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    position: relative;
    overflow: hidden;
    margin: 0;
}

.post-thumbnail img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    object-fit: cover;
}

/* ==========================================================================
    Entry Components (Ruki single post)
    ========================================================================== */

.entry-header {
    padding: 30px 30px 0 30px;
    width: 100%;
    position: relative;
}

.has-post-thumbnail .entry-header {
    padding: 20px 30px 0 30px;
}

.entry-title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-black);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    color: var(--single-entry-title-color);
}

/* Single post entry title size */
.single-post .entry-title {
    font-size: var(--text-size-h1);
}

.entry-title span {
    display: block;
}

.entry-title a {
    text-decoration: none;
    color: var(--entry-title-link-color);
}

.entry-title a:hover {
    color: var(--link-hover-color);
}

/* ---- Entry Meta ---- */
.entry-meta {
    font-size: 13px;
    color: var(--entry-meta-color);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    text-transform: capitalize;
}

.entry-meta.before-title {
    margin-bottom: 15px;
}

.entry-meta.after-title {
    margin-top: 20px;
    font-size: var(--text-size-small);
}

/* Category badge pill (red, floating over thumbnail top-left) */
.entry-meta.before-title ul li {
    display: inline-block;
}

.flex-box .entry-meta.before-title ul li:not(.category-list),
article.single-post .entry-meta.before-title ul li:not(.category-list) {
    display: inline-block;
    margin-right: 3px;
    margin-bottom: 3px;
    padding: 0;
    line-height: 1;
}

.flex-box .entry-meta.before-title ul li:not(.category-list) a,
article.single-post .entry-meta.before-title ul li:not(.category-list) a {
    background: var(--brand-red);
    color: var(--white);
    padding: 7px 10px;
    border-radius: var(--radius-misc);
    display: block;
    margin: 0;
}

.entry-meta.before-title a {
    color: var(--white);
}

.entry-header .entry-meta.before-title ul.author-category-meta li.category-prepend {
    display: none;
}

.entry-meta a {
    text-decoration: none;
    display: inline-block;
    margin: 2px 0;
    color: var(--entry-meta-link-color);
}

.single-post .entry-meta a {
    color: var(--single-entry-meta-link);
}

.entry-meta ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entry-meta ul li:not(.category-list) {
    display: inline-block;
    padding: 3px 0 0 0;
    margin: 0;
}

.entry-meta ul li.category-list {
    padding-left: 0;
    margin-bottom: 0;
}

.entry-meta ul li.post-categories {
    display: inline-block;
}

.entry-meta ul li.post-categories ul {
    margin: 0;
    padding: 0;
}

.entry-meta ul li.post-categories ul li {
    display: inline-block;
    padding-left: 0;
    margin-bottom: 0;
}

.entry-meta ul li:not(.category-list):not(:last-child)::after {
    content: "\2015";
    margin: 0 3px;
    color: var(--medium-grey);
    font-weight: 500;
}

.entry-author-meta {
    font-weight: var(--weight-black);
}

/* Category badge overrides — single post */
.single-post:not(.cover) .entry-meta.before-title ul li:not(.category-list) {
    border-radius: var(--radius-misc);
    border: 3px solid var(--single-post-bg);
    background: var(--single-post-bg);
}

/* Float badge over thumbnail */
.has-post-thumbnail:not(.cover):not(.single-post) .entry-meta.before-title {
    margin-top: -34px;
    margin-left: -3px;
}

.single-post.has-post-thumbnail .entry-meta.before-title {
    margin-top: -34px;
    padding-right: 150px;
}

.flex-box.has-post-thumbnail .entry-meta.before-title ul li:not(.category-list) {
    border-radius: var(--radius-misc);
    border: 3px solid var(--post-background);
    background: var(--post-background);
}

/* ---- Entry Content (single post body) ---- */
.entry-content {
    color: var(--excerpt-color);
    margin: 0;
    font-family: var(--font-sans);
    padding: 0 30px;
    width: 100%;
}

.has-post-thumbnail .entry-content {
    padding: 10px 30px 0 30px;
}

.single-post .entry-content {
    color: var(--single-entry-font-color);
}

.entry-content p {
    margin: 0 0 25px 0;
}

.entry-content cite {
    color: var(--medium-grey);
    font-style: normal;
    font-size: 1rem;
    font-weight: var(--weight-bold);
}

.entry-content cite::before {
    content: "\2015";
    margin-right: 5px;
    color: var(--medium-grey);
    font-weight: 500;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--single-entry-title-color);
    font-family: var(--font-title);
    font-weight: var(--weight-black);
    letter-spacing: var(--letter-spacing-heading);
    scroll-margin-top: 80px;
}

.entry-content h2 { font-size: var(--text-size-h2); }
.entry-content h3 { font-size: var(--text-size-h3); line-height: 1.5; }
.entry-content h4 { font-size: var(--text-size-h4); }

.entry-content blockquote {
    font-family: var(--font-title);
    font-size: 2.25rem;
    line-height: var(--line-height-compact);
    font-weight: var(--weight-black);
    margin: 50px 0;
    color: var(--brand-red);
    letter-spacing: var(--letter-spacing-heading);
    padding: 0 30px;
    border: none;
    font-style: normal;
}

.entry-content hr:not(.wp-block-separator),
.entry-content hr {
    border: 0;
    height: 1px;
    background: var(--light-border-color);
    margin: 30px 0;
}

.entry-content ul,
.entry-content ol {
    margin: 30px 10px 30px 40px;
    padding: 0;
}

.entry-content ul { list-style: none; }

.entry-content ol li,
.entry-content ul li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px;
}

.entry-content li > ul,
.entry-content li > ol {
    margin-bottom: 10px;
    margin-left: 30px;
    margin-top: 10px;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    margin: var(--space-3) 0;
}

/* PDF button in entry */
.entry-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 30px;
}

.entry-content .wp-block-button__link {
    border: 0;
    background: var(--brand-red);
    color: var(--white);
    padding: 15px 30px;
    font-weight: var(--weight-bold);
    font-size: 1rem;
    font-family: var(--font-title);
    border-radius: var(--radius-button);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.entry-content .wp-block-button__link:hover {
    opacity: 0.9;
}

.entry-content div[class*="wp-block"]:last-child {
    margin-bottom: 30px;
}

/* ---- WordPress block styles (for scraped article body content) ---- */

.entry-content .has-text-align-justify {
    text-align: justify;
}

.entry-content .has-text-align-center {
    text-align: center;
}

.entry-content .has-text-align-right {
    text-align: right;
}

.entry-content .has-large-font-size {
    font-size: 2.25rem;
}

.entry-content .has-medium-font-size {
    font-size: 1.25rem;
}

.entry-content .has-small-font-size {
    font-size: 0.8125rem;
}

.entry-content .wp-block-separator {
    border: 0;
    height: 1px;
    background: var(--light-border-color);
    margin: 30px 0;
}

.entry-content .wp-block-separator.has-alpha-channel-opacity {
    opacity: 1;
}

.entry-content .wp-block-buttons.is-layout-flex {
    display: flex;
}

/* ==========================================================================
    Single Post Card (THE POST wrapper — Ruki .the-post > .single-post.card)
    ========================================================================== */

.the-post .single-post {
    margin-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: none;
    box-shadow: none;
}

.the-post .single-post.card {
    background: var(--single-post-bg);
    box-shadow: var(--shadow-card);
    padding-bottom: 0;
}

.the-post .single-post.card:not(.has-post-share) {
    border-radius: var(--radius-card);
    padding-bottom: 5px;
    margin-bottom: 30px;
}

.the-post .single-post .entry-content,
.the-post .single-post .entry-header {
    max-width: 915px;
    margin: auto;
    width: 100%;
    padding: 20px 30px 20px 30px;
}

.the-post .single-post .entry-header {
    padding-bottom: 0;
}

/* ---- Hentry Footer (Ruki: tags + share) ---- */

.hentry-footer {
    width: 100%;
    max-width: 915px;
    padding: 0 30px 30px 30px;
    margin: 15px auto 30px auto;
    color: var(--medium-grey);
    font-family: var(--font-sans);
    text-align: center;
    position: relative;
    background: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.hentry-footer.card {
    background: var(--single-post-bg);
    z-index: 2;
    box-shadow: var(--shadow-card);
}

/* White bar to cover gap between post card bottom shadow and footer top */
.hentry-footer.card::before {
    position: absolute;
    top: -15px;
    left: 0;
    content: '';
    width: 100%;
    height: 15px;
    background: var(--single-post-bg);
}

/* Has content (share or tags) */
.hentry-footer[class*="has"] {
    padding-top: 30px;
    padding-bottom: 24px;
}

/* Center line separator at top */
.hentry-footer[class*="has"]::after {
    content: '';
    width: 160px;
    height: 1px;
    background: var(--light-border-color);
    position: absolute;
    top: 0;
    left: calc(50% - 80px);
}

.hentry-footer .share.bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.share .share-text {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--medium-grey);
    font-family: var(--font-sans);
    padding-bottom: 10px;
    padding-left: 0;
}

.hentry-footer .share-text,
.hentry-footer .share.side {
    display: none;
}

.hentry-footer .share .share-text {
    margin-right: 0;
    font-weight: var(--weight-regular);
}

/* ---- Social Icons (Ruki circular theme-colored buttons) ---- */

ul.social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-transform: capitalize;
}

.hentry-footer ul.social-icons {
    margin-top: 0;
    margin-bottom: 0;
    gap: 8px;
}

.hentry-footer ul.social-icons li.social-icon {
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    border: 0;
}

ul.social-icons.icon-background li.social-icon a {
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--theme-color-1);
    transition: opacity 0.2s ease;
}

ul.social-icons.icon-background.theme li.social-icon a {
    background: var(--theme-color-1);
}

ul.social-icons.icon-background.theme li.social-icon a:hover {
    opacity: 0.85;
    color: var(--white);
}

ul.social-icons li.social-icon i {
    font-size: 16px;
    vertical-align: middle;
}

ul.social-icons li.social-icon a span {
    font-family: var(--font-title);
    font-weight: var(--weight-black);
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1;
}

/* Brand-specific social icon colors */
ul.social-icons.icon-background.theme li.social-icon.facebook a { background: #1877f2; }
ul.social-icons.icon-background.theme li.social-icon.twitter a  { background: #000000; }
ul.social-icons.icon-background.theme li.social-icon.linkedin a  { background: #0077b5; }
ul.social-icons.icon-background.theme li.social-icon.whatsapp a  { background: #25d366; }

/* ==========================================================================
    Flex Grid / Card Grid (for post listings — Ruki .flex-grid > .flex-box)
    ========================================================================== */

.flex-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-grow: 1;
}

.flex-grid .flex-box {
    position: relative;
    margin: 15px;
    background: var(--post-background);
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding-bottom: 30px;
}

/* 3 per row default */
.cols-3 .flex-box {
    width: calc(100% / 3 - 30px);
}

.cols-3 .flex-box .entry-title {
    font-size: 1.625rem;
}

/* ==========================================================================
    Article Entry Card (category/issue listing)
    ========================================================================== */

.article-entry {
    margin-bottom: 15px;
    padding: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    background: var(--card-bg);
}

.article-entry .post-thumbnail {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.article-entry .post-thumbnail img {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    display: block;
    width: 100%;
}

.article-entry .article-item {
    padding: 20px 30px 30px;
}

.article-entry .entry-thumbnail-link {
    display: block;
    text-decoration: none;
}

/* ==========================================================================
   Article List (simplified ordered list)
   ========================================================================== */

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

.article-list-title {
    font-size: var(--text-size-h3);
    font-weight: var(--weight-black);
    font-family: var(--font-title);
    line-height: var(--line-height-compact);
    margin-bottom: var(--space-2);
    word-wrap: break-word;
}

.article-list-title a {
    color: var(--text-heading);
    text-decoration: none;
}

.article-list-title a:hover {
    color: var(--link-hover-color);
}

.article-meta {
    font-size: 13px;
    color: var(--medium-grey);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2);
    text-transform: capitalize;
}

.article-abstract {
    font-size: var(--text-size-small);
    color: var(--medium-grey);
    line-height: var(--line-height-normal);
}

.article-author {
    color: var(--text-heading);
}

.article-citation {
    font-size: var(--text-size-small);
    color: var(--medium-grey);
    font-style: italic;
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   Volume & Issue Grid (Archive page)
   ========================================================================== */

.volume-section {
    margin-bottom: var(--space-7);
}

.volume-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: var(--weight-bold);
    color: var(--text-heading);
    letter-spacing: -0.3px;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--rule);
}

/* Issue cards grid inside each volume. auto-fill (not auto-fit) so a
   single-issue volume renders one appropriately-sized tile rather than
   stretching it to imply three missing issues (REDESIGN.md 3.2). */
.issue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

.issue-card {
    display: flex;
    flex-direction: column;
    background: var(--very-light-bg);
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.issue-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

.issue-card-cover {
    height: 100px;
    overflow: hidden;
    background: var(--light-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.issue-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.issue-card-placeholder {
    background: linear-gradient(135deg, var(--brand-red) 0%, color-mix(in srgb, var(--brand-red) 70%, #000) 100%);
}

.issue-card-number {
    font-family: var(--font-title);
    font-size: var(--text-size-body);
    font-weight: var(--weight-black);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05em;
}

.issue-card-body {
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.issue-card-label {
    font-family: var(--font-title);
    font-size: var(--text-size-small);
    font-weight: var(--weight-bold);
    color: var(--text-heading);
    line-height: var(--line-height-compact);
}

.issue-card-date {
    font-family: var(--font-title);
    font-size: var(--text-size-micro);
    color: var(--medium-grey);
    font-weight: var(--weight-regular);
}

/* ==========================================================================
   Issue Detail Article Grid
   ========================================================================== */

.issue-article-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.issue-article-grid .article-entry {
    margin-bottom: 0;
}

@media (min-width: 1025px) {
    .issue-article-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Blog List
   ========================================================================== */

.blog-list-item {
    padding: 30px;
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 15px;
}

.blog-list-title {
    font-size: var(--text-size-h4);
    font-weight: var(--weight-black);
    font-family: var(--font-title);
    margin-bottom: var(--space-1);
    word-wrap: break-word;
}

.blog-list-title a {
    color: var(--text-heading);
    text-decoration: none;
}

.blog-list-title a:hover {
    color: var(--link-hover-color);
}

.blog-meta {
    font-size: var(--text-size-micro);
    color: var(--medium-grey);
    font-family: var(--font-title);
    font-weight: var(--weight-black);
    margin-bottom: var(--space-2);
    text-transform: capitalize;
}

.blog-excerpt {
    font-size: var(--text-size-small);
    color: var(--medium-grey);
    line-height: var(--line-height-normal);
}

.blog-detail-header {
    margin-bottom: var(--space-4);
}

.blog-detail-header .blog-meta {
    margin-top: var(--space-1);
}

/* ==========================================================================
   Article Detail (single post card wrapper)
   ========================================================================== */

.article-detail {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 0;
    overflow: hidden;
}

/* Article detail: override entry header padding when inside .article-detail */
.article-detail .entry-header {
    padding: 30px 30px 0 30px;
}

.article-detail .entry-content {
    padding: 0 30px 30px;
}

/* Article body — generic rich-text content block (used by blog/guidance too) */
.article-body {
    margin-top: var(--space-4);
    font-size: var(--text-size-body);
    color: var(--text-primary);
    line-height: var(--line-height-loose);
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--text-heading);
    scroll-margin-top: 80px;
    font-family: var(--font-title);
    font-weight: var(--weight-black);
    letter-spacing: var(--letter-spacing-heading);
}

.article-body h2 { font-size: var(--text-size-h2); }
.article-body h3 { font-size: var(--text-size-h3); line-height: var(--line-height-normal); }
.article-body h4 { font-size: var(--text-size-h4); }
.article-body p { margin-bottom: var(--space-3); }
.article-body blockquote {
    font-family: var(--font-title);
    font-size: 2.25rem;
    line-height: var(--line-height-compact);
    font-weight: var(--weight-black);
    margin: 50px 0;
    color: var(--brand-red);
    letter-spacing: var(--letter-spacing-heading);
    padding: 0 30px;
    border: none;
    font-style: normal;
}
.article-body blockquote cite {
    display: block;
    font-size: var(--text-size-body);
    color: var(--medium-grey);
    font-weight: var(--weight-bold);
    font-style: normal;
    margin-top: 10px;
}
.article-body blockquote cite::before {
    content: "\2015";
    margin-right: 5px;
    color: var(--medium-grey);
    font-weight: 500;
}
.article-body hr {
    border: none;
    border-top: 1px solid var(--light-border-color);
    margin: 30px 0;
}
.article-body ul,
.article-body ol {
    margin: 30px 10px 30px 40px;
    padding: 0;
}
.article-body ul { list-style: none; }
.article-body ol li,
.article-body ul li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px;
}
.article-body li > ul,
.article-body li > ol {
    margin-bottom: 10px;
    margin-left: 30px;
    margin-top: 10px;
}
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    margin: var(--space-3) 0;
}

/* ==========================================================================
   Article Hero — featured-image overlay (Ruki cover style)
   ========================================================================== */

.article-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.article-hero-overlay {
    width: 100%;
    padding: 60px 30px 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.article-hero h1 {
    font-family: var(--font-title);
    font-size: var(--text-size-entry);
    font-weight: var(--weight-black);
    line-height: var(--line-height-compact);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--white);
    margin: 0 0 var(--space-2);
}

.article-hero .article-meta {
    font-family: var(--font-title);
    font-size: var(--text-size-body);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--space-1);
    font-weight: var(--weight-black);
}

.article-hero time {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-size-small);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-title);
}

/* ==========================================================================
   Page Detail
   ========================================================================== */

.page-content {
    font-size: var(--text-size-body);
    color: var(--text-primary);
    line-height: var(--line-height-loose);
}

.page-content h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--text-heading);
    font-size: var(--text-size-h2);
    scroll-margin-top: 80px;
    font-family: var(--font-title);
    font-weight: var(--weight-black);
}

.page-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: var(--text-size-h3);
    font-family: var(--font-title);
    font-weight: var(--weight-black);
}

.page-content blockquote {
    font-family: var(--font-title);
    font-size: 2.25rem;
    line-height: var(--line-height-compact);
    font-weight: var(--weight-black);
    margin: 50px 0;
    color: var(--brand-red);
    letter-spacing: var(--letter-spacing-heading);
    padding: 0 30px;
    border: none;
    font-style: normal;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--medium-grey);
}

.empty-state p {
    font-size: var(--text-size-h4);
}

/* ==========================================================================
   Accordion / Expander
   ========================================================================== */

.accordion-item {
    border-bottom: 1px solid var(--light-border-color);
}

.accordion-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-3) 0;
    background: none;
    border: none;
    font-family: var(--font-title);
    font-size: var(--text-size-body);
    font-weight: var(--weight-black);
    color: var(--text-heading);
    cursor: pointer;
    text-align: left;
    letter-spacing: var(--letter-spacing-heading);
}

.accordion-toggle::after {
    content: '+';
    font-size: var(--text-size-h4);
    font-weight: var(--weight-regular);
    color: var(--brand-red);
    transition: var(--transition-btn);
}

.accordion-toggle.open::after {
    content: '\2212';
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.accordion-body.open {
    max-height: 1000px;
}

.accordion-content {
    padding: 0 0 var(--space-3);
    color: var(--medium-grey);
    font-size: var(--text-size-small);
}

/* ==========================================================================
   Floating Back-to-Top (Ruki goto-top style)
   ========================================================================== */

.fab {
    position: fixed;
    bottom: -100px;
    right: 15px;
    width: var(--fab-size);
    height: var(--fab-size);
    padding: 0;
    border-radius: var(--radius-circle);
    background: var(--brand-red);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: none;
    cursor: pointer;
    z-index: 2000;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.fab.visible {
    opacity: 1;
    visibility: visible;
    bottom: 30px;
}

.fab:hover {
    opacity: 0.9;
    color: var(--white);
}

.fab:active {
    transform: scale(var(--btn-active-scale));
}

/* ==========================================================================
   Table of Contents Block
   ========================================================================== */

.toc-block {
    padding: 16px 20px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--light-border-color);
    border-radius: var(--radius-card);
    background: var(--very-light-bg);
}

.toc-block p {
    margin: 0 0 8px 0;
    font-size: var(--text-size-body);
    font-weight: var(--weight-black);
    font-family: var(--font-title);
}

.toc-block ul {
    margin: 0;
    padding-left: 1.2em;
}

.toc-block li {
    margin: 4px 0;
    font-size: 0.95rem;
    line-height: var(--line-height-normal);
}

.toc-block a {
    color: var(--link-color);
    text-decoration: none;
}

.toc-block a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* ==========================================================================
   Forms
   ========================================================================== */

input, textarea {
    border: 3px solid var(--light-border-color);
    padding: 15px;
    transition: all 0.2s ease;
    max-width: 100%;
    border-radius: var(--radius-form);
    font-size: var(--text-size-body);
    font-family: var(--font-sans);
}

input:hover, textarea:hover {
    border-color: var(--medium-border-color);
}

input:focus, textarea:focus {
    border-color: var(--accent-deep);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Navigation: current/active state in sidebar
   ========================================================================== */

.slide-navigation .current-menu-item > a,
.slide-navigation .current-category-ancestor > a,
.slide-navigation .current-post-ancestor > a {
    color: var(--brand-red);
}

/* ==========================================================================
   Custom forms (submission forms embedded in pages)

   3.6: inputs used to stretch to the full 1000px+ content column, which
   makes a "First Name" field absurd and the form hard to scan. The form is
   now capped at --column-narrow, and its fields sit in an auto-fill grid so
   short fields (name, email, phone...) line up two- or three-per-row
   instead of each spanning the full width; long fields (textarea, select,
   checkbox, file) opt into a full-width row with `.form-group-wide`.
   ========================================================================== */

.custom-form {
    margin: var(--space-6) 0;
    max-width: var(--column-narrow);
}

.custom-form form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 var(--space-4);
    align-items: start;
}

.custom-form .form-group {
    margin-bottom: var(--space-4);
    min-width: 0;
}

/* Long-answer fields (textarea, select, checkbox, file) span every column
   instead of being squeezed into a name-field-sized slot. */
.custom-form .form-group-wide {
    grid-column: 1 / -1;
}

.custom-form label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-title);
    font-weight: var(--weight-semibold);
    font-size: var(--text-size-small);
}

.custom-form input,
.custom-form textarea,
.custom-form select {
    width: 100%;
}

/* Short single-line fields still cap themselves even on a wide viewport
   where they'd otherwise be the sole occupant of their grid row. */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form input[type="url"],
.custom-form input[type="number"],
.custom-form input[type="date"] {
    max-width: 420px;
}

.custom-form select {
    border: 3px solid var(--light-border-color);
    padding: 15px;
    border-radius: var(--radius-form);
    font-size: var(--text-size-body);
    font-family: var(--font-sans);
    background: var(--card-bg);
}

.custom-form input[type="file"] {
    padding: 10px;
    background: var(--light-bg);
    cursor: pointer;
}

.custom-form input[type="file"]::file-selector-button {
    margin-right: var(--space-3);
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--accent-deep);
    color: var(--white);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: var(--text-size-small);
    cursor: pointer;
    transition: var(--transition-btn);
}

.custom-form input[type="file"]::file-selector-button:hover {
    opacity: 0.9;
}

/* Required-field signal: previously the `*` alone. A legend at the top of
   the form spells out what it means, and the star itself is bolder. */
.form-required-legend {
    margin: 0 0 var(--space-4);
    font-size: var(--text-size-small);
    color: var(--medium-grey);
}

.required-star {
    color: var(--accent-deep);
    font-weight: var(--weight-black);
}

.field-help {
    margin: var(--space-2) 0 0;
    font-size: var(--text-size-micro);
    color: var(--medium-grey);
}

/* The copyright notice above the submit button. The live site sets the
   heading in red, which reads as an error next to the form's own red
   required-stars; the rule above it carries the same "stop and read this"
   weight without competing for that meaning. */
/* Scoped to .custom-form, not bare: the form renders inside .prose, whose
   `.prose h3` rule would otherwise win on specificity and give the notice a
   full article heading. */
.custom-form .form-consent {
    grid-column: 1 / -1;
    margin: var(--space-4) 0 var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--medium-border-color);
}

.custom-form .form-consent-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-size-small);
    font-weight: var(--weight-bold);
    color: var(--accent-deep);
}

.custom-form .form-consent p {
    margin: 0;
    font-size: var(--text-size-micro);
    line-height: 1.6;
    color: var(--medium-grey);
}

.checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.checkbox-wrap input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
}

.checkbox-wrap .checkbox-label {
    margin: 0;
    font-weight: var(--weight-regular);
}

/* Honeypot: must stay in the DOM and focusable-adjacent for bots, but hidden
   from people and screen readers (the field also carries aria-hidden). */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-errors {
    border: 3px solid var(--accent-deep);
    border-radius: var(--radius-form);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--light-bg);
}

.form-errors-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    color: var(--accent-deep);
}

.form-errors ul {
    margin: 0;
    padding-left: var(--space-5);
}

.custom-form .submit-btn {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    justify-self: start;
}

/* ==========================================================================
   Editorial bands (site-wide) -- REDESIGN.md Part 3

   The author pages introduced a pattern -- three stacked full-bleed bands
   (breadcrumb, hero, content), serif display type, rule-separated entries
   instead of shadowed cards -- that Part 3 propagates to every page type.
   `.band-inner` re-applies the 1280px container width + gutter inside a
   full-bleed band; `.author-band-inner` (below) is kept as an alias so the
   author templates need no markup changes.
   ========================================================================== */

.band-inner {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--outer-gutter);
}

.crumb-band {
    background: var(--band-crumb);
    padding: var(--space-3) 0;
    font-size: var(--text-size-small);
    color: var(--dark-grey);
}

.crumb-band a {
    color: var(--dark-grey);
    text-decoration: none;
}

.crumb-band a:hover {
    color: var(--accent-deep);
}

.crumb-band .crumb-sep {
    margin: 0 var(--space-2);
    color: var(--medium-grey);
}

.crumb-band .crumb-current {
    color: var(--text-heading);
    font-weight: var(--weight-black);
}

.hero-band {
    background: var(--band-hero);
    padding: var(--space-7) 0;
}

.hero-band-compact {
    padding: var(--space-5) 0;
}

.hero-eyebrow {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark-grey);
}

.hero-eyebrow a {
    color: var(--accent-deep);
    text-decoration: none;
}

.hero-eyebrow a:hover {
    text-decoration: underline;
}

.hero-heading {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--black);
}

.hero-meta {
    margin: var(--space-3) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--medium-grey);
}

.hero-meta a {
    color: var(--medium-grey);
    text-decoration: none;
}

.hero-meta a:hover {
    color: var(--accent-deep);
}

.hero-citation {
    margin: var(--space-2) 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--dark-grey);
}

/* Article language, as a labelled meta item in the header -- the body used
   to carry this as a stray "Article language: English." <cite>, which
   strip_leading_citation now removes along with the duplicate citation. */
.hero-lang-label {
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

/* Article byline: the linked author names used to be styled indistinguishably
   from plain bold text (item 3.4 -- "make them read as links"). */
.article-authors a {
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-authors a:hover {
    color: var(--brand-red);
}

.hero-subtitle {
    margin: var(--space-3) 0 0;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--dark-grey);
}

.body-band {
    background: var(--band-body);
    padding: var(--space-7) 0 var(--space-8);
}

/* Rule-separated "entry" -- the listing-page replacement for shadowed
   white cards (item 3.0: "Entries over cards"). */
.entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-7) var(--space-6);
}

.entry-grid-single-col {
    grid-template-columns: 1fr;
}

.entry-item {
    border-left: 1px solid var(--rule);
    padding-left: var(--space-4);
}

.entry-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.entry-kicker-link {
    color: var(--accent-deep);
    font-weight: var(--weight-bold);
    text-decoration: none;
}

.entry-kicker-link:hover {
    color: var(--brand-red);
}

.entry-kind {
    color: var(--medium-grey);
    font-weight: var(--weight-regular);
}

.entry-diamond {
    color: var(--accent-gold);
    font-size: 0.75em;
    margin: 0 var(--space-1);
}

.entry-item-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

.entry-item-title a {
    color: var(--black);
    text-decoration: none;
}

.entry-item-title a:hover {
    color: var(--accent-deep);
}

.entry-item-meta {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--dark-grey);
}

.entry-item-volume {
    font-variant-caps: small-caps;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.entry-item-authors {
    margin: var(--space-3) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--medium-grey);
}

.entry-item-authors a {
    color: var(--medium-grey);
    text-decoration: none;
}

.entry-item-authors a:hover {
    color: var(--accent-deep);
}

.entry-item-pdf {
    margin: var(--space-2) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-size-micro);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.entry-item-pdf a {
    color: var(--accent-deep);
    text-decoration: none;
    font-weight: var(--weight-bold);
}

.entry-item-pdf a:hover {
    text-decoration: underline;
}

.entry-item-excerpt {
    margin: var(--space-2) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    color: var(--medium-grey);
    line-height: var(--line-height-normal);
}

.entry-empty {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    color: var(--medium-grey);
}

/* Scholarly serif prose -- article/page/guidance/blog body copy, bios,
   abstracts. Reading measure capped at 68ch (item 3.0); it used to run to
   ~100 characters per line at desktop widths. */
.prose {
    max-width: 68ch;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: var(--line-height-loose);
    color: var(--dark-grey);
}

.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose p { margin: 0 0 var(--space-3); }

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin: var(--space-6) 0 var(--space-3);
    font-family: var(--font-serif);
    font-weight: var(--weight-bold);
    color: var(--text-heading);
    letter-spacing: normal;
    scroll-margin-top: 80px;
}

.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.375rem; }
.prose h4 { font-size: 1.1875rem; }

.prose blockquote {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.4;
    margin: var(--space-5) 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--accent-gold);
    color: var(--dark-grey);
}

.prose blockquote cite {
    display: block;
    font-size: var(--text-size-small);
    font-style: normal;
    margin-top: var(--space-2);
    color: var(--medium-grey);
}

.prose ul, .prose ol {
    margin: var(--space-4) 0 var(--space-4) var(--space-5);
}

.prose li { margin-bottom: var(--space-2); }

.prose a { color: var(--accent-deep); }
.prose a:hover { color: var(--brand-red); }

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    margin: var(--space-4) 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    font-size: 0.95rem;
}

.prose th, .prose td {
    border: 1px solid var(--rule);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

.prose hr {
    border: 0;
    height: 1px;
    background: var(--rule);
    margin: var(--space-5) 0;
}

.prose sup { font-size: 0.75em; }
.prose cite { color: var(--medium-grey); font-style: normal; }

/* Imported WordPress paragraphs still carry this class; forcing justify at
   a 68ch measure produces rivers of whitespace (worst on the About page). */
.prose .has-text-align-justify { text-align: left; }
.prose .has-text-align-center { text-align: center; }
.prose .has-text-align-right { text-align: right; }

/* PDF download button, appended after prose (article body, publication
   entries elsewhere already use the smaller .entry-item-pdf treatment). */
.prose-pdf-button {
    margin-top: var(--space-5);
}

/* ---- Share (inline SVG icons, item 3.4 -- no icon font, no external
   dependency; the CSP blocks third-party origins anyway) ---- */
.share-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    max-width: 68ch;
}

.share-label {
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--medium-grey);
}

.share-icons {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.share-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    background: var(--band-crumb);
    color: var(--accent-deep);
    transition: var(--transition-btn);
}

.share-icon-link:hover {
    background: var(--accent-deep);
    color: var(--white);
    text-decoration: none;
}

.share-icon-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* ---- Article foot: back-to-volume + previous/next (item 3.4) ---- */
.article-foot-nav {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    max-width: 68ch;
}

.article-foot-back {
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    font-weight: var(--weight-bold);
    color: var(--accent-deep);
    text-decoration: none;
}

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

.article-foot-siblings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    margin-left: auto;
}

.article-foot-siblings a {
    color: var(--medium-grey);
    text-decoration: none;
    font-weight: var(--weight-semibold);
}

.article-foot-siblings a:hover {
    color: var(--accent-deep);
}

.article-foot-siblings .direction {
    display: block;
    font-size: var(--text-size-micro);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--medium-grey);
    margin-bottom: 2px;
}

.article-foot-next {
    text-align: right;
}

@media (max-width: 782px) {
    .entry-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .hero-band {
        padding: var(--space-6) 0;
    }

    .article-foot-siblings {
        margin-left: 0;
        flex-direction: column;
        gap: var(--space-3);
    }

    .article-foot-next {
        text-align: left;
    }
}

/* ==========================================================================
   Author pages

   Modelled on harvardlawreview.org/author/<name>/: three stacked full-bleed
   bands (breadcrumb, name, publications) with the type set in a serif display
   face, and each publication marked by a rule down its left edge.
   ========================================================================== */

/* The bands sit in base.html's `hero` / `after_content` blocks, which are
   outside the 1280px .content-area, so they can run edge to edge. `.band-inner`
   (above) is the generalised, site-wide version of this wrapper; the name
   below is kept as a deprecated alias so the author templates need no changes. */
.author-band-inner {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--outer-gutter);
}

/* ---- Breadcrumb band ---- */

/* The bands start immediately under the masthead, with no canvas showing
   through the header's usual bottom margin -- every band-layout page type
   from Part 3, not just the author pages any more. */
.page-author .site-header,
.page-article .site-header,
.page-issue .site-header,
.page-volumes .site-header,
.page-guidance-list .site-header,
.page-guidance-detail .site-header,
.page-blog-list .site-header,
.page-blog-detail .site-header,
.page-static .site-header {
    margin-bottom: 0;
}

.author-crumb-band {
    background: var(--author-crumb-bg);
    padding: var(--space-3) 0;
    font-size: var(--text-size-small);
    color: var(--dark-grey);
}

.author-crumb-band a {
    color: var(--dark-grey);
    text-decoration: none;
}

.author-crumb-band a:hover {
    color: var(--brand-red);
}

.author-crumb-band .crumb-sep {
    margin: 0 var(--space-2);
    color: var(--medium-grey);
}

/* ---- Name band ---- */

.author-hero-band {
    background: var(--author-hero-bg);
    padding: var(--space-8) 0;
}

.author-hero-band-index {
    padding: var(--space-7) 0;
}

.author-hero-inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.author-hero-photo {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    object-fit: cover;
    border-radius: var(--radius-circle);
    background: var(--light-bg);
}

.author-hero-text {
    min-width: 0;
}

.author-eyebrow {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark-grey);
}

.author-hero-name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.75rem, 6vw, 4.25rem);
    font-weight: var(--weight-bold);
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--black);
}

.author-hero-affiliation {
    margin: var(--space-3) 0 0;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--dark-grey);
}

.author-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
}

/* ---- Publications band ---- */

.author-body-band {
    background: var(--author-body-bg);
    padding: var(--space-7) 0 var(--space-8);
}

.author-bio {
    max-width: 68ch;
    margin: 0 0 var(--space-7);
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: var(--line-height-loose);
    color: var(--dark-grey);
}

.author-bio p {
    margin: 0 0 var(--space-3);
}

.author-publications {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-7) var(--space-6);
}

.author-publication {
    border-left: 1px solid var(--author-rule);
    padding-left: var(--space-4);
}

/* Kicker: red category, diamond, then the content type in grey. */
.pub-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.pub-kicker .pub-issue {
    color: var(--author-deep-red);
    font-weight: var(--weight-bold);
    text-decoration: none;
}

.pub-kicker .pub-issue:hover {
    color: var(--brand-red);
}

.pub-kind {
    color: var(--medium-grey);
    font-weight: var(--weight-regular);
}

.pub-diamond {
    color: var(--author-diamond);
    font-size: 0.75em;
    margin: 0 var(--space-1);
}

.pub-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

.pub-title a {
    color: var(--black);
    text-decoration: none;
}

.pub-title a:hover {
    color: var(--author-deep-red);
}

/* The volume, date and excerpt run as one paragraph, as in the print citation. */
.pub-meta {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--dark-grey);
}

.pub-volume {
    font-variant-caps: small-caps;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.pub-authors {
    margin: var(--space-3) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--medium-grey);
}

.pub-authors a {
    color: var(--medium-grey);
    text-decoration: none;
}

.pub-authors a:hover {
    color: var(--author-deep-red);
}

.pub-pdf {
    margin: var(--space-2) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-size-micro);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.author-empty {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    color: var(--medium-grey);
}

/* ---- Author index ---- */

.author-index {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0 var(--space-7);
}

.author-index-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--author-rule);
}

.author-index-name {
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    font-weight: var(--weight-semibold);
    color: var(--black);
    text-decoration: none;
}

.author-index-name:hover {
    color: var(--author-deep-red);
}

.author-index-affiliation {
    flex: 1 1 100%;
    font-family: var(--font-sans);
    font-size: var(--text-size-micro);
    color: var(--medium-grey);
}

.author-index-count {
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: var(--text-size-micro);
    color: var(--medium-grey);
    white-space: nowrap;
}

.author-sep {
    color: var(--entry-meta-color);
}

@media (max-width: 782px) {
    .author-hero-band {
        padding: var(--space-6) 0;
    }

    .author-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .author-publications {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .author-index {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Homepage intro — the journal's description of itself
   ========================================================================== */

/* Its own band, above the dark latest-issue feature band: the page opens on
   what the journal is, then shows what is in it. */
.intro-band {
    padding: var(--space-7) 0 var(--space-6);
}

/* The block is "alignwide" on the live site — wider than an article column.
   The default .prose measure would leave the cover and ~50 characters of text
   stranded in the left half of a 1280px band. 900px puts the text column near
   75 characters, which is the width prose actually wants, without running the
   full container. */
.intro-band .prose {
    max-width: 900px;
}

/* The live site sets the cover to 15% of a wide column and lets the text take
   the rest. A fixed 150px column does the same thing without tying the layout
   to the container width, and keeps the cover from growing into a banner on a
   large screen. */
.page-intro {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--space-6);
    align-items: start;
}

.page-intro-media {
    margin: 0;
}

.page-intro-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--medium-border-color);
}

.page-intro-body > *:first-child {
    margin-top: 0;
}

.page-intro-body > *:last-child {
    margin-bottom: 0;
}

/* "is-stacked-on-mobile", in the live site's words. Below this the cover
   sitting beside the text leaves neither enough room to read. */
@media (max-width: 600px) {
    .page-intro {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        justify-items: center;
        text-align: left;
    }

    .page-intro-media {
        max-width: 140px;
    }
}

/* --------------------------------------------------------------------------
   Proof-of-work status line (see journal/altcha.py)
   -------------------------------------------------------------------------- */

/* A status line, not a checkbox: there is nothing for the visitor to do, and
   a control that cannot be operated invites people to try. It stays out of the
   way until the form is submitted, then reports what is happening. */
.custom-form .altcha {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 1.5em;
    margin-top: var(--space-2);
    font-size: var(--text-size-micro);
    color: var(--medium-grey);
}

.custom-form .altcha[data-state="idle"] {
    display: none;
}

.custom-form .altcha-mark {
    width: 0.85em;
    height: 0.85em;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--medium-border-color);
    border-top-color: var(--accent-deep);
}

.custom-form .altcha[data-state="working"] .altcha-mark {
    animation: altcha-spin 0.8s linear infinite;
}

.custom-form .altcha[data-state="done"] .altcha-mark {
    border-color: var(--accent-deep);
    background: var(--accent-deep);
}

.custom-form .altcha[data-state="failed"] {
    color: var(--accent-deep);
}

.custom-form .altcha[data-state="failed"] .altcha-mark {
    border-color: currentColor;
}

@keyframes altcha-spin {
    to { transform: rotate(360deg); }
}

/* The spinner is decoration; someone who has asked for less motion loses
   nothing by it holding still, and the label says the same thing either way. */
@media (prefers-reduced-motion: reduce) {
    .custom-form .altcha[data-state="working"] .altcha-mark {
        animation: none;
    }
}