/* Mobile catalogue deck and view toggle */
@media (max-width:780px){
  html{overflow-x:clip;}
  body{overflow-x:clip;}

  .view-toggle{
    position:fixed;
    top:100px;
    right:16px;
    z-index:51;
    display:flex;
    align-items:center;
    gap:1px;
    padding:3px;
    background:rgba(9,8,10,0.85);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(184,146,74,0.45);
    border-radius:999px;
    transition:transform .35s ease;
  }
  body.drawer-open .view-toggle{display:none;}
  body.nav-hidden .view-toggle{transform:translateY(-140px);}
  .vt-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    padding:0;
    border:none;
    background:transparent;
    color:var(--ink-soft);
    border-radius:999px;
    cursor:pointer;
    transition:background .2s,color .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .vt-btn.active{background:var(--accent-cocoa);color:#09080a;}
  .vt-btn svg{width:13px;height:13px;display:block;}

  body.view-carousel{padding-bottom:70px;}
  body.view-carousel .topbar::after{display:none;}
  body.view-carousel .catalogue{overflow:visible;}
  body.view-carousel .course-nav,
  body.view-carousel .course-divider,
  body.view-carousel .course-grid-wrap,
  body.view-carousel .section-cta,
  body.view-carousel .cat-intro,
  body.view-carousel .footer,
  body.view-carousel .toc-btn,
  body.view-carousel .deck-meta{display:none;}
  body.view-carousel .deck-stage{margin-top:72px;height:calc(100dvh - 150px);}
  body.view-carousel .page-nav{display:none;}
  body.view-carousel .nav-brand-center{display:none;}

  body.view-grid .deck-meta,
  body.view-grid .deck-stage,
  body.view-grid .deck-controls,
  body.view-grid .deck-pill-wrap{display:none;}
  body.view-grid .course-nav{
    top:110px;
    background:rgba(9,8,10,0.94);
    border-top:1px solid rgba(184,146,74,0.60);
    border-bottom:1px solid rgba(184,146,74,0.60);
    padding:12px 16px;
    gap:0;
    margin-top:clamp(24px,3.5vw,48px);
    transition:transform .35s ease;
  }
  body.view-grid.nav-hidden .course-nav{transform:translateY(-220px);}
  body.view-grid .cnav-item{
    display:inline-flex;
    align-items:center;
    gap:0;
    padding:6px 14px;
    margin-right:8px;
    flex-shrink:0;
    border:1px solid var(--rule);
    border-radius:999px;
    background:transparent;
    color:var(--ink);
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
    white-space:nowrap;
    text-decoration:none;
    transition:background .2s,border-color .2s,color .2s;
  }
  body.view-grid .cnav-item.active{
    background:var(--accent-cocoa);
    border-color:var(--accent-cocoa);
    color:#09080a;
  }
  body.view-grid .cnav-num{
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    letter-spacing:.15em;
    color:inherit;
    text-transform:uppercase;
  }
  body.view-grid .cnav-num::after{content:" \00b7 ";}
  body.view-grid .cnav-name{
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    font-style:normal;
    letter-spacing:.15em;
    text-transform:uppercase;
  }
  body.view-grid .course{scroll-margin-top:180px;}
  body.view-grid .work-desc{color:var(--ink);}
  body.view-grid .course-info .ceyebrow{color:var(--ink-soft);}
  body.view-grid .course-info .cdesc{color:var(--ink);}

  .deck-meta{
    box-sizing:border-box;
    padding:68px 24px 0;
    margin-bottom:0;
    height:84px;
    overflow:hidden;
    transition:opacity .22s ease;
  }
  .deck-meta::before{
    content:"";
    float:right;
    width:74px;
    height:36px;
  }
  .deck-meta.fade{opacity:0;}
  .dm-ovl,.dm-desc{display:none;}
  .dm-title{
    font-family:var(--serif);
    font-size:18px;
    color:var(--ink);
    line-height:1.1;
    margin-bottom:0;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .deck-stage{
    --card-w:clamp(180px,96vw,430px);
    --drag-x:0px;
    --drag-rot:0deg;
    position:relative;
    margin-top:8px;
    height:calc(100dvh - 210px);
    overflow:visible;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    perspective:900px;
  }
  .deck-card{
    position:absolute;
    top:0;
    left:50%;
    width:var(--card-w);
    height:100%;
    margin-left:calc(var(--card-w) / -2);
    transform-origin:50% 88%;
    border-radius:6px;
    overflow:hidden;
    background:#0f0d0b;
    border:1px solid rgba(184,146,74,0.28);
    cursor:pointer;
    box-shadow:0 10px 34px rgba(0,0,0,0.80),0 0 0 1px rgba(184,146,74,0.10);
    transition:transform .42s cubic-bezier(.25,.46,.45,.94),opacity .42s ease,filter .42s ease;
    will-change:transform,opacity,filter;
  }
  .deck-stage.dragging .deck-card{transition:opacity .18s ease,filter .18s ease;}
  .deck-stage.dragging .deck-card[data-pos="0"]{
    transform:translateX(var(--drag-x)) translateY(0) rotateZ(var(--drag-rot)) scale(1);
  }
  .deck-card-media{
    width:100%;
    height:100%;
    transform-origin:50% 88%;
    will-change:transform;
  }
  .deck-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    touch-action:pan-y;
  }
  .deck-card-ovl{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding:52px 84px 44px;
    background:linear-gradient(transparent,rgba(14,12,10,0.94));
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
  }
  .deck-card[data-pos="0"] .deck-card-ovl{opacity:1;}
  .deck-card-ovl-title{
    font-family:var(--serif);
    font-size:20px;
    color:#ffffff;
    display:block;
    letter-spacing:0.02em;
    line-height:1.2;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-align:center;
    text-overflow:ellipsis;
    text-shadow:0 1px 8px rgba(0,0,0,0.7);
  }

  .deck-card[data-pos="-3"]{transform:translateX(-165px) translateY(32px) rotateZ(-24deg) scale(.70);opacity:.20;z-index:1;filter:brightness(.42) blur(1.5px);pointer-events:none;}
  .deck-card[data-pos="-2"]{transform:translateX(-118px) translateY(21px) rotateZ(-15deg) scale(.79);opacity:.38;z-index:2;filter:brightness(.50) blur(0.6px);}
  .deck-card[data-pos="-1"]{transform:translateX(-72px) translateY(10px) rotateZ(-7.5deg) scale(.88);opacity:.68;z-index:4;filter:brightness(.66);}
  .deck-card[data-pos="0"]{transform:translateX(0) translateY(0) rotateZ(0deg) scale(1);opacity:1;z-index:8;filter:brightness(1);}
  .deck-card[data-pos="0"] .deck-card-media{animation:deck-idle-drift 7s ease-in-out infinite;}
  .deck-card[data-pos="1"]{transform:translateX(72px) translateY(10px) rotateZ(7.5deg) scale(.88);opacity:.68;z-index:4;filter:brightness(.66);}
  .deck-card[data-pos="2"]{transform:translateX(118px) translateY(21px) rotateZ(15deg) scale(.79);opacity:.38;z-index:2;filter:brightness(.50) blur(0.6px);}
  .deck-card[data-pos="3"]{transform:translateX(165px) translateY(32px) rotateZ(24deg) scale(.70);opacity:.20;z-index:1;filter:brightness(.42) blur(1.5px);pointer-events:none;}
  .deck-card[data-pos="hidden"]{opacity:0;pointer-events:none;transform:translateX(0) translateY(20px) scale(.70);z-index:0;}

  @keyframes deck-idle-drift{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
    25%{transform:translate3d(0,-1px,0) rotate(-1.4deg);}
    75%{transform:translate3d(0,1px,0) rotate(1.4deg);}
  }

  .deck-controls{
    position:fixed;
    left:50%;
    bottom:82px;
    transform:translateX(-50%);
    z-index:99;
    pointer-events:none;
    /* width set by JS based on dot count */
  }
  .deck-dots{
    display:flex;
    align-items:center;
    pointer-events:auto;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
  }
  .deck-dots::-webkit-scrollbar{display:none;}
  .deck-dot{
    flex:0 0 44px;
    min-width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    color:inherit;
    font:inherit;
    line-height:1;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .deck-dot::before{
    content:'';
    width:12px;
    height:12px;
    border-radius:50%;
    border:1.5px solid rgba(184,146,74,0.70);
    background:transparent;
    transition:background .25s,border-color .25s;
    flex-shrink:0;
  }
  .deck-dot.active::before{
    background:var(--accent-cocoa);
    border-color:var(--accent-cocoa);
  }
  .deck-dot-next::before{
    display:none;
  }
  .deck-dot-next{
    font-size:24px;
    font-weight:700;
    color:rgba(184,146,74,0.90);
    line-height:1;
  }

  /* §── Section pill + popover ─────────────────────────────────────── */
  .deck-pill-wrap{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom) + 14px);
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    pointer-events:none;
  }
  .deck-pill-popover{
    display:none;
    flex-direction:column;
    background:rgba(9,8,10,0.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(184,146,74,0.55);
    border-radius:12px;
    overflow:hidden;
    width:max-content;
    pointer-events:auto;
  }
  .deck-pill-wrap.open .deck-pill-popover{display:flex;}
  .deck-pill-item{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent-cocoa);
    padding:12px 20px;
    text-align:left;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(184,146,74,0.18);
    cursor:pointer;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    pointer-events:auto;
  }
  .deck-pill-item:last-child{border-bottom:none;}
  .deck-pill-item.active{color:var(--accent-cocoa);}
  .deck-page-arrow{
    display:none;
  }
  body.view-carousel .deck-page-arrow{
    display:flex;
    position:fixed;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    bottom:calc(env(safe-area-inset-bottom) + 14px);
    z-index:100;
    color:rgba(184,146,74,0.65);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  body.view-carousel .deck-page-arrow-prev{
    left:16px;
    animation:arrow-nudge-left 3s ease-in-out infinite;
  }
  body.view-carousel .deck-page-arrow-next{
    right:16px;
    animation:arrow-nudge-right 3s ease-in-out infinite;
  }
  body.view-carousel .deck-page-arrow:active{color:var(--accent-cocoa);}
  @keyframes arrow-nudge-left{
    0%,55%,100%{transform:translateX(0);opacity:.65;}
    28%{transform:translateX(-6px);opacity:1;}
  }
  @keyframes arrow-nudge-right{
    0%,55%,100%{transform:translateX(0);opacity:.65;}
    28%{transform:translateX(6px);opacity:1;}
  }
  .deck-pill{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(9,8,10,0.88) !important;
    border:1px solid var(--accent-cocoa);
    border-radius:999px;
    padding:8px 18px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    pointer-events:auto;
  }
  .deck-pill-label{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--accent-cocoa) !important;
    white-space:nowrap;
    transition:opacity .18s ease;
  }
  .deck-pill-arrow{
    font-size:11px;
    color:rgba(184,146,74,0.65);
    transition:transform .2s ease;
    line-height:1;
  }
  .deck-pill-wrap.open .deck-pill-arrow{transform:rotate(180deg);}
}

@media (max-width:780px) and (prefers-reduced-motion:reduce){
  .deck-card,
  .deck-card-ovl,
  .deck-meta,
  .view-toggle,
  .course-nav{
    transition:none;
  }
}