/* Земетресения - Design D "Наблюдателница": soft bento tiles, borderless,
   forest/sunrise palette. Tokens are declared once on bare :root, then
   redefined for the OS dark preference and for an explicit user toggle, so
   both themes resolve regardless of which one stamps the root. */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600;700;800&family=Karla:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#EFF1EC;
  --ink:#16231F;
  --muted:#56625C;
  --line:#E4E1D6;
  --card:#FFFFFF;
  --sage:#DCE6DE;
  --sand:#EFE6D6;
  --sky:#DCE7E8;
  --orange:#B7551B;
  --felt:#E07A3F;
  --orange-ink:#2A1608;
  --teal:#1F6F63;
  --shadow: 0 10px 28px -18px rgba(22,35,31,.35);
  --focus:#1F6F63;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1613;
    --ink:#E7EDE9;
    --muted:#889792;
    --line:#233029;
    --card:#152420;
    --sage:#17231D;
    --sand:#241C13;
    --sky:#131F21;
    --orange:#E38B52;
    --felt:#E38B52;
    --orange-ink:#241305;
    --teal:#4FBBA8;
    --shadow: 0 14px 32px -16px rgba(0,0,0,.55);
    --focus:#4FBBA8;
  }
}

:root[data-theme="dark"]{
  --bg:#0E1613;
  --ink:#E7EDE9;
  --muted:#889792;
  --line:#233029;
  --card:#152420;
  --sage:#17231D;
  --sand:#241C13;
  --sky:#131F21;
  --orange:#E38B52;
  --felt:#E38B52;
  --orange-ink:#241305;
  --teal:#4FBBA8;
  --shadow: 0 14px 32px -16px rgba(0,0,0,.55);
  --focus:#4FBBA8;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.5;
}
h1,h2,h3,.headline{font-family:'Libre Franklin',system-ui,sans-serif; text-wrap:balance;}
a{color:inherit;}
.mono{font-family:'Roboto Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
img{max-width:100%;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:0 0 8px 0; z-index:100;}
.skip-link:focus{left:0;}

.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
.home-intro{padding:18px 0 0; max-width:760px;}
.home-intro h1{font-size:clamp(28px,4vw,42px); line-height:1.08; margin:0 0 8px; letter-spacing:-.03em;}
.home-intro p{color:var(--muted); margin:0; font-size:15.5px;}

/* ---------- header ---------- */
header.nav{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  /* full-width sticky bar; side padding keeps the content on the 1080px column */
  padding:14px max(20px, calc((100% - 1080px) / 2 + 20px));
  position:sticky; top:0; z-index:1100; background:var(--bg); border-bottom:1px solid var(--line);
}
.nav-dd{position:relative;}
.nav-dd summary{list-style:none; cursor:pointer; color:var(--muted); display:flex; align-items:center; gap:7px; user-select:none;}
.nav-dd summary::-webkit-details-marker{display:none;}
.nav-dd summary::after{content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s ease;}
.nav-dd[open] summary::after{transform:translateY(1px) rotate(225deg);}
.nav-dd summary:hover, .nav-dd[open] summary{color:var(--ink);}
.nav-dd__panel{position:absolute; right:0; top:calc(100% + 14px); width:min(540px, calc(100vw - 32px)); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:4px 18px;}
.nav-dd__panel .eyebrow{margin:0 8px 6px;}
nav.links .nav-dd__panel a{display:block; padding:7px 8px; border-radius:9px; color:var(--ink); font-size:14px; font-weight:600; line-height:1.3;}
nav.links .nav-dd__panel a:hover, nav.links .nav-dd__panel a[aria-current="page"]{background:var(--sage);}
nav.links .nav-dd__panel a.feat{background:var(--sand); font-weight:700; padding:10px 12px; margin-bottom:4px;}
nav.links .nav-dd__panel a.feat:hover{background:var(--sage);}
.nav-dd__panel a span{display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:2px;}
.brand{font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:18px; text-decoration:none; color:var(--ink); margin-right:auto;}
.brand em{font-style:normal; color:var(--orange);}
nav.links{display:flex; gap:20px; font-size:14px; font-weight:600; flex-wrap:wrap;}
nav.links a{text-decoration:none; color:var(--muted);}
nav.links a:hover, nav.links a[aria-current="page"]{color:var(--ink);}
.nav-actions{display:flex; align-items:center; gap:8px;}
.theme-toggle{border:none; background:var(--card); color:var(--ink); width:34px; height:34px; border-radius:100px; cursor:pointer; box-shadow:var(--shadow); font-size:15px;}
.menu-toggle{display:none; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:100px; color:var(--ink); background:var(--card); box-shadow:var(--shadow); cursor:pointer;}
.menu-toggle__icon,.menu-toggle__icon::before,.menu-toggle__icon::after{display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease;}
.menu-toggle__icon{position:relative;}
.menu-toggle__icon::before,.menu-toggle__icon::after{content:""; position:absolute; left:0;}
.menu-toggle__icon::before{top:-6px;}
.menu-toggle__icon::after{top:6px;}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon{background:transparent;}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before{transform:translateY(6px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- breadcrumbs ---------- */
.crumbs{padding-top:16px; padding-bottom:6px;}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:4px 0; margin:0; padding:0; font-size:12.5px; color:var(--muted);}
.crumbs li + li::before{content:"›"; margin:0 8px; opacity:.7;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--teal); text-decoration:underline;}
.crumbs li[aria-current]{color:var(--ink); font-weight:600;}

/* ---------- article aside (related pages + latest event) ---------- */
.page-aside{max-width:1080px; margin:0 auto; padding:0 20px 8px; display:flex; flex-direction:column; gap:14px;}
.page-aside .tile{padding:20px 22px; border-radius:18px; box-shadow:var(--shadow);}
.aside-links{background:var(--card);}
.aside-links a{display:block; padding:10px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-size:14px; font-weight:600; line-height:1.35;}
.aside-links a:last-child{border-bottom:none; padding-bottom:0;}
.aside-links a:hover{color:var(--teal);}
.aside-live{background:var(--sand);}
.aside-live .mag{font-size:42px;}
.aside-live .place{font-size:16px; margin:8px 0 6px;}
.aside-live .actions{margin-top:14px;}
@media (min-width:901px){
  main.has-aside{display:grid; grid-template-columns:minmax(0,1fr) 300px; column-gap:44px; align-items:start; max-width:1080px; margin:0 auto; padding:0 20px;}
  main.has-aside > .crumbs{grid-column:1/-1; padding-left:0; padding-right:0;}
  main.has-aside > .wrap{grid-column:1; max-width:none; margin:0; padding:0; min-width:0;}
  main.has-aside > .page-aside{grid-column:2; position:sticky; top:78px; margin:0; padding:36px 0 0; max-width:none;}
}

/* ---------- disclaimer strip ---------- */
.disclaimer-strip{background:var(--sky); padding:10px 0;}
.disclaimer-strip .wrap{font-size:12.5px; color:var(--muted); line-height:1.5;}
.disclaimer-strip a{color:var(--teal); font-weight:600; text-decoration:none;}

/* ---------- bento ---------- */
main{display:block;}
.bento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; padding:16px 0 8px;}
.tile{border-radius:22px; padding:24px;}
.tile.hero{grid-column:span 4; background:var(--sand); box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:230px;}
.tile.status{grid-column:span 2; background:var(--sky); display:flex; flex-direction:column; justify-content:center; gap:8px;}
.tile.list{grid-column:span 3; background:var(--card);}
.tile.map{grid-column:span 3; background:var(--sky); padding:16px; display:flex; flex-direction:column;}
.home-mini-map{border-radius:12px; overflow:hidden; flex:1 1 auto; min-height:280px;}
.tile.stats{grid-column:span 2; background:var(--sage); display:flex; flex-direction:column; justify-content:center; gap:14px;}
.tile.felt{grid-column:span 2; background:var(--felt); color:var(--orange-ink);}
.tile.links{grid-column:span 2; background:var(--card);}
.tile.wide{grid-column:span 6;}
.tile.half{grid-column:span 3; background:var(--card);}

