/*
Theme Name: LegalSports
Theme URI: https://legalsports.news/
Author: LegalSports Editorial
Author URI: https://legalsports.news/
Description: A 2026 editorial WordPress theme for the intersection of sport and law. Balanced hybrid of authoritative serif headlines, sharp grotesk UI, subtle motion and a stadium-night accent palette. Built for news publishers covering regulation, integrity, broadcasting rights, governance and athlete legal affairs. Includes homepage, single article, archive, author, contact, and membership/newsletter templates.
Version: 1.5.3
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legalsports
Tags: news, magazine, editorial, sports, law, two-columns, custom-menu, custom-logo, featured-images, block-styles, wide-blocks, translation-ready
*/

/* ==========================================================================
   DESIGN SYSTEM — LegalSports 2026
   - Editorial serif headlines (Fraunces) + grotesk UI (Inter Tight)
   - Stadium-night accent + ivory canvas
   ========================================================================== */

:root {
    /* Palette */
    --ls-ink:        #0B0F14;   /* near-black, court ink */
    --ls-ink-2:      #1A2230;   /* surface dark */
    --ls-paper:      #F6F2EA;   /* ivory canvas */
    --ls-paper-2:    #ECE5D6;   /* warm muted */
    --ls-rule:       #D9D2C2;   /* hairlines on paper */
    --ls-rule-dark:  #2A3342;   /* hairlines on dark */
    --ls-muted:      #5A6473;
    --ls-accent:     #C8102E;   /* whistle red — sport energy */
    --ls-accent-2:   #0E5C3A;   /* turf green — law/sport balance */
    --ls-gold:       #B8945A;   /* trophy gold accent */

    /* Typography */
    --ls-serif: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --ls-sans:  "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ls-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Scale */
    --ls-h1: clamp(1.95rem, 4.4vw + 0.9rem, 5.5rem);
    --ls-h2: clamp(1.8rem, 2.4vw + 1rem, 3rem);
    --ls-h3: clamp(1.25rem, 1vw + 1rem, 1.65rem);
    --ls-body: 1.0625rem;

    --ls-radius: 4px;
    --ls-max: 1480px;
    --ls-gutter: clamp(1rem, 3vw, 2.5rem);
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--ls-sans);
    font-size: var(--ls-body);
    line-height: 1.6;
    color: var(--ls-ink);
    background: var(--ls-paper);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ls-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
a:hover { border-bottom-color: var(--ls-accent); }

h1, h2, h3, h4 {
    font-family: var(--ls-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0 0 .5em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
h1 { font-size: var(--ls-h1); font-weight: 400; }
h2 { font-size: var(--ls-h2); }
h3 { font-size: var(--ls-h3); }

p { margin: 0 0 1.1em; }

.ls-eyebrow {
    font-family: var(--ls-sans);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--ls-accent);
}

.ls-meta {
    font-family: var(--ls-sans);
    font-size: .82rem;
    color: var(--ls-muted);
    letter-spacing: .02em;
}

/* Container */
.ls-container { max-width: var(--ls-max); margin: 0 auto; padding: 0 var(--ls-gutter); }
.ls-container--narrow { max-width: 760px; }

/* ============ HEADER ============ */
.ls-topbar {
    background: var(--ls-ink);
    color: var(--ls-paper);
    font-size: .78rem;
    letter-spacing: .04em;
}
.ls-topbar a { color: var(--ls-paper); opacity: .85; }
.ls-topbar a:hover { opacity: 1; border-bottom-color: var(--ls-accent); }
.ls-topbar__inner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px var(--ls-gutter);
    max-width: var(--ls-max); margin: 0 auto;
}
.ls-topbar__date { font-family: var(--ls-mono); }

