/* HomeIsSecure, human redesign 2026-10-14: the eight home care guides (src/components/inner/GuidePage.tsx;
   ART-DIRECTION.md section 5, "Guide pages"). Long reading set for reading: a 64ch measure at 18 / 1.6, the steps as
   ruled work orders with hanging Michroma numerals, tips as kraft dog-ear cards, the checklist as a printed kraft card.
   1 head (photo strip, the h1 on a white label over its lower left)  2 body grid  3 lead  4 steps  5 photo
   6 checklist  7 questions and the closing note  8 more guides (booklets on a plank) and related articles
   9 tablets and phones. */

/* ---------------------------------------------------------------- 1 head */
.gd-head { padding: 28px 0 32px; }
.gd-hero { position: relative; }
.gd-strip { aspect-ratio: 21 / 8; margin: 0; }
/* the white label: a tab cut into the photo's lower left, its top-right corner rounded like the photo */
.gd-label { position: relative; z-index: 1; width: min(940px, 76%); margin: -132px 0 0; padding: 30px 44px 0 0; border-top-right-radius: var(--photo-r); background: var(--white); }
.gd-label h1 { max-width: 20ch; margin: 0; font-size: 56px; line-height: 1.02; text-wrap: balance; }
.gd-under { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; margin-top: 28px; }
.gd-under .lede { grid-column: 1 / span 7; }
.gd-start { grid-column: 9 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 4px; }
.gd-facts { gap: 8px; }
.gd-facts .tag { font-size: var(--t-tag); }

/* ---------------------------------------------------------------- 2 body: the text in columns 1-9 (numerals hang in
   its first 96 px), the contents strip in 10-12 */
.gd-body { padding: 48px 0 24px; }
.gd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.gd-main { grid-column: 1 / span 9; min-width: 0; padding-left: 96px; }
.gd-side { grid-column: 10 / -1; align-self: stretch; }
.gd-side .side-stick { top: calc(var(--hdr) + 24px); }

/* ---------------------------------------------------------------- 3 lead: the first paragraph larger */
.gd-lead { margin: 0 0 48px; }
.gd-lead p { max-width: 64ch; margin: 0 0 1em; font-size: 18px; line-height: 1.6; }
.gd-lead .gd-first { max-width: 52ch; font-size: 23px; line-height: 1.45; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- 4 steps as work orders: a 2 px charcoal rule over
   each (it runs under the numeral too), the Michroma numeral hanging left, the h2, the text, the tips */
.gd-steps { margin: 0; padding: 0; list-style: none; }
.gd-step { position: relative; max-width: none; margin: 0; padding: 36px 0 52px; scroll-margin-top: calc(var(--hdr) + 16px); }
.gd-step::before { content: ""; position: absolute; top: 0; left: -96px; right: 0; border-top: 2px solid var(--charcoal); }
.gd-no { position: absolute; top: 34px; left: -96px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 80px; margin: 0; }
.gd-num { color: var(--charcoal); font: 400 40px / 1 var(--f-tag); letter-spacing: -0.02em; }
.gd-k { color: var(--muted); font: 400 11px / 1.45 var(--f-tag); letter-spacing: 0.08em; text-transform: uppercase; }
.gd-wo h2 { max-width: 24ch; margin: 0 0 16px; font-size: 34px; line-height: 1.1; }
.gd-wo > p { max-width: 64ch; margin: 0 0 24px; font-size: 18px; line-height: 1.6; }
.gd-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; }
/* two tips: two equal columns across the text column; one tip: a full-width note with the 6 px tan side plate of the
   article notes (.h-note) instead of a half-width card beside an empty half (client review 2026-10-14) */
.gd-tips.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-tips.n1 { grid-template-columns: minmax(0, 1fr); max-width: 64ch; }
.gd-tips > li { max-width: none; margin: 0; padding: 20px 22px 22px; background-image: var(--grain); }
.gd-tips.n1 > li { --f: 0px; padding: 18px 24px 20px 22px; border: 0; border-left: 6px solid var(--tan); border-radius: 4px; clip-path: none; }
.gd-tips.n1 > li::after { content: none; }
.gd-tips b { display: block; margin: 0 0 8px; padding-right: 18px; font: 800 18px / 1.2 var(--f-sans); letter-spacing: -0.01em; }
.gd-tips.n1 b { padding-right: 0; }
.gd-tips p { max-width: none; margin: 0; font-size: 16px; line-height: 1.5; }

/* ---------------------------------------------------------------- 5 the photo after step 3, captioned */
.gd-fig { margin: 36px 0 0; }
.gd-fig .ph { display: block; aspect-ratio: 16 / 9; }
.gd-fig figcaption { display: flex; align-items: baseline; gap: 10px; max-width: 64ch; margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.gd-fig figcaption::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--tan); transform: translateY(-1px); }

/* ---------------------------------------------------------------- 6 the checklist: a printed kraft card with a tan
   fold, square tick boxes (charcoal frame, tan when ticked), the count in Michroma */
