/* ============================================================
   brianjberk.com — 2026
   Anton (display) + Lato (text). No frameworks, no jQuery.
   ============================================================ */

:root{
	--ink:#1a1918;
	--ink-2:#171615;
	--ink-3:#211f1e;
	--tile:#262422;
	--paper:#f2f0ed;
	--paper-2:#d6d0c9;
	--paper-3:#c6c0b9;
	--mute:#a29c95;
	--mute-2:#8d867e;
	--mute-3:#6f6862;
	--accent:#e8b44a;
	--line:rgba(242,240,237,.1);
	--line-2:rgba(242,240,237,.18);
	--bar-h:60px;
	--gap:3px;
	--pad:clamp(16px,3vw,44px);
	--sans:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	--display:'Anton',Impact,'Arial Narrow',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
	margin:0;background:var(--ink);color:var(--paper);
	font-family:var(--sans);font-weight:300;
	-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--paper)}
::selection{background:var(--accent);color:#181615}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{
	position:absolute;left:-9999px;top:0;z-index:200;
	padding:14px 20px;background:var(--accent);color:#181615;
	font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- top bar ---------- */
.bar{
	position:sticky;top:0;z-index:90;height:var(--bar-h);
	display:flex;align-items:center;justify-content:space-between;gap:20px;
	padding:0 var(--pad);
	background:rgba(20,19,18,.94);backdrop-filter:blur(14px);
	border-bottom:1px solid var(--line);
}
.bar__logo{
	display:flex;align-items:baseline;gap:6px;
	font-size:19px;letter-spacing:.02em;line-height:1;color:var(--paper);
	transform-origin:left center;
	transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.3,1);
}
/* site.js holds the wordmark back while the hero name is on screen, then
   lets it settle into the bar. Without JS it simply stays visible. */
.bar__logo.is-out{opacity:0;transform:translateY(9px) scale(1.08);pointer-events:none}
.bar__logo span{font-weight:300}
.bar__logo strong{font-weight:900}
.bar__nav{display:flex;gap:clamp(16px,2.4vw,36px)}
.bar__nav a{
	font:700 10px/1 var(--sans);letter-spacing:.22em;color:var(--mute);
}
.bar__nav a:hover,.bar__nav a:focus-visible{color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,8vw,116px) var(--pad) clamp(30px,4vw,52px);max-width:1680px}
.hero__name{
	margin:0;font-family:var(--display);font-weight:400;
	font-size:clamp(46px,11vw,168px);line-height:.86;letter-spacing:-.015em;
	color:var(--paper);
}
.hero__name span,.hero__name strong{display:block;font-weight:inherit}
.hero__name span{opacity:.62}
.hero__role{
	margin:clamp(18px,2.2vw,30px) 0 0;
	font:700 clamp(10px,1vw,13px)/1.5 var(--sans);
	letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
}

/* ---------- filter ---------- */
.filter{
	position:sticky;top:var(--bar-h);z-index:80;
	background:rgba(20,19,18,.94);backdrop-filter:blur(14px);
	border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.filter__row{
	display:flex;flex-wrap:wrap;align-items:center;gap:7px;
	padding:13px var(--pad);
}
.filter__label{
	font:700 9px/1 var(--sans);letter-spacing:.2em;color:var(--mute-3);padding-right:6px;
}
.chip{
	flex:none;cursor:pointer;
	font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
	padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;
	background:transparent;color:var(--mute);
	transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chip[data-chip="igaming"]{text-transform:none}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#181615}

/* ---------- work grid ---------- */
.grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(min(48%,340px),1fr));
	grid-auto-flow:row dense;
	gap:var(--gap);
	background:var(--ink);
}
.grid__empty{
	margin:0;padding:70px 24px;text-align:center;
	font:300 17px/1.6 var(--sans);color:var(--mute-2);
}
.tile{position:relative;background:var(--tile);aspect-ratio:16/9;overflow:hidden}
.tile--feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* A feature tile spans two rows but has nothing of its own to give it height —
   everything inside it is absolutely positioned. In the full grid the 16:9
   tiles beside it size those rows, but filter those away and the rows collapse,
   leaving the tile a few pixels tall. This gives it an intrinsic 16:9 height to
   fall back on. Padding rather than aspect-ratio, so the height stays a minimum:
   where neighbouring tiles do set the row height it still stretches to fill its
   area exactly as before. */
.tile--feature::before{content:"";display:block;padding-top:56.25%}
.tile[hidden]{display:none}

