/* ===== Fonts (local TTF) ===== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS Reset (minimal) ===== */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0;margin:0}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none}
button,input,select,textarea{font:inherit}
code,kbd,samp{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}

/* ===== Theme ===== */
:root{
  --paper:#FBF7F2;
  --kiln:#14100E;
  --bean:#3B2C25;
  --copper:#C97239;
  --leaf:#6EAD77;
  --foam:#F3E4D4;

  --wrap:1200px;
  --radius-card:16px;
  --radius-input:12px;
  --shadow-1:0 6px 18px rgba(20,16,14,.08);
  --shadow-2:0 12px 30px rgba(20,16,14,.14);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#14100E; /* swap */
    --kiln:#FBF7F2;
    --bean:#EDE5DD;
    --foam:#2A241F;
  }
}

html,body{height:100%}
body{
  background:var(--paper);
  color:var(--bean);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  overflow-x:hidden;
}

/* Accessiblity helpers */
.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;
}
.cra-skip{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.cra-skip:focus{
  left:16px;top:12px;width:auto;height:auto;background:var(--kiln);color:var(--paper);
  padding:8px 12px;border-radius:8px;z-index:9999;
}

/* Layout */
.cra-wrap{max-width:var(--wrap);margin-inline:auto;padding:0 20px}
.cra-main{padding-top:80px}

/* Header */
.cra-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--paper);
  box-shadow:var(--shadow-1);
}
.cra-header__grid{
  display:flex;align-items:center;justify-content:space-between;
  min-height:64px;gap:16px;
}
.cra-logo{display:flex;align-items:center;gap:10px;color:var(--kiln)}
.cra-logo__mark{
  width:18px;height:18px;border-radius:4px;background:var(--copper);display:inline-block;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
}
.cra-nav__list{display:flex;gap:16px;align-items:center}
.cra-nav__link{color:var(--bean)}
.cra-nav__link:hover{color:var(--kiln)}
.cra-btn,.cra-btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;border:2px solid var(--copper);color:var(--kiln)}
.cra-btn--ghost{background:transparent}
.cra-btn--primary{background:var(--copper);color:var(--paper)}
.cra-btn--secondary{background:transparent}
.cra-btn:hover{box-shadow:0 0 0 3px color-mix(in oklab, var(--copper) 35%, transparent)}
.cra-plain{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Forms */
.cra-input{
  border:2px solid var(--foam);border-radius:var(--radius-input);padding:10px 12px;width:100%;
  background:#fff;color:#111;
}
.cra-input:focus{outline:3px solid color-mix(in oklab, var(--leaf) 70%, transparent)}

/* Sections headings */
.cra-sec-head{display:grid;gap:8px;margin-bottom:var(--space-5)}
.cra-sec-head h2{font-family:Fraunces, serif;font-weight:900;font-size:clamp(24px, 3vw, 40px);line-height:1.1;color:var(--kiln)}
.cra-sec-sub{color:#6a5f57}

/* Footer */
.cra-footer{margin-top:var(--space-8);padding:var(--space-7) 0;background:linear-gradient(0deg, var(--foam), transparent)}
.cra-footer__grid{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between}
.cra-foot__brand strong{font-family:Fraunces, serif;font-weight:900;font-size:20px;color:var(--kiln)}
.cra-foot__nav ul{display:flex;gap:16px}

/* Utilities */
.cra-lead{max-width:56ch;color:#4a3e36}
.cra-noscript{padding:12px 16px;background:#fff5e9;margin:0}

/* Cards & badges */
.cra-card{
  display:block;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden;color:inherit;
  transition:transform .18s cubic-bezier(.2,.7,0,1), box-shadow .18s cubic-bezier(.2,.7,0,1);
}
.cra-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.cra-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--foam)}
.cra-card__body{padding:14px 14px 16px}
.cra-card__title{font-weight:700}
.cra-card--flat{border:2px dashed color-mix(in oklab, var(--copper) 35%, transparent);box-shadow:none}
.cra-badges{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.cra-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:color-mix(in oklab, var(--leaf) 20%, transparent);border:1px solid color-mix(in oklab, var(--leaf) 60%, transparent);font-size:12px}
/* ===== Burger button ===== */
.cra-burger{
  -webkit-appearance:none;appearance:none;
  display:none; /* показ ниже в media */
  width:42px;height:42px;border-radius:12px;border:2px solid var(--copper);
  background:transparent;color:var(--kiln);position:relative;
  align-items:center;justify-content:center;
}
.cra-burger__bar{
  position:absolute;left:9px;right:9px;height:2px;border-radius:2px;
  background:var(--kiln);transition:transform .22s cubic-bezier(.2,.7,0,1), opacity .22s;
}
.cra-burger__bar:nth-child(1){top:12px}
.cra-burger__bar:nth-child(2){top:20px}
.cra-burger__bar:nth-child(3){top:28px}

/* анимация в X */
.is-menu-open .cra-burger__bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.is-menu-open .cra-burger__bar:nth-child(2){opacity:0}
.is-menu-open .cra-burger__bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* показываем бургер и прячем десктоп-меню на узких экранах */
@media (max-width: 900px){
  .cra-burger{display:inline-flex}
  .cra-nav{display:none}
}

/* ===== Overlay + Drawer ===== */
.cra-overlay{
  position:fixed;inset:0;background:rgba(20,16,14,.45);
  opacity:0;visibility:hidden;transition:opacity .22s;
  z-index:58;
}
.is-menu-open .cra-overlay{opacity:1;visibility:visible}
body.lock-scroll{overflow:hidden}

.cra-drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(84vw,420px);
  background:
    radial-gradient(220px 220px at 110% -20%, color-mix(in oklab, var(--copper) 18%, transparent) 0 60%, transparent 61%),
    linear-gradient(180deg, color-mix(in oklab, var(--foam) 35%, transparent), transparent 44%),
    var(--paper);
  box-shadow: -24px 0 60px rgba(20,16,14,.16);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,0,1);
  z-index:59;overflow:auto;visibility:hidden;
}
.is-menu-open .cra-drawer{transform:translateX(0);visibility:visible}
.cra-drawer__inner{display:grid;gap:12px;min-height:100%;padding:20px}

