/* =============================================================
   POLYGONINK STYLE SYSTEM - Liam Schultz Portfolio
   =============================================================
   HOW TO USE THIS FILE
   --------------------
   All visual decisions (colors, spacing, fonts, sizes) live
   in the :root block below. Change a value there and it updates
   across the entire page. Never hardcode a color, size, or font
   value outside of :root - always add a new variable instead.
   ============================================================= */

/* ----- Google Fonts (match the original site) ----- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {

  /* -----------------------------------------------------------
     BACKGROUND COLOURS
     bg        - main page background (deepest layer)
     surface   - cards, header, footer, raised elements
     surface-2 - inputs, nested panels, deeper elements
  ----------------------------------------------------------- */
  --color-bg:        #0a0a0a;
  --color-surface:   #111111;
  --color-surface-2: #1a1a1a;

  /* -----------------------------------------------------------
     BORDER COLOURS
     border        - default border on cards, dividers, inputs
     border-subtle - very faint rule (e.g. divider lines)
  ----------------------------------------------------------- */
  --color-border:        #222222;
  --color-border-subtle: #161616;

  /* -----------------------------------------------------------
     TEXT COLOURS
     text          - primary readable body text
     text-muted    - secondary / supporting text
     text-disabled - placeholder text, inactive labels
     text-heading  - headings and titles (bright white)
  ----------------------------------------------------------- */
  --color-text:          #e8eaed;
  --color-text-muted:    #8a91a8;
  --color-text-disabled: #4a4f5e;
  --color-text-heading:  #ffffff;

  /* -----------------------------------------------------------
     ACCENT - PRIMARY BRAND COLOUR (Red)
     accent        - buttons, links, highlights, active states
     accent-hover  - darker shade used on button hover
     accent-light  - lighter tint for hovered links
     accent-soft   - very low-opacity fill for tag backgrounds
     accent-glow   - radial glow used in hero backgrounds
     accent-border - low-opacity border on tags and badges
  ----------------------------------------------------------- */
  --color-accent:         #e01a2d;
  --color-accent-hover:   #c01525;
  --color-accent-light:   #ff3f53;
  --color-accent-soft:    rgba(224, 26, 45, 0.12);
  --color-accent-glow:    rgba(224, 26, 45, 0.30);
  --color-accent-border:  rgba(224, 26, 45, 0.25);

  /* -----------------------------------------------------------
     UTILITY COLOURS
     white   - pure white, used directly where needed
     overlay - semi-transparent dark layer (sticky header bg)
  ----------------------------------------------------------- */
  --color-white:   #ffffff;
  --color-overlay: rgba(10, 10, 10, 0.90);

  /* -----------------------------------------------------------
     TYPOGRAPHY - FONT FAMILIES
     font-display - headings and titles (Space Grotesk)
     font-body    - all body text and UI labels (DM Sans)
     font-mono    - code blocks, technical labels (JetBrains Mono)
  ----------------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* -----------------------------------------------------------
     TYPOGRAPHY - FONT SIZES
     xs   - labels, badges, captions, legal text
     sm   - nav links, meta text, secondary info
     base - standard body copy
     lg   - lead paragraphs, large body text
     xl   - subheadings, card titles, footer name
     2xl  - section headings
     3xl  - hero title / page title
  ----------------------------------------------------------- */
  --font-size-xs:   0.8125rem; /* 13px */
  --font-size-sm:   0.9375rem; /* 15px */
  --font-size-base: 1.0625rem; /* 17px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.625rem;  /* 26px */
  --font-size-2xl:  2.75rem;   /* 44px */
  --font-size-3xl:  4.25rem;   /* 68px */

  /* -----------------------------------------------------------
     TYPOGRAPHY - LINE HEIGHTS
     tight  - headings, titles
     normal - body text, cards
     loose  - long-form reading
  ----------------------------------------------------------- */
  --line-height-tight:  1.2;
  --line-height-normal: 1.7;
  --line-height-loose:  1.8;

  /* -----------------------------------------------------------
     LETTER SPACING
     tight  - condensed headings if needed
     normal - default (inherit)
     wide   - uppercase labels, section labels
     wider  - badges, nav active indicator underline
  ----------------------------------------------------------- */
  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:   0.08em;
  --letter-spacing-wider:  0.12em;

  /* -----------------------------------------------------------
     SPACING SCALE
     xs - tight gaps between inline elements
     sm - padding inside cards, gaps between form fields
     md - standard component padding, between components
     lg - large section gaps
     xl - page-level vertical breathing room
  ----------------------------------------------------------- */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.75rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 3.5rem;

  /* -----------------------------------------------------------
     LAYOUT
     max-width       - maximum content column width
     header-height   - sticky header height
     photo-width     - hero / about photo column width
  ----------------------------------------------------------- */
  --max-width:       1240px;
  --header-height:   68px;
  --photo-width:     360px;

  /* -----------------------------------------------------------
     BORDER RADIUS
     radius    - buttons, inputs, small cards
     radius-lg - large cards, modals, photo frames
     radius-xl - full pill shape (badges, tags)
  ----------------------------------------------------------- */
  --radius:    8px;
  --radius-lg: 16px;
  --radius-xl: 999px;

  /* -----------------------------------------------------------
     TRANSITIONS / ANIMATION
     transition      - standard hover speed
     transition-slow - larger layout shifts or reveals
  ----------------------------------------------------------- */
  --transition:      0.2s ease;
  --transition-slow: 0.4s ease;

  /* -----------------------------------------------------------
     EFFECTS
     header-blur   - backdrop blur on sticky header
     btn-glow      - box-shadow glow on primary button hover
     card-lift     - translateY distance when card is hovered
  ----------------------------------------------------------- */
  --header-blur: blur(12px);
  --btn-glow:    0 0 24px var(--color-accent-glow);
  --card-lift:   -6px;

  /* -----------------------------------------------------------
     GLOW SIZES
     glow-size - diameter of hero background radial glow
  ----------------------------------------------------------- */
  --glow-size: 700px;

}


