/**
 * Slate Studio Template - CSS
 * Structural Minimalism. Inter exclusive. Monochromatic grayscale.
 * No shadows, no gradients. Tonal layering + 1px borders.
 * Swiss-inspired spacing, mathematical rhythm.
 */

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
    /* Colors — Monochromatic grayscale */
    --ss-primary:          #0a1422;   /* Near-black — primary text, brand */
    --ss-primary-container:#1f2937;   /* Dark slate — buttons, badges */
    --ss-secondary:        #555f6d;   /* Gray — secondary text, captions */
    --ss-bg:               #f8f9fa;   /* Off-white — page bg */
    --ss-surface-low:      #f3f4f5;   /* Level 1 — containers, footer */
    --ss-surface:          #edeeef;   /* surface-container */
    --ss-surface-high:     #e7e8e9;   /* surface-container-high */
    --ss-surface-highest:  #e1e3e4;   /* surface-container-highest */
    --ss-white:            #ffffff;   /* Level 0 — card bg, nav bg */
    --ss-border:           #c5c6cc;   /* outline-variant — 1px borders */
    --ss-outline:          #75777c;   /* outline — dots, dividers */
    --ss-text:             #191c1d;   /* on-surface — primary text */
    --ss-text-variant:     #44474c;   /* on-surface-variant */
    --ss-inverse-bg:       #2e3132;   /* Dark bg for inverse */
    --ss-inverse-text:     #f0f1f2;   /* Light text on dark */

    /* Typography */
    --ss-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ss-size-display:    48px;
    --ss-size-display-m:  32px;
    --ss-size-headline:   24px;
    --ss-size-body-lg:    18px;
    --ss-size-body:       16px;
    --ss-size-label:      12px;

    /* Spacing (4px base unit) */
    --ss-xs:     8px;
    --ss-sm:     16px;
    --ss-md:     24px;
    --ss-lg:     48px;
    --ss-xl:     80px;
    --ss-gutter: 24px;
    --ss-margin: 32px;

    /* Layout */
    --ss-container: 1280px;  /* max-w-7xl */
    --ss-reading:   680px;   /* Reading column */

    /* Shape */
    --ss-radius:    4px;   /* 0.25rem */
    --ss-radius-lg: 8px;   /* 0.5rem */
}

/* ============================================================
   Reset / Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--ss-font);
    font-size: var(--ss-size-body);
    line-height: 1.5;
    font-weight: 400;
    color: var(--ss-text);
    background: var(--ss-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Custom scrollbar (structural, thin) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ss-surface-low); }
::-webkit-scrollbar-thumb { background: var(--ss-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ss-primary-container); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

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

/* ============================================================
   Container
   ============================================================ */
.ss-container {
    max-width: var(--ss-container);
    margin-inline: auto;
    padding-inline: var(--ss-margin);
}
@media (max-width: 767px) { .ss-container { padding-inline: var(--ss-sm); } }

.ss-reading-col {
    max-width: var(--ss-reading);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ============================================================
   Header / Nav
   ============================================================ */
.ss-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    background: var(--ss-white);
    border-bottom: 1px solid var(--ss-border);
    transition: box-shadow 0.2s ease;
}

.ss-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.ss-nav-left {
    display: flex;
    align-items: center;
    gap: var(--ss-xl);
}

/* Brand */
.ss-brand { display: flex; align-items: center; flex-shrink: 0; }
.ss-brand-text {
    font-family: var(--ss-font);
    font-size: var(--ss-size-headline);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
    line-height: 1.3;
}

/* Desktop nav */
.ss-nav-links {
    display: flex;
    align-items: center;
    gap: var(--ss-md);
}
.ss-nav-link {
    font-size: var(--ss-size-body);
    font-weight: 400;
    color: var(--ss-text-variant);
    transition: color 0.2s;
    padding-bottom: 2px;
}
.ss-nav-link:hover { color: var(--ss-primary); }
.ss-nav-link--active {
    color: var(--ss-primary);
    border-bottom: 2px solid var(--ss-primary);
}

/* Nav right */
.ss-nav-right {
    display: flex;
    align-items: center;
    gap: var(--ss-sm);
}

.ss-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ss-xs);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ss-primary);
    transition: color 0.2s;
}
.ss-search-btn:hover { color: var(--ss-primary-container); }

