/* Minimal, designer-style portfolio theme.
   No external dependencies, intentional whitespace, high contrast. */

:root{
  --bg:#ffffff;
  --fg:#0b0b0c;
  --muted:#5b5b63;
  --border:rgba(11,11,12,.12);
  --shadow:0 10px 30px rgba(11,11,12,.08);
  --radius:18px;
  --max:1100px;
  --gutter:clamp(16px, 4vw, 40px);
  --font: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --reel-top-nudge: 0px;
  --reel-right-nudge: 0px;
  --reel-width-vw: 36;
  --reel-width-max: 520px;
  --reel-fade-width: 28%;
}

*{box-sizing:border-box}
html{
  color-scheme:light;
  overflow-x:hidden;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{
  outline:2px solid #16161a;
  outline-offset:2px;
}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  .card{will-change: transform}
  .hero h1{
    animation: fadeUp .7s ease both;
  }
  .hero p, .pill-row, .toolbar, .section{
    animation: fadeUp .7s ease both;
    animation-delay: .08s;
  }
  .pill-row{animation-delay:.14s}
  .toolbar{animation-delay:.18s}
}

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

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:var(--gutter);
  top:var(--gutter);
  width:auto;
  height:auto;
  background:var(--bg);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  z-index:9999;
  text-decoration:none;
}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

header.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
  z-index:50;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.brand{
  font-family:var(--font);
  font-weight:600;
  letter-spacing:.2px;
}
.nav-links{
  display:flex;
  gap:14px;
  align-items:center;
  font-family:var(--font-ui);
  font-size:14px;
  letter-spacing:.2px;
}
.nav-links a{
  padding:10px 12px;
  border-radius:999px;
}
.nav-links a[aria-current="page"]{
  background:rgba(11,11,12,.06);
  text-decoration:none;
}

.hero{
  padding:clamp(34px, 6vw, 72px) 0 22px;
}
.hero-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:stretch;
}
@media (min-width: 960px){
  .hero-layout{
    position:relative;
    display:block;
    gap:0;
    min-height: clamp(420px, 66vh, 720px);
  }
  .hero-layout > div:first-child{
    max-width:min(70%, 760px);
    padding-right:14px;
  }
}
.hero h1{
  margin:0 0 10px;
  font-size:clamp(34px, 5vw, 62px);
  letter-spacing:-.6px;
  line-height:1.12;
}
.hero-title{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hero-title span{
  display:inline-block;
  line-height:1.12;
  padding-bottom:.06em;
}
.hero-title span:nth-child(2){
  position:relative;
  color:#0d0f10;
  isolation:isolate;
}
.hero-title span:nth-child(2)::after{
  content:"Programmer";
  position:absolute;
  inset:0;
  color:transparent;
  -webkit-text-fill-color: transparent;
  opacity:.72;
  pointer-events:none;
  z-index:1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='70' viewBox='0 0 280 70'><text x='0' y='18' font-family='monospace' font-size='14' fill='%2322b35f'>1010010110100101101001011010</text><text x='0' y='38' font-family='monospace' font-size='14' fill='%231b8f43'>0101101001011010010110100101</text><text x='0' y='58' font-family='monospace' font-size='14' fill='%2322b35f'>1010010110100101101001011010</text></svg>");
  background-size: 280px 70px;
  background-repeat: repeat;
  -webkit-background-clip:text;
  background-clip:text;
}
.hero p{
  margin:0;
  color:var(--muted);
  max-width:70ch;
  font-size:clamp(16px, 1.5vw, 18px);
  font-family:var(--font-ui);
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  font-family:var(--font-ui);
  font-size:13px;
  color:var(--muted);
}
.pill strong{color:var(--fg); font-weight:600}
.pill-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:6px;
  object-fit:cover;
}
.pill-icon--unreal{
  object-fit:contain;
  background:#111;
  padding:2px;
}
.pill-icon--svg{
  border-radius:0;
}

