:root {
	--ink: #f5f1e8;
	--muted: #aaa79f;
	--faint: #77736c;
	--paper: #e9e4d8;
	--night: #0d0d0d;
	--night-2: #151412;
	--night-3: #1d1b17;
	--line: rgba(245, 241, 232, .13);
	--orange: #ff6b1a;
	--orange-light: #ffb079;
	--orange-shadow: rgba(255, 107, 26, .26);
	--max: 1180px;
	--bar: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--night); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; }
body.admin-bar { --bar: 32px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange); }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { z-index: 100; top: 8px; left: 8px; width: auto; height: auto; padding: 10px 14px; clip: auto; border-radius: 6px; background: var(--orange); color: var(--night); font-weight: 750; }

.site-header { position: relative; z-index: 30; border-bottom: 1px solid var(--line); background: var(--night); }
.site-header__inner { width: min(var(--max), calc(100% - 48px)); min-height: 68px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home .site-header__inner { width: auto; padding: 0 clamp(20px, 3vw, 44px); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 750; letter-spacing: -.04em; font-size: 24px; line-height: 1; }
.brand:hover { color: var(--ink); }
.brand__mark { display: block; width: auto; height: 33px; }
.brand__name { font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav__list { list-style: none; display: flex; align-items: center; gap: 23px; padding: 0; margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.site-nav__list a { transition: color .18s ease; }
.site-nav__list .current-menu-item > a { color: var(--ink); }
.site-nav__cta { padding: 10px 16px; border: 1px solid var(--orange); border-radius: 999px; color: var(--orange); font-weight: 750; font-size: 14px; white-space: nowrap; transition: all .18s ease; }
.site-nav__cta:hover { color: var(--night); background: var(--orange); }
.menu-toggle { display: none; }
/* Social networks beside the logo: icons only; the name is there for screen readers. */
.site-header__brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.social-icons { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--line); list-style: none; }
.social-icons a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); transition: color .18s ease, background .18s ease; }
.social-icons a:hover { color: var(--orange); background: rgba(255, 255, 255, .06); }
.social-icons svg { width: 17px; height: 17px; }
.social-icons--menu { display: none; }

