/* ============================================================
   Relay Industries — Global Stylesheet
   Shared baseline: tokens, reset, nav, footer, button/link system
   Page-specific styles remain in each page's inline <style> block.
   ============================================================ */

/* ── FONT ── */
@font-face {
  font-family: 'Birdie';
  src: url('/birdie.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── DESIGN TOKENS ── */
:root {
  --cream:    #E8E2D4;
  --cream-lt: #F2EDE3;
  --cream-dk: #DBD2BC;  /* documented extension of brand foundation — slightly darker cream for tone-on-tone moments (pull quotes, subtle bands, callouts). Sits in the same warm family as cream / cream-lt. */
  --khaki:    #B5A07A;
  --orange:   #E85D26;
  --orange-dk:#C44E1F;
  --black:    #1A1714;
  --gray:     #8A8078;
  --gray-lt:  #A89E94;
  --font-b:   'Birdie', serif;
  --font-c:   'Barlow Condensed', sans-serif;
  --font-s:   'Barlow', sans-serif;
  --font-m:   'Space Mono', monospace;
  --nav-h:    68px;
  --pad:      52px;
  --max:      1160px;
}

/* ── RESET + BODY ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--cream); color:var(--black);
  font-family:var(--font-s); line-height:1.6;
  overflow-x:hidden;
}
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ── NAV ── */
#nav {
  position:fixed; top:0; width:100%; height:var(--nav-h);
  padding:0 var(--pad);
  display:flex; align-items:center;
  z-index:200;
  background:rgba(232,226,212,0.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(26,23,20,0.07);
  transition:background 0.35s, border-color 0.35s;
}
#nav.dark {
  background:rgba(26,23,20,0.97);
  border-bottom-color:rgba(232,226,212,0.06);
}
.nav-wm {
  font-family:var(--font-b); font-size:19px; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--black); text-decoration:none;
  opacity:0.88; user-select:none;
  white-space:nowrap;
  transition:color 0.35s, opacity 0.35s;
}
.nav-wm:hover { opacity:1; }
#nav.dark .nav-wm { color:var(--cream); opacity:0.92; }

.nav-right {
  display:flex; align-items:center; gap:24px;
  margin-left:auto;
  white-space:nowrap;
}
.nav-link {
  font-family:var(--font-m); font-size:11px; font-weight:400;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--black); text-decoration:none;
  opacity:0.85; transition:opacity 0.25s, color 0.35s;
  white-space:nowrap;
}
.nav-link:hover { opacity:1; }
#nav.dark .nav-link { color:var(--cream); }
.nav-link-active { opacity:1; color:var(--orange); }
#nav.dark .nav-link-active { color:var(--orange); }

/* Contact CTA — three-state label via CSS ::before + attr().
   Default → hover → copied. Button is always sized to fit the
   widest label (the email) so no layout shift happens.
   Button content is empty in HTML; an .sr-only span carries the
   accessible label. ── */
.nav-cta {
  /* button resets — neutralize <button> user-agent defaults */
  -webkit-appearance:none; appearance:none;
  background:transparent;
  margin:0 0 0 8px;
  /* typography (mixed-case allowed; text-transform off so "robert@…" reads as authored) */
  font-family:var(--font-m); font-size:11px; font-weight:400;
  letter-spacing:0.08em;
  line-height:1; color:var(--black);
  text-decoration:none;
  /* sizing + visual */
  display:inline-flex; align-items:center; justify-content:center;
  min-width:150px;          /* fits "EMAIL ROBERT" and "COPIED!" — natural nav proportions */
  padding:10px 18px;
  border:1.5px solid var(--black);
  opacity:1; cursor:pointer;
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-cta::before {
  content:attr(data-label);
  text-transform:uppercase; letter-spacing:0.12em;
}
.nav-cta.copied::before,
.nav-cta.copied:hover::before {
  content:attr(data-copied);
}
.nav-cta:hover { background:var(--black); color:var(--cream); }
#nav.dark .nav-cta {
  border-color:rgba(232,226,212,0.85);
  color:var(--cream);
}
#nav.dark .nav-cta:hover {
  background:var(--cream); color:var(--black); border-color:var(--cream);
}
/* Clipboard-copied feedback state — flips to filled orange briefly */
.nav-cta.copied,
.nav-cta.copied:hover {
  background:var(--orange); color:var(--cream); border-color:var(--orange);
}
/* Screen-reader-only fallback label inside the button */
.nav-cta .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;
}
.btn-primary.copied,
.btn-primary.copied:hover {
  background:var(--orange); color:var(--cream); border-color:var(--orange);
}
/* Banner sits on an orange section — .copied flipping to orange would
   make the button invisible. Use dark for high contrast instead. */
