:root {
    /* surface */
    --ce-bg: #000;
    --ce-bg-raised: #0a0708;
    --ce-line: rgba(255, 255, 255, .07);
    --ce-line-soft: rgba(255, 255, 255, .05);
    --ce-line-strong: rgba(255, 255, 255, .10);
    --ce-line-control: rgba(255, 255, 255, .09);
    /* ink */
    --ce-ink: #e8e4df;
    --ce-ink-2: #bdb5ad;
    --ce-ink-3: #8b837b;
    --ce-ink-4: #6b645d;
    --ce-ink-5: #5f5952;
    --ce-ink-6: #4a453f;
    --ce-count-active: #a49b93;
    /* identity — never interactive */
    --ce-brand: #d20a0a;
    --ce-mark: #c90000;
    /* interaction — brick */
    --ce-accent: #601818;
    --ce-accent-hover: #7a1e1e;
    --ce-accent-edge: rgba(192, 0, 0, .55);
    --ce-accent-edge-hi: rgba(192, 0, 0, .8);
    --ce-accent-label: #f0cdc7;
    --ce-accent-soft: #c9938c;
    --ce-accent-bright: #e0837a;
    --ce-nav-active: #f0cec8;
    --ce-glow: rgba(168, 56, 44, .34);
    --ce-glow-soft: rgba(168, 56, 44, .14);
    --ce-accent-rgb: 168, 56, 44;
    --ce-pinned-band: rgba(192, 0, 0, .05);
    --ce-focus: rgba(192, 0, 0, .6);
    --ce-row-hover: rgba(255, 255, 255, .02);
    /* type */
    --ce-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* metrics */
    --ce-rail: 220px;
    --ce-pad-x: 40px;
    /* the board: the mockup is a fixed-width panel, not a fluid page. Wider
       screens get sky on either side rather than stretched layout. */
    --ce-board: 1120px;
}

/* ---------- base ---------------------------------------------------- */

html {
    position: relative;
    min-height: 100%;
    background: #000;
}

body {
    margin: 0 0 0 0;
    min-height: 100vh;
    font-family: var(--ce-font);
    font-weight: 400;
    color: var(--ce-ink);
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

/* the sky: fixed behind everything, so it stays put while the board scrolls */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("../img/starfield.svg") center center / cover no-repeat, #000;
}

h1, h2, h3, h4, h5 {
    font-weight: 300;
    letter-spacing: .01em;
}

a {
    color: var(--ce-accent-soft);
    text-decoration: none;
}

    a:hover {
        color: var(--ce-accent-bright);
    }

::selection {
    background: rgba(192, 0, 0, .35);
}

:focus-visible {
    outline: 2px solid var(--ce-focus);
    outline-offset: 2px;
}

/* ---------- app shell ------------------------------------------------ */

/* The board. Carries the two red glows so they anchor to the panel's own
   corners the way they do on the handoff, instead of stretching to fit a
   landscape viewport. Radii are the board's pixel sizes, not percentages,
   so a tall page cannot smear them vertically either. */
.ce-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: var(--ce-board);
    margin: 0 auto;
    position: relative;
    border-left: 1px solid #1d1a17;
    border-right: 1px solid #1d1a17;
    background: radial-gradient(1056px 1018px at calc(100% - 194px) 68px, rgba(208, 10, 10, .26), rgba(208, 10, 10, 0) 55%), radial-gradient(792px 792px at 53px calc(100% - 23px), rgba(126, 6, 16, .30), rgba(126, 6, 16, 0) 62%), rgba(0, 0, 0, .91);
    box-shadow: 0 0 90px 30px rgba(0, 0, 0, .55);
}

.ce-main {
    flex: 1;
    padding-bottom: 40px;
}

.ce-main--full {
    padding-bottom: 0;
}

/* ---------- header --------------------------------------------------- */

.ce-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px var(--ce-pad-x);
    border-bottom: 1px solid var(--ce-line);
    position: sticky;
    top: 0;
    z-index: 30;
    background: radial-gradient(1056px 1018px at calc(100% - 194px) 68px, rgba(208, 10, 10, .26), rgba(208, 10, 10, 0) 55%), linear-gradient(rgba(0, 0, 0, .91), rgba(0, 0, 0, .91)), url("../img/starfield.svg") center center / cover no-repeat, #000;
    background-attachment: scroll, scroll, fixed, scroll;
}

.ce-header__left {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 13px;
    color: var(--ce-ink-3);
}

.ce-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    font-size: 13px;
    color: var(--ce-ink-3);
}

/* mark + wordmark: identity red, never a link colour */
.ce-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 30px;
    white-space: nowrap;
}

.ce-brand__lockup {
    height: 32px;
    width: auto;
    display: block;
    flex: none;
}

.ce-navlink {
    color: var(--ce-ink-3);
    padding: 6px 4px;
    border-radius: 20px;
    white-space: nowrap;
}

    .ce-navlink:hover {
        color: var(--ce-nav-active);
    }

    .ce-navlink.is-active {
        color: var(--ce-nav-active);
        padding: 6px 14px;
        background: radial-gradient(60% 120% at 50% 50%, var(--ce-glow), rgba(168, 56, 44, 0) 72%);
    }

.ce-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--ce-accent-edge);
    background: var(--ce-glow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ce-accent-soft);
    text-transform: uppercase;
    flex: none;
}

    .ce-avatar:hover {
        color: var(--ce-accent-bright);
    }

.ce-avatar--lg {
    width: 38px;
    height: 38px;
    font-size: 13px;
}

/* ---------- account menu (native <details>) -------------------------- */

.ce-menu {
    position: relative;
}

    /* the avatar is the summary, so strip the disclosure triangle */
    .ce-menu > summary {
        cursor: pointer;
        list-style: none;
    }

        .ce-menu > summary::-webkit-details-marker {
            display: none;
        }

        .ce-menu > summary::marker {
            content: "";
        }

.ce-menu__list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 14px;
    background: var(--ce-bg-raised);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.ce-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    color: var(--ce-ink-3);
    padding: 9px 12px;
    border-radius: 9px;
    white-space: nowrap;
    cursor: pointer;
}

    .ce-menu__item:hover {
        background: rgba(192, 0, 0, .12);
        color: var(--ce-accent-label);
    }

/* ---------- dialog (native <dialog>) --------------------------------- */

.ce-dialog {
    padding: 0;
    width: calc(100% - 40px);
    max-width: 520px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 16px;
    background: var(--ce-bg-raised);
    color: var(--ce-ink);
}

    .ce-dialog::backdrop {
        background: rgba(0, 0, 0, .65);
    }

.ce-dialog__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ce-line);
}

.ce-dialog__title {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    color: var(--ce-ink);
    overflow-wrap: anywhere;
}

.ce-dialog__body {
    padding: 22px;
}

.ce-dialog__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 22px;
    border-top: 1px solid var(--ce-line);
}

@media (max-width: 520px) {
    .ce-dialog__foot form,
    .ce-dialog__foot .ce-btn {
        width: 100%;
    }
}

.ce-icon-btn {
    background: none;
    border: 0;
    color: var(--ce-ink-3);
    font-size: 15px;
    padding: 0;
    cursor: pointer;
}

    .ce-icon-btn:hover {
        color: var(--ce-nav-active);
    }

.ce-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    align-self: flex-start;
    color: var(--ce-ink-3);
    cursor: pointer;
}

    .ce-linkbtn:hover {
        color: var(--ce-nav-active);
    }

/* mobile drawer (CSS-only) */
.ce-burger,
.ce-drawer-toggle,
.ce-scrim {
    display: none;
}

.ce-drawer {
    display: none;
}

/* ---------- footer --------------------------------------------------- */

.ce-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px var(--ce-pad-x);
    border-top: 1px solid var(--ce-line);
    font-size: 11.5px;
    color: var(--ce-ink-5);
}

    .ce-footer a {
        color: var(--ce-ink-5);
    }

        .ce-footer a:hover {
            color: var(--ce-ink-3);
        }

/* ---------- forum: two-column frame ---------------------------------- */

.ce-forum {
    display: grid;
    grid-template-columns: var(--ce-rail) 1fr;
    min-height: 620px;
}

.ce-rail {
    border-right: 1px solid var(--ce-line-soft);
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.ce-rail__group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ce-eyebrow {
    font-size: 10px;
    letter-spacing: .26em;
    color: var(--ce-ink-5);
    text-transform: uppercase;
}

.ce-room {
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink-3);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

    .ce-room:hover {
        color: var(--ce-ink);
    }

    .ce-room.is-active {
        color: var(--ce-ink);
    }

.ce-room__count {
    color: var(--ce-ink-5);
}

.ce-room.is-active .ce-room__count {
    color: var(--ce-count-active);
}

.ce-rail__note {
    font-size: 13px;
    color: var(--ce-ink-4);
    line-height: 1.7;
}

.ce-forum__body {
    padding: 34px 44px 40px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
}

.ce-forum__title {
    margin: 0;
    font-size: 20px;
    font-weight: 300;
}

/* ---------- toolbar: search + sort + new thread ---------------------- */

.ce-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ce-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--ce-line-control);
    border-radius: 24px;
    padding: 6px 18px;
    min-height: 46px;
}

    .ce-search:focus-within {
        border-color: var(--ce-accent-edge);
    }

.ce-search__icon {
    font-size: 13px;
    color: var(--ce-ink-5);
}

.ce-search__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    color: var(--ce-ink);
    font-family: inherit;
    font-size: 13px;
}

    .ce-search__input::placeholder {
        color: var(--ce-ink-5);
    }

.ce-sort {
    background: none;
    border: 0;
    outline: none;
    color: var(--ce-ink-3);
    font-family: inherit;
    font-size: 12.5px;
    padding: 11px 4px;
    white-space: nowrap;
    cursor: pointer;
}

    .ce-sort:hover {
        color: var(--ce-ink);
    }

    .ce-sort option {
        background: var(--ce-bg-raised);
        color: var(--ce-ink);
    }

.ce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--ce-accent);
    color: var(--ce-accent-label);
    border: 1px solid var(--ce-accent-edge);
    border-radius: 24px;
    padding: 13px 22px;
    white-space: nowrap;
    cursor: pointer;
}

    .ce-btn:hover {
        background: var(--ce-accent-hover);
        border-color: var(--ce-accent-edge-hi);
        color: var(--ce-accent-label);
    }

.ce-btn--ghost {
    background: none;
    color: var(--ce-ink-3);
    border-color: rgba(255, 255, 255, .12);
}

    .ce-btn--ghost:hover {
        background: none;
        color: var(--ce-accent-label);
        border-color: var(--ce-accent-edge);
    }

.ce-btn--sm {
    padding: 8px 16px;
    font-size: 11px;
}

/* ---------- chips (tablet room filter) -------------------------------- */

.ce-chips {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
}

.ce-chip {
    font-size: 12px;
    font-weight: 300;
    border: 1px solid var(--ce-line-strong);
    color: var(--ce-ink-3);
    border-radius: 18px;
    padding: 7px 14px;
    white-space: nowrap;
}

    .ce-chip:hover {
        color: var(--ce-nav-active);
    }

    .ce-chip.is-active {
        color: var(--ce-ink);
        border-color: rgba(255, 255, 255, .28);
    }

/* ---------- thread list ---------------------------------------------- */

.ce-threads {
    display: flex;
    flex-direction: column;
}

/* The negative inline margin lets the pinned row's band bleed to the
   column edges while the rows stay aligned with everything above. */
.ce-thread {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 20px;
    padding: 22px 14px;
    margin: 0 -14px;
    border-top: 1px solid var(--ce-line-soft);
}

    .ce-thread:hover {
        background: var(--ce-row-hover);
    }

        /* handoff is explicit: lift the title to white, introduce no accent */
        .ce-thread:hover .ce-thread__title {
            color: #fff;
        }

    .ce-thread--pinned {
        background: var(--ce-pinned-band);
    }

.ce-thread__main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.ce-thread__titleline {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* pinned dot and lock sit together, then the handoff's 12px before the title */
.ce-thread__marks {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
}

/* the one coloured thing in a row */
.ce-thread__pin {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ce-mark);
    flex: none;
}

/* locked is a mark, not a word — grey, so the pinned dot keeps its monopoly on
   colour. Bootstrap Icons' own bi-lock path (MIT), inlined as a mask: the glyph
   costs ~370 bytes in this file instead of a 130 KB icon font for one icon.
   Painted with a background-colour, so it still themes like the text near it. */
.ce-lock {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex: none;
    background-color: var(--ce-ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2M5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2M5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ce-thread__head {
    display: none;
    align-items: baseline;
    gap: 12px;
}

.ce-thread__title {
    font-size: 18px;
    font-weight: 300;
    color: var(--ce-ink);
    line-height: 1.35;
    text-wrap: pretty;
}

.ce-thread__excerpt {
    font-size: 13px;
    color: var(--ce-ink-3);
    line-height: 1.6;
    max-width: 440px;
    text-wrap: pretty;
    margin: 0;
}

.ce-thread__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--ce-ink-4);
    flex-wrap: wrap;
}

.ce-thread__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 12px;
    color: var(--ce-ink-4);
    text-align: right;
}

.ce-thread__replies {
    color: var(--ce-ink-2);
}

.ce-thread__room-mobile,
.ce-thread__time,
.ce-thread__meta-replies,
.ce-rail__note--inline {
    display: none;
}

.ce-empty {
    padding: 40px 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink-3);
    border-top: 1px solid var(--ce-line-soft);
}

.ce-empty--cell {
    padding: 32px 0;
    border-top: 0;
    text-align: center;
}

/* ---------- pagination ------------------------------------------------ */

.ce-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--ce-ink-6);
    text-transform: uppercase;
}

.ce-pager__link {
    color: var(--ce-ink-3);
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    padding: 0 10px;
}

    .ce-pager__link:hover {
        color: var(--ce-nav-active);
    }

    .ce-pager__link.is-active {
        color: var(--ce-nav-active);
        background: radial-gradient(60% 120% at 50% 50%, var(--ce-glow), rgba(168, 56, 44, 0) 72%);
    }

.ce-hint {
    text-align: center;
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--ce-ink-6);
    text-transform: uppercase;
}

/* ---------- mobile FAB bar ------------------------------------------- */

.ce-fab-bar {
    display: none;
}

/* ---------- responsive: board edge ----------------------------------- */

