:root{
  --ink:#17130f;
  --paper:#f3eadc;
  --paper2:#fbf7ef;
  --muted:#746757;
  --gold:#a9783a;
  --wine:#4f1f1d;
  --charcoal:#26211c;
  --line:rgba(23,19,15,.16);
  --shadow:0 24px 70px rgba(23,19,15,.18);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);

  background:
    radial-gradient(circle at top left, rgba(169,120,58,.16), transparent 35%),
    linear-gradient(180deg, #fbf7ef 0%, #f1e4d3 42%, #efe3d4 100%);

  font-family:var(--sans);
  line-height:1.55;
}

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

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

/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:20;

  backdrop-filter:blur(14px);

  background:rgba(251,247,239,.82);

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

.nav{
  max-width:1180px;
  margin:auto;

  padding:12px 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  font-family:var(--serif);
  font-size:27px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.navlinks{
  display:flex;
  gap:22px;
  align-items:center;

  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:#4a4035;
}

.navlinks a:hover{
  color:var(--gold);
}

/* BUTTONS */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 18px;

  border:1px solid rgba(169,120,58,.65);

  background:var(--gold);
  color:#fff;

  border-radius:999px;

  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:700;

  box-shadow:0 10px 26px rgba(169,120,58,.18);
}

.btn.secondary{
  background:transparent;
  color:var(--ink);
  box-shadow:none;
}

/* ONLY HERO SECONDARY BUTTON */

.hero .btn.secondary{
  background:rgba(255,255,255,.08);
  color:#ffffff;

  border:1px solid rgba(255,255,255,.45);

  backdrop-filter:blur(4px);
}

.hero .btn.secondary:hover{
  background:rgba(255,255,255,.18);

  border-color:rgba(255,255,255,.75);
}

/* HERO */

.hero{
  min-height:74vh;

  display:grid;
  place-items:center;

  padding:84px 22px 64px;

  position:relative;
  overflow:hidden;
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(8,10,18,.68) 0%,
      rgba(8,10,18,.45) 35%,
      rgba(8,10,18,.55) 65%,
      rgba(8,10,18,.82) 100%
    ),
    url('assets/hero-rome.jpg');

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  opacity:1;
}

.hero:after{
  content:"";
  position:absolute;

  inset:auto 0 0;

  height:180px;

  background:linear-gradient(
    0deg,
    #fbf7ef,
    transparent
  );
}

.hero-inner{
  width:min(1180px,100%);

  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.08fr .92fr;

  gap:44px;
  align-items:center;
}

.kicker{
  color:#e8d0ac;

  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
}

.hero h1{
  margin:10px 0 14px;

  color:#fff;

  font-family:var(--serif);
  font-weight:500;
  line-height:.94;

  font-size:clamp(54px,8vw,116px);

  letter-spacing:-.05em;

  text-shadow:0 4px 18px rgba(0,0,0,.45);
}

.hero .dek{
  max-width:670px;

  color:rgba(255,255,255,.9);

  font-family:var(--serif);

  font-size:clamp(25px,3vw,39px);

  line-height:1.08;

  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.hero p{
  color:rgba(255,255,255,.86);

  font-size:18px;

  max-width:610px;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;

  margin-top:28px;
}

.feature-card{
  justify-self:end;

  width:min(410px,100%);

  background:rgba(251,247,239,.9);

  padding:18px;

  border:1px solid rgba(255,255,255,.5);

  box-shadow:var(--shadow);

  border-radius:4px;
}

.cover-wrap{
  aspect-ratio:2/3;

  background:#d7c6ad;

  display:grid;
  place-items:center;

  overflow:hidden;
}

.cover-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.feature-card h2{
  font-family:var(--serif);

  font-size:40px;
  line-height:1;

  margin:18px 0 8px;
}

.feature-card p{
  color:var(--muted);

  font-size:15px;

  margin:0 0 16px;
}

/* SECTIONS */

.section{
  max-width:1180px;
  margin:auto;

  padding:76px 22px;
}

.section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;

  margin-bottom:26px;
}

.eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;

  color:var(--gold);

  font-weight:800;
}

