@font-face{font-family:'Shrikhand';src:url(/assets/fonts/shrikhand.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Lora';src:url(/assets/fonts/lora.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url(/assets/fonts/lora-italic.woff2) format('woff2');font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:'Shrikhand Fallback';src:local('Arial');size-adjust:119.56%;ascent-override:85.81%;descent-override:36.13%;line-gap-override:0%}
@font-face{font-family:'Lora Fallback';src:local('Arial');size-adjust:103.31%;ascent-override:97.38%;descent-override:26.52%;line-gap-override:0%}

:root{
  --berry:#7a1f4b;--berry-2:#9c2d62;--pink:#ff7aa8;--mint:#3bb39a;--mint-soft:#e3f5ef;--peach:#ffb38a;--peach-soft:#fff0e6;
  --cream:#fff6ec;--paper:#fffdf9;--ink:#2b2230;--muted:#6a5a66;--line:#f0dccd;
  --head:'Shrikhand','Shrikhand Fallback',Georgia,serif;
  --body:'Lora','Lora Fallback',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.1rem/1.8 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:var(--berry-2)}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.25;color:var(--berry);margin:0 0 .6em}
h1{font-size:clamp(2rem,4.4vw,3rem);text-align:center}
h2{font-size:clamp(1.55rem,3vw,2.05rem);text-align:center}
h3{font-size:1.12rem}
p{margin:0 0 1.1em}
.wrap{width:min(1100px,100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:sticky;top:0;z-index:30;background:var(--cream);border-bottom:3px solid var(--berry)}
.top-row{display:flex;align-items:center;gap:16px;min-height:68px;padding:8px 0}
.logo{display:flex;align-items:center;gap:10px;flex:none;color:var(--berry);text-decoration:none;font:400 1.3rem/1 var(--head)}
.logo svg{flex:none}
.cta{flex:0 1 auto;min-width:0;margin-left:auto;padding:13px 26px;border-radius:14px;background:var(--mint);color:#fff;text-align:center;text-decoration:none;font:700 1.08rem/1.25 'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;letter-spacing:.01em;border:2px solid #fff;box-shadow:0 0 0 3px rgba(59,179,154,.35);animation:cta-swap 2.4s ease-in-out infinite;transition:transform .15s}
.cta:hover{transform:scale(1.03)}
@keyframes cta-swap{0%,40%{background:var(--mint);box-shadow:0 0 0 3px rgba(59,179,154,.35)}50%,90%{background:var(--berry);box-shadow:0 0 0 5px rgba(122,31,75,.3)}100%{background:var(--mint);box-shadow:0 0 0 3px rgba(59,179,154,.35)}}

/* menu under the slider */
.menu{padding:16px 0 0}
.menu-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.menu a{padding:8px 16px;border-radius:999px;background:var(--paper);border:2px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:.97rem;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.menu a:hover,.menu a.is-here{background:var(--peach-soft);border-color:var(--peach);color:var(--berry)}

/* slider: caption sits under the picture like a book plate */
.stage{padding:28px 0 8px}
.stage-box{position:relative;padding:12px 12px 0;border-radius:26px;background:var(--paper);box-shadow:0 16px 34px rgba(122,31,75,.14)}
.stage-list{display:grid}
.scene{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.scene.is-on{opacity:1;visibility:visible}
.scene img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:18px}
.scene figcaption{padding:12px 110px 14px 6px;font-style:italic;color:var(--muted);font-size:1rem;line-height:1.4}
.stage-dots{position:absolute;right:22px;bottom:15px;display:flex;gap:8px}
.stage-dots button{width:11px;height:11px;padding:0;border:2px solid var(--berry);border-radius:50%;background:transparent;cursor:pointer;transition:background .2s}
.stage-dots button.is-on{background:var(--berry)}

/* story column */
.story{width:min(760px,100% - 32px);margin:0 auto;padding:46px 0 70px}
.story-head{padding-bottom:10px}
.lead::first-letter{float:left;font:400 4.1rem/.9 var(--head);color:var(--pink);padding:6px 10px 0 0}
.chapter{display:flow-root;padding-top:26px}
.chapter h2::before{content:"";display:block;width:90px;height:16px;margin:0 auto 14px;background:radial-gradient(circle,var(--pink) 0 5px,transparent 6px) 0 50%/30px 16px repeat-x}

/* arch framed pictures */
.arch{width:290px;margin:6px 0 18px;text-align:center}
.arch img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:145px 145px 18px 18px;border:6px solid var(--paper);box-shadow:0 12px 26px rgba(122,31,75,.16)}
.arch figcaption{padding-top:8px;font-style:italic;font-size:.95rem;color:var(--muted);line-height:1.4}
.arch-right{float:right;margin-left:30px}
.arch-left{float:left;margin-right:30px}

/* margin notes and scenes */
.margin-note{clear:both;margin:8px 0 18px;padding:16px 20px 2px 54px;position:relative;background:var(--mint-soft);border-radius:16px}
.margin-note::before{content:"";position:absolute;left:18px;top:19px;width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--pink) 0 25%,#fff 0 50%,var(--pink) 0 75%,#fff 0);box-shadow:0 0 0 2px var(--pink)}
.margin-note p{font-size:1rem;color:#24584d}
.scene-box{margin:8px 0 22px;padding:20px 24px 4px;background:var(--peach-soft);border-left:5px solid var(--peach);border-radius:4px 18px 18px 4px;font-style:italic}
.scene-box .sum{font:400 1.1rem/1.4 var(--head);font-style:normal;color:var(--berry)}

/* paytable as price tags */
.tags{list-style:none;margin:10px 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tag{position:relative;padding:14px 14px 10px 26px;background:var(--paper);border:2px solid var(--line);border-radius:6px 16px 16px 6px;font-variant-numeric:tabular-nums}
.tag::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--c)}
.tag b{display:block;font:400 1.02rem/1.3 var(--head);color:var(--berry);margin-bottom:4px}
.tag span{display:flex;justify-content:space-between;font-size:.92rem;color:var(--muted);line-height:1.6}
.tag em{font-style:normal;font-weight:700;color:var(--ink)}

/* facts */
.facts{list-style:none;margin:0 0 20px;padding:0}
.facts li{position:relative;padding-left:30px;margin-bottom:14px}
.facts li::before{content:"";position:absolute;left:4px;top:11px;width:12px;height:12px;border-radius:50%;background:var(--berry)}
.facts b{color:var(--berry)}

/* open questions */
.qa-grid{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:6px}
.qa{padding:22px 22px 6px;background:var(--paper);border-radius:20px;border:2px dashed var(--peach)}
.qa h3{color:var(--berry)}
.qa p{font-size:1rem;color:var(--muted)}

/* footer */
.foot{background:var(--berry);color:#f6dce8;padding:44px 0 36px;text-align:center}
.foot-row{max-width:700px}
.foot-logo{font:400 1.6rem/1 var(--head);color:#fff}
.foot-small{font-size:.92rem;color:#e3b5cb;margin:0}

@media (max-width:900px){
}
@media (max-width:760px){
  body{font-size:1.04rem}
  .logo span{display:none}
  .logo svg{width:34px;height:34px}
  .cta{padding:9px 14px;font-size:.92rem;line-height:1.2}
  .menu-row{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .menu-row::-webkit-scrollbar{display:none}
  .menu a{padding:7px 14px;font-size:.92rem}
  .stage{padding-top:16px}
  .stage-box{padding:8px 8px 0;border-radius:20px}
  .scene img{border-radius:14px}
  .scene figcaption{padding:10px 70px 12px 4px;font-size:.93rem}
  .stage-dots{right:14px;bottom:13px;gap:6px}
  .story{padding-top:32px}
  .arch,.arch-right,.arch-left{float:none;width:min(290px,100%);margin:6px auto 22px}
  .tags{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tag{padding:12px 10px 8px 24px}
  .qa-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene,.stage-dots button,.cta,.menu a{transition:none}
  .cta{animation:none;background:var(--berry)}
}