/*
Theme Name: OGS Pilot Child
Theme URI: https://claude.testogs.ro
Description: Child theme for the OGS WordPress Premium Landing Pilot, implemented as the A-MAIZ-ING demo. Holds the P12 structural tokens, the A-MAIZ-ING value layer re-derived under OD-P11, the five P20 global components, and the self-hosted webfonts.
Author: OGS
Template: hello-elementor
Version: 1.36.2
License: GPL-2.0-or-later
Text Domain: ogs-pilot-child
*/

/* ==========================================================================
   P12 design tokens — child-theme-owned categories only.
   Source of truth: ARCHITECTURE.md P12, approved at Client Gate 3 (2026-07-30).
   Do NOT add colour or typography tokens here: their declared authority is
   Elementor globals, and a second definition is the EP-03 failure mode.
   ========================================================================== */
:root {
	/* Spacing scale — ten steps. Any value outside this scale is a defect. */
	--ogs-space-1: 4px;
	--ogs-space-2: 8px;
	--ogs-space-3: 12px;
	--ogs-space-4: 16px;
	--ogs-space-5: 24px;
	--ogs-space-6: 32px;
	--ogs-space-7: 48px;
	--ogs-space-8: 64px;
	--ogs-space-9: 96px;
	--ogs-space-10: 128px;

	/* Container and grid */
	--ogs-content-max: 1200px;
	--ogs-prose-max: 720px;
	--ogs-gutter-mobile: 16px;
	--ogs-gutter-tablet: 24px;
	--ogs-gutter-desktop: 32px;
	--ogs-rhythm-mobile: 64px;
	--ogs-rhythm-desktop: 96px;

	/* Radius */
	--ogs-radius-sm: 4px;
	--ogs-radius-md: 8px;
	--ogs-radius-lg: 16px;

	/* Border — functional boundaries use color.muted (4.76:1).
	   #E2E8F0 is decorative ONLY: it measures 1.23:1 on white. */
	--ogs-border-width: 1px;
	--ogs-border-functional: #64748B;
	--ogs-border-decorative: #E2E8F0;

	/* Elevation — two levels only. No shadow implies interactivity. */
	--ogs-elevation-resting: 0 1px 2px rgba(15, 23, 42, 0.06);
	--ogs-elevation-raised: 0 8px 24px rgba(15, 23, 42, 0.10);

	/* Motion — since 1.18.0 these are ALIASES onto the CLAVE scale (see the
	   CLAVE block at the end of this file). The names survive because dozens of
	   rules read them; the values are no longer this block's to decide. */
	--ogs-motion-colour: var(--clv-2, 180ms);
	--ogs-motion-transform: var(--clv-3, 270ms);
	--ogs-motion-easing: var(--clv-follow, ease-out);

	/* Focus ring — white on dark surfaces, primary on light.
	   A single ring colour measured 1.00:1 on the primary button. */
	--ogs-focus-width: 3px;
	--ogs-focus-offset: 2px;
	--ogs-focus-on-light: #1D4ED8;
	--ogs-focus-on-dark: #FFFFFF;

	/* Form controls — 44px minimum target (R-029), 16px text so mobile
	   Safari does not zoom on focus. */
	--ogs-control-min-height: 44px;
	--ogs-control-font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ogs-motion-colour: 0ms;
		--ogs-motion-transform: 0ms;
	}
}

/* ==========================================================================
   A-MAIZ-ING value layer — added at P20 by the OD-P11 closure.

   The structural tokens above are kept from P12. These are the VALUES,
   re-derived from the approved A-MAIZ-ING design, per Option C of OD-P11.

   Two of them are corrections, not transcriptions. --ogs-c-text-muted and
   --ogs-c-text-muted-on-light differ from the design's own hex values because
   the design's values fail R-028 at the size they are actually used. The
   originals are recorded beside each so the change is visible rather than
   silently absorbed. EP-18 does not relax for a demonstration site.
   Full computation: EVIDENCE/P12-contrast-amaizing-rederivation.md
   ========================================================================== */

:root {
	/* Brand */
	--ogs-c-primary: #FDC125;
	--ogs-c-primary-hover: #FFD863;
	--ogs-c-on-primary: #000000;

	/* Dark surfaces, darkest first. The design uses all of these. */
	--ogs-c-bg: #000000;
	--ogs-c-bg-footer: #050505;
	--ogs-c-bg-elevated: #0A0A0A;
	--ogs-c-surface: #141414;
	--ogs-c-surface-alt: #1A1A1A;

	/* The one light surface — the legal/prose pages */
	--ogs-c-surface-light: #FAF7F2;

	/* Text on dark */
	--ogs-c-text: #FFFFFF;
	--ogs-c-text-secondary: #B8B0A6;
	--ogs-c-heading-muted: #D8D2C9;

	/* CORRECTED. Design declares #6E6A64, used 14x at 11-14px — normal-size
	   text, so the threshold is 4.5:1. It measured 3.24-3.91:1 and failed on
	   every dark surface including black, so no placement rescued it. Lightness
	   raised, hue and saturation preserved. Now 4.50:1 on the worst surface
	   (#1A1A1A) and 5.43:1 on black. */
	--ogs-c-text-muted: #868179;

	/* Text on the light surface */
	--ogs-c-text-on-light: #3A3733;

	/* CORRECTED. Design declares #8A857D, used 3x at 14px on #FAF7F2 at
	   3.43:1 — passes AA-large, fails AA-normal. Darkened to 4.53:1. Scoped to
	   the light surface: on dark surfaces the original already passed. */
	--ogs-c-text-muted-on-light: #76716A;

	/* Borders and hairlines. Non-text boundaries — their 3:1 check belongs
	   with the built components at P34, not here. */
	--ogs-c-hairline-primary: rgba(253, 193, 37, 0.18);
	--ogs-c-hairline-primary-strong: rgba(253, 193, 37, 0.45);
	--ogs-c-hairline-light: rgba(255, 255, 255, 0.08);
	--ogs-c-hairline-light-soft: rgba(255, 255, 255, 0.06);
	--ogs-c-primary-wash: rgba(253, 193, 37, 0.10);
	--ogs-c-scrim: rgba(0, 0, 0, 0.88);
	--ogs-c-scrim-strong: rgba(0, 0, 0, 0.94);
	--ogs-c-hairline-primary-soft: rgba(253, 193, 37, 0.20);
	--ogs-c-hairline-primary-medium: rgba(253, 193, 37, 0.28);
	--ogs-c-hairline-primary-hover: rgba(253, 193, 37, 0.60);
	--ogs-c-social-border: rgba(253, 193, 37, 0.30);
	--ogs-c-nav-number: rgba(253, 193, 37, 0.60);
	--ogs-elevation-header: 0 10px 30px rgba(0, 0, 0, 0.55);
	--ogs-c-hero-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95));
	--ogs-c-form-border: rgba(253, 193, 37, 0.22);
	--ogs-c-input-border: rgba(255, 255, 255, 0.14);
	--ogs-c-input-border-dashed: rgba(255, 255, 255, 0.20);

	/* The one link colour that works on the light prose surface. #FDC125 on
	   #FAF7F2 is 1.53:1 and unusable there; this measures 4.74:1. */
	--ogs-c-link-on-light: #8A6A00;

	/* Type. Self-hosted — see fonts/fonts.css. The fallbacks are named rather
	   than left to the browser: Anton is a condensed display face and falling
	   back to a default sans changes line counts, so the stack degrades to
	   Impact-class faces first. */
	--ogs-font-display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
	--ogs-font-brand: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--ogs-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Fluid rhythm, taken from the design rather than the P12 fixed steps.
	   The design has zero @media queries; these are its actual values. */
	--ogs-pad-inline: clamp(16px, 4vw, 40px);
	--ogs-pad-block: clamp(28px, 6vw, 72px);
	--ogs-overlay-pad: clamp(20px, 5vw, 48px);
	--ogs-shell-max: 1240px;
	--ogs-nav-max: 1100px;

	/* Header height is needed by the skip-link target and the anchor offset.
	   Derived from the design's 12px padding + 46px logo. */
	--ogs-header-h: 70px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/* [hidden] must actually hide.
   The UA stylesheet sets [hidden] { display: none }, but any rule that sets a
   display value beats it — .ogs-pill's inline-flex did exactly that, so the
   language toggle rendered while still marked hidden. Sighted users saw a
   control that assistive technology had been told was absent, which is worse
   than either state alone. One rule, applied once, rather than a per-component
   guard that the next component forgets. */
body.ogs-amaizing [hidden] {
	display: none !important;
}

body.ogs-amaizing {
	margin: 0;
	background: var(--ogs-c-bg);
	color: var(--ogs-c-text);
	font-family: var(--ogs-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body.ogs-amaizing a {
	color: var(--ogs-c-primary);
	text-decoration: none;
}

body.ogs-amaizing a:hover,
body.ogs-amaizing a:focus-visible {
	color: var(--ogs-c-primary-hover);
}

/* Focus ring. The token layer already decided this at P12 and the decision
   holds: white on dark, because a primary-coloured ring on a primary-coloured
   button measured 1.00:1. :focus-visible only — a mouse click on a button
   should not leave a ring, but a keyboard user must always see one. */
body.ogs-amaizing :focus-visible {
	outline: var(--ogs-focus-width) solid var(--ogs-focus-on-dark);
	outline-offset: var(--ogs-focus-offset);
}

/* The prose pages invert the surface, so the ring must invert too. */
body.ogs-amaizing .ogs-prose :focus-visible {
	outline-color: var(--ogs-focus-on-light);
}

/* --------------------------------------------------------------------------
   Skip link — the design has none. Added, not inherited. (R-027)
   -------------------------------------------------------------------------- */

.ogs-skip-link {
	position: absolute;
	left: var(--ogs-space-4);
	top: var(--ogs-space-4);
	z-index: 200;
	padding: var(--ogs-space-3) var(--ogs-space-5);
	min-height: var(--ogs-control-min-height);
	display: inline-flex;
	align-items: center;
	border-radius: var(--ogs-radius-md);
	background: var(--ogs-c-primary);
	color: var(--ogs-c-on-primary) !important;
	font-family: var(--ogs-font-display);
	font-size: 14px;
	letter-spacing: 0.1em;
	transform: translateY(calc(-100% - var(--ogs-space-6)));
	transition: transform var(--ogs-motion-transform) var(--ogs-motion-easing);
}

/* Moves into view on focus rather than being clipped to 1px. A 1px-clipped
   skip link is invisible to a sighted keyboard user, which is the only user
   it exists for. */
.ogs-skip-link:focus {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.ogs-header {
	position: sticky;
	top: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ogs-space-4);
	padding: 12px var(--ogs-pad-inline);
	background: var(--ogs-c-scrim);
	backdrop-filter: blur(14px);
	border-bottom: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
	transition: padding var(--ogs-motion-transform) var(--ogs-motion-easing),
	            box-shadow var(--ogs-motion-transform) var(--ogs-motion-easing);
}

.ogs-header.is-scrolled {
	padding-top: 7px;
	padding-bottom: 7px;
	box-shadow: var(--ogs-elevation-header);
}

.ogs-brand {
	display: flex;
	align-items: center;
	gap: var(--ogs-space-3);
}

/* `.ogs-brand__mark` is sized in the logo block further down, where the two
   symbol layers and the wordmark are defined together. It was a 46x46 square
   here only because the old asset was a square raster lockup. */

.ogs-brand__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* The wordmark and tagline must never wrap.
   The design was authored at a 430px preview and sets both at fixed sizes. Below
   405px those fixed sizes no longer fit beside the controls, and "A-MAÍZ-ING"
   broke across two lines — a wrapped wordmark reads as broken rather than as
   small. Measured, not guessed: the wrap threshold was found by stepping the
   viewport 5px at a time.

   nowrap alone would have traded the wrap for horizontal overflow, which is
   worse. So both sizes become fluid, shrinking only below the design's own
   preview width and reaching the design's exact values at 430px and above. */
.ogs-brand__name {
	font-family: var(--ogs-font-brand);
	font-weight: 700;
	font-size: clamp(14px, 3.95vw, 17px);
	letter-spacing: 0.04em;
	color: var(--ogs-c-text);
	line-height: 1;
	white-space: nowrap;
}

.ogs-brand__tagline {
	font-family: var(--ogs-font-display);
	font-size: clamp(7px, 2.1vw, 9px);
	letter-spacing: 0.28em;
	color: var(--ogs-c-primary);
	line-height: 1;
	white-space: nowrap;
}

/* The lockup may shrink; the controls may not. A flex item defaults to
   min-width:auto, which refuses to shrink below its content and is the usual
   cause of a header overflowing instead of compressing. */
.ogs-brand__text {
	min-width: 0;
}

.ogs-header__controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Pill control — the RO/EN toggle and the MENIU button share it.
   min-height is the token, not the design's 11px padding: the design's
   own padding yields ~40px, under R-029's 44px target. */
.ogs-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--ogs-control-min-height);
	padding: 11px 15px;
	border-radius: 999px;
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary-strong);
	background: transparent;
	color: var(--ogs-c-primary);
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: border-color var(--ogs-motion-colour) var(--ogs-motion-easing),
	            background-color var(--ogs-motion-colour) var(--ogs-motion-easing);
}

.ogs-pill:hover {
	border-color: var(--ogs-c-primary);
	background: var(--ogs-c-primary-wash);
}

/* RO / EN / ES — the switcher is one pill holding three press-buttons.
   The pill itself is a group, not a control, so the interactive states live
   on the inner buttons; the active language rides on the same aria-pressed
   the accessibility tree reads, and the resting ones sit at the same 0.55
   the old "other language" hint used. */
.ogs-lang {
	gap: 0;
	padding: 0 6px;
	cursor: default;
}

.ogs-lang__opt {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	min-height: calc(var(--ogs-control-min-height) - 2 * var(--ogs-border-width));
	padding: 0 9px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--ogs-motion-colour) var(--ogs-motion-easing);
}

.ogs-lang__opt:hover {
	opacity: 1;
}

.ogs-lang__opt:focus-visible {
	outline: 2px solid var(--ogs-c-primary);
	outline-offset: -2px;
	opacity: 1;
}

.ogs-lang__opt[aria-pressed="true"] {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.ogs-lang__sep {
	opacity: 0.35;
}


/* Burger glyph. aria-hidden in the markup — it is decoration; the button
   carries its own accessible name. */
.ogs-burger {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ogs-burger span {
	display: block;
	width: 16px;
	height: 2px;
	background: var(--ogs-c-primary);
}

.ogs-burger span:last-child {
	width: 11px;
}

/* Scroll progress bar */
.ogs-progress-track {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
}

.ogs-progress {
	width: 0;
	height: 100%;
	background: var(--ogs-c-primary);
	transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   Navigation overlay

   The design opens this from MENIU at EVERY width — there is no horizontal
   desktop nav in the design at all, and only one <nav> element exists. So it
   is one component, not two, and it needs no media query: the grid's
   auto-fit/minmax gives one column on a phone and three on a desktop from the
   same rule. That is the OD-P11 rule working as intended rather than an
   exception to it.
   -------------------------------------------------------------------------- */

.ogs-navpanel {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: var(--ogs-c-bg);
	background-image: radial-gradient(var(--ogs-c-primary-wash) 1px, transparent 1.4px);
	background-size: 12px 12px;
	overflow-y: auto;
	padding: var(--ogs-overlay-pad);
}

/* [hidden] needs the explicit rule because the display:flex/grid below would
   otherwise win on specificity and the panel would render while closed. */
.ogs-navpanel[hidden] {
	display: none;
}

.ogs-navpanel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 36px;
}

.ogs-navpanel__label {
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--ogs-c-primary);
}

.ogs-navpanel__close {
	width: 46px;
	height: 46px;
	min-height: var(--ogs-control-min-height);
	border-radius: 999px;
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary-strong);
	background: transparent;
	color: var(--ogs-c-primary);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ogs-navpanel__close:hover {
	border-color: var(--ogs-c-primary);
	background: var(--ogs-c-primary-wash);
}

.ogs-nav ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 4px 40px;
	max-width: var(--ogs-nav-max);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.ogs-nav li {
	border-bottom: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-nav a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 14px 0;
	color: var(--ogs-c-text);
	font-family: var(--ogs-font-display);
	font-size: clamp(24px, 6vw, 38px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ogs-nav a:hover,
.ogs-nav a:focus-visible {
	color: var(--ogs-c-primary);
}

.ogs-nav li:hover {
	border-color: var(--ogs-c-hairline-primary-hover);
}

/* The item number. Generated by CSS counter rather than typed into each menu
   item, so the operator can reorder the menu in Appearance > Menus and the
   numbering follows. Typing them as labels would make reordering a
   two-step job the operator would get wrong. aria-hidden via the ::before
   pseudo-element, which screen readers ignore by default. */
.ogs-nav ul {
	counter-reset: ogs-nav;
}

.ogs-nav li {
	counter-increment: ogs-nav;
}

.ogs-nav a::before {
	content: counter(ogs-nav, decimal-leading-zero);
	font-family: var(--ogs-font-display);
	font-size: 11px;
	color: var(--ogs-c-nav-number);
	min-width: 22px;
}

.ogs-navpanel__foot {
	max-width: var(--ogs-nav-max);
	margin: 44px auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: center;
	justify-content: space-between;
}

.ogs-navpanel__address {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ogs-navpanel__address span {
	font-family: var(--ogs-font-body);
	font-size: 14px;
	color: var(--ogs-c-text-secondary);
}

.ogs-tel {
	font-family: var(--ogs-font-display);
	font-size: 22px;
	letter-spacing: 0.04em;
}

.ogs-navpanel__mascot {
	height: 130px;
	width: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ogs-footer {
	padding: clamp(48px, 7vw, 90px) var(--ogs-overlay-pad)
	         calc(120px + env(safe-area-inset-bottom));
	background: var(--ogs-c-bg-footer);
	border-top: var(--ogs-border-width) solid var(--ogs-c-hairline-primary-soft);
}

.ogs-footer__shell {
	max-width: var(--ogs-shell-max);
	margin: 0 auto;
}

.ogs-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px;
	margin-bottom: 40px;
}

.ogs-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-4);
}

/* `.ogs-footer__mark` is gone. The footer no longer renders a separate raster
   mark - it uses the same composed lockup as the header, sized by
   `.ogs-brand--footer` in the logo block further down. */

.ogs-footer__blurb {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
	max-width: 260px;
}

.ogs-footer__heading {
	display: block;
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
	margin-bottom: var(--ogs-space-4);
}

.ogs-hours__row {
	display: flex;
	justify-content: space-between;
	gap: var(--ogs-space-4);
	padding: 7px 0;
	border-bottom: var(--ogs-border-width) solid var(--ogs-c-hairline-light-soft);
	font-size: 14px;
}

.ogs-hours__day {
	color: var(--ogs-c-text-secondary);
}

.ogs-hours__time {
	color: var(--ogs-c-text);
	font-weight: 700;
}

.ogs-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-3);
	font-size: 14px;
	color: var(--ogs-c-text-secondary);
}

.ogs-social {
	display: flex;
	gap: var(--ogs-space-2);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogs-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ogs-control-min-height);
	padding: 8px 14px;
	border-radius: 999px;
	border: var(--ogs-border-width) solid var(--ogs-c-social-border);
	font-size: 12px;
	font-family: var(--ogs-font-display);
	letter-spacing: 0.1em;
}

.ogs-social a:hover,
.ogs-social a:focus-visible {
	border-color: var(--ogs-c-primary);
}

.ogs-footer__pages {
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogs-footer__pages a {
	font-size: 14px;
	color: var(--ogs-c-text-secondary);
}

.ogs-footer__pages a:hover,
.ogs-footer__pages a:focus-visible {
	color: var(--ogs-c-primary);
}

.ogs-hashtag {
	padding: 22px 0;
	border-top: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
	border-bottom: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
	text-align: center;
	margin-bottom: 22px;
	font-family: var(--ogs-font-display);
	font-size: clamp(20px, 5vw, 38px);
	letter-spacing: 0.14em;
	color: var(--ogs-c-primary);
}

/* The legal bar. This is where --ogs-c-text-muted is actually used, and it is
   the reason that correction was not cosmetic: at 13px the design's #6E6A64
   measured 3.68:1 on this footer's #050505. */
.ogs-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--ogs-c-text-muted);
}

.ogs-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogs-footer__legal a {
	color: var(--ogs-c-text-muted);
}

.ogs-footer__legal a:hover,
.ogs-footer__legal a:focus-visible {
	color: var(--ogs-c-primary);
}

/* --------------------------------------------------------------------------
   Sticky order bar
   -------------------------------------------------------------------------- */

.ogs-orderbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 80;
	display: flex;
	gap: 10px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--ogs-c-scrim-strong);
	backdrop-filter: blur(14px);
	border-top: var(--ogs-border-width) solid var(--ogs-c-hairline-primary-medium);
	transform: translateY(130%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.35s var(--ogs-motion-easing), opacity var(--ogs-motion-colour) ease;
}

.ogs-orderbar.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Hidden from assistive tech and from the tab order while off-screen.
   A control that has been slid out of view with transform is still focusable,
   and a keyboard user tabbing into an invisible button is a real defect. The
   JS sets [inert] where supported; this is the styling half. */
.ogs-orderbar[inert] {
	pointer-events: none;
}

/* The order bar stretches its primary action; page CTAs must not. This was
   global at P20 because the order bar was the only consumer, and it made the
   Home hero's COMANDĂ button span the full row. */
.ogs-orderbar .ogs-btn--primary {
	flex: 1;
}

.ogs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ogs-control-min-height);
	padding: 15px;
	border-radius: 999px;
	font-family: var(--ogs-font-display);
	font-size: 14px;
	letter-spacing: 0.1em;
}

.ogs-btn--primary {
	background: var(--ogs-c-primary);
	color: var(--ogs-c-on-primary) !important;
}

.ogs-btn--primary:hover,
.ogs-btn--primary:focus-visible {
	background: var(--ogs-c-primary-hover);
	color: var(--ogs-c-on-primary) !important;
}

.ogs-btn--ghost {
	padding: 15px 22px;
	border: 1.5px solid var(--ogs-c-hairline-primary-strong);
	color: var(--ogs-c-primary);
}

.ogs-btn--ghost:hover,
.ogs-btn--ghost:focus-visible {
	border-color: var(--ogs-c-primary);
	background: var(--ogs-c-primary-wash);
}

/* --------------------------------------------------------------------------
   Page templates
   -------------------------------------------------------------------------- */

.ogs-main {
	/* The sticky header is 70px; an in-page anchor must not land underneath
	   it. scroll-padding on the scroll container is the fix that does not
	   require a negative-margin hack on every target. */
	scroll-padding-top: var(--ogs-header-h);
}

/* Landing: Elementor owns the inside. The template contributes no padding so
   that full-bleed sections behave, which is what the design's hero needs. */
.ogs-landing {
	display: block;
}

/* Prose: the 720px reading measure from P12, on the light surface. */
.ogs-prose {
	background: var(--ogs-c-surface-light);
	color: var(--ogs-c-text-on-light);
	padding: var(--ogs-pad-block) var(--ogs-pad-inline);
}

.ogs-prose__shell {
	max-width: var(--ogs-prose-max);
	margin: 0 auto;
}

.ogs-prose h1 {
	font-family: var(--ogs-font-display);
	font-size: clamp(32px, 7vw, 54px);
	letter-spacing: 0.02em;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 var(--ogs-space-6);
	color: var(--ogs-c-on-primary);
}

.ogs-prose h2 {
	font-family: var(--ogs-font-display);
	font-size: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: var(--ogs-space-7) 0 var(--ogs-space-4);
	color: var(--ogs-c-on-primary);
}

.ogs-prose p,
.ogs-prose li {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ogs-c-text-on-light);
}

.ogs-prose a {
	color: var(--ogs-c-link-on-light);
	text-decoration: underline;
}

/* Confirmation and 404 share one centred shell. */
.ogs-confirm {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ogs-space-5);
	text-align: center;
	padding: var(--ogs-pad-block) var(--ogs-pad-inline);
}

.ogs-confirm h1 {
	font-family: var(--ogs-font-display);
	font-size: clamp(34px, 8vw, 64px);
	letter-spacing: 0.02em;
	line-height: 1.03;
	text-transform: uppercase;
	margin: 0;
	color: var(--ogs-c-primary);
}

.ogs-confirm p {
	margin: 0;
	max-width: 46ch;
	color: var(--ogs-c-text-secondary);
}

.ogs-confirm__mascot {
	width: 100%;
	max-width: 210px;
	height: auto;
	display: block;
}

.ogs-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-3);
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Reduced motion. The tokens above already zero the durations; these are the
   properties that animate independently of a token.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ogs-progress,
	.ogs-orderbar,
	.ogs-header,
	.ogs-skip-link {
		transition: none;
	}

	.ogs-orderbar {
		/* Still hidden when inactive, but it appears without travelling. */
		transform: none;
	}

	.ogs-orderbar:not(.is-visible) {
		visibility: hidden;
	}

	.ogs-orderbar.is-visible {
		visibility: visible;
	}
}

/* --------------------------------------------------------------------------
   Visually-hidden text.

   Defined here rather than relied on from Hello Elementor. Every accessible
   name in the five global components depends on this class, so inheriting it
   from a parent theme that could rename or drop it would make the whole
   accessibility layer contingent on someone else's release notes.

   The clip-path/1px technique, not display:none — display:none removes the
   text from the accessibility tree, which is the opposite of the intent.
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip-link-style reveal for anything visually hidden that must appear on
   focus. Applied to .screen-reader-text on focus so a hidden label attached to
   a focusable element does not trap a sighted keyboard user in silence. */
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* Admin-only notice when no menu is assigned. Visible to operators, never to
   visitors — the template only prints it for edit_theme_options. */
.ogs-nav__empty {
	max-width: var(--ogs-nav-max);
	margin: 0 auto;
	padding: var(--ogs-space-5);
	border: 1px dashed var(--ogs-c-hairline-primary-strong);
	border-radius: var(--ogs-radius-md);
	color: var(--ogs-c-text-secondary);
	font-size: 14px;
}

/* wp_nav_menu's own list in the footer needs the same reset the overlay gets. */
.ogs-footer__legal ul,
.ogs-footer__pages {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Opening hours: <dl> defaults would indent every time. */
.ogs-hours,
.ogs-hours dd {
	margin: 0;
}

.ogs-footer__contact address {
	font-style: normal;
	margin: 0;
}

.ogs-footer__brandlink {
	display: inline-block;
}

/* ==========================================================================
   P22 · Page sections

   The design ships every section as inline styles carrying raw hex values. Copied
   verbatim into page content those would be an EP-03 defect by this project's own
   acceptance criterion, which searches page data for raw colour values. So the
   structure moves here as token-based classes and the page content carries only
   semantics and copy — which is also what R-115 asks for, and what makes the copy
   editable in WordPress without touching styling.
   ========================================================================== */

.ogs-shell {
	max-width: var(--ogs-shell-max);
	margin: 0 auto;
}

.ogs-sec {
	padding: clamp(52px, 8vw, 110px) var(--ogs-overlay-pad);
}

.ogs-sec--dark {
	background: var(--ogs-c-bg);
}

/* --- Hero ---------------------------------------------------------------- */

.ogs-sec--hero {
	position: relative;
	min-height: 56vh;
	display: flex;
	align-items: flex-end;
	padding: clamp(40px, 7vw, 90px) var(--ogs-overlay-pad);
	overflow: hidden;
}

.ogs-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: ogsKenBurns 24s ease-in-out infinite alternate;
}

/* The design's gradient, expressed against the scrim token rather than repeated
   rgba literals. */
.ogs-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--ogs-c-hero-scrim);
}

.ogs-hero__inner {
	position: relative;
	max-width: var(--ogs-shell-max);
	margin: 0 auto;
	width: 100%;
}

.ogs-eyebrow {
	font-family: var(--ogs-font-display);
	font-size: 11px;
	letter-spacing: 0.28em;
	color: var(--ogs-c-primary);
}

.ogs-hero__title {
	margin: 14px 0 16px;
	font-family: var(--ogs-font-display);
	font-size: clamp(38px, 9vw, 92px);
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-hero__lede {
	margin: 0;
	max-width: 540px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ogs-c-heading-muted);
}

/* Ken Burns is decorative motion and must stop under a reduced-motion
   preference — handled in the reduced-motion block at the end of this file. */
@keyframes ogsKenBurns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* --- Perk cards ---------------------------------------------------------- */

.ogs-perks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin: 0 0 50px;
	padding: 0;
	list-style: none;
}

.ogs-perk {
	padding: 26px;
	border-radius: 20px;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-perk__title {
	margin: 0 0 var(--ogs-space-2);
	font-family: var(--ogs-font-display);
	font-size: 20px;
	text-transform: uppercase;
	color: var(--ogs-c-primary);
}

.ogs-perk__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

/* --- Notice -------------------------------------------------------------- */

.ogs-notice {
	padding: clamp(24px, 4vw, 40px);
	border-radius: 22px;
	background: var(--ogs-c-bg-elevated);
	border: var(--ogs-border-width) dashed var(--ogs-c-hairline-primary-strong);
	margin-bottom: 50px;
	text-align: center;
}

.ogs-notice__label {
	display: block;
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
	margin-bottom: var(--ogs-space-3);
}

.ogs-notice__text {
	margin: 0 auto;
	max-width: 520px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ogs-c-heading-muted);
}

.ogs-notice__meta {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--ogs-c-text-muted);
}

/* --- Form block ---------------------------------------------------------- */

.ogs-formblock {
	max-width: 640px;
	margin: 0 auto;
}

