/* MTWM Holistic Health Hub Layout (Gestalt-driven)
 Accent: #FF5BC0
 Font: Nunito 300/400
*/

:root{
 --accent:#FF5BC0;
 --accent-2:#ff8bd6;
 --ink:#101114;
 --muted:#5b5f6a;
 --paper:#ffffff;
 --paper-2:#f6f7fb;
 --line:#e7e8ee;
 --shadow: 0 10px 35px rgba(16,17,20,.08);
 --shadow-soft: 0 6px 18px rgba(16,17,20,.08);
 --radius-xl: 28px;
 --radius-lg: 20px;
 --radius-md: 14px;
 --radius-sm: 10px;
 --max: 1180px;

 --h1: clamp(34px, 4.2vw, 56px);
 --h2: clamp(22px, 2.6vw, 32px);
 --h3: 18px;
 --body: 16px;
 --small: 13px;
 --kicker: 12px;
}



.mtwm-wrap{
 font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 font-weight: 300;
 color: var(--ink);
 background: var(--paper);
 width: 100%;
 margin: 0;
 overflow-x: hidden;
}

/* Hub-only base: no extra background tint behind modules */
.mtwm-wrap.mtwm-hub{
 /* Force full-bleed width even inside theme content containers */
 background: transparent !important;
 width: 100vw !important;
 max-width: 100vw !important;
 position: relative !important;
 left: 50% !important;
 right: 50% !important;
 margin-left: -50vw !important;
 margin-right: -50vw !important;
 padding-left: env(safe-area-inset-left) !important;
 padding-right: env(safe-area-inset-right) !important;
 box-sizing: border-box;
}

/* Safety: never show the legacy second topics row */
.mtwm-wrap.mtwm-hub #pillars{ display:none !important; }

.mtwm-wrap.mtwm-hub .topbar{
 background: rgba(255,255,255,.86);
 backdrop-filter: saturate(180%) blur(18px);
}

/* Hub-only: separate modules (no "card inside card") */
.mtwm-wrap.mtwm-hub .library{
 border: 0;
 background: transparent;
 box-shadow: none;
 border-radius: 0;
 overflow: visible;
}
.mtwm-wrap.mtwm-hub .library-top{
 /* No extra container behind modules */
 border: 0;
 border-bottom: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 padding: 0;
 margin-bottom: 14px;
}

.mtwm-wrap.mtwm-hub .library-top .search{ flex: 1 1 380px; min-width: min(520px, 100%); }
.mtwm-wrap.mtwm-hub .library-top .filters{ flex: 0 1 auto; justify-content: flex-end; }

.mtwm-wrap.mtwm-hub .library-list{ padding: 0; }
.mtwm-wrap.mtwm-hub .library-list .item{
 border: 1px solid rgba(231,232,238,.9);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 padding: 14px 16px;
 margin-top: 14px;
 border-top: 0;
}
.mtwm-wrap.mtwm-hub .library-list .item:first-of-type{ margin-top: 0; }
.mtwm-wrap.mtwm-hub .pager{
 border: 1px solid rgba(231,232,238,.9);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 margin-top: 14px;
}
.mtwm-wrap.mtwm-hub .library-list .card{
 border: 1px dashed rgba(231,232,238,.95);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: none;
}

