/* ============================================================
   Marcos Lourenço — Portfolio · shared styles (Wicked Sick v3)
   Red-on-black · Bebas Neue / Space Mono / Libre Baskerville
   ============================================================ */
:root{
  --red:#E11D14; --red-deep:#8B1007; --darker:#050505; --dark:#0E0606;
  --grey:#1A1212; --grey-mid:#3A1A18; --line:#3A1A18;
  --text:#E8E0D5; --text-dim:#9A8783; --accent:#F5F0E8;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:var(--darker);color:var(--text);font-family:'Libre Baskerville',serif;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E")}
.wrap{max-width:1200px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh}
.mono{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.15em}
a{color:inherit}

/* NAV */
nav{border-bottom:1px solid var(--line);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:rgba(5,5,5,.95);backdrop-filter:blur(8px);z-index:100;height:72px}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.06em;color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:.55rem}
.nav-logo .dot{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
.nav-links{display:flex;gap:1.8rem;list-style:none}
.nav-links a{font-size:.62rem;color:var(--text-dim);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--red)}
.nav-getintouch{font-size:.6rem;color:var(--red);border:1px solid var(--red);border-radius:999px;padding:.55rem 1.1rem;text-decoration:none;transition:all .2s}
.nav-getintouch:hover{background:var(--red);color:var(--darker)}

/* ── HOME: HERO ── */
.hero{padding:3.5rem 2rem 2.5rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero-glow{position:absolute;right:-160px;top:-100px;width:560px;height:560px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,20,.28),transparent 70%);filter:blur(12px)}
.hero-topline{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;color:var(--text-dim);margin-bottom:3rem;position:relative}
.hero-topline .red{color:var(--red)}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,12vw,11rem);line-height:.84;letter-spacing:.01em;color:var(--accent);position:relative;margin-bottom:2.4rem}
.hero-title span{display:block}
.hero-title em{color:var(--red);font-style:normal}
.hero-title .plus{color:var(--red);font-family:'Space Mono',monospace;font-size:1.4rem;vertical-align:super;margin-left:.4rem}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;position:relative}
.hero-excerpt{font-size:1.02rem;line-height:1.7;color:var(--text-dim);max-width:48ch;font-style:italic}
.hero-meta{font-size:.6rem;color:var(--text-dim);display:flex;flex-direction:column;gap:.55rem;text-align:right}
.hero-meta strong{color:var(--text)}

/* MARQUEE */
.marq{background:var(--darker);border-bottom:1px solid var(--line);overflow:hidden;padding:.9rem 0}
.marq-inner{display:inline-flex;white-space:nowrap;animation:marq 32s linear infinite}
.marq span{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.05em;color:var(--red);padding:0 1.4rem}
.marq span:nth-child(4n+3){color:transparent;-webkit-text-stroke:1px var(--red)}
.marq .x{color:var(--red-deep);font-family:'Space Mono',monospace;font-size:1rem}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* WORK STATEMENT */
.work-statement{padding:3.4rem 2rem 2.6rem;border-bottom:1px solid var(--line);position:relative}
.work-statement .lab{font-size:.6rem;color:var(--red);margin-bottom:1.2rem}
.work-statement h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.6rem,6.5vw,5.6rem);line-height:.9;letter-spacing:.02em;color:var(--accent);max-width:16ch}
.work-statement h2 em{color:var(--red);font-style:normal}

