/* TTWC Story — front-end. Theme: "Southern Anticline".
   Full-bleed dark modules against the theme's light prose column. */

.ttwc-story {
	--abyss: #070B12;
	--deep: #0C1524;
	--hair: #2C3E52;
	--ink: #EAF0F7;
	--muted: #8FA3B8;
	--rupture: #E2504A;
	--ember: #F2A65A;
	--mud: #D9A441;
	--wave: #57C4D8;
	--uplift: #B4864B;
	--display: "Saira Semi Condensed", system-ui, -apple-system, sans-serif;
	--body: "Inter Tight", system-ui, -apple-system, sans-serif;
	box-sizing: border-box;
}
.ttwc-story *,
.ttwc-story *::before,
.ttwc-story *::after { box-sizing: inherit; }

/* Full-bleed modules use 100vw, which on a desktop with a visible scrollbar is wider than the
   viewport. `overflow-x: clip` on the body absorbs that without creating a scroll container,
   so position: sticky inside the scroller keeps working (overflow: hidden would break it). */
body.ttwc-story-page {
	overflow-x: clip;
	overflow-y: visible;
}

/* ------------------------------------------------------------------ M1 scroller */

.vqs {
	position: relative;
	width: calc(100vw - var(--ttwc-sbw, 0px));
	margin-left: calc(50% - 50vw + (var(--ttwc-sbw, 0px) / 2));
	background: var(--abyss);
	color: var(--ink);
	font-family: var(--body);
}
/* --ttwc-hdr is whatever the theme (and the admin bar) have pinned to the top of the viewport,
   measured at runtime. Start the pinned panel below it, or the menu bar covers the clock and the
   wavefront readout. */
.vqs__sticky {
	position: sticky;
	top: var(--ttwc-hdr, 0px);
	height: calc(100svh - var(--ttwc-hdr, 0px));
	min-height: 420px;
	overflow: hidden;
	background: var(--deep);
}
.vqs__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.vqs [data-layer="coastCtx"]  { fill: #101A26; stroke: #1E2C3C; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vqs [data-layer="coast"]     { fill: #18232F; stroke: #2C3E52; stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vqs [data-layer="coastTT"]   { fill: #1D2A3A; stroke: #3D5872; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vqs [data-layer="faultsCtx"] { fill: none; stroke: var(--rupture); stroke-width: .7; stroke-opacity: .22; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.vqs [data-layer="faults"]    { fill: none; stroke: var(--rupture); stroke-width: .8; stroke-opacity: .55; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.vqs [data-layer="faultsTT"]  { fill: none; stroke: var(--rupture); stroke-width: 1; stroke-opacity: .75; vector-effect: non-scaling-stroke; stroke-linecap: round; }

.vqs__mk text {
	font-family: var(--display);
	font-weight: 600;
	paint-order: stroke;
	stroke: var(--abyss);
	stroke-width: 3.5px;
	stroke-linejoin: round;
}

.vqs__hud { position: absolute; top: 18px; left: 18px; z-index: 4; pointer-events: none; }
.vqs__clock { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.vqs__clocklbl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.vqs__front { position: absolute; top: 18px; right: 18px; z-index: 4; text-align: right; pointer-events: none; }
.vqs__front b { display: block; font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--wave); font-variant-numeric: tabular-nums; }
.vqs__front span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.vqs__cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 6; text-align: center; color: var(--muted); pointer-events: none; transition: opacity .35s ease; }
.vqs__cue span { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 8px; }
.vqs__cue svg { animation: vqsbob 1.6s ease-in-out infinite; }
@keyframes vqsbob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }

.vqs__rail { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 9px; }
.vqs__rail i { display: block; width: 3px; height: 16px; background: var(--hair); border-radius: 2px; transition: background .3s ease, height .3s ease; }

.vqs__legend { position: absolute; left: 18px; bottom: 18px; z-index: 4; display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.vqs__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.vqs__legend i.is-fault { background: var(--rupture); }
.vqs__legend i.is-wave { background: var(--wave); }
.vqs__legend i.is-mud { background: var(--mud); }

.vqs__steps { position: relative; z-index: 5; margin-top: -100svh; }
.vqs__step { min-height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: 0 6vw; }
.vqs__card {
	max-width: 430px;
	background: rgba(7, 11, 18, .88);
	border: 1px solid var(--hair);
	border-left: 3px solid var(--rupture);
	padding: 22px 24px;
	backdrop-filter: blur(6px);
	opacity: .15;
	transition: border-color .3s ease;
	will-change: opacity;
}
.vqs__card h3 { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--mud); margin: 0 0 10px; }
.vqs__card h2 { font-family: var(--display); font-weight: 700; font-size: 31px; line-height: 1.08; margin: 0 0 10px; color: var(--ink); }
.vqs__card p { font-size: 15.5px; line-height: 1.62; color: #C6D3E2; margin: 0; }

.vqs__stat {
	margin-top: 15px;
	padding-top: 13px;
	border-top: 1px solid var(--hair);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px 20px;
}
.vqs__stat span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	font-size: 12.5px;
	color: var(--muted);
	white-space: nowrap;
}
.vqs__stat b { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1; color: var(--ink); }

