/*
 * CONSOLIDATED GLOBAL STYLES - OPTIMIZED
 * Compiled from all HTML files
 */

/* ==========================================================================
 * CSS VARIABLES - STANDARDIZED
 * ========================================================================== */
:root {
  /* Standardized Semantic Color Variables */
  --color-primary: #f0b35f;
  --color-primary-dark: #f8b365;
  --color-bg-dark: #0f0f0f;
  --color-bg-surface: #1a1a1a;
  --color-bg-card: #141416;
  --color-text-primary: #eaeaea;
  --color-text-secondary: #a9a9af;
  --color-text-muted: #888;
  --color-border: #222;
  --color-blue-accent: #58a6ff;

  /* Consolidated Design Tokens */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-hover: 0 5px 10px rgba(0, 0, 0, .2), 0 20px 40px rgba(0, 0, 0, .45);
  --ring: rgba(255, 255, 255, .18);

  /* CV Variables (Light Mode) */
  --ink: #111;
  --muted-cv: #555;
  --rule: #e5e7eb;
  
  /* GRID Variables (from grid.css) */
  --page-padding: 16px;
  --card-max-width: 1200px;
  --card-min-width: 300px;
  --card-radius: 24px;
  --card-gap: 10px;
  --ratio-wide: 5 / 2;
  --ratio-2x2: 16 / 9;
  --ratio-tall: 3 / 4;
}

.name-line-1 {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Remove hover underline ONLY for the name-line-1 link */
a.name-line-1 {
  text-decoration: none;
  border-bottom: none !important;
}

a.name-line-1:hover {
  text-decoration: none;
  border-bottom: none !important;
  opacity: 0.9; /* optional: keeps the slight fade effect */
}


/* ==========================================================================
 * RESET & BASE STYLES
 * ========================================================================== */
html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--color-bg-dark);
  color: var(--color-text-primary);
  font-family: "Inter", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.6;
}

/* ==========================================================================
 * SCROLLING MANAGEMENT
 * ========================================================================== */
body,
html {
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
 * LAYOUT COMPONENTS
 * ========================================================================== */

/* Header Styles */
.site-header {
  width: 100%;
  background: var(--color-bg-dark);
  color: var(--color-text-primary);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 1rem 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  box-sizing: border-box;
  flex: 0 0 auto;
}

.site-header .name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
  flex: 0 0 auto;
}

.site-header .name-line-1 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.site-header .name h1 {
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

.site-header .name h2 {
  font-size: 3rem !important;
  font-weight: 900 !important;
  color: var(--color-primary-dark) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

.site-header .name small {
  display: block;
  font-size: 1rem;
  color: var(--color-text-muted);
  letter-spacing: 1px;
  margin-top: -0.5rem;  /* adjust to control gap */
  padding-top: 0;
  line-height: 1.6;
}

.site-nav {
  margin-top: 0.5rem;
  margin-bottom: 1.2rem;
  display: flex;
  gap: 2rem;
  flex: 0 0 auto;
}

.site-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  padding: 0.15rem 0;
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 2px solid transparent;
  line-height: 1.6;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-primary-dark);
}

/* Footer */
.site-footer {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 0.25rem 0;
  background: var(--color-bg-dark);
}

.youtube-embed {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 30px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  flex-grow: 0;
}

#breadcrumb {
  width: 100%;
  margin: 0;
  padding: 0.35rem 0 0.55rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  min-height: 0;
  text-align: center;
  line-height: 1.6;
  flex: 0 0 auto;
  box-sizing: border-box;
}

#breadcrumb:empty {
  display: none;
}

.site-page-content {
  width: 100%;
  flex: 1 0 auto;
}

#breadcrumb a {
  color: inherit;
  border-bottom: none;
}

#breadcrumb a:hover {
  color: inherit;
  border-bottom: none;
}




/* ==========================================================================
 * CARD COMPONENT STYLES
 * ========================================================================== */
.card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-hover);
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Portfolio-specific card styles */
.portfolio-page .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
}

.portfolio-page .card:hover {
  border-color: rgba(255, 255, 255, .25);
  transform: translateY(-4px);
}


/* ==========================================================================
 * Logo Image Badge for Article/Portfolio Cards 
 * ========================================================================== */

 .logo-badge {
  position: absolute;
  top: 15px;
  opacity: 0.8;
  width: clamp(16px, 4vw, 30px);
  height: clamp(16px, 4vw, 30px);
  z-index: 10;
}

.logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Default position: right */
.logo-badge {
  right: 15px;
}

/* Left position variant */
.logo-badge-left {
  right: auto;
  left: 15px;
}

/* ==========================================================================
 * SCROLL ARROW
 * ========================================================================== */

 .scroll-indicator {
  position: fixed;
  right: 2rem;      /* distance from the right edge */
  bottom: 2rem;     /* distance from the bottom edge */
  width: 32px;
  height: 32px;
  animation: fadePulse 2.5s ease-in-out infinite;
  pointer-events: none;   /* so it doesn't block clicks */
  z-index: 999;           /* stay on top of content */
  /* Make arrow white: */
  filter: invert(100%) brightness(25%);
}

#scroll-indicator {
  display: none; /* hidden unless JS shows it */
}

@media (max-width: 600px) {
  .scroll-indicator {
    right: 1rem;
    bottom: 1rem;
  }
}

/* Fade in & out loop */
@keyframes fadePulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



/* ==========================================================================
 * TAVLA GRID COMPONENT
 * ========================================================================== */

/* Controls */
:root {
  --left-width: 60%;              /* width of left column (red + green) */

  /* Outer frame around everything */
  --tavla-padding: 15px;          /* space between outer frame and inner cards */
  --tavla-gap: 15px;              /* gap between the inner cards */

  /* Change these three to control/remove the dark rounded box */
/* --tavla-bg-color: #111111;      /* set to 'transparent' to remove background */
/* --tavla-bg-radius: 20px;        /* set to 0px for square corners */
/* --tavla-bg-shadow: 0 0 40px rgba(0,0,0,0.6);  /* set to 'none' to remove */
--tavla-bg-color: transparent;
--tavla-bg-shadow: none;
--tavla-bg-radius: 0px;   /* optional, if you also want no rounding */

}

/* Outer TAVLA card (the big dark rounded box) */
.card.tavla {
  padding: var(--tavla-padding);
  height: auto;
  background: var(--tavla-bg-color);
  border-radius: var(--tavla-bg-radius);
  box-shadow: var(--tavla-bg-shadow);
}

/* Grid: variable left width, right auto, with uniform gaps */
.tavla-grid {
  display: grid;
  grid-template-columns: var(--left-width) auto;
  grid-template-rows: auto auto;
  gap: var(--tavla-gap);
  width: 100%;
}

/* Placement of cells */
/* red */ 
.left-top {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
/* green */ 
.left-bottom {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
/* purple */ 
.right-full {
  grid-column: 2 / 3;
  grid-row: 1 / 3;  
}

/* Inner card styling (each individual image card) */
.inner-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  height: 100%;
  display: flex;
}

.inner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover effect */
.inner-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-hover);
}



/* ==========================================================================
 * LIGHTBOX (Project 4)
 * ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;                /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 10000;               /* above everything, even cards */
}

.lightbox.visible {
  display: flex;
}

.lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 2.2rem;
  line-height: 1;
  background: transparent;
  color: #ffffff;
  border: none;
  cursor: pointer;
  padding: 0;
}

.lightbox-close:hover {
  opacity: 0.8;
}



/* ==========================================================================
 * PAGE-SPECIFIC STYLES
 * ========================================================================== */

/* Portfolio Page */
body.portfolio-page {
  margin: 0;
  background: radial-gradient(80% 120% at 50% -10%, #17171a 0%, var(--color-bg-dark) 55%) fixed;
  color: var(--color-text-primary);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.portfolio-page .wrap {
  width: min(900px, 92vw);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 48px);
}

.portfolio-page .grid {
  margin-top: clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 24px);
}


.portfolio-page .grid > .card:first-child {
  grid-column: auto;   /* or grid-column: span 1; */
}


/* Row for 3 GIFs */
.gif-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
}

/* Special layout: 2 items, second one wider */
.gif-row.gif-row-2wide {
  grid-template-columns: 30% 70%;
}



.gif-row .card {
  display: flex;
  align-items: center;     /* vertical centering */
  justify-content: center; /* horizontal centering */
  background: #000;        /* remove gray gap */
  overflow: hidden;        /* cleans overflow */
}

.gif-row .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fill container vertically */
  object-position: center; /* center the GIF */
  display: block;
}

.portfolio-page article.card .media {
  background: var(--color-bg-card);
  display: block;
}

.portfolio-page article.card img {
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.portfolio-page article.card .content {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}

.portfolio-page article.card .kicker {
  font-size: 10.5pt;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-primary-dark);
}

