* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #efeeec; color: var(--ink); font: 400 16px/1.4 var(--body); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 3px solid #166bc1; outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: fixed; z-index: 10; top: 8px; left: 8px; padding: 10px 16px; background: var(--paper); }
.skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; }
.paper { max-width: 1240px; margin: auto; padding: 9px clamp(12px, 2.3vw, 30px) 0; min-height: 100vh; background: var(--paper); }
.periods a:hover, .mag-footer a:hover { color: var(--red); }
.frontpage { display: grid; gap: 9px; grid-template-columns: minmax(0, 3fr) minmax(0, 1.03fr); grid-template-areas: "eclipse tarot" "zn tarot"; }
.eclipse, .tarot-hero { position: relative; isolation: isolate; overflow: hidden; background: #23171a; }
.eclipse { grid-area: eclipse; min-height: clamp(250px, 30vw, 365px); }
.eclipse img, .tarot-hero img, .mosaic-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.eclipse img { object-position: 58% 48%; }
.eclipse::before, .tarot-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; }
.eclipse::before { background: linear-gradient(90deg,#0a0b10b0, #0a0b100d 75%),linear-gradient(0deg, #0a0b1070, transparent 43%); }
.eclipse-copy { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: inherit; padding: 16px clamp(14px, 2.6vw, 32px); color: #fff; }
.flag { display: inline-block; padding: .11em .38em .16em; color: #fff; background: var(--red); font: 800 clamp(15px, 1.9vw, 24px)/1 var(--head); text-transform: uppercase; letter-spacing: .005em; }
.eclipse-copy p { margin: 7px 0 13px; font: 800 clamp(49px, 7.35vw, 102px)/.93 var(--head); letter-spacing: -.035em; }
.eclipse-copy p span { display: inline-block; padding: .008em .10em .075em; margin-bottom: 4px; background: var(--paper); color: var(--ink); }
.eclipse-copy p span:last-child { color: var(--red); }
.eclipse-link { font: 700 21px/1.05 var(--head); text-shadow: 0 2px 7px #000; }
.eclipse-link b, .tarot-link b { padding-left: .22em; }
.tarot-hero { grid-area: tarot; color: #fff; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 9px 10px 12px; }
.tarot-hero img { object-position: 47% 51%; }
.tarot-hero::before { background: linear-gradient(180deg,#090608ce, transparent 27%, transparent 71%,#090608aa); }
.tarot-title { font: 800 clamp(28px, 4vw, 55px)/.95 var(--head); text-transform: uppercase; letter-spacing: -.02em; text-shadow: 0 2px 7px #000; }
.tarot-link { color: var(--ink); background: var(--paper); padding: 4px 11px 7px; font: 800 clamp(19px, 2.6vw, 33px)/1 var(--head); }
.tarot-hero:hover .tarot-link, .eclipse:hover .flag { background: var(--red); color: white; }
.zodiac { grid-area: zn; border: 1px solid var(--line); }
.zodiac h1 { margin: 0; padding: 2px 10px 6px; border-bottom: 1px solid var(--line); font: 800 clamp(27px, 3.65vw, 42px)/.94 var(--head); letter-spacing: -.015em; }
.zodiac h1::first-letter { text-transform: uppercase; }
.sign-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.sign-grid li+li { border-left: 1px solid var(--line); }
.sign-grid a { display: grid; justify-items: center; gap: 3px; min-height: 66px; padding: 5px 1px; font: 700 clamp(13px, 1.55vw, 18px)/1 var(--head); }
.sign-grid a span { color: var(--red); font: 27px/1 "DejaVu Sans", "Arial Unicode MS", sans-serif; }
.sign-grid a:hover { background: #f9e8e7; }
.zodiac-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; margin: 15px 0 0; border-block: 1px solid var(--line); }
.periods { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 0 8px; }
.periods a { padding: 12px 8px 9px; font: 700 clamp(17px, 1.85vw, 23px)/1.05 var(--head); border-bottom: 3px solid transparent; }
.periods a.selected { border-color: var(--red); color: var(--red); }
.my-sign { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 14px; border-left: 1px solid var(--line); }
.my-sign label { white-space: nowrap; font: 800 clamp(16px,1.8vw,22px)/1 var(--head); }
.my-sign input { width: clamp(108px,14vw,155px); }
.my-sign button, .widget input[type=submit] { border: 1px solid var(--red); background: var(--red); color: white; font-weight: 600; padding: 6px 10px; }
.my-sign input, .widget :is(input:not([type=checkbox],[type=radio],[type=submit],[type=hidden]),select) { min-height: 34px; border: 1px solid #a39f9b; border-radius: 0; padding: 3px 6px; color: var(--ink); background: white; }
.my-sign button:hover, .widget input[type=submit]:hover { background: var(--dark-red); }
.shortcuts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 9px; border: 1px solid var(--line); }
.shortcuts a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px clamp(8px, 1.6vw, 19px); min-height: 84px; font: 800 clamp(20px,2.65vw,31px)/.94 var(--head); }
.shortcuts a+a { border-left: 1px solid var(--line); }
.shortcut-icon { color: var(--red); font: 37px/1 "DejaVu Sans", sans-serif; }
.person-icon, .couple-icon { display: block; position: relative; width: .83em; height: .87em; }
.person-icon::before, .couple-icon::before { content: ""; position: absolute; top: .03em; left: .22em; width: .30em; height: .30em; border: 1.6px solid currentColor; border-radius: 50%; }
.person-icon::after, .couple-icon::after { content: ""; position: absolute; bottom: .05em; left: .09em; width: .58em; height: .36em; border: 1.6px solid currentColor; border-radius: .45em .45em 0 0; }
.couple-icon { width: 1em; }
.couple-icon::before { left: .12em; box-shadow: .46em 0 0 -1.6px var(--paper), .46em 0 0 currentColor; }
.couple-icon::after { left: 0; width: .49em; box-shadow: .46em .03em 0 -1.6px var(--paper), .46em .03em 0 currentColor; }
.shortcuts b { color: var(--red); font: 600 24px/1 var(--body); }
.shortcuts a:hover, .service-columns a:hover { background: #f9ebea; }
.magazine { margin-top: 20px; border-block: 1px solid var(--line); padding: 17px 0; }
.magazine-head { display: grid; grid-template-columns: minmax(0, 1.47fr) minmax(0, 1fr); gap: 15px; align-items: center; margin-bottom: 11px; }
.magazine-head h2, .section-title { margin: 0; font: 800 clamp(43px, 6.1vw, 76px)/.93 var(--head); letter-spacing: -.025em; }
.magazine-head p { margin: 9px 0 3px; max-width: 38ch; font: 600 clamp(17px, 2.15vw, 26px)/1.15 var(--body); }
.magazine-head img { width: 100%; height: clamp(102px, 14.2vw, 163px); object-fit: cover; object-position: center 38%; }
.mosaic { display: grid; grid-template-columns: minmax(0,1.48fr) repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); height: clamp(324px, 46vw, 542px); gap: 8px; }
.mosaic-card { position: relative; display: flex; align-items: flex-end; padding: 7px; min-width: 0; isolation: isolate; overflow: hidden; background: #1b202c; }
.mosaic-card:first-child { grid-row: span 2; }
.mosaic-card img { object-position: 50% 45%; }
.mosaic-card::before { content: ""; position: absolute; z-index: -1; inset: 30% 0 0; background: linear-gradient(0deg,#0009,transparent 65%); }
.mosaic-caption { width: 100%; }
.mosaic-caption .flag { font-size: clamp(13px,1.65vw,21px); }
.mosaic-caption span:last-child { display: block; padding: 3px 6px 6px; background: var(--paper); font: 800 clamp(19px,3.05vw,39px)/.97 var(--head); letter-spacing: -.02em; }
.mosaic-card:not(:first-child) .mosaic-caption span:last-child { font-size: clamp(18px,2.48vw,31px); }
.mosaic-card:hover .mosaic-caption span:last-child { color: var(--red); }
.services, .article-section, .widgets { margin-top: 26px; border-top: 1px solid var(--line); padding: 16px 0 0; }
.section-title::before { display: block; content: ""; position: absolute; width: 83px; height: 4px; top: -17px; left: 0; background: var(--red); }
.section-title { position: relative; }
.service-columns { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 18px 0; }
.service-columns section { padding: 0 14px; border-left: 1px solid var(--line); min-width: 0; }
.service-columns section:first-child { border: 0; padding-left: 0; }
.service-columns section:last-child { padding-right: 0; }
.service-columns h3 { margin: 0; padding: 0 0 6px; border-bottom: 2px solid var(--red); color: var(--red); font: 800 clamp(22px, 2.9vw, 37px)/.98 var(--head); letter-spacing: -.02em; }
.service-columns ul { margin: 0; padding: 0; list-style: none; }
.service-columns li { border-bottom: 1px solid var(--line); }
.service-columns a { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 40px; padding: 5px 4px; font: 700 clamp(17px, 1.95vw, 24px)/1 var(--head); }
.service-columns a span, .category-bar a span, .section-head a span, .recommendations span { color: var(--red); }
.category-bar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 10px 0; padding: 7px 0; border-block: 1px solid var(--line); }
.category-bar a { padding: 5px; text-align: center; font: 800 clamp(18px, 2.3vw, 28px)/1.05 var(--head); }
.category-bar a+a { border-left: 1px solid var(--line); }
.category-bar a:hover { color: var(--red); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin-bottom: 15px; }
.section-head a { color: var(--muted); font-weight: 600; }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 12px; }
.article-grid article { min-width: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.article-grid img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; background: #f1efeb; }
.article-grid h3 { margin: 7px 0 4px; font: 800 clamp(24px,2.9vw,37px)/1 var(--head); }
.article-grid a:hover h3 { color: var(--red); }
.article-grid p { margin: 0 0 5px; color: var(--muted); }
.widget-grid { margin: 16px 0; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 12px; }
.widget-stack { display: grid; gap: 12px; align-content: start; }
.widget, .more-card { min-width: 0; border: 1px solid var(--line); background: #faf8f6; padding: 12px clamp(11px,2vw,20px) 15px; }
.widget h3, .more-card h2 { margin: 0 0 9px; font: 800 33px/1 var(--head); }
.widget .bio_part1 { display: none; }
.widget .bio_part2 { margin: 5px 0; }
.widget .natal_form { width: 100%; border-collapse: collapse; }
.widget .natal_form td { padding: 3px 8px 3px 0; }
.widget .natal_form td p { margin: 0; }
.widget .natal_form td :is(input[type=text],input:not([type])) { width: min(250px,100%); }
.widget form input[type=submit] { margin: 9px 0 0 !important; }
.widget #ajax_loading { display: none; vertical-align: middle; }
.widget #ajax_loading img { display: inline; }
.widget a[href^="https://www.horoskop.cz/on-line-vyklady/horoskopy-zdarma-on-line-vypocet/"] { display: inline-block; float: none !important; margin: 8px 0 0 !important; color: var(--red) !important; font-weight: 600; }
.widget .ukazat_na_mape { display: none; }
.more { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin: 20px 0; }
#astrocelebrity img { float: left; width: min(36%,100px); height: auto; margin-right: 12px; }
#astrocelebrity { display: flow-root; }
.astrocelebrity_jmeno { font-weight: 600; }
.recommendations a { display: block; padding: 4px 0; border-bottom: 1px solid var(--line); }
.recommendations a:hover { color: var(--red); }
.mag-footer { border-top: 3px solid var(--red); padding: 12px 0 20px; color: var(--muted); font-size: 14px; }
.mag-footer #datum p { margin: 0 0 10px; }
.mag-footer #datum br { display: none; }
.mag-footer #datum a { margin-inline: 8px; }
.mag-footer ul { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0; margin: 7px 0; list-style: none; }
.mag-footer li img { display: inline-block; }
.mag-footer details { margin-top: 10px; }
.mag-footer details img { max-width: 40px; height: auto; }
@media (max-width: 1020px) {
  .sign-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .sign-grid li:nth-child(n+7) { border-top: 1px solid var(--line); }
  .sign-grid li:nth-child(7) { border-left: 0; }
  .sign-grid a { min-height: 50px; }
  .zodiac-tools { flex-wrap: wrap; gap: 0 16px; }
  .my-sign { margin-left: auto; }
}
@media (max-width: 760px) {
  .frontpage { grid-template-columns: minmax(0,2.25fr) minmax(0,1fr); grid-template-areas: "eclipse tarot" "zn zn"; }
  .eclipse { min-height: 238px; }
  .eclipse-copy p { font-size: clamp(43px,8vw,64px); }
  .tarot-title { text-align: center; font-size: clamp(25px,5vw,36px); }
  .tarot-link { text-align: center; font-size: clamp(19px,4.5vw,25px); }
  .my-sign { margin-left: 0; border-left: 0; padding-left: 0; flex-wrap: wrap; }
  .periods a { padding: 9px 6px; }
  .shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shortcuts a { min-height: 62px; }
  .shortcuts a:nth-child(3) { border-left: 0; }
  .shortcuts a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .service-columns { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 0; }
  .service-columns section:nth-child(3) { border: 0; padding-left: 0; }
  .article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .widget-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px) {
  .frontpage { grid-template-columns: minmax(0,1fr); grid-template-areas: "eclipse" "zn" "tarot"; }
  .eclipse { min-height: 218px; }
  .eclipse img { object-position: 65% center; }
  .eclipse-copy { padding: 12px; }
  .eclipse-copy p { font-size: clamp(40px,10.9vw,54px); }
  .tarot-hero { min-height: 137px; align-items: flex-start; padding: 10px 12px; }
  .tarot-hero img { object-position: center 45%; }
  .tarot-hero::before { background: linear-gradient(90deg,#090608d5, transparent 90%); }
  .shortcuts a { gap: 5px; padding: 8px; font-size: 21px; }
  .shortcut-icon { font-size: 24px; }
  .shortcuts b { font-size: 17px; }
  .magazine-head { grid-template-columns: minmax(0,1fr); }
  .magazine-head h2, .section-title { font-size: clamp(39px,10vw,48px); }
  .magazine-head img { height: 105px; }
  .mosaic { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 190px repeat(2,130px); height: auto; }
  .mosaic-card:first-child { grid-column: 1/-1; grid-row: auto; }
  .mosaic-card:first-child img { object-position: center 43%; }
  .mosaic-caption span:last-child, .mosaic-card:not(:first-child) .mosaic-caption span:last-child { font-size: 21px; }
  .article-grid { gap: 12px 8px; }
  .article-grid h3 { font-size: 24px; overflow-wrap: anywhere; }
  .article-grid p { font-size: 14px; overflow-wrap: anywhere; }
  .category-bar { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 0; }
  .category-bar a:nth-child(3) { border-left: 0; }
  .more { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }