/* =========================
   GLOBAL
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{

  --bg:#f5f1ea;
  --paper:#fcfaf7;

  --text:#1f1f1f;
  --muted:#6f6f6f;

  --accent:#1f3042;

  --border:#ddd4c8;
}

html{
  scroll-behavior:smooth;
}

body{

  width:100%;

  overflow-x:hidden;

  background:var(--bg);

  color:var(--text);

  font-family:'Inter', sans-serif;

  line-height:1.9;
}

/* =========================
   LINKS
========================= */

a{
  text-decoration:none;
  color:inherit;
}

img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================
   NAVBAR
========================= */

header{

  position:sticky;
  top:0;
  z-index:1000;

  background:rgba(245,241,234,0.94);

  backdrop-filter:blur(12px);

  border-bottom:1px solid var(--border);
}

nav{

  width:min(1180px,90%);

  margin:auto;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:24px 0;
}

nav h1{

  font-family:'Playfair Display', serif;

  font-size:1.3rem;

  font-weight:600;

  color:var(--accent);
}

nav ul{

  display:flex;

  gap:34px;

  list-style:none;
}

nav a{

  color:var(--muted);

  font-size:.95rem;

  transition:.3s;
}

nav a:hover,
nav a.active{

  color:var(--accent);
}

/* =========================
   HERO
========================= */

.hero{

  width:min(1180px,90%);

  margin:32px auto;

  height:520px;

  border-radius:34px;

  overflow:hidden;

  background:url('banner.jpg');

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  display:flex;

  align-items:center;

  position:relative;
}

.hero::before{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.16);
}

.hero-overlay{

  position:relative;

  z-index:2;

  padding:90px;
}

/* =========================
   INTRO
========================= */

.intro{

  padding:110px 0;
}

.intro-container{

  width:min(1120px,90%);

  margin:auto;

  display:grid;

  grid-template-columns:1fr 420px;

  gap:80px;

  align-items:center;
}

.intro-text h2{

  font-family:'Playfair Display', serif;

  font-size:3.2rem;

  margin-bottom:28px;

  color:var(--accent);
}

.intro-text p{

  color:#444;

  margin-bottom:24px;

  max-width:700px;
}

.intro-image img{

  border-radius:30px;

  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

/* =========================
   PROFILE CAPTION
========================= */

.profile-caption{

  text-align:center;

  margin-top:22px;
}

.profile-caption h3{

  font-family:'Playfair Display', serif;

  font-size:1.6rem;

  margin-bottom:8px;

  color:var(--accent);
}

.profile-caption p{

  font-size:.95rem;

  letter-spacing:.5px;

  color:var(--muted);
}

/* =========================
   CONTENT
========================= */

.content{

  padding:30px 0 110px;
}

.text-block{

  width:min(820px,90%);

  margin:auto;

  background:var(--paper);

  border:1px solid var(--border);

  border-radius:34px;

  padding:80px;
}

.text-block h3{

  font-family:'Playfair Display', serif;

  font-size:3rem;

  margin-bottom:34px;

  color:var(--accent);
}

.text-block p{

  margin-bottom:32px;

  color:#2a2a2a;

  font-size:1.05rem;
}

.text-block strong{

  display:block;

  margin-top:16px;

  padding-left:22px;

  border-left:3px solid var(--accent);

  font-size:1.12rem;

  line-height:1.8;
}

/* =========================
   BOOK SECTION
========================= */

.book{

  padding:110px 0;

  background:#ece4d8;
}

.book-container{

  width:min(980px,90%);

  margin:auto;

  display:grid;

  grid-template-columns:300px 1fr;

  gap:70px;

  align-items:center;
}

.book-cover img{

  max-width:280px;

  margin:auto;

  border-radius:24px;

  box-shadow:0 25px 70px rgba(0,0,0,.10);
}

.book-text h2{

  font-family:'Playfair Display', serif;

  font-size:3.2rem;

  margin-bottom:28px;

  color:var(--accent);
}

.book-text p{

  color:#4d4d4d;

  margin-bottom:36px;

  max-width:650px;
}

.book-buttons{

  display:flex;

  gap:14px;

  flex-wrap:wrap;
}

/* =========================
   LIBRARY
========================= */

.library{

  padding:110px 0;
}

.library-container{

  width:min(1120px,90%);

  margin:auto;
}

.library-card{

  background:var(--paper);

  border-radius:36px;

  border:1px solid var(--border);

  padding:80px;

  transition:.35s;
}

.library-card:hover{

  transform:translateY(-5px);
}

/* =========================
   RESEARCH GRID
========================= */

.research-section{

  padding:100px 0;
}

.research-container{

  width:min(1100px,90%);

  margin:auto;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:30px;
}

.research-card{

  background:var(--paper);

  border:1px solid var(--border);

  border-radius:32px;

  overflow:hidden;

  transition:.35s;

  display:flex;

  flex-direction:column;

  justify-content:space-between;
}

.research-card:hover{

  transform:translateY(-5px);
}

.research-image{

  width:100%;

  height:220px;

  object-fit:contain;

  padding:20px;

  background:#f8f4ee;
}

.research-content{

  padding:32px;
}

.research-content h3,
.empty-content h3{

  font-family:'Playfair Display', serif;

  font-size:2rem;

  margin-bottom:14px;

  color:var(--accent);
}

.research-content p,
.empty-content p{

  color:var(--muted);

  margin-bottom:28px;
}

/* =========================
   LINKS / PLATFORMS
========================= */

.links{

  padding:110px 0;
}

.links-container{

  width:min(1120px,90%);

  margin:auto;
}

.links-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:22px;

  padding:0 10px;
}

