/* Nav, hero type, stack list, tabs, work bands, placeholders, contact. */

/* ── Nav ───────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 13, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 64px;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav-mark {
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.nav-list { display: none; gap: var(--space-4); }

.nav-list a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: var(--space-2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav-list a:hover,
.nav-list a.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-height: 44px;
  padding-inline: var(--space-2);
}

.nav-mobile {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--gutter) var(--space-4);
}

.nav-mobile a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  padding-block: var(--space-2);
  min-height: 44px;
}

@media (min-width: 768px) {
  .nav-list { display: flex; }
  .nav-toggle, .nav-mobile { display: none; }
}

/* ── Hero type ─────────────────────────────────────────────────── */

.hero-title { display: flex; flex-direction: column; gap: var(--space-3); }

.hero-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-hero-name);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* Two block spans instead of a <br>: the line still breaks, but the
   accessible name reads "Ronaldo Dalzochio" rather than one fused word. */
.hero-name > span { display: block; }

.hero-role {
  font-family: var(--font-mono);
  font-size: var(--size-hero-role);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-pitch {
  margin-top: var(--space-4);
  max-width: 34ch;
  font-size: var(--size-body-lg);
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease);
}

.btn-solid:hover { background: var(--accent-hover); }

.btn-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--text-muted);
  transition: border-color var(--dur) var(--ease);
}

.btn-text:hover { border-bottom-color: var(--accent); }

/* ── About ─────────────────────────────────────────────────────── */

.about-copy p + p { margin-top: var(--space-4); }

.about-copy p {
  font-size: var(--size-body-lg);
  max-width: 60ch;
}

.about-facts { display: grid; gap: var(--space-4); align-content: start; }

.about-facts dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-1);
}

.about-facts dd { color: var(--text); line-height: 1.5; }

/* Second line of a fact — employer and dates under the job title. Muted and
   mono so the title stays the thing you read first. */
.fact-sub {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ── Stack & Specialties ────────────────────────────────────────────
   Two typographic columns — names only, not a card grid. Single column
   on small screens, two side by side from 700px up. */

.stack-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 700px) {
  .stack-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

.stack-col-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}

/* Whole name is the click target — same typographic weight as before,
   now with the site's hover language: amber shift, no boxes, no rules. */
.stack-toggle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding-block: var(--space-3);
}

.stack-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  font-weight: 700;
  transition: color var(--dur) var(--ease);
}

.stack-toggle:hover .stack-name { color: var(--accent); }

/* Amber +/– marker, driven purely by aria-expanded — no JS text swap. */
.stack-marker {
  flex: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.stack-marker::before { content: "+"; }
.stack-toggle:hover .stack-marker { color: var(--accent); }
.stack-toggle[aria-expanded="true"] .stack-marker {
  color: var(--accent);
  transform: rotate(45deg);
}

/* Inline description — plain muted text, animated open via grid rows.
   No background, no border: it reads as a line of copy, not a card. */
.stack-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: 0;
}

.stack-detail > span {
  overflow: hidden;
  min-height: 0;
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  line-height: 1.6;
  color: var(--text-muted);
}

.stack-toggle[aria-expanded="true"] + .stack-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: var(--space-3);
}

/* ── Tabs ──────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: baseline;
  border-bottom: 1px solid var(--border);
}

.tab {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--text-muted);
  min-height: 44px;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tab:hover { color: var(--text); }

.tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.tab-count {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  vertical-align: super;
  margin-left: var(--space-1);
  color: var(--text-faint);
}

.tab[aria-selected="true"] .tab-count { color: var(--accent); }

/* Sits directly under the tab bar, where a visitor first notices there are
   no repository links. Mono and rule-marked so it reads as a note from the
   author rather than another paragraph of marketing copy. */
.work-note {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent-line);
  max-width: 62ch;
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  line-height: 1.7;
  color: var(--text-faint);
}

.work-note strong {
  font-weight: 500;
  color: var(--text-muted);
}

