/* ==========================================================================
   Marin Sabo — portfolio · "Swiss poster", gold on dark
   Ink ground, paper text, one gold accent. Huge, tight Archivo headings, Instrument
   Sans for text, JetBrains Mono for metadata only. Square corners, rules
   instead of cards, no shadows or gradients.
   ========================================================================== */

:root {
  --bg: #141210;        /* page: ink */
  --fg: #F3F0E8;        /* text and rules: paper */
  --accent: #FFB54C;    /* the ONE accent: MS Development gold */
  --on-accent: #141210; /* text on gold fills */
  --muted: #B8B0A2;     /* secondary text (≈8:1 on --bg) */
  --body-2: #D6CFC2;    /* body text */
  --line: #3A3630;      /* hairlines, tag borders */
  --surface: #1E1B18;   /* raised bands and image frames */

  /* the 3270 console */
  --term: #0B0A09;
  --term-line: #2A2622;
  --term-dim: #8F887C;
  --term-text: #C9C2B4;
  --term-hi: #F3F0E8;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --container: 1360px;
  --gutter: 20px;
  --section-y: 72px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --t: 180ms;

  color-scheme: dark;
  interpolate-size: allow-keywords;
}

@media (min-width: 640px) {
  :root {
    --gutter: 40px;
  }
}

@media (min-width: 900px) {
  :root {
    --section-y: 120px;
  }
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 900px) {
  body {
    font-size: 19px;
  }
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 900;
  text-wrap: balance;
}

h3 {
  font-size: 1em;
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

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

a {
  color: inherit;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

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

.wrap {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--container);
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead {
  max-width: 34em;
  font-size: 18px;
  line-height: 1.5;
  color: var(--body-2);
}

@media (min-width: 900px) {
  .lead {
    font-size: 21px;
  }
}

.body-text {
  max-width: 34em;
  color: var(--body-2);
}

.mini-head {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 16px 28px;
  border: 2px solid transparent;
  font: 600 17px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn-ink {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.btn-outline {
  background: transparent;
  border-color: var(--fg);
  color: var(--fg);
}

.btn-sm {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
}

.arr {
  display: inline-block;
  transition: transform var(--t) var(--ease);
}

a:hover .arr,
.btn:hover .arr {
  transform: translateX(6px);
}

a:hover .arr-down,
.btn:hover .arr-down {
  transform: translateY(3px);
}

a:hover .arr-back,
.btn:hover .arr-back {
  transform: translateX(-6px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* ---------- Header ---------- */

.site-header .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  width: 12px;
  height: 12px;
  background: var(--accent);
}

.menu-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font: 600 15px/1 var(--font-body);
  cursor: pointer;
}

.nav {
  display: none;
}

.nav a:not(.btn) {
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.nav a:not(.btn):hover {
  text-decoration-line: underline;
}




/* mobile: the nav opens under the header as a plain list */
.site-header.is-open .nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 12px 0 24px;
  background: var(--bg);
  border-top: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
}

.site-header.is-open .nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 18px;
}



@media (min-width: 1000px) {
  .menu-btn {
    display: none;
  }

  .nav,
  .site-header.is-open .nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;
    border: 0;
  }
}

/* ---------- Hero ---------- */

/* the hero fills the first screen: header + hero = 100svh */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 84px);
  min-height: calc(100svh - 84px);
  padding: clamp(24px, 5vh, 72px) 0;
}

@media (min-width: 900px) {
  .hero {
    padding-top: clamp(24px, 5vh, 72px);
  }
}

.pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
}

