/* psychoSocial — Layout CSS (v0.3)
   Page scaffolding, spacing, grid/layout rules.
*/
.themeDock{ display:none; }
.themeSwitch{
  display:flex;
  gap:var(--spacing-sm);
  padding:6px;
  border-radius:var(--border-radius-lg);
  border:1px solid var(--border);
  background:var(--card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.themeOpt{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--font-size-md);
  line-height:1;
  opacity:.72;
  transition:background .15s ease, transform .06s ease, opacity .15s ease, border-color .15s ease;
}
.themeOpt:hover{ opacity:.9; }
.themeOpt:active{ transform:scale(.99); }

.themeOpt.isActive{
  opacity:1;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
}

html[data-theme="light"] .themeOpt.isActive{
  border-color:rgba(0,0,0,.12);
  background:rgba(0,0,0,.06);
}

.langSwitch{
  display:flex;
  gap:var(--spacing-sm);
  padding:6px;
  border-radius:var(--border-radius-lg);
  border:1px solid var(--border);
  background:var(--card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.langOpt{
  width:44px;
  height:36px;
  border-radius:13px;
  border:1px solid transparent;
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--font-size-xs);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.72;
  transition:background .15s ease, transform .06s ease, opacity .15s ease, border-color .15s ease;
}
.langOpt:hover{ opacity:.9; }
.langOpt:active{ transform:scale(.99); }
.langOpt.isActive{
  opacity:1;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
}
html[data-theme="light"] .langOpt.isActive{
  border-color:rgba(0,0,0,.12);
  background:rgba(0,0,0,.06);
}

@media (max-width:420px){
  .langOpt{ width:42px; height:34px; border-radius:12px; }
}


@media (max-width:420px){
  .themeDock{ top:10px; right:10px; }
  .themeOpt{ width:38px; height:38px; border-radius:13px; }
}


#backBtnBottom{
  width:50px;
  height:50px;
  border-radius:17px;
  font-size:22px;
}

.pageTag{
  margin-left:2px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:17px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}


.pageTagLink{ text-decoration:none; }
.pageTagLink:visited{ color:inherit; }


.pageTag.blogTag{
  color:rgba(30,200,110,.92);
  border-color:rgba(60,255,140,.28);
  background:rgba(60,255,140,.05);
  box-shadow:0 0 0 1px rgba(60,255,140,.10) inset, 0 10px 22px rgba(0,0,0,.50);
}

.pageTag.resourcesTag{
  color:rgba(255,90,90,.88);
  border-color:rgba(255,90,90,.30);
  background:rgba(255,90,90,.05);
  box-shadow:0 0 0 1px rgba(255,90,90,.10) inset, 0 10px 22px rgba(0,0,0,.50);
}

.pageTag.dashTag{
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 10px 22px rgba(0,0,0,.55);
}


/* v1.13.0-alpha7 — keep BLOG/RESOURCES tag accent colors in light theme
   (base.css sets a generic .pageTag color for light; these re-apply per-tag accents).
*/
html[data-theme="light"] .pageTag.blogTag{
  color:rgba(30,200,110,.92);
  border-color:rgba(60,255,140,.24);
  background:rgba(0,0,0,.03);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}
html[data-theme="light"] .pageTag.resourcesTag{
  color:rgba(255,90,90,.80);
  border-color:rgba(255,90,90,.26);
  background:rgba(0,0,0,.03);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}
html[data-theme="light"] .pageTag.dashTag{
  color:#0b0b0b;
  border-color:rgba(0,0,0,.22);
  background:rgba(0,0,0,.03);
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}

/* Page harmony pack: shared header rhythm for Blog/Resources/Archive/Search/Dashboard. */
body[data-page="blog"] .card,
body[data-page="resources"] .card,
body[data-page="archive"] .card,
body[data-page="search"] .card,
body[data-page="dashboard"] .card{
  padding-top: 12px;
}
body[data-page="blog"] .psBreadcrumbBar,
body[data-page="resources"] .psBreadcrumbBar,
body[data-page="archive"] .psBreadcrumbBar,
body[data-page="search"] .psBreadcrumbBar,
body[data-page="dashboard"] .psBreadcrumbBar{
  display: none !important;
}
body[data-page="blog"] .pageHeaderRow,
body[data-page="resources"] .pageHeaderRow,
body[data-page="archive"] .pageHeaderRow,
body[data-page="search"] .pageHeaderRow,
body[data-page="dashboard"] .pageHeaderRow{
  margin-top: 8px;
  margin-bottom: 12px;
}
/* v1.12.x PATCH — Top-level nav already exposes current page:
   hide redundant in-page title row on first-level sections. */
body[data-page="blog"] .pageHeaderRow,
body[data-page="resources"] .pageHeaderRow,
body[data-page="archive"] .pageHeaderRow,
body[data-page="dashboard"] .pageHeaderRow{
  display: none;
}
body[data-page="blog"] .pageHeaderRow .tagRow,
body[data-page="resources"] .pageHeaderRow .tagRow,
body[data-page="archive"] .pageHeaderRow .tagRow,
body[data-page="search"] .pageHeaderRow .tagRow,
body[data-page="dashboard"] .pageHeaderRow .tagRow{
  width: 100%;
  justify-content: flex-start;
}
body[data-page="blog"] .pageHeaderRow .pageTag,
body[data-page="resources"] .pageHeaderRow .pageTag,
body[data-page="archive"] .pageHeaderRow .pageTag,
body[data-page="search"] .pageHeaderRow .pageTag,
body[data-page="dashboard"] .pageHeaderRow .pageTag{
  display: block;
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 17px;
  letter-spacing: .16em;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--fg);
  background:
    radial-gradient(120% 120% at 16% 0%, rgba(247,147,26,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset;
}
body[data-page="blog"] .pageHeaderRow + *,
body[data-page="resources"] .pageHeaderRow + *,
body[data-page="archive"] .pageHeaderRow + *,
body[data-page="search"] .pageHeaderRow + *,
body[data-page="dashboard"] .pageHeaderRow + *{
  margin-top: 8px;
}
body[data-page="blog"] .pageHeaderRow + *,
body[data-page="resources"] .pageHeaderRow + *,
body[data-page="archive"] .pageHeaderRow + *,
body[data-page="dashboard"] .pageHeaderRow + *{
  margin-top: 0;
}
html[data-theme="light"] body[data-page="blog"] .pageHeaderRow .pageTag,
html[data-theme="light"] body[data-page="resources"] .pageHeaderRow .pageTag,
html[data-theme="light"] body[data-page="archive"] .pageHeaderRow .pageTag,
html[data-theme="light"] body[data-page="search"] .pageHeaderRow .pageTag,
html[data-theme="light"] body[data-page="dashboard"] .pageHeaderRow .pageTag{
  border-color: rgba(0,0,0,.14);
  background:
    radial-gradient(120% 120% at 16% 0%, rgba(247,147,26,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.01));
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}

@media (max-width: 900px){
  body[data-page="blog"] .pageHeaderRow,
  body[data-page="resources"] .pageHeaderRow,
  body[data-page="archive"] .pageHeaderRow,
  body[data-page="search"] .pageHeaderRow,
  body[data-page="dashboard"] .pageHeaderRow{
    margin-top: 6px;
    margin-bottom: 10px;
  }
  body[data-page="blog"] .pageHeaderRow .tagRow,
  body[data-page="resources"] .pageHeaderRow .tagRow,
  body[data-page="archive"] .pageHeaderRow .tagRow,
  body[data-page="search"] .pageHeaderRow .tagRow,
  body[data-page="dashboard"] .pageHeaderRow .tagRow{
    min-height: 0;
    align-items: stretch;
  }
  body[data-page="blog"] .pageHeaderRow .pageTag,
  body[data-page="resources"] .pageHeaderRow .pageTag,
  body[data-page="archive"] .pageHeaderRow .pageTag,
  body[data-page="search"] .pageHeaderRow .pageTag,
  body[data-page="dashboard"] .pageHeaderRow .pageTag{
    padding: 12px 13px;
    border-radius: 12px;
    font-size: 14px;
    letter-spacing: .14em;
    min-height: 44px;
  }
  body[data-page="blog"] .card .post,
  body[data-page="resources"] .card .post,
  body[data-page="archive"] .card .post{
    border-radius: 12px;
    padding: 12px;
  }
}

.drawer{
  position:fixed;
  top:0;
  left:0;
  width:min(260px, 86vw);
  max-width:320px;
  background:rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--border-radius-lg);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  
  z-index:var(--z-dropdown-open);
  transform:translateY(-8px) scale(.98);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}

/* v1.01 fix7 — Drawer theme inversion (same rule as home dropdown)
   Light theme -> black drawer; Dark theme -> white drawer.
*/
html[data-theme="dark"] .drawer{
  background:#000;
  border-color:rgba(255,255,255,.12);
}
html[data-theme="dark"] .drawer .drawerLink{
  color:#f2f2f2;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
html[data-theme="dark"] .drawer .drawerLink:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.12)), 0 0 0 1px rgba(255,255,255,.10) inset;
  transform: translateY(-1px);
}

