@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --books-navy:#0c2038;
  --books-navy-deep:#071525;
  --books-gold:#aa761d;
  --books-gold-light:#ddb45e;
  --books-cream:#f8f2e8;
  --books-paper:#fffdf8;
  --books-ink:#18202a;
  --books-muted:#686b67;
  --books-plum:#4c183e;
  --books-line:rgba(12,32,56,.13);
}

html{scroll-behavior:smooth}
body{background:#fbf8f2;color:var(--books-ink)}
.books-header{background:var(--books-navy-deep)}
.books-nav-home{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:rgba(255,255,255,.8)!important;
  font-size:11px!important;
  font-weight:700;
}
.books-nav-home:hover{border-color:var(--books-gold-light);color:#f4d783!important}

.books-hero{
  position:relative;
  overflow:hidden;
  padding:88px 0 92px;
  background:
    radial-gradient(circle at 88% 15%,rgba(119,55,141,.11),transparent 28%),
    radial-gradient(circle at 12% 80%,rgba(218,174,89,.14),transparent 30%),
    linear-gradient(135deg,#fcf8f0 0%,#efe3d3 100%);
}
.books-hero:before{
  content:"";
  position:absolute;
  left:-180px;
  bottom:-310px;
  width:560px;
  height:560px;
  border:1px solid rgba(170,118,29,.15);
  border-radius:50%;
}
.books-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:58px;
  align-items:center;
}
.books-hero-copy{max-width:670px}
.books-hero-copy h1{
  margin:14px 0 20px;
  max-width:660px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(47px,5vw,72px);
  line-height:.96;
  letter-spacing:-.035em;
  color:var(--books-navy);
}
.books-hero-lead{
  max-width:650px;
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(25px,2.5vw,36px);
  line-height:1.08;
  color:var(--books-gold);
}
.books-hero-volume-tags{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  margin-top:29px;
}
.books-hero-volume-tags span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  padding:0 14px 0 8px;
  border:1px solid rgba(12,32,56,.12);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:#454b48;
  font-size:11px;
  font-weight:700;
}
.books-hero-volume-tags b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:var(--books-navy);
  color:#f0c969;
  font-size:9px;
}
.books-hero-actions{display:flex;align-items:center;gap:24px;margin-top:31px}
.books-hero-collage{
  margin:0;
  overflow:hidden;
  border:1px solid rgba(12,32,56,.12);
  border-radius:27px;
  background:#fff;
  box-shadow:0 34px 80px rgba(37,29,20,.16);
}
.books-hero-collage img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.books-hero-collage figcaption{
  padding:13px 17px;
  color:#696962;
  font-size:10px;
  line-height:1.5;
}

.books-collection-section{background:#fff}
.books-centered-heading{
  max-width:850px;
  margin:0 auto 58px;
  text-align:center;
}
.books-centered-heading h2{margin-left:auto;margin-right:auto}
.books-centered-heading>p:last-child{
  max-width:760px;
  margin:20px auto 0;
  color:#5e625e;
  font-size:16px;
  line-height:1.75;
}
.books-timeline{
  display:grid;
  grid-template-columns:1fr 130px 1fr;
  gap:32px;
  align-items:center;
}
.books-timeline article{
  display:flex;
  gap:24px;
  min-height:230px;
  padding:34px;
  border:1px solid var(--books-line);
  border-radius:24px;
  background:var(--books-cream);
}
.books-timeline-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:50%;
  background:var(--books-navy);
  color:#f2cd76;
  font-family:"Cormorant Garamond",serif;
  font-size:25px;
}
.books-timeline small{
  display:block;
  color:var(--books-gold);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.books-timeline h3{
  margin:13px 0 12px;
  font-family:"Cormorant Garamond",serif;
  font-size:35px;
  line-height:1;
}
.books-timeline p{margin:0;color:#666a66;font-size:14px;line-height:1.7}
.books-timeline-line{position:relative;height:1px;background:rgba(12,32,56,.18)}
.books-timeline-line:before,.books-timeline-line:after{
  content:"";
  position:absolute;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--books-gold);
  transform:translateY(-50%);
}
.books-timeline-line:before{left:0}
.books-timeline-line:after{right:0}
.books-timeline-line span{
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  border:1px solid rgba(170,118,29,.35);
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
}
.books-timeline-line span:after{
  content:"→";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--books-gold);
  font-size:14px;
}

