/* Trak — Društvo FPS
   Film-strip concept. The perforated left rail is the signature element;
   everything else stays quiet so it carries the identity alone.
   Self-hosted: no CDN, no Google Fonts. Run `make fonts`. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.58bc146fce35.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.11b670bc0b61.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --paper: #f6f4ee;
  --ink: #181510;
  --gold: #a88b61;
  --gold-deep: #8a6f47;
  --muted: #7d7565;
  --line: #ded8ca;
  --rail: 34px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
}
h1, h2, h3, .serif { font-family: "Fraunces", Georgia, serif; }
a { color: var(--gold-deep); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.eyebrow {
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold-deep);
  font-weight: 600;
}

/* --- Signature: the film-strip rail ------------------------------------- */
.sprocket {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: var(--rail); background: var(--ink); z-index: 1040;
  display: flex; flex-direction: column;
  justify-content: space-evenly; align-items: center;
}
.sprocket i {
  display: block; width: 12px; height: 16px;
  background: var(--paper); border-radius: 2px; opacity: .9;
}
main, nav.navbar, footer { margin-left: var(--rail); }
@media (max-width: 576px) {
  :root { --rail: 20px; }
  .sprocket i { width: 8px; height: 11px; }
}

/* --- Navigation --------------------------------------------------------- */
.navbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.navbar .nav-link { color: var(--ink); font-size: .9rem; }
.navbar .nav-link:hover,
.navbar .nav-link[aria-current="page"] { color: var(--gold-deep); }
.brand-mark {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700; font-size: 1.25rem; color: var(--ink);
}
.brand-mark span { color: var(--gold-deep); }

/* --- Hero --------------------------------------------------------------- */
.hero { padding: 7rem 0 5rem; border-bottom: 1px solid var(--line); }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 600; line-height: 1.05; max-width: 18ch;
}
.hero h1 em { font-style: italic; color: var(--gold-deep); }
.hero .lead { color: var(--muted); max-width: 46ch; }

.btn-ink {
  background: var(--ink); color: var(--paper);
  border-radius: 0; padding: .7rem 1.5rem; font-weight: 500;
}
.btn-ink:hover { background: var(--gold-deep); color: var(--paper); }
.btn-line {
  border: 1px solid var(--ink); color: var(--ink);
  border-radius: 0; padding: .7rem 1.5rem;
}
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* --- Sections ----------------------------------------------------------- */
section { padding: 5.5rem 0; }
section + section { border-top: 1px solid var(--line); }
h2.title { font-size: 2.1rem; font-weight: 600; font-family: "Fraunces", Georgia, serif; }

/* --- Member directory --------------------------------------------------- */
.member {
  border: 1px solid var(--line); background: #fff; padding: 1.5rem;
  height: 100%; transition: transform .18s, box-shadow .18s;
}
.member:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(24, 21, 16, .08); }
.member h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.member h3 a { color: var(--ink); text-decoration: none; }
.member h3 a:hover { color: var(--gold-deep); }
.member p { color: var(--muted); font-size: .88rem; margin: .5rem 0 0; }

/* --- Document and news rows --------------------------------------------- */
.doc-row {
  display: flex; gap: 1.25rem; padding: 1.1rem 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.doc-row time {
  min-width: 7.5rem; color: var(--muted); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.doc-row a {
  color: var(--ink); text-decoration: none;
  font-family: "Fraunces", Georgia, serif; font-size: 1.15rem;
}
.doc-row a:hover { color: var(--gold-deep); }
@media (max-width: 576px) { .doc-row { flex-direction: column; gap: .25rem; } }

/* --- Inverted co-production section ------------------------------------- */
.copro { background: var(--ink); color: var(--paper); }
.copro .eyebrow { color: var(--gold); }
.copro .title { color: var(--paper); }
.copro p { color: #cfc8ba; }
.copro .stat { font-family: "Fraunces", Georgia, serif; font-size: 2.6rem; color: var(--gold); }
.copro .stat-label { font-size: .8rem; }
.copro .btn-line { border-color: var(--gold); color: var(--gold); }
.copro .btn-line:hover { background: var(--gold); color: var(--ink); }

/* --- Article pages ------------------------------------------------------ */
.article { max-width: 68ch; }
/* The reading column sits inside a full-width .container, so it lines up with
   any section below it — the member directory's heading and cards in
   particular. Pages that carry nothing but prose re-centre it, which is where
   it has always sat. */
.article-centered { margin-inline: auto; }
.article h1 { font-size: 2.4rem; font-weight: 600; }
.article time {
  color: var(--muted); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.article .summary {
  font-size: 1.1rem; color: var(--muted);
  border-left: 2px solid var(--gold); padding-left: 1rem;
}

footer {
  border-top: 1px solid var(--line); padding: 3rem 0;
  color: var(--muted); font-size: .87rem;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}