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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background: #F6F6F6;
  color: #808080;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Fixed tree-shadow background ---- */
.background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Paper tone from the photo's field, so tall viewports don't cut to flat white
     below the image. An SVG grain keeps the whole fill speckled like the photo. */
  background-color: #f5f4f2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 150px;
  opacity: 0; /* hidden by default; shown on pages with the .has-bg body class */
}

/* The tree photo as its own layer, so its bottom can fade into the grain field.
   The box carries the photo's aspect ratio, so the mask percentages track the
   image bottom on any viewport. */
.background::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  width: 120vw;
  aspect-ratio: 3002 / 1960;
  transform: translateX(-50%);
  background-image: url("assets/background.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 85%);
}

body.has-bg .background {
  opacity: 1;
}

/* ---- Fixed sidebar ---- */
.sidebar {
  position: fixed;
  top: 210px;
  left: 13.3vw;
  width: 160px;
}

.mark {
  display: inline-block;
  margin-bottom: 20px;
}

/* Static logo: two comma halves, no ring, softened corners */
.logo .ring {
  display: none;
}

/* Soften the shape corners with a same-color stroke + round joins */
.logo path {
  stroke: #1a1a1a;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.nav-links {
  list-style: none;
}

.nav-links li {
  margin-bottom: 8px;
}

.nav-links a {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
  text-decoration: none;
  color: #808080;
  transition: color 0.2s ease;
}

.nav-links a.active,
.nav-links a:hover {
  color: #1a1a1a;
}

.nav-divider {
  width: 62px; /* matches the width of "Contact" */
  height: 1px;
  background: #b8b8b8;
  margin: 22px 0;
}

.locked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  color: #808080;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.locked:hover {
  color: #1a1a1a;
}

.locked svg {
  transform: translateY(1px);
}

/* ---- Scrolling content ---- */
.content {
  max-width: 640px;
  margin-left: 30vw;
  margin-right: auto;
  padding: 210px 40px 160px;
}

.headline {
  font-family: "PT Serif", Georgia, serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin-bottom: 80px;
  padding-right: 90px;
}

.highlight {
  color: #002BFF;
  background-color: rgba(0, 43, 255, 0.06);
  padding: 0 0.1em;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.content p {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: #757575;
  margin-bottom: 30px;
}

.year {
  color: #a8a8a8; /* slightly lighter than the body text, just for the date anchors */
}

.rule {
  border: none;
  border-top: 1px solid #d2d2d2;
  margin: 48px 0; /* lighter than the top-of-page breathing room; collapses with the 30px paragraph margin so the larger 48px wins on both sides */
}

.contact-link {
  display: inline-block;
  margin-top: 12px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #808080;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
}

.contact-link:hover {
  color: #1a1a1a;
  text-decoration-color: #1a1a1a;
  text-underline-offset: 8px;
}

/* ---- Password gate ---- */
.gate {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gate-title {
  font-family: "PT Serif", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.gate-sub {
  font-size: 17px;
  line-height: 1.62;
  color: #757575;
  margin-bottom: 28px;
}

.gate-form {
  display: flex;
  gap: 10px;
}

.gate-input {
  flex: 1;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  color: #1a1a1a;
  padding: 12px 14px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  transition: border-color 0.2s ease;
}

.gate-input:focus {
  outline: none;
  border-color: #1a1a1a;
}

.gate-button {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #f6f6f6;
  background: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.gate-button:hover {
  opacity: 0.85;
}

.gate-error {
  margin-top: 16px;
  font-size: 15px;
  color: #b00020;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  /* Sidebar collapses to just the mark, sitting above the text */
  .sidebar {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    padding: 40px 28px 0;
  }

  /* Drop the menu entirely on mobile */
  .nav-links,
  .nav-divider {
    display: none;
  }

  .mark {
    margin-bottom: 0;
  }

  .content {
    margin-left: 0;
    padding: 24px 28px 100px;
  }

  .headline {
    font-size: 30px;
  }

  .content p {
    font-size: 17px;
  }

  .background::before {
    width: 165vw;
    top: -60px;
  }
}