:root {
    --bg-dark: #090a0c;
    --bg-surface: #121418;
    --bg-surface-elevated: #1a1d24;
    --border-subtle: #232732;
    --border-highlight: #3a4153;
    --text-primary: #f3f4f6;
    --text-muted: #9ca3af;
    --accent-turq: #63C2C6;
    --accent-orange: #BE6D00;
    --accent-cyan: #00e5ff;
    --brand-blue: #1c4b9c;
    --brand-blue-bright: #2d68d8;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-dark); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }

/* Small utility classes — used throughout the view templates but
   never actually defined in the original Spacedust stylesheet this
   file was copied from (a latent gap, not a Rocket Rustler change:
   without these, class="text-muted"/"text-sm" silently did nothing). */
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.85rem; }
.test {color:#BE6D00}
/* Navigation */
/* 2026-09-12 (Albert's transparency-on-scroll edit): .site-header changes
   its own height when .scrolled toggles (padding-top/bottom here, plus
   .nav-wrapper's padding-bottom and the logo grow-on-scroll rules below).
   Because .site-header sits at the very top of the page, that height
   change is exactly the case Chrome/Firefox's CSS "scroll anchoring"
   feature watches for -- it nudges window.scrollY on its own to keep
   on-screen content visually stable whenever something above it resizes.
   That nudge can shove scrollY back across the 40px JS threshold below,
   which flips .scrolled off, which changes the height again, which
   nudges scrollY again -- an infinite flicker loop right around the
   threshold. `overflow-anchor: none` opts this element out of that
   browser auto-adjustment, which is the actual fix for the flicker
   (padding/logo-size were already changing height before this edit and
   never visibly flickered, since nothing snapped instantly -- the new
   backdrop-filter + solid background here is what made an existing,
   previously invisible oscillation actually visible as flashing).
   Also added background-color to the transition so the new translucency
   fades in with the padding instead of snapping instantly. */
.site-header { padding-top: 1.4rem; padding-bottom: 1.3rem; position: sticky; top: 0; overflow-anchor: none; background: radial-gradient(ellipse at 50% 0%, rgba(184, 134, 11, .1) 0%, transparent 100%); backdrop-filter: blur(12px); z-index: 100; transition: padding 0.25s ease, background-color 0.25s ease; border-bottom: 5px solid var(--accent-orange); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);}
.site-header.scrolled { padding-top: .7rem;
    padding-bottom: 0; background-color: rgba(255, 255, 255, 0.85);}
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0rem; transition: padding 0.25s ease; }
.site-header.scrolled .nav-wrapper { padding-bottom: 0.55rem; }
/* Header text colors below (.main-nav a, .btn-nav, .nav-toggle span) are
   fixed, not theme-driven: .site-header keeps a hardcoded dark glass
   background across all three themes on purpose, so those need colors
   tuned for a dark bar rather than var(--text-primary)/var(--text-muted),
   which flip to near-black in the light and spacedust themes and would
   disappear against this header.
   .brand-logo is different: in the header its text color is never actually
   seen (both spans inside it — .logo-accent/.logo-sub — set their own fixed
   colors), but the same .brand-logo class is reused for the plain-text
   "SPACEDUST" heading in the footer, whose background *does* follow the
   theme — so .brand-logo's color stays theme-driven.
   NOTE (Rocket Rustler): the header/logo colors are now overridden per-theme
   in app/views/layout.php's own <style> block, tuned for the warm bone
   'rocketrustler' theme — see that file rather than here. */
.brand-logo { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--text-primary); text-decoration: none; letter-spacing: .02em; transition: font-size 0.25s ease; }

