:root {
    /* AICON'26 brand palette */
    --navy: #1b2468;
    --navy-deep: #12174a;
    --maroon: #7a2331;
    --maroon-deep: #5a1925;
    --gold: #eec13c;
    --gold-deep: #d3a520;
    --cream: #f3ecd9;
    --ink: #14141a;

    --ff-display: 'Anton', sans-serif;

    /* This page commits to one fixed brand look, not the template's auto light/dark.
       heading/paragraph colors are left at their framework default (inherit) so each
       section's own `color` (set below, per background) cascades correctly. */
    --bg-color: var(--cream) !important;
    --color: var(--ink) !important;
    /* framework default resolves this via light-dark(), which fights our fixed
       per-section palette below — force it to inherit the section's own color instead. */
    --paragraph-color: inherit !important;
    --link-color: var(--maroon) !important;
    --accent-color: var(--gold) !important;
}

/* No custom selection color existed anywhere — the browser default is a
   translucent highlight that leaves the text's own color untouched, which
   reads fine on a flat background but nearly disappears over the textured/
   layered backgrounds used throughout this site (halftone dots, the hero
   graphic, etc.), since the underlying art keeps showing through. An
   opaque, on-brand fill guarantees readable contrast everywhere. */
::selection {
    background-color: var(--maroon);
    color: var(--cream);
}

/* Mobile scroll smoothness. The JS "Smooth Scroll" preference is deliberately
   disabled on touch devices (see assets/js/modules/preference.js — it checks
   `pointer: fine`, since scroll-hijacking libraries fight native touch/kinetic
   scrolling rather than help it). What actually causes janky touch-scrolling
   here is the fixed, full-viewport navbar and its animated (translate/scale on
   `.scrolled`) inner bar repainting every frame instead of being composited on
   the GPU — promoting them to their own layer fixes that. */
body {
    -webkit-overflow-scrolling: touch;
}

#main-navbar,
#main-navbar .main-wrapper .main {
    will-change: transform;
}

/* generic viewport-trigger fade-in, used by any element carrying [data-vpt] */
[data-vpt] {
    opacity: 0;
    translate: 0 1rem;
    transition: opacity .6s, translate .6s;
}

[data-vpt].ivp {
    opacity: 1;
    translate: 0;
}

.btn--primary,
.btn--secondary,
.btn--ghost {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;

    &:hover,
    &:focus-visible {
        --bg: var(--maroon);
        --color: var(--cream);
        --border: 2px solid var(--maroon);
    }
}

.btn--primary {
    --bg: var(--gold);
    --color: var(--ink);
    --border: 2px solid var(--ink);
    font-family: var(--ff-monospace);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.btn--secondary {
    --bg: transparent;
    --color: var(--cream);
    --border: 2px solid var(--cream);
    font-family: var(--ff-monospace);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.btn--ghost {
    --bg: transparent;
    --color: var(--ink);
    --border: 2px solid var(--ink);
    font-family: var(--ff-monospace);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ribbon {
    display: inline-block;
    rotate: -3deg;
    padding: .25rem .75rem;
    font-family: var(--ff-monospace);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    background-color: var(--maroon);
    color: var(--cream);
}

.ribbon.gold {
    background-color: var(--gold);
    color: var(--ink);
}

/* ---------- Navbar: forced to brand navy regardless of scroll state ---------- */
#main-navbar {
    .brand-lockup {
        all: unset;
        display: inline-flex;
        align-items: center;
        cursor: pointer;

        .brand-lockup__img {
            display: block;
            height: 2.25rem;
            width: auto;
            scale: 1.15;
            transition: scale calc(var(--transition-dur, .6s) / 2);
        }
    }

    .start {
        .search-btn {
            border: none !important;
            background-color: transparent;
            color: var(--cream);
        }

        .search-input {
            background-color: transparent;
            border-color: #fff !important;
            color: var(--cream);
        }

        .search-input::placeholder {
            color: rgb(from var(--cream) r g b / .6);
        }
    }

    .main-wrapper .main {
        /* The framework's own 3-column grid (start/center/end) assumed a
           search control in .start and the brand mark in .center. Now that
           the brand mark lives in .start (search removed) and .center is
           empty, drop to 2 columns so .end doesn't inherit a stray gap where
           .center used to be. */
        grid-template-columns: max-content 1fr;
        color: var(--cream);

        &::after {
            opacity: 1 !important;
            background-color: var(--navy) !important;
            backdrop-filter: none !important;
        }

        .end .link__wrapper .link {
            color: var(--cream);
        }

        .menu-btn::before,
        .menu-btn::after {
            background-color: var(--cream) !important;
        }
    }

    .menu {
        background-color: var(--navy) !important;
        color: var(--cream);

        .left .link__wrapper .link {
            color: var(--cream);
        }

        .right {
            background-image: none !important;
            background-color: var(--maroon);

            .dec__wordmark {
                font-family: var(--ff-display);
                font-size: 12cqw;
                color: var(--cream);
                opacity: .5;
                rotate: -8deg;
                margin-top: 8rem;
            }
        }

        .bottom {
            color: rgb(from var(--cream) r g b / .7);

            #pre-btn {
                color: var(--cream);
            }
        }
    }
}

/* documentElement (not the navbar) gets `.scrolled` — see layx's scroll_state.js */
.scrolled #main-navbar .brand-lockup__img {
    scale: 1;
}

