/* ============================================================
   Laura Marie Short — portfolio
   Palette: black / white / gray, bright red accent
   ============================================================ */
:root{
  --black:#0A0A0A;
  --off:#141414;
  --char:#1F1F1F;
  --gray-9:#2E2E2E;
  --gray-7:#5A5A5A;
  --gray-5:#8A8A8A;
  --gray-3:#C9C9C9;
  --gray-1:#EDEDED;
  --paper:#F7F7F7;
  --white:#FFFFFF;
  --red:#E51013;
  --red-lt:#FF2A20;
  --max:1220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--char);background:var(--white);line-height:1.62;font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
h1,h2,h3,.display{font-family:'Archivo',Inter,sans-serif;letter-spacing:-.02em}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:90;background:var(--black);border-bottom:1px solid #262626}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:22px}
.nav .brand{font-family:'Archivo',sans-serif;color:var(--white);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;font-size:13.5px}
.nav .brand span{color:var(--red)}
.nav .brand:hover{text-decoration:none}
.nav ul{display:flex;gap:28px;list-style:none;flex-wrap:wrap}
.nav a{color:var(--gray-3);font-size:13.5px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;padding-bottom:2px;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{color:var(--white);border-bottom-color:var(--red);text-decoration:none}

/* ---------------- hero ---------------- */
.hero{background:var(--black);color:var(--white);padding:92px 0 78px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
.hero:after{content:"";position:absolute;right:-90px;top:50%;transform:translateY(-50%) rotate(12deg);
  width:340px;height:900px;background:linear-gradient(180deg,transparent,rgba(229,16,19,.10),transparent)}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow{color:var(--red);letter-spacing:.22em;text-transform:uppercase;
  font-size:12px;font-weight:800;margin-bottom:18px}
.hero h1{font-weight:800;font-size:clamp(34px,6vw,64px);line-height:1.03;color:var(--white);max-width:17ch}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lede{margin-top:24px;max-width:66ch;color:var(--gray-3);font-size:18px}
.hero .cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 28px;font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;transition:.15s;border:2px solid transparent}
.btn:hover{text-decoration:none}
.btn-p{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-p:hover{background:var(--red-lt);border-color:var(--red-lt);color:#fff}
.btn-s{border-color:var(--gray-7);color:var(--white)}
.btn-s:hover{border-color:var(--white);background:var(--white);color:var(--black)}
.btn-d{border-color:var(--black);color:var(--black)}
.btn-d:hover{background:var(--black);color:var(--white)}

/* ---------------- stats ---------------- */
.stats{background:var(--char);border-bottom:4px solid var(--red)}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  padding-top:0;padding-bottom:0}
.stat{padding:26px 14px;text-align:center;position:relative}
.stat+.stat:before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:#3A3A3A}
.stat b{display:block;font-family:'Archivo',sans-serif;font-size:27px;font-weight:800;color:var(--white);line-height:1.1}
.stat span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray-5);margin-top:6px}

/* ---------------- sections ---------------- */
section{padding:74px 0}
section.alt{background:var(--paper)}
section.dark{background:var(--black);color:var(--gray-3)}
.sechead{max-width:76ch;margin-bottom:38px}
.sechead .kicker{color:var(--red);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;font-size:11.5px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sechead .kicker:after{content:"";flex:1;height:2px;background:var(--gray-1);max-width:110px}
section.dark .sechead .kicker:after{background:var(--gray-9)}
.sechead h2{font-weight:800;color:var(--black);font-size:clamp(26px,4vw,40px);line-height:1.12}
section.dark .sechead h2{color:var(--white)}
.sechead p{margin-top:15px;color:var(--gray-7);font-size:17px}
section.dark .sechead p{color:var(--gray-5)}

/* ---------------- capability cards ---------------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:2px;background:var(--gray-1)}
.cap{background:var(--white);padding:26px 24px 28px;transition:.16s}
.cap:hover{background:var(--black);color:var(--gray-3)}
.cap:hover h3{color:var(--white)}
.cap:hover ul{color:var(--gray-5)}
.cap h3{font-size:17px;font-weight:800;color:var(--black);margin-bottom:10px;line-height:1.25}
.cap h3:before{content:"";display:block;width:30px;height:3px;background:var(--red);margin-bottom:13px}
.cap p{font-size:15.2px;color:inherit}
.cap ul{margin:11px 0 0 17px;font-size:14.6px;color:var(--gray-7)}
.cap li{margin-bottom:3px}


/* ---------------- venture links ---------------- */
.cap .vlink{margin-top:14px}
.cap .vlink a{font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--black);
  border-bottom:2px solid var(--red);padding-bottom:2px;text-decoration:none}
