:root{
  --bg:#1a0708;
  --panel:#270d0f;
  --line:#3f171a;
  --text:#f4ebeb;
  --muted:#b28d8f;
  --accent:#e8484a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- шапка ---------- */
.bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:16px 32px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:5;
}
.slot{display:block}
.mark{font-weight:700;letter-spacing:.14em;font-size:15px;justify-self:start}
.mark span{display:block;font-weight:400;letter-spacing:.3em;font-size:10px;color:var(--muted);text-transform:uppercase}

.bar nav{display:flex;gap:6px;justify-self:center}
.bar nav a{
  padding:9px 16px;border-radius:999px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--muted);border:1px solid transparent;
}
.bar nav a:hover{color:var(--text);background:var(--panel)}
.bar nav a.on{color:var(--accent);background:var(--panel);border-color:#5e2126}

/* ---------- сітка сторінки ---------- */
main{max-width:1180px;margin:0 auto;padding:0 32px}
section{padding:72px 0;border-bottom:1px solid var(--line);scroll-margin-top:84px}
section:last-child{border-bottom:0}

h2{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:28px;font-weight:600}
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}
.head-row h2{margin-bottom:0}
.hint{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8d6a6c}
.note{margin-top:18px;font-size:12.5px;color:#9a7678;max-width:70ch}

/* ---------- інтро ---------- */
.intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:56px;align-items:center;padding:84px 0;
}
.intro h1{font-size:clamp(28px,3.6vw,46px);line-height:1.12;font-weight:600;letter-spacing:-.02em}
.intro p{margin-top:20px;color:var(--muted);max-width:46ch}
.intro .meta{margin-top:26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9a7678}

.hero{background:var(--panel);border:1px solid var(--line)}
.hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hero figcaption{
  padding:11px 14px;border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9a7678;
}