/* The framework shrinks the pill to flex-grow:0 (fit-content) once
   scrolled, relying on the original 3-column grid's two big gaps to stay
   visually wide even at intrinsic size. With only 2 columns (one gap)
   left after removing .center, fit-content collapsed to just
   "logo + hamburger" — a tiny floating box instead of a pill. Keep it
   growing so the .scrolled margin-inline:10% is what defines the width. */
.scrolled #main-navbar .main-wrapper .main {
    flex-grow: 1 !important;
}

/* The top bar is `position: fixed`, so it stays pinned above the menu's
   own link list. Hide the logo/search chrome while the menu is open; .end
   (the menu button, which already renders as the close "X" via .open's
   own CSS) stays visible so there's still an obvious way to close it. */
#main-navbar.open .main-wrapper .start,
#main-navbar.open .main-wrapper .center {
    opacity: 0;
    pointer-events: none;
}

/* The framework centers the link list vertically (`align-items: center`)
   with no scroll container — fine with a handful of links, but this
   project's nav grew to 10 entries this session, tall enough to overflow
   the viewport. Plain `center` + `overflow: visible` clips the overflow
   symmetrically off BOTH the top and bottom with no way to scroll to
   either — first/last links become completely unreachable, not just
   visually cut off. `safe center` keeps the centering when everything
   fits, but falls back to start-aligned + scrollable the moment it
   doesn't, so nothing is ever unreachable. */
#main-navbar .menu .left {
    align-items: safe center;
    overflow-y: auto;
}

/* ---------- Preferences / Search popovers ----------
   The shared framework styles these as a translucent, backdrop-blurred panel
   tinted by --smt-bg (a --surface-color derivative). --surface-color is only
   ever declared at :root, so its var(--bg-color) reference resolves once
   there and inherits unchanged everywhere else (see the note on .modules__section
   below) — it never picks up our cream brand color, and blurring that stale
   tint over whatever section sits behind the popover is what read as a muddy
   grey/black smear. Solid, un-blurred cream fixes both. */
.preference-menu,
.search-menu {
    --smt-bg: rgb(from var(--ink) r g b / .06);
    background-color: var(--cream) !important;
    backdrop-filter: none !important;
    color: var(--ink);

    .header .input__wrapper .search-input {
        background-color: #fff;
        color: var(--ink);
        border: 2px solid var(--ink);

        &:focus {
            outline: 2px solid var(--maroon);
            outline-offset: -2px;
        }
    }
}

