/* Teen Star Oblici
   The rubric colours arrive as --ts-<rubric> from the plugin.
   Everything below is layout and type. */

/* There was no box-sizing rule here at all, so every padded box was
   content-box and its padding ADDED to the width it had been given. The
   article's text column is a 540px grid track with 91px of horizontal
   padding: as content-box it came out 631px wide and ran its last two
   headline lines underneath the photo. Scoped to the subtree, so nothing
   the parent theme or Elementor owns is affected. */
.ts-oblici,.ts-oblici *,.ts-oblici *::before,.ts-oblici *::after{box-sizing:border-box}


:root{
  --ts-bubblegum:#FFB1EE; --ts-apricot:#FE8E68; --ts-butter:#FFDC5B;
  --ts-pistachio:#D4EA64; --ts-grass:#83DC97; --ts-mint:#6EDBC7;
  --ts-aqua:#5CD0EA; --ts-sky:#5D9DFF; --ts-periwinkle:#949DFF;
  --ts-lilac:#D1A6F2; --ts-blush:#FB94A8;
  --ts-ink:#2B2A33;
  --ts-paper:#FBFAF8;
  --ts-card:#FFFFFF;
  --ts-surface:#F2F1EE;
  --ts-rule:#E6E4E0;
  --ts-dim:#6B6875;
  --ts-night:#1F1E26;
  --ts-night-2:#16151C;

  --ts-r1:12px; --ts-r2:16px; --ts-r3:22px; --ts-r4:30px; --ts-pill:999px;

  --ts-display:"hagrid","Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --ts-text:"hagrid-text","Hanken Grotesk","Helvetica Neue",Arial,sans-serif;

  --ts-shell:min(1280px,100% - 3rem);
  --ts-measure:64ch;

  /* set per page by the rubric body class, below */
  --ts-accent:var(--ts-blush);
}

/* one hook tints a whole page */
.ts-rubric-sve        { --ts-accent:var(--ts-blush); }
.ts-rubric-celebs     { --ts-accent:var(--ts-bubblegum); }
.ts-rubric-muzika     { --ts-accent:var(--ts-sky); }
.ts-rubric-serije     { --ts-accent:var(--ts-grass); }
.ts-rubric-filmovi    { --ts-accent:var(--ts-butter); }
.ts-rubric-kpop       { --ts-accent:var(--ts-lilac); }
.ts-rubric-zivot      { --ts-accent:var(--ts-apricot); }
.ts-rubric-moda       { --ts-accent:var(--ts-periwinkle); }
.ts-rubric-lepota     { --ts-accent:var(--ts-mint); }
.ts-rubric-kvizovi    { --ts-accent:var(--ts-pistachio); }
.ts-rubric-digital    { --ts-accent:var(--ts-aqua); }

.ts-sprite{position:absolute;width:0;height:0;overflow:hidden}

