@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* --------------------------
   GLOBAL VARIABLES
-------------------------- */
:root{
  --font-family-head:'Russo One',Arial,sans-serif;
  --font-family-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-family-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;

  --font-size-xs:11px;--font-size-sm:13px;--font-size-md:16px;--font-size-lg:18px;--font-size-xl:22px;
  --line-height-body:1.5;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;

  --color-text:#0a0a0a;
  --color-bg:#ffffff;
  --color-surface:#ffffff;
  --color-surface-2:#f4f4f5;
  --color-surface-3:#f3f5f7;
  --color-border:rgba(0,0,0,.12);
  --color-bg-rgb: 255,255,255;

  --color-accent:#ff8500;
  --color-accent-hover:#ff7a29;

  --color-danger:#ef4444;
  --color-success:#22c55e;
  --color-info:#39b7ff;
  --color-warning:#f59e0b;
  --color-sky:#38bdf8;

  --color-price-old:#9e9e9e;
  --color-price-new:#e61d2e;

  --dash-bg:#1c1c1e;
  --dash-paper:#ffffff;
  --dash-ink:#111111;
  --dash-ink-muted:#8e8e93;
  --dash-accent:#f5e320;
  --dash-stroke:rgba(255,255,255,.10);
  --dash-status-ok:#2fd32f;

  --header-height:70px;

  --space-2xs:2px;--space-xs:4px;--space-sm:6px;--space-md:8px;--space-lg:12px;--space-xl:16px;--space-2xl:20px;--space-3xl:24px;--space-4xl:28px;--space-5xl:32px;
  --touch-target:44px;

  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:18px;--radius-pill:999px;

  --border-1:1px;--border-2:2px;--border-3:3px;--border-4:4px;

  --shadow-hard:4px 4px 0 var(--color-text);
  --shadow-hard-hover:2px 2px 0 var(--color-text);
  --shadow-soft:0 10px 20px rgba(0,0,0,.30);

  --kp-gap:18px;--kp-radius:14px;--kp-radius-lg:18px;

  --kp-map-mobile-h:60svh;--kp-map-desktop-max:560px;--kp-map-gap-m:16px;--kp-map-gap-d:28px;--kp-map-radius:12px;

  --stroke:3px;--stroke-thin:1px;--radius:14px;--spine-width:5px;
  --shadow-sm:var(--shadow-hard);
  --gap:clamp(14px,2.5vw,24px);
  --kp-hdd-gap:-6px;

  --drawer-pt:calc(100px + env(safe-area-inset-top));
  --resorts-max-h:150px;

  --title-orange:var(--color-accent);
  --title-amber:#ffb400;

  --card-bg:#fff5f0;
  --card-border:var(--color-accent);

  --comic-accent:#fff700;
  --comic-bg:var(--color-bg);
  --comic-ink:#000;
  --comic-border:var(--border-2) solid var(--comic-ink);
  --comic-radius:var(--radius-lg);
  --comic-shadow:4px 4px 0 var(--comic-ink);

  --ink:var(--color-text);
  --paper:var(--color-bg);
  --accent:var(--color-accent);
  --accent-hover:var(--color-accent-hover);
  --red:var(--color-danger);
  --green:var(--color-success);
  --blue:var(--color-info);
  --orange:var(--color-warning);
  --sky:var(--color-sky);

  --price-old-color:var(--color-price-old);
  --price-new-color:var(--color-price-new);
  --price-font-family:var(--font-family-body);

  --kp-bg:var(--dash-bg);
  --kp-paper:var(--dash-paper);
  --kp-ink:var(--dash-ink);
  --kp-ink-muted:var(--dash-ink-muted);
  --kp-accent:var(--dash-accent);
  --kp-stroke:var(--dash-stroke);
  --kp-status-green:var(--dash-status-ok);

  --kp-title:#fff;
  --kp-title-bg:#ffb400;
  --kp-title-fg:#000;

  --shadow:var(--shadow-hard);
  --shadow-hover:var(--shadow-hard-hover);

  --font-head:var(--font-family-head);
  --font-body:var(--font-family-body);

  --sm-accent:#fbbf24;
  --sm-accent-hover:#fcd34d;
}


/* --------------------------
   BASE STYLES & TYPOGRAPHY
-------------------------- */

html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
[id]{ scroll-margin-top:50px; }

.visually-hidden {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; overflow: hidden;
}

.kp-comic{
font-family: var(--font-body) !important;
color: var(--ink);
}

.kp-hero2__h1 {
font-family: var(--font-head) !important;
font-weight: 400;
font-size: clamp(28px, 8.5vw, 46px); line-height: 1.1;
margin: 0; color: var(--kp-title);
text-shadow: 3px 3px 0 var(--color-text);
text-transform: uppercase;
}
.text-orange {
color: var(--title-orange);
}
.text-amber {
color: var(--title-amber);
}

.kp-hero2__h1.kp-h1--2lines{
display:block;
}

.kp-hero2__h1.kp-h1--2lines .kp-h1line{
display:block;
white-space:nowrap;
}

.kp-hero2__sub {
font-family: Arial, sans-serif; font-weight: 400;
font-size: clamp(14px, 1.7vw, 22px);
display: inline-block;
background: var(--kp-title-bg); color: var(--kp-title-fg);
border: 3px solid var(--ink); border-radius: 12px;
padding: .5em .85em; margin-top: .45em;
box-shadow: 6px 6px 0 var(--ink);
margin-bottom: 18px;
}

.kp-comic .kp-comic__body h2,
.kp-comic .kp-comic__body h3{
font-family: var(--font-head) !important;
font-weight: 400;
color: var(--kp-title-fg);
-webkit-text-fill-color: var(--ink);
line-height: 1.2;
letter-spacing: 0.02em;
}

.kp-comic .kp-comic__body h2 *,
.kp-comic .kp-comic__body h3 *{
font-family: inherit !important;
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}

.kp-comic .kp-comic__body h2{
font-size: clamp(18px,2.3vw,24px);
margin: 1em .4em .6em;
display: inline-block;
background: var(--kp-title-bg);
border: var(--stroke) solid var(--ink);
border-radius: 10px;
padding: .2em .5em;
text-shadow: none;
}

.kp-comic .kp-comic__body h3{
font-size: clamp(16px,2vw,20px);
margin: 1.2em .4em .6em;
display: inline-block;
background: var(--color-bg);
padding: .18em .45em;
}

.kp-comic .kp-comic__body p{ margin:.4em 0 .6em; }

.kp-comic .kp-comic__title{
display: table;
font-family: var(--font-head) !important;
font-weight: 400;
line-height: 1.05;
font-size: clamp(28px,4.8vw,46px);

color: var(--kp-title-fg);
-webkit-text-fill-color: var(--kp-title-fg);

background: var(--kp-title-bg);
border: var(--stroke) solid var(--ink);
border-radius: 12px;
padding: .35em .55em;
max-width: 1200px;

transform: rotate(-1.5deg);
transform-origin: center;
box-shadow: 6px 6px 0 var(--ink);
margin: 0 auto 18px;
text-transform: uppercase;
}

.kp-comic .kp-comic__body{ padding:14px 16px 18px; min-width:0; }
.kp-comic .kp-comic__body p{ margin:.4em 0 .6em; }

/* ==========================================
C. ТИПОГРАФИКА СТАТЬИ (.kp-comic) — CLEAN & READABLE
========================================= */

.kp-comic {
font-family: var(--font-body);
color: var(--ink);
line-height: 1.6;
font-size: 18px;
}

.kp-comic__body ul,
.kp-comic__body ol {
margin-bottom: 1.5em;
padding-left: 20px;
}

.kp-comic__body li {
margin-bottom: 8px;
line-height: 1.55;

font-weight: 700;
}

.kp-comic__body ul li::marker {
color: var(--accent);
font-size: 1.2em;
}

.kp-subtle-bg {
background: var(--color-bg)ef0;
border-left: 4px solid var(--accent);
border-radius: 4px;
padding: 16px 20px;
margin: 24px 0;
font-style: normal;
}

.kp-subtle-bg > *:last-child { margin-bottom: 0; }

.kp-footer {

margin-top: 40px;
padding: 20px 0;
font-family: var(--font-body);
color: var(--ink);
}

.kp-footer, .kp-footer * {
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
}

.kp-footer__bg {
background: radial-gradient(circle at 8px 8px, rgba(0,0,0,.06) 2px, transparent 2px) 0 0/16px 16px, var(--paper);
border: var(--stroke) solid var(--ink);
border-radius: calc(var(--radius) + 6px);
padding: clamp(16px, 3vw, 28px);
box-shadow: var(--shadow);
}

.kp-footer__top {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: var(--gap);
}

.kp-footer__brand {
display: inline-block; text-decoration: none;
background: var(--accent); color: var(--ink);
border: var(--stroke) solid var(--ink); border-radius: 12px;
padding: .35em .6em; box-shadow: 6px 6px 0 var(--ink);
font-family: var(--font-head);
font-size: clamp(20px, 3.2vw, 28px); line-height: 1.05;
transform: rotate(-1deg);
}
.kp-footer__tag { margin: 0; font-weight: 700; font-family: var(--font-body); }

