/* ===================================================================
   GTG // shared stylesheet for sub-pages (articles, privacy)
   ---------------------------------------------------------------
   index.html keeps its own inline styles (single-page, no build step).
   This file carries the same brand tokens so any page you add under
   articles/ or at the site root looks like it belongs.
   =================================================================== */

:root{
  --charcoal:   #1D1F23;
  --charcoal-2: #17181C;
  --brown:      #583211;
  --brown-deep: #3A2008;
  --amber:      #DD910A;
  --amber-deep: #B67608;
  --cream:      #F3EFE7;
  --body-tx:    #C6C2B8;
  --dim:        #8B8779;
  --line:       rgba(221,145,10,.22);
  --line-soft:  rgba(243,239,231,.10);

  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --measure: 68ch;
  --pad: clamp(20px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--charcoal) url('pattern.png') repeat top left;
  background-size:400px auto;
  color:var(--body-tx);
  font-family:var(--font-body);
  font-size:clamp(15px, 1.05vw + 10px, 17px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe,video{ display:block; max-width:100%; }
a{ color:var(--amber); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

.mono{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); }

/* ---- top strip + nav (matches index.html) ---- */
.class-strip{
  background:var(--amber); color:var(--charcoal);
  font-family:var(--font-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  text-align:center; padding:6px 12px;
}
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:12px var(--pad);
  background:rgba(23,24,28,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.nav .wordmark img{ height:40px; width:auto; }
.nav .btn{ margin-left:auto; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:.95rem;
  padding:12px 24px; border:1px solid var(--amber);
  color:var(--charcoal); background:var(--amber);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--cream); border-color:var(--cream); color:var(--charcoal); text-decoration:none; }
.btn--ghost{ background:transparent; color:var(--amber); }
.btn--ghost:hover{ background:rgba(221,145,10,.14); color:var(--amber); }

/* ---- page body ---- */
.page{ padding:clamp(48px,7vw,88px) var(--pad); }
.page-inner{ max-width:var(--measure); margin:0 auto; }
.page-inner.wide{ max-width:1100px; }

.page h1{
  color:var(--cream); font-family:var(--font-head); font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.06;
  font-size:clamp(2rem, 5vw, 3.2rem); margin-top:14px;
}
.page h2{
  color:var(--cream); font-family:var(--font-head); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.3rem, 2.4vw, 1.75rem); margin:2em 0 .6em;
}
.page h3{
  color:var(--cream); font-family:var(--font-head); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:1.15rem; margin:1.6em 0 .5em;
}
.page p + p{ margin-top:1em; }
.page ul,.page ol{ margin:1em 0 1em 1.3em; }
.page li + li{ margin-top:.4em; }
.page hr{ border:0; border-top:1px solid var(--line-soft); margin:2.5em 0; }
.lead{ font-size:clamp(1.05rem, 1.5vw, 1.2rem); color:var(--cream); margin-top:18px; }

.byline{
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  margin-top:22px; padding-top:16px; border-top:1px dashed var(--line);
  color:var(--dim);
}
.tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber);
  border:1px solid var(--line); padding:3px 10px;
}

.page figure{ margin:2em 0; }
.page figure img{ width:100%; border:1px solid var(--line-soft); }
.page figcaption{ margin-top:8px; color:var(--dim); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; }

blockquote{
  margin:1.6em 0; padding:14px 20px;
  border-left:2px solid var(--amber); background:rgba(221,145,10,.05);
  color:var(--cream);
}
code{ font-family:var(--font-mono); font-size:.88em; color:var(--amber); }

.back-row{ margin-top:56px; padding-top:20px; border-top:1px solid var(--line-soft); }

/* ---- footer ---- */
.command{ padding:clamp(48px,7vw,80px) var(--pad) 40px; border-top:1px solid var(--line-soft); }
.command-inner{ max-width:1100px; margin:0 auto; text-align:center; }
.command img{ width:min(360px, 70vw); margin:0 auto 8px; }
.command .motto{
  margin-top:16px; font-family:var(--font-head); font-weight:500;
  font-size:clamp(1rem, 1.6vw, 1.25rem); letter-spacing:.04em;
  text-transform:uppercase; color:var(--amber);
}
.smallprint{
  max-width:1100px; margin:48px auto 0; padding-top:18px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  color:var(--dim); font-size:.68rem;
}