/* PROJECT BANDS */
.project{display:grid;grid-template-columns:42% 58%;border-bottom:1px solid var(--line);text-decoration:none;min-height:330px;transition:background .25s}
.project:hover{background:var(--dark)}
.project:nth-child(even){grid-template-columns:58% 42%}
.project:nth-child(even) .p-visual{order:2;border-right:none;border-left:1px solid var(--line)}
.project:nth-child(even) .p-body{order:1}
.p-visual{position:relative;border-right:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--dark)}
.p-visual .ghost{font-family:'Bebas Neue',sans-serif;font-size:clamp(6rem,13vw,11rem);line-height:1;color:rgba(225,29,20,.10);letter-spacing:.03em;user-select:none}
.p-visual .corner{position:absolute;top:1.1rem;left:1.1rem;font-size:.55rem;color:var(--red)}
.p-visual .glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(225,29,20,.20),transparent 70%);filter:blur(12px)}
.p-visual.a .glow{bottom:-100px;right:-60px}.p-visual.b .glow{top:-80px;left:-40px}
.p-visual.c .glow{bottom:-90px;left:-50px}.p-visual.d .glow{top:-90px;right:-50px}
.p-visual::before,.p-visual::after{content:'';position:absolute;width:14px;height:14px;border:1px solid var(--red);opacity:.5}
.p-visual::before{top:10px;right:10px;border-left:none;border-bottom:none}
.p-visual::after{bottom:10px;left:10px;border-right:none;border-top:none}
.p-body{padding:2.6rem 2.4rem;display:flex;flex-direction:column;justify-content:center;position:relative}
.p-num{font-size:.62rem;color:var(--text-dim);margin-bottom:1rem}
.p-num b{color:var(--red)}
.p-cat{font-size:.55rem;color:var(--text-dim);margin-bottom:.9rem}
.p-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.6rem,5vw,4rem);line-height:.92;letter-spacing:.02em;color:var(--accent);margin-bottom:1rem;transition:color .2s}
.project:hover .p-title{color:var(--red)}
.p-desc{font-size:.9rem;line-height:1.7;color:var(--text-dim);font-style:italic;max-width:48ch;margin-bottom:1.5rem}
.p-tags{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.6rem}
.p-tags span{font-size:.55rem;color:var(--text-dim);border:1px solid var(--line);padding:.3rem .7rem}
.p-view{font-size:.6rem;color:var(--red);display:flex;align-items:center;gap:.5rem}

/* SECTION HEADER (shared) */
.section-header{display:flex;align-items:baseline;gap:1rem;padding:2.4rem 2rem 1.6rem;border-bottom:1px solid var(--line)}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:2.1rem;letter-spacing:.05em;color:var(--accent)}
.section-line{flex:1;height:1px;background:var(--line)}
.section-count{font-size:.6rem;color:var(--text-dim)}

/* ABOUT (home) */
.about{display:grid;grid-template-columns:1fr 340px;border-bottom:1px solid var(--line)}
.about-bio{padding:3rem 2.4rem;border-right:1px solid var(--line)}
.about-lead{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:.02em;color:var(--accent);line-height:.95;margin-bottom:1.6rem}
.about-lead em{color:var(--red);font-style:normal}
.about-bio p{font-size:.95rem;line-height:1.85;color:var(--text-dim);font-style:italic;margin-bottom:1.1rem;max-width:62ch}
.about-side{padding:3rem 2.4rem}
.about-side .lab{font-size:.6rem;color:var(--red);margin-bottom:1.1rem}
.skill-list{list-style:none;display:flex;flex-direction:column}
.skill-list li{font-size:.66rem;color:var(--text);padding:.7rem 0;border-bottom:1px solid var(--line)}
.skill-list li:first-child{border-top:1px solid var(--line)}

/* CONTACT */
.contact{padding:4.5rem 2.4rem 3rem;text-align:center;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.contact .glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:640px;height:360px;
  background:radial-gradient(closest-side,rgba(225,29,20,.20),transparent 70%);filter:blur(16px);pointer-events:none}
