/*
 * Front page sections. Loaded only on is_front_page().
 * Section order mirrors her Wix site — see the map in front-page.php.
 *
 * Colour discipline: her two tones appear only as full-bleed FILLS. Every
 * label, link, and button on top of them is neutral ink. Squinted at, the page
 * should read as a soft gray/beige site with two gentle washes.
 *
 * BLEED RULE: only a background colour field may reach the viewport edge.
 * Every piece of content — grids, type, objects, rules — stays inside the
 * container. A composition that bleeds looks composed at 1440px and abandoned
 * at 2560px.
 *
 * RASTER RULE: no image is laid out wider than ~90% of its native pixel width.
 * Native sizes are noted beside each cap below; if an asset is replaced, redo
 * the arithmetic rather than trusting the old number.
 */

/*
 * No trailing padding. Every section owns its own padding and its own field
 * colour, so a gap here would paint a stray band of paper between the last
 * field and the footer — which is exactly what it did.
 */
.home-main {
	padding-bottom: 0;
}

/* Photographic background fields ------------------------------------------ */

/*
 * Shared by every section built on `components/photo-field` (hero, kairos).
 * The photograph is a background FIELD, so it may reach the viewport edge; the
 * content riding on it may not.
 *
 * Contract: the field wrapper is `display: grid` and both the picture and the
 * content block sit in `grid-area: 1 / 1`. The picture is printed first, so it
 * paints behind in tree order — no z-index, and none of the positioned-layer
 * paint-order trouble an absolute overlay would bring (see AI-INSTRUCTIONS
 * "Stacking trap"). Sharing a cell also means the section keeps an intrinsic
 * height and nothing has to be pulled out of flow.
 *
 * Each crop pair is portrait <48rem / landscape >=48rem. That 48rem swap is
 * ALSO in the <source> media attribute in photo-field.php — the two must stay
 * on the same number, or a portrait file gets laid out in a landscape box and
 * the object lands behind the type.
 */
.photo-field__bg {
	display: block;
	grid-area: 1 / 1;
	/* Native portrait crop; the landscape ratio is set at 48rem below. */
	aspect-ratio: 768 / 1376;
	overflow: hidden;
}

.photo-field__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Portrait crops put the object at the bottom. If the type ever outgrows
	 * the picture's height the image is cropped from the TOP — sacrificing
	 * empty air rather than the subject.
	 */
	object-position: center bottom;
}

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

/*
 * The hero is a photographic FIELD — the client's Kairos hourglass still-life,
 * full-bleed — with the type laid into the empty half of the frame. Two crops
 * ship and they are not interchangeable:
 *
 *   desktop  1376x768   hourglass RIGHT   → type sits left, vertically centred
 *   mobile    768x1376  hourglass BOTTOM  → type sits top
 *
 * The layout below is built around those two facts. Re-crop either asset and
 * the padding/positioning here has to be redone.
 *
 * The photograph may touch the viewport edge (BLEED RULE: a background field
 * may). The type on top of it may not — it rides in `.myco-container`, the
 * same 1180px track as the site header and footer.
 *
 * Photograph and type share one grid cell rather than stacking with position:
 * absolute, so the section still has an intrinsic height and nothing has to be
 * pulled out of flow.
 */
.hero {
	display: grid;
	background: var(--myco-color-bg);
	isolation: isolate;
}

.hero__grid {
	display: grid;
	grid-area: 1 / 1;
	gap: var(--myco-space-2xl);
	/*
	 * Mobile: type in the top half, clear of the hourglass. The object starts
	 * ~55% down the portrait crop, i.e. ~0.99x the viewport width from the top
	 * of the image, so the block is held above that line.
	 */
	align-content: start;
	padding-block: var(--myco-space-2xl) var(--myco-space-4xl);
}

.hero__eyebrow {
	margin-bottom: var(--myco-space-lg);
}

.hero__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2.75rem, 8vw, 4.5rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.032em;
	line-height: 0.94;
	text-wrap: balance;
}

.hero__title-line {
	display: block;
}

.hero__title-accent {
	display: block;
	color: var(--myco-color-primary-soft);
	font-style: italic;
}

