/* ============================================================================
   gryphon-replica — home.css : the eleven homepage bands.

   EVERY number in this file came off the live source with tools/measure-home.py and a
   per-element geometry dump at 1440, 1024 and 390 — not from a token, and not from a band
   height. Band height is the measurement that lies: the hero read 567px on both sides for
   days while the source showed ONE rotating full-bleed photograph and ours showed three
   stills side by side. Compare element counts, tag names, box sizes and computed type.

   Measured bands at 1440 (source):
     header 165 · hero 567 · Featured Collections 881 · Featured Products 982 · video 596
     · gallery 810 · rich text 213 · quotes 767 · news 722 · map 500 · footer 504
   ========================================================================= */

.gr-home { padding: 0; }

/* ⚠ CONTAINER WIDTH. Every homepage band wraps in a 1170px container with 15px side padding,
   so the content column is 1140 — which is what makes the product card 263 wide, the news card
   370 and the quote card 370. base.css ships a sitewide 1200px container (content 1170), 30px
   wider, and that 30px is enough to put every grid cell 7px out. Scoped to .gr-home so the rest
   of the site keeps its own container. */
.gr-home .gr-container { max-width: 1170px; }

/* ⚠ MEASURED on the source (.section-header-title), not derived from a token.
   --font-size-rte-header is 30px and the section title is 38px; --font-family-header is
   "Andada Pro" and the section title inherits the h2 Vollkorn stack, which the source never
   loads, so it renders as the browser's default serif. Using the tokens here produced three
   wrong values at once. Measure per component.

   The header BLOCK is 71px: a 36px line plus 35px of padding below it (`.section-header -md`).
   That 71 is a term in the Featured Collections, Featured Products and Gryphon News sums, so a
   28px margin here quietly shortened three bands at once. */
.gr-section-title {
	font-family: Vollkorn, serif;
	font-weight: 500;
	text-transform: var(--text-transform-section-title);
	color: var(--color-heading);
	font-size: 38px;
	line-height: 36px;
	text-align: center;
	margin: 0 0 35px;
}

/* .gr-btn moved to layout.css — it is used sitewide. See the note there. */

/* ---- Hero -----------------------------------------------------------------
   TWO DIFFERENT COMPONENTS, and the breakpoint is 1024 — not the 991 this file used.

   >= 1024  `.hero-area.mobile-hidden` — three caption columns (480 wide at 1440, 341 at 1024)
            laid over ONE full-bleed photograph that crossfades behind them. Band 567.
              .hero-background-wrapper  1440 x 567
                .hero-item-bg.active    1440 x 567  opacity 1
                .hero-item-bg           1440 x 567  opacity 0  x2
                .hero-item              480 wide, background-image NONE
   <= 1023  `.desktop-hidden` — a real ONE-SLIDE-AT-A-TIME swiper. Band 591. Each slide carries
            its OWN photograph, its own black 60% scrim and its own bottom caption, and three
            dots sit 20px off the bottom (8x8 white at opacity .61728, active 12x12 at 1).

   Both mistakes this band has made are worth keeping written down. First, each caption column
   was given its own background, so three photographs sat side by side and nothing ever changed.
   Then, with that fixed, the mobile layout stacked all three captions over the single shared
   photograph — three unrelated headlines on one picture, which is what the owner rejected. The
   band height was right both times.

   Measured type:
     title  Andada Pro 700, uppercase, letter-spacing 1px, white
              >=1281  32px/32px      1024-1280  20px/20px      <=1023  26px/36.4px
     desc   Montserrat, white at opacity .7, 20px below the title
              >=1281  19px/27.1429px 1024-1280  14px/20px      <=1023  19px/27.1429px
     caption  absolute, bottom 50px, padding 30px, text-align CENTER (checked, not left)
              <=1023  bottom 0, full width, padding 80px 30px, over a
                      linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5))
   --------------------------------------------------------------------------- */
.gr-hero {
	padding: 0;
	position: relative;
	min-height: 567px;              /* measured band height */
	overflow: hidden;
}

/* the rotating backdrop — desktop only; below 1024 each slide owns its picture */
.gr-hero-bgs { position: absolute; inset: 0; z-index: 0; }
.gr-hero-bg {
	position: absolute;
	inset: 0;
	display: block;
	background-size: cover;
	background-position: center;
	opacity: 0;
	/* the source crossfades between layers rather than sliding them */
	transition: opacity .9s ease-in-out;
}
.gr-hero-bg.is-active { opacity: 1; }