body.ts-oblici{
  margin:0;background:var(--ts-paper);color:var(--ts-ink);
  font-family:var(--ts-text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.ts-oblici h1,.ts-oblici h2,.ts-oblici h3,.ts-oblici h4{
  font-family:var(--ts-display);font-weight:800;line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance;margin:0;
}
.ts-oblici a{color:inherit;text-decoration:none}
.ts-oblici img{max-width:100%;height:auto;display:block}
.ts-oblici :focus-visible{outline:3px solid var(--ts-accent);outline-offset:3px;border-radius:4px}

.ts-shell{width:var(--ts-shell);margin-inline:auto}
.ts-eyebrow{
  font-family:var(--ts-display);font-weight:800;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ---------------- masthead ---------------- */
.ts-masthead{padding:1.5rem 0 1rem;border-bottom:1px solid var(--ts-rule)}
.ts-masthead .ts-shell{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.ts-wordmark{
  font-family:var(--ts-display);font-weight:800;
  font-size:clamp(2.2rem,7vw,5.2rem);letter-spacing:-.06em;line-height:.9;
}
.ts-nav{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end}
.ts-nav a{
  font-family:var(--ts-display);font-weight:800;font-size:.78rem;
  letter-spacing:.04em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:var(--ts-pill);
  border:1.5px solid transparent;
}
.ts-nav a:hover{border-color:var(--ts-ink)}

/* ---------------- the character rail ---------------- */
.ts-rail{border-bottom:1px solid var(--ts-rule);padding:1.1rem 0}
.ts-rail-track{display:flex;gap:1.35rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}
.ts-rail-track::-webkit-scrollbar{display:none}
.ts-rail-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:78px}
.ts-rail-item svg{transition:transform .18s cubic-bezier(.22,1.2,.36,1)}
.ts-rail-item:hover svg{transform:scale(1.12) rotate(-5deg)}
.ts-rail-item span{
  font-family:var(--ts-display);font-weight:800;font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ts-dim);
  white-space:nowrap;
}

/* ---------------- badge, object, window ---------------- */
.ts-badge{
  display:inline-flex;align-items:center;gap:.38rem;
  padding:.3rem .72rem .3rem .36rem;border-radius:var(--ts-pill);
  font-family:var(--ts-display);font-weight:800;font-size:.76rem;
  letter-spacing:-.01em;color:var(--ts-ink);
}
.ts-badge-obj{width:19px;height:19px;flex:none}
.ts-obj{display:block}

.ts-window{
  display:block;width:100%;aspect-ratio:1;
  -webkit-mask-image:var(--ts-mask);mask-image:var(--ts-mask);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.ts-window img,.ts-window-flat{width:100%;height:100%;object-fit:cover;display:block}

/* ---------------- the card ---------------- */
.ts-card{
  border-radius:var(--ts-r3);padding:.85rem;
  display:flex;flex-direction:column;gap:.7rem;
  color:var(--ts-ink);background:var(--ts-accent);
  transition:transform .18s cubic-bezier(.22,1.2,.36,1);
}
.ts-card:hover{transform:translateY(-3px)}
.ts-card .ts-frame{
  background:#FFFDFA;border-radius:var(--ts-r1);
  aspect-ratio:4/3;display:block;padding:.55rem;overflow:hidden;
}
.ts-card .ts-frame .ts-window{width:100%;height:100%;aspect-ratio:auto}
.ts-card h3{font-size:1rem;letter-spacing:-.028em;line-height:1.15}
.ts-card p{font-size:.78rem;line-height:1.35;opacity:.84;margin:0}
.ts-card .ts-body{display:flex;flex-direction:column;gap:.3rem;padding:0 .25rem}
.ts-card .ts-pill{
  align-self:flex-start;margin:.15rem .25rem .1rem;
  border:1.5px solid currentColor;border-radius:var(--ts-pill);
  padding:.32rem .8rem;font-family:var(--ts-display);font-weight:800;font-size:.7rem;
}
.ts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}

/* ---------------- homepage hero ---------------- */
.ts-hero{padding:2rem 0 0}
.ts-hero-in{
  display:grid;gap:1.5rem;align-items:end;
  grid-template-columns:1fr;
}
@media(min-width:900px){ .ts-hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2.5rem} }
.ts-hero-art{
  border-radius:var(--ts-r4);overflow:hidden;background:var(--ts-surface);
  aspect-ratio:4/3;
}
.ts-hero-art img{width:100%;height:100%;object-fit:cover}
.ts-hero-txt{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.ts-hero-txt h2{font-size:clamp(2.1rem,5.4vw,4rem);letter-spacing:-.045em}
.ts-hero-txt p{color:var(--ts-dim);font-size:1.02rem;max-width:44ch;margin:0}
.ts-byline{
  font-family:var(--ts-display);font-weight:800;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ts-dim);
}

/* ---------------- section headers ---------------- */
.ts-sec{padding:clamp(2.5rem,5vw,4rem) 0}
.ts-sec-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.ts-sec-head h2{font-size:clamp(1.7rem,4vw,2.8rem)}
.ts-sec-head .ts-obj{flex:none}
.ts-sec-head .ts-more{
  margin-left:auto;font-family:var(--ts-display);font-weight:800;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;
  border:1.5px solid currentColor;border-radius:var(--ts-pill);padding:.42rem .9rem;
  white-space:nowrap;
}

/* ---------------- quiz strip, the loud one ---------------- */
.ts-quiz{background:color-mix(in oklab,var(--ts-pistachio) 26%,var(--ts-paper))}
.ts-quiz .ts-sec-head h2{color:var(--ts-ink)}
.ts-quiz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.ts-quiz-card{
  background:var(--ts-card);border-radius:var(--ts-r3);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 6px 18px -12px rgb(0 0 0 / .4);
  transition:transform .18s cubic-bezier(.22,1.2,.36,1);
}
.ts-quiz-card:hover{transform:translateY(-3px)}
.ts-quiz-card .ts-qtop{
  background:var(--ts-pistachio);padding:1.1rem;display:grid;place-items:center;
}
.ts-quiz-card .ts-qtop .ts-window{width:100%;height:120px;aspect-ratio:auto}
.ts-quiz-card .ts-qbody{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem}
.ts-quiz-card h3{font-size:1.02rem;letter-spacing:-.028em;line-height:1.15}
.ts-quiz-card .ts-q-meta{font-size:.74rem;color:var(--ts-dim)}
.ts-quiz-card .ts-q-go{
  margin-top:.35rem;align-self:flex-start;background:var(--ts-ink);color:var(--ts-paper);
  border-radius:var(--ts-pill);padding:.4rem .9rem;
  font-family:var(--ts-display);font-weight:800;font-size:.72rem;letter-spacing:.04em;
}

/* ---------------- video band, the dark one ---------------- */
.ts-video{background:var(--ts-night);color:#F2F1F6}
.ts-video .ts-sec-head h2{color:#F2F1F6}
.ts-video .ts-more{color:#F2F1F6}
.ts-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.ts-video-card{display:flex;flex-direction:column;gap:.6rem}
.ts-video-thumb{
  position:relative;border-radius:var(--ts-r2);overflow:hidden;
  aspect-ratio:16/9;background:#2A2833;
}
.ts-video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ts-video-card:hover .ts-video-thumb img{transform:scale(1.05)}
.ts-play{
  position:absolute;inset:auto auto 10px 10px;
  width:38px;height:38px;border-radius:var(--ts-pill);
  background:var(--ts-accent);display:grid;place-items:center;
}
.ts-play svg{width:15px;height:15px;fill:var(--ts-ink);margin-left:2px}
.ts-video-card h3{font-size:1.02rem;color:#F2F1F6;letter-spacing:-.03em;line-height:1.2}
.ts-video-card .ts-dur{
  position:absolute;inset:auto 10px 10px auto;
  background:rgb(0 0 0 / .72);color:#fff;border-radius:var(--ts-pill);
  padding:.16rem .5rem;font-family:var(--ts-display);font-weight:800;font-size:.68rem;
}

/* ---------------- latest rail ---------------- */
.ts-latest{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:960px){ .ts-latest{grid-template-columns:minmax(0,1fr) 320px;gap:3rem} }
.ts-list{display:flex;flex-direction:column}
.ts-list a{
  display:grid;grid-template-columns:76px 1fr;gap:.9rem;align-items:start;
  padding:.9rem 0;border-bottom:1px solid var(--ts-rule);
}
.ts-list a:first-child{padding-top:0}
.ts-list .ts-thumb{border-radius:var(--ts-r1);overflow:hidden;aspect-ratio:1;background:var(--ts-surface)}
.ts-list .ts-thumb img{width:100%;height:100%;object-fit:cover}
.ts-list h3{font-size:.94rem;letter-spacing:-.025em;line-height:1.22}
.ts-list .ts-when{font-size:.72rem;color:var(--ts-dim);margin-top:.2rem;display:block}
.ts-rail-head{
  font-family:var(--ts-display);font-weight:800;font-size:1.25rem;
  letter-spacing:-.03em;padding-bottom:.6rem;margin-bottom:.4rem;
  border-bottom:2px solid var(--ts-accent);
}

/* ---------------- article ---------------- */
/* scaleX on a full-width bar, not an animated width: this repaints on every
   scroll frame, and width is a layout property while transform is not. */
.ts-progress{
  position:fixed;inset:0 auto auto 0;height:4px;width:100%;z-index:99;
  background:var(--ts-accent);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}
.ts-art-hero{position:relative;border-radius:0 0 var(--ts-r4) var(--ts-r4);overflow:hidden;background:var(--ts-night)}
.ts-art-hero img{width:100%;max-height:62vh;object-fit:cover;opacity:.86}
.ts-art-head{padding:2rem 0 1.5rem}
.ts-art-head .ts-shell{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;max-width:var(--ts-shell)}
.ts-art-head h1{font-size:clamp(2.1rem,5.6vw,4.2rem);letter-spacing:-.048em;max-width:20ch}
.ts-art-deck{font-size:1.1rem;color:var(--ts-dim);max-width:52ch;margin:0}
.ts-art-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;font-size:.8rem;color:var(--ts-dim)}
.ts-art-meta b{font-family:var(--ts-display);font-weight:800;color:var(--ts-ink)}

.ts-art-body{display:grid;gap:2.5rem;grid-template-columns:1fr;padding:1rem 0 3rem}
@media(min-width:1040px){ .ts-art-body{grid-template-columns:minmax(0,1fr) 300px;gap:3.5rem} }
.ts-prose{max-width:var(--ts-measure);font-size:1.08rem;line-height:1.7}
.ts-prose > * + *{margin-top:1.1rem}
.ts-prose h2{font-size:1.6rem;margin-top:2.2rem;letter-spacing:-.03em}
.ts-prose h3{font-size:1.25rem;margin-top:1.8rem}
.ts-prose a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--ts-accent)}
.ts-prose blockquote{
  margin:1.8rem 0;padding:1rem 1.25rem;border-left:5px solid var(--ts-accent);
  background:var(--ts-surface);border-radius:0 var(--ts-r2) var(--ts-r2) 0;
  font-family:var(--ts-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;line-height:1.3;
}
.ts-prose img{border-radius:var(--ts-r2)}

/* the read-next block that interrupts the body */
.ts-interrupt{
  margin:2.2rem 0;border-radius:var(--ts-r3);overflow:hidden;
  background:var(--ts-accent);display:grid;grid-template-columns:104px 1fr;
  gap:1rem;align-items:center;padding:.85rem 1.1rem .85rem .85rem;
}
.ts-interrupt .ts-frame{background:#FFFDFA;border-radius:var(--ts-r1);padding:.5rem;display:grid;place-items:center}
.ts-interrupt .ts-window{width:100%;height:76px;aspect-ratio:auto}
.ts-interrupt .ts-k{
  font-family:var(--ts-display);font-weight:800;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;opacity:.72;display:block;margin-bottom:.2rem;
}
.ts-interrupt h3{font-size:1.1rem;letter-spacing:-.03em;line-height:1.18}

/* sticky rail that keeps the next story in view */
.ts-side{align-self:start}
@media(min-width:1040px){ .ts-side{position:sticky;top:1.5rem} }
.ts-side .ts-list a{grid-template-columns:60px 1fr;gap:.75rem;padding:.75rem 0}
.ts-side .ts-list h3{font-size:.88rem}

/* end-of-article surfaces */
.ts-after{border-top:1px solid var(--ts-rule);padding:clamp(2.5rem,5vw,4rem) 0}
.ts-after + .ts-after{border-top:0;padding-top:0}
.ts-cta{
  border-radius:var(--ts-r4);padding:clamp(1.5rem,4vw,2.5rem);
  background:var(--ts-pistachio);display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;
}
.ts-cta .ts-obj{flex:none}
.ts-cta-txt{flex:1 1 260px}
.ts-cta h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:.3rem}
.ts-cta p{margin:0;font-size:.95rem;opacity:.82}
.ts-cta .ts-go{
  background:var(--ts-ink);color:var(--ts-paper);border-radius:var(--ts-pill);
  padding:.65rem 1.3rem;font-family:var(--ts-display);font-weight:800;font-size:.84rem;
  white-space:nowrap;
}

/* ---------------- rubric archive ---------------- */
.ts-arch-head{
  background:color-mix(in oklab,var(--ts-accent) 30%,var(--ts-paper));
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.5rem,3vw,2.5rem);
  border-bottom:2px solid var(--ts-accent);
}
.ts-arch-in{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:center}
@media(min-width:820px){ .ts-arch-in{grid-template-columns:auto minmax(0,1fr);gap:2.5rem} }
.ts-arch-art{
  width:clamp(120px,22vw,208px);aspect-ratio:1;
  background:#FFFDFA;border-radius:var(--ts-r4);display:grid;place-items:center;padding:1.1rem;
}
.ts-arch-art .ts-obj{width:100%;height:auto}
.ts-arch-txt{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.ts-arch-txt h1{font-size:clamp(2.6rem,8vw,5.5rem);letter-spacing:-.055em;line-height:.95}
.ts-arch-txt p{margin:0;font-size:1.08rem;max-width:52ch;opacity:.86}
.ts-arch-count{
  font-family:var(--ts-display);font-weight:800;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;opacity:.66;
}
.ts-arch-lead{padding:clamp(2rem,4vw,3rem) 0 0}

/* ---------------- footer ---------------- */
.ts-foot{border-top:1px solid var(--ts-rule);padding:2.5rem 0 3.5rem;margin-top:2rem}
.ts-foot .ts-shell{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.ts-foot small{color:var(--ts-dim);font-size:.8rem}

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .ts-oblici *,.ts-oblici *::before,.ts-oblici *::after{
    animation-duration:.001ms !important;transition-duration:.001ms !important;
  }
}

/* ============================================================
   Editorial layer: layering, marks, chips, interaction.
   ============================================================ */

.ts-mark{position:absolute;pointer-events:none;overflow:visible}

/* ---- chips: the rubric reads before the photo does ---- */
.ts-chip{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.24rem .6rem .24rem .3rem;border-radius:var(--ts-pill);
  font-family:var(--ts-display);font-weight:800;font-size:.68rem;
  letter-spacing:-.005em;color:var(--ts-ink);white-space:nowrap;
}
.ts-chip svg{width:16px;height:16px;flex:none}
.ts-eb{
  font-family:var(--ts-display);font-weight:800;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;display:block;
}

/* ---- masthead: wordmark overlaps the hero, date runs up the margin ---- */
.ts-top{position:relative;padding:1.2rem 0 0}
.ts-top .ts-shell{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}
.ts-datestamp{
  position:absolute;left:-2.2rem;top:5.5rem;transform:rotate(-90deg);transform-origin:left top;
  font-family:var(--ts-mono,var(--ts-text));font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ts-dim);white-space:nowrap;
}
@media(max-width:1100px){ .ts-datestamp{display:none} }
.ts-wordmark{position:relative;z-index:3}

/* ---- ticker ---- */
.ts-ticker{
  background:var(--ts-ink);color:var(--ts-paper);
  display:flex;align-items:center;gap:1rem;padding:.5rem 0;
}
.ts-ticker-view{flex:1;overflow:hidden;min-width:0}
.ts-ticker-label{
  flex:none;position:relative;z-index:2;
  margin-left:max(1.25rem,calc((100vw - var(--ts-shell))/2));
  font-family:var(--ts-display);font-weight:800;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--ts-blush);color:var(--ts-ink);
  padding:.26rem .66rem;border-radius:var(--ts-pill);
}
.ts-ticker-track{display:flex;gap:2.5rem;white-space:nowrap;animation:ts-slide 42s linear infinite}
.ts-ticker:hover .ts-ticker-track{animation-play-state:paused}
.ts-ticker-track a{
  font-family:var(--ts-display);font-weight:800;font-size:.82rem;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:.5rem;
}
.ts-ticker-track a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ts-dot,var(--ts-blush))}
@keyframes ts-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- the hero block: three uneven columns ---- */
.ts-front{padding:1.5rem 0 0}
.ts-front-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:1000px){
  .ts-front-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.78fr) minmax(0,1fr);gap:2.5rem}
}

/* lead: a rotated colour block and a squiggle sit under and over the photo */
.ts-lead{position:relative;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.ts-lead-art{position:relative;width:100%;isolation:isolate}
.ts-lead-art::before{
  content:"";position:absolute;inset:26px -26px -26px 26px;border-radius:var(--ts-r2);
  background:var(--ts-accent);transform:rotate(-1.8deg);z-index:0;
}
.ts-lead-art img{
  position:relative;z-index:1;width:100%;border-radius:var(--ts-r2);
  aspect-ratio:4/3;object-fit:cover;
}
.ts-lead-art .ts-mark{z-index:2;width:clamp(120px,17vw,190px);height:auto;aspect-ratio:1;right:-34px;bottom:-54px}
.ts-lead h2{font-size:clamp(1.9rem,4vw,3.1rem);letter-spacing:-.045em}
.ts-lead p{color:var(--ts-dim);margin:0;max-width:46ch}
.ts-lead .ts-by{font-size:.76rem;color:var(--ts-dim)}

/* middle: text only, dates and rules, no pictures at all */
.ts-stack{display:flex;flex-direction:column}
.ts-stack a{padding:.95rem 0;border-top:1px solid var(--ts-rule);display:block}
.ts-stack a:first-child{border-top:0;padding-top:0}
.ts-stack .ts-when{font-size:.7rem;color:var(--ts-dim);display:block;margin-bottom:.3rem}
.ts-stack h3{font-size:1.04rem;letter-spacing:-.028em;line-height:1.2;font-weight:800}
.ts-stack a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--ts-accent)}

