/* =========================================================
   Jackson Shuminski Portfolio — styles2.css
   - Smaller project images
   - Projects in two-column grid (auto rows)
   - Polished, responsive, professional theme
   ========================================================= */

/* ------------------------------
   Design Tokens
   ------------------------------ */
:root{
  --bg: #0f1115;
  --panel: #151923;
  --panel-2: #1b2130;
  --text: #e8ebf1;
  --muted: #a9b1c3;
  --link: #7cc7ff;
  --link-hover: #9bd6ff;
  --accent: #7c4dff;
  --accent-2: #2ee6a6;

  --radius: .9rem;
  --radius-lg: 1.2rem;
  --shadow-1: 0 8px 24px rgba(0,0,0,.22);
  --shadow-2: 0 12px 32px rgba(0,0,0,.28);

  --fs-1: clamp(2rem, 3.5vw + .5rem, 3rem);
  --fs-2: clamp(1.25rem, 1.2vw + .75rem, 1.65rem);
  --fs-3: 1.075rem;
  --fs-4: 1rem;

  --space-xs: .4rem;
  --space-sm: .7rem;
  --space: 1rem;
  --space-md: 1.35rem;
  --space-lg: 1.75rem;
  --space-xl: 2.25rem;
}

/* ------------------------------
   Base / Reset
   ------------------------------ */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ height: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: var(--fs-4);
  line-height: 1.6;
  background: radial-gradient(1200px 800px at 10% -10%, #1b1f2b 0%, transparent 60%),
              radial-gradient(1200px 800px at 110% 10%, #162234 0%, transparent 60%),
              var(--bg);

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover{ color: var(--link-hover); }
:focus-visible{ outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: .5rem; }
img{ max-width: 100%; display: block; }

/* ------------------------------
   Header / Hero
   ------------------------------ */
h1#top{
  font-size: var(--fs-1);
  text-align: center;
  margin: var(--space-xl) auto var(--space);
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.15;
  background: linear-gradient(90deg, var(--text) 0%, #cfe7ff 60%, var(--text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------
   Top Navigation (#topbar)
   ------------------------------ */
#topbar{
  list-style: none;
  display: flex;
  gap: .25rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: .5rem;
  margin: 0 auto var(--space-xl);
  position: sticky;
  top: .5rem;
  z-index: 50;
  width: min(980px, 94vw);
  background: color-mix(in oklab, var(--panel), black 8%);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in oklab, var(--panel-2), black 25%);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
#topbar li{ display: contents; }
#topbar a{
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
  color: var(--text);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  border: 1px solid transparent;
  margin: 0 2em;
  text-align: center;
  width: 20%;
}
#topbar a:hover{
  background: color-mix(in oklab, var(--panel-2), white 4%);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* ------------------------------
   Projects Section
   ------------------------------ */
#projects{ padding: 0 0 var(--space-xl); }
#projects > h1{
  font-size: var(--fs-2);
  text-align: center;
  margin: var(--space-lg) 0 var(--space);
  font-weight: 800;
  letter-spacing: .2px;
}

.intro img {
  max-height: 330px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

ul a {
  
  color: inherit;
  text-decoration: inherit;
}
ul a :hover {
  
  color: inherit;
  text-decoration: inherit;
}

/* Two-column grid for the list (auto rows) */
#projects > ul{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: 0 var(--space);
  max-width: 1200px;
  margin: 0 auto;
}

/* ------------------------------
   Project Card (vertical layout)
   ------------------------------ */
.project{
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), black 3%), color-mix(in oklab, var(--panel), black 10%));
  border: 1px solid color-mix(in oklab, var(--panel-2), black 30%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  isolation: isolate;
}
.project:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in oklab, var(--accent), var(--panel-2) 70%);
}

