/* CSI Asia-Pacific 2026 – programme signage
 * Palette from the CSI Asia-Pacific 2026 key visual (deep green field, white type, pale yellow
 * accents) and the CSI site (red for live cases). Room colours come from the programme data;
 * to override one, set e.g. --room-blue: #225483; in :root below.
 */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* background: CSI Asia-Pacific 2026 green, deepened for a screen */
  --bg-top: #3f5a26;
  --bg-mid: #283d1a;
  --bg-low: #18240f;
  --brand: #5b7136;        /* key visual green */
  --brand-hi: #8cb351;
  --ink: #f6f8f0;          /* text */
  --ink-2: #d0d9c3;
  --ink-3: #a3b192;
  --accent: #e9dd89;       /* key visual yellow */
  --accent-ink: #1b250f;
  --live: #c8102e;         /* CSI red */
  --live-soft: #ffc4cb;
  --card: rgba(9, 16, 5, .42);
  --line: rgba(255, 255, 255, .11);
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* room colour overrides (empty = use the programme data) */
  /* --room-blue: #225483; --room-purple: #948199; --room-amphitheatre: #8cb351; */
  /* --room-lounge: #62b9cf; --room-training: #ff9800; */

  color-scheme: dark;
  font-size: min(1vw, 1.7778vh);
}
@media (orientation: portrait) {
  :root { font-size: min(1.75vw, 0.985vh); }
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg-low); }
body {
  color: var(--ink);
  font-family: 'Rubik', 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: 7.4rem minmax(0, 1fr) 2.6rem;
  cursor: none;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- ambient background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(160deg, var(--bg-top) 0%, var(--bg-mid) 48%, var(--bg-low) 100%); }
