/* Mangue: O Manguezal das Histórias. An open manuscript on a dark desk. The left page reads, the right page grows.
   Everything is placed in the art's own pixels (1170x695) as percentages of the stage, and sized in stage cqw. */
body[data-world=mangue]{--accent:#c9a24a;color-scheme:dark}
body[data-world=mangue] .world-color{background:#13160f}
body[data-world=mangue] #space-canvas{opacity:0}
body[data-world=mangue]:not(.is-traveling) .morfeu-companion{visibility:hidden}

.folio-view{padding:0;overflow:hidden;container-type:size;font-synthesis:style;--ink:#2b251c;--ink-soft:#5e5443;--rubric:#8e2a1f;--green:#235539;--vellum:#efe6cf}
.folio-view:before{content:"";position:absolute;inset:-24px;background:url(assets/art/mangue-manuscript.webp) center/cover;filter:blur(18px) brightness(.55) saturate(.8)}
.folio-viewport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.folio-stage{--w:min(100cqw,calc(100cqh * 1170 / 695 * 1.04));position:relative;flex:none;width:var(--w);aspect-ratio:1170/695;container-type:inline-size;perspective:4200px;transition:translate .6s var(--ease)}
.folio-art{position:absolute;inset:0;width:100%;height:100%;user-select:none;pointer-events:none}

/* Left page: the reading column sits inside the ruled frame of the art. */
.folio-left{position:absolute;left:18.4%;top:13.2%;width:26.9%;height:68.4%;display:flex;flex-direction:column;color:var(--ink);overflow:auto;scrollbar-width:thin;scrollbar-color:#2b251c33 transparent;padding:0 .4cqw}
.folio-arrival{display:flex;align-items:center;gap:.7cqw;font:clamp(10px,.92cqw,13px)/1.2 Fell,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rubric)}
.folio-arrival img{width:clamp(44px,5cqw,64px);filter:brightness(.18) sepia(.6)}
.folio-left h2{font:clamp(21px,2.25cqw,32px)/1.02 Fell,Georgia,serif;margin:.5cqw 0 .2cqw;outline:none}
.folio-scene{flex:1;outline:none;font:clamp(13.5px,1.24cqw,17px)/1.45 Alegreya,Georgia,serif}
.folio-scene p{margin-top:.55em}
.folio-chapter{font:italic clamp(12px,1.08cqw,15px)/1.3 Fell,Georgia,serif;color:var(--ink-soft);padding-bottom:.5em;border-bottom:1px solid #2b251c38}
.folio-chapter em{font-style:italic;color:var(--ink)}
.folio-lead{min-height:2.9em}
.folio-initial{float:left;margin:.08em .12em -.1em 0;font:500 3.05em/.82 KnightGothic,Fell,serif;color:var(--rubric);text-shadow:.03em .03em 0 #c9a24a88}
.folio-ask{clear:both;padding-top:.3em;font:italic clamp(12px,1.05cqw,15px)/1.3 Fell,Georgia,serif;color:var(--ink-soft)}
.folio-choices{display:flex;flex-direction:column;gap:.45em;margin-top:.45em}
.folio-choice{display:flex;align-items:center;flex-wrap:wrap;gap:.1em .55em;padding:.4em .65em;text-align:left;color:var(--ink);font:italic 1em/1.25 Alegreya,Georgia,serif;border:1px solid #2b251c66;border-radius:2px;background:#fbf6e833;transition:background .2s,translate .2s,border-color .2s}
.folio-choice>span:not(.folio-hand){flex:1;min-width:8em}
.folio-hand{font-style:normal;font-size:1.25em;line-height:1;color:var(--rubric);transition:translate .2s}
.folio-choice:hover,.folio-choice:focus-visible{background:#23553914;border-color:var(--green);translate:.2em 0}
.folio-choice:hover .folio-hand{translate:.15em 0}
.folio-choice.is-seen>span:not(.folio-hand):after{content:" ·  já lido";font-size:.78em;color:var(--ink-soft)}
.folio-choice.is-custom{border-color:var(--green);color:var(--green)}
.folio-choice.is-locked{border-style:dashed;border-color:#2b251c40;color:#2b251c8c;cursor:not-allowed}
.folio-choice.is-locked .folio-hand{color:#2b251c59}
.folio-choice.is-shaking{animation:shake .4s}
@keyframes shake{25%{translate:-.25em 0}50%{translate:.25em 0}75%{translate:-.12em 0}}
.folio-seal{display:inline-flex;align-items:center;gap:.35em;padding:.15em .6em .2em;border-radius:99px;background:var(--rubric);color:#f6e8cc;font:normal .72em/1.1 Fell,Georgia,serif;letter-spacing:.02em;white-space:nowrap}
.folio-seal svg{width:1em;height:1em;stroke-width:2.2}
.folio-end{clear:both;padding-top:.4em;font-style:italic;color:var(--ink-soft)}
.folio-end button,.draft-actions button[data-action]{padding:0;color:var(--rubric);font:inherit;text-decoration:underline;text-underline-offset:3px}
.folio-foot{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-top:.8cqw;padding-top:.5cqw;border-top:1px solid #2b251c24;font:italic clamp(11px,.92cqw,13px)/1.3 Fell,Georgia,serif;color:var(--ink-soft)}
.folio-foot a{display:inline-flex;align-items:center;gap:.35em;font:700 clamp(11px,.92cqw,13px)/1.2 Manrope,sans-serif;font-style:normal;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.folio-foot svg{width:1.1em;height:1.1em}

/* Write mode: the same story as a draft sheet. */
.draft-intro{font-size:.88em;color:var(--ink-soft)}
.draft-list{list-style:none;margin:.5em 0 0;padding:0;display:flex;flex-direction:column;gap:.3em;font-size:.8em;line-height:1.28}
.draft-scene{padding:.3em .5em .35em;border-left:2px solid #2b251c38}
.draft-scene.is-here{border-color:var(--rubric);background:#8e2a1f0d}
.draft-scene>p{margin:0;font:1.05em/1.25 Fell,Georgia,serif}
.draft-scene>p b{display:inline-block;min-width:1.8em;font-weight:400;color:var(--rubric)}
.draft-scene small{margin-left:.6em;font:italic .78em Fell,Georgia,serif;color:var(--green)}
.draft-scene ul{list-style:none;margin:.15em 0 0 1.8em;padding:0}
.draft-scene li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .4em}
.draft-scene li b{font-weight:400;color:var(--ink-soft)}
.draft-scene li.is-custom{color:var(--green)}
.draft-scene .folio-seal{font-size:.8em}
.draft-cta{margin-top:.7em}
.draft-cta button{padding:.45em .9em;border:1px dashed var(--green);border-radius:2px;color:var(--green);font:italic .88em/1.3 Alegreya,Georgia,serif;text-align:left}
.draft-cta button:hover{background:#2355391a}
.draft-back{margin-top:.6em;font-size:.85em}
.draft-back button{color:var(--ink-soft);font:italic 1em Fell,Georgia,serif;text-decoration:underline;text-underline-offset:3px}
.draft-form{margin-top:.6em;display:flex;flex-direction:column;gap:.45em;font-size:.86em}
.draft-from{margin:0}
.draft-from small{color:var(--ink-soft)}
.draft-form label{display:flex;flex-direction:column;gap:.15em}
.draft-form label span{font:italic .92em Fell,Georgia,serif;color:var(--ink-soft)}
.draft-form input,.draft-form textarea{width:100%;padding:.3em .5em;border:0;border-bottom:1px solid #2b251c66;background:#fbf6e866;color:var(--ink);font:italic 1em/1.35 Alegreya,Georgia,serif;resize:none}
.draft-form input:focus,.draft-form textarea:focus{outline:none;border-color:var(--green);background:#fbf6e8b3}
.draft-actions{display:flex;align-items:center;gap:1em;margin-top:.2em}
.draft-actions button[type=submit]{padding:.45em 1em;border-radius:99px;background:var(--green);color:#f6f2e6;font:700 .9em/1 Manrope,sans-serif}
.draft-actions button[type=submit]:hover{background:#173d27}

/* Morfeu, as marginalia. He walks along the bottom margin a little further with every choice. */
.folio-cat{--walk:0;position:absolute;left:calc(30.5% + var(--walk) * 2.1%);top:81.6%;width:8.2%;display:flex;align-items:flex-end;transition:left 1.1s var(--ease);pointer-events:none}
.folio-cat img{width:100%;mix-blend-mode:multiply}
.folio-cat.is-stepping[data-pose=walk] img{animation:pad .28s steps(2) 4}
.folio-cat[data-pose=sit] img{rotate:-4deg;translate:0 4%}
@keyframes pad{50%{translate:0 -6%}}
.folio-cat p{position:absolute;right:calc(100% + .8cqw);bottom:12%;width:11cqw;text-align:right;font:italic clamp(10.5px,.95cqw,13px)/1.3 Fell,Georgia,serif;color:var(--ink-soft)}
.folio-cat p:before{content:"“"}.folio-cat p:after{content:"”"}

/* Right page: roots drawn in ink over the art, knots are scenes, propagules in the water are endings. */
.folio-tree{position:absolute;inset:0;pointer-events:none}
.folio-roots{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round;overflow:visible}
.roots-idle path{stroke:#5b4a35;stroke-width:1.4;opacity:.3}
.root{transition:stroke-width .3s,opacity .3s}
.root.is-pencil{stroke:#5e5443;stroke-width:1.3;opacity:.6;stroke-dasharray:.012 .014}
.root.is-grown{stroke:#3b2d1c;stroke-width:3;filter:url(#ink-bleed)}
.root.is-path{stroke:#1d140b;stroke-width:4.4}
.root.is-custom{stroke:var(--green)}
.root.is-new{stroke-dasharray:1;stroke-dashoffset:1;animation:grow 1.5s var(--ease) .1s forwards}
@keyframes grow{to{stroke-dashoffset:0}}
.folio-view[data-mode=write] .root.is-pencil{opacity:.85}

.folio-knots>button{position:absolute;left:var(--x);top:var(--y);pointer-events:auto;display:flex;flex-direction:column;align-items:center;color:var(--ink);font:italic clamp(10px,.98cqw,14px)/1.15 Fell,Georgia,serif}
.folio-knots>button[aria-disabled=true]{cursor:default}
.knot{translate:-50% -50%}
.knot i{width:clamp(10px,1.15cqw,16px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--ink);background:var(--vellum);transition:scale .2s,background .2s}
.knot.is-known i{background:var(--ink)}
.knot.is-here i{background:var(--rubric);border-color:var(--rubric);box-shadow:0 0 0 .35cqw #8e2a1f2e;animation:here 2.4s ease-in-out infinite}
@keyframes here{50%{box-shadow:0 0 0 .7cqw #8e2a1f10}}
.knot span{position:absolute;top:50%;left:calc(100% + .5cqw);translate:0 -50%;white-space:nowrap;padding:.1em .35em;background:#f3ead4d9;border-radius:2px}
.knot[data-node=carta] span,.knot[data-node=start] span{left:auto;right:calc(100% + .5cqw)}
.knot[data-node=start] span{top:-40%}
.knot:not(.is-known) span{color:#5e5443b3;background:none}
.knot.is-known:hover i,.knot.is-known:focus-visible i{scale:1.35}

.propagule{translate:-50% 0;width:6.3cqw}
.propagule i{width:clamp(6px,.62cqw,9px);height:clamp(22px,2.6cqw,36px);border-radius:50% 50% 45% 45%/18% 18% 82% 82%;border:1.3px dashed #2b251c80;transition:translate .2s}
.propagule.is-known i{border:0;background:linear-gradient(#6f5a2c,#3f5a2e 40%,#2d4a2a);box-shadow:inset -1px 0 0 #1a2a17;animation:bob 3.2s ease-in-out infinite}
.propagule.is-secret:not(.is-known) i{border-color:#8e2a1f73}
.propagule.is-custom.is-known i{background:linear-gradient(#5d7a4a,var(--green))}
.propagule.is-here i{outline:2px solid var(--rubric);outline-offset:3px}
.propagule span{margin-top:.35cqw;text-align:center;text-wrap:balance}
.propagule:not(.is-known) span{color:#2b251c80}
.propagule.is-known:hover i,.propagule.is-known:focus-visible i{translate:0 -10%}
@keyframes bob{50%{translate:0 6%}}

.folio-ship{position:absolute;left:51.2%;top:7.5%;width:8.6%;text-align:left}
.folio-ship img{width:100%;mix-blend-mode:multiply;opacity:.85;rotate:-8deg}
.folio-ship span{display:block;width:7em;margin-top:-.2cqw;font:italic clamp(10px,.9cqw,13px)/1.2 Fell,Georgia,serif;color:var(--ink-soft)}
.folio-count{position:absolute;left:52.5%;top:84.8%;font:italic clamp(12px,1.12cqw,16px)/1.2 Fell,Georgia,serif;color:var(--ink)}

/* The folded corner. Turning it flips the leaf over the gutter. */
.folio-turn{position:absolute;right:10.2%;bottom:8.3%;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:.8cqw;color:var(--ink);text-align:right}
.folio-curl{width:4.6cqw;aspect-ratio:1;background:linear-gradient(135deg,transparent 49%,#b9a984 50%,#efe3c4 64%,#d8c9a3);clip-path:polygon(100% 0,100% 100%,0 100%);box-shadow:-2px -2px 6px #0003;transition:width .25s var(--ease)}
.folio-turn-text{display:flex;flex-direction:column;padding-bottom:2.2cqw}
.folio-turn b{font:clamp(13px,1.3cqw,18px)/1.1 Fell,Georgia,serif;font-weight:400;color:var(--rubric)}
.folio-turn small{font:italic clamp(10.5px,.95cqw,13px)/1.2 Fell,Georgia,serif;color:var(--ink-soft)}
.folio-turn:hover .folio-curl,.folio-turn:focus-visible .folio-curl{width:6.2cqw}
.folio-turn:focus-visible{outline:2px dashed var(--rubric);outline-offset:4px}

.folio-leaf{position:absolute;left:50%;top:6.2%;width:39.8%;height:85.5%;transform-style:preserve-3d;transform-origin:left center;pointer-events:none;z-index:4}
.folio-leaf i{position:absolute;inset:0;backface-visibility:hidden}
.leaf-front{background:url(assets/art/mangue-manuscript.webp) 83% 42.6%/251.4% auto}
.leaf-back{rotate:y 180deg;background:linear-gradient(90deg,#d9cba5,#efe5cb 12%,#f1e8d0 70%,#e2d4b0);box-shadow:inset 18px 0 30px -18px #3b2d1c66}
.folio-leaf.is-turning[data-dir=forward]{animation:turn-forward .85s cubic-bezier(.45,.05,.3,1) forwards}
.folio-leaf.is-turning[data-dir=back]{animation:turn-back .85s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes turn-forward{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes turn-back{from{transform:rotateY(-180deg)}to{transform:rotateY(0)}}

.folio-tabs{display:none}
.folio-view :focus-visible:not([tabindex="-1"]){outline:2px dashed var(--rubric);outline-offset:3px}

/* Phones: the spread is wider than the screen, so show one page at a time. */
@media (max-width:760px){
  .folio-stage{--w:calc(100cqw * 1170 / 486);translate:calc(var(--w) * -94 / 1170) 0;margin-top:-6cqh}
  .folio-viewport{justify-content:flex-start}
  .folio-view[data-page=tree] .folio-stage{translate:calc(var(--w) * -572 / 1170) 0}
  .folio-left{left:12.6%;width:32.4%;top:8.2%;height:72.5%}
  .folio-scene{font-size:14px}
  .folio-cat{left:calc(31% + var(--walk) * 1.6%)}
  .folio-cat p{width:18cqw}
  .folio-view[data-mode=write] .folio-left{height:81%}
  .folio-view[data-mode=write] .folio-cat{visibility:hidden}
  .folio-turn{display:none}
  .folio-tabs{position:absolute;left:50%;bottom:10px;translate:-50% 0;z-index:5;display:flex;gap:2px;padding:3px;border-radius:99px;background:#1b1f16e6;box-shadow:0 0 0 1px #efe6cf2e}
  .folio-tabs button{padding:8px 16px;border-radius:99px;color:#e8dfc7;font:700 13px/1 Manrope,sans-serif}
  .folio-view[data-page=story] [data-page=story],.folio-view[data-page=tree] [data-page=tree],.folio-view[data-mode=write] [data-turn]{background:#efe6cf;color:#2b251c}
}
@media (max-width:760px) and (max-height:700px){.folio-stage{margin-top:-10cqh}}
@media (prefers-reduced-motion:reduce){.root.is-new{animation:none;stroke-dashoffset:0}.knot.is-here i,.propagule.is-known i{animation:none}.folio-stage,.folio-cat{transition:none}}
body.motion-paused .root.is-new{animation:none;stroke-dashoffset:0}
body.motion-paused .knot.is-here i,body.motion-paused .propagule.is-known i,body.motion-paused .folio-cat img{animation:none}

/* The brand is lettered on the dark desk beside the manuscript, in the book's hand. */
body[data-world=mangue] .site-header .studio-brand{opacity:.85;transition:opacity .2s,translate .2s var(--ease)}
body[data-world=mangue] .site-header .studio-brand:hover{opacity:1}
body[data-world=mangue] .site-header .studio-brand .brand-original{filter:sepia(.5) drop-shadow(0 2px 8px #000a)}
body[data-world=mangue] .brand-name{font:600 19px/.9 Alegreya,Georgia,serif;color:#e9dcc0;text-shadow:0 2px 10px #000c}