:root{
  --paper:#f3eadc;
  --paper-light:#fbf7ef;
  --paper-shadow:#d8c8b3;
  --graphite:#2d2d2b;
  --blue:#2f4f7f;
  --terracotta:#bd6849;
  --warm-gray:#938b81;
  --wood:#5e4631;
  --line-blue:rgba(47,79,127,.11);
  --line-red:rgba(189,104,73,.32);
  --ui-bg:rgba(243,234,220,.92);
  --page-width:min(760px,88vw);
  --page-height:min(820px,76vh);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  margin:0;
  color:var(--graphite);
  background:
    radial-gradient(circle at 22% 5%,rgba(255,255,255,.17),transparent 28%),
    linear-gradient(112deg,rgba(0,0,0,.09),transparent 32%,rgba(255,255,255,.035) 70%),
    #5d4633;
  font-family:Georgia,"Times New Roman",serif;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.22;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
}

button,a{font:inherit}

button{color:inherit}

.skip-link{
  position:fixed;
  left:-999px;
  top:1rem;
  z-index:100;
  padding:.7rem 1rem;
  background:var(--paper-light);
}

.skip-link:focus{left:1rem}

.topbar{
  position:relative;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:70px;
  padding:.7rem clamp(1rem,4vw,4rem);
  background:var(--ui-bg);
  border-bottom:1px solid rgba(45,45,43,.15);
  backdrop-filter:blur(14px);
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:inherit;
  text-decoration:none;
}

.brand img{
  width:46px;
  height:46px;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.13);
}

