/* O I Y I styles (light, glass) */

:root{
  --bg:#fbfbfa;
  --fg:#101112;
  --muted:rgba(16,17,18,.62);
  --muted2:rgba(16,17,18,.58);

  --hair:rgba(16,17,18,.12);
  --hair2:rgba(16,17,18,.07);

  --glass:rgba(255,255,255,.72);

  --radius:18px;
  --radius2:24px;

  --s1:6px;
  --s2:10px;
  --s3:16px;
  --s4:24px;
  --s5:32px;
  --s6:44px;

  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --ease:cubic-bezier(.2,.8,.2,1);

  --t1:140ms;
  --t2:220ms;
  --t3:320ms;

  --focus:0 0 0 3px rgba(16,17,18,.14), 0 0 0 1px rgba(16,17,18,.22) inset;

  --railWExpanded:320px;
  --railWCollapsed:92px;
  --railW:var(--railWExpanded);
  --container:1040px;

  /* cropped radio iframe tuner (radio12345) */
  --crop-width:473px;
  --crop-height:50px;
  --iframe-width:1200px;
  --iframe-height:900px;
  --offset-x:-121px;
  --offset-y:-320px;
  --scale:0.86;

  --accent:#4B73FF;
}

body.rail-collapsed{--railW:var(--railWCollapsed);} 


@media (prefers-reduced-motion: reduce){
  :root{--t1:1ms;--t2:1ms;--t3:1ms}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--fg);
  background:var(--bg);
  overflow:hidden;
}

/* subtle field texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 58% 30%, rgba(16,17,18,.035), transparent 60%),
    radial-gradient(800px 520px at 20% 82%, rgba(16,17,18,.03), transparent 60%),
    radial-gradient(420px 260px at 80% 76%, rgba(16,17,18,.02), transparent 60%);
  pointer-events:none;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:.08;
  transform:rotate(2deg);
  pointer-events:none;
  z-index:0;
}

a{color:inherit}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip{
  position:absolute;
  left:var(--s4);
  top:var(--s4);
  padding:10px 12px;
  background:var(--glass);
  border:1px solid var(--hair);
  border-radius:12px;
  transform:translateY(-140%);
  transition:transform var(--t2) var(--ease);
  z-index:30;
  backdrop-filter:blur(10px);
}
.skip:focus{
  transform:translateY(0);
  box-shadow:var(--focus);
  outline:none;
}

/* ambient canvas */
#field{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.42;
  pointer-events:none;
  z-index:0;
}

/* layout */
.app{
  height:100vh;
  display:grid;
  grid-template-columns:var(--railW) minmax(0,1fr);
  position:relative;
  z-index:1;
}

/* rail */
.rail{
  padding:var(--s5) var(--s4);
  border-right:1px solid var(--hair2);
  display:flex;
  flex-direction:column;
  gap:var(--s5);
  min-height:100%;
  background:transparent;
}
.railTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s3);
}
.brand{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  text-align:left;
}
.brand:focus-visible{
  outline:none;
  box-shadow:var(--focus);
  border-radius:12px;
  padding:6px 8px;
  margin:-6px -8px;
}
.brandText{
  font-weight:620;
  letter-spacing:.22em;
  font-size:14px;
  opacity:.92;
}
.railActions{display:flex;gap:8px;align-items:center}

.iconBtn{
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);
  cursor:pointer;
  transition:transform var(--t1) var(--ease), border-color var(--t2) var(--ease), background var(--t2) var(--ease);
  display:grid;
  place-items:center;
}
.iconBtn:hover{transform:translateY(-1px)}
.iconBtn:active{transform:translateY(0)}
.iconBtn:focus-visible{outline:none;box-shadow:var(--focus)}
.iconGlyph{font-size:14px;opacity:.9}

