/* Urban UB — urbanub.city
   Фонтыг солих бол доорх --f-disp, --f-body хоёрыг л өөрчилнө.
   Aronsiki-г вэбэд тавих үед энэ файлын дээд талд @font-face нэмнэ. */

/* @font-face{font-family:"Aronsiki";src:url("/assets/aronsiki-regular.woff2") format("woff2");
   font-weight:400;font-style:normal;font-display:swap}
   @font-face{font-family:"Aronsiki";src:url("/assets/aronsiki-bold.woff2") format("woff2");
   font-weight:800;font-style:normal;font-display:swap} */

:root{
  --bg:#FFFFFF;
  --ink:#121211;
  --ink-2:#4A4945;
  --muted:#8C8B84;
  --rule:#E7E6E1;
  --wash:#F4F3EF;
  --flag:#BE3B2B;
  --chip-bg:#FFFFFF;
  --chip-ink:#121211;
  --f-disp:"Aronsiki","Onest","Segoe UI",Arial,sans-serif;
  --f-body:"Aronsiki","Golos Text","Segoe UI",Arial,sans-serif;
  --maxw:1240px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E0E0D; --ink:#F4F3EF; --ink-2:#C6C4BD; --muted:#8B8A83;
    --rule:#242423; --wash:#181817; --flag:#E4705E;
    --chip-bg:#F4F3EF; --chip-ink:#0E0E0D;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--f-disp);margin:0;line-height:1.08;
  text-transform:uppercase;font-weight:800;letter-spacing:-.005em}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:99}

/* header */
.top{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--rule)}
.topin{display:flex;align-items:center;gap:26px;height:72px}
.mark{font-family:var(--f-disp);font-weight:800;font-size:21px;letter-spacing:-.04em;
  text-transform:uppercase;flex:0 0 auto;display:block;line-height:0}
.mark .logo{display:block;width:78px;height:20px;background-color:var(--ink);
  -webkit-mask:url("/assets/logo-white.png") no-repeat center/contain;
  mask:url("/assets/logo-white.png") no-repeat center/contain}
.fcols .mark .logo{width:101px;height:26px}
.nav{display:flex;gap:26px;flex:1 1 auto;justify-content:center;flex-wrap:wrap;
  font-family:var(--f-disp);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase}
.nav a{padding-block:4px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--ink)}
.icons{flex:0 0 auto;display:flex;gap:6px}
.ibtn{width:38px;height:38px;display:grid;place-items:center;background:none;border:0;
  cursor:pointer;color:var(--ink)}
.ibtn:hover{background:var(--wash)}
.ibtn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:square}

