/* ==========================================================================
   SUBPAGE template (page-templates/subpage.php). Values from Subpage*_clean.dc.html (revision 6).
   --sec / --sec-dk / --tint are set on <main class="subpage"> from the parent section.
   Every rule is scoped to .subpage so nothing leaks into the shared chrome.
   ========================================================================== */

.subpage { background: #FCFAF6; }
.subpage ul { list-style: none; margin: 0; padding: 0; }
.subpage blockquote { margin: 0; }
.subpage .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec); }
.subpage .ic { display: block; fill: none; stroke: var(--sec); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero ---------- */
.subpage .sp-hero { position: relative; overflow: hidden; background: var(--tint); }
.subpage .sp-hero-in { position: relative; padding-top: 40px; padding-bottom: 104px; }
.subpage .sp-mark { position: absolute; top: -120px; left: 760px; height: calc(100% + 120px); width: auto; aspect-ratio: 120 / 152; opacity: 0.55; pointer-events: none; }
.subpage .sp-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 96px; align-items: center; }
.subpage .sp-hero-txt { display: flex; flex-direction: column; gap: 22px; }
.subpage .crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 16px; color: #5A5F65; margin-bottom: 28px; }
.subpage .crumb-cur { color: #33383D; font-weight: 600; }
.subpage .sp-title { font-family: var(--odtd-serif); font-size: 60px; font-weight: 400; line-height: 1.06; color: #3F6E9C; }
.subpage .sp-lead { font-size: 22px; line-height: 1.5; color: #33383D; max-width: 44ch; text-wrap: pretty; }
.subpage .sp-door { position: relative; width: 272px; height: 386px; }
.subpage .sp-door .fr, .subpage .sp-door .im { position: absolute; width: 260px; height: 375px; border-radius: 130px 130px 3px 3px; box-sizing: border-box; }
.subpage .sp-door .fr { left: 12px; top: 11px; border: 2px solid var(--sec); }
.subpage .sp-door .im { left: 0; top: 0; overflow: hidden; background: var(--tint); }
.subpage .sp-door img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.subpage .hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.subpage .hero-curve svg { display: block; width: 100%; height: 72px; }

/* ---------- body: sticky section rail + reading column ---------- */
.subpage .sp-body { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 96px; align-items: start; padding-top: 40px; padding-bottom: 112px; }
/* the rail is STICKY: it stays in view however far the page scrolls (no previous/next buttons).
   A rail taller than the window scrolls inside itself. */
.subpage .sp-rail { position: sticky; top: 32px; max-height: calc(100vh - 64px); overflow-y: auto; display: flex; flex-direction: column; gap: 36px; }
.admin-bar .subpage .sp-rail { top: 64px; max-height: calc(100vh - 96px); }
.subpage .rail-box { background: #FFFFFF; border: 1px solid #E4DED4; border-top: 4px solid var(--sec); padding: 26px 26px 22px; }
.subpage .rail-back { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.subpage .rail-list { margin-top: 18px; display: flex; flex-direction: column; }
.subpage .rail-list > li { padding: 11px 0 11px 16px; border-left: 2px solid #E4DED4; font-size: 17px; line-height: 1.35; }
.subpage .rail-list > li > a { display: block; }
.subpage .rail-list > .on { border-left: 4px solid var(--sec); padding-left: 14px; font-weight: 600; }
.subpage .rail-list > .on > a { color: #33383D; }
.subpage .rail-h { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: #33383D; }
.subpage .rail-toc { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; font-size: 16px; line-height: 1.35; }

.subpage .sp-main { max-width: 780px; display: flex; flex-direction: column; gap: 72px; }
.subpage .blk { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 32px; }
.subpage .h2 { font-family: var(--odtd-serif); font-size: 38px; font-weight: 400; line-height: 1.15; color: #33383D; text-wrap: balance; }
/* ONE body font: every block of copy is Karla; Newsreader only for the title and headings */
.subpage .p { font-size: 19px; line-height: 1.65; color: #4A4F55; text-wrap: pretty; margin: 0; }
.subpage .p-big { font-size: 24px; font-weight: 600; line-height: 1.4; color: #33383D; }
.subpage .p-strong { font-weight: 600; color: #33383D; }
.subpage .h-ic { display: flex; align-items: center; gap: 22px; }
.subpage .h-ic .tile-icon { flex: none; }

/* activity (Explore) */
.subpage .act { background: var(--tint); border-radius: 10px; padding: 48px 48px 52px; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 40px; }
.subpage .act-icon { width: 88px; height: 88px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.subpage .act-icon .ic { width: 46px; height: 46px; }
.subpage .act > .act-icon { width: 148px; height: 148px; }
.subpage .act > .act-icon .ic { width: 84px; height: 84px; }
.subpage .act-h { font-family: var(--odtd-serif); font-size: 44px; font-weight: 400; line-height: 1; color: var(--sec-dk); margin-top: 6px; }
.subpage .act-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin-top: 24px; }
.subpage .act-lbl { font-size: 17px; font-weight: 600; color: #33383D; margin-bottom: 12px; line-height: 1.4; }
.subpage .bul { display: flex; flex-direction: column; gap: 9px; font-size: 17px; line-height: 1.45; color: #4A4F55; }
.subpage .bul > li { position: relative; padding-left: 16px; }
.subpage .bul > li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sec); }
.subpage .bul-lg { font-size: 19px; line-height: 1.55; gap: 14px; }

/* video: 16:9 frame + caption */
.subpage .vid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: center; }
.subpage .vid-frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #14161A; }
.subpage .vid-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.subpage .vid-frame.wide img { object-fit: cover; }
.subpage .vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.subpage .vid-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: #FCFAF6; box-shadow: 0 6px 20px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.subpage .vid-frame:hover .vid-play { transform: scale(1.06); }
.subpage .vid-cap { display: flex; flex-direction: column; gap: 10px; }
.subpage .vid-cap .t { font-size: 20px; line-height: 1.5; color: #33383D; }
/* branded poster (falls back to the YouTube thumbnail when a video has none) */
.subpage .vid-frame.pst { background: radial-gradient(circle at 88% 115%, rgba(222,129,119,0.75) 0%, rgba(222,129,119,0) 52%), linear-gradient(135deg, #2F5A85 0%, #3F6E9C 55%, #6E9BC9 100%); color: #FCFAF6; }
.subpage .pst-mark { position: absolute; right: 4%; bottom: -6%; height: 86%; width: auto; color: #FFFFFF; opacity: 0.13; }
.subpage .pst-brand { position: absolute; left: 28px; top: 24px; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #FCFAF6; }
.subpage .pst-brand svg { display: block; }
.subpage .pst-t { position: absolute; left: 28px; right: 38%; top: 50%; transform: translateY(-62%); font-family: var(--odtd-serif); font-size: 30px; line-height: 1.12; color: #FFFFFF; text-wrap: balance; }
.subpage .pst-meta { position: absolute; left: 100px; bottom: 34px; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #F3D3CE; }
.subpage .pst .vid-play { left: 28px; top: auto; bottom: 22px; margin: 0; width: 56px; height: 56px; }
.subpage .pst .vid-play svg { width: 20px; height: 22px; margin-left: 3px; }
.subpage .pst.sm .pst-brand { left: 20px; top: 16px; font-size: 10px; }
.subpage .pst.sm .pst-t { left: 20px; font-size: 23px; right: 44%; }
.subpage .pst.sm .pst-meta { left: 82px; bottom: 26px; font-size: 12px; }
.subpage .pst.sm .vid-play { left: 20px; bottom: 16px; width: 50px; height: 50px; }

/* link list: indented like bullets; new-tab icon 6px after the text, centred on it; PDF badge */
.subpage .links { display: flex; flex-direction: column; gap: 12px; }
.subpage .links-h { font-family: var(--odtd-serif); font-size: 27px; font-weight: 400; line-height: 1.2; color: #33383D; }
.subpage .links-list { display: flex; flex-direction: column; gap: 2px; padding-left: 22px; }
.subpage .links-list > li { position: relative; padding: 7px 0 7px 22px; font-size: 18px; font-weight: 500; line-height: 1.4; }
.subpage .links-list > li > .lic, .subpage .links-list > li > .pdf { margin-left: 6px; vertical-align: middle; position: relative; top: -1px; }
.subpage .links-list > li::before { content: ""; position: absolute; left: 0; top: calc(7px + 0.7em); width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sec); }
.subpage .lic { flex: none; display: inline-flex; align-items: center; color: #3F6E9C; }
.subpage .lic svg { display: block; }
.subpage .pdf { flex: none; display: inline-flex; align-items: center; padding: 2px 6px; border: 1.5px solid #B85B50; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #B85B50; line-height: 1.2; }

/* pull quote */
.subpage .quote { position: relative; padding: 8px 0 8px 40px; border-left: 4px solid var(--sec); }
.subpage .quote .q { font-size: 24px; font-style: italic; line-height: 1.5; color: #33383D; text-wrap: pretty; }
.subpage .quote .by { margin-top: 14px; font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #5A5F65; }

/* respond prompt */
.subpage .prompt { background: #FFFFFF; border: 1px solid #E4DED4; border-top: 4px solid var(--sec); padding: 36px 40px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 26px; align-items: start; }
.subpage .prompt .act-icon { width: 64px; height: 64px; background: var(--tint); }
.subpage .prompt .act-icon .ic { width: 34px; height: 34px; }
/* Round 2 (Nathan): a little more room before each Respond block and pull quote (20px block gap + 28px = 48px). */
.subpage .blk > * + .prompt, .subpage .blk > * + .quote { margin-top: 28px; }
.subpage .prompt-b { display: flex; flex-direction: column; gap: 10px; }
.subpage .prompt .bul { font-size: 18px; }
.subpage .prompt .p { font-size: 18px; color: #33383D; }

/* tiles (child pages): brand gradient band, each tile one of the four section colours in turn */
.subpage .tiles-band { background: linear-gradient(120deg, #DCE8F4 0%, #EDF3F9 45%, #F8E3DF 100%); border-radius: 12px; padding: 32px; position: relative; overflow: hidden; }
.subpage .tiles-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(222,129,119,0.18); pointer-events: none; }
.subpage .tiles { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.subpage .tile { display: flex; background: #FFFFFF; border-top: 4px solid var(--sec); border-radius: 0 0 6px 6px; box-shadow: 0 6px 18px rgba(51, 56, 61, 0.07); transition: box-shadow .25s ease; overflow: hidden; }
.subpage .tile > a { flex: 1; padding: 0 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: inherit; }
.subpage .tile:nth-child(4n+1) { --sec: #3F6E9C; --tint: #EDF3F9; }
.subpage .tile:nth-child(4n+2) { --sec: #DE8177; --tint: #FBEDEA; }
.subpage .tile:nth-child(4n+3) { --sec: #6E9BC9; --tint: #EAF2FA; }
.subpage .tile:nth-child(4n+4) { --sec: #B85B50; --tint: #F7E8E5; }
.subpage .tile-img { display: block; width: calc(100% + 36px); max-width: none; margin: 0 -18px; height: 112px; object-fit: cover; }
.subpage .tile-img + .tile-icon { margin-top: -38px; border: 4px solid #FFFFFF; }
.subpage .tile a > .tile-icon:first-child { margin-top: 20px; }
.subpage .tile-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--tint); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.subpage .tile-icon .ic { width: 40px; height: 40px; }
.subpage .tile .tile-icon { width: 60px; height: 60px; }
.subpage .tile .tile-icon .ic { width: 32px; height: 32px; }
.subpage .tile-t { font-size: 18px; font-weight: 600; line-height: 1.25; color: #33383D; min-height: 2.5em; }
.subpage .tile-go { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--sec); transition: color .15s ease; }
.subpage .tile:hover { box-shadow: 0 12px 32px rgba(51, 56, 61, 0.08); }
.subpage .tile:hover .tile-go { color: #B85B50; }
.subpage .tile .go { display: block; flex: none; transition: transform .25s ease; }
.subpage .tile:hover .go { transform: translateX(4px); }

/* credit */
.subpage .credit { background: var(--tint); border-radius: 10px; padding: 24px 28px; font-size: 16px; line-height: 1.6; color: #4A4F55; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; }
.subpage .credit img { width: 180px; height: auto; display: block; }

/* method cards (third-level pages): video, name, its PDF */
.subpage .mcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
.subpage .mcard { display: flex; flex-direction: column; gap: 14px; }
.subpage .mcard .links-list > li { font-size: 17px; }
.subpage .mcard-t { font-family: var(--odtd-serif); font-size: 28px; font-weight: 400; line-height: 1.15; color: #33383D; margin-top: 4px; }

/* optional page image */
.subpage .sp-fig { display: flex; flex-direction: column; gap: 10px; }
.subpage .sp-fig img { display: block; width: 100%; height: auto; border-radius: 8px; }
.subpage .sp-fig figcaption { font-size: 15px; line-height: 1.5; color: #5A5F65; }

/* ---------- responsive ---------- */
@media (max-width: 1349px) {
	.subpage .sp-mark { left: auto; right: 280px; }
	.subpage .sp-body { gap: 64px; }
}
@media (max-width: 1139px) {
	.subpage .sp-hero-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; }
	.subpage .sp-door { width: 220px; height: 312px; }
	.subpage .sp-door .fr, .subpage .sp-door .im { width: 210px; height: 302px; border-radius: 105px 105px 3px 3px; }
	.subpage .sp-door .fr { left: 10px; top: 10px; }
	.subpage .sp-title { font-size: 50px; }
	.subpage .sp-body { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
	.subpage .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.subpage .act { grid-template-columns: 1fr; gap: 20px; padding: 36px; }
	.subpage .act > .act-icon { width: 104px; height: 104px; }
	.subpage .act > .act-icon .ic { width: 58px; height: 58px; }
}
@media (max-width: 900px) {
	.subpage .sp-hero-grid { grid-template-columns: 1fr; }
	.subpage .sp-door { display: none; }
	.subpage .sp-body { grid-template-columns: 1fr; gap: 48px; }
	/* one column: the rail sits above the reading column and scrolls with the page */
	.subpage .sp-rail { position: static; max-height: none; overflow: visible; gap: 28px; }
	.subpage .sp-main { max-width: none; }
}
@media (max-width: 640px) {
	.subpage .sp-hero-in { padding-top: 28px; padding-bottom: 72px; }
	.subpage .sp-mark { right: -40px; opacity: 0.45; }
	.subpage .crumb { font-size: 15px; gap: 8px; margin-bottom: 8px; }
	.subpage .sp-hero-txt { gap: 16px; }
	.subpage .sp-title { font-size: 40px; }
	.subpage .sp-lead { font-size: 19px; }
	.subpage .hero-curve svg { height: 40px; }
	.subpage .sp-body { padding-top: 16px; padding-bottom: 72px; gap: 40px; }
	.subpage .rail-box { padding: 22px 20px 18px; }
	.subpage .sp-main { gap: 56px; }
	.subpage .h2 { font-size: 30px; }
	.subpage .p { font-size: 18px; }
	.subpage .p-big { font-size: 22px; }
	.subpage .act { padding: 28px 22px 30px; }
	.subpage .act > .act-icon { width: 80px; height: 80px; }
	.subpage .act > .act-icon .ic { width: 44px; height: 44px; }
	.subpage .act-h { font-size: 36px; }
	.subpage .act-cols { grid-template-columns: 1fr; gap: 24px; margin-top: 18px; }
	.subpage .vid { grid-template-columns: 1fr; gap: 16px; }
	.subpage .pst .pst-brand { left: 18px; top: 14px; font-size: 10px; }
	.subpage .pst .pst-t { left: 18px; right: 40%; font-size: 22px; }
	.subpage .pst .pst-meta { left: 78px; bottom: 24px; font-size: 11px; }
	.subpage .pst .vid-play { left: 18px; bottom: 14px; width: 48px; height: 48px; }
	.subpage .links-list { padding-left: 4px; }
	.subpage .links-list > li { font-size: 17px; }
	.subpage .prompt { padding: 24px 20px; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
	.subpage .prompt .act-icon { width: 48px; height: 48px; }
	.subpage .prompt .act-icon .ic { width: 26px; height: 26px; }
	.subpage .quote { padding-left: 22px; }
	.subpage .quote .q { font-size: 20px; }
	.subpage .tiles-band { padding: 16px; }
	.subpage .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.subpage .tile > a { padding: 0 14px 16px; }
	.subpage .tile-img { width: calc(100% + 28px); margin: 0 -14px; height: 88px; }
	.subpage .tile-t { font-size: 16px; }
	.subpage .credit { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
	.subpage .credit img { width: 140px; }
	.subpage .mcards { grid-template-columns: 1fr; gap: 36px; }
	.subpage .mcard-t { font-size: 25px; }
}