/* ==========================================================================
   javierpontongonzalez.com — /cv/, /projects/<id>/ and 404.
   The same document system as the home page: paper ground, indigo ink, one
   sienna accent, Archivo plus JetBrains Mono. No cards, no gradients, no
   glows, no serif. Hierarchy comes from type, hairline rules and space.

   Every colour, size, space and rule weight below comes from tokens.css,
   which the generator links ahead of this file. Nothing here is a literal.
   ========================================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img, svg { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
ul, ol { margin: 0; padding: 0; list-style: none }
h1, h2, h3, h4, p { margin: 0 }
h1, h2, h3, h4 { font-weight: 600; color: var(--ink); letter-spacing: -.025em; line-height: 1.1 }
button { font: inherit }
::selection { background: var(--accent); color: var(--paper) }

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

/* Decoration from the retired dark system. Nothing to restyle, only remove. */
.grain,
.graticule,
.bloom,
.spec__dots { display: none }

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 70;
  padding: 10px 16px;
  border: var(--rule-w) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-ui);
  transform: translateY(-180%);
  transition: transform .2s;
}
.skip:focus { transform: none }

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

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

.section { padding-block: var(--sec-y); border-top: var(--rule-w) solid var(--rule) }
.section--flush { border-top: 0 }

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper-veil);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--rule-w) solid var(--rule);
}

.masthead__inner { display: flex; align-items: center; gap: 24px; min-height: 60px }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.mark__glyph {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--rule-w) solid var(--rule-2);
  border-radius: var(--radius-round);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: .04em;
}

.mark__sub { font-weight: 400; color: var(--ink-4) }

.nav {
  display: flex;
  align-items: center;
  gap: var(--gap-nav);
  margin-inline-start: auto;
  font-size: var(--text-ui);
}
.nav a { color: var(--ink-3); transition: color .15s }
.nav a:hover { color: var(--ink) }
.nav a[aria-current='page'] { color: var(--accent); font-weight: 500 }

/* ----------------------------------------------------------------- atoms -- */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: var(--rule-w) solid var(--ink);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-action);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent) }

.btn--signal { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.btn--signal:hover { background: var(--accent); border-color: var(--accent); color: var(--paper) }

.btn--sm { padding: 7px 13px; font-size: var(--text-code) }

.btn__arrow { transition: transform .2s }
.btn:hover .btn__arrow { transform: translateX(3px) }

.link { color: var(--ink); border-bottom: var(--rule-w) solid var(--rule-2); transition: color .15s, border-color .15s }
.link:hover { color: var(--accent); border-bottom-color: var(--accent) }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border: var(--rule-w) solid var(--rule-2);
  border-radius: var(--radius);
  background: none;
  font-family: var(--mono);
  font-size: var(--text-label);
  line-height: 1.45;
  color: var(--ink-4);
  transition: color .15s, border-color .15s;
}
.tag:hover { border-color: var(--accent); color: var(--accent) }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border: var(--rule-w) solid var(--rule-2);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.badge--live { border-color: var(--accent); color: var(--accent) }

.product__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px }

.avatar {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex: none;
  border: var(--rule-w) solid var(--rule-2);
}
.avatar--lg { width: 104px; height: 104px }

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

.head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: var(--gap-block);
}

.head__index { font-family: var(--mono); font-size: var(--text-label); letter-spacing: .16em; color: var(--ink-5) }
.head__body { display: grid; gap: 10px }
.head__title { font-size: var(--step-3); letter-spacing: -.03em; max-width: 20ch }
.head__note { max-width: 62ch; color: var(--ink-3); font-size: var(--text-prose) }
.head__rule { grid-column: 1 / -1; height: var(--rule-w); background: var(--rule-2); margin-top: 14px }

/* --------------------------------------------------------------- 404 page -- */

/* min-height so the footer of a very short page sits low, not mid-screen. */
.hero { padding-block: var(--hero-y) var(--sec-y-sm); min-height: 60vh }
.hero .eyebrow { display: block; margin-bottom: 16px }

.hero__title { margin-top: 0; font-size: var(--step-5); line-height: 1.02; letter-spacing: -.035em; max-width: 14ch }
.hero__title em { font-style: normal; color: var(--ink-4) }

