:root {
  --wine:#5b0711;
  --gold:#c99724;
  --cream:#f6f0e7;
  --paper:#fbf8f3;
  --ink:#262120;
  --muted:#746b65;
  --line:#ddd1c4;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6
}

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

.nueva-orilla-shell {
  background:var(--paper);
  min-height:100vh
}

.skip {
  position:fixed;
  top:-80px
}

.editorial-header,.reader-header {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:76px;
  padding:12px clamp(20px,5vw,70px);
  background:rgba(251,248,243,.96);
  border-bottom:1px solid var(--line)
}

.editorial-brand {
  display:flex;
  align-items:center;
  gap:13px
}

.editorial-brand img {
  width:46px;
  height:46px;
  object-fit:contain
}

.editorial-brand span {
  display:grid
}

.editorial-brand strong {
  color:var(--wine);
  font:700 14px var(--serif);
  letter-spacing:.11em
}

.editorial-brand small {
  color:var(--gold);
  font-size:8px;
  letter-spacing:.1em
}

.edition-nav {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:13px
}

.home-link {
  padding:9px 14px;
  border:1px solid var(--line)
}

.mobile-nav {
  display:none;
  border:0;
  background:none;
  color:var(--wine);
  font-weight:700
}

.portal-hero {
  position:relative;
  min-height:76vh;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:end;
  gap:8vw;
  padding:clamp(90px,12vw,170px) clamp(24px,7vw,110px) 80px;
  overflow:hidden;
  background:var(--wine);
  color:#fff
}

.portal-hero:after {
  content:"";
  position:absolute;
  right:-8%;
  top:-20%;
  width:52vw;
  height:95vh;
  border:1px solid rgba(201,151,36,.35);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.024),0 0 0 150px rgba(255,255,255,.02)
}

.hero-copy,.publish-card {
  position:relative;
  z-index:1
}

.hero-side {
  position:relative;
  z-index:1;
  display:grid;
  gap:22px;
  justify-items:center
}

.hero-cover {
  width:min(100%,330px);
  margin:0
}

.hero-cover img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(201,151,36,.42);
  box-shadow:0 24px 55px rgba(18,2,4,.42)
}

.label {
  margin:0;
  color:var(--gold);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase
}

.portal-hero h1 {
  margin:14px 0 18px;
  font:400 clamp(70px,10vw,150px)/.83 var(--serif);
  letter-spacing:-.055em
}

.portal-hero .lead {
  margin:0;
  max-width:760px;
  font:400 clamp(21px,2.4vw,32px)/1.35 var(--serif);
  color:#f4e8dc
}

.intro {
  max-width:690px;
  color:#d8c7bf
}

.actions {
  margin-top:30px
}

.btn {
  display:inline-flex;
  padding:12px 20px;
  min-height:48px;
  align-items:center;
  font-weight:700;
  font-size:13px
}

.btn.gold {
  background:var(--gold);
  color:#201609
}

.btn.wine {
  background:var(--wine);
  color:#fff
}

.publish-card {
  padding:28px;
  border:1px solid rgba(201,151,36,.42);
  background:rgba(32,4,7,.42)
}

.publish-card span,.publish-card small {
  display:block;
  color:#d8c7bf
}

.publish-card strong {
  display:block;
  margin:8px 0;
  font:400 28px var(--serif)
}

.progress {
  height:4px;
  margin:22px 0 10px;
  background:rgba(255,255,255,.18)
}

.progress i {
  display:block;
  height:100%;
  background:var(--gold)
}

.section {
  padding:clamp(72px,9vw,130px) clamp(24px,7vw,110px)
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6vw;
  align-items:end;
  margin-bottom:55px
}

.section-heading h2,.featured h2,.subscribe h2 {
  margin:10px 0;
  font:400 clamp(39px,5vw,70px)/1.02 var(--serif)
}

.section-heading>p {
  color:var(--muted)
}

.season-tabs {
  display:flex;
  gap:8px;
  margin-bottom:28px
}

.season-tab {
  padding:11px 15px;
  border:1px solid var(--line);
  background:transparent
}

.season-tab[aria-selected=true] {
  background:var(--wine);
  color:#fff
}

.season-panel {
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:5vw;
  padding-top:30px;
  border-top:1px solid var(--line)
}

.season-meta span {
  color:var(--gold);
  font-size:12px
}

