/* RUSTJACK — the site layout. Hand-authored (static); the tokens + the two type voices come from
   assets/css/brand.css (GENERATED from data/brand.json), this is the frame: header, hero, value strip,
   the floors, the Journal, About, footer. Monochrome — one ink on off-white paper; the B&W photos are
   rendered grayscale here so a colour original still reads as the brand. Phone-first (designed at <=400px). */

*, *::before, *::after { box-sizing: border-box; }

/* The engine's blocks.css sets body{padding:2rem} (right for the demo gallery, wrong for a site — it draws
   a border round the page and eats 4rem of a phone). Zero it; the shell supplies its own spacing. */
body { margin: 0; padding: 0; background: var(--rj-paper); color: var(--rj-ink);
  font-family: var(--rj-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.qx-container { padding: 0; }
img, svg { max-width: 100%; }
a { color: inherit; }

.rj-wrap { width: min(70rem, 100% - 2.2rem); margin-inline: auto; }

/* shared type helpers layered on brand.css's .rj-display / .rj-wide / .rj-body */
.rj-h1 { font-family: var(--rj-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  line-height: .98; font-size: clamp(2.1rem, 9vw, 3.6rem); margin: 0 0 .5rem; }
.rj-h2 { font-family: var(--rj-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1; font-size: clamp(1.7rem, 6vw, 2.6rem); margin: 0 0 .4rem; }
.rj-kicker { font-family: var(--rj-wide); font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  font-size: .72rem; color: var(--rj-graphite); margin: 0 0 .7rem; }
.rj-lede { font-size: clamp(1.02rem, 2.3vw, 1.18rem); line-height: 1.55; color: var(--rj-graphite); margin: 0 0 1rem; max-width: 58ch; }
.rj-lede-soft { color: var(--rj-mist); }
.rj-prose p { margin: 0 0 1rem; max-width: 60ch; color: var(--rj-graphite); }
.rj-section { padding: clamp(2.4rem, 7vw, 4.2rem) 0; }
.rj-head { margin-bottom: 1.4rem; }

/* the CTA — the board's outlined button, plus an ink variant for inside the paper sections */
.rj-cta { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.4rem;
  font-family: var(--rj-wide); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: .78rem;
  text-decoration: none; border: 1.5px solid currentColor; background: transparent; color: var(--rj-ink); }
.rj-cta-out { color: var(--rj-paper); }
.rj-cta-ink { color: var(--rj-ink); }
@media (hover: hover) {
  .rj-cta-out:hover { background: var(--rj-paper); color: var(--rj-ink); }
  .rj-cta-ink:hover { background: var(--rj-ink); color: var(--rj-paper); }
}

/* ── HEADER ───────────────────────────────────────────────────────────────────────────────────── */
.rj-header { background: var(--rj-paper); border-bottom: 1px solid var(--rj-rule); position: sticky; top: 0; z-index: 50; }
.rj-header-inner { width: min(70rem, 100% - 2.2rem); margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; min-height: 60px; }
.rj-wordmark { color: var(--rj-ink); line-height: 0; display: inline-block; }
.rj-wordmark-svg { width: clamp(118px, 30vw, 150px); height: auto; }
.rj-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.7rem, 2.4vw, 1.5rem); }
.rj-nav-link { font-size: .72rem; color: var(--rj-ink); text-decoration: none; padding: .4rem 0; white-space: nowrap; }
@media (hover: hover) { .rj-nav-link:hover { color: var(--rj-mist); } }
.rj-tools { display: flex; align-items: center; gap: .7rem; color: var(--rj-ink); justify-self: end; }
.rj-tool svg { width: 20px; height: 20px; display: block; }
/* phone: wordmark + tools on the top line, nav wraps to its own centered row beneath */
@media (max-width: 560px) {
  .rj-header-inner { grid-template-columns: auto auto; grid-template-areas: "mark tools" "nav nav"; row-gap: .5rem; padding-block: .55rem; }
  .rj-wordmark { grid-area: mark; }
  .rj-tools { grid-area: tools; }
  .rj-nav { grid-area: nav; justify-content: flex-start; gap: 1.1rem; }
}

/* ── HERO ─────────────────────────────────────────────────────────────────────────────────────── */
.rj-hero { position: relative; background: var(--rj-ink); color: var(--rj-paper);
  min-height: clamp(62vh, 64vh, 78vh); display: grid; align-items: end; overflow: hidden; }
.rj-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.05); }
/* a photo gets a dark wash so the condensed caps stay legible top-to-bottom */
.rj-hero-photo .rj-hero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,.1) 40%, rgba(10,10,10,.72) 100%); }
.rj-hero-inner { position: relative; width: min(70rem, 100% - 2.2rem); margin-inline: auto;
  padding-block: clamp(2rem, 7vw, 4rem); }
