/* ==========================================================================
   Joseph Ward — Games Design Portfolio
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* neutrals */
  --black: #0a0908;
  --near-black: #121110;
  --panel: #171513;
  --panel-2: #1e1b18;
  --line: #2c2825;
  --ash: #8a827a;
  --bone: #ece7df;
  --white: #fbf9f5;

  /* EruptionEscape — orange / black / volcanic */
  --ee-accent: #ff6a1a;
  --ee-accent-2: #ff9142;
  --ee-ember: #c92e12;
  --ee-glow: rgba(255,106,26,.35);

  /* TacticalTrials — red / black / military */
  --tt-accent: #d81c1c;
  --tt-accent-2: #ff3b3b;
  --tt-olive: #3a3730;
  --tt-glow: rgba(216,28,28,.35);

  /* Qualifications — steel blue / academic */
  --edu-accent: #2f7dc4;
  --edu-accent-2: #6bb0e8;
  --edu-glow: rgba(47,125,196,.32);

  --radius: 4px;
  --radius-lg: 10px;

  --font-display: 'Oswald', 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 .5em;
  line-height: 1.08;
}
p{ margin: 0 0 1em; color: var(--ash); max-width: 68ch; }
.container{ width:100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section{ position: relative; }
.eyebrow{
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: .8em;
  display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:28px; height:2px; background: currentColor; opacity:.5; }

button, .btn, a.btn{
  font-family: var(--font-display);
  cursor:pointer;
  border: none;
  outline-offset: 3px;
}
:focus-visible{ outline: 2px solid var(--white); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Top nav ---------- */
.topnav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  background: rgba(10,9,8,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}
.topnav .container{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ font-family: var(--font-display); font-weight:700; letter-spacing:.04em; font-size:1.05rem; text-decoration:none; color:var(--white); text-transform:uppercase; }
.brand span{ color: var(--ee-accent); }
.navlinks{ display:flex; gap: 28px; list-style:none; margin:0; padding:0; }
.navlinks a{
  text-decoration:none; font-family: var(--font-display); font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--ash);
  padding: 8px 2px; border-bottom: 2px solid transparent; transition:.2s;
}
.navlinks a:hover{ color: var(--white); }
.navtoggle{ display:none; background:none; border:none; color:var(--white); font-size:1.6rem; }
@media (max-width: 860px){
  .navlinks{ display:none; }
  .navtoggle{ display:block; }
}

/* ---------- Buttons ---------- */
.btnrow{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 1.6em; }
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding: 14px 26px; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border-radius: var(--radius); font-weight:600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  border: 1px solid transparent;
}
.btn:hover{ transform: translateY(-2px); }
.btn.disabled{ opacity:.4; pointer-events:none; }