/* right: mixed sizes, never two the same */
.ts-mix{display:flex;flex-direction:column;gap:1.25rem}
.ts-mix-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ts-mini{display:flex;flex-direction:column;gap:.5rem}
.ts-mini img{border-radius:var(--ts-r1);aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .3s ease}
.ts-mini:hover img{transform:scale(1.03)}
.ts-mini h3{font-size:.92rem;letter-spacing:-.028em;line-height:1.18;font-weight:800}
.ts-wide{display:flex;flex-direction:column;gap:.6rem;padding-top:1.25rem;border-top:1px solid var(--ts-rule)}
.ts-wide h3{font-size:1.3rem;letter-spacing:-.032em;line-height:1.14}
.ts-wide img{border-radius:var(--ts-r1);aspect-ratio:16/10;object-fit:cover;width:100%}

/* ---- rubric filter rail ---- */
.ts-rail-item{position:relative;border-radius:var(--ts-r2);padding:.4rem .2rem;transition:background .18s ease}
.ts-rail-item[aria-pressed="true"]{background:color-mix(in oklab,var(--ts-c,var(--ts-blush)) 30%,transparent)}
.ts-rail-item[aria-pressed="true"] span{color:var(--ts-ink)}
.ts-rail-filter{border:0;background:none;font:inherit;cursor:pointer;color:inherit}
.ts-filter-note[hidden]{display:none}
.ts-filter-note{
  display:flex;align-items:center;gap:.6rem;padding-top:.7rem;
  font-size:.78rem;color:var(--ts-dim);
}
.ts-filter-note button{
  border:1.5px solid currentColor;background:none;border-radius:var(--ts-pill);
  padding:.2rem .6rem;font-family:var(--ts-display);font-weight:800;font-size:.68rem;
  cursor:pointer;color:inherit;
}

/* ---- mosaic: uneven spans, not a uniform grid ---- */
.ts-mosaic{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .ts-mosaic{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1180px){ .ts-mosaic{grid-template-columns:repeat(6,1fr)} }
.ts-mosaic > *{grid-column:span 2}
@media(min-width:1180px){
  .ts-mosaic > .sp3{grid-column:span 3}
  .ts-mosaic > .sp2{grid-column:span 2}
}
.ts-card{position:relative;transition:transform .2s cubic-bezier(.22,1.2,.36,1),box-shadow .2s ease}
.ts-card:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 18px 34px -22px rgb(0 0 0 / .5)}
.ts-card .ts-chip{position:absolute;top:1.35rem;left:1.35rem;z-index:2;background:var(--ts-card)!important}
.ts-card.sp3 h3{font-size:1.28rem}
.ts-card.sp3 .ts-frame{aspect-ratio:16/10}

/* ---- inline quiz: one real question, answerable on the page ---- */
.ts-quiz{position:relative;overflow:hidden}
.ts-quiz .ts-mark{width:150px;height:150px;top:-30px;right:4%;opacity:.5}
.ts-tease{
  background:var(--ts-card);border-radius:var(--ts-r4);padding:1.4rem;
  display:grid;gap:1.1rem;grid-template-columns:1fr;margin-bottom:1rem;
}
@media(min-width:840px){ .ts-tease{grid-template-columns:auto minmax(0,1fr);gap:1.8rem;align-items:center} }
.ts-tease-art{width:clamp(96px,16vw,148px);aspect-ratio:1;display:grid;place-items:center}
.ts-tease h3{font-size:clamp(1.2rem,2.6vw,1.75rem);margin-bottom:.9rem}
.ts-opts{display:grid;gap:.5rem;grid-template-columns:1fr}
@media(min-width:620px){ .ts-opts{grid-template-columns:1fr 1fr} }
.ts-opt{
  border:0;text-align:left;cursor:pointer;font:inherit;
  background:var(--ts-surface);border-radius:var(--ts-pill);
  padding:.72rem 1.1rem;font-family:var(--ts-display);font-weight:800;font-size:.92rem;
  color:var(--ts-ink);transition:transform .15s ease,background .15s ease;
}
.ts-opt:hover{transform:translateX(4px)}
.ts-opt.right{background:var(--ts-grass)}
.ts-opt.wrong{background:var(--ts-blush)}
.ts-opt[disabled]{cursor:default;transform:none}
.ts-verdict{margin-top:.8rem;font-size:.9rem;font-weight:700;min-height:1.4em}

/* ---- video: one big, three small ---- */
.ts-video-lead{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:960px){ .ts-video-lead{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.6rem} }
.ts-video-lead .ts-video-card:first-child h3{font-size:1.5rem}
.ts-video-side{display:flex;flex-direction:column;gap:1rem}
.ts-video-side .ts-video-card{display:grid;grid-template-columns:132px 1fr;gap:.8rem;align-items:center}
.ts-video-side .ts-video-thumb{aspect-ratio:16/9}
.ts-video-side h3{font-size:.9rem}

/* ---- numbered most-read ---- */
.ts-top10{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:760px){ .ts-top10{grid-template-columns:1fr 1fr;column-gap:2.5rem} }
.ts-top10 a{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--ts-rule);
}
.ts-top10 .ts-num{
  font-family:var(--ts-display);font-weight:800;font-size:2rem;line-height:1;
  letter-spacing:-.06em;color:var(--ts-num,var(--ts-blush));min-width:1.6ch;
}
.ts-top10 h3{font-size:.98rem;letter-spacing:-.028em;line-height:1.2;font-weight:800}
.ts-top10 a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* ---- section heads get a mark ---- */
.ts-sec{position:relative}
.ts-sec-head{position:relative}

/* ---- scroll reveal ---- */
.ts-rise{opacity:0;transform:translateY(14px)}
.ts-rise.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){ .ts-rise{opacity:1;transform:none} }

/* wide cards go horizontal: a 1:1 silhouette in a 16:10 frame leaves dead
   space either side, so the text moves alongside it instead of underneath */
@media(min-width:1180px){
  .ts-card.sp3{
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:.2rem 1rem;align-items:center;
  }
  .ts-card.sp3 .ts-frame{aspect-ratio:1;grid-row:span 2}
  .ts-card.sp3 .ts-body{padding-right:.6rem}
  .ts-card.sp3 h3{font-size:1.35rem}
  .ts-card.sp3 p{font-size:.82rem;-webkit-line-clamp:4}
  .ts-card.sp3 .ts-chip{top:1.35rem;left:auto;right:1.35rem}
}

/* the burst sits behind the heading, clear of the button */
.ts-quiz .ts-mark{top:-42px;right:auto;left:31%;opacity:.45}
@media(max-width:900px){ .ts-quiz .ts-mark{display:none} }

/* clamp card copy so rows stay level */
.ts-card p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

/* the offset block extends past the photo, so the eyebrow needs clearance */
.ts-lead-art{margin-bottom:2.4rem}

/* ============================================================
   MODULE: ts-accordion
   Four rubric panels. One open at a time. Horizontal on laptop,
   vertical on mobile. Colour is pulled from the rubric, never set.
   HyperKit: widget with a repeater of 4 category ids + post count.
   ============================================================ */
.ts-acc{
  display:flex;flex-direction:column;gap:.55rem;
  margin:1.25rem 0 0;
}
@media(min-width:900px){ .ts-acc{flex-direction:row;height:clamp(380px,44vw,500px)} }

.ts-panel{
  position:relative;overflow:hidden;border:0;padding:0;cursor:pointer;
  border-radius:var(--ts-r4);background:var(--ts-p);color:var(--ts-ink);
  font:inherit;text-align:left;display:flex;
  flex:0 0 72px;                 /* collapsed, mobile */
  transition:flex .45s cubic-bezier(.22,1,.36,1);
}
.ts-panel[aria-expanded="true"]{flex:1 1 auto;min-height:min(62vh,440px)}
@media(min-width:900px){
  .ts-panel{flex:0 0 92px;min-height:0}
  .ts-panel[aria-expanded="true"]{flex:1 1 0;min-height:0}
}

/* collapsed face: character + name, upright on mobile, turned on laptop */
.ts-panel-tab{
  flex:none;display:flex;align-items:center;gap:.8rem;
  padding:1rem 1.15rem;width:100%;
}
@media(min-width:900px){
  .ts-panel-tab{
    width:92px;height:100%;flex-direction:column;justify-content:flex-start;
    padding:1.15rem .5rem;gap:1.1rem;
  }
  .ts-panel-tab .ts-panel-name{
    writing-mode:vertical-rl;transform:rotate(180deg);
  }
}
.ts-panel-name{
  font-family:var(--ts-display);font-weight:800;
  font-size:clamp(.95rem,1.5vw,1.35rem);letter-spacing:-.02em;white-space:nowrap;
}
.ts-panel-tab .ts-obj{flex:none}
.ts-panel-count{
  margin-left:auto;font-family:var(--ts-display);font-weight:800;font-size:.72rem;
  opacity:.6;
}
@media(min-width:900px){ .ts-panel-count{margin:auto 0 0} }

/* the body only exists while the panel is open */
.ts-panel-body{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;
  padding:0 1.15rem 1.15rem;opacity:0;transition:opacity .3s ease .12s;
}
@media(min-width:900px){ .ts-panel-body{padding:1.35rem 1.4rem 1.2rem 0} }
.ts-panel[aria-expanded="false"] .ts-panel-body{display:none}
.ts-panel[aria-expanded="true"] .ts-panel-body{opacity:1}

.ts-panel-lead{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.35rem}
.ts-panel-lead img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--ts-r2);
}
.ts-panel-lead h3{font-size:clamp(1.1rem,2vw,1.55rem);letter-spacing:-.032em;line-height:1.12}
.ts-panel-list{display:flex;flex-direction:column}
.ts-panel-list a{
  padding:.6rem 0;border-top:1.5px solid rgb(0 0 0 / .16);
  font-family:var(--ts-display);font-weight:800;font-size:.86rem;
  letter-spacing:-.02em;line-height:1.24;display:block;
}
.ts-panel-list a:hover{opacity:.62}
.ts-panel-more{
  align-self:flex-start;margin-top:.7rem;border:1.5px solid currentColor;
  border-radius:var(--ts-pill);padding:.36rem .85rem;
  font-family:var(--ts-display);font-weight:800;font-size:.72rem;
}

/* ============================================================
   MODULE: ts-rows
   The feed, Elite Daily style: kicker, headline, hairline rules.
   No cards, no colour fills, no cropped photos.
   HyperKit: widget with category filter + count + column count.
   ============================================================ */