/* ---------- галерея: один ряд ---------- */
.strip{
  display:flex;gap:18px;overflow-x:auto;padding-bottom:14px;
  scroll-snap-type:x mandatory;
}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-track{background:#210a0c}
.strip::-webkit-scrollbar-thumb{background:#5a2529;border-radius:4px}
.slide{
  flex:0 0 340px;scroll-snap-align:start;
  background:var(--panel);border:1px solid var(--line);
}
.shot{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ph{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;
  aspect-ratio:4/3;color:#8d6a6c;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:repeating-linear-gradient(135deg,#230b0d 0 10px,#2b1012 10px 20px);
}
figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;font-size:13px;border-top:1px solid var(--line)}
figcaption .yr{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- каталог моделей ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column}
.card .shot{aspect-ratio:16/10}
.card-body{padding:16px 18px 18px}
.card-body h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.card-sub{margin-top:3px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9a7678}
.card dl{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px}
.card dt{color:#a88284}
.card dd{color:var(--text);text-align:right}

/* ---------- порівняння ---------- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:740px;font-size:13.5px}
thead th{
  padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;
  white-space:nowrap;
}
tbody th{
  padding:12px 14px;text-align:left;color:#a88284;font-weight:500;white-space:nowrap;
  border-bottom:1px solid #351317;
}
tbody td{padding:12px 14px;border-bottom:1px solid #351317;color:var(--text)}
tbody tr:nth-child(odd) td,tbody tr:nth-child(odd) th{background:#210a0c}

/* ---------- хронологія ---------- */
.timeline{list-style:none;max-width:70ch}
.timeline li{display:grid;grid-template-columns:72px 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
.timeline b{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}
.timeline h3{font-size:16px;font-weight:600;margin-bottom:4px}
.timeline p{color:var(--muted)}

/* ---------- підвал ---------- */
.foot{border-top:1px solid var(--line);padding:30px 32px 40px;color:#9a7678;font-size:13px;
  max-width:1180px;margin:0 auto}
.credits{margin-bottom:22px}
.credits-head{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9a7678;margin-bottom:12px;font-weight:600}
.credits ul{list-style:none;display:grid;gap:7px;max-width:76ch}
.credits li{font-size:12.5px;color:#a88284;line-height:1.5}
.credits a{color:var(--muted);border-bottom:1px solid #4a1d20}
.credits a:hover{color:var(--accent)}

@media(max-width:960px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .intro{grid-template-columns:1fr;gap:34px;padding:52px 0}
  .bar{grid-template-columns:1fr;justify-items:center;gap:14px}
  .mark{justify-self:center;text-align:center}
  .slot{display:none}
}
@media(max-width:600px){
  .cards{grid-template-columns:1fr}
  .slide{flex-basis:280px}
  .bar nav a{padding:8px 12px;font-size:11.5px;letter-spacing:.05em}
  main{padding:0 18px}
  .foot{padding:26px 18px 34px}
  section{padding:52px 0}
  .intro{padding:48px 0}
}

/* ---------- картка як посилання ---------- */
.card-link{display:flex;flex-direction:column;height:100%;color:inherit}
.card-link:hover{border-color:#6b2a2e}
.card-link:hover .card-body h3{color:var(--accent)}
.card-more{margin-top:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ---------- сторінка моделі ---------- */
.back{display:inline-block;margin:28px 0 0;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.back:hover{color:var(--accent)}
.model-head{padding:36px 0 44px;border-bottom:1px solid var(--line)}
.model-head h1{font-size:clamp(32px,5vw,58px);font-weight:600;letter-spacing:-.02em}
.model-head .sub{margin-top:8px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.model-shot{margin-top:30px;background:var(--panel);border:1px solid var(--line)}
.model-shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.model-blurb{margin-top:26px;color:var(--muted);max-width:62ch;font-size:16px}
.spec-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.spec-list div{background:var(--bg);padding:16px 18px}
.spec-list dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a7678;margin-bottom:5px}
.spec-list dd{font-size:17px}
.pager{display:flex;justify-content:space-between;gap:16px;padding:30px 0 0}
.pager a{font-size:13px;color:var(--muted)}
.pager a:hover{color:var(--accent)}
@media(max-width:600px){.spec-list{grid-template-columns:1fr}}

/* ---------- модальне вікно ---------- */
body.locked{overflow:hidden}
.modal{
  border:0;padding:16px;background:transparent;color:var(--text);
  position:fixed;inset:0;
  width:100%;height:100%;max-width:none;max-height:none;
  overflow:visible;
}
.modal[open]{display:grid;place-items:center}
.modal::backdrop{background:rgba(10,2,3,.74);opacity:0;transition:opacity .22s ease}
.modal.is-open::backdrop{opacity:1}
.modal-box{
  position:relative;background:var(--panel);border:1px solid var(--line);
  width:min(880px,100%);max-height:86vh;overflow:auto;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .22s ease,transform .24s cubic-bezier(.2,.7,.3,1);
}
.modal.is-open .modal-box{opacity:1;transform:none}
.modal.is-open .modal-box.swapping{opacity:.2;transform:translateY(6px)}

.modal-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(12,4,5,.72);border:1px solid var(--line);
  color:var(--text);font-size:22px;line-height:1;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.modal-close:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}
.modal-shot img{display:block;width:100%;height:clamp(180px,38vh,330px);object-fit:cover}
.modal-body{padding:24px 26px 26px}
.modal-name{font-size:30px;font-weight:600;letter-spacing:-.02em}
.modal-body .sub{margin-top:5px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.modal-blurb{margin:16px 0 20px;color:var(--muted);max-width:60ch}
.modal .spec-list{margin-top:0}
.modal .spec-list div{background:var(--panel)}
.pager-btn{
  background:none;border:0;cursor:pointer;color:var(--muted);
  font:inherit;font-size:13px;padding:6px 2px;
  transition:color .15s ease,transform .15s ease;
}
.pager-btn:hover{color:var(--accent);transform:translateY(-1px)}

/* ---------- анімації ---------- */
.card-link{transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s ease}
.card-link:hover{transform:translateY(-4px)}
.card figure,.slide figure,.card-link figure{overflow:hidden}
.card .shot,.slide .shot{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card-link:hover .shot,.slide:hover .shot{transform:scale(1.04)}
.card-body h3{transition:color .18s ease}
.bar nav a{transition:color .18s ease,background .18s ease,border-color .18s ease}
.credits a,.back,.pager a{transition:color .18s ease}
.slide{transition:border-color .2s ease}
.slide:hover{border-color:#6b2a2e}

.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal .spec-list div{animation:rise .32s ease backwards;animation-delay:calc(var(--i,0) * 45ms)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
  .card-link:hover{transform:none}
  .card-link:hover .shot,.slide:hover .shot{transform:none}
  .modal-close:hover{transform:none}
}

/* ---------- повторювана поява фото (лише opacity + transform → GPU, без перерахунку розкладки) ---------- */
.js .pop{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.97);
  transition:opacity .5s ease var(--d,0ms),transform .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
}
.js .pop.pop-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .js .pop{opacity:1;transform:none;transition:none}
}