.drawerLink:focus-visible{
  outline: 2px solid var(--color-accent-primary, var(--accent));
  outline-offset: 2px;
  background:rgba(255,255,255,.10);
}

html[data-theme="light"] .drawer{
  background:#fff;
  border-color:rgba(0,0,0,.14);
  box-shadow:0 18px 48px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06) inset;
}
html[data-theme="light"] .drawer .drawerLink{
  color:#0b0b0b;
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.04);
}
html[data-theme="light"] .drawer .drawerLink:hover{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.22);
}

.drawer.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.overlay{
  position:fixed;
  inset:0;
  background:var(--menu-overlay-bg);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:var(--z-dropdown);
}

.overlay.open{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}

@media (max-width:520px){

  
  .drawer{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .drawerLink{
    background:rgba(10,10,10,.96);
  }
  .overlay{
    background:var(--menu-overlay-bg);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
  }
}


.drawerHeader{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.drawerTitle{
  font-size:var(--font-size-xs);
  margin-right:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  opacity:.85;
}

.drawerNav{
  display:grid;
  gap:10px;
  margin-top:6px;
}

.drawerLink{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  text-decoration:none;
  font-size:var(--font-size-sm);
  letter-spacing:.08em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  will-change: transform;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .10s ease;
}

.drawerLink:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.12)), 0 0 0 1px rgba(255,255,255,.10) inset;
  transform: translateY(-1px);
}

