/* ===========================================================
   Portfolio styles, single viewport, no scroll.
   Shares the visual language of gtfs/: paper FAFAF7, ink 1A1A1A,
   hard borders + offset shadows, Oswald display / Inter body /
   IBM Plex Mono labels.
   =========================================================== */

* { box-sizing: border-box; }

:root {
  --ink: #1A1A1A;
  --paper: #FAFAF7;
  --red: #D6432B;
  --blue: #2B5FAD;
  --green: #2F7B4F;
  --yellow: #E8A93B;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--ink); color: var(--paper); }

.mono {
  font-family: 'IBM Plex Mono', monospace;
}

.display {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* ---------- PAGE FRAME ---------- */

.page {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
}

.hero-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

/* ---------- TOP BAR ---------- */

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2vh, 22px) clamp(20px, 4vw, 56px);
  border-bottom: 1.5px solid var(--ink);
}

.topbar-mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: 0.2em;
  opacity: 0.6;
}

.topbar-nav {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.topbar-nav a { color: var(--ink); opacity: 0.65; }
.topbar-nav a:hover { opacity: 1; color: var(--blue); }

/* ---------- MAIN ---------- */

.main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  min-height: 0;
}

.hero-col {
  border-right: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 56px);
  min-height: 0;
}

.hero-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  opacity: 0.55;
  margin-bottom: clamp(8px, 1.4vh, 16px);
}

.hero-title {
  font-size: clamp(34px, 5.4vw, 76px);
}

.hero-sub {
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.5;
  opacity: 0.8;
  max-width: 42ch;
  margin-top: clamp(10px, 1.8vh, 18px);
}

.about-list {
  list-style: none;
  margin: clamp(12px, 2vh, 20px) 0 0;
  padding: 0;
  max-width: 44ch;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
}

.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(11.5px, 1.1vw, 13px);
  line-height: 1.45;
  opacity: 0.85;
}

.about-list strong {
  font-weight: 600;
  opacity: 1;
}

.about-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
  color: var(--red);
}

.about-list li:nth-child(2) .about-icon { color: var(--green); }
.about-list li:nth-child(3) .about-icon { color: var(--blue); }

.about-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.skills {
  margin-top: clamp(12px, 2vh, 20px);
}

.skills-label {
  font-size: clamp(10.5px, 1.1vw, 12px);
  letter-spacing: 0.18em;
  opacity: 0.5;
  margin-bottom: clamp(6px, 1vh, 10px);
}

.skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skills-list li {
  font-size: clamp(10.5px, 1.05vw, 12px);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1.5px solid var(--ink);
  padding: 4px 9px;
  background: var(--paper);
}

.skills-list li:nth-child(1) { opacity: 1; }
.skills-list li:nth-child(2) { opacity: 0.92; }
.skills-list li:nth-child(3) { opacity: 0.84; }
.skills-list li:nth-child(4) { opacity: 0.76; }
.skills-list li:nth-child(5) { opacity: 0.68; }
.skills-list li:nth-child(6) { opacity: 0.6; }
.skills-list li:nth-child(7) { opacity: 0.52; }
.skills-list li:nth-child(8) { opacity: 0.44; }

.hero-dot-track {
  margin-top: clamp(18px, 3vh, 32px);
  width: 160px;
  height: 2px;
  background: var(--ink);
  opacity: 0.18;
  position: relative;
}

.hero-dot {
  position: absolute;
  top: -5px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  animation: dotTravel 3.2s cubic-bezier(0.65,0,0.35,1) infinite alternate;
}

@keyframes dotTravel {
  0% { transform: translateX(0); }
  100% { transform: translateX(120px); }
}

.hero-social {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 14px);
  margin-top: clamp(16px, 3vh, 28px);
}

