/* ==========================================================================
   andrewemory.com — layout

   Colour tokens live in palette.css, which also binds them to Bootstrap's
   --bs-* custom properties. This file only arranges things and styles the
   few elements Bootstrap has no opinion about.

   All styling is in a file rather than inline because the CSP sets
   style-src 'self' -- an inline <style> block or style="" attribute would be
   blocked outright. Loaded as a separate <link> from the HTML rather than
   @import-ed, so the stylesheets fetch in parallel instead of serially.
   ========================================================================== */

html { color-scheme: dark; }

body {
  /* System font stack: no webfont request, so no third-party origin and
     nothing extra to allow in the CSP. Overrides Bootstrap's own stack,
     which is near-identical but pulls in emoji fallbacks we don't need. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Narrower than Bootstrap's default container: long measure hurts reading,
   and this is a page of prose and lists, not a dashboard. */
.container { max-width: 46rem; }

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

.site-head {
  padding: 5rem 0 2.5rem;
  border-bottom: 1px solid var(--ink-border);
  margin-bottom: 2.5rem;
}

h1 {
  margin: 0 0 .6rem;
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 650;
  letter-spacing: -.025em;
  color: var(--ink-heading);
}

.tagline {
  max-width: 34rem;
  margin: 0 0 1.1rem;
  font-size: 1.0625rem;
  color: var(--ink-body);
}

.links { margin: 0; }
.links a { color: var(--accent-text); font-weight: 500; }

/* --- sections --------------------------------------------------------- */

section { margin-bottom: 3rem; }

h2 {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
}

/* --- experience ------------------------------------------------------- */

.role { margin-bottom: 2.25rem; }
.role:last-child { margin-bottom: 0; }

/* Role and dates on one line at comfortable widths, stacking on narrow
   screens rather than cramping or overflowing. */
.role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
}

.role-head h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-heading);
}

/* The parenthetical is the real scope of the job; the title understates it,
   so it stays visible but subordinate. */
.role-paren {
  font-weight: 400;
  color: var(--ink-body);
}

.dates {
  margin: 0;
  font-size: .875rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.org {
  margin: .15rem 0 .8rem;
  font-size: .9375rem;
  color: var(--accent-2);
}

ul { margin: 0; padding-left: 1.1rem; }
li { margin-bottom: .4rem; }
li:last-child { margin-bottom: 0; }

/* --- skills ----------------------------------------------------------- */

.skill-head {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-body);
  margin: 0 0 .6rem;
}
.skill-head + .chips { margin-bottom: 1.5rem; }
.chips + .skill-head { margin-top: 0; }

.chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.chips li {
  margin: 0;
  padding: .25rem .6rem;
  font-size: .8125rem;
  background: var(--ink-bg-raised);
  border: 1px solid var(--ink-border-sub);
  border-radius: 1rem;
  color: var(--ink-body);
}

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

footer {
  padding: 2rem 0 4rem;
  border-top: 1px solid var(--ink-border);
  color: var(--ink-muted);
  font-size: .875rem;
}
footer p { margin: 0; }

/* --- focus ------------------------------------------------------------ */

a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- landing page ----------------------------------------------------- */

/* The landing page is short, so it gets more breathing room above the fold
   than the résumé, which needs to start higher to show content. */
.landing .site-head { padding-top: 8rem; }

.nav-cards {
  display: grid;
  gap: .75rem;
  /* Single column on phones, two across once there is room. auto-fit rather
     than a fixed count so adding a third card needs no CSS change. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-bottom: 3rem;
}

.nav-card {
  display: block;
  padding: 1.1rem 1.25rem;
  background: var(--ink-bg-raised);
  border: 1px solid var(--ink-border-sub);
  border-radius: .5rem;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.nav-card:hover {
  background: var(--ink-bg-raised-2);
  border-color: var(--ink-border);
}
.nav-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.nav-card-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-heading);
  margin-bottom: .15rem;
}
.nav-card-sub {
  display: block;
  font-size: .875rem;
  color: var(--ink-muted);
}

/* --- breadcrumb (résumé page) ----------------------------------------- */

.crumb { padding-top: 2.5rem; }
.crumb a {
  font-size: .875rem;
  color: var(--ink-muted);
  text-decoration: none;
}
.crumb a:hover { color: var(--accent-text); }

/* The résumé page has the crumb above it, so it needs less padding of
   its own than the landing page. */
.crumb + .site-head { padding-top: 1.5rem; }