:root {
  color-scheme: light dark;

  /* Palette — eggshell white, near-neutral */
  --bg: #f0eeea;
  --bg-gradient: linear-gradient(160deg, #f5f4f1 0%, #e9e7e2 100%);
  --surface: #f9f8f6;
  --surface-raised: #f9f8f6;
  --surface-hover: #fefefe;
  --interactive-hover: #d0cdc6;
  --text: #181714;
  --text-secondary: #5e5b57;
  --text-muted: #9e9b96;
  --accent: #5a5040;
  --border: rgba(30, 28, 24, 0.11);
  --border-hover: rgba(30, 28, 24, 0.20);
  --card-highlight: rgba(255, 255, 255, 0.55);
  --thumb-bg: linear-gradient(145deg, #e5e2dc 0%, #dbd8d1 60%, #d2cfc8 100%);
  --thumb-vignette: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 30%, rgba(0,0,0,0.05) 100%);
  --thumb-fiber: rgba(255, 255, 255, 0.025);
  --grain-opacity: 0.028;
  --grain-blend: multiply;
  /* Deeper, more abstract shadows */
  --shadow-card: 0 2px 4px rgba(20, 18, 14, 0.12), 0 8px 28px rgba(20, 18, 14, 0.11);
  --shadow-card-hover: 0 6px 14px rgba(20, 18, 14, 0.16), 0 20px 52px rgba(20, 18, 14, 0.15);
  --shadow-header: 0 2px 6px rgba(20, 18, 14, 0.12), 0 6px 22px rgba(20, 18, 14, 0.10);

  /* Typography — Apple system stack */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141312;
    --bg-gradient: linear-gradient(160deg, #1a1917 0%, #0f0e0d 100%);
    --surface: #1e1d1b;
    --surface-raised: #242321;
    --surface-hover: #2a2927;
    --interactive-hover: #353432;
    --text: #f0eeea;
    --text-secondary: #a8a5a0;
    --text-muted: #6e6b66;
    --accent: #c4b8a4;
    --border: rgba(240, 238, 234, 0.10);
    --border-hover: rgba(240, 238, 234, 0.18);
    --card-highlight: rgba(255, 255, 255, 0.06);
    --thumb-bg: linear-gradient(145deg, #2a2927 0%, #222120 60%, #1a1918 100%);
    --thumb-vignette: linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, transparent 30%, rgba(0,0,0,0.25) 100%);
    --thumb-fiber: rgba(255, 255, 255, 0.015);
    --grain-opacity: 0.045;
    --grain-blend: soft-light;
    --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 28px rgba(0, 0, 0, 0.30);
    --shadow-card-hover: 0 6px 14px rgba(0, 0, 0, 0.45), 0 20px 52px rgba(0, 0, 0, 0.40);
    --shadow-header: 0 2px 6px rgba(0, 0, 0, 0.40), 0 6px 22px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg: #141312;
  --bg-gradient: linear-gradient(160deg, #1a1917 0%, #0f0e0d 100%);
  --surface: #1e1d1b;
  --surface-raised: #242321;
  --surface-hover: #2a2927;
  --interactive-hover: #353432;
  --text: #f0eeea;
  --text-secondary: #a8a5a0;
  --text-muted: #6e6b66;
  --accent: #c4b8a4;
  --border: rgba(240, 238, 234, 0.10);
  --border-hover: rgba(240, 238, 234, 0.18);
  --card-highlight: rgba(255, 255, 255, 0.06);
  --thumb-bg: linear-gradient(145deg, #2a2927 0%, #222120 60%, #1a1918 100%);
  --thumb-vignette: linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, transparent 30%, rgba(0,0,0,0.25) 100%);
  --thumb-fiber: rgba(255, 255, 255, 0.015);
  --grain-opacity: 0.045;
  --grain-blend: soft-light;
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 28px rgba(0, 0, 0, 0.30);
  --shadow-card-hover: 0 6px 14px rgba(0, 0, 0, 0.45), 0 20px 52px rgba(0, 0, 0, 0.40);
  --shadow-header: 0 2px 6px rgba(0, 0, 0, 0.40), 0 6px 22px rgba(0, 0, 0, 0.35);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Paper grain overlay — sits on top of everything, non-interactive */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  /* SVG feTurbulence noise encoded as data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}

/* ── Header — solid card-stock pill ── */
header {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: 860px;
  padding: 0.25rem;
  display: flex;
  justify-content: center;
  z-index: 1000;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 980px;
  box-shadow: var(--shadow-header);
  overflow: hidden;
}

.header-side {
  flex: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.35rem;
  text-decoration: none;
  transition: background 0.18s ease;
  position: relative;
  color: var(--text);
}

button.header-side {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
}

.header-side:first-child {
  border-radius: 980px 0 0 980px;
}

.header-side:last-child {
  border-radius: 0 980px 980px 0;
}

.header-side.center {
  border-radius: 0;
}

.header-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: lowercase;
  letter-spacing: 0.08em;
}

.header-side svg {
  fill: currentColor;
  transition: filter 0.18s ease;
}

.header-side:hover {
  background: var(--interactive-hover);
}

:root[data-theme="light"] .header-side:hover svg {
  filter: brightness(0.95) invert(1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .header-side:hover svg {
    filter: brightness(0.95) invert(1);
  }
}

/* ── Theme toggle ── */
.theme-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow-header);
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s ease;
}

.theme-toggle:hover {
  background: var(--interactive-hover);
}

.theme-toggle svg {
  display: block;
}

.theme-icon-moon {
  fill: currentColor;
}

.theme-icon-sun {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.theme-icon[hidden] {
  display: none;
}

/* ── Main content ── */
main {
  width: 100%;
  max-width: 1100px;
  padding: 8rem 2rem 6rem;
}

/* ── Section label ── */
.label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#projects .label {
  margin-bottom: 1.75rem;
  text-align: center;
  font-size: 0.85rem;
}

/* ── Card grid ── */
#project-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.75rem;
}

.project-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1.75rem;
  min-width: 0;
}

