/* ===== Old-school layout + early-print tone (restrained medieval) ===== */

:root{
  --paper: #f6f1e8;
  --paper2: #efe7d8;
  --ink: #111;
  --muted: #2f2f2f;
  --accent: #1f3d2b;       /* dark green */
  --line: rgba(0,0,0,0.28);
  --line2: rgba(0,0,0,0.18);
}

body{
  margin:0;
  background: var(--paper2);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-size:18px;
  line-height:1.72;
}

a{ color: var(--accent); text-decoration: underline; }
a:hover{ opacity: 0.85; }

.wrap{
  width:900px;
  margin:18px auto;
  background: var(--paper);
  border:1px solid var(--line);
}

/* Header */
.hdr{
  padding:16px 16px;
  background: linear-gradient(to bottom, #f3eddc, #efe7d8);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.hdr-left{
  min-width:0;
}

.hdr h1{
  margin:0;
  font-family: "UnifrakturCook", serif; /* title-page feel */
  font-size:30px;
  letter-spacing:0.02em;
  line-height:1.05;
}

.hdr .tag{
  margin-top:6px;
  font-size:14px;
  color: var(--muted);
  font-style: italic;
}

/* Small “printer’s device” / seal */
.seal{
  width:88px;
  height:88px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  background: var(--paper);
  object-fit: cover;
  display:block;
}

/* Table layout = authentic old web */
.main{
  width:100%;
  border-collapse:collapse;
}

.nav{
  width:220px;
  vertical-align:top;
  background:#f4efdf;
  border-right:1px solid rgba(0,0,0,0.15);
  padding:12px;
}

.nav .title{
  font-weight:600;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#2a2a2a;
  margin-bottom:10px;
}

.nav ul{ margin:0; padding-left:16px; }
.nav li{ margin:8px 0; }

.box{
  border:1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.5);
  padding:10px 12px;
  margin:12px 0;
  font-size:14px;
  color:#2a2a2a;
}

.content{
  vertical-align:top;
  padding:14px 16px;
}

.lede{
  margin:0 0 12px 0;
  font-size:18px;
}

.hr{
  height:1px;
  background: rgba(0,0,0,0.14);
  margin:12px 0;
  clear:both;
}

/* Footer */
.ftr{
  padding:10px 12px;
  background: linear-gradient(to bottom, #efe7d8, #e9dfcc);
  border-top:1px solid var(--line);
  font-size:13px;
  color:#2a2a2a;
  text-align:center;
}

.email{
  font-family:"Courier New", Courier, monospace;
  font-size:15px;
}

/* Mobile fallback */
@media (max-width: 940px){
  .wrap{ width:auto; margin:0; border-left:0; border-right:0; }
}

@media (max-width: 720px){
  .hdr{
    flex-direction:column;
    align-items:flex-start;
  }

  .seal{
    width:78px;
    height:78px;
  }

  .nav{
    display:block;
    width:auto;
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,0.15);
  }

  .content{ display:block; }
  
  /* Footnotes: hanging indent */
.footnote{
  margin: 0 0 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.footnote-num{
  min-width: 1.4em; /* keeps “1” aligned */
  text-align: right;
}

.footnote-text{
  flex: 1 1 auto;
}
}