/* Media kit (/media-kit) only: the page brands see. Shared components and tokens come from /styles.css. */

.page-media-kit section{padding-block:clamp(48px,6.5vw,90px);}

/* ---------- hero ---------- */
.page-media-kit .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,6vw,84px);padding:clamp(36px,5vw,72px) 0 0;}
.page-media-kit .hero .hi{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);}
.page-media-kit .hero h1{margin:6px 0 14px;font-size:clamp(3.2rem,1.8rem + 5vw,6rem);line-height:.96;letter-spacing:-.035em;}
/* the tagline on a strip of label-maker tape */
.tagline{
  display:inline-block;margin:0 0 24px;padding:7px 14px 8px;
  font:700 .8rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-on-accent);background:var(--color-accent);
  border-radius:3px;box-shadow:var(--shadow-sticker);transform:rotate(-1.5deg);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.page-media-kit .hero .lead{max-width:36rem;margin-bottom:24px;}
.page-media-kit .hero .photo-wrap{position:relative;justify-self:center;width:min(100%,340px);padding:26px 18px;}
.page-media-kit .hero .polaroid{max-width:none;padding:14px 14px 56px;transform:rotate(2.5deg);--tape-col:var(--tape-butter);}
.page-media-kit .hero .polaroid img{aspect-ratio:828/1100;object-fit:cover;}
.page-media-kit .hero .sticker{font-size:1.35rem;}
.mk-deco-star{--size:66px;--tilt:-14deg;top:0;left:-6px;}
.polaroid.noimg .ph{display:flex;align-items:center;justify-content:center;width:100%;height:320px;padding:20px;text-align:center;font:1.3rem var(--font-hand);color:var(--color-ink-soft);background:var(--color-paper);}

/* the four headline numbers on taped cards */
.statband{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:clamp(36px,5vw,56px);}
.statband .s{
  padding:30px 18px 22px;text-align:center;
  background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-xs);box-shadow:var(--shadow-paper);
  --tape-w:84px;--tape-h:24px;
}
.statband .s:nth-child(1){--tape-col:var(--tape-butter);--tape-tilt:-4deg;transform:rotate(-1deg);}
.statband .s:nth-child(2){--tape-col:var(--tape-mint);--tape-tilt:3deg;transform:rotate(.8deg);}
.statband .s:nth-child(3){--tape-col:var(--tape-peach);--tape-tilt:-2deg;transform:rotate(-.6deg);}
.statband .s:nth-child(4){--tape-col:var(--tape-sky);--tape-tilt:4deg;transform:rotate(1deg);}
.statband .n{font:clamp(2rem,1.4rem + 1.8vw,2.8rem)/1 var(--font-display);color:var(--color-ink);}
.statband .l{margin-top:10px;font-weight:700;color:var(--color-ink);}
.statband .sub{margin-top:2px;font-size:.85rem;color:var(--color-ink-soft);}
.srcline{grid-column:1 / -1;margin:2px 0 0;text-align:center;font-size:.8rem;color:var(--color-ink-faint);}
.mk-torn-first{margin-top:clamp(40px,5vw,56px);}

/* ---------- the opportunity: copy beside three sticky notes ---------- */
.opp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,6vw,84px);align-items:center;}
.opp h2{margin:6px 0 18px;font-size:var(--text-3xl);}
.opp p{margin:0 0 14px;font-size:var(--text-lg);line-height:1.7;color:var(--color-text);}
.pts{display:grid;gap:18px;}
.pt b{display:block;margin-bottom:4px;font:400 1.18rem/1.25 var(--font-display);color:var(--color-ink);}
.pt span{display:block;font-size:.95rem;color:var(--color-text);}
.opp .pt{padding:18px 22px 20px;background:var(--color-butter-soft);border-radius:var(--radius-xs);box-shadow:var(--shadow-paper);}
.opp .pt:nth-child(1){transform:rotate(-1.2deg);}
.opp .pt:nth-child(2){background:var(--color-mint-soft);transform:rotate(1deg) translateX(14px);}
.opp .pt:nth-child(3){background:var(--color-peach-soft);transform:rotate(-.6deg);}