/* --------------------------------------------------------------- cv page -- */

.doc { padding-block: var(--sec-y-sm) }

.doc__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-bottom: 18px;
  margin-bottom: var(--gap-block);
  border-bottom: var(--rule-w) solid var(--rule-2);
}
.doc__toolbar .eyebrow { margin-inline-end: auto }

.doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap-row) var(--gap-columns);
  padding-bottom: var(--gap-block);
  border-bottom: var(--rule-w) solid var(--rule);
}

.doc__head > div { flex: 1 1 22rem }
.doc__head h1 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -.035em }

.doc__headline {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--text-meta);
  letter-spacing: .06em;
  color: var(--ink-4);
}

.doc__contact { margin-top: 14px; color: var(--ink-3); font-size: var(--text-ui); line-height: 1.75 }

.doc section { padding-top: var(--sec-y-sm) }

.doc h2 {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 10px;
  margin-bottom: 24px;
  border-bottom: var(--rule-w) solid var(--rule);
}

.doc__lead { max-width: var(--measure); color: var(--ink-3); font-size: var(--text-prose) }
.doc__lead + .doc__lead { margin-top: 12px }
.doc__lead strong { color: var(--ink); font-weight: 600 }
.doc__intro { margin-bottom: 28px }

.doc__list { display: grid; gap: 10px; max-width: var(--measure) }

.doc__list li { position: relative; padding-left: 18px; color: var(--ink-3); font-size: var(--text-prose) }
.doc__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 7px;
  height: var(--rule-w);
  background: var(--accent);
}
.doc__list strong { color: var(--ink); font-weight: 600 }

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

.skills { display: grid }

.skillgroup {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 8px var(--gap-columns);
  padding-block: 16px;
  border-bottom: var(--rule-w) solid var(--rule);
}
.skillgroup:last-child { border-bottom: 0 }

.skillgroup__name {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

.skillgroup__count { display: block; margin-top: 5px; color: var(--ink-5); letter-spacing: .06em; text-transform: none }
.skillgroup__items { color: var(--ink-3); font-size: var(--text-dense); line-height: 1.6 }

/* ------------------------------------------------------------------ role -- */

.roles { display: grid }

.role {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 12px var(--gap-columns);
  padding-block: var(--gap-block);
  border-top: var(--rule-w) solid var(--rule);
}
.role:first-child { border-top: 0; padding-top: 0 }

.role__meta {
  display: grid;
  gap: 5px;
  align-content: start;
  font-family: var(--mono);
  font-size: var(--text-stamp);
  letter-spacing: .06em;
  color: var(--ink-5);
}

.role__dates { color: var(--ink-4); font-variant-numeric: tabular-nums }

.role__badge {
  justify-self: start;
  padding: 2px 7px;
  border: var(--rule-w) solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: var(--text-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.role__body { display: grid; gap: 12px }

.role__title { font-size: var(--step--1); font-weight: 600; letter-spacing: -.02em; line-height: 1.2 }
.role__title span { color: var(--ink-4); font-weight: 400 }

.role__context { color: var(--ink-3); font-size: var(--text-prose) }

.role__points { display: grid; gap: 10px; max-width: var(--measure) }
.role__points li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-3);
  font-size: var(--text-prose);
  line-height: 1.65;
}
.role__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 7px;
  height: var(--rule-w);
  background: var(--accent);
}
.role__points b { color: var(--ink); font-weight: 600 }

.role__tech {
  font-family: var(--mono);
  font-size: var(--text-label);
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--ink-4);
}

/* ------------------------------------------------------------- case page -- */

.case__hero { padding-block: var(--hero-y) var(--sec-y-sm) }

.case__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-5);
}
.case__crumbs a { color: var(--ink-4); transition: color .15s }
.case__crumbs a:hover { color: var(--accent) }

.case__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-columns);
  align-items: start;
}

@media (min-width: 900px) {
  .case__grid { grid-template-columns: minmax(0, 1fr) 20rem }
}

