body {
    text-align: left;
    align-items: center;
    justify-content: center;
    font-size:x-large;
    color: #322d29;
    background-color: #efe9e1;
    padding-left: 20%;
    padding-right: 20%;
    font-family:monospace;
    
}

a {
    color:#72383d;
}

h2 {
    text-align: center;
}

h1 {
    text-align: center;
}

.image {
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 10px;
}

hr {
    color:#72383d;
    height: 3px;
}

.site-header {
    background-color: #72383d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align:center;
    padding-left: 0;
    padding-right: 0;
    color: #efe9e1;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.5rem;
}

.nav-links a {
    color: #efe9e1;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

/* Hover and active states for global navbar links */
.nav-links a:hover, 
.nav-links a.active-page {
    color: #322d29;
    background-color: #efe9e1;
}

:root{
  --bg:#efe9e1;
  --text:#322d29;
  --line:#d6cec3;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
}

.wrap{ max-width:820px; margin:0 auto; padding:64px 24px 100px; }

/* ---------- Header ---------- */
header h1{ margin:0 0 8px; }
header p{ margin:0 0 40px; }

/* ---------- Project sections (rules, not boxes) ---------- */
#list{
  border-top:1px solid var(--line);
}

.project{
  border-bottom:1px solid var(--line);
  background:none;
}

/* ---------- Collapsed teaser (the clickable header) ---------- */
.head{
  width:100%;
  display:flex;
  align-items:center;
  text-align: center;
  gap:16px;
  padding:20px 0;
  background:none;
  border:0;
  cursor:pointer;

  /* lets your theme's type through instead of the browser's button default */
  font:inherit;
  color:inherit;
  text-align:left;
}
.head:focus-visible{ outline:2px solid var(--text); outline-offset:-2px; }

.head-text{ flex:1; min-width:0; }

.head h2{ margin:0; }
.head .teaser{ margin:4px 0 0; }
.head .year{ white-space:nowrap; margin-top:3px; }

.caret{
  flex:none;
  margin-top:4px;
  transition:transform .25s ease;
}
.project.open .caret{ transform:rotate(90deg); }

/* ---------- Expanding article ---------- */
.body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.project.open .body{ grid-template-rows:1fr; }

.body-inner{ overflow:hidden; }

.article{ padding:0 0 28px; }

.article h3{ margin:24px 0 8px; }
.article > h3:first-child{ margin-top:4px; }
.article p{ margin:0 0 12px; }
.article ul{ margin:0 0 12px; padding-left:20px; }
.article li{ margin-bottom:6px; }

/* ---------- Images ---------- */
.shot{
  width:100%;
  display:block;
  margin:16px 0 4px;
}

/* ---------- Link buttons ---------- */
.links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }

.btn{
  text-decoration:none;
  padding:9px 16px;
  color:inherit;
  border:1px solid var(--line);
}
.btn.primary{ border-color:var(--text); }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .wrap{ padding:40px 18px 70px; }
  .head{ padding:17px 0; }
}