/* Hub-only: keep collections in a balanced grid on desktop */
@media (min-width: 980px){
 .mtwm-wrap.mtwm-hub #mtwmCollections .tiles-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}
.mtwm-wrap strong{ font-weight: 400; }
.mtwm-wrap a{ color: inherit; text-decoration: none; }
.mtwm-wrap a:hover{ text-decoration: none; }
.mtwm-wrap p{ line-height: 1.65; margin: 0 0 14px; color: var(--ink); }
.mtwm-wrap small{ font-size: var(--small); color: var(--muted); }
.mtwm-wrap img{ max-width: 100%; height: auto; }



.mtwm-wrap *{ box-sizing:border-box; }
.mtwm-wrap .mtwm-container{
 width: 100%;
 max-width: var(--max);
 margin: 0 auto;
 padding: 0 16px;
}

.mtwm-wrap .skip{
 position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.mtwm-wrap .skip:focus{
 left: 20px; top: 20px; width:auto; height:auto; padding:10px 14px;
 background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
 box-shadow: var(--shadow-soft); z-index: 9999;
}

.mtwm-wrap .topbar{
 position: sticky;
 top:0;
 z-index: 50;
 background: #fff;
 border-bottom: 1px solid rgba(231,232,238,.7);
}
.mtwm-wrap .topbar-inner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding: 14px 0;
 gap: 16px;
}
.mtwm-wrap .brand{
 display:flex; align-items:center; gap: 10px;
}
.mtwm-wrap .logo-dot{
 width: 12px; height: 12px; border-radius: 50%;
 background: var(--accent);
 box-shadow: 0 0 0 6px rgba(255,91,192,.12);
}
.mtwm-wrap .brand h1{
 font-size: 14px;
 margin:0;
 letter-spacing:.18em;
 text-transform:uppercase;
 font-weight:400;
}
.mtwm-wrap .nav{
 display:flex; align-items:center; gap: 12px; flex-wrap:wrap;
}
.mtwm-wrap .nav a{
 font-size: 14px;
 color: var(--muted);
 padding: 8px 10px;
 border-radius: 999px;
}
.mtwm-wrap .nav a:hover{
 background: rgba(16,17,20,.04);
 color: var(--ink);
}
.mtwm-wrap .nav .pill{
 border: 1px solid var(--line);
 background: var(--paper);
}
.mtwm-wrap .nav .pill:hover{
 border-color: rgba(255,91,192,.35);
}

@media (max-width: 760px){
 .mtwm-wrap .topbar-inner{ gap: 10px; }
 .mtwm-wrap .nav{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding-bottom: 2px;
 }
 .mtwm-wrap .nav a{ white-space: nowrap; }
}

.mtwm-wrap .hero{
 padding: 34px 0 18px;
}

.mtwm-wrap .series-hero{
 padding: 28px 0 18px;
}
.mtwm-wrap .series-hero-card{
 border: 1px solid var(--line);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 overflow:hidden;
 display:grid;
 grid-template-columns: 1fr;
}
@media (min-width: 920px){
 .mtwm-wrap .series-hero-card{ grid-template-columns: 1.05fr .95fr; }
}
.mtwm-wrap .series-hero-media{
 width:100%;
 aspect-ratio: 16/9;
 max-height: 320px;
 background: #fff;
 border-bottom: 1px solid rgba(231,232,238,.75);
 overflow:hidden;
}
@media (min-width: 920px){
 .mtwm-wrap .series-hero-media{
  max-height: none;
  aspect-ratio: 4/3;
  border-bottom: none;
  border-right: 1px solid rgba(231,232,238,.75);
 }
}
.mtwm-wrap .series-hero-media img{
 width:100%;
 height:100%;
 object-fit: cover;
 display:block;
}
.mtwm-wrap .series-hero-body{
 padding: 18px;
}
.mtwm-wrap .hero-grid{
 display:grid;
 grid-template-columns: 1.25fr .75fr;
 gap: 18px;
 align-items: stretch;
}
@media (max-width: 920px){
.mtwm-wrap .hero-grid{ grid-template-columns: 1fr; }
}
.mtwm-wrap .kicker{
 display:inline-flex; align-items:center; gap: 8px;
 font-size: var(--kicker);
 letter-spacing:.16em;
 text-transform:uppercase;
 color: var(--muted);
}
.mtwm-wrap .kicker .bar{
 width: 26px; height: 2px; border-radius: 99px;
 background: var(--accent);
}
.mtwm-wrap .hero h2{
 font-size: var(--h1);
 margin: 12px 0 10px;
 font-weight: 400;
 letter-spacing: -0.02em;
}
.mtwm-wrap .deck{
 font-size: 17px;
 color: var(--muted);
 margin-bottom: 18px;
}

.mtwm-wrap .hero-card{
 border: 1px solid var(--line);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 padding: 20px;
 overflow:hidden;
 position:relative;
}
.mtwm-wrap .hero-card .meta{
 display:flex; gap: 10px; flex-wrap:wrap;
}
.mtwm-wrap .chip{
 display:inline-flex;
 align-items:center;
 gap: 8px;
 padding: 8px 10px;
 border-radius: 999px;
 font-size: 13px;
 border: 1px solid rgba(231,232,238,.9);
 background: rgba(255,255,255,.75);
 color: var(--muted);
}
.mtwm-wrap .chip b{ font-weight: 400; color: var(--ink); }

.mtwm-wrap .cta-row{
 display:flex; gap: 10px; flex-wrap:wrap; align-items:center;
 margin-top: 14px;
}
.mtwm-wrap .btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap: 10px;
 padding: 12px 14px;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: var(--paper);
 font-size: 14px;
 font-weight: 400;
 cursor:pointer;
}
.mtwm-wrap .btn:hover{ border-color: rgba(255,91,192,.35); }
.mtwm-wrap .btn.primary{
 background: var(--accent);
 border-color: var(--accent);
 color: #fff;
}
.mtwm-wrap .btn.primary:hover{ filter: brightness(.98); }

.mtwm-wrap .hero-rail{
 border: 1px solid var(--line);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 padding: 18px;
}
.mtwm-wrap .hero-rail h3{
 margin: 0 0 10px;
 font-size: 15px;
 font-weight: 400;
 color: var(--ink);
}
.mtwm-wrap .rail-item{
 padding: 12px 0;
 border-top: 1px solid rgba(231,232,238,.75);
}
.mtwm-wrap .rail-item:first-of-type{ border-top: none; padding-top: 0; }
.mtwm-wrap .rail-item .title{
 font-weight: 400;
 display:block;
 margin-bottom: 4px;
}
.mtwm-wrap .rail-item .desc{ color: var(--muted); font-size: 14px; }
.mtwm-wrap .rail-item .tagline{ margin-top: 8px; display:flex; gap: 8px; flex-wrap:wrap; }

.mtwm-wrap .section{
 padding: 18px 0 26px;
}
.mtwm-wrap .section-header{
 display:flex; align-items:flex-end; justify-content:space-between; gap: 12px;
 margin: 6px 0 12px;
}
.mtwm-wrap .section-header h2{
 font-size: var(--h2);
 margin:0;
 font-weight: 400;
 letter-spacing: -0.01em;
}
.mtwm-wrap .section-header p{
 margin:0;
 color: var(--muted);
 max-width: 520px;
}
.mtwm-wrap .grid{
 display:grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 14px;
}

.mtwm-wrap .tiles-grid{
 display:grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
 gap: 14px;
 align-items: start;
}

