/* Footer: signed. No fill of its own, so the shared backdrop and slide 05's fixed sticker canvas run straight into it;
   the signature opens it, centred, and the stickers land in .sig-pit, on the top edge of .sig-bar. The inline
   SVG is the signature without JS; footer-signature.js swaps it for the tapered 2D pen (.is-drawn) and writes it on over
   the final scroll. The pit grows
   (--sig-pit, set by work-together.js) until the stickers fit at conveyor size. */

.sig-footer {
    --sig-ink: #f4f2ea;
    --sig-hair: rgba(244, 242, 234, 0.22);
    --sig-sun: #FFED29;
    --sig-mono: 'IBM Plex Mono', 'Sometype Mono', monospace;
    --sig-display: 'Brier', Georgia, serif;
    --sig-ease: cubic-bezier(0.19, 1, 0.22, 1);
    --sig-pad: clamp(20px, 3.2vw, 56px);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(84px, 11vh, 128px) var(--sig-pad) 0;
    display: grid;
    grid-template-rows: auto var(--sig-pit, 30vh) auto;
    background: transparent;
    color: var(--sig-ink);
}
.sig-footer *,
.sig-footer *::before,
.sig-footer *::after { box-sizing: border-box; }

.sig-kicker {
    margin: 0;
    font: 500 11px/1.5 var(--sig-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sig-ink);
}

.sig-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sig-ink);
    font: 500 11px/1.5 var(--sig-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}
.sig-back__arrow {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--sig-hair);
    border-radius: 50%;
    overflow: hidden;
    transition: border-color 0.4s var(--sig-ease), background-color 0.4s var(--sig-ease), color 0.4s var(--sig-ease);
}
.sig-back__arrow svg {
    width: 11px;
    height: 11px;
    transition: transform 0.55s var(--sig-ease);
}
.sig-back:hover .sig-back__arrow,
.sig-back:focus-visible .sig-back__arrow { background: var(--sig-sun); border-color: var(--sig-sun); color: #121316; }
.sig-back:hover .sig-back__arrow svg,
.sig-back:focus-visible .sig-back__arrow svg { transform: translate3d(0, -2px, 0); }
.sig-back:focus-visible { outline: 1px solid var(--sig-sun); outline-offset: 6px; }

/* Centred under the kicker at the 1000:726 viewBox, capped so it fits one screen with the kicker above it */
.sig-hero {
    position: relative;
    width: min(100%, 92vh);
    aspect-ratio: 1000 / 726;
}
.sig-title {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.sig-canvas,
.sig-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.sig-svg {
    fill: none;
    stroke: var(--sig-sun);
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}
.sig-footer.is-drawn .sig-svg { visibility: hidden; }

.sig-hello {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.6vh, 18px);
    text-align: center;
}

.sig-pit { pointer-events: none; }

.sig-bar {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding: 14px 0 clamp(16px, 2.6vh, 28px);
    border-top: 1px solid var(--sig-hair);
    font: 500 11px/1.5 var(--sig-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.sig-copy { margin: 0; color: var(--sig-ink); }
.sig-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px clamp(18px, 2.4vw, 36px);
}
.sig-nav a {
    color: var(--sig-ink);
    text-decoration: none;
    transition: color 0.35s var(--sig-ease);
}
.sig-nav a:hover,
.sig-nav a:focus-visible { color: var(--sig-sun); }
.sig-nav a:focus-visible { outline: 1px solid var(--sig-sun); outline-offset: 4px; }

@media (max-width: 700px) {
    .sig-kicker,
    .sig-back,
    .sig-bar { font-size: 10px; }
    .sig-bar { display: grid; grid-template-columns: 1fr auto; }
    .sig-nav { grid-column: 1 / -1; order: -1; justify-content: space-between; }
}