/* ---------- partnerships: a strip of reels in phone frames ---------- */
.reel-marquee{margin-top:36px;padding:26px 0 34px;overflow:hidden;}
.reel-track{display:flex;gap:30px;width:max-content;animation:reelscroll 60s linear infinite;}
.reel-marquee:hover .reel-track,.reel-marquee:focus-within .reel-track{animation-play-state:paused;}
@keyframes reelscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.reel-card{flex:0 0 auto;display:block;width:212px;color:var(--color-ink);text-decoration:none;transition:transform .2s var(--ease-out);}
.reel-card:nth-child(3n+1){transform:rotate(-1.5deg);}
.reel-card:nth-child(3n){transform:rotate(1.4deg);}
.reel-card:hover{transform:translateY(-6px) rotate(0);}
.reel-card:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px;border-radius:14px;}
.phone{position:relative;width:212px;aspect-ratio:9/16;overflow:hidden;border:5px solid var(--color-charcoal);border-radius:28px;background:var(--color-charcoal);box-shadow:var(--shadow-lift);}
.phone img{display:block;width:100%;height:100%;object-fit:cover;}
.phone .play{
  position:absolute;top:50%;left:50%;display:grid;place-items:center;width:54px;height:54px;padding-left:4px;
  transform:translate(-50%,-50%);font-size:1.15rem;color:var(--color-accent);
  background:rgba(255,255,255,.94);border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.reel-meta{padding:14px 4px 0;text-align:center;}
.reel-meta b{display:block;font:400 1.08rem/1.2 var(--font-display);color:var(--color-ink);}
.reel-meta > span{display:block;margin-top:3px;font-size:.84rem;line-height:1.35;color:var(--color-ink-soft);}
.reel-meta > span:not(.reel-stats){min-height:4em;}
.reel-metrics{display:flex;justify-content:center;gap:14px;margin-top:8px;padding-top:9px;border-top:1.5px dashed var(--color-line);}
.reel-metrics span{display:flex;flex-direction:column;align-items:center;font-size:.72rem;line-height:1.2;color:var(--color-ink-soft);}
.reel-metrics b{font:400 1rem/1.15 var(--font-display);color:var(--color-ink);}
.reel-stats{display:inline-block !important;margin-top:8px !important;padding:3px 11px;font-size:.74rem !important;font-weight:700;white-space:nowrap;color:var(--color-accent-text) !important;background:var(--color-accent-wash);border:1px solid var(--color-accent-tint);border-radius:var(--radius-pill);}
.partner-intro{max-width:760px;margin:26px auto 30px;text-align:center;}
.partner-intro p{font-size:var(--text-lg);line-height:1.7;color:var(--color-text);}
.partner-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.partner-pts .pt{padding:22px 22px 20px;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-xs);box-shadow:var(--shadow-paper);}
.partner-pts .pt:nth-child(1){box-shadow:inset 0 4px 0 var(--color-butter),var(--shadow-paper);}
.partner-pts .pt:nth-child(2){box-shadow:inset 0 4px 0 var(--color-mint),var(--shadow-paper);}
.partner-pts .pt:nth-child(3){box-shadow:inset 0 4px 0 var(--color-peach),var(--shadow-paper);}

/* ---------- the receipts: tabs and a ledger of numbers ---------- */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:26px;}
.tab{
  min-height:40px;padding:0 16px;font:600 .9rem/1.2 var(--font-body);color:var(--color-ink-soft);
  background:var(--color-card);border:1.5px solid var(--color-line-strong);border-radius:var(--radius-pill);cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s,transform .12s;
}
.tab:hover{color:var(--color-ink);border-color:var(--color-ink);}
.tab.active{color:var(--color-on-accent);background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 2px 0 var(--color-accent-deep);transform:rotate(-1.5deg);}
.panel{display:none;}
.panel.active{display:block;animation:mk-fade .3s ease;}
@keyframes mk-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* a rubber stamp with the date range */
.stats-stamp{
  display:block;width:fit-content;margin:0 auto 22px;padding:5px 12px;
  font:700 .76rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-accent-text);border:2px solid var(--color-accent);border-radius:6px;transform:rotate(-2deg);
}
.pgrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;
  background-color:var(--color-card);
  background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:22px 22px;
  border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lift);
}
.pgrid .c{padding:26px 16px 22px;text-align:center;border-right:1.5px dashed var(--color-line);border-bottom:1.5px dashed var(--color-line);}
.pgrid .c:nth-child(4n){border-right:0;}
.pgrid .c:nth-last-child(-n+4){border-bottom:0;}
.pgrid .n{font:clamp(1.7rem,1.3rem + 1.2vw,2.3rem)/1 var(--font-display);color:var(--color-ink);}
.pgrid .l{margin-top:8px;font-weight:700;color:var(--color-ink);}
.metric-detail{margin-top:2px;font-size:.82rem;color:var(--color-ink-soft);}
.channel-card{
  max-width:560px;margin:0 auto;padding:34px 30px 28px;text-align:center;
  background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-xs);box-shadow:var(--shadow-lift);
}
.channel-card h3{margin:6px 0 6px;font-size:clamp(2rem,1.5rem + 1.6vw,2.6rem);}
.channel-card p{margin:0 0 8px;color:var(--color-ink-soft);}
.channel-card p:first-of-type{font-weight:700;color:var(--color-accent-text);}

