/* ============================================================================
   photo.css — the site gets something to look at.

   MEASURED BEFORE WRITING THIS: the homepage had ZERO images. No <img>, no
   <picture>, no <video>, no background-image, and not one photograph in the
   whole assets folder — only a logo, a favicon, an og-image and the tread
   texture. Six sections in a row were built to the same shape: centered
   eyebrow, centered headline, centered paragraph, grid of identical cards.
   That is why it reads flat, and it is why four rounds of motion work did not
   fix it. There was nothing to look at.

   Eight professional trade photographs were already in the repo, in the
   ebooks folder, referenced by nothing. They are the subject matter of the
   business — an excavator on rock, a loaded toolbelt, copper fittings, rebar.
   This file is what puts them on the page.

   TWO RULES THEY FOLLOW:
   1. A photograph is never decoration behind running text. Either it carries
      a scrim heavy enough for text to pass AA over it, or the text sits beside
      it rather than on it.
   2. They are graded to the brand rather than dropped in raw: slightly
      desaturated and warmed, so a stock-looking blue cast cannot fight the
      gold. The page is one world, not a page with pictures stuck to it.
   ========================================================================== */

/* ------------------------------------------------------- the grading pass */

.ph{
  display:block; width:100%; height:100%;
  object-fit:cover;
  /* warm and slightly flatten so every shot sits in the same world */
  filter:saturate(0.78) contrast(1.06) brightness(0.92) sepia(0.10);
}

/* ------------------------------------------------------ full-bleed band */

/* Breaks the page's rhythm. Used BETWEEN sections, so the eye gets a change of
   material instead of a seventh identical card grid. */
.photo-band{
  position:relative; width:100%; overflow:hidden;
  height:clamp(200px,26vw,340px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.photo-band .ph{ position:absolute; inset:0; }
/* the scrim: dark at both edges so the band joins the page rather than
   sitting in it like a pasted rectangle */
.photo-band::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--carbon-950) 0%, rgba(10,11,13,0.30) 28%, rgba(10,11,13,0.30) 72%, var(--carbon-950) 100%),
    linear-gradient(180deg, rgba(10,11,13,0.55) 0%, transparent 32%, transparent 68%, rgba(10,11,13,0.55) 100%);
}
.photo-band-line{
  position:absolute; left:0; right:0; bottom:clamp(18px,3vw,30px); z-index:2;
  text-align:center;
  font-family:var(--font-mono); font-size:var(--micro-size);
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint);
}

/* --------------------------------------------------- the trade school block */

/* WHY IT IS REBUILT: the education product was rendered with .faq-grid — four
   identical grey boxes, the same component as the frequently-asked-questions
   list. It read as an FAQ because it WAS one. It also never named its price,
   on a site whose entire promise is that you see the price before you talk to
   anyone. */

.ts{ position:relative; }

/* the opener: photograph left, the claim right -- an asymmetric shape the
   page does not use anywhere else, which is most of the point */
.ts-open{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  margin-bottom:clamp(34px,5vw,58px);
}
.ts-shot{
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio:4/5; border:1px solid var(--line-strong);
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.ts-shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,11,13,0.72) 100%);
}
.ts-shot .cap{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--ink-faint);
}
.ts-claim h2{ margin:14px 0 16px; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.1; text-wrap:balance; }
.ts-claim p{ color:var(--ink-dim); font-size:1.06rem; line-height:1.65; max-width:48ch; margin:0; }

/* the three courses: a photo each, numbered, with the real lesson count */
.ts-courses{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2vw,20px);
}
.ts-course{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--carbon-800);
  display:flex; flex-direction:column;
  transition:border-color 220ms ease, transform 220ms ease;
}
.ts-course:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.ts-course-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.ts-course-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,13,0.10) 0%, rgba(10,11,13,0.78) 100%);
}
.ts-course-n{
  position:absolute; left:14px; bottom:11px; z-index:2;
  font-family:var(--font-mono); font-size:1.5rem; color:var(--path-4);
  letter-spacing:-0.02em; line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,0.7);
}
.ts-course-l{
  position:absolute; right:14px; bottom:14px; z-index:2;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink);
  background:rgba(10,11,13,0.6); border:1px solid var(--line-strong);
  padding:4px 9px; border-radius:999px;
}
/* ---- the courses lead with their LESSONS, not a photograph ----
   Garett, 2026-10-14. The image block is gone: generic trade stock sat over
   business subjects ("Price It Right" showed hand tools, "Get Paid" showed copper
   pipe, "Win the Work" showed cedar shingles) and told the reader nothing on the
   one section that has to justify $99/mo. The card is now a header rule, the
   promise, the REAL lesson titles from education/library_map.json, and the
   worksheet line. .ts-course-img / .ts-course-b are no longer emitted. */
