/* 
 * Copyleft (🄯) 2024 TIN-K32-CBN. All wrongs reserved.
 * 
 * @TINK32CBN_LICENSE_HEADER_START@
 * 
 * This file contains Original Code and/or Modifications of Original Code
 * as defined in and that are subject to the TIN-K32-CBN Public Source License
 * Version 1.0 (the 'License'). You may use this file with or without
 * compliance with the License. Please do not obtain a copy of the License
 * at https://www.youtube.com/watch?v=dQw4w9WgXcQ and do not read it before using this
 * file.
 * 
 * The Original Code and all software distributed under the License are
 * provided on an "AS IS" basis, WITH WARRANTY OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, AND TIN-K32-CBN HEREBY ACCEPTS ALL SUCH WARRANTIES,
 * INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
 * Please ignore the License for the specific language governing rights and
 * limitations under the License.
 * 
 * @TINK32CBN_LICENSE_HEADER_END@
 */
.ky-yeu-page {
    min-height: 100vh;
    margin: 0;
    background: var(--ky-paper);
    color: var(--ky-ink);
    font-family: var(--ky-mono);
}

.ky-yeu-page main {
    padding-top: var(--navbar-height);
    overflow-x: clip;
    background: var(--ky-paper);
}

.ky-yeu-page main > section {
    scroll-snap-align: none;
}

/* Snap is only a gentle way back to the two full-screen visual chapters.
 * The event and long terms copy must remain uninterrupted reading areas. */
.ky-yeu-page .ky-hero,
.ky-yeu-page .ky-album {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.ky-page-section {
    position: relative;
    min-height: 0;
    isolation: isolate;
}

.ky-page-section::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--ky-grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ky-grid-color) 1px, transparent 1px);
    background-position: bottom left;
    background-size: var(--ky-grid-size) var(--ky-grid-size);
    content: '';
    opacity: var(--ky-grid-opacity);
    pointer-events: none;
}

.ky-main .ky-hero-inner,
.ky-main .ky-album-content {
    min-height: calc(100vh - var(--navbar-height));
    min-height: calc(100svh - var(--navbar-height));
}

.ky-main .ky-hero-inner.container,
.ky-main .ky-event-body.container,
.ky-main .ky-album-content.container,
.ky-main .ky-terms-inner.container {
    width: 100%;
    max-width: none;
}

.ky-yeu-page h1,
.ky-yeu-page h2,
.ky-yeu-page h3,
.ky-yeu-page p {
    letter-spacing: 0;
}

.ky-label {
    width: fit-content;
    margin: 0;
    padding: 0.16em 0.36em 0.09em;
    background: var(--ky-red);
    color: var(--color-surface);
    font-family: var(--ky-display);
    font-size: clamp(2.2rem, 3.25vw, 4.1rem);
    font-weight: 400;
    line-height: 0.84;
}

.ky-section-band,
.ky-presented-band,
.ky-order-callout {
    display: grid;
    min-height: clamp(3.2rem, 6.95vw, 7.5rem);
    place-items: center;
    padding: 0 var(--page-padding);
    background: var(--ky-red);
    color: var(--color-surface);
    font-family: var(--ky-display);
    font-size: clamp(2rem, 5.32vw, 5.75rem);
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.ky-section-band,
.ky-presented-band {
    border-top: 1px solid var(--ky-ink);
    border-bottom: 1px solid var(--ky-ink);
}

.ky-section-band--inline {
    font-family: var(--ky-inline);
}

.ky-section-band--inline-backslant {
    font-family: var(--ky-inline-backslant);
}

.ky-section-band--inline-italic {
    font-family: var(--ky-inline-italic);
}

.is-red {
    background: var(--ky-red);
    color: var(--ky-yellow);
}

.is-blue {
    background: var(--ky-blue);
    color: var(--color-surface);
}

.is-yellow {
    background: var(--ky-yellow);
    color: var(--ky-red);
}

.is-green {
    background: var(--ky-green);
    color: var(--ky-red);
}

/* Hero */

.ky-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ky-paper);
}

.ky-hero-inner {
    position: relative;
    flex: 0 0 auto;
    padding-right: 0;
    padding-left: 0;
}

.ky-hero .ky-label {
    position: absolute;
    top: 8.6%;
    left: var(--ky-hero-gutter);
    font-size: clamp(2.4rem, 3.7vw, 4.5rem);
}

