/* ============================================
   WEBBY3 TABLOID ENGINE — STYLES v2
   Full-width, maximalist, variable-driven
   ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* --- THEME VARIABLES (overridden per-cover via inline style) --- */
:root {
    --accent: #cc0000;
    --secondary: #ffdd00;
    --tertiary: #ff0066;
    --text-primary: #ffffff;
    --text-dark: #0a0a0a;
    --bg: #0a0a0a;
    --masthead-bg: transparent;
    --masthead-color: #ffffff;
    --viewport-w: 1280px;
    --viewport-h: 720px;
    --viewport-short: 720px;
    --viewport-long: 1280px;
    --viewport-aspect: 1.778;
    --scale-display: 1;
    --scale-type: 1;
    --scale-ui: 1;
    --scale-density: 1;
    --stroke: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
              -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000;
    --stroke-heavy: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
                    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg);
    font-family: 'Arial Black', 'Impact', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    cursor: default;
    user-select: none;
}

/* --- VIEWPORT --- */
#viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

/* ===========================================
   COVER — BASE (FULL WIDTH, FULL HEIGHT)
   =========================================== */
.cover {
    cursor: pointer;
    --layout-display-scale: 1;
    --layout-headline-scale: 1;
    --layout-type-scale: 1;
    --layout-ui-scale: 1;
    --layout-story-scale: 1;
    --layout-burst-scale: 1;
    --space-0: clamp(2px, calc(var(--viewport-short) * 0.0035 * var(--scale-ui) * var(--scale-density) * var(--layout-ui-scale)), 5px);
    --space-1: clamp(4px, calc(var(--viewport-short) * 0.006 * var(--scale-ui) * var(--scale-density) * var(--layout-ui-scale)), 8px);
    --space-2: clamp(6px, calc(var(--viewport-short) * 0.009 * var(--scale-ui) * var(--scale-density) * var(--layout-ui-scale)), 12px);
    --space-3: clamp(8px, calc(var(--viewport-short) * 0.013 * var(--scale-ui) * var(--scale-density) * var(--layout-ui-scale)), 16px);
    --space-4: clamp(10px, calc(var(--viewport-short) * 0.018 * var(--scale-ui) * var(--scale-density) * var(--layout-ui-scale)), 22px);
    --space-5: clamp(12px, calc(var(--viewport-short) * 0.024 * var(--scale-ui) * var(--scale-density) * var(--layout-ui-scale)), 30px);
    --cover-pad: var(--space-4);
    --cover-gap: clamp(3px, calc(var(--viewport-short) * 0.0065 * var(--scale-ui) * var(--scale-density) * var(--layout-ui-scale)), 10px);
    --micro-size: clamp(7px, calc(var(--viewport-short) * 0.009 * var(--scale-type) * var(--layout-type-scale)), 11px);
    --page-size: clamp(7px, calc(var(--viewport-short) * 0.0105 * var(--scale-type) * var(--layout-type-scale)), 10px);
    --meta-size: clamp(8px, calc(var(--viewport-short) * 0.0115 * var(--scale-type) * var(--layout-type-scale)), 12px);
    --label-size: clamp(9px, calc(var(--viewport-short) * 0.015 * var(--scale-type) * var(--layout-type-scale)), 16px);
    --sub-size: clamp(calc(11px * var(--layout-type-scale) * var(--scale-type)), calc(var(--viewport-short) * 0.022 * var(--layout-type-scale) * var(--scale-type)), calc(18px * var(--layout-type-scale) * var(--scale-type)));
    --story-headline-size: clamp(calc(10px * var(--layout-story-scale) * var(--scale-type)), calc(var(--viewport-short) * 0.017 * var(--layout-story-scale) * var(--scale-type)), calc(15px * var(--layout-story-scale) * var(--scale-type)));
    --story-sub-size: clamp(8px, calc(var(--viewport-short) * 0.012 * var(--scale-type) * var(--layout-type-scale)), 11px);
    --banner-size: clamp(calc(9px * var(--scale-type) * var(--layout-ui-scale)), calc(var(--viewport-short) * 0.015 * var(--scale-type) * var(--layout-ui-scale)), calc(14px * var(--scale-type) * var(--layout-ui-scale)));
    --masthead-size: clamp(calc(36px * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-short) * 0.115 * var(--layout-display-scale) * var(--scale-display)), calc(100px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(28px * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-short) * 0.1 * var(--layout-headline-scale) * var(--scale-display)), calc(88px * var(--layout-headline-scale) * var(--scale-display)));
    --compact-thumb-size: clamp(52px, calc(var(--viewport-short) * 0.075 * var(--scale-ui) * var(--layout-story-scale)), 72px);
    --burst-size: clamp(60px, calc(var(--viewport-short) * 0.11 * var(--scale-ui) * var(--layout-burst-scale)), 110px);
    --quote-size: clamp(11px, calc(var(--viewport-short) * 0.022 * var(--scale-type) * var(--layout-type-scale)), 18px);
    --rule-thin: clamp(1px, calc(var(--viewport-short) * 0.0016), 2px);
    --rule-bold: clamp(2px, calc(var(--viewport-short) * 0.004 * var(--scale-ui)), 4px);
    --barcode-w: clamp(48px, calc(var(--viewport-short) * 0.076 * var(--scale-ui) * var(--layout-ui-scale)), 68px);
    --barcode-h: clamp(22px, calc(var(--viewport-short) * 0.036 * var(--scale-ui) * var(--layout-ui-scale)), 30px);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
    will-change: transform, opacity;
}

.cover.active { transform: translateX(0); opacity: 1; z-index: 10; }
.cover.exit-left { transform: translateX(-100%); opacity: 0; z-index: 5; }
.cover.exit-right { transform: translateX(100%); opacity: 0; z-index: 5; }
.cover.enter-left { transform: translateX(-100%); opacity: 0; z-index: 5; }
.cover.enter-right { transform: translateX(100%); opacity: 0; z-index: 5; }

/* --- HERO IMAGE --- */
.cover__hero {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.cover__hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: contrast(1.05) saturate(1.1);
}

/* --- GRADIENT OVERLAYS (composited for depth) --- */
.cover__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.cover__overlay--top {
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 18%, transparent 30%);
}
.cover__overlay--bottom {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 25%, transparent 45%);
}
.cover__overlay--left {
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, transparent 35%);
}
.cover__overlay--right {
    background: linear-gradient(to left, rgba(0,0,0,0.4) 0%, transparent 30%);
}
.cover__overlay--vignette {
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
}

/* --- CONTENT GRID --- */
.cover__content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    padding: var(--cover-pad);
    gap: var(--cover-gap);
    overflow: hidden;
}

/* ===========================================
   MASTHEAD
   =========================================== */
.masthead {
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.masthead__top-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--meta-size);
    letter-spacing: clamp(1px, calc(var(--viewport-short) * 0.0028 * var(--scale-type)), 3px);
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    font-family: Arial, sans-serif;
    font-weight: 400;
    padding: 0 var(--space-1);
}
.masthead__name {
    font-size: var(--masthead-size);
    font-weight: 900;
    color: var(--masthead-color);
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 0.85;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.5);
    text-shadow: var(--stroke-heavy), 3px 3px 0 rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.5);
    font-style: italic;
    padding: 0 var(--space-2);
}
.masthead__name--gradient {
    background: var(--masthead-bg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.6));
}
.masthead__tagline {
    font-size: clamp(8px, calc(var(--viewport-short) * 0.013 * var(--scale-type) * var(--layout-type-scale)), 12px);
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: clamp(2px, calc(var(--viewport-short) * 0.0045 * var(--scale-type)), 6px);
    font-weight: 700;
    margin-top: 1px;
}

/* ===========================================
   BANNERS / RIBBONS
   =========================================== */
.banner {
    display: inline-block;
    padding: var(--space-0) var(--space-3);
    font-size: var(--banner-size);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: clamp(1px, calc(var(--viewport-short) * 0.0024 * var(--scale-type)), 3px);
    color: var(--text-primary);
    background: var(--accent);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
.banner--yellow { background: var(--secondary); color: var(--text-dark); }
.banner--pink { background: var(--tertiary); color: var(--text-primary); }
.banner--accent { background: var(--accent); }
.banner--white { background: white; color: var(--text-dark); }
.banner--outline {
    background: transparent;
    border: 2px solid var(--secondary);
    color: var(--secondary);
}
.banner--small { font-size: var(--micro-size); padding: var(--space-0) var(--space-2); letter-spacing: 1px; }
.banner--full {
    width: 100%;
    text-align: center;
    padding: var(--space-1) 0;
}

/* ===========================================
   HEADLINES
   =========================================== */
.headline__kicker {
    font-size: var(--label-size);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: clamp(1px, calc(var(--viewport-short) * 0.003 * var(--scale-type)), 2px);
    color: var(--secondary);
    margin-bottom: var(--space-0);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.headline__main {
    font-size: var(--headline-size);
    font-weight: 900;
    color: var(--text-primary);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -1px;
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-text-stroke: 2px #000;
    text-shadow:
        3px 3px 0 rgba(0,0,0,0.95),
        6px 6px 0 rgba(0,0,0,0.25),
        0 0 15px rgba(0,0,0,0.5);
    paint-order: stroke fill;
}
.headline__main em {
    font-style: normal;
    color: var(--secondary);
}
.headline__sub {
    font-size: var(--sub-size);
    color: rgba(255,255,255,0.95);
    font-weight: 700;
    margin-top: var(--space-1);
    line-height: 1.15;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9);
    font-family: Georgia, 'Times New Roman', serif;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.headline__page-ref {
    font-size: var(--meta-size);
    color: var(--secondary);
    font-weight: 900;
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===========================================
   SIDEBAR STORIES
   =========================================== */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, min(0.8vw, 1vh), 10px);
    z-index: 15;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.story {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    border-radius: var(--space-0);
    padding: var(--space-2);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-left: var(--rule-bold) solid var(--accent);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.story:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    border-left-color: var(--secondary);
}
.story__img-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: var(--space-1);
}
.story__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.story:hover .story__img { transform: scale(1.08); }

.story__banner {
    display: inline-block;
    font-size: var(--micro-size);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--space-0) var(--space-2);
    margin-bottom: var(--space-0);
    color: var(--text-primary);
    background: var(--tertiary);
}
.story__headline {
    font-size: var(--story-headline-size);
    font-weight: 900;
    color: var(--text-primary);
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.story__sub {
    font-size: var(--story-sub-size);
    color: rgba(255,255,255,0.75);
    margin-top: var(--space-0);
    line-height: 1.15;
    font-family: Arial, sans-serif;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.story__page {
    font-size: var(--page-size);
    color: var(--secondary);
    font-weight: 900;
    text-transform: uppercase;
    margin-top: var(--space-0);
    letter-spacing: 1px;
}

/* --- Compact story (inline image + text) --- */
.story--compact {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    border-left: 0;
    border-top: 2px solid var(--accent);
    padding: var(--space-1);
}
.story--compact .story__img-wrap {
    width: var(--compact-thumb-size);
    min-width: var(--compact-thumb-size);
    height: var(--compact-thumb-size);
    aspect-ratio: 1;
    margin-bottom: 0;
    border-radius: 50%;
}
.story--compact .story__headline { font-size: clamp(10px, calc(var(--viewport-short) * 0.015 * var(--scale-type) * var(--layout-story-scale)), 13px); }

/* ===========================================
   BURSTS (star-shaped callouts)
   =========================================== */
.burst {
    position: absolute;
    z-index: 18;
    width: var(--burst-size);
    height: var(--burst-size);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: burst-pulse 3s ease-in-out infinite;
}
.burst__bg { position: absolute; inset: 0; }
.burst__text {
    position: relative; z-index: 1;
    font-size: clamp(9px, calc(var(--viewport-short) * 0.014 * var(--scale-type) * var(--layout-burst-scale)), 12px);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--text-dark);
    padding: var(--space-4);
}

@keyframes burst-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.05) rotate(2deg); }
}

