/*
Theme Name: Twiga Savann
Template: twentytwentyfive
Description: Eget tema för twiga.se. Magasin om Östafrika med giraffhud som innehållsförteckning, kangabårder och ordspråk på swahili.
Version: 1.0.0
Text Domain: tw-savann
*/

/* =========================================================
   Grund
   ========================================================= */
:root {
	/* Fasta färger */
	--green: #1E3D2F; --night: #173226; --green-2: #2E5A45;
	--ochre: #C98A2E; --maize: #E2B04A; --chestnut: #7A5418;
	--paper: #E7ECE3; --forest: #142A1F;
	--serif: var(--wp--preset--font-family--display);
	--sans: var(--wp--preset--font-family--text);
	--ui: var(--wp--preset--font-family--ui);
	--ease: cubic-bezier(.2, .75, .15, 1);
	/* Ytberoende färger. Standardytan är djupgrönt. */
	--bg: var(--green);
	--ink: #EEF2E8;      /* text */
	--ink-2: #C9D5C6;    /* sekundär text, 7,8:1 */
	--muted: #A9BBA8;    /* metadata, 5,9:1 */
	--terra: #E2B04A;    /* accent (majsgult), 6,0:1 */
	--terra-2: var(--chestnut);
	--sand: var(--paper);   /* ljus inläggsyta */
	--sand-2: #24483A;      /* nyans för hover */
	--rule: rgba(238, 242, 232, .16);
	--head-h: 76px;
}
/* Ytor: majsgult och ljus läsyta. Fullbredd via skugga + clip-path. */
.tw-guide-head, .tw-archive-head, .tw-topics-wrap, .tw-guide, .tw-yellow {
	--bg: var(--maize); --ink: #16301F; --ink-2: #2A4232; --muted: #2F4436; --terra: var(--green); --sand-2: #EBC26A; --rule: rgba(22, 48, 31, .24);
	color: var(--ink);
}
.tw-read, .tw-page-body, .tw-kanga-msg, .tw-nav .wp-block-navigation__submenu-container, .tw-light {
	--bg: var(--paper); --ink: var(--forest); --ink-2: #34483C; --muted: #4F5F53; --terra: #7A520F; --sand-2: #DCE4D7; --rule: rgba(20, 42, 31, .16);
	color: var(--ink);
}
.tw-topics-wrap, .tw-archive-head, .tw-read, .tw-page-body { background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 24px); }
body { font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--maize); color: var(--forest); }
:where(a) { text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .25s ease, text-decoration-color .25s ease; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 3px; }
img { display: block; max-width: 100%; height: auto; }
em { font-style: italic; }
.tw-skip { position: absolute; left: 1rem; top: -60px; z-index: 200; background: var(--maize); color: var(--forest); padding: .6rem 1rem; border-radius: 999px; text-decoration: none; font-size: .9rem; }
.tw-skip:focus { top: .8rem; color: var(--forest); }
main { display: block; }
/* Twenty Twenty-Five sätter marginal mellan header/main/footer; vi styr själva. */
.wp-site-blocks > * { margin-block-start: 0; }

.tw-eyebrow { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); margin: 0 0 1rem; }
.tw-eyebrow [lang="sw"] { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.15rem; font-weight: 400; }
.tw-dot { display: inline-block; width: .38em; height: .38em; background: var(--ochre); transform: rotate(45deg) translateY(-.12em); margin: 0 .55em; border-radius: 1px; vertical-align: middle; }
.tw-arrow { display: inline-block; width: 1.15em; height: .7em; background: currentColor; vertical-align: middle; margin-left: .35em; transition: transform .35s var(--ease);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 5.2h18.4L14.2 1 15.3 0 21.3 6l-6 6-1.1-1 4.2-4.2H0z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 5.2h18.4L14.2 1 15.3 0 21.3 6l-6 6-1.1-1 4.2-4.2H0z'/%3E%3C/svg%3E") center/contain no-repeat; }
a:hover .tw-arrow, a:focus-visible .tw-arrow { transform: translateX(.3em); }
.tw-link-arrow { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--ochre); padding-bottom: .15em; }
.tw-link-arrow:hover { color: var(--terra); border-color: var(--terra); }

/* Kangabård (pindo): två lager som maskas ut ur SVG-mönster */
.tw-pindo { position: relative; height: 28px; --pa: var(--ochre); --pb: var(--maize); }
.tw-pindo::before, .tw-pindo::after { content: ""; position: absolute; inset: 0; }
.tw-pindo::before { background: var(--pa); -webkit-mask: url(assets/img/kanga-a.svg) repeat-x 0 0 / auto 100%; mask: url(assets/img/kanga-a.svg) repeat-x 0 0 / auto 100%; }
.tw-pindo::after { background: var(--pb); -webkit-mask: url(assets/img/kanga-b.svg) repeat-x 0 0 / auto 100%; mask: url(assets/img/kanga-b.svg) repeat-x 0 0 / auto 100%; }
.tw-pindo.is-top { height: 12px; background: var(--night); --pa: var(--ochre); --pb: var(--maize); }
.tw-pindo.is-thin { height: 16px; margin-block: var(--wp--preset--spacing--40); }
.tw-pindo.is-band { height: 30px; margin-block: 0; }
.tw-pindo.is-footer { height: 30px; --pa: var(--ochre); --pb: var(--maize); }

