/*
Theme Name: Departure 2093
Theme URI: https://www.departure2093.com/
Author: Departure 2093 editorial
Description: Editorial theme for departure2093.com — a vertical-index layout carrying the site's
  long-standing teal/sky aviation colourway forward, modernised for responsive and reduced-motion use.
Version: 1.2.0
Requires at least: 6.8
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: d2093
*/

/* ==========================================================================
   Fonts — self-hosted (no third-party CDN request)
   ========================================================================== */
@font-face {
	font-family: "Asap";
	src: url("assets/fonts/asap-var.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Saira Condensed";
	src: url("assets/fonts/saira-cond-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Tokens — colourway carried over from the site's earlier design
   ========================================================================== */
:root {
	--ink: #23303a;
	--ink-soft: #55636e;
	--ink-faint: #5f6b75;   /* 5.46:1 on paper, 5.01:1 on paper-alt — was #7b8a97 (3.5:1, failed AA) */
	--teal: #317474;
	--teal-deep: #24595a;
	--blue-deep: #005382;
	--sky: #7fcdff;         /* DECORATIVE ONLY: rules, borders, logo. 1.74:1 — never for text. */
	--sky-text: #1a6fa8;    /* the same hue, darkened to 5.41:1, for anything that has to be read */
	--sky-wash: #eaf6fe;
	--paper: #ffffff;
	--paper-alt: #f5f5f5;
	--rule: #d8dee3;
	--flag: #d83131;

	/* Motion personality: "instrument" — short, mechanical, slight overshoot on
	   acknowledgement only. Every transition on the site inherits these. */
	--ease-inst: cubic-bezier(0.2, 0.8, 0.25, 1);
	--ease-flap: cubic-bezier(0.45, 0.05, 0.3, 1);
	--dur-1: 120ms;
	--dur-2: 220ms;
	--dur-3: 420ms;

	--measure: 68ch;
	--rail: 15.5rem;
}

/* ==========================================================================
   Layer 0 — cheap wins
   ========================================================================== */
::selection {
	background: var(--sky);
	color: #10222e;
}
html {
	scrollbar-color: var(--teal) var(--paper-alt);
	-webkit-text-size-adjust: 100%;
}
:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
	border-radius: 1px;
}
input,
select,
textarea {
	accent-color: var(--teal);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Asap", Verdana, Geneva, sans-serif;
	font-size: 1.0125rem;
	line-height: 1.66;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--blue-deep);
}

/* ==========================================================================
   Layer 2 — link treatment: "gauge underline" (grows from the left on hover)
   ========================================================================== */
.d-prose a,
.d-foot a,
.d-rail a {
	text-decoration: none;
	background-image: linear-gradient(var(--teal), var(--teal));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	padding-bottom: 1px;
	transition: background-size var(--dur-2) var(--ease-inst), color var(--dur-1) linear;
}
@media (prefers-reduced-motion: no-preference) {
	.d-prose a,
	.d-foot a,
	.d-rail a {
		background-size: 0% 1px;
	}
	.d-prose a:hover,
	.d-prose a:focus-visible,
	.d-foot a:hover,
	.d-rail a:hover,
	.d-rail a:focus-visible {
		background-size: 100% 1px;
	}
}
.d-prose a:hover,
.d-rail a:hover {
	color: var(--teal-deep);
}

/* ==========================================================================
   Masthead
   ========================================================================== */
.d-skip {
	position: absolute;
	left: -9999px;
}
.d-skip:focus {
	left: 0.5rem;
	top: 0.5rem;
	z-index: 60;
	background: var(--paper);
	padding: 0.6rem 0.9rem;
	border: 2px solid var(--teal);
}

.d-head {
	border-bottom: 3px solid var(--teal);
	background: var(--paper);
}
.d-head__in {
	max-width: 74rem;
	margin: 0 auto;
	padding: 1.15rem 1.35rem 1rem;
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.d-logo {
	display: block;
	text-decoration: none;
	line-height: 0.92;
	color: inherit;
}
.d-logo svg {
	display: block;
	width: 13.5rem;
	height: auto;
}

.d-tag {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.045em;
	font-size: 0.86rem;
	color: var(--ink-faint);
	margin: 0 0 0.35rem;
}
.d-tag b {
	color: var(--sky-text);
	font-weight: 700;
}

/* ==========================================================================
   Shell — vertical index rail + single content column
   ========================================================================== */
.d-shell {
	max-width: 74rem;
	margin: 0 auto;
	padding: 2rem 1.35rem 3.5rem;
	display: grid;
	grid-template-columns: var(--rail) minmax(0, 1fr);
	gap: 2.75rem;
	align-items: start;
}
@media (max-width: 60rem) {
	.d-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}
}

/* --- the vertical index (the site's long-standing nav form) --- */
.d-rail {
	position: sticky;
	top: 1.25rem;
	font-size: 0.95rem;
}
@media (max-width: 60rem) {
	.d-rail {
		position: static;
		border-bottom: 1px solid var(--rule);
		padding-bottom: 1.25rem;
	}
}
.d-rail__h {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.74rem;
	color: var(--ink-faint);
	margin: 0 0 0.6rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--rule);
}
.d-rail ul {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
}
.d-rail li {
	margin: 0;
	border-bottom: 1px solid #edf0f2;
}
.d-rail li a {
	display: block;
	padding: 0.5rem 0 0.5rem 0.75rem;
	border-left: 3px solid transparent;
	color: var(--ink);
	transition: border-color var(--dur-1) linear, padding-left var(--dur-2) var(--ease-inst),
		color var(--dur-1) linear;
	background-image: none; /* rail uses the border tick, not the gauge underline */
}
.d-rail li a:hover,
.d-rail li a:focus-visible {
	border-left-color: var(--teal);
	color: var(--teal-deep);
}
.d-rail li.is-here > a {
	border-left-color: var(--flag);
	font-weight: 700;
	color: var(--ink);
}
.d-rail li.is-here > a::after {
	content: "";
}
/* second level — always in the markup (Gate 18), de-emphasised unless it is the
   current branch, so the rail stays scannable without changing any hrefs. */
