: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: 280px;
    --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;
}

/* The public landing page brings its own sky (.ce-land__stars) and wants
   nothing behind the column but black. */
.ce-body--bare::before {
    display: none;
}

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,
.ce-authbar__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__body > .ce-settings-hint {
        margin: 0 0 20px;
    }

.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);
    }

    /* dark native popup where the styled list isn't supported */
    select.ce-sort {
        color-scheme: dark;
    }

    .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;
}

/* ---------- rooms dropdown (phone) ------------------------------------
   A row of filter chips wraps into a block of its own on a phone, so on
   that width the chips give way to this: a labelled control that opens the
   same links as a list. Used by the forum's rooms and by the gatherings
   month/kind filters. Hidden above the phone breakpoint, where the chips
   (or the forum's rail) do the job.
   --------------------------------------------------------------------- */

.ce-drop {
    display: none;
    position: relative;
    margin-bottom: 4px;
}

.ce-drop__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--ce-line-control);
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}

    /* the default disclosure triangle, gone in both engines */
    .ce-drop__summary::-webkit-details-marker {
        display: none;
    }

    .ce-drop__summary::marker {
        content: "";
    }

.ce-drop__current {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-drop__caret {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1px solid var(--ce-ink-3);
    border-bottom: 1px solid var(--ce-ink-3);
    transform: rotate(45deg);
    transition: transform .25s ease;
}

.ce-drop[open] .ce-drop__caret {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.ce-drop__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--ce-line-control);
    border-radius: 10px;
    background: var(--ce-bg-raised);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    max-height: 60vh;
    overflow-y: auto;
}

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

    .ce-drop__item:hover {
        color: var(--ce-ink);
        background: var(--ce-row-hover);
    }

    .ce-drop__item.is-active {
        color: var(--ce-ink);
        background: rgba(var(--ce-accent-rgb), .09);
    }

.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,
    .ce-authbar__lockup {
        height: 28px;
    }

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

    .ce-rail {
        display: none;
    }

    /* a back link that stands in for the rail's once the rail is gone
       (scoped so it outranks the hidden default declared further down) */
    .ce-forum .ce-back--narrow {
        display: inline-flex;
    }

    .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;
    }
}

/* Phone: chips hand over to the dropdowns. Has to sit after the 1024px block
   above, which is what switches the forum chips on. */
@media (max-width: 720px) {
    .ce-chips {
        display: none;
    }

    .ce-drop {
        display: block;
    }

    /* in the forum toolbar, rooms and order share the row and rooms takes the
       slack so its list opens the full width of the control */
    .ce-toolbar .ce-drop {
        flex: 1;
        min-width: 0;
    }

    /* search lives in the fixed bar at the foot of the phone layout, so the
       toolbar's own copy goes rather than sitting here as an empty box */
    .ce-search {
        display: none;
    }

}


/* ---------- 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,
    .ce-authbar__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 are in the toolbar dropdown on a phone, so the chips go. */
    .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);
    }

/* only shown once the forum rail hides (see the 1024px block) */
.ce-back--narrow {
    display: none;
}


.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;
}

/* A short call-to-action line closing out a page-head intro (e.g.
   Gatherings) — same size as the lead, just brought forward in weight
   and colour so it reads as the one-liner to act on, not more lead copy. */
.ce-page__cta {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ce-ink);
    letter-spacing: .01em;
}

.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);
    }

/* the action is a form button now, so drop the browser's button chrome */
button.ce-post__action {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.ce-post__actions {
    margin-bottom: 0;
}

/* a one-button form sitting in a row of actions, like the pin/lock pair */
.ce-inline-form {
    display: inline-flex;
    margin: 0;
}

.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,
    .ce-embed video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .ce-embed video {
        background: #000;
        object-fit: contain;
    }

/* ---------- 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;
}

/* The landing page runs a little wider than the members' board — it is all
   hero imagery and full-bleed bands, with none of the reading column the
   inside of the site is measured for. Redefining the board here is enough
   for the whole page: .ce-shell sizes itself from it, and so do the fixed
   overlays inside (.ce-land__bar, __stars, __progress).

   No edge either: no side borders, no shadow, and — via .ce-body--bare —
   no starfield behind it. The column simply sits on black. */
.ce-shell--bare {
    --ce-board: 1280px;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    background: #000;
}

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

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

/* The landing page's two faces: Spectral carries every title, wordmark and
   small-caps line, Jost carries the prose. Latin subsets only — the page is
   English and the rest of the site still runs on Helvetica. */
@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost-latin.woff2') format('woff2');
    font-weight: 300 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spectral';
    src: url('../fonts/spectral-300-latin.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Spectral';
    src: url('../fonts/spectral-300-italic-latin.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   The public landing page (Views/Home/Index.cshtml, signed out).

   Four movements down one long dark page — arrive, wonder,
   experience, enter — each one centred, each one opening with a
   letter-spaced Spectral title over a short red rule. It renders
   inside the "bare" shell, so it supplies its own header and its
   own closing band.

   Everything that moves here is decoration: the whole page reads
   and works with motion off (see the prefers-reduced-motion block
   at the end) and with JavaScript off, since the reveal script
   only ever adds opacity, never removes it.
   ============================================================ */

.ce-land {
    /* The page's own red — hotter than the site's brick interaction colour,
       because out here nothing is interactive enough to confuse it with. */
    --land-red: #e0141e;
    --land-red-hi: #f07a6a;
    --land-red-rgb: 224, 20, 30;
    --land-title: 'Spectral', Georgia, 'Times New Roman', serif;
    flex: 1;
    position: relative;
    isolation: isolate;
    min-width: 0;
    /* Opaque black over the bare shell's wash and the site star field: this
       page lights itself, with the veil in the hero and the imagery in the
       bands below doing all of the colouring. */
    background: var(--ce-bg);
    font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    overflow: hidden;
}

/* the drifting star field the script populates */
/* Fixed to the window, but sized and centred on the board — percentages on
   a fixed element resolve against the viewport minus its scrollbar, so this
   lines up with the shell at every width. */
.ce-land__stars {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, var(--ce-board));
    transform: translateX(-50%);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

    .ce-land__stars span {
        position: absolute;
        border-radius: 50%;
    }

/* reading progress, hairline thin */
/* A full-board track with a fill scaled inside it — the track owns the
   centring transform, so the fill is free to animate its own. */
.ce-land__progress {
    position: fixed;
    top: 0;
    left: 50%;
    width: min(100%, var(--ce-board));
    height: 1px;
    transform: translateX(-50%);
    z-index: 40;
    pointer-events: none;
}

    .ce-land__progress i {
        display: block;
        width: 100%;
        height: 100%;
        transform: scaleX(0);
        transform-origin: left center;
        background: linear-gradient(to right, rgba(var(--land-red-rgb), 0), var(--land-red));
    }

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

/* Same three-column trick as .ce-header: an empty first column so the mark
   sits on the true centre of the bar whatever the nav on the right weighs. */
.ce-land__bar {
    position: fixed;
    top: 0;
    left: 50%;
    width: min(100%, var(--ce-board));
    transform: translateX(-50%);
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 20px 34px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
}

/* Just the placement — the lockup inside carries .ce-brand__lockup, so it is
   sized by the same rule as the site header and the auth bar. */
.ce-land__brand {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
}

.ce-land__bar-nav {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 26px;
}

.ce-land__bar-link {
    font-size: 12px;
    color: var(--ce-ink-3);
    transition: color .35s ease;
}

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

.ce-land__bar-cta {
    flex: none;
    white-space: nowrap;
    padding: 9px 22px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 24px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ce-ink);
    transition: border-color .4s ease, background .4s ease, color .4s ease;
}

    .ce-land__bar-cta:hover {
        border-color: rgba(var(--land-red-rgb), .55);
        background: rgba(var(--land-red-rgb), .12);
        color: var(--land-red-hi);
    }

/* ---------- shared section furniture ----------------------------------- */

.ce-land__sec {
    position: relative;
    z-index: 2;
    background: var(--ce-bg);
}

/* the red hairline that closes the hero and the movement row — near the full
   board wide, fading out before either edge */
.ce-land__essence::before,
.ce-land__enter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 3%;
    right: 3%;
    height: 1px;
    background: linear-gradient(to right, rgba(var(--land-red-rgb), 0), rgba(var(--land-red-rgb), .75) 12%, rgba(var(--land-red-rgb), .75) 88%, rgba(var(--land-red-rgb), 0));
}

/* Titles are set in wide Spectral capitals. The trailing letter-space would
   otherwise push a centred title half a space to the left, so every centred
   title pays it back as padding. */
.ce-land__h2 {
    margin: 0;
    font-family: var(--land-title);
    font-weight: 300;
    font-size: clamp(24px, 2.8vw, 36px);
    letter-spacing: .32em;
    padding-left: .32em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #f2eee9;
}

.ce-land__h2--lg {
    font-size: clamp(30px, 3.4vw, 44px);
}

/* the short red rule that sits under every title */
.ce-land__rule {
    display: block;
    width: 64px;
    height: 1px;
    background: var(--land-red);
}

.ce-land__rule--wide {
    width: 170px;
    background: linear-gradient(to right, rgba(var(--land-red-rgb), 0), var(--land-red), rgba(var(--land-red-rgb), 0));
}

.ce-land__num {
    font-family: var(--land-title);
    font-size: 11px;
    letter-spacing: .3em;
    color: var(--ce-ink-3);
}

.ce-land__eyebrow {
    font-family: var(--land-title);
    font-size: 12px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ce-ink-2);
}

.ce-land__body {
    margin: 0;
    font-family: var(--land-title);
    font-size: 16.5px;
    font-weight: 300;
    line-height: 1.6;
    color: #d6d0c9;
    text-wrap: pretty;
}

/* the ® mark: present wherever the brand name appears, but quieter than
   the letters around it — small, lifted, and never fighting for attention. */
.ce-land__reg {
    font-size: .34em;
    font-weight: 300;
    letter-spacing: 0;
    vertical-align: text-top;
    opacity: .6;
}

/* ---------- arrive ------------------------------------------------------ */

.ce-land__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 84px 24px 52px;
    overflow: hidden;
    text-align: center;
}

.ce-land__veil {
    position: absolute;
    left: 50%;
    top: 6%;
    width: 760px;
    height: 760px;
    margin-left: -380px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--land-red-rgb), .12), rgba(0, 0, 0, 0) 70%);
    animation: ce-land-veil 15s ease-in-out infinite;
    pointer-events: none;
    will-change: opacity;
}

/* The moon ring is a photograph on black: the mask feathers its square edge
   away rather than asking the artwork to carry a transparent border. */