.gr-hero-overlay {
	position: absolute; inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.12) 100%);
	pointer-events: none;
}

.gr-hero-row {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	min-height: 567px;
}
.gr-hero-item {
	position: relative;
	display: block;
	min-height: 567px;
	color: #fff;
	/* NO background-image: above 1024 the photograph belongs to the band, not the column. */
}
/* The per-slide photograph. Painted ONLY below 1024 — see the media query at the foot. */
.gr-hero-item-bg { display: none; }

/* ⚠ FIXED 170px BOX, not a bottom-hugging one. Measured at 1440 all three captions are
   512..682 with their titles on the same line at y=542 — the box is a constant height and the
   text runs DOWN from its top, so a two-line headline grows downward and the three titles stay
   level. Bottom-anchoring instead pushed the longer headlines up and staggered the row. */
.gr-hero-caption {
	position: absolute; left: 0; right: 0; bottom: 50px;
	z-index: 2;
	display: block;
	height: 170px;
	padding: 30px;
	text-align: center;
}
.gr-hero-title {
	display: block;
	font-family: var(--font-family-header);
	font-size: 32px;
	line-height: 32px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;      /* hero-item-title text-uppercase */
	color: #fff;
}
.gr-hero-desc {
	display: block;
	margin-top: 20px;
	font-family: var(--font-family);
	font-size: 19px;
	line-height: 27.1429px;
	color: #fff;
	opacity: .7;
}

/* Dots. Hidden above 1024, where the source shows no pager at all. */
.gr-hero-dots {
	display: none;
	position: absolute;
	left: 0; right: 0; bottom: 20px;
	z-index: 3;
	text-align: center;
	line-height: 23px;
	height: 23px;
}
.gr-hero-dot {
	display: inline-block;
	width: 8px; height: 8px;
	margin: 0 5px;
	padding: 0;
	border: 0;
	border-radius: 100%;
	background: #fff;
	opacity: .61728;
	cursor: pointer;
	vertical-align: middle;
	transition: opacity .25s ease, width .25s ease, height .25s ease;
}
.gr-hero-dot.is-active { width: 12px; height: 12px; opacity: 1; }

/* ---- bands 4 + 7: image bars ----
   MEASURED padding on the source's inner container: 80px top / 60px bottom (60/60 below 768).
   Band heights 881 (Featured Collections) and 810 (gallery). An earlier build used a flat 46px
   top and bottom everywhere, which is most of why the homepage ran ~1,150px short. */
.gr-imagebar { padding: 80px 0 60px; }
.gr-imagebar-alt { background: var(--color-bg-alternative); }

/* ⚠ SIX TILES IN TWO ROWS OF DIFFERENT HEIGHTS — not a uniform grid.
   Row 1 (Vintage / Used / New)              373 x 450
   Row 2 (Oval Hole / Telecasters / eBay)    373 x 200
   10px gaps both ways plus a trailing 10px below the last row, because the source's columns
   carry margin-bottom:10px: 450 + 10 + 200 + 10 = 670, and 80 + 71 + 670 + 60 = 881.
   A flat min-height of 240 on all six gave 708 — 173 short, and the wrong rhythm as well. */
.gr-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 10px;
}
.gr-tile {
	position: relative;
	display: block;
	height: 450px;
	overflow: hidden;
	margin: 0;
	color: #fff;
}
.gr-tile:nth-child(n+4) { height: 200px; }
.gr-tile-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transition: transform .4s ease;
}
.gr-tile:hover .gr-tile-bg { transform: scale(1.04); }
/* MEASURED: `gallery-item-overlay` is FLAT black at opacity .2 across the whole tile. Ours was
   a bottom-weighted gradient to 55%, which darkened the pictures far more than the source does. */
.gr-tile::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(0, 0, 0, .2);
}
.gr-tile-body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 30px 45px;
	display: block;
}
.gr-tile-head {
	display: block;
	font-family: var(--font-family-header);
	font-weight: 500;
	font-size: 24px;
	line-height: 26.4px;
	color: #fff;
	margin: 0 0 5px;
}
.gr-tile-sub {
	display: block;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 18px;
	line-height: 25.7143px;
	color: #fff;
	margin: 0;
}
.gr-tile-static::after { background: none; }

