/* ============================================================
   CIM — Center for Interactive Media
   Nothing Design System · Bento Viewport Layout
   Dark mode default via data-theme. Manual toggle.
   ============================================================ */

/* --- TOKENS (Dark Mode Default) --- */
[data-theme="dark"], :root {
  --black: #000000;
  --surface: #111111;
  --surface-raised: #1A1A1A;
  --border: #222222;
  --border-visible: #333333;
  --text-disabled: #666666;
  --text-secondary: #999999;
  --text-primary: #E8E8E8;
  --text-display: #FFFFFF;
  --accent: #D71921;
  --accent-subtle: rgba(215, 25, 33, 0.15);
  --success: #4A9E5C;
  --warning: #D4A843;
  --interactive: #5B9BF6;

  /* Spacing */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Type Scale */
  --display-xl: 72px;
  --display-lg: 48px;
  --display-md: 36px;
  --heading: 24px;
  --subheading: 18px;
  --body: 16px;
  --body-sm: 14px;
  --caption: 12px;
  --label: 11px;

  /* Grid */
  --tile-radius: 12px;
  --tile-gap: 8px;
  --grid-padding: 8px;
  --footer-height: 32px;
}

/* --- BLUEPRINT MODE --- */
[data-theme="light"] {
  --black: #F7F5F0;
  --surface: #FFFDF8;
  --surface-raised: #F0EDE6;
  --border: #D4CFC4;
  --border-visible: #B8B2A6;
  --text-disabled: #A39D94;
  --text-secondary: #7A7468;
  --text-primary: #2C2824;
  --text-display: #1A1714;
  --interactive: #2B5EA7;
}

[data-theme="light"] body {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(180, 170, 155, 0.03) 31px, rgba(180, 170, 155, 0.03) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(180, 170, 155, 0.03) 31px, rgba(180, 170, 155, 0.03) 32px);
}

/* --- ZOOM LEVELS --- */
/* Small: compact view — tighter spacing, smaller type */
[data-zoom="small"] {
  --tile-gap: 6px;
  --grid-padding: 6px;
  --display-xl: 56px;
  --display-lg: 38px;
  --display-md: 28px;
  --heading: 20px;
  --subheading: 15px;
  --body: 13px;
  --body-sm: 12px;
  --caption: 10px;
  --label: 9px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
}

/* Medium: default — no overrides needed, uses root values */

/* Large: expanded view — roomier spacing, bigger type */
[data-zoom="large"] {
  --tile-gap: 10px;
  --grid-padding: 10px;
  --display-xl: 88px;
  --display-lg: 60px;
  --display-md: 44px;
  --heading: 28px;
  --subheading: 21px;
  --body: 18px;
  --body-sm: 16px;
  --caption: 13px;
  --label: 12px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-2xl: 56px;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  background: var(--black);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
address { font-style: normal; }

/* --- SKIP LINK --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--grid-padding);
  z-index: 1000;
  font-family: 'Space Mono', monospace;
  font-size: var(--caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--text-display);
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  text-decoration: none;
  transition: top 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.skip-link:focus { top: var(--grid-padding); }

/* --- PAGE TOOLBAR (top-right: zoom + theme) --- */
.page-toolbar {
  position: fixed;
  top: var(--grid-padding);
  right: var(--grid-padding);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* --- ZOOM CONTROL (segmented, instrument-panel) --- */
.zoom-control {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--border);
  border-radius: 999px;
  padding: 1px;
}

.zoom-btn {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-disabled);
  background: var(--surface);
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
  transition: color 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
              background 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.zoom-btn:hover {
  color: var(--text-primary);
}

.zoom-btn--active {
  background: var(--text-display);
  color: var(--black);
}

/* --- THEME TOGGLE (mechanical switch) --- */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.theme-toggle__track {
  display: block;
  width: 36px;
  height: 18px;
  background: var(--surface-raised);
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  position: relative;
  transition: background 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.theme-toggle__knob {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--text-display);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-theme="light"] .theme-toggle__knob {
  transform: translateX(18px);
}

.theme-toggle__label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-disabled);
  text-transform: uppercase;
}

