/* JRS Digital — wide/horizontal direction, sample #4.
   Moves away from the near-black-ink + single desaturated accent + narrow
   centered column look (which reads as "dev tool"/Claude-Code-ish) and away
   from the dark terminal palette. New palette: warm sage background + deep
   forest ink + a single warm gold accent — a more colorful, consumer-product
   feel. Layout widens out to use real horizontal space on desktop instead of
   a ~980px centered column, via a wide asymmetric hero, a horizontal stat
   ribbon, and a horizontal work-card row. */

:root {
  /* Cool, subtle palette: neutral cool-gray background (not warm sage),
     a near-black cool charcoal ink (not pure black — avoids "dark and
     gloomy"), and a muted slate-blue accent instead of gold — desaturated
     enough to stay quiet, but a real color rather than a safe gray. */
  --w-bg: #EEF1F1;
  --w-surface: #E3E8E8;
  --w-ink: #1B2224;
  --w-ink-70: rgba(27, 34, 36, 0.68);
  /* Was 0.46 — measured out at ~2.8:1 against --w-bg, below the 4.5:1 WCAG AA
     floor for normal-size text, yet this token drives real (non-decorative)
     copy: footer text, captions, stat labels, .w-prose .meta. 0.66 lands
     ~5:1 while still reading as visibly muted next to --w-ink-70. */
  --w-ink-50: rgba(27, 34, 36, 0.66);
  --w-border: rgba(27, 34, 36, 0.14);
  /* Was #5C7C93 — fine as a button fill, but used bare as *text* (the
     "In development" tag, the belief numerals, prose links) it only hit
     ~3.9:1 against --w-bg, below AA. Darkened to the old --w-accent-strong
     value, which measures ~5.4:1 as text and ~6.1:1 for white text on top
     of it as a button fill — passes AA in both directions. */
  --w-accent: #4A6577;
  --w-accent-strong: #37495A;
  --w-accent-ink: #FFFFFF;
  --w-radius: 16px;         /* friendlier, rounder than the sharp dev-tool 4px */

  /* Override the shared --accent used by the phone-frame component (rim,
     camera dot, chin bar) so the device itself picks up this same color
     instead of the default gold defined in site.css. */
  --accent: #4A6577;
  --accent-strong: #37495A;
}

body.wide-theme {
  /* This theme is deliberately always-light, unlike site.css's dark/light
     pair — without this, a visitor with a dark OS preference still gets
     dark-styled native UI (scrollbar, form controls) on an otherwise
     always-light page. */
  color-scheme: light;
  background: var(--w-bg);
  color: var(--w-ink);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  line-height: 1.65;
}

/* Full-bleed shell: fluid width instead of a flat cap, so a 2000px+ monitor
   actually gets used instead of leaving 1000px of dead margin either side.
   Scales with the viewport up to a sane reading-width ceiling. */
.w-shell { max-width: min(94vw, 1680px); margin: 0 auto; padding: 0 clamp(24px, 3vw, 56px); }

.w-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  flex-wrap: wrap;
  gap: 14px;
}
.w-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--w-ink);
  text-decoration: none;
  /* Without this, the flex row was squeezing the brand into two lines
     ("JRS" / "Digital") on narrow phones instead of ever giving up its
     own width — one of the more obviously broken things on mobile. */
  white-space: nowrap;
  flex-shrink: 0;
}
.w-nav { display: flex; gap: 12px 24px; flex-wrap: wrap; }
/* Tightened from the browser default so the four links read as one
   deliberate group instead of loosely floating words — nav already sits
   flush with the same .w-shell right edge as the hero/filmstrip/footer
   below it, so the "disconnected" feel was tracking, not alignment. */
.w-nav a { font-size: 0.9rem; letter-spacing: -0.01em; color: var(--w-ink-70); text-decoration: none; }
.w-nav a:hover { color: var(--w-ink); }
.w-nav a.active { color: var(--w-ink); font-weight: 700; }

