@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400..700&family=Space+Grotesk:wght@500..700&display=swap");

:root {
    color-scheme: dark;
    --vice-base: #0b0f14;
    --vice-card: #131920;
    --vice-overlay: #1a222b;
    --vice-line: #354353;
    --vice-text: #f8fafc;
    --vice-muted: #94a3b8;
    --vice-coral: #ff3366;
    --vice-amber: #ff8a00;
    --vice-cyan: #00f0ff;
    --vice-display: "Space Grotesk", system-ui, sans-serif;
    --vice-body: "Plus Jakarta Sans", system-ui, sans-serif;
    --vice-gradient: linear-gradient(135deg, var(--vice-coral), var(--vice-amber));
    background: var(--vice-base);
    color: var(--vice-text);
}
body { background: var(--vice-base); color: var(--vice-text); font-family: var(--vice-body); }
h1, h2, h3, .brand, .editorial-brand, .category, button, .magazine-cta { font-family: var(--vice-display); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--vice-cyan); outline-offset: 3px; }
.brand strong, .editorial-brand strong { color: #ff688c; }
a:hover, .bar [aria-current="page"], .editorial-bar nav a[aria-current] { color: var(--vice-cyan); }
.wrap { width: min(80rem, calc(100% - 2rem)); }
.site-header { position: sticky; top: 0; z-index: 4; background: rgba(11, 15, 20, .96); border-bottom: 1px solid var(--vice-line); }
.site-header .bar { border: 0; padding-block: .55rem; }
.site-header nav a { text-decoration: none; font: 600 .83rem var(--vice-display); }
.site-header nav a[aria-current="page"] { text-decoration: underline; }
.site-footer { color: var(--vice-muted); }
.magazine-heading h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3.25rem); }
.magazine-lead { border-color: var(--vice-line); border-radius: 1rem; background: radial-gradient(ellipse at top right, #ff336619, transparent 60%), var(--vice-card); }
.magazine-lead-copy h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.5rem); }
.magazine-cta, .editorial-button, .editorial button, .editorial-login button {
    border-radius: .5rem; background: var(--vice-gradient); color: #0b0f14; font-weight: 700;
}
.magazine-cta { padding: .55rem .9rem; }
.magazine-lead-copy .magazine-cta { margin-top: 1rem; }
.category { width: fit-content; padding: .25rem .55rem; border-radius: 99px; background: var(--vice-overlay); color: #ffb77f; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.article-link { background: var(--vice-card); border-color: var(--vice-line); border-radius: .5rem; }
.article-link:hover { border-color: var(--vice-coral); }
.magazine-section-title { border: 0; position: relative; }
.magazine-section-title::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--vice-coral), var(--vice-amber) 25%, transparent 75%); }
.reading-header h1 { font-family: var(--vice-display); }
.reading-progress { background: var(--vice-gradient); z-index: 5; }
.reading-copy a, .editorial a { color: #ffb2ba; }
.reading-copy blockquote { background: var(--vice-card); border-color: var(--vice-amber); }
.reading-copy tbody tr:nth-child(odd) { background: var(--vice-card); }
.campaign-placement { margin-block: 1.5rem; padding: 1rem; border: 1px solid var(--vice-line); border-inline-start: 3px solid var(--vice-amber); border-radius: .5rem; background: var(--vice-card); }
.campaign-placement small { color: var(--vice-muted); }
.campaign-placement a { color: #ffb2ba; }
body.editorial, body.editorial-login { --bg: var(--vice-base); --panel: var(--vice-card); --line: var(--vice-line); --text: var(--vice-text); --muted: var(--vice-muted); --accent: #ffb2ba; }
.editorial .editorial-button { color: #0b0f14; }
.editorial .editorial-brand { color: var(--vice-text); }
.editorial .editorial-bar button { background: var(--vice-overlay); color: var(--vice-text); }
.editorial input:focus, .editorial textarea:focus, .editorial select:focus { border-color: var(--vice-cyan); }
.editorial-list li:hover { background: var(--vice-overlay); }
@media (max-width: 40rem) {
    .site-header { position: static; }
    .site-header .bar nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    .site-header nav a { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: no-preference) {
    .site-header { backdrop-filter: blur(12px); }
}

@supports (animation-timeline: scroll()) {
    @media (min-width: 40.01rem) and (prefers-reduced-motion: no-preference) {
        .site-header {
            animation: vice-header-scroll linear both;
            animation-timeline: scroll(root block);
            animation-range: 0px 160px;
        }
    }
}
@keyframes vice-header-scroll {
    from { box-shadow: none; }
    to { box-shadow: 0 8px 20px #0007; border-bottom-color: #ff336660; }
}

/* Stitch editorial home */
.stitch-magazine .wrap { width: min(90rem, calc(100% - clamp(2rem, 5vw, 4rem))); }
.stitch-utility { background: #0a0e13; border-bottom: 1px solid #ffffff12; }
.stitch-utility .wrap { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px; font: 700 .7rem var(--vice-display); letter-spacing: .09em; text-transform: uppercase; color: var(--vice-muted); }
.stitch-utility a { display: inline-flex; align-items: center; min-height: 44px; color: var(--vice-cyan); text-decoration: none; }
.stitch-magazine .site-header .bar { min-height: 80px; }
.stitch-magazine .brand, .stitch-magazine .site-header nav a { text-transform: uppercase; letter-spacing: .06em; }
.stitch-magazine .magazine-lead { margin-top: 2rem; background: radial-gradient(ellipse at 100% 0%, #ff33661c, transparent 55%), radial-gradient(ellipse at 0% 100%, #00f0ff13, transparent 50%), var(--vice-card); }
.stitch-magazine .magazine-lead-link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stitch-magazine .magazine-lead-copy h2 { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); text-transform: uppercase; }
.stitch-date { display: block; color: var(--vice-muted); font: 600 .75rem var(--vice-display); }
.stitch-magazine .magazine-cta { text-transform: uppercase; font-size: .85rem; text-decoration: none; }
.stitch-magazine .articles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stitch-magazine .article-text h3 { font-size: 1.125rem; text-transform: uppercase; }
.stitch-magazine .article-link:hover h3 { color: var(--vice-cyan); }
.stitch-channel { margin-top: 3rem; padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--vice-line); border-radius: 1rem; background: radial-gradient(ellipse at top right, #ff33661e, transparent 65%), var(--vice-card); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.stitch-channel h2 { margin: 0; text-transform: uppercase; }
.stitch-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 64rem) { .stitch-magazine .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .stitch-magazine .magazine-lead-link { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36rem) { .stitch-magazine .articles { grid-template-columns: minmax(0, 1fr); } }

/* Vice Dusk component variants for reading and editorial workflows */
.stitch-screen-title {
    border-bottom: 1px solid var(--vice-line);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.stitch-screen-title::after {
    content: ""; position: absolute; inset: auto auto -1px 0;
    width: min(10rem, 50%); height: 2px; background: var(--vice-gradient);
}
.editorial h1, .editorial-login h1 {
    font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
    line-height: 1.15; letter-spacing: -.02em; text-transform: uppercase;
}
.editorial h2, .editorial legend, .editorial summary {
    font: 700 1.125rem/1.4 var(--vice-display);
    text-transform: uppercase; letter-spacing: .035em;
}
.editorial-bar { background: var(--vice-base); border-color: var(--vice-line); }
.editorial-bar nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--vice-muted); text-decoration: none;
    font: 700 .8rem var(--vice-display); text-transform: uppercase;
}
.editorial section, .editorial fieldset, .editorial details, .editorial-login main, .stitch-editor-form, .stitch-result {
    border: 1px solid var(--vice-line); border-radius: .5rem;
    background: var(--vice-card); padding: clamp(1rem, 3vw, 1.5rem);
    margin-block: 1.25rem; min-width: 0;
}
.editorial input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.editorial textarea, .editorial select, .editorial-login input {
    background: #0e1318; border-color: var(--vice-line); border-radius: .5rem;
}
.editorial button, .editorial-login button, .editorial-button {
    min-height: 44px; font-family: var(--vice-display);
}
.editorial summary { cursor: pointer; }
.editorial .stitch-status {
    display: block; width: fit-content; margin-top: .4rem; padding: .18rem .5rem;
    border-radius: 999px; background: var(--vice-overlay); color: var(--vice-muted);
    font: 700 .75rem/1.5 var(--vice-display);
}
.editorial .stitch-status[data-published="1"] { color: var(--vice-cyan); background: #00f0ff15; }
.stitch-result img { display: block; border-radius: .5rem; }
.reading-header { max-width: 760px; margin-inline: auto; }
.reading-header h1 { font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem); text-transform: uppercase; letter-spacing: -.02em; }
.reading-copy { max-width: min(760px, 100%); font-size: clamp(1rem, .93rem + .35vw, 1.125rem); line-height: 1.7; }
.reading-copy h2 { font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem); }
.reading-copy h3 { font-size: 1.375rem; }
.reading-date { color: var(--vice-muted); font: 600 .75rem var(--vice-display); }
.stitch-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--vice-muted); font: 600 .75rem var(--vice-display); }
.stitch-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 40rem) {
    .editorial-bar nav { gap: .15rem .75rem; }
    .editorial .stitch-status { width: auto; }
}

.site-menu { display: none; }
.site-menu-desktop { min-width: 0; }
.portal-footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.5rem; margin-top: 3rem; padding-block: 2rem; border-top: 1px solid var(--vice-line); }
.portal-footer nav, .portal-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.portal-footer a, .portal-filters a, .site-menu summary { display: inline-flex; min-height: 44px; align-items: center; }
.portal-filters { margin-block: 1rem; }
.portal-filters a { padding-inline: .75rem; border: 1px solid var(--vice-line); border-radius: .5rem; text-decoration: none; }
.portal-filters [aria-current] { border-color: var(--vice-cyan); }
.reading-copy { overflow: visible; }
.reading-table { max-width: 100%; overflow-x: auto; margin-block: 1.25rem; }
.reading-table table { min-width: 32rem; }
.editor-save { position: sticky; bottom: 0; z-index: 2; padding: .75rem 0; background: var(--vice-card); border-top: 1px solid var(--vice-line); }
@media (max-width: 48rem) {
    .site-header { position: static; }
    .site-menu-desktop { display: none; }
    .site-menu { display: block; max-width: 100%; }
    .site-menu summary { padding-inline: .75rem; border: 1px solid var(--vice-line); border-radius: .5rem; cursor: pointer; }
    .site-header .site-menu nav { display: flex; flex-wrap: wrap; overflow: visible; gap: 0 1rem; }
    .portal-footer { grid-template-columns: 1fr; }
}

.channel-video { width: min(100%, 22rem); display: grid; gap: .5rem; overflow-wrap: anywhere; }
.channel-video img { width: 100%; height: auto; border-radius: .5rem; }

.stitch-magazine .bar, .stitch-magazine .bar > *, .stitch-magazine .magazine-media, .stitch-magazine .article-text { min-width: 0; }
.stitch-magazine .site-header nav { max-width: 100%; overflow-wrap: anywhere; }
.stitch-magazine .magazine-lead-copy, .reading-copy { overflow-wrap: anywhere; }