:root {
    color-scheme: dark;
    --bg: #031713;
    --bg-2: #06231d;
    --surface: rgba(10, 44, 36, 0.78);
    --surface-strong: rgba(12, 57, 48, 0.92);
    --surface-soft: rgba(255, 255, 255, 0.055);
    --ink: #f2fff8;
    --muted: #a6c8bd;
    --line: rgba(163, 226, 210, 0.18);
    --turquoise: #32d4bf;
    --turquoise-soft: #8af0df;
    --forest: #0f5d44;
    --leaf: #7cc76e;
    --clay: #d17854;
    --gold: #d9b45f;
    --shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
    --soft-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        linear-gradient(130deg, rgba(50, 212, 191, 0.13), transparent 34rem),
        linear-gradient(180deg, #05211c 0, var(--bg) 44rem),
        var(--bg);
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

body::before {
    position: fixed;
    inset: auto 0 0;
    z-index: -1;
    height: 34vh;
    min-height: 220px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='1440' height='320' viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23081f19' fill-opacity='.72'%3E%3Cpath d='M0 320h1440V198l-38 24 13-46-42 26 16-58-45 32 9-71-48 69 6-98-61 122-56-112 6 98-48-69 9 71-45-32 16 58-42-26 13 46-38-24v122H0z'/%3E%3Cpath d='M0 320h760V230l-28 18 10-35-32 20 12-44-34 24 7-54-36 52 5-74-46 92-42-86 5 75-36-52 7 54-34-24 12 44-32-20 10 35-28-18v93H0z' opacity='.58'/%3E%3Cpath d='M760 320h680V244l-24 16 8-30-27 17 10-38-29 20 6-47-31 45 4-64-39 79-36-74 4 64-31-45 6 47-29-20 10 38-27-17 8 30-24-16v75z' opacity='.48'/%3E%3C/g%3E%3C/svg%3E");
    background-position: bottom center;
    background-size: cover;
    pointer-events: none;
}

body::after {
    position: fixed;
    inset: 0;
    z-index: -2;
    content: "";
    background:
        linear-gradient(120deg, transparent 0 42%, rgba(138, 240, 223, 0.08) 48%, transparent 58%),
        linear-gradient(300deg, transparent 0 50%, rgba(124, 199, 110, 0.08) 56%, transparent 64%);
    animation: auroraShift 14s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes auroraShift {
    from {
        transform: translate3d(-2%, -1%, 0);
        opacity: 0.72;
    }
    to {
        transform: translate3d(2%, 1%, 0);
        opacity: 1;
    }
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.masthead,
main,
footer {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.masthead {
    position: sticky;
    top: 0;
    z-index: 90;
    padding-top: 12px;
}

.masthead::before {
    position: absolute;
    inset: 0 -16px auto;
    z-index: -1;
    height: calc(100% + 10px);
    content: "";
    background: linear-gradient(180deg, rgba(3, 23, 19, 0.96), rgba(3, 23, 19, 0.72) 72%, transparent);
    pointer-events: none;
}

.brand-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 70px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(4, 28, 23, 0.82);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(18px);
}

.brand-lockup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.brand-lockup::before {
    position: absolute;
    inset: -14px -20px;
    z-index: -1;
    content: "";
    border-radius: 999px;
    background:
        radial-gradient(circle at 22% 50%, rgba(217, 180, 95, 0.25), transparent 34%),
        radial-gradient(circle at 64% 50%, rgba(138, 240, 223, 0.18), transparent 48%);
    filter: blur(14px);
    opacity: 0.92;
    pointer-events: none;
}

.brand-symbol {
    width: clamp(44px, 5.2vw, 72px);
    height: auto;
    filter:
        drop-shadow(0 0 18px rgba(217, 180, 95, 0.44))
        drop-shadow(0 0 20px rgba(50, 212, 191, 0.28));
}

.brand-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.brand-title {
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: clamp(1.28rem, 3.08vw, 2.28rem);
    font-weight: 850;
    line-height: 0.9;
    letter-spacing: 0;
    text-shadow:
        0 0 18px rgba(217, 180, 95, 0.24),
        0 0 22px rgba(138, 240, 223, 0.18);
    text-transform: lowercase;
}

.brand-subtitle {
    color: var(--turquoise-soft);
    font-size: clamp(0.68rem, 1.4vw, 0.88rem);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.section-label,
.meta,
.topic-nav,
.article-card,
.login-form,
.top-login,
.auth-actions,
.auth-form,
.editor-form,
.header-logout,
footer {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

.top-login,
.header-logout,
.auth-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
    min-width: 0;
}

.top-login label {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.top-login input {
    width: 96px;
    min-height: 36px;
    padding: 0 10px;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.top-login input::placeholder {
    color: rgba(242, 255, 248, 0.5);
}

.top-login input:focus {
    border-color: var(--turquoise);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.top-login button,
.header-logout button,
.login-form button,
.auth-form button,
.editor-form button {
    min-height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    color: #04201b;
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-soft));
    cursor: pointer;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(50, 212, 191, 0.18);
}

.mode-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid rgba(138, 240, 223, 0.24);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 900;
    white-space: nowrap;
}

.mode-link:hover,
.mode-link:focus-visible {
    color: #04201b;
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-soft));
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.auth-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 999px;
    color: #04201b;
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-soft));
    box-shadow: 0 10px 30px rgba(50, 212, 191, 0.18);
    font-weight: 900;
}

.auth-button.secondary {
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.24);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.auth-button:hover,
.auth-button:focus-visible {
    filter: brightness(1.06);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.top-login-error {
    flex-basis: 100%;
    color: #ffd3c7;
    font-size: 0.76rem;
    font-weight: 800;
    text-align: right;
}

.header-logout span {
    max-width: none;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin-left: 12px;
    margin-right: 8px;
    text-align: right;
    text-transform: uppercase;
}

.header-logout {
    min-width: clamp(340px, 38vw, 520px);
    justify-content: flex-end;
}

.topic-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 14px;
}

.topic-nav a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: var(--muted);
    border: 1px solid rgba(138, 240, 223, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    font-size: 0.84rem;
    font-weight: 800;
}

.topic-nav a:hover,
.topic-nav a:focus-visible {
    color: var(--ink);
    border-color: rgba(138, 240, 223, 0.42);
    background: rgba(50, 212, 191, 0.12);
}

.notice-bar {
    min-height: 58px;
    max-height: 96px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(138, 240, 223, 0.18);
    border-radius: 18px;
    background: rgba(4, 28, 23, 0.68);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(14px);
    transform-origin: top;
    transition:
        max-height 180ms ease,
        min-height 180ms ease,
        margin-top 180ms ease,
        padding 180ms ease,
        opacity 160ms ease,
        transform 180ms ease,
        border-color 160ms ease;
}

.masthead.status-hidden .notice-bar {
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px) scaleY(0.96);
    border-color: transparent;
    pointer-events: none;
}

.notice-item {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    color: var(--muted);
    font-size: 0.96rem;
    font-weight: 800;
}

.notice-item span {
    flex: 0 0 auto;
    color: var(--turquoise-soft);
    font-size: 1.02rem;
    font-weight: 900;
    text-transform: uppercase;
}

.notice-item strong {
    color: var(--ink);
    font-size: 1.02rem;
    text-transform: uppercase;
}

.notice-weather {
    text-align: center;
}

.notice-weather strong,
.notice-weather .weather-detail {
    color: var(--ink);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.notice-weather .weather-detail {
    flex: 0 1 auto;
}

.notice-alert,
.notice-empty {
    text-align: center;
}

.notice-alert {
    color: #fff0c8;
    border-radius: 14px;
    background: rgba(142, 43, 18, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 196, 91, 0.34);
}

.notice-alert span {
    color: #ffb84d;
}

.notice-alert strong {
    color: #fff6d8;
}

.notice-empty {
    color: rgba(215, 242, 235, 0.76);
}

.notice-weather small,
.notice-alert small {
    color: rgba(215, 242, 235, 0.64);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

main {
    display: flex;
    flex-direction: column;
    padding: 18px 0 52px;
}

.front-page {
    order: 0;
}

.article-picker {
    order: 1;
}

.visitor-guide {
    order: 2;
}

main#naslovnica .visitor-guide {
    order: 1;
}

main#naslovnica > .article-picker {
    order: 2;
}

main#naslovnica .gnome-path-band {
    order: -1;
}

.visitor-guide > .story-band-slider {
    order: -5;
    align-items: start;
}

.visitor-guide > .story-band-slider > img {
    aspect-ratio: 16 / 15;
}

main#naslovnica .visitor-guide > .visitor-article-picker {
    order: -4;
    padding-top: 0;
}

.visitor-guide > .visitor-intro {
    order: -3;
}

.visitor-guide > .visitor-stat-panel {
    order: -2;
}

.visitor-guide > .gnome-path-band {
    order: -1;
}

.visitor-guide > .guide-band-offer {
    order: 0;
}

.visitor-guide > .public-notice-band {
    order: 1;
}

.visitor-guide > .guide-band-activity {
    order: 2;
}

.member-board {
    order: 3;
}

.editor-board {
    order: 4;
}

.front-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: stretch;
}

.front-page-public {
    grid-template-columns: 1fr;
}

.front-page-member {
    grid-template-columns: 1fr;
}

.front-page-public .lead-story {
    grid-template-columns: minmax(360px, 0.92fr) minmax(360px, 1fr);
}

.front-page-public .lead-media,
.front-page-public .lead-copy {
    height: clamp(390px, 42vw, 440px);
}

.front-page-member .lead-story {
    grid-template-columns: minmax(300px, 0.48fr) minmax(360px, 1fr);
}

.member-hero-image {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(18px);
}

.member-hero-image img {
    width: 100%;
    height: clamp(210px, 28vw, 320px);
    display: block;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.04) brightness(0.82);
}

.event-overview {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    gap: 18px;
    margin-top: 18px;
}

.event-calendar,
.upcoming-events {
    min-width: 0;
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(18px);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.calendar-weekday,
.calendar-day {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 900;
}

.calendar-weekday {
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.calendar-day {
    width: 100%;
    border: 0;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.055);
    cursor: default;
    font: inherit;
}

.calendar-day.is-empty {
    background: transparent;
}

.calendar-day.has-event {
    color: #04201b;
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-soft));
    box-shadow: 0 8px 22px rgba(50, 212, 191, 0.16);
    cursor: pointer;
}