.kp-footer__grid {
display: grid; gap: var(--gap);
grid-template-columns: 1fr;
margin-bottom: var(--gap);
}

.kp-footer__col {
background: var(--color-bg);
border: var(--stroke) solid var(--ink);
border-radius: var(--radius);
box-shadow: 6px 6px 0 var(--ink);
padding: 14px 16px 16px;
}

.kp-footer__heading {
display: inline-block;
font-family: var(--font-head);
font-size: 18px; text-transform: uppercase;
background: var(--color-bg);
border: var(--stroke) solid var(--ink); border-radius: 10px;
padding: .25em .6em; margin: 0 0 .8em 0;
}

.kp-footer__list { list-style: none; margin: 0; padding: 0; }
.kp-footer__list li { margin: .45em 0; }
.kp-footer__list a {
text-decoration: none; color: var(--ink); font-weight: 700;
border-bottom: 2px solid transparent;
transition: transform .1s ease, border-color .15s ease, background .15s ease;
padding: 2px 4px; border-radius: 8px; display: inline-block;
}
.kp-footer__list a:hover {
border-color: var(--ink); background: var(--color-bg)be8; transform: translateX(4px);
}

.kp-footer__social { display: flex; gap: 10px; margin-top: .8em; }
.kp-social {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px;
background: var(--color-bg); color: var(--ink);
border: var(--stroke) solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
transition: transform .1s ease, background .15s ease;
}
.kp-social:hover { transform: translateY(-2px); background: var(--accent); }

.kp-footer__form { display: flex; gap: 8px; margin-top: .4em; }
.kp-input {
flex: 1 1 auto; min-width: 0;
background: var(--color-bg); border: var(--stroke) solid var(--ink);
border-radius: 10px; padding: .6em .75em; font-weight: 700;
font-family: var(--font-body);
}
.kp-btn {
background: var(--accent); color: var(--ink);
border: var(--stroke) solid var(--ink);
border-radius: 12px; padding: .6em .9em; font-weight: 700;
box-shadow: 6px 6px 0 var(--ink); cursor: pointer;
transition: transform .1s ease, background .15s ease;
font-family: var(--font-head); text-transform: uppercase;
}
.kp-btn:hover { transform: translateY(-1px); background: var(--accent-hover); }
.kp-footer__note { font-size: .9em; opacity: .9; margin: .6em 0 0; }

.kp-footer__bottom {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
justify-content: space-between;
border-top: var(--stroke) solid var(--ink);
padding-top: 12px;
}
.kp-footer__legal { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; }
.kp-footer__legal a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.kp-footer__legal a:hover { border-color: var(--ink); }

.kp-footer__totop {
background: var(--color-bg);
border: var(--stroke) solid var(--ink);
border-radius: 12px;
width: 42px; height: 42px; line-height: 1;
display: grid; place-items: center;
box-shadow: 6px 6px 0 var(--ink);
font-weight: 700; cursor: pointer;
transition: transform .1s ease, background .15s ease;
}
.kp-footer__totop:hover { background: var(--accent); transform: translateY(-2px); }

#kp-guides .kp-filter {
position: sticky; top: 70px; z-index: 40;
background: var(--color-bg); border: 2px solid var(--ink); border-radius: 12px;
padding: 10px; margin: 12px 0; box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.kp-chip {
display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
border-radius: 99px; border: 2px solid var(--ink); background: var(--color-bg);
font-weight: 700; font-size: 13px; cursor: pointer; margin-right: 8px;
transition: 0.1s;
}
.kp-chip.is-active { background: var(--ink); color: var(--color-bg); }

.kp-artmenu { position: relative; margin: 28px 0 8px; }
.kp-artmenu__wrap { position: relative; padding: 0; }

.kp-artmenu__head {
display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px;
}
.kp-artmenu__title {
margin: 0; font: 800 24px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial; color: var(--color-text);
}

.kp-artmenu__row {

display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 320px);
gap: var(--kp-gap);


overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;



padding: 6px 2px 24px;


scrollbar-width: auto;
scrollbar-color: var(--color-accent) var(--color-bg);
}

.kp-artmenu__row::-webkit-scrollbar {
height: 16px;
}

.kp-artmenu__row::-webkit-scrollbar-track {
background: var(--color-bg);
border: 2px solid var(--color-text);
border-radius: 99px;
margin: 0 20px;
}

.kp-artmenu__row::-webkit-scrollbar-thumb {
background-color: var(--color-accent);
border: 3px solid var(--color-text);
border-radius: 99px;
}

.kp-artmenu__row::-webkit-scrollbar-thumb:hover {
background-color: #d97706;
}

.kp-artcard {
position: relative;
display: flex; flex-direction: column;
background: var(--color-bg);
border: 4px solid var(--color-text);
border-radius: 18px;
text-decoration: none; color: var(--color-text);
scroll-snap-align: start;
outline: none;


box-shadow: 6px 6px 0 var(--color-text);



transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 0.2s ease;


overflow: hidden;
}

.kp-artcard:active {

transform: translate(2px, 2px) !important;
box-shadow: 2px 2px 0 var(--color-text) !important;
transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.kp-artcard__thumb {
position: relative; overflow: hidden;

border-bottom: 4px solid var(--color-text);
aspect-ratio: 16/9; background: var(--color-surface-3);
}

.kp-artcard__thumb img {
width: 100%; height: 100%;
object-fit: cover; display: block;


transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kp-artcard:hover .kp-artcard__thumb img {
transform: scale(1.06);
}

.kp-artcard__badge {
position: absolute; top: 10px; left: 10px;
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px; padding: 0 8px;
border-radius: 8px; background: var(--kp-accent); color: var(--color-text);
font-weight: 700; border: 3px solid var(--color-text);
font-size: 12px;
z-index: 2;
box-shadow: 2px 2px 0 var(--color-text);
}

.kp-artcard__title {
padding: 14px 16px 16px;
font: 900 16px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial;
color: var(--color-text); letter-spacing: .2px;



display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

transition: color 0.2s ease;
}

.kp-artcard:hover .kp-artcard__title {
color: #d97706;
}

.kp-text-small {
font-size: 0.875rem;
line-height: 1.4;
}

.kp-faq__list {
display: grid;
gap: 8px;
}

.kp-faq__item {
border: 1px solid var(--stroke, rgba(0,0,0,.12));
border-radius: 12px;
background: var(--card, rgba(0,0,0,.03));
overflow: hidden;
transition: box-shadow .15s ease, transform .12s ease;
}
.kp-comic__panel--dark {
--kp-faq-stroke: rgba(255,255,255,.18);
}

.kp-faq__item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.06);
transform: translateY(-1px);
}

.kp-faq__q {
cursor: pointer;
padding: 12px 16px;
min-height: 50px;
font-weight: 700;
list-style: none;
position: relative;
color: inherit;
display: flex;
align-items: center;
}

.kp-faq__q::-webkit-details-marker { display: none; }
.kp-faq__q { list-style: none; }
.kp-faq__q::after {
content: "❓";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 1.2em;
transition: transform 0.2s ease;
}

.kp-faq--inline .kp-faq__seo-content {
display: none !important;
}

.kp-swap-q, .kp-swap-a {
display: block;
padding-right: 30px;
width: 100%;
}

.kp-swap-a {
display: none;
opacity: 0;
}

.kp-faq--inline[open] .kp-swap-q {
display: none;
}

.kp-faq--inline[open] .kp-swap-a {
display: block;
opacity: 1;
font-weight: 400;
animation: kpFadeIn 0.3s ease forwards;
line-height: 1.4;
}

.kp-faq--inline[open] .kp-faq__q::after {
content: "↩";
transform: translateY(-50%) rotate(0deg);
}

/* =========================
2. WIDGETS & UI COMPONENTS
========================================== */

