/* ============================================================
   OBBZ PORTFOLIO — STRUCTURED MAXIMALISM
   Palette: Industrial Darkwave · Type: Technical Editorial
   ============================================================ */

/* ---------------- Fonts (local variable) ---------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* ---------------- Tokens ---------------- */
:root {
  /* Midnight violet — dark surfaces */
  --mv-50:#f5f0f2; --mv-100:#eae1e6; --mv-200:#d6c2cd; --mv-300:#c1a4b4;
  --mv-400:#ac869b; --mv-500:#986782; --mv-600:#795368; --mv-700:#5b3e4e;
  --mv-800:#3d2934; --mv-900:#1e151a; --mv-950:#150e12;

  /* Burnt peach — accent */
  --bp-50:#fbece9; --bp-100:#f7d8d4; --bp-200:#f0b2a8; --bp-300:#e88b7d;
  --bp-400:#e06552; --bp-500:#d93e26; --bp-600:#ad321f; --bp-700:#822517;
  --bp-800:#57190f; --bp-900:#2b0c08; --bp-950:#1e0905;

  /* Linen — warm light */
  --linen-50:#f7f1ee; --linen-100:#efe4dc; --linen-200:#dfc8b9;
  --linen-300:#cfad96; --linen-400:#bf9173; --linen-500:#af7650;
  --linen-600:#8c5e40; --linen-700:#694730; --linen-800:#462f20;
  --linen-900:#231810; --linen-950:#18110b;

  /* Alabaster grey — structure / borders */
  --ag-50:#f3f3f1; --ag-100:#e6e7e4; --ag-200:#cdd0c8; --ag-300:#b4b8ad;
  --ag-400:#9ba092; --ag-500:#828877; --ag-600:#686d5f; --ag-700:#4e5247;
  --ag-800:#34372f; --ag-900:#1a1b18; --ag-950:#121311;

  /* Mint cream — secondary accent / light sections */
  --mc-50:#f0f5f2; --mc-100:#e0ebe5; --mc-200:#c1d7cb; --mc-300:#a2c3b1;
  --mc-400:#84ae98; --mc-500:#659a7e; --mc-600:#517b65; --mc-700:#3c5d4b;
  --mc-800:#283e32; --mc-900:#141f19; --mc-950:#0e1612;

  /* Semantic */
  --bg-base:var(--mv-950);
  --bg-raised:var(--mv-900);
  --bg-deep:var(--mv-800);
  --line:var(--ag-800);
  --ink:var(--ag-100);
  --ink-muted:var(--ag-400);
  --ink-faint:var(--ag-600);
  --accent:var(--bp-500);
  --accent-hi:var(--bp-400);
  --mint:var(--mc-400);
  --paper:var(--mc-50);
  --paper-ink:var(--mv-900);
  --paper-muted:var(--mv-700);
  --paper-line:var(--ag-300);

  --font-display:"Space Grotesk", sans-serif;
  --font-mono:"JetBrains Mono", monospace;

  --header-h:64px;
  --maxw:1680px;
  --pad:clamp(20px, 3vw, 40px);
}

/* ---------------- Base ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1.7;
  background:var(--bg-base);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden;}

img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit;}

::selection{background:var(--accent);color:var(--linen-50);}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--linen-50);
  padding:10px 18px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{left:12px;top:12px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative;z-index:1;}

.section{border-top:1px solid var(--line);position:relative;}
.section-pad{padding-block:clamp(80px, 10vw, 140px);}

.scanlines::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(245,240,242,.014) 0 1px, transparent 1px 3px);
}
/* ---------------- Shared components ---------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-muted);
}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;}

.section-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(44px,6vw,80px);max-width:900px;}
.section-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none;flex-wrap:wrap;}
.section-head__stack{display:flex;flex-direction:column;gap:18px;}
.section-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.2rem,5vw,4.2rem);
  line-height:1;letter-spacing:-.025em;text-transform:uppercase;
}
.section-note{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);}

.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 32px;border:1px solid var(--accent);
  color:var(--accent);background:transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn .arr{transition:transform .2s ease;}
.btn:hover{background:var(--accent);color:var(--linen-50);}
.btn:hover .arr{transform:translateX(5px);}
.btn--solid{background:var(--accent);color:var(--linen-50);}
.btn--solid:hover{background:var(--accent-hi);border-color:var(--accent-hi);}
.btn--xl{padding:20px 52px;font-size:14px;}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(21,14,18,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--pad);position:relative;
}
.logo img{height:32px;width:auto;}
.nav{display:flex;gap:clamp(24px,3vw,44px);}
.nav a{
  position:relative;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-muted);padding-block:8px;transition:color .2s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--accent);transition:width .25s ease;
}
.nav a:hover{color:var(--ink);}
.nav a:hover::after{width:100%;}
.header-tag{
  position:absolute;left:var(--pad);bottom:1px;
  font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:1399px){.header-tag{display:none;}}

/* ---------------- Mobile menu ---------------- */
.menu-toggle{display:none;}
.mobile-menu{
  position:fixed;inset:0;z-index:90;
  background:var(--bg-base);
  padding:calc(var(--header-h) + 48px) var(--pad) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-102%);visibility:hidden;
  transition:transform .45s cubic-bezier(.77,0,.18,1),visibility .45s;
}
.mobile-menu.open{transform:translateY(0);visibility:visible;}
.mobile-menu nav{display:flex;flex-direction:column;}
.mobile-menu nav a{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,11vw,4rem);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.3;
  display:flex;align-items:baseline;gap:16px;
}
.mobile-menu nav a .num{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.2em;}
.mobile-menu nav a:hover{color:var(--accent);}
.mobile-menu-foot{
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line);padding-top:20px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
}
.mobile-menu-foot a{color:var(--ink);}
.mobile-menu-foot a:hover{color:var(--accent);}