.brand span{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.brand strong{
  font-weight:500;
  font-size:1.08rem;
}

.brand small{
  margin-top:.22rem;
  color:var(--blue);
  font: .68rem "Courier New",monospace;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.text-button,.share-button{
  border:0;
  border-bottom:1px solid rgba(45,45,43,.34);
  background:transparent;
  padding:.45rem .35rem;
  cursor:pointer;
  font: .76rem "Courier New",monospace;
}

.text-button:hover,.share-button:hover{
  border-color:var(--terracotta);
}

.stage{
  min-height:calc(100vh - 70px);
  display:grid;
  place-items:center;
  padding:clamp(1.4rem,4vh,3rem) 1rem 2rem;
}

.book-shell{
  width:min(1040px,100%);
  display:grid;
  justify-items:center;
  position:relative;
}

.notebook{
  position:relative;
  width:var(--page-width);
  height:var(--page-height);
  min-height:580px;
  perspective:2200px;
  transform-style:preserve-3d;
}

.desk-shadow{
  position:absolute;
  width:min(850px,88vw);
  height:90px;
  top:calc(var(--page-height) - 15px);
  border-radius:50%;
  background:rgba(0,0,0,.28);
  filter:blur(26px);
  transform:scaleX(.92);
}

.page-stack{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  border-radius:3px 12px 12px 3px;
  box-shadow:
    0 26px 52px rgba(0,0,0,.31),
    10px 9px 0 -3px #d8cbb9,
    15px 14px 0 -6px #cfc1ad;
}

.page-stack::after{
  content:"";
  position:absolute;
  inset:7px -7px -9px 8px;
  z-index:-1;
  border-radius:3px 12px 12px 3px;
  background:#d9ccb9;
}

.paper-page,.turning-page{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:3px 12px 12px 3px;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  background:
    linear-gradient(90deg,transparent 0 72px,var(--line-red) 72px 73px,transparent 73px),
    repeating-linear-gradient(0deg,transparent 0 31px,var(--line-blue) 31px 32px),
    var(--paper-light);
}

.paper-page::before,.turning-page::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

.paper-page::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:34px;
  background:linear-gradient(90deg,rgba(0,0,0,.13),transparent);
  opacity:.33;
  pointer-events:none;
}

.paper-page{
  z-index:2;
}

.turning-page{
  z-index:9;
  transform-origin:left center;
  will-change:transform;
  box-shadow:10px 0 30px rgba(0,0,0,.18);
}

.turn-next{
  animation:turnNext .82s cubic-bezier(.55,.04,.31,.99) forwards;
}

.turn-prev{
  transform-origin:right center;
  animation:turnPrev .82s cubic-bezier(.55,.04,.31,.99) forwards;
}

@keyframes turnNext{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  45%{filter:brightness(.86)}
  100%{transform:rotateY(-179deg);filter:brightness(.74)}
}

@keyframes turnPrev{
  0%{transform:rotateY(0deg);filter:brightness(1)}
  45%{filter:brightness(.86)}
  100%{transform:rotateY(179deg);filter:brightness(.74)}
}

.spiral{
  position:absolute;
  z-index:20;
  left:-25px;
  top:22px;
  bottom:22px;
  width:52px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  pointer-events:none;
}

.spiral i{
  width:52px;
  height:17px;
  border:4px solid #252525;
  border-left-width:5px;
  border-right-width:5px;
  border-radius:50%;
  box-shadow:0 2px 2px rgba(0,0,0,.34);
  transform:rotate(-2deg);
}

.page-content{
  position:relative;
  z-index:2;
  height:100%;
  padding:clamp(2.2rem,5vw,4.7rem) clamp(2rem,6vw,5.6rem) clamp(2rem,5vw,4rem) clamp(5.2rem,10vw,7.6rem);
  display:flex;
  flex-direction:column;
}

.page-content.centered{
  align-items:center;
  justify-content:center;
  text-align:center;
}

.page-content.top{
  justify-content:flex-start;
}

.page-kicker{
  margin:0 0 .4rem;
  color:var(--terracotta);
  text-transform:uppercase;
  letter-spacing:.12em;
  font: .72rem "Courier New",monospace;
}

.page-title{
  margin:.15rem 0 1.5rem;
  font-size:clamp(2rem,5vw,4.5rem);
  font-weight:400;
  line-height:1.02;
}

.page-subtitle{
  max-width:560px;
  color:var(--blue);
  font:clamp(.95rem,2vw,1.18rem) "Courier New",monospace;
  line-height:1.65;
}

.cover-logo{
  width:clamp(150px,28vw,250px);
  height:clamp(150px,28vw,250px);
  margin-bottom:1.1rem;
  border-radius:50%;
  box-shadow:0 17px 34px rgba(0,0,0,.13);
  transform:rotate(-1deg);
}

.cover-title{
  margin:.2rem 0 0;
  font-size:clamp(2.7rem,8vw,6.6rem);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:.94;
}

.cover-signature{
  margin:.7rem 0 1.4rem;
  color:var(--blue);
  font-family:cursive;
  font-size:clamp(1.4rem,4vw,2.5rem);
  transform:rotate(-1deg);
}

.open-book{
  margin-top:1.5rem;
  padding:.72rem 1rem;
  border:0;
  border-bottom:2px solid var(--blue);
  background:rgba(255,255,255,.38);
  cursor:pointer;
  font: .83rem "Courier New",monospace;
  transform:rotate(-.5deg);
}

.fragment-group{
  display:grid;
  gap:clamp(1.4rem,4vh,3rem);
  margin:auto 0;
}

.fragment{
  position:relative;
  max-width:620px;
}

.fragment + .fragment{
  padding-top:1.8rem;
  border-top:1px solid rgba(45,45,43,.16);
}

.fragment-number{
  display:block;
  margin-bottom:.7rem;
  color:var(--terracotta);
  font: .68rem "Courier New",monospace;
}

.fragment blockquote{
  margin:0;
}

.fragment p{
  margin:.43rem 0;
  font-size:clamp(1.05rem,2.25vw,1.48rem);
  line-height:1.48;
}

.fragment.large p{
  font-size:clamp(1.14rem,2.7vw,1.82rem);
}

.fragment.compact p{
  margin:.28rem 0;
  font-size:clamp(.94rem,1.9vw,1.24rem);
}

.hand-note{
  align-self:flex-end;
  max-width:280px;
  margin-top:auto;
  color:var(--blue);
  font-family:cursive;
  font-size:clamp(1.05rem,2.3vw,1.4rem);
  transform:rotate(-2deg);
}

.under-mark{
  position:relative;
  display:inline-block;
}

.under-mark::after{
  content:"";
  position:absolute;
  left:-2%;
  right:-3%;
  bottom:-5px;
  height:5px;
  border-top:2px solid var(--blue);
  border-radius:50%;
  transform:rotate(-1.5deg);
}

.circle-note{
  display:inline-grid;
  place-items:center;
  min-width:160px;
  min-height:110px;
  padding:1rem;
  border:2px solid var(--blue);
  border-radius:50%;
  transform:rotate(-4deg);
}

.asterisk{
  position:absolute;
  color:var(--blue);
  font-size:2rem;
}

.asterisk.one{right:10%;top:14%}
.asterisk.two{left:16%;bottom:12%;color:var(--terracotta)}

.tape{
  position:absolute;
  top:-12px;
  left:42%;
  width:92px;
  height:29px;
  background:rgba(189,104,73,.72);
  transform:rotate(-4deg);
}

.paperclip{
  position:absolute;
  right:40px;
  top:-19px;
  width:20px;
  height:67px;
  border:3px solid #4d4d4d;
  border-radius:12px;
  transform:rotate(10deg);
}

.manifesto-lines p{
  margin:.2rem 0;
  font-size:clamp(1.45rem,4vw,2.9rem);
  line-height:1.25;
}

.manifesto-lines .pause{
  margin-top:1.4rem;
}

.manifesto-lines .last{
  color:var(--blue);
  font-family:cursive;
  font-size:clamp(2rem,5vw,3.7rem);
  transform:rotate(-1deg);
}

.end-note{
  max-width:500px;
  margin-top:2.3rem;
  font: .92rem "Courier New",monospace;
  color:var(--warm-gray);
}

.page-nav{
  position:absolute;
  z-index:30;
  top:50%;
  display:flex;
  align-items:center;
  gap:.45rem;
  transform:translateY(-50%);
  border:0;
  background:rgba(243,234,220,.88);
  padding:.62rem .72rem;
  box-shadow:0 8px 18px rgba(0,0,0,.13);
  cursor:pointer;
  font-family:"Courier New",monospace;
}

.page-nav span{
  font-size:1.4rem;
  color:var(--blue);
}

.page-nav small{
  font-size:.63rem;
}

.page-nav.prev{left:-112px}
.page-nav.next{right:-112px}

.page-nav:disabled{
  opacity:.3;
  cursor:not-allowed;
}

.book-meta{
  width:var(--page-width);
  margin-top:1.3rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  color:#f5ede1;
  font: .68rem "Courier New",monospace;
}

.progress-track{
  height:2px;
  background:rgba(255,255,255,.27);
}

.progress-track span{
  display:block;
  height:100%;
  width:0;
  background:#f0d4bd;
  transition:width .35s ease;
}

.share-button{
  color:#f5ede1;
  border-color:rgba(255,255,255,.34);
}

.gesture-hint{
  margin:.7rem 0 0;
  color:rgba(255,255,255,.66);
  font: .64rem "Courier New",monospace;
}

.index-panel{
  position:fixed;
  z-index:80;
  top:0;
  right:0;
  bottom:0;
  width:min(430px,92vw);
  padding:2rem;
  overflow:auto;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,var(--line-blue) 31px 32px),
    var(--paper-light);
  box-shadow:-18px 0 45px rgba(0,0,0,.26);
  transform:translateX(105%);
  transition:transform .35s ease;
}

