/* ============================================================================
   gryphon-replica — page.css : the info-page template.
   RECON-DESIGN §15.1 — sidebar of sibling links, h1, sub-headline, body,
   then the "Questions or comments?" closing block.
   ========================================================================= */

.gr-page { padding: 24px 0 64px; }
.gr-page .gr-breadcrumb { margin: 0 0 18px; }

.gr-page-cols { display: block; }
.gr-page.has-rail .gr-page-cols {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 48px;
	align-items: start;
}
.gr-page-body { min-width: 0; }

/* ---- sibling rail ---- */
.gr-rail-title {
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 1px solid #e3e0da;
}
.gr-rail-list { list-style: none; margin: 0; padding: 0; }
.gr-rail-list li { border-bottom: 1px solid #efece5; }
.gr-rail-list a {
	display: block;
	padding: 9px 0;
	font-size: 14px;
	color: var(--color-body);
}
.gr-rail-list a:hover { color: var(--color-primary); }
.gr-rail-list li.is-active { border-left: 3px solid var(--color-primary); padding-left: 10px; }
.gr-rail-list li.is-active a { color: var(--color-heading); font-weight: 700; }

/* ---- body ---- */
/* MEASURED on three of the source's info pages (contact, FAQ, workshop — all identical):
   .gryp-heading is Vollkorn 60px / 72px at 1440 AND 1024, stepping down to 38px / 45.6px at 390.
   Ours was 38 / 30 / 26, i.e. the source's MOBILE size on desktop. These pages carry PageFly's own
   type scale, which is much larger than the theme's, and that was a known open item until it was
   measured. */
.gr-page-title {
	font-family: Vollkorn, serif;        /* the source's stack, deliberately not loaded */
	font-weight: 500;
	font-size: 60px;
	line-height: 72px;
	color: var(--color-heading);
	margin: 0 0 18px;
}
.gr-entry { font-size: 16px; line-height: 1.65; color: var(--color-body); }
/* .gryp-subHeading, measured: 28px / 36px. */
.gr-entry h2 {
	font-family: var(--font-family-header);
	font-size: 28px;
	line-height: 36px;
	color: var(--color-heading);
	margin: 26px 0 12px;
}
.gr-entry h3 {
	font-family: var(--font-family);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-heading);
	margin: 22px 0 8px;
}
.gr-entry p { margin: 0 0 14px; }
.gr-entry ul, .gr-entry ol { margin: 0 0 16px; padding-left: 22px; }
.gr-entry li { margin: 0 0 6px; }
.gr-entry a { text-decoration: underline; }
.gr-entry img { display: block; max-width: 100%; height: auto; margin: 18px 0; }
.gr-entry table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.gr-entry th, .gr-entry td { border-bottom: 1px solid #e3e0da; padding: 8px 10px; text-align: left; }
.gr-entry .gr-empty { color: #9a9894; font-style: italic; }

/* ---- closing block, verbatim from the source ---- */
.gr-page-closing {
	margin: 40px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid #e3e0da;
}
.gr-page-closing h2 {
	font-family: var(--font-family-header);
	font-size: 22px;
	color: var(--color-heading);
	margin: 0 0 10px;
}
.gr-page-closing p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }

/* ============================================================================
   RESPONSIVE — full selectors repeated; media queries add no specificity.
   ========================================================================= */
@media (max-width: 991px) {
	.gr-page.has-rail .gr-page-cols { grid-template-columns: 1fr; gap: 26px; }
	/* 60px holds at 1024 — measured, not assumed. */
}
@media (max-width: 767px) {
	.gr-page .gr-page-title { font-size: 38px; line-height: 45.6px; }   /* measured at 390 */
	.gr-page .gr-entry { font-size: 15px; }
	.gr-page .gr-entry h2 { font-size: 20px; }
}

/* =========================================================================
   404 — the source's full-viewport photo band.
   gryp-styles.css, verbatim values; see 404.php for the measurements.
   ========================================================================= */
.gr-404-container {
	position: relative;
	height: 100vh;
	overflow: hidden;
}
.gr-404-bg,
.gr-404-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.gr-404-bg {
	z-index: 1;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* Solid black at half opacity — NOT an rgba() background. The source paints a separate layer, and
   that is what makes the photo read as desaturated rather than tinted. */
.gr-404-overlay {
	z-index: 2;
	background: #000;
	opacity: .5;
}
.gr-404-caption {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	text-align: center;
	width: 100%;
	padding: 0 30px;
}
.gr-404-title {
	font-family: Vollkorn, serif;
	font-size: 18rem;          /* 180px at the 62.5% root */
	font-weight: 700;
	line-height: .4;           /* source renders the 180px glyph in a 72px box */
	color: inherit;
	margin: 0 0 3rem;
	text-shadow: 0 2px 15px rgba(0, 0, 0, .2);
}
.gr-404-subtitle {
	font-size: 2rem;
	font-weight: 700;
	opacity: .84;
	margin: 0 0 3rem;
	color: inherit;
}
.gr-404-btn {
	padding: 15px 30px;
	font-size: 1.6rem;
}

/* Below sm the band stops being viewport-tall and becomes padding-driven, so the caption can be
   taller than the screen without clipping. */
@media (max-width: 767px) {
	.gr-404-container { height: auto; }
	.gr-404-caption {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		padding: 150px 30px;
	}
	.gr-404-title { font-size: 12rem; margin-bottom: 7rem; }
}

/* =========================================================================
   Page grids the PageFly extraction flattened — see inc/content-grid.php.
   Column counts are the source's own --c-xs / --c-sm / --c-md values.
   ========================================================================= */
.gr-cardgrid,
.gr-logogrid {
	display: grid;
	gap: 2rem 3rem;
	margin: 0 0 3rem;
	align-items: start;
}
/* MEASURED, and it is not what the --c-* custom properties suggested. On /pages/workshop the
   staff grid renders 4 PER ROW at 1440 (columns ~236 wide, images 206x206) and 2 PER ROW at 390
   (columns 180x227, images 150x150). Reading --c-md:2 as "one sixth" gave 6 per row on desktop and
   1 per row on a phone, which made that page 833px SHORTER than the source at 1440 and 1,681px
   TALLER at 390 - wrong in both directions at once. */
.gr-cardgrid { grid-template-columns: repeat(2, 1fr); }
.gr-logogrid { grid-template-columns: 1fr; }

@media (min-width: 768px) {
	.gr-cardgrid { grid-template-columns: repeat(4, 1fr); }   /* measured: 4 per row */
	.gr-logogrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.gr-cardgrid { grid-template-columns: repeat(4, 1fr); }   /* measured, not --c-md:2 */
	/* the column count comes from the measured map in inc/content-grid.php */
	.gr-logogrid { grid-template-columns: repeat(var(--gr-logo-cols, 4), 1fr); }
}

/* The portrait is a SQUARE that does not fill its column: 206x206 in a ~236 column at 1440 and
   150x150 in a 180 column at 390, i.e. about 83% of the column, centred. object-fit keeps the row
   even when a staff photo has a different aspect - one of them is a 3000x3000 JPEG, which is what
   made the flattened page tall in the first place. */
.gr-cardgrid-item img {
	display: block;
	width: 83.3%;
	max-width: 206px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto;
}
/* Measured: h3 is 20.28px / 22.308px with margin 15px 0 10px. */
.gr-cardgrid-item h3,
.gr-cardgrid-item h4 {
	font-size: 20.28px;
	line-height: 22.308px;
	margin: 15px 0 10px;
	text-align: center;
}
/* A brand logo is artwork on white: contain it, never crop it. */
.gr-logogrid-item img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 90px;
	object-fit: contain;
	margin: 0;
}

/* =========================================================================
   FAQ accordion — collapsed, as the source ships it. See inc/content-faq.php.
   Source panel body: padding 20px, font-size 19px (the rich-text size).
   ========================================================================= */
.gr-faq-item {
	border-bottom: 1px solid #e3e0da;
}
/* Measured: the source's Accordion.Header is 830x54 with padding 15px and 16px/22.8571 type
   (77px tall when the question wraps to two lines, which is what happens at 390). */
.gr-faq-q {
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	line-height: 22.8571px;
	padding: 15px 32px 15px 15px;
	position: relative;
	font-weight: 700;
	color: var(--color-heading);
}
.gr-faq-q::-webkit-details-marker { display: none; }
/* A caret drawn in CSS, so nothing depends on an icon font loading. */
.gr-faq-q::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.gr-faq-item[open] > .gr-faq-q::after { transform: rotate(-135deg); margin-top: -2px; }
.gr-faq-a {
	padding: 20px;
	font-size: 19px;
	line-height: 1.5;
}
.gr-faq-a > :last-child { margin-bottom: 0; }