/* band 7 gallery — TEN images in two rows of different widths, read off the captured DOM:
   4 x col-md-3 (278 x 450) then 6 x col-md-2 (182 x 200), 10px gaps, 10px trailing.
   450 + 10 + 200 + 10 = 670, and 80 + 670 + 60 = 810. The source renders them DESATURATED.
   Ours used 190 and 120, which is what made this band 460 instead of 810 — the images were
   there, they were simply a third of the height they should be. */
.gr-gallery-wide, .gr-gallery-small { display: grid; gap: 10px; }
.gr-gallery-wide  { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.gr-gallery-small { grid-template-columns: repeat(6, 1fr); margin-bottom: 10px; }
.gr-gtile {
	margin: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(1);
	transition: filter .25s ease;
}
.gr-gallery-wide  .gr-gtile { height: 450px; }
.gr-gallery-small .gr-gtile { height: 200px; }
.gr-gtile:hover { filter: grayscale(0); }

/* ---- band 5: featured products ---- measured padding 80 top / 30 bottom, height 982.
   Grid is 4-up with a 30px column gap and a FIFTY pixel row gap (the source's columns carry
   margin-bottom:50px), plus a trailing 50px:
     80 + 71 + (row1 + 50 + row2 + 50) + 30 = 982   with row1 340 and row2 362. */
.gr-featured { padding: 80px 0 30px; }
.gr-pgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 30px;
	row-gap: 50px;
	margin-bottom: 50px;
}

/* ⚠ THE HOMEPAGE CARD IS NOT THE ARCHIVE CARD. Scope everything below to .gr-featured.
 *
 * The source serves two different product cards and they do not share a box model:
 *
 *             image        title                          price
 *   homepage  263 x 230    16px/22.4px 700 rgb(99,88,76)   15px/21.4286px rgb(102,101,101)
 *   (and the PDP related row, same component)   NOT clamped — it runs to 3 and 4 lines
 *   archive   203 x 304    14px/19.88px 700 rgb(61,66,70)  14px/20px rgb(34,34,34), 2-line clamp
 *
 * layout.css owns the archive card and is another agent's file; it is correct for the archive.
 * Reusing it here rendered portrait 183 x 274 pictures in this band. Every rule here is
 * prefixed .gr-featured so no archive or cross-sell card is touched. */
.gr-featured .gr-pcard { margin: 0; }
.gr-featured .gr-pcard-image {
	position: relative;
	display: block;
	height: 230px;
	margin: 0 0 10px;
	overflow: hidden;
}
.gr-featured .gr-pcard-image img {
	display: block;
	width: 100%;
	height: 230px;
	margin: 0;
	aspect-ratio: auto;
	object-fit: contain;            /* MEASURED object-fit: the source letterboxes, it does not crop */
}
/* the whole picture is a link, as it is at source (`a.product-thumb-href` over the box) */
.gr-featured .gr-fcard-cover { position: absolute; inset: 0; z-index: 1; display: block; }

/* ⚠ QUICK VIEW — present on all eight cards, and missing from ours entirely.
   Measured 139 x 36, dead centre of the 263 x 230 image box, OPACITY 0 until the card is
   hovered: orange #E16020, radius 45px, padding 12px 25px, 12px/12px Montserrat 700 uppercase
   with 1px tracking. href is the product URL — that is what the source's anchor carries, so
   this is a real link and not a dead control. */
.gr-featured .gr-fcard-quick {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	padding: 12px 25px;
	border-radius: 45px;
	background: var(--color-primary);
	color: #fff;
	font-family: var(--font-family);
	font-size: 12px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .25s ease;
}
.gr-featured .gr-pcard:hover .gr-fcard-quick,
.gr-featured .gr-fcard-quick:focus { opacity: 1; }

.gr-featured .gr-pcard-title {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;      /* the archive card clamps to 2; this one does not clamp */
	font-family: var(--font-family);
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 700;
	color: rgb(99, 88, 76);
	margin: 0 0 8px;
}
/* The price BOX is 23 tall and the price TEXT is 15px/21.4286px: at source they are two
   elements, a 16px/22.8571px <ul> wrapping a 15px <li>. One element has to carry both, so the
   line-height is the wrapper's and the font-size is the text's — 2px per card, 4px per band. */
.gr-featured .gr-pcard-price {
	margin: 0;
	font-size: 15px;
	line-height: 22.8571px;
	color: rgb(102, 101, 101);
}

