/* The Forest direction (fate-scot-home-forest.html, 18 Oct 2026): the hero's
   deep green carried through the site. Warm photos in every chapter, cream
   type on the dark grounds, lime for the words that matter, and paper for
   reading.

   The homepage is dark from top to bottom, with Plan as a paper chapter and
   the donate band lime. Inner pages open dark (the section field) and close
   dark (Read next, the closing band, the footer); reading happens on white
   and paper chapters between, with questions on night green.

   Loaded last. Rules here are the Forest components; the chapter and block
   colours themselves are in sections.css and pages.css. */

:root {
	--on-dark-muted: rgb(var(--cream-rgb) / 0.78);
}

/* A chapter's words: heading, line, text, one column. */
.sh { max-width: 66ch; }
.sh .lead { margin-top: 14px; }
.sh .body { margin-top: 14px; }
.acts { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 28px; }
.acts p { margin: 0; font-weight: 600; }
@media (max-width: 640px) { .acts .btn { width: 100%; justify-content: center; } }

/* ============================================================
   THE HOMEPAGE: dark from top to bottom
   ============================================================ */
.home {
	--chap: clamp(2.6rem, 4.8vw, 4.8rem);   /* the chapter words, a size down from the inner pages */
	--mega: clamp(min(3.4rem, 15.5vw), 7.6vw, 9rem);
	--sp: clamp(72px, 8.5vw, 128px);
	--lift: clamp(64px, 7vw, 104px);
	background: var(--forest);
	color: var(--cream);
}

.home :is(h1, h2, h3, h4) { color: var(--cream); }
.home .fcols h2 { color: var(--lime); }
.home .doc h3 { color: #2a2a26; }
.home .lead { color: var(--cream); }
.home .body { color: var(--on-dark-muted); }
.home .dot { color: var(--lime); }
.home :focus-visible { outline-color: var(--lime); }
.home .btn-outline { border-color: rgb(255 255 255 / 0.45); color: var(--cream); }
.home .btn-outline:hover { border-color: #fff; background: #fff; color: var(--forest); }
.home .more { border-color: var(--lime); color: var(--cream); }
.home .more:hover { border-color: #fff; }
.home .acts p { color: var(--on-dark-muted); }

/* The homepage's two light moments keep their own colours. */
.home .ch-plan :is(h2, h3), .home .ch-plan .lead { color: var(--night); }
.home .ch-plan :is(.body, .steps p, .acts p, .plan-acts p, .sheet figcaption) { color: var(--slate); }
.home .ch-plan .dot { color: var(--leaf); }
.home .ch-plan :focus-visible { outline-color: var(--give); }
.home .give-band h2 { color: var(--night); }
.home .give-band .body { color: rgb(19 38 26 / 0.82); }
.home .give-band :focus-visible { outline-color: var(--give); }

/* Hero: taller, the photo given more of the screen, fading into forest */
.home .hero {
	--ph: clamp(320px, 80vw, 600px);
	min-height: min(100svh, 960px);
	padding: calc(var(--island) + clamp(36px, 5vw, 80px)) 0 calc(var(--lift) + clamp(48px, 6vw, 88px));
}

.home .hero::before {
	background:
		linear-gradient(90deg, rgb(var(--forest-rgb) / 0.97) 0%, rgb(var(--forest-rgb) / 0.92) 36%, rgb(var(--forest-rgb) / 0.55) 56%, rgb(var(--forest-rgb) / 0) 76%),
		linear-gradient(0deg, var(--forest) 0%, rgb(var(--forest-rgb) / 0.6) 18%, rgb(var(--forest-rgb) / 0) 42%);
}

.home .hero-copy { max-width: min(50rem, 58%); }
.home .hero h1 { line-height: 0.98; }

@media (max-width: 899px) {
	.home .hero { min-height: 0; padding-top: calc(var(--ph) - clamp(28px, 7vw, 72px)); }
	.home .hero::before {
		background: linear-gradient(180deg, rgb(var(--forest-rgb) / 0.15) 0, rgb(var(--forest-rgb) / 0) calc(var(--ph) * 0.3), rgb(var(--forest-rgb) / 0.55) calc(var(--ph) * 0.6), rgb(var(--forest-rgb) / 0.9) calc(var(--ph) * 0.82), var(--forest) var(--ph));
	}
	.home .hero-copy { max-width: none; }
}

/* Where to start: three tall photo tiles lifted over the hero's edge.
   The hero's language in small: a photo, a forest gradient, the word. */
.tiles { display: grid; gap: clamp(12px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; }

.tile {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--night);
	color: #fff;
	text-decoration: none;
}

.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(19 38 26 / 0) 38%, rgb(19 38 26 / 0.3) 62%, rgb(19 38 26 / 0.88) 100%); }
.tile .tx { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: grid; gap: 6px; padding: clamp(18px, 2.4vw, 30px); }
.tile b { font-size: clamp(1.6rem, 2.4vw, 2.3rem); font-weight: var(--w-head); line-height: 1; letter-spacing: var(--ls-big); text-wrap: balance; }
.tile .tx > span { max-width: 30ch; font-size: 0.98rem; line-height: 1.45; color: rgb(255 255 255 / 0.88); }

.tile .ar {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	color: var(--forest);
	font-size: 1.1rem;
	transition: background 0.2s, transform 0.3s;
}

.tile:hover .ar { background: var(--lime); transform: translate(3px, -3px); }
.routes { position: relative; z-index: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(-1 * var(--lift)); }
.routes .tile { aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.7); }

@media (max-width: 1000px) { .routes { grid-template-columns: 1fr; } .routes .tile { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .routes .tile { aspect-ratio: 4 / 3; } }

/* The big sentence, in cream */
.home .statement { font-size: min(2.6rem, calc(100cqw / var(--measure))); line-height: 1.04; letter-spacing: var(--ls-big); color: var(--cream); }
@media (min-width: 768px) { .home .statement { font-size: min(4.4rem, calc(100cqw / var(--measure))); } }
.home .statement em { color: var(--lime); }
.home .chip { box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 8px 20px -8px rgb(0 0 0 / 0.5); }
.home .chip-leaf { overflow: hidden; border-radius: 50%; background: #fff; }
.home .chip-leaf img { padding: 10%; }

/* The members' archive: the stack of tinted folders (sections.css) stays
   as it is on the dark grounds; it is the archive's picture on the homepage
   and beside the heading of the Members page. */
.home .wrap.archive { padding-block: var(--sp); }
.home .archive-acts .btn-ink { background: var(--lime); color: var(--night); }
.home .archive-acts .btn-ink:hover { background: #fff; }

/* Updates: as it was, on forest */
.home .ch-updates { padding-top: 0; }
.home .n-feature a, .home .n-list a { color: var(--cream); }
.home .n-feature p { color: var(--on-dark-muted); }

/* Take part: the lines, on night */
.home .involved .body { margin-top: 14px; }
.home .index { margin-top: clamp(36px, 4.5vw, 60px); border-top: 1px solid var(--on-dark-rule); }
.home .index a { border-radius: 12px; color: var(--cream); }
.home .index img { width: clamp(64px, 6.5vw, 92px); border-radius: 12px; }
.home .index b { font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: var(--ls-big); color: var(--cream); }
.home .index span { color: rgb(var(--cream-rgb) / 0.72); }
.home .index a:hover b, .home .index a:hover span { color: var(--night); }
.home .index a.give b { color: #f3a48b; }
.home .index a.give:hover b, .home .index a.give:hover span { color: #fff; }

/* Help strip and footer on the dark ground */
.home .help { background: var(--night); }
.home .help h2 { color: var(--cream); }
.home .help p { color: var(--on-dark-muted); }
.home .help a { color: #fff; }
.home .site-footer { border-top: 1px solid var(--on-dark-rule); }

/* ============================================================
   SUPPORT, on the homepage and at the top of the Support page: the
   photo beside the words, a lime quote, the chooser as a night card
   ============================================================ */
.sup-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.sup-split figure { margin: 0; }
.sup-split figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.sup-split .sh { max-width: none; }

.pull-lime { margin: clamp(26px, 3vw, 36px) 0 0; }
.pull-lime blockquote { margin: 0; }
.pull-lime blockquote p { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--lime); text-wrap: balance; }
.pull-lime figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-size: 0.95rem; color: rgb(var(--cream-rgb) / 0.7); }
.pull-lime figcaption b { font-weight: 650; color: var(--cream); }

@media (max-width: 1000px) { .sup-split { grid-template-columns: 1fr; } .sup-split figure { max-width: 560px; } }

/* The chooser ("Who are you looking for help for?") as a night card,
   wherever it appears. The questions card (.qa-card) stays white. */
.who:not(.qa-card) { padding: clamp(22px, 3vw, 44px); border-radius: calc(var(--r) + 8px); background: var(--night); color: var(--cream); }
.ch-support .who { margin-top: clamp(56px, 6vw, 88px); }
.who:not(.qa-card) .who-q { color: var(--cream); }
.who:not(.qa-card) .tabs button { border-color: var(--on-dark-rule); background: transparent; color: var(--cream); }
.who:not(.qa-card) .tabs button:hover { border-color: #fff; }
.who:not(.qa-card) .tabs button[aria-selected="true"] { border-color: var(--lime); background: var(--lime); color: var(--night); }
.who:not(.qa-card) .panel { border-top-color: var(--on-dark-rule); }
.who:not(.qa-card) .panel .say { color: var(--cream); }
.who:not(.qa-card) .body { color: var(--on-dark-muted); }
.who:not(.qa-card) .btn-ink { background: var(--lime); color: var(--night); }
.who:not(.qa-card) .btn-ink:hover { background: #fff; }
.who:not(.qa-card) .svc li a { border-bottom-color: var(--on-dark-rule); color: var(--cream); }
.who:not(.qa-card) .svc li:first-child a { border-top-color: var(--on-dark-rule); }
.who:not(.qa-card) .svc b { color: var(--cream); }
.who:not(.qa-card) .svc span { color: rgb(var(--cream-rgb) / 0.7); }
.who:not(.qa-card) .svc .ar { border-color: var(--on-dark-rule); border-radius: 50%; }
.who:not(.qa-card) .svc a:hover .ar { border-color: var(--lime); background: var(--lime); color: var(--night); }
.who:not(.qa-card) .svc a:hover b { text-decoration-color: var(--lime); }
.who:not(.qa-card) .promise { margin-top: 24px; color: var(--cream); }
.who:not(.qa-card) .promise li::before { background: var(--lime); }
.who:not(.qa-card) :focus-visible { outline-color: var(--lime); }

/* ============================================================
   PLAN: the paper chapter. No photograph: the example directive is the
   chapter's picture. On the homepage the words sit over the steps in the
   first column and the sheet in the second, staying put while the steps
   scroll. On the Plan page the words and the sheet are in the dark field,
   the sheet lifting over its edge onto the paper, and the steps follow as
   a row of links.
   ============================================================ */
.home .ch-plan .sh { max-width: none; }
.home .ch-plan .sh + .steps { margin-top: clamp(28px, 3.5vw, 48px); }
.home .sheet { position: sticky; top: calc(var(--island) + 24px); transform: rotate(0.8deg); }
.js .home .sheet.rv.in { transform: rotate(0.8deg); }
.home .sheet figcaption { transform: rotate(-0.8deg); }

.sec-field.plan-head { padding-bottom: 0; }
.plan-head-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 110px); align-items: end; }
.plan-head .sh { padding-bottom: calc(var(--lift) + clamp(40px, 5vw, 72px)); }
.plan-head .plan-acts { margin-top: clamp(28px, 3vw, 40px); }
.plan-head .plan-acts p { color: var(--sec-muted); }
.sheet--lift { position: relative; z-index: 2; margin-bottom: calc(-1 * var(--lift)); transform: rotate(0.8deg); }
.sheet--lift .doc { box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 40px 80px -30px rgb(0 0 0 / 0.7); }
.sheet--lift .doc h3 { color: #2a2a26; }
.sheet--lift figcaption { color: var(--slate); transform: rotate(-0.8deg); }
.hub .ch-plan.plan-row { padding-top: calc(var(--lift) + clamp(40px, 5vw, 72px)); }
.hub .steps--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.hub .steps--row li { display: block; padding: 22px 0 0; border-top: 2px solid var(--night); border-bottom: 0; }
.hub .steps--row li::before { display: block; margin-bottom: 14px; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; }
.hub .steps--row h3 { font-size: 1.25rem; }
.hub .steps--row p { margin-top: 8px; }
.hub .steps--row .more { margin-top: 18px; color: var(--night); }

@media (max-width: 1000px) {
	.home .sheet { position: static; max-width: 560px; }
	.home .sheet, .js .home .sheet.rv.in { transform: rotate(0.6deg); }
	.plan-head-in { grid-template-columns: minmax(0, 1fr); }
	.plan-head .sh { padding-bottom: 0; }
	.plan-head-in .sheet--lift { max-width: 560px; margin-top: clamp(32px, 5vw, 56px); transform: rotate(0.6deg); }
	.hub .steps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) { .hub .steps--row { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   THE BAND: the photo itself, a window in the night between Action and
   Take part
   ============================================================ */
.home .band { display: flex; align-items: center; justify-content: center; min-height: clamp(380px, 64vh, 680px); }
.home .band::before { background: linear-gradient(180deg, var(--night) 0%, rgb(19 38 26 / 0) 26%, rgb(19 38 26 / 0) 62%, var(--night) 100%), rgb(10 24 15 / 0.28); }
.home .band-words { font-size: clamp(2.2rem, 5vw, 4.8rem); font-weight: var(--w-head); line-height: 1; letter-spacing: var(--ls-big); text-shadow: 0 2px 24px rgb(0 0 0 / 0.35); }

/* ============================================================
   ACTION: night, a photo behind the words, the law's status line
   ============================================================ */
.ch-action { position: relative; isolation: isolate; overflow: hidden; }
.act-photo { position: absolute; top: 0; right: 0; bottom: 0; z-index: -2; width: 72%; }
.act-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ch-action--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, var(--night) 0%, var(--night) 30%, rgb(19 38 26 / 0.82) 48%, rgb(19 38 26 / 0.55) 66%, rgb(19 38 26 / 0.35) 100%),
		linear-gradient(0deg, var(--night) 0%, rgb(19 38 26 / 0) 36%);
}

.status { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 10px 14px; border-radius: 10px; background: rgb(255 255 255 / 0.08); font-size: 0.95rem; font-weight: 600; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.home .line { margin-top: clamp(56px, 7vw, 110px); }
.home .line .yr { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: var(--ls-big); }
.home .action-acts { margin-top: clamp(36px, 4vw, 56px); }

@media (max-width: 899px) {
	.act-photo { bottom: auto; width: 100%; height: 46%; }
	.ch-action--photo::before { background: linear-gradient(180deg, rgb(19 38 26 / 0.35) 0%, rgb(19 38 26 / 0.9) 34%, var(--night) 46%); }
}