/* Motion layer — atelier colors. Loaded last. */

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10050;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  background: var(--spin, #c45c26);
}

#site-shell {
  position: relative;
  z-index: 1;
}

html.has-fx-motion .case-studies-section,
html.has-fx-motion .projects-section,
html.has-fx-motion .skills-section,
html.has-fx-motion .education-section,
html.has-fx-motion .fun-facts-section,
html.has-fx-motion .contact-section {
  content-visibility: visible !important;
}

/* —— Cursor —— */
.fx-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100000;
}

/* A sparkle, the glint that twinkles around the mascot, turning slowly under
   the pointer with two small glints in orbit and a warm glow trailing behind.
   Over a link it opens up and the orbit widens; a click throws a ring of tiny
   glints; moving sheds a shimmer. The native cursor stays: the sparkle rides
   just below-right of its tip rather than replacing it. */
.fx-cursor-dot {
  width: 19px;
  height: 19px;
  margin: 10px 0 0 8px;
  color: var(--spin, #c45c26);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fx-cursor-dot svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.fx-cursor-dot > svg {
  animation: fx-star-turn 7s linear infinite;
  transition: scale 0.5s cubic-bezier(0.34, 1.7, 0.5, 1), filter 0.3s ease;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--spin, #c45c26) 45%, transparent));
}

.fx-orbit {
  --orbit: 17px;
  position: absolute;
  inset: 0;
  animation: fx-star-turn 3.2s linear infinite;
}

.fx-orbit.is-far {
  --orbit: 14px;
  animation-duration: 4.8s;
  animation-direction: reverse;
}

.fx-orbit svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  translate: 0 calc(var(--orbit) * -1);
  opacity: 0.85;
  transition: translate 0.5s cubic-bezier(0.34, 1.6, 0.5, 1), opacity 0.3s ease;
}

.fx-orbit.is-far svg {
  width: 4.5px;
  height: 4.5px;
  margin: -2.25px 0 0 -2.25px;
  opacity: 0.65;
}

@keyframes fx-star-turn {
  to { rotate: 360deg; }
}

html.has-fx-cursor.fx-on .fx-cursor-dot {
  opacity: 1;
}

/* Opens up only a little: any bigger and it covered the link's text. The
   orbit widens instead. */
html.has-fx-cursor.fx-pointer .fx-cursor-dot > svg {
  scale: 1.25;
  animation-duration: 2.4s;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--spin, #c45c26) 65%, transparent));
}

html.has-fx-cursor.fx-pointer .fx-orbit {
  --orbit: 25px;
  animation-duration: 1.6s;
}

html.has-fx-cursor.fx-pointer .fx-orbit.is-far {
  --orbit: 21px;
  animation-duration: 2.2s;
}

html.has-fx-cursor.fx-press .fx-cursor-dot > svg {
  scale: 0.75;
}

html.has-fx-cursor.fx-press .fx-orbit {
  --orbit: 8px;
}

/* The warm glow that trails a beat behind the sparkle; over a card it
   becomes the "view" disc. Sized rather than scaled: GSAP owns this
   element's transform and folds a CSS `scale` into it, which left the layer
   stuck at zero. */
.fx-cursor-ball {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--spin, #c45c26) 26%, transparent) 0%, transparent 68%);
  opacity: 0;
  will-change: transform;
  transition: width 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
    height 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
    margin 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
    opacity 0.25s ease;
}

html.has-fx-cursor.fx-on .fx-cursor-ball {
  opacity: 1;
}

html.has-fx-cursor.fx-pointer .fx-cursor-ball {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
}

html.has-fx-cursor.fx-text .fx-cursor-ball {
  opacity: 0;
}