.ls-header {
    border-bottom: 1px solid var(--ls-rule);
    background: var(--ls-paper);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--ls-paper) 92%, transparent);
}
.ls-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 18px var(--ls-gutter);
    max-width: var(--ls-max); margin: 0 auto;
}
.ls-logo {
    font-family: var(--ls-serif);
    font-size: clamp(2rem, 2.6vw + 1rem, 3.2rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    grid-column: 2;
    text-align: center;
    line-height: 1;
}
.ls-logo a { border: 0; display: inline-block; }
.ls-logo__dot { color: var(--ls-accent); }

/* Cap any uploaded custom-logo image so it never blows up the header */
.ls-logo img,
.custom-logo {
    max-height: 72px;
    width: auto;
    height: auto;
    display: inline-block;
    object-fit: contain;
}
@media (max-width: 640px) {
    .ls-logo img, .custom-logo { max-height: 52px; }
}

.ls-header__left { display: flex; gap: 1.25rem; align-items: center; }
.ls-header__right { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; }

.ls-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--ls-sans);
    font-size: .85rem; font-weight: 600;
    padding: 10px 18px;
    background: var(--ls-ink); color: var(--ls-paper);
    border: 1px solid var(--ls-ink);
    border-radius: var(--ls-radius);
    transition: all .2s ease;
    cursor: pointer;
    letter-spacing: .02em;
}
.ls-btn:hover { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; }
.ls-btn--ghost { background: transparent; color: var(--ls-ink); }
.ls-btn--accent { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; }

/* Primary nav */
.ls-nav { border-top: 1px solid var(--ls-rule); border-bottom: 1px solid var(--ls-rule); background: var(--ls-paper); }
.ls-nav__inner {
    max-width: var(--ls-max);
    margin: 0 auto;
    padding: 0 var(--ls-gutter);
    display: flex; align-items: center; justify-content: center;
    overflow-x: auto;
}
.ls-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 2rem;
}
.ls-nav a {
    display: block;
    padding: 14px 0;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
}
.ls-nav a:hover, .ls-nav .current-menu-item a { border-bottom-color: var(--ls-accent); }

/* Search inline */
.ls-search { display: flex; align-items: center; }
.ls-search input {
    border: 0; border-bottom: 1px solid var(--ls-rule);
    background: transparent; padding: 6px 4px;
    font-family: var(--ls-sans); font-size: .85rem;
    width: 160px; transition: border-color .2s;
}
.ls-search input:focus { outline: 0; border-bottom-color: var(--ls-accent); }

/* ============ HERO / HOMEPAGE ============ */
.ls-hero {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--ls-rule);
}
.ls-hero__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 900px) { .ls-hero__grid { grid-template-columns: 1fr; } }

.ls-hero__lead a { border: 0; }
.ls-hero__lead .ls-eyebrow { display: inline-block; margin-bottom: 1rem; }
.ls-hero__lead h1 { font-size: var(--ls-h1); margin-bottom: 1rem; }
.ls-hero__lead .ls-dek {
    font-size: 1.2rem; color: var(--ls-muted);
    max-width: 60ch; margin-bottom: 1.25rem;
    font-family: var(--ls-serif); font-style: italic;
}
.ls-hero__image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ls-ink-2);
    border-radius: var(--ls-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.ls-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.ls-hero__image::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(11,15,20,.45));
}

.ls-hero__sidebar {
    display: flex; flex-direction: column; gap: 1.5rem;
    border-left: 1px solid var(--ls-rule); padding-left: clamp(1rem, 2vw, 2rem);
}
@media (max-width: 900px) { .ls-hero__sidebar { border-left: 0; padding-left: 0; border-top: 1px solid var(--ls-rule); padding-top: 1.5rem; } }

.ls-side-card { padding-bottom: 1.25rem; border-bottom: 1px solid var(--ls-rule); }
.ls-side-card { display: block; }
.ls-side-card h3 { font-size: 1.05rem; line-height: 1.3; font-family: var(--ls-serif); margin: .35rem 0; }
.ls-side-card .ls-eyebrow { font-size: .65rem; }

