html {
  scroll-behavior: smooth;
}

.grid-bg {
    min-height: 100vh;
    width: 100%;
    background-color: #f5f0e8;
    background-image: radial-gradient(circle, #b0a898 1px, transparent 1px);
    background-size: 20px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
}

.browser-window {
    width: 100%;
    max-width: 80%;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #d0ccc4;
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
    min-height: calc(100vh - 64px);
}

p {
    font-family: 'Roboto Mono', monospace;
}

li {
    font-family: 'Roboto Mono', monospace;
}

.nav {
    background: #fff;
    border-bottom: 1px solid #e8e4de;
    display: flex;
}

.nav-item, .nav-item-right {
    padding: 8px 16px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #555;
    text-transform: uppercase;
    border-right: 1px solid #f0ede8;
    cursor: default;
    text-decoration: none;
}

.nav-item-right {
    margin-left: auto;
}

.nav-item.active, nav-item-right.active {
    text-decoration: underline;
}

.search-bar {
    background: #f0ede8;
    border-bottom: 1px solid #d8d4cc;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-dots {
    display: flex;
    gap: 5px;
}

.browser-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }

.browser-address {
    flex: 1;
    background: #fff;
    border: 1px solid #d0ccc4;
    border-radius: 5px;
    padding: 3px 10px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: #666;
}

h1 .name-styling {
    font-size: 78px;
    color: #afbe7a;
    text-shadow: gray 2px 2px;
    transition: font-size 0.3s ease, color 0.3s ease;
}

h1 .name-styling:hover {
    font-size: 84px;
    color: #94a067;
}

h1 {
    font-family: "Bitcount", system-ui;
    font-size: 48px !important;
}

.browser-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 400px;
    padding: 10%;
}

.game-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2%;
}

h2 {
    font-family: "Bitcount", system-ui;
    font-size: 26px;
    font-style: normal;
}

div {
    font-family: "Bitcount", system-ui;
    font-optical-sizing: auto;
    font-style: normal;

}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.browser-intro {
    animation: fadeIn 0.5s ease both;
}

.bio-styling {
    display: flex;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 8%;
    padding-right: 8%;
    justify-content: center;
    align-items: flex-start;
    min-height: 100px;
    text-align: centre;
    position: relative;
}

.bio-styling a {
    text-decoration: underline;
    color: #000;
}

hr {
    border: none;
    border-top: 1px solid #000;
    width: 0;
}

hr.animate {
  animation: expandLine 1s ease forwards;
}

@keyframes expandLine {
  to {
    width: 80%;
  }
}

.project-title {
    padding-left: 10%;
    text-shadow: gray 2px 2px;
}

.intro-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.sprite {
    width: 60px;
    image-rendering: pixelated;
}

.laptop-sprite {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 80px;
    image-rendering: pixelated;
}

.coffee-sprite {
    width: 60px;
    image-rendering: pixelated;
}

