/* ==========================================================================
   Bill Mellenthin, CPA — site styles
   Single stylesheet shared by all five pages.
   Sections: 1 Tokens · 2 Base · 3 Header/Nav · 4 Hero · 5 Layout · 6 Components
             7 Page-specific · 8 Footer · 9 Responsive · 10 Accessibility
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — change colors/spacing here and the whole site follows
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --navy-900: #0d1f33;
  --navy-800: #14314f;
  --navy-700: #1c4166;
  --navy-600: #275a86;
  /* Bronze/gold. Three weights, each with a checked contrast job:
     --accent     decorative only (rules, borders, dots) — 3.6:1 on white,
                  fine for non-text but NOT safe for small text
     --accent-dk  the text/button weight — 5.6:1 on white, passes AA
     --accent-lt  for use on dark — 9.6:1 on --navy-900, and 5.1:1 or better
                  on the hero photo at every tested viewport width */
  --accent:     #b07d3a;
  --accent-dk:  #8a6029;
  --accent-dkr: #6d4b20;   /* hover state for accent-dk */
  /* Lightened from #d9b478 on 2026-08-10. Measured against the actual rendered
     hero (not a model), the old value put the hero eyebrow at 4.46:1 — just
     under the 4.5 AA threshold for small text. This value clears it. */
  --accent-lt:  #e0c089;

  /* Neutrals */
  --ink:        #1a2430;   /* body text */
  --ink-soft:   #4a5768;   /* secondary text */
  --line:       #dde3ea;
  --surface:    #ffffff;
  --surface-2:  #f5f7fa;
  --surface-3:  #eef2f7;

  /* Typography */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  /* Other */
  --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(13, 31, 51, 0.08);
  --shadow-md: 0 4px 16px rgba(13, 31, 51, 0.10);
  --shadow-lg: 0 12px 32px rgba(13, 31, 51, 0.14);
  --maxw: 1140px;
  --maxw-narrow: 780px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;      /* 17px — comfortable default */
  line-height: 1.7;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--navy-900);
  line-height: 1.25;
  margin: 0 0 var(--s-2);
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p  { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dk); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--s-2); padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }

/* --------------------------------------------------------------------------
   3. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: var(--s-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.brand:hover { color: inherit; }

.brand-mark {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 4px;
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  border-bottom: 3px solid var(--accent);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-900);
}
.brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  color: var(--navy-800);
  font-size: 1.15rem;
  line-height: 1;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav a:hover { background: var(--surface-2); color: var(--navy-700); }

/* The current page carries the same filled background as the hover state, so
   it reads as "you are here" without needing to be hovered. The bronze
   underline stays on top of it: background alone would leave the current page
   indistinguishable from whatever the mouse happens to be resting on, and
   would be invisible to anyone who can't perceive the fill. */
.site-nav a[aria-current="page"] {
  background: var(--surface-2);
  color: var(--navy-800);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Hovering the page you're already on still gives feedback — one step darker. */
.site-nav a[aria-current="page"]:hover {
  background: var(--surface-3);
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* THE BUSINESS CARD'S SKYLINE (since 2026-10, at Bill's request): the
     same recolored Denver skyline and Front Range as the back of the card,
     on the card's navy, along the bottom of the hero. It is an <img> after
     .hero-inner (see .hero-skyline), made by print/stock-web-hero.py.

     IT IS PURCHASED ART. The image files (public/assets/images/stock-skyline-hero*)
     are git-ignored until the stock licence is confirmed for web use. When
     they are missing, the decorative image (alt="") takes up no space and the
     hero simply ends below the buttons, so nothing looks broken.

     THE TEXT NEVER SITS ON THE ART: the image is in normal flow below the
     text, so it cannot overlap it at any width. Text on flat navy: white
     16.65:1, the gold 9.57:1. */
  background-color: var(--navy-900);
  color: #fff;
  padding: var(--s-6) var(--s-3) 0;
  text-align: center;
}

.hero-inner { max-width: 820px; margin: 0 auto; padding-bottom: var(--s-5); }

/* Full width: the negative side margins undo .hero's side padding. */
.hero-skyline {
  width: calc(100% + 2 * var(--s-3));
  max-width: none;
  margin: 0 calc(-1 * var(--s-3));
}

.hero-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-lt);
  margin-bottom: var(--s-2);
}

.hero h1 { color: #fff; margin-bottom: var(--s-2); }

/* "CPA" sits on its own line beneath the name. Letterspaced so three letters
   still carry weight at this size.
   The text-indent matters: letter-spacing adds trailing space after the LAST
   letter too, which drags centered text visibly off-centre. Indenting by the
   same amount puts it back. */
.hero h1 .hero-cred {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--accent-lt);
}

.hero-rule {
  width: 64px;
  height: 3px;
  background: var(--accent);
  margin: var(--s-2) auto var(--s-3);
  border: 0;
}

