/*! tuorein-css 1.15.0 — must match TAHTI_VERSION in functions.php */
/* ============================================================
TUOREIMMAT UUTISET — iOS Light Theme
Design DNA: #F2F2F7 page · white rounded cards · soft shadow
SF/system type · iOS system-colour category chips
============================================================ */
/* ---------- 1. TOKENS ---------- */
:root{
/* surfaces */
--bg:#F2F2F7;
--card:#FFFFFF;
--card-alt:#FAFAFC;
--fill:#78788014;
--fill-strong:#7878801f;
/* text */
--label:#1C1C1E;
--label-2:#3C3C4399;
--label-3:#3C3C4359;
--sep:#3C3C431f;
--sep-soft:#3C3C4314;
/* iOS system colours */
--blue:#007AFF;
--green:#34C759;
--indigo:#5856D6;
--orange:#FF9500;
--pink:#FF2D55;
--purple:#AF52DE;
--red:#FF3B30;
--teal:#30B0C7;
--yellow:#FFB800;
--brown:#A2845E;
/* geometry */
--r-xl:22px;
--r-lg:18px;
--r-md:14px;
--r-sm:10px;
--r-pill:980px;
/* elevation */
--sh-1:0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
--sh-2:0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(28,28,30,.06);
--sh-3:0 2px 6px rgba(0,0,0,.05), 0 18px 46px rgba(28,28,30,.10);
/* type */
--sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* layout */
--gap:20px;
--w-main:1px;
--maxw:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
/* Not overflow-x:hidden. Hidden on one axis computes the other to auto, so
body becomes a scroll container and every position:sticky inside it — the
masthead, the ad that follows the scroll, the rail — positions against a
box that never scrolls. The root clips instead; it does not. */
overflow-x:visible;
background:var(--bg);
color:var(--label);
font-family:var(--sans);
font-size:16px;
line-height:1.45;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.08}
/* ---------- 2. PRIMITIVES ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.card{
background:var(--card);
border-radius:var(--r-lg);
box-shadow:var(--sh-2);
overflow:hidden;
}
.card-pad{padding:18px}
/* category chip */
.chip{
display:inline-flex;align-items:center;gap:5px;
height:22px;padding:0 9px;
border-radius:var(--r-pill);
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:#fff;white-space:nowrap;
}
.c-viihde{background:var(--pink)}
.c-julkkis{background:var(--purple)}
.c-suhteet{background:var(--red)}
.c-tv{background:var(--indigo)}
.c-muoti{background:var(--teal)}
.c-musiikki{background:var(--brown)}
.c-kotimaa{background:var(--blue)}
.c-urheilu{background:var(--green)}
.c-ruoka{background:var(--orange)}
.c-kuninkaalliset{background:var(--yellow);color:#3a2c00}
/* text-only category label (list rows) */
.kicker{
font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.k-viihde{color:var(--pink)} .k-julkkis{color:var(--purple)}
.k-suhteet{color:var(--red)} .k-tv{color:var(--indigo)}
.k-muoti{color:var(--teal)} .k-musiikki{color:var(--brown)}
.k-kotimaa{color:var(--blue)} .k-urheilu{color:var(--green)}
.k-ruoka{color:var(--orange)} .k-kuninkaalliset{color:#B58A00}
.time{font-size:12px;font-weight:600;color:var(--label-3);letter-spacing:0}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plus{
display:inline-flex;align-items:center;height:18px;padding:0 6px;
border-radius:5px;background:var(--label);color:var(--bg);
font-size:10px;font-weight:800;letter-spacing:.08em;
}
/* image placeholders (no external requests) */
.ph{position:relative;overflow:hidden;background:#D8D8DE}
/* --- the mark for a story with no picture --------------------------------
This is the little framed-mountain glyph, and it is meant for an empty
picture slot: a card whose story has no photograph yet gets a gradient and
this mark on it, rather than a blank rectangle.
It was painting on every .ph — including every one with a photograph in it.
tahti.css draws its own ::after on .ph as a darkening scrim and pins it at
z-index:3; this rule replaced the scrim's background with the glyph and
said nothing about the stacking, so it inherited the 3 and sat on top of
the picture. A camera icon in the middle of a photograph, on the hero, on
every card, on every thumbnail on the site.
Two things fix it, and the second is the one that matters. :has() takes the
mark away when the slot holds a picture. And underneath that, the picture
is lifted above the mark, so the glyph is behind the photograph in any
engine that does not know :has() — no version of this can put it back on
top of an image.
------------------------------------------------------------------------ */
.ph::after{
content:"";position:absolute;inset:0;z-index:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='8.5' cy='9.6' r='1.7'/%3E%3Cpath d='M20.5 15.5L16 11l-8 8.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:38px;
opacity:.5;
}
.ph:has(img)::after,
.ph:has(picture)::after,
.ph:has(video)::after{content:none}
.ph > img,.ph > picture,.ph > video,
.ph .wp-post-image{position:relative;z-index:1}
/* The grain overlay is the engine's too, and it is pinned above the picture
at z-index:2. --grain is not a token this design defines, so the layer is
empty — but an empty layer with mix-blend-mode on it is still a layer. */
.ph::before{content:none}
.ph-1{background:linear-gradient(135deg,#FFB1A0,#FF6A88)}
.ph-2{background:linear-gradient(135deg,#A6C8FF,#4F8DF5)}
.ph-3{background:linear-gradient(135deg,#CBB0FF,#8E6BFF)}
.ph-4{background:linear-gradient(135deg,#9FE9C6,#2FBF57)}
.ph-5{background:linear-gradient(135deg,#FFD9A0,#FF9500)}
.ph-6{background:linear-gradient(135deg,#A6E7F0,#2FA8C4)}
.ph-7{background:linear-gradient(135deg,#FFC3DC,#FF2D55)}
.ph-8{background:linear-gradient(135deg,#CDD2DC,#8E8E93)}
.ph-9{background:linear-gradient(135deg,#FFE9A6,#FFB800)}
.ph-10{background:linear-gradient(135deg,#D9C4A9,#A2845E)}
.ph-11{background:linear-gradient(135deg,#B9C0FF,#5856D6)}
.ph-12{background:linear-gradient(135deg,#FFC7C2,#FF3B30)}
.r-16-9{aspect-ratio:16/9}
.r-4-3{aspect-ratio:4/3}
.r-1-1{aspect-ratio:1/1}
.r-3-2{aspect-ratio:3/2}
/* hover */
.hover{transition:transform .18s ease, box-shadow .18s ease}
.hover:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.linkline{transition:color .15s ease}
.linkline:hover{color:var(--blue)}
/* ---------- 3. HEADER ---------- */
.topbar{
background:var(--card);
border-bottom:1px solid var(--sep-soft);
font-size:12.5px;color:var(--label-2);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:36px;gap:16px}
.topbar-left{display:flex;align-items:center;gap:14px}
.topbar-dot{width:5px;height:5px;border-radius:50%;background:var(--label-3)}
.saa{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--label)}
.topbar-right{display:flex;align-items:center;gap:14px}
.tb-link{font-weight:600;color:var(--label-2)}
.tb-link:hover{color:var(--blue)}
.masthead{
position:sticky;top:0;z-index:60;
background:rgba(255,255,255,.82);
backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid var(--sep-soft);
}
.masthead .wrap{display:flex;align-items:center;gap:16px;height:62px}
.burger{
width:38px;height:38px;border-radius:12px;background:var(--fill);
display:grid;place-items:center;flex:0 0 auto;
}
.burger span{display:block;width:16px;height:1.8px;background:var(--label);border-radius:2px;position:relative}
.burger span::before,.burger span::after{
content:"";position:absolute;left:0;width:16px;height:1.8px;background:var(--label);border-radius:2px;
}
.burger span::before{top:-5px}.burger span::after{top:5px}
.brand{display:flex;align-items:baseline;gap:8px;margin-right:auto}
.brand-mark{
font-size:22px;font-weight:900;letter-spacing:-.045em;color:var(--label);
}
.brand-mark em{font-style:normal;color:var(--red)}
.brand-tag{
font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--label-3);
}
.mh-actions{display:flex;align-items:center;gap:8px}
.icon-btn{
width:36px;height:36px;border-radius:var(--r-pill);background:var(--fill);
display:grid;place-items:center;color:var(--label-2);
}
.icon-btn:hover{background:var(--fill-strong);color:var(--label)}
.icon-btn svg{width:17px;height:17px}
.btn-solid{
height:36px;padding:0 16px;border-radius:var(--r-pill);
background:var(--red);color:#fff;font-size:14px;font-weight:700;
display:inline-flex;align-items:center;
}
.btn-solid:hover{filter:brightness(.94)}
.btn-ghost{
height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--fill);
font-size:14px;font-weight:650;display:inline-flex;align-items:center;gap:6px;
}
.btn-ghost:hover{background:var(--fill-strong)}
/* nav chips */
.navbar{background:var(--card);border-bottom:1px solid var(--sep-soft)}
.navscroll{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:11px 0;scrollbar-width:none;max-width:100%}
.navscroll::-webkit-scrollbar{display:none}
.nav-chip{
flex:0 0 auto;height:32px;padding:0 14px;border-radius:var(--r-pill);
background:var(--fill);font-size:14px;font-weight:650;color:var(--label);
display:inline-flex;align-items:center;
transition:background .15s ease,color .15s ease;
}
.nav-chip:hover{background:var(--fill-strong)}
/* --- the chip the reader is standing on ----------------------------------
This was ink-on-white by way of background:var(--label);color:#fff, which
is right in one scheme and invisible in the other: --label is #1C1C1E in
light and #F2F2F7 at night, so at night it printed white text on a
near-white pill — measured at 1.12:1, against a 4.5:1 floor. The page
colour is the ink for a pill drawn in the text colour, in both schemes. */
.nav-chip.is-active{background:var(--label);color:var(--bg)}
.nav-chip.nv-pink:hover{background:#FF2D5518;color:var(--pink)}
.nav-chip.nv-purple:hover{background:#AF52DE18;color:var(--purple)}
.nav-chip.nv-red:hover{background:#FF3B3018;color:var(--red)}
.nav-chip.nv-indigo:hover{background:#5856D618;color:var(--indigo)}
.nav-chip.nv-teal:hover{background:#30B0C718;color:var(--teal)}
.nav-chip.nv-brown:hover{background:#A2845E18;color:var(--brown)}
.nav-chip.nv-blue:hover{background:#007AFF18;color:var(--blue)}
.nav-chip.nv-green:hover{background:#34C75918;color:var(--green)}
.nav-chip.nv-orange:hover{background:#FF950018;color:var(--orange)}
/* ---------- 4. LIVE STRIP ---------- */
.livestrip{margin:18px 0 0}
.livestrip .inner{
display:flex;align-items:center;gap:14px;
background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);
padding:12px 16px;border-left:4px solid var(--red);
}
.live-tag{
display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);
}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #FF3B3066}70%{box-shadow:0 0 0 8px #FF3B3000}100%{box-shadow:0 0 0 0 #FF3B3000}}
.live-text{font-size:15px;font-weight:650;flex:1 1 auto;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-cta{flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--red)}
/* ---------- 5. GRID ---------- */
.layout{
display:grid;
grid-template-columns:minmax(0,1fr) 320px 300px;
gap:var(--gap);
align-items:start;
padding:18px 0 40px;
}
.col-main{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.col-rail{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.col-ads{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
/* only the last ad follows the scroll */
.col-ads .ad:last-child{position:sticky;top:78px}
/* ---------- 6. HERO ---------- */
.hero{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.hero-head{padding:26px 26px 18px}
.hero h1{
font-size:clamp(30px,3.6vw,46px);
font-weight:900;letter-spacing:-.035em;line-height:1.02;margin:10px 0 0;
}
.hero-collage{
display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;
gap:3px;background:#fff;height:clamp(260px,30vw,392px);
}
.hero-collage .ph{width:100%;height:100%}
.hero-collage .ph:first-child{grid-row:1/3}
.hero-foot{padding:16px 26px 22px}
.hero-dek{font-size:16.5px;color:var(--label-2);font-weight:500;margin:0 0 12px;line-height:1.4}
/* ---------- 7. CARDS ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.acard{display:flex;flex-direction:column;background:var(--card);
border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;height:100%}
.acard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard h3{font-size:19px;line-height:1.14;letter-spacing:-.024em}
.acard.sm h3{font-size:16px}
.acard.lg h3{font-size:24px;letter-spacing:-.028em}
.acard p{margin:0;font-size:14px;color:var(--label-2);line-height:1.42}
.acard .meta{margin-top:auto}
/* horizontal list row */
.row{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--sep-soft)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row:first-child{padding-top:0}
.row .thumb{flex:0 0 96px;height:66px;border-radius:var(--r-sm)}
.row .rbody{min-width:0;display:flex;flex-direction:column;gap:5px}
.row h4{font-size:15.5px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
/* section header */
/* --- the head of a band ---------------------------------------------------
This was the worst-measuring thing on the front page and it was one
declaration: margin:6px 2px 0.
The engine draws a section head as a title over a rule — position:relative,
padding-bottom:11px, margin-bottom:18px, and an ::after pinned to bottom:0.
The shorthand above replaced that margin with a zero and the padding went
with it, which left the rule sitting on the text's own baseline inside a
23px box with nothing under it. Measured: the gap between the heading and
the band's first card was 0px, and the 2px rule crossed into the top of the
cards. Every band on the page. That is the line running through the
headlines in the screenshots — not a border on the cards, the heading's own
underline printed on top of them.
Restored, and finished: the head gets its air back, the rule takes the
band's own colour for its first stretch instead of the same blue for all
ten, and the bar and that stretch line up so they read as one mark rather
than two.
------------------------------------------------------------------------ */
.sec-head{
position:relative;
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin:0 2px 18px;padding:0 0 11px;border-bottom:0}
.sec-head::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
background:linear-gradient(90deg,
var(--sec,var(--blue)) 0,
var(--sec,var(--blue)) 64px,
var(--sep) 64px)}
.sec-title{display:flex;align-items:center;gap:10px;min-width:0}
.sec-bar{width:4px;height:22px;border-radius:3px;background:var(--sec,var(--label));flex:none}
.sec-title h2{font-size:22px;letter-spacing:-.03em;font-weight:800;line-height:1.16;margin:0}
/* The link out keeps one colour across the whole page.
It was tempting to give it --sec too, and three of the six accents are
under 4.5:1 as 13.5px text on white — a decorative bar can be any colour
the section likes, a line of text cannot. Blue is the site's link colour
everywhere else, and a link that changes colour by which band it is in is
not obviously a link at all. */
.sec-more{font-size:13.5px;font-weight:700;color:var(--blue);
display:inline-flex;align-items:center;gap:4px;flex:none;white-space:nowrap}
.sec-more:hover{text-decoration:underline}
@media(max-width:560px){
.sec-head{margin-bottom:14px;padding-bottom:9px;gap:10px}
.sec-title h2{font-size:19.5px}
.sec-bar{height:20px}
.sec-more{font-size:12.5px}
}
.sb-viihde{background:var(--pink)}.sb-julkkis{background:var(--purple)}
.sb-suhteet{background:var(--red)}.sb-tv{background:var(--indigo)}
.sb-muoti{background:var(--teal)}.sb-musiikki{background:var(--brown)}
.sb-kotimaa{background:var(--blue)}.sb-urheilu{background:var(--green)}
.sb-plus{background:var(--label)}
/* "nyt puhuttaa" strip */
.talkstrip{
background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);
padding:14px 16px;
}
.talkstrip .th{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.talkstrip .th b{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.talkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.talk{display:flex;gap:10px;align-items:flex-start}
.talk .n{
flex:0 0 22px;height:22px;border-radius:50%;background:var(--fill);
display:grid;place-items:center;font-size:11.5px;font-weight:800;color:var(--label-2);
}
.talk h4{font-size:14px;line-height:1.22;font-weight:700;letter-spacing:-.012em;color:var(--label);margin-bottom:4px}
.talk span span{font-size:11.5px;color:var(--label-3);font-weight:600;display:block}
/* PLUS band */
.plusband{background:var(--label);border-radius:var(--r-xl);padding:20px 22px 22px;color:var(--bg)}
.plusband .sec-title h2{color:var(--bg)}
.plusband .sec-more{color:#5AC8FA}
.plusband .sec-bar{background:#FFB800}
.plusband .grid-3{margin-top:16px}
.plusband .acard{background:#2C2C2E;box-shadow:none}
.plusband .acard h3{color:#fff}
.plusband .acard p{color:#EBEBF599}
.plusband .time{color:#EBEBF57a}
.plusband .plus{background:#FFB800;color:#3a2c00}
/* ---------- 8. RAIL WIDGETS ---------- */
.widget{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.widget-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:15px 16px 0;
}
.widget-head h3{font-size:17px;letter-spacing:-.024em;font-weight:850}
.widget-body{padding:12px 16px 16px}
.tabs{display:flex;gap:4px;padding:12px 16px 0}
.tab{
height:28px;padding:0 11px;border-radius:var(--r-pill);
font-size:12.5px;font-weight:700;color:var(--label-2);background:transparent;
}
.tab.is-active{background:var(--red);color:#fff}
.tabpanel{display:none}
.tabpanel.is-active{display:block}
.toplist li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--sep-soft);align-items:flex-start}
.toplist li:last-child{border-bottom:0;padding-bottom:0}
.toplist .num{
flex:0 0 22px;height:22px;border-radius:50%;
display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--red);
}
.toplist li:nth-child(n+4) .num{background:var(--fill-strong);color:var(--label-2)}
.toplist h4{font-size:14.5px;line-height:1.22;font-weight:650;letter-spacing:-.012em}
.latest li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--sep-soft)}
.latest li:last-child{border-bottom:0;padding-bottom:0}
.latest .thumb{flex:0 0 66px;height:48px;border-radius:9px}
.latest h4{font-size:14px;line-height:1.22;font-weight:650;letter-spacing:-.012em;margin-bottom:4px}
/* small data widgets */
.mini{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--sep-soft)}
.mini:last-child{border-bottom:0;padding-bottom:0}
.mini .badge{
flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;
font-size:15px;font-weight:800;color:#fff;
}
.mini .mt{font-size:14px;font-weight:700;line-height:1.2}
.mini .ms{font-size:12px;color:var(--label-2);font-weight:550}
.price-now{display:flex;align-items:baseline;gap:8px;margin:4px 0 10px}
.price-now b{font-size:34px;font-weight:850;letter-spacing:-.03em;color:var(--green)}
.price-now span{font-size:13px;color:var(--label-2);font-weight:600}
.spark{display:flex;align-items:flex-end;gap:3px;height:44px}
.spark i{flex:1;background:#34C75933;border-radius:3px 3px 0 0;display:block}
.spark i.hi{background:var(--green)}
.horo{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.horo a{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding:9px 2px;border-radius:12px;background:var(--fill);
font-size:10.5px;font-weight:650;color:var(--label-2);
}
.horo a:hover{background:var(--fill-strong);color:var(--label)}
.horo b{font-size:16px;line-height:1}
.score{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--sep-soft)}
.score:last-child{border-bottom:0;padding-bottom:0}
.score .team{font-size:13.5px;font-weight:650}
.score .res{font-size:14px;font-weight:800;letter-spacing:-.01em}
.score .st{font-size:11px;font-weight:700;color:var(--green)}
.news-form{display:flex;flex-direction:column;gap:9px}
.news-form input{
height:40px;border-radius:12px;border:1px solid var(--sep);background:var(--card-alt);
padding:0 13px;font-size:14px;font-family:inherit;color:var(--label);
}
.news-form input:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:transparent}
.news-form button{
height:40px;border-radius:12px;background:var(--blue);color:#fff;font-size:14.5px;font-weight:700;
}
.news-form button:hover{filter:brightness(.94)}
.news-note{font-size:11.5px;color:var(--label-3);line-height:1.35}
/* ---------- 9. ADS ---------- */
.ad{
background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);
padding:10px;text-align:center;
}
.ad-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--label-3);margin-bottom:8px}
.ad-slot{
border-radius:12px;border:1px dashed var(--sep);background:var(--card-alt);
display:grid;place-items:center;color:var(--label-3);
font-size:12.5px;font-weight:700;letter-spacing:.04em;
}
.ad-300x600 .ad-slot{height:600px}
.ad-300x250 .ad-slot{height:250px}
.ad-inline{margin:0;}
.ad-inline .ad-slot{height:110px}
/* ---------- 10. FOOTER ---------- */
.footer{background:var(--card);border-top:1px solid var(--sep-soft);margin-top:12px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding:34px 0 28px}
.footer h4{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label-3);margin-bottom:12px}
.footer li{margin-bottom:8px}
.footer li a{font-size:14px;font-weight:550;color:var(--label-2)}
.footer li a:hover{color:var(--blue)}
.footer-about p{font-size:13.5px;color:var(--label-2);line-height:1.5;margin:10px 0 0;max-width:34ch}
.social{display:flex;gap:8px;margin-top:14px}
.footer-bottom{
border-top:1px solid var(--sep-soft);padding:16px 0 30px;
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
font-size:12.5px;color:var(--label-3);
}
.footer-bottom nav{display:flex;gap:16px;flex-wrap:wrap}
.footer-bottom nav a{font-weight:600;color:var(--label-2)}
/* ---------- 11. RESPONSIVE ---------- */
@media (max-width:1240px){
.layout{grid-template-columns:minmax(0,1fr) 300px}
.col-ads{grid-column:1/-1;flex-direction:row}
.col-ads .ad:last-child{position:static}
.col-ads .ad{flex:1}
.ad-300x600 .ad-slot{height:250px}
}
@media (max-width:980px){
.layout{grid-template-columns:minmax(0,1fr)}
.col-rail{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.grid-3{grid-template-columns:1fr 1fr}
.talkgrid{grid-template-columns:1fr 1fr}
.hero-collage{height:300px}
}
@media (max-width:720px){
:root{--gap:14px}
.wrap{padding:0 14px}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.col-rail{grid-template-columns:1fr}
.talkgrid{grid-template-columns:1fr}
.col-ads{flex-direction:column}
.footer-top{grid-template-columns:1fr 1fr;gap:22px}
.hero-head{padding:20px 18px 14px}
.hero-foot{padding:14px 18px 18px}
.hero-collage{grid-template-columns:1fr;grid-template-rows:1fr;height:220px}
.hero-collage .ph:first-child{grid-row:1/2}
.hero-collage .ph:not(:first-child){display:none}
.topbar-left .hide-s{display:none}
.brand-tag{display:none}
.row .thumb{flex:0 0 84px;height:58px}
}
@media (max-width:520px){
.footer-top{grid-template-columns:1fr}
.mh-actions .hide-xs{display:none}
.masthead .wrap{gap:10px;height:56px}
.brand-mark{font-size:17px}
.btn-solid{padding:0 12px;font-size:13px;height:34px}
.burger{width:34px;height:34px;border-radius:11px}
.icon-btn{width:34px;height:34px}
.footer .brand-mark{font-size:20px}
}
/* The clip the reset used to put on body, moved to where it does no harm. */
html{overflow-x:clip;max-width:100%}
/* ==========================================================================
THE NAMES THE TEMPLATE DOES NOT USE
The join below this was written against the previous design's vocabulary,
and the two templates name the same ideas differently: --fill-strong here
where that one said --fill-2, --sh-2 where it said --shadow, --sans where
it said --ui. Three things it does not name at all — a darker twin of each
accent for text on a light card, an easing curve, a radius above 22px.
Those are defined once, here, before anything reads them. Everything else
the join needs is in the block that follows.
========================================================================== */
:root{
/* Each accent one step darker. #007AFF as text on white measures 3.1:1,
under the 4.5:1 a link in a paragraph needs; the bright one stays for
fills and the dark twin carries the type. */
--blue-d:#0069DB; --green-d:#1E8E3E; --indigo-d:#4A48C4;
--orange-d:#C96A00; --pink-d:#DB214A; --purple-d:#8E3CB8;
--red-d:#D8281E; --teal-d:#0F8FA6; --brown-d:#7E6446;
--yellow-d:#9A6E00;
/* the previous design's names for surfaces and rules */
--fill-2:var(--fill-strong);
--sep-2:var(--sep);
/* elevation */
--shadow:var(--sh-2);
--sh:var(--sh-1);
--sh-h:var(--sh-3);
--hair:0 0 0 1px var(--sep-soft);
/* geometry the template stops short of */
--r-2xl:26px;
--r-3xl:30px;
/* type, measure, motion */
--ui:var(--sans);
--se:var(--sans);
--t-body:16px;
--wrap:var(--maxw);
--ease:cubic-bezier(.2,.7,.3,1);
/* the three the engine reads per element; a floor so nothing lands unpainted */
--sec:var(--blue-d);
--tint:var(--fill);
--tone:var(--label-2);
}
/* ==========================================================================
THE BRIDGE
Everything above this line is the design: the template's own tokens, its
own components, its own responsive table. Everything below it is the join
between that design and the engine underneath.
tahti.css styles the parts of the site the front page never shows — the
article body and its fourteen block types, the tables, the contents list,
the profile dashboards, the converter's output, the comment thread. Those
rules read a different set of token names: --ink where this design says
--label, --line where it says --sep, --brand where it says --blue-d. Rather
than rewriting a thousand rules in the engine, the names are pointed at
each other here, once. Change a value at the top of this file and the whole
site follows, article pages included.
========================================================================== */
:root{
/* --- surfaces -------------------------------------------------------- */
--band:var(--bg); --band-2:#FAFAFC;
--sheet:var(--card); --card-2:#FBFBFD; --lift:var(--card);
--block:#F7F7FA; --surface:#F7F7FA; --warm:#F7F7FA; --cream:#F7F7FA;
--strip:#FAFAFC;
/* --- rules ------------------------------------------------------------ */
--line:var(--sep-2); --line-soft:var(--sep); --hair-c:var(--sep);
--gut:22px; --max:var(--wrap); --rail:320px;
/* --- ink -------------------------------------------------------------- */
--ink:var(--label); --ink-2:var(--label-2); --muted:var(--label-2); --ink-3:var(--label-3);
--near:var(--label); --navy:var(--label);
/* --- the one accent, and its family ----------------------------------
The design's blue is #007AFF, which is iOS's and which is right on a
button. As text on white it measures 3.1:1 — under the 4.5:1 a link in a
paragraph needs — so the reading blue is the darker twin and the bright
one is kept for fills. */
--brand:var(--blue-d); --brand-lt:var(--blue); --brand-dk:#004FA8;
--brand-rgb:0,105,219; --indigo:var(--blue-d);
--brand-read:var(--blue-d); --brand-ink:#004FA8; --link:var(--blue-d);
--tintblue:rgba(0,122,255,.10);
--brass:var(--brown-d); --gold:var(--brown-d); --yellow:var(--orange-d); --hot:var(--orange-d);
/* Live, and only live. */
--c-royal:var(--red-d); --c-royal-rgb:222,43,33;
/* --- the section accents ---------------------------------------------
Six, from the design's own palette, in the dark twins because every one
of them is used as text on a light card. functions.php hands each
category one of these in term order, so a site whose sections are not
named the way the theme expects still gets six distinguishable ones. */
--c-a1:var(--blue-d); --c-a1-rgb:0,105,219;
--c-a2:var(--teal-d); --c-a2-rgb:11,143,163;
--c-a3:var(--purple-d); --c-a3-rgb:142,63,184;
--c-a4:var(--green-d); --c-a4-rgb:30,142,62;
--c-a5:var(--orange-d); --c-a5-rgb:185,106,0;
--c-a6:var(--brown-d); --c-a6-rgb:126,100,70;
--c-viihde:var(--blue-d); --c-viihde-rgb:0,105,219;
--c-sarjat:var(--teal-d); --c-sarjat-rgb:11,143,163;
--c-julkkis:var(--purple-d);--c-julkkis-rgb:142,63,184;
--c-elokuvat:var(--orange-d);--c-elokuvat-rgb:185,106,0;
--c-musiikki:var(--indigo-d);--c-musiikki-rgb:75,73,196;
--c-viihde-lt:var(--blue); --c-sarjat-lt:var(--teal);
--c-julkkis-lt:var(--purple); --c-elokuvat-lt:var(--orange);
--c-musiikki-lt:var(--indigo);
/* --- the margin-note washes ------------------------------------------- */
--note-zero:rgba(0,105,219,0);
--note-soft:rgba(0,105,219,.045);
--note-soft-b:rgba(0,105,219,.06);
--note-strong:rgba(0,105,219,.09);
--note-edge:rgba(0,105,219,.22);
--note-edge-num:rgba(0,105,219,.22);
--note-edge-link:rgba(0,105,219,.22);
/* --- radii and depth, in the engine's names --------------------------- */
/* --r and --r-l are names the engine uses for shapes this template already
has. --r-xl is NOT aliased here: the template defines it as 22px and the
previous design's bridge pointed it at 26, which quietly widened the
corner of every card, hero and panel on the site. */
--r:var(--r-md); --r-l:var(--r-lg);
--sh:var(--shadow); --sh-2:var(--shadow-lift); --sh-3:var(--shadow-lift);
--sh-h:var(--shadow-lift);
--ring:inset 0 0 0 1px rgba(16,20,30,.05);
/* --- type ------------------------------------------------------------- */
--ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--se:var(--ui);
--t-display:clamp(30px,3.4vw,44px); --t-lead:clamp(22px,2.2vw,30px);
--t-h2:26px; --t-h3:19px; --t-body:17px; --t-ui:14px; --t-label:11px;
--track-label:.06em;
}
/* --- the reset stops at the article ---------------------------------------
The design's reset strips list markers from every ul and ol on the page,
which is right for a nav, a card grid and a chart, and wrong for the one
place on the site where a list is prose. Restored by name rather than by
loosening the reset, so a stray plugin list stays stripped. -------------- */
/* Only lists the writer typed. A list that carries a class carries it because
the engine draws it — .pl sets list-style:none and puts a ticked circle in
::before, and an unqualified .prose ul here beat it, so every point list in
an article came out with a bullet AND a tick. */
.prose > ul:not([class]){list-style:disc}
.prose > ol:not([class]){list-style:decimal}
.prose > ul:not([class]) ul{list-style:circle}
.prose > ul:not([class]) ol{list-style:decimal}
.prose li{display:list-item}
.prose li::marker{color:var(--brand)}
/* The article's own measure, in this design's face. */
.prose{font-family:var(--ui);font-size:var(--t-body);line-height:1.62;color:var(--ink)}
.prose p{margin:0 0 1.15em}
.prose h2,.prose h3{font-family:var(--ui);letter-spacing:-.02em;line-height:1.2}
/* --- the engine's cards speak this design's shape -------------------------
Every surface tahti.css draws gets the same radius, the same hairline and
the same shadow the front page uses, so an article page reads as the same
product as the page that linked to it. */
.panel,.rail-box,.side .panel,.rail .panel,.rail .mod,.cmts,.comment-respond,
.toc,.kp,.tldr,.keys,.srcs,.fbox,.step,.method,.also,.qcard,.tw,.sn{
border-radius:var(--r-lg);box-shadow:var(--shadow),var(--hair);border:0}
.kp,.tldr,.keys,.srcs,.fbox,.step,.method,.also{background:var(--card)}
/* ==========================================================================
THE PULLED QUOTE
What was arriving here was a white box with one bold line in it and, when
the story had no portrait to offer, an empty grey disc beside it. Nothing
in it said "quote": it read as a paragraph that had been indented by
accident, and the disc read as a picture that had failed to load.
Three things fix that, and none of them is decoration for its own sake.
A pulled quote has to look pulled, so it is washed in the site's own
accent and ruled down its left edge in the same colour — the wash carries
the mark, the rule carries the eye down the passage.
The words are set larger and LIGHTER than the body around them, not
heavier. A quote is someone speaking; setting it at 800 shouts it, which
is why the old card read as a stray headline.
And the portrait slot only exists when there is a portrait. The engine
falls back to a silhouette when it cannot work out who is speaking — that
is the honest answer inside the engine and a grey hole inside this design.
The fallback is dropped and the card closes up around the quotation mark,
which is doing the same job the disc was pretending to do.
========================================================================== */
.qcard{
--q:var(--brand);
--q-rgb:var(--brand-rgb);
position:relative;
display:grid;grid-template-columns:minmax(0,1fr);gap:0 22px;align-items:center;
padding:26px 30px;margin:2em 0;
border:0;border-left:4px solid var(--q);border-radius:var(--r-lg);
background:linear-gradient(122deg,
rgba(var(--q-rgb),.085) 0%,
rgba(var(--q-rgb),.028) 42%,
rgba(var(--q-rgb),0) 74%),
var(--card);
box-shadow:var(--shadow),var(--hair)}
/* The two dark branches in tahti.css set this at (0,2,x) and would otherwise
win on specificity whatever order the sheets load in. */
[data-theme="dark"] .qcard{
background:linear-gradient(122deg,
rgba(var(--q-rgb),.16) 0%,
rgba(var(--q-rgb),.055) 42%,
rgba(var(--q-rgb),0) 74%),
var(--card);
border-left-color:var(--q)}
.qcard:has(.qcard-face){grid-template-columns:74px minmax(0,1fr)}
.qcard > .ph:not(.qcard-face){display:none}
.qcard .qcard-face{
width:74px;height:74px;border-radius:50%;aspect-ratio:1/1;
align-self:start;margin-top:6px;
box-shadow:0 0 0 3px var(--card),0 0 0 5px rgba(var(--q-rgb),.55)}
.qcard > div{min-width:0}
/* Furniture, not punctuation: the mark opens the passage at a size that reads
as a graphic mark, and the text starts under it rather than beside it. */
.qcard > div:not([class])::before{
content:"\201C";display:block;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:52px;line-height:.66;font-weight:700;
color:var(--q);opacity:.9;margin:0 0 6px -3px}
.qcard p{
font-size:20px;font-weight:600;letter-spacing:-.018em;line-height:1.44;
color:var(--label);margin:0 0 13px}
.qcard p:last-child{margin-bottom:0}
/* The attribution is a caption, and a caption with a rule in front of it
reads as an attribution rather than as the next line of the quote. */
.qcard cite{
display:flex;align-items:center;gap:10px;
font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--label-2)}
.qcard cite::before{
content:"";flex:none;width:20px;height:2px;border-radius:2px;background:var(--q)}
/* Same again for the reader who has set no preference and whose device is
dark: tahti.css writes that branch at html:not([data-theme]) .qcard, which
outranks a bare .qcard however late this sheet loads. */
@media(prefers-color-scheme:dark){
html:not([data-theme]) .qcard{
background:linear-gradient(122deg,
rgba(var(--q-rgb),.16) 0%,
rgba(var(--q-rgb),.055) 42%,
rgba(var(--q-rgb),0) 74%),
var(--card);
border-left-color:var(--q)}
}
@media(max-width:640px){
.qcard{padding:22px 20px;gap:0 16px}
.qcard:has(.qcard-face){grid-template-columns:54px minmax(0,1fr)}
.qcard .qcard-face{width:54px;height:54px}
.qcard > div:not([class])::before{font-size:42px}
.qcard p{font-size:18.5px}
}
/* --- the article page keeps the arrangement it always had ----------------
I put the article on a white card with a radius and a shadow, and then
spent three versions fixing what that card broke: text against its edge, a
measure the full width of it, a hero that had to be pulled back out to its
corners, and a note column that read as dead space inside it.
None of that was the design. In this engine an article sits directly on the
page, its column marked by a hairline spine, with the note gutter held open
beside it — which is what the sites already running this look like. The
card is removed and the arrangement left alone.
------------------------------------------------------------------------ */
/* --- the profile card, once it stands in the rail ------------------------
Style H prints it in the reading column and the script moves it to the top
of the rail, which is where the template always meant it to go. What
arrives is .sn.pcard — a right-floated margin note 272px wide with a -308px
right margin, which in a 320px rail hangs a third of itself off the edge of
the page. In the rail it is a panel like the ones under it. ------------- */
.hy-notes{margin:0 0 var(--gap)}
.hy-notes-mount .sn,.hy-notes-mount .pcard{
float:none;clear:none;width:auto;max-width:none;margin:0;
display:block;text-align:left;font-size:inherit;
background:var(--card);border:0;border-radius:var(--r-lg);
box-shadow:var(--shadow),var(--hair);padding:16px 18px 18px}
.hy-notes-mount .pcard::before,.hy-notes-mount .pcard::after{display:none}
.hy-notes-mount .sn + .sn,.hy-notes-mount .pcard + .pcard{margin-top:var(--gap)}
.hy-notes-mount .pcard > h4{
margin:0 0 12px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--label-3);display:flex;align-items:center;gap:8px}
.hy-notes-mount .pcard > h4::before{content:"";flex:0 0 auto;width:14px;height:2px;
border-radius:2px;background:var(--blue)}
.hy-notes-mount .pcard-ph{display:block;width:76px;height:76px;border-radius:50%;
overflow:hidden;margin:0 0 12px;box-shadow:var(--hair)}
.hy-notes-mount .pcard-ph .ph,.hy-notes-mount .pcard-ph img{
width:100%;height:100%;border-radius:50%;object-fit:cover}
.hy-notes-mount .pcard-name{margin:0;font-size:1.0625rem;font-weight:700;
letter-spacing:-.02em;line-height:1.25}
.hy-notes-mount .pcard-name a{color:var(--label)}
.hy-notes-mount .pcard-name a:hover{color:var(--blue-d)}
.hy-notes-mount .pcard-sub{margin:5px 0 0;font-size:.8125rem;line-height:1.45;color:var(--label-2)}
.hy-notes-mount .pcard-facts{margin:13px 0 0;padding:13px 0 0;border-top:1px solid var(--sep);
display:grid;gap:9px}
.hy-notes-mount .pcard-facts > div{display:grid;gap:1px}
.hy-notes-mount .pcard-facts dt{font-size:.625rem;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--label-3);margin:0}
.hy-notes-mount .pcard-facts dd{margin:0;font-size:.875rem;font-weight:600;color:var(--label)}
.hy-notes-mount .pcard-more{margin:14px 0 0}
.hy-notes-mount .pcard-more a{display:inline-flex;align-items:center;gap:6px;
font-size:.8125rem;font-weight:650;color:var(--blue-d);min-height:40px}
/* Below the rail's width the card is back in the reading column, where the
engine's own phone rule already lays it out as a full-width note. */
/* --- a card whose link carries the text itself ---------------------------
Most of the engine's cards are picture
…
, and .body is what carries the gutter. The
related-stories row at the foot of an article is built the other way — the
headline is a child of the link, beside the picture, with no .body around
it — so it inherited no padding at all and every title in that row sat hard
against the edge of its own card. The child combinator keeps this off the
cards that do have a .body. -------------------------------------------- */
.card > a > h2,.card > a > h3,.card > a > h4,
.card > a > p,.card > a > .m,.card > a > .meta,
.card > a > .chip,.card > a > .kick,.card > a > time{
margin-left:16px;margin-right:16px}
.card > a > .ph + h2,.card > a > .ph + h3,.card > a > .ph + h4,
.card > a > figure + h2,.card > a > figure + h3,.card > a > figure + h4{margin-top:13px}
.card > a > h2:last-child,.card > a > h3:last-child,.card > a > h4:last-child,
.card > a > p:last-child,.card > a > .m:last-child,.card > a > .meta:last-child{
margin-bottom:15px}
@media(max-width:520px){
.card > a > h2,.card > a > h3,.card > a > h4,
.card > a > p,.card > a > .m,.card > a > .meta,
.card > a > .chip,.card > a > .kick,.card > a > time{margin-left:14px;margin-right:14px}
}
/* ==========================================================================
NIGHT
Not the light table with the lightness inverted — that is how a dark mode
ends up grey and muddy. iOS's own dark system is the model: a true black
ground so an OLED screen can switch pixels off, surfaces that step *up*
from it rather than down, and accents that move to their light twins
because a #0069DB link on near-black measures 2.4:1 and is unreadable.
Every tint on this page is an rgba() of a hue over a light card. Over a
dark one the same mix dries to mud, so each is remixed here at a weight
that shows on black.
========================================================================== */
[data-theme="dark"]{
--bg:#000000;
--card:#1C1C1E;
--fill:rgba(120,120,128,.24);
--fill-2:rgba(120,120,128,.16);
--label:#F2F2F7;
--label-2:#AEAEB2;
--label-3:#8E8E93;
--sep:#2C2C2E;
--sep-2:#3A3A3C;
/* The system's dark accents: each one lifted so it reads on black. */
--blue:#0A84FF; --blue-d:#5AAAFF;
--red:#FF453A; --red-d:#FF6961;
--orange:#FF9F0A; --orange-d:#FFB340;
--green:#30D158; --green-d:#5CE07E;
--teal:#40C8E0; --teal-d:#6ED8EA;
--indigo:#5E5CE6; --indigo-d:#8886F0;
--pink:#FF375F; --pink-d:#FF6A87;
--purple:#BF5AF2; --purple-d:#D08BF6;
--brown:#AC8E68; --brown-d:#C4AA88;
--ink:#F2F2F7;
--shadow:0 1px 2px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.5);
--shadow-lift:0 3px 8px rgba(0,0,0,.66),0 20px 40px rgba(0,0,0,.6);
--hair:inset 0 0 0 1px rgba(255,255,255,.06);
/* --- the bridge, at night --------------------------------------------- */
--band:#000000; --band-2:#1C1C1E;
--sheet:#1C1C1E; --card-2:#2C2C2E; --lift:#2C2C2E;
--block:#2C2C2E; --surface:#2C2C2E; --warm:#2C2C2E; --cream:#2C2C2E;
--strip:#141416;
--line:#3A3A3C; --line-soft:#2C2C2E; --hair-c:#2C2C2E;
--ink-2:#AEAEB2; --muted:#AEAEB2; --ink-3:#8E8E93; --near:#F2F2F7; --navy:#F2F2F7;
--brand:#5AAAFF; --brand-lt:#8AC4FF; --brand-dk:#0A84FF;
--brand-rgb:90,170,255; --indigo:#5AAAFF;
--brand-read:#5AAAFF; --brand-ink:#8AC4FF; --link:#5AAAFF;
--tintblue:rgba(10,132,255,.18);
--brass:#C4AA88; --gold:#C4AA88; --yellow:#FFB340; --hot:#FFB340;
--c-royal:#FF6961; --c-royal-rgb:255,105,97;
--c-a1:#5AAAFF; --c-a1-rgb:90,170,255;
--c-a2:#6ED8EA; --c-a2-rgb:110,216,234;
--c-a3:#D08BF6; --c-a3-rgb:208,139,246;
--c-a4:#5CE07E; --c-a4-rgb:92,224,126;
--c-a5:#FFB340; --c-a5-rgb:255,179,64;
--c-a6:#C4AA88; --c-a6-rgb:196,170,136;
--c-viihde:#5AAAFF; --c-viihde-rgb:90,170,255;
--c-sarjat:#6ED8EA; --c-sarjat-rgb:110,216,234;
--c-julkkis:#D08BF6; --c-julkkis-rgb:208,139,246;
--c-elokuvat:#FFB340; --c-elokuvat-rgb:255,179,64;
--c-musiikki:#8886F0; --c-musiikki-rgb:136,134,240;
--note-zero:rgba(90,170,255,0);
--note-soft:rgba(90,170,255,.07);
--note-soft-b:rgba(90,170,255,.09);
--note-strong:rgba(90,170,255,.16);
--note-edge:rgba(90,170,255,.34);
--note-edge-num:rgba(90,170,255,.34);
--note-edge-link:rgba(90,170,255,.34);
--ring:inset 0 0 0 1px rgba(255,255,255,.07);
color-scheme:dark;
}
/* The white bands and the dark gallery band swap roles: on a black page the
band that was white becomes the one that lifts, and the one that was near
black has nothing left to be darker than. */
[data-theme="dark"] .band-white{background:#1C1C1E}
[data-theme="dark"] .gal-band,[data-theme="dark"] .band-dark{background:#0A0A0B}
[data-theme="dark"] .utility{background:#0A0A0B;border-bottom-color:#2C2C2E}
[data-theme="dark"] .masthead,[data-theme="dark"] .navbar{background:var(--card)}
[data-theme="dark"] .breaking{background:#141416}
[data-theme="dark"] .topics-bar{background:#000}
[data-theme="dark"] .footer{background:#0A0A0B;border-top-color:#2C2C2E}
[data-theme="dark"] .searchbox,[data-theme="dark"] .seg{background:var(--fill-2)}
[data-theme="dark"] .ph{background:#2C2C2E}
/* The system preference, for a reader who has never touched the switch. */
@media(prefers-color-scheme:dark){
html:not([data-theme]){
--bg:#000000; --card:#1C1C1E;
--fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.16);
--label:#F2F2F7; --label-2:#AEAEB2; --label-3:#8E8E93;
--sep:#2C2C2E; --sep-2:#3A3A3C;
--blue:#0A84FF; --blue-d:#5AAAFF;
--red:#FF453A; --red-d:#FF6961;
--orange:#FF9F0A; --orange-d:#FFB340;
--green:#30D158; --green-d:#5CE07E;
--teal:#40C8E0; --teal-d:#6ED8EA;
--indigo:#5E5CE6; --indigo-d:#8886F0;
--pink:#FF375F; --pink-d:#FF6A87;
--purple:#BF5AF2; --purple-d:#D08BF6;
--brown:#AC8E68; --brown-d:#C4AA88;
--ink:#F2F2F7;
--shadow:0 1px 2px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.5);
--shadow-lift:0 3px 8px rgba(0,0,0,.66),0 20px 40px rgba(0,0,0,.6);
--hair:inset 0 0 0 1px rgba(255,255,255,.06);
--band:#000000; --band-2:#1C1C1E;
--sheet:#1C1C1E; --card-2:#2C2C2E; --lift:#2C2C2E;
--block:#2C2C2E; --surface:#2C2C2E; --warm:#2C2C2E; --cream:#2C2C2E;
--strip:#141416;
--line:#3A3A3C; --line-soft:#2C2C2E; --hair-c:#2C2C2E;
--ink-2:#AEAEB2; --muted:#AEAEB2; --ink-3:#8E8E93; --near:#F2F2F7; --navy:#F2F2F7;
--brand:#5AAAFF; --brand-lt:#8AC4FF; --brand-dk:#0A84FF;
--brand-rgb:90,170,255; --indigo:#5AAAFF;
--brand-read:#5AAAFF; --brand-ink:#8AC4FF; --link:#5AAAFF;
--tintblue:rgba(10,132,255,.18);
--brass:#C4AA88; --gold:#C4AA88; --yellow:#FFB340; --hot:#FFB340;
--c-royal:#FF6961; --c-royal-rgb:255,105,97;
--c-a1:#5AAAFF; --c-a1-rgb:90,170,255;
--c-a2:#6ED8EA; --c-a2-rgb:110,216,234;
--c-a3:#D08BF6; --c-a3-rgb:208,139,246;
--c-a4:#5CE07E; --c-a4-rgb:92,224,126;
--c-a5:#FFB340; --c-a5-rgb:255,179,64;
--c-a6:#C4AA88; --c-a6-rgb:196,170,136;
--c-viihde:#5AAAFF; --c-sarjat:#6ED8EA; --c-julkkis:#D08BF6;
--c-elokuvat:#FFB340; --c-musiikki:#8886F0;
--note-soft:rgba(90,170,255,.07); --note-soft-b:rgba(90,170,255,.09);
--note-strong:rgba(90,170,255,.16); --note-edge:rgba(90,170,255,.34);
--note-edge-num:rgba(90,170,255,.34); --note-edge-link:rgba(90,170,255,.34);
--ring:inset 0 0 0 1px rgba(255,255,255,.07);
color-scheme:dark;
}
html:not([data-theme]) .band-white{background:#1C1C1E}
html:not([data-theme]) .gal-band,html:not([data-theme]) .band-dark{background:#0A0A0B}
html:not([data-theme]) .utility{background:#0A0A0B;border-bottom-color:#2C2C2E}
html:not([data-theme]) .masthead,html:not([data-theme]) .navbar{background:var(--card)}
html:not([data-theme]) .breaking{background:#141416}
html:not([data-theme]) .topics-bar{background:#000}
html:not([data-theme]) .footer{background:#0A0A0B;border-top-color:#2C2C2E}
html:not([data-theme]) .searchbox,html:not([data-theme]) .seg{background:var(--fill-2)}
html:not([data-theme]) .ph{background:#2C2C2E}
}
/* --- the footer -----------------------------------------------------------
footer.php already produces the right thing — the brand, the link columns
from the menu locations, the channels, the publisher block a news site is
expected to carry, and the legal line. It produces it under the engine's
class names, and TWO stylesheets already paint those names: tahti.css draws
the footer as a dark band, and tables.css draws it darker still with the
colours written in by hand. Both are shared with the other themes and are
left alone.
The first pass here repainted the container and a handful of children, which
left every value neither of them mentioned still set for a black band on a
white one: the wordmark was #fff on #fff — only the dot after it survived,
which is the blue speck the footer looked like it had instead of a name —
the section headings were #fff, the rights line was white at 52%, the rules
between the bands were white at 10%, and the one rule that did show was
tables.css's hard #26262F under the columns, which read as a black bar across
the page. So this block answers every footer declaration in both files
rather than the ones that happened to be noticed, and every selector carries
.footer so it outranks both without either having to change.
------------------------------------------------------------------------ */
.footer{background:var(--card);border-top:1px solid var(--sep);margin-top:38px;
padding:38px 0 26px;color:var(--label-2);background-image:none}
/* The site's colour arrived as a 3px blue-to-purple bar across the top of the
footer. On a dark band it was the one piece of colour down there; on a white
one it is a stripe. The hairline above already separates the footer. */
.footer::before{display:none}
.footer a{color:var(--label-2);text-decoration:none}
.footer a:hover{color:var(--blue-d)}
.footer .ph{box-shadow:inset 0 0 0 1px var(--sep)}
/* The brand block sets its own width rather than taking a share of one: with a
single assigned menu a 1.5fr track handed the wordmark 60% of the page and
the one column the rest, which is the shape the live footer had. Capped, the
columns keep their own width and what is left over is simply left over. */
.footer .foot-top{display:grid;
grid-template-columns:minmax(200px,300px) repeat(var(--foot-cols,4),minmax(0,1fr));
gap:30px 26px;padding:0 0 26px;border-bottom:1px solid var(--sep);background:none}
.footer .foot-brand{grid-column:1}
.footer .foot-brand .logo{display:flex;align-items:baseline;gap:3px}
.footer .foot-brand .logo b,.footer .foot-brand .brand b{
font-family:var(--ui);font-weight:800;font-size:1.375rem;letter-spacing:-.022em;
color:var(--label)}
.footer .foot-brand .logo i{width:7px;height:7px;background:var(--blue-d);border-radius:50%}
.footer .foot-brand p{font-size:.8125rem;color:var(--label-2);margin-top:10px;max-width:34ch;line-height:1.55}
.footer .foot-col h2,.footer .foot-col h3{
font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--label-3);margin:0 0 10px;padding:0}
/* tables.css underlines every column heading with a brand gradient. The design
heads its columns with the small caps alone. */
.footer .foot-col h3::after{display:none}
.footer .foot-col ul{margin:0;padding:0;list-style:none}
.footer .foot-col li{margin:0;font-size:.875rem;line-height:1.45}
.footer .foot-col a{display:block;font-size:.875rem;padding:5px 0;color:var(--label-2)}
.footer .foot-col a:hover{color:var(--blue-d);padding-left:0;text-decoration:none}
.footer .foot-extras{padding:0;display:block}
/* --- the widths the columns were never given -----------------------------
The engine has a whole responsive plan for this footer: drop the brand
track at 900, give each menu the full width at 700 and let its links flow
into as many strips as fit. None of it was reaching the page. The rule
above is written .footer .foot-top — two selectors — and the engine's
breakpoints are written .foot-top, one. Specificity beats media query and
beats source order, so the desktop grid held at every width: on a 390px
phone that is a 200px brand track and four columns of 37px, which renders
one letter per line. It is the worst-looking thing in the theme and it is
on every page.
The same plan, restated at the same specificity as the rule that was
burying it. ---------------------------------------------------------- */
@media(max-width:900px){
.footer .foot-top{grid-template-columns:repeat(var(--foot-cols,4),minmax(0,1fr));gap:26px}
.footer .foot-brand{grid-column:1/-1}
.footer .foot-brand p{max-width:52ch}
}
@media(max-width:700px){
.footer .foot-top{grid-template-columns:minmax(0,1fr);gap:18px}
.footer .foot-col ul{columns:150px;column-gap:24px}
.footer .foot-col li{break-inside:avoid;-webkit-column-break-inside:avoid}
.footer .foot-col h2,.footer .foot-col h3{margin-bottom:6px}
}
/* ==========================================================================
THE FOOTER, IN THIS THEME'S COLOURS
The engine's footer is drawn for a black band. Every separator in it is
rgba(255,255,255,.10) and every hover is #fff — correct on black, and on
this theme's white band a hairline that is not there and a link that
disappears when you point at it. The port caught the brand, the columns and
the legal row. It did not catch the separators, the channel pills, the
publisher band or the bottom rule, so what shipped was four bands with
nothing between them, social links with no pill around them in daylight
(they had one at night, because there the borrowed white was almost right),
and three sets of links that vanished on hover.
Every borrowed value is named here and given a token instead.
========================================================================== */
/* --- the bands, and the rules between them ------------------------------- */
.footer .foot-pub{border-top:1px solid var(--sep);padding:22px 0 24px}
/* The channels now stand in the brand column (footer.php), so they take the
brand's spacing rather than a band's: no rule above them, and stacked —
a 260px column is not a row. */
.footer .foot-brand .foot-follow{
display:block;border-top:0;padding:18px 0 0;margin:0}
.footer .foot-brand .foot-follow h2{margin:0 0 10px}
.footer .foot-brand .foot-follow .soc{margin:0;padding:0;list-style:none}
.footer .foot-brand .apps{margin-top:11px}
/* --- the channels --------------------------------------------------------
A pill with a hairline, filled with the site's accent when pointed at. The
icon carries the brand, so it is set at the ink colour and lifts with the
label rather than staying grey behind it. */
.footer .foot-follow h2{color:var(--label-3);flex:none}
.footer .foot-follow .soc{gap:8px}
.footer .foot-follow .soc a{
gap:8px;padding:8px 15px 8px 13px;
border:1px solid var(--sep-2);border-radius:var(--r-pill);
background:var(--card);color:var(--label);
font-size:13px;font-weight:650;letter-spacing:-.005em}
.footer .foot-follow .soc svg{fill:currentColor;opacity:.85}
.footer .foot-follow .soc a:hover{
background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.footer .foot-follow .soc a:hover svg{opacity:1}
.footer .foot-follow .soc a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* --- who publishes this --------------------------------------------------- */
.footer .foot-pub h2{margin-bottom:14px}
.footer .foot-pub dd{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--label)}
.footer .foot-pub dd a{color:var(--label)}
.footer .foot-pub dd a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* --- the line at the very bottom ------------------------------------------ */
.footer .foot-bot{padding-top:20px;border-top:1px solid var(--sep);font-size:12.5px}
.footer .foot-legal a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.footer .foot-langs .lang-link{
border:1px solid var(--sep-2);border-radius:var(--r-pill);color:var(--label-2)}
.footer .foot-langs .lang-link:hover{border-color:var(--blue);color:var(--blue)}
/* --- and the columns themselves ------------------------------------------
The headings were at --label-3, which is the colour this theme uses for a
timestamp. A column heading is a landmark; it can be quiet without being
the faintest ink on the page. The links move a step toward the reader on
hover, which is the only affordance a plain text link in a list has. */
.footer .foot-col h2,.footer .foot-col h3{
color:var(--label);font-size:.6875rem;font-weight:800;letter-spacing:.1em;margin:0 0 11px}
/* A tick of the site's colour in front of each heading. The footer was four
greys — heading, link, rule and rights all within a shade of each other —
and the headings sat at the same value as the links under them, so the
columns read as one long list rather than four. */
.footer .foot-col h2::before,.footer .foot-col h3::before{
content:"";display:inline-block;vertical-align:middle;
width:12px;height:2px;border-radius:2px;background:var(--blue);
margin:-2px 8px 0 0}
.footer .foot-col a{
padding:5px 0;color:var(--label-2);font-weight:550;
transition:color .16s var(--ease),transform .16s var(--ease)}
.footer .foot-col a:hover{color:var(--blue);transform:translateX(2px);text-decoration:none}
.footer .foot-brand .logo b,.footer .foot-brand .brand b{font-size:1.5rem}
@media(max-width:560px){
.footer{padding:30px 0 22px}
.footer .foot-follow{gap:10px 14px}
.footer .foot-follow .soc a{padding:7px 13px 7px 11px;font-size:12.5px}
.footer .foot-col a:hover{transform:none}
}
/* ==========================================================================
THE RAIL, AND EVERY OTHER SURFACE THE ENGINE DRAWS
.panel was the previous design's class. Its stylesheet went with the
previous design, and nothing in tahti.css defines it — so on every page but
the front one the rail rendered as unstyled text on the page: no card, no
padding, no rules between the rows. This gives the engine's furniture the
same card the front page uses, once, by name.
========================================================================== */
.panel,.rail-box,.side .panel,.rail .panel,.rail .mod,.hy-rail .panel,.hy-rail .mod{
background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow),var(--hair);
border:0;margin-bottom:18px}
.panel.pad,.rail-box.pad{padding:16px 18px 18px}
.panel > h2,.panel > h3,.rail-box > h2,.mod > h2{
font-size:.9375rem;font-weight:700;letter-spacing:-.015em;color:var(--label);
margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel .lbl,.rail-box .lbl{
display:block;font-size:.6875rem;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--label-3);margin:0 0 10px}
.panel .fine,.rail-box .fine{font-size:.8125rem;color:var(--label-2);line-height:1.5;margin:0 0 12px}
/* --- the ranked list ------------------------------------------------------
The number is a child of the LI, not of the link: