/* ══════════════════════════════════════════
   The look's choices a stylesheet draws (Site › Theme › Look, and a page's
   own in the builder's Theme): Jost headings' scale, Fraunces, medium
   headings, the bands' colour, buttons with an arrow, accent small
   headings, a scheme's glow and roomy sections. Each is a class
   on <html>, for the site with what the page changes (lookClasses()); the
   faces, size, corners, fields and colours are variables.
   ══════════════════════════════════════════ */

/* ── Jost headings sit smaller than Inter at the same size, so they bring
   their own scale (their faces are in type.css); Fraunces takes it too. ── */
:is(.look-head-jost,.look-head-serif) .cms-sec{font-size:var(--site-fs,16px);line-height:1.65}
.look-head-jost :is(h1,h2,h3,h4){letter-spacing:0}
.look-head-jost .cms-h{font-weight:900;line-height:1.18;letter-spacing:0}
:is(.look-head-jost,.look-head-serif) .cms-h{font-size:clamp(26px,3.2vw,34px)}
:is(.look-head-jost,.look-head-serif) .cms-h--medium{font-size:clamp(20px,2.2vw,24px)}
:is(.look-head-jost,.look-head-serif) .cms-h--small{font-size:18px}
.look-head-jost .cms-h--small{font-weight:800}
:is(.look-head-jost,.look-head-serif) .cms-banner__title{font-size:clamp(36px,5vw,60px);line-height:1.14}
.look-head-jost .cms-banner__title{font-weight:800;letter-spacing:-.012em}
:is(.look-head-jost,.look-head-serif) .cms-kick{font-size:12px;margin-bottom:4px}
:is(.look-head-jost,.look-head-serif) .cms-lede{line-height:1.65}
:is(.look-head-jost,.look-head-serif) .cms-banner__lede{font-size:18px}
:is(.look-head-jost,.look-head-serif) .cms-rich{color:var(--muted);line-height:1.65}
:is(.look-head-jost,.look-head-serif) .cms-rich :is(strong,b){color:var(--ink)}
.look-head-jost .ofh__logo,.look-head-jost .off{font-family:var(--font-body)}

/* ── Fraunces (M325), a serif: its softer cut, a little tighter, and 600
   where a sans heading is 800; Medium below takes it to 500. ── */
.look-head-serif :is(h1,h2,h3,h4,.cms-h,.cms-banner__title,.core-band__title,.cms-feat > b,.pcard h3,.plrow h3,.psect__title){font-family:var(--font-display);font-variation-settings:"SOFT" 30;font-weight:600;letter-spacing:-.018em}
.look-head-serif :is(.cms-banner__title,.core-band__title,.cms-h){line-height:1.08}
.look-head-serif :is(h3,h4,.cms-h--small,.cms-feat > b,.pcard h3,.plrow h3,.psect__title){letter-spacing:-.005em}

/* ── Medium headings (M324): 600 where they are 800 and 900, the letters
   drawn closer the larger the heading. ── */
.look-head-medium :is(h1,h2,h3,h4,.cms-h,.cms-h--small,.cms-banner__title,.core-band__title,.cms-feat > b,.pcard h3,.plrow h3,.psect__title){font-weight:600}
.look-head-medium .cms-banner__title{letter-spacing:-.032em;line-height:1.04}
.look-head-medium .core-band__title{letter-spacing:-.028em;line-height:1.06}
.look-head-medium .cms-h{letter-spacing:-.022em;line-height:1.1}
.look-head-medium .cms-h--medium{letter-spacing:-.014em}
.look-head-medium :is(h3,h4,.cms-h--small,.cms-feat > b,.pcard h3,.plrow h3,.psect__title){letter-spacing:-.008em}
:is(.look-head-jost,.look-head-serif).look-head-medium .cms-banner__title{font-size:clamp(40px,5.6vw,68px)}
:is(.look-head-jost,.look-head-serif).look-head-medium .core-band__title{font-size:clamp(28px,3.5vw,42px)}
.look-head-serif.look-head-medium :is(h1,h2,h3,h4,.cms-h,.cms-h--small,.cms-banner__title,.core-band__title,.cms-feat > b,.pcard h3,.plrow h3,.psect__title){font-weight:500;letter-spacing:-.018em}
.look-head-serif.look-head-medium :is(h3,h4,.cms-h--small,.cms-feat > b,.pcard h3,.plrow h3,.psect__title){font-weight:560;letter-spacing:-.005em}

/* ── Band colour (M326): Deep is the band in a deep shade of the accent with
   a glow behind the drawing; Brighter grid keeps it as the scheme draws it
   with a brighter glow. Both lay a fine grid that fades in from the
   drawing's side. ── */
