<style>
  :root{
    --ink:#0b0b0c; --muted:#666; --line:rgba(0,0,0,.08);
    --card:#ffffff; --bg:#f4f6f8; --radius:16px;
    --shadow:0 2px 6px rgba(0,0,0,.08);
    --maxw:1200px;
  }
  *{box-sizing:border-box}
  body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased}
  header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #FF9900;   /* Amazon orange */
  border-bottom: 1px solid var(--line);
  padding: 14px;
  text-align: center;
  font-weight: 700;
  color: #fff;           /* white text for contrast */
}
  main.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
  h1,h2{font-family:"Newsreader",serif}

  /* Hero */
  .hero{padding:72px 0 56px; text-align:center}
  .hero h1{font-size:clamp(40px,7vw,72px); margin:0}
  .hero p{max-width:60ch; margin:10px auto 18px; color:var(--muted)}
  .btn{appearance:none; border:0; cursor:pointer; padding:12px 18px; border-radius:999px; font-weight:800; background:#111; color:#fff; box-shadow:var(--shadow)}
  .btn.secondary{background:#f0f1f3; color:#111; border:1px solid var(--line)}

  /* Wave (with background image and audio toggle) */
  .wave-wrap{
    position:relative; width:100vw; left:50%; margin-left:-50vw;
    height:64vh; border-block:1px solid var(--line); overflow:hidden;
    background:linear-gradient(#fff,#fafafa);
  }
  .wave-wrap.full{ height:100vh; } /* Fullscreen during immersive mode */
  .wave-image{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
    opacity:.60; /* make it visible */
    filter: saturate(120%) contrast(110%) brightness(1.02);
    pointer-events:none; z-index:1;
  }
  #waveCanvas{position:relative; z-index:2; width:100%; height:100%; display:block}
  .wave-cta{position:absolute; inset:auto 0 24px 0; display:flex; justify-content:center; gap:12px; z-index:3}

  /* Audio toggle top-right */
  .audio-toggle{
    position:absolute; top:14px; right:14px; z-index:4;
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.7); backdrop-filter: blur(8px);
    color:#0b0b0c; font-weight:700; font-size:12px; letter-spacing:.02em;
    cursor:pointer; user-select:none;
  }
  .audio-toggle .icon{ width:18px; height:18px; display:block }
  .audio-toggle .label{ opacity:.85 }
  @media (max-width:860px){ .audio-toggle .label{ display:none } }

  /* Sections */
  .section{display:flex; align-items:end; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); margin-top:48px; padding:18px 0 10px}
  .section h2{margin:0; font-size:28px}
  .hint{color:var(--muted); font-size:13px}

  /* Grids */
  .grid{display:grid; gap:16px}

  /* Authors: exactly 3 equal columns on desktop (100% row width) */
  .authors{grid-template-columns:repeat(3, 1fr); width:100%}
  .author{
    display:block; text-decoration:none; color:inherit; background:var(--card);
    border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
    padding:12px; transition:transform .2s ease; will-change:transform; width:100%;
  }
  .author:hover{ transform:translateY(-3px) }
  .author img{width:100%; height:220px; object-fit:cover; border-radius:12px}
  .title{font-weight:800; font-size:15px}
  .meta{font-size:13px; color:var(--muted); margin-top:4px}

/* Default (mobile first) */
.bio {
  font-size: 13px;         /* smaller on phones */
  color: #555;
  margin-top: 6px;
  line-height: 1.5;
  text-align: justify;     /* justify the text */
}

/* Tablet (681px – 1024px) */
@media (min-width:681px) and (max-width:1024px){
  .bio {
    font-size: 16px;       /* a little larger on tablets */
    line-height: 1.55;
    text-align: justify;
  }
}

/* Desktop (>= 1025px) */
@media (min-width:1025px){
  .bio {
    font-size: 16px;       /* most readable on desktop */
    line-height: 1.6;
    text-align: justify;
  }
}

  /* Books */
  .books{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .card{
    display:block; text-decoration:none; color:inherit; background:var(--card);
    border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
    padding:12px; transition:transform .2s ease; will-change:transform;
  }
  .card:hover{ transform:translateY(-3px) }
  .cover{aspect-ratio:3/4; background:#111; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:10px}
  .cover img{width:100%; height:100%; object-fit:contain}

  /* About */
  #about p{max-width:80ch; line-height:1.7; color:#333}

  /* ===== Immersive mode: only wave is visible ===== */
  body.immersive{ overflow:hidden; }
  body.immersive header,
  body.immersive main.container,
  body.immersive .site-footer{ display:none; }  /* hide footer in immersive */
  body.immersive .wave-wrap{ border:0; }

  /* ===== Footer styles ===== */
  .site-footer{ background:#fff; border-top:1px solid var(--line); }
  .site-footer .container{ max-width:var(--maxw); margin:0 auto; padding:22px 20px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center }
  .site-footer .brand{ font-weight:800; letter-spacing:.02em }
  .site-footer nav a{ color:var(--ink); text-decoration:none; margin-left:18px; font-size:14px; font-weight:600; opacity:.9 }
  .site-footer nav a:hover{ opacity:1; text-decoration:underline }

  @media (max-width:680px){
    .site-footer .container{ grid-template-columns:1fr; justify-items:center; text-align:center }
    .site-footer nav{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center }
    .site-footer nav a{ margin:0 }
    
     .grid.authors {
    grid-template-columns: 1fr;
  }
 }
  
  @media (min-width: 681px) and (max-width: 1024px){
  .grid.books {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
</style>