/* Experience layer ("Disney 7"). Feature rules are scoped to an html.xp-<flag> class (or to elements that js/experience.js adds
   only when that flag is on), so ?exp=off (or all flags false) renders the previous model untouched. */

/* ---------- 2. Red silk ribbon bookmark ---------- */
.exp-ribbon{position:fixed;top:0;left:0;z-index:40;width:12px;height:0;pointer-events:none;opacity:0;
  transition:opacity .4s ease;will-change:transform}
.exp-ribbon.is-moving{transition:opacity .4s ease,transform .6s cubic-bezier(.3,.1,.2,1)}
.exp-ribbon.is-shown{opacity:1}
.exp-ribbon-silk,.exp-ribbon-tail{position:absolute;left:0;width:100%;
  background:linear-gradient(90deg,#8a1420 0%,#bd2333 26%,#dc4b59 44%,#c42a3a 58%,#97182a 100%)}
.exp-ribbon-silk{top:0;height:var(--len,26px);box-shadow:1px 0 2px rgba(40,10,10,.28);transition:height .25s ease-out}
.exp-ribbon-tail{top:var(--len,26px);height:14px;clip-path:polygon(0 0,100% 0,100% 100%,50% 56%,0 100%);transition:top .25s ease-out,opacity .3s ease}
/* tucked: the ribbon runs down and slips under the top edge of the Inspector's card */
.exp-ribbon.is-tucked .exp-ribbon-silk{box-shadow:1px 0 2px rgba(40,10,10,.28),inset 0 -6px 4px -3px rgba(40,10,10,.5);
  clip-path:polygon(0 0,50% 9px,100% 0,100% 100%,0 100%)}
.exp-ribbon.is-tucked .exp-ribbon-tail{opacity:0;transition:none}
@media (max-width:600px){.exp-ribbon{width:8px}}

/* ---------- 3. Trade-aware guide ---------- */
.xp-tradeAware .inspect-head{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-head-trade{font-weight:700}
.exp-head-trade.is-in{animation:exp-ink-in .5s ease-out both}
@keyframes exp-ink-in{0%{opacity:0;clip-path:inset(-20% 100% -20% 0)}100%{opacity:1;clip-path:inset(-20% 0 -20% 0)}}

/* ---------- 6. Every chip as a guide entry ---------- */
.xp-guideEntries #book-form .chip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.exp-entry,.exp-entry em,.exp-entry strong{font-style:normal}
.exp-entry{position:absolute;left:50%;bottom:calc(100% + 9px);z-index:6;display:block;width:max-content;max-width:min(300px,88vw);
  padding:10px 14px 11px;text-align:left;white-space:normal;font-style:normal;color:var(--ink);
  background:radial-gradient(120% 140% at 50% 38%,#f6eed8 0%,#efe3c5 70%,#e6d6b0 100%);
  border:1px solid rgba(96,68,36,.4);box-shadow:inset 0 0 0 3px rgba(246,238,216,.55),inset 0 0 0 4px rgba(189,35,51,.2),0 10px 22px -10px rgba(40,25,10,.45);
  transform:translateX(calc(-50% + var(--dx,0px))) perspective(700px) rotateX(-88deg);transform-origin:50% 100%;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .34s cubic-bezier(.3,1.25,.5,1),opacity .16s ease,visibility 0s linear .34s}
.exp-entry-open .exp-entry{transform:translateX(calc(-50% + var(--dx,0px))) perspective(700px) rotateX(0deg);opacity:1;visibility:visible;
  transition:transform .34s cubic-bezier(.3,1.25,.5,1),opacity .16s ease,visibility 0s}
.exp-entry-open{z-index:8}
.exp-entry-below .exp-entry{bottom:auto;top:calc(100% + 9px);transform-origin:50% 0;
  transform:translateX(calc(-50% + var(--dx,0px))) perspective(700px) rotateX(88deg)}
.exp-entry-below.exp-entry-open .exp-entry{transform:translateX(calc(-50% + var(--dx,0px))) perspective(700px) rotateX(0deg)}
.exp-entry-head{font-style:normal;display:flex;align-items:center;gap:8px;font-weight:700;font-variant:small-caps;letter-spacing:.04em;font-size:16px;line-height:1.2}
.exp-entry-stars{display:inline-flex;gap:2px}
.exp-entry-stars{font-style:normal}
.exp-entry-stars i{display:block;width:15px;height:14px;background:url(../assets/rosette.svg) center/contain no-repeat;
  filter:brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(3200%) hue-rotate(340deg) brightness(92%) contrast(96%)}
.exp-entry .exp-entry-line{display:block;margin-top:5px;font-style:italic;font-size:15px;line-height:1.35;color:#22283a}

/* ---------- 7. Fountain-pen nib cursor (fine pointers only; hotspot = nib tip) ---------- */
@media (hover:hover) and (pointer:fine){
  .xp-penCursor #book-form .chip,.xp-penCursor #book-form .chip input,.xp-penCursor #book-form .chip span{
    cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg transform=%22rotate(45 16 16)%22%3E%3Crect x=%2211.5%22 y=%22-4%22 width=%229%22 height=%2211%22 rx=%221.5%22 fill=%22%231a1714%22/%3E%3Crect x=%2211%22 y=%226%22 width=%2210%22 height=%222.2%22 fill=%22%23b8892b%22/%3E%3Cpath d=%22M11 8.2 L21 8.2 L21 16 L16 30 L11 16 Z%22 fill=%22%23c9a24a%22 stroke=%22%231a1714%22 stroke-width=%221.1%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M16 30 L16 15.5%22 stroke=%22%231a1714%22 stroke-width=%220.9%22/%3E%3Ccircle cx=%2216%22 cy=%2214.5%22 r=%221.4%22 fill=%22%231a1714%22/%3E%3C/g%3E%3C/svg%3E") 6 26,pointer}
  .xp-penCursor #trade-other{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg transform=%22rotate(45 16 16)%22%3E%3Crect x=%2211.5%22 y=%22-4%22 width=%229%22 height=%2211%22 rx=%221.5%22 fill=%22%231a1714%22/%3E%3Crect x=%2211%22 y=%226%22 width=%2210%22 height=%222.2%22 fill=%22%23b8892b%22/%3E%3Cpath d=%22M11 8.2 L21 8.2 L21 16 L16 30 L11 16 Z%22 fill=%22%23c9a24a%22 stroke=%22%231a1714%22 stroke-width=%221.1%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M16 30 L16 15.5%22 stroke=%22%231a1714%22 stroke-width=%220.9%22/%3E%3Ccircle cx=%2216%22 cy=%2214.5%22 r=%221.4%22 fill=%22%231a1714%22/%3E%3C/g%3E%3C/svg%3E") 6 26,text}
}

/* ---------- 5. Quiet room: paper edges darken a touch while Contact fills the screen ---------- */
.exp-quiet-veil{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .6s ease;mix-blend-mode:multiply;
  background:radial-gradient(ellipse 72% 82% at 50% 50%,rgba(0,0,0,0) 62%,rgba(60,38,16,.2) 86%,rgba(45,28,12,.34) 100%)}
.exp-quiet-on .exp-quiet-veil{opacity:1}
@media (max-width:600px){.exp-quiet-veil{background:radial-gradient(ellipse 100% 78% at 50% 50%,rgba(0,0,0,0) 74%,rgba(60,38,16,.16) 92%,rgba(45,28,12,.26) 100%)}}

/* ---------- 4. Hidden rosette by the copyright ---------- */
.exp-secret{position:relative;display:inline-block;vertical-align:-1px;margin-right:.45em;perspective:400px}
.exp-secret-mark{display:block;width:12px;height:11px;padding:0;border:0;background:url(../assets/rosette.svg) center/contain no-repeat;
  opacity:.4;cursor:pointer;transition:opacity .2s ease,transform .5s ease}
.exp-secret-mark:hover,.exp-secret-mark:focus-visible{opacity:.85}
.exp-secret-mark:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.exp-secret.is-open .exp-secret-mark{opacity:.9;transform:rotateY(180deg)}
.exp-secret-note{position:absolute;bottom:calc(100% + 12px);left:-24px;z-index:5;width:min(250px,76vw);padding:12px 16px 10px;text-align:left;
  background:radial-gradient(120% 140% at 50% 38%,#f6eed8 0%,#efe3c5 70%,#e6d6b0 100%);border:1px solid rgba(96,68,36,.38);
  box-shadow:0 10px 22px -10px rgba(40,25,10,.45);color:#22283a;font-style:italic;font-size:17px;line-height:1.35;letter-spacing:0;text-transform:none;
  opacity:0;visibility:hidden;transform:perspective(600px) rotateY(-90deg);transform-origin:24px 100%;
  transition:transform .45s cubic-bezier(.3,1.2,.5,1),opacity .2s ease,visibility 0s linear .45s}
.exp-secret.is-open .exp-secret-note{opacity:1;visibility:visible;transform:perspective(600px) rotateY(0deg);
  transition:transform .45s cubic-bezier(.3,1.2,.5,1),opacity .2s ease,visibility 0s}
.exp-secret-text{display:block}
.exp-secret-sign{display:block;margin-top:6px;text-align:right}

/* ---------- 1. The guide closes on their card ---------- */
.exp-book-ov{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:rgba(18,12,7,0);transition:background .25s ease;perspective:1800px;cursor:pointer}
.exp-book-ov.is-in{background:rgba(18,12,7,.84)}
.exp-book{position:relative;width:min(84vw,620px);aspect-ratio:3/2;transform-style:preserve-3d;
  transform:rotateX(14deg) scale(.94);opacity:0;transition:opacity .25s ease,transform .5s ease}
.is-in .exp-book{opacity:1;transform:rotateX(14deg) scale(1)}
.is-closing .exp-book{transform:rotateX(14deg) translateX(-25%) scale(1);transition:opacity .25s ease,transform .5s cubic-bezier(.4,.1,.3,1) .62s}
.exp-book-board{position:absolute;left:50%;top:-2%;width:51.5%;height:104%;border-radius:2px 4px 4px 2px;
  background:linear-gradient(135deg,#c32a36,#9e1a26);box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.exp-book-page-r{position:absolute;left:50%;top:0;width:49%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(120% 120% at 40% 40%,#f3e9cf,#e2d1a8);box-shadow:inset 10px 0 16px -10px rgba(0,0,0,.4)}
.exp-book-pressed{position:relative;opacity:0;transform:translateY(34%) rotate(-3deg);transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .22s ease}
.is-pressed .exp-book-pressed{opacity:1;transform:none}
.exp-book-pressed > .exp-snap{position:absolute;left:0;top:0;margin:0;max-width:none;transform-origin:0 0}
.exp-book-leaf{position:absolute;left:-1.5%;top:-2%;width:51.5%;height:104%;transform-origin:100% 50%;transform-style:preserve-3d;
  transition:transform .82s cubic-bezier(.55,.05,.35,1)}
.is-closing .exp-book-leaf{transform:rotateY(180deg)}
.exp-book-leaf-in,.exp-book-leaf-out{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px 2px 2px 4px}
.exp-book-leaf-in{background:linear-gradient(135deg,#c32a36,#9e1a26);display:flex;align-items:center;justify-content:center}
.exp-book-leaf-in::before{content:"";position:absolute;top:2%;bottom:2%;left:3%;right:0;background:radial-gradient(120% 120% at 60% 40%,#f3e9cf,#e2d1a8);
  box-shadow:inset -10px 0 16px -10px rgba(0,0,0,.4)}
.exp-book-orn{position:relative;width:18%;aspect-ratio:128/120;background:url(../assets/rosette.svg) center/contain no-repeat;opacity:.75}
.exp-book-leaf-out{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  background:linear-gradient(135deg,#c93140,#a11c29);color:#1a1714;font-family:Schola,Georgia,serif;text-align:center;
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.06)}
.exp-book-title{font-weight:700;font-size:clamp(24px,7vw,52px);letter-spacing:.08em;line-height:1}
.exp-book-sub{font-weight:700;font-size:clamp(11px,2.4vw,18px);letter-spacing:.12em}
.exp-book-ed{font-weight:700;font-size:clamp(10px,1.8vw,14px);letter-spacing:.1em;opacity:.85}
.exp-book-skip{margin:0;color:rgba(240,230,210,.75);font-style:italic;font-size:15px;opacity:0;transition:opacity .3s ease .3s}
.is-in .exp-book-skip{opacity:1}
@media (max-width:600px){.exp-book{width:90vw}}

@media (prefers-reduced-motion:reduce){
  .exp-ribbon,.exp-ribbon.is-moving,.exp-ribbon-silk,.exp-ribbon-tail,.exp-quiet-veil,.exp-entry,.exp-entry-open .exp-entry,
  .exp-secret-mark,.exp-secret-note,.exp-secret.is-open .exp-secret-note{transition:none}
  .exp-head-trade.is-in{animation:none}
}