.hero__lede {
	max-width: 32ch;
	margin-bottom: var(--myco-space-2xl);
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.125rem, 2.4vw, 1.5rem);
	line-height: 1.45;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--myco-space-xl);
	align-items: center;
}

/* 2. Kairos / book club -------------------------------------------------- */

/*
 * The blue fill is NOT decoration left over from the flat version — the
 * photograph's own ground is #ced8da, within a hair of this token, so the fill
 * is the image's matching backdrop. It covers the pull-quote below the picture
 * and any sliver beside it. Change one and the seam becomes visible.
 */
.kairos {
	padding-bottom: var(--myco-space-4xl);
	background: var(--myco-color-blue);
}

/* Grid wrapper for the photo-field contract — see "Photographic background
 * fields" above. Only the picture and the copy share this cell; the pull-quote
 * deliberately sits outside it, on the flat fill. */
.kairos__field {
	display: grid;
}

.kairos__grid {
	display: grid;
	grid-area: 1 / 1;
	gap: var(--myco-space-2xl);
	/*
	 * Mobile: copy in the top half, clear of the book — the portrait crop puts
	 * the still-life on the floor of the frame, same as the hero's hourglass.
	 */
	align-content: start;
	padding-block: var(--myco-space-2xl) var(--myco-space-4xl);
}

.kairos__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2.5rem, 9vw, 4.5rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.03em;
	line-height: 1;
}

.kairos__lede {
	margin-bottom: var(--myco-space-lg);
	color: var(--myco-color-text);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.125rem, 2.2vw, 1.4rem);
	font-style: italic;
	line-height: 1.5;
}

.kairos__text {
	max-width: 44ch;
	color: var(--myco-color-primary-soft);
}

.kairos__actions {
	margin-top: var(--myco-space-xl);
}

.kairos__quote {
	position: relative;
	width: min(calc(100% - var(--myco-gutter) * 2), 44rem);
	margin: var(--myco-space-4xl) auto 0;
	padding-block: var(--myco-space-xl);
	border-top: var(--myco-hairline);
	border-bottom: var(--myco-hairline);
}

/* Oversized hanging quote mark, set into the margin on wide screens. */
.kairos__quote::before {
	content: "\201D";
	position: absolute;
	top: 0.06em;
	left: 0;
	color: rgba(43, 40, 40, 0.16);
	font-family: var(--myco-font-serif);
	font-size: 6rem;
	line-height: 1;
	pointer-events: none;
}

.kairos__quote-body {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.kairos__quote-body p {
	margin: 0;
	font-family: var(--myco-font-serif);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-style: italic;
	line-height: 1.4;
	text-wrap: balance;
}

.kairos__quote-cite {
	margin-top: var(--myco-space-lg);
	color: var(--myco-color-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--myco-tracking-label);
	text-transform: uppercase;
}

/* Shared section furniture ------------------------------------------------ */

/*
 * A section head that is NOT centred. Every section on this page uses its own
 * composition; what they share is the eyebrow/title pairing and the hairline
 * that closes the head off from the content below it.
 */
.section-head {
	max-width: 34ch;
	margin-bottom: var(--myco-space-3xl);
	padding-bottom: var(--myco-space-lg);
	border-bottom: var(--myco-hairline);
}

.section-head__title {
	margin: 0;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

/* 3. Kairos Akademi + Kitaplarım ------------------------------------------ */

.akademi {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-rose);
}

.akademi__grid {
	display: grid;
	gap: var(--myco-space-2xl);
}

.akademi__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.akademi__text {
	max-width: 34ch;
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-style: italic;
	line-height: 1.5;
}

/* Click-to-load player ---------------------------------------------------- */

.lite-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--myco-color-primary);
}

.lite-video__poster,
.lite-video__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/*
 * The whole poster is the target — a small play button inside a large image is
 * a needlessly precise hit area. The label sits bottom-left rather than a
 * centred red lozenge, so the plate stays quiet until hovered.
 */
.lite-video__button {
	position: absolute;
	inset: 0;
	display: flex;
	gap: var(--myco-space-md);
	align-items: flex-end;
	justify-content: flex-start;
	padding: var(--myco-space-lg);
	background: linear-gradient(to top, rgba(43, 40, 40, 0.62) 0%, rgba(43, 40, 40, 0.12) 45%, rgba(43, 40, 40, 0) 70%);
	color: var(--myco-color-white);
	text-decoration: none;
	transition: background var(--myco-transition);
}