.cra-drawer__head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
}
.cra-drawer__head h2{
  font-family:Fraunces, serif;font-weight:900;color:var(--kiln);font-size:22px;
}
.cra-drawer__close{
  -webkit-appearance:none;appearance:none;width:42px;height:42px;border-radius:12px;border:2px solid var(--foam);
  background:transparent;position:relative;
}
.cra-drawer__close span{
  position:absolute;left:9px;right:9px;height:2px;border-radius:2px;background:var(--kiln);
  top:20px;transform-origin:center;
}
.cra-drawer__close span:first-child{transform:rotate(45deg)}
.cra-drawer__close span:last-child{transform:rotate(-45deg)}

.cra-drawer__nav ul{display:grid;gap:6px;margin:8px 0 4px}
.cra-drawer__link{
  display:block;padding:12px 12px;border-radius:12px;font-weight:600;color:var(--kiln);
  background:color-mix(in oklab, var(--foam) 25%, transparent);
  border:1px solid color-mix(in oklab, var(--foam) 70%, transparent);
}
.cra-drawer__link:focus-visible{outline:3px solid color-mix(in oklab, var(--leaf) 70%, transparent);outline-offset:2px}

.cra-drawer__actions{display:grid;gap:10px;margin-top:8px}
.cra-drawer__actions .cra-btn{width:100%}

/* Header grid spacing tweak so burger не прыгает */
.cra-header__grid{gap:10px}
/* было: .cra-btn, .cra-btn:visited { ... } */
.cra-btn{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;        /* важно: убираем светлый фон браузера */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:2px solid var(--copper);
  color:var(--kiln);
  text-decoration:none;
}
.cra-btn:hover{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--copper) 35%, transparent);
}
/* ===== Range slider — theme look (used by .cra-spectrum__range) ===== */
.cra-spectrum__range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; cursor:pointer;
}

/* WebKit/Blink track */
.cra-spectrum__range::-webkit-slider-runnable-track{
  height:10px; border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--foam) 70%, transparent) 0%,
    color-mix(in oklab, var(--copper) 65%, transparent) 55%,
    color-mix(in oklab, var(--kiln) 40%, transparent) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--foam) 70%, transparent);
}

/* WebKit/Blink thumb */
.cra-spectrum__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--paper);
  border:3px solid var(--copper);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--copper) 25%, transparent);
  margin-top:-4px;               /* центрируем на 10px-треке */
  transition:transform .08s, box-shadow .18s, border-color .18s;
}
.cra-spectrum__range:active::-webkit-slider-thumb{ transform:scale(1.06); }
.cra-spectrum__range:focus-visible::-webkit-slider-thumb{
  border-color:var(--leaf);
  box-shadow:0 0 0 5px color-mix(in oklab, var(--leaf) 55%, transparent);
}

/* Firefox track/progress/thumb */
.cra-spectrum__range::-moz-range-track{
  height:10px; border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--foam) 70%, transparent) 0%,
    color-mix(in oklab, var(--copper) 65%, transparent) 55%,
    color-mix(in oklab, var(--kiln) 40%, transparent) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--foam) 70%, transparent);
}
.cra-spectrum__range::-moz-range-progress{
  height:10px; border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--foam) 70%, transparent) 0%,
    color-mix(in oklab, var(--copper) 65%, transparent) 55%,
    color-mix(in oklab, var(--kiln) 40%, transparent) 100%);
}
.cra-spectrum__range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--paper);
  border:3px solid var(--copper);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--copper) 25%, transparent);
  transition:transform .08s, box-shadow .18s, border-color .18s;
}
.cra-spectrum__range:focus-visible::-moz-range-thumb{
  border-color:var(--leaf);
  box-shadow:0 0 0 5px color-mix(in oklab, var(--leaf) 55%, transparent);
}

/* Legacy Edge/IE fallback (без градиента, просто тон) */
.cra-spectrum__range::-ms-track{
  height:10px; border-color:transparent; color:transparent; background:transparent;
}
.cra-spectrum__range::-ms-fill-lower,
.cra-spectrum__range::-ms-fill-upper{
  border-radius:999px;
  background:color-mix(in oklab, var(--copper) 55%, transparent);
}
.cra-spectrum__range::-ms-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--paper); border:3px solid var(--copper);
}