.ogs-formblock__title {
	margin: 0 0 10px;
	font-family: var(--ogs-font-display);
	font-size: clamp(26px, 5vw, 44px);
	text-transform: uppercase;
	color: var(--ogs-c-text);
	text-align: center;
}

.ogs-formblock__lede {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
	text-align: center;
}

/* --- Contact Form 7 ------------------------------------------------------
   CF7 emits its own markup; this styles it to the design without touching the
   plugin. Labels are VISIBLE, not placeholder-only: the design shows placeholders
   alone, but a placeholder disappears the moment typing starts and is not an
   accessible name. R-106 requires accessible labels, so the labels are added and
   the design's placeholders kept alongside them.
   -------------------------------------------------------------------------- */

.ogs-formblock .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 4vw, 32px);
	border-radius: 22px;
	background: var(--ogs-c-surface-alt);
	border: var(--ogs-border-width) solid var(--ogs-c-form-border);
}

.ogs-field {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-2);
	margin: 0;
}

.ogs-field label {
	font-size: 14px;
	color: var(--ogs-c-text-secondary);
}

.ogs-req {
	color: var(--ogs-c-primary);
}

.ogs-field__hint {
	font-size: 12px;
	color: var(--ogs-c-text-muted);
}

.ogs-formblock input[type="text"],
.ogs-formblock input[type="tel"],
.ogs-formblock input[type="email"],
.ogs-formblock input[type="date"],
.ogs-formblock input[type="number"],
.ogs-formblock select,
.ogs-formblock textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--ogs-control-min-height);
	padding: 15px 18px;
	border-radius: 12px;
	border: var(--ogs-border-width) solid var(--ogs-c-input-border);
	background: var(--ogs-c-bg-elevated);
	color: var(--ogs-c-text);
	font-family: var(--ogs-font-body);
	font-size: var(--ogs-control-font-size);
}

.ogs-formblock textarea {
	resize: vertical;
}

/*
 * iOS GIVES `input[type=date]` AN INTRINSIC WIDTH AND IGNORES `width: 100%`.
 *
 * Reported 2026-08-10 from a phone: the date field on `/contact/` was visibly
 * wider than every other control and pushed out of the column. Measured on
 * desktop the same field is 574px, exactly like its neighbours — which is why it
 * had never shown up here.
 *
 * Safari sizes a native date control from its own text and will not shrink below
 * that until the platform appearance is turned off. `min-width: 0` is the second
 * half: without it the intrinsic width still wins inside a grid or flex parent.
 *
 * `select` is deliberately NOT included. Removing its appearance would take the
 * native chevron with it, and the chevron is the only thing telling a visitor
 * that the control opens.
 */
.ogs-formblock input[type="date"],
.ogs-formblock input[type="time"],
.ogs-config .ogs-field input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
}

/*
 * THE CONFIGURATOR'S CONTACT FIELDS WERE WHITE BECAUSE NOTHING STYLED THEM.
 *
 * Every field rule in this theme is scoped to `.ogs-formblock`, which is the
 * wrapper the Contact Form 7 blocks carry. The party configurator is hand-written
 * markup in `template-parties.php` and sits in `.ogs-config` — no `.ogs-formblock`
 * anywhere in that template. So its inputs fell through to the browser default:
 * white box, no border, on a black page.
 *
 * Scoped to `.ogs-field` inside the configurator rather than to every control in
 * it, because `.ogs-config__num` and `.ogs-config__range` are the guest-count
 * controls and have a deliberate compact size of their own that a blanket rule
 * would flatten.
 */
.ogs-config .ogs-field input,
.ogs-config .ogs-field select,
.ogs-config .ogs-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--ogs-control-min-height);
	padding: 15px 18px;
	border-radius: 12px;
	border: var(--ogs-border-width) solid var(--ogs-c-input-border);
	background: var(--ogs-c-bg-elevated);
	color: var(--ogs-c-text);
	font-family: var(--ogs-font-body);
	font-size: var(--ogs-control-font-size);
}

.ogs-config .ogs-field textarea {
	resize: vertical;
}

.ogs-config .ogs-field ::placeholder {
	color: var(--ogs-c-text-muted);
	opacity: 1;
}

/*
 * THE GUEST-COUNT INPUT WAS SPANNING THE WHOLE ROW, AND IT IS THE SAME KIND OF
 * LOSS AS THE INVISIBLE FILTER PILL.
 *
 * `.ogs-config__num` asks for `width: 6rem` and scores (0,1,0). The parent theme
 * carries a blanket `input[type="number"], … { width: 100% }` at (0,1,1), which
 * wins — so the compact number box beside the slider rendered as a full-width
 * field. Found while fixing the fields around it; not reported, and visible on
 * the same form.
 *
 * Re-stated at (0,2,0) so the component beats the blanket rather than relying on
 * source order, which a future build step could reorder.
 */
.ogs-config input.ogs-config__num {
	width: 6rem;
}

.ogs-formblock input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	padding: 13px;
	border-radius: 12px;
	border: var(--ogs-border-width) dashed var(--ogs-c-input-border-dashed);
	background: var(--ogs-c-bg-elevated);
	color: var(--ogs-c-text-secondary);
	font-family: var(--ogs-font-body);
	font-size: 14px;
}

.ogs-formblock ::placeholder {
	color: var(--ogs-c-text-muted);
	opacity: 1;
}

.ogs-form__submit {
	margin: 0;
}

.ogs-formblock input[type="submit"] {
	width: 100%;
	min-height: var(--ogs-control-min-height);
	padding: 17px;
	border-radius: 999px;
	border: none;
	background: var(--ogs-c-primary);
	color: var(--ogs-c-on-primary);
	font-family: var(--ogs-font-display);
	font-size: 15px;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: background-color var(--ogs-motion-colour) var(--ogs-motion-easing);
}

.ogs-formblock input[type="submit"]:hover,
.ogs-formblock input[type="submit"]:focus-visible {
	background: var(--ogs-c-primary-hover);
}

.ogs-form__note {
	margin: 0;
	font-size: 12px;
	color: var(--ogs-c-text-muted);
	text-align: center;
}

/* CF7 validation output. The per-field message is what screen readers announce
   via aria-describedby, so it must be visible and legible, not decorative. */
.ogs-formblock .wpcf7-not-valid-tip {
	color: var(--ogs-c-primary-hover);
	font-size: 13px;
}

.ogs-formblock .wpcf7-not-valid {
	border-color: var(--ogs-c-primary-hover);
}

.ogs-formblock .wpcf7-response-output {
	margin: 0;
	padding: var(--ogs-space-4);
	border-radius: 12px;
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary-strong);
	color: var(--ogs-c-text);
	font-size: 15px;
}

/* --- Reduced motion for P22 sections ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ogs-hero__bg {
		animation: none;
	}
}

/* ==========================================================================
   P22 batch 2 — Home, Povestea noastră, Cunoaște echipa
   ========================================================================== */

.ogs-sec__title {
	margin: 14px 0 16px;
	font-family: var(--ogs-font-display);
	font-size: clamp(26px, 5vw, 52px);
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-sec__lede {
	margin: 0 0 var(--ogs-space-5);
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

.ogs-note {
	margin: var(--ogs-space-3) 0 0;
	font-size: 13px;
	color: var(--ogs-c-text-muted);
}

.ogs-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-3);
	margin: var(--ogs-space-5) 0 0;
}

.ogs-hero--home { min-height: 86vh; }
.ogs-hero--story { min-height: 62vh; }

/* --- Day / night cards ---------------------------------------------------- */

.ogs-daynight {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

.ogs-dn {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: flex-end;
	border-radius: 22px;
	overflow: hidden;
	background: var(--ogs-c-surface);
}

.ogs-dn img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogs-dn__scrim {
	position: absolute;
	inset: 0;
	background: var(--ogs-c-hero-scrim);
}

.ogs-dn__body {
	position: relative;
	padding: clamp(20px, 4vw, 32px);
}

.ogs-dn__title {
	margin: var(--ogs-space-2) 0;
	font-family: var(--ogs-font-display);
	font-size: clamp(22px, 3.4vw, 30px);
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-dn__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

/* --- Marquee -------------------------------------------------------------- */

.ogs-marquee {
	display: flex;
	gap: 2rem;
	overflow: hidden;
	padding: var(--ogs-space-5) 0;
	border-block: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
	background: var(--ogs-c-bg-elevated);
}

.ogs-marquee__run {
	display: flex;
	flex: none;
	gap: 2rem;
	align-items: center;
	white-space: nowrap;
	font-family: var(--ogs-font-display);
	font-size: clamp(16px, 2.4vw, 26px);
	letter-spacing: 0.12em;
	color: var(--ogs-c-primary);
	animation: ogsMarquee 26s linear infinite;
}

@keyframes ogsMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* --- Menu categories and food grid --------------------------------------- */

/*
 * The category buttons had NO top margin, so they sat flush against whatever
 * preceded them — on the Club page, the seven editorial theme cards. Reported by
 * the operator on 2026-08-07.
 *
 * `--ogs-space-6` above is not a chosen number: it is what `.ogs-themes` puts
 * above itself, so the three lists in that section — themes, categories, posts —
 * now step by the same interval instead of two of them touching.
 */
.ogs-cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-2);
	margin: var(--ogs-space-6) 0;
	padding: 0;
	list-style: none;
}

.ogs-cats li {
	padding: 9px 16px;
	border-radius: 999px;
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary-strong);
	font-family: var(--ogs-font-display);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--ogs-c-primary);
}

.ogs-foodgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin-bottom: var(--ogs-space-6);
}

.ogs-foodgrid img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 18px;
	display: block;
}

.ogs-stores {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-3);
}

/* Store badges are NOT links. The design's own note says the links are to be
   replaced when the app is published, and a badge that looks like a download
   button but goes nowhere is the deceptive dead link R-116 forbids. */
.ogs-store {
	display: inline-flex;
	flex-direction: column;
	padding: 10px 20px;
	border-radius: 14px;
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary-strong);
	background: var(--ogs-c-surface);
}

.ogs-store__sup {
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--ogs-c-text-muted);
}

.ogs-store__name {
	font-family: var(--ogs-font-display);
	font-size: 17px;
	color: var(--ogs-c-primary);
}

/* --- Special of the day --------------------------------------------------- */

.ogs-special {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ogs-space-6);
	align-items: center;
}

.ogs-special__day {
	margin: 0;
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.28em;
	color: var(--ogs-c-primary);
}

.ogs-special__dish {
	margin: var(--ogs-space-2) 0 var(--ogs-space-3);
	font-family: var(--ogs-font-brand);
	font-weight: 700;
	font-size: clamp(24px, 4vw, 38px);
	color: var(--ogs-c-text);
}

.ogs-special__mascot img {
	width: 100%;
	max-width: 300px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* --- Events --------------------------------------------------------------- */

.ogs-events {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-event {
	border-radius: 20px;
	overflow: hidden;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-event img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.ogs-event__body { padding: 22px; }

.ogs-event__when {
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
}

.ogs-event__tag {
	margin-left: var(--ogs-space-2);
	font-size: 11px;
	color: var(--ogs-c-text-muted);
}

.ogs-event__title {
	margin: var(--ogs-space-2) 0;
	font-family: var(--ogs-font-display);
	font-size: 22px;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-event__desc {
	margin: 0 0 var(--ogs-space-3);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ogs-c-text-secondary);
}

.ogs-event__time {
	font-size: 13px;
	color: var(--ogs-c-text-muted);
}

/* --- Hall of Fame wall ---------------------------------------------------- */

.ogs-wall {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.ogs-wall img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 18px;
	display: block;
}

.ogs-wall__slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ogs-space-2);
	aspect-ratio: 1;
	border-radius: 18px;
	border: var(--ogs-border-width) dashed var(--ogs-c-hairline-primary-strong);
}

.ogs-wall__plus {
	font-family: var(--ogs-font-display);
	font-size: 42px;
	color: var(--ogs-c-primary);
}

.ogs-wall__label {
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-text-muted);
}

/* --- Reviews -------------------------------------------------------------- */

.ogs-rating {
	display: flex;
	align-items: baseline;
	gap: var(--ogs-space-3);
	margin: 0 0 var(--ogs-space-5);
}

.ogs-rating__score {
	font-family: var(--ogs-font-display);
	font-size: clamp(38px, 6vw, 62px);
	color: var(--ogs-c-primary);
}

.ogs-rating__label {
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-text-muted);
}

.ogs-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-review {
	padding: 26px;
	border-radius: 20px;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-review__stars {
	color: var(--ogs-c-primary);
	font-size: 15px;
	letter-spacing: 0.1em;
}

.ogs-review__text {
	margin: var(--ogs-space-3) 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

.ogs-review__name {
	font-family: var(--ogs-font-display);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--ogs-c-heading-muted);
}

/* --- Story page ----------------------------------------------------------- */

.ogs-prose-narrow { max-width: var(--ogs-prose-max); }

.ogs-prose-narrow p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--ogs-c-text-secondary);
}

.ogs-lead-para {
	font-size: clamp(19px, 2.6vw, 24px) !important;
	line-height: 1.5 !important;
	color: var(--ogs-c-heading-muted) !important;
}

.ogs-pullquote {
	margin-top: var(--ogs-space-6);
	padding-left: var(--ogs-space-5);
	border-left: 3px solid var(--ogs-c-primary);
	font-family: var(--ogs-font-brand);
	font-style: italic;
	font-size: clamp(19px, 2.6vw, 26px) !important;
	color: var(--ogs-c-text) !important;
}

.ogs-founder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--ogs-space-6);
	align-items: center;
	margin-bottom: var(--ogs-space-8);
}

.ogs-founder__photo img {
	width: 100%;
	height: auto;
	border-radius: 22px;
	display: block;
}

.ogs-founder__quote {
	margin: 0 0 var(--ogs-space-4);
	font-family: var(--ogs-font-brand);
	font-style: italic;
	font-size: clamp(19px, 2.4vw, 26px);
	color: var(--ogs-c-primary);
}

.ogs-values {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin: 0 0 var(--ogs-space-8);
	padding: 0;
	list-style: none;
}

.ogs-value {
	padding: 26px;
	border-radius: 20px;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-value__title {
	margin: 0 0 var(--ogs-space-2);
	font-family: var(--ogs-font-display);
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--ogs-c-primary);
}

.ogs-value__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

.ogs-mascot-story {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ogs-space-6);
	align-items: center;
}

.ogs-mascot-story__img img {
	width: 100%;
	max-width: 300px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.ogs-closer { text-align: center; }

.ogs-closer__title {
	margin: 0 auto var(--ogs-space-4);
	font-family: var(--ogs-font-display);
	font-size: clamp(28px, 6vw, 62px);
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-closer__kicker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ogs-space-4);
	margin: 0 0 var(--ogs-space-4);
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
}

.ogs-closer .ogs-cta-row { justify-content: center; }
.ogs-closer .ogs-sec__lede { margin-inline: auto; }

/* --- Team ----------------------------------------------------------------- */

.ogs-team-intro .ogs-sec__lede { max-width: 70ch; }

.ogs-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-member {
	display: flex;
	flex-direction: column;
	border-radius: 22px;
	overflow: hidden;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-member__photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* The design's own treatment for a member with no supplied portrait. It is
   reproduced rather than filled with a substitute photograph. */
.ogs-member__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ogs-space-2);
	aspect-ratio: 3 / 2;
	background: var(--ogs-c-bg-elevated);
	border-bottom: var(--ogs-border-width) dashed var(--ogs-c-hairline-primary-strong);
}

.ogs-member__flag {
	font-family: var(--ogs-font-display);
	font-size: 24px;
	letter-spacing: 0.14em;
	color: var(--ogs-c-primary);
}

.ogs-member__pending {
	font-family: var(--ogs-font-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	line-height: 1.6;
	text-align: center;
	color: var(--ogs-c-text-muted);
}

.ogs-member__body { padding: 24px; }

.ogs-member__role {
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
}

.ogs-member__name {
	margin: var(--ogs-space-2) 0 var(--ogs-space-1);
	font-family: var(--ogs-font-display);
	font-size: 26px;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-member__from {
	display: block;
	margin-bottom: var(--ogs-space-3);
	font-size: 13px;
	color: var(--ogs-c-text-muted);
}

.ogs-member__bio {
	margin: 0 0 var(--ogs-space-4);
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

.ogs-member__power {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-1);
	margin: 0;
	font-size: 14px;
	color: var(--ogs-c-heading-muted);
}

.ogs-member__powerlabel {
	font-family: var(--ogs-font-display);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
}

.ogs-member__quote {
	margin: var(--ogs-space-4) 0 0;
	font-family: var(--ogs-font-brand);
	font-style: italic;
	font-size: 16px;
	color: var(--ogs-c-heading-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ogs-marquee__run { animation: none; }
}

/* ==========================================================================
   P22 batch 3 — Hall of Fame, Petreceri & Catering, A-MAÍZ-ING Club
   ========================================================================== */

/* A CTA with no approved destination. It keeps the design's visual treatment but
   is NOT an anchor, so it cannot look like a working download. R-116: a control
   that appears functional while pointing nowhere is the deceptive dead link. */
.ogs-btn--static {
	cursor: default;
	opacity: 0.85;
}

/* --- Hall of Fame · challenge bundles ------------------------------------- */

.ogs-bundles,
.ogs-winners,
.ogs-packages,
.ogs-extras,
.ogs-benefits,
.ogs-steps {
	display: grid;
	gap: 18px;
	margin: 0 0 var(--ogs-space-7);
	padding: 0;
	list-style: none;
}

.ogs-bundles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.ogs-bundle {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	overflow: hidden;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-bundle img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.ogs-bundle__body { padding: 24px; }

.ogs-bundle__level {
	font-family: var(--ogs-font-display);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
}

.ogs-bundle__name {
	margin: var(--ogs-space-2) 0 var(--ogs-space-1);
	font-family: var(--ogs-font-display);
	font-size: 24px;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-bundle__people {
	display: block;
	margin-bottom: var(--ogs-space-3);
	font-size: 13px;
	color: var(--ogs-c-text-muted);
}

.ogs-bundle__items {
	margin: 0 0 var(--ogs-space-4);
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

.ogs-bundle__prize {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-1);
	margin: 0;
	padding-top: var(--ogs-space-3);
	border-top: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
	font-size: 14px;
	color: var(--ogs-c-heading-muted);
}

.ogs-bundle__prizelabel {
	font-family: var(--ogs-font-display);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
}

/* --- Winners gallery ------------------------------------------------------ */

.ogs-winners { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.ogs-winner {
	border-radius: 18px;
	overflow: hidden;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-winner img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

.ogs-winner__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
}

.ogs-winner__name {
	font-family: var(--ogs-font-display);
	font-size: 17px;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-winner__badge {
	font-size: 12px;
	color: var(--ogs-c-primary);
}

.ogs-winner__date {
	font-size: 12px;
	color: var(--ogs-c-text-muted);
}

.ogs-winner--slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ogs-space-2);
	min-height: 200px;
	background: transparent;
	border-style: dashed;
	border-color: var(--ogs-c-hairline-primary-strong);
}

/* --- Catering packages ---------------------------------------------------- */

.ogs-packages { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.ogs-package {
	padding: 28px;
	border-radius: 22px;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
}

.ogs-package__name {
	margin: 0 0 var(--ogs-space-2);
	font-family: var(--ogs-font-display);
	font-size: 26px;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-package__price {
	display: block;
	font-family: var(--ogs-font-display);
	font-size: 18px;
	color: var(--ogs-c-primary);
}

.ogs-package__people {
	display: block;
	margin-bottom: var(--ogs-space-4);
	font-size: 13px;
	color: var(--ogs-c-text-muted);
}

.ogs-package__list {
	margin: 0;
	padding-left: 1.1em;
	font-size: 15px;
	line-height: 1.8;
	color: var(--ogs-c-text-secondary);
}

.ogs-extras { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ogs-extra {
	padding: 24px;
	border-radius: 18px;
	background: var(--ogs-c-bg-elevated);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-extra__title {
	margin: 0 0 var(--ogs-space-2);
	font-family: var(--ogs-font-display);
	font-size: 15px;
	letter-spacing: 0.16em;
	color: var(--ogs-c-primary);
}

.ogs-extra__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

.ogs-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.ogs-gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* --- Club ---------------------------------------------------------------- */

/*
 * The note under the hero CTA had NO rule at all, so it inherited the reset's
 * zero margin and sat flush against the button while the lede above it stood a
 * full step away. Added 2026-08-07 on operator instruction: the same step, so the
 * button is separated from its two texts by an equal gap on each side.
 *
 * `--ogs-space-5` is not a new number — it is exactly what `.ogs-cta-row` puts
 * above itself, which is what sets the gap above the button. The symmetry is
 * therefore by construction, not by a matched literal that could drift.
 */
.ogs-club-hero__note {
	margin: var(--ogs-space-5) 0 0;
}

.ogs-club-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--ogs-space-6);
	align-items: center;
}

.ogs-club-hero__mascot img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.ogs-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ogs-step {
	padding: 26px;
	border-radius: 20px;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-step__num {
	font-family: var(--ogs-font-display);
	font-size: 34px;
	color: var(--ogs-c-primary);
}

.ogs-step__title {
	margin: var(--ogs-space-2) 0;
	font-family: var(--ogs-font-display);
	font-size: 20px;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-step__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

.ogs-benefits { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ogs-benefit {
	padding: 24px;
	border-radius: 18px;
	background: var(--ogs-c-bg-elevated);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
}

.ogs-benefit__title {
	margin: 0 0 var(--ogs-space-2);
	font-family: var(--ogs-font-display);
	font-size: 17px;
	text-transform: uppercase;
	color: var(--ogs-c-primary);
}

.ogs-benefit__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
}

/* ==========================================================================
   P22 batch 4 — Evenimente, Blog index
   ========================================================================== */

/* Full calendar cards. Scoped to --full so the three-up preview grid already
   verified on Home is not altered by this batch. */
.ogs-events--full { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.ogs-event__media {
	position: relative;
}

.ogs-event__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.ogs-event__day {
	position: absolute;
	left: 16px;
	bottom: 16px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--ogs-c-primary);
	color: var(--ogs-c-on-primary);
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.16em;
}

.ogs-event__meta {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--ogs-c-primary);
}

.ogs-events--full .ogs-event__title {
	margin: var(--ogs-space-2) 0;
	font-family: var(--ogs-font-display);
	font-size: 24px;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-events--full .ogs-btn {
	margin-top: var(--ogs-space-3);
}

/* --- Blog index ----------------------------------------------------------- */

.ogs-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-post {
	display: flex;
	flex-direction: column;
	border-radius: 22px;
	overflow: hidden;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-post img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.ogs-post__body {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-2);
	padding: 24px;
	flex: 1;
}

.ogs-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-2);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--ogs-c-primary);
}

.ogs-post__date { color: var(--ogs-c-text-muted); }

.ogs-post__title {
	margin: 0;
	font-family: var(--ogs-font-display);
	font-size: 22px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

/* The whole card is clickable, but only the title is the link — a card-wide
   anchor wrapping a heading gives assistive technology one enormous link name.
   The title carries the accessible name; ::after stretches its hit area. */
.ogs-post__title a {
	color: inherit;
	text-decoration: none;
}

.ogs-post__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ogs-post { position: relative; }

.ogs-post__title a:hover,
.ogs-post__title a:focus-visible { color: var(--ogs-c-primary); }

.ogs-post__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ogs-c-text-secondary);
	flex: 1;
}

.ogs-post__more {
	align-self: flex-start;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--ogs-c-primary);
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--ogs-c-primary);
}

/* ==========================================================================
   P22 batch 5 — article template, FAQ, legal pages
   ========================================================================== */

/* --- Single article ------------------------------------------------------- */

.ogs-hero--article { min-height: 58vh; }

.ogs-article__back a {
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--ogs-c-primary);
}

.ogs-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-2);
	margin: var(--ogs-space-4) 0 0;
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--ogs-c-heading-muted);
}

.ogs-article__cat { color: var(--ogs-c-primary); }

.ogs-article__title { margin-top: var(--ogs-space-3); }

/* The P12 reading measure. Long-form body copy at the 1240px shell would run to
   a line length nobody finishes. */
.ogs-article__body {
	max-width: var(--ogs-prose-max);
	margin: 0 auto;
}

.ogs-article__lede {
	margin: 0 0 var(--ogs-space-6);
	font-size: clamp(18px, 2.4vw, 22px);
	line-height: 1.55;
	color: var(--ogs-c-heading-muted);
}

.ogs-article__body p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--ogs-c-text-secondary);
}

.ogs-article__body h2 {
	margin: var(--ogs-space-7) 0 var(--ogs-space-3);
	font-family: var(--ogs-font-display);
	font-size: clamp(22px, 3vw, 30px);
	text-transform: uppercase;
	color: var(--ogs-c-text);
}

.ogs-article__body ul,
.ogs-article__body ol {
	padding-left: 1.2em;
	font-size: 17px;
	line-height: 1.8;
	color: var(--ogs-c-text-secondary);
}

.ogs-article__body blockquote {
	margin: var(--ogs-space-6) 0;
	padding-left: var(--ogs-space-5);
	border-left: 3px solid var(--ogs-c-primary);
	font-family: var(--ogs-font-brand);
	font-style: italic;
	font-size: clamp(19px, 2.6vw, 24px);
	color: var(--ogs-c-text);
}

.ogs-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ogs-radius-lg);
}

/* Extra bottom room so the sticky order bar never covers the byline. */
.ogs-article__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-4);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--ogs-space-7);
	padding: var(--ogs-space-5) 0 var(--ogs-space-8);
	border-top: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-article__byline {
	font-family: var(--ogs-font-display);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--ogs-c-heading-muted);
}

/* --- FAQ ------------------------------------------------------------------ */

.ogs-faq__group {
	margin-bottom: var(--ogs-space-7);
}

.ogs-faq__grouptitle {
	margin: 0 0 var(--ogs-space-4);
	font-family: var(--ogs-font-display);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-primary);
}

.ogs-faq__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

.ogs-faq__item {
	border-bottom: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}

/* <details>/<summary>: the answer stays in the DOM whether open or closed, which
   is R-110. The design removes it, and that is the one behaviour deliberately
   not reproduced. Native elements also give keyboard operation and expanded
   state for free — no ARIA is added, because adding it here would override
   correct native semantics. */
.ogs-faq__q {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ogs-space-4);
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ogs-c-text);
}

.ogs-faq__q::-webkit-details-marker { display: none; }

.ogs-faq__q::after {
	content: '+';
	flex: none;
	font-family: var(--ogs-font-display);
	font-size: 24px;
	line-height: 1;
	color: var(--ogs-c-primary);
	transition: transform var(--ogs-motion-transform) var(--ogs-motion-easing);
}

.ogs-faq__item[open] .ogs-faq__q::after {
	content: '−';
}

.ogs-faq__q:hover { color: var(--ogs-c-primary); }

.ogs-faq__a {
	margin: 0;
	padding: 0 0 22px;
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ogs-c-text-secondary);
}

/* --- Legal pages ---------------------------------------------------------- */

.ogs-legal__updated {
	margin: 0 0 var(--ogs-space-6);
	font-size: 14px;
	color: var(--ogs-c-text-muted-on-light);
}

.ogs-prose ul {
	padding-left: 1.2em;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ogs-c-text-on-light);
}

.ogs-prose li { margin-bottom: var(--ogs-space-2); }

/* Long URLs and legal references must not push the page sideways. */
.ogs-prose a { word-break: break-word; }

/* Room below the last clause so the sticky order bar cannot cover it. */
.ogs-prose__shell { padding-bottom: var(--ogs-space-8); }

@media (prefers-reduced-motion: reduce) {
	.ogs-faq__q::after { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Events and vacancies — the operator-managed content types
 *
 * No new visual vocabulary. Card, hero, shell, measure, eyebrow and button are
 * the components already in this file; what follows is the small amount of glue
 * the two detail pages and the vacancy list need, built from the same tokens.
 * Every colour is a token, per EP-03.
 * ------------------------------------------------------------------------ */

/* The event card's title is now a link. It must not look like a link inside the
   card — the card already reads as one — so it inherits and only reveals itself
   on hover and focus, like the blog card titles do. */
.ogs-event__title a {
	color: inherit;
	text-decoration: none;
}
.ogs-event__title a:hover,
.ogs-event__title a:focus-visible { color: var(--ogs-c-primary); }

/* Detail-page hero. Same shape as every other hero; the modifier exists so the
   two detail pages can diverge later without touching the base. */
.ogs-hero--event,
.ogs-hero--job { min-height: clamp(340px, 46vh, 520px); }

.ogs-eventpage__back,
.ogs-jobpage__back {
	margin: 0 0 var(--ogs-space-3);
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.18em;
}
.ogs-eventpage__back a,
.ogs-jobpage__back a {
	color: var(--ogs-c-primary);
	text-decoration: none;
}
.ogs-eventpage__back a:hover,
.ogs-eventpage__back a:focus-visible,
.ogs-jobpage__back a:hover,
.ogs-jobpage__back a:focus-visible { color: var(--ogs-c-primary-hover); }

/* The facts row. auto-fit means one column on a phone and a row on a desktop
   with no breakpoint, which is how the rest of this stylesheet behaves. */
.ogs-eventfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ogs-space-4);
	margin: 0 0 var(--ogs-space-7);
	padding: 0 0 var(--ogs-space-6);
	list-style: none;
	border-bottom: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}
