/*! katse-css 1.4.6 — must match TAHTI_VERSION in functions.php */
/* ============================================================================
   KATSE — the design layer.

   Written against the class names the ENGINE prints, not the ones the mock-up
   used. Where the mock-up needed markup the engine has never printed — the
   wall's tiles, the filter chips, the gradient panels — that markup is added
   in the templates and the names are this theme's own.

   Load order: fonts.css → tahti.css → tables.css → THIS → katse-profile.css

   1. TOKENS      the palette, measured rather than copied
   2. GROUND
   3. HEADER      the glass bar, the pill nav
   4. TITLE       the page head, the toggle, the filter chips
   5. THE WALL    the masonry and its four tile shapes
   6. SECTIONS    heads, the snapping rail, the letter, the timeline
   7. FOOTER
   8. RESPONSIVE
   ========================================================================= */

/* ===========================================================================
   1. TOKENS
   
   The mock-up's chips are a colour with WHITE text on them, and eight of its
   nine failed: yellow measured 1.51:1, orange 2.20, green 2.22, teal 2.57.
   Flattening all nine to one dark lightness would have fixed the numbers and
   thrown away the reason this design was chosen, so each colour was judged on
   its own instead — the light ones keep their exact value and take dark ink
   (which the mock-up already did for yellow, and only for yellow), and the
   deeper ones keep white and move a few steps down. Every pair below is
   measured, and the number is in the comment.
   ======================================================================== */

