/* Five roles and "Read the first pages". Loaded after style.css.
   Motion is limited to gentle fades, and switched off for reduced-motion users. */

/* ---------- Five roles ---------- */
.roles {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(40px, 7vw, 90px) var(--gutter) clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--cream-20);
}
.roles > .kicker { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.role-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.role { margin: 0; }
.role-img { aspect-ratio: 3 / 4; overflow: hidden; background: #1e0e10; }
.role-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85); transition: transform 1.2s ease, filter .6s ease;
}
.role:hover .role-img img { transform: scale(1.04); filter: saturate(1); }
.role figcaption { padding-top: 16px; }
.role .num { display: block; font-family: var(--serif); font-style: italic; font-size: 15px; color: #d4535c; }
.role h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; color: var(--cream); margin: 2px 0 10px;
}
.role blockquote {
  margin: 0; font-size: 15px; line-height: 1.5; color: var(--cream-85);
  font-family: var(--serif); font-style: italic;
}
.role blockquote::before { content: "“"; }
.role blockquote::after { content: "”"; }
:lang(it) .role blockquote::before { content: "«"; }
:lang(it) .role blockquote::after { content: "»"; }

/* ---------- First pages: a teaser line and a red button that opens the chapter ---------- */
.excerpt {
  max-width: 720px; margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) var(--gutter) clamp(44px, 7vw, 84px);
}
.reader summary {
  list-style: none; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.reader summary::-webkit-details-marker { display: none; }
.reader .teaser {
  font-family: var(--serif); font-style: italic; color: var(--cream);
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; max-width: 640px;
}
.reader[open] .teaser { display: none; }
/* The chapter button: an ember-lit pill with a slowly turning gold ring, a light sweep and a blinking star-eye */
.reader-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 34px 16px 16px; border-radius: 999px;
  font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 24px); color: var(--cream);
  background: radial-gradient(120% 160% at 30% 0%, #c0182a 0%, #8f0a16 45%, #4f040b 100%);
  box-shadow: 0 0 0 1px rgba(255, 190, 120, .18) inset, 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform .35s cubic-bezier(.2,.7,.1,1);
  overflow: hidden;
}
/* turning ring of gold-to-ember light around the edge */
.reader-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--rb-a, 0deg), #ffcf7a, #ff6a2b, #860912 30%, #2a0306 50%, #860912 70%, #ff6a2b, #ffcf7a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rb-spin 4s linear infinite;
}

@property --rb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rb-spin { to { --rb-a: 360deg; } }
@keyframes rb-sweep { 0%, 70% { left: -40%; } 100% { left: 120%; } }
@keyframes rb-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,190,120,.18) inset, 0 12px 34px rgba(160,14,26,.45), 0 0 50px rgba(214,70,30,.2); }
  50% { box-shadow: 0 0 0 1px rgba(255,190,120,.28) inset, 0 16px 44px rgba(190,20,32,.6), 0 0 90px rgba(240,90,35,.45); }
}
.reader-btn .rb-eye {
  width: 44px; height: 44px; flex: none; position: relative; z-index: 2;
  transition: transform 1.2s cubic-bezier(.2,.7,.1,1);
}
.reader-btn .rb-eye .eye { transform-origin: 32px 32px; animation: fx-blink 6s ease-in-out infinite 1s; }
.reader-btn .rb-label { position: relative; z-index: 2; letter-spacing: .2px; }
.reader-btn .chev {
  position: relative; z-index: 2; display: inline-block; width: 10px; height: 10px; margin: -6px 0 0 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); animation: rb-nudge 1.8s ease-in-out infinite;
}
@keyframes rb-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
.reader summary:hover .reader-btn { transform: translateY(-3px) scale(1.03); }

