/* The public main column has a tall minimum so short CMS pages still reach the footer.
   Sign-in fills that column itself, so the extra minimum would leave a blank band. */
#main-content:has(.js-auth-page) { min-height: 0; }

.js-auth-page {
    margin: 0;
    min-height: 100vh;
    color: var(--color-navy);
    background: transparent;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
}

.js-auth-skip {
    position: absolute;
    left: 12px;
    top: -40px;
    z-index: 20;
    padding: 8px 12px;
    background: #fff;
    color: var(--color-navy);
    border-radius: 6px;
}
.js-auth-skip:focus { top: 12px; }

.js-auth {
    display: grid;
    min-height: 100vh;
    /* The form column keeps room for its 460px card plus padding; the picture takes the rest. */
    grid-template-columns: minmax(0, 1fr) minmax(360px, 540px);
    /* Outer width comes from site-shell in the public master. */
    /* No top margin: the hero/panel padding is the only gap under the menu bar. */
    margin: 0 auto 24px;
}

/* ---- Picture side (_AuthHero) ----
   Built from the designer's mockups. Each photo is the mockup's own scene with its lettering lifted
   out, plus a hazy mirrored strip on its left, so a wide hero never runs out of picture.
   The scene fills the hero's width, but never grows so large that the faces rise above the top
   third: it stays anchored to the bottom right, and the page's plain white fills whatever the photo
   leaves above it. The map and the flourish sit on the photo and scale with it, so they keep
   their place beside the faces at every size. */
.js-auth {
    /* Screen px per design px. The mockups' scenes are 1082px (register) and 925px (login) wide and
       the hero is the page width less the 540px form column, so the copy keeps the design's proportions to the
       photo; rem floors and caps keep it readable at the ends. */
    --hero-u: calc((min(100vw - 2 * var(--page-gutter), var(--page-max)) - 540px) / 1082);
}

.js-auth-page--login .js-auth { --hero-u: calc((min(100vw - 2 * var(--page-gutter), var(--page-max)) - 540px) / 925); }

.js-auth-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    color: var(--color-ink);
}

.js-auth-hero,
.js-auth-page--login .js-auth-hero,
.js-auth-page--register .js-auth-hero { background: transparent; }

.js-auth-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 46rem;
    /* The bottom padding keeps the copy clear of the stats bar. */
    padding: clamp(1.5rem, calc(48 * var(--hero-u)), 3rem) clamp(1.5rem, calc(64 * var(--hero-u)), 4.5rem) 12.5rem;
}

.js-auth-kicker {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, calc(19 * var(--hero-u)), 1.25rem);
    margin: 0 0 clamp(1rem, calc(34 * var(--hero-u)), 2.25rem);
    color: var(--color-blue);
    font-size: clamp(.8125rem, calc(17.5 * var(--hero-u)), 1.125rem);
    font-weight: 500;
    letter-spacing: .34em;
    line-height: 1.2;
    text-transform: uppercase;
}

.js-auth-kicker::before {
    content: "";
    flex: none;
    width: clamp(2.5rem, calc(59 * var(--hero-u)), 3.75rem);
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-gold);
}

.js-auth-kicker__lead { color: var(--color-muted); }

/* Devanagari joins its letters along the headstroke; tracking would break the words apart. */
:lang(hi) .js-auth-kicker,
:lang(hi) .js-auth-map__label { letter-spacing: 0; }