/* below the board width there is no sky either side, so drop the frame */
@media (max-width: 1120px) {
    .ce-shell {
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
}

/* ---------- responsive: tablet --------------------------------------- */

@media (max-width: 1024px) {
    :root {
        --ce-pad-x: 28px;
    }

    .ce-header {
        padding: 18px var(--ce-pad-x);
    }

    .ce-brand {
        padding: 0 20px;
    }

    .ce-brand__lockup {
        height: 28px;
    }

    .ce-forum {
        grid-template-columns: 1fr;
    }

    .ce-rail {
        display: none;
    }

    .ce-chips {
        display: flex;
    }

    .ce-rail__note--inline {
        display: block;
        padding-top: 4px;
    }

    .ce-forum__body {
        padding: 26px var(--ce-pad-x) 34px;
        gap: 22px;
    }

    .ce-thread {
        grid-template-columns: 1fr 130px;
        gap: 18px;
        padding: 20px 0;
    }

    .ce-thread__title {
        font-size: 17px;
    }
}

/* ---------- responsive: phone ---------------------------------------- */

@media (max-width: 720px) {
    :root {
        --ce-pad-x: 18px;
    }

    /* a phone viewport is close enough to a board that percentages hold here */
    .ce-shell {
        background: radial-gradient(120% 60% at 80% 4%, rgba(208, 10, 10, .24), rgba(208, 10, 10, 0) 60%), radial-gradient(90% 50% at 0% 100%, rgba(126, 6, 16, .28), rgba(126, 6, 16, 0) 65%), rgba(0, 0, 0, .90);
    }

    .ce-header {
        padding: 16px var(--ce-pad-x);
        /* the phone board's glow is authored in percentages of a box whose
           height this strip cannot know, so match its tint rather than its
           geometry — across 60px of bar the difference is not readable */
        background: radial-gradient(468px 500px at 80% 0, rgba(208, 10, 10, .24), rgba(208, 10, 10, 0) 60%), linear-gradient(rgba(0, 0, 0, .90), rgba(0, 0, 0, .90)), url("../img/starfield.svg") center center / cover no-repeat, #000;
    }

        .ce-header__left .ce-navlink,
        .ce-header__right .ce-navlink,
        .ce-header__right .ce-icon-btn {
            display: none;
        }

    .ce-brand {
        gap: 9px;
        padding: 0;
    }

    .ce-brand__lockup {
        height: 25px;
    }

    .ce-burger {
        display: inline-flex;
        align-items: center;
        font-size: 17px;
        color: var(--ce-ink-3);
        min-height: 44px;
        width: 44px;
        cursor: pointer;
    }

    .ce-avatar {
        width: 32px;
        height: 32px;
    }

    .ce-forum__body {
        padding: 0 0 8px;
        gap: 0;
    }

    .ce-forum__title {
        padding: 16px var(--ce-pad-x) 0;
    }

    /* toolbar becomes the mobile filter row */
    .ce-toolbar {
        padding: 8px var(--ce-pad-x);
        border-bottom: 1px solid var(--ce-line-soft);
    }

    .ce-search {
        border: 0;
        padding: 0;
        min-height: 44px;
    }

    .ce-search__icon,
    .ce-search__input {
        display: none;
    }

    .ce-toolbar .ce-btn {
        display: none;
    }

    /* Rooms reach the phone through the burger drawer, which already lists
       them 
    .ce-shell:not(.ce-shell--auth) .ce-chips {
        display: none;
    }

    /* signed out: no drawer, so keep the chips as one scrolling row */
    .ce-shell--auth .ce-chips {
        padding: 12px var(--ce-pad-x) 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .ce-shell--auth .ce-chips::-webkit-scrollbar {
            display: none;
        }

    .ce-thread {
        grid-template-columns: 1fr;
        margin: 0;
        gap: 12px;
        padding: 18px var(--ce-pad-x);
        border-top: 0;
        border-bottom: 1px solid var(--ce-line-soft);
    }

    .ce-thread__main {
        gap: 7px;
    }

    .ce-thread__head {
        display: flex;
        order: -1;
    }

    .ce-shell--fab {
        padding-bottom: 88px; /* clears the fixed search + compose bar */
    }

    /* metadata stays grey on phone too — the pinned dot is the only colour */
    .ce-thread__room-mobile {
        display: block;
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ce-ink-5);
        white-space: nowrap;
    }

    .ce-thread__time {
        display: block;
        margin-left: auto;
        font-size: 11.5px;
        color: var(--ce-ink-5);
        white-space: nowrap;
    }

    .ce-thread__title {
        font-size: 17.5px;
    }

    .ce-thread__excerpt {
        font-size: 13.5px;
    }

    .ce-thread__side {
        display: none;
    }

    .ce-thread__meta {
        gap: 10px;
        font-size: 12.5px;
    }

    .ce-thread__meta-replies {
        display: inline;
    }

    .ce-empty {
        padding: 40px var(--ce-pad-x);
    }

    .ce-pager,
    .ce-hint {
        padding: 22px var(--ce-pad-x);
    }

    .ce-rail__note {
        padding: 22px var(--ce-pad-x) 8px;
    }

    .ce-footer {
        justify-content: flex-start;
        padding: 8px var(--ce-pad-x) 24px;
        border-top: 0;
        font-size: 11.5px;
        color: var(--ce-ink-6);
    }

    /* floating search + new-thread bar */
    .ce-fab-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px var(--ce-pad-x) 22px;
        border-top: 1px solid var(--ce-line);
        background: linear-gradient(180deg, rgba(5, 4, 5, .75), var(--ce-bg) 40%);
    }

    .ce-fab-bar__search {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        border: 1px solid var(--ce-line-strong);
        border-radius: 26px;
        padding: 0 18px;
        font-size: 13.5px;
        color: var(--ce-ink-5);
    }

        .ce-fab-bar__search input {
            flex: 1;
            min-width: 0;
            background: none;
            border: 0;
            outline: none;
            color: var(--ce-ink);
            font-family: inherit;
            font-size: 13.5px;
        }

            .ce-fab-bar__search input::placeholder {
                color: var(--ce-ink-5);
            }

    .ce-fab {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--ce-accent);
        border: 1px solid var(--ce-accent-edge);
        color: var(--ce-accent-label);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 300;
        flex: none;
    }

        .ce-fab:hover {
            color: var(--ce-accent-label);
            background: var(--ce-accent-hover);
            border-color: var(--ce-accent-edge-hi);
        }

    /* drawer */
    .ce-drawer {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: calc(100% - 78px);
        max-width: 340px;
        z-index: 60;
        background: radial-gradient(90% 60% at 10% 6%, rgba(168, 56, 44, .22), rgba(168, 56, 44, 0) 60%), var(--ce-bg-raised);
        border-right: 1px solid rgba(255, 255, 255, .08);
        padding: 24px 22px;
        overflow-y: auto;
        transform: translateX(-102%);
        transition: transform .22s ease;
        display: flex;
        flex-direction: column;
        gap: 26px;
    }

    .ce-drawer-toggle:checked ~ .ce-drawer {
        transform: none;
    }

    .ce-drawer-toggle:checked ~ .ce-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(5, 4, 5, .6);
    }

    .ce-drawer__user {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 300;
        color: var(--ce-ink);
    }

    .ce-drawer__nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ce-drawer__link {
        font-size: 17px;
        font-weight: 300;
        color: #a49b93;
        min-height: 44px;
        line-height: 44px;
        padding: 0 12px;
        border-radius: 22px;
    }

        .ce-drawer__link.is-active {
            color: var(--ce-nav-active);
            background: radial-gradient(50% 120% at 30% 50%, rgba(168, 56, 44, .28), rgba(168, 56, 44, 0) 75%);
        }

    .ce-drawer__group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-top: 1px solid var(--ce-line);
        padding-top: 20px;
    }

    .ce-drawer__foot {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        border-top: 1px solid var(--ce-line);
        padding-top: 18px;
        font-size: 13.5px;
        color: var(--ce-ink-3);
    }

        .ce-drawer__foot a,
        .ce-drawer__foot button {
            color: var(--ce-ink-3);
            font-size: 13.5px;
        }
}

/* ============================================================
   Page components — thread pages, forms, cards, hero.
   Same vocabulary as the forum list: hairline rules instead of
   boxes, weight 300 headings, red kept for identity only.
   ============================================================ */

/* ---------- reading column ------------------------------------------- */

.ce-page {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 34px var(--ce-pad-x) 56px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.ce-page--wide {
    max-width: 1120px;
}

.ce-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

    .ce-back:hover {
        color: var(--ce-nav-active);
    }


.ce-page__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ce-page__title {
    margin: 0;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;
    text-wrap: pretty;
}

.ce-page__flags {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ce-flag {
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-page__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    color: var(--ce-ink-4);
}

.ce-page__lead {
    margin: 0;
    max-width: 60ch;
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink-3);
    line-height: 1.75;
}

.ce-rule {
    border: 0;
    border-top: 1px solid var(--ce-line-soft);
    margin: 0;
}

.ce-section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-section-title__count {
    letter-spacing: .1em;
    color: var(--ce-ink-6);
}

/* body copy written in a textarea — keep the author's line breaks */
.ce-prose {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    color: var(--ce-ink-2);
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

/* ---------- posts ----------------------------------------------------- */

.ce-posts {
    display: flex;
    flex-direction: column;
}

.ce-post {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--ce-line-soft);
}

.ce-post__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.ce-post__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.ce-post__author {
    font-size: 13.5px;
    font-weight: 300;
    color: var(--ce-ink);
}

.ce-post__time {
    font-size: 12px;
    color: var(--ce-ink-5);
}

.ce-post__actions {
    margin-left: auto;
    display: flex;
    gap: 14px;
}

.ce-post__action {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

    .ce-post__action:hover {
        color: var(--ce-accent-bright);
    }

.ce-post__body {
    font-size: 14px;
    line-height: 1.75;
}

/* ---------- forms ------------------------------------------------------ */

.ce-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ce-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ce-label {
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-input,
.ce-textarea {
    width: 100%;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--ce-line-strong);
    border-radius: 14px;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--ce-ink);
    outline: none;
}

.ce-textarea {
    border-radius: 16px;
    min-height: 160px;
    resize: vertical;
}

    .ce-input::placeholder,
    .ce-textarea::placeholder {
        color: var(--ce-ink-5);
    }

    .ce-input:focus,
    .ce-textarea:focus {
        border-color: var(--ce-accent-edge);
        background: rgba(255, 255, 255, .035);
    }

.ce-form__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ce-form__error {
    font-size: 12.5px;
    color: #d98a6a;
}

    .ce-form__error:empty {
        display: none;
    }

.ce-note {
    border: 1px solid var(--ce-line-strong);
    border-radius: 16px;
    padding: 18px 20px;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--ce-ink-3);
    line-height: 1.7;
}

.ce-note--locked {
    border-color: rgba(192, 0, 0, .28);
    color: var(--ce-ink-2);
}

/* ---------- cards ------------------------------------------------------ */

.ce-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ce-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ce-line-strong);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
}

    .ce-card:hover {
        border-color: rgba(255, 255, 255, .22);
    }

        .ce-card:hover .ce-card__title {
            color: #fff;
        }

.ce-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 22px;
}

.ce-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    color: var(--ce-ink);
    line-height: 1.35;
    text-wrap: pretty;
}

.ce-card__text {
    margin: 0;
    font-size: 13px;
    color: var(--ce-ink-3);
    line-height: 1.6;
    text-wrap: pretty;
}

.ce-card__when {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
    color: var(--ce-ink-2);
}

/* ---------- fact grid (detail pages) ---------------------------------- */

.ce-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 22px 28px;
    margin: 0;
}

.ce-fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ce-fact__value {
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink);
    overflow-wrap: anywhere;
}

.ce-media {
    width: 100%;
    border-radius: 18px;
    border: 1px solid var(--ce-line-strong);
    display: block;
}

.ce-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ce-line-strong);
}

    .ce-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* ---------- linked list (related threads) ----------------------------- */

.ce-links {
    display: flex;
    flex-direction: column;
}

.ce-link-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-top: 1px solid var(--ce-line-soft);
    font-size: 14.5px;
    font-weight: 300;
    color: var(--ce-ink);
}

    .ce-link-row:hover {
        color: var(--ce-nav-active);
    }

.ce-link-row__when {
    font-size: 12px;
    color: var(--ce-ink-5);
    white-space: nowrap;
}

/* ---------- hero ------------------------------------------------------- */

.ce-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
    padding: 110px var(--ce-pad-x) 120px;
}

.ce-hero__mark {
    font-size: 11px;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-hero__title {
    margin: 0;
    font-size: 52px;
    font-weight: 200;
    letter-spacing: .02em;
    line-height: 1.1;
}

.ce-hero__lead {
    margin: 0;
    max-width: 52ch;
    font-size: 15.5px;
    font-weight: 300;
    color: var(--ce-ink-3);
    line-height: 1.75;
    text-wrap: pretty;
}

.ce-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding-top: 6px;
}

/* ---------- page components: tablet ----------------------------------- */

@media (max-width: 1024px) {
    .ce-page {
        padding: 28px var(--ce-pad-x) 48px;
    }

    .ce-page__title {
        font-size: 26px;
    }

    .ce-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ce-hero {
        padding: 80px var(--ce-pad-x) 90px;
    }

    .ce-hero__title {
        font-size: 42px;
    }
}

/* ---------- page components: phone ------------------------------------ */

@media (max-width: 720px) {
    .ce-page {
        padding: 22px var(--ce-pad-x) 40px;
        gap: 22px;
    }

    .ce-page__title {
        font-size: 23px;
    }

    .ce-prose {
        font-size: 14.5px;
    }

    .ce-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ce-facts {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 20px;
    }

    .ce-post {
        gap: 12px;
        padding: 20px 0;
    }

    /* thumb-reachable full-width actions */
    .ce-form__actions {
        gap: 12px;
    }

        .ce-form__actions .ce-btn {
            flex: 1;
            min-height: 48px;
        }

    .ce-hero {
        padding: 64px var(--ce-pad-x) 72px;
        gap: 18px;
    }

    .ce-hero__title {
        font-size: 34px;
    }

    .ce-hero__lead {
        font-size: 14.5px;
    }

    .ce-hero__actions {
        width: 100%;
        flex-direction: column;
    }

        .ce-hero__actions .ce-btn {
            min-height: 48px;
        }
}

@font-face {
    font-family: 'Archivo Black';
    src: url('../fonts/archivo-black-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.ce-shell--bare {
    max-width: none;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    background: radial-gradient(110% 70% at 50% 0%, rgba(208, 10, 10, .24), rgba(208, 10, 10, 0) 58%), radial-gradient(90% 70% at 8% 100%, rgba(126, 6, 16, .26), rgba(126, 6, 16, 0) 62%), rgba(0, 0, 0, .91);
}

    .ce-shell--bare .ce-main {
        display: flex;
    }

.ce-gate {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 80px 40px 64px;
    text-align: center;
}

/* Sized by width so the 965x646 stacked artwork keeps its proportions;
   at 250px the mark inside it lands close to the 112px the separate mark
   used to be, with the wordmark below it as drawn. */
.ce-gate__lockup-img {
    width: min(250px, 62vw);
    height: auto;
    display: block;
}

.ce-gate__tagline {
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-gate__headline {
    margin: 0;
    max-width: 560px;
    font-size: 40px;
    font-weight: 200;
    line-height: 1.25;
    text-wrap: pretty;
}

.ce-gate__lede {
    margin: 0;
    max-width: 460px;
    font-size: 14.5px;
    color: var(--ce-ink-3);
    line-height: 1.8;
    text-wrap: pretty;
}

.ce-gate__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
}

.ce-gate__signin {
    font-size: 13px;
    color: var(--ce-ink-4);
}

.ce-btn--lg {
    padding: 15px 34px;
}

@media (max-width: 640px) {
    .ce-gate {
        padding: 56px 24px 48px;
        gap: 18px;
    }

    .ce-gate__lockup-img {
        width: min(196px, 62vw);
    }

    .ce-gate__headline {
        font-size: 30px;
    }
}

/* ============================================================
   Auth pages — register, sign in, pending.
   A brand-only header instead of the site nav: nothing to click
   away to while you are half-way through an account.
   ============================================================ */

.ce-shell--auth {
    max-width: none;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    background: radial-gradient(110% 70% at 50% 0%, rgba(208, 10, 10, .22), rgba(208, 10, 10, 0) 58%), rgba(0, 0, 0, .91);
}

    .ce-shell--auth .ce-main {
        display: flex;
    }

.ce-authbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 18px 34px;
    border-bottom: 1px solid var(--ce-line);
}

    /* the shared brand lockup, tightened for this bar */
    .ce-authbar .ce-brand {
        padding: 0;
        gap: 11px;
    }

.ce-authbar__lockup {
    height: 27px;
    width: auto;
    display: block;
}

.ce-auth {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 52px 34px 56px;
}