.kp-map-legend {
margin: 0 0 8px; display: grid; gap: 6px; padding: 10px;
border: 1px solid rgba(0,0,0,.08); border-radius: 10px; background: var(--color-bg);
font: 500 14px/1.25 var(--font-body);
}
.kp-map-legend__item { display: flex; align-items: center; gap: 8px; }
.kp-legend__dot {
--dot: 14px; flex: 0 0 var(--dot); width: var(--dot); height: var(--dot);
border-radius: 50%; border: 2px solid var(--color-bg); box-shadow: 0 0 0 2px rgba(0,0,0,.15);
background-color: var(--c, #ccc);
}

.kp-legend__dot[data-color="red"], .kp-legend__dot[data-color="warning"] { --c: var(--red); }
.kp-legend__dot[data-color="orange"], .kp-legend__dot[data-color="rental"] { --c: var(--orange); }
.kp-legend__dot[data-color="yellow"], .kp-legend__dot[data-color="carsharing"] { --c: #facc15; }
.kp-legend__dot[data-color="green"], .kp-legend__dot[data-color="free"] { --c: var(--green); }
.kp-legend__dot[data-color="blue"], .kp-legend__dot[data-color="parking"] { --c: #3b82f6; }
.kp-legend__dot[data-color="ev"] { --c: var(--sky); }

.kp-infographic {
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
background: var(--color-bg);
margin: 20px 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
font-family: sans-serif;
}

.kp-info-row {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
}

.kp-mini-image {
flex: 0 0 40%;
max-width: 400px;
height: auto;
border-radius: 8px;
border: 1px solid #eee;
cursor: zoom-in;
display: block;
}

.kp-weather-table {
flex: 1;
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
line-height: 1.35;
font-family: sans-serif;
}

.kp-weather-table th {
background: #2c3e50;
color: var(--color-bg);
padding: 8px 10px;
text-align: left;
font-weight: 400;
font-size: 0.75rem;
text-transform: uppercase;
}

.kp-weather-table td {
padding: 10px;
border-bottom: 1px solid #eee;
vertical-align: middle;
color: #333;
}


.kp-weather-table tr:last-child td {
border-bottom: none;
}

.step-1 { border-left: 4px solid #3498db; background: #f0f8ff; }
.step-2 { border-left: 4px solid #f1c40f; background: var(--color-bg)df0; }
.step-3 { border-left: 4px solid #e74c3c; background: var(--color-bg)5f5; }
.step-4 { border-left: 4px solid #95a5a6; background: #f9f9f9; }

.kp-zoom-modal {
display: none;
position: fixed;
z-index: 99999;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}

.kp-zoom-content {
margin: auto;
display: block;
width: 90%;
max-width: 1200px;
max-height: 85vh;
object-fit: contain;
}

.kp-zoom-close {
position: absolute;
top: 20px;
right: 35px;
color: var(--color-bg);
font-size: 40px;
font-weight: bold;
cursor: pointer;
line-height: 1;
}

.kp-tablewrap {
background: var(--paper);
border: var(--stroke) solid var(--ink);
border-radius: 12px;
box-shadow: var(--shadow);
margin: 0 0 40px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
position: relative;
}

.kp-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 600px;
}

.kp-table th, .kp-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--ink);
border-right: 1px solid var(--ink);
vertical-align: middle;
font-family: var(--font-body);
color: var(--ink);
font-size: 15px;
}

.kp-table thead th {
background: var(--comic-accent);
font-family: var(--font-head);
font-weight: 400;
text-transform: uppercase;
font-size: 16px;
border-bottom: var(--stroke) solid var(--ink);
border-top: 0;
}

.kp-table tbody tr:last-child td { border-bottom: none; }
.kp-table tbody tr td:last-child { border-right: none; }
.kp-table thead th:last-child { border-right: none; }

.smart-price-container {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.2;
}

.price-old {
text-decoration: line-through;
color: var(--price-old-color);
font-size: 0.85em;
font-weight: 400;
}

.price-new {
color: var(--price-new-color);
font-weight: 400;
font-size: 1.15em;
white-space: nowrap;
}

.kp-table caption.visually-hidden{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
overflow: hidden;
caption-side: bottom;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: normal;
}

.kp-note__tabs,
.kp-season__switch {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}

.kp-note__tab,
.kp-season__switch button {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 5px 14px;


font-family: var(--font-head);
font-size: 10px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: var(--paper);
color: var(--ink);
border: 2px solid var(--color-text);


box-shadow: 2px 2px 0px var(--color-text);

cursor: pointer;
transition: all 0.15s ease;
}

.kp-season__switch button:hover{background-color:var(--color-surface-2);transform:translateY(-1px);box-shadow:3px 3px 0 var(--ink);}

.kp-season__switch button.is-active{background-color:var(--comic-accent);color:var(--ink);border-color:var(--ink);box-shadow:none;transform:translate(2px,2px);}

.kp-note__tab:hover {
background-color: var(--color-surface);
transform: translate(-1px, -1px);
box-shadow: 5px 5px 0px var(--comic-ink);
}

.kp-note__tab.is-active {
background-color: var(--comic-accent);
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px var(--comic-ink);
}

.kp-note__tab:focus-visible {
outline: 2px dashed var(--comic-ink);
outline-offset: 4px;
}

.kp-note__panes {
position: relative;
display: grid;
grid-auto-rows: 1fr;
height: var(--note-max-h, 200px);
overflow: hidden;


--note-hint-bg: var(--paper, var(--color-bg)ef7);

border: none;
background: transparent;
box-shadow: none;
border-radius: 0;
}

.kp-note__pane {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease;
height: 100%;
overflow-y: auto;

padding: 0;
padding-right: 8px;


scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.25) transparent;
}
.kp-note__pane.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.kp-note__pane::-webkit-scrollbar {
width: 6px;
}
.kp-note__pane::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.25);
border-radius: 6px;
}
.kp-note__pane::-webkit-scrollbar-track {
background: transparent;
}

.kp-note__panes::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height: 34px;
pointer-events:none;
z-index:2;

background: linear-gradient(
to bottom,
color-mix(in srgb, var(--note-hint-bg) 0%, transparent) 0%,
color-mix(in srgb, var(--note-hint-bg) 80%, transparent) 80%,
var(--note-hint-bg) 100%
);

opacity: .9;
transform: translateY(0);
transition: transform .22s ease, opacity .22s ease;
}

.kp-note__panes:hover::after{
transform: translateY(6px);
opacity: 1;
}

.kp-resorts { margin-top: 24px; }

.kp-resorts__panes {
position: relative; margin-top: 16px;
min-height: var(--resorts-max-h, 150px);
}

.kp-resorts__pane {
position: absolute; inset: 0;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.2s ease;
}
.kp-resorts__pane.is-active {
position: relative; opacity: 1; visibility: visible; pointer-events: auto;
}

.kp-dashboard {
width: 100%;
box-sizing: border-box;
background: var(--kp-bg);
color: var(--kp-paper);
border-radius: 16px;
padding: 24px;
margin-bottom: 30px;
font-family: var(--font-body);
overflow: hidden;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.kp-dash-title,
.kp-dashboard h2,
.kp-dashboard h3,
.kp-breaking-label,
.kp-season__label,
.kp-pricing__select {
font-family: var(--font-head);
font-weight: 400;
}

.kp-dash-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 12px;
}

.kp-dash-title {
margin: 0;
font-family: var(--font-head);
font-size: 32px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.kp-dash-time {
font-family: monospace;
font-size: 13px;
color: var(--kp-accent);
border: 1px solid var(--kp-accent);
background: rgba(0,0,0,0.3);
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
}

.kp-breaking-news {
background: var(--kp-accent, #f5e320);
color: var(--color-text);
height: 44px;
display: flex;
align-items: center;
margin-bottom: 24px;
border-radius: 4px;
position: relative;
font-weight: 700;
text-transform: uppercase;
overflow: hidden;
}

.kp-breaking-label {
background: var(--color-text);
color: var(--kp-accent, #f5e320);
padding: 0 16px;
height: 100%;
display: flex;
align-items: center;
font-size: 13px;
letter-spacing: 0.5px;
z-index: 2;
position: relative;
flex-shrink: 0;
}

.kp-breaking-label::after {
content: '';
position: absolute;
top: 0;
right: -14px;
border-top: 44px solid var(--color-text);
border-right: 14px solid transparent;
width: 0;
z-index: 3;
}

.kp-ticker-wrap {
width: 100%;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 20px);
-webkit-mask-image: linear-gradient(to right, transparent, black 20px);
white-space: nowrap;
display: flex;
}

.kp-ticker-move {
display: inline-block;
white-space: nowrap;
padding-left: 0;
will-change: transform;

animation: kp-ticker 150s linear infinite;
}

.kp-ticker-item {
display: inline-flex;
align-items: center;
padding-right: 80px;
font-size: 14px;
}

.kp-status-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
vertical-align: middle;

border: 1px solid rgba(0,0,0,0.1);
animation: kp-pulse 2s infinite ease-in-out;
}

.is-open { background-color: #2fd32f; box-shadow: 0 0 8px rgba(47, 211, 47, 0.6); }

.is-warning { background-color: #ff8c00; box-shadow: 0 0 8px rgba(255, 140, 0, 0.6); }
.is-closed { background-color: #ff3b30; box-shadow: 0 0 5px rgba(255, 59, 48, 0.4); }

.kp-stats-box {
background: var(--color-text);
color: var(--color-bg);
border-radius: 4px;
padding: 3px 8px;
margin-left: 10px;

display: inline-flex;
align-items: center;
gap: 8px;

font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
line-height: 1;
}

.kp-stats-sep {
width: 1px;
height: 10px;
background: rgba(255,255,255,0.3);
}

.kp-stats-box svg {
width: 24px;
height: 24px;
stroke: var(--color-bg);
stroke-width: 3;
margin-right: 4px;
vertical-align: -1px;
}

.kp-weather-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 24px;
}

.kp-card {

background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s, background 0.2s;
}

.kp-card:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}

.kp-card-top {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 8px;
}

.kp-card-top span:first-child {
font-family: monospace;
color: var(--kp-accent);
font-size: 11px;
background: rgba(0,0,0,0.3);
padding: 2px 6px;
border-radius: 4px;
align-self: center;
}

.kp-card-top span:last-child {
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
color: var(--color-bg);
letter-spacing: 0.5px;
}

.kp-card-main {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
}

.kp-temp {
font-size: 28px;
font-weight: 400;
color: var(--color-bg);
line-height: 1;
}

.kp-icon {
width: 32px;
height: 32px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

filter: brightness(0) invert(1);
opacity: 0.8;
}

.kp-params {
display: flex;
gap: 12px;
font-size: 12px;
color: var(--kp-ink-muted);
margin-top: auto;
}

.kp-cams-grid {

--kp-cols: 3;

display: grid;

grid-template-columns: repeat(var(--kp-cols), 1fr);
gap: 16px;
margin-bottom: 24px;
}

.kp-cam {
position: relative;
aspect-ratio: 16/9;
background: var(--color-text);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.2s, box-shadow 0.2s;

transform: translateZ(0);
}

.kp-cam:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
z-index: 5;
}

.kp-cam-poster {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 1;
transition: opacity 0.3s;
}

.kp-cam-header-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 60px;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
z-index: 2;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 10px 12px;
pointer-events: none;
}

