/* Shared look for the portal pages (home, Rewards, Lifestyle Store). Same brand tokens as the Engagement Dashboard,
   matched to Veluma: cream page, paper cards, deep-navy text, magenta actions, Fraunces headings, mono eyebrows. */
:root {
  --band: #1C0264; --band-fg: #FFFCF6; --accent: #FE019A; --accent-hover: #E0017F; --link: #E0017F;
  --bg: #F8F4EC; --surface: #FFFCF6; --fg: #1C0264; --muted: #4A5168; --line: #E4DED3; --line-strong: #CFC8BD; --chip: #E8E5F2;
  --ok: #2E7D5B; --warn: #8F5A00; --bad: #B82828;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, "Courier New", monospace;
  --r: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.5; }
[hidden] { display: none !important; }
a { color: var(--link); }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }

/* Header band */
.band { background: var(--surface); color: var(--fg); border-bottom: 1px solid var(--line); }
.band .wrap { padding-block: 26px 22px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.band .eyebrow { margin: 0 0 4px; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.band .eyebrow a { color: inherit; text-decoration: none; }
.band .eyebrow a:hover { text-decoration: underline; }
.band h1 { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 2.25rem; line-height: 1.15; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
@media (max-width: 520px) { .band h1 { font-size: 1.75rem; } }
.band p.sub { margin: 6px 0 0; color: var(--muted); font-size: 1.05rem; }
.links { display: flex; gap: 10px; flex-wrap: wrap; }
.qbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; background: var(--surface); color: var(--band); font-size: .9rem; font-weight: 600; text-decoration: none; border: 1px solid var(--line-strong); }
.qbtn:hover, .qbtn:focus-visible { background: var(--chip); border-color: var(--band); color: var(--band); outline: none; }
.qbtn[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }

main .wrap { padding-block: 28px 56px; display: flex; flex-direction: column; gap: 22px; }
h2.sec { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin: 0; }
.note { color: var(--muted); font-size: .88rem; margin: 0; }
.notice { padding: 10px 14px; border-radius: var(--r); background: var(--chip); font-size: .9rem; }
.notice.err { color: var(--bad); }

/* Cards, buttons, form fields */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0; }
.card h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 2px; }
.btn { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 0; background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--accent-hover); }
.btn:focus-visible, .ghost:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; background: var(--accent); }
.ghost { font: inherit; font-weight: 600; font-size: .88rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; text-decoration: none; white-space: nowrap; }
.ghost:hover { border-color: var(--band); background: var(--chip); }
.ghost.danger { color: var(--bad); }
.ghost[disabled] { opacity: .5; cursor: default; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; min-width: 0; }
label.f small { text-transform: none; letter-spacing: 0; font-weight: 400; }
label.check { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
input[type=text], input[type=url], input[type=number], input[type=search], select, textarea {
  font: inherit; font-size: .95rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; text-transform: none; letter-spacing: 0;
}
textarea { min-height: 5em; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.status { min-height: 1.2em; font-size: .85rem; color: var(--muted); margin: 0; }
.status.err { color: var(--bad); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; background: var(--chip); color: var(--muted); white-space: nowrap; }
.pill.ok { color: var(--ok); } .pill.warn { color: var(--warn); } .pill.bad { color: var(--bad); } .pill.accent { color: var(--accent); }
.empty { color: var(--muted); font-size: .92rem; padding: 18px 0; text-align: center; }

/* Filter chips (single choice) */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { font: inherit; font-size: .88rem; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
.filters button:hover { border-color: var(--muted); }
.filters button[aria-pressed="true"] { background: var(--band); border-color: var(--band); color: #fff; }
.filters button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.filters .n { margin-left: 6px; font-size: .75rem; opacity: .75; font-variant-numeric: tabular-nums; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.toolbar input[type=search] { max-width: 320px; }

/* Dialogs */
dialog { border: 0; border-radius: var(--r); padding: 0; width: min(560px, calc(100vw - 24px)); background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgba(10, 4, 40, .35); border-top: 4px solid var(--accent); }
dialog::backdrop { background: rgba(28, 2, 100, .35); }
dialog form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
dialog h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
.actions .status { margin-right: auto; }
.bar { height: 6px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* Portal home tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; min-height: 220px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); text-decoration: none; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tile::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.tile:hover, .tile:focus-visible { border-color: var(--band); box-shadow: 0 14px 30px rgba(28, 2, 100, .12); outline: none; }
.tile:hover::after, .tile:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .tile:hover { transform: translateY(-2px); } }
.tile .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--band); color: #fff; }
.tile .ic svg { width: 26px; height: 26px; }
.tile h2 { font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; margin: 4px 0 0; }
.tile p { margin: 0; color: var(--muted); }
.tile .stat { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: .9rem; }
.tile .stat b { font-family: var(--display); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.tile .go { font-weight: 600; color: var(--band); }
.quick { display: flex; flex-wrap: wrap; gap: 10px; }
.quick a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; text-decoration: none; }
.quick a:hover, .quick a:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }

/* Store */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.points .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.points .kpi.main { background: var(--band); color: #fff; border-color: var(--band); }
.points .k { font-size: .78rem; opacity: .8; }
.points .v { font-family: var(--display); font-size: 1.9rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.prod { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.prod .ph { aspect-ratio: 4 / 3; background: var(--chip); display: grid; place-items: center; color: var(--muted); font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; }
.prod .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod .pb { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod h3 { margin: 0; }
.prod .price { font-family: var(--display); font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.prod .price small { font-family: var(--body); font-size: .8rem; color: var(--muted); }
.prod .desc { font-size: .88rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.prod .buy { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.prod.off { opacity: .6; }
.orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.orders li { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--line); align-items: center; }
.orders li:first-child { border-top: 0; }
.orders .what { min-width: 0; overflow-wrap: anywhere; }
.orders .what b { font-weight: 600; }
.orders .meta { display: block; font-size: .8rem; color: var(--muted); }
.orders .ops { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabbar button { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px 9px; font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabbar button:hover { color: var(--fg); }
.tabbar button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.tabbar button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.tabbar .n { display: inline-block; min-width: 1.4em; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; text-align: center; }
.photo-pick { display: flex; gap: 12px; align-items: center; }
.photo-pick img { width: 84px; height: 63px; object-fit: cover; border-radius: 6px; background: var(--chip); }
.orders li.off { opacity: .6; }

/* ---------- Home ---------- */
.hero { position: relative; overflow: hidden; color: var(--fg); background: radial-gradient(900px 380px at 90% -30%, rgba(254,1,154,.10), transparent 60%), radial-gradient(700px 360px at 0% 130%, rgba(28,2,100,.07), transparent 60%), var(--surface); border-bottom: 1px solid var(--line); }
.hero::after { content: ""; position: absolute; right: -60px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(254,1,154,.04); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; padding-block: 34px 30px; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; justify-content: space-between; }
.hero .who { display: flex; gap: 18px; align-items: center; min-width: 0; }
.hero .who .av { border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent), 0 10px 26px rgba(28,2,100,.14); }
.hero .date { margin: 0; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero h1 { font-family: var(--display); font-style: italic; font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; margin: 4px 0 6px; letter-spacing: -.02em; }
.hero .glance { margin: 0; color: var(--muted); max-width: 52ch; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Home: time zones, weather, quote of the day, seasonal recipe */
.daily { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .daily { grid-template-columns: 1fr; } }
.zones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.zones li { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.zones li.office { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.zones .z { display: flex; gap: 6px; align-items: center; justify-content: space-between; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zones .z .pill { font-size: .62rem; padding: 1px 6px; letter-spacing: .02em; }
.zones .t { font-family: var(--display); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.zones .m { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.wx .now { display: flex; gap: 12px; align-items: center; }
.wx .now .e { font-size: 2.4rem; line-height: 1; }
.wx .now .deg { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.wx .now .lbl { font-weight: 700; }
.wx .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wx .facts span { padding: 3px 10px; border-radius: 999px; background: var(--chip); font-size: .8rem; font-weight: 600; color: var(--muted); }
.cal-link { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.cal-link .note { margin: 0; }
.cal-link .actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.cal-link .actions .status { margin: 0 auto 0 0; }
.cal-day { margin: 14px 0 2px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal-day:first-child { margin-top: 0; }
.feed .cal-time { flex: none; width: 4.6rem; font-family: var(--mono); font-size: .78rem; color: var(--muted); padding-top: 2px; }
.wx-zip { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.wx-zip label { flex: 1; }
.quote { border-top: 4px solid var(--accent); }
.quote blockquote { margin: 6px 0 0; }
.quote blockquote p { margin: 0; font-family: var(--display); font-style: italic; font-size: 1.2rem; line-height: 1.4; text-wrap: pretty; }
.quote blockquote footer { margin-top: 8px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.daily > .quote { grid-column: 1 / -1; }
/* Affirmation of the day card on News (the dashboard styles its own dad joke card) */
.egg { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; border-left: 4px solid var(--band); }
.egg-em { font-size: 1.8rem; line-height: 1; }
.egg-body { flex: 1; min-width: 0; }
.egg .eyebrow-s { color: var(--band); }
.egg-q { margin: 0; font-family: var(--display); font-size: 1.08rem; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.egg-a { margin: 6px 0 0; font-weight: 700; color: var(--accent); }
@media (max-width: 560px) { .egg { flex-wrap: wrap; } .egg-em { display: none; } }
.recipe { border-top: 4px solid #C68A1B; }
.recipe .eyebrow-s { color: #8F5A00; }
.recipe h3 { margin-top: 2px; }
.recipe details { margin-top: 10px; }
.recipe summary { cursor: pointer; font-weight: 600; color: var(--band); }
.recipe .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 10px; font-size: .9rem; }
.recipe h4 { margin: 0 0 4px; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.recipe ul, .recipe ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cardhead a { font-size: .86rem; font-weight: 600; color: var(--band); text-decoration: none; white-space: nowrap; }
.cardhead a:hover { text-decoration: underline; }
.nudge { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: var(--r); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.nudge p { margin: 0; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed > li { padding: 12px 0; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.feed > li:first-child { border-top: 0; padding-top: 2px; }
.feed .t { font-weight: 600; }
.feed .m { font-size: .8rem; color: var(--muted); }
.feed .b { font-size: .9rem; margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.feed .b.clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.datebox { flex: none; width: 50px; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.datebox b { display: block; background: var(--accent); color: #fff; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; }
.datebox span { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 700; line-height: 1.4; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--muted); }
.k-event { --k: #FE019A; } .k-concert { --k: #2E5C8A; } .k-sports { --k: #1C0264; } .k-festival { --k: #C68A1B; } .k-market { --k: #2FA35A; } .k-restaurant { --k: #E8890C; } .k-meeting { --k: #5B2BD9; }
.dot[class*="k-"] { background: var(--k); }
.lunch { margin-top: 14px; padding: 14px; border-radius: var(--r); background: color-mix(in srgb, #E8890C 10%, var(--surface)); border: 1px dashed color-mix(in srgb, #E8890C 50%, var(--line)); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lunch .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B4610A; }
.lunch h4 { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.cele { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cele li { display: flex; gap: 10px; align-items: center; }
.cele .what { font-size: .82rem; color: var(--muted); }
.spot { display: flex; flex-direction: column; gap: 12px; }
.spot .top { display: flex; gap: 14px; align-items: center; }
.spot h4 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.spot p.q { margin: 0; font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.eyebrow-s { margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px; }
.tools .tile { min-height: 0; padding: 18px; gap: 6px; }
.tools .tile h2 { font-size: 1.15rem; }
.tools .tile p { font-size: .86rem; }
.tools .tile .ic { width: 40px; height: 40px; border-radius: 10px; }
.tools .tile .ic svg { width: 22px; height: 22px; }
.tools .tile .stat { font-size: .84rem; }
.tools .tile .stat b { font-size: 1.15rem; }

/* ---------- Around Town ---------- */
.cal-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cal-head h2 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin: 0; min-width: 9ch; }
.cal-nav { display: flex; gap: 6px; align-items: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .wd { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; }
.cal button.day { all: unset; box-sizing: border-box; cursor: pointer; min-height: 92px; padding: 6px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal button.day:hover { border-color: var(--muted); }
.cal button.day:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.cal button.day.out { background: transparent; opacity: .45; }
.cal button.day.today .n { background: var(--accent); color: #fff; }
.cal button.day[aria-pressed="true"] { border-color: var(--band); box-shadow: inset 0 0 0 1px var(--band); }
.cal .n { align-self: flex-start; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: center; border-radius: 999px; padding: 0 4px; }
.cal .ev { font-size: .72rem; line-height: 1.25; padding: 2px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--k) 16%, transparent); border-left: 3px solid var(--k); }
.cal .more { font-size: .7rem; color: var(--muted); padding-left: 4px; }
@media (max-width: 640px) { .cal button.day { min-height: 54px; } .cal .ev { font-size: 0; padding: 0; height: 6px; border-left-width: 0; background: var(--k); } .cal .more { display: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--muted); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.pick { display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--k); }
.pick .kind { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k); }
.pick h3 { margin: 0; }
.pick .where { font-size: .84rem; color: var(--muted); }
.pick .where a { color: inherit; }
.pick .desc { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.pick .when { font-size: .86rem; font-weight: 600; }
.pick .foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pick .going { font-size: .8rem; color: var(--muted); }
.ghost.on { background: var(--band); border-color: var(--band); color: #fff; }
.daylist { display: flex; flex-direction: column; gap: 12px; }
.wdpick { display: flex; flex-wrap: wrap; gap: 6px; }
.wdpick label { display: inline-flex; gap: 4px; align-items: center; font-size: .86rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }

/* ---------- Directory and profile ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.person { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s, transform .15s; }
.person:hover, .person:focus-visible { border-color: var(--band); box-shadow: 0 12px 28px rgba(28,2,100,.12); }
@media (prefers-reduced-motion: no-preference) { .person:hover { transform: translateY(-2px); } }
.person:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.person .av { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
.person h3 { margin: 6px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.08rem; }
.person .ti { font-size: .85rem; color: var(--muted); }
.person.off { opacity: .55; }
dialog.profile { width: min(680px, calc(100vw - 24px)); }
.prof { padding: 0 !important; gap: 0 !important; }
.prof .ph-top { background: radial-gradient(400px 120px at 90% 0, rgba(254,1,154,.22), transparent 70%), var(--chip); height: 90px; }
.prof .pbody { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.prof .av { margin-top: -56px; border: 4px solid var(--surface); }
.prof h3 { font-size: 1.6rem; }
.prof .bio { white-space: pre-line; margin: 0; font-size: .95rem; max-height: 40vh; overflow: auto; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; }
.facts a { font-weight: 600; }
.me-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 720px) { .me-grid { grid-template-columns: 1fr; } }
.me-photo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.me-photo .av { box-shadow: 0 0 0 5px var(--surface), 0 0 0 8px var(--accent); }
.me-form { display: flex; flex-direction: column; gap: 14px; }
.me-form textarea[name=bio] { min-height: 12em; }

/* ---------- Seasons ---------- */
.hero .season { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: var(--chip); color: var(--fg); font-size: .86rem; font-weight: 600; }
.hero .deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero .deco span { position: absolute; font-size: 28px; opacity: .18; animation: drift 14s linear infinite; }
@keyframes drift { from { transform: translateY(-40px) rotate(0); } to { transform: translateY(260px) rotate(200deg); } }
.hero .deco span.leaf { animation-name: flutter; animation-timing-function: ease-in-out; }
@keyframes flutter { 0% { transform: translate(0, -40px) rotate(0); } 25% { transform: translate(18px, 40px) rotate(60deg); } 50% { transform: translate(-14px, 120px) rotate(150deg); } 75% { transform: translate(16px, 200px) rotate(230deg); } 100% { transform: translate(-6px, 280px) rotate(320deg); } }
.hero .deco .patch { position: absolute; right: 8px; bottom: -6px; width: clamp(220px, 31vw, 360px); }
.hero .deco .patch svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(107,58,18,.15)); }
@media (max-width: 640px) { .hero .deco .patch { width: 190px; opacity: .55; } }
/* Keep the quick links clear of the pumpkin patch in the corner. */
.hero.patched .quick { margin-right: calc(clamp(220px, 31vw, 360px) + 4px); }
@media (max-width: 640px) { .hero.patched .quick { margin-right: 194px; } }
@media (prefers-reduced-motion: reduce) { .hero .deco span { animation: none; } }
.hero.s-fall, .hero.s-thanks { background: radial-gradient(900px 380px at 90% -30%, rgba(255,140,40,.16), transparent 60%), radial-gradient(700px 360px at 0% 130%, rgba(190,40,90,.10), transparent 60%), var(--surface); }
.hero.s-halloween { background: radial-gradient(900px 380px at 90% -30%, rgba(255,120,0,.18), transparent 60%), radial-gradient(700px 360px at 0% 130%, rgba(123,44,255,.12), transparent 60%), var(--surface); }
.hero.s-holidays, .hero.s-winter, .hero.s-newyear { background: radial-gradient(900px 380px at 90% -30%, rgba(80,170,255,.16), transparent 60%), radial-gradient(700px 360px at 0% 130%, rgba(254,1,154,.10), transparent 60%), var(--surface); }
.hero.s-spring, .hero.s-stpat, .hero.s-cinco { background: radial-gradient(900px 380px at 90% -30%, rgba(255,120,200,.16), transparent 60%), radial-gradient(700px 360px at 0% 130%, rgba(47,179,107,.14), transparent 60%), var(--surface); }
.hero.s-summer, .hero.s-july4 { background: radial-gradient(900px 380px at 90% -30%, rgba(255,197,49,.22), transparent 60%), radial-gradient(700px 360px at 0% 130%, rgba(254,1,154,.10), transparent 60%), var(--surface); }

/* ---------- Birthdays ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { top: 105vh; transform: rotate(720deg) translateX(40px); } }
.bday { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 14px; color: #fff; background: linear-gradient(110deg, #FE019A, #7B2CFF 55%, #2F80ED); box-shadow: 0 14px 30px rgba(123,44,255,.25); }
.bday .who { display: flex; gap: 14px; align-items: center; }
.bday .av { border: 3px solid #fff; }
.bday h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; }
.bday p { margin: 2px 0 0; opacity: .92; }
.bday .btn { background: #fff; color: #1C0264; }
.bday .btn:hover { background: #FFC531; }
.cardwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; max-height: 45vh; overflow: auto; }
.wish { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid var(--line); font-size: .9rem; }
.wish b { display: block; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.wish:nth-child(3n+2) { background: color-mix(in srgb, #7B2CFF 9%, var(--surface)); }
.wish:nth-child(3n) { background: color-mix(in srgb, #FFC531 14%, var(--surface)); }

/* ---------- Tech Tuesday ---------- */
.tech { background: radial-gradient(500px 220px at 100% 0, rgba(28,2,100,.07), transparent 60%), var(--surface); position: relative; overflow: hidden; border-top: 4px solid var(--band); }
.tech::after { content: "</>"; position: absolute; right: 14px; bottom: -14px; font: 700 5rem/1 var(--mono); color: var(--band); opacity: .06; }
.tech .t { font-family: var(--display); font-size: 1.2rem; font-weight: 700; margin-top: 4px; }
.tech .when { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--band); font-family: var(--mono); font-weight: 500; font-size: .78rem; }
.pill.tt { background: #DDF6FF; color: #075A78; }
.pill.cmte { text-decoration: none; background: color-mix(in srgb, #2E7D5B 14%, var(--chip)); color: var(--fg); }

/* ---------- Committees ---------- */
.cmtes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 18px; align-items: start; }
.cmte-card { display: flex; flex-direction: column; gap: 12px; border-top: 5px solid var(--c); scroll-margin-top: 70px; }
.cmte-card .top { display: flex; gap: 14px; align-items: center; }
.cmte-card .em { font-size: 1.8rem; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, var(--surface)); flex: none; }
.cmte-card h3 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin: 0; }
.faces { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.faces .av { box-shadow: 0 0 0 2px var(--surface); }
.faces .chair { position: relative; }
.c-social { --c: #FE019A; } .c-wellness { --c: #2E7D5B; } .c-marketing { --c: #C68A1B; } .c-volunteer { --c: #2E5C8A; }

/* ---------- Spotlight ---------- */
.star { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px; border-radius: 18px; background: radial-gradient(600px 300px at 100% 0, rgba(255,197,49,.22), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(254,1,154,.08), transparent 60%), var(--surface); color: var(--fg); border: 1px solid var(--line); position: relative; overflow: hidden; }
@media (max-width: 640px) { .star { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.star .av { border: 5px solid #FFC531; box-shadow: 0 16px 40px rgba(28,2,100,.18); }
.star .eyebrow-s { color: #8F5A00; }
.star h2 { font-family: var(--display); font-style: italic; font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; line-height: 1.05; }
.star .hl { font-size: 1.1rem; margin: 6px 0 0; color: var(--muted); }
.star .story { margin: 12px 0 0; white-space: pre-line; }
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.quote { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #FFC531; }
.quote p { margin: 0; font-size: .95rem; }
.quote footer { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.mini-star { display: flex; gap: 14px; align-items: center; }
.mini-star h4 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.vote { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.vote:first-child { border-top: 0; }
.vote ul { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; }
.tech .ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.tech a { color: #2FD3FF; }
.tech .datebox { background: transparent; border-color: rgba(255,255,255,.3); }
.tech .empty { color: rgba(255,255,255,.75); }

/* ---------- Committee guidelines ---------- */
.cmte-guide { margin-bottom: 18px; }
.cmte-guide h2 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; margin: 0; }
.cmte-guide h3 { font-size: .95rem; margin: 0 0 6px; }
.cmte-guide p { margin: 0 0 12px; font-size: .92rem; }
.cmte-guide a { color: var(--band); font-weight: 600; }
.guide-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 28px; }
.chairs { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.chairs li { padding: 4px 12px; border-radius: 999px; font-size: .86rem; background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-left: 4px solid var(--c); }
.req { margin: 0; padding-left: 20px; font-size: .92rem; columns: 2 200px; }
.req li { margin-bottom: 3px; break-inside: avoid; }
.cmte-props { margin-bottom: 18px; }
.cmte-props h2 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: 0; }
.cmte-props .b { white-space: pre-line; }
/* TeaMember Gallery */
.g-year { flex-direction: row; align-items: center; gap: 8px; }
.g-year select { width: auto; }
.g-month h3 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin: 6px 0 10px; }
.g-month + .g-month { margin-top: 18px; }
.g-grid { columns: 4 220px; column-gap: 12px; }
.g-tile { display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--chip); cursor: zoom-in; break-inside: avoid; }
.g-tile img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.g-tile:hover img { transform: scale(1.03); }
.g-tile:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.g-empty { text-align: center; padding: 34px 18px; }
.g-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.g-item { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.g-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--chip); }
.g-item-b { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.g-item-b .actions { margin-top: auto; }
.g-drop { position: relative; display: grid; place-items: center; min-height: 180px; border: 2px dashed var(--line); border-radius: var(--r); background: var(--chip); cursor: pointer; overflow: hidden; text-align: center; font-weight: 600; }
.g-drop:hover, .g-drop:focus-within { border-color: var(--accent); }
.g-drop small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.g-drop img { max-width: 100%; max-height: 320px; display: block; }
.g-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
dialog.g-view { width: min(1000px, calc(100vw - 24px)); }
.g-view figure { margin: 0; }
.g-view img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #0b0420; }
.g-view figcaption { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.g-view #view-cap { margin: 0; font-size: 1.05rem; }
.g-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Slideshow */
dialog.g-show { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; background: #0b0420; color: #FFFCF6; display: none; flex-direction: column; overflow: hidden; }
dialog.g-show[open] { display: flex; }
dialog.g-show::backdrop { background: #0b0420; }
.g-show-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.g-show-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.g-show-stage img.on { opacity: 1; animation: g-drift var(--dur, 6s) ease-out both; }
@keyframes g-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.g-show.paused .g-show-stage img.on { animation-play-state: paused; }
.g-show-bar { height: 3px; background: rgba(255, 255, 255, .12); }
.g-show-bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.g-show-bar span.run { animation: g-bar var(--dur, 6s) linear forwards; }
.g-show.paused .g-show-bar span { animation-play-state: paused; }
@keyframes g-bar { from { width: 0; } to { width: 100%; } }
.g-show-cap { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 14px 22px 18px; background: #1C0264; }
.g-show-cap #show-cap { margin: 0; font-family: var(--display); font-size: 1.25rem; }
.g-show-meta { margin: 2px 0 0; font-size: .85rem; opacity: .75; }
.g-show-ctl { display: flex; align-items: center; gap: 6px; }
.g-show-ctl button, .g-show-ctl select { font: inherit; font-size: .95rem; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: inherit; cursor: pointer; width: auto; }
.g-show-ctl select option { color: var(--fg); }
.g-show-ctl button:hover { border-color: var(--accent); background: rgba(254, 1, 154, .15); }
.g-show-ctl button:focus-visible, .g-show-ctl select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-show-count { font-family: var(--mono); font-size: .8rem; opacity: .75; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .g-show-stage img { transition: none; } .g-show-stage img.on { animation: none; } }
/* Slideshow setup: music and photo picker */
dialog.g-setup { width: min(760px, calc(100vw - 24px)); }
.g-setup form { display: flex; flex-direction: column; gap: 14px; }
.g-music { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g-music legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.g-music-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.g-music-opts label { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; font-weight: 600; font-size: .92rem; min-width: 110px; }
.g-music-opts label small { font-weight: 400; color: var(--muted); font-size: .78rem; }
.g-music-opts label:hover { border-color: var(--muted); }
.g-music-opts label:has(input:checked) { border-color: var(--accent); background: rgba(254, 1, 154, .08); box-shadow: inset 0 0 0 1px var(--accent); }
.g-music-opts label:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.g-music-opts input { position: absolute; opacity: 0; pointer-events: none; }
.g-pick-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; justify-content: space-between; }
.g-pick-btns { display: flex; gap: 6px; }
.g-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 44vh; overflow-y: auto; padding: 2px; }
.g-pick label { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--chip); }
.g-pick img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .45; filter: grayscale(.6); transition: opacity .15s, filter .15s; }
.g-pick input { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.g-pick label::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; }
.g-pick label:has(input:checked)::after { box-shadow: inset 0 0 0 3px var(--accent); }
.g-pick label:has(input:checked) img { opacity: 1; filter: none; }
.g-pick label:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
/* Slideshow title card */
.g-show-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: radial-gradient(ellipse at center, #2a0a7a 0%, #0b0420 70%); z-index: 1; }
.g-show-title[hidden] { display: none; }
.g-show-title.on { animation: g-title-in 1.2s ease-out both; }
.g-show-title h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.05; max-width: 18ch; }
.g-show-title p { margin: 0; font-size: clamp(1rem, 2.2vw, 1.35rem); opacity: .8; max-width: 40ch; }
.g-show-title .g-show-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); opacity: 1; }
@keyframes g-title-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .g-show-title.on { animation: none; } }
/* Story slideshows in the gallery */
.g-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.g-story-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.g-story-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #1C0264; color: #fff; font-size: 2rem; cursor: pointer; overflow: hidden; }
.g-story-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.g-story-cover:hover img { transform: scale(1.04); }
.g-story-cover:disabled { cursor: default; }
.g-story-play, .feat-show-play { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(11, 4, 32, .65); color: #fff; font-size: 1.2rem; border: 2px solid rgba(255, 255, 255, .8); }
.g-story-cover:focus-visible, .feat-show-art:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
dialog.g-story { width: min(880px, calc(100vw - 24px)); }
.g-story form { display: flex; flex-direction: column; gap: 14px; }
.g-story-opts { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.g-story-opts select { width: auto; }
.g-pick-btns select { width: auto; font-size: .88rem; padding: 5px 8px; }
.g-pick-y { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(11, 4, 32, .7); color: #fff; font-family: var(--mono); font-size: .7rem; pointer-events: none; }
.g-order { list-style: none; margin: 0; padding: 4px 2px 8px; display: flex; gap: 8px; overflow-x: auto; min-height: 104px; }
.g-order li { position: relative; flex: 0 0 120px; height: 96px; border-radius: 8px; overflow: hidden; background: var(--chip); }
.g-order li img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-order-n, .g-order-y { position: absolute; top: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(11, 4, 32, .7); color: #fff; font-family: var(--mono); font-size: .7rem; }
.g-order-n { left: 4px; background: var(--accent); }
.g-order-y { right: 4px; }
.g-order-btns { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 3px; background: linear-gradient(transparent, rgba(11, 4, 32, .7)); }
.g-order-btns button { font: inherit; font-size: .8rem; width: 28px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(11, 4, 32, .55); color: #fff; cursor: pointer; }
.g-order-btns button:disabled { opacity: .35; cursor: default; }
.g-order-btns button:hover:not(:disabled) { border-color: var(--accent); }
.g-order li.g-order-empty { flex: 1; display: grid; place-items: center; height: 96px; background: transparent; border: 2px dashed var(--line); }
.g-move-top { display: flex; gap: 14px; align-items: center; }
.g-move-top img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--chip); flex: none; }
.g-move-top p { margin: 0; }
/* Home: the featured story slideshow */
.feat-show { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-radius: var(--r); overflow: hidden; background: #1C0264; color: #FFFCF6; }
.feat-show[hidden] { display: none; }
.feat-show-art { position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; min-height: 220px; padding: 0; border: 0; background: #0b0420; cursor: pointer; }
.feat-show-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.feat-show-art img:first-child { grid-row: 1 / 3; }
.feat-show-art img:only-of-type { grid-column: 1 / 3; }
.feat-show-art:has(img:nth-of-type(2):last-of-type) img { grid-row: 1 / 3; }
.feat-show-art:hover img { transform: scale(1.03); }
.feat-show-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; font-size: 1.5rem; }
.feat-show-b { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.feat-show-b h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; }
.feat-show-sub { margin: 0; font-size: 1.02rem; opacity: .85; }
.feat-show .note { color: rgba(255, 252, 246, .7); margin: 0; }
.feat-show .actions { margin-top: 8px; }
.feat-show .ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
@media (max-width: 720px) { .feat-show { grid-template-columns: 1fr; } }