:root{
  /* --- surfaces -------------------------------------------------------- */
  --bg:#F3F3F6;
  --card:#FFFFFF;
  --card-alt:#FAFAFC;
  --fill:rgba(125,122,150,.12);
  --fill-strong:rgba(125,122,150,.2);
  --fill-2:rgba(125,122,150,.2);

  /* --- ink ------------------------------------------------------------- */
  --ink:#141319;
  --label:#141319;
  --label-2:#3C3A46;          /* 11.14:1 on the card */
  --label-3:#706D7A;          /* 5.05:1 on the card, 4.56:1 on the ground —
                                 the mock-up's #88859A measured 3.58:1 */
  --gray2:#C7C4D2;
  --sep:rgba(20,19,25,.09);
  --sep-soft:rgba(20,19,25,.06);
  --hair:rgba(20,19,25,.06);
  --sep-2:rgba(20,19,25,.09);

  /* --- the nine, as CHIP FILLS with the ink that clears 4.5:1 on them --- */
  --k-red:#E61C1E;      --k-red-ink:#FFFFFF;     /* 4.62:1 */
  --k-orange:#FF9500;   --k-orange-ink:#603501;  /* 4.76:1 */
  --k-yellow:#FFCC00;   --k-yellow-ink:#6B5400;  /* 4.80:1 */
  --k-green:#34C759;    --k-green-ink:#034B19;   /* 4.67:1 */
  --k-teal:#30B0C7;     --k-teal-ink:#053D46;    /* 4.63:1 */
  --k-blue:#0870EB;     --k-blue-ink:#FFFFFF;    /* 4.64:1 */
  --k-indigo:#5856D6;   --k-indigo-ink:#FFFFFF;  /* 5.65:1 — untouched */
  --k-purple:#A64AD5;   --k-purple-ink:#FFFFFF;  /* 4.60:1 */
  --k-pink:#E70445;     --k-pink-ink:#FFFFFF;    /* 4.67:1 */

  /* --- the same nine as INK on a white card: links, arrows, kickers ----- */
  --i-red:#DF0E1A;    --i-orange:#A65F01;  --i-yellow:#8A6D03;
  --i-green:#068131;  --i-teal:#077B8C;    --i-blue:#046BE2;
  --i-indigo:#5856D6; --i-purple:#A144D0;  --i-pink:#E00543;
  /* one lightness band, L* 44–47, every one at or above 4.92:1 */

  /*
   * The dark panel — the footer card and the .c-ink tile — is a fixed colour,
   * not --ink. --ink is the page's TYPE colour and it flips at night, so a
   * card painted with it turned near-white in dark mode while the type on it
   * stayed white. This one means "the dark panel" in both schemes.
   */
  --panel:#141319;

  /* the brand: the mark, the subscribe pill, the section arrows */
  --brand:#E00543;
  --brand-ink:#D30340;   /* 4.92:1 on the ground, 5.44:1 on a card */
  --chip-ink:#A80035;    /* 6.11:1 on the brand's own 8% chip; --brand-ink is 3.89 there */
  --cap-ink:#67646F;     /* 5.22:1 on the page ground, where captions stand */
  --brand-2:#A144D0;
  --brand-grad:linear-gradient(140deg,var(--k-pink),var(--k-purple));

  /* the engine's own names, pointed at this palette */
  --red:var(--k-red);       --red-d:var(--i-red);
  --orange:var(--k-orange); --orange-d:var(--i-orange);
  --yellow:var(--k-yellow); --yellow-d:var(--i-yellow);
  --green:var(--k-green);   --green-d:var(--i-green);
  --teal:var(--k-teal);     --teal-d:var(--i-teal);
  --blue:var(--i-blue);     --blue-d:var(--i-blue);
  --indigo:var(--k-indigo); --indigo-d:var(--i-indigo);
  --purple:var(--k-purple); --purple-d:var(--i-purple);
  --pink:var(--k-pink);     --pink-d:var(--i-pink);
  --brown:var(--i-orange);  --brown-d:var(--i-orange);
  --c-a1:var(--i-pink);   --c-a2:var(--i-teal);   --c-a3:var(--i-purple);
  --c-a4:var(--i-green);  --c-a5:var(--i-orange); --c-a6:var(--i-blue);

  /* --- the seven gradient tiles ---------------------------------------- */
  --g-pink:linear-gradient(148deg,#D6345C,#E70445);      --g-pink-ink:#FFFFFF;   /* 4.66 */
  --g-purple:linear-gradient(148deg,#9D56C0,#A64AD5);    --g-purple-ink:#FFFFFF; /* 4.60 */
  --g-blue:linear-gradient(148deg,#0C76D2,#0870EB);      --g-blue-ink:#FFFFFF;   /* 4.63 */
  --g-ink:linear-gradient(148deg,#2A2733,#141319);       --g-ink-ink:#FFFFFF;    /* 14.62 */
  --g-green:linear-gradient(148deg,#5CD679,#34C759);     --g-green-ink:#014C19;  /* 4.62 */
  --g-orange:linear-gradient(148deg,#FFB03E,#FF9500);    --g-orange-ink:#623600; /* 4.67 */
  --g-yellow:linear-gradient(148deg,#FFDD4D,#FFCC00);    --g-yellow-ink:#6D5602; /* 4.66 */

  /* --- geometry -------------------------------------------------------- */
  --r:20px;
  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --r-pill:99px;

  /* --- elevation ------------------------------------------------------- */
  --shadow:0 2px 14px rgba(20,19,25,.08);
  --shadow-lg:0 18px 46px rgba(20,19,25,.18);
  --sh:var(--shadow);
  --sh-hi:var(--shadow-lg);
  --sh-1:0 1px 3px rgba(20,19,25,.05);
  --sh-2:var(--shadow);
  --sh-3:var(--shadow-lg);
  --shadow-lift:var(--shadow-lg);
  --ring:0 0 0 3px rgba(224,5,67,.28);

  /* --- type ------------------------------------------------------------ */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Archivo','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  /* --- layout ---------------------------------------------------------- */
  --gap:18px;
  --maxw:1320px;
  --pad:22px;
}

/*
 * DARK.
 *
 * The chips and the gradient tiles carry their own ink, so neither needs a
 * night version — a yellow chip with #6B5400 on it is the same 4.80:1 on any
 * page. What changes is everything the page itself is made of: the grounds,
 * the type, the hairlines, and the glass the header is cut from.
 */
[data-theme="dark"]{
  --bg:#0F0E14;
  --card:#191821;
  --card-alt:#201F2A;
  --fill:rgba(180,176,205,.13);
  --fill-strong:rgba(180,176,205,.22);
  --fill-2:rgba(180,176,205,.22);

  --ink:#F2F1F6;
  --label:#F2F1F6;            /* 15.65:1 on the card */
  --label-2:#B9B6C6;          /*  8.85:1 */
  --label-3:#918EA1;          /*  5.52:1 */
  --gray2:#4A4756;
  --sep:rgba(235,233,245,.11);
  --sep-soft:rgba(235,233,245,.07);
  --hair:rgba(235,233,245,.07);
  --sep-2:rgba(235,233,245,.11);

  /* as ink on a dark card, one lightness, every one at 9.7:1 */
  --i-red:#FFAC9C;    --i-orange:#F3B47A;  --i-yellow:#DDBD72;
  --i-green:#8DD192;  --i-teal:#5BD0E8;    --i-blue:#B1BEFF;
  --i-indigo:#C5B8FE; --i-purple:#E1AFF6;  --i-pink:#FEABAB;

  --brand:#FEABAB;
  --brand-2:#E1AFF6;
  --brand-ink:#FEABAB;
  --chip-ink:#FEABAB;
  --cap-ink:#918EA1;

  --shadow:0 2px 14px rgba(0,0,0,.5);
  --shadow-lg:0 18px 46px rgba(0,0,0,.62);
  --sh-1:0 1px 3px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(254,171,171,.32);
}

/*
 * The same tokens for the reader who has chosen nothing and whose machine is
 * dark. test-katse.php asserts these two blocks stay identical.
 */
@media (prefers-color-scheme:dark){
  html:not([data-theme]){
    --bg:#0F0E14;
    --card:#191821;
    --card-alt:#201F2A;
    --fill:rgba(180,176,205,.13);
    --fill-strong:rgba(180,176,205,.22);
    --fill-2:rgba(180,176,205,.22);

    --ink:#F2F1F6;
    --label:#F2F1F6;            /* 15.65:1 on the card */
    --label-2:#B9B6C6;          /*  8.85:1 */
    --label-3:#918EA1;          /*  5.52:1 */
    --gray2:#4A4756;
    --sep:rgba(235,233,245,.11);
    --sep-soft:rgba(235,233,245,.07);
    --hair:rgba(235,233,245,.07);
    --sep-2:rgba(235,233,245,.11);

    /* as ink on a dark card, one lightness, every one at 9.7:1 */
    --i-red:#FFAC9C;    --i-orange:#F3B47A;  --i-yellow:#DDBD72;
    --i-green:#8DD192;  --i-teal:#5BD0E8;    --i-blue:#B1BEFF;
    --i-indigo:#C5B8FE; --i-purple:#E1AFF6;  --i-pink:#FEABAB;

    --brand:#FEABAB;
    --brand-2:#E1AFF6;
    /* The data-theme door names these and this one did not, so a reader whose
       system is dark and who never touched the toggle fell through to the
       engine's own dark value, --brand-lt. Legible, but a different pink from
       the one the toggle gives -- the two doors have to answer alike. */
    --brand-ink:#FEABAB;
    --chip-ink:#FEABAB;
    --cap-ink:#918EA1;

    --shadow:0 2px 14px rgba(0,0,0,.5);
    --shadow-lg:0 18px 46px rgba(0,0,0,.62);
    --sh-1:0 1px 3px rgba(0,0,0,.4);
    --ring:0 0 0 3px rgba(254,171,171,.32);
  }
}

/* ===========================================================================
   2. GROUND
   ======================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--label-2);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;width:100%;height:auto;background:var(--fill)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);line-height:1.2}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.av{font-family:var(--display)}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- the chip ------------------------------------------------------------ */
.chip,.kicker{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.5px;
  padding:5px 11px;border-radius:var(--r-pill);text-transform:uppercase;
  background:var(--k-pink);color:var(--k-pink-ink);border:0;white-space:nowrap}
/*
 * !important, unwillingly — again.
 *
 * tahti.css sets every .k-* with !important: a pale tinted pill with a border,
 * drawn for a design where the kicker sits on a white card. Here the chip is a
 * solid colour badge laid on a photograph, and without matching that weight
 * half of them rendered as the engine's washed-out pill on top of the picture.
 */
.chip.pink,.k-viihde   {background:var(--k-pink)!important;   color:var(--k-pink-ink)!important;   border:0!important}
.chip.purple,.k-julkkis{background:var(--k-purple)!important; color:var(--k-purple-ink)!important; border:0!important}
.chip.blue,.k-sarjat   {background:var(--k-blue)!important;   color:var(--k-blue-ink)!important;   border:0!important}
.chip.indigo,.k-kuninkaalliset,.k-royal{background:var(--k-indigo)!important;color:var(--k-indigo-ink)!important;border:0!important}
.chip.orange,.k-musiikki{background:var(--k-orange)!important;color:var(--k-orange-ink)!important; border:0!important}
.chip.yellow,.k-muoti  {background:var(--k-yellow)!important; color:var(--k-yellow-ink)!important; border:0!important}
.chip.green,.k-suhteet {background:var(--k-green)!important;  color:var(--k-green-ink)!important;  border:0!important}
.chip.teal,.k-koti,.k-ruoka{background:var(--k-teal)!important;color:var(--k-teal-ink)!important;  border:0!important}
.chip.red,.k-kohu      {background:var(--k-red)!important;    color:var(--k-red-ink)!important;    border:0!important}
.chip.elokuvat,.k-elokuvat{background:var(--k-purple)!important;color:var(--k-purple-ink)!important;border:0!important}
.chip.yleista,.k-yleista,.k-yleinen{background:var(--fill-strong)!important;color:var(--label-2)!important;border:0!important}
.chip,.kicker{padding:5px 11px!important;border-radius:var(--r-pill)!important}
.chip.glass{background:rgba(255,255,255,.24)!important;color:#fff!important;border:.5px solid rgba(255,255,255,.4)!important}
/* on a photograph, where the picture is the background */
.chip.glass{
  background:rgba(255,255,255,.24);border:.5px solid rgba(255,255,255,.4);
  color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.meta{font-size:12.5px;color:var(--label-3);margin-top:8px;font-weight:500}
.time{font-size:12.5px;color:var(--label-3);font-weight:500}

/* ===========================================================================
   5. THE WALL
   ======================================================================== */

/*
 * A grid, not columns — see the note in katse.js. Three states:
 *   .wall              a plain aligned grid; what a reader with no script gets
 *   .wall.is-masonry   the script has measured, and each tile carries a span
 *   .wall.is-native    the browser has masonry of its own
 */
.wall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);align-items:start;padding:14px 0 0}
.wall.is-masonry{grid-auto-rows:1px;row-gap:0}
.wall.is-masonry > *{margin-bottom:var(--gap)}
@supports (grid-template-rows:masonry){
  .wall.is-native{grid-template-rows:masonry;row-gap:var(--gap)}
}

.tile{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r);box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

/*
 * --- a picture with the headline laid over it ----------------------------
 *
 * .tile.pic, not .tile.ph. The engine already owns .ph: it is the wrapper
 * tahti_thumb() prints around every photograph in the theme, and giving the
 * same name to "a tile that is mostly picture" put the tile's rules on the
 * wrapper inside it. The tiles rendered as nothing at all.
 */
.tile.pic .shot,.tile.pic .ph{width:100%;overflow:hidden}
.tile.pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile.pic:hover img{transform:scale(1.05)}
/*
 * The scrim under a headline laid on a photograph.
 *
 * The mock-up's ran from .9 at the bottom to .14 at 56%, which is a handsome
 * curve and too thin where the type actually sits: a two-line headline reaches
 * about a fifth of the way up, where that gradient has already fallen to about
 * .6, and white on .6 over a pale photograph measures near 3.5:1. This one
 * holds its weight through the band the text occupies and only then lets go.
 * Measured on rendered pixels, not assumed — see shot-scrim.mjs.
 */
.tile.pic::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(12,11,16,.94) 0%,
    rgba(12,11,16,.82) 24%,
    rgba(12,11,16,.30) 54%,
    rgba(12,11,16,0) 80%)}
.tile.pic .t{position:absolute;left:0;right:0;bottom:0;padding:17px 18px;z-index:2}
.tile.pic h3{
  font-family:var(--display);font-weight:800;line-height:1.18;color:#fff;
  margin-top:9px;letter-spacing:-.4px}
.tile.pic .pcount{
  position:absolute;top:13px;right:14px;z-index:2;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);
  border:.5px solid rgba(255,255,255,.2);display:inline-flex;align-items:center;gap:5px}

/* the four shapes, and the headline each one can carry */
.a-tall .shot,.a-tall .ph{aspect-ratio:3/4.6}
.a-mid  .shot,.a-mid  .ph{aspect-ratio:3/3.5}
.a-sq   .shot,.a-sq   .ph{aspect-ratio:1/1}
.a-wide .shot,.a-wide .ph{aspect-ratio:4/2.7}
.a-tall h3{font-size:21px}
.a-mid  h3{font-size:19px}
.a-sq h3,.a-wide h3{font-size:17px}

/* --- a white card, for a story that has something to say ----------------- */
.tile.wt{background:var(--card);border:.5px solid var(--hair)}
.tile.wt .shot,.tile.wt .ph{aspect-ratio:16/10;overflow:hidden}
.tile.wt img{width:100%;height:100%;object-fit:cover}
.tile.wt .b{padding:15px 17px 18px}
.tile.wt h3{
  font-family:var(--display);font-weight:800;font-size:17px;line-height:1.26;
  color:var(--ink);margin-top:9px;letter-spacing:-.3px}
.tile.wt:hover h3{color:var(--brand-ink)}
.tile.wt p{font-size:13px;color:var(--label-3);margin-top:7px;line-height:1.56}

/* --- a panel of colour, for the things that are not stories -------------- */
.tile.st{
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:11px;min-height:210px;
  background:var(--g-ink);color:var(--g-ink-ink)}
.tile.st h3{font-family:var(--display);font-weight:900;font-size:22px;line-height:1.1;
  letter-spacing:-.7px;color:inherit}
.tile.st .big{font-family:var(--display);font-weight:900;font-size:52px;line-height:.86;
  letter-spacing:-2.4px;color:inherit}
.tile.st .fo{font-size:12.5px;font-weight:600;margin-top:auto;padding-top:12px;color:inherit;opacity:.92}
.tile.st q{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.3;
  font-style:italic;color:inherit;quotes:"“" "”"}
.tile.st .chip.glass{color:inherit;border-color:currentColor;background:rgba(255,255,255,.2)}

/* Each panel names its ink beside its colour, because five of the mock-up's
   seven could not carry white even at the 3:1 a 52px number is allowed. */
/*
 * .tile.c-pink, not .c-pink. The default above is written .tile.st — two
 * classes — so a one-class colour rule loses to it and every panel came out
 * in the ink gradient whatever colour it had been given.
 */
.tile.c-pink,.topic.c-pink    {background:var(--g-pink);   color:var(--g-pink-ink)}
.tile.c-purple,.topic.c-purple{background:var(--g-purple); color:var(--g-purple-ink)}
.tile.c-blue,.topic.c-blue    {background:var(--g-blue);   color:var(--g-blue-ink)}
.tile.c-ink,.topic.c-ink      {background:var(--g-ink);    color:var(--g-ink-ink)}
.tile.c-green,.topic.c-green  {background:var(--g-green);  color:var(--g-green-ink)}
.tile.c-orange,.topic.c-orange{background:var(--g-orange); color:var(--g-orange-ink)}
.tile.c-yellow,.topic.c-yellow{background:var(--g-yellow); color:var(--g-yellow-ink)}
.c-green .chip.glass,.c-orange .chip.glass,.c-yellow .chip.glass{
  background:rgba(0,0,0,.14);border-color:rgba(0,0,0,.22)}

/* a chip is a label, not a bar: in a flex column it would stretch the width */
.tile.st .chip,.tile.st .kicker{align-self:flex-start}

/* the poll */
.pr{margin-top:9px}
.pr .l{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:5px}
.pr .tr{height:7px;background:rgba(255,255,255,.3);border-radius:var(--r-pill);overflow:hidden}
.c-green .pr .tr,.c-orange .pr .tr,.c-yellow .pr .tr{background:rgba(0,0,0,.16)}
.pr .fi{display:block;height:100%;background:currentColor;border-radius:var(--r-pill)}

/* --- the slot that carries advertising ----------------------------------- */
.tile.adt{
  background:var(--card);border:1px dashed var(--gray2);box-shadow:none;min-height:250px;
  display:flex;align-items:center;justify-content:center;color:var(--label-3);
  font-size:10.5px;text-transform:uppercase;letter-spacing:1.6px;text-align:center;padding:14px}
.tile.adt:hover{transform:none;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .tile,.tile:hover,.tile.pic img,.tile.pic:hover img{transform:none;transition:none}
}

/* --- the wall's own widths ----------------------------------------------- */
@media (max-width:1180px){ .wall{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:720px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wall.is-masonry > *{margin-bottom:12px}
  .a-tall h3{font-size:16px}
  .a-mid h3,.a-sq h3,.a-wide h3{font-size:14.5px}
  .tile.st{padding:17px 17px 19px;min-height:170px}
  .tile.st h3{font-size:17px}
  .tile.st .big{font-size:38px}
}
@media (max-width:440px){ .wall{grid-template-columns:minmax(0,1fr)} }

/* ===========================================================================
   3. THE BAR
   ======================================================================== */

.header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-bottom:.5px solid var(--sep)}
/* a browser without color-mix still gets a solid bar rather than a see-through one */
@supports not (background:color-mix(in srgb,#fff 86%,transparent)){
  .header{background:var(--card)}
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}

.logo{
  font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-1.2px;
  color:var(--ink);display:flex;align-items:center;gap:9px;min-width:0;
  /* it may shrink: a long site name with flex-shrink:0 pushed a 320px screen
     out to 411px and took the whole page's horizontal scroll with it */
  flex:0 1 auto}
.logo .ey{
  width:28px;height:28px;border-radius:9px;background:var(--brand-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
  font-size:14px;font-weight:900;line-height:1;
  box-shadow:0 4px 12px rgba(231,4,69,.3)}
.logo .lt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo img{width:auto;max-height:34px;background:none}

.pnav{display:flex;gap:4px;overflow-x:auto;flex:1;justify-content:center;scrollbar-width:none}
.pnav::-webkit-scrollbar{display:none}
.pnav a{
  padding:8px 15px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  color:var(--label-3);white-space:nowrap;flex:0 0 auto}
.pnav a:hover{background:var(--fill);color:var(--ink)}
.pnav a.on{background:var(--ink);color:var(--bg);font-weight:700}

.hact{display:flex;gap:8px;align-items:center;flex-shrink:0}
.circ{
  width:36px;height:36px;border-radius:50%;border:0;background:var(--fill);
  color:var(--ink);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;flex:none}
.circ:hover{background:var(--fill-strong)}
.circ svg{width:17px;height:17px}
.pill{
  border:0;background:var(--brand-grad);color:#fff;padding:9px 18px;border-radius:var(--r-pill);
  font-family:var(--sans);font-weight:800;font-size:13.5px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;box-shadow:0 4px 14px rgba(231,4,69,.28)}
.pill:hover{filter:brightness(1.07);color:#fff}

.burger span{display:block;width:16px;height:2px;background:currentColor;position:relative;border-radius:2px}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .2s ease,top .2s ease}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.burger{display:none}

/* the panel the magnifier opens, and the list the menu button opens */
.hpanel,.hmenu{
  display:none;border-top:.5px solid var(--sep);background:var(--card)}
.hpanel.is-open,.hmenu.is-open{display:block}
.hpanel form{display:flex;align-items:center;gap:10px;padding:12px 0}
.hpanel svg{width:18px;height:18px;color:var(--label-3);flex:none}
.hpanel input{
  flex:1;min-width:0;height:42px;border:.5px solid var(--sep);border-radius:var(--r-pill);
  padding:0 18px;font:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
.hpanel input::placeholder{color:var(--label-3)}
.hpanel button{
  height:42px;padding:0 20px;border:0;border-radius:var(--r-pill);
  background:var(--ink);color:var(--bg);font-weight:800;font-size:13.5px;cursor:pointer}
.hmenu .wrap{display:flex;flex-wrap:wrap;gap:7px;padding:14px 22px}
.hmenu a{
  padding:9px 15px;border-radius:var(--r-pill);background:var(--fill);
  font-size:13.5px;font-weight:700;color:var(--ink)}
.hmenu a:hover{background:var(--ink);color:var(--bg)}

.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--brand);width:0;z-index:2}

/* ===========================================================================
   4. THE PAGE HEAD AND ITS FILTERS
   ======================================================================== */

.top{
  padding:26px 0 4px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.top h1{
  font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:-1.8px;
  color:var(--ink);line-height:1}
.top .sub{font-size:13.5px;color:var(--label-3);margin-top:8px;font-weight:500}
.top .sub b{color:var(--brand-ink);font-weight:800}

.fchips{display:flex;gap:9px;overflow-x:auto;padding:18px 0 6px;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fc{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--card);border:.5px solid var(--hair);box-shadow:var(--shadow);
  color:var(--ink);padding:9px 16px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0}
.fc:hover,.fc.on{background:var(--ink);color:var(--bg)}
.fc .d{width:9px;height:9px;border-radius:50%;background:var(--label-3);flex:none}
.d-a1{background:var(--k-pink)}   .d-a2{background:var(--k-teal)}
.d-a3{background:var(--k-purple)} .d-a4{background:var(--k-green)}
.d-a5{background:var(--k-orange)} .d-a6{background:var(--k-blue)}

.more{text-align:center;padding:18px 0 4px}
.more a,.more button{
  background:var(--card);border:.5px solid var(--hair);box-shadow:var(--shadow);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:13.5px;padding:14px 32px;
  border-radius:var(--r-pill);cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.more a:hover,.more button:hover{background:var(--ink);color:var(--bg)}

/* ===========================================================================
   6. SECTIONS, THE RAIL, THE LETTER, THE DAY
   ======================================================================== */

.sec{padding:38px 0 0}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:16px}
.sh .l{display:flex;align-items:center;gap:12px;min-width:0}
.sh .ic{
  width:38px;height:38px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex:none}
.sh .ic svg{width:19px;height:19px}
.ic-pink{background:var(--k-pink);color:var(--k-pink-ink)}
.ic-green{background:var(--k-green);color:var(--k-green-ink)}
.ic-blue{background:var(--k-blue);color:var(--k-blue-ink)}
.sh h2{
  font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-1px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis}
.sh a{
  display:flex;align-items:center;gap:3px;font-size:13.5px;font-weight:700;
  color:var(--brand-ink);white-space:nowrap;flex:none}
.sh a::after{content:"\203A";font-size:19px;margin-top:-2px}

.rail{
  display:flex;gap:var(--gap);overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
.rc{
  /*
   * An explicit basis, not min-width.
   *
   * A flex item with only a min-width takes its base size from its content,
   * and a card whose content is an image with width:100% has no content width
   * to speak of — so the browser fell back to the widest thing it could find
   * and the rail rendered two cards nearly seven hundred pixels across, with
   * the photographs cropped through the middle of people's heads.
   */
  flex:0 0 300px;scroll-snap-align:start;
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  border:.5px solid var(--hair);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.rc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rc .shot,.rc .ph{aspect-ratio:16/9.6;overflow:hidden}
.rc img{width:100%;height:100%;object-fit:cover}
.rc .b{padding:14px 17px 18px}
.rc h3{
  font-family:var(--display);font-weight:800;font-size:17px;line-height:1.26;
  color:var(--ink);margin-top:9px;letter-spacing:-.3px}
.rc:hover h3{color:var(--brand-ink)}

.nl{margin-top:44px}
.nlc{
  position:relative;border-radius:var(--r-xl);padding:44px 46px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  overflow:hidden;
  background:linear-gradient(118deg,#7B2E9E 0%,#C4174B 48%,#B04A00 118%)}
.nlc::after{
  content:"";position:absolute;right:-70px;top:-90px;width:290px;height:280px;border-radius:50%;
  background:rgba(255,255,255,.16);pointer-events:none}
.nlc .txt{position:relative;z-index:2;min-width:0}
.nlc h2{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-1.2px;color:#fff}
.nlc p{margin-top:9px;font-size:14.5px;max-width:430px;color:#F6EDF3}
.nlf{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:2}
.nlf input{
  border:0;border-radius:var(--r-pill);padding:14px 21px;font:inherit;font-size:14px;
  width:266px;max-width:70vw;background:#fff;color:var(--ink)}
.nlf button{
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-pill);padding:14px 26px;
  font-weight:800;font-size:14px;cursor:pointer;font-family:var(--sans)}
.nlf button:hover{background:#000}

.lat{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);border:.5px solid var(--hair);
  padding:6px 20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 34px}
.lat a{
  display:grid;grid-template-columns:52px minmax(0,1fr) 14px;gap:13px;padding:13px 0;
  border-bottom:.5px solid var(--sep);align-items:center;
  font-size:14px;font-weight:600;color:var(--ink)}
.lat a:hover{color:var(--brand-ink)}
.lat time{font-size:12px;font-weight:800;color:var(--brand-ink)}
.lat .cv{color:var(--gray2);font-size:20px;text-align:right}

/* ===========================================================================
   7. FOOTER

   The engine prints .footer / .foot-top / .foot-brand / .foot-col / .foot-bot,
   and the mock-up drew .fcard / .fg / .flogo / .fb. Rather than rewrite a
   footer whose column logic is sound, the engine's names are dressed as the
   mock-up's card — one dark panel with a big radius, floating on the ground.
   ======================================================================== */

/* the gutter is the footer's, so the card keeps its corners at every width */
.footer{margin-top:44px;padding:34px var(--pad) 24px;background:none;border:0;color:#AEABBB}
[data-theme="dark"] .footer,html:not([data-theme]) .footer{color:#AEABBB}
.footer::before{content:none}

/*
 * The card is the wrap, not the first band inside it.
 *
 * Painting .foot-top dark and stopping there left every band the panel can
 * add below it — the widget strip, the masthead block naming the publisher —
 * outside the card, printing white type on the light ground. One container
 * carries the colour and the corners; the bands inside only space themselves.
 */
.footer > .wrap{
  max-width:calc(var(--maxw) - var(--pad) * 2);
  background:var(--panel);border-radius:var(--r-xl);
  padding:36px 38px 30px;color:#AEABBB}
.footer > .wrap > *{border:0;background:none}

.foot-top{
  display:grid;grid-template-columns:2fr repeat(var(--foot-cols,3),minmax(0,1fr));
  gap:30px;padding:0;margin:0}
.foot-brand{min-width:0}
.foot-brand .logo{
  font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-1.1px;
  color:#fff;display:flex;align-items:center;gap:9px;min-width:0}
/* a long site name has to be allowed to break, or it carries the whole page
   into horizontal scroll on a 320px screen */
.foot-brand .logo b{font-weight:900;color:#fff;min-width:0;overflow-wrap:anywhere}
.foot-brand .logo i{
  order:-1;width:26px;height:26px;border-radius:9px;background:var(--brand-grad);
  display:block;flex:none;font-style:normal}
.foot-pub p,.foot-brand p{
  margin-top:14px;max-width:310px;line-height:1.65;font-size:13px;color:#AEABBB}
.footer h2,.footer h3{
  color:#fff;font-family:var(--display);font-weight:800;margin-bottom:12px;
  font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:8px}
.footer li a{font-size:13px;font-weight:500;color:#AEABBB}
.footer li a:hover{color:#fff}

.foot-follow{margin-top:18px}
.foot-follow .soc{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.foot-follow .soc li{margin:0}
.foot-follow .soc a{
  width:34px;height:34px;padding:0;display:inline-grid;place-items:center;position:relative;
  border:1px solid rgba(255,255,255,.16);border-radius:50%;background:none;color:#AEABBB;transform:none}
.foot-follow .soc a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;transform:none}
.foot-follow .soc svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.foot-follow .soc a > span{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.apps{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.app-badge{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);
  font-size:11px;font-weight:700;color:#AEABBB;background:none}
.app-badge:hover{color:#fff;border-color:rgba(255,255,255,.3)}

/* the strip of widgets and the block naming the publisher, both inside */
.foot-extras,.foot-pub{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.foot-pub dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:0}
.foot-pub dt{
  font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:#9A97A8;margin-bottom:4px}
.foot-pub dd{margin:0;font-size:13px;color:#DEDCE6}
.foot-pub dd a{color:#DEDCE6}
.foot-pub dd a:hover{color:#fff}

.foot-bot{
  margin-top:26px;padding-top:17px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;color:#9A97A8}
.foot-bot-l,.foot-bot-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.foot-rights{margin:0;font-size:12px;color:#9A97A8}
.foot-legal{display:flex;gap:16px;flex-wrap:wrap}
.foot-legal a{font-size:12px;font-weight:600;color:#9A97A8}
.foot-legal a:hover{color:#fff}

/* the return control */
.totop,.tahti-up{
  position:fixed;right:18px;bottom:18px;z-index:80;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:var(--ink);color:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}
.totop:hover,.tahti-up:hover{background:var(--brand);color:#fff}
.totop svg,.tahti-up svg{width:17px;height:17px}
/* display:inline-flex above beats the browser's own [hidden]{display:none},
   so a control the script had hidden was still being laid out in the corner --
   invisible, but present, and 44x44 of it swallowing taps. */
.totop[hidden],.tahti-up[hidden]{display:none}
.pk-scroll-to-top{display:none!important}

/* ===========================================================================
   8. RESPONSIVE
   ======================================================================== */

@media (max-width:1180px){ .lat{grid-template-columns:1fr 1fr} }
@media (max-width:1024px){
  .pnav{display:none}
  .burger{display:flex}
  .top h1{font-size:31px}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .rc{flex:0 0 78vw}
  .lat{grid-template-columns:1fr}
  .nlc{padding:30px 24px}
  .nlc h2{font-size:24px}
  .footer > .wrap{padding:26px 22px 24px}
  .sh h2{font-size:21px}
  .sec{padding-top:30px}
}
@media (max-width:520px){
  .foot-top{grid-template-columns:1fr}
  .logo{font-size:19px}
  .logo .ey{width:26px;height:26px;border-radius:8px;font-size:13px}
  .header .wrap{height:56px;gap:10px}
  .pill{padding:8px 14px;font-size:12.5px}
  .totop,.tahti-up{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90}
}

/* ===========================================================================
   9. THE RAILS

   KATSE's front page is a wall, so it prints no rail — but the article page,
   the archives, search and 404 all print one, and the theme still ships the
   front rail for a site that turns the wall off. Two vocabularies, because
   the two rails were written years apart: the front prints .widget/.ranklist/
   .feedlist and the article prints .panel/.s-rank/.fresh. Both are dressed
   here, in this theme's language, because a class the templates print and no
   sheet mentions is a page with no design on it — which is how the last fork
   shipped an article page with its rank numbers on their own lines.
   ======================================================================== */

.col-rail,.col-ads{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.linkline{color:inherit}
.linkline:hover{color:var(--brand-ink)}

/* --- the card both rails are built from ---------------------------------- */
.widget,.panel{
  background:var(--card);border:.5px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;color:var(--label-2)}
.panel.pad,.widget-body{padding:16px 18px 18px}
.panel + .panel,.widget + .widget{margin-top:0}

.widget-head,.sh:not(.l){display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.widget-head{padding:16px 18px 0}
.widget-head h3,.panel .sh h3{
  font-family:var(--display);font-weight:900;font-size:17.5px;letter-spacing:-.5px;
  color:var(--ink);margin:0;display:inline-flex;align-items:center;gap:9px;min-width:0}
.widget-head h3::before,.panel .sh h3::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}
.panel .sh{margin:0 0 13px;padding:0}
.widget-head .sec-more,.widget-head .upd,.panel .sh .upd{
  flex:0 0 auto;font-size:11px;font-weight:700;color:var(--label-3);white-space:nowrap}
.sec-more{font-size:12.5px;font-weight:700;color:var(--brand-ink)}
.sec-more:hover{color:var(--brand-ink);text-decoration:underline}

/* --- the numbered chart, in both vocabularies ---------------------------- */
.ranklist,.s-rank{list-style:none;margin:0;padding:0}
.ranklist li,.s-rank li{
  display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:.5px solid var(--sep)}
.ranklist li:first-child,.s-rank li:first-child{padding-top:0}
.ranklist li:last-child,.s-rank li:last-child{border-bottom:0;padding-bottom:0}
.ranklist .n,.s-rank .n{
  flex:0 0 24px;height:24px;border-radius:50%;background:var(--brand-grad);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:800;line-height:1;margin-top:1px}
.ranklist li:nth-child(n+4) .n,.s-rank li:nth-child(n+4) .n{
  background:var(--fill);color:var(--label-3)}
.ranklist li > div,.s-rank li > div{min-width:0;flex:1}
.ranklist h4,.s-rank .t{
  font-family:var(--display);font-size:14.5px;line-height:1.28;font-weight:700;margin:0;color:var(--ink)}
.s-rank .t a{color:inherit}
.s-rank li:hover .t a,.ranklist li:hover h4{color:var(--brand-ink)}
.ranklist .meta,.s-rank .s{
  display:block;margin-top:5px;font-size:11.5px;font-weight:500;color:var(--label-3);
  background:none;padding:0}
.trend{margin-left:auto;flex:none;font-size:10.5px;font-weight:800;padding-top:3px}
.trend.up{color:var(--i-green)} .trend.down{color:var(--label-3)} .trend.new{color:var(--brand-ink)}

/* KICKER | HEADLINE — the pipe is in the markup, so it is only given room */
.kick{font-weight:800;letter-spacing:.3px;text-transform:uppercase;font-size:.84em;color:var(--i-pink)}
.kick.k-julkkis,.kick.k-sarjat{color:var(--i-purple)}
.kick.k-muoti{color:var(--i-yellow)}
.kick.k-suhteet{color:var(--i-green)}
.kick.k-musiikki{color:var(--i-orange)}
.kick.k-kuninkaalliset,.kick.k-royal,.kick.k-elokuvat{color:var(--i-indigo)}
.kick.k-yleista,.kick.k-yleinen{color:var(--label-3)}
.bar{color:var(--gray2);font-weight:400;margin:0 5px 0 4px}

/* --- a run of stories with a thumbnail ----------------------------------- */
.feedlist,.fresh,.s-pod,.sblock{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feedlist li,.fresh > a,.s-pod > a,.sblock > a{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:13px;align-items:start;
  padding:12px 0;border-bottom:.5px solid var(--sep)}
.sblock > a{grid-template-columns:minmax(0,1fr) 60px}
.feedlist li:first-child,.fresh > a:first-child,.s-pod > a:first-child,.sblock > a:first-child{padding-top:0}
.feedlist li:last-child,.fresh > a:last-child,.s-pod > a:last-child,.sblock > a:last-child{
  border-bottom:0;padding-bottom:0}
.feedlist h4,.fresh h4,.sblock h4,.s-pod b{
  font-family:var(--display);font-size:14px;line-height:1.28;font-weight:700;margin:0;
  color:var(--ink);display:block}
.feedlist li:hover h4,.fresh > a:hover h4,.sblock > a:hover h4,.s-pod > a:hover b{color:var(--brand-ink)}
.fresh .m,.feedlist .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.s-pod span{display:block;margin-top:5px;font-size:11.5px;font-weight:500;color:var(--label-3)}
.tag{
  font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--i-pink);background:none;border:0;padding:0}
.t-julkkis,.t-sarjat{color:var(--i-purple)}  .t-muoti{color:var(--i-yellow)}
.t-suhteet{color:var(--i-green)}             .t-musiikki{color:var(--i-orange)}
.t-kuninkaalliset,.t-royal,.t-elokuvat{color:var(--i-indigo)}
.t-yleista,.t-yleinen{color:var(--label-3)}

/* the square thumbnail every rail module uses */
.fig{border-radius:14px;overflow:hidden;background:var(--fill)}
.fig img,.fig .ph{display:block;width:100%;height:100%;object-fit:cover}
.r11{aspect-ratio:1/1} .r34{aspect-ratio:3/4}
.feedlist li > a:first-child,.fresh .fig,.s-pod .fig{width:64px}
.sblock .fig{width:60px}

/* --- the rest of the article rail ---------------------------------------- */
.topics{display:flex;flex-wrap:wrap;gap:7px}
.topics a{
  display:inline-flex;align-items:center;height:30px;padding:0 13px;
  border:.5px solid var(--hair);border-radius:var(--r-pill);background:var(--bg);
  font-size:12.5px;font-weight:700;color:var(--label-2);white-space:nowrap}
.topics a:hover{background:var(--ink);color:var(--bg);border-color:transparent}
.submit{
  background:var(--card);border:.5px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px}
.submit .lbl{
  display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;color:var(--brand-ink)}
.submit .lbl i{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;font-style:normal}
.submit h3,.submit h4{font-family:var(--display);font-size:17px;font-weight:800;margin:10px 0 0;color:var(--ink)}
.submit p,.panel > p{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--label-3)}
.btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.btns .primary,a.primary{
  display:inline-flex;align-items:center;height:38px;padding:0 18px;border:0;
  border-radius:var(--r-pill);background:var(--brand-grad);color:#fff;
  font-size:12.5px;font-weight:800}
.btns .primary:hover,a.primary:hover{filter:brightness(1.07);color:#fff}
.fine{display:block;margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--label-3)}
.showmore{
  display:flex;align-items:center;justify-content:center;height:40px;margin-top:14px;
  border:.5px solid var(--hair);border-radius:var(--r-pill);background:var(--bg);
  font-size:12.5px;font-weight:800;color:var(--ink)}
.showmore:hover{background:var(--ink);color:var(--bg)}
.paper{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:14px;align-items:center}
.paper .fig{width:96px}
.dark-pill{
  display:inline-flex;align-items:center;height:38px;padding:0 17px;border:0;
  border-radius:var(--r-pill);background:var(--panel);color:#fff;font-size:12.5px;font-weight:800}
.dark-pill:hover{background:var(--brand);color:#fff}
.wx{
  background:var(--card);border:.5px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px;display:flex;align-items:center;gap:15px;color:var(--label-2)}
.wx .t{font-family:var(--display);font-size:32px;font-weight:900;letter-spacing:-1.4px;line-height:1;color:var(--ink);flex:none}
.wx .d{font-size:13px;font-weight:600;color:var(--label-3);line-height:1.4}
.wx h3{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--label-3);margin:0 0 4px}

/* --- the electricity price and the scores -------------------------------- */
.price-now{font-family:var(--display);font-size:32px;font-weight:900;letter-spacing:-1.4px;color:var(--ink)}
.spark{display:flex;align-items:flex-end;gap:2px;height:38px;margin-top:10px}
.mini{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:12.5px}
.mini .badge{
  position:static;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  color:#fff;font-size:11px;font-weight:800;padding:0;letter-spacing:0;text-transform:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.mt{font-weight:600;color:var(--label-3)}
.ms{margin-left:auto;font-weight:800;color:var(--ink)}
.score{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:.5px solid var(--sep)}
.score:last-child{border-bottom:0}
.score .team{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink)}
.score .res{font-family:var(--display);font-weight:900;font-size:14px;color:var(--ink)}
.score .st{font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--label-3)}
.news-note{margin:0;font-size:11.5px;color:var(--label-3);line-height:1.5}

/* --- the pages this design had not reached ------------------------------- */
.p-sheet{
  background:var(--card);border:.5px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--shadow);padding:30px 32px 34px;color:var(--label-2)}
.main-col{min-width:0}
.idp-body{min-width:0}
.toc-t{font-family:var(--display);font-weight:700;line-height:1.3}
.hy-toc-mount:empty,.hy-notes-mount:empty{display:none}
.hy-notes{display:none}
.hy-notes-mount > *{
  background:var(--bg);border-left:3px solid var(--brand);border-radius:0 14px 14px 0;
  padding:13px 15px;margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--label-3)}

/* ===========================================================================
   10. JUURI NYT

   Where the page title used to be. A card like every other card on this page,
   with the newest line in it and the rest turning over behind.
   ======================================================================== */

.livestrip{
  display:flex;align-items:center;gap:14px;margin:24px 0 0;
  background:var(--card);border:.5px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--shadow);padding:0 18px 0 0;overflow:hidden}
.livestrip .live-tag{
  flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;gap:8px;
  background:var(--brand-grad);color:#fff;
  padding:15px 18px;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:#fff;flex:none;
  animation:katsepulse 1.9s infinite}
@keyframes katsepulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
  70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.ticker-track{position:relative;flex:1;min-width:0;height:22px}
.ticker-item{
  position:absolute;inset:0;display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(7px);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease}
.ticker-item.on{opacity:1;transform:none;pointer-events:auto}
.live-text{
  flex:1;min-width:0;font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:-.3px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticker-item:hover .live-text{color:var(--brand-ink)}
.ticker-item time{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--label-3)}
.live-cta{
  flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--brand-ink);white-space:nowrap}
.live-cta:hover{text-decoration:underline}

@media (max-width:720px){
  .livestrip{padding-right:14px;gap:10px}
  .livestrip .live-tag{padding:13px 13px;font-size:10px;letter-spacing:.6px}
  .live-text{font-size:14px}
  .ticker-item time,.live-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-item{transition:none}
  .live-dot{animation:none}
}

/* ===========================================================================
   11. THE BANDS UNDER THE WALL

   Written against what the templates print, not against the mock-up they were
   proposed in: the portrait is an <img> from get_the_post_thumbnail(), and a
   gallery cover is the .shot wrapper tahti_thumb() draws.
   ======================================================================== */

/* --- A. the people -------------------------------------------------------- */
.stars{
  display:flex;gap:var(--gap);overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
.star{
  flex:0 0 176px;scroll-snap-align:start;
  background:var(--card);border:.5px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;text-align:center;padding:20px 14px 18px;
  transition:transform .18s ease,box-shadow .18s ease}
.star:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
/* display:block — width and height do not apply to an inline box, and the
   portrait came out a strip the width of the card */
.star .face{
  display:block;width:84px;height:84px;border-radius:50%;margin:0 auto;overflow:hidden;
  background:var(--fill);box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--brand)}
.star .face img,.star .face .ph,.star .face i{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.star .face .ini{
  display:grid;place-items:center;background:var(--brand-grad);color:#fff;
  font-family:var(--display);font-size:32px;font-weight:900;font-style:normal}
.star h4{
  font-family:var(--display);font-size:15.5px;font-weight:800;margin:12px 0 0;
  color:var(--ink);letter-spacing:-.3px;line-height:1.25}
.star:hover h4{color:var(--brand-ink)}
.star .role{display:block;margin-top:4px;font-size:12px;color:var(--label-3);font-weight:600}

/* --- B. the questions ----------------------------------------------------- */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.qa a{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;
  background:var(--card);border:.5px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px 18px;
  transition:transform .18s ease,box-shadow .18s ease}
.qa a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.qa .mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--display);font-size:22px;font-weight:900;color:#fff;background:var(--brand-grad)}
.qa h4{
  font-family:var(--display);font-size:16px;font-weight:800;color:var(--ink);
  line-height:1.28;margin:2px 0 0}
.qa a:hover h4{color:var(--brand-ink)}
.qa p{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--label-3)}
.qa .who{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--label-3)}

/* --- D. the galleries ----------------------------------------------------- */
.galband{background:var(--panel);border-radius:var(--r-xl);padding:30px 32px 34px;color:#fff}
.galband .gh{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.galband h2{font-family:var(--display);font-size:24px;font-weight:900;letter-spacing:-1px;color:#fff}
.galband .gh a{font-size:13px;font-weight:700;color:#FEABAB;white-space:nowrap}
.galband .gh a:hover{color:#fff}
.galgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.gcard{position:relative;display:block;border-radius:16px;overflow:hidden}
.gcard .shot,.gcard .ph{aspect-ratio:3/3.4;overflow:hidden}
.gcard img{width:100%;height:100%;object-fit:cover}
.gcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,7,12,.94) 0%,rgba(8,7,12,.5) 40%,rgba(8,7,12,0) 74%)}
.gcard .cap{position:absolute;left:14px;right:14px;bottom:13px;z-index:2}
.gcard h4{font-family:var(--display);font-size:15px;font-weight:800;color:#fff;line-height:1.25;margin:0}
.gcard .cnt{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:4px 9px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.16);
  border:.5px solid rgba(255,255,255,.3);font-size:10.5px;font-weight:800;color:#fff}
.gcard .cnt svg{width:12px;height:12px}

/* --- E. the topics -------------------------------------------------------- */
.topicgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.topic{
  position:relative;border-radius:var(--r);padding:20px 20px 18px;min-height:132px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;
  transition:transform .18s ease}
.topic:hover{transform:translateY(-4px)}
.topic h4{
  font-family:var(--display);font-size:19px;font-weight:900;letter-spacing:-.6px;
  color:inherit;margin:0}
.topic .cn{font-size:12.5px;font-weight:700;opacity:.92;color:inherit}
.topic .arw{
  position:absolute;right:16px;top:16px;width:28px;height:28px;border-radius:50%;
  border:1px solid currentColor;display:grid;place-items:center;opacity:.55}
.topic:hover .arw{opacity:1}
.topic .arw svg{width:13px;height:13px}

/* --- F. whose birthday it is ---------------------------------------------- */
.bday{
  background:var(--card);border:.5px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 22px;margin-top:26px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bday .lead{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.bday .cake{
  width:46px;height:46px;border-radius:16px;display:grid;place-items:center;flex:none;
  background:var(--g-yellow);color:var(--g-yellow-ink)}
.bday .cake svg{width:22px;height:22px}
.bday .lead b{
  display:block;font-family:var(--display);font-size:17px;font-weight:900;
  color:var(--ink);letter-spacing:-.4px}
.bday .lead > div > span{display:block;font-size:12.5px;color:var(--label-3);font-weight:600;margin-top:2px}
.bday .who{display:flex;gap:20px;flex:1;flex-wrap:wrap;min-width:0}
.bday .who a{display:flex;align-items:center;gap:10px;min-width:0}
.bday .who .face{
  display:block;width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
  object-fit:cover;background:var(--brand-grad)}
.bday .who .nm{min-width:0}
.bday .who .nm b{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.bday .who .nm span{display:block;font-size:11.5px;color:var(--label-3);font-weight:600}
.bday .who a:hover .nm b{color:var(--brand-ink)}

@media (max-width:1024px){
  .galgrid,.topicgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .qa{grid-template-columns:1fr}
  .galband{padding:22px 18px 26px}
  .bday{gap:16px}
  .bday .who{gap:14px}
}

/* the Load more button, once the script has taken it over */
.more{display:flex;flex-direction:column;align-items:center;gap:8px}
.loadmore.is-working{opacity:.7;cursor:progress}
.loadmore.is-done{
  opacity:.65;cursor:default;background:var(--card);color:var(--label-3);border-color:var(--sep)}
.loadmore.is-done:hover{background:var(--card);color:var(--label-3)}
.more-live{
  margin:0;font-size:12px;color:var(--label-3);font-weight:600;min-height:1em}