.ce-auth__form,
.ce-auth__col {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.ce-auth__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ce-auth__title {
    margin: 0;
    font-size: 30px;
    font-weight: 200;
    line-height: 1.2;
}

.ce-auth__lede {
    margin: 0;
    font-size: 14px;
    color: var(--ce-ink-3);
    line-height: 1.7;
    text-wrap: pretty;
}

    .ce-auth__lede strong {
        font-weight: 400;
        color: #d9d3cc;
    }

.ce-auth__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ce-auth__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ce-auth__label {
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

/* 16px is deliberate: anything smaller makes iOS Safari zoom on focus */
.ce-auth__input {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    color: var(--ce-ink);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 13px 14px;
}

    .ce-auth__input::placeholder {
        color: var(--ce-ink-5);
    }

    .ce-auth__input:focus {
        outline: none;
        border-color: var(--ce-accent-edge);
        background: rgba(192, 0, 0, .04);
    }

.ce-auth__pw {
    position: relative;
    display: flex;
    align-items: center;
}

    .ce-auth__pw .ce-auth__input {
        padding-right: 64px;
    }

.ce-auth__reveal {
    position: absolute;
    right: 12px;
    background: none;
    border: 0;
    padding: 4px;
    font-family: inherit;
    font-size: 12px;
    color: var(--ce-accent-soft);
    cursor: pointer;
}

    .ce-auth__reveal:hover {
        color: var(--ce-accent-bright);
    }

.ce-auth__hint {
    font-size: 12px;
    color: var(--ce-ink-4);
    line-height: 1.55;
}

.ce-auth__meter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 3px;
}

.ce-auth__track {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .09);
    overflow: hidden;
}

.ce-auth__fill {
    width: 0;
    height: 100%;
    background: #7e9a78;
    transition: width .18s ease;
}

.ce-auth__read {
    font-size: 11.5px;
    color: var(--ce-ink-3);
    white-space: nowrap;
}

.ce-auth__agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ce-ink-4);
    line-height: 1.6;
}

    .ce-auth__agree input {
        width: 15px;
        height: 15px;
        flex: none;
        margin: 1px 0 0;
        accent-color: var(--ce-accent);
    }

.ce-auth__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ce-btn--block {
    width: 100%;
    padding: 15px 0;
}

.ce-auth__alt {
    font-size: 12.5px;
    color: var(--ce-ink-4);
    text-align: center;
}

/* validation text — red is free for errors, per the colour rule */
.ce-auth__error {
    font-size: 12px;
    color: #e0837a;
    line-height: 1.5;
}

    .ce-auth__error:empty {
        display: none;
    }

/* --- sign in (18a): same furniture, a narrower column ------------------ */

.ce-auth--signin {
    padding: 44px 34px 48px;
}

    .ce-auth--signin .ce-auth__form {
        max-width: 400px;
    }

    .ce-auth--signin .ce-auth__actions {
        gap: 14px;
    }

.ce-auth__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* label on the left, "Forgot?" on the right, sharing a baseline */
.ce-auth__labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

    .ce-auth__labelrow a {
        font-size: 12px;
        letter-spacing: 0;
    }

.ce-auth__keep {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ce-ink-3);
    cursor: pointer;
}

    .ce-auth__keep input {
        width: 15px;
        height: 15px;
        flex: none;
        margin: 0;
        accent-color: var(--ce-accent);
    }

/* --- pending: what is left to do, and who is waiting on whom ----------- */

.ce-auth--pending {
    padding: 44px 34px 48px;
}

.ce-steps {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ce-line-control);
    border-radius: 12px;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ce-steps li {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        padding: 15px 16px;
    }

        .ce-steps li + li {
            border-top: 1px solid var(--ce-line);
        }

        /* the step being waited on */
        .ce-steps li.is-now {
            background: rgba(192, 0, 0, .06);
        }

.ce-step__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: none;
    margin-top: 1px;
    border: 1px solid rgba(255, 255, 255, .16);
}

.is-now .ce-step__dot {
    border-color: var(--ce-focus);
    background: var(--ce-accent);
}

.ce-step__txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .ce-step__txt b {
        font-size: 13.5px;
        font-weight: 400;
        color: var(--ce-ink-5);
    }

    .is-now .ce-step__txt b {
        color: var(--ce-ink);
    }

    .ce-step__txt span {
        font-size: 12px;
        color: var(--ce-ink-5);
        line-height: 1.5;
    }

    .is-now .ce-step__txt span {
        color: var(--ce-ink-3);
    }

.ce-tail {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

    .ce-tail p {
        margin: 0;
        font-size: 12.5px;
        color: var(--ce-ink-4);
        line-height: 1.6;
    }

.ce-tail__links {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 12.5px;
}

@media (max-width: 640px) {
    .ce-authbar {
        padding: 14px 20px;
        gap: 9px;
    }

    .ce-authbar__lockup {
        height: 23px;
    }

    .ce-auth {
        padding: 32px 20px 36px;
    }

    .ce-auth__form,
    .ce-auth__col {
        gap: 22px;
    }

    .ce-auth__title {
        font-size: 25px;
    }

    .ce-auth__lede {
        font-size: 13.5px;
    }

    .ce-auth__row {
        grid-template-columns: 1fr;
    }

    .ce-auth__input {
        padding: 15px 14px;
    }

    .ce-btn--block {
        font-size: 12.5px;
        padding: 17px 0;
        border-radius: 26px;
    }

    .ce-auth__agree input,
    .ce-auth__keep input {
        width: 17px;
        height: 17px;
    }

    .ce-auth--signin,
    .ce-auth--pending {
        padding: 32px 20px 36px;
    }

        .ce-auth--signin .ce-auth__title {
            font-size: 26px;
        }

    .ce-steps li {
        gap: 12px;
        padding: 14px;
    }

    .ce-tail__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
        font-size: 13px;
    }
}

/* ============================================================
   Account settings
   A horizontal tab row rather than the scaffold's vertical pill
   column: on a phone that column pushed every page a full screen
   down before you reached anything.
   ============================================================ */

.ce-page--narrow {
    max-width: 620px;
}

.ce-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ce-tabs__link {
    font-size: 13px;
    color: var(--ce-ink-3);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    padding: 8px 16px;
    white-space: nowrap;
}

    .ce-tabs__link:hover {
        color: var(--ce-ink);
        border-color: rgba(255, 255, 255, .24);
    }

    /* the scaffold's nav helper emits "active", not "is-active" */
    .ce-tabs__link.is-active,
    .ce-tabs__link.active {
        color: var(--ce-accent-label);
        background: var(--ce-accent);
        border-color: var(--ce-accent-edge);
    }

/* status message — replaces the bootstrap alert */
.ce-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 13px;
    color: var(--ce-ink-2);
    line-height: 1.6;
}

.ce-status--error {
    border-color: rgba(192, 0, 0, .4);
}

.ce-status__close {
    margin-left: auto;
    flex: none;
    background: none;
    border: 0;
    padding: 0 2px;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--ce-ink-5);
    cursor: pointer;
}

    .ce-status__close:hover {
        color: var(--ce-ink);
    }

/* a value the member cannot change here */
.ce-readonly {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink-3);
    border: 1px solid var(--ce-line-soft);
    border-radius: 14px;
    padding: 13px 16px;
    overflow-wrap: anywhere;
}

.ce-form__ok {
    font-size: 12.5px;
    color: var(--ce-ink-3);
}

/* --- panels ----------------------------------------------------------- */

.ce-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--ce-line-control);
    border-radius: 12px;
    padding: 26px 26px 24px;
}

/* destructive territory — the one place a true red is right */
.ce-panel--danger {
    gap: 18px;
    padding: 26px;
    border-color: rgba(168, 56, 44, .35);
    background: rgba(168, 56, 44, .05);
}

.ce-panel__head {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ce-panel__title {
    margin: 0;
    font-size: 19px;
    font-weight: 300;
}

.ce-panel__body {
    margin: 0;
    font-size: 13.5px;
    color: var(--ce-ink-3);
    line-height: 1.7;
    text-wrap: pretty;
}

.ce-panel__note {
    margin: 0;
    font-size: 12.5px;
    color: var(--ce-ink-4);
    line-height: 1.65;
}

.ce-panel__row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ce-meta {
    font-size: 12.5px;
    color: var(--ce-ink-4);
}

.ce-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13.5px;
    color: var(--ce-count-active);
    line-height: 1.6;
}

    .ce-list li {
        display: flex;
        gap: 11px;
    }

        .ce-list li::before {
            content: '→';
            color: var(--ce-accent-soft);
        }

.ce-btn--danger {
    background: transparent;
    color: var(--ce-accent-bright);
    border-color: rgba(192, 0, 0, .6);
}

    .ce-btn--danger:hover {
        background: rgba(192, 0, 0, .12);
        color: var(--ce-accent-bright);
        border-color: rgba(192, 0, 0, .6);
    }

@media (max-width: 640px) {
    .ce-panel,
    .ce-panel--danger {
        padding: 22px 20px;
    }

    .ce-panel__row .ce-btn {
        width: 100%;
        padding: 15px 0;
    }
}

/* ============================================================
   Admin. Full width, table-led, its own tab bar
   under the site header.
   ============================================================ */

.ce-adminnav {
    display: flex;
    gap: 26px;
    font-size: 13px;
    padding: 0 30px;
    border-bottom: 1px solid var(--ce-line);
    overflow-x: auto;
    scrollbar-width: none;
}

    .ce-adminnav::-webkit-scrollbar {
        display: none;
    }

.ce-adminnav__link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 0;
    color: var(--ce-ink-3);
    white-space: nowrap;
}

    .ce-adminnav__link:hover {
        color: var(--ce-ink);
    }

    .ce-adminnav__link.is-active {
        color: var(--ce-ink);
        box-shadow: inset 0 -2px 0 var(--ce-mark);
    }

.ce-count {
    font-size: 11px;
    background: var(--ce-accent);
    color: var(--ce-accent-label);
    border-radius: 9px;
    padding: 1px 7px;
}

.ce-admin {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 30px 30px 40px;
}

.ce-admin__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.ce-admin__title {
    margin: 0;
    font-size: 26px;
    font-weight: 200;
}

.ce-admin__lede {
    margin: 0;
    max-width: 560px;
    font-size: 13.5px;
    color: var(--ce-ink-3);
    line-height: 1.7;
    text-wrap: pretty;
}

/* --- overview --------------------------------------------------------- */

.ce-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ce-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--ce-line-control);
    border-radius: 12px;
    padding: 20px;
}

.ce-stat--now {
    border-color: rgba(192, 0, 0, .34);
    background: rgba(192, 0, 0, .06);
}

/* the whole tile is the tap target, not just the words inside it */
a.ce-stat {
    color: inherit;
    text-decoration: none;
}

    a.ce-stat--now:hover {
        background: rgba(192, 0, 0, .12);
        border-color: rgba(192, 0, 0, .5);
        text-decoration: none;
    }

.ce-stat__go {
    font-size: 13px;
    color: var(--ce-accent-soft);
}

    /* there is nothing to tap here, so do not borrow the link colour */
    .ce-stat__go.is-quiet {
        color: var(--ce-ink-4);
    }

a.ce-stat--now:hover .ce-stat__go {
    color: var(--ce-accent-bright);
}

.ce-stat__n {
    font-size: 32px;
    font-weight: 200;
    line-height: 1;
}

    /* nothing to act on — let the number recede rather than shout a 0 */
    .ce-stat__n.is-zero {
        color: var(--ce-ink-4);
    }

.ce-admin__feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ce-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.ce-feed {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ce-feed li {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px 0;
        border-top: 1px solid var(--ce-line-soft);
        font-size: 13.5px;
        color: var(--ce-count-active);
    }

.ce-feed__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    flex: none;
}

.ce-feed li.is-new {
    color: #d9d3cc;
}

    .ce-feed li.is-new .ce-feed__dot {
        background: var(--ce-mark);
    }

.ce-feed__what {
    flex: 1;
}

.ce-feed time {
    font-size: 12.5px;
    color: var(--ce-ink-5);
}

/* --- members table ---------------------------------------------------- */

.ce-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .ce-searchbar input[type=search] {
        flex: 1;
        min-width: 220px;
        font-family: inherit;
        font-size: 16px;
        color: var(--ce-ink);
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 10px;
        padding: 11px 14px;
    }

        .ce-searchbar input[type=search]::placeholder {
            color: var(--ce-ink-5);
        }

        .ce-searchbar input[type=search]:focus {
            outline: none;
            border-color: var(--ce-accent-edge);
            background: rgba(192, 0, 0, .04);
        }

.ce-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ce-filters__link {
    font-size: 12.5px;
    color: var(--ce-ink-3);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    padding: 8px 15px;
}

    .ce-filters__link:hover {
        color: var(--ce-ink);
    }

    .ce-filters__link.is-active {
        color: var(--ce-accent-label);
        background: var(--ce-accent);
        border-color: var(--ce-accent-edge);
    }

.ce-bulk {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border: 1px solid rgba(192, 0, 0, .34);
    border-radius: 10px;
    padding: 11px 16px;
    background: rgba(192, 0, 0, .06);
}

.ce-bulk__n {
    font-size: 13px;
    color: var(--ce-ink);
}

.ce-bulk__acts {
    flex: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ce-table {
    width: 100%;
    border-collapse: collapse;
}

    .ce-table th {
        text-align: left;
        font-size: 10.5px;
        letter-spacing: .18em;
        color: var(--ce-ink-5);
        font-weight: 400;
        padding: 0 6px 10px;
        border-bottom: 1px solid var(--ce-line-strong);
    }

    .ce-table td {
        padding: 13px 6px;
        border-bottom: 1px solid rgba(255, 255, 255, .055);
        vertical-align: middle;
    }

    .ce-table tr.is-selected td {
        background: rgba(192, 0, 0, .05);
    }

    .ce-table tr.is-off td {
        opacity: .55;
    }

    .ce-table tr.is-off .ce-who__id {
        text-decoration: line-through;
        text-decoration-color: rgba(255, 255, 255, .3);
    }

    .ce-table input[type=checkbox] {
        width: 14px;
        height: 14px;
        margin: 0;
        accent-color: var(--ce-accent);
    }

.ce-who {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ce-who__id {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.ce-who small {
    font-size: 12px;
    color: var(--ce-ink-5);
}

.ce-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ce-pill {
    font-size: 11.5px;
    color: var(--ce-ink-3);
    border: 1px solid var(--ce-line-strong);
    border-radius: 5px;
    padding: 3px 9px;
    white-space: nowrap;
}

.ce-pill--creator {
    color: #c9c1b9;
    border-color: rgba(255, 255, 255, .16);
}

.ce-pill--admin {
    color: var(--ce-accent-label);
    background: var(--ce-accent);
    border-color: rgba(192, 0, 0, .5);
}

.ce-pill--superadmin {
    color: var(--ce-ink);
    background: var(--ce-brand);
    border-color: var(--ce-accent-edge-hi);
}

.ce-pill--wait {
    color: var(--ce-accent-bright);
    background: rgba(192, 0, 0, .08);
    border-color: rgba(192, 0, 0, .4);
}

.ce-when {
    font-size: 12.5px;
    color: var(--ce-ink-3);
    white-space: nowrap;
}

.ce-table td.ce-act {
    text-align: right;
}

.ce-pager2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 12.5px;
    color: var(--ce-ink-4);
    flex-wrap: wrap;
}

    .ce-pager2 div {
        display: flex;
        gap: 8px;
    }

.ce-pager2__link {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 6px 13px;
    color: var(--ce-ink-4);
}

    .ce-pager2__link:hover {
        border-color: rgba(255, 255, 255, .24);
        color: var(--ce-ink);
    }

/* --- approvals -------------------------------------------------------- */

.ce-req {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 12px;
    padding: 24px;
}

.ce-req__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.ce-person {
    display: flex;
    gap: 14px;
}

    .ce-person .ce-avatar {
        width: 38px;
        height: 38px;
        font-size: 13px;
        background: var(--ce-accent);
        color: var(--ce-accent-label);
    }

.ce-person__who {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .ce-person__who b {
        font-size: 16px;
        font-weight: 300;
    }

    .ce-person__who span {
        font-size: 13px;
        color: var(--ce-ink-3);
    }

.ce-req__acts {
    display: flex;
    gap: 9px;
    flex: none;
}

.ce-facts--top {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--ce-line);
}

    .ce-facts--top .ce-fact__value {
        font-size: 13px;
        color: var(--ce-count-active);
    }

        .ce-facts--top .ce-fact__value.is-now {
            color: var(--ce-accent-bright);
        }

.ce-emptybox {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 22px 24px;
    font-size: 13px;
    color: var(--ce-ink-4);
}

.ce-btn--ghost-sm {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ce-ink);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    padding: 7px 14px;
}

    .ce-btn--ghost-sm:hover {
        background: transparent;
        color: var(--ce-ink);
        border-color: rgba(255, 255, 255, .32);
    }

/* review form inside a request card: note field and the three answers
   share a row on desktop, stack on narrow screens */
.ce-review {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--ce-line);
}