.drawerLink:focus-visible{
  outline: 2px solid var(--color-accent-primary, var(--accent));
  outline-offset: 2px;
  background:rgba(255,255,255,.10);
}

.drawerLink:active{ transform: translateY(0) scale(.995); }

html[data-theme="light"] .drawerLink{
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}
html[data-theme="light"] .drawerLink:hover{
  border-color:rgba(0,0,0,.18);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.12)), 0 0 0 1px rgba(0,0,0,.10) inset;
}

.drawerLink.active{
  /* Light theme baseline: reduce the “3D” pop; keep it calm. */
  background:rgba(0,0,0,.055);
  border-color:rgba(0,0,0,.18);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.05) inset,
    0 7px 16px rgba(0,0,0,.16);
}


html[data-theme="dark"] .drawerLink.active{
  /* Dark theme: subtle depth for active row (halfway between dark and light). */
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.32);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 -1px 0 rgba(0,0,0,.55) inset,
    0 10px 18px rgba(0,0,0,.20) inset,
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 14px 30px rgba(0,0,0,.70);
}


.drawerLink.active .drawerMark{
  color:var(--color-accent-primary, var(--accent));
  font-weight:900;
  opacity:1;
}

.drawerLink:hover .drawerMark{
  opacity:.65;
}

.drawerLink.active span:not(.drawerMark){
  color:var(--fg);
  font-weight:800;
}
.drawerMark{
  opacity:0; /* identity: diamond is a marker (visible on active/hover) */
  display:inline-block;
  min-width:1.1em;
  text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  letter-spacing:.16em;
}

@media (prefers-reduced-motion: reduce){
  .drawer{ transition:none !important; }
  .drawerLink{ transition:none !important; }
  .drawerLink:hover,
  .drawerLink:active{ transform:none !important; }
}


