/* 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}
}