.ce-review__note {
    flex: 1;
    min-width: 240px;
}

    .ce-review__note .ce-input {
        font-size: 14px;
        padding: 11px 14px;
        border-radius: 10px;
    }

@media (max-width: 720px) {
    .ce-review {
        gap: 14px;
    }

    .ce-review__note {
        min-width: 100%;
    }

    .ce-review .ce-req__acts {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

        .ce-review .ce-req__acts .ce-btn {
            width: 100%;
            min-height: 44px;
        }
}

@media (max-width: 900px) {
    .ce-stats {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 820px) {
    .ce-adminnav {
        gap: 18px;
        padding: 0 20px;
    }

    .ce-admin {
        padding: 24px 20px 32px;
    }

    /* tablets keep the real table — just tighten it */
    .ce-table th,
    .ce-table td {
        padding: 11px 5px;
    }

    .ce-table .ce-who__id {
        font-size: 13px;
    }

    .ce-req__acts {
        width: 100%;
    }

        .ce-req__acts .ce-btn {
            flex: 1;
            min-width: 0;
        }
}

/* --- members table: one card per member on phones --------------------- */

@media (max-width: 720px) {
    .ce-table thead {
        display: none;
    }

    .ce-table tr {
        display: grid;
        grid-template-columns: 20px 1fr;
        gap: 7px 12px;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .055);
    }

    /* Every cell stacks in the second column. Without this the third cell
       auto-flows back into the 20px checkbox column and its pills spill
       across the cell beside it. */
    .ce-table td {
        border: 0;
        padding: 0;
        grid-column: 2;
        min-width: 0;
    }

        .ce-table td:first-child {
            grid-column: 1;
            grid-row: 1;
        }

        /* the header is hidden, so quiet cells say what they are */
        .ce-table td[data-label]:not(:empty)::before {
            content: attr(data-label);
            display: block;
            margin-bottom: 3px;
            font-size: 10px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--ce-ink-5);
        }

        .ce-table td.ce-act {
            text-align: left;
            padding-top: 4px;
        }

            /* a real tap target rather than a bare inline link */
            .ce-table td.ce-act .ce-linkbtn {
                display: inline-flex;
                align-items: center;
                min-height: 36px;
                padding: 0 14px;
                border: 1px solid rgba(255, 255, 255, .18);
                border-radius: 18px;
                font-size: 12.5px;
                color: var(--ce-ink);
            }

                .ce-table td.ce-act .ce-linkbtn:hover {
                    border-color: rgba(255, 255, 255, .32);
                }

    .ce-table tr.is-selected td {
        background: none;
    }

    /* the band would only paint behind each cell, not the row */
    .ce-table tr.is-selected {
        background: rgba(192, 0, 0, .05);
    }
}

@media (max-width: 520px) {
    /* Four stacked cards was most of a screen of scrolling for four numbers.
       The one that needs action becomes a banner; the rest read as one row. */
    .ce-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .ce-stat--lead {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: 52px;
        padding: 14px 17px;
        margin-bottom: 18px;
    }

        .ce-stat--lead .ce-stat__n {
            font-size: 22px;
        }

        /* pushed to the far edge so the banner reads label → count → action */
        .ce-stat--lead .ce-stat__go {
            margin-left: auto;
            flex: none;
        }

    .ce-stat:not(.ce-stat--lead) {
        /* count above its caption, with no card around it */
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 5px;
        padding: 14px 0;
        border: 0;
        border-top: 1px solid var(--ce-line);
        border-bottom: 1px solid var(--ce-line);
        border-radius: 0;
    }

        .ce-stat:not(.ce-stat--lead) .ce-stat__n {
            font-size: 22px;
        }

        .ce-stat:not(.ce-stat--lead) .ce-eyebrow {
            white-space: nowrap;
        }

        /* the qualifier does not fit in a third of a phone */
        .ce-stat:not(.ce-stat--lead) .ce-meta {
            display: none;
        }

    .ce-stat:not(.ce-stat--lead) + .ce-stat {
        padding-left: 14px;
        border-left: 1px solid var(--ce-line);
    }
}

/* ============================================================
   Bootstrap bridge — keeps not-yet-migrated pages legible
   on the dark shell. Remove a rule once its page is redesigned.
   ============================================================ */

.container, .container-fluid {
    color: var(--ce-ink);
}

.card {
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--ce-line);
    border-radius: 14px;
    color: var(--ce-ink);
}

.card-header, .card-footer {
    background: rgba(255, 255, 255, .02);
    border-color: var(--ce-line);
}

.text-muted {
    color: var(--ce-ink-3) !important;
}

.text-dark {
    color: var(--ce-ink) !important;
}

.bg-white, .bg-light {
    background: rgba(255, 255, 255, .03) !important;
    color: var(--ce-ink) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ce-ink);
    --bs-table-border-color: var(--ce-line);
    --bs-table-striped-color: var(--ce-ink);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-color: var(--ce-ink);
    --bs-table-hover-bg: rgba(255, 255, 255, .04);
}

.form-control, .form-select, .input-group-text {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--ce-line-strong);
    color: var(--ce-ink);
    border-radius: 10px;
}

    .form-control::placeholder {
        color: var(--ce-ink-5);
    }

    .form-control:focus, .form-select:focus {
        background: rgba(255, 255, 255, .04);
        border-color: var(--ce-accent-edge);
        color: var(--ce-ink);
        box-shadow: 0 0 0 .15rem rgba(192, 0, 0, .18);
    }

.form-select option {
    background: var(--ce-bg-raised);
    color: var(--ce-ink);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .15rem rgba(192, 0, 0, .25);
}

.btn-primary {
    --bs-btn-bg: var(--ce-accent);
    --bs-btn-border-color: var(--ce-accent-edge);
    --bs-btn-color: var(--ce-accent-label);
    --bs-btn-hover-bg: var(--ce-accent-hover);
    --bs-btn-hover-border-color: var(--ce-accent-edge-hi);
    --bs-btn-hover-color: var(--ce-accent-label);
    --bs-btn-active-bg: var(--ce-accent-hover);
    --bs-btn-active-border-color: var(--ce-accent-edge-hi);
    border-radius: 22px;
}

.btn-outline-primary, .btn-secondary, .btn-outline-secondary {
    border-radius: 22px;
}

.badge.bg-warning {
    background: rgba(192, 0, 0, .18) !important;
    color: var(--ce-accent-label) !important;
    font-weight: 400;
}

.dropdown-menu {
    background: var(--ce-bg-raised);
    border: 1px solid var(--ce-line-strong);
    border-radius: 12px;
}

.dropdown-item {
    color: var(--ce-ink-3);
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: rgba(192, 0, 0, .12);
        color: var(--ce-nav-active);
    }

.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--ce-ink-3);
    --bs-pagination-border-color: var(--ce-line-strong);
    --bs-pagination-hover-bg: rgba(192, 0, 0, .12);
    --bs-pagination-hover-color: var(--ce-accent-label);
    --bs-pagination-hover-border-color: rgba(192, 0, 0, .35);
    --bs-pagination-active-bg: var(--ce-accent);
    --bs-pagination-active-border-color: var(--ce-accent-edge);
    --bs-pagination-active-color: #0a0908;
    --bs-pagination-disabled-bg: transparent;
}

.border-top, .border-bottom {
    border-color: var(--ce-line) !important;
}

/* ============================================================
   Gateway / Exploration / Ars Libra — added for the mandala
   navigation, chamber reflections and cross-realm balance view.
   Built entirely from the tokens above; no new custom properties.
   ============================================================ */

/* ---------- gateway hub (Home, signed in) ----------------------------- */

.ce-gateway {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 72px var(--ce-pad-x) 100px;
}

.ce-gateway__title {
    margin: 0;
    font-size: 34px;
    font-weight: 200;
    line-height: 1.2;
}

.ce-gateway__lead {
    margin: 0;
    max-width: 46ch;
    font-size: 14.5px;
    font-weight: 300;
    color: var(--ce-ink-3);
    line-height: 1.75;
}

.ce-gateway__ring {
    position: relative;
    width: min(600px, 88vw);
    aspect-ratio: 1;
    margin: 36px auto 0;
}

.ce-gateway__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
}

    .ce-gateway__center img {
        width: 100%;
        display: block;
    }

.ce-gateway__node {
    position: absolute;
    /* --x / --y are computed server-side (plain trig, invariant-formatted)
       and passed in as percentages — no reliance on CSS runtime trig
       functions, which are not consistently available yet. */
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    width: 132px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 10px;
    border-radius: 16px;
    border: 1px solid var(--ce-line-strong);
    background: rgba(255, 255, 255, .02);
}

    .ce-gateway__node:hover {
        border-color: var(--ce-accent-edge);
        background: var(--ce-glow-soft);
    }

        .ce-gateway__node:hover .ce-gateway__node-name {
            color: #fff;
        }

.ce-gateway__node.is-forming {
    border-style: dashed;
    opacity: .72;
}

.ce-gateway__node-name {
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink);
}

.ce-gateway__node-tag {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--ce-ink-4);
}

@media (max-width: 720px) {
    .ce-gateway {
        padding: 48px var(--ce-pad-x) 64px;
    }

    .ce-gateway__title {
        font-size: 27px;
    }

    /* the ring math holds up fine down to phone width, but a full 8-node
       circle inside 88vw gets visually tight — fall back to a plain list,
       same pattern as the rest of the site's mobile fallbacks */
    .ce-gateway__ring {
        width: 100%;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .ce-gateway__center {
        display: none;
    }

    .ce-gateway__node {
        position: static;
        transform: none;
        width: 100%;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        text-align: left;
    }
}

/* ---------- exploration: chamber prompt ------------------------------- */

.ce-chamber__prompt {
    font-style: italic;
}

/* ---------- ars libra: pentagon chart ---------------------------------- */

.ce-arslibra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 12px 0 8px;
}

.ce-arslibra__chart {
    width: min(360px, 80vw);
    height: auto;
}

.ce-arslibra__ring {
    fill: none;
    stroke: var(--ce-line);
}

.ce-arslibra__axis {
    stroke: var(--ce-line);
}

.ce-arslibra__shape {
    fill: var(--ce-glow-soft);
    stroke: var(--ce-mark);
    stroke-width: 1.5;
}

.ce-arslibra__point {
    fill: var(--ce-mark);
}

.ce-arslibra__label {
    font-family: var(--ce-font);
    font-size: 8.5px;
    letter-spacing: .12em;
    fill: var(--ce-ink-4);
}

.ce-arslibra__summary {
    text-align: center;
    max-width: 46ch;
}

.ce-arslibra__summary p {
    margin: 0;
    font-size: 14px;
    color: var(--ce-ink-3);
    line-height: 1.7;
}

/* ---------- emergence: spiral phase tracker ---------------------------- */

.ce-spiral {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

.ce-spiral__step {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--ce-line-strong);
    font-size: 12.5px;
    font-weight: 300;
    color: var(--ce-ink-4);
    background: rgba(255, 255, 255, .02);
}

    .ce-spiral__step:hover {
        border-color: var(--ce-accent-edge);
    }

.ce-spiral__step-name {
    letter-spacing: .04em;
}

.ce-spiral__step.is-done {
    border-color: var(--ce-line-strong);
    color: var(--ce-ink-2);
}

.ce-spiral__step.is-current {
    border-color: var(--ce-accent-edge);
    background: var(--ce-glow-soft);
    color: #fff;
}

.ce-spiral__step.is-upcoming {
    border-style: dashed;
    opacity: .7;
}

/* ============================================================
   Offerings — creator gallery, profile & edit form.
   Everything below stays inside the site's normal ce- design
   language (dark / red-accent / hairline-rule) per the redesign
   brief — no separate gold/serif skin, and none of it is scoped
   under .ce-skin-deck.
   ============================================================ */

/* ---------- layout toggle (Curated Grid <-> Circle Constellation) ----- */

.ce-layout-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 999px;
}

.ce-layout-toggle__option {
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-ink-4);
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .ce-layout-toggle__option:hover {
        color: var(--ce-ink);
    }

    .ce-layout-toggle__option.is-active {
        color: var(--ce-accent-label);
        background: var(--ce-accent);
        border-color: var(--ce-accent-edge);
    }

        .ce-layout-toggle__option.is-active:hover {
            color: var(--ce-accent-label);
        }

/* ---------- tag chips (tagline descriptors) --------------------------- */

.ce-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ce-tag {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
    border: 1px solid var(--ce-accent-edge);
    border-radius: 999px;
    padding: 5px 12px;
    background: var(--ce-glow-soft);
    white-space: nowrap;
}

.ce-upload-preview {
    display: block;
    max-width: 240px;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--ce-line-strong);
    background: rgba(255, 255, 255, .03);
}

.ce-arc__media {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--ce-line-strong);
    display: block;
}

/* ---------- creative arc (numbered story sections) --------------------- */

.ce-arc {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ---------- edit form: checkbox rows ----------------------------------- */

.ce-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 300;
    color: var(--ce-ink-3);
}

    .ce-checkbox-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--ce-brand);
    }

/* ============================================================
   Conversations (formerly Forum): the Creative Journey.
   Its six Movements are plain rooms in the left rail now, sitting
   between All Conversations and My Conversations in one flat list
   and rendered through .ce-room like the rest of it — nothing here
   styles them. All this section still owns is the guiding question
   echoed back under the title once a Movement is open.
   ============================================================ */

.ce-movement-detail {
    max-width: 52ch;
    /* sits directly under the page title now, so it reads as part of
       the heading rather than as a caption under a centred nav */
    margin: -6px 0 0;
    padding-left: 14px;
    border-left: 1px solid var(--ce-accent-edge);
}

.ce-movement-detail__question {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 200;
    color: var(--ce-ink);
    text-wrap: pretty;
}

/* ---------- origin label (Movement · Origin, thread rows + pages) ------ */

.ce-thread__origin {
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--ce-ink-5);
    margin: 2px 0 0;
}

/* Where a new Conversation is about to land. Origin rides along as a
   hidden input and the Movement as a preselected radio, so this line is
   the only place the member can actually read the defaults back. Plain
   prose, not .ce-page__meta — that one is a flex row and would space
   every fragment out like separate chips. */
.ce-compose-context {
    margin: 0;
    max-width: 62ch;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ce-ink-4);
    text-wrap: pretty;
}

    .ce-compose-context b {
        font-weight: 400;
        color: var(--ce-accent-soft);
    }