.kp-cam-label {
font-size: 13px;
font-weight: 600;
color: var(--color-bg);
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.kp-cam-alt {
font-size: 11px;
font-family: monospace;
color: var(--kp-accent, #f5e320);
background: rgba(0,0,0,0.6);
padding: 2px 6px;
border-radius: 4px;
}

.kp-play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
border: 2px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}

.kp-play-btn::after {
content: '';
display: block;
width: 0; height: 0;
border-style: solid;
border-width: 8px 0 8px 14px;
border-color: transparent transparent transparent var(--color-bg);
margin-left: 4px;
}

.kp-cam:hover .kp-play-btn {
background: var(--kp-accent, #f5e320);
border-color: var(--kp-accent, #f5e320);
transform: translate(-50%, -50%) scale(1.1);
}
.kp-cam:hover .kp-play-btn::after {
border-color: transparent transparent transparent var(--color-text);
}

.kp-cam-live {
position: absolute;
top: 10px; left: 10px;
font-size: 9px;
font-weight: 400;
color: var(--color-bg);
background: rgba(220, 38, 38, 0.9);
padding: 2px 6px;
border-radius: 4px;
z-index: 3;
pointer-events: none;
display: none;
}

.kp-cam iframe {
position: absolute;
inset: 0;
width: 100%; height: 100%;
border: 0;
z-index: 0;
opacity: 0;
pointer-events: none;
}

.kp-cam.is-active .kp-cam-poster,
.kp-cam.is-active .kp-play-btn,
.kp-cam.is-active .kp-cam-header-overlay {
opacity: 0;
pointer-events: none;
}

.kp-cam.is-active iframe {
z-index: 10;
opacity: 1;
pointer-events: auto;
}
.kp-pricing__toolbar {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--kp-stroke);
border-radius: 12px;
padding: 16px 20px;
display: flex;
align-items: flex-end;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
align-items: stretch;
}

.kp-pricing__group {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 100%;
min-width: 100%;
}

.kp-season__label {
color: var(--kp-accent);
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}

.kp-pricing__select-wrap {
position: relative;
width: 100%;
}

.kp-pricing__select {
width: 100%;
height: 48px;
box-sizing: border-box;

background-color: var(--kp-paper);
color: var(--kp-ink);

border: 1px solid transparent;
border-radius: 8px;
padding: 0 40px 0 16px;

font-family: inherit;
font-size: 15px;
font-weight: 400;

cursor: pointer;
appearance: none;
-webkit-appearance: none;


background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px;

transition: box-shadow 0.2s, transform 0.1s;
}

.kp-pricing__select:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(245, 227, 32, 0.5);
}

/* ==========================================
3. NAVIGATION (MENU) & BURGER (FINAL)
========================================== */
.kp-nav {
position: sticky; top: 0; z-index: 50;
}

.kp-nav__bar {
background: rgba(255, 254, 247, 0.9);
border-bottom: var(--stroke) solid var(--ink);
box-shadow: 0 4px 0 var(--ink);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.kp-nav__container { max-width: 1400px; margin: 0 auto; padding: 10px 14px; }
.kp-nav__grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: center; }

.kp-nav__brand {
display: inline-block; text-decoration: none; color: var(--ink);
background: var(--accent); border: var(--stroke) solid var(--ink);
border-radius: 8px; padding: .25em .5em; box-shadow: 4px 4px 0 var(--ink);
transform: rotate(-1deg); transition: 0.15s;
}
.kp-nav__brand:hover { transform: rotate(0deg) scale(1.02); }

.kp-nav__brand-text {
font-family: var(--font-head); font-size: clamp(18px, 3.5vw, 24px);
line-height: 1; text-transform: uppercase;
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
}

.kp-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.kp-nav__link {
display: inline-block;
text-decoration: none;


font-family: var(--font-head) !important;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .6px;
font-size: 13px;
line-height: 1.1;

color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;

background: var(--color-bg);
border: 2px solid var(--ink);
border-radius: 8px;
padding: .35em .6em;
transition: 0.15s;
}
.kp-nav__list,
.kp-nav .kp-file-item{
margin-top: 8px;
}

.kp-nav__link:hover {
transform: translateY(-2px); background: var(--color-bg)be8; box-shadow: 2px 2px 0 var(--ink);
}
.kp-nav__link.is-active { background: var(--accent); border-width: 3px; }

.kp-nav__btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-head); text-transform: uppercase;
background: var(--accent); color: var(--ink);
border: var(--stroke) solid var(--ink); border-radius: var(--radius);
padding: .4em .7em; box-shadow: 4px 4px 0 var(--ink);
text-decoration: none; cursor: pointer; transition: 0.15s;
}
.kp-nav__btn:hover { background: var(--accent-hover); transform: translateY(-2px); }

.kp-burger {
all: unset; cursor: pointer;
position: relative;
z-index: 1001;
width: 44px; height: 44px;
display: inline-grid; place-items: center;
background: var(--color-bg);
border: var(--stroke) solid var(--ink);
border-radius: 8px;
box-shadow: 4px 4px 0 var(--ink);
transition: transform 0.2s ease, opacity 0.2s ease;
}

.kp-burger__line {
position: absolute; left: 9px; right: 9px; height: 3px;
background: var(--ink); border-radius: 2px;
transition: 0.2s ease;
}
.kp-burger__line:nth-child(1) { top: 13px; }
.kp-burger__line:nth-child(2) { top: 20px; }
.kp-burger__line:nth-child(3) { top: 27px; }

.kp-nav.is-open .kp-burger {
opacity: 0;
pointer-events: none;
}

.kp-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(0,0,0,0.1);
}

.kp-drawer__title {
font-family: var(--font-head);
font-size: 24px; color: var(--ink); text-transform: uppercase;
}

.kp-close-btn {
appearance: none; border: none; outline: none;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: var(--accent);
border: var(--stroke) solid var(--ink);
border-radius: 8px;
box-shadow: 4px 4px 0 var(--ink);
color: var(--ink); cursor: pointer;
transition: transform 0.1s ease;
}
.kp-close-btn:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--ink);
}

.kp-close-btn svg {
width: 24px; height: 24px;
}

/* ==========================================================================
4. HERO SECTION & DROPDOWNS (ГЕРОЙ + ВЫПАДАЮЩИЕ КНОПКИ)
========================================================================== */

.kp-hero2{

--hero2-height: clamp(420px, 58vh, 760px);
--hero2-pt: clamp(140px, 16vh, 220px);
--hero2-pb: clamp(48px, 8vh, 96px);
--hero2-pos: 50% 50%;
--hero2-dark: .35;


--hero2-nudge-x: 0px;
--hero2-nudge-y: 0px;
--hero2-content-align: center;
--hero2-col-start: 1;
--hero2-col-end: 8;


--hero2-nudge-x-m: var(--hero2-nudge-x);
--hero2-nudge-y-m: var(--hero2-nudge-y);
--hero2-content-align-m: var(--hero2-content-align);
--hero2-slot-pad-m: clamp(8px, 3vw, 14px);

position: relative;
color:var(--color-bg);
min-height: var(--hero2-height);
padding-block: var(--hero2-pt) var(--hero2-pb);
text-align:left;

border:6px solid var(--ink);
border-radius:28px;
background-color: var(--paper);

background-position: var(--hero2-pos);
background-repeat:no-repeat;
background-size:cover;

overflow:visible;
}