/* ---------- audience ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start;}
.cols3 .card{padding:32px 24px 24px;--tape-w:96px;}
.cols3 .card:nth-child(2){transform:rotate(.6deg);}
.cols3 .card h3{display:flex;align-items:center;gap:9px;margin:0 0 18px;font-size:1.3rem;}
.cols3 .card h3.mk-gap{margin-top:26px;}
.cols3 .ic{flex:none;width:22px;height:22px;stroke:var(--color-accent);}
.bar{margin-bottom:16px;}
.bar .top{display:flex;justify-content:space-between;gap:10px;font-size:.95rem;color:var(--color-text);}
.bar .top b{color:var(--color-ink);}
.bar .track{height:12px;margin-top:6px;overflow:hidden;background:var(--color-paper);border-radius:var(--radius-pill);}
.bar .fill{height:100%;background:var(--color-accent);border-radius:var(--radius-pill);}
.bar .fill.mk-fill-pending{transform:scaleX(0);transform-origin:left center;}
.bar .fill.mk-fill-running{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.cols3 .row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1.5px dashed var(--color-line);color:var(--color-text);}
.cols3 .row:last-child{border-bottom:0;}
.cols3 .row b{color:var(--color-ink);}
.mk-small{font-size:.95rem;color:var(--color-ink-soft);}

/* numbers that count up as they come into view (driven by the page script) */
.mk-count{display:inline-grid;vertical-align:baseline;font-variant-numeric:tabular-nums;}
.mk-count > span{grid-area:1 / 1;white-space:nowrap;}
.mk-count .mk-count-final{opacity:0;}
.mk-count .mk-count-visual{pointer-events:none;}

/* ---------- top content ---------- */
.clip{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lift);}
.tbl{width:100%;border-collapse:collapse;font-size:.97rem;}
.tbl th{padding:14px 18px;text-align:left;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-soft);border-bottom:2px solid var(--color-ink);white-space:nowrap;}
.tbl td{padding:14px 18px;border-top:1.5px dashed var(--color-line);color:var(--color-text);vertical-align:top;}
.tbl tr:first-child td{border-top:0;}
.tbl .r b{color:var(--color-ink);background:linear-gradient(transparent 58%,var(--color-marker) 58% 92%,transparent 92%);}
.tbl .v b{color:var(--color-accent-text);}
.tbl .dt{white-space:nowrap;color:var(--color-ink-soft);}
.mk-paid{color:var(--color-ink-faint);}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,6vw,80px);align-items:center;}
.about .photo-wrap{justify-self:center;}
.mk-about-polaroid{max-width:260px;transform:rotate(-3deg);--tape-col:var(--tape-mint);}
.about > div:not(.photo-wrap){
  padding:40px clamp(24px,4vw,46px) 32px clamp(46px,5vw,62px);
  background-color:var(--color-card);
  background-image:linear-gradient(90deg,transparent 28px,var(--color-peach) 28px 29.5px,transparent 29.5px);
  border:1px solid var(--color-line);border-radius:var(--radius-xs);box-shadow:var(--shadow-lift);
}
.about p{margin:0 0 14px;font-size:var(--text-lg);line-height:1.72;color:var(--color-text);}
.pills{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;}
.pill{display:inline-block;padding:.2em .85em .28em;font:1.3rem/1.1 var(--font-hand);color:var(--color-ink);background:var(--color-butter);border-radius:var(--radius-pill);box-shadow:0 0 0 3px #fff,var(--shadow-sticker);transform:rotate(-2deg);}
.pill:nth-child(2){background:var(--color-mint);transform:rotate(2deg);}

/* ---------- work with me: price tags ---------- */
#work .wrap{position:relative;}
.mk-deco-bolt{--size:60px;--tilt:14deg;top:-14px;right:6%;}
.pkgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch;}
.pkg{
  position:relative;display:flex;flex-direction:column;padding:48px 22px 24px;text-align:center;
  background:var(--color-card);border:1px solid var(--color-line);border-radius:10px;box-shadow:var(--shadow-paper);
}
.pkg::before{   /* the punched hole of a price tag */
  content:"";position:absolute;top:16px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:var(--color-page);box-shadow:inset 0 1px 2px rgba(30,27,24,.3);
}
.pkg:nth-child(odd){transform:rotate(-1deg);}
.pkg:nth-child(even){transform:rotate(.8deg);}
.pkg h3{margin:0 0 10px;font-size:1.3rem;}
.pkg p{margin:0 0 18px;font-size:.95rem;color:var(--color-ink-soft);}
.pkg .price{margin-top:auto;font:1.55rem/1 var(--font-hand);color:var(--color-accent-text);}
.pkg.feat{color:var(--color-on-accent);background:var(--color-accent);border-color:var(--color-accent);box-shadow:var(--shadow-lift);}
.pkg.feat h3,.pkg.feat p,.pkg.feat .price{color:var(--color-on-accent);}
.pkg.feat::before{background:var(--color-page);}
#work .note{max-width:820px;margin-top:40px;}

