/*
 * Ottimo Cibo site styles.
 * Mobile first, with min-width breakpoints at 600px, 900px and 1200px.
 * Course page rules sit under .oc-course; header, footer, font and contact form rules apply
 * wherever this file loads (only the draft until go-live, then every page).
 * No !important: each rule wins on specificity or source order over the theme.
 */

@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-opsz20-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
}

:root {
	--oc-mint: #8b9e83;
	--oc-ground: #f4f1ec;
	--oc-ink: #0f110e;
	--oc-body: #3f443c;
	--oc-label: #2a4931;
	--oc-label-mint: #14251a;
	--oc-body-mint: #172015;
	--oc-nav: #1b2318;
	--oc-card: #fbf9f5;
	--oc-cta: #ffffff;
	--oc-placeholder: #6b7067;
	--oc-error: #8c2f1b;

	--oc-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--oc-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

	--oc-gutter: clamp(16px, 4vw, 48px);
	/* Side padding that keeps content in the 1240px column (1144px of text plus gutters). */
	--oc-inline: max(var(--oc-gutter), calc((100% - 1240px) / 2 + var(--oc-gutter)));
	/* The same column edge, measured from inside a half-width cell. */
	--oc-edge: max(var(--oc-gutter), calc(50vw - 572px));
	--oc-section: clamp(80px, 10vw, 160px);
	--oc-photo-gap: 16px;
}

/* ------------------------------------------------------------------------
 * Fonts everywhere. Each rule below replaces a theme rule that set Playfair,
 * Bodoni, Heebo, Poppins Medium or Homemade, so those files are never requested.
 * --------------------------------------------------------------------- */

body,
.drawer,
.hero-indicator,
.wpcf7-response-output,
.wpcf7 input[type=email],
.wpcf7 input[type=number],
.wpcf7 input[type=text],
.wpcf7 input[type=submit],
.banner,
.content-info,
.singular-link {
	font-family: var(--oc-sans);
}

h1, h2, h3, h4, h5, h6,
.drawer-header-menu,
.hero-in,
.menu-title,
.wpcf7,
.banner-logo-alt,
.footer-logo,
.singular-title {
	font-family: var(--oc-serif);
	font-variation-settings: "opsz" 20;
}

/* Headlines are light on every page, as on the home page. */
h1,
h2,
.singular-title h1,
.singular-title h2 {
	font-weight: 300;
}

body {
	background-color: var(--oc-ground);
	color: var(--oc-ink);
}

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

.banner {
	padding: 18px var(--oc-gutter);
	background-color: var(--oc-ground);
	color: var(--oc-nav);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

.banner-flex {
	max-width: 1144px;
	margin: 0 auto;
	gap: 16px 32px;
}

.banner-logo {
	flex: 0 0 auto;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: inherit;
}

.banner-logo svg {
	width: 58px;
	height: auto;
}

.brand-name {
	font-family: var(--oc-serif);
	font-variation-settings: "opsz" 20;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
}

.banner-esc {
	background-color: var(--oc-ground);
}

.banner-nav {
	gap: 12px 28px;
}

.banner-nav > li {
	padding: 0;
}

.banner-nav > li a,
.banner-toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.banner-nav > li.active > a {
	color: inherit;
	border-bottom: 1px solid currentColor;
}

/* Contact is a plain link and Enquire the outlined button, as on the canvas. */
.banner-nav > li.menu-contact a {
	padding: 0;
	border: 0;
}

.banner-nav > li.menu-enquire a {
	padding: 0 20px;
	border: 1px solid var(--oc-ink);
	color: var(--oc-ink);
	font-weight: 600;
}

.banner-nav > li a:hover {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.banner-nav > li.menu-enquire a:hover {
	background-color: var(--oc-ink);
	color: var(--oc-cta);
	text-decoration: none;
}

/* Phone menu */
.drawer,
.drawer-header {
	background-color: var(--oc-ground);
}

.drawer-header-menu {
	color: var(--oc-ink);
}

.drawer-nav a,
.drawer-nav > li.active > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--oc-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.drawer-nav > li.active > a {
	border-bottom: 1px solid currentColor;
}

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

.content-info {
	color: var(--oc-nav);
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.footer-logo {
	font-size: 28px;
	line-height: 1.2;
	color: var(--oc-ink);
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* ------------------------------------------------------------------------
 * Contact form (the fill-in-the-blank sentence)
 * --------------------------------------------------------------------- */

.wpcf7 {
	color: var(--oc-ink);
}

/* Contact page heading, above the form, sized like the home page section headlines. */
.main .oc-page-title {
	margin: 0 0 clamp(32px, 4vw, 56px);
	color: var(--oc-ink);
	font-size: clamp(38px, 3.8vw, 56px);
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-wrap: balance;
}

.wpcf7 p {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 300;
	line-height: 1.35;
}

.wpcf7 input[type=email],
.wpcf7 input[type=number],
.wpcf7 input[type=text] {
	min-height: 44px;
	color: var(--oc-ink);
	font-size: 18px;
	line-height: 1.3;
	vertical-align: baseline;
}

.wpcf7 input::placeholder {
	color: var(--oc-placeholder);
	opacity: 1;
}

.wpcf7 .wpcf7-form-control-wrap::after {
	background: var(--oc-ink);
}

.wpcf7 .wpcf7-not-valid-tip {
	background-color: var(--oc-error);
}

.wpcf7 input[type=submit] {
	min-height: 52px;
	padding: 0 30px;
	border: 1px solid var(--oc-ink);
	background-color: transparent;
	color: var(--oc-ink);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.wpcf7 input[type=submit]:hover,
.wpcf7 input[type=submit]:focus-visible {
	border-color: var(--oc-ink);
	background-color: var(--oc-ink);
	color: var(--oc-cta);
}

.wpcf7-response-output {
	color: var(--oc-ink);
	font-size: 14px;
}

/* Visible focus for keyboard users (the theme removes outlines on links and buttons). */
.banner a:focus-visible,
.drawer a:focus-visible,
.content-info a:focus-visible,
.wpcf7 input:focus-visible,
.oc-course .main a:focus-visible,
.oc-course .main summary:focus-visible,
.oc-course .main [tabindex]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------------
 * Course page: let the content run edge to edge inside the default template
 * --------------------------------------------------------------------- */

.oc-course .banner-esc,
.oc-course .main .clear-hecto {
	display: none;
}

.oc-course .wrap[role=document],
.oc-course .wrap[role=document] > .container,
.oc-course .content,
.oc-course .main,
.oc-course .main > .row,
.oc-course .main > .row > .col-12,
.oc-course .singular-indent-both,
.oc-course .singular-desc {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}

.oc-course .main {
	color: var(--oc-ink);
	font-size: 18px;
	line-height: 1.65;
	overflow-x: clip;
}

.oc-course .main :where(p, ul, ol, figure, h1, h2, h3, details) {
	margin: 0;
}

.oc-course .main :where(ul, ol) {
	padding: 0;
	list-style: none;
}

.oc-course .main li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oc-course .main li::before {
	content: none;
}

.oc-course .main img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

.oc-course .main h2 {
	color: var(--oc-ink);
	font-size: clamp(38px, 3.8vw, 56px);
	font-weight: 300;
	line-height: 1.1;
	text-wrap: balance;
}

.oc-course .main h3 {
	color: var(--oc-ink);
	font-size: 32px;
	font-weight: 350;
	line-height: 1.2;
}

.oc-course .main a:not([class]) {
	color: inherit;
}

/* The theme draws a border under every link in page content; these links use an underline instead. */
.oc-course .singular-desc a {
	border-bottom: 0;
}

/* Header over the hero: transparent, white text, white outline button */
.oc-course .banner {
	background-color: transparent;
	color: var(--oc-cta);
}

.oc-course .banner-nav > li.menu-enquire a {
	border-color: rgba(255, 255, 255, 0.85);
	color: var(--oc-cta);
}

.oc-course .banner-nav > li.menu-enquire a:hover {
	background-color: var(--oc-cta);
	color: var(--oc-ink);
}

/* ------------------------------------------------------------------------
 * Shared parts
 * --------------------------------------------------------------------- */

.oc-eyebrow {
	color: var(--oc-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.26em;
	line-height: 1.4;
	text-transform: uppercase;
}

.oc-mint {
	background-color: var(--oc-mint);
	color: var(--oc-body-mint);
}

.oc-mint .oc-eyebrow {
	color: var(--oc-label-mint);
}

.oc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
}

.oc-course .wp-block-buttons {
	display: flex;
	gap: 16px;
	margin: 0;
}

.oc-course .wp-block-button {
	margin: 0;
}

.oc-course .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 30px;
	border: 1px solid var(--oc-cta);
	border-radius: 0;
	background-color: var(--oc-cta);
	color: var(--oc-ink);
	font-family: var(--oc-sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
}

.oc-course .wp-block-button__link:hover {
	border-color: var(--oc-ink);
	background-color: var(--oc-ink);
	color: var(--oc-cta);
}

.oc-textlink a,
.oc-email a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--oc-ink);
	font-size: 16px;
}

.oc-textlink a {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.oc-course .main .oc-email a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Photos: every photo runs full bleed, 16px apart */
.oc-course .main .oc-cover img {
	height: 100%;
	object-fit: cover;
}

.oc-pos-y30 img { object-position: 50% 30%; }
.oc-pos-y40 img { object-position: 50% 40%; }
.oc-pos-y55 img { object-position: 50% 55%; }
.oc-pos-x62 img { object-position: 62% 50%; }

/* ------------------------------------------------------------------------
 * 1. Hero
 * --------------------------------------------------------------------- */

.oc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* The design's height, capped at the window's height so the H1 is always above the fold,
	   with a strip of the next section showing below it. */
	min-height: max(360px, min(clamp(640px, 70vw, 1000px), calc(100vh - 64px)));
	min-height: max(360px, min(clamp(640px, 70vw, 1000px), calc(100svh - 64px)));
	overflow: hidden;
	background-color: var(--oc-ink);
}

/* Phones and tablets held upright: the hero fills the screen on its own, with none of the
   next section showing. */
@media (max-width: 899px) {
	.oc-hero {
		min-height: 100vh;
		min-height: 100svh;
	}
}

.oc-hero__media {
	position: absolute;
	inset: 0;
}

.oc-hero__media picture {
	display: contents;
}

.oc-course .main .oc-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

.oc-hero__media::before,
.oc-hero__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
}

.oc-hero__media::before {
	top: 0;
	height: 28%;
	background: linear-gradient(to bottom, rgba(15, 17, 14, 0.55), rgba(15, 17, 14, 0));
}

.oc-hero__media::after {
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(15, 17, 14, 0.75), rgba(15, 17, 14, 0));
}

.oc-course .main .oc-hero__title {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	max-width: 15em;
	padding: 0 clamp(16px, 5vw, 80px) clamp(40px, 6vw, 88px);
	color: var(--oc-cta);
	font-size: clamp(44px, 6vw, 96px);
	font-style: normal;
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.04;
	text-align: center;
	text-wrap: balance;
}

/* ------------------------------------------------------------------------
 * 2. At a glance (mint)
 * --------------------------------------------------------------------- */

.oc-glance {
	display: grid;
	gap: 48px;
	align-items: center;
	padding: clamp(56px, 7vw, 104px) var(--oc-inline);
}

.oc-glance__intro {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.oc-lead {
	max-width: 30em;
	color: var(--oc-body-mint);
	font-size: 21px;
	line-height: 1.6;
	text-wrap: pretty;
}

.oc-glance .oc-actions {
	margin-top: 4px;
}

.oc-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 24px;
}

.oc-course .main .oc-facts li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--oc-body-mint);
	font-size: 15px;
	line-height: 1.5;
}