/* ---- band 6: video ----
   ⚠ MEASURED: source DOM is col-md-7 (MEDIA) then col-md-5 (TEXT) with `row-col-inverse`, so the
   TEXT renders LEFT at 5/12 against a dark band and the MEDIA RIGHT at 7/12. An earlier build used
   equal halves reversed the other way, mirroring the whole band. */
.gr-video { padding: 0; }
.gr-video-row {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: stretch;
	min-height: 596px;   /* measured band height; inner padding is 0/0 */
}
.gr-video-text {
	background: #4a443d;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 56px;
}
.gr-video-text h2 {
	font-family: var(--font-family-header);
	font-size: 30px;
	line-height: 1.25;
	color: #fff;
	margin: 0 0 14px;
}
.gr-video-text p { color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.6; margin: 0 0 22px; }
.gr-btn-ghost {
	background: rgba(0,0,0,0);
	border: 1px solid rgba(255,255,255,.85);
	color: #fff;
	align-self: flex-start;
}
.gr-btn-ghost:hover { background: #fff; color: var(--color-heading); }
.gr-video-media {
	position: relative;
	display: block;
	background-size: cover;
	background-position: center;
	min-height: 596px;
}
.gr-play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 0; height: 0;
	border-left: 26px solid #fff;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

/* ---- band 8: rich text ---- measured inner padding 0/0, band height 213 */
.gr-richtext {
	background: var(--color-bg-alternative);
	text-align: center;
	padding: 46px 0;
	min-height: 213px;
}
.gr-richtext h2 { color: var(--color-heading); }
.gr-richtext p { font-size: var(--font-size-rte); margin: 0 0 18px; }

/* ---- band 9: quotes (measured 767) ----
   MEASURED, and this is why the band ran 189 short:

     container      padding 80 / 50
     swiper         1140 x 607, margin-bottom 30px   ->  80 + 607 + 30 + 50 = 767
     card           370 wide, 15px gaps, VERTICALLY CENTRED against the tallest
     blockquote     padding 30px, border 2px solid rgb(245,242,235), radius 6px, white
     quote icon     25 x 21, 15px below it
     body           17px/24.2857px Montserrat 400 rgb(102,101,101) — UPRIGHT, not italic
     tail           a 28px speech-bubble point hanging 13px below the card, centred
     author         30px below the card, cite 16px/22.8571px Montserrat 400

   Ours was a 15px ITALIC Andada Pro paragraph in a 1px-bordered box with 26/24/20 padding and
   top-aligned cards: smaller type, thinner frame, no tail, wrong font and wrong family. */
.gr-quotes { padding: 80px 0 50px; }
.gr-quote-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	align-items: center;            /* the source centres the short cards against the tall one */
	margin-bottom: 30px;
}
.gr-quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}
.gr-quote blockquote {
	position: relative;
	margin: 0;
	padding: 30px;
	border: 2px solid rgb(245, 242, 235);
	border-radius: 6px;
	background: #fff;
}
/* the speech-bubble tail: a border-coloured point with a white one just inside it */
.gr-quote blockquote::before,
.gr-quote blockquote::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 0; height: 0;
	border-style: solid;
}
.gr-quote blockquote::before {
	bottom: -13px;
	margin-left: -14px;
	border-width: 13px 14px 0;
	border-color: rgb(245, 242, 235) transparent transparent;
}
.gr-quote blockquote::after {
	bottom: -10px;
	margin-left: -12px;
	border-width: 11px 12px 0;
	border-color: #fff transparent transparent;
}
.gr-quote-mark { display: block; margin: 0 auto 15px; width: 25px; }
.gr-quote-mark svg { width: 25px; height: 21px; fill: rgb(102, 101, 101); }
.gr-quote p + p { margin-top: 10px; }   /* measured gap between the source's paragraphs */
.gr-quote p {
	font-family: var(--font-family);
	font-size: 17px;
	line-height: 24.2857px;
	color: rgb(102, 101, 101);
	font-style: normal;
	margin: 0;
}
.gr-quote figcaption {
	display: block;
	margin-top: 30px;
	font-family: var(--font-family);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 22.8571px;
	color: rgb(102, 101, 101);
}

