/*
 * OGC design system: tokens and components for destination pages and records.
 * Dark editorial frame, light reading surfaces, 1px edges, no shadows,
 * colour reserved for meaning. Mobile-first (390px), premium at 1440px.
 * Fonts (Archivo, Source Serif 4) are loaded site-wide by the global header.
 */

/* ---------------------------------------------------------------- tokens */
.ogc-sys {
	/* text */
	--ogc-ink: #13303B;            /* primary text */
	--ogc-ink-2: #4F6670;          /* secondary text */
	--ogc-on-dark: #F3F0E8;        /* primary text on the dark frame */
	--ogc-on-dark-2: rgba(243, 240, 232, .72);
	/* surfaces */
	--ogc-bg: #FFFFFF;             /* page background */
	--ogc-surface: #FFFFFF;        /* elevated surface (cards) */
	--ogc-sunk: #F4F1EB;           /* quiet panels */
	--ogc-dark: #0E2730;           /* editorial frame: hero, signup */
	--ogc-line: rgba(19, 48, 59, .14);     /* border / divider */
	--ogc-line-dark: rgba(243, 240, 232, .22);
	/* meaning */
	--ogc-accent: #1D5A6E;         /* links */
	--ogc-signal: #B8461A;         /* primary action */
	--ogc-verified: #2F6B4F;
	--ogc-stale: #8A6416;          /* stale / unconfirmed / seasonal */
	--ogc-warn: #9B2C2C;           /* safety / closed */
	--ogc-commercial: #6E4B7E;     /* paid partnership / affiliate: never mistaken for verified */
	/* type */
	--ogc-font-display: 'Archivo', Helvetica, Arial, sans-serif;
	--ogc-font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--ogc-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ogc-fs-display: clamp(2.6rem, 7vw, 5.25rem);
	--ogc-fs-h1: clamp(2.25rem, 5vw, 3.5rem);
	--ogc-fs-h2: clamp(1.6rem, 3vw, 2.25rem);
	--ogc-fs-h3: 1.1875rem;
	--ogc-fs-deck: clamp(1.125rem, 1.8vw, 1.375rem);
	--ogc-fs-body: 1.125rem;       /* ~16.4px on Astra's 91.2% root; readable on a dock */
	--ogc-fs-eyebrow: .72rem;
	--ogc-fs-meta: .8125rem;
	--ogc-fs-caption: .78rem;
	/* spacing scale */
	--ogc-s1: 4px; --ogc-s2: 8px; --ogc-s3: 12px; --ogc-s4: 16px; --ogc-s5: 24px;
	--ogc-s6: 32px; --ogc-s7: 48px; --ogc-s8: 64px; --ogc-s9: 96px;
	--ogc-radius: 4px;
	--ogc-measure: 68ch;

	background: var(--ogc-bg);
	color: var(--ogc-ink);
	font-family: var(--ogc-font-body);
	font-size: var(--ogc-fs-body);
	line-height: 1.6;
}

/* Let the page own the full width inside Astra. */
.ogc-system-page .site-content > .ast-container { max-width: none; padding: 0; display: block; }
.ogc-system-page #primary { margin: 0; padding: 0; width: 100%; }
body.ogc-system-page #primary #main > article { padding: 0; margin: 0; background: transparent; border: 0; }
body.ogc-system-page #primary .entry-content { margin: 0; }
body.ogc-system-page #primary .entry-header.ast-no-title { display: none; } /* empty once the page renders its own H1 */