/* Smaller, consistent image size */
a img
{
  width: 100%;
  height: 220px;              /* ↓ Adjust this if you want even smaller images */
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.project > img{
  width: 100%;
  height: 220px;              /* ↓ Adjust this if you want even smaller images */
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* Content */
.project .intro{
  padding: var(--space-lg) var(--space-lg) var(--space);
}
.project .intro .title{
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: .25rem;
  margin-top: auto;
}
.project .intro .credit{
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: .5rem;
}
.project .desc{
  color: color-mix(in oklab, var(--text), black 25%);
  line-height: 1.65;
}

/* Links / actions */
.WhatIDid{
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: auto;
  align-items: center;
}
.WhatIDid h2{ font-size: 1rem; margin: 0; }
.WhatIDid h2 a,
.WhatIDid a{
  font-size: 1rem;  
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  padding: .15rem .5rem;
  border-radius: .7rem;
  border: 1px solid color-mix(in oklab, var(--panel-2), black 25%);
  background: color-mix(in oklab, var(--panel), black 4%);
  transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
}
.WhatIDid h2 a:hover,
.WhatIDid a:hover{
  background: color-mix(in oklab, var(--panel-2), white 6%);
  color: var(--link-hover);
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--panel-2), var(--accent) 40%);
}

/* ------------------------------
   Responsive
   ------------------------------ */
@media (max-width: 900px){
  #projects > ul{
    grid-template-columns: 1fr; /* single column on small screens */
    gap: var(--space-md);
    padding: 0 var(--space);
  }
  .project > img{ height: 200px; }
}

@media (max-width: 480px){
  :root{ --fs-3: 1.02rem; --fs-4: .975rem; }
  .WhatIDid a{ width: 100%; justify-content: center; }
}

/* ===== Volumetric Smoke page support ===== */

/* Page container */
#work{
  width: min(1100px, 92vw);
  margin: clamp(18px, 3vw, 36px) auto;
}

/* Page title inside #work */
#work > h1{
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: .2px;
  margin: 0 0 1rem 0;
  text-align: center;
}

/* List reset/layout */
#work > ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-lg, 20px);
}

/* Reusable “job” card styling */
#work li.job{
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--panel, #1d1f23), black 3%),
      color-mix(in oklab, var(--panel, #1d1f23), black 10%));
  border: 1px solid color-mix(in oklab, var(--panel-2, #2a2e33), black 28%);
  border-radius: var(--radius-lg, 20px);
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: var(--shadow-1, 0 8px 24px rgba(0,0,0,.18));
}

/* Headings and paragraphs within a card */
#work li.job h2{
  margin: 0 0 .5rem 0;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-weight: 800;
}
#work li.job p{
  margin: 0 0 .75rem 0;
  line-height: 1.7;
}

/* Images that are direct children of #work (outside list items) */
#work ul img{
  display: block;
  max-width: 30em;
  height: auto;
  margin: clamp(10px, 2vw, 16px) auto;
  border-radius: var(--radius, 14px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* Images inside cards */
#work li.job img{
  display: block;
  max-width: 40em;
  height: auto;
  margin: .75rem auto 0;
  border-radius: var(--radius, 14px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  margin-left: auto;
  margin-right: auto;
}

/* Responsive, full-width video embed */
#work iframe{
  display: block;
  width: 40em;
  max-width: 100%;
  aspect-ratio: 16 / 9;   /* keeps 16:9 without JS */
  height: auto;           /* modern browsers handle with aspect-ratio */
  border: 0;
  margin-top: .75rem;
  border-radius: var(--radius, 14px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  margin-left: auto;
  margin-right: auto;
}

/* Nice spacing between card sections */
#work li.job br{
  display: block;
  content: "";
  margin-bottom: .5rem;
}

/* Optional: horizontal rule look between groups, if added later */
#work .divider{
  height: 1px;
  background: color-mix(in oklab, var(--panel-2, #2a2e33), black 25%);
  margin: 1rem 0;
}

/* Small-screen tweaks */
@media (max-width: 640px){
  #work{ width: min(100%, 94vw); }
  #work > h1{ text-align: left; }
}


#itch {
  margin: auto;
}

/* Or use flexbox for cleaner alignment */
#images {
  display: flex;
  justify-content: center;   /* center the pair horizontally */
  gap: 1rem;                 /* space between the two */
}
#images img {
  width: 25%;                /* or max-width:35% if you want responsiveness */
  height: auto;
}

/* Or use flexbox for cleaner alignment */
#images2 {
  display: flex;
  justify-content: center;   /* center the pair horizontally */
  gap: 1rem;                 /* space between the two */
}
#images2 img {
  width: 45%;                /* or max-width:35% if you want responsiveness */
  height: auto;
}