/* SynonymGuide — editorial reference-tool aesthetic */

/* ─── Design tokens ────────────────────────────────────────────────────────── */
body.synonyms-brand {
    /* Frozen copies of the base tokens this brand used to inherit from
       design-system.css. SynonymGuide is deliberately insulated from the
       Syllables World kids design kit and keeps its current look until it
       receives its own design pass. Do not re-point these at kit tokens.
       See docs/superpowers/specs/2026-08-20-design-kit-adoption-design.md

       This is the COMPLETE pre-change --ds-*/--sw-*/legacy base-token set
       (all 78 custom properties design-system.css's :root defined before
       the rebrand), not just the subset synonyms-site.css itself
       references. An earlier pass froze only 7 tokens picked by grepping
       this file's own var() usages, but design-system.css styles
       SynonymGuide's DOM directly (.breadcrumb, .button.is-light/.is-ghost,
       .tag.is-info.is-light, .input/.textarea, etc.) using base tokens this
       file never touches — so that partial freeze still leaked the new kit
       through. All values below are literals, not var() forwards: a
       forwarded var() is exactly what let the earlier leak happen, since a
       later phase can silently re-point the variable it forwards to. */
    --ds-ink: #1A1A2E;
    --ds-border-width-sm: 2px;
    --ds-border-width-md: 3px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 14px;
    --ds-shadow-md: 3px 3px 0 #1A1A2E;
    --ds-shadow-lg: 5px 5px 0 #1A1A2E;
    --ds-radius-sm: 10px;
    --ds-radius-xl: 20px;
    --ds-shadow-sm: 2px 2px 0 #1A1A2E;

    /* Not a pre-kit token. --line is new, but design-system.css rules already
       use it (.navbar's border-bottom), and those rules paint this brand's DOM
       too — so it reaches SynonymGuide whether or not it predates the kit.
       Pinned here in this brand's own idiom: a 2px ink rule, not the kit's
       1.5px cream hairline. Later phases will rewrite more rules onto kit
       tokens; each new token they reach for needs pinning here the same way,
       and the test suite fails until it is. */
    --line: 2px solid #1A1A2E;

    --ds-font-display: 'Baloo 2', system-ui, sans-serif;
    --ds-font-body: 'Nunito Sans', system-ui, sans-serif;
    --ds-primary: #FF5A5F;
    --ds-primary-hover: #E14548;
    --ds-primary-pressed: #C93A3D;
    --ds-link: #37A8FF;
    --ds-link-hover: #2196F3;
    --ds-accent-yellow: #FFD84D;
    --ds-accent-green: #34C38F;
    --ds-bg: #ffffff;
    --ds-surface: #ffffff;
    --ds-text: #1A1A2E;
    --ds-text-soft: #4a4a5e;
    --ds-border: rgba(26, 26, 46, 0.14);
    --ds-tag-info-bg: #DBEAFE;
    --ds-tag-info-text: #1E3A8A;
    --ds-tag-success-bg: #D1FAE5;
    --ds-tag-success-text: #065F46;
    --ds-tag-warning-bg: #FEF3C7;
    --ds-tag-warning-text: #92400E;
    --ds-tag-danger-bg: #FFE1E2;
    --ds-tag-danger-text: #9F1D24;
    --text-color: #1A1A2E;
    --text-color-light: #4a4a5e;
    --heading-color: #1A1A2E;
    --background-color: #ffffff;
    --background-light: rgba(26, 26, 46, 0.04);
    --background-dark: rgba(26, 26, 46, 0.14);
    --border-radius: 12px;
    --box-shadow: 3px 3px 0 #1A1A2E;
    --transition-speed: 0.3s;
    --font-family: 'Nunito Sans', system-ui, sans-serif;
    --font-family-heading: 'Baloo 2', system-ui, sans-serif;
    --font-weight-strong: 600;
    --ds-button-primary-background-color: #FF5A5F;
    --ds-button-primary-background-color-hover: #E14548;
    --ds-button-primary-text-color: #ffffff;
    --ds-link-primary-color: #37A8FF;
    --ds-text-on-surface: #1A1A2E;
    --ds-text-on-mint-wash: #1A1A2E;
    --ds-eyebrow-banner-light-positive-background-color: rgba(52, 195, 143, 0.15);
    --sw-primary: #FF5A5F;
    --sw-surface: #ffffff;
    --sw-font-display: 'Baloo 2', system-ui, sans-serif;
    --primary-color: #FF5A5F;
    --primary-color-dark: #E14548;
    --secondary-color: #34C38F;
    --background-positive-light: #e8faf3;
    --background-positive-dark: #1a5c45;
    --sw-bg: #fffaf4;
    --sw-surface-soft: #f7fbff;
    --sw-text: #223049;
    --sw-text-soft: #5b6780;
    --sw-primary-hover: #E14548;
    --sw-primary-light: rgba(255, 90, 95, 0.12);
    --sw-secondary: #7c5cff;
    --sw-accent-yellow: #ffd84d;
    --sw-accent-green: #34c38f;
    --sw-accent-coral: #ff7a7a;
    --sw-accent-orange: #ff9f43;
    --sw-border: #dce8f5;
    --sw-shadow: 0 10px 30px rgba(55, 110, 180, 0.12);
    --sw-shadow-hover: 0 14px 36px rgba(55, 110, 180, 0.18);
    --sw-radius-sm: 12px;
    --sw-radius-md: 18px;
    --sw-radius-lg: 26px;
    --sw-container: 1120px;
    --sw-font-body: "Nunito Sans", "Nunito", system-ui, sans-serif;

    --sg-font-display: 'Sora', system-ui, sans-serif;
    --sg-font-body: 'Nunito Sans', system-ui, sans-serif;
    --sg-ink: var(--ds-ink);
    --sg-primary: #4F46E5;
    --sg-primary-dark: #4338CA;
    --sg-accent: #b8902a;
    --sg-accent-light: rgba(184, 144, 42, 0.12);
    --sg-surface: #ffffff;
    --sg-surface-2: #F5F5FA;
    --sg-card: #ffffff;
    --sg-border: var(--ds-ink);
    --sg-border-med: var(--ds-ink);
    --sg-text: #1A1A2E;
    --sg-text-muted: #6b6b7e;

    background: var(--sg-surface) !important;
    font-family: var(--sg-font-body);
    color: var(--sg-text);
}

