/* ======================================================================
   TY Graphics LLC — Home Page Hero (wireframe-to-render SVG)
   Thomas D. Young — Copyright (c) 2026 TY Graphics LLC
   Date: July 5, 2026  20:18:00 EDT (24-hour)  Epoch: 1783383480
   Purpose: Dark-locked home page styles. Hero opens on wireframe
   tire views (no fill, light hairline stroke) and crossfades to the
   rendered versions. No light-mode CSS. No !important declarations.
   ====================================================================== */

:root {
  --stage:      #23282a;   /* dark stage base            */
  --stage-deep: #16191b;   /* vignette edge              */
  --ink:        #f2efe8;   /* headline / body on dark    */
  --ink-dim:    #c8c4ba;   /* secondary text             */
  --gold:       #b8923e;   /* accent (eyebrow, italic)   */
  --wire:       #5c6461;   /* wireframe stroke tone      */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
}



/* Self-hosted fonts (shipped in /fonts) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--stage-deep);
  color: var(--ink);
  font-family: var(--font-body);
}

/* ---------- Navigation: dark-locked ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  height: 4.5rem;
  background: rgba(22, 25, 27, 0.92);
  border-bottom: 1px solid rgba(242, 239, 232, 0.08);
  backdrop-filter: blur(6px);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.nav-brand strong { font-weight: 700; }
.nav-brand .llc   { font-size: 0.6em; color: var(--ink-dim); letter-spacing: 0.12em; }

.nav-mark {
  width: 1.4rem; height: 1.4rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  position: relative;
}
.nav-mark::after {
  content: "";
  position: absolute;
  inset: 30%;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
}

.nav-links { display: flex; gap: 2.4vw; }

.nav-links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  transition: color 0.25s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--ink); }
.nav-links a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------- Hero stage ---------- */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(to top, rgba(126, 136, 140, 0.22) 0%, rgba(126, 136, 140, 0.0) 55%),
    radial-gradient(120vw 90vh at 68% 45%, var(--stage) 0%, var(--stage-deep) 78%);
}

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 8vw;
  top: 50%;
  transform: translateY(-50%);
  max-width: 26rem;
}

.hero-eyebrow {
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  margin-bottom: 1.6rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.15;
}

.hero-lede {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  margin-top: 1rem;
}

.hero-body {
  margin-top: 1.8rem;
  color: var(--ink-dim);
  font-size: clamp(0.9rem, 1.05vw, 1.02rem);
  line-height: 1.7;
  max-width: 30rem;
}

.hero-cta {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  transition: background 0.3s ease, color 0.3s ease;
}
.hero-cta:hover,
.hero-cta:focus-visible { background: var(--gold); color: var(--stage-deep); }
.hero-cta:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ---------- Tire stage: stacked wireframe + render layers ---------- */

.tire-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

/* Single composed pair (Thomas's registration; viewBox 388.44 x 390).
   Sized by stage HEIGHT so the near-square composition fits the
   viewport; width follows the aspect ratio. Both layers are
   absolutely stacked in the same box: identical position always. */
/* Ratios measured from Thomas's July 6 mock:
   tire top 8.8vh, bottom 97.3vh (height 88.5vh, center 53vh),
   right edge touching the viewport edge. */
.tire-pair {
  position: absolute;
  top: 62.5%;
  right: -0.5vw;
  transform: translateY(-50%);
  height: 108vh;
  aspect-ratio: 388.44 / 390;
}

.layer-render,
.layer-wire {
  position: absolute;
  inset: 0;
  will-change: opacity;              /* GPU-composited fades: the large
                                        SVGs otherwise repaint per frame
                                        and the fade snaps/blinks */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tire-pair svg,
.tire-pair img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Wireframe layer: styled entirely by the source file's own
   classes (Thomas's line art) — no page-level stroke override. */
/* Initial states (JS animates; these hold pre-script and no-script) */
.layer-render { opacity: 0; }
.layer-wire   { opacity: 0; }   /* blank stage at load; JS fades it in */

/* No-JS and reduced motion: land on the rendered art immediately */
@media (prefers-reduced-motion: reduce) {
  .layer-render { opacity: 1; }
  .layer-wire   { opacity: 0; }
}
noscript.hero-fallback ~ .hero .layer-render { opacity: 1; }

/* ---------- Replay control ---------- */

.replay {
  position: absolute;
  z-index: 3;
  right: 2.5vw;
  bottom: 2.5vh;
  background: transparent;
  border: 1px solid rgba(242, 239, 232, 0.25);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.replay:hover,
.replay:focus-visible { color: var(--ink); border-color: var(--ink-dim); }
.replay:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* ---------- Breakpoint reflow ---------- */

@media (max-width: 900px) {
  .hero-copy {
    left: 8vw; right: 8vw;
    top: auto; bottom: 8vh;
    transform: none;
    max-width: none;
  }
  .tire-stage {
    right: -18vw;
    top: 38%;
    width: 110vw;
    min-width: 0;
    height: 60vh;
  }
  .hero-body { max-width: 34rem; }
}