/* मुसीबत में (docs/SPEC-V8.md §7 batch 4, picture-first): /numbers, /blood, /places and a place’s page — the red 112 hero, coloured number tiles with our own drawings, folding category cards, picture tiles, photo cards. 13 KB budget; tokens only; precached with /numbers. */
@layer components {
/* the site's sun is a loud yellow; among these pale tiles it is softened to the same lightness */
:is(.hp-tile,.hp-cat-tile,.hp-tip,.hp-rail-disc,.hp-card-pic,.hp-row-tile,.hp-hero).tone-sun{--tone:color-mix(in srgb,var(--sun) 26%,var(--surface));--art-accent:var(--sun-deep)}
.hp-112{display:flex;align-items:center;gap:14px;margin-block-start:16px;padding:16px;border-radius:24px;background:var(--red);color:var(--on-red);box-shadow:0 16px 36px color-mix(in srgb,var(--red) 28%,transparent)}
.hp-112:hover{color:var(--on-red)}
.hp-112-art{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--on-red) 16%,transparent);--art-accent:var(--sun)}
.hp-112-art svg{width:54px;height:54px}
.hp-112-text{flex:1;min-width:0;display:grid;gap:2px}
.hp-112-num{font-family:var(--font-display);font-weight:800;font-size:52px;line-height:1}
.hp-112-sub{font-size:14.5px;font-weight:600;opacity:.92}
.hp-112-btn{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);color:var(--red);font-weight:800}
.hp-wide{display:none}
.hp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0;padding:0;list-style:none}
.hp-tile{position:relative;display:grid;gap:4px;height:100%;padding:12px;border-radius:20px;background:var(--tone);color:var(--tone-ink)}
.hp-tile:hover{color:var(--tone-ink)}
.hp-tile-art svg{display:block;width:52px;height:52px}
.hp-tile-num{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.05;color:var(--ink)}
.hp-tile-name{font-size:13px;font-weight:700;line-height:1.3}
.hp-tile-call{position:absolute;top:10px;inset-inline-end:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface)}
.hp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-block-start:28px}
.hp-head .pg-h2{margin:0}
.hp-trust{display:flex;align-items:center;gap:8px;margin:4px 0 12px;font-size:var(--t-xs);color:var(--muted)}
.hp-note{margin:4px 0 12px;font-size:var(--t-xs);line-height:1.6;color:var(--muted)}
.hp-note a:not(.pg-link){text-decoration:underline}
.hp-src{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mint);color:var(--mint-ink)}
.hp-cats{display:grid;gap:12px}
.hp-cat{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);break-inside:avoid}
.hp-cat>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;list-style:none;cursor:pointer}
.hp-cat>summary::-webkit-details-marker{display:none}
.hp-cat-tile{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tone);color:var(--tone-ink)}
.hp-cat-tile svg{width:34px;height:34px}
.hp-cat-text{flex:1;min-width:0;display:grid}
.hp-cat-name{margin:0;font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.25}
.hp-cat-n{font-size:var(--t-xs);color:var(--muted)}
.hp-cat-go{flex:none;color:var(--muted);transition:transform .15s}
.hp-cat[open] .hp-cat-go{transform:rotate(90deg)}
.hp-rows{margin:0;padding:0 14px 6px;list-style:none}
.hp-row{display:flex;align-items:center;gap:10px;padding-block:10px;border-block-start:1px solid var(--line)}
.hp-row-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 10px}
.hp-row-name{flex:1 1 150px;min-width:0;font-size:14px;font-weight:600;line-height:1.35}
.hp-row-num{flex:none;font-family:var(--font-display);font-weight:800;font-size:16px;white-space:nowrap}
.hp-call{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--on-ink)}
.hp-call:hover{color:var(--on-ink)}
.hp-link-row .hp-row-name{display:grid;gap:1px}
.hp-host{font-size:var(--t-xs);font-weight:500;color:var(--muted)}
.hp-link-row{color:var(--ink)}
.hp-link-row>.icon{flex:none;color:var(--muted)}
.hp-foot{margin-block-start:20px;font-size:var(--t-sm);color:var(--muted)}
.hp-ask{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-block-start:16px;padding:16px;border-radius:24px;background:var(--rose);color:var(--rose-ink)}
.hp-ask-art{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--surface)}
.hp-ask-art svg{width:48px;height:48px}
.hp-ask-text{flex:1 1 200px;display:grid;gap:4px}
.hp-ask-title{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.25;color:var(--ink)}
.hp-ask-sub{font-size:14px;font-weight:600}
.hp-ask-sub a{font-weight:800;text-decoration:underline}
.hp-ask .btn{flex:1 1 auto;min-height:48px}
.hp-none{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink-2)}
.hp-none .icon{color:var(--mint-ink)}
.hp-banks{display:grid;gap:10px}
.hp-bank{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.hp-bank-text{flex:1;min-width:0;display:grid;gap:1px}
.hp-bank-name{margin:0;font-size:15px;font-weight:700;line-height:1.35}
.hp-bank-meta{font-size:var(--t-xs);color:var(--muted)}
.hp-bank-num{font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.25}
.hp-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.hp-tip{display:grid;gap:6px;height:100%;padding:12px;border-radius:18px;background:var(--tone);color:var(--tone-ink)}
.hp-tip-big{font-weight:800;font-size:14.5px;line-height:1.3;color:var(--ink)}
.hp-tip-small{font-size:12.5px;font-weight:600}
.hp-more{margin-block-start:12px}
.hp-more>summary{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:700;cursor:pointer;list-style:none}
.hp-more>summary::-webkit-details-marker{display:none}
.hp-more ul{display:grid;gap:6px;margin:4px 0 0;padding-inline-start:20px;font-size:var(--t-sm);color:var(--ink-2)}
.hp-rail{position:relative;display:flex;gap:12px;margin:16px calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l));padding:0 var(--pad-r) 4px var(--pad-l);overflow-x:auto;scrollbar-width:none;list-style:none}
.hp-rail-opt{flex:none;display:grid;justify-items:center;gap:6px;width:74px;text-align:center;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.hp-rail-disc{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--tone);color:var(--tone-ink)}
.hp-rail-disc svg{width:44px;height:44px}
.hp-rail-all{background:var(--ink);color:var(--on-ink);font-family:var(--font-display);font-weight:800;font-size:19px}
.hp-rail-opt.is-on .hp-rail-disc{box-shadow:0 0 0 3px var(--ground),0 0 0 5px var(--ink)}
.hp-row-tile{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--tone);color:var(--tone-ink)}
.hp-row-tile svg{width:30px;height:30px}
.hp-row-photo{overflow:hidden;background:var(--surface-2)}
.hp-row-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hp-go{flex:none;color:var(--muted)}
.hp-see{display:flex;flex-wrap:wrap;gap:0 6px;margin-block-start:8px;color:var(--muted)}
.hp-search{display:flex;align-items:center;gap:10px;max-width:640px;height:52px;margin-block-start:4px;padding:0 6px 0 18px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow)}
.hp-search:focus-within{box-shadow:0 0 0 2px var(--focus)}
.hp-search>.icon{flex:none;color:var(--muted)}
.hp-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font:inherit;color:var(--ink);outline:none}
.hp-search button{flex:none;height:42px;padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font:inherit;font-weight:700;cursor:pointer}
.hp-place-row{display:flex;align-items:center;gap:12px;padding-block:10px;color:var(--ink)}
.hp-place-row+.hp-place-row{border-block-start:1px solid var(--line)}
.hp-place-row .hp-row-name{display:grid;gap:1px;font-size:15px}
.hp-groups{display:grid;gap:22px;margin-block-start:22px}
.hp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
.hp-card{display:grid;gap:8px;min-width:0;color:var(--ink)}
.hp-card-pic{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:var(--tone);color:var(--tone-ink)}
.hp-card-pic img{display:block;width:100%;height:100%;object-fit:cover}
.hp-card-pic svg{width:72px;height:72px}
.hp-card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:14px;line-height:1.35}
.hp-card:hover .hp-card-name{text-decoration:underline;text-underline-offset:.2em}
.hp-card-area{font-size:12px;color:var(--muted)}
.hp-hero{position:relative;margin:8px calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l));overflow:hidden;background:var(--surface-2)}
figure.hp-hero{margin-block-end:0}
.hp-hero img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.hp-hero-credit{position:absolute;inset-inline-end:10px;inset-block-end:8px;max-width:calc(100% - 20px);margin:0;padding:2px 8px;border-radius:var(--r-pill);background:rgb(20 20 20 / .6);color:var(--on-ink);font-size:11px}
.hp-hero-credit a{color:inherit;text-decoration:underline}
.hp-hero.is-art{display:grid;place-items:center;aspect-ratio:16/9;background:var(--tone);color:var(--tone-ink)}
.hp-hero.is-art svg{width:120px;height:120px}
.hp-title{display:flex;align-items:center;gap:12px;margin-block-start:16px}
.hp-title .pg-h1{margin:0}
.hp-title .hp-row-tile{width:52px;height:52px;border-radius:16px}
.hp-title .hp-row-tile svg{width:38px;height:38px}
.hp-kicker{font-size:var(--t-sm);font-weight:600;color:var(--muted)}
.hp-alt{margin-block-start:2px;color:var(--muted)}
.hp-desc{margin-block-start:14px;font-size:16px;line-height:1.7;max-width:62ch}
.hp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:14px}
.hp-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow);font-weight:600;font-size:var(--t-sm);color:var(--ink)}
a.hp-chip{color:var(--link)}
.hp-chip .icon{flex:none}
.hp-acts{flex-wrap:nowrap}
.hp-acts>.btn-dark{flex:1 1 auto}
.hp-acts-call,.hp-acts .share--compact{flex:none;width:50px;min-height:50px;padding:0;border-radius:50%}
@media (min-width:720px){
.hp-112{gap:24px;padding:20px 24px;border-radius:30px}
.hp-112-art{width:104px;height:104px}
.hp-112-art svg{width:72px;height:72px}
.hp-112-num{font-size:72px}
.hp-112-sub{font-size:17px}
.hp-112-btn{min-height:54px;padding:0 26px;font-size:17px}
.hp-wide{display:inline}
.hp-acts>.btn-dark{flex:none}
.hp-acts-call{width:auto;padding:0 20px;border-radius:var(--r-pill)}
.hp-narrow{display:none}
.hp-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-block-start:16px}
.hp-tile{gap:6px;padding:16px;border-radius:24px}
.hp-tile-art svg{width:64px;height:64px}
.hp-tile-num{font-size:30px}
.hp-tile-name{font-size:14.5px}
.hp-ask{gap:16px 22px;padding:20px 24px;border-radius:28px}
.hp-ask-art{width:96px;height:96px}
.hp-ask-art svg{width:64px;height:64px}
.hp-ask-title{font-size:24px}
.hp-ask .btn{flex:none}
.hp-banks{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hp-tips{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hp-rail{flex-wrap:wrap;gap:16px 10px;margin-inline:0;padding-inline:0;overflow:visible}
.hp-rail-opt{width:76px;font-size:13px}
.hp-rail-disc{width:68px;height:68px}
.hp-rail-disc svg{width:48px;height:48px}
.hp-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}
.hp-card-pic{border-radius:20px}
.hp-card-pic svg{width:96px;height:96px}
.hp-card-name{font-size:16px}
.hp-hero{margin-inline:0;border-radius:28px}
.hp-hero img{aspect-ratio:21/9}
.hp-hero.is-art{aspect-ratio:21/7}
.hp-hero-credit{inset-inline-end:14px;inset-block-end:12px;font-size:12px}
.hp-title .hp-row-tile{width:64px;height:64px;border-radius:18px}
.hp-title .hp-row-tile svg{width:46px;height:46px}
.hp-desc{font-size:18px}
}
@media (min-width:1024px){
.hp-cats{display:block;columns:3;column-gap:20px}
.hp-cat{margin-block-end:20px}
.hp-places-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
}
/* On a wide screen every number card is open: there is room, and nothing should hide behind a click (the government
   websites, .is-folded, stay folded). Only where the browser can style a closed card's content. */
@supports selector(::details-content){@media (min-width:1024px){
.hp-cats:not(.is-folded) .hp-cat::details-content{content-visibility:visible;display:block}
.hp-cats:not(.is-folded) .hp-cat>summary{cursor:default}
.hp-cats:not(.is-folded) .hp-cat-go{display:none}
}}
}