/* Shared design for the Rules, Laws and Lore pages. */
:root {
    --frontier-ink: #100d0a;
    --frontier-paper: #e8d7b8;
    --frontier-muted: #bdab8f;
    --frontier-copper: #c97b32;
    --frontier-copper-light: #e3a354;
    --frontier-line: rgba(219, 151, 73, .31);
}

body {
    background:
        radial-gradient(circle at 78% 4%, rgba(139, 83, 38, .22), transparent 31rem),
        linear-gradient(115deg, rgba(8, 7, 6, .88), rgba(23, 16, 10, .93)),
        #100d0a !important;
}

.rules-container,
.lore-container {
    width: min(1120px, calc(100% - 40px));
    max-width: none !important;
    box-sizing: border-box;
    margin: 58px auto 76px !important;
    padding: 0 0 42px !important;
    overflow: hidden;
    border: 1px solid rgba(215, 159, 89, .28) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(42, 27, 16, .92), rgba(18, 14, 10, .96)) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .48) !important;
}

.frontier-page-hero {
    position: relative;
    min-height: 230px;
    box-sizing: border-box;
    padding: 56px clamp(28px, 6vw, 82px) 44px;
    overflow: hidden;
    border-bottom: 1px solid var(--frontier-line);
    background:
        linear-gradient(90deg, rgba(24, 14, 8, .96), rgba(43, 25, 13, .78)),
        repeating-linear-gradient(-12deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
}

.frontier-page-hero::after {
    content: '';
    position: absolute;
    right: -64px;
    bottom: -102px;
    width: 330px;
    height: 330px;
    opacity: .22;
    border: 1px solid var(--frontier-copper-light);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(214, 137, 58, .10), 0 0 0 50px rgba(214, 137, 58, .06);
}

.frontier-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: var(--frontier-copper-light);
    font: 700 11px/1.3 'Roboto', sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.frontier-page-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0;
    color: #f5e7ce;
    font-family: 'Rye', serif;
    font-size: clamp(40px, 5vw, 70px);
    font-weight: 400;
    line-height: .98;
    text-shadow: 3px 4px 0 rgba(0,0,0,.3);
}

.frontier-page-hero p {
    position: relative;
    z-index: 1;
    max-width: 660px;
    margin: 21px 0 0;
    padding-left: 17px;
    border-left: 2px solid var(--frontier-copper);
    color: #cdbda4;
    font-size: 16px;
    line-height: 1.7;
}

.frontier-page-lede {
    max-width: 800px;
    margin: 33px auto 8px;
    padding: 0 34px;
    color: #d8c8ae;
    font-size: 16px;
    line-height: 1.75;
    text-align: center;
}

.rules-container > .category-title,
.lore-container > .lore-chapter,
.rules-container > .rule-block {
    width: min(910px, calc(100% - 68px));
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
}

.category-title {
    margin-top: 48px !important;
    margin-bottom: 16px !important;
    padding: 0 0 11px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--frontier-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--frontier-copper-light) !important;
    font-family: 'Rye', serif !important;
    font-size: clamp(22px, 2.5vw, 31px) !important;
    text-shadow: none !important;
}

.category-title i { margin-right: 11px; font-family: sans-serif; font-size: .8em; }

.rule-block,
.lore-chapter {
    position: relative;
    padding: 24px 27px !important;
    border: 1px solid rgba(214, 157, 80, .18) !important;
    border-left: 3px solid rgba(201, 123, 50, .82) !important;
    border-radius: 0 !important;
    background: linear-gradient(100deg, rgba(255,255,255,.035), rgba(0,0,0,.13)) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}

.rule-block:hover,
.lore-chapter:hover {
    transform: translateX(4px) !important;
    border-left-color: var(--frontier-copper-light) !important;
    background: linear-gradient(100deg, rgba(204, 129, 55, .12), rgba(0,0,0,.18)) !important;
}

.rule-block h3,
.lore-chapter h3 {
    margin: 0 0 11px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(218, 153, 77, .16) !important;
    color: #f0d6ab !important;
    font-family: 'Rye', serif !important;
    font-size: clamp(20px, 2vw, 26px) !important;
    font-weight: 400;
    letter-spacing: .01em;
}