.oc-facts strong {
	color: var(--oc-ink);
	font-family: var(--oc-serif);
	font-variation-settings: "opsz" 20;
	font-size: clamp(34px, 9vw, 46px);
	font-weight: 350;
	line-height: 1.05;
}

/* ------------------------------------------------------------------------
 * 3. Why Orvieto
 * --------------------------------------------------------------------- */

.oc-intro {
	padding-block: var(--oc-section);
}

.oc-intro__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	max-width: 780px;
	margin: 0 auto clamp(48px, 6vw, 80px);
	padding-inline: var(--oc-gutter);
	text-align: center;
}

.oc-intro__text p:not(.oc-eyebrow) {
	color: var(--oc-body);
	font-size: 19px;
	text-wrap: pretty;
}

.oc-pair {
	display: grid;
	gap: var(--oc-photo-gap);
}

.oc-course .main .oc-pair img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ------------------------------------------------------------------------
 * 4 and 5. Your host (mint) and Where the course takes place
 * --------------------------------------------------------------------- */

.oc-split {
	display: grid;
	gap: 40px;
	align-items: center;
	padding-block: var(--oc-section);
}

.oc-split__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-inline: var(--oc-gutter);
}

.oc-course .main .oc-split img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.oc-host .oc-split__text > p:not(.oc-eyebrow) {
	max-width: 28em;
	color: var(--oc-body-mint);
	text-wrap: pretty;
}

