:root {
    /* Source Sans 3 has an open rhythm (Google Fonts (weights 400); IntersectionObserver` for scroll-triggered reveals and border animations with `threshold: 0.15` */
    --bg-parchment: #f0e4d1;
    --surface-light: #f7f0e3;
    --surface-dark: #3b2e24;
    --accent-vermillion: #c46b4a;
    --accent-teal: #5e8f8a;
    --text-primary: #3b2e24;
    --text-secondary: #5a4d42;
    --highlight-gold: #b89b5e;
    --text-light: #f2e8d8;
    --cream-mid: #ede3d0;
    --cream-shadow: #e0d4c0;
    --dark-soft: #5a4d42;
    --linen-muted: #d4c8b8;
}

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

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 10% 12%, rgba(184, 155, 94, 0.22), transparent 22rem),
        radial-gradient(circle at 86% 34%, rgba(94, 143, 138, 0.16), transparent 24rem),
        linear-gradient(135deg, #f2e8d8 0%, var(--bg-parchment) 48%, #ede3d0 100%);
    color: var(--text-secondary);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.65;
    letter-spacing: 0.005em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.32;
    background-image: repeating-linear-gradient(105deg, transparent 0 36px, rgba(59, 46, 36, 0.035) 37px 39px, transparent 40px 74px);
}

.ambient {
    position: fixed;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(1px);
    opacity: 0.7;
}

.ambient-a {
    width: 24vw;
    height: 12vw;
    left: -7vw;
    top: 18vh;
    background: radial-gradient(ellipse, rgba(196, 107, 74, 0.18), transparent 68%);
}

.ambient-b {
    width: 28vw;
    height: 10vw;
    right: -9vw;
    bottom: 10vh;
    background: radial-gradient(ellipse, rgba(94, 143, 138, 0.2), transparent 70%);
}

.section-counter {
    position: fixed;
    top: 2vh;
    right: 2vw;
    z-index: 50;
    padding: 0.58rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(160deg, #f7f0e3 0%, #ede3d0 100%);
    color: var(--text-primary);
    font-family: "Zilla Slab", Georgia, serif;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 2px solid rgba(196, 107, 74, 0.24);
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.12), inset 0 4px 8px rgba(255, 255, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.1);
}

.page-container {
    position: relative;
    width: 100%;
    padding: 7vh 0 10vh;
}

.capsule {
    position: relative;
    min-height: 66vh;
    margin-bottom: -3vh;
    padding: clamp(2rem, 6vw, 5.5rem);
    border: 2px solid transparent;
    border-radius: clamp(24px, 4vw, 48px);
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1), border-color 800ms ease-out, box-shadow 400ms ease;
    overflow: hidden;
}

.capsule::before {
    content: attr(data-section);
    position: absolute;
    right: clamp(1.5rem, 4vw, 4rem);
    bottom: clamp(1rem, 3vw, 2.5rem);
    font-family: "Zilla Slab", Georgia, serif;
    font-size: clamp(4rem, 14vw, 14rem);
    line-height: 0.8;
    opacity: 0.065;
    color: currentColor;
}

.capsule.light {
    background: linear-gradient(165deg, #f7f0e3 0%, #ede3d0 60%, #e0d4c0 100%);
    color: var(--text-secondary);
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.5), inset 0 -3px 8px rgba(59,46,36,0.08), 0 8px 32px rgba(59,46,36,0.12), 0 2px 8px rgba(59,46,36,0.06);
}

.capsule.dark {
    background: linear-gradient(165deg, #5a4d42 0%, #3b2e24 58%, #2d231b 100%);
    color: var(--linen-muted);
    box-shadow: inset 0 2px 9px rgba(242, 232, 216, 0.18), inset 0 -4px 12px rgba(0, 0, 0, 0.22), 0 12px 38px rgba(59,46,36,0.22), 0 2px 8px rgba(59,46,36,0.1);
}

.capsule.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(196, 107, 74, 0.4);
    animation: border-pressurize 600ms ease-out 800ms 1;
}

.capsule:hover {
    box-shadow: inset 0 4px 10px rgba(255,255,255,0.58), inset 0 -5px 14px rgba(59,46,36,0.14), 0 16px 48px rgba(59,46,36,0.18), 0 4px 16px rgba(59,46,36,0.09);
}

.capsule.dark:hover {
    box-shadow: inset 0 3px 12px rgba(242,232,216,0.24), inset 0 -6px 16px rgba(0,0,0,0.28), 0 18px 54px rgba(59,46,36,0.26), 0 5px 18px rgba(59,46,36,0.14);
}

.capsule-1, .capsule-3, .capsule-5 { margin-left: 8vw; margin-right: 2vw; }
.capsule-2, .capsule-4, .capsule-6 { margin-left: 2vw; margin-right: 8vw; }
.capsule-1 { min-height: 92vh; }
.capsule-2 { min-height: 72vh; }
.capsule-3 { min-height: 78vh; }
.capsule-4 { min-height: 68vh; }
.capsule-5 { min-height: 74vh; }
.capsule-6 { min-height: 86vh; }