.rj-hero-head { font-size: clamp(2.6rem, 12vw, 6rem); line-height: .92; margin: 0 0 .6rem; max-width: 14ch; }
.rj-hero-sub { font-size: clamp(.72rem, 2.4vw, .95rem); color: var(--rj-rule); margin: 0 0 1.4rem; }
.rj-hero-photo .rj-hero-sub { color: var(--rj-paper); }

/* ── VALUE STRIP ──────────────────────────────────────────────────────────────────────────────── */
.rj-values-section { background: var(--rj-paper-deep); border-bottom: 1px solid var(--rj-rule); }
.rj-values { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2.2rem); text-align: center; }
.rj-value { display: grid; justify-items: center; gap: .55rem; }
.rj-value-icon { color: var(--rj-ink); }
.rj-value-icon-svg { width: 44px; height: auto; }
.rj-value-top { font-size: .8rem; color: var(--rj-ink); margin: 0; }
.rj-value-sub { font-size: .8rem; color: var(--rj-mist); margin: 0; }
@media (min-width: 620px) { .rj-values { grid-template-columns: repeat(3, 1fr); align-items: start; } }

/* ── INTRO + FLOORS (home) ────────────────────────────────────────────────────────────────────── */
.rj-intro-inner { max-width: 62ch; }
.rj-floor-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rj-rule);
  border: 1px solid var(--rj-rule); }