/* ── Individual card — matte paper stock ── */
#project-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  /* Inner highlight: simulates light catching the top edge of the paper */
  outline: 1px solid var(--card-highlight);
  outline-offset: -1px;
  transition:
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease;
  cursor: pointer;
}

#project-list li:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px) rotate(0.3deg);
}

#project-list li:active {
  box-shadow: var(--shadow-card);
  transform: translateY(0);
  transition-duration: 0.08s;
}

/* ── 4:3 thumbnail ── */
.card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Cardboard / manila folder feel */
  background: var(--thumb-bg);
  flex-shrink: 0;
  position: relative;
}

.card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Vignette + horizontal fiber-like banding */
  background:
    var(--thumb-vignette),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      var(--thumb-fiber) 3px,
      var(--thumb-fiber) 4px
    );
  pointer-events: none;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}



/* ── Card body ── */
.card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  align-items: center;
  text-align: center;
}

.card-body a {
  font-family: var(--font);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color 0.18s ease;
  line-height: 1.3;
}

.card-body a:hover {
  color: var(--accent);
}

.repo-desc {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 0.25rem;
}

/* ── Peek drawer ── */
.card-peek {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

#project-list li:hover .card-peek {
  max-height: 8rem;
}

.card-peek-text {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 0 1.5rem 1.5rem;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.2s ease 0.1s,
    transform 0.2s ease 0.1s;
}

#project-list li:hover .card-peek-text {
  opacity: 1;
  transform: translateY(0);
}

/* ── Graffiti wall landing page (desktop) ── */
body.wall-page {
  display: block;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background: #181714 url('assets/images/graffiti-background.jpg') center / cover no-repeat;
}

body.wall-page::before {
  display: none;
}

body.wall-page.bg-alt {
  background-image: url('assets/images/graffiti-background2.jpg');
}

.wall-bg {
  display: none;
}

#wall-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  cursor: default;
  touch-action: none;
  pointer-events: none;
}

#wall-canvas.wall-ready {
  cursor: crosshair;
  pointer-events: auto;
}

.wall-toolbar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 980px;
  box-shadow: var(--shadow-header);
}

.wall-colors,
.wall-sizes {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wall-swatch {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.wall-swatch[data-color="#181714"] { background-color: #181714; }

:root[data-theme="dark"] .wall-swatch[data-color="#181714"] {
  background-color: #f0eeea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wall-swatch[data-color="#181714"] {
    background-color: #f0eeea;
  }
}
.wall-swatch[data-color="#c0392b"] { background-color: #c0392b; }
.wall-swatch[data-color="#2980b9"] { background-color: #2980b9; }
.wall-swatch[data-color="#27ae60"] { background-color: #27ae60; }
.wall-swatch[data-color="#f39c12"] { background-color: #f39c12; }
.wall-swatch[data-color="#8e44ad"] { background-color: #8e44ad; }

.wall-swatch:hover {
  transform: scale(1.1);
}

.wall-swatch.active {
  border-color: var(--text);
}

.wall-size {
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.wall-size:hover {
  background: var(--interactive-hover);
}

.wall-size.active {
  background: var(--text);
  color: var(--surface);
}

.wall-toolbar-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--border);
  flex-shrink: 0;
}

.wall-clear {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.65rem;
  border-radius: 980px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.wall-clear:hover {
  background: var(--interactive-hover);
  color: var(--text);
}

.wall-hint {
  position: fixed;
  bottom: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.1em;
  pointer-events: none;
  user-select: none;
}

/* Touch phones in portrait: forced landscape layout */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html:has(body.wall-page) {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  body.wall-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background-color: #181714;
    background-image: none;
  }

  body.wall-page.bg-alt {
    background-image: none;
  }

  body.wall-page .wall-stage {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg);
    transform-origin: left top;
  }

  body.wall-page .wall-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: #181714;
  }

  body.wall-page .wall-bg-img {
    position: absolute;
    display: block;
    max-width: none;
  }

  body.wall-page .wall-bg-secondary {
    opacity: 0;
  }

  body.wall-page.bg-alt .wall-bg-primary {
    opacity: 0;
  }

  body.wall-page.bg-alt .wall-bg-secondary {
    opacity: 1;
  }

  body.wall-page .theme-toggle,
  body.wall-page header,
  body.wall-page .wall-toolbar,
  body.wall-page .wall-hint {
    position: absolute;
  }

  body.wall-page #wall-canvas {
    position: absolute;
    inset: 0;
  }
}