/* =========================================================================
   Onassis & Reis homepage

   Scoped to .orh throughout. Divi is an aggressive theme — it styles headings,
   paragraphs, links, buttons and images globally, often with high specificity —
   so nothing here is a bare element selector that Divi could win, and nothing
   here leaks out to affect the rest of the site.

   The palette is the auction platform's, so the two halves of the site are
   recognisably one place.
   ====================================================================== */

.orh {
	--o-navy: #0f2137;
	--o-navy-deep: #0a1626;
	--o-navy-soft: #1c3350;
	--o-gold: #cab6a1;
	/* The champagne is 1.9:1 on white — lovely as a plate behind white text,
	   unreadable as text on one. Small print and links on a light ground use
	   this darker relative instead, which clears 4.5:1. */
	--o-gold-ink: #7a6142;
	--o-paper: #eef1f5;
	--o-card: #fff;
	--o-line: #d7dde4;
	--o-ink: #0f2137;
	--o-slate: #45536a;
	--o-mute: #626e83;
	--o-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	font-family: "Helvetica Neue", Inter, system-ui, -apple-system, sans-serif;
	color: var(--o-ink);
	-webkit-font-smoothing: antialiased;
}

.orh *,
.orh *::before,
.orh *::after { box-sizing: border-box; }

/* -------------------------------------------------------------------------
   Escaping the container

   Divi puts a shortcode inside a row, and a Divi row is 80% wide with a
   max-width of 1080px. So a "full-screen" hero dropped into a Text module comes
   out 1080px wide in the middle of a 1440px screen — which is not full screen,
   and is the first thing anybody would notice.

   These sections break out of whatever they are inside and span the viewport.
   The arithmetic is the standard one: be as wide as the viewport, then pull
   left by half the difference between the viewport and the container.

   THE SCROLLBAR

   100vw includes the vertical scrollbar, which on Windows and Linux takes
   layout width. Using it naively makes every section fifteen pixels wider than
   the visible page and puts a horizontal scrollbar along the bottom of the
   homepage — a small bug that looks like a badly built site. --o-sbw is
   measured once by the script and subtracted; with the script blocked it is
   0px, which is correct on macOS and on every phone, and fifteen pixels of
   overflow on a desktop with no JavaScript, which is the right way round for
   the trade.

   A section that is already full width is unaffected: the offset works out to
   zero, so this is safe in a Fullwidth Section too.
   ---------------------------------------------------------------------- */

.orh .orh-hero,
.orh .orh-sec {
	width: calc(100vw - var(--o-sbw, 0px));
	margin-left: calc(50% - ((100vw - var(--o-sbw, 0px)) / 2));
	margin-right: calc(50% - ((100vw - var(--o-sbw, 0px)) / 2));
}

/* Divi's own vertical padding on the section and row would otherwise leave a
   white band above the intro and between every section. :has() is how this is
   asked for without the plugin reaching up and restyling the theme generally —
   it only applies to a section that actually contains one of ours. */
.et_pb_section:has(.orh-hero),
.et_pb_section:has(.orh-sec),
.et_pb_row:has(.orh-hero),
.et_pb_row:has(.orh-sec) {
	padding-top: 0;
	padding-bottom: 0;
}

.et_pb_module:has(.orh-hero),
.et_pb_module:has(.orh-sec) { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   The bar
   ---------------------------------------------------------------------- */

.orh .orh-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 24px;
	background: var(--o-navy);
	/* Off the screen and inert until the visitor has scrolled past the intro.
	   Transform rather than display, so it slides rather than appearing, and so
	   the links are still in the document for a search engine the whole time. */
	transform: translateY(-100%);
	transition: transform 0.32s ease;
	will-change: transform;
}

.orh .orh-bar.is-on { transform: translateY(0); box-shadow: 0 1px 0 rgba(202, 182, 161, 0.22); }

