/*  The signed-out side: the bar, the landing page and the footer.

    Every colour here is a theme variable. The signed-out shell wears the light
    half of the pair the office chose, and the moon in the bar swaps it for the
    dark half -- so this file must read on all eight themes, not on two. There
    is not a literal colour in it, for the same reason `elbe-look.css` no longer
    has one: a value written out is right on the theme it was written for and a
    coin toss on the others.

    Named `lp-` for the landing page and `pub-` for the shell around it, so
    nothing here can reach a signed-in screen by accident.  */

/* ===== 1. The bar ===========================================
   Sticky, because the two things a visitor came for -- signing in and writing
   to the school -- should stay reachable the whole way down. */
.pub-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--theme-card-bg);
    border-bottom: 1px solid var(--elbe-line);
    /*  The phone's own top strip (notch / Dynamic Island): the phone layout
        reaches under it with `viewport-fit=cover`, and in the iOS app nothing
        else covers that strip, so the bar pads itself past it. 0 everywhere
        else (2026-09-17). */
    padding-top: env(safe-area-inset-top, 0px);
}

.pub-bar-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/*  The brand is the school's wordmark alone (elbe-look.css .elbe-wordmark),
    32 high here, 26 on a phone. */
.pub-brand { display: block; height: 32px; min-width: 0; }

.pub-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pub-moon {
    background: transparent;
    border: 1px solid var(--elbe-line);
    border-radius: 9px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: 0.16s;
}

    .pub-moon:hover { background: var(--theme-hover-bg); color: var(--theme-text); }

.pub-main-wide { display: block; }

/*  The shell is a column, so the footer sits at the foot of the window whenever
    a page is short of filling it -- and there is never a strip of nothing left
    under the footer, which is what a short page used to leave. */
body.elbe-public {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

    body.elbe-public > .pub-bar,
    body.elbe-public > .pub-foot { flex: 0 0 auto; }

    body.elbe-public > main { flex: 1 0 auto; }

/*  A sign-in screen fills exactly what the bar and the footer leave, so the
    picture beside the card reaches both of them and the whole screen is one
    window with nothing to scroll to. */
body.elbe-public > main:has(.auth) {
    display: flex;
    flex-direction: column;
}

    body.elbe-public > main > .auth { flex: 1 0 auto; }

/* ===== 2. The hero ==========================================
   The original's sign-in screen over a photograph, with the school's own
   strapline, pawn and two-line tagline. A wash of the theme's page colour sits
   over the picture so the lettering reads on every theme rather than only on
   the light one the photograph suits. */
/* The "being prepared" notice over the hero, until the opening moment
   (2026-09-21). One fixed palette in both themes: ink #7c2d12 on #fffbeb
   is 10.9:1, the #f59e0b border stands on the hero's photo in either. */
.lp-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 960px;
    margin: 0 auto 26px;
    padding: 14px 20px;
    border: 2px solid #f59e0b;
    border-radius: 14px;
    background: #fffbeb;
    color: #7c2d12;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 10px 30px -12px rgba(245, 158, 11, 0.55);
}

.lp-notice-icon { font-size: 1.6rem; line-height: 1; }

@media (max-width: 640px) {
    .lp-notice { font-size: 1rem; padding: 12px 14px; gap: 10px; margin-bottom: 18px; }
}

/*  The picture fills the first screen (Kamal, 2026-09-25): two Elbe students
    on the chessboard road up to the trophy and the flag. 16:9, so on a wide
    window the hero is the picture's own height and nothing of it is lost; it
    never runs taller than what the bar leaves, and the page's colour rises
    over its foot so the bands below grow out of it.

    ONE FIXED PALETTE on the picture, in every theme, on purpose: the sky is
    the same bright gold whatever the page wears, so the words on it are the
    school's ink #17130B (about 11:1 on the sky's #F4C77A) and the buttons are
    ink-on-cream / gold-on-ink. Nothing on the picture reads a theme variable
    that could flip underneath it; only the fade at its foot does, because
    that is the one part that must meet the page. */
