/* Chris Kern — editorial dark studio portfolio. Colors and fonts come from the shared editor. */
:root{
  --hot:#ff4d00; --bg:#0a0a0a; --ink:#ece9e4; --on-hot:#111111;
  --i90:#d5d2ce; --i70:#a6a4a0; --i60:#8f8d8a; --i50:#7b7976; --i40:#64625f; --i10:#232322; --card:#141413;
  --font-head:"Syne",sans-serif; --font-body:"Space Grotesk",sans-serif; --font-mono:"Space Mono",monospace; --scale:1;
  --pad:clamp(20px,3vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:calc(16px*var(--scale));line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-head);color:var(--head-color,var(--ink));font-weight:var(--head-weight,800);font-style:var(--head-style,normal);text-transform:var(--head-case,none);letter-spacing:var(--head-track,-.03em);line-height:.9;margin:0}
a{color:inherit}
[hidden]{display:none!important}
main{overflow-x:clip}
.label,.kicker,.clock,.meta,small{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.label{font-size:.72em;color:var(--i60);margin:0}
.draft-bar{position:fixed;top:0;left:0;right:0;z-index:200;text-align:center;font-size:12px;padding:4px 12px;height:24px;line-height:16px;background:var(--hot);color:var(--on-hot);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* film grain: one static layer */
.grain{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* header: blends over everything like the reference */
.top{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;gap:28px;padding:22px var(--pad);mix-blend-mode:difference;color:#fff}
body:has(.draft-bar:not([hidden])) .top{top:24px}
.mark{font-family:var(--font-head);font-weight:800;font-size:1em;text-decoration:none;letter-spacing:-.01em;margin-right:auto}
.top nav{display:flex;gap:26px}
.top nav a{font-family:var(--font-mono);font-size:.72em;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .3s}
.top nav a:hover::after{right:0}
.clock{font-size:.72em;min-width:9.5em;text-align:right}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:110px var(--pad) 36px}
.kicker{font-size:.74em;color:var(--i70);margin:0}
.giant{display:flex;flex-direction:column;margin:auto 0 0;font-weight:var(--head-weight,800)}
/* script.js sizes each line to fill the width exactly, whatever the name length */
.g1,.g2{display:block;width:max-content;max-width:none;white-space:nowrap}
.g1{font-size:14vw;line-height:.86;letter-spacing:-.05em}
.g1{word-spacing:-.28em}
.g1 sup{font-size:.28em;vertical-align:.95em;margin-left:.04em;letter-spacing:0}
.g2{font-size:8vw;line-height:.9;letter-spacing:-.04em;color:var(--hot)}
.ava-edit .g1,.ava-edit .g2{white-space:normal;width:auto}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:34px}
.hero-copy{max-width:36em;color:var(--i70);margin:0;font-size:1.02em}
.avail{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72em;letter-spacing:.1em;margin:0;white-space:nowrap}
.avail i{width:8px;height:8px;border-radius:50%;background:var(--hot);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--i10);border-bottom:1px solid var(--i10);padding:20px 0}
.mq-track{display:flex;width:max-content;animation:mq 30s linear infinite}
.mq{font-family:var(--font-head);font-weight:700;font-size:clamp(1.3em,2.4vw,2em);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;padding:0 .5em;position:relative}
.mq::after{content:"✦";color:var(--hot);margin-left:1em;font-size:.7em;vertical-align:.15em}
@keyframes mq{to{transform:translateX(-50%)}}

/* blocks */
.block{padding:clamp(90px,12vw,170px) var(--pad) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:1px solid var(--i10);padding-bottom:22px;margin-bottom:34px}
.sec-head h2{font-size:clamp(2.6em,7vw,6em)}

/* manifesto */
.manifesto{font-family:var(--font-head);font-weight:700;font-size:clamp(1.9em,5vw,4.4em);line-height:1.04;letter-spacing:-.03em;margin:28px 0 70px;max-width:16em}
.manifesto .word{opacity:.16;transition:opacity .35s}
.manifesto .word.lit{opacity:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--i10)}
.stat{position:relative;padding:26px 18px 0 0}
.stat b{display:block;font-family:var(--font-head);font-size:clamp(2.1em,4.4vw,4.2em);font-weight:800;letter-spacing:-.04em;line-height:1}
.stat small{font-size:.7em;color:var(--i60)}

