/* GTruckers Fleet — shared styles for interior pages */
:root{
  --onyx:#0A0A0A;
  --onyx-soft:#141414;
  --onyx-line:#1F1F1F;
  --brass:#B8935A;
  --brass-muted:#8A6E43;
  --cream:#F4EFE6;
  --cream-muted:#C9C3B6;
  --ash:#6B6B6B;

  --maxw:1200px;
  --gutter:clamp(20px, 5vw, 64px);
  --ease:cubic-bezier(0.16, 1, 0.3, 1);

  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--onyx);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(16px, 1.05vw, 18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--brass); color:var(--onyx); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); width:100%; }

/* ---------- Wordmark / GRUS reveal ---------- */
.wordmark{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:22px;
  line-height:1;
  display:inline-flex;
}
.wordmark .c{ color:var(--cream); }
.wordmark .b{ color:var(--brass); }

/* ---------- Top nav ---------- */
header.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px 32px;
  flex-wrap:wrap;
  padding:18px var(--gutter);
  background:rgba(10,10,10,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--onyx-line);
}
/* wordmark + small current-page label, top-left corner */
.nav-brand{ display:flex; align-items:baseline; gap:0; min-width:0; }
.nav-page{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ash); white-space:nowrap; padding-left:12px;
}
.nav-page::before{ content:"·"; color:var(--brass); font-weight:700; margin-right:9px; }

.nav-actions{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2.2vw, 34px);
  flex-wrap:wrap;
}
.nav-link{
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cream-muted);
  white-space:nowrap;
  transition:color var(--ease) .3s;
}
.nav-link:hover,
.nav-link:focus-visible{ color:var(--brass); }

/* ---------- Empty page body ---------- */
main.page{
  flex:1 1 auto;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(140px, 22vh, 220px) var(--gutter) clamp(90px, 14vh, 140px);
  overflow:hidden;
}
main.page::after{ /* faint brass glow, matches home */
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:110vw; height:70vh;
  transform:translate(-50%, -50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(184,147,90,0.07), transparent 70%);
  pointer-events:none;
}
.page-inner{ position:relative; }
.page-eyebrow{
  font-size:12px; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ash);
}
.page-eyebrow .dot{ color:var(--brass); }
.page-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(40px, 7vw, 88px);
  line-height:1.0;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin:20px 0 0;
  color:var(--cream);
}
.page-note{
  margin:22px 0 0;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ash);
}

/* ---------- Image tape (spans the black column, see backdrop.css) ---------- */
.tape{
  width:var(--void-w);            /* the darker-black column, wider than the text */
  max-width:100%;
  margin-inline:auto;
  display:grid;
  gap:2px;
  background:var(--onyx-line);    /* gaps read as hairlines */
  border-top:1px solid rgba(184,147,90,0.30);
  border-bottom:1px solid rgba(184,147,90,0.30);
}
.tape figure{ margin:0; overflow:hidden; background:var(--onyx); }
.tape img{
  display:block;
  width:100%;
  height:clamp(96px, 17vh, 170px);
  object-fit:cover;
  filter:saturate(0.92) brightness(0.94);   /* settles bright shots into the page */
}
/* on phones the cells narrow — tie height to width so they stay landscape */
@media (max-width:640px){
  .tape img{ height:clamp(60px, 20vw, 92px); }
}

/* ---------- Footer ---------- */
footer.site{ padding-block:44px; }   /* no seam — sections blend into the backdrop */
.foot-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.foot-legal{ color:var(--ash); font-size:13px; max-width:52ch; line-height:1.5; }
.foot-meta a{ color:var(--cream-muted); font-size:14px; transition:color var(--ease) .3s; }
.foot-meta a:hover{ color:var(--brass); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}