/* The organised site: one page per audience. Built on the base design (style.css) and the court's parts
   (court.css); this file only adds the pages, the doors on the home page and the "how to use" steps. */

/* ---------- pages ---------- */
.s-view[hidden], .s-daybar[hidden] { display: none !important; }
.s-links a[aria-current="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* ---------- the festival day bar, under the nav on the pages that use the day ---------- */
.s-daybar { position: sticky; top: var(--nav); z-index: 1100; background: var(--surface); border-bottom: 1px solid var(--rule);
  padding: .55rem var(--pad); }
.s-dayin { max-width: var(--max); margin-inline: auto; display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; }
.s-dayin label { font: 500 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.s-dayin select { width: auto; max-width: min(560px, 100%); flex: 0 1 auto; padding-block: .4rem; }
.s-dayin .c-linkbtn { padding: 0; }
.s-dayname { display: none; }

/* ---------- home ---------- */
.s-top { padding-bottom: clamp(2rem, 4vw, 3.2rem); }
.s-homehero { max-width: var(--max); margin-inline: auto; }
.s-homehero .lede { max-width: 64ch; }
.s-herobtns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; align-items: center; }
.s-herobtns .c-tourbtn { width: auto; margin: 0; color: var(--h-ink); border-color: var(--h-rule); padding-inline: 1.3rem; }
.s-herobtns .c-tourbtn:hover { border-color: var(--h-ink); }
.s-ghost { color: var(--h-muted); font-size: .95rem; text-underline-offset: 4px; }
.s-ghost:hover { color: var(--h-ink); }

.s-doors { max-width: var(--max); margin: clamp(2rem, 4vw, 3rem) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.s-door { display: grid; gap: .55rem; align-content: start; text-decoration: none; padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid var(--h-rule); border-radius: 16px; background: rgba(255, 255, 255, .03);
  transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.s-door:hover { border-color: var(--h-ink); background: rgba(255, 255, 255, .06); transform: translateY(-2px); }
.s-who { font: 500 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #FF7FB0; }
.s-door strong { font: 400 clamp(1.5rem, 2.3vw, 1.9rem)/1.08 var(--display); letter-spacing: -.01em; color: var(--h-ink); font-weight: 400; }
.s-what { color: var(--h-muted); font-size: .93rem; }
.s-go { margin-top: .4rem; font-weight: 600; font-size: .9rem; color: var(--h-ink); }
.s-go::after { content: " \2192"; }

.s-steps3 { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.s-steps3 li { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 1.3rem; display: grid; gap: .5rem; align-content: start; }
.s-steps3 h3 { font-size: 1.05rem; }
.s-steps3 p { color: var(--muted); font-size: .93rem; }
.s-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 600 .85rem var(--mono); }

.s-why { display: grid; gap: .3rem; margin-top: 1rem !important; text-decoration: none; padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule); border-left: 4px solid var(--qloo); border-radius: 12px; background: var(--qloo-tint); }
.s-why .kicker { margin: 0; }
.s-why strong { font: 400 1.5rem/1.1 var(--display); font-weight: 400; }
.s-why span:last-child { color: var(--ink-2); font-size: .93rem; }
.s-why span:last-child::after { content: " \2192"; font-weight: 600; }
.s-why:hover { border-color: var(--qloo); }

/* ---------- audience pages: how to use, try, why Qloo ---------- */
.s-how { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .6rem; max-width: 60ch; }
.s-how li { counter-increment: s; position: relative; padding-left: 2.3rem; color: var(--h-muted); font-size: .95rem; }
.s-how li::before { content: counter(s); position: absolute; left: 0; top: .05rem; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--h-rule); display: grid; place-items: center; font: 600 .72rem var(--mono); color: var(--h-ink); }
.s-how b { color: var(--h-ink); font-weight: 600; }

.s-plan form { display: grid; gap: .45rem; margin-top: 1rem; }
.s-plan form label { margin: 0; }
.s-try-k { font: 500 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .4rem; }
.s-try { align-items: center; }
form .s-try { margin-top: .6rem; }
form .s-try .s-try-k { margin: 0 .2rem 0 0; }
.s-whyq { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.s-whyq b { color: var(--qloo); font-weight: 600; }

.s-tools h2 { font: 400 1.9rem/1.05 var(--display); letter-spacing: -.01em; }
.s-toollist { margin: 1rem 0 0; display: grid; gap: .85rem; }
.s-toollist dt { font-weight: 600; }
.s-toollist dd { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
.s-toollist div + div { border-top: 1px solid var(--rule); padding-top: .85rem; }

.s-short { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* ---------- phones ---------- */
/* The pages are the only way around this site, so its links stay on small screens (court.css hides them). */
@media (max-width: 900px) {
  .nav-links.s-links { display: flex; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .nav-links.s-links::-webkit-scrollbar { display: none; }
  .s-for { display: none; }
}
@media (max-width: 1080px) {
  .s-doors, .s-steps3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .nav .logo { font-size: 0; gap: 0; }
  .nav .logo .logo-mark { font-size: 1rem; }
  .s-links { gap: 0; }
  .s-links a, .nav-links.s-links a:nth-child(-n + 2) { display: inline-block; padding: .4rem .45rem; font-size: .82rem; }
  .s-for { display: none; }
  .s-dayin select { max-width: 100%; flex: 1 1 100%; }
  .s-daybar { position: static; }
}

/* ---------- friends' month: the plan as a calendar and an agenda ---------- */
.s-whoall { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 1rem; }
.s-whoall span { font: 500 .72rem var(--mono); border: 1px solid var(--rule-2); border-radius: 999px; padding: .2rem .6rem; color: var(--ink-2); }
.s-mcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 1.4rem; }
.s-day { min-height: 76px; border: 1px solid var(--rule); border-radius: 8px; padding: 5px 6px; display: grid; align-content: start; gap: 3px;
  text-align: left; background: none; color: var(--faint); font: inherit; min-width: 0; }
.s-day.blank { border: 0; }
.s-day .dn { font: 400 1.05rem/1 var(--display); }
.s-day.on { color: var(--ink); border-color: var(--ink-2); background: var(--field); cursor: pointer; }
.s-day.on.all { background: var(--qloo-tint); border-color: var(--qloo); }
.s-day.on:hover { border-color: var(--ink); }
.s-day .da { font-size: .72rem; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.s-day .dw { display: flex; gap: 2px; flex-wrap: wrap; }
.s-day .dw i { font: 600 .58rem/1 var(--mono); font-style: normal; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); }
.s-day.all .dw i { background: var(--qloo); color: #fff; }
.s-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.s-agenda li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: start; padding: .85rem 0;
  border-top: 1px solid var(--rule); scroll-margin-top: 140px; }
.s-agenda li.all { box-shadow: inset 3px 0 0 var(--qloo); padding-left: .8rem; }
.s-when { display: grid; font-size: .9rem; }
.s-when span { font: 400 .74rem var(--mono); color: var(--muted); }
.s-agw { display: grid; gap: .15rem; min-width: 0; }
.s-agh { color: var(--muted); }
.s-agh strong { font-size: 1rem; color: var(--ink); }
.s-going b { color: var(--qloo); font-weight: 600; font-size: .88rem; }
.s-going span { font-size: .88rem; color: var(--ink-2); }
.s-alt { font-size: .8rem; color: var(--muted); }
.s-act { display: flex; gap: .5rem; align-items: center; }
.s-tix { font-size: .85rem; font-weight: 600; }
@media (max-width: 700px) {
  .s-day { min-height: 54px; padding: 3px; }
  .s-day .da { display: none; }
  .s-agenda li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the same engine: fans, promoters and the evidence, under the court ---------- */
.s-alsogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.s-alsocard { display: grid; gap: .45rem; align-content: start; text-decoration: none; padding: 1.3rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 16px; transition: border-color .2s ease, transform .2s ease; }
.s-alsocard:hover { border-color: var(--ink); transform: translateY(-2px); }
.s-alsocard .kicker { margin: 0; }
.s-alsocard strong { font: 400 1.55rem/1.1 var(--display); font-weight: 400; }
.s-alsocard span:last-child { color: var(--muted); font-size: .93rem; }
.s-alsocard span:last-child::after { content: " \2192"; color: var(--ink); font-weight: 600; }
.s-alsocard.q { border-left: 4px solid var(--qloo); background: var(--qloo-tint); }
@media (max-width: 1080px) { .s-alsogrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- why Qloo: headline metrics and test cards ---------- */
.s-metrics { max-width: var(--max); margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--h-rule); }
.s-metrics > div { padding: 1.1rem 1rem 0 0; display: grid; gap: .3rem; align-content: start; }
.s-metrics > div + div { padding-left: 1.2rem; border-left: 1px solid var(--h-rule); }
.s-metrics dt { font: 500 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--h-muted); }
.s-metrics dd { margin: 0; font: 400 clamp(2.2rem, 4vw, 3.4rem)/1 var(--display); color: #FF7FB0; font-variant-numeric: tabular-nums; }
.s-metrics dd small { font-size: .45em; color: var(--h-muted); margin-left: .1em; }
.s-metrics span { font-size: .84rem; color: var(--h-muted); }
.c-vs.s-one.seen .c-bars2 .b i { width: calc(var(--v) * 100%); }
.c-vs.s-one.seen .c-bars2.s-zoom .b i { width: calc((var(--v) - .6) / .15 * 100%); } /* axis 0.60 to 0.75, so the gains show */
.s-note { margin-top: .8rem; }
.s-tests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.s-test { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--qloo); border-radius: 14px; padding: 18px;
  display: grid; gap: .55rem; align-content: start; }
.s-test header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.s-tn { font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.s-chip { font: 600 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.s-chip.sig { background: var(--qloo); border-color: var(--qloo); color: #fff; }
.s-test h3 { font: 400 1.45rem/1.12 var(--display); font-weight: 400; }
.s-test p { font-size: .9rem; color: var(--ink-2); }
.s-test p b { color: var(--ink); }
.s-res { margin: .3rem 0 0; display: grid; gap: .35rem; border-top: 1px solid var(--rule); padding-top: .6rem; }
.s-res div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .6rem; font-size: .88rem; }
.s-res dt { color: var(--muted); }
.s-res dd { margin: 0; }
.s-res dd b { color: var(--qloo); font-weight: 600; }
@media (max-width: 1000px) {
  .s-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-metrics > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .s-metrics > div:nth-child(n + 3) { border-top: 1px solid var(--h-rule); padding-top: 1rem; margin-top: 1rem; }
  .s-tests { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) { .s-res div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }

/* ---------- the market, on the front page ---------- */
.s-market h2 em { font-style: italic; color: var(--qloo); }
.s-mstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.s-mstat { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 18px; display: grid; gap: .4rem; align-content: start; }
.s-mstat b { font: 400 clamp(2rem, 3.4vw, 2.8rem)/1 var(--display); font-weight: 400; }
.s-mstat span { font-size: .9rem; color: var(--ink-2); }
.s-mstat i { font: 400 .7rem var(--mono); color: var(--muted); font-style: normal; }
.s-mstat.q { background: var(--qloo-tint); border-color: var(--qloo); }
.s-mstat.q b { color: var(--qloo); }
.s-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.s-case { border: 1px solid var(--rule); border-left: 4px solid var(--qloo); border-radius: 12px; padding: 18px; background: var(--surface); display: grid; gap: .45rem; align-content: start; }
.s-case .kicker { margin: 0; }
.s-case h3 { font: 400 1.4rem/1.12 var(--display); font-weight: 400; }
.s-case p { font-size: .9rem; color: var(--ink-2); }
.s-src { margin-top: 1rem !important; font-size: .78rem; }
.c-faceoff .wd { display: block; font-size: .74rem; color: var(--muted); max-width: 16ch; text-align: center; line-height: 1.25; margin-top: .15rem; }
.c-route .wd { color: var(--muted); font-size: .85em; }
@media (max-width: 1080px) { .s-mstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-cases { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .s-mstats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- why Qloo: interactive charts ---------- */
.w-charts { display: grid; gap: 16px; }
.w-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.w-panel { display: grid; gap: 1rem; }
.w-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem 1.5rem; flex-wrap: wrap; }
.w-head .hint { max-width: 62ch; margin-top: .3rem; }
.w-legend { display: flex; gap: .4rem 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); }
.w-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.w-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.w-legend i.k-right { background: var(--qloo); } .w-legend i.k-wrong { background: var(--warn); } .w-legend i.k-none { background: var(--rule-2); }
svg .k-right { fill: var(--qloo); stroke: var(--qloo); } svg .k-wrong { fill: var(--warn); stroke: var(--warn); }
svg .k-none { fill: var(--rule-2); stroke: var(--rule-2); } svg .k-alt { fill: var(--city); stroke: var(--city); }
svg path.k-right, svg path.k-wrong, svg path.k-none, svg path.k-alt, svg rect.k-right, svg rect.k-none { stroke: none; cursor: pointer; }
.w-track { fill: none; stroke: color-mix(in srgb, var(--rule) 60%, transparent); }
.w-donuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.w-donuts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-donut { display: grid; justify-items: center; gap: .5rem; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--rule); }
.w-donut.q { background: var(--qloo-tint); border-color: color-mix(in srgb, var(--qloo) 45%, transparent); }
.w-donut svg { width: 100%; max-width: 168px; height: auto; overflow: visible; }
.w-cnum { font: 400 26px var(--display); fill: var(--ink); }
.w-csub { font: 500 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.w-dl { display: grid; text-align: center; gap: .1rem; }
.w-dl b { font-size: .9rem; } .w-dl span { font-size: .78rem; color: var(--muted); }
.w-dumb svg, #w-pop svg { width: 100%; height: auto; display: block; }
.w-axis text { font: 400 11px var(--mono); fill: var(--muted); }
.w-axis line { stroke: var(--rule); }
.w-hit { fill: transparent; } .w-row:hover .w-hit { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.w-rl { font: 600 14px var(--body); fill: var(--ink); } .w-rl.sm { font-size: 13px; }
.w-rs { font: 400 11px var(--mono); fill: var(--muted); }
.w-ci { stroke-width: 2; stroke-linecap: round; opacity: .55; }
.w-link { stroke: var(--qloo); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.w-dot { stroke: var(--surface) !important; stroke-width: 2; }
.w-val { font: 500 12px var(--mono); fill: var(--ink); }
.w-ver { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--muted); }
.w-ver.sig { fill: var(--qloo); }
.w-bv { font: 600 11px var(--mono); fill: var(--ink); } .w-bv.mute { fill: var(--muted); font-weight: 400; }
.w-controls { display: flex; gap: .6rem; flex-wrap: wrap; }
.w-controls .toggle { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.w-waffle-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1.5rem; align-items: center; }
.w-waffle { display: grid; grid-template-columns: repeat(auto-fill, 11px); gap: 3px; }
.w-waffle i { width: 11px; height: 11px; border-radius: 2px; background: color-mix(in srgb, var(--rule-2) 70%, transparent); display: block; }
.w-waffle i.on { background: var(--warn); animation: w-pop .5s ease both; }
@keyframes w-pop { from { transform: scale(0); } to { transform: scale(1); } }
.w-big { display: grid; gap: .3rem; }
.w-big b { font: 400 clamp(3rem, 6vw, 4.6rem)/1 var(--display); color: var(--warn); }
.w-big b.zero { color: var(--qloo); }
.w-big span { font-size: .88rem; color: var(--ink-2); }
.w-tip { position: fixed; z-index: 1600; max-width: 300px; background: var(--ink); color: var(--bg); font-size: .8rem; line-height: 1.4;
  padding: .55rem .7rem; border-radius: 8px; pointer-events: none; box-shadow: var(--shadow); }
.w-tip b { color: inherit; }
@media (max-width: 1000px) { .w-two { grid-template-columns: minmax(0, 1fr); } .w-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .w-waffle-wrap { grid-template-columns: minmax(0, 1fr); } .w-waffle { grid-template-columns: repeat(auto-fill, 7px); gap: 2px; }
  .w-waffle i { width: 7px; height: 7px; } }
@media (prefers-reduced-motion: reduce) { .w-waffle i.on { animation: none; } }
.w-legend i.k-alt { background: var(--city); }
.w-dumb, #w-pop { min-height: 120px; }
.w-charts { grid-template-columns: minmax(0, 1fr); } .w-panel, .w-two > * { min-width: 0; }

/* ---------- headings and panels rise into place on scroll ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--rv, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--rv, 0ms); }
.rv.in { opacity: 1; transform: none; }
.band-head.rv .kicker { position: relative; display: inline-block; }
.band-head.rv .kicker::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0; background: var(--qloo);
  transition: width .9s cubic-bezier(.2, .8, .2, 1) .25s; }
.band-head.rv.in .kicker::after { width: 100%; }
.band-head.rv h2 { transition: letter-spacing .9s ease .1s; letter-spacing: .01em; }
.band-head.rv.in h2 { letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- header steps aside on scroll down ---------- */
.nav, .s-daybar { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
body.nav-up .nav { transform: translateY(-100%); }
body.nav-up .s-daybar { transform: translateY(calc(-100% - var(--nav))); }

/* ---------- folded explanations ---------- */
.s-fold { display: none; }
.s-fold.open { display: block; animation: c-in .3s ease both; }
.s-info { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-end; background: none; border: 1px solid var(--rule-2);
  border-radius: 999px; padding: .32rem .8rem .32rem .4rem; font-size: .82rem; color: var(--ink-2); }
.s-info span { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg);
  font: 600 .7rem var(--mono); font-style: italic; }
.s-info:hover, .s-info[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.band-head:has(.s-fold.open) { align-items: flex-start; }
.s-howto { margin-top: 1.3rem; }
.s-howto summary { cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; color: var(--h-ink); font-weight: 600; font-size: .92rem;
  list-style: none; border: 1px solid var(--h-rule); border-radius: 999px; padding: .4rem .9rem; }
.s-howto summary::-webkit-details-marker { display: none; }
.s-howto summary::after { content: "+"; font: 500 1rem var(--mono); color: #FF7FB0; }
.s-howto[open] summary::after { content: "\2212"; }
.s-howto .s-how { margin-top: .9rem; }

/* ---------- timetable: names wrap, arcs stay quiet until a set is pointed at ---------- */
.c-grid { min-width: 920px; }
.c-cell .a { white-space: normal; align-items: flex-start; gap: .3rem; font-size: .76rem; line-height: 1.2; max-height: 2.45em; overflow: hidden; }
.c-cell .a .c-av { flex: none; margin-top: 1px; }
.c-arcs .arc { stroke-width: calc(1px + var(--w) * 2.2px); opacity: calc(.14 + var(--w) * .3); filter: none; }
.c-arcs .arc.hl { opacity: .95; stroke-width: 3.5px; }
.c-arcs .arc.fade { opacity: .05; }
.c-festnote { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.c-festnote::before { content: "Source note: "; font-weight: 600; }
.c-festnote.open { -webkit-line-clamp: unset; }

/* ---------- front page: section buttons, the headline result, the score before the court sits ---------- */
.s-jump { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.3rem; }
.s-jump button { background: rgba(255, 255, 255, .04); border: 1px solid var(--h-rule); color: var(--h-ink); border-radius: 999px;
  padding: .38rem .85rem; font-size: .84rem; }
.s-jump button:first-child { border-color: #FF7FB0; color: #FF7FB0; }
.s-jump button:hover { border-color: var(--h-ink); background: rgba(255, 255, 255, .1); }
.c-n.pending { color: var(--faint); }
.s-cvhint { margin-top: .45rem; font-size: .8rem; }
.c-scorehint b { color: var(--ink); font-weight: 600; }
.s-proof { background: var(--qloo-tint); border-top: 1px solid color-mix(in srgb, var(--qloo) 30%, transparent); }
.s-proofin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 2rem; align-items: center; }
.s-proofhead h2 { font: 400 clamp(2rem, 3.6vw, 3rem)/1.04 var(--display); letter-spacing: -.015em; }
.s-proofhead h2 em { color: var(--qloo); }
.s-proofhead .hint { margin-top: .7rem; max-width: 42ch; }
.s-proofgo { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--qloo); }
.s-proofgo::after { content: " \2192"; }
.s-prooftiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s-pt { background: var(--surface); border: 1px solid color-mix(in srgb, var(--qloo) 35%, transparent); border-radius: 14px; padding: 18px;
  display: grid; gap: .5rem; align-content: start; }
.s-pk { font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.s-pv { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.s-pv s { font: 400 1.5rem var(--display); color: var(--faint); text-decoration-thickness: 2px; }
.s-pv b { font: 400 clamp(2.4rem, 4vw, 3.2rem)/1 var(--display); color: var(--qloo); font-weight: 400; }
.s-pv s::after { content: " \2192"; text-decoration: none; display: inline-block; margin-left: .3rem; color: var(--muted); }
.s-ps { font-size: .84rem; color: var(--ink-2); }
@media (max-width: 1000px) { .s-proofin { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .s-prooftiles { grid-template-columns: minmax(0, 1fr); } }
.c-score:has(.c-n.pending) .c-cut { color: var(--muted); font-weight: 500; }

/* ---------- a red brush underline that paints itself under the key words ---------- */
:root { --brush: #FF2E4D; }
.wordmark em, .band-head h2 em, .s-proofhead h2 em, .s-market h2 em {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 80 5, 160 21, 240 11 S 360 9, 396 14' fill='none' stroke='%23FF2E4D' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 96%; background-size: 0% .34em; padding-bottom: .06em; }
.wordmark em { animation: brush 1.1s cubic-bezier(.2, .8, .2, 1) .5s forwards; }
.band-head.rv.in h2 em, .s-proofhead h2 em, .band-head:not(.rv) h2 em { animation: brush 1s cubic-bezier(.2, .8, .2, 1) .35s forwards; }
@keyframes brush { to { background-size: 100% .34em; } }
@media (prefers-reduced-motion: reduce) { .wordmark em, .band-head h2 em, .s-proofhead h2 em { animation: none; background-size: 100% .34em; } }

/* ---------- map pins ---------- */
.m-pin { width: var(--s); height: var(--s); position: relative; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); animation: m-drop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.m-pin::before { content: ""; position: absolute; inset: 0; background: var(--qloo); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid #fff; }
.m-pin.lfm::before { background: var(--city); }
.m-pin i { position: absolute; left: 50%; top: 42%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; }
@keyframes m-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.c-pin { background: none !important; position: relative; color: #fff; font-weight: 700; }
.c-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--qloo); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.c-pin.wide::before { border-radius: 999px; transform: none; }

/* ---------- the clash slider ---------- */
.s-range { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .5rem 0 .2rem; font-size: .8rem; color: var(--ink-2); }
.s-range input[type=range] { -webkit-appearance: none; appearance: none; width: 200px; height: 6px; border-radius: 999px; padding: 0; border: 0;
  background: linear-gradient(90deg, var(--brush) var(--p, 25%), var(--rule-2) var(--p, 25%)); cursor: pointer; }
.s-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 3px solid var(--brush); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.s-range input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--brush); }
.s-range output { font: 600 .85rem var(--mono); color: var(--brush); min-width: 2.6em; }
.s-rangen { font: 400 .74rem var(--mono); color: var(--muted); }
.c-pin { isolation: isolate; }

/* ---------- underlines off; a red hand-drawn circle around GPT-6 Astra ---------- */
.wordmark em, .band-head h2 em, .s-proofhead h2 em, .s-market h2 em { background-image: none !important; animation: none !important; padding-bottom: 0; }
.s-circ { position: relative; display: inline-block; color: var(--ink); white-space: nowrap; padding: 0 .12em; }
.s-circ::after { content: ""; position: absolute; left: -12%; right: -12%; top: -24%; bottom: -26%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M40 22 C 110 2, 240 4, 282 40 C 312 70, 250 112, 150 114 C 50 116, 6 92, 12 58 C 18 26, 80 10, 168 12' fill='none' stroke='%23FF2E4D' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); animation: circ 1.1s cubic-bezier(.2, .8, .2, 1) .4s forwards; }
@keyframes circ { to { clip-path: inset(0 0 0 0); } }
.s-circnote { font: 600 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #FF2E4D; margin-top: .9rem; }
.s-circnote::before { content: "\2191  "; }
@media (prefers-reduced-motion: reduce) { .s-circ::after { animation: none; clip-path: none; } }
.s-circ { margin-left: .35em; margin-right: .1em; }
.s-circ::after { left: -9%; right: -9%; }

/* ---------- front page calls to action ---------- */
.s-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.s-cta button { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center;
  text-align: left; padding: .85rem 1.3rem; border-radius: 14px; font-weight: 700; font-size: 1.02rem; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease; }
.s-cta button small { grid-column: 2; font-weight: 400; font-size: .76rem; opacity: .8; }
.s-cta button > span { grid-row: span 2; }
.s-cta button:hover { transform: translateY(-2px); }
.s-cta button::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: s-shine 3.6s ease-in-out infinite; }
@keyframes s-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.s-go1 { background: #FF2E4D; color: #fff; border: 0; box-shadow: 0 10px 30px -10px rgba(255, 46, 77, .7); }
.s-go2 { background: rgba(255, 255, 255, .06); color: var(--h-ink); border: 1px solid rgba(255, 127, 176, .6); }
.s-go2::after { animation-delay: 1.8s; }
.s-gl { font-size: 1.4rem; }
.s-pulse { width: 12px; height: 12px; border-radius: 50%; background: #FF7FB0; box-shadow: 0 0 0 0 rgba(255, 127, 176, .7); animation: s-ping 1.8s infinite; }
@keyframes s-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 127, 176, .7); } 80%, 100% { box-shadow: 0 0 0 12px rgba(255, 127, 176, 0); } }

/* ---------- the agent band ---------- */
.s-agent { background: var(--h-bg); color: var(--h-ink); }
.s-agent .kicker { color: #FF7FB0; }
.s-agent .hint { color: var(--h-muted); margin-top: .7rem; max-width: 52ch; }
.s-agent h2 { font: 400 clamp(2rem, 3.6vw, 3rem)/1.04 var(--display); letter-spacing: -.015em; color: var(--h-ink); }
.s-agentin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.4rem; align-items: center; }
.s-agentbox { border: 1px solid rgba(255, 127, 176, .45); border-radius: 18px; padding: 18px; background: rgba(255, 255, 255, .03);
  box-shadow: 0 0 60px -20px rgba(255, 46, 77, .45); display: grid; gap: .9rem; }
.s-trace { display: grid; gap: .35rem; font: 400 .82rem var(--mono); color: var(--h-muted); }
.s-trace span { opacity: 0; animation: s-type .5s ease forwards; animation-delay: calc(var(--i) * .9s + .4s); }
.s-trace span:last-child { color: #5FD08F; }
@keyframes s-type { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.s-agentform { display: flex; gap: .5rem; }
.s-agentform input { flex: 1; min-width: 0; background: rgba(255, 255, 255, .07); border: 1px solid var(--h-rule); color: var(--h-ink); }
.s-agentform input::placeholder { color: var(--h-muted); }
.s-agentchips button { background: none; border-color: var(--h-rule); color: var(--h-ink); }
.s-agentchips button:hover { background: #FF2E4D; border-color: #FF2E4D; color: #fff; }
@media (max-width: 1000px) { .s-agentin { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the floating agent button: bigger and alive ---------- */
.c-askbtn { padding: .9rem 1.3rem !important; font-size: 1rem !important; background: linear-gradient(135deg, #FF2E4D, #D4266E) !important;
  color: #fff !important; box-shadow: 0 12px 34px -10px rgba(255, 46, 77, .75) !important; animation: s-float 3s ease-in-out infinite; }
.c-askbtn .dot { background: #fff !important; animation: s-ping 1.8s infinite; }
@keyframes s-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .s-cta button::after, .s-pulse, .c-askbtn, .c-askbtn .dot, .s-trace span { animation: none; opacity: 1; } }

/* ---------- a night out as a timetable ---------- */
.s-tl { display: grid; gap: 0; margin: .5rem 0 .2rem; border-left: 2px solid var(--rule-2); padding-left: .9rem; }
.s-tli { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: .6rem; padding: .25rem 0; font-size: .86rem; }
.s-tli::before { content: ""; position: absolute; left: calc(-.9rem - 6px); top: .55rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--rule-2); }
.s-tli b { font: 600 .8rem var(--mono); color: var(--ink); }
.s-tli i { grid-column: 2; font-style: normal; font-size: .76rem; color: var(--muted); }
.s-tli.show::before { background: var(--qloo); border-color: var(--qloo); }
.s-tli.show span { font-weight: 600; }
.s-tli.pre::before { border-color: #E8A33D; } .s-tli.post::before { border-color: #8AA0FF; }
.m-pin.pre::before { background: #E8A33D; } .m-pin.post::before { background: #5B6CFF; }

/* ---------- the tour: the first thing to press ---------- */
.s-tour { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; padding: 1rem 1.6rem 1rem 1rem; border-radius: 18px;
  background: #fff; color: #0A0A0B; border: 0; cursor: pointer; text-align: left; position: relative;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .5), 0 18px 40px -16px rgba(255, 46, 77, .7); animation: s-glow 2.4s ease-in-out infinite;
  transition: transform .2s ease; }
.s-tour:hover { transform: translateY(-2px) scale(1.02); }
.s-tring { width: 52px; height: 52px; border-radius: 50%; background: #FF2E4D; display: grid; place-items: center; flex: none; position: relative; }
.s-tring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #FF2E4D; animation: s-ring 1.8s ease-out infinite; }
.s-tring .c-play { border-left-color: #fff; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
.s-ttext { display: grid; gap: .15rem; }
.s-ttext b { font-size: 1.2rem; font-weight: 800; }
.s-ttext small { font-size: .8rem; color: #55555C; }
@keyframes s-ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
@keyframes s-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35), 0 18px 40px -16px rgba(255, 46, 77, .7); }
  50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0), 0 18px 40px -16px rgba(255, 46, 77, .9); } }
@media (prefers-reduced-motion: reduce) { .s-tour, .s-tring::after { animation: none; } }