.surface-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 18% 8%, rgba(255,255,255,0.58), transparent 34%), radial-gradient(ellipse at 78% 90%, rgba(184,155,94,0.12), transparent 42%);
}

.capsule-content {
    position: relative;
    z-index: 2;
    max-width: 64rem;
}

.section-label {
    margin-bottom: 1rem;
    color: var(--accent-vermillion);
    font-family: "Zilla Slab", Georgia, serif;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.dark .section-label { color: var(--highlight-gold); }

h1, h2 {
    max-width: 11em;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-family: "Zilla Slab", Georgia, serif;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.dark h1, .dark h2 { color: var(--text-light); }

p { max-width: 38em; margin-bottom: 1.5rem; }

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2.2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 700ms ease 420ms, transform 700ms ease 420ms;
}

.capsule.visible .pill-row { opacity: 1; transform: translateY(0); }

.pill {
    width: 40px;
    height: 20px;
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.45), inset 0 -2px 4px rgba(59,46,36,0.16), 0 3px 8px rgba(59,46,36,0.12), 0 1px 3px rgba(59,46,36,0.08);
    transition: transform 300ms ease, box-shadow 400ms ease;
}

.pill:hover { transform: scale(1.08); box-shadow: inset 0 2px 5px rgba(255,255,255,0.55), inset 0 -3px 6px rgba(59,46,36,0.18), 0 5px 14px rgba(59,46,36,0.18); }
.pill-accent { background: linear-gradient(160deg, #e58a64 0%, #c46b4a 100%); }
.pill-teal { background: linear-gradient(160deg, #78aaa5 0%, #5e8f8a 100%); }
.pill-gold { background: linear-gradient(160deg, #d0b87a 0%, #b89b5e 100%); }

.slash-pack {
    position: absolute;
    width: min(60%, 32rem);
    height: 5rem;
    pointer-events: none;
    transform: rotate(45deg);
}

.slash-pack i {
    display: block;
    width: 0;
    height: 2px;
    margin: 12px 0;
    background: var(--accent-vermillion);
    box-shadow: 0 0 0 rgba(184, 155, 94, 0);
    opacity: 0;
    transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1) 200ms, opacity 400ms ease 200ms, box-shadow 500ms ease 700ms;
}

.capsule.visible .slash-pack i { width: 100%; opacity: 1; box-shadow: 0 0 18px rgba(184,155,94,0.32); }
.slash-pack i:nth-child(2) { transition-delay: 260ms; }
.slash-pack i:nth-child(3) { transition-delay: 320ms; }
.slash-pack-a { top: 14%; right: 4%; }
.slash-pack-b { bottom: 16%; left: 7%; transform: rotate(135deg); width: min(48%, 26rem); }
.slash-pack-c { top: 21%; right: 10%; width: min(54%, 30rem); }
.slash-pack-d { bottom: 18%; left: 9%; transform: rotate(135deg); width: min(46%, 25rem); }
.slash-pack-e { top: 18%; right: 6%; }
.slash-pack-f { bottom: 20%; left: 12%; transform: rotate(135deg); width: min(52%, 28rem); }

.lens-flare {
    position: absolute;
    z-index: 3;
    width: 150px;
    height: 48px;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse 80px 20px at 50% 50%, rgba(184,155,94,0.4), transparent), radial-gradient(circle 6px at 50% 50%, rgba(244,232,216,0.9), transparent), radial-gradient(ellipse 120px 8px at 50% 50%, rgba(94,143,138,0.15), transparent);
    mix-blend-mode: screen;
    transition: opacity 600ms ease-in 1000ms;
}

.capsule.visible .lens-flare { opacity: 1; animation: flare-drift 4s linear 1s infinite alternate; }
.flare-a { top: 23%; right: 23%; }
.flare-b { bottom: 25%; left: 22%; }
.flare-c { top: 34%; right: 19%; }
.flare-d { bottom: 27%; left: 18%; }
.flare-e { top: 26%; right: 24%; }
.flare-f { bottom: 30%; left: 23%; }

@keyframes border-pressurize {
    0% { border-width: 2px; border-color: rgba(196,107,74,0.4); }
    50% { border-width: 3px; border-color: rgba(184,155,94,0.62); }
    100% { border-width: 2px; border-color: rgba(196,107,74,0.4); }
}

@keyframes flare-drift {
    from { transform: translate(var(--mx, 0px), var(--my, 0px)); }
    to { transform: translate(calc(var(--mx, 0px) + 20px), var(--my, 0px)); }
}

@media (max-width: 780px) {
    .page-container { padding-top: 6vh; }
    .capsule-1, .capsule-2, .capsule-3, .capsule-4, .capsule-5, .capsule-6 { margin-left: 4vw; margin-right: 4vw; min-height: 70vh; }
    .section-counter { right: 4vw; }
    .slash-pack { width: 68%; opacity: 0.7; }
}