.portfolio-page article.card .heading {
  font-size: 18pt;
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.2;
}

.portfolio-page article.card .desc {
  color: var(--color-text-secondary);
  font-size: 10.5pt;
  margin-top: 0;
}

.portfolio-page .hero {
  border-radius: var(--radius);
  background: var(--color-bg-card);
  border: 1px solid var(--ring);
  padding: 24px;
  display: flex;
  gap: 24px;
}

.portfolio-page .hero .headshot {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
}

.portfolio-page .hero h1 {
  font-size: 24pt;
  margin: 0;
}

.portfolio-page .hero p {
  font-size: 11pt;
  color: var(--color-text-secondary);
}

.portfolio-page .hero a {
  color: var(--color-primary);
  text-decoration: none;
}

.portfolio-page .hero a:hover {
  text-decoration: underline;
}

.portfolio-page footer {
  text-align: center;
  font-size: 10pt;
  margin-top: auto;
  padding: 24px 0;
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.portfolio-page .site-footer {
  margin-top: 0;
  padding: 0.25rem 0;
  border-top: 0;
}

/* Common Project Pages */
body.project-page-1,
body.project-page-2,
body.project-page-3,
body.about-page {
  margin: 0;
  background-color: var(--color-bg-dark);
  color: var(--color-text-primary);
  font-family: "Inter", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 0;
}

/* Project 2 specific overrides */
body.project-page-2 {
  width: 100%;
}

.project-page-2-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem;
  box-sizing: border-box;
}

/* Project Containers */
.project-page-1 .main-container,
.project-page-3 .main-container,
.about-page .container {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-page-1 .main-container,
.project-page-3 .main-container {
  padding: 3rem 1rem;
  box-sizing: border-box;
}

/* Project Grids */

/* 3-column grid for rifle breakdowns */
.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  margin: 2rem 0;
}

.project-page-1 .grid,
.project-page-3 .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  justify-content: center;
}

.project-page-1 .row-2col,
.project-page-3 .row-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  margin: 2rem 0;
}

.project-page-1 .gallery-grid,
.project-page-3 .gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  margin: 2rem 0;
}

