/* ============================================================
   PAGES — page-specific composition. Phase 1 covers the homepage
   only; About / Services / Workshop / Showcase / Contact each get
   their own scoped block here in later phases, appended below
   rather than folded into components.css, so a page's quirks never
   leak into the shared system.
   ============================================================ */

/* ---------- Home ---------- */
#hero{ /* uses .hero / .hero-grid / .hero-drawing-* from layout.css + components.css as-is */ }

#pillars .col-main > p{ margin-bottom:0; }

/* the mobile hero drawing needs a touch more breathing room above the
   problem section than the desktop one, since it sits shorter */
@media (max-width:767px){
  .hero-drawing-mobile-wrap{ padding:0 0 8px; }
}

/* Showcase teaser — added Showcase Integration Round 1. Sits directly
   after the existing Workshop section, before "How We Work". Kept
   deliberately lighter than #workshop: no build-strip graphic, a
   single narrow column, reduced vertical padding. */
#showcase-teaser{ padding:52px 0; }
@media (max-width:640px){ #showcase-teaser{ padding:38px 0; } }
#showcase-teaser h3{ font-size:clamp(20px,2.4vw,26px); margin-bottom:10px; max-width:20ch; }
#showcase-teaser p{ opacity:.85; max-width:52ch; margin-bottom:14px; }

/* ---------- About ---------- */
#about-story .story-text{ margin-top:8px; }
#about-perspectives .col-main{ padding-top:4px; }
#about-honesty .statement-block{ max-width:900px; }

/* ---------- Services ---------- */
#svc-connected .connect-flow{ max-width:560px; }
#services-honesty .statement-block{ max-width:900px; }

/* ---------- Workshop ---------- */
#big-idea .statement-block{ max-width:900px; }
#what-youll-build .connect-flow{ max-width:560px; }
/* five frames, not four — narrower cards and a tighter connector so
   the whole sequence fits without needing the horizontal scroll
   .build-strip falls back to on tighter viewports */
#process .build-strip .frame{ width:166px; margin-right:16px; }
#process .frame-desc{ max-width:20ch; font-size:12px; }
#day-flow .principle-row .sub-list{ padding-left:0; }
#register .workshop-meta{ margin-top:22px; }

/* ---------- Showcase (rebuilt — Showcase Integration Round 1) ----------
   Four illustrative demonstration sites replace the previous
   coming-soon empty state. New components below are scoped to this
   page only; nothing here touches components.css or any shared
   pattern used by other pages. */

/* disclosure strip — confident, not apologetic: a single labelled
   line, not a boxed warning */
#showcase-disclosure{ padding:0 0 var(--sp-7); }
#showcase-disclosure .disclosure-row{
  display:flex; gap:18px; flex-wrap:wrap; align-items:baseline;
  padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
#showcase-disclosure .sd-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-navy); border:1px solid var(--line-strong); padding:5px 10px; white-space:nowrap; flex-shrink:0;
}
#showcase-disclosure .sd-text{ font-size:14.5px; opacity:.82; max-width:64ch; margin:0; }

/* project rows — same rhythm as the homepage's .svc-row (index rail +
   border-top), so the page reads as part of the same system, but with
   its own body layout: copy + a distinct preview per business */
.showcase-project{ display:grid; grid-template-columns:64px 1fr; gap:24px; padding:44px 0; border-top:1px solid var(--line); }
.showcase-project:last-child{ border-bottom:1px solid var(--line); }
.showcase-project .sp-num{ font-family:var(--font-mono); font-size:13px; opacity:.55; padding-top:4px; }
/* Round 3: preview widened to ~48% of the row (was a fixed 300px) so
   the live multi-page capture reads as a real screenshot, not a
   thumbnail — brief calls for "approximately 45–50% of the desktop
   row". Equal-fr split does that without a hardcoded pixel width. */
.showcase-project .sp-body{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.showcase-project .sp-category{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--teal-acc); margin-bottom:8px; }
.showcase-project .sp-name{ font-size:clamp(22px,2.6vw,30px); margin-bottom:10px; }
.showcase-project .sp-desc{ font-size:15px; opacity:.85; max-width:48ch; margin-bottom:8px; }
.showcase-project .sp-demo{ font-size:13.5px; opacity:.6; max-width:48ch; margin-bottom:18px; }
.showcase-project .sp-link.disabled{ opacity:.5; font-style:italic; border-bottom:none; }

/* preview panel — Round 3: a large landscape panel that cycles through
   genuine screenshots of several real pages on the live site (crossfade),
   replacing Round 2's single static homepage shot. No decorative browser
   chrome (dropped per this round's brief — "a very subtle border is
   acceptable" is all that remains). The screenshot fills the panel at
   its native 8:5 ratio; object-fit:cover only ever crops evenly, never
   distorts. The whole panel stays a real link to the live site. */
.sp-preview{ border:1px solid var(--line-strong); background:var(--c-cream); display:block; text-decoration:none; }
.sp-preview .shot-frame{ position:relative; display:block; width:100%; aspect-ratio:8/5; overflow:hidden; background:var(--line); }
.sp-preview .shot-frame-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.sp-preview .shot-frame-img.is-active{ opacity:1; }
/* reduced motion (and the no-JS fallback below): only the first frame
   (home) is ever marked is-active, so nothing here needs to change —
   this rule just removes the crossfade transition itself */
@media (prefers-reduced-motion: reduce) {
  .sp-preview .shot-frame-img {
    transition: none;
  }
}
/* no-JS fallback: JS adds html.js-enabled (see main.js); without it,
   show only the first frame per project so the panel isn't a blank
   stack of overlapping images */
html:not(.js-enabled) .sp-preview .shot-frame-img{ opacity:0; }
html:not(.js-enabled) .sp-preview .shot-frame-img:first-child{ opacity:1; }

@media (max-width:900px){
  .showcase-project .sp-body{ grid-template-columns:1fr; }
  .sp-preview{ max-width:none; }
}

#showcase-same-process .statement-block{ max-width:760px; }