/* ============================================================
   Re:Jason — shared stylesheet
   Chrome, design tokens and category colours used by every page.
   Link this file in the head of every page, before its own
   inline style block.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;1,300;1,400&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Core palette */
  --rj-ink:#0E0E0E;
  --rj-cream:#F4F1EA;
  --rj-yellow:#FFE14A;
  --rj-gold:#E3B505;
  --rj-rust:#A8381E;

  /* Category colours — one per Index category */
  --cat-lighting:#E3B505;
  --cat-furniture:#C28A4E;
  --cat-tincans:#6F8089;
  --cat-sculpture:#38609C;
  --cat-projects:#5C9C3E;
  --cat-commissions:#8458BC;
  --cat-exhibition:#2C7F6B;
  --cat-residency:#CB4233;
  --cat-community:#C56E99;
  --cat-oddities:#8C8579;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--rj-cream);color:var(--rj-ink);font-family:'Inter',-apple-system,sans-serif;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Top bar ─────────────────────────────────────────────── */
.rj-topbar{display:flex;justify-content:space-between;align-items:center;padding:6px 32px;background:var(--rj-ink);color:var(--rj-cream);border-bottom:1.5px solid var(--rj-ink);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;position:sticky;top:0;z-index:50;}
.rj-topbar-left{display:flex;align-items:center;gap:10px;color:var(--rj-cream);opacity:.6;}
/* "Reuse" in the strapline links through to the tin cans section */
.rj-strap-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,241,234,.35);padding-bottom:1px;transition:color .18s,border-color .18s;}
.rj-strap-link:hover,.rj-strap-link:focus-visible{color:var(--rj-yellow);border-color:var(--rj-yellow);}
.rj-topbar-dot{width:7px;height:7px;border-radius:50%;background:var(--rj-yellow);display:inline-block;}
.rj-wordmark{font-family:'Fraunces',serif;font-style:italic;font-size:20px;letter-spacing:-.02em;text-transform:none;font-weight:400;color:var(--rj-yellow);text-decoration:none;}
.rj-wordmark sup{font-size:10px;font-style:normal;vertical-align:super;letter-spacing:0;opacity:.8;}

/* Reading progress bar — sits on the bottom edge of the sticky topbar.
   Add a div.rj-progress with id "rj-progress" as the first child of
   .rj-topbar, plus the progress script at the end of the body. */
.rj-progress{position:absolute;left:0;bottom:-3px;height:3px;width:0;background:var(--rj-gold);z-index:60;transition:width .08s linear;pointer-events:none;}
@media (prefers-reduced-motion: reduce){.rj-progress{transition:none;}}
@media print{.rj-progress{display:none;}}
.rj-nav{display:flex;gap:2px;align-items:center;color:var(--rj-cream);}
.rj-nav a{color:inherit;text-decoration:none;opacity:.7;transition:opacity .15s;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;padding:12px 9px;}
.rj-nav a:hover{opacity:1;}
.rj-nav a.active{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;opacity:1;color:var(--rj-yellow);}

/* ── Breadcrumb (interior pages) ─────────────────────────── */
.fb-breadcrumb{padding:16px 32px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;border-bottom:1px solid rgba(14,14,14,.1);}
.fb-breadcrumb a{color:inherit;text-decoration:none;}
.fb-breadcrumb a:hover{opacity:.8;}

/* ── Back / forward nav strip (interior pages) ───────────── */
.fb-nav-strip{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--rj-ink);}
.fb-nav-item{padding:24px 32px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--rj-ink);transition:background .15s;}
.fb-nav-item:hover{background:var(--rj-yellow);}
.fb-nav-item:first-child{border-right:1px solid rgba(14,14,14,.15);}
.fb-nav-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;}
.fb-nav-title{font-family:'Fraunces',serif;font-size:22px;letter-spacing:-.015em;font-weight:400;}

/* ── Footer ──────────────────────────────────────────────── */
.rj-footer{margin:48px 32px 0;padding:24px 0 20px;border-top:1px solid rgba(14,14,14,.2);display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;}
.rj-footer a{color:inherit;text-decoration:none;}
.rj-footer a:hover{opacity:.8;}