/* =============================================================
   RESET & BASE
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-normal);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent-light);
}

img {
  max-width: 100%;
  display: block;
}


/* =============================================================
   LAYOUT
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

main {
  flex: 1;
  /* sit above the fixed atmospheric FX background */
  position: relative;
  z-index: 2;
}


/* =============================================================
   HEADER / NAV
   ============================================================= */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-overlay);
  backdrop-filter: var(--header-blur);
  -webkit-backdrop-filter: var(--header-blur);
  border-bottom: 1px solid var(--color-border);
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--spacing-sm);
}

.site-brand {
  display: flex;
  flex-direction: column;
  line-height: var(--line-height-tight);
  text-decoration: none;
}

.site-brand .name {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-heading);
  text-decoration: none;
}

.site-brand .name:hover {
  color: var(--color-accent);
}

.site-brand .role {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

nav a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition);
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition);
}

nav a:hover,
nav a.active {
  color: var(--color-text);
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}


/* =============================================================
   FOOTER
   ============================================================= */
footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-lg);
  /* sit above the fixed atmospheric FX background */
  position: relative;
  z-index: 2;
}

footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.footer-brand .name {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  color: var(--color-text-heading);
}

.footer-brand .tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs);
}

.footer-links a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-social {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  justify-content: flex-end;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.footer-social a:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.footer-copy {
  width: 100%;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}


/* =============================================================
   HERO
   ============================================================= */
.hero {
  padding: var(--spacing-xl) 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: var(--glow-size);
  height: var(--glow-size);
  background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 65%);
  pointer-events: none;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr var(--photo-width);
  align-items: center;
  gap: var(--spacing-xl);
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-sm);
}

.hero h1 .highlight {
  color: var(--color-accent);
}

/* --- Gradient text effect (used for key words) --- */
.text-gradient {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-bio {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 540px;
  margin-bottom: var(--spacing-md);
}

.hero-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.hero-photo {
  position: relative;
}

.hero-photo img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* Glowing border around the hero photo */
.hero-photo::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius-lg) + 3px);
  background: linear-gradient(135deg, var(--color-accent), transparent 60%);
  z-index: -1;
  opacity: 0.5;
}


/* =============================================================
   SECTION TITLES
   ============================================================= */
.section {
  padding: var(--spacing-lg) 0;
}

.section-label {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.section h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-md);
}


/* =============================================================
   DIVIDER
   ============================================================= */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}


/* =============================================================
   NUMBERED GRID
   ============================================================= */
.numbered-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.numbered-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  transition: border-color var(--transition), transform var(--transition);
}

.numbered-item:hover {
  border-color: var(--color-accent);
  transform: translateY(var(--card-lift));
}

.numbered-item .number {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.6;
  margin-bottom: var(--spacing-xs);
}

.numbered-item h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-xs);
}

.numbered-item p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}


/* =============================================================
   SKILL TAGS / BADGES
   ============================================================= */
.skills-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.skill-tag {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-xl);
}


/* =============================================================
   PROJECT GRID (Portfolio)
   ============================================================= */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.project-card:hover {
  border-color: var(--color-accent);
  transform: translateY(var(--card-lift));
}

