/* texture_look.css -- the main page's paper tear, the grounds of its plain sections, and a quieter blueprint.
   Main page only (landing.html links it when page_mode == 'main'); every rule is scoped to html[data-design="blueprint"],
   which only the main page carries.

   Joseph, 2026-09-23 (report 90):
     "Blueprint segments should have a realistic paper tear at the bottom to break up sections visually.
      Also, the plain blue (and to a lesser extent the plain gold) sections are visually not coherant. the entire
      main page being blueprint background sections would be too monotenous, you have to find a way to re-work the
      backgrounds of those sections without making them blueprints. the main page is looking really "engineer",
      a bit weird since we do manual labor work, maybe tune that down a bit?"

   HOW THE TEAR WORKS. The sections are sheets: each blueprint sheet's bottom edge is torn, and the section under it
   shows through the tear. The LOWER section draws it, so no markup changes and no JavaScript:
     ::before  a strip of the lower section's OWN ground, raised over the last --tear-band of the sheet above and cut
               to the torn line by an alpha mask (tear_mask); where it is cut away the blueprint stays visible.
     ::after   the torn fringe of the sheet above (the white paper core the coating tore back from, loose fibres) and
               the shadow it casts, --tear-drop deep, into the lower section (tear_edge).
   Both images are one 1600px period, rendered by tools/paper_look/build.py, and share size and x offset, so they
   stay in register at any width. --tear-x shifts each section's tear so no two edges on the page match.
   Upper sections keep at least --tear-band + a gap under their last line, so the edge never covers text.

   ONE LOOK (Joseph, 2026-09-24, report 90 LK-1 = B): "I like craft paper". Kraft paper is the main page's look for good;
   the ?look=a|b|c|off switch, options A (concrete) and C (block and sandstone), their images and the ?tone=off path were
   removed (git history keeps them: 4d5c191). The four tone-downs below stay (LK-2..LK-6 unanswered: keep what is built). */

html[data-design="blueprint"] {
  /* ---- the tear --------------------------------------------------------------------------------------- */
  --tear-w: 1600px;                 /* one period of the edge image */
  --tear-band: 36px;                /* how deep the torn line reaches into the sheet above */
  --tear-drop: 20px;                /* how far its shadow reaches into the section below */
  --tear-gap: 16px;                 /* clear space kept between an upper section's last line and the band */
  --tear-edge: url("/static/brand/look/tear_edge.r1.webp");
  --tear-mask: url("/static/brand/look/tear_mask.r1.webp");

  /* ---- ground tiles (value names: the size a tile is drawn at) ---------------------------------------- */
  --look-tile-600: 600px;

  /* ---- ground colours: the average of each tile, shown before it loads (computed, see build.py) --------- */
  --look-chipboard:       #26211e;
  --look-kraft:           #be8e5a;
}

/* ---- the materials (option B, kraft paper) ------------------------------------------------------------------ */
html[data-design="blueprint"] {
  --look-plain-ground: var(--look-chipboard) url("/static/brand/look/ground_chipboard.r1.webp") 0 0 / var(--look-tile-600) repeat;
  --look-accent-ground: var(--look-kraft) url("/static/brand/look/ground_kraft.r1.webp") 0 0 / var(--look-tile-600) repeat;
}
html[data-design="blueprint"] #contact { background: var(--look-plain-ground); }
html[data-design="blueprint"] .cta-strip { background: var(--look-accent-ground); }

/* ---- the tear: drawn by every section that sits under a blueprint sheet ------------------------------------
   Dev pick 1 (2026-10-01, Joseph, section#how: "add a tear effect to the top as well"): #how (.steps-section)
   used to only tear INTO the sheet below it (.hiring-section's own tear eats its bottom, which is why it
   already reserved --tear-gap*1.5 under its last line). It now also draws its OWN tear at the top, into the
   sheet above it (#contact), the same way why-section/#contact/hiring-section/cta-strip already do. */
html[data-design="blueprint"] .why-section { --tear-x: 0px; }
html[data-design="blueprint"] #contact { --tear-x: -530px; }
html[data-design="blueprint"] .steps-section { --tear-x: -780px; }
html[data-design="blueprint"] .hiring-section { --tear-x: -1010px; }
html[data-design="blueprint"] .cta-strip { --tear-x: -260px; }

