/* =========================================================
   who is eminem? — стили страницы-таплинка (редизайн 10.2026)
   Палитра и шрифты взяты из макета в Figma.
   Цвета меняются в одном месте — в :root ниже.
   ========================================================= */

/* --- твои шрифты ---
   Если положить файлы шрифтов в папку fonts/ с такими именами,
   сайт будет у всех выглядеть один в один как в Фигме.
   Пока файлов нет — у тебя на маке подхватятся установленные шрифты (local),
   у остальных — похожие запасные (Archivo / Special Elite). */
@font-face{font-family:'DeFonte';src:local('DeFonte Reduced Normale'),local('DeFonte Reduced'),url('fonts/defonte-reduced-normale.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'DeFonte';src:local('DeFonte Reduced Leger'),url('fonts/defonte-reduced-leger.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'DeFonte';src:local('DeFonte Reduced DemiGras'),url('fonts/defonte-reduced-demigras.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Typewriter';src:local("ahabesha'stypewriter"),local('ahabeshas typewriter'),url('fonts/typewriter.woff') format('woff');font-display:swap}

:root{
  --yellow:#ffe500;
  --yellow-2:#ffff00;
  --blue:#0000ff;
  --red:#ff0000;
  --red-title:#ff1b1c;
  --green:#00ff00;

  --f-head:'DeFonte','Archivo',system-ui,sans-serif;
  --f-type:'Typewriter','Special Elite','Courier New',monospace;
  --f-btn:'Krona One','Archivo',sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;

  --gutter:clamp(16px,5.5vw,80px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--yellow);color:var(--blue);font-family:var(--f-head);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* зерно поверх всего сайта (как Noise в Фигме) */
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .44 0 0 0 0 .1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* «штамп»: рваные края у заголовков (как Texture в Фигме) */
.stamp{filter:url(#rough)}

/* ================= 01 PREVIEW ================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:110px var(--gutter) 80px;overflow:hidden;isolation:isolate}
.nav{position:absolute;top:36px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:16px;
  font-family:var(--f-head);font-size:clamp(14px,1.4vw,20px);letter-spacing:.06em;text-transform:uppercase;z-index:5}
.nav ul{list-style:none;display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.nav a{position:relative}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}

.star{position:absolute;z-index:-1;pointer-events:none}
.star-1{top:3%;right:2%;width:min(30vw,420px);animation:wob 7s ease-in-out infinite}
.star-2{bottom:6%;left:2%;width:min(36vw,500px);animation:wob 9s ease-in-out infinite reverse}
@keyframes wob{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-6deg) scale(1.04)}}

.hero-photo{display:none} /* фото в превью — только на телефоне */

.stack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;position:relative;z-index:2}
.who{width:clamp(150px,22vw,316px)}
.dash{font-family:var(--f-type);font-size:24px;line-height:.6;margin-top:-4px}
.roles{font-family:var(--f-head);font-weight:300;font-size:clamp(17px,2.1vw,30px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase}
.big{display:flex;align-items:center;gap:clamp(8px,3.4vw,56px)}
.year{font-family:var(--f-type);font-size:clamp(15px,2.4vw,35px)}
.eminem{width:clamp(250px,52vw,750px)}
.dumbass{font-family:var(--f-type);font-size:clamp(15px,2.1vw,30px);letter-spacing:.04em}
.btn{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border:2px solid var(--blue);
  font-family:var(--f-btn);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--blue);color:var(--yellow-2);transform:rotate(-2deg)}
.based{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--f-type);font-size:12px;letter-spacing:.14em}

/* ================= 02 TICKER ================= */
.ticker{background:var(--green);overflow:hidden;white-space:nowrap;border-block:0;position:relative;z-index:3}
.ticker-track{display:inline-flex;animation:run 22s linear infinite;padding:12px 0}
.ticker span{font-family:var(--f-type);font-size:clamp(17px,1.8vw,26px);padding-right:1.6em}
@keyframes run{to{transform:translateX(-50%)}}

/* ================= 03 LINKS ================= */
.links{position:relative;overflow:hidden;padding-bottom:110px;isolation:isolate}
.band{position:relative;background:var(--blue);padding:clamp(12px,3vw,44px);height:clamp(100px,21vw,300px)}
.band::before{content:'';position:absolute;inset:clamp(12px,3vw,44px) clamp(12px,3vw,44px) clamp(24px,4vw,56px);background:var(--yellow-2)}
.title{position:absolute;left:0;right:0;bottom:0;width:100%}

.links-photo{position:absolute;left:0;top:clamp(100px,21vw,300px);width:46%;max-width:660px;z-index:-1;opacity:.92}
.links-duo{position:absolute;right:2%;top:calc(clamp(100px,21vw,300px) + 30px);width:28%;max-width:400px;aspect-ratio:400/829;object-fit:cover;z-index:-1}

.links-inner{padding:clamp(40px,6vw,90px) var(--gutter) 0}
.mylinks{width:clamp(180px,24vw,340px);margin:0 auto clamp(30px,5vw,70px)}
.list{list-style:none;display:flex;flex-direction:column;gap:clamp(14px,1.9vw,26px)}
.row{display:flex;align-items:baseline;gap:10px;color:var(--red);font-size:clamp(13px,1.7vw,24px)}
.row .num{font-family:'Archivo',sans-serif;flex:none}
.row .dots{flex:1;border-bottom:3px dotted var(--red);transform:translateY(-.3em);min-width:24px}
.row .label{font-family:var(--f-type);text-transform:uppercase;text-align:right}
.row .label small{font-size:inherit}
.row:hover .label{background:var(--red);color:var(--yellow-2)}
.row:hover .dots{border-color:var(--blue)}
.note{margin-top:clamp(40px,6vw,90px);font-family:var(--f-head);font-weight:300;font-size:clamp(14px,1.7vw,24px);color:var(--red)}
.links-photo-m{display:none}

/* ================= FOOTER ================= */
.foot{background:var(--green);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:40px var(--gutter);position:relative;z-index:3}
.foot .copy{font-family:var(--f-mono);font-size:12px}
.foot .xoxo{font-family:'Archivo',sans-serif;font-size:16px}
.foot .logo{width:158px}

/* ================= ТЕЛЕФОН ================= */
@media (max-width:760px){
  .hero{min-height:760px;padding:120px 16px 90px}
  .nav{top:46px;left:16px;right:16px;font-size:14px}
  .nav ul{gap:12px}
  .star-1{top:90px;right:auto;left:-20px;width:85vw}
  .star-2{bottom:60px;left:-50px;width:62vw}
  .hero-photo{display:block;position:absolute;left:27vw;top:62px;height:700px;width:auto;max-width:none;z-index:0}
  .hero .year-r{color:var(--yellow-2)}
  .roles,.dash{display:none}
  .btn{background:var(--blue);color:var(--yellow-2);border-color:var(--green)}
  .based{color:var(--yellow-2);text-align:right;padding-right:16px;font-size:10px}

  .links-photo,.links-duo{display:none}
  .links{padding-bottom:0}
  .links-inner{padding:36px 16px 0}
  .mylinks{width:200px;margin:0 0 26px 30px}
  .row{gap:6px}
  .row .label small{display:none} /* на телефоне прячем длинные адреса */
  .row .dots{border-bottom-width:2px}
  .note{margin-top:20px}
  .links-photo-m{display:block;width:108%;margin:24px 0 0 -2%}

  .foot{flex-direction:column;text-align:center;gap:10px;padding:30px 16px}
  .foot .logo{order:-1;width:170px}
  .foot .copy{order:1}
  .foot .xoxo{font-size:12px}
  .foot .copy{font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .grain,.star,.ticker-track{animation:none}
}

/* ================= ЗАГЛУШКИ (photo.html / design.html) ================= */
.soon{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:28px;padding:40px 20px;position:relative;overflow:hidden;isolation:isolate}
.soon .star-1{top:4%;right:-4%;width:min(46vw,420px)}
.soon .star-2{bottom:4%;left:-6%;width:min(52vw,480px)}
.soon .tag{font-family:var(--f-type);font-size:clamp(13px,1.6vw,18px);letter-spacing:.14em;text-transform:uppercase}
.soon h1{font-family:var(--f-type);font-weight:700;color:var(--red);font-size:clamp(28px,6vw,72px);line-height:1.05;text-transform:uppercase;max-width:15ch}
.soon p{font-family:var(--f-head);font-weight:300;font-size:clamp(17px,2.4vw,28px);max-width:26ch;line-height:1.2}