/* Most-read ranked list */
.ls-side-block { padding: 1.25rem 0; border-top: 1px solid var(--ls-rule); }
.ls-side-block .ls-eyebrow { display: block; margin-bottom: .9rem; color: var(--ls-accent); }
.ls-rank { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ls-rank li {
    display: flex; gap: .9rem; align-items: baseline;
    padding: .65rem 0;
    border-bottom: 1px dashed var(--ls-rule);
}
.ls-rank li:last-child { border-bottom: 0; padding-bottom: 0; }
.ls-rank__num {
    font-family: var(--ls-serif);
    font-size: 1.3rem;
    color: var(--ls-muted);
    min-width: 1.8rem;
    line-height: 1;
    font-feature-settings: "lnum";
}
.ls-rank a {
    font-family: var(--ls-serif);
    font-size: 1rem;
    line-height: 1.3;
    border: 0;
}
.ls-rank a:hover { color: var(--ls-accent); }

/* Sidebar CTA block (mini newsletter) */
.ls-side-block--cta {
    background: var(--ls-ink);
    color: var(--ls-paper);
    padding: 1.5rem;
    border-radius: var(--ls-radius);
    border-top: 0;
    margin-top: .5rem;
}
.ls-side-block--cta .ls-eyebrow { color: var(--ls-gold); }
.ls-side-block--cta h4 {
    font-family: var(--ls-serif);
    font-weight: 500;
    color: var(--ls-paper);
    font-size: 1.25rem;
    line-height: 1.25;
    margin: .35rem 0 1rem;
}
.ls-side-form { display: flex; flex-direction: column; gap: .5rem; }
.ls-side-form input[type="email"] {
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: var(--ls-paper);
    border-radius: var(--ls-radius);
    font-family: var(--ls-sans);
    font-size: .92rem;
}
.ls-side-form input[type="email"]::placeholder { color: rgba(246,242,234,.5); }
.ls-side-form input[type="email"]:focus { outline: 0; border-color: var(--ls-accent); }
.ls-side-form .ls-btn { width: 100%; justify-content: center; }

/* ============ SECTIONS ============ */
.ls-section { padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--ls-rule); }
.ls-section__head {
    display: flex; align-items: end; justify-content: space-between;
    margin-bottom: 2rem; gap: 1rem;
}
.ls-section__head h2 {
    font-size: clamp(1.5rem, 2vw + .5rem, 2.4rem);
    margin: 0;
}
.ls-section__head .ls-rule {
    flex: 1; height: 1px; background: var(--ls-rule); margin: 0 1rem 1rem;
}
.ls-section__head .ls-more {
    font-family: var(--ls-sans); font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--ls-accent); border: 0;
}

/* Article card grid */
.ls-grid {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .ls-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ls-grid { grid-template-columns: 1fr; } }

.ls-card { display: flex; flex-direction: column; }
.ls-card a { border: 0; }
.ls-card__img {
    aspect-ratio: 4/3;
    background: var(--ls-paper-2);
    overflow: hidden; border-radius: var(--ls-radius);
    margin-bottom: .9rem;
}
.ls-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ls-card:hover .ls-card__img img { transform: scale(1.04); }
.ls-card h3 {
    font-size: 1.2rem; line-height: 1.25;
    font-family: var(--ls-serif); font-weight: 500;
    margin: .35rem 0 .5rem;
}
.ls-card .ls-eyebrow { font-size: .68rem; margin-bottom: .25rem; }

/* Two-up feature */
.ls-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 800px) { .ls-twoup { grid-template-columns: 1fr; } }

/* Topic bar (categories ribbon) */
.ls-topics {
    background: var(--ls-ink);
    color: var(--ls-paper);
    padding: 3.5rem 0;
}
.ls-topics h2 { color: var(--ls-paper); font-size: clamp(1.4rem, 2vw, 2rem); }
.ls-topics__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1rem; margin-top: 2rem;
}
@media (max-width: 800px) { .ls-topics__grid { grid-template-columns: repeat(2, 1fr); } }
.ls-topic-pill {
    border: 1px solid var(--ls-rule-dark);
    padding: 1.25rem 1rem;
    border-radius: var(--ls-radius);
    transition: all .2s ease;
}
.ls-topic-pill:hover { border-color: var(--ls-accent); background: rgba(200,16,46,.08); }
.ls-topic-pill .ls-eyebrow { color: var(--ls-gold); }
.ls-topic-pill h4 { color: var(--ls-paper); font-family: var(--ls-serif); font-weight: 500; margin: .35rem 0 .25rem; font-size: 1.1rem; }
.ls-topic-pill p { font-size: .82rem; color: rgba(246,242,234,.65); margin: 0; }
.ls-topic-pill a { color: var(--ls-paper); border: 0; }

