/* MAD — Media & Artist Development
   Стиль: fashion-коллаж, бумага + чёрный + один красный. Один визуальный мир, без тем. */

:root{
  --paper:#F6F4EF;
  --paper-2:#EDEAE3;
  --ink:#0A0A0A;
  --red:#FF1400;
  --grey:#8B8880;
  --line:rgba(10,10,10,.9);
  --hair:rgba(10,10,10,.18);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5; overflow-x:clip;
  background-image:
    radial-gradient(120% 90% at 20% 0%, rgba(10,10,10,.05), transparent 60%),
    radial-gradient(90% 70% at 90% 30%, rgba(10,10,10,.04), transparent 55%);
  position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("../img/paper.jpg") center/cover no-repeat;
  mix-blend-mode:multiply; opacity:.11; filter:grayscale(1) contrast(1.05);
}
body > *{position:relative; z-index:1}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.wrap{max-width:1440px; margin:0 auto; padding-inline:clamp(14px,2.2vw,28px)}

/* ——— типографика ——— */
.display{
  font-family:"Anton","Sofia Sans Condensed",Impact,sans-serif;
  font-weight:400; text-transform:uppercase; line-height:.84;
  letter-spacing:-.005em; margin:0;
}
.cond{
  font-family:"Sofia Sans Condensed",Impact,sans-serif;
  font-weight:800; text-transform:uppercase; line-height:.94; letter-spacing:-.01em; margin:0;
}
.mono{
  font-family:"Martian Mono",ui-monospace,monospace; font-weight:400;
  text-transform:uppercase; letter-spacing:.06em; font-size:.58rem;
  font-variant-numeric:tabular-nums;
}
.lead{font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.42; max-width:34ch}
p{margin:0}

/* ——— шапка ——— */
.topbar{position:relative; padding:10px 0 6px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.topbar .brandmark{font-family:"Anton",Impact,sans-serif; font-weight:400; font-size:clamp(2rem,5vw,3.4rem); text-transform:lowercase; line-height:.8; letter-spacing:-.03em}
.topbar .center{display:flex; gap:clamp(10px,4vw,60px)}
.navstrip{
  border-top:2px solid var(--line); border-bottom:2px solid var(--line);
  display:flex; justify-content:space-between; gap:8px; padding:6px 0; overflow-x:auto; scrollbar-width:none;
}
.navstrip::-webkit-scrollbar{display:none}
.navstrip a{white-space:nowrap}
.navstrip a:hover{color:var(--red)}

/* ——— hero ——— */
.hero{position:relative; padding-block:clamp(10px,2vw,20px) clamp(34px,5vw,64px)}
.hero-word{position:relative; isolation:isolate; text-align:center; margin-top:clamp(14px,2.4vw,40px)}
.hero-word .w{
  font-size:clamp(6rem,29vw,26rem); line-height:.72; letter-spacing:-.045em;
  position:relative; z-index:2;
}
.hero-word .ghost{
  position:absolute; inset:0; z-index:1; color:var(--red);
  filter:blur(clamp(10px,2.2vw,34px)); opacity:.92; transform:translate(1.5%,-6%) scaleX(1.06);
  pointer-events:none; user-select:none;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(14px,2.4vw,32px); align-items:end; margin-top:clamp(8px,1.5vw,18px);
}
.hero-shot{position:relative}
.hero-shot > img{width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.12)}
.hero-shot .ph{width:100%; aspect-ratio:4/5; background:
  repeating-linear-gradient(135deg,#111 0 2px,#1c1c1c 2px 6px);}
.hero-copy{display:flex; flex-direction:column; gap:clamp(12px,1.6vw,20px); padding-bottom:6px}
.hero-copy h1{font-size:clamp(1.9rem,4.6vw,4.1rem)}
.hero-copy h1 em{font-style:normal; color:var(--red)}

/* кнопки */
.acts{display:flex; flex-wrap:wrap; gap:10px}
.btn{
  display:inline-flex; align-items:center; gap:14px; padding:14px 22px;
  font-family:"Martian Mono",monospace; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:2px solid var(--ink); cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 14px) 100%,0 100%);
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--red); border-color:var(--red)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper)}
.btn:focus-visible{outline:3px solid var(--red); outline-offset:3px}