.fx-spark {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  color: var(--spin, #c45c26);
  pointer-events: none;
  animation: fx-spark-fade 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fx-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@keyframes fx-spark-fade {
  from {
    opacity: 0.9;
    transform: translate(var(--x), var(--y)) scale(0.4) rotate(0deg);
  }
  35% {
    opacity: 1;
    transform: translate(calc(var(--x) + var(--dx) * 0.6), calc(var(--y) + var(--dy) * 0.6)) scale(1) rotate(calc(var(--r) * 0.4));
  }
  to {
    opacity: 0;
    transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(0.2) rotate(var(--r));
  }
}

html.has-fx-cursor.fx-text .fx-cursor-dot,
html.has-fx-cursor.fx-text .fx-cursor-ball {
  opacity: 0;
}

/* —— Split chars —— */
.fx-ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.fx-word {
  white-space: nowrap;
}

.fx-ch > span {
  display: inline-block;
  transform-origin: 50% 100%;
}

.hero-line .fx-ch > span {
  will-change: transform;
}

.home-section.hero-live .hero-line .fx-ch > span {
  will-change: auto;
}

/* Room below the line for descenders: at the title's 0.92 line-height the
   tail of the "p" in Deepika hung out of the box and was clipped. The
   negative margin keeps the layout where it was. */
.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.hero-line .fx-ch {
  overflow: visible;
}

.hero-rule {
  display: block;
  width: 3.4rem;
  height: 1.5px;
  margin: 0.15rem 0 1.05rem;
  background: var(--spin, #c45c26);
  transform-origin: left center;
}

.home-photo-stage {
  position: relative;
  display: inline-block;
  transform-origin: 70% 80%;
}

.home-photo-stage::before {
  content: "";
  position: absolute;
  inset: 22px -18px -22px 18px;
  border-radius: 1.7rem;
  background: color-mix(in srgb, var(--spin) 70%, var(--ink));
  z-index: 0;
  transform: rotate(8deg);
  pointer-events: none;
}

.home-photo-stage .home-photo {
  position: relative;
  z-index: 1;
}

.home-section.hero-live .home-photo-stage {
  animation: photoFloat 5.6s ease-in-out infinite;
}

@keyframes photoFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}

.home-section.hero-playing .home-photo,
.home-section.hero-playing .home-photo-stage,
.home-section.hero-playing .home-btns .btn {
  transition: none !important;
}

.home-section.hero-live .home-kicker,
.home-section.hero-live .home-subtitle,
.home-section.hero-live .home-desc,
.home-section.hero-live .home-btns,
.home-section.hero-live .home-rotate,
.home-section.hero-live .home-kicker .fx-ch > span {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

.home-section:not(.hero-live) .home-rotate-track {
  animation-play-state: paused;
}

.home-section.hero-css .hero-line-1 .fx-ch > span,
.home-section.hero-css .hero-line-2 .fx-ch > span {
  animation: fxCharIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-section.hero-css .hero-line-2 .fx-ch > span {
  animation-delay: 0.18s;
}

@keyframes fxCharIn {
  from { transform: translate3d(0, 140%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes fxRiseIn {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}

/* —— Magnetic / button fill —— */
html.atelier .fx-mag {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .fx-fill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html.atelier .fx-fill .fx-fill-label {
  position: relative;
  z-index: 1;
}

html.atelier .fx-fill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
  transition: top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  pointer-events: none;
}

html.atelier .fx-fill:hover::before,
html.atelier .fx-fill:focus-visible::before {
  top: 0;
}

html.atelier .fx-fill > *,
html.atelier .fx-fill svg {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  html.atelier .home-btns .btn-outline.fx-fill:hover,
  html.atelier .atelier-about-more.fx-fill:hover,
  html.atelier .project-btn.fx-fill:hover,
  html.atelier .atelier-cert-cta.fx-fill:hover,
  html.atelier .form-btn.fx-fill:hover,
  html.atelier .portfolio-lock .unlock-btn.fx-fill:hover:not(:disabled) {
    background: transparent !important;
    color: var(--paper) !important;
    transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) !important;
  }

  html.has-fx-cursor .home-photo,
  html.has-fx-cursor .home-photo:hover {
    transform: rotate(-3.5deg) translate3d(var(--fx-x, 0px), var(--fx-y, 0px), 0) scale(var(--fx-s, 1));
    transition: transform 0.2s ease-out;
  }

  html.has-fx-cursor .atelier-about-photo,
  html.has-fx-cursor .atelier-about-frame:hover .atelier-about-photo {
    transform: rotate(2.5deg) translate3d(var(--fx-x, 0px), var(--fx-y, 0px), 0) scale(var(--fx-s, 1));
    transition: transform 0.2s ease-out;
  }
}

html.atelier .nav-links > li > a,
html.atelier .nav-links .dropbtn {
  position: relative;
}

html.atelier .nav-links > li > a::after,
html.atelier .nav-links .dropbtn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: 1.5px;
  background: var(--spin);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .nav-links > li > a:hover::after,
html.atelier .nav-links .dropbtn:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.fx-title-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  perspective: 700px;
}

.fx-title-word > span {
  display: inline-block;
  transform-origin: 50% 100%;
}

html.has-scroll-cinema .atelier-about-notes {
  perspective: 1200px;
}

html.has-scroll-cinema .project-card.fx-in,
html.has-scroll-cinema .atelier-skill-card.fx-in,
html.has-scroll-cinema .atelier-about-notes li.fx-in,
html.has-scroll-cinema .atelier-edu-courses li.fx-in,
html.has-scroll-cinema .atelier-edu-stat.fx-in,
html.has-scroll-cinema .atelier-exp-row.fx-in,
html.has-scroll-cinema .atelier-essay.fx-in,
html.has-scroll-cinema .fun-facts-section .atelier-note.fx-in,
html.has-scroll-cinema .atelier-contact-form.fx-in,
html.has-scroll-cinema .atelier-contact-copy.fx-in {
  animation: none !important;
}

html.has-scroll-cinema .fx-footer-mark span {
  transform: none;
}
@keyframes fxPageTurn {
  from { transform: perspective(1800px) rotateY(82deg); }
  to { transform: perspective(1800px) rotateY(0deg); }
}

@keyframes fxFromLeft {
  from { transform: translate3d(-40px, 0, 0); }
  to { transform: none; }
}

@keyframes fxScaleIn {
  from { transform: scale(0.92); }
  to { transform: none; }
}

@keyframes fxPaper1 {
  from { opacity: 0; transform: rotate(-8deg) translate3d(0, 36px, 0); }
  to { opacity: 1; transform: rotate(-1.5deg); }
}

@keyframes fxPaper2 {
  from { opacity: 0; transform: rotate(7deg) translate3d(0, 40px, 0); }
  to { opacity: 1; transform: rotate(1.2deg); }
}

@keyframes fxPaper3 {
  from { opacity: 0; transform: rotate(-4deg) translate3d(0, 32px, 0); }
  to { opacity: 1; transform: rotate(0.6deg); }
}

@keyframes fxDrop {
  from { opacity: 0; transform: rotate(8deg) translate3d(0, 44px, 0); }
  to { opacity: 1; transform: rotate(1.4deg); }
}

@keyframes fxTagIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes fxLine {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes fxScan {
  0% { top: 8%; opacity: 0; }
  18% { opacity: 1; }
  100% { top: 92%; opacity: 0; }
}

@keyframes fxIconSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

html.atelier .project-card,
html.atelier .atelier-skill-card,
html.atelier .atelier-note,
html.atelier .atelier-essay {
  position: relative;
}

html.atelier .atelier-skill-card:hover,
html.atelier .atelier-note:hover,
html.atelier .atelier-essay:hover,
html.atelier .fun-facts-section .atelier-note:hover {
  transform: translateY(-4px) !important;
  border-color: var(--ink) !important;
  box-shadow: 7px 9px 0 var(--ink) !important;
}

html.atelier .project-card:hover .project-hook {
  color: var(--spin) !important;
}

html.atelier .case-studies-section .project-card:hover::after,
html.atelier .projects-section .project-card:hover::after {
  opacity: 0.28;
  color: var(--spin);
  transform: translate3d(0, -6px, 12px) scale(1.08);
}

html.atelier .case-studies-section .project-card::after,
html.atelier .projects-section .project-card::after {
  transition: opacity 0.4s ease, color 0.4s ease, transform 0.45s ease;
}

.fx-inkbar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--spin);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 5;
}

.case-studies-section .project-card:hover .fx-inkbar {
  transform: scaleY(1);
}

.fx-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
}

.fx-shine::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -55%;
  width: 42%;
  height: 190%;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--spin) 45%, #fff) 50%, transparent 70%);
  transform: translateX(-120%) skewX(-22deg);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .project-card:hover .fx-shine::after,
html.atelier .atelier-skill-card:hover .fx-shine::after {
  transform: translateX(420%) skewX(-22deg);
}

.fx-scan {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--spin), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

#technical-projects .project-card:hover .fx-scan {
  animation: fxScan 1.2s ease-in-out;
}

.atelier-skill-card:hover .atelier-skill-icon {
  animation: fxIconSpin 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  border-color: var(--spin);
}

.case-studies-section .project-card.fx-in,
#design-projects .project-card.fx-in,
#technical-projects .project-card.fx-in {
  transform-origin: left center;
  animation: fxPageTurn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--fx-d, 0s);
}