.hero-reel{
  position:relative;
  width:100%;
  min-height: clamp(380px, 64vh, 680px);
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  isolation:isolate;
}
@media (min-width: 960px){
  .hero-reel{
    position:absolute;
    top: var(--reel-top-nudge);
    right: calc(50% - 50vw + var(--reel-right-nudge));
    bottom:0;
    width: min(calc(var(--reel-width-vw) * 1vw), var(--reel-width-max));
    margin-top:0;
    margin-right:0;
    min-height:0;
  }
}
.reel-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#111;
}
.hero-reel::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:calc(var(--reel-fade-width) + 14px);
  pointer-events:none;
  z-index:2;
  left:-7px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.95) 16%,
    rgba(255,255,255,.8) 34%,
    rgba(255,255,255,.58) 54%,
    rgba(255,255,255,.3) 74%,
    rgba(255,255,255,.09) 90%,
    rgba(255,255,255,0) 100%
  );
}

.layout-tuner{
  position:fixed;
  right:14px;
  top:84px;
  z-index:1200;
  width:min(320px, calc(100vw - 24px));
  background:rgba(255,255,255,.96);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:12px;
  font-family:var(--font-ui);
}
.layout-tuner h3{
  margin:0 0 8px;
  font-size:14px;
}
.layout-tuner label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:8px 0 4px;
}
.layout-tuner input[type="range"]{
  width:100%;
}
.layout-tuner__row{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.layout-tuner__row button{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  padding:8px 10px;
  font-size:12px;
  cursor:pointer;
}
.layout-tuner__drag{
  position:absolute;
  right:8px;
  top:8px;
  z-index:3;
  padding:5px 8px;
  border-radius:8px;
  font:600 11px/1 var(--font-ui);
  color:#111;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(11,11,12,.15);
  cursor:grab;
  user-select:none;
}
.layout-tuner__drag:active{
  cursor:grabbing;
}

@media (max-width: 420px){
  .pill{padding:9px 10px; gap:8px}
  .pill-icon{width:16px; height:16px; flex-basis:16px}
}

@media (prefers-reduced-motion: no-preference){
  .hero-title span{
    animation: floaty 6.2s ease-in-out infinite;
  }
  .hero-title span:nth-child(2){ animation-duration: 6.8s; animation-delay: .15s; }
  .hero-title span:nth-child(3){ animation-duration: 7.4s; animation-delay: .3s; }
  .hero-title span:nth-child(2){
    animation-name: floaty;
    animation-duration: 6.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: .15s;
  }
  .hero-title span:nth-child(2)::after{
    animation: binaryShift 2.8s linear infinite;
  }
}

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

@keyframes binaryShift{
  from{ background-position: 0% 0; }
  to{ background-position: 280px 0; }
}

.divider{
  border:0;
  border-top:1px solid var(--border);
  margin:24px 0;
}

.section{
  padding:22px 0 44px;
}
.section h2{
  margin:0 0 14px;
  font-size:clamp(22px, 2.5vw, 28px);
  letter-spacing:-.3px;
}
.section .sub{
  margin:0 0 18px;
  color:var(--muted);
  font-family:var(--font-ui);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
}
.card{
  grid-column:span 12;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg);
  box-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:rgba(11,11,12,.18);
  text-decoration:none;
}
.card-media{
  aspect-ratio: 16/9;
  background:rgba(11,11,12,.04);
  overflow:hidden;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.card-body{
  padding:14px 14px 16px;
}
.card-title{
  margin:0 0 6px;
  font-size:18px;
  letter-spacing:-.2px;
}
.card-meta{
  margin:0;
  color:var(--muted);
  font-family:var(--font-ui);
  font-size:13px;
}

@media (min-width: 760px){
  .card{grid-column:span 4;}
  .card--wide{grid-column:span 12;}
}

/* Homepage category banners: slimmer on desktop to avoid oversized blocks. */
.featured-grid{
  align-items:start;
}
.featured-card{
  grid-column:span 12;
}
.category-card .card-media{
  aspect-ratio: 16/6;
  min-height:160px;
  max-height:220px;
  position:relative;
  overflow:hidden;
}
.category-card .card-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}
/* Ensure index category capsule banners stay truly centered. */
.featured-grid .category-card .card-media img{
  object-position: 50% 50% !important;
}
@media (min-width: 980px){
  .featured-card{
    grid-column:span 4;
  }
  .category-card .card-media{
    aspect-ratio: 16/6;
    min-height:175px;
    max-height:210px;
  }
}