/* ===========================================
   PULL QUOTE
   =========================================== */
.pullquote {
    padding: var(--space-2);
    border-left: var(--rule-bold) solid var(--secondary);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 15;
}
.pullquote__text {
    font-size: var(--quote-size);
    font-weight: 900;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
.pullquote__text::before { content: '\201C'; color: var(--secondary); }
.pullquote__text::after { content: '\201D'; color: var(--secondary); }
.pullquote__attr {
    font-size: var(--micro-size);
    color: var(--secondary);
    margin-top: var(--space-0);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: normal;
}

/* ===========================================
   BOTTOM CHROME (barcode, price, url)
   =========================================== */
.chrome {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 15;
    gap: var(--space-2);
}
.chrome__barcode { width: var(--barcode-w); height: var(--barcode-h); opacity: 0.6; }
.chrome__barcode rect { fill: var(--text-primary); }
.chrome__price {
    font-size: var(--meta-size);
    color: rgba(255,255,255,0.6);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
.chrome__url {
    font-size: var(--page-size);
    color: rgba(255,255,255,0.4);
    letter-spacing: 2px;
    text-transform: lowercase;
    font-family: 'Courier New', monospace;
}
.chrome__issue {
    font-size: var(--page-size);
    color: rgba(255,255,255,0.5);
    font-family: 'Courier New', monospace;
}

/* ===========================================
   LAYOUT: POST (National Examiner style)
   Red masthead band, 3D white logo, massive
   yellow headlines with heavy outlines, red/gold.
   =========================================== */
.cover--post {
    --layout-display-scale: 1.02;
    --layout-headline-scale: 1.14;
    --layout-type-scale: 1.03;
    --layout-ui-scale: 1.02;
    --layout-story-scale: 1.05;
    --layout-burst-scale: 1.04;
    --masthead-size: clamp(calc(32px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.07 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.08 * var(--layout-display-scale) * var(--scale-display))), calc(90px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(32px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.09 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.1 * var(--layout-headline-scale) * var(--scale-display))), calc(110px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #fff;
}
.cover--post .cover__hero img { object-position: right center; }
.cover--post .cover__overlay--left { background: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 35%, transparent 55%); }
.cover--post .cover__overlay--bottom { background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 30%, transparent 50%); }
.cover--post .cover__content {
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
        "masthead masthead"
        "topbanner topbanner"
        "headline sidebar"
        "extra sidebar"
        "chrome chrome";
    overflow: hidden;
}
.cover--post .masthead {
    grid-area: masthead;
    background: #cc0000;
    margin: calc(-1 * var(--cover-pad));
    margin-bottom: 0;
    padding: var(--space-1) var(--cover-pad);
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 4px solid #ffd700;
}
.cover--post .masthead__name {
    font-style: italic;
    letter-spacing: -3px;
    color: #fff;
    -webkit-text-stroke: 2px rgba(0,0,0,0.3);
    text-shadow:
        3px 3px 0 rgba(0,0,0,0.5),
        5px 5px 0 rgba(0,0,0,0.15),
        var(--stroke-heavy);
    paint-order: stroke fill;
}
.cover--post .masthead__top-bar { color: #ffd700; font-weight: 700; }
.cover--post .zone--topbanner {
    grid-area: topbanner;
    display: flex;
    justify-content: center;
    padding: var(--space-0) 0;
}
.cover--post .zone--headline {
    grid-area: headline;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    min-height: 0;
}
.cover--post .zone--headline .headline__main {
    line-height: 0.88;
    letter-spacing: -2px;
    -webkit-text-stroke: 2.5px #000;
    text-shadow:
        3px 3px 0 rgba(0,0,0,0.95),
        6px 6px 0 rgba(0,0,0,0.2),
        0 0 20px rgba(0,0,0,0.5);
    paint-order: stroke fill;
}
.cover--post .zone--headline .headline__main em {
    color: #ffd700;
    -webkit-text-stroke: 2.5px #000;
}
.cover--post .zone--headline .headline__kicker {
    background: #ffd700;
    color: #cc0000;
    display: inline-block;
    padding: var(--space-0) var(--space-4);
    font-weight: 900;
    font-size: var(--label-size);
    text-shadow: none;
    letter-spacing: 1px;
    margin-bottom: var(--space-1);
    align-self: flex-start;
    transform: rotate(-2deg);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
.cover--post .zone--headline .headline__sub {
    font-size: clamp(11px, calc(var(--viewport-short) * 0.024 * var(--scale-type) * var(--layout-type-scale)), 20px);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.95);
    font-weight: 900;
    -webkit-line-clamp: 3;
}
.cover--post .zone--headline .headline__page-ref {
    color: #ffd700;
    font-size: var(--meta-size);
}
.cover--post .story {
    border-left: 4px solid #cc0000;
    background: rgba(0,0,0,0.85);
}
.cover--post .story:hover { border-left-color: #ffd700; }
.cover--post .story__banner {
    background: #cc0000;
    color: #fff;
    font-size: clamp(8px, min(0.9vw, 1.2vh), 11px);
    padding: 2px 8px;
    transform: rotate(-1deg);
    display: inline-block;
}
.cover--post .story__headline {
    font-size: clamp(11px, min(1.8vw, 2.2vh), 16px);
    text-shadow: 1px 1px 0 #000, 2px 2px 3px rgba(0,0,0,0.8);
}
.cover--post .story__sub { text-shadow: 1px 1px 3px rgba(0,0,0,0.9); }
.cover--post .story__page { color: #ffd700; }
.cover--post .zone--sidebar {
    grid-area: sidebar;
    overflow-y: auto;
    min-height: 0;
}
.cover--post .zone--extra {
    grid-area: extra;
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 15vh;
}
.cover--post .chrome { grid-area: chrome; }
.cover--post .pullquote {
    border-left: 4px solid #ffd700;
    background: rgba(0,0,0,0.85);
}
.cover--post .pullquote__text {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.95);
}
.cover--post .pullquote__text::before,
.cover--post .pullquote__text::after { color: #ffd700; }

/* ===========================================
   LAYOUT: INTOUCH (Star Magazine style)
   Bright yellow masthead, hot pink banners,
   massive white headlines with heavy black outlines,
   full-bleed hero, glamorous & punchy.
   =========================================== */
.cover--intouch {
    --layout-display-scale: 1.04;
    --layout-headline-scale: 1.06;
    --layout-type-scale: 1.03;
    --layout-ui-scale: 1.02;
    --layout-story-scale: 1.05;
    --layout-burst-scale: 1.03;
    --masthead-size: clamp(calc(42px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.11 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.12 * var(--layout-display-scale) * var(--scale-display))), calc(130px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(32px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.08 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.09 * var(--layout-headline-scale) * var(--scale-display))), calc(100px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #ffdd00;
}
.cover--intouch .cover__hero img { object-position: center 15%; filter: contrast(1.08) saturate(1.25) brightness(1.05); }
.cover--intouch .cover__overlay--top { background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 22%); }
.cover--intouch .cover__overlay--bottom { background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 30%, transparent 50%); }
.cover--intouch .cover__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-3);
    overflow: hidden;
    justify-content: flex-start;
}
.cover--intouch .masthead { align-items: center; flex-shrink: 0; }
.cover--intouch .masthead__name,
.cover--intouch .masthead__name--gradient {
    color: #ffdd00 !important;
    -webkit-text-fill-color: #ffdd00 !important;
    background: none !important;
    -webkit-background-clip: unset;
    background-clip: unset;
    filter: none;
    -webkit-text-stroke: 2px rgba(0,0,0,0.6);
    text-shadow:
        3px 3px 0 rgba(0,0,0,0.8),
        6px 6px 0 rgba(0,0,0,0.15),
        var(--stroke-heavy);
    font-style: normal;
    letter-spacing: -2px;
    paint-order: stroke fill;
}
.cover--intouch .masthead__tagline {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
    font-style: italic;
    font-size: clamp(8px, min(1.5vw, 2vh), 14px);
}
.cover--intouch .masthead__top-bar { text-shadow: 2px 2px 4px rgba(0,0,0,0.9); }

/* Callout grid — 2x2 cards in the flow between masthead and headline */
.cover--intouch .zone--callout-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(4px, min(0.8vw, 1vh), 10px);
    align-content: center;
    width: 100%;
    padding: clamp(4px, 1vh, 12px) clamp(4px, 1vw, 12px);
    min-height: 0;
    overflow: hidden;
}
.callout-card {
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    border-left: 4px solid #ff0080;
    padding: clamp(5px, min(1vw, 1.2vh), 12px);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}