.kp-hero2::after{
content:"";
position:absolute;
inset:0;
background: rgb(0 0 0 / var(--hero2-dark, .35));
border-radius: inherit;
pointer-events:none;
}

.kp-hero2--bg{
background-image: var(--hero2-img, var(--hero2-bg-16x9-1x));
}

.kp-hero2__container{
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding-inline: clamp(12px, 3vw, 20px);
}

.kp-hero2__grid-12{
display:grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(10px, 1.4vw, 16px);
min-height: inherit;
align-content: var(--hero2-content-align, center);
padding-bottom: clamp(8px, 2vh, 20px);
}

.kp-hero2{ overflow-x: clip; }

.kp-hero2__slot{
grid-column-start: var(--hero2-col-start, 1);
grid-column-end: var(--hero2-col-end, 8);

transform: translate3d(
var(--hero2-nudge-x, 0px),
var(--hero2-nudge-y, 0px),
0
);
will-change: transform;

box-sizing: border-box;
max-width: 100%;
}

.kp-hero2__slot > *{
max-width: 100%;
box-sizing: border-box;
}

.kp-hero2__actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: nowrap;

position: relative;
z-index: 20;

overflow: visible;
}

.kp-hitem {
position: relative;
display: inline-block;
perspective: 800px;
z-index: 1;
}

.kp-hitem:hover,
.kp-hitem.is-open {
z-index: 100;
}

.kp-hbtn {

z-index: 20;


--spine-color: var(--accent, #FF5E00);
--spine-width: 6px;

position: relative;
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 24px 0 calc(var(--spine-width) + 16px);

font-family: var(--font-head, sans-serif);
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ink, var(--color-text)) !important;
text-decoration: none;
white-space: nowrap;
cursor: pointer;


background: linear-gradient(90deg, color-mix(in srgb, var(--spine-color) 15%, var(--color-bg)) 0%, var(--color-bg) 100%);
border: 2px solid var(--ink, var(--color-text));
border-radius: 6px;


box-shadow: 4px 4px 0 var(--ink, var(--color-text));


transform-origin: 50% 100%;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.3s ease,
background 0.2s;
}

.kp-hbtn::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: var(--spine-width);
background: var(--spine-color);
border-right: 2px solid var(--ink, var(--color-text));
border-radius: 4px 0 0 4px;
}

.kp-hitem:hover .kp-hbtn,
.kp-hitem.is-open .kp-hbtn {
transform: rotateX(-12deg);
box-shadow: 0 12px 20px -6px rgba(0,0,0,0.25);
background: linear-gradient(90deg,
color-mix(in srgb, var(--spine-color) 20%, var(--color-bg)) 0%,
#f3f4f6 100%);
}

.kp-hdd {
z-index: 10;

position: absolute;
left: 0;
bottom: calc(100% + var(--kp-hdd-gap));

min-width: 220px;
background: var(--color-bg);
border: 2px solid var(--ink, var(--color-text));
border-radius: 6px;
box-shadow: 6px 6px 0 rgba(0,0,0,0.15);

padding: 10px 0;
display: flex;
flex-direction: column;
gap: 2px;


opacity: 0;
visibility: hidden;
pointer-events: none;


transform:
translateY(18px)
translateX(-8px)
scale(.96)
rotateZ(7deg);

transform-origin: bottom left;

will-change: transform, opacity;

transition:
opacity .18s ease,
transform .52s cubic-bezier(.22,.61,.36,1),
visibility 0s linear .52s;
}

.kp-hitem:hover .kp-hdd,
.kp-hitem.is-open .kp-hdd {
opacity: 1;
visibility: visible;
pointer-events: auto;


transform:
translateY(0)
translateX(0)
scale(1)
rotateZ(-4deg);

transition-delay: 0s, 0s, 0s;
}

.kp-hdd__link{
display:block;
padding:8px 16px;

font-family: var(--font-head) !important;
font-size: 13px;
font-weight: 200;
letter-spacing: .5px;
line-height: 1.25;

color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
text-decoration:none !important;

text-transform: uppercase;

border-left:3px solid transparent;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.kp-hdd__link *{
font-family: inherit !important;
color: inherit !important;
-webkit-text-fill-color: inherit !important;
text-transform: inherit !important;
}

.kp-hdd__link:visited{
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
}

.kp-hdd__link:hover,
.kp-hdd__link:focus-visible{
background:#eef0f3;
color: var(--ink) !important;
border-left-color: var(--accent);
outline: none;
}

.kp-nav__backdrop{
position:fixed; inset:0;
background:rgba(0,0,0,.55);
z-index:1500;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .3s ease, visibility 0s linear .3s;
}

.kp-nav.is-open .kp-nav__backdrop{
opacity:1;
visibility:visible;
pointer-events:auto;
transition-delay:0s,0s;
}

.kp-hero__cards {
position: absolute; left: 66%; top: 60%;
transform: translate(-50%, 70%);
width: min(880px, calc(100% - clamp(24px, 6vw, 64px)));
display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr));
z-index: 5; perspective: 1000px;
}

.kp-hcard {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
min-height: 130px;
padding: 16px;
border-radius: 6px;
text-decoration: none;
text-align: left;

--card-local: var(--accent);

background: linear-gradient(
90deg,
color-mix(in srgb, var(--card-local) 15%, var(--color-bg)) 0%,
var(--color-bg) 100%
);

color: var(--ink) !important;
border: 3px solid var(--ink);
box-shadow: 6px 6px 0 var(--ink);

transform-origin: left center;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.kp-hcard::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 12px;

background: linear-gradient(
180deg,
var(--card-local) 0%,
color-mix(in srgb, var(--card-local), var(--color-text) 15%) 100%
);

border-right: 3px solid var(--ink);
z-index: 1;
}

.kp-hcard:hover {
transform: rotateY(-12deg) translateY(-5px);
box-shadow: 15px 20px 10px rgba(0,0,0,0.15), 6px 6px 0 var(--ink);


background: linear-gradient(
90deg,
color-mix(in srgb, var(--card-local) 25%, var(--color-bg)) 0%,
var(--color-bg) 100%
);
z-index: 10;
}

.kp-hcard__title {
margin-left: 14px; font-family: var(--font-head);
font-weight: 400; font-size: clamp(16px, 2.2vw, 22px); line-height: 1.1;
text-transform: uppercase; z-index: 2; pointer-events: none;
}

.kp-hcard__icon { width: 40px; height: 40px; margin-left: 14px; z-index: 2; }

.kp-hcard__icon svg {
width: 100%; height: 100%;
stroke: var(--card-local);
stroke-width: 2.5; fill: none;
}

.kp-hcard.is-amber { --card-local: #ffb400; }
.kp-hcard.is-sky   { --card-local: #39b7ff; }
.kp-hcard.is-green { --card-local: #00e676; }

.kp-menu-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;

list-style: none !important;
padding: 0 !important;
margin: 0 !important;

width: auto;
max-width: 100%;
position: relative;
z-index: 10;
}

.kp-file-item {
position: relative;
display: inline-flex;
align-items: center;
height: auto;

perspective: 1000px;
z-index: 1;
margin: 0;
}

.kp-file-item:hover {
z-index: 100;
}

.kp-file-btn {

--btn-stroke: 1.5px;
--btn-shadow: 2px;
--btn-radius: 6px;
--spine-width: 6px;

--card-local: var(--accent);

position: relative;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;

min-height: 26px;

padding: 4px 12px 4px calc(var(--spine-width) + 10px);

white-space: nowrap;
font-family: var(--font-head);


font-size: 12px;
letter-spacing: 0.8px;
font-weight: 400;
text-transform: uppercase;
line-height: 1;
color: var(--ink);

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
appearance: none;


background: linear-gradient(
90deg,
color-mix(in srgb, var(--card-local) 15%, var(--color-bg)) 0%,
var(--color-bg) 100%
);


border: var(--btn-stroke) solid var(--ink);
border-radius: var(--btn-radius);
box-shadow: var(--btn-shadow) var(--btn-shadow) 0 var(--ink);

cursor: pointer;
transform-origin: 50% 0%;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;

transition:
transform .2s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow .2s cubic-bezier(0.2, 0.8, 0.2, 1),
background .15s;
}

.kp-file-btn::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--spine-width);
background: var(--card-local);
border-right: var(--btn-stroke) solid var(--ink);
border-radius: calc(var(--btn-radius) - var(--btn-stroke)) 0 0 calc(var(--btn-radius) - var(--btn-stroke));

z-index: 1;
}

.kp-file-btn svg {
width: 10px; height: 10px;
flex-shrink: 0;
transition: transform .2s ease;
opacity: 0.8;
stroke-width: 2.5px;
}
.kp-file-drop {
position: absolute;
left: 0;
min-width: 190px;
width: max-content;

background: var(--paper);
border: 1.5px solid var(--ink);
border-radius: 6px;
box-shadow: 3px 3px 0 rgba(0,0,0,0.15);

padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;

z-index: 5;
top: 100%;
margin-top: -10px;
padding-top: 26px;

opacity: 0;
visibility: hidden;
pointer-events: none;

transform-origin: top left;
transform: translateY(-15px) rotateX(-10deg) rotateZ(-3deg);

transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}