/* ============ MEMBERSHIP / NEWSLETTER ============ */
.ls-cta-band {
    background: var(--ls-paper-2);
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-bottom: 1px solid var(--ls-rule);
}
.ls-cta-band__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 800px) { .ls-cta-band__grid { grid-template-columns: 1fr; } }
.ls-cta-band h2 { font-size: clamp(1.6rem, 2.5vw, 2.5rem); }
.ls-cta-band p { font-family: var(--ls-serif); font-style: italic; font-size: 1.1rem; color: var(--ls-muted); }

.ls-newsletter {
    background: var(--ls-paper);
    border: 1px solid var(--ls-rule);
    padding: 1.75rem;
    border-radius: var(--ls-radius);
}
.ls-newsletter h3 { font-size: 1.25rem; margin-bottom: .25rem; }
.ls-newsletter p { font-size: .9rem; color: var(--ls-muted); margin-bottom: 1rem; font-family: var(--ls-sans); font-style: normal; }
.ls-newsletter form { display: flex; gap: .5rem; flex-wrap: wrap; }
.ls-newsletter input[type="email"] {
    flex: 1; min-width: 200px;
    padding: 12px 14px;
    border: 1px solid var(--ls-rule); border-radius: var(--ls-radius);
    background: #fff;
    font-family: var(--ls-sans); font-size: .95rem;
}
.ls-newsletter input[type="email"]:focus { outline: 0; border-color: var(--ls-ink); }
.ls-newsletter .ls-disclaimer { font-size: .72rem; color: var(--ls-muted); margin-top: .75rem; }

/* Membership / paywall block */
.ls-paywall {
    border: 1px solid var(--ls-ink);
    background: linear-gradient(180deg, var(--ls-paper) 0%, var(--ls-paper-2) 100%);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--ls-radius);
    margin: 2.5rem 0;
    position: relative;
    overflow: hidden;
}
.ls-paywall::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--ls-accent);
}
.ls-paywall .ls-eyebrow { color: var(--ls-accent); }
.ls-paywall h3 { font-size: 1.7rem; margin: .5rem 0; }
.ls-paywall ul { margin: 1rem 0; padding-left: 1.2rem; }
.ls-paywall ul li { margin-bottom: .35rem; font-size: .95rem; }
.ls-paywall .ls-paywall__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.ls-paywall .ls-price { font-family: var(--ls-serif); font-size: 1.4rem; }
.ls-paywall .ls-price strong { font-weight: 600; }

/* ============ ARTICLE (SINGLE) ============ */
.ls-article-head {
    padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--ls-rule);
}
.ls-article-head .ls-container--narrow { max-width: 820px; }
.ls-breadcrumbs {
    font-size: .78rem; color: var(--ls-muted);
    letter-spacing: .04em; margin-bottom: 1.5rem;
}
.ls-breadcrumbs a { color: var(--ls-muted); }
.ls-breadcrumbs span { margin: 0 .5rem; opacity: .5; }

.ls-article-head h1 { font-size: clamp(2rem, 4vw, 3.6rem); margin: .5rem 0 1rem; }
.ls-article-head .ls-dek {
    font-family: var(--ls-serif); font-style: italic;
    font-size: 1.2rem; color: var(--ls-muted);
    margin-bottom: 2rem; line-height: 1.45;
}
.ls-byline {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 0; border-top: 1px solid var(--ls-rule); border-bottom: 1px solid var(--ls-rule);
}
.ls-byline__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ls-paper-2); overflow: hidden;
}
.ls-byline__meta { flex: 1; font-size: .85rem; }
.ls-byline__meta strong { font-weight: 600; }
.ls-byline__meta .ls-meta { display: block; }
.ls-byline__share { display: flex; gap: .5rem; }
.ls-byline__share a {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ls-rule); border-radius: var(--ls-radius);
}
.ls-byline__share a:hover { border-color: var(--ls-accent); }