.ogc-sys *, .ogc-sys *::before, .ogc-sys *::after { box-sizing: border-box; }
.ogc-sys a { color: var(--ogc-accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.ogc-sys a:hover { color: var(--ogc-ink); }
/* UI links are not underlined. Scoped under #content to outrank Astra's ".ast-single-post .entry-content a". */
#content .ogc-sys :is(.ogc-hero__actions, .ogc-card__title, .ogc-chips, .ogc-browse, .ogc-crumbs, .ogc-card__actions, .ogc-row__actions, .ogc-signup) a,
#content .ogc-sys a:is(.ogc-act, .ogc-btn, .ogc-row__title) { text-decoration: none; }
#content .ogc-sys :is(.ogc-card__title, .ogc-browse, .ogc-crumbs) a:hover, #content .ogc-sys a.ogc-row__title:hover { text-decoration: underline; }
.ogc-sys :focus-visible { outline: 2px solid var(--ogc-signal); outline-offset: 2px; }
.ogc-shell { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* ---------------------------------------------------------------- type */
.ogc-display, .ogc-h2, .ogc-h3, .ogc-card__title {
	font-family: var(--ogc-font-display); font-weight: 800; font-stretch: 72%; letter-spacing: -.01em; margin: 0;
}
.ogc-display { font-size: var(--ogc-fs-display); line-height: .94; max-width: 16ch; }
.ogc-h2 { font-size: var(--ogc-fs-h2); line-height: 1.02; color: var(--ogc-ink); }
.ogc-h3 { font-size: var(--ogc-fs-h3); line-height: 1.15; font-stretch: 85%; font-weight: 700; margin: 0 0 var(--ogc-s3); }
.ogc-deck { font-size: var(--ogc-fs-deck); line-height: 1.45; max-width: 46ch; margin: var(--ogc-s4) 0 0; }
.ogc-eyebrow {
	font-family: var(--ogc-font-mono); font-size: var(--ogc-fs-eyebrow); letter-spacing: .12em; text-transform: uppercase;
	color: var(--ogc-signal); margin: 0 0 var(--ogc-s2); display: flex; flex-wrap: wrap; gap: var(--ogc-s2); align-items: center;
}
.ogc-meta { font-family: var(--ogc-font-mono); font-size: var(--ogc-fs-meta); letter-spacing: .02em; color: var(--ogc-ink-2); }
.ogc-caption { font-size: var(--ogc-fs-caption); color: var(--ogc-on-dark-2); }
.ogc-prose { max-width: var(--ogc-measure); }
.ogc-prose p { margin: 0 0 var(--ogc-s4); }
.ogc-prose > *:last-child { margin-bottom: 0; }
.ogc-prose h2 { font-family: var(--ogc-font-display); font-weight: 800; font-stretch: 72%; font-size: var(--ogc-fs-h2); line-height: 1.02; margin: 0 0 var(--ogc-s4); }

/* ---------------------------------------------------------------- hero (dark editorial frame) */
.ogc-hero { position: relative; background: var(--ogc-dark); color: var(--ogc-on-dark); overflow: hidden; }
.ogc-hero__inner { position: relative; z-index: 1; padding-top: clamp(40px, 8vw, 104px); padding-bottom: clamp(32px, 5vw, 64px); }
.ogc-hero .ogc-display { color: var(--ogc-on-dark); }
.ogc-hero .ogc-deck { color: var(--ogc-on-dark-2); }
.ogc-crumbs { font-family: var(--ogc-font-mono); font-size: var(--ogc-fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--ogc-s5); display: flex; flex-wrap: wrap; gap: var(--ogc-s2); color: var(--ogc-on-dark-2); }
.ogc-hero .ogc-crumbs a { color: var(--ogc-on-dark-2); text-decoration: none; }
.ogc-hero .ogc-crumbs a:hover { color: var(--ogc-on-dark); text-decoration: underline; }
.ogc-hero__meta { display: flex; flex-wrap: wrap; gap: var(--ogc-s3); align-items: center; margin-top: var(--ogc-s5); }
.ogc-hero__meta .ogc-meta { color: var(--ogc-on-dark-2); }
.ogc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ogc-s2); margin-top: var(--ogc-s5); }
.ogc-hero__actions a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ogc-s4); border: 1px solid var(--ogc-line-dark);
	border-radius: var(--ogc-radius); color: var(--ogc-on-dark); text-decoration: none; font-family: var(--ogc-font-display); font-weight: 600; font-size: .95rem;
}
.ogc-hero__actions a:hover { border-color: var(--ogc-on-dark); color: var(--ogc-on-dark); }
.ogc-hero.has-media { min-height: min(78vh, 760px); display: flex; align-items: flex-end; }
.ogc-hero__media { position: absolute; inset: 0; margin: 0; }
.ogc-hero__media img, .ogc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ogc-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 39, 48, .88), rgba(14, 39, 48, .15) 60%); }
.ogc-hero__media .ogc-caption { position: absolute; right: var(--ogc-s4); bottom: var(--ogc-s3); z-index: 2; }
.ogc-hero .ogc-tag--status { color: var(--ogc-on-dark); border-color: var(--ogc-line-dark); }

/* ---------------------------------------------------------------- modules */
.ogc-module { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--ogc-line); }
.ogc-hero + .ogc-module { border-top: 0; }
.ogc-module--tight { padding: clamp(28px, 4vw, 44px) 0; }
.ogc-module--quiet { background: var(--ogc-sunk); }
.ogc-module__head { margin: 0 0 var(--ogc-s5); }
.ogc-module > .ogc-shell > * + * { margin-top: var(--ogc-s5); }
.ogc-module > .ogc-shell > .ogc-module__head + * { margin-top: 0; }
.ogc-pointer { color: var(--ogc-ink-2); font-style: italic; margin: 0; }