.banner .btn-primary.copied,
.banner .btn-primary.copied:hover {
  background:var(--black); color:var(--cream); border-color:var(--black);
}
.btn-primary-on-light.copied,
.btn-primary-on-light.copied:hover {
  background:var(--orange); color:var(--cream); border-color:var(--orange);
}

.nav-toggle {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:28px; height:28px;
  margin-left:auto;  /* keep hamburger on the far right when nav-right is hidden */
  background:none; border:none; cursor:pointer; padding:2px;
}
.nav-toggle span {
  display:block; width:100%; height:1.5px; background:var(--black);
  transition:transform 0.3s; transform-origin:center;
}
#nav.dark .nav-toggle span { background:var(--cream); }
.nav-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position:fixed; top:var(--nav-h); left:0; width:100%;
  background:var(--cream); border-bottom:1px solid rgba(26,23,20,0.1);
  padding:24px var(--pad) 32px; z-index:150;
  display:flex; flex-direction:column;
  transform:translateY(-6px); opacity:0; pointer-events:none;
  transition:opacity 0.25s, transform 0.25s;
}
.mobile-nav.open { opacity:1; transform:translateY(0); pointer-events:all; }
.mobile-nav a {
  font-family:var(--font-m); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--orange); padding:16px 0;
  text-decoration:none; border-bottom:1px solid rgba(26,23,20,0.08);
}
.mobile-nav a:last-child { border-bottom:none; }
.mobile-nav a.nav-link-active { color:var(--orange); font-weight:700; }
/* Dark-bg pages: mobile nav uses the dark surface */
#nav.dark ~ .mobile-nav {
  background:rgba(26,23,20,0.97);
  border-bottom-color:rgba(232,226,212,0.06);
}
#nav.dark ~ .mobile-nav a {
  border-bottom-color:rgba(232,226,212,0.06);
}

/* ── COMMON: small uppercase eyebrow ── */
.col-label {
  font-family:var(--font-m); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.15em; color:var(--orange);
  margin-bottom:20px;
}

/* ============================================================
   CANONICAL BUTTON / LINK SYSTEM
   ============================================================ */

/* ── .btn-primary — filled, high-intent (dark-bg default) ──
   When used as a contact CTA, follows the same three-state pattern
   as .nav-cta (default label / hover reveals email / click shows copied).
   Works for both <a> and <button> elements. ── */
button.btn-primary, button.btn-secondary { font:inherit; }
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  -webkit-appearance:none; appearance:none;
  font-family:var(--font-m); font-size:12px; font-weight:400;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  min-width:220px;          /* compact, proportioned to the label */
  padding:18px 36px; border:1.5px solid var(--cream);
  background:var(--cream); color:var(--black);
  transition:background 0.25s, color 0.25s, border-color 0.25s;
}
/* Two-state label when data-label attribute is present: default + copied */
.btn-primary[data-label]::before {
  content:attr(data-label);
  text-transform:uppercase; letter-spacing:0.12em;
}
.btn-primary[data-label].copied::before,
.btn-primary[data-label].copied:hover::before {
  content:attr(data-copied);
}
.btn-primary span { display:inline-block; transition:transform 0.25s; }
.btn-primary:hover { background:var(--black); color:var(--cream); border-color:var(--black); }
.btn-primary[data-label] span { display:none; }  /* arrow not used in three-state mode */
.btn-primary[disabled] { opacity:0.5; cursor:not-allowed; }

/* On cream backgrounds */
.btn-primary-on-light {
  background:var(--black); color:var(--cream); border-color:var(--black);
}
.btn-primary-on-light:hover {
  background:var(--orange); color:var(--cream); border-color:var(--orange);
}

/* ── .btn-secondary — outlined, exploration CTA (dark-bg default) ── */
.btn-secondary {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-m); font-size:12px;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  padding:18px 36px;
  background:transparent; color:var(--cream); border:1.5px solid var(--cream);
  transition:background 0.25s, color 0.25s, border-color 0.25s, gap 0.25s;
}
.btn-secondary span { display:inline-block; transition:transform 0.25s; }
.btn-secondary:hover { background:var(--cream); color:var(--black); border-color:var(--cream); gap:14px; }
.btn-secondary:hover span { transform:translateX(3px); }

/* On cream backgrounds */
.btn-secondary-on-light {
  background:transparent; color:var(--orange); border-color:var(--orange);
}
.btn-secondary-on-light:hover {
  background:var(--orange); color:var(--cream); border-color:var(--orange);
}

/* ── .link-arrow — text link with arrow + underline (orange) ── */
.link-arrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-m); font-size:12px;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; color:var(--orange);
  border-bottom:1px solid currentColor; padding-bottom:4px;
  transition:gap 0.25s;
}
.link-arrow span { display:inline-block; transition:transform 0.25s; }
.link-arrow:hover { gap:12px; }
.link-arrow:hover span { transform:translateX(3px); }