.ls-article-image {
    margin: 2rem 0;
    aspect-ratio: 21/9;
    background: var(--ls-paper-2);
    overflow: hidden; border-radius: var(--ls-radius);
}
.ls-article-image img { width: 100%; height: 100%; object-fit: cover; }
.ls-article-image figcaption {
    margin-top: .5rem; font-size: .78rem; color: var(--ls-muted);
}

.ls-article-body { padding: clamp(1rem, 2vw, 2rem) 0 clamp(2rem, 4vw, 4rem); }
.ls-article-body .ls-container--narrow { max-width: 720px; }
.ls-article-body p,
.ls-article-body ul,
.ls-article-body ol { font-size: 1.15rem; line-height: 1.75; font-family: var(--ls-serif); }
.ls-article-body h2 { font-size: 1.8rem; margin: 2.5rem 0 1rem; }
.ls-article-body h3 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
.ls-article-body blockquote {
    border-left: 3px solid var(--ls-accent);
    margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem;
    font-family: var(--ls-serif); font-style: italic;
    font-size: 1.4rem; line-height: 1.4;
    color: var(--ls-ink);
}
.ls-article-body a { border-bottom: 1px solid var(--ls-rule); }
.ls-article-body a:hover { border-bottom-color: var(--ls-accent); color: var(--ls-accent); }
.ls-article-body .wp-block-pullquote { border-top: 2px solid var(--ls-ink); border-bottom: 2px solid var(--ls-ink); padding: 1.5rem 0; margin: 2rem 0; }

.ls-tags { margin: 2.5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.ls-tags a {
    border: 1px solid var(--ls-rule);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-family: var(--ls-sans);
    color: var(--ls-muted);
}
.ls-tags a:hover { border-color: var(--ls-accent); color: var(--ls-accent); }

/* Related */
.ls-related { padding: clamp(2rem, 4vw, 3.5rem) 0; background: var(--ls-paper-2); }
.ls-related h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }

/* ============ ARCHIVE / CATEGORY ============ */
.ls-archive-head {
    padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2rem, 3vw, 3rem);
    border-bottom: 1px solid var(--ls-rule);
    text-align: center;
}
.ls-archive-head .ls-eyebrow { margin-bottom: 1rem; }
.ls-archive-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1rem; }
.ls-archive-head .ls-dek { font-family: var(--ls-serif); font-style: italic; font-size: 1.15rem; color: var(--ls-muted); max-width: 60ch; margin: 0 auto; }

.ls-archive-grid { padding: clamp(2rem, 4vw, 4rem) 0; }

/* Pagination */
.ls-pagination { display: flex; justify-content: center; gap: .5rem; padding: 2rem 0 3rem; }
.ls-pagination a, .ls-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid var(--ls-rule); border-radius: var(--ls-radius);
    font-family: var(--ls-sans); font-size: .9rem;
}
.ls-pagination .current { background: var(--ls-ink); color: var(--ls-paper); border-color: var(--ls-ink); }
.ls-pagination a:hover { border-color: var(--ls-accent); color: var(--ls-accent); }

/* ============ AUTHOR / ABOUT / CONTACT ============ */
.ls-author-head {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--ls-rule);
}
.ls-author-head__inner {
    display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center;
}
@media (max-width: 700px) { .ls-author-head__inner { grid-template-columns: 1fr; text-align: center; } }
.ls-author-head__avatar {
    width: 140px; height: 140px; border-radius: 50%;
    background: var(--ls-paper-2); overflow: hidden;
    border: 1px solid var(--ls-rule);
}
.ls-author-head h1 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: .25rem; }
.ls-author-head .ls-role { font-family: var(--ls-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--ls-accent); font-weight: 600; }
.ls-author-head .ls-bio { font-family: var(--ls-serif); font-size: 1.1rem; color: var(--ls-muted); margin-top: .75rem; max-width: 60ch; }