/* ---------- Hero ---------- */
.hero__section {
    /* Structural sizing the base template supplied — lost when this file was fully
       rewritten, restored here since nothing else in the cascade sets it. */
    min-height: 100svh;
    /* The framework's own `section, .section` rule (layx/components/section/section.css)
       reads --padding-x/--padding-y to build its `padding` shorthand — feeding it here,
       rather than declaring `padding-inline`/`padding-block` ourselves, is what actually
       wins the cascade (a nested `&` selector in that rule outranks a plain class here).
       --edge-offset-x is that same rule's own gutter variable — reusing it keeps this
       section's content aligned with the footer's inner <layout>, which reads it too. */
    --padding-x: var(--edge-offset-x);
    position: relative;
    overflow-x: clip;
    /* `align-content: center` in the base template only works if this is a grid/flex
       box — force it explicitly, otherwise content sits flush under the fixed navbar. */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    background-color: var(--navy);
    color: var(--cream);

    /* halftone texture, purely decorative */
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1.5px);
        background-size: 14px 14px;
        mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
        pointer-events: none;
    }

    .hero__graphic {
        position: absolute;
        top: 50%;
        right: -8%;
        translate: 0 -50%;
        width: min(68vw, 62rem);
        aspect-ratio: 1;
        opacity: .9;
        pointer-events: none;

        @media (width < 1200px) {
            display: none;
        }
    }

    .wrapper {
        position: relative;
        z-index: 1;
    }

    .top_txt {
        /* Keeps a minimum clearance under the fixed navbar — the section's
           own vertical centering (min-height: 100svh + justify-content:
           center) isn't enough of a guarantee on shorter viewports. */
        display: inline-block;
        margin-top: clamp(4rem, 10vh, 6rem);
        margin-bottom: clamp(1.25rem, 3vh, 2rem);
    }

    .main__wrap {
        container-type: inline-size;
        position: relative;

        .heading {
            /* Shrink-wraps to the actual "AICON" glyphs (not the full row
               width) and becomes the positioning context for .yr-ribbon,
               so the ribbon can be pinned to the real bottom-right corner
               of the text rather than the line box's — inline flow put it
               at the bottom of the tallest thing on the line (this text
               itself), which read as floating below/right of the word
               instead of tucked into it. */
            display: inline-block;
            position: relative;
            font-family: var(--ff-display);
            /* was a flat 9.5cqw that got knocked down to 6cqw at >=1200px —
               that second step is what made laptop/desktop widths look sparse.
               A clamp scales smoothly and keeps a big, confident floor/ceiling
               at every width instead of dropping back down on larger screens. */
            font-size: clamp(4rem, 11cqw, 10rem);
            line-height: .85;
            margin: 0;

            .second {
                color: var(--gold);
            }
        }

        /* Pinned to the bottom-right corner of the "AICON" text itself,
           overlapping slightly onto "N" — matches the real logo mark. */
        .yr-ribbon {
            position: absolute;
            right: -.35em;
            bottom: -.05em;
            display: inline-block;
            rotate: -4deg;
            background-color: var(--maroon);
            color: var(--cream);
            font-family: var(--ff-display);
            font-size: clamp(1.1rem, 2.4cqw, 1.85rem);
            padding: .15em .6em;
            box-shadow: .3rem .3rem 0 0 rgb(0 0 0 / .25);
        }

        .pra {
            margin-top: 2rem;
            max-width: 46ch;
            font-size: clamp(1.05rem, 1.8cqw, 1.4rem);

            span {
                opacity: .85 !important;
            }
        }

        .cta__wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 1.25rem;
            margin-top: 2.5rem;

            .btn {
                font-size: clamp(1rem, 1.3cqw, 1.15rem);
                padding: 1.1em 1.9em;
            }
        }

        .hero__stats {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(2rem, 5cqw, 3.5rem);
            margin-top: clamp(3rem, 7vh, 4.5rem);
            padding-top: clamp(1.5rem, 3vh, 2rem);
            border-top: 1px solid rgb(from var(--cream) r g b / .2);
        }

        .hero__stat {
            display: flex;
            flex-direction: column;
            gap: .35rem;
        }

        .hero__stat-num {
            font-family: var(--ff-display);
            font-size: clamp(1.75rem, 3.5cqw, 2.75rem);
            color: var(--gold);
            line-height: 1;
        }

        .hero__stat-label {
            font-family: var(--ff-monospace);
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            opacity: .7;
        }
    }
}

/* Shared section rhythm — see the note on .hero__section above for why --padding-x/
   --padding-y (not padding-inline/padding-block) is how this framework's generic
   `section, .section` rule needs to be fed. */
.about__section,
.seecs__section,
.modules__section,
.updates__section,
.how__section,
.partners__section,
.faq__section,
.about-page__section,
.modules-page__section,
.partners-page__section,
.faq-page__section,
.register-page__section,
.schedule-page__section,
.gallery-page__section,
.partner-apply-page__section {
    /* reuse the framework's own --edge-offset-x (same value the footer's inner
       <layout> already uses) so every section's content lines up with the footer's. */
    --padding-x: var(--edge-offset-x);
    --padding-y: clamp(3rem, 8vh, 5.5rem);
}