.rule-block p,
.lore-chapter p {
    color: #d3c4aa !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
    text-align: left !important;
}

.rule-number {
    display: inline-block;
    margin-right: 10px !important;
    padding: 4px 7px !important;
    border: 1px solid rgba(230, 165, 91, .5);
    border-radius: 0 !important;
    background: rgba(141, 65, 22, .35) !important;
    color: var(--frontier-copper-light) !important;
    font-size: 12px !important;
    vertical-align: middle;
}

.rule-block ul { color: #d3c4aa !important; line-height: 1.7; }
.rule-block li { margin-bottom: 6px; }

.example-box {
    margin-top: 17px !important;
    padding: 13px 16px !important;
    border: 1px solid rgba(208, 153, 79, .24) !important;
    border-left: 3px solid #c17a35 !important;
    border-radius: 0 !important;
    background: rgba(10, 8, 6, .38) !important;
    color: #cbbda4 !important;
    font-family: 'Roboto', sans-serif !important;
    line-height: 1.55;
}

.example-title { color: var(--frontier-copper-light) !important; letter-spacing: .03em; }
.highlight-red { color: #e78769 !important; }

.punishment-box {
    gap: 12px;
    padding: 13px 15px !important;
    border: 1px solid rgba(210, 144, 68, .27) !important;
    border-radius: 0 !important;
    background: rgba(10, 8, 6, .42) !important;
    color: #d8c29e !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px;
}

.punishment-box i { color: var(--frontier-copper-light) !important; }

.lore-chapter { margin-top: 22px !important; margin-bottom: 0 !important; }
.lore-chapter:first-of-type { margin-top: 39px !important; }
.drop-cap { color: var(--frontier-copper-light) !important; }

/* Chronicle layout used by Lore. */
.lore-chronicle {
    max-width: 1220px !important;
    padding-bottom: 0 !important;
}

.story-hero {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding: 54px clamp(28px, 6vw, 82px);
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(14, 10, 7, .93) 2%, rgba(18, 12, 7, .57) 54%, rgba(14, 9, 5, .22)),
        linear-gradient(0deg, rgba(16, 10, 6, .72), transparent 55%),
        url('/assets/images/lore/lore-frontier.png') center 38% / cover no-repeat;
}

.story-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(-10deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px);
    pointer-events: none;
}