.dot {
  flex: none;
  margin-top: 0.42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.hero-title {
  max-width: 13em;
  margin-top: clamp(16px, 3vh, 32px);
  /* sized by width AND height, so pill + headline + intro fit one screen */
  font-size: clamp(44px, min(8.2vw, (100vh - 520px) / 2.76), 120px);
  font-size: clamp(44px, min(8.2vw, (100svh - 520px) / 2.76), 120px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.hl {
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}

.hero-photo {
  width: 112px;
  height: 112px;
  object-fit: cover;
  /* already grayscale on the page colour; a CSS filter would shift the background */
}

.lead strong {
  color: var(--fg);
}

.hero-row .lead {
  flex: 1 1 320px;
  max-width: 38em;
}

.hero-foot {
  margin-top: clamp(32px, 8vh, 96px);
}

.hero-foot .actions {
  margin-top: clamp(20px, 3vh, 40px);
}

/* phones: the intro can't fit one screen, so the buttons come first */
@media (max-width: 639px) {
  .hero-foot {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .hero-foot .actions {
    order: -1;
    margin-top: 0;
  }
}

/* wide screens: intro and buttons share one row */
@media (min-width: 1100px) {
  .hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px 48px;
  }

  .hero-foot .actions {
    flex: none;
    margin-top: 0;
  }
}

/* ---------- Sections ---------- */

.section {
  padding: var(--section-y) 0 0;
}

.section > .wrap {
  border-top: 2px solid var(--fg);
  padding-top: 24px;
}

.section-head h2 {
  margin-top: 20px;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.section-head .lead {
  margin-top: 24px;
}

.section-head + * {
  margin-top: 56px;
}

/* ---------- Featured: DartZ ---------- */

.featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

@media (min-width: 1100px) {
  .featured {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }
}

.facts {
  margin-top: 32px;
  border-top: 2px solid var(--fg);
}

.facts > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}

.facts dd {
  font-size: 17px;
}

.featured .mini-head {
  margin-top: 40px;
}

.roles {
  counter-reset: r;
  margin-top: 16px;
}

.roles li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--body-2);
}

.roles li::before {
  content: counter(r, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding-top: 4px;
}

.roles strong {
  color: var(--fg);
}

.caption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted);
}

/* The console: an amber-style 3270 in ink and orange */
.console {
  background: var(--term);
  border: 1px solid var(--line);
  color-scheme: dark;
  min-width: 0;
}

.console-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--term-line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--term-dim);
}

.console-screen {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--term-text);
  white-space: pre;
  min-height: calc(21 * 1.5em + 36px);
  outline: none;
  transition: opacity 120ms var(--ease);
}

.console-screen.is-switching {
  opacity: 0;
  transition-duration: 60ms;
}

@media (min-width: 480px) {
  .console-screen {
    font-size: 12.5px;
  }
}

@media (min-width: 720px) {
  .console-screen {
    font-size: 13.5px;
    padding: 22px 24px;
  }
}

.console-screen .hi {
  color: var(--term-hi);
}

.console-screen .warn,
.console-screen .red {
  color: var(--accent);
}

.console-screen .dim {
  color: var(--term-dim);
}

.console-screen .cursor {
  display: inline-block;
  width: 0.6em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    background: transparent;
  }
}

.console:focus-within {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.pf-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--term-line);
}

@media (min-width: 720px) {
  .pf-keys {
    padding: 14px 24px 18px;
  }
}

.pf-keys button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--term-line);
  background: transparent;
  color: var(--term-hi);
  font: 400 13px/1 var(--font-mono);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.pf-keys button:hover {
  border-color: var(--term-dim);
}

.pf-keys button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.pf-keys button:focus-visible {
  outline: 2px solid var(--term-hi);
  outline-offset: 2px;
}

/* Pipeline */
.pipeline-block {
  margin-top: 88px;
}

.block-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.pipeline-block .body-text {
  margin-top: 16px;
}

.pipeline {
  counter-reset: s;
  display: grid;
  margin-top: 40px;
}

.pipeline li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-content: start;
  gap: 2px 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.pipeline li::before {
  content: counter(s, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding-top: 4px;
}

.pipeline span {
  font-size: 17px;
  line-height: 1.45;
  color: var(--body-2);
}

@media (min-width: 900px) {
  .pipeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 24px;
  }

  .pipeline li {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 16px;
    border-top: 2px solid var(--fg);
  }

  .pipeline li::before {
    grid-row: auto;
    padding: 0;
  }
}

/* ---------- Experience ---------- */

.jobs {
  border-top: 2px solid var(--fg);
}

.job {
  border-bottom: 1px solid var(--line);
}

.job summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px 16px;
  padding: 24px 0;
  cursor: pointer;
}

.job summary::-webkit-details-marker {
  display: none;
}

.job-when {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fg);
}

.job-title {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.job-title span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--body-2);
}

