/* Sonam Zangmo — simple mobile fallback v14.01
   Mobile (<=767px): text-first, no artwork.
   Tablet (>=768px): original desktop experience is preserved. */

.sz-mobile-simple{display:none;}

@media (max-width:767px){
  html{
    background:#080610;
    color-scheme:dark;
  }

  body{
    margin:0 !important;
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    position:static !important;
    background:
      radial-gradient(circle at 50% -10%,rgba(98,58,130,.18),transparent 34rem),
      linear-gradient(180deg,#0d0916 0%,#090710 46%,#07050c 100%) !important;
    color:#eee5d7 !important;
  }

  body::before,
  body::after{
    content:none !important;
    display:none !important;
  }

  /* v14.00: explicit desktop surfaces only.
     Avoid a blanket body > * rule so future consent/accessibility/third-party UI
     is not accidentally hidden on mobile. */
  body > .skip-link,
  body > .site-shell,
  body > .topbar,
  body > .fiction-scene-shell,
  body > .library-scene-shell,
  body > .trh-desktop-artwork,
  body > .trh-mobile-cover,
  body > .about-desktop-artwork,
  body > .about-sz-home,
  body > .about-soul-dialogue,
  body > .about-soul-menu,
  body > .about-portrait-modal,
  body > .about-soul-content,
  body > .about-portrait-shape-defs,
  body > .gallery-desktop-artwork,
  body > .gallery-sz-home,
  body > dialog{
    display:none !important;
  }

  body > .sz-mobile-simple{
    display:block !important;
    box-sizing:border-box;
    width:100%;
    min-height:100svh;
    margin:0;
    padding:0;
    font-family:Georgia,"Times New Roman",serif;
    color:#eee5d7;
    line-height:1.65;
    letter-spacing:.005em;
  }

  .szm-header{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px 13px;
    border-bottom:1px solid rgba(229,188,95,.22);
    background:rgba(9,6,15,.82);
  }

  .szm-brand{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid rgba(229,188,95,.70);
    border-radius:50%;
    color:#efc66b !important;
    text-decoration:none !important;
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    letter-spacing:.06em;
  }

  .szm-nav{
    display:flex;
    flex:1 1 auto;
    justify-content:flex-end;
    gap:4px 12px;
    flex-wrap:wrap;
  }

  .szm-nav a{
    color:#d8cbb8 !important;
    text-decoration:none !important;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .szm-main{
    width:min(100% - 34px,680px);
    margin:0 auto;
    padding:42px 0 54px;
  }

  .szm-eyebrow{
    margin:0 0 10px !important;
    color:#c9a95d !important;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px !important;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  .szm-main h1{
    margin:0 0 14px;
    color:#f1dfba;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.15rem,11vw,3.35rem);
    font-weight:500;
    line-height:1.02;
    letter-spacing:-.025em;
  }

  .szm-main h2{
    margin:38px 0 12px;
    padding-top:2px;
    color:#e7cf98;
    font-size:1.48rem;
    font-weight:500;
    line-height:1.2;
  }

  .szm-main h3{
    margin:28px 0 8px;
    color:#e3d3b7;
    font-size:1.14rem;
    font-weight:600;
    line-height:1.3;
  }

  .szm-main p,
  .szm-main li{
    color:#dfd6c8;
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.7;
  }

  .szm-main p{margin:0 0 16px;}
  .szm-main ul,
  .szm-main ol{margin:10px 0 22px;padding-left:1.35rem;}
  .szm-main li+li{margin-top:8px;}

  .szm-role{
    color:#cdbb9c !important;
    font-size:14px !important;
    letter-spacing:.05em;
  }

  .szm-lede{
    margin-top:18px !important;
    color:#e5ddd0 !important;
    font-size:17px !important;
  }

  .szm-quote,
  .szm-main blockquote{
    margin:24px 0;
    padding:16px 18px;
    border-left:2px solid rgba(229,188,95,.72);
    background:rgba(255,255,255,.025);
    color:#ead9b7;
    font-style:italic;
  }

  .szm-quote p,
  .szm-main blockquote p{margin:0;color:inherit !important;}

  .szm-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:24px 0 10px;
  }

  .szm-button,
  .szm-main a.szm-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    box-sizing:border-box;
    padding:12px 15px;
    border:1px solid rgba(229,188,95,.42);
    border-radius:10px;
    background:rgba(229,188,95,.065);
    color:#f0d99f !important;
    text-decoration:none !important;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    font-weight:650;
    letter-spacing:.02em;
  }

  .szm-button::after{content:"→";opacity:.72;}
  .szm-button.szm-muted{opacity:.66;pointer-events:none;}
  .szm-button.szm-muted::after{content:"Soon";font-size:11px;text-transform:uppercase;letter-spacing:.08em;}

  .szm-section{
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid rgba(229,188,95,.18);
  }

  .szm-card{
    margin:12px 0;
    padding:18px;
    border:1px solid rgba(229,188,95,.18);
    border-radius:12px;
    background:rgba(255,255,255,.025);
  }

  .szm-card h2,
  .szm-card h3{margin-top:0;}
  .szm-card p:last-child{margin-bottom:0;}

  .szm-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:12px 0 20px;
  }

  .szm-tag{
    padding:5px 9px;
    border:1px solid rgba(229,188,95,.24);
    border-radius:999px;
    color:#d6c39e;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    letter-spacing:.04em;
  }

  .szm-main details{
    margin:11px 0;
    border:1px solid rgba(229,188,95,.18);
    border-radius:10px;
    background:rgba(255,255,255,.022);
    overflow:hidden;
  }

  .szm-main summary{
    cursor:pointer;
    list-style:none;
    padding:15px 44px 15px 16px;
    position:relative;
    color:#e6cf9a;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .szm-main summary::-webkit-details-marker{display:none;}
  .szm-main summary::after{
    content:"+";
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    color:#c9a95d;
    font-size:20px;
    font-weight:400;
  }
  .szm-main details[open] summary::after{content:"−";}
  .szm-details-body{padding:2px 16px 17px;border-top:1px solid rgba(229,188,95,.12);}
  .szm-details-body h2:first-child,.szm-details-body h3:first-child{display:none;}

  .szm-content > *:first-child{margin-top:0;}
  .szm-content section,
  .szm-content article,
  .szm-content div,
  .szm-content header,
  .szm-content nav{
    margin:0 0 22px;
    padding:0;
    background:none;
    border:0;
  }

  .szm-content a{
    color:#e8c97e;
    text-underline-offset:3px;
  }

  .szm-content nav a{
    display:block;
    margin:8px 0;
    padding:12px 14px;
    border:1px solid rgba(229,188,95,.18);
    border-radius:9px;
    background:rgba(255,255,255,.02);
    text-decoration:none;
  }

  .szm-content small{display:block;margin-top:2px;color:#bfb2a0;font-family:Arial,Helvetica,sans-serif;font-size:13px;}
  .szm-content strong{color:#ead8b5;}
  .szm-content hr{border:0;border-top:1px solid rgba(229,188,95,.15);margin:26px 0;}

  .szm-footer{
    width:min(100% - 34px,680px);
    margin:0 auto;
    padding:22px 0 30px;
    border-top:1px solid rgba(229,188,95,.16);
    color:#a99d8c;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    line-height:1.6;
  }

  .szm-footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-bottom:12px;
  }

  .szm-footer a{color:#cdb989;text-decoration:none;}
}

/* Tablet navigation v14.00: tablet-nav.js owns device/input detection and
   exposes one shared mode class, preventing JS/CSS breakpoint drift. */
@media (min-width:768px){
  html.szm-tablet-nav-mode .fiction-page .fiction-nav-dropdown.szm-open .fiction-nav-menu,
  html.szm-tablet-nav-mode .trh-page .trh-nav-dropdown.szm-open .trh-nav-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }
}


/* =========================================================
   YA Fantasy v14.34 — single semantic DOM on mobile + desktop
   Removes the duplicate mobile article from HTML while keeping
   the YA page text-first and artwork-free below 768px.
   ========================================================= */
@media (max-width:767px){
  body.ya-fantasy-artwork-page > .site-shell{
    display:block !important;
    box-sizing:border-box;
    width:100% !important;
    margin:0 !important;
    padding:0 12px 36px !important;
  }

  body.ya-fantasy-artwork-page > .skip-link{
    display:block !important;
  }

  .ya-fantasy-artwork-page .topbar{
    margin:0 -12px 14px;
    padding:14px 16px 13px;
    border-bottom:1px solid rgba(229,188,95,.22);
    background:rgba(9,6,15,.82);
  }

  .ya-fantasy-artwork-page .knowledge-fiction-cta{
    display:none;
  }

  .ya-fantasy-artwork-page .knowledge-article-shell{
    width:100% !important;
    margin:0 !important;
    padding:24px 16px 50px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .ya-fantasy-artwork-page .knowledge-trh-promo{
    width:100% !important;
    max-width:100% !important;
  }

  .ya-fantasy-artwork-page .site-footer{
    margin-top:8px;
  }
}

/* v14.59 — Knowledge-family mobile footer alignment. */
.knowledge-social-footer{
  text-align:center;
}
.knowledge-social-footer .szm-footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.knowledge-social-footer .szm-footer-links a{
  display:inline-block;
  color:#fff;
  text-align:center;
  text-decoration:none;
}
.knowledge-social-footer .szm-footer-links a:hover,
.knowledge-social-footer .szm-footer-links a:focus-visible{
  color:#fff;
  opacity:.82;
}



/* v14.60 — semantic cleanup.
   Knowledge hub + topic pages now use one semantic DOM on mobile and desktop.
   Other page-specific mobile fallbacks keep their presentation but no longer
   duplicate the document's <main> or <h1> semantics. */
.szm-page-title{
  margin:0 0 14px;
  color:#f1dfba;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.15rem,11vw,3.35rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.025em;
}

@media (max-width:767px){
  body.knowledge-single-dom-page > .site-shell{
    display:block !important;
    box-sizing:border-box;
    width:100% !important;
    margin:0 !important;
    padding:0 12px 36px !important;
  }

  body.knowledge-single-dom-page > .skip-link{
    display:block !important;
  }

  .knowledge-single-dom-page .topbar{
    margin:0 -12px 14px;
    padding:14px 16px 13px;
    border-bottom:1px solid rgba(229,188,95,.22);
    background:rgba(9,6,15,.82);
  }

  .knowledge-single-dom-page .knowledge-fiction-cta{
    display:none;
  }

  .knowledge-single-dom-page.knowledge-topic-page .knowledge-article-shell{
    width:100% !important;
    margin:0 !important;
    padding:24px 16px 50px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .knowledge-single-dom-page.knowledge-topic-page .knowledge-trh-promo{
    width:100% !important;
    max-width:100% !important;
  }

  .knowledge-single-dom-page .site-footer{
    margin-top:8px;
  }
}