.mtwm-wrap .mtwm-tile{
 display:flex;
 flex-direction:column;
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 overflow:hidden;
 min-width: 0;
}
.mtwm-wrap .mtwm-tile:hover{
 border-color: rgba(255,91,192,.35);
 transform: translateY(-1px);
 transition: 140ms ease;
}
.mtwm-wrap .mtwm-tile-media{
 width: 100%;
 height: clamp(140px, 14vw, 190px);
 overflow:hidden;
 border-bottom: 1px solid rgba(231,232,238,.75);
}
.mtwm-wrap .mtwm-tile-media img{
 width:100%;
 height:100%;
 object-fit: cover;
 display:block;
}
.mtwm-wrap .mtwm-tile-body{
 padding: 14px 14px 16px;
 min-width:0;
 display:flex;
 flex-direction:column;
 gap: 8px;
}
.mtwm-wrap .mtwm-tile-k{
 font-size: var(--kicker);
 letter-spacing:.16em;
 text-transform:uppercase;
 color: var(--muted);
}
.mtwm-wrap .mtwm-tile-title{
 font-size: 18px;
 font-weight: 400;
 letter-spacing: -0.01em;
 line-height: 1.22;
 overflow-wrap: break-word;
 word-break: normal;
 hyphens: auto; display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.mtwm-wrap .mtwm-tile-desc{
 color: var(--muted);
 font-size: 14px;
 line-height: 1.55;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.mtwm-wrap .mtwm-tile-chips{
 display:flex;
 gap: 8px;
 flex-wrap: wrap;
}

@media (max-width: 520px){
 .mtwm-wrap .mtwm-tile-media{ height: 170px; }
 .mtwm-wrap .mtwm-tile-desc{ -webkit-line-clamp: 2; }
}

.mtwm-wrap .card{
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-soft);
 overflow:hidden;
 position:relative;
}
.mtwm-wrap .card .pad{ padding: 16px; }
.mtwm-wrap .card .k{ font-size: var(--kicker); letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }
.mtwm-wrap .card .t{ font-size: 18px; margin: 8px 0 6px; font-weight: 400; letter-spacing: -0.01em; }
.mtwm-wrap .card .s{ color: var(--muted); font-size: 14px; line-height:1.55; }
.mtwm-wrap .card .meta{ margin-top: 12px; display:flex; gap: 8px; flex-wrap:wrap; }
.mtwm-wrap .card:hover{ border-color: rgba(255,91,192,.35); transform: translateY(-1px); transition: 140ms ease; }

.mtwm-wrap .col-7{ grid-column: span 7; }
.mtwm-wrap .col-5{ grid-column: span 5; }
.mtwm-wrap .col-6{ grid-column: span 6; }
.mtwm-wrap .col-4{ grid-column: span 4; }
.mtwm-wrap .col-3{ grid-column: span 3; }
.mtwm-wrap .col-12{ grid-column: span 12; }
@media (max-width: 920px){
.mtwm-wrap .col-7, .mtwm-wrap .col-5, .mtwm-wrap .col-6, .mtwm-wrap .col-4, .mtwm-wrap .col-3{ grid-column: span 12; }
}

.mtwm-wrap .common-region{ background: transparent; border: 0; padding: 0; }
.mtwm-wrap .common-region .grid{ gap: 12px; }

.mtwm-wrap .path-strip{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap: 10px;
 padding: 12px 14px;
 border-radius: 999px;
 background: rgba(255,255,255,.78);
 border: 1px solid rgba(231,232,238,.9);
 margin-top: 12px;
 overflow:auto;
}
.mtwm-wrap .path-step{
 display:flex; align-items:center; gap: 10px;
 white-space: nowrap;
 font-size: 13px;
 color: var(--muted);
}
.mtwm-wrap .path-step .dot{
 width: 8px; height: 8px; border-radius: 50%;
 background: rgba(16,17,20,.18);
}
.mtwm-wrap .path-step.active .dot{ background: var(--accent); box-shadow: 0 0 0 5px rgba(255,91,192,.14); }
.mtwm-wrap .path-step.active{ color: var(--ink); font-weight: 400; }

.mtwm-wrap .library{
 border: 1px solid var(--line);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 overflow:hidden;
}
.mtwm-wrap .library-top{
 padding: 16px;
 border-bottom: 1px solid rgba(231,232,238,.75);
 display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap;
}
.mtwm-wrap .search{
 display:flex; align-items:center; gap: 10px; flex-wrap:wrap;
}
.mtwm-wrap .input{
 display:flex; align-items:center; gap: 10px;
 padding: 10px 12px;
 border-radius: 999px;
 border: 1px solid rgba(231,232,238,.95);
 background: #fff;
}
.mtwm-wrap .input input{
 border:none; outline:none; background:transparent;
 font-family: inherit;
 font-size: 14px;
 min-width: 220px;
 color: var(--ink);
}
.mtwm-wrap .filters{
 display:flex; gap: 8px; flex-wrap:wrap;
}
.mtwm-wrap .filter{
 padding: 9px 10px;
 border-radius: 999px;
 border: 1px solid rgba(231,232,238,.95);
 background: #fff;
 font-size: 13px;
 color: var(--muted);
 cursor:pointer;
}
.mtwm-wrap .filter.active{
 background: rgba(255,91,192,.14);
 border-color: rgba(255,91,192,.35);
 color: var(--ink);
 font-weight: 400;
}

@media (max-width: 760px){
 .mtwm-wrap .filters{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
 }
 .mtwm-wrap .filter{ white-space: nowrap; flex: 0 0 auto; }
}
.mtwm-wrap .library-list{
 padding: 10px 16px 6px;
}
.mtwm-wrap .item{
 display:grid;
 grid-template-columns: 1.2fr .8fr;
 gap: 14px;
 padding: 14px 0;
 border-top: 1px solid rgba(231,232,238,.75);
 align-items:center;
}
.mtwm-wrap .item:first-of-type{ border-top:none; }
.mtwm-wrap .item .title{
 font-weight: 400;
 margin:0 0 6px;
}
.mtwm-wrap .item .summary{ margin:0; color: var(--muted); font-size: 14px; }
.mtwm-wrap .item .right{
 display:flex; justify-content:flex-end; gap: 8px; flex-wrap:wrap;
}
@media (max-width: 780px){
.mtwm-wrap .item{ grid-template-columns: 1fr; }
.mtwm-wrap .item .right{ justify-content:flex-start; }
}

.mtwm-wrap .pager{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap: 10px;
 padding: 14px 16px 16px;
 border-top: 1px solid rgba(231,232,238,.75);
 flex-wrap:wrap;
}
.mtwm-wrap .page-numbers{
 display:flex; gap: 6px; flex-wrap:wrap;
}
.mtwm-wrap .page-btn{
 width: 38px; height: 38px;
 border-radius: 999px;
 border: 1px solid rgba(231,232,238,.95);
 background: #fff;
 cursor:pointer;
 font-family: inherit;
 font-weight: 400;
 color: var(--muted);
}
.mtwm-wrap .page-btn.active{
 background: var(--accent);
 border-color: var(--accent);
 color: #fff;
}
.mtwm-wrap .page-btn:hover{ border-color: rgba(255,91,192,.35); }

.mtwm-wrap .footer{
 padding: 34px 0 44px;
 color: var(--muted);
}
.mtwm-wrap .footer-grid{
 display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr; } }