.project-images-gd img {
    width: 275px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.project-images-gd img:hover {
    cursor: pointer;
    transform: scale(1.05);
}

.project-images-gd {
    display: grid;
    justify-content: centre;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr;
    grid-template-areas: 
        "due-process-img loco-comotives-img network-library-img"
        "dp-desc lc-desc udp-desc"
        "tidal-tussle-img traffic-game-img vr-project-img"
        "tidal-tussle-desc traffic-game-desc vr-desc";
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 2%;
    align-items: start;
    gap: 8px 8px;
    transition: transform 0.3s ease;
    margin-top: 40px;
    width: 80%;
}

.project-images-gd a {
    text-decoration: none;
    color: #94a067;
    font-size: 28px;
    transition: font-size 0.3s ease;
}

.project-images-gd a:hover {
    font-size: 30px;
}
.due-process-img {
    grid-area: due-process-img;
}

.loco-comotives-img {
    grid-area: loco-comotives-img;
}

.network-library-img {
    grid-area: network-library-img;
}

.dp-desc {
    grid-area: dp-desc;
}

.lc-desc {
    grid-area: lc-desc;
}

.udp-desc {
    grid-area: udp-desc;
}

.tidal-tussle-img {
    grid-area: tidal-tussle-img;
}

.traffic-game-img {
    grid-area: traffic-game-img;
}

.vr-project-img {
    grid-area: vr-project-img;
}

.tidal-tussle-desc {
    grid-area: tidal-tussle-desc;
}

.traffic-game-desc {
    grid-area: traffic-game-desc;
}

.vr-desc {
    grid-area: vr-desc;
}

.play-btn {
    display: inline-block;
    font-family: "Bitcount", system-ui;
    font-size: 1rem;
    background: #94a067;
    color: white;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    text-shadow: gray 1px 1px;
    transition: background 0.2s, transform 0.15s;
}
.play-btn:hover {
    background: #7a8c4a;
    transform: translateY(-2px);
}

.experience-title {
    padding-left: 10%;
    padding-top: 10px;
    padding-bottom: 20px;
    text-shadow: gray 2px 2px;
}

.maingrid {
    display: grid;
    grid-template-columns: 50% 50%;
    padding-left: 10px;
    width: 100%;
}

.maingrid-tt {
    display: grid;
    grid-template-columns: 40% 60%;
    padding: 1% 10%;
    width: 100%;
}

.maingrid-networking {
    display: grid;
    grid-template-columns: 40% 60%;
    padding-left: 10%;
    padding-right: 10%;
    width: 100%;
}



.maingrid-traffic {
    display: grid;
    grid-template-columns: 40% 60%;
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
}

.maingrid-vr {
    display: grid;
    grid-template-columns: 50% 50%;
    padding-left: 10%;
    padding-right: 10%;
    width: 100%;
}


.gallery{
    display: flex;
    width: 100%;
    gap: 5px;
}

.gallery img {
    height: 250px;
    flex: 1;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    transition: 0.5s all cubic-bezier(0.175, 0.885, 0.32, 1);
    cursor: pointer;
}

.gallery img:hover{
    flex: 2
}

.networking-header {
    color: purple;
    text-shadow: black 2px 2px;
}

.glow-purple {
    text-shadow: 2px 2px 5px plum;
}
.glow-green {
    text-shadow: 2px 2px 5px green;
}

.joystick, .fish {
    height: 70px;
    float: right;
}

.demo-img, iframe {
    border: 1px solid #94a067;
    border-radius: 6px;
}

.features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 60%;
    text-align: center;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.features-list li {
    border: 1px solid purple;
    border-left: 3px solid purple;
    border-radius: 4px;
}

.timeline {
  position: relative;
  padding-left: 12%;
  padding-right: 10%
}

.timeline::before {
  content: '';
  position: absolute;
  left: calc(10% - 1px); /* align with where content starts */
  top: 0;
  width: 2px;
  height: 100%;
  background: #000;
}
.entry {
  position: relative;
  margin-bottom: 1rem;
}

.entry::before {
  content: '';
  position: absolute;
  left: calc(-2% - 14px); /* pulls it back to sit on the line */
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
}
.entry div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.subtle {
  color: #888;
  font-size: 0.85em;
}

.maingrid-dueprocess {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "iframe          dp-responsibilities"
        "resp2           bug";
    gap: 20px;
    padding-left: 5%;
    padding-right: 5%;
    width: 90%;
}

.dp-responsibilities {
    grid-area: dp-responsibilities;
}

.iframe {
    grid-area: iframe;
    align-self: center;
}

.features-list-tt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 60%;
    text-align: center;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.features-list-tt li {
    border: 1px solid powderblue;
    border-left: 3px solid powderblue;
    border-radius: 4px;
}

.loco-features{
    display: grid;
    justify-content: centre;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.5fr;
    grid-template-areas: 
        "loco-future loco-systems";
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 2%;
    align-items: start;
    gap: 5% 5%;
    transition: transform 0.3s ease;
    margin-top: 40px;
    width: 90%;
}

.traffic {
    float: right;
}

.features-list-traffic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 60%;
    text-align: center;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.features-list-traffic li {
    border: 1px solid black;
    border-left: 3px solid black;
    border-radius: 4px;
}

.skills-section {
    padding: 0% 10%;
    padding-bottom: 2%;
}

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  width: 100%;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.92rem 2.16rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: slideIn 0.5s ease both;
  overflow: hidden;
  position: relative;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.09);
}