/* Wide asymmetric hero: text column stays a readable measure, but the right
   side spreads a horizontal filmstrip of screens across the remaining width
   instead of one small phone tucked in a corner. */
.w-hero {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0 48px;
}
.w-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-ink-70);
  margin: 0 0 16px;
}
/* Was a rhyming accent mark before the eyebrow label, inside stat rows,
   and inside the CTA button — first a rotated dash, then a small square
   dot, neither of which landed. Removed outright rather than tried a
   third shape. The markup still wraps text in <span class="w-stroke">
   in a few places; hiding it here means nothing needs to change there. */
.w-stroke {
  display: none;
}
.w-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.w-tagline { font-size: 1.08rem; color: var(--w-ink-70); max-width: 42ch; margin: 0 0 30px; }

.w-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--w-accent);
  color: var(--w-accent-ink);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 22px;
  border-radius: var(--w-radius);
  text-decoration: none;
}
.w-cta:hover { opacity: 0.88; }
.w-cta .w-stroke { background: var(--w-accent-ink); }

/* Horizontal filmstrip of screens — spreads across the wide right column
   instead of a single small phone, so the hero actively uses the extra
   horizontal space rather than just leaving it empty. */
.w-filmstrip {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  align-items: flex-end;
}
/* Sized up from the original 168/200px — at that size the 750px-wide source
   screenshots were downscaled 5x, crushing the UI text into an illegible,
   soft-looking mess. This size keeps the downscale mild enough that the
   screen still reads as a real, sharp screenshot rather than a smudge.
   Deliberately NOT overriding the frame's own border-color/background here
   — the device shell stays dark hardware regardless of page theme, only
   the size and shadow are tuned per-placement. */
.w-filmstrip .phone-frame {
  width: clamp(200px, 15vw, 260px);
  box-shadow:
    0 14px 22px -14px rgba(23, 40, 31, 0.4),
    0 40px 70px -28px rgba(23, 40, 31, 0.22);
}
.w-filmstrip .film-item:nth-child(2) .phone-frame {
  width: clamp(230px, 18vw, 300px);
  box-shadow:
    0 16px 26px -14px rgba(23, 40, 31, 0.45),
    0 50px 90px -26px rgba(23, 40, 31, 0.3);
}
.w-filmstrip .film-item { text-align: center; }
.w-filmstrip .cap { font-size: 0.72rem; color: var(--w-ink-50); margin-top: 10px; font-family: 'Space Grotesk', sans-serif; }

/* Horizontal stat ribbon — full width, evenly spaced, replacing a small
   stacked stat block with a band that spans the whole container. */
.w-ribbon {
  display: flex;
  border-top: 1px solid var(--w-border);
  border-bottom: 1px solid var(--w-border);
  padding: 22px 0;
  gap: 0;
}
.w-ribbon .stat {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 24px;
  border-left: 1px solid var(--w-border);
}
.w-ribbon .stat:first-child { border-left: none; padding-left: 0; }
.w-ribbon .stat .v { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; color: var(--w-ink); }
.w-ribbon .stat .l { font-size: 0.78rem; color: var(--w-ink-50); text-transform: uppercase; letter-spacing: 0.03em; }

.w-section { padding: 52px 0; }
.w-section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Single feature spotlight instead of a card + empty placeholder box. With
   only one project, "card + empty dashed slot" reads as a bare, unfinished
   list. A unified two-column panel (copy + a real device shot) reads as one
   deliberate feature, and still has room to become a proper row/grid once a
   second project exists. */