.scroll-toggle{
  position:fixed;
  right:16px;
  bottom:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  color:var(--fg);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  z-index:90;
  box-shadow:var(--shadow);
}
.scroll-toggle:hover{
  transform:translateY(-1px);
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin:18px 0 16px;
}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--fg);
  padding:9px 12px;
  border-radius:999px;
  font-family:var(--font-ui);
  font-size:13px;
  cursor:pointer;
}
.btn[aria-pressed="true"]{
  background:rgba(11,11,12,.06);
  text-decoration:none;
}
.search{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 12px;
  background:var(--bg);
  min-width:min(420px, 100%);
  flex:1 1 260px;
}
.search input{
  border:0;
  outline:0;
  width:100%;
  font-family:var(--font-ui);
  font-size:14px;
  background:transparent;
  color:var(--fg);
}
.search .hint{
  color:var(--muted);
  font-family:var(--font-ui);
  font-size:12px;
  white-space:nowrap;
}

footer.site-footer{
  border-top:1px solid rgba(11,11,12,.08);
  padding:16px 0;
  margin-top:30px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(248,248,250,.75));
  color:var(--muted);
  font-family:var(--font-ui);
  font-size:13px;
}
.footer-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  justify-content:space-between;
}
.footer-links{
  display:flex;
  gap:10px;
  align-items:center;
}
.footer-links a{
  padding:6px 10px;
  border:1px solid rgba(11,11,12,.1);
  border-radius:999px;
  background:rgba(255,255,255,.7);
}
.footer-links a:hover{
  text-decoration:none;
  background:#fff;
}

.prose{
  font-family:var(--font-ui);
  color:var(--fg);
  max-width:75ch;
}
.prose p{color:var(--muted)}
.prose h3{margin:20px 0 8px; color:var(--fg)}
.prose a{color:var(--fg)}

