/* Sonam Zangmo — Social & Publishing v14.55: Fiction-style SZ home sigil */
html,body.official-page{
  margin:0;
  width:100%;
  min-width:100%;
  min-height:100%;
  background:#08060e;
}
body.official-page.official-artwork-only{
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background-image:url("/assets/official-artwork-desktop.webp");
  background-position:center 70%;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:#f4eadb;
}
body.official-page.official-modal-open{overflow:hidden}
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* Home navigation — SZ sigil matching the Fiction portal. */
.official-home-sigil{
  position:fixed;
  top:24px;
  left:clamp(24px,3vw,54px);
  z-index:30;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#f4e5c8;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
  -webkit-tap-highlight-color:transparent;
}
.official-home-sigil .mini-sigil{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  box-sizing:border-box;
  border-radius:50%;
  border:1px solid rgba(239,198,107,.55);
  background:rgba(8,6,15,.12);
  color:#efc66b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:400;
  line-height:1;
  box-shadow:0 0 0 1px rgba(239,198,107,.12) inset;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.official-home-sigil:hover .mini-sigil,
.official-home-sigil:focus-visible .mini-sigil{
  background:rgba(8,6,15,.22);
  border-color:rgba(239,198,107,.78);
  transform:translateY(-1px);
}
.official-home-sigil:focus-visible{
  outline:none;
}

/* Introductory callout, anchored to the artwork immediately left of the parchment. */
.official-journey-note{
  position:fixed;
  z-index:8;
  width:clamp(260px,22vw,355px);
  box-sizing:border-box;
  padding:18px 20px 17px;
  border:1px solid rgba(236,196,123,.22);
  border-radius:16px;
  background:
    linear-gradient(135deg,rgba(255,231,180,.055),transparent 34%),
    linear-gradient(180deg,rgba(31,19,42,.72),rgba(14,10,24,.76));
  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,240,207,.025);
  backdrop-filter:blur(5px) saturate(.9);
  -webkit-backdrop-filter:blur(5px) saturate(.9);
  color: rgba(220,205,187,.76);
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  opacity:0;
  animation:officialJourneyIn .65s cubic-bezier(.2,.75,.2,1) .12s forwards;
  pointer-events:none;
}
.official-journey-note::after{
  content:"";
  position:absolute;
  right:-10px;
  top:44%;
  width:18px;
  height:18px;
  border-top:1px solid rgba(236,196,123,.22);
  border-right:1px solid rgba(236,196,123,.22);
  background:rgba(22,14,32,.76);
  transform:rotate(45deg);
}
.official-journey-note p{
  margin:0;
  font-size:clamp(.885rem,calc(1.18vw - 2px),1.025rem);
  line-height:1.52;
  letter-spacing:.006em;
}
.official-journey-note p:not(.official-journey-cta){
  font-style:italic;
  color:#e2b6c9;
  background:linear-gradient(100deg,
    rgba(218,151,187,.86) 0%,
    rgba(229,177,196,.86) 38%,
    rgba(239,213,203,.88) 70%,
    rgba(244,232,214,.90) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.official-journey-note .official-journey-cta{
  margin-top:13px;
  color:#e5bd72;
  font-family:"Cinzel","Times New Roman",serif;
  font-size:clamp(.72rem,.82vw,.82rem);
  font-weight:500;
  line-height:1.35;
  letter-spacing:.045em;
}
@keyframes officialJourneyIn{
  from{opacity:0;filter:blur(2px)}
  to{opacity:1;filter:none}
}

/* The parchment itself is the control. Geometry is mapped from the 1672×941 artwork in JS. */
.official-scroll-hotspot{
  position:fixed;
  z-index:10;
  display:block;
  margin:0;padding:0;border:0;
  background:transparent;
  cursor:pointer;
  transform:rotate(-7deg);
  transform-origin:center;
  clip-path:polygon(13% 4%, 84% 0, 97% 13%, 91% 93%, 13% 100%, 2% 88%, 4% 10%);
  -webkit-tap-highlight-color:transparent;
}
.official-scroll-hotspot::before{
  content:none;
}
.official-scroll-hotspot:hover::before,
.official-scroll-hotspot:focus-visible::before{
  content:none;
}
.official-scroll-hotspot:focus-visible{outline:none}

.official-scroll-modal[hidden]{display:none}
.official-scroll-modal{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  padding:clamp(18px,4vw,52px);
  box-sizing:border-box;
  opacity:0;
  transition:opacity .24s ease;
}
.official-scroll-modal.is-open{opacity:1}
.official-scroll-backdrop{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;padding:0;margin:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(80,45,96,.22),transparent 42%),
    rgba(7,5,13,.70);
  backdrop-filter:blur(7px) saturate(.86);
  -webkit-backdrop-filter:blur(7px) saturate(.86);
  cursor:default;
}
.official-scroll-panel{
  position:relative;
  width:min(720px,100%);
  max-height:min(820px,calc(100svh - 36px));
  overflow:auto;
  box-sizing:border-box;
  padding:clamp(26px,2.5vw,30px) clamp(24px,5vw,54px) clamp(28px,3vw,34px);
  border:1px solid rgba(239,198,116,.20);
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(255,225,159,.028),transparent 28%),
    radial-gradient(circle at 50% -12%,rgba(171,100,164,.085),transparent 42%),
    linear-gradient(180deg,rgba(27,16,38,.48),rgba(13,9,23,.49));
  box-shadow:
    0 38px 100px rgba(0,0,0,.29),
    0 0 55px rgba(182,111,153,.06),
    inset 0 0 0 1px rgba(255,237,194,.018),
    inset 0 24px 80px rgba(150,83,160,.04);
  transform:translateY(14px) scale(.985);
  transition:transform .28s cubic-bezier(.2,.75,.2,1);
  scrollbar-width:thin;
  scrollbar-color:rgba(224,181,104,.4) transparent;
}
.official-scroll-modal.is-open .official-scroll-panel{transform:none}
.official-scroll-panel::before,
.official-scroll-panel::after{
  content:"";position:absolute;pointer-events:none;
}
.official-scroll-panel::before{
  inset:9px;border:1px solid rgba(231,192,119,.06);border-radius:15px;
}
.official-scroll-panel::after{display:none}
.official-scroll-close{
  position:absolute;right:16px;top:13px;z-index:2;
  width:38px;height:38px;border:0;border-radius:50%;
  background:transparent;color:rgba(241,214,168,.72);
  font:300 28px/1 Georgia,serif;cursor:pointer;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}