.contact .pre{font-size:.62rem;color:var(--red);margin-bottom:1.4rem;position:relative}
.contact-big{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,13vw,9.5rem);letter-spacing:.03em;color:var(--accent);line-height:.88;margin-bottom:1.8rem;position:relative}
.contact-big em{color:var(--red);font-style:normal}
.contact-links{display:flex;gap:1rem 2.4rem;justify-content:center;flex-wrap:wrap;position:relative;font-size:.66rem}
.contact-links a{color:var(--text-dim);text-decoration:none;transition:color .2s}
.contact-links a:hover{color:var(--red)}
.foot{padding:1.1rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.foot p{font-size:.55rem;color:var(--text-dim)}

/* ============================================================
   CASE-STUDY PAGES
   ============================================================ */
.cs-hero{padding:3.4rem 2rem 2.6rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.cs-hero .glow{position:absolute;right:-140px;top:-120px;width:520px;height:520px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,20,.24),transparent 70%);filter:blur(12px)}
.cs-back{font-size:.6rem;color:var(--text-dim);text-decoration:none;display:inline-block;margin-bottom:2rem;position:relative}
.cs-back:hover{color:var(--red)}
.cs-eyebrow{font-size:.6rem;color:var(--red);margin-bottom:1.2rem;position:relative}
.cs-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.4rem,9vw,8rem);line-height:.86;letter-spacing:.01em;color:var(--accent);margin-bottom:1.4rem;position:relative}
.cs-title em{color:var(--red);font-style:normal}
.cs-summary{font-size:1.05rem;line-height:1.7;color:var(--text-dim);font-style:italic;max-width:56ch;margin-bottom:2.4rem;position:relative}
.cs-meta{display:grid;grid-template-columns:repeat(4,auto);gap:2.4rem;position:relative}
.cs-meta .k{font-size:.55rem;color:var(--red);margin-bottom:.5rem}
.cs-meta .v{font-size:.78rem;color:var(--text)}
@media(max-width:700px){.cs-meta{grid-template-columns:1fr 1fr;gap:1.4rem}}

/* image slots — "respecting spaces" */
.imgslot{border:1px dashed var(--grey-mid);background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(225,29,20,.03) 10px,rgba(225,29,20,.03) 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:2rem;min-height:300px;position:relative}
.imgslot .tag{font-size:.55rem;color:var(--red)}
.imgslot .desc{font-size:.8rem;color:var(--text-dim);font-style:italic;max-width:40ch}
.imgslot .dim{font-size:.5rem;color:var(--text-dim);letter-spacing:.1em}
.imgslot::before,.imgslot::after{content:'';position:absolute;width:16px;height:16px;border:1px solid var(--red);opacity:.4}
.imgslot::before{top:10px;left:10px;border-right:none;border-bottom:none}
.imgslot::after{bottom:10px;right:10px;border-left:none;border-top:none}
.imgrow{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.imgrow .imgslot{border:none;border-right:1px solid var(--line);min-height:340px}
.imgrow .imgslot:last-child{border-right:none}
.imgrow.two{grid-template-columns:1fr 1fr}
@media(max-width:760px){.imgrow,.imgrow.two{grid-template-columns:1fr}.imgrow .imgslot{border-right:none;border-bottom:1px solid var(--line)}}

/* real images */
.cs-cover{display:block;width:100%;height:clamp(300px,44vw,460px);object-fit:cover;object-position:center top;border-bottom:1px solid var(--line)}
.cs-cover.contain{object-fit:contain;background:var(--dark);padding:1.4rem 0}
figure{margin:0}
.imgrow figure{border-right:1px solid var(--line);display:flex;flex-direction:column}
.imgrow figure:last-child{border-right:none}
.imgrow figure img{display:block;width:100%;height:520px;object-fit:contain;background:var(--dark);padding:1.6rem 1rem 0}
.imgrow.land figure img{height:320px;object-fit:cover;padding:0}
figcaption{font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);padding:.9rem 1rem 1.2rem;text-align:center}
@media(max-width:760px){.imgrow figure{border-right:none;border-bottom:1px solid var(--line)}.imgrow figure img{height:auto;max-height:600px}}