/* ---------- Movement picker (required single-select, CreateThread) ----- */

.ce-movement-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.ce-movement-picker__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ce-movement-picker__option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 200px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
}

    .ce-movement-picker__option:hover {
        border-color: var(--ce-accent-edge);
    }

.ce-movement-picker__input:checked + .ce-movement-picker__option {
    border-color: var(--ce-accent-edge-hi);
    background: var(--ce-glow-soft);
}

.ce-movement-picker__input:focus-visible + .ce-movement-picker__option {
    outline: 2px solid var(--ce-focus);
    outline-offset: 2px;
}

.ce-movement-picker__name {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .1em;
    color: var(--ce-ink);
}

.ce-movement-picker__question {
    font-size: 12px;
    color: var(--ce-ink-4);
    line-height: 1.4;
}

/* ============================================================
   Meet Creators
   ============================================================ */

.ce-gallery {
    gap: 34px;
}

/* ---------- gallery masthead ------------------------------------------ */

/* Single column since the watermark beside the headline came out — the
   copy carries its own max-width, so it needs no second track to sit in. */
.ce-gallery__intro {
    display: block;
}

.ce-gallery__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 620px;
}

.ce-gallery__title {
    margin: 0;
    font-size: 40px;
    font-weight: 200;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-wrap: pretty;
}

.ce-gallery__rule {
    width: 110px;
    border: 0;
    border-top: 1px solid var(--ce-line-strong);
    margin: 0;
}

.ce-gallery__lede {
    margin: 0;
    max-width: 44ch;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--ce-ink-3);
    text-wrap: pretty;
}

.ce-gallery__more {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ---------- chamber controls ------------------------------------------ */

.ce-gallery__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.ce-gallery__chambers {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ce-chamber-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* The switch itself. Taken out of the flex flow so it doesn't open a gap
   between pills, but left focusable and hit-testable — this is a real radio
   group, it just wears labels. Never display:none, which would drop it out
   of the tab order and off the accessibility tree entirely. */
.ce-chamber-radio,
.ce-descriptors-toggle,
.ce-media-toggle,
.ce-more-toggle,
.ce-edswitch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ce-chamber-pill {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--ce-line-control);
    color: var(--ce-ink-3);
    font-size: 12.5px;
    letter-spacing: .06em;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .3s, color .3s, background .3s;
}

    .ce-chamber-pill:hover {
        color: var(--ce-ink);
        border-color: var(--ce-line-strong);
    }

.ce-chamber-radio:checked + .ce-chamber-pill {
    border-color: var(--ce-accent-edge);
    background: var(--ce-glow-soft);
    color: var(--ce-accent-label);
}

/* the radio is invisible, so its focus ring has to land on the pill */
.ce-chamber-radio:focus-visible + .ce-chamber-pill {
    outline: 2px solid var(--ce-focus);
    outline-offset: 2px;
}

.ce-gallery__note {
    font-size: 12.5px;
    color: var(--ce-ink-4);
}

.ce-gallery__paging {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ce-gallery__steps {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.ce-gallery__step {
    font-size: 12.5px;
    white-space: nowrap;
    color: var(--ce-accent-soft);
    cursor: pointer;
}

    .ce-gallery__step:hover {
        color: var(--ce-accent-bright);
    }

/* ---------- chamber banner (Admin > Chambers upload) ------------------- */

.ce-chamber-banner {
    position: relative;
    height: 128px;
    overflow: hidden;
    border: 1px solid var(--ce-line-strong);
    border-radius: 18px;
}

    .ce-chamber-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ce-chamber-banner__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, .35));
}

.ce-gallery__caption {
    align-self: center;
    font-size: 12.5px;
    color: var(--ce-ink-5);
}

/* ---------- the ring ---------------------------------------------------
   One square box; every position inside it is a percentage computed in
   the view (Views/Creator/Index.cshtml), because runtime trig in calc()
   still isn't dependable. --size is declared here so the spirit-light
   keyframes have a length to travel along.
   ---------------------------------------------------------------------- */

.ce-ring-wrap {
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.ce-ring {
    --size: min(700px, 92vw);
    position: relative;
    flex: none;
    width: var(--size);
    height: var(--size);
}

.ce-ring__orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64%;
    height: 64%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(var(--ce-accent-rgb), .3);
    border-radius: 50%;
    pointer-events: none;
}

.ce-ring__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 88%;
    height: 88%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--ce-accent-rgb), 0) 62%, rgba(var(--ce-accent-rgb), .13) 78%, rgba(var(--ce-accent-rgb), 0) 100%);
    animation: ce-veil 11s ease-in-out infinite;
}

.ce-ring__embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

    .ce-ring__embers i {
        position: absolute;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background: var(--ce-accent-bright);
        box-shadow: 0 0 7px 2px rgba(var(--ce-accent-rgb), .5);
        animation: ce-ember 15s ease-in-out infinite;
    }

/* the hub: hovering it wakes the whole composition */
.ce-ring__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.ce-ring__pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 320%;
    height: 320%;
    border-radius: 50%;
    border: 1px solid rgba(var(--ce-accent-rgb), .9);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18);
    animation: ce-ripple 3.4s cubic-bezier(.2, .6, .3, 1) infinite;
    animation-play-state: var(--play, paused);
}

    .ce-ring__pulse:nth-of-type(2) {
        animation-delay: 1.7s;
    }

/* The site mark holds the centre of the ring. It never turns — a logo
   reading as a spinner is worse than a still one — so the hub's whole
   response here is light: it brightens and picks up a glow, while the
   pulses, spokes and spirit lights carry the movement.
   The one thing it cannot borrow from the rosette is weight. That was
   hairlines in muted --ce-accent-soft; the mark is a solid shape in full
   brand red, so at full strength it shouted from the middle of a quiet
   ring. Holding it near half opacity brings it back to the rosette's
   presence — the red is untouched, just not all of it. */
.ce-ring__mark {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    opacity: .55;
    transition: filter .8s ease, opacity .8s ease;
    filter: drop-shadow(0 0 calc(var(--glow, 0) * 18px) rgba(var(--ce-accent-rgb), .6));
}

.ce-ring__hub:hover .ce-ring__mark {
    opacity: 1;
}

.ce-ring__hub-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 16px;
    font-size: 9.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ce-ink-4);
    white-space: nowrap;
}

.ce-ring__hub:hover {
    --glow: 1;
    --play: running;
}

/* spokes and spirit lights belong to the chamber, so they live in the set
   and are reached from the hub through a sibling selector */
.ce-ring__spokes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

    .ce-ring__spokes line {
        stroke: var(--ce-accent-soft);
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-dasharray: 102;
        stroke-dashoffset: 102;
        transition: stroke-dashoffset .9s cubic-bezier(.22, .61, .36, 1);
    }

.ce-ring__hub:hover ~ .ce-ring__set .ce-ring__spokes line {
    stroke-dashoffset: 0;
}

.ce-ring__spirit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--a, 0deg));
    pointer-events: none;
}

    .ce-ring__spirit i {
        position: absolute;
        margin: -3.5px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ce-accent-label);
        box-shadow: 0 0 12px 3px rgba(var(--ce-accent-rgb), .75);
        opacity: 0;
        animation: ce-spirit 2.4s cubic-bezier(.4, 0, .5, 1) infinite;
        animation-play-state: paused;
    }

.ce-ring__hub:hover ~ .ce-ring__set .ce-ring__spirit i {
    animation-play-state: running;
}

/* ---------- portraits on the ring -------------------------------------- */

.ce-ring__node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: 17%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(var(--ce-accent-rgb), .4);
    background: radial-gradient(70% 90% at 50% 20%, rgba(var(--ce-accent-rgb), .16), rgba(var(--ce-accent-rgb), 0) 70%), #050404;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-color .45s, box-shadow .45s;
}

    .ce-ring__node img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .ce-ring__node.is-featured {
        border-color: var(--ce-accent-edge);
    }

    .ce-ring__node:hover {
        transform: translate(-50%, -50%) scale(1.075);
        border-color: var(--ce-accent-edge-hi);
        box-shadow: 0 0 0 6px rgba(var(--ce-accent-rgb), .1), 0 18px 44px rgba(0, 0, 0, .6);
    }

.ce-ring__monogram {
    font-size: 30px;
    font-weight: 200;
    color: var(--ce-ink-5);
}

.ce-ring__label {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: 22%;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .ce-ring__label b {
        font-weight: 400;
        font-size: 12px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--ce-ink);
        line-height: 1.45;
    }

    .ce-ring__label em {
        display: none;
        font-style: normal;
        font-size: 9px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ce-ink-4);
        line-height: 1.65;
    }

.ce-gallery:has(#ce-descriptors:checked) .ce-ring__label em {
    display: block;
}

/* ---------- under the ring --------------------------------------------- */

.ce-ring-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ce-ring-foot__links {
    display: flex;
    gap: 26px;
}

.ce-ring-foot__toggle {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
    cursor: pointer;
}

    .ce-ring-foot__toggle:hover {
        color: var(--ce-accent-bright);
    }

.ce-descriptors-toggle:focus-visible + .ce-ring-foot__toggle {
    outline: 2px solid var(--ce-focus);
    outline-offset: 3px;
}

/* the label carries both words and shows whichever the checkbox isn't */
.ce-toggle__on {
    display: none;
}

.ce-gallery:has(#ce-descriptors:checked) .ce-toggle__off {
    display: none;
}

.ce-gallery:has(#ce-descriptors:checked) .ce-toggle__on {
    display: inline;
}

.ce-ring-foot__spec {
    margin: 0;
    max-width: 52ch;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ce-ink-5);
    text-wrap: pretty;
}

/* ---------- mosaic (the same chamber, laid flat) ----------------------- */

.ce-mosaic {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.ce-mosaic__tile {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--ce-line-strong);
    border-radius: 18px;
    background: var(--ce-bg-raised);
    grid-column: span var(--span, 2);
    height: var(--h, 300px);
    transition: border-color .45s;
}

    .ce-mosaic__tile:hover {
        border-color: var(--ce-accent-edge);
    }

.ce-mosaic__shot {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.ce-mosaic__tile:hover .ce-mosaic__shot {
    transform: scale(1.05);
}

.ce-mosaic__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ce-mosaic__shot--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(70% 90% at 50% 20%, rgba(var(--ce-accent-rgb), .16), rgba(var(--ce-accent-rgb), 0) 70%), rgba(255, 255, 255, .02);
}

.ce-mosaic__monogram {
    font-size: 62px;
    font-weight: 200;
    color: var(--ce-ink-6);
}

.ce-mosaic__scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, .5) 42%, rgba(0, 0, 0, 0));
}

.ce-mosaic__cap {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

    .ce-mosaic__cap b {
        font-size: 26px;
        font-weight: 200;
        line-height: 1.15;
        color: #f4f1ec;
        text-wrap: pretty;
    }

    .ce-mosaic__cap em {
        font-style: normal;
        font-size: 10px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--ce-accent-soft);
    }

    .ce-mosaic__cap > span {
        font-size: 14px;
        color: var(--ce-ink-2);
    }

/* ---------- closing band ----------------------------------------------- */

.ce-gallery__band {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 40px;
    border-top: 1px solid var(--ce-line);
}

.ce-gallery__band-copy {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .ce-gallery__band-copy b {
        font-size: 26px;
        font-weight: 200;
    }

    .ce-gallery__band-copy p {
        margin: 0;
        max-width: 46ch;
        font-size: 13.5px;
        font-weight: 300;
        line-height: 1.8;
        color: var(--ce-ink-3);
        text-wrap: pretty;
    }

/* ---------- creator page: hero -----------------------------------------
   Full-bleed to the board edges, so this page is not wrapped in .ce-page.
   The backdrop is whichever image the creator actually uploaded, blurred
   hard — the only wide source is an 840x560 arc shot, and the portrait is
   300x300, so neither survives being stretched across a hero sharp.
   ---------------------------------------------------------------------- */

.ce-creator {
    display: flex;
    flex-direction: column;
}

/* Copy left, the creator's photo down the right — two real columns rather
   than one full-bleed backdrop. The distinction matters: the widest thing a
   creator uploads is a 600x600 portrait, and stretching that across a
   1120px hero is a 2x upscale that goes to mush. Confined to a ~42% panel
   it renders at roughly its own size and stays sharp, while the veil below
   dissolves its left edge so it still reads as one continuous image. */
/* The photo holds the right 65%, and the copy is layered over it rather
   than sitting in a column beside it — which is what lets the picture be
   this wide without squeezing the name into the leftover third. The text
   only ever crosses the part of the photo the veil below has taken down
   to black, so it stays readable while the image still reads as full
   bleed. --ce-hero-photo is the one number to change. */
.ce-creator__hero {
    --ce-hero-photo: 65%;
    position: relative;
    min-height: 500px;
    overflow: hidden;
}

.ce-creator__hero-figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ce-hero-photo);
    margin: 0;
    overflow: hidden;
}

    .ce-creator__hero-figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 22%;
        display: block;
    }

/* Left edge into black — reaching far enough right to cover everything the
   copy overlaps — plus a touch along the bottom so the photo settles into
   the section under it instead of ending on a hard line. */
.ce-creator__hero-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, #000 0%, rgba(0, 0, 0, .88) 18%, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, 0) 68%),
        linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 26%);
}

.ce-creator__hero-inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    min-height: 500px;
    padding: 30px 0 52px var(--ce-pad-x);
    display: flex;
    flex-direction: column;
    gap: 26px;
    justify-content: center;
}

.ce-creator__id {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.ce-creator__name {
    margin: 0;
    font-size: 42px;
    font-weight: 200;
    line-height: 1.08;
    letter-spacing: -.01em;
    text-wrap: pretty;
}

.ce-creator__descriptor {
    margin: 0;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--ce-accent-soft);
    text-wrap: pretty;
}

.ce-creator__intro {
    margin: 0;
    max-width: 44ch;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.9;
    color: var(--ce-ink-2);
    white-space: pre-wrap;
    text-wrap: pretty;
}

/* Text only — the circled play glyph that used to sit beside this label is
   gone, so the colour shift is the whole hover now. */
.ce-creator__play {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ce-ink-2);
    cursor: pointer;
    transition: color .4s;
}

    /* the circled glyph: a play triangle while collapsed, a cross once the
       video is open, swapped by the same off/on spans as the label text */
    .ce-creator__play i {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .45);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-style: normal;
        color: var(--ce-ink);
        flex: none;
        transition: background .4s, border-color .4s;
    }

    .ce-creator__play:hover {
        color: var(--ce-accent-label);
    }

        .ce-creator__play:hover i {
            background: var(--ce-glow-soft);
            border-color: var(--ce-accent-edge);
        }

/* Collapsed until "Watch intro" is clicked — the label drives the
   .ce-media-toggle checkbox that opens this (Details.cshtml). */
.ce-creator__media {
    display: none;
    padding: 34px var(--ce-pad-x) 0;
}

.ce-media-toggle:checked ~ .ce-creator__media {
    display: block;
}

/* the label sits deep in the hero, so the state has to be read from the
   page root rather than reached with a sibling combinator */
.ce-creator:has(#ce-watch-intro:checked) .ce-toggle__off {
    display: none;
}

.ce-creator:has(#ce-watch-intro:checked) .ce-toggle__on {
    display: inline;
}

.ce-media-toggle:focus-visible ~ .ce-creator__hero .ce-creator__play {
    outline: 2px solid var(--ce-focus);
    outline-offset: 3px;
}

/* ---------- creator page: the arc on a timeline rail -------------------- */

.ce-arcrail {
    position: relative;
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 42px var(--ce-pad-x) 42px calc(var(--ce-pad-x) + 24px);
    border-top: 1px solid var(--ce-line);
}