.rj-floor { display: grid; gap: .3rem; padding: 1.3rem 1.2rem; background: var(--rj-paper); text-decoration: none; }
.rj-floor-k { font-size: .82rem; letter-spacing: .24em; color: var(--rj-ink); }
.rj-floor-n { font-size: .95rem; color: var(--rj-graphite); }
@media (hover: hover) { .rj-floor:hover { background: var(--rj-paper-deep); } }
@media (min-width: 620px) { .rj-floor-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── COMING FLOORS (gear / apparel) ───────────────────────────────────────────────────────────── */
.rj-coming-inner { max-width: 48ch; text-align: center; margin-inline: auto; display: grid; justify-items: center; gap: .3rem; }
.rj-coming-mark { color: var(--rj-ink); }
.rj-coming-mark .rj-mark-svg { width: 56px; height: auto; margin-bottom: .6rem; }
.rj-coming-note { font-size: clamp(1.05rem, 2.6vw, 1.22rem); color: var(--rj-graphite); line-height: 1.55; margin: .4rem 0 .2rem; }
.rj-coming-tag { font-family: var(--rj-wide); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  font-size: .68rem; color: var(--rj-mist); margin: 0 0 1.4rem; }

/* ── JOURNAL ──────────────────────────────────────────────────────────────────────────────────── */
.rj-journal-hero { padding-bottom: clamp(1.2rem, 4vw, 2rem); }
.rj-journal-head { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
.rj-figure { color: var(--rj-ink); }
.rj-figure-svg { width: clamp(96px, 26vw, 140px); height: auto; }
.rj-entries { display: grid; gap: clamp(1.6rem, 5vw, 2.4rem); max-width: 62ch; }
.rj-entry { border-top: 1px solid var(--rj-rule); padding-top: clamp(1.2rem, 4vw, 1.8rem); }
.rj-entry-meta { font-size: .68rem; letter-spacing: .22em; color: var(--rj-mist); margin: 0 0 .4rem; }
.rj-entry-title { font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1; color: var(--rj-ink); margin: 0 0 .6rem; }
.rj-entry-body { color: var(--rj-graphite); margin: 0; }
@media (min-width: 620px) { .rj-journal-head { grid-template-columns: auto 1fr; gap: 1.6rem; } }

/* ── ABOUT ────────────────────────────────────────────────────────────────────────────────────── */
.rj-about-inner { max-width: 60ch; }
.rj-about-badge { color: var(--rj-ink); display: block; }
.rj-badge-svg { width: clamp(84px, 22vw, 116px); height: auto; margin-bottom: 1rem; }
.rj-sign { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rj-rule); }
.rj-sign-fig { color: var(--rj-ink); }
.rj-sign .rj-figure-svg { width: clamp(72px, 18vw, 96px); }
.rj-sign-line { font-size: .78rem; color: var(--rj-graphite); margin: 0; }

/* ── 404 ──────────────────────────────────────────────────────────────────────────────────────── */
.rj-404-inner { max-width: 46ch; text-align: center; margin-inline: auto; display: grid; justify-items: center; gap: .3rem; }
.rj-404-fig { color: var(--rj-ink); }
.rj-404-fig .rj-figure-svg { width: clamp(110px, 30vw, 150px); margin-bottom: .6rem; }
.rj-404 .rj-cta { margin-top: 1rem; }

/* ── FOOTER ───────────────────────────────────────────────────────────────────────────────────── */
.rj-footer { background: var(--rj-ink); color: var(--rj-paper); padding: clamp(2.2rem, 6vw, 3.2rem) 0; margin-top: auto; }
.rj-footer-inner { display: grid; gap: 1.1rem; justify-items: center; text-align: center; }
.rj-foot-mark { color: var(--rj-paper); }
.rj-foot-lockup { width: clamp(180px, 50vw, 240px); height: auto; }
.rj-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.rj-foot-link { font-size: .68rem; color: var(--rj-rule); text-decoration: none; }
@media (hover: hover) { .rj-foot-link:hover { color: var(--rj-paper); } }
.rj-foot-note { font-size: .84rem; color: var(--rj-mist); max-width: 60ch; margin: 0; }
.rj-foot-owner { font-size: .62rem; letter-spacing: .18em; color: var(--rj-mist); margin: 0; }
.rj-foot-contact { color: var(--rj-rule); text-decoration: none; }
@media (hover: hover) { .rj-foot-contact:hover { color: var(--rj-paper); } }

/* ── BEDDED SECTIONS — a moody B&W bed behind light text (the coming floors, the attitude band) ──── */
.rj-bed { position: relative; overflow: hidden; background: var(--rj-ink); color: var(--rj-paper); isolation: isolate; }
.rj-bed-media { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.05); }
.rj-bed-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,12,.52) 0%, rgba(12,12,12,.42) 45%, rgba(12,12,12,.74) 100%); }
.rj-bed .rj-wrap { position: relative; z-index: 1; }
.rj-bed .rj-kicker { color: var(--rj-rule); }
.rj-bed .rj-h1 { color: var(--rj-paper); }
.rj-bed .rj-coming-mark { color: var(--rj-paper); }
.rj-bed .rj-coming-note { color: var(--rj-paper); }
.rj-bed .rj-coming-tag { color: var(--rj-rule); }

/* a small courtesy credit to the photo source, bottom-right of any bedded section (incl. the hero) */
.rj-credit { position: absolute; right: .6rem; bottom: .5rem; z-index: 2;
  font-family: var(--rj-wide); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .56rem;
  color: rgba(244, 242, 238, .55); text-decoration: none; }
@media (hover: hover) { .rj-credit:hover { color: var(--rj-paper); } }

/* the attitude band — NO SIGNAL. NO SCHEDULE., big, over the ridge bed */
.rj-noband { text-align: center; padding-block: clamp(3rem, 10vw, 5.5rem); }
.rj-noband-inner { display: grid; justify-items: center; gap: .5rem; }
.rj-noband-head { font-size: clamp(1.8rem, 7vw, 3.2rem); line-height: 1; color: var(--rj-paper); margin: 0; }
.rj-noband-sub { font-size: .74rem; color: var(--rj-rule); margin: 0; }

/* Wrapper hooks the engine wants a rule for: the html-content host divs (header/footer) and the section
   shells carry no box of their own — their inner elements do the layout — but each class used needs a rule. */
.rj-header-host, .rj-footer-host { display: block; }
.rj-about, .rj-coming, .rj-intro, .rj-floors, .rj-journal { position: relative; }