.project-card-img {
  aspect-ratio: 3 / 2;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.project-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-body {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

.project-card-body h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  color: var(--color-text-heading);
  margin-bottom: 0.25rem;
}

.project-card-body p {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-white);
  box-shadow: var(--btn-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* =============================================================
   FORMS
   ============================================================= */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.form-group input,
.form-group textarea {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  padding: 0.65rem 0.9rem;
  width: 100%;
  transition: border-color var(--transition);
  resize: vertical;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-disabled);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}


/* =============================================================
   CARD (generic utility)
   ============================================================= */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  transition: border-color var(--transition), transform var(--transition);
}

.card:hover {
  border-color: var(--color-accent);
  transform: translateY(var(--card-lift));
}

.card .card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-xs);
}

.card .card-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}


/* =============================================================
   PORTFOLIO FILTER BAR
   ============================================================= */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.4rem 1rem;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.portfolio-item {
  display: block;
}

.portfolio-item.hidden {
  display: none;
}

/* =============================================================
   ACHIEVEMENT CARDS
   ============================================================= */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.achievement-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  transition: border-color var(--transition), transform var(--transition);
}

.achievement-card:hover {
  border-color: var(--color-accent);
  transform: translateY(var(--card-lift));
}

.achievement-card .award-label {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.achievement-card h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--color-text-heading);
  margin-bottom: 0.25rem;
}

.achievement-card .project-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.achievement-card .year {
  font-size: var(--font-size-xs);
  color: var(--color-text-disabled);
}

/* =============================================================
   GAME DETAIL PAGE
   ============================================================= */
.game-hero {
  padding: var(--spacing-xl) 0 var(--spacing-md);
}

.game-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.game-meta-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-sm);
}

.game-meta-item .meta-label {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.game-meta-item .meta-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  font-family: var(--font-display);
  font-weight: 600;
}

.game-screenshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.game-screenshot {
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.game-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-nav-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-lg);
}

.contact-strip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.contact-strip h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  color: var(--color-text-heading);
  margin-bottom: 0.5rem;
}

.contact-strip p {
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .achievement-grid,
  .game-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .game-screenshot-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .achievement-grid,
  .game-meta-grid {
    grid-template-columns: 1fr;
  }
  .game-nav-strip {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
}


/* =============================================================
   RESPONSIVE
   ============================================================= */

/* Tablets & small laptops */
@media (max-width: 768px) {
  :root {
    --font-size-3xl: 2.75rem;
    --font-size-2xl: 2rem;
    --photo-width: 240px;
  }

  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-bio {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-photo {
    max-width: 220px;
    margin: 0 auto;
    order: -1;
  }

  .project-grid,
  .numbered-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  nav {
    gap: var(--spacing-sm);
  }

  .footer-links {
    align-items: flex-start;
  }
  .footer-social {
    justify-content: flex-start;
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  header .container {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  nav {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  nav a {
    font-size: var(--font-size-xs);
  }

  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-photo {
    max-width: 180px;
    margin: 0 auto;
    order: -1;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    justify-content: center;
    width: 100%;
  }

  .project-grid,
  .numbered-grid {
    grid-template-columns: 1fr;
  }

  .footer .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    align-items: center;
  }
  .footer-social {
    justify-content: center;
  }

  .contact-strip {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: var(--spacing-md);
  }

  .contact-strip .btn {
    width: 100%;
    justify-content: center;
  }
}


/* =============================================================
   ATMOSPHERIC FX LAYER - Sitewide Background
   =============================================================
   Pure CSS atmospheric background effects shared across every
   page (added to <body> on each HTML file):
   - Glowing sun / orb
   - Layered temple / fortress silhouette
   - Floating particle embers
   - Subtle scanline overlay
   These layers are fixed to the viewport and sit behind all
   page content (header/main/footer use a higher z-index).
   ============================================================= */

/* ----- Container that holds all effects ----- */
.atmosphere {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ----- Scanlines (subtle CRT / retro effect) ----- */
.atmosphere-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  animation: flicker 4s infinite steps(60);
}

.atmosphere-scanlines::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

@keyframes flicker {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
  52% { opacity: 0.78; }
}

/* ----- Main atmosphere layer (contains sun + fortress + particles) ----- */
.atmosphere-layer {
  z-index: 1;
  background: 
    radial-gradient(circle at 50% 45%, rgba(252, 80, 100, 0.18), transparent 22%),
    linear-gradient(to bottom, transparent 0 54%, rgba(0, 0, 0, 0.16) 100%);
}

/* ----- Glowing sun / orb ----- */
.atmosphere-sun {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(34vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(252, 80, 100, 0.34) 0 34%,
    rgba(252, 80, 100, 0.16) 35% 58%,
    transparent 64%
  );
  box-shadow: 0 0 70px rgba(252, 80, 100, 0.22);
  transform: translate(-50%, -50%);
  animation: pulse-glow 12s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

/* ----- The fortress / temple (layered silhouettes) ----- */
.atmosphere-fortress {
  position: absolute;
  left: 50%;
  bottom: max(5vh, 42px);
  width: min(76vw, 880px);
  height: min(46vh, 430px);
  opacity: 0.42;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.48));
  transform: translate(-50%);
}

.atmosphere-tier {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.atmosphere-tier::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 112%;
  height: 42%;
  clip-path: polygon(
    4% 62%, 17% 26%, 50% 0,
    83% 26%, 96% 62%, 72% 52%,
    50% 70%, 28% 52%
  );
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.95), rgba(30, 20, 22, 0.9));
}

.atmosphere-tier::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 58%;
  height: 66%;
  background: 
    linear-gradient(
      to right,
      transparent 0 12%,
      rgba(252, 80, 100, 0.22) 13% 15%,
      transparent 16% 84%,
      rgba(252, 80, 100, 0.2) 85% 87%,
      transparent 88%
    ),
    rgba(15, 17, 21, 0.88);
  border-inline: 1px solid rgba(252, 80, 100, 0.12);
}

