/* ═══════════════════════════════════════════════════════════════════════════
   sites.imswarnil.com
   Tokens lifted from Frame & Signal (design.imswarnil.com) so this page and
   the design system speak the same language. Ink is near-neutral with a
   whisper of blue in the shadows; signal is the record light and is rationed.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--ink-0:#fff; --ink-50:#f8f8fa; --ink-100:#f1f1f4; --ink-200:#e5e5ea;
	--ink-300:#d3d3db; --ink-400:#a5a5b2; --ink-500:#76768a; --ink-600:#55556a;
	--ink-700:#3c3c4e; --ink-800:#272734; --ink-900:#191922; --ink-950:#101017;
	--ink-1000:#08080c;
	--signal-400:#fb7358; --signal-500:#f04e2e; --signal-600:#dc3514;
	--signal-700:#b52810; --signal-50:#fff2ef;
	--amber-400:#d9a33a; --amber-700:#78501f; --amber-50:#fdf8ed;

	--font-display:'Space Grotesk','Inter',ui-sans-serif,system-ui,sans-serif;
	--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
	--font-slate:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

	--tracking-slate:.14em; --tracking-tight:-.02em; --tracking-tighter:-.035em;

	--space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
	--space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;

	--radius:14px; --radius-lg:20px;
	--ease:cubic-bezier(.2,.7,.3,1); --dur:.42s;

	/* Light — the default */
	--bg-canvas:var(--ink-0); --bg-surface:var(--ink-0); --bg-sunken:var(--ink-50);
	--bg-muted:var(--ink-100); --bg-media:var(--ink-900);
	--fg-default:var(--ink-900); --fg-muted:var(--ink-600); --fg-subtle:var(--ink-500);
	--fg-faint:var(--ink-400);
	--line-subtle:var(--ink-100); --line-default:var(--ink-200); --line-strong:var(--ink-300);
	--accent:var(--signal-500); --accent-fg:var(--signal-700); --accent-soft:var(--signal-50);
	--accent-ring:rgb(240 78 46/.28);
	--craft:var(--amber-400); --craft-fg:var(--amber-700); --craft-soft:var(--amber-50);
	--hover-wash:rgb(8 8 12/.035);
	--pattern-ink:rgb(8 8 12/.06);
	--shadow-card:0 1px 2px rgb(8 8 12/.04), 0 8px 24px -12px rgb(8 8 12/.10);
	--shadow-lift:0 2px 4px rgb(8 8 12/.05), 0 24px 48px -20px rgb(8 8 12/.20);
}

:root[data-theme='dark'] {
	color-scheme:dark;
	--bg-canvas:var(--ink-1000); --bg-surface:var(--ink-950); --bg-sunken:#0c0c12;
	--bg-muted:var(--ink-800); --bg-media:#000;
	--fg-default:var(--ink-50); --fg-muted:var(--ink-400); --fg-subtle:var(--ink-500);
	--fg-faint:var(--ink-600);
	--line-subtle:rgb(255 255 255/.07); --line-default:rgb(255 255 255/.12);
	--line-strong:rgb(255 255 255/.22);
	--accent:var(--signal-500); --accent-fg:var(--signal-400);
	--accent-soft:rgb(240 78 46/.15);
	--craft-fg:var(--amber-400); --craft-soft:rgb(217 163 58/.14);
	--hover-wash:rgb(255 255 255/.04);
	--pattern-ink:rgb(255 255 255/.05);
	--shadow-card:0 1px 2px rgb(0 0 0/.4), 0 8px 24px -12px rgb(0 0 0/.6);
	--shadow-lift:0 2px 4px rgb(0 0 0/.5), 0 24px 48px -20px rgb(0 0 0/.8);
}

@media (prefers-color-scheme:dark) {
	:root:not([data-theme='light']) {
		color-scheme:dark;
		--bg-canvas:var(--ink-1000); --bg-surface:var(--ink-950); --bg-sunken:#0c0c12;
		--bg-muted:var(--ink-800); --bg-media:#000;
		--fg-default:var(--ink-50); --fg-muted:var(--ink-400); --fg-subtle:var(--ink-500);
		--fg-faint:var(--ink-600);
		--line-subtle:rgb(255 255 255/.07); --line-default:rgb(255 255 255/.12);
		--line-strong:rgb(255 255 255/.22);
		--accent-fg:var(--signal-400);
		--accent-soft:rgb(240 78 46/.15);
		--craft-fg:var(--amber-400); --craft-soft:rgb(217 163 58/.14);
		--hover-wash:rgb(255 255 255/.04);
		--pattern-ink:rgb(255 255 255/.05);
		--shadow-card:0 1px 2px rgb(0 0 0/.4), 0 8px 24px -12px rgb(0 0 0/.6);
		--shadow-lift:0 2px 4px rgb(0 0 0/.5), 0 24px 48px -20px rgb(0 0 0/.8);
	}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0; background:var(--bg-canvas); color:var(--fg-default);
	font-family:var(--font-body); font-size:1rem; line-height:1.65;
	-webkit-font-smoothing:antialiased;
	/* the faint grid the whole page sits on */
	background-image:
		linear-gradient(var(--pattern-ink) 1px, transparent 1px),
		linear-gradient(90deg, var(--pattern-ink) 1px, transparent 1px);
	background-size:64px 64px; background-position:-1px -1px;
}
::selection{background:var(--signal-500);color:#fff}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--tracking-tight);margin:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-5)}

/* ── The mono voice: labels, timecodes, metadata ─────────────────────────── */
.slate{
	font-family:var(--font-slate); font-size:.6875rem; font-weight:500;
	letter-spacing:var(--tracking-slate); text-transform:uppercase;
	color:var(--fg-subtle);
}

/* ═══ Masthead ══════════════════════════════════════════════════════════════ */
.masthead{padding:var(--space-7) 0 var(--space-5);position:relative}
.masthead__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-7)}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:var(--tracking-tight)}