.kp-file-item:hover .kp-file-btn,
.kp-file-item:focus-within .kp-file-btn,
.kp-file-item.is-open .kp-file-btn {

background: linear-gradient(
90deg,
color-mix(in srgb, var(--card-local) 25%, var(--color-bg)) 0%,
var(--color-bg) 100%
);

transform: rotateX(12deg) translateZ(0);
box-shadow: 0 6px 12px -3px rgba(0,0,0,0.1);
z-index: 20;
}

.kp-file-item:hover .kp-file-btn svg,
.kp-file-item.is-open .kp-file-btn svg {
transform: rotate(180deg);
}

.kp-file-item:hover .kp-file-drop,
.kp-file-item:focus-within .kp-file-drop,
.kp-file-item.is-open .kp-file-drop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) rotateX(0deg) rotateZ(4.5deg);
}

.kp-file-link {
display: block;
padding: 9px 14px;
font-family: var(--font-head) !important;
font-weight: 400;
font-size: 13px !important;
line-height: 1.15;
letter-spacing: .6px;
text-transform: uppercase;
white-space: nowrap;
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
text-decoration: none !important;
border: none !important;
background-image: none !important;
opacity: 1 !important;
transition: background .15s ease, color .15s ease;
}

.kp-file-link:hover {
background: var(--color-surface-2) !important;
color: var(--color-text) !important;

text-shadow: 0 0 0.5px rgba(0,0,0,0.1);
}

.kp-file-btn{ --card-local: var(--accent); }
/* ==========================================================================
5. TOC (GTA STYLE) — COMPACT
========================================================================== */
.kp-toc2 {
  position: sticky; top: 0px; z-index: 40;
  margin: 10px 0;
}

.kp-toc2__container {
  max-width: 100%; margin: 0 auto;
  padding-inline: clamp(10px, 2.5vw, 18px);
}

.kp-toc2__wrap {
  display: flex; flex-wrap: wrap;
  justify-content: center;

  gap: 8px;
  padding: 10px;
  border-radius: 12px;

  background: rgba(var(--color-bg-rgb), .92);
  border: 2px solid var(--color-text);
  box-shadow: 5px 5px 0 var(--color-text);
}

.kp-toc2__btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  text-transform: uppercase;

  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.04em;

  color: var(--color-text) !important;
  background: var(--color-bg);
  border: 2px solid var(--color-text);
  border-radius: 7px;
  padding: 0.5em 1.0em;
  box-shadow: 2px 2px 0 var(--color-text);

  text-decoration: none; cursor: pointer; user-select: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s;
}

.kp-toc2__btn:hover {
  background: var(--color-bg);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--color-text);
}

.kp-toc2__btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-text);
}

.kp-toc2__hint { display: none; }

/* ==========================================================================
4. КОНТЕНТ СТРАНИЦЫ И ПОДВАЛ (FINAL BLOCK)
========================================================================== */
.kp-breadcrumbs {
margin: 8px 0 14px;
--bc-ink: var(--ink);
--bc-dim: rgba(0,0,0,.55);
}
.kp-breadcrumbs__list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.kp-breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; }

.kp-breadcrumbs__link {
color: var(--bc-dim); text-decoration: none; font-weight: 700; font-size: 14px;
border: none; background: none; padding: 0; transition: 0.2s;
}
.kp-breadcrumbs__link:hover { color: var(--bc-ink); text-decoration: underline; }

.kp-breadcrumbs__current { font-weight: 700; color: var(--bc-ink); font-size: 14px; }

.kp-breadcrumbs__sep::before { content: "›"; color: var(--bc-dim); font-weight: 400; }

.kp-hotel__photo {
position: relative; width: 100%;
padding-top: 56.25%;
border-radius: 12px; margin-top: 20px; overflow: hidden;
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
}
.kp-hotel__photo img {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

/* =========================
“Лист” комикса (фон, рамка)
========================= */
.kp-comic .kp-comic__bg{
position:relative;
background:
radial-gradient(circle at 8px 8px,rgba(0,0,0,.06) 2px,transparent 2px) 0 0/16px 16px,
var(--paper);
border:var(--stroke) solid var(--ink);
border-radius:calc(var(--radius) + 6px);
padding:clamp(16px,3vw,28px);
}

.kp-comic .kp-comic__narration {
--panel-width: 1200px;

background: var(--paper);
border: var(--stroke) solid var(--ink);
border-radius: 12px;
box-shadow: 6px 6px 0 var(--ink);
font-weight: 200;
margin-bottom: var(--gap);
margin-top: 1em;

box-sizing: border-box;
padding: 10px;
}

.kp-comic .kp-comic__narration.is-wide {
--panel-width: 1400px;
}

.kp-comic__narration p + p { margin-top: 1.2em; }

.kp-comic .kp-comic__panels{ display:grid; grid-template-columns:1fr; gap:var(--gap); }

.kp-comic__panels + .kp-comic__panels { margin-top: 32px; }

.kp-comic .kp-comic__panel{
background:var(--paper);
border:var(--stroke) solid var(--ink);
border-radius:var(--radius);
box-shadow:6px 6px 0 var(--ink);
display:grid;
grid-template-rows:auto 1fr;
min-height:260px;
}

.kp-comic__panel:target {
animation: kp-ping 10s ease;
}

.kp-comic .kp-comic__media{
--radius: 12px;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 16/9;
background: #f2f2f2;
position: relative;
margin:15px 0 15px
}

.kp-comic .kp-comic__media img{
width:100%; height:100%; object-fit:cover; display:block;
}

.kp-link{
color:#0057ff !important;
font-weight: 700;
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:.15em;
transition:
color .15s ease,
background .15s ease,
box-shadow .15s ease,
text-decoration-thickness .15s ease;
}

.kp-link:hover{
color:#003ec9 !important;
background:rgba(0,87,255,.08);
box-shadow:0 0 0 3px rgba(0,87,255,.08);
border-radius:4px;
text-decoration-thickness:3px;
}

.kp-comic .kp-comic__cta,
.kp-comic .kp-comic__cta:link,
.kp-comic .kp-comic__cta:visited,
.kp-comic .kp-comic__cta:hover,
.kp-comic .kp-comic__cta:active{
display:inline-block; margin-top:var(--gap);
text-decoration:none; color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
background:var(--accent);
border:var(--stroke) solid var(--ink); border-radius:14px;
padding:.7em 1rem; box-shadow:6px 6px 0 var(--ink);
font-weight: 400; transform:translateY(0); transition:transform .15s ease;
}
.kp-comic .kp-comic__cta:hover{ transform:translateY(-2px); }
.kp-comic .kp-comic__cta *, .kp-comic .kp-comic__cta svg, .kp-comic .kp-comic__cta svg *{
color:currentColor !important; fill:currentColor !important; stroke:currentColor !important;
}

.kp-map-wrapper {
position: relative;
width: 100%;
background: var(--color-text);
border: 2px solid var(--color-text);
box-shadow: 6px 6px 0px rgba(0,0,0,0.2);
overflow: hidden;
aspect-ratio: 16/9;
}

.kp-map-wrapper.is-fullscreen {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 99999;
width: 100vw;
height: 100dvh;
box-sizing: border-box;
padding-bottom: calc(env(safe-area-inset-bottom) + 0px);
border: none;
border-radius: 0;
box-shadow: none;
background: var(--color-text);
}

.kp-map-wrapper.is-fullscreen .kp-map-iframe {
height: 100%;
width: 100%;
position: relative;
}

.kp-map-preview {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
z-index: 10;
display: flex;

justify-content: center;
align-items: center;
transition: opacity 0.3s;
}
.kp-map-wrapper.is-loaded .kp-map-preview {
opacity: 0;
pointer-events: none;
}

.kp-map-load-btn {
background: var(--color-accent);
color: var(--color-text);
font-weight: 900;
text-transform: uppercase;
padding: 15px 30px;
border: 3px solid var(--color-text);
box-shadow: 4px 4px 0px var(--color-text);
display: flex;
align-items: center;
gap: 10px;
transition: transform 0.1s;
}
.kp-map-preview:hover .kp-map-load-btn { transform: scale(1.05); }

.kp-map-iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none;
background: #111;
z-index: 5;
}

.kp-fs-btn {
position: absolute;
top: 15px; right: 15px;
width: 40px; height: 40px;
background: var(--color-bg);
border: 2px solid var(--color-text);
box-shadow: 2px 2px 0px var(--color-text);
z-index: 20;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}

