/* Townline Premium (2026-10-08): magazine polish layer, loaded after townline-banner.css.
   Study: /workspace/visual-qa/premium-study/NOTES.md (CNT, Monocle, Kinfolk, Vogue, Apple, Airbnb, Aesop, AFAR).
   Editorial type scale, small-caps kickers, hairline section heads, calmer rhythm, slow image zoom on hover,
   page-to-page cross-fade (CSS View Transitions; other browsers get a short JS fade), condensed pinned nav.
   Rules kept: banner header/footer design untouched (spacing only); bright sky/lake palette; no dark blocks;
   no gold; no rainbow; copy, prices, photos and the arrival film untouched. Reduced motion = static. */

/* ---------- page-to-page cross-fade ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:tlq-out .26s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:tlq-in .46s cubic-bezier(.2,.7,.2,1) both}
  html.tlq-leaving body > :not(.tl-master-header):not(script){opacity:0!important;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease!important}
}
@keyframes tlq-out{to{opacity:0}}
@keyframes tlq-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- editorial type (family stays as set by the banner/vNext layers; scale, leading, tracking, balance here) ---------- */
html:root body.tlf :is(main,.hero,.tl-pulse-hero) :is(h1,h2):not(.tl-logo-new):not(.arqs-ai-title){
  letter-spacing:-.022em!important;line-height:1.04!important;text-wrap:balance;font-kerning:normal;font-feature-settings:"kern","liga","lnum"}
html:root body.tlf :is(main,.hero) h1:not(.tl-logo-new){font-size:clamp(44px,7.2vw,104px)!important;line-height:.98!important}
html:root body.tlf main :is(.section,.tlf-sec):not(.hero):not(.tl-pulse-hero) :is(.head,.section-head,.tlb-cards-head) h2,
html:root body.tlf main section.tlf-sec:not(.hero) > .wrap > h2,
html:root body.tlf main section.tlf-sec:not(.hero) > h2{font-size:clamp(32px,3.7vw,52px)!important}
html:root body.tlf main :is(article,.card,.panel) :is(h2,h3){letter-spacing:-.012em!important;line-height:1.12!important;text-wrap:balance}
html:root body.tlf main p{text-wrap:pretty}
html:root body.tlf main :is(.section,.tlf-sec) :is(.head,.section-head) p{font-size:clamp(16px,1.25vw,18px)!important;line-height:1.6!important;max-width:58ch}

/* small-caps kickers above headlines (outside photo heroes, which keep their white overlay type) */
html:root body.tlf main :is(.section,.tlf-sec):not(.hero):not(.tlf-photohero):not(.tl-pulse-hero) :is(.kicker,.ey,.eyebrow),
html:root body.tlf main section.grid.tlq-mag > article > small,
html:root body.tlf .tlb-cards-head small{
  font:800 11.5px/1.3 "TL Inter",Inter,system-ui,sans-serif!important;letter-spacing:.17em!important;text-transform:uppercase!important;
  color:var(--tlb-sky-d,#1557b0)!important;background:none!important;-webkit-text-fill-color:currentColor!important;
  display:inline-flex;align-items:center;gap:10px;margin:0 0 12px!important;padding:0!important;border:0!important;box-shadow:none!important}
html:root body.tlf main :is(.section,.tlf-sec):not(.hero):not(.tlf-photohero):not(.tl-pulse-hero) :is(.kicker,.ey,.eyebrow)::before,
html:root body.tlf main section.grid.tlq-mag > article > small::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}

/* hairline magazine section heads: title left, "view all" right on one baseline */
html:root body.tlf main :is(.section,.tlf-sec):not(.hero) :is(.head,.section-head){
  border-bottom:1px solid rgba(15,42,71,.12)!important;padding-bottom:clamp(14px,1.6vw,22px)!important;margin-bottom:clamp(22px,2.6vw,34px)!important;align-items:end!important}