/* --- BENTO GRID (14 tiles, weighted rows) --- */
.bento-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Weighted rows: hero row slightly taller, bottom row slightly compact */
  grid-template-rows: 1.1fr 1.1fr 1fr 1fr 1fr 1fr 0.9fr 0.9fr;
  gap: var(--tile-gap);
  padding: var(--grid-padding);
  padding-bottom: 0;
  min-height: 0;
  grid-template-areas:
    "hero  hero  hero  games games games games games event event event event"
    "hero  hero  hero  games games games games games event event event event"
    "gstu  gstu  gstu  twin  twin  twin  xr    xr    xr    trans trans trans"
    "gstu  gstu  gstu  twin  twin  twin  xr    xr    xr    trans trans trans"
    "imed  imed  imed  huma  huma  huma  stats stats stats facul facul facul"
    "imed  imed  imed  huma  huma  huma  stats stats stats facul facul facul"
    "part  part  part  part  world world world world cont  cont  cont  cont"
    "part  part  part  part  world world world world cont  cont  cont  cont";
}

/* --- BASE TILE --- */
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  padding: var(--space-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.tile:hover { border-color: var(--border-visible); }
a.tile:active,
.tile[onclick]:active {
  transform: scale(0.995);
  transition: transform 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- TILE LABEL --- */
.tile-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text-disabled);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

/* ============================================================
   TILE: HERO
   ============================================================ */
.tile-hero {
  grid-area: hero;
  justify-content: center;
}

.tile-hero__label {
  font-family: 'Space Mono', monospace;
  font-size: var(--label);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-hero__title {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: var(--display-xl);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-display);
  margin-bottom: var(--space-xs);
}

.tile-hero__subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--subheading);
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.tile-hero__desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--body-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 42ch;
}

/* ============================================================
   TILE: PUBLISHED GAMES (featured — the "surprise" element)
   ============================================================ */
.tile-games-featured {
  grid-area: games;
}

.games-showcase {
  display: flex;
  gap: var(--space-md);
  flex: 1;
  min-height: 0;
}

.game-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.game-card__img-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 460 / 215;
  flex-shrink: 1;
  min-height: 0;
}

.game-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Paper shader: grayscale + high contrast + slight grain */
  filter: grayscale(100%) contrast(1.3) brightness(0.85);
  transition: filter 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.game-card:hover .game-card__img {
  filter: grayscale(50%) contrast(1.15) brightness(0.95);
}

/* Crosshatch/paper texture overlay */
.game-card__paper-overlay {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.06) 2px,
      rgba(0, 0, 0, 0.06) 3px
    );
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.7;
}

[data-theme="light"] .game-card__paper-overlay {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.08) 2px,
      rgba(0, 0, 0, 0.08) 3px
    );
}

.game-card__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.game-card__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--text-display);
}

.game-card__tags {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-disabled);
  text-transform: uppercase;
}

.game-card__meta {
  font-family: 'Space Mono', monospace;
  font-size: var(--caption);
  color: var(--text-secondary);
}

.game-card__available {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  flex-shrink: 0;
}

.accent-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   TILE: LAUNCH EVENT (red outline — urgency signal)
   ============================================================ */
.tile-event {
  grid-area: event;
  border-color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  justify-content: space-between;
}

.tile-event:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.tile-event__date {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: var(--display-lg);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text-display);
  margin: var(--space-xs) 0;
}

.tile-event__details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--caption);
  color: var(--text-secondary);
  line-height: 1.4;
}

.tile-event__sponsors {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
  margin-top: auto;
}

.tile-event__cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: 'Space Mono', monospace;
  font-size: var(--label);
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: var(--space-sm);
}

.tile-event__arrow {
  font-size: var(--subheading);
  transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tile-event:hover .tile-event__arrow {
  transform: translateX(4px);
}

/* Post-event commemorative state */
.tile-event--past {
  border-color: var(--border-visible);
}
.tile-event--past:hover {
  background: var(--surface-raised);
}
.tile-event--past .tile-event__cta {
  color: var(--text-secondary);
}
.tile-event--past .tile-label::after {
  content: ' · RECAP';
}

/* ============================================================
   TILE: RESEARCH CLUSTERS (shared styles)
   ============================================================ */
.tile-game { grid-area: gstu; }
.tile-twin { grid-area: twin; }
.tile-xr { grid-area: xr; }
.tile-imed { grid-area: imed; }
.tile-humanities { grid-area: huma; }

.tile-cluster { gap: var(--space-xs); }

.tile-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--caption);
  font-weight: 300;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 2px;
  flex-shrink: 0;
}

