/* =========================================================
   ePortfolio — crimson & white
   Shared stylesheet for all pages
   ========================================================= */

:root {
  --crimson:      #9E1B32;
  --crimson-deep: #5C0F1E;
  --crimson-lift: #C3273F;
  --white:        #FFFFFF;
  --paper:        #FBF8F8;
  --ink:          #221A1C;
  --ink-soft:     #5E5257;
  --rule:         #E6DADC;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;
  --label:   "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --measure: 66ch;
  --shell:   1140px;
  --pad:     clamp(1.25rem, 5vw, 3.5rem);
}

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

/* scroll-padding keeps anchor targets clear of the sticky masthead */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--crimson); text-underline-offset: 0.22em; }
a:hover { color: var(--crimson-deep); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--crimson);
  color: var(--white);
  padding: 0.75rem 1rem;
  z-index: 100;
  font-family: var(--label);
  font-size: 0.8rem;
}
.skip:focus { left: 0; }

/* ---------- shell ---------- */

.shell {
  width: min(100% - (var(--pad) * 2), var(--shell));
  margin-inline: auto;
}

/* ---------- masthead / nav ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding-block: 0.9rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.wordmark span { color: var(--crimson); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav a:hover { color: var(--crimson); border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { color: var(--crimson); border-bottom-color: var(--crimson); }

/* ---------- margin rule (the annotation rail) ---------- */

.rail {
  display: none;
}
/* Only shown once the margin outside .shell is genuinely wide enough to hold a
   label. The rail is anchored by its RIGHT edge and lays out in reverse, so the
   tick sits nearest the content and labels expand outward into empty margin —
   anchoring from the left made active labels overlap the page text. */
@media (min-width: 1480px) {
  .rail {
    display: block;
    position: fixed;
    right: calc(50% + (var(--shell) / 2) + 1.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
  }
  .rail ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
    justify-items: end;
  }
  .rail a {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--ink-soft);
  }
  .rail .tick {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--rule);
    transition: width 0.25s ease, background-color 0.25s ease;
  }
  .rail .name {
    font-family: var(--label);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: right;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
  }
  .rail a:hover .name,
  .rail a.is-active .name { opacity: 1; transform: none; }
  .rail a:hover .tick { background: var(--crimson-lift); }
  .rail a.is-active .tick { width: 34px; background: var(--crimson); }
  .rail a.is-active .name { color: var(--crimson); }
}
@media (prefers-reduced-motion: reduce) {
  .rail .tick, .rail .name { transition: none; }
}

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 1rem;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }

p { max-width: var(--measure); }
.lede { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); }

.note { color: var(--ink-soft); font-size: 0.95rem; }

h3.sub {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 2.75rem 0 0.75rem;
}

/* screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}

.hero__name {
  font-size: clamp(2.9rem, 1rem + 10vw, 7.5rem);
  line-height: 0.92;
  margin: 0 0 1.25rem;
  letter-spacing: -0.035em;
}
.hero__name .rule {
  display: block;
  width: 4.5rem;
  height: 6px;
  background: var(--crimson);
  margin-top: 1.5rem;
}

.hero__role {
  font-family: var(--label);
  font-size: clamp(0.78rem, 0.7rem + 0.3vw, 0.92rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 2rem;
  max-width: none;
}

.hero__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  /* top-aligned: the aside now leads with a portrait and is taller than the
     name column, so bottom-aligning would strand the heading mid-page */
  .hero__grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

/* secondary pages use a smaller display size than the home page */
.hero__name--sub { font-size: clamp(2.4rem, 1rem + 6vw, 4.75rem); }

.hero__aside {
  border-left: 2px solid var(--crimson);
  padding-left: 1.25rem;
}

/* Explicit height rather than aspect-ratio: the source is an extremely tall
   portrait, and object-fit needs a definite box to crop against. */
.portrait {
  width: 100%;
  max-width: 22rem;
  height: clamp(19rem, 32vw, 26rem);
  object-fit: cover;
  object-position: 50% 20%;
  margin-bottom: 1.75rem;
  background: var(--paper);
}
.hero__aside dl { margin: 0; display: grid; gap: 1rem; }
.hero__aside dt {
  font-family: var(--label);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__aside dd { margin: 0.15rem 0 0; font-weight: 500; }

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.btn {
  display: inline-block;
  font-family: var(--label);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  text-decoration: none;
  border: 2px solid var(--crimson);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn--solid { background: var(--crimson); color: var(--white); }
.btn--solid:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); color: var(--white); }
.btn--line { background: transparent; color: var(--crimson); }
.btn--line:hover { background: var(--crimson); color: var(--white); }

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

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--rule); }
.section--paper { background: var(--paper); }

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
/* Grid items default to min-width:auto and refuse to shrink below their content's
   min-content width — which lets a wide child (the coursework table) push the
   whole page into horizontal scroll. */
.split > *,
.hero__grid > * { min-width: 0; }

@media (min-width: 880px) {
  .split { grid-template-columns: 20rem 1fr; }
}

/* ---------- competency register (signature block) ---------- */

.register { display: grid; gap: 0; margin-top: 0.5rem; }