/* ---- band 10: news (measured 722) ----
     container   padding 80 / 80, background rgb(245,242,235)
     header      71
     rail        1140 wide showing THREE of FIVE 370-wide cards, card height 439 + 30px gap
     pager       23px, 3 bullets at desktop / 5 at mobile, black, active 10x10 at .64
                 against 8x8 at .2
     ->  80 + 71 + (439 + 30 + 23) + 80 = 723 (source 722)

   Card, measured: 2px rgb(245,242,235) border, 6px radius, thumbnail 366 x 220, caption
   padding 30px on white, date 16px rgb(166,166,166), H3 20.28px/24.336px MONTSERRAT 700, body
   15px/21.4286px. Ours showed three posts with 370x248 thumbs and an 18px Andada Pro title.

   The rail is a native scroll-snap scroller, so it swipes with no script; tools/find-overflow.py
   deliberately ignores children of a horizontal scroller, so the off-screen cards are not
   reported as page overflow (and they are not — the document does not scroll sideways). */
.gr-news { padding: 80px 0; background: var(--color-bg-alternative); }
.gr-news-rail {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gr-news-rail::-webkit-scrollbar { height: 0; width: 0; }
.gr-news-track { display: flex; gap: 15px; }
.gr-newscard {
	flex: 0 0 370px;
	width: 370px;
	height: 439px;
	margin: 0 0 30px;
	border: 2px solid rgb(245, 242, 235);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	scroll-snap-align: start;
}
.gr-newscard-link { display: block; color: inherit; text-decoration: none; }
.gr-newscard-img { display: block; height: 220px; overflow: hidden; background: rgb(245, 242, 235); }
.gr-newscard-img img { display: block; width: 100%; height: 220px; object-fit: cover; margin: 0; }
.gr-newscard-body { display: block; padding: 30px; background: #fff; }
.gr-newscard-meta {
	display: block;
	font-family: var(--font-family);
	font-size: 16px;
	line-height: 22.8571px;
	color: rgb(166, 166, 166);
	margin: 0 0 10px;
}
/* Clamped to the source's measured box: every one of its five titles is exactly two lines and
   every body exactly three, which is what keeps all five cards at 439 and the band at 722. */
.gr-newscard-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--font-family);
	font-size: 20.28px;
	line-height: 24.336px;
	font-weight: 700;
	color: rgb(102, 101, 101);
	min-height: 48.67px;
	margin: 0 0 10px;
}
.gr-newscard-link:hover .gr-newscard-title { color: var(--color-primary); }
.gr-newscard-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--font-family);
	font-size: 15px;
	line-height: 21.4286px;
	color: rgb(102, 101, 101);
	min-height: 64.29px;
	margin: 0;
}
.gr-news-dots { text-align: center; height: 23px; line-height: 23px; }
.gr-news-dot {
	display: inline-block;
	width: 8px; height: 8px;
	margin: 0 5px;
	padding: 0;
	border: 0;
	border-radius: 100%;
	background: #000;
	opacity: .2;
	cursor: pointer;
	vertical-align: middle;
	transition: opacity .25s ease, width .25s ease, height .25s ease;
}
.gr-news-dot.is-active { width: 10px; height: 10px; opacity: .64; }
/* The source pages three-up above 768, which gives it three bullets, not five. */
.gr-news-dot:nth-child(n+4) { display: none; }
.gr-empty { text-align: center; color: var(--color-body); }