.job-outcome {
  display: block;
  grid-column: 1;
  color: var(--body-2);
}

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

.tags > * {
  padding: 5px 10px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.3;
  color: var(--body-2);
}

.job .tags {
  grid-column: 1;
  margin-top: 8px;
}

.job-toggle {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  position: relative;
  width: 44px;
  height: 44px;
  border: 2px solid var(--fg);
}

.job-toggle::before,
.job-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--fg);
  transition: transform 220ms var(--ease);
}

.job-toggle::after {
  transform: rotate(90deg);
}

.job[open] .job-toggle::after {
  transform: rotate(0deg);
}

.job-body {
  padding: 0 0 28px;
}

.job-body ul {
  display: grid;
  gap: 10px;
  max-width: 40em;
  color: var(--body-2);
}

.job-body li {
  position: relative;
  padding-left: 22px;
}

.job-body strong {
  color: var(--fg);
}

.job-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 2px;
  background: var(--fg);
}

.job-body a {
  text-underline-offset: 3px;
}

@media (min-width: 760px) {
  .job summary {
    grid-template-columns: 150px minmax(0, 1fr) 44px;
    column-gap: 32px;
  }

  .job-when {
    grid-row: 1 / span 3;
    padding-top: 6px;
  }

  .job-title,
  .job-outcome,
  .job .tags {
    grid-column: 2;
  }

  .job-toggle {
    grid-column: 3;
  }

  .job-body {
    padding-left: 182px;
    padding-right: 76px;
  }
}

/* smooth open/close where supported */
details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 300ms var(--ease), content-visibility 300ms allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px 40px;
  margin-top: 72px;
}

.skills h3 {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.skills .tags > * {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg);
}

/* ---------- Certifications ---------- */

.cert-groups {
  border-top: 2px solid var(--fg);
}

.cert-group {
  display: grid;
  gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.cert-group h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cert-group > div > p {
  margin-top: 8px;
  max-width: 26em;
  font-size: 17px;
  color: var(--muted);
}

.cert-list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  font-size: 17px;
}

.cert-list li + li {
  border-top: 1px solid var(--line);
}

.code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

@media (min-width: 900px) {
  .cert-group {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
  }
}

/* ---------- Project rows ---------- */

.rows {
  border-top: 2px solid var(--fg);
}

.rows li {
  border-bottom: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  gap: 6px 16px;
  padding: 28px 0;
  text-decoration: none;
}

.row-num {
  grid-row: span 3;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding-top: 10px;
}

.row-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.row-line {
  grid-column: 2;
  color: var(--body-2);
  max-width: 34em;
}

.row-kind {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.row-arrow {
  grid-column: 3;
  grid-row: 1;
  font-size: 24px;
  line-height: 1.2;
  transition: transform var(--t) var(--ease);
}

.row:hover .row-arrow {
  transform: translateX(6px);
}

.row:hover .row-name {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

@media (min-width: 1000px) {
  .row {
    grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr) 40px;
    gap: 32px;
    align-items: baseline;
  }

  .row-num {
    grid-row: auto;
    padding-top: 0;
  }

  .row-name {
    font-size: 36px;
  }

  .row-line,
  .row-kind {
    grid-column: auto;
  }

  .row-arrow {
    grid-column: auto;
    grid-row: auto;
    justify-self: end;
  }
}

/* ---------- Testimonials ---------- */

.quotes {
  margin-top: 88px;
}

.quotes .mini-head {
  padding-bottom: 16px;
  border-bottom: 2px solid var(--fg);
}

.quote {
  display: grid;
  gap: 24px;
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--line);
}

.quote blockquote {
  margin: 0;
  display: grid;
  gap: 14px;
  max-width: 40em;
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg);
}

.quote blockquote p:first-child::before {
  content: '“';
  margin-left: -0.45em;
  padding-right: 0.05em;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 900;
}

.quote blockquote p:last-child::after {
  content: '”';
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 900;
}

.quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}

.quote-photo {
  flex: none;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  object-fit: cover;
  background: var(--surface);
}

@media (max-width: 999px) {
  /* phones/tablets: photo on the left, name and role stacked beside it */
  .quote figcaption {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
  }

  .quote-photo {
    grid-row: span 3;
    margin-bottom: 0;
    align-self: start;
  }
}

