/* =========================================================
   haskeller.net v2 — inflated-3D, f-pattern, earth-tones,
   bebas-bold logotype, counter-animate, water-bubbles,
   cultural pojagi accents, mysterious-moody undertone.
   ========================================================= */

:root {
    /* Earth-tone palette (DESIGN.md exact hex) */
    --sand:       #E8DDD0;
    --earth-mid:  #C4B4A0;
    --earth-dark: #8A7A6A;
    --walnut:     #5A4A3A;
    --cream:      #FFF8F0;
    --indigo:     #4A4A7A;
    --bubble:     #A0B8D0;
    --gold:       #C4A060;

    /* Inflated-3D shadow system (canonical from DESIGN.md) */
    --inflate:
        8px 8px 20px rgba(0,0,0,0.15),
        -4px -4px 10px rgba(255,248,240,0.8),
        inset 2px 2px 4px rgba(255,248,240,0.3),
        inset -2px -2px 4px rgba(0,0,0,0.05);

    --inflate-hover:
        12px 12px 28px rgba(0,0,0,0.18),
        -6px -6px 14px rgba(255,248,240,0.9),
        inset 2px 2px 5px rgba(255,248,240,0.4),
        inset -2px -2px 6px rgba(0,0,0,0.06);

    --inflate-soft:
        4px 4px 12px rgba(0,0,0,0.12),
        -2px -2px 8px rgba(255,248,240,0.7),
        inset 1px 1px 2px rgba(255,248,240,0.3),
        inset -1px -1px 2px rgba(0,0,0,0.04);

    --grad-skin:  linear-gradient(135deg, #FFF8F0 0%, #E8DDD0 100%);
    --grad-mid:   linear-gradient(135deg, #FFF8F0 0%, #C4B4A0 100%);
    --grad-dark:  linear-gradient(135deg, #C4B4A0 0%, #8A7A6A 100%);

    --font-head: "Bebas Neue", "Inter", system-ui, sans-serif;
    --font-body: "Source Sans 3", "Inter", system-ui, sans-serif;
    --font-code: "Fira Code", ui-monospace, monospace;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--sand);
    color: var(--walnut);
    font-family: var(--font-body);
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.75;
    overflow-x: hidden;
    min-height: 100vh;
    /* Subtle warm vignette */
    background-image:
        radial-gradient(ellipse at 25% 15%, rgba(255,248,240,0.55), transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(138,122,106,0.18), transparent 60%);
}

img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: var(--indigo); text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: 0.7; }
em { font-style: italic; color: var(--indigo); }

/* ---------- Bubble field (background motif) ---------- */
.bubble-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(160, 184, 208, 0.30);
    background:
        radial-gradient(circle at 30% 30%, rgba(255,248,240,0.7) 0%, rgba(255,248,240,0.15) 25%, transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(160,184,208,0.10) 0%, transparent 70%);
    will-change: transform, opacity;
    animation-name: bubbleFloat;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 0;
}

@keyframes bubbleFloat {
    0%   { transform: translate3d(var(--bx, 0), 110vh, 0) scale(0.85); opacity: 0; }
    8%   { opacity: 0.65; }
    50%  { opacity: 0.55; }
    92%  { opacity: 0.4; }
    100% { transform: translate3d(calc(var(--bx, 0) + var(--bdrift, 0)), -20vh, 0) scale(1); opacity: 0; }
}

/* ---------- Top scan bar (F-pattern top stroke) ---------- */
.scan-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 18px 28px 16px 64px;
    background: linear-gradient(180deg, rgba(232,221,208,0.92) 0%, rgba(232,221,208,0.55) 75%, transparent 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.scan-bar__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pill-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pill {
    --pill-h: 56px;
    height: var(--pill-h);
    padding: 0 26px;
    border-radius: calc(var(--pill-h) / 2);
    background: var(--grad-skin);
    box-shadow: var(--inflate);
    color: var(--walnut);
    font-family: var(--font-head);
    font-size: 18px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    transform: scale(0.4);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(.2,1.4,.4,1),
        box-shadow 0.25s ease,
        opacity 0.4s ease;
}

.pill.is-inflated {
    transform: scale(1);
    opacity: 1;
}

.pill:hover {
    box-shadow: var(--inflate-hover);
    transform: translateY(-2px) scale(1.03);
}

.pill:active {
    transform: translateY(0) scale(0.97);
    box-shadow: var(--inflate-soft);
}

.pill.is-active {
    background: var(--grad-mid);
    color: var(--cream);
}

.pill__count {
    font-family: var(--font-head);
    color: var(--gold);
    font-size: 20px;
    letter-spacing: 0.04em;
    background: rgba(255, 248, 240, 0.55);
    padding: 2px 10px 0;
    border-radius: 999px;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.06);
    min-width: 56px;
    text-align: center;
}

