/*
 * InkArtists artist location lists: the city's artists on the shop wall.
 * Served as-is (no build step); every rule is scoped under .al.
 * One shop with the guest home, the studio lists and the convention pages:
 * the same ink front window and paper, the same headline, numbers, cards,
 * place index and aftercare cards. Here the window shows the first artists'
 * work pinned up like flash, and each artist is a card with their work.
 * Brand: ink #1C1712, paper #F7F3EC, ember #D65A31, stencil #4B3FB5.
 * Headlines: Fraunces (soft, normal width, -0.01em); the rest Satoshi.
 */

.al {
    --ink: #1C1712;
    --ink-2: #231C16;
    --ink-3: #2E251E;
    --paper: #F7F3EC;
    --paper-2: #EFE6D8;
    --paper-3: #E6DCCB;
    --card: #FFFCF4;
    --line: #E6DFD3;
    --soft: #6B5F53;
    --ember: #D65A31;
    --ember-ui: #C24E26;
    --ember-deep: #A83E1E;
    --ember-glow: #FF9B72;
    --ember-tint: #FFE4D9;
    --stencil: #4B3FB5;
    --flash: #F2E9DA;
    --on-ink-soft: #CDBFAE;
    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: Satoshi, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    --pad: clamp(56px, 7vw, 100px);
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    overflow-x: clip;
}

/* Resets in a cascade layer declared before Tailwind's, so they rank below
   every Tailwind utility (the shared waitlist card keeps its own look). */
@layer al-reset {
    :where(.al) *, :where(.al) *::before, :where(.al) *::after { box-sizing: border-box; }
    :where(.al) :where(img) { display: block; max-width: 100%; }
    :where(.al) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
    :where(.al) :where(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
    :where(.al) :where(a) { color: inherit; text-decoration: none; }
    :where(.al) :where(button, input) { font: inherit; color: inherit; }
}
/* The page's scripts show and hide with Tailwind's .hidden; these rules are
   unlayered, so they would win over it without this. */
.al .hidden { display: none !important; }
.al [id] { scroll-margin-top: 96px; }
.al :focus-visible { outline: 3px solid var(--ember-glow); outline-offset: 3px; }
.al-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.al-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
@media (min-width: 640px) { .al-wrap { width: min(1180px, 100% - 64px); } }

.al-display { font-family: var(--display); font-weight: 640; letter-spacing: -0.01em; line-height: 1.05; text-wrap: balance; overflow-wrap: break-word; }
.al-h2 { font-size: clamp(1.8rem, 1.2rem + 2.3vw, 2.9rem); }
.al-kicker { font: 800 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ember-deep); }
.al-kicker--gold { color: var(--ember-glow); }
.al-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(26px, 3.6vw, 40px); }
.al-head > div { display: grid; gap: 10px; max-width: 760px; }
.al-head__count { color: var(--soft); font-size: 15px; font-weight: 700; }

.al:lang(ja) .al-display, .al:lang(ja) .al-title, .al:lang(ja) .al-card__name, .al:lang(ja) .al-back__q {
    font-family: "Fraunces", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    font-weight: 700; letter-spacing: 0; word-break: auto-phrase;
}
.al:lang(ko) .al-display, .al:lang(ko) .al-title, .al:lang(ko) .al-card__name, .al:lang(ko) .al-back__q {
    font-family: "Fraunces", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 700; letter-spacing: 0;
}
.al:lang(ko) { word-break: keep-all; }
/* Japanese and Korean set the headline tighter, with no spaces around the place,
   and may break inside a long phrase rather than run under the cards. */
.al:lang(ja) .al-title, .al:lang(ko) .al-title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.3rem); line-height: 1.18; }
.al:lang(ja) .al-title { word-break: normal; line-break: strict; }
.al:lang(ja) .al-title > span, .al:lang(ko) .al-title > span { margin: 0; }
.al:lang(ja) .al-place, .al:lang(ko) .al-place { margin-right: .1em; }

