/*! tahti-css 1.86.0 — must match TAHTI_VERSION in functions.php */
/*! TÄHTI — design system + article styles A, B, D, F, H
    Generated from the approved HTML templates. Edit here, not in the templates. */
/* ============ TÄHTI DESIGN SYSTEM (from approved templates) ============ */

/* ==========================================================================
   1. TOKENS + RESET
   ========================================================================== */
:root{
  --ink:#0E0E12; --ink-2:#33333D; --muted:#74747F;
  --line:#E2E2E8; --line-soft:#EEEEF2;
  --bg:#FFFFFF; --band:#F4F4F7; --band-2:#EBEBF0;
  /* The colour a card, a panel or a table is drawn on, and the barely
     tinted version used for a cell heading or a note. Separate from
     --bg because a dark page is not one flat black: the surfaces sit
     slightly above the page they are on, which is what makes them read
     as surfaces at all. */
  --card:#FFFFFF; --card-2:#FBFBFD;
  /* The frosted bars — the sticky navigation, the tab strip on a
     profile, the tick on a verified portrait. Nearly the surface
     colour but not quite, because what is underneath is meant to show
     through it. */
  --glass:rgba(255,255,255,.92);
  /* The brand, and the shades of it the design needs. Both extra shades are
     recomputed per site by tahti_inline_branding_css(): --brand-lt is the
     lighter end of every brand gradient, --brand-rgb is what every tint is
     written from. Nothing in the theme spells out a shade of pink — a site
     that sets its brand to teal has to come out teal all the way down. */
  --brand:#E5004C; --brand-dk:#B10039; --brand-lt:#FF3D74; --brand-rgb:229,0,76;
  /* The people pages — writer and newsroom — are where a reader decides
     whether to believe the rest, so they are coloured with restraint rather
     than with the brand everywhere. --ink-deep is the structure: not flat
     black but an ink carrying the same violet as the rest of the theme.
     --brand-read is the brand darkened to the point where it can be read as
     words; the brand itself stays for marks that are only glanced at. */
  --ink-deep:#16121C; --brand-read:#C4003F; --surface:#F7F5F9; --hair:#E7E3EC;
  --hot:#FFD400; --link:#0B3ED9;
  --gut:22px; --rail:308px; --max:1300px;
  /* What the front page's main column measured before it ever grew:
     1300 − (2 × 22 gutter) − 308 rail − 34 gap. The two chart sections keep
     this width on a wide screen, because a ten-row list stretched across a
     1100px column reads as a table, not as a chart. */
  --sec-legacy:914px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   2. HEADLINE SCALE  (tabloid: heavy weight, tight tracking)
   ========================================================================== */
.hl{font-weight:900;letter-spacing:-.028em;line-height:1.05;color:var(--ink)}
.hl-xxl{font-size:clamp(30px,4.4vw,52px);line-height:1.02;letter-spacing:-.033em}
.hl-xl{font-size:clamp(21px,2.3vw,30px);line-height:1.06}
.hl-l{font-size:20px;line-height:1.1}
.hl-m{font-size:17.5px;line-height:1.16}
.hl-s{font-size:15.5px;line-height:1.2;letter-spacing:-.02em}
.hl-xs{font-size:14.5px;line-height:1.24;letter-spacing:-.015em}
a:hover .hl,a:hover .hl-xxl,a:hover .hl-xl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}

.kicker{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.085em;
  text-transform:uppercase;color:var(--brand);margin-bottom:7px;
}
.kicker.blue{color:var(--link)}
.kicker.ink{color:var(--ink)}
.flash{
  display:inline-block;background:var(--hot);color:#0E0E12;font-size:11px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;margin-bottom:8px;
}
.flash.red{background:var(--brand);color:#fff}
.lead-in{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin-top:10px;font-weight:400}
.meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:9px;font-size:12px;color:var(--muted);font-weight:600;
}
.meta .dot{width:3px;height:3px;border-radius:50%;background:#C6C6CE}
.cmt{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--ink-2)}
.cmt svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

/* ==========================================================================
   3. PHOTO SLOTS — gradient + silhouette scene + grain + vignette
   ========================================================================== */
.ph{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,#5B21B6 0%,#8B2BE2 56%,#C99BF5 100%)}
.ph>svg{position:absolute;inset:0;width:100%;height:100%}
/* A real photograph fills its frame the same way the placeholder art does.
   This rule was simply missing: the demo sites ran on placeholders, so the
   first site with real featured images was the first to render an <img> at
   natural size inside an overflow:hidden frame — clipped from the top-left,
   which beheads exactly the artwork that carries its headline as text. */
.ph>img,.ph .wp-post-image{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1}
/* Art that is not the frame's shape is shown whole on the card's own
   gradient instead of being cropped into it — tahti_thumb() marks it. */
.ph.ph-fit>img,.ph.ph-fit .wp-post-image{object-fit:contain}
.ph::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.16;mix-blend-mode:overlay;z-index:2}
.ph::after{content:"";position:absolute;inset:0;z-index:3;background:
  radial-gradient(120% 88% at 46% 16%,transparent 34%,rgba(0,0,0,.50)),
  linear-gradient(200deg,rgba(255,255,255,.10),transparent 42%)}
