/* pages-e4.css: Plan 4 design run, family E (web, 2026-10-06). Loaded after pages-g8.css on /resources/guides/,
   /resources/playbooks/, the 12 guide and playbook pages, /thanks/*, 404, /privacy/ and /accessibility/.
   Owned by family E so the D-owned pages-g5.css / pages-g8.css (also loaded by /about/, /contact/, /warranty/) stay
   untouched. Tokens from site.css only: no new colour, no new font, no motion. DESIGN.md is the system.
   Moves applied: 1 spacing/seams on one token, 2 shape (equal sibling cards, the strip as a tile), 4 alignment. */

/* =====================================================================================================================
   1. Resources hubs (/resources/guides/, /resources/playbooks/)
   ===================================================================================================================== */
/* the centred type hero: even lines on the three-line sub */
.hero--inner:has(#hub-h1) .hero__sub, .hero--inner:has(#pb-h1) .hero__sub { text-wrap: balance; }

/* seams on one token: cards -> FAQ -> ink panel. The guides section drops its bottom padding; the FAQ keeps one
   section token above and none below; the close brings its own token above the panel. */
.section--flush-top:has(.g5-guides) { padding-bottom: 0; }
.g5-faq.g8-basics { border-top: 0; padding-bottom: 0; }

/* card labels: two spans, a layout gap and a 1px rule instead of a typed middle dot */
.g5-guide__type { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s3); }
.g5-guide__type > span + span { position: relative; padding-left: var(--s3); }
.g5-guide__type > span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 0.9em;
  transform: translateY(-50%); background: currentColor; opacity: 0.45; }

/* equal siblings (TOM-TASTE 10-05): the Featured card keeps its tint as the featured marker and loses its span and
   its larger type, so the five cards are one row grid */
.g5-guide--featured { grid-column: auto; margin-bottom: 0; display: flex; }
.g5-guide--featured .card__title { font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; max-width: none; }
.g5-guide--featured .card__text { font-size: 1rem; line-height: 1.55; max-width: none; }
.g5-guide--featured .card__link { font-size: 1rem; margin-top: auto; }
@media (min-width: 48rem) {
  .g5-guide--featured { grid-template-columns: none; }
  .g5-guide--featured .g5-guide__media img { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .g5-guide--featured .g5-guide__body { justify-content: flex-start; gap: var(--s3); padding: var(--s8); }
  .g5-guide--featured .card__link { margin-top: auto; }
}

/* sibling rows share one row grid (subgrid): photo, label, title, text and link lines level across each row, and the
   "Buying refurbished instead?" strip becomes the sixth tile so a 3x2 (or 2x3) grid closes with no orphan */
/* (10-07, Opus resume) placement uses one :nth-child per card so the 64rem rules override the 48rem ones on equal
   specificity (the 10-06 compound selectors kept card 3 in row two at 1920 and hid the strip tile under card 5), and
   every strip rule is scoped to the Guides wrap so the Playbooks page's own strip keeps its g5 spacing. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 48rem) {
    .wrap:has(> .g5-guides) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); row-gap: 0;
      grid-template-rows: repeat(5, auto) var(--s6) repeat(5, auto) var(--s6) repeat(5, auto); }
    .g5-guides { grid-column: 1 / -1; grid-row: 1 / span 17; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; column-gap: var(--s6); row-gap: 0; }
    .g5-guide, .g5-guide--featured { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; gap: 0; }
    .g5-guides > :nth-child(1), .g5-guides > :nth-child(2) { grid-row: 1 / span 5; }
    .g5-guides > :nth-child(3), .g5-guides > :nth-child(4) { grid-row: 7 / span 5; }
    .g5-guides > :nth-child(5) { grid-row: 13 / span 5; grid-column: 1; }
    .g5-guide__body { display: contents; }
    .g5-guide__media { grid-row: 1; }
    .g5-guide__type { grid-row: 2; padding: var(--s8) var(--s8) 0; }
    .g5-guide .card__title { grid-row: 3; padding: var(--s3) var(--s8) 0; }
    .g5-guide .card__text { grid-row: 4; padding: var(--s3) var(--s8) 0; }
    .g5-guide .card__link { grid-row: 5; margin: var(--s4) var(--s8) var(--s8); align-self: start; justify-self: start; padding-top: 0; }
    .g5-guide--featured .g5-guide__body { padding: 0; }
    .wrap:has(> .g5-guides) > .g5-alsobuy { grid-column: 2; grid-row: 13 / span 5; margin-top: 0; flex-direction: column; align-items: flex-start;
      justify-content: flex-end; gap: var(--s3); padding: var(--s8); }
    .wrap:has(> .g5-guides) > .g5-alsobuy p { font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; max-width: 14ch; text-wrap: balance; }
  }
  @media (min-width: 64rem) {
    .wrap:has(> .g5-guides) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto) var(--s6) repeat(5, auto); }
    .g5-guides { grid-row: 1 / span 11; }
    .g5-guides > :nth-child(1), .g5-guides > :nth-child(2), .g5-guides > :nth-child(3) { grid-row: 1 / span 5; }
    .g5-guides > :nth-child(4), .g5-guides > :nth-child(5) { grid-row: 7 / span 5; }
    .g5-guides > :nth-child(4) { grid-column: 1; }
    .g5-guides > :nth-child(5) { grid-column: 2; }
    .wrap:has(> .g5-guides) > .g5-alsobuy { grid-column: 3; grid-row: 7 / span 5; }
  }
}

/* (10-07 finish review) the three questions sit in ~350-400px columns; `balance` split the compound "end-of-life" at its
   hyphen ("What counts as end- / of-life technology?") at every width from 64rem. `pretty` keeps the compound whole and
   still avoids a one-word last line. Narrow exception to the Balance Rule, these three h3s only. */
@media (min-width: 64rem) { .g5-faq.g8-basics .qa__q { text-wrap: pretty; } }

/* Guides FAQ (3 short answers): at 64rem the heading-left / list-right split left ~560px of blank column at 1920; the
   three answers become one row of three under the heading (a quiet list changes shape into a row), each on a 2px ink
   rule like the steps rules elsewhere; question and answer rows level across the row (subgrid). */
@media (min-width: 64rem) {
  .g5-faq.g8-basics .faq__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s10); }
  .g5-faq.g8-basics .faq__grid > .h2 { position: static; max-width: 24ch; }
  .g5-faq.g8-basics .faq__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--s8); border-top: 0; }
  .g5-faq.g8-basics .qa { grid-row: span 2; grid-template-rows: subgrid; align-content: start; padding: var(--s6) 0 0; border-bottom: 0; border-top: 2px solid var(--ink); }
}