.link-box{

  background:var(--paper);

  border:1px solid var(--border);

  border-radius:24px;

  padding:28px 20px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  transition:.35s;

  box-shadow:
  0 10px 30px rgba(0,0,0,.04),
  0 2px 8px rgba(0,0,0,.03);

  transform-style:preserve-3d;
}

.link-box:hover{

  transform:
  translateY(-6px)
  rotateX(4deg)
  rotateY(-4deg);

  box-shadow:
  0 25px 50px rgba(0,0,0,.10),
  0 10px 20px rgba(0,0,0,.06);

  background:#f8f4ee;
}

.link-icon{

  font-size:2.2rem;

  margin-bottom:16px;

  color:var(--accent);

  transition:.35s;
}

.link-box:hover .link-icon{

  transform:translateZ(18px) scale(1.08);
}

.link-box p{

  font-size:1rem;

  color:var(--text);

  letter-spacing:.3px;
}

/* =========================
   FOOTER
========================= */

footer{

  border-top:1px solid var(--border);

  padding:42px 0;
}

footer p{

  text-align:center;

  color:var(--muted);

  font-size:.92rem;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  *{
    min-width:0;
  }

  nav{

    width:94%;

    flex-direction:column;

    align-items:center;

    gap:14px;
  }

  nav ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;
  }

  .hero{

    width:94%;

    height:210px;

    margin:18px auto;

    border-radius:22px;
  }

  .hero-overlay{

    padding:28px 22px;
  }

  .intro,
  .book,
  .library,
  .links,
  .research-section{

    padding:70px 0;
  }

  .intro-container,
  .book-container,
  .research-container,
  .links-grid{

    grid-template-columns:1fr;

    gap:24px;
  }

  .intro-text h2,
  .book-text h2,
  .text-block h3{

    font-size:2.2rem;

    line-height:1.2;
  }

  .text-block,
  .library-card,
  .research-card,
  .link-box{

    width:100%;

    padding:24px 18px;

    border-radius:24px;
  }

  .book-buttons{

    flex-direction:column;
  }

  .link-box:hover,
  .research-card:hover,
  .library-card:hover{

    transform:translateY(-3px);
  }

  footer{

    padding:30px 0;
  }

  footer p{

    font-size:.85rem;
  }
}
```