/* ============================================================
   MATCHOOM NEWS - Retro-Futuristic News Portal
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --deep-void: #0A0A1A;
    --neon-magenta: #FF2D6B;
    --electric-teal: #00E5CC;
    --burnished-gold: #D4A848;
    --aged-parchment: #E8DCC8;
    --broadcast-chrome: #8A92A8;
    --neon-amber: #FFAA22;
    --deep-indigo: #14142E;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--deep-void);
    color: var(--aged-parchment);
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Vignette Overlay --- */
#vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(10,10,26,0.4) 100%);
}

/* --- Floating Elements Layer --- */
#floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    opacity: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.floating-circle {
    width: 10px;
    height: 10px;
    border: 1px solid var(--burnished-gold);
    border-radius: 50%;
}

.floating-triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--burnished-gold);
}

.floating-hexagon {
    width: 12px;
    height: 12px;
    background: var(--burnished-gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.floating-star {
    width: 8px;
    height: 8px;
    background: var(--electric-teal);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.floating-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--burnished-gold), transparent);
    left: 0 !important;
}

@keyframes floatDrift1 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.1; }
    25% { opacity: 0.15; }
    50% { transform: translate(80px, -120px) rotate(180deg); opacity: 0.12; }
    75% { opacity: 0.08; }
    100% { transform: translate(160px, -240px) rotate(360deg); opacity: 0.1; }
}

@keyframes floatDrift2 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.08; }
    33% { opacity: 0.14; }
    66% { transform: translate(-100px, -80px) rotate(240deg); opacity: 0.1; }
    100% { transform: translate(-200px, -160px) rotate(360deg); opacity: 0.08; }
}

@keyframes floatDrift3 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.12; }
    50% { transform: translate(50px, 100px) rotate(180deg); opacity: 0.06; }
    100% { transform: translate(100px, 200px) rotate(360deg); opacity: 0.12; }
}

@keyframes floatDrift4 {
    0% { transform: translate(0, 0); opacity: 0.1; }
    50% { transform: translate(-60px, -150px); opacity: 0.15; }
    100% { transform: translate(-120px, -300px); opacity: 0.1; }
}

@keyframes starPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.2; }
}

@keyframes scanLine {
    0% { transform: translateY(0); opacity: 0.03; }
    100% { transform: translateY(100vh); opacity: 0.03; }
}

/* --- Navigation --- */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(10, 10, 26, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 1000;
    transition: height 0.4s ease, background 0.4s ease;
    border-bottom: 1px solid rgba(212, 168, 72, 0.1);
}

#main-nav.scrolled {
    height: 32px;
    background: rgba(10, 10, 26, 0.88);
}

.nav-logo {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--aged-parchment);
}

.nav-logo-accent {
    color: var(--neon-magenta);
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--broadcast-chrome);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--electric-teal);
}

