/* Pictured Out website. The page is the channel art: sky on top, clay hills as the edges between
   sections, deep blue at the foot. Colors come from brand/source/banner.js. */
@font-face { font-family: 'Archivo Black'; src: url(fonts/archivo-black-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Jost'; src: url(fonts/Jost.ttf) format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
	/* The art, which looks the same in both themes. */
	--sky-top: #125FA3;
	--sky-low: #2E8FD0;
	--sun: #FFC23C;
	--sun-edge: #B97F0E;
	--ink: #14213D;
	--cream: #FFF6E5;
	--cream-edge: #B5A98F;
	--hill-far: #2FB39A;
	--hill-mid: #0E7C7B;
	--night: #072B4F;
	--band: #0B5F69;

	/* The reading surfaces, which change with the theme. */
	--page: #F2F8FC;
	--surface: #FFFFFF;
	--slab: #C4D9E6;
	--text: #14213D;
	--muted: #47587A;
	--rule: #D2E2EC;
	--link: #0A6969;
	--link-hover: #07504F;
	--mark: #FFEBB8;
	--bar: #0E7C7B;
	--bar-reference: #8493A8;

	--display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
	--body: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Sitka Text', Cambria, Georgia, serif;
	--ui: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
	--gutter-l: max(20px, env(safe-area-inset-left, 0px));
	--gutter-r: max(20px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--page: #08233F;
		--surface: #0E3155;
		--slab: #041729;
		--text: #F1F5FA;
		--muted: #A9BCD2;
		--rule: #24496C;
		--link: #6FE0CB;
		--link-hover: #A5F0E1;
		--mark: #4E4114;
		--bar: #35C2A6;
		--bar-reference: #7F92AA;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--page: #08233F;
	--surface: #0E3155;
	--slab: #041729;
	--text: #F1F5FA;
	--muted: #A9BCD2;
	--rule: #24496C;
	--link: #6FE0CB;
	--link-hover: #A5F0E1;
	--mark: #4E4114;
	--bar: #35C2A6;
	--bar-reference: #7F92AA;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 1.1875rem/1.65 var(--body); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .16em; text-decoration-thickness: .08em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem); }
h3 { font-size: 1.4rem; }
p { margin: 0; }
sup { line-height: 0; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 5; background: var(--sun); color: var(--ink); padding: .5rem 1rem; border-radius: 8px; font-family: var(--ui); font-weight: 600; }
.skip:focus { left: 12px; }
.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* Clay buttons. They press in, like the channel art's solid shapes. */
.btn {
	--face: var(--sun);
	--side: var(--sun-edge);
	display: inline-flex; align-items: center; justify-content: center;
	padding: .6rem 1.3rem .66rem; border-radius: 999px;
	background: var(--face); color: var(--ink);
	font: 600 1.08rem/1.15 var(--ui); text-decoration: none; white-space: nowrap;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--side), 0 9px 14px rgba(7, 25, 50, .28);
	transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { color: var(--ink); transform: translateY(-1px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 var(--side), 0 11px 16px rgba(7, 25, 50, .3); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 var(--side), 0 3px 6px rgba(7, 25, 50, .3); }
.btn-cream { --face: var(--cream); --side: var(--cream-edge); }
.btn-small { padding: .36rem .95rem .42rem; font-size: 1rem; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--side), 0 6px 10px rgba(7, 25, 50, .25); }

/* The top bar. */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; width: 100%; max-width: 1160px; margin-inline: auto; padding: 14px var(--gutter-r) 14px var(--gutter-l); position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--cream); }
.brand:hover { color: var(--cream); }
.brand-word, .foot-word { font-family: var(--display); font-size: 1.15rem; letter-spacing: .015em; text-shadow: .06em .06em 0 var(--ink); }
.brand-word b, .foot-word b { font-weight: 400; color: var(--sun); }
.top-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; font: 500 1.08rem/1.2 var(--ui); }
.top-nav a:not(.btn) { color: var(--cream); text-decoration: none; text-shadow: 0 1px 2px rgba(7, 25, 50, .45); }
.top-nav a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }

