/* ============================================================
   Appleton & Associates — Contemporary Redesign
   "Contemporary Counsel" — tech-editorial, heritage + innovation
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap');

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

:root {
  /* Paper / light */
  --paper:    #F4F3EE;
  --paper-2:  #ECE9E1;
  --card:     #FFFFFF;
  --raised:   #E6E2D8;

  /* Ink (warm near-black) */
  --ink:      #1A1813;
  --ink-2:    #5C584F;
  --ink-3:    #938E83;

  /* Dark surfaces */
  --dark:     #16140F;
  --dark-2:   #211E17;
  --on-dark:    #F1EEE5;
  --on-dark-2:  #ABA597;
  --on-dark-3:  #6E695D;

  /* Accent — crisp modernized brass */
  --gold:        #B0822E;
  --gold-light:  #CDA050;
  --gold-on-dark:#D2A451;
  --gold-faint:  rgba(176,130,46,0.07);
  --gold-dim:    rgba(176,130,46,0.16);
  --gold-border: rgba(176,130,46,0.34);

  /* Lines */
  --line:       rgba(26,24,19,0.12);
  --line-soft:  rgba(26,24,19,0.07);
  --line-dark:  rgba(255,255,255,0.13);
  --line-dark-soft: rgba(255,255,255,0.07);

  /* Type */
  --sans:  'Space Grotesk', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --max:   1280px;
  --nav-h: 76px;
  --gut:   clamp(1.25rem, 5vw, 4rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}

::selection { background: var(--gold-dim); color: var(--ink); }

a { color: inherit; text-decoration: none; }

/* ---- Utilities ---- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--gold-on-dark); }

.serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.025em; line-height: 1.04; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.6rem; border-radius: 2px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.32s var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform 0.32s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--gold); color: #fff; }
.btn-primary.on-dark { background: var(--gold); color: #1a1206; }
.btn-primary.on-dark:hover { background: var(--gold-light); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost.on-dark { color: var(--on-dark); border-color: var(--line-dark); }
.btn-ghost.on-dark:hover { border-color: var(--on-dark); background: rgba(255,255,255,0.04); }

/* ---- Tag / pill ---- */
.tag {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border: 1px solid var(--line);
  border-radius: 2px; color: var(--ink-2); white-space: nowrap;
}
.tag.gold { border-color: var(--gold-border); color: var(--gold); background: var(--gold-faint); }
.tag.on-dark { border-color: var(--line-dark); color: var(--on-dark-2); }

/* ---- Scroll reveal ----
   Visible by default. With JS, elements hide then play a one-shot
   entrance; JS "settles" them (strips the animation) when done so
   static captures and no-JS fallback both render the visible state. */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; }
.js .reveal.in { animation: fadeUp 0.75s var(--ease) forwards; }
.reveal.d1 { animation-delay: 0.08s; }
.reveal.d2 { animation-delay: 0.16s; }
.reveal.d3 { animation-delay: 0.24s; }
.reveal.d4 { animation-delay: 0.32s; }

/* scrollbar */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #cfc9bb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

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