.books-inside-section{background:#f7f0e6}
.books-photo-mosaic{
  display:grid;
  grid-template-columns:1.15fr .85fr .85fr;
  grid-auto-rows:270px;
  gap:18px;
  margin-top:54px;
}
.books-photo{
  position:relative;
  overflow:hidden;
  margin:0;
  border-radius:22px;
  background:#ddd4c6;
  box-shadow:0 18px 45px rgba(51,40,27,.07);
}
.books-photo-wide{grid-column:span 2}
.books-photo-tall{grid-row:span 2}
.books-photo-stock{grid-column:span 2}
.books-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.books-photo:hover img{transform:scale(1.025)}
.books-photo-wide img{object-position:center 48%}
.books-photo-tall img{object-position:center 35%}
.books-photo-stock img{object-position:center 55%}
.books-photo figcaption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:14px;
  background:rgba(7,21,37,.78);
  backdrop-filter:blur(10px);
  color:rgba(255,255,255,.88);
  font-size:10px;
  line-height:1.45;
}

.books-visual-break{padding:76px 0;background:#fff}
.books-editorial-collage{
  max-width:920px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(12,32,56,.11);
  border-radius:32px;
  box-shadow:0 35px 80px rgba(39,30,19,.13);
}
.books-editorial-collage img{display:block;width:100%}

.books-volumes-section{background:#f9f5ee}
.books-volume-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.books-volume-card{
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--books-line);
  background:#fff;
  box-shadow:0 22px 65px rgba(48,37,24,.06);
}
.books-volume-card-two{background:var(--books-navy-deep);color:#fff;border-color:rgba(255,255,255,.1)}
.books-volume-cover{
  position:relative;
  min-height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:linear-gradient(135deg,#f7efe3,#e7dac8);
}
.books-volume-card-two .books-volume-cover{
  background:
    radial-gradient(circle at 80% 20%,rgba(221,180,94,.17),transparent 26%),
    linear-gradient(135deg,#132b49,#081728);
}
.books-volume-cover span{
  position:absolute;
  left:24px;
  top:22px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--books-navy);
  color:#f1ce78;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.books-volume-card-two .books-volume-cover span{background:#f0c96d;color:#071525}
.books-volume-cover img{
  width:min(72%,310px);
  max-height:340px;
  object-fit:contain;
  filter:drop-shadow(0 24px 28px rgba(31,24,18,.19));
}
.books-volume-content{padding:40px}
.books-volume-content h3{
  margin:10px 0 4px;
  font-family:"Cormorant Garamond",serif;
  font-size:48px;
  line-height:.95;
}
.books-volume-card-two h3{color:#fff}
.books-volume-content h4{
  margin:0 0 20px;
  font-family:"Cormorant Garamond",serif;
  font-size:23px;
  line-height:1.15;
  font-weight:500;
  color:var(--books-gold);
}
.books-volume-content>p:not(.eyebrow){color:#616560;font-size:14px;line-height:1.72}
.books-volume-card-two .books-volume-content>p:not(.eyebrow){color:rgba(255,255,255,.66)}
.books-volume-content ul{margin:24px 0 30px;padding:0;list-style:none}
.books-volume-content li{
  position:relative;
  padding:11px 0 11px 22px;
  border-bottom:1px solid rgba(12,32,56,.1);
  color:#4f5551;
  font-size:12px;
}
.books-volume-card-two li{border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.78)}
.books-volume-content li:before{
  content:"";
  position:absolute;
  left:1px;
  top:17px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--books-gold);
}

.books-why-section{background:#fff}
.books-why-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:90px;align-items:start}
.books-why-list article{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:20px;
  padding:25px 0;
  border-bottom:1px solid var(--books-line);
}
.books-why-list span{color:var(--books-gold);font-size:10px;font-weight:800;letter-spacing:.1em}
.books-why-list h3{margin:0 0 8px;font-family:"Cormorant Garamond",serif;font-size:30px;line-height:1}
.books-why-list p{margin:0;color:#656963;font-size:14px;line-height:1.65}

.books-authorship-section{
  background:linear-gradient(135deg,#2c132a,#081c35);
  color:#fff;
}
.books-authorship-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:center}
.books-authorship-copy h2{max-width:720px;color:#fff}
.books-authorship-copy p{max-width:730px;color:rgba(255,255,255,.67);font-size:16px;line-height:1.75}
.books-authorship-mark{
  position:relative;
  min-height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
}
.books-authorship-mark:before,.books-authorship-mark:after{
  content:"";
  position:absolute;
  border:1px solid rgba(221,180,94,.2);
  border-radius:50%;
}
.books-authorship-mark:before{inset:42px}
.books-authorship-mark:after{inset:88px}
.books-authorship-mark img{position:relative;z-index:2;width:120px}
.books-authorship-mark span{
  position:absolute;
  z-index:3;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:#0c2038;
  color:#f0ce7b;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.books-authorship-mark span:nth-of-type(1){top:28px;left:50%;transform:translateX(-50%)}
.books-authorship-mark span:nth-of-type(2){right:-18px;top:50%;transform:translateY(-50%)}
.books-authorship-mark span:nth-of-type(3){bottom:28px;left:50%;transform:translateX(-50%)}

.books-author-section{background:#f8f3ea}
.books-author-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;align-items:center}
.books-author-photo{
  overflow:hidden;
  max-width:420px;
  padding:12px;
  border-radius:220px 220px 28px 28px;
  background:#fff;
  box-shadow:0 30px 80px rgba(35,31,26,.12);
}
.books-author-photo img{
  width:100%;
  aspect-ratio:.82;
  object-fit:cover;
  object-position:center 25%;
  border-radius:205px 205px 19px 19px;
}
.books-author-copy h2{max-width:720px}
.books-author-copy>p{font-size:16px;line-height:1.75;color:#5d625e}

.books-final-section{padding:70px 0;background:var(--books-navy)}
.books-final-shell{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
  padding:54px 60px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:linear-gradient(135deg,#0d2746,#07182d);
  color:#fff;
}
.books-final-shell h2{color:#fff}
.books-final-shell p{color:rgba(255,255,255,.65)}
.books-final-actions{display:flex;flex-direction:column;gap:12px}

.books-footer{padding-top:68px}
.books-footer-grid{
  display:grid;
  grid-template-columns:minmax(240px,1.15fr) minmax(180px,.7fr) minmax(250px,1fr);
  gap:64px;
  align-items:start;
}
.books-footer-brand img{width:168px;margin-bottom:18px}
.books-footer-brand p{max-width:340px;margin:0;color:rgba(255,255,255,.62);font-size:14px;line-height:1.6}
.books-footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.books-footer-column strong{margin-bottom:8px;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.13em}
.books-footer-column a{color:rgba(255,255,255,.68);font-size:14px}
.books-footer-column a:hover{color:#f0cd7a}
.books-footer-bottom{align-items:flex-start;gap:42px}
.books-footer-bottom span:last-child{
  max-width:720px;
  margin-left:auto;
  text-align:right;
  font-size:10px;
  line-height:1.55;
  color:rgba(255,255,255,.45);
}

@media(max-width:1060px){
  .books-hero-grid,.books-why-grid,.books-authorship-grid,.books-author-grid{grid-template-columns:1fr}
  .books-hero-copy{max-width:820px}
  .books-hero-collage{max-width:900px}
  .books-volume-cards{grid-template-columns:1fr}
  .books-timeline{grid-template-columns:1fr}
  .books-timeline-line{height:70px;width:1px;margin:auto}
  .books-timeline-line:before{left:50%;top:0;transform:translateX(-50%)}
  .books-timeline-line:after{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%)}
  .books-timeline-line span{left:50%;top:50%}
  .books-timeline-line span:after{content:"↓"}
  .books-authorship-mark{max-width:430px;width:100%;margin:auto}
}
@media(max-width:900px){
  .books-photo-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:280px}
  .books-photo-wide,.books-photo-stock{grid-column:span 2}
  .books-photo-tall{grid-row:span 2}
  .books-footer-grid{grid-template-columns:1fr 1fr}
  .books-footer-brand{grid-column:1/-1}
  .books-final-shell{grid-template-columns:1fr}
}
@media(max-width:760px){
  .books-hero{padding:70px 0 62px}
  .books-hero-copy h1{font-size:clamp(43px,12vw,58px)}
  .books-hero-lead{font-size:clamp(24px,7.5vw,31px)}
  .books-hero-actions{align-items:flex-start;flex-direction:column}
  .books-photo-mosaic{grid-template-columns:1fr;grid-auto-rows:340px}
  .books-photo-wide,.books-photo-tall,.books-photo-stock{grid-column:auto;grid-row:auto}
  .books-photo-tall{height:500px}
  .books-timeline article{padding:28px}
  .books-volume-cover{min-height:330px;padding:32px}
  .books-volume-content{padding:30px}
  .books-volume-content h3{font-size:42px}
  .books-authorship-mark{min-height:330px}
  .books-final-shell{padding:34px 28px}
  .books-footer-grid{grid-template-columns:1fr;gap:36px}
  .books-footer-brand{grid-column:auto}
  .books-footer-bottom{flex-direction:column;gap:10px}
  .books-footer-bottom span:last-child{margin-left:0;text-align:left}
  .books-nav-home{width:100%;justify-content:center;margin-bottom:8px}
}