.oc-venue .oc-split__text {
	gap: 32px;
}

.oc-venue__heading {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.oc-venue__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.oc-venue__item > p:not(.oc-eyebrow) {
	max-width: 30em;
	color: var(--oc-body);
}

/* ------------------------------------------------------------------------
 * 6 and 8. Food rows: a swipe row on phones, three across from 600px
 * --------------------------------------------------------------------- */

.oc-strip {
	display: flex;
	gap: var(--oc-photo-gap);
	overflow-x: auto;
	padding-inline: var(--oc-gutter);
	scroll-padding-inline: var(--oc-gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.oc-strip::-webkit-scrollbar {
	display: none;
}

.oc-strip > figure {
	flex: 0 0 80%;
	scroll-snap-align: start;
}

.oc-course .main .oc-strip img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.oc-food {
	padding-bottom: var(--oc-section);
}

/* ------------------------------------------------------------------------
 * 7. What the course includes, dates and price (mint)
 * --------------------------------------------------------------------- */

.oc-included {
	display: grid;
	gap: clamp(48px, 6vw, 96px);
	align-items: center;
	padding: clamp(80px, 9vw, 136px) var(--oc-inline);
}

.oc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 36px 24px;
	background-color: var(--oc-card);
	box-shadow: inset 0 0 0 10px var(--oc-card), inset 0 0 0 11px rgba(15, 17, 14, 0.5);
	color: var(--oc-ink);
	text-align: center;
}

/* The radish mark: decorative, so it lives in CSS rather than the content. */
.oc-card::before {
	content: "";
	width: 48px;
	aspect-ratio: 151 / 89;
	background: url("radish.svg") center / contain no-repeat;
}

.oc-course .main .oc-card h2 {
	font-size: 30px;
	line-height: 1.15;
}

.oc-card__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.oc-card h2 + .oc-card__group {
	margin-top: 4px;
}

.oc-card__group + .oc-card__group {
	margin-top: 8px;
}

.oc-course .main .oc-card h3 {
	margin-bottom: 2px;
	color: var(--oc-label);
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
}

.oc-card ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.oc-course .main .oc-card li {
	color: var(--oc-ink);
	font-family: var(--oc-serif);
	font-variation-settings: "opsz" 20;
	font-size: 19px;
	line-height: 1.4;
}

.oc-course .oc-note {
	max-width: 24em;
	margin-top: 2px;
	color: var(--oc-body);
	font-size: 15px;
	line-height: 1.6;
	text-wrap: balance;
}

.oc-price {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
}

.oc-price__amount {
	font-family: var(--oc-serif);
	font-variation-settings: "opsz" 20;
	font-size: 40px;
	line-height: 1.1;
}

.oc-course .main .oc-price p:not(.oc-price__amount) {
	font-size: 15px;
	line-height: 1.6;
}

.oc-price__basis {
	color: var(--oc-ink);
	font-weight: 500;
}

.oc-price__excl {
	color: var(--oc-body);
}

.oc-dates {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.oc-dates__note {
	max-width: 32em;
	color: var(--oc-body-mint);
}

.oc-course .oc-datelist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
}

.oc-course .main .oc-datelist li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
	color: var(--oc-ink);
	font-family: var(--oc-serif);
	font-variation-settings: "opsz" 20;
	font-size: clamp(19px, 1.5vw, 21px);
	line-height: 1.3;
}

.oc-course .main .oc-datelist a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--oc-ink);
	font-family: var(--oc-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 5px;
}