/* ---------- Vertical logotype ---------- */
.vertical-logo {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 56px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.vertical-logo__chars {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-head);
    font-size: clamp(20px, 1.5vw, 28px);
    letter-spacing: 0.30em;
    color: var(--walnut);
    text-transform: lowercase;
    display: inline-flex;
    flex-direction: column-reverse;
    line-height: 1;
}

.vchar {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,1,.4,1);
}

.vchar.is-typed {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Layout / main column ---------- */
.main {
    position: relative;
    z-index: 1;
    padding-left: 80px;
    padding-right: 32px;
    max-width: 1320px;
    margin: 0 auto;
}

/* ---------- HERO ---------- */
.hero {
    min-height: 100vh;
    padding-top: 130px;
    padding-bottom: 60px;
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    position: relative;
}

.hero__pojagi-border {
    position: absolute;
    inset: 110px 8px 32px 8px;
    border: 1px dashed rgba(74, 74, 122, 0.18);
    border-radius: 28px;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(74, 74, 122, 0.10) 0 8px,
            transparent 8px 18px),
        repeating-linear-gradient(-45deg,
            rgba(74, 74, 122, 0.06) 0 8px,
            transparent 8px 22px);
    background-size: 120px 120px, 90px 90px;
    background-position: top left, top right;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%),
                        linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
    opacity: 0.7;
}

.hero__lambda-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    width: min(58vh, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lambda {
    position: relative;
    width: 78%;
    height: 78%;
    border-radius: 36% 32% 30% 34% / 38% 34% 28% 32%;
    background: var(--grad-skin);
    /* deflated initial state — overridden by .is-inflated */
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transform: translateY(0) scale(0.85);
    transition:
        box-shadow 1s cubic-bezier(.2,.8,.3,1),
        transform 1s cubic-bezier(.2,1.2,.3,1),
        border-radius 1s cubic-bezier(.2,.8,.3,1);
    overflow: hidden;
    isolation: isolate;
}

.lambda.is-inflated {
    box-shadow: var(--inflate),
                0 50px 60px -30px rgba(90, 74, 58, 0.45);
    transform: translateY(-20px) scale(1);
    border-radius: 42% 40% 38% 44% / 46% 42% 38% 40%;
}

.lambda__glyph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(160px, 28vh, 320px);
    color: var(--walnut);
    text-shadow:
        0 6px 0 rgba(196, 180, 160, 0.45),
        0 14px 24px rgba(0,0,0,0.18);
    line-height: 1;
    transform: translateY(-2%);
}

.lambda__highlight-sweep {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 30% 30%,
                    rgba(255, 248, 240, 0.6) 0%,
                    rgba(255, 248, 240, 0.0) 30%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-30%);
    pointer-events: none;
}

.lambda.is-inflated .lambda__highlight-sweep {
    opacity: 0.15;
    animation: sweep 8s linear infinite;
}

@keyframes sweep {
    0%   { transform: translateX(-40%) rotate(-2deg); opacity: 0.10; }
    50%  { transform: translateX(40%)  rotate(2deg);  opacity: 0.20; }
    100% { transform: translateX(-40%) rotate(-2deg); opacity: 0.10; }
}

.lambda__shadow-pad {
    position: absolute;
    bottom: 4%;
    left: 18%;
    right: 18%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(90,74,58,0.35) 0%, rgba(90,74,58,0) 70%);
    filter: blur(8px);
    z-index: -1;
}

.hero__copy {
    max-width: 520px;
}