/* case-study content sections */
.cs-section{display:grid;grid-template-columns:240px 1fr;border-bottom:1px solid var(--line)}
.cs-section .label{padding:2.6rem 1.6rem 2.6rem 2rem;border-right:1px solid var(--line)}
.cs-section .label .n{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--red);line-height:1}
.cs-section .label .t{font-size:.58rem;color:var(--text-dim);margin-top:.5rem}
.cs-section .content{padding:2.6rem 2.4rem}
.cs-section .content h3{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.03em;color:var(--accent);margin-bottom:1rem}
.cs-section .content p{font-size:.96rem;line-height:1.85;color:var(--text-dim);margin-bottom:1.1rem;max-width:64ch}
.cs-section .content p strong{color:var(--accent)}
.cs-section .content ul{list-style:none;margin:0 0 1.1rem;max-width:64ch}
.cs-section .content li{font-size:.92rem;line-height:1.7;color:var(--text-dim);padding-left:1.4rem;position:relative;margin-bottom:.6rem}
.cs-section .content li::before{content:'▸';position:absolute;left:0;color:var(--red)}
@media(max-width:760px){.cs-section{grid-template-columns:1fr}.cs-section .label{border-right:none;border-bottom:1px solid var(--line);padding:1.6rem 2rem}}

/* metrics callout */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.metric{padding:2.4rem 2rem;border-right:1px solid var(--line)}
.metric:last-child{border-right:none}
.metric .v{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--red);line-height:1}
.metric .l{font-size:.7rem;color:var(--text-dim);font-style:italic;margin-top:.6rem}
@media(max-width:760px){.metrics{grid-template-columns:1fr}.metric{border-right:none;border-bottom:1px solid var(--line)}}

/* data table (brutalist) */
.cs-table{width:100%;border-collapse:collapse}
.cs-table th,.cs-table td{text-align:left;padding:1rem 2rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:.85rem;line-height:1.6;color:var(--text-dim)}
.cs-table th{font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.cs-table td:last-child,.cs-table th:last-child{border-right:none}
.cs-table td strong{color:var(--accent)}

/* prev/next */
.cs-next{display:flex;justify-content:space-between;align-items:center;padding:2.4rem 2rem;flex-wrap:wrap;gap:1rem}
.cs-next a{text-decoration:none}
.cs-next .lab{font-size:.55rem;color:var(--text-dim);margin-bottom:.4rem}
.cs-next .ttl{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--accent);transition:color .2s}
.cs-next a:hover .ttl{color:var(--red)}
.cs-next .r{text-align:right}

/* CONCEPT ART GALLERY */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.gallery figure{margin:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--dark)}
.gallery figure:nth-child(3n){border-right:none}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .8rem .6rem;
  font-family:'Space Mono',monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);background:linear-gradient(transparent,rgba(5,5,5,.92));transition:color .3s}
.gallery figcaption b{color:var(--red);font-weight:400}
.gallery figure:hover figcaption{color:var(--accent)}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure:nth-child(3n){border-right:1px solid var(--line)}
  .gallery figure:nth-child(2n){border-right:none}}
@media(max-width:480px){.gallery{grid-template-columns:1fr}.gallery figure{border-right:none}}

/* LIVE animated banners */
.live-banner{position:relative;border-bottom:1px solid var(--line);background:#0a0b0e;height:clamp(340px,46vw,520px);overflow:hidden}
.live-banner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;display:block}
.live-banner .tag{position:absolute;right:1rem;top:.9rem;z-index:2;font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:.45rem}
.live-banner .tag i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:livepulse 1.8s ease-in-out infinite}
.live-banner .cap{position:absolute;left:1rem;bottom:.8rem;z-index:2;font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.live-banner .cap b{color:var(--red);font-weight:400}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}}

@media(max-width:900px){
  .project,.project:nth-child(even){grid-template-columns:1fr}
  .p-visual,.project:nth-child(even) .p-visual{border-right:none;border-left:none;border-bottom:1px solid var(--line);min-height:190px;order:1}
  .project:nth-child(even) .p-body{order:2}
  .about{grid-template-columns:1fr}
  .about-bio{border-right:none;border-bottom:1px solid var(--line)}
  .hero-meta{text-align:left}
  nav{padding:0 1.1rem}.nav-links{gap:.9rem}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-title,.cs-title{animation:fadeUp .8s ease both}
.hero-foot,.cs-summary{animation:fadeUp .8s .15s ease both}