.rec{display:inline-flex;align-items:center;gap:var(--space-2)}
.rec__dot{width:7px;height:7px;border-radius:50%;background:var(--signal-500);flex:none}
@media (prefers-reduced-motion:no-preference){
	.rec__dot{animation:rec 2.6s var(--ease) infinite}
}
@keyframes rec{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--accent-ring)}50%{opacity:.45;box-shadow:0 0 0 6px transparent}}

.theme-btn{
	display:grid;place-items:center;width:36px;height:36px;flex:none;
	border:1px solid var(--line-default);border-radius:10px;
	background:var(--bg-surface);color:var(--fg-muted);cursor:pointer;
	transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.theme-btn:hover{border-color:var(--line-strong);color:var(--fg-default)}
.theme-btn svg{width:17px;height:17px}
:root[data-theme='dark'] .theme-btn .i-sun,
:root:not([data-theme='light']) .theme-btn .i-sun{display:none}
.theme-btn .i-moon{display:none}
:root[data-theme='dark'] .theme-btn .i-moon,
:root:not([data-theme='light']) .theme-btn .i-moon{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme='dark']) .theme-btn .i-sun{display:block}:root:not([data-theme='dark']) .theme-btn .i-moon{display:none}}

.masthead h1{
	font-size:clamp(2rem,1.5rem + 1.9vw,3.05rem);
	line-height:1.06;letter-spacing:var(--tracking-tighter);font-weight:700;
	max-width:24ch;margin-top:var(--space-3);
}
.masthead h1 em{font-style:normal;color:var(--accent-fg)}
.masthead__sub{
	margin:var(--space-4) 0 0;max-width:52ch;
	color:var(--fg-muted);font-size:1.0625rem;
}
.masthead__wave{display:block;width:100%;max-width:300px;height:28px;margin-top:var(--space-4);overflow:visible}

/* ═══ The bento grid ════════════════════════════════════════════════════════ */
.section{padding:var(--space-6) 0 var(--space-8)}
.section__head{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-5)}
.section__head::after{content:'';flex:1;height:1px;background:var(--line-default)}

.bento{
	display:grid; gap:var(--space-4);
	grid-template-columns:repeat(4,1fr);
	grid-auto-rows:minmax(168px,auto);
}
@media (max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bento{grid-template-columns:1fr;grid-auto-rows:auto}}

.card--hero{grid-column:span 2;grid-row:span 2}
.card--wide{grid-column:span 2}
.card--tall{grid-row:span 2}
@media (max-width:560px){
	.card--hero,.card--wide,.card--tall{grid-column:auto;grid-row:auto}
}

/* ═══ Card ══════════════════════════════════════════════════════════════════ */
.card{
	position:relative;display:flex;flex-direction:column;gap:var(--space-3);
	padding:var(--space-5);overflow:hidden;isolation:isolate;
	background:var(--bg-surface);border:1px solid var(--line-default);
	border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
	transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
	           border-color var(--dur) var(--ease);
}
.card::before{ /* hover wash */
	content:'';position:absolute;inset:0;z-index:-1;
	background:var(--hover-wash);opacity:0;transition:opacity var(--dur) var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.card:hover::before{opacity:1}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.card,.card:hover{transform:none;transition:none}}

/* viewfinder brackets — four corners that ease inward on hover */
.card__frame{position:absolute;inset:10px;pointer-events:none;z-index:2}
.card__frame i{
	position:absolute;width:15px;height:15px;border:1.5px solid var(--accent);
	opacity:0;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.card__frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:5px 0 0 0;transform:translate(7px,7px)}
.card__frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 5px 0 0;transform:translate(-7px,7px)}
.card__frame i:nth-child(3){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 5px 0;transform:translate(-7px,-7px)}
.card__frame i:nth-child(4){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 5px;transform:translate(7px,-7px)}
.card:hover .card__frame i{opacity:1;transform:none}
.card--craft .card__frame i{border-color:var(--craft)}
@media (prefers-reduced-motion:reduce){.card__frame i{transition:opacity var(--dur) var(--ease);transform:none}}