/* Giraffhud som band */
.tw-hide-band { height: clamp(56px, 8vw, 110px); position: relative; margin-block: 0 var(--wp--preset--spacing--50) !important; }
.tw-hide-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--maize), var(--ochre) 55%, var(--chestnut));
	-webkit-mask: url(assets/img/hide.svg) repeat 0 0 / 240px; mask: url(assets/img/hide.svg) repeat 0 0 / 240px; }

/* Avslöjande vid scroll */
/* Synligt som standard. Bara när skriptet har bekräftat att sidan syns och att observatören körs (klassen tw-anim) döljs det som ännu inte scrollats fram. */
.tw-reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.tw-anim .tw-reveal:not(.is-in) { opacity: 0; transform: translateY(22px); }

/* =========================================================
   Sidhuvud
   ========================================================= */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: -12px; z-index: 60; }
.tw-header { position: relative; z-index: 60; isolation: isolate; border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; }
.tw-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(30, 61, 47, .9); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); }
.tw-header.is-scrolled { border-bottom-color: var(--rule); box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .6); }
.tw-header-row { min-height: var(--head-h); gap: 2rem; transition: min-height .3s var(--ease); }
.tw-header.is-scrolled .tw-header-row { min-height: 62px; }
.tw-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.tw-brand .tw-mark { width: 44px; height: 44px; color: var(--terra); flex: none; transition: transform .6s var(--ease); transform-origin: 40% 95%; }
.tw-brand:hover .tw-mark { transform: rotate(-8deg) translateY(-2px); }
.tw-mark .tw-horns, .tw-brand:hover .tw-mark { transition: transform .5s var(--ease); }
.tw-wordmark { font-family: var(--ui); font-weight: 800; font-size: 1.85rem; line-height: 1; letter-spacing: -.035em; }
.tw-tag { font-size: .78rem; line-height: 1.3; color: var(--muted); max-width: 15em; padding-left: .9rem; margin-left: .2rem; border-left: 1px solid var(--rule); }
@media (max-width: 1180px) { .tw-tag { display: none; } }

.tw-nav { font-weight: 500; }
.tw-nav .wp-block-navigation-item__content { text-decoration: none; position: relative; padding-block: .3rem; }
.tw-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--terra); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.tw-nav .wp-block-navigation-item__content:hover::after, .tw-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left; }
.tw-nav .tw-nav-om > a { border: 1px solid var(--ink); border-radius: 999px; padding: .35rem 1rem !important; }
.tw-nav .tw-nav-om > a::after { display: none; }
.tw-nav .tw-nav-om > a:hover { background: var(--maize); border-color: var(--maize); color: var(--forest); }
.tw-nav .wp-block-navigation__submenu-container { background: var(--sand) !important; border: 1px solid var(--rule) !important; border-radius: 16px; padding: .6rem !important; min-width: 270px !important; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); }
.tw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem .75rem !important; border-radius: 10px; }
.tw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.tw-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--sand-2); color: var(--terra); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--green) !important; color: var(--ink) !important; padding: 1.5rem clamp(1rem, 5vw, 2rem) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--serif); font-size: 2rem; line-height: 1.15; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-family: var(--sans); font-size: 1.05rem; }
.wp-block-navigation__responsive-container.is-menu-open .tw-nav-om > a { border: 0; padding: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .9rem !important; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--ink); }
.wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/* =========================================================
   Startsidan: hero med giraffhuden
   ========================================================= */
.tw-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head art" "list art"; column-gap: clamp(2rem, 5vw, 6rem); align-items: start; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem); }
.tw-hero-head { grid-area: head; align-self: end; }
.tw-hero-art { grid-area: art; position: relative; align-self: center; margin-right: calc(-1 * clamp(0rem, 2vw, 2rem)); }
.tw-hero-list { grid-area: list; }
.tw-hero-title { font-family: var(--serif); font-weight: 400; font-size: clamp(3.1rem, 6.6vw, 7rem); line-height: .93; letter-spacing: -.025em; margin: 0 0 1.6rem; text-wrap: balance; }
.tw-hero-title em { color: var(--terra); }
.tw-hero-lede { font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.6; color: var(--ink-2); max-width: 36ch; margin: 0 0 2.2rem; }
.tw-hero-lede [lang="sw"] { font-family: var(--serif); font-style: italic; font-size: 1.12em; color: var(--ink); }
.tw-index-label { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.tw-index { list-style: none; margin: 0; padding: 0; counter-reset: none; border-bottom: 1px solid var(--rule); }
.tw-index li { border-top: 1px solid var(--rule); }
.tw-index a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: baseline; gap: .8rem; padding: .62rem .4rem; text-decoration: none; color: var(--ink); border-radius: 8px; transition: background .3s ease, padding .35s var(--ease); }
.tw-index-n { font-family: var(--serif); font-size: 1.05rem; color: var(--terra); }
.tw-index-t { font-weight: 500; line-height: 1.35; }
.tw-index-c { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: .98rem; }
.tw-index li.is-hot a, .tw-index a:hover, .tw-index a:focus-visible { background: var(--sand-2); padding-left: .9rem; }
.tw-index li.is-hot .tw-index-t, .tw-index a:hover .tw-index-t { color: var(--terra); }