.ce-land__moon {
    position: relative;
    width: min(400px, 74vw);
    height: auto;
    display: block;
    -webkit-mask-image: radial-gradient(closest-side, #000 88%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 88%, transparent 100%);
}

    .ce-land__moon-base {
        display: block;
        width: 100%;
        height: auto;
    }

/* The base is 596x568; each moon's box is placed in percentages of that
   frame so it sits over the gap cut for it in the ring. The moons follow
   the phase layout: new moon west, waxing over the top, full moon east,
   waning along the bottom.

   On load the moons rise from the new moon out both ways at once — over
   the top and along the bottom, in pairs — and meet at the full moon.
   --moon-i is a moon's step in that (0 new ... 4 full). Its own motion only starts once it has
   risen, so the two never fight over a property; --moon-loop / --moon-dur
   / --moon-ease pick that motion per phase. */
.ce-land__phase {
    --moon-step: .5s;
    --moon-rise: 1s;
    --moon-at: calc(.4s + var(--moon-i) * var(--moon-step));
    --moon-ease: ease-in-out;
    position: absolute;
    height: auto;
    animation:
        ce-land-moon-rise var(--moon-rise) ease-out var(--moon-at) backwards,
        var(--moon-loop) var(--moon-dur) var(--moon-ease) calc(var(--moon-at) + var(--moon-rise)) infinite;
    transition: scale .6s ease;
}

    /* scale, not filter or transform: those belong to the moons' own animations */
    .ce-land__phase:hover {
        scale: 1.1;
    }

/* 1 · new moon — its rim smoulders red */
.ce-land__phase--w {
    left: 1.091%; top: 43.574%; width: 13.926%;
    --moon-i: 0; --moon-loop: ce-land-moon-ember; --moon-dur: 5s;
}

/* 2 · waxing crescent — a small circling orbit */
.ce-land__phase--nw {
    left: 13.674%; top: 17.165%; width: 13.591%;
    --moon-i: 1; --moon-loop: ce-land-moon-orbit; --moon-dur: 14s; --moon-ease: linear;
}

/* 3 · first quarter — a heartbeat swell */
.ce-land__phase--n {
    left: 42.701%; top: 2.553%; width: 14.597%;
    --moon-i: 2; --moon-loop: ce-land-moon-pulse; --moon-dur: 4.5s;
}

/* 4 · waxing gibbous — fades toward the dark and back */
.ce-land__phase--ne {
    left: 72.735%; top: 17.165%; width: 13.591%;
    --moon-i: 3; --moon-loop: ce-land-moon-fade; --moon-dur: 10s;
}

/* 5 · full moon — slow luminous breath */
.ce-land__phase--e {
    left: 84.815%; top: 43.574%; width: 13.926%;
    --moon-i: 4; --moon-loop: ce-land-moon-breathe; --moon-dur: 7s;
}

/* 6 · waning gibbous — drifts gently up and down */
.ce-land__phase--se {
    left: 72.735%; top: 69.454%; width: 13.591%;
    --moon-i: 3; --moon-loop: ce-land-moon-drift; --moon-dur: 9s;
}

/* 7 · third quarter — light passing over its face */
.ce-land__phase--s {
    left: 42.701%; top: 81.074%; width: 14.597%;
    --moon-i: 2; --moon-loop: ce-land-moon-shimmer; --moon-dur: 6s;
}

/* 8 · waning crescent — a slow sway on its axis */
.ce-land__phase--sw {
    left: 13.507%; top: 69.454%; width: 13.591%;
    --moon-i: 1; --moon-loop: ce-land-moon-sway; --moon-dur: 11s;
}

.ce-land__wordmark {
    position: relative;
    margin: 18px 0 0;
    font-family: var(--land-title);
    font-weight: 300;
    font-size: clamp(34px, 4.4vw, 56px);
    letter-spacing: .42em;
    padding-left: .42em;
    line-height: 1;
    text-transform: uppercase;
    color: #f2eee9;
}

.ce-land__hero .ce-land__rule--wide {
    position: relative;
    margin: 20px 0 16px;
}

.ce-land__headline {
    position: relative;
    margin: 0;
    font-family: var(--land-title);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(20px, 2vw, 27px);
    letter-spacing: .1em;
    color: #ece8e3;
}

.ce-land__subline {
    position: relative;
    margin: 18px 0 0;
    max-width: 440px;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: .02em;
    color: #cfc9c2;
    text-wrap: balance;
}

/* the scroll cue: a hairline dropping into a chevron */
.ce-land__cue {
    position: relative;
    margin-top: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: ce-land-cue 3.4s ease-in-out infinite;
    transition: opacity .4s ease;
}

    .ce-land__cue:hover {
        opacity: .65;
    }

    .ce-land__cue i {
        display: block;
        width: 1px;
        height: 56px;
        background: linear-gradient(to bottom, rgba(var(--land-red-rgb), .35), rgba(var(--land-red-rgb), .9));
    }

    .ce-land__cue b {
        display: block;
        width: 12px;
        height: 12px;
        margin-top: -10px;
        border-right: 2.5px solid var(--land-red);
        border-bottom: 2.5px solid var(--land-red);
        transform: rotate(45deg);
    }

/* ---------- essence ------------------------------------------------------ */

/* A single centred column — label, body, and a closing line that resolves
   in its own stage after it. No image here; the words alone carry it. */
.ce-land__essence {
    padding: 40px 24px 20px;
    display: flex;
    justify-content: center;
}

.ce-land__essence-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 500px;
    text-align: center;
}

.ce-land__essence-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ce-land__essence-copy {
    font-size: 17.5px;
    line-height: 1.45;
    color: #e6e1db;
}

/* the closing line: a quieter echo of the title, set off from the prose
   above it rather than just another sentence inside the paragraph */
.ce-land__essence-close {
    margin: 0;
    font-family: var(--land-title);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(17px, 1.8vw, 21px);
    letter-spacing: .03em;
    color: #ece8e3;
}

/* Into light (landing.js adds .is-dim, then .is-lit on scroll). Each part
   starts near-black and slightly unresolved and brightens on a curve that
   lingers in the dark before it rises, the way eyes adjust, rather than
   a linear fade. Nothing moves; there is no glow. The red of the rule and
   thread is held back a little, so colour arrives last. */
.ce-land__essence.is-dim [data-essence-light] {
    opacity: 0;
    filter: brightness(.35) saturate(.4) blur(1.2px);
    transition-property: opacity, filter;
    transition-timing-function: cubic-bezier(.6, 0, .3, 1);
    transition-duration: var(--light-dur, 3s);
    transition-delay: var(--light-at, 0s);
}

.ce-land__essence.is-lit [data-essence-light] {
    opacity: 1;
    filter: none;
}

/* the sequence: ESSENCE, then the prose, then the closing line resolves last */
.ce-land__essence-head[data-essence-light] {
    --light-dur: 3s;
    --light-at: 0s;
}

.ce-land__essence-copy[data-essence-light] {
    --light-dur: 4s;
    --light-at: 1.8s;
}

.ce-land__essence-close[data-essence-light] {
    --light-dur: 4.2s;
    --light-at: 5s;
}

.ce-land__thread[data-essence-light] {
    --light-dur: 3s;
    --light-at: 7.4s;
}

/* a dotted red thread dropping from the closing line to a single red bead,
   leading the eye on into Sacred Movement */
.ce-land__thread {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

    .ce-land__thread i {
        width: 1px;
        height: 22px;
        background: repeating-linear-gradient(to bottom, rgba(var(--land-red-rgb), .85) 0 2px, transparent 2px 4px);
    }

    .ce-land__thread b {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--land-red);
        box-shadow: 0 0 10px rgba(var(--land-red-rgb), .7);
    }

/* ---------- sacred movement ---------------------------------------------- */

.ce-land__movement {
    padding: 0 0 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* the title sits between two lines reaching toward the edges of the column,
   rather than over a rule the way every other title here does */
.ce-land__movement-divider {
    width: 94%;
    display: flex;
    align-items: center;
    gap: 22px;
}

.ce-land__movement-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(var(--land-red-rgb), 0), rgba(var(--land-red-rgb), .75) 25%);
}

    .ce-land__movement-divider .ce-land__movement-line:last-child {
        background: linear-gradient(to left, rgba(var(--land-red-rgb), 0), rgba(var(--land-red-rgb), .75) 25%);
    }

.ce-land__movement-divider .ce-land__h2 {
    position: relative;
    flex: none;
    font-size: clamp(17px, 1.9vw, 22px);
    white-space: nowrap;
}

    /* a pale bead under the title, where the thread above would land */
    .ce-land__movement-divider .ce-land__h2::after {
        content: '';
        position: absolute;
        left: calc(50% + .16em);
        bottom: -14px;
        width: 4px;
        height: 4px;
        margin-left: -2px;
        border-radius: 50%;
        background: #f2eee9;
    }

/* three open columns — the emblems carry the separation, no rules between */
.ce-land__movement-row {
    width: 100%;
    max-width: 1000px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.ce-land__movement-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

/* Each emblem is a transparent PNG — only its lines and beads are painted —
   so its glow and brightness follow the drawing, never a square box. */
.ce-land__movement-img {
    display: block;
    width: min(230px, 64vw);
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 10px;
    transition: scale .6s ease, filter .6s ease;
}

    /* as its column is revealed, the emblem kindles: up out of the dark,
       through a brief red glow, and settles. Backwards fill only, so it holds
       dark while it waits its turn and leaves filter free for hover after. */
    .ce-land__movement-col.is-revealed .ce-land__movement-img {
        animation: ce-land-emblem-light 2.6s ease-out var(--reveal-delay, 0s) backwards;
    }

    .ce-land__movement-col:hover .ce-land__movement-img {
        scale: 1.05;
        filter: brightness(1.25);
    }

.ce-land__movement-name {
    margin: 0;
    font-family: var(--land-title);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: .32em;
    padding-left: .32em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #f2eee9;
}

.ce-land__movement-body {
    margin: 0;
    max-width: 300px;
    font-family: var(--land-title);
    font-size: 16.5px;
    font-weight: 300;
    line-height: 1.6;
    color: #e2ddd7;
    text-wrap: balance;
}

/* ---------- enter ------------------------------------------------------- */

/* The ring rises alone at the centre, with the copy settling beneath it —
   no corner artwork or baseline grid here, just one axis, held still. */
.ce-land__enter {
    padding: 24px 24px 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ce-land__enter-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 520px;
    text-align: center;
}

/* the same restraint as the New Moon in the hero ring — a slow glow rather
   than any motion, so it reads as alight, not animated */
.ce-land__enter-ring {
    width: min(170px, 44vw);
    height: auto;
    display: block;
    -webkit-mask-image: radial-gradient(closest-side, #000 85%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 85%, transparent 100%);
    animation: ce-land-ring-glow 6s ease-in-out infinite;
}

.ce-land__enter-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ce-land__enter-tagline {
    margin: 0;
    font-family: var(--land-title);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(17px, 1.9vw, 21px);
    letter-spacing: .02em;
    color: #ece8e3;
}

.ce-land__cta {
    margin-top: 6px;
    white-space: nowrap;
    padding: 14px 64px;
    border: 1.5px solid var(--land-red);
    border-radius: 40px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #f2eee9;
    transition: background .45s ease, box-shadow .6s ease, color .45s ease;
}

    .ce-land__cta:hover {
        background: rgba(var(--land-red-rgb), .14);
        box-shadow: 0 0 40px rgba(var(--land-red-rgb), .3);
        color: #fff;
    }

.ce-land__note {
    margin: 0;
    font-family: var(--land-title);
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.7;
    color: #e2ddd7;
    text-wrap: pretty;
}

.ce-land__signin {
    font-family: var(--land-title);
    font-size: 14.5px;
    color: #e2ddd7;
}

    .ce-land__signin a {
        color: #f2eee9;
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: color .35s ease;
    }

        .ce-land__signin a:hover {
            color: var(--land-red-hi);
        }

/* ---------- foot -------------------------------------------------------- */

.ce-land__foot {
    position: relative;
    z-index: 2;
    padding: 34px 5vw;
    border-top: 1px solid var(--ce-line-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--ce-bg);
}

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

    .ce-land__foot-brand b {
        font-family: var(--land-title);
        font-weight: 300;
        font-size: 19px;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: #f2eee9;
    }

    .ce-land__foot-brand span {
        font-family: var(--land-title);
        font-size: 10.5px;
        letter-spacing: .26em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--ce-ink-3);
    }

.ce-land__foot-links {
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: var(--land-title);
    font-size: 11.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #cfc9c2;
}

    .ce-land__foot-links a {
        color: inherit;
        transition: color .35s ease;
    }

        .ce-land__foot-links a:hover {
            color: var(--land-red-hi);
        }

    .ce-land__foot-tail {
        width: 44px;
        height: 1px;
        margin-left: 14px;
        background: var(--land-red);
    }

    .ce-land__foot-links i {
        width: 1px;
        height: 12px;
        background: rgba(255, 255, 255, .3);
    }

/* image credit: its own quiet row under the brand and links */
.ce-land__foot-credit {
    flex-basis: 100%;
    font-size: 11.5px;
    font-weight: 300;
    letter-spacing: .04em;
    line-height: 1.5;
    color: var(--ce-ink-3);
}

    .ce-land__foot-credit a {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, .2);
        text-underline-offset: 3px;
        transition: color .35s ease, text-decoration-color .35s ease;
    }

        .ce-land__foot-credit a:hover {
            color: var(--land-red-hi);
            text-decoration-color: currentColor;
        }

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

/* a moon arriving: out of the dark, from a blur, settling to size */
@keyframes ce-land-moon-rise {
    from { opacity: 0; transform: scale(.6); filter: blur(6px) brightness(1.8); }
    to { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}

/* per-moon motion for the hero ring — each starts from rest, so it picks up
   cleanly where the rise leaves off; scale is left free for hover */
@keyframes ce-land-moon-breathe {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 245, 230, .15)); }
    50% { filter: drop-shadow(0 0 18px rgba(255, 245, 230, .55)); }
}

@keyframes ce-land-moon-drift {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

@keyframes ce-land-moon-shimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.35); }
}

@keyframes ce-land-moon-sway {
    0%, 50%, 100% { rotate: 0deg; }
    25% { rotate: -8deg; }
    75% { rotate: 8deg; }
}

@keyframes ce-land-moon-ember {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(var(--land-red-rgb), .3)); }
    50% { filter: drop-shadow(0 0 14px rgba(var(--land-red-rgb), .85)); }
}

@keyframes ce-land-moon-orbit {
    0%, 100% { translate: 0 0; }
    25% { translate: -3px 3px; }
    50% { translate: -6px 0; }
    75% { translate: -3px -3px; }
}

@keyframes ce-land-moon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes ce-land-moon-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@keyframes ce-land-emblem-light {
    0% { filter: brightness(.2); }
    55% { filter: brightness(1.45) drop-shadow(0 0 18px rgba(var(--land-red-rgb), .55)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 rgba(var(--land-red-rgb), 0)); }
}

/* the Enter ring: the same ember glow as the New Moon, slower and softer */
@keyframes ce-land-ring-glow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(var(--land-red-rgb), .22)) brightness(1); }
    50% { filter: drop-shadow(0 0 16px rgba(var(--land-red-rgb), .5)) brightness(1.04); }
}

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

    50% {
        opacity: .32;
    }
}

@keyframes ce-land-cue {
    0%, 100% {
        transform: translateY(0);
        opacity: .55;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

@keyframes ce-land-twinkle {
    0%, 100% {
        opacity: .08;
    }

    50% {
        opacity: .5;
    }
}

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

    20% {
        opacity: .5;
    }

    100% {
        transform: translate(22px, -190px);
        opacity: 0;
    }
}

/* ---------- narrower ---------------------------------------------------- */

@media (max-width: 760px) {
    .ce-land__hero {
        padding: 96px 24px 44px;
    }

    .ce-land__essence {
        padding: 44px 24px 40px;
    }

    .ce-land__essence-copy {
        font-size: 17.5px;
    }

    .ce-land__movement {
        padding: 0 24px 44px;
        gap: 36px;
    }

    .ce-land__movement-divider {
        gap: 18px;
    }

    .ce-land__movement-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .ce-land__enter {
        padding: 24px 24px 56px;
    }

    .ce-land__cta {
        padding: 14px 40px;
    }

    .ce-land__foot {
        padding: 28px 24px;
    }

    /* Too narrow to hold a true centre without crushing the nav — the mark
       goes back to the left edge here. */
    .ce-land__bar {
        display: flex;
        justify-content: space-between;
        padding: 16px 20px;
    }

    .ce-land__bar-nav {
        gap: 16px;
    }
}

/* Motion here is all decoration — drop it wholesale when asked to. */
@media (prefers-reduced-motion: reduce) {
    .ce-land *,
    .ce-land *::before,
    .ce-land *::after {
        animation: none !important;
        transition: none !important;
    }

    .ce-land__stars {
        display: none;
    }
}

/* ============================================================
   The Gateway (Views/Home/_Gateway.cshtml) — what a member lands
   on after signing in. Eight realms on a ring, a centre mark, and
   a reading panel that names whichever realm the walk is on.

   The stage is authored at a fixed 940x740 and scaled to fit by
   gateway.js, so everything inside is positioned in stage pixels
   and centred with negative margins — never transforms, so the
   spin, the breathe and the ripples each own their own.

   Realms the member can open are "is-open": solid ring, lit in the
   accent, clickable. The rest render dashed and unlit — real, but
   not yet theirs.
   ============================================================ */

.ce-gw {
    --ce-gw-dorm: 125, 118, 111;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* gateway.js scales the stage against its host box, so the height chain
       has to resolve to something real — the signed-in .ce-main is a plain
       block, so the gateway sets its own floor here. */
    min-height: 78vh;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 45%, #0a0806, #030202 70%);
}

/* the slow bloom behind the whole ring */
.ce-gw__veil {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1200px;
    height: 1200px;
    margin: -600px 0 0 -600px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--ce-accent-rgb), .1), rgba(0, 0, 0, 0) 68%);
    opacity: 0;
    animation: ce-gw-veil 5s ease .3s forwards, ce-gw-drift 14s ease-in-out 5.3s infinite;
}

.ce-gw__embers {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.ce-gw__ember {
    position: absolute;
    border-radius: 50%;
    background: rgba(var(--ce-accent-rgb), .75);
    box-shadow: 0 0 13px 2.6px rgba(var(--ce-accent-rgb), .3);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ce-gw__ember--1 {
    animation-name: ce-gw-ember1;
}

.ce-gw__ember--2 {
    animation-name: ce-gw-ember2;
}

.ce-gw__ember--3 {
    animation-name: ce-gw-ember3;
}

.ce-gw__ember--4 {
    animation-name: ce-gw-ember4;
}

/* ---------- layout ------------------------------------------------------ */

.ce-gw__main {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 26px 4px;
}

.ce-gw__stage-host {
    flex: 1 1 420px;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ce-gw__stage-wrap {
    position: relative;
    margin: 0 auto;
}

.ce-gw__stage {
    position: relative;
    width: 940px;
    height: 740px;
    transform-origin: 0 0;
}

.ce-gw__wires {
    position: absolute;
    inset: 0;
    width: 940px;
    height: 740px;
    pointer-events: none;
}

/* ---------- the ring, spokes and arcs ----------------------------------- */

.ce-gw__rim {
    stroke: rgba(232, 228, 223, .12);
    opacity: 0;
    animation: ce-gw-layer 4s ease 2.6s forwards;
}

.ce-gw__spoke {
    stroke: rgba(var(--ce-gw-dorm), .26);
    stroke-dasharray: 260;
    opacity: 0;
    transition: stroke 2.4s ease;
    animation: ce-gw-spoke 2.4s ease forwards;
}

    .ce-gw__spoke.is-on {
        stroke: rgba(var(--ce-gw-dorm), .55);
    }

    .ce-gw__spoke.is-open.is-on {
        stroke: rgba(var(--ce-accent-rgb), 1);
    }

.ce-gw__arc {
    stroke: rgba(var(--ce-gw-dorm), .24);
    opacity: 0;
    transition: stroke 2.4s ease;
    animation: ce-gw-layer 3s ease forwards;
}

    .ce-gw__arc.is-on {
        stroke: rgba(var(--ce-accent-rgb), .75);
    }

.ce-gw__pulse {
    fill: rgba(var(--ce-gw-dorm), .16);
    transition: fill 2.4s ease;
}

.ce-gw__core {
    fill: rgba(var(--ce-gw-dorm), .3);
    transition: fill 2.4s ease;
}

    .ce-gw__pulse.is-on {
        fill: rgba(var(--ce-gw-dorm), .55);
    }

    .ce-gw__core.is-on {
        fill: rgba(var(--ce-gw-dorm), .8);
    }

    .ce-gw__pulse.is-open.is-on,
    .ce-gw__pulse--arc.is-on {
        fill: rgba(var(--ce-accent-rgb), .95);
    }

    .ce-gw__core.is-open.is-on,
    .ce-gw__core--arc.is-on {
        fill: var(--ce-accent-bright);
    }

/* ---------- the centre mark --------------------------------------------- */

.ce-gw__centre {
    position: absolute;
    left: 470px;
    top: 370px;
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
    cursor: pointer;
    opacity: 0;
    animation: ce-gw-centre 2.4s cubic-bezier(.2, .7, .2, 1) .15s forwards,
               ce-gw-breathe 13s ease-in-out 2.7s infinite;
}

/* Two rings going out from the centre, half a beat apart, once the ring has
   arrived — so the centre reads as alive, and as somewhere to go. */
.ce-gw__beacon {
    position: absolute;
    left: 470px;
    top: 370px;
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.6px solid rgba(var(--ce-accent-rgb), .7);
    box-shadow: 0 0 18px rgba(var(--ce-accent-rgb), .35);
    pointer-events: none;
    opacity: 0;
    animation: ce-gw-beacon 4.2s ease-out 3s infinite;
}

    .ce-gw__beacon--late {
        animation-delay: 5.1s;
    }

/* ---------- the eight realms -------------------------------------------- */

.ce-gw__halo,
.ce-gw__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: ce-gw-layer 3s ease forwards;
}

.ce-gw__halo {
    width: 284px;
    height: 284px;
    margin: -142px 0 0 -142px;
    transition: background 2.4s ease;
}

    .ce-gw__halo.is-open {
        background: radial-gradient(circle, rgba(var(--ce-accent-rgb), .04), rgba(var(--ce-accent-rgb), 0) 66%);
    }

    .ce-gw__halo.is-on {
        background: radial-gradient(circle, rgba(var(--ce-gw-dorm), .07), rgba(var(--ce-gw-dorm), 0) 68%);
    }

    .ce-gw__halo.is-open.is-on {
        background: radial-gradient(circle, rgba(var(--ce-accent-rgb), .36), rgba(var(--ce-accent-rgb), .06) 52%, rgba(var(--ce-accent-rgb), 0) 72%);
    }

/* the dashed ring that turns slowly — only the open realms carry one */
.ce-gw__ring {
    width: 214px;
    height: 214px;
    margin: -107px 0 0 -107px;
    border: 2.4px dashed transparent;
    transition: border-color 2.4s ease;
    animation: ce-gw-layer 3s ease forwards, ce-gw-spin 74s linear infinite;
}

    .ce-gw__ring.is-open {
        border-color: rgba(var(--ce-accent-rgb), .18);
    }

    .ce-gw__ring.is-open.is-on {
        border-color: rgba(var(--ce-accent-rgb), .42);
    }

.ce-gw__node {
    position: absolute;
    width: 192px;
    height: 192px;
    margin: -96px 0 0 -96px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3.4px dashed rgba(var(--ce-gw-dorm), .52);
    background: radial-gradient(circle at 50% 62%, rgba(var(--ce-gw-dorm), .035), rgba(3, 3, 3, .72) 82%);
    color: #b2a58c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    cursor: default;
    opacity: 0;
    animation: ce-gw-node 1.7s cubic-bezier(.2, .7, .2, 1) forwards;
    transition: border-color 2.4s ease, background 2.4s ease, box-shadow 2.4s ease, color 2.4s ease;
}

    .ce-gw__node.is-on {
        color: #efe3cb;
        border-color: rgba(var(--ce-gw-dorm), .85);
    }

    .ce-gw__node.is-open {
        width: 196px;
        height: 196px;
        margin: -98px 0 0 -98px;
        border: 3px solid rgba(var(--ce-accent-rgb), .6);
        background: radial-gradient(circle at 50% 62%, rgba(255, 255, 255, .03), rgba(4, 3, 3, .85) 80%);
        color: #d2cbc2;
        cursor: pointer;
        text-decoration: none;
    }

    /* The open realms glow on their own, whether or not the walk is on
       them, so they stand apart from the unfolding ones at a glance. On a
       pseudo-element, so it never fights the node's own arrival animation
       or its lit box-shadow. */
    .ce-gw__node.is-open::before {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        box-shadow: 0 0 46px rgba(var(--ce-accent-rgb), .55), inset 0 0 24px rgba(var(--ce-accent-rgb), .22);
        pointer-events: none;
        opacity: .35;
        animation: ce-gw-glow 4.6s ease-in-out infinite;
    }

    .ce-gw__node.is-open.is-on {
        border-color: var(--ce-accent-bright);
        background: radial-gradient(circle at 50% 62%, rgba(var(--ce-accent-rgb), .24), rgba(4, 3, 3, .9) 78%);
        box-shadow: 0 0 90px rgba(var(--ce-accent-rgb), .45), inset 0 0 30px rgba(var(--ce-accent-rgb), .16);
        color: #fffaf2;
    }

/* The walk's spotlight (gateway.js): the realm it is on, over a ring that is
   already lit as a whole. Shadow, colour and border only — the node's
   arrival animation holds its transform. */
.ce-gw__node.is-focus {
    color: #fffaf2;
    border-color: rgba(var(--ce-gw-dorm), 1);
    background: radial-gradient(circle at 50% 62%, rgba(var(--ce-gw-dorm), .14), rgba(4, 3, 3, .9) 80%);
    box-shadow: 0 0 60px rgba(var(--ce-gw-dorm), .3);
}

    .ce-gw__node.is-open.is-focus {
        border-color: #fff4ea;
        background: radial-gradient(circle at 50% 62%, rgba(var(--ce-accent-rgb), .42), rgba(4, 3, 3, .9) 80%);
        box-shadow: 0 0 140px rgba(var(--ce-accent-rgb), .75), 0 0 34px rgba(var(--ce-accent-rgb), .6), inset 0 0 40px rgba(var(--ce-accent-rgb), .3);
    }

.ce-gw__halo.is-focus {
    background: radial-gradient(circle, rgba(var(--ce-gw-dorm), .16), rgba(var(--ce-gw-dorm), 0) 70%);
}

    .ce-gw__halo.is-open.is-focus {
        background: radial-gradient(circle, rgba(var(--ce-accent-rgb), .6), rgba(var(--ce-accent-rgb), .12) 52%, rgba(var(--ce-accent-rgb), 0) 74%);
    }

.ce-gw__ring.is-open.is-focus {
    border-color: rgba(var(--ce-accent-rgb), .8);
}

.ce-gw__spoke.is-focus {
    stroke: rgba(var(--ce-gw-dorm), .9);
    stroke-width: 3.4;
}

    .ce-gw__spoke.is-open.is-focus {
        stroke: var(--ce-accent-bright);
    }

.ce-gw__node-name {
    font-size: 20px;
    letter-spacing: .075em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ce-gw__node.is-open .ce-gw__node-name {
    font-size: 21px;
}

.ce-gw__node .ce-gw__node-name--long {
    font-size: 16px;
    letter-spacing: .04em;
}

/* the open realms carry a lit dot; the unfolding ones have none */
.ce-gw__node-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: none;
    background: rgba(var(--ce-accent-rgb), .45);
    transition: background 2.4s ease, box-shadow 2.4s ease;
}

.ce-gw__node.is-on .ce-gw__node-dot,
.ce-gw__node.is-open .ce-gw__node-dot {
    background: var(--ce-accent-bright);
    box-shadow: 0 0 12px 2px rgba(var(--ce-accent-rgb), .5);
}

/* ---------- the reading panel -------------------------------------------- */

.ce-gw__read {
    flex: 0 1 300px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    animation: ce-gw-copy 2.4s cubic-bezier(.2, .7, .2, 1) 3.4s forwards;
}

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

.ce-gw__read-rule {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--ce-accent-rgb), .85), rgba(var(--ce-accent-rgb), 0));
}