.callout-card:hover { transform: scale(1.03); border-left-color: #ffdd00; }
.callout-card__banner {
    display: inline-block;
    background: #ff0080;
    color: #fff;
    font-size: clamp(7px, min(0.9vw, 1vh), 10px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px 6px;
    margin-bottom: 3px;
    transform: rotate(-2deg);
}
.callout-card__headline {
    font-size: clamp(10px, min(1.6vw, 1.8vh), 16px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 1px 1px 0 #000, 2px 2px 3px rgba(0,0,0,0.9);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.callout-card__sub {
    font-size: clamp(8px, min(1vw, 1.2vh), 12px);
    color: rgba(255,255,255,0.75);
    line-height: 1.15;
    margin-top: 2px;
    font-family: Arial, sans-serif;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.callout-card__page {
    font-size: clamp(7px, min(0.8vw, 1vh), 10px);
    color: #ffdd00;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 2px;
    letter-spacing: 1px;
}

.cover--intouch .zone--headline {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 3%;
    overflow: hidden;
    min-height: 0;
}
.cover--intouch .zone--headline .headline__main {
    text-align: center;
    line-height: 0.92;
    color: #fff;
    -webkit-text-stroke: 3px #000;
    text-shadow:
        3px 3px 0 rgba(0,0,0,0.95),
        6px 6px 0 rgba(0,0,0,0.2),
        0 0 20px rgba(0,0,0,0.4);
    paint-order: stroke fill;
}
.cover--intouch .zone--headline .headline__main em {
    color: #ffdd00;
    -webkit-text-stroke: 3px #000;
}
.cover--intouch .zone--headline .headline__kicker {
    text-align: center;
    font-size: clamp(11px, min(2vw, 2.5vh), 20px);
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.95);
}
.cover--intouch .zone--headline .headline__sub {
    text-align: center;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: #ff0080;
    color: #fff;
    padding: clamp(3px, 0.5vh, 7px) clamp(10px, 2vw, 24px);
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(10px, min(1.8vw, 2vh), 18px);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-top: clamp(3px, 0.4vh, 6px);
    line-height: 1.2;
    font-style: normal;
    transform: rotate(-1deg);
    box-shadow: 3px 3px 8px rgba(0,0,0,0.6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--intouch .zone--headline .headline__page-ref { text-align: center; color: #ffdd00; }
.cover--intouch .zone--bottom {
    width: 100%;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: clamp(4px, 0.6vh, 10px);
    overflow: hidden;
    max-height: 12vh;
}
.cover--intouch .chrome { width: 100%; flex-shrink: 0; }
.cover--intouch .banner--pink { background: #ff0080; font-weight: 900; }
.cover--intouch .banner--yellow { background: #ffdd00; color: #1a1a1a; font-weight: 900; }
.cover--intouch .callout {
    border-left: 4px solid #ff0080;
    background: rgba(0,0,0,0.88);
}
.cover--intouch .callout:hover { border-left-color: #ffdd00; }
.cover--intouch .callout__banner { background: #ff0080; color: #fff; transform: rotate(-2deg); display: inline-block; }
.cover--intouch .callout__headline {
    text-shadow: 1px 1px 0 #000, 2px 2px 3px rgba(0,0,0,0.9);
}
.cover--intouch .callout--inline { border-left: 4px solid #ff0080; background: rgba(0,0,0,0.85); }
.cover--intouch .pullquote {
    border-left: 4px solid #ff0080;
    background: rgba(0,0,0,0.85);
}
.cover--intouch .pullquote__text::before,
.cover--intouch .pullquote__text::after { color: #ff0080; }
.cover--intouch .headline__main em { color: #ffdd00; }
.cover--intouch .headline__kicker { color: #ffdd00; }
.cover--intouch .headline__page-ref { color: #ffdd00; }
.cover--intouch .callout__page { color: #ffdd00; }
.cover--intouch .chrome__price,
.cover--intouch .chrome__url,
.cover--intouch .chrome__issue { color: rgba(255,255,255,0.5); }

/* InTouch Callout boxes — float around edges */
.zone--callouts {
    position: absolute;
    inset: 0;
    z-index: 16;
    pointer-events: none;
}
.callout {
    position: absolute;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    padding: clamp(4px, min(0.6vw, 0.8vh), 8px);
    max-width: clamp(100px, min(18vw, 28vh), 180px);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    text-align: left;
    border-left: 3px solid var(--tertiary);
}
.callout:hover { transform: scale(1.06); border-left-color: var(--secondary); }
.callout__banner {
    display: inline-block;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px 6px;
    margin-bottom: 3px;
    color: var(--text-dark);
    background: var(--secondary);
}
.callout__headline {
    font-size: clamp(11px, 1.6vw, 16px);
    font-weight: 900;
    color: var(--text-primary);
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.callout__sub {
    font-size: clamp(9px, 1.2vw, 12px);
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
    line-height: 1.15;
    font-family: Arial, sans-serif;
    font-weight: 400;
}
.callout__page {
    font-size: 9px;
    color: var(--secondary);
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 3px;
    letter-spacing: 1px;
}

.callout--inline {
    position: static;
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    padding: 4px 8px;
    margin: 2px 0;
    border-left: 3px solid var(--tertiary);
    max-width: 100%;
}
.callout--inline .callout__headline {
    font-size: clamp(9px, 1.2vw, 12px);
}
.callout--inline .callout__page {
    margin-top: 0;
}

/* ===========================================
   LAYOUT: STAR → GLOBE STYLE
   Hero-based, dark navy masthead, massive
   yellow/white headlines with heavy outlines,
   side column with inset stories, tag boxes.
   =========================================== */
.cover--star {
    --layout-display-scale: 1.01;
    --layout-headline-scale: 1.03;
    --layout-type-scale: 1.02;
    --layout-ui-scale: 1.01;
    --layout-story-scale: 1.03;
    --layout-burst-scale: 1.04;
    --masthead-size: clamp(calc(36px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.08 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.09 * var(--layout-display-scale) * var(--scale-display))), calc(96px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(28px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.07 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.08 * var(--layout-headline-scale) * var(--scale-display))), calc(84px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #ffffff;
}
.cover--star .cover__hero { display: block; }
.cover--star .cover__hero img { object-position: center 20%; filter: contrast(1.1) saturate(1.15); }
.cover--star .cover__overlay--top { background: linear-gradient(to bottom, rgba(0,10,40,0.85) 0%, rgba(0,10,40,0.2) 18%, transparent 30%); }
.cover--star .cover__overlay--bottom { background: linear-gradient(to top, rgba(0,10,40,0.92) 0%, rgba(0,10,40,0.4) 30%, transparent 55%); }
.cover--star .cover__overlay--right { background: linear-gradient(to left, rgba(0,10,40,0.95) 0%, rgba(0,10,40,0.5) 22%, transparent 42%); }
.cover--star .cover__content {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
        "topbanner topbanner"
        "masthead masthead"
        "main sidebar"
        "bottombar bottombar"
        "chrome chrome";
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.cover--star .zone--topbanner {
    grid-area: topbanner;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-0) var(--space-3);
    border-bottom: 2px solid #ffdd00;
}
.cover--star .topbanner__text {
    color: #ffdd00;
    font-size: var(--label-size);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.cover--star .hazard-stripe {
    display: inline-block;
    width: clamp(24px, 4vw, 50px);
    height: clamp(10px, min(1.5vw, 2vh), 18px);
    background: repeating-linear-gradient(-45deg, #ffdd00, #ffdd00 4px, #0a0a0a 4px, #0a0a0a 8px);
    flex-shrink: 0;
}
.cover--star .masthead {
    grid-area: masthead;
    background: #0a1a3a;
    padding: clamp(4px, min(0.6vw, 0.8vh), 10px) clamp(8px, min(1.5vw, 2vh), 20px);
    flex-direction: row;
    align-items: center;
    gap: clamp(6px, 1.5vw, 16px);
    border-bottom: 2px solid rgba(255,255,255,0.08);
}
.cover--star .masthead__name {
    color: #fff;
    font-style: normal;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 8px;
    -webkit-text-stroke: 1px rgba(0,0,0,0.3);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5), var(--stroke-heavy);
    paint-order: stroke fill;
}
.cover--star .masthead__top-bar { color: rgba(255,255,255,0.5); font-size: clamp(8px, min(0.9vw, 1.1vh), 10px); }
.cover--star .zone--main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(10px, min(2vw, 2.5vh), 24px);
    padding-left: clamp(16px, min(3vw, 4vh), 36px);
    gap: clamp(3px, 0.5vh, 6px);
    overflow: visible;
    min-height: 0;
}
.cover--star .zone--headline { display: flex; flex-direction: column; }
.cover--star .zone--headline .headline__main {
    color: #ffdd00;
    -webkit-text-stroke: 3px #000;
    text-shadow:
        4px 4px 0 rgba(0,0,0,0.95),
        7px 7px 0 rgba(0,0,0,0.2),
        0 0 25px rgba(0,0,0,0.5);
    line-height: 0.92;
    letter-spacing: -1px;
    paint-order: stroke fill;
    padding-left: 4px;
}
.cover--star .zone--headline .headline__main em {
    color: #fff;
    -webkit-text-stroke: 3px #000;
}
.cover--star .zone--bullets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: clamp(3px, 0.5vh, 6px);
    overflow: hidden;
}
.cover--star .zone--sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(0,0,20,0.3);
    backdrop-filter: blur(3px);
    overflow: hidden;
    min-height: 0;
}
.cover--star .zone--bottombar {
    grid-area: bottombar;
    background: rgba(0,10,40,0.92);
    padding: clamp(3px, 0.5vh, 6px) clamp(8px, min(1.5vw, 2vh), 20px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
    overflow: hidden;
}
.cover--star .zone--bottombar .pullquote {
    border-left: 4px solid #ffdd00;
    background: transparent;
    backdrop-filter: none;
    padding: 3px 6px;
}
.cover--star .zone--bottombar .pullquote__text { font-size: clamp(9px, min(1.3vw, 1.6vh), 14px); }
.cover--star .zone--bottombar .pullquote__text::before,
.cover--star .zone--bottombar .pullquote__text::after { color: #ffdd00; }
.cover--star .zone--bottombar .pullquote__attr { color: #ffdd00; }
.cover--star .chrome {
    grid-area: chrome;
    padding: 3px clamp(8px, min(1.5vw, 2vh), 20px);
    background: rgba(0,10,40,0.95);
}
.cover--star .burst { z-index: 12; opacity: 0.9; }
.cover--star .chrome__price,
.cover--star .chrome__url,
.cover--star .chrome__issue { color: rgba(255,255,255,0.4); }

/* Tag boxes (stacked colored tags over hero) */
.tag-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    margin-bottom: 3px;
    padding-left: 4px;
}
.tag-box {
    display: inline-block;
    padding: clamp(2px, 0.3vh, 4px) clamp(6px, 1.2vw, 14px);
    font-size: clamp(9px, min(1.3vw, 1.5vh), 14px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transform: rotate(-1deg);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
.tag-box--red { background: #cc0000; }
.tag-box--purple { background: #8800aa; }
.tag-box--green { background: #00aa44; }

/* Bullet boxes (navy boxes with yellow dot bullets) */
.bullet-box {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 8px);
    background: #0a1a3a;
    padding: clamp(3px, 0.4vh, 5px) clamp(6px, 1vw, 12px);
    margin-bottom: 2px;
}
.bullet-box__dot {
    width: clamp(6px, min(1vw, 1.2vh), 10px);
    height: clamp(6px, min(1vw, 1.2vh), 10px);
    border-radius: 50%;
    background: #ffdd00;
    flex-shrink: 0;
}
.bullet-box__text {
    font-size: clamp(9px, min(1.2vw, 1.4vh), 13px);
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Side stories (vertical inset column for Globe layout) */
.side-story {
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid rgba(255,255,255,0.08);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.side-story__img {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.side-story__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.side-story__tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: clamp(1px, 0.3vh, 4px) clamp(4px, 0.8vw, 10px);
    font-size: clamp(7px, min(0.9vw, 1.1vh), 11px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transform: rotate(-2deg);
    transform-origin: top left;
}
.side-story__body {
    background: #0a0a0a;
    padding: clamp(3px, 0.4vh, 6px);
    flex-shrink: 0;
    overflow: hidden;
}
.side-story__headline {
    font-size: clamp(9px, min(1.2vw, 1.5vh), 13px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.side-story__headline em { color: #ffdd00; font-style: normal; }
.side-story__sub {
    font-size: clamp(7px, min(0.8vw, 1vh), 10px);
    color: rgba(255,255,255,0.7);
    margin-top: 1px;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===========================================
   LAYOUT: WWN (Weekly World News style)
   Black bg, neon green/yellow text, conspiracy
   vibes, full-width sensationalism, ticker tape.
   =========================================== */
.cover--wwn {
    --layout-display-scale: 1.08;
    --layout-headline-scale: 1.12;
    --layout-type-scale: 1.06;
    --layout-ui-scale: 1.05;
    --layout-story-scale: 1.08;
    --layout-burst-scale: 1.05;
    --masthead-size: clamp(calc(48px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.12 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.14 * var(--layout-display-scale) * var(--scale-display))), calc(140px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(36px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.095 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.11 * var(--layout-headline-scale) * var(--scale-display))), calc(120px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #00ff00;
}
.cover--wwn .cover__hero img { filter: grayscale(0.6) contrast(1.4) brightness(0.7); }
.cover--wwn .cover__overlay--top { background: linear-gradient(to bottom, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.5) 22%, transparent 38%); }
.cover--wwn .cover__overlay--bottom { background: linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.6) 35%, transparent 55%); }
.cover--wwn .cover__overlay--vignette { background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%); }
.cover--wwn .cover__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.cover--wwn .wwn-ticker {
    background: #00cc00;
    padding: var(--space-0) 0;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}
.cover--wwn .wwn-ticker__inner {
    display: inline-flex;
    gap: clamp(8px, calc(var(--viewport-short) * 0.022 * var(--scale-ui) * var(--layout-ui-scale)), 20px);
    animation: ticker-scroll 20s linear infinite;
}
.cover--wwn .wwn-ticker__item {
    font-size: clamp(9px, calc(var(--viewport-short) * 0.014 * var(--scale-type) * var(--layout-type-scale)), 13px);
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cover--wwn .wwn-ticker__sep { color: #000; font-size: var(--page-size); }
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.cover--wwn .masthead {
    background: #000;
    border-bottom: 4px solid #00ff00;
    padding: var(--space-1) var(--space-5);
    align-items: center;
    flex-shrink: 0;
}
.cover--wwn .masthead__name {
    color: #fff;
    font-style: normal;
    letter-spacing: 6px;
    -webkit-text-stroke: 2px #00ff00;
    text-shadow:
        0 0 10px rgba(0,255,0,0.6),
        0 0 30px rgba(0,255,0,0.3),
        3px 3px 0 rgba(0,0,0,0.9);
    paint-order: stroke fill;
}
.cover--wwn .masthead__tagline {
    color: #00ff00;
    font-size: clamp(8px, calc(var(--viewport-short) * 0.014 * var(--scale-type) * var(--layout-type-scale)), 13px);
    letter-spacing: clamp(2px, calc(var(--viewport-short) * 0.0055 * var(--scale-type)), 4px);
    font-weight: 700;
}
.cover--wwn .wwn-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-4);
    min-height: 0;
    overflow: hidden;
}
.cover--wwn .wwn-main__kicker {
    color: #00ff00;
    font-size: clamp(12px, calc(var(--viewport-short) * 0.026 * var(--scale-type) * var(--layout-type-scale)), 24px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(0,255,0,0.5), 2px 2px 0 #000;
    margin-bottom: var(--space-1);
}
.cover--wwn .wwn-main__headline {
    font-size: var(--headline-size);
    font-weight: 900;
    color: #ffff00;
    text-transform: uppercase;
    line-height: 0.86;
    -webkit-text-stroke: 3px #000;
    text-shadow:
        4px 4px 0 rgba(0,0,0,0.95),
        7px 7px 0 rgba(0,0,0,0.3),
        0 0 30px rgba(255,255,0,0.5),
        0 0 60px rgba(0,255,0,0.2);
    paint-order: stroke fill;
    letter-spacing: -2px;
}
.cover--wwn .wwn-main__headline em { color: #00ff00; }
.cover--wwn .wwn-main__sub {
    color: #fff;
    font-size: clamp(11px, calc(var(--viewport-short) * 0.022 * var(--scale-type) * var(--layout-type-scale)), 18px);
    font-weight: 700;
    margin-top: var(--space-1);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.95);
    max-width: 85%;
    line-height: 1.2;
    font-family: Georgia, serif;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--wwn .wwn-stories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-0);
    padding: 0 var(--space-1);
    flex-shrink: 0;
    overflow: hidden;
}
.wwn-story {
    display: flex;
    gap: var(--space-1);
    background: rgba(0,0,0,0.9);
    border: 1px solid rgba(0,255,0,0.2);
    padding: var(--space-1);
    overflow: hidden;
}
.wwn-story__img {
    width: clamp(44px, min(calc(var(--viewport-w) * 0.07 * var(--scale-ui) * var(--layout-story-scale)), calc(var(--viewport-h) * 0.09 * var(--scale-ui) * var(--layout-story-scale))), 75px);
    height: clamp(44px, min(calc(var(--viewport-w) * 0.07 * var(--scale-ui) * var(--layout-story-scale)), calc(var(--viewport-h) * 0.09 * var(--scale-ui) * var(--layout-story-scale))), 75px);
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid #00ff00;
    box-shadow: 0 0 8px rgba(0,255,0,0.3);
}
.wwn-story__img img { width: 100%; height: 100%; object-fit: cover; }
.wwn-story__body { min-width: 0; }
.wwn-story__tag {
    display: inline-block;
    background: #00cc00;
    color: #000;
    font-size: clamp(6px, min(0.7vw, 0.9vh), 9px);
    font-weight: 900;
    text-transform: uppercase;
    padding: 1px 4px;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.wwn-story__headline {
    font-size: clamp(10px, min(1.4vw, 1.7vh), 15px);
    font-weight: 900;
    color: #ffff00;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 2px 2px 4px #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wwn-story__sub {
    font-size: clamp(7px, min(0.9vw, 1vh), 10px);
    color: rgba(255,255,255,0.6);
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--wwn .wwn-bottom {
    padding: clamp(3px, 0.5vh, 6px) clamp(8px, 1.5vw, 16px);
    flex-shrink: 0;
    background: rgba(0,0,0,0.9);
    border-top: 2px solid #00ff00;
}
.cover--wwn .pullquote { border-left-color: #00ff00; background: transparent; }
.cover--wwn .pullquote__text { color: #00ff00; font-size: clamp(10px, min(1.4vw, 1.6vh), 15px); }
.cover--wwn .pullquote__text::before,
.cover--wwn .pullquote__text::after { color: #ffff00; }
.cover--wwn .pullquote__attr { color: #ffff00; }
.cover--wwn .chrome { background: #000; padding: 3px clamp(8px, 1.5vw, 16px); }
.cover--wwn .chrome__price,
.cover--wwn .chrome__url,
.cover--wwn .chrome__issue { color: rgba(0,255,0,0.4); }

/* ===========================================
   LAYOUT: US (Us Weekly style)
   Clean white masthead with red logo, photo grid
   sidebar, bold red/white/black palette, modern
   celebrity weekly look.
   =========================================== */
.cover--us {
    --layout-display-scale: 1.04;
    --layout-headline-scale: 1.08;
    --layout-type-scale: 1.04;
    --layout-ui-scale: 1.03;
    --layout-story-scale: 1.05;
    --layout-burst-scale: 1.03;
    --masthead-size: clamp(calc(46px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.11 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.13 * var(--layout-display-scale) * var(--scale-display))), calc(130px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(32px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.085 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.1 * var(--layout-headline-scale) * var(--scale-display))), calc(105px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #e60000;
}
.cover--us .cover__hero img { filter: contrast(1.05) saturate(1.2) brightness(1.05); }
.cover--us .cover__overlay--top { background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.3) 14%, transparent 24%); }
.cover--us .cover__overlay--bottom { background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 28%, transparent 48%); }
.cover--us .cover__overlay--right { background: linear-gradient(to left, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 22%, transparent 42%); }
.cover--us .cover__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.cover--us .masthead {
    background: rgba(255,255,255,0.92);
    padding: var(--space-0) var(--space-5);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 4px solid #e60000;
}
.cover--us .masthead__name {
    color: #e60000;
    font-style: italic;
    -webkit-text-stroke: 0;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    letter-spacing: -3px;
}
.cover--us .masthead__tagline {
    color: #e60000;
    font-size: var(--meta-size);
    letter-spacing: 2px;
    font-weight: 900;
}
.cover--us .masthead__top-bar {
    color: #333;
    font-size: var(--page-size);
}
.cover--us .us-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    min-height: 0;
    overflow: hidden;
}
.cover--us .us-hero-zone {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-5);
    padding-left: clamp(12px, calc(var(--viewport-short) * 0.03 * var(--scale-ui) * var(--layout-ui-scale)), 28px);
    gap: var(--space-0);
    overflow: visible;
}
.cover--us .us-hero__banner {
    display: inline-block;
    align-self: flex-start;
    background: #e60000;
    color: #fff;
    font-size: var(--label-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-3);
    letter-spacing: 2px;
    transform: rotate(-2deg);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
.cover--us .us-hero__kicker {
    color: #fff;
    font-size: clamp(11px, calc(var(--viewport-short) * 0.022 * var(--scale-type) * var(--layout-type-scale)), 20px);
    font-weight: 700;
    font-family: Georgia, serif;
    font-style: italic;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}
.cover--us .us-hero__headline {
    font-size: var(--headline-size);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.88;
    -webkit-text-stroke: 2.5px #000;
    text-shadow:
        3px 3px 0 rgba(0,0,0,0.95),
        6px 6px 0 rgba(0,0,0,0.25),
        0 0 20px rgba(0,0,0,0.6);
    paint-order: stroke fill;
    letter-spacing: -1px;
}
.cover--us .us-hero__headline em { color: #ff3366; }
.cover--us .us-hero__sub {
    color: rgba(255,255,255,0.95);
    font-size: var(--sub-size);
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.95);
    font-family: Georgia, serif;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--us .us-hero__page {
    color: #ff3366;
    font-size: var(--meta-size);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cover--us .us-sidebar {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    overflow-y: auto;
    min-height: 0;
}
.cover--us .us-photo-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
}
.us-photo {
    position: relative;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}
.us-photo__img { width: 100%; height: 100%; }
.us-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-photo__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    padding: var(--space-1) var(--space-1);
    display: flex;
    gap: var(--space-0);
    align-items: center;
}
.us-photo__tag {
    background: #e60000;
    color: #fff;
    font-size: var(--micro-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-2);
    letter-spacing: 1px;
    flex-shrink: 0;
}
.us-photo__text {
    font-size: clamp(9px, calc(var(--viewport-short) * 0.015 * var(--scale-type) * var(--layout-story-scale)), 14px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--us .us-blurbs {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}
.us-blurb {
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.85);
}
.us-blurb__headline {
    font-size: clamp(8px, calc(var(--viewport-short) * 0.013 * var(--scale-type) * var(--layout-story-scale)), 12px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.us-blurb__page {
    font-size: var(--page-size);
    color: #ff3366;
    font-weight: 700;
}
.cover--us .us-bottom {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-1) var(--space-4);
    background: rgba(0,0,0,0.85);
    flex-shrink: 0;
    overflow: hidden;
}
.cover--us .pullquote { border-left-color: #e60000; background: transparent; }
.cover--us .pullquote__text::before,
.cover--us .pullquote__text::after { color: #e60000; }
.cover--us .chrome { background: rgba(255,255,255,0.9); padding: var(--space-0) var(--space-4); }
.cover--us .chrome__price,
.cover--us .chrome__url,
.cover--us .chrome__issue { color: #999; }

/* ===========================================
   LAYOUT: OK (OK! Magazine style)
   Bright pink/purple, circular inset photos,
   stacked story cards, celebrity gossip feel,
   bold playful typography.
   =========================================== */
.cover--ok {
    --layout-display-scale: 1.08;
    --layout-headline-scale: 1.1;
    --layout-type-scale: 1.05;
    --layout-ui-scale: 1.05;
    --layout-story-scale: 1.04;
    --layout-burst-scale: 1.05;
    --masthead-size: clamp(calc(52px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.13 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.15 * var(--layout-display-scale) * var(--scale-display))), calc(150px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(34px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.09 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.1 * var(--layout-headline-scale) * var(--scale-display))), calc(110px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #ff66cc;
}
.cover--ok .cover__hero img { filter: contrast(1.05) saturate(1.3) brightness(1.1); }
.cover--ok .cover__overlay--top { background: linear-gradient(to bottom, rgba(150,0,200,0.85) 0%, rgba(150,0,200,0.25) 16%, transparent 28%); }
.cover--ok .cover__overlay--bottom { background: linear-gradient(to top, rgba(80,0,120,0.95) 0%, rgba(80,0,120,0.5) 32%, transparent 52%); }
.cover--ok .cover__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-1);
    overflow: hidden;
}
.cover--ok .masthead {
    align-items: center;
    flex-shrink: 0;
    width: 100%;
}
.cover--ok .masthead__name {
    color: #ff66cc;
    -webkit-text-stroke: 3px #fff;
    text-shadow:
        0 0 15px rgba(255,102,204,0.5),
        4px 4px 0 rgba(0,0,0,0.4),
        0 0 40px rgba(255,0,200,0.3);
    font-style: normal;
    letter-spacing: 4px;
    paint-order: stroke fill;
}
.cover--ok .masthead__top-bar {
    color: rgba(255,255,255,0.7);
    font-size: var(--page-size);
}
.cover--ok .ok-circles {
    display: flex;
    justify-content: center;
    gap: clamp(6px, calc(var(--viewport-short) * 0.02 * var(--scale-ui) * var(--layout-ui-scale)), 16px);
    flex-shrink: 0;
    margin: var(--space-1) 0;
    padding: 0 var(--space-1);
    overflow: hidden;
}
.ok-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: clamp(80px, min(16vw, 18vh), 140px);
}
.ok-circle__img {
    width: clamp(64px, min(13vw, 15vh), 110px);
    height: clamp(64px, min(13vw, 15vh), 110px);
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ff66cc;
    box-shadow: 0 0 20px rgba(255,102,204,0.5), 0 0 40px rgba(255,0,200,0.2), 4px 4px 12px rgba(0,0,0,0.6);
    flex-shrink: 0;
}
.ok-circle__img img { width: 100%; height: 100%; object-fit: cover; }
.ok-circle__label {
    font-size: clamp(8px, calc(var(--viewport-short) * 0.014 * var(--scale-type) * var(--layout-type-scale)), 13px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
    line-height: 1.05;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--ok .ok-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 5%;
    min-height: 0;
    overflow: hidden;
}
.cover--ok .ok-main__banner {
    display: inline-block;
    background: #cc00cc;
    color: #fff;
    font-size: var(--label-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-4);
    letter-spacing: 2px;
    transform: rotate(-2deg);
    box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
    margin-bottom: var(--space-1);
}
.cover--ok .ok-main__headline {
    font-size: var(--headline-size);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.88;
    -webkit-text-stroke: 3px #000;
    text-shadow:
        4px 4px 0 rgba(0,0,0,0.95),
        7px 7px 0 rgba(100,0,150,0.5),
        0 0 25px rgba(255,102,204,0.4);
    paint-order: stroke fill;
    text-align: center;
    letter-spacing: -1px;
}
.cover--ok .ok-main__headline em { color: #ff66cc; }
.cover--ok .ok-main__sub {
    color: #fff;
    font-size: var(--sub-size);
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.95);
    font-family: Georgia, serif;
    max-width: 90%;
    margin-top: var(--space-1);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--ok .ok-cards {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    flex-shrink: 0;
    overflow: hidden;
}
.ok-card {
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    border-left: 3px solid #ff66cc;
    padding: var(--space-1) var(--space-3);
    text-align: left;
    display: flex;
    gap: var(--space-1);
    align-items: center;
    max-width: 48%;
    overflow: hidden;
}
.ok-card__tag {
    background: #cc00cc;
    color: #fff;
    font-size: var(--micro-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-2);
    letter-spacing: 1px;
    flex-shrink: 0;
    white-space: nowrap;
}
.ok-card__headline {
    font-size: clamp(9px, calc(var(--viewport-short) * 0.015 * var(--scale-type) * var(--layout-story-scale)), 14px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ok-card__page {
    font-size: var(--page-size);
    color: #ff66cc;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}
.cover--ok .ok-bottom {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: var(--space-0) var(--space-2);
    flex-shrink: 0;
    overflow: hidden;
}
.ok-extra {
    display: inline-block;
    background: rgba(204,0,204,0.7);
    color: #fff;
    font-size: var(--micro-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-2);
    letter-spacing: 1px;
    border-radius: 2px;
}
.cover--ok .pullquote { border-left-color: #ff66cc; background: rgba(0,0,0,0.6); }
.cover--ok .pullquote__text::before,
.cover--ok .pullquote__text::after { color: #ff66cc; }
.cover--ok .chrome { width: 100%; }
.cover--ok .chrome__price,
.cover--ok .chrome__url,
.cover--ok .chrome__issue { color: rgba(255,255,255,0.4); }

/* ===========================================
   LAYOUT: GLOBE (supermarket conspiracy tabloid)
   Screaming red/yellow, diagonal slash banners,
   "SHOCKING!" callouts, maximum trash energy.
   =========================================== */
.cover--globe {
    --layout-display-scale: 1.08;
    --layout-headline-scale: 1.1;
    --layout-type-scale: 1.05;
    --layout-ui-scale: 1.05;
    --layout-story-scale: 1.05;
    --layout-burst-scale: 1.05;
    --masthead-size: clamp(calc(50px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.12 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.14 * var(--layout-display-scale) * var(--scale-display))), calc(140px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(34px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.095 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.11 * var(--layout-headline-scale) * var(--scale-display))), calc(115px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #ffdd00;
}
.cover--globe .cover__hero img { filter: contrast(1.3) saturate(1.5) brightness(0.95); }
.cover--globe .cover__overlay--top { background: linear-gradient(to bottom, rgba(180,0,0,0.95) 0%, rgba(180,0,0,0.3) 16%, transparent 28%); }
.cover--globe .cover__overlay--bottom { background: linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.55) 32%, transparent 52%); }
.cover--globe .cover__overlay--left { background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 18%); }
.cover--globe .cover__overlay--right { background: linear-gradient(to left, rgba(0,0,0,0.85) 0%, transparent 28%); }
.cover--globe .cover__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.cover--globe .globe-top-stripe {
    height: clamp(4px, calc(var(--viewport-short) * 0.008 * var(--scale-ui)), 8px);
    background: repeating-linear-gradient(90deg, #ff0000 0, #ff0000 10px, #ffdd00 10px, #ffdd00 20px);
    flex-shrink: 0;
}
.cover--globe .masthead {
    background: #cc0000;
    padding: var(--space-0) var(--space-5);
    border-bottom: 4px solid #ffdd00;
    flex-shrink: 0;
    text-align: center;
}
.cover--globe .masthead__name {
    color: #ffdd00;
    -webkit-text-stroke: 2px #000;
    text-shadow:
        3px 3px 0 rgba(0,0,0,0.9),
        0 0 20px rgba(255,221,0,0.3);
    font-style: italic;
    letter-spacing: 6px;
    paint-order: stroke fill;
}
.cover--globe .masthead__tagline {
    color: #fff;
    font-size: var(--meta-size);
    letter-spacing: clamp(2px, calc(var(--viewport-short) * 0.004 * var(--scale-type)), 3px);
    font-weight: 900;
    text-transform: uppercase;
}
.cover--globe .globe-slashes {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    overflow: hidden;
}
.globe-slash {
    padding: var(--space-1) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: visible;
}
.globe-slash--left {
    background: linear-gradient(105deg, #ffdd00 0%, #ffdd00 65%, transparent 65.5%);
    padding-right: 25%;
}
.globe-slash--right {
    background: linear-gradient(-105deg, #ff0000 0%, #ff0000 65%, transparent 65.5%);
    padding-left: 25%;
    justify-content: flex-end;
}
.globe-slash__tag {
    background: #000;
    color: #ffdd00;
    font-size: clamp(8px, calc(var(--viewport-short) * 0.013 * var(--scale-type) * var(--layout-type-scale)), 12px);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-2);
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}
.globe-slash__text {
    font-size: clamp(11px, calc(var(--viewport-short) * 0.02 * var(--scale-type) * var(--layout-story-scale)), 18px);
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    line-height: 1.05;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.globe-slash--right .globe-slash__text { color: #fff; }
.cover--globe .globe-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-4);
    min-height: 0;
    overflow: hidden;
}
.cover--globe .globe-main__shout {
    display: inline-block;
    background: #ffdd00;
    color: #cc0000;
    font-size: clamp(12px, calc(var(--viewport-short) * 0.024 * var(--scale-type) * var(--layout-type-scale)), 22px);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-4);
    letter-spacing: 3px;
    transform: rotate(-3deg);
    box-shadow: 3px 3px 0 #000;
    margin-bottom: var(--space-1);
    border: 3px solid #000;
}
.cover--globe .globe-main__headline {
    font-size: var(--headline-size);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.86;
    -webkit-text-stroke: 3px #000;
    text-shadow:
        4px 4px 0 rgba(204,0,0,0.95),
        8px 8px 0 rgba(0,0,0,0.4),
        0 0 30px rgba(255,221,0,0.3);
    paint-order: stroke fill;
    letter-spacing: -2px;
}
.cover--globe .globe-main__headline em { color: #ffdd00; }
.cover--globe .globe-main__sub {
    color: #ffdd00;
    font-size: var(--sub-size);
    font-weight: 900;
    text-transform: uppercase;
    margin-top: var(--space-1);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.95);
    max-width: 90%;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--globe .globe-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    background: rgba(0,0,0,0.85);
    border-top: 3px solid #ffdd00;
    overflow: hidden;
}
.globe-side {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid rgba(255,221,0,0.15);
    overflow: hidden;
}
.globe-side__img {
    width: clamp(42px, min(6vw, 8vh), 68px);
    height: clamp(42px, min(6vw, 8vh), 68px);
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid #cc0000;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
.globe-side__img img { width: 100%; height: 100%; object-fit: cover; }
.globe-side__body { min-width: 0; }
.globe-side__tag {
    display: inline-block;
    background: #cc0000;
    color: #ffdd00;
    font-size: var(--micro-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-1);
    letter-spacing: 1px;
}
.globe-side__headline {
    font-size: clamp(10px, calc(var(--viewport-short) * 0.016 * var(--scale-type) * var(--layout-story-scale)), 15px);
    font-weight: 900;
    color: #ffdd00;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 2px 2px 4px #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--globe .globe-bottom {
    padding: var(--space-0) var(--space-2);
    flex-shrink: 0;
    background: #cc0000;
    overflow: hidden;
}
.globe-bottom__ticker {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-0);
}
.globe-blip {
    font-size: var(--micro-size);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
}
.globe-blip__sep { color: #ffdd00; font-size: var(--page-size); }
.cover--globe .pullquote { border-left-color: #ffdd00; background: rgba(0,0,0,0.4); }
.cover--globe .pullquote__text { color: #fff; }
.cover--globe .pullquote__text::before,
.cover--globe .pullquote__text::after { color: #ffdd00; }
.cover--globe .pullquote__attr { color: #ffdd00; }
.cover--globe .chrome { background: #000; padding: var(--space-0) var(--space-2); }
.cover--globe .chrome__price,
.cover--globe .chrome__url,
.cover--globe .chrome__issue { color: rgba(255,221,0,0.4); }

/* ===========================================
   LAYOUT: VOGUE (high-fashion editorial)
   Minimalist, elegant serif typography, lots of
   breathing room, sophisticated muted palette,
   editorial grace.
   =========================================== */
.cover--vogue {
    --layout-display-scale: 1.08;
    --layout-headline-scale: 1.02;
    --layout-type-scale: 1.04;
    --layout-ui-scale: 1;
    --layout-story-scale: 1.02;
    --layout-burst-scale: 0.95;
    --masthead-size: clamp(calc(64px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.16 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.18 * var(--layout-display-scale) * var(--scale-display))), calc(200px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(32px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.08 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.09 * var(--layout-headline-scale) * var(--scale-display))), calc(100px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #fff;
}
.cover--vogue .cover__hero img { filter: contrast(0.95) saturate(0.7) brightness(1.05); }
.cover--vogue .cover__overlay--top { background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 18%); }
.cover--vogue .cover__overlay--bottom { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 28%, transparent 48%); }
.cover--vogue .cover__overlay--vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.25) 100%); }
.cover--vogue .cover__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.cover--vogue .masthead {
    padding: clamp(24px, calc(var(--viewport-short) * 0.05 * var(--scale-ui) * var(--layout-ui-scale)), 44px) clamp(12px, calc(var(--viewport-short) * 0.035 * var(--scale-ui) * var(--layout-ui-scale)), 30px) var(--space-1);
    text-align: center;
    flex-shrink: 0;
}
.cover--vogue .masthead__name {
    font-size: var(--masthead-size);
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: clamp(10px, 2.5vw, 35px);
    -webkit-text-stroke: 1px rgba(255,255,255,0.4);
    text-shadow:
        0 2px 20px rgba(0,0,0,0.5),
        0 0 60px rgba(255,255,255,0.1);
    text-transform: uppercase;
}
.cover--vogue .masthead__top-bar {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.6);
    font-size: var(--meta-size);
    font-family: Georgia, serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: var(--space-0);
}
.cover--vogue .vogue-left-rail {
    position: absolute;
    left: clamp(6px, calc(var(--viewport-short) * 0.018 * var(--scale-ui) * var(--layout-ui-scale)), 14px);
    top: 42%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 5;
    max-width: 15%;
}
.vogue-side-label {
    font-size: clamp(9px, calc(var(--viewport-short) * 0.014 * var(--scale-type) * var(--layout-type-scale)), 14px);
    font-weight: 400;
    color: rgba(255,255,255,0.9);
    font-family: Georgia, serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.15;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.3);
    border-left: 2px solid rgba(255,255,255,0.4);
    padding-left: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--vogue .vogue-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 clamp(14px, calc(var(--viewport-short) * 0.05 * var(--scale-ui) * var(--layout-ui-scale)), 36px);
    padding-top: clamp(8px, calc(var(--viewport-short) * 0.02 * var(--scale-ui)), 24px);
    padding-bottom: var(--space-4);
    min-height: 0;
    overflow: hidden;
}
.cover--vogue .vogue-hero__kicker {
    color: rgba(255,255,255,0.7);
    font-size: var(--label-size);
    font-family: Georgia, serif;
    font-style: italic;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    margin-bottom: var(--space-0);
}
.cover--vogue .vogue-hero__headline {
    font-size: var(--headline-size);
    font-weight: 400;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: clamp(3px, 0.7vw, 8px);
    text-shadow:
        0 2px 15px rgba(0,0,0,0.6),
        0 4px 30px rgba(0,0,0,0.3);
}
.cover--vogue .vogue-hero__headline em {
    font-style: italic;
    color: rgba(255,255,255,0.95);
}
.cover--vogue .vogue-hero__sub {
    color: rgba(255,255,255,0.8);
    font-size: var(--sub-size);
    font-weight: 400;
    line-height: 1.3;
    font-family: Georgia, serif;
    font-style: italic;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    max-width: 75%;
    margin-top: var(--space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--vogue .vogue-features {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    overflow: hidden;
}
.vogue-feature {
    flex: 1;
    padding: var(--space-1) var(--space-2);
    border-right: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    overflow: hidden;
}
.vogue-feature:last-child { border-right: none; }
.vogue-feature__text {
    font-size: clamp(9px, calc(var(--viewport-short) * 0.014 * var(--scale-type) * var(--layout-type-scale)), 14px);
    font-weight: 400;
    color: rgba(255,255,255,0.9);
    font-family: Georgia, serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vogue-feature__page {
    display: block;
    font-size: var(--page-size);
    color: rgba(255,255,255,0.4);
    font-family: Georgia, serif;
    letter-spacing: 2px;
    margin-top: var(--space-0);
}
.cover--vogue .vogue-bottom {
    padding: var(--space-1) var(--space-4);
    flex-shrink: 0;
}
.cover--vogue .pullquote {
    border-left-color: rgba(255,255,255,0.3);
    background: transparent;
}
.cover--vogue .pullquote__text {
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
}
.cover--vogue .pullquote__text::before,
.cover--vogue .pullquote__text::after { color: rgba(255,255,255,0.3); }
.cover--vogue .pullquote__attr { color: rgba(255,255,255,0.4); font-family: Georgia, serif; }
.cover--vogue .chrome { background: transparent; }
.cover--vogue .chrome__price,
.cover--vogue .chrome__url,
.cover--vogue .chrome__issue { color: rgba(255,255,255,0.25); font-family: Georgia, serif; }
.cover--vogue .burst { display: none; }

/* ===========================================
   LAYOUT: BYTE (Examiner-style supermarket tabloid)
   Busy teaser strip, red masthead band, giant
   yellow scream headline, inset photo gossip box.
   =========================================== */
.cover--byte {
    --layout-display-scale: 1.04;
    --layout-headline-scale: 1.18;
    --layout-type-scale: 1.08;
    --layout-ui-scale: 1.07;
    --layout-story-scale: 1.08;
    --layout-burst-scale: 1.08;
    --masthead-size: clamp(calc(38px * var(--layout-display-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.095 * var(--layout-display-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.105 * var(--layout-display-scale) * var(--scale-display))), calc(96px * var(--layout-display-scale) * var(--scale-display)));
    --headline-size: clamp(calc(28px * var(--layout-headline-scale) * var(--scale-display)), min(calc(var(--viewport-w) * 0.07 * var(--layout-headline-scale) * var(--scale-display)), calc(var(--viewport-h) * 0.08 * var(--layout-headline-scale) * var(--scale-display))), calc(80px * var(--layout-headline-scale) * var(--scale-display)));
    --masthead-color: #ffffff;
}
.cover--byte .cover__hero img { object-position: center 14%; filter: contrast(1.08) saturate(0.92) brightness(1.06); }
.cover--byte .cover__overlay--top { background: linear-gradient(to bottom, rgba(255,247,208,0.88) 0%, rgba(255,247,208,0.2) 16%, transparent 28%); }
.cover--byte .cover__overlay--bottom { background: linear-gradient(to top, rgba(169,22,16,0.94) 0%, rgba(169,22,16,0.5) 26%, transparent 50%); }
.cover--byte .cover__overlay--vignette { background: radial-gradient(ellipse at center, transparent 44%, rgba(90,0,0,0.25) 100%); }
.cover--byte .cover__content {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto auto;
    padding: 0;
    gap: 0;
    overflow: hidden;
    font-family: Arial, 'Helvetica Neue', sans-serif;
}
.cover--byte .byte-promo {
    background: linear-gradient(90deg, #edf3ff 0%, #d5f2d6 60%, #edf3ff 100%);
    padding: var(--space-0) var(--space-2);
    display: flex;
    gap: var(--space-1);
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 2px solid #d0aa3c;
}
.byte-promo__lead {
    color: #244f9b;
    font-size: clamp(9px, calc(var(--viewport-short) * 0.013 * var(--scale-type)), 14px);
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    font-style: italic;
}
.byte-promo__text {
    flex: 1;
    color: #3a9e79;
    font-size: clamp(9px, calc(var(--viewport-short) * 0.012 * var(--scale-type)), 13px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.byte-promo__quiz {
    background: #294b84;
    color: #fff;
    font-size: clamp(8px, calc(var(--viewport-short) * 0.011 * var(--scale-type)), 11px);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-1);
    line-height: 1;
    white-space: nowrap;
}
.cover--byte .byte-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff6cc;
    border-bottom: 3px solid #d5a428;
    min-height: clamp(72px, 16vh, 138px);
    max-height: 20vh;
    overflow: hidden;
}
.byte-teaser {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    min-width: 0;
    overflow: hidden;
    border-right: 2px solid rgba(140,84,14,0.25);
}
.byte-teaser:last-child { border-right: 0; }
.byte-teaser__img {
    aspect-ratio: 1;
    overflow: hidden;
}
.byte-teaser__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.byte-teaser__body {
    padding: var(--space-1) var(--space-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-0);
    min-width: 0;
}
.byte-teaser--left .byte-teaser__body {
    background: rgba(255,244,198,0.96);
}
.byte-teaser--right .byte-teaser__body {
    background: rgba(15,34,78,0.92);
}
.byte-teaser__tag {
    display: inline-block;
    align-self: flex-start;
    background: #d1291e;
    color: #fff0a6;
    font-size: var(--micro-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-1);
}
.byte-teaser__headline {
    font-size: clamp(10px, calc(var(--viewport-short) * 0.017 * var(--scale-type) * var(--layout-story-scale)), 18px);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.96;
    color: #181818;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.byte-teaser--right .byte-teaser__headline {
    color: #fff16a;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
}
.cover--byte .byte-masthead {
    background: linear-gradient(to bottom, #dc3326 0%, #b51510 100%);
    padding: var(--space-1) var(--space-3) var(--space-0);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-shrink: 0;
    border-top: 4px solid #fff3a8;
    border-bottom: 4px solid #fff3a8;
}
.byte-masthead__brand {
    display: flex;
    align-items: flex-end;
    gap: var(--space-1);
}
.byte-masthead__flag {
    background: #fff3a8;
    color: #ba2017;
    font-size: clamp(10px, calc(var(--viewport-short) * 0.016 * var(--scale-type)), 18px);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-1);
    line-height: 1;
    margin-bottom: var(--space-1);
}
.byte-masthead__name {
    font-size: var(--masthead-size);
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 0.88;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.25);
    text-shadow:
        2px 2px 0 rgba(0,0,0,0.5),
        4px 4px 0 rgba(255,255,255,0.15);
}
.byte-masthead__meta {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    font-size: var(--page-size);
    font-weight: 900;
    text-transform: uppercase;
    color: #fff3a8;
}
.byte-masthead__meta span:last-child {
    background: #fff3a8;
    color: #b71c12;
    padding: var(--space-0) var(--space-1);
}
.cover--byte .byte-main-wrap {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: end;
    padding: var(--space-3) var(--space-4) var(--space-2);
    min-height: 0;
    overflow: hidden;
}
.byte-inset {
    display: block;
    grid-row: 1 / -1;
    background: rgba(255,249,224,0.95);
    border: 4px solid #ce2d20;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
    overflow: hidden;
    max-width: clamp(70px, 12vw, 130px);
}
.byte-inset__img {
    aspect-ratio: 1;
    overflow: hidden;
}
.byte-inset__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.byte-inset__body {
    padding: var(--space-1);
    background: rgba(206,45,32,0.94);
}
.byte-inset__tag {
    display: inline-block;
    background: #fff16a;
    color: #9f1f14;
    font-size: var(--micro-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-1);
    margin-bottom: var(--space-0);
}
.byte-inset__headline {
    font-size: clamp(10px, calc(var(--viewport-short) * 0.015 * var(--scale-type)), 15px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.cover--byte .byte-main {
    align-self: end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    max-width: 80%;
    padding-left: var(--space-1);
}
.cover--byte .byte-main__banner {
    display: inline-flex;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
    background: rgba(255,255,255,0.96);
    color: #c72419;
    font-size: clamp(8px, calc(var(--viewport-short) * 0.0115 * var(--scale-type)), 13px);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-2);
    border: 2px solid #c72419;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    margin-bottom: var(--space-1);
}
.byte-main__banner-kicker {
    background: #ffe751;
    color: #7e160e;
    padding: 1px var(--space-1);
}
.cover--byte .byte-main__overline {
    font-size: clamp(18px, calc(var(--viewport-short) * 0.042 * var(--scale-display)), 46px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.94;
    text-shadow:
        2px 2px 0 rgba(0,0,0,0.72),
        0 0 16px rgba(0,0,0,0.2);
}
.cover--byte .byte-main__headline {
    font-size: var(--headline-size);
    font-weight: 900;
    color: #ffe721;
    font-family: 'Arial Black', 'Impact', sans-serif;
    text-transform: uppercase;
    line-height: 0.84;
    max-width: 96%;
    -webkit-text-stroke: 3px #000;
    text-shadow:
        4px 4px 0 rgba(0,0,0,0.92),
        7px 7px 0 rgba(172,40,15,0.55),
        0 0 22px rgba(255,231,33,0.25);
    letter-spacing: -2px;
    paint-order: stroke fill;
    word-break: break-word;
}
.cover--byte .byte-main__headline em {
    color: #fff;
    -webkit-text-stroke: 3px #000;
    text-shadow:
        4px 4px 0 rgba(0,0,0,0.92),
        0 0 20px rgba(255,255,255,0.2);
}
.cover--byte .byte-main__sub {
    color: #ffe65f;
    background: rgba(199,36,25,0.96);
    font-size: clamp(10px, calc(var(--viewport-short) * 0.017 * var(--scale-type) * var(--layout-type-scale)), 16px);
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-weight: 900;
    line-height: 1.08;
    margin-top: var(--space-2);
    max-width: 94%;
    padding: var(--space-1) var(--space-2);
    border-left: 4px solid #fff16a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--byte .byte-footer-rail {
    background: linear-gradient(to bottom, rgba(189,31,21,0.96) 0%, rgba(159,19,11,0.96) 100%);
    padding: var(--space-1) var(--space-3);
    border-top: 4px solid #fff16a;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 var(--space-2);
}
.byte-footer-rail__text {
    display: inline-block;
    background: #fff16a;
    color: #bb2619;
    font-size: clamp(9px, calc(var(--viewport-short) * 0.013 * var(--scale-type)), 13px);
    font-weight: 900;
    text-transform: uppercase;
    padding: var(--space-0) var(--space-2);
    margin-bottom: var(--space-1);
}
.byte-briefs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.byte-brief {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    background: rgba(255,255,255,0.08);
    padding: var(--space-0) var(--space-1);
}
.byte-brief__tag {
    background: #fff16a;
    color: #9f1d14;
    font-size: var(--micro-size);
    font-weight: 900;
    text-transform: uppercase;
    padding: 1px var(--space-1);
    white-space: nowrap;
    flex-shrink: 0;
}
.byte-brief__text {
    font-size: clamp(8px, calc(var(--viewport-short) * 0.0125 * var(--scale-type)), 12px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cover--byte .byte-bottom {
    padding: var(--space-1) var(--space-3);
    background: rgba(255,252,239,0.96);
    flex-shrink: 0;
}
.cover--byte .pullquote {
    border-left: 4px solid #cf2d20;
    background: rgba(255,255,255,0.45);
}
.cover--byte .pullquote__text {
    color: #8d1d14;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    text-shadow: none;
}
.cover--byte .pullquote__text::before,
.cover--byte .pullquote__text::after { color: #cf2d20; }
.cover--byte .pullquote__attr { color: #cf2d20; font-family: Arial, sans-serif; }
.cover--byte .chrome {
    background: rgba(255,255,255,0.96);
    border-top: 3px solid #cf2d20;
    padding: var(--space-1) var(--space-3);
}
.cover--byte .chrome__price,
.cover--byte .chrome__url,
.cover--byte .chrome__issue {
    color: rgba(128,26,17,0.7);
    font-family: Arial, sans-serif;
}
.cover--byte .burst {
    width: clamp(72px, min(calc(var(--viewport-w) * 0.1), calc(var(--viewport-h) * 0.14)), 120px);
    height: clamp(72px, min(calc(var(--viewport-w) * 0.1), calc(var(--viewport-h) * 0.14)), 120px);
}
.cover--byte .burst__bg polygon {
    fill: #ffe721 !important;
    stroke: #cc2c20 !important;
    stroke-width: 2px !important;
}
.cover--byte .burst__text {
    color: #c62519 !important;
    font-family: 'Arial Black', 'Impact', sans-serif !important;
    font-size: clamp(9px, calc(var(--viewport-short) * 0.013 * var(--scale-type)), 13px);
    text-shadow: none;
}

/* ===========================================
   SUBTLE HOVER STATES — all content elements
   =========================================== */

/* Transition on elements that don't already have it */
.headline__main,
.headline__sub,
.headline__kicker,
.headline__page-ref,
.pullquote,
.burst,
.banner,
.side-story,
.wwn-story,
.us-photo,
.us-blurb,
.ok-card,
.ok-extra,
.globe-slash,
.globe-side,
.globe-blip,
.vogue-feature,
.byte-teaser,
.byte-inset,
.byte-brief,
.byte-promo,
.bullet-box,
.masthead,
.chrome,
.extra {
    transition: filter 0.15s ease, transform 0.15s ease;
}

/* Headline block */
.headline__main:hover { filter: brightness(1.15); }
.headline__sub:hover { filter: brightness(1.12); }
.headline__kicker:hover { filter: brightness(1.2); }
.headline__page-ref:hover { filter: brightness(1.3); }

/* Pullquote */
.pullquote:hover { filter: brightness(1.12); border-left-color: var(--accent); }

/* Bursts */
.burst:hover { filter: brightness(1.15); transform: scale(1.1); }

/* Banners */
.banner:hover { filter: brightness(1.2); }

/* Extras */
.extra:hover { filter: brightness(1.2); }

/* Star layout */
.side-story:hover { transform: scale(1.03); filter: brightness(1.08); }
.bullet-box:hover { filter: brightness(1.15); }

/* WWN layout */
.wwn-story:hover { transform: scale(1.03); filter: brightness(1.08); }

/* US layout */
.us-photo:hover { transform: scale(1.03); filter: brightness(1.08); }
.us-blurb:hover { transform: scale(1.03); filter: brightness(1.08); }

/* OK layout */
.ok-card:hover { transform: scale(1.03); filter: brightness(1.08); }
.ok-extra:hover { filter: brightness(1.2); }

/* Globe layout */
.globe-slash:hover { transform: scale(1.03); filter: brightness(1.08); }
.globe-side:hover { transform: scale(1.03); filter: brightness(1.08); }
.globe-blip:hover { filter: brightness(1.2); }

/* Vogue layout */
.vogue-feature:hover { filter: brightness(1.12); transform: translateX(2px); }

/* Byte layout */
.byte-teaser:hover { transform: scale(1.03); filter: brightness(1.08); }
.byte-inset:hover { transform: scale(1.03); filter: brightness(1.08); }
.byte-brief:hover { filter: brightness(1.15); }
.byte-promo:hover { filter: brightness(1.15); }

/* Masthead + chrome */
.masthead:hover { filter: brightness(1.08); }
.chrome:hover { filter: brightness(1.15); }

/* ===========================================
   NAVIGATION
   =========================================== */
.nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: clamp(36px, calc(var(--viewport-short) * 0.06 * var(--scale-ui)), 56px);
    height: clamp(60px, calc(var(--viewport-short) * 0.11 * var(--scale-ui)), 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0,0,0,0.4);
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: clamp(22px, calc(var(--viewport-short) * 0.04 * var(--scale-type)), 32px);
    backdrop-filter: blur(4px);
    border-radius: 4px;
}
.nav-arrow--left { left: var(--space-1); }
.nav-arrow--right { right: var(--space-1); }
body:hover .nav-arrow { opacity: 1; }
.nav-arrow:hover { background: rgba(0,0,0,0.7); color: #fff; }

/* Hide arrows on desktop — content is clickable, arrows only for mobile touch */
@media (min-width: 769px) {
    .nav-arrow { display: none; }
}

.nav-dots {
    position: fixed;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity 0.3s ease;
}
body:hover .nav-dots { opacity: 1; }
.nav-dot {
    width: clamp(10px, calc(var(--viewport-short) * 0.014 * var(--scale-ui)), 14px);
    height: clamp(10px, calc(var(--viewport-short) * 0.014 * var(--scale-ui)), 14px);
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    border: none;
}
.nav-dot.active { background: var(--text-primary); transform: scale(1.3); }
.nav-dot:hover { background: rgba(255,255,255,0.7); }

/* --- PARALLAX --- */
.parallax-layer { transition: transform 0.1s ease-out; }
.parallax-slow { --parallax-strength: 0.008; }
.parallax-medium { --parallax-strength: 0.018; }
.parallax-fast { --parallax-strength: 0.03; }

/* --- LOADING --- */
.loading {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: #0a0a0a;
    color: #fff;
    font-size: 14px; letter-spacing: 6px; text-transform: uppercase; font-weight: 700;
    transition: opacity 0.5s ease;
}
.loading.hide { opacity: 0; pointer-events: none; }

/* --- POST TEMPLATE: TABLET / NARROW DESKTOP --- */
@media (max-width: 768px) {
    .cover--post .cover__content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas:
            "masthead"
            "topbanner"
            "headline"
            "extra"
            "sidebar"
            "chrome";
        overflow-y: auto;
    }
    .cover--post .zone--headline { overflow: visible; }
    .cover--post .zone--headline .headline__main {
        font-size: clamp(28px, calc(var(--viewport-short) * 0.09 * var(--scale-display)), 60px);
    }
    .cover--post .zone--extra {
        max-height: none;
        flex-wrap: wrap;
    }
    .cover--post .zone--sidebar {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--space-2);
        max-height: 20vh;
    }
    .cover--post .zone--sidebar .story {
        min-width: 200px;
        max-height: 18vh;
        flex: none;
    }
    .cover--post .zone--sidebar .story img {
        max-height: 10vh;
        object-fit: cover;
    }
    .cover--post .burst { display: none; }

    /* US: collapse body to single column */
    .cover--us .us-body {
        grid-template-columns: 1fr;
    }
    .cover--us .us-sidebar {
        max-height: 18vh;
        overflow-y: auto;
    }
    .cover--us .us-photo-grid {
        flex-direction: row;
        overflow-x: auto;
    }
    .us-photo { min-width: 140px; min-height: 80px; flex: none; }
    .cover--us .masthead { flex-wrap: wrap; gap: var(--space-1); }

    /* Byte: collapse top-grid to single column */
    .cover--byte .byte-top-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        max-height: 20vh;
        overflow: hidden;
    }
    .byte-teaser {
        border-right: 0;
        border-bottom: 2px solid rgba(140,84,14,0.25);
        max-height: 10vh;
    }
    .byte-teaser:last-child { border-bottom: 0; }
    .cover--byte .byte-promo { flex-wrap: wrap; }
    .byte-promo__lead, .byte-promo__quiz { white-space: normal; }

    /* Byte: also collapse main-wrap at tablet width */
    .cover--byte .byte-main-wrap {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3) var(--space-1);
    }
    /* Byte: stack footer-rail on mobile */
    .cover--byte .byte-footer-rail {
        grid-template-columns: 1fr;
    }
    .byte-inset {
        max-width: 100%;
    }
    .byte-inset__img {
        display: none;
    }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 600px) {
    .cover--star .cover__content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto auto;
        grid-template-areas:
            "topbanner"
            "masthead"
            "main"
            "sidebar"
            "bottombar"
            "chrome";
    }
    .cover--star .zone--sidebar {
        flex-direction: row;
        overflow-x: auto;
    }
    .side-story { min-width: 140px; flex: none; }
    .callout { position: static !important; max-width: 100% !important; margin-bottom: 4px; }
    .zone--callouts { position: static; display: flex; flex-direction: column; gap: 4px; z-index: 16; padding: 6px; }
    .headline__main {
        font-size: clamp(24px, calc(var(--viewport-short) * 0.095 * var(--scale-display)), 52px) !important;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .headline__sub { word-break: break-word; overflow-wrap: break-word; }
    .sidebar { flex-direction: row; overflow-x: auto; }
    .story { min-width: 140px; }
    .burst { display: none !important; }

    /* Byte/Examiner: stack footer on narrow screens */
    .cover--byte .byte-footer-rail {
        grid-template-columns: 1fr;
    }
    .byte-inset {
        max-width: 100%;
    }
    .byte-inset__img {
        display: none;
    }
    .byte-main__headline {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Globe: constrain sidebar stories */
    .cover--globe .globe-sidebar {
        flex-direction: row;
        overflow-x: auto;
    }
    .globe-side { min-width: 130px; flex: none; }

    /* OK: photo circles smaller */
    .ok-circle { min-width: 80px; }

    /* US: ensure photo grid is scrollable */
    .cover--us .us-photo-grid {
        flex-direction: row;
        overflow-x: auto;
    }
    .us-photo { min-width: 100px; flex: none; }

    /* WWN: constrain story grid + fix masthead overflow */
    .cover--wwn .wwn-stories {
        grid-template-columns: 1fr;
    }
    .cover--wwn .masthead__name {
        letter-spacing: 2px;
    }
    .cover--wwn .cover__content {
        overflow-y: auto;
    }

    /* InTouch: collapse callout grid + fix bottom zone */
    .cover--intouch .zone--callout-grid {
        grid-template-columns: 1fr;
    }
    .cover--intouch .zone--bottom {
        max-height: none;
        flex-wrap: wrap;
        overflow: visible;
    }

    /* Vogue: convert left-rail from absolute to inline flow */
    .cover--vogue .vogue-left-rail {
        position: static;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-1);
        padding: 0 var(--space-3);
    }
    .vogue-side-label {
        border-left: none;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        padding-left: 0;
        padding-bottom: var(--space-0);
        flex: 1 1 45%;
        min-width: 100px;
    }
    .cover--vogue .vogue-features {
        flex-wrap: wrap;
    }
    .vogue-feature {
        flex: 1 1 45%;
        min-width: 120px;
    }

    /* OK: allow circles to wrap on very small screens */
    .cover--ok .ok-circles {
        flex-wrap: wrap;
        justify-content: center;
    }
    .ok-circle { min-width: 0; }
    .cover--ok .ok-cards {
        flex-direction: column;
        align-items: stretch;
    }
    .ok-card { max-width: 100%; }

    /* Globe: reduce masthead letter-spacing */
    .cover--globe .masthead__name {
        letter-spacing: 2px;
    }
}

/* --- PORTRAIT / TALL VIEWPORTS --- */
@media (max-aspect-ratio: 3/4) {
    :root {
        --masthead-size: clamp(28px, 6vh, 72px);
        --headline-size: clamp(24px, 7vh, 80px);
        --sub-size: clamp(9px, 1.8vh, 16px);
    }
    .cover--post .zone--extra { max-height: 10vh; }
    .cover--intouch .zone--bottom { max-height: 8vh; }
    .cover--intouch .zone--callout-grid {
        gap: clamp(6px, 1.5vh, 14px);
        padding: clamp(8px, 2vh, 20px) clamp(4px, 1vw, 10px);
    }
    .callout-card__headline {
        -webkit-line-clamp: 3;
    }
}

/* --- LANDSCAPE / WIDE VIEWPORTS --- */
@media (min-aspect-ratio: 2/1) {
    :root {
        --masthead-size: clamp(28px, 8vh, 80px);
        --headline-size: clamp(24px, 9vh, 100px);
    }
    .cover--star .cover__content { grid-template-columns: 2fr 1fr; }
    .cover--post .zone--sidebar { overflow-y: auto; }
    .cover--intouch .zone--headline .headline__main { font-size: clamp(24px, 8vh, 90px); }
}