/* =====================================================
   PORTFOLIO.CSS — Rikoe Thomas
   Theme: Retro Arcade / 8-bit Gaming
   ===================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   :root {
	 --bg:       #0a0a0a;
	 --surface:  #111111;
	 --card:     #161616;
	 --border:   #2a2a2a;
   
	 --yellow:   #ffe600;
	 --red:      #ff3c3c;
	 --green:    #3dff91;
	 --blue:     #3dc8ff;
   
	 --text:     #f0f0f0;
	 --dim:      #777777;
   
	 --pixel: 'Press Start 2P', monospace;
	 --mono:  'Space Mono', monospace;
   
	 --nav-h:    60px;
	 --content-w: 1100px;
	 --snap:     0.1s ease;
   }
   
   html { font-size: 16px; }
   
   body {
	 background: var(--bg);
	 color: var(--text);
	 font-family: var(--mono);
	 line-height: 1.65;
	 -webkit-font-smoothing: antialiased;
	 min-height: 100vh;
   }
   
   /* scanlines */
   body::before {
	 content: '';
	 position: fixed;
	 inset: 0;
	 background: repeating-linear-gradient(
	   0deg,
	   transparent,
	   transparent 3px,
	   rgba(0,0,0,0.02) 3px,
	   rgba(0,0,0,0.02) 4px
	 );
	 pointer-events: none;
	 z-index: 9000;
   }
   
   img { max-width: 100%; height: auto; display: block; }
   a   { color: var(--yellow); text-decoration: none; transition: color var(--snap); }
   a:hover { color: var(--text); }
   
   /* ── NAV ── */
   #site-nav {
	 position: sticky;
	 top: 0;
	 z-index: 200;
	 height: var(--nav-h);
	 background: var(--bg);
	 border-bottom: 2px solid var(--yellow);
	 display: flex;
	 align-items: center;
	 padding: 0 2rem;
	 gap: 2rem;
   }
   
   .nav-logo {
	 font-family: var(--pixel);
	 font-size: 0.65rem;
	 color: var(--yellow);
	 white-space: nowrap;
	 flex-shrink: 0;
	 letter-spacing: 0.05em;
	 text-shadow: 2px 2px 0 rgba(255,230,0,0.25);
	 white-space: nowrap;
	 flex-shrink: 0;
   }
   
   .nav-links {
	 list-style: none;
	 display: flex;
	 gap: 0;
   }
   .nav-links a {
	 font-family: var(--pixel);
	 font-size: 0.5rem;
	 color: var(--dim);
	 padding: 0.45rem 0.8rem;
	 letter-spacing: 0.05em;
	 border: 2px solid transparent;
	 display: block;
	 transition: all var(--snap);
   }
   .nav-links a:hover {
	 color: var(--yellow);
	 border-color: var(--yellow);
	 background: rgba(255,230,0,0.05);
   }
   .nav-links a.active {
	 color: var(--bg);
	 background: var(--yellow);
	 border-color: var(--yellow);
   }
   
   .nav-social {
	list-style: none;
	 display: flex;
	 margin-left: auto;
	 gap: 0.4rem;
	 align-items: center;
	 flex-shrink: 0;
   }
   .nav-social a {
	 color: var(--dim);
	 font-size: 0.95rem;
	 width: 32px;
	 height: 32px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 border: 2px solid var(--border);
	 transition: all var(--snap);
   }
   .nav-social a:hover { color: var(--yellow); border-color: var(--yellow); }
   
   .nav-toggle {
	 display: none;
	 background: none;
	 border: 2px solid var(--border);
	 color: var(--dim);
	 width: 32px;
	 height: 32px;
	 cursor: pointer;
	 font-size: 0.85rem;
	 align-items: center;
	 justify-content: center;
	 flex-shrink: 0;
	 transition: all var(--snap);
   }
   .nav-toggle:hover { border-color: var(--yellow); color: var(--yellow); }
   
   /* ── HERO ── */
   .hero {
	 max-width: var(--content-w);
	 margin: 0 auto;
	 padding: 5rem 2rem 4rem;
	 text-align: center;
   }
   
   .hero-badge {
	 display: inline-block;
	 font-family: var(--pixel);
	 font-size: 0.5rem;
	 color: var(--green);
	 letter-spacing: 0.12em;
	 margin-bottom: 2.5rem;
	 padding: 0.45rem 1rem;
	 border: 2px solid var(--green);
   }
   
   @keyframes blink-slow {
	 0%, 100% { opacity: 1; }
	 50%       { opacity: 0.35; }
   }
   
   .hero h1 {
	 font-family: var(--pixel);
	 font-size: clamp(1rem, 2.8vw, 1.9rem);
	 color: var(--text);
	 line-height: 1.7;
	 letter-spacing: 0.04em;
	 margin-bottom: 2rem;
   }
   .hero h1 em {
	 font-style: normal;
	 color: var(--yellow);
	 display: block;
	 margin-top: 0.6rem;
   }
   
   .hero-sub {
	 font-size: 0.875rem;
	 color: var(--dim);
	 max-width: 500px;
	 margin: 0 auto 2rem;
	 line-height: 1.9;
   }
   
   .cursor {
	 display: inline-block;
	 color: var(--yellow);
	 animation: blink-cursor 1s step-end infinite;
   }
   @keyframes blink-cursor {
	 0%, 100% { opacity: 1; }
	 50%       { opacity: 0; }
   }
   
   .hero-hint {
	font-family: var(--pixel);
	font-size: 0.62rem;
	color: var(--yellow);
	letter-spacing: 0.18em;
	text-decoration: none;
	display: inline-block;
	transition: color var(--snap);
  }
  .hero-hint:hover { color: var(--text); }
   
   /* ── SECTION DIVIDER ── */
   .section-header {
	 max-width: var(--content-w);
	 margin: 0 auto 1.75rem;
	 padding: 0 2rem;
	 display: flex;
	 align-items: center;
	 gap: 1rem;
   }
   .section-tag {
	 font-family: var(--pixel);
	 font-size: 0.45rem;
	 color: var(--yellow);
	 white-space: nowrap;
	 letter-spacing: 0.12em;
   }
   .section-title {
	 font-family: var(--pixel);
	 font-size: 0.65rem;
	 color: var(--text);
	 white-space: nowrap;
	 letter-spacing: 0.06em;
   }
   .section-line {
	 flex: 1;
	 height: 2px;
	 background: var(--border);
   }
   
   /* ── PROJECT GRID ── */
   .projects-grid {
	 display: grid;
	 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	 gap: 1.5rem;
	 max-width: var(--content-w);
	 margin: 0 auto 5rem;
	 padding: 0 2rem;
   }
   
   .project-card {
	 background: var(--card);
	 border: 2px solid var(--border);
	 display: flex;
	 flex-direction: column;
	 text-decoration: none;
	 color: var(--text);
	 box-shadow: 4px 4px 0 var(--border);
	 transition: transform var(--snap), box-shadow var(--snap), border-color var(--snap);
   }
   .project-card:hover {
	 border-color: var(--yellow);
	 box-shadow: 6px 6px 0 var(--yellow);
	 transform: translate(-2px, -2px);
	 color: var(--text);
   }
   .project-card.no-link {
	 opacity: 0.45;
	 pointer-events: none;
	 cursor: default;
   }
   
   .card-thumb {
	 position: relative;
	 aspect-ratio: 16 / 9;
	 overflow: hidden;
	 background: var(--surface);
	 border-bottom: 2px solid var(--border);
   }
   .card-thumb img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 filter: saturate(0.8);
	 transition: filter 0.2s ease, transform 0.2s ease;
   }
   .project-card:hover .card-thumb { border-color: var(--yellow); }
   .project-card:hover .card-thumb img { filter: saturate(1.1); transform: scale(1.04); }
   
   .card-thumb-overlay {
	 position: absolute;
	 inset: 0;
	 background: rgba(0,0,0,0.75);
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 opacity: 0;
	 transition: opacity var(--snap);
   }
   .project-card:hover .card-thumb-overlay { opacity: 1; }
   
   .card-cta {
	 font-family: var(--pixel);
	 font-size: 0.5rem;
	 color: var(--yellow);
	 letter-spacing: 0.1em;
	 border: 2px solid var(--yellow);
	 padding: 0.6rem 1rem;
	 display: flex;
	 align-items: center;
	 gap: 0.5rem;
   }
   
   .card-wip-badge {
	 position: absolute;
	 top: 0.6rem;
	 right: 0.6rem;
	 background: var(--red);
	 color: #fff;
	 font-family: var(--pixel);
	 font-size: 0.42rem;
	 letter-spacing: 0.08em;
	 padding: 0.25rem 0.5rem;
	 animation: blink-slow 1s step-end infinite;
   }
   
   .card-body {
	 padding: 1rem 1.1rem 1.25rem;
	 display: flex;
	 flex-direction: column;
	 gap: 0.4rem;
	 flex: 1;
   }
   .card-title {
	 font-family: var(--pixel);
	 font-size: 0.58rem;
	 color: var(--text);
	 letter-spacing: 0.04em;
	 line-height: 1.65;
   }
   .card-role {
	 font-size: 0.78rem;
	 font-weight: 700;
	 color: var(--green);
   }
   .card-date {
	 font-size: 0.7rem;
	 color: var(--dim);
	 margin-top: auto;
	 padding-top: 0.5rem;
   }
   
   .card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
   .tag {
	 font-family: var(--pixel);
	 font-size: 0.4rem;
	 padding: 0.22rem 0.5rem;
	 border: 1px solid;
	 letter-spacing: 0.06em;
   }
   .tag-qa       { color: var(--blue);   border-color: var(--blue);   background: rgba(61,200,255,0.07); }
   .tag-unity    { color: var(--yellow); border-color: var(--yellow); background: rgba(255,230,0,0.07); }
   .tag-design   { color: var(--red);    border-color: var(--red);    background: rgba(255,60,60,0.07); }
   .tag-ai       { color: var(--green);  border-color: var(--green);  background: rgba(61,255,145,0.07); }
   .tag-contract { color: #ff9f00;       border-color: #ff9f00;       background: rgba(255,159,0,0.07); }
   
   /* ── ABOUT ── */
   .about-wrap {
	 max-width: 780px;
	 margin: 3rem auto 5rem;
	 padding: 0 2rem;
	 display: flex;
	 flex-direction: column;
	 gap: 1.5rem;
   }
   .about-card {
	 background: var(--card);
	 border: 2px solid var(--border);
	 padding: 2rem 2.25rem;
	 box-shadow: 4px 4px 0 var(--border);
   }
   .about-card h2 {
	 font-family: var(--pixel);
	 font-size: 0.8rem;
	 color: var(--text);
	 margin-bottom: 1.25rem;
	 letter-spacing: 0.04em;
	 line-height: 1.9;
   }
   .about-card h2 em { font-style: normal; color: var(--yellow); }
   .about-card p { color: var(--dim); font-size: 0.875rem; line-height: 1.85; }
   
   .resume-actions { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-top: 1.75rem; }
   
   .btn {
	 display: inline-flex;
	 align-items: center;
	 gap: 0.5rem;
	 padding: 0.65rem 1.25rem;
	 font-family: var(--pixel);
	 font-size: 0.48rem;
	 letter-spacing: 0.07em;
	 border: 2px solid;
	 transition: all var(--snap);
	 text-decoration: none;
	 white-space: nowrap;
	 cursor: pointer;
   }
   .btn-primary {
	 background: var(--yellow);
	 color: var(--bg);
	 border-color: var(--yellow);
	 box-shadow: 3px 3px 0 rgba(255,230,0,0.35);
   }
   .btn-primary:hover {
	 background: transparent;
	 color: var(--yellow);
	 box-shadow: none;
	 transform: translate(2px, 2px);
   }
   .btn-outline {
	 background: transparent;
	 color: var(--dim);
	 border-color: var(--border);
   }
   .btn-outline:hover { border-color: var(--yellow); color: var(--yellow); }
   
   .resume-preview {
	 border: 2px solid var(--border);
	 box-shadow: 4px 4px 0 var(--border);
	 overflow: hidden;
   }
   .resume-preview img { width: 100%; display: block; }
   
   /* ── MINI HERO ── */
   .mini-hero {
	 max-width: var(--content-w);
	 margin: 0 auto;
	 padding: 4rem 2rem 3rem;
	 text-align: center;
   }
   .mini-hero h1 {
	 font-family: var(--pixel);
	 font-size: clamp(0.85rem, 2.2vw, 1.4rem);
	 color: var(--text);
	 margin-bottom: 1.25rem;
	 line-height: 1.8;
	 letter-spacing: 0.04em;
   }
   .mini-hero h1 em { font-style: normal; color: var(--red); }
   .mini-hero p { font-size: 0.875rem; color: var(--dim); max-width: 480px; margin: 0 auto; line-height: 1.85; }
   
   /* ── FOOTER ── */
   .site-footer {
	 border-top: 2px solid var(--border);
	 padding: 1.5rem 2rem;
	 text-align: center;
	 font-family: var(--pixel);
	 font-size: 0.42rem;
	 color: var(--dim);
	 letter-spacing: 0.12em;
   }
   
   /* ── DETAIL PAGES ── */
   .detail-back {
	 max-width: var(--content-w);
	 margin: 0 auto;
	 padding: 1.5rem 2rem 0;
   }
   .detail-back a {
	 font-family: var(--pixel);
	 font-size: 0.48rem;
	 color: var(--dim);
	 display: inline-flex;
	 align-items: center;
	 gap: 0.5rem;
	 letter-spacing: 0.08em;
	 transition: color var(--snap);
   }
   .detail-back a:hover { color: var(--yellow); }
   
   .detail-hero {
	 max-width: var(--content-w);
	 margin: 0 auto;
	 padding: 2rem 2rem 2.5rem;
   }
   .detail-hero h1 {
	 font-family: var(--pixel);
	 font-size: clamp(0.8rem, 2.2vw, 1.3rem);
	 color: var(--text);
	 line-height: 1.7;
	 margin-bottom: 1rem;
	 letter-spacing: 0.03em;
   }
   .detail-meta {
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 gap: 0.75rem;
	 margin-bottom: 1.25rem;
   }
   .detail-role { font-size: 0.82rem; font-weight: 700; color: var(--green); }
   .detail-date { font-size: 0.75rem; color: var(--dim); }
   
   .detail-desc {
	 font-size: 0.875rem;
	 color: var(--dim);
	 line-height: 1.85;
	 max-width: 700px;
   }
   
   .detail-specs {
	 display: flex;
	 flex-wrap: wrap;
	 gap: 0.5rem;
	 margin-top: 1.25rem;
   }
   .spec-item {
	 background: var(--surface);
	 border: 1px solid var(--border);
	 padding: 0.3rem 0.75rem;
	 font-size: 0.75rem;
	 color: var(--dim);
   }
   .spec-item strong { color: var(--yellow); }
   
   .detail-cover {
	 max-width: var(--content-w);
	 margin: 0 auto 3rem;
	 padding: 0 2rem;
   }
   .detail-cover img {
	 width: 100%;
	 border: 2px solid var(--border);
	 box-shadow: 6px 6px 0 var(--border);
   }
   
   .detail-body {
	 max-width: var(--content-w);
	 margin: 0 auto;
	 padding: 0 2rem 5rem;
	 display: flex;
	 flex-direction: column;
	 gap: 3rem;
   }
   
   .detail-section h3 {
	 font-family: var(--pixel);
	 font-size: 0.55rem;
	 color: var(--yellow);
	 margin-bottom: 1rem;
	 letter-spacing: 0.1em;
	 display: flex;
	 align-items: center;
	 gap: 0.75rem;
   }
   .detail-section h3::after {
	 content: '';
	 flex: 1;
	 height: 1px;
	 background: var(--border);
   }
   
   .detail-section ul {
	 list-style: none;
	 display: flex;
	 flex-direction: column;
	 gap: 0.75rem;
   }
   .detail-section ul li {
	 font-size: 0.85rem;
	 color: var(--dim);
	 line-height: 1.8;
	 padding-left: 1.5rem;
	 position: relative;
   }
   .detail-section ul li::before {
	 content: '▶';
	 position: absolute;
	 left: 0;
	 color: var(--yellow);
	 font-size: 0.55rem;
	 top: 0.28rem;
   }
   
   .detail-gallery {
	 display: grid;
	 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	 gap: 1rem;
   }
   .detail-gallery img {
	width: 100%;
	border: 2px solid var(--border);
	object-fit: contain;
	transition: border-color var(--snap);
  }
   .detail-gallery img:hover { border-color: var(--yellow); }
   
   .download-btns { display: flex; gap: 0.875rem; flex-wrap: wrap; }
   
   /* ── RESPONSIVE ── */
   @media (max-width: 720px) {
	 .nav-links { display: none; }
	 .nav-links.open {
	   display: flex;
	   flex-direction: column;
	   position: absolute;
	   top: var(--nav-h);
	   left: 0; right: 0;
	   background: var(--bg);
	   border-bottom: 2px solid var(--yellow);
	   padding: 0.5rem 1.5rem;
	   gap: 0;
	   z-index: 199;
	 }
	 .nav-toggle     { display: flex; }
	 .hero           { padding: 3rem 1.5rem 2.5rem; }
	 .mini-hero      { padding: 2.5rem 1.5rem 2rem; }
	 .projects-grid  { grid-template-columns: 1fr; padding: 0 1.5rem; }
	 .section-header { padding: 0 1.5rem; }
	 .about-wrap     { padding: 0 1.5rem; }
	 .about-card     { padding: 1.25rem; }
	 .resume-actions { flex-direction: column; }
	 .btn            { justify-content: center; }
	 .detail-hero    { padding: 1.5rem 1.5rem 2rem; }
	 .detail-cover   { padding: 0 1.5rem; }
	 .detail-body    { padding: 0 1.5rem 4rem; }
	 .detail-back    { padding: 1.25rem 1.5rem 0; }
	 .detail-gallery { grid-template-columns: 1fr; }
   }
   
   @media (max-width: 480px) {
	 #site-nav  { padding: 0 1rem; }
	 .nav-logo  { font-size: 0.52rem; }
	 .hero h1   { font-size: 0.88rem; }
   }