.hero__eyebrow {
    font-family: var(--font-head);
    color: var(--earth-dark);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 14px;
    margin: 0 0 18px;
}

.hero__headline {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(38px, 5vw, 72px);
    letter-spacing: 0.06em;
    line-height: 0.98;
    color: var(--walnut);
    margin: 0 0 18px;
    text-transform: uppercase;
}

.hero__sub {
    font-size: clamp(15px, 1.05vw, 17px);
    color: var(--earth-dark);
    max-width: 38ch;
    margin: 0 0 36px;
}

.hero__hint {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-head);
    color: var(--indigo);
    letter-spacing: 0.30em;
    font-size: 13px;
    text-transform: uppercase;
}

.hero__hint-line {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* ---------- Section heads ---------- */
.section-head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    row-gap: 6px;
    align-items: end;
    margin: 0 0 28px;
}

.section-head__index {
    font-family: var(--font-head);
    color: var(--gold);
    font-size: 22px;
    letter-spacing: 0.12em;
    grid-row: 1 / span 2;
    align-self: center;
    background: var(--grad-skin);
    box-shadow: var(--inflate-soft);
    border-radius: 14px;
    padding: 8px 14px;
}

.section-head__title {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 48px);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--walnut);
    margin: 0;
}

.section-head__sub {
    color: var(--earth-dark);
    margin: 0;
    max-width: 60ch;
}

.section-head--small .section-head__title {
    font-size: clamp(22px, 2.6vw, 32px);
}

/* ---------- People + sidebar ---------- */
.people {
    padding: 60px 0 80px;
    position: relative;
}

.people__grid {
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(0, 30fr);
    gap: clamp(24px, 3vw, 56px);
    align-items: start;
}

.people__column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    background: var(--grad-skin);
    border-radius: 28px;
    box-shadow: var(--inflate);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 20px;
    align-items: start;
    transform: translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition:
        transform 0.4s cubic-bezier(.2,1,.3,1),
        box-shadow 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-4px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    box-shadow: var(--inflate-hover);
}

.profile-card:active { transform: scale(0.98); }

.profile-card__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--grad-mid);
    box-shadow: var(--inflate-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 32px;
    color: var(--cream);
    letter-spacing: 0.06em;
}