.about-onepage{
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.about-onepage .site-footer{
  margin-top:auto;
  padding:12px 0;
}
.about-stage{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(340px, 43%);
  gap:26px;
  align-items:center;
  min-height:0;
  padding-top:10px;
  padding-bottom:8px;
}
.about-copy{
  font-family:var(--font-ui);
  max-width:68ch;
}
.about-copy h1{
  margin:0 0 8px;
  font-family:var(--font);
  font-size:clamp(32px, 4vw, 50px);
  letter-spacing:-.3px;
}
.about-copy p{
  margin:0 0 10px;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}
.about-lead{
  color:var(--fg) !important;
  font-size:17px !important;
}
.about-tags{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.about-tags span{
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 10px;
  background:rgba(11,11,12,.03);
  color:#202028;
  font-size:12px;
}
.about-collage{
  position:relative;
  min-height:clamp(360px, 60vh, 560px);
  border:1px solid var(--border);
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 15%, rgba(165,165,175,.16), transparent 40%),
    radial-gradient(circle at 86% 22%, rgba(165,165,175,.13), transparent 42%),
    linear-gradient(160deg, rgba(255,255,255,.85), rgba(245,245,248,.94));
}
.about-polaroid{
  position:absolute;
  margin:0;
  border:1px solid rgba(11,11,12,.18);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 35px rgba(11,11,12,.16);
}
.about-polaroid img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.about-polaroid picture{
  display:block;
  width:100%;
  height:100%;
}
.about-polaroid.a1{ inset:7% auto auto 7%; width:40%; height:58%; transform:rotate(-5deg); z-index:2; }
.about-polaroid.a2{ inset:8% 8% auto auto; width:47%; height:34%; transform:rotate(6deg); z-index:4; }
.about-polaroid.a3{ inset:44% 16% auto auto; width:39%; height:30%; transform:rotate(-7deg); z-index:5; }
.about-polaroid.a4{ inset:auto auto 6% 10%; width:45%; height:34%; transform:rotate(7deg); z-index:3; }
.about-polaroid.a5{ inset:auto 4% 4% auto; width:46%; height:24%; transform:rotate(-3deg); z-index:6; }

@media (max-width: 980px){
  .about-onepage{
    overflow:auto;
  }
  .about-stage{
    min-height:auto;
    grid-template-columns:1fr;
    gap:18px;
    padding-bottom:30px;
  }
  .about-collage{
    min-height:520px;
  }
}

.about-gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.about-shot{
  margin:0;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:rgba(11,11,12,.03);
  min-height:220px;
}
.about-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  transition:transform .25s ease;
}
.about-shot:hover img{
  transform:scale(1.02);
}
@media (min-width: 760px){
  .about-gallery{
    grid-template-columns:repeat(12, 1fr);
    gap:14px;
  }
  .about-shot{
    grid-column:span 4;
    min-height:240px;
  }
  .about-shot--tall{
    grid-column:span 5;
    grid-row:span 2;
    min-height:100%;
  }
  .about-shot--wide{
    grid-column:span 7;
  }
}

.project-hero{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width: 900px){
  .project-hero{grid-template-columns: 1.2fr .8fr;}
}
.project-cover{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(11,11,12,.04);
  aspect-ratio: 16/9;
  max-height:420px;
}
.project-cover img{width:100%; height:100%; object-fit:cover}
.project-cover video{width:100%; height:100%; object-fit:cover; display:block}
.project-meta{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  background:var(--bg);
}
.project-meta dt{
  font-family:var(--font-ui);
  font-size:12px;
  color:var(--muted);
}
.project-meta dd{
  margin:0 0 10px;
  font-family:var(--font-ui);
  font-size:14px;
}

