/* =========================================================
   Torallion Technologies — site styles
   Dark is canonical; light is a re-theme via [data-theme="light"]
   ========================================================= */

:root {
  /* Brand line colors (from the 80s logo) */
  --brand-brick: #8B2A2A;
  --brand-red:   #EF3535;
  --brand-yellow:#F4C81A;
  --brand-cyan:  #5BD8E8;

  /* Type */
  --font-display: "Orbitron", "Audiowide", system-ui, sans-serif;
  --font-body:    "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 56px);
  --radius: 14px;
  --radius-sm: 8px;

  /* Theme: dark (default) */
  --bg:           #0A0E1E;
  --bg-elev:     #111630;
  --bg-elev-2:   #161C38;
  --panel:        #131829;
  --panel-2:      #1A2140;
  --border:       rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.18);
  --text:         #E8ECF5;
  --text-soft:    #B8C0D6;
  --muted:        #7C849C;
  --accent:       var(--brand-cyan);

  --grid-line:    rgba(91,216,232,0.08);
  --scanline:     rgba(255,255,255,0.025);
  --shadow-lg:    0 30px 80px -30px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-sm:    0 6px 18px -8px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --bg:           #F2EFE6;
  --bg-elev:      #ECE7D7;
  --bg-elev-2:    #E5DFCA;
  --panel:        #FFFFFF;
  --panel-2:      #FAF7EE;
  --border:       rgba(20,24,40,0.08);
  --border-strong:rgba(20,24,40,0.20);
  --text:         #14182B;
  --text-soft:    #2B3148;
  --muted:        #6A7186;
  --accent:       #156B7A; /* darker cyan for contrast on cream */

  --grid-line:    rgba(20,24,40,0.06);
  --scanline:     rgba(0,0,0,0.02);
  --shadow-lg:    0 30px 80px -30px rgba(20,24,40,0.18), 0 4px 12px rgba(20,24,40,0.06);
  --shadow-sm:    0 6px 18px -8px rgba(20,24,40,0.15);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Smooth-scroll for anchor links; offset targets below the sticky nav */
html { scroll-behavior: smooth; }
:where(section[id], [id]) { scroll-margin-top: 110px; }

/* ---------- Scroll-reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s cubic-bezier(.2,.7,.2,1), transform 0.65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 96px;
  transition: background-color .35s ease, color .35s ease;
}

a { color: inherit; }

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

::selection { background: var(--brand-cyan); color: #0A0E1E; }

/* ---------- Optional CRT scanlines ---------- */
body[data-scanlines="on"]::before {
  content: "";
  position: fixed; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    var(--scanline) 2px,
    var(--scanline) 3px
  );
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: overlay;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav__bands {
  display: flex;
  flex-direction: column;
  height: 4px;
  width: 100%;
}
.nav__bands > div { flex: 1; }
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__brand {
  display: flex; align-items: center; gap: 16px;
  text-decoration: none;
  color: var(--text);
}
.nav__brand-mark {
  width: 48px; height: 48px;
  display: grid; place-items: center;
}
.nav__brand-words {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}
.nav__brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.18em;
  text-align: center;
}
.nav__brand-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 4px;
  /* Centered, with a thin rule on each side */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.nav__brand-sub::before,
.nav__brand-sub::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  align-items: center;
}
.nav__link {
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  font-family: var(--font-mono);
  position: relative;
  padding: 8px 0;
  transition: color .2s;
}
.nav__current {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  opacity: .85;
}
.nav__portfolio {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: all .2s;
  white-space: nowrap;
}
.nav__portfolio:hover { background: var(--bg-elev); border-color: var(--text); }
.nav__portfolio--active {
  color: var(--accent);
  border-color: var(--accent);
}
.nav__link:hover { color: var(--text); }
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--brand-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  transition: all .2s;
  cursor: pointer;
}
.nav__cta:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

.nav__theme {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
}
.nav__theme:hover { border-color: var(--border-strong); background: var(--bg-elev); }

.nav__menu-btn {
  display: none;
  background: none; border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__menu-btn { display: block; margin-left: auto; }
  .nav.open .nav__links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 16px var(--pad) 24px;
    gap: 18px;
  }
  .nav.open .nav__cta { display: inline-flex; align-self: flex-start; }
}