.ls-about {
    padding: clamp(3rem, 6vw, 6rem) 0;
}
.ls-about .ls-container--narrow { max-width: 760px; }
.ls-about h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1.5rem; }
.ls-about .ls-lead { font-family: var(--ls-serif); font-size: 1.35rem; font-style: italic; color: var(--ls-muted); line-height: 1.5; margin-bottom: 2rem; }
.ls-about p { font-size: 1.1rem; line-height: 1.75; font-family: var(--ls-serif); }
.ls-about h2 { margin-top: 2.5rem; }

.ls-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 3rem 0; padding: 2rem 0; border-top: 1px solid var(--ls-rule); border-bottom: 1px solid var(--ls-rule); }
@media (max-width: 600px) { .ls-stats { grid-template-columns: 1fr; } }
.ls-stat .ls-num { font-family: var(--ls-serif); font-size: 2.8rem; line-height: 1; color: var(--ls-accent); }
.ls-stat .ls-lab { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ls-muted); margin-top: .35rem; }

.ls-contact { padding: clamp(3rem, 6vw, 5rem) 0; }
.ls-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
@media (max-width: 800px) { .ls-contact__grid { grid-template-columns: 1fr; } }
.ls-form .ls-field { margin-bottom: 1rem; }
.ls-form label { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: .4rem; }
.ls-form input, .ls-form textarea, .ls-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ls-rule);
    border-radius: var(--ls-radius);
    font-family: var(--ls-sans); font-size: 1rem;
    background: #fff;
}
.ls-form textarea { min-height: 160px; resize: vertical; }
.ls-form input:focus, .ls-form textarea:focus, .ls-form select:focus { outline: 0; border-color: var(--ls-ink); }

.ls-contact__info { padding: 1.5rem 0; }
.ls-contact__info h3 { font-size: 1.2rem; }
.ls-contact__info dl { display: grid; gap: 1rem; margin: 1rem 0; }
.ls-contact__info dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ls-muted); font-weight: 600; }
.ls-contact__info dd { margin: .2rem 0 0; font-family: var(--ls-serif); font-size: 1.1rem; }

/* ============ FOOTER ============ */
.ls-footer {
    background: var(--ls-ink);
    color: var(--ls-paper);
    padding: clamp(3rem, 5vw, 5rem) 0 1.5rem;
}
.ls-footer a { color: var(--ls-paper); opacity: .8; }
.ls-footer a:hover { opacity: 1; border-bottom-color: var(--ls-accent); }
.ls-footer__grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--ls-rule-dark);
}
@media (max-width: 800px) { .ls-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .ls-footer__grid { grid-template-columns: 1fr; } }
.ls-footer h4 { font-family: var(--ls-sans); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--ls-gold); margin-bottom: 1.25rem; font-weight: 600; }
.ls-footer ul { list-style: none; padding: 0; margin: 0; }
.ls-footer li { margin-bottom: .55rem; font-size: .92rem; }
.ls-footer__brand .ls-logo { font-size: 1.8rem; text-align: left; color: var(--ls-paper); margin-bottom: 1rem; }
.ls-footer__brand p { font-size: .92rem; opacity: .75; max-width: 38ch; }
.ls-footer__bottom {
    padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    font-size: .8rem; opacity: .7;
}

/* Utility */
.ls-screen-reader-text {
    position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden;
}
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }

/* Subtle reveal on scroll — ONLY hides content after JS has attached, so
   if scripts fail to load (CDN block, plugin conflict) content stays visible. */
@media (prefers-reduced-motion: no-preference) {
    html.ls-js .ls-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
    html.ls-js .ls-reveal.is-in { opacity: 1; transform: none; }
}

/* Hide empty card image area when there's no featured image (no ugly empty boxes) */
.ls-card__img:empty { display: none; }
/* Hide only TRULY empty hero images — the demo-gradient one is intentionally
   contentless and must still render. */
.ls-hero__image:empty:not(.ls-hero__image--demo) { display: none; }

/* ==========================================================================
   MOBILE OPTIMISATIONS  (v1.3)
   Tighten the header, topbar, nav and hero so everything fits a 360–430px
   viewport without overflow, cramping or 3-line logos.
   ========================================================================== */
