/* TechPulse — showreel theme. Loaded after style.css; remaps tokens + restyles. */
:root{
  --ink:#101114;--paper:#EAE3D2;--cream:#F2EDE0;--red:#E8382B;--yellow:#F7C417;--blue:#1E4FD6;
  --bg:var(--paper);--bg-2:var(--cream);--card:var(--cream);--card-2:#fff9ea;
  --border:rgba(16,17,20,.18);--border-2:var(--ink);
  --text:var(--ink);--text-2:#3b3a36;--text-dim:#6a665b;
  --accent:var(--red);--accent-hover:#c42a1e;--purple:var(--blue);
  --font-serif:'Anton','Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:0;--radius-sm:0;--radius-lg:0;--shadow:6px 6px 0 var(--ink);
  --ease:cubic-bezier(.16,1,.3,1);
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);padding-bottom:34px}
::selection{background:var(--yellow);color:var(--ink)}
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--paper)}::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--paper)}
h1,h2,h3,h4,.nav-logo,.footer-logo{font-family:var(--font-serif);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95}
h1 em,h2 em,h3 em{font-style:normal;color:var(--red)}
a{text-decoration-thickness:2px}

/* film grain + vignette instead of blobs */
.bg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;background:none!important}
.bg-scene .blob{display:none!important}
.bg-scene::before{content:"";position:absolute;inset:-50%;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite}
.bg-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 60%,rgba(16,17,20,.16))}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
main,.site-footer,.site-header{position:relative;z-index:1}

/* nav: ink bar with colour blocks */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:4px solid var(--ink)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:4px;background:linear-gradient(90deg,var(--red) 0 33.33%,var(--yellow) 33.33% 66.66%,var(--blue) 66.66%)}
.nav{position:static!important;transform:none!important;width:auto!important;max-width:1280px;margin:0 auto;height:64px;padding:0 1.4rem;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo{color:var(--paper)!important;font-size:1.7rem;letter-spacing:.02em}
.nav-logo em{font-style:normal;background:var(--red);color:var(--paper);padding:0 .35rem;margin-left:.15rem}
.nav-links{display:flex;gap:.25rem}
.nav-links a{font-family:var(--mono);font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--paper)!important;padding:.55rem .8rem!important;border-radius:0!important;position:relative}
.nav-links a::after{left:0!important;right:0!important;bottom:0!important;height:3px!important;background:var(--yellow)!important}
.nav-links a:hover{background:var(--paper);color:var(--ink)!important}
.nav-links a.active{background:var(--yellow);color:var(--ink)!important}
.nav-links a.active::after{display:none}
.nav-search,.btn-burger{color:var(--paper)!important;background:transparent;border:2px solid var(--paper)!important;border-radius:0!important}
.nav-search:hover,.btn-burger:hover{background:var(--yellow);color:var(--ink)!important;border-color:var(--yellow)!important}