/* ---------- Layout ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--pad);
}
.section--tight { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--brand-cyan);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(40px, 6.5vw, 86px); letter-spacing: 0.02em; }
h2 { font-size: clamp(30px, 4.2vw, 52px); letter-spacing: 0.01em; }
h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: 0.02em; }
h4 { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 600; }

p { margin: 0 0 1em; color: var(--text-soft); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head__lead { max-width: 520px; }
.section-head p { font-size: 17px; color: var(--text-soft); margin: 16px 0 0; }

@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Retro line stack motif ---------- */
.line-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.line-stack__line {
  height: 3px;
  border-radius: 2px;
}
.line-stack__line--brick { background: var(--brand-brick); }
.line-stack__line--red    { background: var(--brand-red); }
.line-stack__line--yellow { background: var(--brand-yellow); }
.line-stack__line--cyan   { background: var(--brand-cyan); }

.line-stack--thin .line-stack__line { height: 2px; }
.line-stack--bold .line-stack__line { height: 5px; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: clamp(40px, 5vw, 72px) var(--pad) clamp(64px, 8vw, 120px);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
}
.hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { display: none; }
}

.hero__eyebrow {
  margin-bottom: 24px;
}

.hero__title {
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 0.98;
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}
.hero__title-row {
  display: block;
}
.hero__title-accent {
  /* Hug the text so the gradient box always equals the word width —
     full red→cyan span renders across "engineering," at every width. */
  width: -moz-fit-content;
  width: fit-content;
  background: linear-gradient(90deg, var(--brand-brick), var(--brand-red) 30%, var(--brand-yellow) 60%, var(--brand-cyan) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Extend the background painting box below the baseline so the gradient
     covers glyph descenders (e.g. the "g" in "engineering") instead of
     clipping them. */
  padding-bottom: 0.16em;
  /* Soft drop shadow for a little depth/definition against the bg
     (single offset, no outline — renders the same in light + dark). */
  filter: drop-shadow(0 3px 6px rgba(10, 14, 30, 0.6));
}

/* On the light/cream theme the yellow\u2013cyan middle of the gradient washes
   out. Keep the colour but give the glyphs an arcade-style dark outline
   (fits the C64 vibe) so they stay crisp on the pale background.
   text-shadow renders from the glyph shape even though the fill is
   transparent, so the outline sits cleanly behind the gradient. */
[data-theme="light"] .hero__title-accent {
  background: linear-gradient(90deg, var(--brand-brick), var(--brand-red) 30%, var(--brand-yellow) 60%, var(--brand-cyan) 95%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__sub {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  max-width: 560px;
  color: var(--text-soft);
  margin-bottom: 32px;
}

.hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.btn--primary {
  background: var(--text);
  color: var(--bg);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover { background: var(--bg-elev); }

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

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
  padding-top: 32px;
  max-width: 620px;
}
.stat {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--accent);
  letter-spacing: 0.02em;
  line-height: 1;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
@media (max-width: 600px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Hero art (T mark) ---------- */
.hero__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 460px;
  margin-left: auto;
}
.hero__t {
  position: absolute;
  inset: 8%;
  display: grid;
  place-items: center;
}
.hero__t img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.4));
  animation: subtleFloat 8s ease-in-out infinite;
}
[data-theme="light"] .hero__t img {
  /* The provided T is on dark — re-color on light by mixing modes? Easier: keep on a tinted card */
}
.hero__t-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    rgba(91,216,232,0.18) 0%,
    rgba(91,216,232,0.06) 40%,
    transparent 70%);
  filter: blur(20px);
  z-index: -1;
}

@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}


/* Image-slot variant: a square card the user fills with their own art.
   Fills the whole hero__art box edge-to-edge with rounded corners. */
.hero__t--image {
  inset: 0;
  animation: subtleFloat 8s ease-in-out infinite;
}
.hero__t--image image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Site-wide synthwave grid (fixed at viewport bottom) ---------- */
.site-grid {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.site-grid__floor {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -30%;
  height: 110%;
  background:
    repeating-linear-gradient(
      to right,
      var(--brand-cyan) 0,
      var(--brand-cyan) 1.5px,
      transparent 1.5px,
      transparent 80px
    ),
    repeating-linear-gradient(
      to bottom,
      var(--brand-cyan) 0,
      var(--brand-cyan) 1.5px,
      transparent 1.5px,
      transparent 50px
    );
  transform: perspective(700px) rotateX(62deg);
  transform-origin: center top;
  opacity: 0.32;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 75%, transparent 100%);
}
[data-theme="light"] .site-grid__floor {
  opacity: 0.22;
}
.site-grid__sun { display: none; }
.site-grid__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, transparent 0%, var(--bg) 95%);
  pointer-events: none;
  opacity: 0;
}