h2.section-heading{
  font-family:var(--serif);

  font-size:clamp(38px,5vw,70px);

  font-weight:500;
  line-height:1;

  margin:6px 0 0;

  letter-spacing:-.035em;
}

/* BOOKS GRID */

.books-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:18px;
}

.book-card{
  background:rgba(255,252,246,.72);

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

  padding:14px;

  transition:.18s transform ease,
             .18s box-shadow ease;
}

.book-card:hover{
  transform:translateY(-4px);

  box-shadow:0 18px 50px rgba(23,19,15,.13);
}

.book-card .thumb{
  aspect-ratio:2/3;

  background:#d2c0a7;

  margin-bottom:14px;

  overflow:hidden;
}

.book-card .thumb img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.book-card h3{
  font-family:var(--serif);

  font-size:29px;
  line-height:1;

  margin:0 0 7px;
}

.book-card p{
  font-size:14px;

  color:var(--muted);

  margin:0 0 12px;
}

.meta{
  font-size:11px;

  letter-spacing:.15em;
  text-transform:uppercase;

  color:var(--gold);

  font-weight:800;
}

/* WORLDS STRIP */

.worlds-strip{
  max-width:1280px;
  margin:20px auto 80px;
  padding:0 22px;
}

.worlds-header{
  margin-bottom:24px;
}

.worlds-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.world-card{
  position:relative;
  overflow:hidden;
  aspect-ratio:21/9;
  background:#111;
  cursor:pointer;
}

.world-card img{
  width:100%;
  height:100%;
  object-fit:cover;

  transition:transform .7s ease,
             opacity .5s ease;

  opacity:.92;
}

.world-card:hover img{
  transform:scale(1.05);
  opacity:1;
}

.world-card:after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.15) 40%,
      rgba(0,0,0,.62) 100%
    );
}