.register__item {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--rule);
  transition: background-color 0.2s ease;
}
.register__item:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) {
  .register__item { grid-template-columns: 11rem 1fr; }
  .register__item:hover { background: rgba(158, 27, 50, 0.035); }
}

.register__tag {
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--crimson);
  padding-top: 0.3rem;
}
.register__item p { margin: 0.25rem 0 0; color: var(--ink-soft); max-width: 60ch; }

/* ---------- cards ---------- */

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--crimson);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card a { text-decoration: none; }
.card a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -18px rgba(92, 15, 30, 0.7); }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.card__more {
  margin-top: auto;
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  padding-top: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .card, .card:hover { transform: none; transition: none; }
}

/* ---------- pull quote ---------- */

.pull {
  border-left: 4px solid var(--crimson);
  padding: 0.35rem 0 0.35rem 1.5rem;
  margin: 2.5rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 40ch;
}

/* ---------- artifact entries (COM Highlights) ---------- */

.artifact {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.artifact:last-of-type { border-bottom: 1px solid var(--rule); }
.artifact h3 {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 1.75rem 0 0.4rem;
}
.artifact h3:first-child { margin-top: 0; }
.artifact__tag {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- figure + caption ---------- */

.figure { margin: 0; }
.figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--white);
}
.figure figcaption {
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 60ch;
}

/* Text version of the chart above — carries the same content for screen readers
   and for anyone who can't make out the small labels in the image. */
.pathways {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.pathways li {
  border-top: 1px solid var(--rule);
  padding-block: 0.8rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.pathways li:last-child { border-bottom: 1px solid var(--rule); }
.pathways strong {
  display: block;
  color: var(--ink);
  font-family: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.15rem;
}

/* ---------- unfilled placeholder (delete the span once written) ---------- */

.fill {
  background: #FFF3F5;
  border-bottom: 2px dashed var(--crimson-lift);
  color: var(--crimson-deep);
  font-family: var(--label);
  font-size: 0.85em;
  padding: 0.1em 0.3em;
}
.fill::before { content: "\251C\2500 "; opacity: 0.6; }

/* ---------- coursework table ---------- */

.table-wrap { overflow-x: auto; max-width: 100%; margin-top: 0.5rem; }

.grid {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92rem;
}
.grid th, .grid td {
  text-align: left;
  padding: 0.65rem 0.9rem 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.grid thead th {
  font-family: var(--label);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  border-bottom-width: 2px;
}
.grid tbody th { font-family: var(--label); font-weight: 500; white-space: nowrap; }
.grid tbody td { color: var(--ink-soft); }
.grid tbody tr:hover { background: rgba(158, 27, 50, 0.035); }

/* ---------- resume viewer ---------- */

.viewer {
  margin-top: 2rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: 0 18px 40px -34px rgba(34, 26, 28, 0.9);
}
/* The fixed height applies only where an inline PDF actually renders. On narrow
   screens the browser falls back to the typed resume, which must size to its
   own content instead of being clipped to a viewport-height box. */
.viewer__frame {
  width: 100%;
  height: auto;
  border: 0;
  display: block;
  background: var(--paper);
  overflow: auto;
}
@media (min-width: 900px) {
  .viewer__frame { height: min(85vh, 1100px); min-height: 520px; }
  .viewer__frame.is-fallback { height: auto; min-height: 0; }
}
.viewer__fallback { padding: clamp(1.5rem, 4vw, 3rem); }

/* Typed résumé fallback / mobile-friendly version */
.resume-doc { max-width: 52rem; }
.resume-doc h3 {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin: 2.25rem 0 1rem;
}
.resume-doc h3:first-of-type { margin-top: 0; }
.entry { margin-bottom: 1.4rem; }
.entry__head { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; justify-content: space-between; align-items: baseline; }
.entry__title { font-weight: 700; }
.entry__meta { font-family: var(--label); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.05em; }
.entry ul { margin: 0.5rem 0 0; padding-left: 1.15rem; }
.entry li { margin-bottom: 0.3rem; color: var(--ink-soft); }

/* ---------- timeline / list ---------- */

.stack { display: grid; gap: 1.25rem; margin-top: 2rem; padding: 0; list-style: none; }
.stack li {
  border-left: 2px solid var(--rule);
  padding: 0.15rem 0 0.15rem 1.25rem;
}
.stack li strong { display: block; font-family: var(--body); }
.stack li span { color: var(--ink-soft); font-size: 0.95rem; }

.stack__status {
  display: inline-block;
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  margin-left: 0.6rem;
  vertical-align: 0.12em;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-weight: 400;
}
.stack__status.is-done { border-color: var(--crimson); color: var(--white); background: var(--crimson); }
.stack__status.is-active { border-color: var(--crimson); color: var(--crimson); }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

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

.footer {
  background: var(--crimson-deep);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  margin-top: 0;
}
.footer a { color: var(--white); }
.footer__inner { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 1fr auto; align-items: end; } }
.footer__name { font-family: var(--display); font-size: 1.5rem; color: var(--white); margin: 0 0 0.35rem; }
.footer p { max-width: 48ch; margin: 0; font-size: 0.92rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer ul a {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer ul a:hover { text-decoration: underline; }
.footer__fine { margin-top: 2rem; font-size: 0.78rem; color: rgba(255,255,255,0.55); font-family: var(--label); }