body[data-grid="off"] .site-grid { display: none; }

/* All page content should sit above the fixed grid */
.hero, .section, .contact, .footer { position: relative; z-index: 1; }

/* The contact section sits flush against the grid — make it transparent
   so the grid shows through */
.contact { background: transparent !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- Section divider (the 4-line stack) ---------- */
.brand-divider {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.brand-divider .line-stack { max-width: 200px; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.card__corner {
  position: absolute;
  top: 0; left: 0;
  width: 60px;
  display: flex; flex-direction: column;
  gap: 3px;
  z-index: 2;
}
.card__corner > span {
  height: 2px;
  border-radius: 1px;
}

/* ---------- Services ---------- */
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 720px) { .services { grid-template-columns: 1fr; } }

.service { padding: 32px 28px 28px; }
.service__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 8px;
}
.service__title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.service__desc {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.service__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg);
}

/* ---------- Titles grid ---------- */
.titles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .titles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .titles { grid-template-columns: 1fr; } }

.title-card {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.title-card__art {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--bg-elev);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.title-card__art image-slot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 1;
}
/* Once an image is dropped the slot gains [data-filled] — hide the
   name/"drop key art" placeholder overlay so the artwork shows through. */
.title-card__art image-slot[data-filled] {
  z-index: 2;
}
.title-card__art image-slot[data-filled] ~ .title-card__placeholder {
  display: none;
}
.title-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 18px,
      rgba(255,255,255,0.025) 18px,
      rgba(255,255,255,0.025) 19px
    ),
    linear-gradient(135deg, var(--bg-elev), var(--bg-elev-2));
  pointer-events: none;
}
[data-theme="light"] .title-card__placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 18px,
      rgba(20,24,40,0.04) 18px,
      rgba(20,24,40,0.04) 19px
    ),
    linear-gradient(135deg, var(--bg-elev), var(--bg-elev-2));
}
.title-card__placeholder-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text);
  margin-bottom: 8px;
}
.title-card__placeholder-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.title-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.title-card__title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.title-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0;
}
.title-card__year {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.title-card__studio {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.title-card__platforms {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 16px;
}
.title-card__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.title-card__link:hover { color: var(--text); }
.title-card__link--disabled {
  color: var(--muted);
  pointer-events: none;
}

/* ---------- Skills ---------- */
.skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 720px) { .skills { grid-template-columns: 1fr; } }

.skill-group {
  padding: 26px 28px;
}
.skill-group__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}
.skill-group__title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.skill-group__num {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 11px;
}
.skill-group__items {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.skill-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--text);
  letter-spacing: 0.02em;
}

