/* Artist profile: a magazine feature with the artist on the cover, and the
   rest of their world as the objects it is made of. Scoped to .ap and ap-*;
   the server's Tailwind build needs nothing new for it. */

.ap {
    --ink: #1C1712;
    --ink-2: #231C16;
    --ink-3: #2E251E;
    --paper: #F7F3EC;
    --paper-2: #EFE6D8;
    --paper-3: #E6DCCB;
    --card: #FFFDF8;
    --line: #E6DFD3;
    --soft: #6B5F53;
    --ember: #D65A31;
    --ember-ui: #C24E26;
    --ember-deep: #A83E1E;
    --ember-tint: #FFE4D9;
    --ember-glow: #FF9B72;
    --gold: #E2B95E;
    --gold-pale: #F3DFA9;
    --stencil: #4B3FB5;
    --kraft: #D7B583;
    --denim: #2A4360;
    --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(64px, 8vw, 112px);
    font-family: var(--sans);
    color: var(--ink);
    /* Every section paints its own ground; ink shows only under the phone's dock. */
    background: var(--ink);
    overflow-x: clip;
    padding-bottom: 84px;
}
@media (min-width: 1024px) { .ap { padding-bottom: 0; } }

/* Resets live in a cascade layer declared before Tailwind's (this file loads
   first), so they rank below every Tailwind utility: unlayered, they would beat
   them all and strip the Tailwind-styled admin tools and modals on this page.
   Tailwind's preflight does the same resets; these only make sure. */
@layer ap-reset {
    :where(.ap) *, :where(.ap) *::before, :where(.ap) *::after { box-sizing: border-box; }
    :where(.ap) :where(img) { display: block; max-width: 100%; }
    :where(.ap) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
    :where(.ap) :where(h1, h2, h3, p, figure, dl, dd, dt) { margin: 0; }
    :where(.ap) :where(a) { color: inherit; text-decoration: none; }
    :where(.ap) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
}

.ap [x-cloak] { display: none !important; }
.ap :focus-visible { outline: 3px solid var(--ember-glow); outline-offset: 3px; }
/* Anchor targets (#book, #availability, #on-the-road …) land below the sticky header. */
.ap [id] { scroll-margin-top: 96px; }
.ap-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; }
.ap-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

.ap-display { font-family: var(--display); font-weight: 640; font-variation-settings: "opsz" 144, "SOFT" 100; letter-spacing: -0.01em; line-height: 1.05; text-wrap: balance; overflow-wrap: break-word; }
.ap-h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }
.ap-h3 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem); }
.ap-kicker { font: 800 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ember-deep); }

/* Japanese and Korean: Fraunces has no glyphs for them, so a gothic carries the
   display lines, broken at phrases (ja) or between words (ko), never mid-word. */
.ap:lang(ja) { word-break: auto-phrase; }
.ap:lang(ko) { word-break: keep-all; }
.ap:lang(ja) :is(.ap-display, .ap-mag__name, .ap-mag__sticker, .ap-toc__title, .ap-tag__city, .ap-tag__asked, .ap-badge__title, .ap-postcard__title) {
    font-family: "Fraunces", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; font-weight: 700; letter-spacing: 0;
}
.ap:lang(ko) :is(.ap-display, .ap-mag__name, .ap-mag__sticker, .ap-toc__title, .ap-tag__city, .ap-tag__asked, .ap-badge__title, .ap-postcard__title) {
    font-family: "Fraunces", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 700; letter-spacing: 0;
}
.ap-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: clamp(26px, 4vw, 42px); }
.ap-head > div { display: grid; gap: 10px; }
.ap-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 2px solid var(--ember); font-weight: 800; font-size: 15px; }
.ap-link i { font-size: .8em; }
.ap-link--light { color: var(--paper); border-color: var(--ember-glow); }
.ap-empty { color: var(--soft); font-style: italic; }
.ap-leader { flex: 1; min-width: 14px; border-bottom: 2px dotted rgba(28, 23, 18, .28); transform: translateY(-5px); }