.mtwm-wrap .footer .fine{
 border-top: 1px solid rgba(231,232,238,.75);
 padding-top: 16px;
 margin-top: 18px;
 font-size: 13px;
}

/* ===== MTWM Upgrade Pack: Cover Pagination + Continuity Motion + Fixed Series Rail ===== */

/* Motion safety */
@media (prefers-reduced-motion: reduce){
.mtwm-wrap *{ scroll-behavior:auto !important; }
.mtwm-wrap .mtwm-pulse, .mtwm-wrap .path-step.active .dot, .mtwm-wrap .path-strip::before{ animation:none !important; }
}

/* Animated continuity strip (subtle, premium) */
.mtwm-wrap .path-strip{
 position: relative;
 isolation: isolate;
}
.mtwm-wrap .path-strip::before{
 content: none;
}
@keyframes mtwmGlow{
 0%{ transform: translateX(-2%); opacity:.75; }
 50%{ transform: translateX(2%); opacity:1; }
 100%{ transform: translateX(-2%); opacity:.75; }
}

/* Pulse the active dot very softly */
.mtwm-wrap .path-step.active .dot{
 animation: mtwmPulse 1.8s ease-in-out infinite;
}
@keyframes mtwmPulse{
 0%,100%{ box-shadow: 0 0 0 5px rgba(255,91,192,.12); transform: scale(1); }
 50%{ box-shadow: 0 0 0 8px rgba(255,91,192,.10); transform: scale(1.03); }
}

/* Cover-style pagination */
.mtwm-wrap .pager{
 background: var(--paper);
}
.mtwm-wrap .page-numbers{
 align-items:center;
}
.mtwm-wrap .page-btn{
 width: 44px;
 height: 44px;
 border-radius: 16px; /* "cover" shape */
 border: 1px solid rgba(231,232,238,.95);
 background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,247,251,.9));
 box-shadow: 0 8px 18px rgba(16,17,20,.08);
 transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.mtwm-wrap .page-btn:hover{
 transform: translateY(-1px);
 border-color: rgba(255,91,192,.35);
 box-shadow: 0 10px 22px rgba(16,17,20,.10);
}
.mtwm-wrap .page-btn.active{
 background: linear-gradient(180deg, rgba(255,91,192,1), rgba(255,91,192,.86));
 border-color: rgba(255,91,192,1);
 box-shadow: 0 12px 28px rgba(255,91,192,.28);
}
.mtwm-wrap .page-btn.active:hover{
 transform: translateY(-1px);
}

/* Prev/Next as "capsules" */
.mtwm-wrap #prevBtn, .mtwm-wrap #nextBtn{
 border-radius: 999px;
 background: rgba(255,255,255,.92);
 box-shadow: 0 8px 18px rgba(16,17,20,.06);
}
.mtwm-wrap #prevBtn:hover, .mtwm-wrap #nextBtn:hover{
 border-color: rgba(255,91,192,.35);
}

