:root{
  --ink:#0B0B0C;
  --paper:#F4F1EA;
  --paper2:#EFE9DD;
  --gold:#8C7A3E;
  --muted:#5E5E5E;
  --hair:rgba(140,122,62,.55);
  --shadow:rgba(0,0,0,.14);
  --max: 980px;
  --gutter: 72px;
  --noteW: 170px;
  --radius: 14px;
}

html,body{height:100%;}
body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg,var(--paper),var(--paper2));
  font-family:"Source Serif 4", serif;
  overflow-x:hidden;
}

/* Sticky header/footer */
.sticky-header,
.sticky-footer{
  position: sticky;
  left:0;
  right:0;
  z-index:10;
  backdrop-filter: blur(6px);
  background: rgba(244,241,234,.85);
}

.sticky-header{ top:0; border-bottom:1px solid rgba(140,122,62,.2); }
.sticky-footer{ bottom:0; border-top:1px solid rgba(140,122,62,.2); }

.header-inner,
.footer-inner{
  max-width: var(--max);
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  justify-content:space-between;
  font-family:"Cormorant Garamond", serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
}

.wrap{
  min-height:100%;
  display:flex;
  justify-content:center;
  padding:96px 18px 120px;
}

.page{
  width:min(var(--max),100%);
  position:relative;
  border-radius:var(--radius);
  border:1px solid rgba(140,122,62,.2);
  box-shadow:0 26px 70px var(--shadow);
  background:rgba(255,255,255,.2);
  overflow:hidden;
}

/* Paper corner curl */
.page::before{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:120px;
  height:120px;
  background:linear-gradient(135deg, rgba(0,0,0,.12), rgba(255,255,255,.4));
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  opacity:.25;
}

/* Page turn */
.page.turn::after{
  content:"";
  position:absolute;
  top:0;
  right:-40%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(0,0,0,.15));
  animation:pageturn 1.2s ease-in-out;
}

@keyframes pageturn{
  0%{transform:translateX(10%) skewX(-6deg);opacity:.5;}
  100%{transform:translateX(-60%) skewX(-10deg);opacity:0;}
}

.page-inner{
  padding:64px var(--gutter);
  position:relative;
}

.title{
  text-align:center;
  font-family:"Cormorant Garamond", serif;
  font-size:52px;
  letter-spacing:.28em;
}

.subtitle{
  text-align:center;
  font-style:italic;
}

.section-head{
  text-align:center;
  font-family:"Cormorant Garamond", serif;
  letter-spacing:.22em;
  margin:40px 0 20px;
}

.para{
  font-size:18px;
  line-height:1.9;
  text-align:justify;
}

.para.dropcap::first-letter{
  float:left;
  font-family:"Cormorant Garamond", serif;
  font-size:78px;
  padding-right:10px;
}

.margin-note{
  position:absolute;
  width:var(--noteW);
  font-size:12px;
  line-height:1.6;
}

.margin-left{ left:-200px; }
.margin-right{ right:-200px; }

/* FOOTNOTES (mobile) */
.footnotes{
  display:none;
  margin-top:40px;
  font-size:13px;
  border-top:1px solid rgba(140,122,62,.3);
  padding-top:15px;
}

.footnotes div{
  margin-bottom:10px;
}

/* Responsive */
@media(max-width:1100px){
  .margin-note{display:none;}
  .footnotes{display:block;}
  :root{ --gutter:24px; }
  .title{font-size:38px;}
}