/* Sora display font (final-review fix, 2026-08-10): previously only .site-logo
   and .word-hero-title used --sg-font-display — every other heading fell
   through to the Syllables World default (Baloo 2), undermining the point
   of loading a separate font for this brand. */
body.synonyms-brand h1,
body.synonyms-brand h2,
body.synonyms-brand h3,
body.synonyms-brand h4,
body.synonyms-brand h5,
body.synonyms-brand h6,
body.synonyms-brand .title {
    font-family: var(--sg-font-display);
}

/* ─── Accessibility ────────────────────────────────────────────────────────── */
.is-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Navbar ───────────────────────────────────────────────────────────────── */
body.synonyms-brand .synonyms-site-header .navbar {
    background: #fff !important;
    box-shadow: none;
    border-bottom: var(--ds-border-width-md) solid var(--ds-ink);
}

body.synonyms-brand .synonyms-site-header .navbar-inner {
    border-bottom: none;
}

body.synonyms-brand .synonyms-site-header .site-logo {
    font-family: var(--sg-font-display) !important;
    color: var(--sg-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    font-size: 1.2rem !important;
}

body.synonyms-brand .synonyms-site-header .navbar-item {
    font-family: var(--sg-font-body);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--sg-text) !important;
    border-radius: 6px;
    margin: 0 0.05rem;
    transition: background 0.15s, color 0.15s;
}

body.synonyms-brand .synonyms-site-header .navbar-item:hover {
    background: var(--sg-surface-2) !important;
    color: var(--sg-primary) !important;
}

/* ─── Section spacing ──────────────────────────────────────────────────────── */
body.synonyms-brand main .section {
    padding-top: 1.5rem;
}

/* ─── Breadcrumb ───────────────────────────────────────────────────────────── */
body.synonyms-brand .breadcrumb {
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--sg-border);
    padding-bottom: 0.75rem;
}

body.synonyms-brand .breadcrumb a {
    color: var(--sg-primary);
    text-decoration: none;
}

body.synonyms-brand .breadcrumb a:hover {
    text-decoration: underline;
}

body.synonyms-brand .breadcrumb li.is-active a {
    color: var(--sg-text-muted);
    cursor: default;
}

/* ─── Search bar ───────────────────────────────────────────────────────────── */
body.synonyms-brand .search-container {
    margin-bottom: 2rem;
}

body.synonyms-brand .search-form .input-group {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--sg-border-med);
    background: var(--sg-card);
    transition: border-color 0.2s;
}

