* {
    box-sizing: border-box;
}

body {
    text-align: left;
    color: #322d29;
    background-color: #efe9e1;
    font-family: monospace;
    font-size: clamp(1rem, 1.8vw + 0.4rem, 1.25rem);
    padding-left: 20%;
    padding-right: 20%;
    margin: 0;
}

.site-header {
    background-color: #72383d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    color: #efe9e1;
    position: relative;
}

.nav-system {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.nav-links li:first-child {
    margin-right: auto;
}

.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;
    white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active-page {
    color: #322d29;
    background-color: #efe9e1;
}

/* Hamburger button - hidden by default (desktop) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 20;
}

.nav-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #efe9e1;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hamburger turns into an X when open */
.nav-toggle.open span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* ---------- TABLET ---------- */
@media (max-width: 900px) {
    body {
        padding-left: 10%;
        padding-right: 10%;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 640px) {
    body {
        padding-left: 5%;
        padding-right: 5%;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: #72383d;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        
    }

    .nav-links.open {
        max-height: 400px;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li:first-child {
        margin-right: 0;
    }

    .nav-links a {
        display: block;
        padding: 0.9rem 1.5rem;
        border-radius: 0;
    }
}

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;
    border:#72383d 3px solid;
}





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




footer {
  text-align: center;
  background-color:#72383d;
  color:#efe9e1;
  padding-top:15px;
  padding-bottom:25px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 20px;
}

footer a {
  color:#efe9e1;
  transition: background 0.2s, color 0.2s;
}

footer a:hover {
  color:#322d29;
  background-color:#efe9e1;
  text-decoration:none;
  border-radius: 4px;
}

.achievements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.achievements ul {
  list-style-type: disc;
  padding-left: 20px;
  grid-column: span 1;
}

.achievements img {
  width: 50%;
  height: auto;
  border-radius: 10px;
  border:#72383d 3px solid;
  grid-column: span 1;
}

: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; }
}