/* =====================================================================
   Subpage base — mirrors the slim, single-accent (petrol) homepage system.
   Loaded AFTER system.css on every /pages/*.html.
   ===================================================================== */
:root{ --maxw:1080px; --accent:var(--petrol-600); }
body{ line-height:1.65; }

.container, .container.wide{ max-width:var(--maxw); }
.container.col{ max-width:760px; }

h1,h2,h3,.h1,.h2,.h3,.display{ font-style:normal; letter-spacing:-.018em; }
em,i{ font-style:normal; }
.eyebrow{ color:var(--ink-faint); font-weight:600; letter-spacing:.2em; }
.eyebrow::before{ background:var(--accent); opacity:.55; }
.lede{ font-style:normal; font-weight:400; color:var(--ink-soft); }

/* rhythm */
.sec{ padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.sec.tight{ padding-block: clamp(2.2rem, 1.8rem + 2vw, 3.4rem); }
.sec-head{ margin-bottom: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); }
.sec-head .eyebrow{ margin-bottom:1.1rem; }
.sec-head h2{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight:600; max-width:26ch; }
.sec-head p{ color:var(--ink-soft); margin-top:.8rem; max-width:60ch; font-size:.98rem; }

/* header slim */
.nav{ height:68px; }
.nav-links a{ font-size:.88rem; white-space:nowrap; }
.brand .brand-sub{ color:var(--ink-faint); }

/* buttons / tags — petrol accent */
.btn{ font-size:.9rem; padding:.72em 1.3em; }
.btn--accent{ --btn-bg:var(--accent); --btn-bd:var(--accent); --btn-fg:#fff; }
.tag.teal,.tag.accent{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 38%, transparent); background:transparent; }
.mark .acc{ fill:var(--accent); }
.link{ color:var(--navy); }

/* page hero */
.page-hero{ padding-top:124px; padding-bottom:clamp(2rem, 1.5rem + 2vw, 3rem); }
.page-hero h1{ font-size:clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem); font-weight:600; line-height:1.05; }
.page-hero .lede{ margin-top:1.1rem; max-width:62ch; font-size:1.08rem; line-height:1.65; }
.crumb{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--ink-faint); margin-bottom:1.3rem; }
.crumb a{ color:var(--ink-faint); text-decoration:none; }
.crumb a:hover{ color:var(--accent); }

/* generic content blocks reused across subpages */
.prose{ max-width:68ch; }
.prose p{ margin-bottom:1.1rem; color:var(--ink); line-height:1.75; }
.prose p:last-child{ margin-bottom:0; }

/* timeline / list rows */
.tl{ border-top:1px solid var(--navy); }
.tl .row{ display:grid; grid-template-columns:150px 1fr; gap:1.4rem clamp(1.5rem,1rem + 2vw,3rem); padding:1.5rem 0; border-bottom:1px solid var(--line); }
.tl .when{ font-weight:600; color:var(--accent); font-size:.9rem; }
.tl .what h3{ font-size:1.12rem; font-weight:600; }
.tl .what .where{ color:var(--ink-soft); font-size:.94rem; margin-top:.25rem; line-height:1.5; }
@media(max-width:640px){ .tl .row{ grid-template-columns:1fr; gap:.4rem; } }

/* simple two-col label list */
.deflist{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,1rem + 2vw,2.8rem) clamp(2.5rem,1.5rem + 4vw,5rem); }
.deflist .it{ display:flex; gap:1.1rem; align-items:flex-start; }
.deflist .ic{ width:44px; height:44px; border-radius:50%; background:color-mix(in srgb,var(--accent) 10%, transparent); display:grid; place-items:center; color:var(--accent); flex:0 0 auto; }
.deflist h3{ font-size:1.12rem; font-weight:600; line-height:1.3; }
.deflist p{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; margin-top:.35rem; }
@media(max-width:680px){ .deflist{ grid-template-columns:1fr; } }

/* ---------- Auto scroll-reveal (site-wide) ---------- */
.areveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
.areveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .areveal{ opacity:1 !important; transform:none !important; } }