.js-auth-title {
    max-width: 9.8em;
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: clamp(2rem, calc(56 * var(--hero-u)), 3.75rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    text-wrap: balance;
}

.js-auth-title__end { display: block; }

.js-auth-page--login .js-auth-title {
    max-width: 9em;
    font-size: clamp(2.4rem, calc(68 * var(--hero-u)), 4.4rem);
    line-height: 1.06;
}

.js-auth-lead {
    max-width: 21.4em;
    margin: clamp(.75rem, calc(16 * var(--hero-u)), 1.5rem) 0 0;
    color: var(--color-muted);
    font-size: clamp(1rem, calc(21.4 * var(--hero-u)), 1.375rem);
    line-height: 1.45;
}

.js-auth-page--login .js-auth-lead { margin-top: clamp(.75rem, calc(22 * var(--hero-u)), 1.5rem); }

.js-auth-features {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem clamp(1rem, calc(28 * var(--hero-u)), 1.75rem);
    margin: clamp(1rem, calc(24 * var(--hero-u)), 1.75rem) 0 0;
    padding: 0;
    list-style: none;
}

.js-auth-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    min-width: clamp(3.5rem, calc(66 * var(--hero-u)), 4.5rem);
    color: var(--color-ink);
    font-size: clamp(.8125rem, calc(15 * var(--hero-u)), 1rem);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.js-auth-feature__icon {
    display: grid;
    place-items: center;
    width: clamp(2.75rem, calc(62 * var(--hero-u)), 4.25rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-line-soft);
    color: var(--color-blue-bright);
    box-shadow: 0 10px 22px -14px rgba(11, 40, 87, .45);
}

.js-auth-feature__icon .icon { width: 50%; height: 50%; }

.js-auth-feature__label > span { display: block; }

/* Hand-lettered mottos: the joined brush script, tilted up to the right, gold stroke beneath. */
.js-auth-motto {
    position: relative;
    margin: clamp(1.75rem, calc(54 * var(--hero-u)), 3.5rem) 0 0 .3em;
    padding-bottom: .45em;
    color: var(--color-ink);
    font-family: var(--font-script);
    font-size: clamp(1.5rem, calc(34 * var(--hero-u)), 2.4rem);
    line-height: 1.05;
    /* Satisfy is a finer pen than the mockup's brush; a hairline stroke gives it the weight. */
    -webkit-text-stroke: .02em currentColor;
    transform: rotate(-15deg);
    transform-origin: 0 100%;
}

.js-auth-page--login .js-auth-motto { margin-top: clamp(1.75rem, calc(64 * var(--hero-u)), 4rem); }

.js-auth-motto > span { display: block; }
.js-auth-motto > span + span { margin-left: .9em; }

.js-auth-swoosh {
    position: absolute;
    width: 3.7em;
    height: .5em;
    fill: var(--color-gold);
}

.js-auth-motto .js-auth-swoosh { left: 1.9em; bottom: -.05em; }

.js-auth-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
    /* Wide screens show the hero's left edge: let the photo fade into the page there. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%);
    mask-image: linear-gradient(to right, transparent, #000 7%);
}

.js-auth-scene__stage {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(var(--scene-scale) * var(--scene-w));
    aspect-ratio: var(--scene-w) / var(--scene-h);
}

/* --scene-scale is screen px per photo px: fill the hero's width, unless that would lift the
   faces into the top third (their tops sit 706px and 631px above the photos' bottoms), and never
   so small that the photo's left edge comes into view. */
.js-auth-page--login .js-auth-scene__stage {
    --scene-w: 1245;
    --scene-h: 1024;
    --scene-scale: max(100cqw / 1245, min(100cqw / 925, 100cqh * .72 / 706));
}

.js-auth-page--register .js-auth-scene__stage {
    --scene-w: 1342;
    --scene-h: 941;
    --scene-scale: max(100cqw / 1342, min(100cqw / 1082, 100cqh * .67 / 631));
}

.js-auth-scene__photo {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%);
    mask-image: linear-gradient(to bottom, transparent, #000 8%);
}

/* The pale Uttar Pradesh map above the faces, with its tagline. The map scales with the photo so
   it keeps its distance from the faces; the tagline only shrinks to 12px and still fits inside it. */
.js-auth-map {
    position: absolute;
    left: 66.5%;
    top: 7.1%;
    width: calc(var(--scene-scale) * 254);
}

.js-auth-page--login .js-auth-map {
    left: 70.6%;
    top: 8.7%;
    width: calc(var(--scene-scale) * 215);
}

.js-auth-map__shape { display: block; width: 100%; height: auto; }

.js-auth-map__label {
    position: absolute;
    left: 30.5%;
    top: 31.6%;
    margin: 0;
    color: var(--color-navy);
    font-size: max(.75rem, calc(var(--scene-scale) * 13.3));
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.32;
    text-transform: uppercase;
    white-space: nowrap;
}

.js-auth-page--login .js-auth-map__label { left: 30.5%; top: 32%; }

.js-auth-map__label > span { display: block; }

.js-auth-map__label::after {
    content: "";
    display: block;
    width: 1.7em;
    height: 3px;
    margin-top: .8em;
    border-radius: var(--radius-pill);
    background: var(--color-gold);
}

.js-auth-flourish {
    position: absolute;
    left: 86.6%;
    top: 21.6%;
    margin: 0;
    color: var(--color-muted);
    font-family: var(--font-script);
    font-size: calc(var(--scene-scale) * 31);
    line-height: 1.02;
    white-space: nowrap;
    -webkit-text-stroke: .015em currentColor;
    transform: rotate(-14deg);
    transform-origin: 0 0;
}

.js-auth-flourish > span { display: block; }
.js-auth-flourish > span:nth-child(2) { margin-left: .4em; }
.js-auth-flourish > span:nth-child(3) { margin-left: .2em; }
.js-auth-flourish > span:nth-child(4) { margin-left: .85em; }
.js-auth-flourish .js-auth-swoosh { left: 1.5em; bottom: -.55em; width: 3.2em; }

/* Too small to read beside the faces: leave the photo plain. */
@container (width < 760px) {
    .js-auth-map,
    .js-auth-flourish { display: none; }
}

.js-auth-stats {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 6%;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: clamp(.75rem, calc(18 * var(--hero-u)), 1.25rem) .25rem;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(12, 23, 44, .8);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 24px 48px -24px rgba(3, 12, 30, .65);
    color: #fff;
}

.js-auth-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.5rem, calc(13 * var(--hero-u)), .9rem);
    min-width: 0;
    padding: .15rem .35rem;
}