.eyebrow { color: var(--orange); margin: 0 0 15px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
/* The campaign's name in the home header: one line, no margin, so it sits level with the logo. */
.site-header .site-header__campaign { flex: none; margin: 0; text-align: right; line-height: 1.35; white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; padding: 12px 20px; border-radius: 7px; font-size: 15px; font-weight: 750; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { border: 1px solid var(--orange); background: var(--orange); color: var(--night); box-shadow: 0 10px 28px var(--orange-shadow); }
.button--primary:hover { color: var(--night); background: #ff833f; box-shadow: 0 13px 34px rgba(255, 107, 26, .34); }

/* Home: map on the left, sections on the right. */
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.split__map { position: sticky; top: var(--bar); align-self: start; height: calc(100vh - var(--bar)); overflow-y: auto; padding: 26px clamp(20px, 3vw, 44px) 22px; border-right: 1px solid var(--line); background: radial-gradient(circle at 50% 36%, #2e190a 0%, #19120c 46%, #0f0e0d 82%); }
/* Sized from the viewport height so the whole map panel fits without scrolling. */
/* The map takes what the banner and the number leave on the screen; the list and the credits
   below it may run under the fold, where the column scrolls. */
.split__map .preokret-map__canvas { max-width: min(100%, max(320px, calc(100vh - var(--bar) - 290px))); }

/* Above the map: the campaign banner, the number of volunteers and the sign-up button,
   so on a phone the button is on the first screen. */
.campaign { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; margin: 0 0 16px; }
.campaign__title { flex: 1 1 220px; max-width: 350px; margin: 0; }
.campaign__title img { display: block; width: 100%; height: auto; }
.campaign__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.campaign__total { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.campaign__total strong { color: var(--orange); font-family: Georgia, serif; font-size: clamp(40px, 4.6vw, 62px); font-weight: 400; line-height: .95; letter-spacing: -.03em; }
.campaign__total span { color: var(--muted); font-size: 14px; }
.campaign__join { min-height: 52px; padding: 12px 26px; font-size: 16px; }
.split__content { min-width: 0; padding: clamp(30px, 4vw, 56px) clamp(20px, 4vw, 64px) 70px; }
.split__intro h1 { margin: 0; font-size: clamp(34px, 3.7vw, 58px); font-weight: 800; letter-spacing: -.055em; line-height: 1.02; }
.split__intro h1 em { color: var(--orange); font-family: Georgia, serif; font-weight: 400; }
.split__intro p { margin: 16px 0 0; color: var(--muted); font-family: Georgia, serif; font-style: italic; font-size: clamp(17px, 1.5vw, 21px); }

.section-menu { position: sticky; z-index: 5; top: var(--bar); margin: 26px 0 0; padding: 12px 0; border-bottom: 1px solid var(--line); background: var(--night); }
.section-menu ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.section-menu a { display: inline-flex; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 650; white-space: nowrap; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.section-menu a:hover { border-color: rgba(255, 255, 255, .34); color: var(--ink); }
.section-menu a[aria-current="true"] { border-color: var(--orange); background: rgba(255, 107, 26, .1); color: var(--orange); }
.section-menu .section-menu__cta { border-color: var(--orange); color: var(--orange); }
.section-menu .section-menu__cta[aria-current="true"] { background: var(--orange); color: var(--night); }

/* A short section still fills the screen under the menu. Otherwise the right column would be
   no taller than the map panel, the panel would stop sticking, and the map would shift every
   time a short section replaced a long one. */
.split .section-panels { min-height: calc(100vh - var(--bar) - 66px); }
.section-panel { padding: 34px 0 26px; scroll-margin-top: calc(var(--bar) + 70px); }
.section-panel + .section-panel { border-top: 1px solid var(--line); }
.section-panel[hidden] { display: none; }
.section-panel[hidden] + .section-panel, .is-tabbed .section-panel { border-top: 0; }
.section-panel > h2 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; }
.section-panel__more { margin: 26px 0 0; font-size: 13px; font-weight: 700; }
.section-panel__more a { color: var(--orange); }

/* Text written in the editor. */
.entry-content > :first-child { margin-top: 0; }
.entry-content > p, .entry-intro > p, .card__body > p { margin: 0 0 1em; color: var(--muted); font-size: 17px; }
.entry-intro > p { color: #d3ccc0; font-size: 19px; line-height: 1.5; }
.entry-intro > p:last-child { margin-bottom: 0; }
.entry-content > h2 { margin: 1.7em 0 .45em; font-size: 26px; letter-spacing: -.04em; line-height: 1.15; }
.entry-content > h3, .card__body > h3 { margin: 1.5em 0 .4em; font-size: 20px; letter-spacing: -.03em; line-height: 1.2; }
.entry-content > ul, .entry-content > ol { margin: 0 0 1.2em; padding-left: 1.25em; color: var(--muted); font-size: 16.5px; }
.entry-content li { margin: .4em 0; }
.entry-content li::marker { color: var(--orange); }
.entry-content strong { color: var(--ink); }
.entry-content > p a, .entry-content li a, .entry-intro a, .card a { color: var(--orange-light); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 3px solid var(--orange); color: var(--ink); font-family: Georgia, serif; font-size: 19px; font-style: italic; }

/* Cards made from a page's headings (see preokret_cards_from_headings). */
.cards { display: grid; gap: 12px; margin-top: 24px; }
.entry-content > .cards:first-child { margin-top: 0; }
.card { position: relative; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(150deg, #1b1915 0%, #131210 100%); transition: border-color .2s ease; }
.card__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px 20px; list-style: none; }
.card__summary::-webkit-details-marker { display: none; }
summary.card__summary { cursor: pointer; }
.card__title { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; }
.card__lead { display: block; margin-top: 6px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.card__toggle { position: relative; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; transition: transform .25s ease, border-color .2s ease; }
.card__toggle::before, .card__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--muted); }
.card__toggle::after { transform: rotate(90deg); }
summary.card__summary:hover .card__toggle { border-color: rgba(255, 255, 255, .34); }
.card[open] { border-color: rgba(255, 107, 26, .42); }
.card[open] .card__toggle { transform: rotate(45deg); border-color: var(--orange); }
.card[open] .card__toggle::before, .card[open] .card__toggle::after { background: var(--orange); }
.card__body { padding: 0 20px 18px; }
.card__body > :last-child { margin-bottom: 0; }
.card__body > ul, .card__body > ol { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.card__body > ul > li, .card__body > ol > li { position: relative; margin: 0; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); color: #d3ccc0; font-size: 15px; line-height: 1.5; }
.card__body > ul > li:last-child, .card__body > ol > li:last-child { border-bottom: 0; padding-bottom: 2px; }
.card__body > ul > li::before, .card__body > ol > li::before { content: ""; position: absolute; top: 18px; left: 3px; width: 7px; height: 7px; border-radius: 2px; background: var(--orange); }

/* On a page of short statements, and for the outcome of numbered steps, a card is a label and a sentence. */
.cards--statements .card__title, .card--outcome .card__title { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.cards--statements .card__lead, .card--outcome .card__lead { margin-top: 9px; color: var(--ink); font-size: 17px; }

/* Numbered cards sit on a rail that leads to the outcome. */
.card--numbered, .card--outcome { margin-left: 58px; }
.card__num { position: absolute; top: 14px; left: -58px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 107, 26, .55); border-radius: 50%; background: var(--night); color: var(--orange); font-family: Georgia, serif; font-size: 16px; line-height: 1; }
.card--numbered::before { content: ""; position: absolute; top: 56px; bottom: -27px; left: -38.5px; width: 1px; background: linear-gradient(rgba(255, 107, 26, .55), rgba(255, 107, 26, .18)); }
.card--numbered[open] .card__num { background: var(--orange); color: var(--night); }
.card--outcome { border-color: rgba(255, 107, 26, .5); background: linear-gradient(150deg, rgba(255, 107, 26, .2) 0%, rgba(255, 107, 26, .05) 100%); }
.card--outcome::after { content: "→"; position: absolute; top: 14px; left: -58px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: var(--night); font-size: 18px; font-weight: 800; line-height: 1; }
.card--outcome .card__lead { font-family: Georgia, serif; font-size: 21px; line-height: 1.35; }

/* List style "Pločice": short items as a grid of tiles. */
.entry-content ul.is-style-tiles, .entry-content ol.is-style-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.entry-content .is-style-tiles > li { position: relative; margin: 0; padding: 30px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(150deg, #1b1915 0%, #131210 100%); color: var(--ink); font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.entry-content .is-style-tiles > li::before { content: ""; position: absolute; top: 14px; left: 14px; width: 18px; height: 2px; border-radius: 2px; background: var(--orange); }

/* List style "Koraci": what happens, in order. */
.entry-content ol.is-style-steps, .entry-content ul.is-style-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 4px 0 26px; padding: 0; list-style: none; counter-reset: step; }
.entry-content .is-style-steps > li { position: relative; margin: 0; padding: 50px 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; counter-increment: step; }
.entry-content .is-style-steps > li::before { content: counter(step); position: absolute; z-index: 1; top: 0; left: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 107, 26, .55); border-radius: 50%; background: var(--night); color: var(--orange); font-family: Georgia, serif; font-size: 16px; }
.entry-content .is-style-steps > li::after { content: ""; position: absolute; top: 18px; left: 36px; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 107, 26, .55), rgba(255, 107, 26, .15)); }
.entry-content .is-style-steps > li:last-child::after { display: none; }
.entry-content .is-style-steps > li strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15.5px; }

/* Paragraph style "Istaknuta obavijest". */
.entry-content p.is-style-callout { margin: 0 0 1em; padding: 18px 20px; border: 1px dashed rgba(255, 176, 121, .45); border-radius: 14px; background: rgba(255, 107, 26, .06); color: var(--ink); font-size: 17px; }

.join-banner { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 84px 0; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.join-banner h2 { margin: 0; font-size: clamp(32px, 4.2vw, 56px); font-weight: 800; letter-spacing: -.052em; line-height: 1.04; }
.join-banner > div > p:last-child { margin: 17px 0 0; color: var(--muted); }

/* Below the map: each page of the main menu as a band, the title on the left and the whole
   text on the right, like the map and its sections above. The title stays in view while a
   long text is read. */
.movement { border-bottom: 1px solid var(--line); }
.movement__inner { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 64px 0 72px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
.movement__head { position: sticky; top: calc(var(--bar) + 28px); }
.movement__head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; }
.movement__head .section-panel__more { margin-top: 18px; }

/* Full-width bands, so the lines between them run edge to edge like the one under the map. */
.share { border-top: 1px solid var(--line); }
.share__inner { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 48px 0 64px; display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.share h2 { max-width: 460px; margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.share__links { display: flex; flex-wrap: wrap; gap: 8px; }
.share__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .025); color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.share__link:hover { border-color: var(--orange); color: var(--orange); }
.share__link[hidden] { display: none; }
.share__link--primary { border-color: var(--orange); background: var(--orange); color: var(--night); }
.share__link--primary:hover { background: #ff833f; color: var(--night); }
/* Viber only opens from a phone or tablet. */
.share__link--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
	.share__link--touch { display: inline-flex; }
}

.page-content { width: min(840px, calc(100% - 48px)); min-height: 70vh; margin: 0 auto; padding: 72px 0 104px; }
.page-content > h1 { margin: 0 0 34px; font-size: clamp(38px, 5.4vw, 68px); font-weight: 800; letter-spacing: -.06em; line-height: 1.01; }
.post-card { margin-bottom: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(150deg, #1b1915 0%, #131210 100%); }
.post-card p { margin: 0; color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.post-card h2, .post-card h3 { margin: 7px 0 5px; font-size: 22px; letter-spacing: -.035em; line-height: 1.2; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--orange); }
.post-card > div { color: var(--muted); font-size: 15px; }
.post-card--empty { border-style: dashed; color: var(--muted); }
.post-content { max-width: 760px; }
.pagination { margin-top: 30px; }
.pagination .nav-links { display: flex; gap: 14px; color: var(--muted); font-size: 14px; }
.pagination .current { color: var(--orange); }

.site-footer { border-top: 1px solid var(--line); background: #090909; }
.site-footer__inner { width: min(var(--max), calc(100% - 48px)); padding: 58px 0 42px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 40px; }
.brand--footer { font-size: 25px; }
.site-footer p { margin: 15px 0 0; color: var(--muted); font-size: 14px; }
.footer-links, .social-links { display: grid; align-content: start; gap: 10px; font-size: 14px; color: var(--muted); }
.footer-links a:hover, .social-links a:hover { color: var(--orange); }
.social-links a { display: inline-flex; align-items: center; gap: 9px; }
.social-links svg { flex: none; width: 15px; height: 15px; opacity: .85; }
.site-footer__bottom { width: min(var(--max), calc(100% - 48px)); padding: 19px 0; margin: 0 auto; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }
.site-footer__bottom span { float: right; color: #b75b2b; }

@media (max-width: 1100px) {
	/* Several pages in the header: tighter, and a second row rather than an overflow. */
	.site-nav__list { flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; font-size: 13.5px; }
}

@media (max-width: 900px) {
	/* Map first, then the menu and the sections below it. */
	.split { grid-template-columns: 1fr; }
	.split__map { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
	.split__map .preokret-map__canvas { max-width: 560px; }
	.section-panels { min-height: 0; }
	/* The bar's background reaches both edges, so text scrolling under it never shows at the sides. */
	.split__content .section-menu { margin-left: calc(-1 * clamp(20px, 4vw, 64px)); margin-right: calc(-1 * clamp(20px, 4vw, 64px)); padding-left: clamp(20px, 4vw, 64px); padding-right: clamp(20px, 4vw, 64px); }
	/* The band stacks: the title, then the text. */
	.movement__inner { display: block; }
	.movement__head { position: static; margin-bottom: 26px; }
}

@media (max-width: 782px) {
	body.admin-bar { --bar: 46px; }
}

@media (max-width: 760px) {
	.site-header__inner { width: min(100% - 34px, var(--max)); min-height: 62px; }
	.brand { font-size: 21px; }
	.brand__mark { height: 29px; }
	.site-header__brand { gap: 10px; }
	.social-icons { gap: 0; padding-left: 10px; }
	.social-icons a { width: 28px; height: 28px; }
	.social-icons svg { width: 15px; height: 15px; }
	.menu-toggle { display: grid; gap: 5px; width: 35px; padding: 8px 3px; border: 0; background: transparent; cursor: pointer; }
	.menu-toggle span:not(.screen-reader-text) { display: block; height: 2px; background: var(--ink); }
	.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 18px; border: 1px solid var(--line); background: #131210; box-shadow: 0 16px 34px rgba(0, 0, 0, .32); }
	.site-nav.is-open { display: grid; gap: 17px; }
	.site-nav__list { display: grid; gap: 12px; }
	.site-nav__cta { text-align: center; }
	/* Beside the icons there is no room for one line; two right-aligned lines stay centred. */
	.site-header .site-header__campaign { flex: 0 1 auto; white-space: normal; }
	.movement__inner { width: min(100% - 34px, var(--max)); padding: 46px 0 56px; }
	.join-banner { width: min(100% - 34px, var(--max)); align-items: flex-start; flex-direction: column; padding: 64px 0; }
	.join-banner .button { width: 100%; }
	.share__inner { width: min(100% - 34px, var(--max)); padding: 36px 0 50px; }
	.page-content { width: min(100% - 34px, 840px); padding: 46px 0 78px; }
	.site-footer__inner { width: min(100% - 34px, var(--max)); grid-template-columns: 1fr; gap: 30px; padding: 44px 0 32px; }
	.site-footer__bottom { width: min(100% - 34px, var(--max)); }
}

@media (max-width: 600px) {
	/* The admin bar stops being fixed at this width, so nothing needs to clear it. */
	body.admin-bar { --bar: 0px; }
	/* Every section stays visible on a phone: three equal buttons per row instead of a row that scrolls off the edge. */
	.section-menu { padding-top: 10px; padding-bottom: 10px; }
	.section-menu ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.section-menu a { display: flex; justify-content: center; padding: 8px 6px; font-size: 13.5px; }
	.section-panel { scroll-margin-top: 110px; }
	/* The banner across the screen, then the number and the button in one row. */
	.campaign { gap: 14px; }
	.campaign__title { flex-basis: 100%; max-width: none; }
	.campaign__aside { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
	.campaign__join { flex: 1 1 auto; }
}

@media (max-width: 480px) {
	/* Too narrow for the icons next to the logo: the phone menu carries them, and the footer always does. */
	.site-header__brand .social-icons { display: none; }
	.social-icons--menu { display: flex; gap: 6px; padding: 0; border: 0; }
	.site-footer__bottom span { float: none; display: block; margin-top: 3px; }
	.card--numbered, .card--outcome { margin-left: 44px; }
	.card__num, .card--outcome::after { left: -44px; width: 34px; height: 34px; font-size: 14px; }
	.card--numbered::before { top: 50px; left: -27.5px; }
	.card__summary { padding: 16px; }
	.card__body { padding: 0 16px 16px; }
	.entry-content ol.is-style-steps, .entry-content ul.is-style-steps { grid-template-columns: 1fr; gap: 14px; }
	.entry-content .is-style-steps > li { padding: 6px 0 0 50px; min-height: 36px; }
	.entry-content .is-style-steps > li::after { top: 36px; bottom: -14px; left: 18px; right: auto; width: 1px; height: auto; background: rgba(255, 107, 26, .35); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.card, .card__toggle { transition: none; }
}