.w-work-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 36px;
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 40px;
}
.w-work-card .tag {
  font-size: 0.72rem;
  color: var(--w-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.w-work-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 10px 0 12px;
}
/* max-width added: on wide desktop viewports this column has no natural
   cap, so the paragraph was stretching well past 75 characters per line —
   past the readable range — before it wraps. */
.w-work-card p { color: var(--w-ink-70); margin: 0 0 18px; font-size: 0.98rem; max-width: 48ch; }
.w-work-card a { color: var(--w-ink); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.w-work-card a:hover { text-decoration: underline; }

.w-work-media { display: flex; justify-content: center; }
.w-work-media .phone-frame { width: clamp(140px, 13vw, 180px); }

.w-more-note {
  margin: 18px 2px 0;
  color: var(--w-ink-50);
  font-size: 0.88rem;
}

@media (max-width: 720px) {
  .w-work-row { grid-template-columns: 1fr; padding: 28px; text-align: left; }
  .w-work-media { margin-top: 4px; }
}

.w-footer {
  padding: 30px 0 60px;
  border-top: 1px solid var(--w-border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--w-ink-50);
}
.w-footer a { color: var(--w-ink-50); text-decoration: none; }
.w-footer a:hover { color: var(--w-ink); }

/* ---------- shared intro block (About / Work / Contact page headers) ---------- */
.w-intro { padding: 56px 0 40px; max-width: 60ch; }
.w-intro h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1.16;
  margin: 0 0 16px;
}
.w-intro p { font-size: 1.05rem; color: var(--w-ink-70); margin: 0; max-width: 56ch; }

/* ---------- beliefs row (About) — numerals instead of an icon grid ---------- */
.w-belief-row { display: flex; gap: 22px; flex-wrap: wrap; }
.w-belief {
  flex: 1 1 260px;
  border-top: 1px solid var(--w-border);
  padding-top: 18px;
}
.w-belief .num {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--w-accent);
  font-size: 0.95rem;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
.w-belief h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.08rem;
  margin: 0 0 8px;
}
.w-belief p { color: var(--w-ink-70); margin: 0; font-size: 0.95rem; }

/* ---------- CTA block (bottom of About / used elsewhere) ---------- */
.w-cta-block {
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  background: var(--w-surface);
  padding: 40px;
  text-align: left;
  margin: 8px 0 12px;
}
.w-cta-block h2 { margin: 0 0 8px; }
.w-cta-block p { color: var(--w-ink-70); margin: 0 0 20px; max-width: 50ch; }

/* ---------- contact card ---------- */
.w-contact-card {
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  background: var(--w-surface);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.w-contact-card h2 { margin: 0 0 8px; }
.w-contact-card p { color: var(--w-ink-70); margin: 0; max-width: 42ch; }

/* ---------- prose content (Privacy Policy) — was the one page still on the
   old dark/serif theme with its own accent color, so it looked like a
   different site depending on the visitor's OS color scheme. Now shares the
   same shell, fonts and tokens as every other page. ---------- */
.w-prose { max-width: 720px; padding: 4px 0 64px; }
.w-prose h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 8px;
}
.w-prose .meta { color: var(--w-ink-50); font-size: 0.9rem; margin: 0 0 28px; }
.w-prose h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 2.1rem 0 0.7rem;
}
.w-prose p { color: var(--w-ink-70); margin: 0 0 1rem; max-width: 68ch; }
.w-prose strong { color: var(--w-ink); }
.w-prose a { color: var(--w-accent); }

/* ---------- phone gallery / solo mockup captions, recolored for this theme
   ---------- these still referenced the old dark-theme --text-muted token,
   which only gets remapped for OS light mode — on a visitor with a dark OS
   preference this caption would render in a color designed to sit on a
   near-black background, at low contrast on this always-light page. */
body.wide-theme .phone-gallery .phone-caption,
body.wide-theme .mockup-caption { color: var(--w-ink-50); }