.d-rail li ul {
	margin: 0 0 0.35rem;
}
.d-rail li li a {
	padding-left: 1.6rem;
	font-size: 0.88rem;
	color: var(--ink-soft);
}
.d-rail li ul:not(.is-open) li a {
	color: #6b7680;
	font-size: 0.84rem;
	padding-top: 0.34rem;
	padding-bottom: 0.34rem;
}
.d-rail li ul.is-open {
	background: #fafcfd;
}

/* ==========================================================================
   Content
   ========================================================================== */
.d-main {
	min-width: 0;
}

.d-kicker {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.76rem;
	color: var(--teal);
	margin: 0 0 0.5rem;
}

h1 {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(1.85rem, 1.2rem + 2.1vw, 2.85rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
	margin: 0 0 0.85rem;
	color: #16232c;
}

.d-standfirst {
	font-size: 1.14rem;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0 0 1.9rem;
	max-width: 60ch;
}

.d-prose {
	max-width: var(--measure);
}
.d-prose > * + * {
	margin-top: 1.15rem;
}
.d-prose h2 {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.62rem;
	line-height: 1.18;
	margin: 2.6rem 0 0.2rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--rule);
	color: #16232c;
}
.d-prose h3 {
	font-family: "Asap", Verdana, sans-serif;
	font-weight: 700;
	font-size: 1.14rem;
	line-height: 1.35;
	margin: 1.9rem 0 0.1rem;
	color: var(--teal-deep);
}
.d-prose p {
	/* Only the bottom margin is reset. Resetting margin-top here would beat the
	   `.d-prose > * + *` flow rule on specificity (0,1,1 vs 0,1,0) and collapse the gap
	   between consecutive paragraphs. */
	margin-bottom: 0;
}
.d-prose ul,
.d-prose ol {
	margin-bottom: 0;
	padding-left: 1.2rem;
}
.d-prose > *:first-child {
	margin-top: 0;
}
.d-prose li + li {
	margin-top: 0.35rem;
}
.d-prose li::marker {
	color: var(--teal);
}
.d-prose hr {
	border: 0;
	height: 0;
	border-top: 1px solid var(--rule);
	margin: 2.4rem 0;
	position: relative;
}

/* attributed passage — the site's own device, not a tinted callout box */
.d-prose blockquote {
	margin: 1.9rem 0;
	padding: 0 0 0 1.15rem;
	border-left: 3px solid var(--sky);
	font-size: 1.06rem;
	color: #2b3a45;
}
.d-prose blockquote p {
	margin: 0;
}
.d-prose blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.88rem;
	font-style: normal;
	color: var(--ink-faint);
}

/* figure */
.d-fig {
	margin: 2rem 0;
}
.d-fig img {
	display: block;
	width: 100%;
	border-bottom: 3px solid var(--teal);
}
.d-fig figcaption {
	font-size: 0.86rem;
	color: var(--ink-faint);
	padding-top: 0.5rem;
	line-height: 1.45;
}

/* ==========================================================================
   Spec table — the concept-aircraft data (site-specific, not a card grid)
   ========================================================================== */
.d-spec {
	margin: 2rem 0;
	border-top: 3px solid var(--teal);
}
.d-spec__h {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	color: var(--ink-faint);
	padding: 0.5rem 0 0.15rem;
}
.d-spec table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.d-spec th,
.d-spec td {
	text-align: left;
	padding: 0.42rem 0.6rem 0.42rem 0;
	border-bottom: 1px solid #e7ebee;
	vertical-align: top;
}
.d-spec th {
	font-weight: 400;
	color: var(--ink-soft);
	width: 58%;
}
.d-spec td {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	white-space: nowrap;
}
.d-scroll {
	overflow-x: auto;
}

/* ==========================================================================
   Index list (used on hub pages instead of a rounded-card grid)
   ========================================================================== */
.d-index {
	list-style: none;
	margin: 1.9rem 0 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}