.brand-logo-footer { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--text-primary); text-decoration: none; letter-spacing: .02em; transition: font-size 0.25s ease; padding-bottom: 15px; }
.logo-accent { color: #fff; }
.logo-sub { color: var(--accent-orange); font-size: 1.3rem; margin-left: 0.25rem; font-weight: 300; transition: font-size 0.25s ease; }
.site-header.scrolled .brand-logo,
.site-header.scrolled .logo-sub { font-size: 2.05rem; }

/* Horizontal image logo (2026-09-03) -- same grow-on-scroll idea as
   .brand-logo/.logo-sub above, just driving height instead of
   font-size since this is an <img> now, not text. */
.brand-logo-img { display: block; height: 38px; width: auto; transition: height 0.25s ease; }
.site-header.scrolled .brand-logo-img { height: 30px; }

/* Centered silhouette badge (2026-09-04, Albert's concept) -- a
   sibling of .nav-wrapper inside .site-header (see layout.php), not a
   flex child of it, so left:50% centers against the header's full
   width rather than getting pushed around by the logo/nav flex items.
   .site-header is position:sticky, which (like relative/absolute) is
   a valid containing block for an absolutely positioned child, so no
   extra wrapper is needed.

   Reconstructed from the concept image's own pixels (sampled the
   header's background color vs. the badge's): it's a rounded rect a
   touch lighter than the header teal, sized to sit flush with the
   header's bottom edge at rest (no overlap yet) and to overlap it
   by a small fixed amount once scrolled.

   Anchored by `bottom`, not `top` or vertical centering, and with TWO
   values -- 0 at rest, a small negative once scrolled -- rather than
   one fixed value. This matters because .site-header itself grows
   noticeably taller on scroll (its own padding-top/.nav-wrapper's
   padding-bottom both kick in, plus .brand-logo-img growing), enough
   that a single fixed `top` would actually LOSE overlap once scrolled
   rather than gain it (the header's bottom edge moves down faster
   than a top-anchored badge's own bottom edge does) -- measured this
   with Playwright while building it, not just eyeballed. Anchoring by
   `bottom` sidesteps that entirely: `bottom: -8px` always means
   "8px past the header's bottom edge," regardless of how tall the
   header itself gets.

   One more subtlety `bottom` anchoring doesn't fix by itself: `top`/
   `bottom` offsets on an absolutely positioned element are measured
   from the PADDING box of the containing block, which excludes the
   header's own 5px border -- so the header's ~28px of usable padding-
   box height (not its ~33px full height) is what the resting badge
   actually has to fit inside without its top edge poking above the
   very top of the page (which is invisible/clipped there, since
   there's nothing above y:0 to reveal it -- caught by measuring the
   badge's actual bounding box with Playwright, not by eye). That's
   why the resting image height + padding below are deliberately kept
   at or under that ~28px, with a couple px of headroom to spare.

   PLAY WITH THESE (badge box look & feel -- approximated from a
   screenshot, so treat these as a starting point):
     background    - box tint; concept reads as a soft white wash over
                      the header teal (~15% white), not a flat color.
     border-radius - corner rounding.
     padding       - gap between the box edge and the image inside it
                      -- keep top+bottom padding small at rest (see
                      the note above on why: image height + padding
                      together must stay under the header's own
                      ~28px resting padding-box height, or the badge
                      pokes above the very top of the page instead of
                      sitting flush).
   PLAY WITH THESE (image + growth):
     .nav-center-logo-img height           - size at rest (see the
                      padding note above -- this is the one most
                      likely to need the headroom, not padding).
     .scrolled .nav-center-logo-img height - size once scrolled (same
                      .site-header.scrolled pattern as .brand-logo-img
                      above) -- no ~28px ceiling here, the header is
                      much taller by then.
     .nav-center-logo bottom               - 0 at rest = flush with the
                      border, no overlap; raise it (e.g. a few px) for
                      a little overlap even before scrolling.
     .scrolled .nav-center-logo bottom     - how far PAST the border
                      it hangs once scrolled; more negative = bigger
                      overlap. */
.nav-center-logo {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: block;
    line-height: 0;
    border-radius: 8px;
    transition: bottom 0.25s ease;
      top: 10px;
}
.site-header.scrolled .nav-center-logo { bottom: -8px; }
.nav-center-logo-img { display: block; height: 60px; width: auto; transition: height 0.25s ease; }
.site-header.scrolled .nav-center-logo-img { height: 80px; }
@media (max-width: 840px) {
    .nav-center-logo { display: none; } /* no room next to the hamburger button on mobile -- same breakpoint .main-nav/.nav-toggle switch at, below */
}


.main-nav { display: flex; gap: 2rem; align-items: center; }
.main-nav a { color: #9ca3af; text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s; }
.main-nav a:hover { color: #7b8fe5; }
.main-nav a.active { color: #ff5722; }
.btn-nav { border-radius: 4px; font-weight: 600; }

/* Mobile nav toggle */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: #ff5722; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--bg-surface); border-top: 0px solid transparent; }
.mobile-nav a { padding: 1rem 1.5rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border-subtle); font-weight: 500; }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a.active { color: #ff5722; }
.mobile-nav.open { max-height: 400px; border-top-color: var(--border-subtle); }

/* Hero Section */
.hero-section { }
.hero-badge { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 1rem;  margin-top: 1rem; letter-spacing: 0.05em; }   
.hero-title { color: #8b6914; font-family: var(--font-heading); font-size: clamp(2rem, 2.5vw, 4rem); font-weight: 500; line-height: 1.0; margin-bottom: 1.5rem; max-width: 900px; }
.hero-sub { font-size: 1rem; color: var(--text-muted); max-width: 720px; margin-bottom: .90rem; }
.hero-sub-2 { font-size: 1rem; color: var(--text-muted); margin-bottom: .90rem; }
/* 2026-09-15: .hero-sub-2 now also wraps trusted raw HTML from
   designs.description (gallery.php's "Saint Spotlight" block) --
   basic child-tag styling so paragraphs/links/bold text look right
   without extra markup, matching product.php's .pr-story-body rules. */
.hero-sub-2 p { margin: 0 0 .90rem; }
.hero-sub-2 p:last-child { margin-bottom: 0; }
.hero-sub-2 a { color: var(--accent-orange); }
.hero-sub-2 strong, .hero-sub-2 b { color: var(--text-primary); }

.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary { background: var(--accent-cyan); color: #fff; padding: 0.9rem 2rem; border-radius: 4px; text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
.btn-secondary { background: var(--bg-surface-elevated); color: var(--text-primary); padding: 0.9rem 2rem; border-radius: 4px; text-decoration: none; border: 1px solid var(--border-subtle); }

/* Credibility Bar */
.cred-bar { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); }
.cred-bar span { display: flex; align-items: center; gap: 0.5rem; }
.cred-bar span::before { content: '•'; color: var(--accent-orange); }

/* Grid Layouts */
.section-padding { padding: 2rem 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; margin-top: 3rem; }
.card { background: #eeeef1; border: 1px solid var(--border-subtle); padding: 1rem; border-radius: 8px; transition: transform 0.2s, border-color 0.2s; }
.card:hover { transform: translateY(-3px); border-color: var(--border-highlight); }
.card-tag { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-cyan); margin-bottom: 0.75rem; }
.card-title { font-family: var(--font-heading); font-size: 1.4rem; margin-bottom: 1rem; }

/* Visual Placeholders */
.placeholder-visual { aspect-ratio: 16/9; background: repeating-linear-gradient(45deg, #121418, #121418 10px, #171a20 10px, #171a20 20px); border: 1px dashed var(--border-highlight); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }

/* Footer (legacy Spacedust multi-column footer — no longer used;
   Rocket Rustler's simpler footer is styled inline in layout.php.
   Left here only in case a future theme wants the old layout back.) */
.site-footer { border-top: 1px solid var(--border-subtle); background: var(--bg-surface); padding: 2rem 0 1rem; margin-top: 1.6rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; }
.footer-brand-row { display: flex; align-items: flex-start; gap: 1.5rem; }
.footer-brand-content { flex: 1; min-width: 0; }
.footer-logo { display: block; width: 100px; height: 100px; object-fit: cover; margin-bottom: 0; flex-shrink: 0; }
@media (max-width: 480px) {
    .footer-brand-row { flex-direction: column; align-items: flex-start; }
}
.footer-col h4 { font-family: var(--font-heading); margin-bottom: 1.25rem; font-size: 1.1rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent-cyan); }
.btn-artisan { display: inline-block; margin-top: 1rem; color: var(--accent-cyan); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent-cyan); padding-bottom: 2px; }
.footer-bottom { border-top: 1px solid var(--border-subtle); margin-top: 1rem; padding-top: 2rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }

/* Responsive adjustments */
@media (max-width: 840px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .mobile-nav { display: flex; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-logo { width: 100px; height: 100px; }
}