:root {
  --cream:        #fdf3da;
  --ink:          #1a1612;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
   
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

 
.hp-pagenum {
  position: absolute;
  top: 26px; right: 36px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(26,22,18,0.4);
  z-index: 6;
}

 
.hp-foot {
  background: var(--ink);
  color: rgba(253,243,218,0.7);
  padding: 28px 32px;
}
.hp-foot-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hp-foot-verse {
  flex-basis: 100%;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: center;
  color: rgba(253, 243, 218, 0.45);
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid rgba(253, 243, 218, 0.12);
  line-height: 1.5;
}
.hp-foot-verse em { font-style: italic; }
.hp-foot-mark {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-transform: none;
}
@media (max-width: 720px) {
  .hp-foot-inner { flex-direction: column; align-items: flex-start; }
}

 
@media (max-width: 720px) {
  .hp-pagenum { display: none; }
}