.oc-course .oc-terms {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.oc-course .main .oc-terms li {
	color: var(--oc-nav);
	font-size: 16px;
}

.oc-dates .oc-actions {
	gap: 12px 24px;
	margin-top: 12px;
}

/* ------------------------------------------------------------------------
 * 8. From Nikki's kitchen
 * --------------------------------------------------------------------- */

.oc-kitchen {
	padding-top: var(--oc-section);
}

.oc-kitchen > .oc-eyebrow,
.oc-food-row > .oc-eyebrow {
	margin-bottom: 24px;
	padding-inline: var(--oc-inline);
}

/* ------------------------------------------------------------------------
 * 8b. What guests say (mint): centred, one quote at a time with arrows.
 * Without the script the quotes simply stack.
 * --------------------------------------------------------------------- */

.oc-quotes {
	display: grid;
	justify-items: center;
	gap: clamp(40px, 5vw, 64px);
	padding: var(--oc-section) var(--oc-inline);
	text-align: center;
}

.oc-course .main .oc-quotes h2 {
	max-width: 14em;
}

.oc-quotes__list {
	display: grid;
	gap: 48px;
	width: 100%;
	max-width: 48rem;
}

.oc-quotes__list.is-slider {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.oc-quotes__list.is-slider::-webkit-scrollbar {
	display: none;
}

.oc-quotes__list.is-slider > .oc-quote {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.oc-course .main .oc-quote {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 8px;
	border: 0;
}

.oc-course .main .oc-quote p {
	max-width: 22em;
	color: var(--oc-ink);
	font-family: var(--oc-serif);
	font-variation-settings: "opsz" 20;
	font-size: clamp(24px, 2.6vw, 36px);
	font-style: normal;
	font-weight: 300;
	line-height: 1.3;
	text-wrap: balance;
}

.oc-course .main .oc-quote cite {
	color: var(--oc-label-mint);
	font-family: var(--oc-sans);
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.26em;
	line-height: 1.4;
	text-transform: uppercase;
}

.oc-quotes__nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: -16px;
}

.oc-quotes__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--oc-ink);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.oc-quotes__arrow:hover {
		opacity: 0.6;
	}
}

.oc-quotes__arrow:focus-visible {
	outline: 1px solid var(--oc-ink);
	outline-offset: 2px;
}

.oc-quotes__arrow--prev svg {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------------------
 * 9. Questions
 * --------------------------------------------------------------------- */

.oc-faq {
	display: grid;
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
	padding: var(--oc-section) var(--oc-inline);
}

.oc-faq__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.oc-faq__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.oc-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 44px;
	padding: 12px 0;
	color: var(--oc-ink);
	cursor: pointer;
	font-family: var(--oc-serif);
	font-variation-settings: "opsz" 20;
	font-size: 24px;
	line-height: 1.3;
	list-style: none;
}

.oc-faq summary::-webkit-details-marker {
	display: none;
}

.oc-faq summary::after {
	content: "+";
	flex: none;
	color: var(--oc-label);
	font-family: var(--oc-sans);
	font-size: 22px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.oc-faq details[open] > summary::after {
	transform: rotate(45deg);
}

.oc-faq details p {
	max-width: 36em;
	padding-bottom: 16px;
	color: var(--oc-body);
}

.oc-course .main .oc-smallprint {
	margin-top: 16px;
	color: var(--oc-body);
	font-size: 15px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.oc-faq summary::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------------
 * 600px and up
 * --------------------------------------------------------------------- */

@media (min-width: 600px) {
	.oc-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.oc-strip {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
		padding-inline: 0;
	}

	.oc-strip > figure {
		flex: none;
	}

	.oc-card {
		padding: clamp(36px, 3.5vw, 44px) clamp(24px, 4vw, 48px);
	}
}

/* ------------------------------------------------------------------------
 * 900px and up: two columns, in the same order as the markup
 * --------------------------------------------------------------------- */

@media (min-width: 900px) {
	.oc-glance,
	.oc-included,
	.oc-faq {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.oc-glance {
		column-gap: clamp(40px, 6vw, 96px);
	}

	.oc-facts {
		gap: 32px 40px;
	}

	.oc-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--oc-photo-gap);
	}

	.oc-host .oc-split__text {
		padding: 0 clamp(16px, 4vw, 64px) 0 var(--oc-edge);
	}

	.oc-venue .oc-split__text {
		padding: 0 var(--oc-edge) 0 clamp(16px, 4vw, 64px);
	}
}

/* Phones and tablets: the setting photo sits below its copy, as the host photo does. */
@media (max-width: 899px) {
	.oc-venue .oc-half {
		order: 2;
	}
}

/* Phones: the theme's desktop menu is hidden below 62rem; keep its toggle tappable. */
@media (max-width: 991px) {
	.banner-toggle {
		padding: 0 4px;
	}
}