/* ── Six magazine styles in six tiles: slide 25 of the brand-guidelines reel
   (DfG2efsNelf, "COLOR PAIRINGS": the logo set on six brand-colour cards),
   cloned off the slide (refs/reel-DfG2efsNelf/slides/s25.png, 1182 x 664) for
   #styles, page 09. Every box is the slide's px / 11.82 in container units:
     corners   the shared .b-corner pair, cap 40-48
     title     one small line centred between them, cap 40-48 (9 px)
     tiles     292 x 194, columns at 135 / 445 / 755 (pitch 310), rows at 130 / 340
     name      two lines centred in each tile, caps 69 and 102 under its top
               (cap 22.7 px, pitch 33): Herbik, cap .674em -> 33.7 px
     page      "25" at the foot (the shared .b-page), ours "09"
   Herbik's line box (typo .937/.263): cap top ((L - 1.2) / 2 + .263) em under the
   box top -> .1525em at line-height .979, 5.1 px. EB Garamond (typo 1.007/.298,
   cap .65em): ((L - 1.305) / 2 + .357) em -> .2045em at line-height 1.
   Their small sans title -> EB Garamond; their display face -> Herbik.
   Their six pairings -> ours, ground / type:
     plum / blush            -> navy / cream
     ivory / coral           -> cream stepped with taupe at 8 % (their ivory is one
                                step off their white page) / oxblood
     coral / ivory           -> oxblood / cream
     butter / brown-black    -> taupe at 30 % on the page (a light taupe) / black
     brown-black / olive     -> black / cream (taupe on black is 2.6:1, too dim
                                for a name; their olive there is a light colour)
     golden olive / brown    -> taupe / cream (black on taupe is 2.5:1)
   "SARAH / BLONDIN" -> six of the ten magazine styles, each to the customizer. */
.s25-title { left: 0; right: 0; top: 3.23cqw; text-align: center; font: 400 1.172cqw / 1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }   /* cap 40, 9 px */

.s25-tile { width: 24.704cqw; height: 16.413cqw; padding-top: 5.403cqw; box-sizing: border-box; display: block; text-align: center; text-decoration: none; font: 400 2.851cqw / .979 var(--f-head); text-transform: uppercase; letter-spacing: .03em; transition: filter .5s var(--ease); }   /* 292 x 194; cap 69 under the top */
.s25-tile span { display: block; white-space: nowrap; }
.s25-tile--1, .s25-tile--4 { left: 11.421cqw; }                  /* 135 */
.s25-tile--2, .s25-tile--5 { left: 37.648cqw; }                  /* 445 */
.s25-tile--3, .s25-tile--6 { left: 63.875cqw; }                  /* 755 */
.s25-tile--1, .s25-tile--2, .s25-tile--3 { top: 10.998cqw; }     /* 130 */
.s25-tile--4, .s25-tile--5, .s25-tile--6 { top: 28.765cqw; }     /* 340 */
.s25-tile--1 { background: var(--navy); color: var(--cream); }
.s25-tile--2 { background: rgba(122, 80, 52, .08); color: var(--oxblood); }
.s25-tile--3 { background: var(--oxblood); color: var(--cream); }
.s25-tile--4 { background: rgba(122, 80, 52, .3); color: var(--black); }
.s25-tile--5 { background: var(--black); color: var(--cream); }
.s25-tile--6 { background: var(--taupe); color: var(--cream); }
.s25-tile:hover { filter: brightness(1.08); }
.s25-tile:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* phones: the title over two columns of tiles, the names as big as the tiles allow */
@media (max-width: 749px) {
  .s25 .b-w { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4cqw; }
  .s25-title { left: auto; right: auto; top: auto; grid-column: 1 / -1; margin-bottom: 7cqw; font-size: 4cqw; }
  .s25-tile { left: auto; top: auto; width: auto; height: auto; aspect-ratio: 292 / 194; padding-top: 0; display: flex; flex-direction: column; justify-content: center; font-size: 5.2cqw; }
  .s25 .b-page { grid-column: 1 / -1; }
}