/* =====================================================================================================================
   2. Guide and playbook pages (12): hero -> body -> FAQ -> closing on one token per seam
   ===================================================================================================================== */
/* (10-07 finish review) flat depth (DESIGN.md Elevation): site.css paints a radial lime glow behind every inner-hero
   photo card at 64rem; on a white page it reads as a blurred halo round the photo. E's article heroes sit on plain
   paper. (0,4,0 beats site.css's 0,3,0; site.css itself is family A's: requested there for contact/warranty.) */
@media (min-width: 64rem) { .hero.hero--inner:has(.hero__photo:not([hidden])) { background: var(--paper); } }

/* (10-07 finish review) checklist hero door line: two routes stacked as two lines (layout), the typed "·" removed */
.g5-doorline--pair { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }

.g5-article .g5-body { padding-bottom: 0; }
.g5-article .g5-faq { margin-top: 0; padding-top: var(--section-y); padding-bottom: 0; border-top: 0; }
@media (min-width: 64rem) {
  .g5-article .hero--inner { padding-bottom: var(--s12); }
  .g5-article .g5-body { padding-top: var(--s16); }
  /* the FAQ sits on the article's reading axis (the body column right of the 15rem contents rail) instead of the
     5/7 split that left a blank column under a one-line heading at 1920 */
  .g5-article .g5-faq .faq__grid { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--s16); row-gap: var(--s8); }
  .g5-article .g5-faq .faq__grid > * { grid-column: 2; }
  .g5-article .g5-faq .faq__grid > .h2 { position: static; }
  .g5-article .g5-faq .faq__list { max-width: calc(66ch * 1.125); } /* ends on the body's 66ch prose edge (prose is 18px, the list 16px) */
  .g5-article .g5-faq .faq__more { margin-top: 0; }
}
/* root-rule fix for the 390 overflow on the recycling guide (review G3): the single implicit grid track was `auto`, so
   the 34rem comparison table widened every section to 560px. minmax(0, 1fr) lets the table's own scroll wrap engage.
   (Below 64rem only: the 64rem rail + body columns in pages-g5.css are untouched. Requested at the root in pages-g5.css.) */