.ce-arcrail__rail {
    position: absolute;
    left: calc(var(--ce-pad-x) + 12px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--ce-line-strong);
}

.ce-arcrail__dot {
    position: absolute;
    left: calc(var(--ce-pad-x) + 7px);
    top: 48px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--ce-accent-edge);
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ce-arcrail__dot i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--ce-accent-soft);
    }

.ce-arcrail__prompt {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ce-arcrail__num {
    font-size: 12.5px;
    letter-spacing: .14em;
    color: var(--ce-ink-5);
}

.ce-arcrail__title {
    margin: 0;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ce-arcrail__question {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--ce-ink-4);
    text-wrap: pretty;
}

/* Floated top-left so the answer wraps around it and then continues full
   width underneath. Its size comes from the flow's width, never from the
   row height — expanding "Read more" lengthens the text, and the picture
   must not grow or re-crop because of it. 3:2 matches the stored 840x560,
   so cover has nothing left to crop. */
.ce-arcrail__shot {
    float: left;
    width: 44%;
    max-width: 320px;
    margin: 4px 26px 14px 0;
    /* margins are mirrored on --flip below, so the gutter always falls on
       whichever side the text is on */
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--ce-line-strong);
    background: var(--ce-bg-raised);
}

    .ce-arcrail__shot img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ce-arcrail__shot--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ce-ink-6);
    background: radial-gradient(70% 90% at 50% 20%, rgba(var(--ce-accent-rgb), .14), rgba(var(--ce-accent-rgb), 0) 70%), rgba(255, 255, 255, .02);
}

/* Every other section puts its picture on the right instead, so reading
   down the arc the images tack side to side rather than stacking in one
   rigid column. Set from the view (Details.cshtml), which counts only the
   sections that actually render. */
.ce-arcrail--flip .ce-arcrail__shot {
    float: right;
    margin: 4px 0 14px 26px;
}

/* holds the float in, so the section's bottom border clears the picture */
.ce-arcrail__flow::after {
    content: "";
    display: block;
    clear: both;
}

.ce-arcrail__text {
    margin: 0;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.95;
    color: var(--ce-ink-2);
    white-space: pre-wrap;
    text-wrap: pretty;
}

/* A long answer is cut off behind a "Read more". Keyed off the toggle's
   presence rather than a class on the wrapper, so the view decides once
   whether a section is long enough to need one and the CSS follows.
   A height limit rather than line-clamp: the flow holds a floated figure as
   well as text, and -webkit-line-clamp only counts lines in a lone block.
   The mask feathers the cut instead of leaving a hard edge mid-sentence. */
.ce-arcrail__body:has(.ce-more-toggle) .ce-arcrail__flow {
    max-height: 320px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.ce-arcrail__body:has(.ce-more-toggle:checked) .ce-arcrail__flow {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.ce-arcrail__more {
    display: inline-block;
    margin-top: 12px;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
    cursor: pointer;
    transition: color .3s;
}

    .ce-arcrail__more:hover {
        color: var(--ce-accent-bright);
    }

.ce-more-toggle:focus-visible ~ .ce-arcrail__more {
    outline: 2px solid var(--ce-focus);
    outline-offset: 3px;
}

.ce-arcrail__body:has(.ce-more-toggle:checked) .ce-toggle__off {
    display: none;
}

.ce-arcrail__body:has(.ce-more-toggle:checked) .ce-toggle__on {
    display: inline;
}

/* ---------- creator page: work grid ----------------------------------- */

.ce-arcrail--works .ce-works {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
}

.ce-works__item {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 150px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 14px;
    background: radial-gradient(80% 100% at 30% 0%, rgba(var(--ce-accent-rgb), .18), rgba(var(--ce-accent-rgb), 0) 70%), var(--ce-bg-raised);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), border-color .45s;
}

    .ce-works__item:hover {
        transform: scale(1.012);
        border-color: var(--ce-accent-edge);
    }

    .ce-works__item.is-lead {
        grid-row: span 2;
        min-height: 306px;
    }

.ce-works__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .28));
}

.ce-works__cap {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

    .ce-works__cap b {
        font-size: 17px;
        font-weight: 300;
        line-height: 1.25;
        color: #f4f1ec;
        text-wrap: pretty;
    }

    .ce-works__cap span {
        font-size: 9.5px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--ce-accent-soft);
    }

.ce-works__item.is-lead .ce-works__cap {
    left: 22px;
    right: 22px;
    bottom: 22px;
}

    .ce-works__item.is-lead .ce-works__cap b {
        font-size: 22px;
    }

/* ---------- creator page: reflection ------------------------------------ */

.ce-reflect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 62px var(--ce-pad-x) 54px;
    border-top: 1px solid var(--ce-line);
    background: radial-gradient(90% 120% at 50% 0%, rgba(var(--ce-accent-rgb), .07), rgba(0, 0, 0, 0) 70%);
}

.ce-reflect__title {
    margin: 0;
    max-width: 22ch;
    font-size: 32px;
    font-weight: 200;
    line-height: 1.25;
    text-wrap: pretty;
}

.ce-reflect__lede {
    margin: 0;
    max-width: 44ch;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.9;
    color: var(--ce-ink-3);
    text-wrap: pretty;
}

.ce-reflect__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}

/* ---------- creator page: threads and pager ----------------------------- */

.ce-creator__threads {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 42px var(--ce-pad-x);
    border-top: 1px solid var(--ce-line);
}

    .ce-creator__threads .ce-links {
        width: 100%;
    }

.ce-creator__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px var(--ce-pad-x);
    border-top: 1px solid var(--ce-line);
    font-size: 12.5px;
}

.ce-creator__pager-count {
    color: var(--ce-ink-5);
}

/* ---------- motion ------------------------------------------------------ */

@keyframes ce-ripple {
    0% {
        transform: translate(-50%, -50%) scale(.18);
        opacity: 0;
    }

    18% {
        opacity: .5;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.04);
        opacity: 0;
    }
}

@keyframes ce-spirit {
    0% {
        transform: translateX(calc(var(--size) * .115)) scale(.5);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    70% {
        opacity: .9;
    }

    100% {
        transform: translateX(calc(var(--size) * .255)) scale(1.15);
        opacity: 0;
    }
}

@keyframes ce-ember {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    25% {
        opacity: .55;
    }

    50% {
        transform: translate(14px, -26px);
        opacity: .3;
    }

    75% {
        opacity: .5;
    }

    100% {
        transform: translate(-8px, -52px);
        opacity: 0;
    }
}

@keyframes ce-veil {
    0%, 100% {
        opacity: .2;
    }

    50% {
        opacity: .5;
    }
}

/* All of the above is atmosphere; none of it carries meaning, so it all
   goes when the viewer has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
    .ce-ring__halo,
    .ce-ring__embers i,
    .ce-ring__pulse,
    .ce-ring__spirit i {
        animation: none !important;
    }

    .ce-ring__spokes line,
    .ce-ring__node,
    .ce-ring__mark,
    .ce-mosaic__shot,
    .ce-works__item {
        transition: none !important;
    }

    .ce-ring__spokes line {
        stroke-dashoffset: 0;
    }
}

/* ---------- narrow screens ---------------------------------------------- */

@media (max-width: 900px) {
    .ce-gallery__title {
        font-size: 31px;
    }

    .ce-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ce-mosaic__tile {
        grid-column: span 2 !important;
    }

    .ce-mosaic__tile {
        height: 240px;
    }

    .ce-arcrail,
    .ce-arcrail--works {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 32px var(--ce-pad-x) 32px calc(var(--ce-pad-x) + 20px);
    }

    .ce-arcrail__rail {
        left: calc(var(--ce-pad-x) - 4px);
    }

    .ce-arcrail__dot {
        left: calc(var(--ce-pad-x) - 9px);
    }

    .ce-arcrail--works .ce-works {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    /* A 44% float leaves lines too short to read at this width, so the
       picture stops floating and sits above the answer at full width.
       --flip is named explicitly: its rule is more specific than a bare
       .ce-arcrail__shot, so without it the alternating sections would keep
       floating right even here. */
    .ce-arcrail__shot,
    .ce-arcrail--flip .ce-arcrail__shot {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 18px;
    }

    /* the clamp is measured against text beside a picture; with the picture
       stacked above it, the same height would hide almost all the words */
    .ce-arcrail__body:has(.ce-more-toggle) .ce-arcrail__flow {
        max-height: 420px;
    }

    .ce-works__item.is-lead {
        grid-row: auto;
        min-height: 200px;
    }

    /* No room to lay copy over a photo here, so the two separate: the
       picture becomes a band above the text, and its veil turns to fade
       downward into that text instead of leftward. */
    .ce-creator__hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .ce-creator__hero-figure {
        position: static;
        order: -1;
        width: 100%;
        height: 260px;
    }

    .ce-creator__hero-veil {
        background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, 0) 100%);
    }

    .ce-creator__hero-inner {
        max-width: none;
        padding: 26px var(--ce-pad-x) 42px;
        min-height: 0;
    }

    .ce-creator__name {
        font-size: 32px;
    }

    .ce-reflect__title {
        font-size: 25px;
    }
}

@media (max-width: 760px) {
    /* Same call as the Gateway ring: below tablet width a ring of six
       portraits stops being readable, so the chamber becomes a plain
       list instead of a squeezed circle. */
    .ce-ring {
        width: 100%;
        height: auto;
    }

    .ce-ring__orbit,
    .ce-ring__halo,
    .ce-ring__embers,
    .ce-ring__hub,
    .ce-ring__spokes,
    .ce-ring__spirit {
        display: none;
    }

    .ce-ring__set {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 16px 14px;
    }

    .ce-ring__node {
        position: static;
        transform: none;
        width: 58px;
        flex: none;
    }

        .ce-ring__node:hover {
            transform: none;
        }

    .ce-ring__label {
        position: static;
        transform: none;
        width: auto;
        text-align: left;
        align-items: flex-start;
        gap: 5px;
    }

    .ce-ring-foot__spec {
        text-align: left;
    }

}

@media (max-width: 600px) {
    .ce-mosaic {
        grid-template-columns: minmax(0, 1fr);
    }

    .ce-mosaic__tile {
        grid-column: span 1 !important;
    }

    .ce-gallery__controls,
    .ce-gallery__paging {
        gap: 14px;
    }
}

/* ============================================================
   Creator Edit page.
   Two columns: the form, and a sidebar that says how ready the
   page is and who can see it, with a bar at the foot holding the
   publish switch and Save. Everything here is namespaced ce-ed*
   — .ce-hint, .ce-chip, .ce-panel and .ce-count are all already
   taken by other screens.
   The form works with scripting off: every count, check and piece
   of visibility copy is rendered by the server on load, and
   creator-edit.js only keeps them current as you type.
   ============================================================ */

.ce-editor {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 36px;
    padding: 32px var(--ce-pad-x) 40px;
}

/* the red rise behind the page, over the starfield rather than replacing it */
.ce-editor::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(110% 70% at 50% 0%, rgba(208, 10, 10, .16), rgba(208, 10, 10, 0) 58%);
}

.ce-editor__form {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ce-editor__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* the editor's fields are tighter than the site's default: more of them are
   on screen at once here, and they sit inside panels that already carry a
   border, so the controls can afford to be quieter */
.ce-editor .ce-input,
.ce-editor .ce-textarea {
    border-radius: 9px;
    border-color: rgba(255, 255, 255, .14);
    padding: 13px 14px;
    font-size: 14.5px;
    font-weight: 400;
}

.ce-editor .ce-textarea {
    font-size: 14px;
    line-height: 1.75;
    min-height: 0;
}

    .ce-editor .ce-input:focus,
    .ce-editor .ce-textarea:focus {
        border-color: var(--ce-accent-edge-hi);
        background: rgba(208, 10, 10, .06);
    }

/* ---------- jump nav --------------------------------------------------- */

.ce-edjump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ce-edjump__link {
    font-size: 12px;
    color: var(--ce-ink-3);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    padding: 11px 16px;
}

    .ce-edjump__link:hover {
        color: var(--ce-ink);
        border-color: rgba(255, 255, 255, .26);
    }

/* :target is the one honest way to mark the section you jumped to without
   script — it lights up only once you have actually followed the link */
.ce-edpanel:target .ce-edpanel__title {
    color: var(--ce-accent-label);
}

/* ---------- panels ----------------------------------------------------- */

.ce-edpanel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 14px;
    padding: 24px clamp(18px, 3vw, 26px);
    background: rgba(255, 255, 255, .012);
    scroll-margin-top: 88px;
}

.ce-edpanel__head {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ce-edpanel__title {
    margin: 0;
    font-size: 19px;
    font-weight: 300;
}

.ce-edpanel__note {
    margin: 0;
    max-width: 60ch;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--ce-ink-3);
    text-wrap: pretty;
}

/* ---------- fields ----------------------------------------------------- */

.ce-edfield {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ce-edcols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.ce-edlabel {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ce-ink-3);
}

.ce-edlabel-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ce-edcount {
    font-size: 11.5px;
    color: var(--ce-ink-4);
    white-space: nowrap;
}

.ce-edhint {
    font-size: 12px;
    line-height: 1.6;
    color: var(--ce-ink-4);
    text-wrap: pretty;
}

.ce-edsub {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.ce-edok {
    font-size: 11px;
    letter-spacing: .1em;
    color: #7fae86;
    white-space: nowrap;
}

/* the handle field, with its address fixed in front of the part you own */
.ce-edprefix {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    padding: 0 14px;
}

    .ce-edprefix:focus-within {
        border-color: var(--ce-accent-edge-hi);
    }

.ce-edprefix__text {
    font-size: 13.5px;
    color: var(--ce-ink-5);
    white-space: nowrap;
}

.ce-editor .ce-edprefix .ce-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 13px 0;
}

    .ce-editor .ce-edprefix .ce-input:focus {
        background: transparent;
    }

/* ---------- tags ------------------------------------------------------- */

/* Without script this is a plain comma-separated field, which is what posts.
   creator-edit.js hides it, builds the chip box below, and writes back into
   it — so the form submits the same way either way. */
.ce-edtags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    padding: 10px 12px;
}

    .ce-edtags:focus-within {
        border-color: var(--ce-accent-edge-hi);
    }

.ce-edtags__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 6px 0 13px;
    font-size: 12.5px;
    color: var(--ce-accent-label);
    background: rgba(96, 24, 24, .7);
    border: 1px solid rgba(192, 0, 0, .45);
    border-radius: 16px;
}