/* ---------- Experience / Timeline ---------- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 110px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.tl-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.tl-row:last-child { border-bottom: none; }
.tl-dates {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 6px;
}
.tl-row::before {
  content: "";
  position: absolute;
  left: 106px;
  top: 28px;
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg);
}
.tl-content { padding-left: 32px; }
.tl-role {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}
.tl-company {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tl-body {
  font-size: 14.5px;
  color: var(--text-soft);
  margin: 0;
}

@media (max-width: 640px) {
  .timeline::before { left: 0; }
  .tl-row { grid-template-columns: 1fr; gap: 8px; padding-left: 24px; }
  .tl-row::before { left: -4px; top: 30px; }
  .tl-content { padding-left: 0; }
  .tl-dates { padding-top: 0; }
}

/* ---------- About strip ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }

.about__panel {
  position: relative;
  padding: 36px 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about__lines {
  position: absolute;
  top: 0; right: 0;
  width: 120px;
}
.about__quote {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: 0.01em;
}
.about__sig {
  display: flex; align-items: center; gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.about__sig-name { font-family: var(--font-mono); font-size: 12px; color: var(--text); letter-spacing: 0.12em; text-transform: uppercase; }
.about__sig-role { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.about__copy h2 { margin-bottom: 18px; }
.about__copy p { font-size: 16px; line-height: 1.65; }

.about__network-lead { margin-bottom: 12px !important; }
.about__network-list {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.about__network-list li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
}
.about__network-list li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

.about__highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.about__highlight {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.about__highlight-num {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 26px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.about__highlight-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- Contact ---------- */
.contact {
  position: relative;
  text-align: center;
  padding: clamp(72px, 10vw, 140px) var(--pad);
  background:
    radial-gradient(ellipse at center bottom, rgba(91,216,232,0.06), transparent 60%),
    var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.contact__inner {
  max-width: 720px;
  margin: 0 auto;
}
.contact__lines {
  max-width: 200px;
  margin: 0 auto 28px;
}
.contact__title { font-size: clamp(32px, 5vw, 56px); margin: 0 0 18px; }
.contact__sub {
  font-size: 17px;
  color: var(--text-soft);
  margin: 0 auto 32px;
  max-width: 520px;
}
.contact__methods {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
.contact__method {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--panel);
  transition: all .2s;
}
.contact__method:hover { transform: translateY(-2px); border-color: var(--accent); }
.contact__method svg { width: 16px; height: 16px; }

.contact__location {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__location::before { content: "◆"; margin-right: 10px; color: var(--accent); }

/* ---------- Footer ---------- */
.footer {
  padding: 36px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__mark { width: 28px; height: 28px; }
.footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.footer__nav {
  display: flex;
  gap: 18px;
}
.footer__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.footer__link:hover { color: var(--text); }
@media (max-width: 640px) {
  .footer { flex-direction: column; align-items: flex-start; }
}

/* ---------- T mark SVG (inline) ---------- */
.t-mark { display: block; }
.t-mark__bg { fill: transparent; }

/* ---------- Misc utilities ---------- */
.section-title-row {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
  flex-wrap: wrap;
}
.section-title-row h2 { margin: 8px 0 0; max-width: 720px; }
.section-title-row p { max-width: 480px; margin: 0; color: var(--text-soft); font-size: 16px; }

/* Hide image-slot empty UI nicely behind our placeholder */
image-slot { background: transparent; }

/* ---------- Shared droppable logo mark ---------- */
.logo-mark {
  position: relative;
  flex: none;
  display: inline-block;
  overflow: hidden;
}
.logo-mark image-slot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ---------- Title card: multiple distinct store links ---------- */
.title-card__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* ---------- About: portrait + portfolio button ---------- */
.about__panel {
  /* widen the panel relative to copy now that it holds a portrait */
  padding: 24px;
}
.about__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.about__portrait image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.about__portfolio-btn {
  margin-top: 28px;
  display: inline-flex;
}
.about__portfolio-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 10px 0 0;
  max-width: 420px;
}

/* ---------- Founder Portfolio page hero variant ---------- */
.hero--portfolio { padding-bottom: 32px; }
.hero__inner--portfolio { align-items: center; }
.hero__t--portrait {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 0;
}
.hero__t--portrait image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* =========================================================
   C64-COVER GRADIENT (Dark mode only)
   --------------------------------------------------------
   Permanent gradient background inspired by the
   Commodore 64 Programmer's Reference Guide cover.
   Light mode is untouched.
   To REVERT: delete this entire block (between the
   begin/end markers below). Nothing else depends on it.
   ========================================================= */
/* C64-GRADIENT-BEGIN */
html[data-theme="dark"] body,
body[data-theme="dark"] {
  background:
    linear-gradient(
      180deg,
      #2E7390 0%,      /* teal-blue top — matches cover sky */
      #1B4866 14%,     /* descending teal-blue */
      #0E2138 32%,     /* deep navy */
      #0A0E1E 52%,     /* canonical bg in the middle */
      #14233D 78%,     /* slate blue blends into grid */
      #2A4868 100%     /* steel blue at the floor */
    ) fixed,
    var(--bg);
}
/* Soften the grid lines a touch so they read as part of the gradient,
   not a separate layer */
html[data-theme="dark"] .site-grid__floor {
  opacity: 0.38;
}
/* C64-GRADIENT-END */


/* =========================================================
   C64-CASE LIGHT NAV (Light mode only)
   --------------------------------------------------------
   Re-themes the navbar + perspective grid in LIGHT mode
   to mimic the warm brown of the Commodore 64 keyboard
   case. Cream foreground text for legibility on brown.
   Dark mode is untouched. The cream page bg is preserved.
   To REVERT: delete this entire block.
   ========================================================= */
/* C64-LIGHT-NAV-BEGIN */
body[data-theme="light"] .nav {
  --nav-bg:           #2E1F0E;   /* Locked: deep Commodore-case espresso (was slider 100%) */
  --nav-text:         #F4EFE2;   /* cream */
  --nav-muted:        #C8B898;   /* warm tan */
  --nav-border:       rgba(244, 239, 226, 0.18);
  --nav-border-strong:rgba(244, 239, 226, 0.42);

  background: color-mix(in oklab, var(--nav-bg) 94%, transparent);
  border-bottom-color: rgba(0, 0, 0, 0.28);
  color: var(--nav-text);
}
body[data-theme="light"] .nav a,
body[data-theme="light"] .nav__brand,
body[data-theme="light"] .nav__brand-text {
  color: var(--nav-text);
}
body[data-theme="light"] .nav__brand-sub {
  color: var(--nav-muted);
}
body[data-theme="light"] .nav__link {
  color: rgba(244, 239, 226, 0.78);
}
body[data-theme="light"] .nav__link:hover {
  color: var(--nav-text);
}
body[data-theme="light"] .nav__cta {
  border-color: var(--nav-border-strong);
  color: var(--nav-text);
  background: transparent;
}
body[data-theme="light"] .nav__cta:hover {
  background: var(--nav-text);
  color: var(--nav-bg);
  border-color: var(--nav-text);
}
body[data-theme="light"] .nav__portfolio {
  border-color: var(--nav-border-strong);
  color: var(--nav-text);
  background: transparent;
}
body[data-theme="light"] .nav__portfolio:hover {
  background: rgba(244, 239, 226, 0.10);
  border-color: var(--nav-text);
}
body[data-theme="light"] .nav__portfolio--active {
  color: var(--nav-text);
  border-color: var(--nav-border-strong);
}
body[data-theme="light"] .nav__theme {
  border-color: var(--nav-border);
  color: var(--nav-text);
  background: transparent;
}
body[data-theme="light"] .nav__theme:hover {
  background: rgba(244, 239, 226, 0.10);
  border-color: var(--nav-border-strong);
}
body[data-theme="light"] .nav__menu-btn {
  border-color: var(--nav-border);
  color: var(--nav-text);
}

/* Mobile drawer should also be brown so it reads as part of the nav */
body[data-theme="light"] .nav.open .nav__links {
  background: var(--nav-bg);
  border-bottom-color: rgba(0, 0, 0, 0.28);
}

/* Perspective grid floor in light mode — brown lines instead of cyan,
   to echo the keyboard plastic and tie back to the navbar */
body[data-theme="light"] .site-grid__floor {
  background:
    repeating-linear-gradient(
      to right,
      #1F1408 0,    /* Locked: deep espresso grid line (was slider 100%) */
      #1F1408 1.5px,
      transparent 1.5px,
      transparent 80px
    ),
    repeating-linear-gradient(
      to bottom,
      #1F1408 0,
      #1F1408 1.5px,
      transparent 1.5px,
      transparent 50px
    );
  opacity: 0.32;
}
/* C64-LIGHT-NAV-END */


/* =========================================================
   C64-CASE LIGHT GRADIENT (Light mode, toggle-controlled)
   --------------------------------------------------------
   Beige -> darker beige body gradient for light mode,
   mirroring the SHAPE of the dark-mode C64 gradient but
   staying in cream/sand territory so the content stays
   readable. Activated by data-light-gradient="on" on body.
   To REVERT: delete this entire block.
   ========================================================= */
/* C64-LIGHT-GRADIENT-BEGIN */
body[data-theme="light"] {
  background:
    linear-gradient(
      180deg,
      #F2EFE6 0%,     /* cream at the top (lightest) */
      #EEE5CE 14%,    /* easing toward sand */
      #E2D2AE 32%,    /* warm tan */
      #C9B58A 50%,    /* darker beige in the middle (deepest) */
      #E2D2AE 68%,    /* warm tan */
      #EEE5CE 86%,    /* easing back to cream */
      #F2EFE6 100%    /* cream at the floor (lightest) */
    ) fixed,
    var(--bg);
}
/* C64-LIGHT-GRADIENT-END */