/* Solid block lettering, like the name on the channel art. */
.block-title {
	color: var(--cream);
	text-shadow: .018em .018em 0 var(--ink), .036em .036em 0 var(--ink), .054em .054em 0 var(--ink), .072em .072em 0 var(--ink), .1em .14em .2em rgba(7, 25, 50, .35);
}
.block-title .is-sun { color: var(--sun); }

/* The home page's opening. The words sit on the art's big hill at every width. */
.hero { position: relative; background: var(--band); container-type: inline-size; overflow: hidden; }
.hero > .top { position: absolute; inset: 0 0 auto 0; }
/* The home page's opening. The art is in layers so the clouds can drift and the sun can rise: a sky
   without them, then the sun and clouds, cut to the outline of the hills and trees so they pass behind.
   Everything is placed in the art's own 2560 x 1440 frame. With reduced motion it is the still art. */
.hero-scene { position: relative; width: 100%; aspect-ratio: 2560 / 1240; overflow: hidden; }
.scene-stage { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2560 / 1440; }
.scene-sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.scene-air { position: absolute; inset: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 42.0674%, 99.082% 41.7208%, 98.8086% 41.5819%, 98.7305% 41.0944%, 98.5742% 39.7097%, 98.5352% 39.4889%, 98.4961% 39.425%, 98.457% 39.425%, 98.2617% 41.1431%, 98.2227% 41.3194%, 97.4414% 40.984%, 97.3633% 40.5514%, 96.9336% 37.0583%, 96.8945% 36.8528%, 96.8555% 36.7875%, 96.8164% 36.7875%, 96.4648% 39.666%, 96.3477% 40.4181%, 95.957% 40.266%, 95.332% 39.934%, 93.6133% 38.9444%, 93.4961% 38.1826%, 93.1836% 35.534%, 93.1445% 35.3299%, 93.1055% 35.259%, 93.0664% 35.259%, 92.7539% 37.9229%, 92.6758% 38.3993%, 92.5195% 38.3604%, 92.4805% 38.3139%, 91.8945% 38.0549%, 91.8164% 37.6521%, 91.2695% 33.3104%, 91.1133% 32.2729%, 91.0742% 32.2056%, 91.0352% 32.2056%, 90.957% 32.7431%, 90.4492% 36.816%, 90.3711% 37.359%, 90.332% 37.3917%, 89.8242% 37.2444%, 89.7852% 37.225%, 89.7461% 37.134%, 89.1992% 32.609%, 89.1602% 32.4125%, 89.1211% 32.3403%, 89.082% 32.3403%, 88.5742% 36.5611%, 88.5352% 36.7986%, 88.4961% 36.8347%, 86.6211% 36.3924%, 84.668% 36.0514%, 82.4805% 35.7674%, 80.293% 35.5736%, 77.4805% 35.4125%, 75.6055% 35.3486%, 65.957% 35.1924%, 60.957% 35%, 57.5195% 34.7174%, 57.168% 34.6562%, 54.3945% 34.4153%, 54.1211% 34.3597%, 53.7695% 34.3639%, 52.4805% 34.2111%, 48.1055% 33.8889%, 46.543% 33.8139%, 44.668% 33.7799%, 42.5195% 33.8194%, 41.2695% 33.9014%, 40.0195% 34.034%, 38.457% 34.3139%, 37.4023% 34.5951%, 36.582% 34.8646%, 35.4102% 35.4042%, 34.3945% 36.0319%, 33.7695% 36.5361%, 33.0664% 37.2687%, 32.6367% 37.8389%, 32.2852% 38.4097%, 32.1289% 38.7139%, 31.6602% 39.8715%, 31.2695% 41.0097%, 30.7227% 42.9403%, 30.4492% 44.1208%, 30.0977% 45.7806%, 29.7852% 47.4375%, 28.6914% 53.7792%, 28.418% 55.175%, 28.1055% 56.5007%, 27.793% 57.4931%, 27.6367% 57.8674%, 27.4805% 58.1646%, 27.2461% 58.4201%, 27.0117% 58.5056%, 26.2695% 58.3958%, 25.6445% 58.1493%, 25.0195% 57.791%, 24.082% 57.0896%, 23.2227% 56.2944%, 22.5977% 55.6618%, 20.957% 53.8861%, 20.918% 53.8118%, 19.7461% 52.4986%, 18.6523% 51.3896%, 17.793% 50.6243%, 16.8555% 49.8708%, 15.7617% 49.0903%, 14.3945% 48.2382%, 14.3555% 48.0403%, 13.8086% 43.3215%, 13.7695% 43.1076%, 13.7305% 43.0382%, 13.6914% 43.0382%, 13.2227% 47.1069%, 13.1836% 47.4285%, 13.1445% 47.5472%, 11.543% 46.8056%, 10.2148% 46.275%, 10.1367% 45.775%, 9.707% 42.0611%, 9.668% 41.5743%, 9.6289% 41.416%, 9.5898% 41.3535%, 9.5508% 41.3535%, 9.5117% 41.5132%, 9.4336% 42.4062%, 9.043% 45.7743%, 9.0039% 45.8333%, 8.9648% 45.8333%, 8.7305% 45.7549%, 8.6914% 45.6187%, 8.6133% 45.059%, 7.8711% 39.1785%, 7.832% 38.9417%, 7.793% 38.8687%, 7.7539% 38.8687%, 7.0117% 44.8042%, 6.9336% 45.234%, 6.582% 45.1618%, 6.543% 45.0069%, 5.9961% 40.3951%, 5.957% 40.1986%, 5.918% 40.1222%, 5.8789% 40.1222%, 5.3711% 44.4743%, 5.332% 44.7764%, 5.293% 44.85%, 3.4961% 44.5167%, 2.168% 44.3208%, 0% 44.0958%); }
.scene-air img { position: absolute; max-width: none; }
.sun { position: absolute; left: 17.5781%; top: 34.8611%; width: 13.1641%; height: 24.3056%; }
.sun-disc { left: 17.2107%; top: 17.7143%; width: 82.7893%; height: 82.2857%; }
.ray-1 { left: 0%; top: 45.7143%; width: 18.6944%; height: 12.5714%; transform-origin: 349.8% 146.8%; --in: 1.90s; --pulse: 3.00s; }
.ray-2 { left: 11.8694%; top: 21.7143%; width: 17.2107%; height: 15.7143%; transform-origin: 311.0% 270.2%; --in: 1.99s; --pulse: 3.22s; }
.ray-3 { left: 32.9377%; top: 5.7143%; width: 14.5401%; height: 17.4286%; transform-origin: 223.3% 335.4%; --in: 2.08s; --pulse: 3.44s; }
.ray-4 { left: 59.3472%; top: 0%; width: 11.8694%; height: 17.7143%; transform-origin: 51.0% 362.3%; --in: 2.17s; --pulse: 3.66s; }
.ray-5 { left: 82.7893%; top: 5.4286%; width: 15.1335%; height: 17.7143%; transform-origin: -114.9% 331.6%; --in: 2.26s; --pulse: 3.88s; }
.sun-glow { position: absolute; left: -2.8487%; top: -1.5429%; width: 136.4985%; height: 131.4286%;
	border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 238, 186, .75), rgba(255, 238, 186, .32) 55%, rgba(255, 238, 186, 0)); opacity: 0; }
.cloud { position: absolute; left: 0; width: 100%; transform: translateX(var(--at)); }
.cloud img { left: -10%; top: 0; height: 100%; }
.cloud-f { top: 34.5833%; height: 7.7778%; --at: 16.953%; --dur: 130s; --delay: -20.04s; --bob: 9.0s; }
.cloud-f img { width: 7.3828%; }
.cloud-e { top: 27.2222%; height: 7.2222%; --at: 100.469%; --dur: 115s; --delay: -105.04s; --bob: 7.5s; }
.cloud-e img { width: 6.7578%; }
.cloud-a { top: 15.625%; height: 9.0278%; --at: 23.320%; --dur: 95s; --delay: -20.14s; --bob: 8.0s; }
.cloud-a img { width: 8.7109%; }
.cloud-c { top: 15.4167%; height: 9.375%; --at: 79.805%; --dur: 95s; --delay: -68.92s; --bob: 10.0s; }
.cloud-c img { width: 9.0234%; }
.cloud-b { top: 11.6667%; height: 7.7778%; --at: 51.719%; --dur: 85s; --delay: -39.96s; --bob: 7.0s; }
.cloud-b img { width: 7.3828%; }
.cloud-d { top: max(7.7083%, 56px); height: 7.5%; --at: 99.141%; --dur: 75s; --delay: -67.60s; --bob: 8.5s; }
.cloud-d img { width: 7.0703%; }

@media (prefers-reduced-motion: no-preference) {
	.sun { animation: sun-rise 2.8s cubic-bezier(.2, .75, .25, 1) .3s both, sun-bob 7s ease-in-out 3.4s infinite; }
	.sun-glow { animation: glow-in 1.6s ease-out 1.6s both, glow 5s ease-in-out 3.2s infinite alternate; }
	.sun-ray { animation: ray-in .7s cubic-bezier(.34, 1.56, .64, 1) var(--in) both, ray-pulse 3.6s ease-in-out var(--pulse) infinite; }
	.cloud { animation: drift var(--dur) linear var(--delay) infinite; }
	.cloud img { animation: bob var(--bob) ease-in-out infinite alternate; }
}
@keyframes sun-rise { from { transform: translateY(80%); } }
@keyframes sun-bob { 50% { transform: translateY(2%); } }
@keyframes ray-in { from { opacity: 0; transform: scale(.5); } }
@keyframes ray-pulse { 50% { transform: scale(1.08); } }
@keyframes glow-in { from { opacity: 0; } to { opacity: .5; } }
@keyframes glow { from { opacity: .5; transform: scale(.94); } to { opacity: .9; transform: scale(1.06); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(110%); } }
@keyframes bob { to { transform: translateY(-6%); } }
.hero-copy { position: absolute; left: 33.2%; top: 47.4%; width: 60%; }
.hero-copy h1 { font-size: 5.72cqw; letter-spacing: .012em; white-space: nowrap; }
.hero-line { margin-top: 1.05cqw; color: var(--cream); font: 600 2.05cqw/1.2 var(--ui); text-shadow: 0 1px 3px rgba(7, 25, 50, .6); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1cqw; }
.edge { display: block; width: 100%; height: clamp(44px, 6.5vw, 92px); margin-bottom: -2px; position: relative; }
.hero .edge { position: absolute; left: 0; right: 0; bottom: 0; margin-bottom: -2px; }
.fill-far { fill: var(--hill-far); filter: drop-shadow(0 -2px 2px rgba(7, 25, 50, .16)); }
.fill-mid { fill: var(--hill-mid); filter: drop-shadow(0 -2px 2px rgba(7, 25, 50, .2)); }
.fill-night { fill: var(--night); filter: drop-shadow(0 -2px 3px rgba(7, 25, 50, .25)); }
.fill-page { fill: var(--page); filter: drop-shadow(0 -2px 3px rgba(7, 25, 50, .22)); }
.edge-page-to-night { background: var(--page); margin-top: clamp(3rem, 6vw, 5rem); }

@media (max-width: 700px) {
	.hero-scene { aspect-ratio: 1 / 1.08; }
	.scene-stage { width: 192%; }
	.scene-sky { width: 54.6875%; }
	.hero-copy { position: relative; left: auto; top: auto; width: auto; margin-top: -41cqw; padding: 0 var(--gutter-r) clamp(60px, 16cqw, 96px) var(--gutter-l); text-align: center; }
	.hero-copy h1 { font-size: 14.2cqw; line-height: 1; white-space: normal; }
	.hero-copy h1 span { display: block; white-space: nowrap; }
	.hero-line { margin-top: .75rem; font-size: 1.1rem; }
	.actions { justify-content: center; margin-top: 1.1rem; }
	.brand-word { font-size: 1rem; }
	.hero .brand { display: none; }
	.hero > .top { justify-content: center; }
	.top-nav { gap: .25rem .85rem; font-size: 1rem; }
}