/* Fixed Series Rail (Collection + Guide) */
.mtwm-wrap .mtwm-fixed-rail{
 position: fixed;
 right: 22px;
 top: 92px;
 width: 320px;
 max-width: calc(100vw - 44px);
 z-index: 40;
 display: none;
}
@media (min-width: 1180px){
.mtwm-wrap .mtwm-fixed-rail{ display:block; }
}
.mtwm-wrap .mtwm-fixed-rail .rail{
 border: 1px solid rgba(231,232,238,.85);
 background: rgba(255,255,255,.78);
 backdrop-filter: blur(10px);
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-soft);
 overflow:hidden;
}
.mtwm-wrap .mtwm-fixed-rail .rail-head{
 padding: 14px 14px 12px;
 border-bottom: 1px solid rgba(231,232,238,.75);
 background: linear-gradient(180deg, rgba(255,91,192,.10), transparent);
}
.mtwm-wrap .mtwm-fixed-rail .rail-head .k{
 font-size: var(--kicker);
 letter-spacing:.16em;
 text-transform: uppercase;
 color: var(--muted);
}
.mtwm-wrap .mtwm-fixed-rail .rail-head .t{
 font-weight: 400;
 margin-top: 6px;
 font-size: 15px;
}
.mtwm-wrap .mtwm-fixed-rail .rail-body{
 padding: 12px 14px 14px;
}
.mtwm-wrap .mtwm-fixed-rail .rail-link{
 display:flex;
 gap: 10px;
 align-items:flex-start;
 padding: 10px 10px;
 border-radius: 16px;
 border: 1px solid transparent;
 color: var(--muted);
 margin-bottom: 8px;
}
.mtwm-wrap .mtwm-fixed-rail .rail-link:hover{
 border-color: rgba(255,91,192,.25);
 background: rgba(255,91,192,.06);
 color: var(--ink);
}
.mtwm-wrap .mtwm-fixed-rail .badge{
 width: 26px; height: 26px;
 border-radius: 12px;
 display:flex; align-items:center; justify-content:center;
 background: rgba(255,91,192,.14);
 border: 1px solid rgba(255,91,192,.25);
 color: var(--ink);
 font-weight: 400;
 flex: 0 0 auto;
}
.mtwm-wrap .mtwm-fixed-rail .rail-foot{
 padding: 12px 14px 14px;
 border-top: 1px solid rgba(231,232,238,.75);
 display:flex; gap: 10px; flex-wrap:wrap;
}
.mtwm-wrap .mtwm-fixed-rail .rail-foot .btn{
 width: 100%;
}

/* Prevent rail overlap with main content on extra-wide screens */
@media (min-width: 1180px){
.mtwm-wrap body.mtwm-has-rail .mtwm-container{
 max-width: calc(var(--max) - 160px);
 }
}

/* MTWM hardening: prevent theme link underlines */
.mtwm-wrap a,
.mtwm-wrap a:visited,
.mtwm-wrap a:hover,
.mtwm-wrap a:active{
 text-decoration: none !important;
}
.mtwm-wrap a:focus{
 outline: 2px solid rgba(255,91,192,.35);
 outline-offset: 2px;
}

/* Article layout */
.mtwm-wrap .article{
 display:grid;
 grid-template-columns: 1.25fr .75fr;
 gap: 16px;
 padding: 18px 0 34px;
}
/* Mobile: ensure article stacks (specificity must beat theme styles) */
@media (max-width: 920px){
 .mtwm-wrap .article{ grid-template-columns: 1fr; }
}

/* Mobile guide: convert "Next steps" sidebar into a full-width floating bar on scroll.
   JS adds .mtwm-tocbar and toggles .mtwm-show.
   No-JS fallback: the TOC remains a normal card under the article.
*/
@media (max-width: 920px){
 .mtwm-wrap .toc.mtwm-tocbar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  z-index: 9999;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  height: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease;
 }
 .mtwm-wrap .toc.mtwm-tocbar.mtwm-show{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
 }
 .mtwm-wrap .toc.mtwm-tocbar h3{ display:none; }
 .mtwm-wrap .toc.mtwm-tocbar a{
  margin: 0;
  padding: 10px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border: 1px solid rgba(231,232,238,.9);
 }
 .mtwm-wrap .toc.mtwm-tocbar a:hover{
  background: rgba(255,91,192,.06);
  border-color: rgba(255,91,192,.28);
 }
 .mtwm-wrap .toc.mtwm-tocbar > div{ margin-top: 0 !important; flex: 0 0 auto; }
 .mtwm-wrap .toc.mtwm-tocbar .btn.primary{
  padding: 10px 14px;
  border-radius: 999px;
 }
 .mtwm-wrap .toc.mtwm-tocbar .toc-related{ display:none !important; }

 /* Make room so the bar never covers reading content */
 .mtwm-wrap main.mtwm-container{ padding-bottom: 110px; }
}
.mtwm-wrap .prose{
 border: 1px solid var(--line);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 overflow:hidden;
}
.mtwm-wrap .prose .head{
 padding: 18px 18px 10px;
 border-bottom: 1px solid rgba(231,232,238,.75);
 background: linear-gradient(180deg, rgba(255,91,192,.08), transparent);
}
.mtwm-wrap .prose h1{
 margin: 10px 0 6px;
 font-size: clamp(26px, 3.2vw, 40px);
 font-weight: 400;
 letter-spacing: -0.02em;
}
.mtwm-wrap .prose .sub{
 color: var(--muted);
 margin: 0 0 12px;
 font-size: 15px;
}
.mtwm-wrap .prose .body{
 padding: 16px 18px;
}
.mtwm-wrap .callout{
 border: 1px solid rgba(255,91,192,.25);
 background: rgba(255,91,192,.08);
 border-radius: var(--radius-lg);
 padding: 14px;
 margin: 14px 0;
}
.mtwm-wrap .callout .k{ font-size: var(--kicker); letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }
.mtwm-wrap .callout .t{ font-weight: 400; margin: 6px 0 6px; }
.mtwm-wrap .toc{
 position: sticky; top: 78px;
 border: 1px solid var(--line);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 padding: 16px;
 height: fit-content;
}
.mtwm-wrap .toc h3{ margin:0 0 10px; font-weight: 400; font-size: 15px; }
.mtwm-wrap .toc a{
 display:block;
 padding: 10px 10px;
 border-radius: 12px;
 color: var(--muted);
 border: 1px solid transparent;
 margin-bottom: 8px;
}
.mtwm-wrap .toc a:hover{
 border-color: rgba(255,91,192,.28);
 background: rgba(255,91,192,.06);
 color: var(--ink);
}
.mtwm-wrap .tagbar{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 10px; }