/* Stat hero inside a cluster tile */
.tile-stat-hero {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: var(--display-md);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-display);
}

.tile-stat-unit {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.tile-projects {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  /* Graceful fade instead of hard clip */
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

.project {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 0;
  border-top: 1px solid var(--border);
}
.project:first-child { border-top: none; }

.project-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-tags {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--text-disabled);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- PROGRESS BARS --- */
.progress-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: 3px;
}

.progress-bar__fill {
  height: 3px;
  background: var(--text-secondary);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
  transition: width 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Container for the bar track */
.progress-bar::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
}

/* Wrap progress-bar to contain the track */
.progress-bar {
  position: relative;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: visible;
  display: flex;
  align-items: center;
}

.progress-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.progress-bar__fill--success { background: var(--success); }
.progress-bar__fill--warning { background: var(--warning); }
.progress-bar__fill--active { background: var(--interactive); }

.progress-bar__label {
  position: absolute;
  right: 0;
  top: -1px;
  transform: translateY(-100%);
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 2px;
}

/* ============================================================
   TILE: TRANSFORMER CONFERENCE (special accent tile)
   ============================================================ */
.tile-transformer {
  grid-area: trans;
  position: relative;
  cursor: pointer;
  border-color: var(--border-visible);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.tile-transformer:hover {
  border-color: var(--text-secondary);
  background: var(--surface-raised);
}

.tile-transformer__dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--text-disabled) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.06;
  pointer-events: none;
}

.tile-transformer__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tile-transformer__name {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: var(--display-md);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-display);
  margin: var(--space-sm) 0 var(--space-xs);
}

.tile-transformer__sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--caption);
  color: var(--text-secondary);
  line-height: 1.4;
}

.tile-transformer__cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  font-family: 'Space Mono', monospace;
  font-size: var(--label);
  letter-spacing: 0.06em;
  color: var(--interactive);
  text-transform: uppercase;
}

.tile-transformer__arrow {
  font-size: var(--subheading);
  transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tile-transformer:hover .tile-transformer__arrow {
  transform: translateX(4px);
}

/* ============================================================
   TILE: STATS
   ============================================================ */
.tile-stats {
  grid-area: stats;
}

.stats-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
  min-height: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

.stat-value {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: var(--heading);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-display);
}

.stat-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ============================================================
   TILE: FACULTY NETWORK (clickable)
   ============================================================ */
.tile-faculty {
  grid-area: facul;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  justify-content: space-between;
}

.tile-faculty:hover {
  border-color: var(--text-secondary);
}

.tile-faculty__hero {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: var(--display-lg);
  font-weight: 700;
  line-height: 1.0;
  color: var(--text-display);
  margin: var(--space-xs) 0;
}

.tile-faculty__bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
  margin: var(--space-sm) 0 var(--space-xs);
}

.faculty-seg {
  background: var(--text-primary);
  border-radius: 2px;
  min-width: 4px;
}
.faculty-seg--alt1 { background: var(--text-secondary); }
.faculty-seg--alt2 { background: var(--text-disabled); }
.faculty-seg--alt3 { background: var(--border-visible); }
.faculty-seg--alt4 { background: var(--border-visible); opacity: 0.7; }
.faculty-seg--alt5 { background: var(--border); }

.tile-faculty__legend {
  display: flex;
  gap: var(--space-sm);
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--text-disabled);
  text-transform: uppercase;
  flex-wrap: wrap;
}

.tile-faculty__legend span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tile-faculty__legend span::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tile-faculty__legend span:nth-child(1)::before { background: var(--text-primary); }
.tile-faculty__legend span:nth-child(2)::before { background: var(--text-secondary); }
.tile-faculty__legend span:nth-child(3)::before { background: var(--text-disabled); }
.tile-faculty__legend span:nth-child(4)::before { background: var(--border-visible); }
.tile-faculty__legend span:nth-child(5)::before { background: var(--border); }

