/* =========================================================
   Aws Ourari — Portfolio
   Persona-inspired, professional edition
   ========================================================= */
:root{
  --black:#0d0d0d;
  --black-soft:#161616;
  --black-card:#141414;
  --white:#f5f5f5;
  --red:#d92323;
  --red-dim:rgba(217,35,35,0.14);
  --cyan:#0dd9ff;
  --line:rgba(245,245,245,0.13);
  --text-dim:rgba(245,245,245,0.72);
  --text-dimmer:rgba(245,245,245,0.5);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  background:var(--black); color:var(--white);
  font-family:'Oswald', sans-serif; font-weight:300; line-height:1.65;
  overflow-x:hidden; min-height:100svh; display:flex; flex-direction:column;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
main{flex:1;}

::selection{background:var(--red); color:var(--white);}

.skip-link{position:absolute; left:-999px; top:0; background:var(--red); color:var(--white); padding:12px 20px; font-family:'Barlow Condensed'; font-weight:700; z-index:999;}
.skip-link:focus{left:12px; top:12px;}
:focus-visible{outline:3px solid var(--red); outline-offset:3px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px); width:100%;}

/* ambient dotted texture, no external media */
.backdrop{position:fixed; inset:0; z-index:0; pointer-events:none;}
.backdrop::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(245,245,245,0.04) 1px, transparent 1px);
  background-size:5px 5px;
}
.beam{position:absolute; top:-20%; left:-10%; width:38%; height:160%; background:linear-gradient(180deg, rgba(217,35,35,0.08), transparent 70%); transform:rotate(-18deg);}
.beam.b2{left:60%; background:linear-gradient(180deg, rgba(13,217,255,0.045), transparent 70%);}

/* ============ headings / eyebrow ============ */
h1,h2,h3,h4{font-family:'Anton', sans-serif; text-transform:uppercase; font-weight:400; line-height:0.98;}
.eyebrow{font-family:'Barlow Condensed', sans-serif; font-weight:800; letter-spacing:0.32em; text-transform:uppercase; font-size:0.76rem; color:var(--red);}
.italic{font-style:italic; transform:skewX(-5deg); display:inline-block;}

/* ============ NAVBAR ============ */
.site-header{position:sticky; top:0; z-index:100; background:rgba(13,13,13,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:14px clamp(20px,5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Anton'; font-size:1.15rem; letter-spacing:0.03em;}
.brand .mark{width:30px; height:30px; background:var(--red); color:var(--black); display:inline-flex; align-items:center; justify-content:center; font-size:0.9rem; clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%); flex-shrink:0;}
.primary-nav{display:flex; align-items:center; gap:clamp(14px,2.2vw,28px);}
.primary-nav a{position:relative; font-family:'Barlow Condensed'; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:0.85rem; padding:6px 2px; color:var(--text-dim);}
.primary-nav a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .22s;}
.primary-nav a:hover, .primary-nav a:focus-visible, .primary-nav a[aria-current="page"]{color:var(--white);}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after, .primary-nav a[aria-current="page"]::after{transform:scaleX(1);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--white); width:42px; height:36px; cursor:pointer; align-items:center; justify-content:center;}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{content:""; display:block; width:18px; height:2px; background:var(--white); position:relative; transition:transform .2s, opacity .2s;}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}
@media (max-width:760px){
  .nav-toggle{display:flex;}
  .primary-nav{position:fixed; top:60px; left:0; right:0; background:var(--black); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; padding:14px clamp(20px,5vw,56px) 24px; gap:14px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;}
  .primary-nav.open{opacity:1; transform:translateY(0); pointer-events:auto;}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed'; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:0.92rem;
  padding:13px 26px; background:var(--red); color:var(--white); border:none; cursor:pointer;
  clip-path:polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%); transition:transform .15s;
}
.btn:hover, .btn:focus-visible{animation:glitch .35s steps(2,end) 2;}
.btn.ghost{background:transparent; color:var(--white); border:1px solid var(--line); clip-path:polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);}
.btn.ghost:hover{border-color:var(--red);}
.btn.dark{background:var(--black); color:var(--white);}
@keyframes glitch{
  0%{transform:translate(0,0);} 20%{transform:translate(-2px,1px); box-shadow:2px 0 0 var(--white),-2px 0 0 var(--black);}
  40%{transform:translate(2px,-1px);} 60%{transform:translate(-1px,0); box-shadow:-2px 0 0 var(--white),2px 0 0 var(--black);}
  80%{transform:translate(1px,1px);} 100%{transform:translate(0,0); box-shadow:none;}
}