/* Library item layout */
.mtwm-wrap .library-list .item{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:14px;
 padding:16px;
 border:1px solid rgba(231,232,238,.9);
 border-radius: 18px;
 background: rgba(255,255,255,.88);
 box-shadow: var(--shadow-soft);
}
.mtwm-wrap .library-list .item + .item{ margin-top: 12px; }
.mtwm-wrap .library-list .left{
 display:flex;
 gap:14px;
 align-items:flex-start;
 flex:1;
 min-width: 0;
}
.mtwm-wrap .library-list .thumb{
 width:72px;
 height:72px;
 border-radius: 16px;
 object-fit: cover;
 border:1px solid rgba(231,232,238,.9);
 flex:0 0 auto;
}
.mtwm-wrap .filters{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}
.mtwm-wrap #pillars{ margin-top: 10px; }

/* Callouts inside guides */
.mtwm-wrap .callout{
 border:1px solid rgba(231,232,238,.95);
 border-radius: 18px;
 background: rgba(255,255,255,.92);
 box-shadow: var(--shadow-soft);
 padding: 14px 14px;
 margin: 14px 0;
}
.mtwm-wrap .callout-k{
 font-size: 12px;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--muted);
 font-weight: 400;
 margin-bottom: 6px;
}
.mtwm-wrap .callout-b{
 font-size: 16px;
 line-height: 1.65;
 color: var(--ink);
}
.mtwm-wrap .prose ul{ margin: 10px 0 16px 18px; }
.mtwm-wrap .prose li{ margin: 6px 0; }
.mtwm-wrap .prose h2{ margin-top: 22px; }
.mtwm-wrap .prose h3{ margin-top: 16px; }

@media (max-width: 520px){
 .mtwm-wrap .mtwm-container{ padding: 0 14px; }
 .mtwm-wrap .hero{ padding: 26px 0 14px; }
 .mtwm-wrap .page-btn{ min-width: 40px; padding: 10px 12px; }
 .mtwm-wrap .library-list .thumb{ width: 62px; height: 62px; border-radius: 14px; }
}


/* Responsive library cards - mobile safe */
.mtwm-wrap .library-list .item{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:14px;
 padding:16px;
 border:1px solid rgba(231,232,238,.9);
 border-radius:18px;
 background: rgba(255,255,255,.88);
 box-shadow: var(--shadow-soft);
}
.mtwm-wrap .library-list .item + .item{ margin-top:12px; }
.mtwm-wrap .library-list .left{
 display:flex;
 gap:14px;
 align-items:flex-start;
 flex:1;
 min-width:0;
}
.mtwm-wrap .library-list .left > div{ min-width:0; }
.mtwm-wrap .library-list .title{
 overflow-wrap: break-word; word-break: normal; hyphens: auto;
 word-break:break-word;
}
.mtwm-wrap .library-list .summary{
 overflow-wrap: break-word; word-break: normal; hyphens: auto;
}

.mtwm-wrap .library-list .right{
 display:flex;
 flex-direction:column;
 align-items:flex-end;
 gap:10px;
 flex:0 0 auto;
}
.mtwm-wrap .library-list .meta{ width:100%; }
.mtwm-wrap .library-list .chiprow{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
 justify-content:flex-end;
}

.mtwm-wrap .library-list .thumb{
 width:72px;
 height:72px;
 border-radius:16px;
 object-fit:cover;
 border:1px solid rgba(231,232,238,.9);
 flex:0 0 auto;
}

@media (max-width: 720px){
 .mtwm-wrap .library-list .item{
  flex-direction:column;
  align-items:stretch;
 }
 .mtwm-wrap .library-list .right{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  width:100%;
 }
 .mtwm-wrap .library-list .chiprow{
  justify-content:flex-start;
 }
 .mtwm-wrap .library-list .btn{
  margin-left:12px;
  white-space:nowrap;
 }
}



.img-break{
 margin: 18px 0;
 border: 1px solid rgba(231,232,238,.85);
 background: rgba(255,255,255,.9);
 border-radius: 20px;
 overflow: hidden;
 box-shadow: 0 12px 30px rgba(20,20,30,.06);
}
.img-break img{
 display:block;
 width: 100%;
 height: auto;
}
.img-break .cap{
 padding: 10px 14px;
 font-size: 13px;
 color: var(--muted);
}