/* Text Overlays */
.top-right-text {
  position: absolute;
  top: 12px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.project-page-1 .top-right-text {
  opacity: 0.25;
}

.project-page-3 .top-right-text {
  opacity: 0.75;
}

.bottom-left-text {
  position: absolute;
  bottom: 12px;
  left: 16px;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.project-page-1 .bottom-left-text {
  opacity: 0.12;
  background: none;
  padding: 0;
  border-radius: 0;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.project-page-3 .bottom-left-text {
  opacity: 0.75;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-shadow: none;
}

/* Logo Positions */
.card-logo-top {
  position: absolute;
  top: 12px;
  left: 16px;
  width: 40px;
}

.card-logo-bottom {
  position: absolute;
  bottom: 12px;
  right: 16px;
  width: 15%;
  max-width: 160px;
  min-width: 80px;
}

.card-logo-top img,
.card-logo-bottom img {
  width: 100%;
  height: auto;
  opacity: 0.85;
}

/* Back Links */
a.back {
  display: inline-block;
  margin-top: 3rem;
  color: var(--color-blue-accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

a.back:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Project 1 Specific */
.project-page-1 h1 {
  font-size: 3.5rem;
  margin-bottom: 0.2rem;
  letter-spacing: 10px;
  text-align: center;
}

.project-page-1 h2 {
  color: var(--color-primary-dark);
}

.project-page-1 h3 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
}

.project-page-0 .logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2rem auto;
  flex-wrap: wrap;
}

.project-page-0 .logo-row img {
  max-height: 80px;
  height: auto;
  width: auto;
  max-width: 45%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.project-page-1 .logo-row img:hover {
  transform: scale(1.05);
}

.project-page-1 .breakdowns-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
/* BUTTON */
.goback-btn,
.breakdowns-btn {
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--color-primary-dark);
  background: transparent;
  color: var(--color-primary-dark);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

.goback-btn {
  margin-top: 40px;
}

.back-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  width: 100%;
  margin-top: 5rem;
}

.project-page-1 .breakdowns-note {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  opacity: 0.9;
}

/* Project 2 Specific */
body.project-page-2 h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

body.project-page-2 img {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
}

body.project-page-2 .tga-logo {
  display: block;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

body.project-page-2 p {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

/* ============================================================
   PROJECT PAGE 4 — UNIQUE WIDTH + LAYOUT
   ============================================================ */

body.project-page-4 .main-container > h1 {
  color: #f0b35f;
  text-align: center;
}

/* Remove dark box behind text */
.top-right-text,
.bottom-left-text {
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}


body.project-page-4 .top-right-text,
body.project-page-4 .bottom-left-text {
  opacity: 0.1;
}

body.project-page-4 {
  margin: 0;
  background-color: var(--color-bg-dark);
  color: var(--color-text-primary);
  font-family: "Inter", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

body.project-page-4 .main-container {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 3rem 1rem;
  box-sizing: border-box;
}

body.project-page-4 .grid {
  width: 100%;
  display: grid;
  gap: 2rem;
}

/* About Page */
.about-page .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.about-page .profile {
  margin-bottom: 3rem;
}

.about-page .profile-main {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.about-page .profile img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
}

.about-page .profile-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}

.about-page .profile h1 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
}

.about-page .profile p.role {
  margin: 0.1rem 0;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
}

.about-page .profile a.email {
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 500;
  margin-top: 0.3rem;
}

.about-page .profile a.email:hover {
  text-decoration: underline;
}

.about-page .profile p.location {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.about-page .profile-links {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 0.2rem;
}

.about-page .profile-links a {
  font-size: 1.5rem;
  color: var(--color-primary-dark);
  text-decoration: none;
}

.about-page .profile-links a:hover {
  opacity: 0.85;
}

.about-page .summary {
  margin-bottom: 3rem;
}

.about-page .summary h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-primary-dark);
}

/* CV Page (Light Mode/Print) */
body.cv-page {
  margin: 0;
  background: #f5f6f8;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  height: 100%;
}

body.cv-page * {
  box-sizing: border-box;
}

.cv-page .sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 20px auto;
  background: #fff;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
  padding: 18mm 18mm;
}

.cv-page h1 {
  margin: 0 0 2mm 0;
  font-size: 22pt;
  line-height: 1.15;
  font-weight: 600;
}

.cv-page .role {
  font-size: 12pt;
  color: var(--muted-cv);
  margin-bottom: 4mm;
}

.cv-page .contact {
  font-size: 10.5pt;
  color: var(--ink);
  margin-bottom: 8mm;
}

.cv-page .contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
}

.cv-page .section {
  margin-top: 8mm;
}

.cv-page .section-title {
  font-size: 10pt;
  letter-spacing: .08em;
  color: #333;
  text-transform: uppercase;
  margin: 0 0 3mm 0;
}

.cv-page .item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2mm;
  padding: 3mm 0;
  border-top: 1px solid var(--rule);
}

.cv-page .item:last-child {
  border-bottom: 1px solid var(--rule);
}

.cv-page .item h3 {
  margin: 0;
  font-size: 11pt;
  font-weight: 600;
}

.cv-page .when {
  font-size: 10pt;
  color: var(--muted-cv);
  text-align: right;
  white-space: nowrap;
}

.cv-page .item p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-cv);
  font-size: 10.5pt;
}

.cv-page ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cv-page ul.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 3mm;
}

.cv-page ul.inline li {
  font-size: 10.5pt;
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 3px;
}

.cv-page ul.timeline {
  margin-top: 3mm;
  border-left: 1px solid var(--rule);
  padding-left: 4mm;
}

.cv-page ul.timeline li {
  margin-bottom: 10pt;
}

.cv-page ul.timeline li h3 {
  margin-bottom: 1pt;
  font-size: 10.5pt;
  font-weight: 600;
}

.cv-page ul.timeline li .info {
  font-size: 9pt;
  color: var(--muted-cv);
}

/* Loading Screen */
#loading-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 1;
  background-color: #000;              /* solid black like the mockup */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

/* fade out when hidden (your JS already adds this class) */
#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* main orange titles */
#loading-screen h2 {
  margin: 0.4rem 0;
  font-weight: 700;
  color: #ffb454;                      /* warm orange like the image */
}

/* first line bigger */
#loading-screen h2:first-of-type {
  font-size: clamp(2.4rem, 3.5vw + 1rem, 3.2rem);
}

/* second and third lines slightly smaller */
#loading-screen h2:nth-of-type(2),
#loading-screen h2:nth-of-type(3) {
  font-size: clamp(1.7rem, 2.4vw + 0.8rem, 2.2rem);
}