.eyebrow{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); font-weight:700; margin:0 0 10px;}
.tile.felt .eyebrow{color:var(--orange-ink);}

.mag{font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:58px; line-height:1; color:var(--orange);}
.mag sup{font-size:.34em; color:var(--ink); margin-right:6px;}
.place{font-family:'Libre Franklin',sans-serif; font-weight:700; font-size:19px; margin:12px 0 8px;}
.meta{font-size:13px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap;}
.meta b{color:var(--ink);}
.actions{display:flex; gap:10px; margin-top:4px; flex-wrap:wrap;}
.btn{font:600 13px/1 'Karla',sans-serif; padding:11px 18px; border-radius:100px; text-decoration:none; color:var(--ink); background:var(--card); display:inline-block; border:none; cursor:pointer;}
.btn.primary{background:var(--ink); color:var(--bg);}

.status .dot{width:8px; height:8px; border-radius:50%; background:var(--teal); display:inline-block; margin-right:8px;}
.status .t{font-size:13px; color:var(--muted);}
.status .big{font-family:'Roboto Mono',monospace; font-size:15px; font-weight:500;}

.tile.list .row{display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line);}
.tile.list .row:last-child{border-bottom:none;}
.tile.list .m{font-family:'Roboto Mono',monospace; font-weight:700; color:var(--orange); font-size:13px; white-space:nowrap; justify-self:start; background:var(--sand); border-radius:100px; padding:5px 10px;}
.tile.list .p{font-size:13.5px; font-weight:600;}
.tile.list .p span{display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:2px;}
.tile.list .d{font-size:11px; color:var(--muted); font-family:'Roboto Mono',monospace; white-space:nowrap;}
.tile.list a.row{text-decoration:none; color:inherit;}
.tile.list a.row:hover .p{color:var(--teal);}
.tile.list .tile-more{display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:var(--teal); text-decoration:none;}
.tile.list .tile-more:hover{text-decoration:underline;}