.intro { padding-top: clamp(1.75rem, 4vw, 3rem); padding-bottom: clamp(1.75rem, 4vw, 3rem); }
.intro p { max-width: 46rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); line-height: 1.45; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.5rem; font-family: var(--ui); font-weight: 500; }

/* Post cards. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2.5rem 2rem; }
.card { display: flex; flex-direction: column; gap: .55rem; min-width: 0; max-width: 40rem; }
.card-art { display: block; margin-bottom: .55rem; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 0 var(--slab); transition: transform .15s ease, box-shadow .15s ease; }
.card:hover .card-art { transform: translateY(-3px); box-shadow: 0 9px 0 var(--slab); }
.card-art img { width: 100%; aspect-ratio: 1080 / 690; object-fit: cover; object-position: center top; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--link); }
.card p { font-size: 1.06rem; line-height: 1.5; }
.eyebrow { font: 600 .84rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.eyebrow-sky { color: var(--sun); text-shadow: 0 1px 2px rgba(7, 25, 50, .5); margin-bottom: .6rem; }
.meta { font: 500 1rem/1.35 var(--ui); color: var(--muted); }
.card .meta { font-size: .98rem; }

/* The dark band on the home page, with a sample fact. */
.band { background: var(--night); color: var(--cream); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: center; padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.band-copy { display: grid; gap: 1.1rem; justify-items: start; }
.band-copy h2 { color: var(--cream); }
.slip { --link: #0A6969; --link-hover: #07504F; background: var(--cream); color: var(--ink); border-radius: 14px; padding: 1.35rem 1.5rem 1.4rem; display: grid; gap: .3rem; font: 500 1.05rem/1.4 var(--ui); box-shadow: 0 6px 0 var(--cream-edge), 0 18px 30px rgba(0, 0, 0, .35); }
.slip-label { margin-top: .75rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5B6783; }
.slip-label:first-child { margin-top: 0; }
.slip-claim { font: 400 1.32rem/1.3 var(--display); }
.slip-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.slip-note { margin-top: .6rem; font-size: 1rem; color: #3D4A68; }
.slip-more { margin-top: .55rem; font-weight: 600; }
@media (max-width: 860px) { .band-grid { grid-template-columns: minmax(0, 1fr); } }

/* The sky at the top of every other page. */
.sky { background: linear-gradient(var(--sky-top), var(--sky-low) 78%, #5FB7E2); color: var(--cream); }
.sky-copy { padding-top: clamp(.75rem, 2.5vw, 2rem); padding-bottom: .25rem; }
.sky-copy h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.1rem); max-width: 17em; }
.sky-line { margin-top: .9rem; max-width: 44rem; font: 500 clamp(1.15rem, 1.05rem + .4vw, 1.36rem)/1.38 var(--ui); text-shadow: 0 1px 2px rgba(7, 25, 50, .5); }
.sky-meta { margin-top: .7rem; font: 500 1.02rem/1.3 var(--ui); text-shadow: 0 1px 2px rgba(7, 25, 50, .5); }
.page-main { padding-top: clamp(1.25rem, 3vw, 2.5rem); }

/* Articles. On wide screens each fact's source sits in the margin beside it. */
.post-grid { width: 100%; max-width: 1160px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-top: clamp(1rem, 2.5vw, 2rem); }
.prose { max-width: 42rem; margin-inline: auto; display: flow-root; }
.prose > * + *, .reveal-body > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.1em; }
.prose h3 { margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .55em; }
.prose blockquote { margin-inline: 0; padding-left: 1.1em; border-left: 3px solid var(--rule); }
.prose code { font-size: .88em; background: var(--surface); padding: .1em .35em; border-radius: 5px; }
a.ext::after {
	content: ''; display: inline-block; width: .62em; height: .62em; margin-left: .2em; vertical-align: .06em; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 9l6-6M4.2 3H9v4.8'/%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 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 9l6-6M4.2 3H9v4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cite { font: 600 .72em/0 var(--ui); margin-left: .08em; }
.cite a { text-decoration: none; padding: 0 .12em; }
.cite a:hover { text-decoration: underline; }
.side { display: none; }
@media (min-width: 1140px) {
	.prose { margin-left: max(0px, calc(50% - 35rem)); }
	.side {
		display: block; float: right; clear: right; width: 15.5rem; margin: .2rem -18.5rem .9rem 0;
		font: 500 .93rem/1.32 var(--ui); color: var(--muted);
	}
	.side a { color: var(--link); }
	.side .sure { margin-left: .1rem; }
}
.side-n { display: inline-block; min-width: 1.2em; font-weight: 700; color: var(--text); }

.answer { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; align-items: start; padding-block: .3rem; font-size: 1.28rem; line-height: 1.45; }
.answer .eyebrow { margin-bottom: .3rem; }

.still img { width: 100%; border-radius: 14px; box-shadow: 0 6px 0 var(--slab); }
.still figcaption { margin-top: .85rem; font: 400 1.02rem/1.4 var(--ui); color: var(--muted); }
figure { margin: 0; }
.prose > .still { margin-block: 1.7em; }
.still-cover { margin-block: 0 !important; }
.video-note { margin-top: .9rem !important; font: 400 1.02rem/1.4 var(--ui); color: var(--muted); }
.video { aspect-ratio: 16 / 9; }
.video.is-vertical { aspect-ratio: 9 / 16; max-width: 24rem; margin-inline: auto; }
.video-start { position: relative; display: block; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 0 var(--slab); }
.video-start img { width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; inset: 50% auto auto 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--sun); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--sun-edge), 0 10px 18px rgba(7, 25, 50, .4); }
.video-play::after { content: ''; position: absolute; left: 30px; top: 21px; border-style: solid; border-width: 17px 0 17px 26px; border-color: transparent transparent transparent var(--ink); }
.video iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; }