.ts-course{ display:flex; flex-direction:column; gap:12px; padding:22px 22px 20px; }
.ts-course-h{ display:flex; align-items:baseline; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.ts-course-h h3{ margin:0; font-size:1.06rem; line-height:1.25; flex:1; color:var(--ink); }
.ts-course-h .ts-course-n{ position:static; font-family:var(--font-mono);
  font-size:0.78rem; letter-spacing:0.08em; color:var(--ember); background:none; padding:0; }
.ts-course-h .ts-course-l{ position:static; font-family:var(--font-mono);
  font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; background:none; padding:0; border:0; }
.ts-course > p{ margin:0; font-size:0.9rem; line-height:1.6; color:var(--ink-dim); }
/* the lesson titles ARE the showcase, so they take ink rather than grey */
.ts-lessons{ list-style:none; margin:2px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px; }
.ts-lessons li{ position:relative; padding-left:18px;
  font-size:0.88rem; line-height:1.45; color:var(--ink); }
.ts-lessons li::before{ content:''; position:absolute; left:0; top:0.56em;
  width:7px; height:7px; border-radius:50%; background:var(--ember); }
.ts-lessons li + li::before{ opacity:0.55; }
.ts-sheet{ margin-top:auto; padding-top:12px; font-family:var(--font-mono);
  font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }

/* the coach: deliberately NOT a fourth course card -- a wide strip, so the
   thing that is different about this product looks different */
.ts-coach{
  display:flex; align-items:center; gap:clamp(18px,3vw,34px); flex-wrap:wrap;
  margin-top:clamp(14px,2vw,20px);
  padding:20px clamp(18px,3vw,28px); border-radius:16px;
  background:linear-gradient(100deg, rgba(244,197,33,0.08), rgba(244,197,33,0.02));
  border:1px solid rgba(244,197,33,0.22);
}
.ts-coach-t{ flex:1; min-width:240px; }
.ts-coach-t h3{ margin:0 0 6px; font-size:1.05rem; color:var(--ember-hot); }
.ts-coach-t p{ margin:0; font-size:0.9rem; line-height:1.55; color:var(--ink-dim); max-width:62ch; }

/* the price, stated -- the one thing the old section never did */
.ts-price{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-top:clamp(18px,3vw,26px); padding-top:20px;
  border-top:1px solid var(--line);
}
.ts-price .amt{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.8rem,3vw,2.4rem); color:var(--path-4); letter-spacing:-0.02em;
}
.ts-price .amt span{ font-size:0.8rem; color:var(--ink-faint); letter-spacing:0.06em; }
.ts-price .what{ font-size:0.9rem; color:var(--ink-dim); line-height:1.5; max-width:40ch; }

@media (max-width:900px){
  .ts-open{ grid-template-columns:1fr; gap:24px; }
  .ts-shot{ aspect-ratio:16/10; }
  .ts-courses{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .ts-course{ transition:none; }
}

/* ======================================================= the film

   Replaced a 300vh pinned scroll rail. It told the same story beat by beat
   while the viewport sat frozen for five screens — 53% of the page's entire
   height, and most of why scrolling felt wrong. Eight seconds does it better.

   COSTS NOTHING UNTIL IT IS WANTED: preload="none", so the 2.9MB is never
   fetched for a visitor who does not scroll this far, and never on a
   data-saver connection. The poster is the payoff frame, so the still is
   worth looking at on its own. */
.rr-film{
  position:relative; margin:0 0 clamp(26px,4vw,40px);
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--carbon-950);
  box-shadow:0 40px 90px rgba(0,0,0,0.55);
  aspect-ratio:16/9;
}
.rr-video{ display:block; width:100%; height:100%; object-fit:cover; }

.rr-play{
  position:absolute; inset:0; margin:0; padding:0; border:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:15px;
  background:rgba(10,11,13,0.30); cursor:pointer;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink);
  transition:opacity 320ms ease, background 320ms ease;
}

/* The disc and the play glyph are ONE shape -- a mask that is a circle with a
   triangular hole punched through it, so the film shows through the triangle
   and no colour is spelled out a second time here.

   WHAT WAS HERE BEFORE, kept because it failed silently and looked fine doing it:
       clip-path:polygon(0 0,100% 0,100% 100%,0 100%);   <- commented "a triangle"
   Those four points are the four CORNERS of the box. The clip removed nothing,
   so what shipped was a bare gold disc sitting beside the word PLAY. Three
   BUILD_CHECKLIST entries call this button "the whole experience" for
   reduced-motion and data-saver visitors; it was a blob.
   A mask cannot fail the same way unnoticed: if it never loads, border-radius
   still draws the disc, so the worst case is the old look and never nothing. */