.doors{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.door{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-radius:16px;
  border:1px solid transparent;
  cursor:pointer;
  background:transparent;
  text-align:left;
  transition:background var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.door:hover{background:rgba(255,255,255,.55);border-color:var(--hair2)}
.door:focus-visible{outline:none;box-shadow:var(--focus);background:rgba(255,255,255,.62);border-color:var(--hair)}
.door[aria-current="page"]{background:rgba(255,255,255,.70);border-color:var(--hair)}
.doorDot{
  width:26px;height:26px;
  border-radius:999px;
  border:1px solid rgba(16,17,18,.16);
  background:var(--accent);
  position:relative;
  flex:0 0 auto;
  transition:transform var(--t2) var(--ease);
}
.door:hover .doorDot{transform:scale(1.04)}
.doorMark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:11px;
  color:rgba(16,17,18,.76);
  user-select:none;
  transform:translateY(-.5px);
}
.doorText{display:flex;align-items:baseline;gap:10px;min-width:0}
.doorLabel{
  font-size:13px;
  letter-spacing:.04em;
  text-transform:lowercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.92;
}
.doorHint{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  opacity:0;
  transform:translateY(2px);
  transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.door:hover .doorHint,
.door:focus-visible .doorHint{opacity:1;transform:translateY(0)}

/* paths */
.paths{
  margin-top:auto;
  border-top:1px solid var(--hair2);
  padding-top:var(--s4);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pathsTitle{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:lowercase;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.55);
  cursor:pointer;
  font-size:12px;
  color:rgba(16,17,18,.82);
  transition:transform var(--t1) var(--ease), background var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:translateY(0)}
.chip[aria-pressed="true"]{background:rgba(16,17,18,.06);border-color:rgba(16,17,18,.18)}
.chip:focus-visible{outline:none;box-shadow:var(--focus)}

/* main */
.main{
  min-height:100%;
  height:100vh;
  overflow:auto;
  padding:var(--s5) var(--s6);
}
@media (max-width:1100px){
  body{overflow:auto}
  .app{height:auto;min-height:100%;grid-template-columns:1fr}
  .rail{border-right:none;border-bottom:1px solid var(--hair2)}
  .main{height:auto;min-height:100vh;padding:var(--s5) var(--s4)}
}
@media (max-width:960px){
  .rail{
    position:sticky;
    top:0;
    z-index:10;
    background:var(--bg);
    padding:var(--s4);
    gap:var(--s4);
    backdrop-filter:blur(12px);
  }
  .doors{
    flex-direction:row;
    overflow:auto;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
  }
  .doors::-webkit-scrollbar{height:0}
  .door{scroll-snap-align:start}
  .paths{display:none}
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  position:sticky;
  top:0;
  z-index:8;
  padding:10px 0 var(--s4);
  background:var(--bg);
  border-bottom:1px solid var(--hair2);
  margin-bottom:var(--s4);
}
.crumb{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  text-transform:lowercase;
  user-select:none;
}
.topbarActions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}

/* contextual tools (right side of topbar) */
.contextTools{
  display:flex;
  align-items:center;
}
.contextTools:empty{display:none}
.contextSelect{
  padding:9px 12px;
  border-radius:14px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);
  font-size:12px;
  color:rgba(16,17,18,.86);
  cursor:pointer;
  max-width:220px;
}
.contextSelect:focus-visible{outline:none;box-shadow:var(--focus)}
.contextSelect option{color:var(--fg)}

.actionBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);
  cursor:pointer;
  transition:transform var(--t1) var(--ease), background var(--t2) var(--ease);
  font-size:12px;
  color:rgba(16,17,18,.86);
}
.actionBtn:hover{transform:translateY(-1px)}
.actionBtn:active{transform:translateY(0)}
.actionBtn:focus-visible{outline:none;box-shadow:var(--focus)}
.miniIcon{
  width:18px;height:18px;
  border-radius:999px;
  border:1px solid var(--hair2);
  background:rgba(255,255,255,.96);
  display:grid;
  place-items:center;
}

.stage{max-width:var(--container);width:100%;margin:0 auto}
.footer{
  padding:var(--s6) 0 var(--s4);
  border-top:1px solid var(--hair2);
  margin-top:var(--s6);
}
.footerLink{
  font-size:12px;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footerLink:hover{border-bottom-color:var(--hair)}

/* hero */
.hero{padding:12px 0 0}
.hTitle{
  margin:0 0 14px;
  font-weight:560;
  letter-spacing:-.02em;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.06;
}
.hLead{
  margin:0;
  font-size:15px;
  color:var(--muted);
  max-width:62ch;
  line-height:1.55;
}
.heroMeta{
  margin-top:16px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted2);
}
.pulse{
  width:8px;height:8px;
  border-radius:999px;
  background:var(--accent);
  border:1px solid rgba(16,17,18,.16);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.12);opacity:1}
  100%{transform:scale(1);opacity:.7}
}
@media (prefers-reduced-motion: reduce){
  .pulse{animation:none}
}