/* ------------------------------------------------------------------ M2 hero */

.ttwc-hero {
	position: relative;
	width: calc(100vw - var(--ttwc-sbw, 0px));
	margin-left: calc(50% - 50vw + (var(--ttwc-sbw, 0px) / 2));
	min-height: var(--hero-h, 440px);
	display: flex;
	align-items: var(--hero-align, flex-end);
	overflow: hidden;
	background: var(--abyss);
	color: var(--ink);
	font-family: var(--body);
}
.ttwc-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-focus, center);
	z-index: 0;
	transition: transform .6s ease;
}
img.ttwc-hero__video { max-width: none; }
.ttwc-hero:hover .ttwc-hero__video { transform: scale(1.04); }
.ttwc-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.85) 100%);
}
.ttwc-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 48px 24px 40px;
	text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
/* NYT-style opener: fills the viewport, text centred over the footage. */
.ttwc-hero.is-cover { --hero-h: 88svh; min-height: 520px; }
/* `ch` here resolved against the wrapper's 16px body font, not the 76px display face, so the
   headline was being squeezed into roughly 240px and the theme's break-word shattered it
   mid-syllable. Constrain in px, and hold the measure on the elements that own the type. */
.ttwc-hero.is-cover .ttwc-hero__inner {
	text-align: center;
	max-width: min(1080px, 92vw);
	margin: 0 auto;
	padding-bottom: 8vh;
}
.ttwc-hero.is-cover .ttwc-hero__title {
	font-size: clamp(34px, 5.4vw, 72px);
	line-height: 1.04;
	max-width: 18ch;            /* 18 characters of the display face, not of the body face */
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}
.ttwc-hero.is-cover .ttwc-hero__sub {
	font-size: clamp(15px, 1.35vw, 20px);
	max-width: 52ch;
	margin-left: auto;
	margin-right: auto;
	text-wrap: pretty;
}
.ttwc-hero.is-cover .ttwc-hero__scrim {
	background: linear-gradient(180deg, rgba(7,11,18,.55) 0%, rgba(7,11,18,.15) 30%, rgba(7,11,18,.78) 100%);
}
.ttwc-hero__kicker {
	font-family: var(--display);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mud);
	margin: 0 0 14px;
}

.ttwc-hero__title {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.04;
	margin: 0 0 10px;
	color: #fff;
	/* Never break inside a word. The theme sets break-word on headings. */
	overflow-wrap: normal !important;
	word-break: normal !important;
	word-wrap: normal !important;
	hyphens: none !important;
}
.ttwc-hero__sub { font-size: clamp(15px, 2vw, 19px); line-height: 1.5; margin: 0; color: #E3EAF2; max-width: 60ch; }
.ttwc-hero__credit { margin: 14px 0 0; font-size: 12px; color: #B8C6D6; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
	.ttwc-hero__video, .ttwc-hero:hover .ttwc-hero__video { transition: none; transform: none; }
}

/* ------------------------------------------------------------------ M3 compare */

.ttwc-cmp { margin: 34px 0; font-family: var(--body); }
.ttwc-cmp__frame { position: relative; line-height: 0; background: var(--deep); user-select: none; }
.ttwc-cmp__frame img { width: 100%; height: auto; display: block; }
/* The before image is clipped by its wrapper, not resized: height 100% + width auto reproduces
   the frame width exactly, because both Sentinel figures share the same 16:9 extent. */
.ttwc-cmp__beforewrap { position: absolute; top: 0; left: 0; bottom: 0; width: 50%; overflow: hidden; }
.ttwc-cmp__beforewrap img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; }