.cap .vlink a:hover{color:var(--red);text-decoration:none}
.cap:hover .vlink a{color:var(--white)}
.cap:hover .vlink a:hover{color:var(--red)}

/* ---------------- filters ---------------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 19px;cursor:pointer;border:2px solid var(--gray-1);background:var(--white);
  color:var(--gray-7);transition:.15s}
.filters button:hover{border-color:var(--black);color:var(--black)}
.filters button.on{background:var(--black);border-color:var(--black);color:var(--white)}

/* ---------------- project grid ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:26px}
.proj{background:var(--white);border:1px solid var(--gray-1);display:flex;flex-direction:column;transition:.18s}
.proj:hover{border-color:var(--black);box-shadow:0 10px 30px rgba(0,0,0,.13);transform:translateY(-3px)}
.proj .shot{position:relative;aspect-ratio:4/3;background:var(--gray-1);overflow:hidden;cursor:zoom-in}
.proj .shot img{width:100%;height:100%;object-fit:cover;transition:.4s}
.proj:hover .shot img{transform:scale(1.05)}
.proj .tag{position:absolute;left:0;top:14px;background:var(--red);color:#fff;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:6px 12px}
.proj .more{position:absolute;right:12px;bottom:12px;background:rgba(10,10,10,.86);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 11px;text-transform:uppercase}
.proj .body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.proj h3{font-size:18px;font-weight:800;color:var(--black);line-height:1.25}
.proj .client{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);
  font-weight:800;margin-top:7px}
.proj p{font-size:14.8px;color:var(--gray-7);margin-top:11px}
.proj .skills{margin-top:15px;display:flex;flex-wrap:wrap;gap:6px}
.proj .skills span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  background:var(--paper);border:1px solid var(--gray-1);color:var(--gray-7);padding:4px 9px}

/* ---------------- video ---------------- */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.vid{background:var(--white);border:1px solid var(--gray-1)}
section.dark .vid{background:var(--off);border-color:var(--gray-9)}
.vid .frame{position:relative;aspect-ratio:16/9;background:#000}
.vid .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;color:var(--gray-5);font-size:13.5px;text-align:center;padding:22px;gap:8px}
.vid .ph b{color:var(--gray-3);font-size:14.5px;letter-spacing:.05em;text-transform:uppercase}
.vid .cap2{padding:17px 20px 20px}
.vid h3{font-size:16.5px;font-weight:800;color:var(--black)}
section.dark .vid h3{color:var(--white)}
.vid p{font-size:14.3px;color:var(--gray-7);margin-top:7px}
section.dark .vid p{color:var(--gray-5)}

/* ---------------- steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--gray-1)}
section.dark .steps{background:var(--gray-9)}
.step{background:var(--white);padding:26px 22px 28px;counter-increment:s;position:relative}
section.alt .step{background:var(--white)}
section.dark .step{background:var(--off)}
.steps{counter-reset:s}
.step:before{content:counter(s,decimal-leading-zero);display:block;font-family:'Archivo',sans-serif;
  font-size:13px;font-weight:800;color:var(--red);letter-spacing:.1em;margin-bottom:12px}
.step h3{font-size:16.5px;font-weight:800;color:var(--black);margin-bottom:7px;line-height:1.28}
section.dark .step h3{color:var(--white)}
.step p{font-size:14.8px;color:var(--gray-7)}

/* ---------------- timeline ---------------- */
.tl{border-left:3px solid var(--gray-1);margin-left:6px}
section.dark .tl{border-left-color:var(--gray-9)}
.tl .item{position:relative;padding:0 0 34px 30px}
.tl .item:last-child{padding-bottom:0}
.tl .item:before{content:"";position:absolute;left:-9px;top:6px;width:15px;height:15px;
  background:var(--red);border:3px solid var(--white)}