body.synonyms-brand .search-form .input-group:focus-within {
    border-color: var(--sg-primary);
    box-shadow: 0 0 0 3px rgba(15, 82, 108, 0.12);
}

body.synonyms-brand .search-container .input-enhanced,
body.synonyms-brand .search-form .input {
    flex: 1;
    height: 50px;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
    font-family: var(--sg-font-body);
    font-size: 1rem;
    color: var(--sg-ink);
    padding: 0 1rem;
}

body.synonyms-brand .search-container .input-enhanced:focus,
body.synonyms-brand .search-form .input:focus {
    outline: none;
    box-shadow: none !important;
}

body.synonyms-brand .search-container .button-enhanced.primary,
body.synonyms-brand .search-form .button.is-primary {
    height: 50px;
    padding: 0 1.5rem;
    background: var(--sg-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--sg-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s;
}

body.synonyms-brand .search-container .button-enhanced.primary:hover,
body.synonyms-brand .search-form .button.is-primary:hover {
    background: var(--sg-primary-dark) !important;
}

/* ─── Word hero ────────────────────────────────────────────────────────────── */
.word-hero {
    padding: 0.5rem 0 2rem;
    max-width: 52rem;
}

.word-hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sg-accent);
    margin: 0 0 0.35rem;
}

.word-hero-title {
    font-family: var(--sg-font-display) !important;
    font-size: clamp(2.4rem, 6vw, 4.5rem) !important;
    font-weight: 800 !important;
    color: var(--sg-ink) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    margin-bottom: 0.75rem !important;
}

.word-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.word-hero-subtitle {
    font-size: 0.95rem;
    color: var(--sg-text-muted);
    line-height: 1.5;
}

.word-hero-subtitle a {
    color: var(--sg-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.word-hero-subtitle strong {
    color: var(--sg-text);
    font-weight: 600;
}

body.synonyms-brand .tag.is-info.is-light {
    background: var(--sg-accent-light) !important;
    color: var(--sg-accent) !important;
    border: 1px solid rgba(184, 144, 42, 0.25) !important;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
}

/* ─── Definition block ─────────────────────────────────────────────────────── */
.definition-block {
    background: var(--sg-card);
    border-radius: 10px;
    border: 1px solid var(--sg-border);
    border-left: 4px solid var(--sg-accent);
    padding: 1.1rem 1.4rem;
    margin-bottom: 2rem;
    max-width: 48rem;
}

.definition-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sg-accent);
    margin: 0 0 0.4rem;
}

.definition-text {
    font-size: 1rem;
    color: var(--sg-ink);
    line-height: 1.65;
    margin: 0;
}

/* ─── Section headings ─────────────────────────────────────────────────────── */
body.synonyms-brand h2.title.is-4,
body.synonyms-brand h2.title.is-5,
body.synonyms-brand h2.title.is-6 {
    font-family: var(--sg-font-body) !important;
    font-weight: 700 !important;
    color: var(--sg-ink) !important;
    letter-spacing: -0.01em;
}

body.synonyms-brand h2.title.is-4 {
    font-size: 1.15rem !important;
    margin-bottom: 0.75rem !important;
}

/* ─── Synonym chips ────────────────────────────────────────────────────────── */
.synonym-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.synonym-chip-list a {
    display: inline-block;
    padding: 0.42rem 0.9rem;
    border-radius: 6px;
    background: var(--sg-card);
    color: var(--sg-primary);
    font-family: var(--sg-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--sg-border-med);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    line-height: 1.4;
}

.synonym-chip-list a:hover {
    border-color: var(--sg-primary);
    box-shadow: 0 2px 8px rgba(15, 82, 108, 0.14);
    transform: translateY(-1px);
    color: var(--sg-primary-dark);
}

.synonym-chip-list a:focus-visible {
    outline: 3px solid rgba(184, 144, 42, 0.5);
    outline-offset: 2px;
}

/* ─── Popular words (notification) ────────────────────────────────────────── */
body.synonyms-brand .notification.is-light {
    background: var(--sg-surface-2) !important;
    border: 1px solid var(--sg-border) !important;
    border-radius: 10px;
}

body.synonyms-brand .notification.is-light .title {
    font-family: var(--sg-font-body) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sg-text-muted) !important;
    margin-bottom: 0.6rem !important;
}

body.synonyms-brand .notification.is-light .synonym-chip-list a {
    background: rgba(248, 245, 239, 0.6);
    font-size: 0.85rem;
    padding: 0.32rem 0.75rem;
    border-color: var(--sg-border);
    color: var(--sg-text);
}

body.synonyms-brand .notification.is-light .synonym-chip-list a:hover {
    border-color: var(--sg-primary);
    color: var(--sg-primary);
}

/* ─── Cards / aside boxes ──────────────────────────────────────────────────── */
body.synonyms-brand .box,
body.synonyms-brand .synonyms-aside {
    border-radius: var(--ds-radius-lg) !important;
    border: var(--ds-border-width-md) solid var(--ds-ink) !important;
    box-shadow: var(--ds-shadow-lg) !important;
    background: var(--sg-card) !important;
    transition: transform 0.15s;
}

body.synonyms-brand .box:hover {
    transform: translateY(-2px);
}

body.synonyms-brand .synonyms-aside a {
    color: var(--sg-primary);
    font-weight: 600;
    text-decoration: none;
}

body.synonyms-brand .synonyms-aside a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.synonyms-brand .synonyms-aside ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
}

body.synonyms-brand .synonyms-aside ul li + li {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--sg-border);
}

/* ─── Explore more / content block ────────────────────────────────────────── */
body.synonyms-brand .content a {
    color: var(--sg-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

body.synonyms-brand .content a:hover {
    color: var(--sg-primary-dark);
}

/* ─── Long-form prose ──────────────────────────────────────────────────────── */
body.synonyms-brand article.content,
body.synonyms-brand .content.synonyms-prose {
    max-width: 42rem;
}

body.synonyms-brand article.content p,
body.synonyms-brand .content.synonyms-prose p {
    line-height: 1.75;
    font-size: 1.02rem;
}

/* ─── Footer ───────────────────────────────────────────────────────────── */
body.synonyms-brand .footer {
    background: var(--sg-ink) !important;
    color: rgba(255, 255, 255, 0.65);
    border-top: none !important;
    padding: 3rem 1.5rem 2rem;
}

body.synonyms-brand .footer .bd-footer-link-title {
    color: rgba(255, 255, 255, 0.95) !important;
    font-family: var(--sg-font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.85rem !important;
}

body.synonyms-brand .footer .bd-footer-link {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

body.synonyms-brand .footer a {
    color: rgba(255, 255, 255, 0.58) !important;
    text-decoration: none;
    transition: color 0.15s;
    opacity: 1 !important;
}

body.synonyms-brand .footer a:hover {
    color: rgba(255, 255, 255, 0.95) !important;
    transform: none !important;
}

body.synonyms-brand .footer .footer-divider {
    background-color: rgba(255, 255, 255, 0.1) !important;
    height: 1px;
    border: none;
    margin: 2rem 0;
}

body.synonyms-brand .footer strong {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.synonyms-brand .footer .content p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
}

/* ─── IPA phonetic ─────────────────────────────────────────────────────────── */
.word-hero-ipa {
    font-family: 'Georgia', serif;
    font-size: 1rem;
    color: var(--sg-text-muted);
    letter-spacing: 0.02em;
}

/* ─── Register grid ─────────────────────────────────────────────────────────── */
.register-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.register-block {
    flex: 1 1 200px;
}

.register-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
    margin: 0 0 0.4rem;
}

/* ─── Antonym chips ─────────────────────────────────────────────────────────── */
.antonym-chip-list a,
.antonym-chip-list .chip-plain {
    border-color: rgba(180, 60, 40, 0.25) !important;
    color: #a83228 !important;
}

.antonym-chip-list a:hover {
    border-color: #a83228 !important;
    color: #7a2520 !important;
}

.chip-plain {
    display: inline-block;
    padding: 0.42rem 0.9rem;
    border-radius: 6px;
    background: var(--sg-card);
    font-family: var(--sg-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    border: 1.5px solid var(--sg-border-med);
    line-height: 1.4;
    color: var(--sg-text);
}

/* ─── Collocations ──────────────────────────────────────────────────────────── */
.collocation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.collocation-list li {
    background: var(--sg-surface-2);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
    color: var(--sg-text);
    font-style: italic;
}

/* ─── Word family ───────────────────────────────────────────────────────────── */
.word-family-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}

.word-family-item {
    font-size: 0.95rem;
    color: var(--sg-text);
}

.wf-pos {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
    margin-right: 0.35rem;
}

.word-family-item a {
    color: var(--sg-primary);
    font-weight: 600;
    text-decoration: none;
}

.word-family-item a:hover {
    text-decoration: underline;
}

/* ─── Usage note ────────────────────────────────────────────────────────────── */
.usage-note {
    background: var(--sg-accent-light);
    border: 1px solid rgba(184, 144, 42, 0.2);
    border-left: 4px solid var(--sg-accent);
    border-radius: 8px;
    padding: 1rem 1.3rem;
    max-width: 48rem;
}

.usage-note-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sg-accent);
    margin: 0 0 0.35rem;
}

.usage-note-text {
    font-size: 0.96rem;
    color: var(--sg-ink);
    line-height: 1.65;
    margin: 0;
}

/* ─── Example sentences ─────────────────────────────────────────────────────── */
.example-sentences {
    padding-left: 1.25rem;
    max-width: 46rem;
}

.example-sentences li {
    font-size: 0.97rem;
    color: var(--sg-text);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

/* ─── Quotes ────────────────────────────────────────────────────────────────── */
.quotes-list {
    list-style: none;
    padding: 0;
    max-width: 46rem;
}

.quotes-list li {
    margin-bottom: 0.75rem;
}

.quotes-list blockquote {
    background: var(--sg-surface-2);
    border-left: 3px solid var(--sg-border-med);
    margin: 0;
    padding: 0.75rem 1.1rem;
    border-radius: 0 6px 6px 0;
    font-size: 0.95rem;
    color: var(--sg-text);
    font-style: italic;
    line-height: 1.65;
}

/* ─── Tighter boxes on word page ───────────────────────────────────────── */
body.synonyms-brand .box.synonyms-aside,
body.synonyms-brand .columns .box {
    padding: 1.1rem 1.3rem !important;
}

body.synonyms-brand .columns .box .title.is-5 {
    font-size: 0.9rem !important;
    margin-bottom: 0.4rem !important;
}

body.synonyms-brand .columns .box p {
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.6;
}

/* ─── Home word list ────────────────────────────────────────────────────── */
.home-word-list {
    max-height: 280px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.home-word-list a {
    font-size: 0.85rem;
    padding: 0.32rem 0.72rem;
}

/* ─── Buttons (global brand overrides) ─────────────────────────────────────── */
body.synonyms-brand .button.is-primary {
    background: var(--sg-primary) !important;
    color: #fff !important;
    border-color: var(--ds-ink) !important;
    font-family: var(--sg-font-body);
    font-weight: 700;
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-md);
}
body.synonyms-brand .button.is-primary:hover,
body.synonyms-brand .button.is-primary:focus {
    background: var(--sg-primary-dark) !important;
    color: #fff !important;
    border-color: var(--ds-ink) !important;
}
body.synonyms-brand .button.is-primary.is-light {
    background: rgba(79, 70, 229, 0.10) !important;
    color: var(--sg-primary) !important;
    border-color: var(--ds-ink) !important;
    font-weight: 700;
}
body.synonyms-brand .button.is-primary.is-light:hover,
body.synonyms-brand .button.is-primary.is-light:focus {
    background: rgba(79, 70, 229, 0.18) !important;
    color: var(--sg-primary-dark) !important;
}
body.synonyms-brand .button.is-ghost {
    color: var(--sg-primary) !important;
    background: transparent !important;
    border: var(--ds-border-width-sm) dashed var(--ds-ink) !important;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .word-hero {
        padding: 0.25rem 0 1.5rem;
    }

    .word-hero-title {
        font-size: clamp(2rem, 10vw, 3rem) !important;
    }

    .word-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .definition-block {
        padding: 0.9rem 1.1rem;
    }

    body.synonyms-brand .search-form .input-group {
        border-radius: 10px;
    }

    .synonym-chip-list a {
        font-size: 0.87rem;
        padding: 0.38rem 0.78rem;
    }
}

/* ─── Restored rules (final-review fix, 2026-08-10) ───────────────────────
   Task 6 deleted the trailing Bulma-workaround block correctly, but these
   two rules aren't Bulma workarounds — real Bulma doesn't replace them.
   .button is nowrap with no small-screen escape, so long SynonymGuide
   button labels overflow their pill below 480px without this. */
body.synonyms-brand .box .button { margin: 0 0.5rem 0.5rem 0; }
@media (max-width: 480px) {
    body.synonyms-brand .button { white-space: normal; text-align: center; line-height: 1.3; }
}