.lite-video__button:hover,
.lite-video__button:focus-visible {
	background: linear-gradient(to top, rgba(43, 40, 40, 0.74) 0%, rgba(43, 40, 40, 0.3) 55%, rgba(43, 40, 40, 0.12) 100%);
}

.lite-video__button:focus-visible {
	outline: 3px solid var(--myco-color-white);
	outline-offset: -6px;
}

/* Triangle drawn with borders — no icon font, no SVG request. */
.lite-video__icon {
	flex: none;
	width: 0;
	height: 0;
	margin-bottom: 0.15em;
	border-top: 0.5rem solid transparent;
	border-bottom: 0.5rem solid transparent;
	border-left: 0.85rem solid currentColor;
}

.lite-video__label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--myco-tracking-label);
	text-transform: uppercase;
}

.lite-video__note {
	margin-top: var(--myco-space-sm);
	color: var(--myco-color-muted-strong);
	font-size: var(--myco-font-size-xs);
}

/* Books band -------------------------------------------------------------- */

.akademi__books {
	margin-top: var(--myco-space-4xl);
	padding-top: var(--myco-space-2xl);
	border-top: var(--myco-hairline);
}

.akademi__books-eyebrow {
	margin-bottom: var(--myco-space-2xl);
}

.akademi__books-grid {
	display: grid;
	gap: var(--myco-space-2xl);
}

.book {
	display: grid;
	gap: var(--myco-space-lg);
	align-items: start;
}

/*
 * Covers are 673x600 native; 16rem (256px) is 38% of that. Presented as
 * objects on a plinth — the shadow sits under the cover, not around it.
 */
.book__cover {
	max-width: 16rem;
	margin: 0;
}

.book__image {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 14px 22px rgba(43, 40, 40, 0.22));
}

.book__title {
	margin-bottom: var(--myco-space-sm);
	font-size: var(--myco-font-size-xl);
	font-weight: 400;
	font-variation-settings: "opsz" 72;
}

.book__text {
	margin-bottom: var(--myco-space-lg);
	color: var(--myco-color-primary-soft);
	font-size: var(--myco-font-size-sm);
	line-height: 1.6;
}

/* 4. Son Videolarım -------------------------------------------------------- */

.home-videos {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
}

/* The index: hairline-ruled rows, the way a contents column is set. */
.video-index {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--myco-hairline);
}

.video-index__item {
	border-bottom: var(--myco-hairline);
}

.video-index__link {
	display: grid;
	gap: var(--myco-space-lg);
	grid-template-columns: minmax(0, 8.75rem) minmax(0, 1fr);
	align-items: center;
	padding-block: var(--myco-space-lg);
	color: inherit;
	text-decoration: none;
}

.video-index__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--myco-color-surface-strong);
}

/* 140px rendered against a 320px mqdefault — sharp past 2x. */
.video-index__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-index__title {
	font-size: var(--myco-font-size-sm);
	line-height: 1.45;
	transition: color var(--myco-transition);
}

.video-index__link:hover .video-index__title,
.video-index__link:focus-visible .video-index__title {
	color: var(--myco-color-accent-strong);
}

.home-videos__more {
	margin-top: var(--myco-space-2xl);
}

/* 5. Gündemden Yazılar ----------------------------------------------------- */

.home-posts {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-blue);
}

.home-posts__grid {
	display: grid;
	gap: var(--myco-space-2xl);
}

.home-posts__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.home-posts__lede {
	max-width: 30ch;
	margin-bottom: var(--myco-space-lg);
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: 1.15rem;
	font-style: italic;
	line-height: 1.5;
}

.home-posts__list {
	display: grid;
	border-top: var(--myco-hairline);
}

/*
 * Homepage entries are rows, not cards: no panel, no radius, no shadow. The
 * shared .card-post component keeps its own styling for the archive; these
 * rules restyle it for this context only.
 */