.js-auth-stat + .js-auth-stat { border-left: 1px solid rgba(255, 255, 255, .16); }

.js-auth-stat__icon {
    flex: none;
    display: grid;
    width: clamp(1.75rem, calc(38 * var(--hero-u)), 2.6rem);
    aspect-ratio: 1;
    color: var(--color-gold-light);
}

.js-auth-stat__icon svg { width: 100%; height: 100%; }

.js-auth-stat__text { min-width: 0; }

.js-auth-stat__text > strong {
    display: block;
    font-size: clamp(1.05rem, calc(22 * var(--hero-u)), 1.45rem);
    font-weight: 500;
    line-height: 1.2;
}

.js-auth-stat__text > span {
    display: block;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(.8125rem, calc(15 * var(--hero-u)), .95rem);
    line-height: 1.35;
}

/* One column: the form comes first, then the copy, the photo beneath it and the stats. */
@media (max-width: 980px) {
    /* The copy now spans the full width, so it scales with that instead of with the photo. */
    .js-auth-hero,
    .js-auth-page--login .js-auth-hero { --hero-u: .085vw; min-height: 0; order: 2; }

    .js-auth-hero__copy { max-width: none; padding: 2.5rem 1.5rem 0; }

    /* Show the photo from just above the faces down to where the stats card overlaps it. */
    .js-auth-scene {
        position: relative;
        inset: auto;
        z-index: 0;
        margin-top: -.5rem;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
        mask-image: linear-gradient(to bottom, transparent, #000 16%);
    }

    .js-auth-page--login .js-auth-scene { aspect-ratio: 925 / 680; }
    .js-auth-page--register .js-auth-scene { aspect-ratio: 1082 / 628; }

    .js-auth-map,
    .js-auth-flourish { display: none; }

    .js-auth-scene__stage { bottom: auto; }

    .js-auth-page--login .js-auth-scene__stage {
        --scene-scale: calc(100cqw / 925);
        top: calc(var(--scene-scale) * -220);
    }

    .js-auth-page--register .js-auth-scene__stage {
        --scene-scale: calc(100cqw / 1082);
        top: calc(var(--scene-scale) * -222);
    }

    .js-auth-stats {
        position: relative;
        inset: auto;
        margin: -3rem 1rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .js-auth-hero__copy { padding: 2rem 1rem 0; }

    .js-auth-features {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .75rem .5rem;
        width: 100%;
    }

    .js-auth-feature { min-width: 0; }

    .js-auth-stats {
        grid-template-columns: 1fr 1fr;
        padding: .5rem;
        margin: -2rem .75rem 1.25rem;
    }

    .js-auth-stat { justify-content: flex-start; gap: .6rem; padding: .75rem .6rem; }
    .js-auth-stat + .js-auth-stat { border-left: 0; }
    .js-auth-stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .16); }
    .js-auth-stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .16); }
    .js-auth-stat__icon { width: 1.9rem; }
    .js-auth-stat__text > strong { font-size: 1.1rem; }
    .js-auth-stat__text > span { font-size: .8125rem; }
}

.js-auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* The card's top lines up with the hero's kicker. */
    padding: clamp(1.5rem, calc(48 * var(--hero-u)), 3rem) clamp(20px, 3vw, 40px) clamp(24px, 4vw, 48px);
    background: transparent;
    overflow: auto;
}

.js-auth-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 28px 28px 22px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(28, 49, 84, .16);
}

.js-auth-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.js-auth-card-head h2 {
    margin: 0;
    color: var(--color-navy);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

.js-auth-card-head p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: .875rem;
    line-height: 1.5;
}


.js-auth-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 16px;
    background: var(--color-gold-soft);
    color: var(--color-gold-deep);
}

.js-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 5px 12px 5px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-gold-soft);
    color: var(--color-gold-text);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
}

.js-auth-badge svg { width: 16px; height: 16px; }

.js-auth-alert {
    font-size: .85rem;
}

.js-auth-validation,
.js-auth-field .field-validation-error {
    display: block;
    color: var(--color-danger);
    font-size: .78rem;
    margin: 4px 0 0;
}

.js-auth-validation ul { margin: 0 0 10px; padding-left: 1.1rem; }

.js-auth-form { display: grid; gap: 14px; }

.js-auth-field { position: relative; }

.js-auth-control { position: relative; }

.js-auth-label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-navy);
    font-size: .82rem;
    font-weight: 600;
}