/* "Loading GIF images..." text */
.loading-text {
  color: #ffffff;
  font-size: clamp(1.4rem, 1.8vw + 0.6rem, 1.8rem);
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

/* progress bar background */
.progress-container {
  width: min(420px, 80vw);
  height: 10px;
  background-color: #333333;
  border-radius: 999px;
  overflow: hidden;
}

/* filled portion of the bar */
.progress-bar {
  height: 100%;
  background-color: #ffb454;          /* same orange as headings */
  width: 0%;
  transition: width 0.3s ease;
}

/* "0%" under the bar */
.loading-percentage {
  color: #ffffff;
  margin-top: 1rem;
  font-size: 1.1rem;
}

/* Shrug Emoticon Animation */
#loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 1.2rem;
  font-size: 3rem;
  text-align: center;
}

.loading-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.loading-titles h2 {
  margin: 0.4rem 0;
}

.shrug {
  display: flex;
  align-items: center;
  justify-content: center;
}
.arm {
  display: inline-block;
  animation: lift 0.8s infinite alternate ease-in-out;
}

/* Make each arm rotate around the correct pivot point */
.left {
  transform-origin: right bottom;
}

.right {
  transform-origin: left bottom;
  animation-delay: 0.1s; /* slight offset for a natural feel */
}

@keyframes lift {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  100% {
    transform: rotate(-20deg) translateY(-6px);
  }
}

/* ==========================================================================
 * UTILITY STYLES
 * ========================================================================== */

/* Still image card – own spacing */
.still-image {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;

  /* Maintain max height based on a 2209×1080 ratio */
  aspect-ratio: 2209 / 1080;
  max-height: calc(100vw * (1080 / 2209)); /* Limits height relative to screen width */
  overflow: hidden; /* Prevent stretching */
}


/* Artwork GIF – own spacing & scaling control */
.artwork-gif {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  position: relative;
  border-radius: var(--radius-lg); /* Match .card rounding */

  /* Maintain max height based on a 2209×1080 ratio */
  aspect-ratio: 2209 / 1080;
  max-height: calc(100vw * (1080 / 2209)); /* Limits height relative to screen width */

  overflow: hidden; /* Needed for cropping */
}

/* Make GIF fill the card, centered, cropped, and keep rounding */
.artwork-gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Utility: align image to top when cropping */
.top-align {
  object-position: top;
}

/* Utility: align image to bottom when cropping */
.bottom-align {
  object-position: bottom;
}


/*
 * Dynamic Max Height
 * Usage: <div class="mh" style="--mh: 300px;">
 */
.mh { max-height: var(--mh) !important; overflow: hidden; }



/*
 * Dynamic Margin Bottom
 * Usage: <div class="mb" style="--mb: 20px;">
 */
.mb { margin-bottom: var(--mb) !important; }

/*
 * Dynamic Margin Top
 * Usage: <div class="mt" style="--mt: -10px;">
 */
.mt { margin-top: var(--mt) !important; }

/*
 * Dynamic Padding (ALL sides)
 * Usage: <div class="p" style="--p: 15px;">
 */
.p { padding: var(--p) !important; }

/*
 * Dynamic Padding TOP
 * Usage: <div class="pt" style="--pt: 20px;">
 */
.pt { padding-top: var(--pt) !important; }

/*
 * Dynamic Padding BOTTOM
 * Usage: <div class="pb" style="--pb: 25px;">
 */
.pb { padding-bottom: var(--pb) !important; }

/* Fixed Padding Top (quick presets) */
.pt-0 { padding-top: 0 !important; }
.pt-5 { padding-top: 5px !important; }

/* Fixed Padding Bottom (quick presets) */
.pb-0 { padding-bottom: 0 !important; }
.pb-5 { padding-bottom: 5px !important; }

/* Fixed Padding Left */
.pl-0 { padding-left: 0 !important; }
.pl-5 { padding-left: 5px !important; }

/* Fixed Padding Right */
.pr-0 { padding-right: 0 !important; }
.pr-5 { padding-right: 5px !important; }

/*
 * Gap Utilities (fixed values)
 * Only works on flex/grid containers.
 */
.gap-0  { gap: 0 !important; }
.gap-5  { gap: 5px !important; }
.gap-10 { gap: 10px !important; }
.gap-20 { gap: 20px !important; }



/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-card);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-bg-dark);
  border-radius: 20px;
  border: 3px solid var(--color-bg-card);
}

/* ==========================================================================
 * MEDIA QUERIES - CONSOLIDATED
 * ========================================================================== */