/* EE buttons */
.btn-ee-solid{ background: var(--ee-accent); color:#160b04; box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn-ee-solid:hover{ box-shadow: 0 10px 30px -8px var(--ee-glow); background: var(--ee-accent-2); }
.btn-ee-ghost{ background: transparent; border-color: var(--ee-accent); color: var(--ee-accent-2); }
.btn-ee-ghost:hover{ background: rgba(255,106,26,.1); }

/* TT buttons */
.btn-tt-solid{ background: var(--tt-accent); color:#180404; }
.btn-tt-solid:hover{ box-shadow: 0 10px 30px -8px var(--tt-glow); background: var(--tt-accent-2); }
.btn-tt-ghost{ background: transparent; border-color: var(--tt-accent); color: var(--tt-accent-2); }
.btn-tt-ghost:hover{ background: rgba(216,28,28,.1); }

.btn-neutral{ background: var(--panel-2); color: var(--white); border-color: var(--line); }
.btn-neutral:hover{ background:#26221e; }

/* Qualifications buttons */
.btn-edu-solid{ background: var(--edu-accent); color:#04121e; }
.btn-edu-solid:hover{ box-shadow: 0 10px 30px -8px var(--edu-glow); background: var(--edu-accent-2); }
.btn-edu-ghost{ background: transparent; border-color: var(--edu-accent); color: var(--edu-accent-2); }
.btn-edu-ghost:hover{ background: rgba(47,125,196,.1); }

/* ==========================================================================
   HOME / LANDING
   ========================================================================== */
.home-hero{
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 140px 24px 80px;
  position: relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 22% 20%, rgba(255,106,26,.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 78%, rgba(216,28,28,.14), transparent 60%),
    var(--black);
}
.home-hero .kicker{
  font-family: var(--font-display); letter-spacing:.3em; text-transform:uppercase;
  color: var(--ash); font-size:.8rem; margin-bottom: 22px;
}
.home-hero h1{
  font-size: clamp(2.6rem, 7vw, 5.6rem); color: var(--white); margin-bottom:.2em;
}
.home-hero h1 .hl-ee{ color: var(--ee-accent); }
.home-hero h1 .hl-tt{ color: var(--tt-accent); }
.home-hero .sub{ max-width: 60ch; margin: 0 auto 2.2em; color: var(--ash); font-size: 1.05rem; }

.project-picker{
  display:grid; grid-template-columns: 1fr 1fr; gap: 22px; width:100%; max-width: 920px; margin-top: 1.5em;
}
@media (max-width: 720px){ .project-picker{ grid-template-columns: 1fr; } }

.pick-card{
  position:relative; text-decoration:none; border-radius: var(--radius-lg);
  padding: 34px 26px; border: 1px solid var(--line); overflow:hidden;
  background: var(--panel);
  transition: transform .25s ease, border-color .25s ease;
  text-align:left;
}
.pick-card:hover{ transform: translateY(-4px); }
.pick-card .tag{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:14px; display:block; }
.pick-card h3{ font-size: 1.7rem; color: var(--white); margin-bottom:.35em; }
.pick-card p{ font-size:.92rem; margin-bottom: 1.2em; }
.pick-card .go{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5em; }

.pick-ee{ border-color: rgba(255,106,26,.25); }
.pick-ee:hover{ border-color: var(--ee-accent); box-shadow: 0 20px 50px -20px var(--ee-glow); }
.pick-ee .tag{ color: var(--ee-accent); }
.pick-ee .go{ color: var(--ee-accent-2); }

.pick-tt{ border-color: rgba(216,28,28,.25); }
.pick-tt:hover{ border-color: var(--tt-accent); box-shadow: 0 20px 50px -20px var(--tt-glow); }
.pick-tt .tag{ color: var(--tt-accent); }
.pick-tt .go{ color: var(--tt-accent-2); }

.scrolldown{ margin-top: 56px; color: var(--ash); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; }

/* about strip on home */
.about-strip{ padding: 90px 0; border-top:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items:start; }
@media (max-width: 820px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }
.about-grid h2{ font-size: clamp(1.8rem,4vw,2.6rem); color:var(--white); }
.taglist{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 1.4em; }
.tag-chip{
  font-family: var(--font-display); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  padding: 8px 14px; border:1px solid var(--line); border-radius: 999px; color: var(--bone);
}
.contact-mini{ display:flex; flex-direction:column; gap:10px; font-family: var(--font-display); letter-spacing:.03em; }
.contact-mini a{ text-decoration:none; color: var(--white); }
.contact-mini .label{ color: var(--ash); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; display:block; margin-bottom:2px; }
.contact-mini div{ margin-bottom: 14px; }

.cv-picker{ position:relative; }
.cv-picker summary{ cursor:pointer; list-style:none; }
.cv-picker summary::-webkit-details-marker{ display:none; }
.cv-picker-menu{
  display:flex; flex-direction:column; gap:2px; margin-top:10px;
  background: var(--panel-2); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; width:max-content; max-width: 280px;
}
.cv-picker-menu a{
  padding:10px 14px; font-size:.82rem; color: var(--bone); white-space:nowrap;
  transition: background .15s ease, color .15s ease;
}
.cv-picker-menu a:hover{ background: var(--panel); color: var(--white); }
.cv-picker[open] summary{ color: var(--edu-accent-2); }

footer.site-footer{
  padding: 34px 0; text-align:center; color: var(--ash); font-size:.8rem;
  border-top:1px solid var(--line);
}

/* ==========================================================================
   PROJECT PAGE SHARED SCAFFOLD (theme via [data-theme])
   ========================================================================== */
[data-theme="ee"]{ --acc: var(--ee-accent); --acc2: var(--ee-accent-2); --glow: var(--ee-glow); }
[data-theme="tt"]{ --acc: var(--tt-accent); --acc2: var(--tt-accent-2); --glow: var(--tt-glow); }
[data-theme="edu"]{ --acc: var(--edu-accent); --acc2: var(--edu-accent-2); --glow: var(--edu-glow); }

.proj-hero{
  min-height: 92svh; display:flex; align-items:flex-end;
  padding: 160px 0 80px; position:relative; overflow:hidden;
}
[data-theme="ee"] .proj-hero{
  background:
    linear-gradient(180deg, rgba(10,9,8,.35), rgba(10,9,8,.92) 78%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,106,26,.28), transparent 65%),
    repeating-linear-gradient(115deg, rgba(255,106,26,.05) 0 2px, transparent 2px 34px),
    var(--black);
}
[data-theme="tt"] .proj-hero{
  background:
    linear-gradient(180deg, rgba(10,9,8,.35), rgba(10,9,8,.92) 78%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(216,28,28,.24), transparent 65%),
    repeating-linear-gradient(135deg, rgba(216,28,28,.05) 0 2px, transparent 2px 34px),
    var(--black);
}
[data-theme="edu"] .proj-hero{
  background:
    linear-gradient(180deg, rgba(10,9,8,.35), rgba(10,9,8,.92) 78%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(47,125,196,.22), transparent 65%),
    repeating-linear-gradient(115deg, rgba(47,125,196,.05) 0 2px, transparent 2px 34px),
    var(--black);
}
.proj-hero .eyebrow{ color: var(--acc2); }
.proj-hero h1{ font-size: clamp(2.6rem,8vw,6rem); color: var(--white); margin-bottom:.15em; }
.proj-hero .tagline{ font-size: clamp(1rem,2vw,1.3rem); color: var(--bone); max-width: 46ch; margin-bottom: 0; font-family: var(--font-display); text-transform:none; letter-spacing:.01em; }
.proj-hero .meta-strip{
  display:flex; flex-wrap:wrap; gap: 10px 28px; margin-top: 2em; padding-top: 1.6em; border-top:1px solid var(--line);
}
.meta-strip .m{ display:flex; flex-direction:column; gap:2px; }
.meta-strip .m .k{ font-family: var(--font-display); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash); }
.meta-strip .m .v{ font-family: var(--font-display); font-size:.95rem; color: var(--white); }

.section-pad{ padding: 84px 0; border-top: 1px solid var(--line); }
.section-head{ max-width: 780px; margin-bottom: 2.4em; }
.section-head h2{ font-size: clamp(1.9rem,4vw,2.8rem); color: var(--white); }
.section-head .eyebrow{ color: var(--acc2); }

.lede{ font-size: 1.08rem; color: var(--bone); max-width: 74ch; }

.twocol{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 860px){ .twocol{ grid-template-columns:1fr; } }

.cardlist{ display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; list-style:none; margin:0; padding:0; }
@media (max-width: 700px){ .cardlist{ grid-template-columns: 1fr; } }
.cardlist li{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; color: var(--bone); font-size:.95rem; display:flex; gap:12px; align-items:flex-start;
}
.cardlist li::before{ content:"—"; color: var(--acc); flex-shrink:0; font-weight:700; }

/* facts grid */
.factgrid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; margin-top: 2em; }
.factgrid .fact{ background: var(--panel); padding: 20px 18px; }
.factgrid .fact .k{ font-family:var(--font-display); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash); display:block; margin-bottom:6px; }
.factgrid .fact .v{ font-family:var(--font-display); font-size:1.1rem; color:var(--white); }

