/* ============================================================
   Aclassicaltone base styles
   Tokens, layout containers, header, footer, buttons.
   Loaded on every page before the page stylesheet.
   ============================================================ */

:root {
  --paper:      #FCFBF8;
  --ink:        #16130F;
  --gold:       #C9A227; /* brand gold: buttons, rules, numerals, icons */
  --gold-deep:  #8F7414; /* darkened for small text on paper (contrast) */
  --gold-hover: #B08D1E;
  --grey:       #8C857B;
  --rule:       rgba(22, 19, 15, 0.16);
  --error:      #A33B2E;

  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-body:    'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;

  --pad-x: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* Layout containers */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.container-narrow {
  max-width: 680px;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.smallcaps {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo image lives in img/logo.png. Swap the file, keep the markup.
   Height controls the rendered size; width follows. */
.brand { text-decoration: none; }
.brand img { height: 30px; width: auto; }

.header-link {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.header-link:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 16px 34px;
  border-radius: 3px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.6; cursor: wait; }

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-hover); }

.btn-line { border: 1px solid var(--rule); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: rgba(252, 251, 248, 0.5);
  font-size: 0.82rem;
  padding: 30px 0;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}
.site-footer a { color: rgba(252, 251, 248, 0.72); text-decoration: none; }
.site-footer a:hover { color: var(--paper); }
.footer-links { display: flex; gap: 22px; }

/* ============================================================
   Small screens + reduced motion
   ============================================================ */
@media (max-width: 480px) {
  :root { --pad-x: 20px; }
  .brand img { height: 26px; }
}

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