@media (max-width: 980px) {
  .w-shell { padding: 0 22px; }
  .w-hero { grid-template-columns: 1fr; padding: 36px 0; }
  .w-filmstrip { justify-content: center; margin-top: 8px; }
  .w-ribbon { flex-wrap: wrap; }
  .w-ribbon .stat { flex: 1 1 45%; border-left: none; padding: 8px 0; }
  .w-contact-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- bonsai showcase (homepage Featured Work) ----------
   No copy at all here on purpose — the photo fills the entire card, edge
   to edge, both directions. bonsai-scene.js maps the icon's anchor point
   from a fraction of the *original photo* through whatever crop
   object-fit: cover applies (photoFractionToPixel), so the icon still
   lands on the right branch no matter how the stage is sized here.
   The one piece of text left is the "Open PriceMinder" pill overlaid on
   the image — keeping a normal, always-visible link that works with JS/
   canvas disabled means the tap-to-pluck interaction stays a bonus, never
   the only path to the app. */
.bonsai-showcase {
  border-radius: var(--w-radius);
  overflow: visible;
}
.bonsai-stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 62vh, 760px);
}
/* Clipping lives on this inner wrapper, not on .bonsai-stage itself — the
   popover is a sibling of this, so when it renders above the icon it
   isn't cut off by the rounded-corner mask the photo/canvas need. */
.bonsai-canvas-mask {
  position: absolute;
  inset: 0;
  border-radius: var(--w-radius);
  overflow: hidden;
  background: #101414;
  touch-action: none;
}
.bonsai-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Grayscale backdrop, colored icon — same trick the reference image
     uses: the tree/phone/skyline recede into monochrome so the one
     colored, interactive element (the icon) is unmistakably the focus. */
  filter: grayscale(1) contrast(1.05);
  opacity: 0.9;
}
.bonsai-canvas-mask canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.bonsai-overlay-controls {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
  z-index: 6;
}
.bonsai-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(12, 14, 14, 0.55);
  backdrop-filter: blur(6px);
  color: rgba(237, 237, 242, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.bonsai-icon-btn:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; background: rgba(12, 14, 14, 0.75); }
.bonsai-icon-btn svg { width: 16px; height: 16px; }
.bonsai-icon-btn[hidden] { display: none; }

/* The one primary action, floating on the image itself rather than living
   in a text block below it — filled/solid, never ghost-style, since this
   is the action the page actually wants taken. Bottom-right corner, not
   center: dead-center over the stage lands right on top of the phone
   that's the actual subject of the photo, covering it. */
.bonsai-overlay-cta {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--w-accent);
  color: var(--w-accent-ink);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 22px;
  border-radius: var(--w-radius);
  text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.55);
  z-index: 6;
}
.bonsai-overlay-cta .w-stroke { background: var(--w-accent-ink); }

/* Hidden until the card is hovered (or the link itself gets keyboard
   focus, so tabbing to it still reveals it rather than clicking blind) —
   but only on devices that actually have hover. Touch/coarse-pointer
   devices have no hover gesture, so the button stays visible there;
   otherwise there'd be no way to reach it. Same pattern hero-effects.js
   uses for the phone-tilt effect. */
@media (hover: hover) and (pointer: fine) {
  .bonsai-overlay-cta {
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform: translateY(4px);
  }
  .bonsai-showcase:hover .bonsai-overlay-cta,
  .bonsai-overlay-cta:focus-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
.bonsai-overlay-cta:hover { background: var(--w-accent-strong); }

.bonsai-popover {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 220px;
  background: rgba(10, 12, 13, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 14px;
  text-align: left;
  color: #EDEDF2;
  pointer-events: none;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6);
  z-index: 5;
}
.bonsai-popover[hidden] { display: none; }
.bonsai-popover strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  color: #fff;
  margin-bottom: 2px;
}
.bonsai-popover-status {
  display: inline-block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(237, 237, 242, 0.55);
  margin-bottom: 8px;
}
.bonsai-popover p { margin: 0 0 8px; font-size: 0.8rem; line-height: 1.5; color: rgba(237, 237, 242, 0.78); }
.bonsai-popover-action {
  display: block;
  font-size: 0.72rem;
  color: rgba(237, 237, 242, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
}

.bonsai-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bonsai-fallback .phone-frame { width: 190px; }
.bonsai-fallback[hidden] { display: none; }

@media (max-width: 640px) {
  .bonsai-stage { height: clamp(320px, 68vh, 560px); }
  .bonsai-overlay-cta { font-size: 0.85rem; padding: 11px 18px; }
}