.reader summary:hover .reader-btn::before { animation-duration: 1.6s; }
.reader-btn::after { content: none; }
.reader summary:focus-visible { outline: none; }
.reader summary:focus-visible .reader-btn { outline: 2px solid var(--cream); outline-offset: 4px; }
.reader[open] .reader-btn { animation: none; }
.reader[open] .reader-btn .chev { transform: rotate(-135deg); margin-top: 6px; animation: none; }
.reader[open] .reader-btn::after { display: none; }
@keyframes fx-blink {
  0%, 86%, 100% { transform: scaleY(1); } 89% { transform: scaleY(.06); } 92% { transform: scaleY(1); } 94.5% { transform: scaleY(.06); } 97% { transform: scaleY(1); }
}
.reader[open] summary { margin-bottom: 30px; }
.reader-title {
  font-family: var(--serif); font-style: italic; font-weight: 400; text-align: center;
  font-size: clamp(34px, 4.4vw, 52px); line-height: 1; color: var(--cream); margin: 0 0 28px;
}
.excerpt-text {
  font-family: var(--serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.75;
  color: var(--cream); padding: 0;
}
.reader[open] .excerpt-text { animation: open .6s ease; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.excerpt-text p { margin: 0 0 1.1em; text-indent: 1.5em; }
.excerpt-text p:first-child { text-indent: 0; }
.excerpt-end { text-align: center; padding: 18px 0 10px; }
.excerpt-end p { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--cream); margin: 0 0 18px; }

/* ---------- Gentle fade-in on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .role-row .role:nth-child(2) { transition-delay: .08s; }
.js .role-row .role:nth-child(3) { transition-delay: .16s; }
.js .role-row .role:nth-child(4) { transition-delay: .24s; }
.js .role-row .role:nth-child(5) { transition-delay: .32s; }

/* ---------- Roles as a carousel (set up by story.js) ---------- */
.roles.is-carousel .role-row { display: grid; grid-template-columns: 1fr; position: relative; }
.js .roles.is-carousel .role-row { overflow: hidden; }
.js .roles.is-carousel .role {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 52px); align-items: center; max-width: 900px; margin: 0 auto; width: 100%;
  opacity: 0; visibility: hidden; transform: translateX(80px);
  transition: transform 1.1s cubic-bezier(.65,0,.35,1), opacity .9s ease, visibility 0s linear 1.1s;
}
.js .roles.is-carousel .role.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: transform 1.1s cubic-bezier(.65,0,.35,1), opacity .9s ease .15s, visibility 0s;
}
/* the slide that is leaving moves out to the left as the next one comes in from the right */
.js .roles.is-carousel .role.is-leaving { visibility: visible; opacity: 0; transform: translateX(-80px); transition: transform 1.1s cubic-bezier(.65,0,.35,1), opacity .7s ease; }

.roles.is-carousel .role-img {
  aspect-ratio: 4 / 5; width: 100%; justify-self: end; max-width: 380px;
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
}
.roles.is-carousel .role-img img { transform: scale(1.04); filter: saturate(.95); transition: transform 7s ease-out; }
.roles.is-carousel .role.is-active .role-img img { transform: scale(1); }

.roles.is-carousel figcaption { padding: 0; max-width: 420px; }
.roles.is-carousel .num { font-size: 16px; letter-spacing: 2px; }
.roles.is-carousel h3 { font-size: clamp(36px, 3.8vw, 52px); line-height: 1; margin: 2px 0 14px; }
.roles.is-carousel blockquote { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--cream-85); }
/* the words follow the painting a moment later, so they drift in with a little depth */
.roles.is-carousel figcaption > * { transform: translateX(40px); opacity: 0; transition: transform 1.2s cubic-bezier(.2,.7,.1,1), opacity 1s ease; }
.roles.is-carousel .role.is-active figcaption > * { transform: none; opacity: 1; }
.roles.is-carousel .role.is-active .num { transition-delay: .35s; }
.roles.is-carousel .role.is-active h3 { transition-delay: .45s; }
.roles.is-carousel .role.is-active blockquote { transition-delay: .6s; }

.role-nav { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 22px; }
.role-nav button {
  background: none; border: 0; cursor: pointer; color: var(--cream-60);
  font-family: var(--serif); font-style: italic; font-size: 17px; padding: 8px 10px; position: relative;
}
.role-nav button:hover { color: var(--cream); }
.role-nav .dot[aria-current="true"] { color: var(--cream); }
.role-nav .dot::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1.5px;
  background: #d4535c; transform: scaleX(0); transform-origin: left;
}
.role-nav .dot[aria-current="true"]::after { animation: role-progress var(--role-ms, 6500ms) linear forwards; }
.roles.paused .role-nav .dot[aria-current="true"]::after { animation-play-state: paused; }
@keyframes role-progress { to { transform: scaleX(1); } }
.role-nav .arrow { font-style: normal; font-size: 22px; padding: 6px 14px; }

/* ---------- Small screens: roles become a swipeable row ---------- */
@media (max-width: 860px) {
  .js .roles.is-carousel .role { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .roles.is-carousel .role-img { justify-self: center; max-width: 280px; }
  .roles.is-carousel figcaption { margin: 0 auto; }
  .roles.is-carousel h3 { margin-bottom: 14px; }
  .roles:not(.is-carousel) .role-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
    margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter);
    scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  .roles:not(.is-carousel) .role-row::-webkit-scrollbar { display: none; }
  .roles:not(.is-carousel) .role { scroll-snap-align: start; }
  .js .role-row .role { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .role-img img, .roles.is-carousel .role-img img { transition: none; transform: none; }
  .roles.is-carousel figcaption > *, .roles.is-carousel .role-img, .roles.is-carousel .role-img img { transition: none; animation: none !important; filter: none; }
  .reader[open] .excerpt-text { animation: none; }
  .reader-btn, .reader-btn::before, .reader-btn::after, .reader-btn .chev, .reader-btn .rb-eye .eye { animation: none !important; }
}

/* Quieter sibling of the chapter button: deep oxblood pill, a thin gold ring that slowly travels, no glow */
.btn-ember {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px 15px 32px; border-radius: 999px; text-decoration: none;
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--cream);
  background: linear-gradient(180deg, #5a0710 0%, #3a040a 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.1,1), background .3s;
}
.btn-ember::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--rb-a, 0deg), rgba(255,207,122,.9), rgba(255,106,43,.5) 18%, rgba(255,207,122,.12) 35%, rgba(255,207,122,.12) 65%, rgba(255,106,43,.5) 82%, rgba(255,207,122,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rb-spin 6s linear infinite;
}
.btn-ember span { position: relative; z-index: 2; }
.btn-ember .be-arrow { font-style: normal; font-size: 18px; transition: transform .35s ease; }
.btn-ember:hover { transform: translateY(-2px); background: linear-gradient(180deg, #6a0913 0%, #43050c 100%); }
.btn-ember:hover .be-arrow { transform: translateX(4px); }
.btn-ember:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .btn-ember::before { animation: none; } }

/* Email + Preorder as one pill, in the same family as the other buttons */
.preorder .row {
  align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  background: rgba(255, 247, 235, .06);
  box-shadow: 0 0 0 1px rgba(255, 207, 122, .28) inset, 0 12px 30px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: box-shadow .3s;
}
.preorder .row:focus-within { box-shadow: 0 0 0 1px rgba(255, 207, 122, .6) inset, 0 12px 30px rgba(0, 0, 0, .35); }
.preorder input[type="email"] {
  background: transparent; color: var(--cream); border-radius: 999px;
  padding: 12px 18px; font-size: 18px;
}
.preorder input[type="email"]::placeholder { color: rgba(255, 247, 235, .5); }
.preorder input[type="email"]:focus { outline: none; }
.preorder .btn-ember { border: 0; cursor: pointer; font-size: 20px; padding: 12px 24px 12px 26px; white-space: nowrap; flex: none; }
.preorder .btn-ember:disabled { opacity: .6; cursor: wait; }
@media (max-width: 480px) {
  .preorder .row { flex-direction: row; border-radius: 999px; }
  .preorder input[type="email"] { padding: 10px 12px; font-size: 16px; }
  .preorder .btn-ember { font-size: 17px; padding: 11px 18px; width: auto; }
}
.preorder input[type="email"] { width: 0; flex: 1 1 auto; min-width: 0; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .preorder .btn-ember .be-arrow { display: none; } }

/* Outline sibling: transparent pill, slow gold hairline, cream italic */
.btn-ghost {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px 15px 32px; border-radius: 999px; text-decoration: none;
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--cream);
  background: rgba(255, 247, 235, .04); overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.1,1), background .3s;
}
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--rb-a, 0deg), rgba(255,207,122,.85), rgba(255,247,235,.25) 25%, rgba(255,247,235,.18) 50%, rgba(255,247,235,.25) 75%, rgba(255,207,122,.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rb-spin 7s linear infinite reverse;
}
.btn-ghost span { position: relative; z-index: 2; }
.btn-ghost .be-arrow, .about .btn-ember .be-arrow { font-style: normal; font-size: 16px; transition: transform .35s ease; }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 247, 235, .09); }
.btn-ghost:hover .be-arrow, .about .btn-ember:hover .be-arrow { transform: translate(3px, -3px); }
.btn-ghost:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.about .links { gap: 14px; }
@media (max-width: 480px) { .about .links .btn-ember, .about .links .btn-ghost { width: 100%; justify-content: center; font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .btn-ghost::before { animation: none; } }
.be-arrow { display: inline-flex; align-items: center; opacity: .85; }
.be-arrow svg { display: block; }

/* ---------- One rhythm: the same space between every block ---------- */
:root { --gap: clamp(64px, 8.5vw, 120px); }
body .hero { padding-bottom: var(--gap); }
body .ornament { margin: 0 auto; }
body .roles { padding-top: calc(var(--gap) - 16px); padding-bottom: 0; }
body .roles > .kicker { margin-bottom: clamp(24px, 3vw, 40px); }
body .excerpt { padding-top: calc(var(--gap) - 16px); padding-bottom: 0; }
body .about { padding-top: calc(var(--gap) - 37px); padding-bottom: var(--gap); }
@media (max-width: 860px) { body .about { gap: 28px; padding-top: calc(var(--gap) - 26px); } }

.about .links { flex-wrap: wrap; }
.about .links .join-list { flex-basis: 100%; justify-content: center; max-width: 520px; }
@media (max-width: 860px) { .about .links .join-list { margin: 0 auto; } }

/* Chapter button: same muted oxblood style as the other buttons (keeps its star-eye and arrow) */
.reader-btn {
  background: linear-gradient(180deg, #5a0710 0%, #3a040a 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  font-size: 22px; padding: 12px 30px 12px 16px; gap: 12px;
}
.reader-btn::before {
  padding: 1.5px;
  background: conic-gradient(from var(--rb-a, 0deg), rgba(255,207,122,.9), rgba(255,106,43,.5) 18%, rgba(255,207,122,.12) 35%, rgba(255,207,122,.12) 65%, rgba(255,106,43,.5) 82%, rgba(255,207,122,.9));
  animation-duration: 6s;
}
.reader summary:hover .reader-btn { transform: translateY(-2px); background: linear-gradient(180deg, #6a0913 0%, #43050c 100%); }
.reader summary:hover .reader-btn::before { animation-duration: 6s; }
.reader-btn .rb-eye { width: 36px; height: 36px; }
/* Substack + Medium always share one row, equal widths, in both languages */
.about .links { display: flex; gap: 14px; max-width: 520px; }
.about .links .join-list { flex: 1 1 100%; max-width: none; }
.about .links .btn-ghost { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 18px; padding-right: 18px; font-size: clamp(17px, 1.55vw, 21px); white-space: nowrap; }
@media (max-width: 860px) { .about .links { margin: 30px auto 0; } }
@media (max-width: 480px) { .about .links .btn-ghost { flex-basis: 100%; } }
/* The mailing-list form repeated in About, same as the one at the top */
.about .links form.join-list { flex: 1 1 100%; margin: 0 0 4px; max-width: none; }
.about .links form.join-list .row { max-width: none; }
.about .links form.join-list .error:empty { display: none; }
@media (max-width: 480px) { .about .links form.join-list .btn-ember { width: auto; flex: none; font-size: 17px; padding: 11px 18px; } }
.excerpt-end p.read-wait { font-size: 18px; color: var(--cream-60); margin: -10px 0 22px; letter-spacing: .2px; }