/* tylerfrye.dev */
[data-theme="ember"]{--bg:#0b0c0f;--ink:#f2f2f0;--ink-2:#a3a6ad;--ink-3:#6b6f78;--hover:rgba(255,255,255,.035);--line:rgba(255,255,255,.08);--glow:transparent;--accent:#ff8a3d;--accent-2:#ffb27a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink-2);font:400 16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}
h1,h2,h3{font-family:"Inter Tight",Inter,sans-serif;color:var(--ink);letter-spacing:-.025em}
.left,.right{min-width:0}
/* left column */
.left{padding:150px 0 40px;display:flex;flex-direction:column}
.left h1{font-size:clamp(48px,7vw,76px);font-weight:800;line-height:1;margin-bottom:16px}
.role{font:600 21px "Inter Tight";color:var(--ink);margin-bottom:18px}
.role em{font-style:normal;color:var(--accent)}
.pitch{max-width:560px;font-size:18px}
.now{display:inline-flex;align-items:center;gap:10px;line-height:20px;margin-top:26px;font-size:13.5px;color:var(--ink-2)}
.socials{margin-top:30px;display:flex;gap:22px;align-items:center}
.socials a{color:var(--ink-3);transition:color .2s,transform .2s}
.socials a:hover{color:var(--ink);transform:translateY(-2px)}
.socials svg{width:22px;height:22px;fill:currentColor;display:block}
/* top bar */
.topbar{position:fixed;top:44px;left:0;right:0;z-index:40;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.topbar.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-color:var(--line)}
.topbar .in{max-width:780px;margin:0 auto;padding:0 32px;height:60px;display:flex;align-items:center;justify-content:space-between}
.topbar .nm{font:700 16px "Inter Tight";color:var(--ink);opacity:0;transition:opacity .3s}
.topbar.scrolled .nm{opacity:1}
.topbar ul{display:flex;gap:26px;list-style:none;font-size:14px}
.topbar a{transition:color .2s}.topbar ul a:hover,.topbar ul a.on{color:var(--ink)}
.topbar ul a.on{box-shadow:0 2px 0 var(--accent)}
/* right column */
section{scroll-margin-top:80px;margin-bottom:104px}
.sec-label{display:flex;align-items:center;gap:14px;margin-bottom:28px;font:500 15px/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.sec-label::before{content:counter(sec,decimal-leading-zero);counter-increment:sec;color:var(--accent)}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line);margin-left:4px}
.about p{margin-bottom:18px;font-size:16.5px}
.about strong{color:var(--ink);font-weight:500}
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:40px}
.numbers b{display:block;font:700 40px/1 "Inter Tight";color:var(--ink);letter-spacing:-.03em;margin-bottom:8px}
.numbers b span{color:var(--accent)}
.numbers div{font-size:13px;color:var(--ink-3)}
/* rows (experience/projects) */
.list{list-style:none}
.row{position:relative;display:grid;grid-template-columns:130px 1fr;gap:24px;padding:22px 24px;margin:0 -24px 12px;border-radius:12px;transition:opacity .25s,background .25s}
.row::before{content:"";position:absolute;inset:0;border-radius:12px;border:1px solid transparent;transition:border-color .25s,background .25s}
.row:hover::before{background:var(--hover);border-color:var(--line)}
.row > *{position:relative}
.row .when{font:500 12px/2 "JetBrains Mono";color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.row h3{font-size:18px;font-weight:600;line-height:1.35;margin-bottom:8px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.row h3 .at{color:var(--ink-2);font-weight:500}
.row h3 .arrow{display:inline-block;color:var(--ink-3);transition:transform .2s,color .2s}
.row:hover h3{color:var(--accent-2)}
.row:hover h3 .arrow{transform:translate(3px,-3px);color:var(--accent)}
.row p{font-size:15px}
.stack{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font:500 12.5px "JetBrains Mono";color:var(--accent)}
.fact{margin-top:12px;font-size:14px;color:var(--ink)}
.fact b{font:700 15px "Inter Tight";color:var(--accent)}
/* Takeoff visual */
.plan{display:block;width:100%;max-width:360px;margin-top:16px;border-radius:8px}
/* heatmap */
.skills{display:grid;grid-template-columns:130px 1fr;gap:10px 24px;font-size:15px}
.skills dt{display:flex;align-items:center;gap:8px;font:500 12px/2 "JetBrains Mono";color:var(--ink-3);text-transform:uppercase}
.skills dt .ph{width:18px;height:18px;color:var(--accent)}
.skills dd{color:var(--ink-2)}
.contact h2:not(.sec-label){font-size:34px;font-weight:700;margin-bottom:14px}
.contact .mail{font:700 clamp(22px,2.6vw,30px) "Inter Tight";color:var(--ink);background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:background-size .3s}
.contact .mail:hover{background-size:100% 2px}
footer{margin-top:72px;font-size:13px;color:var(--ink-3)}
.ph{display:block;flex:none}
.socials svg.ph{width:22px;height:22px}
.now .ph{width:16px;height:16px;color:var(--accent);margin-right:-2px}
.row h3 .arrow{align-self:center}
.row h3 .arrow .ph{width:15px;height:15px}
.mailrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.copy{all:unset;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px;border-radius:8px;border:1px solid var(--line);color:var(--ink-2);transition:color .2s,border-color .2s,background .2s}
.copy:hover{color:var(--ink);border-color:var(--ink-3);background:var(--hover)}
.copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.copy .ph{width:18px;height:18px}
.copy .ph-check{display:none;color:var(--accent)}
.copy.done .ph-copy{display:none}.copy.done .ph-check{display:block}
.copy .copied{font:500 13px Inter;color:var(--accent)}
.copy .copied:empty{display:none}
/* reveal */
/* content only starts hidden when JavaScript is running to reveal it */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
/* scheme bar (mock only) */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}
@media (max-width:700px){
  .topbar ul{gap:16px;font-size:13px}.topbar .nm{display:none}.topbar .in{justify-content:center}
  .left{padding-top:128px}
  .row{grid-template-columns:1fr;gap:4px;padding:18px 0;margin:0 0 8px}.row::before{display:none}
  .numbers b{font-size:30px}
  .skills{grid-template-columns:1fr;gap:2px}.skills dd{margin-bottom:10px}
}
.L{max-width:1240px;margin:0 auto;padding:0 40px;counter-reset:sec}
.L .left,.left.stick{padding:0}
section{margin-bottom:96px}
@media (min-width:900px){
  .stick{position:sticky;top:124px}
}
@media (max-width:899px){
  .L{padding:0 16px}
  .L .left,.left.stick{padding-top:128px;margin-bottom:56px}
  .split-tint{background:none!important}
}
@media (min-width:900px){
 .split{display:grid;grid-template-columns:1fr 1fr}
 .split-tint{position:sticky;top:44px!important;height:calc(100vh - 44px);padding:0 64px!important;display:flex;flex-direction:column;justify-content:center;background:color-mix(in srgb,var(--accent) 9%,var(--bg));border-right:1px solid var(--line);overflow:hidden}
 .split-tint .pin{position:relative;z-index:1}
 .split-tint h1{font-size:clamp(64px,8vw,116px)!important;line-height:.92;letter-spacing:-.045em}
 .split-tint .role{font-size:26px}.split-tint .pitch{font-size:19px}
 .sright{padding-left:72px!important;padding-right:40px!important}
}
@media (max-width:899px){.split-tint{padding:128px 16px 48px!important;background:none!important}}
/* no mock bar: the layout starts at the top of the window */
.topbar{top:0}
@media (min-width:900px){.split-tint{top:0!important;height:100vh!important}}
@media (max-width:899px){.L .left,.left.stick{padding-top:84px!important}}
@media (min-width:900px){
 .topbar{display:none}
 .frogp{background:radial-gradient(70% 50% at 45% 24%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),color-mix(in srgb,var(--accent) 6%,var(--bg))!important}
 .big-frog{display:block;width:min(260px,52%);margin:0 0 4px -12px;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
 .split-tint h1{font-size:clamp(60px,6.6vw,104px)!important}
 .sright{padding-top:110px!important}
 
 .pnav{margin:30px 0 26px}
 .pnav a{color:var(--ink-3);transition:color .2s}
 .pnav a:hover,.pnav a.on{color:var(--ink)}
 .pnav .n{font:500 11px "JetBrains Mono";color:var(--accent);opacity:.0;transition:opacity .2s}
 .pnav.v{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:24px}
 
 .pnav.v a{z-index:1;position:relative;display:flex;align-items:baseline;gap:12px;padding:7px 0;font:600 12.5px Inter;letter-spacing:.13em;text-transform:uppercase}
 .pnav.v .n{opacity:1;color:var(--ink-3);transition:color .2s}
 .pnav.v a.on .n{color:var(--accent)}
 .pnav.v a::before{box-sizing:border-box;content:"";position:absolute;left:-28px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--bg);border:2px solid color-mix(in srgb,var(--ink) 25%,transparent);transition:background .2s,border-color .2s,box-shadow .2s;z-index:1}
 .pnav.v a.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
 
 
}
@media (min-width:900px){
 .ra .pin{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
 .ra .big-frog{margin:0 -12px 4px 0}
 .ra .socials{justify-content:flex-end}
 .ra .pnav.v{align-items:flex-end}
 .ra .pnav.v{padding-left:0;padding-right:24px}
 .ra .pnav.v a{flex-direction:row-reverse}
 .ra .pnav.v a::before{left:auto;right:-28px}
}
@media (min-width:900px){
 .fz1 .big-frog{width:320px}
 
 
 
 
}
@media (max-width:899px){.pnav{display:none}.big-frog{width:180px}}
.gs .rv{opacity:1;transform:none;transition:none}
.split-tint h1>div[aria-hidden]{padding-bottom:.24em!important;margin-bottom:-.24em!important;overflow-x:visible!important;overflow-y:clip!important;padding-left:.12em!important;padding-right:.12em!important;margin-left:-.12em!important;margin-right:-.12em!important}
.sec-label::after{transform-origin:left;transform:scaleX(var(--lw,1))}
.jterm{margin-top:16px;max-width:520px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#07080a}
.jterm .bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.jterm .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.jterm .bar span{margin-left:8px;font:12px "JetBrains Mono";color:var(--ink-3)}
.jterm pre{margin:0;padding:14px 16px;min-height:274px;font:12.5px/1.75 "JetBrains Mono",monospace;color:var(--ink-2);white-space:pre}
.jterm .pr{color:var(--accent)}.jterm .c{color:var(--ink)}
.jterm .ok{color:#8fd16a;font-weight:400}.jterm .wait{color:var(--accent);font-weight:400}.jterm .run{color:var(--accent-2);font-weight:400}
.jterm .cur{display:inline-block;width:8px;height:15px;vertical-align:-3px;background:var(--ink-2);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.split-tint canvas.dots{position:absolute;inset:0;z-index:0;pointer-events:none}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.copy.shine::before{content:"";position:absolute;inset:-1px;border-radius:9px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 62%,color-mix(in srgb,var(--accent) 60%,transparent) 80%,var(--accent-2) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:sweep 4.5s linear infinite,sweepfade 4.5s linear infinite}
@keyframes sweep{0%{--ang:0deg}40%,100%{--ang:360deg}}
@keyframes sweepfade{0%{opacity:0}4%{opacity:1}36%{opacity:1}40%,100%{opacity:0}}
.pnav.v[class*="ns-"] a::before{display:none}
.pnav.v.ns-under{padding-right:0}
.pnav.v.ns-under a{padding-bottom:9px}
.pnav.v.ns-under .t{position:relative}
.pnav.v.ns-under .prog{position:absolute;left:0;right:.13em;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.pnav.v.ns-under a.on .prog{transform:scaleX(1)}
/* phones: the content column needs only a little room below the intro */
@media (max-width:899px){.sright{padding-top:24px!important}}
/* the frog sits in a <picture> for the WebP version; let the img lay out as a direct child */
.split-tint picture{display:contents}
.big-frog{height:auto}