/* зургийн байрлал — <img> тавихдаа ph классыг аваад орлуулна */
.ph{position:relative;display:block;overflow:hidden;background:var(--wash)}
.g1{background:linear-gradient(150deg,#263029,#101613 55%,#39463A)}
.g2{background:linear-gradient(150deg,#44331E,#1D1610 60%,#6A5029)}
.g3{background:linear-gradient(150deg,#222B38,#111620 58%,#38485C)}
.g4{background:linear-gradient(150deg,#452827,#201312 60%,#663A31)}
.g5{background:linear-gradient(150deg,#2F3427,#171A13 58%,#4E563B)}
.g6{background:linear-gradient(150deg,#2A2738,#151321 58%,#443E5E)}

.chip{display:inline-block;background:var(--chip-bg);color:var(--chip-ink);
  font-family:var(--f-disp);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 14px}
.kicker{font-family:var(--f-disp);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.badge{display:inline-block;background:var(--flag);color:#fff;font-family:var(--f-disp);
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;align-self:flex-start}

/* hero carousel */
.hero{position:relative;margin-top:34px;overflow:hidden}
.track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 100%;position:relative;aspect-ratio:16/8.4;display:flex;align-items:flex-end}
.slide .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,7,.86),rgba(8,8,7,.34) 46%,rgba(8,8,7,.04))}
.slide .stxt{position:relative;padding:34px;max-width:860px}
.slide h2{margin-top:16px;color:#fff;font-size:clamp(24px,3.9vw,46px)}
.slide .by{margin-top:14px;font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.76);
  text-transform:uppercase}
.arrows{position:absolute;top:0;right:0;display:flex;background:var(--chip-bg)}
.arrows button{width:58px;height:54px;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--chip-ink)}
.arrows button + button{border-left:1px solid var(--rule)}
.arrows button:hover{background:var(--wash)}
.arrows svg{width:22px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}

/* section head */
.shead{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:72px 0 26px}
.shead h2{font-size:15px;letter-spacing:.18em}
.shead .all{font-family:var(--f-disp);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.shead .all:hover{color:var(--ink)}
.hr{height:1px;background:var(--ink);margin-bottom:26px}

/* post grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 30px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 34px}
.post{display:flex;flex-direction:column}
.post .ph{aspect-ratio:4/3;margin-bottom:18px}
.grid2 .post .ph{aspect-ratio:16/10}
.post .kicker{margin-bottom:10px}
.post .badge{margin-bottom:10px}
.post h3{font-size:19px}
.grid2 .post h3{font-size:25px}
.post p{margin:12px 0 0;font-size:14.5px;color:var(--ink-2)}
.rm{margin-top:16px;font-family:var(--f-disp);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;
  border-bottom:1.5px solid var(--ink);padding-bottom:4px;align-self:flex-start}
.post:hover .rm{color:var(--muted);border-bottom-color:var(--muted)}

/* issues */
.issues{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.issue .ph{aspect-ratio:176/250;margin-bottom:14px}
.issue .t{font-family:var(--f-disp);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
.issue .s{font-size:13px;color:var(--muted);margin-top:4px}

/* pickup band */
.band{margin-top:86px;background:var(--ink);color:var(--bg);padding:64px 40px;text-align:center}
.band h2{font-size:clamp(22px,3.2vw,36px);color:var(--bg);max-width:18ch;margin-inline:auto}
.band p{margin:20px auto 0;font-size:15px;color:rgba(244,243,239,.64);max-width:56ch}
.band .cta{display:inline-block;margin-top:28px;background:var(--bg);color:var(--ink);
  font-family:var(--f-disp);font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 34px}
.band .cta:hover{opacity:.82}

/* ---------- ӨГҮҮЛЛИЙН ХУУДАС ---------- */
.ahero{position:relative;aspect-ratio:16/7.6;display:flex;align-items:flex-end;
  margin-bottom:44px}
.ahero .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,7,.9),rgba(8,8,7,.4) 50%,rgba(8,8,7,.08))}
.ahero .atxt{position:relative;padding:40px;max-width:960px;margin-inline:auto;width:100%}
.ahero h1{margin-top:18px;color:#fff;font-size:clamp(26px,4.4vw,52px)}
.amark{max-width:760px;margin:0 auto}
.ameta{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:34px;
  font-size:13px;color:var(--muted)}
.ameta b{font-family:var(--f-disp);font-weight:700;color:var(--ink);letter-spacing:.06em;
  text-transform:uppercase;font-size:12px}
.share{margin-left:auto;display:flex;gap:8px}
.share a{width:34px;height:34px;border:1px solid var(--rule);display:grid;place-items:center}
.share a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.share svg{width:15px;height:15px;fill:currentColor}
.body{font-size:17.5px;line-height:1.75;color:var(--ink)}
.body p{margin:0 0 1.35em}
.body .lead{font-size:20px;line-height:1.6;color:var(--ink);font-weight:500}
.body h2{font-size:22px;margin:2em 0 .7em;text-transform:none;letter-spacing:-.01em}
.body blockquote{margin:2em 0;padding-left:22px;border-left:3px solid var(--ink);
  font-family:var(--f-disp);font-size:22px;line-height:1.3;font-weight:700;
  text-transform:none;letter-spacing:-.01em}
.body figure{margin:2.2em 0}
.body figure .ph{aspect-ratio:16/10}
.body figcaption{margin-top:10px;font-size:12.5px;color:var(--muted)}
.body ul{padding-left:20px}
.body li{margin-bottom:.5em}
.note{margin:2.4em 0 0;padding:18px 20px;background:var(--wash);font-size:14.5px;
  color:var(--ink-2)}
.tags{margin-top:38px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;gap:8px;flex-wrap:wrap}
.tag{border:1px solid var(--rule);padding:7px 13px;font-family:var(--f-disp);font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tag:hover{color:var(--ink);border-color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--rule);padding-block:56px 40px;margin-top:0}
.fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:36px}
.fcols h4{font-family:var(--f-disp);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;font-weight:700}
.fcols ul{margin:0;padding:0}
.fcols li{list-style:none;font-size:14px;margin-bottom:10px;color:var(--ink-2)}
.fcols li a:hover{color:var(--ink)}
.ftag{font-size:14px;color:var(--muted);margin:14px 0 0;max-width:30ch}
.soon{margin-top:16px;font-size:13px;color:var(--muted)}
.soon b{color:var(--ink-2)}
.sub{display:flex;border:1px solid var(--rule)}
.sub input{flex:1;border:0;background:none;padding:13px 14px;font-family:var(--f-body);
  font-size:13.5px;color:var(--ink);min-width:0}
.sub input::placeholder{color:var(--muted)}
.sub button{border:0;background:var(--ink);color:var(--bg);font-family:var(--f-disp);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:0 20px;cursor:pointer}
.fbot{margin-top:46px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted)}


/* газрын зураг */
.mapsec{margin-top:0}
.mapwrap{position:relative;aspect-ratio:16/9;border:1px solid var(--rule);
  background:var(--wash);overflow:hidden}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* хамтран ажиллах */
#partner{margin-top:86px}
.partner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.ptxt p{margin:0 0 16px;font-size:15.5px;color:var(--ink-2);max-width:54ch}
.pform{border:1px solid var(--rule);padding:26px}
.pform label{display:block;font-family:var(--f-disp);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pform input[type=email],.pform input[type=text]{width:100%;border:1px solid var(--rule);
  background:none;padding:13px 14px;font-family:var(--f-body);font-size:14.5px;
  color:var(--ink);margin-bottom:20px}
.pform input::placeholder{color:var(--muted)}
.pform input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.pform button{width:100%;border:0;background:var(--ink);color:var(--bg);
  font-family:var(--f-disp);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 20px;cursor:pointer}
.pform button:hover{opacity:.85}
.pform .fine{margin:14px 0 0;font-size:12.5px;color:var(--muted)}

@media (max-width:980px){
  .grid3{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
  .issues{grid-template-columns:repeat(2,1fr)}
  .partner{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .topin{height:auto;padding-block:14px;flex-wrap:wrap;gap:12px}
  .nav{order:3;width:100%;justify-content:flex-start;gap:18px}
  .grid3,.grid2{grid-template-columns:1fr;gap:44px}
  .slide{aspect-ratio:4/4.3}
  .slide .stxt{padding:22px}
  .arrows button{width:48px;height:46px}
  .band{padding:44px 22px}
  .ahero{aspect-ratio:4/4}
  .ahero .atxt{padding:22px}
  .body{font-size:16.5px}
  .body .lead{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.track{transition:none}}