/* Hamburger */
.ss-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ss-primary);
    padding: 4px;
}
@media (max-width: 768px) {
    .ss-hamburger { display: flex; }
    .ss-nav-links { display: none; }
    .ss-nav-left { gap: 0; }
}

/* Search overlay */
.ss-search-overlay {
    background: var(--ss-surface-low);
    border-top: 1px solid var(--ss-border);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}
.ss-search-overlay.is-open { max-height: 80px; }
.ss-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
.ss-search-icon { color: var(--ss-text-variant); flex-shrink: 0; }
.ss-search-field {
    flex: 1;
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-lg);
    padding: 8px 16px;
    font-family: var(--ss-font);
    font-size: var(--ss-size-body);
    color: var(--ss-text);
    outline: none;
    transition: border-color 0.2s;
}
.ss-search-field:focus { border-color: var(--ss-primary); border-width: 2px; }
.ss-search-field::placeholder { color: var(--ss-outline); }

/* Mobile drawer */
.ss-mobile-drawer {
    background: var(--ss-white);
    border-top: 1px solid var(--ss-border);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    display: flex;
    flex-direction: column;
}
.ss-mobile-drawer.is-open { max-height: 400px; }
.ss-mobile-link {
    display: block;
    padding: 14px 20px;
    font-size: var(--ss-size-body);
    color: var(--ss-text-variant);
    border-bottom: 1px solid var(--ss-border);
    transition: color 0.2s, background 0.2s;
}
.ss-mobile-link:hover { color: var(--ss-primary); background: var(--ss-surface-low); }

/* ============================================================
   Main
   ============================================================ */
.ss-main {
    flex: 1;
}

/* ============================================================
   Common Elements
   ============================================================ */

/* Divider line */
.ss-divider {
    width: 100%;
    height: 1px;
    background: var(--ss-border);
    margin: var(--ss-lg) 0;
}
.ss-divider--wide { margin: var(--ss-xl) 0; }

/* Title bar: 24px wide, 4px thick, primary color */
.ss-title-bar {
    width: 96px;
    height: 4px;
    background: var(--ss-primary);
    margin: var(--ss-md) 0;
}
.ss-title-bar--center { margin-inline: auto; }

/* Section title */
.ss-section-title {
    font-size: var(--ss-size-headline);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
    line-height: 1.3;
}

/* Metadata row */
.ss-meta {
    display: flex;
    align-items: center;
    gap: var(--ss-sm);
    margin-bottom: var(--ss-xs);
}
.ss-meta-category {
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ss-secondary);
    transition: color 0.2s;
}
.ss-meta-category:hover { color: var(--ss-primary); }
.ss-meta-dot {
    width: 4px;
    height: 4px;
    background: var(--ss-outline);
    border-radius: 50%;
    flex-shrink: 0;
}
.ss-meta-date {
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ss-secondary);
}

/* Chip / tag */
.ss-chip {
    display: inline-block;
    background: var(--ss-surface-low);
    color: var(--ss-secondary);
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--ss-radius);
    transition: color 0.2s;
}
.ss-chip:hover { color: var(--ss-primary); }
.ss-chip--muted {
    background: var(--ss-surface-low);
    color: var(--ss-secondary);
}
.ss-chip--bordered {
    background: var(--ss-surface-low);
    border: 1px solid var(--ss-border);
}

/* Chip used in article page (outline only) */
.ss-chip-muted {
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ss-outline);
}

/* Read article link */
.ss-read-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-xs);
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ss-primary);
    transition: gap 0.2s;
}
.ss-read-link:hover { gap: var(--ss-sm); }
.ss-read-arrow { transition: transform 0.2s; }

/* Label uppercase */
.ss-label-upper {
    display: block;
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ss-secondary);
    margin-bottom: var(--ss-xs);
}

/* Primary button */
.ss-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ss-primary-container);
    color: var(--ss-white);
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 32px;
    border: none;
    border-radius: var(--ss-radius-lg);
    cursor: pointer;
    transition: background 0.2s;
}
.ss-btn-primary:hover { background: var(--ss-primary); }

/* Empty state */
.ss-empty {
    color: var(--ss-secondary);
    text-align: center;
    padding: var(--ss-xl) 0;
    font-size: var(--ss-size-body-lg);
}

/* HR separator */
.ss-hr {
    border: none;
    border-top: 1px solid var(--ss-border);
    opacity: 0.5;
    margin: 0;
}

