/* media-kit.html: the Sheet composition. The page is one printout; Evan's notes sit in the margin outside it.
   Prints (and exports to assets/media-kit.pdf) on one US Letter page. */
.mk-bar{display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; padding-top:clamp(39px,6vw,78px); padding-bottom:clamp(39px,4vw,52px)}
.mk-sub{margin-top:6px; font-size:16px}
.mk-acts{display:flex; align-items:center; gap:13px 18px; flex-wrap:wrap}
.mk-btn{font:inherit; font-size:15px; font-weight:500; text-decoration:none; padding:10px 16px; border-radius:10px; background:var(--paper); color:var(--paper-ink); border:2px solid var(--paper-ink); box-shadow:4px 4px 0 var(--hard); cursor:pointer}
.mk-back{font-size:15px; color:var(--ink-muted)}

.mk{--mw:clamp(180px,18vw,250px); --mg:clamp(26px,3vw,52px); position:relative; display:grid; grid-template-columns:minmax(0,1fr) var(--mw); column-gap:var(--mg); max-width:1120px}
.mk-paper{position:absolute; left:0; top:0; bottom:0; right:calc(var(--mw) + var(--mg)); padding:0; z-index:0}
.mk-sec{grid-column:1; position:relative; z-index:1; color:var(--paper-ink); padding:0 clamp(24px,4.4vw,60px) clamp(22px,2.6vw,34px); }
.mk-sec + .mk-note + .mk-sec{border-top:0}
.mk-note{grid-column:2; align-self:start; margin:0; padding-top:clamp(28px,3vw,40px); font-size:clamp(26px,2vw,32px); max-width:12ch; z-index:2; position:relative}
.mk-head{padding-top:clamp(30px,3.6vw,48px)}
.mk-note.n1{padding-top:clamp(90px,8vw,120px)}

.mk-hd{margin-bottom:clamp(20px,2.6vw,34px)!important}
.mk-name{font-weight:200; font-size:clamp(52px,7vw,100px); line-height:.9; letter-spacing:-.06em; color:var(--paper-ink)}
.mk-who{margin-top:16px; font-weight:300; font-size:clamp(18px,1.8vw,22px); line-height:1.4; letter-spacing:-.015em; max-width:44ch}
.mk-bio{margin-top:10px; font-size:14px; color:var(--paper-ink-muted); max-width:60ch}

.mk-sec:not(.mk-head){padding-top:clamp(20px,2.4vw,30px)}
.mk-sec:not(.mk-head)::before{content:""; position:absolute; top:0; left:clamp(24px,4.4vw,60px); right:clamp(24px,4.4vw,60px); border-top:1px solid var(--paper-rule)}
.mk-h{font-size:13px; font-weight:500; letter-spacing:0; line-height:1.3; color:var(--paper-ink); display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; margin-bottom:14px}
.mk-h span{font-weight:400; color:var(--paper-ink-muted)}

.mk-stats .stat b{font-size:clamp(28px,3vw,42px)}
.mk-stats .stat span{font-size:13px}

.mk-lead{font-size:clamp(17px,1.6vw,20px); font-weight:300; letter-spacing:-.01em}
.mk-fmts{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px}
.mk-fmts li{padding:7px 0; border-top:1px dashed var(--paper-rule); font-size:15px}
.mk-fmts b{font-weight:500}
.mk-fmts span{color:var(--paper-ink-muted)}

.mk-rates{list-style:none; margin:0; padding:0}
.mk-rates li{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:8px 0; border-top:1px dashed var(--paper-rule); font-size:16px}
.mk-rates li:first-child{border-top:0; padding-top:0}
.mk-rates b{font-weight:200; font-size:clamp(34px,3.6vw,52px); line-height:1; letter-spacing:-.055em; font-variant-numeric:tabular-nums; white-space:nowrap}
.mk-rates b.ph,.ph{display:inline-block; font-weight:500; font-size:14px; letter-spacing:0; line-height:1.3; padding:6px 10px; border:1.5px dashed var(--paper-ink-muted); border-radius:6px; color:var(--paper-ink-muted); white-space:normal}

.mk-two{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:0 39px}
.mk-not{list-style:none; margin:0; padding:0}
.mk-not li{padding:4px 0; font-size:15px; color:var(--paper-ink-muted); text-decoration:line-through; text-decoration-color:rgba(10,15,20,.35)}
.mk-open{font-size:17px; font-weight:500}

.mk-end{display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; padding-bottom:clamp(34px,4vw,52px)!important}
.mk-k{font-size:13px; color:var(--paper-ink-muted)}
.mk-mail{font-weight:300; font-size:clamp(24px,2.6vw,34px); letter-spacing:-.035em; user-select:all; overflow-wrap:anywhere}
.mk-links{margin-top:8px; font-size:14px; color:var(--paper-ink-muted)}
.mk-sig{font-size:clamp(36px,3.6vw,48px); margin:0 0 6px; color:var(--paper-ink)}

@media screen and (max-width:860px){
  .mk{grid-template-columns:minmax(0,1fr)}
  .mk-paper{right:0}
  .mk-note{grid-column:1; padding:0 clamp(24px,4.4vw,60px) 18px; margin-top:-8px; color:var(--pen-paper); max-width:none}
  .mk-note.n1{padding-top:0}
  .mk-two{grid-template-columns:minmax(0,1fr); gap:18px}
  .mk-fmts{grid-template-columns:minmax(0,1fr)}
}

