/* site.css — the site's presentation (PRES.1).
 *
 * Loaded by every published document, before that document's own <style>, so a page can still
 * override a site rule without !important. Everything here is the part that is the same on every
 * page: the base document, and the chrome.
 */

/* ---------------------------------------------------------------- base */

html { scroll-behavior: smooth }
html, body { margin: 0; padding: 0; background: #F4F5F2 }
body { -webkit-font-smoothing: antialiased }

a { color: #16191A; text-decoration: none; border-bottom: 1px solid #C9CEC9 }
a:hover { color: #C6362F; border-bottom-color: #C6362F }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto }
}

/* -------------------------------------------------------------- header */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(244, 245, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #DADEDB;
}

/* The resume's header occupies space in the flow rather than floating over it. */
.site-header--flow { position: sticky; left: auto; right: auto }

.site-bar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 15px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wordmark {
  border-bottom: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #16191A;
  cursor: pointer;
}

.site-nav {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-nav a { border-bottom: none; color: #4C5457 }
.site-nav a:hover { color: #C6362F }

/* The reader's current location — the page itself, or the section it sits within (PRES.3). */
.site-nav a[aria-current] { color: #16191A }

/* -------------------------------------------------------------- footer */

.site-footer {
  position: relative;
  z-index: 10;
  background: #16191A;
  color: #F4F5F2;
  padding: 34px 40px;
}

/* The resume's footer follows content rather than a full-height final panel. */
.site-footer--spaced { margin-top: 56px }

.site-foot {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.site-foot__mark {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

a.site-foot__mark { color: #F4F5F2; border-bottom: none }
a.site-foot__mark:hover { color: #C6362F }

.site-foot__line { font-size: 13px; color: #9AA1A3 }

/* ---------------------------------------------------------- responsive */

/* PRES.4. No !important: with the chrome styled by class alone there is no inline style to outrank. */
@media (max-width: 760px) {
  .site-bar { padding: 13px 22px; gap: 10px 18px }
  .site-nav { gap: 12px 16px; font-size: 10px; letter-spacing: 0.1em }
}