.ce-gw__read-label {
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ce-ink-3);
    transition: color .6s ease;
}

    .ce-gw__read-label.is-open {
        color: var(--ce-accent-bright);
    }

    .ce-gw__read-label.is-dormant {
        color: rgba(var(--ce-gw-dorm), .85);
    }

.ce-gw__read-title {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 300;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.ce-gw__read-verb {
    margin: -6px 0 0;
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ce-accent-bright);
}

    .ce-gw__read-verb:empty {
        display: none;
    }

.ce-gw__read-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ce-ink-3);
    text-wrap: pretty;
    white-space: pre-line;
}

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

@keyframes ce-gw-veil {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ce-gw-drift {
    0%, 100% {
        opacity: .75;
    }

    50% {
        opacity: 1;
    }
}

@keyframes ce-gw-layer {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ce-gw-spoke {
    from {
        stroke-dashoffset: 260;
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes ce-gw-node {
    from {
        opacity: 0;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ce-gw-centre {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: .94;
        transform: none;
    }
}

@keyframes ce-gw-breathe {
    0%, 100% {
        transform: scale(1);
        opacity: .94;
    }

    50% {
        transform: scale(1.035);
        opacity: 1;
    }
}

@keyframes ce-gw-beacon {
    0% {
        transform: scale(.92);
        opacity: 0;
    }

    12% {
        opacity: .75;
    }

    100% {
        transform: scale(2.3);
        opacity: 0;
    }
}

@keyframes ce-gw-glow {
    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}

@keyframes ce-gw-spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ce-gw-copy {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

    22% {
        opacity: .4;
    }

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

    76% {
        opacity: .32;
    }

    100% {
        transform: translate(-9px, -64px);
        opacity: 0;
    }
}

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

    24% {
        opacity: .34;
    }

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

    74% {
        opacity: .28;
    }

    100% {
        transform: translate(-54px, 14px);
        opacity: 0;
    }
}

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

    26% {
        opacity: .3;
    }

    50% {
        transform: translate(22px, 18px);
        opacity: .18;
    }

    72% {
        opacity: .26;
    }

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

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

    30% {
        opacity: .26;
    }

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

    70% {
        opacity: .24;
    }

    100% {
        transform: translate(18px, 58px);
        opacity: 0;
    }
}

/* ---------- narrower ----------------------------------------------------- */

@media (max-width: 900px) {
    .ce-gw__main {
        align-content: center;
        gap: 8px;
        padding: 0 20px 4px;
    }

    .ce-gw__stage-host {
        flex: 1 1 100%;
        align-self: auto;
    }

    /* stacked: the ring stays on top, the reading panel under it */
    .ce-gw__read {
        flex: 1 1 100%;
        max-width: none;
        align-items: flex-start;
        order: 1;
    }
}

/* Every animation here is arrival and atmosphere — with motion off the
   gateway simply renders finished. */
@media (prefers-reduced-motion: reduce) {
    .ce-gw *,
    .ce-gw *::before,
    .ce-gw *::after {
        animation: none !important;
        transition: none !important;
        opacity: 1;
    }

    .ce-gw__embers,
    .ce-gw__beacon {
        display: none;
    }
}

/* ============================================================
   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-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;
    transition: border-color .2s ease, background-color .2s ease;
}

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

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

/* select and textarea reuse .ce-auth__input for the same box, just with
   the bits only they need; select.ce-input (admin and editor forms) shares the chevron
   and the styled list, but not the grey placeholder look; the toolbar's
   borderless .ce-sort gets the same list (see the @supports block) */
select.ce-auth__input,
select.ce-input {
    cursor: pointer;
    /* dark native popup so the open list isn't the browser's white */
    color-scheme: dark;
    /* our own chevron instead of the OS arrow */
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b837b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

    select.ce-auth__input:hover,
    select.ce-input:hover {
        border-color: rgba(255, 255, 255, .2);
    }

    select.ce-auth__input:focus,
    select.ce-input:focus {
        border-color: var(--ce-accent-edge);
    }

    /* .ce-input:focus resets the whole background, chevron included */
    select.ce-input:focus {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b837b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
    }

    /* "Select one" still showing reads as a placeholder, not an answer */
    select.ce-auth__input:has(option[value=""]:checked) {
        color: var(--ce-ink-5);
    }

    select.ce-auth__input option,
    select.ce-input option {
        color: var(--ce-ink);
        background: var(--ce-bg);
    }

        select.ce-auth__input option[value=""] {
            color: var(--ce-ink-5);
        }

/* Browsers with customizable selects (Chrome/Edge 135+) get a fully styled
   list that fades and slides open; everyone else keeps the dark native one */
@supports (appearance: base-select) {
    select.ce-auth__input,
    select.ce-auth__input::picker(select),
    select.ce-input,
    select.ce-input::picker(select),
    select.ce-sort,
    select.ce-sort::picker(select) {
        appearance: base-select;
    }

    /* .ce-input's taller line-height would pin the arrow to the top */
    select.ce-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-right: 16px;
    }

    select.ce-auth__input,
    select.ce-input,
    select.ce-input:focus {
        background-image: none;
    }

    /* the Gathering editor draws its own chevron as a background; drop it
       here so there's only the picker icon */
    .ce-editor select.ce-edselect,
    .ce-editor select.ce-edselect:focus {
        appearance: base-select;
        background-image: none;
        padding-right: 16px;
    }

    /* the sort stays borderless text, with a smaller arrow beside it */
    select.ce-sort {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        select.ce-auth__input::picker-icon,
        select.ce-input::picker-icon,
        select.ce-sort::picker-icon {
            content: "";
            width: 12px;
            height: 8px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b837b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
            transition: rotate .25s ease;
        }

        select.ce-auth__input:open::picker-icon,
        select.ce-input:open::picker-icon,
        select.ce-sort:open::picker-icon {
            rotate: 180deg;
        }

        select.ce-auth__input::picker(select),
        select.ce-input::picker(select),
        select.ce-sort::picker(select) {
            margin-top: 6px;
            padding: 6px;
            background: var(--ce-bg-raised);
            border: 1px solid var(--ce-line-strong);
            border-radius: 10px;
            box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
            opacity: 0;
            translate: 0 -6px;
            transition: opacity .2s ease, translate .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;
        }

        select.ce-auth__input:open::picker(select),
        select.ce-input:open::picker(select),
        select.ce-sort:open::picker(select) {
            opacity: 1;
            translate: 0 0;
        }

    @starting-style {
        select.ce-auth__input:open::picker(select),
        select.ce-input:open::picker(select),
        select.ce-sort:open::picker(select) {
            opacity: 0;
            translate: 0 -6px;
        }
    }

        select.ce-auth__input option,
        select.ce-input option,
        select.ce-sort option {
            padding: 10px 12px;
            border-radius: 6px;
            background: transparent;
            transition: background-color .15s ease, color .15s ease;
        }

            select.ce-auth__input option:hover,
            select.ce-auth__input option:focus-visible,
            select.ce-input option:hover,
            select.ce-input option:focus-visible,
            select.ce-sort option:hover,
            select.ce-sort option:focus-visible {
                outline: none;
                color: var(--ce-ink);
                background: rgba(255, 255, 255, .06);
            }

            select.ce-auth__input option:checked,
            select.ce-input option:checked,
            select.ce-sort option:checked {
                color: var(--ce-accent-label);
            }

            select.ce-auth__input option::checkmark,
            select.ce-input option::checkmark,
            select.ce-sort option::checkmark {
                display: none;
            }

        /* after the shared picker rules so these win */
        select.ce-sort::picker-icon {
            width: 10px;
            height: 7px;
            background-size: 10px 7px;
        }

        select.ce-sort::picker(select) {
            min-width: 160px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .ce-auth__input,
    select.ce-auth__input option,
    select.ce-input option,
    select.ce-sort option {
        transition: none;
    }

    /* kept apart: an unknown pseudo-element would void the rule above */
    select.ce-auth__input::picker(select),
    select.ce-auth__input::picker-icon,
    select.ce-input::picker(select),
    select.ce-input::picker-icon,
    select.ce-sort::picker(select),
    select.ce-sort::picker-icon {
        transition: none;
    }
}

textarea.ce-auth__input {
    min-height: 96px;
    line-height: 1.6;
    resize: vertical;
}

/* an inline "(optional)" after a label — same size, just not shouting
   in caps like the label around it */
.ce-auth__optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ce-ink-5);
}

.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);
    }

/* --- agreements: the documents an approved member accepts on entry ----- */

/* a little wider than the sign-in forms, for reading */
.ce-auth__form--wide {
    max-width: 620px;
}

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

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

/* each document scrolls in its own box, so the checkboxes stay in reach */
.ce-doc__body {
    max-height: 240px;
    overflow-y: auto;
    padding: 16px 18px;
    border: 1px solid var(--ce-line-control);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ce-ink-2);
}

    .ce-doc__body:focus-visible {
        outline: none;
        border-color: var(--ce-accent-edge);
    }

    .ce-doc__body p {
        margin: 0 0 12px;
    }

        .ce-doc__body p:last-child {
            margin-bottom: 0;
        }