/* --- Individual tiers (stacked to form the temple shape) --- */
.atmosphere-tier-1 { top: 2%; width: 30%; height: 23%; z-index: 5; }
.atmosphere-tier-2 { top: 18%; width: 42%; height: 25%; z-index: 4; }
.atmosphere-tier-3 { top: 37%; width: 56%; height: 27%; z-index: 3; }
.atmosphere-tier-4 { top: 58%; width: 72%; height: 30%; z-index: 2; }

.atmosphere-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 82%;
  height: 22%;
  clip-path: polygon(9% 18%, 91% 18%, 98% 100%, 2% 100%);
  background: 
    linear-gradient(
      to right,
      transparent 0 15%,
      rgba(252, 80, 100, 0.12) 16% 18%,
      transparent 19% 81%,
      rgba(252, 80, 100, 0.12) 82% 84%,
      transparent 85%
    ),
    rgba(13, 14, 18, 0.9);
  z-index: 1;
}

/* ----- Floating ember particles ----- */
.atmosphere-ember {
  --left: 50vw;
  --duration: 12s;
  --delay: 0s;
  position: absolute;
  left: var(--left);
  bottom: -4vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(252, 79, 99, 0.72);
  box-shadow: 0 0 12px rgba(252, 80, 100, 0.58);
  animation: ember-rise var(--duration) ease-in var(--delay) infinite;
}

@keyframes ember-rise {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(0.7);
  }
  12%, 74% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate3d(5vw, -82vh, 0) scale(1.15);
  }
}

/* --- Ember positions (spread across the screen) --- */
.atmosphere-ember:nth-child(1) { --left: 8vw; --duration: 15s; --delay: -9s; }
.atmosphere-ember:nth-child(2) { --left: 14vw; --duration: 11s; --delay: -3s; }
.atmosphere-ember:nth-child(3) { --left: 21vw; --duration: 18s; --delay: -15s; }
.atmosphere-ember:nth-child(4) { --left: 29vw; --duration: 13s; --delay: -6s; }
.atmosphere-ember:nth-child(5) { --left: 35vw; --duration: 17s; --delay: -12s; }
.atmosphere-ember:nth-child(6) { --left: 42vw; --duration: 12s; --delay: -4s; }
.atmosphere-ember:nth-child(7) { --left: 48vw; --duration: 16s; --delay: -10s; }
.atmosphere-ember:nth-child(8) { --left: 55vw; --duration: 14s; --delay: -2s; }
.atmosphere-ember:nth-child(9) { --left: 62vw; --duration: 19s; --delay: -16s; }
.atmosphere-ember:nth-child(10) { --left: 68vw; --duration: 12s; --delay: -8s; }
.atmosphere-ember:nth-child(11) { --left: 73vw; --duration: 16s; --delay: -13s; }
.atmosphere-ember:nth-child(12) { --left: 81vw; --duration: 10s; --delay: -5s; }
.atmosphere-ember:nth-child(13) { --left: 88vw; --duration: 18s; --delay: -14s; }
.atmosphere-ember:nth-child(14) { --left: 94vw; --duration: 13s; --delay: -7s; }
.atmosphere-ember:nth-child(15) { --left: 17vw; --duration: 20s; --delay: -17s; }
.atmosphere-ember:nth-child(16) { --left: 39vw; --duration: 11s; --delay: -1s; }
.atmosphere-ember:nth-child(17) { --left: 59vw; --duration: 15s; --delay: -11s; }
.atmosphere-ember:nth-child(18) { --left: 77vw; --duration: 17s; --delay: -6s; }

/* ----- Reduce motion for accessibility ----- */
@media (prefers-reduced-motion: reduce) {
  .atmosphere-sun,
  .atmosphere-ember,
  .atmosphere-scanlines {
    animation: none !important;
  }
}