.mtwm-method-strip{
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
 margin: 14px 0 6px;
}
.mtwm-method-strip .ms-card{
 display: flex;
 gap: 10px;
 align-items: center;
 padding: 10px 12px;
 border-radius: 18px;
 background: rgba(255,255,255,.9);
 border: 1px solid rgba(231,232,238,.85);
 box-shadow: 0 12px 30px rgba(20,20,30,.05);
}
.mtwm-method-strip .ms-ico{
 width: 34px;
 height: 34px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius: 12px;
 background: rgba(255,91,192,.08);
 font-size: 18px;
}
.mtwm-method-strip .ms-t{
 font-weight: 700;
 font-size: 14px;
 line-height: 1.1;
}
.mtwm-method-strip .ms-s{
 font-size: 12px;
 color: var(--muted);
 line-height: 1.2;
 margin-top: 2px;
}
@media (max-width: 920px){
 .mtwm-method-strip{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
 .mtwm-method-strip{ grid-template-columns: 1fr; }
}


/* =========================================================
   Magazine layout (Hub)
   Gestalt: strong hierarchy, proximity grouping, consistent rhythm
   ========================================================= */

.mtwm-wrap .magazine{
 padding: 28px 0 18px;
}

.mtwm-wrap .mag-strip{
 display:flex;
 gap: 14px;
 overflow:auto;
 padding: 2px 2px 14px;
 margin-bottom: 12px;
 scroll-snap-type: x mandatory;
}
.mtwm-wrap .mag-pill{
 display:flex;
 align-items:center;
 gap: 12px;
 padding: 10px 12px;
 border: 1px solid rgba(231,232,238,.9);
 border-radius: 999px;
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 min-width: 240px;
 scroll-snap-align: start;
}
.mtwm-wrap .mag-pill:hover{
 border-color: rgba(255,91,192,.35);
 transform: translateY(-1px);
 transition: 140ms ease;
}
.mtwm-wrap .mag-avatar{
 width: 44px;
 height: 44px;
 border-radius: 999px;
 overflow:hidden;
 border: 1px solid rgba(231,232,238,.9);
 flex: 0 0 auto;
 background: #fff;
}
.mtwm-wrap .mag-avatar img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 display:block;
}
.mtwm-wrap .mag-pill .meta{
 display:flex;
 flex-direction:column;
 gap: 2px;
 min-width:0;
}
.mtwm-wrap .mag-pill .tt{
 font-weight: 400;
 font-size: 14px;
 color: var(--ink);
 line-height: 1.2;
 overflow:hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.mtwm-wrap .mag-pill .ss{
 font-size: 12px;
 color: var(--muted);
 overflow:hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.mtwm-wrap .mag-grid{
 display:grid;
 grid-template-columns: 1.6fr .9fr;
 gap: 16px;
 align-items:start;
}
@media (max-width: 980px){
 .mtwm-wrap .mag-grid{ grid-template-columns: 1fr; }
}

.mtwm-wrap .lede-card{
 display:block;
 border: 1px solid rgba(231,232,238,.9);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow);
 overflow:hidden;
}
.mtwm-wrap .lede-card:hover{
 border-color: rgba(255,91,192,.35);
 transform: translateY(-1px);
 transition: 160ms ease;
}

.mtwm-wrap .lede-media{
 width: 100%;
 aspect-ratio: 16/8;
 max-height: 360px;
 background: #fff;
 border-bottom: 1px solid rgba(231,232,238,.75);
 overflow:hidden;
}

@media (max-width: 600px){
 .mtwm-wrap .lede-media{ aspect-ratio: 16/10; max-height: 240px; }
}
.mtwm-wrap .lede-media img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 display:block;
}
.mtwm-wrap .lede-body{
 padding: 18px 18px 20px;
}
.mtwm-wrap .lede-body h2{
 margin: 10px 0 10px;
 font-size: clamp(26px, 3vw, 40px);
 font-weight: 400;
 letter-spacing: -0.02em;
}
.mtwm-wrap .lede-body .deck{
 margin: 0 0 14px;
 color: var(--muted);
 font-size: 16px;
}
.mtwm-wrap .lede-meta{
 display:flex;
 gap: 8px;
 flex-wrap:wrap;
 margin-top: 12px;
}
.mtwm-wrap .lede-cta{
 margin-top: 14px;
 display:flex;
 gap: 10px;
 flex-wrap:wrap;
}

.mtwm-wrap .mag-sidebar{
 border: 1px solid rgba(231,232,238,.9);
 border-radius: var(--radius-xl);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 overflow:hidden;
}
.mtwm-wrap .sidebar-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap: 10px;
 padding: 14px 14px;
 border-bottom: 1px solid rgba(231,232,238,.75);
}
.mtwm-wrap .sidebar-head h3{
 margin:0;
 font-size: 15px;
 font-weight: 400;
}
.mtwm-wrap .sidebar-list{
 padding: 10px 12px 14px;
 display:flex;
 flex-direction:column;
 gap: 10px;
}
.mtwm-wrap .side-item{
 display:flex;
 gap: 12px;
 align-items:flex-start;
 padding: 10px;
 border: 1px solid rgba(231,232,238,.85);
 border-radius: 18px;
 background: var(--paper);
}
.mtwm-wrap .side-item:hover{
 border-color: rgba(255,91,192,.35);
}
.mtwm-wrap .side-media{
 width: 72px;
 height: 72px;
 border-radius: 16px;
 overflow:hidden;
 border: 1px solid rgba(231,232,238,.9);
 background: #fff;
 flex: 0 0 auto;
}
.mtwm-wrap .side-media img{
 width:100%;
 height:100%;
 object-fit: cover;
 display:block;
}
.mtwm-wrap .side-body{
 min-width:0;
}
.mtwm-wrap .side-title{
 font-weight: 400;
 font-size: 14px;
 margin: 2px 0 4px;
 line-height: 1.25;
 overflow-wrap: break-word; word-break: normal; hyphens: auto;
}
.mtwm-wrap .side-sub{
 font-size: 12px;
 color: var(--muted);
 display:flex;
 gap: 8px;
 flex-wrap:wrap;
}

