/* ────────────── FONTS ────────────── */

@font-face {
  font-family: "CommitMono";
  src: local("CommitMono Regular"), local("CommitMono");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "CommitMono";
  src: local("CommitMono Italic");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "CommitMono";
  src: local("CommitMono Bold");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "CommitMono";
  src: local("CommitMono Bold Italic");
  font-weight: 700;
  font-style: italic;
}

/* ────────────── THEME VARIABLES ────────────── */

:root,
[data-theme="dark"] {
  --bg: #111111;
  --text: rgba(255, 255, 255, 0.92);
  --text-heading: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.55);
  --hr: rgba(255, 255, 255, 0.15);
  --accent: #ffc600;
  --accent-blue: #4488ff;
  --placeholder-bg: #1e1e1e;
  --placeholder-text: rgba(255, 255, 255, 0.35);
  --toggle-bg: transparent;
  --toggle-border: rgba(255, 255, 255, 0.25);
  --toggle-hover-border: rgba(255, 255, 255, 0.5);
  --toggle-color: rgba(255, 255, 255, 0.6);
  --clock-color: rgba(255, 255, 255, 0.45);
  --project-page-bg: transparent;
}

[data-theme="light"] {
  --bg: #f5f5f0;
  --text: rgba(0, 0, 0, 0.88);
  --text-heading: #000000;
  --text-muted: rgba(0, 0, 0, 0.5);
  --hr: rgba(0, 0, 0, 0.12);
  --accent: #0055cc;
  --accent-blue: #0033ff;
  --placeholder-bg: #e0ddd5;
  --placeholder-text: rgba(0, 0, 0, 0.3);
  --toggle-bg: transparent;
  --toggle-border: rgba(0, 0, 0, 0.2);
  --toggle-hover-border: rgba(0, 0, 0, 0.45);
  --toggle-color: rgba(0, 0, 0, 0.55);
  --clock-color: rgba(0, 0, 0, 0.4);
  --project-page-bg: #ecece5;
}

/* ────────────── RESET ────────────── */

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

html {
  font-size: 11px;
}

body {
  font-family: "CommitMono", "IBM Plex Mono", "Courier New", monospace;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  opacity: 0.7;
}

hr {
  border: 0;
  height: 1px;
  background: var(--hr);
  margin: 0.5em 0;
  transition: background 0.3s;
}

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

/* ────────────── LAYOUT ────────────── */

.layout {
  display: flex;
  min-height: 100vh;
  padding: 15px 30px 30px 15px;
  gap: 2rem;
}

/* ────────────── PROJECTS (left side, 70%) ────────────── */

.projects {
  flex: 1;
  max-width: 70%;
}

.project {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 2rem;
  padding: 1rem 0;
}

.project-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.project-media video,
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-media img {
  object-fit: contain;
}

.placeholder-img,
.placeholder-vid {
  width: 100%;
  height: 100%;
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 2px;
  transition: background 0.3s, color 0.3s;
}

.project-title {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 1em;
  color: var(--text-heading);
}

.project-title a {
  text-decoration: underline;
}

.project-desc {
  line-height: 1.35;
}

.project-tag {
  font-size: 1.2rem;
  line-height: 1.25;
}

.project-tag p {
  line-height: 1.35;
}

/* ────────────── SIDEBAR (right side, 30%) ────────────── */

.sidebar {
  position: sticky;
  top: 30px;
  align-self: flex-start;
  flex: 0 0 30%;
  max-width: 30%;
  padding-left: 1rem;
}

.name {
  display: block;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 2.1rem;
  line-height: 0.65;
  letter-spacing: -0.047em;
  color: var(--text);
  text-decoration: underline;
  margin-bottom: 1.5rem;
}

.name:hover {
  opacity: 0.7;
}