/* on the public Privacy page the text is the page: no box, no scroll */
.ce-doc__body--page {
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
}

/* marks a document still waiting on its finalized text */
.ce-doc__draft {
    font-style: italic;
    color: var(--ce-ink-3);
}

/* --- 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);
}

/* a step already behind them: filled, but quiet next to the current one */
.is-done .ce-step__dot {
    border-color: var(--ce-ink-6);
    background: var(--ce-ink-6);
}

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

.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-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);
}

/* ---------- Request Access questionnaire, surfaced for review ---------- */

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

.ce-req__journey p {
    margin: 6px 0 0;
    max-width: 68ch;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ce-ink-2);
    text-wrap: pretty;
}

    .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);
        }

/* ---------- Admin > Email Settings -------------------------------------- */

.ce-settings-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 12px;
    padding: 28px;
}

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

.ce-settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ce-field--narrow {
    max-width: 220px;
}

.ce-settings-hint {
    margin: -8px 0 0;
    max-width: 60ch;
    font-size: 12.5px;
    color: var(--ce-ink-4);
    line-height: 1.7;
    text-wrap: pretty;
}

.ce-settings-panel .ce-settings-testrow {
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}

    .ce-settings-testrow .ce-input {
        flex: 1 1 200px;
    }

.ce-stats--email {
    grid-template-columns: repeat(3, 1fr);
    max-width: 480px;
}

.ce-queue-list {
    display: flex;
    flex-direction: column;
}

.ce-queue-item {
    border-top: 1px solid var(--ce-line);
    padding: 12px 0;
}

.ce-queue-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto auto;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}

.ce-queue-row__error {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

    .ce-queue-row__error span {
        font-size: 12.5px;
        line-height: 1.6;
        color: #a8382c;
        overflow-wrap: anywhere;
        text-wrap: pretty;
    }

.ce-queue-row__retry {
    flex: none;
}

    .ce-queue-row__retry button {
        background: none;
        border: 0;
        padding: 0;
        font-family: inherit;
        font-size: 12px;
        letter-spacing: .04em;
        color: var(--ce-accent-soft);
        cursor: pointer;
        white-space: nowrap;
    }

        .ce-queue-row__retry button:hover {
            color: var(--ce-accent-bright);
        }

.ce-queue-row__to {
    color: var(--ce-ink);
    overflow-wrap: anywhere;
}

.ce-queue-row__subject {
    color: var(--ce-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-queue-row__status {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ce-ink-4);
}

    .ce-queue-row__status--sent {
        color: #7e9a78;
    }

    .ce-queue-row__status--failed {
        color: #a8382c;
    }

    .ce-queue-row__status--sending {
        color: var(--ce-accent-bright);
    }

.ce-queue-row__time {
    color: var(--ce-ink-4);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .ce-settings-row {
        grid-template-columns: 1fr;
    }

    .ce-queue-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.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-forum__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* the open Movement's question and meaning, as a quiet callout under the title */
.ce-movement-detail {
    max-width: 640px;
    margin: -6px 0 0;
    padding: 16px 18px;
    border-left: 2px solid var(--ce-accent-edge);
    background: rgba(var(--ce-accent-rgb), .06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ce-movement-detail__question {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    color: var(--ce-accent-soft);
    text-wrap: pretty;
}

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

/* ---------- rail: the Creative Journey as a timeline ------------------- */

.ce-rail__group--foot {
    padding-top: 22px;
    border-top: 1px solid var(--ce-line-soft);
}

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

.ce-journey__step {
    display: flex;
    gap: 14px;
    color: var(--ce-ink-3);
}

.ce-journey__track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 11px;
    flex: none;
    padding-top: 4px;
}

.ce-journey__node {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--ce-accent-edge);
    flex: none;
    transition: background .2s ease, box-shadow .2s ease;
}

.ce-journey__line {
    flex: 1;
    width: 1px;
    min-height: 24px;
    margin-top: 5px;
    background: var(--ce-line-strong);
}

.ce-journey li:last-child .ce-journey__line {
    background: transparent;
}

.ce-journey__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
    padding-bottom: 18px;
}

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

.ce-journey__name {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* only the open Movement shows its question */
.ce-journey__question {
    display: none;
    font-size: 13px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.55;
    color: var(--ce-ink-4);
    text-wrap: pretty;
}

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

    .ce-journey__step:hover .ce-journey__node {
        border-color: var(--ce-accent-edge-hi);
    }

.ce-journey__step.is-walked .ce-journey__node {
    background: var(--ce-accent-soft);
    border-color: var(--ce-accent-soft);
    box-shadow: 0 0 10px var(--ce-glow);
}

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

    .ce-journey__step.is-active .ce-journey__node {
        background: var(--ce-accent-bright);
        border-color: var(--ce-accent-bright);
        box-shadow: 0 0 14px rgba(var(--ce-accent-rgb), .9);
    }

    .ce-journey__step.is-active .ce-journey__question {
        display: block;
        color: var(--ce-accent-soft);
    }

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

/* ---------- My Conversations: your path so far ------------------------ */

.ce-path {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
    padding: 20px 22px;
    border: 1px solid rgba(var(--ce-accent-rgb), .3);
    background: rgba(var(--ce-accent-rgb), .06);
}

.ce-path__label,
.ce-primer__label {
    color: var(--ce-accent-soft);
}

.ce-path__dots,
.ce-primer__dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ce-primer__dots {
    gap: 5px;
}

.ce-path__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: rgba(255, 255, 255, .14);
}

    .ce-path__dot.is-walked {
        background: var(--ce-accent-soft);
    }

.ce-path__dot--sm {
    width: 5px;
    height: 5px;
}

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

/* ---------- All Conversations: primer on the Movements ---------------- */

.ce-primer {
    display: flex;
    flex-direction: column;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--ce-line-soft);
}

.ce-primer__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

    .ce-primer__summary::-webkit-details-marker {
        display: none;
    }

    .ce-primer__summary::marker {
        content: "";
    }

.ce-primer__rule {
    flex: 1;
    height: 1px;
    background: var(--ce-line);
}

.ce-primer__summary:hover .ce-primer__toggle {
    color: var(--ce-ink-3);
}

.ce-primer .ce-primer__hide,
.ce-primer[open] .ce-primer__show {
    display: none;
}

.ce-primer[open] .ce-primer__hide {
    display: inline;
}

.ce-primer[open] .ce-drop__caret {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.ce-primer__intro {
    margin: 18px 0 18px;
    max-width: 620px;
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink-3);
    line-height: 1.75;
    text-wrap: pretty;
}

/* 1px gap over a line-coloured ground draws the hairlines between cards */
.ce-primer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    background: var(--ce-line);
    border: 1px solid var(--ce-line);
}

.ce-primer__card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px 18px;
    background: var(--ce-bg-raised);
    color: var(--ce-ink-3);
    transition: background .2s ease;
}

    .ce-primer__card:hover {
        background: #140b0c;
    }

.ce-primer__dots {
    padding-bottom: 2px;
}

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

.ce-primer__question {
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.55;
    color: var(--ce-accent-soft);
    text-wrap: pretty;
}

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

@media (max-width: 720px) {
    .ce-movement-detail,
    .ce-path,
    .ce-primer {
        margin: 16px var(--ce-pad-x) 0;
    }

    .ce-forum__heading .ce-eyebrow,
    .ce-forum__heading .ce-back {
        padding: 16px var(--ce-pad-x) 0;
    }

    .ce-forum__heading .ce-eyebrow + .ce-forum__title,
    .ce-forum__heading .ce-back + .ce-forum__title {
        padding-top: 0;
    }

    .ce-primer {
        padding-bottom: 18px;
        border-bottom: 0;
    }

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

/* ---------- 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;
}

/* ============================================================
   Exploration (Views/Forum/Explore.cshtml, Chamber.cshtml) —
   Conversations, renamed Reflections, held in seven Chambers in
   place of the old six Movements of the Creative Journey. Shares
   the forum's rail / toolbar / thread-row system (above); these
   rules are only what's new here: the Chamber rail list, the
   overview's intro and card grid, and the Chamber page's
   breadcrumb and All / Mine tabs.
   ============================================================ */

.ce-forum__title--lg {
    font-size: 30px;
    line-height: 1.25;
}

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

    .ce-crumb a {
        color: var(--ce-ink-4);
    }

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

    .ce-crumb__sep {
        color: var(--ce-ink-6);
    }

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

.ce-explore__lead {
    max-width: 640px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--ce-ink-3);
    text-wrap: pretty;
}

.ce-chamber-lead {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ce-chamber-lead__q {
    font-style: italic;
    font-size: 15px;
    font-weight: 300;
    color: var(--ce-ink-2);
}

.ce-chamber-lead__body {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--ce-ink-3);
    text-wrap: pretty;
}

/* ---------- the chamber rail: a simpler journey, name only -------------- */

.ce-chamber-rail {
    display: flex;
    flex-direction: column;
}

.ce-chamber-rail__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--ce-ink-3);
}

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

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

/* the name takes the slack so the count sits at the right, as on the rooms */
.ce-chamber-rail__name {
    flex: 1;
    min-width: 0;
}

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

.ce-chamber-rail__track {
    position: relative;
    width: 7px;
    flex: none;
    align-self: stretch;
    display: flex;
    justify-content: center;
}

.ce-chamber-rail__node {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--ce-ink-5);
    background: var(--ce-bg);
}

.ce-chamber-rail__item.is-active .ce-chamber-rail__node {
    border-color: var(--ce-mark);
    background: var(--ce-mark);
}

.ce-chamber-rail__line {
    position: absolute;
    top: 13px;
    bottom: -7px;
    width: 1px;
    background: var(--ce-line-soft);
}

.ce-chamber-rail__item:last-child .ce-chamber-rail__line {
    display: none;
}

/* ---------- the overview's chamber grid ---------------------------------- */

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

.ce-chambers-head__label {
    color: var(--ce-mark);
    font-size: 13px;
    letter-spacing: .22em;
}

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

/* The Chambers round a ring: the intro inside the circle, a spoke from the
   centre to each Chamber's dot on the rim, and its label outside. The ring is
   a 756 x 720 stage; Explore.cshtml places every label in cqi (756 stage units
   = 100cqi) and gives each dot its offset from its label as --dx / --dy.

   The ring is alive on one long cycle. A spark runs out along each spoke in
   turn from 01, spread over --ch-sweep; --ch-lag later it lands, and the dot
   flares and the label lights. When all have fired the whole ring glows, then
   it starts again. Every delay is measured back from --ch-cycle, so the page
   opens at the start of the cycle with 01 about to fire. --i and --n come from
   Explore.cshtml. */