/* selected works: vertical scroll drives a horizontal track */
.selected{position:relative;height:280vh;margin-top:clamp(90px,12vw,170px)}
.sel-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:34px}
.sel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 var(--pad)}
.sel-title{display:flex;flex-wrap:wrap;gap:0 .25em;font-size:clamp(2.2em,6vw,6.4em)}
.sel-title span:last-child{color:var(--hot)}
.sel-track{display:flex;gap:clamp(14px,2vw,26px);padding:0 var(--pad);width:max-content;will-change:transform}
.sel{position:relative;margin:0;width:clamp(240px,26vw,380px);flex:none;cursor:pointer}
.sel video,.sel img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#000;filter:grayscale(.35);transition:filter .4s,transform .5s}
.sel:hover video,.sel:hover img{filter:none}
.sel figcaption{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding-top:12px;border-top:1px solid var(--i10);margin-top:12px}
.sel figcaption span{font-family:var(--font-mono);font-size:.72em;color:var(--hot)}
.sel figcaption b{font-family:var(--font-head);font-weight:700;font-size:1.05em}
.sel figcaption small{font-size:.66em;color:var(--i50)}

/* works (projects) */
.pfilters{display:flex;flex-wrap:wrap;gap:8px;margin:-14px 0 28px}
.pfilters button{font:inherit;font-family:var(--font-mono);font-size:.7em;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--i10);background:none;color:var(--i70);padding:8px 14px;border-radius:99px;cursor:pointer}
.pfilters button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:56px clamp(20px,3vw,40px)}
.work{cursor:pointer}
.w-img{overflow:hidden;background:var(--card);aspect-ratio:3/2}
.w-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s;filter:grayscale(.25)}
.work:hover .w-img img{transform:scale(1.05);filter:none}
.w-row{display:grid;grid-template-columns:3em 1fr auto;gap:12px;align-items:baseline;padding-top:16px}
.w-row .n{font-family:var(--font-mono);font-size:.74em;color:var(--hot)}
.w-row h3{font-size:clamp(1.2em,2vw,1.7em);line-height:1.05;text-transform:uppercase}
.w-row small{font-size:.66em;color:var(--i50);text-align:right}
.w-edit{margin-top:10px;border:1px dashed var(--hot);background:none;color:var(--hot);padding:8px 12px;cursor:pointer;font:inherit;font-size:.8em}

/* ethos */
.ethos{position:relative;height:100vh;height:100svh;min-height:560px;margin-top:clamp(90px,12vw,170px);overflow:hidden;display:flex;align-items:flex-end}
.ethos-bg{position:absolute;inset:0;margin:0}
.ethos-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(.4) brightness(.55)}
.ethos-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 2%,transparent 55%)}
.ethos-copy{position:relative;padding:0 var(--pad) clamp(40px,7vw,90px);max-width:1200px}
.ethos blockquote{margin:22px 0 22px}
.ethos blockquote p{font-family:var(--font-head);font-weight:800;font-size:clamp(2em,6vw,5.4em);line-height:.98;letter-spacing:-.04em;margin:0}
.cite{font-family:var(--font-mono);font-size:.74em;text-transform:uppercase;letter-spacing:.08em;color:var(--hot);margin:0}