/* shelf tabs */
.shelfBar{
  margin-top:var(--s5);
  border:1px solid var(--hair2);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(10px);
  padding:10px;
}
.tablist{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tab{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  cursor:pointer;
  font-size:12px;
  color:rgba(16,17,18,.86);
  letter-spacing:.03em;
  text-transform:lowercase;
  transition:transform var(--t1) var(--ease), background var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.tab:hover{transform:translateY(-1px)}
.tab:active{transform:translateY(0)}
.tab[aria-selected="true"]{
  background:rgba(16,17,18,.06);
  border-color:rgba(16,17,18,.18);
}
.tab:focus-visible{outline:none;box-shadow:var(--focus)}
@media (max-width:520px){
  .tablist{flex-wrap:nowrap;overflow:auto;padding-bottom:2px}
  .tablist::-webkit-scrollbar{height:0}
}

/* sections */
.section{
  margin-top:var(--s5);
}
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s3);
}
.sectionTitle{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.sectionNote{
  font-size:12px;
  color:var(--muted2);
  margin:0;
}

/* cards */
.cards{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s3);
}
.card{
  grid-column:span 4;
  border-radius:var(--radius);
  border:1px solid var(--hair2);
  background:rgba(255,255,255,.66);
  overflow:hidden;
  transition:transform var(--t1) var(--ease), border-color var(--t2) var(--ease), background var(--t2) var(--ease);
  min-height:140px;
  display:flex;
  flex-direction:column;
}
.card:hover{transform:translateY(-1px);border-color:var(--hair)}
.card:focus-within{border-color:var(--hair);box-shadow:var(--focus)}
@media (max-width:980px){
  .card{grid-column:span 6}
}
@media (max-width:720px){
  .card{grid-column:span 12}
}

.thumb{
  height:var(--thumbH, 128px);
  position:relative;
  border-bottom:1px solid var(--hair2);
  background:
    radial-gradient(240px 140px at 30% 30%, rgba(255,255,255,.78), rgba(255,255,255,0) 66%),
    radial-gradient(240px 140px at 80% 60%, rgba(255,255,255,.58), rgba(255,255,255,0) 66%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
}

/* optional real image inside thumb */
.thumbImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.96;
  filter:saturate(.96) contrast(.98);
}
.thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--tone);
  opacity:.14;
}
.thumb::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:14px;
  border:1px solid rgba(16,17,18,.10);
  background:rgba(255,255,255,.18);
}
.thumbMark{
  position:absolute;
  right:14px;
  bottom:12px;
  font-size:14px;
  color:rgba(16,17,18,.72);
  z-index:1;
}

.cardBody{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.cardKicker{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted2);
}
.cardTitle{
  margin:0;
  font-size:14px;
  font-weight:560;
  letter-spacing:.01em;
  line-height:1.25;
}
.cardDek{
  margin:0;
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
}
.cardMeta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:var(--muted2);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  cursor:pointer;
  text-decoration:none;
  font-size:12px;
  color:rgba(16,17,18,.86);
  transition:transform var(--t1) var(--ease), background var(--t2) var(--ease), border-color var(--t2) var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn.primary{
  background:rgba(16,17,18,.06);
  border-color:rgba(16,17,18,.18);
}
.btn[aria-disabled="true"],
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* embed details */
.details{
  border-top:1px solid var(--hair2);
  padding-top:12px;
}
.details summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(16,17,18,.86);
}
.details summary::-webkit-details-marker{display:none}
.details summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px;padding:6px 8px;margin:-6px -8px}
.embedWrap{
  margin-top:12px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--hair2);
  background:white;
}