@media (max-width: 63.99rem) { .g5-body { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================================================
   3. Thanks pages: the ink card fills the right column (the section's own element in the empty column) and the two
      columns end together; the mascot sign-off sits at the foot of the ink card
   ===================================================================================================================== */
/* (10-07, Opus resume) Thanks pages change shape with the content they already have: at 64rem the confirmation
   (H1 + "What happens next" + the three steps as a one-row step strip) sits in a tint panel across the full wrap; under
   it, the paperwork note and the next reads on the left, the ink talk card (Gadget beside his line) and "Add details"
   on the right. Phones keep today's single column (it reads well at 390). No DOM change: .g5-ty__main becomes
   display: contents so its children take grid areas. */
@media (min-width: 64rem) {
  .g5-ty { padding-top: var(--s10); }
  .g5-ty__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s16); row-gap: 0; align-items: start;
    grid-template-areas: "h1 h1" "sh sh" "steps steps" "gap gap" "note talk" "reads talk" "add talk" "rest talk"; grid-template-rows: auto auto auto var(--s12) auto auto auto 1fr; }
  /* the side wrapper dissolves too: the talk card holds the right column, "Add details" closes the left one under the
     reads, so the left column is never blank on the three pages that have no paperwork note (partner, buy, other) */
  .g5-ty__side { display: contents; }
  .g5-ty__talk { grid-area: talk; }
  .g5-ty__add { grid-area: add; margin-top: var(--s8); }
  .g5-ty__grid::before { content: ""; grid-row: 1 / 4; grid-column: 1 / -1; align-self: stretch; border-radius: var(--r-card); background: var(--floor); z-index: 0; }
  .g5-ty__main { display: contents; }
  .g5-ty__main > * { position: relative; z-index: 1; }
  .g5-ty__h1 { grid-area: h1; padding: var(--s16) var(--s16) 0; max-width: none; text-wrap: balance; }
  .g5-ty__steps-h { grid-area: sh; margin: 0; padding: var(--s10) var(--s16) 0; }
  .g5-ty__grid > .g5-ty__main > .steps { grid-area: steps; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s8); padding: var(--s6) var(--s16) var(--s16);
    grid-template-rows: auto auto; row-gap: 0; }
  .g5-ty__grid > .g5-ty__main > .steps > li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 4px; } /* titles and texts level across the strip */
  .g5-ty__main > .g8-ty-note { grid-area: note; margin-top: 0; margin-bottom: var(--s8); }
  .g5-ty__main > .g5-ty__reads { grid-area: reads; margin-top: 0; }
  .g5-ty__talk { padding: var(--s8); }
  .g5-ty__talk .gadget { display: flex; flex-direction: row; align-items: center; gap: var(--s5); margin-top: var(--s4); padding-top: var(--s6); }
  .g5-ty__talk .gadget img { width: 72px; flex: none; }
  .g5-ty__talk .gadget__line { font-size: 1.25rem; line-height: 1.3; font-weight: 500; color: var(--on-dark); max-width: 16ch; text-wrap: balance; }
  .g5-ty__add { padding: var(--s6) var(--s8); }
}

/* =====================================================================================================================
   4. 404: three equal doors at every width from 48rem (never a wider third card); the "Also for" links as a list on
      phones; the address as two parts on a gap, no typed dot
   ===================================================================================================================== */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .g5-nf .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .g5-nf .grid-3 > .g5-door:nth-child(3):last-child { grid-column: auto; }
  .g5-nf .g5-door { padding: var(--s6); }
}
@media (max-width: 47.99rem) {
  .g5-nf__more { flex-direction: column; align-items: flex-start; gap: 0; }
}
.nf-hero .hero__sub { text-wrap: balance; } /* 1920 left "you there." alone on line two */
.g5-nf__addr { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.g5-nf__addr > span + span { position: relative; padding-left: var(--s3); }
.g5-nf__addr > span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 0.9em; transform: translateY(-50%); background: currentColor; opacity: 0.45; }

/* =====================================================================================================================
   5. Legal: the accessibility lede has no intro beside it, so its card spans the wrap as a band with a 66ch measure
      (privacy keeps its 7/5 lede + intro)
   ===================================================================================================================== */
@media (min-width: 64rem) {
  .d-legal:has(#a11y-h1) .d-legal__lede { grid-template-columns: minmax(0, 1fr); }
  .d-legal:has(#a11y-h1) .d-short { padding: var(--s10) max(var(--s12), calc(100% - 66ch - var(--s12))) var(--s10) var(--s12); }
}