.calendar-day.has-event.active {
    outline: 3px solid rgba(217, 180, 95, 0.36);
    outline-offset: 2px;
}

.calendar-day:disabled {
    opacity: 0.48;
}

.upcoming-event-list {
    display: grid;
    gap: 10px;
}

.calendar-controls {
    display: inline-flex;
    gap: 8px;
}

.calendar-controls button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(138, 240, 223, 0.24);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.075);
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.calendar-controls button:hover,
.calendar-controls button:focus-visible {
    border-color: rgba(138, 240, 223, 0.48);
    background: rgba(50, 212, 191, 0.13);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.upcoming-event-list article {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
}

.upcoming-event-list span,
.upcoming-event-list small {
    display: block;
    color: var(--turquoise-soft);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.upcoming-event-list strong {
    display: block;
    margin-top: 7px;
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.22;
}

.upcoming-event-list p {
    margin: 8px 0 0;
    color: var(--muted);
}

.upcoming-event-list small {
    margin-top: 9px;
    color: var(--muted);
}

.event-detail-body small {
    display: block;
    margin-top: 10px;
    color: var(--turquoise-soft);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.lead-story,
.topic-panel,
.reader,
.notice-grid article,
.archive-strip article,
.editor-form,
.editor-help {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(18px);
}

.lead-story {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1fr);
    overflow: hidden;
}

.lead-story::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(115deg, transparent 0 42%, rgba(138, 240, 223, 0.08), transparent 58%);
    pointer-events: none;
}

.lead-media {
    min-height: 100%;
    background: var(--bg-2);
}

.lead-media img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    filter: saturate(0.88) contrast(1.04) brightness(0.74);
}

.lead-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4vw, 46px);
}

.history-switcher {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: stretch;
    padding: 18px clamp(10px, 1.8vw, 18px) 22px;
    border-top: 1px solid rgba(138, 240, 223, 0.14);
    background: rgba(255, 255, 255, 0.035);
}

.history-switcher-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.history-switcher-list::-webkit-scrollbar {
    display: none;
}

.history-switcher-list button {
    flex: 0 0 min(280px, calc(100vw - 88px));
    height: 166px;
    display: inline-grid;
    align-content: start;
    gap: 6px;
    padding: 15px;
    color: var(--ink);
    text-align: left;
    border: 1px solid rgba(138, 240, 223, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
}

.history-switcher-list button:hover,
.history-switcher-list button:focus-visible,
.history-switcher-list button.active {
    border-color: rgba(138, 240, 223, 0.48);
    background: rgba(50, 212, 191, 0.11);
    outline: none;
}

.history-switcher span {
    color: var(--turquoise-soft);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.history-switcher strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.18;
}

.history-switcher small {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.history-scroll-button {
    width: 34px;
    height: 166px;
    min-height: 166px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.24);
    border-radius: 14px;
    background: rgba(4, 28, 23, 0.92);
    cursor: pointer;
    box-shadow: var(--soft-shadow);
    font-size: 2rem;
    line-height: 1;
    align-self: stretch;
}

.history-scroll-button:hover,
.history-scroll-button:focus-visible {
    border-color: rgba(138, 240, 223, 0.48);
    background: rgba(50, 212, 191, 0.13);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.section-label {
    margin: 0 0 10px;
    color: var(--turquoise-soft);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.lead-copy h1,
.topic-panel h2,
.section-heading h2,
.reader h3,
.visitor-intro h2,
.auth-panel h2,
.editor-help strong {
    margin: 0;
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.06;
}

.lead-copy h1 {
    max-width: 700px;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 16px 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.intro {
    margin: 0 0 18px;
    color: #d5f5ec;
    font-size: 1.1rem;
    font-weight: 700;
}

.article-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    color: var(--muted);
}

.lead-copy .article-body {
    grid-template-columns: 1fr;
    max-width: 100%;
}

.article-body p {
    margin: 0;
}

.single-column {
    grid-template-columns: 1fr;
}

.spotlight-list {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.spotlight-list article,
.portal-list li,
.access-note {
    padding: 14px;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
}

.spotlight-list span,
.portal-list span,
.archive-strip span,
.notice-grid span,
.card-date,
.editor-help span,
.access-note span {
    display: block;
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.spotlight-list strong,
.portal-list strong,
.notice-grid strong,
.archive-strip strong,
.access-note strong {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 1.06rem;
    line-height: 1.25;
}

.spotlight-list p,
.notice-grid p,
.access-note p {
    margin: 7px 0 0;
    color: var(--muted);
}

.notice-grid small {
    display: block;
    margin-top: 9px;
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-notice-grid small {
    display: block;
    margin-top: 10px;
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.topic-panel {
    padding: 20px;
}

.topic-panel h2,
.section-heading h2 {
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
}

.portal-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.login-form,
.editor-form {
    display: grid;
    gap: 14px;
}

.editor-form fieldset {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

.editor-form fieldset[hidden] {
    display: none;
}

.editor-form legend {
    padding: 0 8px;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.login-form label,
.editor-form label {
    display: grid;
    gap: 7px;
    color: var(--turquoise-soft);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.editor-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
}

.editor-form .checkbox-label input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--turquoise);
}

.login-form input,
.editor-form input,
.editor-form select,
.editor-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
}

.editor-form select,
.user-access-form select,
.auth-form select {
    color: var(--ink);
    background-color: #0b3028;
}

.editor-form option,
.user-access-form option,
.auth-form option {
    color: #08241f;
    background: #fffdf8;
}

.editor-form input[type="file"] {
    padding: 10px 13px;
    color: var(--muted);
}

.editor-form label small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: none;
    overflow-wrap: anywhere;
}

.editor-form textarea {
    min-height: auto;
    padding: 12px;
    resize: vertical;
}

.login-form input:focus,
.editor-form input:focus,
.editor-form select:focus,
.editor-form textarea:focus {
    border-color: var(--turquoise);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.form-error {
    margin: 10px 0 0;
    color: #ffd3c7;
    font-weight: 800;
}

.is-hidden {
    display: none !important;
}

.article-picker,
.member-board,
.auth-panels,
.editor-board {
    padding-top: 30px;
}

.editor-board {
    position: fixed;
    inset: 22px max(16px, calc((100vw - 1180px) / 2));
    z-index: 120;
    display: none;
    overflow: auto;
    padding: 34px 28px 28px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface-strong);
    box-shadow:
        0 32px 120px rgba(0, 0, 0, 0.58),
        0 0 0 100vmax rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(18px);
}

.editor-board::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
}

.editor-board:target {
    display: block;
}

.editor-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
}

.auth-panels {
    display: contents;
    padding-top: 0;
}

.auth-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 80;
    width: min(540px, calc(100% - 32px));
    overflow: visible;
    transform: translate(-50%, -50%);
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 30px 26px 26px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface-strong);
    box-shadow: 0 32px 120px rgba(0, 0, 0, 0.54);
    backdrop-filter: blur(18px);
    isolation: isolate;
}

.auth-panel:target,
.auth-panel.is-open {
    display: grid;
}

.auth-panel > :not(.modal-gnome) {
    position: relative;
    z-index: 2;
}

.modal-gnome {
    --gnome-flip: 1;
    --gnome-tilt-hidden: -4deg;
    --gnome-tilt-visible: 2deg;
    position: absolute;
    top: -35px;
    width: 35px;
    height: 50px;
    z-index: 1;
    pointer-events: none;
    transform: translateY(48px) scaleX(var(--gnome-flip)) rotate(var(--gnome-tilt-hidden));
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.34));
}

.auth-panel:target .modal-gnome,
.auth-panel.is-open .modal-gnome {
    animation: modalGnomeLift 2.25s ease-in-out 1.4s 1 both;
}

.auth-panel:target .modal-gnome img,
.auth-panel.is-open .modal-gnome img {
    animation: modalGnomeDissolve 2.25s ease-in-out 1.4s 1 both;
}

.modal-gnome img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
}

.modal-gnome-login {
    right: 72px;
}

.modal-gnome-register {
    --gnome-flip: -1;
    --gnome-tilt-hidden: 4deg;
    --gnome-tilt-visible: -2deg;
    left: 72px;
}

@keyframes modalGnomeLift {
    0%,
    8% {
        transform: translateY(50px) scaleX(var(--gnome-flip)) rotate(var(--gnome-tilt-hidden));
    }
    16%,
    100% {
        transform: translateY(0) scaleX(var(--gnome-flip)) rotate(var(--gnome-tilt-visible));
    }
}

@keyframes modalGnomeDissolve {
    0%,
    8%,
    100% {
        opacity: 0;
        filter: blur(2px);
    }
    16%,
    72% {
        opacity: 1;
        filter: blur(0);
    }
    90% {
        opacity: 0;
        filter: blur(4px);
    }
}

.auth-panel:target::before,
.auth-panel.is-open::before {
    position: fixed;
    inset: -100vmax;
    z-index: -1;
    content: "";
    background: rgba(1, 12, 10, 0.7);
    backdrop-filter: blur(8px);
}