.banner{
  border-radius:var(--border-radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}
.banner img{
  width:100%;
  height:auto;
  display:block;
  will-change:transform,filter;
  animation:tremble 140ms steps(2,end) infinite;
  filter:contrast(1.02);
}

.sigilRow{
  display:flex;
  justify-content:center;
  margin:6px 0 12px;
}

.sigilImg{
  width:64px;
  height:64px;
  border-radius:var(--border-radius-lg);
  object-fit:cover;
  display:block;
  cursor:pointer;
  background:#000;
  padding:6px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 22px rgba(0,0,0,.55);
}

.bannerRow{
  margin-top:12px;
  position:relative;
  border-radius:var(--border-radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}

/* v0.9: banner is HOME-only (internal pages stay clean) */
body:not([data-page="home"]) .bannerRow{ display:none !important; }

/* HOME — Vertical rhythm
   Keep spacing between MENU / banner / accordions consistent.
   We move spacing responsibility to a single stack container so we
   don't accumulate margins across adjacent blocks.
*/
body[data-page="home"] .homeStack{
  --homeStackGap: 12px;
  display:flex;
  flex-direction:column;
  gap: var(--homeStackGap);
  margin-top: var(--homeStackGap);
}
@media (min-width: 920px){
  body[data-page="home"] .homeStack{ --homeStackGap: 14px; }
}

body[data-page="home"] .homeStack .bannerRow,
body[data-page="home"] .homeStack .homeToggles,
body[data-page="home"] .homeStack .sectionDivider{
  margin-top:0 !important;
}
body[data-page="home"] .homeStack .sectionDivider{
  margin:0 !important;
}

.bannerRow::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:72px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.55));
}
html[data-theme="light"] .bannerRow::after{
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55));
}

.bannerImg{
  width:100%;
  height:180px;
  object-fit:cover;
  object-position:center 35%;
  display:block;
  will-change:transform,filter;
  animation:tremble 140ms steps(2,end) infinite;
  filter:contrast(1.02);
}


.homeBrandRow{
  display:flex;
  justify-content:center;
  margin:4px 0 8px;
}
.homeBrandImg{
  height:46px;
  width:auto;
  max-width:92%;
  object-fit:contain;
  opacity:.96;
}

/* Home battery baseline (mobile-first): image is visible, desktop trigger lives in desktop.css. */
body[data-page="home"] .batteryRow{
  display:block;
  padding:0;
}
body[data-page="home"] .batteryShell{
  display:none;
}
body[data-page="home"] .batteryFull{
  display:block;
  width:100%;
}
body[data-page="home"] .batteryRow .batteryImg{
  width:100%;
  height:auto;
  max-height:min(66vh, 560px);
  object-fit:contain;
  object-position:center center;
  background:#000;
  border-radius:14px;
}

@media (min-width:560px){
  .bannerImg{ height:210px; }
}

@media (max-width:420px){
  .sigilImg{ width:56px; height:56px; border-radius:16px; }
  .bannerImg{ height:165px; }
}

.pageRow{
  margin-top:12px;
  position:relative;
  
  overflow:visible;
  
  z-index:auto;
}

.sectionDivider{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:var(--spacing-md) 0 14px;
  border-radius:var(--border-radius-full);
  opacity:.75;
}

.sectionScroller{
  margin-top:12px;
  display:grid;
  gap:12px;
  max-height:236px;
  overflow:auto;
  padding-right:6px;
  overscroll-behavior:contain;
}

/* Resources page: avoid the cramped nested scroller on mobile. */
body[data-page="resources"] .sectionScroller.posts{
  max-height:none;
  overflow:visible;
  padding-right:0;
}


body[data-page="home"] .sectionScroller{
  max-height:none;
  overflow:visible;
  padding-right:0;
}


.homeMenuWide{
  width:100%;
  margin-left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.homeMenuLabel{
  font-size:var(--font-size-lg);
  letter-spacing:.22em;
}

@media (max-width:520px){
  .homeMenuLabel{ font-size:var(--font-size-md); }
  .homeBrandImg{ height:42px; }
}

.homeMenuWide.pageTagAlt{
  background:var(--menu-btn-bg);
  border-color:var(--menu-btn-border);
  box-shadow:0 0 0 1px var(--menu-btn-inset) inset;
  color:var(--menu-btn-fg);
  position:relative;
  overflow:hidden;
}

#menuBtn{ position:relative; overflow:hidden; }

/* MENU closed: micro “totem” presence (ghost diamond). */
#menuBtn::before{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:var(--font-size-sm);
  line-height:1;
  opacity:.60;
  pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
}
#menuBtn[aria-expanded="true"]::before{
  transform:translateY(-50%) rotate(180deg);
  opacity:.85;
}
@media (prefers-reduced-motion: reduce){
  #menuBtn::before{ transition:none; }
}