.js-auth-input,
.js-auth-field input,
.js-auth-field select {
    width: 100%;
    min-height: 48px;
    padding: 8px 14px 8px 42px;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: #fff;
    color: var(--color-navy);
    font: inherit;
    font-size: .92rem;
}

.js-auth-field--plain input { padding-left: 14px; }

.js-auth-field input[type="password"],
.js-auth-control input[type="password"] { padding-right: 44px; }

.js-auth-field input::placeholder,
.js-auth-field select:invalid { color: #94a3b8; }

.js-auth-field input:focus,
.js-auth-field select:focus {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
    border-color: var(--color-gold);
}

.js-auth-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: #8b9cb3;
    transform: translateY(-50%);
    pointer-events: none;
}

.js-auth-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #8b9cb3;
    cursor: pointer;
    transform: translateY(-50%);
}

.js-auth-eye svg { width: 18px; height: 18px; }

.js-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* A field that would otherwise sit alone in half a row. */
.js-auth-row > .js-auth-field--wide { grid-column: 1 / -1; }

.js-auth-field--select .js-auth-ico { z-index: 1; }
.js-auth-field select {
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238b9cb3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.js-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: -2px 0 2px;
}

.js-auth-options .js-auth-check {
    align-items: center;
    margin: 0;
}

.js-auth-options .js-auth-check input { margin-top: 0; }

.js-auth-forgot {
    display: block;
    margin: -4px 0 0;
    color: var(--color-blue);
    font-size: .8rem;
    font-weight: 600;
    text-align: right;
    text-decoration: none;
}

.js-auth-options .js-auth-forgot { margin: 0; flex: 0 0 auto; }

.js-auth-captcha-label {
    margin: 2px 0 -6px;
    color: var(--color-navy);
    font-size: .82rem;
    font-weight: 600;
}

.js-auth-captcha {
    display: grid;
    grid-template-columns: auto 40px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.js-auth-captcha__code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px dashed var(--color-line-strong);
    border-radius: 12px;
    user-select: none;
    background: repeating-linear-gradient(-12deg, var(--color-surface-alt), var(--color-surface-alt) 8px, #eef3f8 8px, #eef3f8 16px);
    color: var(--color-navy);
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .28em;
}

.js-auth-captcha__refresh {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-blue);
    text-decoration: none;
    transition: background-color .15s;
}

.js-auth-captcha__refresh:hover { background: var(--color-tint); }

.js-auth-captcha__refresh svg { width: 18px; height: 18px; }

.js-auth-captcha input,
.js-auth-captcha .js-auth-field input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 8px 14px;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: #fff;
    color: var(--color-navy);
    font: inherit;
    font-size: .92rem;
    letter-spacing: .08em;
}

.js-auth-captcha input::placeholder { color: #94a3b8; letter-spacing: 0; }

.js-auth-captcha input:focus {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
    border-color: var(--color-gold);
}

.js-auth-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--color-muted);
    font-size: .8rem;
}

.js-auth-check input { margin-top: 3px; accent-color: var(--color-navy); }
.js-auth-check a { color: var(--color-navy); font-weight: 600; }

/* The shared gold button (theme.css) paints it; this only lays it out across the form. */
.js-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
    cursor: pointer;
}

.js-auth-or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin: 8px 0 2px;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
}

.js-auth-or::before,
.js-auth-or::after {
    content: "";
    height: 1px;
    background: var(--color-line);
}

.js-auth-social {
    display: grid;
    gap: 10px;
}

.js-auth-social a,
.js-auth-social button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.js-auth-social--google {
    border: 1px solid var(--color-line);
    background: #fff;
    color: var(--color-navy);
}

.js-auth-social--facebook {
    border: 0;
    background: #1877f2;
    color: #fff;
}

.js-auth-social svg { width: 18px; height: 18px; }

.js-auth-switch {
    margin: 16px 0 0;
    color: var(--color-muted);
    font-size: .86rem;
    text-align: center;
}

.js-auth-switch a { color: var(--color-navy); font-weight: 700; text-decoration: none; }

.js-auth-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 0;
    color: var(--color-navy);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.js-auth-trust::before,
.js-auth-trust::after {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--color-gold);
}

.js-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

@media (max-width: 980px) {
    .js-auth {
        grid-template-columns: 1fr;
    }

    .js-auth-panel {
        order: 1;
        padding: 20px 16px 28px;
    }

    .js-auth-card { max-width: 520px; }
}

@media (max-width: 640px) {
    .js-auth-row { grid-template-columns: 1fr; }
    .js-auth-card { padding: 22px 16px 18px; border-radius: 20px; }
    .js-auth-captcha { grid-template-columns: auto 40px; }
    .js-auth-captcha input,
    .js-auth-captcha > .js-auth-field { grid-column: 1 / -1; }
}