.content-shell { max-width: 1440px; margin: 0 auto; padding: 128px clamp(24px, 6vw, 96px) 36px; }
.content-intro { display: grid; grid-template-columns: 2fr 1fr; gap: 72px; align-items: end; padding-bottom: 40px; }
.content-intro h1 { font: 400 clamp(52px, 6vw, 76px)/1.08 var(--serif); letter-spacing: -0.035em; margin: 0 0 18px; }
.content-intro p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }
.content-intro .demo-note { font-size: 12px; line-height: 1.7; color: var(--text); }
.demo-note span { color: var(--muted); }
.browse-heading { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.browse-heading h2 { margin: 0; font: 400 15px var(--sans); }
.content-search { display: flex; align-items: center; color: var(--muted); font-size: 0; }
.content-search input { width: 200px; min-height: 40px; background: transparent; color: var(--text); font: 13px var(--sans); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; }
.content-search input::placeholder { color: var(--muted); }
.content-search input:focus { outline: 1px solid var(--gold); border-color: var(--gold); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; scroll-margin-top: 100px; }
.content-layout.list-only { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.content-shell [hidden] { display: none; }
.content-item { position: relative; padding: 24px 12px 24px 0; }
.content-item::before { content: ''; position: absolute; left: -18px; top: 30px; bottom: 30px; width: 2px; background: transparent; }
.content-item.selected::before { background: var(--gold); }
.item-meta { color: var(--muted); display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; margin-bottom: 10px; }
.item-meta span + span { color: var(--gold); }
.item-select { display: block; text-decoration: none; color: var(--text); }
.content-item h3 { font: 400 27px/1.2 var(--serif); margin: 0 0 10px; letter-spacing: -0.015em; }
.item-select:hover h3 { color: var(--gold); }
.content-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 50ch; }
.selection-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 104px; }
.panel-label { color: var(--muted); font-size: 11px; margin: 0 0 20px; }
.selection-panel h2 { margin: 0 0 14px; font: 400 38px/1.15 var(--serif); letter-spacing: -0.02em; }
.selection-panel h2:focus { outline: none; }
.selection-return { display: block; width: fit-content; margin-top: 24px; color: var(--muted); font-size: 12px; text-underline-offset: 5px; }
.panel-summary { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; }
.text-link { font-size: 12px; color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; line-height: 1.6; }
.selection-panel h3 { font: 400 12px var(--sans); color: var(--muted); margin: 0 0 20px; }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.related-list a { display: block; font: 400 20px/1.2 var(--serif); text-decoration: none; color: var(--text); }
.related-list a:hover { color: var(--gold); }
.related-list p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
/* Souvislosti: položka bez sdíleného principu */
.related-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.content-footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; }
.content-footer a { color: var(--muted); text-decoration: none; }
.content-footer a:hover { color: var(--text); }
.content-shell button:focus-visible, .content-shell a:focus-visible, .detail-shell a:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }
#empty-state { padding: 60px 0; color: var(--muted); }
#clear-search { color: var(--text); background: transparent; border: 0; padding: 10px 0; font: 13px var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
#view-map { scroll-margin-top: 90px; } /* odkaz /obsah/#view-map z úvodní stránky */
.map-heading { padding-top: 24px; }
.map-heading p { font-size: 13px; color: var(--text); margin: 0 0 6px; }
.map-heading span { font-size: 11px; color: var(--muted); }
.map-stage { position: relative; height: 410px; margin: 8px 0; }
.map-stage svg, #map-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-stage svg { pointer-events: none; }
.map-stage path { fill: none; stroke: var(--gold); stroke-linejoin: miter; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.map-node { position: absolute; transform: translate(-50%, -50%); width: clamp(120px, 30%, 155px); padding: 14px 8px; border: 0; background: var(--bg); color: color-mix(in srgb, var(--muted), var(--text) calc(var(--strength) * 100%)); text-align: center; cursor: pointer; }
.map-node strong { display: block; font: 400 calc(17px + var(--strength) * 5px)/1.2 var(--serif); }
.map-node span { display: block; margin-top: 8px; font: 10px var(--sans); color: var(--muted); }
.map-node:hover { color: var(--text); }
.map-node.current { width: clamp(160px, 38%, 195px); color: var(--text); }
.map-node.current strong { font-size: 26px; }
.map-history { display: flex; gap: 20px; align-items: center; padding: 10px 0 24px; min-height: 58px; }
.map-history button { flex: 0 0 auto; background: transparent; border: 1px solid var(--line); color: var(--text); font: 11px var(--sans); padding: 10px 12px; border-radius: 4px; cursor: pointer; }
.map-history button:disabled { color: var(--muted); opacity: 0.4; cursor: default; }
.map-history span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.detail-shell { max-width: 1060px; margin: 0 auto; padding: 126px clamp(24px, 6vw, 80px) 60px; }
.detail-back { color: var(--muted); text-underline-offset: 4px; font-size: 12px; }
.detail-header { margin: 56px 0 36px; }
.detail-header h1 { font: 400 clamp(38px, 5vw, 64px)/1.1 var(--serif); letter-spacing: -0.03em; margin: 20px 0; max-width: 17ch; }
.detail-lede { color: var(--muted); font-size: 19px; line-height: 1.6; max-width: 42ch; }
.detail-body { max-width: 65ch; font-size: 16px; line-height: 1.85; color: var(--text); }
.detail-note { max-width: 65ch; margin: 28px 0; padding: 18px 0 18px 20px; border-left: 1px solid var(--gold); color: var(--muted); font-size: 13px; line-height: 1.7; }
.detail-related { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 28px; }
.detail-related h2 { font: 400 30px var(--serif); margin: 0 0 28px; }
.detail-related .related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 1050px) {
  .content-layout, .selection-panel { gap: 36px; }
  .content-intro { gap: 36px; grid-template-columns: minmax(0, 1.7fr) minmax(230px, 1fr); }
  .content-item h3 { font-size: 24px; }
  .map-node strong { font-size: calc(16px + var(--strength) * 4px); }
  .map-node.current { width: 170px; max-width: 65%; }
  .map-node.current strong { font-size: 23px; }
  .content-search { font-size: 0; }
}
@media (max-width: 760px) {
  .content-shell { padding-top: 104px; }
  .content-intro { display: block; padding-bottom: 26px; }
  .content-intro h1 { font-size: 52px; }
  .content-intro p { font-size: 14px; }
  .content-intro .demo-note { margin-top: 22px; font-size: 11px; }
  .demo-note br { display: none; }
  .demo-note span::before { content: ' '; }
  .content-search input { width: 180px; }
  .content-layout { display: block; }
  #view-map { margin-top: 28px; }
  .content-item { padding: 24px 0; }
  .content-item::before { left: -12px; top: 26px; bottom: 26px; }
  .selection-panel { display: block; margin-top: 24px; padding-top: 28px; scroll-margin-top: 84px; }
  .selection-panel h2 { font-size: 32px; }
  .selection-related { margin-top: 36px; }
  .map-stage { height: 440px; }
  .map-node { width: clamp(118px, 30%, 150px); }
  .map-node.current { width: 160px; }
  .map-node.current strong { font-size: 22px; }
  .map-history { align-items: start; }
  .content-footer { margin-top: 36px; }
  .detail-shell { padding-top: 104px; }
  .detail-header { margin-top: 36px; }
  .detail-related .related-list { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }