/* ==========================================================================
   Peelerie — Discover index (version 1.1.2)
   The /pages/discover library, laid out as an editorial table of contents:
   a numbered chapter title on the left, one feature guide with its image,
   then the remaining guides as quiet hairline rows. Works on the existing
   page text, so nothing has to be re-saved. Loaded in the Midnight Editorial
   mood only, on the Discover page only.
   ========================================================================== */

body.pa-page-discover .entry-content { counter-reset: pa-dch; }

/* Hero: slightly shorter, the photo leaning right. */
body.pa-page-discover .pa-sh { min-height: clamp(520px, 72vh, 760px); }
body.pa-page-discover .pa-sh__media .pa-mf__img { object-position: 70% 50%; }

/* Chapters ------------------------------------------------------------------ */
body.pa-page-discover .pa-ch {
	counter-increment: pa-dch;
	max-width: 1320px;
	padding-top: clamp(64px, 8vw, 128px);
	padding-bottom: clamp(64px, 8vw, 128px);
}
@media (min-width: 1024px) {
	/* Goldish holds page text to a 1170px column; the index breaks out to 1440px on wide screens. */
	body.pa-page-discover .pa-ch { max-width: none; width: min(100vw - 32px, 1440px); margin-left: calc(50% - min(50vw - 16px, 720px)); }
}
body.pa-page-discover .pa-ch::before { background: var(--pa-ivory) !important; }
body.pa-page-discover .pa-ch + .pa-ch::after {
	content: ""; position: absolute; top: 0; left: var(--pa-gutter); right: var(--pa-gutter);
	border-top: 1px solid var(--pa-line);
}
body.pa-page-discover .pa-ch--wide .pa-ch__body {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: clamp(40px, 6vw, 112px);
	align-items: start;
}

/* Chapter title: gold numeral above a large display heading. */
body.pa-page-discover .entry-content .pa-ch h2 {
	margin: 0;
	font-size: clamp(40px, 4.4vw, 68px);
	line-height: 1;
	letter-spacing: -.015em;
}
body.pa-page-discover .entry-content .pa-ch h2::before {
	content: counter(pa-dch, decimal-leading-zero);
	display: block;
	margin-bottom: 22px;
	font-family: var(--pa-text, inherit);
	font-size: 12px;
	letter-spacing: .22em;
	line-height: 1;
	color: var(--pa-brass);
}

/* Guides: one feature, then rows. */
body.pa-page-discover .entry-content .pa-cards--img {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(28px, 3vw, 48px);
	row-gap: 0;
	margin: 0; padding: 0; border: 0;
}
body.pa-page-discover .entry-content .pa-cards--img > li { margin: 0; padding: 0; border: 0; }
body.pa-page-discover .entry-content .pa-cards--img > li > a {
	position: relative; display: block; height: 100%;
	padding: 26px 40px 26px 0;
	border-top: 1px solid var(--pa-line);
	text-decoration: none;
}
body.pa-page-discover .entry-content .pa-cards--img > li > a::after {
	content: "\2192"; display: block !important;
	position: absolute; right: 4px; top: 28px;
	font-size: 16px; line-height: 1; color: var(--pa-brass);
	transition: transform .4s var(--pa-ease);
}
body.pa-page-discover .entry-content .pa-cards--img > li > a:hover::after,
body.pa-page-discover .entry-content .pa-cards--img > li > a:focus-visible::after { transform: translateX(6px); }
body.pa-page-discover .pa-cards--img > li > a .pa-cards__img { display: none; }
body.pa-page-discover .entry-content .pa-cards__t { font-size: 22px; line-height: 1.2; color: var(--pa-ink); transition: color .3s; }
body.pa-page-discover .entry-content .pa-cards__d { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--pa-muted); }

/* The feature: first guide of each chapter (The house leads with Craftsmanship, so the
   page does not open and close on the same photograph). */
body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])),
body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) {
	grid-column: 1 / -1; order: -1; margin-bottom: 8px;
}
body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])) > a,
body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) > a {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 3vw, 48px);
	align-items: end; padding: 0 0 36px; border-top: 0;
}
body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])) > a::after,
body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) > a::after { display: none !important; }
body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])) .pa-cards__img,
body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) .pa-cards__img {
	display: block; grid-row: 1 / span 3; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: var(--pa-night-2);
}
body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])) .pa-cards__t,
body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) .pa-cards__t {
	font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1;
}
body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])) .pa-cards__d,
body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) .pa-cards__d {
	margin-top: 12px; font-size: 15px;
}
body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])) > a > .pa-cards__d::after,
body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) > a > .pa-cards__d::after {
	content: "Read the guide"; display: block; width: max-content; margin-top: 22px; padding-bottom: 4px;
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pa-ink);
	border-bottom: 1px solid var(--pa-ink);
}
body.pa-page-discover .pa-cards--img > li > a:hover .pa-cards__t,
body.pa-page-discover .pa-cards--img > li > a:focus-visible .pa-cards__t { color: var(--pa-brass); }

/* Closing band: the Journal as a real invitation, not a small link. */
body.pa-page-discover .pa-band { padding-top: clamp(80px, 10vw, 152px); padding-bottom: clamp(80px, 10vw, 152px); }
body.pa-page-discover.pa-story .entry-content .pa-band .pa-cta a {
	font-family: var(--pa-display); font-size: clamp(34px, 4.4vw, 64px); letter-spacing: -.01em; text-transform: none;
	line-height: 1.1; padding-bottom: 10px; border-bottom-width: 1px;
}

/* Tablet and phone -------------------------------------------------------- */
@media (max-width: 1023px) {
	body.pa-page-discover .pa-ch--wide .pa-ch__body { grid-template-columns: 1fr; }
	body.pa-page-discover .entry-content .pa-ch h2 { margin-bottom: 36px; }
}
@media (max-width: 767px) {
	body.pa-page-discover .entry-content .pa-cards--img { grid-template-columns: 1fr; }
	body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])) > a,
	body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) > a { grid-template-columns: 1fr; padding-bottom: 28px; }
	body.pa-page-discover .pa-cards--img > li:first-child:not(:has(a[href$="/about-us"])) .pa-cards__img,
	body.pa-page-discover .pa-cards--img:has(a[href$="/about-us"]) > li:has(a[href$="/craftsmanship"]) .pa-cards__img { grid-row: auto; margin-bottom: 22px; aspect-ratio: 3 / 2; }
	body.pa-page-discover .entry-content .pa-cards--img > li > a { padding: 22px 36px 22px 0; }
	body.pa-page-discover .entry-content .pa-cards--img > li > a::after { top: 24px; }
	body.pa-page-discover .entry-content .pa-cards__t { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	body.pa-page-discover .entry-content .pa-cards--img > li > a::after { transition: none; }
}