@font-face {
    font-family: SuisseBPIntl;
    src: url('../fonts/SuisseBPIntl-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Brier;
    src: url('../fonts/Brier-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Lama Lama's contact page metrics: their rem is 16px, 1.11111vw from 1600px, so every size here is in --u (one
   design px) and their layout lands on the same pixels at every width */
:root {
    --ink: #121316;
    --paper: #f4f2ea;
    --sig: #ffed29;
    --gc-ink-soft: #5f6368;
    --gc-line: #dadce0;
    --gc-font: 'Google Sans', Roboto, 'Segoe UI', Arial, sans-serif;
    --gc-pad-l: 4px;
    --gc-pad-r: 5px;
    /* written by calendar-contact.js from the widest hour label, so the column and the canvas grid share one edge */
    --gc-gutter: 34px;

    --u: 1px;
    --off: rgb(249, 244, 235);
    --tx-rgb: 249 244 235;
    --bg1-rgb: 26 28 28;
    --tx: rgb(var(--tx-rgb));
    --bg1: rgb(var(--bg1-rgb));
    --rec: #f00;
    --mono: Sometype, Helvetica, Arial, sans-serif;
    --suisse: SuisseBPIntl, Helvetica, Arial, sans-serif;
    --expo: cubic-bezier(0.16, 1, 0.3, 1);
    --p4: cubic-bezier(0.22, 1, 0.36, 1);
    --m: calc(16 * var(--u));
    --g: calc(10 * var(--u));
    --col: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12);
    --sec: calc(24 * var(--u));
    --h1: clamp(calc(52 * var(--u)), calc(17 * var(--u) + 4.38vw), calc(80 * var(--u)));
    --body: clamp(calc(20 * var(--u)), calc(15 * var(--u) + 0.63vw), calc(24 * var(--u)));
    --brier: Brier, 'Playfair Display', Georgia, serif;
    /* the week stays at full colour, so every front element carries its own soft halo */
    --halo: 0 0 0 1px rgb(244 242 234 / 0.06), 0 12px 40px rgb(18 19 22 / 0.3);
}

@media (min-width: 1000px) {
    :root {
        --m: calc(40 * var(--u));
        --g: calc(24 * var(--u));
        --sec: max(calc(80 * var(--u)), 11.1111vw);
        --body: clamp(calc(16 * var(--u)), calc(11 * var(--u) + 0.63vw), calc(20 * var(--u)));
    }
}

@media (min-width: 1440px) {
    :root {
        --h1: clamp(calc(80 * var(--u)), calc(36.92 * var(--u) + 2.99vw), calc(123.08 * var(--u)));
        --body: clamp(calc(20 * var(--u)), calc(15 * var(--u) + 0.35vw), calc(25 * var(--u)));
    }
}

@media (min-width: 1600px) {
    :root {
        --u: calc(1.11111vw / 16);
    }
}

.gc[data-theme='light'] {
    --tx-rgb: 26 28 28;
    --bg1-rgb: 249 244 235;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

body.gc {
    font-family: var(--gc-font);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    touch-action: manipulation;
}

.gc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.gc-canvas {
    position: fixed;
    left: 0;
    top: 0;
    display: block;
    z-index: 1;
    /* touch drags paint the grain instead of panning */
    touch-action: none;
}

/* the cursor grain over the calendar grid only; sized, placed and shown by calendar-grain.js while it has anything to
   draw. It repaints whole cells, so it has to stay under the dim */
.gc-grain {
    position: fixed;
    top: 0;
    display: block;
    z-index: 2;
    pointer-events: none;
    visibility: hidden;
}

/* ---------- time column ---------- */
.gc-times {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--gc-gutter);
    padding: 0 var(--gc-pad-r) 0 var(--gc-pad-l);
    background: #fff;
    border-right: 1px solid var(--gc-line);
    z-index: 2;
    pointer-events: none;
}

.gc-time {
    position: absolute;
    right: var(--gc-pad-r);
    font-family: Roboto, Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    line-height: 11px;
    color: var(--gc-ink-soft);
    white-space: nowrap;
    transform: translateY(-50%);
}

/* ---------- the camera stage: the visitor over the whole week while the dance plays in the portrait ---------- */
.gc-stage {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--p4), visibility 0s linear 0.6s;
}

.gc.is-live .gc-stage {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s var(--p4), visibility 0s;
}

/* ---------- shared type ---------- */
.gc-mono {
    font-family: var(--mono);
    font-size: calc(10 * var(--u));
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* mono reveal: the ghost keeps the width while the live copy types in as glyphs, then turns into the text */
.gc-m {
    position: relative;
    display: inline-block;
}

.gc-m__ghost {
    visibility: hidden;
}

.gc-m__live {
    position: absolute;
    left: 0;
    top: 0;
    white-space: pre;
}

/* line reveal: each line rises out of its own clip */
.gc-l {
    display: block;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(0, 80%, 0) scale(0.96);
    transform-origin: 0 100%;
    clip-path: inset(-10% -10% 110% -10%);
    transition: transform 0.85s var(--expo), clip-path 0.85s var(--expo), opacity 0.85s var(--expo);
    transition-delay: var(--ld, 0s);
}

.is-in > .gc-l,
.is-in .gc-l {
    opacity: 1;
    transform: none;
    clip-path: inset(-40% -10% -40% -10%);
}

.is-out > .gc-l,
.is-out .gc-l {
    opacity: 1;
    transform: translate3d(0, -80%, 0) scale(0.96);
    clip-path: inset(110% -10% -10% -10%);
    transition-duration: 0.65s;
    transition-delay: 0s;
}

/* ---------- the contact section: one screen, the lead on the bottom left ---------- */
.gc-contact {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: flex-end;
    padding: 0 var(--m) var(--sec);
    color: var(--tx);
    pointer-events: none;
}

.gc-contact a,
.gc-contact button,
.gc-contact input,
.gc-contact textarea,
.gc-contact label,
.gc-title {
    pointer-events: auto;
}

.gc-lead {
    width: calc(var(--col) * 7 + var(--g) * 6);
}

.gc-where {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--u));
    width: fit-content;
    height: calc(30 * var(--u));
    margin: 0 0 calc(22 * var(--u));
    padding: 0 calc(10 * var(--u));
    border-radius: calc(4 * var(--u));
    background: rgb(18 19 22 / 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--halo);
    transition: opacity 0.5s var(--p4), transform 0.6s var(--expo);
}