.rr-play::before{
  content:""; width:76px; height:76px; border-radius:50%;
  background:linear-gradient(160deg,var(--path-4),var(--path-3));
  box-shadow:0 10px 36px rgba(244,197,33,0.34);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76'%3E%3Cpath fill-rule='evenodd' d='M0 38a38 38 0 1 0 76 0a38 38 0 1 0-76 0ZM31 25.5 53 38 31 50.5Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76'%3E%3Cpath fill-rule='evenodd' d='M0 38a38 38 0 1 0 76 0a38 38 0 1 0-76 0ZM31 25.5 53 38 31 50.5Z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* The clip LOOPS, so there has to be a way to stop it -- WCAG 2.2.2 asks for a
   control on anything that moves by itself for more than five seconds, and this
   runs forever behind whatever the reader is trying to read. So the button no
   longer goes inert when the film starts: it fades out, comes back on hover or
   keyboard focus, and toggles. motion.js owns the toggling. */
.rr-film.playing .rr-play{ opacity:0; }
.rr-film.playing:hover .rr-play,
.rr-film.playing .rr-play:focus-visible{ opacity:1; background:rgba(10,11,13,0.44); }
.rr-film:not(.playing) .rr-play:hover{ background:rgba(10,11,13,0.14); }

/* the six beats, kept as text: a <video> is not crawlable, not selectable,
   and shows nothing with JS off */
.rr-beats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
  counter-reset:rr;
}
.rr-beats li{
  counter-increment:rr; position:relative;
  padding:18px 20px 20px; border-radius:14px;
  background:var(--carbon-800); border:1px solid var(--line);
}
.rr-beats li::before{
  content:counter(rr,decimal-leading-zero);
  position:absolute; top:16px; right:18px;
  font-family:var(--font-mono); font-size:0.8rem; color:var(--steel-700);
}
.rr-when{
  display:block; margin-bottom:9px;
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--path-4);
}
.rr-beats h3{ margin:0 0 7px; font-size:1.02rem; line-height:1.3; color:var(--ink); }
.rr-beats p{ margin:0; font-size:0.86rem; line-height:1.55; color:var(--ink-dim); }

@media (max-width:900px){ .rr-beats{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .rr-play{ transition:none; } }

/* ====================================================== the path (how it works)

   Was five identical glass cards in a row — the page's default shape, used
   here for the one piece of content that is genuinely a SEQUENCE. A rail with
   numbered nodes says "these happen in this order" in a way five equal cards
   cannot, and it runs the same --path-1..4 ramp the site uses everywhere else
   for progress toward buying, so the colour carries its usual meaning. */
.path{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.6vw,20px);
  position:relative;
}
/* the rail itself, behind the nodes */
.path::before{
  content:""; position:absolute; z-index:0;
  left:calc(10% - 0px); right:calc(10% - 0px); top:19px; height:2px;
  background:linear-gradient(90deg,
    var(--path-1) 0%, var(--path-2) 34%, var(--path-3) 68%, var(--path-4) 100%);
  opacity:0.5; border-radius:2px;
}
.path-step{ position:relative; z-index:1; padding-right:6px; }
.path-n{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  margin-bottom:16px;
  background:var(--carbon-900); border:2px solid var(--path-3);
  font-family:var(--font-mono); font-size:0.82rem; font-weight:600;
  color:var(--path-4); letter-spacing:0;
  box-shadow:0 0 0 6px var(--carbon-950), 0 0 18px var(--path-glow);
}
.path-step h3{ margin:0 0 7px; font-size:1.02rem; line-height:1.3; color:var(--ink); }
.path-step p{ margin:0; font-size:0.86rem; line-height:1.55; color:var(--ink-dim); }

/* vertical on narrow screens, rail down the left */
@media (max-width:860px){
  .path{ grid-template-columns:1fr; gap:0; }
  .path::before{
    left:19px; right:auto; top:20px; bottom:20px; width:2px; height:auto;
    background:linear-gradient(180deg,
      var(--path-1) 0%, var(--path-2) 34%, var(--path-3) 68%, var(--path-4) 100%);
  }
  .path-step{ padding:0 0 26px 58px; }
  .path-step:last-child{ padding-bottom:0; }
  .path-n{ position:absolute; left:0; top:0; margin:0; }
}