#menuBtn[aria-expanded="false"]::after{
  content:"⋄";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-54%);
  font-size:46px;
  line-height:1;
  opacity:.06;
  pointer-events:none;
}
@media (max-width:420px){
  #menuBtn[aria-expanded="false"]::after{ font-size:40px; }
}


.homeDropdown{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  width:100%;
  min-width:0;
  margin-top:10px;

  border-radius:var(--border-radius-lg);
  border:1px solid var(--menu-panel-border);
  background:var(--menu-panel-bg);
  color:var(--menu-panel-fg);
  box-shadow:var(--menu-panel-shadow);

  /* Dashboard-like disclosure (no floating popover): collapsed by default */
  max-height:0;
  overflow:hidden;
  padding:0;
  opacity:0;
  pointer-events:none;
  visibility:hidden;

  transition:max-height .22s ease, opacity .18s ease, padding .18s ease;
  z-index:auto;
}
.homeDropdown.open{
  max-height:70vh;
  padding:12px;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .homeDropdown{ transition:none; }
}


.homeDropdown .drawerLink{
  color:var(--menu-link-fg);
  border-color:var(--menu-link-border);
  background:var(--menu-link-bg);
}
.homeDropdown .drawerLink:hover{
  background:var(--menu-link-hover-bg);
  border-color:var(--menu-link-hover-border);
}
@media (max-width:520px){
  /* (popovers removed) */
}
.homeDropdownNav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* MENU branch: Resources nested tree (single column, readable) */
.homeDropdown .drawerTree{
  display:block;
}

/* Toggle buttons use the same styling as links (class="drawerLink") */
.homeDropdown .drawerTreeToggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}
.homeDropdown .drawerTreeToggle .drawerChevron{
  margin-left:auto;
  opacity:.85;
  transition:transform .16s ease;
}

/* Rotate chevron when a branch is expanded */
.homeDropdown .drawerTreeToggle[aria-expanded="true"] .drawerChevron{
  transform:rotate(180deg);
}

.homeDropdown .drawerTreeBranch{
  display:none;
  width:100%;
  margin-top:6px;
  margin-left:6px;
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.10);
}
html[data-theme="light"] .homeDropdown .drawerTreeBranch{
  border-left-color:rgba(0,0,0,.12);
}
.homeDropdown .drawerTreeBranch.open{
  display:block;
}

/* Children inside a branch */
.homeDropdown .drawerTreeChild{
  margin-top:6px;
  position:relative;
}

/* Simple tree connector (subtle, no extra markup) */
.homeDropdown .drawerTreeChild:before{
  content:"";
  position:absolute;
  left:-12px;
  top:50%;
  width:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .homeDropdown .drawerTreeChild:before{
  border-top-color:rgba(0,0,0,.10);
}
.homeDropdown .drawerTreeLeaf{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--menu-link-border);
  background:var(--menu-link-bg);
  color:var(--menu-link-fg);
  text-decoration:none;
  font-size:.93em;
}

/* Sub-branch items: slightly calmer than top-level links (readability on narrow widths) */
.homeDropdown .drawerTreeBranch .drawerLink{
  box-shadow:none;
}
.homeDropdown .drawerTreeBranch .drawerTreeLeaf{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.10);
}
html[data-theme="light"] .homeDropdown .drawerTreeBranch .drawerTreeLeaf{
  background:rgba(0,0,0,.03);
  border-color:rgba(0,0,0,.12);
}

/* Tighten the dot marker inside leaves */
.homeDropdown .drawerTreeLeaf .drawerMark{
  opacity:.72;
  font-size:.95em;
}
.homeDropdown .drawerTreeLeaf:hover{
  background:var(--menu-link-hover-bg);
  border-color:var(--menu-link-hover-border);
}


body[data-page="home"] #drawer{ display:none !important; }


.sectionScroller::-webkit-scrollbar{ width:10px; }
.sectionScroller::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:var(--border-radius-full); }
.sectionScroller::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:var(--border-radius-full); border:2px solid rgba(0,0,0,.35); }

.pageTagAlt{
  color:rgba(242,242,242,.92);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}

