/* Brett's round 2 notes: MySpace blue, his photo, the About section, the contact card and form. */

/* ---- MySpace blue. Lime became light blue on dark panels; these are the solid fills. ---- */
#m-home{--sy-blue:#003399;--sy-blue-bright:#2258d6}
#m-home .m-mono{background:var(--sy-blue);color:#fff}
#m-home .m-field{color:var(--tx);text-shadow:none}
#m-home .wk-lime{color:#fff;text-shadow:none}
#m-home .wk-lime::before,#m-home .m-field::before{background:var(--sy-blue)}
#m-home .m-herobtn,#m-home .wk-hire,#m-home .m-cvbox .m-btn:not(.m-ghost){--bc:var(--sy-blue);color:#fff}
#m-home .m-stack .m-ico{border-color:var(--sy-blue)}
#m-home .m-navdemo{background:var(--sy-blue);color:#fff;box-shadow:0 12px 34px -14px var(--sy-blue)}
#m-home .m-navdemo i{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
#m-home .m-endcard .m-btn:not(.m-ghost){--bc:var(--sy-blue-bright);color:#fff}
#m-home .m-cv .m-h2 em{color:var(--sy-blue);text-shadow:none}
#m-home .m-cvnote{color:var(--tx)}
#wk-resume .wkr-btn{background:var(--sy-blue);color:#fff;box-shadow:0 12px 28px -14px var(--sy-blue)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #m-home{--sy-blue:#2258d6}
  :root:not([data-theme="light"]) #m-home .m-cv .m-h2 em{color:#7fb0ff}
}
:root[data-theme="dark"] #m-home{--sy-blue:#2258d6}
:root[data-theme="dark"] #m-home .m-cv .m-h2 em{color:#7fb0ff}

/* ---- the name line and the claim ---- */
#m-home .wk-h1a{display:block}
#m-home .wk-av{display:inline-block;vertical-align:middle;margin:0 .22em .08em 0;width:clamp(58px,6.6vw,84px);height:clamp(58px,6.6vw,84px);border-radius:16px;object-fit:cover;object-position:50% 25%;border:3px solid #fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
#m-home .wk-lime{font-size:.72em}
@media (max-width:560px){#m-home .wk-lime{font-size:min(.72em,10.4vw)}}
#m-home .wk-cta2 .wk-hire{min-width:112px}

/* ---- about ---- */
#m-home .wk-about{position:relative;z-index:1;box-sizing:border-box;max-width:1168px;margin:0 auto;padding:clamp(30px,5vw,70px) clamp(16px,4.4vw,56px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,60px)}
#m-home .wk-photo{margin:0;justify-self:center;box-sizing:border-box;width:min(100%,380px);padding:12px 12px 14px;background:#fff;border-radius:6px;box-shadow:0 34px 70px -32px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.14);transform:rotate(-2deg)}
#m-home .wk-photo img{display:block;width:100%;height:auto;border-radius:2px}
#m-home .wk-photo figcaption{margin-top:10px;text-align:center;color:#14171f;font:600 15px/1.3 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
#m-home .wk-abouth{margin:6px 0 18px}
#m-home .wk-abouth span{color:var(--tx);-webkit-text-stroke:0}
#m-home .wk-abouth .wk-abouth-b{color:var(--sy-blue)}
#m-home .wk-aboutp{margin:0 0 14px;max-width:58ch;color:var(--tx);font:400 18px/1.5 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
#m-home .wk-aboutbtns{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
#m-home .wk-aboutbtns .m-btn{min-height:48px;padding:0 16px;font-size:15px;white-space:nowrap}
#m-home .wk-aboutbtns .m-ghost{background:transparent;color:var(--tx);border:1px solid var(--ln);box-shadow:none}
@media (min-width:860px){
  #m-home .wk-about{grid-template-columns:minmax(260px,380px) minmax(0,1fr);align-items:center}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #m-home .wk-abouth .wk-abouth-b{color:#7fb0ff}
}
:root[data-theme="dark"] #m-home .wk-abouth .wk-abouth-b{color:#7fb0ff}

/* ---- contact card ---- */
#m-home .wk-endgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
#m-home .wk-endl{min-width:0}
#m-home .wk-endsub{margin:0 0 16px;max-width:44ch;color:#c7cfdd;font:400 17px/1.45 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
#m-home .wk-phone{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 4px}
#m-home .wk-phone a{color:#fff;text-decoration:none;font:600 clamp(24px,3.4vw,34px)/1.15 var(--mono)}
#m-home .wk-phone a:hover{text-decoration:underline}
#m-home .wk-phone span{color:#aab3c4;font:500 13px/1.2 var(--mono)}

/* ---- the message form ---- */
#m-home .wk-msg{min-width:0;box-sizing:border-box;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.04)}
#m-home .wk-msgh{margin:0 0 12px;color:#fff;font:700 19px/1.2 var(--disp);font-stretch:90%}
#m-home .wk-f{display:block;margin:0 0 10px}
#m-home .wk-f span{display:block;margin:0 0 4px;color:#c7cfdd;font:600 13px/1.3 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
#m-home .wk-f input,#m-home .wk-f textarea{display:block;box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#0c111c;color:#fff;font:400 16px/1.35 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
#m-home .wk-f textarea{min-height:112px;resize:vertical}
#m-home .wk-f input:focus,#m-home .wk-f textarea:focus{outline:2px solid #7fb0ff;outline-offset:1px;border-color:#7fb0ff}
#m-home .wk-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#m-home .wk-msgsend{width:100%;margin-top:4px}
#m-home .wk-msgsend[disabled]{opacity:.65;cursor:progress}
#m-home .wk-msgstatus{min-height:1.4em;margin:10px 0 0;color:#c7cfdd;font:500 14px/1.4 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
#m-home .wk-msgstatus[data-kind="ok"]{color:#8fe6ad}
#m-home .wk-msgstatus[data-kind="bad"]{color:#ffb9ad}
@media (min-width:900px){
  #m-home .wk-endgrid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;align-items:start}
}

/* ---- the 2007 view's photo ---- */
#wk-2007 .wk7-photo img{display:block;width:120px;max-width:none;height:auto;border:1px solid #6699cc}

/* ---- plain and print ---- */
:root[data-plain] #m-home .wk-photo{transform:none;box-shadow:none;border:1px solid #bbb}
@media print{#m-home .wk-about,#m-home .wk-msg{display:none}}