.atelier-skill-card.fx-in {
  animation: fxScaleIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--fx-d, 0s);
}

/* About notes */
.atelier-about-notes li.fx-in {
  animation: fxFromLeft 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--fx-d, 0s);
}

/* Education chips + stats */
.atelier-edu-courses li.fx-in {
  animation: fxTagIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--fx-d, 0s);
}

.atelier-edu-stat.fx-in {
  animation: fxScaleIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Experience: line draws */
.atelier-exp-row.fx-in {
  animation: fxFromLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--fx-d, 0s);
}

.atelier-exp-row.fx-in .atelier-exp-leader {
  transform-origin: left center;
  animation: fxLine 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.25s;
}

/* Writing: paper drop */
.atelier-essay.fx-in {
  animation: fxDrop 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Fun facts: scattered paper */
.fun-facts-section .atelier-note:nth-child(3n + 1).fx-in { animation: fxPaper1 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fun-facts-section .atelier-note:nth-child(3n + 2).fx-in { animation: fxPaper2 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fun-facts-section .atelier-note:nth-child(3n).fx-in { animation: fxPaper3 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Contact */
.atelier-contact-form.fx-in,
.atelier-contact-copy.fx-in {
  animation: fxRiseIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.atelier .fx-fill::before {
  left: var(--spot-x, 50%);
  top: var(--spot-y, 50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  /* base.css grows button fills from the left; this one is centred on the cursor. */
  transform-origin: 50% 50% !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html.atelier .fx-fill:hover::before,
html.atelier .fx-fill:focus-visible::before {
  top: var(--spot-y, 50%);
  transform: translate(-50%, -50%) scale(28);
}

/* —— Spotlight, footer, nav —— */
/* Photos must never get clipped/hidden by motion experiments */
html.atelier .atelier-about-photo,
html.atelier .home-photo {
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.atelier .navbar {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.atelier body.nav-away .navbar {
  transform: translateY(-120%) !important;
}

.fx-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    color-mix(in srgb, var(--spin) 32%, transparent),
    transparent 64%
  );
  transition: opacity 0.45s ease;
}

html.atelier .project-card:hover .fx-spot,
html.atelier .atelier-skill-card:hover .fx-spot {
  opacity: 1;
}

html.has-fx-cursor.fx-on.fx-view .fx-cursor-ball {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--ink);
  opacity: 1;
  mix-blend-mode: normal;
  display: grid;
  place-items: center;
}

html.has-fx-cursor.fx-view .fx-cursor-dot {
  opacity: 0;
}

html.has-fx-cursor.fx-view .fx-cursor-label {
  display: block;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--paper);
}

html.has-fx-cursor.fx-view .fx-cursor-label span {
  display: inline-block;
  font-style: normal;
  color: var(--spin, #c45c26);
}

.fx-cursor-label {
  display: none;
}

.fx-footer-mark {
  margin: 2.4rem 0 0;
  overflow: hidden;
  padding-bottom: 0.14em;
  font-family: var(--serif, 'Fraunces', serif) !important;
  font-size: clamp(3.4rem, 12vw, 8.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.fx-footer-mark span {
  display: block;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .fx-cursor {
    display: none !important;
  }

  .fx-footer-mark span {
    transform: none !important;
  }

  html.atelier .project-card.fx-in,
  html.atelier .atelier-skill-card.fx-in,
  .atelier-about-notes li.fx-in,
  .atelier-edu-courses li.fx-in,
  .atelier-exp-row.fx-in,
  .atelier-essay.fx-in,
  .fun-facts-section .atelier-note.fx-in {
    animation: none !important;
  }

  html.atelier .fx-fill::before {
    display: none;
  }

  .home-section.hero-live .home-photo-stage {
    animation: none !important;
  }

  html.atelier .project-card:nth-child(n):hover,
  html.atelier .interactive-card:nth-child(n):hover,
  html.atelier .atelier-skill-card:hover,
  html.atelier .atelier-note:hover,
  html.atelier .atelier-essay:hover {
    transform: none !important;
  }
}

@media (hover: none) {
  .fx-cursor {
    display: none !important;
  }
}

html.atelier .case-studies-section .project-card {
  background-image: linear-gradient(var(--spin), var(--spin)) !important;
  background-size: 100% 3px !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
}

html.atelier .case-studies-section .project-card:nth-child(n):hover {
  background-image: linear-gradient(var(--spin), var(--spin)) !important;
  background-size: 100% 3px !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
}

html.atelier #design-projects .project-card {
  box-shadow: 6px 8px 0 var(--ink), inset 0 0 0 1px color-mix(in srgb, var(--spin) 40%, transparent) !important;
}

html.atelier #design-projects .project-card:nth-child(n):hover {
  box-shadow: 7px 9px 0 var(--ink), inset 0 0 0 1px var(--spin) !important;
}

html.atelier #technical-projects .project-card {
  box-shadow: inset 3px 0 0 var(--spin) !important;
}

html.atelier #technical-projects .project-card:nth-child(n):hover {
  box-shadow: 7px 9px 0 var(--ink), inset 3px 0 0 var(--spin) !important;
}

#story-book-mount,
#work-book-mount {
  width: 100%;
  max-width: 100%;
}

.work-book {
  width: 100%;
  max-width: 100%;
  margin: 0.2rem 0 0.4rem;
  padding: 0.4rem 0.6rem 1.6rem;
  overflow: visible;
}

.work-book-stage {
  position: relative;
  width: 100%;
  max-width: 780px;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px 7px 7px 3px;
}

.work-book:not(.is-spread) .work-book-stage {
  max-width: 22.5rem;
  border-radius: 3px 8px 8px 3px;
}

.work-book-stage > .wb-sheet {
  display: none !important;
}

.work-book-stage.stf__parent {
  background: transparent !important;
  box-shadow:
    1px 0 0 color-mix(in srgb, var(--ink) 16%, var(--card)),
    2px 1px 0 color-mix(in srgb, var(--ink) 12%, var(--card)),
    3px 2px 0 color-mix(in srgb, var(--ink) 10%, var(--card)),
    5px 3px 0 color-mix(in srgb, var(--ink) 8%, var(--card)),
    12px 18px 28px color-mix(in srgb, var(--ink) 22%, transparent),
    0 4px 10px color-mix(in srgb, var(--ink) 12%, transparent);
}

.work-book-stage .stf__wrapper,
.work-book-stage .stf__block {
  background: transparent !important;
}

.work-book.is-spread .stf__wrapper,
.work-book.is-spread .stf__block {
  overflow: visible !important;
}

.work-book:not(.is-spread) .stf__wrapper,
.work-book:not(.is-spread) .stf__block {
  overflow: hidden !important;
}

.work-book-stage .stf__item {
  position: absolute !important;
  box-sizing: border-box;
}

.work-book-stage .stf__outerShadow,
.work-book-stage .stf__innerShadow,
.work-book-stage .stf__hardShadow,
.work-book-stage .stf__hardInnerShadow {
  pointer-events: none;
}

.work-book.is-spread .stf__wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 16px;
  margin-left: -8px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 16%, transparent),
    transparent 32%,
    color-mix(in srgb, var(--ink) 32%, transparent) 50%,
    transparent 68%,
    color-mix(in srgb, var(--ink) 16%, transparent)
  );
  pointer-events: none;
  z-index: 3;
}