/* ---- band 11: map (measured 500) ---- */
.gr-map {
	min-height: 500px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	padding: 40px 0;
}
.gr-map-card {
	background: rgba(255, 255, 255, .95);
	padding: 28px 32px;
	max-width: 420px;
}
.gr-map-card h2 { color: var(--color-heading); font-size: 24px; line-height: 1.25; }
.gr-map-addr { margin: 0 0 12px; }
.gr-hours { border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.gr-hours th, .gr-hours td { text-align: left; padding: 2px 18px 2px 0; font-weight: 400; }
.gr-hours th { color: var(--color-heading); font-weight: 700; }

/* ============================================================================
   RESPONSIVE — full selectors repeated, because media queries add no specificity.
   A base rule of `.gr-featured .gr-pcard-title` (0,2,0) beats a bare `.gr-pcard-title`
   inside a query (0,1,0), so every override below carries the same prefix it overrides.
   ========================================================================= */

/* ---- 1024-1280: the desktop hero drops to its small type ----
   MEASURED at 1280, 1200, 1100 and 1024 — all four read 20px/20px title and 14px/20px desc.
   The exact switch between 1281 and 1440 was not pinned down; 1281 is the safe lower edge. */
@media (max-width: 1280px) {
	.gr-home .gr-hero-title { font-size: 20px; line-height: 20px; }
	.gr-home .gr-hero-desc  { font-size: 14px; line-height: 20px; }
}

/* ---- below 1024: THE HERO BECOMES A REAL ONE-SLIDE CAROUSEL ----
   Measured breakpoint. Band 591. One photograph with ITS OWN caption, nothing else visible,
   three dots below. The caption columns stack in place and crossfade together with their
   picture, driven by the `.is-active` class app.js already sets on the bg layers (mirrored onto
   the items by the sync script in front-page.php). With no JS at all, slide 1 renders — the
   template marks item 0 active server-side. */
@media (max-width: 1023px) {
	.gr-home .gr-hero,
	.gr-home .gr-hero-row { min-height: 591px; }
	.gr-home .gr-hero-bgs,
	.gr-home .gr-hero-overlay { display: none; }

	.gr-home .gr-hero-row { display: block; position: relative; }
	.gr-home .gr-hero-item {
		position: absolute;
		inset: 0;
		min-height: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity .9s ease-in-out;
	}
	.gr-home .gr-hero-item.is-active { opacity: 1; pointer-events: auto; }

	/* each slide's own photograph, and its own 60% black scrim */
	.gr-home .gr-hero-item-bg {
		display: block;
		position: absolute; inset: 0;
		background-size: cover;
		background-position: center;
	}
	.gr-home .gr-hero-item-bg::after {
		content: ""; position: absolute; inset: 0;
		background: #000; opacity: .6;
	}

	.gr-home .gr-hero-caption {
		bottom: 0;
		height: auto;           /* mobile captions are 216/271/307 — they size to their text */
		padding: 80px 30px;
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
	}
	.gr-home .gr-hero-title { font-size: 26px; line-height: 36.4px; }
	.gr-home .gr-hero-desc  { font-size: 19px; line-height: 27.1429px; }

	.gr-home .gr-hero-dots { display: block; }
}

/* A full-bleed picture changing by itself is exactly what this setting is for. app.js already
   stops the rotation; this stops the crossfade so a reader who does reach a dot gets a cut. */
@media (prefers-reduced-motion: reduce) {
	.gr-home .gr-hero-bg,
	.gr-home .gr-hero-item { transition: none; }
}

@media (max-width: 991px) {
	.gr-home .gr-tiles { grid-template-columns: repeat(2, 1fr); }
	.gr-home .gr-pgrid { grid-template-columns: repeat(3, 1fr); }
	.gr-home .gr-video-row { grid-template-columns: 1fr; }
	.gr-home .gr-video-text { padding: 34px 28px; }
	.gr-home .gr-video-media { min-height: 300px; }
	.gr-home .gr-gallery-wide { grid-template-columns: repeat(2, 1fr); }
	.gr-home .gr-gallery-small { grid-template-columns: repeat(3, 1fr); }
	.gr-home .gr-quote-row { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- below 768 ----
   MEASURED at 390: container padding 60/60 (news 60/80), section title 30.1px, and EVERY tile
   in both image bars is a full-width 360 x 300 with a 10px gap. Band 2 = 60 + 71 + 1860 + 60 =
   2051; band 5 = 60 + 3100 + 60 = 3220; band 10 = 60 + 71 + 491 + 80 = 702. The news pager
   shows all five bullets because the rail pages one card at a time. */
@media (max-width: 767px) {
	.gr-home .gr-section-title { font-size: 30.1px; line-height: 36px; }

	.gr-home .gr-imagebar { padding: 60px 0; }
	.gr-home .gr-tiles { grid-template-columns: 1fr; }
	.gr-home .gr-tile,
	.gr-home .gr-tile:nth-child(n+4) { height: 300px; }
	.gr-home .gr-tile-body { padding: 30px; }

	.gr-home .gr-gallery-wide,
	.gr-home .gr-gallery-small { grid-template-columns: 1fr; }
	.gr-home .gr-gallery-wide .gr-gtile,
	.gr-home .gr-gallery-small .gr-gtile { height: 300px; }

	.gr-home .gr-pgrid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 30px; }

	.gr-home .gr-news { padding: 60px 0 80px; }
	.gr-home .gr-news-dot:nth-child(n+4) { display: inline-block; }

	.gr-home .gr-map-card { max-width: none; }
}