.modal-close {
    position: absolute;
    top: 6px;
    right: 10px;
    justify-self: end;
    width: 34px;
    height: 34px;
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.modal-close:hover,
.modal-close:focus-visible {
    border-color: rgba(138, 240, 223, 0.42);
    background: rgba(50, 212, 191, 0.12);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.auth-panel h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    line-height: 1.06;
}

.auth-panel p {
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.auth-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.auth-form label {
    display: grid;
    gap: 7px;
    color: var(--turquoise-soft);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-form input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-form input:focus {
    border-color: var(--turquoise);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.auth-form .form-error,
.auth-form button,
.auth-form-register label:nth-of-type(3),
.auth-form-register label:nth-of-type(4),
.auth-form-register label:nth-of-type(5) {
    grid-column: 1 / -1;
}

.test-admin-form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: -6px;
}

.test-admin-form p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.test-admin-form button {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(138, 240, 223, 0.24);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    font-weight: 900;
}

.test-admin-form button:hover,
.test-admin-form button:focus-visible {
    border-color: rgba(138, 240, 223, 0.42);
    background: rgba(50, 212, 191, 0.12);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.public-section {
    opacity: 0.92;
}

.visitor-guide {
    display: grid;
    gap: clamp(26px, 4vw, 42px);
    padding-top: 42px;
}

.visitor-intro {
    max-width: none;
}

.visitor-intro h2 {
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
}

.visitor-stat-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: var(--soft-shadow);
}

.visitor-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.visitor-stats button,
.guide-card-grid article,
.offer-grid article,
.activity-strip article {
    min-width: 0;
    border: 1px solid rgba(138, 240, 223, 0.16);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
}

.visitor-stats button {
    width: 100%;
    min-height: 102px;
    padding: 13px 14px;
    border-radius: 18px;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.visitor-stats button:hover,
.visitor-stats button:focus-visible,
.visitor-stats button.active {
    border-color: rgba(138, 240, 223, 0.46);
    background: rgba(50, 212, 191, 0.11);
    outline: none;
}

.visitor-stats strong {
    display: block;
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    font-weight: 850;
    line-height: 1.08;
}

.visitor-stats span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.stat-detail {
    min-height: 92px;
    padding: 15px 16px;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 18px;
    background: rgba(4, 28, 23, 0.42);
}

.stat-detail p {
    max-width: 860px;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 700;
}

.guide-band {
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(138, 240, 223, 0.14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 7% 0, rgba(50, 212, 191, 0.14), transparent 27%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    box-shadow: var(--soft-shadow);
}

.guide-band-offer {
    background:
        radial-gradient(circle at 90% 10%, rgba(217, 180, 95, 0.13), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
}

.guide-band-activity {
    background:
        radial-gradient(circle at 50% 0, rgba(124, 199, 110, 0.14), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.024));
}

.traffic-band {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(18px, 4vw, 38px);
    align-items: center;
    background:
        radial-gradient(circle at 8% 12%, rgba(217, 180, 95, 0.15), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.024));
}

.traffic-band img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 18px;
    filter: saturate(0.95) contrast(1.03) brightness(0.86);
}

.traffic-band h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    line-height: 1.06;
}

.traffic-band p:last-child {
    margin: 12px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.band-link {
    min-height: 38px;
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 0 15px;
    border-radius: 999px;
    color: #04201b;
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-soft));
    box-shadow: 0 10px 30px rgba(50, 212, 191, 0.18);
    font-weight: 900;
}

.band-link:hover,
.band-link:focus-visible {
    filter: brightness(1.06);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.gnome-path-band {
    min-height: 220px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: clamp(18px, 4vw, 42px);
    background:
        radial-gradient(circle at 92% 16%, rgba(217, 180, 95, 0.16), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.026));
}

.gnome-path-band h2,
.public-notice-band h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    line-height: 1.06;
}

.gnome-path-band p:last-child {
    max-width: 920px;
    margin: 12px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.gnome-path-band img {
    width: min(110px, 18vw);
    justify-self: center;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.3));
}

.public-notice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.public-notice-grid article {
    min-height: 166px;
    padding: 16px;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
}

.public-notice-grid span {
    display: block;
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-notice-grid strong {
    display: block;
    margin-top: 7px;
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.22;
}

.public-notice-grid p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.guide-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.activity-slider {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: stretch;
}

.activity-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.activity-strip::-webkit-scrollbar {
    display: none;
}

.guide-card-grid article,
.offer-grid article {
    min-height: 202px;
    padding: 16px;
    border-radius: 18px;
}

.offer-grid article {
    min-height: 318px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.offer-grid img {
    width: 100%;
    height: 138px;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.03) brightness(0.84);
}

.offer-grid span,
.offer-grid strong,
.offer-grid p,
.offer-grid a {
    margin-left: 16px;
    margin-right: 16px;
}

.offer-grid span {
    margin-top: 14px;
}

.activity-strip article {
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 260px;
    height: 330px;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
}

.activity-strip img {
    width: 100%;
    height: 132px;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.03) brightness(0.82);
}

.activity-strip span,
.activity-strip strong,
.activity-strip p {
    margin-left: 16px;
    margin-right: 16px;
}

.activity-strip span {
    margin-top: 14px;
}

.activity-strip p {
    margin-bottom: 16px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.offer-scroll-button,
.activity-scroll-button {
    width: 34px;
    height: 100%;
    min-height: 202px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.24);
    border-radius: 14px;
    background: rgba(4, 28, 23, 0.92);
    cursor: pointer;
    box-shadow: var(--soft-shadow);
    font-size: 2rem;
    line-height: 1;
    align-self: stretch;
}

.activity-scroll-button {
    min-height: 330px;
}

.offer-scroll-button:hover,
.offer-scroll-button:focus-visible,
.activity-scroll-button:hover,
.activity-scroll-button:focus-visible {
    border-color: rgba(138, 240, 223, 0.48);
    background: rgba(50, 212, 191, 0.13);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.history-scroll-button:disabled,
.offer-scroll-button:disabled,
.activity-scroll-button:disabled {
    cursor: default;
    opacity: 0.34;
    filter: saturate(0.5);
    box-shadow: none;
}

.guide-card-grid span,
.offer-grid span,
.activity-strip span {
    display: block;
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.guide-card-grid strong,
.offer-grid strong,
.activity-strip strong {
    display: block;
    margin-top: 7px;
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.22;
}

.guide-card-grid p,
.offer-grid p,
.activity-strip p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.offer-grid p {
    margin: 9px 16px 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.activity-strip p {
    margin: 9px 16px 16px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.offer-grid a,
.activity-strip a {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    margin-bottom: 16px;
    color: var(--turquoise-soft);
    font-size: 0.84rem;
    font-weight: 900;
}

.offer-grid a:hover,
.offer-grid a:focus-visible,
.activity-strip a:hover,
.activity-strip a:focus-visible {
    color: var(--ink);
    outline: none;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.section-heading > p {
    max-width: 460px;
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    text-align: right;
}

.section-side {
    display: grid;
    justify-items: end;
    gap: 10px;
    max-width: 480px;
}

.section-side p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    text-align: right;
}

.content-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.editor-link,
.inline-edit-link {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: #04201b;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-soft));
    box-shadow: 0 10px 30px rgba(50, 212, 191, 0.14);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.editor-link.secondary {
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.24);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.inline-edit-link {
    margin-top: 12px;
    background: rgba(50, 212, 191, 0.14);
    color: var(--turquoise-soft);
    border: 1px solid rgba(138, 240, 223, 0.22);
    box-shadow: none;
}

.editor-link:hover,
.editor-link:focus-visible,
.inline-edit-link:hover,
.inline-edit-link:focus-visible {
    filter: brightness(1.08);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.picker-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 18px;
}

.article-list {
    display: grid;
    gap: 10px;
    align-content: start;
}

.article-card {
    width: 100%;
    min-height: 104px;
    padding: clamp(18px, 2.2vw, 24px);
    color: var(--ink);
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
}

.article-card strong,
.article-card span {
    display: block;
}

.article-card strong {
    margin: 7px 0 0;
    font-size: 1.06rem;
    line-height: 1.16;
}

.article-card span {
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.article-card:hover,
.article-card:focus-visible,
.article-card.active {
    border-color: rgba(138, 240, 223, 0.46);
    background: rgba(50, 212, 191, 0.11);
    outline: none;
}

.reader {
    display: grid;
    grid-template-columns: minmax(260px, 0.62fr) minmax(300px, 1fr);
    overflow: hidden;
}

.reader img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    filter: saturate(0.88) contrast(1.04) brightness(0.74);
}

.reader-copy {
    padding: clamp(26px, 4vw, 42px);
}

.reader h3 {
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
}

.admin-slider {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.admin-article-slider {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 12px;
}

.admin-article-slider .slider-button {
    position: static;
    transform: none;
}

.story-band-slider {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    overflow: hidden;
}

.story-band-slider > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 18px;
    filter: saturate(0.95) contrast(1.03) brightness(0.86);
}

.story-band-copy {
    min-width: 0;
    padding-right: 6px;
}

.story-band-copy .intro {
    margin: 12px 0 0;
    color: var(--muted);
    font-weight: 800;
}

.story-band-copy .article-body {
    margin-top: 12px;
}

.story-band-copy .article-body p {
    color: var(--muted);
    font-weight: 700;
}

.slider-button {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 42px;
    height: 42px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    padding: 0 0 3px;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.25);
    border-radius: 999px;
    background: rgba(3, 27, 23, 0.72);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    font-size: 1.86rem;
    line-height: 1;
}

.slider-button[data-admin-slide="prev"] {
    left: 18px;
}

.slider-button[data-admin-slide="next"] {
    right: 18px;
}

.slider-button:hover,
.slider-button:focus-visible {
    border-color: rgba(138, 240, 223, 0.48);
    background: rgba(50, 212, 191, 0.13);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.admin-article-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(260px, 0.55fr) minmax(320px, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(18px);
}

.admin-article-card img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.04) brightness(0.82);
}

.admin-slider-status {
    margin-top: 18px;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

.latest-event-feature,
.contribution-callouts,
.event-report-board,
.editor-inbox {
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid rgba(138, 240, 223, 0.2);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(50, 212, 191, 0.1), rgba(217, 180, 95, 0.08)),
        var(--surface);
    box-shadow: var(--soft-shadow);
    backdrop-filter: blur(18px);
}

.latest-event-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
}

.latest-notice-feature {
    margin-top: 18px;
}

.compact-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.contribution-callouts {
    margin-top: clamp(28px, 4vw, 46px);
}

.latest-event-feature h2,
.contribution-callouts h2,
.event-report-board h2,
.editor-inbox h2 {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    line-height: 1.1;
}

.latest-event-feature p:last-child,
.contribution-callouts p:last-child,
.event-report-board p:last-child,
.editor-inbox p:last-child {
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 800;
}

.contribution-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.contribution-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.contribution-card img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.04) brightness(0.82);
}

.contribution-card div {
    padding: 18px;
}

.contribution-card h3 {
    margin: 5px 0 0;
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1.15;
}

.contribution-card p:not(.section-label) {
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 750;
}

.contribution-modal {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(1, 12, 10, 0.74);
    backdrop-filter: blur(8px);
}

.contribution-modal:target {
    display: flex;
}

.contribution-dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: min(84vh, 760px);
    overflow: auto;
    display: grid;
    gap: 12px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface-strong);
    box-shadow: 0 32px 120px rgba(0, 0, 0, 0.54);
}

.contribution-dialog h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.contribution-dialog > p:not(.section-label) {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.contribution-dialog label,
.event-report-form label {
    display: grid;
    gap: 7px;
    color: var(--turquoise-soft);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.contribution-dialog input,
.contribution-dialog textarea {
    min-height: 44px;
    width: 100%;
    padding: 10px 12px;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.18);
    border-radius: 12px;
    background: rgba(2, 20, 17, 0.72);
    font: inherit;
    text-transform: none;
}

.contribution-dialog button {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    color: #04201b;
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-soft));
    font-weight: 950;
    cursor: pointer;
}