.lp-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    height: min(calc(100dvh - 56px), 56.25vw);
    min-height: 540px;
    background: #F4C77A url('../img/elbe-road-v2.jpg') center top / cover no-repeat;
    color: #17130B;
    overflow: hidden;
}

    .lp-hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 18%;
        background: linear-gradient(180deg, transparent, var(--bs-body-bg));
        pointer-events: none;
    }


.lp-hero-in {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(22px, 3.2vw, 52px) clamp(18px, 3.9vw, 56px) 0;
}

.lp-hero-top { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/*  The strapline on a small ink pill: the sky behind it is too bright for
    gold letters on their own. #FFD23F on #17130B is 12.6:1. */
.lp-kicker {
    padding: 6px 14px;
    border-radius: 16px;
    background: rgba(23, 19, 11, 0.88);
    color: #FFD23F;
    font-size: 14px;
    font-weight: 600;
}

.lp-tagline {
    font-family: var(--elbe-serif);
    font-size: clamp(34px, 4.2vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: #17130B;
    margin: 0;
}

.lp-lead {
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 600;
    line-height: 1.4;
    color: #17130B;
    margin: 0;
    max-width: 62ch;
}

.lp-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== 2b. The page's own buttons ===========================
   Written out rather than borrowed from the theme: they stand on the picture
   (ink / cream) or on the dark strip at the foot (gold / line), surfaces
   that do not change with the theme, so neither must their colours. */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 25px;
    border: 2px solid transparent;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .lp-btn:focus-visible { outline: 3px solid #FFD23F; outline-offset: 2px; box-shadow: 0 0 0 7px #17130B; }

/* Gold on ink: 12.6:1. A brass rim keeps its outline where it meets a dark
   page at the foot of the picture. Hover lifts the ink a step. */
.lp-btn-ink { background: #17130B; border-color: #8A6A00; color: #FFD23F; }
    .lp-btn-ink:hover { background: #2E2616; border-color: #B38A00; color: #FFE27A; }
    .lp-btn-ink:active { background: #000000; color: #FFD23F; }

/* Ink on cream, ink rim so the silhouette holds on the bright sky: 17:1. */
.lp-btn-cream { background: rgba(255, 248, 230, 0.86); border-color: #17130B; color: #17130B; }
    .lp-btn-cream:hover { background: #FFF8E6; color: #17130B; }
    .lp-btn-cream:active { background: #F3E6C4; color: #17130B; }

/*  On the dark strip at the foot: the theme's own brass and the lettering
    every theme pairs with it (--theme-on-brass), so the strip's buttons match
    the rest of the page -- gold on the Elbe theme, blue on BlueSky -- where
    fixed gold clashed with a blue dark theme (2026-09-25). Every theme's
    brass is a bright fill that stands out on the strip's #17130B wash; the
    outline button keeps cream lettering (14:1) inside a brass rim. */
.lp-btn-gold { background: var(--theme-brass); border-color: var(--theme-brass); color: var(--theme-on-brass); }
    .lp-btn-gold:hover { filter: brightness(1.1); color: var(--theme-on-brass); }
    .lp-btn-gold:active { filter: brightness(0.92); color: var(--theme-on-brass); }

.lp-btn-line { background: transparent; border-color: var(--theme-brass); color: #FFF8E6; }
    .lp-btn-line:hover { background: rgba(255, 248, 230, 0.12); color: #FFF8E6; }
    .lp-btn-line:active { background: rgba(255, 248, 230, 0.2); color: #FFF8E6; }

    .lp-close .lp-btn:focus-visible { outline-color: #FFF8E6; box-shadow: none; }

/*  A narrower window: the children stand nearer the middle, so the words stay
    in the sky across the top and the buttons go down to the foot of the
    picture, over the road, leaving the two of them clear. */
/*  The buttons stand at the foot of the picture on every screen, over the
    road (2026-09-25): higher up, a wide-but-short window's crop brings the
    children's heads up under them. */
.lp-hero .lp-cta { margin-top: auto; padding-bottom: 28px; justify-content: center; }

@media (min-width: 1360px) {
    .lp-tagline { white-space: nowrap; }
}

/* The "being prepared" notice, as a slim strip above the picture; the
   picture gives up the strip's height so the buttons stay in the window. */
.lp-notice-strip { padding: 8px 16px; background: var(--bs-body-bg); }

    .lp-notice-strip .lp-notice { margin: 0 auto; padding: 8px 16px; font-size: 1rem; }

.lp-hero.has-notice { height: min(calc(100dvh - 56px - 70px), 56.25vw); }

/* ===== 3. The bands =========================================
   Alternating ground so the page reads as sections without a rule between
   every one of them. */
.lp-band { padding: 62px 22px; }

.lp-band-alt { background: var(--bs-tertiary-bg); }

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

.lp-eyebrow {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--elbe-eyebrow);
    margin-bottom: 7px;
}

.lp-h2 {
    font-family: var(--elbe-serif);
    font-size: clamp(23px, 3.4vw, 31px);
    font-weight: 700;
    color: var(--theme-text);
    margin: 0 0 10px;
}

.lp-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--theme-text-muted);
    max-width: 640px;
    margin: 0 0 26px;
}

.lp-note {
    font-size: 13px;
    color: var(--theme-text-muted);
    margin-top: 18px;
    font-style: italic;
}

/* ===== 4. How it works ====================================== */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 22px;
    margin-top: 26px;
}

/* Each step a card of its own, the way the mockup has them (2026-09-25). */
.lp-step {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-radius: var(--elbe-r);
    padding: 20px;
    box-shadow: var(--elbe-shadow);
}

.lp-step-n {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--theme-accent-grad);
    color: var(--theme-on-brass);
    display: grid;
    place-items: center;
    font-family: var(--elbe-serif);
    font-weight: 700;
    font-size: 15px;
}

.lp-step-t { font-size: 15px; font-weight: 700; color: var(--theme-text); margin: 4px 0 5px; }
.lp-step-b { font-size: 13.5px; line-height: 1.55; color: var(--theme-text-muted); margin: 0; }

/* ===== 5. The tools ========================================= */
.lp-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 14px;
}

.lp-tool {
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-radius: var(--elbe-r);
    padding: 19px;
    box-shadow: var(--elbe-shadow);
    transition: transform 0.16s, box-shadow 0.16s;
}

    .lp-tool:hover { transform: translateY(-2px); }

    /*  Thirteen tools never fill the last row of four, three or two -- one is
        always left alone beside empty space. That one takes the whole row,
        its emoji and title beside the words. */
    .lp-tools .lp-tool:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        column-gap: 12px;
    }

        .lp-tools .lp-tool:last-child .lp-tool-t { margin: 0; }

.lp-tool-ico { display: block; font-size: 24px; line-height: 1; }
.lp-tool-t { font-size: 15px; font-weight: 700; color: var(--theme-text); margin: 9px 0 6px; }
.lp-tool-b { font-size: 13px; line-height: 1.55; color: var(--theme-text-muted); margin: 0; }

/* ===== 7. Programmes ======================================== */
.lp-pkgs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.lp-pkg {
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-radius: var(--elbe-r);
    padding: 19px;
    box-shadow: var(--elbe-shadow);
}

.lp-pkg-t { font-size: 15px; font-weight: 700; color: var(--theme-text); margin: 0 0 6px; }
.lp-pkg-b { font-size: 13px; line-height: 1.55; color: var(--theme-text-muted); margin: 0; }

/*  The last of the four (private lessons, any time) stands out in the theme's
    own brass, lettered in the colour every theme sets for text on brass. */
.lp-pkg:last-child { background: var(--theme-accent-grad); border-color: var(--theme-brass); }
    .lp-pkgs .lp-pkg:last-child .lp-pkg-t,
    .lp-pkgs .lp-pkg:last-child .lp-pkg-b { color: var(--theme-on-brass); }

/* ===== 8. The close =========================================
   A rounded strip of the same picture under a dark wash, darkest on the side
   the words are on. ONE FIXED PALETTE in both themes: cream #FFF8E6 on the
   wash's #17130B is 16:1, the lead #E3D3AE 11:1. Two-class selectors so the
   theme's heading and muted colours cannot win here. */
.lp-close {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    padding: 48px clamp(22px, 4vw, 48px);
    background:
        linear-gradient(90deg, rgba(23, 19, 11, 0.93) 0%, rgba(23, 19, 11, 0.74) 48%, rgba(23, 19, 11, 0.08) 80%),
        #17130B url('../img/elbe-road-v2.jpg') 100% 20% / 160% auto no-repeat;
    color: #FFF8E6;
}

/*  The strip shows the right-hand part of the picture -- the road winding up
    to the trophy -- so the children are not behind the words. It follows the
    programmes band straight on, without a second band's worth of space. */
.lp-close-band { padding-top: 0; }

    .lp-close .lp-h2 { color: #FFF8E6; }
    .lp-close .lp-sub { color: #E3D3AE; margin-bottom: 20px; }

.lp-close .lp-close-line {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-size: 13.5px;
    color: #E3D3AE;
}

    .lp-close .lp-close-line i { color: #FFD23F; }

/* ===== 9. The footer ======================================== */
.pub-foot {
    background: var(--theme-card-bg);
    border-top: 1px solid var(--elbe-line);
    padding: 16px 22px 0;
}

.pub-foot-in {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 20px;
}

.pub-foot-name {
    font-family: var(--elbe-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--theme-text);
}

.pub-foot-tag { font-size: 13px; color: var(--elbe-brass-text); margin-top: 3px; }
.pub-foot-since { font-size: 12px; color: var(--theme-text-muted); margin-top: 5px; }

.pub-foot-line {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    color: var(--theme-text-muted);
    margin-bottom: 4px;
    text-decoration: none;
}

    .pub-foot-line a { color: var(--theme-text-muted); text-decoration: none; }
    .pub-foot-line a:hover, a.pub-foot-line:hover { color: var(--elbe-brass-text); }
    .pub-foot-line i { color: var(--elbe-brass-text); }

.pub-foot-social { display: flex; gap: 9px; margin-bottom: 11px; }

    .pub-foot-social a {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        border: 1px solid var(--elbe-line);
        display: grid;
        place-items: center;
        color: var(--theme-text-muted);
        text-decoration: none;
        transition: 0.16s;
    }

        .pub-foot-social a:hover {
            background: var(--theme-hover-bg);
            color: var(--elbe-brass-text);
            border-color: var(--theme-brass);
        }

.pub-foot-rule {
    max-width: 1080px;
    margin: 12px auto 0;
    padding: 9px 0;
    border-top: 1px solid var(--elbe-line);
    text-align: center;
    font-size: 12px;
    color: var(--theme-text-muted);
}

/* ===== 10. On a phone ======================================= */
@media (max-width: 760px) {
    /*  A phone is taller than the picture is wide, so the picture is cut to
        the two children: they sit in the middle, the sky above them holds the
        words, the buttons stand at the foot over the road. */
    .lp-hero {
        height: calc(100dvh - 50px);
        min-height: 540px;
        background-position: 27% top;
    }

    .lp-hero.has-notice { height: calc(100dvh - 50px - 96px); }

    .lp-hero-in { gap: 10px; }
    .lp-hero-top { gap: 8px; }
    .lp-kicker { font-size: 12.5px; padding: 5px 12px; }
    .lp-hero .lp-cta { padding-bottom: 16px; gap: 8px; }
    .lp-hero .lp-btn { flex: 1 1 100%; min-height: 48px; }

    .lp-band { padding: 36px 14px; }
    .lp-close-band { padding-top: 0; }
    .lp-tools .lp-tool:last-child { display: block; }
    .lp-tools .lp-tool:last-child .lp-tool-t { margin: 9px 0 6px; }
    /* The words take the strip's whole width here, so the wash does too. */
    .lp-close {
        padding: 30px 18px;
        background:
            linear-gradient(rgba(23, 19, 11, 0.86), rgba(23, 19, 11, 0.86)),
            #17130B url('../img/elbe-road-v2.jpg') 30% 40% / cover no-repeat;
    }
    .lp-close .lp-btn { flex: 1 1 100%; }
    .pub-bar-in { padding: 9px 15px; }
    .pub-brand { height: 26px; }
}

/* ===== 11. What is in the bar ===============================
   A bar carrying nothing but two sign-in buttons tells a visitor nothing about
   the school. These are the sections the landing page is actually made of, so
   somebody who arrives halfway down it -- or on the contact page -- can still
   see the whole of what is on offer and reach any part of it. */
.pub-nav { display: flex; align-items: center; gap: 2px; }

.pub-nav-a {
    position: relative;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: 0.16s;
}

    .pub-nav-a:hover { background: var(--theme-hover-bg); color: var(--theme-text); }

    /* The page being read, marked with the school's own brass. */
    .pub-nav-a.is-on { color: var(--elbe-brass-text); }

        .pub-nav-a.is-on::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 1px;
            height: 2px;
            border-radius: 2px;
            background: var(--theme-brass);
        }

/* The language, folded into one.

   Five buttons in a row took a third of the bar and left no room for anything
   to be said in it -- which is why the bar had nothing in it to say. One
   globe, the way the signed-in shell has always had it. */
.pub-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--elbe-line);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: 0.16s;
}

    .pub-lang-btn:hover,
    .pub-lang-btn[aria-expanded="true"] {
        background: var(--theme-hover-bg);
        color: var(--theme-text);
    }

/* Bootstrap's own dropdown is white with near-black lettering whatever the
   page is wearing, so on six of the eight themes it would arrive as a white
   slab. Stated here in the theme's own colours instead. */
.pub-lang-menu {
    min-width: 168px;
    padding: 6px;
    background: var(--theme-card-bg);
    border: 1px solid var(--elbe-line);
    border-radius: 11px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.pub-lang-opt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 13.5px;
    color: var(--theme-text);
    text-align: start;
    cursor: pointer;
    transition: 0.14s;
}

    .pub-lang-opt:hover { background: var(--theme-hover-bg); }

    .pub-lang-opt.is-on { color: var(--elbe-brass-text); font-weight: 700; }

        .pub-lang-opt.is-on i { color: var(--elbe-brass-text); }

/* The narrow-window menu. Written into the page rather than moved there by
   script, so the bar is right before anything runs. */
.pub-burger {
    display: none;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--elbe-line);
    border-radius: 9px;
    place-items: center;
    font-size: 17px;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: 0.16s;
}

    .pub-burger:hover { background: var(--theme-hover-bg); color: var(--theme-text); }

.pub-drawer {
    border-top: 1px solid var(--elbe-line);
    padding: 8px 18px 14px;
}

.pub-drawer-a {
    display: block;
    padding: 10px 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--theme-text);
    text-decoration: none;
    border-bottom: 1px solid var(--elbe-line);
}

    .pub-drawer-a:hover,
    .pub-drawer-a.is-on { color: var(--elbe-brass-text); }

.pub-drawer-btns { display: flex; gap: 8px; margin-top: 12px; }

    .pub-drawer-btns .btn { flex: 1; }

@media (max-width: 1040px) {
    .pub-nav { display: none; }
    .pub-burger { display: grid; }
}

/* Below this the two buttons crowd the brand off its own bar, so they move
   into the menu with everything else. */
@media (max-width: 620px) {
    .pub-signin { display: none; }
}

@media (min-width: 1041px) {
    /* The menu can never be left hanging open by a window that grew. */
    .pub-drawer { display: none !important; }
}

/* The bar is sticky, so a jump to a section would otherwise land its heading
   underneath it. */
body.elbe-public { scroll-behavior: smooth; }

.lp-band[id] { scroll-margin-top: 68px; }

/* ===== 12. Writing to the school ============================
   The form was six labelled boxes stacked down the middle of an empty page,
   under a bare envelope, with an unstyled button at the foot -- none of the
   classes it was written against existed any more. And a contact page showing
   only a form asks a visitor to write a letter when a telephone number would
   have done.

   So: the school's own details on one side, the form on the other, both in the
   same chrome as the landing page they were reached from. */
.ct-wrap { padding: 14px 22px 14px; }

.ct-in { max-width: 1040px; margin: 0 auto; }

.ct-head { text-align: center; max-width: 640px; margin: 0 auto 10px; }

    .ct-head .lp-h2 { margin-bottom: 4px; }

    .ct-head .lp-sub { font-size: 13.5px; margin-bottom: 0; }

.ct-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}

/* The ways to reach the school, from Site Ayarları. Anything the office has
   not filled in simply does not appear. */
.ct-side {
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-radius: var(--elbe-r);
    box-shadow: var(--elbe-shadow);
    padding: 16px 18px;
}

.ct-side-h {
    font-family: var(--elbe-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--theme-text);
    margin: 0 0 8px;
}

.ct-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 6px 0;
    border-bottom: 1px solid var(--elbe-line);
}

    .ct-item:last-of-type { border-bottom: 0; }

.ct-ico {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--theme-wash-10);
    color: var(--elbe-brass-text);
    display: grid;
    place-items: center;
    font-size: 15px;
}

.ct-k {
    font-size: 10.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--theme-text-muted);
    margin-bottom: 2px;
}