/* ---------- contact: a postcard ---------- */
.page-media-kit .contact{
  position:relative;max-width:860px;margin:0 auto;padding:clamp(52px,6vw,72px) clamp(22px,6vw,80px);text-align:center;
  background-color:var(--color-card);
  background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:24px 24px;
  border:1px solid var(--color-line);border-radius:var(--radius-xs);box-shadow:var(--shadow-lift);
  transform:rotate(-.8deg);--tape-w:120px;--tape-h:30px;
}
.page-media-kit .contact h2{margin:6px 0 12px;font-size:var(--text-3xl);}
.page-media-kit .contact p{max-width:520px;margin:0 auto 26px;color:var(--color-ink-soft);}
.page-media-kit .contact .btn{min-height:54px;font-size:1.02rem;}
.mk-stamp{
  position:absolute;top:18px;right:20px;width:74px;height:88px;padding:8px;
  display:grid;place-items:center;background:var(--color-butter-soft);transform:rotate(5deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 4px,#0000 96%,#000) -6px -6px/12px 12px round;
          mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 4px,#0000 96%,#000) -6px -6px/12px 12px round;
}
.mk-stamp img{width:42px;height:42px;}

/* ---------- tablet ---------- */
@media (max-width:980px){
  .statband{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pkgs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pgrid .c:nth-child(4n){border-right:1.5px dashed var(--color-line);}
  .pgrid .c:nth-child(2n){border-right:0;}
  .pgrid .c:nth-last-child(-n+4){border-bottom:1.5px dashed var(--color-line);}
  .pgrid .c:nth-last-child(-n+2){border-bottom:0;}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  .page-media-kit .hero{grid-template-columns:minmax(0,1fr);padding-top:26px;text-align:center;}
  .page-media-kit .hero .photo-wrap{display:block;width:min(72%,250px);margin:0 auto;}
  .page-media-kit .hero .sticker{font-size:1.1rem;}
  .mk-deco-star{--size:48px;}
  .statband{gap:16px;}
  .statband .s{padding:26px 12px 18px;}
  .opp{grid-template-columns:minmax(0,1fr);}
  .opp .pt:nth-child(2){transform:rotate(1deg);}
  .partner-pts,.cols3,.about{grid-template-columns:minmax(0,1fr);}
  .cols3 .card:nth-child(2){transform:none;}
  .reel-card,.phone{width:176px;}
  .about > div:not(.photo-wrap){padding:36px 20px 26px 42px;}
  .page-media-kit .contact{transform:none;}
  .mk-stamp{top:12px;right:12px;width:56px;height:66px;}
  .mk-stamp img{width:30px;height:30px;}
}
@media (max-width:600px){
  .tbl .hm{display:none;}
  .tbl th,.tbl td{padding:12px 12px;}
  .pkgs{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:420px){
  .pgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .pgrid .c{padding:20px 8px 16px;}
}

@media (prefers-reduced-motion:reduce){
  .reel-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .reel-track{animation:none;}
  .reel-card:hover{transform:none;}
  .mk-count .mk-count-final{opacity:1;}
  .mk-count .mk-count-visual{visibility:hidden;}
  .bar .fill.mk-fill-pending{transform:none;transition:none;}
  .panel.active{animation:none;}
}