/* ==========================================================================
   MEGA CITY — design system
   --------------------------------------------------------------------------
   Everything below is derived from a small set of decisions rather than chosen
   section by section. That is the difference between a theme that holds
   together and one that is merely finished.

   Type:    a 1.25 ratio scale, fluid between 380px and 1400px viewports
   Space:   a 4px base, doubling — nothing is ever an arbitrary 13px
   Colour:  Rotary's palette, but paper rather than slabs of blue
   Rhythm:  one gold hairline, one heavy numeral, used consistently
   ========================================================================== */

:root {
	/* ---- Colour -------------------------------------------------------
	   Rotary's palette, from "Your Logos at a Glance", April 2025 — the
	   current source. Hex values exactly as published.

	   A correction: an earlier version of this theme changed Royal Blue to
	   #0C3C7C, taken from a 2019 quick guide. That was wrong. Royal Blue is
	   #17458F, which is what the theme used to begin with. Azure and Sky Blue
	   were changed on the same bad source and are restored here too.
	   ------------------------------------------------------------------- */
	--royal:      #17458F;   /* Rotary Royal Blue · PMS 286C  */
	--azure:      #0067C8;   /* Azure · PMS 2175C             */
	--sky:        #00A2E0;   /* Sky Blue · PMS 2202C          */
	--gold:       #F7A81B;   /* Rotary Gold · PMS 130C        */

	/* Interface states only — hover and focus. Never a surface that reads as
	   "the Rotary blue" or "the Rotary gold". */
	--royal-deep: #0E2E63;

	/*
	 * Two darker golds, because Rotary Gold cannot carry text on a light page.
	 * #F7A81B on the paper background is 1.9:1 — effectively invisible, and
	 * well under the 4.5:1 that small text needs.
	 *
	 *   --gold-deep : hover and focus states on gold surfaces
	 *   --gold-text : the gold used wherever gold is a WORD rather than a
	 *                 shape. 4.9:1 on paper, 4.5:1 on the tint. Passes.
	 *
	 * Rotary Gold itself stays exactly as published, on rules, buttons and
	 * bands — every place it is a surface and not a letter.
	 */
	--gold-deep:  #C97D00;
	--gold-text:  #9A6100;

	/* ---- Surfaces and text ---------------------------------------------
	   Paper, not white. A pure #fff page under a blue header reads cold and
	   makes photographs look washed out; a warm off-white does neither.
	   ------------------------------------------------------------------- */
	--paper:      #FBF9F6;
	--paper-2:    #F3EFE9;
	--ink:        #16202C;
	--body:       #414D5C;
	--muted:      #7A8798;
	--rule:       #DFD8CE;

	/* ---- Type --------------------------------------------------------- */
	/*
	 * Rotary's current typography guidance, from the Brand Center:
	 *
	 *   Primary   — headlines and navigation labels.
	 *               Frutiger (licensed) · Open Sans (free) · Arial (free)
	 *   Secondary — body text, secondary headlines and captions.
	 *               Sentinel (licensed) · Georgia (free)
	 *
	 * No condensed face and no all-caps rule. An earlier version of this
	 * theme set headlines in condensed capitals, taken from Rotary's 2019
	 * quick guide, which is superseded — and which is why the site shouted.
	 */
	--font-head: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: Georgia, "Times New Roman", serif;

	/* Kept for interface furniture — buttons, labels, eyebrows, tables.
	   Those are navigation labels rather than body copy. */
	--font-sans: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* 1.25 minor third, fluid. min at 380px, max at 1400px. */
	--step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem);
	--step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
	--step-1:  clamp(1.25rem, 1.18rem + 0.32vw, 1.44rem);
	--step-2:  clamp(1.56rem, 1.44rem + 0.55vw, 1.89rem);
	--step-3:  clamp(1.95rem, 1.74rem + 0.92vw, 2.48rem);
	--step-4:  clamp(2.44rem, 2.09rem + 1.53vw, 3.25rem);
	--step-5:  clamp(3.05rem, 2.48rem + 2.47vw, 4.26rem);

	/* ---- Space -------------------------------------------------------- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
	--s-10: 8rem;

	/* Section padding scales with the viewport; the ratio between sections
	   stays fixed, so the page keeps its rhythm at any width. */
	--section: clamp(3.5rem, 7vw, 7rem);

	/* ---- Measure ------------------------------------------------------ */
	--wide:   1240px;
	--full:   1680px;
	--prose:  68ch;

	--radius: 4px;
	--radius-lg: 10px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font-family: var(--font-body);
	font-size: var(--step-0);
	/* Georgia sits lower and wider than Open Sans, so it wants a little more
	   line height and a touch less size than a sans face at the same step. */
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--azure); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--royal-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