.hero-lede {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 0 auto var(--s-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
}

/* Slim hero used on interior pages */
.page-hero {
  background: var(--navy-900);
  background-image: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: var(--s-6) var(--s-3) var(--s-5);
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: 0.35rem; }
.page-hero p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: var(--s-2) auto 0;
}
.page-hero .hero-rule { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.section { padding: var(--s-6) var(--s-3); }
.section--tint { background: var(--surface-2); }
.section--navy { background: var(--navy-900); color: rgba(255,255,255,0.9); }
.section--navy h2 { color: #fff; }

.container { max-width: var(--maxw); margin: 0 auto; }
.container--narrow { max-width: var(--maxw-narrow); margin: 0 auto; }

.section-head { text-align: center; margin-bottom: var(--s-5); }
.section-head p {
  color: var(--ink-soft);
  max-width: 640px;
  margin: var(--s-2) auto 0;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-dk);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   6. Components
   -------------------------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Uses --accent-dk, not --accent: white on --accent is only 3.6:1 and the
   button label is small bold text, which needs 4.5:1. */
.btn--primary { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.btn--primary:hover { background: var(--accent-dkr); border-color: var(--accent-dkr); color: #fff; }

.btn--outline { background: transparent; border-color: rgba(255,255,255,0.7); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }

.btn--navy { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: var(--shadow-sm);
}

.card--accent { border-top: 3px solid var(--accent); }

.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }

.card-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--navy-700);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: var(--s-2);
}

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  text-align: center;
}
.stat-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--accent-lt);
  line-height: 1.1;
  display: block;
}
.stat-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

/* Two-column media block */
.media {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--s-5);
  align-items: start;
}

.portrait-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border-bottom: 4px solid var(--accent);
  background: var(--surface-3);
}
.portrait-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.portrait-caption {
  margin-top: var(--s-2);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Fact list (label / value rows) */
.facts { margin: 0; }
.facts div {
  display: flex;
  gap: var(--s-2);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.facts div:last-child { border-bottom: 0; }
.facts dt {
  flex: 0 0 40%;
  font-weight: 600;
  color: var(--navy-800);
}
.facts dd { margin: 0; color: var(--ink-soft); }

/* Callout / note */
.note {
  background: #fdf6e9;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-2) var(--s-3);
  font-size: 0.95rem;
  color: #6b512a;
}
.note strong { color: #4d3a1c; }

/* Pills / tags */
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.pills li {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  color: var(--navy-800);
  margin: 0;
}

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto var(--s-4); }

/* --------------------------------------------------------------------------
   7. Page-specific
   -------------------------------------------------------------------------- */

/* Resume — timeline */
.resume-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--s-5);
}

.timeline { position: relative; padding-left: var(--s-4); }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--line);
}

.job { position: relative; margin-bottom: var(--s-5); }
.job:last-child { margin-bottom: 0; }
.job::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-4) + 1px);
  top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--line);
}

.job-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
.job h3 { margin: 0; }
.job-dates {
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.job-org {
  color: var(--accent-dk);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.job ul { color: var(--ink-soft); font-size: 0.97rem; }

/* Services */
.service-list { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
.service h3 { display: flex; align-items: baseline; gap: 0.6rem; }
.service h3 .num {
  font-size: 0.8rem;
  color: var(--accent-dk);   /* small text — needs the darker weight */
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.service ul { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.6rem; margin-bottom: 0; }

/* FAQ — <details>/<summary>, works without JavaScript */
.faq { border-top: 1px solid var(--line); }

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  padding: var(--s-3) 2.5rem var(--s-3) 0;
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-900);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }

.faq summary:hover { color: var(--navy-600); }

.faq .faq-body {
  padding: 0 2.5rem var(--s-3) 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.faq-group-title {
  margin-top: var(--s-5);
  margin-bottom: var(--s-1);
  padding-bottom: 0.5rem;
}
.faq-group-title:first-of-type { margin-top: 0; }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,0.72);
  padding: var(--s-5) var(--s-3) var(--s-3);
  font-size: 0.92rem;
}

.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-4);
}

.site-footer h3 {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.site-footer a:hover { color: var(--accent-lt); text-decoration: underline; }

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }

.footer-bottom {
  max-width: var(--maxw);
  margin: var(--s-4) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}

/* Photo credit. NOT IN USE since 2026-10: the hero no longer uses the CC BY
   2.0 photograph ("Silicon Mountain" by Sheila Sund), so its credit line was
   taken out of the six footers. If that photo ever comes back, its credit
   must come back too: it is a licence condition. */
.photo-credit {
  max-width: var(--maxw);
  margin: var(--s-2) auto 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.50);
}
.photo-credit a { color: rgba(255,255,255,0.6); text-decoration: underline; }
.photo-credit a:hover { color: var(--accent-lt); }

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .media { grid-template-columns: 1fr; gap: var(--s-4); }
  .portrait-frame { max-width: 320px; margin: 0 auto; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: var(--s-2);
  }
  .site-nav.is-open { display: block; }

  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    padding: 0.85rem 0.75rem;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .site-nav li:last-child a { border-bottom: 0; }
  .site-nav a[aria-current="page"] {
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    border-bottom-color: var(--line);
  }

  .header-inner { position: relative; min-height: 68px; }

  .hero { padding: var(--s-6) var(--s-3) 0; }
  .hero-inner { padding-bottom: var(--s-4); }
  .section { padding: var(--s-5) var(--s-3); }

  .grid--2, .grid--3, .grid--4, .service-list { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer-grid { grid-template-columns: 1fr; }
  .facts div { flex-direction: column; gap: 0.15rem; }
  .facts dt { flex: none; }
  .hero-actions .btn { width: 100%; max-width: 320px; }
}

@media (max-width: 420px) {
  .brand-sub { display: none; }
}

/* --------------------------------------------------------------------------
   10. Accessibility helpers
   (Groundwork now — see docs/ACCESSIBILITY-AND-FUTURE-IDEAS.txt for the
    full ADA/WCAG pass we plan to do later.)
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.hero a:focus-visible,
.site-footer a:focus-visible,
.section--navy a:focus-visible {
  outline-color: var(--accent-lt);
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Print — makes the Resume page print/save-to-PDF cleanly
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .page-hero, .resume-actions, .note, .skip-link { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .section { padding: 0; }
  .job { page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}