/* services accordion */
.svc{border-bottom:1px solid var(--i10)}
.svc summary{display:grid;grid-template-columns:4.5em 1fr auto;align-items:center;gap:16px;padding:26px 0;cursor:pointer;list-style:none}
.svc summary::-webkit-details-marker{display:none}
.svc .n{font-family:var(--font-mono);font-size:.78em;color:var(--i50)}
.svc .t{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5em,4.4vw,3.6em);letter-spacing:-.03em;line-height:1;transition:color .25s,transform .3s}
.svc summary:hover .t{color:var(--hot);transform:translateX(8px)}
.svc summary i{font-style:normal;font-size:2em;font-weight:300;transition:transform .3s;color:var(--i60)}
.svc[open] summary i{transform:rotate(45deg);color:var(--hot)}
.svc-body{display:grid;grid-template-columns:4.5em 1fr;gap:16px;padding:0 0 28px}
.svc-body p{grid-column:2;margin:0 0 14px;max-width:40em;color:var(--i70)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-family:var(--font-mono);font-size:.68em;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--i10);padding:6px 12px;border-radius:99px;color:var(--i90)}

/* toolkit (awards-style list) */
.tk-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px)}
.tk-grid h2{font-size:clamp(2.6em,6.4vw,5.6em);margin:18px 0 22px}
.muted{color:var(--i60);max-width:24em}
.rows{border-top:1px solid var(--i10)}
.row{position:relative;display:flex;align-items:center;gap:14px;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--i10);font-family:var(--font-head);font-weight:700;font-size:clamp(1.05em,1.8vw,1.5em);transition:padding .3s,color .3s}
.row:hover{padding-left:12px;color:var(--hot)}
.row > span{display:flex;align-items:center;gap:14px}
.row small{font-size:.5em;color:var(--i50);font-weight:400}
.row.skill > span::before{content:"✦";color:var(--hot);font-size:.6em}
.row .logo{width:24px;height:24px}

/* journal */
.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.jr figure{margin:0 0 16px;overflow:hidden;background:var(--card);aspect-ratio:4/3}
.jr img,.jr video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s;filter:grayscale(.2)}
.jr:hover img,.jr:hover video{transform:scale(1.04)}
.meta{display:flex;justify-content:space-between;font-size:.68em;color:var(--i50);margin:0 0 10px}
.meta span:first-child{color:var(--hot)}
.jr h3{font-size:clamp(1.2em,1.9vw,1.6em);line-height:1.05;margin-bottom:10px}
.jr p:last-child{margin:0;color:var(--i70);font-size:.94em}

/* contact / footer */
.contact{padding:clamp(110px,14vw,200px) var(--pad) 40px;border-top:1px solid var(--i10);margin-top:clamp(90px,12vw,170px)}
.talk{display:flex;flex-direction:column;text-decoration:none;font-family:var(--font-head);font-weight:800;font-size:clamp(3em,13vw,13em);line-height:.84;letter-spacing:-.05em;margin:24px 0 60px}
.talk span:last-child{color:var(--hot)}
.talk em{font-style:normal;display:inline-block;transition:transform .35s}
.talk:hover em{transform:translate(.1em,-.1em) rotate(-10deg)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--i10);padding-top:26px}
.foot-cols small{font-size:.68em;color:var(--i50)}
.foot-cols p{margin:8px 0 0;color:var(--i90);overflow-wrap:anywhere}
.socials{display:flex;gap:12px;flex-wrap:wrap}
.socials a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--i10);border-radius:50%}
.socials a:hover{border-color:var(--hot)}
.socials .logo{width:16px;height:16px;background:var(--ink)}
.socials a:hover .logo{background:var(--c,var(--hot))}
#ava-contact-links{padding-top:22px!important;gap:10px!important}
#ava-contact-links a{display:inline-flex!important;align-items:center;gap:8px;border:1px solid var(--i10);border-radius:99px;padding:7px 14px;text-decoration:none!important;font-size:.85em}
.foot{padding:20px var(--pad) 32px;font-family:var(--font-mono);font-size:.7em;text-transform:uppercase;letter-spacing:.08em;color:var(--i50)}
.label-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot a{text-decoration:none}