.ce-edtags__x {
    width: 34px;
    height: 34px;
    margin-right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    color: var(--ce-accent-soft);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

    .ce-edtags__x:hover {
        color: #fff;
    }

.ce-editor .ce-edtags__input {
    flex: 1;
    min-width: 150px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 6px 2px;
    font-size: 13.5px;
}

    .ce-editor .ce-edtags__input:focus {
        background: transparent;
    }

/* ---------- portrait --------------------------------------------------- */

.ce-edportrait {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.ce-edportrait__col {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ce-eddrop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

    .ce-eddrop:hover,
    .ce-eddrop:focus-within {
        border-color: var(--ce-accent-edge);
    }

.ce-eddrop__img {
    flex: 0 0 auto;
    width: 112px;
    height: 84px;
    object-fit: cover;
    object-position: 50% 40%;
    border-radius: 8px;
    display: block;
}

.ce-eddrop__empty {
    flex: 0 0 auto;
    width: 112px;
    height: 84px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 200;
    color: var(--ce-ink-5);
    background: var(--ce-bg-raised);
}

.ce-eddrop__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ce-eddrop__name {
    font-size: 13.5px;
    color: var(--ce-ink);
}

.ce-eddrop__size {
    font-size: 12px;
    color: var(--ce-ink-4);
}

/* The real control, kept operable rather than hidden behind a fake button:
   it is the only way to choose a file without script. */
.ce-editor .ce-edfile {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--ce-ink-3);
    background: none;
    border-radius: 8px;
}

    .ce-edfile::file-selector-button {
        margin-right: 10px;
        padding: 7px 14px;
        font-family: inherit;
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ce-accent-label);
        background: var(--ce-accent);
        border: 1px solid var(--ce-accent-edge);
        border-radius: 18px;
        cursor: pointer;
    }

        .ce-edfile::file-selector-button:hover {
            background: var(--ce-accent-hover);
        }

.ce-edcrops {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.ce-edcrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

    /* repeats the object-fit of .ce-ring__node img — if that crop changes,
       change this one with it */
    .ce-edcrop img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        border: 1px solid rgba(255, 255, 255, .14);
    }

    .ce-edcrop span {
        font-size: 10.5px;
        letter-spacing: .12em;
        color: var(--ce-ink-4);
    }

/* ---------- creative arc ----------------------------------------------- */

.ce-edarc {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px 0;
    border-top: 1px solid var(--ce-line);
}

.ce-edarc__media {
    flex: 0 1 132px;
    min-width: 112px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ce-edarc__num {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
}

.ce-edarc__img {
    aspect-ratio: 4 / 3;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 9px;
    background-color: rgba(255, 255, 255, .02);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-edarc__body {
    flex: 1 1 260px;
    min-width: 0;
}

.ce-editor .ce-edarc__body .ce-textarea {
    min-height: 150px;
}

/* ---------- closing ---------------------------------------------------- */

.ce-edprompts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .ce-edprompts button {
        font-family: inherit;
        font-size: 12px;
        line-height: 1.4;
        text-align: left;
        color: var(--ce-ink-3);
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 15px;
        padding: 11px 14px;
        cursor: pointer;
    }

        .ce-edprompts button:hover {
            color: var(--ce-ink);
            border-color: rgba(255, 255, 255, .28);
        }

/* ---------- the sidebar ------------------------------------------------ */

.ce-edaside {
    position: sticky;
    top: 88px;
    flex: 0 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ce-edcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, .02);
}

.ce-edcard__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ce-edchecks {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ce-edcheck {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ce-ink-4);
}

.ce-edcheck__dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--ce-accent-label);
}

.ce-edcheck.is-done {
    color: var(--ce-count-active);
}

    .ce-edcheck.is-done .ce-edcheck__dot {
        border-color: var(--ce-accent-edge);
        background: var(--ce-accent);
    }

.ce-edvis {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ce-count-active);
}

/* ---------- the save bar ----------------------------------------------- */

/* Sticky rather than fixed: the board has edges, and a bar pinned to the
   viewport would run out past them. */
.ce-edsave {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px var(--ce-pad-x);
    border-top: 1px solid var(--ce-line-strong);
    background: rgba(0, 0, 0, .92);
}

.ce-edswitch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.ce-edswitch__track {
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 14px;
    padding: 3px;
    display: flex;
    justify-content: flex-start;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: background .25s ease, border-color .25s ease;
}

.ce-edswitch__knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ce-accent-label);
    display: block;
}

/* the checkbox itself is the state; the track is only its picture */
.ce-edswitch__input:checked ~ .ce-edswitch__track {
    background: var(--ce-accent);
    border-color: var(--ce-accent-edge);
    justify-content: flex-end;
}

.ce-edswitch__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .ce-edswitch__copy b {
        font-size: 13px;
        font-weight: 400;
        color: var(--ce-ink);
    }

    .ce-edswitch__copy span {
        font-size: 11.5px;
        color: var(--ce-ink-4);
    }

.ce-edswitch__input:checked ~ .ce-edswitch__copy .ce-edswitch__off,
.ce-edswitch__input:not(:checked) ~ .ce-edswitch__copy .ce-edswitch__on {
    display: none;
}

.ce-edsave__actions {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.ce-eddirty {
    font-size: 12px;
    color: var(--ce-ink-4);
    white-space: nowrap;
}

    .ce-eddirty.is-dirty {
        color: var(--ce-accent-soft);
    }

/* ---------- narrower ---------------------------------------------------- */

@media (max-width: 900px) {
    .ce-editor {
        gap: 26px;
        padding: 24px var(--ce-pad-x) 32px;
    }

    /* the sidebar is a summary of the form below it, so above the form is
       where it belongs once the two can no longer sit side by side — and its
       two cards turn to sit beside each other rather than stacking into a
       tall column the reader has to scroll past to reach the form */
    .ce-edaside {
        position: static;
        order: -1;
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ce-edcard {
        flex: 1 1 260px;
    }
}

@media (max-width: 600px) {
    .ce-edportrait,
    .ce-eddrop {
        align-items: flex-start;
    }

    .ce-edsave {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .ce-edsave__actions {
        justify-content: space-between;
    }
}

/* A stats screen is a column of cards rather than a form beside a
   sidebar, but it wears the same ground. .ce-editor::before above
   paints the red rise; this gives .ce-edpage the same one. */
.ce-edpage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 32px var(--ce-pad-x) 48px;
}

.ce-edpage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(110% 70% at 50% 0%, rgba(208, 10, 10, .16), rgba(208, 10, 10, 0) 58%);
}

.ce-edhead {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
}

.ce-edhead__text {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* ---------- selects ----------------------------------------------------- */

/* The native arrow can't be themed, so it goes and is drawn back inside
   the padding. The image is restated on :focus because .ce-editor
   .ce-input:focus sets the background shorthand at equal specificity —
   without the repeat, focusing a select would erase its chevron. */
.ce-editor .ce-edselect,
.ce-editor .ce-edselect:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238b837b' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 7px;
}

.ce-editor .ce-edselect {
    appearance: none;
    padding-right: 38px;
    cursor: pointer;
}

/* the drop-down list itself is painted by the OS, which ignores the page's
   colours — these two are the only properties it honours */
.ce-edselect option {
    background: #140808;
    color: var(--ce-ink);
}

/* ---------- a field that names someone rather than taking input --------- */

.ce-edwho {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    padding: 10px 14px;
}

.ce-edwho__name {
    font-size: 14.5px;
    color: var(--ce-ink);
}

.ce-edwho__tag {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--ce-ink-4);
    white-space: nowrap;
}

/* ---------- disclosure -------------------------------------------------- */

.ce-eddetails {
    border: 1px solid var(--ce-line-strong);
    border-radius: 14px;
    padding: 20px clamp(18px, 3vw, 26px);
    background: rgba(255, 255, 255, .008);
}

.ce-eddetails__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    list-style: none;
}

    /* Safari draws its own triangle through list-style; this is the only
       way to remove it. */
    .ce-eddetails__summary::-webkit-details-marker {
        display: none;
    }

.ce-eddetails__title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 15px;
    font-weight: 300;
    color: var(--ce-ink);
}

    .ce-eddetails__title span {
        font-size: 12.5px;
        color: var(--ce-ink-4);
    }

.ce-eddetails__more {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-ink-3);
    white-space: nowrap;
}

/* the word swaps with the state, so the control says what it will do */
.ce-eddetails[open] .ce-eddetails__more::after {
    content: "Close";
}

.ce-eddetails:not([open]) .ce-eddetails__more::after {
    content: "Open";
}

.ce-eddetails__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    padding-top: 20px;
}

/* ---------- validation -------------------------------------------------- */

.ce-ederror {
    font-size: 12px;
    line-height: 1.6;
    color: #e0857c;
}

    /* jquery-validation leaves the span in place and empty when a field is
       valid; without this the gap above it still shows. */
    .ce-ederror:empty {
        display: none;
    }

/* ---------- numbers ----------------------------------------------------- */

.ce-edstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.ce-edstat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 14px;
    padding: 22px 22px 20px;
    background: rgba(255, 255, 255, .014);
}

    .ce-edstat:hover {
        border-color: var(--ce-accent-edge);
    }

.ce-edstat__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.ce-edstat__value {
    font-size: 44px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -.01em;
}

.ce-edstat__delta {
    font-size: 12px;
    color: var(--ce-accent-soft);
    white-space: nowrap;
}

    .ce-edstat__delta.is-quiet {
        color: var(--ce-ink-5);
    }

.ce-edstat__note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--ce-ink-4);
    text-wrap: pretty;
}

/* ---------- key/value rows ---------------------------------------------- */

.ce-edrows {
    display: flex;
    flex-direction: column;
}

.ce-edrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid var(--ce-line);
    font-size: 13px;
}

    .ce-edrow:first-child {
        border-top: 0;
        padding-top: 0;
    }

.ce-edrow__key {
    color: var(--ce-ink-3);
}

.ce-edrow__val {
    color: var(--ce-ink);
    text-align: right;
}

    .ce-edrow__val.is-missing {
        color: var(--ce-ink-5);
    }

.ce-edbadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ce-accent-label);
    background: rgba(96, 24, 24, .7);
    border: 1px solid rgba(192, 0, 0, .45);
    border-radius: 16px;
    padding: 6px 12px;
    white-space: nowrap;
}

    .ce-edbadge.is-quiet {
        color: var(--ce-ink-3);
        background: rgba(255, 255, 255, .04);
        border-color: rgba(255, 255, 255, .14);
    }

/* two cards side by side, stacking when there is no room for both */
.ce-edsplit {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

    .ce-edsplit > * {
        flex: 1 1 320px;
        min-width: 0;
    }

.ce-edactions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* The star that marks a field as needed to announce. Small, quiet, and
   coloured rather than bold — it sits inside the label text, so it must
   not read as part of the word. */
.ce-edstar {
    color: var(--ce-accent-soft);
    font-size: 12px;
    vertical-align: super;
    line-height: 0;
}

/* ============================================================
   Gatherings index and past list. The page head reuses
   .ce-edpage / .ce-edhead from the editor block above — same
   shell, same red rise — so only the pieces that are actually
   new to this screen live here: the Upcoming/Past pills, the
   empty state, and the date-chip row the list is made of.
   Appended at the end of the file for the same reason as
   everything above it: the @media (max-width: 900px) blocks
   earlier can't out-order these at equal specificity.
   ============================================================ */

/* ---------- upcoming / past ---------------------------------------------- */

/* Two links rather than a script toggle: Upcoming and Past are separate
   actions on the controller, so the pill that looks selected is the page
   you are actually on. */
.ce-gtabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 22px;
    background: rgba(255, 255, 255, .02);
    align-self: flex-start;
}

.ce-gtab {
    font-size: 12px;
    color: var(--ce-ink-3);
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 10px 18px;
    white-space: nowrap;
}

    .ce-gtab:hover {
        color: var(--ce-ink);
    }

    .ce-gtab.is-active {
        color: var(--ce-accent-label);
        background: var(--ce-accent);
        border-color: var(--ce-accent-edge-hi);
    }

/* ---------- nothing on the calendar -------------------------------------- */

.ce-gempty {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--ce-line-strong);
    border-radius: 16px;
    padding: clamp(26px, 4vw, 44px);
    background: rgba(255, 255, 255, .014);
}

.ce-gempty__text {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ce-gempty__title {
    font-size: 24px;
    font-weight: 200;
    line-height: 1.3;
    margin: 0;
    max-width: 26ch;
    text-wrap: pretty;
}

.ce-gempty__lead {
    font-size: 14px;
    color: var(--ce-ink-3);
    line-height: 1.75;
    margin: 0;
    max-width: 46ch;
    text-wrap: pretty;
}

.ce-gempty__side {
    flex: 0 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid var(--ce-line);
    padding-left: clamp(18px, 3vw, 28px);
}

.ce-gempty__sidehead {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ce-gempty__sidehead span {
        font-size: 12.5px;
        color: var(--ce-ink-5);
        line-height: 1.6;
    }

/* ---------- start from a shape ------------------------------------------- */

.ce-gkind {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    /* pulled out by its own padding so the hover tint reaches the card
       edge without the row itself sitting proud of the column */
    margin: 0 -10px;
    border-radius: 9px;
    border-bottom: 1px solid var(--ce-line);
    color: inherit;
}

    .ce-gkind:hover {
        background: rgba(var(--ce-accent-rgb), .08);
        color: inherit;
    }

    .ce-gkind:last-of-type {
        border-bottom: 0;
    }

.ce-gkind__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ce-gkind__name {
    font-size: 13.5px;
    color: var(--ce-ink);
}

.ce-gkind__note {
    font-size: 12.5px;
    color: var(--ce-ink-5);
    line-height: 1.6;
}

.ce-gkind__arrow {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ce-accent-soft);
}

/* ---------- the list ----------------------------------------------------- */

.ce-glist {
    display: flex;
    flex-direction: column;
}

.ce-grow {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 20px 4px;
    border-top: 1px solid var(--ce-line-strong);
    color: inherit;
}

    .ce-grow:hover {
        background: rgba(255, 255, 255, .02);
        color: inherit;
    }

.ce-gdate {
    flex: 0 0 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 10px;
    padding: 10px 0;
}

.ce-gdate__month {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--ce-accent-soft);
}

.ce-gdate__day {
    font-size: 22px;
    font-weight: 200;
    color: var(--ce-ink);
}

.ce-grow__text {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ce-grow__title {
    font-size: 16px;
    color: var(--ce-ink);
}

.ce-grow__meta {
    font-size: 12.5px;
    color: var(--ce-ink-3);
}

.ce-grow__count {
    font-size: 12px;
    color: var(--ce-ink-5);
    white-space: nowrap;
}

@media (max-width: 720px) {
    /* The side column's left rule reads as a divider only while the two
       columns sit beside each other; stacked, it has to move to the top. */
    .ce-gempty__side {
        border-left: 0;
        border-top: 1px solid var(--ce-line);
        padding-left: 0;
        padding-top: 24px;
    }
}

/* A past gathering carries its recap into the list, under the meta line —
   quieter than the meta so the two do not read as one run-on sentence. */
.ce-grow__recap {
    font-size: 12.5px;
    color: var(--ce-ink-5);
    line-height: 1.65;
    text-wrap: pretty;
}

/* ============================================================
   The date and time fields on the gathering form.
   Appended at the end of the file for the same reason as
   everything above it: the @media (max-width: 900px) blocks
   earlier can't out-order these at equal specificity.
   ============================================================ */

/* Without color-scheme the browser paints its own calendar and clock parts
   for a light page: on this ground that means a near-black picker icon on a
   near-black field — the control looks like a plain text box — and a white
   popup calendar. Declaring dark is what makes the native picker usable, and
   it costs nothing; the field's own colours are still the ones set above. */
.ce-editor .ce-input[type="date"],
.ce-editor .ce-input[type="time"] {
    color-scheme: dark;
    cursor: pointer;
}

/* The icon is the only handle Chrome gives on its own. The script widens
   that to the whole field, but the icon still has to be findable without it. */
.ce-editor .ce-input[type="date"]::-webkit-calendar-picker-indicator,
.ce-editor .ce-input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: .5;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
}

.ce-editor .ce-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.ce-editor .ce-input[type="time"]:hover::-webkit-calendar-picker-indicator,
.ce-editor .ce-input[type="date"]:focus::-webkit-calendar-picker-indicator,
.ce-editor .ce-input[type="time"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
    background: rgba(var(--ce-accent-rgb), .3);
}

/* ---------- what you have chosen ----------------------------------------- */

