

.mv2{--wine:#63233e;--edge:#c7a777;--paper:#fffaf0;width:100%;max-width:260px;margin:0 auto;color:#563742;font-family:Arial,sans-serif}
.mv2 *{box-sizing:border-box}
.mv2 .frame{height:390px;width:100%;position:relative;overflow:hidden;perspective:1050px;background:linear-gradient(110deg,#fffdf8,#f2e5ca);border:1px solid var(--edge);border-radius:10px;box-shadow:0 5px 15px #49302025;isolation:isolate}
.mv2 .frame:before{content:"";position:absolute;inset:8px auto 8px 7px;width:3px;background:#c6a16c;border-radius:3px;z-index:11;pointer-events:none}
.mv2 .sheet{position:absolute;inset:0;overflow:hidden;padding:14px;visibility:hidden;opacity:0;transform-origin:5% 50%;transform:rotateY(-85deg);pointer-events:none;backface-visibility:hidden}
.mv2 .sheet.active{visibility:visible;opacity:1;pointer-events:auto;animation:page-in .63s cubic-bezier(.22,.72,.2,1) both}
.mv2 .sheet.depart{visibility:visible;opacity:1;pointer-events:none;animation:vanish .8s ease-in both}
@keyframes page-in{0%{opacity:0;transform:rotateY(-85deg) skewY(-3deg);filter:brightness(.78)}100%{opacity:1;transform:rotateY(0);filter:none}}
@keyframes vanish{0%{opacity:1;filter:blur(0);transform:scale(1)}45%{opacity:.75;filter:blur(1px);transform:scale(1.02)}100%{opacity:0;filter:blur(6px);transform:scale(1.08)}}
.mv2 .journal{display:flex;align-items:center;justify-content:center;padding:7px 8px 10px 13px;background:#fffdf8}
.mv2 .journal a{display:flex;flex-direction:column;height:100%;width:100%;text-decoration:none;position:relative;outline-offset:2px}
.mv2 .journal img{display:block;width:100%;height:250px;object-fit:contain;object-position:top center;flex:0 0 auto}
.mv2 .journal .glyphwell{position:relative;flex:1 1 auto;min-height:68px;margin:7px 4px 7px 4px;border-radius:10px;border:1px dashed #d5bc92;background:radial-gradient(circle at 50% 50%,#fffdf8 0,#fbf2df 56%,#f3e5c9 100%);overflow:hidden;box-shadow:inset 0 1px 0 #fffaf0,inset 0 0 14px #ceb28722}
.mv2 .journal .glyphwell:before{content:'';display:none}
.mv2 .journal .gchar{position:absolute;left:var(--x);top:var(--y);font-family:Georgia,serif;font-weight:700;font-size:var(--size);color:var(--tone);opacity:.78;text-shadow:0 1px 0 #fff7ea,0 0 6px #fff7ea;transform:translate(-50%,-50%) rotate(var(--rot))}
.mv2 .sheet.active .glyphwell .gchar{animation:drift var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay)}
.mv2 .glyphwell .gchar{transition:opacity .35s ease,filter .35s ease}
.mv2 .glyphwell.composing .gchar{opacity:0!important;filter:blur(4px)}
.mv2 .typedline{position:absolute;inset:3px 8px;display:flex;align-items:stretch;justify-content:flex-start;padding-top:0;color:#63233e;font:italic 700 18px/1.08 "URW Chancery L","Apple Chancery","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;text-align:left;letter-spacing:-.1px;z-index:2;opacity:0;transition:opacity .16s ease;white-space:normal}
.mv2 .glyphwell.composing .typedline,.mv2 .glyphwell.written .typedline{opacity:1}
.mv2 .typedline .word{display:inline-block;white-space:nowrap;margin-right:.12em;vertical-align:baseline}
.mv2 .typedline .inkletter{display:inline-block;white-space:pre;opacity:0;transform:translate(var(--from-x),var(--from-y)) rotate(var(--from-rot)) scale(.7);filter:blur(1px)}
.mv2 .typedline .inkletter.arrive{animation:ink-land .48s cubic-bezier(.19,.8,.23,1.06) both}
@keyframes ink-land{0%{opacity:0;transform:translate(var(--from-x),var(--from-y)) rotate(var(--from-rot)) scale(.7);filter:blur(1.6px)}35%{opacity:.7}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1);filter:blur(0)}}
.mv2 .caret{display:inline-block;width:1.5px;height:1em;background:#63233e;vertical-align:-.12em;margin-left:1px;animation:blink .65s steps(1,end) infinite}
.mv2 .glyphwell.written .caret{animation:none;opacity:0}
@keyframes blink{50%{opacity:0}}
.mv2 .journal .openlabel{position:relative;bottom:auto;left:auto;right:auto;flex:0 0 31px;text-align:center;background:#fff7e6ed;color:#155e87;border:1px solid #c7a777;border-radius:5px;padding:7px 2px;font:700 12px Arial,sans-serif}
@keyframes drift{0%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.96)}35%{opacity:.95}50%{transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) rotate(calc(var(--rot) + var(--twist))) scale(1.08)}100%{transform:translate(calc(-50% + var(--mx2)),calc(-50% + var(--my2))) rotate(calc(var(--rot) - var(--twist))) scale(.98);opacity:.52}}
.mv2 .links{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px 12px 16px 18px;background:linear-gradient(145deg,#fcf8ef,#f1e5cc)}
.mv2 .links a{height:105px;border:1px solid #bda075;border-radius:10px;text-decoration:none;color:#135686;background:linear-gradient(135deg,#fffefa,#f0e3c6);box-shadow:0 3px 6px #5a402015;display:flex;align-items:center;gap:8px;padding:10px 8px;font:700 12px/1.28 Arial,sans-serif}
.mv2 .links a:hover,.mv2 .links a:focus-visible{background:#fff8e7;outline:2px solid #29688f;outline-offset:1px}
.mv2 .icon{width:22px;flex:0 0 22px;height:22px;display:grid;place-items:center;background:#2270ba;color:white;border-radius:50%;font-size:12px}.mv2 .youtube{background:#d93434}.mv2 .bookicon{background:#b78a4e}
.mv2 .sub{font-size:10px;font-weight:400;color:#79644e;display:block;margin-top:7px}
.mv2 .burst{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:25}
.mv2 .char{position:absolute;left:50%;top:46%;font-family:Georgia,serif;font-size:var(--size);font-weight:900;opacity:0;color:var(--color);text-shadow:0 1px 2px #fff9ef,0 0 2px #fff9ef;line-height:1}
.mv2 .burst.run .char{animation:scatter .88s cubic-bezier(.1,.65,.35,1) both;animation-delay:var(--delay)}
@keyframes scatter{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}12%{opacity:1}50%{opacity:1;transform:translate(calc(-50% + var(--dx) * .65),calc(-50% + var(--dy) * .65)) scale(1.15) rotate(calc(var(--spin) * .7))}80%{opacity:.88}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.6) rotate(var(--spin))}}
.mv2 .tools{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px}
.mv2 .tools button{background:#fff9ed;color:#62283e;border:1px solid var(--edge);border-radius:6px;min-height:32px;padding:6px 9px;cursor:pointer;font-size:12px}
.mv2 .tools button:focus-visible{outline:2px solid #1665a5;outline-offset:2px}
.mv2 .dots{display:flex;gap:5px}.mv2 .dot{width:7px;height:7px;border-radius:50%;background:#c8aea4}.mv2 .dot.on{background:#63233e;width:10px;height:10px}
.mv2 .hint{font:11px/1.4 Arial,sans-serif;text-align:center;margin:6px 0 0;color:#6a5a4e}
@media(prefers-reduced-motion:reduce){.mv2 .sheet.active,.mv2 .sheet.depart,.mv2 .burst.run .char,.mv2 .sheet.active .glyphwell .gchar,.mv2 .caret{animation:none!important}.mv2 .sheet.active{transform:none;opacity:1}}

.mv2 .typedline{font-size:18px!important;line-height:1.04!important;letter-spacing:-.15px!important;color:#63233e!important;}

.mv2 .typedtext,.mv2 .typedline,.mv2 .typed-phrase,.mv2 .scribe-text{margin-top:0;}
.mv2 .typedline .typedvalue{display:flex;flex-direction:column;justify-content:space-evenly;width:100%;height:100%;min-height:0;}
.mv2 .typedline .writtenrow{display:block;white-space:nowrap;line-height:1.04;}
.mv2 .typedline .caret{position:absolute;right:1px;bottom:7px;}
.mv2 .typedline .inkletter.dotletter{margin-right:1px;}


/* Right column width in the Picostrap homepage; preserve v10 scale where room permits. */
.mv-auto-mount {width:100%;min-width:0;display:block;}
.mv-auto-mount .mv2 {width:100%;max-width:260px;container-type:inline-size;}
@container (max-width:220px) { .mv2 .typedline {font-size:14px!important;line-height:1.07!important;} .mv2 .journal img {height:250px;} .mv2 .links {padding:12px 7px 12px 12px;} .mv2 .links a {font-size:11px;} .mv2 .sheet.journal {padding:7px 6px 9px 10px;} }

/* Phone: retain the existing three original left cards next to the book,
   both immediately below the photo section, never as an overlay. */
@media (max-width:767px) {
 .mv-mobile-home-host {
   display:grid!important;
   grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
   align-items:start!important;
   gap:10px!important;
   width:100%!important;
   max-width:100%!important;
   box-sizing:border-box!important;
   padding:12px 9px 18px!important;
   margin:0!important;
   background:#fbf6eb;
   clear:both;
   overflow:hidden;
 }
 .mv-mobile-home-host .mv-mobile-left-column,
 .mv-mobile-home-host .mv-mobile-book-column {
   min-width:0!important;
   max-width:100%!important;
   width:100%!important;
   box-sizing:border-box!important;
   overflow:visible;
 }
 .mv-mobile-home-host .mv-mobile-left-column > * { margin:0!important; }
 .mv-mobile-home-host .mv-mobile-left-column a { max-width:100%; }
 .mv-mobile-home-host .mv-mobile-book-column {display:flex;justify-content:center;align-items:flex-start;}
 .mv-mobile-home-host .mv-auto-mount { display:block!important;position:relative!important;inset:auto!important;min-height:0!important;max-width:none!important;overflow:visible!important;}
 .mv-mobile-home-host .mv2 { margin:0!important;container-type:normal!important; }
}

@media(max-width:767px){.mv-mobile-home-host{grid-column:1/-1!important;flex-basis:100%!important;}}

/* v19: keep the left cards at their natural theme scale; enlarge only the right mini-carousel text on phones. */
@media (max-width:767px) {
  .mv-mobile-home-host .mv-mobile-book-column .mv2 .links a {
    font-size: 18px !important;
    line-height: 1.22 !important;
    padding-left: 11px !important;
    padding-right: 8px !important;
  }
  .mv-mobile-home-host .mv-mobile-book-column .mv2 .links .sub {
    font-size: 15px !important;
    line-height: 1.24 !important;
    margin-top: 6px !important;
  }
  .mv-mobile-home-host .mv-mobile-book-column .mv2 .icon {
    width: 24px !important;
    flex-basis: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }
  .mv-mobile-home-host .mv-mobile-book-column .mv2 .journal .openlabel {
    font-size: 13px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}


/* v21: the three right-side link cards fill the same vertical space as the
   three original left cards on phones; retain their original font sizing. */
@media (max-width:767px) {
  .mv-mobile-home-host .mv-mobile-book-column .mv2 .links {
    justify-content:stretch !important;
    gap:10px !important;
  }
  .mv-mobile-home-host .mv-mobile-book-column .mv2 .links > a {
    flex:1 1 0 !important;
    height:auto !important;
    min-height:0 !important;
  }
}