.gc-clock {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    font-variant-numeric: tabular-nums;
}

.gc-clock__dot {
    width: calc(4 * var(--u));
    height: calc(4 * var(--u));
    border-radius: 50%;
    background: var(--rec);
    animation: gc-blink 2s steps(2, jump-none) infinite;
}

/* white type on black slabs: booked blocks, the way the week books its meetings */
.gc-title {
    margin: 0;
    font-family: var(--suisse);
    font-size: calc(var(--h1) * 1.18);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.gc-title .gc-l + .gc-l {
    margin: calc(8 * var(--u)) 0 0 calc(var(--col) + var(--g));
}

/* letters are flex items with one gap between them and equal padding all round, each trimmed to cap height and
   baseline, so the caps sit dead centre in the slab */
.gc-ink {
    display: inline-flex;
    align-items: center;
    gap: 0.035em;
    padding: 0.13em 0.15em;
    border-radius: calc(4 * var(--u));
    background: #000;
    box-shadow: 0 0 0 1px rgb(244 242 234 / 0.1), 0 14px 44px rgb(18 19 22 / 0.28);
    color: #fff;
}

/* camera on: letters turn signal yellow and the scramble glyphs white, letter by letter, and back when it stops */
@property --gc-chc {
    syntax: '<color>';
    inherits: true;
    initial-value: #fff;
}

@property --gc-glc {
    syntax: '<color>';
    inherits: true;
    initial-value: #FFED29;
}

.gc-ch {
    --gc-chc: #fff;
    --gc-glc: var(--sig);
    position: relative;
    display: block;
    color: var(--gc-chc);
    text-box: trim-both cap alphabetic;
    transition: --gc-chc 0.32s var(--p4), --gc-glc 0.32s var(--p4);
    transition-delay: calc(var(--ci, 0) * 34ms);
}

.gc.is-live .gc-ch {
    --gc-chc: var(--sig);
    --gc-glc: #fff;
}

.gc-ch--sp {
    width: 0.2em;
}

.gc-ch[data-s] {
    color: transparent;
}

.gc-ch[data-s]::after {
    content: attr(data-s);
    position: absolute;
    inset: 0;
    color: var(--gc-glc);
    text-align: center;
    text-box: trim-both cap alphabetic;
    clip-path: inset(-0.02em 0);
}

@supports not (text-box: trim-both cap alphabetic) {
    .gc-ch {
        line-height: 0.74;
        transform: translate3d(0, 0.04em, 0);
    }
}

/* ---------- the button the brief opens out of ---------- */
.gc-brief-open {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    height: calc(50 * var(--u));
    margin-top: calc(40 * var(--u));
    padding: 0 calc(22 * var(--u));
    overflow: hidden;
    border: 1px solid rgb(var(--tx-rgb) / 0.2);
    border-radius: calc(4 * var(--u));
    background: #000;
    box-shadow: var(--halo);
    color: var(--off);
    cursor: pointer;
    transition: color 0.12s linear, opacity 0.5s var(--p4), transform 0.6s var(--expo);
}

.gc-brief-open__fill {
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--sig);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.2s var(--expo);
}