/* ============ SECTION SHELL ============ */
section{position:relative; z-index:2; padding:clamp(56px,8vw,100px) 0;}
.sec-head{margin-bottom:40px; max-width:66ch;}
.sec-head h2{font-size:clamp(2rem,5vw,3.2rem); color:var(--white); -webkit-text-stroke:2px rgba(217,35,35,0.35); paint-order:stroke fill;}
.sec-head p{margin-top:14px; color:var(--text-dim);}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============ HERO ============ */
.hero{padding:clamp(70px,11vw,120px) 0 clamp(50px,8vw,80px); position:relative;}
.hero .slash{position:absolute; top:10%; right:-8%; width:60%; height:5px; background:var(--red); transform:rotate(-7deg); opacity:0.9; z-index:0;}
.kicker{font-family:'Barlow Condensed'; font-weight:800; letter-spacing:0.4em; text-transform:uppercase; color:var(--red); font-size:0.85rem; margin-bottom:16px;}
.hero h1{font-size:clamp(2.8rem,9vw,6.2rem); font-style:italic; transform:skewX(-5deg); display:inline-block; text-shadow:4px 4px 0 var(--red);}
.hero .role{margin-top:20px; font-family:'Barlow Condensed'; font-weight:600; font-size:clamp(1.05rem,2.2vw,1.4rem); text-transform:uppercase; letter-spacing:0.06em; border-left:4px solid var(--red); padding-left:16px;}
.hero .tagline{margin-top:20px; max-width:56ch; color:var(--text-dim); font-size:clamp(1rem,1.5vw,1.1rem);}
.contact-row{margin-top:32px; display:flex; flex-wrap:wrap; gap:12px 26px; font-family:'Barlow Condensed'; font-weight:600; font-size:0.92rem;}
.contact-row a{border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .2s, color .2s;}
.contact-row a:hover{border-color:var(--red); color:var(--red);}
.hero-cta{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px;}

/* ============ STAT STRIP ============ */
.stat-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); margin-top:56px;}
.stat-strip .stat{background:var(--black-soft); padding:22px 20px;}
.stat-strip .n{font-family:'Anton'; font-style:italic; color:var(--red); font-size:clamp(1.6rem,3vw,2.1rem);}
.stat-strip .l{font-family:'Barlow Condensed'; letter-spacing:0.05em; text-transform:uppercase; font-size:0.78rem; color:var(--text-dimmer); margin-top:4px;}

/* ============ CARD / PANEL ============ */
.panel{position:relative; background:var(--white); color:var(--black); padding:28px 32px 28px 40px; clip-path:polygon(0 0, 100% 0, calc(100% - 46px) 100%, 0 100%); box-shadow:12px 0 0 var(--red-dim), 12px 0 0 4px var(--red); margin-left:12px;}
.panel::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--red); clip-path:inherit;}
.panel h3{font-size:1.4rem; font-style:italic;}
.panel .meta{font-family:'Barlow Condensed'; font-weight:700; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(13,13,13,0.55); margin-top:8px;}
.panel .org{font-family:'Barlow Condensed'; font-weight:700; color:var(--red); font-size:0.88rem; letter-spacing:0.04em; text-transform:uppercase;}
.panel ul.bullets{margin-top:14px; display:grid; gap:8px;}
.panel ul.bullets li{position:relative; padding-left:18px; color:rgba(13,13,13,0.85); font-size:0.96rem;}
.panel ul.bullets li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:2px; background:var(--red);}
.status-chip{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-family:'Barlow Condensed'; font-weight:800; font-size:0.68rem; letter-spacing:0.15em; color:var(--white); background:var(--black); padding:4px 10px; clip-path:polygon(0 0,100% 0,90% 100%,0 100%);}
.status-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--red);}

/* ============ DARK CARD (grid tiles) ============ */
.tile{position:relative; background:var(--black-card); border:1px solid var(--line); padding:26px; clip-path:polygon(0 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px)); transition:border-color .2s, transform .2s;}
.tile:hover{border-color:var(--red); transform:translateY(-4px);}
.tile h3{font-size:1.15rem; font-style:italic; margin-bottom:8px;}
.tile p{font-size:0.94rem; color:var(--text-dim); margin-bottom:16px;}
.tile .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
.tag{font-family:'Barlow Condensed'; font-weight:600; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-dimmer); border:1px solid var(--line); padding:3px 9px;}
.tile-link{font-family:'Barlow Condensed'; font-weight:700; letter-spacing:0.08em; font-size:0.85rem; text-transform:uppercase; color:var(--red); display:inline-flex; align-items:center; gap:8px;}
.tile-link::after{content:"→"; transition:transform .2s;}
.tile-link:hover::after{transform:translateX(4px);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px;}
@media (max-width:760px){.grid-2{grid-template-columns:1fr;}}