.d-index > li {
	border-bottom: 1px solid var(--rule);
	padding: 1.05rem 0;
	display: grid;
	grid-template-columns: 3.1rem minmax(0, 1fr);
	gap: 1.1rem;
	align-items: baseline;
}
.d-index__n {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--sky-text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.d-index__t {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 1.22rem;
	line-height: 1.2;
	margin: 0 0 0.3rem;
}
.d-index__t a {
	color: #16232c;
	text-decoration: none;
	background-image: linear-gradient(var(--teal), var(--teal));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size var(--dur-2) var(--ease-inst);
}
.d-index__t a:hover,
.d-index__t a:focus-visible {
	background-size: 100% 2px;
}
.d-index__d {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.97rem;
	line-height: 1.55;
}

/* ==========================================================================
   FAQ — questions are real h3 headings inside the summary
   ========================================================================== */
.d-faq {
	margin: 1.5rem 0 0;
	border-top: 1px solid var(--rule);
}
.d-faq details {
	border-bottom: 1px solid var(--rule);
}
.d-faq summary {
	cursor: pointer;
	padding: 0.85rem 2rem 0.85rem 0;
	position: relative;
	list-style: none;
	display: block;
}
.d-faq summary::-webkit-details-marker {
	display: none;
}
.d-faq summary h3 {
	font-family: "Asap", Verdana, sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	color: var(--ink);
	display: inline;
}
.d-faq summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 1.35rem;
	width: 0.62rem;
	height: 0.62rem;
	border-right: 2px solid var(--teal);
	border-bottom: 2px solid var(--teal);
	transform: rotate(45deg);
	transition: transform var(--dur-2) var(--ease-inst);
}
.d-faq details[open] summary::after {
	transform: rotate(-135deg);
}
.d-faq__a {
	padding: 0 0 1rem;
	color: var(--ink-soft);
}
.d-faq__a p {
	margin: 0 0 0.7rem;
}

/* ==========================================================================
   Layer 3 — signature moment: the split-flap departure indicator
   Mechanical half-flip on the masthead year + section numbers. Purely
   decorative; text is real and readable with motion off and with JS off.
   ========================================================================== */
.d-flap {
	display: inline-block;
	position: relative;
}
@media (prefers-reduced-motion: no-preference) {
	.d-flap[data-flap] {
		perspective: 320px;
	}
	.d-flap[data-flap]::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 50%;
		background: currentColor;
		opacity: 0;
		transform-origin: 50% 100%;
		pointer-events: none;
	}
	.d-flap.is-flapping::before {
		animation: d-flap-half 300ms var(--ease-flap) 1;
	}
	@keyframes d-flap-half {
		0% {
			opacity: 0.16;
			transform: rotateX(0deg);
		}
		70% {
			opacity: 0.06;
			transform: rotateX(-88deg);
		}
		100% {
			opacity: 0;
			transform: rotateX(-90deg);
		}
	}
	/* hairline seam, like a flap-board character cell */
	.d-flap[data-flap]::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		border-top: 1px solid rgba(255, 255, 255, 0.55);
		mix-blend-mode: overlay;
		pointer-events: none;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.d-foot {
	border-top: 3px solid var(--teal);
	background: var(--paper-alt);
	margin-top: 3rem;
}
.d-foot__in {
	max-width: 74rem;
	margin: 0 auto;
	padding: 2rem 1.35rem 2.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.75rem;
	font-size: 0.93rem;
	color: var(--ink-soft);
}
.d-foot__h {
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.74rem;
	color: var(--ink-faint);
	margin: 0 0 0.55rem;
}
.d-foot ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.d-foot li + li {
	margin-top: 0.3rem;
}
.d-foot a {
	color: var(--blue-deep);
}
.d-foot__base {
	max-width: 74rem;
	margin: 0 auto;
	padding: 0 1.35rem 2rem;
	font-size: 0.85rem;
	color: var(--ink-faint);
}

/* ==========================================================================
   Buttons — class is in the selector so container link styles can't win
   ========================================================================== */
a.d-btn,
button.d-btn {
	display: inline-block;
	font-family: "Saira Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.86rem;
	background: var(--teal);
	color: #ffffff; /* 4.9:1 on #317474 */
	border: 0;
	padding: 0.62rem 1.15rem;
	text-decoration: none;
	background-image: none;
	cursor: pointer;
	transition: background-color var(--dur-1) linear, transform var(--dur-1) var(--ease-inst);
}
a.d-btn:hover,
a.d-btn:focus-visible,
button.d-btn:hover {
	background: var(--teal-deep);
	color: #ffffff;
	background-image: none;
}
@media (prefers-reduced-motion: no-preference) {
	a.d-btn:active,
	button.d-btn:active {
		transform: translateY(1px);
	}
}

/* ==========================================================================
   Reveal — applied only via JS class (no-JS sees everything)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js .d-rise {
		opacity: 0;
		transform: translateY(10px);
	}
	.js .d-rise.is-in {
		opacity: 1;
		transform: none;
		transition: opacity var(--dur-3) var(--ease-inst), transform var(--dur-3) var(--ease-inst);
	}
}

/* print */
@media print {
	.d-rail,
	.d-foot {
		display: none;
	}
}