/* --- Broadcast Segments (Full-viewport sections) --- */
.broadcast-segment {
    min-height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: transform, opacity;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.broadcast-segment.zoom-out {
    transform: scale(1.05);
    opacity: 0;
}

.broadcast-segment.zoom-in {
    transform: scale(0.95);
    opacity: 0;
}

.broadcast-segment.zoom-active {
    transform: scale(1);
    opacity: 1;
}

/* --- Hero Section --- */
#hero {
    background: linear-gradient(180deg, var(--deep-void) 0%, var(--deep-indigo) 50%, var(--deep-void) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sunburst-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140vmax;
    height: 140vmax;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        rgba(212, 168, 72, 0.08) 0deg,
        transparent 5deg,
        transparent 10deg,
        rgba(212, 168, 72, 0.08) 10deg,
        transparent 15deg,
        transparent 20deg,
        rgba(212, 168, 72, 0.08) 20deg,
        transparent 25deg,
        transparent 30deg,
        rgba(212, 168, 72, 0.08) 30deg,
        transparent 35deg,
        transparent 40deg,
        rgba(212, 168, 72, 0.08) 40deg,
        transparent 45deg,
        transparent 50deg,
        rgba(212, 168, 72, 0.08) 50deg,
        transparent 55deg,
        transparent 60deg,
        rgba(212, 168, 72, 0.08) 60deg,
        transparent 65deg,
        transparent 70deg,
        rgba(212, 168, 72, 0.08) 70deg,
        transparent 75deg,
        transparent 80deg,
        rgba(212, 168, 72, 0.08) 80deg,
        transparent 85deg,
        transparent 90deg,
        rgba(212, 168, 72, 0.08) 90deg,
        transparent 95deg,
        transparent 100deg,
        rgba(212, 168, 72, 0.08) 100deg,
        transparent 105deg,
        transparent 110deg,
        rgba(212, 168, 72, 0.08) 110deg,
        transparent 115deg,
        transparent 120deg,
        rgba(212, 168, 72, 0.08) 120deg,
        transparent 125deg,
        transparent 130deg,
        rgba(212, 168, 72, 0.08) 130deg,
        transparent 135deg,
        transparent 140deg,
        rgba(212, 168, 72, 0.08) 140deg,
        transparent 145deg,
        transparent 150deg,
        rgba(212, 168, 72, 0.08) 150deg,
        transparent 155deg,
        transparent 160deg,
        rgba(212, 168, 72, 0.08) 160deg,
        transparent 165deg,
        transparent 170deg,
        rgba(212, 168, 72, 0.08) 170deg,
        transparent 175deg,
        transparent 180deg,
        rgba(212, 168, 72, 0.08) 180deg,
        transparent 185deg,
        transparent 190deg,
        rgba(212, 168, 72, 0.08) 190deg,
        transparent 195deg,
        transparent 200deg,
        rgba(212, 168, 72, 0.08) 200deg,
        transparent 205deg,
        transparent 210deg,
        rgba(212, 168, 72, 0.08) 210deg,
        transparent 215deg,
        transparent 220deg,
        rgba(212, 168, 72, 0.08) 220deg,
        transparent 225deg,
        transparent 230deg,
        rgba(212, 168, 72, 0.08) 230deg,
        transparent 235deg,
        transparent 240deg,
        rgba(212, 168, 72, 0.08) 240deg,
        transparent 245deg,
        transparent 250deg,
        rgba(212, 168, 72, 0.08) 250deg,
        transparent 255deg,
        transparent 260deg,
        rgba(212, 168, 72, 0.08) 260deg,
        transparent 265deg,
        transparent 270deg,
        rgba(212, 168, 72, 0.08) 270deg,
        transparent 275deg,
        transparent 280deg,
        rgba(212, 168, 72, 0.08) 280deg,
        transparent 285deg,
        transparent 290deg,
        rgba(212, 168, 72, 0.08) 290deg,
        transparent 295deg,
        transparent 300deg,
        rgba(212, 168, 72, 0.08) 300deg,
        transparent 305deg,
        transparent 310deg,
        rgba(212, 168, 72, 0.08) 310deg,
        transparent 315deg,
        transparent 320deg,
        rgba(212, 168, 72, 0.08) 320deg,
        transparent 325deg,
        transparent 330deg,
        rgba(212, 168, 72, 0.08) 330deg,
        transparent 335deg,
        transparent 340deg,
        rgba(212, 168, 72, 0.08) 340deg,
        transparent 345deg,
        transparent 350deg,
        rgba(212, 168, 72, 0.08) 350deg,
        transparent 355deg,
        transparent 360deg
    );
    opacity: 0.6;
    pointer-events: none;
    animation: slowRotate 120s linear infinite;
}

@keyframes slowRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
}

.hero-title {
    font-family: 'Poiret One', cursive;
    font-size: clamp(3.5rem, 10vw, 10rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aged-parchment);
    text-shadow:
        0 0 7px rgba(232, 220, 200, 0.3),
        0 0 10px rgba(232, 220, 200, 0.2),
        0 0 21px rgba(232, 220, 200, 0.1);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--burnished-gold);
}

