/* ── Reset & base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'Oswald';
  src: url(/fonts/oswald/Oswald-Medium.woff2) format('woff2')
}

:root{
  --inner-gap: 14px;
  --outer-gap: 14px;
  --topbar-height: 110px;
  --text-padding: 8px 16px;
  --text-color: #f5f0e8;
}

/* ── Fixed background image ── */
body {
  min-height: 100vh;
  font-family: 'Oswald', sans-serif;
  letter-spacing: -0.01em;
  color: var(--text-color);
  background-image: url('pictures/IMG_2822.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ── Background dim overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 0;
  pointer-events: none;
}

/* ── Shared glass panel style ── */
.glass {
  background: rgba(150, 0, 0, 0.30);
  border: 10px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Top bar ── */
#topbar {
  position: absolute;
  top: var(--outer-gap);
  left: var(--outer-gap);
  right: var(--outer-gap);
  height: var(--topbar-height);
  z-index: 100;
  text-align: center;
  padding: 5px;
}

#topbar h1 {
  letter-spacing: 0.08em;
  font-size: 36px;
  line-height: 1.2;
}

/* ── Page body layout ── */
#layout {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  padding: calc(2*var(--inner-gap) + var(--topbar-height)) 14px 14px 14px;
  min-height: 100vh;
  align-items: flex-start;
}

/* ── Sidebar ── */
#sidebar {
  flex: 5vw;
  position: sticky;
  padding: var(--inner-gap);
  line-height: 1.8;
}

#sidebar a {
  display: block;
  color: var(--text-color);
  text-decoration: none;
  font-size: 18px;
}

#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar ul ul a {
  padding-left: 24px;
}

/* ── Projects layout ── */
#projects-layout {
  flex: 95vw;
  min-width: 0;
  padding: var(--text-padding);
}

/* ── Main content ── */
#main {
  flex: 9;
  min-width: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  line-height: 1.7;
  padding: var(--text-padding);
}

#main a {
  font-size: 36px;
  color: #0bae62;
}

/* ── Projects grid ── */
.project-grid {
  margin-top: 16px;
  grid-template-columns: repeat(4, calc(95vw/4));
  grid-template-rows: repeat(100, calc(95vw/4));
}

.project-box {
  width: calc(25% - 6px);
  display: inline-block;
  margin-bottom: 12px;
  vertical-align: top;
  padding: 16px;
  text-decoration: none;
  color: var(--text-color);
}

a:hover {
  background: rgba(49, 6, 84, 0.696);
  transition: background 0.4s;
}

/* ── Content typography ── */
.page-section { display: none; }
.page-section.active { display: block; }

h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

p {
  font-size: 20px;
  margin-bottom: 14px;
}

ul {
  list-style-type: "";
  padding-left: 14px;
}

.tagline {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.60);
  margin-bottom: 28px;
  text-align: left;
}

.btn {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 7px;
  color: #fff;
  font-size: 13.5px;
  padding: 8px 22px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.btn:hover { background: rgba(255, 255, 255, 0.28); }