/* 1.5.4: full-width framing, softer photography and readable administration. */
:root {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body {
    font-weight: 400;
    letter-spacing: 0;
}

h1,
h2,
h3 {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}

h1 { font-size: 64px; line-height: 1.12; }
h2 { font-size: 38px; line-height: 1.2; }
h3 { font-size: 22px; line-height: 1.35; }

.brand strong,
.eyebrow,
.article-card p,
.button,
.footer-nav a,
.language-switch button,
.copyright-strip span {
    font-weight: 500;
    letter-spacing: 0;
}

.hero-panel strong {
    font-weight: 400;
    line-height: 1.45;
}

.site-header,
.site-footer,
.copyright-strip {
    width: 100%;
    max-width: none;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.site-header {
    top: 0;
    padding: 14px clamp(18px, 5vw, 72px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}

.brand { min-width: 0; }
.brand-logo { flex-shrink: 0; }
.brand strong { overflow-wrap: anywhere; }
.header-tools { flex-shrink: 0; }

.site-footer { margin-top: 32px; }
.copyright-strip { border-top: 0; }
.main-nav a:hover { background: rgba(79, 216, 255, .1); }

/* Only the image layer fades; foreground text and controls stay crisp. */
.hero,
.page-hero {
    margin: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
}

.hero::before,
.page-hero::before {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent),
        linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 110px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent),
        linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 110px), transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hero::after,
.page-hero::after {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    filter: none;
    background: linear-gradient(90deg, rgba(5, 11, 20, .24), transparent 70%);
}

.hero h1,
.page-hero h1 { text-shadow: none; }

.auth-card label { color: #e8eef7; }
.auth-card .auth-link { color: #f4d78b; }
.auth-card .error { color: #ffb4ab; }
select option { color: #182434; background: #fff; }

/* Opaque light surfaces prevent public-theme colors leaking into admin forms. */
.admin-shell {
    --ink: #182434;
    --muted: #526174;
    --line: #cbd5e1;
    --navy: #182c46;
    --gold-dark: #77551d;
    --danger: #b42318;
    color: var(--ink);
    background: #f3f6fa;
    color-scheme: light;
}

.admin-shell h1,
.admin-shell h2,
.admin-shell h3 {
    color: var(--ink);
    font-weight: 600;
}

.admin-shell .eyebrow { color: #305477; }
.admin-shell label { color: #28384b; font-weight: 600; }
.admin-shell .field-hint,
.admin-shell .muted-text { color: var(--muted); }

.admin-shell .editor-form,
.admin-shell .table-wrap,
.admin-shell .message-card,
.admin-shell .visitor-chart-card,
.admin-shell .content-block {
    color: var(--ink);
    border-color: var(--line);
    background: #fff;
}

.admin-shell input,
.admin-shell textarea,
.admin-shell select {
    color: var(--ink);
    background: #fff;
    border-color: #8c9bae;
    caret-color: var(--ink);
}

.admin-shell input::placeholder,
.admin-shell textarea::placeholder { color: #526174; opacity: 1; }

.admin-shell input:focus,
.admin-shell textarea:focus,
.admin-shell select:focus {
    border-color: #24648f;
    box-shadow: 0 0 0 3px rgba(36, 100, 143, .18);
}

.admin-shell .button {
    color: #21354d;
    border-color: #8c9bae;
    background: #fff;
    box-shadow: none;
    font-weight: 600;
}

.admin-shell .button:hover { background: #eaf1f7; }
.admin-shell .button.primary { color: #fff; background: #213e5c; border-color: #213e5c; }
.admin-shell .button.primary:hover { background: #142d46; }
.admin-shell .notice { color: #125239; background: #e7f5ec; border-color: #86b79b; }
.admin-shell .error { color: var(--danger); }
.admin-shell .message-card.read { opacity: 1; background: #f8fafc; }
.admin-shell .admin-nav { background: #fff; border-color: var(--line); }
.admin-shell .admin-nav a { color: #28384b; font-weight: 600; }
.admin-shell .admin-nav a:hover { color: #fff; background: #213e5c; }
.admin-shell .row-actions a { color: #205583; }
.admin-shell th { color: #526174; background: #f1f5f9; }
.admin-shell table tr:hover td { background: #edf3f8; }
.admin-shell .chart-bar.unique,
.admin-shell .chart-legend .unique { background: #8a6528; }
.admin-shell :is(a, button):focus-visible,
.auth-card :is(a, button):focus-visible {
    outline: 2px solid #3689bb;
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    h1 { font-size: 48px; }
    h2 { font-size: 34px; }
}

@media (max-width: 620px) {
    .site-header { padding: 12px 16px; gap: 12px; }
    .hero h1,
    .page-hero h1 { font-size: 34px; line-height: 1.18; }
    h1 { font-size: 34px; }
    h2 { font-size: 28px; }
    .hero::before,
    .page-hero::before {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 72px), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 72px), transparent);
    }
}