.postDisabled{
  opacity:.58;
  filter:saturate(.8);
  pointer-events:none;
}
@keyframes tremble{
  0%{ transform:translate(0,0) rotate(0deg); }
  20%{ transform:translate(-1px,1px) rotate(-0.12deg); }
  40%{ transform:translate(1px,-1px) rotate(0.10deg); }
  60%{ transform:translate(-1px,0px) rotate(0.06deg); }
  80%{ transform:translate(1px,1px) rotate(-0.08deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}

.ritualStrip{
  position:relative;
  margin:14px -16px 14px -16px;
  padding:18px 10px;
  background:#fff;
  color:#000;
  border-top:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.15);
  overflow:hidden;
  will-change:transform,filter;
  animation:ritualJitter 3.2s steps(2,end) infinite;
}
@keyframes ritualJitter{
  0%,96%,100%{ transform:translate(0,0); }
  97%{ transform:translate(0.6px,-0.4px); }
  98%{ transform:translate(-0.5px,0.3px); }
  99%{ transform:translate(0.3px,0.2px); }
}
.ritualStrip::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.06) 0px,
    rgba(0,0,0,.06) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  opacity:.12;
  mix-blend-mode:multiply;
  pointer-events:none;
  transform:translateY(0);
  animation:scanMove 1.8s linear infinite;
}
@keyframes scanMove{ 0%{ transform:translateY(0);} 100%{ transform:translateY(10px);} }
.ritualStrip::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0), rgba(0,0,0,.10));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  mix-blend-mode:multiply;
  animation:ritualFlicker 6.5s steps(1,end) infinite;
}
@keyframes ritualFlicker{
  0%,91%,100%{ opacity:0; }
  92%{ opacity:.18; }
  93%{ opacity:0; }
  94%{ opacity:.14; }
  95%{ opacity:0; }
}
.ritualInner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;
  z-index:var(--z-base);
}
.ritualIcon{
  width:36px;
  height:36px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.25);
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.ritualIcon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:contrast(1.1);
}
.ritualText{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:var(--font-size-sm);
  letter-spacing:.18em;
  line-height:1.2;
}

.posts{ margin-top:12px; display:grid; gap:12px; }
.post{
  display:block;
  text-decoration:none;
  color:var(--color-text-primary, var(--fg));
  border:var(--border-width-thin, 1px) solid var(--color-border-primary, rgba(255,255,255,.14));
  background:var(--color-bg-secondary, rgba(0,0,0,.22));
  border-radius:var(--border-radius-lg, 18px);
  padding:var(--spacing-md, 14px);
  transition:background var(--transition-fast, .15s ease), transform .06s ease;
}
.post:hover{ background:var(--color-bg-tertiary, rgba(255,255,255,.08)); }
.post:active{ transform:scale(.995); }
.postTop{ display:flex; align-items:baseline; justify-content:flex-start; gap:12px; flex-wrap:wrap; }

/* META PACK — desktop has enough air: keep title left, meta right.
   Mobile can wrap naturally without crushing the title. */
@media (min-width: 900px){
  .postTop{ flex-wrap:nowrap; }
  .meta{ margin-left:auto; }
}
.postTitle{ margin:0; font-size:15px; letter-spacing:.02em; font-weight:700; color:var(--color-accent-primary, var(--accent)); }