.card:nth-child(1) { grid-column: span 4; background: #f0f4e8; animation-delay: 0.05s; }
.card:nth-child(2) { grid-column: span 2; background: #fdf0f0; animation-delay: 0.10s; }
.card:nth-child(3) { grid-column: span 2; background: #f5f0e4; animation-delay: 0.15s; }
.card:nth-child(4) { grid-column: span 4; background: #f2f4ed; animation-delay: 0.20s; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-icon { font-size: 1.92rem; margin-bottom: 1.08rem; display: block; }

.card-category {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.4rem;
  font-family: 'Roboto Mono', monospace;
}

.card:nth-child(1) .card-category { color: #94a067; }
.card:nth-child(2) .card-category { color: #d4847a; }
.card:nth-child(3) .card-category { color: #c9b99a; }
.card:nth-child(4) .card-category { color: #7a8c4a; }

.card-title {
  font-family: "Bitcount", system-ui;
  font-size: 1.38rem;
  font-weight: 600;
  margin-bottom: 1.32rem;
  color: #1a1a2e;
}

.pill-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill {
  padding: 0.42rem 1.02rem;
  border-radius: 999px;
  font-size: 0.936rem;
  font-family: 'Roboto Mono', monospace;
  border: 1px solid transparent;
  cursor: default;
  transition: all 0.2s;
}

.card:nth-child(1) .pill { background: rgba(148,160,103,0.12); color: #94a067; border-color: rgba(148,160,103,0.2); }
.card:nth-child(1) .pill:hover { background: #94a067; color: white; }

.card:nth-child(2) .pill { background: rgba(212,132,122,0.12); color: #d4847a; border-color: rgba(212,132,122,0.2); }
.card:nth-child(2) .pill:hover { background: #d4847a; color: white; }

.card:nth-child(3) .pill { background: rgba(201,185,154,0.2); color: #a09070; border-color: rgba(201,185,154,0.3); }
.card:nth-child(3) .pill:hover { background: #c9b99a; color: white; }

.card:nth-child(4) .pill { background: rgba(122,140,74,0.12); color: #7a8c4a; border-color: rgba(122,140,74,0.2); }
.card:nth-child(4) .pill:hover { background: #7a8c4a; color: white; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.2;
  pointer-events: none;
}

.card:nth-child(1) .blob { width: 120px; height: 120px; background: #94a067; right: -20px; top: -20px; }
.card:nth-child(2) .blob { width:  80px; height:  80px; background: #d4847a; right: -10px; bottom: -10px; }
.card:nth-child(3) .blob { width:  80px; height:  80px; background: #c9b99a; left: -10px;  top: -10px; }
.card:nth-child(4) .blob { width: 100px; height: 100px; background: #7a8c4a; right: -10px; top: -10px; }

@media (max-width: 640px) {
  .card:nth-child(n) { grid-column: span 6; }
}

.contact-section {
    padding: 0 20%;
    padding-bottom: 4%;
}

.contact-intro {
    margin-bottom: 1.5rem;
    color: #555;
    font-size: 0.9rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-label {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
}

.form-input {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    border: 1px solid #d0ccc4;
    border-radius: 8px;
    background: #fafaf8;
    color: #333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: #94a067;
    box-shadow: 0 0 0 3px rgba(148, 160, 103, 0.15);
}

.form-textarea {
    resize: vertical;
    min-height: 140px;
}

.form-submit {
    font-family: "Bitcount", system-ui;
    font-size: 1rem;
    background: #94a067;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.85rem 2rem;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.2s, transform 0.15s;
    text-shadow: gray 1px 1px;
}

.form-submit:hover {
    background: #7a8c4a;
    transform: translateY(-2px);
}


.tt-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E1F5EE;
    border: 1px solid #5DCAA5;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #085041;
    font-family: 'Space Mono', monospace;
}

.tt-grade-num {
    font-size: 20px;
    font-weight: 700;
    color: #0F6E56;
}

.tt-row-pro .tt-icon { color: #0F6E56; }
.tt-row-con .tt-icon { color: #A32D2D; }
.tt-row-pro .tt-row-text { color: #085041; }
.tt-row-con .tt-row-text { color: #555; }


.tt-col {
    padding: 1.25rem;
}

.tt-col-udp  { background: #E1F5EE; }
.tt-col-tcp  { background: #f9f9f9; }

.tt-col-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #fff;
    writing-mode: vertical-rl;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: 'Space Mono', monospace;
}

.tt-col-title {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 0.75rem;
}

.tt-col-udp .tt-col-title { color: #0F6E56; }
.tt-col-tcp .tt-col-title { color: #222; }

.tt-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
    font-family: 'Space Mono', monospace;
}

.tt-row:last-child { margin-bottom: 0; }


.tt-compare {
    padding: 1.5rem 5% 2rem;
    align-self: center;
}

.tt-compare-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 1rem;
    font-family: 'Space Mono', monospace;
}

.tt-compare-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    border: 1px solid #ccc;
    border-radius: 12px;
    overflow: hidden;
}


.tt-terminal {
    background: #0d1117;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #30363d;
    width: 70%;
    margin-top: 5%
}

.tt-terminal-bar {
    background: #161b22;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #30363d;
}

.tt-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.tt-dot-r { background: #ff5f57; }
.tt-dot-y { background: #ffbd2e; }
.tt-dot-g { background: #28c840; }

.tt-filename {
    font-size: 11px;
    color: #8b949e;
    margin-left: 6px;
    font-family: 'Space Mono', monospace;
}

.tt-code {
    padding: 14px 16px;
    font-size: 10.5px;
    line-height: 1.65;
    color: #e6edf3;
    font-family: 'Space Mono', monospace;
    overflow-x: auto;
}

.tt-code .kw  { color: #ff7b72; }
.tt-code .fn  { color: #d2a8ff; }
.tt-code .str { color: #a5d6ff; }
.tt-code .cm  { color: #8b949e; }
.tt-code .tp  { color: #ffa657; }

.dp-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 10px;
    width: 100%;
    align-items: center;
}

.dp-header iframe {
    width: 100%;
    max-width: 560px;
    height: 315px;
}
/*DP VIDEO FIX*/
@media (min-width: 1025px) and (max-width: 1520px){
    .dp-header {
        grid-template-columns: 1fr;
    }
    .dp-header iframe {
        width: 100%;
        max-width: 462;
        height: 260px;
        justify-self: center;
    }
}
/*IPAD FIXES*/
@media (min-width: 769px) and (max-width: 1024px) {

  .browser-window {
    max-width: 100%;
  }

  .grid-bg {
    padding: 16px;
  }

  /* Hero grid: stack on tablet */
  .maingrid {
    grid-template-columns: 1fr;
  }
  .dp-header {
      grid-template-columns: 1fr;
  }
  .dp-header iframe {
      width: 100%;
      max-width: 462;
      height: 260px;
      justify-self: center;

  }

  .maingrid iframe {
    width: 100%;
    height: 260px;
  }

  /* Due Process bottom section: 2x2 grid instead of broken 2-col */
  .maingrid-dueprocess {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "iframe       dp-responsibilities"
      "resp2        bug";
    width: auto;
    padding-left: 4%;
    padding-right: 4%;
  }

  .maingrid-dueprocess .iframe iframe {
    width: 100%;
  }

  /* Tidal Tussle grids */
  .maingrid-tt,
  .maingrid-networking {
    grid-template-columns: 1fr;
    padding-left: 4%;
    padding-right: 4%;
    width: auto;
  }

  .tt-terminal {
    width: 100%;
    box-sizing: border-box;
  }

  .tt-compare-grid {
    grid-template-columns: 1fr auto 1fr;
  }

  /* Other project grids */
  .maingrid-traffic,
  .maingrid-vr {
    grid-template-columns: 1fr;
    padding-left: 4%;
    padding-right: 4%;
    width: auto;
  }

  /* Skills: 2 col instead of 6 */
  .bento {
    grid-template-columns: 1fr 1fr;
  }

  .card:nth-child(n) {
    grid-column: span 1;
  }

  .skills-section {
    padding: 0 8%;
    padding-bottom: 4%;
  }

  .contact-section {
    padding: 0 8%;
    padding-bottom: 4%;
  }

  /* Project grid */
  .project-images-gd {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "due-process-img     loco-comotives-img"
      "dp-desc             lc-desc"
      "network-library-img tidal-tussle-img"
      "udp-desc            tidal-tussle-desc"
      "traffic-game-img    vr-project-img"
      "traffic-game-desc   vr-desc";
    padding-left: 4%;
    padding-right: 4%;
    width: auto;
  }

  .project-images-gd img {
    width: 100%;
  }
}
/* ============================================
   MOBILE FIXES — paste at the bottom of stylesheet.css
   ============================================ */

@media (max-width: 768px) {

  /* --- Outer wrapper --- */
  .grid-bg {
    padding: 12px;
  }

  .browser-window {
    max-width: 100%;
  }

  /* --- Nav: allow wrapping, smaller text --- */
  .nav {
    flex-wrap: wrap;
  }

  .nav-item {
    font-size: 9px;
    padding: 6px 10px;
  }

  /* --- Intro --- */
  .browser-intro {
    min-height: 280px;
    padding: 8%;
  }

  h1 .name-styling {
    font-size: 48px;
  }

  h1 .name-styling:hover {
    font-size: 52px;
  }

  h1 {
    font-size: 36px !important;
  }

  /* --- Bio: hide the laptop sprite on mobile, it overlaps text --- */
  .laptop-sprite {
    display: none;
  }

  .bio-styling {
    padding: 4% 6%;
  }

  /* --- Projects: one card per project (image → title → description) --- */
  .project-images-gd {
    display: flex;
    flex-direction: column;
    padding: 0 6%;
    width: auto;
    margin-top: 20px;
    gap: 0;
  }

  /* Each image becomes the top of its card */
  .project-images-gd img {
    width: 100%;
    height: 200px;
    border-radius: 10px 10px 0 0;
    display: block;
  }

  /* Each desc block becomes the bottom of its card */
  .project-images-gd > div {
    border: 1px solid #e8e4de;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 12px 16px 20px;
    margin-bottom: 20px;
    background: #fafaf8;
  }

  .project-images-gd > div h2 {
    margin: 0 0 6px 0;
    font-size: 20px;
  }

  .project-images-gd > div p {
    margin: 0;
    font-size: 0.8rem;
    color: #555;
  }

  .project-images-gd a {
    font-size: 20px;
  }

  /* Reset grid-area since we're using flex now */
  .due-process-img,
  .loco-comotives-img,
  .network-library-img,
  .tidal-tussle-img,
  .traffic-game-img,
  .vr-project-img,
  .dp-desc,
  .lc-desc,
  .udp-desc,
  .tidal-tussle-desc,
  .traffic-game-desc,
  .vr-desc {
    grid-area: unset;
  }

  /* Force the correct visual order so image always comes before its desc */
  .due-process-img    { order: 1; }
  .dp-desc            { order: 2; }
  .loco-comotives-img { order: 3; }
  .lc-desc            { order: 4; }
  .network-library-img{ order: 5; }
  .udp-desc           { order: 6; }
  .tidal-tussle-img   { order: 7; }
  .tidal-tussle-desc  { order: 8; }
  .traffic-game-img   { order: 9; }
  .traffic-game-desc  { order: 10; }
  .vr-project-img     { order: 11; }
  .vr-desc            { order: 12; }

  /* --- Skills: remove the crushing side padding --- */
  .skills-section {
    padding: 0 4%;
    padding-bottom: 4%;
  }

  .bento {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .card {
    width: 100%;
    box-sizing: border-box;
  }

  /* --- Timeline: stack date below description --- */
  .entry div {
    flex-direction: column;
    gap: 2px;
  }

  .subtle {
    font-size: 0.8em;
  }

  /* --- Contact: single column form --- */
  .contact-section {
    padding: 0 6%;
    padding-bottom: 6%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* --- Section titles --- */
  .project-title,
  .experience-title {
    padding-left: 6%;
  }

  .project-images-gd img {
  display: none;
}

.project-images-gd > div {
  border: 1px solid #e8e4de;
  border-radius: 10px;
  padding: 12px 16px 20px;
  margin-bottom: 12px;
  background: #fafaf8;
}

  .maingrid {
    grid-template-columns: 1fr;
    padding-left: 0;
    width: 100%;
  }
  .dp-header {
      grid-template-columns: 1fr;
  }
  .dp-header iframe {
      width: 100%;
      height: 220px;
      justify-self: center;
  }
 
  .maingrid iframe {
    width: 100%;
    height: 220px;
  }
 
  /* --- Bottom section: stack Steam widget above responsibilities --- */
  .maingrid-dueprocess {
    grid-template-columns: 1fr;
    grid-template-areas:
      "iframe"
      "dp-responsibilities"
      "resp2"
      "bug";
    padding-left: 5%;
    padding-right: 5%;
    width: auto;
    gap: 20px;
  }
 
  .maingrid-dueprocess .iframe iframe {
    width: 100%;
    height: 190px;
  }
 
  /* --- Responsibilities list: single column, full width --- */
  .features-list {
    grid-template-columns: 1fr;
    width: 100%;
  }
 
  /* --- Game content padding --- */
  .game-content {
    padding: 4%;
  }

  .maingrid {
    grid-template-columns: 1fr;
    padding-left: 0;
    width: 100%;
  }
 
  .maingrid video {
    width: 100%;
    height: auto;
  }
 
  /* --- loco-features: stack text above systems list --- */
  .loco-features {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    width: auto;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 20px;
  }
 
  /* --- Gallery: fixed height so it doesn't go tiny --- */
  .gallery img {
    height: 160px;
  }
 
  /* --- Game content padding --- */
  .game-content {
    padding: 4%;
  }

    .maingrid iframe {
    width: 100%;
    height: 220px;
  }
 
  /* --- Joystick: stop it floating awkwardly --- */
  .joystick {
    float: none;
    display: block;
    margin-top: 12px;
  }
 
  /* --- Features section: stack gif above features list --- */
  .maingrid-networking {
    grid-template-columns: 1fr;
    padding-left: 5%;
    padding-right: 5%;
    width: auto;
  }
 
  .maingrid-networking .demo-img {
    width: 100%;
    height: auto;
  }
 
  /* --- Features list: single column --- */
  .features-list {
    grid-template-columns: 1fr;
    width: 100%;
  }
 
  /* --- Title overflowing off screen --- */
  .networking-header {
    font-size: 1.6rem !important;
    word-break: break-word;
  }

    .maingrid .demo-img {
    width: 100%;
    height: auto;
  }
 
  /* --- Joystick: stop floating into the h2 --- */
  .joystick {
    float: none;
    display: block;
    margin-top: 12px;
  }
 
  /* --- VR features section: stack image above list --- */
  .maingrid-vr {
    grid-template-columns: 1fr;
    padding-left: 5%;
    padding-right: 5%;
    width: auto;
  }
 
  .maingrid-vr .demo-img {
    width: 100%;
    height: auto;
  }
 
  /* --- h2 getting clipped --- */
  h2 {
    font-size: 20px !important;
    word-break: break-word;
  }

    .traffic {
    float: none;
    display: block;
    margin-top: 12px;
  }
 
  /* --- Top: gameplay gif full width --- */
  .maingrid .demo-img {
    width: 100%;
    height: auto;
  }
 
  /* --- Bottom: stack cover image above text --- */
  .maingrid-traffic {
    grid-template-columns: 1fr;
    padding-left: 5%;
    padding-right: 5%;
    width: auto;
  }
 
  .maingrid-traffic .demo-img {
    width: 100%;
    height: auto;
  }
    .maingrid-tt {
    grid-template-columns: 1fr;
    padding-left: 0;
    width: 100%;
  }
 
  /* --- Fish sprite: stop floating --- */
  .fish {
    float: none;
    display: block;
    margin-top: 12px;
  }
 
  /* --- Code block: contain it, allow horizontal scroll --- */
  .tt-terminal {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    margin-top: 16px;
  }
 
  .tt-code {
    white-space: pre;
    font-size: 0.7rem;
    overflow-x: auto;
  }
 
  /* --- UDP vs TCP comparison: tighten up --- */
  .tt-compare {
    padding: 0 4%;
    box-sizing: border-box;
  }
 
  .tt-compare-grid {
    gap: 8px;
  }
 
  .tt-col {
    padding: 12px;
  }
 
  .tt-col-title {
    font-size: 0.9rem;
  }
 
  .tt-row-text {
    font-size: 0.75rem;
  }
 
  .tt-choice-banner {
    font-size: 0.8rem;
  }
}

.bio-quote {
    border-left: 3px solid navy;
    margin: 1.25rem 0 0 1rem;
    padding-left: 1rem;
    font-style: italic;
    color: #555;
    font-size: 0.95em;
}