.ce-edwhen {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Reads the two fields back in words, so a wrong day of the week or a
   mistyped year is visible without doing the arithmetic. */
.ce-edwhen__echo {
    font-size: 13px;
    color: var(--ce-ink-3);
    line-height: 1.7;
}

    .ce-edwhen__echo b {
        font-weight: 400;
        color: var(--ce-ink);
    }

    /* A date already gone by is allowed — a gathering that has happened can
       be written up after the fact — so this warns rather than blocks. */
    .ce-edwhen__echo.is-past {
        color: #e0a9a1;
    }

/* ---------- shortcuts ---------------------------------------------------- */

.ce-edquick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ce-edquick__label {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
    margin-right: 4px;
}

.ce-edquick__btn {
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ce-ink-3);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--ce-line-strong);
    border-radius: 16px;
    padding: 7px 13px;
    cursor: pointer;
    white-space: nowrap;
}

    .ce-edquick__btn:hover {
        color: var(--ce-ink);
        border-color: var(--ce-accent-edge);
        background: rgba(var(--ce-accent-rgb), .14);
    }

    .ce-edquick__btn.is-set {
        color: var(--ce-accent-label);
        background: var(--ce-accent);
        border-color: var(--ce-accent-edge-hi);
    }

/* ============================================================
   Gatherings: the featured card, the filter bar and the
   month-grouped list. Appended at the end for the same reason
   as everything above it: the earlier @media (max-width: 900px)
   blocks would otherwise out-order these at equal specificity.
   ============================================================ */

.ce-gfeature {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--ce-line-strong);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, .014);
}

.ce-gfeature__media {
    flex: 1 1 300px;
    min-height: 240px;
    background-color: rgba(255, 255, 255, .03);
    background-size: cover;
    background-position: center;
}

.ce-gfeature__body {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(22px, 3vw, 32px);
}

.ce-gfeature__title {
    font-size: 26px;
    font-weight: 200;
    line-height: 1.25;
    margin: 0;
    text-wrap: pretty;
}

.ce-gfeature__lead {
    font-size: 14px;
    color: var(--ce-ink-4);
    line-height: 1.75;
    margin: 0;
    max-width: 46ch;
    text-wrap: pretty;
}

/* ---------- badges ------------------------------------------------------- */

.ce-gbadges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.ce-gbadge {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-accent-label);
    background: var(--ce-accent);
    border: 1px solid var(--ce-accent-edge-hi);
    border-radius: 14px;
    padding: 5px 11px;
    white-space: nowrap;
}

.ce-gbadge--quiet {
    color: var(--ce-ink-5);
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* ---------- filters ------------------------------------------------------ */

.ce-gfilter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--ce-line);
    border-radius: 12px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, .014);
}

.ce-gfilter__head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: baseline;
    justify-content: space-between;
}

.ce-gfilter__count {
    font-size: 12px;
    color: var(--ce-ink-4);
}

.ce-gfilter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

    .ce-gfilter__row + .ce-gfilter__row {
        border-top: 1px solid var(--ce-line);
        padding-top: 12px;
    }

.ce-gfilter__label {
    flex: 0 0 46px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-gchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ce-gchip {
    font-size: 11.5px;
    color: var(--ce-ink-3);
    background: transparent;
    border: 1px solid var(--ce-line-strong);
    border-radius: 15px;
    padding: 8px 13px;
    white-space: nowrap;
}

    .ce-gchip:hover {
        color: var(--ce-ink);
        border-color: var(--ce-accent-edge);
    }

    .ce-gchip.is-on {
        color: var(--ce-accent-label);
        background: var(--ce-accent);
        border-color: var(--ce-accent-edge-hi);
    }

/* ---------- month headings ----------------------------------------------- */

.ce-gmonth {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    padding: 16px 4px 10px;
    border-bottom: 1px solid var(--ce-line);
}

.ce-gmonth__label {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
}

.ce-gmonth__count {
    font-size: 12px;
    color: var(--ce-ink-5);
}

/* A picture where there is one. The row still reads without it. */
.ce-grow__thumb {
    flex: 0 0 64px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid var(--ce-line);
    background-color: rgba(255, 255, 255, .03);
    background-size: cover;
    background-position: center;
}

/* ============================================================
   One gathering, in full.
   ============================================================ */

.ce-gdhero {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ce-line-strong);
    border-radius: 16px;
    overflow: hidden;
}

.ce-gdhero__media {
    height: clamp(200px, 36vw, 420px);
    background-color: rgba(255, 255, 255, .03);
}

/* ---------- a picture of any shape, filling its frame -------------------- */

/* Uploads are kept whole rather than cropped to one shape when they are
   saved (see GatheringsController.PrepareImage), so each frame does its
   own fitting: the picture always covers the frame edge to edge, never
   stretched, trimmed evenly from whichever sides overhang. A list row and
   the Details banner can each crop the same picture to suit. It is
   absolutely placed, so its own size never stretches the frame — the
   frame's size comes from whichever rule places it. */
.ce-gpic {
    position: relative;
    overflow: hidden;
}

.ce-gpic__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ce-gdhero__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
    padding: clamp(20px, 3vw, 30px);
    background: rgba(255, 255, 255, .02);
}

    .ce-gdhero__media + .ce-gdhero__bar {
        border-top: 1px solid var(--ce-line);
    }

.ce-gdhero__text {
    flex: 1 1 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ce-gdhero__title {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 200;
    line-height: 1.15;
    margin: 0;
    text-wrap: pretty;
}

.ce-gdhero__when {
    font-size: 14px;
    color: var(--ce-ink-4);
}

/* ---------- the two columns ---------------------------------------------- */

.ce-gdsplit {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
}

.ce-gdmain {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ce-gdaside {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 100px;
}

.ce-gdcard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--ce-line);
    border-radius: 14px;
    padding: 22px clamp(18px, 3vw, 26px);
}

.ce-gdcard--accent {
    border-color: var(--ce-accent-edge);
    background: rgba(var(--ce-accent-rgb), .05);
}

.ce-gdcard__title {
    font-size: 19px;
    font-weight: 300;
    margin: 0;
}

/* A card's title with its count beside it. Not .ce-gdhero__text: its
   flex-basis becomes a 340px height inside a column card. */
.ce-gdcard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

/* pre-line so a description typed with paragraph breaks keeps them. */
.ce-gdcard__body {
    font-size: 14.5px;
    color: var(--ce-ink-4);
    line-height: 1.8;
    margin: 0;
    max-width: 62ch;
    text-wrap: pretty;
    white-space: pre-line;
}

.ce-gdcard__note {
    font-size: 12.5px;
    color: var(--ce-ink-5);
    line-height: 1.7;
    margin: 0;
    border-top: 1px solid var(--ce-line);
    padding-top: 14px;
}

/* ---------- who is holding it -------------------------------------------- */

.ce-gdpeople {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ce-gdperson {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--ce-line);
    border-radius: 12px;
    color: inherit;
}

a.ce-gdperson:hover {
    border-color: var(--ce-accent-edge);
    background: rgba(var(--ce-accent-rgb), .05);
}

.ce-gdperson__face {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ce-accent);
    border: 1px solid var(--ce-accent-edge-hi);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--ce-accent-label);
    background-size: cover;
    background-position: center;
}

.ce-gdperson__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ce-gdperson__name {
    font-size: 14.5px;
    color: var(--ce-ink);
}

.ce-gdperson__role {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

/* ---------- what comes after --------------------------------------------- */

.ce-gdnext {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--ce-line);
    color: inherit;
}

    .ce-gdnext:hover .ce-gdnext__title {
        color: var(--ce-accent-soft);
    }

.ce-gdnext__date {
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--ce-line);
    border-radius: 8px;
    padding: 6px 0;
}

.ce-gdnext__month {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--ce-accent-soft);
}

.ce-gdnext__day {
    font-size: 17px;
    font-weight: 200;
    color: var(--ce-ink);
}

.ce-gdnext__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ce-gdnext__title {
    font-size: 13.5px;
    color: var(--ce-ink);
}

.ce-gdnext__meta {
    font-size: 12px;
    color: var(--ce-ink-5);
}

/* ---------- the recording ------------------------------------------------ */

.ce-gdfilm {
    border: 1px solid var(--ce-line);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

    .ce-gdfilm iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* A sticky column only helps while there is something beside it to scroll
   past; once the two stack it just pins a card to the viewport. */
@media (max-width: 900px) {
    .ce-gdaside {
        position: static;
    }
}

/* ---------- taking a place ----------------------------------------------- */

/* Taking a place changes something, so it goes through a form. Inline-flex
   keeps the button sitting in a row of actions next to the plain links
   rather than starting a block of its own. */
.ce-gform {
    display: inline-flex;
    margin: 0;
}

/* ============================================================
   Gatherings list, second pass: the countdown and fact list on
   the featured card, rows that open in place, and the "Show
   more" step. Appended last, like every block above, so the
   earlier @media (max-width: 900px) rules cannot out-order it.
   ============================================================ */

/* A button-shaped statement ("No places left"). It keeps the ghost
   outline so a row of actions still lines up, but it is not pressable,
   so it does not answer the pointer either. */
.ce-btn.is-static {
    cursor: default;
    pointer-events: none;
}

/* ---------- the featured card -------------------------------------------- */

.ce-gfeature__eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
}

.ce-gfeature__head {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ce-gfeature__kind {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ce-ink-3);
}

/* A long description would push the actions out of the card; the whole
   text is one press away on the gathering's own page. */
.ce-gfeature__lead {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* No picture: the date takes the picture's place. */
.ce-gfeature__media--date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: radial-gradient(80% 90% at 30% 20%, rgba(208, 10, 10, .28), rgba(208, 10, 10, 0) 70%), rgba(255, 255, 255, .02);
}

.ce-gfeature__weekday,
.ce-gfeature__month {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
}

.ce-gfeature__day {
    font-size: 88px;
    font-weight: 200;
    line-height: 1;
    color: var(--ce-ink);
}

.ce-gfeature__actions,
.ce-gpanel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 4px;
}

.ce-gfeature__places,
.ce-gpanel__places {
    font-size: 12.5px;
    color: var(--ce-ink-4);
}

/* ---------- facts: a label beside, or over, each value -------------------- */

.ce-gfacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--ce-line);
    padding-top: 16px;
}

.ce-gfact {
    display: flex;
    gap: 14px;
    align-items: baseline;
}

.ce-gfact__key {
    flex: 0 0 84px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-gfact__val {
    min-width: 0;
    font-size: 13.5px;
    color: var(--ce-ink);
}

/* In an opened row the facts sit side by side, each label over its value. */
.ce-gfacts--row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 34px;
    border-top: 0;
    padding-top: 0;
}

    .ce-gfacts--row .ce-gfact {
        flex-direction: column;
        gap: 4px;
        min-width: 130px;
    }

    .ce-gfacts--row .ce-gfact__key {
        flex: none;
    }

/* ---------- rows that open in place --------------------------------------- */

.ce-gitem {
    border-top: 1px solid var(--ce-line-strong);
}

    /* The month heading above already draws a rule; a second one right
       under it would read as a double line. */
    .ce-glist > .ce-gitem:first-child {
        border-top: 0;
    }

    .ce-gitem > .ce-grow {
        border-top: 0;
        cursor: pointer;
        list-style: none;
    }

        .ce-gitem > .ce-grow::-webkit-details-marker {
            display: none;
        }

        .ce-gitem > .ce-grow::marker {
            content: "";
        }

    .ce-gitem[open] > .ce-grow {
        background: rgba(var(--ce-accent-rgb), .08);
    }

.ce-grow__thumb.is-blank {
    background: radial-gradient(90% 120% at 25% 20%, rgba(208, 10, 10, .22), rgba(208, 10, 10, 0) 70%), rgba(255, 255, 255, .02);
}

.ce-grow__end {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.ce-grow__count.is-limited {
    color: var(--ce-accent-soft);
}

.ce-grow__count.is-full {
    color: var(--ce-ink-5);
}

.ce-grow__arrow {
    font-size: 13px;
    color: var(--ce-accent-soft);
    transition: transform .18s ease;
}

.ce-gitem[open] .ce-grow__arrow {
    transform: rotate(90deg);
}

.ce-gpanel {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0 0 16px;
    padding: 20px;
    border: 1px solid rgba(192, 0, 0, .28);
    border-radius: 12px;
    background: rgba(var(--ce-accent-rgb), .05);
}

/* A landscape frame of its own rather than stretched to the height of the
   text beside it — stretched, a wide picture would be trimmed to a narrow
   upright strip. Grows to fill the line on a phone, where it sits above
   the text instead of beside it. */
.ce-gpanel__media {
    flex: 1 1 220px;
    max-width: 340px;
    align-self: flex-start;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    border: 1px solid var(--ce-line);
}

.ce-gpanel__body {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ce-gpanel__kind {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
}

/* pre-line keeps the paragraph breaks a host typed into the form */
.ce-gpanel__desc {
    font-size: 14px;
    color: var(--ce-ink-3);
    line-height: 1.75;
    margin: 0;
    max-width: 60ch;
    white-space: pre-line;
    text-wrap: pretty;
}

.ce-gpanel__actions {
    border-top: 1px solid var(--ce-line);
    padding-top: 14px;
}

/* ---------- a page at a time ---------------------------------------------- */

.ce-gmore {
    align-self: center;
}

.ce-gempty__blank {
    font-size: 12.5px;
    color: var(--ce-ink-3);
    padding-top: 2px;
}

    .ce-gempty__blank:hover {
        color: var(--ce-ink);
    }

@media (prefers-reduced-motion: reduce) {
    .ce-grow__arrow {
        transition: none;
    }
}

@media (max-width: 720px) {
    /* On a phone the picture column squeezes the title to a sliver, and
       the date chip already anchors each row. */
    .ce-grow__thumb {
        display: none;
    }

    .ce-gpanel {
        padding: 16px;
    }

    .ce-gfeature__day {
        font-size: 64px;
    }

    .ce-gfact__key {
        flex-basis: 72px;
    }
}

/* ============================================================
   Places that belong to someone: the badge a member sees on a
   gathering they are coming to, and the host's list of names.
   ============================================================ */

/* Deliberately not the filled accent of a button: this states something,
   it is not asking to be pressed. */
.ce-gmine {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-accent-soft);
    background: rgba(var(--ce-accent-rgb), .1);
    border: 1px solid var(--ce-accent-edge);
    border-radius: 24px;
    padding: 13px 20px;
    white-space: nowrap;
}

.ce-gmine__tick {
    font-size: 13px;
    line-height: 1;
}

/* On a list row, what the reader wants first is that the place is theirs. */
.ce-grow__count.is-mine {
    color: var(--ce-accent-soft);
}

/* Says why a button is missing — the cancel window has closed. */
.ce-gdhero__note {
    align-self: center;
    font-size: 12.5px;
    color: var(--ce-ink-4);
}

/* ---------- who has a place (host and admins only) ------------------------ */

.ce-gdreg__who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .ce-gdreg__who .ce-edrow__key {
        color: var(--ce-ink);
    }

.ce-gdreg__meta {
    font-size: 12px;
    color: var(--ce-ink-5);
    overflow-wrap: anywhere;
}

/* ---------- one place control, four states -------------------------------- */

/* Every state is in the markup and data-state shows one. site.js flips
   data-state after a press, so nothing is re-drawn and nothing reloads. */
.ce-place {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ce-place__take,
.ce-place__cancel,
.ce-place__locked,
.ce-place__full {
    display: none;
}

.ce-place[data-state="none"] .ce-place__take,
.ce-place[data-state="mine"] .ce-place__cancel,
.ce-place[data-state="full"] .ce-place__full {
    display: inline-flex;
}

.ce-place[data-state="locked"] .ce-place__locked {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ce-place__note {
    font-size: 12.5px;
    color: var(--ce-ink-4);
}

    .ce-place__note:empty {
        display: none;
    }

/* while a press is on its way: dimmed, and a second press does nothing */
.ce-place.is-busy {
    opacity: .6;
    pointer-events: none;
}