/* ---------------------------
  Fonts
---------------------------- */
@font-face{ font-family:'AppleGaramond'; src:url('/assets/fonts/AppleGaramond.ttf') format('truetype'); }
@font-face{ font-family:'PredikatOneday'; src:url('/assets/fonts/PredikatOneday.ttf') format('truetype'); }

/* ---------------------------
  Theme
---------------------------- */
:root{
  --tf-bg:#000;
  --tf-text:#ffeede;
  --tf-pill-text:#ffd9c2;
  --tf-pill-bg:rgba(255,255,255,.10);
  --tf-pill-hover:rgba(255,140,0,.18);
  --tf-pill-glow:rgba(255,140,0,.45);
}

/* ---------------------------
  Base
---------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'AppleGaramond',serif;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('/assets/images/background.webp') center/cover no-repeat fixed;
  color:#fff; line-height:1.6; overflow-x:hidden;
}

/* ---------------------------
  Header
---------------------------- */
.tf-top-banner{
  position:relative;
  background:var(--tf-bg);
  color:var(--tf-text);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:.6rem 1rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:1rem;
  z-index:10;
}

/* Title with inline wings (desktop/tablet) */
.tf-title{
  margin:0;
  font-family:'Cinzel Decorative',serif;
  color:#f3e7df;
  font-size:clamp(1.4rem,3.2vw,2.4rem);
  line-height:1.1;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  white-space:nowrap;
}
.tf-wing{ width:68px; height:auto; filter:drop-shadow(0 0 6px rgba(255,120,40,.85)); }

/* Pills */
.tf-banner-link{
  color:var(--tf-pill-text);
  text-decoration:none;
  font-family:'Cinzel Decorative',serif;
  font-size:1.02rem;
  background:var(--tf-pill-bg);
  padding:.4rem .75rem;
  border-radius:6px;
  transition:all .25s ease;
  box-shadow:0 0 6px rgba(0,0,0,.3);
  display:inline-block;
}
.tf-banner-link:hover,.tf-banner-link:focus{
  background:var(--tf-pill-hover);
  box-shadow:0 0 10px var(--tf-pill-glow);
  outline:none;
}

.tf-mobile-links{ display:none; }

/* ---------------------------
  Tablet condense
---------------------------- */
@media (max-width:1100px){
  .tf-top-banner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    row-gap:.5rem;
  }
  .tf-left,.tf-right{ display:none; }
  .tf-mobile-links{
    display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  }
}

/* ---------------------------
  Phone: no wings; pills side by side under title
---------------------------- */
@media (max-width:600px){
  /* hide wings */
  .tf-title .tf-wing{ display:none; }
  .tf-title{ font-size:1.3rem; }

  .tf-mobile-links{
    display:flex;
    justify-content:center;
    gap:12px; /* side by side */
    margin-top:.25rem;
  }
  .tf-banner-link{ font-size:1rem; padding:.42rem .7rem; }
}

/* ---------------------------
  Content
---------------------------- */
.container{ display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; padding:2rem 1rem; }
.hero{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:800px; width:100%; }

.book-cover{
  width:300px; height:auto; display:block; margin:2rem;
  border:4px solid #000; border-radius:5px;
  box-shadow:0 10px 25px rgba(0,0,0,.55);
}

.tagline{
  margin:1rem 0; font-family:'PredikatOneday',serif;
  font-size:2rem; text-shadow:0 8px 30px rgba(0,0,0,1);
}

.book-description{
  background-color:rgba(0,0,0,.75); padding:2rem; margin-top:2rem;
  border-radius:8px; font-size:1.15rem; line-height:1.8;
  max-width:800px; width:100%; color:#eee; text-align:center;
}

.buy-button{
  background:#FF5C33; color:#fff; font-size:1.2rem; padding:.9rem 1.4rem; border-radius:5px; border:2px solid #000;
  transition:.3s; max-width:200px; width:100%; text-align:center; text-decoration:none;
  box-shadow:0 6px 16px rgba(255,140,0,.25);
}
.buy-button:hover{ background:#F05454; }

.buy-button-layout{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:2rem; margin:2rem 0; flex-wrap:nowrap; }
.buy-button-left,.buy-button-right{ display:flex; flex-direction:column; align-items:center; }

@media (max-width:768px){
  .book-cover{ max-width:220px; }
  .buy-button{ font-size:.95rem; padding:.5rem .8rem; max-width:180px; }
  .buy-button-layout{ flex-direction:column; gap:1rem; }
}