.ct-v {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--theme-text);
    word-break: break-word;
}

    .ct-v a { color: var(--theme-text); text-decoration: none; }
    .ct-v a:hover { color: var(--elbe-brass-text); }

.ct-social-h {
    font-size: 10.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--theme-text-muted);
    margin: 10px 0 7px;
}

.ct-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--elbe-line);
    font-size: 12px;
    line-height: 1.5;
    color: var(--theme-text-muted);
}

    .ct-note i { color: var(--elbe-brass-text); }

/* The form itself. */
.ct-card {
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-top: 3px solid var(--theme-brass);
    border-radius: var(--elbe-r);
    box-shadow: var(--elbe-shadow);
    padding: 16px 20px 14px;
}

.ct-card-h {
    font-family: var(--elbe-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--theme-text);
    margin: 0 0 8px;
}

.ct-card .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-muted);
    margin-bottom: 1px;
}

.ct-card .form-control {
    min-height: 36px;
    font-size: 14px;
}

.ct-card textarea.form-control { min-height: 72px; }

.ct-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--elbe-line);
}

.ct-captcha { display: flex; align-items: center; gap: 10px; }

    .ct-captcha .form-control { max-width: 110px; }

.ct-send { min-height: 40px; padding: 8px 26px; font-size: 14px; font-weight: 600; }

@media (max-width: 880px) {
    .ct-grid { grid-template-columns: 1fr; }
    .ct-wrap { padding: 32px 16px 46px; }
    .ct-card { padding: 20px; }
    .ct-send { flex: 1; }
}

/*  Same shape as the moon beside it, but an anchor: no underline, and the
    colour said again so the browser's link colour does not win. */
a.pub-moon { text-decoration: none; color: var(--theme-text-muted); }
a.pub-moon:hover { color: var(--theme-text); }