/* print: one Letter page, Ice scene whatever the screen theme, no site chrome */
@page{size:Letter; margin:.32in}
@media print{
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){
    --field-top:#fff; --field-bottom:#fff; --ink:#0A0F14; --ink-muted:#4A5560; --hard:#0A0F14; --tone:rgba(10,15,20,.4); --tape:rgba(206,218,230,.9);
    --pen:#1F45D3; --marker:#0A0F14; --u-a:60%; --u-b:100%; color-scheme:light}
  html,body{background:#fff!important}
  .field,.board,.top,.foot,.mk-bar,body::before{display:none!important}
  .wrap{padding:0!important; max-width:none}
  main{padding:0}
  .mk-wrap{padding-top:14px!important}
  .mk{--mw:132px; --mg:16px; max-width:none}
  .mk-sec{padding:0 30px 12px}
  .mk-sec:not(.mk-head){padding-top:12px}
  .mk-sec:not(.mk-head)::before{left:30px; right:30px}
  .mk-head{padding-top:26px}
  .mk-hd{margin-bottom:16px!important}
  .mk-name{font-size:64px}
  .mk-who{font-size:16px; margin-top:12px}
  .mk-bio{font-size:12px}
  .mk-h{font-size:11.5px; margin-bottom:9px}
  .mk-stats .stat{padding:0 10px}
  .mk-stats .stat:first-child{padding-left:0}
  .mk-stats .stat b{font-size:27px}
  .mk-stats .stat span{font-size:11px; margin-top:5px}
  .mk-lead{font-size:15px}
  .mk-fmts{margin-top:8px}
  .mk-fmts li{font-size:12.5px; padding:4px 0}
  .mk-rates li{font-size:14px; padding:5px 0}
  .mk-rates b{font-size:32px}
  .mk-rates b.ph,.ph{font-size:12px; padding:4px 8px}
  .mk-not li{font-size:12.5px; padding:2px 0}
  .mk-open{font-size:14px}
  .mk-mail{font-size:24px}
  .mk-links{font-size:12px}
  .mk-sig{font-size:38px}
  .mk-end{padding-bottom:28px!important}
  .mk-note{font-size:22px; padding-top:20px; max-width:none}
  .mk-note.n1{padding-top:84px}
  .eb-print::before{transform:translate(6px,6px)}
  /* the ink is placed for the screen layout; only the PDF export (which lays out at print width first) keeps it */
  html:not(.pdf) .eb-ink{display:none}
  *,*::before,*::after{animation:none!important; transition:none!important}
}
/* header line of the sheet (it is not inside .eb-print, so it carries its own) */
.mk-hd{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; font-size:13px; color:var(--paper-ink-muted); padding-bottom:12px; border-bottom:1px solid var(--paper-rule)}
.mk-hd b{font-weight:500; color:var(--paper-ink)}
.mk-stats{grid-template-columns:repeat(5,auto); justify-content:space-between}
.mk-stats .stat{padding:0 clamp(10px,1.6vw,22px)}
.mk-stats .stat b{white-space:nowrap}
.narrow-only{display:none}
@media screen and (max-width:860px){
  .mk-stats{grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch}
  .mk-stats .stat{padding:0 18px}
  .mk-stats .stat:nth-child(odd){padding-left:0}
  .wide-only{display:none} .narrow-only{display:block}
}
@media print{ .mk-hd{font-size:11px; padding-bottom:9px} .mk-stats .stat{padding:0 10px} .mk-stats .stat:first-child{padding-left:0} }
@media print{ .mk-stats{grid-template-columns:repeat(5,auto)!important; row-gap:0} .mk-stats .stat{border-left:1px solid var(--paper-rule)!important; padding:0 10px!important} .mk-stats .stat:first-child{border-left:0!important; padding-left:0!important} .narrow-only{display:none!important} .wide-only{display:block!important} }
@media print{
  .mk-head{padding-top:22px}
  .mk-name{font-size:56px}
  .mk-who{font-size:14.5px; margin-top:10px}
  .mk-bio{margin-top:6px}
  .mk-sec{padding-bottom:9px}
  .mk-sec:not(.mk-head){padding-top:10px}
  .mk-h{margin-bottom:7px}
  .mk-fmts li{padding:3px 0}
  .mk-rates li{padding:3px 0}
  .mk-rates b{font-size:28px}
  .mk-not li{padding:1px 0}
  .mk-end{padding-bottom:22px!important}
  .mk-mail{font-size:21px}
  .mk-sig{font-size:34px}
  .mk-note.n1{padding-top:70px}
  .mk-note{padding-top:14px}
}
@media screen{ .mk-stats .stat b{font-size:clamp(26px,2.5vw,36px)} .mk-stats .stat{padding:0 clamp(10px,1.3vw,18px)} .mk-stats .stat:first-child{padding-left:0} }
@media screen and (max-width:860px){ .mk-stats .stat b{font-size:clamp(28px,8vw,36px)} .mk-stats .stat:nth-child(odd){padding-left:0} }