/* ============ CHIP / BAR LIST (skills) ============ */
.bar-list{display:flex; flex-direction:column; gap:10px;}
.bar-outer{position:relative; height:70px;}
.bar-red{position:absolute; inset:0; background:var(--red); clip-path:polygon(0 0,100% 0,96% 100%,0 100%); opacity:0; transition:opacity .2s;}
.bar-outer:hover .bar-red, .bar-outer:focus-within .bar-red{opacity:1;}
.bar{position:relative; height:100%; background:var(--black-soft); border:1px solid var(--line); overflow:hidden; clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,0 100%); display:flex; align-items:center;}
.bar-fill{position:absolute; inset:0; background:var(--white); clip-path:polygon(100% 0,100% 0,calc(100% - 30px) 100%,calc(100% - 30px) 100%); transition:clip-path .35s cubic-bezier(.22,1,.36,1); z-index:0;}
.bar-outer:hover .bar-fill, .bar-outer:focus-within .bar-fill{clip-path:polygon(24% 0,100% 0,calc(100% - 18px) 100%,calc(24% + 80px) 100%);}
.bar-content{position:relative; z-index:1; width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 24px 0 20px; gap:14px;}
.bar-label{font-family:'Anton'; font-style:italic; font-size:1.1rem; color:rgba(245,245,245,0.9); transition:color .18s;}
.bar-outer:hover .bar-label, .bar-outer:focus-within .bar-label{color:var(--black);}
.bar-tags{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width:58%;}
.btag{font-family:'Barlow Condensed'; font-weight:600; font-size:0.76rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--text-dimmer); transition:color .18s;}
.bar-outer:hover .btag, .bar-outer:focus-within .btag{color:rgba(13,13,13,0.65);}
@media (max-width:640px){.bar-tags{display:none;} .bar-outer{height:60px;}}

/* ============ TIMELINE ============ */
.timeline{display:grid; gap:32px; position:relative;}
.timeline .panel{margin-left:20px;}

/* ============ TROPHY / EDU / LANG ============ */
.trophy-row{display:flex; flex-direction:column; gap:10px;}
.trophy{display:flex; align-items:center; gap:12px; border:1px solid var(--line); padding:12px 16px; font-family:'Barlow Condensed'; font-weight:600; font-size:0.9rem; background:var(--black-soft); clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));}
.trophy .star{color:var(--red);}
.edu{background:var(--black-soft); border:1px solid var(--line); padding:18px 22px; clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px)); margin-bottom:14px;}
.edu h3{font-family:'Anton'; font-style:italic; font-size:1.05rem;}
.edu .school{font-family:'Barlow Condensed'; color:var(--red); font-weight:700; text-transform:uppercase; font-size:0.8rem; letter-spacing:0.05em; margin-top:4px;}
.edu .when{font-family:'Barlow Condensed'; font-weight:600; font-size:0.8rem; color:var(--text-dimmer); margin-top:6px;}
.lang-row{display:flex; flex-wrap:wrap; gap:12px;}
.lang-chip{font-family:'Barlow Condensed'; font-weight:700; font-size:0.85rem; border:1px solid var(--line); padding:8px 16px; letter-spacing:0.03em;}
.lang-chip b{color:var(--red);}

/* ============ PROJECT DETAIL ============ */
.breadcrumb{font-family:'Barlow Condensed'; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:0.8rem; color:var(--text-dimmer); margin-bottom:18px; display:inline-flex; align-items:center; gap:8px;}
.breadcrumb a{color:var(--red);}
.project-hero{padding-top:20px;}
.project-tag{display:inline-block; font-family:'Barlow Condensed'; font-weight:800; font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--black); background:var(--red); padding:5px 14px; margin-bottom:16px; clip-path:polygon(0 0,100% 0,92% 100%,0 100%);}
.project-hero h1{font-size:clamp(2.4rem,6.5vw,4.2rem); font-style:italic; transform:skewX(-4deg); display:inline-block;}
.project-hero .sub{margin-top:10px; font-family:'Barlow Condensed'; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; font-size:1rem; color:var(--text-dim);}
.project-body{max-width:75ch; margin-top:26px; color:var(--text-dim); font-size:1.05rem; display:grid; gap:16px;}
.burst{}
.burst .n{font-family:'Anton'; font-style:italic; font-size:clamp(1.7rem,3.2vw,2.2rem); color:var(--red);}
.burst .l{font-family:'Barlow Condensed'; font-weight:700; font-size:0.76rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-dimmer);}

