/* Willemskantine: 12-column grid, one gutter, three type sizes. */
:root {
  --bg: #fff;
  --fg: #000;
  --mute: #8a8a8a;
  --rule: #e2e2e2;
  --tile: #f3f3f3;
  --m: 20px;      /* page margin */
  --g: 20px;      /* gutter */
  --s: 12px;      /* small text */
  --b: 15px;      /* body text */
  --xl: clamp(40px, 7.2vw, 112px); /* display */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (max-width: 720px) { :root { --m: 14px; --g: 14px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--b)/1.4 var(--font); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mute); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2 { font-weight: 500; letter-spacing: -.035em; line-height: .95; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--fg); color: var(--bg); }

/* The grid: every row on every page uses it */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); }
.label, .more, .note, .idx, .credits, .c-n, .thead, .foot, .top, figcaption { font-size: var(--s); line-height: 1.35; }
.label { grid-column: 1 / 4; color: var(--mute); }
.span-all { grid-column: 1 / -1; }
.span-content { grid-column: 4 / -1; }
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .label { grid-column: 1 / 3; }
  .span-content { grid-column: 1 / -1; }
}

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.mark { grid-column: 1 / 4; font-weight: 700; }
.place { grid-column: 4 / 7; color: var(--mute); }
.clocks { display: flex; gap: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clocks b { font-weight: 400; color: var(--fg, #000); margin-left: 6px; }
.top nav { grid-column: 7 / -1; display: grid; grid-template-columns: subgrid; }
.top nav { display: flex; justify-content: space-between; gap: 16px; }
.top nav a { white-space: nowrap; }
@media (max-width: 1200px) { .clocks { gap: 12px; } .clocks b { margin-left: 4px; } }
@media (max-width: 960px) and (min-width: 721px) { .clocks span + span { display: none; } .top nav { display: flex; justify-content: space-between; gap: 16px; } }
@media (max-width: 900px) and (min-width: 721px) { .clocks { display: none; } .top nav { grid-column: 4 / -1; } }   /* six menu links need the room */
.top nav a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
.menu { display: none; }
@media (max-width: 720px) {
  .mark { grid-column: 1 / 3; } .place { display: none; }
  .menu { display: block; grid-column: 3 / -1; justify-self: end; }
  .top nav { display: none; grid-column: 1 / -1; grid-template-columns: 1fr; padding-top: 14px; }
  .top nav a:nth-child(n) { grid-column: 1 / -1; text-align: left; }
  .top nav.open { display: grid; }
  .top nav a { padding: 8px 0; border-top: 1px solid var(--rule); font-size: var(--b); }
}

/* Vertical rhythm: every section has the same spacing and a hairline on top */
.block, .phead, .intro, .proj { padding-top: var(--g); padding-bottom: calc(var(--g) * 4); border-top: 1px solid var(--rule); row-gap: var(--g); }
main > :first-child { border-top: 0; }
.more { grid-column: 4 / -1; justify-self: start; }
@media (max-width: 720px) { .more { grid-column: 3 / -1; } }

/* Page heads */
.phead, .intro { padding-top: calc(var(--g) * 3); align-items: start; }
.phead .label, .intro .label { padding-top: .9em; }
.phead h1, .intro h1 { grid-column: 4 / -1; font-size: var(--xl); }
.phead .note { grid-column: 4 / -1; color: var(--mute); }
.intro h1 { font-size: clamp(30px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -.03em; max-width: 20ch; }
.intro .label { padding-top: .45em; }
@media (max-width: 720px) { .phead h1, .intro h1, .phead .note { grid-column: 1 / -1; } }

/* Home */
.hero { padding-bottom: calc(var(--g) * 4); }
.hero-img { grid-column: 4 / -1; }
.hero-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tile); }
@media (max-width: 720px) { .hero-img { grid-column: 1 / -1; } }

/* Table (film index) */
.table { border-top: 1px solid var(--fg); }
.row { padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.thead { color: var(--mute); }
.c-n { grid-column: 1 / 4; } .c-t { grid-column: 4 / 7; } .c-a { grid-column: 7 / 10; } .c-k { grid-column: 10 / 13; }
.c-a, .c-k { color: var(--mute); } .thead span { color: var(--mute); }
.table a.row:hover span { color: var(--fg); } .table a.row:hover { background: var(--tile); }
@media (max-width: 720px) { .thead { display: none; } .c-n { grid-column: 1 / 2; } .c-t { grid-column: 2 / -1; } .c-a { grid-column: 2 / -1; } .c-k { grid-column: 2 / -1; } }

/* Image tiles: equal cells, images contained and bottom-aligned, so every row lines up */
.tiles { display: grid; gap: calc(var(--g) * 2) var(--g); }
.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t6 { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--g); }
.span-content.t4, .body .t4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .t6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .t4, .span-content.t4, .body .t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cell { display: block; cursor: zoom-in; }
.frame { display: flex; align-items: flex-end; justify-content: flex-start; aspect-ratio: 4 / 5; overflow: hidden; }
.t6 .frame { aspect-ratio: 1; }
.frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: var(--tile); transition: opacity .2s; }
.cell:hover img { opacity: .85; }
.idx { display: block; margin-top: 6px; color: var(--mute); }

.empty { grid-column: 4 / -1; color: var(--mute); padding: calc(var(--g) * 4) 0; }
@media (max-width: 720px) { .empty { grid-column: 1 / -1; } }
.library-home[hidden], .empty[hidden] { display: none; }

/* Justified rows (Digital Library) */
.jgrid { display: flex; flex-direction: column; row-gap: 6px; column-gap: 6px; }
.jrow { display: flex; gap: 6px; }
.jrow .cell { min-width: 0; height: 100%; overflow: hidden; background: var(--tile); }
.jrow .cell .frame { display: block; aspect-ratio: auto; width: 100%; height: 100%; }
.jrow .cell img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
@media (max-width: 720px) { .jgrid, .jrow { row-gap: 4px; column-gap: 4px; gap: 4px; } }

/* Directing */
.toc { grid-column: 4 / -1; columns: 2; column-gap: var(--g); }
.toc a { display: grid; grid-template-columns: 3em 1fr; padding: 6px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.toc span { color: var(--mute); }
@media (max-width: 720px) { .toc { grid-column: 1 / -1; columns: 1; } }
.proj { scroll-margin-top: 50px; align-items: start; }
.meta { grid-column: 1 / 4; position: sticky; top: 64px; }
.meta .n { font-size: var(--s); color: var(--mute); margin-bottom: 8px; }
.meta h2 { font-size: 28px; letter-spacing: -.025em; line-height: 1.05; }
.meta .a { margin-top: 6px; }
.meta .k { color: var(--mute); }
.credits { margin-top: var(--g); border-top: 1px solid var(--rule); }
.credits li { padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--mute); }
.credits.press li a { color: var(--fg); }
.body { grid-column: 4 / -1; display: grid; row-gap: var(--g); }
.summary { max-width: 52ch; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
@media (max-width: 720px) { .meta { grid-column: 1 / -1; position: static; } .body { grid-column: 1 / -1; } }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--tile); overflow: hidden; cursor: pointer; }
.video img { width: 100%; height: 100%; object-fit: cover; }
.video button { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: var(--bg); font-size: var(--s); }
.video:hover button { background: var(--fg); color: var(--bg); }
.vfig figcaption { margin-top: 6px; gap: var(--g); align-items: baseline; }
.vfig figcaption a { white-space: nowrap; }
.vfig figcaption span { color: var(--fg); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* About */
.prose { grid-column: 4 / 10; display: grid; row-gap: 1em; max-width: 62ch; }
.prose .lead { font-size: 28px; line-height: 1.12; letter-spacing: -.025em; margin-bottom: .4em; }
.press { grid-column: 10 / -1; }
.press .frame { aspect-ratio: auto; display: block; }
.press .frame img { width: 100%; max-height: none; }
figcaption { display: flex; justify-content: space-between; margin-top: 6px; color: var(--mute); }
figcaption a { color: var(--fg); }
.list { grid-column: 4 / -1; columns: 4; column-gap: var(--g); }
.list li { padding: 6px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
/* the address always stays on one line: the size follows the column width (text is ~11.2× its font size wide) */
.mail { grid-column: 4 / -1; font-size: min(var(--xl), calc((100vw - 2 * var(--m) - 30px) * .75 / 11.8)); letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
@media (max-width: 1000px) { .prose { grid-column: 4 / -1; } .press { grid-column: 4 / 9; } .list { columns: 3; } }
@media (max-width: 720px) { .prose, .press, .list, .mail { grid-column: 1 / -1; } .list { columns: 2; } .mail { font-size: calc((100vw - 2 * var(--m) - 12px) / 11.8); } }

/* Footer */
.foot { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--rule); row-gap: 6px; }
.foot .c1 { grid-column: 1 / 4; } .foot .c2 { grid-column: 4 / 7; } .foot .c4 { grid-column: 10 / -1; text-align: right; }
@media (max-width: 720px) { .foot .c1 { grid-column: 1 / 3; } .foot .c2, .foot .c4 { grid-column: 3 / -1; text-align: right; } }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; grid-template-columns: auto auto auto 1fr auto; grid-template-rows: auto 1fr; column-gap: var(--g); row-gap: var(--g); padding: 14px var(--m) var(--m); font-size: var(--s); }
.lb[hidden] { display: none; }
.lb-c { color: var(--mute); }
.lb-x { grid-column: 5; justify-self: end; }
.lb-d { grid-column: 4; justify-self: end; text-decoration: underline; text-underline-offset: 3px; }
.lb img { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: center; max-width: 100%; max-height: calc(100svh - 70px); width: auto; object-fit: contain; cursor: zoom-out; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Upload page */
.form { grid-column: 4 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g); }
.form input[type=password] { font: inherit; font-size: 17px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--fg); background: none; color: var(--fg); min-width: 0; flex: 0 1 320px; border-radius: 0; outline: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; background: var(--fg); color: var(--bg); font-size: var(--b); cursor: pointer; border-radius: 0; }
.btn:hover { color: var(--bg); opacity: .85; }
.btn.big { padding: 18px 36px; font-size: 17px; }
.link { text-decoration: underline; text-underline-offset: 3px; font-size: var(--s); color: var(--fg); }
.msg { flex-basis: 100%; color: var(--mute); font-size: var(--s); }
.queue { border-top: 1px solid var(--rule); }
.queue:empty { display: none; }
.q { padding: 8px 0; border-bottom: 1px solid var(--rule); align-items: center; font-size: var(--s); }
.q-img { grid-column: 4 / 5; aspect-ratio: 1; background: var(--tile) center / cover no-repeat; }
.q-name { grid-column: 5 / 10; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-state { grid-column: 10 / -1; text-align: right; color: var(--mute); }
.q.ok .q-state { color: var(--fg); }
.q.err .q-state, .q.err .q-state .link { color: #c00; }
.manage .cell-m { display: block; }
.manage .del { margin-top: 6px; }
@media (max-width: 720px) {
  .form { grid-column: 1 / -1; }
  .q-img { grid-column: 1 / 2; } .q-name { grid-column: 2 / 4; } .q-state { grid-column: 4 / 5; }
}

/* ---- Digital Library: welcome + login */
.welcome { min-height: calc(100svh - 50px); align-content: start; padding-top: var(--g); padding-bottom: calc(var(--g) * 3); row-gap: var(--g); }
.welcome-text { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--g); padding-top: calc(var(--g) * 2); }
.welcome-text .label { color: var(--mute); }
/* sized so the longest word (MOODBOARD, ~6.3× its font size) fits the text column */
.welcome h1 { font-size: min(150px, calc((100vw - 2 * var(--m)) * .40 / 6.6)); line-height: .88; letter-spacing: -.045em; font-weight: 700; text-transform: uppercase; }
.welcome .lead { max-width: 30ch; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
.login { display: flex; border-bottom: 2px solid var(--fg); max-width: 420px; margin-top: calc(var(--g) * .5); }
.login input { flex: 1; min-width: 0; width: 0; font: inherit; font-size: 20px; border: 0; padding: 12px 0; background: none; outline: none; }
.login button { font-size: 20px; padding: 12px 0 12px 16px; font-weight: 700; }
.login button:hover { color: var(--mute); }
.login-msg { min-height: 1.4em; color: var(--mute); font-size: var(--s); }
.login-help { color: var(--mute); font-size: var(--s); margin-top: auto; }
.login-help a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.welcome-wall { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-self: start; }
.welcome-wall .w { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tile); }
.welcome-wall img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); animation: wk-in .9s ease forwards; }
.welcome-wall .w2 img { animation-delay: .08s } .welcome-wall .w3 img { animation-delay: .16s } .welcome-wall .w4 img { animation-delay: .24s }
.welcome-wall .w5 img { animation-delay: .32s } .welcome-wall .w6 img { animation-delay: .4s } .welcome-wall .w7 img { animation-delay: .48s }
.welcome-wall .w8 img { animation-delay: .56s } .welcome-wall .w9 img { animation-delay: .64s }
@keyframes wk-in { to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .welcome-text { grid-column: 1 / 7; } .welcome h1 { font-size: calc((100vw - 2 * var(--m)) * .48 / 6.6); } .welcome-wall { grid-column: 7 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .welcome-wall .w9 { display: none; } }
@media (max-width: 720px) {
  .welcome { min-height: 0; }
  .welcome-text, .welcome-wall { grid-column: 1 / -1; }
  .welcome h1 { font-size: calc((100vw - 2 * var(--m)) / 6.6); }
  .welcome-text { padding-top: var(--g); }
  .welcome-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; order: -1; }
  .welcome-wall .w9 { display: block; }
}