/* ——— тикер ——— */
.ticker{border-top:2px solid var(--line); border-bottom:2px solid var(--line); overflow:hidden; background:var(--ink); color:var(--paper)}
.ticker .track{display:flex; gap:0; width:max-content; animation:slide 38s linear infinite}
.ticker span{
  font-family:"Anton",Impact,sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,2.6rem); line-height:1.16; padding:6px 22px; white-space:nowrap; letter-spacing:-.01em;
}
.ticker span:nth-child(even){color:var(--red)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}

/* ——— секции ——— */
section{padding-block:clamp(52px,6.5vw,104px); position:relative}
.sechead{display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:2px solid var(--line); padding-bottom:8px; margin-bottom:clamp(22px,3vw,40px)}
.sechead h2{font-size:clamp(1.7rem,4.4vw,3.4rem)}
.sechead .code{color:var(--grey)}

/* манифест */
.manifest{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(18px,3vw,48px); align-items:start}
.manifest .big{font-size:clamp(2rem,5.4vw,4.6rem)}
.manifest .big s{text-decoration:none; position:relative; display:inline-block}
.manifest .big s::after{
  content:""; position:absolute; left:-2%; right:-2%; top:52%; height:.1em;
  background:var(--red); transform:rotate(-2.4deg);
}
.manifest .side{display:flex; flex-direction:column; gap:14px; font-size:.98rem; padding-top:8px}

/* цифры */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--line)}
.stat{padding:18px 16px 20px; overflow:hidden; border-right:2px solid var(--line); display:flex; flex-direction:column; gap:4px}
.stat:last-child{border-right:0}
.stat .v{font-family:"Anton",Impact,sans-serif; font-weight:400; font-size:clamp(2.4rem,6vw,5rem); line-height:.84; letter-spacing:-.03em}
.stat .v i{font-style:normal; color:var(--red)}
.stat .k{color:var(--grey); line-height:1.4}