/* Portfolio Grid Responsive */
@media (min-width: 600px) {
  .portfolio-page .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Breakpoint */
@media (max-width: 600px) {
  /* Header */
  .site-nav {
    gap: 1rem;
  }

  .site-nav a {
    font-size: 1rem;
  }

  /* Portfolio */
  .portfolio-page .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Project 1 */
  .project-page-1 .breakdowns-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* About Page */
  .about-page .profile-main {
    flex-direction: column;
    text-align: center;
  }

  .about-page .profile-info {
    text-align: center;
  }

  .about-page .profile-links {
    justify-content: center;
    padding-left: 0;
  }

  /* Grid layouts */
  .project-page-1 .row-2col,
  .project-page-3 .row-2col,
  .project-page-1 .gallery-grid,
  .project-page-3 .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* MOBILE OVERLAY TEXT FIX */
  .top-right-text,
  .bottom-left-text {
    font-size: 0.7rem !important; /* smaller text */
    padding: 0.3rem 0.5rem !important; /* reduce spacing */
    opacity: 0.8; /* softer, less intrusive */
  }

  /* Optional: tighten letter spacing and line height */
  .top-right-text,
  .bottom-left-text {
    line-height: 1.1;
    letter-spacing: 0.5px;
  }

  /* MOBILE: shrink all loading-screen text to ~50% */
  #loading {
    padding: 2.5rem 1rem;
    gap: 1.2rem;
  }

  /* Cut title text size in half */
  .loading-titles h2 {
    font-size: 1.4rem !important;
    line-height: 1.25;
    margin: 0.3rem 0;
  }

  /* Shrug symbol */
  .shrug {
    font-size: 1.8rem !important;
    margin: 0.5rem 0 1rem 0;
  }

  /* "Loading GIF images..." line */
  #loading p,
  .loader-text {
    font-size: 1.2rem !important;
  }

  /* Progress percentage */
  .loading-percentage {
    font-size: 1.2rem !important;
  }

  /* Mobile CV / Resume Fix */

  /* Overall page breathing room */
  .cv-section,
  .cv-content {
      padding: 1.4rem 1rem !important;
  }

  /* Name */
  .cv-name,
  h1.cv-name {
      font-size: 1.8rem !important;
      line-height: 1.2;
      margin-bottom: 0.6rem;
  }

  /* Job title */
  .cv-title {
      font-size: 1.1rem !important;
      margin-bottom: 1.2rem;
  }

  /* Body text */
  .cv-section p,
  .cv-content p {
      font-size: 1rem !important;
      line-height: 1.45;
  }

  /* Section headers (EXPERIENCE, SKILLS, etc.) */
  .cv-section h2,
  .cv-content h2 {
      font-size: 1.2rem !important;
      margin-top: 1.8rem;
      margin-bottom: 0.8rem;
  }

  /* Job Titles */
  .cv-section h3,
  .cv-content h3 {
      font-size: 1.1rem !important;
      margin-bottom: 0.4rem;
  }

  /* Make the PDF download button smaller */
  .cv-download-btn {
      font-size: 0.9rem !important;
      padding: 0.6rem 1rem !important;
      border-width: 2px !important;
  }
}

@media (max-width: 480px) {
  .site-header .name h1 {
    font-size: 2rem !important;
    letter-spacing: 2px !important;
  }

  .site-header .name h2 {
    font-size: 2rem !important;
  }
}

/* Print Styles */
@media print {
  body.cv-page {
    background: #fff;
    margin: 0;
    padding: 0;
  }
  
  .cv-page .sheet {
    box-shadow: none;
    margin: 0;
    width: 100%;
    min-height: auto;
    padding: 10mm;
  }
  
  .cv-page .contact a {
    border-bottom: none;
  }
}

/* Icon specific styles */
.about-page .profile-links img {
  width: 25px;
  height: 25px;
  padding: 2mm;
  border-radius: 0;
  fill: #888
}

/* ============================================================
   GLOBAL LINK STYLE — MATCHES DARK THEME
   ============================================================ */

   a {
    color: var(--color-blue-accent);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    border-bottom: 1px solid transparent;
  }
  
  a:hover {
    color: var(--color-primary-dark);
    border-bottom: 1px solid var(--color-primary-dark);
    opacity: 0.9;
  }
  
  a:active {
    opacity: 0.7;
  }
  
/* ===================== A4 CV FIX ===================== */