.world-label{
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:2;

  color:#fff;

  font-family:var(--serif);

  font-size:28px;
  letter-spacing:.01em;

  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

.world-label span{
  display:block;
}

.world-label em{
  display:block;
  margin-top:3px;

  font-family:var(--serif);
  font-size:15px;
  font-style:italic;
  font-weight:400;
  letter-spacing:.02em;

  color:rgba(255,255,255,.78);

  text-shadow:0 2px 8px rgba(0,0,0,.55);
}

/* ABOUT SPLIT */

.split{
  display:grid;

  grid-template-columns:.85fr 1.15fr;

  gap:46px;
  align-items:center;

  background:rgba(255,252,246,.52);

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

.portrait{
  min-height:640px;

  background:
  linear-gradient(
    to bottom,
    rgba(0,0,0,.06),
    rgba(0,0,0,.18)
  ),
  url('assets/jeff-nelson.jpg') 68% center/cover no-repeat;

  position:relative;
  overflow:hidden;
}

.copy{
  padding:64px 22px 64px 0;

  max-width:650px;
}

.copy h2{
  font-family:var(--serif);

  font-size:clamp(38px,5vw,72px);

  line-height:.96;

  font-weight:500;

  margin:0 0 22px;

  letter-spacing:-.04em;
}

.copy p{
  font-size:18px;

  color:#493f35;
}

/* QUOTE BAND */

.quote-band{
  margin:0;

  padding:72px 22px;

  background:var(--charcoal);

  color:#f9ead5;

  text-align:center;
}

.quote-band p{
  max-width:880px;

  margin:auto;

  font-family:var(--serif);

  font-size:clamp(34px,4.6vw,72px);

  line-height:1.02;

  letter-spacing:-.035em;
}

/* NEWSLETTER */

.newsletter{
  max-width:980px;

  margin:76px auto;

  padding:54px 34px;

  text-align:center;

  background:
    linear-gradient(
      180deg,
      rgba(255,252,246,.9),
      rgba(238,224,204,.86)
    );

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

  box-shadow:var(--shadow);
}

.newsletter h2{
  font-family:var(--serif);

  font-size:clamp(38px,5vw,68px);

  font-weight:500;
  line-height:1;

  margin:0 0 12px;
}

.newsletter p{
  max-width:720px;

  margin:0 auto 24px;

  color:var(--muted);

  font-size:18px;
}

/* FOOTER */

.footer{
  border-top:1px solid var(--line);

  padding:38px 22px;

  color:#5d5145;
}

.footer-inner{
  max-width:1180px;

  margin:auto;

  display:flex;
  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;
}

/* BOOK PAGES */

.book-hero{
  max-width:1180px;
  margin:auto;

  padding:76px 22px 60px;

  display:grid;
  grid-template-columns:360px 1fr;
  gap:56px;
  align-items:center;
}

.book-hero .cover{
  box-shadow:var(--shadow);
  background:#d7c6ad;
}

.book-hero .cover img{
  width:100%;
  height:auto;
}

.book-hero h1{
  font-family:var(--serif);
  font-size:clamp(52px,7vw,96px);
  line-height:.9;
  font-weight:500;

  margin:8px 0 14px;

  letter-spacing:-.055em;
}

.book-hero .tagline{
  font-family:var(--serif);
  font-size:clamp(26px,3vw,42px);
  line-height:1.06;

  color:var(--wine);

  margin:0 0 18px;
}

.book-hero p{
  font-size:18px;
  color:#4b4137;
  max-width:730px;
}

.content{
  max-width:850px;
  margin:auto;

  padding:20px 22px 26px;
}

.content p{
  font-size:19px;
  color:#40382f;
}

.content h2,
.content h3{
  font-family:var(--serif);
  font-weight:500;
  color:var(--ink);
}

.content h2{
  font-size:48px;
  margin-top:48px;
}

.content h3{
  font-size:34px;
  margin-top:36px;
}

/* BOOK PAGE IMAGES */

.book-image-section{
  max-width:1040px;

  margin:0 auto 22px;

  padding:0 22px;
}

.content + .book-image-section{
  margin-top:-6px;
}

.book-image-section img{
  width:100%;

  aspect-ratio:16/9;
  object-fit:cover;

  box-shadow:0 18px 50px rgba(23,19,15,.18);

  border:1px solid rgba(23,19,15,.12);
}

.image-caption{
  margin-top:6px;

  font-family:var(--serif);
  font-size:16px;
  font-style:italic;

  color:var(--muted);

  text-align:center;
}

/* RESPONSIVE */

@media(max-width:900px){

  .hero-inner,
  .split,
  .book-hero{
    grid-template-columns:1fr;
  }

  .feature-card{
    justify-self:start;
  }

  .books-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .worlds-grid{
    grid-template-columns:1fr 1fr;
  }

  .world-card{
    aspect-ratio:16/9;
  }

  .portrait{
    min-height:420px;
  }

  .copy{
    padding:44px 22px;
  }
}

@media(max-width:640px){

  .navlinks{
    display:none;
  }

  .hero{
    padding-top:54px;
  }

  .books-grid{
    grid-template-columns:1fr;
  }

  .worlds-grid{
    grid-template-columns:1fr;
  }
}
/* READING ROOM INDEX */

.reading-room-hero{
  min-height:68vh;

  display:grid;
  align-items:end;

  padding:120px 22px 70px;

  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(8,10,14,.18) 0%,
      rgba(8,10,14,.35) 45%,
      rgba(8,10,14,.78) 100%
    ),
    url('assets/reading-room-hero.jpg') center center/cover no-repeat;
}

.reading-room-hero-inner{
  width:min(1180px,100%);
  margin:auto;

  position:relative;
  z-index:2;
}

.reading-room-hero h1{
  max-width:900px;

  margin:10px 0 16px;

  color:#fff;

  font-family:var(--serif);
  font-size:clamp(52px,7.5vw,108px);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.055em;

  text-shadow:0 4px 20px rgba(0,0,0,.5);
}

.reading-room-hero p{
  max-width:760px;

  margin:0;

  color:rgba(255,255,255,.86);

  font-family:var(--serif);
  font-size:clamp(24px,3vw,38px);
  line-height:1.1;

  text-shadow:0 3px 14px rgba(0,0,0,.55);
}

.reading-intro{
  max-width:900px;
  margin:70px auto 34px;
  padding:0 22px;
}

.reading-intro p{
  margin:0;

  font-family:var(--serif);
  font-size:clamp(26px,3vw,42px);
  line-height:1.14;
  color:#362d25;

  letter-spacing:-.02em;
}

.reading-wrap{
  max-width:1180px;
  margin:auto;
  padding:32px 22px 90px;
}

.reading-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.reading-card{
  display:block;

  min-height:310px;

  padding:28px;

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

  background:
    linear-gradient(
      180deg,
      rgba(255,252,246,.84),
      rgba(242,230,212,.72)
    );

  box-shadow:0 18px 48px rgba(23,19,15,.08);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.reading-card:hover{
  transform:translateY(-5px);

  box-shadow:0 26px 64px rgba(23,19,15,.15);

  background:
    linear-gradient(
      180deg,
      rgba(255,252,246,.95),
      rgba(239,224,202,.84)
    );
}

.reading-card .meta{
  margin-bottom:22px;
}

.reading-card h2{
  margin:0 0 16px;

  font-family:var(--serif);
  font-size:38px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.035em;
}

.reading-card p{
  margin:0;

  color:var(--muted);

  font-size:15px;
}

@media(max-width:900px){

  .reading-room-hero{
    min-height:58vh;
  }

  .reading-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){

  .reading-room-hero{
    min-height:62vh;
    padding:90px 22px 54px;
  }

  .reading-grid{
    grid-template-columns:1fr;
  }

  .reading-card{
    min-height:auto;
  }
}
/* ESSAY PAGES */

.essay-hero{
  min-height:64vh;

  display:grid;
  align-items:end;

  padding:120px 22px 70px;

  position:relative;
  overflow:hidden;
}

.rome-hero{
  background:
    linear-gradient(
      180deg,
      rgba(7,8,10,.14) 0%,
      rgba(7,8,10,.38) 45%,
      rgba(7,8,10,.80) 100%
    ),
    url('assets/rome-reading-hero.jpg') center center/cover no-repeat;
}

.essay-hero-inner{
  width:min(1180px,100%);
  margin:auto;

  position:relative;
  z-index:2;
}

.essay-hero h1{
  max-width:900px;

  margin:10px 0 16px;

  color:#fff;

  font-family:var(--serif);
  font-size:clamp(54px,7vw,102px);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.055em;

  text-shadow:0 4px 24px rgba(0,0,0,.55);
}

.essay-hero p{
  max-width:760px;

  margin:0;

  color:rgba(255,255,255,.88);

  font-family:var(--serif);
  font-size:clamp(24px,3vw,38px);
  line-height:1.08;

  text-shadow:0 3px 18px rgba(0,0,0,.55);
}

.essay-intro{
  max-width:900px;

  margin:74px auto 30px;
  padding:0 22px;
}

.essay-intro p{
  margin:0 0 30px;

  font-family:var(--serif);
  font-size:clamp(28px,3vw,42px);
  line-height:1.12;
  letter-spacing:-.02em;

  color:#352d26;
}

.essay-content{
  max-width:980px;

  margin:auto;
  padding:20px 22px 80px;
}

.book-entry{
  padding:48px 0;

  border-top:1px solid rgba(80,60,40,.12);
}

.book-label{
  margin-bottom:16px;

  color:var(--accent);

  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.book-entry h2{
  margin:0 0 18px;

  font-family:var(--serif);
  font-size:clamp(42px,5vw,62px);
  font-weight:500;
  line-height:.95;
  letter-spacing:-.04em;
}

.book-entry p{
  max-width:760px;

  margin:0 0 18px;

  color:#4d443c;

  font-size:18px;
  line-height:1.8;
}

.featured-entry{
  position:relative;

  padding-left:30px;
}

.featured-entry::before{
  content:"";

  position:absolute;
  left:0;
  top:50px;
  bottom:50px;

  width:2px;

  background:linear-gradient(
    to bottom,
    rgba(183,125,55,.85),
    rgba(183,125,55,.18)
  );
}

.essay-button{
  display:inline-block;

  margin-top:10px;
  padding:14px 24px;

  border:1px solid rgba(183,125,55,.55);

  color:#231b15;

  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;

  transition:
    background .18s ease,
    transform .18s ease;
}

.essay-button:hover{
  background:rgba(183,125,55,.08);

  transform:translateY(-2px);
}

.essay-closing{
  max-width:900px;

  margin:0 auto 110px;
  padding:0 22px;
}

.essay-closing p{
  margin:0;

  font-family:var(--serif);
  font-size:clamp(32px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.03em;

  color:#2f271f;
}

@media(max-width:760px){

  .essay-hero{
    min-height:58vh;
    padding:90px 22px 54px;
  }

  .featured-entry{
    padding-left:0;
  }

  .featured-entry::before{
    display:none;
  }

  .book-entry p{
    font-size:17px;
  }
}
.ripley-hero{
  background:
    linear-gradient(
      180deg,
      rgba(5,4,4,.18) 0%,
      rgba(5,4,4,.42) 42%,
      rgba(5,4,4,.86) 100%
    ),
    url('assets/ripley-reading-hero.jpg') center center/cover no-repeat;
}

.essay-hero h1 em{
  font-style:italic;
  font-weight:400;
}

.back-link{
  display:inline-block;
  margin-top:38px;

  color:var(--gold);

  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.back-link:hover{
  color:var(--wine);
}
.beautiful-ruins-hero{
  background:
    linear-gradient(
      180deg,
      rgba(8,7,5,.10) 0%,
      rgba(8,7,5,.32) 42%,
      rgba(8,7,5,.78) 100%
    ),
    url('assets/beautiful-ruins-hero.jpg') center center/cover no-repeat;
}
.old-money-hero{
  background:
    linear-gradient(
      180deg,
      rgba(8,5,3,.12) 0%,
      rgba(8,5,3,.36) 42%,
      rgba(8,5,3,.84) 100%
    ),
    url('assets/old-money-hero.jpg') center center/cover no-repeat;
}
.wealth-love-hero{
  background:
    linear-gradient(
      180deg,
      rgba(6,6,10,.12) 0%,
      rgba(6,6,10,.36) 42%,
      rgba(6,6,10,.84) 100%
    ),
    url('assets/wealth-class-forbidden-love-hero.jpg') center center/cover no-repeat;
}

.mexico-noir-hero{
  background:
    linear-gradient(
      180deg,
      rgba(4,7,9,.12) 0%,
      rgba(4,7,9,.40) 42%,
      rgba(4,7,9,.88) 100%
    ),
    url('assets/mexico-noir-hero.jpg') center center/cover no-repeat;
}

/* READING ROOM PREVIEW */

.reading-room-preview{
  position:relative;

  margin:80px 0;

  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);

  overflow:hidden;
  border-radius:28px;

  background:#111;
}

.reading-room-image img{
  width:100%;
  height:auto;
  display:block;

  aspect-ratio:21 / 9;
  object-fit:cover;
}

.reading-room-overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:48px; 

  background:
    linear-gradient(
      to bottom,
      rgba(7,7,10,.22),
      rgba(7,7,10,.52)
    );
}

.reading-room-copy{
  max-width:760px;
}

.reading-room-copy .eyebrow{
  color:#d2b07a;
  margin-bottom:18px;
}

.reading-room-copy h2{
  color:#f5f1ea;

  margin-bottom:24px;

  font-size:clamp(2.6rem,4vw,5rem);
  line-height:.98;
}

.reading-room-copy p{
  color:rgba(245,241,234,.88);

  font-size:1.08rem;
  line-height:1.8;

  max-width:620px;
  margin:0 auto 34px;
}

.btn.light{
  border:1px solid rgba(255,255,255,.42);
  color:#fff;
}

.btn.light:hover{
  background:rgba(255,255,255,.08);
}

@media (max-width:900px){

  .reading-room-preview{
    margin:55px 0 80px;
    border-radius:18px;
  }
  

  .reading-room-overlay{
    padding:34px 22px;
  }

  .reading-room-copy h2{
    line-height:1.05;
  }

  .reading-room-copy p{
    font-size:1rem;
    line-height:1.7;
  }

}