.work-note a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  transition: border-color var(--dur) var(--ease);
}

.work-note a:hover { border-bottom-color: var(--accent); }

/* ── Work band ─────────────────────────────────────────────────── */

.work-media { min-width: 0; }

.work-frame { position: relative; }

/* Show each screenshot whole, at its own aspect ratio — no crop.
   A height cap keeps tall/portrait shots from dominating the band;
   width follows the ratio and the image centers in its column. */
.work-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(160px, 30vh, 300px);
  margin-inline: auto;
  border-radius: var(--radius-img);
}

/* The empty-state box still needs a shape to fill before the file exists. */
.work-frame .img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-img);
}

.work-body { min-width: 0; }

/* Number and date sit on one mono line above the title. */
.work-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.work-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* Uppercased here rather than in the data, so "Apr 2026" typed into
   portfolioData.js still renders in the same mono caps as the number. */
.work-date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.work-title {
  font-size: var(--size-work-title);
  margin-top: var(--space-2);
}

.work-description {
  margin-top: var(--space-3);
  color: var(--text-muted);
  max-width: 46ch;
}

/* The flipped-side offset lives in layout.css, inside the 900px query —
   it only applies once the band is genuinely two columns. */

/* Deliberate blank — see portfolioData.js */
.work-description.is-pending {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.work-tags li + li::before {
  content: "|";
  margin-right: var(--space-2);
  color: var(--border);
}

.work-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.work-links a {
  font-size: 0.875rem;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur) var(--ease);
}

.work-links a:hover { color: var(--accent); }

/* ── Image placeholder ─────────────────────────────────────────────
   States the exact path and dimensions the file should have.
   The placeholder is the documentation: drop the real file in and it
   disappears on its own, no code change needed. */

.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  background: var(--surface);
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-img);
  text-align: center;
  padding: var(--space-4);
}

.img-placeholder-path {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  word-break: break-all;
}

.img-placeholder-dim {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
}

/* ── Automation ────────────────────────────────────────────────────
   Reuses the work band's mono vocabulary — amber number, faint caps
   metadata, pipe-separated tags — so the section reads as part of the
   same site rather than a bolted-on appendix. */

/* Same treatment as .work-note: a note in the author's voice, not copy. */
.ops-lead {
  margin-bottom: var(--space-6);
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent-line);
  max-width: 68ch;
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  line-height: 1.7;
  color: var(--text-faint);
}

.ops-aside { min-width: 0; }

.ops-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

/* Matches .work-number exactly — the numbering language is shared. */
.ops-number {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.ops-lang {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The filename is the artefact, so it gets to look like one. break-all
   because these run long and the rail is narrow on a phone. */
.ops-file {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  color: var(--text-muted);
  word-break: break-all;
}

.ops-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ops-tags li + li::before {
  content: "|";
  margin-right: var(--space-2);
  color: var(--border);
}

.ops-body { min-width: 0; }

/* Deliberately smaller than --size-work-title: the projects stay the
   headline act and these stay the supporting evidence. */
.ops-title {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700;
}

.ops-summary {
  margin-top: var(--space-3);
  color: var(--text-muted);
  max-width: 62ch;
}

.ops-points {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  max-width: 66ch;
}

/* Hanging amber bullet. The reset already removed list-style, so the
   marker is drawn here and the text indents to clear it. */
.ops-points li {
  position: relative;
  padding-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  line-height: 1.7;
  color: var(--text-muted);
}

.ops-points li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ── Contact ───────────────────────────────────────────────────── */

.contact-email {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: break-word;
  border-bottom: 2px solid var(--border);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.contact-email:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
}

.contact-links a {
  color: var(--text-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur) var(--ease);
}

.contact-links a:hover { color: var(--accent); }

.contact-note {
  margin-top: var(--space-5);
  max-width: 56ch;
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  line-height: 1.7;
  color: var(--text-faint);
}