/* ============================================================
   HOMEPAGE V1 — VISUAL RHYTHM OVERLAYS
   Layered AFTER /assets/site.css so these tokens and overrides
   win the cascade. Owner: creative-director (Delacroix).
   See /website/SCOPE-DESIGN-HOMEPAGE-V1.md for binding rules.
   ============================================================ */

/* --- Section rhythm tokens (8px grid, generous breathing) --- */
:root {
  --space-section-top: clamp(3rem, 6vw, 5rem);
  --space-section-bottom: clamp(2.5rem, 5vw, 3.5rem);
  --space-hero-top: clamp(3.5rem, 7vw, 5.5rem);
  --space-rule-soft: 1px solid rgba(17, 17, 17, 0.10);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* --- Section padding — generous top, slightly tighter bottom --- */
section {
  padding-top: var(--space-section-top);
  padding-bottom: var(--space-section-bottom);
}

/* Hairline depth rule above the heavy 2px divider — keeps sections
   "read as one" instead of looking like a feed. */
section + section,
section + .trust-bar,
section + footer {
  border-top: 2px solid var(--line);
  position: relative;
}
section + section::before,
section + .trust-bar::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(17, 17, 17, 0.10);
}

/* --- HERO — tilt the panel to a more intentional angle --- */
.hero {
  padding-top: var(--space-hero-top);
}

.hero-window {
  transform: rotate(-1.4deg);
}

.hero h1 {
  letter-spacing: -0.035em;
}

/* Echo the section-kicker pattern inside the hero window header */
.panel-head {
  position: relative;
  background: var(--ink);
}
.panel-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--amber);
}
.panel-head > * {
  position: relative;
}

/* --- TRUST BAR — heavier top border, wider cells, tighter vertical --- */
.trust-bar {
  border-top: 6px solid var(--signal);
  padding: 1.1rem 0;
}
.trust-badge {
  min-width: 175px;
}

/* --- FOUR JOBS — render the ordinal numerals in mono --- */
.job-num {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* --- TWO DOORS — equal-weight door tags --- */
.door .door-tag {
  background: var(--paper-2);
  color: var(--ink);
}
.door-hire .door-tag {
  background: var(--signal);
  color: #fff;
}

/* --- PORTFOLIO WALL — warm-paper gradient, signal reserved for PCBoost --- */
/* Replaces the sea tint on PermitPilot with a warm cream so the wall reads
   as a warm gradient (cream / warm cream / cream-paper) and signal is the
   only saturated accent — used on PCBoost's Live chip. */
.product:nth-child(odd) { background: #fffdf8; }
.product:nth-child(2) { background: #fbf3ec; }   /* PermitPilot — warm cream, was sea */
.product:nth-child(3) { background: #f7f0ea; }

/* On hover keep the amber inset; this is the existing behavior but re-
   declared here so the tints stay in sync. */
.product:hover {
  box-shadow: 5px 7px 0 var(--line), inset 8px 0 0 var(--amber);
  border-left: 4px solid var(--amber);
  padding-left: calc(1rem - 4px);
}

/* --- BOARD-ALSO LIST — uniform row structure (empty slot for missing links) --- */
.board-also-list li > div {
  display: block;
  min-width: 0;
}
.board-also-list li > a {
  min-width: 9ch;
  text-align: right;
}
.board-also-list .row-empty {
  display: inline-block;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.04em;
}

/* --- CASE STUDIES — show a thin amber top edge at rest --- */
.case {
  border-top: 4px solid var(--amber);
}
.case:hover {
  border-top-color: var(--amber);
}
.case::before {
  background: var(--amber);
}

/* --- SERVICES — whole-card click target --- */
.service {
  display: block;
  text-decoration: none;
  color: inherit;
}
.service:hover {
  background: #fff;
}

/* --- ABOUT — surface the canonical Harbor Grit postal code --- */
.about-box .postal {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #888;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* --- CONTACT — stronger separation around the door-pick radios --- */
.contact-form .door-pick {
  border: 2px solid var(--line);
  padding: 0.45rem;
  margin: 0 0 1rem;
  background: var(--paper-2);
}
.contact-form .door-pick .door-opt {
  background: #fff;
  color: var(--ink);
}
.contact-form .door-pick .door-opt:has(input:checked) {
  background: var(--signal);
  color: #fff;
}
.contact-form .door-pick .door-opt:has(input:checked) input {
  accent-color: #fff;
}

/* --- FAQ — kicker rhythm (no change to colors; stays consistent) --- */
.faq-item {
  border-left-width: 2px;
}
.faq-item[open] {
  border-left-width: 4px;
}

/* --- FOOTER — framed link drawer --- */
.footer-links {
  border: 2px solid #fff;
  padding: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
}
.footer-links a {
  background: #1c1c1c !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* --- STICKY CHIP — sit to the LEFT of the Aria launcher at >=1100px --- */
@media (min-width: 1100px) {
  .sticky-chip {
    right: 6.5rem;
  }
}

/* --- MARCUS — don't cover the product shot or the form fields --- */
html.hg-hero-cover .dc-launcher,
html.hg-form-cover .dc-launcher,
html.hg-hero-cover .dc-skin-harbor-grit .dc-launcher,
html.hg-form-cover .dc-skin-harbor-grit .dc-launcher {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px);
}

/* Mobile CTA bar is redundant once the contact form is on screen — it links
   to #contact the user is already looking at, and covers the form's lower
   fields/submit. Same hg-form-cover trigger as the launcher. Owner: CD. */
html.hg-form-cover .mobile-cta { display: none !important; }

/* --- F1 (2026-08-30 chair-route) — hero in view hides the mobile CTA bar too,
   same cover-class trigger as the launcher, so the PermitPilot window is not
   clipped by the fixed bar at <=820px. Owner: CD. */
html.hg-hero-cover .mobile-cta { display: none !important; }

/* --- REDUCED MOTION — keep current behavior; do not animate reveals --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}