.gc-brief-open__in {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
}

.gc-brief-open__a {
    width: calc(7 * var(--u));
    height: calc(8 * var(--u));
    transition: transform 0.45s var(--expo);
}

.gc-brief-open:hover,
.gc-brief-open:focus-visible {
    color: #000;
}

.gc-brief-open:hover .gc-brief-open__fill,
.gc-brief-open:focus-visible .gc-brief-open__fill {
    transform: none;
}

.gc-brief-open:hover .gc-brief-open__a {
    transform: translate3d(calc(3 * var(--u)), calc(-3 * var(--u)), 0);
}

.gc.is-brief .gc-where,
.gc.is-brief .gc-brief-open {
    opacity: 0;
    transform: translate3d(0, calc(-10 * var(--u)), 0);
    pointer-events: none;
}

/* ---------- the brief ---------- */
.gc-form {
    position: absolute;
    left: var(--m);
    top: 50%;
    width: max(calc(460 * var(--u)), calc(var(--col) * 5 + var(--g) * 4));
    max-height: calc(100dvh - 32 * var(--u));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
    color: var(--off);
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, calc(-50% + 28 * var(--u)), 0) scale(0.965);
    transform-origin: 0 50%;
    transition: opacity 0.35s var(--p4), transform 0.6s var(--expo), visibility 0s linear 0.6s;
}

.gc.is-brief .gc-form {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, -50%, 0);
    transition: opacity 0.45s var(--p4) 0.12s, transform 0.75s var(--expo) 0.12s, visibility 0s;
}

.gc-form__bg {
    position: absolute;
    inset: 0;
    border-radius: calc(4 * var(--u));
    background: rgba(0, 0, 0, 0.86);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--halo);
}

.gc-form__head,
.gc-form__body > *,
.gc-form__done > * {
    position: relative;
    opacity: 0;
    transform: translate3d(0, calc(12 * var(--u)), 0);
    transition: opacity 0.3s ease, transform 0.6s var(--expo);
}

.gc.is-brief .gc-form__head,
.gc.is-brief .gc-form__body > *,
.gc.is-brief .gc-form__done > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.2s + var(--k, 0) * 45ms);
}

.gc-form__body > :nth-child(1) { --k: 1; }
.gc-form__body > :nth-child(2) { --k: 2; }
.gc-form__body > :nth-child(4) { --k: 3; }
.gc-form__done > :nth-child(2) { --k: 1; }
.gc-form__done > :nth-child(3) { --k: 2; }

.gc-form__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: calc(18 * var(--u));
}