.gd-check { position: relative; margin: 8px 0 72px; padding: 36px 40px 30px; border-radius: var(--card-r); background: var(--kraft); background-image: var(--grain); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); scroll-margin-top: calc(var(--hdr) + 16px); }
.gd-check::after { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px; border-bottom-left-radius: 4px; background: linear-gradient(to bottom left, transparent 50%, var(--tan) 50%); }
.gd-check-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 8px; padding-right: 24px; }
.gd-check-head h2 { margin: 0; font-size: 34px; line-height: 1.1; }
.gd-count { color: var(--charcoal); font: 400 22px / 1 var(--f-tag); letter-spacing: 0.02em; white-space: nowrap; }
.gd-check-note { max-width: none; margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.gd-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; margin: 0; padding: 0; list-style: none; }
.gd-checklist li { max-width: none; margin: 0; border-top: 1.5px dashed rgba(36, 34, 31, 0.32); }
.gd-checklist label { display: flex; align-items: flex-start; gap: 14px; min-height: 56px; margin: 0; padding: 15px 0 14px; color: var(--charcoal); font: 600 17px / 1.4 var(--f-sans); cursor: pointer; }
.gd-checklist input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: -1px 0 0; border: 2px solid var(--charcoal); border-radius: 3px; background-color: var(--white); }
.gd-checklist input[type="checkbox"]:checked { border-color: var(--charcoal); background: var(--tan) var(--check) no-repeat center / 15px 15px; }
.gd-checklist input[type="checkbox"]:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.gd-checklist li.done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--charcoal); text-decoration-thickness: 1.5px; }

/* ---------------------------------------------------------------- 7 questions and the closing note */
.gd-faq { margin: 0 0 56px; scroll-margin-top: calc(var(--hdr) + 16px); }
.gd-faq > h2 { margin: 0 0 24px; font-size: 34px; line-height: 1.1; }
.gd-faq .ledger { border-top: 2px solid var(--charcoal); }
.gd-close { position: relative; padding: 0 0 0 28px; border-left: 4px solid var(--tan); }
.gd-close p { max-width: 64ch; margin: 0 0 14px; font-size: 18px; line-height: 1.6; }
.gd-close .g-sign { margin: 0; font-size: 16px; font-weight: 800; }

/* ---------------------------------------------------------------- 8 more guides: three booklets from the home's
   manual shelf standing on a 6 px tan plank, on white (review 2026-10-14: two identical rows of three cards ended
   every guide). The head in columns 1-4, the shelf in 5-12. Booklet: kraft cover with a spine shadow, the photo
   window in the top 55 %, the Michroma G-code (from data-g), the title (Schibsted 800, 16 px), the group in small
   Michroma and "Read the guide"; it rises 12 px on hover. Then the related articles as dog-ear cards. */
