/* Juho Saastamoinen .COM – Ulkoasu 2026 (sama ilme kuin juhosaastamoinen.fi, sovitettu uutisanalyyseihin)
 * Kerros Twenty Twenty-Five -teeman ja lisäosan omien tyylien päälle. Kaikki fontit omalta palvelimelta (SIL OFL 1.1). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url('fontit/bricolage-grotesque-normal-latin-ext-300-800.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url('fontit/bricolage-grotesque-normal-latin-300-800.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url('fontit/newsreader-italic-latin-ext-400-600.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url('fontit/newsreader-italic-latin-400-600.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url('fontit/newsreader-normal-latin-ext-400-600.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url('fontit/newsreader-normal-latin-400-600.woff2') format('woff2')}

/* ---------- Värit ja fontit: teeman esiasetukset korvataan, jolloin koko sivusto seuraa ---------- */
body.u26 {
	--night: #05070d; --deep: #0a1124; --navy: #101b3b;
	--gold: #f2c66d; --gold-hi: #fff1c9; --gold-lo: #c8913a; --ember: #f4a93b; --teal: #3ee6c1; --violet: #8b6cff;
	--ink: #f6f1e7; --ink-2: rgba(246, 241, 231, .72); --ink-3: rgba(246, 241, 231, .5);
	--hair: rgba(242, 198, 109, .22); --glass: rgba(255, 255, 255, .045);
	--ui: "Bricolage Grotesque", "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
	--text: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--ease: cubic-bezier(.2, .75, .15, 1);
	--wp--preset--color--base: #05070d;
	--wp--preset--color--contrast: #f6f1e7;
	--wp--preset--color--accent-1: #f2c66d;
	--wp--preset--color--accent-2: #8b6cff;
	--wp--preset--color--accent-3: #fff1c9;
	--wp--preset--color--accent-4: #e4dfd5;
	--wp--preset--color--accent-5: #101b3b;
	--wp--preset--color--accent-6: rgba(242, 198, 109, .22);
	--wp--preset--font-family--manrope: var(--ui);
	position: relative; isolation: isolate;
	background: var(--night) !important; color: #e4dfd5;
	font-family: var(--ui); font-weight: 400; letter-spacing: 0;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
	overflow-x: clip;
}
html:has(body.u26) { background: #05070d; scroll-padding-top: 6rem; }
/* Yötaivas sivun yläosassa: tähdet ja revontulet pelkällä CSS:llä (ei kuvia, ei ulkoisia hakuja) */
body.u26::before, body.u26::after { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; pointer-events: none; }
body.u26::before {
	height: min(120vh, 1000px);
	background:
		radial-gradient(55% 45% at 12% 8%, rgba(62, 230, 193, .16), transparent 70%),
		radial-gradient(50% 50% at 92% 0%, rgba(139, 108, 255, .2), transparent 70%),
		radial-gradient(40% 35% at 55% 25%, rgba(242, 198, 109, .08), transparent 70%),
		radial-gradient(120% 90% at 50% 0%, #142454 0%, var(--deep) 45%, var(--night) 100%);
	-webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
body.u26::after {
	height: min(90vh, 760px); opacity: .75;
	background-image:
		radial-gradient(1.2px 1.2px at 7% 12%, #fff1c9, transparent 60%), radial-gradient(1px 1px at 18% 34%, #fff, transparent 60%),
		radial-gradient(1.4px 1.4px at 29% 8%, #fff, transparent 60%), radial-gradient(1px 1px at 41% 27%, #fff1c9, transparent 60%),
		radial-gradient(1.2px 1.2px at 53% 15%, #fff, transparent 60%), radial-gradient(1px 1px at 64% 39%, #fff, transparent 60%),
		radial-gradient(1.5px 1.5px at 76% 9%, #fff1c9, transparent 60%), radial-gradient(1px 1px at 87% 29%, #fff, transparent 60%),
		radial-gradient(1.2px 1.2px at 95% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 35% 46%, #fff, transparent 60%);
	background-size: 520px 360px;
	-webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent);
}
body.u26 ::selection { background: var(--gold); color: var(--night); }
body.u26 :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Typografia ---------- */
body.u26 h1, body.u26 h2, body.u26 h3, body.u26 h4, body.u26 h5, body.u26 h6 { font-family: var(--ui); color: var(--ink); letter-spacing: -.025em; }
body.u26 h1.wp-block-post-title, body.u26 main h1.wp-block-heading, body.u26 .wp-block-query-title {
	font-weight: 700; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
	background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent !important;
	filter: drop-shadow(0 6px 30px rgba(242, 198, 109, .18));
}
body.u26.home h1.wp-block-post-title { font-size: clamp(2.6rem, 7.5vw, 5.4rem); }
/* v68.51 (ylläpitäjä 31.10.2026: "haussa tulee näkyviin vain artikkelin kuva ei mitään tekstejä"): teeman a{height:100%} venytti hakutuloksen
 * kuvalinkin ~6 600 px korkeaksi, jolloin otsikot ja tiivistelmät jäivät alatunnisteen alle. Kuvalinkki on kuvan korkuinen. */
body.u26 .wp-block-post .wp-block-post-featured-image > a, body.u26.search .wp-block-post-featured-image > a, body.u26.archive .wp-block-post-featured-image > a { height: auto !important; }
/* v68.48 (ylläpitäjä 31.10.2026): etusivun otsikko ilmaantuu kirjain kerrallaan hitaasti alhaalta ylös kuten .fi:n nimi (u26-ch) */
body.u26 .u26-w { display: inline-block; white-space: nowrap; }
body.u26 .u26-ch {
	display: inline-block; background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%); /* v68.50: oma liukuväri (inherit tuli sanakääreestä = ei mitään → näkymätön) */
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
	body.u26 .u26-ch { opacity: 0; translate: 0 .5em; rotate: 6deg; filter: blur(8px); animation: u26-ch 1.1s var(--ease) forwards; animation-delay: calc(150ms + var(--c, 0) * 45ms); }
}
@keyframes u26-ch { to { opacity: 1; translate: none; rotate: 0deg; filter: none; } }
body.u26 h1.wp-block-post-title a { color: inherit; }
/* Leipäteksti: Newsreader kuten .fi:n alasivuilla. Vain artikkelin omat kappaleet; lisäosan laatikot pitävät käyttöliittymäfontin. */
body.u26 .entry-content > p, body.u26 .entry-content > ul > li, body.u26 .entry-content > ol > li, body.u26 .entry-content > blockquote {
	font-family: var(--text); font-size: clamp(1.12rem, 1.5vw, 1.25rem); line-height: 1.7; color: rgba(246, 241, 231, .88);
}
body.u26 .entry-content > h2, body.u26 .entry-content > h3 { font-weight: 700; line-height: 1.15; margin-top: 2em; }
body.u26 .entry-content > h2::before { content: ""; display: block; width: 48px; height: 2px; margin-bottom: .7em; background: linear-gradient(90deg, var(--gold), transparent); }
body.u26 .entry-content > p a, body.u26 .entry-content > ul a, body.u26 .entry-content > ol a, body.u26 .entry-content > blockquote a {
	color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .2em;
}
body.u26 .entry-content > p a:hover, body.u26 .entry-content > ul a:hover, body.u26 .entry-content > ol a:hover { color: var(--gold-hi); }
body.u26 .entry-content strong { color: var(--ink); }
body.u26 .entry-content > ul > li::marker, body.u26 .entry-content > ol > li::marker { color: var(--gold); }
body.u26 blockquote, body.u26 .wp-block-quote { border-left: 3px solid var(--gold); padding-left: 1.2em; font-style: italic; color: var(--ink); }
body.u26 hr, body.u26 .wp-block-separator { border: 0 !important; height: 1px; background: var(--hair) !important; opacity: 1; }
body.u26 figcaption, body.u26 .wp-element-caption { color: var(--ink-3); font-family: var(--ui); }
body.u26 main img { border-radius: .9rem; }
body.u26 table th, body.u26 table td { border-color: rgba(246, 241, 231, .1); }
body.u26 table th { color: var(--ink); }
body.u26 summary::marker { color: var(--gold); }
body.u26 code, body.u26 pre { font-family: "Fira Code", ui-monospace, Consolas, monospace; }

/* ---------- Yläpalkki kuten .fi: sivun alussa läpinäkyvä tähtitaivaan päällä, vierittäessä lasi (luokka u26-scrolled) ---------- */
body.u26 header.wp-block-template-part {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50;
	background: transparent; border-bottom: 1px solid transparent;
	transition: background-color .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s, border-color .4s;
}
body.u26 header.wp-block-template-part > .wp-block-group { transition: padding .4s var(--ease); }
body.u26.u26-scrolled header.wp-block-template-part {
	background: var(--u26-top-bg, rgba(5, 7, 13, .72)); border-color: var(--hair);
	-webkit-backdrop-filter: var(--u26-top-blur, blur(14px) saturate(1.4)); backdrop-filter: var(--u26-top-blur, blur(14px) saturate(1.4));
}
body.u26.u26-scrolled header.wp-block-template-part > .wp-block-group { padding-top: .45rem !important; padding-bottom: .45rem !important; }
body.u26.u26-scrolled .ai-site-tagline { display: none; }
@media (max-width: 781px) { /* puhelimella palkki vierii pois (enemmän tilaa lukemiselle), kuten ennenkin */
	body.u26 header.wp-block-template-part { position: relative; top: 0; }
}
body.u26 .wp-block-site-title { font-size: 1rem !important; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
body.u26 .wp-block-site-title a { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink) !important; text-decoration: none; }
body.u26 .wp-block-site-title a::before {
	content: "JS"; display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, var(--gold-hi), var(--gold) 45%, var(--gold-lo));
	color: var(--night); font-size: .82rem; font-weight: 800; letter-spacing: -.04em;
	box-shadow: 0 0 0 1px rgba(255, 241, 201, .5) inset, 0 0 22px rgba(242, 198, 109, .4);
}
body.u26 .ai-site-tagline { color: var(--ink-3); opacity: 1; padding-left: 3rem; }
body.u26 .ai-site-nav a { color: var(--ink-2); opacity: 1; font-weight: 500; transition: color .25s, background-color .25s; }
body.u26 .ai-site-nav a:hover, body.u26 .ai-site-nav a:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .07); }
body.u26 .ai-site-nav a[aria-current="page"] { color: var(--gold); background: rgba(242, 198, 109, .1); box-shadow: inset 0 0 0 1px var(--hair); }
body.u26 .ai-site-search { border-color: var(--hair); background: rgba(5, 7, 13, .5); }
body.u26 .ai-site-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 198, 109, .18); }
/* v68.48 (ylläpitäjä 31.10.2026: "hakukentässä tupla pillerimuoto kehä"): vain ulompi kehä, ei kentän omaa kohdistuskehystä */
body.u26 .ai-site-search input, body.u26 .ai-site-search input:focus, body.u26 .ai-site-search input:focus-visible,
body.u26 .ai-site-search button:focus { outline: none !important; box-shadow: none !important; border: 0 !important; background: transparent !important; }

/* ---------- Kortit: analyysilistat ja etusivun nostot ---------- */
body.u26 .ai-nt-c, body.u26 .ai-d2-c {
	border: 1px solid rgba(246, 241, 231, .1); border-radius: 1.5rem;
	background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
	transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
body.u26 .ai-nt-c:hover, body.u26 .ai-nt-c:focus-within, body.u26 .ai-d2-c:hover {
	border-color: rgba(242, 198, 109, .5); box-shadow: 0 18px 50px -24px rgba(242, 198, 109, .35);
}
body.u26 .ai-nt-c a, body.u26 .ai-d2-c a { color: var(--ink); }
body.u26 .ai-nt-c a:hover, body.u26 .ai-d2-c a:hover { color: var(--gold-hi); }
body.u26 .ai-nt-img img, body.u26 .ai-nt-th img { border-radius: 0; }

/* ---------- Painikkeet ja lomakkeet ---------- */
body.u26 .wp-element-button, body.u26 .wp-block-button__link, body.u26 .ai-autonomi-push > button {
	border: 1px solid transparent !important; border-radius: 999px !important;
	background: linear-gradient(135deg, var(--gold-hi), var(--gold) 40%, var(--ember)) !important; color: var(--night) !important;
	font-family: var(--ui); font-weight: 700 !important; padding: .7rem 1.25rem !important;
	box-shadow: 0 10px 40px -10px rgba(242, 198, 109, .7), 0 0 0 1px rgba(5, 7, 13, .25) inset;
	transition: transform .35s var(--ease), box-shadow .35s;
}
body.u26 .wp-element-button:hover, body.u26 .wp-block-button__link:hover, body.u26 .ai-autonomi-push > button:hover { box-shadow: 0 16px 50px -10px rgba(242, 198, 109, .9); }
body.u26 input[type="text"], body.u26 input[type="search"], body.u26 input[type="email"], body.u26 input[type="url"], body.u26 input[type="number"], body.u26 textarea, body.u26 select {
	background-color: rgba(5, 7, 13, .55); color: var(--ink); border-color: rgba(246, 241, 231, .18);
}
body.u26 .ai-site-search input { background: transparent; }
body.u26 input:focus, body.u26 textarea:focus, body.u26 select:focus { border-color: var(--gold); }

/* ---------- Alatunniste: suuri ääriviivanimi ja kultaiset pillerit ---------- */
body.u26 footer.wp-block-template-part {
	position: relative; overflow: hidden; margin-top: clamp(3rem, 7vw, 5rem); padding-bottom: 1.5rem;
	border-top: 1px solid var(--hair);
	background: radial-gradient(80% 120% at 50% 120%, rgba(244, 169, 59, .2), transparent 60%), var(--night);
	color: var(--ink-3);
}
/* v68.47 (ylläpitäjä 31.10.2026: analyysisivulla "Juho Saastar" leikkautui): koko alatunnisteen leveyden mukaan (cqi), ei ikkunan (vw):
 * analyysisivuilla alatunniste on kapeampi kuin ikkuna. Nimen leveys ≈ 8,6 em → 10,5 cqi mahtuu aina. */
body.u26 footer.wp-block-template-part { container-type: inline-size; }
body.u26 footer.wp-block-template-part::before {
	content: "Juho Saastamoinen"; display: block; margin: clamp(2rem, 5vw, 4rem) 0 0; padding-inline: 1rem;
	font-size: clamp(2rem, 10.5cqi, 8rem); font-weight: 700; line-height: .9; letter-spacing: -.055em; text-align: center; white-space: nowrap;
	color: transparent; -webkit-text-stroke: 1px rgba(242, 198, 109, .45);
}
/* v68.47: analyysin lopun edellinen/seuraava-linkkien jälkeen ei 200 px tyhjää ennen alatunnistetta */
body.u26.single .wp-block-group.alignwide:has(.wp-block-post-navigation-link) { margin-bottom: 1.2rem !important; }
body.u26.single main > .wp-block-group.alignfull:has(.wp-block-post-navigation-link) { padding-bottom: 1rem !important; }
body.u26 .ai-footer { opacity: 1 !important; color: var(--ink-3); }
body.u26 .ai-footer .ai-f-lbl { color: var(--gold); opacity: .85; letter-spacing: .22em; font-weight: 700; }
body.u26 .ai-footer .ai-f-chips a { border-color: var(--hair); color: var(--ink-2); }
body.u26 .ai-footer .ai-f-chips a:hover, body.u26 .ai-footer .ai-f-chips a:focus { color: var(--gold); border-color: var(--gold); background: rgba(242, 198, 109, .08); }
body.u26 .ai-footer .ai-f-chips a.ai-f-ctx { border-color: rgba(62, 230, 193, .5); background: rgba(62, 230, 193, .08); color: var(--ink); }
body.u26 .ai-footer .ai-f-new { background: var(--gold); color: var(--night); }
body.u26 .ai-footer .ai-f-tog { border-color: var(--hair); }

/* ---------- Liike: vain jos lukija ei ole pyytänyt vähentämään liikettä ---------- */
@media (prefers-reduced-motion: no-preference) {
	body.u26 .ai-nt-c:hover, body.u26 .ai-d2-c:hover { transform: translateY(-4px); }
	body.u26 .wp-element-button:hover, body.u26 .wp-block-button__link:hover, body.u26 .ai-autonomi-push > button:hover { transform: translateY(-2px); }
	body.u26::after { animation: u26-tuike 7s ease-in-out infinite alternate; }
}
@keyframes u26-tuike { from { opacity: .55; } to { opacity: .85; } }

@media print {
	body.u26::before, body.u26::after, body.u26 footer.wp-block-template-part::before { display: none !important; }
	body.u26 { background: #fff !important; color: #000 !important; }
	body.u26 h1.wp-block-post-title { color: #000 !important; -webkit-text-fill-color: #000; background: none; filter: none; }
}