.work-book:not(.is-spread) .wb-sheet {
  box-shadow: inset 16px 0 20px color-mix(in srgb, var(--ink) 12%, transparent);
}

.work-book.is-spread .stf__item:nth-child(odd) .wb-sheet {
  box-shadow: inset -22px 0 26px color-mix(in srgb, var(--ink) 14%, transparent);
}

.work-book.is-spread .stf__item:nth-child(even) .wb-sheet {
  box-shadow: inset 22px 0 26px color-mix(in srgb, var(--ink) 14%, transparent);
}

.wb-sheet {
  --wb-rule: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0 1.15rem 1.5rem 1.7rem;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background-color: var(--card);
  background-image:
    linear-gradient(
      to right,
      var(--spin) 0 1.5px,
      transparent 1.5px
    );
  background-position: 1.25rem 0;
  background-size: 1.5px 100%;
  background-repeat: no-repeat;
}

html.atelier .wb-sheet {
  background-color: color-mix(in srgb, var(--card) 82%, #e2d4bf);
}

html.atelier body.dark-theme .wb-sheet {
  background-color: var(--card);
}

.wb-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 7%, transparent), transparent 14%, transparent 86%, color-mix(in srgb, var(--ink) 8%, transparent)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.22;
}

html.atelier body.dark-theme .wb-sheet::before {
  mix-blend-mode: overlay;
  opacity: 0.14;
}

.wb-write {
  --wb-rule: inherit;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(
    to bottom,
    transparent calc(var(--wb-rule) - 1px),
    color-mix(in srgb, var(--ink) 22%, transparent) calc(var(--wb-rule) - 1px)
  );
  background-size: 100% var(--wb-rule);
  background-position: 0 0;
  background-repeat: repeat-y;
}

.wb-sheet h3,
.wb-sheet p,
.wb-sheet button,
.wb-sheet span {
  margin: 0 !important;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

html.atelier .wb-sheet,
html.atelier body.dark-theme .wb-sheet,
html.atelier .wb-sheet h3,
html.atelier body.dark-theme .wb-sheet h3,
html.atelier body.dark-theme .wb-sheet .wb-title,
html.atelier body.dark-theme .wb-sheet .wb-pull,
html.atelier body.dark-theme .wb-sheet .wb-line {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

html.atelier .wb-sheet .wb-title,
html.atelier .wb-sheet h3.wb-title {
  margin: 0 !important;
  padding: 0 0 2px !important;
  height: var(--wb-rule) !important;
  line-height: calc(var(--wb-rule) - 2px) !important;
  font-size: 1rem !important;
}

html.atelier .wb-sheet .wb-line,
html.atelier .wb-sheet .wb-pull,
html.atelier .wb-sheet .wb-kicker,
html.atelier .wb-sheet .wb-running {
  line-height: var(--wb-rule) !important;
  margin: 0 !important;
}

html.atelier .wb-sheet .wb-kicker,
html.atelier .wb-sheet .wb-running {
  line-height: calc(var(--wb-rule) - 2px) !important;
}

html.atelier .wb-sheet .wb-toc-row {
  margin: 0 !important;
  padding: 0 0 2px !important;
  height: var(--wb-rule) !important;
  min-height: var(--wb-rule) !important;
  max-height: var(--wb-rule) !important;
}

html.atelier .wb-sheet .wb-kicker,
html.atelier .wb-sheet .wb-run,
html.atelier body.dark-theme .wb-sheet .wb-kicker,
html.atelier body.dark-theme .wb-sheet .wb-run {
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

html.atelier .wb-sheet .wb-running,
html.atelier .wb-sheet .wb-folio,
html.atelier .wb-sheet .wb-toc-page,
html.atelier body.dark-theme .wb-sheet .wb-running,
html.atelier body.dark-theme .wb-sheet .wb-folio {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}

.wb-toc {
  display: contents;
}

.wb-toc-row {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  margin: 0 !important;
  padding: 0 0 2px !important;
  height: var(--wb-rule) !important;
  min-height: var(--wb-rule) !important;
  max-height: var(--wb-rule) !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  color: inherit;
  font: inherit;
  line-height: calc(var(--wb-rule) - 2px) !important;
  text-align: left;
  cursor: pointer;
}

.wb-toc-num {
  flex: 0 0 1.6rem;
  height: auto;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.05rem;
  line-height: inherit;
  color: var(--spin);
}

.wb-toc-copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  overflow: hidden;
}

.wb-toc-title {
  display: block;
  height: auto;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-toc-dots {
  flex: 1 1 1.2rem;
  min-width: 1.2rem;
  height: 0;
  margin: 0 0 3px;
  border: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 28%, transparent);
  transform: none;
}

.wb-toc-page {
  flex: 0 0 auto;
  height: auto;
  font-variant-numeric: oldstyle-nums;
  line-height: inherit;
  color: var(--muted);
}

.wb-toc-row:hover .wb-toc-title {
  color: var(--spin);
}

.wb-running {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 0 2px !important;
  height: var(--wb-rule) !important;
  overflow: hidden;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--sans, 'Outfit', sans-serif);
  line-height: calc(var(--wb-rule) - 2px) !important;
}

.wb-running span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-kicker {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 0 2px !important;
  height: var(--wb-rule) !important;
  overflow: hidden;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spin);
  font-family: var(--sans, 'Outfit', sans-serif);
  line-height: calc(var(--wb-rule) - 2px) !important;
}

.wb-title {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 0 2px !important;
  height: var(--wb-rule) !important;
  overflow: hidden;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: calc(var(--wb-rule) - 2px) !important;
}

.wb-pull {
  margin: 0 !important;
  padding: 0;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.88rem;
  line-height: var(--wb-rule) !important;
  color: var(--ink);
}

.wb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.95rem;
  border: 1.5px solid var(--spin);
  border-radius: 999px;
  background: var(--spin);
  color: #1a1713;
  -webkit-text-fill-color: #1a1713;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  height: var(--wb-rule);
  line-height: var(--wb-rule);
  white-space: nowrap;
  cursor: pointer;
}

html.atelier .wb-sheet .wb-cta,
html.atelier body.dark-theme .wb-sheet .wb-cta {
  background: var(--spin) !important;
  border: 1.5px solid var(--spin) !important;
  color: #1a1713 !important;
  -webkit-text-fill-color: #1a1713 !important;
}

html.atelier .wb-sheet .wb-cta:hover,
html.atelier body.dark-theme .wb-sheet .wb-cta:hover {
  background: transparent !important;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

.wb-line {
  margin: 0 !important;
  padding: 0;
  min-height: var(--wb-rule);
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: var(--wb-rule) !important;
  color: var(--ink);
}

.wb-run {
  color: var(--spin);
  font-family: var(--sans, 'Outfit', sans-serif);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wb-folio {
  position: absolute;
  z-index: 1;
  right: 1.15rem;
  bottom: 0.55rem;
  margin: 0;
  font-variant-numeric: oldstyle-nums;
  font-size: 0.8rem;
  color: var(--muted);
}

.work-book.is-spread .stf__item:nth-child(odd) .wb-folio {
  right: auto;
  left: 1.7rem;
}

.work-book-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  max-width: 780px;
  margin: 1rem auto 0;
}

.work-book:not(.is-spread) .work-book-bar {
  max-width: 22.5rem;
}

.work-book-status {
  margin: 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

.work-book-nav {
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 600;
  cursor: pointer;
}

.work-book-nav:hover {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 840px) {
  .work-book {
    padding: 0.2rem 0.15rem 1.2rem;
  }

  .wb-sheet {
    --wb-rule: 26px;
    padding: 0 0.9rem 1.2rem 1.95rem;
    background-position: 1.05rem 0;
  }

  .wb-title {
    font-size: 0.95rem;
  }

  .wb-line,
  .wb-pull {
    font-size: 0.8rem;
  }

  .wb-toc-dots {
    display: none;
  }

  .wb-cta {
    padding: 0 0.8rem;
    font-size: 0.64rem;
  }

  .work-book-bar {
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.75rem;
  }

  .work-book-status {
    order: -1;
    flex: 1 0 100%;
    font-size: 0.8rem;
  }

  .work-book-nav {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .wb-sheet {
    --wb-rule: 24px;
    padding: 0 0.75rem 1.1rem 1.85rem;
    background-position: 0.95rem 0;
  }

  .wb-running {
    letter-spacing: 0.08em;
    font-size: 0.58rem;
  }

  .wb-title {
    font-size: 0.9rem;
  }

  .wb-folio {
    right: 0.7rem;
    bottom: 0.4rem;
    font-size: 0.72rem;
  }
}

html.has-story-book .story-body {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

html.has-story-book .story-hero {
  padding: 5.1rem 0 0.35rem;
}

html.has-story-book .story-hero-grid {
  display: block;
}

html.has-story-book .story-hero-title {
  font-size: clamp(1.5rem, 3vw, 2.05rem) !important;
  max-width: none;
  margin: 0 !important;
}

.story-book {
  padding: 0.35rem 1.1rem 1.7rem;
  overflow: visible;
}

.story-book.is-spread .work-book-stage,
.story-book.is-spread .work-book-stage .stf__wrapper,
.story-book.is-spread .work-book-stage .stf__block {
  overflow: visible;
}

.story-book:not(.is-spread) {
  overflow: hidden;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.story-book:not(.is-spread) .work-book-stage,
.story-book:not(.is-spread) .work-book-stage.stf__parent {
  width: min(var(--sb-w, 340px), calc(100vw - 32px)) !important;
  height: var(--sb-h, 460px) !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden !important;
}

.story-book.is-spread .work-book-stage,
.story-book.is-spread .work-book-stage.stf__parent {
  width: var(--sb-w, 340px) !important;
  height: var(--sb-h, 460px) !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.story-book .work-book-bar {
  position: relative;
  z-index: 8;
  max-width: var(--sb-w, 340px);
}

.sb-cover {
  padding: 0 !important;
  background-color: var(--ink) !important;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      color-mix(in srgb, #fff 4%, transparent) 3px 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      color-mix(in srgb, #000 10%, transparent) 2px 3px
    ),
    linear-gradient(90deg, color-mix(in srgb, #000 42%, transparent) 0, transparent 16px),
    linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent), transparent 22%, transparent 78%, color-mix(in srgb, #000 28%, transparent)) !important;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

html.atelier .sb-cover,
html.atelier .sb-cover h3,
html.atelier .sb-cover .sb-cover-title,
html.atelier .sb-cover .sb-cover-title span {
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
  font-style: normal !important;
}

html.atelier body.dark-theme .sb-cover {
  background-color: var(--paper) !important;
}

html.atelier body.dark-theme .sb-cover,
html.atelier body.dark-theme .sb-cover h3,
html.atelier body.dark-theme .sb-cover .sb-cover-title,
html.atelier body.dark-theme .sb-cover .sb-cover-title span {
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

.sb-cover::before {
  opacity: 0.34;
  mix-blend-mode: overlay;
}

.sb-cover .wb-write {
  flex: 1 1 auto;
  height: 100%;
  min-height: 100%;
  padding: 0;
  background: none;
}

.sb-cover-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  height: calc(100% - 1.5rem);
  min-height: 0;
  box-sizing: border-box;
  margin: 0.75rem 0.75rem 0.75rem 0.95rem;
  padding: 1.35rem 1.15rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--spin) 58%, transparent);
  outline: 1px solid color-mix(in srgb, var(--spin) 28%, transparent);
  outline-offset: 5px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spin) 22%, transparent),
    inset 0 0 42px color-mix(in srgb, var(--spin) 10%, transparent);
  overflow: visible;
}

.sb-cover-corners {
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background:
    linear-gradient(var(--spin), var(--spin)) top left / 12px 1px no-repeat,
    linear-gradient(var(--spin), var(--spin)) top left / 1px 12px no-repeat,
    linear-gradient(var(--spin), var(--spin)) top right / 12px 1px no-repeat,
    linear-gradient(var(--spin), var(--spin)) top right / 1px 12px no-repeat,
    linear-gradient(var(--spin), var(--spin)) bottom left / 12px 1px no-repeat,
    linear-gradient(var(--spin), var(--spin)) bottom left / 1px 12px no-repeat,
    linear-gradient(var(--spin), var(--spin)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--spin), var(--spin)) bottom right / 1px 12px no-repeat;
  opacity: 0.82;
}

.sb-cover-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
  opacity: 0.9;
}

.sb-cover-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  margin: 0 !important;
  max-width: 12ch;
  text-align: center;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(1.28rem, 2.9vw, 1.7rem);
  font-weight: 500;
  font-style: normal !important;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 color-mix(in srgb, #000 45%, transparent);
}

.sb-cover-title span {
  display: block;
}

.sb-cover-mark {
  display: block;
  width: 1.35rem;
  height: 1px;
  margin: 0.15rem 0 0.35rem;
  border: 0;
  background: var(--spin);
  opacity: 0.9;
  font-style: normal;
}

.sb-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: calc(100% - 1.6rem);
  padding-top: 1.4rem;
  background-image: none !important;
  text-align: center;
}

.sb-open-kicker {
  margin: 0;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

.sb-open-roman {
  margin: 0.15rem 0 0.2rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

.sb-open-title {
  margin: 0 !important;
  max-width: 14ch;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

.sb-open-mark {
  display: block;
  width: 1.5rem;
  height: 1px;
  margin: 0.55rem 0 0;
  background: var(--spin);
}

html.atelier .sb-open-title,
html.atelier body.dark-theme .sb-open-title {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

.sb-open .wb-cta {
  margin-top: 0.85rem;
}

.story-book .wb-toc-row {
  height: var(--wb-rule);
  min-height: var(--wb-rule);
  max-height: var(--wb-rule);
  gap: 0.45rem;
}

.story-book .wb-toc-title {
  font-size: 0.84rem;
}

.story-book .wb-toc-num {
  flex: 0 0 1.35rem;
  font-size: 0.88rem;
}

/* ---- The story as a kept journal -------------------------------------------
   A cloth-bound cover with a pasted paper label, an elastic band and her
   sticker; washi tape and a mood sticker on every chapter's first page; a
   highlighter on the quotes, a chai ring here and there, marbled endpapers.
   Scoped to the story book: the work modal shares the base book styles. */

html.atelier .story-book {
  --cloth: #b0501f;
  --label: #f3eee4;
  --label-ink: #1a1713;
  --label-red: #c45c26;
  --foil: #f3eee4;
}

html.atelier body.dark-theme .story-book {
  --cloth: #9c4719;
}

/* Plain paper: no ruled lines or margin rule, the type carries the page. */
html.atelier .story-book .wb-sheet,
html.atelier .story-book .wb-write {
  background-image: none;
}

/* Cover */
html.atelier .story-book .wb-sheet.sb-cover {
  background-color: var(--cloth) !important;
}

html.atelier .story-book .sb-cover .sb-cover-inner {
  justify-content: center;
  gap: 0;
  height: 100%;
  margin: 0;
  padding: 1.6rem 1.2rem 1.4rem;
  border: 0;
  outline: 0;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.28);
}

html.atelier .story-book .sb-band {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8%;
  width: 10px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%, rgba(0, 0, 0, 0.3)),
    #1a1713;
  box-shadow: 3px 0 4px rgba(0, 0, 0, 0.35);
}

html.atelier body .story-book .sb-cover .sb-cover-vol {
  position: absolute;
  top: 1.1rem;
  left: 1.5rem;
  margin: 0 !important;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--foil) !important;
  -webkit-text-fill-color: var(--foil) !important;
  opacity: 0.85;
}

html.atelier .story-book .sb-label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(84%, 17rem);
  box-sizing: border-box;
  padding: 1.2rem 0.9rem 1.1rem;
  border-radius: 3px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.5), transparent 60%),
    var(--label);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 16px rgba(0, 0, 0, 0.38),
    0 1px 2px rgba(0, 0, 0, 0.3);
  rotate: -1.5deg;
  text-align: center;
}