html[data-design="blueprint"] .why-section,
html[data-design="blueprint"] #contact,
html[data-design="blueprint"] .steps-section,
html[data-design="blueprint"] .hiring-section,
html[data-design="blueprint"] .cta-strip {
  position: relative;
  z-index: 2;                   /* above the sheet it overlaps (the hero's content sits at 1) */
  overflow: visible;            /* the why and hiring bands clipped their (summer-only) brick layer */
}
html[data-design="blueprint"] .why-section::before,
html[data-design="blueprint"] #contact::before,
html[data-design="blueprint"] .steps-section::before,
html[data-design="blueprint"] .hiring-section::before,
html[data-design="blueprint"] .cta-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--tear-band));
  height: var(--tear-band);
  background: inherit;          /* this section's own ground ... */
  -webkit-mask: var(--tear-mask) var(--tear-x) 0 / var(--tear-w) var(--tear-band) repeat-x;
          mask: var(--tear-mask) var(--tear-x) 0 / var(--tear-w) var(--tear-band) repeat-x;
  pointer-events: none;
  z-index: 0;
}
/* ... shifted so it continues the section's ground without a seam (the grid is drawn at -1px -1px). */
html[data-design="blueprint"] .why-section::before,
html[data-design="blueprint"] .hiring-section::before {
  background-position: -1px calc(var(--tear-band) - 1px);
}
html[data-design="blueprint"] #contact::before,
html[data-design="blueprint"] .steps-section::before,
html[data-design="blueprint"] .cta-strip::before {
  background-position: 0 var(--tear-band);
}
html[data-design="blueprint"] .why-section::after,
html[data-design="blueprint"] #contact::after,
html[data-design="blueprint"] .steps-section::after,
html[data-design="blueprint"] .hiring-section::after,
html[data-design="blueprint"] .cta-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--tear-band));
  height: calc(var(--tear-band) + var(--tear-drop));
  background: var(--tear-edge) var(--tear-x) 0 / var(--tear-w) 100% repeat-x;
  pointer-events: none;
  z-index: 3;
}

/* Hotfix 2026-10-08 (Joseph: "the hover box needs to draw OVER the tear"): #contact's phone-pill notes open
   downward, into the band where .steps-section tears into #contact (pick 1). With #contact at z-index 2 the notes
   were stuck inside #contact's own layer, under the next section. Here #contact makes no layer of its own
   (z-index auto), so a note's z-index 60 counts against the whole page; its two tear layers keep their places
   by their own z-index (2 = level with the sheet above but later on the page, so still over it; 3 = the edge). */
html[data-design="blueprint"] #contact { z-index: auto; }
html[data-design="blueprint"] #contact::before { z-index: 2; }

/* Keep every upper sheet's last line clear of the band the tear eats. */
html[data-design="blueprint"] [data-content="direct"] .hero.splash {
  padding-bottom: calc(var(--tear-band) + var(--tear-gap));
}
/* #contact is now also an upper sheet: .steps-section tears into its bottom (pick 1, above). */
html[data-design="blueprint"] [data-content="direct"] .compact-strip {
  padding-bottom: calc(var(--tear-band) + var(--tear-gap));
}
html[data-design="blueprint"] [data-content="direct"] .steps-section,
html[data-design="blueprint"] [data-content="direct"] .hiring-section {
  padding-bottom: calc(var(--tear-band) + var(--tear-gap) * 1.5);
}
@media (max-width: 640px) {
  html[data-design="blueprint"] [data-content="direct"] .hero.splash {
    padding-bottom: calc(var(--tear-band) + var(--tear-gap) / 2);
  }
}

/* ---- less "engineer" ---------------------------------------- */
/* 1. No monospace: labels, the "Get a quote" lines, the sub-line, phone numbers and the footer use the page font. */
html[data-design="blueprint"] .section-label,
html[data-design="blueprint"] .step-meta,
html[data-design="blueprint"] .tile .go,
html[data-design="blueprint"] .hero-sub,
html[data-design="blueprint"] footer .site-footer-note,
html[data-design="blueprint"] a[href^="tel:"] {
  font-family: inherit;
}
html[data-design="blueprint"] .section-label { letter-spacing: 1.5px; }
/* 2. No corner crop-marks on the cards. */
html[data-design="blueprint"] .tile::before,
html[data-design="blueprint"] .tile::after,
html[data-design="blueprint"] .step-card::before,
html[data-design="blueprint"] .step-card::after,
html[data-design="blueprint"] .why-card::before,
html[data-design="blueprint"] .why-card::after {
  content: none;
}
/* 3. The dashed ruler tick under a title becomes a plain short stroke. */
html[data-design="blueprint"] .section-title::after {
  width: 44px;
  height: 3px;
  background-image: none;
  background-color: var(--bp-accent);
  border-radius: 2px;
}
/* 4. Half the grid: the fine 24px squares go, the 120px squares stay (the sheets still read as blueprints). */
html[data-design="blueprint"] {
  --bp-grid-minor: transparent;
}

/* ---- contrast: two lines under 4.5:1 on today's page too (measured, report 90) ----------------------------- */
/* The splash sub-line's links sat in the faint caption blue over the map (3.1-4.2:1): now the sub-line's own dim paper. */
html[data-design="blueprint"] .hero-sub a { color: var(--bp-paper); }   /* P18: paper, 7:1 over the map at 11 px (paper-dim was 5.1:1) */
/* "Just checking availability?" was paper at 85% on the copper strip (about 2:1): ink, like the rest of the strip. */
html[data-design="blueprint"] .cta-strip .secondary-link,
html[data-design="blueprint"] .cta-strip .secondary-link a { color: var(--bp-on-accent); }