/* Desktop/tablet = A4 paper centered */
.cv-page {
    background: #ffffff;
    color: #000;
    width: 100%;
    max-width: 900px;           /* controlled A4 width */
    margin: 2rem auto;
    padding: 3rem;
    box-shadow: 0 0 40px rgba(0,0,0,0.4);
    border-radius: 6px;
    box-sizing: border-box;
}

/* Prevent any stupid horizontal scroll */
html, body {
    overflow-x: hidden !important;
}

/* ===================== MOBILE FIX ===================== */
@media (max-width: 600px) {

    /* Full-width page, like holding an A4 on your phone */
    .cv-page {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 1.5rem 1.2rem !important;
        box-shadow: none !important;
    }

    /* Scale text down so it fits naturally */
    .cv-page h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }
    .cv-page h2 {
        font-size: 1.25rem !important;
        margin-top: 1.5rem;
    }
    .cv-page h3 {
        font-size: 1.05rem !important;
    }
    .cv-page p,
    .cv-page li {
        font-size: 0.95rem !important;
        line-height: 1.35;
    }

    /* Make contact info not crash the layout */
    .cv-header {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    /* Mobile - Make header & summary full width */
    .cv-header,          /* container with name + contact info */
    .cv-intro,           /* summary text wrapper */
    .cv-header-wrapper { /* depending on your naming */
        display: flex;
        flex-direction: column !important;
        gap: 1rem;
        width: 100% !important;
    }

    /* Force name/title/info to stretch properly */
    .cv-header-left,
    .cv-header-right {
        width: 100% !important;
    }

    /* Make that paragraph not boxed-in */
    .cv-intro p,
    .cv-summary p,
    .cv-page p {
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
}

/* =========================================================
 * GRID/CARD LAYOUTS (from grid.css)
 * ======================================================= */

/* Page Background/Centering */
.grid_wide {
    min-height: 100vh;
    padding: var(--page-padding);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Allows cards-wrapper to stack content vertically */
}

.cards-wrapper {
    width: 100%;
    max-width: var(--card-max-width);
}

/* ALL CARD STYLES (Common Base) */
.card-layout {
    /* Let grid control width like the normal .card */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    /* Layout stuff kept from your original */
    border-radius: var(--card-radius);
    display: flex;
    gap: var(--card-gap);
    margin-bottom: 24px;
}

/* Optionally, avoid double padding/oddities when both .card & .card-layout are present */
.card.card-layout {
    padding: 0; /* your artwork cards already manage their own internal spacing */
}
/* Shared image behavior inside any card */
.card-layout img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 1) ARTWORK-WIDE (RED + 2 SQUARES) - Original Card Structure */
.wide-dual-column-card {
    padding: 0;
    aspect-ratio: var(--ratio-wide);
    overflow: hidden;
}

.red-box {
    flex: 4;
    overflow: hidden;
    border-radius: var(--card-radius);
}

.small-boxes-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.small-box {
    flex: 1;
    overflow: hidden;
    border-radius: var(--card-radius);
}

/* 2) SIMPLE 2-COLUMN CARD (brown + purple) */
.simple-card {
    padding: 0;
    aspect-ratio: var(--ratio-wide);
    overflow: hidden;
}

.simple-card .brown-panel,
.simple-card .purple-panel {
    height: 100%;
    border-radius: var(--card-radius);
}

.simple-card .brown-panel {
    flex: 3;
}

.simple-card .purple-panel {
    flex: 1;
}

/* 3) 4 WIDE SQUARE CARD (2x2 Grid) */
.four-wide-square-card {
    padding: 0;
    aspect-ratio: var(--ratio-2x2); /* 16:9 */
}

.four-wide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    height: 100%;
    gap: var(--card-gap);
}

.four-wide-grid .sq {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
}

/* 4) 4 TALL BOXES (In one row) */
.four-tall-card {
    padding: 0;
    align-items: stretch; /* Stretch tall-boxes to the full height */
}

.four-tall-card .tall-box {
    flex: 1;
    aspect-ratio: var(--ratio-tall);
    border-radius: var(--card-radius);
    overflow: hidden;
}

/* 5) 4 SMALL BOXES (In one row, perfectly square) */

.four-row-card {
    padding: 0;
}

.four-row-card .mini-box {
    flex: 1;
    aspect-ratio: 1 / 1;
    border-radius: var(--card-radius);
    overflow: hidden;
}