html.atelier .story-book .sb-label::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(35, 29, 23, 0.6);
  outline: 1px solid rgba(35, 29, 23, 0.22);
  outline-offset: -4px;
  border-radius: 2px;
  pointer-events: none;
}

html.atelier body .story-book .sb-cover.wb-sheet .sb-label .sb-cover-kicker {
  margin: 0 !important;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: var(--label-red) !important;
  -webkit-text-fill-color: var(--label-red) !important;
  opacity: 1;
}

html.atelier body .story-book .sb-cover.wb-sheet .sb-label .sb-cover-title,
html.atelier body .story-book .sb-cover.wb-sheet .sb-label .sb-cover-title span {
  max-width: none;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -0.01em;
  text-shadow: none;
  color: var(--label-ink) !important;
  -webkit-text-fill-color: var(--label-ink) !important;
}

html.atelier body .story-book .sb-cover.wb-sheet .sb-label-by {
  margin: 0 !important;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.78rem;
  font-style: italic;
  color: #6b5b4b !important;
  -webkit-text-fill-color: #6b5b4b !important;
}

html.atelier .story-book .sb-cover-portrait {
  z-index: 2;
  margin-top: -0.7rem;
  translate: 30% 0;
}

html.atelier body .story-book .sb-cover.wb-sheet .sb-cover-note {
  left: auto;
  right: calc(100% + 0.1rem);
  top: 1.2rem;
  align-items: flex-end;
  color: var(--label) !important;
  -webkit-text-fill-color: var(--label) !important;
  rotate: -6deg;
}

html.atelier .story-book .sb-cover-note svg {
  margin: 0.1rem -1rem 0 0;
  scale: -1 1;
}

/* Her sticker: die-cut, a white edge round her outline, slightly askew. */
html.atelier .story-book .sb-cameo.is-sticker {
  --cameo-w: 6.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  rotate: 6deg;
  transition: rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier .story-book .sb-cameo.is-sticker:hover {
  rotate: 2deg;
  scale: 1.05;
}

html.atelier .story-book .sb-cameo.is-sticker .sb-cameo-window {
  height: calc(var(--cameo-w) * 1.02);
  border-radius: 0 0 6px 6px;
  background: none;
  filter:
    drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff)
    drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff)
    drop-shadow(0 5px 6px rgba(0, 0, 0, 0.3));
}

html.atelier .story-book .sb-cameo.is-sticker .sb-cameo-window::before {
  content: none;
}

html.atelier .story-book .sb-cameo.is-sticker .sb-cameo-art {
  top: 3%;
}

/* Chapter openers */
html.atelier .story-book .sb-opener .sb-open {
  position: relative;
  gap: 0.2rem;
  padding-top: 0.6rem;
}

html.atelier body .story-book .wb-sheet .sb-open-num {
  position: absolute;
  right: -0.2rem;
  bottom: -0.6rem;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 7.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--spin) 55%, transparent);
  opacity: 0.6;
  pointer-events: none;
}

html.atelier body .story-book .wb-sheet .sb-tape {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0.36rem 1.15rem !important;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px),
    var(--tape);
  clip-path: polygon(2% 0, 98% 0, 100% 20%, 97.5% 40%, 100% 60%, 97.5% 80%, 100% 100%, 2% 100%, 0 80%, 2.5% 60%, 0 40%, 2.5% 20%);
  rotate: -3deg;
  margin-bottom: -0.55rem !important;
}

html.atelier .story-book .sb-tape.is-tape-a { --tape: color-mix(in srgb, var(--spin) 48%, transparent); }
html.atelier .story-book .sb-tape.is-tape-b { --tape: color-mix(in srgb, var(--accent) 30%, transparent); }
html.atelier .story-book .sb-tape.is-tape-c { --tape: color-mix(in srgb, var(--ink) 16%, transparent); }
html.atelier .story-book .sb-tape.is-tape-d { --tape: color-mix(in srgb, var(--spin) 26%, transparent); }

/* Her chapter sticker: pops in, smiles, then pulls the chapter's face with
   a scribbled aside; hover gets the second face and a little bounce. */
html.atelier .story-book .sb-mood-wrap {
  position: relative;
  display: block;
  margin: 0.35rem 0 0.8rem;
}

html.atelier .story-book .sb-cameo.is-mood {
  --cameo-w: 7.4rem;
  rotate: -5deg;
}

html.atelier .story-book .sb-cameo.is-mood.is-tilt-r {
  rotate: 5deg;
}