.ttwc-cmp__lbl {
	position: absolute;
	bottom: 14px;
	z-index: 3;
	font-family: var(--display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: rgba(7,11,18,.82);
	color: var(--ink);
	padding: 6px 10px;
	line-height: 1;
}
.ttwc-cmp__lbl.is-left { left: 14px; }
.ttwc-cmp__lbl.is-right { right: 14px; }

.ttwc-cmp__range {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}
.ttwc-cmp__range:focus-visible { opacity: 1; outline: 2px solid var(--mud); }
.ttwc-cmp__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 4;
	width: 2px;
	background: var(--ink);
	transform: translateX(-1px);
	pointer-events: none;
}
.ttwc-cmp__handle span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.ttwc-cmp figcaption,
.ttwc-vid figcaption,
.ttwc-mudmap figcaption,
.ttwc-gal figcaption {
	font-family: var(--body);
	font-size: 13px;
	line-height: 1.5;
	color: #5c6b7a;
	margin-top: 10px;
}

/* ------------------------------------------------------------------ M4 gallery */

.ttwc-gal {
	display: grid;
	grid-template-columns: repeat(var(--gal-cols, 3), minmax(0, 1fr));
	gap: 18px;
	margin: 34px 0;
}
.ttwc-gal__item { margin: 0; }
.ttwc-gal__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}
.ttwc-gal__btn img { width: 100%; height: auto; display: block; }
.ttwc-gal__btn:focus-visible { outline: 2px solid var(--mud); outline-offset: 2px; }
@media (max-width: 700px) { .ttwc-gal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .ttwc-gal { grid-template-columns: 1fr; } }