.ce-chamber-ring {
    --ch-red: #e0141e;
    --ch-hot: #ff4a3d;
    --ch-cycle: 19.6s;
    --ch-sweep: 14s;
    --ch-lag: 2.35s;
    /* how a Chamber looks lit: hovered on its own, or all seven in the finale */
    --ch-lit-glow: radial-gradient(closest-side, rgba(224, 20, 30, .24), rgba(224, 20, 30, .08) 55%, rgba(224, 20, 30, 0));
    --ch-lit-dot: 0 0 0 5px var(--ce-bg), 0 0 20px 5px rgba(255, 60, 60, .55);
    --ch-lit-text: brightness(1.2) drop-shadow(0 0 6px rgba(255, 60, 50, .4));
    --ch-lit-scale: 1.06;
    font-family: 'Jost', var(--ce-font);
    --ch-lit-rim: rgba(255, 70, 60, .55);
    --ch-lit-rim-glow: 0 0 18px rgba(224, 20, 30, .25), inset 0 0 18px rgba(224, 20, 30, .16);
    --ch-lit-rim-fill: radial-gradient(closest-side, rgba(224, 20, 30, .12), rgba(0, 0, 0, 0));
    position: relative;
    width: min(100%, 756px);
    aspect-ratio: 756 / 720;
    margin: 4px auto 0;
    container-type: inline-size;
}

.ce-chamber-node,
.ce-chamber-ring__spoke {
    --ch-spark-at: calc(var(--i, 0) * var(--ch-sweep) / var(--n, 7) - var(--ch-cycle));
    --ch-land-at: calc(var(--ch-spark-at) + var(--ch-lag));
}

/* centre (378, 360), radius 200 — in cqi: 50, 47.62, 26.46 */
.ce-chamber-ring__rim,
.ce-chamber-ring__finale {
    position: absolute;
    left: 50cqi;
    top: 47.62cqi;
    width: 52.91cqi;
    height: 52.91cqi;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ce-chamber-ring__rim {
    border: 1px solid rgba(255, 255, 255, .14);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.ce-chamber-ring__spoke {
    position: absolute;
    left: 50cqi;
    top: 47.62cqi;
    width: 26.46cqi;
    height: 1px;
    transform-origin: 0 50%;
    transform: rotate(var(--deg));
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.ce-chamber-ring__spark {
    position: absolute;
    left: 0;
    top: -1px;
    width: 4.76cqi;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 70, 60, 0), rgba(255, 90, 80, 1));
    box-shadow: 0 0 8px rgba(255, 60, 50, .8);
    opacity: 0;
    animation: ce-chamber-spark var(--ch-cycle) cubic-bezier(.4, 0, .6, 1) infinite;
    animation-delay: var(--ch-spark-at);
}

/* the glow round the whole ring once every Chamber has fired */
.ce-chamber-ring__finale {
    border: 1px solid var(--ch-lit-rim);
    box-shadow: var(--ch-lit-rim-glow);
    background: var(--ch-lit-rim-fill);
    opacity: 0;
    animation: ce-chamber-finale var(--ch-cycle) ease-in-out infinite;
}

.ce-chamber-ring__centre {
    position: absolute;
    left: 50cqi;
    top: 47.62cqi;
    width: 35.71cqi;
    padding: 18px 0;
    transform: translate(-50%, -50%);
    text-align: center;
    /* fades the spokes out behind the words */
    background: radial-gradient(closest-side, var(--ce-bg) 70%, transparent);
}

    .ce-chamber-ring__centre .ce-chambers-head {
        gap: 12px;
        align-items: center;
    }

    .ce-chamber-ring__centre .ce-chambers-head__label {
        font-size: clamp(10px, 1.59cqi, 12px);
        line-height: 1.6;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--ch-red);
    }

    .ce-chamber-ring__centre .ce-chambers-head__sub {
        margin: 0;
        font-size: clamp(11px, 1.72cqi, 13px);
        line-height: 1.7;
        color: var(--ce-ink-3);
        text-wrap: pretty;
    }

.ce-chamber-node {
    position: absolute;
    width: 23.81cqi;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .66cqi;
    text-align: center;
    color: inherit;
    text-decoration: none;
    isolation: isolate;
    animation: ce-chamber-finale-text var(--ch-cycle) ease-in-out infinite;
}

    .ce-chamber-node:hover,
    .ce-chamber-node:focus-visible {
        color: inherit;
        outline: none;
    }

    /* The glow behind the label: ::before for the finale, ::after for a hover.
       They're two layers because a hover can't override a running animation. */
    .ce-chamber-node::before,
    .ce-chamber-node::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: -1;
        width: 28.57cqi;
        height: 19.84cqi;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background: var(--ch-lit-glow);
        opacity: 0;
        pointer-events: none;
    }

    .ce-chamber-node::before {
        animation: ce-chamber-finale var(--ch-cycle) ease-in-out infinite;
    }

    .ce-chamber-node::after {
        transition: opacity .3s ease;
    }

    .ce-chamber-node:hover::after,
    .ce-chamber-node:focus-visible::after {
        opacity: 1;
    }

/* The dot sits on the rim, offset from the label's centre. It keeps its
   position in `translate`, so the flare's `scale` grows it about its own
   centre. Lit, it grows a little: ::before for the finale, ::after for a hover. */
.ce-chamber-node__dot {
    position: absolute;
    left: calc(50% + var(--dx, 0px));
    top: calc(50% + var(--dy, 0px));
    width: 1.59cqi;
    height: 1.59cqi;
    min-width: 9px;
    min-height: 9px;
    border-radius: 50%;
    background: var(--ch-red);
    box-shadow: 0 0 0 5px var(--ce-bg), 0 0 14px rgba(224, 20, 30, .45);
    translate: -50% -50%;
    animation: ce-chamber-flare var(--ch-cycle) ease-out infinite;
    animation-delay: var(--ch-land-at);
}

    .ce-chamber-node__dot::before,
    .ce-chamber-node__dot::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        background: var(--ch-hot);
        box-shadow: var(--ch-lit-dot);
        opacity: 0;
    }

    .ce-chamber-node__dot::before {
        animation: ce-chamber-finale var(--ch-cycle) ease-in-out infinite;
    }

    .ce-chamber-node__dot::after {
        transition: opacity .3s ease;
    }

    .ce-chamber-node:hover .ce-chamber-node__dot::after,
    .ce-chamber-node:focus-visible .ce-chamber-node__dot::after {
        opacity: 1;
    }

.ce-chamber-node__num,
.ce-chamber-node__name,
.ce-chamber-node__q {
    transition: filter .3s ease, transform .3s ease;
}

.ce-chamber-node:hover .ce-chamber-node__num,
.ce-chamber-node:hover .ce-chamber-node__name,
.ce-chamber-node:hover .ce-chamber-node__q,
.ce-chamber-node:focus-visible .ce-chamber-node__num,
.ce-chamber-node:focus-visible .ce-chamber-node__name,
.ce-chamber-node:focus-visible .ce-chamber-node__q {
    filter: var(--ch-lit-text);
    transform: scale(var(--ch-lit-scale));
}

/* Hovering the middle lights the whole ring, as the finale does. Not on the
   list layout, where the intro is only a block of text above the Chambers. */
@media (hover: hover) and (min-width: 761px) {
    .ce-chamber-ring:has(.ce-chamber-ring__centre:hover) .ce-chamber-ring__rim {
        border-color: var(--ch-lit-rim);
        box-shadow: var(--ch-lit-rim-glow);
        background: var(--ch-lit-rim-fill);
    }

    .ce-chamber-ring__centre:hover ~ .ce-chamber-node::after,
    .ce-chamber-ring__centre:hover ~ .ce-chamber-node .ce-chamber-node__dot::after {
        opacity: 1;
    }

    .ce-chamber-ring__centre:hover ~ .ce-chamber-node .ce-chamber-node__num,
    .ce-chamber-ring__centre:hover ~ .ce-chamber-node .ce-chamber-node__name,
    .ce-chamber-ring__centre:hover ~ .ce-chamber-node .ce-chamber-node__q {
        filter: var(--ch-lit-text);
        transform: scale(var(--ch-lit-scale));
    }
}

.ce-chamber-node__glow {
    position: absolute;
    inset: -16px -18px;
    z-index: -1;
    border-radius: 50%;
    background: var(--ch-lit-glow);
    opacity: 0;
    pointer-events: none;
    animation: ce-chamber-glow var(--ch-cycle) ease-out infinite;
    animation-delay: var(--ch-land-at);
}

/* The words swell a little as they light and settle back. Scaled, not resized,
   so nothing around them moves. This wrapper takes the two timed moments, its
   own turn (`scale`) and the finale (`transform`); a hover scales the lines
   inside it, because it can't override a running animation. */
.ce-chamber-node__text {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: inherit;
    animation: ce-chamber-swell var(--ch-cycle) ease-in-out infinite,
               ce-chamber-finale-swell var(--ch-cycle) ease-in-out infinite;
    animation-delay: var(--ch-land-at), 0s;
}

.ce-chamber-node__num {
    font-size: clamp(9px, 1.32cqi, 10px);
    letter-spacing: .2em;
    color: var(--ch-red);
    animation: ce-chamber-num var(--ch-cycle) ease-out infinite;
    animation-delay: var(--ch-land-at);
}

.ce-chamber-node__name {
    font-size: clamp(10px, 1.59cqi, 12px);
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #c9c2ba;
    animation: ce-chamber-name var(--ch-cycle) ease-out infinite;
    animation-delay: var(--ch-land-at);
}

.ce-chamber-node__q {
    font-family: 'Spectral', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(11px, 1.92cqi, 14.5px);
    line-height: 1.4;
    color: var(--ce-ink-3);
    text-wrap: balance;
    animation: ce-chamber-q var(--ch-cycle) ease-out infinite;
    animation-delay: var(--ch-land-at);
}

@keyframes ce-chamber-swell {
    0%, 2%, 30%, 100% {
        scale: 1;
    }

    11% {
        scale: var(--ch-lit-scale);
    }
}

@keyframes ce-chamber-finale-swell {
    0%, 80%, 97%, 100% {
        transform: none;
    }

    84%, 88% {
        transform: scale(var(--ch-lit-scale));
    }
}

@keyframes ce-chamber-spark {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    12% {
        transform: translateX(24.87cqi);
        opacity: 1;
    }

    15%, 100% {
        transform: translateX(24.87cqi);
        opacity: 0;
    }
}

@keyframes ce-chamber-flare {
    0% {
        scale: 1.7;
        background: var(--ch-hot);
        box-shadow: 0 0 0 5px var(--ce-bg), 0 0 30px 8px rgba(255, 60, 60, .85);
    }

    14%, 100% {
        scale: 1;
        background: var(--ch-red);
        box-shadow: 0 0 0 5px var(--ce-bg), 0 0 14px rgba(224, 20, 30, .45);
    }
}