.al-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .75rem 1.35rem;
    border: 1.5px solid transparent; border-radius: 999px; font: 800 15px/1.2 var(--sans); text-align: center; cursor: pointer;
    transition: transform .2s, background-color .2s, color .2s, border-color .2s;
}
.al-btn:hover { transform: translateY(-2px); }
.al-btn--ember { background: var(--ember-ui); color: #fff; box-shadow: 0 14px 30px -14px rgba(214, 90, 49, .9); }
.al-btn--ember:hover { background: var(--ember-deep); }
.al-btn--ink { background: var(--ink); color: var(--paper); }
.al-btn--ink:hover { background: #000; }
.al-btn--line { background: transparent; color: var(--ink); border-color: rgba(28, 23, 18, .25); }
.al-btn--line:hover { border-color: var(--ink); }

.sp-js .al [data-sp-reveal] {
    opacity: 0; translate: 0 22px;
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), translate .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.sp-js .al [data-sp-reveal].is-in { opacity: 1; translate: none; }

/* ═══════════════════════════ THE FRONT WINDOW ═══════════════════════════ */
/* The same ink window as the studio lists and the convention calendar. */
.al-table {
    position: relative; color: var(--paper); padding: 18px 0 clamp(48px, 6vw, 84px);
    background: radial-gradient(900px 520px at 85% 0%, rgba(214, 90, 49, .16), transparent 62%), var(--ink);
}
.al-table > .al-wrap { position: relative; z-index: 1; }
.al-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12.5px; font-weight: 600; color: rgba(247, 243, 236, .7); }
.al-crumbs li:not(:last-child)::after { content: "›"; margin: 0 8px; color: rgba(247, 243, 236, .4); }
.al-crumbs a:hover { color: var(--paper); }
.al-crumbs [aria-current] { color: rgba(247, 243, 236, .92); }

.al-table__grid { display: grid; gap: clamp(26px, 4vw, 46px); align-items: center; margin-top: clamp(20px, 3vw, 34px); }
@media (min-width: 980px) { .al-table__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.al-table__deal { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.al-title { font: 640 clamp(2.4rem, 1.35rem + 4vw, 4.6rem)/1.04 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.al-title > span { margin-right: .22em; }
.al-title > span:last-child { margin-right: 0; margin-left: .22em; }
.al-title > span:first-child { margin-left: 0; }
.al-place {
    display: inline-flex; align-items: baseline; gap: .22em; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--ember-glow); font: inherit; letter-spacing: inherit; text-align: left; transition: color .2s;
}
.al-place span { text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: .08em; text-underline-offset: .14em; }
.al-place i { font-size: .32em; translate: 0 -.35em; }
.al-place:hover { color: #fff; }
.al-editions { display: flex; flex-wrap: wrap; gap: 8px; }
.al-editions a {
    padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(247, 243, 236, .32); color: rgba(247, 243, 236, .88);
    font-size: 13.5px; font-weight: 800; transition: background-color .2s, color .2s;
}
.al-editions a:hover { border-color: var(--paper); color: var(--paper); }
.al-editions a[aria-current] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.al-table__lede { max-width: 560px; font-size: clamp(15.5px, .95rem + .2vw, 17.5px); line-height: 1.6; color: rgba(247, 243, 236, .84); }

.al-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.al-chips > div {
    display: flex; flex-direction: column-reverse; gap: 2px; min-width: 112px; padding: 11px 16px 12px; border-radius: 14px;
    background: rgba(247, 243, 236, .06); border: 1px solid rgba(247, 243, 236, .14);
}
.al-chips dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-soft); }
.al-chip { font: 650 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.05 var(--display); color: var(--paper); font-variant-numeric: lining-nums tabular-nums; }

.al-hand { position: relative; height: clamp(280px, 32vw, 410px); }
.al-hand__card {
    position: absolute; left: 50%; top: 50%; width: clamp(150px, 15.5vw, 214px); margin: 0;
    padding: 9px 9px 42px; border-radius: 3px; background: var(--flash);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 30px 44px -22px rgba(0, 0, 0, .85);
    transform-origin: 50% 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.al-hand__card::before {
    /* the pin */
    content: ""; position: absolute; top: -8px; left: 50%; z-index: 2; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #FFB08F, var(--ember) 46%, var(--ember-deep)); box-shadow: 0 4px 6px rgba(0, 0, 0, .5);
}
.al-hand__card img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.al-hand__card b {
    position: absolute; left: 10px; right: 10px; bottom: 12px; text-align: center;
    color: var(--ink); font: 640 15px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-hand__card--0 { transform: translate(-50%, -50%) translateX(-62%) rotate(-7deg); }
.al-hand__card--1 { transform: translate(-50%, -50%) translateY(-4%) rotate(1.5deg); z-index: 1; }
.al-hand__card--2 { transform: translate(-50%, -50%) translateX(62%) rotate(6deg); }
.al-hand:hover .al-hand__card--0 { transform: translate(-50%, -50%) translateX(-69%) rotate(-9deg); }
.al-hand:hover .al-hand__card--2 { transform: translate(-50%, -50%) translateX(69%) rotate(8deg); }
/* No one listed yet: blank flash paper with the stencil's purple outline. */
.al-hand.is-backs .al-hand__card { aspect-ratio: 3 / 4.6; box-shadow: inset 0 0 0 9px var(--flash), inset 0 0 0 11px rgba(75, 63, 181, .45), 0 30px 44px -22px rgba(0, 0, 0, .85); }
.al-hand.is-backs .al-hand__card::after {
    content: "ink"; position: absolute; inset: 0 0 30px; display: grid; place-items: center;
    font: 640 2rem/1 var(--display); color: var(--stencil); letter-spacing: .02em;
}
@media (max-width: 639px) { .al-hand { height: 236px; } .al-hand__card { width: 124px; padding: 7px 7px 32px; } .al-hand__card b { font-size: 12px; bottom: 9px; } }

.al-notice { margin-top: 22px; padding: 12px 16px; border-radius: 12px; background: rgba(247, 243, 236, .06); border: 1px solid rgba(247, 243, 236, .18); color: var(--paper); font-size: 14.5px; }
.al-find {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(24px, 3.2vw, 36px);
    padding: 8px; border-radius: 999px; background: rgba(247, 243, 236, .07); border: 1px solid rgba(247, 243, 236, .16);
}
.al-find__field { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.al-find__field i { position: absolute; left: 16px; color: rgba(247, 243, 236, .6); pointer-events: none; }
.al-find__field input { width: 100%; min-height: 48px; padding: 10px 14px 10px 44px; border: 0; border-radius: 999px; background: transparent; color: var(--paper); font-size: 16px; outline: none; }
.al-find__field input::placeholder { color: rgba(247, 243, 236, .62); }
.al-find__field:focus-within { box-shadow: 0 0 0 3px rgba(255, 155, 114, .55); border-radius: 999px; }
.al-find__clear { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--paper); border: 1.5px solid rgba(247, 243, 236, .35); }
.al-find__clear:hover { color: #fff; border-color: #fff; }
@media (max-width: 560px) { .al-find { border-radius: 24px; } .al-find .al-btn { flex: 1 1 auto; } }

/* ═══════════════════════════ THE PICKER ═══════════════════════════ */
.al-picker {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px 14px;
    background: rgba(16, 19, 24, .55); backdrop-filter: blur(4px);
}
.al-picker__card {
    width: min(640px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; display: grid; gap: 20px;
    padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: var(--paper); color: var(--ink);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.al-picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.al-picker__head > div { display: grid; gap: 6px; }
.al-picker__title { font: 650 1.35rem/1.2 var(--display); }
.al-picker__close { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; }
.al-picker__close:hover { border-color: var(--ink); }
.al-picker__field { display: grid; gap: 8px; }
.al-picker__field label, .al-picker__label { font: 800 11.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.al-picker__input { position: relative; }
.al-picker__input input { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); font-size: 16px; }
.al-picker__input input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28, 23, 18, .12); }
.al-picker__suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2; display: grid; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -20px rgba(28, 23, 18, .5); }
.al-picker__option { padding: 10px 12px; border: 0; border-radius: 9px; background: none; text-align: left; font-weight: 700; font-size: 15px; cursor: pointer; }
.al-picker__option:hover, .al-picker__option:focus-visible { background: var(--paper-2); }
.al-picker__here { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.al-picker__here a { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ember-deep); }
.al-picker__here a:hover { color: var(--ink); }
.al-picker__here span { color: var(--soft); font-size: 13px; }
.al-picker__group { display: grid; gap: 10px; }
.al-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-picker__chips button { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-weight: 700; font-size: 14px; cursor: pointer; }
.al-picker__chips button:hover { border-color: var(--ink); }
.al-picker__none { color: var(--soft); font-size: 14px; }
.al-picker__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ═══════════════════════════ THE PLACE INDEX ═══════════════════════════ */
.al-checklist { padding: clamp(40px, 5vw, 64px) 0 0; }
.al-checklist__card {
    padding: clamp(20px, 3vw, 34px); border-radius: 6px; rotate: .25deg;
    background:
        linear-gradient(var(--ember), var(--ember)) top 12px left 12px / calc(100% - 24px) 2px no-repeat,
        #FFF9EC;
    box-shadow: 0 1px 0 #fff inset, 0 26px 44px -30px rgba(28, 23, 18, .55), 0 2px 6px rgba(28, 23, 18, .07);
}
.al-checklist__head { display: grid; gap: 8px; margin-bottom: 20px; padding-top: 6px; }
.al-checklist__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); }
.al-checklist__rows { counter-reset: al-row; }
.al-checklist__rows.is-long { columns: 1; column-gap: 34px; }
@media (min-width: 680px) { .al-checklist__rows.is-long { columns: 2; } }
@media (min-width: 1020px) { .al-checklist__rows.is-long { columns: 3; } }
.al-checklist__rows li { break-inside: avoid; counter-increment: al-row; }
.al-checklist__rows a { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 15px; }
.al-checklist__rows a::before { content: counter(al-row, decimal-leading-zero); font: 700 11px/1 var(--mono); color: var(--soft); min-width: 2.2em; }
.al-checklist__box { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); transition: transform .2s; }
.al-checklist__rows a:hover .al-checklist__box { transform: scale(1.35); background: var(--ember-deep); }
.al-checklist__name { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-checklist__dots { flex: 1; min-width: 14px; border-bottom: 2px dotted rgba(28, 23, 18, .3); translate: 0 4px; }
.al-checklist__count { font: 700 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ember-deep); }
.al-checklist__rows a:hover .al-checklist__name { color: var(--ember-deep); }
.al-checklist__more {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 42px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
    background: transparent; border: 1.5px solid rgba(28, 23, 18, .3); font: 800 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.al-checklist__more:hover { border-color: var(--ink); }
.al-checklist__more i { transition: transform .2s; }

/* ═══════════════════════════ THE DECK ═══════════════════════════ */
.al-deck { padding: var(--pad) 0; }
.al-deck--nearby { padding-top: 0; }
.al-deck__grid { display: grid; gap: clamp(20px, 2.4vw, 28px); }
@media (min-width: 640px) { .al-deck__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .al-deck__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.al-deck__empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 16px; padding: clamp(28px, 5vw, 56px) 16px; text-align: center; color: var(--soft); font-size: 16px; }
.al-deck__empty-card {
    width: 92px; aspect-ratio: 3 / 4; border-radius: 3px; rotate: -4deg; background: var(--flash);
    box-shadow: inset 0 0 0 7px var(--flash), inset 0 0 0 9px rgba(75, 63, 181, .45), 0 18px 30px -18px rgba(28, 23, 18, .6);
}
.al-deck__status { display: flex; justify-content: center; margin-top: 30px; color: var(--soft); font-size: 14.5px; font-weight: 700; }
.al-deck__loading { display: inline-flex; align-items: center; gap: 12px; }
.al-deck__shuffle { display: inline-flex; align-items: center; gap: 5px; height: 20px; }
.al-deck__shuffle i { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); animation: al-drop 1s infinite ease-in-out; }
.al-deck__shuffle i:nth-child(2) { animation-delay: .15s; background: var(--ink); }
.al-deck__shuffle i:nth-child(3) { animation-delay: .3s; background: var(--stencil); }
@keyframes al-drop { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-6px); opacity: 1; } }
.al-deck__sentinel { height: 40px; }
.al-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; color: var(--soft); font-weight: 700; }