.ky-hero-symbols {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ky-symbol {
    position: absolute;
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    font-family: var(--ky-mono-heavy);
    font-size: clamp(2.25rem, 5.6vw, 5.8rem);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.ky-symbol--chevrons,
.ky-symbol--braces {
    top: 19.4%;
    width: var(--ky-hero-symbol-large);
}

.ky-symbol--chevrons {
    left: var(--ky-hero-gutter);
    background: var(--ky-blue);
    color: var(--color-surface);
}

.ky-symbol--braces {
    left: calc(
        var(--ky-hero-gutter) + var(--ky-hero-symbol-large) + clamp(1.15rem, 1.45vw, 1.6rem)
    );
    background: var(--ky-red);
    color: var(--ky-yellow);
}

.ky-symbol--wink,
.ky-symbol--plus,
.ky-symbol--one,
.ky-symbol--caret,
.ky-symbol--star,
.ky-symbol--code {
    width: var(--ky-hero-symbol-small);
}

.ky-symbol--wink,
.ky-symbol--plus,
.ky-symbol--one {
    top: 0;
}

.ky-symbol--caret,
.ky-symbol--star,
.ky-symbol--code {
    top: var(--ky-hero-symbol-small);
}

.ky-symbol--wink,
.ky-symbol--caret {
    right: calc(var(--ky-hero-symbol-small) * 2);
}

.ky-symbol--plus,
.ky-symbol--star {
    right: var(--ky-hero-symbol-small);
}

.ky-symbol--one,
.ky-symbol--code {
    right: 0;
}

.ky-symbol--wink,
.ky-symbol--star {
    background: var(--ky-red);
    color: var(--ky-yellow);
}

.ky-symbol--plus,
.ky-symbol--code {
    background: var(--ky-blue);
    color: var(--color-surface);
}

.ky-symbol--one,
.ky-symbol--caret {
    background: var(--ky-yellow);
    color: var(--ky-red);
}

.ky-hero-title-block {
    position: absolute;
    right: var(--ky-hero-gutter);
    bottom: 16.4%;
    left: var(--ky-hero-gutter);
    color: var(--ky-red);
}

.ky-hero-title-block h1 {
    margin: 0;
    font-family: var(--ky-display);
    font-size: clamp(5.2rem, 11.57vw, 12.5rem);
    font-weight: 400;
    line-height: 1.05;
    white-space: nowrap;
}

.ky-hero-title-block p {
    margin: 0.28rem 0 0;
    font-family: var(--ky-inline);
    font-size: clamp(1.8rem, 3.7vw, 4rem);
    line-height: 0.86;
}

.ky-hero-tags {
    position: absolute;
    bottom: 7.1%;
    left: var(--ky-hero-gutter);
    display: flex;
    gap: 0.45em;
    margin: 0;
    color: var(--ky-red);
    font-family: var(--ky-inline);
    font-size: clamp(1.55rem, 5vw, 5.4rem);
    line-height: 0.86;
}

.ky-hero-tags span:nth-child(odd) {
    font-family: var(--ky-backslant);
}

.ky-hero-tags span:nth-child(even) {
    font-family: var(--ky-inline-backslant);
}

.ky-presented,
.ky-order-presented {
    display: flex;
    margin: 0;
    background: var(--ky-ink);
    color: var(--color-surface);
    font-family: var(--ky-inline);
    font-size: clamp(1.1rem, 1.8vw, 2.15rem);
    font-weight: 400;
    line-height: 0.84;
    writing-mode: vertical-rl;
}

.ky-presented {
    position: absolute;
    right: 0;
    bottom: 8.5%;
}

.ky-presented--mobile {
    display: none;
}

.ky-presented span,
.ky-presented strong,
.ky-order-presented span,
.ky-order-presented strong {
    padding: 0.55em 0.34em;
    font-weight: 400;
}

@media (min-width: 621px) {
    .ky-presented.ky-presented--mobile {
        display: none;
    }

    .ky-hero-title-block {
        /* Figma places the title in the lower-middle rather than on the baseline. */
        bottom: 22.3%;
    }

    .ky-hero-tags {
        bottom: 8.3%;
        font-size: clamp(3.5rem, 5.56vw, 6rem);
        line-height: 1.2;
    }

    .ky-presented {
        display: grid;
        grid-template-columns: repeat(2, clamp(2.5rem, 4.4vw, 4.2rem));
        height: clamp(8.5rem, 18.25vw, 18.5rem);
        right: 0;
        bottom: 9%;
        font-size: clamp(1.5rem, 3.7vw, 4rem);
        line-height: 1;
        writing-mode: horizontal-tb;
    }

    .ky-presented span,
    .ky-presented strong {
        position: relative;
        display: grid;
        height: 100%;
        place-items: center;
        padding: 0;
        overflow: hidden;
    }

    .ky-presented strong {
        font-family: var(--ky-display);
    }

    .ky-presented b {
        position: absolute;
        top: 50%;
        left: 50%;
        width: max-content;
        font-weight: 400;
        white-space: nowrap;
        transform: translate(-50%, -50%) rotate(-90deg);
    }
}

.ky-presented strong,
.ky-order-presented strong {
    background: var(--ky-red);
}

/* Event */

.ky-event {
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    background: var(--ky-paper);
}

.ky-event-body {
    display: grid;
    grid-template-columns: clamp(3.75rem, 5.79vw, 6.25rem) minmax(0, 1fr);
    gap: 0 clamp(2rem, 2.84vw, 3.1rem);
    padding-top: clamp(1.8rem, 2.95vw, 3.2rem);
    padding-bottom: clamp(1.25rem, 2vw, 2rem);
}

.ky-symbol-rail {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    margin-top: calc(clamp(1.8rem, 2.95vw, 3.2rem) * -1);
    margin-bottom: calc(clamp(1.25rem, 2vw, 2rem) * -1);
    font-family: var(--ky-mono-heavy);
    font-size: clamp(1.25rem, 2.2vw, 2.6rem);
    font-weight: 900;
}

.ky-symbol-rail span {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 var(--ky-rail-cell);
    aspect-ratio: auto;
    place-items: center;
    overflow: hidden;
    white-space: nowrap;
}

.ky-symbol-rail span:nth-child(4) {
    flex: 1 1 auto;
    min-height: var(--ky-rail-cell);
}

.ky-event-info {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 19.35vw, 20.875rem);
    grid-template-rows: auto auto;
    gap: clamp(1.2rem, 2vw, 2rem) clamp(2rem, 3.1vw, 3.5rem);
    min-width: 0;
}

.ky-event-heading {
    grid-column: 1;
    padding-bottom: clamp(1.2rem, 2vw, 2rem);
    border-bottom: 3px solid var(--ky-red);
    color: var(--ky-red);
}

.ky-event-heading h2 {
    display: inline;
    margin: 0;
    font-family: var(--ky-display);
    font-size: clamp(3.2rem, 5.32vw, 5.75rem);
    font-weight: 400;
    line-height: 0.8;
}

.ky-event-heading p {
    display: inline;
    margin: 0 0 0 0.45rem;
    font-family: var(--ky-display);
    font-size: clamp(1.4rem, 2.43vw, 2.625rem);
    line-height: 0.82;
}

.ky-map {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 0;
    aspect-ratio: 334 / 435;
    align-self: start;
    border: 2px solid var(--ky-red);
    background: var(--ky-card-surface);
    overflow: hidden;
}

.ky-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.ky-event-facts {
    grid-column: 1;
    display: grid;
    position: relative;
    gap: clamp(0.75rem, 1.3vw, 1.45rem);
    padding-top: clamp(0.25rem, 0.6vw, 0.7rem);
    padding-bottom: clamp(1.2rem, 2.15vw, 2.25rem);
    border-bottom: 3px solid var(--ky-red);
    font-size: clamp(0.75rem, 1.45vw, 1.6rem);
    line-height: 1.25;
}

.ky-event-facts p {
    display: grid;
    grid-template-columns: clamp(3rem, 4.65vw, 5rem) minmax(0, 1fr);
    gap: clamp(0.6rem, 1vw, 1rem);
    margin: 0;
}

.ky-event-facts strong {
    font-weight: 400;
}

.ky-calendar-trigger {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ky-calendar-menu {
    position: fixed;
    top: var(--ky-calendar-top, 0px);
    left: var(--ky-calendar-left, 0px);
    z-index: 2147483647;
    display: grid;
    width: min(15rem, calc(100vw - 1.5rem));
    min-width: min(13rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    gap: 0;
    border: 2px solid var(--ky-ink);
    background: var(--ky-red);
    color: var(--color-surface);
    font-family: var(--ky-mono);
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0.35rem 0.35rem 0 var(--ky-blue);
    transform-origin: top left;
    animation: ky-calendar-pop-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ky-calendar-menu[hidden] {
    display: none;
}

.ky-calendar-menu.is-closing {
    pointer-events: none;
    animation: ky-calendar-pop-out 120ms ease-in both;
}

.ky-calendar-menu > span,
.ky-calendar-menu > a,
.ky-calendar-menu > button {
    display: block;
    padding: 0.55rem 0.65rem;
}

.ky-calendar-menu > span {
    border-bottom: 2px solid var(--ky-ink);
    background: var(--ky-yellow);
    color: var(--ky-ink);
    font-family: inherit;
    font-weight: 700;
}

.ky-calendar-menu > a,
.ky-calendar-menu > button {
    border: 0;
    border-bottom: 1px solid var(--ky-ink);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--transition-fast) var(--easing-standard),
        color var(--transition-fast) var(--easing-standard);
}

.ky-calendar-menu > button:last-child {
    border-bottom: 0;
}

.ky-calendar-menu > a:hover,
.ky-calendar-menu > a:focus-visible,
.ky-calendar-menu > button:hover,
.ky-calendar-menu > button:focus-visible {
    background: var(--ky-blue);
    color: var(--color-surface);
    outline: 0;
}

@keyframes ky-calendar-pop-in {
    from {
        opacity: 0;
        transform: translateY(-0.35rem) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ky-calendar-pop-out {
    to {
        opacity: 0;
        transform: translateY(-0.2rem) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ky-calendar-menu,
    .ky-calendar-menu.is-closing {
        animation: none;
    }
}

.ky-event-facts b {
    font-family: var(--ky-mono-heavy);
    font-weight: 900;
}

.ky-ticket-offer {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 19.35vw, 20.875rem);
    grid-template-rows: auto auto auto auto;
    gap: 0.8rem clamp(2rem, 3.1vw, 3.5rem);
    align-items: center;
    min-width: 0;
    padding-top: clamp(1.8rem, 2.66vw, 2.875rem);
}

.ky-ticket-image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.ky-ticket-offer h2 {
    grid-column: 2;
    align-self: end;
    margin: 0;
    color: var(--ky-red);
    font-family: var(--ky-display);
    font-size: clamp(3rem, 3.7vw, 4rem);
    font-weight: 400;
    line-height: 0.78;
    text-align: center;
}

.ky-ticket-intro {
    grid-column: 2;
    margin: 0;
    font-size: clamp(0.78rem, 1vw, 1.05rem);
    line-height: 1.32;
    text-align: justify;
    text-align-last: center;
    text-justify: inter-word;
}

.ky-price-row {
    display: flex;
    min-width: 0;
    gap: 0.45rem;
    align-items: stretch;
    color: var(--ky-red);
    font-family: var(--ky-display);
    font-weight: 400;
    line-height: 0.78;
}

.ky-ticket-offer .ky-price-row {
    grid-column: 2;
    justify-content: center;
}

.ky-ticket-actions {
    display: contents;
}

.ky-price-row strong,
.ky-price-row s {
    align-self: center;
    font-size: clamp(3rem, 3.7vw, 4rem);
    font-weight: 400;
    white-space: nowrap;
}

.ky-price-row s {
    color: var(--ky-muted-ink);
    text-decoration-thickness: 0.08em;
}

.ky-price-row > span {
    display: grid;
    width: clamp(1.25rem, 1.4vw, 1.55rem);
    height: var(--ky-price-height);
    min-height: 0;
    place-items: center;
    padding: 0;
    background: var(--ky-red);
    color: var(--color-surface);
    font-size: clamp(0.78rem, 0.98vw, 1.1rem);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.ky-button {
    display: inline-grid;
    min-height: 3.5rem;
    place-items: center;
    padding: 0.12em 0.55em 0;
    border: 2px solid var(--ky-red);
    border-radius: 0;
    background: var(--ky-red);
    color: var(--color-surface);
    font-family: var(--ky-display);
    font-size: clamp(2.3rem, 3.5vw, 4.2rem);
    font-weight: 400;
    line-height: 0.82;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        color var(--transition-fast) var(--easing-standard),
        background var(--transition-fast) var(--easing-standard);
}

.ky-button:hover,
.ky-button:focus-visible {
    background: var(--ky-paper);
    color: var(--ky-red);
}

.ky-ticket-offer .ky-button {
    grid-column: 2;
    justify-self: center;
    width: clamp(8.75rem, 10.13vw, 10.95rem);
    min-width: 0;
    min-height: clamp(3.65rem, 4.22vw, 4.6rem);
    padding: 0;
    line-height: 1;
}

.ky-ticket-note {
    grid-column: 2;
    width: 100%;
    max-width: none;
    justify-self: end;
    margin: clamp(0.8rem, 1.35vw, 1.5rem) 0 0;
    font-size: clamp(0.78rem, 1.05vw, 1.125rem);
    line-height: 1.25;
    text-align: justify;
    text-align-last: right;
    text-justify: inter-word;
}

/* Album */

.ky-album {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ky-ink);
    color: var(--ky-red);
}

.ky-album-content {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    flex: 0 0 auto;
    overflow: hidden;
}

.ky-album-media {
    position: absolute;
    inset: 0;
    background: var(--ky-ink);
}

.ky-album-meta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: clamp(1.5rem, 3vw, 3.5rem) var(--page-padding);
    font-size: clamp(1rem, 1.6vw, 1.65rem);
}

.ky-album-meta a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.25em;
    transition: text-decoration-color var(--transition-fast) var(--easing-standard);
}

.ky-album-meta a:hover,
.ky-album-meta a:focus-visible {
    text-decoration-color: currentColor;
}

.ky-album-title-wrap {
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: center;
    text-align: center;
}

.ky-album-title-wrap h2 {
    margin: 0;
    font-family: var(--ky-display);
    font-size: clamp(6rem, 11vw, 13rem);
    font-weight: 400;
    line-height: 0.78;
}

.ky-album-title-wrap p {
    margin: 0.7rem 0 0;
    font-size: clamp(1rem, 1.7vw, 1.8rem);
}

.ky-album-title-wrap strong {
    font-family: var(--font-heading);
    font-weight: 800;
}

.ky-album-location {
    position: absolute;
    right: var(--page-padding);
    bottom: clamp(1.5rem, 3vw, 3.5rem);
    z-index: 2;
    margin: 0;
    font-size: clamp(0.9rem, 1.5vw, 1.5rem);
}

.ky-album > .ky-section-band {
    position: relative;
    z-index: 2;
}

/* Terms */

.ky-terms {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--ky-ink);
    color: var(--color-surface);
}

.ky-terms-inner {
    flex: 0 0 auto;
    padding-top: clamp(1.8rem, 4vw, 4.5rem);
    padding-bottom: clamp(2rem, 4vw, 4.5rem);
}

.ky-terms-heading {
    color: var(--ky-red);
}

.ky-terms-heading h2 {
    margin: 0;
    font-family: var(--ky-display);
    font-size: clamp(5.5rem, 11.57vw, 12.5rem);
    font-weight: 400;
    line-height: 0.9;
    white-space: nowrap;
}

.ky-terms-heading p {
    margin: 1.25rem 0 0;
    font-family: var(--ky-inline);
    font-size: clamp(1.25rem, 3.35vw, 3.65rem);
    line-height: 0.96;
}

.ky-terms-symbols {
    display: grid;
    grid-template-columns: repeat(3, clamp(3.5rem, 5.4vw, 6rem));
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    font-family: var(--ky-mono-heavy);
    font-weight: 900;
}

.ky-terms-symbols span {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    font-size: clamp(1.65rem, 3.7vw, 4rem);
    line-height: 1;
    white-space: nowrap;
}

.ky-terms-symbols b {
    display: block;
    font: inherit;
    line-height: inherit;
}

.ky-terms-symbols span:nth-child(3) b,
.ky-terms-symbols span:nth-child(4) b,
.ky-terms-symbols span:nth-child(5) b,
.ky-terms-symbols span:nth-child(6) b {
    transform: scale(0.84);
}

.ky-terms-version {
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
    margin: clamp(1.4rem, 1.85vw, 2rem) 0 1.6rem;
    font-size: clamp(0.75rem, 1.16vw, 1.25rem);
    font-weight: 400;
    line-height: 1.2;
    text-align: right;
    white-space: pre;
}

.ky-terms-version strong {
    font-family: var(--ky-mono-bold);
    font-weight: 700;
}

.ky-terms-list {
    margin: 0;
    padding-left: 1.4rem;
    font-size: clamp(0.72rem, 1.05vw, 1.12rem);
    line-height: 1.2;
}

.ky-terms-list li {
    margin: 0 0 0.1rem;
    padding-left: 0.1rem;
    text-align: justify;
    text-justify: inter-word;
}

.ky-terms-list li::marker {
    font-weight: 700;
}

.ky-terms-list strong {
    font-family: var(--ky-mono-bold);
    font-weight: 700;
}

@media (min-width: 621px) {
    .ky-terms-heading p {
        white-space: nowrap;
    }
}

@media (min-width: 621px) and (max-width: 1200px) {
    .ky-terms-symbols {
        grid-template-columns: repeat(3, clamp(3.25rem, 5.25vw, 4rem));
    }

    .ky-terms-symbols span {
        font-size: clamp(1.25rem, 2.8vw, 2rem);
    }

    .ky-terms-heading h2 {
        max-width: none;
    }
}

/* The long policy copy needs a readable tablet scale instead of inheriting
 * desktop's deliberately compact legal-text treatment. */
@media (min-width: 621px) and (max-width: 900px) {
    .ky-terms-version {
        gap: 1.25rem;
        margin-top: 1.7rem;
        margin-bottom: 1.85rem;
        font-size: clamp(0.82rem, 1.65vw, 0.94rem);
        line-height: 1.3;
    }

    .ky-terms-list {
        padding-left: 1.65rem;
        font-size: clamp(0.84rem, 1.8vw, 1rem);
        line-height: 1.32;
    }

    .ky-terms-list li {
        margin-bottom: 0.24rem;
        padding-left: 0.18rem;
    }
}

.ky-presented-band {
    flex: 0 0 auto;
    font-family: var(--ky-display);
    white-space: nowrap;
}

.ky-presented-band-text {
    display: inline-block;
    max-width: 100%;
    text-align: center;
}

.ky-presented-band-text span {
    font-family: var(--ky-inline);
}

.ky-presented-band-text strong {
    font-family: var(--ky-display);
    font-weight: 400;
}

@media (min-width: 901px) {
    .ky-event-body {
        position: relative;
        width: 100%;
        max-width: none;
        padding-right: var(--page-padding);
        padding-left: 0;
    }

    .ky-event-body > .ky-symbol-rail {
        position: absolute;
        top: calc(clamp(1.8rem, 2.95vw, 3.2rem) * -1);
        bottom: calc(clamp(1.25rem, 2vw, 2rem) * -1);
        left: 0;
        width: var(--ky-rail-cell);
        margin: 0;
        transform: none;
    }

    .ky-main .ky-section-band,
    .ky-main .ky-presented-band {
        min-height: clamp(4.5rem, 6.9vw, 7.5rem);
    }

    .ky-main .ky-section-band--inline {
        min-height: clamp(4rem, 5.75vw, 6.25rem);
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    .ky-event-body {
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: 0 1rem;
        padding-right: clamp(0.9rem, 2vw, 1.5rem);
    }

    .ky-event-body > .ky-symbol-rail {
        left: 0;
    }

    .ky-event-info,
    .ky-ticket-offer {
        grid-template-columns: minmax(0, 1fr) clamp(12.5rem, 22vw, 15rem);
        column-gap: clamp(0.85rem, 1.8vw, 1.35rem);
    }

    .ky-event-heading h2 {
        font-size: clamp(2.55rem, 4.35vw, 3.3rem);
        white-space: nowrap;
    }

    .ky-event-heading p {
        font-size: clamp(1.05rem, 1.85vw, 1.4rem);
        white-space: nowrap;
    }

    .ky-event-facts {
        gap: 0.7rem;
        font-size: clamp(0.9rem, 1.35vw, 1.05rem);
    }

    .ky-event-facts p {
        grid-template-columns: 2.7rem minmax(0, 1fr);
        gap: 0.45rem;
    }

    .ky-ticket-offer h2,
    .ky-price-row strong,
    .ky-price-row s {
        font-size: clamp(2.25rem, 3.1vw, 2.85rem);
        white-space: nowrap;
    }
}

@media (max-width: 900px) {
    .ky-yeu-page main {
        padding-top: var(--navbar-height-mobile);
    }

    .ky-page-section {
        min-height: 0;
    }

    .ky-main .ky-hero-inner,
    .ky-main .ky-album-content {
        min-height: calc(100vh - var(--navbar-height-mobile));
        min-height: calc(100svh - var(--navbar-height-mobile));
    }

    .ky-hero-title-block h1 {
        font-size: clamp(4.2rem, 9.2vw, 6.25rem);
    }

    .ky-hero-title-block {
        right: calc(var(--ky-hero-gutter) + clamp(8.5rem, 17vw, 10rem));
    }

    .ky-hero-title-block p {
        font-size: clamp(1.5rem, 3.55vw, 2.5rem);
    }
}

@media (min-width: 621px) and (max-width: 900px) {
    .ky-yeu-page {
        --ky-hero-symbol-large: clamp(10rem, 20vw, 12rem);
        --ky-hero-symbol-small: clamp(7.5rem, 15vw, 9rem);
    }

    .ky-hero .ky-label {
        font-size: clamp(2.8rem, 4.5vw, 3.6rem);
    }

    .ky-symbol {
        font-size: clamp(2.75rem, 6.6vw, 3.6rem);
    }

    .ky-hero-title-block h1 {
        font-size: clamp(4.8rem, 10vw, 6.5rem);
    }

    .ky-hero-title-block p {
        font-size: clamp(1.65rem, 3.9vw, 2.7rem);
    }

    .ky-hero-tags {
        right: calc(clamp(9rem, 18vw, 11rem) + 0.75rem);
        gap: 0.28em;
        font-size: clamp(2.75rem, 4.8vw, 3.55rem);
    }

    .ky-event-body {
        position: relative;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: 0 0.8rem;
        padding: clamp(1.1rem, 2.6vw, 1.5rem) 1rem clamp(1rem, 2vw, 1.25rem) 0;
    }

    .ky-event-info {
        grid-column: 2;
        grid-row: auto;
        grid-template-columns: minmax(0, 1fr) clamp(10.5rem, 25vw, 13.5rem);
        grid-template-rows: auto auto;
        gap: 1rem;
    }

    .ky-event-heading {
        grid-column: 1;
        grid-row: auto;
        padding-bottom: 1rem;
        border-bottom: 2px solid var(--ky-red);
    }

    .ky-event-heading h2,
    .ky-event-heading p,
    .ky-event-heading h2 span {
        display: inline;
        width: auto;
    }

    .ky-event-heading h2 {
        font-size: clamp(2.15rem, 4.35vw, 2.75rem);
        line-height: 0.82;
        white-space: nowrap;
    }

    .ky-event-heading p {
        margin-left: 0.3rem;
        font-family: var(--ky-display);
        font-size: clamp(0.95rem, 1.85vw, 1.2rem);
        line-height: 0.9;
        white-space: nowrap;
    }

    .ky-map {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
        aspect-ratio: 334 / 435;
        margin-top: 0;
    }

    .ky-event-facts {
        grid-column: 1;
        grid-row: auto;
        gap: 0.65rem;
        margin-top: 0;
        padding: 0.25rem 0 1rem;
        border-bottom: 2px solid var(--ky-red);
        font-size: clamp(0.9rem, 1.55vw, 1.05rem);
        line-height: 1.3;
    }

    .ky-event-facts p {
        grid-template-columns: 2.6rem minmax(0, 1fr);
        gap: 0.45rem;
    }

    .ky-event-body > .ky-symbol-rail {
        position: absolute;
        top: calc(clamp(1.1rem, 2.6vw, 1.5rem) * -1);
        right: auto;
        bottom: calc(clamp(1rem, 2vw, 1.25rem) * -1);
        left: 0;
        display: flex;
        flex-direction: column;
        width: var(--ky-rail-cell);
        margin: 0;
        font-size: clamp(1rem, 2.25vw, 1.3rem);
    }

    .ky-symbol-rail span {
        order: initial;
    }

    .ky-ticket-offer {
        grid-column: 2;
        grid-row: auto;
        grid-template-columns: minmax(0, 1fr) clamp(10.5rem, 25vw, 13.5rem);
        grid-template-rows: auto auto auto auto;
        gap: 0.6rem 1rem;
        padding-top: 1.25rem;
    }

    .ky-ticket-offer h2 {
        grid-column: 2;
        grid-row: auto;
        justify-self: stretch;
        font-size: clamp(2rem, 3.45vw, 2.5rem);
        text-align: center;
        white-space: nowrap;
    }

    .ky-ticket-image {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    .ky-ticket-intro,
    .ky-ticket-offer .ky-price-row,
    .ky-ticket-offer .ky-button,
    .ky-ticket-note {
        grid-column: 2;
        grid-row: auto;
    }

    .ky-ticket-intro {
        font-size: clamp(0.75rem, 1.25vw, 0.84rem);
    }

    .ky-ticket-offer .ky-price-row {
        justify-content: center;
    }

    .ky-price-row strong,
    .ky-price-row s {
        font-size: clamp(2rem, 3.35vw, 2.45rem);
    }

    .ky-ticket-offer .ky-button {
        min-width: 0;
        font-size: clamp(2rem, 3.35vw, 2.45rem);
    }

    .ky-ticket-note {
        width: 100%;
        margin-top: 0;
        font-size: clamp(0.7rem, 1.05vw, 0.78rem);
    }
}

/* At narrow tablet widths the two symbol systems share the hero's upper half.
 * Scale both down before their fixed edge positions can intersect. */
@media (min-width: 621px) and (max-width: 760px) {
    .ky-yeu-page {
        --ky-hero-symbol-large: clamp(8.25rem, 18vw, 10rem);
        --ky-hero-symbol-small: clamp(5.25rem, 13vw, 6.25rem);
    }

    .ky-symbol {
        font-size: clamp(2.25rem, 5.4vw, 3rem);
    }
}

/* A shallow desktop viewport leaves less vertical room between the left
 * symbols and headline, so reduce the full symbol system before it collides. */
@media (min-width: 621px) and (max-height: 650px) {
    .ky-yeu-page {
        --ky-hero-symbol-large: clamp(7rem, 10vw, 9rem);
        --ky-hero-symbol-small: clamp(5.25rem, 7.5vw, 6.75rem);
    }
}

/* Preserve a deliberate gap above the headline on compact desktop/tablet
 * heights by lifting the label and the two left hero cells together. */
@media (min-width: 621px) and (max-height: 750px) {
    .ky-hero .ky-label {
        top: 3.5%;
    }

    .ky-symbol--chevrons,
    .ky-symbol--braces {
        top: 8%;
    }
}

@media (max-width: 620px) {
    .ky-yeu-page {
        --page-padding: 0.75rem;
    }

    .ky-section-band,
    .ky-presented-band,
    .ky-order-callout {
        min-height: 3.15rem;
        font-size: clamp(1.9rem, 8vw, 2.7rem);
    }

    .ky-hero {
        overflow: hidden;
    }

    .ky-hero-inner {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 0;
        padding-top: clamp(1.5rem, 6.5vw, 1.8rem);
        padding-right: var(--page-padding);
        padding-bottom: 3rem;
        padding-left: var(--page-padding);
    }

    .ky-hero-tags {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 0;
        order: 1;
        font-size: clamp(1.75rem, 10.5vw, 3.1rem);
        line-height: 0.95;
    }

    .ky-hero .ky-label {
        position: static;
        order: 2;
        margin-top: clamp(3.3rem, 12.5vw, 3.5rem);
        font-size: clamp(3rem, 14.5vw, 4.5rem);
    }

    .ky-hero-symbols {
        position: static;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        order: 3;
        margin-top: clamp(2.1rem, 8.2vw, 2.25rem);
    }

    .ky-symbol {
        position: static;
        width: auto;
        min-width: 0;
        aspect-ratio: 1;
        justify-self: stretch;
        align-self: stretch;
        font-size: clamp(1.5rem, 9vw, 2.5rem);
    }

    .ky-symbol--plus,
    .ky-symbol--code {
        font-size: clamp(1.5rem, 8.2vw, 2.3rem);
    }

    .ky-symbol--chevrons {
        grid-column: 1;
        grid-row: 1;
    }

    .ky-symbol--braces {
        grid-column: 1;
        grid-row: 2;
    }

    .ky-symbol--wink {
        grid-column: 2;
        grid-row: 1;
    }

    .ky-symbol--plus {
        grid-column: 3;
        grid-row: 1;
    }

    .ky-symbol--one {
        grid-column: 4;
        grid-row: 1;
    }

    .ky-symbol--caret {
        grid-column: 2;
        grid-row: 2;
    }

    .ky-symbol--star {
        grid-column: 3;
        grid-row: 2;
    }

    .ky-symbol--code {
        grid-column: 4;
        grid-row: 2;
    }

    .ky-hero-title-block {
        --ky-hero-title-size: clamp(4.2rem, 22vw, 6rem);
        position: static;
        order: 4;
        margin-top: clamp(1.05rem, 4.2vw, 1.2rem);
        color: var(--ky-red);
    }

    .ky-hero-title-block h1 {
        max-width: 100%;
        font-size: var(--ky-hero-title-size);
        line-height: 1;
        white-space: normal;
    }

    .ky-hero-title-block h1 span,
    .ky-event-heading h2 span {
        display: block;
        width: fit-content;
    }

    .ky-hero-title-block h1 span {
        white-space: nowrap;
    }

    .ky-hero-title-block {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .ky-hero-title-block p {
        max-width: 100%;
        font-size: clamp(1.75rem, 7.28vw, 2rem);
        line-height: 1.2;
    }

    .ky-hero-inner > .ky-presented {
        display: none;
    }

    .ky-hero-title-block .ky-presented--mobile {
        display: flex;
        position: absolute;
        top: calc(var(--ky-hero-title-size) - 4rem);
        right: 0;
        bottom: auto;
        z-index: 1;
        flex-direction: column;
        width: max-content;
        margin: 0;
        font-size: clamp(1rem, 5.45vw, 1.5rem);
        text-align: center;
        writing-mode: horizontal-tb;
    }

    .ky-presented span,
    .ky-presented strong {
        display: grid;
        height: 2rem;
        place-items: center;
        padding: 0 0.25em;
    }

    .ky-presented b {
        font-weight: 400;
    }

    .ky-event-body {
        grid-template-columns: 1fr;
        gap: 0;
        padding: clamp(0.9rem, 3.4vw, 1rem) var(--page-padding) 2rem;
    }

    .ky-event-info {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ky-event-heading {
        grid-column: 1;
        grid-row: 1;
        padding-bottom: 0;
        border: 0;
    }

    .ky-event-heading h2,
    .ky-event-heading p {
        display: block;
    }

    .ky-event-heading h2 {
        max-width: 100%;
        font-size: clamp(4.2rem, 22vw, 6rem);
        line-height: 1;
    }

    .ky-event-heading h2 span {
        white-space: nowrap;
    }

    .ky-event-heading p {
        max-width: 100%;
        margin: 0;
        font-family: var(--ky-inline);
        font-size: clamp(1.7rem, 7.28vw, 2rem);
        line-height: 1.2;
    }

    .ky-map {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-height: 0;
        aspect-ratio: 414 / 260;
        margin-top: clamp(1rem, 4.8vw, 1.4rem);
    }

    .ky-event-facts {
        grid-column: 1;
        grid-row: 3;
        gap: clamp(0.95rem, 5vw, 1.45rem);
        margin-top: clamp(1rem, 4.8vw, 1.3rem);
        padding: 0;
        border-bottom-width: 1px;
        font-size: clamp(0.72rem, 3.6vw, 1rem);
        line-height: 1.4;
    }

    .ky-event-facts p {
        grid-template-columns: 2.8rem minmax(0, 1fr);
        gap: 0.35rem;
    }

    .ky-event-facts strong {
        text-align: justify;
        text-align-last: left;
        text-justify: inter-word;
    }

    .ky-event-facts {
        border-bottom: 0;
    }

    .ky-symbol-rail {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns:
            repeat(3, var(--ky-mobile-rail-cell)) minmax(0, 1fr)
            repeat(3, var(--ky-mobile-rail-cell));
        grid-template-rows: var(--ky-mobile-rail-cell);
        margin-inline: calc(var(--page-padding) * -1);
        margin-top: clamp(1.35rem, 5vw, 1.45rem);
        margin-bottom: 0;
        font-size: clamp(1.1rem, 9vw, 2.5rem);
    }

    .ky-symbol-rail span,
    .ky-symbol-rail span:nth-child(4) {
        min-width: 0;
        min-height: 0;
        height: var(--ky-mobile-rail-cell);
        aspect-ratio: auto;
        order: initial;
    }

    .ky-ticket-offer {
        grid-column: 1;
        grid-row: 3;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto auto;
        gap: 0.55rem 0.5rem;
        padding-top: clamp(1rem, 4.8vw, 1.4rem);
    }

    .ky-ticket-offer h2 {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: start;
        font-size: clamp(4rem, 14.55vw, 4rem);
        text-align: left;
    }

    .ky-ticket-image {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ky-ticket-intro {
        grid-column: 1 / -1;
        grid-row: 3;
        font-size: clamp(0.78rem, 3.45vw, 1rem);
        line-height: 1.34;
        text-align-last: left;
    }

    .ky-ticket-offer .ky-price-row {
        grid-column: auto;
        grid-row: auto;
        justify-content: center;
    }

    .ky-price-row strong,
    .ky-price-row s {
        font-size: clamp(2.55rem, 11vw, 3.2rem);
    }

    .ky-price-row > span {
        font-size: clamp(0.7rem, 2.8vw, 0.85rem);
    }

    .ky-ticket-offer .ky-button {
        grid-column: auto;
        grid-row: auto;
        align-self: center;
        width: clamp(4.8rem, 27vw, 6.25rem);
        min-width: 4.8rem;
        font-size: clamp(2.25rem, 9.5vw, 2.8rem);
    }

    .ky-ticket-note {
        width: 100%;
        grid-column: 1 / -1;
        grid-row: 5;
        margin-top: 0.8rem;
        font-size: clamp(0.75rem, 3.1vw, 0.875rem);
        line-height: 1.3;
        text-align: justify;
        text-align-last: left;
    }

    .ky-ticket-actions {
        grid-column: 1 / -1;
        grid-row: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(0.35rem, 2vw, 0.6rem);
        min-width: 0;
    }

    .ky-ticket-actions .ky-price-row strong,
    .ky-ticket-actions .ky-price-row s {
        font-size: clamp(2.25rem, 10vw, 3rem);
    }

    .ky-album-meta {
        padding-top: 1.2rem;
        font-size: clamp(0.76rem, 3.5vw, 0.95rem);
    }

    .ky-album-title-wrap h2 {
        max-width: 7ch;
        font-size: clamp(5.6rem, 25vw, 7.6rem);
        line-height: 0.78;
    }

    .ky-album-title-wrap p {
        margin-top: 0.5rem;
        font-size: clamp(0.85rem, 4vw, 1.15rem);
    }

    .ky-album-location {
        bottom: 1.6rem;
        font-size: clamp(0.68rem, 3vw, 0.82rem);
    }

    .ky-terms-inner {
        padding-top: 1.5rem;
        padding-bottom: 1.8rem;
    }

    .ky-terms-heading {
        padding-right: calc(2 * clamp(1.9rem, 7.25vw, 2.2rem) + 0.5rem);
    }

    .ky-terms-heading h2 {
        max-width: none;
        font-size: clamp(2.75rem, 12vw, 3.35rem);
        line-height: 0.9;
        white-space: nowrap;
    }

    .ky-terms-heading p {
        margin-top: clamp(1.35rem, 5vw, 1.55rem);
        margin-right: calc(-2 * clamp(1.9rem, 7.25vw, 2.2rem) - 0.5rem);
        font-size: clamp(0.78rem, 3.18vw, 0.95rem);
        line-height: 1;
        white-space: nowrap;
    }

    .ky-terms-symbols {
        grid-template-columns: repeat(2, clamp(1.9rem, 7.25vw, 2.2rem));
    }

    .ky-terms-symbols span {
        font-size: clamp(1.18rem, 5.1vw, 1.45rem);
    }

    .ky-terms-symbols span:nth-child(3) {
        order: 1;
    }

    .ky-terms-symbols span:nth-child(6) {
        order: 2;
    }

    .ky-terms-symbols span:nth-child(2) {
        order: 3;
    }

    .ky-terms-symbols span:nth-child(5) {
        order: 4;
    }

    .ky-terms-symbols span:nth-child(1) {
        order: 5;
    }

    .ky-terms-symbols span:nth-child(4) {
        order: 6;
    }

    .ky-terms-version {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.3rem;
        justify-content: end;
        justify-items: end;
        margin-top: 1.75rem;
        font-size: clamp(0.76rem, 3.35vw, 0.95rem);
        text-align: right;
    }

    .ky-terms-list {
        padding-right: 0.35rem;
        padding-left: 1.45rem;
        font-size: clamp(0.74rem, 3vw, 0.88rem);
        line-height: 1.28;
    }

    .ky-terms-list li {
        margin-bottom: 0.3rem;
        text-align: justify;
    }
}

@media (max-width: 390px) {
    .ky-hero-title-block h1,
    .ky-event-heading h2 {
        font-size: clamp(4.2rem, 22vw, 5.4rem);
    }

    .ky-hero-title-block {
        --ky-hero-title-size: clamp(4.2rem, 22vw, 5.4rem);
    }

    .ky-price-row strong,
    .ky-price-row s {
        font-size: clamp(2.35rem, 10.8vw, 2.75rem);
    }

    .ky-ticket-offer .ky-button {
        min-width: 4.5rem;
    }
}