:root{
  --gold:#e5bd72;
  --gold2:#f3d89b;
  --ink:#1d170f;
  --paper:#ead8ae;
  --wood:#2a1d12;
  --moss:#495f36;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Georgia,"Times New Roman",serif;background:#0a0d08;color:#f5ecd7}
body{overflow:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
.site{
  width:100vw;height:100vh;position:relative;overflow:hidden;
  background:#0a0d08 url("assets/home.png") center/cover no-repeat;
}
.site::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(4,7,4,.12),rgba(4,7,4,.34));
}
.nav{
  position:absolute;z-index:5;top:0;left:0;right:0;
  display:grid;grid-template-columns:1.2fr repeat(7,1fr);align-items:center;
  gap:.4rem;padding:.65rem 1rem;background:rgba(20,13,8,.72);
  border-bottom:1px solid rgba(229,189,114,.3);backdrop-filter:blur(3px);
}
.brand{font-size:clamp(18px,2vw,34px);font-weight:600;color:var(--gold2);white-space:nowrap}
.nav a:not(.brand){font-size:clamp(11px,.9vw,16px);text-align:center;color:#f3dfb5}
.nav a:hover{color:white}
.hero{
  position:relative;z-index:3;height:100%;display:grid;
  grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:1fr 1fr;
  gap:1.2rem;padding:6.4rem 4vw 5rem;align-items:center;
}
.center{
  grid-column:2;grid-row:1/3;align-self:center;text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.center h1{font-size:clamp(48px,6vw,98px);line-height:.9;margin:0;color:#fff3d4;font-weight:500}
.center .motto{font-size:clamp(18px,1.8vw,30px);color:#d9e9c4;margin:1rem 0}
.center p{font-size:clamp(14px,1.1vw,20px);line-height:1.5;max-width:720px;margin:0 auto}
.center .hope{margin-top:1.4rem;font-size:clamp(18px,1.5vw,27px);color:var(--gold2)}
.card{
  position:relative;z-index:4;max-width:310px;padding:1rem 1.1rem;
  background:rgba(39,26,16,.78);border:1px solid rgba(229,189,114,.28);
  border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.32);backdrop-filter:blur(2px);
  transition:.2s ease;
}
.card:hover{transform:translateY(-3px);border-color:rgba(229,189,114,.7);background:rgba(52,35,20,.84)}
.card h2{font-size:clamp(20px,1.8vw,30px);margin:0 0 .4rem;color:var(--gold2);font-weight:500}
.card p{font-size:clamp(12px,.95vw,16px);line-height:1.35;margin:0;color:#f1e4c9}
.card .go{display:block;margin-top:.55rem;color:var(--gold);font-size:.95em}
.left-top{grid-column:1;grid-row:1;justify-self:start;align-self:end}
.left-bottom{grid-column:1;grid-row:2;justify-self:start;align-self:start}
.right-top{grid-column:3;grid-row:1;justify-self:end;align-self:end}
.right-bottom{grid-column:3;grid-row:2;justify-self:end;align-self:start}
.soup{
  position:absolute;z-index:4;left:50%;bottom:4.6rem;transform:translateX(-50%);
  width:260px;text-align:center;padding:.8rem 1rem;border-radius:18px;
  background:rgba(34,23,14,.72);border:1px solid rgba(229,189,114,.3);
}
.soup h2{margin:0;color:var(--gold2);font-size:26px}
.soup p{margin:.25rem 0 0;font-size:14px}
.footer{
  position:absolute;z-index:5;left:0;right:0;bottom:0;height:3.1rem;
  display:flex;justify-content:center;align-items:center;
  background:rgba(15,10,7,.75);border-top:1px solid rgba(229,189,114,.24);
  color:#d7c7a6;font-size:13px;
}

/* generic inside pages */
.inner{
  width:100vw;height:100vh;overflow:hidden;position:relative;
  background:#0a0d08 url("assets/home.png") center/cover no-repeat;
}
.inner::after{content:"";position:absolute;inset:0;background:rgba(5,8,5,.48);pointer-events:none}
.inner-content{
  position:relative;z-index:3;height:100%;display:flex;align-items:center;justify-content:center;padding:7rem 5vw 4rem;
}
.panel{
  width:min(900px,85vw);max-height:76vh;padding:2rem 2.4rem;border-radius:26px;
  background:linear-gradient(rgba(239,220,180,.94),rgba(223,199,150,.94));
  color:var(--ink);border:1px solid rgba(95,66,36,.65);box-shadow:0 24px 70px rgba(0,0,0,.45)
}
.panel h1{font-size:clamp(34px,4vw,62px);margin:0 0 .5rem;font-weight:500}
.panel p{font-size:clamp(15px,1.2vw,20px);line-height:1.5}
.backlink{position:absolute;z-index:5;top:1rem;left:1rem;padding:.55rem .8rem;border-radius:999px;background:rgba(35,24,14,.7);border:1px solid rgba(229,189,114,.4);color:#f5dfb3}

/* BTR */
.btr{
  width:100vw;height:100vh;overflow:hidden;position:relative;
  background:#0b0e08 url("assets/btr.png") center/cover no-repeat;
}
.btr::after{content:"";position:absolute;inset:0;background:rgba(3,5,3,.22)}
.btr-cover{
  position:absolute;z-index:3;left:50%;top:54%;transform:translate(-50%,-50%);
  width:min(28vw,430px);aspect-ratio:.72;border-radius:18px;padding:2rem;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  color:#efcf8d;background:linear-gradient(145deg,#4d2f1b,#1d120c 62%,#5c3820);
  border:4px solid #7b5331;box-shadow:0 25px 55px rgba(0,0,0,.55),inset 0 0 45px rgba(0,0,0,.45);
  cursor:pointer;transition:.3s ease;
}
.btr-cover:hover{transform:translate(-50%,-53%) scale(1.02)}
.btr-cover h1{font-size:clamp(28px,3vw,50px);margin:0}
.btr-cover .date{margin-top:1rem;font-size:16px}
.btr-cover .hint{margin-top:1.4rem;font-size:14px;color:#d7bc8c}
.btr-help{position:absolute;z-index:5;bottom:.8rem;left:50%;transform:translateX(-50%);text-align:center;color:#e6c57d;font-size:13px}
.btr-help strong{display:block;font-size:18px}
.reader{
  position:absolute;z-index:10;inset:0;display:none;place-items:center;
  background:rgba(6,8,5,.5);backdrop-filter:blur(7px);
}
.reader.open{display:grid}
.book{
  width:min(76vw,1120px);height:min(72vh,680px);display:grid;grid-template-columns:1fr 1fr;
  filter:drop-shadow(0 28px 50px rgba(0,0,0,.6));transition:.4s ease;transform:scale(.94)
}
.reader.open .book{transform:scale(1)}
.page{
  background:linear-gradient(#f0e1bd,#dfc99b);color:#2f2418;padding:3rem 3.2rem;overflow:hidden;
  border:1px solid #9a754b;position:relative
}
.left-page{border-radius:20px 2px 2px 20px}
.right-page{border-radius:2px 20px 20px 2px}
.page h2{text-align:center;font-size:clamp(28px,2.7vw,45px);font-weight:500;margin:.4rem 0 1rem}
.page p{font-size:clamp(16px,1.35vw,22px);line-height:1.55}
.copyright{text-align:center;margin-top:2.2rem;font-size:14px}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:12;width:56px;height:56px;border-radius:50%;background:rgba(31,21,12,.78);color:#f0d08b;border:1px solid #d5ae64;font-size:38px}
.prev{left:3vw}.next{right:3vw}
.exit-note{position:absolute;bottom:1rem;color:#f2d28c;font-size:13px}

@media(max-width:850px){
  body{overflow:auto}
  .site,.inner,.btr{height:auto;min-height:100vh;overflow:visible;background-attachment:scroll}
  .nav{position:relative;grid-template-columns:1fr 1fr;gap:.7rem}
  .brand{grid-column:1/-1;text-align:center}
  .hero{height:auto;min-height:100vh;display:flex;flex-direction:column;padding:2rem 1rem 5rem}
  .center{order:-1}
  .card,.soup{position:static;transform:none!important;width:100%;max-width:600px}
  .footer{position:relative;height:auto;padding:1rem}
  .inner-content{height:auto;min-height:100vh;padding:2rem 1rem}
  .panel{max-height:none;width:100%}
  .btr{min-height:100vh;padding:2rem 1rem}
  .btr-cover{position:relative;left:auto;top:auto;transform:none!important;margin:7rem auto 5rem;width:min(82vw,360px)}
  .book{width:94vw;height:auto;grid-template-columns:1fr}
  .right-page{display:none}
  .page{min-height:70vh;border-radius:18px}
  .arrow{position:fixed;top:50%}
}