:root {
  --bg-light: #F6F4EF;
  --bg-light-alt: #EDEAE2;
  --bg-dark: #141413;
  --bg-dark-alt: #1E1E1C;
  --accent-ember: #C84B31;
  --accent-gold: #D98A2B;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-light);
  color: #141413;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Subtle architectural grid overlays */
.arch-grid-light {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(20, 20, 19, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 20, 19, 0.04) 1px, transparent 1px);
}

.arch-grid-dark {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(246, 244, 239, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(246, 244, 239, 0.035) 1px, transparent 1px);
}

/* Custom golden-ember glow for the Ornate Gothic HB Emblem */
.hb-emblem-frame {
  background: radial-gradient(circle at 50% 45%, rgba(217, 138, 43, 0.18) 0%, rgba(13, 13, 12, 0.98) 72%);
  box-shadow: 0 10px 35px -10px rgba(200, 75, 49, 0.35), inset 0 0 0 1px rgba(217, 138, 43, 0.3);
}

/* Card hover transitions */
.studio-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.studio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(20, 20, 19, 0.14);
}

.studio-card-dark {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.studio-card-dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.65);
}

/* Opaque labels keep their contrast over every project image. */
.status-badge {
  display: inline-block;
  background: #1b1c1a;
  color: #f5f3ed;
  border: 1px solid #64665e;
  font-weight: 600;
  line-height: 1.5;
}
.status-badge--amber { color: #ffd18c; border-color: #8c6c3e; }
.status-badge--blue { color: #b9defa; border-color: #54768f; }
.status-badge--green { color: #bde7c9; border-color: #577a62; }
.status-badge--neutral { color: #e3e0d7; border-color: #737267; }
.thumbnail-badge {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.045em;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px #0006;
}
.project-thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  isolation: isolate;
}
.project-thumbnail:focus-visible { outline-offset: -4px; }

/* Image hover zoom & Card micro-interactions */
.project-thumbnail img,
.project-thumbnail > svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease;
}
.studio-card:hover .project-thumbnail img,
.studio-card:hover .project-thumbnail > svg,
.studio-card-dark:hover .project-thumbnail img,
.studio-card-dark:hover .project-thumbnail > svg,
.portfolio-card:hover .project-thumbnail img,
.portfolio-card:hover .project-thumbnail > svg {
  transform: scale(1.04);
}
.studio-card:hover,
.studio-card-dark:hover,
.portfolio-card:hover {
  border-color: rgba(234, 88, 12, 0.4) !important;
  box-shadow: 0 10px 25px -5px rgba(234, 88, 12, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}
.studio-card, .studio-card-dark, .portfolio-card { min-width: 0; height: 100%; }
.studio-card h2, .studio-card-dark h3, .portfolio-card h2 {
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.project-card-meta, .project-card-footer { flex-wrap: wrap; gap: 12px; }
.project-card-meta > span { line-height: 1.6; }
.project-card-footer > a { display: inline-flex; align-items: center; min-height: 40px; flex-shrink: 0; }
.project-card-footer > div { min-width: 0; flex: 1 1 160px; }
.studio-card [class*="text-[11px]"], .studio-card-dark [class*="text-[11px]"], .portfolio-card [class*="text-[11px]"] { line-height: 1.6; }
.project-detail-grid > * { min-width: 0; }
#app-view { scroll-margin-top: 96px; }
#home, #projects, #portfolio, #about, #downloads, #contact { scroll-margin-top: 80px; }
#app-view section { scroll-margin-top: 80px; }
#app-view h1 { text-wrap: balance; overflow-wrap: anywhere; }
#project-gallery-stage { overflow: hidden; }
@media (max-width: 479px) {
  header > div > a { min-width: 0; gap: 10px; }
  header > div > a .hb-emblem-frame { width: 40px; height: 40px; }
  header > div > a .font-display { font-size: 0.875rem; white-space: nowrap; }
  header > div > a .font-mono { font-size: 9px; letter-spacing: 0.06em; }
  #mobile-menu-btn { flex-shrink: 0; }
  .studio-card > div, .studio-card-dark > div, .portfolio-card > div:not(.project-thumbnail) { padding: 20px; }
  .project-card-footer > a { min-height: 44px; }
  .thumbnail-badge { top: 10px; left: 10px; max-width: calc(100% - 20px); }
}

/* Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .studio-card:hover,
  .studio-card-dark:hover {
    transform: none;
  }
  .studio-card:hover .project-thumbnail img,
  .studio-card:hover .project-thumbnail > svg,
  .studio-card-dark:hover .project-thumbnail img,
  .studio-card-dark:hover .project-thumbnail > svg,
  .portfolio-card:hover .project-thumbnail img,
  .portfolio-card:hover .project-thumbnail > svg {
    transform: none;
  }
}

/* Downloads: mobile stacked cards & horizontal scroll container */
.downloads-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.downloads-mobile-cards { display: none; }
@media (max-width: 768px) {
  .downloads-desktop-table { display: none !important; }
  .downloads-mobile-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
}

/* Focused refinements. Original theme, cards, layouts and breakpoints stay intact. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
}
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: #141413; color: #F6F4EF; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.home-intro-copy { max-width: 72rem; margin-inline: auto; }
.studio-hero-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #2A2A27;
  background-color: #0D0D0C;
}
.studio-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1933 / 813;
  min-height: 320px;
  overflow: hidden;
  background-color: #0D0D0C;
}
.studio-hero-banner .studio-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.studio-banner-caption {
  max-width: 80rem;
  margin-inline: auto;
}
.lightbox-open { overflow: hidden; }
.project-shot-image { display: block; width: 100%; height: 100%; }
.project-shot-cover { object-fit: cover; }
.project-shot-contain { object-fit: contain; }
.project-source { min-width: 0; }
.project-source-code { margin: 0; padding: 1.25rem; max-height: 32rem; overflow: auto; white-space: pre; font: 0.8125rem/1.7 Consolas, monospace; tab-size: 4; }
.source-editor { min-width: 0; overflow: hidden; border: 1px solid #42434c; border-radius: 10px; background: #202127; color: #e0e1e6; box-shadow: 0 8px 24px #00000014; }
.source-tabs { display: flex; overflow-x: auto; background: #191a20; border-bottom: 1px solid #3b3d48; scrollbar-width: thin; }
.source-tab { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 13px 16px; border-right: 1px solid #30313a; border-bottom: 2px solid transparent; color: #a6aab8; font: 12px/1.5 'JetBrains Mono', Consolas, monospace; }
.source-tab:hover { background: #272932; color: #e7e8ee; }
.source-tab[aria-selected="true"] { background: #262831; border-bottom-color: #72a8ed; color: #f4f5fa; }
.source-file-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #33475c; color: #a7d5ff; font-size: 10px; }
.source-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #262831; border-bottom: 1px solid #353741; }
.source-file-info { display: flex; gap: 16px; color: #bdc3d2; font: 11px/1.5 'JetBrains Mono', Consolas, monospace; }
.source-copy-button { padding: 7px 12px; border: 1px solid #526071; border-radius: 5px; background: #344153; color: #f3f7ff; font: 11px/1.5 'JetBrains Mono', Consolas, monospace; }
.source-copy-button:hover { background: #43556e; border-color: #83b4ec; }
.source-file-description { margin: 0; padding: 12px 16px; color: #b6bdcd; font-size: 12px; line-height: 1.7; border-bottom: 1px solid #30323b; }
.source-editor-scroll { max-height: 34rem; overflow: auto; scrollbar-width: thin; scrollbar-color: #596174 #202127; }
.source-editor-lines { display: flex; min-width: max-content; align-items: stretch; }
.source-line-numbers, .source-editor .project-source-code { margin: 0; padding-block: 16px; font: 12px/1.8 'JetBrains Mono', Consolas, monospace; white-space: pre; tab-size: 4; }
.source-line-numbers { position: sticky; left: 0; z-index: 1; flex-shrink: 0; padding-inline: 16px 12px; color: #8992a6; text-align: right; background: #202127; border-right: 1px solid #30323b; user-select: none; }
.source-editor .project-source-code { flex: 1; max-height: none; overflow: visible; padding-inline: 16px 28px; color: #e0e1e6; }
.source-copy-status { min-height: 28px; margin: 0; padding: 6px 16px; background: #262831; color: #c6d2e5; font: 11px/1.5 'JetBrains Mono', Consolas, monospace; }
.gd-keyword, .gd-preprocessor { color: #ff7d91; }
.gd-reference, .gd-function { color: #b1e39b; }
.gd-type { color: #8dd9e7; }
.gd-annotation { color: #ffb77b; }
.gd-string { color: #ffe0a3; }
.gd-number { color: #d2a6ff; }
.gd-comment { color: #929caf; font-style: italic; }
.gd-operator { color: #ffa8b8; }
.gd-punctuation { color: #c9cedb; }
.project-gallery-preview { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.contact-draft { display: block; width: 100%; margin-top: 16px; padding: 12px; background: #1E1E1C; color: #F6F4EF; border: 1px solid #3D3D38; border-radius: 6px; font: inherit; line-height: 1.7; resize: vertical; }
.no-script-note { max-width: 70rem; padding: 3rem 1.5rem; margin: auto; line-height: 1.8; }
@media (max-width: 767px) {
  .studio-hero-media {
    position: relative;
    aspect-ratio: auto;
    min-height: 330px;
    height: 350px;
  }
  .studio-hero-banner .studio-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
    display: block;
  }
  #hero-banner-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .studio-banner-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    padding: 1rem 1rem 1.25rem 1rem;
  }
  .studio-banner-caption h2 { font-size: 1.15rem; line-height: 1.25; }
  .studio-banner-caption a { font-size: 0.725rem; }
  #lightbox-caption { max-width: 100%; overflow-wrap: anywhere; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  header .font-display { font-size: 1rem; }
  header nav { gap: 0; }
  header .nav-link { padding-inline: 0.55rem; }
}