@media (max-width:820px){
  .nav{display:none;}
  .menu-toggle{
    display:flex;flex-direction:column;gap:6px;
    padding:12px 11px;border:1px solid var(--line);
  }
  .menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .3s ease;}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(8px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-8px) rotate(-45deg);}
}
/* ---------------- 01 · Hero ---------------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: #050505; /* Solid fallback in case the video takes a second to load */
}

/* Video stays at the very back */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* The Overlay: Radial gradient, grid, and dark tint stacked together */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* Sits directly above the video */
  
  /* Stack the gradients and grid */
  background-image: 
    radial-gradient(ellipse 120% 90% at 70% 0%, rgba(217,62,38,.12), transparent 55%),
    linear-gradient(rgba(180,184,173,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,184,173,.08) 1px, transparent 1px);
  
  /* The magic tint that saves your text legibility */
  background-color: rgba(0, 0, 0, 0.6); 
  
  /* Ensure the grid sizing applies correctly to the linear gradients */
  background-size: 100% 100%, 56px 56px, 56px 56px;
}
.hero-inner{
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:14vh var(--pad) 12vh;
  position:relative;z-index:1;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:40px;
}
.hero-kicker::before{content:"";width:40px;height:1px;background:var(--accent);}
.hero-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3.2rem,12vw,10rem);
  line-height:.9;letter-spacing:-.035em;text-transform:uppercase;
}
.hero-title .accent{color:var(--accent);}
.hero-lede{max-width:640px;margin-top:44px;font-size:14px;line-height:2;color:var(--ink-muted);}
.hero-lede em{font-style:italic;color:var(--ink);}

.hero-corners{position:absolute;inset:0;pointer-events:none;z-index:1;}
.hero-corners span{position:absolute;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);}
.hero-corners .tl{top:22px;left:var(--pad);}
.hero-corners .tr{top:22px;right:var(--pad);}
.hero-corners .bl{bottom:74px;left:var(--pad);}
.hero-corners .br{bottom:74px;right:var(--pad);}

.hero-scroll{
  position:absolute;right:16px;bottom:96px;z-index:1;
  writing-mode:vertical-rl;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;align-items:center;gap:12px;
}
.hero-scroll::after{
  content:"";width:1px;height:48px;background:var(--accent);
  transform-origin:top;animation:scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse{
  0%,100%{transform:scaleY(.35);opacity:.35;}
  50%{transform:scaleY(1);opacity:1;}
}

.hero-specs{border-top:1px solid var(--line);position:relative;z-index:1;}
.hero-specs .row{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;}
.hero-specs .cell{
  flex:1 1 auto;display:flex;align-items:center;gap:10px;
  padding:15px var(--pad) 15px 0;margin-right:var(--pad);
  border-right:1px solid var(--line);
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-muted);white-space:nowrap;
}
.hero-specs .cell:last-child{border-right:0;margin-right:0;}
.hero-specs .dot{width:6px;height:6px;background:var(--accent);flex:none;display:inline-block;}

@media (max-width:820px){
  .hero-corners .tr,.hero-corners .br,.hero-scroll{display:none;}
  .hero-specs .cell{font-size:9px;padding-block:12px;letter-spacing:.18em;}
}

/* ---------------- 02 · Recent projects ---------------- */
.recent{background:var(--bg-raised);}
.project-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (min-width:1200px){.project-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:560px){.project-grid{grid-template-columns:1fr;}}

.card{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-base);isolation:isolate;}
.card img{filter:grayscale(30%) contrast(1.03);transition:transform .7s cubic-bezier(.22,1,.36,1),filter .4s ease;}
.card:hover img,.card:focus-visible img{transform:scale(1.05);filter:none;}
.card-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:9px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);
  background:rgba(21,14,18,.82);padding:6px 10px;
}
.card-arrow{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:15px;color:var(--ink);
  opacity:0;transform:translate(-6px,6px);transition:opacity .25s ease,transform .25s ease;
}
.card:hover .card-arrow,.card:focus-visible .card-arrow{opacity:1;transform:none;}
.card-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:14px 16px;
  background:linear-gradient(to top,rgba(21,14,18,.9),transparent);
}
.card-title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2;}
.card-idx{font-size:9px;letter-spacing:.22em;color:var(--ink-muted);}