.gd-more { padding: 72px 0 56px; }
.gd-shelf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; margin: 0 0 88px; }
.gd-shelf-head { grid-column: 1 / span 4; align-self: center; padding-bottom: 8px; }
.gd-shelf-head h2 { max-width: 12ch; margin: 0 0 14px; }
.gd-shelf-row { grid-column: 5 / -1; }
.gd-books { display: flex; align-items: flex-end; gap: 40px; margin: 0; padding: 0 0 0 28px; list-style: none; }
.gd-bk { flex: 0 0 236px; height: var(--bh, 320px); max-width: none; margin: 0; }
.gd-bk a, .gd-bk a:visited {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 10px 14px 14px;
  border-radius: 3px 6px 6px 3px;
  background: var(--kraft) var(--grain);
  box-shadow: inset 5px 0 0 rgba(36, 34, 31, 0.14), inset -1px 0 0 rgba(36, 34, 31, 0.1);
  color: var(--charcoal);
  text-decoration: none;
  transition: transform 0.22s ease;
}
.gd-bk a:hover, .gd-bk a:focus-visible { transform: translateY(-12px); color: var(--charcoal); }
.gd-bk a:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.gd-bk-win { order: -1; display: block; flex: none; height: 55%; overflow: hidden; border-radius: 3px; background: var(--white); }
.gd-bk-win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-bk a::before { content: attr(data-g); margin: 12px 0 5px; color: var(--muted); font: 400 var(--t-tag) / 1 var(--f-tag); letter-spacing: var(--track-tag); }
.gd-bk-t { order: 1; font: 800 16px / 1.15 var(--f-sans); letter-spacing: -0.015em; }
.gd-bk a:hover .gd-bk-t { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.gd-bk-grp { order: 2; margin: auto 0 6px; padding-top: 8px; color: var(--muted); font: 400 9.5px / 1.35 var(--f-tag); letter-spacing: 0.1em; text-transform: uppercase; }
.gd-bk-go { order: 3; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gd-bk-go::after { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--arrow-r) no-repeat center / contain; mask: var(--arrow-r) no-repeat center / contain; }
.gd-plank { display: block; height: 7px; margin-top: -1px; border-radius: 2px; background: var(--tan); box-shadow: 0 12px 18px -10px rgba(36, 34, 31, 0.45); }
.gd-rel-h { margin: 0 0 24px; font-size: 30px; line-height: 1.1; }
/* fresh-eyes check 2026-10-15: the three booklets need 816 px, and below 1320 px the 8-column row is narrower (739 px
   at 1200 px), so from 1200 to 1255 px the third booklet ran past the screen's edge, where it was cut off (and up to
   1319 px past the column). There the booklets narrow to share the row (210 px at 1200 px; 200 px below 1200 px) */
@media (min-width: 1200px) and (max-width: 1319.98px) {
  .gd-bk { flex: 0 1 236px; min-width: 0; }
}

/* ---------------------------------------------------------------- 9 tablets and phones */
@media (max-width: 1199.98px) {
  .gd-label h1 { font-size: 48px; }
  .gd-shelf-head { grid-column: 1 / span 3; }
  .gd-shelf-row { grid-column: 4 / -1; }
  .gd-books { gap: 20px; padding-left: 16px; }
  .gd-bk { flex-basis: 200px; }
  .gd-main { grid-column: 1 / -1; }
  .gd-side { display: none; }
  .gd-main .toc-m { display: block; }
  .gd-start { grid-column: 8 / -1; }
}
@media (max-width: 991.98px) {
  .gd-strip { aspect-ratio: 16 / 8; }
  .gd-label { width: min(720px, 88%); margin-top: -96px; padding: 24px 32px 0 0; }
  .gd-under { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .gd-under .lede, .gd-start { grid-column: 1; }
  .gd-main { padding-left: 72px; }
  .gd-step::before { left: -72px; }
  .gd-no { left: -72px; width: 60px; }
  .gd-num { font-size: 30px; }
  .gd-tips, .gd-tips.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .gd-shelf { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .gd-shelf-head, .gd-shelf-row { grid-column: 1; }
  .gd-shelf-head h2 { max-width: none; }
}
@media (max-width: 767.98px) {
  .gd-head { padding: 16px 0 24px; }
  .gd-strip { aspect-ratio: 4 / 3; }
  .gd-label { width: calc(100% - 28px); margin-top: -64px; padding: 18px 18px 0 0; border-top-right-radius: 16px; }
  .gd-label h1 { font-size: 36px; line-height: 1.05; }
  .gd-under { margin-top: 20px; }
  .gd-body { padding-top: 32px; }
  .gd-main { padding-left: 0; }
  .gd-lead .gd-first { font-size: 20px; }
  .gd-step { padding: 28px 0 40px; }
  .gd-step::before { left: 0; }
  .gd-no { position: static; flex-direction: row; align-items: baseline; gap: 14px; width: auto; margin: 0 0 12px; }
  .gd-num { font-size: 26px; }
  .gd-wo h2 { font-size: 27px; }
  .gd-wo > p, .gd-lead p { font-size: 17px; }
  /* phones: a step's tips as ruled rows inside one kraft dog-ear card (bold title, text, 1 px rules between; client
     review 2026-10-14: two or three separate cards per step made the guide a column of beige boxes); a single tip
     stays the side-plate note */
  .gd-tips.n1 { max-width: none; }
  .gd-tips:not(.n1) { display: block; position: relative; max-width: none; padding: 2px 20px; border-radius: var(--card-r); background: var(--kraft) var(--grain); clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%); }
  .gd-tips:not(.n1)::after { content: ""; position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold); border-bottom-left-radius: 4px; background: linear-gradient(to bottom left, transparent 50%, var(--tan) 50%); pointer-events: none; }
  .gd-tips:not(.n1) > li { --f: 0px; padding: 16px 0 17px; border: 0; border-radius: 0; background: none; clip-path: none; }
  .gd-tips:not(.n1) > li::after { content: none; }
  .gd-tips:not(.n1) > li + li { border-top: 1px solid var(--ink-20); }
  .gd-tips:not(.n1) > li:first-child b { padding-right: 26px; }
  .gd-tips b { margin-bottom: 6px; font-size: 17px; }
  .gd-check { padding: 28px 20px 22px; }
  .gd-check-head h2, .gd-faq > h2 { font-size: 28px; }
  .gd-checklist { grid-template-columns: minmax(0, 1fr); }
  .gd-close { padding-left: 20px; }
  .gd-more { padding: 48px 0 40px; }
  /* phones: the three booklets in one row (about 102 px each, no scroller); the group and "Read the guide" stay in
     the link for screen readers, out of sight */
  .gd-shelf { margin-bottom: 56px; }
  .gd-books { gap: 12px; padding: 0 6px; }
  .gd-bk { flex: 1 1 0; min-width: 0; height: calc(var(--bh, 320px) * 0.62); }
  .gd-bk a, .gd-bk a:visited { padding: 6px 7px 10px 10px; }
  .gd-bk-win { height: 54%; }
  .gd-bk a::before { margin: 9px 0 4px; font-size: 10px; letter-spacing: 0.1em; }
  .gd-bk-t { font-size: 13px; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; }
  .gd-bk-grp, .gd-bk-go { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .gd-rel-h { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .gd-bk a { transition: none; }
}
/* devices pass 2026-10-14: at 320-374 px the guide titles' long words ("maintenance", "homeowners") ran a few px past
   the label at 36 px */
@media (max-width: 374.98px) {
  .gd-label h1 { font-size: 32px; }
}