.r169{aspect-ratio:16/9}
.r43{aspect-ratio:4/3}
.r11{aspect-ratio:1/1}
.r32{aspect-ratio:3/2}
.g1{background:linear-gradient(163deg,#1B0A22 0%,#5E1140 44%,#C2185B 78%,#FF5C8A 100%)}
.g2{background:linear-gradient(163deg,#07131F 0%,#123A5C 46%,#2E7BA6 82%,#7FC4DE 100%)}
.g3{background:linear-gradient(163deg,#1E0C06 0%,#642713 45%,#B85527 80%,#F2A15C 100%)}
.g4{background:linear-gradient(163deg,#0B1220 0%,#20344F 48%,#4E6E96 84%,#9CB6D4 100%)}
.g5{background:linear-gradient(163deg,#160A28 0%,#3F1360 45%,#7B2FA8 80%,#C07AE0 100%)}
.g6{background:linear-gradient(163deg,#061410 0%,#123B2C 47%,#2A7A57 82%,#77C6A0 100%)}
.g7{background:linear-gradient(163deg,#1C1405 0%,#5A4210 45%,#A8811F 80%,#EBC85F 100%)}
.g8{background:linear-gradient(163deg,#1A0509 0%,#5E0A1E 44%,#B4123C 80%,#F0517A 100%)}
.g9{background:linear-gradient(163deg,#0D0D12 0%,#2A2A36 48%,#55556A 84%,#9A9AB0 100%)}
.g10{background:linear-gradient(163deg,#04141C 0%,#0E3D4E 47%,#1E7D93 84%,#63C0CE 100%)}
.badge-play{
  position:absolute;left:10px;bottom:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;
  background:rgba(14,14,18,.82);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.03em;
  padding:5px 9px 5px 7px;border-radius:2px;backdrop-filter:blur(6px);
}
.badge-play svg{width:11px;height:11px;fill:#fff;position:static}
.badge-imgs{
  position:absolute;right:10px;bottom:10px;z-index:4;background:rgba(14,14,18,.82);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.05em;padding:4px 8px;border-radius:2px;
}

/* ==========================================================================
   4. TOP BARS — utility / masthead / nav / ticker
   ========================================================================== */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.util{background:#0E0E12;color:#A9A9B6;font-size:12px;font-weight:600}
.util .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;gap:16px}
.util .date{color:#E6E6EE;letter-spacing:.01em}
.util .date b{color:#fff;font-weight:800}
.util-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.util nav{display:flex;gap:18px;align-items:center}
.util nav a:hover{color:#fff}
.util .sub-link{color:var(--brand-lt);font-weight:800}
.util .sub-link:hover{color:#fff}

/*
 * The masthead is one short row: the name of the paper, and search. Hairlines
 * do the separating — there is no fill and no shadow anywhere in this header,
 * and the only filled shape on the whole of it is the live pill down on the
 * strip, which is where the news is.
 */
.masthead{border-bottom:1px solid var(--line-soft);background:var(--card)}
.masthead .wrap{display:flex;align-items:center;gap:24px;padding-top:11px;padding-bottom:11px}
/*
 * A desktop has the room, and the masthead is where a reader decides what kind
 * of publication this is. Eleven pixels either side of a 44px field left it
 * looking squeezed into a bar rather than sitting in a masthead.
 */
@media(min-width:761px){
  .masthead .wrap{gap:30px;padding-top:19px;padding-bottom:19px}
}
.logo{display:flex;align-items:baseline;gap:1px;flex:none}
.logo b{
  font-size:clamp(24px,2.6vw,31px);font-weight:900;letter-spacing:-.048em;line-height:1;color:var(--ink);
}
.logo i{width:8px;height:8px;background:var(--brand);border-radius:50%;display:block;
  align-self:flex-end;margin-bottom:3px}
/* Optional, and empty on a site that has not written one. */
.tagline{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.3;padding-left:15px;border-left:1px solid var(--line);align-self:center}
.mast-right{margin-left:auto;display:flex;align-items:center;gap:16px}

/* --- the reader's own two controls ----------------------------------------
   The bell and the light switch, in a cluster of their own at the end of the
   masthead. Their own cluster rather than the tail of the search group,
   because on a phone that group takes the full width and pushed the switch
   onto a line by itself — a whole row of masthead spent on one small button.
   Here they stay on the wordmark's line at every size. */
.mast-tools{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.mt-wrap{position:relative;display:flex}
.mt-btn{position:relative;flex:0 0 auto;width:36px;height:36px;border:0;padding:0;
  border-radius:50%;background:transparent;cursor:pointer;color:var(--ink);
  display:grid;place-items:center;transition:background .16s ease}
.mt-btn:hover{background:rgba(var(--brand-rgb),.08)}
.mt-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* The count rides the bell rather than sitting beside it, and it is drawn in
   the brand with a ring of the header behind it so it reads over the icon. */
.mt-dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--brand);color:#fff;
  font-size:10px;font-weight:900;font-style:normal;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--card)}
.mt-btn[aria-expanded="true"]{background:rgba(var(--brand-rgb),.10)}

/* The panel hangs from the bell, right-aligned so it never leaves the page. */
.mt-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:80;width:330px;
  max-width:calc(100vw - 24px);
  max-height:min(60vh,420px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(14,14,18,.16);padding:6px}
.mt-head{margin:0;padding:9px 12px 7px;font-size:10px;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.mt-empty{margin:0;padding:6px 12px 14px;font-size:14px;font-weight:600;color:var(--muted)}
.mt-panel ul{list-style:none;margin:0;padding:0}
.mt-panel li+li{border-top:1px solid var(--line-soft)}
.mt-panel a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;
  transition:background .14s ease}
.mt-panel a:hover{background:rgba(var(--brand-rgb),.05)}
.mt-panel .mt-t{display:block;font-size:11px;font-weight:900;letter-spacing:.03em;color:var(--brand)}
.mt-panel .mt-h{display:block;margin-top:2px;font-size:14.5px;font-weight:800;
  letter-spacing:-.015em;line-height:1.32;color:var(--ink)}
/* A story published since the reader was last here keeps a mark of its own,
   so the panel says which ones the count was counting. */
.mt-panel li.is-new .mt-h::after{content:"";display:inline-block;vertical-align:middle;
  width:6px;height:6px;margin-left:7px;border-radius:50%;background:var(--brand)}
@media(max-width:420px){
  /* Wider than the phone would leave it, and pinned to the gutter. */
  .mt-panel{width:calc(100vw - 32px);right:-6px}
}

/*
 * Search, in the masthead.
 *
 * It used to be a magnifier over a single ruled line, on the argument that the
 * rest of the header is built from hairlines. Two things were wrong with that.
 * An underlined phrase at the top of a page reads as a heading rather than as
 * somewhere to type — there was nothing to say it could be clicked. And on a
 * dark page the one hairline holding it together all but disappeared, which
 * left the placeholder floating in the masthead.
 *
 * It is a field now, and looks like one: a soft surface, a full radius, and a
 * ring in the site's own colour when it is being used. The brand line that
 * used to draw itself across the bottom has become that ring — the same idea,
 * doing a job the reader can see.
 *
 * The publisher then asked for a field that reads as premium rather than
 * merely present, and picked this: the pill keeps its shape but gains a
 * dimension. A hairline and a shallow inner shadow sit it INTO the masthead
 * instead of on top of it; the magnifier moves into a brand-tinted disc, so
 * the one coloured thing in the field is the thing that says what the field
 * is for; and a keyboard hint rides at the right, the way a tool with a
 * shortcut says so — printed by CSS, so it costs the markup nothing and
 * disappears the moment the reader starts typing. Focus lifts the whole
 * field a pixel and throws the brand ring plus a soft brand shadow.
 *
 * Away from the masthead — the 404 page, an empty result — the form stands
 * alone with nothing around it to explain it, so it keeps its own box and its
 * button.
 */
.masthead .search:not(body){position:relative;display:flex;align-items:center;
  width:392px;height:46px;padding:0 6px;border:1px solid var(--line);border-radius:999px;
  background:linear-gradient(180deg,var(--band) 0%,var(--card) 100%);
  box-shadow:inset 0 1px 2px rgba(14,14,18,.05);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
/*
 * The shortcut hint. It is decoration for a keyboard that may not exist, so
 * it is aria-hidden by being a pseudo-element in the first place, and it is
 * not printed at all where there is no keyboard to press.
 */
.masthead .search:not(body)::after{content:"⌘K";position:absolute;right:14px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:3px 7px;background:var(--card);
  transition:opacity .18s ease}
.masthead .search:not(body):focus-within::after{opacity:0}
.masthead .search:not(body) svg{width:16px;height:16px;flex:none;margin:0 11px 0 0;
  padding:8px;box-sizing:content-box;border-radius:50%;
  background:rgba(var(--brand-rgb),.10);
  fill:none;stroke:var(--brand);stroke-width:2.3;stroke-linecap:round;
  transition:background .18s ease,stroke .18s ease}
.masthead .search:not(body):hover{border-color:rgba(var(--brand-rgb),.35);
  box-shadow:inset 0 1px 2px rgba(14,14,18,.04),0 2px 10px rgba(var(--brand-rgb),.10)}
.masthead .search:not(body):focus-within{background:var(--card);border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(var(--brand-rgb),.13),0 8px 22px rgba(var(--brand-rgb),.16);
  transform:translateY(-1px)}
.masthead .search:not(body) input{width:100%;border:0;background:none;outline:0;
  padding-right:52px;
  font-size:14.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.masthead .search:not(body) input::placeholder{color:var(--muted);font-weight:600;letter-spacing:-.008em}
.masthead .search:not(body) input::-webkit-search-cancel-button{-webkit-appearance:none}
.masthead .s-go{display:none}
/*
 * A pointer-less device has no ⌘K to press, and the hint would be a label
 * for a control the reader does not have. The room it frees goes back to
 * the text.
 */
@media(hover:none){
  .masthead .search:not(body)::after{display:none}
  .masthead .search:not(body) input{padding-right:8px}
}

.search:not(body){display:flex;align-items:center;gap:8px;background:var(--band);border:1px solid var(--line);
  border-radius:2px;padding:5px 5px 5px 14px;width:308px}
.search:not(body) svg{width:15px;height:15px;flex:none;stroke:var(--muted);fill:none;stroke-width:2.2}
.search:not(body) input{border:0;background:none;outline:none;width:100%;font-size:14px;font-weight:600}
.search:not(body) input::placeholder{color:#9A9AA6;font-weight:600}
.btn-sub{background:var(--brand);color:#fff;font-size:13.5px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;padding:11px 18px;border:0;border-radius:2px;cursor:pointer;
  transition:background .18s}
.btn-sub:hover{background:var(--brand-dk)}

.mainnav{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:1px solid var(--line)}
.mainnav.stuck{box-shadow:0 3px 14px rgba(14,14,18,.08)}
.mainnav .wrap{display:flex;align-items:center;gap:0}
/* The wordmark joins the row only once it has been scrolled past. */
.nav-logo{display:none;flex:none;font-size:17px;font-weight:900;letter-spacing:-.045em;margin-right:18px}
.mainnav.stuck .nav-logo{display:block}

/*
 * The row has always been able to scroll; with the scrollbar hidden, a section
 * sliced in half at the edge read as broken rather than as more. The last few
 * pixels fade out at every width — where there is slack the fade lands on
 * empty space and cannot be seen, and where there is not, it is the one thing
 * that says keep going.
 */
.navlist{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
.navlist::-webkit-scrollbar{display:none}

/*
 * Sentence case, tight, and nothing else. No dot, no underline: the section
 * you are in is simply the red one, and a row that says a thing once says it
 * more clearly than a row that says it three ways.
 */
.navlist a{
  display:block;flex:none;white-space:nowrap;padding:11px 0;margin-right:17px;
  font-size:15px;font-weight:800;letter-spacing:-.012em;color:var(--ink);
  transition:color .14s ease;
}
.navlist a:last-of-type{margin-right:0}
/* Red means one thing: this is the page you are on. It used to mean two — a
   link could also be marked "hot", which painted it the same red, and the
   fallback navigation marked the top list that way, so a reader who had opened
   nothing saw a section that looked opened. */
.navlist a:hover,.navlist a[aria-current="page"]{color:var(--brand-ink)}

/* Optional, and printed only where a site has nominated a page for it. */
.nav-all{display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:18px;
  padding:6px 12px;border:1px solid var(--line);border-radius:2px;
  font-size:13px;font-weight:800;color:var(--ink);
  transition:border-color .18s,color .18s}
.nav-all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.nav-all:hover{border-color:var(--ink);color:var(--brand)}

/*
 * The strip carries two things: what has just gone out, and what everyone is
 * following today. White, like the two rows above it, with one hairline under
 * it — the band of grey it used to sit on was three per cent off the page and
 * read as a printing artefact rather than as a zone.
 */
.ticker{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);overflow:hidden}
.ticker .wrap{display:flex;align-items:center;gap:22px;min-height:40px;padding-top:9px;padding-bottom:9px}
/* The one filled shape in the header, and a rectangle like everything else. */
.ticker .tag{background:var(--brand);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.09em;
  border-radius:2px;text-transform:uppercase;padding:3px 9px;flex:none;
  display:inline-flex;align-items:center;gap:6px}
.ticker .tag em{width:5px;height:5px;background:#fff;border-radius:50%;animation:blink 1.8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.ticker-track{flex:1;min-width:0;position:relative;height:22px}
.ticker-item{position:absolute;inset:0;display:flex;align-items:center;gap:9px;
  font-size:14px;font-weight:700;letter-spacing:-.012em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
/* The hour it went out. Tabular figures so the headline does not shift by a
   pixel as the strip rotates from 9.05 to 12.42. */
.ticker-item b{flex:none;font-weight:900;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.ticker-item.on{opacity:1;transform:none}
.ticker-item:hover{color:var(--brand)}

/*
 * The topics are words, not chips. Four bordered pills at the end of a row
 * that already carries a red pill and a headline is four more objects than the
 * row can hold; set as plain links in the muted colour they read as what they
 * are — a short list of what everyone is following — and the eye still lands
 * on the news first. The label above them has gone with the boxes: nobody
 * needed telling that four topic names are topics.
 */
.ticker .topics{display:flex;align-items:center;gap:14px;flex:none;min-width:0;margin-left:auto}
.ticker .topics p{display:none}
.ticker .topics a{font-size:13px;font-weight:800;letter-spacing:-.012em;white-space:nowrap;
  color:var(--muted);transition:color .14s ease}
.ticker .topics a:hover{color:var(--brand)}

/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */
main{padding-bottom:10px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:34px;padding-top:24px}
/* "Sidebar side: left". The columns swap by track rather than by markup, so
   the reading order stays what it was — the story first, the rail after it —
   whichever side the rail is drawn on. */
.rail-left .cols{grid-template-columns:var(--rail) minmax(0,1fr)}
.rail-left .cols>:first-child{grid-column:2}
.rail-left .cols>.rail{grid-column:1;grid-row:1}
.sec{margin-bottom:34px}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:9px;
  border-bottom:2px solid var(--ink)}
.sec-head h2{font-size:19px;font-weight:900;letter-spacing:.01em;text-transform:uppercase}
.sec-head .more{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--brand);
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.sec-head .more:hover{text-decoration:underline}
.sec-head.brand{border-bottom-color:var(--brand)}
.sec-head.brand h2{color:var(--brand)}
.sec-head.flashbar{border-bottom-color:var(--hot)}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* --- hero ---------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:26px;
  padding-bottom:26px;border-bottom:3px solid var(--ink)}
.hero-side{display:flex;flex-direction:column;gap:20px}
.hero-side .item{display:grid;grid-template-columns:1fr;gap:10px}
.hero-side .item+.item{border-top:1px solid var(--line);padding-top:20px}
.lead-fig{margin-bottom:14px}

/* --- generic card grids -------------------------------------------------- */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card .ph{margin-bottom:10px}
.card{min-width:0}

/* --- image-left list rows ------------------------------------------------ */
.rows{border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:15px 0;align-items:start}
.rows a:hover{background:rgba(var(--brand-rgb),.035)}
.rows .ph{aspect-ratio:16/9}

/* --- exclusive block ----------------------------------------------------- */
.excl{background:#0E0E12;color:#fff;padding:22px;margin-bottom:34px}
.excl .sec-head{border-bottom-color:var(--hot);margin-bottom:18px}
.excl .sec-head h2{color:var(--hot)}
.excl .sec-head .more{color:var(--hot)}
.excl .hl{color:#fff}
.excl .meta{color:#8F8F9E}
.excl .cmt{color:#D6D6E0}
.excl .lead-in{color:#B9B9C6}
.excl a:hover{background:none}
.excl-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:22px}

/* --- video rail ---------------------------------------------------------- */
.vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vids .ph{margin-bottom:9px}

/* --- TOP-LISTA teaser ---------------------------------------------------- */
.toplist{border:2px solid var(--ink);padding:0 0 4px}
/* Repainted at line ~826 as a permanently dark band, so the white stays. */
.toplist-head{background:var(--ink);color:#fff;padding:13px 18px;display:flex;align-items:center;gap:12px}
.toplist-head h2{font-size:18px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.toplist-head .fi{background:var(--hot);color:#0E0E12;font-size:11px;font-weight:900;padding:3px 7px;letter-spacing:.07em}
.toplist-head .more{margin-left:auto;font-size:12px;font-weight:800;color:var(--hot);letter-spacing:.05em;text-transform:uppercase}
.toplist ol{padding:6px 18px 10px}
.toplist li{display:grid;grid-template-columns:34px 52px minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line-soft)}
.toplist li:last-child{border-bottom:0}
.toplist .rk{font-size:26px;font-weight:900;letter-spacing:-.05em;color:var(--brand);text-align:center;line-height:1}
.toplist .ph{aspect-ratio:2/3;border-radius:1px}
.toplist .t{font-size:15.5px;font-weight:800;letter-spacing:-.015em}
.toplist .s{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.toplist .mv{font-size:11.5px;font-weight:900;letter-spacing:.03em;white-space:nowrap}
.mv.up{color:#0A8F4D}.mv.dn{color:var(--brand-ink)}.mv.nu{color:#0E0E12;background:var(--hot);padding:2px 6px}
.mv.eq{color:#A0A0AC}


/* --- compact headline-only columns (density block) -----------------------
   Three columns of nothing but headlines, so the two things that decide
   whether it reads at all are where the category sits and how much air a
   row gets.

   The category used to sit on the same line, in front of the first word —
   a fight the headline always loses, and it got worse once the badge was
   filled: a block of colour hard against the first letter. It goes above
   instead, on its own line, and the headline gets the full column width.
   That is what every card on the front page already does, so the block
   stops being the odd one out.

   The badge takes its shape here as well. The fill and the ink come from
   the shared k-* rules, but the padding and the radius lived only on
   .kicker — so this block painted the colour and left the letters jammed
   against the edges. Same shape now, same one-pixel shadow. */
.compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px}
/* A column opens on a rule of its own weight and is divided by hairlines.
   Every line the same width is what made this read as a table. */
.compact ul{border-top:2px solid var(--ink)}
.compact li{border-bottom:1px solid var(--line-soft)}
.compact a{display:block;padding:14px 10px 14px 0}
.compact a:hover .hl{text-decoration:underline}
.compact .hl-s{font-size:16px;line-height:1.3;letter-spacing:-.018em}
.compact .k{display:block;width:-moz-fit-content;width:fit-content;
  padding:2.5px 7px;border-radius:4px;border:1px solid transparent;
  box-shadow:0 1px 2px rgba(14,14,18,.10);
  font-size:9.5px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);margin:0 0 6px}
@media(max-width:760px){.compact{grid-template-columns:minmax(0,1fr)}
  .compact ul+ul{border-top:0}}

/* --- gallery strip ------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.gal .ph{aspect-ratio:1/1}
.gal a{position:relative;display:block}
.gal span{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:22px 9px 8px;color:#fff;
  font-size:12.5px;font-weight:800;line-height:1.25;
  background:linear-gradient(transparent,rgba(0,0,0,.85))}

/* ==========================================================================
   6. RIGHT RAIL
   ========================================================================== */
.rail{min-width:0}
.rail-box{border:1px solid var(--line);margin-bottom:26px;background:var(--card)}
.rail-box h2{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  padding:12px 15px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:8px}
.rail-box h2 .n{background:var(--brand);color:#fff;font-size:11px;padding:2px 6px;letter-spacing:.05em}
.pop li{border-bottom:1px solid var(--line-soft)}
.pop li:last-child{border-bottom:0}
.pop a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;padding:11px 15px;align-items:start}
.pop a:hover{background:rgba(var(--brand-rgb),.035)}
.pop .rk{font-size:25px;font-weight:900;color:var(--brand);letter-spacing:-.05em;line-height:.95;text-align:center}
.pop .rk.grey{color:#C9C9D2}
.latest li{border-bottom:1px solid var(--line-soft)}
.latest li:last-child{border-bottom:0}
/*
 * The date column was 46px, and the dates are not. "18.8.2026" is 72px and
 * "eilen 23:45" is 79px, so both spilled out of their track and sat against
 * the first word of the headline with nothing between them — and the long one
 * broke onto a second line as well, which made the row taller than the ones
 * around it. The track now holds the widest thing the timestamp can say.
 */
.latest a{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:10px 15px;align-items:start}
.latest a:hover{background:rgba(var(--brand-rgb),.035)}
.latest .tm{font-size:12px;font-weight:900;color:var(--brand);padding-top:1px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* The same badge, and for the same reason: this list takes the k-* colour
   classes too, so without the shape it printed a filled block with the
   letters against its edges. */
.latest .k{display:block;width:-moz-fit-content;width:fit-content;
  padding:2.5px 7px;border-radius:4px;border:1px solid transparent;
  box-shadow:0 1px 2px rgba(14,14,18,.10);
  font-size:9.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}

.ad{background:var(--band);border:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:#A4A4B0;margin-bottom:26px}
.ad span{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.ad em{font-size:12px;font-style:normal;font-weight:600;color:#B8B8C2}
/* The slot is drawn at the size of the thing that will be served into it. A
   300×250 creative announced by a box twice that wide is a promise the page
   cannot keep, and reads as an empty rectangle rather than as an advert. */
.ad-rail{height:270px;max-width:320px;margin-left:auto;margin-right:auto}

/*
 * A slot with real code in it has no business looking like a slot: no fill, no
 * dashed edge, no reserved height. It is whatever the advertiser sent, centred,
 * with air above and below so it reads as a break in the story rather than as
 * part of it.
 */
.ad-live{display:block;background:none;border:0;height:auto;min-height:0;
  padding:0;text-align:center}
.ad-live>*{max-width:100%}

/* The one inside a story. The rules mark it off as not-the-article; the label
   above it says so in words, because a reader is owed that. */
.ad-in{margin:30px 0;padding:14px 0;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);position:relative}
.ad-in::before{content:attr(data-label);position:absolute;top:-7px;left:50%;
  transform:translateX(-50%);padding:0 8px;background:var(--card);
  font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}

/* The outline an editor sees where nothing has been sold. */
.ad-empty{border:1px dashed var(--line)}
.ad-wide{height:112px;margin:0 0 34px}

/* Repainted further down as a permanently dark card, so the white stays. */
.news-box{background:var(--ink);color:#fff;padding:20px 18px;margin-bottom:26px}
.news-box h2{font-size:17px;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-bottom:7px}
.news-box p{font-size:13px;color:#A9A9B6;line-height:1.5;margin-bottom:14px}
/* The status line reserves its space only once it has something to say. */
.news-msg:empty{display:none}
.news-form{display:flex;flex-direction:column;gap:8px}
.news-form input{background:#1C1C24;border:1px solid #33333F;padding:11px 12px;color:#fff;
  font-size:14px;border-radius:2px;outline:none}
.news-form input::placeholder{color:#6E6E7C}
.news-form input:focus{border-color:var(--hot)}
.news-form button{background:var(--hot);color:#0E0E12;border:0;padding:12px;font-size:13.5px;
  font-weight:900;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:2px}
.news-msg{font-size:12px;font-weight:700;color:var(--hot);min-height:16px}

.horo{padding:14px 15px}
.horo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.horo-grid a{border:1px solid var(--line);padding:9px 4px;text-align:center;font-size:11px;
  font-weight:800;letter-spacing:.02em}
.horo-grid a:hover{border-color:var(--brand);color:var(--brand)}

/* ==========================================================================
   7. CATEGORY BANDS + FOOTER
   ========================================================================== */
.band{background:var(--band);padding:30px 0;margin:0 0 34px}
.band .sec{margin-bottom:0}
/* The footer is four bands, each of which can be absent. Everything in it is
   built out of --ink and --brand so it follows the site's palette: the greys
   are white at a percentage rather than fixed slate, which means a site that
   sets a warmer ink gets a warmer footer instead of a grey patch at the end of
   a warm page. */
.footer{background:var(--ink);color:rgba(255,255,255,.62);
  padding:0 0 26px;margin-top:44px;position:relative}
/* The one piece of colour down here, and it is the site's own. */
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-lt),var(--c-julkkis))}
.footer a{color:inherit}

/* The grid is told how many columns it is laying out.
   auto-fit was doing the counting, and it counts what fits rather than what
   exists: at 900 it laid five tracks for four menus, and because the brand
   block spans the row above them the fifth was never empty enough to collapse,
   so the columns stopped 176px short of the right edge and the row read as
   unfinished. footer.php knows the number — it builds the columns — so it
   states it, and the fallback keeps an old stylesheet paired with new PHP, or
   the reverse, on four. */
.foot-top{display:grid;
  grid-template-columns:minmax(210px,300px) repeat(var(--foot-cols,4),minmax(0,1fr));
  gap:34px 26px;padding:46px 0 34px}
.foot-brand{grid-column:1}
.foot-brand .logo b{color:#fff;font-size:32px;letter-spacing:-.035em}
.foot-brand p{font-size:13.5px;line-height:1.65;margin-top:14px;max-width:36ch}

/* One assigned menu is one column, not one column plus three empty ones: the
   track count comes from the number of menus that exist. */
.foot-col h2,.foot-col h3{font-size:11.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;margin-bottom:13px}
.foot-col li{margin-bottom:9px;font-size:13.5px;line-height:1.45}
.foot-col a{transition:color .16s ease}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.foot-extras{padding:0 0 30px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}

/* --- the channels, named rather than guessed at --------------------------- */
.foot-follow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.10)}
.foot-follow h2{font-size:11.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.foot-follow .soc{display:flex;flex-wrap:wrap;gap:9px}
.foot-follow .soc a{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:13px;font-weight:800;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s var(--ease)}
.foot-follow .soc svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.foot-follow .soc a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}

/* --- who publishes this --------------------------------------------------- */
.foot-pub{padding:22px 0;border-top:1px solid rgba(255,255,255,.10)}
.foot-pub h2{font-size:11.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;margin-bottom:15px}
/* Every field on one line where there is room for one line, and pairs
   everywhere else. Letting the width decide the track count put five fields
   into four tracks and left the fifth standing on a row by itself; footer.php
   knows how many there are, so the wide case asks for exactly that many and
   the rest pair off, which cannot strand anything but a genuinely odd last
   one. */
.foot-pub dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.foot-pub dl>div{min-width:0}
@media(min-width:1101px){
  .foot-pub dl{grid-template-columns:repeat(var(--pub-cols,4),minmax(0,1fr))}
}
@media(max-width:400px){
  .foot-pub dl{grid-template-columns:minmax(0,1fr)}
}
.foot-pub dt{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.52)}
.foot-pub dd{margin:4px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.86)}
.foot-pub dd a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* --- the line at the very bottom ------------------------------------------ */
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 26px;
  align-items:center;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);font-size:12.5px}
.foot-bot-l,.foot-bot-r{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.foot-rights{color:rgba(255,255,255,.52)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.foot-langs{display:flex;flex-wrap:wrap;gap:7px}
.foot-langs .lang-link{padding:5px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  font-size:12px;font-weight:800;transition:border-color .16s ease,color .16s ease}
.foot-langs .lang-link:hover{border-color:rgba(255,255,255,.4);color:#fff}
.foot-langs .lang-link.is-active{background:#fff;border-color:#fff;color:var(--ink)}

/* An arrow and nothing else, in the site's own colour — the same object as the
   floating control on an article, standing still at the end of the page. A word
   next to it would only repeat what the arrow already says. */


@media(max-width:900px){
  .foot-top{grid-template-columns:repeat(var(--foot-cols,4),minmax(0,1fr));gap:26px;padding-top:38px}
  .foot-brand{grid-column:1/-1}
  .foot-brand p{max-width:52ch}
}

/* One menu at a time, the full width of the page.
   Side by side, the menus are as tall as the tallest of them and a one-link
   menu leaves a block of nothing beside a six-link one — which is what a
   narrow screen was showing. Given the whole width each menu is its own band,
   its heading is a landmark rather than a column head, and the links fill it
   in as many strips as the width will take: three on a small tablet, two on a
   phone, one when the page is narrower than a strip and a half. */
@media(max-width:700px){
  .foot-top{grid-template-columns:minmax(0,1fr);gap:22px}
  .foot-col ul{columns:170px;column-gap:22px}
  .foot-col li{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
}
@media(max-width:560px){
  .foot-follow,.foot-pub{gap:12px}
  .foot-follow .soc a{padding:7px 13px 7px 11px;font-size:12.5px}
  .foot-bot{gap:14px 18px}
  .foot-bot-l,.foot-bot-r{gap:10px 16px}
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
/*
 * The sections are the row's whole job, so on a narrower screen the things
 * flanking them give the width back first: the optional topics button drops to
 * its icon and the search field gives up what it can spare. Below that the row
 * scrolls, and the fade at its edge says so.
 */
@media(max-width:1240px){
  .nav-all span{display:none}
  .nav-all{padding:6px 9px;margin-left:14px}
  .masthead .search:not(body){width:280px}
}
@media(max-width:1080px){
  .masthead .search:not(body){width:220px}
}
@media(max-width:1160px){
  :root{--rail:284px}
  .gal{grid-template-columns:repeat(4,minmax(0,1fr))}
  .excl-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .excl-grid .x3{display:none}
}
/* Four chips need a row the strip no longer has once the headline is on it. */
@media(max-width:1100px){
  .ticker .topics p,.ticker .topics a:nth-of-type(n+4){display:none}
}

@media(max-width:820px){
  .ticker .topics{display:none}
}
@media(max-width:980px){
  .cols{grid-template-columns:minmax(0,1fr);gap:0}
  .rail{border-top:3px solid var(--ink);padding-top:24px;margin-top:6px}
  /*
   * Below the article now, with its five boxes in two columns.
   *
   * A grid puts them in rows, and a row is as tall as its tallest member: a
   * ten-story list beside a 270px advert leaves a hole seven stories deep, and
   * the next row starts below both of them. Three of those in a column and a
   * quarter of the block is empty white — which is what a reader meets at the
   * foot of a story on a phone held sideways.
   *
   * Columns pack rather than align. Each box is asked not to break across the
   * gap, and the browser fills the shorter side first, so the two sides come
   * out level and there is no hole left to explain.
   */
  .rail-inner{display:block;columns:2;column-gap:26px}
  .rail-inner>*{break-inside:avoid;-webkit-column-break-inside:avoid;
    page-break-inside:avoid;overflow:hidden}
  .hero{grid-template-columns:minmax(0,1fr)}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tagline{display:none}
}
@media(max-width:760px){
  :root{--gut:16px}
  .util nav a:not(.sub-link){display:none}
  .masthead .wrap{flex-wrap:wrap;gap:12px;align-items:center}
  .mast-right{width:100%;margin-left:0}
  /*
   * The wordmark keeps its line and the two controls keep it company at the
   * far end of it. The search group takes the full width, so it drops to the
   * row below on its own — which is the order a reader expects: who this is,
   * what is new, then how to look for something.
   */
  .logo{order:1}
  .mast-tools{order:2;margin-left:auto}
  .mast-right{order:3}
  /*
   * The field and the subscribe button used to share one row, and on a 390px
   * phone that left the field about half a screen wide — a search box too
   * narrow to read back what was typed into it. The row wraps instead: the
   * field takes the whole width, the button sits under it at its own size.
   * Nothing is hidden, so both are still one tap away.
   */
  .mast-right{flex-wrap:wrap;gap:10px}
  .search:not(body){flex:1 0 100%;width:auto}
  .masthead .search:not(body){height:44px}
  .mast-right .btn-sub{margin-right:auto}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .excl-grid{grid-template-columns:minmax(0,1fr)}
  .excl-grid .x3{display:block}
  /* One column on a phone held upright: two of these boxes side by side at
     360px would be two narrow strips, not two columns. */
  .rail-inner{columns:1}
  .toplist li{grid-template-columns:28px 44px minmax(0,1fr) auto;gap:10px}
}
@media(max-width:520px){
  .grid4,.grid3,.grid2,.vids{grid-template-columns:minmax(0,1fr)}
  .rows a{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .hero{padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .ph img{transform:none!important}
}

/* ==========================================================================
   9/10. POLISH LAYER — softer shapes, per-category colour, smooth motion
   ========================================================================== */
:root{
  --r:12px; --r-sm:8px;
  --sh:0 1px 3px rgba(14,14,18,.05), 0 8px 22px rgba(14,14,18,.07);
  --sh-h:0 3px 10px rgba(14,14,18,.09), 0 16px 38px rgba(14,14,18,.13);
  --ease:cubic-bezier(.22,.9,.3,1);
  /* The section colours. --c-viihde is the brand by another name, so it
     follows it rather than repeating its hex. The rgb triplets are here for
     the same reason as --brand-rgb: tints are mixed, never written out. */
  --c-viihde:var(--brand); --c-julkkis:#8B2BE2; --c-sarjat:#0B6FE8;
  --c-elokuvat:#F26522; --c-musiikki:#00A46A; --c-royal:#C79A1E;
  --c-julkkis-rgb:139,43,226; --c-sarjat-rgb:11,111,232; --c-elokuvat-rgb:242,101,34;
  --c-musiikki-rgb:0,164,106; --c-royal-rgb:199,154,30;

  /*
   * The same six colours, lightened, for the one job they cannot do at full
   * strength on a dark page: being read as words. A saturated blue that sits
   * at 8:1 on white is at 3.9:1 on near-black, and no amount of care about the
   * background fixes that — the ink has to change. The dark table swaps each
   * accent for its twin here, so nothing else in the theme has to know.
   *
   * They are separate properties rather than a lighten() of the first, because
   * a site that picks its own accents needs the twin recomputed from what it
   * picked; tahti_inline_branding_css() emits both whenever a colour is set.
   */
  --brand-ink:var(--brand);
  /* A tint sitting on top of an --ink block. The block is near-black in light
     and near-white at night, so the tint on it has to turn over with it. */
  --on-ink-soft:rgba(255,255,255,.18);

  /*
   * The margin note. Its wash is not flat — it starts at nothing on the inner
   * edge and gathers towards the rule on the outer one, so the note leans
   * against the column it belongs to. That shape is worth keeping in both
   * schemes, and it is only the values that have to change, so they are named
   * here and the two rules that draw the note ask for them by name. An earlier
   * attempt at this overrode the whole gradient in dark and drew it the other
   * way round, which is how a note ended up leaning away from its own rule.
   */
  /* Zero alpha of the brand, not `transparent`. They are both invisible and
     they are not the same: a gradient fading to transparent interpolates
     through black and greys the middle of the fade, which is exactly the kind
     of difference that is invisible in a swatch and visible in a page. */
  --note-zero:rgba(var(--brand-rgb),0);
  --note-soft:rgba(var(--brand-rgb),.05);
  --note-soft-b:rgba(var(--brand-rgb),.06);
  --note-strong:rgba(var(--brand-rgb),.10);
  --note-edge:rgba(var(--brand-rgb),.22);
  --note-edge-num:rgba(var(--c-julkkis-rgb),.24);
  --note-edge-link:rgba(var(--c-sarjat-rgb),.3);
  --c-viihde-lt:var(--brand-lt); --c-julkkis-lt:#C08BF0; --c-sarjat-lt:#7FB4F7;
  --c-elokuvat-lt:#FFA470; --c-musiikki-lt:#4ADBA5; --c-royal-lt:#E2C468;
}

/* --- brighter, more colourful photo art ---------------------------------- */
.g1{background:linear-gradient(150deg,#7B1FA2 0%,#E5004C 56%,#FF7A9C 100%)}
.g2{background:linear-gradient(150deg,#0B4F9E 0%,#1E88E5 56%,#6FD0F5 100%)}
.g3{background:linear-gradient(150deg,#B23C0B 0%,#F26522 56%,#FFB067 100%)}
.g4{background:linear-gradient(150deg,#1E3A8A 0%,#3B6BC4 56%,#93B4E8 100%)}
.g5{background:linear-gradient(150deg,#5B21B6 0%,#8B2BE2 56%,#C99BF5 100%)}
.g6{background:linear-gradient(150deg,#046B4A 0%,#00A46A 56%,#6FDCAE 100%)}
.g7{background:linear-gradient(150deg,#9A6207 0%,#E0A82E 56%,#FFD97A 100%)}
.g8{background:linear-gradient(150deg,#9D174D 0%,#E5004C 56%,#FF8FA8 100%)}
.g9{background:linear-gradient(150deg,#3B4557 0%,#6B7A92 56%,#B6C3D4 100%)}
.g10{background:linear-gradient(150deg,#0E5A6E 0%,#0E9BB8 56%,#71D8E8 100%)}
.ph{border-radius:var(--r);transform:translateZ(0)}
.ph::after{background:
  radial-gradient(122% 92% at 44% 10%,transparent 50%,rgba(0,0,0,.30)),
  linear-gradient(200deg,rgba(255,255,255,.16),transparent 46%)}
.ph::before{opacity:.10}
.ph>svg{transition:transform .5s var(--ease)}
a:hover .ph>svg{transform:scale(1.05)}

/* --- smooth cards ---------------------------------------------------------
   A card used to rise three pixels and grow a drop shadow. On a white page a
   shadowed white rectangle reads as a loose panel — and because grid rows
   stretch, the panel outlined the empty space under the shorter cards. The
   hover now lives inside the picture frame: the image eases in a touch and
   the headline takes the brand. Nothing lifts, nothing floats. */
.card a,.vids a,.gal a{display:block}
a:hover .hl,a:hover .hl-xxl,a:hover .hl-xl{text-decoration:none;color:var(--brand)}
.hl,.hl-xxl,.hl-xl{transition:color .18s ease}
.ph img{transition:transform .45s var(--ease)}
.card a:hover .ph img,.vids a:hover .ph img,.gal a:hover .ph img,
.rows a:hover .ph img,.hero-side .item:hover .ph img,.excl a:hover .ph img,
a:hover .lead-fig .ph img{transform:scale(1.045)}

/* --- section headers: colour bar instead of hard black rule --------------- */
.sec-head{border-bottom:0;position:relative;padding-bottom:11px;margin-bottom:18px}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand) 68px,var(--line) 68px,var(--line) 100%)}
.sec-head h2{font-size:19.5px;letter-spacing:-.01em;text-transform:none;font-weight:900}
.sec-head .more{font-size:12.5px;letter-spacing:.02em;text-transform:none;font-weight:800;
  padding:5px 11px;border-radius:999px;background:rgba(var(--brand-rgb),.08);transition:background .18s}
.sec-head .more:hover{background:rgba(var(--brand-rgb),.16);text-decoration:none}
.sec-head.brand::after{background:linear-gradient(90deg,var(--c-musiikki) 0,var(--c-musiikki) 68px,var(--line) 68px)}
.sec-head.brand h2{color:var(--ink)}

/* per-section colour accents */
#h-uutiset ~ *, .sec{--acc:var(--brand)}
.sec-head[data-acc="sarjat"]::after{background:linear-gradient(90deg,var(--c-sarjat) 0,var(--c-sarjat) 68px,var(--line) 68px)}
.sec-head[data-acc="elokuvat"]::after{background:linear-gradient(90deg,var(--c-elokuvat) 0,var(--c-elokuvat) 68px,var(--line) 68px)}
.sec-head[data-acc="julkkis"]::after{background:linear-gradient(90deg,var(--c-julkkis) 0,var(--c-julkkis) 68px,var(--line) 68px)}
.sec-head[data-acc="musiikki"]::after{background:linear-gradient(90deg,var(--c-musiikki) 0,var(--c-musiikki) 68px,var(--line) 68px)}

/* --- colourful kickers: filled badges --------------------------------------
   The shape the publisher asked for, and it is the site's own: the flash
   badge over an exclusive ("VAIN MEILLÄ") is a solid block of colour with
   the letters cut out of it, and a category deserves to read the same way.

   So the pill is filled rather than tinted, barely rounded rather than
   round, and it carries a hairline of its own colour at half strength —
   which is the part that matters on a pale fill. A yellow badge on a white
   page has no edge of its own; without that line it stops being a shape and
   becomes floating letters. The shadow is one pixel: enough to sit the badge
   on the page, not enough to lift it off. Colours come from the theme panel
   per category, day and night separately; what is set here is the shape
   every one of them wears. */
.kicker{font-size:10.5px;letter-spacing:.09em;padding:3.5px 9px;border-radius:4px;
  font-weight:900;display:inline-flex;align-items:center;
  background:rgba(var(--brand-rgb),.08);
  border:1px solid rgba(var(--brand-rgb),.22);
  box-shadow:0 1px 2px rgba(14,14,18,.10)}
.kicker.blue{color:var(--c-royal);background:rgba(var(--c-royal-rgb),.10);border-color:rgba(var(--c-royal-rgb),.28)}
.kicker.ink{color:var(--ink);background:var(--band);border-color:var(--line)}
/* One class per accent the map can return, including the brand itself: a
   kicker that comes out of the same table as everything else should not be
   the one that lands on a class no stylesheet defines. */
.k-viihde{color:var(--brand-dk)!important;background:rgba(var(--brand-rgb),.08)!important;border-color:rgba(var(--brand-rgb),.22)!important}
.k-sarjat{color:var(--c-sarjat)!important;background:rgba(var(--c-sarjat-rgb),.09)!important;border-color:rgba(var(--c-sarjat-rgb),.26)!important}
.k-elokuvat{color:var(--c-elokuvat)!important;background:rgba(var(--c-elokuvat-rgb),.10)!important;border-color:rgba(var(--c-elokuvat-rgb),.28)!important}
.k-julkkis{color:var(--c-julkkis)!important;background:rgba(var(--c-julkkis-rgb),.09)!important;border-color:rgba(var(--c-julkkis-rgb),.26)!important}
.k-musiikki{color:var(--c-musiikki)!important;background:rgba(var(--c-musiikki-rgb),.10)!important;border-color:rgba(var(--c-musiikki-rgb),.28)!important}
.k-royal{color:var(--c-royal)!important;background:rgba(var(--c-royal-rgb),.10)!important;border-color:rgba(var(--c-royal-rgb),.28)!important}
.flash{border-radius:2px;padding:4px 11px;letter-spacing:.07em}
.flash.red{background:var(--brand)}

/* --- softer chrome -------------------------------------------------------- */
/*
 * The five-colour rule used to run under this bar. With a strip directly
 * beneath it that is one stripe too many, and the section dots now say the
 * same thing where the reader is already looking.
 */
.mainnav{border-bottom:1px solid var(--line);
  background:var(--glass);backdrop-filter:saturate(180%) blur(14px)}
.mainnav{position:sticky}
/* No underline. The section you are in is the red one, and a row that says a
   thing once says it more clearly than a row that says it twice. */
.navlist a{transition:color .14s ease}
/*
 * A rectangle, and a hover that goes darker rather than brighter. There used
 * to be a gradient across its face and a coloured glow beneath it that grew
 * when the mouse arrived; both are the signature of a template, and neither
 * survives a header whose whole vocabulary is hairlines. It only appears at
 * all once a site has given it an address to point at.
 */
.btn-sub{border-radius:2px;padding:0 15px;height:32px;display:inline-flex;align-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
  transition:background .16s ease}
.btn-sub:hover{background:var(--brand-dk)}

.search:not(body){border-radius:2px;background:var(--card);border-color:var(--line);
  transition:border-color .18s,box-shadow .18s}
.search:not(body):focus-within{border-color:var(--ink)}
/*
 * The masthead field used to be a ruled line with no box, so this rule took
 * the box styling back off it. The field has had a shape of its own for some
 * time, and now a focus state built on that shape — a ring, a brand shadow
 * and a one-pixel lift — so the rule that erased both border and shadow was
 * erasing the very thing that says the field is live. It is scoped to the
 * standalone forms it was written for; the masthead keeps its own focus.
 */

/* The submit button, for the forms that stand on their own. */
.s-go{height:34px;padding:0 18px;border:0;border-radius:2px;flex:none;
  background:var(--ink);color:var(--bg);font:inherit;font-size:13.5px;font-weight:800;letter-spacing:.02em;
  cursor:pointer;transition:background .18s}
.search:hover .s-go,.s-go:hover,.s-go:focus-visible{background:var(--brand)}
.util{background:linear-gradient(90deg,#12121A,#1B1B26)}

/* --- hero ----------------------------------------------------------------- */
.hero{border-bottom:1px solid var(--line);padding-bottom:30px;gap:30px}
.hero-side .item+.item{border-top:1px solid var(--line-soft)}

/* --- exclusive block ------------------------------------------------------ */
.excl{border-radius:16px;background:linear-gradient(135deg,#15151F 0%,#241726 55%,#3A1029 100%);padding:26px}
.excl .sec-head::after{background:linear-gradient(90deg,var(--hot) 0,var(--hot) 68px,rgba(255,255,255,.14) 68px)}
.excl .sec-head .more{background:rgba(255,212,0,.14)}
.excl .sec-head .more:hover{background:rgba(255,212,0,.26)}
.excl a:hover .hl{color:var(--hot)}

/* --- top-lista block ------------------------------------------------------ */
.toplist{border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.toplist-head{background:linear-gradient(100deg,#15151F,#3A0F2A 60%,#6B0F35);padding:15px 20px}
.toplist-head .fi{border-radius:999px}
.toplist li{padding:11px 0;border-bottom:1px solid var(--line-soft);border-radius:8px;transition:background .18s}
.toplist li:hover{background:rgba(var(--brand-rgb),.035)}
.toplist .rk{font-size:27px}
.toplist .ph{border-radius:6px}
.mv.nu{border-radius:999px}

/* --- rail ----------------------------------------------------------------- */
.rail-box{border-radius:14px;overflow:hidden;box-shadow:var(--sh);border-color:var(--line)}
.rail-box h2{border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.07),rgba(var(--brand-rgb),0));text-transform:none;
  letter-spacing:-.01em;font-size:16px}
.rail-box h2 .n{border-radius:999px}
.pop a,.latest a{transition:background .16s}
.pop .rk{font-size:26px}
.ad{border-radius:14px;border-style:dashed}
.news-box{border-radius:14px;background:linear-gradient(140deg,#15151F,#2C1426 60%,#4A0F2C)}
.news-form input,.news-form button{border-radius:999px}
.news-form input{padding-left:16px}
.horo-grid a{border-radius:999px;transition:background .18s,border-color .18s,color .18s}
.horo-grid a:hover{background:rgba(var(--brand-rgb),.08)}

/* --- lists ---------------------------------------------------------------- */
.rows{border-top:0}
.rows li{border-bottom:1px solid var(--line-soft)}
.rows a{border-radius:12px;padding:14px 12px 14px 0;transition:background .18s}
.rows a:hover{background:rgba(var(--brand-rgb),.035);padding-left:12px}
.compact a{border-radius:8px;transition:background .16s,padding .18s}
.compact a:hover{background:rgba(var(--brand-rgb),.035)}

/* --- band ----------------------------------------------------------------- */
.band{background:linear-gradient(180deg,#F7F7FA,#F1F1F6);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:36px 0}
.gal span{border-radius:0 0 var(--r) var(--r)}
/* A shade either side of --ink, so the band has depth without leaving the
   palette — but only where the browser can mix it. The plain var(--ink) above
   is the floor: a browser without color-mix gets a flat footer, never a
   transparent one, because a gradient that fails to parse would take the whole
   background declaration down with it. */
@supports (background: color-mix(in srgb, #000 50%, #fff)){
  /* background-image, not the shorthand: the flat --ink underneath has to
     survive as the background-colour, both as the floor and so anything
     measuring the contrast of this band can still find a backdrop. */
  .footer{background-image:linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 92%, #FFFFFF),
    color-mix(in srgb, var(--ink) 94%, #000000))}
}

@media (prefers-reduced-motion:reduce){
  .ph>svg,.card,.vids article,.gal a,.btn-sub,.navlist a::after{transition:none!important;transform:none!important}
}

/* ============ ARTICLE / POST FOUNDATIONS ============ */
/* ==========================================================================
   11. ARTICLE / POST — shared foundations
   ========================================================================== */
.crumb{border-bottom:1px solid var(--line);background:#FCFCFD}
.crumb ol{list-style:none;margin:0;padding:11px 0;display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  font-size:12.5px;font-weight:700;color:var(--muted)}
.crumb a:hover{color:var(--brand)}
.crumb .sep{color:#C9C9D2}
.crumb [aria-current]{color:var(--ink)}

.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:13px;
  font-weight:700;color:var(--muted)}
.artmeta .by{color:var(--ink);font-weight:800}
.artmeta .by a{color:var(--link)}
.artmeta .by a:hover{text-decoration:underline}

.share{display:flex;align-items:center;gap:8px}
.share-lbl{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.share a{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);background:var(--card);transition:transform .22s var(--ease),background .22s,color .22s,border-color .22s}
.share a svg{width:15px;height:15px;fill:currentColor}
.share a:hover{transform:translateY(-2px);background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* The copy control, for the two seconds after it has copied. A control that
   does something invisible has to say so, and the only thing it can say
   without a label is a colour and a tick. */
.share a.is-copied{background:var(--brand);border-color:var(--brand);color:#fff}
.share a.is-copied svg{opacity:0}
.share a.is-copied::after{content:"";position:absolute;width:9px;height:5px;
  border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.share a{position:relative}

/* --- a writer, and the desk they sit at ------------------------------------
   The author page and the team page draw the same person the same way, so a
   reader who has met a byline at the foot of an article meets the same face
   here. */
.author-head{margin-bottom:26px}
.author-id{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;align-items:start;margin-top:14px}
.author-face{display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--line-soft)}
.author-face img,.author-face svg{width:100%;height:100%;object-fit:cover;display:block}
.author-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;
  font-size:13px;color:var(--muted)}
.author-facts a{color:var(--brand);font-weight:700}
.author-facts a:hover{text-decoration:underline;text-underline-offset:3px}

.team{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.team-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;
  padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.team-face{display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--line-soft)}
.team-face img,.team-face svg{width:100%;height:100%;object-fit:cover;display:block}
.team-card h2{margin:0 0 6px}
.team-bio{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.team-count{margin:8px 0 0;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.team-intro{margin-bottom:26px}

@media(max-width:560px){
  .author-id{grid-template-columns:minmax(0,1fr)}
  .team-card{grid-template-columns:minmax(0,1fr)}
}

/* --- the newsroom, on its own page ----------------------------------------
   A card rather than a run of rows on the page: the masthead is a block of
   facts and reads as one, the way it does in the footer. */
.contact-card{margin-top:14px;padding:24px 26px;border:1px solid var(--line);
  border-radius:16px;background:var(--card);
  box-shadow:0 1px 2px rgba(16,20,24,.03),0 10px 26px rgba(16,20,24,.05)}
.contact-card .sec-head{margin-bottom:18px}
.contact-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px 26px;margin:0}
.contact-rows>div{padding-left:13px;border-left:2px solid var(--line-soft)}
.contact-card .disclaim{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line-soft)}
.contact-rows>div{min-width:0}
.contact-rows dt{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.contact-rows dd{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.contact-rows dd a{color:var(--brand);font-weight:700}
.contact-rows dd a:hover{text-decoration:underline;text-underline-offset:3px}

/* --- the reading column ---------------------------------------------------- */
.prose{font-size:18px;line-height:1.72;color:#1D1D26;max-width:73ch}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:26px;font-weight:900;letter-spacing:-.028em;line-height:1.18;margin:2em 0 .55em}
.prose h3{font-size:20px;font-weight:900;letter-spacing:-.02em;margin:1.7em 0 .45em}
/* Content links wear the house colour, not browser blue. Imported articles
   link on every third sentence, and a page of bold #0B3ED9 with a heavy rule
   under it reads as an unstyled default. Brand-dark at text weight with a
   quiet rule reads as editorial — the hover fills the rule in. */
/* The house link: ink text on a whisper of brand wash, signed underneath
   with the brand-to-violet rule. The wash says "this is interactive", the
   gradient says whose page this is, and the words keep the sentence's own
   voice and weight. Hover deepens the wash and warms the words — nothing
   moves, nothing shouts. */
.prose a{color:var(--ink);font-weight:inherit;text-decoration:none;
  background-image:linear-gradient(90deg,var(--brand),var(--c-julkkis));
  background-repeat:no-repeat;background-size:100% 2px;background-position:0 100%;
  background-color:rgba(var(--brand-rgb),.06);
  border-radius:5px 5px 0 0;padding:1px 4px 2px;margin:0 -1px;
  transition:background-color .15s ease,color .15s ease}
.prose a:hover{color:var(--brand-dk);background-color:rgba(var(--brand-rgb),.12)}
.prose strong,.prose b{font-weight:800}
/* Organic lists — the ones a page types as lists rather than as [tahti_list]
   cards — were never styled at all, and unstyled bullets read as a draft.
   The marker takes the brand, the text keeps its measure. */
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.35em}
.prose li{margin:0 0 .45em;padding-left:.25em}
.prose li::marker{color:var(--brand);font-weight:900}
.prose ul ul,.prose ol ol,.prose ul ol,.prose ol ul{margin:.45em 0 0}
.prose figure{margin:2em 0}
.prose figcaption{font-size:13px;line-height:1.55;color:var(--muted);font-weight:600;margin-top:10px;
  padding-left:13px;border-left:3px solid var(--brand)}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0}
.tags a{font-size:12.5px;font-weight:800;padding:8px 15px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-2);background:var(--card);transition:border-color .2s,color .2s,transform .2s var(--ease)}
.tags a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}

/*
 * The share row at the foot of a story had no space under it, so the icons sat
 * on the writer card's top edge and the two read as one block — and with the
 * comments box under that, the whole tail of the article ran together. Only
 * the row that follows the tags is at the foot; the one in the byline bar at
 * the top is inside a flex row and is left alone.
 */
.tags + .share{margin-bottom:30px}

.author:not(body){display:grid;grid-template-columns:74px minmax(0,1fr);gap:18px;align-items:start;
  border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--card);box-shadow:var(--sh);margin-bottom:34px}
.author:not(body) .ph{border-radius:50%}
.a-name{font-size:18px;font-weight:900;letter-spacing:-.02em;margin:2px 0 5px}
.a-bio{font-size:14px;line-height:1.6;color:var(--ink-2);font-weight:500}
.a-links{font-size:13px;font-weight:800;margin-top:9px}
.a-links a{color:var(--link)}
.a-links a:hover{text-decoration:underline}

.disclaim{background:var(--card-2);border:1px dashed var(--line);border-radius:12px;padding:15px 18px;
  font-size:12.5px;line-height:1.65;color:var(--muted);font-weight:600;margin:0 0 34px}
.related{margin-top:8px}

@media(max-width:760px){
  .prose{font-size:17px}
  .prose h2{font-size:23px}
  .author:not(body){grid-template-columns:56px minmax(0,1fr);gap:14px;padding:16px}
}


/* ===== VARIANT A — editorial premium =================================== */
.tahti-style-a .artwrap,.tahti-style-b .artwrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.artcol{max-width:760px;margin:0 auto}
.a-head{padding:36px 0 8px}
.a-head .flash{margin-bottom:14px}
.a-title{font-size:clamp(32px,4.6vw,54px);font-weight:900;letter-spacing:-.035em;line-height:1.03;margin-bottom:16px}
.a-stand{font-size:21px;line-height:1.5;color:var(--ink-2);font-weight:500;margin-bottom:22px}
.a-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}
.a-hero{margin:0 0 34px}
.a-hero .ph{border-radius:16px}

/* drop cap */
.prose>p.first::first-letter{
  float:left;font-size:76px;line-height:.82;font-weight:900;padding:6px 12px 0 0;margin-top:4px;
  background:linear-gradient(140deg,var(--brand),var(--c-julkkis));-webkit-background-clip:text;background-clip:text;color:transparent}

/* premium bullets */
.pl{list-style:none;padding:0;margin:1.6em 0}
.pl li{position:relative;padding:0 0 0 40px;margin-bottom:15px;font-size:17.5px;line-height:1.62}
.pl li::before{content:"";position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(140deg,var(--brand),var(--c-julkkis));box-shadow:0 0 0 5px rgba(var(--brand-rgb),.10)}
.pl li::after{content:"";position:absolute;left:6.5px;top:15.5px;width:7px;height:4px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg)}
.pl li b{font-weight:900}

/* numbered premium list */
.nl{list-style:none;padding:0;margin:1.6em 0;counter-reset:n}
.nl li{position:relative;padding:0 0 0 58px;margin-bottom:22px;counter-increment:n}
.nl li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:-4px;
  font-size:28px;font-weight:900;letter-spacing:-.05em;
  background:linear-gradient(140deg,var(--brand),var(--c-julkkis));-webkit-background-clip:text;background-clip:text;color:transparent}
.nl li::after{content:"";position:absolute;left:6px;top:32px;bottom:-14px;width:2px;
  background:linear-gradient(rgba(var(--brand-rgb),.2),transparent)}
.nl li:last-child::after{display:none}
.nl h4{font-size:18px;font-weight:900;letter-spacing:-.02em;margin:0 0 5px}
.nl p{font-size:16.5px;margin:0;color:var(--ink-2)}

/* pull quote */
.pq{margin:2.4em 0;padding:34px 0 30px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  text-align:center;position:relative}
.pq::before{content:"”";position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:82px;line-height:1;font-weight:900;background:var(--card);padding:0 14px;
  background-image:linear-gradient(140deg,var(--brand),var(--c-julkkis));-webkit-background-clip:text;background-clip:text;color:transparent}
.pq p{font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.028em;line-height:1.24;margin:0 0 12px}
.pq cite{font-style:normal;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* fact box */
.fbox{margin:2.2em 0;padding:24px 26px 22px 30px;border-radius:0 16px 16px 0;background:rgba(var(--brand-rgb),.045);
  position:relative;overflow:hidden}
.fbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(var(--brand),var(--c-julkkis))}
.fbox h4{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);margin:0 0 12px}
.fbox p{font-size:16.5px;line-height:1.62;margin:0 0 .7em}
.fbox p:last-child{margin:0}
.fbox dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0;font-size:15.5px}
.fbox dt{font-weight:900;color:var(--ink)}
.fbox dd{margin:0;color:var(--ink-2);font-weight:600}

/* inline read-also */
.also{display:flex;gap:16px;align-items:center;margin:2.1em 0;padding:16px 20px;border:1.5px solid var(--line);
  border-radius:14px;background:var(--card);transition:border-color .22s,transform .22s var(--ease)}
.also:hover{border-color:var(--brand);transform:translateX(3px)}
.also .ph{width:78px;flex:none;aspect-ratio:4/3;border-radius:10px}
.also span{display:block;font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand);margin-bottom:5px}
.also p{font-size:16.5px;font-weight:900;letter-spacing:-.02em;line-height:1.25;margin:0}
.also .arw{margin-left:auto;font-size:20px;color:var(--brand);font-weight:900}

/* stat strip */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:2.2em 0}
.stat3 div{border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;background:var(--card);box-shadow:var(--sh)}
.stat3 b{display:block;font-size:32px;font-weight:900;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(140deg,var(--brand),var(--c-julkkis));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat3 span{display:block;margin-top:7px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:600px){.stat3{grid-template-columns:1fr;gap:10px}.pq{padding:28px 0 24px}}

/* ===== VARIANT B — modular cards ======================================= */
body.tahti-style-b{background:var(--band)}
.tahti-style-a .artwrap,.tahti-style-b .artwrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.artcol{max-width:820px;margin:0 auto}
.b-hero{position:relative;margin:26px 0 0;border-radius:20px;overflow:hidden;box-shadow:var(--sh-h)}
.b-hero .ph{border-radius:0;aspect-ratio:21/9}
.b-card{background:var(--card);border-radius:20px;box-shadow:var(--sh);padding:32px 36px;margin-bottom:18px}
.b-head{margin-top:-58px;position:relative;z-index:5;margin-left:22px;margin-right:22px}
.b-head .flash{margin-bottom:13px}
.a-title{font-size:clamp(28px,3.9vw,44px);font-weight:900;letter-spacing:-.035em;line-height:1.06;margin-bottom:14px}
.a-stand{font-size:19px;line-height:1.5;color:var(--ink-2);font-weight:500;margin-bottom:20px}
.a-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding-top:18px;border-top:1px solid var(--line)}

/* TL;DR module */
.tldr{background:linear-gradient(135deg,#15151F,#2C1426 58%,#4A0F2C);color:#fff;border-radius:20px;
  padding:28px 32px;margin-bottom:18px;box-shadow:var(--sh-h)}
.tldr h2{font-size:13px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--hot);
  margin:0 0 16px;display:flex;align-items:center;gap:9px}
.tldr h2 svg{width:16px;height:16px;stroke:var(--hot);fill:none;stroke-width:2.4}
.tldr ul{list-style:none;padding:0;margin:0}
.tldr li{position:relative;padding-left:34px;margin-bottom:13px;font-size:16.5px;line-height:1.55;color:#EDEDF4}
.tldr li:last-child{margin-bottom:0}
.tldr li::before{content:"";position:absolute;left:0;top:4px;width:21px;height:21px;border-radius:7px;
  background:linear-gradient(140deg,#FFD400,#FF9C2E)}
.tldr li::after{content:"";position:absolute;left:6.5px;top:10px;width:8px;height:4px;
  border-left:2.4px solid #15151F;border-bottom:2.4px solid #15151F;transform:rotate(-45deg)}

/* modules inside prose */
.mod{border-radius:16px;padding:24px 26px;margin:1.9em 0}
.mod h4{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin:0 0 13px;
  display:flex;align-items:center;gap:9px}
.mod h4 svg{width:15px;height:15px;fill:none;stroke-width:2.4}
.mod p:last-child{margin:0}
.mod.info{background:rgba(11,111,232,.06);border:1px solid rgba(11,111,232,.18)}
.mod.info h4{color:var(--c-sarjat)}.mod.info h4 svg{stroke:var(--c-sarjat)}
.mod.warn{background:rgba(242,101,34,.07);border:1px solid rgba(242,101,34,.2)}
.mod.warn h4{color:var(--c-elokuvat)}.mod.warn h4 svg{stroke:var(--c-elokuvat)}
.mod.key{background:rgba(0,164,106,.06);border:1px solid rgba(0,164,106,.2)}
.mod.key h4{color:var(--c-musiikki)}.mod.key h4 svg{stroke:var(--c-musiikki)}

/* checklist */
.ck{list-style:none;padding:0;margin:1.5em 0}
.ck li{position:relative;padding:14px 18px 14px 52px;margin-bottom:10px;background:var(--card-2);
  border:1px solid var(--line);border-radius:13px;font-size:16.5px;line-height:1.55;
  transition:transform .22s var(--ease),border-color .22s}
.ck li:hover{transform:translateX(3px);border-color:rgba(var(--brand-rgb),.35)}
.ck li::before{content:"";position:absolute;left:17px;top:16px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(140deg,var(--brand),var(--c-julkkis))}
.ck li::after{content:"";position:absolute;left:23.5px;top:23px;width:8px;height:4px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg)}

/* step cards */
.steps{display:grid;gap:12px;margin:1.7em 0}
.step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:18px 20px;box-shadow:var(--sh);transition:transform .24s var(--ease)}
.step:hover{transform:translateY(-2px)}
.step .n{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;
  font-size:18px;font-weight:900;background:linear-gradient(140deg,var(--brand),var(--c-julkkis))}
.step h4{font-size:17.5px;font-weight:900;letter-spacing:-.02em;margin:2px 0 5px}
.step p{font-size:15.5px;color:var(--ink-2);margin:0;line-height:1.55}

/* quote card */
.qcard{display:grid;grid-template-columns:62px minmax(0,1fr);gap:18px;align-items:start;
  background:linear-gradient(135deg,rgba(var(--brand-rgb),.045),#F5F0FD);border:1px solid rgba(var(--c-julkkis-rgb),.18);
  border-radius:18px;padding:24px 26px;margin:2em 0}
.qcard .ph{border-radius:50%;aspect-ratio:1/1}
.qcard p{font-size:19.5px;font-weight:800;letter-spacing:-.022em;line-height:1.36;margin:0 0 10px}
.qcard cite{font-style:normal;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.9em 0}
.tiles div{border-radius:16px;padding:20px 18px;color:#fff;text-align:center}
.tiles div:nth-child(1){background:linear-gradient(140deg,var(--brand),var(--brand-lt))}
.tiles div:nth-child(2){background:linear-gradient(140deg,var(--c-julkkis),#C99BF5)}
.tiles div:nth-child(3){background:linear-gradient(140deg,var(--c-sarjat),#6FD0F5)}
.tiles b{display:block;font-size:32px;font-weight:900;letter-spacing:-.04em;line-height:1}
.tiles span{display:block;margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;opacity:.9}

/* accordion */
.faq{margin:1.9em 0}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:16.5px;font-weight:800;
  letter-spacing:-.015em;display:flex;align-items:center;gap:12px;transition:background .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:900;color:var(--brand);
  transition:transform .26s var(--ease);line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:rgba(var(--brand-rgb),.035)}
.faq .ans{padding:0 20px 18px;font-size:16px;line-height:1.62;color:var(--ink-2)}
.faq .ans p{margin:0}

.b-foot{background:var(--card);border-radius:20px;box-shadow:var(--sh);padding:26px 32px;margin-bottom:18px}
.b-foot .tags{margin:0 0 22px}
.author:not(body){box-shadow:none;border-radius:16px}
@media(max-width:760px){
  .b-card,.b-foot{padding:24px 20px;border-radius:16px}
  .b-head{margin:-40px 10px 0}
  .tiles{grid-template-columns:1fr}
  .qcard{grid-template-columns:48px minmax(0,1fr);gap:14px;padding:20px}
}

/* ===== VARIANT D — sidenote longform =================================== */
.d-wrap{max-width:1260px;margin:0 auto;padding:0 var(--gut)}
.d-head{max-width:880px;padding:42px 0 6px}
.d-head .flash{margin-bottom:15px}
.d-title{font-size:clamp(31px,4.3vw,50px);font-weight:900;letter-spacing:-.036em;line-height:1.04;margin-bottom:17px}
.d-stand{font-size:20.5px;line-height:1.52;color:var(--ink-2);font-weight:500;max-width:64ch}
.d-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  max-width:880px;padding:18px 0;margin:24px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.d-hero{margin:0 0 40px}
.d-hero .ph{border-radius:18px}
.d-hero figcaption{max-width:70ch}

/* the reading column reserves a right margin for the notes */
.d-col{max-width:1120px;padding-right:326px;position:relative}
.d-col .prose{max-width:none}

/* section label ribbons */
.slab{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;padding:5px 12px;border-radius:5px;margin:2.6em 0 .5em;
  background:linear-gradient(135deg,var(--brand),var(--c-julkkis))}
.prose .slab+h2{margin-top:0}

/* margin notes */
.sn{float:right;clear:right;width:272px;margin:9px -308px 30px 36px;font-size:13.5px;line-height:1.62;
  color:var(--ink-2);border-top:2px solid var(--ink);padding-top:12px}
.sn h4{font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);margin:0 0 8px}
.sn p{margin:0 0 .7em;font-weight:500}
.sn p:last-child{margin:0}
.sn.num{border-top-color:var(--brand)}
.sn.num b{display:block;font-size:38px;font-weight:900;letter-spacing:-.045em;line-height:1;margin-bottom:4px;
  background:linear-gradient(140deg,var(--brand),var(--c-julkkis));-webkit-background-clip:text;background-clip:text;color:transparent}
.sn.pic{border-top:0;padding-top:0}
.sn.pic .ph{border-radius:12px;margin-bottom:9px}
.sn.link{border-top-color:var(--c-sarjat)}
.sn.link h4{color:var(--c-sarjat)}
.sn.link a{font-size:15px;font-weight:900;letter-spacing:-.02em;line-height:1.28;display:block;color:var(--ink)}
.sn.link a:hover{color:var(--c-sarjat)}

/* inline highlight */
.prose mark{background:linear-gradient(transparent 58%,rgba(255,212,0,.55) 58%);color:inherit;padding:0 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* em-dash bullets */
.dl2{list-style:none;padding:0;margin:1.7em 0}
.dl2 li{position:relative;padding:0 0 0 34px;margin-bottom:13px;font-size:17.5px;line-height:1.62}
.dl2 li::before{content:"";position:absolute;left:0;top:14px;width:20px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--c-julkkis))}

/* quote — left rule, not centred */
.dq{margin:2.3em 0;padding:4px 0 4px 28px;border-left:5px solid transparent;
  border-image:linear-gradient(var(--brand),var(--c-julkkis)) 1;border-left-width:5px;border-left-style:solid}
.dq p{font-size:clamp(21px,2.4vw,27px);font-weight:900;letter-spacing:-.03em;line-height:1.26;margin:0 0 11px}
.dq cite{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* key numbers inline */
.dnum{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:2.2em 0;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line)}
.dnum div{padding:20px 14px;text-align:center;border-right:1px solid var(--line)}
.dnum div:last-child{border-right:0}
.dnum b{display:block;font-size:36px;font-weight:900;letter-spacing:-.045em;line-height:1}
.dnum span{display:block;margin-top:6px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}

.d-foot{max-width:1120px;padding-right:326px}
@media(max-width:1120px){
  .d-col,.d-foot{padding-right:0}
  .sn{float:none;width:auto;margin:1.9em 0;padding:16px 18px;border-top:0;border-left:4px solid var(--brand);
    border-radius:0 12px 12px 0;background:rgba(var(--brand-rgb),.045)}
  .sn.pic{padding:0;background:none;border-left:0}
  .sn.pic .ph{max-width:340px}
}
@media(max-width:640px){
  .dnum{grid-template-columns:1fr}
  .dnum div{border-right:0;border-bottom:1px solid var(--line)}
  .dnum div:last-child{border-bottom:0}
}

/* --- signature highlight marker (kept from variant D) --------------------- */
.prose mark{background:linear-gradient(transparent 55%,rgba(255,212,0,.62) 55%);color:inherit;padding:0 3px;
  border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.prose mark.pink{background:linear-gradient(transparent 55%,rgba(var(--brand-rgb),.24) 55%)}
.prose mark.blue{background:linear-gradient(transparent 55%,rgba(11,111,232,.20) 55%)}

/*
 * The summary box is dark whatever the page is set to — that is its whole
 * look — so a highlight inside it cannot use the daytime treatment. That one
 * is a wash of yellow drawn behind dark letters; behind the box's near-white
 * letters the band lands across the middle of the word and reads as a line
 * struck through it. The night treatment is the right one here at any hour:
 * a bar under the letters rather than a wash behind them.
 *
 * It only became visible when blocks started expanding the shortcodes inside
 * them — until then the highlight in a summary printed as its own brackets,
 * so nobody could see what it looked like.
 */
/* --------------------------------------------------------------------------
   Links inside the In brief card.

   The card is a dark gradient and had no link rule of its own, so a link in it
   inherited .prose a — which is written for a white page and sets the text to
   var(--ink). Near-black on dark maroon measures 1.06:1 against the top of the
   gradient and 1.28:1 against the bottom: not dark, invisible.

   #FF5C8A holds 6.17 / 5.79 / 5.12 across the three stops, so it clears AA
   everywhere on the card, and 2.52:1 against the #EDEDF4 body text beside it,
   so it still reads as a link and not as a sentence. The underline stays for
   anyone who cannot use the colour to tell the difference.

   Scoped to .tldr on purpose: links everywhere else are unchanged.
   -------------------------------------------------------------------------- */
.tldr a{
  color:#FF5C8A;
  background-image:none;
  background-color:rgba(255,92,138,.10);
  box-shadow:inset 0 -2px 0 rgba(255,92,138,.85);
  border-radius:4px 4px 0 0;padding:1px 4px 2px;margin:0 -1px;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.tldr a:hover{
  color:#FFF;
  background-color:rgba(255,92,138,.30);
  box-shadow:inset 0 -2px 0 #FF7099;
}
.tldr a:focus-visible{outline:3px solid #FFD400;outline-offset:2px}

/* A highlight inside a link would otherwise paint over it. */
.tldr a mark{box-shadow:none;color:inherit}

.tldr mark{background:none;color:inherit;padding:0 2px;border-radius:2px;
  box-shadow:inset 0 -.30em 0 rgba(255,214,64,.85)}
.tldr mark.pink{box-shadow:inset 0 -.30em 0 rgba(255,61,116,.75)}
.tldr mark.blue{box-shadow:inset 0 -.30em 0 rgba(127,180,247,.72)}

/* --- populated rail widgets ---------------------------------------------- */
.minitop{padding:0;margin:0}
.minitop li{border-bottom:1px solid var(--line-soft)}
.minitop li:last-child{border-bottom:0}
.minitop a{display:grid;grid-template-columns:20px 38px minmax(0,1fr);gap:11px;align-items:center;padding:9px 15px;
  transition:background .16s}
.minitop a:hover{background:rgba(var(--brand-rgb),.035)}
.minitop .rk{font-size:17px;font-weight:900;color:var(--brand);text-align:center;letter-spacing:-.04em}
.minitop .ph{aspect-ratio:2/3;border-radius:5px}
.minitop b{display:block;font-size:14px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.minitop i{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}

/* ===== VARIANT F — portal article ====================================== */
.f-head{padding:26px 0 0}
.f-head .flash{margin-bottom:13px}
.f-title{font-size:clamp(29px,3.6vw,44px);font-weight:900;letter-spacing:-.036em;line-height:1.05;margin-bottom:15px}
.f-stand{font-size:19.5px;line-height:1.5;color:var(--ink-2);font-weight:500;margin-bottom:18px;max-width:62ch}
.f-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px}
.f-hero{margin:0 0 30px}
.f-hero .ph{border-radius:16px}
.f-col .prose{max-width:none}

/* key points strip right under the lead */
.kp{border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:0 14px 14px 0;
  background:linear-gradient(100deg,rgba(var(--brand-rgb),.05),rgba(var(--c-julkkis-rgb),.03));padding:22px 26px;margin:0 0 30px}
.kp h2{font-size:11.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin:0 0 14px}
.kp ul{list-style:none;padding:0;margin:0}
.kp li{position:relative;padding-left:28px;margin-bottom:11px;font-size:16.5px;line-height:1.55;font-weight:500}
.kp li:last-child{margin-bottom:0}
.kp li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(140deg,var(--brand),var(--c-julkkis))}

/* facts panel */
.fp{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:2.1em 0;box-shadow:var(--sh)}
.fp h4{font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:13px 20px;
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.09),rgba(var(--c-julkkis-rgb),.05));border-bottom:1px solid var(--line);margin:0}
.fp dl{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0}
.fp dt,.fp dd{padding:11px 20px;border-bottom:1px solid var(--line-soft);margin:0}
.fp dt{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  background:var(--card-2);white-space:nowrap}
.fp dd{font-size:15.5px;font-weight:600}
.fp dl>:nth-last-child(-n+2){border-bottom:0}

/* pull quote — compact, left accent */
.fq{margin:2.1em 0;padding:22px 26px;border-radius:16px;
  background:linear-gradient(135deg,rgba(var(--brand-rgb),.05),#F4F0FD);border:1px solid rgba(var(--c-julkkis-rgb),.16)}
.fq p{font-size:clamp(19px,2.1vw,24px);font-weight:900;letter-spacing:-.028em;line-height:1.3;margin:0 0 10px}
.fq cite{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-ink)}

/* dot bullets */
.fl{list-style:none;padding:0;margin:1.6em 0}
.fl li{position:relative;padding:11px 0 11px 34px;border-bottom:1px solid var(--line-soft);
  font-size:17px;line-height:1.55}
.fl li:last-child{border-bottom:0}
.fl li::before{content:"";position:absolute;left:4px;top:18px;width:14px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--c-julkkis))}

/* inline read-also strip */
.fa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:2.1em 0;
  padding:20px;border-radius:16px;background:var(--band)}
.fa .lbl{grid-column:1/-1;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);margin-bottom:-4px}
.fa a{display:grid;grid-template-columns:74px minmax(0,1fr);gap:13px;align-items:center;background:var(--card);
  border-radius:12px;padding:10px;transition:transform .22s var(--ease)}
.fa a:hover{transform:translateY(-2px)}
.fa .ph{aspect-ratio:4/3;border-radius:8px}
.fa p{font-size:14.5px;font-weight:800;letter-spacing:-.02em;line-height:1.28;margin:0}

/* numbers row */
.fn{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2.1em 0}
.fn div{border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center;box-shadow:var(--sh)}
.fn b{display:block;font-size:30px;font-weight:900;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(140deg,var(--brand),var(--c-julkkis));-webkit-background-clip:text;background-clip:text;color:transparent}
.fn span{display:block;margin-top:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}

/* comment teaser */
.cmts{border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:34px;box-shadow:var(--sh)}
.cmts h3{font-size:16px;font-weight:900;letter-spacing:-.02em;margin:0 0 4px}
.cmts p.sub{font-size:13.5px;color:var(--muted);font-weight:600;margin:0 0 16px}
.cmt-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line-soft)}
.cmt-row .ph{border-radius:50%;aspect-ratio:1/1}
.cmt-row b{font-size:13.5px;font-weight:900}
.cmt-row .t{font-size:11.5px;color:var(--muted);font-weight:700;margin-left:7px}
.cmt-row p{font-size:15px;line-height:1.5;margin:4px 0 0;color:var(--ink-2)}
.cmts .all{display:inline-block;margin-top:16px;font-size:13px;font-weight:900;letter-spacing:.04em;
  color:var(--brand);padding:9px 18px;border-radius:999px;background:rgba(var(--brand-rgb),.08)}
.cmts .all:hover{background:rgba(var(--brand-rgb),.16)}

@media(max-width:760px){.fa{grid-template-columns:minmax(0,1fr)}.fn{grid-template-columns:1fr}
  .fp dl{grid-template-columns:minmax(0,1fr)}.fp dt{border-bottom:0;padding-bottom:2px;background:var(--card)}
  .fp dd{padding-top:0}}


/* ==========================================================================
   9. PAGE-SPECIFIC — TOP-LISTA  (tahti-top-lista.html only)
      Appended to the shared design system above. Nothing above is modified.
   ========================================================================== */

/* --- breadcrumb ---------------------------------------------------------- */
.crumbs{border-bottom:1px solid var(--line);background:var(--card)}
.crumbs ol{display:flex;align-items:center;gap:7px;flex-wrap:wrap;list-style:none;margin:0;padding:9px 0;
  font-size:12px;font-weight:700;color:var(--muted)}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs .sep{color:#C6C6CE}.crumbs [aria-current="page"]{color:var(--ink-2)}

/* --- page header block --------------------------------------------------- */
.pghead{padding:24px 0 20px;border-bottom:3px solid var(--ink);margin-bottom:24px}
.pghead .hl-xxl{margin-bottom:11px}
.pghead .stand{font-size:17px;line-height:1.5;color:var(--ink-2);font-weight:500;max-width:64ch}
.pgmeta{margin-top:13px;font-size:12px;font-weight:700;color:var(--muted);
  display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.pgmeta b{color:var(--ink-2);font-weight:800}

/* --- filter bar ---------------------------------------------------------- */
.filters{border:1px solid var(--line);border-top:3px solid var(--ink);background:var(--card);margin-bottom:22px}
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:13px 15px;cursor:pointer;
  font-size:13.5px;font-weight:900;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-2);transition:color .15s,border-color .15s}
.tabs button:hover{color:var(--brand)}.tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 15px}
.chips .lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-right:3px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;
  font-size:12.5px;font-weight:800;color:var(--ink-2);transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip[aria-pressed="true"]:hover{background:var(--brand);border-color:var(--brand)}
.fbar-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:11px 15px;
  border-top:1px solid var(--line-soft);background:var(--band)}
.fcount{font-size:12.5px;font-weight:800;color:var(--ink-2)}.fcount b{color:var(--brand)}
.freset{margin-left:auto;background:none;border:0;cursor:pointer;padding:4px 2px;font-size:12px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--link)}
.freset:hover{text-decoration:underline}

/* --- shared chart atoms -------------------------------------------------- */
.sub-h{font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.svc{display:inline-block;border:1px solid var(--line);border-radius:2px;padding:3px 8px;
  font-size:11px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.rate{display:inline-block;background:var(--ink);color:var(--bg);border-radius:2px;padding:3px 7px;
  font-size:11.5px;font-weight:900;white-space:nowrap}
.rate::before{content:"\2605\00a0";color:var(--hot)}
.entry .mv,.mv-box .mv{display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.03em;
  white-space:nowrap}
.cast{font-size:12.5px;line-height:1.45;color:var(--muted);font-weight:600;margin-top:6px}
.cast b{color:var(--ink-2);font-weight:800}.cast a{color:var(--link);font-weight:700}
.cast a:hover{text-decoration:underline}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px}
.entry.hide{display:none}

/* --- podium (ranks 1-3) -------------------------------------------------- */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  list-style:none;margin:0 0 28px;padding:0}
.pod{min-width:0}.pod-fig{display:block;margin-bottom:12px}.pod .ph{aspect-ratio:2/3}
.pod-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start}
.pod .rk{font-size:clamp(40px,4.6vw,58px);font-weight:900;letter-spacing:-.06em;line-height:.78;color:var(--brand)}
.pod .s{font-size:12px;font-weight:700;color:var(--muted);margin-top:5px}
.pod .desc{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:8px}

/* --- compact rows (ranks 4-20) ------------------------------------------- */
.chart{border-top:2px solid var(--ink);list-style:none;margin:0;padding:0}
.crow{display:grid;grid-template-columns:46px 60px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 2px;border-bottom:1px solid var(--line)}
.crow:hover{background:rgba(var(--brand-rgb),.035)}.crow .ph{aspect-ratio:2/3}
.crow .rk{font-size:29px;font-weight:900;letter-spacing:-.05em;line-height:1;color:#B4B4C0;text-align:center}
.crow .s{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px}
.crow .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}

/* --- empty state --------------------------------------------------------- */
.empty{display:none;border:1px dashed var(--line);background:var(--band);padding:30px 22px;
  text-align:center;margin-bottom:26px}
.empty.on{display:block}.empty h3{font-size:16.5px;font-weight:900;margin-bottom:7px}
.empty p{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-bottom:14px}

/* --- methodology box ----------------------------------------------------- */
.method{background:var(--band);border:1px solid var(--line);border-left:4px solid var(--brand);
  padding:20px 22px;margin-bottom:34px}
.method h2{font-size:18px;font-weight:900;letter-spacing:-.02em;margin-bottom:11px}
.method p{font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:10px}.method p:last-of-type{margin-bottom:0}
.method .fine{font-size:11.5px;line-height:1.5;font-weight:700;color:var(--muted);
  border-top:1px solid var(--line);margin:14px 0 0;padding-top:11px}

/* --- movers -------------------------------------------------------------- */
.movers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.mv-box{border:1px solid var(--line);min-width:0}
.mv-box h3{font-size:14px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 14px;border-bottom:2px solid var(--ink)}
.mv-box li{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;font-weight:700;
  border-bottom:1px solid var(--line-soft)}
.mv-box li:last-child{border-bottom:0}.mv-box .n{flex:1;min-width:0}
.mv-box .p{flex:none;width:22px;font-size:12px;font-weight:900;color:#C4C4CE}
.mv-box .n a:hover{text-decoration:underline}

/* --- rail: new on the chart ---------------------------------------------- */
.newlist li{border-bottom:1px solid var(--line-soft)}.newlist li:last-child{border-bottom:0}
.newlist a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;padding:11px 15px;align-items:center}
.newlist a:hover{background:rgba(var(--brand-rgb),.035)}.newlist .ph{aspect-ratio:2/3}
.newlist .s{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:3px}

/* --- rail: service share bars (plain divs, no library) ------------------- */
.shares{padding:14px 15px}
.shares li+li{margin-top:12px}
.shares .row{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;
  font-size:12.5px;font-weight:800}
.shares .row span+span{color:var(--muted)}
.shares .track{height:9px;background:var(--band-2);border-radius:2px;overflow:hidden}
.shares .fill{height:100%;background:var(--brand);border-radius:2px}.shares .fill.alt{background:var(--ink)}

/* --- top-lista responsive ------------------------------------------------ */
@media(max-width:980px){
  .podium{gap:18px}
  .pod .rk{font-size:44px}
}
@media(max-width:760px){
  .podium{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:22px}
  .pod{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}
  .pod:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .pod-fig{max-width:168px}
  .movers{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .crow{grid-template-columns:32px 48px minmax(0,1fr);gap:9px;row-gap:9px}
  .crow .rk{font-size:23px}
  .crow .side{grid-column:2 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;text-align:left;gap:7px}
  .pod-fig{max-width:140px}
  .tabs button{padding:12px 11px;font-size:12.5px}
}


/* ==========================================================================
   

/* ============ ACTOR PROFILE PAGE ============ */
   11. ACTOR PROFILE — data-forward layout
   ========================================================================== */
.crumb{border-bottom:1px solid var(--line);background:#FCFCFD}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:11px 0;font-size:12.5px;
  font-weight:700;color:var(--muted)}
.crumb a:hover{color:var(--brand)}
.crumb .sep{color:#C9C9D2}
.crumb [aria-current]{color:var(--ink)}

.r34{aspect-ratio:3/4}
.profile{display:grid;grid-template-columns:340px minmax(0,1fr);gap:32px;padding:28px 0 30px}
.profile .pic{position:relative}
.pic .verified{position:absolute;right:12px;top:12px;z-index:5;background:var(--glass);
  color:var(--brand);font-size:11px;font-weight:900;letter-spacing:.06em;padding:5px 11px;border-radius:999px;
  box-shadow:0 3px 12px rgba(0,0,0,.16)}
.p-name{margin:6px 0 6px}
.p-role{font-size:17px;color:var(--ink-2);font-weight:600;line-height:1.45;max-width:52ch}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 20px}
.stat{flex:1 1 120px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--card);
  box-shadow:var(--sh);min-width:0}
.stat b{display:block;font-size:26px;font-weight:900;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(90deg,var(--brand),var(--c-julkkis));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:5px;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.btn-ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;
  padding:11px 22px;font-size:13.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:border-color .2s,color .2s,transform .2s var(--ease)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-sub[aria-pressed="true"]{background:var(--card);color:var(--brand);border:1.5px solid var(--brand);box-shadow:none}

/* --- quick facts: the programmatic detail table -------------------------- */
.facts{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh);background:var(--card)}
.facts h3{font-size:15px;font-weight:900;letter-spacing:-.01em;padding:13px 16px;
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.08),rgba(var(--c-julkkis-rgb),.05));
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.facts h3 svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:2.4}
.facts dl{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0}
.facts dt,.facts dd{padding:10px 16px;border-bottom:1px solid var(--line-soft);margin:0;min-width:0}
.facts dt{font-size:12.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);
  background:var(--card-2);white-space:nowrap}
.facts dd{font-size:14.5px;font-weight:600}
.facts dd a{color:var(--link);font-weight:700}
.facts dd a:hover{text-decoration:underline}
.facts dl>:nth-last-child(-n+2){border-bottom:0}

/* --- generic data table -------------------------------------------------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);background:var(--card);
  -webkit-overflow-scrolling:touch}
.dtable{width:100%;border-collapse:collapse;min-width:620px;font-size:14.5px}
.dtable th{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:12px 15px;background:var(--card-2);border-bottom:1.5px solid var(--line);white-space:nowrap}
.dtable td{padding:12px 15px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.dtable tbody tr{transition:background .16s}
.dtable tbody tr:hover{background:rgba(var(--brand-rgb),.035)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable .yr{font-weight:900;color:var(--brand);white-space:nowrap;font-variant-numeric:tabular-nums}
.dtable .ttl{font-weight:800;letter-spacing:-.015em}
.dtable .ttl a:hover{color:var(--brand)}
.dtable .role{color:var(--ink-2);font-weight:600}
.tag:not(body){display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 10px;
  border-radius:999px;white-space:nowrap;border:1px solid var(--line);color:var(--ink-2);background:var(--card)}
.tag.sarja{color:var(--c-sarjat);border-color:rgba(11,111,232,.3);background:rgba(11,111,232,.07)}
.tag.elokuva{color:var(--c-elokuvat);border-color:rgba(242,101,34,.3);background:rgba(242,101,34,.08)}
.tag.dok{color:var(--c-musiikki);border-color:rgba(0,164,106,.3);background:rgba(0,164,106,.08)}
.tag.teatteri{color:var(--c-julkkis);border-color:rgba(var(--c-julkkis-rgb),.3);background:rgba(var(--c-julkkis-rgb),.07)}
.tag.won{color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand-lt));border-color:transparent}
.tag.nom{color:var(--muted)}
.hint{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:8px;display:none}

/* --- seasons ------------------------------------------------------------- */
.seasons{display:grid;gap:10px}
.season{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:13px 16px;background:var(--card);
  box-shadow:var(--sh);transition:transform .26s var(--ease)}
.season:hover{transform:translateY(-2px)}
.season .kausi{font-size:15px;font-weight:900;letter-spacing:-.02em}
.season .kausi span{display:block;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:0}
.season .bar{height:8px;border-radius:999px;background:var(--band-2);overflow:hidden;margin-bottom:7px}
.season .bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--c-julkkis))}
.season .lbl{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.season .eps{font-size:12px;font-weight:900;color:var(--brand);white-space:nowrap}

.disclaim{background:var(--card-2);border:1px dashed var(--line);border-radius:12px;padding:15px 18px;
  font-size:12.5px;line-height:1.65;color:var(--muted);font-weight:600;margin-bottom:34px}

@media(max-width:980px){.profile{grid-template-columns:260px minmax(0,1fr);gap:24px}}
@media(max-width:760px){
  .profile{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:20px}
  .profile .pic{max-width:260px}
  .hint{display:block}
  .facts dl{grid-template-columns:minmax(0,1fr)}
  .facts dt{border-bottom:0;padding-bottom:2px;background:var(--card)}
  .facts dd{padding-top:0}
  .season{grid-template-columns:80px minmax(0,1fr);gap:12px}
  .season .eps{grid-column:1/-1}
}


/* ==========================================================================
   THEME-ONLY COMPONENTS
   Rendered by inc/ (not present in the static mockups) plus a11y fixes.
   ========================================================================== */

/* skip link — must become visible when focused */
.sr-focus{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--bg);
  padding:12px 20px;border-radius:0 0 10px 0;font-size:14px;font-weight:800}
.sr-focus:focus{left:0}
.sr:focus,.screen-reader-text:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;
  clip:auto;clip-path:none;z-index:1000;background:var(--ink);color:var(--bg);padding:12px 20px;
  border-radius:10px;font-size:14px;font-weight:800;box-shadow:0 8px 30px rgba(0,0,0,.3)}

/* tahti_render_stats() */
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.stat{flex:1 1 118px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  background:var(--card);box-shadow:var(--sh)}
.stat b{display:block;font-size:26px;font-weight:900;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(90deg,var(--brand),var(--c-julkkis));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:5px;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* tahti_render_social() */
.tahti-social{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:22px 0}
.tahti-social a{font-size:12.5px;font-weight:800;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  transition:border-color .2s,color .2s,transform .2s var(--ease)}
.tahti-social a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}

/* tahti_render_facts() default skin (the .fp variant is style-F specific) */
.facts{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh);
  background:var(--card);margin:0 0 26px}
.facts h3{font-size:15px;font-weight:900;letter-spacing:-.01em;padding:13px 16px;margin:0;
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.08),rgba(var(--c-julkkis-rgb),.05));
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.facts h3 svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:2.4}
.facts dl{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0}
.facts dt,.facts dd{padding:10px 16px;border-bottom:1px solid var(--line-soft);margin:0;min-width:0}
.facts dt{font-size:12.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);background:var(--card-2);white-space:nowrap}
.facts dd{font-size:14.5px;font-weight:600}
.facts dd a{color:var(--link);font-weight:700}
.facts dd a:hover{text-decoration:underline}
.facts dl>:nth-last-child(-n+2){border-bottom:0}
.facts-sec{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);padding:14px 16px 6px;margin:0}
@media(max-width:760px){
  .facts dl{grid-template-columns:minmax(0,1fr)}
  .facts dt{border-bottom:0;padding-bottom:2px;background:var(--card)}
  .facts dd{padding-top:0}
}

/* WordPress core output */
.wp-caption{margin:0}
.wp-caption-text,.wp-block-image figcaption{font-size:13px;line-height:1.55;color:var(--muted);
  font-weight:600;margin-top:10px;padding-left:13px;border-left:3px solid var(--brand)}
.alignleft{float:left;margin:0 24px 18px 0}
.alignright{float:right;margin:0 0 18px 24px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{width:min(1100px,calc(100vw - var(--gut)*2));margin-left:50%;transform:translateX(-50%)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:2em 0}
.gallery img{border-radius:12px}
.sticky .flash{display:inline-block}
.says,.bypostauthor{display:block}
/*
 * .pager is the writer page's own wrapper around paginate_links(), and it was
 * the one wrapper nothing styled: on a writer with more than a page of stories
 * the numbers came out as bare inline links in a row of running text. The
 * links inside it are .page-numbers like everywhere else, so it only ever
 * needed to be a row.
 */
.pagination,.nav-links,.pager{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0}
.page-numbers{font-size:14px;font-weight:800;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);transition:border-color .2s,color .2s}
.page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}

/* comments */
.comment-list{list-style:none;padding:0;margin:0}
.comment-list li{padding:16px 0;border-top:1px solid var(--line-soft)}
.comment-list .children{list-style:none;padding-left:26px;margin-top:8px;border-left:2px solid var(--line)}
.comment-meta{font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:6px}
.comment-author .fn{font-weight:900;color:var(--ink);font-style:normal}
.comment-content{font-size:15.5px;line-height:1.6}
.comment-respond{margin-top:30px;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--sh)}
.comment-form textarea,.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url]{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;
  background:var(--card);outline:none;transition:border-color .18s,box-shadow .18s}
.comment-form textarea:focus,.comment-form input:focus{border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(var(--brand-rgb),.10)}
.comment-form .submit{background:linear-gradient(90deg,var(--brand),var(--brand-lt));color:#fff;border:0;
  border-radius:999px;padding:12px 24px;font-size:13.5px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer}

/* ==========================================================================
   12. STYLE H — HYBRID
   The other four styles each traded something away. A has the premium opening
   but nowhere for a rail; F has the rail but opens like a news page; D has the
   margin notes but takes the space F needs for them; B has the card vocabulary
   but no long-form spine. This one runs all four at once.

   The body is three zones rather than two — notes on the left, the reading
   column in the middle, the rail on the right. Mirroring D's notes into the
   left gutter is what makes that possible: in style D they float right, which
   is exactly where the rail lives here.

   Two things hold an asymmetric page like this together. One shared left edge
   for the headline, the lead image, the key points and the text; and a hairline
   spine down the inner side of the note gutter, with the notes hanging off one
   face of it and the article off the other. Without the spine the left column
   reads as empty page rather than as part of the story.
   ========================================================================== */

.hy-wrap{
  /*
   * The gutter is as narrow as a margin note can be and still read, because
   * every pixel of it decides how wide a screen has to be before the third
   * zone can exist at all. At 250 the whole layout — gutter, a 600px reading
   * column, the rail and the gaps — fits inside 1240, which covers a laptop
   * window that is not maximised. A wider gutter looked better and showed the
   * notes to fewer people.
   */
  --hy-gutter: 250px;   /* note column plus the space either side of the spine */
  --hy-note: 230px;     /* the notes themselves */
  --hy-tie: 20px;       /* note edge to spine */

  /*
   * One measure for the whole article.
   *
   * The opening used to be set to four different widths at once — headline to
   * the column, standfirst to 64 characters, lead image to its own cap, key
   * points and text back to the column — and the eye spent the first screen
   * looking for the left edge it had already found. Everything is 860 now:
   * the width a 16:9 photograph needs before it stops reading as a strip, and
   * close enough to a comfortable line of text to serve as both.
   */
  --hy-measure: 860px;
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
}

/* --- reading progress ---------------------------------------------------- */
.hy-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;background:transparent;pointer-events:none}
.hy-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-lt));
  transition:width .08s linear}
.admin-bar .hy-prog{top:32px}

/* --- the opening --------------------------------------------------------- */
/* One measure for the opening, and it stays close to the measure of the text
   underneath it. Left to fill the column, the lead image ends up half as wide
   again as the article it introduces and reads as a banner that wandered in
   from another page. */
/* The opening sits inside the reading column now, so it takes the measure and
   nothing is subtracted from it: there is no rail beside it to make room for,
   because the rail is beside it already. */
.hy-head,.hy-hero{max-width:var(--hy-measure)}
.hy-head{margin:0;padding:34px 0 0}
.hy-title{font-size:clamp(34px,4.4vw,60px);font-weight:900;letter-spacing:-.045em;line-height:1.03;
  margin:14px 0 0;color:var(--ink)}
.hy-stand{margin:18px 0 0;font-size:20px;line-height:1.52;font-weight:600;color:#3A3A46}
.hy-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:26px 0 0;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* A letterbox crop, so the image opens the page without burying the first
   paragraph under it. */
.hy-hero{margin-top:30px}
/* 16:9 — a photograph's own shape, and the one every newsroom crops to. The
   letterbox it replaces was a reaction to the image being too wide; the width
   is what was wrong, and now that the opening has a measure the picture can go
   back to a proportion a photograph actually comes in. */
.hy-hero .ph,.hy-hero img{border-radius:18px;overflow:hidden;aspect-ratio:16/9;
  max-height:min(62vh,540px);width:100%;object-fit:cover}
.hy-hero figcaption{font-size:13px;line-height:1.55;color:var(--muted);font-weight:600;
  margin-top:11px;max-width:var(--hy-measure)}

/* --- the body: notes | text | rail --------------------------------------- */
.hy-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:40px;
  padding-top:0;align-items:start}
.hy-main{min-width:0}
.hy-col{position:relative;padding-left:var(--hy-gutter)}
.hy-col .prose{max-width:var(--hy-measure);font-size:18.5px;line-height:1.74}
.hy-col .kp{margin:0 0 30px;max-width:var(--hy-measure)}
.hy-foot{padding-left:var(--hy-gutter);max-width:calc(var(--hy-measure) + var(--hy-gutter))}
.hy-related{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* The contents list starts where the headline starts.
   Left at the top of the grid it began on the underside of the breadcrumb
   rule with nothing between the two, while the opening beside it held 34px of
   air before the badge — so the list read as attached to the furniture above
   it rather than as part of the article. 82px is where the headline's first
   line begins, and it is the same 82 at every width the rail exists at,
   because what stands above the headline is one badge of a fixed size. Only
   the starting point moves: once the page scrolls the list still comes to
   rest at 88. */
.hy-grid .rail{position:sticky;top:88px;margin-top:82px;
  max-height:calc(100vh - 104px);overflow-y:auto;overflow-x:hidden;
  padding:0 10px 24px;margin-left:-10px;margin-right:-10px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* Sticky only holds while the element fits. A rail taller than the window
   burns through its travel and rides up out of view just when the reader is
   deepest in the article — which is exactly where the contents list earns
   its keep. So the rail is never taller than the window (88 above, 16 of
   air below), and whatever does not fit scrolls INSIDE the rail instead of
   carrying the whole rail away. The 10px side padding — paid back by the
   margins, so the cards do not move — keeps the card shadows from being
   sheared off at the new scroll edge. */
.hy-grid .rail::-webkit-scrollbar{width:8px}
.hy-grid .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.hy-grid .rail::-webkit-scrollbar-track{background:transparent}

/* --- three zones fit ----------------------------------------------------- */
@media(min-width:1241px){



  /* Headline and image take the reading column exactly — the same edge as the
     text under them, so the opening is one block rather than three stepped
     ones. The gutter beside them is the note column, empty until the first
     note arrives. */
  .hy-head,.hy-hero,.hy-hero figcaption{margin-left:var(--hy-gutter)}

  /* The spine. It fades out at the foot rather than stopping dead, so it reads
     as the edge of the text block and not as a table border. */
  .hy-col::before{content:"";position:absolute;top:8px;bottom:0;
    left:calc(var(--hy-gutter) - var(--hy-tie));width:1px;
    background:linear-gradient(180deg,var(--line) 0%,var(--line) 88%,transparent 100%)}

  /* And the part of it already read, in brand colour. The gutter now has a job
     even where no note hangs off it: it is the progress of the article itself,
     and every note attaches to a point on it. */
  .hy-col::after{content:"";position:absolute;top:8px;
    left:calc(var(--hy-gutter) - var(--hy-tie));width:1px;
    height:var(--hy-read,0%);
    background:linear-gradient(180deg,var(--brand),var(--brand-lt));
    transition:height .12s linear}

  /* Notes hang off the outer face of the spine, set flush against it: the
     straight edge faces the article, the ragged edge faces the page. That is
     what makes them read as annotation rather than as a stray column.

     Set as bare text, though, a note out there reads as a paragraph that fell
     off the article and landed against the window — nothing tells the eye
     where it begins or what it is attached to. So it sits on a panel that is
     invisible at the page edge and firms up as it reaches the spine, closed by
     a brand hairline on the inner face. The tint is barely a tint: enough to
     give the ragged edge something to sit on, not enough to turn the gutter
     into a second column of boxes.

     One measure of white space above it, not two: the note's own padding does
     the work, so the top margin only has to carry it down to the first line of
     the paragraph it belongs to. */
  .hy-col .sn{
    position:relative;float:left;clear:left;width:var(--hy-note);
    margin:4px 40px 30px calc(var(--hy-gutter) * -1);
    padding:11px 15px 13px 15px;
    text-align:right;border-top:0;
    font-size:14px;line-height:1.6;color:var(--ink-2);
    border-radius:14px 3px 3px 14px;
    background:linear-gradient(95deg,
      var(--note-zero) 0%,
      var(--note-soft) 46%,
      var(--note-strong) 100%);
    box-shadow:inset -2px 0 0 var(--note-edge);
  }
  /* Balanced wrapping keeps the ragged edge from producing a one-word last
     line, which is the thing that makes right-aligned text look accidental. */
  .hy-col .sn p{text-wrap:pretty;-webkit-hyphens:none;hyphens:none}

  /* The label gets a short dash on its outer side, so the note announces its
     top edge instead of simply starting. */
  .hy-col .sn h4{display:flex;align-items:center;justify-content:flex-end;gap:8px;
    margin-bottom:8px;font-size:10px;letter-spacing:.13em}
  .hy-col .sn h4::before{content:"";flex:0 0 auto;width:13px;height:2px;border-radius:2px;
    background:currentColor;opacity:.5}

  .hy-col .sn::after{content:"";position:absolute;right:calc(var(--hy-tie) * -1);top:16px;
    width:var(--hy-tie);height:2px;border-radius:2px;background:var(--brand)}
  .hy-col .sn.num::after{background:linear-gradient(90deg,var(--brand),var(--c-julkkis))}
  .hy-col .sn.link::after{background:var(--c-sarjat)}
  .hy-col .sn.num{box-shadow:inset -2px 0 0 var(--note-edge-num)}
  .hy-col .sn.link{box-shadow:inset -2px 0 0 var(--note-edge-link)}
  .hy-col .sn.pic{padding-top:13px}
  .hy-col .sn.pic .ph{margin-bottom:11px;border-radius:10px}

  /* A margin note belongs to the passage beside it, so it is present for that
     passage and no longer. It rises out of the margin as the reader arrives,
     and stands down once they have read past — the gutter is never carrying
     an annotation for text that is no longer on screen.

     Two transitions, not one: the .is-in rule times the arrival, the base rule
     times the departure. Coming in is unhurried and eased; going out is quick,
     because nobody wants to watch something they have finished with leave. */
  .hy-col .sn{opacity:0;transform:translate(-10px,12px);filter:blur(2px);
    transition:opacity .26s ease,transform .26s ease,filter .26s ease}
  .hy-col .sn.is-in{opacity:1;transform:none;filter:none;
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1),
      filter .6s cubic-bezier(.22,.61,.36,1)}

  /* The tick reaches out to the spine, and a dot lands where it meets it. */
  .hy-col .sn::after{transform:scaleX(0);transform-origin:left center;
    transition:transform .2s ease}
  .hy-col .sn.is-in::after{transform:scaleX(1);
    transition:transform .5s .12s cubic-bezier(.22,.61,.36,1)}
  .hy-col .sn::before{content:"";position:absolute;top:13px;
    right:calc(var(--hy-tie) * -1 - 3px);width:7px;height:7px;border-radius:50%;
    background:var(--brand);transform:scale(0);transition:transform .18s ease}
  .hy-col .sn.is-in::before{transform:scale(1);
    transition:transform .42s .3s cubic-bezier(.34,1.56,.64,1)}
  .hy-col .sn.num::before{background:var(--c-julkkis)}
  .hy-col .sn.link::before{background:var(--c-sarjat)}

  /* Nothing here is load-bearing, so anyone who has asked for less motion
     simply gets the finished state. */
  @media(prefers-reduced-motion:reduce){
    .hy-col .sn,.hy-col .sn::after,.hy-col .sn::before{
      opacity:1;transform:none;filter:none;transition:none}
  }
}

/* --- once the third zone stops fitting, the notes come inline ------------ */
@media(max-width:1240px){
  /* The gutter is gone, so the column would run to the full width and take the
     measure with it — eight hundred and sixty pixels of line is a wall at this
     size. The measure comes down instead of breaking, and the spare width is
     simply left where the notes used to be: one edge, one width, as above. */
  .hy-wrap{--hy-measure:680px}
  .hy-col,.hy-foot{padding-left:0;max-width:var(--hy-measure)}
  /* Inline, a note has to look deliberate rather than dropped in, so it takes
     a tinted panel instead of the hairline it hangs from in the margin. */
  .hy-col .sn{float:none;clear:none;width:auto;text-align:left;
    margin:28px 0;padding:16px 20px;border-top:0;
    border-left:3px solid var(--brand);border-radius:0 12px 12px 0;background:var(--band)}
  .hy-col .sn.num{border-left-color:var(--c-julkkis)}
  .hy-col .sn.link{border-left-color:var(--c-sarjat)}
  .hy-col .sn.pic{padding-top:16px}

  /* --- the note writes itself in ---------------------------------------
     In the gutter a note appears as the reader arrives at its passage and
     stands down once they have read past — the thing that makes it read as an
     annotation and not as furniture. There is no gutter here, so the same idea
     has to be carried by the note itself, and it cannot be carried by height:
     a block that grows and shrinks under the reader's thumb moves the very
     line they are on.

     So the note is always exactly the same size, and it composes itself in
     place. The rule runs down the side first, the label follows it in, then
     the text comes into focus — a beat apart, in that order, because that is
     the order someone writing it would produce it. Read past, the text steps
     back but a short length of rule stays behind: the page never forgets a
     note was there.

     The live look is the default, so a reader with no script, or one who has
     asked for less motion, simply gets every note in full. Only the two
     stepped-back states are ever added. */
  .hy-col .sn:not(.pcard){position:relative;border-left:0;padding-left:19px;
    background:linear-gradient(90deg,var(--note-soft-b),transparent 72%);
    transition:background .5s ease}
  .hy-col .sn:not(.pcard)::before{content:"";position:absolute;left:0;top:0;bottom:0;
    width:3px;border-radius:3px;background:var(--line)}
  .hy-col .sn:not(.pcard)::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;
    border-radius:3px;background:var(--brand);
    transition:height .6s cubic-bezier(.22,.9,.3,1)}
  .hy-col .sn.num:not(.pcard)::after{background:var(--c-julkkis)}
  .hy-col .sn.link:not(.pcard)::after{background:var(--c-sarjat)}

  .hy-col .sn:not(.pcard) h4{color:var(--brand);opacity:1;transform:none;
    transition:opacity .45s ease .1s,transform .45s cubic-bezier(.22,.9,.3,1) .1s,color .45s ease}
  .hy-col .sn.num:not(.pcard) h4{color:var(--c-julkkis)}
  .hy-col .sn:not(.pcard)>*:not(h4){opacity:1;filter:none;transform:none;
    transition:opacity .5s ease .22s,filter .5s ease .22s,
      transform .5s cubic-bezier(.22,.9,.3,1) .22s}

  /* not reached yet: nothing has been drawn */
  .hy-col .sn.is-ahead:not(.pcard){background:none}
  .hy-col .sn.is-ahead:not(.pcard)::after{height:0}
  .hy-col .sn.is-ahead:not(.pcard) h4{color:var(--muted);opacity:.55;transform:translateX(-6px)}
  .hy-col .sn.is-ahead:not(.pcard)>*:not(h4){opacity:.28;filter:blur(1px);transform:translateY(4px)}

  /* read past: the text steps back, the rule leaves its trace */
  .hy-col .sn.is-spent:not(.pcard){background:none}
  .hy-col .sn.is-spent:not(.pcard)::after{height:26%}
  .hy-col .sn.is-spent:not(.pcard)>*:not(h4){opacity:.34;filter:blur(.4px)}

  @media(prefers-reduced-motion:reduce){
    .hy-col .sn:not(.pcard),
    .hy-col .sn:not(.pcard)::after,
    .hy-col .sn:not(.pcard) h4,
    .hy-col .sn:not(.pcard)>*:not(h4),
    .hy-col .sn.pcard h4,
    .hy-col .sn.pcard>*:not(h4){transition:none}
  }

  /* A profile is mostly a face and four short facts. Stacked into a column
     the width of the article it becomes a tall strip of white space, so
     without a gutter to stand in it lies down instead: portrait to the left,
     the facts along one line. Same markup, placed rather than reordered —
     and dressed the way the card dresses in the gutter, which is what the
     publisher chose over the flat band it wore before: the tinted panel of
     the wide card, the ring portrait, the kicker's dash, and the hairline
     doing its one job above the facts. */
  .hy-col .sn.pcard{display:grid;grid-template-columns:106px minmax(0,1fr);
    column-gap:20px;align-items:start;padding:20px 20px 17px;
    border:1px solid var(--line);border-left:3px solid var(--brand);
    border-radius:0 18px 18px 0;
    background:linear-gradient(118deg,var(--card) 0%,rgba(var(--brand-rgb),.035) 58%,rgba(var(--brand-rgb),.08) 100%);
    box-shadow:0 1px 2px rgba(14,14,18,.05)}
  .hy-col .sn.pcard>*{grid-column:2}
  .hy-col .sn.pcard>.pcard-ph{grid-column:1;grid-row:1 / span 6;width:106px;margin:0;align-self:center}
  .hy-col .sn.pcard h4{display:flex;align-items:center;gap:8px}
  .hy-col .sn.pcard h4::before{content:"";flex:0 0 auto;width:13px;height:2px;
    border-radius:2px;background:var(--brand)}
  .hy-col .sn.pcard .pcard-name{font-size:20px}
  .hy-col .sn.pcard .pcard-facts{display:flex;flex-wrap:wrap;gap:11px 24px;
    border-top:1px solid var(--line);padding-top:11px;margin-top:12px}
  .hy-col .sn.pcard .pcard-facts div+div{margin-top:0}
  .hy-col .sn.pcard .pcard-facts dt{font-size:10px}
  .hy-col .sn.pcard .pcard-facts dd{font-size:14.5px;font-weight:700}

  /* And it keeps the column's habit: full while its passage — the opening —
     is under the reader, stepped back once they have read on, forward again
     the moment they return. Presence is carried by opacity alone; the grid,
     the portrait and the card's own rule never move, so the line under the
     reader's thumb stays put. */
  .hy-col .sn.pcard h4{transition:opacity .45s ease .1s,color .45s ease}
  .hy-col .sn.pcard>*:not(h4){transition:opacity .5s ease .22s,filter .5s ease .22s}
  .hy-col .sn.pcard.is-ahead h4{color:var(--muted);opacity:.55}
  .hy-col .sn.pcard.is-ahead>*:not(h4){opacity:.28;filter:blur(1px)}
  .hy-col .sn.pcard.is-spent>*:not(h4){opacity:.34;filter:blur(.4px)}
}

@media(max-width:980px){
  .hy-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .hy-head,.hy-hero{max-width:var(--hy-measure)}
  /* Below the article the rail is just content again: no pinning, no window
     cap, no inner scroll, and no shadow gutter to pay back. */
  .hy-grid .rail{position:static;margin-top:36px;max-height:none;
    overflow:visible;padding:0;margin-left:0;margin-right:0}
  .hy-head{padding-top:22px}
}

/* --- the whole picture, on a phone ----------------------------------------
   A 16:9 frame crops whatever it is given, and on a wide screen that is the
   right trade: the crop is shallow and the frame keeps every article opening
   the same shape. On a phone the frame is a third of the width and the same
   crop throws away most of the picture — a title graphic loses its title, a
   portrait loses the face. So on a phone the frame gives way and the image is
   shown at whatever proportion it was made in.

   Only when there is one: .has-img is set by tahti_thumb() for a real
   photograph. The placeholder art is drawn by an absolutely positioned SVG and
   would collapse to nothing without a ratio to hold it open. */
@media(max-width:700px){
  .hy-hero .ph.has-img{aspect-ratio:auto;max-height:none}
  .hy-hero .ph.has-img img{position:static;width:100%;aspect-ratio:auto;max-height:none;
    height:auto;object-fit:contain}
}

@media(max-width:600px){
  .hy-stand{font-size:17px}
  .hy-col .prose{font-size:17.5px}
  .hy-col .prose>p.first::first-letter{font-size:58px}
}

/* --- the polish ----------------------------------------------------------
   Everything below is scoped to .hy-wrap. The components are shared with the
   other four styles, and a change made here must not follow them there. */

/* Each section opens under a short brand rule — the one piece of furniture
   that says "long read" before a word is read. */
.hy-wrap .prose h2{position:relative;padding-top:22px;margin-top:2.3em}
.hy-wrap .prose h2:first-child{margin-top:0}
.hy-wrap .prose h2::before{content:"";position:absolute;left:0;top:0;width:40px;height:3px;
  border-radius:3px;background:var(--brand)}

/* The opening paragraph carries the drop cap, so it is set a shade larger and
   tighter than the rest — the reader should feel the article begin. */
.hy-wrap .prose>p.first{font-size:19.5px;line-height:1.62;color:#16161E}
.hy-col .prose>p.first::first-letter{float:left;font-size:74px;line-height:.82;font-weight:900;
  padding:6px 12px 0 0;color:var(--brand)}

/* Cards lift off the page instead of being drawn onto it. */
.hy-wrap .qcard,.hy-wrap .mod,.hy-wrap .step,.hy-wrap .fp,.hy-wrap .faq details,
.hy-wrap .fn>div,.hy-wrap .kp{
  box-shadow:0 1px 2px rgba(16,20,24,.03),0 10px 26px rgba(16,20,24,.05)}
.hy-wrap .step{transition:transform .18s ease,box-shadow .18s ease}
.hy-wrap .step:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(16,20,24,.05),0 16px 34px rgba(16,20,24,.08)}

.hy-rail .rail-box,.hy-rail .toc{border-radius:14px;
  box-shadow:0 1px 2px rgba(16,20,24,.03),0 8px 22px rgba(16,20,24,.05)}
.hy-rail .ad-rail{border-radius:14px}

/* --- contents, in the rail ----------------------------------------------- */
/*
 * The contents list shares its rail with the popular-stories card, and it was
 * losing: that card opens with a banded heading and a red badge, this one
 * opened with a 10.5px muted whisper — so the eye landed on the card that
 * takes a reader out of the article instead of the one that keeps them in it.
 * It speaks the same header language now: band, hairline, badge. And it has
 * the one thing the other card cannot have — it knows where the reader is.
 */
.toc{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:0 4px 8px;
  margin-bottom:26px;overflow:hidden;box-shadow:var(--sh)}
/*
 * Room between the picture and whatever the reading column opens with.
 *
 * The hero image carries no bottom margin and none of the blocks that can
 * come first carried a top one, so the first of them was welded to the bottom
 * edge of the picture. With the contents list that is at its worst: a filled,
 * bordered band flush against a filled, rounded image reads as one shape that
 * has gone wrong, rather than two things in sequence.
 *
 * Written for the column's first child rather than for the list, because
 * which block comes first depends on the story — key points, the contents
 * list, a profile card, or the prose itself — and every one of them was
 * touching the picture. Only the narrow layout: above the breakpoint the
 * script lifts the list into the rail and the column opens differently.
 */
@media(max-width:980px){
  .hy-col>*:first-child{margin-top:26px}
}
.toc .toc-h{display:flex;align-items:center;gap:9px;margin:0 -4px 0;padding:13px 16px;
  font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  /* One step deeper than the brand: 11px capitals on the tinted end of this
     band need 4.5:1, and the brand itself sits at 4.2 there. The dark table
     swaps in the lifted twin instead. */
  color:var(--brand-dk);
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.08),rgba(var(--brand-rgb),.02))}
.toc .toc-h::before{content:"";flex:0 0 auto;width:14px;height:2px;border-radius:2px;
  background:var(--brand)}
.toc .toc-c{margin-left:auto;background:var(--brand);color:#fff;font-size:10.5px;
  font-weight:900;padding:2px 8px;border-radius:99px;letter-spacing:.02em}

/* The reading line: filled by the same script that keeps the current section
   lit. Scripts off, it stays empty and reads as a rule under the band. */
.toc .toc-bar{height:3px;margin:0 -4px 8px;background:var(--line-soft);overflow:hidden}
.toc .toc-bar i{display:block;height:100%;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--brand),var(--c-julkkis));transition:width .25s ease}

/* Sections already read step back; their numbers keep the brand so the list
   reads as done / here / still to come at a glance. */
.toc a.is-past{color:var(--muted)}
.toc a.is-past .toc-n{color:var(--brand-ink)}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:start;
  padding:8px 14px;font-size:13.5px;line-height:1.42;font-weight:700;color:var(--ink);
  border-left:2px solid transparent;transition:color .16s,border-color .16s,background .16s}
.toc a:hover{background:rgba(var(--brand-rgb),.035);color:var(--brand)}
.toc .toc-n{font-size:11px;font-weight:900;color:var(--muted);padding-top:2px}
.toc a.is-here{border-left-color:var(--brand);color:var(--brand-ink);background:rgba(var(--brand-rgb),.045)}
.toc a.is-here .toc-n{color:var(--brand-ink)}


/* On a phone the list is, by default, exactly what it is everywhere else —
   the band, the count, the bar and a plain single-column list at the head
   of the article. The fold below is the publisher's to switch on (theme
   panel → Layout, off by default): it prints toc-fold on the list, the
   band becomes the control with a chevron that says so, and tapping an
   entry closes the list again. No class, no fold — ever. */
@media(max-width:980px){
  .toc.toc-fold .toc-h{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .toc.toc-fold .toc-h::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-left:auto;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
  .toc.toc-fold .toc-c{margin-left:12px}
  .toc.toc-fold.is-open .toc-h::after{transform:rotate(-135deg) translateY(-2px)}
  .toc.toc-fold:not(.is-open){padding-bottom:0}
  .toc.toc-fold:not(.is-open) .toc-bar{margin-bottom:0}
  .toc.toc-fold:not(.is-open) ol{display:none}
}


/* Deep links land under the sticky nav rather than behind it. */
.hy-wrap .prose h2[id]{scroll-margin-top:92px}
#tahti-toc{scroll-margin-top:100px}

/* --- the return control --------------------------------------------------
   One button, two jobs. Scrolled down under its own steam, it goes to the top.
   Arrived by clicking a contents entry, it goes back to that entry — and says
   so, because a control that quietly changes what it does is worse than one
   that never changed at all. */
.tahti-up{position:fixed;right:26px;bottom:26px;z-index:70;
  display:flex;align-items:center;gap:0;
  height:52px;padding:0;border:0;border-radius:26px;cursor:pointer;
  /* The arrow is the colour of the page, not white. This pill is drawn in
     --ink, and --ink is near-white at night — which made a white arrow on a
     white button. Both are rgb(255,255,255) in light, so nothing moves there. */
  background:var(--ink);color:var(--bg);
  box-shadow:0 4px 10px rgba(16,20,24,.16),0 14px 34px rgba(16,20,24,.20);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1),
    background .2s ease,box-shadow .2s ease}
.tahti-up.is-on{opacity:1;transform:none;pointer-events:auto}
/* Ink means "up", brand means "back to where you were".
   The control does two different jobs and the reader has to be able to tell
   which one it is holding without reading the label — so the mode is a colour,
   not just an icon and a word. It goes red the moment an entry is picked out of
   the contents list, and back to ink the moment it has taken them there. */
.tahti-up:hover{background:#26262F;
  box-shadow:0 6px 14px rgba(16,20,24,.22),0 18px 42px rgba(16,20,24,.26)}

/* In contents mode the pill is brand red in both schemes, not --ink, so the
   label goes back to white: the page colour is right for the ink pill and
   wrong for this one. */
.tahti-up.to-toc{background:var(--brand);color:#fff;
  box-shadow:0 4px 10px rgba(var(--brand-rgb),.26),0 14px 34px rgba(var(--brand-rgb),.30)}
.tahti-up.to-toc:hover{background:var(--brand-dk);
  box-shadow:0 6px 14px rgba(var(--brand-rgb),.34),0 18px 42px rgba(var(--brand-rgb),.38)}
.tahti-up:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.tahti-up:active{transform:scale(.95)}

.tahti-up-ico{display:grid;place-items:center;width:52px;height:52px;flex:none}
.tahti-up-ico svg{grid-area:1/1;width:21px;height:21px;
  transition:opacity .22s ease,transform .22s ease}
.tahti-up .ico-toc{opacity:0;transform:scale(.6) rotate(-12deg)}
.tahti-up.to-toc .ico-top{opacity:0;transform:scale(.6) rotate(12deg)}
.tahti-up.to-toc .ico-toc{opacity:1;transform:none}

/* The label only exists in contents mode, and slides out of the circle. */
.tahti-up-txt{max-width:0;overflow:hidden;white-space:nowrap;
  font-size:13px;font-weight:800;letter-spacing:.01em;opacity:0;
  transition:max-width .3s cubic-bezier(.22,.61,.36,1),opacity .22s ease,
    padding-right .3s cubic-bezier(.22,.61,.36,1)}
.tahti-up.to-toc .tahti-up-txt{max-width:170px;opacity:1;padding-right:20px}

@media(max-width:600px){
  .tahti-up{right:16px;bottom:16px;height:46px}
  .tahti-up-ico{width:46px;height:46px}
  .tahti-up.to-toc .tahti-up-txt{max-width:130px;padding-right:16px}
}

@media(prefers-reduced-motion:reduce){
  .tahti-up,.tahti-up-ico svg,.tahti-up-txt{transition:none}
}

/* --- landing on a section ------------------------------------------------
   Scrolled to rather than jumped to, a heading still needs to identify itself
   when the movement stops — otherwise the reader has to work out which of the
   things now on screen they asked for. A halo that fades is enough. */
.hy-wrap .prose h2{border-radius:8px}
.hy-wrap .prose h2:focus{outline:none}
.hy-wrap .prose h2.is-target{animation:tahti-land 1.9s ease forwards}

@keyframes tahti-land{
  0%,22%{background:rgba(var(--brand-rgb),.10);box-shadow:0 0 0 12px rgba(var(--brand-rgb),.10)}
  100%{background:transparent;box-shadow:0 0 0 12px rgba(var(--brand-rgb),0)}
}

@media(prefers-reduced-motion:reduce){
  .hy-wrap .prose h2.is-target{animation:none;background:rgba(var(--brand-rgb),.10)}
}

/* --- the admin bar owns the top 32 pixels --------------------------------
   Everything the theme sticks to top:0 is, for a logged-in editor, stuck
   behind the WordPress admin bar instead. The nav shows three pixels of its
   own underline and nothing else, which reads as a missing header rather than
   an overlap. WordPress publishes the heights; use them. */
.admin-bar .mainnav{top:32px}
.admin-bar .hy-grid .rail{top:120px;max-height:calc(100vh - 136px)}
.admin-bar .hy-wrap .prose h2[id]{scroll-margin-top:124px}
.admin-bar #tahti-toc{scroll-margin-top:132px}

@media screen and (max-width:782px){
  .admin-bar .mainnav{top:46px}
  .admin-bar .hy-prog{top:46px}
  .admin-bar .hy-grid .rail{top:134px}
  .admin-bar .hy-wrap .prose h2[id]{scroll-margin-top:138px}
  .admin-bar #tahti-toc{scroll-margin-top:146px}
}

/* Below 600px WordPress unpins its own bar, so nothing needs the offset. */
@media screen and (max-width:600px){
  .admin-bar .mainnav,.admin-bar .hy-prog{top:0}
}

/* ==========================================================================
   13. PROFILE CARD — the person the story is about
   ==========================================================================
   Two shapes, one card. In the gutter of style H it is a margin note with a
   face on it, right-aligned against the spine like every other note. In the
   styles that have no gutter it lies down: portrait left, facts in a row,
   under the story where a reader has finished and is deciding where to go
   next. Both are built from the same markup, so the writer never chooses. */

.pcards{display:grid;gap:14px;margin:36px 0 0}

.pcard h4{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin:0 0 6px}
.pcard-name{margin:0;font-size:21px;font-weight:900;letter-spacing:-.03em;line-height:1.16;color:var(--ink)}
.pcard a{text-decoration:none}
.pcard-name a{transition:color .16s ease}
.pcard-name a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.pcard-sub{margin:5px 0 0;font-size:13.5px;font-weight:600;color:var(--muted)}
.pcard-facts{margin:13px 0 0}
.pcard-facts dt{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pcard-facts dd{margin:2px 0 0;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4}
.pcard-more{margin:14px 0 0}
.pcard-more a{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:900;letter-spacing:.01em;color:var(--brand)}
.pcard-more a span{transition:transform .18s ease}
.pcard-more a:hover span{transform:translateX(4px)}

/* --- lying down: every style without a gutter ---------------------------- */
.pcard-wide{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:start;
  padding:18px 20px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(118deg,var(--card) 0%,rgba(var(--brand-rgb),.035) 58%,rgba(var(--brand-rgb),.07) 100%);
  box-shadow:0 1px 2px rgba(14,14,18,.045)}
.pcard-wide .pcard-ph{display:block}
.pcard-wide .pcard-img{border-radius:14px}
.pcard-wide .pcard-facts{display:flex;flex-wrap:wrap;gap:11px 24px}
.pcard-wide .pcard-facts div{min-width:0}

@media(max-width:560px){
  .pcard-wide{grid-template-columns:74px minmax(0,1fr);gap:15px;padding:15px 16px}
  .pcard-name{font-size:19px}
  .pcard-wide .pcard-facts{gap:10px 18px}
}

/* --- standing up: the note in the style H gutter ------------------------- */
/* Round rather than square, and small: at this size a portrait is an
   identifier, not an illustration, and the circle says so without needing a
   caption. The hairline above the facts is the only rule inside a note
   anywhere in the theme — it is doing real work, separating who someone is
   from what is known about them. */
.sn.pcard .pcard-ph{display:block;width:74px;margin:0 0 11px}
.sn.pcard .pcard-img{border-radius:50%;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(var(--brand-rgb),.26)}
.sn.pcard .pcard-name{font-size:17px}
.sn.pcard .pcard-sub{font-size:12.5px;margin-top:3px}
.sn.pcard .pcard-facts{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.sn.pcard .pcard-facts div+div{margin-top:8px}
.sn.pcard .pcard-facts dt{font-size:9.5px}
.sn.pcard .pcard-facts dd{font-size:13px;font-weight:800}
.sn.pcard .pcard-more{margin-top:12px}
.sn.pcard .pcard-more a{font-size:12px}

@media(min-width:1241px){
  .hy-col .sn.pcard{padding-bottom:15px}
  .hy-col .sn.pcard .pcard-ph{margin-left:auto;margin-right:0}
  .hy-col .sn.pcard .pcard-more a{justify-content:flex-end}
}

/* ==========================================================================
   14. STATIC PAGE
   ==========================================================================
   Built on the article shell so the measure and the type match the rest of the
   site, with the furniture a page has no use for taken off: no badge, no
   byline, no share row, no tags. What is added instead is the pair of things a
   policy or an about page is actually read for — when it last changed, and how
   to get back up the tree it hangs from. */

.pg-head{padding:38px 0 10px}
.pg-title{font-size:clamp(30px,4.1vw,46px);font-weight:900;letter-spacing:-.035em;
  line-height:1.05;margin-bottom:14px}
.pg-stand{font-size:20px;line-height:1.52;color:var(--ink-2);font-weight:500;margin-bottom:16px}
.pg-updated{margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pg-hero{margin:0 0 34px}
.pg-hero .ph{border-radius:16px}
.pg .prose{max-width:none}

/* Children of this page, when it is the head of a small tree. */
.pg-kids{margin:44px 0 0;padding-top:26px;border-top:2px solid var(--ink)}
.pg-kids h2{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px}
.pg-kids ul{display:grid;gap:10px}
.pg-kids a{display:block;padding:15px 18px;border:1px solid var(--line);border-radius:13px;
  background:var(--bg);transition:border-color .16s ease,background .16s ease,transform .16s ease}
.pg-kids a:hover{border-color:var(--brand);background:rgba(var(--brand-rgb),.03);transform:translateX(3px)}
.pg-kids a span{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pg-kids a em{display:block;margin-top:4px;font-style:normal;font-size:14px;line-height:1.5;color:var(--muted)}

.pg-up{margin:34px 0 0}
.pg-up a{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:900;color:var(--brand)}
.pg-up a span{transition:transform .18s ease}
.pg-up a:hover span{transform:translateX(-4px)}

@media(max-width:640px){
  .pg-head{padding-top:26px}
  .pg-stand{font-size:18px}
}

/* ==========================================================================
   15. ROLE DIRECTORY
   ==========================================================================
   The switcher across the top of a role archive. It carries a count on each
   role because a directory's first question is always "how many", and because
   a role with two people in it should not look like a role with two hundred. */

.rolebar{margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.rolebar ul{display:flex;flex-wrap:wrap;gap:9px}
.rolebar a{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);
  font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.rolebar a span{display:inline-block;min-width:20px;padding:2px 7px;border-radius:999px;
  background:var(--band);font-size:11px;font-weight:900;color:var(--muted);text-align:center}
.rolebar a:hover{border-color:var(--ink);color:var(--ink)}
.rolebar a.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.rolebar a.is-on span{background:var(--on-ink-soft);color:var(--bg)}

@media(max-width:640px){
  .rolebar{margin-bottom:20px;padding-bottom:18px}
  .rolebar ul{gap:7px}
  .rolebar a{padding:8px 13px;font-size:13px}
}

/* ==========================================================================
   16. THE PREMIUM PASS
   ==========================================================================
   Nothing here changes a layout. It is the last five per cent that separates a
   page that works from one that feels made: how a headline breaks, whether
   numbers line up, what a card does when the cursor arrives, and how much air
   sits between one block and the next.

   The single biggest item is the first one. A magazine headline that leaves one
   word alone on its last line reads as an accident on every card it happens to,
   and on a front page of forty headlines it happens constantly. */

.hl,.hl-xxl,.hl-xl,.hl-m,.a-title,.hy-title,.pg-title,.b-title,.d-title,.f-title{
  text-wrap:balance}
.lead-in,.a-stand,.hy-stand,.pg-stand,.f-stand{text-wrap:pretty}

/* Times, comment counts, chart positions and durations all sit in columns.
   Proportional digits make those columns ragged; tabular ones do not. */
.meta,.meta *,.rank b,.toplist .rk,.mv,.pcard-facts dd,.foot-pub dd,
.tl-time,.cmt,.stat b,.dnum b,.tiles b{font-variant-numeric:tabular-nums}

/* --- depth ---------------------------------------------------------------
   There used to be a lift-and-shadow here. It is gone on purpose: the hover
   is the image easing inside its frame (see smooth cards), which reads as
   intent rather than furniture coming off the wall. */

/* A hairline inside every image slot. The placeholder art is flat colour, and
   flat colour against white reads as a hole in the page rather than a picture
   in a frame; the same line keeps a real photograph off the background. */
.ph{box-shadow:inset 0 0 0 1px rgba(14,14,18,.07)}
.excl .ph,.footer .ph{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}

/* --- the list rows -------------------------------------------------------- */
/* The wash on hover was doing all the work on its own. A rule that grows in
   from the left gives the row an edge to move towards, and costs no layout. */
.rows a,.compact a,.pop a,.latest a,.minitop a{position:relative}
.rows a::before,.compact a::before,.pop a::before,.latest a::before,.minitop a::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:var(--brand);transform:scaleY(0);transform-origin:center;
  transition:transform .22s var(--ease)}
.rows a:hover::before,.compact a:hover::before,.pop a:hover::before,
.latest a:hover::before,.minitop a:hover::before{transform:scaleY(1)}

/* --- the rail ------------------------------------------------------------- */
.rank a{transition:background .18s ease}
.rank b{letter-spacing:-.05em}

/* --- section headings ----------------------------------------------------- */
/* The accent segment tapers instead of stopping dead, which is the difference
   between a rule that was drawn and one that was cut. */
.sec-head::after{height:2px}
.sec-head h2{letter-spacing:-.02em}

/* --- advertising slots ---------------------------------------------------- */
/* These are empty by definition. Made quiet and deliberate they read as
   reserved space; left as solid grey boxes they read as something failing. */
.ad{background:transparent;border-color:var(--line-soft)}
.ad span,.ad b{color:#B4B4BE;letter-spacing:.14em}

/* --- rhythm --------------------------------------------------------------- */
/* Premium is mostly air. One notch more between blocks, and a wider gap where
   the page changes subject. */
.sec{margin-bottom:40px}
.band{padding:44px 0}

/* --- the small print ------------------------------------------------------ */
::selection{background:rgba(var(--brand-rgb),.22)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.hero .ph,.hero-main .ph{box-shadow:inset 0 0 0 1px rgba(14,14,18,.07),
  0 14px 34px rgba(14,14,18,.10)}

@media(max-width:760px){
  .sec{margin-bottom:30px}
  .band{padding:32px 0}
}

@media (prefers-reduced-motion:reduce){
}

/* ===== BEGIN generated: dark scheme + phone header ===== */
/* ==========================================================================
   DARK

   Not a second stylesheet. Every colour in this theme already comes from a
   custom property, so the dark scheme is the same page read off a different
   table of values — the layout, the spacing and the type are untouched, which
   is what makes it a switch rather than a rebuild.

   The table is written twice because it has to answer two questions:

     [data-theme="dark"]                 the reader, or the editor, chose dark
     @media (prefers-color-scheme:dark)  the reader's device is dark and this
       html:not([data-theme])            site was told to follow it

   The :not() matters. A site set to "always light" prints data-theme="light"
   on the html element, so the media query cannot reach it; a site set to
   follow the device prints no attribute at all, so it can. That is the whole
   mechanism, and no script is involved — which is why a reader on a dark
   phone never sees a white frame first.

   Both copies come out of one source and are compared by test-dark.php.
   ========================================================================== */
[data-theme="dark"]{
  /* Not neutral grey. The light theme has a face — hot pink, violet, crisp
     white — and a dark scheme built out of pure greys throws that away and
     comes back looking like every other dark scheme. Every step below carries
     a little violet, the same family the brand and the celebrity accent come
     from, so the page reads as this magazine at night rather than as the
     absence of one. */
  --bg:#0C0B12; --card:#17151F; --card-2:#1D1B27;
  --band:#23202F; --band-2:#2C2839;
  --line:#332F42; --line-soft:#26232F;
  --glass:rgba(12,11,18,.92);

  /* Warm white rather than white. Pure #FFF on near-black glares; a trace of
     the same violet takes the edge off without reading as grey. */
  --ink:#F5F3F9; --ink-2:#CFCBDC; --muted:#9A94AC;
  --link:#8FB2FF;

  /* The people pages, inverted. The structural ink becomes the warm white the
     rest of the dark scheme uses; the readable brand becomes the same lifted
     pink the In brief card's links were measured at. */
  --ink-deep:#F2EFF7; --brand-read:#FF5C8A; --surface:#1D1B27; --hair:#332F42;

  /* Ink, not paint. Every accent keeps its full strength as a background, a
     rule or a dot; only where it has to be read as words does it move to the
     lighter twin declared beside it in :root. */
  --brand-ink:var(--brand-lt);

  /* The margin note's wash, lifted. Same three stops, same direction, same
     rule on the outer edge — a note that gathers towards the column it belongs
     to. Five per cent of the raw brand over near-black is invisible and the
     edge at 22% is a rumour, so both climb. */
  --on-ink-soft:rgba(0,0,0,.20);
  --note-zero:rgba(255,61,116,0);
  --note-soft:rgba(255,61,116,.07);
  --note-soft-b:rgba(255,61,116,.08);
  --note-strong:rgba(255,61,116,.19);
  --note-edge:rgba(255,61,116,.6);
  --note-edge-num:rgba(192,139,240,.62);
  --note-edge-link:rgba(127,180,247,.62);
  --c-julkkis:var(--c-julkkis-lt); --c-sarjat:var(--c-sarjat-lt);
  --c-elokuvat:var(--c-elokuvat-lt); --c-musiikki:var(--c-musiikki-lt);
  --c-royal:var(--c-royal-lt);

  /* Shadow is light in a light room and the absence of it in a dark one. */
  --sh:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.42);
  --sh-h:0 3px 12px rgba(0,0,0,.55),0 18px 44px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* The link wash is six percent of the brand over white; over the dark card
/* that mix dries to mud, so it is remixed from the lifted brand. The ink
/* text and the gradient rule already follow the dark table. */
[data-theme="dark"] .prose a{background-color:rgba(255,61,116,.10)}

/* The hover warms the words with the lifted brand, and the wash steps up a
/* shade instead of two. */
[data-theme="dark"] .prose a:hover{color:var(--brand-lt);background-color:rgba(255,61,116,.18)}

/* The category pills: every tint that was mixed over white thickens over
/* near-black, or it disappears. Text colours lift on their own through the
/* accent table. */
[data-theme="dark"] .kicker{background:rgba(255,61,116,.13);border-color:rgba(255,61,116,.40)}
[data-theme="dark"] .kicker.blue{background:rgba(199,154,30,.14);border-color:rgba(199,154,30,.45)}

/* The per-accent pills carry !important in daylight, so the night rules must
/* speak as loudly to be heard at all. */
[data-theme="dark"] .k-viihde{color:var(--brand-lt)!important;background:rgba(255,61,116,.13)!important;border-color:rgba(255,61,116,.40)!important}
[data-theme="dark"] .k-sarjat{color:var(--c-sarjat)!important;background:rgba(11,111,232,.16)!important;border-color:rgba(11,111,232,.45)!important}
[data-theme="dark"] .k-elokuvat{color:var(--c-elokuvat)!important;background:rgba(242,101,34,.15)!important;border-color:rgba(242,101,34,.45)!important}
[data-theme="dark"] .k-julkkis{color:var(--c-julkkis)!important;background:rgba(139,43,226,.16)!important;border-color:rgba(139,43,226,.48)!important}
[data-theme="dark"] .k-musiikki{color:var(--c-musiikki)!important;background:rgba(0,164,106,.15)!important;border-color:rgba(0,164,106,.45)!important}
[data-theme="dark"] .k-royal{color:var(--c-royal)!important;background:rgba(199,154,30,.14)!important;border-color:rgba(199,154,30,.45)!important}

/* The footer is the darkest thing on a light page, drawn in --ink. Dark
/* inverts --ink to near-white, which would make the footer the brightest
/* band on the page. It steps down from the article rather than up, and keeps
/* its own value to do it. */
[data-theme="dark"] .footer{background:#08080B}

/* Both were written as literal white on a dark band, and stay legible
/* against the darker one. */
[data-theme="dark"] .footer .logo b,
[data-theme="dark"] .footer .foot-follow h2{color:#F2F2F5}

/* Yellow on near-black is the one pairing in the palette that gets louder
/* rather than quieter when the page goes dark, so the badge keeps its dark
/* ink. */
[data-theme="dark"] .flash{color:#0E0E12}

/* The inset hairline was a dark line drawn on a light page. */
[data-theme="dark"] .hero .ph,
[data-theme="dark"] .hero-main .ph{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.5)}
[data-theme="dark"] .search input::placeholder{color:#7A7C88}

/* A reserved slot should read as deliberate rather than as something
/* failing, at either brightness. */
[data-theme="dark"] .ad span,
[data-theme="dark"] .ad b{color:#5C5D68}

/* A tint that reads on white disappears on black. */
[data-theme="dark"] ::selection{background:rgba(var(--brand-rgb),.35)}

/* Pictures carry their own light. Taking a little off stops a
/* white-background press photograph from being the brightest thing on a page
/* somebody opened because it was dark. */
[data-theme="dark"] img,
[data-theme="dark"] video{filter:brightness(.94)}

/* A highlighter works on paper because the words under it stay dark. On a
/* dark page they are light, and yellow behind light letters is the one thing
/* on the screen nobody can read — and yellow at low alpha over near-black is
/* not yellow at all, it composites to #41370E, which is olive. So at night
/* the mark stops being a wash and becomes what it would be if you drew it
/* with the same pen on black paper: a bright rule under words that stay
/* light. */
[data-theme="dark"] .prose mark{background:none;color:inherit;box-shadow:inset 0 -.30em 0 rgba(255,214,64,.85);padding:0 2px;border-radius:2px}
[data-theme="dark"] .prose mark.pink{box-shadow:inset 0 -.30em 0 rgba(255,61,116,.75)}
[data-theme="dark"] .prose mark.blue{box-shadow:inset 0 -.30em 0 rgba(127,180,247,.72)}

/* The body of every article was a fixed near-black, #1D1D26 — deliberately a
/* shade softer than the headline ink, which is right, and fatal at night:
/* 1.15:1, text the colour of the paper. This is the same relationship read
/* the other way round, a shade softer than the light ink rather than a shade
/* harder than the dark page. */
[data-theme="dark"] .prose{color:#E7E4EE}

/* The opening paragraph leads, so it keeps its extra weight. */
[data-theme="dark"] .hy-wrap .prose>p.first{color:#F4F1F9}
[data-theme="dark"] .hy-stand{color:#CFCBDC}

/* Written with the same :not(body) the light rule uses, because that is what
/* it has to outweigh. */
[data-theme="dark"] .search:not(body) input::placeholder{color:#7A7C88}
[data-theme="dark"] .meta .dot{background:#3B3748}
[data-theme="dark"] .crumbs .sep{color:#4B4658}

/* Every tinted panel in the theme is a few per cent of a colour over white,
/* which on white is a clean pastel and over near-black is a smear: the fact
/* box came out #180D15, a brown nobody chose. The panels keep their coloured
/* rule, which is what identified them anyway, and sit on a surface instead
/* of in a stain. */
[data-theme="dark"] .fbox{background:var(--card)}
[data-theme="dark"] .kp,
[data-theme="dark"] .facts h3,
[data-theme="dark"] .fp h4{background:var(--card)}

/* The quote keeps a wash, because a wash is the whole idea of it — but mixed
/* from the lifted twin and at a strength that survives being put on black. */
[data-theme="dark"] .qcard,
[data-theme="dark"] .fq{background:linear-gradient(135deg,rgba(255,61,116,.10),var(--card));border-color:rgba(192,139,240,.26)}

/* The three note panels, each in its own colour, all lifted the same way:
/* the twin at a tenth rather than the raw accent at a sixteenth. */
[data-theme="dark"] .mod.info{background:rgba(127,180,247,.10);border-color:rgba(127,180,247,.26)}
[data-theme="dark"] .mod.warn{background:rgba(255,164,112,.10);border-color:rgba(255,164,112,.26)}
[data-theme="dark"] .mod.key{background:rgba(74,219,165,.09);border-color:rgba(74,219,165,.24)}
[data-theme="dark"] .rail-box h2{background:linear-gradient(90deg,rgba(255,61,116,.16),rgba(255,61,116,.04))}

/* Five per cent of the brand over near-black is #180D15. Twelve per cent of
/* the lifted twin is the tint that rule was drawn to be. */
[data-theme="dark"] .toc a.is-here{background:rgba(255,61,116,.12)}

/* Four profile panels drawn as white fading into the faintest lilac. The
/* fade is the point; only the two ends of it needed to be told which scheme
/* they are in. */
[data-theme="dark"] .profile .stat,
[data-theme="dark"] .sumbar div,
[data-theme="dark"] .pf-season{background:linear-gradient(150deg,var(--card),var(--card-2))}

/* The contents band: eight per cent of the raw brand over a dark card is
/* mud, and --brand-dk was chosen to sit on the light band. Both move to the
/* lifted twin. */
[data-theme="dark"] .toc .toc-h{color:var(--brand-ink);background:linear-gradient(90deg,rgba(255,61,116,.14),rgba(255,61,116,.03))}

/* The pill is drawn in --ink, so at night it is a light pill on a dark page
/* — which is right, and means its hover has to go the other way. The light
/* rule darkens it towards #26262F; here it lightens. */
[data-theme="dark"] .tahti-up:hover{background:#DCD8E6}

/* A rise is green, and #0A8F4D is a green chosen to sit on white. On
/* near-black it is a dark smudge that happens to pass a contrast check — the
/* same lift every other accent got. */
[data-theme="dark"] .mv.up,
[data-theme="dark"] .pf-chip.ok{color:#4ADBA5}

/* Its own value rather than --card-2, because the band was #FCFCFD and the
/* token is #FBFBFD — one step in one channel, invisible, and still a change
/* to a light scheme nobody asked to change. */
[data-theme="dark"] .crumb{background:#14121B}
[data-theme="dark"] .meter{background:linear-gradient(180deg,var(--card-2),var(--card))}
[data-theme="dark"] .comment-respond{background:linear-gradient(180deg,var(--card-2),var(--band))}

/* The empty half of a progress bar: a light groove on a light page, and it
/* has to become a dark one rather than stay a bright stripe. */
[data-theme="dark"] .m-track,
[data-theme="dark"] .yrow .tr,
[data-theme="dark"] .pf-bar{background:var(--band-2)}

/* The switch, showing what it would change to. */
[data-theme="dark"] .th-toggle .disc{transform:scale(.86)}
[data-theme="dark"] .th-toggle .ray{opacity:0;transform:scale(.4)}
[data-theme="dark"] .th-defs .cut{transform:translate(4px,-4px)}

@media (prefers-color-scheme:dark){
  html:not([data-theme]){
  /* Not neutral grey. The light theme has a face — hot pink, violet, crisp
     white — and a dark scheme built out of pure greys throws that away and
     comes back looking like every other dark scheme. Every step below carries
     a little violet, the same family the brand and the celebrity accent come
     from, so the page reads as this magazine at night rather than as the
     absence of one. */
  --bg:#0C0B12; --card:#17151F; --card-2:#1D1B27;
  --band:#23202F; --band-2:#2C2839;
  --line:#332F42; --line-soft:#26232F;
  --glass:rgba(12,11,18,.92);

  /* Warm white rather than white. Pure #FFF on near-black glares; a trace of
     the same violet takes the edge off without reading as grey. */
  --ink:#F5F3F9; --ink-2:#CFCBDC; --muted:#9A94AC;
  --link:#8FB2FF;

  /* The people pages, inverted. The structural ink becomes the warm white the
     rest of the dark scheme uses; the readable brand becomes the same lifted
     pink the In brief card's links were measured at. */
  --ink-deep:#F2EFF7; --brand-read:#FF5C8A; --surface:#1D1B27; --hair:#332F42;

  /* Ink, not paint. Every accent keeps its full strength as a background, a
     rule or a dot; only where it has to be read as words does it move to the
     lighter twin declared beside it in :root. */
  --brand-ink:var(--brand-lt);

  /* The margin note's wash, lifted. Same three stops, same direction, same
     rule on the outer edge — a note that gathers towards the column it belongs
     to. Five per cent of the raw brand over near-black is invisible and the
     edge at 22% is a rumour, so both climb. */
  --on-ink-soft:rgba(0,0,0,.20);
  --note-zero:rgba(255,61,116,0);
  --note-soft:rgba(255,61,116,.07);
  --note-soft-b:rgba(255,61,116,.08);
  --note-strong:rgba(255,61,116,.19);
  --note-edge:rgba(255,61,116,.6);
  --note-edge-num:rgba(192,139,240,.62);
  --note-edge-link:rgba(127,180,247,.62);
  --c-julkkis:var(--c-julkkis-lt); --c-sarjat:var(--c-sarjat-lt);
  --c-elokuvat:var(--c-elokuvat-lt); --c-musiikki:var(--c-musiikki-lt);
  --c-royal:var(--c-royal-lt);

  /* Shadow is light in a light room and the absence of it in a dark one. */
  --sh:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.42);
  --sh-h:0 3px 12px rgba(0,0,0,.55),0 18px 44px rgba(0,0,0,.5);
  color-scheme:dark;
}

  /* The link wash is six percent of the brand over white; over the dark card
  /* that mix dries to mud, so it is remixed from the lifted brand. The ink
  /* text and the gradient rule already follow the dark table. */
    html:not([data-theme]) .prose a{background-color:rgba(255,61,116,.10)}

  /* The hover warms the words with the lifted brand, and the wash steps up a
  /* shade instead of two. */
    html:not([data-theme]) .prose a:hover{color:var(--brand-lt);background-color:rgba(255,61,116,.18)}

  /* The category pills: every tint that was mixed over white thickens over
  /* near-black, or it disappears. Text colours lift on their own through the
  /* accent table. */
    html:not([data-theme]) .kicker{background:rgba(255,61,116,.13);border-color:rgba(255,61,116,.40)}
    html:not([data-theme]) .kicker.blue{background:rgba(199,154,30,.14);border-color:rgba(199,154,30,.45)}

  /* The per-accent pills carry !important in daylight, so the night rules must
  /* speak as loudly to be heard at all. */
    html:not([data-theme]) .k-viihde{color:var(--brand-lt)!important;background:rgba(255,61,116,.13)!important;border-color:rgba(255,61,116,.40)!important}
    html:not([data-theme]) .k-sarjat{color:var(--c-sarjat)!important;background:rgba(11,111,232,.16)!important;border-color:rgba(11,111,232,.45)!important}
    html:not([data-theme]) .k-elokuvat{color:var(--c-elokuvat)!important;background:rgba(242,101,34,.15)!important;border-color:rgba(242,101,34,.45)!important}
    html:not([data-theme]) .k-julkkis{color:var(--c-julkkis)!important;background:rgba(139,43,226,.16)!important;border-color:rgba(139,43,226,.48)!important}
    html:not([data-theme]) .k-musiikki{color:var(--c-musiikki)!important;background:rgba(0,164,106,.15)!important;border-color:rgba(0,164,106,.45)!important}
    html:not([data-theme]) .k-royal{color:var(--c-royal)!important;background:rgba(199,154,30,.14)!important;border-color:rgba(199,154,30,.45)!important}

  /* The footer is the darkest thing on a light page, drawn in --ink. Dark
  /* inverts --ink to near-white, which would make the footer the brightest
  /* band on the page. It steps down from the article rather than up, and keeps
  /* its own value to do it. */
    html:not([data-theme]) .footer{background:#08080B}

  /* Both were written as literal white on a dark band, and stay legible
  /* against the darker one. */
    html:not([data-theme]) .footer .logo b,
    html:not([data-theme]) .footer .foot-follow h2{color:#F2F2F5}

  /* Yellow on near-black is the one pairing in the palette that gets louder
  /* rather than quieter when the page goes dark, so the badge keeps its dark
  /* ink. */
    html:not([data-theme]) .flash{color:#0E0E12}

  /* The inset hairline was a dark line drawn on a light page. */
    html:not([data-theme]) .hero .ph,
    html:not([data-theme]) .hero-main .ph{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.5)}
    html:not([data-theme]) .search input::placeholder{color:#7A7C88}

  /* A reserved slot should read as deliberate rather than as something
  /* failing, at either brightness. */
    html:not([data-theme]) .ad span,
    html:not([data-theme]) .ad b{color:#5C5D68}

  /* A tint that reads on white disappears on black. */
    html:not([data-theme]) ::selection{background:rgba(var(--brand-rgb),.35)}

  /* Pictures carry their own light. Taking a little off stops a
  /* white-background press photograph from being the brightest thing on a page
  /* somebody opened because it was dark. */
    html:not([data-theme]) img,
    html:not([data-theme]) video{filter:brightness(.94)}

  /* A highlighter works on paper because the words under it stay dark. On a
  /* dark page they are light, and yellow behind light letters is the one thing
  /* on the screen nobody can read — and yellow at low alpha over near-black is
  /* not yellow at all, it composites to #41370E, which is olive. So at night
  /* the mark stops being a wash and becomes what it would be if you drew it
  /* with the same pen on black paper: a bright rule under words that stay
  /* light. */
    html:not([data-theme]) .prose mark{background:none;color:inherit;box-shadow:inset 0 -.30em 0 rgba(255,214,64,.85);padding:0 2px;border-radius:2px}
    html:not([data-theme]) .prose mark.pink{box-shadow:inset 0 -.30em 0 rgba(255,61,116,.75)}
    html:not([data-theme]) .prose mark.blue{box-shadow:inset 0 -.30em 0 rgba(127,180,247,.72)}

  /* The body of every article was a fixed near-black, #1D1D26 — deliberately a
  /* shade softer than the headline ink, which is right, and fatal at night:
  /* 1.15:1, text the colour of the paper. This is the same relationship read
  /* the other way round, a shade softer than the light ink rather than a shade
  /* harder than the dark page. */
    html:not([data-theme]) .prose{color:#E7E4EE}

  /* The opening paragraph leads, so it keeps its extra weight. */
    html:not([data-theme]) .hy-wrap .prose>p.first{color:#F4F1F9}
    html:not([data-theme]) .hy-stand{color:#CFCBDC}

  /* Written with the same :not(body) the light rule uses, because that is what
  /* it has to outweigh. */
    html:not([data-theme]) .search:not(body) input::placeholder{color:#7A7C88}
    html:not([data-theme]) .meta .dot{background:#3B3748}
    html:not([data-theme]) .crumbs .sep{color:#4B4658}

  /* Every tinted panel in the theme is a few per cent of a colour over white,
  /* which on white is a clean pastel and over near-black is a smear: the fact
  /* box came out #180D15, a brown nobody chose. The panels keep their coloured
  /* rule, which is what identified them anyway, and sit on a surface instead
  /* of in a stain. */
    html:not([data-theme]) .fbox{background:var(--card)}
    html:not([data-theme]) .kp,
    html:not([data-theme]) .facts h3,
    html:not([data-theme]) .fp h4{background:var(--card)}

  /* The quote keeps a wash, because a wash is the whole idea of it — but mixed
  /* from the lifted twin and at a strength that survives being put on black. */
    html:not([data-theme]) .qcard,
    html:not([data-theme]) .fq{background:linear-gradient(135deg,rgba(255,61,116,.10),var(--card));border-color:rgba(192,139,240,.26)}

  /* The three note panels, each in its own colour, all lifted the same way:
  /* the twin at a tenth rather than the raw accent at a sixteenth. */
    html:not([data-theme]) .mod.info{background:rgba(127,180,247,.10);border-color:rgba(127,180,247,.26)}
    html:not([data-theme]) .mod.warn{background:rgba(255,164,112,.10);border-color:rgba(255,164,112,.26)}
    html:not([data-theme]) .mod.key{background:rgba(74,219,165,.09);border-color:rgba(74,219,165,.24)}
    html:not([data-theme]) .rail-box h2{background:linear-gradient(90deg,rgba(255,61,116,.16),rgba(255,61,116,.04))}

  /* Five per cent of the brand over near-black is #180D15. Twelve per cent of
  /* the lifted twin is the tint that rule was drawn to be. */
    html:not([data-theme]) .toc a.is-here{background:rgba(255,61,116,.12)}

  /* Four profile panels drawn as white fading into the faintest lilac. The
  /* fade is the point; only the two ends of it needed to be told which scheme
  /* they are in. */
    html:not([data-theme]) .profile .stat,
    html:not([data-theme]) .sumbar div,
    html:not([data-theme]) .pf-season{background:linear-gradient(150deg,var(--card),var(--card-2))}

  /* The contents band: eight per cent of the raw brand over a dark card is
  /* mud, and --brand-dk was chosen to sit on the light band. Both move to the
  /* lifted twin. */
    html:not([data-theme]) .toc .toc-h{color:var(--brand-ink);background:linear-gradient(90deg,rgba(255,61,116,.14),rgba(255,61,116,.03))}

  /* The pill is drawn in --ink, so at night it is a light pill on a dark page
  /* — which is right, and means its hover has to go the other way. The light
  /* rule darkens it towards #26262F; here it lightens. */
    html:not([data-theme]) .tahti-up:hover{background:#DCD8E6}

  /* A rise is green, and #0A8F4D is a green chosen to sit on white. On
  /* near-black it is a dark smudge that happens to pass a contrast check — the
  /* same lift every other accent got. */
    html:not([data-theme]) .mv.up,
    html:not([data-theme]) .pf-chip.ok{color:#4ADBA5}

  /* Its own value rather than --card-2, because the band was #FCFCFD and the
  /* token is #FBFBFD — one step in one channel, invisible, and still a change
  /* to a light scheme nobody asked to change. */
    html:not([data-theme]) .crumb{background:#14121B}
    html:not([data-theme]) .meter{background:linear-gradient(180deg,var(--card-2),var(--card))}
    html:not([data-theme]) .comment-respond{background:linear-gradient(180deg,var(--card-2),var(--band))}

  /* The empty half of a progress bar: a light groove on a light page, and it
  /* has to become a dark one rather than stay a bright stripe. */
    html:not([data-theme]) .m-track,
    html:not([data-theme]) .yrow .tr,
    html:not([data-theme]) .pf-bar{background:var(--band-2)}

  /* The switch, showing what it would change to. */
    html:not([data-theme]) .th-toggle .disc{transform:scale(.86)}
    html:not([data-theme]) .th-toggle .ray{opacity:0;transform:scale(.4)}
    html:not([data-theme]) .th-defs .cut{transform:translate(4px,-4px)}
}


/* ==========================================================================
   THE SWITCH

   One icon in two states rather than two icons: the sun's rays retract and the
   disc slides into a crescent, so the control reads as one thing changing
   rather than two things swapping places. Its dark state is in the table
   above, with everything else that changes.

   The crescent is a mask, not a circle painted the background colour. A
   painted cover only disappears where the background is exactly that colour,
   and this button sits on a header that is white on one site, near-white on
   another and almost black at night.
   ========================================================================== */
.th-toggle{position:relative;flex:0 0 auto;width:36px;height:36px;border:0;padding:0;
  border-radius:50%;background:transparent;cursor:pointer;color:var(--ink);
  display:grid;place-items:center}
.th-toggle:hover{background:rgba(var(--brand-rgb),.08)}
.th-toggle svg{width:19px;height:19px;overflow:visible}
.th-toggle .disc{fill:currentColor;transform-origin:center;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.th-toggle .ray{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transform-origin:center;
  transition:opacity .2s ease,transform .32s cubic-bezier(.34,1.56,.64,1)}
.th-defs{position:absolute;width:0;height:0;overflow:hidden}
.th-defs .cut{transform:translate(9px,-9px);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1)}

/* A reader who chose light on a device set to dark: the media query above
   still matches their device, so the sun has to be put back explicitly. */
html[data-theme="light"] .th-toggle .disc{transform:none}
html[data-theme="light"] .th-toggle .ray{opacity:1;transform:none}
html[data-theme="light"] .th-defs .cut{transform:translate(9px,-9px)}


/* ==========================================================================
   THE HEADER ON A PHONE

   Standing at the top of a page nothing is taken away: the wordmark is full
   size, the search is a field, the strip is there. The moment the reader
   starts reading, those two rows fold away and the section row becomes the
   whole header — 45 pixels carrying the wordmark, the sections, a search
   icon, the switch, and a hairline underneath showing how far through the
   article they are. Scrolling up brings it all back, which is the moment they
   are looking for it.

   Only on a phone. On a desktop there is room for the header to simply be
   there, and it stays exactly as it was.
   ========================================================================== */

/* The cluster in the section row exists for one moment: the one where the
   masthead has folded away and its search field and switch went with it.
   Until then — and on every desktop, where that moment never comes — it is
   not drawn. */
.nav-tools{display:none}

@media(max-width:760px){

  .masthead,.ticker{transition:max-height .34s cubic-bezier(.4,0,.2,1),
    opacity .22s ease,transform .34s cubic-bezier(.4,0,.2,1)}
  .masthead{max-height:170px;overflow:hidden}
  .ticker{max-height:80px;overflow:hidden}

  body.tahti-away .masthead{max-height:0;opacity:0;transform:translateY(-6px)}
  body.tahti-away .ticker{max-height:0;opacity:0;transform:translateY(-6px)}

  /*
   * The notification panel hangs below the masthead, and the masthead clips
   * itself so it can fold away — so the panel opened and the reader got the
   * first line and a half of it. While the panel is open the masthead neither
   * caps nor clips. The script closes it on the first scroll, so the fold is
   * never asked to animate a band whose height it cannot know.
   *
   * This lives here rather than in the stylesheet by hand: it was written by
   * hand once, into the region this script regenerates, and the next run of
   * this script deleted it. test-header.php noticed. Anything inside the
   * generated block has to be generated.
   */
  body.tahti-bell-open .masthead{max-height:none;overflow:visible;opacity:1;transform:none}

  .mainnav{box-shadow:0 0 0 rgba(16,20,24,0);transition:box-shadow .3s ease}
  body.tahti-away .mainnav{box-shadow:0 2px 14px rgba(14,14,18,.10)}

  /* The frost is right for a bar that floats over a page: on a desktop the
     masthead slides underneath it and half-seeing that is the point. Once
     this bar is the entire header there is nothing above it to show through,
     and a headline legible through the navigation reads as a rendering fault
     rather than as depth. So it goes solid at the moment it takes over, and
     the shadow below it does the separating instead. */
  body.tahti-away .mainnav{background:var(--card);backdrop-filter:none}

  /* The wordmark joins the row it was scrolled past, small. On a desktop the
     same element appears when the nav sticks; here it is tied to the fold.

     It is capped and ruled off for a reason. A site whose name is a domain —
     beta.tuoreimmatuutiset.fi — filled half the bar and ran straight into the
     first section, so the row read as one long line of words with no telling
     which was the masthead and which was navigation. A third of the width, an
     ellipsis when it does not fit, and a hairline between the two zones. */
  .mainnav .nav-logo{display:none;flex:none;font-size:15px;font-weight:900;
    letter-spacing:-.03em;white-space:nowrap;
    max-width:36%;overflow:hidden;text-overflow:ellipsis;
    padding-right:13px;margin-right:13px;border-right:1px solid var(--line);
    opacity:0;transform:translateX(-8px);
    transition:opacity .26s ease .06s,transform .26s cubic-bezier(.34,1.56,.64,1) .06s}
  .mainnav.stuck .nav-logo{display:none}
  body.tahti-away .mainnav .nav-logo{display:block;opacity:1;transform:none}

  body.tahti-away .nav-tools{display:flex;align-items:center;gap:0;
    margin-left:auto;flex:0 0 auto}
  body.tahti-away .nav-tools .go-search{display:grid;width:32px;height:32px;border:0;
    background:transparent;padding:0;place-items:center;color:var(--ink);cursor:pointer}
  .nav-tools svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
  .nav-tools .th-toggle{width:32px;height:32px}
  .nav-tools .th-toggle svg{width:17px;height:17px;stroke:none}
  .nav-tools .th-toggle .ray{stroke:currentColor}

  /* How far through the article the reader is, as the underline of the bar.
     Drawn only while the bar is the whole header — at the top of a page it
     would be a progress bar for something nobody has started. */
  .mainnav .wrap{position:relative}
  .mainnav::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
    background:var(--brand);transition:width .1s linear;pointer-events:none}
  body.tahti-away .mainnav::after{width:var(--tahti-read,0%)}

  /* Style H already draws one, fixed to the top of the window, and two lines
     creeping across the screen at different speeds is worse than either. The
     class is set by tahti.js when it finds that bar. */
  body.tahti-has-prog .mainnav::after{display:none}

  /* The switch in the masthead, at the end of the row the search field takes. */
  .mast-right .th-toggle{margin-left:auto}
}

/* Dark and narrow at once — two conditions, so its own query. */
@media (prefers-color-scheme:dark) and (max-width:760px){
  html:not([data-theme]) body.tahti-away .mainnav{box-shadow:0 2px 14px rgba(0,0,0,.6)}
}
@media(max-width:760px){
  [data-theme="dark"] body.tahti-away .mainnav{box-shadow:0 2px 14px rgba(0,0,0,.6)}
}

/* A reader who has asked for less movement gets the header they had: it is
   there, and it stays there. */
@media (prefers-reduced-motion:reduce){
  .masthead,.ticker,.mainnav .nav-logo,.th-toggle .disc,.th-toggle .ray,.th-defs .cut{
    transition:none}
  body.tahti-away .masthead,body.tahti-away .ticker{
    max-height:none;opacity:1;transform:none}
}
/* ===== END generated ===== */

/* ==========================================================================
   THE PEOPLE PAGES — writer and newsroom
   ==========================================================================
   Both pages existed and both were thin: a portrait, a name, a count, a list.
   On a site whose product is what is known about people, these two are where
   a reader decides whether to believe any of it.

   The colour here is deliberately quiet. The brand carried the kicker, the
   role line, every section rule, the rank numbers, the portrait ring and three
   panel borders — and a colour used for everything stops meaning anything.
   Structure is --ink-deep, words that happen to be brand-coloured are
   --brand-read, and the brand itself is left for the marks that are glanced
   at rather than read. Every pairing was measured; all clear AA in both
   schemes, because all four are tokens the dark table inverts.
   ========================================================================== */

.p-hero{border-bottom:2px solid var(--ink-deep);padding-bottom:22px;margin-bottom:22px}
.p-hero-in{display:grid;grid-template-columns:124px minmax(0,1fr);gap:24px;align-items:start}
.p-face{display:block;width:124px;height:124px;border-radius:50%;overflow:hidden;
  background:var(--band);border:3px solid var(--hair)}
.p-face img,.p-face svg{width:100%;height:100%;object-fit:cover;display:block}
.p-who h1{margin:2px 0 6px;font-size:clamp(28px,3.4vw,42px);color:var(--ink-deep)}
.p-role{margin:0 0 10px;font-size:15px;font-weight:800;color:var(--brand-read)}
.p-bio{margin:0 0 12px;font-size:16.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.p-links{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.p-links a{font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;
  border:1px solid var(--hair);color:var(--ink-deep);background:var(--card);
  transition:border-color .15s ease,color .15s ease}
.p-links a:hover{border-color:var(--brand-read);color:var(--brand-read)}

.p-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.p-stats > div{background:var(--surface);border:1px solid var(--hair);border-radius:12px;
  padding:13px 15px}
.p-stats b{display:block;font-size:23px;font-weight:900;letter-spacing:-.03em;line-height:1.1;
  color:var(--ink-deep)}
.p-stats span{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.p-stats-wide{margin:0 0 26px;padding-bottom:22px;border-bottom:2px solid var(--ink-deep)}

/*
 * The subject pills. Their own class rather than the profile page's .pf-chip:
 * that lives in profile.css, which these two pages do not load, so the pills
 * came out as bare words with a space between them. Two pills are not worth a
 * second stylesheet.
 */
.p-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.p-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;
  line-height:1;padding:7px 11px;border-radius:999px;border:1px solid var(--hair);
  background:var(--card);color:var(--ink-deep);
  transition:border-color .15s ease,color .15s ease}
.p-chip b{font-weight:900;color:var(--muted)}
a.p-chip:hover{border-color:var(--brand-read);color:var(--brand-read)}
a.p-chip:hover b{color:var(--brand-read)}

.p-topics{margin:0 0 26px}
.p-lbl{display:block;font-size:11.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-read);margin-bottom:9px}
.p-lbl i{font-style:normal;color:var(--muted);font-weight:700;letter-spacing:.04em}
.p-note{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}

.team-card-new{grid-template-columns:88px minmax(0,1fr);border-color:var(--hair)}
.team-card-new .p-role{margin:2px 0 8px;font-size:13px}
.team-card-new .p-chips{margin:0 0 8px}
.team-latest{margin:9px 0 0;padding-top:9px;border-top:1px solid var(--hair);
  font-size:13.5px;line-height:1.4}
.team-latest > span{display:block;font-size:10.5px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.team-latest a{font-weight:700;color:var(--ink-deep)}
.team-latest a:hover{color:var(--brand-read)}

.p-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.p-rules > div{border-top:3px solid var(--ink-deep);padding-top:13px}
.p-rules h3{font-size:15px;margin:0 0 6px;color:var(--ink-deep)}
.p-rules p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* The section rule on these two pages follows the structure, not the brand. */
.p-page .sec-head{border-bottom-color:var(--ink-deep)}
.p-page .rk{color:var(--brand-read)}

@media(max-width:760px){
  .p-hero-in{grid-template-columns:1fr}
  .p-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-rules{grid-template-columns:1fr}
}

/* ==========================================================================
   WHERE THE STORY CAME FROM
   ==========================================================================
   Thirteen kinds of block and not one of them said this. On a network whose
   articles are drafted by a model it is the block that matters most, so it is
   built to be read rather than skipped: numbered like a reference list, the
   publication in the reading weight, the domain under it in the quiet one so
   a reader can see at a glance whether the claim came from Yle or from a
   forum. Every colour is a token, so the dark table inverts all of it.
   ========================================================================== */

.srcs{margin:34px 0 0;padding:18px 20px;background:var(--surface);
  border:1px solid var(--hair);border-radius:14px}
.srcs h4{margin:0 0 6px;font-size:11.5px;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand-read)}
.srcs-l{list-style:none;margin:0;padding:0;counter-reset:src}
.srcs-l li{position:relative;padding:9px 0 9px 30px;border-top:1px solid var(--hair);
  font-size:14.5px;line-height:1.45}
.srcs-l li:first-child{border-top:0}
.srcs-l li::before{counter-increment:src;content:counter(src);position:absolute;left:0;top:10px;
  width:20px;height:20px;border-radius:50%;background:var(--card);border:1px solid var(--hair);
  color:var(--muted);font-size:11px;font-weight:900;line-height:18px;text-align:center}
.srcs-n{font-weight:800;color:var(--ink-deep)}
.srcs-d{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:1px;
  word-break:break-word}
/*
 * A row here IS the link, and the in-sentence link style — a tinted band with
 * a two-colour rule under it — turns every row into a highlighted stripe: the
 * card came out looking like three quotations rather than a reference list.
 * Written as a.srcs-a rather than .srcs-a so it also outweighs the dark
 * table's own .prose a, which is generated and must not be hand-edited.
 */
.srcs-a,.prose a.srcs-a{display:block;text-decoration:none;color:inherit;
  background:none;background-image:none;border-radius:0;padding:0;margin:0}
.srcs-a:hover .srcs-n,.prose a.srcs-a:hover .srcs-n{color:var(--brand-read);
  text-decoration:underline;text-underline-offset:3px}
.srcs-a:hover .srcs-d,.prose a.srcs-a:hover .srcs-d{color:var(--brand-read)}
.prose a.srcs-a:hover{background:none;color:inherit}
.srcs-a:focus-visible,.prose a.srcs-a:focus-visible{outline:2px solid var(--brand-read);
  outline-offset:3px;border-radius:6px}
.srcs-when{margin:12px 0 0;font-size:12px;font-weight:700;color:var(--muted)}

/* ==========================================================================
   AN UPLOAD ON A PAGE OF ITS OWN
   ==========================================================================
   Every file WordPress stores has a URL whether a theme wants one or not, and
   image search sends real readers to it. The page keeps the article furniture
   it can use — the crumb, the fact box, the way back to the story — and adds
   only what a media page needs.
   ========================================================================== */

.att-media{margin:0 0 24px;padding:16px;background:var(--surface);
  border:1px solid var(--hair);border-radius:16px;text-align:center}
/* A 2400px portrait would otherwise be three screens tall before the caption. */
.att-media img,.att-media video{max-width:100%;max-height:76vh;height:auto;width:auto;
  display:block;margin:0 auto;border-radius:10px}
.att-media audio{width:100%}
.att-file{display:inline-flex;flex-direction:column;gap:5px;padding:22px 26px;text-decoration:none}
.att-file span{font-size:17px;font-weight:900;color:var(--ink-deep);word-break:break-all}
.att-file em{font-style:normal;font-size:13px;font-weight:800;color:var(--brand-read)}
.att-file:hover em{text-decoration:underline;text-underline-offset:3px}
.att-facts{margin:0 0 24px}
.att-open{margin:12px 0 0;font-size:13.5px;font-weight:800}
/* Inside the fact box everything is bold ink, so the one link there has to say
   so itself or it reads as another label. */
.att-open a{color:var(--brand-read);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px}
.att-open a:hover{text-decoration-thickness:3px}
.att-nav{display:flex;justify-content:space-between;gap:14px;margin:26px 0 0;padding-top:16px;
  border-top:1px solid var(--hair);font-size:14px;font-weight:800}
.att-nav a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-deep)}
.att-nav a:hover{color:var(--brand-read)}
.att-nav img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--hair)}
.att-prev{min-width:0}
.att-next{margin-left:auto;text-align:right;min-width:0}

/* ==========================================================================
   WIDE SCREENS
   ==========================================================================
   The page was one width — 1300 — from a 13" laptop to a 27" monitor, so on a
   big display a couple of hundred pixels of margin sat empty down each side
   while the reading column was squeezed between the note gutter and the rail,
   and both of those sat close enough to the text to read as leaning on it.

   An article needs three zones — notes, text, rail — and at 1300 they can only
   fit by pressing the outer two against the text. So the ARTICLE grows in
   three steps and spends every pixel of it on clear air either side of the
   reading column.

   The front page grows with it, but the two chart sections do not: .toplist —
   the top-songs card and the top-list of films and series — keeps the width
   its column had at 1300, because a ten-row chart stretched across a wider
   column stops reading as a chart. Nothing else on the front page is touched:
   no gap, no card grid, no rail width, all exactly the numbers they were.

   This block sits at the end of the file on purpose. The custom properties it
   overrides are declared on .hy-wrap further up, and a media query does not
   raise specificity — only source order would decide, and losing that race is
   silent.
   ========================================================================== */

@media(min-width:1500px){
  :root{--max:1400px}
  .toplist{max-width:var(--sec-legacy)}
  .hy-wrap{max-width:1400px;--hy-gutter:280px;--hy-tie:50px}
  .hy-grid{gap:56px}
}

@media(min-width:1700px){
  :root{--max:1500px}
  .toplist{max-width:var(--sec-legacy)}
  .hy-wrap{max-width:1500px;--hy-gutter:300px;--hy-tie:70px}
  .hy-grid{gap:72px}
}

@media(min-width:1900px){
  :root{--max:1600px}
  .toplist{max-width:var(--sec-legacy)}
  .hy-wrap{max-width:1600px;--hy-gutter:320px;--hy-tie:90px}
  .hy-grid{gap:88px}
}