/* Archive cards — /ecodesignlab (2026-10-14, v3 "poster")
   Match of the 73x5 poster reference (CARD REFS/pinterest/…/291537775905876590.jpg): dark card, colour block with the
   headline in ink, mono credits beside it, grey info strip, full-bleed photo, mark + credits at the foot.
   Two variants: block on TOP or at the BOTTOM (layout 'top' | 'bottom'). All tunables are the variables below. */
:root {
  --card-font: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  --card-mono: "SF Mono", Menlo, "JetBrains Mono", "Courier New", monospace;
  --card-paper: #121212;             /* card body */
  --card-ink: #f2f2f2;               /* text on the body */
  --card-ink-soft: #9a9a9a;
  --card-rule: #f2f2f2;
  --card-grid: rgba(255,255,255,0.045);     /* David 2026-10-15: very faint line grid, no baselines */
  --card-accent: #EB6257;            /* overridden per card: the marker's pin colour → the colour block */
  --card-field-ink: #111111;         /* text on the colour block */
  --card-strip: #c9c9c9;             /* grey info strip */
  --card-strip-ink: #111111;
  --card-dark: #1f1f1f;              /* audio / text media block */
  --card-w: 300px;                   /* opened card width; height = 16/9 of it */
  --card-w-preview: 120px;           /* preview card width (before distance scaling) */
  /* layout grid = "Digital Presentation Portrait Grid System v3" (720 × 1280 pt page → cqw = pt / 7.2):
     35.45 pt margins, 4 columns × 146.94 pt with 20.45 pt gutters, 6 fields × 195 pt + footer zone 1170–1245, 15 pt baseline */
  --card-pad: 4.924cqw;              /* margin (cqw = % of card width); colour block + photo bleed over it */
  --card-cols: 4;
  --card-col: 20.408cqw;
  --card-gutter: 2.84cqw;
  --card-field: 27.0833cqw;          /* 195 pt */
  --card-base: 2.0833cqw;            /* 15 pt baseline */
  --card-foot-top: 162.5cqw;         /* 1170 pt */
  --card-bottom: 172.9167cqw;        /* 1245 pt */
  --card-grid-col: rgba(255,255,255,0.025);
  --card-grid-visible: 1;
  --card-radius: 0px;
  --card-shadow: 0 18px 50px rgba(0,0,0,.6);
  --card-indent: 2;                  /* unused in the poster layout, kept for the lab */
  --card-headline: 3.2;              /* headline size factor */
  --card-leader: rgba(255,255,255,.9);
  --card-h: 177.7778cqw;
}

.ac-card { position: relative; width: var(--card-w); aspect-ratio: 9 / 16; background: var(--card-paper); color: var(--card-ink);
  font-family: var(--card-font); box-sizing: border-box; border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  overflow: hidden; container-type: inline-size; -webkit-user-select: none; user-select: none; }
.ac-card.ac-preview { width: var(--card-w-preview); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
/* .ac-mine (own marker): no outline (David 2026-10-14) — the ✎ button is the only affordance */

.ac-stage { position: absolute; inset: 0; overflow: hidden; }
/* template grid drawn over everything except the chrome: fields from the page top, columns + baselines inside the margin */
.ac-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--card-grid-visible); z-index: 3;
  background-image: linear-gradient(to bottom, var(--card-grid) 1px, transparent 1px); background-size: 100% var(--card-field); }
.ac-stage::after { content: ""; position: absolute; left: var(--card-pad); right: var(--card-pad); top: var(--card-pad); bottom: var(--card-pad); pointer-events: none; opacity: var(--card-grid-visible); z-index: 3;
  background-image: repeating-linear-gradient(to right, var(--card-grid-col) 0, var(--card-grid-col) var(--card-col), transparent var(--card-col), transparent calc(var(--card-col) + var(--card-gutter)));
  background-size: 100% 100%; }   /* baseline grid removed (David 2026-10-15) — fields + column guides only */

/* ── poster blocks (absolute, in rows of the 12-row grid; "bleed" blocks run over the margin) ── */
.ac-block { position: absolute; left: 0; right: 0; background: transparent; isolation: isolate; color: var(--card-field-ink);
  padding: calc(var(--card-pad) + 1cqw) 1.5cqw 1.5cqw var(--card-pad); box-sizing: border-box; overflow: hidden; z-index: 1; }
.ac-block .ac-head { font-weight: 500; line-height: .96; letter-spacing: -.02em; font-size: calc(var(--card-headline) * 2.2cqw); text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; width: calc(2 * var(--card-col) + var(--card-gutter)); }
.ac-block .ac-head small { display: block; font-size: calc(var(--card-headline) * 1.5cqw); margin-top: 1cqw; }
.ac-credits { position: absolute; right: 0; pointer-events: none; width: calc(var(--card-pad) + 2 * var(--card-col) + var(--card-gutter)); box-sizing: border-box; padding: calc(var(--card-pad) + 1cqw) var(--card-pad) 1cqw 0; overflow: hidden;
  font-family: var(--card-mono); font-size: 1.9cqw; line-height: var(--card-base); text-align: right; color: var(--card-field-ink); z-index: 2; }
.ac-credits a { pointer-events: auto; }
.ac-credits .ac-c { margin-bottom: calc(var(--card-base) / 2); border-top: 1px solid var(--card-field-ink); padding-top: calc(var(--card-base) / 4); }   /* 4 entries fit one field */
.ac-credits b { display: block; font-weight: 700; letter-spacing: .04em; font-size: 1.75cqw; text-transform: uppercase; }
.ac-strip { position: absolute; left: 0; right: 0; display: flex; z-index: 1; font-family: var(--card-mono); font-size: 1.9cqw; line-height: var(--card-base); white-space: nowrap; }
.ac-strip .ac-s-l { flex: 0 0 calc(var(--card-pad) + 3 * var(--card-col) + 2 * var(--card-gutter)); background: transparent; color: var(--card-strip-ink); position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 2cqw; padding: 0 1.5cqw 0 var(--card-pad); box-sizing: border-box; align-items: center; }
.ac-strip .ac-s-l .ac-dot { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ac-strip .ac-s-l .ac-s-a { flex: 1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.ac-strip .ac-s-l .ac-s-b { flex: 0 0 auto; }
.ac-strip .ac-s-r { flex: 1; margin-left: var(--card-gutter); color: var(--card-ink); text-align: right; position: relative; isolation: isolate; overflow: hidden; padding: 0 var(--card-pad) 0 1cqw; box-sizing: border-box; text-transform: uppercase; font-size: 1.75cqw; display: flex; align-items: center; justify-content: flex-end; }
.ac-strip .ac-s-r a { color: inherit; text-decoration: none; }
.ac-photo { position: absolute; left: 0; right: 0; background: #2a2a2a; z-index: 0; overflow: hidden; }
.ac-photo .ac-media { position: absolute; inset: 0; background: center / cover no-repeat; }
.ac-body { position: absolute; left: 0; right: 0; z-index: 1; }
.ac-photo.ac-audio, .ac-photo.ac-text { background: var(--card-dark); color: #fff; display: flex; align-items: flex-end; padding: var(--card-pad); box-sizing: border-box; font-family: var(--card-mono); font-size: 3cqw; line-height: 1.3; }
.ac-photo .ac-topo { position: absolute; left: 0; top: 18%; width: 0; height: 0; color: #fff; display: block; }   /* sized in px by Topo.draw() from the field's box */   /* ridge-line spectrum */
.ac-photo .ac-play { position: absolute; left: var(--card-pad); top: var(--card-pad); width: 16%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.ac-photo.ac-audio .ac-media, .ac-photo.ac-text .ac-media { position: static; }
.ac-photo .ac-play::after { content: ""; border-left: 1.6cqw solid var(--card-dark); border-top: 1cqw solid transparent; border-bottom: 1cqw solid transparent; margin-left: .4cqw; }
.ac-photo video, .ac-photo iframe, .ac-photo .ac-embed { width: 100%; height: 100%; display: block; border: 0; background: #000; object-fit: cover; }
/* gallery page: square thumbnails on the template columns (2 columns each → 2 per row, gutters between) */
.ac-photo.ac-grid .ac-media { left: var(--card-pad); right: var(--card-pad); top: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(2 * var(--card-col) + var(--card-gutter)); gap: var(--card-gutter); align-content: start; }
.ac-photo.ac-grid .ac-thumb { display: block; background: #333 center / cover no-repeat; aspect-ratio: 1; position: relative; }
.ac-photo.ac-grid .ac-thumb span { position: absolute; left: 1.2cqw; top: 1cqw; font-family: var(--card-mono); font-size: 2cqw; color: #fff; text-shadow: 0 0 3px #000; }
.ac-photo .ac-file { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--card-mono); font-size: 3cqw; background: var(--card-dark); color: #fff; text-align: center; padding: 8%; }
.ac-foot { position: absolute; left: var(--card-pad); right: var(--card-pad); top: calc(var(--card-foot-top) + var(--card-base)); bottom: calc(var(--card-h) - var(--card-bottom)); display: flex; align-items: flex-end; justify-content: space-between; z-index: 1; font-family: var(--card-mono); font-size: 1.9cqw; line-height: var(--card-base); }
.ac-foot .ac-mark { color: var(--card-accent); font-weight: 700; display: flex; align-items: center; gap: 1cqw; text-transform: uppercase; letter-spacing: .04em; }
.ac-foot .ac-mark i { width: 2.6cqw; height: 2.6cqw; background: var(--card-accent); display: inline-block; }
.ac-foot { z-index: 2; }
.ac-foot .ac-nr { color: var(--card-ink-soft); text-align: right; white-space: pre-line; }
.ac-foot .ac-nr b { color: var(--card-ink); font-weight: 700; }

/* TOP variant: block = field 1, strip = the margin band at the top of field 2, photo = rest of fields 2–6 (same elements move between variants, animated via top/height) */
.ac-v-top .ac-block, .ac-v-top .ac-credits { top: 0; height: var(--card-field); }
.ac-v-top .ac-strip { top: var(--card-field); height: var(--card-pad); }
.ac-v-top .ac-photo, .ac-v-top .ac-body { top: calc(var(--card-field) + var(--card-pad)); height: calc(5 * var(--card-field) - var(--card-pad)); }
/* BOTTOM variant: photo = fields 1–4 (bleeds over the top margin), strip = margin band of field 5, block = rest of fields 5–6 */
.ac-v-bottom .ac-photo, .ac-v-bottom .ac-body { top: 0; height: calc(4 * var(--card-field)); }
.ac-v-bottom .ac-strip { top: calc(4 * var(--card-field)); height: var(--card-pad); }
.ac-v-bottom .ac-block, .ac-v-bottom .ac-credits { top: calc(4 * var(--card-field) + var(--card-pad)); height: calc(2 * var(--card-field) - var(--card-pad)); padding-top: calc(2 * var(--card-base)); }
.ac-v-bottom .ac-body .ac-info-body, .ac-v-bottom .ac-body .ac-open-body { top: var(--card-pad); }
.ac-anim .ac-block, .ac-anim .ac-credits, .ac-anim .ac-strip, .ac-anim .ac-photo, .ac-anim .ac-body { transition: top .55s cubic-bezier(.65,0,.2,1), height .55s cubic-bezier(.65,0,.2,1), padding .55s; }
/* colour fills + roles: the three fields rotate accent / grey / dark; a new fill wipes in horizontally */
.ac-fill { position: absolute; inset: 0; z-index: -1; display: block; }
.ac-fill-accent { background: var(--card-accent); } .ac-fill-grey { background: var(--card-strip); } .ac-fill-dark { background: var(--card-dark); }
.ac-stage .ac-f.ac-role-accent, .ac-stage .ac-credits.ac-role-accent { color: var(--card-field-ink); }
.ac-stage .ac-f.ac-role-grey, .ac-stage .ac-credits.ac-role-grey { color: var(--card-strip-ink); }
.ac-stage .ac-f.ac-role-dark, .ac-stage .ac-credits.ac-role-dark { color: var(--card-ink); }
.ac-stage .ac-role-accent .ac-c, .ac-stage .ac-role-grey .ac-c { border-top-color: var(--card-field-ink); } .ac-stage .ac-role-dark .ac-c { border-top-color: var(--card-ink); }
.ac-stage .ac-strip .ac-s-r a, .ac-stage .ac-strip .ac-s-l a { color: inherit; }
.ac-wipe-r { animation: ac-wipe-r .5s cubic-bezier(.65,0,.2,1) both; } .ac-wipe-l { animation: ac-wipe-l .5s cubic-bezier(.65,0,.2,1) both; }
@keyframes ac-wipe-r { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ac-wipe-l { from { transform: translateX(-100%); } to { transform: none; } }
.ac-media-in { animation: ac-media-in .45s ease both; }
@keyframes ac-media-in { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ac-anim * { transition: none !important; animation: none !important; } }

/* info + open pages reuse the blocks */
.ac-info-body { position: absolute; left: var(--card-pad); right: var(--card-pad); top: 0; bottom: 0; z-index: 1; overflow: auto; font-size: 3cqw; line-height: 1.35; white-space: pre-wrap; }
.ac-info-body .ac-list { margin-top: 2cqw; border-top: 1px solid var(--card-rule); padding-top: 1cqw; font-family: var(--card-mono); font-size: 2.3cqw; line-height: 1.4; }
.ac-info-body .ac-list .ac-row { display: flex; justify-content: space-between; gap: 2cqw; border-bottom: 1px solid var(--card-grid); padding: 1% 0; }
.ac-info-body a { color: var(--card-ink); }
.ac-open-body { position: absolute; left: var(--card-pad); right: var(--card-pad); top: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3cqw; font-family: var(--card-mono); font-size: 2.6cqw; white-space: pre-line; }
.ac-open-body a.ac-btn { align-self: flex-start; font-size: 3cqw; color: var(--card-field-ink); background: var(--card-accent); text-decoration: none; padding: 2.5cqw 4cqw; text-transform: uppercase; font-weight: 700; }

.ac-dots { position: absolute; left: 0; right: 0; bottom: 1.2%; display: flex; justify-content: center; gap: 1.6cqw; pointer-events: none; z-index: 4; }
.ac-dots i { width: 1.6cqw; height: 1.6cqw; background: var(--card-ink); opacity: .25; }
.ac-dots i.on { opacity: 1; }

/* chrome on the opened card */
.ac-x, .ac-edit { position: absolute; top: 2%; width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--card-paper); border: 1px solid var(--card-ink); color: var(--card-ink); display: grid; place-items: center; cursor: pointer; font-size: 4cqw; line-height: 1; z-index: 5; }
.ac-x { right: 2%; } .ac-edit { right: 12%; }
.ac-arrow { position: absolute; top: 50%; width: 9cqw; height: 9cqw; margin-top: -4.5cqw; display: grid; place-items: center; cursor: pointer; z-index: 5; opacity: 0; transition: opacity .15s; font-size: 5cqw; color: var(--card-ink); }
.ac-card:hover .ac-arrow { opacity: .6; }
.ac-arrow.l { left: 0; } .ac-arrow.r { right: 0; }

/* edit form (overlays the card) */
.ac-form { position: absolute; inset: 0; background: var(--card-paper); color: var(--card-ink); z-index: 6; padding: var(--card-pad); box-sizing: border-box; display: flex; flex-direction: column; gap: 1.5cqw; font-family: var(--card-mono); font-size: 2.8cqw; overflow: auto; }
.ac-form label { display: flex; flex-direction: column; gap: .6cqw; color: var(--card-ink-soft); }
.ac-form input, .ac-form textarea { font: inherit; font-size: 3cqw; color: var(--card-ink); background: #000; border: 1px solid var(--card-ink); padding: 1.5cqw; border-radius: 0; }
.ac-form textarea { min-height: 18cqw; resize: vertical; }
.ac-form .ac-formbtns { display: flex; gap: 2cqw; margin-top: auto; }
.ac-form button { font: inherit; font-size: 3cqw; padding: 2cqw 3cqw; border: 1px solid var(--card-ink); background: var(--card-accent); color: var(--card-field-ink); cursor: pointer; font-weight: 700; }
.ac-form button.ac-cancel { background: transparent; color: var(--card-ink); font-weight: 400; }
.ac-form .ac-err { color: #ff6b6b; min-height: 1.2em; }
.ac-form .ac-busy { opacity: .5; pointer-events: none; }

/* full page spread (two panels), same language */
.ac-spread { background: var(--card-paper); color: var(--card-ink); font-family: var(--card-font); display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; container-type: inline-size; position: relative; }
.ac-spread::before { content: ""; position: absolute; inset: 3cqw; pointer-events: none; opacity: var(--card-grid-visible);
  background-image: linear-gradient(to right, var(--card-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--card-grid) 1px, transparent 1px); background-size: calc(100% / 12) calc(100% / 12); }
.ac-spread > div { padding: 3cqw; position: relative; }
.ac-spread .ac-sp-l { border-right: 1px dashed var(--card-ink-soft); padding-top: 0; }
.ac-spread .ac-sp-top { display: flex; margin: 0 -3cqw 2cqw -3cqw; background: var(--card-accent); color: var(--card-field-ink); }
.ac-spread .ac-sp-top .ac-sp-block { flex: 0 0 55%; background: var(--card-accent); color: var(--card-field-ink); padding: 4cqw 2cqw 2cqw 3cqw; box-sizing: border-box; }
.ac-spread .ac-sp-head { font-weight: 500; font-size: 4.2cqw; line-height: .96; letter-spacing: -.02em; text-transform: uppercase; }
.ac-spread .ac-sp-top .ac-sp-credits { flex: 1; padding: 4cqw 3cqw 2cqw 2cqw; font-family: var(--card-mono); font-size: 1.05cqw; line-height: 1.35; text-align: right; }
.ac-spread .ac-sp-top .ac-sp-credits .ac-c { border-top: 1px solid var(--card-field-ink); padding-top: .5cqw; margin-bottom: 1.2cqw; }
.ac-spread .ac-sp-top .ac-sp-credits b { display: block; text-transform: uppercase; letter-spacing: .04em; font-size: .95cqw; }
.ac-spread .ac-sp-strip { display: flex; margin: 0 -3cqw 2cqw -3cqw; font-family: var(--card-mono); font-size: 1cqw; text-transform: uppercase; }
.ac-spread .ac-sp-strip .ac-s-l { flex: 0 0 70%; background: var(--card-strip); color: var(--card-strip-ink); padding: .8cqw 1.5cqw .8cqw 3cqw; display: flex; gap: 1.5cqw; }
.ac-spread .ac-sp-strip .ac-s-r { flex: 1; text-align: right; padding: .8cqw 3cqw .8cqw 1cqw; }
.ac-spread .ac-sp-field { width: calc(100% + 6cqw); margin: 0 -3cqw; aspect-ratio: 3/4; background: #2a2a2a center / cover no-repeat; }
.ac-spread .ac-sp-field.ac-audio { aspect-ratio: 3/1; background: var(--card-dark); display: flex; align-items: center; padding: 2cqw 3cqw; box-sizing: border-box; }
.ac-spread .ac-sp-field audio { width: 100%; }
.ac-spread .ac-sp-meta { font-family: var(--card-mono); font-size: 1.1cqw; line-height: 1.5; margin-top: 2cqw; }
.ac-spread .ac-sp-meta .ac-row { display: flex; justify-content: space-between; border-top: 1px solid var(--card-rule); padding: .6cqw 0; }
.ac-spread .ac-sp-meta .ac-row:last-child { border-bottom: 1px solid var(--card-rule); }
.ac-spread .ac-sp-contour { width: 100%; aspect-ratio: 3/1; background: #1a1a1a; margin-bottom: 2cqw; position: relative; overflow: hidden; }
.ac-spread .ac-sp-contour > div { position: absolute; inset: 0; }
.ac-spread .ac-sp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.ac-spread .ac-sp-gallery figure { margin: 0; }
.ac-spread .ac-sp-gallery img, .ac-spread .ac-sp-gallery video { width: 100%; display: block; background: #000; }
.ac-spread .ac-sp-gallery iframe, .ac-spread .ac-sp-gallery .ac-embed { width: 100%; aspect-ratio: 16/10; border: 0; background: #000; grid-column: 1 / -1; }
.ac-spread .ac-sp-gallery .ac-embed iframe { aspect-ratio: auto; height: 100%; }
.ac-spread .ac-sp-gallery figcaption { font-family: var(--card-mono); font-size: 1cqw; color: var(--card-ink-soft); margin-top: .4cqw; }
.ac-spread .ac-sp-desc { font-size: 1.5cqw; line-height: 1.4; margin-top: 2cqw; white-space: pre-wrap; }
.ac-spread .ac-sp-tags { margin-top: 1.5cqw; font-family: var(--card-mono); font-size: 1.1cqw; display: flex; gap: 1.2cqw; flex-wrap: wrap; text-transform: uppercase; }
.ac-spread .ac-sp-tags i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: .4cqw; background: var(--card-ink); }
.ac-spread .ac-sp-section { margin-top: 2.5cqw; border-top: 1px solid var(--card-rule); padding-top: 1cqw; font-family: var(--card-mono); font-size: 1.1cqw; }
.ac-spread .ac-sp-section h4 { margin: 0 0 .8cqw; font: inherit; font-weight: 700; text-transform: uppercase; }
.ac-spread .ac-sp-section a { color: var(--card-ink); }
.ac-spread .ac-sp-back { position: absolute; top: 1.2cqw; right: 1.5cqw; font-family: var(--card-mono); font-size: 1.1cqw; color: var(--card-field-ink); text-decoration: none; padding: .5cqw 1cqw; background: var(--card-accent); font-weight: 700; text-transform: uppercase; z-index: 2; }
.ac-spread .ac-sp-bar { display: none; }
@media (max-width: 760px) { .ac-spread { grid-template-columns: 1fr; } .ac-spread .ac-sp-l { border-right: 0; border-bottom: 1px dashed var(--card-ink-soft); } }

/* page view as an overlay over the map (David 2026-10-14) */
.ac-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overflow: auto; padding: 3vh 3vw; box-sizing: border-box; overscroll-behavior: contain; animation: ac-ov-in .25s ease both; }
.ac-overlay .ac-spread { max-width: 1400px; margin: 0 auto; min-height: 0; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: ac-ov-up .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ac-ov-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ac-ov-up { from { transform: translateY(3vh); } to { transform: none; } }
.ac-sp-back.ac-sp-close { cursor: pointer; }
.ac-spread .ac-contour, .ac-spread .ac-contour .maplibregl-canvas { position: absolute; inset: 0; }
.ac-spread .maplibregl-ctrl-attrib { font-size: 9px; }
body.ac-overlay-open { overflow: hidden; }

/* embedded viewers: cover until tapped */
.ac-embed { position: relative; }
.ac-embed-cover { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; background: rgba(0,0,0,.25); z-index: 2; }
.ac-embed-cover span { font-family: var(--card-mono); font-size: 2.6cqw; color: var(--card-field-ink); background: var(--card-accent); padding: 1.2cqw 2cqw; text-transform: uppercase; font-weight: 700; }
.ac-spread .ac-embed-cover span { font-size: 1.1cqw; padding: .6cqw 1cqw; }

/* ── fold-out "mini website" on the map (David 2026-10-14): three 9:16 panels — Info | card | Labor.
   tri = side by side, wings unfold in 3D around the card's edges; single = one panel wide, horizontal snap scroll (mobile). ── */
.ac-fold { position: absolute; left: 0; top: 0; cursor: default; --n: 3; --cell: 32px; }
.ac-fold-scroll { display: flex; width: 100%; perspective: 1600px; }
.ac-fold.ac-single .ac-fold-scroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ac-fold.ac-single .ac-fold-scroll::-webkit-scrollbar { display: none; }
.ac-panel { flex: 0 0 calc(100% / var(--n)); min-width: 0; scroll-snap-align: start; backface-visibility: hidden; }
.ac-fold .ac-panel .ac-card { width: 100% !important; transform: none !important; position: relative !important; left: auto; top: auto; }
.ac-fold.ac-tri .ac-wing { transform-origin: 0 50%; transform: rotateY(90deg); transition: transform .8s cubic-bezier(.65,0,.2,1) .25s; }   /* leporello: each wing hinges on its left edge */
.ac-fold.ac-tri .ac-wing-b { transition-delay: .55s; }
.ac-fold.ac-tri.ac-unfolded .ac-wing { transform: none; }
.ac-fold.ac-closing .ac-wing { transition-delay: .2s; transition-duration: .5s; } .ac-fold.ac-closing .ac-wing-b { transition-delay: 0s; }
.ac-fold-nav { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; height: var(--cell); max-height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: auto; padding: 0 10px; background: rgba(0,0,0,.92); box-shadow: 0 0 0 1px rgba(255,255,255,.15);
  font-family: var(--card-mono); font-size: 11px; line-height: 1; color: #fff; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 3px rgba(0,0,0,.8); }
.ac-fold-nav .ac-fn-tabs { display: flex; gap: 4px; }
.ac-fold-nav .ac-fn-tabs span { opacity: .5; cursor: pointer; padding: 3px 6px; }
.ac-fold-nav .ac-fn-tabs span.on { opacity: 1; background: var(--card-accent); color: var(--card-field-ink); text-shadow: none; }
.ac-fold.ac-tri .ac-fn-tabs span { cursor: default; }
.ac-fold-nav .ac-fn-arrow { cursor: pointer; font-size: 20px; padding: 0 6px; }
.ac-fold.ac-tri .ac-fn-arrow { display: none; }
.ac-fold-nav .ac-fn-x { cursor: pointer; margin-left: 10px; background: #fff; color: #111; padding: 3px 8px; font-weight: 700; text-shadow: none; }
/* wing content */
.ac-fold-info { font-size: 3cqw; }
.ac-fold-info .ac-inat-body { margin-top: 1.5cqw; font-size: 2cqw; line-height: 1.3; }
.ac-fold-media img, .ac-fold-media video { width: 100%; display: block; background: #000; }
.ac-fold-media .ac-fm { margin: 0 0 3cqw; }
.ac-fold-media figcaption { font-family: var(--card-mono); font-size: 2.3cqw; line-height: 1.35; color: var(--card-ink-soft); margin-top: 1cqw; white-space: normal; }
.ac-fold-media .ac-fm-empty { font-family: var(--card-mono); font-size: 2.6cqw; color: var(--card-ink-soft); }
.ac-fold-media .ac-fm-file { display: block; background: var(--card-accent); color: var(--card-field-ink); padding: 3cqw; font-family: var(--card-mono); font-size: 2.6cqw; text-decoration: none; }
.ac-fold-media .ac-embed { width: 100%; aspect-ratio: 16 / 10; }
.ac-fold-media .ac-embed iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.ac-fold-media .ac-contour { position: relative; width: 100%; aspect-ratio: 3 / 2; background: #ececec; margin-bottom: 3cqw; overflow: hidden; }
.ac-fold-media .ac-contour .maplibregl-canvas-container, .ac-fold-media .ac-contour .maplibregl-canvas { position: absolute; inset: 0; }
.ac-fold-media .ac-contour .maplibregl-ctrl-attrib { font-size: 8px; }
@media (prefers-reduced-motion: reduce) { .ac-fold .ac-panel { transition: none !important; } }
.ac-splat-btn { display: inline-block; margin-top: 2cqw; padding: 1.5cqw 2.5cqw; background: #fff; color: #111; font-family: var(--card-mono); font-size: 2.4cqw; text-decoration: none; text-transform: uppercase; font-weight: 700; cursor: pointer; }
.ac-fm-splat { font-family: var(--card-mono); font-size: 2.6cqw; line-height: 1.5; }
/* wing panels: no title block; strip in the top margin band, body from there to the footer zone */
.ac-stage.ac-v-plain .ac-block, .ac-stage.ac-v-plain .ac-credits { display: none; }
.ac-stage.ac-v-plain .ac-strip { top: var(--card-pad); height: var(--card-pad); }
.ac-stage.ac-v-plain .ac-photo, .ac-stage.ac-v-plain .ac-body { top: calc(2 * var(--card-pad)); height: calc(var(--card-foot-top) - 2 * var(--card-pad)); }
.ac-stage.ac-v-plain .ac-body .ac-info-body { top: var(--card-base); }
.ac-audio-page .ac-list { margin-top: 0; border-top: 0; }
.ac-audio-page .ac-list .ac-row b { font-weight: 700; }
.ac-audio-page a.ac-btn.ac-dl { display: inline-block; margin-top: 4cqw; font-size: 3cqw; color: var(--card-field-ink); background: var(--card-accent); text-decoration: none; padding: 2.5cqw 4cqw; text-transform: uppercase; font-weight: 700; font-family: var(--card-mono); }