.tw-hide { width: 100%; height: auto; aspect-ratio: 1; display: block; overflow: visible; }
.tw-hide .tw-cell { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease), opacity .45s ease, filter .45s ease; }
.tw-hide .is-ochre { fill: var(--ochre); }
.tw-hide .is-maize { fill: var(--maize); }
.tw-hide .is-chestnut { fill: var(--chestnut); }
.tw-hide .is-sage { fill: #A9BBA8; }
.tw-hide .is-green-soft { fill: var(--green-2); }
.tw-hide .tw-cell-bg { fill: var(--chestnut); }
.tw-hide image { filter: sepia(.32) saturate(.9) brightness(.96); transition: filter .5s ease; }
.tw-hide .is-photo { cursor: pointer; outline: none; text-decoration: none; }
.tw-hide a, .tw-hide text { text-decoration: none; }
.tw-hide .is-photo:hover, .tw-hide .is-photo.is-hot { transform: scale(1.06); }
.tw-hide .is-photo:hover image, .tw-hide .is-photo.is-hot image { filter: none; }
.tw-hide.has-hot .tw-cell:not(.is-hot) { opacity: .38; }
.tw-hide .tw-cell-num circle { fill: var(--paper); transition: fill .3s ease; }
.tw-hide .tw-cell-num text { font-family: var(--ui); font-weight: 800; font-size: 22px; fill: var(--forest); }
.tw-hide .is-hot .tw-cell-num circle, .tw-hide .is-photo:hover .tw-cell-num circle { fill: var(--maize); }
.tw-hero-cap { position: absolute; right: 0; bottom: -.4rem; margin: 0; max-width: 20ch; text-align: right; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.3; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
	/* Fläckarna står i slutläget i markup. Animationen läggs bara på när sidan syns, och klassen tas bort efter högst 1,5 s. */
	.tw-hide.is-popping .tw-cell { animation: tw-pop .9s var(--ease) backwards; animation-delay: var(--d, 0s); }
	.tw-hide.is-popping.has-hot .tw-cell { animation: none; }
}
@keyframes tw-pop { from { opacity: 0; transform: scale(.35) rotate(-6deg); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
	.tw-hero { grid-template-columns: 1fr; grid-template-areas: "head" "art" "list"; row-gap: 1.6rem; padding-top: 1.6rem; }
	.tw-hero-lede { margin-bottom: 0; }
	.tw-hero-art { margin-inline: -4%; }
	.tw-hero-cap { position: static; text-align: center; max-width: none; margin-top: .6rem; }
}

/* =========================================================
   Sektioner
   ========================================================= */
.tw-section { padding-block: var(--wp--preset--spacing--60) 0; }
.tw-sec-head { margin-bottom: var(--wp--preset--spacing--40); }
.tw-sec-head.is-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.tw-sec-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.tw-sec-title em { color: var(--terra); }
.tw-sec-lede { color: var(--ink-2); max-width: 44ch; margin: 1rem 0 0; font-size: 1.08rem; }
.tw-sec-head.is-split .tw-sec-lede { margin: 0; justify-self: end; }
@media (max-width: 800px) { .tw-sec-head.is-split { grid-template-columns: 1fr; } .tw-sec-head.is-split .tw-sec-lede { justify-self: start; } }

/* Ämnen: swahiliord i stor stil */
.tw-topics-wrap { padding-bottom: var(--wp--preset--spacing--60); margin-top: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem clamp(2rem, 5vw, 6rem); align-items: start; }
.tw-topics-wrap .tw-sec-head { position: sticky; top: calc(var(--head-h) + 2rem); }
@media (max-width: 1180px) { .tw-topics-wrap { grid-template-columns: 1fr; } .tw-topics-wrap .tw-sec-head { position: static; } }
.tw-topics { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.tw-topics li { border-top: 1px solid var(--rule); }
.tw-topics a { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; grid-template-areas: "sw sv n" "sw d n"; align-items: center; column-gap: 1.6rem; padding: 1.2rem .4rem; text-decoration: none; color: var(--ink); isolation: isolate; overflow: hidden; }
.tw-topics a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green); opacity: 0; -webkit-mask: url(assets/img/hide.svg) repeat 0 0 / 200px; mask: url(assets/img/hide.svg) repeat 0 0 / 200px; transform: translateX(-4%); transition: opacity .5s ease, transform 1.2s var(--ease); }
.tw-topics a:hover::before, .tw-topics a:focus-visible::before { opacity: .1; transform: none; }
.tw-topic-sw { grid-area: sw; min-width: 4.2em; font-family: var(--serif); font-size: clamp(2.5rem, 4.6vw, 4.6rem); line-height: 1; letter-spacing: -.02em; transition: color .35s ease, transform .5s var(--ease); }
.tw-topics a:hover .tw-topic-sw { font-style: italic; transform: translateX(.6rem); }
.tw-topic-sv { grid-area: sv; align-self: end; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); }
.tw-topic-d { grid-area: d; align-self: start; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.tw-topic-n { grid-area: n; font-family: var(--serif); font-style: italic; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
	.tw-topics a { grid-template-columns: 1fr auto; grid-template-areas: "sw n" "sv sv" "d d"; row-gap: .25rem; }
	.tw-topic-sv { margin-top: .4rem; }
}

/* Guider: sandfläckar på grönt nät */
.tw-guides-band { position: relative; background: var(--night); color: var(--ink); padding-block: var(--wp--preset--spacing--60); margin-top: 0; isolation: isolate; overflow: hidden; }
.tw-guides-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green-2); opacity: .45; -webkit-mask: url(assets/img/hide.svg) repeat 0 0 / 320px; mask: url(assets/img/hide.svg) repeat 0 0 / 320px; }
.tw-guides-band .tw-sec-title, .tw-guides-band .tw-sec-lede { color: var(--ink); }
.tw-guides-band .tw-sec-lede { opacity: .86; }
.tw-guides-band .tw-sec-title em { color: var(--maize); }
.tw-guides-band .tw-eyebrow { color: var(--maize); }
.tw-guides-band.is-compact { padding-block: var(--wp--preset--spacing--50); }
.tw-guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tw-guide { --c: var(--maize); position: relative; display: flex; flex-direction: column; gap: .7rem; min-height: 22rem; padding: 2.2rem 2rem 2rem; background: var(--c); color: var(--ink); text-decoration: none; clip-path: url(#tw-clip-1); transition: background .45s ease, transform .6s var(--ease); }
.tw-guide:nth-child(2) { clip-path: url(#tw-clip-2); }
.tw-guide:nth-child(3) { clip-path: url(#tw-clip-4); }
.tw-guide:nth-child(4) { clip-path: url(#tw-clip-5); }
.tw-guide:hover, .tw-guide:focus-visible { --c: var(--paper); color: var(--ink); transform: translateY(-6px); }
.tw-guide-n { font-family: var(--ui); font-weight: 800; font-size: 3.2rem; line-height: 1; letter-spacing: -.04em; color: var(--green); }
.tw-guide-k { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: auto; }
.tw-guide:hover .tw-guide-k { color: var(--ink-2); }
.tw-guide-t { font-family: var(--serif); font-size: clamp(1.45rem, 1.8vw, 1.8rem); line-height: 1.08; }
.tw-guide-e { font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.tw-guide-more { font-weight: 600; font-size: .92rem; }
.tw-guides-band.is-compact .tw-guide { min-height: 15rem; }
.tw-guides-band.is-compact .tw-guide-e { display: none; }
@media (max-width: 1100px) { .tw-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tw-guides { grid-template-columns: 1fr; } .tw-guide { min-height: 0; padding: 1.8rem 1.6rem; } .tw-guide-k { margin-top: .4rem; } }
.tw-404 .tw-guides .tw-guide { --c: var(--maize); }

/* =========================================================
   Kort och flöde
   ========================================================= */
.tw-card { position: relative; display: flex; flex-direction: column; gap: .55rem; }
.tw-card-img { position: relative; margin: 0 0 .6rem; overflow: hidden; clip-path: var(--clip, url(#tw-clip-1)); background: var(--sand-2); }
.tw-card-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s ease; filter: sepia(.14) saturate(.94); }
.tw-card:hover .tw-card-img img { transform: scale(1.06); filter: none; }
.tw-card-img a { display: block; }
.tw-card-kick, .tw-card .wp-block-post-terms { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tw-card-kick a, .tw-kick { text-decoration: none; color: var(--terra); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .55em; max-width: 100%; }
.tw-sw { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.45em; color: var(--ink); }
.tw-sv { color: var(--terra); }
.tw-card-title, .tw-card .wp-block-post-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.7vw, 1.7rem); line-height: 1.1; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
.tw-card-title a { text-decoration: none; color: var(--ink); background: linear-gradient(var(--ochre), var(--ochre)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease), color .3s ease; }
.tw-card:hover .tw-card-title a, .tw-card-title a:focus-visible { background-size: 100% 2px; }
.tw-card-ex, .tw-card .wp-block-post-excerpt { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.tw-card .wp-block-post-excerpt__excerpt { margin: 0; }
.tw-card-meta, .tw-card .wp-block-post-date { margin: .2rem 0 0; font-size: .8rem; color: var(--muted); letter-spacing: .03em; }
.tw-card-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

.tw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3rem) clamp(1.2rem, 2.4vw, 2.6rem); }
@media (max-width: 900px) { .tw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tw-cards { grid-template-columns: 1fr; } }

/* Flödet på startsidan: 1 stor + 2 + 4 + 3 */
.tw-feed .tw-feed-grid { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.2rem, 3.2vw, 3.4rem) clamp(1.2rem, 2.4vw, 2.6rem); list-style: none; padding: 0; margin: 0; }
.tw-feed .tw-feed-grid > li { grid-column: span 4; margin: 0; }
.tw-feed .tw-feed-grid > li:nth-child(6n+1) .tw-card { --clip: url(#tw-clip-1); }
.tw-feed .tw-feed-grid > li:nth-child(6n+2) .tw-card { --clip: url(#tw-clip-2); }
.tw-feed .tw-feed-grid > li:nth-child(6n+3) .tw-card { --clip: url(#tw-clip-3); }
.tw-feed .tw-feed-grid > li:nth-child(6n+4) .tw-card { --clip: url(#tw-clip-4); }
.tw-feed .tw-feed-grid > li:nth-child(6n+5) .tw-card { --clip: url(#tw-clip-5); }
.tw-feed .tw-feed-grid > li:nth-child(6n+6) .tw-card { --clip: url(#tw-clip-6); }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(1) { grid-column: 1 / span 7; grid-row: span 2; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(2), .tw-home .tw-feed .tw-feed-grid > li:nth-child(3) { grid-column: 8 / span 5; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+4):nth-child(-n+7) { grid-column: span 3; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+8) { grid-column: span 4; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(1) .tw-card-img img { aspect-ratio: 5 / 4; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(1) .wp-block-post-title { font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.02; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(1) .wp-block-post-excerpt { font-size: 1.12rem; max-width: 50ch; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(2) .tw-card-img img, .tw-home .tw-feed .tw-feed-grid > li:nth-child(3) .tw-card-img img { aspect-ratio: 16 / 9; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(2) .wp-block-post-excerpt, .tw-home .tw-feed .tw-feed-grid > li:nth-child(3) .wp-block-post-excerpt { display: none; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+4):nth-child(-n+7) .wp-block-post-excerpt { display: none; }
.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+4):nth-child(-n+7) .wp-block-post-title { font-size: 1.35rem; }
@media (max-width: 1000px) {
	.tw-feed .tw-feed-grid > li, .tw-home .tw-feed .tw-feed-grid > li:nth-child(n) { grid-column: span 6 !important; grid-row: auto !important; }
	.tw-home .tw-feed .tw-feed-grid > li:nth-child(1) { grid-column: 1 / -1 !important; }
		.tw-home .tw-feed .tw-feed-grid > li:nth-child(2) .tw-card-img img, .tw-home .tw-feed .tw-feed-grid > li:nth-child(3) .tw-card-img img { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
	.tw-feed .tw-feed-grid > li, .tw-home .tw-feed .tw-feed-grid > li:nth-child(n) { grid-column: 1 / -1 !important; }
	.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+2) .tw-card { display: grid !important; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1rem; align-items: start; }
	.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+2) .tw-card-img { grid-row: 1 / span 4; margin: 0; }
	.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+2) .tw-card-img img { aspect-ratio: 1 !important; }
	.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+2) .wp-block-post-excerpt { display: none; }
	.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+2) .wp-block-post-title { font-size: 1.25rem !important; }
	.tw-home .tw-feed .tw-feed-grid > li:nth-child(n+2) .wp-block-post-terms { font-size: .66rem; }
}
.tw-feed.is-archive .tw-feed-grid > li:nth-child(1) { grid-column: 1 / -1; }
.tw-feed.is-archive .tw-feed-grid > li:nth-child(1) .tw-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.tw-feed.is-archive .tw-feed-grid > li:nth-child(1) .tw-card-img { grid-row: 1 / span 5; margin: 0; }
.tw-feed.is-archive .tw-feed-grid > li:nth-child(1) .wp-block-post-terms { margin-top: 1rem; }
.tw-feed.is-archive .tw-feed-grid > li:nth-child(1) .wp-block-post-title { font-size: clamp(2rem, 3.4vw, 3.2rem); }
@media (max-width: 800px) { .tw-feed.is-archive .tw-feed-grid > li:nth-child(1) .tw-card { display: flex; } .tw-feed.is-archive .tw-feed-grid > li:nth-child(1) .tw-card-img { margin-bottom: .6rem; } }
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--50); font-weight: 600; }

/* =========================================================
   Kangan
   ========================================================= */
.tw-kanga { margin: 0; }
.tw-kanga-field { position: relative; border: 30px solid transparent; border-image: url(assets/img/kanga-frame.svg) 32 round; background: var(--ochre); padding: clamp(1.5rem, 5vw, 4.5rem) clamp(1rem, 5vw, 4rem); isolation: isolate; display: grid; place-items: center; min-height: clamp(18rem, 34vw, 30rem); }
.tw-kanga-field::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--terra-2); opacity: .32; -webkit-mask: url(assets/img/hide.svg) repeat center / 210px; mask: url(assets/img/hide.svg) repeat center / 210px; }
.tw-kanga-msg { position: relative; background: var(--sand); padding: clamp(1.8rem, 3.5vw, 3.2rem) clamp(1.6rem, 4vw, 4.4rem); text-align: center; max-width: 46rem; clip-path: url(#tw-clip-1); }
.tw-kanga-label { margin: 0 0 .9rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.tw-kanga-label [lang="sw"] { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.2rem; font-weight: 400; }
.tw-kanga blockquote { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-size: clamp(1.9rem, 4.2vw, 3.8rem); line-height: 1.04; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.tw-kanga figcaption { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--ink-2); }
.tw-kanga-note { max-width: 58ch; margin: 1.4rem auto 0; text-align: center; color: var(--ink-2); font-size: .98rem; }
.tw-kanga.is-small .tw-kanga-field { min-height: 0; border-width: 22px; padding: clamp(1.2rem, 3vw, 2.4rem); }
.tw-kanga.is-small blockquote { font-size: clamp(1.5rem, 2.8vw, 2.3rem); }

/* =========================================================
   Om-bandet på startsidan
   ========================================================= */
.tw-about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; padding-bottom: var(--wp--preset--spacing--60); }
.tw-about-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.tw-about-art::before { content: ""; position: absolute; inset: 0; background: var(--maize); clip-path: url(#tw-clip-3); }
.tw-about-art .tw-mark { position: relative; width: 70%; height: auto; color: var(--green); transform: translateY(6%); }
.tw-about-text p { max-width: 60ch; color: var(--ink-2); }
.tw-about-text .tw-sec-title { margin-bottom: 1.4rem; }
.tw-about-note { font-weight: 600; color: var(--ink) !important; border-left: 3px solid var(--ochre); padding-left: 1rem; }
@media (max-width: 800px) { .tw-about { grid-template-columns: 1fr; } .tw-about-art { max-width: 260px; } }

/* =========================================================
   Artikeln
   ========================================================= */
.tw-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 100; background: var(--terra); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
	.tw-progress { animation: tw-grow linear both; animation-timeline: scroll(root); }
}
@supports not (animation-timeline: scroll()) { .tw-progress { display: none; } }
@keyframes tw-grow { to { transform: scaleX(1); } }

.tw-article-head { max-width: 1040px; padding-top: clamp(2rem, 6vw, 5rem); }
.tw-article-kick { margin: 0 0 1.2rem; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tw-article-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5.6vw, 5.6rem); line-height: .98; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
.tw-dek { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; color: var(--ink-2); max-width: 52ch; margin: 1.4rem 0 0; }
.tw-dek p { margin: 0; }
.tw-byline { gap: .7rem 1rem !important; align-items: center; margin-top: 1.8rem; font-size: .9rem; color: var(--ink-2); }
.tw-byline-mark { width: 30px; height: 30px; color: var(--terra); }
.tw-byline .wp-block-post-author-name { font-weight: 600; color: var(--ink); }
.tw-byline .wp-block-post-date { font-size: .9rem; color: var(--muted); }
.tw-hero-img { margin: clamp(2rem, 4vw, 3.5rem) 0 0; clip-path: url(#tw-clip-2); }
.tw-hero-img img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; }
@media (max-width: 700px) { .tw-hero-img img { aspect-ratio: 4 / 3; } }

.tw-read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); margin-top: var(--wp--preset--spacing--50); padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50); align-items: start; }
.tw-read > .tw-read-aside { grid-column: 1; grid-row: 1; justify-self: end; width: min(100%, 250px); position: sticky; top: calc(var(--head-h) + 2rem); margin: 0; }
.tw-read > .tw-body { grid-column: 2; grid-row: 1; margin: 0 !important; min-width: 0; }
@media (max-width: 1100px) {
	.tw-read { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
	.tw-read > .tw-read-aside { position: static; grid-row: 1; justify-self: stretch; width: auto; margin-bottom: 2rem; }
	.tw-read > .tw-body { grid-column: 1; grid-row: 2; }
}
.tw-toc { border-top: 2px solid var(--ink); padding-top: 1rem; font-size: .9rem; }
.tw-toc-label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); margin: 0 0 .8rem; }
.tw-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.tw-toc li { counter-increment: toc; border-bottom: 1px solid var(--rule); }
.tw-toc a { display: grid; grid-template-columns: 1.8rem 1fr; padding: .5rem 0; text-decoration: none; color: var(--ink-2); line-height: 1.35; transition: color .25s ease, padding .3s var(--ease); }
.tw-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--ui); font-weight: 700; color: var(--terra); }
.tw-toc a:hover, .tw-toc a.is-current { color: var(--ink); padding-left: .3rem; }
.tw-toc a.is-current::before { color: var(--terra); }

.tw-body { font-size: var(--wp--preset--font-size--medium); line-height: 1.78; }
.tw-body > * { max-width: 680px; }
.tw-body > p:first-child { font-size: 1.24em; line-height: 1.6; color: var(--ink); }
.tw-single .tw-body > p:first-child::first-letter { font-family: var(--serif); float: left; font-size: 4.4em; line-height: .84; margin: .06em .12em 0 -.02em; color: var(--terra); }
.tw-body h2 { font-family: var(--serif); font-size: clamp(1.85rem, 2.8vw, 2.4rem); line-height: 1.08; margin: 2.8rem 0 1rem; position: relative; text-wrap: balance; }
.tw-body h2::before { content: ""; display: block; width: 26px; height: 34px; margin-bottom: .8rem; background: var(--ochre); -webkit-mask: url(assets/img/patch.svg) center / contain no-repeat; mask: url(assets/img/patch.svg) center / contain no-repeat; }
.tw-body h3 { font-family: var(--serif); font-size: 1.55rem; margin: 2.2rem 0 .7rem; }
.tw-body h4 { margin: 1.6rem 0 .4rem; }
.tw-body p { margin: 0 0 1.3rem; }
.tw-body a { text-decoration-color: var(--ochre); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.tw-body a:hover { color: var(--terra); text-decoration-color: var(--terra); }
.tw-body ul, .tw-body ol { padding-left: 0; margin: 0 0 1.5rem; }
.tw-body ul { list-style: none; }
.tw-body ul > li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; }
.tw-body ul > li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .72em; height: 1em; background: var(--ochre); -webkit-mask: url(assets/img/patch.svg) center / contain no-repeat; mask: url(assets/img/patch.svg) center / contain no-repeat; }
.tw-body ol { list-style: none; counter-reset: li; }
.tw-body ol > li { counter-increment: li; position: relative; padding-left: 2.4rem; margin-bottom: .7rem; }
.tw-body ol > li::before { content: counter(li); position: absolute; left: 0; top: -.05em; font-family: var(--serif); font-size: 1.35em; color: var(--terra); }
.tw-body strong { font-weight: 650; color: var(--ink); }
.tw-body blockquote { margin: 2.2rem 0; padding: 0 0 0 1.6rem; border-left: 3px solid var(--ochre); font-family: var(--serif); font-style: italic; font-size: 1.55rem; line-height: 1.3; }
.tw-body blockquote p { margin: 0; }
.tw-body hr { border: 0; height: 16px; margin: 2.6rem 0; background: var(--ochre); -webkit-mask: url(assets/img/kanga-b.svg) repeat-x center / auto 100%; mask: url(assets/img/kanga-b.svg) repeat-x center / auto 100%; }

/* Faktarutor och ingresser i guiderna */
.tw-fakta { position: relative; background: var(--sand-2); padding: 1.7rem 1.8rem 1.3rem; margin: 2.2rem 0; border-radius: 4px 22px 4px 22px; }
.tw-fakta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--green-2); border-radius: 4px 22px 0 0; -webkit-mask: url(assets/img/kanga-a.svg) repeat-x 0 0 / auto 100%; mask: url(assets/img/kanga-a.svg) repeat-x 0 0 / auto 100%; }
.tw-fakta-h { font-size: .74rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); margin: .2rem 0 .8rem !important; }
.tw-fakta p, .tw-fakta li { font-size: 1rem; line-height: 1.6; }
.tw-fakta ul { margin-bottom: .4rem; }
.tw-fakta > :last-child { margin-bottom: 0; }
.tw-ord { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.4rem; }
.tw-ord p { margin: 0 0 .5rem; }

.tw-after { max-width: 900px; margin: var(--wp--preset--spacing--60) auto 0; }
.tw-author { display: grid !important; grid-template-columns: 72px minmax(0, 1fr); gap: 1.4rem; margin-top: var(--wp--preset--spacing--50); padding-top: 2rem; border-top: 1px solid var(--rule); }
.tw-author .tw-mark { width: 72px; height: 72px; color: var(--terra); }
.tw-author .tw-eyebrow { margin-bottom: .3rem; }
.tw-author-name { font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; }
.tw-author .wp-block-post-author-biography { color: var(--ink-2); margin-top: .5rem; max-width: 60ch; }
.tw-more { padding-bottom: var(--wp--preset--spacing--60); }

/* =========================================================
   Sidor och guider
   ========================================================= */
.tw-page-head { padding-top: clamp(2.5rem, 7vw, 6rem); }
.tw-page-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: .95; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.tw-page-title em { color: var(--terra); }
.tw-page-body { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); margin-top: 0 !important; }
.tw-page .tw-body > p:first-child { font-size: 1.2em; }

.tw-om-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-top: clamp(2.5rem, 6vw, 5rem); }
.tw-om-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.tw-om-art::before { content: ""; position: absolute; inset: 0; background: var(--maize); clip-path: url(#tw-clip-4); }
.tw-om-art .tw-mark { position: relative; width: 72%; height: auto; color: var(--green); transform: translateY(8%); }
.tw-om .tw-read { padding-bottom: 0; }
.tw-om .tw-section { padding-bottom: var(--wp--preset--spacing--60); }
@media (max-width: 760px) { .tw-om-head { grid-template-columns: 1fr; } .tw-om-art { max-width: 180px; } }

.tw-guide-head { position: relative; background: var(--maize); color: var(--ink); padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem); isolation: isolate; overflow: hidden; }
.tw-guide-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ochre); opacity: .45; -webkit-mask: url(assets/img/hide.svg) repeat 0 0 / 300px; mask: url(assets/img/hide.svg) repeat 0 0 / 300px; }
.tw-guide-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: var(--green); -webkit-mask: url(assets/img/kanga-a.svg) repeat-x 0 0 / auto 100%; mask: url(assets/img/kanga-a.svg) repeat-x 0 0 / auto 100%; }
.tw-guide-head .tw-eyebrow { color: var(--green); }
.tw-guide-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 5.6vw, 5.4rem); line-height: .98; letter-spacing: -.022em; color: var(--ink); margin: 0; max-width: 21ch; text-wrap: balance; }
.tw-guide-head .tw-dek { color: var(--ink-2); }
.tw-guide-head .tw-byline { color: var(--ink); }
.tw-guide-head .tw-byline .wp-block-post-author-name { color: var(--ink); }
.tw-guide-head .tw-byline-mark { color: var(--green); }
.tw-guide-upd { color: var(--muted); }
.tw-read.is-guide { margin-top: 0; }
.tw-guide-page .tw-body > p:first-child { font-size: 1.24em; }