/* --- News Ticker --- */
.news-ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 26, 0.85);
    border-top: 1px solid rgba(212, 168, 72, 0.2);
    border-bottom: 1px solid rgba(212, 168, 72, 0.2);
    overflow: hidden;
    padding: 0.6rem 0;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: tickerScroll 45s linear infinite;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--electric-teal);
    white-space: nowrap;
    padding-right: 2rem;
}

.ticker-diamond {
    color: var(--burnished-gold);
    margin: 0 1.5rem;
}

/* --- Art Deco Dividers --- */
.deco-divider {
    width: 100%;
    padding: 1rem 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--deep-void), var(--deep-indigo), var(--deep-void));
}

.deco-divider svg {
    width: 100%;
    height: 60px;
    opacity: 0.3;
}

.chevron-path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.deco-divider.animated .chevron-path {
    stroke-dashoffset: 0;
}

/* --- Section Headers --- */
.segment-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 6rem 4rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4rem;
    border-bottom: 1px solid rgba(212, 168, 72, 0.15);
    padding-bottom: 1.5rem;
}

.section-title {
    font-family: 'Poiret One', cursive;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-title.neon-pink {
    color: var(--neon-magenta);
    text-shadow:
        0 0 7px var(--neon-magenta),
        0 0 10px var(--neon-magenta),
        0 0 21px var(--neon-magenta),
        0 0 42px rgba(255, 45, 107, 0.4),
        0 0 82px rgba(255, 45, 107, 0.2);
}

.section-title.neon-teal {
    color: var(--electric-teal);
    text-shadow:
        0 0 7px var(--electric-teal),
        0 0 10px var(--electric-teal),
        0 0 21px var(--electric-teal),
        0 0 42px rgba(0, 229, 204, 0.4),
        0 0 82px rgba(0, 229, 204, 0.2);
}

.section-timestamp {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--neon-magenta);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--neon-magenta);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--neon-magenta); }
    50% { opacity: 0.3; box-shadow: none; }
}

.archive-indicator {
    color: var(--electric-teal);
    font-size: 0.6rem;
}

/* --- Featured Stories Section --- */
#featured {
    background: linear-gradient(180deg, var(--deep-void) 0%, var(--deep-indigo) 40%, var(--deep-void) 100%);
}

.story-grid {
    display: grid;
    grid-template-columns: 62% 30%;
    gap: 2rem;
    column-gap: 8%;
}

.story-primary {
    grid-row: span 2;
}

.story {
    margin-bottom: 2rem;
}

/* --- Vintage Photo Treatment --- */
.vintage-photo {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--burnished-gold);
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.vintage-photo .photo-placeholder {
    filter: sepia(0.35) contrast(1.15) brightness(0.9) saturate(0.7);
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.vintage-photo .photo-placeholder svg {
    display: block;
    width: 100%;
    height: auto;
}

.photo-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
}

.vintage-photo:hover .photo-placeholder {
    filter: sepia(0) contrast(1.1) brightness(1) saturate(1);
    transform: scale(1.03);
}

.vintage-photo:hover {
    box-shadow: 0 8px 32px rgba(0, 229, 204, 0.15);
}

.vintage-photo {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Story Content --- */
.story-category {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--neon-amber);
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(255, 170, 34, 0.3);
}

.story-headline {
    font-family: 'Poiret One', cursive;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--aged-parchment);
    line-height: 1.3;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.story:hover .story-headline {
    color: var(--neon-magenta);
    text-shadow:
        0 0 7px var(--neon-magenta),
        0 0 10px var(--neon-magenta),
        0 0 21px var(--neon-magenta),
        0 0 42px rgba(255, 45, 107, 0.4);
}

.story-excerpt {
    color: var(--aged-parchment);
    opacity: 0.85;
    margin-bottom: 1rem;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
}

.story-meta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.story-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--neon-magenta);
}