.tile__hit{
	all:unset;display:block;position:absolute;inset:0;cursor:pointer;
}
.tile__img{
	width:100%;height:100%;object-fit:cover;
	transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .tile__img{transform:scale(1.02)}

/* the metadata plate */
.tile__meta{
	position:absolute;left:0;right:0;bottom:0;
	display:block;padding:38px 15px 12px;
	background:linear-gradient(to top,
		rgba(15,14,13,.97) 0%,rgba(15,14,13,.9) 26%,
		rgba(15,14,13,.62) 58%,rgba(15,14,13,0) 100%);
	pointer-events:none;
	opacity:0;transition:opacity .25s ease;
}
.tile--feature .tile__meta{padding:clamp(46px,4.4vw,80px) clamp(16px,1.7vw,28px) clamp(16px,1.6vw,26px)}
.tile:hover .tile__meta,
.tile:focus-within .tile__meta{opacity:1}

.tile__med{
	display:block;margin-bottom:6px;
	font:700 9px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;
	color:var(--accent);text-shadow:0 1px 3px rgba(10,9,8,.95);
}
.tile--feature .tile__med{font-size:10px;letter-spacing:.2em;margin-bottom:9px}
.tile__title{
	display:block;font-family:var(--display);font-weight:400;
	font-size:clamp(16px,1.35vw,21px);line-height:1.03;text-transform:uppercase;
	color:var(--paper);text-wrap:balance;text-shadow:0 2px 10px rgba(10,9,8,.7);
}
.tile--feature .tile__title{font-size:clamp(26px,2.5vw,44px);line-height:1;text-shadow:0 2px 12px rgba(10,9,8,.7)}
.tile__brand{
	display:block;margin-top:5px;
	font:italic 300 13px/1.35 var(--sans);color:var(--paper-3);
	text-shadow:0 1px 4px rgba(10,9,8,.9);
}
.tile--feature .tile__brand{margin-top:8px;font-size:clamp(15px,1.15vw,18px)}

/* agency badge + hover accent */
.tile__agency{
	position:absolute;top:12px;right:12px;
	font:700 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
	color:#181615;background:var(--accent);padding:5px 7px;
	opacity:0;transition:opacity .26s ease;pointer-events:none;
}
.tile--feature .tile__agency{padding:6px 8px}
.tile::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	box-shadow:inset 0 3px 0 0 var(--accent);
	background:linear-gradient(to bottom,rgba(232,180,74,.12),rgba(24,22,21,0) 45%);
	opacity:0;transition:opacity .26s ease;
}
.tile:hover::after,.tile:focus-within::after{opacity:1}
.tile:hover .tile__agency,.tile:focus-within .tile__agency{opacity:1}

/* muted video preview on hover */
.tile__preview{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	opacity:0;transition:opacity .35s ease;
}
.tile__preview.is-playing{opacity:1}

/* ---------- about ---------- */
.about{
	display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);align-items:flex-start;
	padding:clamp(60px,7vw,110px) var(--pad);
	border-top:1px solid var(--line);
	max-width:1560px;
	scroll-margin-top:calc(var(--bar-h) + 44px);
}
.about__img{flex:1 1 320px;min-width:280px;max-width:520px}
.about__img img{width:100%;height:auto;border:1px solid rgba(242,240,237,.16)}
.about__body{flex:1 1 420px;min-width:300px}
.about__body h2,.contact__intro h2{
	margin:0 0 clamp(18px,2vw,30px);
	font-family:var(--display);font-weight:400;
	font-size:clamp(30px,3.4vw,58px);line-height:.98;text-transform:uppercase;color:var(--paper);
}
.about__body p{
	margin:0 0 22px;max-width:62ch;
	font-size:clamp(17px,1.35vw,21px);line-height:1.62;color:var(--paper-2);
	text-wrap:pretty;
}
.about__body p:last-child{margin-bottom:0}
.about__body a{border-bottom:1px solid rgba(232,180,74,.5)}

/* ---------- contact ---------- */
.contact{
	display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,80px);
	padding:clamp(60px,7vw,110px) var(--pad) clamp(40px,5vw,70px);
	border-top:1px solid var(--line);background:var(--ink-2);
	scroll-margin-top:calc(var(--bar-h) + 44px);
}
.contact__intro{flex:1 1 300px;min-width:260px}
.contact form{flex:1 1 460px;min-width:300px;display:flex;flex-direction:column;gap:16px}
.contact label{
	display:flex;flex-direction:column;gap:7px;
	font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);
}
.contact input,.contact textarea{
	font:300 17px/1.55 var(--sans);color:var(--paper);
	background:var(--ink-3);border:1px solid rgba(242,240,237,.16);border-radius:2px;
}
.contact input{height:50px;padding:0 14px}
.contact textarea{padding:13px 14px;resize:vertical;min-height:170px}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--accent)}
.contact ::placeholder{color:var(--mute-3)}

.btn{
	align-self:flex-start;cursor:pointer;
	font:700 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
	padding:19px 44px;border:1px solid var(--accent);border-radius:2px;
	background:var(--accent);color:#181615;
	transition:background .2s ease,color .2s ease;
}
.btn:hover{background:transparent;color:var(--accent)}
.btn-ghost{
	display:inline-block;
	font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
	padding:14px 20px;border:1px solid rgba(232,180,74,.55);
	transition:background .2s ease,color .2s ease;
}
.btn-ghost:hover{background:var(--accent);color:#181615}

/* ---------- footer ---------- */
.foot{
	display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
	padding:26px var(--pad);border-top:1px solid var(--line);
	font:400 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute-3);
}