h1, h2, h3, h4 {
	margin: 0;
	color: var(--ink);
	font-weight: 800;
	line-height: 1.08;
	text-wrap: balance;
}

/* Headlines in the primary face, sentence case, tightened slightly as
   display type wants. */
h1, h2, h3, h4 {
	font-family: var(--font-head);
	letter-spacing: -0.02em;
}
h1 { font-size: var(--step-4); line-height: 1.1; }
h2 { font-size: var(--step-2); line-height: 1.15; }
h3 { font-size: var(--step-1); letter-spacing: -0.012em; }
p { margin: 0; }
p + p { margin-top: var(--s-4); }

::selection { background: var(--gold); color: var(--ink); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.u-wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.u-wrap--full { max-width: var(--full); }
.u-wrap--prose { max-width: var(--prose); }

.u-section { padding-block: var(--section); }
.u-section--tight { padding-block: calc(var(--section) * 0.6); }

/* Vertical rhythm without margin arithmetic at every call site. */
.u-stack > * + * { margin-top: var(--s-4); }
.u-stack-lg > * + * { margin-top: var(--s-6); }

.u-lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink); max-width: 46ch; }

/* Georgia's numerals are old-style by default, which looks wrong in a
   statistic or a date. */
.stat__n, .ev-date__day, .ev-tl__t, .contact-card__big { font-variant-numeric: lining-nums tabular-nums; }
.u-muted { color: var(--muted); }

.u-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.u-sr:focus {
	position: static; width: auto; height: auto; margin: 0;
	clip-path: none; padding: var(--s-3) var(--s-5); background: #fff; color: var(--royal);
}

/* ==========================================================================
   The one motif
   --------------------------------------------------------------------------
   A gold hairline and a small caps eyebrow, used at every section head. Used
   once it is decoration; used everywhere it becomes structure, and the reader
   stops noticing it and starts navigating by it.
   ========================================================================== */
.eyebrow {
	font-family: var(--font-sans);
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-text);
	margin-bottom: var(--s-4);
}
.eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--gold);
	flex: 0 0 auto;
}
.eyebrow--light { color: var(--gold); }

.section-head { max-width: 62ch; margin-bottom: var(--s-7); }
.section-head p { margin-top: var(--s-4); font-size: var(--step-1); color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	font-family: var(--font-sans);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--step-0);
	font-weight: 700;
	line-height: 1;
	padding: var(--s-4) var(--s-6);
	border: 2px solid transparent;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--royal); color: #fff; }
.btn--primary:hover { background: var(--royal-deep); color: #fff; }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-deep); color: #fff; }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--light:hover { background: #fff; color: var(--royal); }

/* A link that reads as an action without shouting like a button. */
.link-more {
	font-family: var(--font-sans);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-weight: 700;
	font-size: var(--step-0);
	text-decoration: none;
	color: var(--royal);
}
.link-more::after {
	content: "";
	width: 1.1em; height: 1px;
	background: currentColor;
	transition: width .18s;
}
.link-more:hover::after { width: 1.8em; }