/* ============================================================
   Homepage
   ============================================================ */
.ss-homepage { padding-top: var(--ss-lg); padding-bottom: var(--ss-xl); }

/* Hero featured */
.ss-hero {
    margin-bottom: var(--ss-xl);
    cursor: pointer;
}
.ss-hero-image-link { display: block; }
.ss-hero-image-wrap {
    position: relative;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--ss-surface-low);
    border: 1px solid var(--ss-border);
    margin-bottom: var(--ss-md);
}
.ss-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.ss-hero:hover .ss-hero-image { transform: scale(1.05); }
.ss-hero-badge {
    position: absolute;
    top: var(--ss-sm);
    left: var(--ss-sm);
    background: var(--ss-primary);
    color: var(--ss-white);
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px var(--ss-sm);
}
.ss-hero-body { max-width: 900px; }
.ss-hero-title {
    font-size: var(--ss-size-display-m);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
    margin-bottom: var(--ss-sm);
}
.ss-hero-title a { color: inherit; }
@media (min-width: 768px) {
    .ss-hero-title { font-size: var(--ss-size-display); line-height: 1.1; letter-spacing: -0.02em; }
}
.ss-hero-excerpt {
    font-size: var(--ss-size-body-lg);
    line-height: 1.6;
    color: var(--ss-text-variant);
    max-width: 720px;
}

/* Latest section */
.ss-latest { margin-bottom: var(--ss-xl); }
.ss-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--ss-sm);
    border-bottom: 1px solid var(--ss-border);
    margin-bottom: var(--ss-lg);
}

/* ============================================================
   Vertical List (shared: homepage, category, search)
   ============================================================ */
.ss-list {
    display: flex;
    flex-direction: column;
    gap: var(--ss-lg);
}

.ss-list-item {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--ss-md);
    align-items: start;
    cursor: pointer;
}
@media (max-width: 768px) {
    .ss-list-item { grid-template-columns: 1fr; }
}

.ss-list-image-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ss-surface-low);
    border: 1px solid var(--ss-border);
}
@media (max-width: 768px) {
    .ss-list-image-wrap { aspect-ratio: 16 / 9; }
}
.ss-list-image-wrap--search {
    width: 256px;
    aspect-ratio: 4 / 3;
}
@media (max-width: 768px) {
    .ss-list-image-wrap--search { width: 100%; aspect-ratio: 16 / 9; }
}

.ss-list-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.ss-list-item:hover .ss-list-image { transform: scale(1.05); }

.ss-list-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 0;
}

.ss-list-title {
    font-size: var(--ss-size-headline);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
    margin-bottom: var(--ss-sm);
    transition: color 0.2s;
}
.ss-list-title a { color: inherit; }
.ss-list-item:hover .ss-list-title { color: var(--ss-secondary); }

.ss-list-excerpt {
    font-size: var(--ss-size-body);
    line-height: 1.5;
    color: var(--ss-text-variant);
    margin-bottom: var(--ss-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .ss-list-excerpt { -webkit-line-clamp: unset; }
}

/* Search list: tighter spacing with hr separators */
.ss-list--search { gap: var(--ss-lg); }
.ss-list--search .ss-list-item {
    grid-template-columns: 256px 1fr;
}
@media (max-width: 768px) {
    .ss-list--search .ss-list-item { grid-template-columns: 1fr; }
}

/* ============================================================
   Single Post
   ============================================================ */
.ss-single-wrap {
    padding-bottom: var(--ss-xl);
}

/* Hero image (full-width, edge-to-edge) */
.ss-article-hero {
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--ss-md);
}
.ss-article-hero img {
    width: 100%;
    height: 614px;
    object-fit: cover;
}
@media (max-width: 767px) {
    .ss-article-hero img { height: 280px; }
}

/* Article header */
.ss-article-header {
    margin-top: var(--ss-md);
    margin-bottom: var(--ss-lg);
}
.ss-article-chips {
    display: flex;
    align-items: center;
    gap: var(--ss-xs);
    margin-bottom: var(--ss-sm);
}
.ss-article-title {
    font-size: var(--ss-size-display-m);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
    margin-bottom: var(--ss-sm);
}
@media (min-width: 768px) {
    .ss-article-title { font-size: var(--ss-size-display); line-height: 1.1; letter-spacing: -0.02em; }
}