.cta__section {
    /* reuse the framework's own --edge-offset-x (same value the footer's inner
       <layout> already uses) so every section's content lines up with the footer's. */
    --padding-x: var(--edge-offset-x);
    --padding-y: clamp(2rem, 6vh, 3.5rem);
}

/* ---------- About ---------- */
.about__section {
    .partner__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .75rem;
        margin-top: 2rem;
        font-family: var(--ff-monospace);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .05em;

        .chip {
            border: 2px solid var(--ink);
            padding: .35rem .75rem;
        }
    }

    /* SEECS/NUST host info reads as a continuation of this same section, not
       a new one — no divider/border, and the heading matches the plain
       body-heading weight of the section's opening line above it instead of
       the bold uppercase display font used for actual new section titles
       elsewhere on the page (that mismatch alone read as "a new chapter"
       even with no divider). */
    .seecs__block {
        margin-top: 2rem;

        h3 {
            font-size: clamp(1.4rem, 2.6cqw, 1.85rem);
            font-weight: var(--heading-font-weight, 500);
            margin: 0 0 .75rem;
        }

        .pra {
            max-width: 60ch;
        }
    }

    .fact__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .75rem;
        margin-top: 1.5rem;
        font-family: var(--ff-monospace);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .05em;

        .chip {
            border: 2px solid var(--ink);
            padding: .35rem .75rem;
        }
    }
}

/* ---------- SEECS, NUST (the host) ---------- */
.seecs__section {
    .pra {
        max-width: 60ch;
    }

    .fact__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .75rem;
        margin-top: 2rem;
        font-family: var(--ff-monospace);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .05em;

        .chip {
            border: 2px solid var(--ink);
            padding: .35rem .75rem;
        }
    }
}

/* ---------- Modules ----------
   Reuses the framework's own .inventory__section/.item__wrapper/.item styling
   (layx/assets/css/base.css:115) verbatim — thumbnail/title/tag__wrapper/action__wrapper
   are untouched, only the brand skin is layered on here. Note: .tag/.action__btn
   normally get their background from --surface-color(-2), which is a var(--bg-color)
   formula resolved once at :root — inheritance carries the already-resolved (cream)
   value down, it does NOT recompute per-descendant, so overriding --bg-color locally
   has no effect here. Setting the backgrounds directly is what actually works. */
.modules__section {
    background-color: var(--navy);
    color: var(--cream);

    .item {
        background-color: var(--navy-deep);
    }

    .tag,
    .action__btn {
        background-color: var(--navy) !important;
    }
}

/* ---------- Updates ----------
   This is the framework's original .manifest__section CSS (git history:
   assets/css/pages/home.css, pre-AICON), restored verbatim — border-scale-in
   dividers, line-clamped titles, the responsive left/right→stacked layout at
   <1400px, all of it. Only the section's own background/text color is ours. */