.gc-form__title {
    margin: 0;
    font-family: var(--brier);
    font-size: calc(32 * var(--u));
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.gc-form__x {
    padding: calc(4 * var(--u));
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.gc-form__x:hover {
    opacity: 1;
}

.gc-form__x i {
    font-style: normal;
}

.gc-form__body {
    position: relative;
    display: grid;
    gap: calc(18 * var(--u));
    margin: 0;
}

.gc-form[data-state='done'] .gc-form__body {
    display: none;
}

.gc-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(20 * var(--u));
}

.gc-field {
    display: grid;
    gap: calc(4 * var(--u));
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.gc-field__k {
    padding: 0;
    opacity: 0.55;
}

.gc-field input,
.gc-field textarea {
    width: 100%;
    padding: calc(6 * var(--u)) 0 calc(9 * var(--u));
    border: 0;
    border-bottom: 1px solid rgb(249 244 235 / 0.22);
    border-radius: 0;
    background: none;
    color: var(--off);
    font-family: var(--suisse);
    font-size: max(16px, calc(16 * var(--u)));
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    outline: none;
    resize: none;
    transition: border-color 0.25s ease;
}

.gc-field input::placeholder,
.gc-field textarea::placeholder {
    color: rgb(249 244 235 / 0.36);
    font-family: var(--suisse);
    font-weight: 400;
}

.gc-field input:focus,
.gc-field textarea:focus {
    border-bottom-color: var(--sig);
}

.gc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}

.gc-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16 * var(--u));
    margin-top: calc(4 * var(--u));
}

.gc-form__note {
    margin: 0;
    white-space: normal;
    opacity: 0.7;
}

.gc-form[data-state='error'] .gc-form__note {
    color: #ff8a7a;
    opacity: 1;
}

.gc-send {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: calc(12 * var(--u));
    height: calc(46 * var(--u));
    margin-left: auto;
    padding: 0 calc(20 * var(--u));
    border: 0;
    border-radius: calc(4 * var(--u));
    background: var(--sig);
    color: #000;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.45s var(--expo);
}

.gc-send svg {
    width: calc(7 * var(--u));
    height: calc(8 * var(--u));
    transition: transform 0.45s var(--expo);
}

.gc-send:hover {
    background: #fff27a;
}

.gc-send:hover svg {
    transform: translate3d(calc(3 * var(--u)), calc(-3 * var(--u)), 0);
}

.gc-send:disabled {
    cursor: progress;
}

.gc-form[data-state='sending'] .gc-send svg {
    animation: gc-blink 0.5s steps(2, jump-none) infinite;
}

.gc-form__done {
    position: relative;
    display: none;
    justify-items: start;
    gap: calc(14 * var(--u));
    padding: calc(10 * var(--u)) 0 calc(4 * var(--u));
}

.gc-form[data-state='done'] .gc-form__done {
    display: grid;
}

.gc-form__done p {
    margin: 0;
    white-space: normal;
}

.gc-form__big {
    padding: 0.07em 0.12em 0.015em;
    border-radius: calc(4 * var(--u));
    background: var(--sig);
    color: #000;
    font-family: var(--brier);
    font-size: calc(56 * var(--u));
    font-weight: 700;
    line-height: 0.84;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.gc-form__again {
    margin-top: calc(6 * var(--u));
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    color: inherit;
    cursor: pointer;
}

/* ---------- the side column, top right: soundtrack bar level with the nav pill, the camera under it ---------- */
.gc-side {
    position: fixed;
    right: calc(16 * var(--u));
    top: calc(16 * var(--u));
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    width: calc(214 * var(--u));
}

.gc-sound {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(50 * var(--u));
    padding: 0 calc(13 * var(--u));
    border-radius: calc(4 * var(--u));
    background: rgba(0, 0, 0, 0.86);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--halo);
    color: var(--off);
}

.gc-sound .gc-sound-slot .ss-toggle {
    color: var(--off);
}