/* ---------- lightbox ---------- */
.lb{
	position:fixed;inset:0;z-index:200;
	display:flex;align-items:center;justify-content:center;
	padding:clamp(12px,2.5vw,40px);
	background:rgba(14,13,12,.96);backdrop-filter:blur(6px);
}
.lb[hidden]{display:none}
.lb__close{
	position:absolute;top:clamp(10px,1.6vw,24px);right:clamp(10px,1.6vw,24px);z-index:2;
	cursor:pointer;width:46px;height:46px;
	font:300 26px/1 var(--sans);color:var(--paper);
	background:var(--ink-2);border:1px solid rgba(242,240,237,.34);border-radius:50%;
	box-shadow:0 2px 18px rgba(10,9,8,.85);
	transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.lb__close:hover{background:var(--accent);border-color:var(--accent);color:#181615}
.lb__inner{
	display:flex;flex-wrap:wrap;gap:clamp(20px,2.6vw,44px);align-items:flex-start;
	width:100%;max-width:1500px;max-height:100%;overflow-y:auto;
}
.lb__stage{flex:1 1 520px;min-width:280px}
.lb__frame{background:var(--tile);min-height:120px}
.lb__frame img,.lb__frame video{width:100%;height:auto;max-height:76vh;object-fit:contain;background:#000}
.lb__pdf{
	display:flex;align-items:center;justify-content:center;gap:10px;
	padding:64px 20px;text-align:center;
	font:700 11px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;
}
.lb__nav{display:flex;align-items:center;gap:14px;margin-top:14px}
.lb__arrow{
	cursor:pointer;width:42px;height:42px;
	font:300 20px/1 var(--sans);color:var(--paper);
	background:transparent;border:1px solid var(--line-2);border-radius:50%;
	transition:opacity .2s ease,border-color .2s ease,color .2s ease;
}
.lb__arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.lb__arrow:disabled{opacity:.3;cursor:default}
.lb__zoom{font-size:18px}
.lb__zoom[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}

/* zoom + pan for oversized stills; site.js sets the inline width */
.lb__frame.is-zoomable img{cursor:zoom-in}
.lb__frame.is-zoomed{overflow:auto;cursor:grab;-webkit-overflow-scrolling:touch}
.lb__frame.is-zoomed img{max-width:none;max-height:none;cursor:grab}
.lb__frame.is-panning,
.lb__frame.is-panning img{cursor:grabbing}
.lb__count{font:700 11px/1 var(--sans);letter-spacing:.22em;color:var(--mute-2)}
.lb__info{flex:1 1 340px;min-width:280px;max-width:620px}
.lb__kicker{
	display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;
	font:700 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;
}
.lb__kicker span:first-child{color:var(--accent)}
.lb__kicker span:last-child{color:var(--mute-2)}
.lb__info h3{
	margin:0;font-family:var(--display);font-weight:400;
	font-size:clamp(26px,2.7vw,46px);line-height:1;text-transform:uppercase;
	color:var(--paper);text-wrap:balance;
}
.lb__brand{margin:10px 0 24px;font:italic 300 clamp(16px,1.3vw,20px)/1.4 var(--sans);color:var(--paper-3)}
.lb__cap p{margin:0 0 15px;font-size:16px;line-height:1.65;color:#cdc7c0}
.lb__cap p:last-child{margin-bottom:0}
.lb__cap .role{
	font:700 10px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
body.is-locked{overflow:hidden}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width:700px){
	:root{--pad:16px;--gap:2px}
	.bar__nav{gap:18px}
	.bar__nav a{font-size:11px;letter-spacing:.16em}
	.hero{padding:44px var(--pad) 26px}
	.hero__name{font-size:clamp(52px,17vw,96px)}
	.hero__role{font-size:10px;letter-spacing:.22em}

	.filter__row{flex-wrap:nowrap;overflow-x:auto;padding:10px 14px;
		scrollbar-width:none;-ms-overflow-style:none;
		-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
	.filter__row::-webkit-scrollbar{display:none}
	.chip{padding:13px 17px;font-size:11px;scroll-snap-align:start}

	.grid{grid-template-columns:1fr}
	.tile--feature{grid-column:auto;grid-row:auto;aspect-ratio:16/9}
	.tile__meta,.tile--feature .tile__meta{padding:44px 16px 14px}
	.tile__title,.tile--feature .tile__title{font-size:23px}
	.tile__brand,.tile--feature .tile__brand{font-size:15px}
	.tile--feature .tile__med{font-size:9px;letter-spacing:.18em;margin-bottom:6px}

	.lb{padding:62px 12px 12px;align-items:flex-start}
	.lb__inner{gap:22px}
	.lb__frame img,.lb__frame video{max-height:48vh}
	.lb__arrow{width:46px;height:46px}
	.about{padding:48px var(--pad)}
	.about__body p{font-size:17px}
	.contact{padding:48px var(--pad) 40px}
	.btn{width:100%;text-align:center;padding:20px}
	.foot{font-size:10px}
}

/* touch devices: no hover, so the metadata stays up */
@media (hover:none){
	.tile__meta,.tile__agency{opacity:1}
	.tile::after{opacity:0}
	.tile:hover .tile__img{transform:none}
}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.bar__logo,.bar__logo.is-out{transform:none}
	*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}