.event-report-board,
.editor-inbox {
    margin-top: 18px;
}

.event-report-form {
    margin-top: 14px;
}

.event-report-form label:first-of-type {
    grid-column: 1 / -1;
}

.post-modal-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.post-modal-images img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid rgba(138, 240, 223, 0.14);
    border-radius: 16px;
}

.notice-grid,
.archive-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.primary-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notice-grid article,
.archive-strip article {
    min-height: 142px;
    padding: 18px;
}

.primary-feed article:first-child {
    grid-row: span 2;
    background:
        linear-gradient(135deg, rgba(50, 212, 191, 0.18), rgba(255, 255, 255, 0.06)),
        var(--surface-strong);
    box-shadow: var(--shadow);
}

.primary-feed article:first-child strong {
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}

.archive-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.archive-filter,
.archive-toggle {
    min-height: 36px;
    padding: 0 13px;
    color: var(--ink);
    border: 1px solid rgba(138, 240, 223, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    cursor: pointer;
    font-weight: 900;
}

.archive-filter:hover,
.archive-filter:focus-visible,
.archive-filter.active,
.archive-toggle:hover,
.archive-toggle:focus-visible {
    border-color: rgba(138, 240, 223, 0.48);
    background: rgba(50, 212, 191, 0.13);
    outline: 3px solid rgba(50, 212, 191, 0.14);
}

.archive-toggle {
    margin-top: 14px;
}

.archive-extra,
.is-filtered-out {
    display: none;
}

.archive-expanded .archive-extra:not(.is-filtered-out) {
    display: block;
}

[data-community-card] {
    cursor: pointer;
}

[data-community-card]:focus-visible {
    outline: 3px solid rgba(50, 212, 191, 0.2);
    outline-offset: 3px;
}

.post-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(1, 12, 10, 0.74);
    backdrop-filter: blur(8px);
}

.post-modal.is-open {
    display: flex;
}

.post-modal-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: min(82vh, 760px);
    overflow: auto;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface-strong);
    box-shadow: 0 32px 120px rgba(0, 0, 0, 0.54);
}

.post-modal-dialog h2 {
    max-width: 620px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    line-height: 1.06;
}

.post-modal-dialog .meta {
    margin: 12px 0 18px;
}

.post-modal-dialog .article-body {
    grid-template-columns: 1fr;
}

.editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
}

.editor-form,
.editor-help {
    padding: 20px;
}

.editor-form {
    grid-template-columns: 1fr;
}

.editor-form .form-error,
.editor-form button {
    grid-column: 1 / -1;
}

.editor-help {
    align-self: start;
}

.editor-help strong {
    display: block;
    margin-top: 8px;
    font-size: 1.25rem;
    line-height: 1.2;
}

.editor-help p {
    margin: 10px 0 0;
    color: var(--muted);
}

.admin-users {
    margin-top: 18px;
}

.editor-list {
    margin-top: 22px;
}

.editor-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.editor-managed-list {
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.editor-list-grid article {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
}

.editor-managed-list article {
    display: grid;
    grid-template-columns: 120px minmax(180px, 1.1fr) minmax(220px, 1.5fr) 150px auto;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid rgba(138, 240, 223, 0.13);
    border-radius: 0;
    background: transparent;
}

.editor-managed-list article:last-child {
    border-bottom: 0;
}

.editor-managed-list strong,
.editor-managed-list small,
.editor-managed-list p,
.editor-managed-list span {
    margin: 0;
}

.editor-managed-list p {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-managed-list .inline-edit-link {
    justify-self: end;
    margin-top: 0;
}

.editor-list-grid span,
.editor-list-grid small {
    display: block;
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.editor-list-grid strong {
    display: block;
    margin-top: 7px;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.25;
}

.editor-list-grid small {
    margin-top: 7px;
    color: var(--muted);
}

.compact-heading {
    align-items: center;
}

.user-table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(138, 240, 223, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.user-table article {
    min-width: 0;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid rgba(138, 240, 223, 0.13);
    border-radius: 0;
    background: transparent;
}

.user-table article:last-child {
    border-bottom: 0;
}

.user-table article.is-inactive {
    opacity: 0.58;
}

.user-access-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(190px, 0.95fr) minmax(120px, 0.55fr) minmax(120px, 0.55fr) minmax(150px, 0.75fr) auto;
    gap: 12px;
    align-items: center;
}

.user-table strong,
.user-table span,
.user-table small {
    display: block;
    overflow-wrap: anywhere;
}

.user-table strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.25;
}

.user-table span {
    margin-top: 5px;
    color: var(--turquoise-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.user-table small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.user-access-form button {
    justify-self: end;
}

.user-access-form label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.user-access-form select,
.user-access-form input {
    min-height: 38px;
    width: 100%;
    border: 1px solid rgba(138, 240, 223, 0.18);
    border-radius: 12px;
    color: var(--ink);
    background: rgba(2, 19, 16, 0.86);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
}

.user-access-form input {
    padding: 0 11px;
}

.user-access-form input[readonly] {
    color: rgba(235, 255, 249, 0.72);
    border-color: rgba(235, 255, 249, 0.1);
    background: rgba(2, 19, 16, 0.52);
}

.user-access-form button {
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    color: #04201b;
    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-soft));
    cursor: pointer;
    font-weight: 900;
}

footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 30px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

footer p {
    margin: 0;
}

@media (max-width: 1020px) {
    .front-page,
    .lead-story,
    .event-overview,
    .picker-layout,
    .reader,
    .admin-article-card,
    .editor-layout,
    .contribution-grid {
        grid-template-columns: 1fr;
    }

    .lead-media img,
    .reader img,
    .admin-article-card img {
        min-height: auto;
        aspect-ratio: 16 / 9;
    }

    .front-page-public .lead-media,
    .front-page-public .lead-copy {
        height: auto;
    }

    .article-list,
    .notice-grid,
    .primary-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .primary-feed article:first-child {
        grid-row: auto;
    }
}

@media (max-width: 760px) {
    .masthead,
    main,
    footer {
        width: min(100% - 22px, 1180px);
    }

    .brand-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .brand-lockup,
    .header-logout,
    .top-login,
    .auth-actions {
        justify-content: center;
    }

    .header-logout {
        min-width: 0;
        width: 100%;
    }

    .top-login,
    .header-logout,
    .auth-actions {
        flex-wrap: wrap;
    }

    .top-login label {
        min-width: 120px;
    }

    .top-login input {
        width: 100%;
    }

    .brand-title {
        font-size: clamp(1.85rem, 12.8vw, 3.05rem);
    }

    .topic-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .notice-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .notice-item,
    .notice-weather {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .lead-copy h1 {
        font-size: 1.65rem;
    }

    .visitor-stats,
    .guide-card-grid,
    .public-notice-grid {
        grid-template-columns: 1fr;
    }

    .gnome-path-band {
        grid-template-columns: 1fr;
    }

    .gnome-path-band img {
        width: 82px;
    }

    .history-switcher {
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 6px;
    }

    .history-scroll-button {
        width: 30px;
    }

    .activity-slider {
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 6px;
    }

    .latest-event-feature {
        display: block;
    }

    .offer-grid {
        grid-template-columns: 1fr;
    }

    .traffic-band,
    .story-band-slider {
        grid-template-columns: 1fr;
    }

    .activity-scroll-button {
        width: 30px;
    }

    .activity-strip article {
        flex-basis: min(300px, calc(100vw - 92px));
        height: 326px;
    }

    .activity-scroll-button {
        min-height: 326px;
    }

    .visitor-intro h2 {
        font-size: 1.65rem;
    }

    .guide-band {
        padding: 18px;
    }

    .article-card,
    .reader-copy {
        padding: 20px;
    }

    .article-body,
    .auth-form,
    .article-list,
    .notice-grid,
    .archive-strip,
    .primary-feed,
    .editor-list-grid,
    .editor-managed-list article,
    .user-access-form,
    .user-table,
    .editor-form,
    .post-modal-images {
        grid-template-columns: 1fr;
    }

    .editor-managed-list article,
    .user-access-form {
        align-items: stretch;
    }

    .editor-managed-list p {
        white-space: normal;
    }

    .editor-managed-list .inline-edit-link,
    .user-access-form button {
        justify-self: stretch;
    }

    .contribution-card {
        grid-template-columns: 1fr;
    }

    .contribution-card img {
        min-height: 150px;
        aspect-ratio: 16 / 8;
    }

    .admin-slider {
        grid-template-columns: 1fr;
    }

    .admin-article-card,
    .story-band-slider > img,
    .story-band-copy {
        grid-column: 1 / -1;
    }

    .slider-button {
        width: 38px;
        height: 38px;
        font-size: 1.7rem;
        padding-bottom: 3px;
    }

    .slider-button[data-admin-slide="prev"] {
        left: 10px;
    }

    .slider-button[data-admin-slide="next"] {
        right: 10px;
    }

    .section-heading,
    footer {
        display: block;
    }

    .auth-panel:target,
    .auth-panel.is-open {
        display: block;
    }

    .auth-panel {
        width: min(100% - 22px, 520px);
        padding: 42px 18px 20px;
    }

    .editor-board {
        inset: 10px;
        padding: 42px 16px 18px;
        border-radius: 18px;
    }

    .modal-gnome {
        top: -30px;
        width: 28px;
    }

    .modal-gnome-login {
        right: 44px;
    }

    .modal-gnome-register {
        left: 44px;
    }

    .section-heading > p {
        margin-top: 8px;
        text-align: left;
    }

    .section-side {
        justify-items: start;
        max-width: none;
        margin-top: 8px;
    }

    .section-side p {
        text-align: left;
    }

    .editor-form fieldset {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .editor-form .form-error,
    .editor-form button,
    .auth-form .form-error,
    .auth-form button,
    .test-admin-form,
    .auth-form-register label:nth-of-type(3),
    .auth-form-register label:nth-of-type(4),
    .auth-form-register label:nth-of-type(5) {
        grid-column: auto;
    }

    .test-admin-form {
        grid-template-columns: 1fr;
    }

    footer p + p {
        margin-top: 8px;
    }
}

/* History page: the public archive uses an editorial layout rather than a card grid. */
.history-page {
    color-scheme: light;
    color: #29342d;
    background: #f4efe4;
}

.history-page::before,
.history-page::after {
    display: none;
}

.history-masthead {
    width: min(1420px, calc(100% - 64px));
}

.history-masthead .public-nav .active::after {
    transform: scaleX(1);
}

.history-page-main {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.history-hero {
    position: relative;
    min-height: clamp(620px, 76vh, 850px);
    display: grid;
    align-items: end;
    overflow: hidden;
    color: #f8f1df;
    background: #1d2c25;
}

.history-hero::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(90deg, rgba(8, 25, 18, 0.8), rgba(8, 25, 18, 0.2) 62%, rgba(8, 25, 18, 0.36)), linear-gradient(0deg, rgba(5, 19, 14, 0.46), transparent 46%);
}

.history-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(0.96) brightness(0.72);
}

.history-hero-copy,
.history-hero-cue {
    position: relative;
    z-index: 2;
}

.history-hero-copy {
    width: min(1280px, calc(100% - 56px));
    margin: 0 auto;
    padding: 190px 0 118px;
}

.history-hero-copy p,
.heritage-eyebrow {
    margin: 0 0 18px;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.history-hero-copy p {
    color: #e7d9b9;
}

.history-hero h1 {
    max-width: 840px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4rem, 8.4vw, 8.7rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.8;
}

.history-hero-copy span {
    display: block;
    margin-top: 28px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.4rem, 2.4vw, 2.5rem);
    font-style: italic;
}

.history-hero-cue {
    position: absolute;
    bottom: 24px;
    left: 50%;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(248, 241, 223, 0.6);
    border-radius: 50%;
    font-size: 1.15rem;
    transform: translateX(-50%);
}

.heritage-intro,
.heritage-timeline,
.heritage-photo-stories,
.heritage-curiosities,
.heritage-sources {
    width: min(1280px, calc(100% - 56px));
    margin: 0 auto;
}

.heritage-intro {
    display: grid;
    grid-template-columns: minmax(280px, 0.48fr) minmax(360px, 0.52fr);
    gap: clamp(48px, 9vw, 146px);
    padding: clamp(82px, 11vw, 166px) 0;
}

.heritage-eyebrow {
    color: #5d684e;
}

.heritage-intro h2,
.heritage-section-heading h2,
.heritage-sources h2 {
    margin: 0;
    color: #2d372e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.7rem, 4.3vw, 5.2rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.95;
}

.heritage-intro-copy {
    padding-top: 52px;
}

.heritage-intro-copy p,
.heritage-photo-story p,
.heritage-curiosity-grid p,
.heritage-sources p {
    margin: 0 0 16px;
    color: #4f5b51;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
    line-height: 1.6;
}

.heritage-timeline {
    padding: clamp(72px, 9vw, 124px) 0;
    border-top: 1px solid rgba(80, 97, 77, 0.3);
}

.heritage-section-heading {
    display: grid;
    grid-template-columns: minmax(190px, 0.28fr) minmax(0, 0.72fr);
    gap: 30px;
    align-items: start;
    margin-bottom: 62px;
}

.heritage-section-heading .heritage-eyebrow {
    margin-top: 12px;
}

.heritage-timeline ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(80, 97, 77, 0.36);
}

.heritage-timeline li {
    min-height: 272px;
    padding: 28px 24px 18px;
    border-left: 1px solid rgba(80, 97, 77, 0.36);
}

.heritage-timeline li:last-child {
    border-right: 1px solid rgba(80, 97, 77, 0.36);
}

.heritage-timeline strong {
    display: block;
    margin-bottom: 38px;
    color: #59694e;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
}

.heritage-timeline h3,
.heritage-photo-story h3,
.heritage-curiosity-grid h3 {
    margin: 0;
    color: #303a31;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: 0;
}

.heritage-timeline h3 {
    font-size: 1.45rem;
    line-height: 1.12;
}

.heritage-timeline p {
    margin: 12px 0 0;
    color: #59645b;
    font-size: 0.92rem;
    line-height: 1.5;
}

.heritage-photo-stories {
    padding: clamp(72px, 10vw, 142px) 0;
}

.heritage-photo-story {
    display: grid;
    grid-template-columns: minmax(280px, 0.45fr) minmax(340px, 0.55fr);
    gap: clamp(46px, 9vw, 150px);
    align-items: center;
    padding: clamp(56px, 8vw, 110px) 0;
    border-top: 1px solid rgba(80, 97, 77, 0.3);
}

.heritage-photo-story:last-child {
    border-bottom: 1px solid rgba(80, 97, 77, 0.3);
}

.heritage-photo-story figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #2a332c;
}

.heritage-photo-story figure::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(10, 24, 17, 0.46), transparent 38%);
    pointer-events: none;
}