.official-scroll-close:hover,.official-scroll-close:focus-visible{
  color:#fff1ce;background:rgba(235,190,111,.08);outline:none;transform:rotate(4deg);
}
.official-scroll-ornament,
.official-scroll-footer{display:flex;align-items:center;justify-content:center;gap:12px;color:#deb168}
.official-scroll-ornament span,
.official-scroll-footer span{height:1px;width:54px;background:linear-gradient(90deg,transparent,rgba(222,177,104,.68))}
.official-scroll-ornament span:last-child,
.official-scroll-footer span:last-child{background:linear-gradient(90deg,rgba(222,177,104,.68),transparent)}
.official-scroll-ornament i{font-style:normal;font-size:.72rem;text-shadow:0 0 10px rgba(246,194,103,.4)}
.official-scroll-kicker{
  margin:10px 0 12px;text-align:center;text-transform:uppercase;
  color:rgba(222,184,115,.82);font:600 .68rem/1.3 Georgia,serif;letter-spacing:.21em;
}
.official-scroll-panel h1{
  margin:0;text-align:center;color:#f4d99d;
  font-family:"Cinzel","Times New Roman",serif;font-size:clamp(1.02rem,2vw,1.30rem);font-weight:500;line-height:1.28;letter-spacing:.016em;
  text-shadow:0 0 28px rgba(218,158,87,.12);
}
.official-scroll-intro{
  width:min(520px,100%);margin:12px auto 28px;text-align:center;
  color:rgba(239,226,213,.76);font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-size:1rem;line-height:1.55;
}
.official-link-group{margin-top:28px}
.official-scroll-intro + .official-link-group{margin-top:0}
.official-link-group h2{
  margin:0 0 12px;padding-left:2px;color:rgba(236,204,143,.78);
  font-family:"Cormorant SC","Times New Roman",serif;font-size:.78rem;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;
}
.official-link-group h2 em{font-family:"Cormorant Garamond",Garamond,Georgia,serif;text-transform:none;letter-spacing:.025em;font-weight:500}
.official-link-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.official-link-stack{display:grid;gap:10px}
.official-link-card{
  position:relative;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:12px;
  min-height:66px;padding:11px 14px;box-sizing:border-box;
  border:1px solid rgba(224,184,116,.16);border-radius:13px;
  background:linear-gradient(105deg,rgba(255,236,198,.045),rgba(125,70,130,.045));
  color:inherit;text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.official-link-card:hover,.official-link-card:focus-visible{
  transform:translateY(-2px);outline:none;border-color:rgba(237,194,113,.42);
  background:linear-gradient(105deg,rgba(255,236,198,.08),rgba(139,77,145,.08));
  box-shadow:0 9px 25px rgba(0,0,0,.18),0 0 20px rgba(205,152,94,.055);
}
.official-link-card-primary{
  border-color:rgba(231,184,99,.31);
  background:linear-gradient(105deg,rgba(217,161,83,.105),rgba(113,58,125,.075));
}
.official-link-mark,.official-link-sigil{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(232,189,111,.25);background:rgba(219,169,91,.06);
  color:#e6bb72;font:600 1rem/1 Georgia,serif;
}
.official-link-mark-reddit{font-size:.72rem;letter-spacing:-.02em}
.official-link-copy{display:flex;min-width:0;flex-direction:column;gap:5px}
.official-link-copy strong{
  color:#f1dfc1;font-family:"Cinzel","Times New Roman",serif;font-size:.95rem;font-weight:500;line-height:1.18;letter-spacing:.018em;
}
.official-link-copy small{
  color:rgba(225,210,195,.68);font-family:Georgia,serif;font-size:.84rem;line-height:1.42;
}
.official-scroll-footer{margin-top:28px;opacity:.7}
.official-scroll-footer b{font:500 .67rem/1 Georgia,serif;letter-spacing:.18em}

@media (max-width:800px){
  .official-home-sigil{
    top:16px;
    left:16px;
  }
  .official-journey-note{
    left:16px;right:16px;top:auto;bottom:18px;
    width:auto;
    padding:15px 17px 14px;
    border-radius:14px;
    background:linear-gradient(180deg,rgba(28,18,39,.78),rgba(12,9,21,.82));
  }
  .official-journey-note::after{display:none}
  .official-journey-note p{font-size:.875rem;line-height:1.46}
  .official-journey-note .official-journey-cta{margin-top:10px;font-size:.75rem}
  body.official-page.official-artwork-only{background-position:43% center;background-attachment:scroll}
  .official-scroll-modal{padding:12px}
  .official-scroll-panel{max-height:calc(100svh - 24px);padding:26px 18px 26px;border-radius:18px}
  .official-scroll-panel h1{font-size:clamp(.94rem,4vw,1.18rem);line-height:1.3}
  .official-scroll-intro{font-size:.96rem;margin-top:12px;margin-bottom:24px;line-height:1.5}
  .official-link-grid{grid-template-columns:1fr}
  .official-link-group{margin-top:24px}
  .official-scroll-intro + .official-link-group{margin-top:0}
  .official-link-card{min-height:64px;padding:10px 12px}
  .official-link-group h2{margin-bottom:10px}
  .official-link-copy{gap:3px}
}
@media (max-width:430px){
  .official-link-copy small{font-size:.80rem;line-height:1.4}
  .official-scroll-close{right:9px;top:8px}
}
@media (prefers-reduced-motion:reduce){
  .official-journey-note{animation:none!important;opacity:1}
  .official-scroll-hotspot::before{animation:none!important}
  .official-scroll-modal,.official-scroll-panel,.official-link-card,.official-scroll-close{transition:none!important}
}