/* ================================================================
   NIGHT SCHEME, SITE-WIDE LAYER (operator, 2026-11-04): the four colours on every page. Loaded last on every front-end page (inc/tcn-mockup-skin.php).
   #5ce1e6 turquoise, #0c101b dark navy, #f8f3ff light purple, #fefdff boxes. This file owns what every page shares: the colour tokens, the scratched picture
   behind the page, the header and the footer. scheme-night.css (front page only) restyles the front page's own sections on top of it.
   The !important rules (header surface, access button, footer surface, copy line) exist only because mockup.css sets those with !important.
   ================================================================ */
:root {
  --n-navy: #0c101b; --n-navy2: #131827; --n-aqua: #5ce1e6; --n-aqua2: #8aeef1; --n-lav: #f8f3ff; --n-box: #fefdff; --n-ink: #0a0f1a; --n-steel: #566074; --n-mute: #9aa6b8; --n-soft: #d6dde8; --n-line: #d8d3ee;
  --n-display: "Dela Gothic One", "Impact", "Arial Narrow Bold", sans-serif;
  --n-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  /* the base tokens every page reads: surfaces become the box colour and the light purple, the navy becomes the dark navy */
  --navy: #0c101b; --navy-2: #131827; --navy-3: #1a2033; --teal: #5ce1e6;
  --paper: #fefdff; --paper-2: #f8f3ff; --panel: #fefdff; --panel-2: #f8f3ff;
  /* BLOCKS (operator, 2026-11-05): the main block is C, a SOLID dark navy with a 4px bar of the department's colour along its top (--n-block-bar); some sections are B, a crisp light block with ink text
     (.ed #ed-media, #ed-contact, #ed-departments, #ed-channels; a department page's feed posts). A card inside either is light purple (--n-glass-2) or white. */
  --n-glass: linear-gradient(135deg, rgba(26, 35, 60, .66) 0%, rgba(13, 18, 31, .54) 55%, rgba(14, 40, 50, .62) 100%); --n-glass-2: #ffffff; --n-glass-edge: transparent;   /* navy GLASS: see-through, blurred; the white and purple cards inside stay solid */
  --n-glass-bright: rgba(243, 240, 250, .97); --n-glass-bright-edge: #d8d3ee;
  --n-glass-shadow: 0 22px 54px -30px rgba(0, 0, 0, .85);
}
/* the picture behind the page: dark navy with a fine starfield (img/night-bg-current.webp is the one in use: swap that file and bump ?v= to change the background; earlier ones kept as night-bg-bill / -stars / -texture.webp).
   tcn-base.css resets `body::before, body::after { background: none !important }` site-wide, so this layer says !important too */
html body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url("img/night-bg-current.webp?v=5") center / cover no-repeat var(--n-navy) !important; }
html body { background: transparent !important; }

/* ---------- header: transparent on the background, light text, aqua button; once the page scrolls it becomes dark glass so nothing collides with what passes under it ---------- */
html body header.site-header.tm-header.tm-header { background: transparent !important; border-bottom: 1px solid transparent; box-shadow: none; transition: background .25s, border-color .25s; }
html body header.site-header.tm-header.site-header--scrolled { background: rgba(12, 16, 27, .72) !important; border-bottom: 1px solid rgba(92, 225, 230, .28); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: none; }
html body .tm-header .tm-logo-mark, html body .tm-header .tm-logo-mark span { color: #fff; }
html body .tm-header .tm-logo-img { filter: brightness(0) invert(1); }   /* the logo is a dark image (mockup.css makes it black); on the transparent header it is white */
html body .tm-tag { color: var(--n-mute); font-family: var(--n-mono); letter-spacing: .14em; }
html body .tm-header .nav-hamburger span { background: #fff; }
html body .tm-header .tcn-cart-toggle { color: #fff; }
html body .tm-header .main-access-btn.tm-access { background: var(--n-aqua) !important; color: var(--n-ink) !important; border: 2px solid var(--n-aqua) !important; border-radius: 999px !important; }
html body .tm-header .main-access-btn.tm-access:hover { background: var(--n-aqua2) !important; border-color: var(--n-aqua2) !important; color: var(--n-ink) !important; }
@media (min-width: 769px) {
  html body .tm-header .main-nav .nav-link { color: #fff; }
  html body .tm-header .main-nav .nav-link:hover, html body .tm-header .main-nav .nav-link.active { color: var(--n-aqua); }
  html body .tm-header .main-nav .nav-link::after { height: 3px; background: var(--n-aqua); }
}
html body .tm-header .main-nav .nav-menu { background: var(--n-box); }
html body .tcn-bottom-nav { background: rgba(254, 253, 255, .98) !important; }

/* ---------- footer: dark, aqua on hover ---------- */
html body .tm-footer { background: var(--n-navy2) !important; border-top: 1px solid rgba(92, 225, 230, .28); color: var(--n-soft); --ink: #fff; --muted: var(--n-soft); --faint: var(--n-mute); --line: rgba(255, 255, 255, .14); }
html body .tm-footer .footer-links-col h4 { color: #fff; font-family: var(--n-mono); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
html body .tm-footer .footer-links-col a { color: var(--n-soft); }
html body .tm-footer .footer-links-col a:hover { color: var(--n-aqua); }
html body .tm-footer .footer-links-col .tm-social a { border-color: rgba(255, 255, 255, .28); color: #fff; }
html body .tm-footer .tm-logo-mark, html body .tm-footer .tm-logo-mark span { color: #fff; }
html body .tm-footer .tm-copy { color: var(--n-mute) !important; }

/* ---------- editorial pages (departments, channels, a channel's own page): ONE continuous box, like the shop ---------- */
/* the page wrapper is the box; its sections run inside it edge to edge, a thin line between them */
html body main.ed {
  width: min(100% - 32px, 1240px); margin: calc(var(--header-h, 64px) + 28px) auto 28px; color: #fff;   /* no outer box: the page is its sections, straight on the background */
}
/* a channel's own page is a fixed layer that scrolls inside itself (editorial.css): it becomes a centred, scrolling box between the nav and the bottom of the screen.
   It must keep overflow-y: auto, or the wheel scrolls the page behind it and the section tabs (scrollIntoView) have nothing to move. */
html body div.ed.ed--screen {
  position: fixed; inset: calc(var(--header-h, 64px) + 28px) 0 28px 0; width: min(100% - 32px, 1240px); height: auto; margin: 0 auto; z-index: 1900;
  color: #fff; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
/* the layer used to cover the whole screen, hiding the page under it; now the picture shows around it, so what is under it is clear and the site footer (the layer has its own) is hidden */
html body .ch-layout.chs-on { background: transparent !important; }
html body:has(div.ed.ed--screen) .site-footer { display: none; }

/* BLOCKS: every piece of an editorial page is one bright-glass block, a sibling of the others, straight on the background. If it is not a block it is not on the page. */
html body .ed > header.ed-hero, html body .ed > section, html body .ed > footer.ed-foot {
  width: auto; margin: 0 0 16px; border: 0 !important; border-radius: 22px; box-shadow: var(--n-glass-shadow);
  background: linear-gradient(var(--dc, var(--c, var(--k, #5ce1e6))), var(--dc, var(--c, var(--k, #5ce1e6)))) top / 100% 4px no-repeat, var(--n-glass) !important; color: #fff; overflow: clip;
}

/* ---------- every other page: the page itself is one #fefdff box on the picture ---------- */
/* shop, gain access, pricing, a department's own page, products, cart...: the content wrapper becomes the box (editorial pages above box their own sections instead; My Account's own card and a department page's own glass panel are their box) */
html body:not(.home) #primary:not(:has(.ed)):not(:has(.pg--account)):not(:has(.dp)) {
  width: min(100% - 32px, 1240px); margin: calc(var(--header-h, 64px) + 24px) auto 24px; background: var(--n-glass-bright); color: var(--n-ink);
  border: 2px solid var(--n-glass-bright-edge); border-radius: 16px; box-shadow: var(--n-glass-shadow); overflow: clip;
}

/* ---------- My Account: the card is the box, so the page behind it is clear and the picture shows ---------- */
html body main.pg.pg--account { background: transparent; }

/* ---------- the button family (every page): 48px pill, ink outline; the dark variant is the aqua primary. The front page restyles it on its dark picture (scheme-night.css) ---------- */
html body .tm-btn { min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--n-ink); background: var(--n-box); color: var(--n-ink); font: 800 14px/1 var(--dp-sans); white-space: nowrap; }
html body .tm-btn:hover { border-color: var(--n-aqua); background: var(--n-lav); color: var(--n-ink); box-shadow: none; transform: none; }
html body .tm-btn--dark { background: var(--n-aqua); border-color: var(--n-aqua); color: var(--n-ink); }
html body .tm-btn--dark:hover { background: var(--n-aqua2); border-color: var(--n-aqua2); }
html body .tm-btn--sm { min-height: 44px; padding: 0 20px; font-size: 13px; }
html body .tm-btn:focus-visible, html body .tm-dept:focus-visible { outline: 3px solid var(--n-aqua); outline-offset: 3px; }
html body .ed-hero .ed-back { margin-bottom: 16px; }
html body .ed-hero .ed-hero-in > .tm-btn { width: max-content; }

/* ---------- department blocks used as navigation (Departments and Channels pages) ---------- */
html body .ed .tm-depts { margin-top: 4px; }
html body button.tm-dept { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; color: #fff; background: linear-gradient(160deg, var(--dc), color-mix(in srgb, var(--dc) 78%, #000)); }
html body .tm-dept.is-on { box-shadow: 0 0 0 3px var(--n-box), 0 0 0 6px var(--n-aqua); }

/* the department blocks used as filters: their own padding (the page's generic button reset had zeroed it) and room below before the list */
html body button.tm-dept { padding: 20px 16px 16px; }
html body .ed .tm-depts { margin-bottom: 24px; }
html body .ed .ed-head { margin-bottom: 20px; }

/* the department blocks now sit in the page's top section (they are the page's navigation) */
html body .ed-hero .tm-depts { margin: 24px 0 0; }
html body .ed-hero { padding-bottom: 4px; }

/* ---------- the Departments page's context panel: each department, what it is, its channels, one button in ---------- */
html body .dd-list { display: grid; gap: 22px; }
html body .dd { padding: 18px; background: #fff; border: 1px solid var(--n-line); border-left: 8px solid var(--dc); border-radius: 16px; color: var(--n-ink); }   /* each department is a white card with its colour bar, on the light block */
html body .dd[hidden] { display: none; }
html body .dd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 14px; }
html body .dd-id { min-width: 0; flex: 1 1 320px; }
html body .dd-id h3 { margin: 0 0 6px; color: var(--n-ink); font: 800 22px/1.15 var(--dp-sans); text-transform: none; letter-spacing: -.01em; }
html body .dd-id p { margin: 0; max-width: 62ch; color: var(--n-steel); font: 400 15px/1.55 var(--dp-sans); }
html body .dd .ed-none { margin: 0; color: var(--n-steel); }

/* ---------- editorial pages on navy glass: light text directly on a block, light-purple cards with ink text inside it. (A channel's header block keeps light text over its photo.) ---------- */
html body .ed .ed-hero, html body .ed .ed-block, html body .ed .ed-media--paper, html body .ed .ed-about, html body .ed .ed-network, html body .ed .ed-access, html body .ed .ed-foot, html body .ed .ed-tabs { color: #fff; }
html body .ed .ed-hero::before { display: none; }
html body .ed h1, html body .ed h2, html body .ed .ed-head, html body .ed .ed-head h2 { color: #fff !important; }   /* !important: the older page rules set these to ink at a higher specificity */
html body .ed .ed-kicker, html body .ed .ed-kicker *, html body .ed .ed-head p, html body .ed .ed-head p small { color: rgba(255, 255, 255, .72) !important; font-family: var(--n-mono); letter-spacing: .16em; }
html body .ed .ed-kicker i, html body .ed .ed-kicker::before { background: var(--n-aqua) !important; }
html body .ed .ed-tag, html body .ed p, html body .ed .ed-none { color: rgba(255, 255, 255, .78); }
html body .ed .ed-head > span { background: var(--n-glass-2); color: var(--n-ink); }
html body .ed .idb, html body .ed .ed-card, html body .ed .ed-net-card, html body .ed .ed-access article { background: var(--n-glass-2); border: 1px solid var(--n-line); box-shadow: none; color: var(--n-ink); }
html body .ed a.idb:hover { border-color: var(--n-aqua); box-shadow: none; }
html body .ed .idb-name, html body .ed .ed-card h3, html body .ed .ed-net-card strong, html body .ed .ed-access article h3 { color: var(--n-ink); }
html body .ed .ed-card p, html body .ed .idb p, html body .ed .ed-net-card p, html body .ed .ed-net-card span, html body .ed .ed-access article p, html body .ed .ed-featinfo p, html body .ed .rw-panel p { color: var(--n-steel); }
html body .ed .ed-group-badge span { color: #fff; }
html body .ed .ed-tabs a { color: rgba(255, 255, 255, .74); }
html body .ed .ed-tabs a.is-on { color: #fff; }

/* the channel page's own pieces on bright glass: the featured info card, the redeem panel, the chips and the small round buttons */
html body .ed .ed-featinfo, html body .ed .rw-panel { background: var(--n-glass-2) !important; border: 1px solid var(--n-line) !important; box-shadow: none; color: var(--n-ink); }
html body .ed .ed-featinfo *, html body .ed .rw-panel .rw-title, html body .ed .rw-panel label { color: var(--n-ink); }
html body .ed .ed-featinfo p, html body .ed .rw-panel p { color: var(--n-steel); }
html body .ed .ed-up { background: var(--n-glass-2); color: var(--n-ink); border: 1px solid var(--n-line); }
html body .ed .ed-chip { background: var(--n-glass-2); color: var(--n-ink); border-color: var(--n-line); }
html body .ed .rw-input { background: #fff; color: var(--n-ink); border-color: var(--n-line); }
html body .ed .rw-input::placeholder { color: var(--n-mute); }
html body .ed .rw-btn--accent { background: var(--n-aqua); border-color: var(--n-aqua); color: var(--n-ink); }
html body .ed .ed-btn, html body .ed .ed-action { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px; }
html body .ed .ed-featinfo .ed-btn, html body .ed .ed-featinfo .ed-action { color: var(--n-ink); border-color: var(--n-ink); }
html body .ed.ed--dept .ed-hero .ed-hero-in p.ed-kicker, html body .ed .ed-hero p.ed-kicker { color: rgba(255, 255, 255, .72) !important; }

/* ---------- the badges under a channel's name: department and place, same colour (the department's, --c); one line, never wrapped ---------- */
html body .ed .ed-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
html body .ed .ed-badge { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--c, #5ce1e6) 30%, transparent); border: 1px solid color-mix(in srgb, var(--c, #5ce1e6) 75%, #fff); color: #fff !important; font: 800 12px/1 var(--dp-sans); letter-spacing: .06em; }
html body .ed .ed-badge--caps { text-transform: uppercase; letter-spacing: .1em; }

/* the social and navigation circles: a TRANSPARENT strip (no fill, a hairline edge) inside the hero block; the circles carry the colour */
html body .ed .ed-jump { background: transparent !important; border: 1px solid rgba(254, 253, 255, .24) !important; border-radius: 18px; padding: 12px 16px; box-shadow: none; }
html body .ed .ed-jump a { box-shadow: 0 0 0 2px rgba(254, 253, 255, .2); }
html body .ed .ed-jump a:hover { box-shadow: 0 0 0 3px var(--n-aqua); }

/* channel cards inside a solid department panel: light purple tint, ink text */
html body .ed .dd .idb { background: var(--n-lav); border: 1px solid var(--n-line); }
html body .ed .dd .idb-name { color: var(--n-ink); }
html body .ed .dd a.idb:hover { border-color: var(--n-aqua); }
html body .ed .dd .dd-id h3 { color: var(--n-ink) !important; }
html body .ed .dd .dd-id p, html body .ed .dd .ed-none { color: var(--n-steel); }

/* ---------- BLOCK 1 of a channel page: HEADER. The background photo FILLS the block; over it, bottom-left to right: profile photo, name, department and place badges, then the social and navigation buttons. Back and Share sit in the top corners. ---------- */
html body .ed.ed--screen .ed-hero { position: relative; }
html body .ed.ed--screen .ed-hero .ed-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; width: 100%; max-width: none; min-height: clamp(360px, 44vw, 520px); padding: 76px 28px 24px; }
html body .ed.ed--screen .ed-hero .ed-cover { position: absolute; inset: 0; z-index: 0; height: auto; border-radius: 0; }
html body .ed.ed--screen .ed-hero .ed-cover::after { background: linear-gradient(180deg, rgba(12, 16, 27, .25) 0%, rgba(12, 16, 27, .1) 30%, rgba(12, 16, 27, .88) 100%); }
html body .ed.ed--screen .ed-hero .ed-cover .ed-back { left: 24px; top: 24px; }
html body .ed.ed--screen .ed-hero .ed-cover .ed-share { right: 24px; top: 24px; }
html body .ed.ed--screen .ed-hero .ed-ident { margin-top: 0; padding-inline: 0; align-items: end; }
html body .ed.ed--screen .ed-hero .ed-who { padding-top: 0; }
html body .ed.ed--screen .ed-hero .ed-avatar { border-color: rgba(254, 253, 255, .95); }
html body .ed.ed--screen .ed-hero .ed-jump { background: rgba(12, 16, 27, .45) !important; border-color: rgba(254, 253, 255, .28) !important; }
@media (max-width: 640px) { html body .ed.ed--screen .ed-hero .ed-hero-in { min-height: 320px; padding: 64px 16px 16px; } }
html body .ed.ed--screen .ed-hero, html body .ed.ed--screen .ed-hero h1, html body .ed.ed--screen .ed-hero .ed-tag { color: #fff !important; }
html body .ed.ed--screen .ed-hero .ed-badge { color: #fff !important; }

/* ---------- BLOCK 2 of a channel page: FEATURED. One product gets the feature: a song shows its square artwork, a video its video art, each with the play button over it, the title and details beside it. ---------- */
html body .ed .ed-stage { background-size: cover; background-position: center; }
html body .ed .ed-stage--audio { aspect-ratio: 1 / 1; max-height: 520px; }
html body .ed .ed-stage--video { aspect-ratio: 16 / 9; }
html body .ed .ed-player { border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px -28px rgba(0, 0, 0, .8); }
html body .ed .ed-play { background: rgba(254, 253, 255, .96); color: var(--n-ink); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); }
@media (min-width: 900px) {
  html body .ed .ed-featgrid:has(.ed-stage--audio) { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: center; }
  html body .ed .ed-featgrid:has(.ed-stage--video) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
}

/* ---------- BLOCK: CATALOGUE filter chips and REDEEM ---------- */
html body .ed .ed-mfilter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
html body .ed .ed-mfilter button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px; background: transparent; color: #fff; font: 800 14px/1 var(--dp-sans); white-space: nowrap; cursor: pointer; }
html body .ed .ed-mfilter button small { opacity: .65; font-weight: 700; }
html body .ed .ed-mfilter button:hover { border-color: var(--n-aqua); }
html body .ed .ed-mfilter button.is-on { background: var(--n-aqua); border-color: var(--n-aqua); color: var(--n-ink); }
html body .ed .rw-chip { background: var(--n-glass-2); border: 1px solid var(--n-line); color: var(--n-ink); }
html body .ed .rw .rw-kicker { color: var(--n-steel) !important; }
html body .ed .rw .rw-title { color: var(--n-ink) !important; }
html body .ed .rw .rw-sub, html body .ed .rw .rw-chips-hint, html body .ed .rw .rw-user-name { color: var(--n-steel) !important; }
html body .ed .rw .rw-or span { background: var(--n-glass-2); color: var(--n-steel); }

/* the coloured department blocks keep their white text on any page (the ink rules above are for plain text) */
html body .ed .tm-dept, html body .ed .tm-dept h3, html body .ed .tm-dept p, html body .ed .tm-dept .tm-pill { color: #fff !important; }
html body .ed .tm-dept .tm-badge { color: var(--n-ink) !important; }

/* ---------- the pattern (operator, 2026-11-05): a NAVY block that holds WHITE cards (channel cards light purple), or white cards straight on the dark background with no block behind them; never a white block holding cards ---------- */
html body .ed .idb { background: #f8f3ff; }

/* the lists (Every department / Every channel) are navy blocks like the rest: white cards inside, light text on the block */
html body .ed #ed-departments .ed-head h2, html body .ed #ed-channels .ed-head h2, html body .ed #ed-departments .ed-head, html body .ed #ed-channels .ed-head { color: #fff !important; }
html body .ed #ed-departments .ed-head p, html body .ed #ed-channels .ed-head p { color: rgba(255, 255, 255, .72) !important; }
html body .ed #ed-channels .ed-group-badge span { color: #fff; }
html body .ed #ed-channels .ed-none { color: rgba(255, 255, 255, .78); }

/* the top block of the Departments and Channels pages: the title on the left, the two ways in on the right */
html body .ed .ed-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; }
html body .ed .ed-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }


/* ---------- REEL: a Block that slides. A navy block with a bar; inside, every department block in one line (snap, drag, arrows, keyboard). The same block can carry the fixed navigation circles (they just do not slide). ---------- */
html body .rl { position: relative; width: min(100% - 32px, 1240px); margin: 0 auto 28px; padding: 26px 0 22px; border-radius: 22px; color: #fff; box-shadow: var(--n-glass-shadow);
  background: linear-gradient(var(--n-aqua), var(--n-aqua)) top / 100% 4px no-repeat, var(--n-glass); }
html body .rl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; padding: 0 28px 16px; }
html body .rl-kicker { margin: 0 0 6px; color: rgba(255, 255, 255, .72); font: 700 11px/1 var(--n-mono); letter-spacing: .16em; text-transform: uppercase; }
html body .rl-title { margin: 0; color: #fff; font: 400 clamp(20px, 2.4vw, 28px)/1.1 var(--n-display); letter-spacing: 0; text-transform: uppercase; }
html body .rl-ctl { display: flex; align-items: center; gap: 10px; }
html body .rl-arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
html body .rl-arrow:hover:not(:disabled) { border-color: var(--n-aqua); color: var(--n-aqua); }
html body .rl-arrow:disabled { opacity: .3; cursor: default; }
html body .rl-flip { transform: scaleX(-1); }
html body .rl.rl-fits .rl-arrow { display: none; }
html body .rl-track { display: flex; gap: 12px; padding: 4px 28px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 28px; scrollbar-width: none; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
html body .rl-track::-webkit-scrollbar { display: none; }
html body .rl-track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
html body .rl-track:focus-visible { box-shadow: inset 0 0 0 2px var(--n-aqua); border-radius: 14px; }
html body .rl-track .tm-dept { flex: 0 0 188px; min-height: 200px; scroll-snap-align: start; }
@media (max-width: 640px) { html body .rl { width: calc(100% - 20px); } html body .rl-head, html body .rl-track { padding-inline: 16px; } html body .rl-track .tm-dept { flex-basis: 160px; } }

/* the little icon tile before a block's title: dark icon on the white tile (an older rule left the icon white, so it vanished) */
html body .ed .ed-head > span svg, html body .ed .ed-head > span svg.tm-ic { color: var(--n-ink) !important; stroke: var(--n-ink) !important; }

/* ---------- PHONE (operator, 2026-11-05: "needs setup a little better"): blocks, their titles, the channel header and the strip of circles laid out for a narrow screen ---------- */
@media (max-width: 640px) {
  html body .ed > section, html body .ed > footer.ed-foot { padding: 22px 16px 18px !important; }
  /* a block's title row: the icon tile at the left, the title beside it, the up arrow tucked into the top-right corner */
  html body .ed .ed-head { align-items: flex-start; gap: 12px; margin-bottom: 16px; padding-right: 56px; }
  html body .ed .ed-head > span { flex: none; width: 40px; height: 40px; border-radius: 12px; }
  html body .ed .ed-head h2 { font-size: clamp(19px, 5.4vw, 24px) !important; line-height: 1.18; letter-spacing: -.01em; }
  html body .ed .ed-up { position: absolute; top: 18px; right: 14px; width: 36px; height: 36px; }
  /* the channel header: photo behind; the profile photo, then the name, the badges and the circles stacked, left-aligned */
  html body .ed.ed--screen .ed-hero .ed-hero-in { min-height: 380px; padding: 64px 16px 16px; }
  html body .ed.ed--screen .ed-hero .ed-ident { grid-template-columns: minmax(0, 1fr); row-gap: 10px; align-items: start; }
  html body .ed.ed--screen .ed-hero .ed-avatar { --av: 84px; width: 84px; height: 84px; border-width: 4px; }
  html body .ed.ed--screen .ed-hero h1 { font-size: clamp(26px, 8.4vw, 34px); line-height: 1.04; }
  html body .ed.ed--screen .ed-hero .ed-badges { margin-top: 2px; }
  html body .ed.ed--screen .ed-hero .ed-jump { padding: 8px 10px; border-radius: 16px; width: max-content; max-width: 100%; }
  html body .ed.ed--screen .ed-hero .ed-social-row { gap: 8px; }
  /* the Departments and Channels top block: buttons under the title, the tiles two to a row */
  html body .ed .ed-hero-cta { width: 100%; }
  html body .ed .ed-hero-cta .tm-btn { flex: 1 1 140px; }
  html body .ed .tm-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body .ed .tm-depts .tm-dept { min-height: 150px; padding: 14px 12px 12px; }
}


/* ---------- the navy blocks are GLASS: the background shows through, softly blurred. The white and purple cards inside them stay solid. ---------- */
html body .ed > header.ed-hero, html body .ed > section, html body .ed > footer.ed-foot, html body .rl, html body.home .hf > .tm-wrap, html body.home .tm-stats, html body.home .hf-door, html body .dp-box, html body .dp-tabs, html body .dp-start {
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
html body .ed .ed-featinfo, html body .ed .rw-panel { background: #f8f3ff !important; }


/* no outside border on the glass blocks; and the top block of the Departments / Channels pages (the multi-category one) has no top bar either */
html body .ed.ed--dept > header.ed-hero { background: var(--n-glass) !important; }

/* ---------- pages that open with a photo/colour head (Start, Register, Cart, Contact...): the page IS that card, edge to edge: the head's photo fills the top of the screen and runs up behind the transparent nav (the nav is built into it), the content continues below on the same page ---------- */
html body:not(.home) #primary:not(:has(.ed)):not(:has(.pg--account)):not(:has(.dp)):has(.pg-head:not(.ga-head)) { width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }


/* ---------- FULL-BLEED HEAD on the Departments and Channels pages (operator, 2026-11-05: "more like the Start page"): the photo head runs edge to edge up behind the transparent nav; the blocks below stay in the 1240 column ---------- */
html body main.ed.ed--dept { width: 100%; max-width: none; margin: 0 0 28px; }
html body main.ed.ed--dept > section, html body main.ed.ed--dept > footer.ed-foot { width: min(100% - 32px, 1240px); margin-inline: auto; }
html body main.ed.ed--dept > header.ed-hero.ed-hero--photo {
  width: 100%; margin: 0 0 20px; border-radius: 0; box-shadow: none; overflow: hidden; color: #fff;
  padding: calc(var(--header-h, 64px) + 36px) 0 36px;
  position: relative; isolation: isolate; background: linear-gradient(135deg, #1b1a63 0%, #313de0 58%, #6b2fa0 100%) !important;   /* the Start page's recipe: base gradient, the photo at 45%, then the wash */
  -webkit-backdrop-filter: none; backdrop-filter: none;
}


/* ---------- FULL-BLEED HEAD on a department page: the department's colour head runs edge to edge behind the nav; the switcher row, tabs and blocks follow in the 1240 column ---------- */
html body .dp { width: 100%; max-width: none; margin: 0 0 28px; padding: 0; }
html body .dp > * { width: min(100% - 32px, 1240px); margin-inline: auto; }
html body .dp > .dp-cover { width: 100%; margin-top: 0; border-radius: 0; }
html body .dp > .dp-cover .dp-cover-in { width: min(100% - 32px, 1240px); margin: 0 auto; padding: calc(var(--header-h, 64px) + 28px) 0 30px; }
html body .dp > .dp-cover .dp-art { right: max(16px, calc((100% - 1240px) / 2)); }

/* ---------- FULL-BLEED HEAD on a channel page: the cover photo fills the top edge to edge behind the nav; the blocks below stay in the column ---------- */
html body div.ed.ed--screen { inset: 0; width: 100%; max-width: none; margin: 0; border-radius: 0; padding-bottom: 96px; }
html body .ed.ed--screen > section, html body .ed.ed--screen > footer.ed-foot, html body .ed.ed--screen > nav.ed-tabs { width: min(100% - 32px, 1240px); margin-inline: auto; }
html body .ed.ed--screen > header.ed-hero { width: 100%; margin: 0 0 16px; border-radius: 0; }
html body .ed.ed--screen .ed-hero .ed-hero-in { padding: calc(var(--header-h, 64px) + 40px) max(16px, calc((100% - 1240px) / 2)) 24px; }
html body .ed.ed--screen .ed-hero .ed-cover .ed-back { left: max(16px, calc((100% - 1240px) / 2)); top: calc(var(--header-h, 64px) + 8px); }
html body .ed.ed--screen .ed-hero .ed-cover .ed-share { right: max(16px, calc((100% - 1240px) / 2)); top: calc(var(--header-h, 64px) + 8px); }


/* ---------- the department tiles in the head of the Departments / Channels pages slide in ONE line (the Reel's track), and the selected tile is marked by a lift, not a border ---------- */
html body .rl.rl--lite { width: auto; margin: 22px 0 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
html body .rl--lite .rl-ctl { justify-content: flex-end; margin: 0 0 10px; }
html body .rl--lite .rl-track { padding: 6px 0 12px; scroll-padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
html body .rl--lite .rl-track.tm-depts { display: flex; grid-template-columns: none; margin: 0; }
html body .tm-dept.is-on, html body.home .tm-dept.is-on { box-shadow: 0 18px 34px -12px rgba(0, 0, 0, .6); transform: translateY(-4px); }
html body .dp-switch .tm-dept.is-on { box-shadow: 0 18px 34px -12px rgba(0, 0, 0, .6); transform: translateY(-3px); }
html body .rl.rl--lite { -webkit-backdrop-filter: none; backdrop-filter: none; }
html body main.ed.ed--dept > header.ed-hero.ed-hero--photo::before { content: ""; display: block; position: absolute; inset: 0; z-index: -2; background: var(--art, none) center / cover no-repeat; opacity: .45; }
html body main.ed.ed--dept > header.ed-hero.ed-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(27, 26, 99, .78), rgba(49, 61, 224, .55) 58%, rgba(107, 47, 160, .74)); }

/* ---------- A CHANNEL PAGE IN THE START LOOK (operator, 2026-11-05: "bring it more to what we have so far"): white page, the cover photo under the Start wash with the nav built in,
   lavender boxes holding white cards, ink text, purple gradient main buttons. HEADER, FEATURED, CATALOGUE, SOCIAL, CONTACT, REDEEM, CHANNELS and CAROUSEL are the blocks. ---------- */
html body div.ed.ed--screen { background: #fff !important; color: var(--n-ink); }
html body div.ed.ed--screen > header.ed-hero { background: linear-gradient(135deg, #1b1a63 0%, #313de0 58%, #6b2fa0 100%) !important; border-radius: 0; box-shadow: none; margin-bottom: 20px; }
html body div.ed.ed--screen .ed-hero .ed-cover::after { background: linear-gradient(135deg, rgba(27, 26, 99, .78), rgba(49, 61, 224, .55) 58%, rgba(107, 47, 160, .74)); }
html body div.ed.ed--screen .ed-hero .ed-cover { opacity: 1; filter: saturate(.9); }
html body div.ed.ed--screen > section, html body div.ed.ed--screen > footer.ed-foot {
  background: var(--box-grad) !important; border: 1px solid var(--box-line) !important; border-radius: 24px; box-shadow: none; color: var(--n-ink); margin-bottom: 20px;
}
html body div.ed.ed--screen > section { padding: clamp(18px, 2.6vw, 34px); }
html body div.ed.ed--screen > section.rl { padding: clamp(18px, 2.6vw, 34px); }
html body div.ed.ed--screen > nav.ed-tabs { background: transparent; }
html body div.ed.ed--screen .ed-tabs a { color: var(--n-steel); }
html body div.ed.ed--screen .ed-tabs a.is-on { color: var(--n-ink); }
html body div.ed.ed--screen > section h1, html body div.ed.ed--screen > section h2, html body div.ed.ed--screen > section .ed-head, html body div.ed.ed--screen > section .ed-head h2, html body div.ed.ed--screen > section .rl-title { color: var(--n-ink) !important; }
html body div.ed.ed--screen > section .ed-head p, html body div.ed.ed--screen > section .ed-head p small, html body div.ed.ed--screen > section .rl-kicker, html body div.ed.ed--screen > section .ed-kicker { color: var(--n-steel) !important; }
html body div.ed.ed--screen > section p, html body div.ed.ed--screen > section .ed-none { color: var(--n-steel); }
html body div.ed.ed--screen .ed-head > span { background: #fff; border: 1px solid var(--box-line); color: var(--n-ink); }
html body div.ed.ed--screen .ed-head > span svg { color: var(--n-ink) !important; }
html body div.ed.ed--screen .ed-card, html body div.ed.ed--screen .idb { background: #fff; border: 1px solid var(--box-line); box-shadow: none; }
html body div.ed.ed--screen .ed-featinfo { background: #fff; border: 1px solid var(--box-line); }
html body div.ed.ed--screen .ed-mfilter button { border-color: var(--n-ink); color: var(--n-ink); background: #fff; }
html body div.ed.ed--screen .ed-mfilter button:hover { border-color: #313de0; color: #313de0; }
html body div.ed.ed--screen .ed-mfilter button.is-on { background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); border-color: transparent; color: #fff; }
html body div.ed.ed--screen .ed-btn--dark, html body div.ed.ed--screen .ed-slide-cta { background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); border-color: transparent; color: #fff; }
html body div.ed.ed--screen .ed-btn, html body div.ed.ed--screen .ed-action { border-color: var(--n-ink); color: var(--n-ink); background: #fff; }
html body div.ed.ed--screen .ed-btn--dark { color: #fff; }
html body div.ed.ed--screen .rl .tm-btn, html body div.ed.ed--screen .rl-arrow { color: var(--n-ink); border-color: var(--n-ink); background: #fff; }
html body div.ed.ed--screen .ed-more .chd { margin-top: 4px; }
html body div.ed.ed--screen > footer.ed-foot, html body div.ed.ed--screen > footer.ed-foot a, html body div.ed.ed--screen > footer.ed-foot span { color: var(--n-steel); }
html body div.ed.ed--screen .ed-btn.ed-btn--dark, html body div.ed.ed--screen .ed-action.ed-slide-cta { background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); border-color: transparent; color: #fff; }

/* ---------- CHANNEL PAGE LAYOUT: every section is the same block (lavender box, icon + title, white panel inside); CONTACT and REDEEM sit side by side on a wide screen so no block floats in the middle with empty sides ---------- */
html body div.ed.ed--screen > section.ed-access { width: min(100% - 32px, 1240px); max-width: none; margin: 0 auto 20px; padding: clamp(18px, 2.6vw, 34px); background: var(--box-grad) !important; }
@media (min-width: 1100px) {
  html body div.ed.ed--screen { --pad: max(16px, calc((100vw - 1240px) / 2)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-content: start; padding-inline: var(--pad); }
  html body div.ed.ed--screen > * { grid-column: 1 / -1; width: auto; margin-inline: 0; }
  html body div.ed.ed--screen > header.ed-hero { width: calc(100% + 2 * var(--pad)); margin-inline: calc(-1 * var(--pad)); }
}
html body div.ed.ed--screen .ed-access .rw-panel { background: #fff; border: 1px solid var(--box-line); color: var(--n-ink); box-shadow: none; }
html body div.ed.ed--screen .ed-access .rw-label, html body div.ed.ed--screen .ed-access .rw-or { color: var(--n-steel) !important; }
html body div.ed.ed--screen .ed-access .rw-input { background: #fbfaff; border-color: var(--box-line); color: var(--n-ink); }
html body div.ed.ed--screen .ed-access .rw-input::placeholder { color: var(--n-steel); }
html body div.ed.ed--screen .ed-access .rw-btn, html body div.ed.ed--screen .ed-contact button[type="submit"], html body div.ed.ed--screen .ed-contact .tm-btn--dark { background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); border-color: transparent; color: #fff; }
html body div.ed.ed--screen .ed-access .rw-btn .rw-btn-text, html body div.ed.ed--screen .ed-access .rw-btn .rw-spin { color: #fff; }
html body div.ed.ed--screen .ed-access .rw-scan { background: #fff; color: var(--n-ink); border-color: var(--box-line); }
html body div.ed.ed--screen .ed-access .rw-chip { background: #fff; border: 1px solid var(--box-line); color: var(--n-ink); }

/* ---------- LIVE BANNER: a profile's banner has fine film grain that flickers and a slow light sweep, so the still photo feels like video. Sits above the photo, below the name and buttons. Off for people who ask for less motion. ---------- */
html body div.ed.ed--screen > header.ed-hero::after {
  content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none; opacity: .17; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tcn-grain .9s steps(6) infinite;
}
html body div.ed.ed--screen > header.ed-hero .ed-cover { overflow: hidden; }
html body div.ed.ed--screen > header.ed-hero .ed-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; opacity: .55;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) 0 0 / 220% 100% no-repeat;
  animation: tcn-sweep 9s ease-in-out infinite;
}
@keyframes tcn-grain { 0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); } 50% { transform: translate(-4%, -3%); } 67% { transform: translate(7%, 5%); } 83% { transform: translate(-7%, 2%); } 100% { transform: translate(0, 0); } }
@keyframes tcn-sweep { 0%, 15% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { html body div.ed.ed--screen > header.ed-hero::after, html body div.ed.ed--screen > header.ed-hero .ed-cover::before { animation: none; } }

/* ---------- PROFILE HEADER BUTTONS (operator, 2026-11-05: "this extra border bothers me, but the buttons look weird without it"): no box. Two plain groups on the photo: the social circles (go out / open a feed), a thin divider, then the page shortcuts as labelled glass pills (Audio, Shop, Unlock, Contact) so every button says what it does. ---------- */
html body .ed.ed--screen .ed-hero .ed-jump { background: none !important; border: 0 !important; padding: 0; border-radius: 0; box-shadow: none; width: auto; max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
html body .ed.ed--screen .ed-hero .ed-jump .ed-social-row { justify-content: flex-start; flex: none; }
html body .ed.ed--screen .ed-hero .ed-jump .ed-social-row + .ed-pill-row { padding: 0 0 0 18px; border-top: 0; border-left: 1px solid rgba(254, 253, 255, .35); }
html body .ed.ed--screen .ed-hero .ed-jump .ed-pill-row { flex: 0 1 auto; justify-content: flex-start; gap: 10px; }
html body .ed.ed--screen .ed-hero .ed-jump a { box-shadow: 0 0 0 2px rgba(254, 253, 255, .35); }
html body .ed.ed--screen .ed-hero .ed-jump .ed-pill-row a.ed-jump-btn {
  display: inline-flex; align-items: center; gap: 8px; width: auto; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; box-shadow: none;
  background: rgba(254, 253, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 800 14px/1 var(--dp-sans); white-space: nowrap;
}
html body .ed.ed--screen .ed-hero .ed-jump .ed-pill-row a.ed-jump-btn .ed-jump-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html body .ed.ed--screen .ed-hero .ed-jump .ed-pill-row a.ed-jump-btn:hover { background: #fff; color: var(--n-ink); box-shadow: none; transform: none; }
@media (max-width: 640px) {
  html body .ed.ed--screen .ed-hero .ed-jump { padding: 0; width: 100%; }
  html body .ed.ed--screen .ed-hero .ed-jump .ed-social-row + .ed-pill-row { padding: 0; border-left: 0; }
}

/* ---------- BACK and SHARE live in the badge row under the name, in the department badge's own style ([<- MUSIC DEPARTMENT] [Share] [place]); the two that act are buttons, the place is a plain badge (operator, 2026-11-05) ---------- */
html body .ed.ed--screen .ed-hero .ed-badges { align-items: center; gap: 8px; }
html body .ed.ed--screen .ed-hero .ed-badge--btn { cursor: pointer; }
html body .ed.ed--screen .ed-hero .ed-badge--btn:hover { background: color-mix(in srgb, var(--c, #5ce1e6) 55%, transparent); }

/* a channel page is a full-height layer (z-index 1900); the scrolled state of the header used to drop it to 1000, so the nav vanished behind the page once you scrolled. It stays above the layer in both states. */
html.ed-on body header.site-header.tm-header, html.ed-on body header.site-header.tm-header.site-header--scrolled { z-index: 2000 !important; }

/* ---------- the code box inside a shop popup: the scan button is a clear second way in (a full-width accent button under the code row), the heading is sized for the column ---------- */
html body .tqv-rw .rw-title { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .02em; }
html body .tqv-rw .rw-scan { margin-top: 4px; }
html body .tqv-rw .rw-qr { min-height: 52px; border-radius: 14px; gap: 10px; background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -12px rgba(49, 61, 224, .7); }
html body .tqv-rw .rw-qr svg { width: 20px; height: 20px; }