.bg .dots { position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .075) .085rem, transparent .1rem);
  background-size: .62rem .62rem;
  -webkit-mask-image: linear-gradient(120deg, #000 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .6) 100%);
  mask-image: linear-gradient(120deg, #000 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .6) 100%); }
.glow { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; will-change: transform; }
.g1 { left: -30vmax; top: -40vmax; background: radial-gradient(circle, rgba(140, 179, 81, .20), rgba(140, 179, 81, 0) 62%);
  animation: drift-a 150s ease-in-out infinite alternate; }
.g2 { right: -35vmax; bottom: -45vmax; background: radial-gradient(circle, rgba(233, 221, 137, .09), rgba(233, 221, 137, 0) 62%);
  animation: drift-b 190s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(28vmax, 16vmax); } }
@keyframes drift-b { to { transform: translate(-22vmax, -14vmax); } }

/* ---------- header ---------- */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2rem;
  padding: 0 2.4rem; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
.mark { height: 4.6rem; width: auto; flex: 0 0 auto; }
.wm1 { font-weight: 700; font-size: 2.15rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.wm1 span { color: var(--accent); }
.wm2 { margin-top: .5rem; font-size: 1.05rem; color: var(--ink-2); letter-spacing: .02em; white-space: nowrap; }
.context { text-align: center; min-width: 0; }
.ctx-k { font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }
.ctx-v { margin-top: .25rem; font-size: 1.9rem; font-weight: 600; white-space: nowrap; }
.ctx-day { margin-left: .9rem; font-size: 1.15rem; font-weight: 400; color: var(--ink-2); }
.clock { justify-self: end; text-align: right; }
.time { font-size: 4.3rem; font-weight: 600; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.sec { display: inline-block; width: 2.1rem; margin-left: .4rem; font-size: 1.7rem; font-weight: 500; color: var(--accent); text-align: left; }
.date { margin-top: .4rem; font-size: 1.1rem; color: var(--ink-2); white-space: nowrap; }

/* ---------- footer ---------- */
.foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 2.4rem;
  font-size: .95rem; color: var(--ink-3); white-space: nowrap; }
.status { overflow: hidden; text-overflow: ellipsis; }
.status .dot { display: inline-block; width: .62rem; height: .62rem; margin-right: .55rem; border-radius: 50%; background: var(--ink-3); vertical-align: .05rem; }
.status.ok .dot { background: #8fdc6f; }
.status.warn .dot { background: #f2bc4b; }
.status.bad .dot { background: #ff5d5d; }

/* ---------- view frame ---------- */
.view { position: relative; min-height: 0; padding: 0 2.4rem; transition: opacity .7s var(--ease); }
.view.fading { opacity: 0; }
.view > section { height: 100%; }

/* ---------- shared pieces ---------- */
.card { position: relative; min-height: 0; overflow: hidden; border-radius: .95rem; background: var(--card); border: 1px solid var(--line);
  transition: background-color 1.4s var(--ease), border-color 1.4s var(--ease), box-shadow 1.4s var(--ease); }
.card.active { background: color-mix(in srgb, var(--c) 24%, rgba(9, 16, 5, .62)); border-color: var(--c);
  box-shadow: inset .4rem 0 0 var(--c), 0 0 2rem color-mix(in srgb, var(--c) 25%, transparent); }
.card.is-live { box-shadow: inset .4rem 0 0 var(--live), inset 0 0 0 .14rem var(--live), 0 0 2.4rem rgba(200, 16, 46, .30); border-color: var(--live); }
.swapbox { position: relative; }
.swapbox > .layer { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .45rem; padding: var(--pad, .95rem 1.1rem);
  transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
.layer.in { opacity: 0; transform: translateY(.7rem); }
.layer.out { opacity: 0; transform: translateY(-.5rem); }

.k { display: flex; align-items: center; gap: .7rem; min-width: 0; font-size: .95rem; color: var(--ink-2); white-space: nowrap; }
.lbl { padding: .2rem .55rem; border-radius: .35rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  background: rgba(255, 255, 255, .12); color: var(--ink); }
.lbl.on { background: var(--accent); color: var(--accent-ink); }
.lbl.onair { background: var(--live); color: #fff; }
.lbl.nx { padding-left: 0; background: none; color: var(--accent); }
.lbl.idle:empty { display: none; }
.tm { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cd, .k .left { margin-left: auto; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.kick { font-size: .82rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.card.active .kick { color: var(--ink-2); }
.ttl { font-size: 1.42rem; font-weight: 600; line-height: 1.17; overflow-wrap: anywhere; }
.ttl.sm { font-size: 1.18rem; font-weight: 500; }
.ttl.lg { font-size: 2.4rem; line-height: 1.12; }
.ttl.xl { font-size: 3.5rem; line-height: 1.07; letter-spacing: -.01em; }
.who { font-size: .95rem; color: var(--ink-2); }
.c1, .c2, .c3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.c1 { -webkit-line-clamp: 1; } .c2 { -webkit-line-clamp: 2; } .c3 { -webkit-line-clamp: 3; }
.idle-msg { margin: auto 0; font-size: 1.35rem; font-weight: 500; color: var(--ink-2); }
.idle-msg.sm { font-size: 1.05rem; color: var(--ink-3); }

.foot-row { display: flex; align-items: center; gap: .8rem; margin-top: auto; font-size: .95rem; }
.foot-row .left { color: var(--accent); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar { flex: 1; height: .32rem; overflow: hidden; border-radius: .2rem; background: rgba(255, 255, 255, .16); }
.bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 1s linear; }
.bar.edge { position: absolute; left: 0; right: 0; bottom: 0; height: .45rem; border-radius: 0; }

/* live-case badge */
.live { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-width: 0; font-size: .9rem; line-height: 1.2; }
.live-tag { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .42em; padding: .2em .55em; border-radius: .35em;
  background: var(--live); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.pulse { width: .52em; height: .52em; border-radius: 50%; background: #fff; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.live-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--live-soft); }
.card.active .live-where { color: #fff; }
.live.xs { font-size: .72rem; }
.live.sm { font-size: .82rem; }
.live.md { font-size: 1.1rem; }
.live.lg { font-size: 1.4rem; }
.ico { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; fill: currentColor; }

.pill { display: inline-block; padding: .34rem .8rem; border-radius: .45rem; background: var(--c); color: var(--ct);
  font-size: 1.02rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.pill-sub { font-size: .9rem; color: var(--ink-3); white-space: nowrap; }
.pill.xl { padding: .5rem 1.4rem; border-radius: .7rem; font-size: 2.3rem; letter-spacing: .06em; }

/* =====================================================================
   Overview
   ===================================================================== */
.ov { --cols: 3.6rem repeat(5, minmax(0, 1fr)); --gap: 1rem;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .9rem; padding: .8rem 0 .5rem; }
.ov-cards { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); }
.ov-col { display: grid; grid-template-rows: 2.4rem 11.4rem 6.2rem; row-gap: .6rem; min-width: 0; }
.ov-head { display: flex; align-items: center; gap: .6rem; min-width: 0; overflow: hidden; }
.ov-now > .layer { --pad: .8rem 1.1rem .85rem; gap: .38rem; }
.ov-now .ttl, .ov-now .k, .ov-now .kick, .ov-now .who { flex-shrink: 0; }
.kick.live-k { color: var(--live-soft); font-weight: 600; }
.lbl .pulse { display: inline-block; margin-right: .45em; vertical-align: .08em; }
.ov-next > .layer { --pad: .8rem 1.1rem; gap: .35rem; }
.hubs { display: flex; flex-direction: column; gap: .32rem; font-size: 1.02rem; }
.hub { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.hub b { flex: 0 0 auto; font-weight: 600; color: color-mix(in srgb, var(--c) 55%, #fff); }
.card.active .hub b { color: #fff; }
.hub span { flex: 1; min-width: 0; }
.hub.more { color: var(--ink-3); font-size: .9rem; }
.ov-next .hubs { font-size: .95rem; }

.ov-tl { position: relative; min-height: 0; }
.tl-win { position: absolute; inset: 0; overflow: hidden; border-radius: .95rem; background: rgba(6, 12, 3, .22); border: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem, #000 calc(100% - 1.6rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem, #000 calc(100% - 1.6rem), transparent 100%); }
.tl-track { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: var(--cols); grid-template-rows: 100%;
  column-gap: var(--gap); transition: transform 1s linear; will-change: transform; }
.tl-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255, 255, 255, .06); }
.tl-line.hour { border-top: 1px solid rgba(255, 255, 255, .12); }
.tl-line span { position: absolute; left: .7rem; top: 0; transform: translateY(-50%); font-size: .85rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl-col { position: relative; height: 100%; min-width: 0; }
.blk { position: absolute; padding: .14rem .08rem; transition: opacity 1.6s var(--ease); }
.blk-in { --lift: 0px; height: 100%; overflow: hidden; background-clip: padding-box; padding: .32rem .6rem; border-radius: .5rem; border-left: .32rem solid var(--c);
  background: color-mix(in srgb, var(--c) 20%, rgba(8, 14, 5, .72));
  transition: background-color 1.6s var(--ease), box-shadow 1.6s var(--ease); }
.blk .bt, .blk .bk, .blk .bn { transform: translateY(var(--lift)); transition: transform 1s linear; }
.blk .bt { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blk .bt > span { flex: 0 0 auto; }
.blk .bk { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk .bn { font-size: .98rem; font-weight: 500; line-height: 1.2; }
.blk .live { font-size: .68rem; }
.blk[data-st="done"] { opacity: .36; }
.blk[data-st="now"] .blk-in { background: color-mix(in srgb, var(--c) 44%, #0b1307); box-shadow: inset 0 0 0 .1rem color-mix(in srgb, var(--c) 70%, #fff); }
.blk[data-st="now"] .bt, .blk[data-st="now"] .bk { color: #fff; }
.blk.is-live[data-st="now"] .blk-in { box-shadow: inset 0 0 0 .14rem var(--live), 0 0 1.4rem rgba(200, 16, 46, .35); }
.tl-now { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; transition: transform 1s linear, opacity .8s; will-change: transform; }
.tl-now.off { opacity: 0; }
.tl-now-line { position: absolute; left: 0; right: 0; top: 0; height: .16rem; margin-top: -.08rem; background: var(--accent);
  box-shadow: 0 0 .9rem rgba(233, 221, 137, .55); }
.tl-now-t { position: absolute; left: .35rem; top: 0; transform: translateY(-50%); padding: .12rem .42rem; border-radius: .3rem;
  background: var(--accent); color: var(--accent-ink); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Room view
   ===================================================================== */
.rv { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.6rem; padding: 1rem 0 .7rem; }
.rv-main { display: grid; grid-template-rows: minmax(0, 1fr) 14.5rem; gap: 1.2rem; min-height: 0; }
.rv-now > .layer { --pad: 1.7rem 2.2rem 2.1rem; gap: .95rem; }
.rv-now .k { font-size: 1.45rem; }
.rv-now .lbl { padding: .32rem .85rem; font-size: 1.15rem; }
.rv-now .k .left { font-size: 1.7rem; font-weight: 600; }
.rv-now .kick { font-size: 1.05rem; }
.live-row { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.site { font-size: 1.25rem; color: var(--ink-2); }
.card.active .site { color: #fff; }
.sub { font-size: 1.3rem; color: var(--accent); }
.people { display: flex; flex-direction: column; gap: .55rem; }
.ppl { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; align-items: baseline; font-size: 1.28rem; }
.ppl-k { font-size: .88rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.talkbox { flex: 0 0 9.6rem; margin-top: auto; }
.talkbox > .layer { --pad: 0; flex-direction: row; gap: 1rem; }
.talk { flex: 1 1 0; min-width: 0; padding: .85rem 1.1rem; border-radius: .7rem; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); }
.talk.cur { background: rgba(255, 255, 255, .1); }
.tk-k { font-size: 1rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-k span { margin-right: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.tk-t { margin-top: .3rem; font-size: 1.28rem; font-weight: 500; line-height: 1.2; }
.tk-s { margin-top: .3rem; font-size: 1.05rem; color: var(--ink-2); }
.rv-next > .layer { --pad: 1.3rem 2rem; gap: .6rem; }
.rv-next .k { font-size: 1.3rem; }
.rv-next .lbl { font-size: 1.05rem; }
.rv-next .who { font-size: 1.2rem; }
.idle-big { margin-top: auto; font-size: 3.6rem; font-weight: 600; line-height: 1.1; }
.idle-small { margin-bottom: auto; font-size: 1.7rem; color: var(--accent); }
.rv-side { display: grid; grid-template-rows: 3.6rem minmax(0, 1fr); min-height: 0; }
.rv-side-h > .layer { --pad: .4rem 0 0; flex-direction: row; align-items: baseline; gap: 1rem; }
.side-k { font-size: 1.7rem; font-weight: 600; }
.side-v { font-size: 1.1rem; color: var(--ink-3); }
.scroller { position: relative; min-height: 0; overflow: hidden; transition: opacity .6s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1rem, #000 calc(100% - 3rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1rem, #000 calc(100% - 3rem), transparent 100%); }
.scroller.fade { opacity: 0; }
.sc-inner { padding: .6rem 0 3rem; will-change: transform; }
.empty { padding: 1rem 0; font-size: 1.3rem; color: var(--ink-3); }

/* session rows (room list and programme) */
.row { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 1em; padding: 1em 0; border-bottom: 1px solid var(--line);
  transition: opacity 1.6s var(--ease); }
.row:last-child { border-bottom: 0; }
.rt { font-size: 1.5em; font-weight: 600; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.rt span { display: block; margin-top: .2em; font-size: .66em; font-weight: 400; color: var(--ink-3); }
.rb { min-width: 0; }
.rb .live { font-size: .8em; margin-bottom: .35em; }
.rn { font-size: 1.5em; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.rs { margin-top: .25em; font-size: .95em; color: var(--accent); }
.rw { margin-top: .3em; font-size: 1.05em; color: var(--ink-2); }
.rk { font-size: .82em; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.rh { margin-top: .2em; font-size: 1.2em; line-height: 1.25; }
.rh b { margin-right: .55em; font-weight: 600; color: color-mix(in srgb, var(--c) 55%, #fff); }
.row[data-st="done"] { opacity: .38; }
.row[data-st="now"] { margin: 0 -.6em; padding-left: .6em; padding-right: .6em; border-radius: .5em; border-bottom-color: transparent;
  background: color-mix(in srgb, var(--c) 40%, transparent); }

/* =====================================================================
   Programme pages
   ===================================================================== */
.pg { display: grid; grid-template-rows: minmax(0, 1fr) 2.4rem; gap: .4rem; padding-top: .4rem; }
.pg-pages { position: relative; min-height: 0; }
.page { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; --fit: 1;
  opacity: 0; transform: translateY(1.4rem); pointer-events: none;
  transition: opacity 1.3s var(--ease), transform 1.6s var(--ease); }
.page.on { opacity: 1; transform: none; }
.page-h { display: flex; align-items: baseline; gap: 1.4rem; padding-top: .6rem; }
.page-d { font-size: 2.6rem; font-weight: 700; }
.page-s { font-size: 1.3rem; color: var(--ink-2); }
.today { display: inline-block; margin-left: 1rem; padding: .22rem .6rem; border-radius: .35rem; vertical-align: .35rem;
  background: var(--accent); color: var(--accent-ink); font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.page-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.4rem; min-height: 0; }
.pcol { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .5rem; min-height: 0; min-width: 0; padding: .9rem 1.3rem .4rem;
  border-radius: .95rem; background: var(--card); border: 1px solid var(--line); border-top: .38rem solid var(--c); }
.pcol-h { display: flex; align-items: center; gap: .7rem; }
.rows { min-height: 0; overflow: hidden; margin: 0 -.8em; padding: 0 .8em; font-size: calc(var(--fit) * .82rem); }
.pg .row { grid-template-columns: 4.4em minmax(0, 1fr); padding: .6em 0; }
.pg .row.gone { display: none; }
.pg .rb .live { display: inline-flex; margin: 0 .55em 0 0; vertical-align: .18em; font-size: .78em; }
.pg .rn { display: inline; }
.pg .rt { font-size: 1.32em; }
.pg .rn { font-size: 1.42em; }
.pg-foot { display: flex; align-items: center; gap: 1.4rem; }
.pg-dots { display: flex; gap: .55rem; }
.pg-dots i { width: .62rem; height: .62rem; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background-color .9s var(--ease), transform .9s var(--ease); }
.pg-dots i.on { background: var(--accent); transform: scale(1.3); }
.pg-bar { flex: 1; height: .2rem; overflow: hidden; border-radius: .1rem; background: rgba(255, 255, 255, .1); }
.pg-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }

/* =====================================================================
   Welcome / closing
   ===================================================================== */
.wel { display: grid; grid-template-rows: auto auto auto; align-content: center; gap: 3rem; padding: 1rem 3rem; }
.wel > * { animation: rise 1.6s var(--ease) both; }
.wel > :nth-child(2) { animation-delay: .25s; }
.wel > :nth-child(3) { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(1.2rem); } }
.wel-hero { display: flex; align-items: center; gap: 2.8rem; }
.wel-mark { height: 11rem; width: auto; flex: 0 0 auto; }
.wel-k { font-size: 1.8rem; font-weight: 500; color: var(--accent); }
.wel h1 { margin: .2rem 0 .7rem; font-size: 5.4rem; font-weight: 700; line-height: 1; text-transform: uppercase; }
.wel-tag { max-width: 56rem; margin: 0; font-size: 1.7rem; line-height: 1.3; color: var(--accent); }
.wel-start { padding-left: 13.8rem; }
.ws-k { font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); }
.ws-v { margin-top: .3rem; font-size: 3.6rem; font-weight: 600; }
.ws-v b { color: var(--accent); font-weight: 600; }
.ws-c { margin-top: .3rem; font-size: 1.5rem; color: var(--ink-2); }
.ws-e { margin-top: .5rem; font-size: 1.2rem; color: var(--ink-3); }
.wel-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.wd { padding: 1.3rem 1.6rem 1.5rem; border-radius: .95rem; background: var(--card); border: 1px solid var(--line); border-top: .38rem solid var(--brand-hi); }
.wd-k { font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.wd-d { margin-top: .3rem; font-size: 2rem; font-weight: 600; }
.wd-n { margin-top: .4rem; font-size: 1.3rem; color: var(--ink-2); }
.wd-n b { color: var(--ink); font-weight: 600; }
.wd-l { display: flex; align-items: flex-start; gap: .6rem; margin-top: .9rem; font-size: 1.15rem; line-height: 1.3; color: var(--live-soft); }

/* =====================================================================
   Portrait (vertical totem, 1080 x 1920)
   ===================================================================== */
@media (orientation: portrait) {
  body { grid-template-rows: 12rem minmax(0, 1fr) 2.6rem; }
  .top { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; row-gap: .6rem; padding: 1.2rem 2rem 1rem; }
  .brand { grid-column: 1; grid-row: 1; }
  .clock { grid-column: 2; grid-row: 1; }
  .context { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; display: flex; align-items: baseline; justify-content: center; gap: 1rem; }
  .context:empty { display: none; }
  .ctx-v { margin-top: 0; }
  .view { padding: 0 2rem; }
  .foot { padding: 0 2rem; }

  .ov { --cols: 3.4rem repeat(3, minmax(0, 1fr)); grid-template-columns: 3.4rem repeat(6, minmax(0, 1fr)); column-gap: var(--gap);
    grid-template-rows: auto minmax(0, 1fr) auto; }
  .ov-cards { display: contents; }
  .ov-spacer { grid-row: 1; grid-column: 1; }
  .ov-col { grid-row: 1; grid-column: span 2; grid-template-rows: 2.4rem 13rem 7rem; }
  .ov-col.multi { grid-row: 3; grid-template-rows: 2.4rem 9.4rem 5.6rem; }
  .ov-col.multi:nth-child(5) { grid-column: 1 / 5; }
  .ov-col.multi:nth-child(6) { grid-column: 5 / 8; }
  .ov-tl { grid-row: 2; grid-column: 1 / -1; }
  .tl-col.multi { display: none; }

  .rv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.2rem; }
  .rv-main { grid-template-rows: minmax(0, 1fr) 13.5rem; }
  .ttl.xl { font-size: 3.2rem; }

  .page-cols { gap: 1rem; }
  .pcol { padding: .8rem .9rem .3rem; }

  .wel { padding: 1rem 1rem 2rem; gap: 2.6rem; }
  .wel-hero { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .wel-mark { height: 8rem; }
  .wel h1 { font-size: 4.4rem; }
  .wel-start { padding-left: 0; }
  .wel-days { grid-template-columns: minmax(0, 1fr); }
}