.case__ident { display: flex; align-items: center; gap: 14px; margin-bottom: 14px }
.case__ident img,
.case__ident span {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  border: var(--rule-w) solid var(--rule-2);
  object-fit: cover;
  flex: none;
}

.case__title { font-size: var(--step-5); line-height: 1.02; letter-spacing: -.035em }

.hero__lede { max-width: 46ch; margin-top: 16px; color: var(--ink-2); font-size: var(--text-intro); line-height: 1.55 }
.hero__lede strong { color: var(--ink); font-weight: 600 }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }

.case__prose { display: grid; gap: 14px; max-width: var(--measure) }
.case__prose p { color: var(--ink-3); font-size: var(--text-prose); line-height: 1.7 }

.case__section-title {
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--rule-w) solid var(--rule);
  font-size: var(--step-0);
  letter-spacing: -.025em;
}
.case__prose > .case__section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0 }

/* -------------------------------------------- spec panel, now a rule list -- */

.spec { border: 0; border-top: var(--rule-w) solid var(--rule-2); border-radius: 0; background: none; box-shadow: none }
.spec::before { display: none }

.spec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 10px;
  border-bottom: var(--rule-w) solid var(--rule);
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-5);
}

.spec__rows { display: grid }

.spec__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 4px 14px;
  padding: 10px 0;
  border-bottom: var(--rule-w) solid var(--rule);
  font-size: var(--text-dense);
}
.spec--stacked .spec__row { grid-template-columns: minmax(0, 1fr) }

.spec__key {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-5);
  padding-top: 3px;
}

.spec__val { color: var(--ink); line-height: 1.45; font-variant-numeric: tabular-nums }
.spec__val a { color: var(--ink); border-bottom: var(--rule-w) solid var(--rule-2); transition: color .15s, border-color .15s }
.spec__val a:hover { color: var(--accent); border-bottom-color: var(--accent) }
.spec__note { color: var(--ink-4); font-size: var(--text-code) }

.spec__foot {
  padding: 12px 0 0;
  border-top: 0;
  background: none;
  font-family: var(--mono);
  font-size: var(--text-label);
  color: var(--ink-5);
}

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

.foot { border-top: var(--rule-w) solid var(--rule); padding-block: 22px; font-size: var(--text-code); color: var(--ink-4) }

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.foot__links { display: flex; flex-wrap: wrap; gap: 18px }
.foot a { transition: color .15s }
.foot a:hover { color: var(--ink) }

/* --------------------------------------------------------------- reveals -- */

[data-reveal] { opacity: 1 }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none }

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

@media (max-width: 62rem) {
  .role,
  .skillgroup { grid-template-columns: minmax(0, 1fr) }

  .role__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px }
}

@media (max-width: 46rem) {
  .masthead__inner { flex-wrap: wrap; gap: 10px; min-height: 0; padding-top: 10px }

  .nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    gap: 16px;
    padding-block: 8px;
    border-top: var(--rule-w) solid var(--rule);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar { display: none }
  .mark__sub { display: none }
  .spec__row { grid-template-columns: minmax(0, 1fr) }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { animation: none !important; transition: none !important }
  .js [data-reveal] { opacity: 1; transform: none }
}

/* ----------------------------------------------------------------- print -- */

/* The print palette itself lives in tokens.css, so this block only has to
   deal with what belongs on paper and what does not. */

@media print {
  html,
  body { background: var(--paper); color: var(--ink); font-size: 10.5pt }

  .masthead,
  .nav,
  .foot,
  .skip,
  .doc__toolbar,
  .btn,
  .hero__actions,
  .case__crumbs,
  [data-print='hide'] { display: none !important }

  .shell { width: 100% }

  .doc { padding-block: 0 }
  .doc section { padding-top: 14pt }

  .section { padding-block: 10pt; border-top: 0; break-inside: avoid }

  .role,
  .skillgroup,
  .spec__row { break-inside: avoid }

  .doc__head { break-after: avoid }
  h1, h2, h3 { break-after: avoid }

  .link,
  .spec__val a { border-bottom: 0 }

  a { color: var(--ink); text-decoration: underline }

  .js [data-reveal] { opacity: 1 !important; transform: none !important }

  @page { margin: 16mm }
}