.index-panel.open{transform:translateX(0)}

.index-header{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(45,45,43,.16);
}

.index-header h2{
  margin:.25rem 0;
  font-weight:400;
  font-size:2rem;
}

.micro-label{
  color:var(--terracotta);
  font: .68rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.icon-button{
  border:0;
  background:transparent;
  font-size:2rem;
  cursor:pointer;
}

#indexList{
  display:grid;
  gap:.3rem;
  margin:1.4rem 0;
}

.index-link{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:.8rem;
  width:100%;
  padding:.75rem .3rem;
  border:0;
  border-bottom:1px solid rgba(45,45,43,.1);
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.index-link span:first-child{
  color:var(--terracotta);
  font: .67rem "Courier New",monospace;
}

.index-link strong{
  font-weight:400;
}

.index-link.active{
  color:var(--blue);
}

.index-note{
  margin-top:2rem;
  color:var(--warm-gray);
  font: .76rem "Courier New",monospace;
}

.backdrop{
  position:fixed;
  z-index:70;
  inset:0;
  background:rgba(18,16,14,.53);
  backdrop-filter:blur(3px);
}

.toast{
  position:fixed;
  z-index:100;
  left:50%;
  bottom:2rem;
  transform:translate(-50%,20px);
  padding:.7rem 1rem;
  opacity:0;
  pointer-events:none;
  background:var(--graphite);
  color:#fff;
  font: .73rem "Courier New",monospace;
  transition:.25s ease;
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

body.quiet .topbar,
body.quiet .book-meta,
body.quiet .gesture-hint{
  opacity:0;
  pointer-events:none;
}

body.quiet .page-nav{
  opacity:.08;
}

body.quiet .page-nav:hover{
  opacity:1;
}

@media(max-width:1040px){
  .page-nav{
    top:auto;
    bottom:14px;
    transform:none;
  }
  .page-nav.prev{left:86px}
  .page-nav.next{right:20px}
}

@media(max-width:700px){
  :root{
    --page-width:92vw;
    --page-height:77vh;
  }

  .topbar{
    min-height:62px;
    padding:.5rem .8rem;
  }

  .brand img{
    width:40px;
    height:40px;
  }

  .brand small{display:none}

  .top-actions{
    gap:.2rem;
  }

  .text-button{
    font-size:.64rem;
  }

  .stage{
    min-height:calc(100vh - 62px);
    padding:1rem .35rem 1.3rem;
  }

  .notebook{
    min-height:510px;
  }

  .spiral{
    left:-15px;
    width:36px;
  }

  .spiral i{
    width:36px;
    height:13px;
    border-width:3px;
  }

  .paper-page,.turning-page{
    background:
      linear-gradient(90deg,transparent 0 44px,var(--line-red) 44px 45px,transparent 45px),
      repeating-linear-gradient(0deg,transparent 0 28px,var(--line-blue) 28px 29px),
      var(--paper-light);
  }

  .page-content{
    padding:2rem 1.4rem 4.1rem 3.8rem;
  }

  .cover-logo{
    width:132px;
    height:132px;
  }

  .fragment-group{
    gap:1.15rem;
  }

  .fragment + .fragment{
    padding-top:1rem;
  }

  .page-nav{
    bottom:9px;
    padding:.48rem .6rem;
    background:rgba(243,234,220,.78);
    box-shadow:none;
  }

  .page-nav.prev{left:55px}
  .page-nav.next{right:9px}

  .page-nav small{display:none}

  .book-meta{
    grid-template-columns:auto 1fr;
    width:92vw;
  }

  .share-button{
    grid-column:1/-1;
    justify-self:center;
  }

  .gesture-hint{
    text-align:center;
  }

  .compact-mobile p{
    font-size:clamp(.83rem,3.2vw,1rem)!important;
    line-height:1.42;
  }
}

@media(max-height:730px) and (min-width:701px){
  :root{--page-height:72vh}
  .page-content{padding-top:2rem;padding-bottom:2rem}
  .fragment p{font-size:1rem}
}

@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}