/* An artist's card: the shared card of the studio lists, the same for every artist. */
.al-card {
    position: relative; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
    box-shadow: 0 2px 0 rgba(28, 23, 18, .04), 0 26px 40px -30px rgba(28, 23, 18, .45);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.al-card:hover { transform: translateY(-4px); box-shadow: 0 2px 0 rgba(28, 23, 18, .04), 0 34px 50px -30px rgba(28, 23, 18, .5); }
.al-card__face { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px 14px 12px; }
.al-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.al-card__name { min-width: 0; font: 650 1.22rem/1.15 var(--display); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.al-card__name a:hover { color: var(--ember-deep); }
.al-card__score { flex: none; display: inline-flex; align-items: baseline; gap: 4px; font-size: 13px; color: var(--soft); }
.al-card__score i { color: var(--ember-ui); font-size: 12px; }
.al-card__score b { color: var(--ink); font-size: 15px; }
.al-card__window { position: relative; overflow: hidden; border-radius: 12px; background: var(--paper-2); }
.al-card__track { display: flex; overflow-x: auto; scroll-behavior: smooth; }
.al-card__track .artist-gallery-item { display: block; overflow: hidden; background: var(--paper-3); }
.al-card__track .artist-gallery-item.is-inert { pointer-events: none; }
.al-card__track img { width: 100%; height: 100%; object-fit: cover; }
.al-card__blank { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, var(--paper-2) 0 8px, var(--paper-3) 8px 16px); }
.al-card .artist-gallery-hint { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.al-card .artist-gallery-hint-left { left: 0; }
.al-card .artist-gallery-hint-right { right: 0; }
.al-card .artist-gallery-hint span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .75); color: var(--ink); font-size: 11px; }
.al-card .artist-gallery-hint.is-visible { opacity: .85; }
.al-card__avatar {
    position: absolute; left: 8px; bottom: 8px; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden;
    border-radius: 50%; border: 3px solid var(--card); background: var(--paper-2); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6);
    font: 700 1.1rem/1 var(--display); color: var(--ink);
}
.al-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.al-card__avatar.is-inert { pointer-events: none; }
.al-card__flag {
    position: absolute; top: 8px; right: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px;
    background: #E7F6EE; color: #1F6B47; font: 800 11.5px/1 var(--sans); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5);
}
.al-card__type {
    padding: 6px 10px; border-radius: 6px; background: var(--ember-tint); color: var(--ember-deep);
    font: 800 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al:lang(ja) .al-card__type, .al:lang(ko) .al-card__type, .al:lang(ru) .al-card__type { letter-spacing: .02em; }
.al-card__text { display: grid; gap: 8px; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: #FFFEFA; }
.al-card__styles { display: flex; flex-wrap: wrap; gap: 6px; }
.al-card__styles li { padding: 4px 9px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 12.5px; font-weight: 800; color: var(--ink); }
.al-card__where { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--soft); }
.al-card__where i { flex: none; margin-top: 3px; color: var(--ember-deep); font-size: 12px; }
.al-card__where span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-card__price { font: 700 1rem/1.2 var(--display); color: var(--ember-deep); }
.al-card__foot { margin-top: auto; }
.al-card__actions { display: flex; align-items: center; gap: 8px; }
.al-card__cta {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; min-width: 0;
    border: 0; border-radius: 12px; background: var(--ember-ui); color: #fff; font: 800 14.5px/1.2 var(--sans); text-align: center; cursor: pointer;
    transition: background-color .2s;
}
.al-card__cta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-card__cta:hover { background: var(--ember-deep); }
/* cta-actions appends Tailwind's bg-gray-900 for "Not available": restyle that state here. */
.al-card__cta.bg-gray-900 { background: var(--paper-2); color: var(--soft); box-shadow: inset 0 0 0 1.5px var(--line); }
.al-card__cta.bg-gray-900:hover { background: var(--paper-3); }
.al-card__keep {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
    border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 16px; cursor: pointer;
}
.al-card__keep:hover { border-color: var(--ink); }
.al-card__keep[aria-pressed="true"] { color: var(--ember-ui); border-color: var(--ember-ui); }
.al-card__no { align-self: flex-end; margin-top: -2px; font: 800 10.5px/1 var(--sans); color: var(--stencil); letter-spacing: .12em; }

/* The waitlist on a card */
.al-sleeve { padding: 0 0 var(--pad); }
.al-sleeve__pocket {
    max-width: 760px; margin-inline: auto; padding: 14px; border-radius: 26px;
    background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 50px -36px rgba(28, 23, 18, .5);
}

/* The shared card speaks the site's old indigo; in the sleeve it takes this page's ember. */
.al-sleeve #keep-posted .bg-gradient-to-r { background-image: none; background-color: var(--ember-ui); }
.al-sleeve #keep-posted .bg-gradient-to-r:hover { background-color: var(--ember-deep); }
.al-sleeve #keep-posted .text-indigo-600 { color: var(--ember-deep); }
.al-sleeve #keep-posted .bg-indigo-100 { background-color: #FFE4D9; }
.al-sleeve #keep-posted .focus\:border-indigo-400:focus { border-color: var(--ember); }
.al-sleeve #keep-posted .focus\:ring-indigo-400:focus, .al-sleeve #keep-posted .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(214, 90, 49, .5); }
.al-sleeve #keep-posted input[type="checkbox"] { accent-color: var(--ember-ui); }

/* ═══════════════════════════ THE AFTERCARE CARDS ═══════════════════════════ */
.al-backs { padding: var(--pad) 0; background: var(--paper-3); color: var(--ink); counter-reset: al-back; }
.al-backs .al-kicker { color: var(--ember-deep); }
.al-backs__spread { display: grid; gap: 22px; align-items: start; }
@media (min-width: 760px) { .al-backs__spread { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .al-backs__spread { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.al-back {
    position: relative; display: grid; align-content: start; gap: 12px; padding: 46px 24px 26px; border-radius: 20px; background: var(--card);
    box-shadow: 0 2px 0 rgba(28, 23, 18, .06), 0 30px 54px -36px rgba(28, 23, 18, .5);
    rotate: calc((var(--i, 0) - 1) * .4deg); counter-increment: al-back;
}
.al-back::before {
    /* the punched hole */
    content: ""; position: absolute; top: 17px; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%;
    background: var(--paper-3); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .22);
}
.al-back__q { font: 650 clamp(1.12rem, 1.02rem + .35vw, 1.32rem)/1.25 var(--display); color: var(--ink); text-wrap: balance; }
.al-back__q::before { content: counter(al-back, decimal-leading-zero); display: block; margin-bottom: 8px; font: 640 24px/1 var(--display); color: var(--ember); }
.al-back__a { font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.al-back__link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 2px solid var(--ember); font-weight: 800; font-size: 14.5px; color: var(--ink); }
.al-back__link i { font-size: .8em; }

/* ═══════════════════════════ THE TRANSIT LINE ═══════════════════════════ */
.al-line { padding: var(--pad) 0; }
.al-line__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); text-align: center; }
.al-line__stops { position: relative; display: grid; gap: 22px; margin-top: clamp(30px, 4vw, 46px); }
.al-line__stops::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 8px; border-radius: 8px; background: var(--ember-ui); }
.al-line__stop a, .al-line__stop > span { position: relative; display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: center; }
.al-line__dot {
    grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    background: var(--card); border: 6px solid var(--ink); color: var(--ink); font-size: 15px; transition: transform .2s;
}
.al-line__stop.is-here .al-line__dot { background: var(--ember-ui); border-color: var(--ember-ui); color: #fff; box-shadow: 0 0 0 5px var(--ember-tint); }
.al-line__name { font: 650 1.25rem/1.15 var(--display); }
.al-line__sub { font-size: 13.5px; color: var(--soft); line-height: 1.4; }
.al-line__stop a:hover .al-line__dot { transform: scale(1.08); }
.al-line__stop a:hover .al-line__name { color: var(--ember-deep); }
@media (min-width: 760px) {
    .al-line__stops { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
    .al-line__stops::before { left: 12%; right: 12%; top: 21px; bottom: auto; height: 8px; width: auto; }
    .al-line__stop a, .al-line__stop > span { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 6px; }
    .al-line__dot { grid-row: auto; margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .al-card, .al-btn, .al-hand__card { transition: none; }
    .al-deck__shuffle i { animation: none; }
}