/* brendansb.com — "Spill" direction. Black ground, white type, acid accent, liquid chrome. */
:root{
  --bg:#0b0b0d; --fg:#f2f2f4; --mute:#8d8d96; --dim:#5a5a63; --line:#232329; --panel:#121215;
  --acid:#d7ff3a;
  --chrome:linear-gradient(104deg,#5c5d64 0%,#f7f7fa 14%,#9d9fa7 26%,#ffffff 40%,#4d4e55 54%,#e6e6eb 68%,#86878f 82%,#fbfbfd 100%);
  --sans:"Archivo",Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",Menlo,monospace;
  --gutter:clamp(16px,2.4vw,32px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;padding:0 var(--gutter) 0}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acid)}
img,video{max-width:100%;display:block}
button.linkish{all:unset;cursor:pointer;color:inherit;font:inherit}
button.linkish:hover{color:var(--acid)}
:focus-visible{outline:1px solid var(--acid);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.acid{color:var(--acid)}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}

/* chrome text */
.chrome{background:var(--chrome);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 11s ease-in-out infinite alternate}
.chrome:hover{color:transparent;filter:brightness(1.15)}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}

/* nav */
.nav{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 14px;background:linear-gradient(var(--bg) 70%,transparent)}
.nav .brand{font-size:15px;letter-spacing:.01em;font-weight:500}
.nav nav{display:flex;gap:1.8em;font-size:14px}

/* ---------- home pile ---------- */
.pile{position:relative;height:190vh;min-height:1400px;margin:0 calc(-1 * var(--gutter));}
.still{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1vw);z-index:var(--z,1);transform:translateY(var(--py,0px)) rotate(var(--r));transition:transform .35s cubic-bezier(.2,.7,.2,1),z-index 0s;padding:0;background:var(--chrome);background-size:260% 100%}
.still img{width:100%;height:auto;transition:opacity .3s}
.still:hover{z-index:30;transform:translateY(calc(var(--py,0px) - 6px)) rotate(0deg) scale(1.035);padding:3px;animation:shimmer 2.2s linear infinite;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.pile:hover .still:not(:hover) img{opacity:.78}
.tag{position:absolute;z-index:5;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);color:var(--dim);white-space:nowrap;animation:drift 22s ease-in-out infinite alternate;animation-delay:var(--d,0s);pointer-events:none}
.tag.acid{color:var(--acid)}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(1.2vw,-.8vh)}}
.cursor-label{position:fixed;left:0;top:0;z-index:50;pointer-events:none;color:var(--acid);transform:translate(14px,18px);opacity:0;transition:opacity .15s;white-space:nowrap}
.cursor-label.on{opacity:1}

.home-list{padding:12vh 0 8vh;border-top:1px solid var(--line);margin-top:4vh}
.home-list ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 32px}
.home-list li a{display:flex;justify-content:space-between;gap:1em;border-bottom:1px solid var(--line);padding:10px 0}
.home-list .k{color:var(--mute)}
.home-list li a:hover .k{color:var(--acid)}

/* ---------- index overlay ---------- */
.index{position:fixed;inset:0;z-index:60;background:rgba(11,11,13,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:18px var(--gutter) 40px;overflow:auto;display:grid;grid-template-rows:auto 1fr auto;gap:5vh}
.index-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--mute)}
.index-list{list-style:none;margin:0;padding:0;align-self:center}
.index-list li a{display:grid;grid-template-columns:3em 1fr auto auto;gap:1.5em;align-items:baseline;padding:.28em 0;border-bottom:1px solid var(--line);font-size:clamp(26px,4.6vw,60px);font-stretch:72%;font-weight:500;letter-spacing:-.02em;line-height:1.05}
.index-list li a:hover{color:var(--acid)}
.index-list .n,.index-list .k,.index-list .y{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-stretch:100%;font-weight:400;color:var(--mute)}
.index-list li.current a{color:var(--acid)}
.index-list .soon{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-stretch:100%;font-weight:400;color:var(--dim);margin-left:1em}
.index-foot{color:var(--mute)}
.index[hidden]{display:none}
body.index-open{overflow:hidden}

