:root {
  /* Map background */
  --bg-img: url("/websitemap.jpg"); /* make sure the filename matches exactly */

  /* Beige travel/paper palette */
  --bg-fallback: #e9dfc6;           /* shows if image fails to load */
  --overlay: rgba(233, 223, 198, 0.72); /* beige wash over the map for readability */

  --card: rgba(252, 245, 226, 0.88); /* beige “paper” boxes */
  --border: rgba(120, 90, 50, 0.35);
  --text: #2b2418;
  --link: #0b4a6f;
}

* { 
  box-sizing: border-box; 
}

body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);

  /* Fallback color if the image can’t load */
  background-color: var(--bg-fallback);

  /* Layer a translucent beige gradient on top of the map image */
  background-image:
    linear-gradient(var(--overlay), var(--overlay)),
    var(--bg-img);

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* Optional: “stationary map” effect while you scroll */
  background-attachment: fixed;
}

a { 
  color: var(--link); 
}

a:hover { 
  text-decoration-thickness: 2px; 
}

.page {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px 28px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 14px 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.10);
}

.site-header h1 {
  margin: 0 0 8px;
  font-size: 1.6rem;
}

.layout {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.7fr 1fr; /* left wider, like your example */
  gap: 16px;
  align-items: start;
}

.journal h2,
.sidebar h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: lowercase;
}

.entry {
  margin: 12px 0 16px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,.25);
}
.entry:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.entry h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.photo {
  display: block;
  margin-top: 10px;
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(0,0,0,.25);
}

.deadlines, .links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.deadlines li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.15);
}

.deadlines li:last-child { 
  border-bottom: 0; 
}

.date {
  display: inline-block;
  min-width: 4.5em;
  font-weight: 600;
}

.bottom-links {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  display: inline-block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  text-decoration: none;
}
.pill:hover {
  background: rgba(255,255,255,.75);
}

/* Mobile: stack sidebar under journal */
@media (max-width: 760px) {
  .layout { 
    grid-template-columns: 1fr; 
  }
}