.season-meta h3 {
  font:400 38px var(--serif)
}

.season-meta blockquote {
  color:var(--wine);
  font:italic 19px var(--serif)
}

.volume-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.volume-card {
  padding:24px;
  min-height:170px;
  border:1px solid var(--line);
  background:#fff
}

.volume-card.available {
  border-top:4px solid var(--gold)
}

.volume-card span {
  color:var(--gold);
  font-size:11px
}

.volume-card h4 {
  font:400 24px var(--serif);
  margin:10px 0
}

.volume-card small {
  color:var(--muted)
}

.volume-card a {
  display:block;
  margin-top:22px;
  color:var(--wine);
  font-weight:700
}

.featured {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vw;
  background:var(--cream)
}

.featured .subtitle {
  color:var(--wine);
  font:italic 24px var(--serif)
}

.facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:32px 0
}

.fact {
  padding:18px;
  border-top:2px solid var(--gold);
  background:#fff
}

.fact small {
  display:block;
  color:var(--muted)
}

.chapters {
  list-style:none;
  padding:0
}

.chapters li {
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line)
}

.chapter-number {
  color:var(--gold);
  font-size:12px;
  font-weight:700
}

.chapters a {
  font:19px var(--serif)
}

.status {
  font-size:11px;
  text-transform:uppercase;
  color:var(--muted)
}

.status.live {
  color:var(--wine);
  font-weight:700
}

.chapter-soon {
  opacity:.58
}

.concepts {
  background:var(--ink);
  color:#fff
}

.concept-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#4e4845
}

.concept {
  padding:25px;
  min-height:210px;
  background:var(--ink)
}

.concept span {
  color:var(--gold)
}

.concept h3 {
  font:25px var(--serif)
}

.concept p {
  color:#c9c0ba;
  font-size:14px
}

.subscribe {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6vw;
  background:var(--wine);
  color:#fff
}

.editorial-collection {
  background:var(--cream)
}

.collection-heading {
  max-width:820px;
  margin:0 auto 52px;
  text-align:center
}

.collection-heading h2 {
  margin:10px 0 18px;
  color:var(--wine);
  font:400 clamp(39px,5vw,70px)/1.02 var(--serif)
}

.collection-heading>p:last-child {
  color:var(--muted);
  font:20px/1.55 var(--serif)
}

.collection-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,42px);
  max-width:1050px;
  margin:auto;
  align-items:start
}

.collection-cover {
  margin:0;
  text-align:center
}

.collection-cover img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2/3;
  object-fit:cover;
  box-shadow:0 20px 45px rgba(38,33,32,.2)
}

.collection-cover figcaption {
  margin-top:18px;
  color:var(--wine);
  font:24px var(--serif)
}

.disclaimer {
  margin:0;
  padding:30px;
  text-align:center;
  background:#eee7df;
  color:var(--muted)
}

.site-footer {
  display:flex;
  justify-content:space-between;
  padding:34px clamp(24px,7vw,110px);
  background:#170f0f;
  color:#c9c0ba;
  font-size:12px
}

.site-footer a {
  color:var(--gold)
}

.volume-page {
  padding:45px clamp(24px,7vw,110px) 100px;
  background:var(--cream)
}

.breadcrumbs {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px
}

.volume-page>.breadcrumbs {
  margin-bottom:65px
}

.volume-number {
  display:block;
  color:var(--gold);
  font:28px var(--serif)
}

.volume-page h1,.reader-hero h1 {
  color:var(--wine);
  font:400 clamp(52px,8vw,100px)/.92 var(--serif);
  letter-spacing:-.045em
}

.volume-page .lead {
  color:var(--wine);
  font:italic 24px var(--serif)
}

.volume-meta {
  display:flex;
  gap:40px;
  padding:22px 0;
  margin:35px 0;
  border-block:1px solid var(--line)
}

.volume-meta strong {
  font:28px var(--serif);
  color:var(--wine)
}

.volume-story {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:65px 0
}

.volume-story>div {
  padding:32px;
  background:#fff
}

.volume-story h2 {
  font:26px var(--serif);
  color:var(--wine)
}

.chapter-list {
  max-width:900px;
  margin:auto
}

.chapter-list h2 {
  font:60px var(--serif)
}

