/* =========================================================
   0) THEME TOKENS (easy changes)
   - Change these first when you want a new look
   ========================================================= */

:root {
  /* Sizing */
  --cell: 200px;
  --gap: 20px;
  --circle: 180px;
  --center: 200px;

  /* Typography */
  --font-family: serif;
  --label-size: 0.85rem;
  --label-size-mobile: 0.7rem;
  --label-tracking: 0.08em;

  /* Colors */
  --page-bg: #000000;
  --text-color: #ffffff;

  --circle-bg: #000000;
  --circle-border: #ffffff;

  /* Effects */
  --circle-border-width: 3px;
  --circle-shadow: 0 4px 10px rgba(0,0,0,0.1);

  --img-dim: 0.55;                 /* default image brightness */
  --img-hover-bright: 1;           /* hover brightness */
  --img-hover-contrast: 1.1;       /* hover contrast */

  --hover-glow: 0 0 12px rgba(255,255,255,0.25);
  --hover-shadow: 0 4px 10px rgba(0,0,0,0.3);

  /* Motion */
  --ease: 0.3s ease;
  --label-fade: 0.2s ease;
}

/* =========================================================
   1) BASE PAGE STYLES
   ========================================================= */

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--page-bg);
}

/* Optional tiled GIF background helper (apply class to body) */
.tiled-bg {
  background-attachment: fixed;
  background-image: url("assets/bg/starry.gif");
  background-position: center;
  background-repeat: repeat;
  /* background-size: 512px 512px; */
}

/* =========================================================
   2) PAGE LAYOUT
   ========================================================= */

.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
}

/* Header banner */
.page-header {
  width: 100%;
  max-width: 900px;
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
}

.header-banner {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}

.nav-wrapper {
  position: relative;
  width: max-content;
}

/* =========================================================
   3) DIAMOND GRID
   ========================================================= */

.diamond-container {
  display: grid;
  grid-template-columns: repeat(3, var(--cell));
  grid-template-rows: repeat(3, var(--cell));
  gap: var(--gap);
  align-items: center;
  justify-items: center;
}

/* Center image tile */
.center-tile {
  grid-column: 2;
  grid-row: 2;

  width: var(--center);
  height: var(--center);
  /* opacity: 15%; */

  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

.center-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Position mapping in the 3x3 grid */
.top    { grid-column: 2; grid-row: 1; }
.left   { grid-column: 1; grid-row: 2; }
.right  { grid-column: 3; grid-row: 2; }
.bottom { grid-column: 2; grid-row: 3; }

/* =========================================================
   4) NAV ITEMS (circle links)
   ========================================================= */

.nav-item {
  text-decoration: none;
  color: var(--text-color);
  position: relative;
  z-index: 1;
}

/* Circle container */
.circle {
  width: var(--circle);
  height: var(--circle);
  border-radius: 50%;
  background-color: var(--circle-bg);
  overflow: hidden;

  border: var(--circle-border-width) solid var(--circle-border);
  box-shadow: var(--circle-shadow);

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  transition: transform var(--ease), box-shadow var(--ease);
}

/* Circle image */
.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: brightness(var(--img-dim));
  transition: filter var(--ease);
}

/* Label overlay (centered inside circle) */
.nav-item span {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);

  color: var(--text-color);
  pointer-events: none;

  opacity: 1;
  transition: opacity var(--label-fade);
}

/* =========================================================
   5) INTERACTIONS (hover states)
   ========================================================= */

.nav-item:hover .circle {
  transform: scale(1.1);
  box-shadow: var(--hover-glow), var(--hover-shadow);
}

.nav-item:hover .circle img {
  filter: brightness(var(--img-hover-bright)) contrast(var(--img-hover-contrast));
}

.nav-item:hover span {
  opacity: 0;
}

/* Disable hover-only affordances on touch devices */
@media (hover: none) {
  .nav-item:hover .circle {
    transform: none;
  }
}

/* =========================================================
   6) RESPONSIVE SIZING
   ========================================================= */

/* Tablets / small laptops */
@media (max-width: 900px) {
  :root {
    --cell: 160px;
    --gap: 16px;
    --circle: 140px;
    --center: 160px;
  }
}

/* Phones */
@media (max-width: 600px) {
  :root {
    --cell: 118px;
    --gap: 12px;
    --circle: 104px;
    --center: 120px;

    --label-size: var(--label-size-mobile);
  }
}

/* Very small phones */
@media (max-width: 380px) {
  :root {
    --cell: 104px;
    --gap: 10px;
    --circle: 92px;
    --center: 92px;
  }
}