/* system / feature blocks */
.sysblock{
  display:grid; grid-template-columns: 46px 1fr; gap: 22px; padding: 30px 0; border-top:1px solid var(--line);
}
.sysblock:first-child{ border-top:none; }
.sysblock .num{ font-family: var(--font-display); font-size:1.3rem; color: var(--acc); }
.sysblock h3{ font-size: 1.35rem; color: var(--white); }
.sysblock .highlights{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 1em; }
.sysblock .highlights span{
  font-size:.76rem; font-family: var(--font-display); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--bone);
}

/* problem / bug cards */
.probgrid{ display:flex; flex-direction:column; gap: 18px; }
.probcard{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; }
.probcard .status{ font-family: var(--font-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: #6fbf73; margin-bottom: .8em; display:inline-block; }
.probcard h3{ font-size: 1.25rem; color: var(--white); margin-bottom: .7em; }
.probcard .pgrid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 1em; }
@media (max-width: 900px){ .probcard .pgrid{ grid-template-columns: 1fr 1fr; } }
.probcard .pgrid .pk{ font-family: var(--font-display); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--acc2); margin-bottom:.4em; display:block; }
.probcard .pgrid p{ font-size:.9rem; margin:0; }

/* timeline */
.timeline{ display:flex; flex-direction:column; }
.tstep{ display:grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 26px 0; border-top:1px solid var(--line); }
.tstep:first-child{ border-top:none; }
.tstep .twhen{ font-family: var(--font-display); color: var(--acc2); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
.tstep h4{ color:var(--white); font-size:1.1rem; margin-bottom:.4em; }
@media (max-width:640px){ .tstep{ grid-template-columns:1fr; gap:6px; } }

/* download panel */
.dlpanel{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px; display:grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
@media (max-width: 820px){ .dlpanel{ grid-template-columns:1fr; } }
.dlitem{ display:flex; flex-direction:column; gap:10px; }
.dlitem .dk{ font-family: var(--font-display); font-size:.95rem; color:var(--white); text-transform:uppercase; letter-spacing:.04em; }
.dlitem .dd{ font-size:.85rem; color:var(--ash); margin:0; }
.filesize{ color: var(--ash); font-size:.78rem; }

/* video block */
.videowrap{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:#000; }
.videowrap video{ width:100%; display:block; }

/* gallery / slide viewer */
.gallery-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom: 1.6em; }
.gallery-count{ font-family: var(--font-display); font-size:.85rem; color:var(--ash); letter-spacing:.06em; }
.slidegrid{
  display:grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 14px;
}
.slidegrid button.sthumb{
  position:relative; padding:0; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; background: var(--panel); aspect-ratio: 16/9; cursor:pointer;
}
.slidegrid button.sthumb img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease, opacity .35s ease; }
.slidegrid button.sthumb:hover img{ transform: scale(1.05); }
.slidegrid button.sthumb .sn{
  position:absolute; bottom:0; left:0; right:0; padding: 6px 9px;
  font-family: var(--font-display); font-size:.72rem; letter-spacing:.06em;
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  color: var(--white);
}
.slidegrid button.sthumb:focus-visible{ outline: 2px solid var(--acc); }

/* lightbox */
.lightbox{
  position: fixed; inset:0; background: rgba(6,5,4,.96); z-index: 1000;
  display:none; align-items:center; justify-content:center; padding: 40px 20px;
}
.lightbox.open{ display:flex; }
.lightbox .lb-inner{ max-width: 1100px; width:100%; }
.lightbox img{ width:100%; border-radius: 6px; border:1px solid var(--line); }
.lightbox .lb-controls{ display:flex; align-items:center; justify-content:space-between; margin-top: 16px; }
.lightbox .lb-count{ font-family: var(--font-display); color: var(--ash); letter-spacing:.08em; font-size:.85rem; }
.lightbox .lb-btns{ display:flex; gap:10px; }
.lightbox button{
  background: var(--panel-2); color:var(--white); border:1px solid var(--line); border-radius: var(--radius);
  padding: 10px 18px; font-family: var(--font-display); letter-spacing:.08em; text-transform:uppercase; font-size:.78rem;
}
.lightbox button:hover{ background: var(--acc); color:#160b04; border-color: var(--acc); }
.lightbox .lb-close{ position:absolute; top:22px; right:26px; font-size:1.3rem; padding: 8px 14px; }

/* skills grid */
.skillgrid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; margin-top:1.6em; }
.skillgrid .sk{
  border:1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  font-family: var(--font-display); font-size:.86rem; color: var(--bone); background: var(--panel);
}

/* tools */
.toolgrid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; margin-top: 2em; }
.toolcard{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.toolcard .ticon{ font-size: 1.5rem; margin-bottom: .5em; display:block; }
.toolcard h4{ color:var(--white); font-size:1rem; margin-bottom:.4em; }
.toolcard p{ font-size:.85rem; margin:0; }

/* back-to-top / project switch pill */
.switchpill{
  position: fixed; bottom: 26px; right: 26px; z-index: 400;
  background: var(--panel); border:1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-family: var(--font-display); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color: var(--white); display:flex; align-items:center; gap:8px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
}
.switchpill:hover{ background: var(--acc); color:#160b04; }

/* CV / contact section reuse */
.contact-section{ padding: 90px 0; border-top:1px solid var(--line); text-align:center; }
.contact-section h2{ font-size: clamp(2rem,5vw,3rem); color:var(--white); }
.contact-section p{ margin:0 auto 1.6em; }
.contact-links{ display:flex; justify-content:center; gap: 16px; flex-wrap:wrap; }

.note{ font-size:.82rem; color: var(--ash); font-style: italic; }