/* /media-kit (Task 20.13), after pages.css. The link-in-bio media kit re-skinned in the site's @anaudr language:
   stickers, ink borders, hard shadows, tilted tiles. Without JS everything is visible (motion only adds entries). */

/* ---------- hero ---------- */
.mk-hero{padding:34px 0 20px;text-align:center;position:relative;isolation:isolate}
.mk-hero .wrap{position:relative}
.mk-hero .e{position:absolute;font-size:3rem;line-height:1;pointer-events:none}
.mk-hero .e1{left:12%;top:40px}.mk-hero .e2{right:12%;top:150px}
.mk-hello{position:absolute;right:16%;top:6px;z-index:2}
.mk-pol{display:inline-block;width:min(230px,58vw);margin:18px auto 22px;transform:rotate(-3deg)}
.mk-pol img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.mk-kit{font:italic 600 clamp(2.6rem,9vw,4.6rem)/.95 var(--f-acc);color:var(--magenta);margin:0}
.mk-hero h1{font:400 clamp(2.6rem,10vw,6rem)/1 var(--f-head);margin:4px 0 0;letter-spacing:-.02em;text-transform:uppercase}
.mk-hero h1 .acc{font:inherit;color:var(--tangerine)}
.mk-tag{margin:16px auto 0;max-width:30ch;font:italic 600 clamp(1.2rem,2.6vw,1.6rem)/1.35 var(--f-acc)}
.mk-badges{list-style:none;margin:22px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px}
.mk-badges .stk{font-size:.8rem}
@media (max-width:640px){.mk-hero .e{font-size:2.2rem}.mk-hero .e1{left:2%;top:70px}.mk-hero .e2{right:3%;top:210px}.mk-hello{right:2%}}