/* facts (Quick read, Getting there) */
.ogc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 var(--ogc-s5); margin: 0; }
.ogc-facts > div { padding: var(--ogc-s3) 0; border-top: 1px solid var(--ogc-line); }
.ogc-facts dt { font-family: var(--ogc-font-mono); font-size: var(--ogc-fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--ogc-ink-2); margin: 0 0 var(--ogc-s1); }
.ogc-facts dd { margin: 0; font-family: var(--ogc-font-display); font-weight: 700; font-stretch: 90%; font-size: 1.05rem; line-height: 1.3; }
.ogc-facts dd .ogc-meta { font-weight: 400; display: block; margin-top: 2px; }

/* columns */
.ogc-cols { display: grid; gap: var(--ogc-s6); }
@media (min-width: 900px) { .ogc-cols { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- tags (labels) */
.ogc-tag {
	display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid currentColor; border-radius: 3px;
	font-family: var(--ogc-font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.ogc-tag--status { color: var(--ogc-signal); }
.ogc-tag--verified { color: var(--ogc-verified); }
.ogc-tag--neutral { color: var(--ogc-ink-2); }
.ogc-tag--stale { color: var(--ogc-stale); }
.ogc-tag--warn { color: var(--ogc-warn); }
.ogc-tag--editorial { color: var(--ogc-surface); background: var(--ogc-ink); border-color: var(--ogc-ink); }
.ogc-tag--topic { color: var(--ogc-accent); }
.ogc-tag--commercial { color: var(--ogc-commercial); border-style: dashed; }

/* ---------------------------------------------------------------- cards (one structure, five families) */
.ogc-grid { display: grid; gap: var(--ogc-s4); }
.ogc-grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ogc-card { display: flex; flex-direction: column; background: var(--ogc-surface); border: 1px solid var(--ogc-line); border-radius: var(--ogc-radius); min-width: 0; }
.ogc-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ogc-radius) var(--ogc-radius) 0 0; }
.ogc-card__body, .ogc-card--destination, .ogc-card--area, .ogc-card--note, .ogc-card--editorial { padding: var(--ogc-s5); display: flex; flex-direction: column; gap: var(--ogc-s2); }
.ogc-card__title { font-size: 1.3rem; line-height: 1.08; }
.ogc-card__title a { color: var(--ogc-ink); text-decoration: none; }
.ogc-card__title a:hover { text-decoration: underline; }
.ogc-card__reach { font-family: var(--ogc-font-mono); font-size: var(--ogc-fs-meta); color: var(--ogc-ink-2); margin: 0; }
.ogc-card__text { margin: 0; font-size: .98rem; line-height: 1.55; }
.ogc-card__why { margin: 0; font-style: italic; font-size: .95rem; }
.ogc-card__foot { margin: 0; font-size: var(--ogc-fs-meta); color: var(--ogc-ink-2); }
.ogc-card__labels { display: flex; flex-wrap: wrap; gap: var(--ogc-s2); align-items: center; margin-top: auto; padding-top: var(--ogc-s2); }
.ogc-card__actions { display: flex; flex-wrap: wrap; gap: var(--ogc-s2); padding-top: var(--ogc-s2); }
.ogc-card--note.is-old { opacity: .82; }
.ogc-card--destination .ogc-card__title { font-size: 1.2rem; }

/* actions: real tap targets */
.ogc-act, .ogc-sys a.ogc-act {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--ogc-s4); border: 1px solid var(--ogc-line);
	border-radius: var(--ogc-radius); font-family: var(--ogc-font-display); font-weight: 600; font-size: .92rem; color: var(--ogc-ink); text-decoration: none;
}
.ogc-act:hover { border-color: var(--ogc-ink); }
.ogc-sys a.ogc-act--call, .ogc-sys a.ogc-act--primary { background: var(--ogc-signal); border-color: var(--ogc-signal); color: #fff; }

/* compact rows (need-based views) */
.ogc-view + .ogc-view { margin-top: var(--ogc-s6); }
.ogc-group + .ogc-group { margin-top: var(--ogc-s5); }
.ogc-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ogc-line); }
.ogc-row { display: grid; gap: var(--ogc-s1) var(--ogc-s4); padding: var(--ogc-s3) 0; border-bottom: 1px solid var(--ogc-line); grid-template-columns: 1fr; }
.ogc-row__title { font-family: var(--ogc-font-display); font-weight: 700; font-stretch: 90%; font-size: 1.05rem; color: var(--ogc-ink); text-decoration: none; }
.ogc-row__meta { font-family: var(--ogc-font-mono); font-size: var(--ogc-fs-meta); color: var(--ogc-ink-2); }
.ogc-row__labels, .ogc-row__actions { display: flex; flex-wrap: wrap; gap: var(--ogc-s2); align-items: center; }
@media (min-width: 900px) {
	.ogc-row { grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1.4fr) auto auto; align-items: center; }
}

/* browse links (anti-sprawl) */
.ogc-browse { display: flex; flex-wrap: wrap; gap: var(--ogc-s2) var(--ogc-s4); align-items: center; margin: var(--ogc-s4) 0 0; }
.ogc-browse a { font-family: var(--ogc-font-display); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* sibling chips */
.ogc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ogc-s2); }
.ogc-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--ogc-s3); border: 1px solid var(--ogc-line); border-radius: var(--ogc-radius); color: var(--ogc-ink); text-decoration: none; font-size: .95rem; }

/* pack list: label column + sourced sentence */
#content .ogc-sys .ogc-pack { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ogc-line); counter-reset: none; }
.ogc-pack__deck { margin: 0 0 var(--ogc-s4); color: var(--ogc-ink-2); max-width: var(--ogc-measure); }
.ogc-pack__row { display: grid; gap: var(--ogc-s1) var(--ogc-s5); padding: var(--ogc-s4) 0; border-bottom: 1px solid var(--ogc-line); }
.ogc-pack__label { margin: 0; font-family: var(--ogc-font-display); font-weight: 800; font-stretch: 72%; font-size: 1.35rem; line-height: 1.1; color: var(--ogc-ink); }
.ogc-pack__body { margin: 0; max-width: var(--ogc-measure); }
.ogc-pack__src { margin: var(--ogc-s2) 0 0; font-size: var(--ogc-fs-meta); line-height: 1.6; }
.ogc-pack__act { margin: var(--ogc-s3) 0 0; display: flex; gap: var(--ogc-s2); align-items: center; flex-wrap: wrap; }
@media (min-width: 700px) { .ogc-pack__row { grid-template-columns: 160px 1fr; } }

/* sources */
.ogc-sources { list-style: none; margin: 0; padding: 0; }
.ogc-sources li { padding: var(--ogc-s2) 0; border-bottom: 1px solid var(--ogc-line); display: flex; flex-wrap: wrap; gap: var(--ogc-s2) var(--ogc-s4); justify-content: space-between; }

/* buttons + email capture */
.ogc-btn, .ogc-sys a.ogc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--ogc-s5); border-radius: var(--ogc-radius); border: 0; font-family: var(--ogc-font-display); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; }
.ogc-btn--primary, .ogc-sys a.ogc-btn--primary { background: var(--ogc-signal); color: #fff; }
.ogc-btn--primary:hover, .ogc-sys a.ogc-btn--primary:hover { background: #9A3912; color: #fff; }
.ogc-module--signup { background: var(--ogc-dark); color: var(--ogc-on-dark); border-top: 0; }
.ogc-module--signup .ogc-h2 { color: var(--ogc-on-dark); }
.ogc-signup { display: grid; gap: var(--ogc-s5); align-items: end; }
.ogc-signup__text { color: var(--ogc-on-dark-2); margin: var(--ogc-s3) 0 0; max-width: 46ch; }
.ogc-signup__form { display: flex; flex-wrap: wrap; gap: var(--ogc-s2); }
.ogc-signup__form input[type=email] { flex: 1 1 240px; min-height: 48px; padding: 0 var(--ogc-s4); border: 1px solid var(--ogc-line-dark); border-radius: var(--ogc-radius); background: transparent; color: var(--ogc-on-dark); font: inherit; }
@media (min-width: 900px) { .ogc-signup { grid-template-columns: 1.4fr 1fr; } }

/* local pro profile */
.ogc-pro__head { display: grid; gap: var(--ogc-s5); align-items: end; }
.ogc-pro__photo img { width: 160px; height: 160px; object-fit: cover; border-radius: var(--ogc-radius); display: block; }
@media (min-width: 700px) { .ogc-pro__head { grid-template-columns: auto 1fr; } }

/* legacy Explore tree inside the system page keeps its approved look */
.ogc-sys .ogc-place-browser { margin: 0; }
.ogc-sys .ogc-change-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ogc-s4); }

/* ---------------------------------------------------------------- phone (first-class) */
#content .ogc-sys :is(.ogc-chips, .ogc-rows, .ogc-sources) { margin-left: 0; padding-left: 0; }

@media (max-width: 699px) {
	.ogc-grid--3, .ogc-sys .ogc-change-grid { grid-template-columns: 1fr; gap: 16px; }
	.ogc-facts { grid-template-columns: 1fr 1fr; }
	.ogc-module--getting-there .ogc-facts { grid-template-columns: 1fr; }
	.ogc-hero.has-media { min-height: 0; aspect-ratio: auto; }
	.ogc-hero.has-media .ogc-hero__inner { padding-top: 56vw; }
	.ogc-display { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .ogc-hero__video { display: none; } }