/* Responsive layer for pages exported with inline styles only.
   responsive.js tags elements with r-* classes from their inline values;
   these rules (all !important, to beat inline styles) do the adapting. */

.r-nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:transparent;color:inherit;cursor:pointer;flex:0 0 auto}
.r-nav-toggle span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;margin:2.5px auto}

#r-drawer{position:fixed;inset:0;z-index:99990;background:#0a0a0a;color:#fff;padding:22px 24px 40px;box-sizing:border-box;overflow:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.8,.3,1);visibility:hidden;font-family:'PP Nikkei Maru','Instrument Sans',system-ui,sans-serif}
#r-drawer.r-open{transform:none;visibility:visible}
#r-drawer a{color:inherit;text-decoration:none}
.r-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #1f1f1f;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7b7b7b}
.r-drawer-close{width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.r-drawer-links{display:flex;flex-direction:column;padding:18px 0}
.r-drawer-links>a{font-size:28px;line-height:1.2;padding:12px 0;border-bottom:1px solid #161616;display:block}
.r-drawer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #161616}
.r-drawer-row>a{flex:1 1 auto;font-size:28px;line-height:1.2;padding:12px 0;border-bottom:0!important}
.r-sub-toggle{flex:0 0 auto;width:40px;height:40px;border:1px solid #242424;border-radius:50%;background:transparent;color:#c9c9c9;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.r-drawer-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.9,.3,1)}
.r-drawer-sub.r-sub-open{grid-template-rows:1fr}
.r-drawer-sub>a{display:none}
.r-drawer-sub.r-sub-open>a{display:block;font-size:17px;color:#c9c9c9;padding:11px 0 11px 16px;border-bottom:1px solid #141414;border-left:2px solid #2a2a2a;margin-left:2px}
.r-drawer-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:20px;padding:16px 24px;border-radius:999px;background:#f26b3a;color:#0a0a0a!important;font-weight:600;font-size:16px;width:100%;box-sizing:border-box}
.r-drawer-social{display:flex;gap:16px;margin-top:28px;color:#c9c9c9}
.r-drawer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #1f1f1f;border-radius:50%}
html.r-lock,html.r-lock body{overflow:hidden!important}

/* stat-card icons ship at 24px, too small to read as icons beside 20px headings */
#dc-root .r-pin .r-grid>div>div:first-child>svg{width:40px;height:auto}
#dc-root .r-pin .r-grid>div>div:first-child{margin-bottom:20px}

/* Tablet */
@media (max-width:1024px){
  .r-nav-links,.r-nav-socials,.r-nav-mega,
  #dc-root nav>div[style*="position: absolute"],#dc-root nav>div[style*="position:absolute"]{display:none!important}
  .r-nav-toggle{display:inline-flex}
  #dc-root .r-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:900px){
  #dc-root .r-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dc-root .r-pad{padding-left:28px!important;padding-right:28px!important}
}

/* Phone */
@media (max-width:760px){
  html,body{overflow-x:clip}
  @supports not (overflow-x:clip){html,body{overflow-x:hidden}}
  #dc-root{overflow-x:clip}
  #dc-root img{max-width:100%}
  #dc-root .r-grid{grid-template-columns:minmax(0,1fr)!important}
  #dc-root .r-gapbig{gap:22px!important}
  #dc-root .r-clip{max-width:100%!important;min-width:0!important}
  #dc-root .r-sticky{position:static!important;top:auto!important}
  #dc-root .r-pin{height:auto!important;min-height:0!important;padding-top:72px!important;padding-bottom:72px!important}
  #dc-root .r-pin [style*="opacity"]{opacity:1!important;transform:none!important;transition:none!important}
  #dc-root .r-pin [style*="color: rgba(0, 0, 0, 0.18)"]{color:inherit!important}
  #dc-root .r-minvh{min-height:0!important}
  #dc-root .r-vh{height:auto!important}
  #dc-root [data-art]{height:clamp(150px,38vw,200px)!important}
  #dc-root .r-vhmin{height:min(44vh,340px)!important}
  #dc-root .r-minvh+.r-minvh{margin-top:44px!important}
  /* stat-card icons in un-pinned sections read as tiny at 24px on a phone */
  #dc-root .r-pin .r-grid>div>div:first-child>svg{width:48px;height:auto}
  #dc-root .r-pin .r-grid>div>div:first-child{margin-bottom:22px!important}
  /* scroll-synced visual (canvas that draws per text block): keep it pinned as a short strip
     at the top of the screen, with the text blocks scrolling beneath it */
  #dc-root .r-vh-visual{height:auto!important}
  #dc-root .r-grid>.r-vh-visual{order:-1;position:sticky!important;top:0!important;z-index:3;height:26vh!important;
    /* full-bleed: an inset panel shows its own edges against the section's glow */
    width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
    padding-left:0!important;padding-right:0!important;background:#0a0a0a;align-self:start}
  /* desktop progress rail would sit on the screen edge once full-bleed; the morphing art already shows progress */
  #dc-root .r-grid>.r-vh-visual [data-rail],#dc-root .r-grid>.r-vh-visual [data-rail-track]{display:none!important}
  #dc-root .r-grid>.r-vh-visual::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:24px;background:linear-gradient(#0a0a0a,rgba(10,10,10,0));pointer-events:none}
  /* small stat-card grids (<=4 cards) read fine two-up on a phone; their desktop connector overlay does not */
  #dc-root .r-grid.r-keep2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  #dc-root .r-keep2>*{padding:20px 16px!important}
  #dc-root svg[data-links]{display:none!important}
  #dc-root .r-grid:has(>.r-vh-visual){gap:0!important}
  #dc-root .r-grid:has(>.r-vh-visual)>div>.r-minvh{min-height:44vh!important;margin-top:0!important;padding-bottom:28px}
  #dc-root .r-grid:has(>.r-vh-visual)>div>.r-minvh:first-child{padding-top:3vh}
  #dc-root .r-span{grid-column:auto!important}
  /* swipe carousel: full-bleed scroll strip, one card per swipe with the next peeking */
  #dc-root .r-carousel{display:flex!important;grid-template-columns:none!important;box-sizing:border-box!important;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    width:100vw!important;max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
    padding:2px 18px 14px!important;gap:14px!important;scrollbar-width:none}
  #dc-root .r-carousel::-webkit-scrollbar{display:none}
  #dc-root .r-carousel>*{flex:0 0 84%!important;scroll-snap-align:start;min-width:0}
  #dc-root .r-carousel>:last-child{margin-right:0}
  #dc-root .r-cell{padding-left:0!important;padding-right:0!important;border-left:0!important;border-right:0!important}
  #dc-root .r-padv{padding-top:64px!important;padding-bottom:64px!important}
  #dc-root .r-mb{margin-bottom:28px!important}
  #dc-root [data-chain-grid]{grid-template-columns:minmax(0,1fr)!important}
  #dc-root [data-chain-grid] svg{display:none!important}
  #dc-root .r-pad{padding-left:20px!important;padding-right:20px!important}
  #dc-root .r-fixedw{width:100%!important;max-width:100%!important}
  #dc-root .r-minw{min-width:0!important}
  #dc-root .r-basis{flex-basis:100%!important}
  #dc-root .r-bigfont{font-size:clamp(34px,11vw,56px)!important}
  #dc-root .r-wrap{flex-wrap:wrap!important}
  #dc-root table{display:block;overflow-x:auto;max-width:100%;min-width:0!important;-webkit-overflow-scrolling:touch}
}