.ttwc-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(7, 11, 18, .94);
	padding: 4vh 4vw;
}
.ttwc-lb[hidden] { display: none; }
.ttwc-lb figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.ttwc-lb img { max-width: 100%; max-height: 82vh; height: auto; display: block; margin: 0 auto; }
.ttwc-lb figcaption { margin-top: 14px; color: #C6D3E2; font-size: 13.5px; font-family: "Inter Tight", system-ui, sans-serif; }
.ttwc-lb__x {
	position: absolute;
	top: 18px;
	right: 22px;
	border: 0;
	background: none;
	color: #C6D3E2;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

/* ------------------------------------------------------------------ M5 mud map */

.ttwc-mudmap { margin: 34px 0; }
.ttwc-mudmap__canvas { width: 100%; background: #eef1f4; position: relative; }

.ttwc-mudmap__title {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 500;
	pointer-events: none;
	padding: 12px 16px 22px;
	background: linear-gradient(180deg, rgba(7,11,18,.88) 0%, rgba(7,11,18,.62) 55%, rgba(7,11,18,0) 100%);
	color: #EAF0F7;
}
.ttwc-mudmap__title strong {
	display: block;
	font-family: var(--display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.15;
	letter-spacing: .01em;
}
.ttwc-mudmap__title span {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.4;
	color: #B8C6D6;
	max-width: 62ch;
}

/* Push Leaflet's zoom control clear of the title bar rather than letting it sit on the words. */
.ttwc-mudmap__canvas.has-title .leaflet-top.leaflet-left { margin-top: 78px; }
@media (max-width: 640px) {
	.ttwc-mudmap__canvas.has-title .leaflet-top.leaflet-left { margin-top: 92px; }
}

.ttwc-mudmap__logo { margin: 10px 10px 0 0 !important; }
.ttwc-mudmap__logo canvas { display: block; width: 84px; height: 69px; }

.ttwc-mudmap__legend {
	margin: 0 10px 10px 0 !important;
	background: rgba(255,255,255,.94);
	border: 1px solid #d7dde3;
	border-radius: 3px;
	padding: 8px 10px;
	font-family: var(--body);
	font-size: 11.5px;
	line-height: 1.2;
	color: #46535f;
	box-shadow: 0 1px 5px rgba(0,0,0,.12);
}
.ttwc-mudmap__legend span { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; white-space: nowrap; }
.ttwc-mudmap__legend span:last-child { margin-bottom: 0; }
.ttwc-mudmap__legend i {
	display: inline-block;
	width: 11px; height: 11px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.35);
	flex: 0 0 auto;
}
.ttwc-mudmap__legend i.is-new { width: 15px; height: 15px; box-shadow: 0 0 0 3px rgba(87,196,216,.35); }
.ttwc-mudmap__legend i.is-small { width: 8px; height: 8px; }
.ttwc-mudmap__legend i.is-line { width: 14px; height: 2px; border-radius: 0; border: 0; }
.ttwc-mudmap__legend i.is-hollow { background: #fff; border: 1.5px solid #8FA3B8; }

.ttwc-mudmap__tip {
	background: #0C1524;
	border: 0;
	color: #EAF0F7;
	font-family: var(--display);
	font-weight: 600;
	font-size: 12.5px;
	padding: 4px 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.ttwc-mudmap__tip.leaflet-tooltip-top::before    { border-top-color: #0C1524 !important; }
.ttwc-mudmap__tip.leaflet-tooltip-bottom::before { border-bottom-color: #0C1524 !important; }
.ttwc-mudmap__tip.leaflet-tooltip-left::before   { border-left-color: #0C1524 !important; }
.ttwc-mudmap__tip.leaflet-tooltip-right::before  { border-right-color: #0C1524 !important; }
/* A reference point, not a finding: a light chip that reads as secondary rather than a dark blob
   sitting on the coastline. */
.ttwc-mudmap__tip.is-ref {
	background: #FFFFFF;
	color: #56646F;
	font-family: var(--body);
	font-weight: 500;
	font-size: 11.5px;
	padding: 3px 7px;
	border: 1px solid #D4DAE0;
	box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.ttwc-mudmap__tip.is-ref.leaflet-tooltip-left::before   { border-left-color: #FFFFFF !important; }
.ttwc-mudmap__tip.is-ref.leaflet-tooltip-right::before  { border-right-color: #FFFFFF !important; }
.ttwc-mudmap__tip.is-ref.leaflet-tooltip-bottom::before { border-bottom-color: #FFFFFF !important; }
.ttwc-mudmap__tip.is-ref.leaflet-tooltip-top::before    { border-top-color: #FFFFFF !important; }
.ttwc-mudmap__sub { color: #667; }
.ttwc-mudmap__canvas.is-failed::after {
	content: "Map data could not be loaded.";
	display: block;
	padding: 20px;
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: 14px;
	color: #5c6b7a;
}

/* ------------------------------------------------------------------ M6 video */

.ttwc-vid { margin: 34px 0; }
.ttwc-vid__frame { position: relative; aspect-ratio: var(--vid-ratio, 16 / 9); background: var(--abyss); }
.ttwc-vid__frame iframe,
.ttwc-vid__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
}
.ttwc-vid__credit { display: block; margin-top: 3px; font-size: 12px; color: #7c8a99; }

/* ------------------------------------------------------------------ M7 timeline */

.ttwc-tl { margin: 34px 0; background: var(--abyss); color: var(--ink); padding: 26px 26px 14px; font-family: var(--body); }
.ttwc-tl__list { list-style: none; margin: 0; padding: 0; }
.ttwc-tl__row {
	display: grid;
	grid-template-columns: 74px 18px 84px 1fr;
	align-items: center;
	gap: 0 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--hair);
}
.ttwc-tl__row:last-child { border-bottom: 0; }
.ttwc-tl__t { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--mud); text-align: right; font-variant-numeric: tabular-nums; }
.ttwc-tl__dot { display: block; width: 9px; height: 9px; margin: 0 auto; border-radius: 50%; background: var(--wave); }
.ttwc-tl__clock { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ttwc-tl__what { font-size: 14.5px; line-height: 1.45; color: #C6D3E2; }
@media (max-width: 620px) {
	.ttwc-tl__row { grid-template-columns: 60px 14px 1fr; grid-template-areas: "t d c" ". . w"; }
	.ttwc-tl__t { grid-area: t; }
	.ttwc-tl__dot { grid-area: d; }
	.ttwc-tl__clock { grid-area: c; }
	.ttwc-tl__what { grid-area: w; margin-top: 4px; }
}

/* ------------------------------------------------------------------ M8 sources */

.ttwc-src { margin: 40px 0; padding: 22px 24px; border: 1px solid #dfe4ea; background: #f7f8fa; font-family: var(--body); }
.ttwc-src__title { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; color: #5c6b7a; }
.ttwc-src__list { margin: 0; padding-left: 20px; }
.ttwc-src__list li { font-size: 13.5px; line-height: 1.6; color: #46535f; margin-bottom: 6px; }
/* Newsblock paints links a pale colour that vanishes on this near-white panel, and it fights
   custom UI generally (see the theme-survival notes). This is one of the places where !important
   is the honest answer rather than a specificity arms race. */
.ttwc-src__list a,
.ttwc-src__list li a:link,
.ttwc-src__list li a:visited {
	color: #1F4E6B !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(31, 78, 107, .45);
	box-shadow: none;
	background: none;
}
.ttwc-src__list li a:hover,
.ttwc-src__list li a:focus {
	color: #B03A2E !important;
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
	.vqs__sticky { position: relative; height: 72svh; }
	.vqs__steps { margin-top: 0; }
	.vqs__cue { display: none; }
	.vqs__card { opacity: 1 !important; }
}