/* ── .link-subtle — muted, auxiliary (dark-bg default) ── */
.link-subtle {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-m); font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none; color:var(--gray);
  border-bottom:1px solid rgba(232,226,212,0.18); padding-bottom:3px;
  transition:color 0.25s, border-color 0.25s, gap 0.25s;
}
.link-subtle span { display:inline-block; transition:transform 0.25s; }
.link-subtle:hover { color:var(--cream); border-color:var(--cream); gap:12px; }
.link-subtle:hover span { transform:translateX(3px); }

/* On cream backgrounds */
.link-subtle-on-light {
  color:#6a6058;
  border-bottom-color:rgba(26,23,20,0.2);
}
.link-subtle-on-light:hover {
  color:var(--black); border-bottom-color:var(--black);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer,
.site-footer {
  background:var(--black);
  padding:44px var(--pad) 36px;
  border-top:1px solid rgba(232,226,212,0.05);
}
/* Two-row footer:
   Row 1 — site nav (left) + email & social icons (right)
   Row 2 — wordmark (left) + copyright (right) */
.footer-row {
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.footer-row-top {
  padding-bottom:24px; margin-bottom:24px;
  border-bottom:1px solid rgba(232,226,212,0.1);
}
.footer-wm {
  font-family:var(--font-b); font-size:15px;
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--cream); opacity:0.3; text-decoration:none;
  transition:opacity 0.25s;
}
.footer-wm:hover { opacity:0.55; }
.footer-nav {
  display:flex; gap:24px; align-items:center; flex-wrap:wrap;
}
.footer-nav a {
  font-family:var(--font-m); font-size:11px; font-weight:400;
  letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(232,226,212,0.55); text-decoration:none;
  transition:color 0.25s;
}
.footer-nav a:hover { color:var(--cream); }
.footer-contact {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.footer-email {
  font-family:var(--font-m); font-size:11px; letter-spacing:0.08em;
  color:rgba(232,226,212,0.55); text-decoration:none;
  transition:color 0.25s;
}
.footer-email:hover { color:var(--cream); }
.footer-socials {
  display:flex; gap:12px; align-items:center;
}
.footer-socials .footer-icon {
  padding:4px;
  color:rgba(232,226,212,0.55);
  transition:color 0.25s;
  display:inline-flex;
}
.footer-socials .footer-icon:hover { color:var(--cream); }
.footer-socials .footer-icon svg { display:block; }
.footer-legal {
  font-family:var(--font-m); font-size:10px;
  color:rgba(232,226,212,0.25); letter-spacing:0.04em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  :root { --pad:32px; }
}
/* Collapse nav to hamburger as soon as it gets cramped, well before mobile */
@media (max-width:980px) {
  #nav .nav-right { display:none; }
  .nav-toggle { display:flex; }
}
@media (max-width:620px) {
  :root { --pad:22px; --nav-h:62px; }
  .footer-row { flex-direction:column; align-items:center; gap:20px; text-align:center; }
  .footer-nav { justify-content:center; }
  .footer-contact { justify-content:center; }
}
/* ============================================================
   PULL QUOTE — breaks the narrative grid (global utility)
   ────────────────────────────────────────────────────────────
   Editorial sections use a narrow 980px narrative width. Pull
   quotes intentionally violate that grid by sitting at the wider
   1160px frame, with typographic emphasis and subtle horizontal
   rules creating a "moment" between sections.

   Default is tone-on-tone (same cream as the page) so the moment
   reads as a typographic shift, not a jarring color block. For
   dark-section contexts, add the `.pull-quote-dark` modifier.

   Usage:
     <section class="pull-quote">
       <div class="pull-quote-inner">
         <p class="pull-quote-text">Quote text here.</p>
       </div>
     </section>
   ============================================================ */
.pull-quote {
  background:var(--cream-dk);
  padding:80px var(--pad);
}
.pull-quote-inner {
  max-width:var(--max); margin:0 auto;
  text-align:center;     /* centers the inline-block .pull-quote-text as a unit */
}
.pull-quote-text {
  display:inline-block;  /* block shrinks to content so it can center as a unit */
  text-align:left;       /* text inside still reads left-aligned */
  font-family:var(--font-c); font-weight:700;
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.2; letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--black);
  border-left:3px solid var(--orange);
  padding-left:28px;
}
/* Modifier — for use when the surrounding section is dark */
.pull-quote-dark {
  background:var(--black);
}
.pull-quote-dark .pull-quote-text {
  color:var(--cream);
}
@media (max-width:860px) {
  .pull-quote-text { font-size:clamp(24px, 4.5vw, 32px); }
}
@media (max-width:620px) {
  .pull-quote { padding:56px var(--pad); }
  .pull-quote-text {
    font-size:clamp(22px, 6vw, 28px);
    padding-left:20px; border-left-width:2px;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}