/* kevfreeney.com — one page. Consumes tokens.css. Grid + accordion + mobile drawer. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text-2);font-family:var(--ff-mono);font-size:var(--t-base);line-height:var(--lh-body);letter-spacing:var(--tr-tight);-webkit-font-smoothing:antialiased;transition:background var(--dur) var(--ease)}
a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease)}
::selection{background:var(--selection);color:var(--bg)}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--space-page)}
.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--grid-gap)}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--text);color:var(--bg);padding:var(--s-1);z-index:99}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color var(--dur)}
.nav.solid{border-color:var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{color:var(--text);letter-spacing:var(--tr-wide);text-transform:uppercase;font-size:var(--t-cap)}
.brand:hover{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:var(--s-3)}
.menu{display:flex;align-items:center;gap:var(--s-3)}
.menu a{font-size:var(--t-sm);letter-spacing:var(--tr-mid);text-transform:uppercase;color:var(--text-faint)}
.menu a:hover{color:var(--text)}
.toggle{background:none;border:0;color:var(--text-faint);cursor:pointer;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.toggle:hover{color:var(--accent)}
.hamburger{display:none;background:none;border:0;color:var(--text);cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center}
.hamburger .bar{display:block;width:20px;height:1.5px;background:currentColor;margin:3px 0;transition:transform var(--dur),opacity var(--dur)}
body[data-nav=open] .hamburger .bar:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
body[data-nav=open] .hamburger .bar:nth-child(2){opacity:0}
body[data-nav=open] .hamburger .bar:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

@media(max-width:760px){
  .hamburger{display:inline-flex}
  .menu{position:fixed;left:0;right:0;top:var(--nav-h);flex-direction:column;align-items:flex-start;gap:0;background:var(--bg);border-bottom:1px solid var(--border);padding:var(--s-2) var(--space-page) var(--s-5);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity var(--dur),transform var(--dur)}
  .menu a{width:100%;padding:var(--s-2) 0;font-size:var(--t-md);border-bottom:1px solid var(--border)}
  .menu .toggle{width:auto;height:auto;justify-content:flex-start;padding:var(--s-2) 0;gap:var(--s-1)}
  body[data-nav=open] .menu{opacity:1;transform:none;pointer-events:auto}
}

/* hero */
.hero{padding-block:var(--hero-pad-block)}
.hero-inner{grid-column:1 / span 9}
@media(max-width:860px){.hero-inner{grid-column:1 / -1}}
.eyebrow{font-size:var(--t-sm);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s-3)}
.hero h1{color:var(--text);font-weight:500;font-size:var(--t-2xl);line-height:var(--lh-snug);max-width:22ch;min-height:var(--tagline-reserve);display:flex;align-items:flex-start;flex-wrap:wrap}
.caret{display:inline-block;width:var(--caret-w);align-self:stretch;background:var(--accent);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.caret{animation:none}}
.hero .intro{margin-top:var(--s-2);max-width:52ch;font-size:var(--t-md);color:var(--text-2);line-height:var(--lh-body)}
.hero .contact{margin-top:var(--s-4);font-size:var(--t-cap);color:var(--text-muted)}
.hero .contact a{color:var(--text);border-bottom:1px solid var(--border-strong)}
.hero .contact a:hover{color:var(--accent);border-color:var(--accent)}

/* sections / accordion */
.sec{border-top:1px solid var(--border)}
.sec>summary,.sec-head{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding-block:var(--s-5);min-height:44px}
.sec>summary::-webkit-details-marker{display:none}
.sec .ix{color:var(--text-faint);font-size:var(--t-cap);letter-spacing:var(--tr-mid);margin-right:var(--s-2)}
.sec h2{display:inline;color:var(--text);font-weight:500;font-size:var(--t-lg);letter-spacing:0;text-transform:none}
.sec .l{display:flex;align-items:baseline}
.chev{width:8px;height:8px;border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.sec[open]>summary .chev{transform:rotate(-135deg)}
.sec>summary:hover .chev{border-color:var(--accent)}
.acc{padding-bottom:var(--s-7)}

/* work index */
.idx a{display:grid;grid-template-columns:46px 1fr auto;align-items:baseline;gap:var(--s-3);padding-block:var(--s-2);border-bottom:1px solid var(--border);min-height:44px;transition:padding-left var(--dur) var(--ease)}
.idx a:hover{padding-left:var(--s-2)}
.idx .n{color:var(--text-faint);font-size:var(--t-cap);transition:color var(--dur-fast)}
.idx a:hover .n{color:var(--accent)}
.idx .t{color:var(--text);font-size:15.5px}
.idx .m{color:var(--text-faint);font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;text-align:right}
@media(max-width:720px){.idx a{grid-template-columns:34px 1fr;gap:var(--s-2)}.idx .m{display:none}}
.more{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-3);cursor:pointer;list-style:none;color:var(--text-muted);font-size:var(--t-sm);letter-spacing:var(--tr-mid);text-transform:uppercase}
.more::-webkit-details-marker{display:none}
details[open]>.more{color:var(--accent)}

/* credits */
.cred{display:grid;grid-template-columns:140px 1fr;gap:var(--s-3) var(--s-5);align-items:start}
.cred dt{color:var(--text-faint);font-size:var(--t-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;padding-top:3px}
.cred dd{color:var(--text-2);line-height:var(--lh-body)}
@media(max-width:680px){.cred{grid-template-columns:1fr;gap:var(--s-1) 0}.cred dd{margin-bottom:var(--s-3)}}

/* chips */
.grouplabel{color:var(--text-faint);font-size:var(--t-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;margin:var(--s-3) 0 var(--s-1)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.chips span{border:1px solid var(--border);padding:6px 13px;border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--text-2)}
.chips.uses span{color:var(--text-muted)}

/* upcoming */
.up{border-bottom:1px solid var(--border);padding-block:var(--s-2);display:flex;justify-content:space-between;gap:var(--s-3);min-height:44px;align-items:baseline}
.up .t{color:var(--text)}
.up .m{color:var(--text-faint);font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em}

/* footer */
footer{border-top:1px solid var(--border);padding:var(--s-5) 0 var(--s-6)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2)}
footer a{color:var(--text-faint)}
footer a:hover{color:var(--accent)}
footer .small{font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}