.quote figcaption strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.quote figcaption span,
.quote figcaption a {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
}

.quote figcaption a {
  text-underline-offset: 4px;
}

.quote figcaption a:hover {
  color: var(--fg);
}

@media (min-width: 1000px) {
  .quote {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 56px;
    align-items: end;
  }

  .quote blockquote {
    font-size: 22px;
  }

  .quote figcaption {
    flex-direction: column;
    gap: 6px;
  }
}

/* ---------- Shipped log ---------- */

.shipped {
  margin-top: var(--section-y);
  padding: var(--section-y) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}

.shipped .wrap {
  display: grid;
  gap: 56px;
}

@media (min-width: 1000px) {
  .shipped .wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
  }
}

.shipped .eyebrow {
  color: var(--muted);
}

.counter {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(120px, 16vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.shipped-text {
  max-width: 18em;
  margin-top: 24px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg);
}

.log {
  border-top: 2px solid var(--fg);
}

.log li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 14px;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .log li {
    grid-template-columns: 110px minmax(0, 1fr) 14px;
  }
}

.log-date {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
}

.log-item strong {
  color: var(--fg);
}

.log-item span {
  color: var(--muted);
}

.log-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
}

.log-dot.is-next {
  background: transparent;
  border: 2px solid var(--accent);
}

.log li.log-empty {
  display: block;
  color: var(--muted);
}

/* ---------- Education ---------- */

.two-col {
  display: grid;
  gap: 56px;
}

@media (min-width: 900px) {
  .two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
}

.two-col .list {
  margin-top: 16px;
  border-top: 2px solid var(--fg);
}

.list li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--body-2);
}

.list.plain li {
  display: block;
}

.list strong {
  color: var(--fg);
}

.list:not(.plain) strong {
  display: block;
}

.thesis {
  display: block;
  margin-top: 6px;
  color: var(--fg);
}

.thesis em {
  font-style: normal;
  font-weight: 600;
}

.when {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--body-2);
  padding-top: 4px;
}

/* ---------- Contact (full-bleed signal) ---------- */

.contact {
  margin-top: var(--section-y);
  padding: var(--section-y) 0 64px;
  background: var(--accent);
  color: var(--on-accent);
}

.contact .eyebrow {
  color: var(--on-accent);
}