/* buttons */
.btn,.btn-solid,.btn-outline,.btn-nav{font-family:var(--mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border-radius:0!important;border:3px solid var(--ink)!important;background:var(--yellow)!important;color:var(--ink)!important;box-shadow:5px 5px 0 var(--ink);padding:.85rem 1.3rem;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.hero-cta .btn:nth-child(2){background:var(--blue)!important;color:var(--paper)!important}

/* eyebrows + section heads */
.eyebrow,.hero-cat,.nc-eyebrow,.fc-cat{font-family:var(--mono)!important;font-size:.72rem!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.16em;color:var(--ink)!important;background:var(--yellow);display:inline-block;padding:.28rem .6rem;border-radius:0!important;font-style:normal!important}
.section-head h2{font-size:clamp(2.6rem,7vw,5.2rem);margin:.6rem 0 .5rem;border-bottom:6px solid var(--ink);padding-bottom:.4rem;display:block}
.section-head p{font-family:var(--mono);font-size:.85rem;color:var(--text-2);max-width:60ch}

/* hero */
.hero{padding-top:3rem;position:relative}
.hero-copy{min-width:0;position:relative;z-index:2}.hero h1{font-size:clamp(3rem,8vw,7rem);overflow-wrap:anywhere;line-height:.88;margin:1rem 0}
.hero h1 em{background:var(--red);color:var(--paper);padding:0 .12em;display:inline-block;transform:rotate(-1.5deg)}
.hero-desc{font-family:var(--mono);font-size:.95rem;color:var(--text-2);max-width:48ch}
.hero-art{position:relative}
.hero-accent{background:var(--blue)!important;border-radius:0!important;border:0!important;filter:none!important;opacity:1!important;position:absolute;inset:auto -14px -14px auto;width:78%;height:78%;z-index:0}
.hero-img-wrap{position:relative;z-index:1;border:4px solid var(--ink);border-radius:0!important;box-shadow:none;overflow:hidden;background:var(--ink)}
.hero-img-wrap img{border-radius:0!important;filter:saturate(1.1) contrast(1.05)}

/* cards */
.card,.featured-card,.latest-item,.popular-card,.card-dark{background:var(--cream)!important;border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:var(--shadow);color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease);overflow:hidden}
.featured-card:hover,.latest-item:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--red)}
.featured-grid>*:nth-child(3n+2):hover,.latest-list>*:nth-child(3n+2):hover{box-shadow:10px 10px 0 var(--blue)}
.featured-grid>*:nth-child(3n):hover,.latest-list>*:nth-child(3n):hover{box-shadow:10px 10px 0 var(--yellow)}
.fc-img,.latest-thumb{border-radius:0!important;border-bottom:3px solid var(--ink);background:var(--ink);overflow:hidden}
.latest-thumb{border-bottom:0;border-right:3px solid var(--ink)}
.card-img,.fc-img img,.latest-thumb img{border-radius:0!important;transition:transform .5s var(--ease),filter .3s}
.featured-card:hover img,.latest-item:hover img{transform:scale(1.06)}
.featured-card h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.latest-item h3{font-size:1.5rem}
.card p,.latest-body p{color:var(--text-2)}
.fc-meta{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.fc-meta .dot{background:var(--red)!important;border-radius:0!important;width:6px;height:6px}
.latest-list{gap:1.4rem}

/* category menu: tabs */
.cat-menu{display:flex;flex-wrap:wrap;gap:.5rem}
.cat-menu a{font-family:var(--mono);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border:3px solid var(--ink)!important;border-radius:0!important;background:var(--cream)!important;color:var(--ink)!important;padding:.55rem 1rem;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,background .15s}
.cat-menu a:hover{background:var(--yellow)!important;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cat-menu a.active{background:var(--ink)!important;color:var(--paper)!important}

/* sidebar */
.newsletter-card{background:var(--red)!important;background-image:none!important;border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:var(--shadow);color:var(--paper)!important}
.newsletter-card::before,.newsletter-card::after{display:none!important}
.newsletter-card h3{font-size:2.6rem;color:var(--paper)}
.newsletter-card p{color:var(--paper);font-family:var(--mono);font-size:.82rem}
.nc-eyebrow{background:var(--ink)!important;color:var(--yellow)!important}
.nl-form{display:flex;border:3px solid var(--ink);background:var(--paper);border-radius:0!important}
.nl-form input{background:transparent!important;border:0!important;color:var(--ink)!important;font-family:var(--mono);border-radius:0!important;flex:1;min-width:0}
.nl-form input::placeholder{color:var(--text-dim)}
.nl-form button{background:var(--ink)!important;color:var(--yellow)!important;border:0!important;border-radius:0!important}
.nl-form button:hover{background:var(--blue)!important}
.popular-card h4{font-size:1.6rem;border-bottom:4px solid var(--ink);padding-bottom:.4rem;margin-bottom:.9rem}
.popular-tags a{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--ink)!important;border-radius:0!important;background:var(--paper)!important;color:var(--ink)!important;padding:.3rem .6rem}
.popular-tags a:hover{background:var(--blue)!important;color:var(--paper)!important}

/* quote band: colour block */
.quote-band{background:var(--blue)!important;border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:var(--shadow);overflow:hidden}
.quote-band::after{background:none!important}
.quote-band .qbg{mix-blend-mode:multiply;opacity:.35!important;filter:grayscale(1) contrast(1.2)}
.quote-mark{font-family:var(--font-serif);color:var(--yellow)!important;font-size:8rem;line-height:.6}
.quote-inner blockquote{font-family:var(--font-serif);text-transform:uppercase;color:var(--paper)!important;font-size:clamp(2.2rem,6vw,4.6rem);line-height:.95;font-style:normal}
.quote-auth{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--yellow)!important}

