/* ==========================================================================
   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;
  /* Photograph: "Silicon Mountain" by Sheila Sund, CC BY 2.0 (see footer credit).
     The file has been colour-graded before upload — a graduated ND on the sky
     and, more importantly, a highlight rolloff on the sunlit tower faces, which
     were blown to pure white and were the real obstacle to legible text.

     The overlay gets HEAVIER toward the bottom, which is the opposite of the
     usual instinct: the sky is already graded down, while the brightest pixels
     in the frame are the lit buildings in the lower half.

     The top stop was raised from 0.55 to 0.64 on 2026-08-10: measured against
     the REAL RENDER (not a model), the gold eyebrow near the top of the hero
     was landing at 4.24:1 on wide viewports — under the 4.5 AA threshold.

     HOW TO VERIFY THIS PROPERLY: render the page twice, once normally and once
     with `.hero-inner *{visibility:hidden}`, and read background luminance from
     the text-hidden copy. Sampling the normal render alone is WRONG — the
     anti-aliased edges of the glyphs get counted as background and the numbers
     come out nonsensical (white text appearing to sit on white).
     Measured figures are in docs/ACCESSIBILITY-AND-FUTURE-IDEAS.txt.
     If this photo is ever swapped, re-measure the same way. */
  background-image:
    linear-gradient(
      rgba(8, 20, 35, 0.64) 0%,
      rgba(8, 20, 35, 0.70) 50%,
      rgba(8, 20, 35, 0.76) 100%),
    url("../images/hero-denver-rockies.jpg");
  background-size: cover;
  background-position: center 58%;
  color: #fff;
  padding: var(--s-7) var(--s-3);
  text-align: center;
}

.hero-inner { max-width: 820px; margin: 0 auto; }

.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. The hero image is CC BY 2.0, which REQUIRES attribution —
   this line is a licence condition, not decoration. If the hero photo is
   ever replaced with one that needs no credit, remove it then and not before. */
.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; }
}

/* Phones and small tablets get a 1100px-wide copy of the hero photo
   (55KB instead of 153KB). Same grading, same overlay, same contrast. */
@media (max-width: 800px) {
  .hero {
    background-image:
      linear-gradient(
        rgba(8, 20, 35, 0.64) 0%,
        rgba(8, 20, 35, 0.70) 50%,
        rgba(8, 20, 35, 0.76) 100%),
      url("../images/hero-denver-rockies-small.jpg");
  }
}

@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); }
  .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; }
}