:is(.look-band-deep,.look-band-grid) :is(.core-band,.listing__header,.pd__hero)::after{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
:is(.look-band-deep,.look-band-grid) .core-band--left::after{-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 55%);mask-image:linear-gradient(270deg,transparent 0%,#000 55%)}
.look-band-deep :is(.core-band,.listing__header,.pd__hero):not(.cms-sec--own-ground > *){background:linear-gradient(115deg,color-mix(in oklab,var(--blue) 62%,#000) 0%,color-mix(in oklab,var(--blue) 44%,#000) 52%,color-mix(in oklab,var(--blue) 28%,#000) 100%)}
.look-band-deep[data-theme="dark"] :is(.core-band,.listing__header,.pd__hero):not(.cms-sec--own-ground > *){background:linear-gradient(115deg,color-mix(in oklab,var(--blue) 48%,#000) 0%,color-mix(in oklab,var(--blue) 32%,#000) 52%,color-mix(in oklab,var(--blue) 18%,#000) 100%)}
.look-band-deep :is(.core-band,.listing__header,.pd__hero)::after{background:radial-gradient(ellipse 50% 70% at 82% 18%,color-mix(in srgb,var(--blue) 55%,transparent),transparent 62%),radial-gradient(ellipse 40% 60% at 6% 100%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 60%),
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 44px}
.look-band-grid :is(.core-band,.listing__header,.pd__hero)::after{background:radial-gradient(ellipse 46% 70% at 84% 14%,rgba(255,255,255,.28),transparent 62%),radial-gradient(ellipse 42% 60% at 4% 100%,color-mix(in srgb,var(--gold) 30%,transparent),transparent 60%),
  linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px) 0 0/44px 44px}
.look-band-grid[data-theme="dark"] :is(.core-band,.listing__header,.pd__hero)::after{background:radial-gradient(ellipse 46% 70% at 84% 14%,color-mix(in srgb,var(--blue) 50%,transparent),transparent 62%),radial-gradient(ellipse 42% 60% at 4% 100%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 60%),
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/44px 44px}

/* ── Buttons with an arrow that nudges on hover, in the look's corners ── */
.look-btn-arrow .cms-btn:not(.cms-btn--link){height:auto;min-height:48px;padding:14px 28px;border-radius:var(--r-btn,10px);font-size:15px;gap:8px;justify-content:center;transition:transform .16s,box-shadow .16s,background-color .16s}
.look-btn-arrow .cms-btn:not(.cms-btn--link)::after{content:"";flex:none;width:7px;height:7px;margin:0 2px 0 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .18s cubic-bezier(.22,.7,.3,1)}
.look-btn-arrow .cms-btn:not(.cms-btn--link):hover{transform:translateY(-2px)}
.look-btn-arrow .cms-btn:not(.cms-btn--link):hover::after{transform:translateX(3px) rotate(-45deg)}
.look-btn-arrow .cms-btn--gold{box-shadow:0 4px 12px -7px rgba(240,174,46,.75)}
.look-btn-arrow .cms-btn--gold:hover{box-shadow:0 7px 14px -9px rgba(240,174,46,.85)}
.look-btn-arrow .cms-btn--blue{box-shadow:0 4px 12px -8px color-mix(in oklab,var(--blue) 70%,transparent)}
.look-btn-arrow .cms-btn--blue:hover{background:color-mix(in oklab,var(--blue) 85%,var(--ink))}
.look-btn-arrow .cms-btn--ghost{border-color:color-mix(in oklab,currentColor 55%,transparent)}
.look-btn-arrow .cms-btn--ghost:hover{border-color:currentColor;background:color-mix(in oklab,currentColor 8%,transparent)}
.look-btn-arrow .ofh .cms-btn{min-height:40px;padding:9px 18px;font-size:13.5px}
.look-btn-arrow .ofh .cms-btn::after{display:none}

/* ── Small headings in the accent; on a dark band they stay the highlight ── */
.look-kick-accent .cms-kick{color:var(--blue)}
.look-kick-accent[data-theme="dark"] .cms-kick{color:color-mix(in oklab,var(--blue) 55%,white)}

/* ── A scheme's dark bands carry a soft glow of its own colour. ── */
.look-glow .cms-sec--band{background:radial-gradient(circle at 50% -10%,color-mix(in oklab,var(--glow) 22%,transparent) 0,transparent 38%),radial-gradient(circle at 96% 108%,color-mix(in oklab,var(--gold) 14%,transparent) 0,transparent 30%),var(--band)}
.look-glow .cms-sec--band :is(.cms-lede,.cms-banner__lede,.cms-rich,p){color:color-mix(in oklab,#fff 80%,var(--glow))}

/* ── Room: the sections breathe, and their headings stand further off ── */
.look-space-roomy .cms-sec{padding-top:88px;padding-bottom:88px}
.look-space-roomy .cms-head{margin-bottom:44px}
@media (max-width:640px){.look-space-roomy .cms-sec{padding-top:64px;padding-bottom:64px}}

@media (prefers-reduced-motion:reduce){
  .look-btn-arrow .cms-btn,.look-btn-arrow .cms-btn::after{transition:none}
  .look-btn-arrow .cms-btn:hover{transform:none}
}