.tile-faculty__cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: 'Space Mono', monospace;
  font-size: var(--label);
  letter-spacing: 0.06em;
  color: var(--interactive);
  text-transform: uppercase;
  margin-top: auto;
}

.tile-faculty__arrow {
  font-size: var(--subheading);
  transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tile-faculty:hover .tile-faculty__arrow {
  transform: translateX(4px);
}

/* ============================================================
   TILE: CIM WORLD
   ============================================================ */
.tile-world {
  grid-area: world;
  position: relative;
  cursor: pointer;
  border-color: var(--accent);
  overflow: hidden;
}

.tile-world:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.tile-world__dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--text-disabled) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.06;
  pointer-events: none;
}

.tile-world__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tile-world__name {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-display);
  margin: var(--space-sm) 0 var(--space-xs);
}

.tile-world__sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--caption);
  color: var(--text-secondary);
  line-height: 1.4;
}

.tile-world__cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  font-family: 'Space Mono', monospace;
  font-size: var(--label);
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
}

.tile-world__arrow {
  font-size: var(--subheading);
  transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tile-world:hover .tile-world__arrow { transform: translateX(4px); }

/* ============================================================
   TILE: PARTNERS
   ============================================================ */
.tile-partners {
  grid-area: part;
}

.partners-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-content: start;
  flex: 1;
  min-height: 0;
}

.partners-list span {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-disabled);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
   TILE: CONTACT
   ============================================================ */
.tile-contact {
  grid-area: cont;
  justify-content: space-between;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-email {
  font-family: 'Space Mono', monospace;
  font-size: var(--body-sm);
  color: var(--interactive);
  transition: color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.contact-email:hover { color: var(--text-display); }

.contact-social {
  font-family: 'Space Mono', monospace;
  font-size: var(--caption);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
  transition: color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.contact-social:hover { color: var(--text-display); }

.contact-address {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--caption);
  line-height: 1.5;
  color: var(--text-disabled);
  margin-top: var(--space-xs);
}

/* Button: Primary (pill, inverted) */
.btn-primary {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  background: var(--text-display);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  text-decoration: none;
  flex-shrink: 0;
}
.btn-primary:hover { opacity: 0.85; }

/* --- FOOTER --- */
.site-footer {
  height: var(--footer-height);
  flex-shrink: 0;
  padding: 0 var(--grid-padding);
  display: flex;
  align-items: center;
}

.footer-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.footer-clusters,
.footer-copy,
.footer-links a {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-disabled);
  text-transform: uppercase;
}

.footer-links a {
  color: var(--text-secondary);
  transition: color 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.footer-links a:hover { color: var(--text-display); }

/* ============================================================
   RESPONSIVE: TABLET
   ============================================================ */
@media (min-width: 769px) and (max-width: 1200px) {
  .bento-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "hero   hero   hero   event  event  event"
      "games  games  games  games  games  games"
      "gstu   gstu   gstu   twin   twin   twin"
      "xr     xr     xr     trans  trans  trans"
      "stats  stats  stats  facul  facul  facul"
      "imed   imed   imed   huma   huma   huma"
      "world  world  world  cont   cont   cont"
      "part   part   part   part   part   part";
  }

  body {
    height: auto;
    overflow: auto;
  }

  .tile { padding: var(--space-lg); }

  .tile-projects {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ============================================================
   RESPONSIVE: MOBILE
   ============================================================ */
@media (max-width: 768px) {
  body {
    height: auto;
    overflow: auto;
  }

  .bento-grid {
    display: flex;
    flex-direction: column;
    gap: var(--tile-gap);
    padding: var(--grid-padding);
    padding-bottom: var(--tile-gap);
  }

  .tile {
    min-height: auto;
    padding: var(--space-md);
  }

  .tile-hero {
    padding: var(--space-2xl) var(--space-md);
  }


  .tile-projects {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
  }

  .games-showcase {
    flex-direction: column;
  }

  .tile-projects { overflow: visible; }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
  }

  .partners-list { overflow: visible; }

  .footer-inner {
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    text-align: center;
  }

  .site-footer {
    height: auto;
    padding: var(--space-sm) var(--grid-padding);
  }
}

/* --- FOCUS STYLES --- */
.tile:focus-visible,
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}