.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 800; font-size: 16px; line-height: 1.15; text-align: center; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.ap-btn:hover { transform: translateY(-2px); }
.ap-btn:disabled { opacity: .55; transform: none; cursor: not-allowed; }
.ap-btn i { font-size: .9em; }
.ap-btn--ember { background: var(--ember-ui); color: #fff; box-shadow: 0 14px 30px -14px rgba(214, 90, 49, .9); }
.ap-btn--ember:hover { background-color: var(--ember-deep); }
.ap-btn--ink { background: var(--ink); color: var(--paper); }
.ap-btn--ink:hover { background-color: #000; }
.ap-btn--done { background: #E7F4EA; color: #1F6B3A; border: 1px solid #B7DFC3; }
.ap-btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.ap-btn--grow { flex: 1; min-width: 0; }
.ap-btn--grow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-iconbtn { width: 52px; height: 52px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 18px; box-shadow: 0 10px 18px -12px rgba(28, 23, 18, .45); transition: transform .2s; }
.ap-iconbtn:hover { transform: translateY(-2px); }
/* States the shared components add with Tailwind classes, which an unlayered
   rule here would otherwise outrank: the "Not available" button and a
   bookmark the viewer cannot use (their own profile). */
.ap-btn.bg-gray-900 { background: var(--ink); color: var(--paper); box-shadow: none; }
.ap-iconbtn.text-gray-300 { color: #C9C2B8; }
.ap-roundbtn { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.ap-roundbtn:disabled { opacity: .5; }

/* Reveal: only once the page script says it runs. */
html.ap-js [data-ap-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.ap-js [data-ap-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------- notices */
.ap-notice { padding: 14px 0; font-weight: 700; }
.ap-notice.is-ok { background: #E7F4EA; color: #1F6B3A; }
.ap-notice.is-error { background: #FBE7E4; color: #9F2A1D; }
.ap-notice__inner { display: flex; align-items: flex-start; gap: 12px; }
.ap-notice__inner p { flex: 1; }
.ap-notice__close { width: 28px; height: 28px; border-radius: 50%; }

.ap-due { padding: 14px 0; background: #FFF4D6; border-bottom: 1px solid #F1D38A; }
.ap-due__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ap-due__inner > p { flex: 1 1 260px; font-weight: 700; color: #6B4A06; }
.ap-due__stamp { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #F2C14E; color: #5A3D00; transform: rotate(-8deg); }
.ap-due__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------- the cover */
.ap-cover { padding: 18px 0 clamp(56px, 7vw, 96px); background: radial-gradient(120% 90% at 20% 0%, #F6EFE3 0%, var(--paper-2) 55%, #E6DACA 100%); }
.ap-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--soft); }
.ap-crumbs li { display: flex; align-items: center; gap: 8px; }
.ap-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.ap-crumbs [aria-current] { color: var(--ink); font-weight: 700; }
/* minmax(0, 1fr): the contents' chip row scrolls instead of widening the column. */
.ap-cover__grid { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.ap-contents { min-width: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .ap-cover__grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); align-items: start; }
}

.ap-mag {
    position: relative; container-type: inline-size; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px;
    background: var(--ink); color: #fff; transform: rotate(-1.2deg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 46px 70px -34px rgba(28, 23, 18, .65), 0 20px 30px -20px rgba(28, 23, 18, .45);
}
.ap-mag::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .1) 100%); }
.ap-mag__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ap-mag__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
button.ap-mag__photo { cursor: zoom-in; }
button.ap-mag__photo:hover img { transform: scale(1.03); }
.ap-mag__initial { display: grid; place-items: center; background: radial-gradient(circle at 70% 25%, #3A2D23 0%, var(--ink) 70%); }
.ap-mag__initial span { font: 700 74cqi/1 var(--display); color: transparent; -webkit-text-stroke: .5cqi rgba(140, 128, 230, .8); }
.ap-mag__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 8, 6, .62) 0%, rgba(10, 8, 6, 0) 27%, rgba(10, 8, 6, 0) 50%, rgba(10, 8, 6, .86) 100%); }
.ap-mag__masthead { position: absolute; top: 4.5%; left: 6%; right: 6%; display: grid; gap: 1.2cqi; pointer-events: none; }
.ap-mag__issue { font: 800 2.5cqi/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.ap-mag__brand { font: 760 13.5cqi/.86 var(--display); font-variation-settings: "opsz" 144, "SOFT" 0; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .35); }
.ap-mag__brand::first-letter { color: var(--ember-glow); }
.ap-mag__lines { position: absolute; left: 6%; top: 33%; max-width: 52%; display: grid; gap: 2.4cqi; pointer-events: none; }
.ap-mag__lines li { padding-left: 2.6cqi; border-left: .9cqi solid var(--ember); font: 800 3.5cqi/1.15 var(--sans); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.ap-mag__sticker {
    position: absolute; top: 25%; right: 5%; width: 27cqi; height: 27cqi; padding: 3cqi; border-radius: 50%;
    display: grid; place-items: center; text-align: center; background: var(--ember-ui); color: #fff;
    font: 800 3.4cqi/1.08 var(--sans); letter-spacing: .02em; text-transform: uppercase;
    transform: rotate(11deg); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .65), inset 0 0 0 .8cqi rgba(255, 255, 255, .22);
    pointer-events: none; overflow-wrap: break-word; hyphens: auto;
}
.ap-mag__star { position: absolute; left: 6%; right: 6%; bottom: 6.5%; pointer-events: none; }
.ap-mag__kicker { margin-bottom: 1.6cqi; font: 800 3cqi/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-pale); }
.ap-mag__name { font-family: var(--display); font-weight: 680; font-variation-settings: "opsz" 144, "SOFT" 100; line-height: .94; letter-spacing: -0.015em; color: #fff; text-shadow: 0 3px 26px rgba(0, 0, 0, .55); overflow-wrap: break-word; text-wrap: balance; }
.ap-mag__name.is-xl { font-size: 16cqi; }
.ap-mag__name.is-l { font-size: 12.5cqi; }
.ap-mag__name.is-m { font-size: 9.5cqi; }
.ap-mag__name.is-s { font-size: 7.4cqi; }
.ap-mag.is-type .ap-mag__scrim { background: linear-gradient(180deg, rgba(10, 8, 6, .4) 0%, rgba(10, 8, 6, 0) 30%, rgba(10, 8, 6, .5) 100%); }

.ap-contents { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-content: start; padding-top: 6px; }
.ap-byline { display: flex; align-items: center; gap: 16px; }
.ap-byline__photo { width: 68px; height: 68px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 28px var(--display); border: 3px solid var(--card); box-shadow: 0 10px 22px -12px rgba(28, 23, 18, .7); }
.ap-byline__photo img { width: 100%; height: 100%; object-fit: cover; }
.ap-byline__text { min-width: 0; display: grid; gap: 3px; }
.ap-byline__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 800; font-size: 18px; }
.ap-byline__sub { color: var(--soft); font-size: 15px; }
.ap-byline__admin { font-size: 13px; font-weight: 700; color: #8A5A00; }
.ap-status { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.ap-stats { border-top: 2px solid var(--ink); }
.ap-stats > div { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(28, 23, 18, .14); }
.ap-stats dt { flex-shrink: 0; font: 800 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.ap-stats dd { max-width: 64%; text-align: right; font-weight: 700; }
.ap-stats__star { color: var(--ember); }
.ap-stats__soft { color: var(--soft); font-weight: 500; }

.ap-cta { display: none; }
.ap-cta__row { display: flex; align-items: center; gap: 12px; }
@media (min-width: 1024px) { .ap-cta { display: block; } }

.ap-toc__title { margin-bottom: 8px; font: italic 560 26px/1.1 var(--display); }
.ap-toc a { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(28, 23, 18, .12); }
.ap-toc__no { font: 700 24px/1 var(--display); color: var(--ember-ui); }
.ap-toc__label { font-weight: 800; }
.ap-toc__meta { color: var(--soft); font-size: 13px; text-align: right; }
.ap-toc a:hover .ap-toc__label { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) {
    .ap-toc ol { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
    .ap-toc ol::-webkit-scrollbar { display: none; }
    .ap-toc a { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgba(28, 23, 18, .2); border-radius: 999px; background: var(--card); white-space: nowrap; }
    .ap-toc__no { font-size: 15px; }
    .ap-toc__meta { display: none; }
}

/* ------------------------------------------------- take a number, away */
.ap-wait, .ap-away, .ap-claim { padding: clamp(44px, 6vw, 76px) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.ap-wait__grid, .ap-away__grid, .ap-claim__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; }
@media (min-width: 760px) {
    .ap-wait__grid, .ap-away__grid, .ap-claim__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 52px; }
}
.ap-wait__text, .ap-away__text, .ap-claim__text { display: grid; gap: 12px; justify-items: start; color: #3A322B; line-height: 1.6; max-width: 640px; }
.ap-wait__text h2, .ap-away__text h2, .ap-claim__text h2 { color: var(--ink); }
.ap-wait__count { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--ember-tint); color: var(--ember-deep); font-weight: 800; font-size: 14px; }

.ap-ticket {
    position: relative; justify-self: center; width: 200px; height: 128px; display: grid; place-items: center; align-content: center;
    background: #F4C95D; color: #4A3300; transform: rotate(-5deg);
    filter: drop-shadow(0 18px 18px rgba(90, 60, 0, .25));
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}
.ap-ticket::before, .ap-ticket::after { content: ""; position: absolute; left: 22px; right: 22px; border-top: 2px dashed rgba(74, 51, 0, .35); }
.ap-ticket::before { top: 12px; }
.ap-ticket::after { bottom: 12px; }
.ap-ticket__label { font: 800 13px/1 var(--sans); letter-spacing: .3em; }
.ap-ticket__num { font: 700 68px/1 var(--display); }

.ap-hanger { position: relative; justify-self: center; width: 150px; height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: 22px 22px 18px 18px; background: linear-gradient(160deg, #2B3A55, #1B2538); color: var(--gold-pale); font-size: 46px; transform: rotate(-3deg); box-shadow: 0 26px 34px -22px rgba(20, 30, 50, .7); }
.ap-hanger__hole { position: absolute; top: 22px; left: 50%; width: 64px; height: 64px; translate: -50% 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35); }
.ap-hanger i { margin-top: 70px; }
.ap-hanger__z { font: italic 600 22px var(--display); letter-spacing: .3em; color: rgba(243, 223, 169, .75); }

.ap-booked { position: relative; justify-self: center; width: 210px; aspect-ratio: 1; }
.ap-booked__page { position: absolute; inset: 0; padding: 18px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 20px 30px -22px rgba(28, 23, 18, .6); }
.ap-booked__page::before { content: ""; position: absolute; inset: 0 0 auto; height: 14px; border-radius: 10px 10px 0 0; background: var(--ember-ui); }
.ap-booked__page i { margin-top: 14px; border-radius: 4px; background: repeating-linear-gradient(135deg, #E8DFD2 0 2px, transparent 2px 6px); }
.ap-booked__stamp { position: absolute; inset: 22% 14%; display: grid; place-items: center; border: 4px double rgba(179, 38, 30, .85); border-radius: 50%; color: rgba(179, 38, 30, .9); font-size: 54px; transform: rotate(-14deg); background: rgba(255, 253, 248, .6); }

/* --------------------------------------------- hello, my name is (claim) */
.ap-hello { justify-self: center; width: 250px; overflow: hidden; border-radius: 18px; background: #fff; border: 3px solid #C8202F; transform: rotate(-4deg); box-shadow: 0 22px 30px -20px rgba(120, 10, 20, .55); }
.ap-hello__top { padding: 14px 12px 12px; background: #C8202F; color: #fff; text-align: center; font: 800 18px/1.15 var(--sans); letter-spacing: .02em; }
.ap-hello__name { padding: 30px 14px 34px; text-align: center; font: italic 640 26px/1.1 var(--display); color: var(--ink); overflow-wrap: anywhere; }

.ap-slips { padding: 26px 0; background: var(--paper); }
.ap-slip { position: relative; max-width: 640px; display: grid; gap: 8px; padding: 22px 24px; background: #FFFBEA; border-radius: 4px; box-shadow: 0 0 0 1px #EFE2B8, 0 16px 24px -20px rgba(80, 60, 10, .5); color: #4A3F28; }
.ap-slip.is-ok { background: #EEF8F0; box-shadow: 0 0 0 1px #C6E6CF, 0 16px 24px -20px rgba(20, 80, 40, .4); color: #234A30; }
.ap-slip__clip { position: absolute; top: -12px; left: 28px; width: 16px; height: 44px; border: 3px solid #9AA1A8; border-radius: 10px; }
.ap-slip__title { font-weight: 800; color: var(--ink); }
.ap-slip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }

/* ----------------------------------------------------------- staff only */
.ap-staff { background: #FFF6E0; border-block: 1px dashed #E3C77A; }
.ap-staff summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 0; cursor: pointer; font-weight: 800; color: #6B4A06; list-style: none; }
.ap-staff summary::-webkit-details-marker { display: none; }
.ap-staff summary span { font-weight: 500; font-size: 13px; color: #8A6A2A; }
.ap-staff__body { display: grid; gap: 14px; padding-bottom: 22px; }
.ap-staff__card { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #EBDDB4; }
.ap-staff__label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 800; font-size: 14px; }

/* ------------------------------------------------- the book (portfolio) */
.ap-book { padding: var(--pad) 0; color: var(--paper); background: radial-gradient(90% 70% at 50% 0%, #34291F 0%, var(--ink-2) 60%, #17120E 100%); }
.ap-book .ap-kicker { color: var(--gold-pale); }
.ap-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px 12px 3px 3px; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); transition: transform .2s; }
.ap-tab:hover { transform: translateY(-2px); }
.ap-binder { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(12px, 2vw, 24px); border-radius: 22px; background: linear-gradient(180deg, #141010, #0B0908); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 80px -46px rgba(0, 0, 0, .95); }
.ap-binder__page { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 18px); padding: clamp(12px, 1.8vw, 22px); border-radius: 8px; background: linear-gradient(180deg, #F6F2EA, #ECE6DA); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.ap-binder__rings { display: flex; justify-content: center; gap: 22%; padding: 12px 0; }
.ap-binder__rings span { width: 38px; height: 14px; border-radius: 999px; background: linear-gradient(180deg, #F2EEE6 0%, #A39D93 55%, #DCD6CB 100%); box-shadow: 0 3px 5px rgba(0, 0, 0, .55); }
@media (min-width: 760px) {
    .ap-binder { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: stretch; }
    .ap-binder.is-single { grid-template-columns: minmax(0, 560px) 54px; justify-content: center; }
    .ap-binder__rings { flex-direction: column; justify-content: space-around; gap: 0; padding: 40px 0; }
    .ap-binder__rings span { width: 54px; height: 14px; margin-inline: -8px; }
}
.ap-pocket { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; background: #DCD5C8; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 6px 12px -8px rgba(0, 0, 0, .55); }
.ap-pocket img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ap-pocket:hover img { transform: scale(1.04); }
.ap-pocket::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 3px; pointer-events: none; }
.ap-pocket__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(128deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .16) 76%, rgba(255, 255, 255, 0) 86%); }
.ap-pocket.is-empty { background: linear-gradient(180deg, #E9E3D7, #DED7C9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.ap-pocket__tag { position: absolute; left: 8px; top: 8px; padding: 4px 9px; border-radius: 999px; background: #E7F4EA; color: #1F6B3A; font: 800 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.ap-pocket__count { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, .66); color: #fff; font-size: 12px; font-weight: 700; }

/* --------------------------------------------- the appointment book */
.ap-diary { padding: var(--pad) 0; background: var(--paper); }
.ap-diary__book { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 34px 60px -40px rgba(28, 23, 18, .55); }
@media (min-width: 900px) { .ap-diary__book { grid-template-columns: 1.05fr 1fr; } }
.ap-diary__month { position: relative; padding: 24px 22px 26px 30px; border-bottom: 1px dashed var(--line); background: linear-gradient(90deg, transparent 16px, rgba(214, 90, 49, .45) 16px 17.5px, transparent 17.5px) var(--card); }
.ap-diary__month::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: var(--ember-ui); }
@media (min-width: 900px) { .ap-diary__month { border-bottom: 0; border-right: 1px dashed var(--line); } }
.ap-diary__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.ap-diary__nav p { font: 600 23px/1.2 var(--display); text-transform: capitalize; text-align: center; }
.ap-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 4px; }
.ap-cal__wd { padding-bottom: 4px; text-align: center; font: 800 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.ap-cal__cell { aspect-ratio: 1; display: grid; place-items: center; }
.ap-cal__day { width: 88%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 15px; color: #B3A99D; }
.ap-cal__day:disabled { cursor: default; }
.ap-cal__day.is-open { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ember); }
.ap-cal__day.is-open:hover { background: var(--ember-tint); }
.ap-cal__day.is-selected { background: var(--ember-ui); color: #fff; box-shadow: 0 8px 16px -8px rgba(194, 78, 38, .9); }
.ap-diary__day { padding: 26px 22px; background: repeating-linear-gradient(180deg, transparent 0 39px, #ECE5D9 39px 40px) var(--card); }
.ap-diary__date { margin-bottom: 14px; font: 600 23px/1.2 var(--display); }
.ap-slots { display: grid; gap: 12px; }
.ap-slot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 10px; background: rgba(255, 253, 248, .95); border: 1px solid var(--line); border-left: 5px solid var(--ember); }
.ap-slot__info { min-width: 0; display: grid; gap: 2px; }
.ap-slot__time { font-weight: 800; font-size: 16px; }
.ap-slot__place, .ap-slot__note { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }
.ap-slot__deposit { font-size: 14px; font-weight: 800; color: var(--ember-deep); }

/* ------------------------------------------------ flash: sticker sheet */
.ap-flash { padding: var(--pad) 0; background: #ECE8F6; }
.ap-flash .ap-kicker { color: var(--stencil); }
.ap-flash .ap-link { border-color: var(--stencil); }
.ap-sheet { padding: clamp(20px, 3.4vw, 40px); border-radius: 26px; background: radial-gradient(rgba(75, 63, 181, .1) 1px, transparent 1.4px) 0 0 / 18px 18px, #FCFBFF; box-shadow: 0 0 0 1px rgba(75, 63, 181, .14), 0 34px 60px -44px rgba(75, 63, 181, .7); }
.ap-sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 34px) clamp(16px, 2.6vw, 30px); }
@media (min-width: 760px) { .ap-sheet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ap-sheet__grid li { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; transform: rotate(var(--r, 0deg)); }
.ap-sticker { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 7px; border-radius: 24px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 12px 20px -12px rgba(40, 30, 100, .55); transition: transform .25s ease; }
.ap-sticker img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.ap-sticker::after { content: ""; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 0 0 24px 0; background: linear-gradient(135deg, transparent 50%, #E7E3F4 50%, #FFFFFF 80%); box-shadow: -3px -3px 5px rgba(40, 30, 100, .12); }
.ap-sticker:hover { transform: translateY(-5px) rotate(1.5deg); }
.ap-sticker__name { max-width: 100%; text-align: center; font: italic 600 15px/1.25 var(--display); color: var(--ink); overflow-wrap: anywhere; }

/* --------------------------------------------- about: the sketchbook */
.ap-about { padding: var(--pad) 0; background: var(--paper-2); }
.ap-sketch { position: relative; max-width: 920px; margin-inline: auto; }
.ap-sketch__spiral { position: absolute; z-index: 1; top: -15px; left: 34px; right: 34px; height: 32px; background: radial-gradient(ellipse 5px 14px at 50% 50%, #59534A 0 4.5px, transparent 5.5px) 0 0 / 26px 32px repeat-x; }
.ap-sketch__page {
    position: relative; display: flow-root; padding: clamp(48px, 6vw, 70px) clamp(22px, 5vw, 64px) clamp(32px, 5vw, 56px);
    border-radius: 6px; background: radial-gradient(circle at 13px 13px, var(--paper-2) 0 5px, transparent 5.5px) 34px 4px / 26px 30px repeat-x, radial-gradient(rgba(28, 23, 18, .13) 1px, transparent 1.3px) 0 0 / 22px 22px, var(--card);
    box-shadow: 0 0 0 1px var(--line), 0 34px 60px -40px rgba(28, 23, 18, .6);
}
.ap-sketch__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.ap-sketch__photo { float: right; position: relative; width: clamp(118px, 24vw, 190px); margin: 0 0 18px 22px; padding: 8px 8px 30px; background: #fff; transform: rotate(3deg); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .5); }
.ap-sketch__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ap-tape { position: absolute; top: -12px; left: 50%; width: 76px; height: 24px; translate: -50% 0; transform: rotate(-5deg); background: rgba(222, 205, 160, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.ap-sketch__text { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.78; color: #3A322B; }
.ap-sketch__empty { color: var(--soft); font: italic 500 20px var(--display); }

/* --------------------------------------------- similar: the Rolodex */
.ap-rolo { padding: var(--pad) 0; background: var(--paper); }
.ap-rolo__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 700px) { .ap-rolo__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ap-rolo__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ap-rolo__cards li { transform: rotate(var(--r, 0deg)); }
.ap-card {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; height: 100%; padding: 16px 16px 30px; border-radius: 8px;
    background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(47, 93, 140, .16) 25px 26px) 0 64px / 100% calc(100% - 64px) no-repeat, linear-gradient(180deg, transparent 63px, rgba(179, 38, 30, .5) 63px 64px, transparent 64px), #FFFEF9;
    box-shadow: 0 0 0 1px var(--line), 0 20px 30px -22px rgba(28, 23, 18, .55); transition: transform .25s;
}
.ap-card:hover { transform: translateY(-4px); }
.ap-card__works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; order: 2; }
.ap-card__works img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.ap-card__works.is-empty { display: none; }
.ap-card__who { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.ap-card__avatar { width: 46px; height: 46px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 18px var(--display); }
.ap-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-card__text { min-width: 0; display: grid; }
.ap-card__name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card__meta { font-size: 13px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card__rating { order: 3; font-size: 13px; font-weight: 700; color: var(--ember-deep); }
.ap-card__notch { position: absolute; left: 50%; bottom: -1px; width: 46px; height: 18px; translate: -50% 0; border-radius: 12px 12px 0 0; background: var(--paper); box-shadow: inset 0 1px 0 var(--line), inset 1px 0 0 var(--line), inset -1px 0 0 var(--line); }

/* ------------------------------------- the counter: receipt, inks, sign */
.ap-counter { padding: var(--pad) 0; background: linear-gradient(180deg, #E9DCC6 0%, #E1D0B4 100%); }
.ap-counter__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; align-items: start; }
@media (min-width: 900px) { .ap-counter__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 64px; } }
.ap-counter__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }

.ap-receipt-wrap { justify-self: center; width: min(340px, 100%); transform: rotate(-1.6deg); filter: drop-shadow(0 22px 22px rgba(70, 45, 10, .32)); }
.ap-receipt {
    padding: 28px 24px 40px; background: #FFFEFA; color: #2B2620; font-family: var(--mono); font-size: 14px;
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
}
.ap-receipt__brand { text-align: center; font: 700 22px/1.1 var(--display); letter-spacing: -0.01em; }
.ap-receipt__meta { margin-top: 8px; text-align: center; font-size: 12px; line-height: 1.6; color: #6E655A; text-transform: uppercase; overflow-wrap: anywhere; }
.ap-receipt__rule { height: 0; margin: 16px 0; border-top: 2px dashed rgba(43, 38, 32, .35); }
.ap-receipt__title { margin-bottom: 10px; font: 800 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.ap-receipt dl > div { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.ap-receipt dt { flex-shrink: 0; }
.ap-receipt dd { font-weight: 800; text-align: right; }
.ap-receipt .ap-leader { border-bottom-color: rgba(43, 38, 32, .3); }
.ap-receipt__note { margin-top: 10px; font-size: 13px; color: #6E655A; }
.ap-receipt__barcode { display: block; height: 46px; margin: 4px auto 0; width: 80%; background: repeating-linear-gradient(90deg, #2B2620 0 2px, transparent 2px 4px, #2B2620 4px 7px, transparent 7px 9px, #2B2620 9px 10px, transparent 10px 13px); }

.ap-shelf h2 { margin-bottom: 26px; }
.ap-shelf__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 30px 18px; padding: 0 10px 14px; border-bottom: 12px solid #7C5E3A; border-radius: 0 0 3px 3px; box-shadow: 0 12px 0 -6px rgba(60, 40, 15, .25); }
.ap-bottle { width: 116px; display: grid; justify-items: center; }
.ap-bottle__cap { width: 34px; height: 22px; border-radius: 7px 7px 3px 3px; background: linear-gradient(90deg, #111 0%, #3A3A3A 45%, #111 100%); }
.ap-bottle__body { position: relative; width: 100%; min-height: 128px; display: grid; place-items: center; padding: 14px 10px; border-radius: 22px 22px 16px 16px; background: linear-gradient(90deg, rgba(255, 255, 255, .22) 0 10%, transparent 10% 72%, rgba(255, 255, 255, .1) 72% 78%, transparent 78%), var(--bottle, #1C1712); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .18); }
.ap-bottle__body::before { content: ""; position: absolute; top: -8px; left: 50%; width: 28px; height: 10px; translate: -50% 0; border-radius: 4px 4px 0 0; background: var(--bottle, #1C1712); filter: brightness(.85); }
/* Words break only where the language hyphenates them, never mid-letter. */
.ap-bottle__label { width: 100%; padding: 9px 5px; border-radius: 4px; background: #FFFDF5; color: #1C1712; text-align: center; font: 800 10.5px/1.2 var(--sans); letter-spacing: .03em; text-transform: uppercase; hyphens: auto; overflow-wrap: break-word; box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
@media (max-width: 520px) {
    .ap-shelf__row { gap: 26px 12px; padding-inline: 0; }
    .ap-bottle { width: calc((100% - 24px) / 3); }
}

.ap-sign { position: relative; max-width: 620px; padding: 26px 30px 28px; border-radius: 14px; background: #FBF8F0; color: #4A1212; box-shadow: inset 0 0 0 6px #FBF8F0, inset 0 0 0 9px #B3261E, 0 20px 30px -20px rgba(70, 20, 10, .55); }
.ap-sign::before, .ap-sign::after { content: ""; position: absolute; top: 16px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9A9A9A 60%, #555); }
.ap-sign::before { left: 16px; }
.ap-sign::after { right: 16px; }
.ap-sign__title { margin-bottom: 14px; text-align: center; font: 800 13px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #B3261E; }
.ap-sign ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font: 600 19px/1.3 var(--display); }
.ap-sign li { display: inline-flex; align-items: center; gap: 8px; }
.ap-sign li i { font-size: 14px; color: #B3261E; }

/* ------------------------------------------------ reviews: postcards */
.ap-reviews { padding: var(--pad) 0; background: var(--ink); color: var(--paper); }
.ap-reviews .ap-kicker { color: var(--gold-pale); }
.ap-postcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 900px) {
    .ap-postcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-postcards > :only-child { grid-column: 1 / -1; width: min(760px, 100%); }
}
.ap-postcard { position: relative; display: grid; gap: 18px; padding: 22px; border-radius: 6px; background: linear-gradient(180deg, #FBF7EE, #F4EEE1); color: var(--ink); box-shadow: 0 30px 44px -28px rgba(0, 0, 0, .95); }
.ap-postcards > .ap-postcard:nth-child(odd) { transform: rotate(-.8deg); }
.ap-postcards > .ap-postcard:nth-child(even) { transform: rotate(.7deg); }
@media (min-width: 560px) {
    .ap-postcard { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0; padding: 26px; }
    .ap-postcard__msg { padding-right: 24px; border-right: 1px solid #D8CFC0; }
    .ap-postcard__addr { padding-left: 24px; }
}
.ap-postcard__msg { display: grid; align-content: start; gap: 8px; }
.ap-postcard__title { font: 620 21px/1.2 var(--display); }
.ap-postcard__body { font-size: 15px; line-height: 1.65; color: #3A322B; white-space: pre-line; overflow-wrap: anywhere; }
.ap-postcard__media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ap-postcard__thumb { position: relative; width: 68px; height: 68px; overflow: hidden; border-radius: 6px; border: 3px solid #fff; box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .5); }
.ap-postcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ap-postcard__thumb > span[aria-hidden] { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: #fff; }
.ap-postcard__addr { position: relative; display: grid; align-content: start; gap: 12px; }
/* Perforated edge: a white ground full of holes, the picture covering all but the rim. */
.ap-stamp { justify-self: end; width: 84px; height: 98px; padding: 7px; background: radial-gradient(circle, transparent 2.6px, #fff 3.1px) -4.5px -4.5px / 9px 9px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.ap-stamp__inner { width: 100%; height: 100%; display: grid; place-items: center; padding: 4px; background: linear-gradient(160deg, var(--ember-ui), #8E2F14); color: #FFE7A3; text-align: center; font-size: 12px; letter-spacing: 1px; line-height: 1.3; overflow-wrap: anywhere; }
.ap-stamp__off { color: rgba(255, 231, 163, .35); }
.ap-postmark { position: absolute; top: 18px; right: 62px; width: 82px; height: 82px; padding: 10px; display: grid; place-items: center; border: 2px solid rgba(28, 23, 18, .45); border-radius: 50%; text-align: center; font: 800 9.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(28, 23, 18, .6); transform: rotate(-14deg); background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(28, 23, 18, .12) 9px 10px); }
.ap-postcard__from { margin-top: 30px; padding-bottom: 6px; border-bottom: 1px solid #CFC5B5; font: italic 620 19px/1.25 var(--display); overflow-wrap: anywhere; }
.ap-postcard__line { display: block; height: 22px; border-bottom: 1px solid #CFC5B5; }
.ap-postcard.is-blank .ap-postcard__title { color: var(--ember-deep); }
.ap-postcard.is-blank .ap-stamp__inner { font-size: 26px; }

.ap-letters { width: 100%; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; border-radius: 26px 26px 0 0; background: var(--ink); color: var(--paper); }
@media (min-width: 640px) { .ap-letters { width: min(920px, 100% - 48px); border-radius: 26px; } }
.ap-letters .ap-kicker { color: var(--gold-pale); }
.ap-letters__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid rgba(247, 243, 236, .12); }
.ap-letters__title { font: 640 26px/1.1 var(--display); }
.ap-letters__body { display: grid; gap: 22px; padding: 24px; overflow-y: auto; }

/* ------------------------------------------- on the road: luggage tags */
.ap-road { position: relative; z-index: 2; padding: var(--pad) 0; background: var(--paper); }
.ap-tags { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 760px) { .ap-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ap-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-tag { position: relative; isolation: isolate; padding: 26px 24px 24px 66px; color: #2B2117; filter: drop-shadow(0 16px 14px rgba(70, 45, 10, .2)); }
.ap-tag::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 12px 12px 0;
    background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 7px), var(--kraft);
    clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px), 0 34px);
}
.ap-tag.is-now::before { background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 7px), #CFE3C6; }
.ap-tag.is-blank::before { background: repeating-linear-gradient(100deg, rgba(0, 0, 0, .025) 0 2px, transparent 2px 7px), #F5EBDA; }
.ap-tag.is-blank::after { content: ""; position: absolute; inset: 10px 10px 10px 44px; z-index: -1; border: 2px dashed rgba(124, 94, 58, .35); border-radius: 0 8px 8px 0; }
.ap-tag__hole { position: absolute; left: 20px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px #B9B4AA, 0 0 0 5px rgba(0, 0, 0, .15), inset 0 2px 3px rgba(0, 0, 0, .35); }
.ap-tag__string { position: absolute; left: 0; top: calc(50% - 46px); width: 32px; height: 48px; fill: none; stroke: #7A5A33; stroke-width: 2.5; stroke-linecap: round; overflow: visible; }
.ap-tag__when { display: flex; align-items: center; gap: 8px; font: 800 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6B4B22; }
.ap-tag.is-now .ap-tag__when { color: #1F6B3A; }
.ap-tag__dot { width: 9px; height: 9px; border-radius: 50%; background: #2E9E58; box-shadow: 0 0 0 4px rgba(46, 158, 88, .2); }
.ap-tag__city { margin: 8px 0 6px; font: 650 30px/1.05 var(--display); overflow-wrap: anywhere; }
.ap-tag__where { font-size: 14px; color: #4E3B22; overflow-wrap: anywhere; }
.ap-tag__note { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #5C4630; }
.ap-tag__asked { margin-top: 6px; font: 620 22px/1.2 var(--display); }
.ap-tag__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.ap-tag__quiet { margin-top: 10px; font-size: 14px; font-weight: 800; color: #6E5A44; }
.ap-tag__quiet:hover { color: var(--ink); }
.ap-tag__ask { margin-top: 14px; }
.ap-tag__field { position: relative; margin-top: 14px; }
.ap-tag__field > i { position: absolute; left: 14px; top: 17px; color: #8C6B3F; }
.ap-tag__field input { width: 100%; padding: 13px 14px 13px 38px; border-radius: 10px; border: 1px solid rgba(124, 94, 58, .45); background: #FFFDF8; font-size: 15px; color: var(--ink); }
.ap-tag__field input:focus { outline: 3px solid var(--ember-glow); outline-offset: 1px; border-color: transparent; }
.ap-tag__results { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 6px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -20px rgba(28, 23, 18, .5); }
.ap-tag__results button { display: block; width: 100%; padding: 11px 14px; text-align: left; font-size: 14px; color: var(--soft); }
.ap-tag__results button:hover { background: var(--ember-tint); }
.ap-tag__rcity { margin-right: 6px; font-weight: 800; color: var(--ink); }
.ap-tag__none { padding: 12px 14px; font-size: 14px; color: var(--soft); }
.ap-tag__error { margin-top: 10px; font-size: 14px; font-weight: 700; color: #9F2A1D; }

/* ------------------------------------------------ studios: key fobs */
.ap-keys { padding: var(--pad) 0; background: var(--paper-2); }
.ap-keys__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
@media (min-width: 900px) { .ap-keys__grid.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } }
.ap-fobs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ap-fob { --fob: #2F5D8C; position: relative; padding-left: 30px; }
.ap-fob.is-primary { --fob: var(--ember-ui); }
.ap-fob.is-guest { --fob: #2D6B55; }
.ap-fob.is-private { --fob: #3B342D; }
.ap-fob__ring { position: absolute; z-index: 1; left: 0; top: 30px; width: 48px; height: 48px; border-radius: 50%; border: 5px solid #B1ABA1; border-right-color: #E2DDD4; box-shadow: 0 3px 5px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ap-fob__body {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 16px;
    padding: 20px 20px 20px 54px; border-radius: 0 30px 30px 0; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .06)), var(--fob); color: #fff;
    clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 50%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
.ap-fob__body::before { content: ""; position: absolute; left: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.ap-fob__no { font: 700 30px/1 var(--display); color: rgba(255, 255, 255, .55); }
.ap-fob__text { min-width: 0; display: grid; gap: 3px; font-size: 14px; color: rgba(255, 255, 255, .86); overflow-wrap: anywhere; }
.ap-fob__name { font: 620 21px/1.2 var(--display); color: #fff; }
a.ap-fob__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-fob__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ap-fob__tags:empty { display: none; }
.ap-fob__tags span { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ap-fob__dates { margin-top: 4px; font-weight: 700; color: #fff; }
.ap-fob__go { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.ap-fob__go:hover { background: rgba(255, 255, 255, .3); }
.ap-keys__map { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 20px; background: #D9D1C2; box-shadow: 0 0 0 6px #fff, 0 30px 50px -30px rgba(28, 23, 18, .6); transform: rotate(1deg); }
.ap-keys__map iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: grayscale(.8) sepia(.2) contrast(.95); }
.ap-keys__maplink { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px; }

/* ---------------------------------------- where to meet them: lanyards */
.ap-meet { padding: var(--pad) 0; background: var(--ink-2); color: var(--paper); }
.ap-lanyards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 28px; }
@media (min-width: 640px) { .ap-lanyards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ap-lanyards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-lanyards li { padding-top: 78px; transform: rotate(var(--r, 0deg)); }
.ap-badge { position: relative; display: grid; gap: 6px; padding-bottom: 20px; border-radius: 14px; background: #FFFDF8; color: var(--ink); box-shadow: 0 30px 44px -26px rgba(0, 0, 0, .95); transition: transform .25s; }
.ap-badge:hover { transform: translateY(-4px); }
.ap-badge__strap { position: absolute; bottom: calc(100% + 14px); left: 50%; width: 130px; height: 92px; translate: -50% 0; }
.ap-badge__strap::before, .ap-badge__strap::after { content: ""; position: absolute; bottom: 0; width: 18px; height: 104px; background: repeating-linear-gradient(180deg, var(--ember-ui) 0 10px, #B44822 10px 12px); transform-origin: bottom center; }
/* Two straps meeting at the clip, spreading up and out of frame. */
.ap-badge__strap::before { left: calc(50% - 20px); transform: rotate(-17deg); }
.ap-badge__strap::after { right: calc(50% - 20px); transform: rotate(17deg); }
.ap-badge__clip { position: absolute; bottom: calc(100% - 6px); left: 50%; width: 30px; height: 26px; translate: -50% 0; border-radius: 6px 6px 8px 8px; background: linear-gradient(180deg, #ECE8E1, #8E8981); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.ap-badge__band { margin-bottom: 6px; padding: 16px 12px 13px; border-radius: 14px 14px 0 0; background: var(--ink); color: var(--gold-pale); text-align: center; font: 800 13px var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.ap-badge__title { padding: 0 20px; font: 640 23px/1.15 var(--display); overflow-wrap: anywhere; }
.ap-badge__when, .ap-badge__where { padding: 0 20px; font-size: 14px; color: var(--soft); }

/* ------------------------------------------- follow: patches on denim */
.ap-follow { padding: var(--pad) 0; color: var(--paper); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 5px), var(--denim); }
.ap-follow .ap-empty { color: rgba(247, 243, 236, .75); }
.ap-patches { display: flex; flex-wrap: wrap; gap: 30px; }
.ap-patches li { transform: rotate(var(--r, 0deg)); }
.ap-patch { --patch: var(--ember-ui); --rim: #7A2C12; width: 146px; height: 146px; display: grid; place-items: center; align-content: center; gap: 10px; border-radius: 50%; text-align: center; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), transparent 60%), repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 4px), var(--patch); box-shadow: 0 0 0 7px var(--rim), 0 18px 22px -12px rgba(0, 0, 0, .65); outline: 2px dashed rgba(255, 255, 255, .55); outline-offset: -13px; transition: transform .25s; }
.ap-patch:hover { transform: scale(1.05) rotate(-3deg); }
.ap-patch i { font-size: 40px; }
.ap-patch span { padding: 0 14px; font: 800 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ap-patch.is-facebook { --patch: #2F5D8C; --rim: #173556; }
.ap-patch.is-tiktok { --patch: #1C1712; --rim: #4A3F35; }
.ap-patch.is-website, .ap-patch.is-web { --patch: #3E7C4F; --rim: #1F4A2B; }
.ap-patch.is-youtube { --patch: #9F2A1D; --rim: #5E150D; }

/* ---------------------------------------------- the phone's dock */
.ap-dock { position: fixed; inset: auto 0 0 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(28, 23, 18, .97); box-shadow: 0 -16px 30px -18px rgba(0, 0, 0, .7); }
.ap-dock__inner { display: flex; align-items: center; gap: 10px; }
.ap-dock .ap-iconbtn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
@media (min-width: 1024px) { .ap-dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
    html.ap-js [data-ap-reveal] { opacity: 1; transform: none; transition: none; }
    .ap-mag__photo img, .ap-pocket img, .ap-sticker, .ap-card, .ap-badge, .ap-patch, .ap-btn, .ap-iconbtn, .ap-tab { transition: none; }
}