:root{
  --navy:#1B4A73;
  --green-dark:#2C4E2F;
  --cream:#F7EDCF;
  --ink:#16222E;
  --muted:#8A9099;
  --page:#FDFBF5;
  --card:#FFFFFF;
  --line:#E3D9BE;
  --line-soft:#EDE7D8;
  --green:#3D5A34;
  --green-soft:#E8EFE0;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background-color:var(--page);color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.021' numOctaves='5' seed='3'/%3E%3CfeDiffuseLighting surfaceScale='2.2' diffuseConstant='1' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='115' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23p)' opacity='.3'/%3E%3C/svg%3E");
  background-size:500px 500px;
  background-attachment:fixed;
  background-blend-mode:multiply;
  font-family:var(--sans);font-size:15px;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.top{background:var(--green-dark);color:var(--cream)}
.top-in{max-width:1080px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.top-title{font-size:15px;font-weight:500}
.brand{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.75}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px 80px}

.months{display:flex;align-items:center;justify-content:center;gap:22px;padding:52px 0 6px}
.arrow{
  width:40px;height:40px;flex:none;border:1px solid var(--line);background:transparent;padding:0;
  border-radius:50%;display:grid;place-content:center;cursor:pointer;
  color:var(--navy);font-size:17px;line-height:1;text-decoration:none;
  transition:background .15s,border-color .15s;
}
.arrow:hover{background:var(--card);border-color:var(--navy)}
.arrow.off{opacity:.22;pointer-events:none}
.month-name{font-size:27px;font-weight:600;letter-spacing:-.025em;color:var(--navy);min-width:236px;text-align:center}
.count{text-align:center;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:40px}

.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:10px}
.f-label{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:82px;flex:none}
.filters+.filters{padding-bottom:32px}
.chip{
  font-family:var(--sans);font-size:12.5px;color:var(--navy);
  border:1px solid var(--line-soft);background:var(--card);padding:6px 14px;border-radius:999px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:var(--cream);font-weight:500}
.empty{display:none;padding:48px 0;text-align:center;color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr;gap:32px 28px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}

.case{
  --sc:5px;
  --st:18px;
  --bd:9px;
  background-color:transparent;
  background-image:
    radial-gradient(circle at 50% 0,transparent var(--sc),var(--card) calc(var(--sc) + .6px)),
    radial-gradient(circle at 50% 100%,transparent var(--sc),var(--card) calc(var(--sc) + .6px)),
    radial-gradient(circle at 0 50%,transparent var(--sc),var(--card) calc(var(--sc) + .6px)),
    radial-gradient(circle at 100% 50%,transparent var(--sc),var(--card) calc(var(--sc) + .6px)),
    linear-gradient(var(--card),var(--card));
  background-size:
    var(--st) var(--bd),var(--st) var(--bd),
    var(--bd) var(--st),var(--bd) var(--st),
    calc(100% - var(--bd)*2) calc(100% - var(--bd)*2);
  background-position:top left,bottom left,left top,right top,center;
  background-repeat:round no-repeat,round no-repeat,no-repeat round,no-repeat round,no-repeat;
  border-radius:7px;
  padding:30px;display:flex;flex-direction:column;
  position:relative;scroll-margin-top:24px;
}
.case[hidden]{display:none}

.tags{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.tag{font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.tag-country{background:var(--navy);color:var(--cream)}
.tag-visa{border:1px solid var(--line);color:var(--navy)}
.num{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}

.case h2{font-size:19px;font-weight:600;line-height:1.32;letter-spacing:-.02em;color:var(--navy);margin:15px 0 19px}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:14px 18px;
       border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:14px 0}
.facts span{display:block;font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.facts b{font-size:14px;font-weight:500}

.case h3{font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:20px 0 6px}
.text{font-size:14.5px;line-height:1.62;color:#3E4854;margin:0;white-space:pre-line}

.split{border:0;height:1px;margin:24px 0 20px;background:repeating-linear-gradient(to right,var(--line) 0 5px,transparent 5px 11px)}
.result{margin-top:auto}
.result .text{color:var(--ink)}
.hls{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.hl{background:var(--green-soft);color:var(--green);font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px}

.foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line-soft);text-align:center;font-size:12px;color:var(--muted);line-height:1.9}

@media(max-width:520px){
  .wrap{padding:0 18px 60px}
  .months{padding-top:38px;gap:12px}
  .month-name{font-size:22px;min-width:170px}
  .f-label{width:100%}
  .case{--sc:4.5px;--st:16px;--bd:8px;padding:26px 22px 28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* --- текстовая заметка вместо кейсов (type: note) --- */
.note{grid-column:1/-1}
.note h2{margin-top:0}
.note .text{font-size:15px}