/* ---------- CONTACT BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: clamp(7px, 1.1vh, 10px) clamp(12px, 1.6vw, 16px);
  box-shadow: 3px 3px 0 rgba(26,26,26,0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(26,26,26,0.14);
  color: var(--paper);
  background: var(--ink);
}

.btn-tag {
  opacity: 0.5;
  font-size: 0.85em;
}

.btn.btn-red   { border-color: var(--red); }
.btn.btn-blue  { border-color: var(--blue); }
.btn.btn-green { border-color: var(--green); }
.btn.btn-red:hover   { background: var(--red); }
.btn.btn-blue:hover  { background: var(--blue); }
.btn.btn-green:hover { background: var(--green); }

/* ---------- WORK GRID ---------- */

.work-col {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  padding: clamp(16px, 2.5vh, 26px) clamp(20px, 4vw, 56px);
}

.work-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: clamp(10px, 1.6vh, 16px);
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  min-height: 0;
}

.work-card {
  border: 1.5px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(26,26,26,0.08);
  background: var(--paper);
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  overflow: hidden;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.work-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(26,26,26,0.12);
}

.work-body {
  display: grid;
  grid-template-columns: 1fr clamp(160px, 20vw, 240px);
  min-height: 0;
  overflow: hidden;
}

.work-thumb {
  min-height: 0;
  background: repeating-linear-gradient(45deg, rgba(26,26,26,0.06) 0 2px, transparent 2px 14px);
  border-bottom: none;
  border-right: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.work-card.c-blue .work-thumb img {
  object-position: right top;
}

.work-thumb span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.45;
  background: var(--paper);
  padding: 3px 8px;
  border: 1px solid rgba(26,26,26,0.25);
}

.work-info {
  padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.4vw, 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.work-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

.work-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(13px, 1.3vw, 16px);
  margin: 2px 0 0;
  line-height: 1.15;
}

.work-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1.5px solid var(--ink);
}

.work-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  padding: clamp(7px, 1.1vh, 10px) 6px;
  border-right: 1.5px solid var(--ink);
  transition: filter 0.15s ease, transform 0.1s ease;
}

.work-btn:last-child {
  border-right: none;
}

.work-btn svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.work-btn:hover {
  filter: brightness(1.15);
  color: var(--paper);
}

.work-btn:active {
  transform: translateY(1px);
}

.work-btn.btn-demo     { background: var(--red); }
.work-btn.btn-showcase { background: var(--green); }
.work-btn.btn-code     { background: var(--blue); }

/* rail-tint variants matching gtfs station colors */
.work-card.c-red .work-thumb    { border-right-color: var(--red); }
.work-card.c-blue .work-thumb   { border-right-color: var(--blue); }
.work-card.c-green .work-thumb  { border-right-color: var(--green); }
.work-card.c-yellow .work-thumb { border-right-color: var(--yellow); }

/* ---------- FOOTER ---------- */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 1.6vh, 16px) clamp(20px, 4vw, 56px);
  border-top: 1.5px solid var(--ink);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 12px);
}

.footer-copy {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(10px, 1vw, 12px);
  opacity: 0.45;
}

/* ---------- SMALL SCREENS ---------- */
/* below this width the single-screen layout can't hold everything;
   allow scrolling rather than clipping content */
@media (max-width: 760px) {
  html, body { overflow: auto; }
  .page { height: auto; min-height: 100vh; }
  .main { grid-template-columns: 1fr; }
  .hero-col { border-right: none; border-bottom: 1.5px solid var(--ink); padding: 32px clamp(20px,6vw,40px); }
  .work-col { padding: 24px clamp(20px,6vw,40px) 32px; }
  .work-grid { grid-auto-rows: auto; }
  .work-body { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .work-actions { grid-template-columns: 1fr 1fr 1fr; }
  .work-thumb { border-right: none; border-bottom: 1.5px solid var(--ink); min-height: 160px; }
  .work-card.c-red .work-thumb    { border-right-color: transparent; border-bottom-color: var(--red); }
  .work-card.c-blue .work-thumb   { border-right-color: transparent; border-bottom-color: var(--blue); }
  .work-card.c-green .work-thumb  { border-right-color: transparent; border-bottom-color: var(--green); }
  .work-card.c-yellow .work-thumb { border-right-color: transparent; border-bottom-color: var(--yellow); }
}