/* ============ CONTACT ============ */
.card-wrap{display:flex; justify-content:center;}
.calling-card{position:relative; max-width:580px; width:100%; background:var(--red); color:var(--white); padding:clamp(34px,6vw,54px); clip-path:polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%); box-shadow:10px 10px 0 rgba(245,245,245,0.06);}
.calling-card::before{content:""; position:absolute; inset:14px; border:2px dashed rgba(13,13,13,0.35); clip-path:polygon(0 0,100% 0,100% 86%,86% 100%,0 100%); pointer-events:none;}
.calling-card .eyebrow2{font-family:'Barlow Condensed'; font-weight:800; letter-spacing:0.3em; text-transform:uppercase; font-size:0.8rem; color:rgba(13,13,13,0.65);}
.calling-card h2{font-size:clamp(2rem,5.6vw,3rem); font-style:italic; margin:10px 0 16px; -webkit-text-stroke:3px var(--black); paint-order:stroke fill;}
.calling-card p{color:rgba(13,13,13,0.9); max-width:44ch; margin-bottom:24px;}
.card-links{display:grid; gap:10px; margin-bottom:28px; font-family:'Barlow Condensed'; font-weight:700;}
.card-links a{display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(13,13,13,0.3); padding-bottom:8px; width:fit-content; color:var(--black);}
.card-links a:hover{text-decoration:underline; text-underline-offset:4px;}
.contact-note{max-width:60ch; margin:26px auto 0; text-align:center; color:var(--text-dimmer); font-size:0.9rem;}

/* ============ PHOTO FRAME (persona-style) ============ */
.photo-frame{
  position:relative;
  display:block;
  width:100%;
  max-width:380px;
  margin:0 auto;
  padding:9px;
  background:linear-gradient(135deg, var(--red), #7a1414);
  clip-path:polygon(0 0, 100% 0, 100% 92%, 90% 100%, 0 100%);
  box-shadow:16px 16px 0 rgba(217,35,35,0.12);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.photo-frame:hover{transform:rotate(-1deg) translateY(-4px);}
.photo-frame .frame-inner{
  position:relative;
  background:var(--black);
  padding:5px;
  clip-path:inherit;
  overflow:hidden;
}
.photo-frame .frame-inner::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(-45deg, transparent 0 18px, rgba(217,35,35,0.06) 18px 20px);
  pointer-events:none; z-index:2;
}
.photo-frame img{
  position:relative; z-index:1;
  display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center;
  clip-path:polygon(0 0, 100% 0, 100% 89%, 89% 100%, 0 100%);
  filter:grayscale(10%) contrast(1.1) saturate(0.92);
}
.photo-frame .corner-tag{
  position:absolute; top:20px; left:0px; z-index:4;
  font-family:'Barlow Condensed'; font-weight:800; font-size:0.68rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--white); background:var(--black);
  padding:5px 12px 5px 16px;
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
}
.photo-frame .halftone{
  position:absolute; bottom:-14px; right:-14px; width:80px; height:80px;
  background-image:radial-gradient(var(--white) 1.5px, transparent 1.5px);
  background-size:7px 7px; opacity:0.55; z-index:0; pointer-events:none;
}
.photo-frame .frame-star{
  position:absolute; top:-16px; right:-12px; z-index:5;
  font-family:'Anton'; font-size:1.5rem; color:var(--white);
  filter:drop-shadow(2px 2px 0 var(--red)) drop-shadow(-1px -1px 0 var(--black));
  transform:rotate(12deg);
}
.hero-grid{display:grid; grid-template-columns:1.25fr 0.9fr; gap:44px; align-items:center;}
.hero-grid .hero-text{min-width:0;}
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-grid .hero-photo{order:-1; max-width:280px; margin:0 auto;}
}

/* ============ FOOTER ============ */
.site-footer{position:relative; z-index:2; border-top:1px solid var(--line); padding:34px 0; margin-top:20px;}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;}
.footer-links{display:flex; flex-wrap:wrap; gap:18px; font-family:'Barlow Condensed'; font-weight:600; font-size:0.85rem; color:var(--text-dim);}
.footer-links a:hover{color:var(--red);}
.footer-note{font-family:'Barlow Condensed'; letter-spacing:0.06em; font-size:0.78rem; color:var(--text-dimmer);}