/* === Desktop refinement (v1.0 / 2026-01-14)
   Blog/Resources lists: avoid nested scrolling on desktop.
   Rationale: desktop UX is better with a single natural page scroll.
   Note: HOME already disables nested scrolling globally for its dashboard sections.
*/
@media (min-width:900px){
  body[data-page="blog"] .sectionScroller.posts,
  body[data-page="resources"] .sectionScroller.posts,
  body[data-page="archive"] .sectionScroller.posts{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}

/* Cards grid: exploit desktop width (max 2 columns).
   Rationale: larger cards = calmer reading and less “tiny tiles” on wide screens.
*/
@media (min-width:900px){
  body[data-page="blog"] .posts,
  body[data-page="resources"] .posts{
    grid-template-columns: 1fr;
    align-items:start;
  }
}
/* Intentionally no 3-column desktop mode. */


/* Highlights bars: keep layout, shift feeling from “status” to “sigil”. */
.homeToggles .pageTag .homeAccLabel{ position:relative; }
.homeToggles .pageTag .homeAccLabel::before{
  content:"⋄";
  display:inline-block;
  margin-right:10px;
  opacity:.88;
  letter-spacing:0;
}
.homeToggles .pageTag.blogTag .homeAccLabel::before{ color:rgba(30,200,110,.92); }
.homeToggles .pageTag.resourcesTag .homeAccLabel::before{ color:rgba(255,90,90,.88); }

/* RitualPlus micro-polish: keep uppercase, reduce "terminal feel" by using sans + softer tracking */
html[data-ps-preset="ritualplus"] .drawerTitle{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.12em;
  opacity:.90;
}
html[data-ps-preset="ritualplus"] .pageTag{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.12em;
}

/* LAB · FEATURE/UX — BUNDLE B · HOME TRACK (visual rhythm; separators less declared)
   Scope: Home only (index.html uses body[data-page="home"]).
   Safe: CSS-only, no layout contract changes.
*/
body[data-page="home"] .homeToggles{ gap:var(--spacing-md); margin-top:var(--spacing-md); }

/* Make section divider a "passage" instead of a hard line */
body[data-page="home"] .sectionDivider{
  opacity:.45;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
  height:1px;
  border-radius:var(--border-radius-full);
  margin:18px 0 18px;
}

/* Home accordion tags: reduce "double signal" (border+glow+bg) while keeping identity */
body[data-page="home"] .homeToggles .pageTag{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
}
body[data-page="home"] .homeToggles .pageTag.blogTag{
  background: rgba(60,255,140,.040);
  border-color: rgba(60,255,140,.22);
  box-shadow: 0 0 0 1px rgba(60,255,140,.08) inset;
}
body[data-page="home"] .homeToggles .pageTag.resourcesTag{
  background: rgba(255,90,90,.035);
  border-color: rgba(255,90,90,.22);
  box-shadow: 0 0 0 1px rgba(255,90,90,.07) inset;
}
body[data-page="home"] .homeToggles .pageTag.dashTag{
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Paper: keep clarity, reduce contrast spikes */
:root[data-theme="light"] body[data-page="home"] .homeToggles .pageTag{
  background: rgba(0,0,0,.025);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
}
:root[data-theme="light"] body[data-page="home"] .sectionDivider{
  opacity:.55;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.16), rgba(0,0,0,0));
}

/* Blog lock marker (when site is locked and Blog redirects to Gate). */
.menu-item[data-page="blog"][data-ps-blog-locked="1"] span[data-i18n="blog"]::after{
  content:" \1F512";
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  opacity:.86;
  vertical-align:middle;
}

.psDesktopTopbar .menu-item[data-page="blog"][data-ps-blog-locked="1"] span[data-i18n="blog"]::after{
  font-size:10px;
  opacity:.9;
}

/* v2.1 PATCH - Multi-page shell coherence (non-home surfaces)
   Align spacing rhythm across blog/resources/archive/dashboard/resource/post/dash-*.
*/
body[data-page="blog"] .pageRow,
body[data-page="resources"] .pageRow,
body[data-page="archive"] .pageRow,
body[data-page="dashboard"] .pageRow,
body[data-page="post"] .pageRow,
body[data-page^="dash-"] .pageRow{
  margin-top: 8px;
}

body[data-page="blog"] .pageHeaderRow .tagRow,
body[data-page="resources"] .pageHeaderRow .tagRow,
body[data-page="archive"] .pageHeaderRow .tagRow,
body[data-page="dashboard"] .pageHeaderRow .tagRow,
body[data-page="post"] .pageHeaderRow .tagRow,
body[data-page^="dash-"] .pageHeaderRow .tagRow{
  width: 100%;
  justify-content: flex-start;
}

body[data-page="blog"] .pageHeaderRow .pageTag,
body[data-page="resources"] .pageHeaderRow .pageTag,
body[data-page="archive"] .pageHeaderRow .pageTag,
body[data-page="dashboard"] .pageHeaderRow .pageTag,
body[data-page="post"] .pageHeaderRow .pageTag,
body[data-page^="dash-"] .pageHeaderRow .pageTag{
  min-height: 42px;
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (min-width: 900px){
  body[data-page="blog"] .pageHeaderRow,
  body[data-page="resources"] .pageHeaderRow,
  body[data-page="archive"] .pageHeaderRow,
  body[data-page="dashboard"] .pageHeaderRow,
  body[data-page="post"] .pageHeaderRow,
  body[data-page^="dash-"] .pageHeaderRow{
    margin-bottom: 12px;
  }
}