.kp-fs-btn:hover { background: #f0f0f0; }
.kp-map-wrapper.is-fullscreen .kp-fs-btn { background: var(--color-accent); }

.kp-alert-warning {
background-color: var(--color-bg)8e1;
border-left: 4px solid #f5c518;
color: #333;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
font-size: 0.95rem;
line-height: 1.5;
}

.kp-trust-box {
display: flex;
align-items: center;
background-color: #f0fdf4;
border: 1px solid #bbf7d0;
padding: 12px 16px;
border-radius: 8px;
margin: 20px 0;
color: #166534;
}

.kp-trust-icon {
margin-right: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
}

.kp-trust-icon svg {
width: 32px;
height: 32px;
fill: #166534;
}

.kp-badge-hot {
background-color: #dc2626;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle;
margin-left: 8px;
}

.kp-cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 15px;
}

.kp-btn-contact {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 20px;
border-radius: 8px;
text-decoration: none !important;
font-weight: 400;
color: white !important;
transition: opacity 0.2s;
text-align: center;
}
.kp-btn-contact:hover { opacity: 0.9; }
.kp-btn-tg { background-color: #2481cc; }
.kp-btn-wa { background-color: #25D366; }

/* --------------------------
   ANIMATIONS
-------------------------- */

@keyframes kp-ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes kp-pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}

@keyframes kpFadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes kp-ping {
0%   { box-shadow:6px 6px 0 var(--ink); }
30%  { box-shadow:0 0 0 4px var(--ink), 0 0 0 10px var(--accent), 6px 6px 0 var(--ink); }
100% { box-shadow:6px 6px 0 var(--ink); }
}

/* --------------------------
   MEDIA QUERIES
-------------------------- */

@media (max-width: 1200px) {
.kp-artmenu__wrap { padding: 0 48px; }
.kp-artmenu__row { grid-auto-columns: minmax(260px, 300px); }
}

@media (max-width: 1024px) { .kp-hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 960px) {


.kp-menu-list {
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
}


.kp-file-item {
display: block;
width: 100%;
margin-bottom: 4px;
}


.kp-file-btn {
width: 100%;
display: flex;
justify-content: space-between;

font-size: 12px;
padding: 10px 16px 10px calc(var(--spine-width) + 12px);
height: auto;
min-height: 44px;
}


.kp-file-btn,
.kp-file-item:hover .kp-file-btn,
.kp-file-item.is-open .kp-file-btn {
transform: none !important;
box-shadow: 2px 2px 0 var(--ink);
background: var(--paper);
}


.kp-file-drop {
position: static;
width: 100%;
min-width: 100%;

transform: none !important;
opacity: 1;
visibility: visible;
pointer-events: auto;


box-shadow: none;
border: none;
border-left: 2px solid var(--card-local);
border-radius: 0 0 6px 6px;
background: rgba(255,255,255, 0.5);

margin-top: 0;
padding: 0 0 0 12px;


display: none;
}


.kp-file-item.is-open .kp-file-drop {
display: flex;
animation: mobileFadeIn 0.2s ease;
}

@keyframes mobileFadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}


.kp-file-link {
padding: 12px 16px;
font-size: 14px !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
color: var(--color-text) !important;
}

.kp-file-link:last-child {
border-bottom: none !important;
}
}

@media (max-width: 960px) {
.kp-artmenu__wrap { padding: 0 36px; }
.kp-artmenu__row { gap: 14px; grid-auto-columns: 72vw; }
.kp-artmenu__title { font-size: 22px; }
}

@media (max-width: 899px){
.kp-hero2__h1{
font-size: clamp(24px, 7.8vw, 38px);
line-height: 1.12;
}
.kp-hero2__h1 .text-amber{
font-size: .95em;
}
}

@media (max-width: 899px) {
.kp-tablewrap {

mask-image: linear-gradient(90deg, var(--color-text) 85%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, var(--color-text) 85%, transparent 100%);
}
.kp-table th, .kp-table td { padding: 10px 12px; font-size: 14px; }
}

@media (max-width: 899px){

.kp-hero2__grid-12{
align-content: var(--hero2-content-align-m, center);
}

.kp-hero2__slot{
grid-column: 1 / -1;
display:grid;
row-gap:12px;

padding-inline: var(--hero2-slot-pad-m);

transform: translate3d(
var(--hero2-nudge-x-m, 0px),
var(--hero2-nudge-y-m, 0px),
0
);
}

.kp-hero2 :where(h1, .kp-hero2__title, .t-title){
font-size: clamp(24px, 6.2vw, 34px);
line-height: 1.1;
text-wrap: balance;
}
.kp-hero2 :where(.kp-hero2__subtitle, .t-descr){
font-size: clamp(15px, 4.1vw, 18px);
line-height: 1.35;
}
}

@media (max-width: 899px) {
.kp-hero2__actions {
display: flex;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: space-between;
}


.kp-hitem {

width: calc(50% - 4px) !important;
flex-grow: 0;
flex-shrink: 0;
margin: 0 !important;
}

.kp-hbtn {
width: 100% !important;
justify-content: center;
padding-left: 8px !important;
padding-right: 8px !important;
font-size: 11px !important;
box-sizing: border-box;
}

.kp-hitem:hover .kp-hdd {
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(18px) translateX(-8px) scale(.96) rotateZ(7deg);
}

.kp-hdd {
left: 0; right: auto;
min-width: 200px;
max-width: 90vw;
rotate: 0deg;
transform-origin: bottom left;
}

.kp-hero2__actions .kp-hitem:nth-child(-n+2) .kp-hdd {
bottom: calc(100% + 10px); top: auto;
transform: translateY(18px) translateX(-8px) scale(.96) rotateZ(7deg);
transform-origin: bottom left;
}
.kp-hero2__actions .kp-hitem:nth-child(-n+2).is-open .kp-hdd {
transform: translateY(0) translateX(0) scale(1) rotateZ(-4deg);
}

.kp-hero2__actions .kp-hitem:nth-child(n+3) .kp-hdd {
top: calc(100% + 10px); bottom: auto;
transform: translateY(-18px) translateX(-8px) scale(.96) rotateZ(-7deg);
transform-origin: top left;
}
.kp-hero2__actions .kp-hitem:nth-child(n+3).is-open .kp-hdd {
transform: translateY(0) translateX(0) scale(1) rotateZ(4deg);
}

.kp-hitem.is-open .kp-hdd {
opacity: 1; visibility: visible; pointer-events: auto;
}
}

@media (max-width: 899px){
.kp-nav__drawer{
position:fixed; top:0; right:0; bottom:0; z-index:2000;
width:min(86vw, 420px);
height:100dvh;
background:var(--paper);
border-left:var(--stroke) solid var(--ink);
padding:20px 16px;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;

transform:translate3d(100%,0,0);
transition:transform .3s cubic-bezier(.22,.61,.36,1);
display:flex; flex-direction:column;
}
.kp-nav.is-open .kp-nav__drawer{ transform:translate3d(0,0,0); }
.kp-nav__desk, .kp-nav__actions{ display:none; }
.kp-nav__brand{ grid-column:1/11; }
.kp-burger{
grid-column:11/13;
justify-self:end;
display:inline-grid;
}

.kp-nav__mob{ padding:0; }
.kp-nav__list--mob{
display:flex; flex-direction:column; gap:10px;
align-items:stretch;
}

.kp-acc{ width:100%; }

.kp-acc__btn{
width:85%;
display:flex; align-items:center; justify-content:space-between;
text-align:left;
padding:12px 16px;

background:var(--color-bg)ef7;
color:var(--ink);
font-family:var(--font-head);
font-size:16px;
text-transform:uppercase;

border:var(--stroke) solid var(--ink);
border-radius:10px;
box-shadow:3px 3px 0 var(--ink);
cursor:pointer;
transition:.15s ease;
}

.kp-acc__btn:hover{ background:var(--color-bg)be8; }
.kp-acc__btn:active{ transform:translateY(1px); box-shadow:1px 1px 0 var(--ink); }

.kp-acc__caret{ display:inline-grid; transition:transform .2s ease; }
.kp-acc__btn[aria-expanded="true"] .kp-acc__caret svg{ transform:rotate(180deg); }

.kp-acc__panel{
display:flex; flex-direction:column; gap:8px;
padding:8px 0 8px 12px;
margin-left:6px;
border-left:3px solid rgba(0,0,0,.15);
}

.kp-acc__panel[hidden]{ display:none !important; }

.kp-acc__panel .kp-nav__link{
display:block;
font-family:var(--font-body);
font-weight: 400; font-size:14px;
padding:10px 14px;

background:var(--color-bg);
color:var(--ink);
text-decoration:none;

border:2px solid var(--ink);
border-radius:8px;
box-shadow:2px 2px 0 var(--ink);
}
.kp-acc__panel .kp-nav__link:active{
transform:translateY(1px);
box-shadow:none;
}
}

@media (max-width: 899px){
.kp-nav__drawer .kp-acc__btn,
.kp-nav__drawer .kp-acc__btn *{
font-family: var(--font-head) !important;
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
text-transform: uppercase !important;
}

.kp-nav__drawer .kp-nav__link,
.kp-nav__drawer .kp-nav__link *{
font-family: var(--font-body) !important;
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
}
}