/* RESPONSIVE (from grid.css - 640px breakpoint) */
@media (max-width: 640px) {
    /* Apply stacking and remove fixed ratio for all cards */
    .card-layout {
        flex-direction: column;
        aspect-ratio: auto;
    }

    /* CARD 1: ARTWORK-WIDE (RED + 2 SQUARES) */
    /* Force the red-box (left panel) to be wide (e.g., 16/9) */
    .wide-dual-column-card .red-box {
      aspect-ratio: 16 / 9; /* Enforce a wide ratio to prevent squaring */
    }

    /* Keep the two small boxes side-by-side for a better layout */
    .small-boxes-container {
        flex-direction: row;
        aspect-ratio: auto;
        /* Give it a defined height, 2 tall boxes side by side */
        min-height: 150px;
    }
    
    /* Card 2: SIMPLE 2-COLUMN CARD (brown + purple) */
    /* Force the brown-panel to be wide (16/9) */
    .simple-card .brown-panel {
      aspect-ratio: 16 / 9; /* Enforce a wide ratio to prevent squaring */
    }

    /* Card 3: Change 2x2 grid to a 4-row 1-column grid */
    .four-wide-grid {
        grid-template-columns: 1fr;
    }
    
    /* Card 4 (Tall) and Card 5 (Cubes): Adjust inner elements for stacking */
    .four-tall-card .tall-box,
    .four-row-card .mini-box {
        flex: 1 1 100%; /* Force full width on small screens */
        aspect-ratio: 4 / 3; /* Use a more typical portrait ratio for small screens */
    }
}

/* ==========================================================================
 * Page-Specific Extracted Styles
 * ========================================================================== */

/* Portfolio page badge overrides */
.portfolio-page .main-container {
  max-width: 1200px;
  margin: 0 auto;
}

.portfolio-page article.card .logo-badge-left {
  left: 16px;
  right: auto;
  width: auto;
  height: clamp(22px, 4.5vw, 25px);
  display: flex;
  align-items: center;
  overflow: visible;
}

.portfolio-page article.card .logo-badge img {
  aspect-ratio: auto;
  object-fit: contain;
  border-bottom: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

.portfolio-page article.card .logo-badge-left img {
  width: auto;
  height: 100%;
  display: block;
}

/* Project page utilities */
.project-page-1 .logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.project-page-1 .logo-row img {
  max-width: 100%;
  height: auto;
}

.project-page-0 .spacer-lg {
  margin-top: 5rem;
}

.project-page-0 .info-box ul li {
  margin-bottom: 0.75rem;
}

.project-page-0 .info-box ul li:last-child {
  margin-bottom: 0;
}

.project-page-0 .info-box h3 {
  color: #ffd700;
}

.project-page-0 .info-box h4 {
  font-size: 120%;
  color: #f8b365;
}

.project-page-0 .still-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-page-0 .footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 5rem;
}

.project-page-0 .back-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-centered-copy {
  text-align: center;
}

.credits-caption {
  margin: 1rem 0 0;
  color: var(--color-primary-dark);
  font-size: 120%;
  text-align: center;
}

.project-card-overlap {
  margin-bottom: -12px !important;
}

.artwork-row-clipped {
  max-height: 300px !important;
  overflow: hidden;
}

@media (max-width: 768px) {
  .project-page-0 .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* About page icon row and mobile centering */
.about-page .profile-links a img,
.about-page .dcc-icon img {
  filter: invert(1);
}

.about-page .summary .game-title {
  color: var(--color-primary-dark);
}

.about-page .dcc-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
  padding-left: 0.2rem;
}

.about-page .dcc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.about-page .dcc-icon:hover {
  opacity: 0.85;
}

.about-page .dcc-icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (max-width: 600px) {
  body.about-page {
    width: 100%;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
  }

  .about-page .container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    align-items: center;
    box-sizing: border-box;
  }

  .about-page .profile,
  .about-page .summary {
    width: 100%;
    max-width: 34rem;
    margin-right: auto;
    margin-left: auto;
  }

  .about-page .profile-main {
    width: 100%;
    align-items: center;
  }

  .about-page .summary h2 {
    text-align: center;
  }

  .about-page .summary p {
    width: 100%;
    overflow-wrap: break-word;
  }

  .about-page .dcc-icons {
    display: grid;
    grid-template-columns: repeat(5, 24px);
    justify-content: center;
    justify-items: center;
    gap: 0.9rem 1.25rem;
    padding-left: 0;
  }

  .about-page .back-column {
    width: 100%;
  }
}