.heritage-photo-story img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(1) contrast(1.06) brightness(0.96);
}

.heritage-mill-story figure {
    height: min(66vw, 760px);
    max-height: 760px;
}

.heritage-apiary-story figure {
    height: min(42vw, 510px);
    max-height: 510px;
}

.heritage-photo-story figcaption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    color: #f5ecda;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-orientation: mixed;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.heritage-photo-story h3 {
    margin-bottom: 26px;
    font-size: clamp(2.5rem, 4vw, 4.7rem);
    line-height: 0.98;
}

.heritage-apiary-story {
    grid-template-columns: minmax(340px, 0.55fr) minmax(280px, 0.45fr);
}

.heritage-curiosities {
    padding: clamp(72px, 10vw, 142px) 0;
    border-top: 1px solid rgba(80, 97, 77, 0.3);
}

.heritage-curiosity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.heritage-curiosity-grid article {
    min-height: 244px;
    padding: 28px 26px;
    border-left: 1px solid rgba(80, 97, 77, 0.32);
}

.heritage-curiosity-grid article:last-child {
    border-right: 1px solid rgba(80, 97, 77, 0.32);
}

.heritage-curiosity-grid h3 {
    font-size: 1.55rem;
    line-height: 1.12;
}

.heritage-curiosity-grid p {
    margin-top: 16px;
    font-size: 0.94rem;
    line-height: 1.55;
}

.heritage-sources {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(360px, 0.58fr);
    gap: clamp(42px, 8vw, 116px);
    margin-bottom: 96px;
    padding: clamp(62px, 8vw, 104px) 0;
    border-top: 1px solid rgba(80, 97, 77, 0.3);
}

.heritage-sources p {
    max-width: 620px;
}

.heritage-source-links {
    color: #616d5a !important;
    font-size: 0.9rem !important;
}

.heritage-source-links a {
    color: #3f573c;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.history-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 28px max(28px, calc((100vw - 1280px) / 2));
    color: #e8dcc0;
    background: #193127;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .heritage-intro,
    .heritage-sources,
    .heritage-photo-story,
    .heritage-apiary-story {
        grid-template-columns: 1fr;
    }

    .heritage-intro-copy {
        padding-top: 0;
    }

    .heritage-timeline ol,
    .heritage-curiosity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .heritage-timeline li:nth-child(3) {
        border-left: 0;
    }

    .heritage-timeline li:last-child,
    .heritage-curiosity-grid article:last-child {
        border-right: 0;
    }

    .heritage-timeline li {
        min-height: 230px;
        border-bottom: 1px solid rgba(80, 97, 77, 0.36);
    }

    .heritage-apiary-story figure {
        order: -1;
    }

    .heritage-mill-story figure,
    .heritage-apiary-story figure {
        height: min(112vw, 720px);
        max-height: 720px;
    }
}

@media (max-width: 760px) {
    .history-masthead {
        width: min(100% - 28px, 1420px);
    }

    .history-hero {
        min-height: 620px;
    }

    .history-hero-copy,
    .heritage-intro,
    .heritage-timeline,
    .heritage-photo-stories,
    .heritage-curiosities,
    .heritage-sources {
        width: min(100% - 40px, 1280px);
    }

    .history-hero-copy {
        padding-bottom: 88px;
    }

    .history-hero h1 {
        font-size: clamp(3.4rem, 15vw, 5.4rem);
    }

    .heritage-intro,
    .heritage-timeline,
    .heritage-photo-stories,
    .heritage-curiosities,
    .heritage-sources {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .heritage-section-heading {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 42px;
    }

    .heritage-section-heading .heritage-eyebrow {
        margin-top: 0;
    }

    .heritage-timeline ol,
    .heritage-curiosity-grid {
        grid-template-columns: 1fr;
    }

    .heritage-timeline li,
    .heritage-timeline li:nth-child(3),
    .heritage-curiosity-grid article {
        min-height: 0;
        padding: 25px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(80, 97, 77, 0.3);
        border-left: 0;
    }

    .heritage-timeline li:last-child,
    .heritage-curiosity-grid article:last-child {
        border-bottom: 0;
    }

    .heritage-timeline strong {
        margin-bottom: 16px;
    }

    .heritage-photo-story {
        gap: 34px;
        padding: 58px 0;
    }

    .heritage-photo-story h3 {
        font-size: 2.65rem;
    }

    .heritage-mill-story figure,
    .heritage-apiary-story figure {
        height: min(128vw, 600px);
    }

    .heritage-apiary-story figure {
        height: min(82vw, 440px);
    }

    .heritage-sources {
        margin-bottom: 56px;
    }

    .history-footer {
        flex-direction: column;
        padding: 28px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Public visitor page: editorial rhythm with fewer framed surfaces. */
main#naslovnica {
    padding-top: 0;
}

.front-page-public {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.public-hero-scene {
    position: relative;
    min-height: clamp(440px, 61vh, 680px);
    border: 0;
    border-radius: 0;
    background: #08231c;
    box-shadow: none;
    backdrop-filter: none;
}

.public-hero-scene::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(2, 17, 13, 0.88) 0%, rgba(2, 17, 13, 0.57) 38%, rgba(2, 17, 13, 0.08) 75%);
    pointer-events: none;
}

.public-hero-scene img {
    height: clamp(440px, 61vh, 680px);
    filter: saturate(0.9) contrast(1.04) brightness(0.79);
    object-position: center 52%;
}

.public-hero-copy {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: max(24px, calc((100vw - 1180px) / 2));
    width: min(610px, calc(100vw - 48px));
    transform: translateY(-42%);
}

.public-hero-copy > p {
    margin: 0 0 12px;
    color: var(--turquoise-soft);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.public-hero-copy h1 {
    max-width: 610px;
    margin: 0;
    color: #f7fff9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.65rem, 6vw, 5.3rem);
    font-weight: 700;
    line-height: 0.96;
}

.public-hero-copy > span {
    display: block;
    margin-top: 20px;
    color: rgba(242, 255, 248, 0.84);
    font-size: clamp(1rem, 1.7vw, 1.22rem);
    font-weight: 700;
}

.public-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.public-hero-actions a,
.band-link {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(214, 245, 235, 0.52);
    border-radius: 0;
    color: var(--ink);
    background: rgba(3, 24, 19, 0.32);
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-hero-actions a:first-child {
    color: #052019;
    border-color: var(--turquoise-soft);
    background: var(--turquoise-soft);
}

.public-hero-actions a:hover,
.public-hero-actions a:focus-visible,
.band-link:hover,
.band-link:focus-visible {
    color: #052019;
    background: #f2fff8;
    outline: 3px solid rgba(138, 240, 223, 0.18);
}

main#naslovnica .visitor-guide {
    gap: clamp(58px, 8vw, 110px);
    padding: clamp(64px, 8vw, 116px) 0 120px;
}

main#naslovnica .visitor-guide > .visitor-intro {
    order: -6;
    display: grid;
    grid-template-columns: minmax(140px, 0.36fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding-top: 26px;
    border-top: 1px solid rgba(138, 240, 223, 0.3);
}

main#naslovnica .visitor-intro .section-label {
    padding-top: 10px;
}

main#naslovnica .visitor-intro h2 {
    max-width: 860px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4.25vw, 4rem);
    font-weight: 700;
    line-height: 1;
}