.gc-panel {
    position: relative;
    overflow: hidden;
    padding: 0 calc(13 * var(--u)) calc(6 * var(--u));
    border-radius: calc(4 * var(--u));
    background: rgba(0, 0, 0, 0.86);
    box-shadow: var(--halo);
    color: var(--off);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.gc-panel__bg {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.45s var(--expo);
}

.gc-panel.is-open .gc-panel__bg {
    opacity: 1;
}

.gc-panel__head {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: calc(50 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.gc-panel__head > span {
    padding-bottom: calc(2 * var(--u));
}

.gc-panel__pm i {
    font-style: normal;
}

.gc-panel__body {
    position: relative;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--expo);
}

.gc-panel.is-open .gc-panel__body {
    grid-template-rows: 1fr;
}

.gc-panel__inner {
    min-height: 0;
    overflow: hidden;
}

.gc-panel__inner::after {
    content: '';
    display: block;
    height: calc(4 * var(--u));
}

.gc-shot {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: calc(4 * var(--u));
    background: var(--bg1);
}

.gc-shot img,
.gc-shot__cam {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.gc-shot img {
    object-fit: cover;
    object-position: 50% 30%;
}

.gc-shot__cam {
    opacity: 0;
    transition: opacity 0.65s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.gc-shot.is-on .gc-shot__cam {
    opacity: 1;
}

.gc-shot__count {
    position: absolute;
    left: 50%;
    top: 46%;
    font-family: var(--suisse);
    font-size: calc(64 * var(--u));
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 0 calc(18 * var(--u)) rgba(255, 247, 207, 0.9);
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
}

.gc-shot__count.is-tick {
    animation: gc-tick 0.42s var(--expo);
}

@keyframes gc-tick {
    from {
        opacity: 0.2;
        transform: translate3d(-50%, -50%, 0) scale(1.45);
    }
}

.gc-shot__flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.gc-shot.is-flash .gc-shot__flash {
    animation: gc-flash 0.6s ease-out;
}

@keyframes gc-flash {
    from {
        opacity: 1;
    }
}

/* data-inverted on theirs: cream at rest, clear with an outline under the pointer */
.gc-book {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    width: 100%;
    height: calc(32 * var(--u));
    margin-top: calc(8 * var(--u));
    padding: 0 calc(16 * var(--u));
    border: 1px solid rgb(249 244 235 / 0.2);
    border-radius: calc(4 * var(--u));
    background: none;
    color: var(--bg1);
    cursor: pointer;
    transition: color 0.35s var(--p4);
}

.gc .gc-book {
    color: rgb(26, 28, 28);
}

.gc-book::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: var(--off);
    transition: opacity 0.45s var(--p4) 0.2s;
}

.gc-book:hover,
.gc-book:focus-visible {
    color: var(--off);
}

.gc-book:hover::before,
.gc-book:focus-visible::before {
    opacity: 0;
    transition-duration: 0.35s;
    transition-delay: 0s;
}

.gc-book:disabled {
    cursor: progress;
}

.gc-panel[data-booth='waking'] .gc-book .gc-rec,
.gc-panel[data-booth='live'] .gc-book .gc-rec {
    animation: gc-blink 1.1s steps(2, jump-none) infinite;
}

.gc-panel[data-booth='booked'] .gc-book .gc-rec {
    border-radius: 0;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@keyframes gc-blink {
    50% {
        opacity: 0.2;
    }
}

.gc-panel__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(4 * var(--u));
    margin-top: calc(4 * var(--u));
}

.gc-panel__pair[hidden] {
    display: none;
}

.gc-ghost {
    height: calc(32 * var(--u));
    padding: 0;
    border: 1px solid rgb(249 244 235 / 0.2);
    border-radius: calc(4 * var(--u));
    background: none;
    color: var(--off);
    cursor: pointer;
    transition: background-color 0.35s var(--p4), color 0.35s var(--p4);
}

.gc-ghost:hover,
.gc-ghost:focus-visible {
    background: var(--off);
    color: rgb(26, 28, 28);
}

.gc-panel__note {
    margin: calc(6 * var(--u)) 0 0;
    white-space: normal;
    opacity: 0.6;
}

.gc-panel__note:empty {
    display: none;
}


/* ---------- grid settings, reach, email ---------- */
.gc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(2 * var(--u));
    height: calc(30 * var(--u));
    margin-top: calc(8 * var(--u));
    padding: calc(2 * var(--u));
    border-radius: calc(4 * var(--u));
    background: rgb(217 217 217 / 0.1);
}

.gc-grid button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--u));
    padding: 0;
    border: 0;
    border-radius: calc(3 * var(--u));
    background: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.3s var(--p4), color 0.3s var(--p4);
}