/* modal */
.modal{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px)}
.modal-box{position:relative;width:min(920px,100%);max-height:90vh;overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;background:var(--card);border:1px solid var(--i10)}
.m-media{background:#000}
.m-media img,.m-media video{width:100%;height:100%;max-height:90vh;object-fit:contain;display:block}
.m-media:empty{display:none}
.modal-box:has(.m-media:empty){grid-template-columns:1fr}
.m-body{padding:clamp(22px,4vw,40px)}
.m-body small{font-size:.7em;color:var(--hot)}
.m-body h2{font-size:clamp(1.6em,3vw,2.4em);line-height:1;margin:12px 0 16px;text-transform:uppercase}
.m-body p,.m-body li{color:var(--i70);font-size:.95em}
.m-tools{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.m-tools span{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.68em;text-transform:uppercase;border:1px solid var(--i10);border-radius:99px;padding:5px 10px}
.m-tools .logo{width:14px;height:14px}
.m-result{border-left:3px solid var(--hot);padding:10px 14px;background:var(--bg);color:var(--ink)!important}
.m-result b{display:block;font-family:var(--font-mono);font-size:.7em;color:var(--hot)}
.x{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--i40);background:var(--bg);color:var(--ink);font-size:1.3em;cursor:pointer}

/* brand logos */
.logo{display:inline-block;flex:none;width:18px;height:18px;background:var(--c,var(--ink));-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;font-style:normal}
.logo.fav{-webkit-mask:none;mask:none;background-color:#fff;background-size:80%;background-position:center;background-repeat:no-repeat;border-radius:4px}
.logo.mono{-webkit-mask:none;mask:none;display:inline-grid;place-items:center;background:var(--hot);color:var(--on-hot);font-size:.55em;font-weight:800;border-radius:4px}

/* edit mode: no sticky scroll, everything visible */
.ava-edit .selected{height:auto}
.ava-edit .sel-sticky{position:static;height:auto;padding:30px 0}
.ava-edit .sel-track{flex-wrap:wrap;width:auto;transform:none!important}
.ava-edit .mq-track{animation:none;flex-wrap:wrap;width:auto}
.ava-edit .top{mix-blend-mode:normal;background:var(--bg);color:var(--ink)}

@media (max-width:900px){
  .top nav{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding-bottom:22px}
  .works{grid-template-columns:1fr}
  .tk-grid{grid-template-columns:1fr}
  .journal{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .modal-box{grid-template-columns:1fr}
  .m-media img,.m-media video{max-height:55vh}
  /* phones: swipe the selected works instead of the sticky scroll */
  .selected{height:auto}
  .sel-sticky{position:static;height:auto;padding:20px 0}
  .sel-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .sel{scroll-snap-align:start;width:72vw}
  .svc summary{grid-template-columns:3em 1fr auto}
  .svc-body{grid-template-columns:3em 1fr}
}
@media (max-width:900px){
  h2,h3{overflow-wrap:break-word}
  .works{grid-template-columns:minmax(0,1fr)}
  .sec-head h2{font-size:clamp(1.7em,9.2vw,4em)}
  .sel-head{flex-direction:column;align-items:flex-start;gap:8px}
  .sel-title{font-size:clamp(1.6em,9vw,4em)}
  .svc .t{font-size:clamp(1.05em,6.2vw,2.4em)}
  .svc summary{grid-template-columns:2.6em minmax(0,1fr) auto}
  .svc-body{grid-template-columns:2.6em minmax(0,1fr)}
  .tk-grid h2{font-size:clamp(2em,12vw,4em)}
  .talk{font-size:clamp(2.6em,17vw,8em)}
  .ethos blockquote p{font-size:clamp(1.7em,8.5vw,3.6em)}
  .manifesto{font-size:clamp(1.5em,7vw,3em)}
}
@media (max-width:520px){
  .w-row{grid-template-columns:2.4em minmax(0,1fr)}
  .w-row small{grid-column:2;text-align:left}
  .clock{display:none}
  .sec-head{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.mq-track,.avail i{animation:none}.manifesto .word{opacity:1}html{scroll-behavior:auto}}