.contact h2 {
  margin-top: 20px;
  font-size: clamp(40px, 11vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.contact-lede {
  max-width: 30em;
  margin-top: 32px;
  font-size: 18px;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .contact-lede {
    font-size: 21px;
  }
}

.btn-email {
  margin-top: 40px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.contact .btn-ink {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--fg);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 40px;
}

.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.contact :focus-visible {
  outline-color: var(--on-accent);
}

/* footer sits inside the same orange block, behind a 2px ink rule */
.site-footer {
  padding: 0 0 40px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 14px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  border-top: 2px solid var(--on-accent);
}

/* ---------- Case-study pages ---------- */

.case {
  padding: 40px 0 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.back-link:hover {
  color: var(--fg);
}

.case-head {
  margin-top: 40px;
}

.case-head h1 {
  margin-top: 16px;
  font-size: clamp(40px, 11vw, 148px);
  overflow-wrap: break-word;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.case-head .lead {
  margin-top: 28px;
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 56px;
  border-top: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
}

.case-facts > div {
  padding: 20px 24px 22px 0;
}

.case-facts dt {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-facts dd {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.case-facts a {
  text-underline-offset: 4px;
}

.case-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  max-height: 560px;
  width: 100%;
  margin-top: 56px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.case-cover img {
  max-width: 46%;
  max-height: 28%;
  width: auto;
}

.case-body {
  display: grid;
  gap: 56px;
  margin-top: 72px;
}

.case-body section {
  display: grid;
  gap: 16px;
  max-width: 44em;
}

.case-body h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.case-body p {
  max-width: 34em;
  color: var(--body-2);
}

.numbered {
  counter-reset: n;
  border-top: 2px solid var(--fg);
}

.numbered li {
  counter-increment: n;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--body-2);
}

.numbered li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  padding-top: 4px;
}

.process {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.process li {
  padding: 6px 10px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

/* long "Next: …" labels wrap instead of pushing past a small screen */
.case-next .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}

.case-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 88px;
  padding-top: 24px;
  border-top: 2px solid var(--fg);
}

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

.notfound {
  min-height: 90vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: 64px 0;
}

.notfound h1 {
  margin-top: 20px;
  font-size: clamp(56px, 9.4vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.notfound .console {
  max-width: 640px;
  margin-top: 48px;
}

.notfound .console-screen {
  min-height: 0;
}

/* ---------- Motion off on request ---------- */

/* ---------- Hero role line ---------- */

.hero-role {
  margin-top: clamp(16px, 2.5vh, 28px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.hero-role span {
  color: var(--accent);
}

@media (min-width: 1100px) {
  .hero-photo {
    width: 136px;
    height: 136px;
  }
}

/* ---------- Proof strip ---------- */

.proof-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-list li {
  min-width: 0;
}

.proof-list li > *,
.proof-list li > a {
  display: block;
}

.proof-list li {
  padding: 20px 16px 20px 0;
}

.proof-list li:nth-child(2n) {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.proof-list li:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.proof-list a {
  color: inherit;
  text-decoration: none;
}

.proof-list a:hover strong {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.proof-list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.proof-list span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--body-2);
}

@media (min-width: 900px) {
  .proof-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .proof-list li,
  .proof-list li:nth-child(2n) {
    padding: 28px 24px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .proof-list li:nth-child(n + 3) {
    border-top: 0;
  }

  .proof-list li:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------- Light band (one break in the dark scroll) ---------- */

.band-paper {
  --bg: #F3F0E8;
  --fg: #141210;
  --muted: #5E574C;
  --body-2: #2E2A25;
  --line: #D2CBBE;
  margin-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}

.band-paper ::selection {
  background: var(--fg);
  color: var(--bg);
}

.band-paper :focus-visible {
  outline-color: var(--fg);
}

/* certifications: three compact columns instead of long rows */
.band-paper .cert-groups {
  display: grid;
  gap: 0 48px;
}

.band-paper .cert-group {
  display: block;
  padding: 24px 0;
}

.band-paper .cert-group h3 {
  margin-bottom: 12px;
  font-size: 20px;
}

.band-paper .cert-list li {
  font-size: 16px;
  padding: 8px 0;
}

@media (min-width: 900px) {
  .band-paper .cert-groups {
    grid-template-columns: 3fr 5fr 4fr;
  }

  .band-paper .cert-group {
    border-bottom: 0;
  }
}

/* ---------- Console command line ---------- */

.console-cmd {
  display: flex;
  align-items: baseline;
  gap: 1ch;
  padding: 0 18px 6px calc(18px + 1ch);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--term-text);
}

.console-cmd label {
  flex: none;
}

.console-cmd input {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--term-line);
  background: transparent;
  color: var(--term-hi);
  caret-color: var(--accent);
  font: inherit;
  text-transform: uppercase;
}

.console-cmd input::placeholder {
  color: var(--term-dim);
  opacity: 1;
}

.console-cmd input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.console-msg {
  min-height: 1.5em;
  padding: 0 18px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--term-dim);
  text-transform: uppercase;
}

@media (min-width: 720px) {
  .console-cmd {
    padding: 0 24px 6px calc(24px + 1ch);
    font-size: 13.5px;
  }

  .console-msg {
    padding: 0 24px 12px;
  }

  .only-narrow {
    display: none;
  }
}

/* ---------- Testimonials side by side on wide screens ---------- */

@media (min-width: 1100px) {
  .quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 48px;
  }

  .quotes .mini-head {
    grid-column: 1 / -1;
  }

  .quote {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 28px;
    align-items: start;
  }

  .quote blockquote {
    font-size: 19px;
  }

  .quote figcaption {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
  }

  .quote-photo {
    grid-row: span 3;
    margin-bottom: 0;
    align-self: start;
  }
}

/* ---------- Shipped log fold ---------- */

.log li[hidden] {
  display: none;
}

.log-more {
  margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::details-content {
    animation: none !important;
    transition: none !important;
  }

  .btn:hover,
  a:hover .arr,
  .row:hover .row-arrow {
    transform: none !important;
  }
}

@media print {
  .menu-btn,
  .pf-keys {
    display: none;
  }
}