/* O‘yin qoidasi — a rulebook. Layers: fonts, tokens, base, bar, layout with law index,
   hero, sections, law quotations, case cards (details reveal), footer, narrow. */

@font-face { font-family: "Alegreya"; src: url("fonts/alegreya.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --chalk: #f7f6f1;
  --paper: #ffffff;
  --line: #dedbd0;
  --ink: #151515;
  --ink-soft: #55534d;
  --yellow: #f4c20d;
  --yellow-ink: #6b5200;
  --red: #c4302a;
  --serif: "Alegreya", Georgia, serif;
  --sans: "Alegreya Sans", "Segoe UI", Arial, sans-serif;
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--chalk); color: var(--ink); font: 400 1.125rem/1.6 var(--serif); overflow-wrap: break-word; }
h1, h2, h3, .kicker, .brand, .menu, .index, .case-tab, summary, figcaption, .uz-l { font-family: var(--sans); }
h1, h2, h3 { line-height: 1.1; margin: 0; }
p, ul, figure, blockquote { margin: 0; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--ink); text-decoration-thickness: 2px; } }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -3rem; background: var(--ink); color: #fff; padding: 0.5rem 0.9rem; z-index: 5; }
.skip:focus { inset-block-start: 1rem; }

/* Bar */
.bar { background: var(--ink); color: #fff; }
.bar-inner { max-width: 76rem; margin-inline: auto; padding: 0.7rem var(--gap); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; color: #fff; text-decoration: none; flex-wrap: wrap; }
.cards { display: inline-flex; position: relative; inline-size: 2rem; block-size: 1.7rem; }
.cards span { position: absolute; inline-size: 1rem; block-size: 1.45rem; border-radius: 2px; }
.cy { background: var(--yellow); transform: rotate(-10deg); inset-inline-start: 0.1rem; }
.cr { background: var(--red); transform: rotate(9deg); inset-inline-start: 0.8rem; inset-block-start: 0.2rem; }
.brand-name { font-weight: 700; font-size: 1.35rem; }
.brand-sub { font-weight: 500; font-size: 0.95rem; color: #cfccc2; }
.top-links ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
.top-links a { color: #fff; text-decoration: none; font: 500 1rem/1.3 var(--sans); padding-block: 0.25rem; border-block-end: 2px solid transparent; }
.top-links a[aria-current="page"] { border-block-end-color: var(--yellow); }
@media (hover: hover) and (pointer: fine) { .top-links a:hover { color: var(--yellow); } }
.menu summary { list-style: none; cursor: pointer; font-weight: 700; padding: 0.5rem 0.9rem; border-radius: 0.35rem; background: var(--yellow); color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾" / ""; }
.menu[open] summary::after { content: " ▴" / ""; }
.menu ul { list-style: none; padding: 0.5rem 0 0; display: grid; }
.menu a { display: block; padding: 0.5rem 0; color: #fff; text-decoration: none; border-block-end: 1px solid #333; font: 500 1.05rem/1.3 var(--sans); }
.menu a[aria-current="page"] { color: var(--yellow); }

/* Layout: law index beside the text */
.layout { max-width: 76rem; margin-inline: auto; padding: 0 var(--gap); display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: flex-start; }
.index { flex: 0 0 16rem; position: sticky; top: 1rem; margin-block-start: 2.5rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-block-start: 6px solid var(--ink); }
.ix-h { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-block-end: 0.6rem; }
.ix, .ix ul, .ix-extra { list-style: none; padding: 0; }
.ix > li + li { margin-block-start: 0.8rem; }
.ix-law { display: block; font-weight: 700; font-size: 0.95rem; }
.ix ul { margin-block-start: 0.3rem; padding-inline-start: 0.7rem; border-inline-start: 3px solid var(--yellow); display: grid; gap: 0.15rem; }
.index a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; }
.index a[aria-current="page"] { color: var(--red); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .index a:hover { text-decoration: underline; } }
.ix-extra { margin-block-start: 1rem; padding-block-start: 0.7rem; border-block-start: 1px solid var(--line); display: grid; gap: 0.15rem; }
main { flex: 1 1 32rem; min-inline-size: 0; padding-block-end: 3rem; }

/* Hero and sections */
.hero { padding-block: 2.5rem 1rem; }
.kicker { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-block-end: 0.4rem; }
.hero h1 { font: 800 clamp(2.1rem, 1.4rem + 3vw, 3.4rem)/1.05 var(--serif); }
.lede { font-size: 1.2rem; color: var(--ink-soft); margin-block-start: 0.7rem; max-inline-size: 40rem; }
.sec { padding-block: 1.5rem; border-block-start: 1px solid var(--line); }
.sec > * + * { margin-block-start: 0.9rem; }
.sec h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); font-weight: 700; }
.sec > p { max-inline-size: 42rem; }

/* Law quotations: English verbatim, Uzbek unofficial */
.law-q { padding: 1rem 1.2rem; background: var(--paper); border-inline-start: 6px solid var(--ink); max-inline-size: 44rem; }
.law-q blockquote p { font: italic 500 1.15rem/1.5 var(--serif); }
.law-q blockquote p::before { content: "“"; }
.law-q blockquote p::after { content: "”"; }
.uz { margin-block-start: 0.5rem; }
.uz-l { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.law-q figcaption { margin-block-start: 0.5rem; font-size: 0.95rem; }
.src { padding-inline-start: 1.2rem; display: grid; gap: 0.4rem; }

/* Case cards: a yellow card edge, answer behind <details> */
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.1rem; }
.case { position: relative; background: var(--paper); border: 1px solid var(--line); border-inline-start: 10px solid var(--yellow); border-radius: 4px; padding: 1rem 1.1rem 1.1rem 1.2rem; display: grid; gap: 0.5rem; align-content: start; }
.case-tab { position: absolute; inset-inline-end: 0.8rem; inset-block-start: 0.7rem; font: 700 1.5rem/1 var(--sans); color: var(--line); }
.case h3 { font-size: 1.3rem; font-weight: 700; padding-inline-end: 1.5rem; }
.case-sit { color: var(--ink-soft); }
.case-q { font-weight: 700; }
.case-a summary { cursor: pointer; display: inline-block; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 2rem; background: var(--ink); color: #fff; list-style: none; }
.case-a summary::-webkit-details-marker { display: none; }
.case-a summary::before { content: "▸ " / ""; }
.case-a[open] summary::before { content: "▾ " / ""; }
.case-a[open] { padding-block-start: 0.2rem; }
.case-a[open] summary { background: var(--red); }
.case-a p { margin-block-start: 0.6rem; }
.case-ref { font: 500 0.95rem/1.4 var(--sans); color: var(--yellow-ink); }
.case-inf { font-size: 1rem; line-height: 1.5; border-inline-start: 3px solid var(--line); padding-inline-start: 0.7rem; }
.case-more { font: 500 1rem/1.4 var(--sans); }

/* Footer */
.foot { background: var(--ink); color: #d4d1c7; }
.foot-inner { max-width: 76rem; margin-inline: auto; padding: 1.5rem var(--gap) 2rem; display: grid; gap: 0.55rem; font-size: 1rem; }
.foot strong { color: #fff; }
.foot a { color: var(--yellow); }

@media (min-width: 48rem) {
  .menu { display: none; }
}
@media (max-width: 47.99rem) {
  .index, .top-links { display: none; }
  .menu { flex-basis: 100%; }
}