@keyframes ce-chamber-glow {
    0%, 2% {
        opacity: 0;
        transform: scale(.8);
    }

    11% {
        opacity: 1;
        transform: scale(1);
    }

    36%, 100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

@keyframes ce-chamber-num {
    0%, 2%, 30%, 100% {
        color: var(--ch-red);
        text-shadow: none;
    }

    10% {
        color: #ff6a5c;
        text-shadow: 0 0 10px rgba(255, 70, 60, .9);
    }
}

@keyframes ce-chamber-name {
    0%, 2%, 34%, 100% {
        color: #c9c2ba;
        text-shadow: none;
    }

    10% {
        color: #fff;
        text-shadow: 0 0 14px rgba(255, 80, 70, .75);
    }
}

@keyframes ce-chamber-q {
    0%, 4%, 40%, 100% {
        color: var(--ce-ink-3);
    }

    14% {
        color: #e8dcd2;
    }
}

@keyframes ce-chamber-finale {
    0%, 80%, 97%, 100% {
        opacity: 0;
    }

    84%, 88% {
        opacity: 1;
    }
}

@keyframes ce-chamber-finale-text {
    0%, 80%, 97%, 100% {
        filter: none;
    }

    84%, 88% {
        filter: var(--ch-lit-text);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ce-chamber-ring__spark,
    .ce-chamber-ring__finale,
    .ce-chamber-node,
    .ce-chamber-node::before,
    .ce-chamber-node__dot,
    .ce-chamber-node__dot::before,
    .ce-chamber-node__glow,
    .ce-chamber-node__text,
    .ce-chamber-node__num,
    .ce-chamber-node__name,
    .ce-chamber-node__q {
        animation: none;
    }
}

/* Phone: the forum column drops its padding there (threads and the toolbar
   carry their own), so the Exploration pieces that sit straight in it take
   the same gutter as the forum title. */
@media (max-width: 720px) {
    .ce-forum__body > .ce-crumb,
    .ce-forum__body > .ce-explore__lead,
    .ce-forum__body > .ce-chamber-lead,
    .ce-forum__body > .ce-tabs,
    .ce-chamber-ring__centre {
        padding-left: var(--ce-pad-x);
        padding-right: var(--ce-pad-x);
    }

    /* the list's rows, not the list, take the gutter — its background
       draws the dividers */
    .ce-chamber-node {
        padding-left: calc(var(--ce-pad-x) + 22px) !important;
        padding-right: var(--ce-pad-x) !important;
    }

    .ce-chamber-node__dot {
        left: var(--ce-pad-x) !important;
    }

    .ce-forum__body > .ce-crumb,
    .ce-forum__body > .ce-explore__lead,
    .ce-forum__body > .ce-chamber-lead {
        margin-top: 12px;
        margin-bottom: 12px;
    }
}

/* Narrow columns: the labels won't fit round the circle, so it unrolls —
   the intro first, then the Chambers as a list. */
@media (max-width: 760px) {
    .ce-chamber-ring {
        width: 100%;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 1px;
        background: var(--ce-line-soft);
        border-bottom: 1px solid var(--ce-line-soft);
    }

    .ce-chamber-ring__rim,
    .ce-chamber-ring__spoke,
    .ce-chamber-ring__finale,
    .ce-chamber-node::before,
    .ce-chamber-node::after {
        display: none;
    }

    .ce-chamber-ring__centre {
        position: static;
        width: auto;
        transform: none;
        text-align: left;
        padding: 0 0 18px;
        background: var(--ce-bg);
    }

        .ce-chamber-ring__centre .ce-chambers-head {
            gap: 6px;
            align-items: flex-start;
        }

        .ce-chamber-ring__centre .ce-chambers-head__label {
            max-width: none;
            font-size: 13px;
        }

        .ce-chamber-ring__centre .ce-chambers-head__sub {
            font-size: 13px;
            line-height: 1.7;
        }

    .ce-chamber-node {
        position: relative;
        left: auto !important;   /* override the ring placement written inline */
        top: auto !important;
        width: auto;
        transform: none;
        align-items: flex-start;
        gap: 6px;
        padding: 16px 0 16px 22px;
        text-align: left;
        background: var(--ce-bg);
    }

    .ce-chamber-node__dot {
        left: 0;
        top: 24px;
        width: 8px;
        height: 8px;
        min-width: 0;
        min-height: 0;
        translate: none;
    }

    .ce-chamber-node__glow {
        inset: 0;
    }

    /* left-aligned here, so the words grow from their left edge */
    .ce-chamber-node__text,
    .ce-chamber-node__num,
    .ce-chamber-node__name,
    .ce-chamber-node__q {
        transform-origin: 0 50%;
    }

    .ce-chamber-node__num {
        font-size: 11px;
    }

    .ce-chamber-node__name {
        font-size: 13.5px;
    }

    .ce-chamber-node__q {
        max-width: none;
        font-size: 15px;
    }
}

/* ---------- the Chamber page's All / Mine tabs --------------------------- */

.ce-tabs {
    display: flex;
    align-items: center;
    gap: 26px;
    border-bottom: 1px solid var(--ce-line-soft);
}

.ce-tab {
    padding: 4px 0 14px;
    font-size: 13px;
    font-weight: 300;
    color: var(--ce-ink-4);
    border-bottom: 1.5px solid transparent;
    margin-bottom: -1px;
}

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

    .ce-tab.is-active {
        color: var(--ce-ink);
        border-bottom-color: var(--ce-mark);
    }

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

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

.ce-gallery {
    gap: 34px;
}

/* ---------- Emergence intro, above the Gallery itself ------------------ */

.ce-emergence-intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
}

.ce-emergence-intro__title {
    margin: 0;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.3;
    text-wrap: pretty;
}

.ce-emergence-intro__body {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--ce-ink-3);
    text-wrap: pretty;
}

.ce-emergence-intro__divider {
    display: block;
    height: 1px;
    background: var(--ce-line-soft);
}

/* ---------- 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: the whole composition runs awake on its own, no hover needed */
.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;
    --glow: 1;
    --play: running;
}

.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: 1;
    filter: drop-shadow(0 0 calc(var(--glow, 0) * 18px) rgba(var(--ce-accent-rgb), .6));
}

.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;
}

/* 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;
        opacity: 1;
    }

.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;
    }

/* ---------- 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: block;
        font-style: normal;
        font-size: 9px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ce-ink-4);
        line-height: 1.65;
    }

/* ---------- 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);
    }

/* ---------- the Chamber's Reflections ----------------------------------- */

/* One conversation for the whole Chamber, held in place beneath it — the
   shared discussion panel (.ce-gddisc), set off from the creators above. */
.ce-gallery__reflect {
    margin-top: 36px;
}

/* ---------- 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-static:hover {
        transform: none;
        border-color: var(--ce-line-strong);
    }

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

/* the work's own picture, when it has one; the tile's gradient otherwise */
.ce-works__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.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__desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-size: 13px;
        font-style: normal;
        font-weight: 300;
        line-height: 1.45;
        color: rgba(244, 241, 236, .78);
    }

    .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;
    }
}

/* ---------- 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;
}

/* ---------- selected works --------------------------------------------- */

.ce-edwork .ce-edarc__body .ce-textarea {
    min-height: 0;
}

.ce-edwork__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ce-edwork__move {
    display: inline-flex;
    gap: 4px;
}

    .ce-edwork__move[hidden] {
        display: none;
    }

.ce-edwork__btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--ce-line-strong);
    border-radius: 7px;
    background: transparent;
    color: var(--ce-ink-3);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

    .ce-edwork__btn:hover:not(:disabled) {
        border-color: var(--ce-accent-edge);
        color: var(--ce-accent-soft);
    }

    .ce-edwork__btn:disabled {
        opacity: .3;
        cursor: default;
    }

[data-work-add] {
    margin-top: 6px;
}

    [data-work-add][hidden] {
        display: none;
    }

.ce-edcount.is-over {
    color: #e0857c;
}

/* ---------- 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;
}

/* "Needed to publish" / "Optional" over each half of the Readiness list */
.ce-edchecks__title {
    margin: 4px 0 -6px;     /* sits close over its own list, in the card's 14px gap */
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.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;
}

/* A gathering's own page sits closer under the header than the editors do:
   less top padding, a tighter rhythm, and the back link tucked onto the
   hero — it keeps its 32px tap height, it just stops pushing things apart. */
.ce-edpage--detail {
    gap: 22px;
    padding-top: 14px;
    min-width: 0; /* never wider than the screen, whatever a card holds */
}

    .ce-edpage--detail > .ce-back {
        margin-bottom: -10px;
    }

.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. */
/* marks a field needed before the page can be published */
.ce-edstar {
    color: var(--ce-brand);
    font-weight: 600;
    font-size: 13px;
    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.
   ============================================================ */

/* The picture sits beside the essentials and wraps above them when the
   row gets narrow; without a picture the bar simply fills the card. */
.ce-gdhero {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--ce-line-strong);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
}

.ce-gdhero__media {
    flex: 1 1 300px;
    min-height: 190px;
    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 {
    flex: 2 1 420px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
    padding: clamp(20px, 3vw, 28px);
}

.ce-gdhero__text {
    flex: 1 1 300px;
    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: 13.5px;
    color: var(--ce-ink-3);
}

/* the countdown, a touch warmer than the other quiet badges */
.ce-gbadge--soon {
    color: var(--ce-accent-soft);
}

/* ---------- the two columns ---------------------------------------------- */

.ce-gdsplit {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
}

.ce-gdmain {
    flex: 999 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ce-gdaside {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    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;
}

/* ---------- the discussion panel ---------------------------------------- */

/* One panel, three faces — the list, the start form, one thread opened —
   with gathering-discussion.js showing one at a time (.is-live). Without
   the script every face shows, one after another. */
.ce-gddisc {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ce-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .014);
    --gd-pad: clamp(16px, 2.6vw, 24px);
}

.ce-gddisc.is-live .ce-gddisc__face {
    display: none;
}

/* while a post is being sent in place */
.ce-gddisc[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
    transition: opacity .2s ease;
}

    .ce-gddisc.is-live .ce-gddisc__face.is-shown {
        display: flex;
    }

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

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

.ce-gddisc.is-live .ce-gddisc__face + .ce-gddisc__face {
    border-top: 0;
}

.ce-gddisc__top {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px var(--gd-pad) 16px;
    border-bottom: 1px solid var(--ce-line);
}

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

.ce-gddisc__titleline {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

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

.ce-gddisc__title--lg {
    font-size: 22px;
    text-wrap: pretty;
}

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

/* an optional line under the heading — a Creator's reflection prompt */
.ce-gddisc__lead {
    margin: 0;
    max-width: 64ch;
    font-size: 14px;
    font-style: italic;
    line-height: 1.65;
    color: var(--ce-ink-3);
    text-wrap: pretty;
}

.ce-gddisc__eyebrow {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ce-ink-4);
    padding: 0;
}

/* search beside the sort switch */
.ce-gddisc__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ce-gddisc__search,
.ce-gddisc__input {
    font-family: inherit;
    font-size: 13px;
    color: var(--ce-ink);
    background: rgba(0, 0, 0, .4);
    border: 1px solid var(--ce-line-strong);
    border-radius: 8px;
    padding: 9px 12px;
    outline: none;
}

.ce-gddisc__search {
    flex: 1 1 220px;
    min-width: 0;
}

    .ce-gddisc__search:focus,
    .ce-gddisc__input:focus {
        border-color: var(--ce-accent-edge);
    }

.ce-gddisc__sorts {
    display: flex;
    border: 1px solid var(--ce-line-strong);
    border-radius: 8px;
    overflow: hidden;
}

    .ce-gddisc__sorts button {
        font-family: inherit;
        font-size: 12px;
        border: 0;
        padding: 9px 12px;
        cursor: pointer;
        white-space: nowrap;
        background: transparent;
        color: var(--ce-ink-3);
    }

        .ce-gddisc__sorts button.is-active {
            background: rgba(96, 24, 24, .8);
            color: var(--ce-accent-label);
        }

/* Chamber chips: a filter on the list */
.ce-gddisc__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.ce-gddisc__chip {
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 12px;
    border-radius: 14px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    color: var(--ce-ink-3);
    border: 1px solid var(--ce-line-strong);
}

    .ce-gddisc__chip span {
        opacity: .6;
    }

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

    .ce-gddisc__chip.is-active {
        background: var(--ce-accent);
        color: var(--ce-accent-label);
        border-color: rgba(192, 0, 0, .55);
    }

/* the list as a table: topic, replies, activity */
.ce-gddisc__cols {
    display: flex;
    gap: 14px;
    padding: 9px var(--gd-pad);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ce-ink-4);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

    .ce-gddisc__cols span:first-child {
        flex: 1 1 auto;
    }

    .ce-gddisc__cols span:nth-child(2) {
        flex: 0 0 64px;
        text-align: right;
    }

    .ce-gddisc__cols span:nth-child(3) {
        flex: 0 0 92px;
        text-align: right;
    }

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

.ce-gdrow {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px var(--gd-pad);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: inherit;
}

    .ce-gdrow:hover {
        background: rgba(var(--ce-accent-rgb), .06);
        color: inherit;
    }

    .ce-gdrow[hidden] {
        display: none;
    }

.ce-gdrow__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ce-gdrow__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ce-gdrow__name {
    font-size: 14.5px;
    color: var(--ce-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

.ce-gdrow__replies {
    flex: 0 0 64px;
    text-align: right;
    font-size: 14px;
    color: var(--ce-ink);
}

    .ce-gdrow__replies.is-none {
        color: var(--ce-ink-6);
    }

.ce-gdrow__when {
    flex: 0 0 92px;
    text-align: right;
    font-size: 12px;
    color: var(--ce-ink-3);
    white-space: nowrap;
}

/* a Chamber, worn as a small outlined tag */
.ce-gdpill {
    font-size: 11px;
    color: var(--ce-accent-soft);
    border: 1px solid rgba(192, 0, 0, .3);
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* after starting a discussion: a note over the list, and the new row lit */
.ce-gddisc__posted {
    margin: 0;
    padding: 10px var(--gd-pad);
    font-size: 12.5px;
    color: var(--ce-accent-label);
    background: rgba(96, 24, 24, .45);
    border-bottom: 1px solid rgba(192, 0, 0, .3);
}

.ce-gdrow.is-new {
    animation: ce-gdrow-new 3.5s ease-out;
}

@keyframes ce-gdrow-new {
    0%, 35% { background: rgba(var(--ce-accent-rgb), .16); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .ce-gdrow.is-new {
        animation: none;
        background: rgba(var(--ce-accent-rgb), .1);
    }
}

.ce-gddisc__nomatch {
    margin: 0;
    padding: 40px 24px;
    text-align: center;
    font-size: 13.5px;
    color: var(--ce-ink-4);
}

.ce-gddisc__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--gd-pad);
}

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

/* holds its height whether or not page buttons are showing, so filtering
   down to one page doesn't shift the footer */
.ce-gddisc__pages {
    display: flex;
    gap: 6px;
    min-height: 32px;
}

    .ce-gddisc__pages button {
        min-width: 32px;
        height: 32px;
        font-family: inherit;
        font-size: 12.5px;
        border-radius: 7px;
        cursor: pointer;
        background: transparent;
        color: var(--ce-ink-3);
        border: 1px solid var(--ce-line-strong);
    }

        .ce-gddisc__pages button.is-active {
            background: var(--ce-accent);
            color: var(--ce-accent-label);
            border-color: rgba(192, 0, 0, .55);
        }

/* nothing yet, or signed out */
.ce-gddisc__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px 60px;
    text-align: center;
}

    .ce-gddisc__empty .ce-gddisc__eyebrow {
        color: var(--ce-accent-soft);
    }

    .ce-gddisc__empty p {
        margin: 0;
        max-width: 42ch;
        font-size: 15px;
        line-height: 1.7;
        color: #a19890;
        text-wrap: pretty;
    }

/* the start form and an opened thread */
.ce-gddisc__pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px var(--gd-pad) 24px;
}

.ce-gddisc__back {
    align-self: flex-start;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ce-ink-3);
}

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

.ce-gddisc__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.ce-gddisc__pane.ce-gddisc__form {
    gap: 10px;
    padding-top: 18px;
}

.ce-gddisc__input {
    font-size: 15px;
    border-radius: 9px;
    padding: 12px;
}

.ce-gddisc__textarea {
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
}

.ce-gddisc__textarea--sm {
    min-height: 84px;
}

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

.ce-gddisc__opening {
    border-bottom: 1px solid var(--ce-line);
}

.ce-gddisc__text {
    margin: 0;
    max-width: 64ch;
    font-size: 14.5px;
    line-height: 1.75;
    color: #a19890;
    white-space: pre-line;
}

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

/* one reply: a face, a name and date, the words */
.ce-gdreply {
    display: flex;
    gap: 12px;
    padding: 16px var(--gd-pad);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ce-gdreply__face {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #2a0e0e;
    border: 1px solid rgba(192, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ce-accent-label);
}

.ce-gdreply__col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}

.ce-gdreply__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--ce-ink-4);
}

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

.ce-gdreply__delete {
    margin: 0 0 0 auto;
}

    .ce-gdreply__delete button {
        padding: 0;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ce-ink-5);
        cursor: pointer;
    }

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

.ce-gdreply__text {
    font-size: 14px;
    line-height: 1.7;
    color: #a19890;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* The Chamber filter: chips while there's room for a row of them, a
   dropdown (the Request Access style, via .ce-auth__input) on phones. */
.ce-gddisc__chamber-select {
    display: none;
}

    /* "All Chambers" is a real choice here, not a placeholder to grey out */
    select.ce-auth__input.ce-gddisc__chamber-select:has(option[value=""]:checked) {
        color: var(--ce-ink);
    }

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

    .ce-gddisc__chamber-select {
        display: block;
    }
}

/* phones: the replies and activity columns fold into the row's meta line,
   and buttons that would stack at ragged widths span the card instead */
@media (max-width: 560px) {
    .ce-gdhero .ce-edactions {
        flex: 1 1 100%;
    }

        .ce-gdhero .ce-edactions > *,
        .ce-gdhero .ce-edactions .ce-btn {
            flex: 1 1 100%;
            justify-content: center;
        }

    .ce-gddisc__headline .ce-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .ce-gddisc__cols span:nth-child(3),
    .ce-gdrow__when {
        display: none;
    }

    .ce-gddisc__cols span:nth-child(2),
    .ce-gdrow__replies {
        flex-basis: 48px;
    }
}

/* ---------- Details (side column) and About (top of the main column) ------ */

/* the share of places taken, as a thin bar */
.ce-gdmeter {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

    .ce-gdmeter i {
        display: block;
        height: 100%;
        background: #d20a0a;
    }

.ce-gdcard__note--plain {
    border-top: 0;
    padding-top: 0;
}

.ce-gdcard__body--sm {
    font-size: 13.5px;
    line-height: 1.7;
    color: #a19890;
}

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

/* a label that also opens a new section of the card */
.ce-gdcard__rule {
    padding-top: 10px;
    border-top: 1px solid var(--ce-line);
}

/* hosts side by side across the main column, wrapping when there's no room */
.ce-gdhosts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.ce-gdhost {
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
}

a.ce-gdhost:hover .ce-gdhost__name {
    color: var(--ce-accent-soft);
}

.ce-gdhost__face {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ce-accent);
    border: 1px solid rgba(192, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ce-accent-label);
    background-size: cover;
    background-position: center;
}

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

.ce-gdhost__role {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ce-ink-4);
}

/* ---------- 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;
    }
}

/* On a phone the columns stack, which would leave Details (in the aside)
   below the whole discussion. Dissolving both columns' boxes lets every card
   share one stack, ordered for reading: Details and About first, then
   whatever was kept from the day, the host's list (above the discussion,
   as on a wide screen, so the host doesn't scroll past every thread to
   reach it), the discussion, and what comes next. */
@media (max-width: 720px) {
    .ce-gdsplit {
        flex-direction: column;
        align-items: stretch;
    }

    .ce-gdmain,
    .ce-gdaside {
        display: contents;
    }

    /* The dissolved columns carried min-width: 0; without it, the cards'
       unwrapped lines (a discussion title, a Details value) set their
       minimum width and push the whole page wider than the phone. */
    .ce-gdsplit,
    .ce-gdmain > *,
    .ce-gdaside > * {
        min-width: 0;
        max-width: 100%;
    }

    .ce-gdcard--details { order: 1; }
    .ce-gdcard--about { order: 2; }
    .ce-gdcard--kept { order: 3; }
    .ce-gdcard--manage { order: 4; }
    .ce-gddisc { order: 5; }
    .ce-gdcard--next { order: 6; }
}

/* ---------- 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) {
    /* Month and Kind hand over to the dropdowns. Has to live here rather than
       in the shared phone block above: .ce-gchips is declared further down
       this file, so an earlier rule of equal weight would lose. */
    .ce-gchips {
        display: none;
    }

    .ce-gfilter__row {
        gap: 8px;
    }

        .ce-gfilter__row .ce-drop {
            width: 100%;
        }

    /* 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;
}

/* ---------- a field the editor is waiting on ------------------------------- */
.ce-editor .ce-input.input-validation-error,
.ce-editor .ce-textarea.input-validation-error,
.ce-editor .is-needed > .ce-input,
.ce-editor .ce-input.input-validation-error:focus,
.ce-editor .ce-textarea.input-validation-error:focus,
.ce-editor .is-needed > .ce-input:focus {
    border-color: #e0857c;
    box-shadow: 0 0 0 3px rgba(224, 133, 124, .16);
}

.ce-editor .is-needed > .ce-edlabel {
    color: #e0857c;
}

/* ---------- a region refreshing in place (data-live, site.js) -------------- */
[data-live-region] {
    transition: opacity .15s ease;
}

[data-live-region].is-busy {
    opacity: .55;
    pointer-events: none;
}

/* ---------- one size for every page's title and intro ----------------------- */
.ce-forum__title,
.ce-admin__title,
.ce-gallery__title,
.ce-creator__name,
.ce-gdhero__title {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: normal;
}

.ce-admin__lede,
.ce-gallery__intro,
.ce-creator__intro {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.75;
}

@media (max-width: 1024px) {
    .ce-forum__title,
    .ce-admin__title,
    .ce-gallery__title,
    .ce-creator__name,
    .ce-gdhero__title {
        font-size: 26px;
    }
}

@media (max-width: 720px) {
    .ce-forum__title,
    .ce-admin__title,
    .ce-gallery__title,
    .ce-creator__name,
    .ce-gdhero__title {
        font-size: 23px;
    }
}

/* ---------- welcome tour (wwwroot/js/tour.js) -------------------------- */

/* The spot is a hole cut in the shade by its own huge shadow, so the page
   stays dark around whatever the step points at. The shade under it only
   catches clicks; on the opening and closing steps there's no spot, and the
   shade darkens the whole page instead. */
.ce-tour {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.ce-tour__shade {
    position: absolute;
    inset: 0;
    transition: background-color .3s ease;
}

.ce-tour--centre .ce-tour__shade {
    background: rgba(0, 0, 0, .72);
}

.ce-tour__spot {
    position: absolute;
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--ce-accent-edge), 0 0 22px rgba(224, 20, 30, .45), 0 0 0 200vmax rgba(0, 0, 0, .72);
    pointer-events: none;
    transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease;
    animation: ce-tour-pulse 2.4s ease-in-out infinite;
}

.ce-tour--centre .ce-tour__spot {
    display: none;
}

@keyframes ce-tour-pulse {
    50% {
        box-shadow: 0 0 0 1px var(--ce-accent-edge), 0 0 34px rgba(224, 20, 30, .7), 0 0 0 200vmax rgba(0, 0, 0, .72);
    }
}

.ce-tour__card {
    position: absolute;
    width: min(340px, calc(100vw - 32px));
    padding: 22px 22px 18px;
    background: var(--ce-bg-raised);
    border: 1px solid var(--ce-line-strong);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
    color: var(--ce-ink);
}

    .ce-tour__card.is-in {
        animation: ce-tour-in .3s ease both;
    }

@keyframes ce-tour-in {
    from {
        opacity: 0;
        translate: 0 6px;
    }
}

.ce-tour__count {
    display: block;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ce-ink-5);
}

.ce-tour__title {
    margin: 8px 0 8px;
    font-size: 18px;
    font-weight: 300;
    color: var(--ce-ink);
}

.ce-tour__text {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--ce-ink-3);
}

.ce-tour__dots {
    display: flex;
    gap: 6px;
    margin: 18px 0 16px;
}

    .ce-tour__dots i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .15);
        transition: background-color .2s ease, width .2s ease;
    }

        .ce-tour__dots i.is-on {
            width: 18px;
            border-radius: 3px;
            background: var(--ce-accent-label);
        }

.ce-tour__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ce-tour__nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.ce-tour__skip {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--ce-ink-5);
    cursor: pointer;
}

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

@media (prefers-reduced-motion: reduce) {
    .ce-tour__spot,
    .ce-tour__card.is-in {
        animation: none;
        transition: none;
    }
}