.ts-rows{
  display:grid;grid-template-columns:1fr;
  border-top:2px solid var(--ts-ink);
}
@media(min-width:640px){ .ts-rows{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .ts-rows{grid-template-columns:repeat(4,1fr)} }
.ts-row{
  padding:1.1rem 1.25rem 1.3rem;
  border-bottom:1px solid var(--ts-rule);
  display:flex;flex-direction:column;gap:.4rem;
}
@media(min-width:640px){ .ts-row{border-left:1px solid var(--ts-rule)} }
@media(min-width:640px){ .ts-row:nth-child(2n+1){border-left:0} }
@media(min-width:1040px){
  .ts-row:nth-child(2n+1){border-left:1px solid var(--ts-rule)}
  .ts-row:nth-child(4n+1){border-left:0}
}
.ts-row .ts-kicker{
  font-family:var(--ts-display);font-weight:800;font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;
}
.ts-row h3{
  font-size:1.02rem;letter-spacing:-.028em;line-height:1.2;font-weight:800;
}
.ts-row:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ts-row img{
  width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:.15rem;
  transition:opacity .2s ease;
}
.ts-row:hover img{opacity:.88}
.ts-row .ts-when{font-size:.7rem;color:var(--ts-dim);margin-top:auto;padding-top:.3rem}

/* a wide row every so often, so the grid is not four identical columns */
@media(min-width:1040px){
  .ts-row.wide{grid-column:span 2;flex-direction:row;gap:1rem;align-items:flex-start}
  .ts-row.wide img{width:46%;flex:none;aspect-ratio:4/3;margin:0}
  .ts-row.wide h3{font-size:1.32rem;letter-spacing:-.032em;line-height:1.14}
  .ts-row.wide .ts-rowtxt{display:flex;flex-direction:column;gap:.35rem}
}

/* the repeating section word, Elite Daily's marquee */
.ts-bigword{
  overflow:hidden;border-top:2px solid var(--ts-ink);border-bottom:2px solid var(--ts-ink);
  padding:.15rem 0;margin-bottom:1.5rem;
}
.ts-bigword-track{
  display:flex;gap:1.5rem;white-space:nowrap;
  animation:ts-slide 28s linear infinite;
}
.ts-bigword span{
  font-family:var(--ts-display);font-weight:800;
  font-size:clamp(2rem,5.5vw,3.6rem);letter-spacing:-.05em;line-height:1.02;
  text-transform:uppercase;
}
.ts-bigword span:nth-child(even){color:var(--ts-accent)}
@media (prefers-reduced-motion:reduce){ .ts-bigword-track{animation:none} }

/* the panel owns its height; the photo flexes into whatever is left over,
   otherwise a 16:9 lead at panel width dictates the whole accordion */
.ts-panel-body{height:100%;overflow:hidden}
.ts-panel[aria-expanded="true"]{max-height:min(72vh,620px)}
@media(min-width:900px){ .ts-panel[aria-expanded="true"]{max-height:none} }
.ts-panel-lead{flex:1 1 auto;min-height:0;overflow:hidden}
.ts-panel-lead img{flex:1 1 32%;min-height:80px;aspect-ratio:auto;height:auto}
.ts-panel-lead h3{flex:none}
.ts-panel-list,.ts-panel-more{flex:none}

/* a flex item defaults to min-width:auto, so the shortcut rail refused to
   shrink and pushed the page sideways on narrow screens */

/* the squiggle overhangs the photo by design, but on a narrow screen that
   overhang is wider than the page gutter */
@media(max-width:560px){
  .ts-lead-art .ts-mark{right:-8px;bottom:-34px;width:110px}
}

/* overflow-x:clip rather than hidden: hidden here would create a scroll
   container and break position:sticky on the article rail. It has to sit on
   the root as well, or the document still scrolls sideways. */
html:has(body.ts-oblici),body.ts-oblici{overflow-x:clip}

/* on mobile the panel stacks: the tab is a header strip, the body flows under
   it. Without this the tab's width:100% leaves the body no room at all. */
@media(max-width:899px){
  .ts-panel{flex-direction:column}
  .ts-panel-tab{flex:none;width:100%;height:auto}
  .ts-panel[aria-expanded="true"] .ts-panel-tab{padding-bottom:.6rem}
  .ts-panel-body{padding:0 1.15rem 1.15rem;flex:1 1 auto;min-height:0;display:flex}
  .ts-panel-lead img{min-height:120px}
}

/* ============================================================
   POSTER LAYER
   The references are printed at poster scale: the wordmark fills the
   page, headlines run 70-110px, and almost every section sits on its
   own full-bleed ground. Everything below raises the page to that.
   ============================================================ */
:root{ --ts-shell:min(1560px,100% - 3rem); }

/* ---- full-bleed grounds ---- */
.ts-band{position:relative;padding:clamp(2.2rem,4.5vw,4rem) 0}
.ts-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ts-ground,transparent);
}
.ts-band > .ts-shell{position:relative}
.ts-band.tight{padding:clamp(1.6rem,3vw,2.6rem) 0}
.ts-band.dark{background:var(--ts-night);color:#F4F2F5}
.ts-band.dark h2,.ts-band.dark h3{color:#F4F2F5}
.ts-band.dark .ts-more{color:#F4F2F5}

/* ---- the wordmark fills the page, Nylon-style ---- */
.ts-top{padding:.9rem 0 0;border-bottom:0}
.ts-top .ts-shell{flex-direction:column;align-items:stretch;gap:.1rem}
.ts-top .ts-nav{order:-1;justify-content:flex-end;padding-bottom:.2rem}
.ts-masthead-word{
  font-family:var(--ts-display);font-weight:800;display:block;
  font-size:clamp(3.4rem,13.2vw,12rem);line-height:.82;letter-spacing:-.062em;
  margin:0 0 -.04em;
}
.ts-top .ts-wordmark{font-size:inherit;letter-spacing:inherit;line-height:inherit}

/* ---- poster headlines ---- */
.ts-lead h2{font-size:clamp(2.4rem,5.6vw,5rem);letter-spacing:-.052em;line-height:.96}
.ts-sec-head h2,.ts-band h2{font-size:clamp(2.2rem,5.2vw,4.4rem);letter-spacing:-.05em}
.ts-stack h3{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.18}
.ts-row h3{font-size:1.06rem;line-height:1.2}
.ts-row.wide h3{font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.06;letter-spacing:-.04em}

/* the section word, set as a slab rather than a caption */
.ts-bigword{border-top-width:3px;border-bottom-width:3px;margin-bottom:1.1rem}
.ts-bigword span{font-size:clamp(2.6rem,7.5vw,6.4rem);letter-spacing:-.062em}

/* ---- hero: the photo breaks out, the headline sits on the colour ---- */
.ts-front{padding:.6rem 0 0}
.ts-front-grid{gap:1.6rem}
@media(min-width:1000px){
  .ts-front-grid{grid-template-columns:minmax(0,1.62fr) minmax(0,.72fr) minmax(0,.92fr);gap:2.2rem}
}
.ts-lead-art::before{inset:32px -34px -32px 32px}
.ts-lead-art img{aspect-ratio:16/10;border-radius:0}
.ts-lead-art{margin-bottom:2.8rem;border-radius:0}

/* squared images read as press photos, not app tiles */
.ts-mini img,.ts-wide img,.ts-row img{border-radius:0}

/* ---- denser feed ---- */
.ts-row{padding:.95rem 1.1rem 1.1rem;gap:.32rem}
.ts-rows{border-top-width:3px}
@media(min-width:1440px){ .ts-rows{grid-template-columns:repeat(5,1fr)}
  .ts-row:nth-child(2n+1),.ts-row:nth-child(4n+1){border-left:1px solid var(--ts-rule)}
  .ts-row:nth-child(5n+1){border-left:0}
  .ts-row.wide{grid-column:span 2}
}

/* ---- most-read: the numeral is the design ---- */
.ts-top10 a{grid-template-columns:auto 1fr;gap:1.1rem;padding:.7rem 0;align-items:center}
.ts-top10 .ts-num{
  font-size:clamp(3rem,5.4vw,5.2rem);letter-spacing:-.07em;line-height:.8;
  min-width:2.2ch;text-align:right;
}
.ts-top10 h3{font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.16;letter-spacing:-.028em}

/* ---- video at scale ---- */
.ts-video-thumb{border-radius:0}
.ts-video-lead .ts-video-card:first-child h3{font-size:clamp(1.5rem,2.8vw,2.4rem);letter-spacing:-.04em;line-height:1.04}
.ts-video-side h3{font-size:1rem;line-height:1.16}
.ts-video-side .ts-video-card{grid-template-columns:168px 1fr}

/* ---- quiz band at scale ---- */
.ts-tease{border-radius:var(--ts-r4);padding:1.6rem}
.ts-tease h3{font-size:clamp(1.4rem,3.2vw,2.4rem);letter-spacing:-.04em;line-height:1.04}
.ts-opt{font-size:1rem;padding:.8rem 1.2rem}
.ts-quiz-card .ts-qtop .ts-window{height:150px}
.ts-quiz-card h3{font-size:1.08rem}

/* ---- accordion on its own ground ---- */
@media(min-width:900px){ .ts-acc{height:clamp(400px,46vw,540px)} }
.ts-panel{border-radius:var(--ts-r3)}
.ts-panel-lead h3{font-size:clamp(1.2rem,2.2vw,1.85rem);letter-spacing:-.038em}
.ts-panel-list a{font-size:.92rem}

/* ---- section heads: a rule, not a row of identical widgets ---- */
.ts-sec-head{border-bottom:3px solid currentColor;padding-bottom:.5rem;margin-bottom:1.4rem;align-items:flex-end}
.ts-sec-head .ts-obj{margin-bottom:-.15rem}
.ts-more{align-self:flex-end}

/* ---- kill the dead air ---- */
.ts-sec{padding:clamp(2rem,3.8vw,3.4rem) 0}
.ts-foot{margin-top:0;padding:2rem 0 2.5rem}
.ts-foot .ts-wordmark{font-size:clamp(3rem,12vw,10rem);line-height:.8;letter-spacing:-.062em}
.ts-foot .ts-shell{align-items:flex-end}

.ts-vtxt{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.ts-video-side .ts-video-card{align-items:start}

/* the block peeks out below and slightly left, the way a print block does.
   Offsetting it right pushed it into the next column. */
.ts-lead-art::before{inset:28px 28px -28px -18px;transform:rotate(-1.4deg)}
.ts-lead-art .ts-mark{right:auto;left:-26px;bottom:-46px;width:clamp(96px,11vw,132px)}
.ts-lead-art{margin-bottom:3rem}

/* scope the feature headline to the lead card only; :first-child also matched
   the first card inside the side column */
.ts-video-lead .ts-video-card:first-child h3{font-size:inherit}
.ts-video-lead > .ts-video-card > .ts-vtxt h3{
  font-size:clamp(1.5rem,2.8vw,2.4rem);letter-spacing:-.04em;line-height:1.04;
}
.ts-video-side .ts-vtxt h3{font-size:1rem;line-height:1.18;letter-spacing:-.022em}

/* ============================================================
   accordion: one story per panel
   ============================================================ */
.ts-panel-lead{gap:.7rem}
.ts-panel-txt{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.ts-panel-when{
  font-family:var(--ts-display);font-weight:800;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;opacity:.6;
}
.ts-panel-lead img{flex:1 1 auto;min-height:100px}
.ts-panel-lead h3{font-size:clamp(1.15rem,1.9vw,1.7rem);line-height:1.08}
.ts-panel-more{margin-top:.8rem}

/* ============================================================
   MODULE: ts-menu  —  a character is the hamburger
   ============================================================ */
.ts-burger{
  border:0;background:none;padding:.2rem;cursor:pointer;line-height:0;
  border-radius:var(--ts-pill);flex:none;
}
.ts-burger .ts-obj{transition:transform .32s cubic-bezier(.22,1.4,.36,1)}
.ts-burger:hover .ts-obj{transform:scale(1.1) rotate(-6deg)}
.ts-burger.pop .ts-obj{animation:ts-squash .42s cubic-bezier(.22,1.3,.36,1)}
@keyframes ts-squash{
  0%{transform:none}
  35%{transform:scale(1.28,.76) rotate(-12deg)}
  70%{transform:scale(.88,1.14) rotate(8deg)}
  100%{transform:none}
}

.ts-menu{
  position:fixed;inset:0;z-index:120;background:var(--ts-paper);
  overflow-y:auto;opacity:0;transition:opacity .22s ease;
}
.ts-menu.on{opacity:1}
.ts-menu[hidden]{display:none}
.ts-menu-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:var(--ts-shell);margin-inline:auto;padding:1.1rem 0 .6rem;
}
.ts-menu-bar .ts-wordmark{font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.06em;line-height:.9}
.ts-menu-close{
  border:2px solid currentColor;background:none;cursor:pointer;color:var(--ts-ink);
  width:46px;height:46px;border-radius:var(--ts-pill);display:grid;place-items:center;flex:none;
}
.ts-menu-close svg{width:18px;height:18px;fill:none}
.ts-menu-grid{
  width:var(--ts-shell);margin-inline:auto;padding:.5rem 0 3rem;
  display:grid;gap:1.4rem 2rem;grid-template-columns:1fr;
}
@media(min-width:680px){ .ts-menu-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .ts-menu-grid{grid-template-columns:repeat(3,1fr)} }
.ts-menu-item{
  border-top:2px solid var(--ts-rule);padding-top:.7rem;
  opacity:0;transform:translateY(12px);
}
.ts-menu.on .ts-menu-item{
  opacity:1;transform:none;
  transition:opacity .34s ease var(--d),transform .34s cubic-bezier(.22,1,.36,1) var(--d);
}
.ts-menu-head{display:flex;align-items:center;gap:.7rem}
.ts-menu-head span{
  font-family:var(--ts-display);font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.04em;
}
.ts-menu-head:hover span{color:var(--ts-c)}
.ts-menu-subs{display:flex;flex-wrap:wrap;gap:.35rem;padding:.6rem 0 0 .2rem}
.ts-menu-subs a{
  border:1.5px solid var(--ts-rule);border-radius:var(--ts-pill);
  padding:.26rem .7rem;font-size:.78rem;
}
.ts-menu-subs a:hover{border-color:var(--ts-c);background:var(--ts-c)}

/* ============================================================
   MODULE: ts-loader  —  the rubric colour fills the screen
   ============================================================ */
.ts-loader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--ts-load,var(--ts-blush));
  opacity:0;pointer-events:none;
  clip-path:circle(0% at 50% 50%);
}
.ts-loader.on{
  opacity:1;pointer-events:all;
  animation:ts-wipe .42s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ts-wipe{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(140% at 50% 50%)}}
.ts-loader-obj{display:block}
.ts-loader.on .ts-loader-obj{animation:ts-load-bob 1s cubic-bezier(.45,0,.55,1) .1s infinite}
@keyframes ts-load-bob{
  0%,100%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-16px) scale(1.06,.94)}
  55%{transform:translateY(0) scale(.94,1.06)}
}
@media (prefers-reduced-motion:reduce){
  .ts-loader.on{animation:none;clip-path:none}
  .ts-loader.on .ts-loader-obj{animation:none}
}

