/* ==========================================================================
   alexbeashel.com — "Editorial Rail"
   Single-page résumé site. Navy ink on warm ivory, one clay accent.
   No card, no shadow, no radius. Zero JavaScript.
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  --paper:        #FAF7F2;              /* page background, reversed text on navy */
  --ink:          #1F3A5F;              /* primary text, wordmark, rules, button  */
  --accent:       #B4562F;              /* labels, tagline, hover, footer link    */
  --body:         #3C4A5E;              /* long-form paragraph text               */
  --muted:        #5B6577;              /* contact, meta, locations, footer       */

  --rule-strong:  #1F3A5F;              /* section-label + footer top rules       */
  --rule:         rgba(31, 58, 95, 0.16); /* rail right border                    */
  --rule-soft:    rgba(31, 58, 95, 0.14); /* row dividers, expertise item rules   */
  --rule-faint:   rgba(31, 58, 95, 0.12); /* nav item underlines                  */
  --rule-email:   rgba(31, 58, 95, 0.30); /* underline under the email address    */
  --row-hover:    rgba(180, 86, 47, 0.04);/* experience row hover tint            */

  --hover-t: color 120ms linear, background-color 120ms linear, border-color 120ms linear;
}

/* ---- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, p { margin: 0; }

/* Visible focus ring on every interactive element (keyboard nav). */
a:focus-visible,
.resume-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Page shell ----------------------------------------------------------- */
.page {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
}

/* ---- Region A — identity rail --------------------------------------------- */
/* The right border must run the full page height regardless of rail content,
   so the column stretches and the sticky behaviour lives on the inner wrapper. */
.rail {
  border-right: 1px solid var(--rule);
  align-self: stretch;
}

.rail__inner {
  position: sticky;
  top: 0;
  padding: 64px 28px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.identity { display: flex; flex-direction: column; gap: 12px; }

.wordmark {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
}

.hairline { height: 1px; background: var(--ink); opacity: 0.85; }

.tagline {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.35;
  color: var(--accent);
}

/* Nav */
.rail-nav { display: flex; flex-direction: column; gap: 10px; }

.rail-nav a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-faint);
  transition: var(--hover-t);
}
.rail-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Contact */
.contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.contact a { color: var(--muted); transition: var(--hover-t); }
.contact a:hover { color: var(--accent); }

.contact .contact__email {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-email);
  align-self: flex-start;   /* the rule hugs the text */
}
.contact .contact__email:hover { border-bottom-color: var(--accent); }

/* Download button */
.resume-btn {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 13px 20px;
  transition: var(--hover-t);
}
.resume-btn:hover { background: var(--accent); }

/* ---- Region B — body ------------------------------------------------------ */
.body {
  padding: 64px 64px 72px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Sections sit clear of the top edge when jumped to via the nav. */
.body > section { scroll-margin-top: 24px; }

/* Section label — the page's structural signature, used verbatim everywhere. */
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--rule-strong);
  padding-top: 10px;
}

/* B1 · Profile */
.profile { display: flex; flex-direction: column; gap: 20px; }

.profile__headline {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.profile__lede {
  font-size: 16px;
  line-height: 1.65;
  max-width: 62ch;
  color: var(--body);
  text-wrap: pretty;
}

/* B2 · Selected experience */
.work { display: flex; flex-direction: column; gap: 24px; }

.work__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 28px;
  transition: background-color 120ms linear;
}
.work__row:not(:last-child) {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-soft);
}
.work__row:hover { background: var(--row-hover); }

.work__year {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}

.work__detail { display: flex; flex-direction: column; gap: 8px; }

.work__title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.work__location {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.work__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  max-width: 58ch;
}

/* B3 · Expertise — nine items as a ruled table */
.expertise { display: flex; flex-direction: column; gap: 20px; }

.expertise__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 28px;
  font-size: 14px;
  line-height: 1.4;
}
.expertise__grid > li {
  list-style: none;
  border-top: 1px solid var(--rule-soft);
  padding-top: 10px;
}

/* B4 · Ventures + Education */
.ventures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.ventures__col { display: flex; flex-direction: column; gap: 16px; }

.venture {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}
.venture strong { font-weight: 600; color: var(--ink); }

.education {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.education__qual { display: block; color: var(--ink); font-weight: 600; }

/* B5 · Footer */
.footer {
  border-top: 1px solid var(--rule-strong);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  color: var(--muted);
}
.footer a { color: var(--accent); transition: var(--hover-t); }
.footer a:hover { color: var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* 900–1100px — keep two columns, narrow the rail, tighten the body. */
@media (max-width: 1100px) {
  .page { grid-template-columns: 280px 1fr; }
  .rail__inner { padding: 56px 24px; }
  .body { padding: 48px; }
  .profile__headline { font-size: 38px; }
}

/* < 900px — one column. Rail becomes a normal header block at the top. */
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; }

  .rail {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .rail__inner {
    position: static;
    padding: 32px 24px;
    gap: 28px;
  }

  /* Nav becomes a horizontal wrapping row of the same small-caps links. */
  .rail-nav { flex-direction: row; flex-wrap: wrap; gap: 12px 22px; }
  .rail-nav a { padding-bottom: 6px; }

  .body { padding: 32px 24px; gap: 44px; }

  .profile__headline { font-size: 32px; }

  /* Experience rows: drop the year gutter, year sits above the role title. */
  .work__row { grid-template-columns: 1fr; gap: 8px 0; }
  .work__year { padding-top: 0; }

  .expertise__grid { grid-template-columns: 1fr 1fr; }

  .ventures { grid-template-columns: 1fr; gap: 28px; }

  .footer { flex-direction: column; gap: 8px; }
}

/* Narrow phones — expertise collapses to a single column. */
@media (max-width: 560px) {
  .expertise__grid { grid-template-columns: 1fr; }
}

/* ---- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---- Print — the résumé PDF is the real print artefact -------------------- */
@media print {
  .rail__inner { position: static; }
  .rail { border-right: none; border-bottom: 1px solid var(--rule); }
  .resume-btn { display: none; }
  .rail-nav { display: none; }
  body { background: #fff; }
}