.orh .orh-bar-mark { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.orh .orh-bar-mark img { display: block; height: 30px; width: auto; max-width: 170px; }

.orh .orh-bar-word {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}

.orh .orh-bar-nav { display: flex; align-items: center; gap: 8px; }

.orh .orh-bar-link {
	display: inline-block;
	padding: 8px 12px;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: #dde3ea;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.orh .orh-bar-link:hover,
.orh .orh-bar-link:focus-visible { color: var(--o-gold); border-bottom-color: var(--o-gold); }

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.orh .orh-btn {
	display: inline-block;
	padding: 12px 22px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border: 1px solid var(--o-gold);
	background: var(--o-gold);
	color: var(--o-navy);
	cursor: pointer;
	border-radius: 0;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
}

.orh .orh-btn:hover,
.orh .orh-btn:focus-visible { background: #d8c8b7; color: var(--o-navy); }

.orh .orh-btn--gold { background: var(--o-gold); color: var(--o-navy); border-color: var(--o-gold); }

/* On navy. */
.orh .orh-btn--ghost { background: none; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.orh .orh-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.orh .orh-btn--ghost-light { background: none; color: var(--o-gold); border-color: var(--o-gold); }
.orh .orh-btn--ghost-light:hover { background: rgba(202, 182, 161, 0.14); color: var(--o-gold); }

.orh .orh-btn--wide { display: block; width: 100%; }

/* A visible focus ring on both grounds. Divi removes outlines in places; this
   puts one back, because a keyboard user who cannot see where they are cannot
   use the page at all. */
.orh a:focus-visible,
.orh button:focus-visible,
.orh input:focus-visible,
.orh select:focus-visible,
.orh textarea:focus-visible {
	outline: 2px solid var(--o-gold);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   The intro
   ---------------------------------------------------------------------- */

.orh .orh-hero {
	position: relative;
	/* 100vh first as the fallback, then svh for browsers that know it. On a
	   phone, 100vh is measured with the address bar hidden — which it is not
	   when somebody arrives — so a 100vh hero is taller than the screen at the
	   one moment it matters, and the headline starts below the fold. svh is the
	   height that is always visible. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--o-navy-deep);
	text-align: center;
	padding: 90px 24px 120px;
}

.orh .orh-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position keeps the middle of the frame in view as the box changes
	   shape, which is what stops a landscape video cropping to somebody's
	   shoulders on a phone. */
	object-position: center;
	z-index: 0;
}

/* Navy rather than black, and stronger at the top where the bar sits. A flat
   black wash makes a photograph look like a photograph behind a black wash;
   this makes it look lit. */
.orh .orh-hero-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(10, 22, 38, 0.82) 0%, rgba(10, 22, 38, 0.46) 42%, rgba(10, 22, 38, 0.88) 100%);
}

.orh .orh-hero-body { position: relative; z-index: 2; max-width: 860px; }

.orh .orh-hero-title {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(34px, 7vw, 76px);
	line-height: 1.04;
	font-weight: 300;
	letter-spacing: -0.03em;
}

.orh .orh-hero-sub {
	margin: 0 auto 30px;
	max-width: 620px;
	color: #e4e9ef;
	font-size: clamp(15px, 2.1vw, 19px);
	line-height: 1.55;
	font-weight: 400;
}

/* The arrow ------------------------------------------------------------ */

.orh .orh-arrow {
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 3;
	margin-left: -22px;
	width: 44px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--o-gold);
	text-decoration: none;
	animation: orh-pulse 2.4s ease-in-out infinite;
}

.orh .orh-arrow:hover { color: #e3d6c6; }

/* Opacity and a small drift together. Movement alone reads as a glitch on a
   still page; opacity alone is barely noticeable against a moving video. */
@keyframes orh-pulse {
	0%, 100% { transform: translateY(0); opacity: 0.55; }
	50%      { transform: translateY(9px); opacity: 1; }
}

/* -------------------------------------------------------------------------
   Sections
   ---------------------------------------------------------------------- */

/* The bar is fixed, so following a link to #auction scrolls the heading
   underneath it and the visitor lands looking at the second paragraph of a
   section whose title they never saw. scroll-margin-top tells the browser to
   stop short by the height of the bar. */
.orh .orh-sec[id],
.orh .orh-hero[id] { scroll-margin-top: 72px; }

@media (max-width: 860px) {
	.orh .orh-sec[id] { scroll-margin-top: 58px; }
}

.orh .orh-sec { padding: clamp(56px, 9vw, 110px) 24px; background: var(--o-paper); }
.orh .orh-sec--dark { background: var(--o-navy); color: #fff; }
.orh .orh-wrap { max-width: 1140px; margin: 0 auto; }

.orh .orh-kicker {
	margin: 0 0 12px;
	font-family: var(--o-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	color: var(--o-gold);
}

/* On the light ground the champagne would be 1.9:1 — unreadable. */
.orh .orh-kicker--dark { color: var(--o-gold-ink); }

.orh .orh-h2 {
	margin: 0 0 16px;
	font-size: clamp(26px, 4.2vw, 44px);
	line-height: 1.12;
	font-weight: 300;
	letter-spacing: -0.025em;
	color: #fff;
}

.orh .orh-h2--dark { color: var(--o-ink); }

.orh .orh-lead {
	margin: 0 0 40px;
	max-width: 760px;
	font-size: clamp(15px, 1.9vw, 18px);
	line-height: 1.6;
	color: #ccd5de;
}

.orh .orh-lead--dark { color: var(--o-slate); }

/* The auction steps ---------------------------------------------------- */

.orh .orh-steps {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
}

.orh .orh-step { padding-top: 18px; border-top: 1px solid rgba(202, 182, 161, 0.36); }

.orh .orh-step-n {
	display: block;
	font-family: var(--o-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--o-gold);
	margin-bottom: 10px;
}

.orh .orh-step-q { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.orh .orh-step-a { margin: 0; font-size: 14.5px; line-height: 1.6; color: #c3cdd8; }

.orh .orh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.orh .orh-note { margin: 0; font-size: 13.5px; color: #b6c1cd; }
.orh .orh-note a { color: var(--o-gold); }

/* The services --------------------------------------------------------- */

.orh .orh-grid {
	display: grid;
	/* min() rather than a bare 290px: auto-fit still lays a 290px track in a
	   container narrower than that, which pushes the page sideways on the
	   narrowest phones. Capping the minimum at the container width cannot. */
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
	gap: 26px;
}

.orh .orh-card {
	background: var(--o-card);
	border: 1px solid var(--o-line);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.orh .orh-card-pic {
	/* A fixed ratio rather than a fixed height: the box is the right shape at
	   every width, and reserves its space before the photograph arrives, so the
	   page does not jump as the six of them load. */
	aspect-ratio: 3 / 2;
	background: var(--o-line);
	overflow: hidden;
}

.orh .orh-card-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.orh .orh-card:hover .orh-card-pic img { transform: scale(1.04); }

.orh .orh-card-body { padding: 22px 24px 26px; }
.orh .orh-card-title { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--o-ink); }
.orh .orh-card-blurb { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--o-slate); }

/* -------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------- */

.orh .orh-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	align-items: start;
}

.orh .orh-address { font-style: normal; margin: 0 0 18px; }
.orh .orh-address-line { display: block; font-size: 15.5px; line-height: 1.6; color: #dfe5ec; }

.orh .orh-contact-row { margin: 0 0 10px; font-size: 15.5px; }
.orh .orh-contact-row a { color: var(--o-gold); text-decoration: none; border-bottom: 1px solid rgba(202, 182, 161, 0.45); }
.orh .orh-contact-row a:hover { color: #e3d6c6; }
.orh .orh-contact-hours { color: #b6c1cd; font-size: 14px; }

.orh .orh-socials { margin: 14px 0 18px; display: flex; gap: 14px; flex-wrap: wrap; }
.orh .orh-social { font-size: 13px; color: var(--o-gold); text-decoration: none; border-bottom: 1px solid rgba(202, 182, 161, 0.45); }

/* The form ------------------------------------------------------------- */

.orh .orh-form { background: var(--o-navy-soft); border: 1px solid rgba(202, 182, 161, 0.28); padding: 26px 26px 28px; }
.orh .orh-form--done { text-align: center; }
.orh .orh-form--done p { color: #dfe5ec; font-size: 15px; margin: 0; }
.orh .orh-form-title { margin: 0 0 18px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }

.orh .orh-label {
	display: block;
	font-family: var(--o-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--o-gold);
	margin-bottom: 5px;
}

.orh .orh-input {
	display: block;
	width: 100%;
	padding: 11px 13px;
	margin-bottom: 16px;
	font-family: inherit;
	font-size: 15px;
	color: #fff;
	background: rgba(10, 22, 38, 0.6);
	border: 1px solid rgba(202, 182, 161, 0.3);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

.orh .orh-input:focus { border-color: var(--o-gold); outline: none; }
.orh .orh-input::placeholder { color: #8c98a7; }
.orh .orh-textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

/* A select on a dark ground needs its arrow drawn back on: appearance:none
   removes the native one, and without it the field reads as a text box that
   mysteriously will not accept typing. */
.orh select.orh-input {
	background-image: linear-gradient(45deg, transparent 50%, #cab6a1 50%), linear-gradient(135deg, #cab6a1 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px;
}

.orh .orh-form-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #a9b5c2; }
.orh .orh-form-note a { color: var(--o-gold); }
.orh .orh-form-error { margin: 0 0 16px; padding: 10px 12px; background: rgba(123, 45, 59, 0.28); border-left: 2px solid #c98b95; font-size: 13.5px; color: #f3dde0; }

/* The honeypot. Off-screen rather than display:none, because the simplest bots
   read the markup and skip anything plainly hidden. */
.orh .orh-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The map -------------------------------------------------------------- */

.orh .orh-map {
	margin-top: 40px;
	border: 1px solid rgba(202, 182, 161, 0.28);
	background: var(--o-navy-soft);
	padding: 28px 24px;
	text-align: center;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.orh .orh-map--unset p { margin: 0; color: #c3cdd8; font-size: 14.5px; }
.orh .orh-map--unset a { color: var(--o-gold); }
.orh .orh-map-note { margin: 0; max-width: 460px; font-size: 12.5px; line-height: 1.5; color: #a9b5c2; }
.orh .orh-map.is-loaded { padding: 0; display: block; }

.orh .orh-map iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}

/* -------------------------------------------------------------------------
   Smaller screens
   ---------------------------------------------------------------------- */

@media (max-width: 860px) {
	.orh .orh-bar { padding: 10px 16px; }
	.orh .orh-bar-mark img { height: 24px; max-width: 128px; }
	/* The section links go: on a phone the two buttons are what the bar is for,
	   and five items at this width wrap onto a second line and cover the page. */
	.orh .orh-bar-link { display: none; }
	.orh .orh-btn { padding: 9px 14px; font-size: 11.5px; letter-spacing: 0.04em; }
	.orh .orh-contact { gap: 30px; }
}

@media (max-width: 420px) {
	.orh .orh-hero { padding: 80px 18px 110px; }
	.orh .orh-sec { padding-left: 18px; padding-right: 18px; }
	.orh .orh-actions .orh-btn { width: 100%; }
	.orh .orh-bar-mark img { height: 21px; max-width: 108px; }
}

/* Short and wide — a phone on its side, where a full-height hero leaves no room
   for anything but the headline. */
@media (max-height: 520px) and (orientation: landscape) {
	.orh .orh-hero { min-height: 420px; padding-top: 70px; padding-bottom: 80px; }
	.orh .orh-hero-sub { display: none; }
	.orh .orh-arrow { bottom: 16px; }
}

/* -------------------------------------------------------------------------
   Asked for less motion
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.orh .orh-arrow { animation: none; opacity: 0.9; }
	.orh .orh-bar { transition: none; }
	.orh .orh-card-pic img { transition: none; }
	.orh .orh-card:hover .orh-card-pic img { transform: none; }
}

/* Printing. Rare, but an office manager printing the contact details should get
   the contact details and not a navy rectangle. */
@media print {
	.orh .orh-bar,
	.orh .orh-arrow,
	.orh .orh-hero-media,
	.orh .orh-hero-veil,
	.orh .orh-form,
	.orh .orh-map { display: none !important; }

	.orh .orh-sec,
	.orh .orh-sec--dark { background: #fff !important; color: #000 !important; padding: 12px 0; }
	.orh .orh-h2, .orh .orh-step-q, .orh .orh-address-line, .orh .orh-contact-row { color: #000 !important; }
}

/* The members-only line under the auction buttons. Set apart from the agent
   note below it so the two do not read as one paragraph. */
.orh .orh-note--members { margin-top: 2px; margin-bottom: 14px; color: var(--o-gold); }

/* =========================================================================
   Lists, breadcrumbs and quotes

   Everything here is used by [onassisreis_list] and [onassisreis_breadcrumbs],
   which sit inside ordinary Divi pages rather than in a full-bleed section. So
   unlike the homepage sections above, none of it escapes its container: it is
   meant to line up with whatever the client has built around it.
   ====================================================================== */

.orh .orh-list { margin: 0 0 8px; }

/* A list rendered inside a dark section arrives wrapped in its own .orh, which
   re-declares color: var(--o-ink) as a specified value and so beats the white
   inherited from .orh-sec--dark. Nothing looks wrong today because every
   element inside sets its own colour; the first one that does not would render
   navy on navy. */
.orh .orh-sec--dark .orh { color: inherit; }

/* The column count is the shortcode's, above the width where columns stop
   being a good idea at all. Below it, one column, regardless of what was
   asked for — three 100px cards are not three columns, they are a mess. */
@media (min-width: 900px) {
	/* The :not() is what makes columns="auto" mean anything. Without it this
	   rule wins on specificity over the auto-fit rule above and the custom
	   property's own fallback — 3 — applies, so "auto" quietly rendered exactly
	   the same three columns as columns="3" at every width. */
	.orh .orh-list .orh-grid:not(.orh-grid--auto) {
		grid-template-columns: repeat(var(--orh-cols, 3), minmax(0, 1fr));
	}
}

.orh .orh-list .orh-h2 { margin: 0 0 28px; }

.orh .orh-card-title a {
	color: inherit;
	text-decoration: none;
	/* The whole card is the target on a pointer, which is the behaviour people
	   expect of a card; the link itself stays the size of its text for anybody
	   tabbing through, so the focus ring lands on the words. */
}

.orh .orh-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Any card whose title is a link, not only the ones in a list — the six
   service cards on the homepage became links the moment services got pages of
   their own, and a card that is clickable everywhere except on four words is a
   card people think is broken. */
.orh .orh-card { position: relative; }

/* The affordance. A card title styled exactly like a heading gives the reader
   nothing to go on but the cursor, so the card answers on hover: the title
   takes the link colour and the border picks up the gold. */
.orh .orh-card-title a:hover { color: var(--o-gold-ink); }

.orh .orh-card:has(.orh-card-title a) {
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.orh .orh-card:has(.orh-card-title a):hover {
	border-color: var(--o-gold);
	box-shadow: 0 2px 18px rgba(15, 33, 55, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.orh .orh-card:has(.orh-card-title a) { transition: none; }
}

.orh .orh-card-title a:focus-visible {
	outline: 2px solid var(--o-gold-ink);
	outline-offset: 3px;
}

.orh .orh-list-empty { margin: 0; font-size: 15px; color: var(--o-mute); }

/* Quotes ---------------------------------------------------------------- */

.orh .orh-list--quotes .orh-grid { gap: 32px; }

.orh .orh-quote {
	margin: 0;
	padding: 28px 30px;
	background: var(--o-card);
	border: 1px solid var(--o-line);
	border-left: 3px solid var(--o-gold);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.orh .orh-quote blockquote { margin: 0; }

.orh .orh-quote blockquote p {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--o-ink);
}

.orh .orh-quote figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13.5px;
}

.orh .orh-quote-who { font-weight: 600; color: var(--o-ink); }
.orh .orh-quote-role { color: var(--o-mute); }

/* Breadcrumbs ----------------------------------------------------------- */

.orh.orh-crumbs { padding: 18px 0 4px; }

.orh.orh-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	font-size: 13px;
	line-height: 1.7;
}

.orh.orh-crumbs li { display: flex; align-items: baseline; gap: 6px; }

/* The separator is drawn, not typed. A "›" in the markup is read aloud by a
   screen reader between every step — "Home, single right-pointing angle
   quotation mark, Where we work" — and generated content is not. */
.orh.orh-crumbs li + li::before {
	content: "\203A";
	color: var(--o-line);
}

.orh.orh-crumbs a {
	color: var(--o-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.orh.orh-crumbs a:hover {
	color: var(--o-gold-ink);
	border-bottom-color: var(--o-gold);
}

.orh.orh-crumbs [aria-current="page"] { color: var(--o-ink); font-weight: 500; }

@media print {
	.orh.orh-crumbs { display: none; }
}