/* Compact, modern treatment for AVS project detail. */
body.project-page--compact .hero{
  padding:10px 0 4px;
}
body.project-page--compact .hero h1{
  margin:0 0 4px;
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.04;
}
body.project-page--compact .hero p{
  font-size:15px;
}
body.project-page--compact .divider{
  margin:10px 0;
}
body.project-page--compact .section{
  padding:8px 0 12px;
}
body.project-page--compact .project-hero{
  gap:10px;
  grid-template-columns:1.35fr .65fr;
}
body.project-page--compact .project-hero .project-cover{
  aspect-ratio:21/7;
  max-height:238px;
}
body.project-page--compact .project-hero .project-cover img{
  object-position:center 62%;
}
body.project-page--compact .project-meta{
  padding:10px;
}
body.project-page--compact .project-meta dl{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 10px;
  margin:0;
}
body.project-page--compact .project-meta dt{
  margin:0 0 2px;
  font-size:11px;
}
body.project-page--compact .project-meta dd{
  margin:0;
  font-size:13px;
  line-height:1.35;
}
body.project-page--compact .project-meta .btn{
  margin-top:10px;
}
body.project-page--compact .section .prose{
  max-width:none;
  display:block;
  gap:0;
  align-items:start;
}
body.project-page--compact .section .prose .project-cover{
  margin:0 0 10px !important;
  aspect-ratio:16/8;
  max-height:220px;
}
body.project-page--compact .section .prose p{
  margin:0;
  font-size:14px;
  line-height:1.45;
  max-width:92ch;
}
.project-page--compact .project-case-study h2{
  margin:0 0 10px;
}
.project-page--compact .project-case-study{
  padding-top:4px;
}
.avs-layout{
  display:grid;
  gap:10px;
}
.avs-sections{
  display:grid;
  gap:10px;
}
.case-block--avs{
  padding:12px;
  margin:0;
}
.case-block--avs h3{
  font-size:18px;
  margin:0 0 6px;
}
.case-block--avs .case-media{
  margin-top:8px;
}
.case-block--avs .case-media video,
.case-block--avs .case-media img,
.case-block--avs .case-media iframe{
  min-height:170px;
}
@media (min-width: 980px){
  .avs-sections{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
  }
  .avs-sections .case-block:last-child{
    grid-column:1 / -1;
  }
}
@media (max-width: 900px){
  body.project-page--compact .project-hero{
    grid-template-columns:1fr;
  }
  body.project-page--compact .project-meta dl{
    grid-template-columns:1fr;
  }
  body.project-page--compact .section .prose{
    grid-template-columns:1fr;
  }
}
.project-case-study .sub{
  margin:0 0 12px;
}
.facts-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:10px 0 14px;
}
.fact-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(11,11,12,.02);
  font-family:var(--font-ui);
}
.fact-card dt{
  margin:0 0 4px;
  font-size:12px;
  color:var(--muted);
}
.fact-card dd{
  margin:0;
  font-size:14px;
}
.case-block{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:14px;
  margin:0 0 14px;
}
.case-block h3{
  margin:0 0 8px;
  font-size:20px;
}
.case-block p{
  margin:0 0 10px;
  color:var(--muted);
  font-family:var(--font-ui);
}
.case-block ul{
  margin:0 0 8px 18px;
  padding:0;
  color:var(--muted);
  font-family:var(--font-ui);
}
.case-block li{
  margin:0 0 6px;
}
.case-accordion{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  margin:0 0 10px;
  overflow:hidden;
}
.case-accordion > summary{
  cursor:pointer;
  list-style:none;
  padding:12px 14px;
  font-family:var(--font-ui);
  font-weight:600;
  font-size:15px;
  border-bottom:1px solid transparent;
}
.case-accordion[open] > summary{
  border-bottom-color:var(--border);
}
.case-accordion > summary::-webkit-details-marker{
  display:none;
}
.case-accordion .case-block{
  border:0;
  border-radius:0;
  margin:0;
}

