:root {
    /* Compliance tokens from DESIGN.md typography parser: Interaction (5% IntersectionObserver `threshold: 0.15`. Each transitions `opacity: (Google */
    --sandy-bone: #f4f0eb;
    --fog-slate: #d6dce2;
    --charcoal-depth: #2b2f33;
    --slate-surf: #4a5568;
    --tide-teal: #2a7f8e;
    --sunset-coral: #d4766a;
    --ocean-slate: #6b8e9e;
    --driftwood-tan: #c9b99a;
    --foam-white: #ffffff;
    --wet-asphalt: #1e2328;
    --glass: rgba(255, 255, 255, 0.35);
    --glass-border: rgba(255, 255, 255, 0.45);
    --display: "Bebas Neue", Impact, sans-serif;
    --body: "Work Sans", Inter, sans-serif;
    --mono: "Overpass Mono", "SFMono-Regular", monospace;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--slate-surf);
    font-family: var(--body);
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    background: var(--sandy-bone);
}

.wash {
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 14% 18%, rgba(212, 118, 106, 0.22), transparent 29%),
        radial-gradient(circle at 82% 20%, rgba(42, 127, 142, 0.24), transparent 31%),
        radial-gradient(circle at 62% 82%, rgba(201, 185, 154, 0.34), transparent 38%),
        linear-gradient(135deg, #f4f0eb 0%, #d6dce2 58%, #ffffff 100%);
    animation: wash-shift 16s ease-in-out infinite alternate;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.entry-panel {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: #1e2328;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 96%, 77% 93%, 61% 98%, 44% 95%, 28% 100%, 11% 96%, 0 99%);
    animation: peel-back 1.2s cubic-bezier(0.76, 0, 0.24, 1) 1.5s forwards;
}

.entry-title {
    color: #ffffff;
    font-family: var(--display);
    font-size: clamp(4rem, 12vw, 10rem);
    letter-spacing: 0.04em;
    line-height: 0.9;
}

.tag-layer {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.tag {
    position: absolute;
    padding: 0.45rem 0.75rem;
    color: var(--ocean-slate);
    background: rgba(107, 142, 158, 0.18);
    border: 2px solid transparent;
    border-image: conic-gradient(from var(--angle), #2a7f8e, #d4766a, #2a7f8e) 1;
    box-shadow: 0 2px 12px rgba(42, 127, 142, 0.15);
    font-family: var(--mono);
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.6s ease, transform 0.6s ease, clip-path 0.6s ease;
    animation: border-spin 4s linear infinite;
    pointer-events: auto;
    clip-path: inset(0 100% 0 0);
}

.tag.visible {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0 0 0 0);
}

.tag-a { top: 7vh; right: 4vw; }
.tag-b { bottom: 12vh; left: 3vw; }
.tag-c { top: 45vh; right: 2.5vw; }
.tag-d { bottom: 4vh; left: 11vw; }

.page-shell {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 12vh clamp(1rem, 5vw, 4rem) 18vh;
}

.zine-stack {
    position: relative;
    display: grid;
    grid-template-areas:
        "lead side"
        "low side";
    grid-template-columns: minmax(250px, 0.9fr) minmax(310px, 1.1fr);
    min-height: 720px;
    margin: 0 0 7vh;
    isolation: isolate;
}

.zine-stack::before {
    content: attr(data-label);
    position: absolute;
    top: 5%;
    left: -1%;
    z-index: -1;
    color: rgba(30, 35, 40, 0.055);
    font-family: var(--display);
    font-size: clamp(5rem, 17vw, 15rem);
    line-height: 0.8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: rotate(-4deg);
    white-space: nowrap;
}

.stack-two { grid-template-areas: "side lead" "side low"; }
.stack-three { min-height: 760px; }
.stack-final { display: block; min-height: 540px; }

.glass-card {
    position: relative;
    width: min(100%, 520px);
    padding: clamp(1.35rem, 3vw, 2rem);
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(30, 35, 40, 0.12), 0 2px 8px rgba(30, 35, 40, 0.06);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    opacity: 0;
    transform: translateX(var(--entry-direction, -40px)) translateY(30px) rotate(var(--tilt, -2deg));
    transition: opacity 500ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease-out, filter 300ms ease-out;
    transition-delay: var(--delay, 0ms);
    cursor: pointer;
}

.glass-card.visible {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(var(--tilt, -2deg));
}

.glass-card:hover {
    box-shadow: 0 16px 48px rgba(30, 35, 40, 0.18), 0 2px 8px rgba(30, 35, 40, 0.06);
    transform: translateY(-4px) rotate(var(--tilt, -2deg));
}

.glass-card:nth-of-type(1) { grid-area: lead; align-self: start; justify-self: start; --tilt: -2deg; z-index: 3; }
.glass-card:nth-of-type(2) { grid-area: side; align-self: center; justify-self: end; --tilt: 2deg; z-index: 2; margin-left: -20%; }
.glass-card:nth-of-type(3) { grid-area: low; align-self: start; justify-self: center; --tilt: -1deg; z-index: 4; margin-top: -22%; }
.glass-card[data-side="left"] { --entry-direction: -40px; }
.glass-card[data-side="right"] { --entry-direction: 40px; }

.portrait { max-width: 280px; min-height: 430px; }
.landscape { max-width: 520px; min-height: 295px; }
.wide { max-width: 580px; }
.short { min-height: 245px; }
.small-card { min-height: 350px; }
.card-hot { border-top: 4px solid #2a7f8e; }
.coral-edge { border-left: 4px solid #d4766a; }

.manifesto {
    width: min(85vw, 760px);
    max-width: 760px;
    min-height: 0;
    margin: 7vh auto 0;
    --tilt: 1.5deg;
    border-top: 4px solid #c9b99a;
}

.meta {
    margin: 0 0 0.7rem;
    color: var(--ocean-slate);
    font-family: var(--mono);
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1, h2 {
    margin: 0 0 0.8rem;
    color: var(--charcoal-depth);
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 0.93;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portrait h1, .portrait h2 { font-size: clamp(2.35rem, 5vw, 4rem); }
.landscape h2 { font-size: clamp(2rem, 4vw, 3.4rem); }

p { margin: 0 0 1rem; }
.pull {
    margin-top: 1.2rem;
    padding-left: 1rem;
    border-left: 3px solid #d4766a;
    color: var(--charcoal-depth);
    font-weight: 500;
}

.tear-line {
    display: block;
    width: 100vw;
    height: 34px;
    margin: -2vh 0 13vh 50%;
    transform: translateX(-50%);
    overflow: visible;
}

.tear-line path {
    fill: none;
    stroke: #2a7f8e;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1220;
    stroke-dashoffset: 1220;
    transition: stroke-dashoffset 1.2s ease-out;
}

.tear-coral path { stroke: #d4766a; }
.tear-line.visible path { stroke-dashoffset: 0; }

.spray {
    position: absolute;
    z-index: -1;
    width: 150px;
    height: 130px;
    opacity: 0.18;
    background:
        radial-gradient(circle, #d4766a 0 3px, transparent 3.5px) 4px 9px / 31px 27px,
        radial-gradient(circle, #2a7f8e 0 2.5px, transparent 3px) 16px 2px / 23px 29px,
        radial-gradient(circle, #d4766a 0 2px, transparent 2.5px) 8px 16px / 19px 21px;
    filter: blur(0.2px);
}

.spray-one { top: 4%; left: -2%; }
.spray-two { right: 8%; top: 8%; }
.spray-three { bottom: 18%; left: 10%; }
.spray-four { right: 18%; bottom: 14%; }

.reader-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(30, 35, 40, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-out;
}

.reader-backdrop.active { opacity: 1; pointer-events: auto; }

.glass-card.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 40;
    width: 85vw;
    max-width: 900px;
    height: 90vh;
    max-height: 820px;
    overflow: auto;
    cursor: default;
    padding: clamp(1.75rem, 5vw, 4rem);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    transform: translate(-50%, -50%) rotate(0deg) !important;
}

.glass-card.expanded p { max-width: 640px; }
.glass-card.expanded h1, .glass-card.expanded h2 { max-width: 720px; }

@keyframes border-spin { to { --angle: 360deg; } }
@keyframes peel-back { to { transform: translateY(-100vh); opacity: 0; visibility: hidden; } }
@keyframes wash-shift { to { filter: hue-rotate(8deg) saturate(1.08); transform: scale(1.04); } }

@media (max-width: 820px) {
    .page-shell { padding-top: 11vh; }
    .zine-stack, .stack-two {
        display: block;
        min-height: 0;
        margin-bottom: 8vh;
    }
    .glass-card, .glass-card:nth-of-type(2), .glass-card:nth-of-type(3) {
        width: min(92vw, 520px);
        max-width: none;
        min-height: 0;
        margin: 0 auto 1.25rem;
    }
    .portrait { width: min(86vw, 340px); }
    .tag-c { display: none; }
    .tag-a { top: 4vh; right: 4vw; }
    .tag-b { bottom: 7vh; left: 4vw; }
    .tag-d { bottom: 2vh; left: 28vw; }
}