/* ---------- project ---------- */
.project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:var(--gutter);padding:6vh 0 8vh}
.meta{position:sticky;top:64px;align-self:start;display:grid;gap:.6em;min-width:0}
.meta h1{font-size:clamp(30px,4vw,56px);font-stretch:80%;font-weight:500;letter-spacing:-.02em;line-height:1}
.meta .role{font-size:16px;margin:0}
.meta .kind,.meta .crumb{color:var(--mute);margin:0}
.credits{list-style:none;margin:1.2em 0 0;padding:0;color:var(--mute);display:grid;gap:.4em;text-transform:none;letter-spacing:.02em;font-size:12px}
.links{list-style:none;margin:1.4em 0 0;padding:0;display:grid;gap:.4em;font-size:14px}
.links a{color:var(--acid)}
.links a:hover{color:var(--fg)}
.media{display:grid;gap:var(--gutter);min-width:0}
.media figure{margin:0}
.media img{width:100%;height:auto}
.media video{width:100%;aspect-ratio:16/9;background:#000}
.soon-note{color:var(--mute)}
.pager{display:flex;justify-content:space-between;gap:1em;border-top:1px solid var(--line);padding:18px 0 40px;color:var(--mute)}
.pager a:hover{color:var(--acid)}

/* ---------- projects list ---------- */
.projects{padding:4vh 0 10vh}
.projects .crumb{color:var(--mute);margin:0 0 2vh}
.plist{list-style:none;margin:0;padding:0}
.plist li a{display:grid;grid-template-columns:2.6em 88px minmax(0,1fr) auto auto;gap:0 1.6em;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.plist .n{color:var(--mute)}
.plist .th{width:88px;height:62px;object-fit:cover;background:var(--panel);transition:transform .25s ease}
.plist .t{font-size:clamp(22px,3.2vw,44px);font-stretch:80%;font-weight:500;letter-spacing:-.02em;line-height:1.05;min-width:0}
.plist .r{color:var(--mute);font-size:14px;white-space:nowrap}
.plist .k{color:var(--mute);white-space:nowrap}
.plist li a:hover .t{color:var(--acid)}
.plist li a:hover .th{transform:scale(1.06)}
@media (max-width:760px){
  .plist li a{grid-template-columns:2.2em 64px minmax(0,1fr);gap:0 1em;padding:12px 0}
  .plist .th{width:64px;height:46px}
  .plist .r,.plist .k{display:none}
  .plist .t{font-size:22px}
}

/* ---------- information ---------- */
.info{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gutter);padding:8vh 0 10vh}
.info h1{font-size:clamp(34px,5vw,72px);font-stretch:78%;font-weight:500;letter-spacing:-.02em;line-height:.98}
.bio .role{color:var(--mute);margin:.6em 0 2em}
.bio p{max-width:58ch;font-size:17px;line-height:1.5;margin:0 0 1em}
.contact{display:grid;gap:.5em;align-content:start;padding-top:.6em}
.contact h2{color:var(--mute)}
.contact p{margin:0;font-size:16px}
.headshot{margin:3em 0 0;max-width:220px}
.headshot img{filter:grayscale(1) contrast(1.05)}

/* ---------- footer ---------- */
.foot{display:flex;justify-content:space-between;gap:1em;padding:18px 0 28px;color:var(--dim);border-top:1px solid var(--line)}
body.home .foot{border-top:0}

/* ---------- phones ---------- */
@media (max-width:760px){
  body{font-size:14px}
  .nav nav{gap:1.2em;font-size:13px}
  .pile{height:auto;min-height:0;display:grid;gap:14px;padding:2vh 0 4vh;margin:0}
  .still{position:static;width:auto;transform:none;max-width:88%}
  .still:nth-child(even){justify-self:end}
  .still:hover{transform:none;padding:0;animation:none}
  .still::after{content:attr(data-label);display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:6px 0 2px}
  .tag{display:none}
  .cursor-label{display:none}
  .project,.info{grid-template-columns:1fr;padding-top:3vh}
  .meta{position:static}
  .index-list li a{grid-template-columns:2.4em 1fr;font-size:clamp(24px,8vw,40px)}
  .index-list .k,.index-list .y{display:none}
  .foot{flex-direction:column;gap:.4em}
}
@media (hover:none){
  .cursor-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .chrome,.still:hover,.tag{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- contact ---------- */
.contact-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--gutter);padding:8vh 0 10vh}
.contact-page h1{font-size:clamp(34px,5vw,72px);font-stretch:78%;font-weight:500;letter-spacing:-.02em;line-height:.98}
.intro p{max-width:46ch;font-size:17px;line-height:1.5;margin:1em 0 0}
.form{display:grid;gap:18px;align-content:start}
.form label{display:grid;gap:6px}
.form .mono{color:var(--mute)}
.form input,.form textarea{width:100%;background:var(--panel);color:var(--fg);border:1px solid var(--line);padding:12px 14px;font:inherit;font-size:16px;border-radius:0}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--acid)}
.form textarea{resize:vertical;min-height:140px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{all:unset;cursor:pointer;justify-self:start;background:var(--acid);color:#0b0b0d;padding:12px 22px;font-weight:500;font-size:15px}
.submit:hover{filter:brightness(1.08)}
@media (max-width:760px){
  .contact-page{grid-template-columns:1fr;padding-top:3vh}
  .still{background:none}
  .still::after{background:none}
}