.gc-grid button[aria-checked='true'] {
    background: var(--off);
    color: #000;
}

.gc-grid button:not([aria-checked='true']):hover {
    background: rgb(244 242 234 / 0.1);
}

.gc-grid__ico {
    flex: none;
    width: 11px;
    height: 11px;
    shape-rendering: crispEdges;
}

.gc-reach {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(4 * var(--u));
    margin-top: calc(8 * var(--u));
}

.gc-ico {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(10 * var(--u));
    min-width: 0;
    height: calc(36 * var(--u));
    padding: 0 calc(10 * var(--u));
    border: 1px solid rgb(249 244 235 / 0.2);
    border-radius: calc(4 * var(--u));
    color: var(--off);
    text-decoration: none;
    transition: background-color 0.3s var(--p4), color 0.3s var(--p4), border-color 0.3s var(--p4);
}

.gc-ico[hidden] {
    display: none;
}

.gc-ico__t {
    order: 2;
    overflow: hidden;
    font-size: calc(9 * var(--u));
    line-height: 1;
    text-overflow: ellipsis;
}

.gc-ico svg {
    flex: none;
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
    transform-origin: 50% 50%;
    transition: transform 0.45s var(--expo);
}

.gc-ico:hover,
.gc-ico:focus-visible {
    border-color: var(--off);
    background: var(--off);
    color: #000;
}

.gc-ico:hover svg {
    transform: scale(1.12);
}

/* ---------- the sound switch in their language-switch slot: SOUND OFF (o) ON ---------- */
.gc-sound-slot .ss-toggle {
    gap: calc(4 * var(--u));
    height: auto;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--tx);
    font-family: var(--mono);
    font-size: calc(10 * var(--u));
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.02em;
}

.gc-sound-slot .ss-toggle {
    gap: calc(10 * var(--u));
    height: 14px;
    line-height: 14px;
}

.gc-sound-slot .ss-toggle__label {
    line-height: 14px;
}

/* the label, the blocks and the On/Off roll share one 14px line, centred in the bar */
.gc-sound > span {
    display: flex;
    align-items: center;
    height: 14px;
    line-height: 14px;
}

.gc-contact :focus-visible,
.gc-side :focus-visible {
    outline: 1px solid var(--sig);
    outline-offset: 2px;
}

.gc-field input:focus-visible,
.gc-field textarea:focus-visible {
    outline: none;
}

/* ---------- entrance: chrome fades in with the reveal ---------- */
.gc-side,
.gc-where,
.gc-brief-open {
    opacity: 0;
}

.gc.is-entered .gc-side {
    opacity: 1;
    transition: opacity 0.65s var(--p4);
}

.gc.is-entered:not(.is-brief) .gc-where,
.gc.is-entered:not(.is-brief) .gc-brief-open {
    opacity: 1;
    transition-delay: 0.5s, 0.5s, 0s;
}

/* transitions here are color, opacity, transform: only the entrance fade waits, the hover colour never does */
.gc.is-entered:not(.is-brief) .gc-brief-open {
    transition-delay: 0s, 0.5s, 0s;
}

/* ---------- below 1000px: stacked ---------- */
@media (max-width: 999px) {
    :root {
        --gc-pad-l: 2px;
        --gc-pad-r: 3px;
    }

    .gc-time {
        font-size: 7.5px;
        line-height: 9px;
    }

    .gc-lead {
        width: auto;
    }

    .gc-title {
        font-size: var(--h1);
    }

    .gc-side {
        left: var(--m);
        right: var(--m);
        top: calc(74 * var(--u));
        width: auto;
    }

    .gc-sound {
        height: calc(40 * var(--u));
    }

    .gc-shot {
        width: min(100%, calc(38dvh * 0.8));
        margin: 0 auto;
    }

    .gc-form {
        left: var(--m);
        right: var(--m);
        width: auto;
        max-height: calc(100dvh - 90 * var(--u));
    }

    .gc-form__row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gc-l,
    .gc-panel__body,
    .gc-form,
    .gc-form *,
    .gc-brief-open,
    .gc-clock__dot,
    .gc-rec {
        transition: none !important;
        animation: none !important;
    }
}