/* North Dakota memoir book reader */
.memoir-intro{max-width:850px;margin:0 auto 24px;text-align:center;color:#26352b}
.memoir-kicker{font:700 11px Georgia,serif;letter-spacing:.24em;color:#9a7427}
.memoir-intro h1{font:700 clamp(30px,5vw,48px)/1.12 Georgia,serif;color:#173b2b;margin:8px 0}
.memoir-intro p{font:17px Georgia,serif;color:#5d513e;margin:8px auto;max-width:650px}
.memoir-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1000px;margin:18px auto;color:#26352b;flex-wrap:wrap}
.memoir-progress{flex:1;min-width:180px;font:700 13px Georgia,serif}
.memoir-progress-track{height:6px;background:#ded2b7;border-radius:10px;margin-top:7px;overflow:hidden}
.memoir-progress-track span{display:block;height:100%;width:0;background:#b48a32;transition:width .35s ease}
.memoir-jump-label{font:700 13px Georgia,serif}
#memoir-jump{max-width: min(100%,360px);padding:9px 12px;border:1px solid #b8a783;border-radius:5px;background:#fffdf4;color:#26352b}
.memoir-stage{perspective:1800px;max-width:1000px;margin:12px auto 0;padding:8px}
.memoir-book{position:relative;padding:10px;border-radius:7px;background:linear-gradient(90deg,#49351e,#87643a 2%,#3d2b19 4%,#8b693c 6%,#49351e 50%,#8b693c 94%,#3d2b19 96%,#87643a 98%,#49351e);box-shadow:0 18px 35px rgba(25,20,12,.35),inset 0 0 0 2px #c5a66c}
.memoir-spread{display:grid;grid-template-columns:1fr 1fr;min-height:0;transform-origin:left center;transform-style:preserve-3d;transition:transform .55s ease,opacity .3s ease}
.memoir-spread.turn-next{transform:rotateY(-9deg);opacity:.35}
.memoir-spread.turn-prev{transform:rotateY(9deg);opacity:.35}
.memoir-page{position:relative;min-width:0;padding:25px clamp(20px,3.2vw,38px);color:#342b1d;background-color:#fbf5e5;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,rgba(133,112,77,.11) 31px,transparent 32px);box-shadow:inset 0 0 22px rgba(88,63,29,.10);font-family:Georgia,'Times New Roman',serif}
.memoir-page.left{border-right:1px solid #d4c5a6;border-radius:3px 0 0 3px}
.memoir-page.right{border-radius:0 3px 3px 0}
.memoir-page.memoir-open{grid-column:1 / -1;border-radius:3px;min-height:250px;padding:28px clamp(24px,5vw,58px) 38px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,rgba(133,112,77,.10) 30px,transparent 31px)}
.memoir-page.left:after{content:"";position:absolute;right:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,rgba(83,59,28,.12),transparent)}
.memoir-page.right:before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,rgba(83,59,28,.12),transparent)}
.memoir-page.memoir-open:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(139,113,72,.18);box-shadow:1px 0 3px rgba(83,59,28,.08)}
.memoir-page-label{font:700 10px Arial,sans-serif;letter-spacing:.18em;color:#9a7427;text-transform:uppercase}
.memoir-page h2{font:700 clamp(23px,3vw,34px)/1.12 Georgia,serif;color:#243d2a;margin:12px 0}
.memoir-date{font:italic 14px Georgia,serif;color:#806b4b;border-bottom:1px solid #d5c6a6;padding-bottom:13px;margin-bottom:18px}
.memoir-story{font:15.5px/1.72 Georgia,serif;color:#3d3529;overflow-wrap:anywhere;column-count:2;column-gap:54px;column-rule:1px solid rgba(139,113,72,.16)}
.memoir-story p{break-inside:avoid-column}
.memoir-story p{margin:0 0 1em}
.memoir-mobile-feature{display:none}.memoir-feature-photo{display:block;width:100%;max-height:210px;object-fit:contain;margin:18px auto 10px;border:7px solid #fffdf6;box-shadow:0 3px 10px #44351c35}
.memoir-photo-caption{font:italic 12px Georgia,serif;text-align:center;color:#75664c;margin:0 0 14px}
.memoir-page-number{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:12px Georgia,serif;color:#9b8a6b}
.memoir-photo-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px}
.memoir-photo-strip img{width:100%;height:105px;object-fit:cover;border:4px solid #fffdf6;box-shadow:0 2px 5px #44351c25}
.memoir-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px auto;flex-wrap:wrap}
.memoir-button{border:1px solid #8e6a28;border-radius:5px;background:#c49a32;color:#1d2d22;padding:12px 20px;font:700 14px Georgia,serif;cursor:pointer;box-shadow:0 3px 0 #76551f}
.memoir-button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.memoir-button:disabled{opacity:.42;cursor:not-allowed}
.memoir-button.secondary{background:#eee4ce}
.memoir-hint{font:italic 13px Georgia,serif;color:#75664c}
.memoir-bottom{text-align:center;margin:12px 0 4px;font:14px Georgia,serif}
.memoir-bottom a{color:#315a3a;font-weight:bold}
.memoir-empty{max-width:700px;margin:30px auto;padding:35px;text-align:center;background:#fffdf4;border:1px solid #d8ceb2;color:#26352b}
@media(max-width:700px){
 .memoir-tools{align-items:stretch}.memoir-jump-label{width:100%}#memoir-jump{width:100%;max-width:none}
 .memoir-stage{padding:3px;margin-top:8px}.memoir-book{padding:6px;background:linear-gradient(90deg,#49351e,#87643a 3%,#49351e 50%,#87643a 97%,#49351e)}
 .memoir-spread{grid-template-columns:1fr;min-height:0}
 .memoir-page.left{display:none}
 .memoir-page.right{min-height:0;border-radius:3px;padding:24px 20px 34px}
 .memoir-page.memoir-open{grid-column:1;border-radius:3px;min-height:180px;padding:22px 20px 34px}
 .memoir-page.memoir-open:before{display:none}
 .memoir-story{column-count:1;column-gap:0;column-rule:0}
 .memoir-mobile-feature{display:block;width:100%;max-height:250px;object-fit:contain;margin:16px auto;border:6px solid #fffdf6;box-shadow:0 3px 10px #44351c35}
 .memoir-story{font-size:15.5px;line-height:1.7}
 .memoir-controls{gap:10px}.memoir-hint{order:3;width:100%;text-align:center}
 .memoir-button{padding:11px 14px}
}
@media(prefers-reduced-motion:reduce){.memoir-spread,.memoir-progress-track span{transition:none}}

/* Keep each chapter title on the left-hand page, clear of the center fold. */
.memoir-page.memoir-open h2{
  width:calc(50% - 28px);
  max-width:calc(50% - 28px);
  overflow-wrap:break-word;
  hyphens:auto;
  margin-right:auto;
}
@media(max-width:700px){
  .memoir-page.memoir-open h2{
    width:100%;
    max-width:100%;
  }
}

/* Smaller post titles in the memoir book, while keeping them on one page. */
.memoir-page.memoir-open h2{
  font-size:clamp(18px,2.1vw,24px);
  line-height:1.2;
  margin:8px 0 10px;
  letter-spacing:0;
}
@media(max-width:700px){
  .memoir-page.memoir-open h2{
    font-size:21px;
    line-height:1.22;
  }
}


/* Hardcover opening cover: website crest with the memoir title beneath it */
.memoir-cover{max-width:720px;margin:28px auto 34px;padding:10px}
.memoir-cover-frame{position:relative;min-height:620px;padding:18px;border-radius:12px;background:linear-gradient(135deg,#b58a31,#f0d98b 12%,#8a641e 24%,#d5b65e 50%,#76551b 76%,#e3c66d 90%,#8c6723);box-shadow:0 18px 38px rgba(24,30,20,.32),inset 0 0 0 2px #f6e5a7}
.memoir-cover-inner{min-height:584px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 28px;border:2px solid rgba(226,194,105,.85);border-radius:5px;background:radial-gradient(ellipse at 50% 35%,#24553b 0%,#123a28 48%,#082719 100%);box-shadow:inset 0 0 0 7px rgba(202,164,71,.15),inset 0 0 45px rgba(0,0,0,.45);color:#e5c46b;position:relative}
.memoir-cover-inner:before,.memoir-cover-inner:after{content:"";position:absolute;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,#d9b75e,transparent)}
.memoir-cover-inner:before{top:18px}.memoir-cover-inner:after{bottom:18px}
.memoir-cover-logo{display:block;width:min(58%,280px);height:auto;max-height:280px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.5));margin:0 auto 18px}
.memoir-cover-rule{width:62%;height:2px;margin:0 auto 22px;background:linear-gradient(90deg,transparent,#e5c46b,transparent)}
.memoir-cover h2{margin:0;color:#e5c46b;text-transform:uppercase;font:700 clamp(27px,4vw,42px)/1.2 Georgia,'Times New Roman',serif;letter-spacing:.045em;text-shadow:0 2px 2px #071b11,0 0 12px rgba(220,183,91,.22)}
.memoir-cover h2 span{display:inline-block;margin-top:8px;font-size:.67em;letter-spacing:.08em}
.memoir-cover-ornament{margin:24px 0 28px;color:#d5b45e;font:700 11px Georgia,serif;letter-spacing:.28em}
.memoir-open-button{min-width:190px;background:linear-gradient(#e8ce7c,#bc9137);border-color:#f2dda0;color:#173323;box-shadow:0 4px 0 #71511d,0 8px 18px rgba(0,0,0,.28)}
.memoir-reading[hidden]{display:none!important}
@media(max-width:700px){
 .memoir-cover{margin:16px auto 24px;padding:5px}
 .memoir-cover-frame{min-height:500px;padding:10px}
 .memoir-cover-inner{min-height:478px;padding:28px 18px}
 .memoir-cover-logo{width:min(68%,250px);max-height:220px}
 .memoir-cover-ornament{letter-spacing:.16em}
}


/* Family dedication page: the first printed page after the hardcover. */
.memoir-dedication-page{min-height:300px}
.memoir-dedication-heading{font:700 clamp(22px,3vw,30px)/1.2 Georgia,serif;color:#243d2a;text-align:center;margin:8px 0 22px}
.memoir-dedication-person{padding:10px 0 18px;margin:0 0 14px;border-bottom:1px solid rgba(139,113,72,.25);break-inside:avoid}
.memoir-dedication-person:last-of-type{border-bottom:0}
.memoir-dedication-person h2{font:700 clamp(18px,2.2vw,23px)/1.2 Georgia,serif;color:#805f22;margin:4px 0 10px;text-align:center}
.memoir-dedication-text{font:15px/1.65 Georgia,serif;color:#3d3529;text-align:center;white-space:normal;margin:10px auto;max-width:760px}
.memoir-dedication-photos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px auto}
.memoir-dedication-photo{width:min(30%,190px);height:145px;object-fit:cover;padding:5px;background:#fffdf6;border:1px solid #d4c5a6;box-shadow:0 2px 7px rgba(68,53,28,.2)}
@media(max-width:700px){
 .memoir-dedication-photo{width:min(46%,190px);height:125px}
 .memoir-dedication-text{font-size:14.5px}
}


/* More realistic portrait hardcover: visible spine, page block and raised cover boards. */
.memoir-cover{
  width:min(100%,560px);
  max-width:560px;
  margin:34px auto 42px;
  padding:0 12px 18px 24px;
  perspective:1400px;
}
.memoir-cover-frame{
  position:relative;
  box-sizing:border-box;
  width:100%;
  aspect-ratio:0.72 / 1;
  min-height:0;
  padding:20px 20px 20px 38px;
  overflow:visible;
  border-radius:5px 15px 15px 5px;
  background:
    linear-gradient(90deg,#4b3214 0,#a87927 3%,#e0c36d 5%,#8c6724 7%,transparent 8%),
    linear-gradient(135deg,#b58a31,#f0d98b 12%,#8a641e 24%,#d5b65e 50%,#76551b 76%,#e3c66d 90%,#8c6723);
  box-shadow:
    0 24px 35px rgba(24,30,20,.38),
    8px 10px 0 -2px #e9dfc5,
    10px 13px 0 -3px #b7a987,
    12px 16px 0 -4px #f6efd9,
    inset 0 0 0 2px #f6e5a7;
  transform:rotateY(-3deg);
}
.memoir-cover-frame:before{
  content:"";
  position:absolute;
  z-index:2;
  left:5px;
  top:5px;
  bottom:5px;
  width:25px;
  border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,#35220e 0%,#79521c 20%,#d5b45b 42%,#76501a 62%,#2e1e0d 100%);
  box-shadow:inset -2px 0 3px rgba(255,235,160,.65),3px 0 5px rgba(0,0,0,.35);
}
.memoir-cover-frame:after{
  content:"";
  position:absolute;
  z-index:0;
  left:34px;
  right:-7px;
  bottom:-10px;
  height:12px;
  border-radius:0 0 7px 2px;
  background:repeating-linear-gradient(to bottom,#fff9e8 0,#fff9e8 2px,#c8b995 3px,#fffdf4 4px);
  box-shadow:4px 4px 7px rgba(0,0,0,.22);
}
.memoir-cover-inner{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  padding:28px 22px;
  border:2px solid rgba(226,194,105,.9);
  border-radius:3px 7px 7px 3px;
  box-shadow:
    inset 0 0 0 6px rgba(202,164,71,.14),
    inset 0 0 38px rgba(0,0,0,.48),
    3px 2px 7px rgba(0,0,0,.28);
}
.memoir-cover-logo{
  width:min(56%,235px);
  max-height:32%;
  margin:0 auto 14px;
}
.memoir-cover-rule{margin-bottom:16px}
.memoir-cover h2{
  font-size:clamp(23px,3.3vw,36px);
  line-height:1.14;
}
.memoir-cover h2 span{font-size:.62em}
.memoir-cover-ornament{margin:18px 0 22px;font-size:10px}
.memoir-open-button{min-width:175px}
@media(max-width:700px){
  .memoir-cover{width:min(94%,430px);padding:0 8px 14px 17px;margin:18px auto 28px}
  .memoir-cover-frame{padding:13px 13px 13px 29px}
  .memoir-cover-frame:before{width:19px}
  .memoir-cover-inner{padding:22px 14px}
  .memoir-cover-logo{width:min(62%,210px);max-height:31%}
  .memoir-cover-ornament{margin:14px 0 18px}
}


/* Realistic 3D flipbook page-turning layer */
.memoir-stage{perspective:2200px;perspective-origin:50% 45%}
.memoir-book{position:relative;isolation:isolate;transform-style:preserve-3d;overflow:visible}
.memoir-spread{position:relative;z-index:1;transform-style:preserve-3d;backface-visibility:hidden}
.memoir-spread.memoir-under-page{filter:drop-shadow(0 2px 5px rgba(40,27,12,.18))}
.memoir-flip-sheet{
  position:absolute;
  z-index:5;
  inset:10px;
  transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(0deg);
  pointer-events:none;
  will-change:transform;
  transition:transform .78s cubic-bezier(.22,.68,.18,1);
  border-radius:3px;
}
.memoir-flip-sheet.flip-backward{transform-origin:right center}
.memoir-flip-sheet.is-turning{transform:rotateY(-180deg)}
.memoir-flip-sheet.flip-backward.is-turning{transform:rotateY(180deg)}
.memoir-flip-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:3px;
  box-shadow:0 3px 14px rgba(40,27,12,.22);
}
.memoir-flip-front{background:#fbf5e5}
.memoir-flip-front>.memoir-page{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  border-radius:3px;
}
.memoir-flip-back{
  transform:rotateY(180deg);
  background:
    linear-gradient(90deg,rgba(93,69,35,.16),transparent 10%,transparent 90%,rgba(93,69,35,.12)),
    repeating-linear-gradient(to bottom,#fbf5e5 0,#fbf5e5 29px,rgba(133,112,77,.10) 30px,#fbf5e5 31px);
  border:1px solid #e0d2b3;
}
.memoir-flip-back:after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;width:18px;
  background:linear-gradient(90deg,rgba(85,62,31,.18),transparent);
}
.memoir-flip-paper-mark{
  position:absolute;
  inset:12px;
  border-top:1px solid rgba(139,113,72,.15);
  border-bottom:1px solid rgba(139,113,72,.15);
}
.memoir-controls button{touch-action:manipulation}
@media(max-width:700px){
  .memoir-flip-sheet{inset:6px}
  .memoir-flip-front>.memoir-page{min-height:100%;height:100%;overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .memoir-flip-sheet{transition:none!important}
}