.story-hero-content { max-width: 650px; }
.story-hero h1 { margin: 0; color: #f4dfbd; font: 400 clamp(48px, 6vw, 82px)/.95 'Rye', serif; text-shadow: 3px 4px 0 rgba(0,0,0,.35); }
.story-hero p { margin: 21px 0 0; padding-left: 17px; border-left: 2px solid var(--frontier-copper); color: #e0cdb0; font-size: 17px; line-height: 1.7; }

.story-narrator {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    width: min(910px, calc(100% - 68px));
    box-sizing: border-box;
    margin: 0 auto;
    padding: 38px 0 30px;
}

.story-narrator-portrait {
    display: block;
    width: 126px;
    height: 126px;
    object-fit: cover;
    object-position: center;
    border: 3px solid #bd7837;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(212, 152, 79, .14), 0 12px 30px rgba(0,0,0,.45);
    filter: sepia(.14) contrast(1.04);
}

.story-narrator h2,
.story-entry h2 { margin: 0 0 11px; color: #f0d6ab; font: 400 clamp(25px, 2.8vw, 36px)/1 'Rye', serif; }
.story-narrator p,
.story-entry p { margin: 8px 0 0; color: #cfbea3; font-size: 16px; line-height: 1.72; }

.story-contents {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(910px, calc(100% - 68px));
    margin: 0 auto;
    border-top: 1px solid var(--frontier-line);
    border-bottom: 1px solid var(--frontier-line);
}

.story-contents a {
    display: grid;
    grid-template-columns: 31px 1fr;
    column-gap: 9px;
    padding: 17px 14px;
    border-right: 1px solid var(--frontier-line);
    color: #e4cfad;
    font: 400 18px/1 'Rye', serif;
    text-decoration: none;
    transition: color .18s ease, background .18s ease;
}

.story-contents a:last-child { border-right: 0; }
.story-contents a:hover { background: rgba(195, 114, 45, .12); color: #ffe3af; }
.story-contents span { color: var(--frontier-copper-light); font: 700 11px/1.5 'Roboto', sans-serif; letter-spacing: .06em; }
.story-contents small { grid-column: 2; margin-top: 5px; color: #a99880; font: 400 11px/1.35 'Roboto', sans-serif; }

.story-divider {
    display: flex;
    align-items: center;
    gap: 17px;
    width: min(910px, calc(100% - 68px));
    margin: 4px auto 24px;
    color: var(--frontier-copper-light);
    font: 700 10px/1 'Roboto', sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.story-divider::before,
.story-divider::after { content: ''; height: 1px; flex: 1; background: var(--frontier-line); }

.story-entry {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 22px;
    width: min(910px, calc(100% - 68px));
    box-sizing: border-box;
    margin: 0 auto 16px;
    padding: 27px 30px;
    border: 1px solid rgba(214, 157, 80, .18);
    border-left: 3px solid rgba(201, 123, 50, .82);
    background: linear-gradient(100deg, rgba(255,255,255,.04), rgba(0,0,0,.15));
}

.story-entry-reverse { border-left-color: rgba(221, 169, 90, .52); }
.story-entry-mark { color: rgba(228, 160, 79, .74); font: 400 46px/.9 'Rye', serif; text-align: center; }

.story-closing {
    width: min(910px, calc(100% - 68px));
    box-sizing: border-box;
    margin: 34px auto 58px;
    padding: 28px 34px;
    border-top: 1px solid var(--frontier-line);
    border-bottom: 1px solid var(--frontier-line);
    color: #ead6b8;
    font: 400 clamp(23px, 2.7vw, 34px)/1.3 'Rye', serif;
    text-align: center;
}

.story-closing span { display: block; margin-top: 15px; color: var(--frontier-copper-light); font: 700 10px/1.3 'Roboto', sans-serif; letter-spacing: .15em; text-transform: uppercase; }

/* Sheriff office presentation used by Laws. */
.laws-page { max-width: 1240px !important; }

.laws-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 430px;
    box-sizing: border-box;
    padding: 54px clamp(28px, 6vw, 82px);
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(15, 10, 6, .92) 0%, rgba(20, 13, 8, .65) 45%, rgba(15, 10, 6, .22)),
        linear-gradient(0deg, rgba(15, 10, 6, .67), transparent 65%),
        url('/assets/images/laws/laws-frontier.png') center 59% / cover no-repeat;
}

.laws-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(-10deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px);
}

.laws-hero-content { max-width: 650px; }
.laws-hero h1 { margin: 0; color: #f3deb8; font: 400 clamp(48px, 6vw, 80px)/.95 'Rye', serif; text-shadow: 3px 4px 0 rgba(0,0,0,.35); }
.laws-hero p { margin: 21px 0 0; padding-left: 17px; border-left: 2px solid var(--frontier-copper); color: #e0cdb0; font-size: 17px; line-height: 1.7; }

.law-office {
    display: grid;
    grid-template-columns: 156px minmax(0, 1fr) 245px;
    gap: 30px;
    align-items: center;
    width: min(990px, calc(100% - 68px));
    box-sizing: border-box;
    margin: 0 auto;
    padding: 39px 0 31px;
}

.law-sheriff-card, .law-deputy-card { margin: 0; }
.law-sheriff-card img { display: block; width: 142px; height: 142px; object-fit: cover; object-position: center; border: 3px solid #bd7837; border-radius: 50%; box-shadow: 0 0 0 5px rgba(212, 152, 79, .14), 0 12px 30px rgba(0,0,0,.45); filter: sepia(.11) contrast(1.03); }
.law-sheriff-card figcaption { margin-top: 13px; color: #d7c4a4; font: 400 11px/1.55 'Roboto', sans-serif; }
.law-sheriff-card figcaption span { display: block; color: var(--frontier-copper-light); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.law-office-copy h2 { margin: 0 0 11px; color: #f0d6ab; font: 400 clamp(26px, 3vw, 38px)/1 'Rye', serif; }
.law-office-copy p { margin: 8px 0 0; color: #cfbea3; font-size: 16px; line-height: 1.7; }
.law-deputy-card { padding-left: 22px; border-left: 1px solid var(--frontier-line); }
.law-deputy-card img { display: block; width: 100%; height: 122px; object-fit: cover; object-position: center; filter: sepia(.15) contrast(1.03); }
.law-deputy-card figcaption { margin-top: 10px; color: #aa9980; font: italic 13px/1.45 'Roboto', sans-serif; }

.law-proclamation {
    width: min(910px, calc(100% - 68px));
    box-sizing: border-box;
    margin: 2px auto 0;
    padding: 15px 19px;
    border-top: 1px solid var(--frontier-line);
    border-bottom: 1px solid var(--frontier-line);
    color: #cdbb9e;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

.law-proclamation span { color: var(--frontier-copper-light); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.laws-page > .category-title:first-of-type { margin-top: 44px !important; }
.laws-page .rule-block { min-height: 132px; }
.laws-page .punishment-box { margin-top: 19px !important; }

/* Individual law cards: printed sheriff-office files rather than modern panels. */
.laws-page {
    counter-reset: lawsection lawcase;
}

.laws-page > .category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 58px !important;
    padding: 0 0 15px !important;
    color: #f0c070 !important;
    font-size: clamp(25px, 2.9vw, 35px) !important;
}

.laws-page > .category-title::before {
    counter-increment: lawsection;
    content: 'Oddíl ' counter(lawsection, decimal-leading-zero);
    flex: 0 0 auto;
    padding: 5px 7px;
    border: 1px solid rgba(227, 163, 84, .65);
    color: #dca14f;
    font: 700 9px/1 'Roboto', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.laws-page > .category-title i { display: none; }

.laws-page .rule-block {
    position: relative;
    min-height: 0;
    overflow: hidden;
    margin-bottom: 19px !important;
    padding: 30px 32px 25px !important;
    border: 1px solid rgba(187, 129, 55, .78) !important;
    border-left: 1px solid rgba(187, 129, 55, .78) !important;
    border-top: 5px solid #b86e2d !important;
    background:
        linear-gradient(90deg, rgba(245, 223, 176, .98), rgba(224, 192, 133, .96)),
        repeating-linear-gradient(0deg, rgba(78, 47, 25, .04) 0 1px, transparent 1px 4px) !important;
    box-shadow: 7px 8px 0 rgba(0, 0, 0, .18) !important;
}

.laws-page .rule-block::after {
    content: 'ÚŘAD ŠERIFA · NEW HANOVER · 1885';
    position: absolute;
    right: -34px;
    top: 20px;
    padding: 5px 36px;
    border-top: 1px solid rgba(111, 46, 24, .35);
    border-bottom: 1px solid rgba(111, 46, 24, .35);
    color: rgba(110, 47, 24, .44);
    font: 700 8px/1 'Roboto', sans-serif;
    letter-spacing: .14em;
    transform: rotate(12deg);
}

.laws-page .rule-block:hover {
    transform: translate(2px, -2px) !important;
    border-left-color: #9e501e !important;
    background:
        linear-gradient(90deg, #f6e4bd, #e6c889) !important;
}

.laws-page .rule-block h3 {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 13px !important;
    padding-bottom: 13px !important;
    border-bottom: 1px dashed rgba(86, 48, 26, .45) !important;
    color: #432414 !important;
    font-size: clamp(22px, 2.5vw, 30px) !important;
    text-shadow: none !important;
}

.laws-page .rule-block h3::before {
    counter-increment: lawcase;
    content: 'Záznam případu č. ' counter(lawcase, decimal-leading-zero);
    color: #9d5127;
    font: 700 9px/1 'Roboto', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.laws-page .rule-block p {
    position: relative;
    z-index: 1;
    color: #4e3424 !important;
    font: 400 16px/1.7 'Roboto', sans-serif !important;
}

.laws-page .punishment-box {
    position: relative;
    z-index: 1;
    margin-top: 21px !important;
    padding: 12px 15px !important;
    border: 1px dashed rgba(93, 49, 25, .55) !important;
    background: rgba(126, 76, 38, .09) !important;
    color: #59351e !important;
    font: 700 13px/1.45 'Roboto', sans-serif !important;
}

.laws-page .punishment-box i { color: #9b4f22 !important; }

/* Collapsible law volumes keep the page short until a visitor opens a case file. */
.law-index {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(910px, calc(100% - 68px));
    margin: 38px auto 18px;
    border: 1px solid var(--frontier-line);
}

.law-index a {
    padding: 13px 10px;
    border-right: 1px solid var(--frontier-line);
    color: #d8c29e;
    font: 700 10px/1.35 'Roboto', sans-serif;
    letter-spacing: .06em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .18s ease, background .18s ease;
}

.law-index a:last-child { border-right: 0; }
.law-index a:hover { background: rgba(195, 114, 45, .16); color: #ffe2a8; }

.law-dossiers {
    width: min(910px, calc(100% - 68px));
    margin: 0 auto 58px;
    counter-reset: lawsection lawcase;
}

.law-dossier {
    margin: 12px 0;
    border: 1px solid rgba(200, 133, 55, .5);
    background: rgba(12, 9, 6, .32);
}

.law-dossier summary {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 76px;
    padding: 0 22px;
    color: #f0d2a0;
    cursor: pointer;
    list-style: none;
    transition: background .18s ease;
}

.law-dossier summary::-webkit-details-marker { display: none; }
.law-dossier summary:hover { background: rgba(195, 114, 45, .12); }
.law-dossier[open] summary { border-bottom: 1px solid rgba(185, 119, 49, .45); background: rgba(195, 114, 45, .16); }
.dossier-index { color: var(--frontier-copper-light); font: 700 10px/1.3 'Roboto', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.law-dossier summary strong { display: block; font: 400 clamp(21px, 2.6vw, 29px)/1 'Rye', serif; }
.law-dossier summary small { display: block; margin-top: 6px; color: #ad9a7c; font: 400 12px/1.3 'Roboto', sans-serif; }
.dossier-action { padding: 7px 9px; border: 1px solid rgba(223, 156, 77, .55); color: var(--frontier-copper-light); font: 700 9px/1 'Roboto', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.law-dossier[open] .dossier-action { font-size: 0; }
.law-dossier[open] .dossier-action::after { content: 'Zavřít spis'; font-size: 9px; }
.dossier-body { padding: 19px; background: rgba(0, 0, 0, .1); }
.laws-page .law-dossier .rule-block { width: 100%; margin: 0 0 17px !important; }
.laws-page .law-dossier .rule-block:last-child { margin-bottom: 0 !important; }

/* Field-guide presentation used by Rules. */
.rules-page { max-width: 1240px !important; }

.rules-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 430px;
    box-sizing: border-box;
    padding: 54px clamp(28px, 6vw, 82px);
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(16, 10, 5, .93), rgba(23, 14, 7, .58) 53%, rgba(16, 10, 5, .26)),
        linear-gradient(0deg, rgba(14, 9, 5, .67), transparent 65%),
        url('/assets/images/rules/rules-hero.png') center 52% / cover no-repeat !important;
}

.rules-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: repeating-linear-gradient(-10deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px); }
.rules-hero-content { max-width: 660px; }
.rules-hero h1 { margin: 0; color: #f6dfb6; font: 400 clamp(48px, 6vw, 80px)/.95 'Rye', serif; text-shadow: 3px 4px 0 rgba(0,0,0,.35); }
.rules-hero p { margin: 21px 0 0; padding-left: 17px; border-left: 2px solid var(--frontier-copper); color: #e0cdb0; font-size: 17px; line-height: 1.7; }

.rule-guides {
    display: grid;
    grid-template-columns: 156px minmax(0, 1fr) 156px;
    gap: 30px;
    align-items: center;
    width: min(990px, calc(100% - 68px));
    box-sizing: border-box;
    margin: 0 auto;
    padding: 38px 0 31px;
}

.rule-guide { margin: 0; }
.rule-guide img { display: block; width: 142px; height: 142px; object-fit: cover; object-position: center; border: 3px solid #bd7837; border-radius: 50%; box-shadow: 0 0 0 5px rgba(212, 152, 79, .14), 0 12px 30px rgba(0,0,0,.45); filter: sepia(.12) contrast(1.03); }
.rule-guide figcaption { margin-top: 13px; color: #d7c4a4; font: 400 11px/1.55 'Roboto', sans-serif; }
.rule-guide figcaption span { display: block; color: var(--frontier-copper-light); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rule-guide-storyteller { text-align: right; }
.rule-guide-storyteller img { margin-left: auto; }
.rule-guides-copy h2 { margin: 0 0 11px; color: #f0d6ab; font: 400 clamp(26px, 3vw, 38px)/1 'Rye', serif; }
.rule-guides-copy p { margin: 8px 0 0; color: #cfbea3; font-size: 16px; line-height: 1.7; }

.rule-index { display: grid; grid-template-columns: repeat(4, 1fr); width: min(910px, calc(100% - 68px)); margin: 2px auto 18px; border: 1px solid var(--frontier-line); }
.rule-index a { padding: 13px 10px; border-right: 1px solid var(--frontier-line); color: #d8c29e; font: 700 10px/1.35 'Roboto', sans-serif; letter-spacing: .06em; text-align: center; text-decoration: none; text-transform: uppercase; transition: color .18s ease, background .18s ease; }
.rule-index a:last-child { border-right: 0; }
.rule-index a:hover { background: rgba(195, 114, 45, .16); color: #ffe2a8; }

.rule-dossiers { width: min(910px, calc(100% - 68px)); margin: 0 auto 58px; }
.rule-dossier { margin: 12px 0; border: 1px solid rgba(200, 133, 55, .5); background: rgba(12, 9, 6, .32); }
.rule-dossier summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 76px; padding: 0 22px; color: #f0d2a0; cursor: pointer; list-style: none; transition: background .18s ease; }
.rule-dossier summary::-webkit-details-marker { display: none; }
.rule-dossier summary:hover { background: rgba(195, 114, 45, .12); }
.rule-dossier[open] summary { border-bottom: 1px solid rgba(185, 119, 49, .45); background: rgba(195, 114, 45, .16); }
.rule-dossier-number { color: var(--frontier-copper-light); font: 400 31px/1 'Rye', serif; }
.rule-dossier summary strong { display: block; font: 400 clamp(21px, 2.6vw, 29px)/1 'Rye', serif; }
.rule-dossier summary small { display: block; margin-top: 6px; color: #ad9a7c; font: 400 12px/1.3 'Roboto', sans-serif; }
.rule-dossier-action { padding: 7px 9px; border: 1px solid rgba(223, 156, 77, .55); color: var(--frontier-copper-light); font: 700 9px/1 'Roboto', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.rule-dossier[open] .rule-dossier-action { font-size: 0; }
.rule-dossier[open] .rule-dossier-action::after { content: 'Zavřít kapitolu'; font-size: 9px; }
.rule-dossier-body { padding: 19px; background: rgba(0, 0, 0, .1); }
.rules-page .rule-dossier .category-title { margin: 4px 0 18px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--frontier-line) !important; background: transparent !important; color: var(--frontier-copper-light) !important; font-size: clamp(24px, 2.7vw, 32px) !important; }
.rules-page .rule-dossier .rule-block { width: 100%; margin: 0 0 17px !important; padding: 25px 27px !important; border-left-color: #b86e2d !important; background: linear-gradient(100deg, rgba(255,255,255,.045), rgba(0,0,0,.17)) !important; }
.rules-page .rule-dossier .rule-block:last-child { margin-bottom: 0 !important; }
.rules-page .rule-dossier .rule-block h3 { color: #f0d6ab !important; }

@media (max-width: 720px) {
    .rules-hero { min-height: 390px; padding: 36px 26px; background-position: 56% center; }
    .rule-guides { grid-template-columns: 74px minmax(0, 1fr); gap: 17px; width: calc(100% - 38px); padding: 31px 0 26px; }
    .rule-guide img { width: 70px; height: 70px; border-width: 2px; }
    .rule-guide figcaption { display: none; }
    .rule-guide-storyteller { display: none; }
    .rule-index { grid-template-columns: repeat(2, 1fr); width: calc(100% - 38px); }
    .rule-index a:nth-child(2) { border-right: 0; }
    .rule-index a:nth-child(-n+2) { border-bottom: 1px solid var(--frontier-line); }
    .rule-dossiers { width: calc(100% - 38px); }
    .rule-dossier summary { grid-template-columns: 39px minmax(0, 1fr); gap: 11px; min-height: 70px; padding: 0 14px; }
    .rule-dossier-number { font-size: 26px; }
    .rule-dossier-action { display: none; }
    .rule-dossier-body { padding: 12px; }
    .rules-page .rule-dossier .rule-block { padding: 20px !important; }
}

@media (max-width: 720px) {
    .rules-container, .lore-container { width: min(100% - 22px, 1120px); margin-top: 24px !important; }
    .frontier-page-hero { min-height: 0; padding: 42px 26px 35px; }
    .frontier-page-lede { padding: 0 24px; }
    .rules-container > .category-title, .lore-container > .lore-chapter, .rules-container > .rule-block { width: calc(100% - 34px); }
    .rule-block, .lore-chapter { padding: 20px !important; }
    .punishment-box { align-items: flex-start; flex-direction: column; }
    .story-hero { min-height: 390px; padding: 36px 26px; background-position: 60% center; }
    .story-narrator { grid-template-columns: 82px minmax(0, 1fr); gap: 17px; width: calc(100% - 38px); padding: 31px 0 26px; }
    .story-narrator-portrait { width: 76px; height: 76px; border-width: 2px; }
    .story-contents { grid-template-columns: 1fr; width: calc(100% - 38px); }
    .story-contents a { border-right: 0; border-bottom: 1px solid var(--frontier-line); }
    .story-contents a:last-child { border-bottom: 0; }
    .story-divider, .story-entry, .story-closing { width: calc(100% - 38px); }
    .story-entry { grid-template-columns: 38px minmax(0, 1fr); gap: 13px; padding: 20px; }
    .story-entry-mark { font-size: 31px; }
    .story-closing { padding: 24px 17px; }
    .laws-hero { min-height: 390px; padding: 36px 26px; background-position: 54% center; }
    .law-office { grid-template-columns: 82px minmax(0, 1fr); gap: 17px; width: calc(100% - 38px); padding: 31px 0 26px; }
    .law-sheriff-card img { width: 76px; height: 76px; border-width: 2px; }
    .law-sheriff-card figcaption { display: none; }
    .law-deputy-card { grid-column: 1 / -1; padding: 17px 0 0; border-top: 1px solid var(--frontier-line); border-left: 0; }
    .law-deputy-card img { height: 160px; }
    .law-proclamation { width: calc(100% - 38px); }
    .laws-page > .category-title { gap: 9px; margin-top: 42px !important; }
    .laws-page .rule-block { padding: 25px 20px 21px !important; }
    .laws-page .rule-block::after { right: -57px; top: 16px; font-size: 7px; }
    .law-index { grid-template-columns: repeat(2, 1fr); width: calc(100% - 38px); }
    .law-index a:nth-child(2) { border-right: 0; }
    .law-index a:nth-child(-n+2) { border-bottom: 1px solid var(--frontier-line); }
    .law-dossiers { width: calc(100% - 38px); }
    .law-dossier summary { grid-template-columns: 58px minmax(0, 1fr); gap: 11px; min-height: 70px; padding: 0 14px; }
    .dossier-action { display: none; }
    .dossier-body { padding: 12px; }
}