/* ============================================================
   layout.css — nav and every section below the hero.
   The hero/ripple scaffold lives in ripple/ripple.css instead;
   nothing in here is specific to that animation.
   ============================================================ */

/* ------------------------------------------------------------
   NAV — always present, cold or warm; only its colors (via the
   --paper/--ink tokens) shift when the ripple fires
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem var(--gutter);
  font-size: var(--step--1);
  letter-spacing: .06em;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav__mark { font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.nav__mark span { color: var(--gold); }

.nav__links { display: flex; gap: clamp(.75rem, 2.5vw, 1.75rem); }
.nav__links a {
  text-decoration: none;
  color: var(--ink-2);
  text-transform: uppercase;
  transition: color .25s ease;
}
.nav__links a:hover { color: var(--gold); }

/* ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------ */
.page { position: relative; z-index: 1; background: var(--paper); }

.band { padding-block: var(--section); }
.band--intro { padding-block: clamp(3.5rem, 8vw, 6rem); }

.band__title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--step-2);
  font-weight: var(--title-weight, 700);
  letter-spacing: -.02em;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.band__num {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.lede {
  font-size: var(--step-2);
  line-height: 1.35;
  letter-spacing: -.015em;
  max-width: 22ch;
  font-weight: 500;
}
@media (min-width: 700px) { .lede { max-width: 26ch; } }

/* --- work cards --- */
.cards { display: grid; gap: clamp(1rem, 2vw, 1.25rem); }

.card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--card-radius, 14px);
  background: var(--card-bg, transparent);
  transition: border-color .4s ease, transform .5s var(--ease-out),
              background-color .4s ease, box-shadow .5s var(--ease-out);
}
.card:hover {
  border-color: var(--gold-soft);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px -28px rgba(90, 60, 10, .55);
}

/* a card whose only link should make the whole card clickable —
   the "stretched link" pattern: one real anchor, sized to cover
   the card via ::after, so there's still just one interactive
   element for keyboard/screen readers, not a card-sized click
   trap around a nested one. Only use where a card has exactly
   one link; more than one and the stretch would swallow the rest. */
.card--linked { position: relative; cursor: pointer; }
.card__link--stretched::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.tag {
  display: inline-block;
  padding: .3em .75em;
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-soft);
  background: var(--gold-wash);
  white-space: nowrap;
}

.card__tags { display: flex; flex-wrap: wrap; gap: .5rem; }

.card__period {
  font-size: var(--step--1);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card__title {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.card__org { color: var(--ink-3); margin-top: .2rem; font-size: var(--step-0); }

.card__bullets { margin-top: 1.1rem; display: grid; gap: .5rem; }
.card__bullets li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.55;
}
.card__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .5rem; height: 1px;
  background: var(--gold);
  opacity: .8;
}

/* --- two roles at one employer, stacked inside a single card --- */
.card__roles { margin-top: 1.25rem; display: grid; gap: 1.5rem; }

.role { position: relative; padding-left: 1.1rem; }
.role::before {
  content: "";
  position: absolute;
  left: 0; top: .45em; bottom: .2em;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.role:first-child::before { background: var(--gold-soft); }

.role__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
}
.role__title {
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.role__period {
  font-size: var(--step--1);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.role .card__bullets { margin-top: .6rem; }

.card__stack {
  margin-top: 1.1rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: .02em;
}

.card__links { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--step--1);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: .15rem;
  transition: color .25s ease, border-color .25s ease, gap .25s var(--ease-out);
}
.card__link:hover { color: var(--gold); border-color: var(--gold); gap: .6rem; }

/* --- earlier work, behind a toggle --- */
.archive { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

.archive__toggle {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .7em 1.2em;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: transparent;
  cursor: pointer;
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.archive__toggle:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: var(--gold-wash);
}

/* a small plus that becomes a minus when open */
.archive__mark {
  position: relative;
  width: 11px; height: 11px;
  flex: none;
}
.archive__mark::before,
.archive__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: transform .35s var(--ease-out), opacity .35s ease;
}
.archive__mark::after { transform: translateY(-50%) rotate(90deg); }
.archive__toggle[aria-expanded="true"] .archive__mark::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.archive__count {
  min-width: 1.5em;
  padding: .15em .45em;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: .7rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.archive__list {
  max-height: 0;
  overflow: hidden;
  transition: max-height .6s var(--ease-out);
}
.archive__list > .cards { padding-top: clamp(1rem, 2.5vw, 1.5rem); }

/* the archive is history, so it sits back a step from current work */
.archive__list .card { opacity: .82; }
.archive__list .card:hover { opacity: 1; }

/* --- about --- */
.about { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 860px) {
  .about { grid-template-columns: 1.1fr .9fr; align-items: start; }
}
.about__text {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40ch;
}
/* --- education --- */
.edu {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.edu__school { font-size: var(--step-0); font-weight: 700; letter-spacing: -.01em; }
.edu__degree { color: var(--ink-2); margin-top: .2rem; }
.edu__detail { color: var(--gold); font-size: var(--step--1); margin-top: .35rem; letter-spacing: .02em; }
.edu__extra  { color: var(--ink-3); font-size: var(--step--1); margin-top: .5rem; line-height: 1.5; }

.skills { display: grid; gap: 2rem; }
@media (min-width: 520px) { .skills { grid-template-columns: repeat(2, 1fr); } }
.skills__group {
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.skills__col li { color: var(--ink-2); padding: .22rem 0; font-size: var(--step--1); }

/* --- contact --- */
.band--contact { padding-bottom: clamp(3rem, 7vw, 5rem); }
.contact__line { font-size: var(--step-1); color: var(--ink-2); max-width: 34ch; }
.contact__mail {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: clamp(1.4rem, 5.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -.03em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--gold-soft);
  transition: color .3s ease, border-color .3s ease;
  word-break: break-word;
}
.contact__mail:hover { color: var(--gold); border-color: var(--gold); }

.contact__loc {
  margin-top: 1rem;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact__links { margin-top: 2rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.contact__links a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .25s ease, gap .25s var(--ease-out);
}
.contact__links a:hover { color: var(--gold); gap: .6rem; }

/* --- footer --- */
.foot { border-top: 1px solid var(--line); padding-block: 2rem; }
.foot .u-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.foot__mark { color: var(--gold); }

/* ------------------------------------------------------------
   REVEAL
   ------------------------------------------------------------ */
/* Gated on .js so that if scripting is off — or the observer never
   fires — the content is simply visible rather than invisible. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   REDUCED MOTION — keep the state change, drop the travel.
   The ripple's own reduced-motion rules live in ripple/ripple.css;
   these are the ones scoped to sections below the fold.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .archive__list { transition: none; }
  .card:hover { transform: none; }
}