main#naslovnica .visitor-guide > .visitor-stat-panel {
    order: -5;
    gap: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

main#naslovnica .visitor-stats {
    gap: 0;
    border-top: 1px solid rgba(138, 240, 223, 0.2);
    border-bottom: 1px solid rgba(138, 240, 223, 0.2);
}

main#naslovnica .visitor-stats button {
    min-height: 126px;
    padding: 24px 20px;
    border: 0;
    border-radius: 0;
    border-right: 1px solid rgba(138, 240, 223, 0.18);
    background: transparent;
    box-shadow: none;
}

main#naslovnica .visitor-stats button:last-child {
    border-right: 0;
}

main#naslovnica .visitor-stats button:hover,
main#naslovnica .visitor-stats button:focus-visible,
main#naslovnica .visitor-stats button.active {
    background: rgba(138, 240, 223, 0.09);
}

main#naslovnica .stat-detail {
    min-height: 0;
    padding: 0 0 0 22px;
    border: 0;
    border-left: 3px solid var(--gold);
    border-radius: 0;
    background: transparent;
}

main#naslovnica .stat-detail p {
    max-width: 920px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.22rem, 2.1vw, 1.7rem);
    font-weight: 400;
    line-height: 1.35;
}

main#naslovnica .history-archive-band {
    padding: clamp(32px, 5vw, 62px) 0 0;
    border-top: 1px solid rgba(138, 240, 223, 0.24);
}

main#naslovnica .history-archive-band .section-heading {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(260px, 0.6fr);
    gap: clamp(24px, 5vw, 74px);
    align-items: end;
}

main#naslovnica .history-archive-band .section-heading > p {
    max-width: 510px;
    margin: 0;
    color: rgba(230, 248, 239, 0.72);
    font-size: 1.02rem;
    line-height: 1.55;
}

main#naslovnica .history-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
    margin-top: 30px;
}

main#naslovnica .history-archive-grid article {
    display: grid;
    grid-template-rows: 220px auto;
    min-width: 0;
    border-top: 1px solid rgba(138, 240, 223, 0.25);
}

main#naslovnica .history-archive-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}

main#naslovnica .history-archive-grid article > div {
    padding: 18px 2px 2px;
}

main#naslovnica .history-archive-grid span {
    display: block;
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

main#naslovnica .history-archive-grid h3 {
    margin: 7px 0 9px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.34rem, 2vw, 1.82rem);
    line-height: 1.08;
}

main#naslovnica .history-archive-grid p,
main#naslovnica .history-source {
    margin: 0;
    color: rgba(230, 248, 239, 0.74);
    font-size: 0.96rem;
    line-height: 1.55;
}

main#naslovnica .history-source {
    margin-top: 26px;
    font-size: 0.84rem;
}

main#naslovnica .history-source a {
    color: var(--turquoise-soft);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

main#naslovnica .guide-band,
main#naslovnica .article-picker.public-section {
    padding: clamp(32px, 5vw, 62px) 0 0;
    border: 0;
    border-top: 1px solid rgba(138, 240, 223, 0.24);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

main#naslovnica .traffic-band {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
    gap: clamp(28px, 6vw, 80px);
    align-items: end;
}

main#naslovnica .traffic-band > img {
    aspect-ratio: 4 / 3;
    border-radius: 0;
}

main#naslovnica .traffic-band .story-band-copy {
    padding: clamp(8px, 2vw, 22px) 0 clamp(8px, 2vw, 32px);
}

main#naslovnica .traffic-band h2,
main#naslovnica .gnome-path-band h2,
main#naslovnica .public-notice-band h2,
main#naslovnica .section-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: 0;
}

main#naslovnica .article-picker.public-section {
    order: -4;
}

main#naslovnica .picker-layout {
    grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
}

main#naslovnica .article-list {
    gap: 0;
    border-top: 1px solid rgba(138, 240, 223, 0.18);
}

main#naslovnica .article-card {
    min-height: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid rgba(138, 240, 223, 0.18);
    border-radius: 0;
    background: transparent;
}

main#naslovnica .article-card strong {
    max-width: 250px;
    font-size: 1.14rem;
}

main#naslovnica .article-card:hover,
main#naslovnica .article-card:focus-visible,
main#naslovnica .article-card.active {
    padding-left: 14px;
    border-color: var(--turquoise-soft);
    background: transparent;
}

main#naslovnica .reader {
    grid-template-columns: minmax(240px, 0.76fr) minmax(280px, 1fr);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

main#naslovnica .reader img {
    min-height: 430px;
}

main#naslovnica .reader-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 4vw, 56px);
    border-top: 1px solid rgba(138, 240, 223, 0.24);
    border-bottom: 1px solid rgba(138, 240, 223, 0.24);
}

main#naslovnica .reader h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.9rem, 3.8vw, 3.35rem);
    font-weight: 700;
    line-height: 1.02;
}

main#naslovnica .guide-band-offer,
main#naslovnica .guide-band-activity {
    background: transparent;
}

main#naslovnica .offer-grid {
    gap: 18px;
}

main#naslovnica .offer-grid article,
main#naslovnica .activity-strip article,
main#naslovnica .public-notice-grid article {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

main#naslovnica .offer-grid article {
    min-height: 0;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(138, 240, 223, 0.2);
}

main#naslovnica .offer-grid img {
    height: 190px;
}

main#naslovnica .offer-grid span,
main#naslovnica .offer-grid strong,
main#naslovnica .offer-grid p,
main#naslovnica .offer-grid a {
    margin-left: 0;
    margin-right: 0;
}

main#naslovnica .public-notice-grid {
    gap: 0;
}

main#naslovnica .public-notice-grid article {
    min-height: 0;
    padding: 4px 28px 8px 0;
    border-right: 1px solid rgba(138, 240, 223, 0.18);
}

main#naslovnica .public-notice-grid article + article {
    padding-left: 28px;
    border-right: 0;
}

main#naslovnica .gnome-path-band {
    grid-template-columns: minmax(0, 1fr) 150px;
    min-height: 0;
    padding-bottom: clamp(32px, 5vw, 62px);
}

main#naslovnica .gnome-path-band img {
    width: min(138px, 18vw);
}

main#naslovnica .activity-slider {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 14px;
}

main#naslovnica .activity-strip {
    gap: 24px;
}

main#naslovnica .activity-strip article {
    flex-basis: calc((100% - 48px) / 3);
    height: auto;
    min-height: 336px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(138, 240, 223, 0.2);
}

main#naslovnica .activity-strip img {
    height: 180px;
}

main#naslovnica .activity-strip span,
main#naslovnica .activity-strip strong,
main#naslovnica .activity-strip p,
main#naslovnica .activity-strip a {
    margin-left: 0;
    margin-right: 0;
}

main#naslovnica .activity-scroll-button {
    min-height: 336px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 760px) {
    .public-hero-scene,
    .public-hero-scene img {
        min-height: 500px;
        height: 66vh;
    }

    .public-hero-scene::after {
        background: linear-gradient(0deg, rgba(2, 17, 13, 0.92) 0%, rgba(2, 17, 13, 0.5) 54%, rgba(2, 17, 13, 0.14) 100%);
    }

    .public-hero-copy {
        top: auto;
        bottom: 48px;
        transform: none;
    }

    .public-hero-copy h1 {
        font-size: clamp(2.5rem, 13vw, 4rem);
    }

    main#naslovnica .visitor-guide {
        gap: 54px;
        padding: 64px 0 84px;
    }

    main#naslovnica .visitor-guide > .visitor-intro,
    main#naslovnica .traffic-band,
    main#naslovnica .history-archive-band .section-heading,
    main#naslovnica .picker-layout,
    main#naslovnica .reader {
        grid-template-columns: 1fr;
    }

    main#naslovnica .visitor-intro .section-label {
        padding-top: 0;
    }

    main#naslovnica .visitor-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    main#naslovnica .visitor-stats button:nth-child(2) {
        border-right: 0;
    }

    main#naslovnica .visitor-stats button:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(138, 240, 223, 0.18);
    }

    main#naslovnica .history-archive-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    main#naslovnica .history-archive-grid article {
        grid-template-rows: minmax(200px, 58vw) auto;
    }

    main#naslovnica .reader img {
        min-height: auto;
        aspect-ratio: 4 / 3;
    }

    main#naslovnica .reader-copy {
        padding: 28px 0 0;
        border-top: 0;
    }

    main#naslovnica .public-notice-grid article,
    main#naslovnica .public-notice-grid article + article {
        padding: 0 0 22px;
        border-right: 0;
        border-bottom: 1px solid rgba(138, 240, 223, 0.18);
    }

    main#naslovnica .public-notice-grid article + article {
        padding-top: 22px;
    }

    main#naslovnica .gnome-path-band {
        grid-template-columns: minmax(0, 1fr) 86px;
    }

    main#naslovnica .gnome-path-band img {
        width: 80px;
    }

    main#naslovnica .activity-slider {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 8px;
    }

    main#naslovnica .activity-strip article {
        flex-basis: min(300px, calc(100vw - 92px));
    }
}