@media (max-width: 860px) {
    /* Tighter page gutter on phones */
    :root { --ls-gutter: 16px; }

    /* Topbar — keep date + utility links, drop the long tagline */
    .ls-topbar { font-size: .72rem; }
    .ls-topbar__inner {
        padding: 8px 16px;
        gap: .75rem;
        flex-wrap: wrap;
    }
    .ls-topbar__inner > span:nth-child(2) { display: none; }

    /* Header — TWO ROW grid: [Sections | Subscribe] on top, big LOGO under */
    .ls-header__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "left  right"
            "logo  logo";
        gap: .75rem .5rem;
        padding: 12px 16px;
        align-items: center;
    }
    .ls-header__left  { grid-area: left;  justify-content: flex-start; }
    .ls-header__right { grid-area: right; justify-content: flex-end; }
    .ls-logo {
        grid-area: logo;
        grid-column: logo;
        font-size: clamp(2rem, 8vw, 2.8rem);
        text-align: center;
        width: 100%;
        line-height: 1;
    }
    .ls-logo a { display: inline-block; max-width: 100%; }
    .ls-logo img, .custom-logo { max-height: 60px; }

    /* "Sections" → icon-only square button */
    .ls-header__left .ls-btn {
        padding: 9px 12px;
        font-size: 0;
        line-height: 1;
    }
    .ls-header__left .ls-btn::before {
        content: "☰";
        font-size: 1.15rem;
    }

    /* Hide inline search on phones */
    .ls-search { display: none; }

    /* Compact Subscribe */
    .ls-header__right .ls-btn--accent {
        padding: 9px 14px;
        font-size: .78rem;
    }

    /* Primary nav — horizontal scroll, no mask (so first item never gets clipped) */
    .ls-nav__inner {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 16px;
    }
    .ls-nav__inner::-webkit-scrollbar { display: none; }
    .ls-nav ul {
        gap: 1.4rem;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
    }
    .ls-nav li { flex: 0 0 auto; }
    .ls-nav a {
        padding: 12px 0;
        font-size: .78rem;
        letter-spacing: .06em;
        white-space: nowrap;
    }

    /* Hero — tighter, image first, body sizes down */
    .ls-hero { padding: 1.25rem 0 1.5rem; }
    .ls-hero__grid { gap: 1.5rem; }
    .ls-hero__image { aspect-ratio: 4 / 3; margin-bottom: 1rem; border-radius: 3px; }
    .ls-hero__lead .ls-eyebrow { margin-bottom: .5rem; }
    .ls-hero__lead h1 { line-height: 1.08; margin-bottom: .65rem; }
    .ls-hero__lead .ls-dek { font-size: 1rem; margin-bottom: 1rem; }
    .ls-hero__sidebar { gap: 1rem; padding-top: 1.25rem; }
    .ls-side-card h3 { font-size: .98rem; }
}