.project-static{
  padding-top:2px;
  padding-bottom:18px;
  font-family:var(--font-ui);
}
.project-static-page{
  font-family:var(--font-ui);
}
.project-static-page .brand,
.project-static-page .hero h1,
.project-static-page h2,
.project-static-page h3{
  font-family:var(--font-ui);
}
.project-static-top{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width: 980px){
  .project-static-top{
    grid-template-columns:1.25fr .75fr;
  }
}
.project-static-media video{
  width:100%;
  display:block;
  border:1px solid var(--border);
  border-radius:14px;
  background:#0b0b0c;
  aspect-ratio:16/9;
  object-fit:contain;
}
.project-static-meta{
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  font-family:var(--font-ui);
  background:#fff;
}
.project-static-meta p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.65;
}
.meta-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.meta-badges span{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 11px;
  font-size:12px;
  background:rgba(11,11,12,.03);
}
.engine-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#15171c !important;
  color:#eef4ff;
  border-color:#15171c !important;
}
.engine-badge img{
  width:16px;
  height:16px;
  object-fit:contain;
}
.role-highlight{
  font-size:17px;
  color:var(--fg) !important;
}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cta-row--hero{
  margin-top:12px;
  margin-bottom:8px;
}
.btn--primary{
  background:#0f1115;
  color:#fff;
  border-color:#0f1115;
}
.btn--primary:hover{
  background:#1a1f28;
  text-decoration:none;
}
.btn--steam{
  background:linear-gradient(135deg, #1b2838 0%, #2a475e 58%, #66c0f4 100%);
  color:#fff;
  border-color:#1b2838;
}
.btn--steam:hover{
  background:linear-gradient(135deg, #243447 0%, #355d7e 58%, #7ad1ff 100%);
  text-decoration:none;
}
.project-static-grid{
  display:grid;
  gap:24px 28px;
  grid-template-columns:1fr;
}
@media (min-width: 880px){
  .project-static-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.project-static .case-block{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
}
.project-static .case-block h3{
  font-size:22px;
  margin:0 0 8px;
  line-height:1.25;
}
.project-static .case-block p{
  line-height:1.75;
  font-size:15px;
}

/* Shared modern structure for all dynamic project pages. */
body.project-detail-modern{
  font-family:var(--font-ui);
}
body.project-detail-modern .hero{
  padding:6px 0 4px;
}
body.project-detail-modern .hero h1{
  margin:0 0 4px;
  font-family:var(--font-ui);
  font-size:clamp(32px, 4.2vw, 48px);
  line-height:1.06;
}
body.project-detail-modern .hero p{
  margin:0;
  font-size:15px;
}
body.project-detail-modern .divider{
  margin:12px 0;
}
body.project-detail-modern .project-hero{
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}
body.project-detail-modern .project-cover{
  aspect-ratio:16/9;
  max-height:420px;
}
body.project-detail-modern .project-meta{
  padding:18px;
}
body.project-detail-modern .project-meta dd{
  line-height:1.55;
}
body.project-detail-modern .section{
  padding:10px 0 16px;
}
body.project-detail-modern .section h2{
  margin:0 0 10px;
  font-family:var(--font-ui);
  font-size:26px;
}
body.project-detail-modern .prose{
  max-width:none;
  font-family:var(--font-ui);
}
body.project-detail-modern .prose p{
  line-height:1.72;
  font-size:15px;
}
body.project-detail-modern .case-block{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
}
body.project-detail-modern .case-block h3{
  font-size:22px;
  margin:0 0 8px;
  line-height:1.3;
}
body.project-detail-modern .case-accordion{
  border:0;
  border-radius:0;
  background:transparent;
  margin:0 0 8px;
}
body.project-detail-modern .project-static-grid{
  display:grid;
  gap:20px 24px;
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  body.project-detail-modern .project-static-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
body.project-detail-modern .case-accordion > summary{
  padding:6px 0;
  border-bottom:0;
  font-size:20px;
}
body.project-detail-modern .case-accordion .case-block{
  padding:0;
}
@media (max-width: 920px){
  body.project-detail-modern .project-hero{
    grid-template-columns:1fr;
  }
}
.case-media{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  margin:8px 0 0;
}
.case-media iframe,
.case-media video,
.case-media img{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(11,11,12,.04);
  display:block;
  min-height:220px;
  object-fit:cover;
}
.case-code{
  margin:8px 0 0;
  background:#0f1218;
  color:#d8e0ee;
  border-radius:12px;
  padding:12px;
  overflow:auto;
  font:13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (min-width: 820px){
  .facts-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .case-media{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.contact-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  margin-bottom:8px;
}
.contact-page{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.contact-page .site-footer{
  margin-top:0;
}
.contact-main{
  width:100%;
  max-width:min(980px, 100%);
  align-self:center;
  padding-top:18px;
  padding-bottom:18px;
}
.contact-hero{
  padding:8px 0 6px;
}
.contact-hero h1{
  margin:0 0 6px;
}
.contact-section{
  padding:10px 0 12px;
}
.contact-section h2{
  margin:0 0 10px;
}
.contact-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:linear-gradient(140deg, rgba(255,255,255,1), rgba(248,248,250,1));
  font-family:var(--font-ui);
}
.contact-card h3{
  margin:0 0 6px;
  font-size:16px;
  letter-spacing:-.2px;
}
.contact-card p{
  margin:0;
  color:var(--muted);
}
@media (min-width: 760px){
  .contact-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px){
  .contact-page{
    grid-template-rows:auto auto auto;
  }
  .contact-main{
    align-self:start;
    padding-top:8px;
  }
}