/* Arkiv */
.tw-archive-head { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1fr); }
.tw-archive-title { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.tw-arch-sw { font-family: var(--serif); font-weight: 400; font-size: clamp(4rem, 13vw, 12rem); line-height: .82; letter-spacing: -.035em; color: var(--ink); }
.tw-arch-sv { order: -1; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.tw-archive-head .tw-dek { max-width: 56ch; }
.tw-archive h1.tw-archive-title:not(:has(.tw-arch-sw)) { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; }
.tw-archive .tw-section { padding-bottom: var(--wp--preset--spacing--60); }
.tw-search { max-width: 560px; margin-top: 1.6rem; }
.tw-search .wp-block-search__input { border: 1px solid var(--ink); border-radius: 999px; padding: .8rem 1.2rem; background: transparent; font: inherit; }
.tw-search .wp-block-search__button { border-radius: 999px; padding: .8rem 1.4rem; margin-left: .5rem; }

.tw-404-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: clamp(3rem, 8vw, 7rem); }
.tw-404-inner .tw-search { grid-column: 2; }
.tw-404-art .tw-mark { width: 100%; height: auto; color: var(--terra); transform: rotate(-14deg); }
.tw-404 .tw-section { padding-bottom: var(--wp--preset--spacing--60); }
@media (max-width: 700px) { .tw-404-inner { grid-template-columns: 1fr; } .tw-404-inner .tw-search { grid-column: 1; } .tw-404-art { max-width: 140px; } }

/* =========================================================
   Sidfot
   ========================================================= */
.tw-footer { position: relative; background: var(--night); color: var(--ink); margin-top: 0; isolation: isolate; overflow: hidden; }
.tw-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green-2); opacity: .35; -webkit-mask: url(assets/img/hide.svg) repeat 0 0 / 260px; mask: url(assets/img/hide.svg) repeat 0 0 / 260px; }
.tw-footer .tw-pindo { position: absolute; left: 0; right: 0; top: 0; margin: 0 !important; max-width: none !important; width: auto; }
.tw-footer { padding-top: 30px; }
.tw-footer-inner { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.tw-footer a { color: var(--sand); text-decoration: none; }
.tw-footer a:hover { color: var(--maize); text-decoration: underline; text-decoration-color: var(--maize); }
.tw-footer-brand { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "m w" "m s"; column-gap: 1.2rem; align-items: end; padding-bottom: var(--wp--preset--spacing--50); border-bottom: 1px solid color-mix(in srgb, var(--sand) 18%, transparent); }
.tw-footer-brand .tw-mark { grid-area: m; width: clamp(64px, 9vw, 110px); height: auto; aspect-ratio: 1; color: var(--maize); }
.tw-footer-word { grid-area: w; margin: 0; font-family: var(--serif); font-size: clamp(3.4rem, 9vw, 8rem); line-height: .85; letter-spacing: -.03em; }
.tw-footer-say { grid-area: s; margin: .6rem 0 0; font-size: .95rem; color: color-mix(in srgb, var(--sand) 80%, transparent); }
.tw-footer-say [lang="sw"] { font-family: var(--serif); font-style: italic; font-size: 1.2em; color: var(--maize); }
.tw-footer-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem clamp(2rem, 4vw, 4rem); padding-top: var(--wp--preset--spacing--50); }
.tw-footer-cols p { margin: 0 0 1rem; font-size: .98rem; line-height: 1.6; color: color-mix(in srgb, var(--sand) 88%, transparent); max-width: 42ch; }
.tw-footer-note { font-size: .88rem !important; border-left: 2px solid var(--maize); padding-left: .9rem; }
.tw-footer-h { font-size: .72rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--maize) !important; margin-bottom: .9rem !important; }
.tw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .96rem; }
.tw-footer ul [lang="sw"] { font-family: var(--serif); font-style: italic; color: var(--maize); margin-right: .35em; }
.tw-footer-legal { margin: var(--wp--preset--spacing--50) 0 0; padding-top: 1.2rem; border-top: 1px solid color-mix(in srgb, var(--sand) 18%, transparent); font-size: .82rem; color: color-mix(in srgb, var(--sand) 72%, transparent); }
@media (max-width: 900px) { .tw-footer-cols { grid-template-columns: 1fr 1fr; } .tw-footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .tw-footer-cols { grid-template-columns: 1fr; } }