.ogs-eventfact {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-1);
	min-width: 0;
}
.ogs-eventfact__label {
	font-family: var(--ogs-font-display);
	font-size: 11px;
	letter-spacing: 0.24em;
	color: var(--ogs-c-primary);
}
.ogs-eventfact__value {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ogs-c-text);
	/* Long location names and 24-hour ranges must wrap rather than push the grid
	   wider than the viewport. */
	overflow-wrap: anywhere;
}
.ogs-eventfact__sub {
	display: block;
	font-size: 14px;
	color: var(--ogs-c-text-secondary);
}

.ogs-eventpage__body,
.ogs-jobpage__body {
	max-width: var(--ogs-prose-max);
}
.ogs-eventpage__body p,
.ogs-jobpage__body p {
	margin: 0 0 var(--ogs-space-4);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ogs-c-text-secondary);
}
.ogs-eventpage__subtitle,
.ogs-jobpage__subtitle {
	margin: var(--ogs-space-7) 0 var(--ogs-space-3);
	font-family: var(--ogs-font-display);
	font-size: clamp(20px, 3vw, 28px);
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--ogs-c-text);
}
.ogs-eventpage__practical,
.ogs-joblist {
	margin: 0 0 var(--ogs-space-5);
	padding: 0 0 0 var(--ogs-space-5);
	list-style: disc;
}
.ogs-eventpage__practical li,
.ogs-joblist li {
	margin: 0 0 var(--ogs-space-2);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ogs-c-text-secondary);
}

/* Vacancy status. Colour alone never carries the meaning — the label says it in
   words, which is why there is no icon and no bare dot. */
.ogs-jobstatus {
	display: inline-block;
	margin: 0 0 var(--ogs-space-5);
	padding: var(--ogs-space-1) var(--ogs-space-3);
	border-radius: 999px;
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
	font-family: var(--ogs-font-display);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ogs-c-primary);
}
.ogs-jobstatus--paused,
.ogs-jobstatus--closed {
	border-color: var(--ogs-c-hairline-light);
	color: var(--ogs-c-text-muted);
}

/* Vacancy list on the Cariere page. Same card grammar as the event list. */
.ogs-jobs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--ogs-space-4);
	margin: var(--ogs-space-5) 0 0;
	padding: 0;
	list-style: none;
}
.ogs-job {
	border-radius: var(--ogs-radius-lg);
	overflow: hidden;
	background: var(--ogs-c-surface);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
}
.ogs-job__body { padding: var(--ogs-space-5); }
.ogs-job__meta {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--ogs-c-primary);
	overflow-wrap: anywhere;
}
.ogs-job__title {
	margin: var(--ogs-space-2) 0;
	font-family: var(--ogs-font-display);
	font-size: 24px;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--ogs-c-text);
}
.ogs-job__title a {
	color: inherit;
	text-decoration: none;
}
.ogs-job__title a:hover,
.ogs-job__title a:focus-visible { color: var(--ogs-c-primary); }
.ogs-job__desc {
	margin: 0 0 var(--ogs-space-4);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ogs-c-text-secondary);
}
.ogs-job__more { margin: 0; }

/* The vacancy list shares the Cariere page's existing shell with the perks and
   the form, so it needs its own vertical rhythm rather than a section's padding. */
.ogs-jobsblock { margin: var(--ogs-space-8) 0; }
.ogs-jobsblock .ogs-sec__title { margin-top: var(--ogs-space-2); }

/* The semantic state badge. Cancelled, postponed and completed print it; the
   ordinary states print nothing, so a normal card is unchanged. Colour never
   carries the meaning — the word does. */
.ogs-event__state {
	display: inline-block;
	margin: 0 0 var(--ogs-space-2);
	padding: 2px var(--ogs-space-2);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light);
	border-radius: 999px;
	font-family: var(--ogs-font-display);
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--ogs-c-text-muted);
}
.ogs-event__state--hero {
	margin-bottom: var(--ogs-space-3);
	border-color: var(--ogs-c-hairline-primary);
	color: var(--ogs-c-primary);
}

/* ---------------------------------------------------------------------------
 * Brand marks and store badges
 *
 * The social control keeps its existing pill: same border token, same radius,
 * same minimum height. Only its contents changed from two letters to a mark, so
 * the pill becomes square rather than oblong and the icon is optically centred.
 * ------------------------------------------------------------------------ */

.ogs-social a {
	/* Square now that the content is a mark rather than two letters. The minimum
	   is the shared control height, so the touch target does not shrink. */
	width: var(--ogs-control-min-height);
	padding: 0;
	color: var(--ogs-c-text);
}
.ogs-social__icon {
	width: 18px;
	height: 18px;
	display: block;
	/* currentColor, so hover and focus keep using the existing colour rules and
	   the mark is never recoloured independently of its control. */
	fill: currentColor;
}
.ogs-social a:hover,
.ogs-social a:focus-visible { color: var(--ogs-c-primary); }

/* The article footer shows the same control at a smaller scale. */
.ogs-article__footer .ogs-social__icon { width: 16px; height: 16px; }

/* --- Team panel -----------------------------------------------------------
 * Replaces the "PORTRET DE ADĂUGAT" note. It is deliberately abstract: initials
 * and the supplied flag, on the brand surface. Nothing here can be mistaken for a
 * photograph of the person, and nothing implies one is coming. */
.ogs-member__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ogs-space-1);
	aspect-ratio: 3 / 2;
	background:
		radial-gradient(120% 90% at 50% 0%, var(--ogs-c-primary-wash), transparent 70%),
		var(--ogs-c-bg-elevated);
	border-bottom: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
}
.ogs-member__initials {
	font-family: var(--ogs-font-display);
	font-size: clamp(40px, 7vw, 60px);
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--ogs-c-primary);
}
.ogs-member__panel .ogs-member__flag {
	font-size: 12px;
	letter-spacing: 0.24em;
	color: var(--ogs-c-text-muted);
}

/* --- Store badges ---------------------------------------------------------
 * Official artwork, unaltered. Height is fixed and width follows the natural
 * aspect ratio, so neither badge is stretched or cropped. The gap provides the
 * clear space each brand requires. */
.ogs-appbadges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ogs-space-4);
}
.ogs-appbadge {
	display: inline-flex;
	align-items: center;
	/* Clear space around the mark, inside the element rather than relying on the
	   neighbour's margin. */
	padding: 2px;
	border-radius: var(--ogs-radius-sm);
}
.ogs-appbadge__img {
	display: block;
	height: 44px;
	width: auto;      /* natural aspect ratio — never stretched */
	max-width: 100%;
}
/* The two official badges are drawn to different proportions; matching their
   optical height rather than their box height keeps them looking like a pair. */
.ogs-appbadge__img--gplay { height: 58px; margin: -7px 0; }

/* Live badges get the site's focus ring and a restrained hover. A pending badge
   gets NEITHER — no hover, no focus, no pointer — because nothing there is
   actionable and suggesting otherwise is the deception this avoids. */
.ogs-appbadge--live:focus-visible { outline: var(--ogs-focus-width) solid var(--ogs-focus-on-dark); outline-offset: var(--ogs-focus-offset); }
.ogs-appbadge--live:hover { opacity: 0.88; }
.ogs-appbadge--pending { cursor: default; }

@media (prefers-reduced-motion: reduce) {
	.ogs-appbadge--live:hover { opacity: 1; }
}

/* --- Maizito animat -------------------------------------------------------- */

/*
 * The animated mascot, layered over the static one it replaces.
 *
 * The poster <img> stays in the flow and keeps defining the box. The stage is
 * absolutely positioned on top of it and given the same constraints, so the two
 * occupy exactly the same rectangle: 600x750 and 748x935 are both 4:5, and the
 * aspect-ratio below reproduces that. Nothing reflows when the swap happens,
 * which is why this component contributes no CLS rather than a small amount.
 *
 * Geometry, depths and origins come from the operator-supplied source file. The
 * pixel values inside the stage are that file's canvas and are not the site's
 * spacing scale — they are artwork coordinates, and the whole stage is scaled
 * down as one unit by --ogs-mz-scale, set from the rendered width in JS.
 */

.ogs-has-maizito { position: relative; }

/* The poster fades out only once the stage has actually decoded and attached.
   Until then it is the visible mascot, and if the upgrade never happens it
   simply stays — the failure mode is "no animation", never "no mascot". */
.ogs-has-maizito > img { transition: opacity 180ms linear; }
.ogs-has-maizito.is-swapped > img { opacity: 0; }

.ogs-maizito {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	max-width: var(--ogs-mz-max, 300px);
	aspect-ratio: 748 / 935;
	perspective: 1500px;
	perspective-origin: 50% 40%;
	opacity: 0;
	transition: opacity 180ms linear;
	pointer-events: none;
}

.ogs-maizito.is-ready { opacity: 1; }

.ogs-maizito__scale {
	position: absolute;
	top: 0;
	left: 0;
	width: 748px;
	height: 935px;
	transform-origin: top left;
	transform: scale(var(--ogs-mz-scale, 1));
}

.ogs-maizito__scale,
.ogs-maizito__move,
.ogs-maizito__flip,
.ogs-maizito__bob,
.ogs-maizito__lyr { transform-style: preserve-3d; }

.ogs-maizito__move,
.ogs-maizito__flip,
.ogs-maizito__bob,
.ogs-maizito__lyr { position: absolute; inset: 0; }

.ogs-maizito__flip { transform-origin: 50% 100%; }
.ogs-maizito__bob  { transform-origin: 50% 92%; }

/*
 * The layer images opt out of the placement rules that style the poster.
 *
 * The section already carries `.ogs-special__mascot img { max-width: 300px }`,
 * written for the single 600px-wide poster. That rule also matches the five
 * layer images, and the body layer is 385px wide — wider than the 300px cap. It
 * was being clamped to 300 while its height stayed at 604, so the torso rendered
 * 22% too narrow while the legs, arm and glasses stayed the right size: a subtly
 * deformed mascot.
 *
 * This was not visible in review and was not reasoned out. It showed up as a
 * -34.09px width delta against the source geometry at a point where every other
 * layer matched to within the 1-3px the 3D parallax accounts for. Layer sizes
 * are set inline in pixels from the artwork's own canvas, so nothing may cap
 * them.
 */
.ogs-maizito img {
	position: absolute;
	max-width: none;
	min-width: 0;
	margin: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* will-change on the five moving layers only. Applying it to every descendant,
   as the source does, promotes the static wrappers to their own layers too and
   costs memory on mobile for nothing. */
.ogs-maizito__lyr > img { will-change: transform; }

.ogs-maizito__shadow {
	position: absolute;
	left: 50%;
	bottom: -14px;
	width: 430px;
	height: 86px;
	margin-left: -215px;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 72%);
	transform: translateZ(-60px);
}

/* currentColor, so the gesture spark is the site's own primary rather than the
   source file's hardcoded #f2b402. Same visual idea, this palette's value. */
.ogs-maizito__spark {
	position: absolute;
	left: 10px;
	top: 290px;
	opacity: 0;
	color: var(--ogs-c-primary);
	transform: translateZ(46px);
}

/*
 * Reduced motion: belt and braces.
 *
 * The script already returns before loading anything when the preference is
 * set, so this rule normally has nothing to act on. It exists for the case
 * where the preference changes after the stage has been built — a visitor
 * toggling it in system settings with the page open. The mascot then stops and
 * the poster comes back, rather than continuing to walk.
 */
@media (prefers-reduced-motion: reduce) {
	.ogs-maizito { display: none; }
	.ogs-has-maizito.is-swapped > img { opacity: 1; }
}

/* ==========================================================================
   PARENT-THEME COLOUR NORMALISATION — removing #c36 and #336
   ==========================================================================

   THE SOURCE, MEASURED NOT ASSUMED.

   `hello-elementor/assets/css/reset.css` (minified, one line) writes the colour
   as the three-digit shorthand `#c36`, which is `#CC3366`. That is why a
   literal search for "CC3366" across the installation finds nothing but an
   Elementor admin bundle and WordPress's own colour picker. The exact parent
   declarations, quoted:

     a { background-color:transparent; color:#c36; text-decoration:none }
     a:active, a:hover { color:#336 }
     [type=button],[type=submit],button {
         background-color:transparent; border:1px solid #c36; color:#c36; ... }
     [type=button]:focus,[type=button]:hover,
     [type=submit]:focus,[type=submit]:hover,
     button:focus,button:hover {
         background-color:#c36; color:#fff; text-decoration:none }

   So "roz" is #c36 and "mov" is #336 — two colours, not one, and the mauve one
   arrives through `:active`, which is the state a touch device fires on every
   tap.

   WHY THE CHILD THEME WAS LOSING, WHICH IS NOT ONLY SPECIFICITY.

   For `:hover` the child already wins: `.ogs-pill:hover` and the parent's
   `button:hover` are both (0,2,0) and the child stylesheet is enqueued second.
   For `:active` and `:focus` the child simply had **no declaration at all** —
   there is not one `:active` rule in this file above this block, and the
   components declare `:hover` and `:focus-visible` but never plain `:focus`.
   The parent's (0,2,0) `button:focus` therefore had nothing to compete with and
   applied unopposed. The fix is to declare the missing states, not to shout
   over the parent: no `!important` is used anywhere in this block, and none is
   needed.

   THE TWO SPECIFICITY TIERS BELOW, AND WHY THERE ARE TWO.

     tier 1 — `body.ogs-amaizing button:focus`        = (0,2,2)
              beats the parent's (0,2,0). A safety net for any control the
              design did not anticipate.

     tier 2 — `body.ogs-amaizing .ogs-pill:focus`     = (0,3,1)
              beats tier 1, because 3 classes outrank 2 regardless of the type
              count. Each component restores its own intended appearance and is
              never flattened by the net above it.

   SCOPE. Every selector is prefixed `body.ogs-amaizing`, which is the public
   site's body class. wp-admin never carries it, so nothing here can reach the
   editor, the login screen or any admin screen.
   ========================================================================== */

/* Links — the mauve `:active` and the pink base, in every state the brief
   names. `:visited` is declared explicitly: the parent leaves it to the user
   agent, and a user-agent purple is the same defect by another route. */
body.ogs-amaizing a:visited {
	color: var(--ogs-c-primary);
}

body.ogs-amaizing a:active,
body.ogs-amaizing a:focus {
	color: var(--ogs-c-primary-hover);
}

/* Tier 1 — the generic net over real buttons and button-like inputs.
   `[type="reset"]` is included even though the parent's colour rule omits it,
   because the parent's appearance rule does not, and a reset button should not
   be the one control that looks different. */
body.ogs-amaizing button:hover,
body.ogs-amaizing button:focus,
body.ogs-amaizing button:active,
body.ogs-amaizing [type="button"]:hover,
body.ogs-amaizing [type="button"]:focus,
body.ogs-amaizing [type="button"]:active,
body.ogs-amaizing [type="submit"]:hover,
body.ogs-amaizing [type="submit"]:focus,
body.ogs-amaizing [type="submit"]:active,
body.ogs-amaizing [type="reset"]:hover,
body.ogs-amaizing [type="reset"]:focus,
body.ogs-amaizing [type="reset"]:active {
	background-color: transparent;
	border-color: var(--ogs-c-hairline-primary-strong);
	color: var(--ogs-c-primary);
}

/* The parent also paints the RESTING border pink on every button-like control.
   `.ogs-pill` and `.ogs-navpanel__close` set their own border and win on source
   order, but a Contact Form 7 submit carries `.ogs-btn--primary`, which sets a
   background and a colour and no border — so the pink 1px outline survived on
   all three forms. */
body.ogs-amaizing button,
body.ogs-amaizing [type="button"],
body.ogs-amaizing [type="submit"],
body.ogs-amaizing [type="reset"] {
	border-color: var(--ogs-c-hairline-primary-strong);
}

/* Tier 2 — the components, each restoring its own design and now covering
   `:focus` and `:active` alongside the `:hover` it already had. */
body.ogs-amaizing .ogs-pill:hover,
body.ogs-amaizing .ogs-pill:focus,
body.ogs-amaizing .ogs-pill:focus-visible,
body.ogs-amaizing .ogs-pill:active,
body.ogs-amaizing .ogs-navpanel__close:hover,
body.ogs-amaizing .ogs-navpanel__close:focus,
body.ogs-amaizing .ogs-navpanel__close:focus-visible,
body.ogs-amaizing .ogs-navpanel__close:active {
	border-color: var(--ogs-c-primary);
	background-color: var(--ogs-c-primary-wash);
	color: var(--ogs-c-primary);
}

/* The RO/EN toggle's pressed state. `aria-pressed="true"` is a real state the
   design never coloured, so it inherited whatever the parent gave it. */
body.ogs-amaizing .ogs-pill[aria-pressed="true"] {
	border-color: var(--ogs-c-primary);
	background-color: var(--ogs-c-primary-wash);
	color: var(--ogs-c-primary);
}

/* Submit buttons wearing the site's button classes. These are `<input>`
   elements, so they are hit by the parent's `[type=submit]` rules that the
   anchor-based `.ogs-btn` never sees. */
body.ogs-amaizing [type="submit"].ogs-btn--primary,
body.ogs-amaizing [type="submit"].ogs-btn--primary:hover,
body.ogs-amaizing [type="submit"].ogs-btn--primary:focus,
body.ogs-amaizing [type="submit"].ogs-btn--primary:focus-visible,
body.ogs-amaizing [type="submit"].ogs-btn--primary:active {
	background-color: var(--ogs-c-primary);
	border-color: transparent;
	color: var(--ogs-c-on-primary);
}

body.ogs-amaizing [type="submit"].ogs-btn--primary:hover,
body.ogs-amaizing [type="submit"].ogs-btn--primary:focus-visible {
	background-color: var(--ogs-c-primary-hover);
}

/* The current page in the navigation. `aria-current` is what the menu filter
   emits; `.current-menu-item` is what WordPress emits. Both are declared so the
   marker never falls back to a parent colour. */
body.ogs-amaizing .ogs-nav a[aria-current],
body.ogs-amaizing .ogs-nav .current-menu-item > a {
	color: var(--ogs-c-primary);
}

/* Tapping must never flash a parent colour. `-webkit-tap-highlight-color` is
   the one remaining route on iOS and Android: it is a translucent overlay the
   browser paints on tap, and it is not covered by any rule above. Set to the
   brand wash rather than to `transparent`, so the tap still gives feedback. */
body.ogs-amaizing a,
body.ogs-amaizing button,
body.ogs-amaizing [type="button"],
body.ogs-amaizing [type="submit"] {
	-webkit-tap-highlight-color: var(--ogs-c-primary-wash);
}

/* ==========================================================================
   Homepage event cards — the whole card is one link
   ==========================================================================

   Rendered by `partials/home-events.php`. The `<a>` wraps the card's entire
   contents, so the image, the title and the empty space between them are all
   the same link — one target for a mouse, a finger and the keyboard, and one
   entry in the tab order rather than three.

   The card carries no other interactive element, which is what makes a single
   wrapping link legal here and not on `/evenimente/`, where each card has its
   own CTA button.
   ========================================================================== */

.ogs-event__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* The inner elements keep the colours the design gave them; inheriting through
   the link would have turned the whole card primary. */
.ogs-event__link .ogs-event__title { color: var(--ogs-c-text); }
.ogs-event__link .ogs-event__desc  { color: var(--ogs-c-text-secondary); }
.ogs-event__link .ogs-event__time  { color: var(--ogs-c-text-muted); }

/* The focus ring is INSET. `.ogs-event` is `overflow: hidden` for the image
   crop, and an outline drawn outside the link's box would be clipped by it —
   the ring would simply not be visible, which is the failure this offset
   exists to prevent. */
.ogs-event__link:focus-visible {
	outline: var(--ogs-focus-width) solid var(--ogs-focus-on-dark);
	outline-offset: calc(var(--ogs-focus-width) * -1);
	border-radius: 20px;
}

/* Microinteraction: a 3px lift, a 1.03 image zoom and a warmer border. Small
   enough to read as responsiveness rather than as an animation. */
.ogs-event--linked {
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ogs-event--linked img {
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ogs-event--linked:hover,
.ogs-event--linked:focus-within {
	transform: translateY(-6px);
	border-color: var(--ogs-c-hairline-primary-strong);
}

.ogs-event--linked:hover img,
.ogs-event--linked:focus-within img {
	transform: scale(1.04);
}

/* The title picks up the brand colour on the card's own hover, matching the
   blog cards, so the card reads as a link before it is clicked. */
.ogs-event--linked:hover .ogs-event__title,
.ogs-event--linked:focus-within .ogs-event__title {
	color: var(--ogs-c-primary);
}

/* No events published. One quiet line spanning the grid — not a card, and not
   three empty ones. */
.ogs-events__empty {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	color: var(--ogs-c-text-secondary);
}

.ogs-events__empty p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

/* ==========================================================================
   Motion layer — the boot contract (rules live in the CLAVE block)
   ==========================================================================

   Driven by `assets/js/ogs-motion.js`, opted in by `partials/motion-boot.php`.

   EVERY motion rule is scoped to `html.ogs-motion`. That class is added by a
   head snippet only when JavaScript runs AND the visitor has not asked for
   reduced motion AND IntersectionObserver exists. Without it — no JavaScript,
   an old browser, reduced motion, or the watchdog firing because the script
   never arrived — nothing matches and every element renders at its final
   state. That is the fallback, and it is the default rather than a special
   case. The contract is unchanged since 1.3.0 and is not this block's to vary.

   THE RULES THEMSELVES MOVED. Since 1.18.0 the reveal families, the hero
   choreographies, the staggers and every reduced-motion counterpart live in
   ONE place — the CLAVE block at the end of this file — because the 1.17.0
   audit found three generations of timing tokens disagreeing across this
   file. What stayed here is only what the engine needs before that block
   loads conceptually: nothing. `.ogs-special` is still excluded from every
   selector the engine collects — Maizito owns the site's continuous
   animation.
   ========================================================================== */

/* ==========================================================================
   WAVE A — Club destination, navigation disclosure, signature icons, logo glow
   Added 2026-08-04 for the client feedback phase. Theme 1.5.0.

   ORDERING NOTE: this block sits after the motion layer on purpose. The reveal
   rules below extend `html.ogs-motion` and must win over the generic `.ogs-rv`
   declarations, which they do by being later rather than by specificity tricks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · The signature icon
   --------------------------------------------------------------------------
   OUTLINE → GROW → SHAKE → FILL → GLOW → HOLD, and its exact reverse.

   The two <path> layers come from one <svg> (partials/icons.php): `__fill` is the
   solid twin sitting underneath, `__outline` is the resting glyph on top. The
   reveal is a clip-path wipe on the fill layer, bottom to top — the direction the
   brief lists first, and the one that reads as "filling up" rather than as a
   crossfade.

   WHY clip-path AND NOT opacity. A fade between two glyphs shows both at once at
   50%, which on a stroked outline reads as a blurred double image. A wipe shows
   exactly one state at every pixel, at every moment.

   EVERY DURATION HERE IS INSIDE THE BRIEF'S RANGES: grow 170ms (140-190),
   shake 220ms (180-260), fill 300ms (220-360).
   -------------------------------------------------------------------------- */

:root {
	--ogs-ico-size: 44px;
	--ogs-ico-size-sm: 18px;

	/* The warm golden glow. Brightest close in, softer and wider further out —
	   four layers rather than one big blur, which is what keeps it a halo
	   instead of a cloud. Derived from the brand yellow #FDC125.

	   SCOPE, 2026-08-05: this glow now appears in EXACTLY ONE PLACE on the whole
	   site — the logo symbol, on hover and on click, in the header and the footer.
	   It was removed from every icon by client decision. If a later change puts a
	   drop-shadow on anything else, that is a regression, not an addition. */
	--ogs-glow-1: 0 0 4px rgba(253, 193, 37, 0.85);
	--ogs-glow-2: 0 0 12px rgba(253, 193, 37, 0.45);
	--ogs-glow-3: 0 0 26px rgba(253, 193, 37, 0.22);
	--ogs-glow-4: 0 0 52px rgba(253, 193, 37, 0.13);

	/* THE MICRO-INTERACTION TOKENS. One set, read by every interactive icon and
	   by the logo, so the whole site's timing changes from these three lines.

	   Asymmetric on purpose: leaving is quicker than arriving. A pointer crossing
	   a row of icons should not leave a wake of things still finishing.

	   Since 1.18.0 these read the CLAVE scale: arrival is four beats on the
	   response curve (the lit-state rules add the lead curve for the way in),
	   departure is two beats on the exit curve. The two-state Smart-Animate
	   model itself is unchanged — it is client-approved. */
	--ogs-mi-in: var(--clv-4, 360ms);
	--ogs-mi-out: var(--clv-2, 180ms);
	--ogs-mi-ease: var(--clv-follow, cubic-bezier(0.22, 1, 0.36, 1));

	--ogs-ico-grow: 1.12;
	--ogs-ico-ease: var(--clv-lead, cubic-bezier(0.22, 1, 0.36, 1));
}

.ogs-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ogs-ico-size);
	height: var(--ogs-ico-size);
	flex: 0 0 auto;
	line-height: 0;
	/* The transform origin is the glyph's own centre so growth never nudges
	   neighbouring text — which is what "no layout shift" means here. */
	transform-origin: 50% 50%;
	will-change: transform;
}

.ogs-ico--sm {
	width: var(--ogs-ico-size-sm);
	height: var(--ogs-ico-size-sm);
}

.ogs-ico__svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ogs-ico__outline,
.ogs-ico__fill {
	fill: currentColor;
}

/* The resting state: outline visible, fill clipped away to nothing at the bottom
   edge. `inset(100% 0 0 0)` is a zero-height window at the top — the wipe opens
   downward from there as the inset shrinks. */
.ogs-ico__fill {
	clip-path: inset(100% 0 0 0);
	color: var(--ogs-brand, #FDC125);
	fill: var(--ogs-brand, #FDC125);
}

.ogs-ico__outline {
	opacity: 1;
}

/* ---- ONE BEHAVIOUR FOR EVERY ICON ---------------------------------------
   Replaced the two-tier scheme on 2026-08-05, on client feedback.

   WHAT WAS WRONG, AND IT WAS NOT THE TIMING. The old signature sequence ran
   OUTLINE -> GROW -> SHAKE -> FILL -> GLOW -> HOLD as six stages chained by
   transition-delay: grow at 0ms, shake at 170ms, fill at 190ms, glow at 400ms.
   Every stage boundary is a seam the eye catches, which is exactly the
   "not fluid" the client reported. No amount of retuning a six-stage chain
   produces what one interpolation produces.

   THE MODEL IS NOW THE CLIENT'S OWN REFERENCE. Their example is Figma's
   Smart Animate with an Ease out curve: two states, and every changed property
   tweened SIMULTANEOUSLY on ONE curve. So here, transform, clip-path and fill
   all move together, same duration, same easing, ZERO delay. That is the whole
   technique, and it is why it reads as one movement instead of a sequence.

   DROPPED BY DECISION:
     - the SHAKE. It is absent from the client's reference, and a rotation
       crossing zero three times is the definition of a discontinuity.
     - the GLOW. It now exists only on the logo symbol. See --ogs-glow-* above.

   TIERS DROPPED TOO. `.ogs-ico--sig` no longer selects a different behaviour;
   the class is left in the templates so nothing had to be re-marked, but it is
   inert. The client's complaint was precisely that some icons filled, some
   glowed and some only changed outline colour. One behaviour is the fix, and
   two tiers cannot be one behaviour.
   ------------------------------------------------------------------------- */

/* THE RESTING STATE, and the return journey. Leaving is quicker than arriving
   so a pointer crossing a row does not leave a wake behind it. */
.ogs-ico {
	transition: transform var(--ogs-mi-out) var(--ogs-mi-ease);
}

.ogs-ico .ogs-ico__fill {
	transition: clip-path var(--ogs-mi-out) var(--ogs-mi-ease);
}

.ogs-ico .ogs-ico__outline {
	transition: fill var(--ogs-mi-out) var(--ogs-mi-ease);
}

/* THE LIT STATE. One selector list for the whole site, written once.

   `:where()` contributes no specificity, so this list can grow without starting
   a specificity race with the components themselves. `.is-lit` is set by
   JavaScript on scroll entry and on touch, so a pointer user, a keyboard user
   and a scrolling reader all arrive at the same state.

   `:active` is included because the reference treats the click as a state of
   its own, not as a pointer accident. */
.ogs-ico.is-lit,
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step,
	.ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link,
	.ogs-catitem):is(:hover, :focus-visible, :active) .ogs-ico {
	transform: scale(var(--ogs-ico-grow));
	transition-duration: var(--ogs-mi-in);
	transition-timing-function: var(--clv-lead);
}

.ogs-ico.is-lit .ogs-ico__fill,
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step,
	.ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link,
	.ogs-catitem):is(:hover, :focus-visible, :active) .ogs-ico__fill {
	clip-path: inset(0 0 0 0);
	transition-duration: var(--ogs-mi-in);
	transition-timing-function: var(--clv-lead);
}

.ogs-ico.is-lit .ogs-ico__outline,
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step,
	.ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link,
	.ogs-catitem):is(:hover, :focus-visible, :active) .ogs-ico__outline {
	fill: var(--ogs-brand, #FDC125);
	transition-duration: var(--ogs-mi-in);
	transition-timing-function: var(--clv-lead);
}

/* A selected control is already at its destination - it does not travel there. */
.ogs-ico.is-selected .ogs-ico__fill {
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   2 · The logo — symbol, and the wordmark that must never be touched
   --------------------------------------------------------------------------
   Rebuilt 2026-08-05. The mark used to be `assets/img/logo.png`, a 220x220
   raster holding symbol + words + strapline in one flat picture, haloed as a
   whole. That is the defect the client reported: the glow was asked for on the
   symbol, and a picture has no parts to scope it to.

   The lockup is now composed — see partials/site-brand.php. Two SVG layers for
   the symbol, and the wordmark as a separate element OUTSIDE the mark, so no
   filter declared here can reach it. That separation is the fix; everything
   below is only how it is drawn.

   RESTING = FILL. HOVER, FOCUS AND CLICK = OUTLINE + GLOW. One interpolation,
   the same ease-out as every icon, no delays, no stages.

   WHY A CROSSFADE IS SAFE HERE, when it would be wrong between two glyphs: the
   two files carry the same viewBox to two decimals (89.47 vs 89.48 x 54.94), so
   the outline lands exactly on the fill. Nothing drifts, nothing doubles, and
   the box never changes size - which is what keeps layout shift at zero.
   -------------------------------------------------------------------------- */

.ogs-brand {
	position: relative;
}

/* Overrides the 46x46 square box the raster lockup needed. The symbol is
   landscape, 1.6285:1, and it is given its true ratio rather than cropped into
   a square it was never drawn for. */
.ogs-brand__mark {
	position: relative;
	z-index: 1;
	display: block;
	flex: 0 0 auto;
	width: 75px;
	height: 46px;
	border-radius: 0;
	line-height: 0;
}

.ogs-brand__layer {
	display: block;
	width: 100%;
	height: 100%;
}

/* The outline sits exactly over the fill and starts invisible. Absolute, so it
   takes no space of its own and cannot alter the box. */
.ogs-brand__layer--line {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.ogs-brand__layer--fill,
.ogs-brand__layer--line {
	transition:
		opacity var(--ogs-mi-out) var(--ogs-mi-ease),
		filter var(--ogs-mi-out) var(--ogs-mi-ease);
}

/* THE SWAP. `:active` is listed because the client asked for the effect on
   click as well as on hover, and because on a touch device `:active` is the
   only one of the three that ever fires. */
.ogs-brand:hover .ogs-brand__layer--fill,
.ogs-brand:focus-visible .ogs-brand__layer--fill,
.ogs-brand:active .ogs-brand__layer--fill {
	opacity: 0;
	transition-duration: var(--ogs-mi-in);
}

/* GLOW on the image, not on a box behind it: drop-shadow reads the alpha, so
   the halo takes the shape of the corn and its leaves instead of a rectangle.
   Four layers - tight, mid, wide, and a very faint far bloom - which is the
   falloff in the photograph the client supplied as the reference. */
.ogs-brand:hover .ogs-brand__layer--line,
.ogs-brand:focus-visible .ogs-brand__layer--line,
.ogs-brand:active .ogs-brand__layer--line {
	opacity: 1;
	filter:
		drop-shadow(var(--ogs-glow-1))
		drop-shadow(var(--ogs-glow-2))
		drop-shadow(var(--ogs-glow-3))
		drop-shadow(var(--ogs-glow-4));
	transition-duration: var(--ogs-mi-in);
}

/* THE WORDMARK IS INERT, AND THIS RULE EXISTS TO SAY SO. It carries no
   transition, no filter and no state. If a later change makes the wordmark
   glow, it has reintroduced the exact defect this rebuild removed. */
.ogs-brand__wordmark {
	display: block;
	width: 130px;
	height: auto;
	filter: none;
}

/* The footer stacks symbol over wordmark, in the designer's own proportion:
   both the same width, with a gap of roughly 6% of that width, read off
   `Logo amaizing full.svg` (87.36 x 81.94). */
.ogs-brand--footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.ogs-brand--footer .ogs-brand__mark {
	width: 130px;
	height: 80px;
}

/* THE TECHNICAL FALLBACK — `assets/img/logo.png`, step (c) of the chain in
   partials/site-brand.php. Reached only when a symbol SVG is missing from disk
   or fails to load; never a design choice.

   `is-png` is set by BOTH fallback routes — PHP when the file is absent, the
   `onerror` attribute when it is present but unloadable — so the two render
   identically rather than nearly so. The raster is square where the symbol is
   landscape, so the box is re-squared here instead of stretching the image into
   a shape it was never drawn for.

   No transition, no crossfade, no glow: there is no second layer left to move
   to, and a halo on a flat lockup is the defect this whole section removed. */
.ogs-brand__mark.is-png {
	width: 46px;
	height: 46px;
}

.ogs-brand--footer .ogs-brand__mark.is-png {
	width: 110px;
	height: 110px;
}

.ogs-brand__layer--png {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	filter: none;
	transition: none;
}

/* NARROW VIEWPORTS — the landscape symbol must not cost width the header has
   not got.

   Measured 2026-08-06 in a real 320px and 375px viewport, not an emulated one:
   the header row is brand + controls, the controls are a fixed 174.5px, and the
   symbol going from a 46px square to 75px landscape pushed the row 29px wider on
   every page. At 375 that turned 0px of horizontal overflow into 13px — a
   regression this change introduced. At 320 it made an existing 34px overflow
   into 63px.

   Below 480px the mark therefore returns to EXACTLY the footprint of the raster
   it replaced: 46px wide, at its true 1.6285 ratio rather than cropped square, so
   this change contributes precisely 0px of extra width at narrow widths. The
   symbol is smaller here than the designer's proportion asks, and that is the
   trade — a lockup that reads slightly small is a compromise, a header the reader
   must scroll sideways to see is a defect.

   This corrects THIS change's contribution only. The 34px that predates it is a
   separate, pre-existing defect of the header row and is registered as such
   rather than absorbed here, because fixing it means changing the controls or the
   brand text, which is a design decision and not a regression repair.

   `is-png` keeps its own square box — it is a different asset with a different
   ratio, and it was never the thing that grew. */
@media (max-width: 480px) {

	.ogs-brand:not(.ogs-brand--footer) .ogs-brand__mark:not(.is-png) {
		width: 46px;
		height: 28px;
	}
}

/* An operator-chosen Site Identity logo: one image, one state, no glow. Sized
   as a square because that is what the Customiser control implies and what the
   previous asset was. */
.ogs-brand__mark--static {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}

.ogs-brand--footer .ogs-brand__mark--static {
	width: 110px;
	height: 110px;
	border-radius: var(--ogs-radius-lg);
}

/* --------------------------------------------------------------------------
   3 · The Club disclosure in the navigation
   -------------------------------------------------------------------------- */

.ogs-nav__disclose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: var(--ogs-space-2);
	padding: 0;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
	transition: border-color var(--ogs-motion-colour) var(--ogs-motion-easing),
	            background-color var(--ogs-motion-colour) var(--ogs-motion-easing);
}

.ogs-nav__disclose:hover,
.ogs-nav__disclose:focus-visible {
	border-color: var(--ogs-brand, #FDC125);
	background-color: rgba(253, 193, 37, 0.12);
}

.ogs-nav__chev {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 220ms var(--ogs-ico-ease);
}

.ogs-nav__disclose[aria-expanded="true"] .ogs-nav__chev {
	transform: translateY(1px) rotate(-135deg);
}

.ogs-subnav {
	list-style: none;
	margin: var(--ogs-space-3) 0 var(--ogs-space-5);
	padding: 0 0 0 var(--ogs-space-4);
	border-left: 2px solid rgba(253, 193, 37, 0.35);
	display: grid;
	gap: var(--ogs-space-2);
}

/* `hidden` must win over the grid display, or the panel renders open. */
.ogs-subnav[hidden] {
	display: none;
}

.ogs-subnav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ogs-space-3);
	text-decoration: none;
	color: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	padding: var(--ogs-space-2) 0;
	/* 44px minimum touch target, met by padding rather than by a height that
	   would push the items apart visually. */
	min-height: 44px;
}

.ogs-subnav__link:hover,
.ogs-subnav__link:focus-visible {
	color: var(--ogs-brand, #FDC125);
}

/* --------------------------------------------------------------------------
   4 · Club sections
   -------------------------------------------------------------------------- */

.ogs-clubcards,
.ogs-legends,
.ogs-mbenefits,
.ogs-joinlist {
	list-style: none;
	margin: var(--ogs-space-7) 0 0;
	padding: 0;
	display: grid;
	gap: var(--ogs-space-5);
}

.ogs-clubcards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ogs-legends   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ogs-mbenefits { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ogs-joinlist  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.ogs-clubcard__link {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-3);
	height: 100%;
	padding: var(--ogs-space-6);
	text-decoration: none;
	color: inherit;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	/* 6px lift and a 260ms settle - inside the brief's 5-8px and 220-350ms. */
	transition: transform 260ms var(--ogs-ico-ease),
	            border-color 260ms ease,
	            background-color 260ms ease;
}

.ogs-clubcard__link:hover,
.ogs-clubcard__link:focus-visible {
	transform: translateY(-6px);
	border-color: rgba(253, 193, 37, 0.55);
	background: rgba(253, 193, 37, 0.06);
}

.ogs-clubcard__title {
	font-family: var(--ogs-font-display, inherit);
	font-size: 1.35rem;
	line-height: 1.15;
}

.ogs-clubcard__text {
	font-size: 0.95rem;
	line-height: 1.5;
	opacity: 0.82;
}

.ogs-clubcard__go {
	width: 26px;
	height: 2px;
	margin-top: auto;
	background: var(--ogs-brand, #FDC125);
	transition: width 260ms var(--ogs-ico-ease);
}

.ogs-clubcard__link:hover .ogs-clubcard__go,
.ogs-clubcard__link:focus-visible .ogs-clubcard__go {
	width: 34px;
}

.ogs-legend,
.ogs-mbenefit {
	padding: var(--ogs-space-6);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
}

.ogs-legend__title,
.ogs-mbenefit__title {
	font-family: var(--ogs-font-display, inherit);
	font-size: 1.15rem;
	margin: var(--ogs-space-4) 0 var(--ogs-space-2);
}

.ogs-legend__text,
.ogs-mbenefit__text {
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.82;
	margin: 0;
}

.ogs-legend__roll {
	list-style: none;
	margin: var(--ogs-space-4) 0 0;
	padding: var(--ogs-space-4) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	display: grid;
	gap: var(--ogs-space-2);
	font-size: 0.9rem;
}

/* The ladder. A row on desktop, a column on a phone - and the connector is a
   pseudo-element so it cannot be mistaken for content by a screen reader. */
.ogs-ladder {
	list-style: none;
	margin: var(--ogs-space-7) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--ogs-space-5);
}

.ogs-ladder__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ogs-space-2);
	padding: var(--ogs-space-5);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	transition: border-color 260ms ease, transform 260ms var(--ogs-ico-ease);
}

.ogs-ladder__step:hover {
	transform: translateY(-5px);
	border-color: rgba(253, 193, 37, 0.55);
}

.ogs-ladder__num {
	font-family: var(--ogs-font-display, inherit);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	opacity: 0.5;
}

.ogs-ladder__label {
	font-family: var(--ogs-font-display, inherit);
	font-size: 1.2rem;
}

.ogs-joinlist__item {
	display: flex;
	align-items: center;
	gap: var(--ogs-space-3);
	font-size: 0.98rem;
}

.ogs-club__note {
	margin-top: var(--ogs-space-5);
	font-size: 0.92rem;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   5 · The Latin Experiences rail
   --------------------------------------------------------------------------
   A native scroller. `overflow-x: auto` plus scroll-snap gives touch swiping,
   two-finger trackpad scrolling, keyboard arrow scrolling on the focused track
   and a screen-reader-navigable list, with no script. The arrow buttons below
   are an addition to that, never the only route - which is what "no drag-only
   dependency" requires.
   -------------------------------------------------------------------------- */

.ogs-rail {
	position: relative;
	margin-top: var(--ogs-space-6);
}

.ogs-rail__track {
	list-style: none;
	margin: 0;
	padding: var(--ogs-space-2) var(--ogs-space-5) var(--ogs-space-5);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 320px);
	gap: var(--ogs-space-5);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.ogs-rail__track > * {
	scroll-snap-align: start;
}

/* The track is focusable so it can be scrolled by keyboard; it therefore needs a
   visible focus ring like any other focusable thing. */
.ogs-rail__track:focus-visible {
	outline: 3px solid var(--ogs-brand, #FDC125);
	outline-offset: -3px;
}

.ogs-railcard__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 260ms ease, transform 260ms var(--ogs-ico-ease);
}

.ogs-railcard:hover .ogs-railcard__inner {
	transform: translateY(-6px);
	border-color: rgba(253, 193, 37, 0.5);
}

.ogs-railcard__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.ogs-railcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ogs-t-slow, 640ms) var(--ogs-t-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.ogs-railcard:hover .ogs-railcard__img {
	transform: scale(1.04);
}

.ogs-railcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-2);
	padding: var(--ogs-space-5);
}

.ogs-railcard__tag {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.65;
}

.ogs-railcard__title {
	margin: 0;
	font-family: var(--ogs-font-display, inherit);
	font-size: 1.25rem;
	line-height: 1.15;
}

.ogs-railcard__title a {
	color: inherit;
	text-decoration: none;
}

.ogs-railcard__when {
	margin: 0;
	display: flex;
	gap: var(--ogs-space-3);
	font-size: 0.85rem;
	opacity: 0.8;
}

.ogs-rail__controls {
	display: flex;
	gap: var(--ogs-space-3);
	justify-content: flex-end;
	padding: 0 var(--ogs-space-5);
}

.ogs-rail__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: none;
	color: inherit;
	cursor: pointer;
	transition: border-color var(--ogs-motion-colour) ease, background-color var(--ogs-motion-colour) ease;
}

.ogs-rail__btn:hover,
.ogs-rail__btn:focus-visible {
	border-color: var(--ogs-brand, #FDC125);
	background-color: rgba(253, 193, 37, 0.12);
}

.ogs-rail__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* --------------------------------------------------------------------------
   6 · Event actions
   -------------------------------------------------------------------------- */

.ogs-evact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-2);
	margin-top: var(--ogs-space-3);
}

.ogs-evact__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ogs-space-2);
	min-height: 40px;
	padding: 0 var(--ogs-space-4);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: inherit;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color var(--ogs-motion-colour) ease,
	            background-color var(--ogs-motion-colour) ease,
	            transform 160ms var(--ogs-ico-ease);
}

.ogs-evact__btn:hover,
.ogs-evact__btn:focus-visible {
	border-color: var(--ogs-brand, #FDC125);
	background-color: rgba(253, 193, 37, 0.12);
}

.ogs-evact__btn:active {
	transform: scale(0.97);
}

.ogs-evact__btn--primary {
	border-color: var(--ogs-brand, #FDC125);
	background-color: var(--ogs-brand, #FDC125);
	color: #000;
}

.ogs-evact__said {
	flex-basis: 100%;
	font-size: 0.8rem;
	color: var(--ogs-brand, #FDC125);
	min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   7 · (removed 1.18.0) The scale / mask / image reveal variants lived here at
   800–1150ms. The CLAVE families replaced them; the classes are no longer
   assigned by the engine, so the rules would have been dead weight.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8 · Reduced motion
   --------------------------------------------------------------------------
   EVERYTHING ADDED ABOVE IS SWITCHED OFF HERE, not merely shortened: no grow,
   no shake, no progressive fill, no glow pulse, no card lift, no image zoom, no
   wipe. What remains is the DIRECT state change the brief permits - a selected
   or hovered icon is simply filled, with a static restrained glow, and focus
   stays fully visible.

   Maizito is untouched: it has its own reduced-motion block elsewhere in this
   file and nothing here restates or overrides it.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ogs-ico,
	.ogs-ico .ogs-ico__fill,
	.ogs-ico .ogs-ico__outline,
	.ogs-ico .ogs-ico__svg,
	.ogs-brand__mark,
	.ogs-brand__layer,
	.ogs-clubcard__link,
	.ogs-clubcard__go,
	.ogs-ladder__step,
	.ogs-railcard__inner,
	.ogs-railcard__img,
	.ogs-evact__btn,
	.ogs-nav__chev {
		transition: none !important;
		animation: none !important;
	}

	/* The lit state still reads as lit - it just arrives instantly. The state is
	   information; only the travel to it was motion. */
	.ogs-ico.is-lit .ogs-ico__fill,
	:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step,
		.ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link,
		.ogs-catitem):is(:hover, :focus-visible, :active) .ogs-ico__fill,
	.ogs-ico.is-selected .ogs-ico__fill {
		clip-path: inset(0 0 0 0);
	}

	/* No growth. Scale is pure motion and carries nothing a reader needs. */
	.ogs-ico.is-lit,
	:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step,
		.ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link,
		.ogs-catitem):is(:hover, :focus-visible, :active) .ogs-ico,
	.ogs-clubcard__link:hover,
	.ogs-clubcard__link:focus-visible,
	.ogs-ladder__step:hover,
	.ogs-railcard:hover .ogs-railcard__inner,
	.ogs-railcard:hover .ogs-railcard__img,
	.ogs-evact__btn:active {
		transform: none !important;
	}

	/* The logo still swaps to its outline and still glows - both arrive
	   instantly. A static halo is a state, not an animation, and removing it
	   would take away the only feedback the mark gives. */
	.ogs-brand:hover .ogs-brand__layer--line,
	.ogs-brand:focus-visible .ogs-brand__layer--line,
	.ogs-brand:active .ogs-brand__layer--line {
		filter: drop-shadow(var(--ogs-glow-1)) drop-shadow(var(--ogs-glow-2));
	}

	/* (1.18.0) The scale/mask/image variant switch-offs that lived here are
	   gone with the variants themselves; the CLAVE block carries the reduced
	   state for every family it defines. */

	.ogs-rail__track {
		scroll-behavior: auto;
	}
}

/* Gallery figures. The caption is real alt text from the approved design source,
   shown rather than hidden - it is what makes the section honest about what the
   pictures are. */
.ogs-gallery {
	list-style: none;
	margin: var(--ogs-space-7) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--ogs-space-4);
}

.ogs-gallery__fig {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
}

.ogs-gallery__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform var(--ogs-t-slow, 640ms) var(--ogs-t-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.ogs-gallery__fig:hover .ogs-gallery__img {
	transform: scale(1.04);
}

/*
 * The caption was grey on near-black and then dimmed further.
 *
 * It carried no colour of its own, so it inherited `--ogs-c-text-secondary`
 * (#B8B0A6) from the section, and `opacity: .78` on top of that dropped its
 * effective contrast against the figure's own near-black surface below the point
 * where it could be read at 0.82rem. Reported illegible by the operator on
 * 2026-08-07.
 *
 * Now white and undimmed. Opacity is removed rather than raised: dimming text is
 * how the contrast was lost in the first place, and a caption naming the picture
 * is content, not furniture. EP-18 — this is normal-size text, so the threshold
 * is 4.5:1; #FFFFFF over the figure surface clears it by a wide margin.
 */
.ogs-gallery__cap {
	padding: var(--ogs-space-3) var(--ogs-space-4);
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--ogs-c-text, #FFFFFF);
}

@media (prefers-reduced-motion: reduce) {
	.ogs-gallery__img,
	.ogs-gallery__fig:hover .ogs-gallery__img {
		transition: none !important;
		transform: none !important;
	}
}

/* Legends roll of honour. Real winners, read from the Hall of Fame page - one
   source, not a copy. Three fields per row, so the badge and month are not
   mistaken for part of the name. */
.ogs-legend__member {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ogs-space-2) var(--ogs-space-3);
}

.ogs-legend__who {
	font-weight: 700;
}

.ogs-legend__badge {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ogs-brand, #FDC125);
}

.ogs-legend__when {
	font-size: 0.78rem;
	opacity: 0.6;
	margin-left: auto;
}

/* ==========================================================================
   Parties & Catering — Wave B
   ========================================================================== */

.ogs-expcards, .ogs-whylist, .ogs-packs, .ogs-catlist {
	list-style: none; margin: var(--ogs-space-7) 0 0; padding: 0;
	display: grid; gap: var(--ogs-space-5);
}
.ogs-expcards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ogs-whylist  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ogs-space-4); }
.ogs-packs    { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ogs-catlist  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ogs-space-4); }

.ogs-expcard__link {
	display: flex; flex-direction: column; gap: var(--ogs-space-3); height: 100%;
	padding: var(--ogs-space-6); text-decoration: none; color: inherit;
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10);
	border-radius: 14px;
	transition: transform 260ms var(--ogs-ico-ease), border-color 260ms ease, background-color 260ms ease;
}
.ogs-expcard__link:hover, .ogs-expcard__link:focus-visible {
	transform: translateY(-6px); border-color: rgba(253,193,37,0.55); background: rgba(253,193,37,0.06);
}
.ogs-expcard__title { font-family: var(--ogs-font-display, inherit); font-size: 1.3rem; line-height: 1.15; }
.ogs-expcard__lines { display: grid; gap: var(--ogs-space-1); font-size: 0.92rem; opacity: 0.82; }
.ogs-expcard__go { width: 26px; height: 2px; margin-top: auto; background: var(--ogs-brand, #FDC125); transition: width 260ms var(--ogs-ico-ease); }
.ogs-expcard__link:hover .ogs-expcard__go, .ogs-expcard__link:focus-visible .ogs-expcard__go { width: 34px; }

.ogs-whyitem, .ogs-catitem {
	display: flex; align-items: center; gap: var(--ogs-space-3); font-size: 0.96rem;
	padding: var(--ogs-space-4); background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
	transition: border-color 220ms ease;
}
.ogs-whyitem:hover, .ogs-catitem:hover { border-color: rgba(253,193,37,0.45); }

.ogs-pack {
	display: flex; flex-direction: column; gap: var(--ogs-space-2);
	padding: var(--ogs-space-6); background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
}
.ogs-pack__name  { font-family: var(--ogs-font-display, inherit); font-size: 1.4rem; margin: 0; }
.ogs-pack__price { color: var(--ogs-brand, #FDC125); font-size: 1.05rem; margin: 0; }
.ogs-pack__people{ font-size: 0.86rem; opacity: 0.7; margin: 0; }
.ogs-pack__list  { list-style: none; margin: var(--ogs-space-4) 0 0; padding: 0; display: grid; gap: var(--ogs-space-2); font-size: 0.94rem; }
.ogs-pack__list li::before { content: "— "; color: var(--ogs-brand, #FDC125); }
.ogs-pack__cta   { margin-top: auto; padding-top: var(--ogs-space-5); }

/* Configurator */
.ogs-config { margin-top: var(--ogs-space-7); display: grid; gap: var(--ogs-space-6); }
.ogs-config__row { border: 0; margin: 0; padding: 0; display: grid; gap: var(--ogs-space-3); }
.ogs-config__label { font-family: var(--ogs-font-display, inherit); font-size: 1.05rem; padding: 0; }
.ogs-config__guests { display: flex; align-items: center; gap: var(--ogs-space-4); flex-wrap: wrap; }
.ogs-config__range { flex: 1 1 220px; min-height: 44px; accent-color: var(--ogs-brand, #FDC125); }
.ogs-config__num { width: 6rem; min-height: 44px; padding: 0 var(--ogs-space-3);
	background: rgba(255,255,255,0.05); color: inherit;
	border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; }
.ogs-config__opts { display: flex; flex-wrap: wrap; gap: var(--ogs-space-3); }
.ogs-config__opt {
	display: inline-flex; align-items: center; gap: var(--ogs-space-2);
	min-height: 44px; padding: 0 var(--ogs-space-4);
	border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease;
}
.ogs-config__opt:hover { border-color: rgba(253,193,37,0.6); }
.ogs-config__opt:focus-within { outline: 3px solid var(--ogs-brand, #FDC125); outline-offset: 2px; }
.ogs-config__opt input { accent-color: var(--ogs-brand, #FDC125); }
.ogs-config__opt:has(input:checked) { border-color: var(--ogs-brand, #FDC125); background: rgba(253,193,37,0.12); }
.ogs-config__date { min-height: 44px; padding: 0 var(--ogs-space-3); background: rgba(255,255,255,0.05);
	color: inherit; border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; max-width: 16rem; }
.ogs-config__summary { padding: var(--ogs-space-5); border: 1px solid rgba(253,193,37,0.35); border-radius: 12px; background: rgba(253,193,37,0.05); }
.ogs-config__sumtitle { font-family: var(--ogs-font-display, inherit); font-size: 1.1rem; margin: 0 0 var(--ogs-space-3); }
.ogs-config__sumlist { margin: 0; display: grid; gap: var(--ogs-space-2); font-size: 0.94rem; }
.ogs-config__sumlist dt { font-weight: 700; opacity: 0.75; }
.ogs-config__sumlist dd { margin: 0 0 var(--ogs-space-2); }
.ogs-config__note { margin: var(--ogs-space-4) 0 0; font-size: 0.9rem; opacity: 0.8; }
.ogs-config__said { display: block; min-height: 1.2em; font-size: 0.85rem; color: var(--ogs-brand, #FDC125); }

@media (prefers-reduced-motion: reduce) {
	.ogs-expcard__link, .ogs-expcard__go, .ogs-whyitem, .ogs-catitem,
	.ogs-expcard__link:hover, .ogs-expcard__link:focus-visible {
		transition: none !important; transform: none !important;
	}
}

/* ==========================================================================
   Phase 6 — supporting pages
   ========================================================================== */

/* Homepage pathways. Doors, not summaries. */
.ogs-paths__list {
	list-style: none; margin: var(--ogs-space-7) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ogs-space-5);
}
.ogs-path__link {
	display: flex; flex-direction: column; gap: var(--ogs-space-3); height: 100%;
	padding: var(--ogs-space-6); text-decoration: none; color: inherit;
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
	transition: transform 260ms var(--ogs-ico-ease), border-color 260ms ease, background-color 260ms ease;
}
.ogs-path__link:hover, .ogs-path__link:focus-visible {
	transform: translateY(-6px); border-color: rgba(253,193,37,0.55); background: rgba(253,193,37,0.06);
}
.ogs-path__title { font-family: var(--ogs-font-display, inherit); font-size: 1.25rem; line-height: 1.15; }
.ogs-path__text  { font-size: 0.94rem; line-height: 1.5; opacity: 0.82; }
.ogs-path__go    { width: 26px; height: 2px; margin-top: auto; background: var(--ogs-brand, #FDC125); transition: width 260ms var(--ogs-ico-ease); }
.ogs-path__link:hover .ogs-path__go, .ogs-path__link:focus-visible .ogs-path__go { width: 34px; }

/* MEET THE TEAM.
   No dedicated template: the page draws from ONE source, already has correct
   semantics and a correct heading outline, and a template would add nothing for
   structure, reuse or administration. Club and Parties earned templates because
   they compose from five or six sources; this composes from one.

   NOTHING ANIMATES A FACE. The card lifts and its border warms; the portrait and
   the initials panel are explicitly excluded from every transform, because motion
   applied to a photograph of a real person reads as a gimmick at their expense. */
.ogs-member {
	transition: transform 260ms var(--ogs-ico-ease), border-color 260ms ease;
}
.ogs-member:hover {
	transform: translateY(-4px);
	border-color: rgba(253,193,37,0.45);
}
.ogs-member__photo img,
.ogs-member__panel,
.ogs-member__initials {
	transition: none !important;
	transform: none !important;
}

/* The five missing portraits. An initial and a country code, set as typography
   rather than dressed up as a photograph - it should read as a deliberate mark,
   not as an image that failed to load. Reported as a dependency (OD-P14); no
   stock photograph and no generated face is used. */
.ogs-member__panel {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--ogs-space-2);
	background: linear-gradient(150deg, rgba(253,193,37,0.16), rgba(253,193,37,0.04));
	border: 1px solid rgba(253,193,37,0.28);
}
.ogs-member__initials {
	font-family: var(--ogs-font-display, inherit);
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	line-height: 1;
	color: var(--ogs-brand, #FDC125);
	letter-spacing: 0.02em;
}
.ogs-member__flag {
	font-size: 0.72rem; letter-spacing: 0.18em; opacity: 0.7;
}

/* CAREERS — cards align with the system; the form is untouched. */
.ogs-job { transition: transform 260ms var(--ogs-ico-ease), border-color 260ms ease; }
.ogs-job:hover { transform: translateY(-4px); border-color: rgba(253,193,37,0.45); }

/* GLOBAL FAQ.
   The stored markup uses <details>/<summary>. That is kept rather than rebuilt as
   button + aria-expanded + aria-controls: <details> is natively semantic, natively
   keyboard-operable and announces its own expanded state, so replacing it with
   scripted ARIA would be a downgrade that depends on JavaScript to reach the same
   place. What was missing was the visible focus ring and a marker that follows the
   state, and those are added here. */
.ogs-faq__item { transition: border-color 220ms ease; }
.ogs-faq__item[open] { border-color: rgba(253,193,37,0.45); }
.ogs-faq__q { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--ogs-space-3); }
.ogs-faq__q:focus-visible { outline: 3px solid var(--ogs-brand, #FDC125); outline-offset: 3px; }
.ogs-faq__q::after {
	content: ""; margin-left: auto; width: 9px; height: 9px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform 220ms var(--ogs-ico-ease);
}
.ogs-faq__item[open] .ogs-faq__q::after { transform: translateY(1px) rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
	.ogs-path__link, .ogs-path__go, .ogs-member, .ogs-job, .ogs-faq__item, .ogs-faq__q::after,
	.ogs-path__link:hover, .ogs-member:hover, .ogs-job:hover {
		transition: none !important; transform: none !important;
	}
}

/* ==========================================================================
   Wave C — three overflow defects the responsive matrix found
   ==========================================================================

   Measured across 15 viewports x 9 pages = 135 cells on 2026-08-04. Two of these
   are mine and one predates this work; all three are fixed here because a
   horizontal scrollbar is a defect whoever introduced it.
   -------------------------------------------------------------------------- */

/* 1 · MINE, AND A REAL REGRESSION FROM PHASE 6.
   `.ogs-rv--left/right` translate a block 76px sideways in their pre-reveal
   state. On Our Story that variant was pointed at `.ogs-founder`, a full-width
   editorial row - so at 320px a 269px block sat at x=102 and reached 370px,
   giving the document exactly 50px of horizontal overflow before the reveal ran.

   Lateral travel of 76px is wrong on a 320px screen regardless: it is a quarter
   of the viewport. (1.18.0: the lateral variants are gone — no CLAVE family
   translates content sideways by more than 12px — so the width clamps that
   stood here are unnecessary. The clip below stays as the standing guard.) */

/* The clip is the guarantee, the clamp is the design. `clip` rather than
   `hidden`, so this never turns a section into an accidental scroll container. */
.ogs-founder,
.ogs-mascot-story,
.ogs-daynight {
	overflow-x: clip;
}

/* 2 · MINE. The Discover postcard image was 309px inside a 15px gutter at 320px,
   reaching 325 and overflowing the document by 5px. The image had no width
   constraint of its own and was sized by its intrinsic dimensions. */
.ogs-postcard__media {
	overflow: hidden;
	border-radius: 12px;
}

.ogs-postcard__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* 3 · PRE-EXISTING, not introduced by this work. `.ogs-marquee__run` is a
   decorative scrolling ticker whose track is wider than the viewport by design -
   858px at a 320px width - but its container never clipped, so the whole document
   inherited the overflow. Fixed rather than reported, because a horizontal
   scrollbar on the homepage is a defect whoever wrote it, and the fix is one
   property on the element that was always meant to be the window. */
.ogs-marquee {
	overflow: hidden;
	max-width: 100%;
}

/* The postcard media wrapper is a <span> — the whole card is one anchor, so its
   children must be phrasing content. A span is inline by default, which is why
   `overflow: hidden` and a width did nothing to it and Club kept 5px of overflow
   at 320px after the first fix. It needs to be a block to become a box. */
.ogs-postcard__media {
	display: block;
}

.ogs-postcard__link {
	display: block;
	max-width: 100%;
}

/* ==========================================================================
   BLOCK B — navigation · and D-002 — the header at a real 320px
   Added 2026-08-06. Placed last so the cascade is unambiguous: every rule here
   is a deliberate override of a rule stated earlier in this file, and grouping
   them makes the change reviewable in one place rather than in six.
   ========================================================================== */

/* --------------------------------------------------------------------------
   D-002 · the header row fits a real 320px viewport

   Measured, not estimated. At 320px the row needs 32px of inline padding plus a
   147.5px brand plus 174.5px of controls = 354px, against 320px of viewport —
   34px over, with the MENIU button partly off-screen. It had never been seen
   because every earlier sweep ran through mobile emulation, which widens the
   layout viewport to fit the content and reports an overflow of zero.

   The 34px comes back from padding and gaps ONLY. Nothing is removed, nothing
   is shortened, nothing is hidden:

     header inline padding  16 -> 8   x2  = 16px
     pill inline padding    15 -> 8   x4  = 28px
     controls gap           10 -> 8       =  2px
     brand gap              12 -> 8       =  4px

   The tagline stays, both labels keep their full text at their full size, and
   the pills keep `min-height: 44px` — so the touch target is untouched, only
   the air around the text is. `--ogs-pad-inline` is deliberately NOT changed:
   it sets the rhythm of every section on the site, and this is a header
   problem, not a page-width problem.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.ogs-header {
		padding-inline: 8px;
		gap: 8px;
	}

	.ogs-header__controls {
		gap: 8px;
	}

	.ogs-header__controls .ogs-pill {
		padding-inline: 8px;
	}

	.ogs-brand {
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   B.3 · the Club disclosure sits beside its label, not under it

   `.ogs-nav a` is `display: flex`, so it is block-level, and the button the
   walker emits after it was starting a new line — the caret rendered below the
   words instead of beside them. Making the row itself a flex container puts
   them on one line and `align-items: center` does the vertical centring the
   brief asks for.

   `flex-wrap` with a full-width basis on the submenu is what keeps the submenu
   BELOW the row rather than becoming a third item in it. That is the whole
   reason this is a wrapping flex row and not a two-column grid.
   -------------------------------------------------------------------------- */

.ogs-nav > ul > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ogs-nav > ul > li > a {
	flex: 1 1 auto;
	min-width: 0;
}

.ogs-nav > ul > li > .ogs-nav__disclose {
	flex: 0 0 auto;
}

/* The submenu takes a whole row of its own, and is a single column: the
   `auto-fit, minmax(240px, 1fr)` inherited from `.ogs-nav ul` would otherwise
   try to lay eight anchors out in columns inside one menu cell. */
.ogs-nav > ul > li > .ogs-subnav {
	flex: 1 0 100%;
	grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   B.1 + B.2 · three columns at desktop, and every label on one line

   `repeat(auto-fit, minmax(240px, 1fr))` produced FOUR columns of 245px inside
   the 1100px panel at 1280, 1440 and 1920 alike — measured — and five of the
   seven labels wrapped to two lines inside them. Three explicit columns is the
   operator's chosen remedy.

   NO LABEL IS SHORTENED. The type scale is what yields instead. Measured
   intrinsic widths of the longest label, `PETRECERI & CATERING`: 327px at 38px,
   294px at 34px, ~277px at 32px. Each cell must also carry the item number
   (22px) and its gap (14px), so the longest item needs ~313px of a 340px
   column — (1100 - 2x40) / 3 — which fits with room to spare at every desktop
   width.

   `white-space: nowrap` is scoped to this breakpoint on purpose. Below it the
   panel is one column inside a 320px viewport, where a three-word label cannot
   be one line at any legible size, and forcing it would push the label out of
   the panel and reintroduce exactly the horizontal overflow D-002 just closed.
   -------------------------------------------------------------------------- */

/* The tablet band gets TWO columns rather than three, and it is arithmetic
   rather than taste: at 768px the panel is 672px wide inside its 48px padding,
   so three columns would be 197px each — narrower than the shortest label needs
   once the item number and its gap are subtracted. Two columns give 316px,
   which fits the longest label at 26px with room over. Three columns here would
   satisfy "3 columns" and break "every label on one line", and of the two, the
   second is the one the client actually reported. */
@media (min-width: 768px) and (max-width: 899.98px) {

	.ogs-nav > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ogs-nav > ul > li > a {
		white-space: nowrap;
		font-size: clamp(22px, 3.2vw, 26px);
	}
}

@media (min-width: 900px) {

	.ogs-nav > ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ogs-nav > ul > li > a {
		white-space: nowrap;
		font-size: clamp(26px, 2.4vw, 32px);
	}
}

/* ==========================================================================
   BLOCK C — visible defects
   Added 2026-08-06.
   ========================================================================== */

/* --------------------------------------------------------------------------
   C.1 · the primary event action is legible at rest

   F-09, and measured worse than it was reported. At rest the label computed to
   `rgb(253, 193, 37)` on a `rgb(253, 193, 37)` ground — a contrast ratio of
   1.00, which is not "hard to read", it is the same colour. The client saw a
   yellow blank.

   TWO separate faults produced it, and both are fixed here:

     1. `.ogs-evact__btn--primary` set `color: #000`, but `body.ogs-amaizing a`
        is (0,2,1) against its (0,1,0) and simply outranked it. The label was
        never black on this page.
     2. `.ogs-evact__btn:hover` is (0,2,0) against the primary variant's
        (0,1,0), so HOVERING STRIPPED THE SOLID BACKGROUND — the ghost style
        won and the button lost its fill. That is why the text appeared only on
        hover: the ground changed, not the label.

   So the rest state and the hover state are both restated at a specificity
   that wins, and they are now a deliberate inversion rather than two rules
   that happened to collide: yellow ground and dark label at rest, dark ground
   and yellow label on hover, focus and click.

   The icon needs no rule of its own — `.ogs-ico__outline` is `fill:
   currentColor`, so it follows the label into black at rest and back to yellow
   on hover. Block A's own hover rule already paints it `--ogs-brand`, which is
   correct against the dark inverted ground.
   -------------------------------------------------------------------------- */

body.ogs-amaizing a.ogs-evact__btn--primary,
body.ogs-amaizing .ogs-evact__btn--primary,
.ogs-evact__btn--primary {
	background-color: var(--ogs-c-primary, #FDC125);
	border-color: var(--ogs-c-primary, #FDC125);
	color: var(--ogs-c-on-primary, #000000);
}

body.ogs-amaizing a.ogs-evact__btn--primary:hover,
body.ogs-amaizing a.ogs-evact__btn--primary:focus,
body.ogs-amaizing a.ogs-evact__btn--primary:focus-visible,
body.ogs-amaizing a.ogs-evact__btn--primary:active,
body.ogs-amaizing .ogs-evact__btn--primary:hover,
body.ogs-amaizing .ogs-evact__btn--primary:focus-visible,
body.ogs-amaizing .ogs-evact__btn--primary:active,
.ogs-evact__btn--primary:hover,
.ogs-evact__btn--primary:focus-visible,
.ogs-evact__btn--primary:active {
	background-color: var(--ogs-c-on-primary, #000000);
	border-color: var(--ogs-c-primary, #FDC125);
	color: var(--ogs-c-primary, #FDC125);
}

/* --------------------------------------------------------------------------
   C.2 · the rail's scrollbar is hidden, and the rail still scrolls

   Hiding the bar must not disable the behaviour, so `overflow-x: auto` is
   untouched and only the bar's rendering is suppressed. Wheel, drag, touch,
   the arrows and the keyboard all keep working — the track carries `tabindex`
   and remains focusable, which is what keeps it reachable once the visual
   affordance is gone.
   -------------------------------------------------------------------------- */

.ogs-rail__track {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ogs-rail__track::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* --------------------------------------------------------------------------
   C.3 · reduced motion stops the auto-advance

   The interval is not started at all under reduced motion — see ogs-club.js.
   This block is the belt to that braces: the smooth scroll behaviour is also
   removed, so any programmatic scroll that does happen (an arrow click, an
   anchor jump) lands instantly rather than gliding.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ogs-rail__track {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   BLOCK D — the catering configurator gets a container
   Added 2026-08-06.
   ========================================================================== */

/* --------------------------------------------------------------------------
   D.1 · frame, ground, and the section's own rhythm

   The configurator was approved as GOOD — D.2 says its function is untouched,
   and nothing below changes a control, a name, a value or a script. This is a
   surface, and only a surface: no markup was added, so there is no wrapper that
   could reorder the form or come between a label and its input.

   What was wrong is that it had no container at all. `.ogs-config` was a bare
   grid sitting straight on the page ground, so a form with eleven controls read
   as loose parts floating under a heading rather than as one instrument. The
   summary inside it was the only thing with a border, which made the enhancement
   look more solid than the thing it summarises.

   So the form takes the surface and the summary is re-seated on top of it —
   otherwise the summary's near-black ground would now sit on a near-black
   surface and the one element that was correctly distinct would stop being so.
   -------------------------------------------------------------------------- */

.ogs-config {
	padding: clamp(20px, 3vw, 36px);
	background: var(--ogs-c-surface, #141414);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
	border-radius: var(--ogs-radius-lg);
}

/* Lifted off the new surface rather than tinted further: a second yellow wash
   on a yellow-washed panel reads as a rendering fault, not as a hierarchy. */
.ogs-config__summary {
	background: var(--ogs-c-surface-alt, #1A1A1A);
}

/* The controls need to separate from the panel now that the panel is lighter
   than the page. Same hairline the panel uses, so it is one material. */
.ogs-config__num,
.ogs-config__date {
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
}

/* ==========================================================================
   BLOCK E — event cards, the poster model
   Added 2026-08-06.
   ========================================================================== */

/* --------------------------------------------------------------------------
   E.2 · a 2:3 portrait poster, cropped by CSS rather than by cutting files

   `aspect-ratio` plus `object-fit: cover` crops the supplied photograph to
   portrait at render time. No derivative file is written, so the client's
   originals in `provision/assets` stay whole and the framing stays a decision
   that can be changed later rather than one baked into a JPEG.
   -------------------------------------------------------------------------- */

.ogs-railcard__poster {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
}

.ogs-railcard__poster .ogs-railcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   E.3 · the title is text over the picture, not text inside it

   The scrim is what buys the legibility the image would otherwise have to
   provide. It is a gradient rather than a flat panel so the photograph still
   reads at the top of the card, and it is opaque enough at the bottom that the
   title does not depend on which photograph happens to be behind it.
   -------------------------------------------------------------------------- */

.ogs-railcard__overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-1, 4px);
	padding: var(--ogs-space-6) var(--ogs-space-5) var(--ogs-space-5);
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.94) 0%,
		rgba(0, 0, 0, 0.78) 38%,
		rgba(0, 0, 0, 0.30) 72%,
		rgba(0, 0, 0, 0) 100%
	);
}

.ogs-railcard__overlay .ogs-railcard__title {
	font-size: 1.35rem;
}

/* --------------------------------------------------------------------------
   E.4 + E.6 · the actions OVERLAY the poster — they no longer reserve space

   REBUILT 2026-08-06 after looking at the card instead of only measuring it.

   The first version made the action row transparent at rest and left it in
   normal flow. Every assertion passed — hidden at rest, revealed on hover,
   focusable throughout — and the card was visibly broken: 648px tall for a 387px
   poster, so 261px of every card, FORTY PER CENT, was an empty black rectangle
   under a photograph. A test that checks opacity never sees that.

   The reference reveals actions OVER the artwork. So do these. The card is now
   exactly its poster, the actions sit on the poster's lower edge, and the
   existing scrim is deepened on hover so they land on something dark enough to
   read against rather than on whatever the photograph happens to show.

   The title block lifts out of the way rather than being covered — that is what
   makes the reveal read as the card opening up instead of something dropping on
   top of it.
   -------------------------------------------------------------------------- */

.ogs-railcard__actions {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--ogs-space-3) var(--ogs-space-5) var(--ogs-space-5);
}

/* The scrim has to cover the actions as well as the title once they appear. */
.ogs-railcard__overlay {
	transition: padding-bottom var(--ogs-mi-in) var(--ogs-mi-ease),
	            background var(--ogs-mi-in) var(--ogs-mi-ease);
}

/* --------------------------------------------------------------------------
   ONE SET OF RULES, TWO TRIGGERS — restructured 2026-08-10.

   These rules used to live inside `@media (hover: hover)`, with a parallel copy
   under `@media (hover: none)` for touch. That was wrong twice over. It meant two
   descriptions of one behaviour that had to be kept in step, and it put the touch
   half behind a media query **no desktop browser can ever match**, so the only
   place it could be checked was the operator's phone.

   The effect is meant to be identical on both; only the trigger differs — a
   pointer hovers, a finger taps. So there is one set of rules now, revealed by
   `:hover`, by `:focus-within`, or by `.is-open`, which `ogs-club.js` adds on tap.
   Everything downstream — the scrim, the lift, the per-button stagger — follows
   the same selectors and is therefore the same on a phone as on a desktop.

   THE HIDDEN STATE IS GATED ON `html.ogs-tapcards`, WHICH THE SCRIPT SETS.
   Hiding controls is only safe if something can bring them back. If the script
   fails to load or throws before it binds, the class is absent, nothing is
   hidden, and the card falls back to showing its actions — cluttered, but
   reachable. The reveal rules are deliberately NOT gated: they cost nothing when
   nothing is hidden.
   -------------------------------------------------------------------------- */

html.ogs-tapcards .ogs-railcard__actions {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity var(--ogs-mi-in) var(--ogs-mi-ease),
	            transform var(--ogs-mi-in) var(--ogs-mi-ease);
}

.ogs-railcard:hover .ogs-railcard__actions,
.ogs-railcard:focus-within .ogs-railcard__actions,
.ogs-railcard.is-open .ogs-railcard__actions {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Make room by lifting the title, and darken the ground under both. */
.ogs-railcard:hover .ogs-railcard__overlay,
.ogs-railcard:focus-within .ogs-railcard__overlay,
.ogs-railcard.is-open .ogs-railcard__overlay {
	padding-bottom: 112px;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.97) 0%,
		rgba(0, 0, 0, 0.90) 46%,
		rgba(0, 0, 0, 0.42) 78%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* --------------------------------------------------------------------------
   Touch: reachable without hover, and not four stacked slabs

   With no hover there is nothing to reveal with, so the actions are always
   visible — but the first build then stacked four full-width buttons under the
   poster and produced a card about 1300px tall on a phone. One event filled the
   screen and a rail of seven became a scrolling chore.

   Here they are a compact row on the poster itself: the primary action keeps its
   label, the other three become icon-only controls at the 44px target. Same four
   actions, same order, same destinations — a quarter of the height.
   -------------------------------------------------------------------------- */


/* The card grows into the room the track reserves for it. */
.ogs-railcard:hover .ogs-railcard__inner,
.ogs-railcard:focus-within .ogs-railcard__inner {
	transform: translateY(-6px) scale(1.03);
	border-color: rgba(253, 193, 37, 0.5);
}

@media (prefers-reduced-motion: reduce) {

	/* The actions still arrive — they just do not travel. */
	.ogs-railcard__actions {
		transition: none !important;
		transform: none !important;
	}

	.ogs-railcard:hover .ogs-railcard__inner,
	.ogs-railcard:focus-within .ogs-railcard__inner {
		transform: none !important;
	}
}

/* ==========================================================================
   PROVISIONAL TEXT — the T001–T999 review codes
   Added 2026-08-06.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The code is a note to the client, not part of the sentence.

   So it is small, unemphatic, and set on the baseline of the text it belongs to
   rather than floating beside it — the client needs to know WHICH string a code
   refers to, and a code that drifts away from its string answers the wrong
   question.

   `<sup>` already carries the vertical offset; the font-size is reset because a
   superscript at the display face's size would compete with the copy it is
   annotating. It never wraps and never takes part in layout decisions: a
   four-character code that pushed a heading onto a second line would be a code
   that changed the design it is meant to be reviewing.
   -------------------------------------------------------------------------- */

.ogs-t {
	/* Not display:inline-block — that would break the text node the RO/EN
	   toggle matches against, and stop every provisional string translating. */
	font: inherit;
	color: inherit;
}

.ogs-t__code {
	margin-inline-start: 0.35em;
	padding: 0.15em 0.4em;
	border: 1px solid rgba(253, 193, 37, 0.45);
	border-radius: 4px;
	background: rgba(253, 193, 37, 0.10);
	color: var(--ogs-c-primary, #FDC125);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.62em;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	vertical-align: super;
	opacity: 0.85;
	user-select: all; /* one click selects the whole code, ready to quote back */
}

/* A code in a template that is not in the register. Loud on purpose, and only
   ever visible on the private review copy. */
.ogs-t--missing {
	outline: 2px dashed #ff5c5c;
	color: #ff5c5c;
}

/* ==========================================================================
   BLOCK F — the share sheet
   Added 2026-08-06.
   ========================================================================== */

/* --------------------------------------------------------------------------
   An app-style bottom sheet.

   It rises from the bottom edge on every width rather than becoming a centred
   desktop dialog: the brief asks for a sheet, and a control that behaves the same
   way everywhere is one behaviour to learn instead of two. It is capped and
   centred horizontally so it does not become a 1920px-wide strip of four buttons.
   -------------------------------------------------------------------------- */

.ogs-sheet {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.ogs-sheet[hidden] {
	display: none;
}

.ogs-sheet__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(2px);
}

.ogs-sheet__panel {
	position: relative;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	padding: var(--ogs-space-4) var(--ogs-space-5) var(--ogs-space-6);
	background: var(--ogs-c-surface, #141414);
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary);
	border-bottom: 0;
	border-radius: var(--ogs-radius-lg) var(--ogs-radius-lg) 0 0;
	/* Entrance choreography lives in the CLAVE block (clvSheetIn). */
}

/* The panel takes focus first so the dialog is announced before its buttons; it
   is not a control, so it gets no ring of its own. */
.ogs-sheet__panel:focus {
	outline: none;
}

.ogs-sheet__grip {
	width: 40px;
	height: 4px;
	margin: 0 auto var(--ogs-space-4);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
}

.ogs-sheet__title {
	margin: 0 0 var(--ogs-space-1, 4px);
	font-family: var(--ogs-font-display, inherit);
	font-size: 1.15rem;
}

.ogs-sheet__subject {
	margin: 0 0 var(--ogs-space-4);
	font-size: 0.9rem;
	opacity: 0.7;
}

.ogs-sheet__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ogs-space-2);
}

.ogs-sheet__item {
	display: flex;
	align-items: center;
	gap: var(--ogs-space-3);
	width: 100%;
	min-height: 52px;
	padding: 0 var(--ogs-space-4);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--ogs-radius-md);
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--ogs-mi-out) var(--ogs-mi-ease),
	            background-color var(--ogs-mi-out) var(--ogs-mi-ease);
}

.ogs-sheet__item:hover,
.ogs-sheet__item:focus-visible {
	border-color: var(--ogs-c-primary, #FDC125);
	background: rgba(253, 193, 37, 0.10);
}

.ogs-sheet__said {
	margin: var(--ogs-space-3) 0 0;
	min-height: 1.2em;
	font-size: 0.85rem;
	color: var(--ogs-c-primary, #FDC125);
	overflow-wrap: anywhere;
}

.ogs-sheet__close {
	width: 100%;
	min-height: 48px;
	margin-top: var(--ogs-space-4);
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* The page behind must not scroll while the sheet is up — otherwise a wheel over
   the scrim moves the document under the dialog. */
.ogs-sheet-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

	.ogs-sheet__panel {
		animation: none;
	}
}

/* ==========================================================================
   BLOCK G — /club/, the provisional content the sections were missing
   Added 2026-08-06.
   ========================================================================== */

/* --------------------------------------------------------------------------
   5 · Member Rewards — the ladder now says how and what

   The rungs were five names in a row: 160px minimum was ample for one word and
   is nowhere near enough for two sentences, so the track widens. The rung is
   still one column per level — a ladder read left to right is the point of the
   component — it just has something to say now.
   -------------------------------------------------------------------------- */

.ogs-ladder {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.ogs-ladder__how,
.ogs-ladder__perk {
	display: block;
	margin-top: var(--ogs-space-2);
	font-size: 0.88rem;
	line-height: 1.45;
}

/* How you reach the rung: quieter, because it is a condition rather than an
   offer. */
.ogs-ladder__how {
	opacity: 0.72;
}

/* What the rung gives you: the reason to read the column at all, so it carries
   the brand colour and a rule that separates it from the condition above. */
.ogs-ladder__perk {
	padding-top: var(--ogs-space-2);
	border-top: 1px solid rgba(253, 193, 37, 0.22);
	color: var(--ogs-c-primary, #FDC125);
}

/* --------------------------------------------------------------------------
   9 · Become a Member — a category name is not an offer

   Each row was an icon and a heading. The heading names a category and tells the
   reader nothing about what they get, so a line of detail sits under it. The row
   becomes icon + stacked text, which is why the item is a flex row with the text
   in its own column rather than two loose children.
   -------------------------------------------------------------------------- */

.ogs-joinlist {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ogs-joinlist__item {
	align-items: flex-start;
}

.ogs-joinlist__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ogs-joinlist__label {
	font-family: var(--ogs-font-display, inherit);
}

.ogs-joinlist__detail {
	font-size: 0.88rem;
	line-height: 1.45;
	opacity: 0.75;
}

/* 8 · Community Gallery — the two provisional lines above the grid. The invite
   is the quieter of the two: it is an instruction, not a statement about what
   the section is. */
.ogs-club-gallery__intro {
	margin: var(--ogs-space-3) 0 0;
}

.ogs-club-gallery__invite {
	margin: var(--ogs-space-2) 0 0;
	font-size: 0.9rem;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   7 · Discover Latin America — the seven themes

   NOT LINKS, and styled so that is obvious. No pointer cursor, no hover lift,
   no chevron, no underline: every affordance this design uses to say "this is
   clickable" is deliberately absent, because six of the seven themes have no
   article to click through to yet. The real category filters sit below, and
   they only ever list categories that genuinely have posts.
   -------------------------------------------------------------------------- */

.ogs-themes {
	list-style: none;
	margin: var(--ogs-space-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ogs-space-4);
}

.ogs-theme {
	display: flex;
	align-items: flex-start;
	gap: var(--ogs-space-3);
	padding: var(--ogs-space-4);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--ogs-radius-md);
}

.ogs-theme__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ogs-theme__label {
	font-family: var(--ogs-font-display, inherit);
	font-size: 1.02rem;
}

.ogs-theme__text {
	font-size: 0.88rem;
	line-height: 1.45;
	opacity: 0.72;
}

/* ==========================================================================
   BLOCK H — /petreceri-catering/
   Added 2026-08-06.
   ========================================================================== */

/* H.4 · the Most Popular marker. Loud enough to be the recommendation the brief
   asks for, and attached to the card rather than floating over it, so it cannot
   be mistaken for a discount flash. */
.ogs-pack--popular {
	border-color: rgba(253, 193, 37, 0.55);
}

.ogs-pack__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--ogs-space-3);
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(253, 193, 37, 0.14);
	color: var(--ogs-c-primary, #FDC125);
	font-size: 0.74rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

/* H.8 · the FAQ. `<details>` with no script — it opens, closes and announces its
   own state without a line of JavaScript or a single ARIA attribute of ours. */
.ogs-pfaq {
	list-style: none;
	margin: var(--ogs-space-6) 0 0;
	padding: 0;
	display: grid;
	gap: var(--ogs-space-2);
	max-width: 760px;
}

.ogs-pfaq__d {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--ogs-radius-md);
}

.ogs-pfaq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ogs-space-3);
	min-height: 52px;
	padding: var(--ogs-space-3) var(--ogs-space-4);
	cursor: pointer;
	font-family: var(--ogs-font-display, inherit);
	list-style: none;
}

.ogs-pfaq__q::-webkit-details-marker {
	display: none;
}

/* The disclosure sign is drawn here rather than left to the browser's default
   triangle, which cannot be styled consistently across engines. */
.ogs-pfaq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--ogs-c-primary, #FDC125);
}

.ogs-pfaq__d[open] .ogs-pfaq__q::after {
	content: "\2212";
}

.ogs-pfaq__q:hover,
.ogs-pfaq__q:focus-visible {
	color: var(--ogs-c-primary, #FDC125);
}

.ogs-pfaq__a {
	padding: 0 var(--ogs-space-4) var(--ogs-space-4);
	font-size: 0.94rem;
	line-height: 1.55;
	opacity: 0.82;
}

.ogs-pfaq__a p {
	margin: 0;
}

/* ==========================================================================
   CLAVE — the A-MAÍZ-ING motion language · 1.18.0
   ==========================================================================

   One block, one system. Concept, scales and scarcity rules are documented in
   docs/MOTION-LANGUAGE-CLAVE.md; this is their only implementation. The name
   is the rule: every choreography is PHRASED — a lead voice calls (title,
   number, primary action), the group answers on the tresillo (3-3-2 on a 45ms
   half-beat: 0 / 135 / 270, groups 360 apart), never on a metronome. Arrivals
   may settle through a small overshoot; exits are always quicker and never
   overshoot; wind-ups exist only where the doc says they may.

   Everything decorative in here is scoped to `html.ogs-motion` (the boot
   contract) or zeroed under prefers-reduced-motion at the end of the block.
   Feedback states (icons, presses, FAQ, sheet) also work without the boot
   class — they are interaction, not decoration — and their reduced-motion
   counterparts make every state arrive instantly.

   The three older token generations (--ogs-motion-*, --ogs-mi-*, --ogs-t-*)
   now ALIAS this scale. Change a value here and the whole site changes tempo;
   change it anywhere else and you have re-created the defect this block
   closed.
   ========================================================================== */

:root {
	/* The beat. 90ms eighth-notes; durations are counted, not invented. */
	--clv-beat: 90ms;
	--clv-2: 180ms;   /* state flips, exits, colour */
	--clv-3: 270ms;   /* small entrances, feedback */
	--clv-4: 360ms;   /* under-pointer movement, panels */
	--clv-6: 540ms;   /* large entrances */
	--clv-8: 720ms;   /* hero phrases, section leads */

	/* The three voices. Lead calls with a ~5% overshoot and settles; follow
	   answers on the proven soft tail; exit leaves without ceremony. */
	--clv-lead: cubic-bezier(0.26, 1.24, 0.36, 1);
	--clv-follow: cubic-bezier(0.22, 1, 0.36, 1);
	--clv-exit: cubic-bezier(0.5, 0, 0.75, 0.3);

	/* Travel. 28px is the ceiling — 44px read as a jump, 14px everywhere read
	   as nothing. Three sizes so families can differ without inventing pixels. */
	--clv-x1: 10px;
	--clv-x2: 18px;
	--clv-x3: 28px;

	/* Per-element delay, written by the engine (tresillo) or by nth-child
	   tables below. */
	--clv-d: 0ms;

	/* --- aliases: the older names now read this scale ------------------- */
	--ogs-t-fast: var(--clv-2);
	--ogs-t-base: var(--clv-4);
	--ogs-t-slow: var(--clv-6);
	--ogs-t-ease: var(--clv-follow);
}

/* --------------------------------------------------------------------------
   The strays, still on the system (retimed through the aliases above).
   These selector lists predate CLAVE; they stay because the components they
   time are real. Their durations now come from the scale.
   -------------------------------------------------------------------------- */

.ogs-railcard__inner,
.ogs-railcard__img,
.ogs-clubcard__link,
.ogs-clubcard__go,
.ogs-legend,
.ogs-mbenefit,
.ogs-whyitem,
.ogs-catitem,
.ogs-expcard__link,
.ogs-expcard__go,
.ogs-theme,
.ogs-nav__chev,
.ogs-rail__btn {
	transition-duration: var(--ogs-t-base);
	transition-timing-function: var(--ogs-t-ease);
}

.ogs-btn,
.ogs-pill,
.ogs-sheet__item,
.ogs-pfaq__q,
.ogs-cats__link {
	transition-duration: var(--ogs-t-fast);
	transition-timing-function: var(--ogs-t-ease);
}

/* ==========================================================================
   1 · THE REVEAL FAMILIES
   ==========================================================================
   The engine (ogs-motion.js) arms an element with `.ogs-rv` plus exactly one
   family class, and adds `.is-in` once — one-way, permanent, exactly as
   before. What changed is that a section no longer animates every paragraph
   separately: furniture gets a call-and-response pair, and grids are armed as
   ONE container whose children follow nth-child tresillo tables.
   ========================================================================== */

html.ogs-motion .ogs-rv {
	will-change: transform, opacity;
}

html.ogs-motion .ogs-rv.is-in {
	will-change: auto;
}

/* --- the call: section titles ------------------------------------------- */

html.ogs-motion .ogs-rv--call {
	opacity: 0;
	transform: translateY(var(--clv-x2));
}

html.ogs-motion .ogs-rv--call.is-in {
	opacity: 1;
	transform: none;
	transition: opacity var(--clv-6) var(--clv-lead) var(--clv-d),
	            transform var(--clv-6) var(--clv-lead) var(--clv-d);
}

/* The clave tick — the site-wide punctuation mark. After a title lands, a
   short brand stroke sweeps under it. Absolutely positioned so it can never
   move layout; motion-layer only, so the no-JS page shows no bar. */
html.ogs-motion .ogs-rv--call {
	position: relative;
}

html.ogs-motion .ogs-rv--call::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 48px;
	height: 2px;
	background: var(--ogs-c-primary, #FDC125);
	transform: scaleX(0);
	transform-origin: left center;
}

html.ogs-motion .ogs-rv--call.is-in::after {
	transform: scaleX(1);
	transition: transform var(--clv-4) var(--clv-follow) calc(var(--clv-d) + var(--clv-6));
}

/* Centred heroes centre their tick. */
html.ogs-motion .ogs-sec--hero .ogs-rv--call::after {
	left: 50%;
	transform: translateX(-50%) scaleX(0);
}

html.ogs-motion .ogs-sec--hero .ogs-rv--call.is-in::after {
	transform: translateX(-50%) scaleX(1);
}

/* --- the response: eyebrow, lede, CTA rows ------------------------------- */

html.ogs-motion .ogs-rv--resp {
	opacity: 0;
	transform: translateY(var(--clv-x1));
}

html.ogs-motion .ogs-rv--resp.is-in {
	opacity: 1;
	transform: none;
	transition: opacity var(--clv-6) var(--clv-follow) var(--clv-d),
	            transform var(--clv-6) var(--clv-follow) var(--clv-d);
}

/* --- editorial: the verse ------------------------------------------------ */
/* Calm blocks of reading. The container rises a little; any photograph inside
   settles from 1.04 into its frame. Least motion per pixel of any family. */

html.ogs-motion .ogs-rv--edit {
	opacity: 0;
	transform: translateY(var(--clv-x2));
}

html.ogs-motion .ogs-rv--edit.is-in {
	opacity: 1;
	transform: none;
	transition: opacity var(--clv-8) var(--clv-follow) var(--clv-d),
	            transform var(--clv-8) var(--clv-follow) var(--clv-d);
}

html.ogs-motion .ogs-rv--edit img {
	transform: scale(1.04);
}

html.ogs-motion .ogs-rv--edit.is-in img {
	transform: none;
	transition: transform var(--clv-8) var(--clv-follow) var(--clv-d);
}

/* --- image: a picture opening its frame ---------------------------------- */
/* Kept from the old layer because it earned its place, retimed to the scale:
   the frame wipes open in six beats while the image settles in eight. */

html.ogs-motion .ogs-rv--image {
	opacity: 1;
	clip-path: inset(0 0 100% 0);
	transform: none;
}

html.ogs-motion .ogs-rv--image img {
	transform: scale(1.06);
}

html.ogs-motion .ogs-rv--image.is-in {
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--clv-6) var(--clv-follow) var(--clv-d);
}

html.ogs-motion .ogs-rv--image.is-in img {
	transform: none;
	transition: transform var(--clv-8) var(--clv-follow) var(--clv-d);
}

/* --- social: the crowd --------------------------------------------------- */
/* Galleries, walls, teams, reviews. Children arrive like prints laid on a
   table: a small alternating tilt that settles to zero, on tresillo delays.
   The ONLY family allowed rotation, and the tilt never exceeds 1.2deg. */

html.ogs-motion .ogs-rv--social {
	opacity: 1; /* the container is a frame; its children carry the entrance */
}

html.ogs-motion .ogs-rv--social > * {
	opacity: 0;
	transform: translateY(var(--clv-x2)) rotate(-1.2deg);
}

html.ogs-motion .ogs-rv--social > *:nth-child(2n) {
	transform: translateY(var(--clv-x2)) rotate(0.8deg);
}

html.ogs-motion .ogs-rv--social > *:nth-child(3n) {
	transform: translateY(var(--clv-x3)) rotate(-0.6deg);
}

html.ogs-motion .ogs-rv--social.is-in > * {
	opacity: 1;
	transform: none;
	transition: opacity var(--clv-6) var(--clv-follow) var(--clv-d),
	            transform var(--clv-6) var(--clv-follow) var(--clv-d);
}

/* Tresillo table — 0/135/270, next group +360. Repeats every six children so
   a long gallery keeps the phrase without trailing forever. */
html.ogs-motion .ogs-rv--social.is-in > *:nth-child(6n+2) { --clv-d: 135ms; }
html.ogs-motion .ogs-rv--social.is-in > *:nth-child(6n+3) { --clv-d: 270ms; }
html.ogs-motion .ogs-rv--social.is-in > *:nth-child(6n+4) { --clv-d: 360ms; }
html.ogs-motion .ogs-rv--social.is-in > *:nth-child(6n+5) { --clv-d: 495ms; }
html.ogs-motion .ogs-rv--social.is-in > *:nth-child(6n)   { --clv-d: 630ms; }

/* --- progression: the build ---------------------------------------------- */
/* Ladders, steps, packages, paths. Strictly sequential — order IS the
   information — with each rung popping through the lead curve. */

html.ogs-motion .ogs-rv--prog {
	opacity: 1;
}

html.ogs-motion .ogs-rv--prog > * {
	opacity: 0;
	transform: translateY(var(--clv-x1)) scale(0.97);
}

html.ogs-motion .ogs-rv--prog.is-in > * {
	opacity: 1;
	transform: none;
	transition: opacity var(--clv-4) var(--clv-lead) var(--clv-d),
	            transform var(--clv-4) var(--clv-lead) var(--clv-d);
}

html.ogs-motion .ogs-rv--prog.is-in > *:nth-child(2) { --clv-d: 180ms; }
html.ogs-motion .ogs-rv--prog.is-in > *:nth-child(3) { --clv-d: 360ms; }
html.ogs-motion .ogs-rv--prog.is-in > *:nth-child(4) { --clv-d: 540ms; }
html.ogs-motion .ogs-rv--prog.is-in > *:nth-child(5) { --clv-d: 720ms; }
html.ogs-motion .ogs-rv--prog.is-in > *:nth-child(n+6) { --clv-d: 900ms; }

/*
 * THE LADDER'S CONNECTOR RAIL IS REMOVED — 2026-08-07, on operator instruction.
 *
 * It drew a hairline at `top: 34px` across the full width of the ladder, to read
 * as a progression rail linking the five rungs. That worked when the rungs were
 * bare icons on the page background. They are cards now, with their own surfaces,
 * and the rail is absolutely positioned on the ladder — so it painted OVER the
 * five cards at icon height instead of running between them, and read exactly as
 * the operator described it: a stray line cutting the cards in half.
 *
 * Not re-aimed, removed. A rail that has to thread between five card surfaces at
 * every breakpoint is a different component from a line drawn across a row, and
 * the ladder already reads as ordered without it — the rungs are numbered.
 *
 * Its reduced-motion counterpart goes with it; a rule that only ever set the
 * finished state of a deleted element is dead weight.
 */

/* The level numbers light in order, a beat after their rung lands. */
html.ogs-motion .ogs-rv--prog .ogs-ladder__num {
	transition: color var(--clv-2) var(--clv-follow) calc(var(--clv-d) + var(--clv-3));
}

html.ogs-motion .ogs-rv--prog.is-in .ogs-ladder__num {
	color: var(--ogs-c-primary, #FDC125);
}

/* --- celebration: the pop ------------------------------------------------ */
/* Legends, event grids, packages. A confident scale-up through the lead
   curve — the strongest ordinary entrance, still no rotation, no confetti. */

html.ogs-motion .ogs-rv--celebr {
	opacity: 1;
}

html.ogs-motion .ogs-rv--celebr > * {
	opacity: 0;
	transform: translateY(var(--clv-x1)) scale(0.94);
}

html.ogs-motion .ogs-rv--celebr.is-in > * {
	opacity: 1;
	transform: none;
	transition: opacity var(--clv-6) var(--clv-lead) var(--clv-d),
	            transform var(--clv-6) var(--clv-lead) var(--clv-d);
}

html.ogs-motion .ogs-rv--celebr.is-in > *:nth-child(6n+2) { --clv-d: 135ms; }
html.ogs-motion .ogs-rv--celebr.is-in > *:nth-child(6n+3) { --clv-d: 270ms; }
html.ogs-motion .ogs-rv--celebr.is-in > *:nth-child(6n+4) { --clv-d: 360ms; }
html.ogs-motion .ogs-rv--celebr.is-in > *:nth-child(6n+5) { --clv-d: 495ms; }
html.ogs-motion .ogs-rv--celebr.is-in > *:nth-child(6n)   { --clv-d: 630ms; }

/* --- utility: the hand-off ----------------------------------------------- */
/* FAQ lists, chips, forms, footers. Fast, tight, no theatrics — these are
   things a reader came to USE. */

html.ogs-motion .ogs-rv--util {
	opacity: 1;
}

html.ogs-motion .ogs-rv--util > * {
	opacity: 0;
	transform: translateY(8px);
}

html.ogs-motion .ogs-rv--util.is-in > * {
	opacity: 1;
	transform: none;
	transition: opacity var(--clv-3) var(--clv-follow) var(--clv-d),
	            transform var(--clv-3) var(--clv-follow) var(--clv-d);
}

html.ogs-motion .ogs-rv--util.is-in > *:nth-child(3n+2) { --clv-d: 90ms; }
html.ogs-motion .ogs-rv--util.is-in > *:nth-child(3n)   { --clv-d: 180ms; }

/* ==========================================================================
   2 · THE HEROES — three downbeats, one per page
   ==========================================================================
   CSS animations with `both` fill, exactly like the old hero intro, for the
   same measured reason: above-the-fold text must not depend on a callback the
   browser may decline to run. The engine only adds classes; if it never runs,
   nothing is hidden.
   ========================================================================== */

/* --- shared line choreography ------------------------------------------- */
/* The engine wraps each hero-title line (a text node the RO/EN walker already
   holds a reference to — wrapping preserves the node) in a span. Line one is
   the call, line two answers three beats later. If the wrap never happens the
   title simply does not animate — it can never be hidden by a wrapper that
   does not exist. */

@keyframes clvLine {
	from { opacity: 0; transform: translateY(var(--clv-x3)); }
	to   { opacity: 1; transform: none; }
}

@keyframes clvRise {
	from { opacity: 0; transform: translateY(var(--clv-x2)); }
	to   { opacity: 1; transform: none; }
}

@keyframes clvSlideIn {
	from { opacity: 0; transform: translateX(-12px); }
	to   { opacity: 1; transform: none; }
}

@keyframes clvPop {
	0%   { opacity: 0; transform: translateY(var(--clv-x1)) scale(0.96); }
	70%  { opacity: 1; transform: translateY(-2px) scale(1.015); }
	100% { opacity: 1; transform: none; }
}

/* The wind-up: a small counter-dip before the release. Heroes only. */
@keyframes clvWindup {
	0%   { opacity: 0; transform: translateY(var(--clv-x2)); }
	28%  { opacity: 0.55; transform: translateY(calc(var(--clv-x2) + 6px)); }
	100% { opacity: 1; transform: none; }
}

/* The title is silent until the engine has split it into lines — hidden from
   FIRST PAINT under the motion class, so there is no flash of visible text
   being re-hidden when the deferred script lands (measured live: 530ms of
   visible-then-vanished furniture before this rule existed). If the engine
   never arrives, the boot watchdog strips `ogs-motion` at 2.5s and the title
   renders plain. */
html.ogs-motion .ogs-hero--home .ogs-hero__title {
	opacity: 0;
}

html.ogs-motion .ogs-hero--home .ogs-hero__title.is-phrased {
	opacity: 1;
}

html.ogs-motion .ogs-hero--home .ogs-hero__title .ogs-clv-line {
	display: inline-block;
	animation: clvLine var(--clv-8) var(--clv-lead) both;
	animation-delay: var(--clv-d, 0ms);
}

/* --- HOME: the downbeat -------------------------------------------------- */
/* Image immediate (LCP untouched, Ken Burns keeps its slow drift). Line one
   lands on the one, line two on the and-of-two, the eyebrow syncopates in
   late from the left, lede and CTAs answer; the primary CTA pops, the ghost
   answers 135ms behind it. Whole phrase: 1.1s. */

html.ogs-motion .ogs-hero--home .ogs-eyebrow {
	animation: clvSlideIn var(--clv-4) var(--clv-follow) 540ms both;
}

html.ogs-motion .ogs-hero--home .ogs-hero__lede,
html.ogs-motion .ogs-hero--home .ogs-sec__lede {
	animation: clvRise var(--clv-6) var(--clv-follow) 630ms both;
}

html.ogs-motion .ogs-hero--home .ogs-cta-row > :first-child {
	animation: clvPop var(--clv-6) var(--clv-lead) 720ms both;
}

html.ogs-motion .ogs-hero--home .ogs-cta-row > :nth-child(2) {
	animation: clvRise var(--clv-6) var(--clv-follow) 855ms both;
}

/* Prose-page and secondary heroes (story, careers, FAQ): one quiet rise from
   first paint, no per-element phrase — their content is the phrase. */
html.ogs-motion .ogs-sec--hero:not(.ogs-hero--home):not(.ogs-club-hero):not(.ogs-parties-hero) .ogs-hero__inner > * {
	animation: clvRise var(--clv-6) var(--clv-follow) both;
}

html.ogs-motion .ogs-sec--hero:not(.ogs-hero--home):not(.ogs-club-hero):not(.ogs-parties-hero) .ogs-hero__inner > :nth-child(2) {
	animation-delay: 135ms;
}

html.ogs-motion .ogs-sec--hero:not(.ogs-hero--home):not(.ogs-club-hero):not(.ogs-parties-hero) .ogs-hero__inner > :nth-child(n+3) {
	animation-delay: 270ms;
}

/* --- CLUB: the door opens ------------------------------------------------ */
/* Belonging reads as being let in: the title wipes upward out of a clipped
   line, the lede follows, and Join Free lands with the STAMP — one of its
   three sanctioned uses. */

@keyframes clvWipeUp {
	from { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(14px); }
	to   { opacity: 1; clip-path: inset(0 0 -8% 0); transform: none; }
}

@keyframes clvStamp {
	0%   { opacity: 0; transform: scale(1.12); }
	62%  { opacity: 1; transform: scale(0.985); }
	100% { opacity: 1; transform: scale(1); }
}

html.ogs-motion .ogs-club-hero .ogs-club-hero__title {
	animation: clvWipeUp var(--clv-8) var(--clv-follow) 90ms both;
}

html.ogs-motion .ogs-club-hero .ogs-eyebrow {
	animation: clvSlideIn var(--clv-4) var(--clv-follow) 0ms both;
	/* the eyebrow tracks open like a door badge settling */
	letter-spacing: 0.3em;
	transition: letter-spacing var(--clv-8) var(--clv-follow) 90ms;
}

html.ogs-motion .ogs-club-hero .ogs-club-hero__lede {
	animation: clvRise var(--clv-6) var(--clv-follow) 450ms both;
}

html.ogs-motion .ogs-club-hero .ogs-cta-row > :first-child {
	animation: clvStamp var(--clv-6) var(--clv-lead) 630ms both;
}

html.ogs-motion .ogs-club-hero .ogs-club-hero__note {
	animation: clvRise var(--clv-4) var(--clv-follow) 810ms both;
}

/* --- PARTIES: the build-up ----------------------------------------------- */
/* Anticipation, then release: the title winds up before it lands; the two
   CTAs enter from opposite sides and meet; one diagonal light pass crosses
   the hero band once. Celebration without confetti. */

html.ogs-motion .ogs-parties-hero .ogs-sec__title {
	animation: clvWindup var(--clv-8) var(--clv-lead) 90ms both;
}

html.ogs-motion .ogs-parties-hero .ogs-eyebrow {
	animation: clvSlideIn var(--clv-4) var(--clv-follow) 0ms both;
}

html.ogs-motion .ogs-parties-hero .ogs-sec__lede {
	animation: clvRise var(--clv-6) var(--clv-follow) 540ms both;
}

@keyframes clvFromLeft {
	from { opacity: 0; transform: translateX(-24px); }
	to   { opacity: 1; transform: none; }
}

@keyframes clvFromRight {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: none; }
}

html.ogs-motion .ogs-parties-hero .ogs-cta-row > :first-child {
	animation: clvFromLeft var(--clv-6) var(--clv-lead) 675ms both;
}

html.ogs-motion .ogs-parties-hero .ogs-cta-row > :nth-child(2) {
	animation: clvFromRight var(--clv-6) var(--clv-lead) 810ms both;
}

/* The single light pass. A translated gradient, deliberately NOT a glow —
   the halo belongs to the logo alone. */
@keyframes clvSweep {
	from { transform: translateX(-130%) skewX(-18deg); }
	to   { transform: translateX(230%) skewX(-18deg); }
}

html.ogs-motion .ogs-parties-hero {
	position: relative;
	overflow: hidden;
}

html.ogs-motion .ogs-parties-hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 34%;
	background: linear-gradient(100deg,
		transparent 0%,
		rgba(253, 193, 37, 0.05) 45%,
		rgba(255, 255, 255, 0.045) 52%,
		transparent 100%);
	pointer-events: none;
	transform: translateX(-130%) skewX(-18deg);
	/*
	 * `both` REMOVED 2026-08-07 — it left the same permanent artefact that was
	 * reported on the popular package card, and found here while fixing that one.
	 *
	 * clvSweep ends at translateX(230%). At `width: 34%` that puts the panel across
	 * 78.2%..112.2% of the hero, and `overflow: hidden` cuts it to a hard vertical
	 * at 100% — so a 21.8%-wide sheared panel stayed parked against the right edge
	 * for the life of the page. The forwards fill was holding a final keyframe that
	 * is not off-stage.
	 *
	 * With no fill the element reverts to its own declared transform after the
	 * sweep — translateX(-130%), fully off-stage left. The sweep itself is
	 * unchanged: same curve, same duration, same delay, same single pass. Only the
	 * residue is gone. The backwards half of `both` was doing nothing either, since
	 * the `from` keyframe and the declared transform are the same value.
	 */
	animation: clvSweep 1080ms var(--clv-follow) 630ms 1;
}

/* ==========================================================================
   3 · NAVIGATION — the descarga
   ==========================================================================
   The panel curtains in fast; each item is a call-and-response PAIR: the
   counter number drops in on the lead curve, its label answers 90ms later
   (the engine wraps each label's text node in .ogs-nav__txt — same node, so
   RO/EN keeps working). The panel is interactive from the first frame:
   nothing below blocks the pointer, and focus is given immediately.
   ========================================================================== */

@keyframes clvCurtain {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes clvNumIn {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 0.55; transform: none; }
}

@keyframes clvLabelIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

html.ogs-motion .ogs-navpanel:not([hidden]) {
	animation: clvCurtain var(--clv-4) var(--clv-follow) both;
}

html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-navpanel__head {
	animation: clvRise var(--clv-4) var(--clv-follow) 90ms both;
}

/* Numbers call... (the counter lives on li::before) */
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li::before {
	animation: clvNumIn var(--clv-4) var(--clv-lead) both;
	animation-delay: var(--clv-d, 90ms);
}

/* ...labels respond, one beat behind their number. */
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav .ogs-nav__txt {
	display: inline-block;
	animation: clvLabelIn var(--clv-4) var(--clv-follow) both;
	animation-delay: calc(var(--clv-d, 90ms) + 90ms);
}

/* Tresillo across the seven items — compressed to the 45ms half-beat so the
   whole menu is legible inside a second: a menu is an instrument, not an
   overture. Last label settles ~945ms after the toggle. */
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li:nth-child(1) { --clv-d: 45ms; }
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li:nth-child(2) { --clv-d: 135ms; }
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li:nth-child(3) { --clv-d: 225ms; }
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li:nth-child(4) { --clv-d: 270ms; }
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li:nth-child(5) { --clv-d: 360ms; }
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li:nth-child(6) { --clv-d: 450ms; }
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li:nth-child(7) { --clv-d: 495ms; }

/* The contact block and footer rows of the panel follow the menu. */
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-navpanel__address,
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-navpanel__mascot,
html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-navpanel__foot {
	animation: clvRise var(--clv-6) var(--clv-follow) 700ms both;
}

/* The Club caret turns with its disclosure. */
.ogs-nav__chev {
	transition: transform var(--clv-3) var(--clv-lead);
}

[aria-expanded="true"] > .ogs-nav__chev,
[aria-expanded="true"] .ogs-nav__chev {
	transform: rotate(180deg);
}

/* The submenu cascades on its own smaller phrase. */
html.ogs-motion [data-ogs-subnav]:not([hidden]) .ogs-subnav__link {
	animation: clvLabelIn var(--clv-3) var(--clv-follow) both;
}

html.ogs-motion [data-ogs-subnav]:not([hidden]) li:nth-child(3n+2) .ogs-subnav__link { animation-delay: 90ms; }
html.ogs-motion [data-ogs-subnav]:not([hidden]) li:nth-child(3n)   .ogs-subnav__link { animation-delay: 180ms; }

/* Closing is designed, not dropped: the engine holds the panel for one fast
   exit before [hidden] lands. Items leave together — a menu should get out
   of the way as one thing. */
html.ogs-motion .ogs-navpanel.is-closing {
	animation: clvPanelOut var(--clv-3) var(--clv-exit) both;
	/* A closing panel is scenery: it must never intercept the click the
	   reader is already making on the page behind it. */
	pointer-events: none;
}

@keyframes clvPanelOut {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(-1.5%); }
}

/* ==========================================================================
   4 · THE EVENT CARD — depth instead of Netflix
   ==========================================================================
   Rest: poster and title. Hover/focus: the card lifts while the IMAGE inside
   moves a touch less (two planes, real depth), the scrim deepens, the title
   lifts, and the four actions arrive as a phrase — primary calls with a pop,
   the three circles answer on the tresillo. Exit: everything leaves together,
   fast, no wake.
   ========================================================================== */

/* Two planes: frame first, image slightly behind it. */
.ogs-railcard:hover .ogs-railcard__inner,
.ogs-railcard:focus-within .ogs-railcard__inner {
	transform: translateY(-6px) scale(1.03);
	border-color: rgba(253, 193, 37, 0.5);
	transition-timing-function: var(--clv-lead);
}

.ogs-railcard__img {
	transition: transform var(--ogs-t-base) var(--ogs-t-ease);
}

.ogs-railcard:hover .ogs-railcard__img,
.ogs-railcard:focus-within .ogs-railcard__img {
	transform: scale(1.045) translateY(2px);
}

/*
 * UNWRAPPED FROM `@media (hover: hover)` — 2026-08-10.
 *
 * The stagger is not a hover embellishment, it IS the reveal: the row arrives as
 * one plane and the controls answer 3-3-2 behind it. Leaving it behind a pointer
 * query meant a phone got the fade and none of the phrasing, which is precisely
 * the "not one-to-one with desktop" the operator kept reporting.
 *
 * Nothing here needs a pointer. The hidden state is still gated on
 * `html.ogs-tapcards`, so if the script never runs the buttons are simply visible.
 */

/* The action phrase. The row fades in as one plane... */
.ogs-railcard:hover .ogs-railcard__actions,
.ogs-railcard:focus-within .ogs-railcard__actions,
.ogs-railcard.is-open .ogs-railcard__actions {
	transition-timing-function: var(--clv-follow);
}

/* ...and inside it each control has its own beat. */
html.ogs-tapcards .ogs-railcard__actions .ogs-evact__btn {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--clv-3) var(--clv-follow) 0ms,
	            transform var(--clv-3) var(--clv-follow) 0ms;
}

.ogs-railcard:hover .ogs-railcard__actions .ogs-evact__btn,
.ogs-railcard:focus-within .ogs-railcard__actions .ogs-evact__btn,
.ogs-railcard.is-open .ogs-railcard__actions .ogs-evact__btn {
	opacity: 1;
	transform: none;
}

/* Primary pops on the lead curve; the circles answer 3-3-2. */
.ogs-railcard:hover .ogs-railcard__actions .ogs-evact__btn:first-child,
.ogs-railcard:focus-within .ogs-railcard__actions .ogs-evact__btn:first-child,
.ogs-railcard.is-open .ogs-railcard__actions .ogs-evact__btn:first-child {
	transition-timing-function: var(--clv-lead);
}

.ogs-railcard:hover .ogs-railcard__actions .ogs-evact__btn:nth-child(2),
.ogs-railcard:focus-within .ogs-railcard__actions .ogs-evact__btn:nth-child(2),
.ogs-railcard.is-open .ogs-railcard__actions .ogs-evact__btn:nth-child(2) {
	transition-delay: 135ms, 135ms;
}

.ogs-railcard:hover .ogs-railcard__actions .ogs-evact__btn:nth-child(3),
.ogs-railcard:focus-within .ogs-railcard__actions .ogs-evact__btn:nth-child(3),
.ogs-railcard.is-open .ogs-railcard__actions .ogs-evact__btn:nth-child(3) {
	transition-delay: 270ms, 270ms;
}

.ogs-railcard:hover .ogs-railcard__actions .ogs-evact__btn:nth-child(4),
.ogs-railcard:focus-within .ogs-railcard__actions .ogs-evact__btn:nth-child(4),
.ogs-railcard.is-open .ogs-railcard__actions .ogs-evact__btn:nth-child(4) {
	transition-delay: 360ms, 360ms;
}


/* Touch keeps the permanent compact row — no hover, no phrase, no penalty. */

/* ==========================================================================
   5 · THE CAROUSEL RING — five seconds made visible
   ==========================================================================
   A hairline ring drawn around the NEXT arrow fills over the auto-advance
   interval. It pauses exactly when the advance pauses (hover and focus live
   on the rail, so the selectors agree with the JS by construction), restarts
   on every advance or manual step, and never exists under reduced motion
   because the engine never injects it there.
   ========================================================================== */

.ogs-rail__btn {
	/* The ring's containing block. Without this the SVG's inset: 0 resolves
	   against the page and a 20px circle becomes a page-wide arc — seen once
	   on the local harness, never to be seen again. */
	position: relative;
}

.ogs-clv-ring {
	position: absolute;
	inset: -3px;
	pointer-events: none;
	transform: rotate(-90deg);
}

.ogs-clv-ring circle {
	fill: none;
	stroke: var(--ogs-c-primary, #FDC125);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 126;
	stroke-dashoffset: 126;
	opacity: 0.55;
}

.ogs-clv-ring.is-running circle {
	animation: clvRing 5s linear both;
}

@keyframes clvRing {
	from { stroke-dashoffset: 126; }
	to   { stroke-dashoffset: 0; }
}

/* Reading pauses the countdown — same triggers that pause the interval. */
.ogs-rail:hover .ogs-clv-ring.is-running circle,
.ogs-rail:focus-within .ogs-clv-ring.is-running circle {
	animation-play-state: paused;
}

/* ==========================================================================
   6 · THE SHARE SHEET — an app moment
   ==========================================================================
   Scrim settles, the panel rises through the lead curve, the four options
   answer on the tresillo, confirmation is a state change on the row itself.
   Closing plays a fast exit before [hidden] lands (engine holds it, exactly
   like the nav panel).
   ========================================================================== */

@keyframes clvScrimIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes clvSheetIn {
	0%   { opacity: 0; transform: translateY(9%); }
	72%  { opacity: 1; transform: translateY(-0.6%); }
	100% { opacity: 1; transform: none; }
}

@keyframes clvSheetOut {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(8%); }
}

.ogs-sheet__scrim {
	animation: clvScrimIn var(--clv-3) var(--clv-follow) both;
}

.ogs-sheet__panel {
	animation: clvSheetIn var(--clv-6) var(--clv-lead) both;
}

.ogs-sheet__list li {
	opacity: 0;
	transform: translateY(10px);
	animation: clvLabelIn var(--clv-3) var(--clv-follow) both;
}

.ogs-sheet__list li:nth-child(1) { animation-delay: 135ms; }
.ogs-sheet__list li:nth-child(2) { animation-delay: 270ms; }
.ogs-sheet__list li:nth-child(3) { animation-delay: 360ms; }
.ogs-sheet__list li:nth-child(4) { animation-delay: 495ms; }

.ogs-sheet__close {
	animation: clvLabelIn var(--clv-3) var(--clv-follow) 585ms both;
	opacity: 0;
}

/* Copy confirmed: the row itself says so — a brief surface flash, once. */
@keyframes clvConfirm {
	0%   { background-color: rgba(253, 193, 37, 0.22); }
	100% { background-color: transparent; }
}

.ogs-sheet__item.is-confirmed {
	animation: clvConfirm var(--clv-8) var(--clv-follow) both;
}

.ogs-sheet__said:not(:empty) {
	animation: clvRise var(--clv-3) var(--clv-follow) both;
}

/* Closing. A fading sheet must not eat clicks either. */
.ogs-sheet.is-closing {
	pointer-events: none;
}

.ogs-sheet.is-closing .ogs-sheet__panel {
	animation: clvSheetOut var(--clv-3) var(--clv-exit) both;
}

.ogs-sheet.is-closing .ogs-sheet__scrim {
	animation: clvScrimIn var(--clv-3) var(--clv-exit) reverse both;
	animation-delay: 60ms;
}

.ogs-sheet.is-closing .ogs-sheet__list li,
.ogs-sheet.is-closing .ogs-sheet__close {
	animation: none;
	opacity: 1;
}

/* ==========================================================================
   7 · FAQ — a controlled disclosure
   ==========================================================================
   Native <details> semantics stay. Opening: the box opens at once (layout is
   never animated), the ANSWER fades down into place, the drawn plus turns
   into a close mark. Closing: the engine lets a fast exit play, then closes.
   ========================================================================== */

/* The indicator is drawn, not typed: two bars, so it can rotate. */
.ogs-pfaq__q::after {
	content: "";
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--ogs-c-primary, #FDC125), var(--ogs-c-primary, #FDC125)) center / 14px 2px no-repeat,
		linear-gradient(var(--ogs-c-primary, #FDC125), var(--ogs-c-primary, #FDC125)) center / 2px 14px no-repeat;
	transition: transform var(--clv-3) var(--clv-lead);
}

.ogs-pfaq__d[open] .ogs-pfaq__q::after {
	content: "";
	transform: rotate(225deg);
}

html.ogs-motion .ogs-pfaq__d.is-opening .ogs-pfaq__a {
	animation: clvRise var(--clv-3) var(--clv-follow) both;
}

html.ogs-motion .ogs-pfaq__d.is-closing .ogs-pfaq__a {
	animation: clvSheetOut var(--clv-2) var(--clv-exit) both;
}

.ogs-pfaq__q:focus-visible {
	outline: var(--ogs-focus-width, 3px) solid var(--ogs-focus-on-dark, #fff);
	outline-offset: calc(-1 * var(--ogs-focus-width, 3px));
	border-radius: var(--ogs-radius-md);
}

/* ==========================================================================
   8 · THE CONFIGURATOR — tactile feedback
   ==========================================================================
   Feedback, never layout. Picking an option presses it; the summary
   acknowledges every change with one border flash; the copy action confirms
   on the button itself. All state classes are set by ogs-club.js and clear
   themselves.
   ========================================================================== */

@keyframes clvPress {
	0%   { transform: scale(1); }
	38%  { transform: scale(0.965); }
	74%  { transform: scale(1.015); }
	100% { transform: scale(1); }
}

html.ogs-motion .ogs-config__opt.is-picked {
	animation: clvPress var(--clv-3) var(--clv-lead) both;
}

@keyframes clvAck {
	0%   { border-color: rgba(253, 193, 37, 0.75); }
	100% { border-color: var(--ogs-c-hairline-primary, rgba(253, 193, 37, 0.35)); }
}

html.ogs-motion .ogs-config__summary.is-updated {
	animation: clvAck var(--clv-8) var(--clv-follow) both;
}

.ogs-config__range::-webkit-slider-thumb {
	transition: transform var(--clv-2) var(--clv-lead);
}

.ogs-config__range:active::-webkit-slider-thumb {
	transform: scale(1.18);
}

.ogs-config__range::-moz-range-thumb {
	transition: transform var(--clv-2) var(--clv-lead);
}

.ogs-config__range:active::-moz-range-thumb {
	transform: scale(1.18);
}

html.ogs-motion .ogs-config__num.is-updated {
	animation: clvPress var(--clv-3) var(--clv-lead) both;
}

/* The copy control borrows the sheet's confirmation flash. */
html.ogs-motion .ogs-config .is-confirmed {
	animation: clvConfirm var(--clv-8) var(--clv-follow) both;
}

/* ==========================================================================
   9 · PARTY PACKAGES — one sanctioned stamp
   ==========================================================================
   The packages arrive as progression; when the group lands, the Most Popular
   badge stamps once and a single shine crosses its card border. On
   comparison (hovering a sibling) the popular card calms instead of
   competing. Prices never move.
   ========================================================================== */

html.ogs-motion .ogs-rv--prog.is-in .ogs-pack--popular .ogs-pack__badge {
	animation: clvStamp var(--clv-6) var(--clv-lead) both;
	animation-delay: calc(var(--clv-d) + var(--clv-6));
}

/*
 * REMOVED 2026-08-07 — the sweep on the popular package left a permanent artefact.
 *
 * It was a 40%-wide skewed gradient panel animated from translateX(-130%) to
 * translateX(230%) with fill mode `both`. `both` holds the LAST keyframe forever,
 * and the last keyframe is not off-stage: at 230% the panel spans 92%..132% of the
 * card, so an 8% slice stayed parked against the right edge, sheared to 18° and
 * cut to a hard vertical by the `overflow: hidden` that existed to clip it. The
 * result read as a permanent glass corner on the middle card only — reported by
 * the operator on 2026-08-07 and removed on instruction.
 *
 * The lesson generalises and is worth keeping: a sweep must end OFF the element,
 * or it must not use `both`. Every other CLAVE performance ends on its own resting
 * state, which is why this was the only one that left a mark.
 *
 * `overflow: hidden` and `position: relative` go with it — they existed only to
 * contain this pseudo-element, and clipping a card that no longer has anything to
 * clip would only threaten a focus ring.
 *
 * The star badge's own stamp performance is untouched; it is not the glow.
 */

/* Comparing: the winner steps back politely while you look elsewhere. */
.ogs-pack--popular {
	transition: opacity var(--clv-4) var(--clv-follow),
	            filter var(--clv-4) var(--clv-follow);
}

.ogs-packs:hover .ogs-pack--popular:not(:hover) {
	opacity: 0.88;
	filter: saturate(0.9);
}

/* ==========================================================================
   10 · STICKY ORDER BAR — contextual presence
   ==========================================================================
   The bar keeps its scroll-trigger, its inert contract and its two actions.
   New: when a section's own primary CTA row (or the reservation section) is
   on screen, the bar YIELDS — it steps out of the frame instead of competing
   — and returns when the moment passes. ogs-ui.js drives `.is-yielding` from
   one IntersectionObserver and keeps [inert] in sync.
   ========================================================================== */

.ogs-orderbar {
	transition: transform var(--clv-4) var(--clv-follow),
	            opacity var(--clv-3) var(--clv-follow);
}

.ogs-orderbar.is-visible {
	transition-timing-function: var(--clv-lead), var(--clv-follow);
}

.ogs-orderbar.is-visible.is-yielding {
	transform: translateY(130%);
	opacity: 0;
	pointer-events: none;
	transition: transform var(--clv-3) var(--clv-exit),
	            opacity var(--clv-2) var(--clv-exit);
}

/* ==========================================================================
   11 · SMALL BRAND CONSTANTS
   ========================================================================== */

/* The marquee yields to a reader: pointing at it pauses it. */
.ogs-marquee:hover .ogs-marquee__run,
.ogs-marquee:focus-within .ogs-marquee__run {
	animation-play-state: paused;
}

/* ==========================================================================
   11b · THE HAND-DRAWN SET — eleven icons that perform
   ==========================================================================
   Second operator instruction of the evening: the library glyphs and their
   verb layer were not good enough. These eleven icons are drawn for this
   project (partials/icons.php, `clv-*` names), each from NAMED PARTS, and
   this block is their stage: the flame flickers apart from its cake, the
   needle hunts apart from its dial, the lid peeks off the gift, the steam
   rises off the arepa. One trigger grammar for all of them — section entry
   (`.clv-play`, stamped on the tresillo by ogs-club.js), pointer hover,
   keyboard focus, tap — every performance plays ONCE and returns to rest.
   Timing and curves are CLAVE tokens; nothing loops; nothing glows.

   Part transforms use `transform-box: view-box` with explicit origins in
   viewBox units, so a pivot is a number here, not an accident of a bounding
   box.
   ========================================================================== */

/* --- the drawing language ------------------------------------------------ */

.ogs-ico .ci {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ogs-ico .ci-y {
	fill: var(--ogs-brand, #FDC125);
	stroke: none;
}

.ogs-ico .ci-ys {
	fill: none;
	stroke: var(--ogs-brand, #FDC125);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ogs-ico .ogs-ico__svg [class^="ci-"],
.ogs-ico .ogs-ico__svg [class*=" ci-"] {
	transform-box: view-box;
	transform-origin: 24px 24px;
}

/* The set is TWO-TONE by design — near-white structure, brand-yellow accents —
   and it stays two-tone in every state: the older card rules paint their icon
   solid brand on rest or hover, which would flatten eleven drawings into
   silhouettes. The accents carry the yellow; the performance carries the pop. */
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend) .ogs-ico[class*="--clv-"],
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, :active) .ogs-ico[class*="--clv-"] {
	color: var(--ogs-c-heading, #FFFFFF);
}

/* Rest states that differ from "just drawn". */
.ogs-ico--clv-mic .ci-micg      { transform: rotate(-14deg); transform-origin: 22px 26px; }
.ogs-ico--clv-stamp100 .ci-ring { opacity: 0; }
.ogs-ico--clv-heartbeat .ci-pulse { stroke-dasharray: 60; stroke-dashoffset: 0; }
.ogs-ico--clv-arepa .ci-steam   { stroke-dasharray: 26; stroke-dashoffset: 0; }

/* --- the performances ---------------------------------------------------- */

/* Maracas: left hand calls, right hand answers a beat later. */
@keyframes clvMarA {
	0% { transform: rotate(0); } 18% { transform: rotate(-13deg); }
	38% { transform: rotate(9deg); } 58% { transform: rotate(-6deg); }
	78% { transform: rotate(3deg); } 100% { transform: rotate(0); }
}

@keyframes clvZa {
	0%, 55% { opacity: 0; transform: scale(0.6); }
	70% { opacity: 1; transform: scale(1.1); }
	100% { opacity: 0; transform: scale(1.2); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-maracas .ci-mar-l { animation: clvMarA var(--clv-8) var(--clv-lead) 1 both; transform-origin: 24px 40px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-maracas .ci-mar-r { animation: clvMarA var(--clv-8) var(--clv-lead) 90ms 1 both; transform-origin: 24px 40px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-maracas .ci-za1 { animation: clvZa var(--clv-8) var(--clv-follow) 1 both; transform-origin: 6px 19px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-maracas .ci-za2 { animation: clvZa var(--clv-8) var(--clv-follow) 135ms 1 both; transform-origin: 42px 19px; }

/* Trophy: raised with pride; the star spins to attention. */
@keyframes clvLiftCup {
	0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-3.5px) rotate(-3deg); }
	70% { transform: translateY(-2px) rotate(2deg); } 100% { transform: translateY(0) rotate(0); }
}

@keyframes clvStarSpin {
	0% { transform: rotate(0) scale(1); } 40% { transform: rotate(-32deg) scale(1.3); }
	100% { transform: rotate(0) scale(1); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-trophy .ci-cupg { animation: clvLiftCup var(--clv-8) var(--clv-lead) 1 both; transform-origin: 24px 40px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-trophy .ci-star { animation: clvStarSpin var(--clv-6) var(--clv-lead) 180ms 1 both; transform-origin: 24px 8px; }

/* Gift: the lid peeks open and settles shut; the spark pops while it can. */
@keyframes clvPeek {
	0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-5.5px) rotate(-9deg); }
	55% { transform: translateY(-4px) rotate(-7deg); } 100% { transform: translateY(0) rotate(0); }
}

@keyframes clvSparkPop {
	0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(12deg); }
	100% { transform: scale(1); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-gift .ci-lidg { animation: clvPeek var(--clv-8) var(--clv-lead) 1 both; transform-origin: 36px 19px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-gift .ci-spark { animation: clvSparkPop var(--clv-6) var(--clv-lead) 210ms 1 both; transform-origin: 40px 9px; }

/* Heart: two beats with their peaks on the tresillo; the pulse re-draws. */
@keyframes clvBeat {
	0% { transform: scale(1); } 14% { transform: scale(1.16); } 26% { transform: scale(1); }
	40% { transform: scale(1.12); } 58% { transform: scale(1); } 100% { transform: scale(1); }
}

@keyframes clvPulseDraw {
	0% { stroke-dashoffset: 60; } 15% { stroke-dashoffset: 60; }
	70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-heartbeat .ci-heartg { animation: clvBeat var(--clv-8) var(--clv-lead) 1 both; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-heartbeat .ci-pulse { animation: clvPulseDraw var(--clv-8) var(--clv-follow) 1 both; }

/* Compass: the needle hunts, the dial breathes against it, the hub holds. */
@keyframes clvHunt {
	0% { transform: rotate(0); } 25% { transform: rotate(-38deg); } 52% { transform: rotate(24deg); }
	74% { transform: rotate(-12deg); } 90% { transform: rotate(5deg); } 100% { transform: rotate(0); }
}

@keyframes clvDialNudge {
	0% { transform: rotate(0); } 40% { transform: rotate(3deg); } 100% { transform: rotate(0); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-compass .ci-needle { animation: clvHunt var(--clv-8) var(--clv-lead) 1 both; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-compass .ci-dial,
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-compass .ci-ticks { animation: clvDialNudge var(--clv-8) var(--clv-follow) 1 both; }

/* Polaroid: the flash fires, the frame snaps, the photo develops. */
@keyframes clvFlashTick {
	0% { opacity: 1; transform: scale(1); } 18% { opacity: 1; transform: scale(1.35); }
	40%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes clvSnapTilt {
	0% { transform: rotate(0); } 30% { transform: rotate(-4deg); }
	65% { transform: rotate(2.5deg); } 100% { transform: rotate(0); }
}

@keyframes clvDevelop {
	0% { clip-path: inset(0 0 100% 0); opacity: 0.35; }
	35% { clip-path: inset(0 0 100% 0); opacity: 0.5; }
	100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-polaroid .ci-flash { animation: clvFlashTick var(--clv-6) var(--clv-lead) 1 both; transform-origin: 41px 6px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-polaroid .ci-frameg { animation: clvSnapTilt var(--clv-8) var(--clv-lead) 1 both; transform-origin: 24px 42px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-polaroid .ci-photo { animation: clvDevelop var(--clv-8) var(--clv-follow) 120ms 1 both; }

/* Arepa: the steam rises in two voices; the bun takes a soft breath. */
@keyframes clvSteamRise {
	0% { stroke-dashoffset: 26; transform: translateY(3px); opacity: 0.25; }
	55% { stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dashoffset: 0; transform: translateY(-2px); opacity: 0.75; }
}

@keyframes clvBunBreath {
	0% { transform: scaleY(1); } 40% { transform: scaleY(0.965); }
	75% { transform: scaleY(1.015); } 100% { transform: scaleY(1); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-arepa .ci-steam1 { animation: clvSteamRise var(--clv-8) var(--clv-follow) 1 both; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-arepa .ci-steam2 { animation: clvSteamRise var(--clv-8) var(--clv-follow) 135ms 1 both; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-arepa .ci-bun { animation: clvBunBreath var(--clv-8) var(--clv-lead) 1 both; transform-origin: 24px 34px; }

/* Cake: the flame flickers like a real one, then steadies for the wish. */
@keyframes clvFlicker {
	0% { transform: scaleY(1) skewX(0); } 18% { transform: scaleY(1.28) skewX(-7deg); }
	38% { transform: scaleY(0.88) skewX(6deg); } 58% { transform: scaleY(1.18) skewX(-4deg); }
	78% { transform: scaleY(0.95) skewX(2deg); } 100% { transform: scaleY(1) skewX(0); }
}

@keyframes clvCakeHop {
	0% { transform: translateY(0); } 45% { transform: translateY(1.6px); } 100% { transform: translateY(0); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-cake .ci-flame { animation: clvFlicker var(--clv-8) var(--clv-follow) 1 both; transform-origin: 24px 15.2px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-cake .ci-cakeg { animation: clvCakeHop var(--clv-6) var(--clv-lead) 1 both; transform-origin: 24px 40px; }

/* Mic: the drop, the rebound, and the room answering in three waves. */
@keyframes clvMicDrop {
	0% { transform: rotate(-14deg) translateY(0); } 25% { transform: rotate(-30deg) translateY(-2.5px); }
	55% { transform: rotate(-5deg) translateY(0.5px); } 80% { transform: rotate(-18deg) translateY(0); }
	100% { transform: rotate(-14deg) translateY(0); }
}

@keyframes clvWaveOut {
	0% { opacity: 0.25; transform: scale(0.82); } 55% { opacity: 1; transform: scale(1.06); }
	100% { opacity: 1; transform: scale(1); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-mic .ci-micg { animation: clvMicDrop var(--clv-8) var(--clv-lead) 1 both; transform-origin: 22px 26px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-mic .ci-w1 { animation: clvWaveOut var(--clv-4) var(--clv-follow) 90ms 1 both; transform-origin: 22px 14px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-mic .ci-w2 { animation: clvWaveOut var(--clv-4) var(--clv-follow) 225ms 1 both; transform-origin: 22px 14px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-mic .ci-w3 { animation: clvWaveOut var(--clv-4) var(--clv-follow) 360ms 1 both; transform-origin: 22px 14px; }

/* The hundredth visit: slammed in, ink ring rippling, numbers proud. */
@keyframes clvSlam {
	0% { transform: scale(1.18) rotate(-7deg); } 55% { transform: scale(0.95) rotate(2deg); }
	100% { transform: scale(1) rotate(0); }
}

@keyframes clvInkRing {
	0% { opacity: 0; transform: scale(1); } 25% { opacity: 0.7; transform: scale(1.05); }
	100% { opacity: 0; transform: scale(1.42); }
}

@keyframes clvNumPop {
	0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-stamp100 .ci-badge { animation: clvSlam var(--clv-4) var(--clv-lead) 1 both; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-stamp100 .ci-ring { animation: clvInkRing var(--clv-8) var(--clv-follow) 120ms 1 both; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-stamp100 .ci-num { animation: clvNumPop var(--clv-4) var(--clv-lead) 270ms 1 both; }

/* The crowd: one friend, then another, then the one in front — a huddle. */
@keyframes clvJoinL {
	0% { opacity: 0; transform: scale(0.55) translateX(0); } 55% { opacity: 1; transform: scale(1.07) translateX(0); }
	100% { opacity: 1; transform: scale(1) translateX(1.4px); }
}

@keyframes clvJoinR {
	0% { opacity: 0; transform: scale(0.55) translateX(0); } 55% { opacity: 1; transform: scale(1.07) translateX(0); }
	100% { opacity: 1; transform: scale(1) translateX(-1.4px); }
}

@keyframes clvJoinC {
	0% { opacity: 0; transform: scale(0.5) translateY(2px); } 60% { opacity: 1; transform: scale(1.09) translateY(-1px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-friends .ci-p1 { animation: clvJoinL var(--clv-6) var(--clv-lead) 1 both; transform-origin: 11px 25px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-friends .ci-p3 { animation: clvJoinR var(--clv-6) var(--clv-lead) 135ms 1 both; transform-origin: 37px 25px; }
:where(.ogs-clubcards .ogs-clubcard__link, .ogs-legends .ogs-legend):is(:hover, :focus-visible, .clv-play) .ogs-ico--clv-friends .ci-p2 { animation: clvJoinC var(--clv-6) var(--clv-lead) 270ms 1 both; transform-origin: 24px 25px; }

/* --------------------------------------------------------------------------
   The generic performances — twenty icons, one grammar (1.21.0)

   Every icon on the site is drawn now, and every drawn icon answers the
   hand: hover or keyboard focus on its interactive host plays its part-level
   micro-performance ONCE — smaller and quicker than the showcase pieces
   (these live in menus, sheets and badges, not on stage). The host list
   below is the one grammar; an icon in a non-interactive context simply
   rests, fully drawn.
   -------------------------------------------------------------------------- */

/* calendar: the rings press, the today-dot pops. */
@keyframes clvRingPress {
	0% { transform: translateY(0); } 40% { transform: translateY(1.8px); } 100% { transform: translateY(0); }
}

@keyframes clvDotPop {
	0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--calendar-alt .ci-ringl { animation: clvRingPress var(--clv-4) var(--clv-lead) 1 both; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--calendar-alt .ci-ringr { animation: clvRingPress var(--clv-4) var(--clv-lead) 60ms 1 both; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--calendar-alt .ci-today { animation: clvDotPop var(--clv-4) var(--clv-lead) 135ms 1 both; transform-origin: 30.5px 33px; }

/* star: a quick turn to catch the room, core winks, ticks flick. */
@keyframes clvStarTurn {
	0% { transform: rotate(0) scale(1); } 40% { transform: rotate(-16deg) scale(1.12); } 100% { transform: rotate(0) scale(1); }
}

@keyframes clvTickFlick {
	0% { opacity: 1; transform: scale(1); } 45% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--star .ci-starp { animation: clvStarTurn var(--clv-4) var(--clv-lead) 1 both; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--star .ci-core { animation: clvDotPop var(--clv-4) var(--clv-lead) 90ms 1 both; transform-origin: 24px 21.5px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--star .ci-tk1,
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--star .ci-tk2 { animation: clvTickFlick var(--clv-4) var(--clv-follow) 135ms 1 both; transform-origin: 42px 9px; }

/* gem: a facet tilt and a glint. */
@keyframes clvFacetTilt {
	0% { transform: rotate(0); } 38% { transform: rotate(-7deg); } 72% { transform: rotate(4deg); } 100% { transform: rotate(0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--gem .ci-gemg { animation: clvFacetTilt var(--clv-4) var(--clv-lead) 1 both; transform-origin: 24px 22px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--gem .ci-glint { animation: clvTickFlick var(--clv-4) var(--clv-follow) 120ms 1 both; transform-origin: 40px 6px; }

/* heart: one soft beat, dot rides it. */
@keyframes clvSoftBeat {
	0% { transform: scale(1); } 30% { transform: scale(1.12); } 60% { transform: scale(0.99); } 100% { transform: scale(1); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--heart .ci-heartg { animation: clvSoftBeat var(--clv-4) var(--clv-lead) 1 both; }

/* compass (generic contexts): a single confident swing. */
@keyframes clvSwing {
	0% { transform: rotate(0); } 35% { transform: rotate(-26deg); } 70% { transform: rotate(10deg); } 100% { transform: rotate(0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--compass .ci-needle { animation: clvSwing var(--clv-4) var(--clv-lead) 1 both; }

/* images: the quick snap. */
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--images .ci-frameg { animation: clvFacetTilt var(--clv-4) var(--clv-lead) 1 both; transform-origin: 24px 40px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--images .ci-flash { animation: clvTickFlick var(--clv-4) var(--clv-follow) 1 both; transform-origin: 41px 6px; }

/* smile: the wink. Friendly beats clever. */
@keyframes clvWink {
	0% { transform: scaleY(1); } 30% { transform: scaleY(0.12); } 55% { transform: scaleY(0.12); } 100% { transform: scaleY(1); }
}

@keyframes clvGrin {
	0% { transform: scaleX(1); } 45% { transform: scaleX(1.12); } 100% { transform: scaleX(1); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--smile .ci-eye-r { animation: clvWink var(--clv-6) var(--clv-follow) 1 both; transform-origin: 29.8px 19.5px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--smile .ci-mouth { animation: clvGrin var(--clv-6) var(--clv-lead) 1 both; transform-origin: 24px 31px; }

/* comments: the two bubbles take turns. */
@keyframes clvBubA {
	0% { transform: translateY(0); } 30% { transform: translateY(-1.8px); } 60% { transform: translateY(0); } 100% { transform: translateY(0); }
}

@keyframes clvBubB {
	0% { transform: translateY(0); } 30% { transform: translateY(0); } 60% { transform: translateY(-1.8px); } 100% { transform: translateY(0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--comments .ci-bub1 { animation: clvBubA var(--clv-6) var(--clv-follow) 1 both; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--comments .ci-bub2 { animation: clvBubB var(--clv-6) var(--clv-follow) 1 both; }

/* clock: the minute hand does its lap, the hour leans in. */
@keyframes clvMinute {
	0% { transform: rotate(0); } 100% { transform: rotate(360deg); }
}

@keyframes clvHour {
	0% { transform: rotate(0); } 100% { transform: rotate(30deg); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--clock .ci-min { animation: clvMinute var(--clv-8) var(--clv-lead) 1 both; transform-origin: 24px 24px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--clock .ci-hour { animation: clvHour var(--clv-8) var(--clv-lead) 1 both; transform-origin: 24px 24px; }

/* map: the route re-draws itself toward the next place. */
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--map .ci-route { stroke-dasharray: 34; animation: clvRouteDraw var(--clv-8) var(--clv-follow) 1 both; }

@keyframes clvRouteDraw {
	0% { stroke-dashoffset: 34; } 100% { stroke-dashoffset: 0; }
}

.ogs-ico--map .ci-route { stroke-dasharray: 34; stroke-dashoffset: 0; }

/* newspaper: hot off the press — a flick and the headline lands. */
@keyframes clvPressFlick {
	0% { transform: skewX(0); } 35% { transform: skewX(-4deg); } 70% { transform: skewX(2deg); } 100% { transform: skewX(0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--newspaper .ci-newsg { animation: clvPressFlick var(--clv-4) var(--clv-lead) 1 both; transform-origin: 24px 39px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--newspaper .ci-head { animation: clvDotPop var(--clv-4) var(--clv-lead) 120ms 1 both; transform-origin: 19px 20px; }

/* futbol: a quarter roll and a hop. */
@keyframes clvRoll {
	0% { transform: rotate(0) translateY(0); } 40% { transform: rotate(22deg) translateY(-1.6px); } 100% { transform: rotate(0) translateY(0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--futbol .ci-ballg { animation: clvRoll var(--clv-6) var(--clv-lead) 1 both; }

/* lightbulb: the idea arrives — filament brightens, rays flick out. */
@keyframes clvIdea {
	0% { opacity: 0.55; } 45% { opacity: 1; } 100% { opacity: 1; }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--lightbulb .ci-fil { animation: clvIdea var(--clv-4) var(--clv-follow) 1 both; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--lightbulb .ci-ray1 { animation: clvTickFlick var(--clv-4) var(--clv-follow) 1 both; transform-origin: 9px 12px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--lightbulb .ci-ray2 { animation: clvTickFlick var(--clv-4) var(--clv-follow) 90ms 1 both; transform-origin: 39px 12px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--lightbulb .ci-ray3 { animation: clvTickFlick var(--clv-4) var(--clv-follow) 180ms 1 both; transform-origin: 24px 5px; }

/* flag: the cloth ripples once. */
@keyframes clvRipple {
	0% { transform: skewY(0); } 30% { transform: skewY(-3.5deg); } 65% { transform: skewY(2.5deg); } 100% { transform: skewY(0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--flag .ci-cloth,
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--flag .ci-band { animation: clvRipple var(--clv-6) var(--clv-follow) 1 both; transform-origin: 12.5px 16px; }

/* bookmark: dips to mark the page, the check confirms. */
@keyframes clvDip {
	0% { transform: translateY(0); } 40% { transform: translateY(2.4px); } 100% { transform: translateY(0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--bookmark .ci-bmg { animation: clvDip var(--clv-4) var(--clv-lead) 1 both; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--bookmark .ci-mark { stroke-dasharray: 15; animation: clvRouteDraw var(--clv-4) var(--clv-follow) 90ms 1 both; }

.ogs-ico--bookmark .ci-mark { stroke-dasharray: 15; stroke-dashoffset: 0; }

/* paper-plane: a hop of takeoff, trail streaming. */
@keyframes clvTakeoff {
	0% { transform: translate(0, 0) rotate(0); } 40% { transform: translate(2.2px, -2.2px) rotate(4deg); } 100% { transform: translate(0, 0) rotate(0); }
}

@keyframes clvTrail {
	0% { opacity: 0.35; transform: translateX(3px); } 60% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--paper-plane .ci-planeg { animation: clvTakeoff var(--clv-6) var(--clv-lead) 1 both; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--paper-plane .ci-trail1 { animation: clvTrail var(--clv-6) var(--clv-follow) 1 both; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--paper-plane .ci-trail2 { animation: clvTrail var(--clv-6) var(--clv-follow) 90ms 1 both; }

/* building: the house lights come on, one window at a time. */
@keyframes clvLightUp {
	0% { opacity: 0.35; transform: scale(0.8); } 60% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--building .ci-w1 { animation: clvLightUp var(--clv-4) var(--clv-follow) 1 both; transform-origin: 19px 15.5px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--building .ci-w2 { animation: clvLightUp var(--clv-4) var(--clv-follow) 90ms 1 both; transform-origin: 29px 15.5px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--building .ci-w3 { animation: clvLightUp var(--clv-4) var(--clv-follow) 180ms 1 both; transform-origin: 19px 24px; }
:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--building .ci-w4 { animation: clvLightUp var(--clv-4) var(--clv-follow) 270ms 1 both; transform-origin: 29px 24px; }

/* copy: the duplicate lifts off the original and settles. */
@keyframes clvDuplicate {
	0% { transform: translate(0, 0); } 40% { transform: translate(2.4px, -2.4px); } 100% { transform: translate(0, 0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--copy .ci-front { animation: clvDuplicate var(--clv-4) var(--clv-lead) 1 both; }

/* share-square: the arrow makes its little journey out and back. */
@keyframes clvLaunch {
	0% { transform: translate(0, 0); } 45% { transform: translate(2.6px, -2.6px); } 100% { transform: translate(0, 0); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--share-square .ci-arrow { animation: clvLaunch var(--clv-4) var(--clv-lead) 1 both; }

/* envelope: the flap lifts — you have got warmth. */
@keyframes clvFlap {
	0% { transform: scaleY(1); } 40% { transform: scaleY(0.55); } 100% { transform: scaleY(1); }
}

:where(.ogs-clubcard__link, .ogs-mbenefit, .ogs-legend, .ogs-ladder__step, .ogs-subnav__link, .ogs-evact__btn, .ogs-whyitem, .ogs-expcard__link, .ogs-catitem, .ogs-sheet__item, .ogs-cats__link, .ogs-path__link, .ogs-btn, .ogs-perk, .ogs-joinlist > *, .ogs-steps > *):is(:hover, :focus-visible) .ogs-ico--envelope .ci-flap { animation: clvFlap var(--clv-4) var(--clv-lead) 1 both; transform-origin: 24px 13px; }

/* --------------------------------------------------------------------------
   THE BUTTONS — one tactile language (1.21.0)

   Every control presses like a thing and lifts like an offer. Scale and
   translate ride their INDEPENDENT properties, so no component transform is
   ever disturbed; the primary's sheen is one diagonal pass per hover, and it
   is a band of surface light — never the logo's halo.
   -------------------------------------------------------------------------- */

.ogs-btn,
.ogs-pill,
.ogs-rail__btn {
	transition: translate var(--clv-3) var(--clv-follow),
	            scale var(--clv-2) var(--clv-lead),
	            background-color var(--clv-2) var(--clv-follow),
	            border-color var(--clv-2) var(--clv-follow),
	            color var(--clv-2) var(--clv-follow),
	            box-shadow var(--clv-2) var(--clv-follow);
}

.ogs-btn:hover,
.ogs-pill:hover,
.ogs-btn:focus-visible,
.ogs-pill:focus-visible {
	translate: 0 -1.5px;
}

.ogs-btn:active,
.ogs-pill:active,
.ogs-rail__btn:active,
.ogs-evact__btn:active {
	scale: 0.96;
	translate: 0 0;
}

/* The arrows nudge the way they point. */
.ogs-rail__btn[data-ogs-rail-prev]:hover { translate: -2.5px 0; }
.ogs-rail__btn[data-ogs-rail-next]:hover { translate: 2.5px 0; }

/* The primary's single sheen pass. */
.ogs-btn--primary {
	position: relative;
	overflow: hidden;
}

@keyframes clvBtnSheen {
	from { transform: translateX(-140%) skewX(-18deg); }
	to   { transform: translateX(260%) skewX(-18deg); }
}

.ogs-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	background: linear-gradient(100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 100%);
	pointer-events: none;
	transform: translateX(-140%) skewX(-18deg);
}

.ogs-btn--primary:is(:hover, :focus-visible)::after {
	animation: clvBtnSheen 640ms var(--clv-follow) 1 both;
}

/* Ghost buttons warm from the baseline up. */
.ogs-btn--ghost {
	background-image: linear-gradient(to top, var(--ogs-c-primary-wash, rgba(253, 193, 37, 0.08)) 0%, transparent 100%);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	background-position: bottom;
	transition: translate var(--clv-3) var(--clv-follow),
	            scale var(--clv-2) var(--clv-lead),
	            background-size var(--clv-4) var(--clv-follow),
	            border-color var(--clv-2) var(--clv-follow),
	            color var(--clv-2) var(--clv-follow);
}

.ogs-btn--ghost:is(:hover, :focus-visible) {
	background-size: 100% 100%;
}

/* --- the tilt: the card leans toward the hand (kept from 1.19.0) --------- */

.ogs-clubcards .ogs-clubcard__link,
.ogs-legends .ogs-legend {
	transform: perspective(700px)
		rotateX(var(--clv-rx, 0deg))
		rotateY(var(--clv-ry, 0deg));
	transition: transform var(--clv-4) var(--clv-follow);
	will-change: auto;
}

.ogs-clubcards .ogs-clubcard__link.is-tilting,
.ogs-legends .ogs-legend.is-tilting {
	transition: none;
}

:where(.ogs-clubcards, .ogs-legends) .ogs-ico {
	translate: var(--clv-ix, 0px) var(--clv-iy, 0px);
	transition: translate var(--clv-4) var(--clv-follow);
}

/* --- one site-wide crumb of tactility (kept from 1.19.0) ----------------- */

.ogs-btn--primary {
	transition: scale var(--clv-2) var(--clv-lead);
}

.ogs-btn--primary:active {
	scale: 0.965;
}

/* ==========================================================================
   12 · REDUCED MOTION — the whole language, silenced
   ==========================================================================
   The boot snippet already refuses to opt in, so `html.ogs-motion` rules
   normally have nothing to act on here. These rules exist for the visitor
   who turns the preference on with the page open, and for every feedback
   state that works without the boot class. States still arrive — instantly.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	:root {
		--clv-2: 0ms;
		--clv-3: 0ms;
		--clv-4: 0ms;
		--clv-6: 0ms;
		--clv-8: 0ms;
	}

	/* Every reveal family lands at its final state. */
	html.ogs-motion .ogs-rv,
	html.ogs-motion .ogs-rv.is-in,
	html.ogs-motion .ogs-rv--call,
	html.ogs-motion .ogs-rv--resp,
	html.ogs-motion .ogs-rv--edit,
	html.ogs-motion .ogs-rv--social > *,
	html.ogs-motion .ogs-rv--prog > *,
	html.ogs-motion .ogs-rv--celebr > *,
	html.ogs-motion .ogs-rv--util > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}

	html.ogs-motion .ogs-rv--image,
	html.ogs-motion .ogs-rv--edit img,
	html.ogs-motion .ogs-rv--image img {
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}

	/* Signature moves do not play. The tick appears without its sweep. */
	html.ogs-motion .ogs-rv--call::after {
		transform: scaleX(1);
		transition: none;
	}

	html.ogs-motion .ogs-sec--hero .ogs-rv--call::after {
		transform: translateX(-50%) scaleX(1);
	}

	/* The ladder's connector rail was removed 2026-08-07; nothing to settle here. */

	/* Heroes render finished. */
	html.ogs-motion .ogs-hero--home .ogs-hero__title,
	html.ogs-motion .ogs-hero--home .ogs-hero__title .ogs-clv-line,
	html.ogs-motion .ogs-hero--home .ogs-eyebrow,
	html.ogs-motion .ogs-hero--home .ogs-hero__lede,
	html.ogs-motion .ogs-hero--home .ogs-sec__lede,
	html.ogs-motion .ogs-hero--home .ogs-cta-row > *,
	html.ogs-motion .ogs-sec--hero .ogs-hero__inner > *,
	html.ogs-motion .ogs-club-hero .ogs-club-hero__title,
	html.ogs-motion .ogs-club-hero .ogs-eyebrow,
	html.ogs-motion .ogs-club-hero .ogs-club-hero__lede,
	html.ogs-motion .ogs-club-hero .ogs-cta-row > *,
	html.ogs-motion .ogs-club-hero .ogs-club-hero__note,
	html.ogs-motion .ogs-parties-hero .ogs-sec__title,
	html.ogs-motion .ogs-parties-hero .ogs-eyebrow,
	html.ogs-motion .ogs-parties-hero .ogs-sec__lede,
	html.ogs-motion .ogs-parties-hero .ogs-cta-row > * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	/* The popular package's sweep was removed 2026-08-07; only the hero's remains. */
	html.ogs-motion .ogs-parties-hero::after {
		animation: none !important;
		content: none !important;
	}

	html.ogs-motion .ogs-rv--prog.is-in .ogs-pack--popular .ogs-pack__badge {
		animation: none !important;
	}

	/* Navigation opens and closes instantly, and stays a menu. */
	html.ogs-motion .ogs-navpanel:not([hidden]),
	html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-navpanel__head,
	html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li::before,
	html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav .ogs-nav__txt,
	html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-navpanel__address,
	html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-navpanel__mascot,
	html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-navpanel__foot,
	html.ogs-motion [data-ogs-subnav]:not([hidden]) .ogs-subnav__link,
	html.ogs-motion .ogs-navpanel.is-closing {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	html.ogs-motion .ogs-navpanel:not([hidden]) .ogs-nav > ul > li::before {
		opacity: 0.55 !important;
	}

	.ogs-nav__chev {
		transition: none;
	}

	/* The sheet appears and disappears as a state. */
	.ogs-sheet__scrim,
	.ogs-sheet__panel,
	.ogs-sheet__list li,
	.ogs-sheet__close,
	.ogs-sheet__said:not(:empty),
	.ogs-sheet.is-closing .ogs-sheet__panel,
	.ogs-sheet.is-closing .ogs-sheet__scrim,
	.ogs-sheet__item.is-confirmed {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* FAQ opens natively; the indicator flips without turning. */
	html.ogs-motion .ogs-pfaq__d.is-opening .ogs-pfaq__a,
	html.ogs-motion .ogs-pfaq__d.is-closing .ogs-pfaq__a {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.ogs-pfaq__q::after {
		transition: none;
	}

	/* Configurator feedback is a state, not a wobble. */
	html.ogs-motion .ogs-config__opt.is-picked,
	html.ogs-motion .ogs-config__summary.is-updated,
	html.ogs-motion .ogs-config__num.is-updated,
	html.ogs-motion .ogs-config .is-confirmed {
		animation: none !important;
	}

	.ogs-config__range::-webkit-slider-thumb {
		transition: none;
		transform: none !important;
	}

	.ogs-config__range::-moz-range-thumb {
		transition: none;
		transform: none !important;
	}

	/* The hand-drawn set: no performances, no tilt, no press. Every part
	   rests fully drawn; the only rest-hidden part (the ink ring) stays so. */
	.ogs-ico .ogs-ico__svg [class^="ci-"],
	.ogs-ico .ogs-ico__svg [class*=" ci-"] {
		animation: none !important;
		transition: none !important;
	}

	.ogs-clubcards .ogs-clubcard__link,
	.ogs-legends .ogs-legend {
		transform: none !important;
		transition: none !important;
	}

	:where(.ogs-clubcards, .ogs-legends) .ogs-ico {
		translate: none !important;
		transition: none !important;
	}

	.ogs-btn,
	.ogs-pill,
	.ogs-rail__btn,
	.ogs-btn--primary,
	.ogs-btn--ghost {
		transition: none !important;
	}

	.ogs-btn:hover,
	.ogs-pill:hover,
	.ogs-btn:focus-visible,
	.ogs-pill:focus-visible,
	.ogs-rail__btn[data-ogs-rail-prev]:hover,
	.ogs-rail__btn[data-ogs-rail-next]:hover {
		translate: none !important;
	}

	.ogs-btn:active,
	.ogs-pill:active,
	.ogs-rail__btn:active,
	.ogs-evact__btn:active,
	.ogs-btn--primary:active {
		scale: none !important;
	}

	.ogs-btn--primary::after {
		animation: none !important;
		content: none !important;
	}

	.ogs-btn--ghost:is(:hover, :focus-visible) {
		background-size: 100% 0% !important;
	}

	/* The ring never runs (the engine never injects it); belt to that brace. */
	.ogs-clv-ring {
		display: none !important;
	}

	/* The order bar's yield still functions — instantly. */
	.ogs-orderbar,
	.ogs-orderbar.is-visible.is-yielding {
		transition: none !important;
	}

	/* Event cards: states arrive without travel. */
	.ogs-railcard__actions .ogs-evact__btn {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.ogs-railcard:hover .ogs-railcard__img,
	.ogs-railcard:focus-within .ogs-railcard__img {
		transform: none !important;
	}

	/* Carried from the pre-CLAVE reduced block: the linked homepage event
	   cards must not zoom either. */
	.ogs-event--linked,
	.ogs-event--linked img {
		transition: none;
	}

	.ogs-event--linked:hover,
	.ogs-event--linked:focus-within,
	.ogs-event--linked:hover img,
	.ogs-event--linked:focus-within img {
		transform: none;
	}

	/* Parallax: the transform is inline, so this is the one !important that
	   must exist (the pre-CLAVE block made the same argument). */
	html.ogs-motion .ogs-parallax {
		transform: none !important;
		will-change: auto;
	}
}

/* ==========================================================================
   THE ACTION ROW — structural rules from the 1.17.0 card rebuild.
   Preserved verbatim below this line; CLAVE times them, it does not reshape
   them. See STATE.md "CARDS AND EFFECTS REBUILT" for why each exists.
   ========================================================================== */

.ogs-railcard__actions .ogs-evact {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--ogs-space-2);
}

.ogs-railcard__actions .ogs-evact__btn {
	flex: 0 0 auto;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}

.ogs-railcard__actions .ogs-evact__btn > span:not(.ogs-ico):not(.screen-reader-text) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ogs-railcard__actions .ogs-evact__said {
	display: none;
}

/*
 * REMOVED 2026-08-10 — and this was the defect the operator kept reporting.
 *
 * A leftover from the 2026-08-06 touch build, which showed the actions
 * permanently on touch and therefore had to reserve room for them. It lifted the
 * title by 112px on every touch device AT REST, which is the empty band under the
 * title in the screenshots — "când iconurile nu sunt vizibile, avem spațiu".
 *
 * It survived the 2026-08-10 rework because that rework added a new block instead
 * of auditing the old ones, so the new reveal was fighting a rule that lifted the
 * title unconditionally. The lift now belongs to the open state alone, in the one
 * place above where the reveal is defined.
 */

/* ==========================================================================
   CONTACT — /contact/
   ==========================================================================
   Added 2026-08-07, when the reservation form moved off the Parties page.

   Deliberately built from tokens and existing patterns only: the cards reuse the
   same surface, hairline, radius and padding as `.ogs-theme` and `.ogs-catitem`,
   so the page reads as part of the site rather than as a page someone styled
   separately. No new colour, no new radius and no new spacing value is introduced
   here — every value below is a token that already governs another section.
   ========================================================================== */

.ogs-contactlist {
	list-style: none;
	margin: var(--ogs-space-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ogs-space-4);
}

.ogs-contactcard {
	display: grid;
	/* The icon sits beside a two-line stack: label above, value below. */
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"ico label"
		"ico value";
	align-items: start;
	gap: 2px var(--ogs-space-3);
	padding: var(--ogs-space-4);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--ogs-radius-md);
}

.ogs-contactcard__ico {
	grid-area: ico;
	align-self: center;
}

.ogs-contactcard__label {
	grid-area: label;
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ogs-c-primary, #FDC125);
}

/*
 * The value is the content of the card, so it is primary text at full contrast —
 * the same correction made to the gallery captions on this date. `address` also
 * needs its browser italic removed; it is a semantic element, not a styled one.
 */
.ogs-contactcard__value {
	grid-area: value;
	font-style: normal;
	line-height: 1.55;
	color: var(--ogs-c-text, #FFFFFF);
	text-decoration: none;
}

a.ogs-contactcard__value:hover,
a.ogs-contactcard__value:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The hours card carries a <dl>, which must not inherit the value's line box. */
.ogs-contactcard__value.ogs-hours {
	margin: 0;
}

.ogs-contact-social {
	margin-top: var(--ogs-space-6);
}

.ogs-contact-social .ogs-social {
	margin-top: var(--ogs-space-3);
}

/* --- Configurator: contact block, result banner, honeypot ----------------- */
/* Added 2026-08-07, when the configurator became a real submission. */

.ogs-config__contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ogs-space-3) var(--ogs-space-4);
}

.ogs-config__contact .ogs-field--wide {
	grid-column: 1 / -1;
}

.ogs-config__req {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.86rem;
	color: var(--ogs-c-text-secondary);
}

/*
 * The result banner. Both outcomes are stated in words, not by colour alone —
 * colour is a second channel here, never the only one (EP-17/EP-19).
 */
.ogs-config__result {
	margin: 0 0 var(--ogs-space-5);
	padding: var(--ogs-space-4);
	border-radius: var(--ogs-radius-md);
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: var(--ogs-c-text, #FFFFFF);
}

.ogs-config__result--trimis {
	border-color: rgba(253, 193, 37, 0.55);
}

/*
 * The honeypot.
 *
 * NOT `display: none` and NOT `hidden`. Both are trivially detected, and a bot
 * that skips hidden fields would sail past the trap. This moves the field out of
 * the viewport while leaving it rendered and fillable, which is what makes it work.
 * `tabindex="-1"` and `aria-hidden` on the wrapper keep it away from keyboard and
 * screen-reader users, so nobody real can reach it either.
 */
.ogs-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   LIGHTBOX — one picture at full size
   ==========================================================================
   Added 2026-08-07. Shared by both galleries and by reviews.
   ========================================================================== */

/*
 * The trigger. It must look like the picture and behave like a button, so every
 * button affordance the browser supplies is stripped and the focus ring is put
 * back deliberately — a control with no visible focus state is the EP-17 failure.
 */
.ogs-gallery__btn,
.ogs-review__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	color: inherit;
	font: inherit;
}

.ogs-gallery__btn:focus-visible,
.ogs-review__btn:focus-visible {
	outline: 3px solid var(--ogs-c-primary, #FDC125);
	outline-offset: -3px;
}

/* Scrolling a page you cannot see is disorienting, so it is locked while open. */
html.ogs-lb-open,
html.ogs-lb-open body {
	overflow: hidden;
}

.ogs-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ogs-space-3);
	padding: var(--ogs-space-5);
	background: rgba(0, 0, 0, 0.92);
}

.ogs-lb[hidden] {
	display: none;
}

.ogs-lb__fig {
	margin: 0;
	max-width: min(92vw, 1400px);
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ogs-space-3);
}

.ogs-lb__img {
	max-width: 100%;
	/* Room for the caption below, so a tall picture cannot push it off-screen. */
	max-height: 76vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--ogs-radius-md);
	animation: ogsLbIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ogs-lb--still .ogs-lb__img {
	animation: none;
}

@keyframes ogsLbIn {
	from { opacity: 0; scale: 0.97; }
	to   { opacity: 1; scale: 1; }
}

.ogs-lb__cap {
	color: var(--ogs-c-text, #FFFFFF);
	font-size: 0.9rem;
	text-align: center;
}

.ogs-lb__cap[hidden] {
	display: none;
}

.ogs-lb__close,
.ogs-lb__nav {
	flex: 0 0 auto;
	/* 44px is the minimum touch target the rest of the site holds to. */
	min-width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--ogs-c-text, #FFFFFF);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.ogs-lb__close:hover,
.ogs-lb__nav:hover,
.ogs-lb__close:focus-visible,
.ogs-lb__nav:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--ogs-c-primary, #FDC125);
}

.ogs-lb__close {
	position: absolute;
	top: var(--ogs-space-4);
	right: var(--ogs-space-4);
}

.ogs-lb__nav[hidden],
.ogs-lb__count[hidden] {
	display: none;
}

.ogs-lb__count {
	position: absolute;
	bottom: var(--ogs-space-4);
	left: 50%;
	translate: -50% 0;
	margin: 0;
	color: var(--ogs-c-text-secondary);
	font-size: 0.82rem;
}

/*
 * Below 600px the side arrows would crowd a picture that already fills the width,
 * so they move under it. Nothing is removed — a small screen keeps every control.
 */
@media (max-width: 600px) {
	.ogs-lb {
		flex-wrap: wrap;
	}

	.ogs-lb__fig {
		order: -1;
		flex: 1 0 100%;
	}
}

/* --- Reviews with pictures ------------------------------------------------ */

/*
 * REVIEW PICTURES — one rule set, one or many.
 *
 * Added 2026-08-10, when a review stopped being limited to a single photograph.
 * The template emits a list in every case, so a lone picture keeps exactly the
 * treatment it had before through `:only-child` — the same 4/3 block, full width —
 * and nothing about the single-picture card changed. Several pictures become a
 * strip of squares that wraps.
 *
 * `auto-fill` with a minimum rather than a fixed column count: three photographs
 * should not each be a third of the card on a phone, and six should not be six
 * slivers. The track floors at 72px and grows to fill, so the strip stays legible
 * at 320px and does not stretch absurdly at 1440.
 */
.ogs-review__pics {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
	margin: 0 0 var(--ogs-space-3);
	padding: 0;
	list-style: none;
}

.ogs-review__pic {
	margin: 0;
}

.ogs-review--has-pic .ogs-review__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ogs-radius-sm, 10px);
	display: block;
}

/*
 * A LONE PICTURE IS A THUMBNAIL LIKE ANY OTHER — corrected 2026-08-10.
 *
 * The first version gave a single picture the full-width 4/3 block the card used
 * to have, on the reasoning that nothing about the one-picture case should change.
 * Seen on the real page that was wrong: a review with one photograph towered over
 * a review with two, and the row read as three cards of different kinds rather
 * than three reviews. The operator asked for the smaller treatment and they are
 * right — the picture is evidence attached to a review, not the subject of it.
 *
 * So there is no `:only-child` case at all now. One rule, one size, however many
 * pictures there are. That is also one less thing to keep in step.
 */

/* ==========================================================================
   BLOG — the card, and the category filter
   ==========================================================================
   Added 2026-08-07. The card had never been designed: the Club list rendered its
   title as a bare span with no rule of its own, so it inherited the card link's
   colour and weight — which is exactly what "small, thin and yellow" was.
   ========================================================================== */

.ogs-post {
	display: flex;
	background: var(--ogs-c-surface, rgba(255, 255, 255, 0.03));
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-light, rgba(255, 255, 255, 0.09));
	border-radius: var(--ogs-radius-lg, 22px);
	overflow: hidden;
}

.ogs-post[hidden] {
	display: none;
}

.ogs-post__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ogs-post__media {
	display: block;
	overflow: hidden;
}

.ogs-post__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: scale var(--ogs-t-slow, 640ms) var(--ogs-t-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.ogs-post:hover .ogs-post__img {
	scale: 1.04;
}

.ogs-post__body {
	display: flex;
	flex-direction: column;
	gap: var(--ogs-space-2);
	padding: var(--ogs-space-5);
	flex: 1;
}

.ogs-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogs-space-2);
	align-items: baseline;
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ogs-post__cat {
	color: var(--ogs-c-primary, #FDC125);
}

.ogs-post__date {
	color: var(--ogs-c-text-muted, #868179);
}

/*
 * THE TITLE, WHICH IS THE WHOLE POINT OF THIS BLOCK.
 *
 * White, at a real heading size and weight, in the display face — so it reads as
 * the most important thing on the card. It was previously unstyled and inherited
 * brand yellow at body weight.
 */
.ogs-post__title {
	margin: 0;
	font-family: var(--ogs-font-display);
	font-size: clamp(19px, 1.4vw, 23px);
	line-height: 1.22;
	letter-spacing: 0.01em;
	color: var(--ogs-c-heading, #FFFFFF);
}

.ogs-post__link {
	color: inherit;
	text-decoration: none;
}

/*
 * The link's hit area is the whole card, so the picture and the padding are
 * clickable — without wrapping the card in a second anchor, which would give
 * assistive technology two links to the same place.
 */
.ogs-post__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ogs-post__inner {
	position: relative;
}

.ogs-post__link:focus-visible {
	outline: none;
}

.ogs-post__inner:has(.ogs-post__link:focus-visible) {
	outline: 3px solid var(--ogs-c-primary, #FDC125);
	outline-offset: 3px;
	border-radius: var(--ogs-radius-lg, 22px);
}

.ogs-post__excerpt {
	margin: 0;
	color: var(--ogs-c-text-secondary);
	line-height: 1.6;
}

.ogs-post__more {
	margin-top: auto;
	padding-top: var(--ogs-space-3);
	font-family: var(--ogs-font-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--ogs-c-primary, #FDC125);
}

.ogs-posts__count {
	margin: var(--ogs-space-5) 0 0;
	color: var(--ogs-c-text-muted, #868179);
	font-size: 0.86rem;
}

/* --- The category filter -------------------------------------------------- */

.ogs-catfilter {
	margin: 0 0 var(--ogs-space-6);
	/*
	 * SCROLLS SIDEWAYS AT EVERY WIDTH, not only on small screens. The row overflows
	 * whenever the categories outgrow the space, and a desktop window narrowed to
	 * 700px hits that exactly as a phone does — so this is unconditional rather than
	 * inside a media query, which would have missed the case it was written for.
	 */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.ogs-catfilter__row {
	display: flex;
	gap: var(--ogs-space-2);
	margin: 0;
	padding: 2px 2px 10px;
	list-style: none;
	/* Keeps the pills on one line so the container scrolls instead of wrapping. */
	width: max-content;
	min-width: 100%;
}

.ogs-catfilter__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 9px 18px;
	border: var(--ogs-border-width) solid var(--ogs-c-hairline-primary-strong, rgba(253, 193, 37, 0.55));
	border-radius: 999px;
	font-family: var(--ogs-font-display);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ogs-c-primary, #FDC125);
	white-space: nowrap;
}

.ogs-catfilter__btn:hover,
.ogs-catfilter__btn:focus-visible {
	background: rgba(253, 193, 37, 0.12);
}

/*
 * The selected state is background AND text colour, not colour alone — a filter
 * whose only "on" signal is a hue is invisible to anyone who cannot separate the
 * two. `aria-current` carries it for assistive technology. EP-17.
 */
.ogs-catfilter__btn.is-on {
	background: var(--ogs-c-primary, #FDC125);
	color: #0D0D0D;
}

/*
 * THE SELECTED BUTTON HAD INVISIBLE TEXT, AND THE RULE ABOVE WAS NOT WRONG.
 *
 * Reported 2026-08-10: on `/blog/` the active pill rendered as a yellow shape with
 * no label, while the three category pills beside it were fine.
 *
 * The cause is specificity, not colour. `body.ogs-amaizing a:visited` in the link
 * normalisation block scores (0,2,2); `.ogs-catfilter__btn.is-on` scores (0,2,0),
 * so the net wins and repaints the text yellow — on a yellow background.
 *
 * And it only ever hit the ACTIVE one, which is why it looked arbitrary: "Toate"
 * links to the page you are already on, so it is always a :visited link. The
 * category pills point at archives most visitors have not opened, so they escaped.
 * A defect that depends on browser history is one that will not reproduce for
 * whoever checks it next — worth stating rather than leaving to be rediscovered.
 *
 * The normalisation block's own design says components restore themselves in
 * Tier 2. This is that, written at the same specificity as the net it has to beat,
 * and it covers every state the net declares rather than only `:visited` — `:focus`
 * and `:active` would each blank the label again the moment the control is used.
 */
body.ogs-amaizing .ogs-catfilter__btn.is-on,
body.ogs-amaizing .ogs-catfilter__btn.is-on:link,
body.ogs-amaizing .ogs-catfilter__btn.is-on:visited,
body.ogs-amaizing .ogs-catfilter__btn.is-on:hover,
body.ogs-amaizing .ogs-catfilter__btn.is-on:focus,
body.ogs-amaizing .ogs-catfilter__btn.is-on:focus-visible,
body.ogs-amaizing .ogs-catfilter__btn.is-on:active {
	background: var(--ogs-c-primary, #FDC125);
	color: #0D0D0D;
}

/*
 * The unselected pills need the same protection for a quieter reason: once a
 * visitor has opened a category, its pill becomes `:visited` too. The net paints
 * it the same yellow it already had, so nothing looks wrong today — but the pill
 * would then be taking its colour from a rule that knows nothing about it, and the
 * next change to that rule would move it. Stated once, here.
 */
body.ogs-amaizing .ogs-catfilter__btn:link,
body.ogs-amaizing .ogs-catfilter__btn:visited {
	color: var(--ogs-c-primary, #FDC125);
}

@media (prefers-reduced-motion: reduce) {
	.ogs-post__img,
	.ogs-post:hover .ogs-post__img {
		transition: none !important;
		scale: 1 !important;
	}
}

/* The third language costs horizontal room, and at 320px there was none to
   spare. Measured 2026-08-11: brand 144 + controls 210 in 304px of usable
   width, which pushed the MENIU button 49px off the right edge — a real
   regression introduced with the ES button, not a pre-existing one.

   Every number below was fitted against the live page rather than guessed, and
   two things were treated as non-negotiable while fitting it:

     - The language buttons stay 24px wide with 24px between their centres, so
       they still satisfy WCAG 2.5.8 through its spacing provision. An earlier
       candidate reached zero overflow at 21px and was rejected for that reason:
       a layout fix that quietly breaks a touch target is not a fix.
     - Nothing is hidden. The MENIU label, the wordmark and the tagline all
       survive; only padding, gaps and letter-spacing give way.

   The separators are the one exception, and they are decoration — aria-hidden
   slashes whose job is done by the pressed state at this size. */
@media (max-width: 400px) {
	.ogs-header {
		padding-left: 5px;
		padding-right: 5px;
		gap: 5px;
	}

	.ogs-header__controls {
		gap: 5px;
	}

	.ogs-menu-toggle {
		padding-left: 7px;
		padding-right: 7px;
		letter-spacing: 0.05em;
		gap: 4px;
	}

	.ogs-lang {
		padding: 0;
		gap: 0;
	}

	.ogs-lang__opt {
		min-width: 24px;
		padding: 0 2px;
		letter-spacing: 0.03em;
	}

	.ogs-lang__sep {
		display: none;
	}

	.ogs-brand {
		gap: 4px;
	}
}