/* article + page pages */
.article-head h1,.page-head h1,.city-header h1{font-size:clamp(2.8rem,8vw,6rem);line-height:.9}
.article-meta,.city-meta,.city-kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:var(--text-2)}
.article-hero,.article-hero img,.city-hero img{border-radius:0!important;border:4px solid var(--ink)}
.article-body,.prose{font-size:1.1rem;line-height:1.75;color:var(--ink)}
.article-body h2,.prose h2{font-size:clamp(2rem,4.5vw,3rem);border-bottom:5px solid var(--ink);padding-bottom:.3rem;margin-top:2.4rem}
.article-body h3,.prose h3{font-size:1.7rem;color:var(--blue)}
.article-body a,.prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-color:var(--red)}
.article-body a:hover,.prose a:hover{background:var(--yellow);color:var(--ink)}
.article-body blockquote,.prose blockquote{border-left:8px solid var(--red);background:var(--cream);padding:1rem 1.4rem;font-style:normal;margin-left:0}
.article-body pre,.prose pre{background:var(--ink)!important;color:var(--paper);border:3px solid var(--ink);border-radius:0!important;box-shadow:5px 5px 0 var(--blue)}
.article-body code,.prose code{font-family:var(--mono);background:rgba(16,17,20,.08);border-radius:0}
.article-body pre code,.prose pre code{background:none}
.article-body table,.prose table{border:3px solid var(--ink);border-collapse:collapse}
.article-body th,.prose th{background:var(--ink);color:var(--paper);font-family:var(--mono);text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}
.article-body td,.article-body th,.prose td,.prose th{border:2px solid var(--ink);padding:.6rem .8rem}
.article-body img,.prose img{border:3px solid var(--ink);border-radius:0}
.article-tags a,.city-tags a{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;border:2px solid var(--ink)!important;border-radius:0!important;background:var(--cream)!important;color:var(--ink)!important;padding:.3rem .6rem}
.city-facts-card{background:var(--yellow)!important;border:3px solid var(--ink)!important;border-radius:0!important;box-shadow:var(--shadow);color:var(--ink)}
.city-facts-card strong{font-family:var(--mono);text-transform:uppercase;font-size:.72rem}
.cityvora-page{background:var(--paper)!important}
.bar-bg{background:rgba(16,17,20,.12)!important;border-radius:0!important}.bar-fill{background:var(--red)!important;border-radius:0!important}
input,textarea,select{border-radius:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* footer */
.site-footer{background:var(--ink);color:var(--paper);border-top:0;margin-top:5rem;position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:linear-gradient(90deg,var(--red) 0 33.33%,var(--yellow) 33.33% 66.66%,var(--blue) 66.66%)}
.footer-logo{font-size:clamp(3rem,10vw,7rem);color:var(--paper)!important;line-height:.9}
.footer-logo span{color:var(--yellow)}
.footer-desc,.footer-copy{font-family:var(--mono);font-size:.8rem;color:#bdb6a3}
.footer-nav a,.footer-social a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--paper)!important}
.footer-nav a:hover,.footer-social a:hover{background:var(--yellow);color:var(--ink)!important}

/* timecode HUD strip + progress */
.rt-hud{position:fixed;left:0;right:0;bottom:0;height:34px;z-index:60;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:1rem;padding:0 1rem;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border-top:2px solid var(--ink)}
.rt-hud b{color:var(--yellow);font-weight:700}
.rt-hud .rt-sp{flex:1}
.rt-hud i{width:8px;height:8px;background:var(--red);display:inline-block;animation:blink 1s steps(2) infinite}
.rt-bar{position:absolute;left:0;top:-4px;height:4px;width:0;background:linear-gradient(90deg,var(--red) 0 33.33%,var(--yellow) 33.33% 66.66%,var(--blue) 66.66%);background-size:100vw 4px}
@keyframes blink{50%{opacity:0}}

/* kinetic reveals: hard clip + slide, overrides soft fades */
.reveal,.reveal-stagger>*{opacity:0;transform:translateY(46px);transition:opacity .45s var(--ease),transform .7s var(--ease)}
.reveal.is-visible,.reveal-stagger>*.revealed{opacity:1;transform:none}
.reveal-stagger>*:nth-child(2){transition-delay:.08s}.reveal-stagger>*:nth-child(3){transition-delay:.16s}.reveal-stagger>*:nth-child(4){transition-delay:.24s}.reveal-stagger>*:nth-child(5){transition-delay:.32s}.reveal-stagger>*:nth-child(n+6){transition-delay:.4s}

/* colour-wipe page transition */
.rt-wipe{position:fixed;inset:0;z-index:100;display:flex;pointer-events:none}
.rt-wipe span{flex:1;transform:scaleY(0);transform-origin:top}
.rt-wipe span:nth-child(1){background:var(--red)}.rt-wipe span:nth-child(2){background:var(--yellow)}.rt-wipe span:nth-child(3){background:var(--blue)}.rt-wipe span:nth-child(4){background:var(--ink)}
.rt-wipe.cover{pointer-events:all}
.rt-wipe.cover span{transform:scaleY(1);transition:transform .45s var(--ease)}
.rt-wipe.cover span:nth-child(2){transition-delay:.04s}.rt-wipe.cover span:nth-child(3){transition-delay:.08s}.rt-wipe.cover span:nth-child(4){transition-delay:.12s}
.rt-wipe.hold span{transform:scaleY(1);transform-origin:bottom}
.rt-wipe.out span{transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.rt-wipe.out span:nth-child(2){transition-delay:.04s}.rt-wipe.out span:nth-child(3){transition-delay:.08s}.rt-wipe.out span:nth-child(4){transition-delay:.12s}

@media(max-width:820px){
  .nav{height:58px;padding:0 1rem}
  .nav-links{display:none!important}
  .btn-burger{display:grid!important}
  .nav.open .nav-links{display:flex!important;flex-direction:column;position:fixed;top:62px;left:0;right:0;background:var(--ink)!important;padding:.6rem;gap:.3rem;border-bottom:4px solid var(--yellow);z-index:49}
  .nav.open .nav-links a{font-size:1rem;padding:.9rem 1rem!important;border-radius:0!important;background:transparent}
  .nav.open .nav-links a.active{background:var(--yellow)}
  .latest-thumb{border-right:0;border-bottom:3px solid var(--ink)}
  .hero h1{font-size:clamp(3rem,16vw,5.5rem)}
  .rt-hud .rt-hide{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bg-scene::before,.rt-hud i{animation:none}
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .rt-wipe{display:none}
}