/* tagline.css — "a little more beauty for your walls", above the carousel.
   Five voices; each option page picks one with .tl--N on the block. */
.tl{ padding:clamp(22px,3.4vw,44px) clamp(12px,2.4vw,32px) 0; text-align:center }
.tl__text{ margin:0 auto; max-width:none; color:var(--ink) }
.tl .pr-switch{ justify-content:center; margin-top:14px }

/* 1 · Fraunces italic, soft and wonky: the site's own serif, spoken gently */
.tl--1 .tl__text{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 96; font-size:clamp(2rem,4.6vw,3.9rem); line-height:1.08; letter-spacing:-.01em }

/* 2 · Fredoka, big and rounded, with the ribbon underneath: the sticker voice */
.tl--2 .tl__text{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4.8vw,4rem); line-height:1.05; letter-spacing:-.02em; display:inline-block; padding-bottom:10px;
  background:linear-gradient(90deg, var(--c-coral), var(--c-peach), var(--c-butter), var(--c-lime), var(--c-mint), var(--c-aqua), var(--c-sky), var(--c-peri), var(--c-lilac), var(--c-bubble)) left bottom / 100% 8px no-repeat }

/* 3 · Kaushan Script: a quick brush, like a note pinned to the wall */
.tl--3 .tl__text{ font-family:'Kaushan Script',cursive; font-weight:400; font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.1; color:#2A2460; transform:rotate(-1.5deg) }

/* 4 · spaced small caps, thin rules either side: the nav's voice, editorial */
.tl--4 .tl__text{ font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.22em; font-size:clamp(.82rem,1.3vw,1.05rem); display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); justify-content:center; text-indent:.34em }
.tl--4 .tl__text::before, .tl--4 .tl__text::after{ content:""; flex:1 1 0; max-width:220px; height:1.5px; background:var(--ink); opacity:.6 }

/* 5 · Playfair Display italic, large, with a flower mark: the gallery voice */
.tl--5 .tl__text{ font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(2.1rem,5vw,4.3rem); line-height:1.06; letter-spacing:-.005em; color:#2A2460; display:inline-flex; align-items:center; gap:clamp(12px,1.6vw,22px) }
.tl--5 .tl__text .fable-bloom{ flex:none }
@media (max-width:560px){ .tl--4 .tl__text{ letter-spacing:.2em; text-indent:.2em } .tl--4 .tl__text::before, .tl--4 .tl__text::after{ display:none } }

/* on the site: the line alone, no option switcher */
.tl--site .pr-switch{ display:none }
.tl--site{ padding-top:clamp(16px,2.4vw,30px) }
.tl--site .tl__text::before, .tl--site .tl__text::after{ max-width:160px }
/* phones: the line fits in one row */
@media (max-width:560px){ .tl--4 .tl__text{ font-size:.66rem; letter-spacing:.16em; text-indent:.16em; white-space:nowrap } }