/* ---------- sections ---------- */
.mk-sec{padding-top:70px}
.mk-h2{margin:0 0 18px}
.mk-lead{font-size:1.12rem;font-weight:500;max-width:62ch;margin:0 0 14px}
.mk-hgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:900px){.mk-hgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mk-hon{border:3px solid var(--ink);border-radius:22px;padding:18px 14px;box-shadow:var(--hard-s);text-align:center;min-width:0}
.mk-hon:nth-child(odd){transform:rotate(-1.5deg)}.mk-hon:nth-child(even){transform:rotate(1.5deg)}
.mk-hon .he{display:block;font-size:2rem;line-height:1}
.mk-hon b{display:block;font:400 1rem/1.25 var(--f-head);margin-top:8px;overflow-wrap:break-word}
.mk-hon span:last-child:not(.he){display:block;font-size:.85rem;margin-top:6px;font-weight:600}

.mk-big{position:relative;background:var(--yellow);border:3px solid var(--ink);border-radius:28px;padding:26px 24px;box-shadow:10px 10px 0 var(--ink);margin-bottom:34px;max-width:760px}
.mk-big .n{font:italic 600 clamp(4.4rem,16vw,8rem)/.9 var(--f-acc)}
.mk-big .t{font:400 clamp(1.3rem,3vw,2rem) var(--f-head)}
.mk-big .c{display:block;margin-top:10px;font-weight:700}
.mk-big .ghost{position:absolute;right:20px;top:16px;font-size:3.4rem;transform:rotate(10deg)}
.mk-sgrid .st .s{font-size:.9rem;font-weight:700;margin-top:4px}
@media (min-width:900px){.mk-sgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.mk-blist{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:820px}
@media (min-width:900px){.mk-blist{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
.mk-blist li{display:flex;gap:14px;align-items:center;background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:14px 16px;box-shadow:var(--hard-s)}
.mk-blist b{font-weight:700}
.ico{flex:0 0 48px;height:48px;border-radius:14px;border:2.5px solid var(--ink);display:grid;place-items:center;font-size:1.4rem}
.mk-about .lbl:not(:first-child){margin-top:40px}

.mk-agrid{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:900px){.mk-agrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mk-agrid li{border:3px solid var(--ink);border-radius:20px;padding:16px 14px;box-shadow:var(--hard-s);min-width:0}
.mk-agrid li:nth-child(odd){transform:rotate(-1deg)}.mk-agrid li:nth-child(even){transform:rotate(1deg)}
.mk-agrid .em{font-size:1.6rem}
.mk-agrid b{display:block;font:400 1.05rem/1.2 var(--f-head);margin-top:6px}
.mk-agrid span:last-child{display:block;font-size:.9rem;font-weight:500;margin-top:4px}
.mk-quote{margin:26px 0 0;color:var(--magenta);font-size:clamp(1.5rem,3vw,2rem);max-width:40ch;transform:rotate(-1deg)}

.mk-bars{background:#fff;border:3px solid var(--ink);border-radius:26px;padding:22px 18px;box-shadow:var(--hard);max-width:820px}
.mk-bar{margin-bottom:16px}
.mk-bar .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 6px;font-weight:700}
.mk-bar .row b{font:italic 600 1.35rem var(--f-acc)}
.mk-bar .track{height:18px;border:2.5px solid var(--ink);border-radius:999px;background:var(--bone);overflow:hidden}
.mk-bar .track i{display:block;height:100%}
.mk-bars .note{margin:14px 0 0;font-size:.95rem}

.mk-brands .bband{margin-top:26px}
.mk-fmt{list-style:none;margin:0;padding:22px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;background:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:var(--hard)}
@media (min-width:900px){.mk-fmt{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mk-fmt li{display:flex;align-items:center;gap:10px;font-weight:600;line-height:1.25;min-width:0}
.mk-fmt .ico{flex:0 0 40px;height:40px;font-size:1.15rem}

.mk-camps{list-style:none;margin:0;padding:0;display:grid;gap:22px}
@media (min-width:760px){.mk-camps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mk-camps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-camp{border:3px solid var(--ink);border-radius:24px;padding:20px;box-shadow:var(--hard);background:#fff;display:flex;flex-direction:column;gap:10px;min-width:0}
.mk-camp h3{font:400 1.5rem/1.1 var(--f-head);margin:0}
.mk-camp .scrib{margin:0;color:var(--magenta)}
.mk-camp__logo img{max-height:44px;width:auto}
.mk-camp__link{font-weight:700;text-decoration:underline;margin-top:auto}
.mk-more{margin:30px 0 0}

.mk-rates{text-align:center}
.mk-rates p{font-weight:600;font-size:1.1rem;max-width:40ch;margin:0 auto}
.mk-rates .scrib{color:var(--magenta);font-size:2.2rem;margin-top:8px}
.mk-collab-wrap{padding-top:20px}
.mk-collab{position:relative;background:var(--ink);color:#fff;border:3px solid var(--ink);border-radius:30px;padding:34px 20px;box-shadow:10px 10px 0 var(--magenta);max-width:820px;margin:0 auto;scroll-margin-top:100px}
@media (min-width:768px){.mk-collab{padding:46px 44px}}
.mk-collab__stk{position:absolute;top:-18px;right:20px}
.mk-collab h2{font:400 clamp(1.8rem,4.6vw,3rem)/1.05 var(--f-head);margin:0 0 12px}
.mk-collab h2 .acc{color:var(--yellow)}
.mk-collab__text{margin:0 0 20px;color:rgba(255,255,255,.88);font-weight:500}
.mk-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:34px 0 0;font:700 1.5rem var(--f-hand)}
.mk-links a{color:var(--magenta);text-decoration:underline}

/* ---------- the request form (dark box) ---------- */
.req-form{display:grid;gap:4px}
.req-form .fld{margin:0 0 10px;display:flex;flex-direction:column;gap:6px}
.req-form label{font-weight:700;font-size:.95rem}
.req-form input,.req-form select,.req-form textarea{width:100%;border:2.5px solid var(--ink);border-radius:14px;padding:13px 14px;background:#fff;color:var(--ink)}
.req-form textarea{min-height:140px;resize:vertical}
.req-form [aria-invalid=true]{box-shadow:0 0 0 3px var(--coral)}
.req-form .err{color:var(--yellow);font-weight:700;font-size:.9rem}
.req-form .btn{background:var(--yellow);color:var(--ink);width:100%}
.req-form .form-status{margin:0;font-weight:700}
.req-form .form-status:empty{display:none}
.req-form .form-status:not(:empty){background:var(--mint);color:var(--ink);border:2.5px solid var(--ink);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.req-form .form-error{background:var(--peach);color:var(--ink);border:2.5px solid var(--ink);border-radius:14px;padding:12px 14px;font-weight:700;margin:0 0 12px}
.mk-collab .form-note{color:rgba(255,255,255,.85);margin-top:4px}
.mk-collab .form-note a{color:var(--yellow)}