.recent-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px);}
/* ---------------- 03 · About ---------------- */
.about{background:var(--paper);color:var(--paper-ink);}
.about .eyebrow{color:var(--paper-muted);}
.about .section-title{color:var(--paper-ink);}
.about .section-note{color:var(--paper-muted);}

.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,72px);}
@media (min-width:1024px){
  .about-grid{grid-template-columns:minmax(0,1fr) 380px;align-items:start;}
  .about-side{position:sticky;top:calc(var(--header-h) + 40px);}
}

.pull-quote{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  font-weight:500;line-height:1.55;letter-spacing:-.01em;
  color:var(--mv-800);
  border-left:4px solid var(--accent);
  padding:10px 0 10px 28px;margin-bottom:48px;
}
.about-copy p{font-size:13.5px;line-height:2;color:var(--paper-muted);margin-bottom:28px;}
.about-copy p:last-child{margin-bottom:0;}
.about-copy a{color:var(--bp-600);border-bottom:1px solid rgba(173,50,31,.35);transition:color .2s ease,border-color .2s ease;}
.about-copy a:hover{color:var(--bp-500);border-bottom-color:var(--accent);}

.sub-block-label{
  display:flex;align-items:center;gap:12px;margin:44px 0 16px;
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bp-600);
}
.sub-block-label::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;}
.sub-block-label .line{flex:1;height:1px;background:var(--paper-line);}

.side-card{background:var(--bg-base);border:1px solid var(--line);padding:26px;margin-bottom:20px;}
.side-card-title{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
  font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--mint);
}
.side-card-title::before{content:"";width:8px;height:8px;background:var(--mint);flex:none;}
.side-card-note{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.8;letter-spacing:.04em;color:var(--ink-faint);
}

.spec-list li{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.spec-list li:last-child{border-bottom:0;padding-bottom:0;}
.spec-list .k{color:var(--ink-faint);letter-spacing:.12em;font-size:10px;text-transform:uppercase;}
.spec-list .v{color:var(--ink);font-weight:600;font-size:12px;}
.spec-list .v--ok{color:var(--mint);}

.connect-list li{border-bottom:1px solid var(--line);}
.connect-list li:last-child{border-bottom:0;}
.connect-list a{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-muted);transition:color .2s ease,padding-left .25s ease;
}
.connect-list a .arr{color:var(--ink-faint);transition:transform .2s ease,color .2s ease;}
.connect-list a:hover{color:var(--accent);padding-left:8px;}
.connect-list a:hover .arr{color:var(--accent);transform:translateX(3px);}

/* ---------------- 04 · Featured works / archive ---------------- */
.archive{background:var(--bg-base);}
.archive-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (min-width:1200px){.archive-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:560px){.archive-grid{grid-template-columns:1fr;}}

.tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-raised);isolation:isolate;}
.tile img{filter:grayscale(20%) contrast(1.02);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .4s ease;}
.tile:hover img,.tile:focus-visible img{transform:scale(1.06);filter:none;}
.tile-tag{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-muted);background:rgba(21,14,18,.8);border:1px solid var(--line);padding:5px 9px;
}
.tile:hover .tile-tag,.tile:focus-visible .tile-tag{color:var(--accent);border-color:var(--accent);}
.tile-label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:14px 14px 12px;
  background:linear-gradient(to top,rgba(21,14,18,.92),transparent);
}
.tile-title{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;}
.tile-idx{font-size:9px;letter-spacing:.2em;color:var(--ink-muted);}
/* ---------------- 05 · CTA / Footer ---------------- */
.site-footer{background:var(--bg-base);}
.cta{border-top:1px solid var(--line);background-image:linear-gradient(rgba(217,62,38,.05),transparent 60%);}
.cta .eyebrow{margin-bottom:28px;}
.cta-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,5.6vw,4.6rem);
  line-height:1.08;letter-spacing:-.025em;
  max-width:1000px;margin-bottom:clamp(40px,5vw,64px);
}
.cta-title .accent{color:var(--accent);}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

.footer-bar{border-top:1px solid var(--line);padding:20px 0;}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.footer-inner .logo img{height:24px;}
@media (max-width:820px){
  .footer-inner{justify-content:center;text-align:center;}
}

/* ---------------- Scroll reveal ---------------- */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.in{opacity:1;transform:none;}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none !important;}
  .hero-scroll::after{animation:none;transform:none;opacity:1;}
  .card img,.tile img{transition:none;}
}