/* The answer hidden behind a button. */
.reveal { margin-block: 1.7em; }
.reveal summary { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem .76rem; border-radius: 999px; background: var(--sun); color: var(--ink); font: 600 1.14rem/1.15 var(--ui); cursor: pointer; list-style: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--sun-edge), 0 9px 14px rgba(7, 25, 50, .25); transition: transform .12s ease; }
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary::after { content: ''; width: .5em; height: .5em; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-.1em) rotate(45deg); transition: transform .15s ease; }
.reveal[open] summary::after { transform: translateY(.12em) rotate(225deg); }
.reveal summary:active { transform: translateY(3px); }
.reveal-body { margin-top: 1.6em; }
.reveal-body h3 { margin-top: 1.8em; }
.reveal-body h3 + * { margin-top: .7em; }
.reveal-body .still { margin-block: 1.7em; }

/* Tables. */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font: 400 1.04rem/1.42 var(--ui); }
th { text-align: left; font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: .55rem .9rem .55rem 0; border-bottom: 2px solid var(--rule); vertical-align: bottom; }
td { padding: .85rem .9rem .85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:target { background: var(--mark); box-shadow: -10px 0 0 var(--mark), 10px 0 0 var(--mark); }

.checked { padding-top: clamp(2rem, 4vw, 3.25rem); }
.checked-intro { margin-top: .6rem; max-width: 46rem; font: 400 1.1rem/1.45 var(--ui); }
.page-main > .checked-intro { margin-top: 0; }
.evidence { margin-top: 1.15rem; }
.evidence td:nth-child(2) { font-weight: 500; }
.ev-n { font-weight: 700; width: 2.2rem; }
.ev-n a { text-decoration: none; }
.ev-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sources-table .ev-date { white-space: normal; }
.source-title { display: block; margin-top: .15rem; color: var(--muted); font-size: .98rem; }
.sure { display: inline-block; padding: .06rem .55rem .1rem; border-radius: 999px; font: 600 .84rem/1.35 var(--ui); white-space: nowrap; border: 1.5px solid transparent; }
.sure-certain { background: var(--ink); color: var(--cream); border-color: var(--cream-edge); }
.sure-high { background: #0E7C7B; color: #fff; }
.sure-good { background: transparent; color: var(--link); border-color: currentColor; }
.sure-simplified { background: var(--sun); color: var(--ink); }
.slip .sure-good { color: #0A6969; }

@media (max-width: 880px) {
	.evidence thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.evidence, .evidence tbody, .evidence tr, .evidence td { display: block; width: auto; }
	.evidence tr { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
	.evidence td { padding: .3rem 0; border: 0; white-space: normal; }
	.evidence td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
	.ev-n { font-size: 1.15rem; }
}

/* Bar charts: one scale, from zero. */
.bars { margin-block: 1.8em; padding: 1.2rem 1.3rem 1rem; background: var(--surface); border-radius: 14px; font-family: var(--ui); box-shadow: 0 0 0 1px var(--rule); }
.bars-title { font-weight: 600; font-size: 1.16rem; line-height: 1.25; margin-bottom: .9rem; }
.bars-plot { padding-right: 1.6rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: .15rem .8rem; align-items: center; padding-block: .2rem; }
.bar-label { font-size: 1.02rem; line-height: 1.2; }
.bar-track { position: relative; display: block; height: 24px; background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px); background-size: calc(100% / var(--ticks, 4)) 100%; border-right: 1px solid var(--rule); }
.bar-fill { position: absolute; inset: 1px auto 1px 0; background: var(--bar); border-radius: 0 4px 4px 0; }
.bar-fill.is-reference { background: var(--bar-reference); }
.bar-value { position: absolute; top: 50%; transform: translateY(-50%); margin-left: .2rem; padding: .1rem .2rem; background: var(--surface); font-weight: 600; font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.bar-row:hover .bar-fill { filter: brightness(1.12); }
.bar-ticks { position: relative; display: block; height: 1.3rem; }
.bar-ticks span { position: absolute; top: .1rem; transform: translateX(-50%); font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bars-note { margin-top: .6rem; font-size: .98rem; line-height: 1.38; color: var(--muted); }
@media (max-width: 560px) {
	.bar-row { grid-template-columns: minmax(0, 1fr); padding-block: .3rem; }
	.bar-axis .bar-label { display: none; }
}

.ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.ask > div { display: grid; gap: .4rem; max-width: 40rem; min-width: 0; }
.ask h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.ask p { font: 400 1.12rem/1.4 var(--ui); }
.more { margin-top: clamp(2.5rem, 5vw, 4rem); }
.more h2 { margin-bottom: 1.4rem; }

.foot { background: var(--night); color: var(--cream); padding-block: clamp(1rem, 2vw, 1.75rem) clamp(2rem, 4vw, 3rem); font: 400 1.06rem/1.45 var(--ui); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: 1.75rem clamp(2rem, 6vw, 5rem); align-items: start; }
.foot-word { margin-bottom: .3rem; }
.foot nav { display: grid; gap: .3rem; }
.foot a { color: var(--cream); }
.foot a:hover { color: var(--sun); }
.foot-how { max-width: 30rem; color: #D6DFEA; }
.foot-how strong { color: var(--cream); font-weight: 600; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 480px) {
	body { font-size: 1.125rem; }
	.answer { grid-template-columns: 40px minmax(0, 1fr); font-size: 1.18rem; }
	.answer img { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
	.top, .edge, .actions, .ask, .more, .foot, .skip { display: none; }
	.sky { background: none; color: #000; }
	.block-title, .sky-line, .sky-meta { color: #000; text-shadow: none; }
}