.home-posts__list .card-post {
	display: grid;
	gap: var(--myco-space-lg);
	padding: 0;
	padding-block: var(--myco-space-xl);
	border: 0;
	border-bottom: var(--myco-hairline);
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.home-posts__list .card-post__media {
	display: block;
	overflow: hidden;
	max-width: 12rem;
	aspect-ratio: 4 / 3;
}

.home-posts__list .card-post__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-posts__list .card-post__body {
	padding: 0;
}

.home-posts__list .card-post__title {
	margin-bottom: var(--myco-space-xs);
	font-size: var(--myco-font-size-xl);
	font-weight: 400;
	font-variation-settings: "opsz" 72;
	line-height: 1.25;
}

.home-posts__list .card-post__excerpt {
	max-width: 58ch;
	margin-bottom: var(--myco-space-sm);
	color: var(--myco-color-primary-soft);
	font-size: var(--myco-font-size-sm);
	line-height: 1.6;
}

.home-posts__list .card-post__meta {
	color: var(--myco-color-muted-strong);
	font-size: var(--myco-font-size-xs);
}

/*
 * The shared .entry-category is a pill, which is right in an archive but reads
 * as a UI chip against a large colour field. Here it becomes a small-caps
 * eyebrow — the same information, set as typography instead of a control.
 */
.home-posts__list .entry-categories {
	margin-bottom: var(--myco-space-xs);
}

.home-posts__list .entry-category {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--myco-color-muted-strong);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--myco-tracking-label);
	text-transform: uppercase;
}

.home-posts__list .entry-category:hover,
.home-posts__list .entry-category:focus-visible {
	color: var(--myco-color-accent-strong);
}

/*
 * No featured image: do NOT render an empty frame. The entry keeps the row but
 * leads with its category eyebrow set larger, so the absence reads as a
 * typographic choice rather than a missing asset.
 */
.card-post--plain .card-post__title {
	font-size: var(--myco-font-size-2xl);
}

.home-posts__list .card-post--plain {
	padding-left: var(--myco-space-lg);
	border-left: 2px solid var(--myco-color-club-2);
}

/* 6. İlham Verecek Notlar (newsletter) ------------------------------------- */

.home-notes {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
}

.home-notes__inner {
	display: grid;
	gap: var(--myco-space-2xl);
	align-items: center;
}

/*
 * The single approved portrait on the whole site. Native 1362x2048, capped at
 * 24rem (384px) — 28% of native, comfortably sharp.
 */
.home-notes__portrait {
	max-width: 24rem;
	margin: 0;
}

.home-notes__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 20px 34px rgba(43, 40, 40, 0.16));
}

.home-notes__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.home-notes__text {
	max-width: 42ch;
	margin-bottom: var(--myco-space-md);
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.55;
}

.home-notes__body .myco-button {
	margin-top: var(--myco-space-lg);
}

/* 7. Yaklaşan Etkinlikler -------------------------------------------------- */

.home-events {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-rose);
}

.home-events__inner {
	display: grid;
	gap: var(--myco-space-xl);
	text-align: left;
}