/* Byline */
.ss-article-byline {
    display: flex;
    align-items: center;
    gap: var(--ss-sm);
    padding-top: var(--ss-sm);
    border-top: 1px solid var(--ss-border);
}
.ss-byline-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ss-surface-high);
    flex-shrink: 0;
}
.ss-byline-info { display: flex; flex-direction: column; }
.ss-byline-name {
    font-size: var(--ss-size-body);
    font-weight: 700;
    color: var(--ss-primary);
}
.ss-byline-date {
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ss-secondary);
}

/* ============================================================
   Prose
   ============================================================ */
.ss-prose {
    font-size: var(--ss-size-body);
    line-height: 1.5;
    color: var(--ss-text-variant);
}
.ss-prose > * + * { margin-top: var(--ss-sm); }

/* Drop cap */
.ss-prose > p:first-child {
    font-size: var(--ss-size-body-lg);
    line-height: 1.6;
}
.ss-prose > p:first-child::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.8;
    font-weight: 700;
    color: var(--ss-primary);
    padding-right: 12px;
    padding-top: 4px;
}

.ss-prose h2 {
    font-size: var(--ss-size-headline);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
    margin-top: var(--ss-lg);
    margin-bottom: var(--ss-sm);
}
.ss-prose h3 {
    font-size: var(--ss-size-body-lg);
    font-weight: 600;
    color: var(--ss-primary);
    margin-top: var(--ss-md);
    margin-bottom: var(--ss-xs);
}
.ss-prose p { margin-bottom: var(--ss-md); }
.ss-prose a { color: var(--ss-primary); text-decoration: underline; text-underline-offset: 3px; }
.ss-prose a:hover { text-decoration-thickness: 2px; }

/* Grey accent bar (Stitch: border-l-4 border-primary bg-surface-container-low) */
.ss-prose blockquote {
    background: var(--ss-surface-low);
    border-left: 4px solid var(--ss-primary);
    padding: var(--ss-lg);
    margin-block: var(--ss-lg);
    font-style: italic;
}
.ss-prose blockquote h3 {
    font-style: normal;
    margin-top: 0;
}

/* Pull quote (centered, border-y) */
.ss-prose .pullquote,
.ss-prose blockquote.pullquote {
    background: none;
    border-left: none;
    border-top: 1px solid var(--ss-border);
    border-bottom: 1px solid var(--ss-border);
    text-align: center;
    padding: var(--ss-lg) var(--ss-md);
    margin-block: var(--ss-xl);
    font-size: var(--ss-size-display-m);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
}

.ss-prose ul, .ss-prose ol {
    padding-left: var(--ss-md);
    margin-bottom: var(--ss-md);
}
.ss-prose li { margin-bottom: var(--ss-xs); }
.ss-prose strong { font-weight: 600; }
.ss-prose em { font-style: italic; }
.ss-prose code {
    font-size: 0.875em;
    background: var(--ss-surface-low);
    padding: 2px 6px;
    border-radius: var(--ss-radius);
    font-family: monospace;
}
.ss-prose pre {
    background: var(--ss-surface-low);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-lg);
    padding: 20px;
    overflow-x: auto;
    margin-bottom: var(--ss-md);
}
.ss-prose pre code { background: none; padding: 0; }
.ss-prose img {
    width: 100%;
    border: 1px solid var(--ss-border);
    margin-block: var(--ss-md);
}
.ss-prose figure {
    margin-block: var(--ss-lg);
}
.ss-prose figcaption {
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ss-secondary);
    text-align: center;
    margin-top: var(--ss-xs);
}
.ss-prose hr {
    border: none;
    border-top: 1px solid var(--ss-border);
    margin-block: var(--ss-lg);
}

/* Tags */
.ss-article-tags {
    margin-top: var(--ss-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-xs);
}
.ss-tag {
    background: var(--ss-surface-low);
    color: var(--ss-secondary);
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 6px var(--ss-sm);
    border-radius: var(--ss-radius);
}

/* Related posts */
.ss-related { margin-bottom: var(--ss-xl); }
.ss-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ss-md);
}
@media (max-width: 768px) { .ss-related-grid { grid-template-columns: 1fr; } }