html:root body.tlf main :is(.section,.tlf-sec) :is(.head,.section-head) :is(.more,a.more){
  font:800 12px/1 "TL Inter",Inter,system-ui,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase;white-space:nowrap;
  color:var(--tlb-sky-d,#1557b0)!important;-webkit-text-fill-color:currentColor!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;opacity:1!important;text-decoration:none!important;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat!important;border:0!important;box-shadow:none!important;padding-bottom:4px!important;transition:background-size .45s cubic-bezier(.2,.7,.2,1)!important}
html:root body.tlf main :is(.section,.tlf-sec) :is(.head,.section-head) :is(.more,a.more):hover{background-size:100% 1px!important}

/* calmer section rhythm (magazines breathe) */
html:root body.tlf main section.section.tlf-sec:not(.hero),
html:root body.tlf main section.grid.tlf-sec{padding-top:clamp(56px,7vw,112px)!important;padding-bottom:clamp(56px,7vw,112px)!important}

/* ---------- photography: slow zoom inside a fixed frame ---------- */
html:root body.tlf :is(.tlb-card,a.place,main article.card,main section.grid > article,main article.panel){overflow:hidden}
html:root body.tlf :is(.tlb-card,a.place,main article.card,main section.grid > article,main article.panel) :is(img:not(.ico),.card-photo,.tlf-ph,.spotimg){
  transition:transform 1s cubic-bezier(.2,.7,.2,1),clip-path 1s cubic-bezier(.2,.7,.2,1),filter .6s ease!important;clip-path:inset(0);will-change:transform}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html:root body.tlf :is(.tlb-card,a.place,main article.card,main section.grid > article,main article.panel):hover :is(img:not(.ico),.card-photo,.tlf-ph,.spotimg){
    transform:scale(1.05)!important;clip-path:inset(2.38%);filter:saturate(1.06)}
  /* headline underline grows on hover, like a magazine link */
  html:root body.tlf :is(main article.card,main section.grid > article,a.place) :is(h2,h3,b){
    background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s cubic-bezier(.2,.7,.2,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
  html:root body.tlf :is(main article.card,main section.grid > article,a.place):hover :is(h2,h3,b){background-size:100% 1px}
}

/* ---------- News: magazine story layout (lead story + grid) ---------- */
html:root body.tlf main section.grid.tlf-sec.tlq-mag{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px)!important;align-items:start}
html:root body.tlf main section.grid.tlf-sec.tlq-mag > article{display:flex!important;flex-direction:column;gap:0;padding:0 0 22px!important;background:transparent!important;border:0!important;border-bottom:1px solid rgba(15,42,71,.12)!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
html:root body.tlf main section.grid.tlf-sec.tlq-mag > article :is(img,.tlf-ph){order:-1;display:block!important;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:3/2!important;object-fit:cover!important;background-size:cover!important;background-position:center!important;border-radius:6px!important;margin:0 0 18px!important;opacity:1!important}
html:root body.tlf main section.grid.tlf-sec.tlq-mag > article img[src$=".svg"]{object-fit:contain!important;background:#eaf4ff!important}
html:root body.tlf main section.grid.tlf-sec.tlq-mag > article h2{font-size:clamp(21px,1.7vw,25px)!important;margin:2px 0 10px!important;color:var(--tlb-ink,#0f2a47)!important}
html:root body.tlf main section.grid.tlf-sec.tlq-mag > article p{font-size:15.5px!important;line-height:1.6!important;color:var(--tlb-ink-2,#3b5573)!important;margin:0 0 14px!important}
html:root body.tlf main section.grid.tlf-sec.tlq-mag > article > a{margin-top:auto;font:800 12px/1 "TL Inter",Inter,system-ui,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--tlb-sky-d,#1557b0)!important;background:none!important;padding:0!important;border:0!important;box-shadow:none!important}
@media(min-width:900px){
  html:root body.tlf main section.grid.tlf-sec.tlq-mag > article.tlq-lead{grid-column:1 / span 2;grid-row:span 2}
  html:root body.tlf main section.grid.tlf-sec.tlq-mag > article.tlq-lead :is(img,.tlf-ph){aspect-ratio:16/10!important}
  html:root body.tlf main section.grid.tlf-sec.tlq-mag > article.tlq-lead h2{font-size:clamp(32px,3.2vw,46px)!important;line-height:1.04!important}
  html:root body.tlf main section.grid.tlf-sec.tlq-mag > article.tlq-lead p{font-size:18px!important;max-width:60ch}
}
@media(min-width:640px) and (max-width:899px){html:root body.tlf main section.grid.tlf-sec.tlq-mag{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html:root body.tlf main section.grid.tlf-sec.tlq-mag > article.tlq-lead{grid-column:1 / -1}}
@media(max-width:639px){html:root body.tlf main section.grid.tlf-sec.tlq-mag{grid-template-columns:1fr!important}
  html:root body.tlf main section.grid.tlf-sec.tlq-mag > article.tlq-lead h2{font-size:30px!important}}

html:root body.tlf main section.grid.tlf-sec.tlq-mag > article.tlq-lead{order:-1}
/* ---------- Events: quiet magazine buttons instead of candy pills ---------- */
html:root body.tlf main .card .event-cta{background:none!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:6px 0!important;
  font:800 12px/1.2 "TL Inter",Inter,system-ui,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase;
  text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:7px!important;text-decoration-color:rgba(21,87,176,.4)!important;transition:text-decoration-color .3s,text-underline-offset .3s!important}
html:root body.tlf main .card .event-cta:hover{text-decoration-color:currentColor!important;text-underline-offset:4px!important}

/* ---------- pinned nav condenses after scroll (spacing only; header design unchanged) ---------- */
html:root body .tlb-header.tlb-header .tl-master-nav{transition:padding .35s cubic-bezier(.2,.7,.2,1)!important}
html:root body .tlb-header.tlb-header .tl-master-nav a{transition:padding .35s cubic-bezier(.2,.7,.2,1),transform .2s,box-shadow .2s,background .2s!important}
html:root body.tlq-condensed .tlb-header.tlb-header .tl-master-nav{padding-top:6px!important;padding-bottom:7px!important}
html:root body.tlq-condensed .tlb-header.tlb-header .tl-master-nav a{padding-top:8px!important;padding-bottom:8px!important}

/* ---------- reveals: slower, softer magazine easing (reduced motion handled by the reveal scripts) ---------- */
html.tle-motion body.tlf .tle-reveal{transition-duration:.95s!important;transition-timing-function:cubic-bezier(.16,.84,.24,1)!important}

/* ---------- phones: section heads stack (title, then standfirst) ---------- */
@media(max-width:640px){
  html:root body.tlf main :is(.section,.tlf-sec):not(.hero) .section-head{display:block!important}
  html:root body.tlf main :is(.section,.tlf-sec):not(.hero) .section-head > p{margin-top:12px!important}
  html:root body.tlf main :is(.section,.tlf-sec):not(.hero) :is(.head,.section-head){padding-bottom:16px!important}
}


/* ---------- Founder mobile capture repair — 2026-10-08 screenshots ---------- */
/* Photo-card copy must always be legible, regardless of legacy/global text-colour rules. */
html:root body.tlf :is(.leadstory,.story,.discover) :is(.storycopy,.discover-copy,.storycopy *, .discover-copy *){
  color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.78)!important}
html:root body.tlf :is(.leadstory,.story)::before{
  background:linear-gradient(0deg,rgba(3,18,28,.96) 0%,rgba(3,18,28,.72) 42%,rgba(3,18,28,.16) 74%),var(--photo) center/cover no-repeat!important}
html:root body.tlf .discover::before{
  background:linear-gradient(0deg,rgba(3,18,28,.94) 0%,rgba(3,18,28,.68) 44%,rgba(3,18,28,.10) 74%),var(--photo) center/cover no-repeat!important}
html:root body.tlf .hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
html:root body.tlf .hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 14px;border:1px solid rgba(21,87,176,.22);background:#fff;color:#1557b0!important;-webkit-text-fill-color:#1557b0!important;box-shadow:0 6px 18px rgba(8,40,90,.18);text-decoration:none;font:800 12px/1 Inter,system-ui,sans-serif;backdrop-filter:none!important;border-radius:4px}
html:root body.tlf .hero-actions a:first-child{background:var(--tlb-btn,linear-gradient(135deg,#1a6fd6 0%,#1760c4 50%,#0f4fa8 100%));border-color:transparent;color:#fff!important;-webkit-text-fill-color:#fff!important}
html:root body.tlf .hero-actions a:hover{background:#eaf3ff!important;color:#0f4fa8!important;-webkit-text-fill-color:#0f4fa8!important}
html:root body.tlf .hero-actions a:first-child:hover{background:linear-gradient(135deg,#1f7ae6,#1257b8)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

@media(max-width:640px){
  /* Landing must sell Townline immediately instead of scrolling through chrome. */
  html:root body.tlf .hero{min-height:520px!important}
  html:root body.tlf .hero .hero-copy{padding:58px 0 34px!important}
  html:root body.tlf .hero h1{font-size:clamp(48px,15vw,64px)!important;line-height:.9!important;margin:8px 0 12px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 3px 20px rgba(0,0,0,.72)!important}
  html:root body.tlf .hero h1 span{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 14px rgba(4,20,45,.55)!important}
  html:root body.tlf .hero .hero-lead{font-size:17px!important;line-height:1.42!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.72)!important;margin:0 0 14px!important}
  html:root body.tlf .hero .hero-meta,html:root body.tlf .hero .search-hint{color:#fff!important;-webkit-text-fill-color:#fff!important}
  html:root body.tlf .hero .ey,html:root body.tlf .hero .ey *{color:#1557b0!important;-webkit-text-fill-color:#1557b0!important}
  html:root body.tlf .search-shell{margin-top:16px!important;width:100%!important;border-radius:6px!important;padding:5px!important}
  html:root body.tlf .search-shell input{min-height:46px!important;font-size:16px!important;padding:10px 12px!important}
  html:root body.tlf .search-shell button{min-height:46px!important;padding:0 14px!important}
  html:root body.tlf .hero-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;margin-top:10px!important}
  html:root body.tlf .hero-actions a{min-height:44px!important;padding:9px 8px!important;font-size:12px!important}

  /* Remove dead white bands between every homepage module. */
  html:root body.tlf main section.section:not(.hero){padding:30px 0!important;min-height:0!important}
  html:root body.tlf main section.section .wrap{min-height:0!important}
  html:root body.tlf main .section-head{display:block!important;margin:0 0 16px!important;padding:0 0 12px!important;min-height:0!important}
  html:root body.tlf main .section-head h2{font-size:clamp(36px,11vw,48px)!important;line-height:.98!important;margin:4px 0 10px!important}
  html:root body.tlf main .section-head>p{margin:8px 0 0!important;font-size:16px!important;line-height:1.45!important}
  html:root body.tlf main .section-link{display:inline-block!important;margin-top:8px!important;white-space:normal!important}

  /* Explore categories must be visible, compact and useful — never an empty gap. */
  html:root body.tlf .catrail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;border:0!important;margin:0!important}
  html:root body.tlf .catrail a{display:flex!important;min-height:82px!important;padding:13px!important;border:1px solid #d8dfdc!important;background:#fff!important;color:#112d37!important;justify-content:center!important;gap:4px!important}
  html:root body.tlf .catrail a :is(b,small){color:#112d37!important;-webkit-text-fill-color:#112d37!important;text-shadow:none!important}
  html:root body.tlf .catrail a b{font-size:20px!important}
  html:root body.tlf .catrail a small{font-size:11px!important;color:#60747a!important;-webkit-text-fill-color:#60747a!important}

  /* Live utility cards were visually disappearing on light backgrounds. */
  html:root body.tlf .nowgrid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:0!important}
  html:root body.tlf .nowblock{display:block!important;min-height:0!important;padding:16px!important;background:#fff!important;border:1px solid #d8dfdc!important;border-top:3px solid #0d7277!important;color:#112d37!important}
  html:root body.tlf .nowblock :is(h3,p,div,span,a,strong){color:#112d37!important;-webkit-text-fill-color:#112d37!important;text-shadow:none!important}
  html:root body.tlf .nowblock .muted{color:#60747a!important;-webkit-text-fill-color:#60747a!important}
  html:root body.tlf .nowblock.sky{border-top-color:#394b90!important}
  html:root body.tlf .nowblock.live{border-top-color:#e8504f!important}

  /* Photo stories: readable, shorter, and continuous on iPhone. */
  html:root body.tlf .leadgrid{gap:12px!important}
  html:root body.tlf .leadstory{min-height:420px!important}
  html:root body.tlf .story{min-height:300px!important}
  html:root body.tlf :is(.leadstory,.story) .storycopy{padding:22px!important}
  html:root body.tlf :is(.leadstory,.story) .storycopy h3{font-size:clamp(30px,9vw,40px)!important;line-height:1!important}
  html:root body.tlf :is(.leadstory,.story) .storycopy p{font-size:16px!important;line-height:1.42!important}
  html:root body.tlf .discovergrid{gap:12px!important}
  html:root body.tlf .discover{min-height:300px!important}

  /* Floating AI must not cover the customer journey. */
  html[data-place="townline"] .arqs-ai-dock{left:auto!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:auto!important}
  html[data-place="townline"] .arqs-ai-launch{width:52px!important;min-width:52px!important;height:52px!important;min-height:52px!important;padding:0!important;display:grid!important;place-items:center!important;font-size:0!important;gap:0!important;border-radius:50%!important}
  html[data-place="townline"] .arqs-ai-launch::before{width:34px!important;height:34px!important;margin:0!important;font-size:11px!important}
  html[data-place="townline"] .arqs-ai-panel{left:8px!important;right:8px!important;width:auto!important}
}
/* ===== TOWNLINE RICH 2026-10-15 (GENERAL SUPERGROK): dark editorial, no pale/white screens, colourful nav chips ===== */
html:root body:is(.tlf,body){background:#0b0d1a}
/* Section grounds: real self-hosted Townline photography under a dark gradient scrim (never blurred) */
html:root body:is(.tlf,body) .tlf-sec,html:root body:is(.tlf,body) .tlf-sec.tlf-alt,html:root body:is(.tlf,body) section.white,html:root body:is(.tlf,body) .tlh-band-sky,html:root body:is(.tlf,body) .signalbar,html:root body:is(.tlf,body) #arqs-paribu-products{
  background:linear-gradient(180deg,rgba(21,87,176,.80),rgba(8,92,120,.88)),var(--tlr-photo,url(/townline/assets/towns/kelowna-hero.jpg)) center/cover no-repeat !important;
  color:#eef1f8 !important;border-color:rgba(255,255,255,.08) !important}
html:root body:is(.tlf,body) .tlf-sec:nth-of-type(6n+1){--tlr-photo:url(/townline/assets/towns/kelowna-spot-okanagan-lake.jpg)}
html:root body:is(.tlf,body) .tlf-sec:nth-of-type(6n+2){--tlr-photo:url(/townline/assets/towns/golden-hero.jpg)}
html:root body:is(.tlf,body) .tlf-sec:nth-of-type(6n+3){--tlr-photo:url(/townline/assets/towns/chilliwack-spot-cultus-lake.jpg)}
html:root body:is(.tlf,body) .tlf-sec:nth-of-type(6n+4){--tlr-photo:url(/townline/assets/towns/kelowna-spot-live-downtown.jpg)}
html:root body:is(.tlf,body) .tlf-sec:nth-of-type(6n+5){--tlr-photo:url(/townline/assets/towns/merritt-hero.jpg)}
html:root body:is(.tlf,body) .tlf-sec:nth-of-type(6n){--tlr-photo:url(/townline/assets/towns/hope-hero.jpg)}
html:root body:is(.tlf,body) .tlf-sec :is(h1,h2,h3,h4,strong,b,label,dt){color:#fff !important}
html:root body:is(.tlf,body) .tlf-sec :is(p,li,small,span,dd,figcaption,.muted,.footnote){color:#d5dbea !important}
html:root body:is(.tlf,body) .tlf-sec :is(.ey,.eyebrow,.tag,.kicker){color:#ff8fc4 !important;letter-spacing:.14em}
html:root body:is(.tlf,body) .tlf-sec a:not([class*=btn]):not([class*=button]):not(.tlb-pill){color:#5fe6e0 !important}
/* Cards / rows: dark glass instead of white */
html:root body:is(.tlf,body) .tlf-sec :is(article,.card,.panel,.tlf-panel,.product,.tlh-extra,.tlh-extras,.extras,.useitem,.tlh-feature,.discover,.story,.tlh-town,.nowblock,.item,.tile,.box,.row,.plan,.tier,li.card,.signal,.quick a,.quickgrid a,form,details,table,.tlh-ticket){
  background:linear-gradient(160deg,rgba(64,32,140,.94),rgba(21,87,176,.94)) !important;border:1px solid rgba(255,255,255,.12) !important;box-shadow:0 14px 34px rgba(20,40,110,.30) !important;color:#eef1f8 !important}
html:root body:is(.tlf,body) .tlf-sec :is(input,select,textarea){background:#141a33 !important;color:#fff !important;border:1px solid rgba(255,255,255,.2) !important}
html:root body:is(.tlf,body) .tlf-sec :is(.price,.tlh-badge,.badge){background:linear-gradient(90deg,#ff2e88,#ff8a2b) !important;color:#fff !important;border:0 !important}
html:root body:is(.tlf,body) .tlf-sec :is(.tlh-go){background:linear-gradient(135deg,#ff8a2b,#18d1c6) !important;color:#fff !important}
html:root body:is(.tlf,body) .tlf-ph,html:root body:is(.tlf,body) .tlh-feature-ph{background-color:#1a1d33 !important}
/* Play Townline card: real chess photograph instead of the checkerboard screenshot */
html:root body:is(.tlf,body) .tlh-feature-sky{position:relative;background:#e8f0f2 !important}
html:root body:is(.tlf,body) .tlh-feature-sky img{content:url(/townline/assets/games/townline-chess-game-screenshot.jpg);object-fit:cover !important;object-position:center;width:100%;height:100%}
html:root body:is(.tlf,body) .tlh-feature-sky::after{content:"Screenshot: Townline Chess Club";position:absolute;right:6px;top:4px;bottom:auto;z-index:3;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.45);font:9px/1.2 Inter,system-ui,sans-serif;color:rgba(255,255,255,.9);text-shadow:0 1px 2px #000}
/* Icons over card photos: bigger, colourful, premium */
html:root body:is(.tlf,body) .tlh-ico{width:46px !important;height:46px !important;border-radius:14px !important;border:2px solid rgba(255,255,255,.9) !important;box-shadow:0 8px 20px rgba(0,0,0,.4) !important;background:linear-gradient(135deg,#ff2e88,#ff8a2b) !important;color:#fff !important;stroke:#fff}
html:root body:is(.tlf,body) .tlh-feature:nth-child(2) .tlh-ico{background:linear-gradient(135deg,#18d1c6,#2f7bff) !important}
html:root body:is(.tlf,body) .tlh-feature:nth-child(3) .tlh-ico{background:linear-gradient(135deg,#ff9f1a,#ff4d1f) !important}
html:root body:is(.tlf,body) .tlh-feature:nth-child(4) .tlh-ico{background:linear-gradient(135deg,#9b5cff,#ff2e88) !important}
html:root body:is(.tlf,body) .tlh-ico svg{stroke:#fff !important;width:24px;height:24px}
/* Top pill nav: less blue — deep plum bar with bright colour chips */
html:root body:is(.tlf,body) .tl-master-header,html:root body:is(.tlf,body) .tl-master-nav{background:linear-gradient(90deg,#1a0f2e,#240f30 50%,#0f1f2e) !important;border-color:rgba(255,255,255,.08) !important}
html:root body:is(.tlf,body) .tl-master-nav a{color:#fff !important;border:0 !important;font-weight:700 !important;text-shadow:0 1px 2px rgba(0,0,0,.25);background:linear-gradient(135deg,#ff2e88,#ff6a3d) !important}
html:root body:is(.tlf,body) .tl-master-nav a:nth-child(5n+2){background:linear-gradient(135deg,#ffa02b,#ff5a1f) !important}
html:root body:is(.tlf,body) .tl-master-nav a:nth-child(5n+3){background:linear-gradient(135deg,#14c7bd,#0aa0d6) !important}
html:root body:is(.tlf,body) .tl-master-nav a:nth-child(5n+4){background:linear-gradient(135deg,#9b5cff,#d14cff) !important}
html:root body:is(.tlf,body) .tl-master-nav a:nth-child(5n){background:linear-gradient(135deg,#2bd46a,#12a5a0) !important}
/* Footer: dark, premium */
html:root body:is(.tlf,body) .tl-master-footer{background:linear-gradient(180deg,#140d26,#0b0d1a) !important;color:#d5dbea !important}
html:root body:is(.tlf,body) .tl-master-footer :is(p,span,small,li){color:#c9d0e2 !important}
html:root body:is(.tlf,body) .tl-master-footer a{color:#5fe6e0 !important}
/* iPhone 390: no overflow, readable type, no giant gaps */
@media (max-width:520px){
  html,body{overflow-x:hidden}
  html:root body:is(.tlf,body) .tlf-sec{padding-top:44px !important;padding-bottom:44px !important;min-height:0 !important}
  html:root body:is(.tlf,body) .tlf-sec :is(p,li){font-size:16px !important;line-height:1.55}
  html:root body:is(.tlf,body) .tlf-sec small{font-size:13px !important}
  html:root body:is(.tlf,body) img,html:root body:is(.tlf,body) video,html:root body:is(.tlf,body) iframe,html:root body:is(.tlf,body) table{max-width:100%}
  html:root body:is(.tlf,body) .tl-master-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
}
html:root body.tlf .nowblock.nowblock.nowblock,html:root body .nowblock.nowblock.nowblock{background:linear-gradient(160deg,rgba(64,32,140,.94),rgba(21,87,176,.94))!important;border:1px solid rgba(255,255,255,.12)!important;border-top:3px solid #ff2e88!important;color:#eef1f8!important}
html:root body .nowblock.nowblock :is(h2,h3,strong,b){color:#fff!important}
html:root body .nowblock.nowblock :is(p,li,span,small){color:#d5dbea!important}
/* Very top: less blue — plum-to-midnight bar, bright colour icon orbs (founder banner art itself untouched) */
html:root body .tl-master-header.tlb-header.tlb-header{background:#3a1a78!important}
html:root body .tlb-header.tlb-header .tlb-bar{background:radial-gradient(120% 90% at 50% -30%,rgba(255,46,136,.28),transparent 60%),linear-gradient(180deg,#4b1d8f 0%,#3a1a7e 55%,#24307f 100%)!important}
html:root body .tlb-header .tlb-ib .tlb-ib-orb{background:radial-gradient(70% 55% at 50% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(160deg,#ff4f9a,#e0186f)!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 6px 16px rgba(0,0,0,.35)!important}
html:root body .tlb-header .tlb-ib:nth-child(8n+2) .tlb-ib-orb{background:radial-gradient(70% 55% at 50% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(160deg,#ffa02b,#ff5a1f)!important}
html:root body .tlb-header .tlb-ib:nth-child(8n+3) .tlb-ib-orb{background:radial-gradient(70% 55% at 50% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(160deg,#26e0d2,#0a9fb5)!important}
html:root body .tlb-header .tlb-ib:nth-child(8n+4) .tlb-ib-orb{background:radial-gradient(70% 55% at 50% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(160deg,#a66bff,#6a2ee8)!important}
html:root body .tlb-header .tlb-ib:nth-child(8n+5) .tlb-ib-orb{background:radial-gradient(70% 55% at 50% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(160deg,#3ee07a,#0fa36b)!important}
html:root body .tlb-header .tlb-ib:nth-child(8n+6) .tlb-ib-orb{background:radial-gradient(70% 55% at 50% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(160deg,#ff6a3d,#ff2e88)!important}
html:root body .tlb-header .tlb-ib:nth-child(8n+7) .tlb-ib-orb{background:radial-gradient(70% 55% at 50% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(160deg,#1fc8ff,#2f6bff)!important}
html:root body .tlb-header .tlb-ib:nth-child(8n) .tlb-ib-orb{background:radial-gradient(70% 55% at 50% 18%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(160deg,#ff5ac8,#9b3cff)!important}
html:root body .tlb-header .tlb-ib-s{color:#ffc6e2!important}
html:root body .tlb-header.tlb-header.tlb-header .tl-master-nav.tl-master-nav a{background:linear-gradient(135deg,#ff2e88,#ff6a3d)!important;border:0!important;color:#fff!important;font-weight:800!important}
html:root body .tlb-header.tlb-header.tlb-header .tl-master-nav.tl-master-nav a:nth-child(5n+2){background:linear-gradient(135deg,#ffa02b,#ff5a1f)!important}
html:root body .tlb-header.tlb-header.tlb-header .tl-master-nav.tl-master-nav a:nth-child(5n+3){background:linear-gradient(135deg,#14c7bd,#0a8fd6)!important}
html:root body .tlb-header.tlb-header.tlb-header .tl-master-nav.tl-master-nav a:nth-child(5n+4){background:linear-gradient(135deg,#9b5cff,#d14cff)!important}
html:root body .tlb-header.tlb-header.tlb-header .tl-master-nav.tl-master-nav a:nth-child(5n){background:linear-gradient(135deg,#2bd46a,#0f9f9a)!important}
html:root body .tlb-header.tlb-header.tlb-header .tl-master-nav.tl-master-nav a:is(.tle-here,.tlb-here){box-shadow:0 0 0 2px #fff inset!important}
html:root body .tlb-header.tlb-header.tlb-header nav.tlb-towns.tlb-towns a{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,138,43,.55)!important;color:#ffe9f3!important}
html:root body .tlb-header.tlb-header.tlb-header nav.tlb-towns.tlb-towns a:nth-child(3n+2){border-color:rgba(20,199,189,.65)!important}
html:root body .tlb-header.tlb-header.tlb-header nav.tlb-towns.tlb-towns a:nth-child(3n){border-color:rgba(255,46,136,.6)!important}
/* Chess / checkers: real photographs instead of illustrated placeholders */
html:root body img[src*="chess-strategy.svg"]{content:url(/townline/assets/games/townline-chess-photo.jpg);object-fit:cover!important;object-position:center 40%}
html:root body img[src*="checkers-ridge.svg"]{content:url(/townline/assets/games/townline-checkers-photo.jpg);object-fit:cover!important}
/* Game cards: photographs instead of illustrated placeholders (2026-10-15 b) */
html:root body img[src*="trivia-lantern.svg"]{content:url(/townline/assets/games/townline-trivia-photo.jpg);object-fit:cover!important}
html:root body img[src*="word-trail.svg"]{content:url(/townline/assets/games/townline-word-photo.jpg);object-fit:cover!important}
html:root body img[src*="merge-peaks.svg"]{content:url(/townline/assets/towns/golden-spot-rockies-trails.jpg);object-fit:cover!important}
html:root body img[src*="snowfield.svg"]{content:url(/townline/assets/towns/golden-explore-aerial-1600.webp);object-fit:cover!important}
html:root body img[src*="bc-quest.svg"]{content:url(/townline/assets/towns/hope-explore-fraser-river-1600.webp);object-fit:cover!important}
/* Merge Peaks: dark empty tiles (2026-10-15 c) */
html:root body .mp-t.v0,html:root body .mp-t:not([class*=" v"]){background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)}
html:root body .mp-t.v2{background:#f6d9a8!important;color:#1b1430!important}
html:root body .mp-t.v4{color:#1b1430!important}
/* Footer dark everywhere (beats later runtime styles) */
html:root body footer.tl-master-footer.tlb-footer.tlb-footer{background:linear-gradient(180deg,#2c1d72,#15468a)!important;color:#dfe4f0!important;border-top:1px solid rgba(255,255,255,.1)!important}
html:root body footer.tl-master-footer.tlb-footer.tlb-footer :is(a,p,span,small,h2,h3,h4,strong,li){color:#dfe4f0!important}
html:root body.tlf.tlf.tlf footer.tl-master-footer.tlb-footer.tlb-footer{background:linear-gradient(180deg,#2c1d72,#15468a)!important;color:#dfe4f0!important}
html:root body.tlf.tlf.tlf footer.tl-master-footer.tlb-footer.tlb-footer :is(a,p,span,small,h2,h3,h4,strong,li){color:#dfe4f0!important}

/* 2026-10-15 listing cleanup, mobile overflow, contrast */
html:root body:is(.tlf,body) #businessDetail,html:root body:is(.tlf,body) #businessDetail .card,html:root body:is(.tlf,body) #grid .card{max-width:100%;min-width:0;overflow-wrap:anywhere}
html:root body:is(.tlf,body) #businessDetail .card footer,html:root body:is(.tlf,body) #grid .card footer{flex-wrap:wrap}
html:root body:is(.tlf,body) #businessDetail .directory-actions{margin:14px 0 0;font-size:12px}
html:root body:is(.tlf,body) #businessDetail .directory-actions a{font-size:12px;font-weight:600;text-decoration:underline;color:inherit;opacity:.9}
html:root body:is(.tlf,body) main{max-width:100%;overflow-x:clip}
html:root body:is(.tlf,body) section.tlh-band-sky.section .section-head h2{color:#0f2a47!important;-webkit-text-fill-color:#0f2a47!important;text-shadow:none!important;opacity:1!important}
html:root body:is(.tlf,body) section.tlh-band-sky.section .section-head p{color:#33465c!important;-webkit-text-fill-color:#33465c!important;opacity:1!important}
html:root body:is(.tlf,body) section.tlh-band-sky.section[data-tl-keep-light] .section-head div.ey{color:#1557b0!important;-webkit-text-fill-color:#1557b0!important;opacity:1!important}
html:root body:is(.tlf,body) section.tlh-band-sky.section .tlh-feature{background:#ffffff!important;border:1px solid #d6e2f0!important}
html:root body:is(.tlf,body) section.tlh-band-sky.section .tlh-feature-body h3{color:#0f2a47!important;-webkit-text-fill-color:#0f2a47!important}
html:root body:is(.tlf,body) section.tlh-band-sky.section .tlh-feature-body p{color:#3d5068!important;-webkit-text-fill-color:#3d5068!important;opacity:1!important}
html:root body:is(.tlf,body) section.tlh-band-sky.section .tlh-feature-body small,html:root body:is(.tlf,body) section.tlh-band-sky.section .tlh-open{color:#1557b0!important;-webkit-text-fill-color:#1557b0!important;opacity:1!important}
/* ===== TOWNLINE READABLE 2026-10-17 (visual QA): final readability layer =====
   Navy / sky / turquoise / silver only. Dark readable cards over the section photos, boxed form fields.
   Loaded last; townline-premium.js strips the competing inline colours on the same elements. */
html:root body.tlf.tlf{--tlr-navy:#0f2a47;--tlr-navy-2:#0b1f3a;--tlr-sky:#7cc4ff;--tlr-turq:#5fe6e0;--tlr-silver:#d5dbea;--tlr-silver-2:#c3cfdf}
/* readable cards (news stories). "More than a city guide" keeps the light band + white cards from #936 (data-tl-keep-light). */
/* :not(#…) raises specificity above townline-editorial.css's :is(…#west-coast-news .card…):not(#arqs-site-arrival *) transparent-card rule */
html:root body.tlf.tlf section.tlf-sec a.tlh-news-card.tlh-news-card:not(#tlr0):not(#tlr1):not(#tlr2){
  background:linear-gradient(160deg,rgba(11,31,58,.96),rgba(15,52,88,.96))!important;border:1px solid rgba(124,196,255,.35)!important;color:#eef1f8!important;box-shadow:0 14px 34px rgba(4,16,34,.35)!important}
html:root body.tlf.tlf section.tlf-sec a.tlh-news-card.tlr-card :is(h3,strong,b){color:#fff!important;-webkit-text-fill-color:#fff!important}
html:root body.tlf.tlf section.tlf-sec a.tlh-news-card.tlr-card :is(p,span:not(.tlh-open),small:not(.tlh-date)){color:var(--tlr-silver)!important;-webkit-text-fill-color:var(--tlr-silver)!important}
html:root body.tlf.tlf section.tlf-sec a.tlh-news-card.tlr-card :is(small,em){color:var(--tlr-sky)!important;-webkit-text-fill-color:var(--tlr-sky)!important}
html:root body.tlf.tlf section.tlf-sec a.tlh-news-card.tlr-card .tlh-open{color:var(--tlr-turq)!important;-webkit-text-fill-color:var(--tlr-turq)!important;font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* 2. "All 17 towns" link: readable pill instead of blue on blue */
html:root body.tlf.tlf .tlh-towns-more a.tlh-open.tlh-open{display:inline-block;background:var(--tlr-navy-2)!important;color:var(--tlr-turq)!important;-webkit-text-fill-color:var(--tlr-turq)!important;padding:8px 14px!important;border-radius:999px!important;border:1px solid rgba(124,196,255,.45)!important;font-weight:800;text-decoration:none!important}
/* section-level links on the news band (View all releases) stay turquoise on a navy chip */
html:root body.tlf.tlf section#news.tlh-news .section-head .ey:not(#tlr0):not(#tlr1):not(#tlr2){color:var(--tlr-turq)!important;-webkit-text-fill-color:var(--tlr-turq)!important;background:var(--tlr-navy-2)!important;display:inline-block;padding:4px 10px!important;border-radius:999px!important}
html:root body.tlf.tlf section#news.tlh-news .section-head h2:not(#tlr0):not(#tlr1):not(#tlr2){color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 14px rgba(4,16,34,.55)}
html:root body.tlf.tlf section#news.tlh-news .section-head a{background:var(--tlr-navy-2)!important;color:var(--tlr-turq)!important;-webkit-text-fill-color:var(--tlr-turq)!important;padding:6px 12px!important;border-radius:999px!important}
/* 3/4/6. Form fields: visible white boxes with a sky border on every Townline page */
html:root body.tlf.tlf main form.tlr-form:not(#tlr0):not(#tlr1):not(#tlr2){background:linear-gradient(160deg,rgba(11,31,58,.94),rgba(15,52,88,.94))!important;border:1px solid rgba(124,196,255,.35)!important;border-radius:16px!important;padding:16px!important;color:#eef1f8!important}
html:root body.tlf.tlf main form.tlr-form :is(label,legend,p,span,small,strong,b,h2,h3,h4){color:#eef1f8!important;-webkit-text-fill-color:#eef1f8!important}
html:root body.tlf.tlf main form.tlr-form a:not([class*=btn]):not([class*=button]){color:var(--tlr-turq)!important;-webkit-text-fill-color:var(--tlr-turq)!important}
html:root body.tlf.tlf main :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=hidden]):not([type=range]):not([type=color]),select,textarea).tlr-field{
  background:#ffffff!important;background-image:none!important;color:#0f2a47!important;-webkit-text-fill-color:#0f2a47!important;border:2px solid #7cc4ff!important;border-radius:10px!important;box-shadow:inset 0 1px 2px rgba(15,42,71,.12)!important;opacity:1!important;min-height:44px}
html:root body.tlf.tlf main select.tlr-field:not(#tlr0):not(#tlr1):not(#tlr2){padding-right:32px!important;background-image:linear-gradient(45deg,transparent 50%,#0f2a47 50%),linear-gradient(135deg,#0f2a47 50%,transparent 50%)!important;background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%!important;background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important;-webkit-appearance:none;appearance:none}
html:root body.tlf.tlf main select.tlr-field option{background:#ffffff!important;color:#0f2a47!important}
html:root body.tlf.tlf main .tlr-field::placeholder{color:#4a5e78!important;-webkit-text-fill-color:#4a5e78!important;opacity:1!important}
html:root body.tlf.tlf main .tlr-field:focus{outline:3px solid #5fe6e0!important;outline-offset:2px!important;border-color:#1557b0!important}
html:root body.tlf.tlf main :is(input[type=checkbox],input[type=radio]).tlr-field:not(#tlr0):not(#tlr1):not(#tlr2){accent-color:#1557b0!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:0!important;padding:0!important;margin:2px 8px 0 0!important;outline:0!important;border:0!important;background:transparent!important;box-shadow:none!important;flex:none!important}
/* labels that sit next to game selects (chess / checkers controls) */
html:root body.tlf.tlf main .controls :is(label,span,small,b,strong).tlr-ink{color:#eef1f8!important;-webkit-text-fill-color:#eef1f8!important}