.profile-card__avatar--A { background: linear-gradient(135deg, #FFF8F0 0%, #C4A060 100%); color: var(--walnut); }
.profile-card__avatar--B { background: linear-gradient(135deg, #FFF8F0 0%, #4A4A7A 100%); }
.profile-card__avatar--C { background: linear-gradient(135deg, #FFF8F0 0%, #A0B8D0 100%); color: var(--walnut); }
.profile-card__avatar--D { background: linear-gradient(135deg, #FFF8F0 0%, #8A7A6A 100%); }

.profile-card__name {
    font-family: var(--font-head);
    font-size: 28px;
    letter-spacing: 0.06em;
    margin: 0 0 4px;
    color: var(--walnut);
    text-transform: uppercase;
}

.profile-card__role {
    margin: 0 0 10px;
    color: var(--earth-dark);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-head);
}

.profile-card__bio {
    margin: 0 0 14px;
    color: var(--walnut);
}

.profile-card__chips {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-card__chips li {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--indigo);
    background: rgba(255, 248, 240, 0.7);
    box-shadow: var(--inflate-soft);
    padding: 4px 12px 2px;
    border-radius: 999px;
}

.profile-card__metrics {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.metric {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.metric__num {
    font-family: var(--font-head);
    font-size: 28px;
    color: var(--gold);
    letter-spacing: 0.04em;
    line-height: 1;
}

.metric__label {
    font-family: var(--font-head);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--earth-dark);
}

/* Sidebar */
.people__sidebar {
    position: sticky;
    top: 110px;
    background: var(--grad-skin);
    border-radius: 28px;
    box-shadow: var(--inflate);
    padding: 24px;
    overflow: hidden;
}

.trending {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trending__item {
    background: rgba(255, 248, 240, 0.7);
    box-shadow: var(--inflate-soft);
    border-radius: 18px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trending__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--inflate);
}

.trending__name {
    font-family: var(--font-code);
    font-size: 13px;
    color: var(--walnut);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trending__delta {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 0.10em;
    color: var(--indigo);
}

.trending__count {
    font-family: var(--font-head);
    font-size: 18px;
    color: var(--gold);
    letter-spacing: 0.04em;
}

.bubble-strip {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px dashed rgba(74, 74, 122, 0.25);
}

.bubble-strip span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(160, 184, 208, 0.5);
    background: radial-gradient(circle at 30% 30%, rgba(255,248,240,0.8), rgba(255,248,240,0.1) 40%, transparent 70%);
    animation: bubbleBob 4s ease-in-out infinite;
}
.bubble-strip span:nth-child(2) { animation-delay: 0.6s; }
.bubble-strip span:nth-child(3) { animation-delay: 1.2s; }
.bubble-strip span:nth-child(4) { animation-delay: 1.8s; }

@keyframes bubbleBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ---------- Showcase / featured projects ---------- */
.showcase {
    padding: 40px 0 80px;
}

.showcase__container {
    background: var(--grad-skin);
    border-radius: 32px;
    box-shadow: var(--inflate);
    padding: 28px;
    position: relative;
}

.showcase__container::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    border: 1px dashed rgba(74, 74, 122, 0.2);
    pointer-events: none;
}

.showcase__tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

.showcase__tab {
    background: rgba(255, 248, 240, 0.55);
    box-shadow: var(--inflate-soft);
    border-radius: 999px;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--walnut);
    font-family: var(--font-head);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-size: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.showcase__tab:hover {
    transform: translateY(-2px);
    box-shadow: var(--inflate);
}

.showcase__tab.is-active {
    background: var(--grad-mid);
    color: var(--cream);
    box-shadow: var(--inflate);
}

.showcase__tab.is-active .showcase__tab-stars {
    color: var(--cream);
}

.showcase__tab-name {
    font-family: var(--font-code);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
}

.showcase__tab-stars {
    font-family: var(--font-head);
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.04em;
}

.showcase__panels {
    position: relative;
    min-height: 360px;
}

.showcase__panel {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.showcase__panel.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.showcase__panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.showcase__panel-info h3 {
    font-family: var(--font-head);
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--walnut);
    margin: 0 0 12px;
}

.showcase__panel-desc {
    color: var(--earth-dark);
    margin: 0 0 18px;
}

.showcase__panel-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.showcase__panel-meta li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(138, 122, 106, 0.25);
}

.showcase__panel-meta span {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--earth-dark);
}

.showcase__panel-meta strong {
    font-weight: 500;
    color: var(--walnut);
    font-family: var(--font-code);
    font-size: 13px;
}

.showcase__code {
    background: var(--grad-mid);
    color: var(--walnut);
    border-radius: 22px;
    box-shadow: var(--inflate-soft),
                inset 1px 1px 4px rgba(0,0,0,0.05);
    padding: 22px 24px;
    font-family: var(--font-code);
    font-size: 13px;
    line-height: 1.75;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
    border: 1px solid rgba(255, 248, 240, 0.4);
}

.showcase__code .cm { color: var(--earth-dark); font-style: italic; }
.showcase__code .kw { color: var(--indigo); font-weight: 500; }
.showcase__code .ty { color: var(--gold); font-weight: 500; }

/* ---------- Events ---------- */
.events {
    padding: 40px 0 80px;
}

.events__rail-wrap {
    position: relative;
    margin-top: 24px;
}

.events__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 320px);
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 12px 6px 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--earth-dark) transparent;
}

.events__rail::-webkit-scrollbar { height: 6px; }
.events__rail::-webkit-scrollbar-thumb {
    background: var(--earth-dark);
    border-radius: 4px;
}
.events__rail::-webkit-scrollbar-track { background: transparent; }

.event-card {
    --card-bg: var(--grad-skin);
    background: var(--card-bg);
    border-radius: 28px;
    box-shadow: var(--inflate);
    padding: 22px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 300px;
    transition: transform 0.3s cubic-bezier(.2,1,.3,1), box-shadow 0.25s ease;
    color: var(--walnut);
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--inflate-hover);
}

.event-card:active { transform: scale(0.98); }

.event-card--sand   { --card-bg: linear-gradient(135deg, #FFF8F0 0%, #E8DDD0 100%); }
.event-card--mid    { --card-bg: linear-gradient(135deg, #FFF8F0 0%, #C4B4A0 100%); }
.event-card--cream  { --card-bg: linear-gradient(135deg, #FFFFFE 0%, #FFF8F0 100%); }
.event-card--walnut { --card-bg: linear-gradient(135deg, #C4B4A0 0%, #8A7A6A 100%); color: var(--cream); }
.event-card--walnut .event-card__loc,
.event-card--walnut .event-card__speaker { color: rgba(255,248,240,0.75); }
.event-card--indigo { --card-bg: linear-gradient(135deg, #FFF8F0 0%, #A0B8D0 60%, #4A4A7A 100%); color: var(--cream); }
.event-card--indigo .event-card__loc,
.event-card--indigo .event-card__speaker { color: rgba(255,248,240,0.85); }
.event-card--bubble { --card-bg: linear-gradient(135deg, #FFF8F0 0%, #A0B8D0 100%); }

.event-card__date {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    background: rgba(255,248,240,0.65);
    box-shadow: var(--inflate-soft);
    border-radius: 16px;
    padding: 10px 14px;
    width: fit-content;
}

.event-card__date strong {
    font-family: var(--font-head);
    font-size: 32px;
    color: var(--walnut);
    letter-spacing: 0.04em;
}

.event-card__date span {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--earth-dark);
    margin-top: 2px;
}

.event-card__title {
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.event-card__loc {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--earth-dark);
    margin: 0;
}

.event-card__desc {
    margin: 0;
    flex: 1;
    font-size: 14px;
}

.event-card__speaker {
    font-family: var(--font-head);
    font-size: 13px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--indigo);
    margin: 0;
}

.event-card--walnut .event-card__speaker,
.event-card--indigo .event-card__speaker {
    color: var(--cream);
}

.events__nav {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--grad-skin);
    box-shadow: var(--inflate);
    color: var(--walnut);
    font-family: var(--font-head);
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transform: translateY(-50%);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.events__nav:hover {
    box-shadow: var(--inflate-hover);
    transform: translateY(-50%) scale(1.05);
}

.events__nav:active { transform: translateY(-50%) scale(0.94); }

.events__nav--prev { left: -8px; }
.events__nav--next { right: -8px; }

/* ---------- Footer (deflated, contrast section) ---------- */
.footer {
    margin-top: 40px;
    background: var(--walnut);
    color: var(--sand);
    padding: 60px 32px 40px 80px;
    position: relative;
    z-index: 1;
}

.footer__inner {
    max-width: 1240px;
    margin: 0 auto;
}

.footer__title {
    font-family: var(--font-head);
    font-size: 28px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 24px;
    color: var(--cream);
}

.footer__cols {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
}

.footer__cols li {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer__cols strong {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--earth-mid);
    margin-bottom: 6px;
}

.footer__cols a {
    color: var(--sand);
    font-size: 14px;
}

.footer__cols a:hover { color: var(--cream); opacity: 1; }

.footer__small {
    font-family: var(--font-head);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--earth-mid);
    margin: 0;
    border-top: 1px solid rgba(232,221,208,0.18);
    padding-top: 18px;
}

/* ---------- Reveal helper ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,1,.3,1);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .hero__lambda-wrap { width: min(70vw, 420px); }
    .people__grid { grid-template-columns: 1fr; }
    .people__sidebar { position: relative; top: auto; }
    .showcase__panel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .main { padding-left: 64px; padding-right: 18px; }
    .vertical-logo { width: 44px; }
    .vertical-logo__chars { font-size: 18px; letter-spacing: 0.20em; }
    .scan-bar { padding-left: 56px; padding-right: 14px; }
    .pill {
        --pill-h: 46px;
        font-size: 14px;
        padding: 0 16px;
        gap: 8px;
    }
    .pill__count { font-size: 14px; min-width: 40px; padding: 1px 8px 0; }
    .footer { padding-left: 64px; padding-right: 18px; }
    .events__nav { display: none; }
}