/* inside pages: a compact bar, no nav row, the character is the menu */
.ts-bar{
  position:sticky;top:0;z-index:60;background:var(--ts-paper);
  border-bottom:1px solid var(--ts-rule);
}
.ts-bar .ts-shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.ts-bar .ts-wordmark{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.055em;line-height:.9}

/* ============================================================
   ARTICLE
   The source images are 900x600. Nothing here upscales one: the figure
   caps at its natural width and keeps 3:2, so it always renders sharp.
   ============================================================ */
.ts-art{padding-top:clamp(1.2rem,2.6vw,2.2rem)}

.ts-art-top{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){
  .ts-art-top{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2.4rem;align-items:center}
}
.ts-art-txt{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.ts-art-txt h1{
  font-size:clamp(2rem,4.4vw,3.8rem);letter-spacing:-.048em;line-height:.98;
  max-width:18ch;margin:0;
}
.ts-art-deck{font-size:clamp(1rem,1.3vw,1.16rem);color:var(--ts-dim);max-width:46ch;margin:0}
.ts-art-meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;
  font-size:.78rem;color:var(--ts-dim);
}
.ts-art-meta b{font-family:var(--ts-display);font-weight:800;color:var(--ts-ink)}
.ts-art-meta span::before{content:"·";margin-right:.9rem;opacity:.5}

/* the figure never exceeds the file's own pixels */
.ts-art-fig{margin:0;position:relative;max-width:900px;justify-self:end;width:100%}
.ts-art-fig::before{
  content:"";position:absolute;inset:20px -20px -20px 20px;
  background:var(--ts-accent);transform:rotate(-1.2deg);z-index:0;
}
.ts-art-fig img{
  position:relative;z-index:1;display:block;width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;
}
.ts-art-fig figcaption{
  position:relative;z-index:1;padding-top:.5rem;
  font-size:.72rem;color:var(--ts-dim);
}

.ts-art-body{
  display:grid;gap:2rem;grid-template-columns:1fr;
  padding:clamp(1.6rem,3vw,2.6rem) 0 clamp(2rem,3.5vw,3rem);
}
@media(min-width:1040px){ .ts-art-body{grid-template-columns:minmax(0,1fr) 320px;gap:3rem} }
.ts-prose{max-width:66ch}
.ts-prose > * + *{margin-top:1rem}
.ts-lede{font-size:1.2rem;font-weight:500;line-height:1.5}
.ts-prose h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-top:1.9rem;letter-spacing:-.034em}
.ts-prose img{border-radius:0;max-width:900px}

/* the read-next block is a row, not a stack, so it costs one screen inch */
.ts-interrupt{
  display:grid;grid-template-columns:132px 1fr;gap:1rem;align-items:center;
  border-radius:0;padding:.75rem 1.1rem .75rem .75rem;margin:1.8rem 0;
  background:var(--ts-accent);
}
.ts-interrupt img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0;margin:0}
.ts-interrupt h3{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.14;letter-spacing:-.03em}

.ts-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--ts-rule)}
.ts-tags a{
  border:1.5px solid var(--ts-rule);border-radius:var(--ts-pill);
  padding:.3rem .8rem;font-family:var(--ts-display);font-weight:800;font-size:.76rem;
}
.ts-tags a:hover{border-color:var(--ts-c);background:var(--ts-c)}

.ts-side-quiz{
  display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;
  background:var(--ts-pistachio);padding:.9rem 1rem;border-radius:var(--ts-r3);
  font-size:.86rem;line-height:1.25;color:var(--ts-ink);
}
.ts-side-quiz b{font-family:var(--ts-display);font-weight:800;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase}

/* related grid: plain photos, kicker, headline */
.ts-relgrid{display:grid;gap:1rem 1.2rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .ts-relgrid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1180px){ .ts-relgrid{grid-template-columns:repeat(6,1fr)} }
.ts-relcard{display:flex;flex-direction:column;gap:.35rem}
.ts-relcard img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ts-relcard .ts-kicker{
  font-family:var(--ts-display);font-weight:800;font-size:.64rem;
  letter-spacing:.11em;text-transform:uppercase;
}
.ts-relcard h3{font-size:.94rem;line-height:1.18;letter-spacing:-.028em}
.ts-relcard:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* the source files are 900px wide; an open panel can be wider than that on a
   large screen, so cap the photo rather than blow it up */
.ts-panel-lead img{max-width:900px;align-self:flex-start}
@media(min-width:900px){ .ts-panel-lead img{width:100%;object-fit:cover} }

/* ============================================================
   ARTICLE, second pass
   The gap: the text column was 1fr on a 1560px shell while the prose
   capped at 66ch, so ~700px of the row was empty. The column is now
   sized to the measure and the whole body is centred at 1200px.
   ============================================================ */
.ts-art-body{
  max-width:1200px;margin-inline:auto;
  grid-template-columns:1fr;
}
@media(min-width:1040px){
  .ts-art-body{grid-template-columns:minmax(0,1fr) 290px;gap:3rem}
}
.ts-prose{max-width:none}

/* the header sits on its own ground and ends on a rule, Elite Daily style */
.ts-art{padding-top:0}
.ts-art-head-band{
  background:color-mix(in oklab,var(--ts-accent) 13%,#FBFAF8);
  border-bottom:1px solid var(--ts-rule);
  padding:clamp(1.6rem,3.4vw,3rem) 0 clamp(1.1rem,2vw,1.6rem);
}
.ts-art-top{grid-template-columns:1fr;align-items:start}
@media(min-width:900px){
  .ts-art-top{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:2.6rem;align-items:start}
}
.ts-art-kicker{
  font-family:var(--ts-display);font-weight:800;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ts-ink);
}
.ts-art-txt{gap:.9rem}
.ts-art-txt h1{max-width:16ch;font-size:clamp(2.1rem,4.2vw,3.6rem);letter-spacing:-.042em;line-height:1.02}
.ts-byline{
  margin-top:auto;padding-top:1.2rem;display:flex;flex-direction:column;gap:.1rem;
  font-size:.78rem;color:var(--ts-dim);
}
.ts-byline b{
  font-family:var(--ts-display);font-weight:800;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ts-ink);
}
.ts-art-fig{justify-self:stretch;max-width:900px}
.ts-art-fig::before{inset:16px -16px -16px 16px}
.ts-art-fig figcaption{
  text-align:right;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
}
.ts-art-deck{
  margin:1rem 0 0;max-width:52ch;font-size:clamp(.98rem,1.2vw,1.1rem);
  color:var(--ts-ink);
}

/* the opening paragraph gets a drop cap */
.ts-lede{font-size:1.1rem;font-weight:400;line-height:1.6}
.ts-lede::first-letter{
  float:left;font-family:var(--ts-display);font-weight:800;
  font-size:3.4em;line-height:.78;padding:.06em .1em 0 0;
}