.chapter-list>a,.upcoming {
  display:grid;
  grid-template-columns:55px 1fr auto;
  gap:20px;
  align-items:center;
  padding:22px 8px;
  border-top:1px solid var(--line)
}

.chapter-list>a>span,.upcoming>span {
  font:28px var(--serif);
  color:var(--gold)
}

.chapter-list small {
  color:var(--wine);
  text-transform:uppercase
}

.chapter-list h3 {
  font:25px var(--serif);
  margin:5px 0
}

.upcoming {
  opacity:.55
}

.fiction-note {
  max-width:900px;
  margin:60px auto 0;
  padding:16px 22px;
  border-left:3px solid var(--gold);
  background:#fff;
  color:var(--muted)
}

.reader-header {
  background:rgba(255,255,255,.96)
}

.reader-position {
  text-align:center
}

.reader-position span,.reader-position small {
  display:block
}

.reader-position span {
  color:var(--wine);
  font-weight:700
}

.reader-position small {
  color:var(--muted)
}

.reading-bar {
  position:fixed;
  top:0;
  left:0;
  z-index:25;
  height:3px;
  background:var(--gold)
}

.reader-hero {
  padding:clamp(76px,9vw,125px) 22px 52px;
  text-align:center;
  background:linear-gradient(#f8f3eb,#fff)
}

.reader-hero h1 {
  max-width:900px;
  margin:25px auto 14px;
  color:var(--ink)
}

.reader-hero .breadcrumbs {
  justify-content:center
}

.dek {
  color:var(--wine);
  font:italic 22px var(--serif)
}

.reader-meta {
  display:flex;
  justify-content:center;
  gap:24px;
  color:var(--muted);
  font-size:12px
}

.reader {
  max-width:740px;
  margin:auto;
  padding:50px 24px 90px;
  background:#fff
}

.reader p {
  font:19px/1.82 var(--serif);
  color:#302a28
}

.reader p:first-child:first-letter {
  float:left;
  margin:8px 8px 0 0;
  color:var(--wine);
  font-size:70px;
  line-height:.65
}

.reader-divider {
  display:flex;
  gap:18px;
  align-items:center;
  margin:58px 0;
  color:var(--gold)
}

.reader-divider:before,.reader-divider:after {
  content:"";
  height:1px;
  flex:1;
  background:var(--line)
}

.after-story {
  padding:clamp(74px,9vw,120px) max(24px,calc((100vw - 980px)/2));
  background:var(--cream)
}

.after-story h2 {
  font:60px var(--serif)
}

.insight-grid,.chapter-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.insight {
  padding:26px;
  background:#fff;
  border-top:3px solid var(--gold)
}

.insight.wide {
  grid-column:1/-1
}

.insight h3 {
  color:var(--wine);
  font-size:12px;
  text-transform:uppercase
}

.chapter-nav {
  margin-top:32px
}

.chapter-nav a,.chapter-nav span {
  padding:20px;
  border:1px solid var(--line);
  background:#fff
}

.chapter-nav strong {
  font:19px var(--serif);
  color:var(--wine)
}

@media(max-width:900px) {
  .edition-nav {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    padding:22px;
    background:var(--paper);
    flex-direction:column
  }

  .edition-nav.open {
    display:flex
  }

  .mobile-nav {
    display:block
  }

  .portal-hero,.featured,.subscribe,.section-heading,.season-panel {
    grid-template-columns:1fr
  }

  .hero-side {
    justify-items:start
  }

  .hero-cover {
    width:min(72vw,330px)
  }

  .concept-grid {
    grid-template-columns:1fr 1fr
  }

}
@media(max-width:600px) {
  .editorial-brand small {
    display:none
  }

  .portal-hero h1 {
    font-size:72px
  }

  .volume-grid,.concept-grid,.facts,.insight-grid,.chapter-nav,.volume-story {
    grid-template-columns:1fr
  }

  .collection-grid {
    grid-template-columns:1fr;
    max-width:330px
  }

  .insight.wide {
    grid-column:auto
  }

  .site-footer {
    flex-direction:column;
    gap:20px
  }

  .reader-header>a:last-child {
    display:none
  }

  .reader p {
    font-size:17.5px
  }

  .volume-meta {
    flex-wrap:wrap
  }

}

.progress i {
   width: 100%;
}

.reading-bar {
   width: 0;
}