@media (max-width: 480px) {
    .ls-topbar__date { font-size: .68rem; }
    .ls-logo { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    .ls-header__right .ls-btn--accent { padding: 8px 12px; font-size: .72rem; }
    .ls-nav a { font-size: .72rem; }
    .ls-hero__lead h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
}

/* Belt-and-braces: never let a stray child push the viewport wider than itself */
html, body { overflow-x: clip; }
body { max-width: 100vw; }

/* ============ DEMO PLACEHOLDERS ============ */
/* Editorial-tone gradient blocks used when a post has no featured image,
   so the homepage never shows empty cream rectangles. */
.ls-card__img--demo,
.ls-hero__image--demo {
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.18), transparent 55%),
        linear-gradient(135deg, var(--ls-ink) 0%, var(--ls-ink-2) 60%, #2c3a52 100%);
    position: relative;
}
.ls-card__img--demo::after,
.ls-hero__image--demo::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(90deg, rgba(200,16,46,.0) 0, rgba(200,16,46,.18) 100%);
    mix-blend-mode: screen;
}
.ls-card__img--demo[data-tone="football"]     { background: linear-gradient(135deg, #0E5C3A 0%, #0B0F14 100%); }
.ls-card__img--demo[data-tone="broadcasting"] { background: linear-gradient(135deg, #1A2230 0%, #C8102E 140%); }
.ls-card__img--demo[data-tone="integrity"]    { background: linear-gradient(135deg, #2A3342 0%, #B8945A 130%); }
.ls-card__img--demo[data-tone="governance"]   { background: linear-gradient(135deg, #0B0F14 0%, #1A2230 60%, #B8945A 130%); }
.ls-card__img--demo[data-tone="betting"]      { background: linear-gradient(135deg, #1A2230 0%, #0E5C3A 100%); }
.ls-card__img--demo[data-tone="olympic"]      { background: linear-gradient(135deg, #1A2230 0%, #C8102E 60%, #B8945A 130%); }
.ls-card__img--demo[data-tone="athletes"]     { background: linear-gradient(135deg, #0E5C3A 0%, #1A2230 60%, #C8102E 130%); }
.ls-card__img--demo[data-tone="analysis"],
.ls-hero__image--demo[data-tone="analysis"]    { background: linear-gradient(135deg, #1A2230 0%, #0B0F14 50%, #B8945A 130%); }
.ls-card__img--demo[data-tone="case-law"],
.ls-hero__image--demo[data-tone="case-law"]    { background: linear-gradient(135deg, #2A3342 0%, #1A2230 50%, #6e5a30 130%); }
.ls-card__img--demo[data-tone="op-ed"],
.ls-hero__image--demo[data-tone="op-ed"]       { background: linear-gradient(135deg, #1A2230 0%, #2A3342 60%, #C8102E 130%); }
.ls-card__img--demo[data-tone="esports"],
.ls-hero__image--demo[data-tone="esports"]     { background: linear-gradient(135deg, #2A1A3A 0%, #0B0F14 60%, #5A4ABF 130%); }
.ls-card__img--demo[data-tone="cas-tas"],
.ls-hero__image--demo[data-tone="cas-tas"]     { background: linear-gradient(135deg, #1A2230 0%, #0B0F14 50%, #8B6914 130%); }
/* Mirror the hero version of the existing tones so the lead post gets the
   same treatment as the card variants. */
.ls-hero__image--demo[data-tone="football"]     { background: linear-gradient(135deg, #0E5C3A 0%, #0B0F14 100%); }
.ls-hero__image--demo[data-tone="broadcasting"] { background: linear-gradient(135deg, #1A2230 0%, #C8102E 140%); }
.ls-hero__image--demo[data-tone="integrity"]    { background: linear-gradient(135deg, #2A3342 0%, #B8945A 130%); }
.ls-hero__image--demo[data-tone="governance"]   { background: linear-gradient(135deg, #0B0F14 0%, #1A2230 60%, #B8945A 130%); }
.ls-hero__image--demo[data-tone="betting"]      { background: linear-gradient(135deg, #1A2230 0%, #0E5C3A 100%); }
.ls-hero__image--demo[data-tone="athletes"]     { background: linear-gradient(135deg, #0E5C3A 0%, #1A2230 60%, #C8102E 130%); }
/* Subtle diagonal weave on hero variants too. */
.ls-hero__image--demo::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,.04) 18px 19px);
}
/* Editorial wordmark watermark on the hero placeholder. */
.ls-hero__image--demo .ls-hero__image-mark,
.ls-hero__image--demo::after {
    z-index: 1;
}
.ls-card__img--demo[data-tone="football"]::before,
.ls-card__img--demo[data-tone="broadcasting"]::before,
.ls-card__img--demo[data-tone="integrity"]::before,
.ls-card__img--demo[data-tone="governance"]::before,
.ls-card__img--demo[data-tone="betting"]::before,
.ls-card__img--demo[data-tone="olympic"]::before,
.ls-card__img--demo[data-tone="athletes"]::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,.04) 18px 19px);
}

.ls-card__dek {
    font-family: var(--ls-serif);
    font-style: italic;
    color: var(--ls-muted);
    font-size: .98rem;
    line-height: 1.45;
    margin: .35rem 0 .6rem;
}