section.dark .tl .item:before{border-color:var(--black)}
.tl .yr{font-family:'Archivo',sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);margin-bottom:5px}
.tl h3{font-size:19px;font-weight:800;color:var(--black);line-height:1.25}
section.dark .tl h3{color:var(--white)}
.tl .org{font-size:14.5px;font-weight:700;color:var(--gray-7);margin-top:3px}
.tl p{font-size:15.2px;color:var(--gray-7);margin-top:10px;max-width:78ch}
section.dark .tl p{color:var(--gray-5)}

/* ---------------- skills columns ---------------- */
.skillcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.skillcol h3{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--black);padding-bottom:10px;border-bottom:3px solid var(--red);margin-bottom:14px}
section.dark .skillcol h3{color:var(--white)}
.skillcol ul{list-style:none}
.skillcol li{font-size:15.3px;padding:5px 0 5px 17px;position:relative;color:var(--gray-7)}
.skillcol li:before{content:"";position:absolute;left:0;top:14px;width:7px;height:2px;background:var(--red)}

/* ---------------- clients ---------------- */
.clients{display:flex;flex-wrap:wrap;gap:8px}
.clients span{background:var(--white);border:1px solid var(--gray-1);padding:9px 16px;
  font-size:14px;font-weight:700;color:var(--black)}
section.dark .clients span{background:var(--off);border-color:var(--gray-9);color:var(--gray-3)}
.clients span.hi{border-color:var(--red);color:var(--red)}

/* ---------------- education ---------------- */
.edu{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2px;background:var(--gray-1)}
.edu .e{background:var(--white);padding:24px}
.edu h3{font-size:17px;font-weight:800;color:var(--black);line-height:1.3}
.edu .deg{font-size:14.8px;color:var(--gray-7);margin-top:6px}
.edu .meta{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--red);
  font-weight:700;margin-top:9px}

/* ---------------- contact ---------------- */
.contact{background:var(--black);color:var(--white);padding:76px 0;border-top:4px solid var(--red)}
.contact h2{font-weight:800;color:var(--white);font-size:clamp(26px,4vw,38px);margin-bottom:16px}
.contact p{color:var(--gray-3);max-width:62ch}
.contact .row{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
.contact .row b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:7px;font-weight:800}
.contact .row a,.contact .row span{color:var(--white);font-size:16.5px}
.contact .row a:hover{color:var(--red)}

footer{background:var(--black);color:var(--gray-7);padding:26px 0;font-size:13px;border-top:1px solid #242424}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--gray-5)}
footer a:hover{color:var(--red)}


/* ---------------- lightbox video support ---------------- */
.lb .lbstage{display:flex;align-items:center;justify-content:center;width:100%;max-width:1200px}
.lb .lbvid{display:none;width:100%;max-width:1100px;aspect-ratio:16/9;background:#000}
.lb .lbvid iframe{width:100%;height:100%;border:0;display:block}
.proj .playbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(229,16,19,.92);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:19px;padding-left:3px;
  pointer-events:none;transition:.18s}
.proj:hover .playbadge{background:var(--red);transform:translate(-50%,-50%) scale(1.08)}

/* ---------------- lightbox ---------------- */
.lb{position:fixed;inset:0;background:rgba(6,6,6,.97);z-index:200;display:none;
  align-items:center;justify-content:center;padding:30px}
.lb.on{display:flex}
.lb img{max-width:93vw;max-height:80vh;object-fit:contain}
.lb .x{position:absolute;top:16px;right:22px;color:var(--white);font-size:36px;cursor:pointer;
  line-height:1;background:none;border:0}
.lb .x:hover{color:var(--red)}
.lb .arw{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.10);
  border:0;color:#fff;font-size:26px;width:54px;height:54px;cursor:pointer}
.lb .arw:hover{background:var(--red)}
.lb .prev{left:18px}.lb .next{right:18px}
.lb .lbcap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--gray-3);
  font-size:13.5px;letter-spacing:.05em}
.lb .lbcap b{color:var(--red);font-weight:800}

@media(max-width:640px){
  body{font-size:16px}
  section{padding:52px 0}
  .hero{padding:60px 0 54px}
  .nav .wrap{height:auto;padding:12px 26px;flex-direction:column;align-items:flex-start;gap:11px}
  .nav ul{gap:16px}
  .grid{grid-template-columns:1fr}
  .lb .arw{width:44px;height:44px;font-size:21px}
  .stat+.stat:before{display:none}
}