.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.card__icon{
	display:grid;place-items:center;width:38px;height:38px;flex:none;
	border-radius:11px;background:var(--bg-sunken);color:var(--fg-muted);
	border:1px solid var(--line-subtle);
	transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.card__icon svg{width:19px;height:19px}
.card:hover .card__icon{background:var(--accent-soft);color:var(--accent-fg)}
.card--craft:hover .card__icon{background:var(--craft-soft);color:var(--craft-fg)}

.card__title{font-size:1.1875rem;font-weight:700;line-height:1.25}
.card--hero .card__title{font-size:clamp(1.5rem,1.31rem + .83vw,2rem)}
.card__blurb{margin:0;color:var(--fg-muted);font-size:.9375rem;line-height:1.6}
.card--hero .card__blurb{font-size:1.0625rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:var(--space-1) 0 0;padding:0}
.chips__i{
	font-family:var(--font-slate);font-size:.6875rem;letter-spacing:.06em;
	color:var(--fg-subtle);background:var(--bg-sunken);
	border:1px solid var(--line-subtle);border-radius:7px;padding:3px 8px;
	transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.card:hover .chips__i{border-color:var(--line-default);color:var(--fg-muted)}

.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-2)}

/* status pill */
.pill{
	display:inline-flex;align-items:center;gap:6px;flex:none;
	font-family:var(--font-slate);font-size:.625rem;font-weight:500;
	letter-spacing:var(--tracking-slate);text-transform:uppercase;
	padding:4px 9px;border-radius:999px;border:1px solid var(--line-default);
	color:var(--fg-subtle);background:var(--bg-sunken);
}
.pill__dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill--live{color:var(--accent-fg);border-color:var(--accent-ring);background:var(--accent-soft)}
@media (prefers-reduced-motion:no-preference){.pill--live .pill__dot{animation:rec 2.6s var(--ease) infinite}}
.pill--building{color:var(--craft-fg);border-color:var(--craft-soft);background:var(--craft-soft)}

/* the arrow that travels on hover */
.card__go{display:flex;align-items:center;gap:6px;color:var(--fg-faint);flex:none;
	transition:color var(--dur) var(--ease)}
.card:hover .card__go{color:var(--accent-fg)}
.card__go svg{width:15px;height:15px}
.card__go svg path{transition:transform var(--dur) var(--ease)}
.card:hover .card__go svg path{transform:translateX(3px)}

/* the hero card's animated signal bars */
.card__bars{position:absolute;right:-10px;bottom:-8px;width:280px;height:150px;
	opacity:.2;pointer-events:none;z-index:-1;color:var(--accent);
	transition:opacity var(--dur) var(--ease)}
.card:hover .card__bars{opacity:.3}
.card__bars rect{fill:currentColor}
@media (prefers-reduced-motion:no-preference){
	.card__bars rect{animation:bar 2.2s var(--ease) infinite;transform-origin:bottom}
	.card__bars rect:nth-child(1){animation-delay:0s}
	.card__bars rect:nth-child(2){animation-delay:.16s}
	.card__bars rect:nth-child(3){animation-delay:.32s}
	.card__bars rect:nth-child(4){animation-delay:.48s}
	.card__bars rect:nth-child(5){animation-delay:.64s}
	.card__bars rect:nth-child(6){animation-delay:.8s}
}
@keyframes bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ═══ Empty state (videos) ══════════════════════════════════════════════════ */
.empty{
	border:1px dashed var(--line-strong);border-radius:var(--radius-lg);
	padding:var(--space-7) var(--space-5);text-align:center;color:var(--fg-muted);
	background:var(--bg-sunken);
}
.empty h3{font-size:1.0625rem;margin-bottom:var(--space-2);color:var(--fg-default)}
.empty p{margin:0 auto;max-width:56ch;font-size:.9375rem}
.empty code{font-family:var(--font-slate);font-size:.8125rem;background:var(--bg-muted);
	padding:2px 6px;border-radius:5px;color:var(--fg-default)}

/* ═══ Video card ════════════════════════════════════════════════════════════ */
.card--video{padding:0;gap:0}
.card__thumb{position:relative;aspect-ratio:16/9;background:var(--bg-media);overflow:hidden}
.card__thumb img{width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .6s var(--ease)}
.card--video:hover .card__thumb img{transform:scale(1.04)}
.card__play{position:absolute;inset:0;display:grid;place-items:center}
.card__play circle{fill:rgb(8 8 12/.55);transition:fill var(--dur) var(--ease)}
.card--video:hover .card__play circle{fill:var(--signal-500)}
.card__play polygon{fill:#fff}
.card__vbody{padding:var(--space-4) var(--space-5) var(--space-5);display:flex;
	flex-direction:column;gap:var(--space-2)}

/* ═══ Footer ════════════════════════════════════════════════════════════════ */
.foot{
	border-top:1px solid var(--line-default);margin-top:var(--space-6);
	padding:var(--space-6) 0 var(--space-8);
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
	gap:var(--space-4);color:var(--fg-subtle);
}
.foot a{border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.foot a:hover{color:var(--fg-default);border-bottom-color:var(--accent)}

/* ═══ Entrance ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
	.card{animation:rise .6s var(--ease) both}
	@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}