.updates__section {
    background-color: var(--cream);
    color: var(--ink);

    .manifest__layout {

        @media (width < 1400px) {
            column-gap: 5%;
        }

        .divider {
            &::after {
                content: '';
                display: block;
                margin-inline: auto;
                border-left: 1px solid;
                width: 1px;
                height: 100%;
                scale: 1 0;
                transition: scale .6s;
                transform-origin: top;
            }

            .ivp & {
                &::after {
                    scale: 1;
                }
            }

            @media (width < 1400px) {
                display: none;
            }
        }

        .header__wrapper {
            margin-bottom: 2.5rem;
        }

        .item {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            color: inherit;
            pointer-events: none;

            .img, .title, .dec_link {
                pointer-events: initial;
            }

            .img {
                aspect-ratio: 16 / 9;
            }

            .title {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: clip;
                margin: 0;
            }

            .wrapper {
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .info__wrapper {
                margin-block: 1rem 0 !important;

                .date {
                    text-transform: uppercase;
                }
            }

            @media (width < 1400px) {
                &:not(:last-child), &:only-child {
                    padding-bottom: 4rem;
                }
            }
        }

        .left, .right {
            @media (width < 1400px) {
                display: contents;
            }
        }

        .left {
            .item {
                height: 100%;
            }
        }

        .right {

            @media (width >=1400px) {
                display: flex;
                flex-direction: column;
                gap: 4rem;

                .item {
                    position: relative;
                    flex-direction: row;

                    .img {
                        max-height: 150px;
                    }

                    &:not(:last-child) {
                        &::after {
                            content: '';
                            position: absolute;
                            inset: auto 0 -2rem;
                            border-top: 1px solid;
                            transition: scale .6s;
                            transform-origin: left;
                            scale: 0 1;
                        }

                        &:nth-child(2)::after {
                            transition-delay: .3s;
                        }

                        .ivp & {
                            &::after {
                                scale: 1;
                            }
                        }
                    }
                }
            }
        }

        .bottom__wrapper {
            display: flex;
            justify-content: center;
            padding-block: 3.75rem 0;
        }
    }
}

/* ---------- How it works ---------- */
.how__section {
    .step__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2.5rem;

        @media (width >=768px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .step__card {
        border: 2px solid var(--ink);
        padding: 1.25rem;

        .num {
            font-family: var(--ff-display);
            font-size: 1.75rem;
            color: var(--maroon);
        }

        .title {
            font-family: var(--ff-display);
            text-transform: uppercase;
            margin: .5rem 0 0;
        }

        .detail {
            opacity: .7;
            margin-top: .35rem;
        }
    }
}

/* ---------- Partners ---------- */
.partners__section {
    background-color: var(--maroon);
    color: var(--cream);

    .partner__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2.5rem;

        @media (width >=576px) {
            grid-template-columns: 1fr 1fr;
        }

        @media (width >=1200px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .partner__card {
        border: 2px solid rgb(from var(--cream) r g b / .4);
        padding: 1.25rem;
        text-align: center;

        .short {
            display: block;
            font-family: var(--ff-display);
            font-size: 1.4rem;
        }

        .full {
            display: block;
            margin-top: .35rem;
            font-size: .8rem;
            opacity: .8;
        }
    }

    .note {
        margin-top: 1.5rem;
        font-family: var(--ff-monospace);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        opacity: .6;
    }
}

/* ---------- FAQ ---------- */
.faq__section {
    max-width: 55rem;
    margin-inline: auto;

    /* Plain open/close, no reveal animation anywhere in this section —
       the vendored (unused) accordion.css animates ::details-content
       height, so this guards against that ever getting pulled in. */
    [accordion] {
        border: 2px solid var(--ink);
        margin-bottom: .75rem;
        padding: 1rem;
        transition: none !important;

        &::details-content {
            transition: none !important;
        }

        summary {
            cursor: pointer;
            font-family: var(--ff-display);
            text-transform: uppercase;
            list-style: none;

            &::after {
                transition: none !important;
            }
        }

        summary::-webkit-details-marker {
            display: none;
        }
    }
}

/* ---------- CTA banner ---------- */
.cta__section {
    background-color: var(--gold);
    color: var(--ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    .heading {
        font-family: var(--ff-display);
        text-transform: uppercase;
        margin: 0;

        span {
            color: var(--maroon);
        }
    }
}

/* ---------- Footer override ---------- */
footer[data-component="footer"] {
    background-color: var(--navy) !important;
    color: var(--cream);

    .footer__layout {
        .link__block_wrapper {
            border-color: rgb(from var(--cream) r g b / .2) !important;
        }

        .link {
            color: var(--cream);
        }
    }
}

/* ==========================================================================
   Standalone pages (About / Modules / Partners / FAQ / Register) — this
   stylesheet doubles as the site-wide brand sheet, loaded on every page,
   not just the home page.
   ========================================================================== */

/* Shared banner header at the top of every standalone page */
.page__header {
    --padding-x: var(--edge-offset-x);
    --padding-y: clamp(3.5rem, 10vh, 6rem);
    /* The navbar is `position: fixed` — it overlays the page rather than
       pushing content down, so it doesn't reserve any space of its own.
       --padding-y alone was too close to the navbar's actual height at
       some viewport sizes; forcing extra top clearance here (independent
       of the shared bottom padding) fixes that reliably. */
    padding-top: clamp(8rem, 20vh, 11rem) !important;
    min-height: 40vh;
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    background-color: var(--navy);
    color: var(--cream);

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1.5px);
        background-size: 14px 14px;
        mask-image: linear-gradient(to bottom, transparent, black 25%, black 90%, transparent);
        pointer-events: none;
    }

    .label {
        position: relative;
        z-index: 1;
    }

    h1 {
        position: relative;
        z-index: 1;
        font-family: var(--ff-display);
        text-transform: uppercase;
        font-size: clamp(2.5rem, 7cqw, 4.5rem);
        line-height: .95;
        margin: .5rem 0 0;
    }

    p {
        position: relative;
        z-index: 1;
        max-width: 60ch;
        margin-top: 1rem;
        font-size: clamp(1rem, 1.6cqw, 1.2rem);
        opacity: .9;
    }
}

/* ---------- About page ---------- */
.about-page__section {
    .story {
        max-width: 70ch;
        font-size: 1.1rem;
        line-height: 1.6;

        p+p {
            margin-top: 1.25rem;
        }
    }

    .pillar__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 3rem;

        @media (width >=768px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .pillar {
        border: 2px solid var(--ink);
        padding: 1.5rem;

        .num {
            font-family: var(--ff-display);
            font-size: 1.75rem;
            color: var(--maroon);
        }

        h3 {
            font-family: var(--ff-display);
            text-transform: uppercase;
            margin: .5rem 0 0;
        }

        p {
            margin-top: .5rem;
            opacity: .8;
        }
    }
}

.team__note {
    display: block;
    max-width: 60ch;
    margin-top: 2.5rem;
    font-family: var(--ff-monospace);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .55;
    border-left: 2px solid var(--ink);
    padding-left: 1rem;
}

/* ---------- Schedule page ---------- */
.schedule-page__section {
    .tba__note {
        max-width: 60ch;
        font-family: var(--ff-monospace);
        font-size: .85rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--maroon);
        border: 2px solid var(--maroon);
        padding: .75rem 1rem;
        display: inline-block;
    }

    .day__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2.5rem;

        @media (width >=768px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .day {
        border: 2px solid var(--ink);
        padding: 1.5rem;

        .num {
            font-family: var(--ff-display);
            font-size: 1.75rem;
            color: var(--maroon);
        }

        h3 {
            font-family: var(--ff-display);
            text-transform: uppercase;
            margin: .5rem 0 1.25rem;
        }

        .phase__list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: .9rem;
        }

        .phase {
            display: flex;
            justify-content: space-between;
            gap: .75rem;
            border-top: 1px solid rgb(from var(--ink) r g b / .15);
            padding-top: .9rem;

            &:first-child {
                border-top: none;
                padding-top: 0;
            }

            .phase__label {
                font-weight: 600;
            }

            .phase__time {
                font-family: var(--ff-monospace);
                font-size: .75rem;
                text-transform: uppercase;
                opacity: .6;
                white-space: nowrap;
            }
        }
    }
}

/* ---------- Gallery page ---------- */
.gallery-page__section {
    .tile__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 2.5rem;

        @media (width >=640px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (width >=1024px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .tile {
        aspect-ratio: 4 / 5;
        border: 2px dashed rgb(from var(--ink) r g b / .3);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1rem;

        span {
            font-family: var(--ff-monospace);
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            opacity: .45;
        }
    }
}

/* ---------- Ambassador / Partner application forms ----------
   Light-background pages, unlike the dark full-page typeform in
   register.css — same field shape, ink-on-cream instead of cream-on-navy. */
.apply-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 40rem;
    margin-top: 2.5rem;
}

.apply-form .field {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.apply-form .field.invalid {
    outline: 2px solid var(--maroon);
    outline-offset: 4px;
}

.apply-form label {
    font-family: var(--ff-monospace);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
}

.apply-form input,
.apply-form select,
.apply-form textarea {
    border: 2px solid rgb(from var(--ink) r g b / .3);
    background: none;
    color: var(--ink);
    padding: .75rem .9rem;
    font-family: inherit;
    font-size: 1rem;
}

.apply-form textarea {
    resize: vertical;
    min-height: 8rem;
}

.apply-form input:focus-visible,
.apply-form select:focus-visible,
.apply-form textarea:focus-visible {
    outline: none;
    border-color: var(--maroon);
}

.apply-form input.invalid,
.apply-form select.invalid,
.apply-form textarea.invalid {
    border-color: var(--maroon);
}

.apply-form .field__hint {
    font-family: var(--ff-monospace);
    font-size: .7rem;
    opacity: .5;
}

.apply-form__error {
    color: var(--maroon);
    font-family: var(--ff-monospace);
    font-size: .85rem;
    display: none;
}

.apply-form__error.show {
    display: block;
}

.apply-form__success {
    border: 2px solid var(--ink);
    padding: 1.5rem;
    font-family: var(--ff-monospace);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---------- Modules page (full detail) ---------- */
.modules-page__section {
    background-color: var(--navy);
    color: var(--cream);

    .module-full__grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: 2.5rem;
    }

    .module-full {
        display: grid;
        grid-template-columns: 1fr;
        border: 2px solid rgb(from var(--cream) r g b / .3);
        background-color: var(--navy-deep);

        @media (width >=900px) {
            grid-template-columns: 1fr 1fr;
        }

        .thumbnail {
            border-bottom: 2px solid rgb(from var(--cream) r g b / .3);

            .img {
                display: block;
                width: 100%;
                height: 100%;
                aspect-ratio: 16 / 9;
                object-fit: cover;
            }

            @media (width >=900px) {
                border-bottom: 0;
                border-right: 2px solid rgb(from var(--cream) r g b / .3);
            }
        }

        .body {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: .75rem;

            .num {
                font-family: var(--ff-monospace);
                color: var(--gold);
            }
        }

        .title {
            font-family: var(--ff-display);
            text-transform: uppercase;
            font-size: 1.75rem;
            margin: 0;
        }

        .tagline {
            color: var(--gold);
            margin: -.75rem 0 0;
        }

        .desc {
            opacity: .85;
        }

        .desc.price-range {
            font-family: var(--ff-monospace);
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            opacity: .7;
            margin-top: -.5rem;
        }

        .format__list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: .35rem;
            font-family: var(--ff-monospace);
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            opacity: .8;
        }

        .domain__chips {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;

            span {
                border: 1px solid rgb(from var(--cream) r g b / .3);
                padding: .3rem .6rem;
                font-family: var(--ff-monospace);
                font-size: .7rem;
                text-transform: uppercase;
            }
        }

        .judging {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            border-top: 1px solid rgb(from var(--cream) r g b / .2);
            padding-top: 1rem;

            .row {
                display: flex;
                align-items: center;
                gap: .75rem;
                font-family: var(--ff-monospace);
                font-size: .7rem;
                text-transform: uppercase;

                .label {
                    width: 42%;
                    flex-shrink: 0;
                    opacity: .75;
                }

                .bar {
                    flex-grow: 1;
                    height: 6px;
                    background-color: rgb(from var(--cream) r g b / .1);

                    span {
                        display: block;
                        height: 100%;
                        background-color: var(--gold);
                    }
                }

                .pct {
                    width: 2.5rem;
                    flex-shrink: 0;
                    text-align: right;
                    opacity: .75;
                }
            }
        }

        .action__wrapper {
            margin-top: auto;
            padding-top: .5rem;

            .action__btn {
                display: inline-block;
                font-family: var(--ff-monospace);
                font-size: .75rem;
                letter-spacing: .05em;
                text-transform: uppercase;
                padding: .9rem 1.75rem;
                background-color: var(--gold);
                color: var(--ink);
                transition: background-color .2s;

                &:hover {
                    background-color: var(--gold-deep);
                }
            }
        }
    }
}

/* ---------- Partners page ---------- */
.partners-page__section {
    .partner-full__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2.5rem;

        @media (width >=768px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .partner-full {
        border: 2px solid var(--ink);
        padding: 2rem;

        .short {
            display: block;
            font-family: var(--ff-display);
            font-size: 2rem;
            color: var(--maroon);
        }

        .full {
            display: block;
            margin-top: .35rem;
            font-family: var(--ff-monospace);
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            opacity: .6;
        }

        p {
            margin-top: 1rem;
            opacity: .85;
        }
    }
}

/* ---------- FAQ page ---------- */
.faq-page__section {
    max-width: 60rem;
    margin-inline: auto;

    [accordion] {
        border: 2px solid var(--ink);
        margin-bottom: .75rem;
        padding: 1rem;
        transition: none !important;

        &::details-content {
            transition: none !important;
        }

        summary {
            cursor: pointer;
            font-family: var(--ff-display);
            text-transform: uppercase;
            list-style: none;

            &::after {
                transition: none !important;
            }
        }

        summary::-webkit-details-marker {
            display: none;
        }
    }
}

/* ---------- Register page ---------- */
.register-page__section {
    .module-pick__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2.5rem;

        @media (width >=768px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .module-pick {
        border: 2px solid var(--ink);
        padding: 1.5rem;

        .num {
            font-family: var(--ff-monospace);
            color: var(--maroon);
        }

        h3 {
            font-family: var(--ff-display);
            text-transform: uppercase;
            margin: .35rem 0 0;
        }

        p {
            margin-top: .5rem;
            opacity: .75;
        }
    }

    .register-cta {
        margin-top: 2.5rem;
        border: 2px solid var(--ink);
        background-color: var(--gold);
        padding: 2rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;

        p {
            font-size: 1.05rem;
        }
    }

    /* ---------- Step-by-step registration form ---------- */
    .register-form {
        margin-top: 2.5rem;
        max-width: 52rem;
    }

    .form__steps {
        display: flex;
        list-style: none;
        margin: 0 0 2.5rem;
        padding: 0;

        li {
            flex: 1;
            padding-bottom: 1rem;
            border-bottom: 3px solid rgb(from var(--ink) r g b / .15);
            font-family: var(--ff-monospace);
            text-transform: uppercase;
            letter-spacing: .04em;
            font-size: .75rem;
            opacity: .5;
            transition: opacity .2s, border-color .2s;

            .n {
                display: block;
                font-family: var(--ff-display);
                font-size: 1.1rem;
                color: var(--maroon);
                margin-bottom: .15rem;
            }

            &+li {
                margin-left: 1rem;
            }

            &.active,
            &.done {
                opacity: 1;
                border-color: var(--gold-deep);
            }

            &.done .n {
                color: var(--gold-deep);
            }

            &.done {
                cursor: pointer;
            }
        }
    }

    .form__panel {
        h2 {
            font-family: var(--ff-display);
            text-transform: uppercase;
            font-size: 1.75rem;
            margin: 0;
        }

        .hint {
            margin-top: .4rem;
            opacity: .7;
        }
    }

    .field__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-top: 2rem;

        @media (width >=640px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: .4rem;

        label {
            font-family: var(--ff-monospace);
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            opacity: .8;

            .optional {
                opacity: .55;
                text-transform: none;
                letter-spacing: 0;
            }
        }

        input,
        select {
            border: 2px solid var(--ink);
            border-radius: 0;
            background-color: transparent;
            padding: .75rem .9rem;
            font-family: inherit;
            font-size: 1rem;
            color: var(--ink);

            &:focus-visible {
                outline: none;
                border-color: var(--gold-deep);
            }

            &.invalid {
                border-color: var(--maroon);
            }
        }
    }

    .module__pick__wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2rem;

        @media (width >=640px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .module__option {
        position: relative;

        input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }

        label {
            display: block;
            border: 2px solid var(--ink);
            padding: 1.1rem 1.4rem;
            cursor: pointer;
            transition: border-color .15s, background-color .15s;

            .num {
                display: block;
                font-family: var(--ff-monospace);
                color: var(--maroon);
                font-size: .8rem;
            }

            .name {
                display: block;
                font-family: var(--ff-display);
                text-transform: uppercase;
                font-size: 1.1rem;
                margin-top: .25rem;
            }
        }

        input:checked+label {
            border-color: var(--gold-deep);
            background-color: rgb(from var(--gold) r g b / .15);
        }

        input:focus-visible+label {
            outline: 2px solid var(--gold-deep);
            outline-offset: 2px;
        }

        input.invalid+label {
            border-color: var(--maroon);
        }
    }

    .teammates {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .teammate {
        border: 2px solid rgb(from var(--ink) r g b / .3);
        padding: 1.5rem;

        >.dec_meta {
            color: var(--maroon);
        }
    }

    .form__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 2.5rem;
    }

    .review__list {
        margin: 2rem 0 0;
        border-top: 2px solid var(--ink);

        div {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: .75rem 0;
            border-bottom: 1px solid rgb(from var(--ink) r g b / .15);
        }

        dt {
            font-family: var(--ff-monospace);
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            opacity: .6;
        }

        dd {
            margin: 0;
            font-weight: 600;
            text-align: right;
        }
    }

    .form__success {
        text-align: center;
        padding: 3rem 1.5rem;
        border: 2px solid var(--ink);

        .dec_meta {
            color: var(--maroon);
        }

        h2 {
            font-family: var(--ff-display);
            text-transform: uppercase;
            font-size: 2.25rem;
            margin: .75rem 0;
        }

        p {
            max-width: 45ch;
            margin: 0 auto;
            opacity: .8;
        }
    }

    .form__note {
        margin-top: 2rem;
        max-width: 52rem;
        font-family: var(--ff-monospace);
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        opacity: .6;
    }
}