html.atelier .story-book .sb-mood-wrap.is-live .sb-cameo.is-mood {
  animation: sb-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

html.atelier .story-book .sb-mood-wrap.is-boop .sb-cameo.is-mood {
  animation: sb-boop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier .story-book .sb-cameo.is-mood .sb-cameo-art.is-face {
  transition: opacity 0.22s ease;
}

@keyframes sb-pop {
  0% { scale: 0.4; opacity: 0; translate: 0 18px; }
  60% { scale: 1.08; opacity: 1; translate: 0 -4px; }
  100% { scale: 1; opacity: 1; translate: 0 0; }
}

@keyframes sb-boop {
  0% { scale: 1; }
  40% { scale: 1.1; translate: 0 -5px; }
  100% { scale: 1; translate: 0 0; }
}

html.atelier body .story-book .wb-sheet .sb-mood-note {
  position: absolute;
  top: 0.4rem;
  left: calc(100% + 0.2rem);
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
  rotate: 8deg;
  opacity: 0;
  translate: -6px 4px;
  transition: opacity 0.35s ease, translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.atelier body .story-book .wb-sheet .sb-mood-note.is-left {
  left: auto;
  right: calc(100% + 0.2rem);
  rotate: -8deg;
  translate: 6px 4px;
}

html.atelier body .story-book .wb-sheet .sb-mood-wrap.is-live .sb-mood-note {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.95s;
}

/* Found objects on text pages: a paperclip, a strip of tape, a chapter
   stamp or a dog-eared corner, one per page in turn. */
html.atelier .story-book .sb-keep {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

html.atelier .story-book .sb-text.has-keep-top .wb-running {
  padding-right: 1.7rem;
}

html.atelier .story-book .sb-k-clip {
  top: -0.55rem;
  right: 1.35rem;
  width: 0.9rem;
  height: 2.6rem;
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 55%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
  rotate: 8deg;
}

html.atelier .story-book .sb-k-tape {
  top: 0.45rem;
  right: -0.95rem;
  width: 3.6rem;
  height: 1.05rem;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0 4px, transparent 4px 9px),
    color-mix(in srgb, var(--spin) 34%, transparent);
  clip-path: polygon(3% 0, 97% 0, 100% 25%, 97% 50%, 100% 75%, 97% 100%, 3% 100%, 0 75%, 3% 50%, 0 25%);
  rotate: 42deg;
}

html.atelier .story-book .sb-k-stamp {
  bottom: 2.3rem;
  right: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.3rem;
  height: 3.3rem;
  border: 1.5px dashed color-mix(in srgb, var(--spin) 60%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--spin) 10%, transparent);
  color: color-mix(in srgb, var(--spin) 75%, transparent);
  rotate: -14deg;
}

html.atelier .story-book .sb-k-stamp b {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1rem;
  line-height: 1;
}

html.atelier .story-book .sb-k-stamp i {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-size: 0.42rem;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

html.atelier .story-book .sb-k-fold {
  top: 0;
  right: 0;
  width: 1.6rem;
  height: 1.6rem;
  background: linear-gradient(225deg, var(--paper) 50%, color-mix(in srgb, var(--ink) 14%, #e2d4bf) 50%);
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.12);
}

html.atelier body.dark-theme .story-book .sb-k-fold {
  background: linear-gradient(225deg, var(--paper) 50%, color-mix(in srgb, var(--ink) 18%, var(--card)) 50%);
}

/* The page's opening line reads like a handwritten aside. */
html.atelier body .story-book .wb-sheet .wb-kicker {
  font-family: var(--serif, 'Fraunces', serif) !important;
  font-style: italic;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

html.atelier .story-book .sb-opener .sb-open-title {
  position: relative;
  z-index: 1;
  max-width: 15ch;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

html.atelier .story-book .sb-squiggle {
  display: block;
  width: 5.2rem;
  height: 0.8rem;
  margin-top: 0.45rem;
  overflow: visible;
  fill: none;
  stroke: var(--spin);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Act II: the one dark page, where the story turns. */
html.atelier body .story-book .wb-sheet.sb-act-page {
  background-color: #1c1815 !important;
}

html.atelier body .story-book .sb-act-page .sb-open-title {
  color: #f3eee4 !important;
  -webkit-text-fill-color: #f3eee4 !important;
}

html.atelier body .story-book .sb-act-page .sb-open-roman {
  font-size: clamp(3.4rem, 9vw, 4.6rem);
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1.2px var(--spin);
}

html.atelier body .story-book .sb-act-page .wb-folio {
  color: rgba(243, 238, 228, 0.55);
}

/* Text pages */
html.atelier .story-book .wb-folio {
  font-family: var(--serif, 'Fraunces', serif);
  font-style: italic;
}

html.atelier body .story-book .wb-sheet .sb-end-mark {
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

html.atelier body .story-book .sb-text .wb-running span:first-child {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
}

html.atelier .story-book .sb-doodle {
  position: absolute;
  z-index: 1;
  right: 2.4rem;
  bottom: 2.6rem;
  width: 3.4rem;
  height: 3.4rem;
  overflow: visible;
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 55%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  rotate: -8deg;
  pointer-events: none;
}

html.atelier .story-book .sb-doodle.is-left {
  right: auto;
  left: 2.6rem;
  rotate: 7deg;
}

html.atelier body.dark-theme .story-book .sb-doodle {
  stroke: color-mix(in srgb, var(--spin) 60%, transparent);
}

html.atelier body .story-book .wb-sheet.sb-act-page {
  background-image: none !important;
}

html.atelier .story-book .wb-sheet.has-ring::after {
  content: '';
  position: absolute;
  right: 22%;
  bottom: 2.4rem;
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 58%, rgba(150, 96, 48, 0.16) 61%, rgba(150, 96, 48, 0.08) 64%, transparent 67%),
    radial-gradient(circle at 40% 45%, transparent 0 60%, rgba(150, 96, 48, 0.07) 64%, transparent 70%);
  rotate: 18deg;
  pointer-events: none;
}

html.atelier body.dark-theme .story-book .wb-sheet.has-ring::after {
  opacity: 0.7;
  filter: invert(0.4);
}

html.atelier body .story-book .wb-pull mark {
  padding: 0 0.15em;
  font-style: italic;
  background: linear-gradient(100deg, transparent 0.15em, color-mix(in srgb, var(--spin) 30%, transparent) 0.3em, color-mix(in srgb, var(--spin) 22%, transparent) 96%, transparent);
  background-size: 100% 62%;
  background-position: 0 70%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Contents */
html.atelier body .story-book .wb-sheet .sb-toc-note {
  position: absolute;
  z-index: 2;
  top: calc(var(--wb-rule) * 2 - 6px);
  right: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--spin) !important;
  -webkit-text-fill-color: var(--spin) !important;
  rotate: -5deg;
  pointer-events: none;
}

html.atelier .story-book .sb-toc-note svg {
  width: 1.8rem;
  height: 1.3rem;
  margin: 0 0.9rem 0 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.atelier .story-book .wb-toc-title {
  background: linear-gradient(color-mix(in srgb, var(--spin) 26%, transparent), color-mix(in srgb, var(--spin) 26%, transparent)) no-repeat 0 80% / 0% 45%;
  transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

html.atelier .story-book .wb-toc-row:hover .wb-toc-title,
html.atelier .story-book .wb-toc-row:focus-visible .wb-toc-title {
  background-size: 100% 45%;
}

/* The end, and a marbled endpaper opposite it. */
html.atelier .story-book .sb-end-page .wb-cta {
  align-self: center;
}

html.atelier body .story-book .wb-sheet.sb-endpaper {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--foil) 55%, transparent) 0 1.3px, transparent 1.8px) 0 0 / 18px 18px,
    radial-gradient(circle, rgba(244, 236, 220, 0.18) 0 1px, transparent 1.5px) 9px 9px / 18px 18px,
    var(--cloth) !important;
}

html.atelier body .story-book .sb-endpaper .sb-open {
  justify-content: center;
}

html.atelier body .story-book .sb-endpaper .sb-endpaper-note {
  padding: 0.7rem 1.1rem;
  border-radius: 3px;
  background: var(--label);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--label-ink) !important;
  -webkit-text-fill-color: var(--label-ink) !important;
  rotate: 2deg;
}

@media (max-width: 700px) {
  html.atelier .story-book .sb-cameo.is-sticker {
    --cameo-w: 5.6rem;
  }

  html.atelier .story-book .sb-cameo.is-mood {
    --cameo-w: 6rem;
  }

  html.atelier body .story-book .wb-sheet .sb-mood-note {
    font-size: 0.82rem;
  }

  html.atelier body .story-book .wb-sheet .sb-open-num {
    font-size: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.atelier .story-book .sb-cameo.is-sticker,
  html.atelier .story-book .wb-toc-title,
  html.atelier body .story-book .wb-sheet .sb-mood-note {
    transition: none;
  }

  html.atelier .story-book .sb-mood-wrap .sb-cameo.is-mood {
    animation: none !important;
  }
}