.mtwm-wrap .mag-row{
 display:grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
 gap: 14px;
 margin-top: 16px;
 align-items: start;
}
.mtwm-wrap .mag-card{
 border: 1px solid rgba(231,232,238,.9);
 border-radius: var(--radius-lg);
 background: var(--paper);
 box-shadow: var(--shadow-soft);
 overflow:hidden;
 display:flex;
 flex-direction:column;
}
.mtwm-wrap .mag-card:hover{
 border-color: rgba(255,91,192,.35);
 transform: translateY(-1px);
 transition: 140ms ease;
}
.mtwm-wrap .mag-card .mmedia{
 height: clamp(150px, 14vw, 210px);
 background: #fff;
 border-bottom: 1px solid rgba(231,232,238,.75);
 overflow:hidden;
}
.mtwm-wrap .mag-card .mmedia img{
 width:100%;
 height:100%;
 object-fit: cover;
 display:block;
}
.mtwm-wrap .mag-card .mbody{
 padding: 14px 14px 16px;
}
.mtwm-wrap .mag-card .mt{
 font-weight: 400;
 font-size: 16px;
 margin: 6px 0 6px;
 letter-spacing: -0.01em; display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.mtwm-wrap .mag-card .ms{
 color: var(--muted);
 font-size: 13px;
 line-height: 1.55;
 margin:0; display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* Simple placeholder (used only if no WP placeholder image is set) */
.mtwm-wrap .mtwm-ph{
 width:100%;
 height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 padding: 10px;
 background: #fff;
 color: var(--muted);
 font-size: 11px;
 letter-spacing: .14em;
 text-transform: uppercase;
}

/* Hub: never show a blank white media block */
.mtwm-wrap.mtwm-hub .mtwm-ph{
  background: linear-gradient(135deg, rgba(246,247,251,1), rgba(255,255,255,1));
  border: 1px solid rgba(231,232,238,.85);
  color: transparent;
  font-size: 0;
  position: relative;
}
.mtwm-wrap.mtwm-hub .mtwm-ph::after{
  content: "MTWM";
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(91,95,106,.6);
  position:absolute;
  top: 14px;
  left: 16px;
}
.mtwm-wrap.mtwm-hub .mtwm-ph::before{
  content: "";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,91,192,.16), rgba(255,91,192,0) 55%),
    radial-gradient(circle at 78% 74%, rgba(16,17,20,.09), rgba(16,17,20,0) 60%);
}

/* Pager ellipsis */
.mtwm-wrap .page-ellip{
 padding: 0 6px;
 color: var(--muted);
 font-size: 14px;
}

@media (max-width: 520px){
 .mtwm-wrap .mag-card .mmedia{ max-height: 200px; }
}

@media (max-width: 820px){
 .mtwm-wrap .tiles-grid{ grid-template-columns: 1fr; }
 .mtwm-wrap .mag-row{ grid-template-columns: 1fr; }
 .mtwm-wrap .mag-grid{ grid-template-columns: 1fr; }
 .mtwm-wrap .hero-grid{ grid-template-columns: 1fr; }
 .mtwm-wrap .section-header{ flex-direction: column; align-items: flex-start; }
 .mtwm-wrap .section-header p{ max-width: none; }
 .mtwm-wrap .topbar{ background: #fff; backdrop-filter: none; }

  /* Hub mobile: true full-width modules (edge-to-edge) */
  .mtwm-wrap.mtwm-hub main.mtwm-container{
   max-width: none;
   padding: 0;
  }

  /* Keep text readable while modules stay full-width */
  .mtwm-wrap.mtwm-hub .section-header{ padding: 0 16px; }
  .mtwm-wrap.mtwm-hub .mag-strip{ padding-left: 16px; padding-right: 16px; }
  .mtwm-wrap.mtwm-hub .footer{ padding-left: 16px; padding-right: 16px; }

  /* Library bar: one row of tools, no duplicate pillars */
  .mtwm-wrap.mtwm-hub .library-top{ padding: 0 16px; }
  .mtwm-wrap.mtwm-hub .library-top .search{ flex: 1 1 100%; width: 100%; }
  .mtwm-wrap.mtwm-hub .library-top .input{ width: 100%; }
  .mtwm-wrap.mtwm-hub .library-top .input input{ width: 100%; min-width: 0; }
  .mtwm-wrap.mtwm-hub .library-top .filters{ width: 100%; justify-content: flex-start; }


  /* Mobile: keep rounded edges + Apple-style depth (do NOT square cards) */
  .mtwm-wrap.mtwm-hub .lede-card,
  .mtwm-wrap.mtwm-hub .mag-sidebar,
  .mtwm-wrap.mtwm-hub .pager{
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-soft);
   overflow: hidden;
  }

  .mtwm-wrap.mtwm-hub .mag-card,
  .mtwm-wrap.mtwm-hub .mtwm-tile,
  .mtwm-wrap.mtwm-hub .library-list .item{
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-soft);
   overflow: hidden;
  }

  .mtwm-wrap.mtwm-hub .library-top{ margin-bottom: 12px; }
  .mtwm-wrap.mtwm-hub .library-list .item{ padding: 14px 16px; margin-top: 12px; }
  .mtwm-wrap.mtwm-hub .library-list .item:first-of-type{ margin-top: 0; }
  .mtwm-wrap.mtwm-hub .pager{ margin-top: 12px; }
}