/* ---- restore the in-article blocks ---- */
.ts-prose blockquote{
  margin:1.9rem 0;padding:1.1rem 1.35rem;border-left:5px solid var(--ts-accent);
  background:var(--ts-surface);border-radius:0 var(--ts-r2) var(--ts-r2) 0;
  font-family:var(--ts-display);font-weight:800;
  font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.028em;line-height:1.28;
}
.ts-interrupt{
  border-radius:var(--ts-r3);padding:.85rem 1.2rem .85rem .85rem;
  grid-template-columns:104px 1fr;gap:1.1rem;
}
.ts-interrupt .ts-frame{
  background:#FFFDFA;border-radius:var(--ts-r1);padding:.5rem;
  display:grid;place-items:center;
}
.ts-interrupt .ts-window{width:100%;height:76px;aspect-ratio:auto}
.ts-interrupt .ts-k{
  font-family:var(--ts-display);font-weight:800;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;opacity:.72;
  display:block;margin-bottom:.22rem;
}

/* the credit sits under the block, not on it */
.ts-art-fig::before{inset:16px -16px -10px 16px}
.ts-art-fig figcaption{padding-top:1.1rem}

/* pupils track the cursor; --ex/--ey are set per icon by wireEyes() */
.ts-pupil{
  transform:translate(var(--ex,0px),var(--ey,0px));
  transition:transform .14s cubic-bezier(.3,0,.2,1);
}
@media (prefers-reduced-motion:reduce){ .ts-pupil{transform:none;transition:none} }

/* ============================================================
   ARTICLE HEADER, third pass
   Masthead, headline and photo are one block on one ground. The photo
   runs top to bottom and bleeds off the right edge.
   ============================================================ */
.ts-art-head-band{padding:0;border-bottom:1px solid var(--ts-rule);overflow:hidden}
.ts-art-top{
  display:grid;grid-template-columns:1fr;gap:0;align-items:stretch;
}
@media(min-width:900px){
  .ts-art-top{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
}
.ts-art-left{
  display:flex;flex-direction:column;
  padding:1rem max(1.5rem,3vw) clamp(1.4rem,2.6vw,2.4rem) max(1.5rem,3vw);
}
.ts-art-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.5rem,4vw,3.4rem)}
.ts-art-bar .ts-wordmark{font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.055em;line-height:.9}
.ts-art-txt{gap:.9rem;margin-top:auto}
.ts-art-txt h1{max-width:15ch}
.ts-byline{margin-top:1.2rem;padding-top:0}

/* top to bottom, and off the right edge */
.ts-art-fig{
  margin:0;position:relative;max-width:none;width:100%;
  min-height:clamp(260px,34vw,520px);
}
.ts-art-fig::before{display:none}
.ts-art-fig img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  aspect-ratio:auto;max-width:none;
}
@media(max-width:899px){
  .ts-art-fig{min-height:0;position:relative}
  .ts-art-fig img{position:static;height:auto;aspect-ratio:3/2}
  .ts-art-left{order:2;padding-top:1.4rem}
  .ts-art-bar{order:-1;margin-bottom:0}
}

/* ============================================================
   accordion, fixed
   Stacked, the photo capped at its 900px source left a dead strip and
   pushed the button past the panel. Open panels now run side by side.
   ============================================================ */
.ts-panel-body{display:flex;flex-direction:column;gap:.9rem;overflow:hidden}
@media(min-width:900px){
  .ts-panel-body{flex-direction:row;align-items:stretch;gap:1.3rem;padding:1.2rem 1.4rem 1.2rem 0}
}
.ts-panel-photo{
  display:block;overflow:hidden;border-radius:var(--ts-r2);
  flex:1 1 56%;min-width:0;min-height:120px;
}
.ts-panel-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  max-width:none;aspect-ratio:auto;
}
@media(max-width:899px){
  .ts-panel-photo{flex:1 1 auto}
  .ts-panel-photo img{aspect-ratio:3/2;height:auto}
}
.ts-panel-txt{
  flex:1 1 44%;min-width:0;display:flex;flex-direction:column;
  justify-content:center;gap:.4rem;
}
.ts-panel-txt h3{font-size:clamp(1.15rem,1.8vw,1.75rem);line-height:1.08;letter-spacing:-.038em}
.ts-panel-more{align-self:flex-start;margin-top:.9rem}

/* height:100% plus padding was overflowing the panel by exactly the padding;
   flex stretch already sizes the body, so drop the explicit height */
@media(min-width:900px){ .ts-panel-body{height:auto;min-height:0} }

/* the article menu floats over the photo, top right, with a soft plate so it
   stays legible whatever the picture is doing underneath */
.ts-art-head-band{position:relative}
.ts-art-burger{
  position:absolute;top:.85rem;right:max(1.1rem,2vw);z-index:5;
}
/* no plate: a drop shadow keeps the character legible on a dark photo
   without putting a box around it */
.ts-art-burger .ts-burger{background:none;padding:0}
.ts-art-burger .ts-obj{filter:drop-shadow(0 2px 7px rgb(0 0 0 / .45))}
@media(max-width:899px){
  .ts-art-burger{top:.7rem;right:1rem}
  .ts-art-burger .ts-obj{filter:none}
}

/* The photo column caps at the 900px source so it never upscales on a wide
   screen, while the grid still spans the full width so the photo stays flush
   to the browser edge. The text column absorbs whatever is left over. */
@media(min-width:900px){
  .ts-art-top{grid-template-columns:minmax(0,1fr) minmax(0,900px)}
  .ts-art-left{max-width:820px;margin-left:auto;width:100%}
}

/* ---- mobile: the photo leads, the wordmark reverses out over it ---- */
@media(max-width:899px){
  .ts-art-fig{order:1}
  .ts-art-left{order:2}
  .ts-art-bar{
    position:absolute;inset:0 0 auto 0;z-index:4;
    margin:0;padding:.75rem 1rem;
  }
  .ts-art-bar .ts-wordmark{color:#FFFDFA}
  /* a scrim across the top of the photo so the wordmark reads on any picture */
  .ts-art-fig::after{
    content:"";position:absolute;inset:0 0 auto 0;height:130px;z-index:1;
    background:linear-gradient(180deg,rgb(0 0 0 / .52) 0%,rgb(0 0 0 / .22) 55%,transparent 100%);
    pointer-events:none;
  }
  .ts-art-fig img{position:relative;z-index:0}
  .ts-art-burger{top:.75rem;right:1rem}
  .ts-art-burger .ts-obj{filter:drop-shadow(0 2px 7px rgb(0 0 0 / .5))}
}

/* ============================================================
   MODULE: ts-masthead  —  three bands on one set of edges
   ============================================================ */
.ts-top{padding:.7rem 0 0}
.ts-top .ts-shell{display:block}
.ts-util{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--ts-rule);
}
.ts-util-date{
  font-family:var(--ts-display);font-weight:800;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ts-dim);
}
.ts-social{display:flex;align-items:center;gap:.15rem}
.ts-social a{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--ts-pill);
  color:var(--ts-ink);transition:background .16s ease,transform .16s ease;
}
.ts-social a:hover{background:var(--ts-surface);transform:translateY(-1px)}
.ts-social svg{width:17px;height:17px;fill:currentColor}

/* the wordmark spans the measure exactly, so the bar below can line up */
.ts-masthead-word{margin:.1rem 0 -.02em}

/* the rubric bar spreads edge to edge and reads as a band */
.ts-rail{border-top:1px solid var(--ts-rule);border-bottom:1px solid var(--ts-rule);padding:.85rem 0 .7rem}
.ts-rail-track{justify-content:space-between;gap:.5rem}
.ts-rail-item{flex:0 1 auto;width:auto;min-width:0;padding:.35rem .35rem}
@media(max-width:820px){
  .ts-rail-track{justify-content:flex-start;gap:1.1rem}
  .ts-rail-item{flex:0 0 auto}
  .ts-util-date{display:none}
  .ts-util{justify-content:flex-end}
}

/* the wordmark should reach the same right edge as the rules and the rubric
   bar, otherwise the three bands do not read as one block */
/* Tuned so "teenstar" reaches the same right edge as the rules and the
   rubric bar. The ratio is font-specific: retune the vw and the cap when
   hagrid replaces the substitute face. */
.ts-masthead-word{font-size:clamp(3.4rem,20.6vw,20.8rem)}

/* ============================================================
   masthead, reverted and tightened
   Wordmark and nav on one line, then the rubric bar. The wordmark is
   sized for itself, not stretched to the measure, so swapping the logo
   for a real one does not change the layout.
   ============================================================ */
.ts-top{padding:1.1rem 0 0}
/* flex-direction has to be reset: an earlier poster-layer rule set this
   shell to column and it still wins over a bare display:flex */
.ts-top .ts-shell{
  display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;
  gap:1.5rem 2.5rem;flex-wrap:wrap;padding-bottom:.75rem;
}
.ts-masthead-word{
  font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:.84;margin:0;flex:none;
}
.ts-top-right{
  display:flex;align-items:center;gap:.4rem 1.4rem;flex-wrap:wrap;
  justify-content:flex-end;padding-bottom:.35rem;
}
.ts-top .ts-nav{gap:.15rem}
.ts-top .ts-nav a{padding:.34rem .6rem;font-size:.76rem}
.ts-social{gap:0}
.ts-social a{width:30px;height:30px}
.ts-social svg{width:16px;height:16px}