.home-events__title {
	margin: 0;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.home-events__text {
	max-width: 44ch;
	margin-bottom: var(--myco-space-md);
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.55;
}

.home-events__text--muted {
	color: var(--myco-color-muted-strong);
	font-family: var(--myco-font-sans);
	font-size: var(--myco-font-size-sm);
	font-style: normal;
}

/* Breakpoints -------------------------------------------------------------- */

@media (min-width: 48rem) {
	/*
	 * 48rem is where <picture> swaps to the landscape crop (the media query on
	 * the <source> in photo-field.php). These two MUST stay on the same
	 * breakpoint — split them and the portrait file gets laid out in a
	 * landscape box, or the reverse, and the object lands under the headline.
	 */
	.photo-field__bg {
		aspect-ratio: 1376 / 768;
	}

	/* Hero landscape crop: object right, so hold that edge. */
	.hero__bg .photo-field__image {
		object-position: right center;
	}

	/* Kairos landscape crop mirrors it: object left. */
	.kairos__bg .photo-field__image {
		object-position: left center;
	}

	/*
	 * Desktop: the hourglass occupies roughly the right 40% of the frame, so
	 * the type takes the left half and centres against it. Padding is minimum
	 * breathing room — the picture's aspect ratio sets the real height, and
	 * min-height only matters on very short/very wide viewports.
	 */
	.hero__grid {
		align-content: center;
		padding-block: var(--myco-space-3xl);
	}

	/*
	 * In the landscape crop the hourglass starts ~55% across the frame. The
	 * type block is held to just under half the container so it never runs
	 * under the object — tightest right at 48rem, where the container is
	 * narrow but the photograph's proportions are already the wide ones. The
	 * rem ceiling keeps the measure readable once the container caps out.
	 */
	.hero__type {
		max-width: min(48%, 34rem);
	}

	/*
	 * The h1's mobile clamp is scaled to the full container; from here it
	 * measures against a half-width column, so the vw coefficient halves.
	 * (Above 64rem it is re-set again for the wider track.)
	 */
	.hero__title {
		font-size: clamp(2.25rem, 4.4vw, 3.75rem);
	}

	/*
	 * Kairos mirrors the hero: the book holds the left ~55% of the landscape
	 * crop, so the copy takes the right half and pushes to the far edge of the
	 * container. Stacked under the hero — whose copy is left — the two sections
	 * read as a spread rather than a repeat.
	 */
	.kairos__grid {
		align-content: center;
		padding-block: var(--myco-space-3xl);
	}

	.kairos__body {
		max-width: min(48%, 34rem);
		margin-left: auto;
	}

	.kairos__title {
		font-size: clamp(2.25rem, 4.6vw, 3.5rem);
	}

	.kairos__quote::before {
		left: -0.62em;
	}

	.akademi__books-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--myco-space-3xl);
	}

	.book {
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	}

	.home-posts__list .card-post--media {
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
		align-items: start;
	}

	.home-notes__inner {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	}

	.home-events__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: var(--myco-space-3xl);
		align-items: start;
	}
}

@media (min-width: 64rem) {
	.hero__title {
		/*
		 * The headline measures against 7 of 12 columns (~536px at 1024,
		 * ~757px at 1440), not the full container, so the vw coefficient is
		 * scaled to the column rather than the page. At 6.4vw the long line
		 * "Zamanın Dışında" reaches its 5.75rem ceiling exactly as the
		 * container caps out — it never outruns its own column.
		 */
		font-size: clamp(3.75rem, 6.4vw, 5.75rem);
	}

	.kairos {
		padding-bottom: var(--myco-space-5xl);
	}

	/*
	 * No 12-column track here any more: the photograph is the composition, and
	 * the copy is positioned against where the book actually sits in the frame
	 * (right half, set at 48rem). A grid-column placement would fight that.
	 */
	.kairos__grid {
		padding-block: var(--myco-space-4xl);
	}

	.kairos__title {
		font-size: clamp(3rem, 5vw, 4.5rem);
	}

	.kairos__quote {
		margin-top: var(--myco-space-5xl);
	}

	/* Akademi: copy left across four columns, player right across eight. */
	.akademi {
		padding-block: var(--myco-space-5xl);
	}

	.akademi__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
		align-items: center;
	}

	.akademi__intro {
		grid-column: 1 / 5;
	}

	.akademi__player {
		grid-column: 6 / 13;
	}

	/* Videos: lead across seven, index across four, mirroring the hero. */
	.home-videos {
		padding-block: var(--myco-space-5xl);
	}

	/*
	 * Two columns of rows, not a card grid. column-gap only — the hairline on
	 * each row is the horizontal rhythm, so a row gap would break the ruling.
	 */
	.video-index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--myco-space-3xl);
	}

	/* Blog: heading column left, entries right — a contents page. */
	.home-posts {
		padding-block: var(--myco-space-5xl);
	}

	.home-posts__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
		align-items: start;
	}

	.home-posts__intro {
		position: sticky;
		top: var(--myco-space-2xl);
		grid-column: 1 / 5;
	}

	.home-posts__list {
		grid-column: 6 / 13;
	}

	.home-notes {
		padding-block: var(--myco-space-5xl);
	}

	.home-notes__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
	}

	.home-notes__portrait {
		grid-column: 1 / 5;
	}

	.home-notes__body {
		grid-column: 6 / 12;
	}

	.home-events {
		padding-block: var(--myco-space-5xl);
	}

	.home-events__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
	}

	.home-events__lead {
		grid-column: 1 / 6;
	}

	.home-events__body {
		grid-column: 7 / 13;
	}
}