/* Public site direction: historic warmth with contemporary structure. */
.public-masthead {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 95;
    width: min(1420px, calc(100% - 64px));
    display: grid;
    grid-template-columns: minmax(210px, 0.82fr) minmax(0, 1.75fr) auto;
    align-items: center;
    gap: 28px;
    padding-top: 22px;
    transform: translateX(-50%);
}

.public-masthead::before {
    display: none;
}

.public-masthead .brand-row {
    display: contents;
}

.public-masthead .brand-lockup {
    grid-column: 1;
}

.public-masthead .brand-lockup::before {
    display: none;
}

.public-masthead .brand-symbol {
    width: 54px;
    filter: brightness(0) invert(1) sepia(0.2) saturate(0.7) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.4));
}

.public-masthead .brand-title {
    color: #f8f1df;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.48);
}

.public-masthead .brand-subtitle {
    color: #f5e8c7;
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.public-nav {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 34px);
    min-width: 0;
}

.public-nav a {
    position: relative;
    color: rgba(250, 244, 228, 0.9);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.78rem, 1vw, 0.94rem);
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

.public-nav a::after {
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    height: 1px;
    content: "";
    background: #f3e1b7;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}

.public-nav a:hover::after,
.public-nav a:focus-visible::after {
    transform: scaleX(1);
}

.public-masthead .auth-actions {
    grid-column: 3;
    gap: 8px;
}

.public-masthead .auth-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(248, 241, 223, 0.48);
    border-radius: 0;
    color: #f8f1df;
    background: rgba(12, 25, 20, 0.18);
    box-shadow: none;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.public-masthead .auth-button.secondary {
    border-color: transparent;
    background: transparent;
}

.public-masthead .notice-bar {
    grid-column: 1 / -1;
    min-height: 30px;
    max-height: 50px;
    margin-top: -6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.public-masthead .notice-item,
.public-masthead .notice-weather strong,
.public-masthead .notice-weather .weather-detail {
    color: rgba(248, 241, 223, 0.8);
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.public-masthead .notice-weather strong {
    color: #f4e2ba;
}

.public-masthead.status-hidden .notice-bar {
    min-height: 0;
}

.public-hero-scene,
.public-hero-scene img {
    min-height: clamp(640px, 79vh, 850px);
    height: clamp(640px, 79vh, 850px);
}

.public-hero-scene::after {
    background:
        linear-gradient(90deg, rgba(9, 24, 19, 0.82) 0%, rgba(9, 24, 19, 0.4) 42%, rgba(9, 24, 19, 0.1) 74%),
        linear-gradient(0deg, rgba(5, 17, 13, 0.28), transparent 42%);
}

.public-hero-copy {
    left: max(32px, calc((100vw - 1420px) / 2 + 68px));
    width: min(740px, calc(100vw - 64px));
    transform: translateY(-24%);
}

.public-hero-copy > p {
    display: none;
}

.public-hero-copy h1 {
    color: #fbf5e7;
    font-size: clamp(4.25rem, 9vw, 9.7rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.84;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.24);
}

.public-hero-copy > span {
    margin-top: 18px;
    color: #f6ecd4;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.85rem, 3.4vw, 3.4rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.32);
}

.hero-scroll-cue {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 50%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #f8edcf;
    border: 1px solid rgba(248, 237, 207, 0.55);
    border-radius: 999px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    line-height: 1;
    transform: translateX(-50%);
}

main#naslovnica .visitor-guide {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(72px, 8vw, 132px) max(28px, calc((100vw - 1280px) / 2)) 120px;
    gap: clamp(62px, 8vw, 118px);
    color: #25352c;
    background: #f5f0e5;
}

main#naslovnica .visitor-guide > .visitor-intro {
    order: -8;
    display: block;
    max-width: 760px;
    padding: 0;
    border: 0;
}

main#naslovnica .visitor-intro .section-label,
main#naslovnica .section-label {
    padding: 0;
    color: #52624c;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
}

main#naslovnica .visitor-intro h2,
main#naslovnica .history-archive-band h2,
main#naslovnica .section-heading h2,
main#naslovnica .traffic-band h2,
main#naslovnica .gnome-path-band h2,
main#naslovnica .public-notice-band h2,
main#naslovnica .reader h3 {
    color: #26342c;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

main#naslovnica .visitor-intro h2 {
    max-width: 860px;
    font-size: clamp(2.65rem, 5.1vw, 5.1rem);
    line-height: 0.96;
}

main#naslovnica .visitor-guide > .visitor-stat-panel {
    order: -7;
    max-width: 640px;
    gap: 26px;
}

main#naslovnica .stat-detail {
    padding: 0;
    border: 0;
}

main#naslovnica .stat-detail::before {
    width: 74px;
    height: 1px;
    display: block;
    margin: 0 0 20px;
    content: "";
    background: #7e8963;
}

main#naslovnica .stat-detail p {
    color: #526056;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.58;
}

main#naslovnica .visitor-stats {
    gap: 0;
    border-top: 1px solid rgba(61, 80, 65, 0.26);
    border-bottom: 1px solid rgba(61, 80, 65, 0.26);
}

main#naslovnica .visitor-stats button {
    min-height: 98px;
    padding: 15px 14px;
    color: #2d3f34;
    border-right-color: rgba(61, 80, 65, 0.22);
}

main#naslovnica .visitor-stats strong {
    color: #2e4135;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.75rem;
    font-weight: 400;
}

main#naslovnica .visitor-stats span {
    color: #617064;
}

main#naslovnica .visitor-guide > .history-archive-band {
    order: -6;
    padding: 0;
    border: 0;
}

main#naslovnica .history-archive-band .section-heading {
    grid-template-columns: minmax(260px, 0.75fr) minmax(260px, 0.6fr);
    padding-top: 36px;
    border-top: 1px solid rgba(61, 80, 65, 0.24);
}

main#naslovnica .history-archive-band .section-heading > p,
main#naslovnica .history-archive-grid p,
main#naslovnica .history-source {
    color: #5f6b61;
}

main#naslovnica .history-archive-grid {
    gap: 0;
    margin-top: 40px;
    border-top: 1px solid rgba(61, 80, 65, 0.22);
    border-bottom: 1px solid rgba(61, 80, 65, 0.22);
}

main#naslovnica .history-archive-grid article {
    grid-template-rows: 210px auto;
    padding: 0 26px 28px 0;
    border: 0;
    border-right: 1px solid rgba(61, 80, 65, 0.22);
}

main#naslovnica .history-archive-grid article + article {
    padding-left: 26px;
}

main#naslovnica .history-archive-grid article:last-child {
    border-right: 0;
}

main#naslovnica .history-archive-grid img {
    filter: sepia(0.62) grayscale(0.72) contrast(0.9) brightness(1.05);
}

main#naslovnica .history-archive-grid h3 {
    color: #2b3a30;
    font-weight: 400;
}

main#naslovnica .history-archive-grid span {
    color: #66704d;
}

main#naslovnica .visitor-guide > .traffic-band {
    order: -5;
    width: 100vw;
    min-height: 330px;
    margin-left: calc(50% - 50vw);
    padding: clamp(50px, 6vw, 86px) max(28px, calc((100vw - 1280px) / 2));
    border: 0;
    background: #102a20;
    isolation: isolate;
    overflow: hidden;
}

main#naslovnica .traffic-band > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    filter: brightness(0.38) saturate(0.58);
}

main#naslovnica .traffic-band::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(90deg, rgba(8, 31, 22, 0.94), rgba(8, 31, 22, 0.76) 48%, rgba(8, 31, 22, 0.36));
}

main#naslovnica .traffic-band .story-band-copy {
    max-width: 680px;
    padding: 0;
}

main#naslovnica .traffic-band .section-label,
main#naslovnica .traffic-band h2,
main#naslovnica .traffic-band .intro,
main#naslovnica .traffic-band .article-body p,
main#naslovnica .traffic-band .admin-slider-status {
    color: #f4ecd9;
}

main#naslovnica .traffic-band h2 {
    font-size: clamp(2.55rem, 4.8vw, 4.8rem);
}

main#naslovnica .traffic-band .intro {
    max-width: 520px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 400;
}

main#naslovnica .traffic-band .article-body {
    display: none;
}

main#naslovnica .traffic-band .slider-button {
    top: auto;
    bottom: 24px;
    border-color: rgba(244, 236, 217, 0.42);
    background: rgba(8, 31, 22, 0.42);
}

main#naslovnica .visitor-guide > .article-picker.public-section {
    order: -4;
    padding: 0;
    border: 0;
}

main#naslovnica .article-picker .section-heading {
    padding-top: 36px;
    border-top: 1px solid rgba(61, 80, 65, 0.24);
}

main#naslovnica .picker-layout {
    gap: 42px;
}

main#naslovnica .article-list,
main#naslovnica .article-card {
    border-color: rgba(61, 80, 65, 0.22);
}

main#naslovnica .article-card span {
    color: #6f7a55;
}

main#naslovnica .article-card strong {
    color: #314137;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

main#naslovnica .article-card:hover,
main#naslovnica .article-card:focus-visible,
main#naslovnica .article-card.active {
    border-color: #68754f;
    color: #314137;
}

main#naslovnica .reader {
    background: #e5ded0;
}

main#naslovnica .reader img {
    filter: sepia(0.42) saturate(0.8) contrast(0.92);
}

main#naslovnica .reader-copy {
    border-color: rgba(61, 80, 65, 0.22);
}

main#naslovnica .reader .intro,
main#naslovnica .reader .article-body,
main#naslovnica .reader .article-body p {
    color: #58645a;
}

main#naslovnica .guide-band,
main#naslovnica .article-picker.public-section {
    border-top-color: rgba(61, 80, 65, 0.24);
}

main#naslovnica .guide-band-offer,
main#naslovnica .guide-band-activity,
main#naslovnica .public-notice-band {
    background: transparent;
}

main#naslovnica .offer-grid article,
main#naslovnica .activity-strip article,
main#naslovnica .public-notice-grid article {
    border-color: rgba(61, 80, 65, 0.22);
}

main#naslovnica .offer-grid img,
main#naslovnica .activity-strip img {
    filter: sepia(0.22) saturate(0.78) contrast(0.94);
}

main#naslovnica .offer-grid span,
main#naslovnica .activity-strip span,
main#naslovnica .public-notice-grid span {
    color: #68754f;
}