/* ---- Digital Library: picking images */
.phead .note .sep { color: var(--rule); }
.linkish { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--fg); }
.cell.lib { position: relative; cursor: default; }
.cell.lib .open { display: block; height: 100%; cursor: zoom-in; }
.pick { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--fg); font-size: 20px; line-height: 30px; text-align: center; opacity: 0; transition: opacity .15s, transform .15s; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.pick::before { content: '+'; }
.cell.lib:hover .pick, .pick:focus-visible { opacity: 1; }
.pick:hover { transform: scale(1.08); }
.picked .pick { opacity: 1; background: var(--fg); color: var(--bg); font-size: 15px; }
.picked .pick::before { content: '✓'; }
.picked::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--fg); pointer-events: none; }
@media (hover: none) { .pick { opacity: 1; } }

/* ---- Deck bar (bottom) and deck panel */
body.has-deck { padding-bottom: 76px; }
.deckbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--bg); border-top: 1px solid var(--fg); padding-top: 12px; padding-bottom: 12px; align-items: center; }
.deckbar.bump { animation: wk-bump .35s ease; }
@keyframes wk-bump { 40% { transform: translateY(-4px); } }
.deck-name { grid-column: 1 / 4; text-align: left; display: flex; flex-direction: column; font-size: var(--s); min-width: 0; }
.deck-name b { font-size: var(--b); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-name span { color: var(--mute); }
.deck-strip { grid-column: 4 / 10; display: flex; gap: 4px; height: 44px; overflow: hidden; }
.deck-strip img { height: 44px; width: auto; flex: none; background: var(--tile); }
.deck-actions { grid-column: 10 / -1; display: flex; justify-content: flex-end; gap: 16px; align-items: center; white-space: nowrap; }
.primary { background: var(--fg); color: var(--bg); padding: 10px 16px; font-weight: 700; }
.primary:hover { background: #333; color: var(--bg); }
.primary:disabled { background: var(--rule); color: var(--mute); cursor: default; }
@media (max-width: 720px) {
  .deck-name { grid-column: 1 / 3; } .deck-strip { display: none; } .deck-actions { grid-column: 3 / -1; gap: 12px; }
  .deck-actions #deck-open { display: none; }
}

.deckpanel { position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow-y: auto; padding-bottom: calc(var(--g) * 3); }
.dp-head { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.dp-head .label { color: var(--mute); font-size: var(--s); }
.dp-title { grid-column: 4 / 11; font: inherit; font-size: clamp(28px, 3.6vw, 56px); letter-spacing: -.03em; font-weight: 700; border: 0; border-bottom: 1px solid transparent; padding: 0; background: none; outline: none; min-width: 0; }
.dp-title:hover, .dp-title:focus { border-bottom-color: var(--rule); }
.dp-close { grid-column: 11 / -1; justify-self: end; font-size: var(--s); }
.dp-tools { padding-top: 14px; padding-bottom: 14px; font-size: var(--s); color: var(--mute); align-items: center; }
.dp-switch { grid-column: 1 / 7; display: flex; gap: 10px; align-items: center; }
.dp-switch select { font: inherit; color: var(--fg); border: 1px solid var(--rule); padding: 4px 6px; background: var(--bg); max-width: 60vw; }
.dp-count { grid-column: 7 / 9; }
.dp-buttons { grid-column: 9 / -1; display: flex; justify-content: flex-end; gap: 16px; }
.dp-buttons button { text-decoration: underline; text-underline-offset: 3px; }
.dp-buttons button:hover { color: var(--fg); }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 0 var(--m); }
.dp-grid figure { position: relative; margin: 0; aspect-ratio: 4 / 5; background: var(--tile); }
.dp-grid img { width: 100%; height: 100%; object-fit: cover; }
.dp-remove { position: absolute; top: 6px; right: 6px; background: rgba(255, 255, 255, .94); font-size: var(--s); padding: 4px 8px; opacity: 0; transition: opacity .15s; }
.dp-grid figure:hover .dp-remove, .dp-remove:focus-visible { opacity: 1; }
@media (hover: none) { .dp-remove { opacity: 1; } }
.dp-empty { grid-column: 1 / -1; color: var(--mute); padding: calc(var(--g) * 2) 0; }
.dp-send { margin-top: calc(var(--g) * 2); padding-top: var(--g); border-top: 1px solid var(--rule); row-gap: var(--g); }
.dp-send .label { color: var(--mute); }
.dp-fields { grid-column: 4 / 10; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dp-fields input, .dp-fields textarea { font: inherit; border: 0; border-bottom: 1px solid var(--fg); padding: 10px 0; background: none; outline: none; border-radius: 0; }
.dp-fields input[name=company], .dp-fields textarea, .dp-fields .primary, .dp-msg { grid-column: 1 / -1; }
.dp-fields textarea { resize: vertical; }
.dp-fields .primary { justify-self: start; margin-top: 8px; }
.dp-msg { color: var(--mute); font-size: var(--s); min-height: 1.4em; }
.dp-msg a { color: var(--fg); text-decoration: underline; }
@media (max-width: 720px) {
  .dp-title { grid-column: 1 / 4; } .dp-close { grid-column: 4 / -1; } .dp-head .label { display: none; }
  .dp-switch, .dp-count, .dp-buttons { grid-column: 1 / -1; } .dp-buttons { justify-content: flex-start; }
  .dp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .dp-fields { grid-column: 1 / -1; grid-template-columns: 1fr; }
}
.dv-note { grid-column: 4 / 10; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; white-space: pre-line; margin-bottom: var(--g); }
@media (max-width: 720px) { .dv-note { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .welcome-wall img { animation: none; opacity: 1; transform: none; } }

/* ---- Client Portal */
.door { min-height: calc(100svh - 50px); align-content: start; padding-top: var(--g); padding-bottom: calc(var(--g) * 3); }
.door-text { grid-column: 4 / 11; display: flex; flex-direction: column; gap: var(--g); padding-top: calc(var(--g) * 2); }
.door-text .label { color: var(--mute); }
.door h1 { font-size: clamp(52px, 8.4vw, 150px); line-height: .88; letter-spacing: -.045em; font-weight: 700; text-transform: uppercase; }
.door .lead { max-width: 34ch; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
#room-code { text-transform: uppercase; letter-spacing: .08em; }
#room-code::placeholder { text-transform: none; letter-spacing: 0; }
.login-help .sep { color: var(--rule); margin: 0 4px; }
@media (max-width: 720px) { .door { min-height: 0; } .door-text { grid-column: 1 / -1; } }

.room-note { grid-column: 4 / 10; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; white-space: pre-line; }
.files { grid-column: 1 / -1; border-top: 1px solid var(--fg); }
.files.span-content { grid-column: 4 / -1; }
.file { padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; padding-left: 0; padding-right: 0; }
.f-kind { grid-column: 1 / 2; color: var(--mute); font-size: var(--s); }
.f-name { grid-column: 2 / 8; overflow-wrap: anywhere; }
.f-size { grid-column: 8 / 9; color: var(--mute); }
.f-date { grid-column: 9 / 11; color: var(--mute); }
.f-act { grid-column: 11 / -1; display: flex; justify-content: flex-end; gap: 16px; }
.f-act button, .room-link { text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.f-act .del { color: var(--mute); }
.files.span-content .f-kind { grid-column: 1 / 2; } .files.span-content .f-name { grid-column: 2 / 6; } .files.span-content .f-size { grid-column: 6 / 7; }
.files.span-content .f-date { grid-column: 7 / 9; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .files.span-content .f-act { grid-column: 9 / -1; }
.files.span-content .file { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.room-all { grid-column: 1 / -1; margin-top: var(--g); }
@media (max-width: 720px) {
  .room-note { grid-column: 1 / -1; }
  .files.span-content { grid-column: 1 / -1; }
  .file, .files.span-content .file { grid-template-columns: 1fr auto; row-gap: 2px; }
  .file > span { grid-column: auto !important; }
  .f-kind { display: none; } .f-name { grid-column: 1 / -1 !important; } .f-date { display: none; }
  .file .f-size { grid-column: 1 !important; grid-row: 2; } .file .f-act { grid-column: 2 !important; grid-row: 2; }
  .files.span-content .f-date { display: block; grid-column: 1 / -1 !important; }
}

.new-room { grid-column: 4 / -1; display: grid; grid-template-columns: 2fr 3fr auto; gap: 12px; align-items: end; margin-bottom: calc(var(--g) * 2); }
.new-room input, .room-admin textarea { font: inherit; border: 0; border-bottom: 1px solid var(--fg); padding: 10px 0; background: none; outline: none; border-radius: 0; min-width: 0; }
.room-admin { grid-column: 4 / -1; display: flex; flex-direction: column; gap: var(--g); }
.room-admin .dp-title { width: 100%; }
.room-admin textarea { resize: vertical; }
.ra-code { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; color: var(--mute); font-size: var(--s); }
.ra-code b { color: var(--fg); font-size: var(--b); letter-spacing: .06em; margin-left: 6px; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 160px; border: 1px dashed var(--fg); cursor: pointer; text-align: center; padding: var(--g); transition: background .15s; }
.drop:hover, .drop.over { background: var(--tile); }
.drop b { font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; }
.drop span { color: var(--mute); font-size: var(--s); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.queue { display: flex; flex-direction: column; }
.pq { display: grid; grid-template-columns: minmax(0, 1fr) auto 160px 90px; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--s); }
.pq-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--b); }
.pq-size, .pq-state { color: var(--mute); text-align: right; }
.pq-bar { height: 3px; background: var(--rule); overflow: hidden; }
.pq-bar i { display: block; height: 100%; width: 0; background: var(--fg); transition: width .2s; }
.pq.ok .pq-state { color: var(--fg); } .pq.err .pq-state { color: #c00; }
.pq.err { grid-template-columns: minmax(0, 1fr) auto; } .pq.err .pq-bar { display: none; } .pq.err .pq-state { grid-column: 1 / -1; text-align: left; }
@media (max-width: 720px) {
  .new-room, .room-admin { grid-column: 1 / -1; } .new-room { grid-template-columns: 1fr; }
  .pq { grid-template-columns: minmax(0, 1fr) auto; } .pq-bar { grid-column: 1 / -1; }
}
.door h1 .door-sub { display: block; font-size: .42em; line-height: 1; letter-spacing: -.03em; margin-top: .25em; }

/* ---- Shop: 15 things, each linking to the shop that sells it */
.shop-door { min-height: 0; padding-bottom: calc(var(--g) * 2); }
.shop-door .lead { max-width: none; }
@media (min-width: 721px) { .shop-door .door-text { grid-column: 4 / -1; } .shop-door .lead { white-space: nowrap; } }
.shop { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--g) * 1.5) var(--g); list-style: none; margin: 0; padding: 0; }
.item a { display: block; color: inherit; }
.item-img { display: block; aspect-ratio: 4 / 5; background: var(--tile); overflow: hidden; margin-bottom: 10px; }
.item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.item a:hover .item-img img { transform: scale(1.03); }
.item a:hover { color: inherit; }
.item-n { font-size: var(--s); color: var(--mute); }
.item-name { font-weight: 700; margin-top: 2px; }
.item-meta { color: var(--mute); }
.item-shop { margin-top: 6px; font-size: var(--s); text-decoration: underline; text-underline-offset: 3px; }
.item a:hover .item-shop { color: var(--mute); }
.item.soon .item-name { color: var(--mute); font-weight: 400; }
.item.soon .item-img { background: repeating-linear-gradient(135deg, var(--tile) 0 10px, #ececec 10px 20px); }
@media (max-width: 1000px) { .shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g) 10px; } }

/* ---- Digital Library: filters and search */
.lfilters { row-gap: 12px; padding-bottom: var(--g); }
.lf-search { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--fg); padding-bottom: 8px; margin-bottom: 6px; }
.lf-search input { flex: 1; min-width: 0; font: inherit; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.01em; border: 0; outline: 0; background: none; color: var(--fg); padding: 4px 0; }
.lf-search input::placeholder { color: var(--mute); }
.lf-search input::-webkit-search-cancel-button { display: none; }
.lf-found { color: var(--mute); white-space: nowrap; }
.lf-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lf-gap { width: 14px; }
.chip { border: 1px solid var(--rule); padding: 5px 10px 6px; line-height: 1; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.chip .n { color: var(--mute); margin-left: 6px; font-size: var(--s); }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip[aria-pressed="true"] .n { color: var(--bg); opacity: .6; }
.chip:disabled { opacity: .3; cursor: default; border-color: var(--rule); }
.chip.swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.chip.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }
.sw-red { background: #c7302b !important; } .sw-orange { background: #e5762b !important; } .sw-yellow { background: #e8c53a !important; }
.sw-green { background: #4e8a4a !important; } .sw-blue { background: #2f5fa8 !important; } .sw-purple { background: #6f4a9a !important; }
.sw-pink { background: #e58fb0 !important; } .sw-brown { background: #8a5a3a !important; } .sw-black { background: #111 !important; } .sw-white { background: #fff !important; }
.lgrid { padding-top: 0; }
@media (max-width: 720px) {
  .lf-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--m) * -1); padding: 0 var(--m) 4px; scrollbar-width: none; }
  .lf-row::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

/* ---- About: small contact form under the address */
.cform { grid-column: 4 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; gap: 6px 16px; max-width: 520px; margin-top: calc(var(--g) * 1.5); font-size: var(--s); }
.cform input, .cform textarea { font: inherit; color: var(--fg); background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 8px 0; outline: 0; border-radius: 0; resize: vertical; width: 100%; min-width: 0; box-sizing: border-box; }
.cform input:focus, .cform textarea:focus { border-color: var(--fg); }
.cform input::placeholder, .cform textarea::placeholder { color: var(--mute); }
.cform textarea { grid-column: 1 / -1; min-height: 64px; }
.cform button { justify-self: start; border-bottom: 1px solid var(--fg); padding: 4px 0; margin-top: 6px; }
.cform button:hover { color: var(--mute); border-color: var(--mute); }
.cform button:disabled { color: var(--mute); border-color: var(--rule); cursor: default; }
.cform-msg { grid-column: 1 / -1; color: var(--mute); min-height: 1.4em; }
@media (max-width: 720px) { .cform { grid-column: 1 / -1; } }

/* ---- About: names with a small card (hover on desktop, tap on touch).
   The cards in the list are only the text source; one floating box (#who-pop) shows them, outside the
   columns, so a column break can never split a card. */
.who-name { text-align: left; cursor: default; }
.who-name:hover, .who.open .who-name { color: var(--mute); }
.who-card { display: none; }
.who-pop { position: absolute; z-index: 40; width: 260px; max-width: calc(100vw - 2 * var(--m));
  display: grid; gap: 6px; padding: 12px 14px; background: var(--bg); color: var(--fg); border: 1px solid var(--fg);
  font-size: var(--s); line-height: 1.4; animation: who-in .15s ease; }
.who-pop[hidden] { display: none; }
.who-pop b { font-weight: 400; color: var(--mute); }
.who-pop a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.who-pop a:hover { color: var(--mute); }
@keyframes who-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---- Client Portal: italic in the menu, and the whole page goes black while you're in it */
.top nav a.nav-gpt { font-style: italic; }
.top nav a.nav-portal { font-weight: 700; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body.page-client-portal { --bg: #000; --fg: #fff; --mute: #8f8f8f; --rule: #2b2b2b; --tile: #141414; color-scheme: dark; }
body.page-client-portal ::selection { background: #fff; color: #000; }
body.page-client-portal input, body.page-client-portal textarea { color: var(--fg); }

/* waiting music + urgent assistance */
.portal-bar { position: fixed; z-index: 30; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; }
.portal-bar button, .portal-bar a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; color: var(--fg); font-size: var(--s); letter-spacing: .02em; white-space: nowrap; border: 1px solid var(--rule); }
.portal-bar button:hover, .portal-bar a:hover { border-color: var(--fg); color: var(--fg); }
.portal-bar a[hidden], .portal-bar[hidden], #radio-box[hidden], body.in-room #radio-box { display: none; }
.portal-bar #urgent { background: #fff; color: #000; border-color: #fff; }
.portal-bar #urgent:hover { background: #ff3b30; border-color: #ff3b30; color: #fff; }
.pb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
#wait-music[aria-pressed="true"] .pb-dot { background: #ff3b30; animation: pb-pulse 1.6s ease-in-out infinite; }
@keyframes pb-pulse { 50% { opacity: .25; } }
body.page-client-portal main { padding-bottom: 80px; }
@media (prefers-reduced-motion: reduce) { #wait-music[aria-pressed="true"] .pb-dot { animation: none; } }
body.page-client-portal .primary:hover { background: #cfcfcf; color: #000; }

/* looping clips (former GIFs) sit in the grid and lightbox like images */
.frame video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: var(--tile); display: block; }
.lb .lb-vid { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: center; max-width: 100%; max-height: calc(100svh - 70px); width: auto; cursor: zoom-out; }
.lb .lb-vid[hidden], .lb img[hidden] { display: none; }

/* ---- stay.html: the email sits in the door text column */
.stay-door .door-text { grid-column: 4 / -1; }
.stay-door .mail { grid-column: auto; margin-top: calc(var(--g) * .5); }
@media (max-width: 720px) { .stay-door .door-text { grid-column: 1 / -1; } }

/* ---- Landing: dimmed wall of images, black door in the middle */
.page-landing { background: #000; overflow: hidden; }
.landing { position: fixed; inset: 0; overflow: hidden; background: #000; }
.wall { --rh: clamp(60px, 9vh, 140px); display: flex; flex-wrap: wrap; height: 100%; overflow: hidden; }
.wall img { height: var(--rh); width: 0; flex: var(--ar) 0 calc(var(--ar) * var(--rh)); object-fit: cover; filter: brightness(.5); transition: filter .5s; }
.wall img:hover, .wall img.lit { filter: brightness(1); transition-duration: .15s; }
.enter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(180px, 22vw, 260px); aspect-ratio: 5 / 3; background: #000; display: flex; align-items: center; justify-content: center; gap: .35em; font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.enter .horse { display: inline-block; }

/* ---- Client Portal: hotel image right under "Check-in to download", exactly as wide as that line */
.portal-head { width: fit-content; max-width: 100%; }
.portal-img { width: 0; min-width: 100%; margin: calc(var(--g) * .9) 0 0; }
.portal-img img { display: block; width: 100%; height: auto; }
/* the hotel, the hotel by night, the concierge: 3 seconds each, crossfading in the same frame, round and round */
.portal-img { position: relative; }
.portal-img .portal-img-2, .portal-img .portal-img-3 { position: absolute; inset: 0; height: 100%; opacity: 0; animation: 9s ease-in-out infinite; }
.portal-img .portal-img-2 { animation-name: hotel-2; }
.portal-img .portal-img-3 { animation-name: hotel-3; }
@keyframes hotel-2 { 0%, 27.8% { opacity: 0; } 33.3%, 72% { opacity: 1; } 72.1%, 100% { opacity: 0; } }
@keyframes hotel-3 { 0%, 61.1% { opacity: 0; } 66.6%, 94.4% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .portal-img .portal-img-2, .portal-img .portal-img-3 { animation-timing-function: steps(1); } }
/* Portal door fits one screen: File Hotel keeps its size; "Check-in to download" (and the image, which is
   exactly as wide as that line) scales with the screen height */
.page-client-portal #portal-door { min-height: 0; padding-bottom: 110px; }
.portal-sub { font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: -.03em;
  font-size: clamp(18px, min(3.5vw, (100svh - 540px - .88 * clamp(52px, 8.4vw, 150px)) / 9.4), 64px); }
@media (max-width: 720px) { .portal-sub { font-size: clamp(20px, 5.7vw, 40px); } }

/* ---- Page headings in the Shop style (all pages except the Digital Library) */
.page-door { min-height: 0; padding-bottom: calc(var(--g) * 2); }
.page-door .lead { max-width: none; }
.page-door h1 { overflow-wrap: anywhere; }
.page-door .lead .sep { color: var(--mute); }
.page-door .lead .linkish { font: inherit; text-decoration: underline; text-underline-offset: .15em; }
@media (min-width: 721px) { .page-door .door-text { grid-column: 4 / -1; } }
@media (max-width: 720px) { .page-door .door-text { grid-column: 1 / -1; } }
/* Keep the scrollbar space reserved, so pages don't shift sideways when one scrolls and the next doesn't */
html { scrollbar-gutter: stable; }
html:has(body.page-client-portal) { background: #000; }

/* ---- Digital Library welcome in the Shop style: heading, a row of switching images, then the login */
.lib-door .lead { max-width: 44ch; }
.lib-door .welcome-wall { grid-column: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: calc(var(--g) * .2) 0 calc(var(--g) * .4); }
.lib-door .welcome-wall .w7, .lib-door .welcome-wall .w8, .lib-door .welcome-wall .w9 { display: none; }
@media (max-width: 720px) { .lib-door .welcome-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; order: 0; } }
.item-nolink { display: block; cursor: default; }

/* Client Portal: Spotify player for the waiting music, just above the bar */
.wait-player { position: fixed; z-index: 30; left: 50%; bottom: 76px; transform: translateX(-50%); width: min(420px, calc(100vw - 2 * var(--m))); border-radius: 12px; overflow: hidden; }
.wait-player[hidden] { display: none; }
.wait-player iframe { display: block; }
.wait-yt { width: min(320px, calc(100vw - 2 * var(--m))); aspect-ratio: 16 / 9; background: #000; }
/* Landing door. Hover: the door stands ajar with a sliver of light. Click (driven from index.html):
   the door swings open on its hinge, the rider goes through the light, and the page fades over into Still Image. */
.enter .dw { position: relative; display: inline-block; perspective: 320px; }
.enter .light { position: absolute; inset: 8% 22% 6% 22%; background: #fff; box-shadow: 0 0 22px 6px rgba(255, 255, 255, .5); opacity: 0; transition: opacity .3s; }
.enter .door-e { position: relative; display: inline-block; transform-origin: 20% 50%; transition: transform .5s cubic-bezier(.3, .6, .3, 1); backface-visibility: visible; }
.enter:hover .door-e { transform: rotateY(-24deg); }
.enter:hover .light { opacity: .6; }
.enter .horse { transition: transform .3s cubic-bezier(.6, 0, .9, .4) .14s, filter .3s .14s, opacity .3s .14s; }
.enter.opening .door-e { transform: rotateY(-82deg); transition-duration: .4s; }
.enter.opening .light { opacity: 1; transition-duration: .15s; }
.enter.opening .horse { transform: translateX(-1.1em) scale(.85); filter: blur(2px); opacity: 0; }
/* with the cursor on it the horse starts running: a quick gallop on the spot */
.enter:hover:not(.opening) .horse { animation: gallop .32s linear infinite; transform-origin: 50% 90%; }
@keyframes gallop {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-1px, -5px) rotate(-7deg); }
  50% { transform: translate(-2px, -1px) rotate(1deg); }
  75% { transform: translate(-1px, -3px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .enter:hover .horse { animation: none; } }
.landing { transition: opacity .35s ease; }
.landing.fading { opacity: 0; }
.page-landing { background: #fff; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: ease; }
/* Films stored with the site fill the 16:9 frame (cropped to fit, no bars), like the YouTube covers */
.video.native video { object-fit: cover; background: #000; }
/* Project stills (Moving Image): justified rows that fill the column; a stacked pair shares one slot */
.jrows { display: flex; flex-direction: column; gap: var(--g); }
.jr { display: flex; gap: var(--g); }
.jr > .cell, .jr > .stack { flex: var(--ar) 1 0; min-width: 0; aspect-ratio: var(--ar); }
.jr .stack { display: flex; flex-direction: column; gap: var(--g); }
.jr .stack > .cell { flex: 1 1 0; min-height: 0; }
.jrows .frame { display: block; aspect-ratio: auto; width: 100%; height: 100%; }
.jrows .frame img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
@media (max-width: 720px) { .jrows, .jr, .jr .stack { gap: 8px; } }

/* ---- WKGPT chat */

/* ---- WK Radio: crate button (bottom left), station wheel, small Spotify player */
.radio-box { position: fixed; z-index: 45; left: var(--m); bottom: var(--m); width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); transition: transform .2s; }
.radio-box:hover { transform: translateY(-2px) rotate(-6deg); }
.radio-pp { position: fixed; z-index: 45; left: calc(var(--m) + 35px); bottom: calc(var(--m) + 10px); width: 20px; height: 20px; padding: 3px; color: #000; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); transition: transform .15s, opacity .15s; }
.radio-pp svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.radio-pp:hover { transform: scale(1.12); }
.radio-pp .pp-pause, .radio-pp.is-playing .pp-play { display: none; }
.radio-pp.is-playing .pp-pause { display: inline; }
.radio-pp[hidden], body.in-room .radio-pp { display: none; }
body.has-deck .radio-pp { bottom: calc(var(--m) + 74px); }
body.page-client-portal .radio-pp { color: #fff; }
@keyframes rw-pulse { 50% { opacity: .35; } }
.radio-wheel { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: transparent; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); color: var(--fg); }
.radio-wheel[hidden] { display: none; }
@keyframes rw-in { from { opacity: 0; } }
.rw-ring { --r: min(36vh, 39vw, 300px); position: relative; width: calc(var(--r) * 2.25); aspect-ratio: 1; }
.rw-st { --s: min(clamp(52px, 7vmin, 76px), calc(var(--r) * .21)); position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform: translate(calc(var(--x) * var(--r)), calc(var(--y) * var(--r))); border-radius: 50%; background: var(--c, #222); color: #fff; border: 2px solid rgba(255, 255, 255, .55); text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  display: grid; place-items: center; text-align: center; font-size: clamp(9px, 1.15vmin, 12px); font-weight: 700; letter-spacing: .02em; line-height: 1.05; text-transform: uppercase; transition: transform .15s, border-color .15s, background .15s; }
.rw-st span { padding: 0 6px; }
.rw-st.focus, .rw-st:focus-visible { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); transform: translate(calc(var(--x) * var(--r)), calc(var(--y) * var(--r))) scale(1.12); outline: none; }
.rw-st.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 0 0 4px rgba(0, 0, 0, .14); }
.rw-off { background: #111; }
.rw-off { display: grid; place-items: center; color: #fff; }
.rw-off svg { display: block; width: 42%; height: 42%; }
.rw-empty { pointer-events: none; }
.rw-center { position: absolute; text-align: center; max-width: min(56vw, 360px); pointer-events: none; text-shadow: 0 0 10px var(--bg), 0 0 4px var(--bg); }
.rw-label { font-size: var(--s); opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
.rw-name { font-size: clamp(22px, 3vmin, 34px); font-weight: 700; }
.rw-nav { display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: auto; }
.rw-line { margin-top: 6px; font-size: clamp(14px, 1.6vmin, 17px); opacity: .9; }
.rw-prev, .rw-next { font-size: clamp(22px, 3vmin, 34px); font-weight: 700; line-height: 1; padding: 2px 6px; color: inherit; opacity: .75; }
.rw-prev:hover, .rw-next:hover { opacity: 1; }
.radio-box.waiting { animation: rw-glow 1.2s ease-in-out infinite; }
@keyframes rw-glow { 50% { filter: drop-shadow(0 0 8px #3ddc84); transform: scale(1.08); } }
body.radio-open { overflow: hidden; }
/* Wheel open: the dots fade and bounce in one by one, clockwise; close: they shrink away counter-clockwise */
.rw-st { opacity: 0; scale: 0; transition: border-color .15s, background .15s, transform .2s, box-shadow .2s; }
.radio-wheel.shown .rw-st { animation: rw-pop .5s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
.radio-wheel.closing .rw-st { animation: rw-out .28s ease-in both; animation-delay: calc(var(--ri, 0) * 14ms); }
@keyframes rw-pop {
  0% { opacity: 0; scale: .2; rotate: -25deg; }
  55% { opacity: 1; scale: 1.22; rotate: 6deg; }
  75% { scale: .92; rotate: -2deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes rw-out {
  0% { opacity: 1; scale: 1; }
  35% { opacity: 1; scale: 1.15; }
  100% { opacity: 0; scale: 0; }
}
.radio-wheel { transition: backdrop-filter .4s, -webkit-backdrop-filter .4s; }
.radio-wheel:not(.shown) { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
.rw-center { opacity: 0; translate: 0 6px; transition: opacity .5s, translate .5s; }
.radio-wheel.shown .rw-center { opacity: 1; translate: 0 0; transition-delay: .2s; }
.radio-wheel.closing .rw-center { transition-delay: 0s; transition-duration: .25s; }
@media (prefers-reduced-motion: reduce) { .radio-wheel.shown .rw-st { animation: none; opacity: 1; scale: 1; } .radio-wheel.closing .rw-st { animation: none; } .rw-center { transition: none; } }

/* Library login: email, plus a name field when requesting access */
.login input[hidden] { display: none; }
.login #client-name { margin-right: 12px; flex: .7; }
@media (max-width: 560px) { .login:has(#client-name:not([hidden])) { flex-wrap: wrap; } .login:has(#client-name:not([hidden])) input { flex-basis: 100%; width: auto; } .login #client-name { margin-right: 0; border-bottom: 1px solid var(--rule); } }
.acc-list { list-style: none; padding: 0; margin: 0; }
.acc-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.acc-list small { color: var(--mute); }
.acc-req { background: color-mix(in srgb, var(--fg) 4%, transparent); padding-inline: 8px !important; }
.acc-add { display: flex; gap: 12px; }
.acc-add input { flex: 1; min-width: 0; }
.radio-wheel .rw-ring { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Typed text is always readable, whatever the device's dark mode or autofill does */
input, textarea, select { color: var(--fg); -webkit-text-fill-color: var(--fg); caret-color: var(--fg); }
input::placeholder, textarea::placeholder { color: var(--mute); -webkit-text-fill-color: var(--mute); opacity: 1; }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--fg); -webkit-box-shadow: 0 0 0 100px var(--bg) inset; transition: background-color 9999s; }
/* Client Portal: email on the first line, the code and Open on the line below */
.login-stack { flex-wrap: wrap; }
.login-stack #room-email { flex-basis: 100%; width: auto; border-bottom: 1px solid var(--rule); }
.login-stack #room-code { flex: 1 1 60%; width: auto; }   /* its own line under the email, with Open next to it */



/* Digital Library: logging in peels the welcome away like a sheet of paper (site.js, peel) */
.peel-shade { z-index: 41; pointer-events: none; filter: drop-shadow(-6px 8px 10px rgba(0, 0, 0, .22)); }
.peel-flap { position: absolute; inset: 0; background: linear-gradient(225deg, #ffffff 0%, #efefec 45%, #dcdcd8 100%); }
body.has-deck .radio-box { bottom: calc(var(--m) + 64px); }
.welcome-wall .w { background-size: cover; background-position: center; }
.welcome-wall img.gust { opacity: 1; transform: none; animation: wall-gust .2s ease-out; }
@keyframes wall-gust { from { opacity: 0; } }

/* WKGPT: chat with the studio agent, as a text message thread */
/* the whole page fits the window: only the message thread scrolls, inside the chat */
html:has(body.page-wkgpt) { scrollbar-gutter: auto; overflow: hidden; }
body.page-wkgpt .foot { display: none; }   /* no footer here: the chat fills the window, the radio box sits in the corner */
body.page-wkgpt { height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
body.page-wkgpt main { flex: 1; min-height: 0; display: flex; padding-bottom: 0; }
.wk { flex: 1; min-height: 0; padding-top: 20px; padding-bottom: 14px; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
.wk-chat { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 560px; min-height: 0; max-height: 760px; display: flex; flex-direction: column; border: 1px solid #e5e5ea; border-radius: 28px; background: #fff; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .25); --sms: #34c759; --gray: #e9e9eb; }
.wk-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f7f7f8; border-bottom: 1px solid #e5e5ea; }
.wk-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #222; }
.wk-who { font-size: 16px; font-weight: 600; }
.wk-log { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 26px 10px; overflow-y: auto; overflow-x: hidden; }
.wk-time { align-self: center; margin: 2px 0 10px; font-size: 12px; color: #8e8e93; }
.wk-msg { position: relative; max-width: 75%; padding: 8px 14px 9px; border-radius: 19px; font-size: 16px; line-height: 1.32; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 6px; }
.wk-msg::before, .wk-msg::after { content: ''; position: absolute; bottom: 0; height: 20px; }
.wk-bot { align-self: flex-start; background: var(--gray); color: #000; }
.wk-bot::before { left: -7px; width: 20px; background: var(--gray); border-bottom-right-radius: 16px 14px; }
.wk-bot::after { left: -26px; width: 26px; background: #fff; border-bottom-right-radius: 10px; }
.wk-me { align-self: flex-end; background: var(--sms); color: #fff; }
.wk-me::before { right: -7px; width: 20px; background: var(--sms); border-bottom-left-radius: 16px 14px; }
.wk-me::after { right: -26px; width: 26px; background: #fff; border-bottom-left-radius: 10px; }
.wk-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wk-receipt { align-self: flex-end; margin: -2px 4px 6px 0; font-size: 11px; color: #8e8e93; font-weight: 500; }
.wk-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.wk-dots i { width: 8px; height: 8px; border-radius: 50%; background: #8e8e93; animation: wk-type 1.2s ease-in-out infinite; }
.wk-dots i:nth-child(2) { animation-delay: .15s; } .wk-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wk-type { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.wk-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 0 18px 10px; }
.wk-chips[hidden] { display: none; }
.wk-chips button { padding: 7px 13px; border: 1px solid var(--sms); border-radius: 999px; font-size: 14px; color: #1f9d45; background: #fff; transition: background .15s, color .15s; }
.wk-chips button:hover { background: var(--sms); color: #fff; }
.wk-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 12px; padding: 4px 4px 4px 14px; border: 1px solid #d1d1d6; border-radius: 22px; background: #fff; }
.wk-form:focus-within { border-color: #aeaeb2; }
.wk-form textarea { flex: 1; border: 0; resize: none; font: inherit; font-size: 16px; line-height: 1.3; padding: 7px 0; background: transparent; color: #000; outline: none; max-height: 180px; }
.wk-form button { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sms); color: #fff; transition: opacity .15s, transform .15s; }
.wk-form button svg { width: 18px; height: 18px; }
.wk-form button:hover { transform: scale(1.06); }
.wk-form.busy button { opacity: .35; }
.wk-note { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 560px; margin-top: 10px; text-align: center; color: var(--mute); font-size: var(--s); }
@media (max-width: 720px) { .wk-msg { max-width: 85%; } .wk { padding-bottom: 66px; } }   /* room for the radio box under the chat */
/* opening the page, like switching on an old TV: a dot in the middle pulls out into a line, the picture opens slowly
   up and down from it, overexposed and soft at first, flickers once or twice, and settles */
.wk-chat { position: relative; animation: wk-open 2.1s cubic-bezier(.6, 0, .25, 1) backwards, wk-tube 2.1s linear backwards; }
.wk-chat::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #000; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .35); pointer-events: none; z-index: 2; opacity: 0; animation: wk-line 2.1s ease backwards; }
@keyframes wk-open {
  0%, 6% { clip-path: inset(calc(50% - 1px) calc(50% - 2px) calc(50% - 1px) calc(50% - 2px)); transform: scaleY(1); }
  27%, 30% { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); transform: scaleY(1); }
  78% { clip-path: inset(-80px -80px -80px -80px round 28px); transform: scaleY(1.025); }
  100% { clip-path: inset(-80px -80px -80px -80px round 28px); transform: scaleY(1); }
}
@keyframes wk-tube {
  0%, 30% { filter: brightness(1.15) contrast(.6) blur(1.5px); }
  62% { filter: brightness(1.1) contrast(.8) blur(1px); }
  74% { filter: brightness(1.25) contrast(.9) blur(.4px); opacity: 1; }
  78% { opacity: .55; } 81% { opacity: 1; } 85% { opacity: .8; } 88% { opacity: 1; }
  100% { filter: none; opacity: 1; }
}
@keyframes wk-line { 0% { opacity: 1; transform: scaleX(.006); } 6% { opacity: 1; transform: scaleX(.006); } 27% { opacity: 1; transform: scaleX(1); } 48% { opacity: 0; transform: scaleX(1); } 100% { opacity: 0; } }
.wk-chat::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px); animation: wk-scan 2.1s ease backwards; }
@keyframes wk-scan { 0%, 28% { opacity: 1; } 70% { opacity: .7; } 100% { opacity: 0; } }
.wk-note { animation: wk-note .6s ease 1.9s backwards; }
@keyframes wk-note { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wk-dots i, .wk-chat, .wk-chat::before, .wk-chat::after, .wk-note { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inbox-item span { line-height: 1.5; overflow-wrap: anywhere; }
.inbox-item a { text-decoration: underline; text-underline-offset: 3px; }