/* overlay */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(16,17,18,.20);
  backdrop-filter:blur(10px);
  display:none;
  z-index:40;
}
.overlay[aria-hidden="false"]{display:grid;place-items:center}
.overlayPanel{
  width:min(980px, calc(100vw - 48px));
  max-height:min(86vh, 720px);
  overflow:auto;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.78);
  box-shadow:0 22px 70px rgba(16,17,18,.22);
}
.overlayHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 10px;
  border-bottom:1px solid rgba(16,17,18,.08);
}
.overlayTitle{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(16,17,18,.72);
}
.overlayBody{padding:14px 16px 18px}

.mapGrid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.mapItem{
  grid-column:span 6;
  border:1px solid rgba(16,17,18,.10);
  border-radius:18px;
  padding:12px 12px 10px;
  background:rgba(255,255,255,.66);
}
@media (max-width:900px){
  .mapItem{grid-column:span 12}
}
.mapHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.mapTitle{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.mDot{
  width:10px;height:10px;
  border-radius:999px;
  border:1px solid rgba(16,17,18,.18);
  background:var(--tone);
}
.mName{
  font-size:13px;
  letter-spacing:.04em;
  text-transform:lowercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mapChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.shelfChip{
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(16,17,18,.14);
  background:rgba(255,255,255,.62);
  cursor:pointer;
  font-size:11px;
  color:rgba(16,17,18,.80);
  text-transform:lowercase;
}
.shelfChip:hover{border-color:rgba(16,17,18,.22)}
.shelfChip:focus-visible{outline:none;box-shadow:var(--focus)}
.overlayFoot{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(16,17,18,.08);
}
.footTitle{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:10px;
  text-transform:lowercase;
}

/* ------------------------------
   Magazine + search + reader
   (adds structure like Attack/Decoded without changing O I Y I core)
-------------------------------- */

/* stage entrance */
.stage.is-enter{animation:stageEnter var(--t3) var(--ease)}
@keyframes stageEnter{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* overlay size variants */
.overlayPanel--small{
  width:min(720px, calc(100vw - 48px));
  max-height:min(84vh, 640px);
}
.overlayPanel--reader{
  width:min(1040px, calc(100vw - 48px));
  max-height:min(88vh, 880px);
}

/* search */
.searchBox{display:flex;flex-direction:column;gap:10px}
.searchInput{
  width:100%;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(10px);
  font-size:14px;
  color:rgba(16,17,18,.88);
  transition:border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.searchInput::placeholder{color:rgba(16,17,18,.46)}
.searchInput:focus-visible{outline:none;box-shadow:var(--focus)}

.searchHint{font-size:12px;color:var(--muted)}
kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:11px;
  padding:3px 6px;
  border-radius:8px;
  border:1px solid rgba(16,17,18,.16);
  background:rgba(255,255,255,.62);
}

.searchFilters{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.filterChip{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  cursor:pointer;
  font-size:12px;
  color:rgba(16,17,18,.82);
  transition:transform var(--t1) var(--ease), background var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.filterChip:hover{transform:translateY(-1px)}
.filterChip:active{transform:translateY(0)}
.filterChip[aria-pressed="true"]{background:rgba(16,17,18,.06);border-color:rgba(16,17,18,.18)}
.filterChip:focus-visible{outline:none;box-shadow:var(--focus)}

.searchResults{margin-top:16px;display:grid;gap:12px}
.resultItem{
  border:1px solid var(--hair2);
  border-radius:18px;
  background:rgba(255,255,255,.66);
  overflow:hidden;
  display:flex;
  gap:12px;
  padding:12px;
  transition:border-color var(--t2) var(--ease), transform var(--t1) var(--ease);
}
.resultItem:hover{transform:translateY(-1px);border-color:var(--hair)}
.resultThumb{
  width:60px;
  height:60px;
  border-radius:16px;
  border:1px solid rgba(16,17,18,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  flex:0 0 auto;
  overflow:hidden;
  position:relative;
}
.resultThumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.96}
.resultBody{min-width:0;display:flex;flex-direction:column;gap:4px}
.resultKicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.resultTitle{margin:0;font-size:13px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resultMeta{font-size:12px;color:var(--muted)}

/* reader */
.readerHero{padding:6px 0 12px}
.readerTitle{margin:0 0 10px;font-weight:600;letter-spacing:-.02em;font-size:clamp(22px,2.6vw,36px);line-height:1.08}
.readerDek{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.6;max-width:72ch}
.readerMeta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted2)}
.readerCover{margin-top:14px;border-radius:22px;overflow:hidden;border:1px solid rgba(16,17,18,.10);background:white}
.readerCover img{width:100%;height:auto;display:block}
.readerContent{margin-top:16px;color:rgba(16,17,18,.86);font-size:14px;line-height:1.75;max-width:74ch}
.readerContent p{margin:0 0 14px}
.readerContent h2{margin:24px 0 10px;font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.readerActions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.readerDivider{margin:18px 0;border-top:1px solid rgba(16,17,18,.08)}

/* badges (tags) */
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  font-size:11px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(16,17,18,.14);
  background:rgba(255,255,255,.62);
  color:rgba(16,17,18,.74);
  text-transform:lowercase;
}

/* magazine sections */
.magRule{height:1px;background:var(--hair2);margin-top:10px}
.magHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:var(--s5) 0 var(--s3);
}
.magTitle{
  margin:0;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(16,17,18,.70);
}
.magMore{font-size:12px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.magMore:hover{border-bottom-color:var(--hair)}

/* featured slider */
.sliderShell{
  border:1px solid var(--hair2);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(10px);
  padding:12px;
}
.sliderTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sliderTitle{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sliderNav{display:flex;gap:8px;align-items:center}
.sliderBtn{
  width:36px;height:36px;border-radius:14px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);
  cursor:pointer;
  display:grid;place-items:center;
  transition:transform var(--t1) var(--ease), border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.sliderBtn:hover{transform:translateY(-1px)}
.sliderBtn:active{transform:translateY(0)}
.sliderBtn:focus-visible{outline:none;box-shadow:var(--focus)}
.sliderBtn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.slider{
  display:flex;
  gap:12px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:4px;
}
.slider::-webkit-scrollbar{height:0}
.slide{flex:0 0 340px;scroll-snap-align:start}
.slide .card{height:100%}
@media (max-width:520px){
  .slide{flex-basis:78vw}
}

/* clickable card overlay link (used only when card is purely navigational) */
.cardLink{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:var(--radius);
}
.cardLink:focus-visible{outline:none;box-shadow:var(--focus)}

/* reveal (scroll-in) */
.reveal{opacity:0;transform:translateY(8px)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal{transition:opacity var(--t3) var(--ease), transform var(--t3) var(--ease)}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .door,
  .chip,
  .btn,
  .actionBtn,
  .iconBtn,
  .tab,
  .card,
  .sliderBtn,
  .resultItem,
  .reveal{transition:none}
  .stage.is-enter{animation:none}
}

/* --- social dock (bottom-right) --- */
.socialDock{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:35;
}
.socialIcon{
  width:34px;
  height:34px;
  border-radius:14px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  text-decoration:none;
  color:rgba(16,17,18,.80);
  opacity:.42;
  transition:opacity var(--t2) var(--ease), transform var(--t1) var(--ease);
}
.socialIcon:hover{opacity:.82;transform:translateY(-1px)}
.socialIcon:active{transform:translateY(0)}
.socialIcon:focus-visible{outline:none;box-shadow:var(--focus)}
.socialIcon span{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:lowercase;
}

/* --- contact shelf extras --- */
.contactExtras{
  margin: var(--s5) 0 0;
  padding: var(--s4);
  border-radius: var(--radius2);
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
}
.contactLinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.contactExtras .socialIcon{
  opacity:.38;
}
.contactExtras .socialIcon:hover{
  opacity:.78;
}

/* optional: keep docks away from iOS home indicator */
@supports (padding: max(0px)){
  .radioPlayer{bottom:max(14px, env(safe-area-inset-bottom))}
  .socialDock{bottom:max(14px, env(safe-area-inset-bottom))}
}
/* ------------------------------
   Sidebar collapse (desktop)
-------------------------------- */

.brandText--short{display:none}
body.rail-collapsed .brandText--full{display:none}
body.rail-collapsed .brandText--short{display:block}

body.rail-collapsed .rail{
  padding:var(--s4) 12px;
  gap:var(--s4);
}
body.rail-collapsed .railTop{
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
body.rail-collapsed .railActions{
  flex-direction:column;
  align-items:center;
}
body.rail-collapsed .brand{
  text-align:center;
}
body.rail-collapsed .doors{
  gap:12px;
}
body.rail-collapsed .door{
  justify-content:center;
  padding:10px 0;
}
body.rail-collapsed .doorText{display:none}
body.rail-collapsed .paths{display:none}

/* keep the main column comfortable when rail collapses */
body.rail-collapsed .main{
  padding-left:var(--s5);
  padding-right:var(--s6);
}

/* ------------------------------
   Topbar: compact labels on small screens
-------------------------------- */

@media (max-width:640px){
  .actionText{display:none}
  .actionBtn{padding:9px 10px}
}

/* ------------------------------
   Cropped radio iframe (radio12345)
-------------------------------- */

.radioCrop{
  width:var(--crop-width);
  height:var(--crop-height);
  border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(16,17,18,.06);
}
.radioCropFrame{
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
}
.radioCropFrame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:transparent;
}

/* hide fallback link unless needed */
.radioLinkTop{display:none}

@media (max-width:860px){
  .radioCrop{display:none}
  .radioLinkTop{display:inline-flex}
}

/* ------------------------------
   Home (redesigned)
-------------------------------- */

.homeStage{
  min-height:calc(100vh - 220px);
  display:flex;
  align-items:center;
  padding:var(--s6) 0;
}
.homePanel{
  width:min(760px, 100%);
  border-radius:28px;
  border:1px solid var(--hair2);
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(12px);
  box-shadow:0 24px 70px rgba(16,17,18,.08);
  padding:26px 24px 22px;
}
.homeWordmark{
  font-weight:650;
  letter-spacing:.30em;
  font-size:clamp(34px, 4vw, 56px);
  line-height:1.05;
  margin:0;
}
.homeLine{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
  max-width:68ch;
}
.homeActions{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.homeMini{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted2);
}
.homeDot{
  width:8px;height:8px;
  border-radius:999px;
  background:var(--accent);
  border:1px solid rgba(16,17,18,.16);
}

/* ------------------------------
   "All" layouts
-------------------------------- */

/* Matrix: shelf columns (Sabda, Courses) */
.shelfMatrix{
  margin-top:var(--s5);
  display:grid;
  gap:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  align-items:start;
}
.matrixCol{
  border:1px solid var(--hair2);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(10px);
  padding:12px;
  min-width:0;
}
.matrixHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.matrixTitle{
  margin:0;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(16,17,18,.70);
}
.matrixNote{
  margin:0;
  font-size:12px;
  color:var(--muted);
}
.matrixCards{
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}
.matrixCards .card{width:100%}

/* Tiles: category cubes (Features, Leela, Community, Shop, About) */
.tileGrid{
  margin-top:var(--s5);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s3);
}
.tile{
  grid-column:span 4;
  border-radius:var(--radius2);
  border:1px solid var(--hair2);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);
  padding:16px 16px 14px;
  cursor:pointer;
  text-align:left;
  min-height:132px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform var(--t1) var(--ease), border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.tile:hover{transform:translateY(-1px);border-color:var(--hair)}
.tile:active{transform:translateY(0)}
.tile:focus-visible{outline:none;box-shadow:var(--focus)}
.tile::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(420px 280px at 30% 30%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(520px 320px at 80% 70%, rgba(255,255,255,.55), transparent 66%),
    radial-gradient(420px 280px at 50% 50%, var(--tone), transparent 70%);
  opacity:.28;
}
.tileTop{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tileLabel{
  margin:0;
  font-size:13px;
  font-weight:620;
  letter-spacing:.04em;
  text-transform:lowercase;
}
.tileMark{
  font-size:14px;
  opacity:.72;
  flex:0 0 auto;
}
.tileNote{
  position:relative;
  margin:10px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
  max-width:38ch;
}
.tileFoot{
  position:relative;
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:var(--muted2);
  text-transform:lowercase;
}

@media (max-width:980px){
  .tile{grid-column:span 6}
}
@media (max-width:720px){
  .tile{grid-column:span 12}
}

/* ------------------------------
   Minor: embed polish
-------------------------------- */

.embedWrap iframe{
  display:block;
  width:100%;
  border:0;
}