.tile.stats .stat{display:flex; align-items:baseline; justify-content:space-between;}
.tile.stats .stat .n{font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:24px;}
.tile.stats .stat .l{font-size:11.5px; color:var(--muted); text-align:right;}

.tile.felt p{font-family:'Libre Franklin',sans-serif; font-weight:700; font-size:16px; margin:0 0 14px;}
.tile.felt .choices{display:flex; gap:6px; flex-wrap:wrap;}
.tile.felt .choices button{font:600 11.5px/1 'Karla'; padding:8px 12px; border-radius:100px; border:none; background:rgba(255,255,255,.5); color:var(--orange-ink); cursor:pointer; opacity:.85;}
.tile.felt .choices button:disabled{cursor:not-allowed;}
.tile.felt .choices button.is-selected{background:var(--orange-ink); color:var(--felt); opacity:1;}
.tile.felt .soon{font-size:11.5px; margin-top:10px;}
.tile.felt .felt-honeypot{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.tile.felt .felt-followup{margin-top:12px; display:flex; flex-direction:column; gap:8px;}
.tile.felt .felt-followup select,
.tile.felt .felt-followup textarea{font:500 13px/1.4 'Karla'; padding:10px 12px; border-radius:10px; border:none; background:rgba(255,255,255,.6); color:var(--orange-ink); resize:vertical; width:100%;}
.tile.felt .felt-followup select{-webkit-appearance:none; appearance:none; padding-right:34px; background:rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232A1608' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;}
.tile.felt .felt-followup textarea{min-height:52px;}
.tile.felt .felt-followup .btn{align-self:flex-start;}
.tile.felt .felt-result{margin-top:12px; font-size:13px; font-weight:600;}

.tile.links a{display:flex; flex-direction:column; gap:2px; padding:11px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:600;}
.tile.links a:last-child{border-bottom:none;}
.tile.links a span.sub{display:block; font-size:12px; font-weight:400; color:var(--muted);}
.link-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;}
.link-cards a{display:block; background:var(--card); border-radius:16px; padding:16px 18px; text-decoration:none; color:var(--ink); font-weight:700; font-size:14.5px; line-height:1.35; box-shadow:var(--shadow); transition:background-color .15s ease;}
.link-cards a:hover{background:var(--sage);}
.link-cards a span.sub{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:5px; line-height:1.45;}

/* ---------- generic page sections (non-homepage) ---------- */
.section{padding:28px 0;}
.section h2{font-size:21px; letter-spacing:-.01em; margin:0 0 16px;}
.section h1{font-size:clamp(27px,3.6vw,38px); line-height:1.1; letter-spacing:-.025em; margin:0 0 12px;}
.page-head{padding-top:14px; padding-bottom:20px;}
.page-head p{max-width:700px; color:var(--muted); font-size:15.5px; line-height:1.65; margin:0 0 12px;}
.page-head p:last-child{margin-bottom:0;}
.bento > .stack{grid-column:span 2; display:flex; flex-direction:column; gap:14px; min-width:0;}
.region-map{height:400px; border-radius:14px; overflow:hidden; z-index:0;}
.filter-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.filter-tabs a{text-decoration:none; font:600 13px/1 'Karla'; padding:10px 16px; border-radius:100px; background:var(--card); color:var(--muted);}
.filter-tabs a[aria-current="true"]{background:var(--ink); color:var(--bg);}

.table-list{background:var(--card); border-radius:18px; overflow:hidden;}
.table-list .row{display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;}
.table-list .row:last-child{border-bottom:none;}
.table-list{box-shadow:var(--shadow);}
.table-list a.row{transition:background-color .15s ease;}
.table-list a.row:hover{background:var(--sage);}
.table-list .m{font-family:'Roboto Mono',monospace; font-weight:700; color:var(--orange); font-size:13.5px; white-space:nowrap; justify-self:start; background:var(--sand); border-radius:100px; padding:5px 10px;}
.table-list .m.s4{background:var(--felt); color:var(--orange-ink);}
.table-list .m.s5{background:var(--orange); color:var(--card);}
.list-note{font-size:12px; color:var(--muted); margin:10px 2px 0;}
.table-list .p b{font-weight:700;}
.table-list .p span{display:block; font-size:12px; color:var(--muted); margin-top:2px;}
.table-list .d{font-family:'Roboto Mono',monospace; font-size:12px; color:var(--muted); text-align:right; white-space:nowrap; line-height:1.5;}
.table-list .d time{color:var(--ink);}
.empty-note{background:var(--sky); border-radius:18px; padding:24px; color:var(--muted); font-size:15px; line-height:1.55;}

.map-frame{border-radius:18px; overflow:hidden; background:var(--sky);}
#map-canvas{width:100%; height:420px;}
.map-legend{display:flex; gap:16px; flex-wrap:wrap; padding:14px 4px; font-size:12.5px; color:var(--muted);}
.map-legend .dot{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:-1px;}

.prose{max-width:680px; font-size:16.5px; line-height:1.7;}
.prose h1{font-size:30px; margin-bottom:6px;}
.prose h2{font-size:21px; margin-top:34px;}
.prose p{margin:0 0 16px;}
.prose h3{font-size:17.5px; margin:26px 0 10px;}
.prose h2[id]{scroll-margin-top:84px;}
.prose ul{padding-left:20px;}
.prose li{margin-bottom:8px;}
.byline{font-size:13px; color:var(--muted); margin-bottom:26px;}
.event-text{margin-top:18px;}
.event-text__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;}
.event-text__grid .tile{background:var(--card); border-radius:18px; padding:20px 22px; box-shadow:var(--shadow);}
.event-text__grid .tile p{margin:0; font-size:15.5px; line-height:1.65;}
.event-text__more{margin:14px 2px 0;}
.event-text__more{font-size:14px; color:var(--muted);}
.event-text__more a{color:var(--teal); font-weight:600;}
.photo{margin:22px 0 24px;}
.photo img{display:block; width:100%; height:auto; border-radius:16px; background:var(--sky);}
.photo figcaption{font-size:13px; line-height:1.5; color:var(--muted); margin-top:8px;}
.photo__credit{display:block; font-size:12px; opacity:.85;}
.photo__credit a{color:inherit;}
.link-cards--photo{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.link-cards--photo a{padding:0 18px 16px; overflow:hidden;}
.card-thumb{display:block; width:calc(100% + 36px); max-width:none; height:150px; object-fit:cover; margin:0 -18px 14px;}
.callout{background:var(--sky); border-radius:16px; padding:18px 20px; margin:20px 0; font-size:14.5px;}
.callout.emergency{background:var(--felt); color:var(--orange-ink); font-weight:600;}

.faq details{background:var(--card); border-radius:14px; padding:16px 18px; margin-bottom:10px;}
.faq summary{font-weight:700; cursor:pointer;}
.faq details[open]{box-shadow:var(--shadow);}
.faq p{margin:10px 0 0; color:var(--muted); font-size:14.5px; line-height:1.6;}

footer.f{padding:32px 0 48px; margin-top:28px; border-top:1px solid var(--line); background:var(--card);}
footer.f .wrap{display:flex; flex-direction:column; gap:14px;}
footer.f .links{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; font-weight:600;}
footer.f .links a{color:var(--teal); text-decoration:none;}
footer.f .disclaimer{font-size:13px; color:var(--muted); line-height:1.65; margin:0; padding-top:14px; border-top:1px solid var(--line);}
footer.f .source{font-size:12px; color:var(--muted); font-family:'Roboto Mono',monospace; margin:0;}
footer.f .links{justify-content:space-between;}

@media (max-width:760px){
  header.nav{gap:12px; padding:10px 20px;}
  header.nav .primary-links{max-height:calc(100vh - 80px); overflow-y:auto;}
  .nav-dd summary{min-height:44px; padding:8px 10px; border-radius:10px; justify-content:space-between;}
  .nav-dd__panel{position:static; width:auto; grid-template-columns:1fr; border:0; box-shadow:none; background:transparent; padding:2px 0 6px 8px; gap:10px;}
  header.nav .primary-links .nav-dd__panel a{min-height:40px; display:block; padding:9px 10px;}
  .brand{font-size:17px;}
  .nav-actions{margin-left:auto;}
  .theme-toggle{width:40px; height:40px;}
  .menu-toggle{display:grid;}
  header.nav .primary-links{display:none; order:3; width:100%; flex-direction:column; gap:2px; padding:8px; border-radius:16px; background:var(--card); box-shadow:var(--shadow);}
  header.nav .primary-links.is-open{display:flex;}
  header.nav .primary-links a{display:flex; align-items:center; min-height:44px; padding:8px 10px; border-radius:10px;}
  header.nav .primary-links a:hover,header.nav .primary-links a[aria-current="page"]{background:var(--sage);}
  .bento{grid-template-columns:minmax(0,1fr); gap:12px; padding:12px 0 4px;}
  .bento > .tile{grid-column:1/-1; min-width:0;}
  .tile{border-radius:18px; padding:20px;}
  .tile.map{padding:12px;}
  .home-mini-map{flex:none; min-height:0; height:220px;}
  .tile.hero{min-height:0;}
  .mag{font-size:46px;}
  .tile.list .row{grid-template-columns:68px minmax(0,1fr); gap:4px 10px;}
  .tile.list .d{grid-column:2; white-space:normal;}
  .table-list .row{grid-template-columns:68px 1fr; grid-template-areas:"m p" ". d"; padding:13px 16px;}
  .table-list .d br{display:none;}
  .table-list .d time{margin-right:8px;}
  .bento > .stack{grid-column:1/-1;}
  .region-map{height:300px;}
  .table-list .d{grid-column:1/-1; text-align:left; padding-top:2px;}
  #map-canvas{height:320px;}
  footer.f{padding-bottom:36px;}
  footer.f .links{gap:4px; flex-direction:column; align-items:flex-start;}
  footer.f .links a{padding:6px 0;}
}

@media (max-width:420px){
  .wrap{padding-left:16px; padding-right:16px;}
  header.nav{padding-left:16px; padding-right:16px;}
  .tile{padding:18px;}
  .section{padding:22px 0;}
  .prose{font-size:16px;}
}

@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }