/* Kevin Yoder — working résumé · shared detail-page stylesheet (Clinical Minimal). Linked by every per-project detail page. Tokens drive light/dark; the viewer's toggle stamps data-theme on and wins over the OS media query. */ :root{ --bg:#ffffff; --surface:#f6f9fb; --surface-2:#eef4f7; --border:#e2e9ee; --border-soft:#edf2f5; --ink:#152229; --ink-dim:#566b73; --ink-faint:#8697a0; --teal:#0e7c86; --teal-deep:#0b5f66; --teal-tint:#e6f2f3; --teal-tint-ink:#0b5f66; --shadow:0 1px 2px rgba(21,34,41,.06),0 1px 1px rgba(21,34,41,.04); --shadow-hover:0 6px 20px -8px rgba(14,124,134,.28),0 2px 6px rgba(21,34,41,.06); --focus:#0e7c86; --maxw:66rem; --serif:Georgia,"Times New Roman","Iowan Old Style",serif; --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace; } @media (prefers-color-scheme: dark){:root{--bg:#0f1618; --surface:#141d20; --surface-2:#182326; --border:#25333a; --border-soft:#1c282d; --ink:#e0e8ea; --ink-dim:#95a5ab; --ink-faint:#63727a; --teal:#3bb3bd; --teal-deep:#5ac6cf; --teal-tint:#10353a; --teal-tint-ink:#8fd6dc; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-hover:0 8px 24px -10px rgba(0,0,0,.6); --focus:#3bb3bd;}} :root[data-theme="light"]{--bg:#ffffff; --surface:#f6f9fb; --surface-2:#eef4f7; --border:#e2e9ee; --border-soft:#edf2f5; --ink:#152229; --ink-dim:#566b73; --ink-faint:#8697a0; --teal:#0e7c86; --teal-deep:#0b5f66; --teal-tint:#e6f2f3; --teal-tint-ink:#0b5f66; --shadow:0 1px 2px rgba(21,34,41,.06),0 1px 1px rgba(21,34,41,.04); --shadow-hover:0 6px 20px -8px rgba(14,124,134,.28),0 2px 6px rgba(21,34,41,.06); --focus:#0e7c86;} :root[data-theme="dark"]{--bg:#0f1618; --surface:#141d20; --surface-2:#182326; --border:#25333a; --border-soft:#1c282d; --ink:#e0e8ea; --ink-dim:#95a5ab; --ink-faint:#63727a; --teal:#3bb3bd; --teal-deep:#5ac6cf; --teal-tint:#10353a; --teal-tint-ink:#8fd6dc; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-hover:0 8px 24px -10px rgba(0,0,0,.6); --focus:#3bb3bd;} *{box-sizing:border-box} body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.15rem,4vw,2.2rem)} a{color:inherit; text-decoration:none} ::selection{background:var(--teal-tint); color:var(--teal-deep)} :focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:3px} .topbar{position:sticky; top:0; z-index:6; background:color-mix(in srgb,var(--bg) 85%,transparent); backdrop-filter:blur(9px); border-bottom:1px solid var(--border-soft)} .topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:54px} .back{font-size:.86rem; color:var(--ink-dim); display:inline-flex; gap:.5rem; align-items:center} .back:hover{color:var(--teal)} .back .a{color:var(--teal)} .toggle{font-size:.74rem; color:var(--ink-dim); background:transparent; border:1px solid var(--border); padding:.36rem .7rem; border-radius:100px; cursor:pointer; display:inline-flex; gap:.45rem; align-items:center} .toggle:hover{color:var(--ink); border-color:var(--teal)} /* header */ header.h{padding:clamp(2.4rem,6vw,3.8rem) 0 1.6rem} .eyebrow{font-size:.73rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:1rem} h1{font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,5vw,3.15rem); line-height:1.06; letter-spacing:-.01em; margin:0 0 .7rem; text-wrap:balance} .tagline{font-size:clamp(1.05rem,2.2vw,1.24rem); color:var(--ink-dim); max-width:60ch; margin:0 0 1.2rem} .tagline .g{color:var(--teal-deep); font-weight:500} .badges{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center} .badge{font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.42rem; padding:.28rem .6rem; border-radius:100px} .badge .d{width:.46rem; height:.46rem; border-radius:100px; background:currentColor} .badge.play{background:var(--teal); color:#fff} @media (prefers-color-scheme:dark){.badge.play{color:#08191b}} :root[data-theme="dark"] .badge.play{color:#08191b} .badge.ghost{background:transparent; border:1px solid var(--border); color:var(--ink-dim)} /* action bar */ .actions{display:flex; flex-wrap:wrap; gap:.6rem; padding:1.2rem 0 0; border-top:1px solid var(--border); margin-top:1.4rem} .btn{display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:500; padding:.55rem .95rem; border-radius:7px; border:1px solid var(--border); background:var(--bg); color:var(--ink); transition:all .14s ease} .btn:hover{border-color:var(--teal); color:var(--teal)} .btn.primary{background:var(--teal); border-color:var(--teal); color:#fff} @media (prefers-color-scheme:dark){.btn.primary{color:#08191b}} :root[data-theme="dark"] .btn.primary{color:#08191b} .btn.primary:hover{background:var(--teal-deep); color:#fff} :root[data-theme="dark"] .btn.primary:hover{color:#08191b} .btn .k{opacity:.9} /* sections */ main{padding:clamp(1.6rem,4vw,2.6rem) 0 1rem} section{padding:0 0 clamp(1.8rem,4vw,2.6rem)} h2{font-family:var(--serif); font-weight:600; font-size:1.5rem; margin:0 0 .3rem; display:flex; align-items:baseline; gap:.7rem} h2 .em{font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)} h2 + .lead{color:var(--ink-dim); margin:.1rem 0 1.1rem; font-size:.98rem} p{margin:0 0 1rem; max-width:66ch} p.measure{max-width:66ch} strong{font-weight:600; color:var(--ink)} .gold,.tealt{color:var(--teal-deep)} code{font-family:var(--mono); font-size:.84em; background:var(--surface); color:var(--teal-deep); padding:.06rem .32rem; border-radius:4px; border:1px solid var(--border-soft)} .paths{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.9rem; margin:1.2rem 0} .pcard{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1.1rem 1.15rem} .pcard .t{font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:.5rem} .pcard h3{font-family:var(--serif); font-size:1.06rem; font-weight:600; margin:0 0 .4rem} .pcard p{font-size:.9rem; color:var(--ink-dim); margin:0} .diagram{border:1px solid var(--border); border-radius:8px; background:var(--surface); overflow-x:auto; margin:1rem 0; box-shadow:var(--shadow)} .diagram pre{margin:0; padding:1.15rem 1.25rem; font-family:var(--mono); font-size:.75rem; line-height:1.55; color:var(--ink-dim); white-space:pre} .diagram pre b{color:var(--teal-deep); font-weight:600} .diagram pre i{color:var(--ink); font-style:normal} .cap{font-size:.8rem; color:var(--ink-faint); margin:.5rem 0 0} /* on-brand SVG figures (replace the ASCII diagrams). Theme-aware via CSS vars; the wrapper is --bg so the --surface boxes inside read with contrast. */ .figsvg{border:1px solid var(--border); border-radius:8px; background:var(--bg); padding:1.1rem 1rem; margin:1rem 0; overflow-x:auto; box-shadow:var(--shadow)} .figsvg svg{display:block; margin:0 auto; max-width:100%; height:auto; font-family:var(--sans)} .figsvg .box{fill:var(--surface); stroke:var(--border)} .figsvg .accent{fill:var(--teal)} .figsvg .flow{stroke:var(--ink-faint); fill:none} .figsvg text{fill:var(--ink)} .figsvg .t-title{font-weight:600} .figsvg .t-dim{fill:var(--ink-dim)} .figsvg .t-faint{fill:var(--ink-faint)} .figsvg .t-teal{fill:var(--teal-deep); font-weight:600} .figsvg .t-mono{font-family:var(--mono)} ol.flow{counter-reset:s; list-style:none; margin:1.1rem 0; padding:0; display:grid; gap:.5rem} ol.flow li{position:relative; padding-left:2.5rem; color:var(--ink-dim); font-size:.95rem} ol.flow li::before{counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.02rem; font-family:var(--mono); font-size:.72rem; color:var(--teal); background:var(--teal-tint); border-radius:5px; padding:.14rem .4rem; font-weight:600} ol.flow li b{color:var(--ink)} /* skills & tech — the centerpiece */ .skills{border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--shadow)} .skills .row{display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding:.95rem 1.2rem; border-bottom:1px solid var(--border-soft)} .skills .row:last-child{border-bottom:0} .skills .cat{font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); padding-top:.28rem} .skills .set{display:flex; flex-wrap:wrap; gap:.4rem} .pill{font-size:.82rem; color:var(--teal-tint-ink); background:var(--teal-tint); border-radius:100px; padding:.24rem .68rem; white-space:nowrap} /* challenges */ .hard{display:grid; gap:1rem; margin-top:.4rem} .hc{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1.15rem 1.3rem; box-shadow:var(--shadow)} .hc .n{font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--teal); text-transform:uppercase} .hc h3{font-family:var(--serif); font-size:1.1rem; font-weight:600; margin:.35rem 0 .5rem} .hc p{margin:0; color:var(--ink-dim); font-size:.94rem; max-width:72ch} /* results metric tiles */ .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden} .tile{background:var(--bg); padding:1.2rem 1.2rem} .tile .v{font-family:var(--serif); font-weight:600; font-size:2rem; color:var(--teal-deep); font-variant-numeric:tabular-nums; line-height:1} .tile .v small{font-size:1rem} .tile .k{font-size:.82rem; color:var(--ink-dim); margin-top:.5rem; line-height:1.35} .callout{border-left:3px solid var(--teal); background:var(--surface); padding:1rem 1.2rem; border-radius:0 8px 8px 0; margin:1.2rem 0; color:var(--ink-dim); font-size:.94rem} .callout b{color:var(--ink)} figure.shot{margin:1.1rem 0; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow)} figure.shot img{display:block; width:100%; height:auto} figure.shot .ph{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 12px,var(--surface-2) 12px,var(--surface-2) 24px); color:var(--ink-faint); font-family:var(--mono); font-size:.78rem; text-align:center; padding:1rem} figure.shot figcaption{padding:.6rem 1rem; font-size:.84rem; color:var(--ink-dim); border-top:1px solid var(--border-soft)} .media-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem} footer.foot{border-top:1px solid var(--border); padding:1.8rem 0 3rem; color:var(--ink-faint); font-size:.88rem} footer.foot .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem} footer .foot a,footer a{color:var(--teal)} @media (max-width:640px){ body{font-size:16px} .skills .row{grid-template-columns:1fr; gap:.5rem} } @media (prefers-reduced-motion:reduce){*{transition:none !important}} /* ── Project-page tabs (spec 2026-08-01-project-page-tabs-design) ── */ .tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.1rem;border-bottom:1px solid var(--border)} .tab{appearance:none;background:none;border:1px solid var(--border);border-bottom:none; border-radius:8px 8px 0 0;padding:.5rem 1.05rem;font:inherit;font-size:.95rem; color:var(--ink-dim);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem} .tab:hover{color:var(--ink)} .tab.active{background:var(--bg);color:var(--teal);font-weight:600; border-color:var(--border);position:relative;top:1px} .tab.demo .ext{font-size:.85em} /* Tab panels: seat the content just under the active tab (which drops its bottom border to merge into this surface), and fade in when a tab makes it active. Class matches the tabs spec; JS toggles [hidden], so with JS off both stack. */ .panel{margin-top:calc(-1 * clamp(2rem,5vw,3rem));animation:panelIn .18s ease both} @keyframes panelIn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.panel{animation:none}} .jump{display:flex;gap:.9rem;flex-wrap:wrap;margin:.9rem 0 0;font-size:.92rem} .jump a{color:var(--teal);text-decoration:none} .jump a:hover{text-decoration:underline} /* ── Rendered recipe (GitHub-README bones, Clinical-Minimal skin) ── */ .recipe{max-width:72ch} .recipe h1{font-size:1.5rem;margin:1.4rem 0 .6rem} .recipe h2{display:block;font-size:1.2rem;margin:1.6rem 0 .5rem;border-bottom:1px solid var(--border);padding-bottom:.25rem} .recipe h3{font-size:1.05rem;margin:1.2rem 0 .4rem} .recipe p,.recipe li{line-height:1.65;overflow-wrap:anywhere} .recipe td{overflow-wrap:anywhere} .recipe pre{background:var(--surface);border:1px solid var(--border);border-radius:8px; padding: .85rem 1rem;overflow-x:auto;font-size:.86rem;line-height:1.5} .recipe code{font-family:ui-monospace,Consolas,monospace;font-size:.9em; background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:.08em .35em} .recipe pre code{background:none;border:none;padding:0} .recipe table{border-collapse:collapse;margin:.8rem 0;font-size:.92rem;display:block;max-width:100%;overflow-x:auto} .recipe th,.recipe td{border:1px solid var(--border);padding:.45rem .7rem;text-align:left} .recipe th{background:var(--surface)} .recipe blockquote{border-left:3px solid var(--teal);margin:.9rem 0;padding:.15rem 1rem;color:var(--ink-dim)} .recipe hr{border:none;border-top:1px solid var(--border);margin:1.4rem 0} /* ── Glossary terms + hover/focus tooltip ────────────────────────────── A term marked … gets a quiet dotted underline; hover, focus, or tap reveals a plain-language definition (from the central table in site.js) with a link out to the tech's homepage or the related project page. Restrained on purpose — the prose still reads without it. */ .gl{text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,var(--teal) 50%,transparent); text-underline-offset:.16em;cursor:help;color:inherit} .gl:hover,.gl:focus-visible{text-decoration-color:var(--teal)} .gl[data-gl-ready]{outline-offset:2px} .gl-tip{position:fixed;z-index:60;left:0;top:0;max-width:min(20rem,84vw); background:var(--bg);border:1px solid var(--border);border-radius:9px; box-shadow:var(--shadow-hover);padding:.68rem .8rem; font-family:var(--sans);font-size:.85rem;line-height:1.5;color:var(--ink-dim); opacity:0;visibility:hidden;transform:translateY(3px); transition:opacity .13s ease,transform .13s ease;pointer-events:none} .gl-tip.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .gl-tip-def strong{color:var(--ink)} .gl-tip-def .term{color:var(--teal-deep);font-weight:600} .gl-tip-link{display:inline-block;margin-top:.5rem;color:var(--teal); font-size:.8rem;font-weight:500;text-decoration:none} .gl-tip-link:hover{text-decoration:underline} @media (prefers-reduced-motion:reduce){.gl-tip{transition:none}}