@media(max-width:700px){
  .ts-top .ts-shell{gap:.8rem}
  .ts-top-right{width:100%;justify-content:space-between;padding-bottom:0}
  .ts-top .ts-nav{flex:1 1 auto;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .ts-top .ts-nav::-webkit-scrollbar{display:none}
}

/* ============================================================
   MOBILE PASS
   Desktop devices that do not survive a 390px screen: the offset
   colour block, poster headlines, full-width 4:3 feed photos, and a
   wrapping nav. Each is replaced rather than shrunk.
   ============================================================ */
@media(max-width:760px){

  /* ---- masthead: one tidy block ---- */
  .ts-top{padding:.9rem 0 0}
  .ts-top .ts-shell{gap:.7rem;padding-bottom:.6rem;align-items:center}
  .ts-masthead-word{font-size:clamp(2rem,11vw,2.9rem);flex:1 1 auto}
  .ts-top-right{width:auto;flex:none;padding:0}
  .ts-top .ts-nav{display:none}          /* the rubric bar below already lists them */
  .ts-social{gap:0}
  .ts-social a{width:32px;height:32px}

  /* the rubric bar scrolls as one row, never wraps, never clips a word */
  .ts-rail{padding:.7rem 0}
  .ts-rail-track{
    justify-content:flex-start;flex-wrap:nowrap;gap:1.15rem;
    overflow-x:auto;padding-bottom:.15rem;
  }
  .ts-rail-item{flex:0 0 auto;width:auto}
  .ts-rail-item span{font-size:.62rem}

  /* ---- hero: no offset block, no squiggle, a readable headline ---- */
  .ts-lead-art{margin-bottom:1rem}
  .ts-lead-art::before{display:none}
  .ts-lead-art .ts-mark{display:none}
  .ts-lead-art img{aspect-ratio:4/3}
  .ts-lead h2{font-size:clamp(1.6rem,7.4vw,2.2rem);letter-spacing:-.035em;line-height:1.04}
  .ts-lead p{font-size:.94rem}
  .ts-front{padding-top:1rem}
  .ts-front-grid{gap:1.6rem}

  /* ---- section headings come down to earth ---- */
  .ts-sec-head h2,.ts-band h2{font-size:clamp(1.5rem,7vw,2.1rem)}
  .ts-sec-head{gap:.6rem;margin-bottom:1rem;padding-bottom:.4rem}
  .ts-sec-head .ts-obj{width:34px;height:34px}
  .ts-more{font-size:.68rem;padding:.32rem .7rem}
  .ts-bigword span{font-size:clamp(1.9rem,11vw,3rem)}
  .ts-band{padding:1.8rem 0}

  /* ---- feed: a compact list, not a column of 4:3 photos ---- */
  .ts-rows{grid-template-columns:1fr;border-top-width:2px}
  .ts-row,.ts-row.wide{
    display:grid;grid-template-columns:92px 1fr;gap:.85rem;align-items:start;
    padding:.8rem 0;border-left:0 !important;
  }
  /* align-self:start, or the grid stretches the thumb to the row height and
     aspect-ratio:1 loses */
  .ts-row img,.ts-row.wide img{
    width:92px;height:92px;aspect-ratio:1;object-fit:cover;margin:0;
    grid-row:span 2;align-self:start;
  }
  .ts-row .ts-rowtxt{display:flex;flex-direction:column;gap:.22rem;min-width:0}
  .ts-row h3,.ts-row.wide h3{font-size:.96rem;line-height:1.22;letter-spacing:-.024em}
  .ts-row .ts-kicker{font-size:.6rem}
  .ts-row .ts-when{padding-top:.1rem}

  /* ---- quiz: a swipe row, not four stacked blocks ---- */
  .ts-tease{padding:1rem;gap:.8rem}
  .ts-tease-art{width:64px}
  .ts-tease-art .ts-obj{width:100%;height:auto}
  .ts-tease h3{font-size:1.15rem;margin-bottom:.7rem}
  .ts-opt{font-size:.88rem;padding:.62rem .9rem}
  .ts-quiz-grid{
    display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-bottom:.25rem;
  }
  .ts-quiz-grid::-webkit-scrollbar{display:none}
  .ts-quiz-card{flex:0 0 74%;scroll-snap-align:center}
  .ts-quiz-card .ts-qtop .ts-window{height:104px}
  .ts-quiz-card h3{font-size:.96rem}

  /* ---- video: thumb beside text ---- */
  .ts-video-lead{gap:1rem}
  .ts-video-side .ts-video-card{grid-template-columns:118px 1fr;gap:.7rem}
  .ts-video-lead > .ts-video-card > .ts-vtxt h3{font-size:1.2rem}
  .ts-video-side .ts-vtxt h3{font-size:.9rem}

  /* ---- most read: the numeral stays the point, at a sane size ---- */
  .ts-top10 a{grid-template-columns:auto 1fr;gap:.8rem;padding:.6rem 0}
  .ts-top10 .ts-num{font-size:2.2rem;min-width:1.8ch}
  .ts-top10 h3{font-size:.94rem}

  /* ---- middle column and mix ---- */
  .ts-stack h3{font-size:1rem}
  .ts-stack a{padding:.75rem 0}
  .ts-mix{gap:1rem}
  .ts-wide h3{font-size:1.1rem}
  .ts-mini h3{font-size:.86rem}

  .ts-foot .ts-wordmark{font-size:clamp(2rem,13vw,3rem)}
}

/* ============================================================
   MODULE: ts-stickybar  -  the masthead that contracts to "ts"
   One bar per template, always on screen, two states. Replaces the
   old .ts-sticky clone, which meant two wordmarks in the DOM and a
   bar that flew in from nowhere.
   ============================================================ */

/* The morph. inline-grid 1fr -> 0fr collapses to exactly zero width,
   so there is no measured max-width to keep in step with the font.
   Nothing is added or removed from the DOM: same link, same text,
   so screen readers are unaffected (the <a> carries aria-label). */
.ts-wm-cut{
  display:inline-grid;grid-template-columns:1fr;
  transition:grid-template-columns .5s cubic-bezier(.66,0,.2,1);
}
.ts-wm-cut > span{overflow:hidden;min-width:0}
.ts-shrinkbar.shrunk .ts-wm-cut{grid-template-columns:0fr}

/* fixed, not sticky. A sticky header is in normal flow, so contracting it
   dragged the whole document up 38px mid-scroll and ran layout on every frame
   of the transition. Fixed, with a spacer holding the expanded height, means
   the contraction is confined to the bar's own layer. */
.ts-shrinkbar{
  position:fixed;inset:0 0 auto 0;z-index:60;background:var(--ts-paper);
  contain:layout paint;
}
.ts-bar-spacer{height:0}
.ts-shrinkbar .ts-wordmark{transition:font-size .42s cubic-bezier(.66,0,.2,1)}

/* ---- the menu character ---- */
/* Collapsed to nothing at rest, then it unrolls: a full turn as it
   arrives, so the shrink reads as one movement rather than a button
   appearing. width and transform run on different curves on purpose -
   the spin should still be going when the slot has finished opening. */
.ts-top-burger,.ts-bar-burger{
  display:inline-flex;align-items:center;overflow:hidden;flex:none;
  transition:width .38s cubic-bezier(.66,0,.2,1),opacity .24s ease;
}
.ts-top-burger{width:0;opacity:0}
.ts-shrinkbar.shrunk .ts-top-burger{width:44px;opacity:1}

/* obj() writes explicit width/height ATTRIBUTES, so a container width will
   not shrink the character - it needs a width of its own. At 46px it towered
   over a 2.2rem "ts"; 38 reads as its pair. */
.ts-top-burger .ts-obj,.ts-bar-burger .ts-obj{
  transition:transform .32s cubic-bezier(.22,1.4,.36,1),
             width .4s cubic-bezier(.66,0,.2,1);
}
.ts-shrinkbar.shrunk .ts-top-burger .ts-obj,
.ts-shrinkbar.shrunk .ts-bar-burger .ts-obj{width:38px;height:auto}
.ts-top-burger .ts-burger,.ts-bar-burger .ts-burger{
  transition:transform .62s cubic-bezier(.18,.88,.24,1);
}
.ts-top-burger .ts-burger{transform:rotate(-360deg) scale(.3)}
.ts-shrinkbar.shrunk .ts-top-burger .ts-burger{transform:none}
/* inside pages already show the character, so it only spins */
.ts-shrinkbar.shrunk .ts-bar-burger .ts-burger{transform:rotate(360deg)}

/* ---- homepage masthead, contracted ---- */
.ts-top{transition:padding .42s cubic-bezier(.66,0,.2,1),box-shadow .3s ease}
.ts-top .ts-shell{position:relative}
.ts-top-right{transition:opacity .22s ease,transform .3s cubic-bezier(.66,0,.2,1)}
.ts-top.shrunk{padding-top:.35rem;box-shadow:0 1px 0 var(--ts-rule)}
/* flex-start, not the space-between the expanded bar uses: contracted, the
   menu character belongs beside the ts, not marooned at the far edge */
.ts-top.shrunk .ts-shell{
  padding-bottom:.35rem;align-items:center;gap:.55rem;justify-content:flex-start;
}
.ts-top.shrunk .ts-masthead-word{font-size:2.2rem}
.ts-top.shrunk .ts-top-right{
  /* out of flow, not display:none: the bar height then follows the
     wordmark alone, and the fade still runs */
  position:absolute;right:0;bottom:0;opacity:0;transform:translateY(-8px);
  pointer-events:none;
}

/* ---- inside-page bar, contracted ---- */
.ts-bar{transition:padding .42s cubic-bezier(.66,0,.2,1)}
.ts-bar.shrunk .ts-shell{padding:.35rem 0;justify-content:flex-start;gap:.55rem}
.ts-bar.shrunk .ts-wordmark{font-size:2rem}

/* ---- the article's bar arrives instead of sticking from the start ---- */
.ts-bar-float{
  position:fixed;inset:0 0 auto 0;
  transform:translateY(-101%);transition:transform .28s ease;
}
.ts-bar-float.on{transform:none}

@media(max-width:760px){
  .ts-shrinkbar.shrunk .ts-top-burger{width:40px}
  .ts-shrinkbar.shrunk .ts-top-burger .ts-obj,
  .ts-shrinkbar.shrunk .ts-bar-burger .ts-obj{width:34px}
  .ts-top.shrunk .ts-masthead-word{font-size:1.9rem}
  .ts-bar.shrunk .ts-wordmark{font-size:1.75rem}
  .ts-top.shrunk .ts-shell{gap:.5rem}
  /* the mobile pass gives the wordmark flex:1 1 auto so it fills the row.
     Contracted it must stop growing, or it pushes the character to the far
     edge and the two never sit together. */
  .ts-top.shrunk .ts-masthead-word{flex:none}
}

@media(prefers-reduced-motion:reduce){
  .ts-wm-cut,.ts-shrinkbar .ts-wordmark,.ts-top,.ts-bar,
  .ts-top-burger,.ts-bar-burger,.ts-top-burger .ts-burger,
  .ts-bar-burger .ts-burger,.ts-top-right,.ts-bar-float{transition:none}
  .ts-top-burger .ts-burger{transform:none}
}


/* ============================================================
   Editor-only affordances. An Elementor widget that renders
   nothing looks identical to one that is broken, so each says
   which it is - but only inside the editor.
   ============================================================ */
.ts-editor-note{
  border:2px dashed var(--ts-rule);border-radius:var(--ts-r2, 12px);
  padding:1rem 1.15rem;font-family:var(--ts-text);font-size:.85rem;
  color:var(--ts-dim);background:#FBFAF8;
}
.ts-editor-note strong{color:var(--ts-ink)}

/* The panels are links now, not buttons: a <button> left nowhere valid to
   put the "Sve iz rubrike" link inside it. Strip the link styling the
   button rules used to get for free. */
a.ts-panel{text-decoration:none;color:inherit;display:flex}
a.ts-panel:focus-visible{outline:3px solid var(--ts-ink);outline-offset:2px}

/* The article photo's focal point is a widget control. */
.ts-art-fig img{object-position:var(--ts-focal, center 30%)}

/* ============================================================
   Never upscale a source image.
   The library is mostly 900x600 but not all of it, and a column
   sized for 900 blows a 607px crop up by 8%. --ts-natw is set
   per image from its own attachment metadata.
   ============================================================ */
.ts-lead-art,.ts-hero-art,.ts-panel-photo,.ts-art-fig{max-width:var(--ts-natw-box,none)}
.ts-lead-art img,.ts-hero-art img,.ts-panel-photo img,.ts-art-fig img,
.ts-wide img,.ts-mini img{max-width:min(100%,var(--ts-natw,100%))}

/* A collapsed menu slot must not swallow clicks. .ts-top-burger is 0 wide
   and transparent at rest, but the button inside it still has a box from its
   transform - enough for a click to land on nothing, and enough for an
   automated check to report the control as present and clickable when it is
   neither. */
.ts-top-burger{pointer-events:none}
.ts-shrinkbar.shrunk .ts-top-burger{pointer-events:auto}

/* ============================================================
   Article head: keep the headline out of the photo.
   The photo column is capped at 900px, so at 1440 the text
   column is 540px - narrower than the headline's own 15ch cap
   (655px at this size). .ts-art-txt sets align-items:flex-start,
   so the h1 sizes to fit-content and simply overflowed the
   track, running its last lines underneath the photo.
   ============================================================ */
.ts-art-left{min-width:0}
.ts-art-txt{min-width:0;max-width:100%}
.ts-art-txt h1,.ts-art-deck{max-width:min(15ch,100%)}
.ts-art-deck{max-width:min(46ch,100%)}
@media(min-width:900px){
  /* and a real gutter, so it is never a near miss either */
  .ts-art-left{padding-right:clamp(1.75rem,3.4vw,3rem)}
}

/* The photo column is capped at 900px so the source is never upscaled, but a
   flat 900px cap is only right on a wide screen: at 1024 it took 900 of 1024
   and left the headline a 124px column. Cap it against the viewport too, and
   the split stays sane from 900px up. */
@media(min-width:900px){
  .ts-art-top{grid-template-columns:minmax(0,1fr) minmax(0,min(900px,62%))}
}

/* On the compact bar the menu character is the LAST thing in the row, not
   the middle one. The bar has three children (wordmark, character, the
   nav/social group) and space-between spread them evenly, which parked the
   character in the dead centre of the page. */
.ts-bar .ts-shell{justify-content:flex-start;gap:.9rem}
.ts-bar .ts-masthead-word{order:1;flex:none}
.ts-bar .ts-top-right{order:2;margin-left:auto}
.ts-bar .ts-bar-burger{order:3}

/* The quiz lead. .ts-q-meta and .ts-q-go were only ever styled inside
   .ts-quiz-card, so in the lead they inherited nothing and ran together on
   one line as "Versus · 8 pitanja Reši kviz". */
.ts-tease > span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.ts-tease .ts-q-meta{font-size:.78rem;color:var(--ts-dim)}
.ts-tease .ts-q-go{
  display:inline-block;font-family:var(--ts-display);font-weight:800;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.5rem 1rem;border-radius:var(--ts-pill);
  background:var(--ts-ink);color:var(--ts-paper);
}
.ts-tease{align-items:center}

/* The hero without its offset colour block: a control, since on an Elementor
   page the block may collide with whatever section sits behind it. */
.ts-lead-flat .ts-lead-art::before,.ts-lead-flat .ts-mark{display:none}

/* ============================================================
   FIX: the menu was unreachable on the homepage.
   The full masthead hid its character until the bar contracted,
   on the reasoning that the rubric rail is the navigation until
   then. But the rail only lists rubrics - the overlay is the
   only route to subcategories, and at the top of the page there
   was no way to open it at all. The character is now present at
   rest, on the right with the social icons, and still travels to
   sit beside the "ts" when the bar contracts.
   ============================================================ */
.ts-top-burger{
  width:50px;opacity:1;order:3;pointer-events:auto;
  overflow:visible;margin-left:.35rem;
}
.ts-top-burger .ts-burger{transform:none}
.ts-top .ts-masthead-word{order:1}
.ts-top .ts-top-right{order:2}
/* contracted: nav and social lift out, the character crosses to the wordmark */
.ts-shrinkbar.shrunk .ts-top-burger{order:2;margin-left:0}
.ts-shrinkbar.shrunk .ts-top-burger .ts-burger{transform:rotate(360deg)}

@media(max-width:760px){
  .ts-top-burger{width:44px}
}

/* ============================================================
   Ad slots and widget areas.
   Every one is a real sidebar; an empty one renders nothing at
   all, so an unsold position never leaves a hole in the page.
   ============================================================ */
.ts-ad{margin:1.6rem 0;text-align:center}
.ts-ad > .ts-shell{display:flex;flex-direction:column;align-items:center;gap:1rem}
.ts-ad-top{margin:0 0 .6rem;padding-top:1rem}
.ts-ad-footer{margin-bottom:0;padding-bottom:1.6rem}
/* in the feed grid an ad takes a whole row, never one cell */
.ts-ad-infeed{grid-column:1/-1;margin:.6rem 0;padding:1rem 0;border-top:1px solid var(--ts-rule);border-bottom:1px solid var(--ts-rule)}
.ts-ad-incontent{margin:2rem 0;padding:1.2rem 0;border-top:1px solid var(--ts-rule);border-bottom:1px solid var(--ts-rule)}
.ts-ad-side{margin-top:1.6rem}
.ts-ad img,.ts-ad iframe,.ts-ad ins{max-width:100%;height:auto;margin-inline:auto}

.ts-widget{margin-bottom:1.4rem}
.ts-widget-title{
  font-family:var(--ts-display);font-weight:800;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ts-dim);
  margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:2px solid var(--ts-ink);
}
.ts-widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.ts-widget a{text-decoration:none}
.ts-widget a:hover{text-decoration:underline}
.ts-side-widgets{margin-top:1.6rem}
.ts-foot-widgets{
  display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:1.6rem;margin-bottom:1.6rem;border-bottom:1px solid rgb(255 255 255 / .18);
}