main#naslovnica .offer-grid strong,
main#naslovnica .activity-strip strong,
main#naslovnica .public-notice-grid strong {
    color: #2e4034;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

main#naslovnica .offer-grid p,
main#naslovnica .activity-strip p,
main#naslovnica .public-notice-grid p,
main#naslovnica .public-notice-grid small {
    color: #5c6a5e;
}

main#naslovnica .gnome-path-band {
    background: #dce1d0;
}

main#naslovnica .activity-scroll-button {
    color: #415241;
    border-color: rgba(61, 80, 65, 0.28);
}

@media (max-width: 1050px) {
    .public-masthead {
        grid-template-columns: minmax(210px, 1fr) auto;
    }

    .public-nav {
        display: none;
    }

    .public-masthead .auth-actions {
        grid-column: 2;
    }

    .public-masthead .notice-bar {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .public-masthead {
        width: min(100% - 28px, 1420px);
        gap: 10px;
        padding-top: 14px;
    }

    .public-masthead .brand-symbol {
        width: 42px;
    }

    .public-masthead .brand-title {
        font-size: 1.2rem;
    }

    .public-masthead .auth-button {
        min-height: 30px;
        padding: 0 8px;
        font-size: 0.62rem;
    }

    .public-masthead .notice-bar {
        display: none;
    }

    .public-hero-scene,
    .public-hero-scene img {
        min-height: 580px;
        height: 78vh;
    }

    .public-hero-copy {
        bottom: 84px;
        left: 28px;
        transform: none;
    }

    .public-hero-copy h1 {
        font-size: clamp(4rem, 23vw, 6.2rem);
    }

    .public-hero-copy > span {
        font-size: clamp(1.65rem, 8vw, 2.35rem);
    }

    main#naslovnica .visitor-guide {
        padding: 64px 24px 84px;
        gap: 62px;
    }

    main#naslovnica .history-archive-band .section-heading {
        grid-template-columns: 1fr;
    }

    main#naslovnica .history-archive-grid {
        grid-template-columns: 1fr;
    }

    main#naslovnica .history-archive-grid article,
    main#naslovnica .history-archive-grid article + article {
        padding: 0 0 28px;
        border-right: 0;
        border-bottom: 1px solid rgba(61, 80, 65, 0.22);
    }

    main#naslovnica .history-archive-grid article + article {
        padding-top: 28px;
    }

    main#naslovnica .visitor-guide > .traffic-band {
        margin-left: -24px;
        padding: 56px 24px 72px;
    }
}

/* New public landing page: intentionally sparse, content-rich sections. */
.public-masthead .brand-symbol {
    width: 66px;
    filter: sepia(0.9) saturate(0.7) brightness(1.22) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.38));
}

.public-masthead .brand-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.64rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.public-masthead .brand-subtitle {
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.3em;
}

.public-nav {
    gap: clamp(16px, 2vw, 38px);
}

.public-nav a {
    font-size: clamp(0.82rem, 0.94vw, 0.98rem);
    line-height: 1.2;
}

.public-masthead .notice-bar {
    width: max-content;
    max-width: min(92vw, 680px);
    min-height: 34px;
    max-height: 52px;
    justify-self: center;
    margin-top: 2px;
    padding: 7px 15px;
    border: 1px solid rgba(248, 241, 223, 0.3);
    border-radius: 999px;
    background: rgba(9, 29, 22, 0.5);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
}

.public-masthead .notice-item,
.public-masthead .notice-weather strong,
.public-masthead .notice-weather .weather-detail {
    font-size: 0.72rem;
    letter-spacing: 0.07em;
}

.public-masthead .notice-weather .weather-detail {
    display: none;
}

.public-nav .public-search {
    margin-left: 8px;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 1.28rem;
    line-height: 1;
}

.public-home {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    color: #26342b;
    background: #f5f1e8;
}

main#naslovnica > .visitor-guide {
    display: none;
}

.public-history,
.public-trails,
.public-research {
    width: min(1280px, calc(100% - 56px));
    margin: 0 auto;
}

.public-history {
    min-height: 410px;
    display: grid;
    grid-template-columns: minmax(310px, 0.42fr) minmax(460px, 0.58fr);
    align-items: stretch;
}

.public-history-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(58px, 7vw, 106px) clamp(30px, 5.4vw, 80px) clamp(54px, 6vw, 92px) 0;
}

.public-history-copy > p,
.public-trails > div > p,
.public-research > div > p {
    margin: 0 0 18px;
    color: #59664d;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.public-history h2,
.public-trails h2,
.public-research h2 {
    margin: 0;
    color: #29342d;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.98;
}

.public-history h2 {
    font-size: clamp(2.5rem, 4.4vw, 4.5rem);
}

.history-ornament {
    width: 82px;
    height: 1px;
    display: block;
    margin: 22px 0;
    background: #6f7c60;
}

.public-history-copy > div {
    max-width: 420px;
}

.public-history-copy > div p {
    margin: 0 0 8px;
    color: #4f5b52;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.48;
}

.public-history-copy > a,
.public-trails a {
    width: max-content;
    margin-top: 20px;
    color: #526044;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.public-history-copy > a span,
.public-trails a span {
    display: inline-block;
    margin-left: 5px;
    font-size: 1.1rem;
    line-height: 0;
}

.public-history figure {
    position: relative;
    min-height: 410px;
    margin: 0;
    overflow: hidden;
}

.public-history figure::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(90deg, #f5f1e8 0%, rgba(245, 241, 232, 0) 18%);
    pointer-events: none;
}

.public-history img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(1) sepia(0.58) contrast(0.88) brightness(1.08);
}

.public-history figcaption {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    color: rgba(248, 244, 229, 0.92);
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-orientation: mixed;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.72);
}

.public-traffic {
    position: relative;
    min-height: 248px;
    overflow: hidden;
    color: #f7eedc;
    background: #0c271d;
    isolation: isolate;
}

.public-traffic > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.36) saturate(0.55);
}

.public-traffic::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(90deg, rgba(5, 29, 20, 0.94), rgba(5, 29, 20, 0.76) 56%, rgba(5, 29, 20, 0.36));
}

.public-traffic-content {
    width: min(1280px, calc(100% - 56px));
    min-height: 248px;
    display: grid;
    grid-template-columns: minmax(440px, 1.1fr) minmax(460px, 0.9fr);
    gap: 54px;
    align-items: center;
    margin: 0 auto;
}

.traffic-lead {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.traffic-car {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(247, 238, 220, 0.92);
    border-radius: 50%;
    color: #f7eedc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.1rem;
}

.traffic-lead h2 {
    margin: 0;
    color: #f7eedc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 400;
    line-height: 1;
}

.traffic-lead p {
    max-width: 430px;
    margin: 12px 0 0;
    color: rgba(247, 238, 220, 0.94);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.45;
}

.traffic-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.traffic-points p {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0;
    color: #f4ebd8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.9rem;
    line-height: 1.35;
}

.traffic-points span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(247, 238, 220, 0.72);
    border-radius: 50%;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.72rem;
}

.public-trails {
    min-height: 280px;
    display: grid;
    grid-template-columns: minmax(250px, 1.15fr) repeat(3, minmax(190px, 0.82fr));
    gap: 0;
    align-items: start;
    padding: clamp(42px, 5vw, 74px) 0;
}

.public-trails > div {
    padding-right: 42px;
}

.public-trails h2 {
    font-size: clamp(2.65rem, 4.3vw, 4.4rem);
}

.public-trails article {
    min-height: 116px;
    padding: 0 30px;
    border-left: 1px solid rgba(77, 94, 76, 0.42);
}

.public-trails article > span {
    display: block;
    margin-bottom: 14px;
    color: #586447;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
}

.public-trails h3 {
    margin: 0;
    color: #2c3930;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.2;
}

.public-trails article p {
    margin: 8px 0 0;
    color: #59655b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.92rem;
    line-height: 1.4;
}

.public-trails a {
    display: inline-block;
    margin-top: 14px;
}

.public-research {
    padding: 60px 0 96px;
    border-top: 1px solid rgba(77, 94, 76, 0.3);
}

.public-research > div:first-child {
    max-width: 600px;
}

.public-research h2 {
    font-size: clamp(2.1rem, 3.5vw, 3.4rem);
}

.research-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 42px;
}

.research-columns article {
    padding: 0 30px;
    border-left: 1px solid rgba(77, 94, 76, 0.3);
}

.research-columns article:first-child {
    padding-left: 0;
    border-left: 0;
}

.research-columns h3 {
    margin: 0;
    color: #324136;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 400;
}

.research-columns p {
    margin: 10px 0 0;
    color: #58655b;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .public-history,
    .public-traffic-content,
    .public-trails {
        grid-template-columns: 1fr;
    }

    .public-history-copy {
        padding: 64px 0 46px;
    }

    .public-history figure {
        min-height: min(56vw, 460px);
    }

    .public-traffic-content {
        gap: 32px;
        padding: 48px 0;
    }

    .public-trails > div {
        margin-bottom: 40px;
        padding-right: 0;
    }

    .public-trails article {
        padding: 22px 0;
        border-top: 1px solid rgba(77, 94, 76, 0.3);
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .public-masthead .notice-bar {
        display: grid;
        max-width: calc(100vw - 40px);
        margin-top: 0;
        padding: 6px 12px;
    }

    .public-history,
    .public-trails,
    .public-research {
        width: min(100% - 40px, 1280px);
    }

    .public-history-copy {
        padding-top: 56px;
    }

    .public-history h2,
    .public-trails h2 {
        font-size: 2.85rem;
    }

    .public-history figure {
        min-height: 320px;
    }

    .public-history figcaption {
        right: 12px;
        bottom: 12px;
        font-size: 0.56rem;
    }

    .public-history figure::before {
        background: linear-gradient(0deg, rgba(245, 241, 232, 0.7), transparent 28%);
    }

    .public-traffic-content {
        width: min(100% - 40px, 1280px);
    }

    .traffic-lead {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
    }

    .traffic-car {
        width: 56px;
        height: 56px;
        font-size: 1.35rem;
    }

    .traffic-lead h2 {
        font-size: 2.5rem;
    }

    .traffic-points,
    .research-columns {
        grid-template-columns: 1fr;
    }

    .traffic-points {
        gap: 14px;
    }

    .research-columns {
        margin-top: 32px;
    }

    .research-columns article,
    .research-columns article:first-child {
        padding: 22px 0;
        border-top: 1px solid rgba(77, 94, 76, 0.3);
        border-left: 0;
    }
}