/* Långa svenska sammansättningar får avstavas i stora rubriker */
.tw-guide-title, .tw-article-title, .tw-page-title, .tw-hero-title, .tw-sec-title, .tw-card-title, .tw-card .wp-block-post-title, .tw-arch-sw, .tw-body h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* =========================================================
   Rörelse av
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.tw-reveal { opacity: 1 !important; transform: none !important; }
	.tw-progress { display: none; }
}

/* Mobilmenyn: vänsterställd, med en remsa giraffhud längst ned */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.2rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: .3rem 0 .2rem 1rem !important; border-left: 2px solid var(--ochre) !important; border-radius: 0; min-width: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .3rem 0 !important; color: var(--ink-2); }
.wp-block-navigation__responsive-container.is-menu-open::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(90deg, var(--maize), var(--ochre)); -webkit-mask: url(assets/img/hide.svg) repeat 0 0 / 200px; mask: url(assets/img/hide.svg) repeat 0 0 / 200px; pointer-events: none; }

/* =========================================================
   Typografisk motvikt: Syne för märke, etiketter, siffror och meny.
   Inga små spärrade versaler; etiketterna står i gemener med tyngd.
   ========================================================= */
.tw-eyebrow, .tw-index-label, .tw-topic-sv, .tw-guide-k, .tw-card-kick, .tw-card .wp-block-post-terms, .tw-article-kick, .tw-toc-label, .tw-kanga-label, .tw-fakta-h, .tw-arch-sv, .tw-footer-h, .tw-sv, .tw-guide-more, .tw-link-arrow, .tw-topic-n, .tw-card-meta, .tw-card .wp-block-post-date, .tw-byline, .tw-tag {
	font-family: var(--ui) !important; text-transform: none !important; letter-spacing: -.005em !important;
}
.tw-eyebrow, .tw-index-label, .tw-toc-label, .tw-kanga-label, .tw-fakta-h, .tw-footer-h, .tw-arch-sv { font-size: .95rem !important; font-weight: 700; }
.tw-eyebrow { color: var(--terra); display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .2rem; }
.tw-card-kick, .tw-card .wp-block-post-terms, .tw-article-kick { font-size: .9rem; font-weight: 700; }
.tw-sw { font-size: 1.2em; }
.tw-topic-sv { font-size: .95rem; font-weight: 700; color: var(--ink); }
.tw-topic-n { font-style: normal; font-weight: 700; font-size: .95rem; color: var(--ink-2); }
.tw-guide-k { font-size: .9rem; font-weight: 700; color: var(--ink-2); }
.tw-index-n { font-family: var(--ui); font-weight: 800; color: var(--terra); }
.tw-index-c { color: var(--muted); }
.tw-arch-sv { color: var(--ink); }
.tw-footer-word { font-family: var(--ui); font-weight: 800; letter-spacing: -.055em; }
.tw-hero-title { letter-spacing: -.03em; }
.tw-dot { background: var(--maize); }
.tw-yellow .tw-dot, .tw-topics-wrap .tw-dot, .tw-guide-head .tw-dot, .tw-archive-head .tw-dot { background: var(--green); }
.tw-light .tw-dot, .tw-read .tw-dot { background: var(--ochre); }
.tw-nav .tw-nav-om > a { font-weight: 700; }
.tw-hero-cap { color: var(--muted); }