/* что даём — коллажная сетка */
.gives{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.4vw,18px)}
.give{border:2px solid var(--line); padding:clamp(14px,1.6vw,22px); display:flex; flex-direction:column; gap:10px; background:var(--paper)}
.give:nth-child(1){grid-column:span 5}
.give:nth-child(2){grid-column:span 4}
.give:nth-child(3){grid-column:span 3}
.give:nth-child(4){grid-column:span 4}
.give:nth-child(5){grid-column:span 4}
.give:nth-child(6){grid-column:span 4}
.give h3{font-size:clamp(1.15rem,2vw,1.7rem)}
.give p{font-size:.93rem; color:#3A3934}
.give .no{color:var(--red)}
.give.dark{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.give.dark p{color:#B9B6AE}

/* калькулятор — бланк */
.form-sheet{border:2px solid var(--line); background:var(--paper); position:relative}
.form-sheet .sheet-top{display:flex; justify-content:space-between; gap:14px; padding:8px 14px; border-bottom:2px solid var(--line); background:var(--ink); color:var(--paper)}
.calc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.calc .ctl{padding:clamp(16px,2vw,26px); display:flex; flex-direction:column; gap:20px; border-right:2px solid var(--line)}
.calc .out{padding:clamp(16px,2vw,26px); display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:6px}
.field .lab{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.field .lab output{font-family:"Sofia Sans Condensed",Impact,sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--ink); outline:none; margin:10px 0 2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; background:var(--red); border:0; cursor:pointer; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
input[type=range]::-moz-range-thumb{width:20px; height:20px; background:var(--red); border:0; border-radius:0; cursor:pointer}
input[type=range]:focus-visible{outline:3px solid var(--red); outline-offset:6px}
.chain{display:flex; flex-direction:column}
.chain .st{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; border-bottom:1px solid var(--hair)}
.chain .st .r{font-family:"Sofia Sans Condensed",Impact,sans-serif; font-weight:800; font-size:1.25rem; font-variant-numeric:tabular-nums}
.total{display:flex; flex-direction:column; gap:2px; margin-top:2px}
.total .v{font-family:"Anton",Impact,sans-serif; font-weight:400; font-size:clamp(3rem,8vw,6.4rem); line-height:.82; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.total .v i{font-style:normal; color:var(--red)}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:16px; border-top:2px solid var(--line); padding-top:14px}
.pair .v{font-family:"Sofia Sans Condensed",Impact,sans-serif; font-weight:800; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1; font-variant-numeric:tabular-nums}
.disclaim{font-size:.78rem; color:var(--grey); line-height:1.4}

/* шаги */
.steps{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:2px solid var(--line)}
.step{display:grid; grid-template-columns:64px 1fr; gap:16px; padding:18px 20px 20px 0; border-bottom:2px solid var(--line)}
.step:nth-child(odd){border-right:2px solid var(--line); padding-right:26px}
.step:nth-child(even){padding-left:26px}
.step .n{font-family:"Anton",Impact,sans-serif; font-weight:400; font-size:3rem; line-height:.8; color:var(--red)}
.step h3{font-size:1.15rem; margin-bottom:4px}
.step p{font-size:.92rem; color:#3A3934}

/* ростер */
.roster{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.2vw,16px)}
.face{position:relative; border:2px solid var(--line); overflow:hidden}
.face > img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1) contrast(1.15)}
.face .ph{width:100%; aspect-ratio:3/4; background:repeating-linear-gradient(135deg,#151515 0 2px,#232323 2px 7px)}
.face .cap{position:absolute; left:0; right:0; bottom:0; background:var(--ink); color:var(--paper); padding:6px 10px; display:flex; justify-content:space-between; gap:8px}

/* FAQ */
details{border-bottom:2px solid var(--line); padding:14px 0}
details summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:baseline}
details summary::-webkit-details-marker{display:none}
details summary h3{font-size:clamp(1.05rem,2.1vw,1.5rem)}
details summary::after{content:"+"; font-family:"Martian Mono",monospace; color:var(--red); font-size:1.2rem}
details[open] summary::after{content:"—"}
details p{margin-top:10px; max-width:70ch; color:#3A3934; font-size:.95rem}

/* заявка */
.apply{background:var(--ink); color:var(--paper); padding-block:clamp(40px,5vw,84px)}
.apply .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,3vw,48px); align-items:start}
.apply h2{font-size:clamp(2.2rem,7vw,6rem); color:var(--paper)}
.apply h2 i{font-style:normal; color:var(--red)}
form{display:flex; flex-direction:column; gap:12px}
label{display:flex; flex-direction:column; gap:5px}
input[type=text],input[type=url],select{
  background:transparent; border:0; border-bottom:2px solid var(--paper); color:var(--paper);
  font-family:"Archivo",sans-serif; font-size:1rem; padding:8px 2px;
}
input::placeholder{color:#6E6C66}
input:focus-visible,select:focus-visible{outline:0; border-bottom-color:var(--red)}
select option{color:#0A0A0A}
form .btn{background:var(--red); border-color:var(--red); color:#fff; align-self:flex-start; margin-top:6px}
form .btn:hover{background:var(--paper); border-color:var(--paper); color:var(--ink)}

footer{border-top:2px solid var(--line); padding-block:22px 46px; display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; color:var(--grey)}

/* коллажные росчерки */
.mark{position:absolute; pointer-events:none; z-index:5; mix-blend-mode:multiply}
.mark svg{display:block}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .manifest{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:2px solid var(--line)}
  .calc{grid-template-columns:1fr}
  .calc .ctl{border-right:0; border-bottom:2px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .step:nth-child(odd){border-right:0; padding-right:0}
  .step:nth-child(even){padding-left:0}
  .roster{grid-template-columns:repeat(2,1fr)}
  .gives .give{grid-column:span 12 !important}
  .apply .wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .topbar .center{display:none}
  .pair{grid-template-columns:1fr}
  .hero-word .w{font-size:clamp(4.6rem,31vw,10rem)}
}

/* иконки и коллажные росчерки */
.give .ic{width:clamp(38px,3.4vw,54px); height:clamp(38px,3.4vw,54px); object-fit:contain; object-position:left center}
.give.dark .ic{filter:invert(1)}
.mark img{width:100%; height:auto}
.hero-shot .mark{transform:rotate(-6deg); mix-blend-mode:normal}
.acts .mark{transform:rotate(-4deg)}