.ss-related-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}
.ss-related-card:hover { transform: translateY(-2px); }
.ss-related-image-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ss-surface-high);
    border: 1px solid var(--ss-border);
    margin-bottom: var(--ss-sm);
}
.ss-related-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.5s, transform 0.5s;
}
.ss-related-card:hover .ss-related-image { filter: grayscale(0); transform: scale(1.03); }
.ss-related-body { padding: 0; }
.ss-related-cat {
    display: block;
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ss-secondary);
    margin-bottom: 4px;
}
.ss-related-title {
    font-size: var(--ss-size-headline);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
    transition: color 0.2s;
}
.ss-related-card:hover .ss-related-title { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   Page
   ============================================================ */
.ss-page-wrap { padding-top: var(--ss-xl); padding-bottom: var(--ss-xl); }
.ss-page-title {
    font-size: var(--ss-size-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ss-primary);
}
@media (max-width: 767px) { .ss-page-title { font-size: var(--ss-size-display-m); } }

/* ============================================================
   Category
   ============================================================ */
.ss-category-wrap { padding-top: var(--ss-xl); padding-bottom: var(--ss-xl); }
.ss-category-header { max-width: 720px; margin-bottom: 0; }
.ss-category-title {
    font-size: var(--ss-size-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ss-primary);
    margin: var(--ss-md) 0;
}
@media (max-width: 767px) { .ss-category-title { font-size: var(--ss-size-display-m); } }
.ss-category-desc {
    font-size: var(--ss-size-body-lg);
    line-height: 1.6;
    color: var(--ss-secondary);
}

/* ============================================================
   Search
   ============================================================ */
.ss-search-wrap { padding-top: var(--ss-xl); padding-bottom: var(--ss-xl); }
.ss-search-header { margin-bottom: var(--ss-xl); }
.ss-search-title {
    font-size: var(--ss-size-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ss-primary);
}
@media (max-width: 767px) { .ss-search-title { font-size: var(--ss-size-display-m); } }

/* Inline search form (on search page) */
.ss-search-form-inline {
    position: relative;
    max-width: 640px;
}
.ss-search-field-inline {
    width: 100%;
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    padding: 10px var(--ss-md);
    padding-right: 40px;
    font-family: var(--ss-font);
    font-size: var(--ss-size-body);
    color: var(--ss-text);
    outline: none;
    transition: border-color 0.2s;
}
.ss-search-field-inline:focus { border-color: var(--ss-primary); border-width: 2px; }
.ss-search-inline-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ss-text-variant);
    pointer-events: none;
}

/* ============================================================
   404
   ============================================================ */
.ss-404-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--ss-xl) 20px;
}
.ss-404-inner { text-align: center; }
.ss-404-code {
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ss-primary);
    margin-bottom: var(--ss-md);
}
.ss-404-title {
    font-size: var(--ss-size-display-m);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ss-primary);
    margin-bottom: var(--ss-sm);
}
.ss-404-desc {
    font-size: var(--ss-size-body-lg);
    color: var(--ss-text-variant);
    margin-bottom: var(--ss-md);
}

/* ============================================================
   Footer
   ============================================================ */
.ss-footer {
    background: var(--ss-surface-low);
    border-top: 1px solid var(--ss-border);
}
.ss-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ss-md);
    padding-block: var(--ss-lg);
}
.ss-footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: var(--ss-xs);
}
.ss-footer-brand {
    font-size: var(--ss-size-headline);
    font-weight: 700;
    color: var(--ss-primary);
}
.ss-footer-copy {
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ss-secondary);
    opacity: 0.8;
}
.ss-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-md);
}
.ss-footer-link {
    font-size: var(--ss-size-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ss-secondary);
    opacity: 0.8;
    transition: color 0.2s, opacity 0.2s;
}
.ss-footer-link:hover { color: var(--ss-primary); opacity: 1; }

/* ============================================================
   Pagination
   ============================================================ */
.ss-pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--ss-xl);
}

.pagination {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.pagination-list {
    display: flex;
    align-items: center;
    gap: var(--ss-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagination-item { list-style: none; }

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    font-family: var(--ss-font);
    font-size: var(--ss-size-label);
    font-weight: 600;
    color: var(--ss-secondary);
    text-decoration: none;
    transition: all 0.15s;
}
.pagination-link:hover { border-color: var(--ss-primary); color: var(--ss-primary); }

.pagination-link--active,
.pagination-item.active .pagination-link {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: var(--ss-white);
}

.pagination-dots { list-style: none; }
.pagination-dots span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    font-size: var(--ss-size-label);
    color: var(--ss-secondary);
    cursor: default;
}