.story-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--electric-teal);
}

/* --- Secondary Stories --- */
.story-secondary .story-headline {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

.story-secondary .story-excerpt {
    font-size: clamp(0.85rem, 1vw, 0.95rem);
}

/* --- Archive / Stories Section --- */
#stories {
    background: linear-gradient(180deg, var(--deep-void) 0%, var(--deep-indigo) 50%, var(--deep-void) 100%);
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.archive-story {
    transition: transform 0.3s ease;
}

.archive-story:hover {
    transform: translateY(-4px);
}

.archive-image {
    margin-bottom: 1rem;
}

.archive-category {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--electric-teal);
    display: block;
    margin-bottom: 0.5rem;
}

.archive-headline {
    font-family: 'Poiret One', cursive;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--aged-parchment);
    line-height: 1.3;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.archive-story:hover .archive-headline {
    color: var(--neon-magenta);
    text-shadow:
        0 0 7px var(--neon-magenta),
        0 0 10px var(--neon-magenta);
}

.archive-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--broadcast-chrome);
}

/* --- About Section --- */
#about {
    background: linear-gradient(180deg, var(--deep-void) 0%, var(--deep-indigo) 50%, var(--deep-void) 100%);
}

.about-inner {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    padding: 8rem 4rem;
}

.about-ornament {
    flex-shrink: 0;
    width: 120px;
}

.about-ornament-right {
    order: 3;
}

.concentric-arches {
    width: 100%;
    height: auto;
    opacity: 0.5;
}

.about-content {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
}

.about-title {
    font-family: 'Poiret One', cursive;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--burnished-gold);
    text-shadow:
        0 0 7px rgba(212, 168, 72, 0.3),
        0 0 21px rgba(212, 168, 72, 0.15);
    margin-bottom: 2.5rem;
    text-align: center;
}

.about-text p {
    margin-bottom: 1.5rem;
    color: var(--aged-parchment);
    opacity: 0.9;
}

.about-text p:last-child {
    margin-bottom: 2.5rem;
}

.about-signal {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem;
    border: 1px solid rgba(212, 168, 72, 0.2);
    border-radius: 2px;
    background: rgba(20, 20, 46, 0.5);
}

.signal-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--broadcast-chrome);
}

.signal-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--electric-teal);
    animation: signalBlink 2s ease-in-out infinite;
}

@keyframes signalBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.signal-freq {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--neon-amber);
}

/* --- Footer / Sign-off --- */
#sign-off {
    background: var(--deep-void);
    padding: 3rem 0;
}

.sign-off-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4rem;
    text-align: center;
}

.sign-off-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--burnished-gold), transparent);
    opacity: 0.3;
    margin: 1.5rem 0;
}

.sign-off-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
}

.sign-off-logo {
    font-family: 'Poiret One', cursive;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--burnished-gold);
    opacity: 0.6;
}

.sign-off-text {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--broadcast-chrome);
    opacity: 0.5;
}

.sign-off-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--electric-teal);
    opacity: 0.6;
}

.sign-off-credits {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.sign-off-credits span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: var(--broadcast-chrome);
    opacity: 0.35;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .story-grid {
        grid-template-columns: 1fr;
    }

    .story-primary {
        grid-row: auto;
    }

    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-inner {
        flex-direction: column;
        align-items: center;
    }

    .about-ornament {
        width: 80px;
    }

    .about-ornament-right {
        order: initial;
    }

    .segment-inner {
        padding: 4rem 2rem;
    }

    .about-inner {
        padding: 4rem 2rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        gap: 1rem;
    }

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

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .about-signal {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .sign-off-credits {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .segment-inner {
        padding: 3rem 1.5rem;
    }

    .about-inner {
        padding: 3rem 1.5rem;
    }

    .about-ornament {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .nav-links a {
        font-size: 0.65rem;
    }

    .segment-inner {
        padding: 2rem 1rem;
    }

    .about-inner {
        padding: 2rem 1rem;
    }
}