@media (max-width: 899px) {
.kp-toc2__wrap {
justify-content: flex-start;
flex-wrap: nowrap;
gap: 8px; 
padding: 8px 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.kp-toc2__wrap::-webkit-scrollbar { display: none; }
.kp-toc2__btn {
flex: 0 0 auto;
white-space: nowrap;
padding: 0.45em 0.9em;
}
}

@media (max-width: 899px) {
.kp-toc2__hint {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 4px 0 10px 8px;
padding: 0;
font-family: 'Arial', sans-serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text);
opacity: 0.7;

background: transparent;
border: none;
box-shadow: none;
pointer-events: none;
}

.kp-toc2__hint::after {
content: "→";
display: inline-block;
font-weight: bold;
font-size: 12px;
animation: kp-hint-bounce 1s infinite;
}

@keyframes kp-hint-bounce {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
}

@media (max-width: 768px) {
.kp-info-row {
flex-direction: column;
padding: 0;
}
.kp-mini-image {
flex: none;
width: 100%;
max-width: 100%;
border: none;
border-bottom: 1px solid #eee;
border-radius: 0;
}
.kp-weather-table {
font-size: 0.85rem;
}
.kp-weather-table th,
.kp-weather-table td {
padding: 10px;
}
}

@media (max-width: 768px) {
.kp-note { --note-max-h: 250px; }
}

@media (max-width: 768px) { .kp-resorts { --resorts-max-h: auto; } }

@media (max-width: 768px) {
.kp-breaking-news {
overflow: visible;
margin-top: 35px;
border-top-left-radius: 0;
}

.kp-breaking-label {
position: absolute;
top: -28px;
left: 0;
height: 28px;
background: var(--kp-accent, #f5e320);
color: var(--color-text);
font-size: 11px;
padding: 0 12px;
border-radius: 4px 4px 0 0;
box-shadow: 2px -2px 5px rgba(0,0,0,0.1);
}

/* --- ЛОАДЕР ДЛЯ КАРТ СКРЫТ У МОБ --- */
@media (max-width: 768px) {
.kp-map-load-btn {
display: none;
}
.kp-fs-btn {
display: none;
}
}

.kp-breaking-label::after {
display: none;
}

.kp-ticker-wrap {
padding-left: 10px;
mask-image: none;
-webkit-mask-image: none;
}
}

@media (max-width: 767.98px) {
.kp-comic .kp-comic__narration {
margin-left: 0;
margin-right: 0;
}
}

@media (max-width: 600px){
.kp-hero2__h1{
font-size: clamp(22px, 9.2vw, 26px);
line-height: 1.15;
}
.kp-hero2__h1 .text-amber{
font-size: .9em;
}
}

@media (max-width: 600px) {
.kp-comic { font-size: 16px; }
.kp-comic__body h2 { font-size: 24px; }
.kp-comic__body h3 { font-size: 20px; }
}

@media (max-width: 600px) {
.kp-cams-grid {
grid-template-columns: 1fr;
}


.kp-weather-grid {
grid-template-columns: 1fr;
gap: 8px;
}

.kp-card {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
text-align: left;
min-height: 60px;
}

.kp-card-top {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
width: auto;
flex-direction: column-reverse;
align-items: flex-start;
gap: 2px;
}


.kp-card-top span:last-child {
font-size: 14px;
}

.kp-card-main {
margin-bottom: 0;
flex-direction: row-reverse;
}

.kp-temp {
font-size: 20px;
margin-left: 8px;
}

.kp-icon {
width: 24px;
height: 24px;
}


.kp-params {
font-size: 11px;
flex-direction: column;
gap: 2px;
align-items: flex-end;
text-align: right;
}
}

@media (max-width: 600px) {
.kp-comic { font-size: 16px; }
.kp-comic__body h2 { font-size: 24px; }
.kp-comic__body h3 { font-size: 20px; }
}

@media (max-width: 600px) {
.kp-footer__form { flex-direction: column; }
.kp-input { width: 100%; box-sizing: border-box; }
.kp-btn { width: 100%; box-sizing: border-box; margin-top: 8px; }
}

@media (max-width: 600px) { .kp-cta-grid { grid-template-columns: 1fr; } }

@media (max-width: 599px) {
.kp-hero__cards {
top: auto; bottom: -70px; left: 50%; transform: translate(-50%, 70%);
width: 94%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
perspective: none;
}
.kp-hcard {
min-height: 90px; padding: 8px 6px; border-width: 2px; border-radius: 8px;
box-shadow: 3px 3px 0 var(--ink); transform-origin: center;

background: linear-gradient(90deg, color-mix(in srgb, var(--card-local) 10%, var(--color-bg)) 0%, var(--color-bg) 100%);
}
.kp-hcard:hover { transform: translateY(-2px); box-shadow: 2px 2px 0 var(--ink); }
.kp-hcard::before { width: 5px; border-right-width: 2px; }
.kp-hcard__icon { width: 24px; height: 24px; margin-left: 4px; }
.kp-hcard__icon svg { stroke-width: 2; }
.kp-hcard__title { font-size: 11px; margin-left: 4px; }
}

@media (max-width: 560px) {
.kp-artmenu__wrap { padding: 0 16px; }
.kp-artmenu__row { grid-auto-columns: 80vw; }
.kp-artmenu__nav { display: none; }
.kp-artcard__title { font-size: 15px; padding: 12px; }


.kp-artcard:hover { transform: none; box-shadow: 6px 6px 0 var(--color-text); }
.kp-artcard:active { transform: scale(0.98); box-shadow: 2px 2px 0 var(--color-text); }
}

@media (max-width: 420px){
.kp-hero2__h1.kp-h1--2lines .kp-h1line{
white-space:normal;
}
}

@media (max-width:420px){ .kp-map-legend{ font-size:13px; } }

@media (min-width: 769px) {
.kp-note--h100 { --note-max-h: 100px; }
.kp-note--h125 { --note-max-h: 125px; }
.kp-note--h150 { --note-max-h: 150px; }
.kp-note--h175 { --note-max-h: 175px; }
.kp-note--h200 { --note-max-h: 200px; }
.kp-note--h220 { --note-max-h: 220px; }
.kp-note--h225 { --note-max-h: 225px; }
.kp-note--h250 { --note-max-h: 250px; }
.kp-note--h300 { --note-max-h: 300px; }
.kp-note--h400 { --note-max-h: 400px; }
.kp-note--h550 { --note-max-h: 550px; }
.kp-note--h1000 { --note-max-h: 1000px; }
}

@media (min-width: 769px) {
.kp-resorts--h300 { --resorts-max-h: 300px; }
.kp-resorts--h450 { --resorts-max-h: 450px; }
.kp-resorts--h600 { --resorts-max-h: 600px; }
}

@media (min-width: 860px) {
.kp-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width:860px){
.kp-comic .kp-comic__panels{ grid-template-columns:1fr 1fr; }
}

@media (min-width: 900px){
.kp-burger,
.kp-nav__drawer,
.kp-nav__backdrop{
display:none !important;
}

.kp-nav__brand{ grid-column:1/3; justify-self:start; }
.kp-nav__desk { grid-column:3/11; justify-self:center; }
.kp-nav__actions{ grid-column:11/13; justify-self:end; }
.kp-only-mob { display: none; }
}

@media (min-width: 1024px){
.kp-comic .kp-comic__narration {
max-width: var(--panel-width);

margin-left: auto;
margin-right: auto;

padding: 25px;
}
}

@media screen and (max-width: 960px) {
.kp-cams-grid {
--kp-cols: 2;
}
}

@media screen and (max-width: 600px) {
.kp-cams-grid {
--kp-cols: 1;
}
}

@media screen and (max-width: 900px) {
.kp-map-preview {
padding: 0;
}


.kp-map-preview .kp-map-load-btn {
position: absolute;

left: 10px;
bottom: 10px;

margin: 0;
transform: none;
}

.kp-map-wrapper.is-fullscreen .kp-fs-btn {
top: 80px;
right: 15px;
}
}

@media (hover: hover) {
.kp-artcard:hover {

transform: translate(-4px, -4px);

box-shadow: 10px 10px 0 var(--color-text);
}
}

@media (orientation: landscape){
.kp-hero2--bg{ --hero2-img: var(--hero2-bg-16x9-1x); }
}

@media (orientation: portrait){
.kp-hero2--bg{ --hero2-img: var(--hero2-bg-9x16-1x); }
}

@media (prefers-reduced-motion: reduce){
.kp-nav__drawer,
.kp-nav__backdrop,
.kp-burger__line,
.kp-file-drop,
.kp-file-btn{
transition:none !important;
}
}

@media (prefers-reduced-motion:reduce){
.kp-comic .kp-comic__panel{ transition:none; transform:none; translate:0 0; opacity:1; }
.kp-comic .kp-comic__cta{ transition:none; }
}