/* The Market — films. The four 30-second films live in the page rather than taking a section each:
   a lightbox with chapters, inline chapter-synced players, chips beside section headings, a hero
   preview and a dock that follows the reader. Tokens come from tm.css; fallbacks keep it standalone. */
:root{--tmf-ap:var(--apricot,#b06f24);--tmf-aps:var(--apricot-soft,#d99a4e);--tmf-ink:var(--ink,#22262f);
  --tmf-chrome:var(--chrome,#12151d);--tmf-line:var(--line,#e8e1d2);--tmf-soft:var(--chrome-soft,#93a3b8)}

/* ── chip beside a section heading ── */
.tmf-chip{display:inline-flex;align-items:center;gap:12px;margin:14px 0 4px;padding:6px 16px 6px 6px;border-radius:999px;
  background:#fff;border:1px solid var(--tmf-line);font:600 14px/1 'DM Sans',system-ui,sans-serif;color:var(--tmf-ink);
  cursor:pointer;text-decoration:none;box-shadow:0 6px 18px -10px rgba(18,21,29,.35);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s}
.tmf-chip:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 28px -12px rgba(18,21,29,.45)}
.tmf-chip .th{position:relative;width:54px;height:36px;border-radius:999px;background:#12151d center/cover;overflow:hidden;flex:none}
.tmf-chip .th::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-style:solid;
  border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.tmf-chip .th::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(217,154,78,.7);animation:tmf-ping 2.4s infinite}
.tmf-chip small{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--tmf-ap);text-transform:uppercase}
.tmf-chip .go{margin-left:6px;padding-left:12px;border-left:1px solid var(--tmf-line);color:var(--tmf-ap);white-space:nowrap}
.tmf-chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@keyframes tmf-ping{0%{box-shadow:0 0 0 0 rgba(217,154,78,.6)}70%{box-shadow:0 0 0 10px rgba(217,154,78,0)}100%{box-shadow:0 0 0 0 rgba(217,154,78,0)}}
.dark .tmf-chip,.tmf-on-dark .tmf-chip{background:#1b2029;border-color:#262c3a;color:#ece7db}

/* ── hero preview card (home) ── */
.tmf-hero{position:absolute;right:28px;bottom:28px;z-index:40;width:340px;border-radius:16px;overflow:hidden;background:#12151d;
  box-shadow:0 30px 60px -20px rgba(18,21,29,.6);cursor:pointer;transform:translateY(20px) scale(.96);opacity:0;
  animation:tmf-in .9s cubic-bezier(.2,1.3,.4,1) .6s forwards;border:1px solid rgba(255,255,255,.08)}
.tmf-hero video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.tmf-hero .tmf-cap{display:flex;align-items:center;gap:10px;padding:12px 14px;color:#ece7db;font:600 14px 'DM Sans',sans-serif}
.tmf-hero .tmf-cap b{margin-left:auto;font:500 12px 'JetBrains Mono',monospace;color:var(--tmf-aps)}
.tmf-hero .pl{width:30px;height:30px;border-radius:50%;background:var(--tmf-ap);display:grid;place-items:center;flex:none}
.tmf-hero .pl::after{content:'';border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;margin-left:2px}
.tmf-hero:hover .pl{transform:scale(1.12)}.tmf-hero .pl{transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
@keyframes tmf-in{to{transform:none;opacity:1}}
@media(max-width:760px){.tmf-hero{right:12px;bottom:12px;width:190px}.tmf-hero .tmf-cap{font-size:12px;padding:8px 10px}.tmf-hero .tmf-cap b{display:none}}

/* ── the dock ── */
.tmf-dock{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;
  background:#12151d;color:#ece7db;border-radius:999px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);cursor:pointer;
  font:600 14px 'DM Sans',sans-serif;transform:translateY(140%);transition:transform .5s cubic-bezier(.2,1.3,.4,1);max-width:calc(100vw - 36px)}
.tmf-dock.on{transform:none}
.tmf-dock .th{width:58px;height:36px;border-radius:999px;background:center/cover;flex:none;position:relative}
.tmf-dock .th::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.tmf-dock small{display:block;font:500 11px 'JetBrains Mono',monospace;color:var(--tmf-aps);letter-spacing:.08em}
.tmf-dock .x{margin-left:6px;width:26px;height:26px;border-radius:50%;border:0;background:#262c3a;color:#93a3b8;cursor:pointer;font-size:15px;line-height:26px}
.tmf-dock .txt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tmf-dock .swap{animation:tmf-swap .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes tmf-swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── lightbox ── */
.tmf-dlg{border:0;padding:0;background:transparent;max-width:min(1180px,96vw);width:100%;overflow:visible}
.tmf-dlg::backdrop{background:rgba(8,10,14,.86);backdrop-filter:blur(6px)}
.tmf-dlg[open]{animation:tmf-pop .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes tmf-pop{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:none}}
.tmf-box{background:#12151d;border-radius:18px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8);color:#ece7db}
.tmf-stage{position:relative;background:#000}
.tmf-stage video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.tmf-big{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.tmf-big span{width:84px;height:84px;border-radius:50%;background:var(--tmf-ap);display:grid;place-items:center;box-shadow:0 12px 40px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.tmf-big span::after{content:'';border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff;margin-left:6px}
.tmf-big:hover span{transform:scale(1.1)}
.tmf-bar{display:flex;align-items:center;gap:14px;padding:14px 18px 6px}
.tmf-bar button{border:0;background:#1b2029;color:#ece7db;height:36px;min-width:36px;border-radius:10px;cursor:pointer;font:600 13px 'DM Sans',sans-serif;padding:0 10px}
.tmf-bar button:hover{background:#262c3a}
.tmf-time{font:500 12px 'JetBrains Mono',monospace;color:var(--tmf-soft);min-width:86px}
.tmf-track{position:relative;flex:1;height:30px;cursor:pointer}
.tmf-track .tmf-rail{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:#262c3a}
.tmf-track .fill{position:absolute;left:0;top:13px;height:4px;border-radius:2px;background:var(--tmf-aps);width:0}
.tmf-track .tick{position:absolute;top:8px;width:2px;height:14px;background:#4a5366;border-radius:1px}
.tmf-track .knob{position:absolute;top:7px;width:16px;height:16px;border-radius:50%;background:#fff;margin-left:-8px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tmf-chaps{display:flex;flex-wrap:wrap;gap:8px;padding:6px 18px 16px}
.tmf-chaps button{border:1px solid #262c3a;background:transparent;color:#b9c1cf;border-radius:999px;padding:7px 14px;cursor:pointer;
  font:500 13px 'DM Sans',sans-serif;transition:all .2s}
.tmf-chaps button b{font:500 11px 'JetBrains Mono',monospace;color:var(--tmf-soft);margin-right:6px}
.tmf-chaps button.on{background:var(--tmf-ap);border-color:var(--tmf-ap);color:#fff}.tmf-chaps button.on b{color:#fde8cc}
.tmf-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #1f242f}
.tmf-head h3{margin:0;font:700 20px 'Playfair Display',Georgia,serif;color:#fff}
.tmf-head a{margin-left:auto;color:var(--tmf-aps);font:600 14px 'DM Sans',sans-serif;text-decoration:none}
.tmf-head .close{margin-left:12px;width:36px;height:36px;border-radius:50%;border:0;background:#1b2029;color:#ece7db;font-size:20px;cursor:pointer}
.tmf-head a + .close{margin-left:12px}
.tmf-more{display:none;gap:10px;padding:0 18px 18px}.tmf-more.on{display:flex;flex-wrap:wrap}
.tmf-more button{display:flex;align-items:center;gap:10px;border:1px solid #262c3a;background:#161a24;color:#ece7db;border-radius:12px;padding:6px 14px 6px 6px;cursor:pointer;font:600 14px 'DM Sans',sans-serif}
.tmf-more .th{width:64px;height:36px;border-radius:8px;background:center/cover}

/* ── inline chapter-synced player (component pages) ── */
.tmf-player{position:relative;border-radius:18px;overflow:hidden;background:#12151d;box-shadow:0 40px 80px -30px rgba(18,21,29,.55)}
.tmf-player video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#12151d}
.tmf-player .ctl{position:absolute;right:12px;top:12px;display:flex;gap:8px}
.tmf-player .ctl button{border:0;height:34px;padding:0 12px;border-radius:999px;background:rgba(18,21,29,.72);color:#fff;cursor:pointer;
  font:600 13px 'DM Sans',sans-serif;backdrop-filter:blur(4px)}
.tmf-player .ctl button:hover{background:var(--tmf-ap)}
.tmf-stories{display:flex;gap:6px;padding:12px 14px 14px;background:#12151d}
.tmf-stories button{flex:1;border:0;background:transparent;padding:0;cursor:pointer;text-align:left;color:#93a3b8;min-width:0}
.tmf-stories .pb{display:block;height:4px;border-radius:2px;background:#262c3a;overflow:hidden;margin-bottom:8px}
.tmf-stories .pb i{display:block;height:100%;width:0;background:var(--tmf-aps)}
.tmf-stories span{display:block;font:600 12px 'DM Sans',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmf-stories button.on span{color:#fff}
@media(max-width:760px){.tmf-stories span{display:none}}
@media(prefers-reduced-motion:reduce){.tmf-hero,.tmf-dlg[open],.tmf-dock{animation:none;transition:none}.tmf-chip .th::before{animation:none}}

.tmf-big[hidden],.tmf-dlg [hidden]{display:none!important}

.tmf-hero .tt{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.tmf-hero .tt small{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#93a3b8;text-transform:uppercase}
.tmf-hero:hover{transform:translateY(-3px)}.tmf-hero{transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
@media(max-width:760px){.tmf-hero .tt small{display:none}}
.tmf-bar .tmf-fs{white-space:nowrap}
@media(max-width:760px){.tmf-bar{flex-wrap:wrap;gap:10px}.tmf-track{flex-basis:100%;order:5}.tmf-bar .tmf-fs{margin-left:auto;background:var(--tmf-ap)}}
.tmf-hero.tmf-inline{position:relative;right:auto;bottom:auto;width:100%;margin-top:18px;transform:none;opacity:1;animation:none}
.tmf-hero.tmf-inline .tt small{display:block}

/* 27 Sep (later): the hero film lives in the lower-right corner of the map; the overlays that share it step aside */
.tmf-hero.tmf-corner{right:28px;bottom:28px;width:340px}
.tmf-hero .tmf-enl{position:absolute;right:10px;top:10px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(18,21,29,.72);color:#fff;
  font:600 12px 'DM Sans',sans-serif;backdrop-filter:blur(4px);opacity:.85;transition:opacity .2s,background .2s}
.tmf-hero:hover .tmf-enl{opacity:1;background:var(--tmf-ap)}
.tmf-hero.tmf-corner:hover{transform:translateY(-4px) scale(1.03)}
.tmf-hero.tmf-corner{transform-origin:100% 100%}
@media(min-width:1181px){
  .fold.tmf-has-hero .cap,.fold.tmf-has-hero .synthbar,.fold.tmf-has-hero .zoom{right:392px}
}
@media(min-width:961px) and (max-width:1180px){
  .tmf-hero.tmf-corner{width:270px}
  .fold.tmf-has-hero .synthbar{right:314px}   /* beside the card on the bottom line; the copy column ends above it */
  .fold.tmf-has-hero .cap,.fold.tmf-has-hero .zoom{display:none}
}
.tmf-hero.tmf-inline .tmf-enl{display:none}