/* ==========================================================================
   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);
}

/* Inverts to an outline. It used to fade to 0.9 opacity, but set no text
   colour, so on a link the generic a:hover / .prose a:hover red won and the
   label vanished into the red fill. The border is an inset shadow so the
   button keeps its size. */
.btn-primary:hover {
    opacity: 1;
    background: var(--white);
    color: var(--brand-red);
    box-shadow: inset 0 0 0 2px var(--brand-red);
}

/* 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);
}

/* Reading pages (static pages, articles, blog posts, guidance, the form
   thank-you page) are one column of text. In the 1280px band that column sat
   against the left edge with the right half of the screen empty, and the
   translation note ran the full width above a text block half as wide. Here
   the breadcrumb, title and body share one centred column, and the prose
   fills it -- --column-reading is already a comfortable measure. */
.layout-reading .band-inner {
    max-width: calc(var(--column-reading) + 2 * var(--outer-gutter));
}

.layout-reading .prose {
    max-width: none;
}

/* Sized for the column rather than the 1280px band: at 3.25rem a typical
   article title ran to four lines in it. */
.layout-reading .hero-heading {
    font-size: clamp(2rem, 4vw, 2.625rem);
}

/* The last crumb repeats the page title, which in this column is often long
   enough to wrap the breadcrumb over two or three lines directly above that
   same title. The title is cut short to one line instead -- on the first line
   when there is room for at least 10em of it, otherwise on a line of its own
   (phones). */
.layout-reading .crumb-band .band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.layout-reading .crumb-band .band-inner > * {
    flex: none;
}

.layout-reading .crumb-band .crumb-current {
    flex: 1 1 10em;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.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;
}

/* The post list under the blog landing page's announcement. */
.landing-posts {
    margin-top: var(--space-7);
}

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

.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);
    /* Citations quote bare URLs; one pushed the Submission Requirements page
       wider than a phone screen. */
    overflow-wrap: break-word;
}

.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); }

/* Text links only: at this specificity the colour also beat .btn-primary's
   white, so a button in the body (the blog page's "Blog Requirements") had
   dark red text on its red fill. */
.prose a:not(.btn) { color: var(--accent-deep); }
.prose a:not(.btn):hover { color: var(--brand-red); }

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

/* Fixed layout: equal columns, as the admin editor draws them, so a table
   looks the same written as published. With automatic layout a long URL in
   one cell also widened the table past a phone screen, since a cell cannot
   be narrower than its longest unbreakable string. */
.prose table {
    width: 100%;
    table-layout: fixed;
    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;
    vertical-align: top;
    hyphens: auto;          /* a phone-width column is narrower than some words */
}

.prose th p, .prose td p { margin: 0; }
.prose th p + p, .prose td p + p { margin-top: var(--space-2); }

.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; }

/* Alignment, as imported from WordPress (has-text-align-*) and as set in the
   admin editor (ql-align-*). Imported justify is shown left-aligned: nearly
   every WordPress paragraph carried it, and across a whole page it produced
   rivers of whitespace (worst on the About page). Justify chosen in the
   editor is honoured, with hyphenation to keep the word gaps even. */
.prose .has-text-align-justify { text-align: left; }
.prose .ql-align-justify { text-align: justify; hyphens: auto; }
.prose .has-text-align-center,
.prose .ql-align-center { text-align: center; }
.prose .has-text-align-right,
.prose .ql-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,
.page-form-success .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;
    }
}