/* ============================================================
   FIX: the article body was 900px wide on a 390px phone.
   `.ts-prose img{max-width:900px}` gave the image an intrinsic
   900px, and a grid item with the default min-width:auto grows
   its track to fit - so the column became 900px and every
   paragraph, heading and ad inside it went with it. With
   overflow-x:clip on the body there was no scrollbar either:
   the text was simply cut off mid-word, silently, which is why
   every automated overflow check passed.
   ============================================================ */
.ts-art-body,.ts-art-body > *{min-width:0}
.ts-prose{min-width:0;max-width:100%}
.ts-prose img,.ts-prose figure,.ts-prose iframe,.ts-prose video,
.ts-prose table,.ts-prose pre{max-width:100%;height:auto}
.ts-prose img{width:auto}
/* still never upscale: the source width rides along in --ts-natw */
.ts-prose img{max-width:min(100%,var(--ts-natw,100%))}
.ts-prose figure{margin-inline:0}
/* anything that genuinely cannot shrink scrolls inside itself rather than
   pushing the page wider */
.ts-prose table,.ts-prose pre{display:block;overflow-x:auto}
.ts-side,.ts-side > *{min-width:0}

/* A term with a real picture gets a framed photo where the character would be. */
.ts-arch-art.has-photo{width:min(340px,38vw);border-radius:var(--ts-r3);overflow:hidden;background:#FFFDFA;padding:0}
.ts-arch-art.has-photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
@media(max-width:820px){ .ts-arch-art.has-photo{width:100%;max-width:none} }

/* A <textarea> sizes from its cols attribute, not its container, so the
   comment form pushed past the viewport on a phone. Same for any form
   control dropped in by a plugin. */
.ts-oblici textarea,.ts-oblici input,.ts-oblici select{max-width:100%}
.ts-oblici textarea{width:100%;box-sizing:border-box}

/* The view count under a Top 10 headline. Quiet: the number that matters is
   the rank, which is already the biggest thing in the row. */
.ts-views{
  display:block;margin-top:.25rem;font-family:var(--ts-text);
  font-size:.72rem;color:var(--ts-dim);font-variant-numeric:tabular-nums;
}

/* Ad slots. An empty one renders nothing, so these only ever wrap real markup. */
.ts-ad{margin:1.6rem 0;text-align:center}
.ts-ad > .ts-shell{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.ts-ad-ruled{padding:1.2rem 0;border-top:1px solid var(--ts-rule);border-bottom:1px solid var(--ts-rule)}
.ts-ad-label{
  font-family:var(--ts-display);font-weight:800;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ts-dim);
}
/* in the feed grid an ad takes a whole row, never one cell */
.ts-ad-infeed{grid-column:1/-1;margin:.6rem 0;padding:1rem 0;border-top:1px solid var(--ts-rule);border-bottom:1px solid var(--ts-rule)}
.ts-ad-incontent{margin:2rem 0;padding:1.2rem 0;border-top:1px solid var(--ts-rule);border-bottom:1px solid var(--ts-rule)}
.ts-ad img,.ts-ad iframe,.ts-ad ins{max-width:100%;height:auto;margin-inline:auto}
.ts-widget-title{
  font-family:var(--ts-display);font-weight:800;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ts-dim);margin:0 0 .6rem;
}

/* ============================================================
   Tag archive. Deliberately not the category treatment: no
   character, no rubric colour, its own picture and its own words.
   ============================================================ */
.ts-tag-head{margin-bottom:1.5rem}

/* The banner is a band, not a full-height photo: left to itself a 900x600
   source ran 600px tall and sat stranded against the left edge, because the
   no-upscale cap stops it filling a wider screen. Give it a ratio and let it
   crop, centred, never wider than its source. */
.ts-tag-banner{
  /* never wider than the source: --ts-natw comes from the attachment itself */
  display:block;width:100%;max-width:min(1560px,var(--ts-natw,1560px));margin-inline:auto;
  aspect-ratio:21/6;overflow:hidden;background:var(--ts-card,#fff);
  border-radius:0 0 var(--ts-r3,18px) var(--ts-r3,18px);
}
.ts-tag-banner img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;max-width:none}
@media(max-width:760px){ .ts-tag-banner{aspect-ratio:16/9;border-radius:0} }

.ts-tag-in{display:flex;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;padding:clamp(1.2rem,2.6vw,2rem) 0}
.ts-tag-split .ts-tag-art{flex:0 0 clamp(180px,26vw,320px)}
.ts-tag-split .ts-tag-art img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--ts-r3,18px);display:block;
}
.ts-tag-txt{min-width:0}
.ts-tag-eyebrow{
  display:block;font-family:var(--ts-display);font-weight:800;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ts-dim);margin-bottom:.4rem;
}
.ts-tag-head h1{
  font-size:clamp(1.9rem,5vw,3.4rem);letter-spacing:-.04em;line-height:1;margin:0;
}
.ts-tag-head p{margin:.7rem 0 0;max-width:62ch;color:var(--ts-dim);font-size:clamp(.95rem,1.2vw,1.08rem)}