.bio {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.35;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.link {
  color: var(--text);
  text-decoration: underline;
}

/* ────────────── CLOCK FOOTER ────────────── */

.clock {
  position: fixed;
  bottom: 30px;
  right: 30px;
  color: var(--clock-color);
  font-size: 1.1rem;
  z-index: 10;
  transition: color 0.3s;
}

/* ────────────── THEME TOGGLE ────────────── */

#theme-toggle {
  position: fixed;
  bottom: 52px;
  right: 30px;
  z-index: 10;
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  color: var(--toggle-color);
  font-family: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.6rem 1.2rem;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  transition: border-color 0.2s, color 0.3s, background 0.3s;
}

#theme-toggle:hover {
  border-color: var(--toggle-hover-border);
  color: var(--text);
}

/* ────────────── POPUP OVERLAYS ────────────── */

.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.popup-overlay.active {
  display: flex;
  pointer-events: auto;
}

.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: relative;
  background: var(--project-page-bg);
  padding: 2rem;
  border-radius: 2px;
  box-shadow: 0.4rem 0.4rem 2.17rem 0rem rgba(0, 0, 0, 0.15);
  max-width: 48%;
  width: auto;
  transition: background 0.3s;
}

.popup-glyph-content {
  background: #cfe1ff;
  text-align: center;
  padding: 3rem 2rem;
  border: 0.1rem solid rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.75);
  font-size: 1.4rem;
  line-height: 1.5;
}

.popup-email-content {
  max-width: 36%;
}

.popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  line-height: 1;
}

.popup-close:hover {
  color: var(--text);
}

.contact-form-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.contact-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.contact-field label {
  font-size: 1.2rem;
  color: var(--text);
  white-space: nowrap;
  padding-top: 0.3rem;
}

.contact-field input,
.contact-field textarea {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 1.2rem;
  resize: vertical;
  outline: none;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--text-muted);
}

.contact-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.contact-cancel,
.contact-send {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-send {
  color: var(--accent-blue);
}

.contact-cancel:hover {
  color: var(--text);
}

.contact-send:hover {
  opacity: 0.7;
}

/* ────────────── RESPONSIVE ────────────── */

@media (max-width: 900px) {
  .layout {
    flex-direction: column-reverse;
    padding: 15px;
  }

  .sidebar {
    position: static;
    flex: none;
    max-width: 100%;
    padding-left: 0;
    margin-bottom: 2rem;
  }

  .projects {
    max-width: 100%;
  }

  .project {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-media {
    aspect-ratio: 16 / 9;
  }
}

/* ────────────── AMBIENT OVERLAYS ────────────── */

#sun-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1);
}
body.sunny #sun-overlay { opacity: 0.18; }

#night-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.23, 1, 0.32, 1);
}
body.night #night-overlay { opacity: 0.15; }

/* ==============================================
   PROJECT PAGE STYLES
   ============================================== */

.project-page-layout {
  display: flex;
  min-height: 100vh;
  padding: 30px;
  gap: 2rem;
}

.project-page-main {
  flex: 1;
  max-width: 70%;
}

.project-page-content {
  background: var(--project-page-bg);
  padding: 2rem;
  border-radius: 2px;
  transition: background 0.3s;
}

.project-page-back {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--text-muted);
  text-decoration: underline;
  font-size: 1.2rem;
}

.project-page-back:hover {
  opacity: 0.7;
}

.project-page-title {
  font-size: 2.2rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: var(--text-heading);
  line-height: 1.3;
}

.project-page-body {
  font-size: 1.2rem;
  line-height: 1.35;
}

.project-page-body p {
  margin-bottom: 1em;
}

.project-page-body a {
  color: var(--accent-blue);
}

.project-page-body img,
.project-page-body video {
  width: 100%;
  margin: 1.5rem 0;
  border-radius: 2px;
}

.project-page-body .media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.project-page-body .media-row.single {
  grid-template-columns: 1fr;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.project-page-body figcaption {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-top: 0.3em;
  margin-bottom: 1.5rem;
}

.project-page-body .media-row figcaption {
  margin-bottom: 0;
}